{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "A searchable command list on Base UI's inline Autocomplete, inline or in a dialog.",
  "dependencies": [
    "@base-ui/react",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json",
    "https://constella.aayush.cv/r/dialog.json",
    "https://constella.aayush.cv/r/input-group.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/command.tsx",
      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { Search01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport {\n  Dialog,\n  DialogBackdrop,\n  DialogDescription,\n  DialogPopup,\n  DialogPortal,\n  DialogTitle,\n  DialogViewport,\n} from \"@/components/primitives/dialog\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/components/primitives/input-group\";\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { typeStyles, visuallyHidden } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  fontWeights,\n  opacities,\n  radii,\n  sizes,\n  space,\n  strokes,\n} from \"@/lib/constella/tokens.stylex\";\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\ntype CommandProps = Omit<\n  AutocompletePrimitive.Root.Props<unknown>,\n  \"inline\"\n> & { \"data-slot\"?: string; sx?: Sx };\n\nconst highlighted = \":is([data-highlighted])\";\nconst off = \":is([data-disabled])\";\n\nconst styles = stylex.create({\n  command: {\n    backgroundColor: colors.raised,\n    borderStartStartRadius: radii.lg,\n    borderStartEndRadius: radii.lg,\n    borderEndStartRadius: radii.lg,\n    borderEndEndRadius: radii.lg,\n    color: colors.textPrimary,\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflow: \"hidden\",\n    paddingBlockEnd: space.xxs,\n    paddingBlockStart: space.xxs,\n    paddingInlineEnd: space.xxs,\n    paddingInlineStart: space.xxs,\n    width: \"100%\",\n  },\n  // Inside the command's padding, so its corner nests in the command's.\n  input: {\n    backgroundColor: colors.fill,\n    borderStartStartRadius: radii.md,\n    borderStartEndRadius: radii.md,\n    borderEndStartRadius: radii.md,\n    borderEndEndRadius: radii.md,\n    boxShadow: \"none\",\n  },\n  icon: {\n    color: colors.textMuted,\n    display: \"flex\",\n  },\n  list: {\n    maxHeight: sizes.menuHeight,\n    overflowX: \"hidden\",\n    overflowY: \"auto\",\n    paddingBlockStart: space.xxs,\n    scrollPaddingBlock: space.xxs,\n  },\n  empty: {\n    color: colors.textSecondary,\n    paddingBlockEnd: { default: space.lg, \":empty\": 0 },\n    paddingBlockStart: { default: space.lg, \":empty\": 0 },\n    textAlign: \"center\",\n  },\n  group: {\n    paddingBlockEnd: space.xxs,\n  },\n  groupLabel: {\n    color: colors.textMuted,\n    fontWeight: fontWeights.medium,\n    paddingBlockEnd: space.xxs,\n    paddingBlockStart: space.xxs,\n    paddingInlineEnd: space.sm,\n    paddingInlineStart: space.sm,\n  },\n  // A default menu's row, so a command list and a menu read as one family.\n  item: {\n    alignItems: \"center\",\n    backgroundColor: {\n      default: \"transparent\",\n      [highlighted]: colors.fillSubtle,\n    },\n    borderStartStartRadius: radii.md,\n    borderStartEndRadius: radii.md,\n    borderEndStartRadius: radii.md,\n    borderEndEndRadius: radii.md,\n    cursor: { default: \"pointer\", [off]: \"not-allowed\" },\n    display: \"flex\",\n    gap: space.row,\n    minHeight: sizes.controlMd,\n    opacity: { default: 1, [off]: opacities.disabled },\n    overflowWrap: \"anywhere\",\n    paddingInlineEnd: space.sm,\n    paddingInlineStart: space.sm,\n    userSelect: \"none\",\n  },\n  // In line with the rows' text.\n  separator: {\n    backgroundColor: colors.borderSubtle,\n    height: strokes.border,\n    marginBlockEnd: space.xxs,\n    marginInlineEnd: space.sm,\n    marginInlineStart: space.sm,\n  },\n  shortcut: {\n    color: colors.textMuted,\n    flexShrink: 0,\n    marginInlineStart: \"auto\",\n    whiteSpace: \"nowrap\",\n  },\n  viewport: {\n    alignItems: \"flex-start\",\n    paddingBlockStart: `max(${space.md}, 15vh)`,\n  },\n  footer: {\n    alignItems: \"center\",\n    backgroundColor: colors.fillSubtle,\n    borderTopColor: colors.borderSubtle,\n    borderTopStyle: \"solid\",\n    borderTopWidth: strokes.border,\n    color: colors.textMuted,\n    display: \"flex\",\n    gap: space.md,\n    marginBlockEnd: `calc(-1 * ${space.xxs})`,\n    marginBlockStart: space.xxs,\n    marginInlineEnd: `calc(-1 * ${space.xxs})`,\n    marginInlineStart: `calc(-1 * ${space.xxs})`,\n    paddingBlockEnd: space.xs,\n    paddingBlockStart: space.xs,\n    paddingInlineEnd: space.sm,\n    paddingInlineStart: space.sm,\n  },\n  dialog: {\n    borderStartStartRadius: radii.lg,\n    borderStartEndRadius: radii.lg,\n    borderEndStartRadius: radii.lg,\n    borderEndEndRadius: radii.lg,\n    gap: 0,\n    paddingBlockEnd: 0,\n    paddingBlockStart: 0,\n    paddingInlineEnd: 0,\n    paddingInlineStart: 0,\n  },\n});\n\n/** A searchable list, always open, built on Base UI's inline Autocomplete. Pass `items`. */\nfunction Command({\n  \"data-slot\": slot = \"command\",\n  sx,\n  ...props\n}: CommandProps) {\n  return (\n    <div data-slot={slot} {...stylex.props(styles.command, sx)}>\n      <AutocompletePrimitive.Root\n        autoHighlight=\"always\"\n        inline\n        open\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** Renders a dialog with a command inside, named for screen readers by `title` and `description`. */\nfunction CommandDialog({\n  children,\n  description = \"Search for a command to run...\",\n  instant = false,\n  sx,\n  title = \"Command Palette\",\n  ...props\n}: Omit<ComponentProps<typeof Dialog>, \"children\"> & {\n  children: ReactNode;\n  description?: string;\n  /** Opens and closes with no motion, for a change the keyboard made. */\n  instant?: boolean;\n  sx?: Sx;\n  title?: string;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogPortal>\n        <DialogBackdrop data-skip-motion={instant || undefined} />\n        <DialogViewport sx={styles.viewport}>\n          <DialogPopup\n            data-skip-motion={instant || undefined}\n            size=\"lg\"\n            sx={[styles.dialog, sx]}\n          >\n            <DialogTitle sx={visuallyHidden.base}>{title}</DialogTitle>\n            <DialogDescription sx={visuallyHidden.base}>\n              {description}\n            </DialogDescription>\n            {children}\n          </DialogPopup>\n        </DialogViewport>\n      </DialogPortal>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  sx,\n  ...props\n}: Omit<Styled<AutocompletePrimitive.Input.Props>, \"render\">) {\n  return (\n    <InputGroup data-slot=\"command-input\" size=\"lg\" sx={[styles.input, sx]}>\n      {/* Keeps the group's `input-group-control` slot, so the group draws the focus ring. */}\n      <AutocompletePrimitive.Input render={<InputGroupInput />} {...props} />\n      <InputGroupAddon>\n        <span {...stylex.props(styles.icon)}>\n          <HugeiconsIcon\n            aria-hidden\n            icon={Search01Icon}\n            size={sizes.icon}\n            strokeWidth={Number(strokes.icon)}\n          />\n        </span>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n\nfunction CommandList({\n  sx,\n  ...props\n}: Styled<AutocompletePrimitive.List.Props>) {\n  return (\n    <AutocompletePrimitive.List\n      data-slot=\"command-list\"\n      {...props}\n      {...stylex.props(styles.list, sx)}\n    />\n  );\n}\n\nfunction CommandEmpty({\n  sx,\n  ...props\n}: Styled<AutocompletePrimitive.Empty.Props>) {\n  return (\n    <AutocompletePrimitive.Empty\n      data-slot=\"command-empty\"\n      {...props}\n      {...stylex.props([typeStyles.textMd, styles.empty], sx)}\n    />\n  );\n}\n\nfunction CommandGroup({\n  sx,\n  ...props\n}: Styled<AutocompletePrimitive.Group.Props>) {\n  return (\n    <AutocompletePrimitive.Group\n      data-slot=\"command-group\"\n      {...props}\n      {...stylex.props(styles.group, sx)}\n    />\n  );\n}\n\nfunction CommandGroupLabel({\n  sx,\n  ...props\n}: Styled<AutocompletePrimitive.GroupLabel.Props>) {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      data-slot=\"command-group-label\"\n      {...props}\n      {...stylex.props([typeStyles.captionLg, styles.groupLabel], sx)}\n    />\n  );\n}\n\nfunction CommandCollection(props: AutocompletePrimitive.Collection.Props) {\n  return <AutocompletePrimitive.Collection {...props} />;\n}\n\nfunction CommandItem({\n  sx,\n  ...props\n}: Styled<AutocompletePrimitive.Item.Props>) {\n  return (\n    <AutocompletePrimitive.Item\n      data-slot=\"command-item\"\n      {...props}\n      {...stylex.props([typeStyles.textMd, styles.item], sx)}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  sx,\n  ...props\n}: Styled<AutocompletePrimitive.Separator.Props>) {\n  return (\n    <AutocompletePrimitive.Separator\n      data-slot=\"command-separator\"\n      {...props}\n      {...stylex.props(styles.separator, sx)}\n    />\n  );\n}\n\nfunction CommandShortcut({ sx, ...props }: Styled<ComponentProps<\"span\">>) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      {...props}\n      {...stylex.props([typeStyles.captionLg, styles.shortcut], sx)}\n    />\n  );\n}\n\nfunction CommandFooter({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      data-slot=\"command-footer\"\n      {...props}\n      {...stylex.props([typeStyles.captionLg, styles.footer], sx)}\n    />\n  );\n}\n\n/** The command's surface, for a part that draws its own popup around a command list. */\nconst commandStyles = {\n  surface: styles.command,\n};\n\nexport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n  commandStyles,\n};\nexport type { CommandProps };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/command/index.md",
  "type": "registry:ui"
}