@loke/design-system/dist/components/command/index.mjs

A design system with individually importable components

"use client";
import{cn}from"@loke/design-system/cn";import{Dialog,DialogContent,DialogDescription,DialogHeader,DialogTitle}from"@loke/design-system/dialog";import{Search}from"@loke/icons";import*as CommandPrimitive from"@loke/ui/command";import{forwardRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";var Command2=forwardRef(({className,...props},ref)=>jsx(CommandPrimitive.Command,{className:cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",className),ref,...props}));Command2.displayName=CommandPrimitive.Command.displayName;var CommandInput2=forwardRef(({className,...props},ref)=>jsxs("div",{className:"flex h-9 items-center gap-2 border-b px-3","data-slot":"command-input-wrapper",children:[jsx(Search,{className:"size-4 shrink-0 opacity-50"}),jsx(CommandPrimitive.CommandInput,{className:cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",className),"data-slot":"command-input",ref,...props})]}));CommandInput2.displayName=CommandPrimitive.CommandInput.displayName;var CommandList2=forwardRef(({className,...props},ref)=>jsx(CommandPrimitive.CommandList,{className:cn("max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden",className),ref,...props}));CommandList2.displayName=CommandPrimitive.CommandList.displayName;var CommandItem2=forwardRef(({className,...props},ref)=>jsx(CommandPrimitive.CommandItem,{className:cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",className),ref,...props}));CommandItem2.displayName=CommandPrimitive.CommandItem.displayName;var CommandGroup2=forwardRef(({className,heading,...props},ref)=>jsx(CommandPrimitive.CommandGroup,{className:cn("overflow-hidden p-1 text-foreground",className),heading:heading?jsx("div",{className:"px-2 py-1.5 font-medium text-muted-foreground text-xs",children:heading}):void 0,ref,...props}));CommandGroup2.displayName=CommandPrimitive.CommandGroup.displayName;var CommandSeparator2=forwardRef(({className,...props},ref)=>jsx(CommandPrimitive.CommandSeparator,{className:cn("-mx-1 h-px bg-border",className),ref,...props}));CommandSeparator2.displayName=CommandPrimitive.CommandSeparator.displayName;var CommandEmpty2=forwardRef(({className,...props},ref)=>jsx(CommandPrimitive.CommandEmpty,{className:cn("py-6 text-center text-sm",className),ref,...props}));CommandEmpty2.displayName=CommandPrimitive.CommandEmpty.displayName;var CommandLoading2=forwardRef(({className,...props},ref)=>jsx(CommandPrimitive.CommandLoading,{className,ref,...props}));CommandLoading2.displayName=CommandPrimitive.CommandLoading.displayName;var CommandShortcut=({className,...props})=>{return jsx("span",{className:cn("ml-auto text-muted-foreground text-xs tracking-widest",className),"data-slot":"command-shortcut",...props})};function CommandDialog({title="Command Palette",description="Search for a command to run...",children,className,showCloseButton=!1,...props}){return jsxs(Dialog,{...props,children:[jsxs(DialogHeader,{className:"sr-only",children:[jsx(DialogTitle,{children:title}),jsx(DialogDescription,{children:description})]}),jsx(DialogContent,{className:cn("overflow-hidden p-0",className),showCloseButton,children:jsx(Command2,{className:"**:data-[slot=command-input-wrapper]:h-12 [&_[loke-cmd-group]:not([hidden])_~[loke-cmd-group]]:pt-0 [&_[loke-cmd-input-wrapper]_svg]:h-5 [&_[loke-cmd-input-wrapper]_svg]:w-5 [&_[loke-cmd-input]]:h-12 [&_[loke-cmd-item]]:px-2 [&_[loke-cmd-item]]:py-3 [&_[loke-cmd-item]_svg]:h-5 [&_[loke-cmd-item]_svg]:w-5 **:[[loke-cmd-group]]:px-2",children})})]})}var createCommandScope2=CommandPrimitive.createCommandScope;export{createCommandScope2 as createCommandScope,CommandShortcut,CommandSeparator2 as CommandSeparator,CommandLoading2 as CommandLoading,CommandList2 as CommandList,CommandItem2 as CommandItem,CommandInput2 as CommandInput,CommandGroup2 as CommandGroup,CommandEmpty2 as CommandEmpty,CommandDialog,Command2 as Command};