A design system in a box.
hip-ui.tngl.io/docs/introduction
1import{t as e}from"./jsx-runtime-D-oznMWL.js";import{t}from"./button-B3FtKFjE.js";import"./PropDocs-CM9cNaM3.js";import{t as n}from"./flex-oubf-_sd.js";import{t as r}from"./text-B77JGejP.js";import{t as i}from"./Example-DfDcphuv.js";import{t as a}from"./popover-xeNePzcC.js";var o=e();function s(){return(0,o.jsx)(a,{trigger:(0,o.jsx)(t,{children:`Open Popover`}),children:(0,o.jsxs)(n,{direction:`column`,gap:`xl`,children:[(0,o.jsx)(r,{size:`lg`,weight:`medium`,children:`Popover Content`}),(0,o.jsx)(r,{size:`base`,children:`This is the content inside the popover.`})]})})}s.slug=`/examples/popover/basic`;var c=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function l(e){let t={a:`a`,code:`code`,h2:`h2`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(i,{src:s}),`
2`,(0,o.jsx)(t.h2,{id:`installation`,children:`Installation`}),`
3`,(0,o.jsx)(t.p,{children:`Run the following command to add the popover component to your project.`}),`
4`,(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(t.pre,{className:`shiki shiki-themes github-light github-dark`,style:{backgroundColor:`light-dark(#fff, #24292e)`,"--shiki-light-bg":`#fff`,"--shiki-dark-bg":`#24292e`,color:`light-dark(#24292e, #e1e4e8)`,"--shiki-light":`#24292e`,"--shiki-dark":`#e1e4e8`},tabIndex:`0`,children:(0,o.jsx)(t.code,{className:`language-bash`,children:(0,o.jsxs)(t.span,{className:`line`,children:[(0,o.jsx)(t.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,o.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,o.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,o.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` popover`})]})})})}),`
5`,(0,o.jsx)(t.h2,{id:`props`,children:`Props`}),`
6`,(0,o.jsxs)(t.p,{children:[`This component is built using the `,(0,o.jsx)(t.a,{href:`https://react-spectrum.adobe.com/react-aria/Popover.html`,children:`React Aria Popover`}),`.`]}),`
7`,`
8`,(0,o.jsx)(t.h2,{id:`related-components`,children:`Related Components`}),`
9`,(0,o.jsxs)(t.ul,{children:[`
10`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:`/docs/components/overlays/dialog`,children:`Dialog`}),` - For modal overlays`]}),`
11`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:`/docs/components/overlays/tooltip`,children:`Tooltip`}),` - For contextual help overlays`]}),`
12`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:`/docs/components/collections/menu`,children:`Menu`}),` - For dropdown menus`]}),`
13`,(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:`/docs/components/collections/context-menu`,children:`ContextMenu`}),` - For right-click context menus`]}),`
14`]})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}export{u as default,c as toc};