@brycks/core-front 0.5.0 → 0.6.0

package/dist/components/form/Combobox/Combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/form/Combobox/Combobox.tsx"],"sourcesContent":["/**\n * Combobox Component\n *\n * A searchable select/autocomplete component with keyboard navigation.\n * Combines the functionality of Input with dropdown selection.\n *\n * @module components/form/Combobox\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport {\n  componentHeights,\n  componentPaddingX,\n  componentGap,\n  iconSizes,\n} from '../../../design-system/primitives'\n\nexport type ComboboxSize = 'sm' | 'md' | 'lg'\n\nexport interface ComboboxOption {\n  /** Unique identifier for the option */\n  value: string\n  /** Display label */\n  label: string\n  /** Optional description */\n  description?: string\n  /** Optional icon */\n  icon?: ReactNode\n  /** Whether the option is disabled */\n  disabled?: boolean\n}\n\nexport interface ComboboxProps {\n  /** Available options */\n  options: ComboboxOption[]\n  /** Currently selected value (controlled) */\n  value?: string | null\n  /** Default selected value (uncontrolled) */\n  defaultValue?: string | null\n  /** Callback when selection changes */\n  onChange?: (value: string | null) => void\n  /** Callback when input value changes */\n  onInputChange?: (value: string) => void\n  /** Placeholder text */\n  placeholder?: string\n  /** Component size */\n  size?: ComboboxSize\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Whether the combobox is invalid */\n  isInvalid?: boolean\n  /** Whether the combobox is required */\n  required?: boolean\n  /** Whether to allow clearing the selection */\n  clearable?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** ID of element that labels this combobox */\n  'aria-labelledby'?: string\n  /** Custom filter function */\n  filterFn?: (option: ComboboxOption, inputValue: string) => boolean\n  /** Text to show when no options match */\n  emptyText?: string\n  /** Whether options are being loaded asynchronously */\n  isLoading?: boolean\n  /** Text to show while loading */\n  loadingText?: string\n  /** Whether to allow creating new options */\n  creatable?: boolean\n  /** Callback when creating new option */\n  onCreate?: (inputValue: string) => void\n  /** Label of the create-option button */\n  createLabel?: (inputValue: string) => ReactNode\n  /** Accessible label of the clear button */\n  clearLabel?: string\n  /** Accessible label of the options listbox (when no aria-label is given) */\n  listboxLabel?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<ComboboxSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: componentHeights.sm, fontSize: fontSizes.base - 1, padding: componentPaddingX.sm, iconSize: iconSizes.sm },\n  md: { height: componentHeights.md, fontSize: fontSizes.base, padding: componentPaddingX.md, iconSize: iconSizes.md },\n  lg: { height: componentHeights.lg, fontSize: fontSizes.md, padding: componentPaddingX.lg, iconSize: iconSizes.lg },\n}\n\nconst defaultFilterFn = (option: ComboboxOption, inputValue: string): boolean => {\n  const search = inputValue.toLowerCase()\n  return (\n    option.label.toLowerCase().includes(search) ||\n    option.value.toLowerCase().includes(search) ||\n    (option.description?.toLowerCase().includes(search) ?? false)\n  )\n}\n\nfunction ChevronDownIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nexport const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n  {\n    options,\n    value: controlledValue,\n    defaultValue = null,\n    onChange,\n    onInputChange,\n    placeholder = 'Select or search...',\n    size = 'md',\n    disabled = false,\n    isInvalid = false,\n    required = false,\n    clearable = true,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    filterFn = defaultFilterFn,\n    emptyText = 'No options found',\n    isLoading = false,\n    loadingText = 'Loading…',\n    creatable = false,\n    onCreate,\n    createLabel = (input) => `Create \"${input}\"`,\n    clearLabel = 'Clear selection',\n    listboxLabel = 'Options',\n    className,\n    testId,\n  },\n  ref\n) {\n  const listboxId = useId('combobox-listbox')\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [inputValue, setInputValue] = useState('')\n  const [isOpen, setIsOpen] = useState(false)\n  const [activeIndex, setActiveIndex] = useState(-1)\n  const [isFocused, setIsFocused] = useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const listRef = useRef<HTMLUListElement>(null)\n\n  const value = controlledValue !== undefined ? controlledValue : internalValue\n  const config = sizeConfig[size]\n\n  // Get selected option\n  const selectedOption = useMemo(\n    () => options.find((opt) => opt.value === value),\n    [options, value]\n  )\n\n  // Filter options based on input\n  const filteredOptions = useMemo(() => {\n    if (!inputValue) return options\n    return options.filter((opt) => filterFn(opt, inputValue))\n  }, [options, inputValue, filterFn])\n\n  // Sync input with selected value\n  useEffect(() => {\n    if (!isOpen && selectedOption) {\n      setInputValue(selectedOption.label)\n    } else if (!isOpen && !value) {\n      setInputValue('')\n    }\n  }, [isOpen, selectedOption, value])\n\n  const handleSelect = useCallback(\n    (optionValue: string | null) => {\n      if (controlledValue === undefined) {\n        setInternalValue(optionValue)\n      }\n      onChange?.(optionValue)\n      setIsOpen(false)\n      setActiveIndex(-1)\n      inputRef.current?.focus()\n    },\n    [controlledValue, onChange]\n  )\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value\n      setInputValue(newValue)\n      onInputChange?.(newValue)\n      if (!isOpen) setIsOpen(true)\n      setActiveIndex(0)\n    },\n    [isOpen, onInputChange]\n  )\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      handleSelect(null)\n      setInputValue('')\n      inputRef.current?.focus()\n    },\n    [handleSelect]\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault()\n          if (!isOpen) {\n            setIsOpen(true)\n            setActiveIndex(0)\n          } else {\n            setActiveIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1))\n          }\n          break\n        case 'ArrowUp':\n          e.preventDefault()\n          if (isOpen) {\n            setActiveIndex((prev) => Math.max(prev - 1, 0))\n          }\n          break\n        case 'Enter':\n          e.preventDefault()\n          if (isOpen && activeIndex >= 0 && filteredOptions[activeIndex]) {\n            if (!filteredOptions[activeIndex].disabled) {\n              handleSelect(filteredOptions[activeIndex].value)\n            }\n          } else if (creatable && inputValue && filteredOptions.length === 0) {\n            onCreate?.(inputValue)\n          }\n          break\n        case 'Escape':\n          e.preventDefault()\n          setIsOpen(false)\n          setActiveIndex(-1)\n          if (selectedOption) {\n            setInputValue(selectedOption.label)\n          }\n          break\n        case 'Tab':\n          if (isOpen) {\n            setIsOpen(false)\n            setActiveIndex(-1)\n          }\n          break\n      }\n    },\n    [isOpen, activeIndex, filteredOptions, handleSelect, creatable, inputValue, onCreate, selectedOption]\n  )\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleClick = (e: MouseEvent) => {\n      if (!containerRef.current?.contains(e.target as Node)) {\n        setIsOpen(false)\n        setActiveIndex(-1)\n        if (selectedOption) {\n          setInputValue(selectedOption.label)\n        }\n      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen, selectedOption])\n\n  // Scroll active option into view\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    const list = listRef.current\n    const activeItem = list?.children[activeIndex] as HTMLElement | undefined\n    activeItem?.scrollIntoView({ block: 'nearest' })\n  }, [isOpen, activeIndex])\n\n  // Calculate dropdown position\n  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })\n\n  useEffect(() => {\n    if (!isOpen || !containerRef.current) return\n\n    const updatePosition = () => {\n      const rect = containerRef.current!.getBoundingClientRect()\n      setDropdownPosition({\n        top: rect.bottom + window.scrollY + spacing[1],\n        left: rect.left + window.scrollX,\n        width: rect.width,\n      })\n    }\n\n    updatePosition()\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, true)\n\n    return () => {\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, true)\n    }\n  }, [isOpen])\n\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'inline-flex',\n    width: '100%',\n  }\n\n  const inputWrapperStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    height: config.height,\n    backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n    border: `1px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-md)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    cursor: disabled ? 'not-allowed' : 'text',\n    boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n  }\n\n  const inputStyle: CSSProperties = {\n    flex: 1,\n    height: '100%',\n    padding: `0 ${config.padding}px`,\n    paddingRight: spacing[10],\n    fontSize: config.fontSize,\n    color: disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    outline: 'none',\n    cursor: disabled ? 'not-allowed' : 'text',\n  }\n\n  const iconsStyle: CSSProperties = {\n    position: 'absolute',\n    right: config.padding,\n    display: 'flex',\n    alignItems: 'center',\n    gap: spacing[1],\n    pointerEvents: 'none',\n  }\n\n  const clearButtonStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: spacing[5],\n    height: spacing[5],\n    color: 'var(--brycks-foreground-muted)',\n    cursor: 'pointer',\n    borderRadius: 'var(--brycks-radius-sm)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    pointerEvents: 'auto',\n  }\n\n  const chevronStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'var(--brycks-foreground-muted)',\n    transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',\n    transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n  }\n\n  const dropdownStyle: CSSProperties = {\n    position: 'absolute',\n    top: dropdownPosition.top,\n    left: dropdownPosition.left,\n    width: dropdownPosition.width,\n    maxHeight: 300,\n    overflowY: 'auto',\n    backgroundColor: 'var(--brycks-background-elevated)',\n    border: '1px solid var(--brycks-border-default)',\n    borderRadius: 'var(--brycks-radius-lg)',\n    boxShadow: 'var(--brycks-shadow-lg)',\n    zIndex: 'var(--brycks-z-dropdown)' as unknown as number,\n    padding: spacing[1],\n    animation: `brycks-dropdown-in ${durations.quick}ms ${easings.easeOut}`,\n  }\n\n  const optionStyle = (isActive: boolean, isDisabled: boolean, isSelected: boolean): CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: componentGap.md,\n    padding: `${spacing[2]}px ${componentPaddingX.sm}px`,\n    fontSize: config.fontSize,\n    color: isDisabled\n      ? 'var(--brycks-foreground-disabled)'\n      : 'var(--brycks-foreground-default)',\n    backgroundColor: isActive\n      ? 'var(--brycks-background-muted)'\n      : isSelected\n      ? 'var(--brycks-primary-muted)'\n      : 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n  })\n\n  const emptyStyle: CSSProperties = {\n    padding: `${spacing[4]}px ${spacing[3]}px`,\n    fontSize: config.fontSize,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: 'center',\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx('brycks-combobox', `brycks-combobox--${size}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div\n        style={inputWrapperStyle}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded={isOpen}\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined}\n          aria-invalid={isInvalid}\n          aria-required={required}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          value={inputValue}\n          placeholder={placeholder}\n          disabled={disabled}\n          style={inputStyle}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => {\n            setIsFocused(true)\n            setIsOpen(true)\n          }}\n          onBlur={() => setIsFocused(false)}\n        />\n        <div style={iconsStyle}>\n          {clearable && value && !disabled && (\n            <button\n              type=\"button\"\n              aria-label={clearLabel}\n              style={clearButtonStyle}\n              onClick={handleClear}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.backgroundColor = 'transparent'\n                e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n              }}\n            >\n              <ClearIcon />\n            </button>\n          )}\n          <span style={chevronStyle}>\n            <ChevronDownIcon />\n          </span>\n        </div>\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <>\n            <style>\n              {`\n                @keyframes brycks-dropdown-in {\n                  from { opacity: 0; transform: translateY(-4px); }\n                  to { opacity: 1; transform: translateY(0); }\n                }\n              `}\n            </style>\n            <ul\n              ref={listRef}\n              id={listboxId}\n              role=\"listbox\"\n              aria-label={ariaLabel || listboxLabel}\n              aria-busy={isLoading || undefined}\n              style={dropdownStyle}\n            >\n              {isLoading ? (\n                <li style={emptyStyle} role=\"status\" aria-live=\"polite\">\n                  <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: spacing[2] }}>\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      className=\"brycks-animate-spin\"\n                      aria-hidden=\"true\"\n                    >\n                      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" opacity=\"0.2\" />\n                      <path d=\"M12 2C6.47715 2 2 6.47715 2 12\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" />\n                    </svg>\n                    {loadingText}\n                  </span>\n                </li>\n              ) : filteredOptions.length > 0 ? (\n                filteredOptions.map((option, index) => (\n                  <li\n                    key={option.value}\n                    id={`${listboxId}-option-${index}`}\n                    role=\"option\"\n                    aria-selected={option.value === value}\n                    aria-disabled={option.disabled}\n                    style={optionStyle(index === activeIndex, !!option.disabled, option.value === value)}\n                    onClick={() => !option.disabled && handleSelect(option.value)}\n                    onMouseEnter={() => setActiveIndex(index)}\n                  >\n                    {option.icon && <span style={{ flexShrink: 0 }}>{option.icon}</span>}\n                    <div style={{ flex: 1, minWidth: 0 }}>\n                      <div style={{ fontWeight: option.value === value ? 500 : 400 }}>{option.label}</div>\n                      {option.description && (\n                        <div style={{ fontSize: fontSizes.sm, color: 'var(--brycks-foreground-muted)' }}>\n                          {option.description}\n                        </div>\n                      )}\n                    </div>\n                    {option.value === value && (\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" style={{ flexShrink: 0 }}>\n                        <path\n                          d=\"M3 8l3 3 7-7\"\n                          stroke=\"var(--brycks-primary-default)\"\n                          strokeWidth=\"2\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                        />\n                      </svg>\n                    )}\n                  </li>\n                ))\n              ) : (\n                <li style={emptyStyle}>\n                  {creatable && inputValue ? (\n                    <button\n                      type=\"button\"\n                      style={{\n                        ...optionStyle(true, false, false),\n                        width: '100%',\n                        border: 'none',\n                        cursor: 'pointer',\n                      }}\n                      onClick={() => onCreate?.(inputValue)}\n                    >\n                      {createLabel(inputValue)}\n                    </button>\n                  ) : (\n                    emptyText\n                  )}\n                </li>\n              )}\n            </ul>\n          </>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nCombobox.displayName = 'Combobox'\n"],"names":["sizeConfig","componentHeights","fontSizes","componentPaddingX","iconSizes","defaultFilterFn","option","inputValue","search","ChevronDownIcon","jsx","ClearIcon","Combobox","forwardRef","options","controlledValue","defaultValue","onChange","onInputChange","placeholder","size","disabled","isInvalid","required","clearable","ariaLabel","ariaLabelledby","filterFn","emptyText","isLoading","loadingText","creatable","onCreate","createLabel","input","clearLabel","listboxLabel","className","testId","ref","listboxId","useId","internalValue","setInternalValue","useState","setInputValue","isOpen","setIsOpen","activeIndex","setActiveIndex","isFocused","setIsFocused","containerRef","useRef","inputRef","listRef","value","config","selectedOption","useMemo","opt","filteredOptions","useEffect","handleSelect","useCallback","optionValue","handleInputChange","newValue","handleClear","handleKeyDown","prev","handleClick","e","dropdownPosition","setDropdownPosition","updatePosition","rect","spacing","containerStyle","inputWrapperStyle","durations","easings","inputStyle","iconsStyle","clearButtonStyle","chevronStyle","dropdownStyle","optionStyle","isActive","isDisabled","isSelected","componentGap","emptyStyle","jsxs","cx","node","createPortal","Fragment","index"],"mappings":"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"}
+{"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/form/Combobox/Combobox.tsx"],"sourcesContent":["/**\n * Combobox Component\n *\n * A searchable select/autocomplete component with keyboard navigation.\n * Combines the functionality of Input with dropdown selection.\n *\n * @module components/form/Combobox\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\nimport { spacing } from '../../../design-system'\n\nexport type ComboboxSize = 'sm' | 'md' | 'lg'\n\nexport interface ComboboxOption {\n  /** Unique identifier for the option */\n  value: string\n  /** Display label */\n  label: string\n  /** Optional description */\n  description?: string\n  /** Optional icon */\n  icon?: ReactNode\n  /** Whether the option is disabled */\n  disabled?: boolean\n}\n\nexport interface ComboboxProps {\n  /** Available options */\n  options: ComboboxOption[]\n  /** Currently selected value (controlled) */\n  value?: string | null\n  /** Default selected value (uncontrolled) */\n  defaultValue?: string | null\n  /** Callback when selection changes */\n  onChange?: (value: string | null) => void\n  /** Callback when input value changes */\n  onInputChange?: (value: string) => void\n  /** Placeholder text */\n  placeholder?: string\n  /** Component size */\n  size?: ComboboxSize\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Whether the combobox is invalid */\n  isInvalid?: boolean\n  /** Whether the combobox is required */\n  required?: boolean\n  /** Whether to allow clearing the selection */\n  clearable?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** ID of element that labels this combobox */\n  'aria-labelledby'?: string\n  /** Custom filter function */\n  filterFn?: (option: ComboboxOption, inputValue: string) => boolean\n  /** Text to show when no options match */\n  emptyText?: string\n  /** Whether options are being loaded asynchronously */\n  isLoading?: boolean\n  /** Text to show while loading */\n  loadingText?: string\n  /** Whether to allow creating new options */\n  creatable?: boolean\n  /** Callback when creating new option */\n  onCreate?: (inputValue: string) => void\n  /** Label of the create-option button */\n  createLabel?: (inputValue: string) => ReactNode\n  /** Accessible label of the clear button */\n  clearLabel?: string\n  /** Accessible label of the options listbox (when no aria-label is given) */\n  listboxLabel?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst defaultFilterFn = (option: ComboboxOption, inputValue: string): boolean => {\n  const search = inputValue.toLowerCase()\n  return (\n    option.label.toLowerCase().includes(search) ||\n    option.value.toLowerCase().includes(search) ||\n    (option.description?.toLowerCase().includes(search) ?? false)\n  )\n}\n\nfunction ChevronDownIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nexport const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n  {\n    options,\n    value: controlledValue,\n    defaultValue = null,\n    onChange,\n    onInputChange,\n    placeholder = 'Select or search...',\n    size = 'md',\n    disabled = false,\n    isInvalid = false,\n    required = false,\n    clearable = true,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    filterFn = defaultFilterFn,\n    emptyText = 'No options found',\n    isLoading = false,\n    loadingText = 'Loading…',\n    creatable = false,\n    onCreate,\n    createLabel = (input) => `Create \"${input}\"`,\n    clearLabel = 'Clear selection',\n    listboxLabel = 'Options',\n    className,\n    testId,\n  },\n  ref\n) {\n  const listboxId = useId('combobox-listbox')\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [inputValue, setInputValue] = useState('')\n  const [isOpen, setIsOpen] = useState(false)\n  const [activeIndex, setActiveIndex] = useState(-1)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const listRef = useRef<HTMLUListElement>(null)\n\n  const value = controlledValue !== undefined ? controlledValue : internalValue\n\n  // Get selected option\n  const selectedOption = useMemo(\n    () => options.find((opt) => opt.value === value),\n    [options, value]\n  )\n\n  // Filter options based on input\n  const filteredOptions = useMemo(() => {\n    if (!inputValue) return options\n    return options.filter((opt) => filterFn(opt, inputValue))\n  }, [options, inputValue, filterFn])\n\n  // Sync input with selected value\n  useEffect(() => {\n    if (!isOpen && selectedOption) {\n      setInputValue(selectedOption.label)\n    } else if (!isOpen && !value) {\n      setInputValue('')\n    }\n  }, [isOpen, selectedOption, value])\n\n  const handleSelect = useCallback(\n    (optionValue: string | null) => {\n      if (controlledValue === undefined) {\n        setInternalValue(optionValue)\n      }\n      onChange?.(optionValue)\n      setIsOpen(false)\n      setActiveIndex(-1)\n      inputRef.current?.focus()\n    },\n    [controlledValue, onChange]\n  )\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value\n      setInputValue(newValue)\n      onInputChange?.(newValue)\n      if (!isOpen) setIsOpen(true)\n      setActiveIndex(0)\n    },\n    [isOpen, onInputChange]\n  )\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      handleSelect(null)\n      setInputValue('')\n      inputRef.current?.focus()\n    },\n    [handleSelect]\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault()\n          if (!isOpen) {\n            setIsOpen(true)\n            setActiveIndex(0)\n          } else {\n            setActiveIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1))\n          }\n          break\n        case 'ArrowUp':\n          e.preventDefault()\n          if (isOpen) {\n            setActiveIndex((prev) => Math.max(prev - 1, 0))\n          }\n          break\n        case 'Enter':\n          e.preventDefault()\n          if (isOpen && activeIndex >= 0 && filteredOptions[activeIndex]) {\n            if (!filteredOptions[activeIndex].disabled) {\n              handleSelect(filteredOptions[activeIndex].value)\n            }\n          } else if (creatable && inputValue && filteredOptions.length === 0) {\n            onCreate?.(inputValue)\n          }\n          break\n        case 'Escape':\n          e.preventDefault()\n          setIsOpen(false)\n          setActiveIndex(-1)\n          if (selectedOption) {\n            setInputValue(selectedOption.label)\n          }\n          break\n        case 'Tab':\n          if (isOpen) {\n            setIsOpen(false)\n            setActiveIndex(-1)\n          }\n          break\n      }\n    },\n    [isOpen, activeIndex, filteredOptions, handleSelect, creatable, inputValue, onCreate, selectedOption]\n  )\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleClick = (e: MouseEvent) => {\n      if (!containerRef.current?.contains(e.target as Node)) {\n        setIsOpen(false)\n        setActiveIndex(-1)\n        if (selectedOption) {\n          setInputValue(selectedOption.label)\n        }\n      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen, selectedOption])\n\n  // Scroll active option into view\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    const list = listRef.current\n    const activeItem = list?.children[activeIndex] as HTMLElement | undefined\n    activeItem?.scrollIntoView({ block: 'nearest' })\n  }, [isOpen, activeIndex])\n\n  // Calculate dropdown position\n  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })\n\n  useEffect(() => {\n    if (!isOpen || !containerRef.current) return\n\n    const updatePosition = () => {\n      const rect = containerRef.current!.getBoundingClientRect()\n      setDropdownPosition({\n        top: rect.bottom + window.scrollY + spacing[1],\n        left: rect.left + window.scrollX,\n        width: rect.width,\n      })\n    }\n\n    updatePosition()\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, true)\n\n    return () => {\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, true)\n    }\n  }, [isOpen])\n\n  // Only the portalled dropdown's coordinates are dynamic (measured from the\n  // trigger via getBoundingClientRect); everything else lives in CSS.\n  const dropdownStyle: CSSProperties = {\n    top: dropdownPosition.top,\n    left: dropdownPosition.left,\n    width: dropdownPosition.width,\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx('brycks-combobox', `brycks-combobox--${size}`, className)}\n      data-testid={testId}\n    >\n      <div\n        className={cx(\n          'brycks-combobox__wrapper',\n          isInvalid && 'brycks-combobox__wrapper--invalid',\n          disabled && 'brycks-combobox__wrapper--disabled'\n        )}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded={isOpen}\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined}\n          aria-invalid={isInvalid}\n          aria-required={required}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          value={inputValue}\n          placeholder={placeholder}\n          disabled={disabled}\n          className=\"brycks-combobox__input\"\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => {\n            setIsOpen(true)\n          }}\n        />\n        <div className=\"brycks-combobox__icons\">\n          {clearable && value && !disabled && (\n            <button\n              type=\"button\"\n              aria-label={clearLabel}\n              className=\"brycks-combobox__clear\"\n              onClick={handleClear}\n            >\n              <ClearIcon />\n            </button>\n          )}\n          <span className={cx('brycks-combobox__chevron', isOpen && 'brycks-combobox__chevron--open')}>\n            <ChevronDownIcon />\n          </span>\n        </div>\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <ul\n            ref={listRef}\n            id={listboxId}\n            role=\"listbox\"\n            aria-label={ariaLabel || listboxLabel}\n            aria-busy={isLoading || undefined}\n            className=\"brycks-combobox__dropdown\"\n            style={dropdownStyle}\n          >\n            {isLoading ? (\n              <li className=\"brycks-combobox__empty\" role=\"status\" aria-live=\"polite\">\n                <span className=\"brycks-combobox__loading\">\n                  <svg\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    className=\"brycks-animate-spin\"\n                    aria-hidden=\"true\"\n                  >\n                    <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" opacity=\"0.2\" />\n                    <path d=\"M12 2C6.47715 2 2 6.47715 2 12\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" />\n                  </svg>\n                  {loadingText}\n                </span>\n              </li>\n            ) : filteredOptions.length > 0 ? (\n              filteredOptions.map((option, index) => (\n                <li\n                  key={option.value}\n                  id={`${listboxId}-option-${index}`}\n                  role=\"option\"\n                  aria-selected={option.value === value}\n                  aria-disabled={option.disabled}\n                  className={cx(\n                    'brycks-combobox__option',\n                    option.value === value && 'brycks-combobox__option--selected',\n                    index === activeIndex && 'brycks-combobox__option--active',\n                    option.disabled && 'brycks-combobox__option--disabled'\n                  )}\n                  onClick={() => !option.disabled && handleSelect(option.value)}\n                  onMouseEnter={() => setActiveIndex(index)}\n                >\n                  {option.icon && <span className=\"brycks-combobox__option-icon\">{option.icon}</span>}\n                  <div className=\"brycks-combobox__option-body\">\n                    <div className=\"brycks-combobox__option-label\">{option.label}</div>\n                    {option.description && (\n                      <div className=\"brycks-combobox__option-description\">\n                        {option.description}\n                      </div>\n                    )}\n                  </div>\n                  {option.value === value && (\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" className=\"brycks-combobox__option-check\">\n                      <path\n                        d=\"M3 8l3 3 7-7\"\n                        stroke=\"var(--brycks-primary-default)\"\n                        strokeWidth=\"2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                      />\n                    </svg>\n                  )}\n                </li>\n              ))\n            ) : (\n              <li className=\"brycks-combobox__empty\">\n                {creatable && inputValue ? (\n                  <button\n                    type=\"button\"\n                    className=\"brycks-combobox__option brycks-combobox__option--active brycks-combobox__option--create\"\n                    onClick={() => onCreate?.(inputValue)}\n                  >\n                    {createLabel(inputValue)}\n                  </button>\n                ) : (\n                  emptyText\n                )}\n              </li>\n            )}\n          </ul>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nCombobox.displayName = 'Combobox'\n"],"names":["defaultFilterFn","option","inputValue","search","ChevronDownIcon","jsx","ClearIcon","Combobox","forwardRef","options","controlledValue","defaultValue","onChange","onInputChange","placeholder","size","disabled","isInvalid","required","clearable","ariaLabel","ariaLabelledby","filterFn","emptyText","isLoading","loadingText","creatable","onCreate","createLabel","input","clearLabel","listboxLabel","className","testId","ref","listboxId","useId","internalValue","setInternalValue","useState","setInputValue","isOpen","setIsOpen","activeIndex","setActiveIndex","containerRef","useRef","inputRef","listRef","value","selectedOption","useMemo","opt","filteredOptions","useEffect","handleSelect","useCallback","optionValue","handleInputChange","newValue","handleClear","handleKeyDown","prev","handleClick","e","dropdownPosition","setDropdownPosition","updatePosition","rect","spacing","dropdownStyle","jsxs","cx","node","createPortal","index"],"mappings":"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"}