{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "A command component.",
  "dependencies": [
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "registryDependencies": [
    "@cubby-ui/input-group",
    "@cubby-ui/scroll-area",
    "@cubby-ui/elevated"
  ],
  "files": [
    {
      "path": "registry/default/command/command.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Autocomplete as AutocompleteBase } from \"@base-ui/react/autocomplete\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/input-group/input-group\";\nimport {\n  ScrollArea,\n  type ScrollAreaProps,\n} from \"@/registry/default/scroll-area/scroll-area\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  solidSurface,\n  type SurfaceLevel,\n} from \"@/registry/default/lib/elevated\";\n\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Search01Icon } from \"@hugeicons/core-free-icons\";\nconst useCommandFilter = AutocompleteBase.useFilter;\nconst useCommandFilteredItems = AutocompleteBase.useFilteredItems;\n\nconst AutocompleteRoot = AutocompleteBase.Root;\n\nfunction Command<ItemValue>({\n  className,\n  items = [],\n  children,\n  autoHighlight = \"always\",\n  open = true,\n  keepHighlight = true,\n  level = 3,\n  shadowLevel = 3,\n  ...props\n}: AutocompleteBase.Root.Props<ItemValue> & {\n  className?: string;\n  /** Surface elevation level for the outer Command frame (1-8). Defaults to 3. Bump to 7 when used inside CommandDialog so the palette pops above the dialog. */\n  level?: SurfaceLevel;\n  /** Shadow weight (1-8). Pinned to 3 by default. */\n  shadowLevel?: SurfaceLevel;\n}) {\n  return (\n    <div\n      data-slot=\"command\"\n      data-level={level}\n      className={cn(\n        // Outer frame is surface-2 (bg-muted); CommandContent drops back to\n        // surface-1 inside, creating a \"panel with well\" effect. bg-muted pins\n        // the outer color regardless of level — only shadow weight varies.\n        \"text-popover-foreground flex min-h-0 flex-1 flex-col rounded-4xl p-1\",\n        solidSurface(level, shadowLevel),\n        \"bg-muted\",\n        className,\n      )}\n    >\n      <AutocompleteRoot\n        items={items}\n        autoHighlight={autoHighlight}\n        keepHighlight={keepHighlight}\n        open={open}\n        inline={true}\n        {...props}\n      >\n        {children}\n      </AutocompleteRoot>\n    </div>\n  );\n}\n\nconst CommandDialog = BaseDialog.Root;\n\nfunction CommandDialogTrigger({ ...props }: BaseDialog.Trigger.Props) {\n  return <BaseDialog.Trigger data-slot=\"command-dialog-trigger\" {...props} />;\n}\n\nfunction CommandDialogPortal({ ...props }: BaseDialog.Portal.Props) {\n  return <BaseDialog.Portal data-slot=\"command-dialog-portal\" {...props} />;\n}\n\nfunction CommandDialogBackdrop({\n  className,\n  ...props\n}: BaseDialog.Backdrop.Props) {\n  return (\n    <BaseDialog.Backdrop\n      data-slot=\"command-dialog-backdrop\"\n      className={cn(\n        \"ease-out-expo fixed inset-0 min-h-dvh bg-black/40 transition-all duration-200 supports-[-webkit-touch-callout:none]:absolute\",\n        \"backdrop-blur-sm data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialogViewport({\n  className,\n  ...props\n}: BaseDialog.Viewport.Props) {\n  return (\n    <BaseDialog.Viewport\n      data-slot=\"command-dialog-viewport\"\n      className={cn(\n        \"fixed inset-0 flex flex-col items-center justify-center overflow-hidden px-4 py-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialogPopup({\n  className,\n  children,\n  ...props\n}: BaseDialog.Popup.Props) {\n  return (\n    <CommandDialogPortal>\n      <CommandDialogBackdrop />\n      <CommandDialogViewport>\n        <BaseDialog.Popup\n          data-slot=\"command-dialog-popup\"\n          className={cn(\n            \"relative z-50 mb-auto flex max-h-100 min-h-0 w-full max-w-lg min-w-0 flex-col overflow-hidden rounded-4xl bg-transparent shadow-lg sm:mt-[10%]\",\n            // Nested dialog offset\n            \"-translate-y-[calc(1.25rem*var(--nested-dialogs))]\",\n            \"scale-[calc(1-0.1*var(--nested-dialogs))]\",\n            // Animation\n            \"ease-out-expo transition-all duration-200\",\n            \"data-starting-style:translate-y-5 data-starting-style:scale-95 data-starting-style:opacity-0\",\n            \"data-ending-style:translate-y-5 data-ending-style:scale-95 data-ending-style:opacity-0\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </BaseDialog.Popup>\n      </CommandDialogViewport>\n    </CommandDialogPortal>\n  );\n}\n\nfunction CommandInput({\n  className,\n  loading = false,\n  ...props\n}: AutocompleteBase.Input.Props & { loading?: boolean }) {\n  return (\n    <InputGroup\n      variant=\"elevated\"\n      className={cn(\"mt-2 w-[calc(100%-1rem)]\", className)}\n    >\n      <AutocompleteBase.Input\n        data-slot=\"command-input\"\n        render={(props) => <InputGroupInput {...props} />}\n        {...props}\n      />\n      <InputGroupAddon>\n        <HugeiconsIcon\n          icon={Search01Icon}\n          className={cn(\n            \"size-4\",\n            loading && \"animation-duration-400 animate-pulse\",\n          )}\n          strokeWidth={2}\n        />\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n\nfunction CommandContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-content\"\n      className={cn(\n        // Surface-1 \"well\" inside the surface-2 outer frame; ring defines the edge.\n        \"bg-surface-3 dark:bg-surface-1 ring-border/25 dark:ring-border/10 flex min-h-0 flex-1 flex-col items-center overflow-hidden rounded-2xl ring-1\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  children,\n  emptyMessage = \"No results found.\",\n  nativeScroll = false,\n  fadeEdges = true,\n  scrollbarGutter = false,\n  persistScrollbar,\n  hideScrollbar,\n  ...props\n}: AutocompleteBase.List.Props &\n  Pick<\n    ScrollAreaProps,\n    | \"nativeScroll\"\n    | \"fadeEdges\"\n    | \"scrollbarGutter\"\n    | \"persistScrollbar\"\n    | \"hideScrollbar\"\n  > & {\n    emptyMessage?: React.ReactNode;\n  }) {\n  return (\n    <>\n      <AutocompleteBase.Empty\n        data-slot=\"command-empty\"\n        className=\"text-muted-foreground px-1 py-7 text-center text-sm empty:m-0 empty:p-0\"\n      >\n        {emptyMessage}\n      </AutocompleteBase.Empty>\n      <ScrollArea\n        nativeScroll={nativeScroll}\n        fadeEdges={fadeEdges}\n        scrollbarGutter={scrollbarGutter}\n        persistScrollbar={persistScrollbar}\n        hideScrollbar={hideScrollbar}\n        className={cn(\"flex-1\", className)}\n        viewportClassName=\"scroll-py-2\"\n      >\n        <AutocompleteBase.List\n          data-slot=\"command-list\"\n          className=\"rounded-xl py-2 outline-hidden empty:m-0 empty:p-0\"\n          {...props}\n        >\n          {children}\n        </AutocompleteBase.List>\n      </ScrollArea>\n    </>\n  );\n}\n\nfunction CommandVirtualizedList({\n  className,\n  children,\n  scrollRef,\n  totalSize,\n  emptyMessage = \"No results found.\",\n  fadeEdges = \"y\",\n  nativeScroll = false,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"ref\"> &\n  Pick<ScrollAreaProps, \"fadeEdges\" | \"nativeScroll\"> & {\n    scrollRef: (element: HTMLDivElement | null) => void;\n    totalSize: number;\n    emptyMessage?: React.ReactNode;\n  }) {\n  return (\n    <>\n      <AutocompleteBase.Empty\n        data-slot=\"command-empty\"\n        className=\"text-muted-foreground px-1 py-7 text-center text-sm empty:m-0 empty:p-0\"\n      >\n        {emptyMessage}\n      </AutocompleteBase.Empty>\n      <AutocompleteBase.List\n        data-slot=\"command-list\"\n        className=\"w-full flex-1 overflow-hidden rounded-xl p-0 outline-hidden empty:m-0 empty:p-0\"\n      >\n        <ScrollArea\n          viewportRef={scrollRef}\n          viewportClassName={cn(\"scroll-py-2\", className)}\n          fadeEdges={fadeEdges}\n          nativeScroll={nativeScroll}\n          className=\"h-auto max-h-full w-full\"\n          {...props}\n        >\n          {/* Spacer that gives TanStack Virtual its total scroll height */}\n          <div\n            role=\"presentation\"\n            className=\"relative w-full\"\n            style={{ height: totalSize }}\n          >\n            {children}\n          </div>\n        </ScrollArea>\n      </AutocompleteBase.List>\n    </>\n  );\n}\n\nfunction CommandGroup({\n  className,\n  children,\n  ...props\n}: AutocompleteBase.Group.Props) {\n  return (\n    <AutocompleteBase.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground block\", className)}\n      {...props}\n    >\n      {children}\n    </AutocompleteBase.Group>\n  );\n}\n\nfunction CommandGroupLabel({\n  className,\n  ...props\n}: AutocompleteBase.GroupLabel.Props) {\n  return (\n    <AutocompleteBase.GroupLabel\n      data-slot=\"command-group-label\"\n      className={cn(\n        \"text-muted-foreground mx-2 px-2.5 py-1.5 text-xs font-semibold\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: AutocompleteBase.Separator.Props) {\n  return (\n    <AutocompleteBase.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border mx-2 my-1 h-px min-h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({\n  className,\n  ref,\n  ...props\n}: AutocompleteBase.Item.Props & {\n  ref?: React.Ref<HTMLDivElement>;\n}) {\n  return (\n    <AutocompleteBase.Item\n      ref={ref}\n      data-slot=\"command-item\"\n      className={cn(\n        \"group data-highlighted:text-accent-foreground data-highlighted:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground text-foreground data-highlighted:bg-surface-hover relative flex cursor-default items-center gap-2 rounded-md p-2.5 text-sm font-medium outline-hidden transition-[colors,background-color,box-shadow] duration-100 ease-out select-none data-disabled:pointer-events-none data-disabled:opacity-60 data-highlighted:duration-0 sm:py-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        // Spacing from list edges (matches input's calc(100%-1rem) gap)\n        \"mx-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandCollection({ ...props }: AutocompleteBase.Collection.Props) {\n  return (\n    <AutocompleteBase.Collection data-slot=\"command-collection\" {...props} />\n  );\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto flex items-center gap-1 text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-footer\"\n      className={cn(\n        \"text-muted-foreground flex items-center justify-between px-3 py-2 pb-1 text-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandDialogTrigger,\n  CommandDialogPortal,\n  CommandDialogBackdrop,\n  CommandDialogViewport,\n  CommandDialogPopup,\n  CommandInput,\n  CommandContent,\n  CommandList,\n  CommandVirtualizedList,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandCollection,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n  CommandFooter,\n  useCommandFilter,\n  useCommandFilteredItems,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/command.tsx"
    }
  ],
  "type": "registry:ui"
}