{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "command",
  "dependencies": [
    "class-variance-authority@^0.7",
    "cmdk@^1"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils",
    "@dwellir/dialog",
    "@dwellir/input-modality",
    "@dwellir/rune-icons"
  ],
  "files": [
    {
      "path": "components/ui/command.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { type ComponentProps, useLayoutEffect, useRef } from 'react';\nimport { RuneSearch } from '@/components/brand/rune-icons';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/ui/dialog';\nimport { useInputModality } from '@/lib/input-modality';\nimport { cn } from '@/lib/utils';\n\n/*\n * The rows read data-size from the root, as the dialog's parts read its placement.\n * cmdk renders each group's heading itself, without a data-slot: the group styles it.\n */\nconst commandVariants = cva(\n  'group/command flex size-full flex-col overflow-hidden text-popover-foreground',\n  {\n    variants: {\n      surface: {\n        /* A searchable list on the page or inside a card: the plain card surface. */\n        plain: 'rounded-2xl border border-border bg-card text-card-foreground',\n        /* No surface: inside a dialog, a popover or a menu, which draws the panel. */\n        bare: 'bg-transparent',\n      },\n      size: {\n        default: '',\n        /* Taller rows and field, for the palette in a dialog. */\n        lg: '',\n      },\n    },\n    defaultVariants: { surface: 'plain', size: 'default' },\n  },\n);\n\nfunction Command({\n  className,\n  surface,\n  size,\n  ...props\n}: ComponentProps<typeof CommandPrimitive> & VariantProps<typeof commandVariants>) {\n  useInputModality();\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      data-size={size ?? 'default'}\n      className={cn(commandVariants({ surface, size }), className)}\n      {...props}\n    />\n  );\n}\n\ntype CommandDialogProps = ComponentProps<typeof Dialog> &\n  Pick<\n    ComponentProps<typeof CommandPrimitive>,\n    'filter' | 'shouldFilter' | 'loop' | 'value' | 'onValueChange'\n  > & {\n    /* Read by screen readers only: the palette shows no heading. */\n    title?: string;\n    description?: string;\n    /* Layout classes for the dialog panel, such as a wider max-w-2xl. */\n    className?: string;\n    /* Escape and a click on the scrim close the palette; the button is optional. */\n    showCloseButton?: boolean;\n  } & Pick<VariantProps<typeof commandVariants>, 'size'>;\n\n/*\n * The command palette: a Command in a dialog, such as the dashboard's Cmd+K search.\n * The panel sits in the top fifth of the screen, so it keeps its place while the\n * results filter.\n */\nfunction CommandDialog({\n  title = 'Command palette',\n  description = 'Search for a page or an action.',\n  className,\n  showCloseButton = false,\n  size = 'lg',\n  filter,\n  shouldFilter,\n  loop,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: CommandDialogProps) {\n  /*\n   * Radix returns focus to a DialogTrigger, and the palette has none: a button\n   * or Cmd+K opens it. So it remembers what had focus and returns there on close.\n   * It reads the focus before the panel mounts: cmdk moves focus into its field\n   * at once when another cmdk field had it.\n   */\n  const opener = useRef<HTMLElement | null>(null);\n  const { open } = props;\n  useLayoutEffect(() => {\n    if (!open) return;\n    opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n  }, [open]);\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        showCloseButton={showCloseButton}\n        onCloseAutoFocus={(event) => {\n          if (!opener.current?.isConnected) return;\n          event.preventDefault();\n          opener.current.focus();\n          opener.current = null;\n        }}\n        className={cn('top-1/5 max-w-xl translate-y-0 gap-0 overflow-hidden p-0', className)}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command\n          surface=\"bare\"\n          size={size}\n          filter={filter}\n          shouldFilter={shouldFilter}\n          loop={loop}\n          value={value}\n          onValueChange={onValueChange}\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-11 shrink-0 items-center gap-2 border-b border-border px-4 group-data-[size=lg]/command:h-14 group-data-[size=lg]/command:gap-3 group-data-[size=lg]/command:px-5\"\n    >\n      <RuneSearch\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 text-muted-foreground group-data-[size=lg]/command:size-5\"\n      />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          /* iOS zooms in on a focused field with text under 16px, as the Input notes. */\n          'h-full w-full min-w-0 bg-transparent text-lg text-foreground outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:pointer-fine:text-sm group-data-[size=lg]/command:md:text-base',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        'max-h-80 scroll-py-2 overflow-x-hidden overflow-y-auto overscroll-contain p-2 group-data-[size=lg]/command:max-h-96',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn('py-6 text-center text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/* The heading matches a menu label: small, medium weight and muted, in sentence case. */\nfunction CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  /* Hidden from assistive technology: a listbox may hold only options and groups. */\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      aria-hidden=\"true\"\n      className={cn('-mx-2 my-2 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\n/*\n * The highlighted row takes the menu tint. Keyboard readers also get the focus\n * outline, as in the dropdown menu: focus stays in the field while the arrows\n * move the highlight.\n */\nconst commandItemVariants = cva(\n  \"relative flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none group-data-[size=lg]/command:gap-3 group-data-[size=lg]/command:py-2.5 data-[selected=true]:bg-secondary data-[selected=true]:text-secondary-foreground in-data-[input=keyboard]:data-[selected=true]:outline-solid in-data-[input=keyboard]:data-[selected=true]:outline-2 in-data-[input=keyboard]:data-[selected=true]:-outline-offset-2 in-data-[input=keyboard]:data-[selected=true]:outline-ring data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n  {\n    variants: {\n      variant: {\n        default: '',\n        /* An action that deletes or cannot be undone. */\n        destructive:\n          'text-destructive data-[selected=true]:bg-destructive-10 data-[selected=true]:text-destructive in-data-[input=keyboard]:data-[selected=true]:outline-destructive *:[svg]:text-destructive!',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nfunction CommandItem({\n  className,\n  variant,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Item> & VariantProps<typeof commandItemVariants>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      data-variant={variant ?? 'default'}\n      className={cn(commandItemVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}