No results found. Calendar Search Emoji Calculator Profile \u2318P Billing \u2318B Settings \u2318S

); } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"use client"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Command } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Command"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Settings,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" User,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Calendar,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Calculator,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Smile,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CreditCard,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandStyleDefault"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"space-y-4"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"rounded-lg border shadow-md md:min-w-[450px] max-w-[500px]"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Input"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Type a command or search..."}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.List"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Empty"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">No results found."})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Group"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" heading"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Suggestions"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Calendar"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Calendar"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Smile"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Search Emoji"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" disabled"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Calculator"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Calculator"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Separator"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Group"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" heading"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Settings"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"User"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Profile"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Shortcut"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">\u2318P"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"CreditCard"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Billing"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Shortcut"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">\u2318B"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Settings"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Settings"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Shortcut"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">\u2318S"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(r,{children:[(0,n.jsx)(r.Cli,{npmCommand:'npx shadcn@latest add "https://retroui.dev/r/command.json"'}),(0,n.jsxs)(r.Manual,{children:[(0,n.jsx)(l.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,n.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" install"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" class-variance-authority"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" cmdk"})]})})})}),(0,n.jsx)("br",{}),(0,n.jsx)(l.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,n.jsx)(c,{name:"command",children:(0,n.jsx)(l.figure,{__src__:"/vercel/path0/components/retroui/Command.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"use client"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"react"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Dialog } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Dialog"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" DialogProps } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-dialog"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"Command"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandPrimitive } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"cmdk"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Check, LucideIcon, Search } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" Command"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandPrimitive>) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"CommandPrimitive"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-foreground border-border shadow-md"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" CommandDialogProps"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" DialogProps"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" &"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" };"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandDialog"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ({"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" CommandDialogProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Content"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"overflow-hidden p-0 shadow-lg w-full max-w-md"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"};"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandInput"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandPrimitive.Input>) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex items-center border-border border-b px-3"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" cmdk-input-wrapper"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'""'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"command-input"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Search"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"me-2 h-4 w-4 shrink-0 opacity-50 text-foreground"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"CommandPrimitive.Input"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-body"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandList"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandPrimitive.List>) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"CommandPrimitive.List"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"command-list"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"max-h-[400px] overflow-auto overscroll-contain transition-[height] h-[calc(min(300px,var(--cmdk-list-height)))] bg-background"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandEmpty"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandPrimitive.Empty>) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"CommandPrimitive.Empty"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"command-empty"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"py-6 text-center text-sm text-muted-foreground font-body"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandGroup"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandPrimitive.Group>) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"CommandPrimitive.Group"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"command-group"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground font-body"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandSeparator"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandPrimitive.Separator>) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"CommandPrimitive.Separator"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"command-separator"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-px bg-border"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", className)}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandItem"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandPrimitive.Item>) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"CommandPrimitive.Item"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"command-item"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"relative flex text-foreground cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground transition-all font-body"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandShortcut"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ({"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"HTMLAttributes"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLSpanElement"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">) "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"command-shortcut"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"ms-auto text-xs tracking-widest text-muted-foreground font-body"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"};"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" CommandCheckProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" icon"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" LucideIcon"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" CommandCheck"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" icon: "}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"Icon"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Check,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" CommandCheckProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Icon"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"command-check"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" data-check"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"size-4 ms-auto text-primary"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", className)}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandComponent "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Object."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"assign"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"(Command, {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Check"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandCheck,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Dialog"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandDialog,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Empty"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandEmpty,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Group"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandGroup,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Input"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandInput,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Item"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandItem,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" List"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandList,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Separator"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandSeparator,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Shortcut"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CommandShortcut,"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { CommandComponent "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Command };"})]})]})})})})]})]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h2,{id:"examples",children:"Examples"}),` `,(0,n.jsx)(l.h3,{id:"dialog",children:"Dialog"}),` `,(0,n.jsx)(o,{name:"command-style-dialog",children:(0,n.jsx)(l.figure,{__src__:"preview/components/command-style-dialog.tsx",__rawString__:`"use client"; import * as React from "react"; import { Command } from "@/components/retroui/Command"; import { Calculator, Calendar, CreditCard, Settings, Smile, User, } from "lucide-react"; export default function Component() { const [open, setOpen] = React.useState(false); React.useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === "j" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen((open) => !open); } }; document.addEventListener("keydown", down); return () => document.removeEventListener("keydown", down); }, []); return ( <>

Press{" "} \u2318J

No results found. Calendar Search Emoji Calculator Profile \u2318P Billing \u2318B Settings \u2318S ); } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"use client"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#BF9EEE"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"react"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Command } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Command"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Calculator,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Calendar,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" CreditCard,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Settings,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Smile,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" User,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" Component"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" [open, setOpen] "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#BF9EEE"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:");"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" down"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" KeyboardEvent"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" (e.key "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"j"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" (e.metaKey "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" e.ctrlKey)) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" e."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"preventDefault"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" setOpen"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" !"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"open);"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" };"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"keydown"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", down);"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"keydown"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", down);"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }, []);"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"text-muted-foreground text-sm"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Press{"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"kbd"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"text-xs"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">\u2318J"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Dialog"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" open"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{open} "}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:"onOpenChange"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{setOpen}>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Input"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Type a command or search..."}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.List"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Empty"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">No results found."})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Group"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" heading"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Suggestions"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Calendar"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Calendar"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Smile"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Search Emoji"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Calculator"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Calculator"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Separator"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Group"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" heading"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Settings"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"User"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Profile"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Shortcut"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">\u2318P"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"CreditCard"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Billing"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Shortcut"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">\u2318B"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Item"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Settings"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Settings"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Command.Shortcut"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">\u2318S"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{})]})}function D(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(F,e)})):F(e)}var x=D;function a(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return S(I);})(); ;return Component;

Command

Examples

Dialog

On this Page