{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "type": "registry:ui",
  "title": "Combobox",
  "description": "Searchable select — a Popover wrapping a cmdk palette. Autocomplete with full keyboard navigation.",
  "dependencies": [
    "@radix-ui/react-popover",
    "@saasflare/ui",
    "cmdk"
  ],
  "files": [
    {
      "path": "components/ui/combobox.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Combobox primitive — searchable dropdown built on Radix Popover + cmdk.\n * Thin compositional wrapper: `Combobox` is `Popover.Root`, `ComboboxContent` mounts a\n * `cmdk` Command palette inside a `Popover.Content`. Consumers compose the trigger\n * (typically a Button) and items themselves; this gives a shadcn-style Combobox\n * without a separate runtime dependency on a higher-level combobox primitive.\n *\n * For multi-select-with-chips, compose `Combobox` with the `Badge` component and\n * a controlled value list — the chip pattern is intentionally not built in.\n *\n * @module packages/ui/components/ui/combobox\n * @layer core\n *\n * @component\n * @example\n * import {\n *   Combobox, ComboboxTrigger, ComboboxContent,\n *   ComboboxInput, ComboboxList, ComboboxItem,\n * } from \"@saasflare/ui\"\n *\n * <Combobox>\n *   <ComboboxTrigger asChild>\n *     <Button variant=\"outline\">{label ?? \"Select…\"}</Button>\n *   </ComboboxTrigger>\n *   <ComboboxContent>\n *     <ComboboxInput placeholder=\"Search…\" />\n *     <ComboboxList>\n *       <ComboboxItem value=\"react\">React</ComboboxItem>\n *       <ComboboxItem value=\"vue\">Vue</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n */\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { CheckIcon, MagnifyingGlassIcon } from \"@saasflare/ui\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Searchable dropdown root. Alias of Radix Popover.Root that owns the open\n * state; compose with {@link ComboboxTrigger} and {@link ComboboxContent}\n * for a shadcn-style combobox.\n *\n * @component\n * @layer core\n */\nconst Combobox = PopoverPrimitive.Root\n\n/**\n * Element that toggles the combobox open. Alias of Radix Popover.Trigger —\n * use `asChild` to render a custom trigger such as a Button.\n *\n * @component\n * @layer core\n */\nconst ComboboxTrigger = PopoverPrimitive.Trigger\n\n/** Props for {@link ComboboxContent}. */\ninterface ComboboxContentProps\n  extends Omit<React.ComponentProps<typeof PopoverPrimitive.Content>, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {}\n\n/**\n * Popover surface that mounts the `cmdk` command palette. This is the themeable\n * chrome of the combobox — honors `surface`/`radius`/`animated` overrides and\n * emits the matching data axes on its root for the design system to style.\n */\nfunction ComboboxContent({\n  className,\n  align = \"start\",\n  sideOffset = 6,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  children,\n  ...props\n}: ComboboxContentProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"combobox-content\"\n        data-surface={sf.surface}\n        data-radius={sf.radius}\n        data-animated={String(sf.animated)}\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-[var(--radix-popover-trigger-width)] min-w-[12rem] origin-[var(--radix-popover-content-transform-origin)] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        <CommandPrimitive\n          data-slot=\"combobox\"\n          className=\"flex w-full flex-col\"\n        >\n          {children}\n        </CommandPrimitive>\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  )\n}\n\n/** Props for {@link ComboboxInput}. */\ninterface ComboboxInputProps\n  extends Omit<React.ComponentProps<typeof CommandPrimitive.Input>, \"iconWeight\">,\n    Pick<SaasflareComponentProps, \"iconWeight\"> {}\n\n/** Search field for the combobox, with a leading magnifier whose Phosphor weight follows `iconWeight`. */\nfunction ComboboxInput({\n  className,\n  iconWeight,\n  ...props\n}: ComboboxInputProps) {\n  const sf = useSaasflareProps({ iconWeight })\n  return (\n    <div\n      data-slot=\"combobox-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <MagnifyingGlassIcon weight={sf.iconWeight} className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"combobox-input\"\n        className={cn(\n          \"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\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\n/** Scrollable list region that holds {@link ComboboxItem}s, groups, and the empty state. */\nfunction ComboboxList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"max-h-[min(24rem,var(--radix-popover-content-available-height))] scroll-py-1 overflow-x-hidden overflow-y-auto p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Selectable option row. Pass `selected` to render a trailing check indicator. */\nfunction ComboboxItem({\n  className,\n  children,\n  selected,\n  iconWeight,\n  ...props\n}: Omit<React.ComponentProps<typeof CommandPrimitive.Item>, \"iconWeight\"> & {\n  /** Show a leading check indicator. Lets consumers render selection state without a separate Indicator slot. */\n  selected?: boolean\n  /** Icon weight override for the selection check indicator. Omit to inherit from provider. */\n  iconWeight?: SaasflareComponentProps[\"iconWeight\"]\n}) {\n  const sf = useSaasflareProps({ iconWeight })\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {selected ? (\n        <CheckIcon\n          weight={sf.iconWeight}\n          data-slot=\"combobox-item-indicator\"\n          className=\"absolute right-2 size-4\"\n        />\n      ) : null}\n    </CommandPrimitive.Item>\n  )\n}\n\n/** Labeled section of items. Render a `[cmdk-group-heading]` child for the group title. */\nfunction ComboboxGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(\n        \"overflow-hidden 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\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Fallback shown when the current query matches no items. */\nfunction ComboboxEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Thin divider between groups or items inside the list. */\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Combobox,\n  ComboboxTrigger,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  type ComboboxContentProps,\n  type ComboboxInputProps,\n}\n",
      "target": "components/ui/combobox.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/combobox.json"
  }
}