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"./PropDocs-CM9cNaM3.js";import{t as n}from"./flex-oubf-_sd.js";import{t as r}from"./Example-DfDcphuv.js";var i=e();function a(){return(0,i.jsxs)(n,{gap:`2xl`,children:[(0,i.jsx)(`div`,{children:`Item 1`}),(0,i.jsx)(`div`,{children:`Item 2`}),(0,i.jsx)(`div`,{children:`Item 3`})]})}a.slug=`/examples/flex/basic`;function o(){return(0,i.jsxs)(n,{direction:`column`,gap:`2xl`,children:[(0,i.jsxs)(n,{direction:`row`,gap:`2xl`,children:[(0,i.jsx)(`div`,{children:`Row`}),(0,i.jsx)(`div`,{children:`Item 2`}),(0,i.jsx)(`div`,{children:`Item 3`})]}),(0,i.jsxs)(n,{direction:`column`,gap:`2xl`,children:[(0,i.jsx)(`div`,{children:`Column`}),(0,i.jsx)(`div`,{children:`Item 2`}),(0,i.jsx)(`div`,{children:`Item 3`})]}),(0,i.jsxs)(n,{direction:`row-reverse`,gap:`2xl`,children:[(0,i.jsx)(`div`,{children:`Row Reverse`}),(0,i.jsx)(`div`,{children:`Item 2`}),(0,i.jsx)(`div`,{children:`Item 3`})]}),(0,i.jsxs)(n,{direction:`column-reverse`,gap:`2xl`,children:[(0,i.jsx)(`div`,{children:`Column Reverse`}),(0,i.jsx)(`div`,{children:`Item 2`}),(0,i.jsx)(`div`,{children:`Item 3`})]})]})}o.slug=`/examples/flex/directions`;var s={container:{kmVPX3:`x1uz70x1`,kVAM5u:`x183gvl0`,ksu8eU:`x1y0btm7`,kMzoRj:`xmkeg23`,k1K539:`xyi6m4r`,$$css:!0}};function c(){return(0,i.jsxs)(`div`,{children:[(0,i.jsxs)(n,{justify:`start`,gap:`2xl`,style:s.container,children:[(0,i.jsx)(`div`,{children:`Start`}),(0,i.jsx)(`div`,{children:`Item 2`}),(0,i.jsx)(`div`,{children:`Item 3`})]}),(0,i.jsxs)(n,{justify:`center`,gap:`2xl`,style:s.container,children:[(0,i.jsx)(`div`,{children:`Center`}),(0,i.jsx)(`div`,{children:`Item 2`}),(0,i.jsx)(`div`,{children:`Item 3`})]}),(0,i.jsxs)(n,{justify:`end`,gap:`2xl`,style:s.container,children:[(0,i.jsx)(`div`,{children:`End`}),(0,i.jsx)(`div`,{children:`Item 2`}),(0,i.jsx)(`div`,{children:`Item 3`})]}),(0,i.jsxs)(n,{justify:`between`,gap:`2xl`,style:s.container,children:[(0,i.jsx)(`div`,{children:`Between`}),(0,i.jsx)(`div`,{children:`Item 2`}),(0,i.jsx)(`div`,{children:`Item 3`})]})]})}c.slug=`/examples/flex/alignment`;var l={container:{kmVPX3:`x1uz70x1`,kVAM5u:`x183gvl0`,ksu8eU:`x1y0btm7`,kMzoRj:`xmkeg23`,$$css:!0}};function u(){return(0,i.jsx)(`div`,{children:(0,i.jsxs)(n,{wrap:!0,gap:`2xl`,style:l.container,children:[(0,i.jsx)(`div`,{className:`x7gbtqy x1yjn231`,children:`Item 1`}),(0,i.jsx)(`div`,{className:`x7gbtqy x1yjn231`,children:`Item 2`}),(0,i.jsx)(`div`,{className:`x7gbtqy x1yjn231`,children:`Item 3`}),(0,i.jsx)(`div`,{className:`x7gbtqy x1yjn231`,children:`Item 4`}),(0,i.jsx)(`div`,{className:`x7gbtqy x1yjn231`,children:`Item 5`})]})})}u.slug=`/examples/flex/wrap`;function d(){return(0,i.jsxs)(n,{direction:`column`,gap:`2xl`,children:[(0,i.jsxs)(n,{gap:`xs`,children:[(0,i.jsx)(`div`,{style:{padding:`0.5rem`,background:`#f0f0f0`},children:`Gap 1`}),(0,i.jsx)(`div`,{style:{padding:`0.5rem`,background:`#f0f0f0`},children:`Gap 1`}),(0,i.jsx)(`div`,{style:{padding:`0.5rem`,background:`#f0f0f0`},children:`Gap 1`})]}),(0,i.jsxs)(n,{gap:`2xl`,children:[(0,i.jsx)(`div`,{style:{padding:`0.5rem`,background:`#f0f0f0`},children:`Gap 4`}),(0,i.jsx)(`div`,{style:{padding:`0.5rem`,background:`#f0f0f0`},children:`Gap 4`}),(0,i.jsx)(`div`,{style:{padding:`0.5rem`,background:`#f0f0f0`},children:`Gap 4`})]}),(0,i.jsxs)(n,{gap:`7xl`,children:[(0,i.jsx)(`div`,{style:{padding:`0.5rem`,background:`#f0f0f0`},children:`Gap 8`}),(0,i.jsx)(`div`,{style:{padding:`0.5rem`,background:`#f0f0f0`},children:`Gap 8`}),(0,i.jsx)(`div`,{style:{padding:`0.5rem`,background:`#f0f0f0`},children:`Gap 8`})]})]})}d.slug=`/examples/flex/gap`;var f=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Features`,id:`features`,children:[{depth:3,value:`Directions`,id:`directions`},{depth:3,value:`Alignment`,id:`alignment`},{depth:3,value:`Wrap`,id:`wrap`},{depth:3,value:`Gap`,id:`gap`}]},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function p(e){let n={a:`a`,code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r,{src:a}),`
2`,(0,i.jsx)(n.h2,{id:`installation`,children:`Installation`}),`
3`,(0,i.jsx)(n.p,{children:`Run the following command to add the flex component to your project.`}),`
4`,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(n.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,i.jsx)(n.code,{className:`language-bash`,children:(0,i.jsxs)(n.span,{className:`line`,children:[(0,i.jsx)(n.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,i.jsx)(n.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,i.jsx)(n.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,i.jsx)(n.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` flex`})]})})})}),`
5`,(0,i.jsx)(n.h2,{id:`features`,children:`Features`}),`
6`,(0,i.jsx)(n.h3,{id:`directions`,children:`Directions`}),`
7`,(0,i.jsx)(n.p,{children:`Flex containers can be arranged in different directions.`}),`
8`,(0,i.jsx)(r,{src:o}),`
9`,(0,i.jsx)(n.h3,{id:`alignment`,children:`Alignment`}),`
10`,(0,i.jsx)(n.p,{children:`Flex items can be aligned using various justify and align properties.`}),`
11`,(0,i.jsx)(r,{src:c}),`
12`,(0,i.jsx)(n.h3,{id:`wrap`,children:`Wrap`}),`
13`,(0,i.jsx)(n.p,{children:`Flex containers can wrap their children to new lines when needed.`}),`
14`,(0,i.jsx)(r,{src:u}),`
15`,(0,i.jsx)(n.h3,{id:`gap`,children:`Gap`}),`
16`,(0,i.jsx)(n.p,{children:`Flex containers support different gap sizes between items.`}),`
17`,(0,i.jsx)(r,{src:d}),`
18`,(0,i.jsx)(n.h2,{id:`props`,children:`Props`}),`
19`,(0,i.jsx)(n.p,{children:`This is a custom component built for flexible layouts.`}),`
20`,(0,i.jsx)(t,{components:[`Flex`]}),`
21`,(0,i.jsx)(n.h2,{id:`related-components`,children:`Related Components`}),`
22`,(0,i.jsxs)(n.ul,{children:[`
23`,(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:`/docs/components/layout/grid`,children:`Grid`}),` - For two-dimensional layouts`]}),`
24`,(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:`/docs/components/content/card`,children:`Card`}),` - For grouping content in flex layouts`]}),`
25`,(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:`/docs/components/buttons/button-group`,children:`ButtonGroup`}),` - For grouping buttons in flex layouts`]}),`
26`,(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:`/docs/components/content/separator`,children:`Separator`}),` - For visual separation in flex layouts`]}),`
27`]})]})}function m(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}export{m as default,f as toc};