var Component=(()=>{var C=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),f=(o,n)=>{for(var e in n)r(o,e,{get:n[e],enumerable:!0})},d=(o,n,e,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let m of h(n))!u.call(o,m)&&m!==e&&r(o,m,{get:()=>n[m],enumerable:!(t=p(n,m))||t.enumerable});return o};var b=(o,n,e)=>(e=o!=null?C(B(o)):{},d(n||!o||!o.__esModule?r(e,"default",{value:o,enumerable:!0}):e,o)),I=o=>d(r({},"__esModule",{value:!0}),o);var c=g((F,i)=>{i.exports=_jsx_runtime});var x={};f(x,{default:()=>l,frontmatter:()=>y});var a=b(c()),y={id:"command-bar",title:"CommandBar",description:"Command bars provide users with easy access to your app's most common tasks."};function s(o){let n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...o.components},{ComponentLinks:e}=n;return e||L("ComponentLinks",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:["CommandBar is built on top of ",(0,a.jsx)(n.a,{href:"https://cmdk.paco.me/",children:"CMDK"}),", by ",(0,a.jsx)(n.a,{href:"https://twitter.com/pacocoursey",children:"Paco Coursey"}),"."]}),` `,(0,a.jsx)(e,{github:{package:"saas-ui-command-bar"},npm:{package:"@saas-ui/command-bar"},theme:{theme:"saas-ui",componentName:"command-bar"}}),` `,(0,a.jsx)(n.h2,{id:"import",children:"Import"}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBar"}),": The wrapper component provides context and state management."]}),` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBarDialog"}),": The dialog component."]}),` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBarContent"}),": The container for the input and list."]}),` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBarInput"}),": The input field."]}),` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBarList"}),": The container for the list items."]}),` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBarGroup"}),": The container for a group of items."]}),` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBarItem"}),": An item in the list."]}),` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBarSeparator"}),": A separator between items."]}),` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBarLoading"}),": The loading content."]}),` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"CommandBarEmpty"}),": The empty content."]}),` `]}),` `,(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-ts",children:`import { CommandBar, CommandBarContent, CommandBarInput, CommandBarList, CommandBarGroup, CommandBarItem, CommandBarSeparator, CommandBarLoading, CommandBarEmpty, } from '@saas-ui/command-bar' `})}),` `,(0,a.jsx)(n.h2,{id:"usage",children:"Usage"}),` `,(0,a.jsx)(n.h3,{id:"basic",children:"Basic"}),` `,(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",height:"400px",children:`import { CommandBar, CommandBarContent, CommandBarInput, CommandBarList, CommandBarGroup, CommandBarItem, CommandBarSeparator, CommandBarLoading, CommandBarEmpty, } from '@saas-ui/command-bar' export default function Inline() { return ( No results found. Apple Orange Pear Blueberry Fish ) } `})}),` `,(0,a.jsx)(n.h3,{id:"dialog",children:"Dialog"}),` `,(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",height:"500px",children:`import { Button, Box } from '@chakra-ui/react' import { Command, useHotkeys } from '@saas-ui/react' import { CommandBar, CommandBarDialog, CommandBarContent, CommandBarInput, CommandBarList, CommandBarGroup, CommandBarItem, CommandBarSeparator, CommandBarLoading, CommandBarEmpty, } from '@saas-ui/command-bar' import { FiUserCheck, FiUser, FiCircle, FiBarChart, FiTag, FiCalendar, } from 'react-icons/fi' export default function Dialog() { const { isOpen, onClose, onToggle } = useDisclosure() const [isLoading, setLoading] = React.useState(false) useHotkeys('ctrl+k', () => { onToggle() }) return ( <> console.log(value)} isOpen={isOpen} onClose={onClose} closeOnSelect > {isLoading && Hang on\u2026} No results found. {items.map(({ icon, label, shortcut }) => { return ( {icon} {label} {shortcut} ) })} ) } const items = [ { icon: , label: 'Assign to...', shortcut: 'A', }, { icon: , label: 'Assign to me', shortcut: 'I', }, { icon: , label: 'Change status...', shortcut: 'S', }, { icon: , label: 'Change labels...', shortcut: 'L', }, { icon: , label: 'Remove label...', shortcut: '\u21E7 L', }, ] `})})]})}function l(o={}){let{wrapper:n}=o.components||{};return n?(0,a.jsx)(n,{...o,children:(0,a.jsx)(s,{...o})}):s(o)}function L(o,n){throw new Error("Expected "+(n?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}return I(x);})(); ;return Component;