@brycks/core-front 0.3.5 → 0.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/form/TimePicker/TimePicker.tsx"],"sourcesContent":["/**\n * TimePicker Component\n *\n * A time selection component with hour, minute, and optional period (AM/PM).\n * Supports keyboard navigation and manual input.\n *\n * @module components/form/TimePicker\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX } from '../../../design-system/primitives'\n\nexport type TimePickerSize = 'sm' | 'md' | 'lg'\nexport type TimeFormat = '12h' | '24h'\n\nexport interface TimeValue {\n  /** Hours (0-23 for 24h, 1-12 for 12h) */\n  hours: number\n  /** Minutes (0-59) */\n  minutes: number\n  /** Period for 12h format */\n  period?: 'AM' | 'PM'\n}\n\nexport interface TimePickerProps {\n  /** Current time value */\n  value?: TimeValue | null\n  /** Default time value (uncontrolled) */\n  defaultValue?: TimeValue | null\n  /** Callback when time changes */\n  onChange?: (value: TimeValue | null) => void\n  /** Time format */\n  format?: TimeFormat\n  /** Component size */\n  size?: TimePickerSize\n  /** Minute step interval */\n  minuteStep?: number\n  /** Minimum selectable time */\n  minTime?: TimeValue\n  /** Maximum selectable time */\n  maxTime?: TimeValue\n  /** Placeholder text */\n  placeholder?: string\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Whether to allow clearing */\n  clearable?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<TimePickerSize, { height: number; fontSize: number; padding: number }> = {\n  sm: { height: componentHeights.sm, fontSize: fontSizes.base - 1, padding: componentPaddingX.sm },\n  md: { height: componentHeights.md, fontSize: fontSizes.base, padding: componentPaddingX.md },\n  lg: { height: componentHeights.lg, fontSize: fontSizes.md, padding: componentPaddingX.lg },\n}\n\nfunction ClockIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <path d=\"M8 4v4l2.5 2.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nconst formatTimeValue = (value: TimeValue | null, format: TimeFormat): string => {\n  if (!value) return ''\n\n  const { hours, minutes, period } = value\n\n  if (format === '12h') {\n    const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours\n    return `${displayHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${period || 'AM'}`\n  }\n\n  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`\n}\n\nconst parseTimeString = (str: string, format: TimeFormat): TimeValue | null => {\n  const cleanStr = str.trim().toUpperCase()\n\n  if (format === '12h') {\n    const match = cleanStr.match(/^(\\d{1,2}):(\\d{2})\\s*(AM|PM)?$/i)\n    if (!match) return null\n\n    let hours = parseInt(match[1], 10)\n    const minutes = parseInt(match[2], 10)\n    const period = (match[3]?.toUpperCase() as 'AM' | 'PM') || 'AM'\n\n    if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) return null\n\n    return { hours, minutes, period }\n  } else {\n    const match = cleanStr.match(/^(\\d{1,2}):(\\d{2})$/)\n    if (!match) return null\n\n    const hours = parseInt(match[1], 10)\n    const minutes = parseInt(match[2], 10)\n\n    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null\n\n    return { hours, minutes }\n  }\n}\n\nexport const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function TimePicker(\n  {\n    value: controlledValue,\n    defaultValue = null,\n    onChange,\n    format = '12h',\n    size = 'md',\n    minuteStep = 1,\n    minTime: _minTime,\n    maxTime: _maxTime,\n    placeholder,\n    disabled = false,\n    isInvalid = false,\n    clearable = true,\n    'aria-label': ariaLabel = 'Select time',\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState<TimeValue | null>(defaultValue)\n  const [inputValue, setInputValue] = useState('')\n  const [isOpen, setIsOpen] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const hoursRef = useRef<HTMLDivElement>(null)\n  const minutesRef = useRef<HTMLDivElement>(null)\n\n  const value = controlledValue !== undefined ? controlledValue : internalValue\n  const config = sizeConfig[size]\n\n  // Sync input value with controlled value\n  useEffect(() => {\n    if (!isOpen) {\n      setInputValue(formatTimeValue(value, format))\n    }\n  }, [value, format, isOpen])\n\n  const updateValue = useCallback(\n    (newValue: TimeValue | null) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newInputValue = e.target.value\n      setInputValue(newInputValue)\n\n      const parsed = parseTimeString(newInputValue, format)\n      if (parsed) {\n        updateValue(parsed)\n      }\n    },\n    [format, updateValue]\n  )\n\n  const handleInputBlur = useCallback(() => {\n    setIsFocused(false)\n    setInputValue(formatTimeValue(value, format))\n  }, [value, format])\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      updateValue(null)\n      setInputValue('')\n      inputRef.current?.focus()\n    },\n    [updateValue]\n  )\n\n  const selectTime = useCallback(\n    (hours: number, minutes: number, period?: 'AM' | 'PM') => {\n      const newValue: TimeValue = format === '12h'\n        ? { hours, minutes, period: period || value?.period || 'AM' }\n        : { hours, minutes }\n      updateValue(newValue)\n    },\n    [format, value, updateValue]\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'ArrowDown' && !isOpen) {\n        e.preventDefault()\n        setIsOpen(true)\n      } else if (e.key === 'Escape') {\n        setIsOpen(false)\n      }\n    },\n    [isOpen]\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      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  // Scroll to selected time when opening\n  useEffect(() => {\n    if (!isOpen || !value) return\n\n    setTimeout(() => {\n      const hourEl = hoursRef.current?.querySelector(`[data-value=\"${value.hours}\"]`)\n      const minuteEl = minutesRef.current?.querySelector(`[data-value=\"${value.minutes}\"]`)\n      hourEl?.scrollIntoView({ block: 'center' })\n      minuteEl?.scrollIntoView({ block: 'center' })\n    }, 0)\n  }, [isOpen, value])\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: Math.max(rect.width, 280),\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  // Generate hours list\n  const hours = format === '12h'\n    ? Array.from({ length: 12 }, (_, i) => i + 1)\n    : Array.from({ length: 24 }, (_, i) => i)\n\n  // Generate minutes list\n  const minutes = Array.from({ length: 60 / minuteStep }, (_, i) => i * minuteStep)\n\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'inline-flex',\n    width: '100%',\n  }\n\n  const inputWrapperStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    height: config.height,\n    backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n    border: `1px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-md)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    cursor: disabled ? 'not-allowed' : 'text',\n    boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n  }\n\n  const iconStyle: CSSProperties = {\n    position: 'absolute',\n    left: config.padding,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'var(--brycks-foreground-muted)',\n    pointerEvents: 'none',\n  }\n\n  const inputStyle: CSSProperties = {\n    flex: 1,\n    height: '100%',\n    padding: `0 ${config.padding}px`,\n    paddingLeft: spacing[10],\n    paddingRight: clearable && value ? spacing[10] : config.padding,\n    fontSize: config.fontSize,\n    color: disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    outline: 'none',\n    cursor: disabled ? 'not-allowed' : 'text',\n  }\n\n  const clearButtonStyle: CSSProperties = {\n    position: 'absolute',\n    right: config.padding,\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 dropdownStyle: CSSProperties = {\n    position: 'absolute',\n    top: dropdownPosition.top,\n    left: dropdownPosition.left,\n    width: dropdownPosition.width,\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[2],\n    display: 'flex',\n    gap: spacing[2],\n  }\n\n  const columnStyle: CSSProperties = {\n    flex: 1,\n    maxHeight: 200,\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n  }\n\n  const columnHeaderStyle: CSSProperties = {\n    padding: `${spacing[1]}px ${spacing[2]}px`,\n    fontSize: fontSizes.xs,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    textAlign: 'center',\n    position: 'sticky',\n    top: 0,\n    backgroundColor: 'var(--brycks-background-elevated)',\n  }\n\n  const optionStyle = (isSelected: boolean): CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: `${spacing[2]}px ${spacing[3]}px`,\n    fontSize: config.fontSize,\n    fontWeight: isSelected ? 600 : 400,\n    color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-default)',\n    backgroundColor: isSelected ? 'var(--brycks-primary-50)' : 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: 'pointer',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n  })\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx('brycks-timepicker', `brycks-timepicker--${size}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div style={inputWrapperStyle} onClick={() => !disabled && setIsOpen(true)}>\n        <span style={iconStyle}>\n          <ClockIcon />\n        </span>\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"text\"\n          role=\"combobox\"\n          aria-label={ariaLabel}\n          aria-expanded={isOpen}\n          aria-haspopup=\"dialog\"\n          aria-invalid={isInvalid}\n          value={inputValue}\n          placeholder={placeholder || (format === '12h' ? 'HH:MM AM/PM' : 'HH:MM')}\n          disabled={disabled}\n          style={inputStyle}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => setIsFocused(true)}\n          onBlur={handleInputBlur}\n        />\n        {clearable && value && !disabled && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear time\"\n            style={clearButtonStyle}\n            onClick={handleClear}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n              e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'transparent'\n              e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n            }}\n          >\n            <ClearIcon />\n          </button>\n        )}\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <div role=\"dialog\" aria-label=\"Select time\" style={dropdownStyle}>\n            <div ref={hoursRef} style={columnStyle}>\n              <div style={columnHeaderStyle}>Hour</div>\n              {hours.map((hour) => (\n                <div\n                  key={hour}\n                  data-value={hour}\n                  style={optionStyle(value?.hours === hour)}\n                  onClick={() => selectTime(hour, value?.minutes ?? 0, value?.period)}\n                  onMouseEnter={(e) => {\n                    if (value?.hours !== hour) {\n                      e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    if (value?.hours !== hour) {\n                      e.currentTarget.style.backgroundColor = 'transparent'\n                    }\n                  }}\n                >\n                  {hour.toString().padStart(2, '0')}\n                </div>\n              ))}\n            </div>\n\n            <div ref={minutesRef} style={columnStyle}>\n              <div style={columnHeaderStyle}>Min</div>\n              {minutes.map((minute) => (\n                <div\n                  key={minute}\n                  data-value={minute}\n                  style={optionStyle(value?.minutes === minute)}\n                  onClick={() => selectTime(value?.hours ?? (format === '12h' ? 12 : 0), minute, value?.period)}\n                  onMouseEnter={(e) => {\n                    if (value?.minutes !== minute) {\n                      e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    if (value?.minutes !== minute) {\n                      e.currentTarget.style.backgroundColor = 'transparent'\n                    }\n                  }}\n                >\n                  {minute.toString().padStart(2, '0')}\n                </div>\n              ))}\n            </div>\n\n            {format === '12h' && (\n              <div style={{ ...columnStyle, flex: 0.6 }}>\n                <div style={columnHeaderStyle}>Period</div>\n                {(['AM', 'PM'] as const).map((period) => (\n                  <div\n                    key={period}\n                    style={optionStyle(value?.period === period)}\n                    onClick={() => selectTime(value?.hours ?? 12, value?.minutes ?? 0, period)}\n                    onMouseEnter={(e) => {\n                      if (value?.period !== period) {\n                        e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                      }\n                    }}\n                    onMouseLeave={(e) => {\n                      if (value?.period !== period) {\n                        e.currentTarget.style.backgroundColor = 'transparent'\n                      }\n                    }}\n                  >\n                    {period}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nTimePicker.displayName = 'TimePicker'\n"],"names":["sizeConfig","componentHeights","fontSizes","componentPaddingX","ClockIcon","jsxs","jsx","ClearIcon","formatTimeValue","value","format","hours","minutes","period","parseTimeString","str","cleanStr","match","TimePicker","forwardRef","controlledValue","defaultValue","onChange","size","minuteStep","_minTime","_maxTime","placeholder","disabled","isInvalid","clearable","ariaLabel","className","testId","ref","internalValue","setInternalValue","useState","inputValue","setInputValue","isOpen","setIsOpen","isFocused","setIsFocused","containerRef","useRef","inputRef","hoursRef","minutesRef","config","useEffect","updateValue","useCallback","newValue","handleInputChange","newInputValue","parsed","handleInputBlur","handleClear","selectTime","handleKeyDown","handleClick","e","hourEl","minuteEl","dropdownPosition","setDropdownPosition","updatePosition","rect","spacing","_","i","containerStyle","inputWrapperStyle","durations","easings","iconStyle","inputStyle","clearButtonStyle","dropdownStyle","columnStyle","columnHeaderStyle","optionStyle","isSelected","cx","node","createPortal","hour","minute"],"mappings":"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"}
+{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/form/TimePicker/TimePicker.tsx"],"sourcesContent":["/**\n * TimePicker Component\n *\n * A time selection component with hour, minute, and optional period (AM/PM).\n * Supports keyboard navigation and manual input.\n *\n * @module components/form/TimePicker\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX } from '../../../design-system/primitives'\n\nexport type TimePickerSize = 'sm' | 'md' | 'lg'\nexport type TimeFormat = '12h' | '24h'\n\nexport interface TimeValue {\n  /** Hours (0-23 for 24h, 1-12 for 12h) */\n  hours: number\n  /** Minutes (0-59) */\n  minutes: number\n  /** Period for 12h format */\n  period?: 'AM' | 'PM'\n}\n\nexport interface TimePickerProps {\n  /** Current time value */\n  value?: TimeValue | null\n  /** Default time value (uncontrolled) */\n  defaultValue?: TimeValue | null\n  /** Callback when time changes */\n  onChange?: (value: TimeValue | null) => void\n  /** Time format */\n  format?: TimeFormat\n  /** Component size */\n  size?: TimePickerSize\n  /** Minute step interval */\n  minuteStep?: number\n  /** Minimum selectable time */\n  minTime?: TimeValue\n  /** Maximum selectable time */\n  maxTime?: TimeValue\n  /** Placeholder text */\n  placeholder?: string\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Whether to allow clearing */\n  clearable?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<TimePickerSize, { height: number; fontSize: number; padding: number }> = {\n  sm: { height: componentHeights.sm, fontSize: fontSizes.base - 1, padding: componentPaddingX.sm },\n  md: { height: componentHeights.md, fontSize: fontSizes.base, padding: componentPaddingX.md },\n  lg: { height: componentHeights.lg, fontSize: fontSizes.md, padding: componentPaddingX.lg },\n}\n\nfunction ClockIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <path d=\"M8 4v4l2.5 2.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nconst formatTimeValue = (value: TimeValue | null, format: TimeFormat): string => {\n  if (!value) return ''\n\n  const { hours, minutes, period } = value\n\n  if (format === '12h') {\n    const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours\n    return `${displayHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${period || 'AM'}`\n  }\n\n  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`\n}\n\nconst parseTimeString = (str: string, format: TimeFormat): TimeValue | null => {\n  const cleanStr = str.trim().toUpperCase()\n\n  if (format === '12h') {\n    const match = cleanStr.match(/^(\\d{1,2}):(\\d{2})\\s*(AM|PM)?$/i)\n    if (!match) return null\n\n    const hours = parseInt(match[1], 10)\n    const minutes = parseInt(match[2], 10)\n    const period = (match[3]?.toUpperCase() as 'AM' | 'PM') || 'AM'\n\n    if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) return null\n\n    return { hours, minutes, period }\n  } else {\n    const match = cleanStr.match(/^(\\d{1,2}):(\\d{2})$/)\n    if (!match) return null\n\n    const hours = parseInt(match[1], 10)\n    const minutes = parseInt(match[2], 10)\n\n    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null\n\n    return { hours, minutes }\n  }\n}\n\nexport const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function TimePicker(\n  {\n    value: controlledValue,\n    defaultValue = null,\n    onChange,\n    format = '12h',\n    size = 'md',\n    minuteStep = 1,\n    minTime: _minTime,\n    maxTime: _maxTime,\n    placeholder,\n    disabled = false,\n    isInvalid = false,\n    clearable = true,\n    'aria-label': ariaLabel = 'Select time',\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState<TimeValue | null>(defaultValue)\n  const [inputValue, setInputValue] = useState('')\n  const [isOpen, setIsOpen] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const hoursRef = useRef<HTMLDivElement>(null)\n  const minutesRef = useRef<HTMLDivElement>(null)\n\n  const value = controlledValue !== undefined ? controlledValue : internalValue\n  const config = sizeConfig[size]\n\n  // Sync input value with controlled value\n  useEffect(() => {\n    if (!isOpen) {\n      setInputValue(formatTimeValue(value, format))\n    }\n  }, [value, format, isOpen])\n\n  const updateValue = useCallback(\n    (newValue: TimeValue | null) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newInputValue = e.target.value\n      setInputValue(newInputValue)\n\n      const parsed = parseTimeString(newInputValue, format)\n      if (parsed) {\n        updateValue(parsed)\n      }\n    },\n    [format, updateValue]\n  )\n\n  const handleInputBlur = useCallback(() => {\n    setIsFocused(false)\n    setInputValue(formatTimeValue(value, format))\n  }, [value, format])\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      updateValue(null)\n      setInputValue('')\n      inputRef.current?.focus()\n    },\n    [updateValue]\n  )\n\n  const selectTime = useCallback(\n    (hours: number, minutes: number, period?: 'AM' | 'PM') => {\n      const newValue: TimeValue = format === '12h'\n        ? { hours, minutes, period: period || value?.period || 'AM' }\n        : { hours, minutes }\n      updateValue(newValue)\n    },\n    [format, value, updateValue]\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'ArrowDown' && !isOpen) {\n        e.preventDefault()\n        setIsOpen(true)\n      } else if (e.key === 'Escape') {\n        setIsOpen(false)\n      }\n    },\n    [isOpen]\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      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  // Scroll to selected time when opening\n  useEffect(() => {\n    if (!isOpen || !value) return\n\n    setTimeout(() => {\n      const hourEl = hoursRef.current?.querySelector(`[data-value=\"${value.hours}\"]`)\n      const minuteEl = minutesRef.current?.querySelector(`[data-value=\"${value.minutes}\"]`)\n      hourEl?.scrollIntoView({ block: 'center' })\n      minuteEl?.scrollIntoView({ block: 'center' })\n    }, 0)\n  }, [isOpen, value])\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: Math.max(rect.width, 280),\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  // Generate hours list\n  const hours = format === '12h'\n    ? Array.from({ length: 12 }, (_, i) => i + 1)\n    : Array.from({ length: 24 }, (_, i) => i)\n\n  // Generate minutes list\n  const minutes = Array.from({ length: 60 / minuteStep }, (_, i) => i * minuteStep)\n\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'inline-flex',\n    width: '100%',\n  }\n\n  const inputWrapperStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    height: config.height,\n    backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n    border: `1px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-md)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    cursor: disabled ? 'not-allowed' : 'text',\n    boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n  }\n\n  const iconStyle: CSSProperties = {\n    position: 'absolute',\n    left: config.padding,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'var(--brycks-foreground-muted)',\n    pointerEvents: 'none',\n  }\n\n  const inputStyle: CSSProperties = {\n    flex: 1,\n    height: '100%',\n    padding: `0 ${config.padding}px`,\n    paddingLeft: spacing[10],\n    paddingRight: clearable && value ? spacing[10] : config.padding,\n    fontSize: config.fontSize,\n    color: disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    outline: 'none',\n    cursor: disabled ? 'not-allowed' : 'text',\n  }\n\n  const clearButtonStyle: CSSProperties = {\n    position: 'absolute',\n    right: config.padding,\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 dropdownStyle: CSSProperties = {\n    position: 'absolute',\n    top: dropdownPosition.top,\n    left: dropdownPosition.left,\n    width: dropdownPosition.width,\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[2],\n    display: 'flex',\n    gap: spacing[2],\n  }\n\n  const columnStyle: CSSProperties = {\n    flex: 1,\n    maxHeight: 200,\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n  }\n\n  const columnHeaderStyle: CSSProperties = {\n    padding: `${spacing[1]}px ${spacing[2]}px`,\n    fontSize: fontSizes.xs,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    textAlign: 'center',\n    position: 'sticky',\n    top: 0,\n    backgroundColor: 'var(--brycks-background-elevated)',\n  }\n\n  const optionStyle = (isSelected: boolean): CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: `${spacing[2]}px ${spacing[3]}px`,\n    fontSize: config.fontSize,\n    fontWeight: isSelected ? 600 : 400,\n    color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-default)',\n    backgroundColor: isSelected ? 'var(--brycks-primary-muted)' : 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: 'pointer',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n  })\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx('brycks-timepicker', `brycks-timepicker--${size}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div style={inputWrapperStyle} onClick={() => !disabled && setIsOpen(true)}>\n        <span style={iconStyle}>\n          <ClockIcon />\n        </span>\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"text\"\n          role=\"combobox\"\n          aria-label={ariaLabel}\n          aria-expanded={isOpen}\n          aria-haspopup=\"dialog\"\n          aria-invalid={isInvalid}\n          value={inputValue}\n          placeholder={placeholder || (format === '12h' ? 'HH:MM AM/PM' : 'HH:MM')}\n          disabled={disabled}\n          style={inputStyle}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => setIsFocused(true)}\n          onBlur={handleInputBlur}\n        />\n        {clearable && value && !disabled && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear time\"\n            style={clearButtonStyle}\n            onClick={handleClear}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n              e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'transparent'\n              e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n            }}\n          >\n            <ClearIcon />\n          </button>\n        )}\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <div role=\"dialog\" aria-label=\"Select time\" style={dropdownStyle}>\n            <div ref={hoursRef} style={columnStyle}>\n              <div style={columnHeaderStyle}>Hour</div>\n              {hours.map((hour) => (\n                <div\n                  key={hour}\n                  data-value={hour}\n                  style={optionStyle(value?.hours === hour)}\n                  onClick={() => selectTime(hour, value?.minutes ?? 0, value?.period)}\n                  onMouseEnter={(e) => {\n                    if (value?.hours !== hour) {\n                      e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    if (value?.hours !== hour) {\n                      e.currentTarget.style.backgroundColor = 'transparent'\n                    }\n                  }}\n                >\n                  {hour.toString().padStart(2, '0')}\n                </div>\n              ))}\n            </div>\n\n            <div ref={minutesRef} style={columnStyle}>\n              <div style={columnHeaderStyle}>Min</div>\n              {minutes.map((minute) => (\n                <div\n                  key={minute}\n                  data-value={minute}\n                  style={optionStyle(value?.minutes === minute)}\n                  onClick={() => selectTime(value?.hours ?? (format === '12h' ? 12 : 0), minute, value?.period)}\n                  onMouseEnter={(e) => {\n                    if (value?.minutes !== minute) {\n                      e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    if (value?.minutes !== minute) {\n                      e.currentTarget.style.backgroundColor = 'transparent'\n                    }\n                  }}\n                >\n                  {minute.toString().padStart(2, '0')}\n                </div>\n              ))}\n            </div>\n\n            {format === '12h' && (\n              <div style={{ ...columnStyle, flex: 0.6 }}>\n                <div style={columnHeaderStyle}>Period</div>\n                {(['AM', 'PM'] as const).map((period) => (\n                  <div\n                    key={period}\n                    style={optionStyle(value?.period === period)}\n                    onClick={() => selectTime(value?.hours ?? 12, value?.minutes ?? 0, period)}\n                    onMouseEnter={(e) => {\n                      if (value?.period !== period) {\n                        e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                      }\n                    }}\n                    onMouseLeave={(e) => {\n                      if (value?.period !== period) {\n                        e.currentTarget.style.backgroundColor = 'transparent'\n                      }\n                    }}\n                  >\n                    {period}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nTimePicker.displayName = 'TimePicker'\n"],"names":["sizeConfig","componentHeights","fontSizes","componentPaddingX","ClockIcon","jsxs","jsx","ClearIcon","formatTimeValue","value","format","hours","minutes","period","parseTimeString","str","cleanStr","match","TimePicker","forwardRef","controlledValue","defaultValue","onChange","size","minuteStep","_minTime","_maxTime","placeholder","disabled","isInvalid","clearable","ariaLabel","className","testId","ref","internalValue","setInternalValue","useState","inputValue","setInputValue","isOpen","setIsOpen","isFocused","setIsFocused","containerRef","useRef","inputRef","hoursRef","minutesRef","config","useEffect","updateValue","useCallback","newValue","handleInputChange","newInputValue","parsed","handleInputBlur","handleClear","selectTime","handleKeyDown","handleClick","e","hourEl","minuteEl","dropdownPosition","setDropdownPosition","updatePosition","rect","spacing","_","i","containerStyle","inputWrapperStyle","durations","easings","iconStyle","inputStyle","clearButtonStyle","dropdownStyle","columnStyle","columnHeaderStyle","optionStyle","isSelected","cx","node","createPortal","hour","minute"],"mappings":"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"}

package/dist/components/form/TimePicker/TimePicker.js

@@ -22,26 +22,25 @@ function he() {
 }
 const F = (h, d) => {
   if (!h) return "";
-  const { hours: c, minutes: i, period: n } = h;
-  return d === "12h" ? `${(c === 0 ? 12 : c > 12 ? c - 12 : c).toString().padStart(2, "0")}:${i.toString().padStart(2, "0")} ${n || "AM"}` : `${c.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}`;
+  const { hours: c, minutes: s, period: n } = h;
+  return d === "12h" ? `${(c === 0 ? 12 : c > 12 ? c - 12 : c).toString().padStart(2, "0")}:${s.toString().padStart(2, "0")} ${n || "AM"}` : `${c.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
 }, me = (h, d) => {
   const c = h.trim().toUpperCase();
   if (d === "12h") {
-    const i = c.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i);
-    if (!i) return null;
-    let n = parseInt(i[1], 10);
-    const a = parseInt(i[2], 10), k = i[3]?.toUpperCase() || "AM";
+    const s = c.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i);
+    if (!s) return null;
+    const n = parseInt(s[1], 10), a = parseInt(s[2], 10), k = s[3]?.toUpperCase() || "AM";
     return n < 1 || n > 12 || a < 0 || a > 59 ? null : { hours: n, minutes: a, period: k };
   } else {
-    const i = c.match(/^(\d{1,2}):(\d{2})$/);
-    if (!i) return null;
-    const n = parseInt(i[1], 10), a = parseInt(i[2], 10);
+    const s = c.match(/^(\d{1,2}):(\d{2})$/);
+    if (!s) return null;
+    const n = parseInt(s[1], 10), a = parseInt(s[2], 10);
     return n < 0 || n > 23 || a < 0 || a > 59 ? null : { hours: n, minutes: a };
   }
 }, ke = ue(function({
   value: d,
   defaultValue: c = null,
-  onChange: i,
+  onChange: s,
   format: n = "12h",
   size: a = "md",
   minuteStep: k = 1,
@@ -55,15 +54,15 @@ const F = (h, d) => {
   className: N,
   testId: U
 }, b) {
-  const [X, Y] = m(c), [G, v] = m(""), [s, w] = m(!1), [B, V] = m(!1), x = C(null), D = C(null), O = C(null), _ = C(null), t = d !== void 0 ? d : X, p = ge[a];
+  const [X, Y] = m(c), [G, v] = m(""), [i, w] = m(!1), [B, V] = m(!1), x = C(null), D = C(null), O = C(null), _ = C(null), t = d !== void 0 ? d : X, p = ge[a];
   M(() => {
-    s || v(F(t, n));
-  }, [t, n, s]);
+    i || v(F(t, n));
+  }, [t, n, i]);
   const g = y(
     (e) => {
-      d === void 0 && Y(e), i?.(e);
+      d === void 0 && Y(e), s?.(e);
     },
-    [d, i]
+    [d, s]
   ), J = y(
     (e) => {
       const r = e.target.value;
@@ -87,25 +86,25 @@ const F = (h, d) => {
     [n, t, g]
   ), ee = y(
     (e) => {
-      e.key === "ArrowDown" && !s ? (e.preventDefault(), w(!0)) : e.key === "Escape" && w(!1);
+      e.key === "ArrowDown" && !i ? (e.preventDefault(), w(!0)) : e.key === "Escape" && w(!1);
     },
-    [s]
+    [i]
   );
   M(() => {
-    if (!s) return;
+    if (!i) return;
     const e = (r) => {
       x.current?.contains(r.target) || w(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [s]), M(() => {
-    !s || !t || setTimeout(() => {
+  }, [i]), M(() => {
+    !i || !t || setTimeout(() => {
       const e = O.current?.querySelector(`[data-value="${t.hours}"]`), r = _.current?.querySelector(`[data-value="${t.minutes}"]`);
       e?.scrollIntoView({ block: "center" }), r?.scrollIntoView({ block: "center" });
     }, 0);
-  }, [s, t]);
+  }, [i, t]);
   const [I, re] = m({ top: 0, left: 0, width: 0 });
   M(() => {
-    if (!s || !x.current) return;
+    if (!i || !x.current) return;
     const e = () => {
       const r = x.current.getBoundingClientRect();
       re({
@@ -117,12 +116,12 @@ const F = (h, d) => {
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
-  }, [s]);
+  }, [i]);
   const te = n === "12h" ? Array.from({ length: 12 }, (e, r) => r + 1) : Array.from({ length: 24 }, (e, r) => r), ne = Array.from({ length: 60 / k }, (e, r) => r * k), oe = {
     position: "relative",
     display: "inline-flex",
     width: "100%"
-  }, ie = {
+  }, se = {
     position: "relative",
     display: "flex",
     alignItems: "center",
@@ -134,7 +133,7 @@ const F = (h, d) => {
     transition: `all ${P.fast}ms ${R.easeOut}`,
     cursor: u ? "not-allowed" : "text",
     boxShadow: B ? "var(--brycks-focus-ring)" : void 0
-  }, se = {
+  }, ie = {
     position: "absolute",
     left: p.padding,
     display: "flex",
@@ -202,7 +201,7 @@ const F = (h, d) => {
     fontSize: p.fontSize,
     fontWeight: e ? 600 : 400,
     color: e ? "var(--brycks-primary-default)" : "var(--brycks-foreground-default)",
-    backgroundColor: e ? "var(--brycks-primary-50)" : "transparent",
+    backgroundColor: e ? "var(--brycks-primary-muted)" : "transparent",
     borderRadius: "var(--brycks-radius-md)",
     cursor: "pointer",
     transition: `all ${P.fast}ms ${R.easeOut}`
@@ -215,8 +214,8 @@ const F = (h, d) => {
       style: oe,
       "data-testid": U,
       children: [
-        /* @__PURE__ */ f("div", { style: ie, onClick: () => !u && w(!0), children: [
-          /* @__PURE__ */ o("span", { style: se, children: /* @__PURE__ */ o(ye, {}) }),
+        /* @__PURE__ */ f("div", { style: se, onClick: () => !u && w(!0), children: [
+          /* @__PURE__ */ o("span", { style: ie, children: /* @__PURE__ */ o(ye, {}) }),
           /* @__PURE__ */ o(
             "input",
             {
@@ -226,7 +225,7 @@ const F = (h, d) => {
               type: "text",
               role: "combobox",
               "aria-label": K,
-              "aria-expanded": s,
+              "aria-expanded": i,
               "aria-haspopup": "dialog",
               "aria-invalid": W,
               value: G,
@@ -256,7 +255,7 @@ const F = (h, d) => {
             }
           )
         ] }),
-        s && pe(
+        i && pe(
           /* @__PURE__ */ f("div", { role: "dialog", "aria-label": "Select time", style: ce, children: [
             /* @__PURE__ */ f("div", { ref: O, style: E, children: [
               /* @__PURE__ */ o("div", { style: L, children: "Hour" }),

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../../src/components/form/TimePicker/TimePicker.tsx"],"sourcesContent":["/**\n * TimePicker Component\n *\n * A time selection component with hour, minute, and optional period (AM/PM).\n * Supports keyboard navigation and manual input.\n *\n * @module components/form/TimePicker\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX } from '../../../design-system/primitives'\n\nexport type TimePickerSize = 'sm' | 'md' | 'lg'\nexport type TimeFormat = '12h' | '24h'\n\nexport interface TimeValue {\n  /** Hours (0-23 for 24h, 1-12 for 12h) */\n  hours: number\n  /** Minutes (0-59) */\n  minutes: number\n  /** Period for 12h format */\n  period?: 'AM' | 'PM'\n}\n\nexport interface TimePickerProps {\n  /** Current time value */\n  value?: TimeValue | null\n  /** Default time value (uncontrolled) */\n  defaultValue?: TimeValue | null\n  /** Callback when time changes */\n  onChange?: (value: TimeValue | null) => void\n  /** Time format */\n  format?: TimeFormat\n  /** Component size */\n  size?: TimePickerSize\n  /** Minute step interval */\n  minuteStep?: number\n  /** Minimum selectable time */\n  minTime?: TimeValue\n  /** Maximum selectable time */\n  maxTime?: TimeValue\n  /** Placeholder text */\n  placeholder?: string\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Whether to allow clearing */\n  clearable?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<TimePickerSize, { height: number; fontSize: number; padding: number }> = {\n  sm: { height: componentHeights.sm, fontSize: fontSizes.base - 1, padding: componentPaddingX.sm },\n  md: { height: componentHeights.md, fontSize: fontSizes.base, padding: componentPaddingX.md },\n  lg: { height: componentHeights.lg, fontSize: fontSizes.md, padding: componentPaddingX.lg },\n}\n\nfunction ClockIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <path d=\"M8 4v4l2.5 2.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nconst formatTimeValue = (value: TimeValue | null, format: TimeFormat): string => {\n  if (!value) return ''\n\n  const { hours, minutes, period } = value\n\n  if (format === '12h') {\n    const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours\n    return `${displayHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${period || 'AM'}`\n  }\n\n  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`\n}\n\nconst parseTimeString = (str: string, format: TimeFormat): TimeValue | null => {\n  const cleanStr = str.trim().toUpperCase()\n\n  if (format === '12h') {\n    const match = cleanStr.match(/^(\\d{1,2}):(\\d{2})\\s*(AM|PM)?$/i)\n    if (!match) return null\n\n    let hours = parseInt(match[1], 10)\n    const minutes = parseInt(match[2], 10)\n    const period = (match[3]?.toUpperCase() as 'AM' | 'PM') || 'AM'\n\n    if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) return null\n\n    return { hours, minutes, period }\n  } else {\n    const match = cleanStr.match(/^(\\d{1,2}):(\\d{2})$/)\n    if (!match) return null\n\n    const hours = parseInt(match[1], 10)\n    const minutes = parseInt(match[2], 10)\n\n    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null\n\n    return { hours, minutes }\n  }\n}\n\nexport const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function TimePicker(\n  {\n    value: controlledValue,\n    defaultValue = null,\n    onChange,\n    format = '12h',\n    size = 'md',\n    minuteStep = 1,\n    minTime: _minTime,\n    maxTime: _maxTime,\n    placeholder,\n    disabled = false,\n    isInvalid = false,\n    clearable = true,\n    'aria-label': ariaLabel = 'Select time',\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState<TimeValue | null>(defaultValue)\n  const [inputValue, setInputValue] = useState('')\n  const [isOpen, setIsOpen] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const hoursRef = useRef<HTMLDivElement>(null)\n  const minutesRef = useRef<HTMLDivElement>(null)\n\n  const value = controlledValue !== undefined ? controlledValue : internalValue\n  const config = sizeConfig[size]\n\n  // Sync input value with controlled value\n  useEffect(() => {\n    if (!isOpen) {\n      setInputValue(formatTimeValue(value, format))\n    }\n  }, [value, format, isOpen])\n\n  const updateValue = useCallback(\n    (newValue: TimeValue | null) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newInputValue = e.target.value\n      setInputValue(newInputValue)\n\n      const parsed = parseTimeString(newInputValue, format)\n      if (parsed) {\n        updateValue(parsed)\n      }\n    },\n    [format, updateValue]\n  )\n\n  const handleInputBlur = useCallback(() => {\n    setIsFocused(false)\n    setInputValue(formatTimeValue(value, format))\n  }, [value, format])\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      updateValue(null)\n      setInputValue('')\n      inputRef.current?.focus()\n    },\n    [updateValue]\n  )\n\n  const selectTime = useCallback(\n    (hours: number, minutes: number, period?: 'AM' | 'PM') => {\n      const newValue: TimeValue = format === '12h'\n        ? { hours, minutes, period: period || value?.period || 'AM' }\n        : { hours, minutes }\n      updateValue(newValue)\n    },\n    [format, value, updateValue]\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'ArrowDown' && !isOpen) {\n        e.preventDefault()\n        setIsOpen(true)\n      } else if (e.key === 'Escape') {\n        setIsOpen(false)\n      }\n    },\n    [isOpen]\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      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  // Scroll to selected time when opening\n  useEffect(() => {\n    if (!isOpen || !value) return\n\n    setTimeout(() => {\n      const hourEl = hoursRef.current?.querySelector(`[data-value=\"${value.hours}\"]`)\n      const minuteEl = minutesRef.current?.querySelector(`[data-value=\"${value.minutes}\"]`)\n      hourEl?.scrollIntoView({ block: 'center' })\n      minuteEl?.scrollIntoView({ block: 'center' })\n    }, 0)\n  }, [isOpen, value])\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: Math.max(rect.width, 280),\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  // Generate hours list\n  const hours = format === '12h'\n    ? Array.from({ length: 12 }, (_, i) => i + 1)\n    : Array.from({ length: 24 }, (_, i) => i)\n\n  // Generate minutes list\n  const minutes = Array.from({ length: 60 / minuteStep }, (_, i) => i * minuteStep)\n\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'inline-flex',\n    width: '100%',\n  }\n\n  const inputWrapperStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    height: config.height,\n    backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n    border: `1px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-md)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    cursor: disabled ? 'not-allowed' : 'text',\n    boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n  }\n\n  const iconStyle: CSSProperties = {\n    position: 'absolute',\n    left: config.padding,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'var(--brycks-foreground-muted)',\n    pointerEvents: 'none',\n  }\n\n  const inputStyle: CSSProperties = {\n    flex: 1,\n    height: '100%',\n    padding: `0 ${config.padding}px`,\n    paddingLeft: spacing[10],\n    paddingRight: clearable && value ? spacing[10] : config.padding,\n    fontSize: config.fontSize,\n    color: disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    outline: 'none',\n    cursor: disabled ? 'not-allowed' : 'text',\n  }\n\n  const clearButtonStyle: CSSProperties = {\n    position: 'absolute',\n    right: config.padding,\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 dropdownStyle: CSSProperties = {\n    position: 'absolute',\n    top: dropdownPosition.top,\n    left: dropdownPosition.left,\n    width: dropdownPosition.width,\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[2],\n    display: 'flex',\n    gap: spacing[2],\n  }\n\n  const columnStyle: CSSProperties = {\n    flex: 1,\n    maxHeight: 200,\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n  }\n\n  const columnHeaderStyle: CSSProperties = {\n    padding: `${spacing[1]}px ${spacing[2]}px`,\n    fontSize: fontSizes.xs,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    textAlign: 'center',\n    position: 'sticky',\n    top: 0,\n    backgroundColor: 'var(--brycks-background-elevated)',\n  }\n\n  const optionStyle = (isSelected: boolean): CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: `${spacing[2]}px ${spacing[3]}px`,\n    fontSize: config.fontSize,\n    fontWeight: isSelected ? 600 : 400,\n    color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-default)',\n    backgroundColor: isSelected ? 'var(--brycks-primary-50)' : 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: 'pointer',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n  })\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx('brycks-timepicker', `brycks-timepicker--${size}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div style={inputWrapperStyle} onClick={() => !disabled && setIsOpen(true)}>\n        <span style={iconStyle}>\n          <ClockIcon />\n        </span>\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"text\"\n          role=\"combobox\"\n          aria-label={ariaLabel}\n          aria-expanded={isOpen}\n          aria-haspopup=\"dialog\"\n          aria-invalid={isInvalid}\n          value={inputValue}\n          placeholder={placeholder || (format === '12h' ? 'HH:MM AM/PM' : 'HH:MM')}\n          disabled={disabled}\n          style={inputStyle}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => setIsFocused(true)}\n          onBlur={handleInputBlur}\n        />\n        {clearable && value && !disabled && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear time\"\n            style={clearButtonStyle}\n            onClick={handleClear}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n              e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'transparent'\n              e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n            }}\n          >\n            <ClearIcon />\n          </button>\n        )}\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <div role=\"dialog\" aria-label=\"Select time\" style={dropdownStyle}>\n            <div ref={hoursRef} style={columnStyle}>\n              <div style={columnHeaderStyle}>Hour</div>\n              {hours.map((hour) => (\n                <div\n                  key={hour}\n                  data-value={hour}\n                  style={optionStyle(value?.hours === hour)}\n                  onClick={() => selectTime(hour, value?.minutes ?? 0, value?.period)}\n                  onMouseEnter={(e) => {\n                    if (value?.hours !== hour) {\n                      e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    if (value?.hours !== hour) {\n                      e.currentTarget.style.backgroundColor = 'transparent'\n                    }\n                  }}\n                >\n                  {hour.toString().padStart(2, '0')}\n                </div>\n              ))}\n            </div>\n\n            <div ref={minutesRef} style={columnStyle}>\n              <div style={columnHeaderStyle}>Min</div>\n              {minutes.map((minute) => (\n                <div\n                  key={minute}\n                  data-value={minute}\n                  style={optionStyle(value?.minutes === minute)}\n                  onClick={() => selectTime(value?.hours ?? (format === '12h' ? 12 : 0), minute, value?.period)}\n                  onMouseEnter={(e) => {\n                    if (value?.minutes !== minute) {\n                      e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    if (value?.minutes !== minute) {\n                      e.currentTarget.style.backgroundColor = 'transparent'\n                    }\n                  }}\n                >\n                  {minute.toString().padStart(2, '0')}\n                </div>\n              ))}\n            </div>\n\n            {format === '12h' && (\n              <div style={{ ...columnStyle, flex: 0.6 }}>\n                <div style={columnHeaderStyle}>Period</div>\n                {(['AM', 'PM'] as const).map((period) => (\n                  <div\n                    key={period}\n                    style={optionStyle(value?.period === period)}\n                    onClick={() => selectTime(value?.hours ?? 12, value?.minutes ?? 0, period)}\n                    onMouseEnter={(e) => {\n                      if (value?.period !== period) {\n                        e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                      }\n                    }}\n                    onMouseLeave={(e) => {\n                      if (value?.period !== period) {\n                        e.currentTarget.style.backgroundColor = 'transparent'\n                      }\n                    }}\n                  >\n                    {period}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nTimePicker.displayName = 'TimePicker'\n"],"names":["sizeConfig","componentHeights","fontSizes","componentPaddingX","ClockIcon","jsxs","jsx","ClearIcon","formatTimeValue","value","format","hours","minutes","period","parseTimeString","str","cleanStr","match","TimePicker","forwardRef","controlledValue","defaultValue","onChange","size","minuteStep","_minTime","_maxTime","placeholder","disabled","isInvalid","clearable","ariaLabel","className","testId","ref","internalValue","setInternalValue","useState","inputValue","setInputValue","isOpen","setIsOpen","isFocused","setIsFocused","containerRef","useRef","inputRef","hoursRef","minutesRef","config","useEffect","updateValue","useCallback","newValue","handleInputChange","newInputValue","parsed","handleInputBlur","handleClear","selectTime","handleKeyDown","handleClick","e","hourEl","minuteEl","dropdownPosition","setDropdownPosition","updatePosition","rect","spacing","_","i","containerStyle","inputWrapperStyle","durations","easings","iconStyle","inputStyle","clearButtonStyle","dropdownStyle","columnStyle","columnHeaderStyle","optionStyle","isSelected","cx","node","createPortal","hour","minute"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../../../../src/components/form/TimePicker/TimePicker.tsx"],"sourcesContent":["/**\n * TimePicker Component\n *\n * A time selection component with hour, minute, and optional period (AM/PM).\n * Supports keyboard navigation and manual input.\n *\n * @module components/form/TimePicker\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ChangeEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX } from '../../../design-system/primitives'\n\nexport type TimePickerSize = 'sm' | 'md' | 'lg'\nexport type TimeFormat = '12h' | '24h'\n\nexport interface TimeValue {\n  /** Hours (0-23 for 24h, 1-12 for 12h) */\n  hours: number\n  /** Minutes (0-59) */\n  minutes: number\n  /** Period for 12h format */\n  period?: 'AM' | 'PM'\n}\n\nexport interface TimePickerProps {\n  /** Current time value */\n  value?: TimeValue | null\n  /** Default time value (uncontrolled) */\n  defaultValue?: TimeValue | null\n  /** Callback when time changes */\n  onChange?: (value: TimeValue | null) => void\n  /** Time format */\n  format?: TimeFormat\n  /** Component size */\n  size?: TimePickerSize\n  /** Minute step interval */\n  minuteStep?: number\n  /** Minimum selectable time */\n  minTime?: TimeValue\n  /** Maximum selectable time */\n  maxTime?: TimeValue\n  /** Placeholder text */\n  placeholder?: string\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Whether to allow clearing */\n  clearable?: boolean\n  /** Label for accessibility */\n  'aria-label'?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<TimePickerSize, { height: number; fontSize: number; padding: number }> = {\n  sm: { height: componentHeights.sm, fontSize: fontSizes.base - 1, padding: componentPaddingX.sm },\n  md: { height: componentHeights.md, fontSize: fontSizes.base, padding: componentPaddingX.md },\n  lg: { height: componentHeights.lg, fontSize: fontSizes.md, padding: componentPaddingX.lg },\n}\n\nfunction ClockIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <path d=\"M8 4v4l2.5 2.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nconst formatTimeValue = (value: TimeValue | null, format: TimeFormat): string => {\n  if (!value) return ''\n\n  const { hours, minutes, period } = value\n\n  if (format === '12h') {\n    const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours\n    return `${displayHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${period || 'AM'}`\n  }\n\n  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`\n}\n\nconst parseTimeString = (str: string, format: TimeFormat): TimeValue | null => {\n  const cleanStr = str.trim().toUpperCase()\n\n  if (format === '12h') {\n    const match = cleanStr.match(/^(\\d{1,2}):(\\d{2})\\s*(AM|PM)?$/i)\n    if (!match) return null\n\n    const hours = parseInt(match[1], 10)\n    const minutes = parseInt(match[2], 10)\n    const period = (match[3]?.toUpperCase() as 'AM' | 'PM') || 'AM'\n\n    if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) return null\n\n    return { hours, minutes, period }\n  } else {\n    const match = cleanStr.match(/^(\\d{1,2}):(\\d{2})$/)\n    if (!match) return null\n\n    const hours = parseInt(match[1], 10)\n    const minutes = parseInt(match[2], 10)\n\n    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null\n\n    return { hours, minutes }\n  }\n}\n\nexport const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function TimePicker(\n  {\n    value: controlledValue,\n    defaultValue = null,\n    onChange,\n    format = '12h',\n    size = 'md',\n    minuteStep = 1,\n    minTime: _minTime,\n    maxTime: _maxTime,\n    placeholder,\n    disabled = false,\n    isInvalid = false,\n    clearable = true,\n    'aria-label': ariaLabel = 'Select time',\n    className,\n    testId,\n  },\n  ref\n) {\n  const [internalValue, setInternalValue] = useState<TimeValue | null>(defaultValue)\n  const [inputValue, setInputValue] = useState('')\n  const [isOpen, setIsOpen] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const hoursRef = useRef<HTMLDivElement>(null)\n  const minutesRef = useRef<HTMLDivElement>(null)\n\n  const value = controlledValue !== undefined ? controlledValue : internalValue\n  const config = sizeConfig[size]\n\n  // Sync input value with controlled value\n  useEffect(() => {\n    if (!isOpen) {\n      setInputValue(formatTimeValue(value, format))\n    }\n  }, [value, format, isOpen])\n\n  const updateValue = useCallback(\n    (newValue: TimeValue | null) => {\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n      onChange?.(newValue)\n    },\n    [controlledValue, onChange]\n  )\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newInputValue = e.target.value\n      setInputValue(newInputValue)\n\n      const parsed = parseTimeString(newInputValue, format)\n      if (parsed) {\n        updateValue(parsed)\n      }\n    },\n    [format, updateValue]\n  )\n\n  const handleInputBlur = useCallback(() => {\n    setIsFocused(false)\n    setInputValue(formatTimeValue(value, format))\n  }, [value, format])\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      updateValue(null)\n      setInputValue('')\n      inputRef.current?.focus()\n    },\n    [updateValue]\n  )\n\n  const selectTime = useCallback(\n    (hours: number, minutes: number, period?: 'AM' | 'PM') => {\n      const newValue: TimeValue = format === '12h'\n        ? { hours, minutes, period: period || value?.period || 'AM' }\n        : { hours, minutes }\n      updateValue(newValue)\n    },\n    [format, value, updateValue]\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'ArrowDown' && !isOpen) {\n        e.preventDefault()\n        setIsOpen(true)\n      } else if (e.key === 'Escape') {\n        setIsOpen(false)\n      }\n    },\n    [isOpen]\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      }\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen])\n\n  // Scroll to selected time when opening\n  useEffect(() => {\n    if (!isOpen || !value) return\n\n    setTimeout(() => {\n      const hourEl = hoursRef.current?.querySelector(`[data-value=\"${value.hours}\"]`)\n      const minuteEl = minutesRef.current?.querySelector(`[data-value=\"${value.minutes}\"]`)\n      hourEl?.scrollIntoView({ block: 'center' })\n      minuteEl?.scrollIntoView({ block: 'center' })\n    }, 0)\n  }, [isOpen, value])\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: Math.max(rect.width, 280),\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  // Generate hours list\n  const hours = format === '12h'\n    ? Array.from({ length: 12 }, (_, i) => i + 1)\n    : Array.from({ length: 24 }, (_, i) => i)\n\n  // Generate minutes list\n  const minutes = Array.from({ length: 60 / minuteStep }, (_, i) => i * minuteStep)\n\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    display: 'inline-flex',\n    width: '100%',\n  }\n\n  const inputWrapperStyle: CSSProperties = {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    height: config.height,\n    backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n    border: `1px solid ${\n      isInvalid\n        ? 'var(--brycks-error-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-md)',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n    cursor: disabled ? 'not-allowed' : 'text',\n    boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n  }\n\n  const iconStyle: CSSProperties = {\n    position: 'absolute',\n    left: config.padding,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'var(--brycks-foreground-muted)',\n    pointerEvents: 'none',\n  }\n\n  const inputStyle: CSSProperties = {\n    flex: 1,\n    height: '100%',\n    padding: `0 ${config.padding}px`,\n    paddingLeft: spacing[10],\n    paddingRight: clearable && value ? spacing[10] : config.padding,\n    fontSize: config.fontSize,\n    color: disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    border: 'none',\n    outline: 'none',\n    cursor: disabled ? 'not-allowed' : 'text',\n  }\n\n  const clearButtonStyle: CSSProperties = {\n    position: 'absolute',\n    right: config.padding,\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 dropdownStyle: CSSProperties = {\n    position: 'absolute',\n    top: dropdownPosition.top,\n    left: dropdownPosition.left,\n    width: dropdownPosition.width,\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[2],\n    display: 'flex',\n    gap: spacing[2],\n  }\n\n  const columnStyle: CSSProperties = {\n    flex: 1,\n    maxHeight: 200,\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n  }\n\n  const columnHeaderStyle: CSSProperties = {\n    padding: `${spacing[1]}px ${spacing[2]}px`,\n    fontSize: fontSizes.xs,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    textAlign: 'center',\n    position: 'sticky',\n    top: 0,\n    backgroundColor: 'var(--brycks-background-elevated)',\n  }\n\n  const optionStyle = (isSelected: boolean): CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: `${spacing[2]}px ${spacing[3]}px`,\n    fontSize: config.fontSize,\n    fontWeight: isSelected ? 600 : 400,\n    color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-default)',\n    backgroundColor: isSelected ? 'var(--brycks-primary-muted)' : 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: 'pointer',\n    transition: `all ${durations.fast}ms ${easings.easeOut}`,\n  })\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx('brycks-timepicker', `brycks-timepicker--${size}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n    >\n      <div style={inputWrapperStyle} onClick={() => !disabled && setIsOpen(true)}>\n        <span style={iconStyle}>\n          <ClockIcon />\n        </span>\n        <input\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) ref.current = node\n          }}\n          type=\"text\"\n          role=\"combobox\"\n          aria-label={ariaLabel}\n          aria-expanded={isOpen}\n          aria-haspopup=\"dialog\"\n          aria-invalid={isInvalid}\n          value={inputValue}\n          placeholder={placeholder || (format === '12h' ? 'HH:MM AM/PM' : 'HH:MM')}\n          disabled={disabled}\n          style={inputStyle}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => setIsFocused(true)}\n          onBlur={handleInputBlur}\n        />\n        {clearable && value && !disabled && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear time\"\n            style={clearButtonStyle}\n            onClick={handleClear}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n              e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'transparent'\n              e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n            }}\n          >\n            <ClearIcon />\n          </button>\n        )}\n      </div>\n\n      {isOpen &&\n        createPortal(\n          <div role=\"dialog\" aria-label=\"Select time\" style={dropdownStyle}>\n            <div ref={hoursRef} style={columnStyle}>\n              <div style={columnHeaderStyle}>Hour</div>\n              {hours.map((hour) => (\n                <div\n                  key={hour}\n                  data-value={hour}\n                  style={optionStyle(value?.hours === hour)}\n                  onClick={() => selectTime(hour, value?.minutes ?? 0, value?.period)}\n                  onMouseEnter={(e) => {\n                    if (value?.hours !== hour) {\n                      e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    if (value?.hours !== hour) {\n                      e.currentTarget.style.backgroundColor = 'transparent'\n                    }\n                  }}\n                >\n                  {hour.toString().padStart(2, '0')}\n                </div>\n              ))}\n            </div>\n\n            <div ref={minutesRef} style={columnStyle}>\n              <div style={columnHeaderStyle}>Min</div>\n              {minutes.map((minute) => (\n                <div\n                  key={minute}\n                  data-value={minute}\n                  style={optionStyle(value?.minutes === minute)}\n                  onClick={() => selectTime(value?.hours ?? (format === '12h' ? 12 : 0), minute, value?.period)}\n                  onMouseEnter={(e) => {\n                    if (value?.minutes !== minute) {\n                      e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    if (value?.minutes !== minute) {\n                      e.currentTarget.style.backgroundColor = 'transparent'\n                    }\n                  }}\n                >\n                  {minute.toString().padStart(2, '0')}\n                </div>\n              ))}\n            </div>\n\n            {format === '12h' && (\n              <div style={{ ...columnStyle, flex: 0.6 }}>\n                <div style={columnHeaderStyle}>Period</div>\n                {(['AM', 'PM'] as const).map((period) => (\n                  <div\n                    key={period}\n                    style={optionStyle(value?.period === period)}\n                    onClick={() => selectTime(value?.hours ?? 12, value?.minutes ?? 0, period)}\n                    onMouseEnter={(e) => {\n                      if (value?.period !== period) {\n                        e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                      }\n                    }}\n                    onMouseLeave={(e) => {\n                      if (value?.period !== period) {\n                        e.currentTarget.style.backgroundColor = 'transparent'\n                      }\n                    }}\n                  >\n                    {period}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>,\n          document.body\n        )}\n    </div>\n  )\n})\n\nTimePicker.displayName = 'TimePicker'\n"],"names":["sizeConfig","componentHeights","fontSizes","componentPaddingX","ClockIcon","jsxs","jsx","ClearIcon","formatTimeValue","value","format","hours","minutes","period","parseTimeString","str","cleanStr","match","TimePicker","forwardRef","controlledValue","defaultValue","onChange","size","minuteStep","_minTime","_maxTime","placeholder","disabled","isInvalid","clearable","ariaLabel","className","testId","ref","internalValue","setInternalValue","useState","inputValue","setInputValue","isOpen","setIsOpen","isFocused","setIsFocused","containerRef","useRef","inputRef","hoursRef","minutesRef","config","useEffect","updateValue","useCallback","newValue","handleInputChange","newInputValue","parsed","handleInputBlur","handleClear","selectTime","handleKeyDown","handleClick","e","hourEl","minuteEl","dropdownPosition","setDropdownPosition","updatePosition","rect","spacing","_","i","containerStyle","inputWrapperStyle","durations","easings","iconStyle","inputStyle","clearButtonStyle","dropdownStyle","columnStyle","columnHeaderStyle","optionStyle","isSelected","cx","node","createPortal","hour","minute"],"mappings":"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"}

package/dist/components/form.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./form/Input/Input.cjs"),t=require("./form/TextField/TextField.cjs"),i=require("./form/Select/Select.cjs"),o=require("./form/Checkbox/Checkbox.cjs"),u=require("./form/Switch/Switch.cjs"),c=require("./form/Textarea/Textarea.cjs"),e=require("./form/Radio/Radio.cjs"),n=require("./form/Slider/Slider.cjs"),a=require("./form/DateInput/DateInput.cjs"),l=require("./form/FileInput/FileInput.cjs"),F=require("./form/FormField/FormField.cjs"),s=require("./form/FieldError/FieldError.cjs"),q=require("./form/Form/Form.cjs"),d=require("./form/FormLabel/FormLabel.cjs"),m=require("./form/FormGroup/FormGroup.cjs"),p=require("./form/Combobox/Combobox.cjs"),b=require("./form/Rating/Rating.cjs"),S=require("./form/TagInput/TagInput.cjs"),T=require("./form/MultiSelect/MultiSelect.cjs"),x=require("./form/TimePicker/TimePicker.cjs"),I=require("./form/DateRangePicker/DateRangePicker.cjs");exports.Input=r.Input;exports.TextField=t.TextField;exports.Select=i.Select;exports.Checkbox=o.Checkbox;exports.Switch=u.Switch;exports.Textarea=c.Textarea;exports.Radio=e.Radio;exports.RadioGroup=e.RadioGroup;exports.Slider=n.Slider;exports.DateInput=a.DateInput;exports.FileInput=l.FileInput;exports.FormField=F.FormField;exports.FieldError=s.FieldError;exports.Form=q.Form;exports.FormLabel=d.FormLabel;exports.FormGroup=m.FormGroup;exports.Combobox=p.Combobox;exports.Rating=b.Rating;exports.TagInput=S.TagInput;exports.MultiSelect=T.MultiSelect;exports.TimePicker=x.TimePicker;exports.DateRangePicker=I.DateRangePicker;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./form/Input/Input.cjs"),t=require("./form/TextField/TextField.cjs"),i=require("./form/Select/Select.cjs"),o=require("./form/Checkbox/Checkbox.cjs"),u=require("./form/Switch/Switch.cjs"),c=require("./form/Textarea/Textarea.cjs"),e=require("./form/Radio/Radio.cjs"),n=require("./form/Slider/Slider.cjs"),a=require("./form/DateInput/DateInput.cjs"),l=require("./form/FileInput/FileInput.cjs"),s=require("./form/FormField/FormField.cjs"),F=require("./form/FieldError/FieldError.cjs"),q=require("./form/Form/Form.cjs"),p=require("./form/FormLabel/FormLabel.cjs"),d=require("./form/FormGroup/FormGroup.cjs"),m=require("./form/Combobox/Combobox.cjs"),S=require("./form/Rating/Rating.cjs"),I=require("./form/TagInput/TagInput.cjs"),b=require("./form/MultiSelect/MultiSelect.cjs"),T=require("./form/TimePicker/TimePicker.cjs"),x=require("./form/DateRangePicker/DateRangePicker.cjs"),g=require("./form/SearchInput/SearchInput.cjs");exports.Input=r.Input;exports.TextField=t.TextField;exports.Select=i.Select;exports.Checkbox=o.Checkbox;exports.Switch=u.Switch;exports.Textarea=c.Textarea;exports.Radio=e.Radio;exports.RadioGroup=e.RadioGroup;exports.Slider=n.Slider;exports.DateInput=a.DateInput;exports.FileInput=l.FileInput;exports.FormField=s.FormField;exports.FieldError=F.FieldError;exports.Form=q.Form;exports.FormLabel=p.FormLabel;exports.FormGroup=d.FormGroup;exports.Combobox=m.Combobox;exports.Rating=S.Rating;exports.TagInput=I.TagInput;exports.MultiSelect=b.MultiSelect;exports.TimePicker=T.TimePicker;exports.DateRangePicker=x.DateRangePicker;exports.SearchInput=g.SearchInput;
 //# sourceMappingURL=form.cjs.map

package/dist/components/form.js

@@ -1,14 +1,14 @@
 import { Input as e } from "./form/Input/Input.js";
-import { TextField as m } from "./form/TextField/TextField.js";
+import { TextField as p } from "./form/TextField/TextField.js";
 import { Select as x } from "./form/Select/Select.js";
 import { Checkbox as i } from "./form/Checkbox/Checkbox.js";
 import { Switch as l } from "./form/Switch/Switch.js";
-import { Textarea as u } from "./form/Textarea/Textarea.js";
-import { Radio as d, RadioGroup as n } from "./form/Radio/Radio.js";
-import { Slider as I } from "./form/Slider/Slider.js";
-import { DateInput as S } from "./form/DateInput/DateInput.js";
+import { Textarea as F } from "./form/Textarea/Textarea.js";
+import { Radio as n, RadioGroup as d } from "./form/Radio/Radio.js";
+import { Slider as S } from "./form/Slider/Slider.js";
+import { DateInput as R } from "./form/DateInput/DateInput.js";
 import { FileInput as g } from "./form/FileInput/FileInput.js";
-import { FormField as h } from "./form/FormField/FormField.js";
+import { FormField as k } from "./form/FormField/FormField.js";
 import { FieldError as D } from "./form/FieldError/FieldError.js";
 import { Form as P } from "./form/Form/Form.js";
 import { FormLabel as E } from "./form/FormLabel/FormLabel.js";
@@ -19,28 +19,30 @@ import { TagInput as z } from "./form/TagInput/TagInput.js";
 import { MultiSelect as B } from "./form/MultiSelect/MultiSelect.js";
 import { TimePicker as J } from "./form/TimePicker/TimePicker.js";
 import { DateRangePicker as N } from "./form/DateRangePicker/DateRangePicker.js";
+import { SearchInput as Q } from "./form/SearchInput/SearchInput.js";
 export {
   i as Checkbox,
   q as Combobox,
-  S as DateInput,
+  R as DateInput,
   N as DateRangePicker,
   D as FieldError,
   g as FileInput,
   P as Form,
-  h as FormField,
+  k as FormField,
   M as FormGroup,
   E as FormLabel,
   e as Input,
   B as MultiSelect,
-  d as Radio,
-  n as RadioGroup,
+  n as Radio,
+  d as RadioGroup,
   v as Rating,
+  Q as SearchInput,
   x as Select,
-  I as Slider,
+  S as Slider,
   l as Switch,
   z as TagInput,
-  m as TextField,
-  u as Textarea,
+  p as TextField,
+  F as Textarea,
   J as TimePicker
 };
 //# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/layout/Card/Card.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react"),i=require("../../../utils/styles.cjs"),f=o.forwardRef(function({variant:r="elevated",padding:e="md",interactive:a=!1,selected:d=!1,className:c,style:s,children:y,testId:b,..._},k){return t.jsx("div",{ref:k,className:i.cx("brycks-card",`brycks-card--${r}`,`brycks-card--padding-${e}`,a&&"brycks-card--interactive",d&&"brycks-card--selected",c),style:s,"data-testid":b,..._,children:y})});f.displayName="Card";const l=o.forwardRef(function({divider:r=!1,className:e,style:a,children:d,...c},s){return t.jsx("div",{ref:s,className:i.cx("brycks-card__header",r&&"brycks-card__header--divider",e),style:a,...c,children:d})});l.displayName="CardHeader";const C=o.forwardRef(function({className:r,style:e,children:a,...d},c){return t.jsx("div",{ref:c,className:i.cx("brycks-card__body",r),style:e,...d,children:a})});C.displayName="CardBody";const u=o.forwardRef(function({divider:r=!1,align:e="right",className:a,style:d,children:c,...s},y){return t.jsx("div",{ref:y,className:i.cx("brycks-card__footer",r&&"brycks-card__footer--divider",`brycks-card__footer--${e}`,a),style:d,...s,children:c})});u.displayName="CardFooter";exports.Card=f;exports.CardBody=C;exports.CardFooter=u;exports.CardHeader=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),i=require("../../../utils/styles.cjs"),f=t.forwardRef(function({variant:r="outline",padding:a="md",interactive:e=!1,selected:d=!1,className:c,style:s,children:y,testId:b,..._},k){return o.jsx("div",{ref:k,className:i.cx("brycks-card",`brycks-card--${r}`,`brycks-card--padding-${a}`,e&&"brycks-card--interactive",d&&"brycks-card--selected",c),style:s,"data-testid":b,..._,children:y})});f.displayName="Card";const l=t.forwardRef(function({divider:r=!1,className:a,style:e,children:d,...c},s){return o.jsx("div",{ref:s,className:i.cx("brycks-card__header",r&&"brycks-card__header--divider",a),style:e,...c,children:d})});l.displayName="CardHeader";const u=t.forwardRef(function({className:r,style:a,children:e,...d},c){return o.jsx("div",{ref:c,className:i.cx("brycks-card__body",r),style:a,...d,children:e})});u.displayName="CardBody";const C=t.forwardRef(function({divider:r=!1,align:a="right",className:e,style:d,children:c,...s},y){return o.jsx("div",{ref:y,className:i.cx("brycks-card__footer",r&&"brycks-card__footer--divider",`brycks-card__footer--${a}`,e),style:d,...s,children:c})});C.displayName="CardFooter";exports.Card=f;exports.CardBody=u;exports.CardFooter=C;exports.CardHeader=l;
 //# sourceMappingURL=Card.cjs.map

package/dist/components/layout/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":["/**\n * Card Component\n *\n * A flexible card container with optional header, footer, and body sections.\n * Supports different variants and padding sizes.\n *\n * All color styles are handled via CSS classes for easy customization.\n */\n\nimport { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost'\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card variant */\n  variant?: CardVariant\n  /** Card padding */\n  padding?: CardPadding\n  /** Whether the card is interactive (adds hover effect) */\n  interactive?: boolean\n  /** Whether the card is selected */\n  selected?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider below the header */\n  divider?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider above the footer */\n  divider?: boolean\n  /** Footer alignment */\n  align?: 'left' | 'center' | 'right' | 'between'\n  /** Custom class name */\n  className?: string\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    variant = 'elevated',\n    padding = 'md',\n    interactive = false,\n    selected = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card',\n        `brycks-card--${variant}`,\n        `brycks-card--padding-${padding}`,\n        interactive && 'brycks-card--interactive',\n        selected && 'brycks-card--selected',\n        className\n      )}\n      style={style}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCard.displayName = 'Card'\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { divider = false, className, style, children, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-card__header', divider && 'brycks-card__header--divider', className)}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCardHeader.displayName = 'CardHeader'\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(\n  { className, style, children, ...props },\n  ref\n) {\n  return (\n    <div ref={ref} className={cx('brycks-card__body', className)} style={style} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardBody.displayName = 'CardBody'\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { divider = false, align = 'right', className, style, children, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card__footer',\n        divider && 'brycks-card__footer--divider',\n        `brycks-card__footer--${align}`,\n        className\n      )}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCardFooter.displayName = 'CardFooter'\n"],"names":["Card","forwardRef","variant","padding","interactive","selected","className","style","children","testId","props","ref","jsx","cx","CardHeader","divider","CardBody","CardFooter","align"],"mappings":"+KAmDaA,EAAOC,EAAAA,WAAsC,SACxD,CACE,QAAAC,EAAU,WACV,QAAAC,EAAU,KACV,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,cACA,gBAAgBX,CAAO,GACvB,wBAAwBC,CAAO,GAC/BC,GAAe,2BACfC,GAAY,wBACZC,CAAA,EAEF,MAAAC,EACA,cAAaE,EACZ,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDR,EAAK,YAAc,OAEZ,MAAMc,EAAab,EAAAA,WAA4C,SACpE,CAAE,QAAAc,EAAU,GAAO,UAAAT,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EAClDC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,sBAAuBE,GAAW,+BAAgCT,CAAS,EACzF,MAAAC,EACC,GAAGG,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDM,EAAW,YAAc,aAElB,MAAME,EAAWf,EAAAA,WAA0C,SAChE,CAAE,UAAAK,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACjCC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CAAI,IAAAD,EAAU,UAAWE,EAAAA,GAAG,oBAAqBP,CAAS,EAAG,MAAAC,EAAe,GAAGG,EAC7E,SAAAF,CAAA,CACH,CAEJ,CAAC,EAEDQ,EAAS,YAAc,WAEhB,MAAMC,EAAahB,EAAAA,WAA4C,SACpE,CAAE,QAAAc,EAAU,GAAO,MAAAG,EAAQ,QAAS,UAAAZ,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACnEC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,sBACAE,GAAW,+BACX,wBAAwBG,CAAK,GAC7BZ,CAAA,EAEF,MAAAC,EACC,GAAGG,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDS,EAAW,YAAc"}
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":["/**\n * Card Component\n *\n * A flexible card container with optional header, footer, and body sections.\n * Supports different variants and padding sizes.\n *\n * All color styles are handled via CSS classes for easy customization.\n */\n\nimport { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost'\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card variant */\n  variant?: CardVariant\n  /** Card padding */\n  padding?: CardPadding\n  /** Whether the card is interactive (adds hover effect) */\n  interactive?: boolean\n  /** Whether the card is selected */\n  selected?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider below the header */\n  divider?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a divider above the footer */\n  divider?: boolean\n  /** Footer alignment */\n  align?: 'left' | 'center' | 'right' | 'between'\n  /** Custom class name */\n  className?: string\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    // Flat-by-default: a 1px border conveys depth. Opt into shadow with\n    // `variant=\"elevated\"`.\n    variant = 'outline',\n    padding = 'md',\n    interactive = false,\n    selected = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card',\n        `brycks-card--${variant}`,\n        `brycks-card--padding-${padding}`,\n        interactive && 'brycks-card--interactive',\n        selected && 'brycks-card--selected',\n        className\n      )}\n      style={style}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCard.displayName = 'Card'\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { divider = false, className, style, children, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-card__header', divider && 'brycks-card__header--divider', className)}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCardHeader.displayName = 'CardHeader'\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(\n  { className, style, children, ...props },\n  ref\n) {\n  return (\n    <div ref={ref} className={cx('brycks-card__body', className)} style={style} {...props}>\n      {children}\n    </div>\n  )\n})\n\nCardBody.displayName = 'CardBody'\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { divider = false, align = 'right', className, style, children, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        'brycks-card__footer',\n        divider && 'brycks-card__footer--divider',\n        `brycks-card__footer--${align}`,\n        className\n      )}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nCardFooter.displayName = 'CardFooter'\n"],"names":["Card","forwardRef","variant","padding","interactive","selected","className","style","children","testId","props","ref","jsx","cx","CardHeader","divider","CardBody","CardFooter","align"],"mappings":"+KAmDaA,EAAOC,EAAAA,WAAsC,SACxD,CAGE,QAAAC,EAAU,UACV,QAAAC,EAAU,KACV,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,cACA,gBAAgBX,CAAO,GACvB,wBAAwBC,CAAO,GAC/BC,GAAe,2BACfC,GAAY,wBACZC,CAAA,EAEF,MAAAC,EACA,cAAaE,EACZ,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDR,EAAK,YAAc,OAEZ,MAAMc,EAAab,EAAAA,WAA4C,SACpE,CAAE,QAAAc,EAAU,GAAO,UAAAT,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EAClDC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,sBAAuBE,GAAW,+BAAgCT,CAAS,EACzF,MAAAC,EACC,GAAGG,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDM,EAAW,YAAc,aAElB,MAAME,EAAWf,EAAAA,WAA0C,SAChE,CAAE,UAAAK,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACjCC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CAAI,IAAAD,EAAU,UAAWE,EAAAA,GAAG,oBAAqBP,CAAS,EAAG,MAAAC,EAAe,GAAGG,EAC7E,SAAAF,CAAA,CACH,CAEJ,CAAC,EAEDQ,EAAS,YAAc,WAEhB,MAAMC,EAAahB,EAAAA,WAA4C,SACpE,CAAE,QAAAc,EAAU,GAAO,MAAAG,EAAQ,QAAS,UAAAZ,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGE,CAAA,EACnEC,EACA,CACA,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,sBACAE,GAAW,+BACX,wBAAwBG,CAAK,GAC7BZ,CAAA,EAEF,MAAAC,EACC,GAAGG,EAEH,SAAAF,CAAA,CAAA,CAGP,CAAC,EAEDS,EAAW,YAAc"}

package/dist/components/layout/Card/Card.js

@@ -2,13 +2,15 @@ import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
 import { cx as i } from "../../../utils/styles.js";
 const b = t(function({
-  variant: r = "elevated",
+  // Flat-by-default: a 1px border conveys depth. Opt into shadow with
+  // `variant="elevated"`.
+  variant: r = "outline",
   padding: a = "md",
   interactive: d = !1,
   selected: e = !1,
   className: c,
   style: s,
-  children: n,
+  children: y,
   testId: f,
   ...m
 }, l) {
@@ -27,7 +29,7 @@ const b = t(function({
       style: s,
       "data-testid": f,
       ...m,
-      children: n
+      children: y
     }
   );
 });
@@ -49,11 +51,11 @@ const _ = t(function({ className: r, style: a, children: d, ...e }, c) {
   return /* @__PURE__ */ o("div", { ref: c, className: i("brycks-card__body", r), style: a, ...e, children: d });
 });
 _.displayName = "CardBody";
-const k = t(function({ divider: r = !1, align: a = "right", className: d, style: e, children: c, ...s }, n) {
+const k = t(function({ divider: r = !1, align: a = "right", className: d, style: e, children: c, ...s }, y) {
   return /* @__PURE__ */ o(
     "div",
     {
-      ref: n,
+      ref: y,
       className: i(
         "brycks-card__footer",
         r && "brycks-card__footer--divider",