hipstersmoothie.com
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,t as n}from"./button-B3FtKFjE.js";import{t as r}from"./checkbox-DUW1NmBn.js";import{t as i}from"./icon-button-BFGSYviR.js";import{t as a}from"./PropDocs-CM9cNaM3.js";import{t as o}from"./circle-C8wI6NqR.js";import{a as s,i as c,n as l,r as u,t as d}from"./toolbar-CvoizF7Q.js";import{t as f}from"./toggle-button-BayrYJIp.js";import{t as p}from"./Example-DfDcphuv.js";var m=t(`move`,[[`path`,{d:`M12 2v20`,key:`t6zp3m`}],[`path`,{d:`m15 19-3 3-3-3`,key:`11eu04`}],[`path`,{d:`m19 9 3 3-3 3`,key:`1mg7y2`}],[`path`,{d:`M2 12h20`,key:`9i4pu4`}],[`path`,{d:`m5 9-3 3 3 3`,key:`j64kie`}],[`path`,{d:`m9 5 3-3 3 3`,key:`l8vdw6`}]]),h=t(`paintbrush`,[[`path`,{d:`m14.622 17.897-10.68-2.913`,key:`vj2p1u`}],[`path`,{d:`M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z`,key:`18tc5c`}],[`path`,{d:`M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15`,key:`ytzfxy`}]]),g=e();function _(){return(0,g.jsxs)(d,{"aria-label":`Text formatting`,children:[(0,g.jsxs)(l,{"aria-label":`Style`,children:[(0,g.jsx)(f,{"aria-label":`Bold`,variant:`secondary`,children:(0,g.jsx)(`b`,{children:`B`})}),(0,g.jsx)(f,{"aria-label":`Italic`,variant:`secondary`,children:(0,g.jsx)(`i`,{children:`I`})}),(0,g.jsx)(f,{"aria-label":`Underline`,variant:`secondary`,children:(0,g.jsx)(`u`,{children:`U`})})]}),(0,g.jsx)(u,{}),(0,g.jsxs)(l,{"aria-label":`Clipboard`,children:[(0,g.jsx)(n,{variant:`secondary`,children:`Copy`}),(0,g.jsx)(n,{variant:`secondary`,children:`Paste`}),(0,g.jsx)(n,{variant:`secondary`,children:`Cut`})]})]})}_.slug=`/examples/toolbar/basic`;function v(){return(0,g.jsxs)(d,{"aria-label":`Tools`,orientation:`vertical`,children:[(0,g.jsxs)(l,{"aria-label":`Select`,children:[(0,g.jsx)(i,{"aria-label":`Move`,variant:`secondary`,children:(0,g.jsx)(m,{})}),(0,g.jsx)(i,{"aria-label":`Rectangle`,variant:`secondary`,children:(0,g.jsx)(c,{})}),(0,g.jsx)(i,{"aria-label":`Circle`,variant:`secondary`,children:(0,g.jsx)(o,{})})]}),(0,g.jsx)(u,{}),(0,g.jsxs)(l,{"aria-label":`Draw`,children:[(0,g.jsx)(i,{"aria-label":`Brush`,variant:`secondary`,children:(0,g.jsx)(h,{})}),(0,g.jsx)(i,{"aria-label":`Pencil`,variant:`secondary`,children:(0,g.jsx)(s,{})})]})]})}v.slug=`/examples/toolbar/vertical`;function y(){return(0,g.jsxs)(d,{"aria-label":`Text formatting`,children:[(0,g.jsxs)(l,{"aria-label":`Style`,children:[(0,g.jsx)(f,{"aria-label":`Bold`,variant:`secondary`,children:(0,g.jsx)(`b`,{children:`B`})}),(0,g.jsx)(f,{"aria-label":`Italic`,variant:`secondary`,children:(0,g.jsx)(`i`,{children:`I`})}),(0,g.jsx)(f,{"aria-label":`Underline`,variant:`secondary`,children:(0,g.jsx)(`u`,{children:`U`})})]}),(0,g.jsx)(u,{}),(0,g.jsxs)(l,{"aria-label":`Clipboard`,children:[(0,g.jsx)(n,{variant:`secondary`,children:`Copy`}),(0,g.jsx)(n,{variant:`secondary`,children:`Paste`}),(0,g.jsx)(n,{variant:`secondary`,children:`Cut`})]}),(0,g.jsx)(u,{}),(0,g.jsx)(r,{children:`Night Mode`})]})}y.slug=`/examples/toolbar/with-checkbox`;var b=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Features`,id:`features`,children:[{depth:3,value:`Vertical Orientation`,id:`vertical-orientation`},{depth:3,value:`Interactive Controls`,id:`interactive-controls`}]},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function x(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,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(p,{src:_}),`
2`,(0,g.jsx)(t.h2,{id:`installation`,children:`Installation`}),`
3`,(0,g.jsx)(t.p,{children:`Run the following command to add the toolbar component to your project.`}),`
4`,(0,g.jsx)(g.Fragment,{children:(0,g.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,g.jsx)(t.code,{className:`language-bash`,children:(0,g.jsxs)(t.span,{className:`line`,children:[(0,g.jsx)(t.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,g.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,g.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,g.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` toolbar`})]})})})}),`
5`,(0,g.jsx)(t.h2,{id:`features`,children:`Features`}),`
6`,(0,g.jsx)(t.h3,{id:`vertical-orientation`,children:`Vertical Orientation`}),`
7`,(0,g.jsx)(t.p,{children:`Toolbars can be oriented vertically for vertical layouts. The arrow key navigation behavior adapts accordingly.`}),`
8`,(0,g.jsx)(p,{src:v}),`
9`,(0,g.jsx)(t.h3,{id:`interactive-controls`,children:`Interactive Controls`}),`
10`,(0,g.jsxs)(t.p,{children:[`Toolbars can contain various interactive controls including buttons, toggle buttons, checkboxes, and more.
11Use the `,(0,g.jsx)(t.code,{children:`ToolbarGroup`}),` component to group related controls together.`]}),`
12`,(0,g.jsx)(p,{src:y}),`
13`,(0,g.jsx)(t.h2,{id:`props`,children:`Props`}),`
14`,(0,g.jsxs)(t.p,{children:[`This component is built using `,(0,g.jsx)(t.a,{href:`https://react-spectrum.adobe.com/react-aria/Toolbar.html`,children:`React Aria Toolbar`}),`.`]}),`
15`,(0,g.jsx)(a,{components:[`Toolbar`,`ToolbarGroup`,`ToolbarSeparator`]}),`
16`,(0,g.jsx)(t.h2,{id:`related-components`,children:`Related Components`}),`
17`,(0,g.jsxs)(t.ul,{children:[`
18`,(0,g.jsxs)(t.li,{children:[(0,g.jsx)(t.a,{href:`/docs/components/buttons/button`,children:`Button`}),` - For clickable actions in toolbars`]}),`
19`,(0,g.jsxs)(t.li,{children:[(0,g.jsx)(t.a,{href:`/docs/components/buttons/toggle-button`,children:`ToggleButton`}),` - For toggleable buttons in toolbars`]}),`
20`,(0,g.jsxs)(t.li,{children:[(0,g.jsx)(t.a,{href:`/docs/components/buttons/button-group`,children:`ButtonGroup`}),` - For grouping buttons together`]}),`
21`,(0,g.jsxs)(t.li,{children:[(0,g.jsx)(t.a,{href:`/docs/components/buttons/toggle-button-group`,children:`ToggleButtonGroup`}),` - For grouping toggle buttons together`]}),`
22`]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,g.jsx)(t,{...e,children:(0,g.jsx)(x,{...e})}):x(e)}export{S as default,b as toc};