A design system in a box.
hip-ui.tngl.io/docs/introduction
1import{i as e,t}from"./jsx-runtime-D-oznMWL.js";import{t as n}from"./react-DNjXG-IQ.js";import{l as r,lt as i}from"./button-B3FtKFjE.js";import{_ as a}from"./typography.stylex-ZkAqsnF0.js";import{n as o,t as s}from"./Modal-BkSrc0q6.js";import{t as c}from"./useFilter-DcdqT13M.js";import{t as l}from"./PropDocs-CM9cNaM3.js";import{l as u,n as d}from"./Dialog-I4SMYRTn.js";import{t as f}from"./search-field-cB5nPedo.js";import{t as p}from"./Autocomplete-Bc9WtO7c.js";import{t as m}from"./Example-DfDcphuv.js";import{t as h}from"./separator-Da7WLHKG.js";import{t as g}from"./useDialogStyles-TqxL-C9A.js";import{n as _}from"./menu-CF7cfwmN.js";var v=e(n(),1),y=t();function b({defaultOpen:e,isOpen:t,onOpenChange:n,filter:l,placeholder:m=`Search commands`,children:_,defaultInputValue:b,disableAutoFocusFirst:x,disableVirtualFocus:S,inputValue:C,onInputChange:w,disableGlobalShortcut:T=!1}){let E=c({sensitivity:`base`}),D=g({size:`sm`}),[O,k]=i(t,e??!1,n),A=(0,v.useCallback)(()=>{k(!1)},[k]);return(0,v.useEffect)(()=>{if(T)return;function e(e){e.metaKey&&e.key===`k`&&k(!0)}return globalThis.addEventListener(`keydown`,e),()=>{globalThis.removeEventListener(`keydown`,e)}},[k,T]),(0,y.jsx)(r,{value:`lg`,children:(0,y.jsx)(o,{isDismissable:!0,isOpen:O,onOpenChange:k,...a(D.overlay),children:(0,y.jsx)(s,{...a(D.modal),children:(0,y.jsx)(d,{...a(D.dialog),children:(0,y.jsxs)(p,{filter:l??E.contains,defaultInputValue:b,disableAutoFocusFirst:x,disableVirtualFocus:S,inputValue:C,onInputChange:w,children:[(0,y.jsx)(`div`,{className:`x1ahid4x xm1heco x177qail x1ust0yu`,children:(0,y.jsx)(f,{placeholder:m,autoFocus:!0})}),(0,y.jsx)(h,{}),(0,y.jsx)(u,{className:`x1iyjqo2 xj0cscc x1qus3vw x2lwn1j x1odjw0f xu6byj2 xm1heco x177qail x4do6cm`,onAction:A,children:_})]})})})})})}var x=[{id:`item1`,name:`Item 1`},{id:`item2`,name:`Item 2`},{id:`item3`,name:`Item 3`}];function S(){return(0,y.jsx)(b,{children:x.map(e=>(0,y.jsx)(_,{id:e.id,children:e.name},e.id))})}S.slug=`/examples/command-menu/basic`;var C=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function w(e){let t={a:`a`,code:`code`,h2:`h2`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,...e.components};return(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(m,{src:S}),`
2`,(0,y.jsx)(t.h2,{id:`installation`,children:`Installation`}),`
3`,(0,y.jsx)(t.p,{children:`Run the following command to add the command menu component to your project.`}),`
4`,(0,y.jsx)(y.Fragment,{children:(0,y.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,y.jsx)(t.code,{className:`language-bash`,children:(0,y.jsxs)(t.span,{className:`line`,children:[(0,y.jsx)(t.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,y.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,y.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,y.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` command-menu`})]})})})}),`
5`,(0,y.jsx)(t.h2,{id:`props`,children:`Props`}),`
6`,(0,y.jsx)(t.p,{children:`The command menu is a custom component built using a SearchField, Dialog, and Menu.`}),`
7`,(0,y.jsx)(l,{components:[`CommandMenu`,`CommandMenuItem`,`CommandMenuSection`,`CommandMenuSectionHeader`,`CommandMenuSeparator`]}),`
8`,(0,y.jsx)(t.h2,{id:`related-components`,children:`Related Components`}),`
9`,(0,y.jsxs)(t.ul,{children:[`
10`,(0,y.jsxs)(t.li,{children:[(0,y.jsx)(t.a,{href:`/docs/components/form/search-field`,children:`SearchField`}),` - For the search input in command menus`]}),`
11`,(0,y.jsxs)(t.li,{children:[(0,y.jsx)(t.a,{href:`/docs/components/collections/menu`,children:`Menu`}),` - The underlying menu component`]}),`
12`,(0,y.jsxs)(t.li,{children:[(0,y.jsx)(t.a,{href:`/docs/components/overlays/dialog`,children:`Dialog`}),` - For the modal container`]}),`
13`,(0,y.jsxs)(t.li,{children:[(0,y.jsx)(t.a,{href:`/docs/components/collections/listbox`,children:`ListBox`}),` - For displaying command results`]}),`
14`]})]})}function T(e={}){let{wrapper:t}=e.components||{};return t?(0,y.jsx)(t,{...e,children:(0,y.jsx)(w,{...e})}):w(e)}export{T as default,C as toc};