@brycks/core-front 0.3.5 → 0.3.6

package/dist/components/form/MultiSelect/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../../src/components/form/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/**\n * MultiSelect Component\n *\n * A dropdown component for selecting multiple options.\n * Displays selected items as chips with removal capability.\n *\n * @module components/form/MultiSelect\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} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX, componentGap } from '../../../design-system/primitives'\n\nexport type MultiSelectSize = 'sm' | 'md' | 'lg'\n\nexport interface MultiSelectOption {\n  /** Unique identifier */\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  /** Optional group */\n  group?: string\n}\n\nexport interface MultiSelectProps {\n  /** Available options */\n  options: MultiSelectOption[]\n  /** Selected values (controlled) */\n  value?: string[]\n  /** Default selected values (uncontrolled) */\n  defaultValue?: string[]\n  /** Callback when selection changes */\n  onChange?: (values: string[]) => void\n  /** Placeholder text */\n  placeholder?: string\n  /** Component size */\n  size?: MultiSelectSize\n  /** Maximum selections allowed */\n  maxSelections?: number\n  /** Whether the select is searchable */\n  searchable?: boolean\n  /** Whether the select is disabled */\n  disabled?: boolean\n  /** Whether the select is invalid */\n  isInvalid?: boolean\n  /** Whether to allow clearing all */\n  clearable?: boolean\n  /** Text when no options match search */\n  emptyText?: string\n  /** Whether to close on select */\n  closeOnSelect?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** ID of element that labels this select */\n  'aria-labelledby'?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<MultiSelectSize, { minHeight: number; fontSize: number; chipHeight: number; padding: number; gap: number }> = {\n  sm: { minHeight: componentHeights.sm, fontSize: fontSizes.base - 1, chipHeight: spacing[5], padding: componentPaddingX.xs, gap: spacing[1] },\n  md: { minHeight: componentHeights.md, fontSize: fontSizes.base, chipHeight: spacing[6], padding: componentPaddingX.sm, gap: spacing[1.5] },\n  lg: { minHeight: componentHeights.lg, fontSize: fontSizes.md, chipHeight: spacing[7], padding: componentPaddingX.sm, gap: spacing[2] },\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 CloseIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3 8l3 3 7-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nexport const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(\n  {\n    options,\n    value: controlledValue,\n    defaultValue = [],\n    onChange,\n    placeholder = 'Select options...',\n    size = 'md',\n    maxSelections,\n    searchable = true,\n    disabled = false,\n    isInvalid = false,\n    clearable = true,\n    emptyText = 'No options found',\n    closeOnSelect = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState<string[]>(defaultValue)\n  const [isOpen, setIsOpen] = useState(false)\n  const [searchValue, setSearchValue] = useState('')\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 options\n  const selectedOptions = useMemo(\n    () => options.filter((opt) => value.includes(opt.value)),\n    [options, value]\n  )\n\n  // Filter and group options\n  const filteredOptions = useMemo(() => {\n    let filtered = options.filter(\n      (opt) =>\n        !opt.disabled &&\n        (opt.label.toLowerCase().includes(searchValue.toLowerCase()) ||\n          opt.description?.toLowerCase().includes(searchValue.toLowerCase()))\n    )\n\n    // Group by group property\n    const groups = new Map<string | undefined, MultiSelectOption[]>()\n    filtered.forEach((opt) => {\n      const group = opt.group\n      if (!groups.has(group)) {\n        groups.set(group, [])\n      }\n      groups.get(group)!.push(opt)\n    })\n\n    return groups\n  }, [options, searchValue])\n\n  // Flatten for keyboard navigation\n  const flatOptions = useMemo(() => {\n    const flat: MultiSelectOption[] = []\n    filteredOptions.forEach((opts) => flat.push(...opts))\n    return flat\n  }, [filteredOptions])\n\n  const updateValue = useCallback(\n    (newValue: string[]) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  const toggleOption = useCallback(\n    (optionValue: string) => {\n      const isSelected = value.includes(optionValue)\n\n      if (isSelected) {\n        updateValue(value.filter((v) => v !== optionValue))\n      } else {\n        if (maxSelections && value.length >= maxSelections) return\n        updateValue([...value, optionValue])\n      }\n\n      if (closeOnSelect) {\n        setIsOpen(false)\n      }\n\n      setSearchValue('')\n      inputRef.current?.focus()\n    },\n    [value, maxSelections, closeOnSelect, updateValue]\n  )\n\n  const removeOption = useCallback(\n    (optionValue: string, e?: React.MouseEvent) => {\n      e?.stopPropagation()\n      updateValue(value.filter((v) => v !== optionValue))\n    },\n    [value, updateValue]\n  )\n\n  const clearAll = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      updateValue([])\n      inputRef.current?.focus()\n    },\n    [updateValue]\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, flatOptions.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 && flatOptions[activeIndex]) {\n            toggleOption(flatOptions[activeIndex].value)\n          }\n          break\n        case 'Escape':\n          e.preventDefault()\n          setIsOpen(false)\n          setActiveIndex(-1)\n          break\n        case 'Backspace':\n          if (!searchValue && value.length > 0) {\n            removeOption(value[value.length - 1])\n          }\n          break\n      }\n    },\n    [isOpen, activeIndex, flatOptions, searchValue, value, toggleOption, removeOption]\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        setSearchValue('')\n      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  // Scroll active option into view\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    const list = listRef.current\n    const items = list?.querySelectorAll('[role=\"option\"]')\n    const activeItem = items?.[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    width: '100%',\n  }\n\n  const wrapperStyle: CSSProperties = {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: config.gap,\n    minHeight: config.minHeight,\n    padding: `${spacing[1]}px ${config.padding}px`,\n    paddingRight: spacing[10],\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' : 'pointer',\n    boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n  }\n\n  const chipStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: spacing[1],\n    height: config.chipHeight,\n    padding: `0 ${spacing[2]}px`,\n    fontSize: config.fontSize - 1,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n    backgroundColor: 'var(--brycks-background-muted)',\n    borderRadius: 'var(--brycks-radius-full)',\n    whiteSpace: 'nowrap',\n  }\n\n  const chipRemoveStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: spacing[4],\n    height: spacing[4],\n    marginLeft: spacing[0.5],\n    marginRight: -spacing[1],\n    color: 'inherit',\n    opacity: 0.7,\n    cursor: 'pointer',\n    borderRadius: 'var(--brycks-radius-full)',\n  }\n\n  const inputStyle: CSSProperties = {\n    flex: 1,\n    minWidth: 60,\n    height: config.chipHeight,\n    padding: 0,\n    fontSize: config.fontSize,\n    color: 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    outline: 'none',\n  }\n\n  const iconsStyle: CSSProperties = {\n    position: 'absolute',\n    right: config.padding,\n    top: '50%',\n    transform: 'translateY(-50%)',\n    display: 'flex',\n    alignItems: 'center',\n    gap: spacing[1],\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  }\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    pointerEvents: 'none',\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  }\n\n  const groupLabelStyle: CSSProperties = {\n    padding: `${spacing[2]}px ${spacing[3]}px ${spacing[1]}px`,\n    fontSize: fontSizes.xs,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n  }\n\n  const optionStyle = (isActive: boolean, _isSelected: boolean): CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: componentGap.md,\n    padding: `${spacing[2]}px ${spacing[3]}px`,\n    fontSize: config.fontSize,\n    color: 'var(--brycks-foreground-default)',\n    backgroundColor: isActive ? 'var(--brycks-background-muted)' : 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: '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  let optionIndex = -1\n\n  return (\n    <div\n      ref={(node) => {\n        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      }}\n      className={cx('brycks-multiselect', `brycks-multiselect--${size}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div\n        style={wrapperStyle}\n        onClick={() => {\n          if (!disabled) {\n            setIsOpen(true)\n            inputRef.current?.focus()\n          }\n        }}\n      >\n        {selectedOptions.map((opt) => (\n          <span key={opt.value} style={chipStyle}>\n            {opt.label}\n            <button\n              type=\"button\"\n              aria-label={`Remove ${opt.label}`}\n              style={chipRemoveStyle}\n              onClick={(e) => removeOption(opt.value, e)}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.opacity = '1'\n                e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.1)'\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.opacity = '0.7'\n                e.currentTarget.style.backgroundColor = 'transparent'\n              }}\n            >\n              <CloseIcon />\n            </button>\n          </span>\n        ))}\n        {searchable && (\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-expanded={isOpen}\n            aria-haspopup=\"listbox\"\n            aria-autocomplete=\"list\"\n            aria-invalid={isInvalid}\n            value={searchValue}\n            placeholder={selectedOptions.length === 0 ? placeholder : ''}\n            disabled={disabled}\n            style={inputStyle}\n            onChange={(e) => {\n              setSearchValue(e.target.value)\n              if (!isOpen) setIsOpen(true)\n              setActiveIndex(0)\n            }}\n            onKeyDown={handleKeyDown}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n          />\n        )}\n        {!searchable && selectedOptions.length === 0 && (\n          <span style={{ color: 'var(--brycks-foreground-muted)', fontSize: config.fontSize }}>\n            {placeholder}\n          </span>\n        )}\n        <div style={iconsStyle}>\n          {clearable && value.length > 0 && !disabled && (\n            <button\n              type=\"button\"\n              aria-label=\"Clear all\"\n              style={clearButtonStyle}\n              onClick={clearAll}\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              <CloseIcon />\n            </button>\n          )}\n          <span style={chevronStyle}>\n            <ChevronDownIcon />\n          </span>\n        </div>\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <ul\n            ref={listRef}\n            role=\"listbox\"\n            aria-label={ariaLabel || 'Options'}\n            aria-multiselectable=\"true\"\n            style={dropdownStyle}\n          >\n            {flatOptions.length > 0 ? (\n              Array.from(filteredOptions.entries()).map(([group, opts]) => (\n                <li key={group || 'ungrouped'} role=\"group\" aria-label={group}>\n                  {group && <div style={groupLabelStyle}>{group}</div>}\n                  <ul role=\"presentation\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n                    {opts.map((option) => {\n                      optionIndex++\n                      const currentIndex = optionIndex\n                      const isSelected = value.includes(option.value)\n                      const isActive = currentIndex === activeIndex\n\n                      return (\n                        <li\n                          key={option.value}\n                          role=\"option\"\n                          aria-selected={isSelected}\n                          style={optionStyle(isActive, isSelected)}\n                          onClick={() => toggleOption(option.value)}\n                          onMouseEnter={() => setActiveIndex(currentIndex)}\n                        >\n                          <span\n                            style={{\n                              display: 'flex',\n                              alignItems: 'center',\n                              justifyContent: 'center',\n                              width: spacing[5],\n                              height: spacing[5],\n                              borderRadius: 'var(--brycks-radius-sm)',\n                              border: isSelected\n                                ? 'none'\n                                : '1px solid var(--brycks-border-default)',\n                              backgroundColor: isSelected\n                                ? 'var(--brycks-primary-default)'\n                                : 'transparent',\n                              color: 'white',\n                              flexShrink: 0,\n                            }}\n                          >\n                            {isSelected && <CheckIcon />}\n                          </span>\n                          {option.icon && <span style={{ flexShrink: 0 }}>{option.icon}</span>}\n                          <div style={{ flex: 1, minWidth: 0 }}>\n                            <div style={{ fontWeight: isSelected ? 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                        </li>\n                      )\n                    })}\n                  </ul>\n                </li>\n              ))\n            ) : (\n              <li style={emptyStyle}>{emptyText}</li>\n            )}\n          </ul>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":["sizeConfig","componentHeights","fontSizes","spacing","componentPaddingX","ChevronDownIcon","jsx","CloseIcon","CheckIcon","MultiSelect","forwardRef","options","controlledValue","defaultValue","onChange","placeholder","size","maxSelections","searchable","disabled","isInvalid","clearable","emptyText","closeOnSelect","ariaLabel","ariaLabelledby","className","testId","ref","internalValue","setInternalValue","useState","isOpen","setIsOpen","searchValue","setSearchValue","activeIndex","setActiveIndex","isFocused","setIsFocused","containerRef","useRef","inputRef","listRef","value","config","selectedOptions","useMemo","opt","filteredOptions","filtered","groups","group","flatOptions","flat","opts","updateValue","useCallback","newValue","toggleOption","optionValue","v","removeOption","e","clearAll","handleKeyDown","prev","useEffect","handleClick","dropdownPosition","setDropdownPosition","updatePosition","rect","containerStyle","wrapperStyle","durations","easings","chipStyle","chipRemoveStyle","inputStyle","iconsStyle","clearButtonStyle","chevronStyle","dropdownStyle","groupLabelStyle","optionStyle","isActive","_isSelected","componentGap","emptyStyle","optionIndex","jsxs","node","cx","createPortal","option","currentIndex","isSelected"],"mappings":";;;;;;;;AA+EA,MAAMA,KAAiI;AAAA,EACrI,IAAI,EAAE,WAAWC,EAAiB,IAAI,UAAUC,EAAU,OAAO,GAAG,YAAYC,EAAQ,CAAC,GAAG,SAASC,EAAkB,IAAI,KAAKD,EAAQ,CAAC,EAAA;AAAA,EACzI,IAAI,EAAE,WAAWF,EAAiB,IAAI,UAAUC,EAAU,MAAM,YAAYC,EAAQ,CAAC,GAAG,SAASC,EAAkB,IAAI,KAAKD,EAAQ,GAAG,EAAA;AAAA,EACvI,IAAI,EAAE,WAAWF,EAAiB,IAAI,UAAUC,EAAU,IAAI,YAAYC,EAAQ,CAAC,GAAG,SAASC,EAAkB,IAAI,KAAKD,EAAQ,CAAC,EAAA;AACrI;AAEA,SAASE,KAAkB;AACzB,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,4BAAC,QAAA,EAAK,GAAE,gBAAe,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,QAAA,CAAQ,EAAA,CAC9G;AAEJ;AAEA,SAASC,IAAY;AACnB,SACE,gBAAAD,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,UAAA,gBAAAA,EAAC,QAAA,EAAK,GAAE,qBAAoB,QAAO,gBAAe,aAAY,OAAM,eAAc,QAAA,CAAQ,EAAA,CAC5F;AAEJ;AAEA,SAASE,KAAY;AACnB,SACE,gBAAAF,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,4BAAC,QAAA,EAAK,GAAE,gBAAe,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,QAAA,CAAQ,EAAA,CAC5G;AAEJ;AAEO,MAAMG,KAAcC,GAA6C,SACtE;AAAA,EACE,SAAAC;AAAA,EACA,OAAOC;AAAA,EACP,cAAAC,IAAe,CAAA;AAAA,EACf,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAO;AAAA,EACP,eAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,WAAAC,KAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC;AAAA,EACA,QAAAC;AACF,GACAC,GACA;AACA,QAAM,CAACC,IAAeC,EAAgB,IAAIC,EAAmBlB,CAAY,GACnE,CAACmB,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3C,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAE,GAC3C,CAACO,GAAWC,CAAY,IAAIR,EAAS,EAAK,GAE1CS,IAAeC,EAAuB,IAAI,GAC1CC,IAAWD,EAAyB,IAAI,GACxCE,IAAUF,EAAyB,IAAI,GAEvCG,IAAQhC,MAAoB,SAAYA,IAAkBiB,IAC1DgB,IAAS7C,GAAWgB,CAAI,GAGxB8B,IAAkBC;AAAA,IACtB,MAAMpC,EAAQ,OAAO,CAACqC,MAAQJ,EAAM,SAASI,EAAI,KAAK,CAAC;AAAA,IACvD,CAACrC,GAASiC,CAAK;AAAA,EAAA,GAIXK,IAAkBF,EAAQ,MAAM;AACpC,QAAIG,IAAWvC,EAAQ;AAAA,MACrB,CAACqC,MACC,CAACA,EAAI,aACJA,EAAI,MAAM,cAAc,SAASd,EAAY,aAAa,KACzDc,EAAI,aAAa,cAAc,SAASd,EAAY,aAAa;AAAA,IAAA;AAIvE,UAAMiB,wBAAa,IAAA;AACnB,WAAAD,EAAS,QAAQ,CAACF,MAAQ;AACxB,YAAMI,IAAQJ,EAAI;AAClB,MAAKG,EAAO,IAAIC,CAAK,KACnBD,EAAO,IAAIC,GAAO,EAAE,GAEtBD,EAAO,IAAIC,CAAK,EAAG,KAAKJ,CAAG;AAAA,IAC7B,CAAC,GAEMG;AAAA,EACT,GAAG,CAACxC,GAASuB,CAAW,CAAC,GAGnBmB,IAAcN,EAAQ,MAAM;AAChC,UAAMO,IAA4B,CAAA;AAClC,WAAAL,EAAgB,QAAQ,CAACM,MAASD,EAAK,KAAK,GAAGC,CAAI,CAAC,GAC7CD;AAAA,EACT,GAAG,CAACL,CAAe,CAAC,GAEdO,IAAcC;AAAA,IAClB,CAACC,MAAuB;AACtB,MAAI9C,MAAoB,UACtBkB,GAAiB4B,CAAQ,GAE3B5C,IAAW4C,CAAQ;AAAA,IACrB;AAAA,IACA,CAAC9C,GAAiBE,CAAQ;AAAA,EAAA,GAGtB6C,IAAeF;AAAA,IACnB,CAACG,MAAwB;AAGvB,UAFmBhB,EAAM,SAASgB,CAAW;AAG3C,QAAAJ,EAAYZ,EAAM,OAAO,CAACiB,MAAMA,MAAMD,CAAW,CAAC;AAAA,WAC7C;AACL,YAAI3C,KAAiB2B,EAAM,UAAU3B,EAAe;AACpD,QAAAuC,EAAY,CAAC,GAAGZ,GAAOgB,CAAW,CAAC;AAAA,MACrC;AAEA,MAAIrC,KACFU,EAAU,EAAK,GAGjBE,EAAe,EAAE,GACjBO,EAAS,SAAS,MAAA;AAAA,IACpB;AAAA,IACA,CAACE,GAAO3B,GAAeM,GAAeiC,CAAW;AAAA,EAAA,GAG7CM,IAAeL;AAAA,IACnB,CAACG,GAAqBG,MAAyB;AAC7C,MAAAA,GAAG,gBAAA,GACHP,EAAYZ,EAAM,OAAO,CAACiB,MAAMA,MAAMD,CAAW,CAAC;AAAA,IACpD;AAAA,IACA,CAAChB,GAAOY,CAAW;AAAA,EAAA,GAGfQ,KAAWP;AAAA,IACf,CAAC,MAAwB;AACvB,QAAE,gBAAA,GACFD,EAAY,CAAA,CAAE,GACdd,EAAS,SAAS,MAAA;AAAA,IACpB;AAAA,IACA,CAACc,CAAW;AAAA,EAAA,GAGRS,KAAgBR;AAAA,IACpB,CAAC,MAAuC;AACtC,cAAQ,EAAE,KAAA;AAAA,QACR,KAAK;AACH,YAAE,eAAA,GACGzB,IAIHK,EAAe,CAAC6B,MAAS,KAAK,IAAIA,IAAO,GAAGb,EAAY,SAAS,CAAC,CAAC,KAHnEpB,EAAU,EAAI,GACdI,EAAe,CAAC;AAIlB;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACEL,KACFK,EAAe,CAAC6B,MAAS,KAAK,IAAIA,IAAO,GAAG,CAAC,CAAC;AAEhD;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACElC,KAAUI,KAAe,KAAKiB,EAAYjB,CAAW,KACvDuB,EAAaN,EAAYjB,CAAW,EAAE,KAAK;AAE7C;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACFH,EAAU,EAAK,GACfI,EAAe,EAAE;AACjB;AAAA,QACF,KAAK;AACH,UAAI,CAACH,KAAeU,EAAM,SAAS,KACjCkB,EAAalB,EAAMA,EAAM,SAAS,CAAC,CAAC;AAEtC;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,CAACZ,GAAQI,GAAaiB,GAAanB,GAAaU,GAAOe,GAAcG,CAAY;AAAA,EAAA;AAInF,EAAAK,EAAU,MAAM;AACd,QAAI,CAACnC,EAAQ;AAEb,UAAMoC,IAAc,CAACL,MAAkB;AACrC,MAAKvB,EAAa,SAAS,SAASuB,EAAE,MAAc,MAClD9B,EAAU,EAAK,GACfI,EAAe,EAAE,GACjBF,EAAe,EAAE;AAAA,IAErB;AAEA,oBAAS,iBAAiB,aAAaiC,CAAW,GAC3C,MAAM,SAAS,oBAAoB,aAAaA,CAAW;AAAA,EACpE,GAAG,CAACpC,CAAM,CAAC,GAGXmC,EAAU,MAAM;AACd,QAAI,CAACnC,KAAUI,IAAc,EAAG;AAIhC,IAHaO,EAAQ,SACD,iBAAiB,iBAAiB,IAC3BP,CAAW,GAC1B,eAAe,EAAE,OAAO,UAAA,CAAW;AAAA,EACjD,GAAG,CAACJ,GAAQI,CAAW,CAAC;AAGxB,QAAM,CAACiC,GAAkBC,EAAmB,IAAIvC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,EAAA,CAAG;AAEtF,EAAAoC,EAAU,MAAM;AACd,QAAI,CAACnC,KAAU,CAACQ,EAAa,QAAS;AAEtC,UAAM+B,IAAiB,MAAM;AAC3B,YAAMC,IAAOhC,EAAa,QAAS,sBAAA;AACnC,MAAA8B,GAAoB;AAAA,QAClB,KAAKE,EAAK,SAAS,OAAO,UAAUrE,EAAQ,CAAC;AAAA,QAC7C,MAAMqE,EAAK,OAAO,OAAO;AAAA,QACzB,OAAOA,EAAK;AAAA,MAAA,CACb;AAAA,IACH;AAEA,WAAAD,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAc,GAChD,OAAO,iBAAiB,UAAUA,GAAgB,EAAI,GAE/C,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAc,GACnD,OAAO,oBAAoB,UAAUA,GAAgB,EAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAACvC,CAAM,CAAC;AAEX,QAAMyC,KAAgC;AAAA,IACpC,UAAU;AAAA,IACV,OAAO;AAAA,EAAA,GAGHC,KAA8B;AAAA,IAClC,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK7B,EAAO;AAAA,IACZ,WAAWA,EAAO;AAAA,IAClB,SAAS,GAAG1C,EAAQ,CAAC,CAAC,MAAM0C,EAAO,OAAO;AAAA,IAC1C,cAAc1C,EAAQ,EAAE;AAAA,IACxB,iBAAiBgB,IAAW,mCAAmC;AAAA,IAC/D,QAAQ,aACNC,IACI,gCACAkB,IACA,kCACA,8BACN;AAAA,IACA,cAAc;AAAA,IACd,YAAY,OAAOqC,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,IACtD,QAAQzD,IAAW,gBAAgB;AAAA,IACnC,WAAWmB,IAAY,6BAA6B;AAAA,EAAA,GAGhDuC,KAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK1E,EAAQ,CAAC;AAAA,IACd,QAAQ0C,EAAO;AAAA,IACf,SAAS,KAAK1C,EAAQ,CAAC,CAAC;AAAA,IACxB,UAAU0C,EAAO,WAAW;AAAA,IAC5B,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,GAGRiC,KAAiC;AAAA,IACrC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO3E,EAAQ,CAAC;AAAA,IAChB,QAAQA,EAAQ,CAAC;AAAA,IACjB,YAAYA,EAAQ,GAAG;AAAA,IACvB,aAAa,CAACA,EAAQ,CAAC;AAAA,IACvB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,cAAc;AAAA,EAAA,GAGV4E,KAA4B;AAAA,IAChC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,QAAQlC,EAAO;AAAA,IACf,SAAS;AAAA,IACT,UAAUA,EAAO;AAAA,IACjB,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA,GAGLmC,KAA4B;AAAA,IAChC,UAAU;AAAA,IACV,OAAOnC,EAAO;AAAA,IACd,KAAK;AAAA,IACL,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK1C,EAAQ,CAAC;AAAA,EAAA,GAGV8E,KAAkC;AAAA,IACtC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO9E,EAAQ,CAAC;AAAA,IAChB,QAAQA,EAAQ,CAAC;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY,OAAOwE,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,EAAA,GAGlDM,KAA8B;AAAA,IAClC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,WAAWlD,IAAS,mBAAmB;AAAA,IACvC,YAAY,aAAa2C,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,IAC5D,eAAe;AAAA,EAAA,GAGXO,KAA+B;AAAA,IACnC,UAAU;AAAA,IACV,KAAKd,EAAiB;AAAA,IACtB,MAAMA,EAAiB;AAAA,IACvB,OAAOA,EAAiB;AAAA,IACxB,WAAW;AAAA,IACX,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAASlE,EAAQ,CAAC;AAAA,EAAA,GAGdiF,KAAiC;AAAA,IACrC,SAAS,GAAGjF,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC;AAAA,IACtD,UAAUD,EAAU;AAAA,IACpB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,eAAe;AAAA,IACf,eAAe;AAAA,EAAA,GAGXmF,KAAc,CAACC,GAAmBC,OAAyC;AAAA,IAC/E,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKC,GAAa;AAAA,IAClB,SAAS,GAAGrF,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC;AAAA,IACtC,UAAU0C,EAAO;AAAA,IACjB,OAAO;AAAA,IACP,iBAAiByC,IAAW,mCAAmC;AAAA,IAC/D,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,YAAY,oBAAoBX,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,EAAA,IAG/Da,KAA4B;AAAA,IAChC,SAAS,GAAGtF,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC;AAAA,IACtC,UAAU0C,EAAO;AAAA,IACjB,OAAO;AAAA,IACP,WAAW;AAAA,EAAA;AAGb,MAAI6C,IAAc;AAElB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,CAACC,MAAS;AACZ,QAAApD,EAA+D,UAAUoD,GACtE,OAAOhE,KAAQ,aAAYA,EAAIgE,CAAI,IAC9BhE,QAAS,UAAUgE;AAAA,MAC9B;AAAA,MACA,WAAWC,GAAG,sBAAsB,uBAAuB7E,CAAI,IAAIU,EAAS;AAAA,MAC5E,OAAO+C;AAAA,MACP,eAAa9C;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAgE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAOjB;AAAA,YACP,SAAS,MAAM;AACb,cAAKvD,MACHc,EAAU,EAAI,GACdS,EAAS,SAAS,MAAA;AAAA,YAEtB;AAAA,YAEC,UAAA;AAAA,cAAAI,EAAgB,IAAI,CAACE,MACpB,gBAAA2C,EAAC,QAAA,EAAqB,OAAOd,IAC1B,UAAA;AAAA,gBAAA7B,EAAI;AAAA,gBACL,gBAAA1C;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAY,UAAU0C,EAAI,KAAK;AAAA,oBAC/B,OAAO8B;AAAA,oBACP,SAAS,CAACf,MAAMD,EAAad,EAAI,OAAOe,CAAC;AAAA,oBACzC,cAAc,CAACA,MAAM;AACnB,sBAAAA,EAAE,cAAc,MAAM,UAAU,KAChCA,EAAE,cAAc,MAAM,kBAAkB;AAAA,oBAC1C;AAAA,oBACA,cAAc,CAACA,MAAM;AACnB,sBAAAA,EAAE,cAAc,MAAM,UAAU,OAChCA,EAAE,cAAc,MAAM,kBAAkB;AAAA,oBAC1C;AAAA,oBAEA,4BAACxD,GAAA,CAAA,CAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACb,KAjBSyC,EAAI,KAkBf,CACD;AAAA,cACA9B,KACC,gBAAAZ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAKoC;AAAA,kBACL,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,cAAYlB;AAAA,kBACZ,mBAAiBC;AAAA,kBACjB,iBAAeO;AAAA,kBACf,iBAAc;AAAA,kBACd,qBAAkB;AAAA,kBAClB,gBAAcZ;AAAA,kBACd,OAAOc;AAAA,kBACP,aAAaY,EAAgB,WAAW,IAAI/B,IAAc;AAAA,kBAC1D,UAAAI;AAAA,kBACA,OAAO4D;AAAA,kBACP,UAAU,CAAC,MAAM;AACf,oBAAA5C,EAAe,EAAE,OAAO,KAAK,GACxBH,KAAQC,EAAU,EAAI,GAC3BI,EAAe,CAAC;AAAA,kBAClB;AAAA,kBACA,WAAW4B;AAAA,kBACX,SAAS,MAAM1B,EAAa,EAAI;AAAA,kBAChC,QAAQ,MAAMA,EAAa,EAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGnC,CAACrB,KAAc4B,EAAgB,WAAW,KACzC,gBAAAxC,EAAC,QAAA,EAAK,OAAO,EAAE,OAAO,kCAAkC,UAAUuC,EAAO,SAAA,GACtE,UAAA9B,GACH;AAAA,cAEF,gBAAA4E,EAAC,OAAA,EAAI,OAAOX,IACT,UAAA;AAAA,gBAAA3D,KAAauB,EAAM,SAAS,KAAK,CAACzB,KACjC,gBAAAb;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAW;AAAA,oBACX,OAAO2E;AAAA,oBACP,SAASjB;AAAA,oBACT,cAAc,CAAC,MAAM;AACnB,wBAAE,cAAc,MAAM,kBAAkB,kCACxC,EAAE,cAAc,MAAM,QAAQ;AAAA,oBAChC;AAAA,oBACA,cAAc,CAAC,MAAM;AACnB,wBAAE,cAAc,MAAM,kBAAkB,eACxC,EAAE,cAAc,MAAM,QAAQ;AAAA,oBAChC;AAAA,oBAEA,4BAACzD,GAAA,CAAA,CAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,kCAGd,QAAA,EAAK,OAAO2E,IACX,UAAA,gBAAA5E,EAACD,MAAgB,EAAA,CACnB;AAAA,cAAA,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD2B,KACC8D;AAAA,UACE,gBAAAxF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKqC;AAAA,cACL,MAAK;AAAA,cACL,cAAYnB,KAAa;AAAA,cACzB,wBAAqB;AAAA,cACrB,OAAO2D;AAAA,cAEN,UAAA9B,EAAY,SAAS,IACpB,MAAM,KAAKJ,EAAgB,QAAA,CAAS,EAAE,IAAI,CAAC,CAACG,GAAOG,CAAI,MACrD,gBAAAoC,EAAC,QAA8B,MAAK,SAAQ,cAAYvC,GACrD,UAAA;AAAA,gBAAAA,KAAS,gBAAA9C,EAAC,OAAA,EAAI,OAAO8E,IAAkB,UAAAhC,GAAM;AAAA,kCAC7C,MAAA,EAAG,MAAK,gBAAe,OAAO,EAAE,WAAW,QAAQ,QAAQ,GAAG,SAAS,EAAA,GACrE,UAAAG,EAAK,IAAI,CAACwC,MAAW;AACpB,kBAAAL;AACA,wBAAMM,IAAeN,GACfO,IAAarD,EAAM,SAASmD,EAAO,KAAK;AAG9C,yBACE,gBAAAJ;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,MAAK;AAAA,sBACL,iBAAeM;AAAA,sBACf,OAAOZ,GAPMW,MAAiB5D,CAOS;AAAA,sBACvC,SAAS,MAAMuB,EAAaoC,EAAO,KAAK;AAAA,sBACxC,cAAc,MAAM1D,EAAe2D,CAAY;AAAA,sBAE/C,UAAA;AAAA,wBAAA,gBAAA1F;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,OAAO;AAAA,8BACL,SAAS;AAAA,8BACT,YAAY;AAAA,8BACZ,gBAAgB;AAAA,8BAChB,OAAOH,EAAQ,CAAC;AAAA,8BAChB,QAAQA,EAAQ,CAAC;AAAA,8BACjB,cAAc;AAAA,8BACd,QAAQ8F,IACJ,SACA;AAAA,8BACJ,iBAAiBA,IACb,kCACA;AAAA,8BACJ,OAAO;AAAA,8BACP,YAAY;AAAA,4BAAA;AAAA,4BAGb,UAAAA,uBAAezF,IAAA,CAAA,CAAU;AAAA,0BAAA;AAAA,wBAAA;AAAA,wBAE3BuF,EAAO,QAAQ,gBAAAzF,EAAC,QAAA,EAAK,OAAO,EAAE,YAAY,EAAA,GAAM,UAAAyF,EAAO,KAAA,CAAK;AAAA,wBAC7D,gBAAAJ,EAAC,SAAI,OAAO,EAAE,MAAM,GAAG,UAAU,KAC/B,UAAA;AAAA,0BAAA,gBAAArF,EAAC,OAAA,EAAI,OAAO,EAAE,YAAY2F,IAAa,MAAM,IAAA,GAAQ,UAAAF,EAAO,MAAA,CAAM;AAAA,0BACjEA,EAAO,eACN,gBAAAzF,EAAC,OAAA,EAAI,OAAO,EAAE,UAAUJ,EAAU,IAAI,OAAO,iCAAA,GAC1C,YAAO,YAAA,CACV;AAAA,wBAAA,EAAA,CAEJ;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAnCK6F,EAAO;AAAA,kBAAA;AAAA,gBAsClB,CAAC,EAAA,CACH;AAAA,cAAA,EAAA,GAlDO3C,KAAS,WAmDlB,CACD,sBAEA,MAAA,EAAG,OAAOqC,IAAa,UAAAnE,GAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAGtC,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA;AAAA,EAAA;AAGR,CAAC;AAEDb,GAAY,cAAc;"}
+{"version":3,"file":"MultiSelect.js","sources":["../../../../src/components/form/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/**\n * MultiSelect Component\n *\n * A dropdown component for selecting multiple options.\n * Displays selected items as chips with removal capability.\n *\n * @module components/form/MultiSelect\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} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX, componentGap } from '../../../design-system/primitives'\n\nexport type MultiSelectSize = 'sm' | 'md' | 'lg'\n\nexport interface MultiSelectOption {\n  /** Unique identifier */\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  /** Optional group */\n  group?: string\n}\n\nexport interface MultiSelectProps {\n  /** Available options */\n  options: MultiSelectOption[]\n  /** Selected values (controlled) */\n  value?: string[]\n  /** Default selected values (uncontrolled) */\n  defaultValue?: string[]\n  /** Callback when selection changes */\n  onChange?: (values: string[]) => void\n  /** Placeholder text */\n  placeholder?: string\n  /** Component size */\n  size?: MultiSelectSize\n  /** Maximum selections allowed */\n  maxSelections?: number\n  /** Whether the select is searchable */\n  searchable?: boolean\n  /** Whether the select is disabled */\n  disabled?: boolean\n  /** Whether the select is invalid */\n  isInvalid?: boolean\n  /** Whether to allow clearing all */\n  clearable?: boolean\n  /** Text when no options match search */\n  emptyText?: string\n  /** Whether to close on select */\n  closeOnSelect?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** ID of element that labels this select */\n  'aria-labelledby'?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<MultiSelectSize, { minHeight: number; fontSize: number; chipHeight: number; padding: number; gap: number }> = {\n  sm: { minHeight: componentHeights.sm, fontSize: fontSizes.base - 1, chipHeight: spacing[5], padding: componentPaddingX.xs, gap: spacing[1] },\n  md: { minHeight: componentHeights.md, fontSize: fontSizes.base, chipHeight: spacing[6], padding: componentPaddingX.sm, gap: spacing[1.5] },\n  lg: { minHeight: componentHeights.lg, fontSize: fontSizes.md, chipHeight: spacing[7], padding: componentPaddingX.sm, gap: spacing[2] },\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 CloseIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3 8l3 3 7-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nexport const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(\n  {\n    options,\n    value: controlledValue,\n    defaultValue = [],\n    onChange,\n    placeholder = 'Select options...',\n    size = 'md',\n    maxSelections,\n    searchable = true,\n    disabled = false,\n    isInvalid = false,\n    clearable = true,\n    emptyText = 'No options found',\n    closeOnSelect = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState<string[]>(defaultValue)\n  const [isOpen, setIsOpen] = useState(false)\n  const [searchValue, setSearchValue] = useState('')\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 options\n  const selectedOptions = useMemo(\n    () => options.filter((opt) => value.includes(opt.value)),\n    [options, value]\n  )\n\n  // Filter and group options\n  const filteredOptions = useMemo(() => {\n    const filtered = options.filter(\n      (opt) =>\n        !opt.disabled &&\n        (opt.label.toLowerCase().includes(searchValue.toLowerCase()) ||\n          opt.description?.toLowerCase().includes(searchValue.toLowerCase()))\n    )\n\n    // Group by group property\n    const groups = new Map<string | undefined, MultiSelectOption[]>()\n    filtered.forEach((opt) => {\n      const group = opt.group\n      if (!groups.has(group)) {\n        groups.set(group, [])\n      }\n      groups.get(group)!.push(opt)\n    })\n\n    return groups\n  }, [options, searchValue])\n\n  // Flatten for keyboard navigation\n  const flatOptions = useMemo(() => {\n    const flat: MultiSelectOption[] = []\n    filteredOptions.forEach((opts) => flat.push(...opts))\n    return flat\n  }, [filteredOptions])\n\n  const updateValue = useCallback(\n    (newValue: string[]) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  const toggleOption = useCallback(\n    (optionValue: string) => {\n      const isSelected = value.includes(optionValue)\n\n      if (isSelected) {\n        updateValue(value.filter((v) => v !== optionValue))\n      } else {\n        if (maxSelections && value.length >= maxSelections) return\n        updateValue([...value, optionValue])\n      }\n\n      if (closeOnSelect) {\n        setIsOpen(false)\n      }\n\n      setSearchValue('')\n      inputRef.current?.focus()\n    },\n    [value, maxSelections, closeOnSelect, updateValue]\n  )\n\n  const removeOption = useCallback(\n    (optionValue: string, e?: React.MouseEvent) => {\n      e?.stopPropagation()\n      updateValue(value.filter((v) => v !== optionValue))\n    },\n    [value, updateValue]\n  )\n\n  const clearAll = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      updateValue([])\n      inputRef.current?.focus()\n    },\n    [updateValue]\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, flatOptions.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 && flatOptions[activeIndex]) {\n            toggleOption(flatOptions[activeIndex].value)\n          }\n          break\n        case 'Escape':\n          e.preventDefault()\n          setIsOpen(false)\n          setActiveIndex(-1)\n          break\n        case 'Backspace':\n          if (!searchValue && value.length > 0) {\n            removeOption(value[value.length - 1])\n          }\n          break\n      }\n    },\n    [isOpen, activeIndex, flatOptions, searchValue, value, toggleOption, removeOption]\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        setSearchValue('')\n      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  // Scroll active option into view\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    const list = listRef.current\n    const items = list?.querySelectorAll('[role=\"option\"]')\n    const activeItem = items?.[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    width: '100%',\n  }\n\n  const wrapperStyle: CSSProperties = {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: config.gap,\n    minHeight: config.minHeight,\n    padding: `${spacing[1]}px ${config.padding}px`,\n    paddingRight: spacing[10],\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' : 'pointer',\n    boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n  }\n\n  const chipStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: spacing[1],\n    height: config.chipHeight,\n    padding: `0 ${spacing[2]}px`,\n    fontSize: config.fontSize - 1,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n    backgroundColor: 'var(--brycks-background-muted)',\n    borderRadius: 'var(--brycks-radius-full)',\n    whiteSpace: 'nowrap',\n  }\n\n  const chipRemoveStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: spacing[4],\n    height: spacing[4],\n    marginLeft: spacing[0.5],\n    marginRight: -spacing[1],\n    color: 'inherit',\n    opacity: 0.7,\n    cursor: 'pointer',\n    borderRadius: 'var(--brycks-radius-full)',\n  }\n\n  const inputStyle: CSSProperties = {\n    flex: 1,\n    minWidth: 60,\n    height: config.chipHeight,\n    padding: 0,\n    fontSize: config.fontSize,\n    color: 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    outline: 'none',\n  }\n\n  const iconsStyle: CSSProperties = {\n    position: 'absolute',\n    right: config.padding,\n    top: '50%',\n    transform: 'translateY(-50%)',\n    display: 'flex',\n    alignItems: 'center',\n    gap: spacing[1],\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  }\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    pointerEvents: 'none',\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  }\n\n  const groupLabelStyle: CSSProperties = {\n    padding: `${spacing[2]}px ${spacing[3]}px ${spacing[1]}px`,\n    fontSize: fontSizes.xs,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n  }\n\n  const optionStyle = (isActive: boolean, _isSelected: boolean): CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: componentGap.md,\n    padding: `${spacing[2]}px ${spacing[3]}px`,\n    fontSize: config.fontSize,\n    color: 'var(--brycks-foreground-default)',\n    backgroundColor: isActive ? 'var(--brycks-background-muted)' : 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: '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  let optionIndex = -1\n\n  return (\n    <div\n      ref={(node) => {\n        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      }}\n      className={cx('brycks-multiselect', `brycks-multiselect--${size}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div\n        style={wrapperStyle}\n        onClick={() => {\n          if (!disabled) {\n            setIsOpen(true)\n            inputRef.current?.focus()\n          }\n        }}\n      >\n        {selectedOptions.map((opt) => (\n          <span key={opt.value} style={chipStyle}>\n            {opt.label}\n            <button\n              type=\"button\"\n              aria-label={`Remove ${opt.label}`}\n              style={chipRemoveStyle}\n              onClick={(e) => removeOption(opt.value, e)}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.opacity = '1'\n                e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.1)'\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.opacity = '0.7'\n                e.currentTarget.style.backgroundColor = 'transparent'\n              }}\n            >\n              <CloseIcon />\n            </button>\n          </span>\n        ))}\n        {searchable && (\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-expanded={isOpen}\n            aria-haspopup=\"listbox\"\n            aria-autocomplete=\"list\"\n            aria-invalid={isInvalid}\n            value={searchValue}\n            placeholder={selectedOptions.length === 0 ? placeholder : ''}\n            disabled={disabled}\n            style={inputStyle}\n            onChange={(e) => {\n              setSearchValue(e.target.value)\n              if (!isOpen) setIsOpen(true)\n              setActiveIndex(0)\n            }}\n            onKeyDown={handleKeyDown}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n          />\n        )}\n        {!searchable && selectedOptions.length === 0 && (\n          <span style={{ color: 'var(--brycks-foreground-muted)', fontSize: config.fontSize }}>\n            {placeholder}\n          </span>\n        )}\n        <div style={iconsStyle}>\n          {clearable && value.length > 0 && !disabled && (\n            <button\n              type=\"button\"\n              aria-label=\"Clear all\"\n              style={clearButtonStyle}\n              onClick={clearAll}\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              <CloseIcon />\n            </button>\n          )}\n          <span style={chevronStyle}>\n            <ChevronDownIcon />\n          </span>\n        </div>\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <ul\n            ref={listRef}\n            role=\"listbox\"\n            aria-label={ariaLabel || 'Options'}\n            aria-multiselectable=\"true\"\n            style={dropdownStyle}\n          >\n            {flatOptions.length > 0 ? (\n              Array.from(filteredOptions.entries()).map(([group, opts]) => (\n                <li key={group || 'ungrouped'} role=\"group\" aria-label={group}>\n                  {group && <div style={groupLabelStyle}>{group}</div>}\n                  <ul role=\"presentation\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n                    {opts.map((option) => {\n                      optionIndex++\n                      const currentIndex = optionIndex\n                      const isSelected = value.includes(option.value)\n                      const isActive = currentIndex === activeIndex\n\n                      return (\n                        <li\n                          key={option.value}\n                          role=\"option\"\n                          aria-selected={isSelected}\n                          style={optionStyle(isActive, isSelected)}\n                          onClick={() => toggleOption(option.value)}\n                          onMouseEnter={() => setActiveIndex(currentIndex)}\n                        >\n                          <span\n                            style={{\n                              display: 'flex',\n                              alignItems: 'center',\n                              justifyContent: 'center',\n                              width: spacing[5],\n                              height: spacing[5],\n                              borderRadius: 'var(--brycks-radius-sm)',\n                              border: isSelected\n                                ? 'none'\n                                : '1px solid var(--brycks-border-default)',\n                              backgroundColor: isSelected\n                                ? 'var(--brycks-primary-default)'\n                                : 'transparent',\n                              color: 'white',\n                              flexShrink: 0,\n                            }}\n                          >\n                            {isSelected && <CheckIcon />}\n                          </span>\n                          {option.icon && <span style={{ flexShrink: 0 }}>{option.icon}</span>}\n                          <div style={{ flex: 1, minWidth: 0 }}>\n                            <div style={{ fontWeight: isSelected ? 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                        </li>\n                      )\n                    })}\n                  </ul>\n                </li>\n              ))\n            ) : (\n              <li style={emptyStyle}>{emptyText}</li>\n            )}\n          </ul>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":["sizeConfig","componentHeights","fontSizes","spacing","componentPaddingX","ChevronDownIcon","jsx","CloseIcon","CheckIcon","MultiSelect","forwardRef","options","controlledValue","defaultValue","onChange","placeholder","size","maxSelections","searchable","disabled","isInvalid","clearable","emptyText","closeOnSelect","ariaLabel","ariaLabelledby","className","testId","ref","internalValue","setInternalValue","useState","isOpen","setIsOpen","searchValue","setSearchValue","activeIndex","setActiveIndex","isFocused","setIsFocused","containerRef","useRef","inputRef","listRef","value","config","selectedOptions","useMemo","opt","filteredOptions","filtered","groups","group","flatOptions","flat","opts","updateValue","useCallback","newValue","toggleOption","optionValue","v","removeOption","e","clearAll","handleKeyDown","prev","useEffect","handleClick","dropdownPosition","setDropdownPosition","updatePosition","rect","containerStyle","wrapperStyle","durations","easings","chipStyle","chipRemoveStyle","inputStyle","iconsStyle","clearButtonStyle","chevronStyle","dropdownStyle","groupLabelStyle","optionStyle","isActive","_isSelected","componentGap","emptyStyle","optionIndex","jsxs","node","cx","createPortal","option","currentIndex","isSelected"],"mappings":"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"}

package/dist/components/form/Radio/Radio.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),k=require("../../../utils/styles.cjs"),N={sm:{radio:16,dot:6,fontSize:13,gap:8},md:{radio:20,dot:8,fontSize:14,gap:10},lg:{radio:24,dot:10,fontSize:16,gap:12}},j=y.forwardRef(function({size:a="md",label:n,description:i,isInvalid:f=!1,disabled:t=!1,className:d,style:g,testId:l,checked:s,...m},b){const[x,c]=y.useState(!1),[v,u]=y.useState(!1),o=N[a],e={display:"inline-flex",alignItems:"flex-start",gap:o.gap,cursor:t?"not-allowed":"pointer",opacity:t?.5:1,...g},S={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:o.radio,height:o.radio,flexShrink:0},p={width:o.radio,height:o.radio,borderRadius:"50%",border:`2px solid ${f?"var(--brycks-error-default)":s?"var(--brycks-primary-default)":x?"var(--brycks-border-strong)":"var(--brycks-border-default)"}`,backgroundColor:s?"var(--brycks-primary-default)":"var(--brycks-background-input)",transition:"all 150ms ease-out",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:v?"0 0 0 3px var(--brycks-primary-100)":void 0},w={width:o.dot,height:o.dot,borderRadius:"50%",backgroundColor:"white",transform:s?"scale(1)":"scale(0)",transition:"transform 150ms ease-out"},C={position:"absolute",width:o.radio,height:o.radio,opacity:0,margin:0,cursor:t?"not-allowed":"pointer"},z={display:"flex",flexDirection:"column",gap:2},I={fontSize:o.fontSize,fontWeight:500,color:t?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},H={fontSize:o.fontSize-1,color:"var(--brycks-foreground-muted)",lineHeight:1.4};return r.jsxs("label",{className:k.cx("brycks-radio",`brycks-radio--${a}`,d),style:e,onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),children:[r.jsxs("span",{style:S,children:[r.jsx("span",{style:p,children:r.jsx("span",{style:w})}),r.jsx("input",{ref:b,type:"radio",disabled:t,checked:s,style:C,onFocus:()=>u(!0),onBlur:()=>u(!1),"data-testid":l,...m})]}),(n||i)&&r.jsxs("span",{style:z,children:[n&&r.jsx("span",{style:I,children:n}),i&&r.jsx("span",{style:H,children:i})]})]})});j.displayName="Radio";function R({name:h,value:a,defaultValue:n,onChange:i,disabled:f=!1,size:t="md",orientation:d="vertical",gap:g=12,children:l,className:s,style:m}){const[b,x]=y.useState(n??""),c=a??b,v=e=>{a===void 0&&x(e),i?.(e)},u={display:"flex",flexDirection:d==="vertical"?"column":"row",flexWrap:d==="horizontal"?"wrap":void 0,gap:g,...m},o=Array.isArray(l)?l.map((e,S)=>{if(e&&typeof e=="object"&&"props"in e){const p=e.props.value;return{...e,key:e.key??S,props:{...e.props,name:h,size:t,disabled:f||e.props.disabled,checked:p===c,onChange:()=>v(p)}}}return e}):l;return r.jsx("div",{role:"radiogroup",className:k.cx("brycks-radio-group",s),style:u,children:o})}R.displayName="RadioGroup";exports.Radio=j;exports.RadioGroup=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("react"),k=require("../../../utils/styles.cjs"),N={sm:{radio:16,dot:6,fontSize:13,gap:8},md:{radio:20,dot:8,fontSize:14,gap:10},lg:{radio:24,dot:10,fontSize:16,gap:12}},j=p.forwardRef(function({size:a="md",label:n,description:i,isInvalid:f=!1,disabled:t=!1,className:d,style:g,testId:l,checked:s,...b},m){const[v,c]=p.useState(!1),[x,u]=p.useState(!1),o=N[a],e={display:"inline-flex",alignItems:"flex-start",gap:o.gap,cursor:t?"not-allowed":"pointer",opacity:t?.5:1,...g},S={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:o.radio,height:o.radio,flexShrink:0},y={width:o.radio,height:o.radio,borderRadius:"50%",border:`2px solid ${f?"var(--brycks-error-default)":s?"var(--brycks-primary-default)":v?"var(--brycks-border-strong)":"var(--brycks-border-default)"}`,backgroundColor:s?"var(--brycks-primary-default)":"var(--brycks-background-elevated)",transition:"all 150ms ease-out",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:x?"var(--brycks-focus-ring)":void 0},C={width:o.dot,height:o.dot,borderRadius:"50%",backgroundColor:"var(--brycks-primary-foreground)",transform:s?"scale(1)":"scale(0)",transition:"transform 150ms ease-out"},w={position:"absolute",width:o.radio,height:o.radio,opacity:0,margin:0,cursor:t?"not-allowed":"pointer"},z={display:"flex",flexDirection:"column",gap:2},I={fontSize:o.fontSize,fontWeight:500,color:t?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},H={fontSize:o.fontSize-1,color:"var(--brycks-foreground-muted)",lineHeight:1.4};return r.jsxs("label",{className:k.cx("brycks-radio",`brycks-radio--${a}`,d),style:e,onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),children:[r.jsxs("span",{style:S,children:[r.jsx("span",{style:y,children:r.jsx("span",{style:C})}),r.jsx("input",{ref:m,type:"radio",disabled:t,checked:s,style:w,onFocus:()=>u(!0),onBlur:()=>u(!1),"data-testid":l,...b})]}),(n||i)&&r.jsxs("span",{style:z,children:[n&&r.jsx("span",{style:I,children:n}),i&&r.jsx("span",{style:H,children:i})]})]})});j.displayName="Radio";function R({name:h,value:a,defaultValue:n,onChange:i,disabled:f=!1,size:t="md",orientation:d="vertical",gap:g=12,children:l,className:s,style:b}){const[m,v]=p.useState(n??""),c=a??m,x=e=>{a===void 0&&v(e),i?.(e)},u={display:"flex",flexDirection:d==="vertical"?"column":"row",flexWrap:d==="horizontal"?"wrap":void 0,gap:g,...b},o=Array.isArray(l)?l.map((e,S)=>{if(e&&typeof e=="object"&&"props"in e){const y=e.props.value;return{...e,key:e.key??S,props:{...e.props,name:h,size:t,disabled:f||e.props.disabled,checked:y===c,onChange:()=>x(y)}}}return e}):l;return r.jsx("div",{role:"radiogroup",className:k.cx("brycks-radio-group",s),style:u,children:o})}R.displayName="RadioGroup";exports.Radio=j;exports.RadioGroup=R;
 //# sourceMappingURL=Radio.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../../src/components/form/Radio/Radio.tsx"],"sourcesContent":["/**\n * Radio Component\n *\n * Accessible radio button with custom styling.\n * Supports different sizes and states.\n */\n\nimport {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type RadioSize = 'sm' | 'md' | 'lg'\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  /** Radio size */\n  size?: RadioSize\n  /** Radio label */\n  label?: ReactNode\n  /** Description below the label */\n  description?: ReactNode\n  /** Whether the radio is invalid */\n  isInvalid?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<RadioSize, { radio: number; dot: number; fontSize: number; gap: number }> = {\n  sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },\n  md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },\n  lg: { radio: 24, dot: 10, fontSize: 16, gap: 12 },\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    size = 'md',\n    label,\n    description,\n    isInvalid = false,\n    disabled = false,\n    className,\n    style,\n    testId,\n    checked,\n    ...props\n  },\n  ref\n) {\n  const [isHovered, setIsHovered] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const config = sizeConfig[size]\n\n  const containerStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'flex-start',\n    gap: config.gap,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const radioContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: config.radio,\n    height: config.radio,\n    flexShrink: 0,\n  }\n\n  const radioStyle: CSSProperties = {\n    width: config.radio,\n    height: config.radio,\n    borderRadius: '50%',\n    border: `2px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : checked\n        ? 'var(--brycks-primary-default)'\n        : isHovered\n        ? 'var(--brycks-border-strong)'\n        : 'var(--brycks-border-default)'\n    }`,\n    backgroundColor: checked\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-background-input)',\n    transition: 'all 150ms ease-out',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    boxShadow: isFocused\n      ? '0 0 0 3px var(--brycks-primary-100)'\n      : undefined,\n  }\n\n  const dotStyle: CSSProperties = {\n    width: config.dot,\n    height: config.dot,\n    borderRadius: '50%',\n    backgroundColor: 'white',\n    transform: checked ? 'scale(1)' : 'scale(0)',\n    transition: 'transform 150ms ease-out',\n  }\n\n  const inputStyle: CSSProperties = {\n    position: 'absolute',\n    width: config.radio,\n    height: config.radio,\n    opacity: 0,\n    margin: 0,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: config.fontSize - 1,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  return (\n    <label\n      className={cx('brycks-radio', `brycks-radio--${size}`, className)}\n      style={containerStyle}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <span style={radioContainerStyle}>\n        <span style={radioStyle}>\n          <span style={dotStyle} />\n        </span>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          checked={checked}\n          style={inputStyle}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </span>\n      {(label || description) && (\n        <span style={labelContainerStyle}>\n          {label && <span style={labelStyle}>{label}</span>}\n          {description && <span style={descriptionStyle}>{description}</span>}\n        </span>\n      )}\n    </label>\n  )\n})\n\nRadio.displayName = 'Radio'\n\n// RadioGroup component for grouping radios\nexport interface RadioGroupProps {\n  /** Radio group name */\n  name: string\n  /** Current value */\n  value?: string\n  /** Default value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when value changes */\n  onChange?: (value: string) => void\n  /** Whether the group is disabled */\n  disabled?: boolean\n  /** Radio size */\n  size?: RadioSize\n  /** Orientation */\n  orientation?: 'horizontal' | 'vertical'\n  /** Gap between items */\n  gap?: number\n  /** Children (Radio components) */\n  children: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Custom styles */\n  style?: CSSProperties\n}\n\nexport function RadioGroup({\n  name,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  disabled = false,\n  size = 'md',\n  orientation = 'vertical',\n  gap = 12,\n  children,\n  className,\n  style,\n}: RadioGroupProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '')\n  const value = controlledValue ?? internalValue\n\n  const handleChange = (newValue: string) => {\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n    onChange?.(newValue)\n  }\n\n  const groupStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    flexWrap: orientation === 'horizontal' ? 'wrap' : undefined,\n    gap,\n    ...style,\n  }\n\n  // Clone children and inject props\n  const clonedChildren = Array.isArray(children)\n    ? children.map((child, index) => {\n        if (child && typeof child === 'object' && 'props' in child) {\n          const childValue = child.props.value\n          return {\n            ...child,\n            key: child.key ?? index,\n            props: {\n              ...child.props,\n              name,\n              size,\n              disabled: disabled || child.props.disabled,\n              checked: childValue === value,\n              onChange: () => handleChange(childValue),\n            },\n          }\n        }\n        return child\n      })\n    : children\n\n  return (\n    <div\n      role=\"radiogroup\"\n      className={cx('brycks-radio-group', className)}\n      style={groupStyle}\n    >\n      {clonedChildren}\n    </div>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"],"names":["sizeConfig","Radio","forwardRef","size","label","description","isInvalid","disabled","className","style","testId","checked","props","ref","isHovered","setIsHovered","useState","isFocused","setIsFocused","config","containerStyle","radioContainerStyle","radioStyle","dotStyle","inputStyle","labelContainerStyle","labelStyle","descriptionStyle","jsxs","cx","jsx","RadioGroup","name","controlledValue","defaultValue","onChange","orientation","gap","children","internalValue","setInternalValue","value","handleChange","newValue","groupStyle","clonedChildren","child","index","childValue"],"mappings":"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"}
+{"version":3,"file":"Radio.cjs","sources":["../../../../src/components/form/Radio/Radio.tsx"],"sourcesContent":["/**\n * Radio Component\n *\n * Accessible radio button with custom styling.\n * Supports different sizes and states.\n */\n\nimport {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type RadioSize = 'sm' | 'md' | 'lg'\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  /** Radio size */\n  size?: RadioSize\n  /** Radio label */\n  label?: ReactNode\n  /** Description below the label */\n  description?: ReactNode\n  /** Whether the radio is invalid */\n  isInvalid?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<RadioSize, { radio: number; dot: number; fontSize: number; gap: number }> = {\n  sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },\n  md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },\n  lg: { radio: 24, dot: 10, fontSize: 16, gap: 12 },\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    size = 'md',\n    label,\n    description,\n    isInvalid = false,\n    disabled = false,\n    className,\n    style,\n    testId,\n    checked,\n    ...props\n  },\n  ref\n) {\n  const [isHovered, setIsHovered] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const config = sizeConfig[size]\n\n  const containerStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'flex-start',\n    gap: config.gap,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const radioContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: config.radio,\n    height: config.radio,\n    flexShrink: 0,\n  }\n\n  const radioStyle: CSSProperties = {\n    width: config.radio,\n    height: config.radio,\n    borderRadius: '50%',\n    border: `2px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : checked\n        ? 'var(--brycks-primary-default)'\n        : isHovered\n        ? 'var(--brycks-border-strong)'\n        : 'var(--brycks-border-default)'\n    }`,\n    backgroundColor: checked\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-background-elevated)',\n    transition: 'all 150ms ease-out',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    boxShadow: isFocused\n      ? 'var(--brycks-focus-ring)'\n      : undefined,\n  }\n\n  const dotStyle: CSSProperties = {\n    width: config.dot,\n    height: config.dot,\n    borderRadius: '50%',\n    backgroundColor: 'var(--brycks-primary-foreground)',\n    transform: checked ? 'scale(1)' : 'scale(0)',\n    transition: 'transform 150ms ease-out',\n  }\n\n  const inputStyle: CSSProperties = {\n    position: 'absolute',\n    width: config.radio,\n    height: config.radio,\n    opacity: 0,\n    margin: 0,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: config.fontSize - 1,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  return (\n    <label\n      className={cx('brycks-radio', `brycks-radio--${size}`, className)}\n      style={containerStyle}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <span style={radioContainerStyle}>\n        <span style={radioStyle}>\n          <span style={dotStyle} />\n        </span>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          checked={checked}\n          style={inputStyle}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </span>\n      {(label || description) && (\n        <span style={labelContainerStyle}>\n          {label && <span style={labelStyle}>{label}</span>}\n          {description && <span style={descriptionStyle}>{description}</span>}\n        </span>\n      )}\n    </label>\n  )\n})\n\nRadio.displayName = 'Radio'\n\n// RadioGroup component for grouping radios\nexport interface RadioGroupProps {\n  /** Radio group name */\n  name: string\n  /** Current value */\n  value?: string\n  /** Default value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when value changes */\n  onChange?: (value: string) => void\n  /** Whether the group is disabled */\n  disabled?: boolean\n  /** Radio size */\n  size?: RadioSize\n  /** Orientation */\n  orientation?: 'horizontal' | 'vertical'\n  /** Gap between items */\n  gap?: number\n  /** Children (Radio components) */\n  children: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Custom styles */\n  style?: CSSProperties\n}\n\nexport function RadioGroup({\n  name,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  disabled = false,\n  size = 'md',\n  orientation = 'vertical',\n  gap = 12,\n  children,\n  className,\n  style,\n}: RadioGroupProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '')\n  const value = controlledValue ?? internalValue\n\n  const handleChange = (newValue: string) => {\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n    onChange?.(newValue)\n  }\n\n  const groupStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    flexWrap: orientation === 'horizontal' ? 'wrap' : undefined,\n    gap,\n    ...style,\n  }\n\n  // Clone children and inject props\n  const clonedChildren = Array.isArray(children)\n    ? children.map((child, index) => {\n        if (child && typeof child === 'object' && 'props' in child) {\n          const childValue = child.props.value\n          return {\n            ...child,\n            key: child.key ?? index,\n            props: {\n              ...child.props,\n              name,\n              size,\n              disabled: disabled || child.props.disabled,\n              checked: childValue === value,\n              onChange: () => handleChange(childValue),\n            },\n          }\n        }\n        return child\n      })\n    : children\n\n  return (\n    <div\n      role=\"radiogroup\"\n      className={cx('brycks-radio-group', className)}\n      style={groupStyle}\n    >\n      {clonedChildren}\n    </div>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"],"names":["sizeConfig","Radio","forwardRef","size","label","description","isInvalid","disabled","className","style","testId","checked","props","ref","isHovered","setIsHovered","useState","isFocused","setIsFocused","config","containerStyle","radioContainerStyle","radioStyle","dotStyle","inputStyle","labelContainerStyle","labelStyle","descriptionStyle","jsxs","cx","jsx","RadioGroup","name","controlledValue","defaultValue","onChange","orientation","gap","children","internalValue","setInternalValue","value","handleChange","newValue","groupStyle","clonedChildren","child","index","childValue"],"mappings":"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"}

package/dist/components/form/Radio/Radio.js

@@ -1,6 +1,6 @@
-import { jsxs as S, jsx as a } from "react/jsx-runtime";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
 import { forwardRef as H, useState as k } from "react";
-import { cx as w } from "../../../utils/styles.js";
+import { cx as C } from "../../../utils/styles.js";
 const N = {
   sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },
   md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },
@@ -17,14 +17,14 @@ const N = {
   checked: t,
   ...g
 }, m) {
-  const [b, c] = k(!1), [v, p] = k(!1), r = N[s], o = {
+  const [v, c] = k(!1), [b, p] = k(!1), r = N[s], o = {
     display: "inline-flex",
     alignItems: "flex-start",
     gap: r.gap,
     cursor: e ? "not-allowed" : "pointer",
     opacity: e ? 0.5 : 1,
     ...f
-  }, h = {
+  }, S = {
     position: "relative",
     display: "flex",
     alignItems: "center",
@@ -36,18 +36,18 @@ const N = {
     width: r.radio,
     height: r.radio,
     borderRadius: "50%",
-    border: `2px solid ${y ? "var(--brycks-error-default)" : t ? "var(--brycks-primary-default)" : b ? "var(--brycks-border-strong)" : "var(--brycks-border-default)"}`,
-    backgroundColor: t ? "var(--brycks-primary-default)" : "var(--brycks-background-input)",
+    border: `2px solid ${y ? "var(--brycks-error-default)" : t ? "var(--brycks-primary-default)" : v ? "var(--brycks-border-strong)" : "var(--brycks-border-default)"}`,
+    backgroundColor: t ? "var(--brycks-primary-default)" : "var(--brycks-background-elevated)",
     transition: "all 150ms ease-out",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    boxShadow: v ? "0 0 0 3px var(--brycks-primary-100)" : void 0
-  }, C = {
+    boxShadow: b ? "var(--brycks-focus-ring)" : void 0
+  }, w = {
     width: r.dot,
     height: r.dot,
     borderRadius: "50%",
-    backgroundColor: "white",
+    backgroundColor: "var(--brycks-primary-foreground)",
     transform: t ? "scale(1)" : "scale(0)",
     transition: "transform 150ms ease-out"
   }, z = {
@@ -71,16 +71,16 @@ const N = {
     color: "var(--brycks-foreground-muted)",
     lineHeight: 1.4
   };
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ h(
     "label",
     {
-      className: w("brycks-radio", `brycks-radio--${s}`, d),
+      className: C("brycks-radio", `brycks-radio--${s}`, d),
       style: o,
       onMouseEnter: () => c(!0),
       onMouseLeave: () => c(!1),
       children: [
-        /* @__PURE__ */ S("span", { style: h, children: [
-          /* @__PURE__ */ a("span", { style: u, children: /* @__PURE__ */ a("span", { style: C }) }),
+        /* @__PURE__ */ h("span", { style: S, children: [
+          /* @__PURE__ */ a("span", { style: u, children: /* @__PURE__ */ a("span", { style: w }) }),
           /* @__PURE__ */ a(
             "input",
             {
@@ -96,7 +96,7 @@ const N = {
             }
           )
         ] }),
-        (n || i) && /* @__PURE__ */ S("span", { style: R, children: [
+        (n || i) && /* @__PURE__ */ h("span", { style: R, children: [
           n && /* @__PURE__ */ a("span", { style: I, children: n }),
           i && /* @__PURE__ */ a("span", { style: j, children: i })
         ] })
@@ -118,27 +118,27 @@ function A({
   className: t,
   style: g
 }) {
-  const [m, b] = k(n ?? ""), c = s ?? m, v = (o) => {
-    s === void 0 && b(o), i?.(o);
+  const [m, v] = k(n ?? ""), c = s ?? m, b = (o) => {
+    s === void 0 && v(o), i?.(o);
   }, p = {
     display: "flex",
     flexDirection: d === "vertical" ? "column" : "row",
     flexWrap: d === "horizontal" ? "wrap" : void 0,
     gap: f,
     ...g
-  }, r = Array.isArray(l) ? l.map((o, h) => {
+  }, r = Array.isArray(l) ? l.map((o, S) => {
     if (o && typeof o == "object" && "props" in o) {
       const u = o.props.value;
       return {
         ...o,
-        key: o.key ?? h,
+        key: o.key ?? S,
         props: {
           ...o.props,
           name: x,
           size: e,
           disabled: y || o.props.disabled,
           checked: u === c,
-          onChange: () => v(u)
+          onChange: () => b(u)
         }
       };
     }
@@ -148,7 +148,7 @@ function A({
     "div",
     {
       role: "radiogroup",
-      className: w("brycks-radio-group", t),
+      className: C("brycks-radio-group", t),
       style: p,
       children: r
     }

package/dist/components/form/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../src/components/form/Radio/Radio.tsx"],"sourcesContent":["/**\n * Radio Component\n *\n * Accessible radio button with custom styling.\n * Supports different sizes and states.\n */\n\nimport {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type RadioSize = 'sm' | 'md' | 'lg'\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  /** Radio size */\n  size?: RadioSize\n  /** Radio label */\n  label?: ReactNode\n  /** Description below the label */\n  description?: ReactNode\n  /** Whether the radio is invalid */\n  isInvalid?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<RadioSize, { radio: number; dot: number; fontSize: number; gap: number }> = {\n  sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },\n  md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },\n  lg: { radio: 24, dot: 10, fontSize: 16, gap: 12 },\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    size = 'md',\n    label,\n    description,\n    isInvalid = false,\n    disabled = false,\n    className,\n    style,\n    testId,\n    checked,\n    ...props\n  },\n  ref\n) {\n  const [isHovered, setIsHovered] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const config = sizeConfig[size]\n\n  const containerStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'flex-start',\n    gap: config.gap,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const radioContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: config.radio,\n    height: config.radio,\n    flexShrink: 0,\n  }\n\n  const radioStyle: CSSProperties = {\n    width: config.radio,\n    height: config.radio,\n    borderRadius: '50%',\n    border: `2px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : checked\n        ? 'var(--brycks-primary-default)'\n        : isHovered\n        ? 'var(--brycks-border-strong)'\n        : 'var(--brycks-border-default)'\n    }`,\n    backgroundColor: checked\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-background-input)',\n    transition: 'all 150ms ease-out',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    boxShadow: isFocused\n      ? '0 0 0 3px var(--brycks-primary-100)'\n      : undefined,\n  }\n\n  const dotStyle: CSSProperties = {\n    width: config.dot,\n    height: config.dot,\n    borderRadius: '50%',\n    backgroundColor: 'white',\n    transform: checked ? 'scale(1)' : 'scale(0)',\n    transition: 'transform 150ms ease-out',\n  }\n\n  const inputStyle: CSSProperties = {\n    position: 'absolute',\n    width: config.radio,\n    height: config.radio,\n    opacity: 0,\n    margin: 0,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: config.fontSize - 1,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  return (\n    <label\n      className={cx('brycks-radio', `brycks-radio--${size}`, className)}\n      style={containerStyle}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <span style={radioContainerStyle}>\n        <span style={radioStyle}>\n          <span style={dotStyle} />\n        </span>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          checked={checked}\n          style={inputStyle}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </span>\n      {(label || description) && (\n        <span style={labelContainerStyle}>\n          {label && <span style={labelStyle}>{label}</span>}\n          {description && <span style={descriptionStyle}>{description}</span>}\n        </span>\n      )}\n    </label>\n  )\n})\n\nRadio.displayName = 'Radio'\n\n// RadioGroup component for grouping radios\nexport interface RadioGroupProps {\n  /** Radio group name */\n  name: string\n  /** Current value */\n  value?: string\n  /** Default value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when value changes */\n  onChange?: (value: string) => void\n  /** Whether the group is disabled */\n  disabled?: boolean\n  /** Radio size */\n  size?: RadioSize\n  /** Orientation */\n  orientation?: 'horizontal' | 'vertical'\n  /** Gap between items */\n  gap?: number\n  /** Children (Radio components) */\n  children: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Custom styles */\n  style?: CSSProperties\n}\n\nexport function RadioGroup({\n  name,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  disabled = false,\n  size = 'md',\n  orientation = 'vertical',\n  gap = 12,\n  children,\n  className,\n  style,\n}: RadioGroupProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '')\n  const value = controlledValue ?? internalValue\n\n  const handleChange = (newValue: string) => {\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n    onChange?.(newValue)\n  }\n\n  const groupStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    flexWrap: orientation === 'horizontal' ? 'wrap' : undefined,\n    gap,\n    ...style,\n  }\n\n  // Clone children and inject props\n  const clonedChildren = Array.isArray(children)\n    ? children.map((child, index) => {\n        if (child && typeof child === 'object' && 'props' in child) {\n          const childValue = child.props.value\n          return {\n            ...child,\n            key: child.key ?? index,\n            props: {\n              ...child.props,\n              name,\n              size,\n              disabled: disabled || child.props.disabled,\n              checked: childValue === value,\n              onChange: () => handleChange(childValue),\n            },\n          }\n        }\n        return child\n      })\n    : children\n\n  return (\n    <div\n      role=\"radiogroup\"\n      className={cx('brycks-radio-group', className)}\n      style={groupStyle}\n    >\n      {clonedChildren}\n    </div>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"],"names":["sizeConfig","Radio","forwardRef","size","label","description","isInvalid","disabled","className","style","testId","checked","props","ref","isHovered","setIsHovered","useState","isFocused","setIsFocused","config","containerStyle","radioContainerStyle","radioStyle","dotStyle","inputStyle","labelContainerStyle","labelStyle","descriptionStyle","jsxs","cx","jsx","RadioGroup","name","controlledValue","defaultValue","onChange","orientation","gap","children","internalValue","setInternalValue","value","handleChange","newValue","groupStyle","clonedChildren","child","index","childValue"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../../../../src/components/form/Radio/Radio.tsx"],"sourcesContent":["/**\n * Radio Component\n *\n * Accessible radio button with custom styling.\n * Supports different sizes and states.\n */\n\nimport {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type RadioSize = 'sm' | 'md' | 'lg'\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  /** Radio size */\n  size?: RadioSize\n  /** Radio label */\n  label?: ReactNode\n  /** Description below the label */\n  description?: ReactNode\n  /** Whether the radio is invalid */\n  isInvalid?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<RadioSize, { radio: number; dot: number; fontSize: number; gap: number }> = {\n  sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },\n  md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },\n  lg: { radio: 24, dot: 10, fontSize: 16, gap: 12 },\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    size = 'md',\n    label,\n    description,\n    isInvalid = false,\n    disabled = false,\n    className,\n    style,\n    testId,\n    checked,\n    ...props\n  },\n  ref\n) {\n  const [isHovered, setIsHovered] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const config = sizeConfig[size]\n\n  const containerStyle: CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'flex-start',\n    gap: config.gap,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    ...style,\n  }\n\n  const radioContainerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: config.radio,\n    height: config.radio,\n    flexShrink: 0,\n  }\n\n  const radioStyle: CSSProperties = {\n    width: config.radio,\n    height: config.radio,\n    borderRadius: '50%',\n    border: `2px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : checked\n        ? 'var(--brycks-primary-default)'\n        : isHovered\n        ? 'var(--brycks-border-strong)'\n        : 'var(--brycks-border-default)'\n    }`,\n    backgroundColor: checked\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-background-elevated)',\n    transition: 'all 150ms ease-out',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    boxShadow: isFocused\n      ? 'var(--brycks-focus-ring)'\n      : undefined,\n  }\n\n  const dotStyle: CSSProperties = {\n    width: config.dot,\n    height: config.dot,\n    borderRadius: '50%',\n    backgroundColor: 'var(--brycks-primary-foreground)',\n    transform: checked ? 'scale(1)' : 'scale(0)',\n    transition: 'transform 150ms ease-out',\n  }\n\n  const inputStyle: CSSProperties = {\n    position: 'absolute',\n    width: config.radio,\n    height: config.radio,\n    opacity: 0,\n    margin: 0,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: config.fontSize - 1,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  return (\n    <label\n      className={cx('brycks-radio', `brycks-radio--${size}`, className)}\n      style={containerStyle}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <span style={radioContainerStyle}>\n        <span style={radioStyle}>\n          <span style={dotStyle} />\n        </span>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          checked={checked}\n          style={inputStyle}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          data-testid={testId}\n          {...props}\n        />\n      </span>\n      {(label || description) && (\n        <span style={labelContainerStyle}>\n          {label && <span style={labelStyle}>{label}</span>}\n          {description && <span style={descriptionStyle}>{description}</span>}\n        </span>\n      )}\n    </label>\n  )\n})\n\nRadio.displayName = 'Radio'\n\n// RadioGroup component for grouping radios\nexport interface RadioGroupProps {\n  /** Radio group name */\n  name: string\n  /** Current value */\n  value?: string\n  /** Default value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when value changes */\n  onChange?: (value: string) => void\n  /** Whether the group is disabled */\n  disabled?: boolean\n  /** Radio size */\n  size?: RadioSize\n  /** Orientation */\n  orientation?: 'horizontal' | 'vertical'\n  /** Gap between items */\n  gap?: number\n  /** Children (Radio components) */\n  children: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Custom styles */\n  style?: CSSProperties\n}\n\nexport function RadioGroup({\n  name,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  disabled = false,\n  size = 'md',\n  orientation = 'vertical',\n  gap = 12,\n  children,\n  className,\n  style,\n}: RadioGroupProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '')\n  const value = controlledValue ?? internalValue\n\n  const handleChange = (newValue: string) => {\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n    onChange?.(newValue)\n  }\n\n  const groupStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    flexWrap: orientation === 'horizontal' ? 'wrap' : undefined,\n    gap,\n    ...style,\n  }\n\n  // Clone children and inject props\n  const clonedChildren = Array.isArray(children)\n    ? children.map((child, index) => {\n        if (child && typeof child === 'object' && 'props' in child) {\n          const childValue = child.props.value\n          return {\n            ...child,\n            key: child.key ?? index,\n            props: {\n              ...child.props,\n              name,\n              size,\n              disabled: disabled || child.props.disabled,\n              checked: childValue === value,\n              onChange: () => handleChange(childValue),\n            },\n          }\n        }\n        return child\n      })\n    : children\n\n  return (\n    <div\n      role=\"radiogroup\"\n      className={cx('brycks-radio-group', className)}\n      style={groupStyle}\n    >\n      {clonedChildren}\n    </div>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"],"names":["sizeConfig","Radio","forwardRef","size","label","description","isInvalid","disabled","className","style","testId","checked","props","ref","isHovered","setIsHovered","useState","isFocused","setIsFocused","config","containerStyle","radioContainerStyle","radioStyle","dotStyle","inputStyle","labelContainerStyle","labelStyle","descriptionStyle","jsxs","cx","jsx","RadioGroup","name","controlledValue","defaultValue","onChange","orientation","gap","children","internalValue","setInternalValue","value","handleChange","newValue","groupStyle","clonedChildren","child","index","childValue"],"mappings":"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"}

package/dist/components/form/TagInput/TagInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("react"),ce=require("../../../utils/styles.cjs"),b=require("../../../design-system/tokens/motion.cjs"),n=require("../../../design-system/tokens/spacing.cjs"),g=require("../../../design-system/primitives/sizing.cjs"),R=require("../../../design-system/tokens/typography.cjs"),ue={sm:{height:g.componentHeights.sm,fontSize:R.fontSizes.base-1,tagHeight:n.spacing[5],padding:g.componentPaddingX.xs,gap:n.spacing[1]},md:{height:g.componentHeights.md,fontSize:R.fontSizes.base,tagHeight:n.spacing[6],padding:g.componentPaddingX.sm,gap:n.spacing[1.5]},lg:{height:g.componentHeights.lg,fontSize:R.fontSizes.md,tagHeight:n.spacing[7],padding:g.componentPaddingX.sm,gap:n.spacing[2]}};function de(){return o.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:o.jsx("path",{d:"M3 3l6 6M9 3l-6 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}const X=s.forwardRef(function({value:x,defaultValue:K=[],onChange:H,placeholder:N="Add tags...",size:M="md",maxTags:w,allowDuplicates:L=!1,delimiters:q=["Enter",","],disabled:y=!1,isInvalid:D=!1,readOnly:P=!1,validateTag:j,transformTag:A=T=>T.trim(),suggestions:G,renderTag:B,"aria-label":U="Tag input",className:V,testId:Y},C){const[T,J]=s.useState(K),[p,m]=s.useState(""),[W,F]=s.useState(!1),[z,k]=s.useState(null),[f,c]=s.useState(!1),[v,h]=s.useState(-1),E=s.useRef(null),O=s.useRef(null),r=x!==void 0?x:T,i=ue[M],S=!y&&!P,u=G?.filter(e=>e.label.toLowerCase().includes(p.toLowerCase())&&!r.some(t=>t.id===e.id))||[],d=s.useCallback(e=>{x===void 0&&J(e),H?.(e)},[x,H]),$=s.useCallback(e=>{const t=A(e);if(!t)return!1;if(w&&r.length>=w)return k(`Maximum ${w} tags allowed`),!1;if(!L&&r.some(l=>l.label.toLowerCase()===t.toLowerCase()))return k("Tag already exists"),!1;if(j){const l=j(t);if(l!==!0)return k(typeof l=="string"?l:"Invalid tag"),!1}const a={id:`tag-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,label:t};return d([...r,a]),m(""),k(null),!0},[r,w,L,j,A,d]),I=s.useCallback(e=>{S&&d(r.filter(t=>t.id!==e))},[S,r,d]),Q=s.useCallback(e=>{const t=e.target.value;if(t.includes(",")){const a=t.split(",");a.forEach((l,le)=>{le<a.length-1&&l.trim()&&$(l)}),m(a[a.length-1])}else m(t);k(null),c(!0),h(-1)},[$]),Z=s.useCallback(e=>{if(S){if(f&&u.length>0){if(e.key==="ArrowDown"){e.preventDefault(),h(t=>Math.min(t+1,u.length-1));return}if(e.key==="ArrowUp"){e.preventDefault(),h(t=>Math.max(t-1,0));return}if((e.key==="Enter"||e.key==="Tab")&&v>=0){e.preventDefault();const t=u[v];t&&(d([...r,t]),m(""),c(!1),h(-1));return}}if(q.includes(e.key)&&p){e.preventDefault(),$(p),c(!1);return}if(e.key==="Backspace"&&!p&&r.length>0){I(r[r.length-1].id);return}e.key==="Escape"&&(c(!1),h(-1))}},[S,f,u,v,q,p,r,$,I,d]);s.useEffect(()=>{if(!f)return;const e=t=>{O.current?.contains(t.target)||c(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[f]);const _={position:"relative",width:"100%"},ee={display:"flex",flexWrap:"wrap",alignItems:"center",gap:i.gap,minHeight:i.height,padding:`${n.spacing[1]}px ${i.padding}px`,backgroundColor:y?"var(--brycks-background-muted)":"var(--brycks-background-default)",border:`1px solid ${D||z?"var(--brycks-error-default)":W?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",transition:`all ${b.durations.fast}ms ${b.easings.easeOut}`,cursor:y?"not-allowed":"text",boxShadow:W?"var(--brycks-focus-ring)":void 0},te=e=>({display:"inline-flex",alignItems:"center",gap:n.spacing[1],height:i.tagHeight,padding:`0 ${n.spacing[2]}px`,fontSize:i.fontSize-1,fontWeight:500,color:e.color?"white":"var(--brycks-foreground-default)",backgroundColor:e.color||"var(--brycks-background-muted)",borderRadius:"var(--brycks-radius-full)",whiteSpace:"nowrap"}),ne={display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[4],height:n.spacing[4],marginLeft:n.spacing[.5],marginRight:-n.spacing[1],color:"inherit",opacity:.7,cursor:"pointer",borderRadius:"var(--brycks-radius-full)",transition:`all ${b.durations.fast}ms ${b.easings.easeOut}`},re={flex:1,minWidth:100,height:i.tagHeight,padding:0,fontSize:i.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none"},se={position:"absolute",top:"100%",left:0,right:0,marginTop:n.spacing[1],maxHeight:200,overflowY:"auto",backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",zIndex:"var(--brycks-z-dropdown)",padding:n.spacing[1]},ae=e=>({display:"flex",alignItems:"center",gap:g.componentGap.md,padding:`${n.spacing[2]}px ${n.spacing[3]}px`,fontSize:i.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:"pointer",transition:`background-color ${b.durations.fast}ms ${b.easings.easeOut}`}),oe={marginTop:n.spacing[1],fontSize:R.fontSizes.sm,color:"var(--brycks-error-default)"},ie=(e,t)=>o.jsxs("span",{style:te(e),children:[e.label,S&&o.jsx("button",{type:"button","aria-label":`Remove ${e.label}`,style:ne,onClick:a=>{a.stopPropagation(),t()},onMouseEnter:a=>{a.currentTarget.style.opacity="1",a.currentTarget.style.backgroundColor="rgba(0,0,0,0.1)"},onMouseLeave:a=>{a.currentTarget.style.opacity="0.7",a.currentTarget.style.backgroundColor="transparent"},children:o.jsx(de,{})})]},e.id);return o.jsxs("div",{ref:O,className:ce.cx("brycks-tag-input",`brycks-tag-input--${M}`,V),style:_,"data-testid":Y,children:[o.jsxs("div",{style:ee,onClick:()=>!y&&E.current?.focus(),children:[r.map(e=>B?B(e,()=>I(e.id)):ie(e,()=>I(e.id))),o.jsx("input",{ref:e=>{E.current=e,typeof C=="function"?C(e):C&&(C.current=e)},type:"text",role:"combobox","aria-label":U,"aria-expanded":f&&u.length>0,"aria-autocomplete":"list","aria-invalid":D||!!z,value:p,placeholder:r.length===0?N:"",disabled:y,readOnly:P,style:re,onChange:Q,onKeyDown:Z,onFocus:()=>{F(!0),c(!0)},onBlur:()=>F(!1)})]}),f&&u.length>0&&o.jsx("ul",{role:"listbox",style:se,children:u.map((e,t)=>o.jsx("li",{role:"option","aria-selected":t===v,style:ae(t===v),onClick:()=>{d([...r,e]),m(""),c(!1),E.current?.focus()},onMouseEnter:()=>h(t),children:e.label},e.id))}),z&&o.jsx("div",{style:oe,children:z})]})});X.displayName="TagInput";exports.TagInput=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),de=require("../../../utils/styles.cjs"),b=require("../../../design-system/tokens/motion.cjs"),n=require("../../../design-system/tokens/spacing.cjs"),g=require("../../../design-system/primitives/sizing.cjs"),j=require("../../../design-system/tokens/typography.cjs"),ge={sm:{height:g.componentHeights.sm,fontSize:j.fontSizes.base-1,tagHeight:n.spacing[5],padding:g.componentPaddingX.xs,gap:n.spacing[1]},md:{height:g.componentHeights.md,fontSize:j.fontSizes.base,tagHeight:n.spacing[6],padding:g.componentPaddingX.sm,gap:n.spacing[1.5]},lg:{height:g.componentHeights.lg,fontSize:j.fontSizes.md,tagHeight:n.spacing[7],padding:g.componentPaddingX.sm,gap:n.spacing[2]}};function pe(){return a.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:a.jsx("path",{d:"M3 3l6 6M9 3l-6 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}const N=o.forwardRef(function({value:w,defaultValue:G=[],onChange:T,placeholder:U="Add tags...",size:L="md",maxTags:C,allowDuplicates:M=!1,delimiters:q=["Enter",","],disabled:y=!1,isInvalid:D=!1,readOnly:P=!1,validateTag:E,transformTag:A=m=>m.trim(),suggestions:V,renderTag:B,maxTagsMessage:W=m=>`Maximum ${m} tags allowed`,duplicateMessage:F="Tag already exists","aria-label":Y="Tag input",className:J,testId:Q},z){const[m,Z]=o.useState(G),[p,k]=o.useState(""),[O,X]=o.useState(!1),[$,v]=o.useState(null),[f,c]=o.useState(!1),[S,h]=o.useState(-1),H=o.useRef(null),K=o.useRef(null),r=w!==void 0?w:m,i=ge[L],x=!y&&!P,u=V?.filter(e=>e.label.toLowerCase().includes(p.toLowerCase())&&!r.some(t=>t.id===e.id))||[],d=o.useCallback(e=>{w===void 0&&Z(e),T?.(e)},[w,T]),I=o.useCallback(e=>{const t=A(e);if(!t)return!1;if(C&&r.length>=C)return v(W(C)),!1;if(!M&&r.some(l=>l.label.toLowerCase()===t.toLowerCase()))return v(F),!1;if(E){const l=E(t);if(l!==!0)return v(typeof l=="string"?l:"Invalid tag"),!1}const s={id:`tag-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,label:t};return d([...r,s]),k(""),v(null),!0},[r,C,M,E,A,d,W,F]),R=o.useCallback(e=>{x&&d(r.filter(t=>t.id!==e))},[x,r,d]),_=o.useCallback(e=>{const t=e.target.value;if(t.includes(",")){const s=t.split(",");s.forEach((l,ue)=>{ue<s.length-1&&l.trim()&&I(l)}),k(s[s.length-1])}else k(t);v(null),c(!0),h(-1)},[I]),ee=o.useCallback(e=>{if(x){if(f&&u.length>0){if(e.key==="ArrowDown"){e.preventDefault(),h(t=>Math.min(t+1,u.length-1));return}if(e.key==="ArrowUp"){e.preventDefault(),h(t=>Math.max(t-1,0));return}if((e.key==="Enter"||e.key==="Tab")&&S>=0){e.preventDefault();const t=u[S];t&&(d([...r,t]),k(""),c(!1),h(-1));return}}if(q.includes(e.key)&&p){e.preventDefault(),I(p),c(!1);return}if(e.key==="Backspace"&&!p&&r.length>0){R(r[r.length-1].id);return}e.key==="Escape"&&(c(!1),h(-1))}},[x,f,u,S,q,p,r,I,R,d]);o.useEffect(()=>{if(!f)return;const e=t=>{K.current?.contains(t.target)||c(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[f]);const te={position:"relative",width:"100%"},ne={display:"flex",flexWrap:"wrap",alignItems:"center",gap:i.gap,minHeight:i.height,padding:`${n.spacing[1]}px ${i.padding}px`,backgroundColor:y?"var(--brycks-background-muted)":"var(--brycks-background-default)",border:`1px solid ${D||$?"var(--brycks-error-default)":O?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",transition:`all ${b.durations.fast}ms ${b.easings.easeOut}`,cursor:y?"not-allowed":"text",boxShadow:O?"var(--brycks-focus-ring)":void 0},re=e=>({display:"inline-flex",alignItems:"center",gap:n.spacing[1],height:i.tagHeight,padding:`0 ${n.spacing[2]}px`,fontSize:i.fontSize-1,fontWeight:500,color:e.color?"white":"var(--brycks-foreground-default)",backgroundColor:e.color||"var(--brycks-background-muted)",borderRadius:"var(--brycks-radius-full)",whiteSpace:"nowrap"}),oe={display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[4],height:n.spacing[4],marginLeft:n.spacing[.5],marginRight:-n.spacing[1],color:"inherit",opacity:.7,cursor:"pointer",borderRadius:"var(--brycks-radius-full)",transition:`all ${b.durations.fast}ms ${b.easings.easeOut}`},se={flex:1,minWidth:100,height:i.tagHeight,padding:0,fontSize:i.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none"},ae={position:"absolute",top:"100%",left:0,right:0,marginTop:n.spacing[1],maxHeight:200,overflowY:"auto",backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",zIndex:"var(--brycks-z-dropdown)",padding:n.spacing[1]},ie=e=>({display:"flex",alignItems:"center",gap:g.componentGap.md,padding:`${n.spacing[2]}px ${n.spacing[3]}px`,fontSize:i.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:"pointer",transition:`background-color ${b.durations.fast}ms ${b.easings.easeOut}`}),le={marginTop:n.spacing[1],fontSize:j.fontSizes.sm,color:"var(--brycks-error-default)"},ce=(e,t)=>a.jsxs("span",{style:re(e),children:[e.label,x&&a.jsx("button",{type:"button","aria-label":`Remove ${e.label}`,style:oe,onClick:s=>{s.stopPropagation(),t()},onMouseEnter:s=>{s.currentTarget.style.opacity="1",s.currentTarget.style.backgroundColor="rgba(0,0,0,0.1)"},onMouseLeave:s=>{s.currentTarget.style.opacity="0.7",s.currentTarget.style.backgroundColor="transparent"},children:a.jsx(pe,{})})]},e.id);return a.jsxs("div",{ref:K,className:de.cx("brycks-tag-input",`brycks-tag-input--${L}`,J),style:te,"data-testid":Q,children:[a.jsxs("div",{style:ne,onClick:()=>!y&&H.current?.focus(),children:[r.map(e=>B?B(e,()=>R(e.id)):ce(e,()=>R(e.id))),a.jsx("input",{ref:e=>{H.current=e,typeof z=="function"?z(e):z&&(z.current=e)},type:"text",role:"combobox","aria-label":Y,"aria-expanded":f&&u.length>0,"aria-autocomplete":"list","aria-invalid":D||!!$,value:p,placeholder:r.length===0?U:"",disabled:y,readOnly:P,style:se,onChange:_,onKeyDown:ee,onFocus:()=>{X(!0),c(!0)},onBlur:()=>X(!1)})]}),f&&u.length>0&&a.jsx("ul",{role:"listbox",style:ae,children:u.map((e,t)=>a.jsx("li",{role:"option","aria-selected":t===S,style:ie(t===S),onClick:()=>{d([...r,e]),k(""),c(!1),H.current?.focus()},onMouseEnter:()=>h(t),children:e.label},e.id))}),$&&a.jsx("div",{style:le,children:$})]})});N.displayName="TagInput";exports.TagInput=N;
 //# sourceMappingURL=TagInput.cjs.map