A design system in a box.
hip-ui.tngl.io/docs/introduction
1import{t as e}from"./jsx-runtime-D-oznMWL.js";import{f as t}from"./button-B3FtKFjE.js";import{r as n,t as r}from"./PropDocs-CM9cNaM3.js";import{t as i}from"./Example-DfDcphuv.js";import{n as a,t as o}from"./segmented-control-DXzNVyUx.js";var s=t(`columns-2`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}],[`path`,{d:`M12 3v18`,key:`108xh3`}]]),c=t(`list`,[[`path`,{d:`M3 5h.01`,key:`18ugdj`}],[`path`,{d:`M3 12h.01`,key:`nlz23k`}],[`path`,{d:`M3 19h.01`,key:`noohij`}],[`path`,{d:`M8 5h13`,key:`1pao27`}],[`path`,{d:`M8 12h13`,key:`1za7za`}],[`path`,{d:`M8 19h13`,key:`m83p4d`}]]),l=e(),u={root:{kzqmXN:`xh8yej3`,$$css:!0}};function d(){return(0,l.jsxs)(o,{style:u.root,defaultSelectedKey:`option1`,children:[(0,l.jsx)(a,{id:`option1`,children:`Option 1`}),(0,l.jsx)(a,{id:`option2`,children:`Option 2`}),(0,l.jsx)(a,{id:`option3`,children:`Option 3`})]})}d.slug=`/examples/segmented-control/basic`;function f(){return(0,l.jsxs)(`div`,{className:`x1h4iudz x78zum5 xdt5ytf xh8yej3`,children:[(0,l.jsxs)(`div`,{children:[(0,l.jsx)(`h3`,{children:`Small`}),(0,l.jsxs)(o,{size:`sm`,defaultSelectedKey:`option1-sm`,children:[(0,l.jsx)(a,{id:`option1-sm`,children:`Option 1`}),(0,l.jsx)(a,{id:`option2-sm`,children:`Option 2`}),(0,l.jsx)(a,{id:`option3-sm`,children:`Option 3`})]})]}),(0,l.jsxs)(`div`,{children:[(0,l.jsx)(`h3`,{children:`Medium`}),(0,l.jsxs)(o,{size:`md`,defaultSelectedKey:`option1-md`,children:[(0,l.jsx)(a,{id:`option1-md`,children:`Option 1`}),(0,l.jsx)(a,{id:`option2-md`,children:`Option 2`}),(0,l.jsx)(a,{id:`option3-md`,children:`Option 3`})]})]}),(0,l.jsxs)(`div`,{children:[(0,l.jsx)(`h3`,{children:`Large`}),(0,l.jsxs)(o,{size:`lg`,defaultSelectedKey:`option1-lg`,children:[(0,l.jsx)(a,{id:`option1-lg`,children:`Option 1`}),(0,l.jsx)(a,{id:`option2-lg`,children:`Option 2`}),(0,l.jsx)(a,{id:`option3-lg`,children:`Option 3`})]})]})]})}f.slug=`/examples/segmented-control/size`;var p={root:{kzqmXN:`xh8yej3`,$$css:!0}};function m(){return(0,l.jsxs)(o,{style:p.root,defaultSelectedKey:`list`,children:[(0,l.jsxs)(a,{id:`list`,children:[(0,l.jsx)(c,{}),`List`]}),(0,l.jsxs)(a,{id:`grid`,children:[(0,l.jsx)(n,{}),`Grid`]}),(0,l.jsxs)(a,{id:`columns`,children:[(0,l.jsx)(s,{}),`Columns`]})]})}m.slug=`/examples/segmented-control/with-icons`;var h=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Features`,id:`features`,children:[{depth:3,value:`Sizes`,id:`sizes`},{depth:3,value:`With Icons`,id:`with-icons`}]},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function g(e){let t={a:`a`,code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i,{src:d}),`
2`,(0,l.jsx)(t.h2,{id:`installation`,children:`Installation`}),`
3`,(0,l.jsx)(t.p,{children:`Run the following command to add the segmented control component to your project.`}),`
4`,(0,l.jsx)(l.Fragment,{children:(0,l.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,l.jsx)(t.code,{className:`language-bash`,children:(0,l.jsxs)(t.span,{className:`line`,children:[(0,l.jsx)(t.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,l.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,l.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,l.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` segmented-control`})]})})})}),`
5`,(0,l.jsx)(t.h2,{id:`features`,children:`Features`}),`
6`,(0,l.jsx)(t.h3,{id:`sizes`,children:`Sizes`}),`
7`,(0,l.jsx)(t.p,{children:`Segmented controls support three different sizes: small, medium, and large.`}),`
8`,(0,l.jsx)(i,{src:f}),`
9`,(0,l.jsx)(t.h3,{id:`with-icons`,children:`With Icons`}),`
10`,(0,l.jsx)(t.p,{children:`Segmented control items can include icons alongside text labels.`}),`
11`,(0,l.jsx)(i,{src:m}),`
12`,(0,l.jsx)(t.h2,{id:`props`,children:`Props`}),`
13`,(0,l.jsxs)(t.p,{children:[`This component is built using `,(0,l.jsx)(t.a,{href:`https://react-spectrum.adobe.com/react-aria/ToggleButtonGroup.html`,children:`React Aria ToggleButtonGroup`}),`.`]}),`
14`,(0,l.jsx)(r,{components:[`SegmentedControl`,`SegmentedControlItem`]}),`
15`,(0,l.jsx)(t.h2,{id:`related-components`,children:`Related Components`}),`
16`,(0,l.jsxs)(t.ul,{children:[`
17`,(0,l.jsxs)(t.li,{children:[(0,l.jsx)(t.a,{href:`/docs/components/navigation/tabs`,children:`Tabs`}),` - For organizing content into multiple sections`]}),`
18`,(0,l.jsxs)(t.li,{children:[(0,l.jsx)(t.a,{href:`/docs/components/buttons/toggle-button-group`,children:`ToggleButtonGroup`}),` - For grouping toggle buttons together`]}),`
19`,(0,l.jsxs)(t.li,{children:[(0,l.jsx)(t.a,{href:`/docs/components/form/radio`,children:`Radio`}),` - For single-selection from multiple options`]}),`
20`]})]})}function _(e={}){let{wrapper:t}=e.components||{};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(g,{...e})}):g(e)}export{_ as default,h as toc};