{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "b-combobox",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["@base-ui/react", "motion", "lucide-react"],
  "devDependencies": [],
  "files": [
    {
      "path": "b-combobox.tsx",
      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport { Check, ChevronsUpDown, X } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst controlCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]\";\n\nconst controlCornerXsClassName =\n  \"rounded-[min(var(--radius-md),10px)] supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]\";\n\nconst controlCornerInheritClassName =\n  \"rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]\";\n\nconst componentThemeClassName =\n  \"[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]\";\n\ntype ComboboxRootProps<\n  Value,\n  Multiple extends boolean | undefined = false,\n> = ComboboxPrimitive.Root.Props<Value, Multiple>;\n\nconst INSTANT_TRANSITION = { duration: 0 } as const;\n\ntype ComboboxContextValue = {\n  actionsRef: React.RefObject<ComboboxPrimitive.Root.Actions | null>;\n  activeHighlightId: string;\n  activeValue: unknown;\n  open: boolean;\n  prefersReducedMotion: boolean;\n  setActiveValue: React.Dispatch<React.SetStateAction<unknown>>;\n  setOpen: (open: boolean) => void;\n  skipExitAnimationRef: React.MutableRefObject<boolean>;\n};\n\ntype DivRenderProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  className?: string;\n  ref?: React.Ref<HTMLDivElement>;\n  style?: React.CSSProperties;\n};\n\ntype InputRenderProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  className?: string;\n  ref?: React.Ref<HTMLInputElement>;\n  style?: React.CSSProperties;\n};\n\nconst ComboboxContext = React.createContext<ComboboxContextValue | null>(null);\n\nfunction useComboboxContext(componentName: string) {\n  const context = React.useContext(ComboboxContext);\n\n  if (!context) {\n    throw new Error(`${componentName} must be used inside Combobox`);\n  }\n\n  return context;\n}\n\nfunction setRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n  if (typeof ref === \"function\") {\n    ref(value);\n    return;\n  }\n\n  if (ref) {\n    (ref as React.MutableRefObject<T | null>).current = value;\n  }\n}\n\nfunction composeEventHandlers<Event extends React.SyntheticEvent>(\n  originalEventHandler: ((event: Event) => void) | undefined,\n  eventHandler: (event: Event) => void\n) {\n  return (event: Event) => {\n    originalEventHandler?.(event);\n\n    if (!event.defaultPrevented) {\n      eventHandler(event);\n    }\n  };\n}\n\nfunction resolveStateClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n) {\n  return typeof className === \"function\" ? className(state) : className;\n}\n\nfunction resolvePopupProps(popupProps: DivRenderProps) {\n  const {\n    children: _popupChildren,\n    className: popupClassName,\n    onAnimationEnd: _onAnimationEnd,\n    onAnimationIteration: _onAnimationIteration,\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragEnd: _onDragEnd,\n    onDragEnter: _onDragEnter,\n    onDragExit: _onDragExit,\n    onDragLeave: _onDragLeave,\n    onDragOver: _onDragOver,\n    onDragStart: _onDragStart,\n    onDrop: _onDrop,\n    ref: popupRef,\n    style: popupStyle,\n    ...resolvedPopupProps\n  } = popupProps;\n\n  return {\n    popupClassName,\n    popupRef,\n    popupStyle,\n    resolvedPopupProps,\n  };\n}\n\nfunction resolveItemProps(itemProps: DivRenderProps) {\n  const {\n    children: _itemChildren,\n    className: itemClassName,\n    onAnimationEnd: _onAnimationEnd,\n    onAnimationIteration: _onAnimationIteration,\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragEnd: _onDragEnd,\n    onDragEnter: _onDragEnter,\n    onDragExit: _onDragExit,\n    onDragLeave: _onDragLeave,\n    onDragOver: _onDragOver,\n    onDragStart: _onDragStart,\n    onDrop: _onDrop,\n    ref: itemRef,\n    style: itemStyle,\n    ...resolvedItemProps\n  } = itemProps;\n\n  return {\n    itemClassName,\n    itemRef,\n    itemStyle,\n    resolvedItemProps,\n  };\n}\n\nconst FLUID_EASE = [0.16, 1, 0.3, 1] as const;\nconst EXIT_EASE = [0.4, 0, 0.6, 1] as const;\n\nconst POPUP_SPRING = {\n  type: \"spring\" as const,\n  stiffness: 260,\n  damping: 32,\n  mass: 0.95,\n};\n\nconst HIGHLIGHT_SPRING = {\n  type: \"spring\" as const,\n  stiffness: 460,\n  damping: 40,\n  mass: 0.82,\n};\n\nconst chevronTransition = {\n  type: \"spring\" as const,\n  stiffness: 380,\n  damping: 30,\n  mass: 0.8,\n};\n\nconst checkmarkTransition = {\n  type: \"spring\" as const,\n  stiffness: 500,\n  damping: 22,\n};\n\nconst popupMotion = {\n  animate: { opacity: 1, scale: 1, y: 0 },\n  closed: { opacity: 0, scale: 0.985, y: -5 },\n  initial: { opacity: 0, scale: 0.985, y: -5 },\n  openTransition: {\n    opacity: { duration: 0.34, ease: FLUID_EASE },\n    scale: POPUP_SPRING,\n    y: POPUP_SPRING,\n  },\n  closedTransition: {\n    opacity: { duration: 0.22, ease: EXIT_EASE },\n    scale: { duration: 0.22, ease: EXIT_EASE },\n    y: { duration: 0.22, ease: EXIT_EASE },\n  },\n};\n\nconst comboboxInputShellClassName =\n  \"group flex w-full items-center gap-1 border border-input bg-background pl-3.5 pr-1 text-base transition-[border-color,box-shadow] sm:text-sm hover:border-ring/40 focus-within:border-ring focus-within:ring-1 focus-within:ring-ring/25 [&:has(input[aria-invalid=true])]:border-destructive [&:has(input[aria-invalid=true])]:ring-1 [&:has(input[aria-invalid=true])]:ring-destructive/20 dark:[&:has(input[aria-invalid=true])]:border-destructive/50 dark:[&:has(input[aria-invalid=true])]:ring-destructive/40\";\n\nconst comboboxInputClassName =\n  \"h-full w-full flex-1 bg-transparent text-[16px] text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed sm:text-sm\";\n\nconst comboboxPopupPanelClassName =\n  \"w-[var(--anchor-width)] max-w-[var(--available-width)] transform-gpu overflow-hidden border border-neutral-200/60 bg-white text-neutral-900 shadow-[var(--ic-shadow-soft)] dark:border-neutral-700/60 dark:bg-neutral-950 dark:text-neutral-100\";\n\nconst comboboxListScrollbarClassName =\n  \"z-10 my-1.5 mr-0.5 w-1 shrink-0 touch-none select-none opacity-0 transition-opacity duration-150 before:absolute before:left-1/2 before:h-full before:w-5 before:-translate-x-1/2 before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0\";\n\nconst comboboxListThumbClassName =\n  \"relative rounded-full bg-muted-foreground/50 bg-[color:color-mix(in_oklch,var(--ic-muted-foreground),transparent_35%)]\";\n\nconst comboboxSizeClassNames = {\n  default: \"h-11\",\n  sm: \"h-9 pl-3 pr-1\",\n} as const;\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>({\n  actionsRef: actionsRefProp,\n  autoComplete = \"none\",\n  children,\n  defaultOpen = false,\n  highlightItemOnHover = true,\n  modal = false,\n  onItemHighlighted,\n  onOpenChange,\n  open: openProp,\n  openOnInputClick = false,\n  ...props\n}: ComboboxRootProps<Value, Multiple>) {\n  const internalActionsRef =\n    React.useRef<ComboboxPrimitive.Root.Actions | null>(null);\n  const actionsRef = actionsRefProp ?? internalActionsRef;\n  const isOpenControlled = openProp !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n  const [activeValue, setActiveValue] = React.useState<unknown>();\n  const open = isOpenControlled ? openProp : uncontrolledOpen;\n  const activeHighlightId = React.useId();\n  const skipExitAnimationRef = React.useRef(false);\n  const prefersReducedMotion = useReducedMotion() === true;\n\n  const setOpen = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isOpenControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      if (!nextOpen) {\n        setActiveValue(undefined);\n      }\n    },\n    [isOpenControlled]\n  );\n\n  const handleItemHighlighted = React.useCallback<\n    NonNullable<\n      ComboboxPrimitive.Root.Props<Value, Multiple>[\"onItemHighlighted\"]\n    >\n  >(\n    (highlightedValue, eventDetails) => {\n      setActiveValue(highlightedValue);\n      onItemHighlighted?.(highlightedValue, eventDetails);\n    },\n    [onItemHighlighted]\n  );\n\n  const handleOpenChange = React.useCallback<\n    NonNullable<ComboboxPrimitive.Root.Props<Value, Multiple>[\"onOpenChange\"]>\n  >(\n    (nextOpen, eventDetails) => {\n      if (!nextOpen && eventDetails.reason === \"item-press\") {\n        skipExitAnimationRef.current = true;\n      } else if (nextOpen) {\n        skipExitAnimationRef.current = false;\n      }\n\n      if (!eventDetails.isCanceled) {\n        setOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen, eventDetails);\n    },\n    [onOpenChange, setOpen]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      actionsRef,\n      activeHighlightId,\n      activeValue,\n      open,\n      prefersReducedMotion,\n      setActiveValue,\n      setOpen,\n      skipExitAnimationRef,\n    }),\n    [\n      actionsRef,\n      activeHighlightId,\n      activeValue,\n      open,\n      prefersReducedMotion,\n      setOpen,\n    ]\n  );\n\n  return (\n    <ComboboxContext.Provider value={contextValue}>\n      <ComboboxPrimitive.Root\n        {...props}\n        actionsRef={actionsRef}\n        autoComplete={autoComplete}\n        defaultOpen={isOpenControlled ? undefined : defaultOpen}\n        highlightItemOnHover={highlightItemOnHover}\n        modal={modal}\n        onItemHighlighted={handleItemHighlighted}\n        onOpenChange={handleOpenChange}\n        open={open}\n        openOnInputClick={openOnInputClick}\n      >\n        {children}\n      </ComboboxPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n}\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxClear({\n  className,\n  disabled: disabledProp,\n  ...props\n}: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      disabled={disabledProp}\n      {...props}\n      render={(clearProps, clearState) => {\n        const {\n          className: _clearClassName,\n          ref: clearRef,\n          style: _clearStyle,\n          ...resolvedClearProps\n        } = clearProps as React.ComponentProps<\"button\"> & {\n          ref?: React.Ref<HTMLButtonElement>;\n        };\n\n        return (\n          <button\n            {...resolvedClearProps}\n            aria-hidden={!clearState.visible}\n            aria-label=\"Clear selection\"\n            className={cn(\n              \"flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md text-muted-foreground/70 transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50\",\n              !clearState.visible && \"hidden\",\n              className\n            )}\n            data-slot=\"combobox-clear\"\n            ref={clearRef}\n            tabIndex={clearState.visible ? resolvedClearProps.tabIndex : -1}\n            type=\"button\"\n          >\n            <X className=\"h-3.5 w-3.5\" />\n          </button>\n        );\n      }}\n    />\n  );\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  disabled = false,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  const { open, prefersReducedMotion } = useComboboxContext(\"ComboboxTrigger\");\n\n  return (\n    <ComboboxPrimitive.Trigger\n      aria-expanded={open}\n      aria-label={open ? \"Collapse options\" : \"Open options\"}\n      className={cn(\n        \"flex size-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50\",\n        controlCornerClassName,\n        className\n      )}\n      data-slot=\"combobox-trigger\"\n      disabled={disabled}\n      type=\"button\"\n      {...props}\n    >\n      {children}\n      <motion.span\n        animate={{ rotate: open ? 180 : 0 }}\n        transition={\n          prefersReducedMotion ? INSTANT_TRANSITION : chevronTransition\n        }\n      >\n        <ChevronsUpDown className=\"h-4 w-4\" />\n      </motion.span>\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  id: idProp,\n  label,\n  labelClassName,\n  ref: refProp,\n  render: userRender,\n  showClear = true,\n  showTrigger = true,\n  size = \"default\",\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  label?: React.ReactNode;\n  labelClassName?: string;\n  showClear?: boolean;\n  showTrigger?: boolean;\n  size?: \"sm\" | \"default\";\n}) {\n  const { open, setOpen } = useComboboxContext(\"ComboboxInput\");\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  const generatedId = React.useId();\n  const inputId = idProp ?? generatedId;\n\n  const inputGroup = (\n    <ComboboxPrimitive.InputGroup\n      className={cn(\n        componentThemeClassName,\n        controlCornerClassName,\n        comboboxInputShellClassName,\n        comboboxSizeClassNames[size],\n        disabled && \"cursor-not-allowed opacity-50\",\n        open && \"border-ring ring-1 ring-ring/25\",\n        label ? undefined : className\n      )}\n      data-size={size}\n      data-slot=\"combobox-input\"\n      onClick={(event) => {\n        if (disabled) return;\n\n        const target = event.target as HTMLElement;\n\n        if (\n          target.closest(\n            '[data-slot=\"combobox-clear\"], [data-slot=\"combobox-trigger\"]'\n          )\n        ) {\n          return;\n        }\n\n        inputRef.current?.focus();\n      }}\n    >\n      <ComboboxPrimitive.Input\n        {...props}\n        disabled={disabled}\n        id={inputId}\n        onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n          if (event.key === \"Tab\") {\n            setOpen(false);\n          }\n        })}\n        render={(inputProps, inputState) => {\n          if (userRender) {\n            return typeof userRender === \"function\"\n              ? userRender(inputProps, inputState)\n              : userRender;\n          }\n\n          const {\n            className: primitiveClassName,\n            ref: primitiveRef,\n            style: primitiveStyle,\n            ...resolvedInputProps\n          } = inputProps as InputRenderProps;\n\n          return (\n            <InputPrimitive\n              {...resolvedInputProps}\n              disabled={disabled}\n              id={inputId}\n              render={(baseInputProps) => {\n                const {\n                  className: baseClassName,\n                  ref: baseRef,\n                  style: baseStyle,\n                  ...baseResolvedProps\n                } = baseInputProps as InputRenderProps;\n\n                return (\n                  <input\n                    {...baseResolvedProps}\n                    autoComplete=\"off\"\n                    className={cn(\n                      comboboxInputClassName,\n                      primitiveClassName,\n                      baseClassName\n                    )}\n                    data-slot=\"combobox-input-control\"\n                    readOnly={inputState.readOnly}\n                    ref={(node) => {\n                      inputRef.current = node;\n                      setRef(primitiveRef, node);\n                      setRef(baseRef, node);\n                      setRef(refProp, node);\n                    }}\n                    style={{ ...primitiveStyle, ...baseStyle }}\n                  />\n                );\n              }}\n            />\n          );\n        }}\n      />\n      {showClear ? <ComboboxClear disabled={disabled} /> : null}\n      {showTrigger ? <ComboboxTrigger disabled={disabled} /> : null}\n      {children}\n    </ComboboxPrimitive.InputGroup>\n  );\n\n  if (!label) {\n    return inputGroup;\n  }\n\n  return (\n    <div className={cn(\"flex w-full flex-col gap-2\", className)}>\n      <label\n        className={cn(\"font-medium text-foreground text-sm\", labelClassName)}\n        htmlFor={inputId}\n      >\n        {label}\n      </label>\n      {inputGroup}\n    </div>\n  );\n}\n\nfunction ComboboxContentPanel({\n  children,\n  className,\n  popupClassName,\n  popupRef,\n  popupState,\n  popupStyle,\n  resolvedPopupProps,\n}: {\n  children: React.ReactNode;\n  className?:\n    | string\n    | ((state: ComboboxPrimitive.Popup.State) => string | undefined);\n  popupClassName?: string;\n  popupRef?: React.Ref<HTMLDivElement>;\n  popupState: ComboboxPrimitive.Popup.State;\n  popupStyle?: React.CSSProperties;\n  resolvedPopupProps: Omit<\n    DivRenderProps,\n    \"children\" | \"className\" | \"ref\" | \"style\"\n  >;\n}) {\n  const { actionsRef, prefersReducedMotion, skipExitAnimationRef } =\n    useComboboxContext(\"ComboboxContentPanel\");\n  const isPopupVisible = popupState.open;\n  const skipExitAnimation = !popupState.open && skipExitAnimationRef.current;\n\n  return (\n    <div\n      {...resolvedPopupProps}\n      ref={(node) => {\n        setRef(popupRef, node);\n      }}\n      role=\"presentation\"\n      style={{\n        ...popupStyle,\n        transformOrigin: \"var(--transform-origin)\",\n      }}\n    >\n      <motion.div\n        animate={isPopupVisible ? popupMotion.animate : popupMotion.closed}\n        className={cn(\n          componentThemeClassName,\n          controlCornerClassName,\n          comboboxPopupPanelClassName,\n          popupClassName,\n          resolveStateClassName(className, popupState)\n        )}\n        initial={\n          popupState.transitionStatus === \"starting\"\n            ? popupMotion.initial\n            : false\n        }\n        onAnimationComplete={() => {\n          if (!popupState.open) {\n            skipExitAnimationRef.current = false;\n            actionsRef.current?.unmount();\n          }\n        }}\n        style={{\n          pointerEvents: isPopupVisible ? undefined : \"none\",\n          transformOrigin: \"var(--transform-origin)\",\n        }}\n        transition={\n          prefersReducedMotion\n            ? INSTANT_TRANSITION\n            : isPopupVisible\n              ? popupMotion.openTransition\n              : skipExitAnimation\n                ? INSTANT_TRANSITION\n                : popupMotion.closedTransition\n        }\n      >\n        {children}\n      </motion.div>\n    </div>\n  );\n}\n\nfunction ComboboxContent({\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  children,\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"anchor\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal keepMounted>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-[9999] outline-none\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          initialFocus={false}\n          {...props}\n          render={(popupProps, popupState) => {\n            const { popupClassName, popupRef, popupStyle, resolvedPopupProps } =\n              resolvePopupProps(popupProps as DivRenderProps);\n\n            return (\n              <ComboboxContentPanel\n                className={className}\n                popupClassName={popupClassName}\n                popupRef={popupRef}\n                popupState={popupState}\n                popupStyle={popupStyle}\n                resolvedPopupProps={resolvedPopupProps}\n              >\n                {children}\n              </ComboboxContentPanel>\n            );\n          }}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction ComboboxList({\n  className,\n  onPointerLeave,\n  ...props\n}: ComboboxPrimitive.List.Props) {\n  const { setActiveValue } = useComboboxContext(\"ComboboxList\");\n\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"relative max-h-64 overflow-hidden\", className)}\n    >\n      <ComboboxPrimitive.List\n        data-slot=\"combobox-list\"\n        onPointerLeave={composeEventHandlers(onPointerLeave, () => {\n          setActiveValue(undefined);\n        })}\n        {...props}\n        render={(listProps) => {\n          const {\n            children: listChildren,\n            className: listClassName,\n            ref: listRef,\n            style: listStyle,\n            ...resolvedListProps\n          } = listProps as DivRenderProps;\n\n          return (\n            <ScrollAreaPrimitive.Viewport\n              {...resolvedListProps}\n              className={cn(\n                \"max-h-64 min-h-0 overscroll-contain p-1 outline-none\",\n                listClassName\n              )}\n              ref={(node) => {\n                setRef(listRef, node);\n              }}\n              style={listStyle}\n            >\n              {listChildren}\n            </ScrollAreaPrimitive.Viewport>\n          );\n        }}\n      />\n      <ScrollAreaPrimitive.Scrollbar\n        className={comboboxListScrollbarClassName}\n        orientation=\"vertical\"\n      >\n        <ScrollAreaPrimitive.Thumb className={comboboxListThumbClassName} />\n      </ScrollAreaPrimitive.Scrollbar>\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ComboboxItemHighlight({\n  activeHighlightId,\n  prefersReducedMotion,\n  showHighlight,\n}: {\n  activeHighlightId: string;\n  prefersReducedMotion: boolean;\n  showHighlight: boolean;\n}) {\n  if (!showHighlight) {\n    return null;\n  }\n\n  return (\n    <motion.div\n      className={cn(\n        \"absolute inset-0 bg-accent\",\n        controlCornerInheritClassName\n      )}\n      layoutId={activeHighlightId}\n      transition={prefersReducedMotion ? INSTANT_TRANSITION : HIGHLIGHT_SPRING}\n    />\n  );\n}\n\nfunction ComboboxItemCheckmark({\n  prefersReducedMotion,\n  selected,\n}: {\n  prefersReducedMotion: boolean;\n  selected: boolean;\n}) {\n  return (\n    <span className=\"relative z-10 mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center\">\n      <AnimatePresence>\n        {selected ? (\n          <motion.span\n            animate={{ scale: 1, rotate: 0 }}\n            className=\"text-primary\"\n            exit={\n              prefersReducedMotion\n                ? undefined\n                : { scale: 0.95, rotate: 90, opacity: 0 }\n            }\n            initial={\n              prefersReducedMotion\n                ? false\n                : { scale: 0.95, rotate: -90, opacity: 0 }\n            }\n            transition={\n              prefersReducedMotion ? INSTANT_TRANSITION : checkmarkTransition\n            }\n          >\n            <Check className=\"h-4 w-4\" strokeWidth={3} />\n          </motion.span>\n        ) : null}\n      </AnimatePresence>\n    </span>\n  );\n}\n\nfunction ComboboxItemPanel({\n  activeHighlightId,\n  activeValue,\n  children,\n  className,\n  description,\n  itemProps,\n  itemState,\n  prefersReducedMotion,\n  setActiveValue,\n  value,\n}: {\n  activeHighlightId: string;\n  activeValue: unknown;\n  children: React.ReactNode;\n  className?:\n    | string\n    | ((state: ComboboxPrimitive.Item.State) => string | undefined);\n  description?: React.ReactNode;\n  itemProps: DivRenderProps;\n  itemState: ComboboxPrimitive.Item.State;\n  prefersReducedMotion: boolean;\n  setActiveValue: React.Dispatch<React.SetStateAction<unknown>>;\n  value: unknown;\n}) {\n  const { itemClassName, itemRef, itemStyle, resolvedItemProps } =\n    resolveItemProps(itemProps);\n  const showHighlight = itemState.highlighted || Object.is(activeValue, value);\n\n  const handlePointerHighlight = () => {\n    if (!itemState.disabled) {\n      setActiveValue(value);\n    }\n  };\n\n  return (\n    <motion.div\n      {...resolvedItemProps}\n      animate={{ opacity: 1, y: 0 }}\n      className={cn(\n        \"relative flex cursor-pointer select-none items-start gap-2 px-2.5 py-2 text-foreground text-sm transition-colors\",\n        controlCornerClassName,\n        itemState.disabled &&\n          \"pointer-events-none cursor-not-allowed opacity-50\",\n        itemClassName,\n        resolveStateClassName(className, itemState)\n      )}\n      initial={false}\n      onMouseEnter={composeEventHandlers(\n        resolvedItemProps.onMouseEnter,\n        handlePointerHighlight\n      )}\n      onPointerMove={composeEventHandlers(\n        resolvedItemProps.onPointerMove,\n        handlePointerHighlight\n      )}\n      ref={(node) => {\n        setRef(itemRef, node);\n      }}\n      style={itemStyle}\n      transition={\n        prefersReducedMotion\n          ? INSTANT_TRANSITION\n          : { duration: 0.12, ease: \"easeOut\" }\n      }\n    >\n      <ComboboxItemHighlight\n        activeHighlightId={activeHighlightId}\n        prefersReducedMotion={prefersReducedMotion}\n        showHighlight={showHighlight}\n      />\n      <ComboboxItemCheckmark\n        prefersReducedMotion={prefersReducedMotion}\n        selected={itemState.selected}\n      />\n      <span className=\"relative z-10 flex flex-col\">\n        <span className=\"font-medium leading-tight\">{children}</span>\n        {description ? (\n          <span className=\"text-muted-foreground text-xs\">{description}</span>\n        ) : null}\n      </span>\n    </motion.div>\n  );\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  description,\n  value,\n  ...props\n}: ComboboxPrimitive.Item.Props & {\n  description?: React.ReactNode;\n}) {\n  const {\n    activeHighlightId,\n    activeValue,\n    prefersReducedMotion,\n    setActiveValue,\n  } = useComboboxContext(\"ComboboxItem\");\n\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      value={value}\n      {...props}\n      render={(itemProps, itemState) => (\n        <ComboboxItemPanel\n          activeHighlightId={activeHighlightId}\n          activeValue={activeValue}\n          className={className}\n          description={description}\n          itemProps={itemProps as DivRenderProps}\n          itemState={itemState}\n          prefersReducedMotion={prefersReducedMotion}\n          setActiveValue={setActiveValue}\n          value={value}\n        >\n          {children}\n        </ComboboxItemPanel>\n      )}\n    />\n  );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"py-1\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\"px-2 py-1.5 text-muted-foreground text-xs\", className)}\n      data-slot=\"combobox-label\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  );\n}\n\nfunction ComboboxEmpty({\n  className,\n  children = \"No results found.\",\n  ...props\n}: ComboboxPrimitive.Empty.Props) {\n  const { prefersReducedMotion } = useComboboxContext(\"ComboboxEmpty\");\n\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\"text-center text-muted-foreground text-sm\", className)}\n      data-slot=\"combobox-empty\"\n      {...props}\n    >\n      <motion.span\n        animate={{ opacity: 1 }}\n        className=\"block px-3 py-6\"\n        initial={prefersReducedMotion ? false : { opacity: 0 }}\n        transition={\n          prefersReducedMotion ? INSTANT_TRANSITION : { duration: 0.18 }\n        }\n      >\n        {children}\n      </motion.span>\n    </ComboboxPrimitive.Empty>\n  );\n}\n\nfunction ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props) {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\"px-3 py-2 text-muted-foreground text-xs\", className)}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChips({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props & {\n    size?: \"sm\" | \"default\";\n  }) {\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        componentThemeClassName,\n        controlCornerClassName,\n        \"flex min-h-8 flex-wrap items-center gap-1 border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-data-[slot=combobox-chip]:px-1 has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\n        size === \"sm\" ? \"min-h-8\" : \"min-h-9\",\n        className\n      )}\n      data-size={size}\n      data-slot=\"combobox-chips\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean;\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      className={cn(\n        \"flex h-[calc(var(--spacing)*5.25)] w-fit items-center justify-center gap-1 whitespace-nowrap bg-muted px-1.5 font-medium text-foreground text-xs has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:opacity-50\",\n        controlCornerXsClassName,\n        className\n      )}\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      {showRemove ? (\n        <ComboboxPrimitive.ChipRemove\n          aria-label=\"Remove item\"\n          className={cn(\n            \"-ml-1 flex size-5 items-center justify-center opacity-50 transition-colors hover:bg-accent/60 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30\",\n            controlCornerXsClassName\n          )}\n          data-slot=\"combobox-chip-remove\"\n        >\n          <X className=\"pointer-events-none size-3\" />\n        </ComboboxPrimitive.ChipRemove>\n      ) : null}\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nfunction ComboboxChipsInput({\n  className,\n  disabled = false,\n  ref: refProp,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\">) {\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n\n  return (\n    <ComboboxPrimitive.Input\n      {...props}\n      disabled={disabled}\n      render={(inputProps) => {\n        const {\n          className: primitiveClassName,\n          ref: primitiveRef,\n          style: primitiveStyle,\n          ...resolvedInputProps\n        } = inputProps as InputRenderProps;\n\n        return (\n          <InputPrimitive\n            {...resolvedInputProps}\n            disabled={disabled}\n            render={(baseInputProps) => {\n              const {\n                className: baseClassName,\n                ref: baseRef,\n                style: baseStyle,\n                ...baseResolvedProps\n              } = baseInputProps as InputRenderProps;\n\n              return (\n                <input\n                  {...baseResolvedProps}\n                  autoComplete=\"off\"\n                  className={cn(\n                    \"min-w-16 flex-1 bg-transparent outline-none disabled:cursor-not-allowed\",\n                    primitiveClassName,\n                    baseClassName,\n                    className\n                  )}\n                  data-slot=\"combobox-chip-input\"\n                  ref={(node) => {\n                    inputRef.current = node;\n                    setRef(primitiveRef, node);\n                    setRef(baseRef, node);\n                    setRef(refProp, node);\n                  }}\n                  style={{ ...primitiveStyle, ...baseStyle }}\n                />\n              );\n            }}\n          />\n        );\n      }}\n    />\n  );\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null);\n}\n\nconst useComboboxFilter = ComboboxPrimitive.useFilter;\nconst useFilteredComboboxItems = ComboboxPrimitive.useFilteredItems;\n\nexport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxClear,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxStatus,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n  useComboboxFilter,\n  useFilteredComboboxItems,\n};\n",
      "type": "registry:ui"
    }
  ],
  "title": "Combobox (Base UI)",
  "description": "Compound Combobox parts layered over Base UI primitives, preserving the original input shell, clear action, item highlight, checkmark, and dropdown motion."
}