@spear-ai/spectral 1.22.4 → 1.22.6

package/dist/DateTimePicker/DateTimeDisplayInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeDisplayInput.js","names":[],"sources":["../../src/components/DateTimePicker/DateTimeDisplayInput.tsx"],"sourcesContent":["import { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { getInputClasses } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { forwardRef, useCallback, useEffect, useId, useMemo, useRef, type ComponentProps, type KeyboardEvent, type ReactNode } from 'react'\nimport { formatSelectPeriodLabel, getLocalizedPeriodLabels, getResolvedLocale, type HourFormat, type PeriodLabels } from './DateTimeUtils'\n\nexport interface DateTimeDisplayInputProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {\n  defaultValue?: Date\n  disabled?: boolean\n  endIcon?: ReactNode\n  hideTime?: boolean\n  hourFormat?: HourFormat\n  label?: string\n  locale?: string\n  onChange?: (date: Date | undefined) => void\n  state?: 'default' | 'disabled' | 'error' | 'warning'\n  value?: Date\n  // Legacy prop names for backward compatibility\n  /** @deprecated Use `value` instead */\n  date?: Date\n  /** @deprecated Use `onChange` instead */\n  onDateChange?: (date: Date | undefined) => void\n}\n\ninterface SegmentConfig {\n  length: number\n  max: number\n  min: number\n  type: 'month' | 'day' | 'year' | 'hour' | 'minute' | 'period'\n}\n\nconst SEGMENT_CONFIGS: Record<string, SegmentConfig> = {\n  month: { type: 'month', min: 1, max: 12, length: 2 },\n  day: { type: 'day', min: 1, max: 31, length: 2 },\n  year: { type: 'year', min: 1900, max: 2100, length: 4 },\n  hour12: { type: 'hour', min: 1, max: 12, length: 2 },\n  hour24: { type: 'hour', min: 0, max: 23, length: 2 },\n  minute: { type: 'minute', min: 0, max: 59, length: 2 },\n  period: { type: 'period', min: 0, max: 1, length: 2 },\n}\n\n/**\n * Get max days for a given month/year\n */\nconst getMaxDaysInMonth = (month: number, year: number): number => {\n  if (month === 2) {\n    const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0\n    return isLeapYear ? 29 : 28\n  }\n  if ([4, 6, 9, 11].includes(month)) return 30\n  return 31\n}\n\n/**\n * A single segment input (month, day, year, hour, minute)\n */\ninterface SegmentInputProps {\n  ariaLabel: string\n  config: SegmentConfig\n  disabled?: boolean\n  onLeftFocus?: () => void\n  onRightFocus?: () => void\n  onValueChange: (value: number) => void\n  periodLabels?: PeriodLabels\n  value: number | undefined\n}\n\n/**\n * SegmentInput - A single editable segment (month, day, year, hour, minute, period)\n *\n * Uses an uncontrolled input pattern to avoid React re-render issues during typing:\n * - Edit buffer stored in ref (not state) to prevent re-renders\n * - DOM value manipulated directly during typing\n * - Only syncs with React when value is committed (blur, tab, arrow keys)\n */\nconst SegmentInput = ({ ariaLabel, config, disabled, onLeftFocus, onRightFocus, onValueChange, periodLabels, value }: SegmentInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  // Use refs to avoid re-renders during typing - this is the key to making it work\n  const editBufferRef = useRef('')\n  const isEditingRef = useRef(false)\n\n  // Placeholder text for empty segments\n  const placeholderText = useMemo(() => {\n    switch (config.type) {\n      case 'month':\n        return 'MM'\n      case 'day':\n        return 'dd'\n      case 'year':\n        return 'yyyy'\n      case 'hour':\n        return config.max === 23 ? 'HH' : 'hh'\n      case 'minute':\n        return 'mm'\n      case 'period':\n        return periodLabels?.am ?? 'am'\n      default:\n        return '––'\n    }\n  }, [config.type, config.max, periodLabels])\n\n  // Format display value from the committed value prop\n  const displayValue = useMemo(() => {\n    if (value === undefined) {\n      return placeholderText\n    }\n    if (config.type === 'period') {\n      const label = value === 0 ? (periodLabels?.am ?? 'am') : (periodLabels?.pm ?? 'pm')\n      return label\n    }\n    return value.toString().padStart(config.length, '0')\n  }, [value, config, periodLabels, placeholderText])\n\n  // Sync input value when external value changes (and we're not editing)\n  useEffect(() => {\n    if (inputRef.current && !isEditingRef.current) {\n      inputRef.current.value = displayValue\n    }\n  }, [displayValue])\n\n  // Commit the edit buffer - called on blur, tab, arrow navigation\n  const commitEdit = useCallback(() => {\n    const buffer = editBufferRef.current\n    if (buffer) {\n      let numValue = parseInt(buffer, 10)\n      if (!isNaN(numValue)) {\n        numValue = Math.max(config.min, Math.min(config.max, numValue))\n        onValueChange(numValue)\n      }\n    }\n    // Reset edit state\n    editBufferRef.current = ''\n    isEditingRef.current = false\n    // Sync display value after commit\n    if (inputRef.current) {\n      inputRef.current.value = displayValue\n    }\n  }, [config.min, config.max, displayValue, onValueChange])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return\n\n      // Tab navigation (let it bubble naturally)\n      if (e.key === 'Tab') {\n        commitEdit()\n        return\n      }\n\n      // Arrow navigation between segments\n      if (e.key === 'ArrowRight') {\n        e.preventDefault()\n        commitEdit()\n        onRightFocus?.()\n        return\n      }\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault()\n        commitEdit()\n        onLeftFocus?.()\n        return\n      }\n\n      // Period toggle (am/pm)\n      if (config.type === 'period') {\n        e.preventDefault()\n        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n          onValueChange(value === 0 ? 1 : 0)\n        } else if (e.key.toLowerCase() === 'a') {\n          onValueChange(0)\n        } else if (e.key.toLowerCase() === 'p') {\n          onValueChange(1)\n        }\n        return\n      }\n\n      // Arrow up/down to increment/decrement\n      if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        const newValue = value === undefined ? config.min : value >= config.max ? config.min : value + 1\n        onValueChange(newValue)\n        return\n      }\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        const newValue = value === undefined ? config.max : value <= config.min ? config.max : value - 1\n        onValueChange(newValue)\n        return\n      }\n\n      // Home/End for min/max\n      if (e.key === 'Home') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        onValueChange(config.min)\n        return\n      }\n      if (e.key === 'End') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        onValueChange(config.max)\n        return\n      }\n\n      // Numeric input - directly manipulate DOM, no React state\n      if (e.key >= '0' && e.key <= '9') {\n        e.preventDefault()\n        const newBuffer = editBufferRef.current + e.key\n        const numValue = parseInt(newBuffer, 10)\n\n        // For 2-digit fields\n        if (config.length === 2) {\n          if (newBuffer.length >= 2) {\n            // Two digits entered - commit and advance\n            const clamped = Math.max(config.min, Math.min(config.max, numValue))\n            editBufferRef.current = ''\n            isEditingRef.current = false\n            onValueChange(clamped)\n            onRightFocus?.()\n          } else if (numValue * 10 > config.max) {\n            // First digit is too large to form a valid two-digit number\n            const clamped = Math.max(config.min, Math.min(config.max, numValue))\n            editBufferRef.current = ''\n            isEditingRef.current = false\n            onValueChange(clamped)\n            onRightFocus?.()\n          } else {\n            // First digit could lead to valid values, wait for second digit\n            // Update refs and DOM directly - NO state update\n            editBufferRef.current = newBuffer\n            isEditingRef.current = true\n            if (inputRef.current) {\n              inputRef.current.value = newBuffer\n            }\n          }\n        } else if (config.length === 4) {\n          // Year field - advance after 4 digits\n          if (newBuffer.length >= 4) {\n            const clamped = Math.max(config.min, Math.min(config.max, numValue))\n            editBufferRef.current = ''\n            isEditingRef.current = false\n            onValueChange(clamped)\n            onRightFocus?.()\n          } else {\n            // Update refs and DOM directly - NO state update\n            editBufferRef.current = newBuffer\n            isEditingRef.current = true\n            if (inputRef.current) {\n              inputRef.current.value = newBuffer\n            }\n          }\n        }\n        return\n      }\n\n      if (e.key === 'Backspace') {\n        e.preventDefault()\n        if (editBufferRef.current) {\n          const newBuffer = editBufferRef.current.slice(0, -1)\n          editBufferRef.current = newBuffer\n          isEditingRef.current = newBuffer.length > 0\n          if (inputRef.current) {\n            inputRef.current.value = newBuffer || displayValue\n          }\n        } else if (value !== undefined) {\n          editBufferRef.current = ''\n          isEditingRef.current = true\n          onValueChange(config.min)\n          if (inputRef.current) {\n            inputRef.current.value = placeholderText\n          }\n        }\n      }\n    },\n    [disabled, config, value, displayValue, placeholderText, onValueChange, onLeftFocus, onRightFocus, commitEdit],\n  )\n\n  const handleBlur = useCallback(() => {\n    // Only commit if we have a partial edit\n    if (editBufferRef.current) {\n      commitEdit()\n    }\n  }, [commitEdit])\n\n  const handleFocus = useCallback(() => {\n    // Only clear buffer if we're not in the middle of an edit\n    if (!isEditingRef.current) {\n      editBufferRef.current = ''\n    }\n    // Move cursor to end\n    const input = inputRef.current\n    if (input) {\n      const len = input.value.length\n      input.setSelectionRange(len, len)\n    }\n  }, [])\n\n  // Prevent browser from changing the input value directly\n  const handleChange = useCallback(() => {\n    // Reset to our controlled value if browser tries to change it\n    if (inputRef.current) {\n      inputRef.current.value = editBufferRef.current || displayValue\n    }\n  }, [displayValue])\n\n  // Width and padding based on segment type\n  const getSegmentStyle = useCallback(() => {\n    switch (config.type) {\n      case 'year':\n        return { width: 46, paddingLeft: 0 }\n      case 'period':\n        return { width: 28, paddingLeft: 0, marginLeft: 4 }\n      case 'month':\n        return { width: 28, paddingLeft: 0 }\n      case 'day':\n        return { width: 28, paddingLeft: 0 }\n      case 'hour':\n        return { width: 28, paddingLeft: 0 }\n      case 'minute':\n        return { width: 30, paddingLeft: 0 }\n      default:\n        return { width: 24, paddingLeft: 0 }\n    }\n  }, [config.type])\n\n  const segmentStyle = useMemo(() => getSegmentStyle(), [getSegmentStyle])\n  const isPlaceholder = useMemo(() => value === undefined, [value])\n\n  return (\n    <input\n      aria-label={ariaLabel}\n      aria-valuemax={config.max}\n      aria-valuemin={config.min}\n      aria-valuenow={value}\n      className={cn(\n        'rounded inline-flex items-center justify-center text-center tabular-nums',\n        'border-none bg-transparent outline-none',\n        'focus:bg-bg-tertiary focus:text-text-primary focus:ring-1 focus:ring-accent',\n        'hover:bg-bg-secondary',\n        disabled && 'cursor-not-allowed opacity-50',\n        isPlaceholder && 'text-text-placeholder text-sm',\n      )}\n      data-segment={config.type}\n      defaultValue={displayValue}\n      disabled={disabled}\n      inputMode='numeric'\n      onBlur={handleBlur}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      ref={inputRef}\n      role='spinbutton'\n      style={segmentStyle}\n      tabIndex={disabled ? -1 : 0}\n    />\n  )\n}\n\n/**\n * A segmented date/time input that mimics native date input behavior.\n * Each segment (month, day, year, hour, minute, period) is separately focusable.\n *\n * Supports both controlled and uncontrolled usage:\n * - Controlled: `<DateTimeDisplayInput value={date} onChange={setDate} />`\n * - Uncontrolled: `<DateTimeDisplayInput defaultValue={new Date()} />`\n *\n * @example\n * ```tsx\n * // Controlled usage\n * const [date, setDate] = useState<Date | undefined>(new Date())\n * <DateTimeDisplayInput value={date} onChange={setDate} />\n *\n * // Uncontrolled usage\n * <DateTimeDisplayInput defaultValue={new Date()} />\n *\n * // Legacy props (deprecated, use value/onChange instead)\n * <DateTimeDisplayInput date={date} onDateChange={setDate} />\n * ```\n */\nexport const DateTimeDisplayInput = forwardRef<HTMLDivElement, DateTimeDisplayInputProps>(\n  (\n    {\n      className,\n      defaultValue,\n      disabled,\n      endIcon,\n      hourFormat = '12',\n      id,\n      label,\n      locale,\n      onChange,\n      hideTime = false,\n      state = 'default',\n      value,\n      'aria-labelledby': ariaLabelledBy,\n      // Legacy props (deprecated)\n      date: legacyDate,\n      onDateChange: legacyOnDateChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = useId()\n    const displayInputId = id ?? `datetime-display-input-${generatedId}`\n    const displayLabelId = `${displayInputId}-label`\n    const containerRef = useRef<HTMLDivElement>(null)\n    const resolvedAriaLabelledBy = [label ? displayLabelId : undefined, ariaLabelledBy].filter(Boolean).join(' ') || undefined\n\n    // Support both new (value/onChange) and legacy (date/onDateChange) prop names\n    const effectiveValue = value ?? legacyDate\n    const effectiveOnChange = onChange ?? legacyOnDateChange\n\n    // Use controllable state to support both controlled and uncontrolled usage\n    const [date, setDate] = useUncontrolledState<Date | undefined>({\n      defaultValue: defaultValue,\n      onChange: effectiveOnChange,\n      value: effectiveValue,\n    })\n\n    // Resolve locale and get period labels\n    const resolvedLocale = useMemo(() => getResolvedLocale(locale), [locale])\n    const periodLabels = useMemo(() => getLocalizedPeriodLabels(resolvedLocale), [resolvedLocale])\n\n    // Extract values from date\n    const values = useMemo(() => {\n      if (!date) return { month: undefined, day: undefined, year: undefined, hour: undefined, minute: undefined, period: undefined as 0 | 1 | undefined }\n\n      const hours = date.getHours()\n      let displayHour: number\n      let period: 0 | 1\n\n      if (hourFormat === '24') {\n        displayHour = hours\n        period = 0\n      } else {\n        period = hours >= 12 ? 1 : 0\n        displayHour = hours % 12\n        if (displayHour === 0) displayHour = 12\n      }\n\n      return {\n        month: date.getMonth() + 1,\n        day: date.getDate(),\n        year: date.getFullYear(),\n        hour: displayHour,\n        minute: date.getMinutes(),\n        period,\n      }\n    }, [date, hourFormat])\n\n    // Check if date is complete (all date parts filled in)\n    // Time inputs should be disabled until a valid date is entered\n    const isDateComplete = values.month !== undefined && values.day !== undefined && values.year !== undefined\n\n    // Build the date from segment values\n    const updateDate = useCallback(\n      (updates: Partial<typeof values>) => {\n        const newValues = { ...values, ...updates }\n\n        // If all date parts are undefined, clear the date\n        if (newValues.month === undefined && newValues.day === undefined && newValues.year === undefined) {\n          setDate(undefined)\n          return\n        }\n\n        // Use current date as base for any undefined values\n        const now = new Date()\n        const month = (newValues.month ?? now.getMonth() + 1) - 1\n        const day = newValues.day ?? now.getDate()\n        const year = newValues.year ?? now.getFullYear()\n\n        // Clamp day to max days in month\n        const maxDays = getMaxDaysInMonth(month + 1, year)\n        const clampedDay = Math.min(day, maxDays)\n\n        // Check if date just became complete (was incomplete before, complete now)\n        const wasDateComplete = values.month !== undefined && values.day !== undefined && values.year !== undefined\n        const isNowDateComplete = newValues.month !== undefined && newValues.day !== undefined && newValues.year !== undefined\n        const dateJustCompleted = !wasDateComplete && isNowDateComplete\n\n        let hours: number\n        if (hourFormat === '24') {\n          // Default to 0:00 (midnight) when date first completed in 24-hour format\n          hours = dateJustCompleted ? 0 : (newValues.hour ?? 0)\n        } else {\n          // Default to 12:00 pm when date first completed in 12-hour format\n          const defaultHour = dateJustCompleted ? 12 : (newValues.hour ?? 12)\n          const defaultPeriod = dateJustCompleted ? 1 : (newValues.period ?? 0) // pm by default\n          const hour12 = defaultHour\n          const period = defaultPeriod\n          if (hour12 === 12) {\n            hours = period === 0 ? 0 : 12\n          } else {\n            hours = period === 0 ? hour12 : hour12 + 12\n          }\n        }\n\n        const minutes = dateJustCompleted ? 0 : (newValues.minute ?? 0)\n\n        const newDate = new Date(year, month, clampedDay, hours, minutes, 0, 0)\n        setDate(newDate)\n      },\n      [values, hourFormat, setDate],\n    )\n\n    // Define segments based on format\n    const segments = useMemo(() => {\n      const dateSegments = [\n        { key: 'month', config: SEGMENT_CONFIGS.month, ariaLabel: 'Month' },\n        { key: 'day', config: SEGMENT_CONFIGS.day, ariaLabel: 'Day' },\n        { key: 'year', config: SEGMENT_CONFIGS.year, ariaLabel: 'Year' },\n      ]\n\n      if (hideTime) return dateSegments\n\n      const timeSegments =\n        hourFormat === '24'\n          ? [\n              { key: 'hour', config: SEGMENT_CONFIGS.hour24, ariaLabel: 'Hours' },\n              { key: 'minute', config: SEGMENT_CONFIGS.minute, ariaLabel: 'Minutes' },\n            ]\n          : [\n              { key: 'hour', config: SEGMENT_CONFIGS.hour12, ariaLabel: 'Hours' },\n              { key: 'minute', config: SEGMENT_CONFIGS.minute, ariaLabel: 'Minutes' },\n              { key: 'period', config: SEGMENT_CONFIGS.period, ariaLabel: formatSelectPeriodLabel(periodLabels, 'Select {am} or {pm}') },\n            ]\n\n      return [...dateSegments, ...timeSegments]\n    }, [hideTime, hourFormat, periodLabels])\n\n    // Focus helpers\n    const focusSegment = useCallback((index: number) => {\n      const segment = containerRef.current?.querySelectorAll(`[role='spinbutton']`)[index] as HTMLElement\n      segment?.focus()\n    }, [])\n\n    const inputClasses = getInputClasses(state)\n\n    return (\n      <div className='gap-1.5 flex flex-col'>\n        {label && (\n          <Label className='text-sm font-medium text-text-primary' id={displayLabelId}>\n            {label}\n          </Label>\n        )}\n        <div className={cn(inputClasses, 'relative', (disabled ?? state === 'disabled') && 'cursor-not-allowed', className)} data-slot='datetime-display-input' id={displayInputId} ref={ref ?? containerRef} aria-labelledby={resolvedAriaLabelledBy} {...props}>\n          <div className='flex items-center' ref={containerRef}>\n            {segments.map((segment, index) => {\n              const isDateSegment = ['month', 'day', 'year'].includes(segment.key)\n              const isTimeSegment = ['hour', 'minute', 'period'].includes(segment.key)\n              const isLastDateSegment = segment.key === 'year'\n              const isFirstTimeSegment = segment.key === 'hour'\n\n              // Disable time segments until date is complete\n              const isSegmentDisabled = disabled ?? (isTimeSegment && !isDateComplete)\n\n              return (\n                <span key={segment.key} className='flex items-center'>\n                  {/* Add comma and space before time section */}\n                  {isFirstTimeSegment && (\n                    <span aria-hidden='true' className='text-text-secondary select-none'>\n                      ,&nbsp;\n                    </span>\n                  )}\n\n                  <SegmentInput\n                    ariaLabel={segment.ariaLabel}\n                    config={segment.config}\n                    disabled={isSegmentDisabled}\n                    onLeftFocus={() => index > 0 && focusSegment(index - 1)}\n                    onRightFocus={() => index < segments.length - 1 && focusSegment(index + 1)}\n                    onValueChange={(val) => updateDate({ [segment.key]: val })}\n                    periodLabels={periodLabels}\n                    value={values[segment.key as keyof typeof values]}\n                  />\n\n                  {/* Date separators */}\n                  {isDateSegment && !isLastDateSegment && (\n                    <span aria-hidden='true' className='text-text-secondary select-none'>\n                      /\n                    </span>\n                  )}\n\n                  {/* Time separator - colon between hour and minute */}\n                  {isFirstTimeSegment && (\n                    <span aria-hidden='true' className='text-inherit select-none'>\n                      :\n                    </span>\n                  )}\n                </span>\n              )\n            })}\n          </div>\n          {endIcon}\n        </div>\n      </div>\n    )\n  },\n)\nDateTimeDisplayInput.displayName = 'DateTimeDisplayInput'\n"],"mappings":"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"}
+{"version":3,"file":"DateTimeDisplayInput.js","names":[],"sources":["../../src/components/DateTimePicker/DateTimeDisplayInput.tsx"],"sourcesContent":["import { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { getInputClasses } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { forwardRef, useCallback, useEffect, useId, useMemo, useRef, type ComponentProps, type KeyboardEvent, type ReactNode } from 'react'\nimport { formatSelectPeriodLabel, getLocalizedPeriodLabels, getResolvedLocale, type HourFormat, type PeriodLabels } from './DateTimeUtils'\n\nexport interface DateTimeDisplayInputProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {\n  defaultValue?: Date\n  disabled?: boolean\n  endIcon?: ReactNode\n  hideTime?: boolean\n  hourFormat?: HourFormat\n  label?: string\n  locale?: string\n  onChange?: (date: Date | undefined) => void\n  state?: 'default' | 'disabled' | 'error' | 'warning'\n  value?: Date\n  // Legacy prop names for backward compatibility\n  /** @deprecated Use `value` instead */\n  date?: Date\n  /** @deprecated Use `onChange` instead */\n  onDateChange?: (date: Date | undefined) => void\n}\n\ninterface SegmentConfig {\n  length: number\n  max: number\n  min: number\n  type: 'month' | 'day' | 'year' | 'hour' | 'minute' | 'period'\n}\n\nconst SEGMENT_CONFIGS: Record<string, SegmentConfig> = {\n  month: { type: 'month', min: 1, max: 12, length: 2 },\n  day: { type: 'day', min: 1, max: 31, length: 2 },\n  year: { type: 'year', min: 1900, max: 2100, length: 4 },\n  hour12: { type: 'hour', min: 1, max: 12, length: 2 },\n  hour24: { type: 'hour', min: 0, max: 23, length: 2 },\n  minute: { type: 'minute', min: 0, max: 59, length: 2 },\n  period: { type: 'period', min: 0, max: 1, length: 2 },\n}\n\n/**\n * Get max days for a given month/year\n */\nconst getMaxDaysInMonth = (month: number, year: number): number => {\n  if (month === 2) {\n    const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0\n    return isLeapYear ? 29 : 28\n  }\n  if ([4, 6, 9, 11].includes(month)) return 30\n  return 31\n}\n\n/**\n * A single segment input (month, day, year, hour, minute)\n */\ninterface SegmentInputProps {\n  ariaLabel: string\n  config: SegmentConfig\n  disabled?: boolean\n  onLeftFocus?: () => void\n  onRightFocus?: () => void\n  onValueChange: (value: number) => void\n  periodLabels?: PeriodLabels\n  value: number | undefined\n}\n\n/**\n * SegmentInput - A single editable segment (month, day, year, hour, minute, period)\n *\n * Uses an uncontrolled input pattern to avoid React re-render issues during typing:\n * - Edit buffer stored in ref (not state) to prevent re-renders\n * - DOM value manipulated directly during typing\n * - Only syncs with React when value is committed (blur, tab, arrow keys)\n */\nconst SegmentInput = ({ ariaLabel, config, disabled, onLeftFocus, onRightFocus, onValueChange, periodLabels, value }: SegmentInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  // Use refs to avoid re-renders during typing - this is the key to making it work\n  const editBufferRef = useRef('')\n  const isEditingRef = useRef(false)\n\n  // Placeholder text for empty segments\n  const placeholderText = useMemo(() => {\n    switch (config.type) {\n      case 'month':\n        return 'MM'\n      case 'day':\n        return 'dd'\n      case 'year':\n        return 'yyyy'\n      case 'hour':\n        return config.max === 23 ? 'HH' : 'hh'\n      case 'minute':\n        return 'mm'\n      case 'period':\n        return periodLabels?.am ?? 'am'\n      default:\n        return '––'\n    }\n  }, [config.type, config.max, periodLabels])\n\n  // Format display value from the committed value prop\n  const displayValue = useMemo(() => {\n    if (value === undefined) {\n      return placeholderText\n    }\n    if (config.type === 'period') {\n      const label = value === 0 ? (periodLabels?.am ?? 'am') : (periodLabels?.pm ?? 'pm')\n      return label\n    }\n    return value.toString().padStart(config.length, '0')\n  }, [value, config, periodLabels, placeholderText])\n\n  // Sync input value when external value changes (and we're not editing)\n  useEffect(() => {\n    if (inputRef.current && !isEditingRef.current) {\n      inputRef.current.value = displayValue\n    }\n  }, [displayValue])\n\n  // Commit the edit buffer - called on blur, tab, arrow navigation\n  const commitEdit = useCallback(() => {\n    const buffer = editBufferRef.current\n    if (buffer) {\n      let numValue = parseInt(buffer, 10)\n      if (!isNaN(numValue)) {\n        numValue = Math.max(config.min, Math.min(config.max, numValue))\n        onValueChange(numValue)\n      }\n    }\n    // Reset edit state\n    editBufferRef.current = ''\n    isEditingRef.current = false\n    // Sync display value after commit\n    if (inputRef.current) {\n      inputRef.current.value = displayValue\n    }\n  }, [config.min, config.max, displayValue, onValueChange])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return\n\n      // Tab navigation (let it bubble naturally)\n      if (e.key === 'Tab') {\n        commitEdit()\n        return\n      }\n\n      // Arrow navigation between segments\n      if (e.key === 'ArrowRight') {\n        e.preventDefault()\n        commitEdit()\n        onRightFocus?.()\n        return\n      }\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault()\n        commitEdit()\n        onLeftFocus?.()\n        return\n      }\n\n      // Period toggle (am/pm)\n      if (config.type === 'period') {\n        e.preventDefault()\n        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n          onValueChange(value === 0 ? 1 : 0)\n        } else if (e.key.toLowerCase() === 'a') {\n          onValueChange(0)\n        } else if (e.key.toLowerCase() === 'p') {\n          onValueChange(1)\n        }\n        return\n      }\n\n      // Arrow up/down to increment/decrement\n      if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        const newValue = value === undefined ? config.min : value >= config.max ? config.min : value + 1\n        onValueChange(newValue)\n        return\n      }\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        const newValue = value === undefined ? config.max : value <= config.min ? config.max : value - 1\n        onValueChange(newValue)\n        return\n      }\n\n      // Home/End for min/max\n      if (e.key === 'Home') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        onValueChange(config.min)\n        return\n      }\n      if (e.key === 'End') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        onValueChange(config.max)\n        return\n      }\n\n      // Numeric input - directly manipulate DOM, no React state\n      if (e.key >= '0' && e.key <= '9') {\n        e.preventDefault()\n        const newBuffer = editBufferRef.current + e.key\n        const numValue = parseInt(newBuffer, 10)\n\n        // For 2-digit fields\n        if (config.length === 2) {\n          if (newBuffer.length >= 2) {\n            // Two digits entered - commit and advance\n            const clamped = Math.max(config.min, Math.min(config.max, numValue))\n            editBufferRef.current = ''\n            isEditingRef.current = false\n            onValueChange(clamped)\n            onRightFocus?.()\n          } else if (numValue * 10 > config.max) {\n            // First digit is too large to form a valid two-digit number\n            const clamped = Math.max(config.min, Math.min(config.max, numValue))\n            editBufferRef.current = ''\n            isEditingRef.current = false\n            onValueChange(clamped)\n            onRightFocus?.()\n          } else {\n            // First digit could lead to valid values, wait for second digit\n            // Update refs and DOM directly - NO state update\n            editBufferRef.current = newBuffer\n            isEditingRef.current = true\n            if (inputRef.current) {\n              inputRef.current.value = newBuffer\n            }\n          }\n        } else if (config.length === 4) {\n          // Year field - advance after 4 digits\n          if (newBuffer.length >= 4) {\n            const clamped = Math.max(config.min, Math.min(config.max, numValue))\n            editBufferRef.current = ''\n            isEditingRef.current = false\n            onValueChange(clamped)\n            onRightFocus?.()\n          } else {\n            // Update refs and DOM directly - NO state update\n            editBufferRef.current = newBuffer\n            isEditingRef.current = true\n            if (inputRef.current) {\n              inputRef.current.value = newBuffer\n            }\n          }\n        }\n        return\n      }\n\n      if (e.key === 'Backspace') {\n        e.preventDefault()\n        if (editBufferRef.current) {\n          const newBuffer = editBufferRef.current.slice(0, -1)\n          editBufferRef.current = newBuffer\n          isEditingRef.current = newBuffer.length > 0\n          if (inputRef.current) {\n            inputRef.current.value = newBuffer || displayValue\n          }\n        } else if (value !== undefined) {\n          editBufferRef.current = ''\n          isEditingRef.current = true\n          onValueChange(config.min)\n          if (inputRef.current) {\n            inputRef.current.value = placeholderText\n          }\n        }\n      }\n    },\n    [disabled, config, value, displayValue, placeholderText, onValueChange, onLeftFocus, onRightFocus, commitEdit],\n  )\n\n  const handleBlur = useCallback(() => {\n    // Only commit if we have a partial edit\n    if (editBufferRef.current) {\n      commitEdit()\n    }\n  }, [commitEdit])\n\n  const handleFocus = useCallback(() => {\n    // Only clear buffer if we're not in the middle of an edit\n    if (!isEditingRef.current) {\n      editBufferRef.current = ''\n    }\n    // Move cursor to end\n    const input = inputRef.current\n    if (input) {\n      const len = input.value.length\n      input.setSelectionRange(len, len)\n    }\n  }, [])\n\n  // Prevent browser from changing the input value directly\n  const handleChange = useCallback(() => {\n    // Reset to our controlled value if browser tries to change it\n    if (inputRef.current) {\n      inputRef.current.value = editBufferRef.current || displayValue\n    }\n  }, [displayValue])\n\n  // Width and padding based on segment type\n  const getSegmentStyle = useCallback(() => {\n    switch (config.type) {\n      case 'year':\n        return { width: 46, paddingLeft: 0 }\n      case 'period':\n        return { width: 28, paddingLeft: 0, marginLeft: 4 }\n      case 'month':\n        return { width: 28, paddingLeft: 0 }\n      case 'day':\n        return { width: 28, paddingLeft: 0 }\n      case 'hour':\n        return { width: 28, paddingLeft: 0 }\n      case 'minute':\n        return { width: 30, paddingLeft: 0 }\n      default:\n        return { width: 24, paddingLeft: 0 }\n    }\n  }, [config.type])\n\n  const segmentStyle = useMemo(() => getSegmentStyle(), [getSegmentStyle])\n  const isPlaceholder = useMemo(() => value === undefined, [value])\n\n  return (\n    <input\n      aria-label={ariaLabel}\n      aria-valuemax={config.max}\n      aria-valuemin={config.min}\n      aria-valuenow={value}\n      className={cn(\n        'rounded inline-flex items-center justify-center text-center tabular-nums',\n        'border-none bg-transparent outline-none',\n        'focus:bg-bg-tertiary focus:text-text-primary focus:ring-1 focus:ring-accent',\n        'hover:bg-bg-secondary',\n        disabled && 'cursor-not-allowed opacity-50',\n        isPlaceholder && 'text-text-placeholder text-sm',\n      )}\n      data-segment={config.type}\n      defaultValue={displayValue}\n      disabled={disabled}\n      inputMode='numeric'\n      onBlur={handleBlur}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      ref={inputRef}\n      role='spinbutton'\n      style={segmentStyle}\n      tabIndex={disabled ? -1 : 0}\n    />\n  )\n}\n\n/**\n * A segmented date/time input that mimics native date input behavior.\n * Each segment (month, day, year, hour, minute, period) is separately focusable.\n *\n * Supports both controlled and uncontrolled usage:\n * - Controlled: `<DateTimeDisplayInput value={date} onChange={setDate} />`\n * - Uncontrolled: `<DateTimeDisplayInput defaultValue={new Date()} />`\n *\n * @example\n * ```tsx\n * // Controlled usage\n * const [date, setDate] = useState<Date | undefined>(new Date())\n * <DateTimeDisplayInput value={date} onChange={setDate} />\n *\n * // Uncontrolled usage\n * <DateTimeDisplayInput defaultValue={new Date()} />\n *\n * // Legacy props (deprecated, use value/onChange instead)\n * <DateTimeDisplayInput date={date} onDateChange={setDate} />\n * ```\n */\nexport const DateTimeDisplayInput = forwardRef<HTMLDivElement, DateTimeDisplayInputProps>(\n  (\n    {\n      className,\n      defaultValue,\n      disabled,\n      endIcon,\n      hourFormat = '12',\n      id,\n      label,\n      locale,\n      onChange,\n      hideTime = false,\n      state = 'default',\n      value,\n      'aria-labelledby': ariaLabelledBy,\n      // Legacy props (deprecated)\n      date: legacyDate,\n      onDateChange: legacyOnDateChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = useId()\n    const displayInputId = id ?? `datetime-display-input-${generatedId}`\n    const displayLabelId = `${displayInputId}-label`\n    const containerRef = useRef<HTMLDivElement>(null)\n    const resolvedAriaLabelledBy = [label ? displayLabelId : undefined, ariaLabelledBy].filter(Boolean).join(' ') || undefined\n\n    // Support both new (value/onChange) and legacy (date/onDateChange) prop names\n    const effectiveValue = value ?? legacyDate\n    const effectiveOnChange = onChange ?? legacyOnDateChange\n\n    // Use controllable state to support both controlled and uncontrolled usage\n    const [date, setDate] = useUncontrolledState<Date | undefined>({\n      defaultValue: defaultValue,\n      onChange: effectiveOnChange,\n      value: effectiveValue,\n    })\n\n    // Resolve locale and get period labels\n    const resolvedLocale = useMemo(() => getResolvedLocale(locale), [locale])\n    const periodLabels = useMemo(() => getLocalizedPeriodLabels(resolvedLocale), [resolvedLocale])\n\n    // Extract values from date\n    const values = useMemo(() => {\n      if (!date) return { month: undefined, day: undefined, year: undefined, hour: undefined, minute: undefined, period: undefined as 0 | 1 | undefined }\n\n      const hours = date.getHours()\n      let displayHour: number\n      let period: 0 | 1\n\n      if (hourFormat === '24') {\n        displayHour = hours\n        period = 0\n      } else {\n        period = hours >= 12 ? 1 : 0\n        displayHour = hours % 12\n        if (displayHour === 0) displayHour = 12\n      }\n\n      return {\n        month: date.getMonth() + 1,\n        day: date.getDate(),\n        year: date.getFullYear(),\n        hour: displayHour,\n        minute: date.getMinutes(),\n        period,\n      }\n    }, [date, hourFormat])\n\n    // Check if date is complete (all date parts filled in)\n    // Time inputs should be disabled until a valid date is entered\n    const isDateComplete = values.month !== undefined && values.day !== undefined && values.year !== undefined\n\n    // Build the date from segment values\n    const updateDate = useCallback(\n      (updates: Partial<typeof values>) => {\n        const newValues = { ...values, ...updates }\n\n        // If all date parts are undefined, clear the date\n        if (newValues.month === undefined && newValues.day === undefined && newValues.year === undefined) {\n          setDate(undefined)\n          return\n        }\n\n        // Use current date as base for any undefined values\n        const now = new Date()\n        const month = (newValues.month ?? now.getMonth() + 1) - 1\n        const day = newValues.day ?? now.getDate()\n        const year = newValues.year ?? now.getFullYear()\n\n        // Clamp day to max days in month\n        const maxDays = getMaxDaysInMonth(month + 1, year)\n        const clampedDay = Math.min(day, maxDays)\n\n        // Check if date just became complete (was incomplete before, complete now)\n        const wasDateComplete = values.month !== undefined && values.day !== undefined && values.year !== undefined\n        const isNowDateComplete = newValues.month !== undefined && newValues.day !== undefined && newValues.year !== undefined\n        const dateJustCompleted = !wasDateComplete && isNowDateComplete\n\n        let hours: number\n        if (hourFormat === '24') {\n          // Default to 0:00 (midnight) when date first completed in 24-hour format\n          hours = dateJustCompleted ? 0 : (newValues.hour ?? 0)\n        } else {\n          // Default to 12:00 pm when date first completed in 12-hour format\n          const defaultHour = dateJustCompleted ? 12 : (newValues.hour ?? 12)\n          const defaultPeriod = dateJustCompleted ? 1 : (newValues.period ?? 0) // pm by default\n          const hour12 = defaultHour\n          const period = defaultPeriod\n          if (hour12 === 12) {\n            hours = period === 0 ? 0 : 12\n          } else {\n            hours = period === 0 ? hour12 : hour12 + 12\n          }\n        }\n\n        const minutes = dateJustCompleted ? 0 : (newValues.minute ?? 0)\n\n        const newDate = new Date(year, month, clampedDay, hours, minutes, 0, 0)\n        setDate(newDate)\n      },\n      [values, hourFormat, setDate],\n    )\n\n    // Define segments based on format\n    const segments = useMemo(() => {\n      const dateSegments = [\n        { key: 'month', config: SEGMENT_CONFIGS.month, ariaLabel: 'Month' },\n        { key: 'day', config: SEGMENT_CONFIGS.day, ariaLabel: 'Day' },\n        { key: 'year', config: SEGMENT_CONFIGS.year, ariaLabel: 'Year' },\n      ]\n\n      if (hideTime) return dateSegments\n\n      const timeSegments =\n        hourFormat === '24'\n          ? [\n              { key: 'hour', config: SEGMENT_CONFIGS.hour24, ariaLabel: 'Hours' },\n              { key: 'minute', config: SEGMENT_CONFIGS.minute, ariaLabel: 'Minutes' },\n            ]\n          : [\n              { key: 'hour', config: SEGMENT_CONFIGS.hour12, ariaLabel: 'Hours' },\n              { key: 'minute', config: SEGMENT_CONFIGS.minute, ariaLabel: 'Minutes' },\n              { key: 'period', config: SEGMENT_CONFIGS.period, ariaLabel: formatSelectPeriodLabel(periodLabels, 'Select {am} or {pm}') },\n            ]\n\n      return [...dateSegments, ...timeSegments]\n    }, [hideTime, hourFormat, periodLabels])\n\n    // Focus helpers\n    const focusSegment = useCallback((index: number) => {\n      const segment = containerRef.current?.querySelectorAll(`[role='spinbutton']`)[index] as HTMLElement\n      segment?.focus()\n    }, [])\n\n    const inputClasses = getInputClasses(state)\n\n    return (\n      <div className='gap-1.5 flex flex-col'>\n        {label && (\n          <Label\n            className='text-sm font-medium text-text-primary'\n            id={displayLabelId}\n          >\n            {label}\n          </Label>\n        )}\n        <div\n          className={cn(inputClasses, 'relative', (disabled ?? state === 'disabled') && 'cursor-not-allowed', className)}\n          data-slot='datetime-display-input'\n          id={displayInputId}\n          ref={ref ?? containerRef}\n          aria-labelledby={resolvedAriaLabelledBy}\n          {...props}\n        >\n          <div\n            className='flex items-center'\n            ref={containerRef}\n          >\n            {segments.map((segment, index) => {\n              const isDateSegment = ['month', 'day', 'year'].includes(segment.key)\n              const isTimeSegment = ['hour', 'minute', 'period'].includes(segment.key)\n              const isLastDateSegment = segment.key === 'year'\n              const isFirstTimeSegment = segment.key === 'hour'\n\n              // Disable time segments until date is complete\n              const isSegmentDisabled = disabled ?? (isTimeSegment && !isDateComplete)\n\n              return (\n                <span\n                  key={segment.key}\n                  className='flex items-center'\n                >\n                  {/* Add comma and space before time section */}\n                  {isFirstTimeSegment && (\n                    <span\n                      aria-hidden='true'\n                      className='text-text-secondary select-none'\n                    >\n                      ,&nbsp;\n                    </span>\n                  )}\n\n                  <SegmentInput\n                    ariaLabel={segment.ariaLabel}\n                    config={segment.config}\n                    disabled={isSegmentDisabled}\n                    onLeftFocus={() => index > 0 && focusSegment(index - 1)}\n                    onRightFocus={() => index < segments.length - 1 && focusSegment(index + 1)}\n                    onValueChange={(val) => updateDate({ [segment.key]: val })}\n                    periodLabels={periodLabels}\n                    value={values[segment.key as keyof typeof values]}\n                  />\n\n                  {/* Date separators */}\n                  {isDateSegment && !isLastDateSegment && (\n                    <span\n                      aria-hidden='true'\n                      className='text-text-secondary select-none'\n                    >\n                      /\n                    </span>\n                  )}\n\n                  {/* Time separator - colon between hour and minute */}\n                  {isFirstTimeSegment && (\n                    <span\n                      aria-hidden='true'\n                      className='text-inherit select-none'\n                    >\n                      :\n                    </span>\n                  )}\n                </span>\n              )\n            })}\n          </div>\n          {endIcon}\n        </div>\n      </div>\n    )\n  },\n)\nDateTimeDisplayInput.displayName = 'DateTimeDisplayInput'\n"],"mappings":"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"}

package/dist/DateTimePicker/TimePeriodSelect.js

@@ -48,7 +48,7 @@ const TimePeriodSelect = ({ ariaLabel, className, disabled, labels = DEFAULT_LAB
 		value: period,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
 			"aria-label": effectiveAriaLabel,
-			className: cn("h-9 w-fit min-w-20 grid-cols-[max-content_auto]", className),
+			className: cn("h-9 min-w-20 w-fit grid-cols-[max-content_auto]", className),
 			"data-slot": "time-period-select",
 			onKeyDown: handleKeyDown,
 			ref,

package/dist/DateTimePicker/TimePeriodSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePeriodSelect.js","names":[],"sources":["../../src/components/DateTimePicker/TimePeriodSelect.tsx"],"sourcesContent":["import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@primitives/select'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentProps, type KeyboardEvent, type Ref } from 'react'\nimport { type Period, type PeriodLabels } from './DateTimeUtils'\n\nexport interface TimePeriodSelectProps extends Omit<ComponentProps<'button'>, 'onChange' | 'ref'> {\n  ariaLabel?: string\n  labels?: PeriodLabels\n  onLeftFocus?: () => void\n  onPeriodChange: (period: Period) => void\n  onRightFocus?: () => void\n  period: Period\n}\n\nconst DEFAULT_LABELS: PeriodLabels = { am: 'am', pm: 'pm' }\n\nexport const TimePeriodSelect = ({ ariaLabel, className, disabled, labels = DEFAULT_LABELS, onLeftFocus, onPeriodChange, onRightFocus, period, ref, ...props }: TimePeriodSelectProps & { ref?: Ref<HTMLButtonElement> }) => {\n  // Generate default ARIA label from the provided labels if not explicitly provided\n  const effectiveAriaLabel = ariaLabel ?? `Select ${labels.am} or ${labels.pm}`\n  const isSpaceKey = (key: string) => key === ' ' || key === 'Space' || key === 'Spacebar'\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    const isOpen = e.currentTarget.getAttribute('data-state') === 'open'\n    const isSelectionCommitKey = e.key === 'Enter' || isSpaceKey(e.key)\n\n    if (isOpen && isSelectionCommitKey) {\n      const contentId = e.currentTarget.getAttribute('aria-controls')\n      const highlightedItem = contentId\n        ? e.currentTarget.ownerDocument.getElementById(contentId)?.querySelector<HTMLElement>(\"[data-slot='select-item'][data-highlighted]\")\n        : null\n      if (highlightedItem) {\n        e.preventDefault()\n        highlightedItem.click()\n        return\n      }\n    }\n\n    if (e.key === 'ArrowRight') {\n      e.preventDefault()\n      onRightFocus?.()\n    }\n    if (e.key === 'ArrowLeft') {\n      e.preventDefault()\n      onLeftFocus?.()\n    }\n  }\n\n  const handleContentKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (!isSpaceKey(e.key)) return\n\n    const highlightedItem = e.currentTarget.querySelector<HTMLElement>(\"[data-slot='select-item'][data-highlighted]\")\n    if (highlightedItem) {\n      e.preventDefault()\n      highlightedItem.click()\n    }\n  }\n\n  return (\n    <Select defaultValue={period} disabled={disabled} onValueChange={(value) => onPeriodChange(value as Period)} value={period}>\n      <SelectTrigger\n        aria-label={effectiveAriaLabel}\n        className={cn('h-9 w-fit min-w-20 grid-cols-[max-content_auto]', className)}\n        data-slot='time-period-select'\n        data-testid='spectral-time-period-select'\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        size='sm'\n        {...props}\n      >\n        <SelectValue>{period === 'am' ? labels.am : labels.pm}</SelectValue>\n      </SelectTrigger>\n      <SelectContent data-testid='spectral-time-period-select-content' onKeyDown={handleContentKeyDown} position='popper' sideOffset={4}>\n        <SelectItem data-testid='spectral-time-period-select-am' value='am'>\n          {labels.am}\n        </SelectItem>\n        <SelectItem data-testid='spectral-time-period-select-pm' value='pm'>\n          {labels.pm}\n        </SelectItem>\n      </SelectContent>\n    </Select>\n  )\n}\n\nTimePeriodSelect.displayName = 'TimePeriodSelect'\n"],"mappings":";;;;;;;AAcA,MAAM,iBAA+B;CAAE,IAAI;CAAM,IAAI;CAAK;AAE1D,MAAa,oBAAoB,EAAE,WAAW,WAAW,UAAU,SAAS,gBAAgB,aAAa,gBAAgB,cAAc,QAAQ,KAAK,GAAG,YAAsE;CAE3N,MAAM,qBAAqB,aAAa,UAAU,OAAO,GAAG,MAAM,OAAO;CACzE,MAAM,cAAc,QAAgB,QAAQ,OAAO,QAAQ,WAAW,QAAQ;CAE9E,MAAM,iBAAiB,MAAwC;EAC7D,MAAM,SAAS,EAAE,cAAc,aAAa,aAAa,KAAK;EAC9D,MAAM,uBAAuB,EAAE,QAAQ,WAAW,WAAW,EAAE,IAAG;AAElE,MAAI,UAAU,sBAAsB;GAClC,MAAM,YAAY,EAAE,cAAc,aAAa,gBAAe;GAC9D,MAAM,kBAAkB,YACpB,EAAE,cAAc,cAAc,eAAe,UAAU,EAAE,cAA2B,8CAA6C,GACjI;AACJ,OAAI,iBAAiB;AACnB,MAAE,gBAAe;AACjB,oBAAgB,OAAM;AACtB;;;AAIJ,MAAI,EAAE,QAAQ,cAAc;AAC1B,KAAE,gBAAe;AACjB,mBAAe;;AAEjB,MAAI,EAAE,QAAQ,aAAa;AACzB,KAAE,gBAAe;AACjB,kBAAc;;;CAIlB,MAAM,wBAAwB,MAAqC;AACjE,MAAI,CAAC,WAAW,EAAE,IAAI,CAAE;EAExB,MAAM,kBAAkB,EAAE,cAAc,cAA2B,8CAA6C;AAChH,MAAI,iBAAiB;AACnB,KAAE,gBAAe;AACjB,mBAAgB,OAAM;;;AAI1B,QACE,qBAAC,QAAD;EAAQ,cAAc;EAAkB;EAAU,gBAAgB,UAAU,eAAe,MAAgB;EAAE,OAAO;YAApH,CACE,oBAAC,eAAD;GACE,cAAY;GACZ,WAAW,GAAG,mDAAmD,UAAU;GAC3E,aAAU;GAEV,WAAW;GACN;GACL,MAAK;GACL,GAAI;aAEJ,oBAAC,aAAD,YAAc,WAAW,OAAO,OAAO,KAAK,OAAO,IAAgB;GACtD,GACf,qBAAC,eAAD;GAAiE,WAAW;GAAsB,UAAS;GAAS,YAAY;aAAhI,CACE,oBAAC,YAAD;IAAyD,OAAM;cAC5D,OAAO;IACE,GACZ,oBAAC,YAAD;IAAyD,OAAM;cAC5D,OAAO;IACE,EACC;KACT;;;AAIZ,iBAAiB,cAAc"}
+{"version":3,"file":"TimePeriodSelect.js","names":[],"sources":["../../src/components/DateTimePicker/TimePeriodSelect.tsx"],"sourcesContent":["import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@primitives/select'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentProps, type KeyboardEvent, type Ref } from 'react'\nimport { type Period, type PeriodLabels } from './DateTimeUtils'\n\nexport interface TimePeriodSelectProps extends Omit<ComponentProps<'button'>, 'onChange' | 'ref'> {\n  ariaLabel?: string\n  labels?: PeriodLabels\n  onLeftFocus?: () => void\n  onPeriodChange: (period: Period) => void\n  onRightFocus?: () => void\n  period: Period\n}\n\nconst DEFAULT_LABELS: PeriodLabels = { am: 'am', pm: 'pm' }\n\nexport const TimePeriodSelect = ({ ariaLabel, className, disabled, labels = DEFAULT_LABELS, onLeftFocus, onPeriodChange, onRightFocus, period, ref, ...props }: TimePeriodSelectProps & { ref?: Ref<HTMLButtonElement> }) => {\n  // Generate default ARIA label from the provided labels if not explicitly provided\n  const effectiveAriaLabel = ariaLabel ?? `Select ${labels.am} or ${labels.pm}`\n  const isSpaceKey = (key: string) => key === ' ' || key === 'Space' || key === 'Spacebar'\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    const isOpen = e.currentTarget.getAttribute('data-state') === 'open'\n    const isSelectionCommitKey = e.key === 'Enter' || isSpaceKey(e.key)\n\n    if (isOpen && isSelectionCommitKey) {\n      const contentId = e.currentTarget.getAttribute('aria-controls')\n      const highlightedItem = contentId ? e.currentTarget.ownerDocument.getElementById(contentId)?.querySelector<HTMLElement>(\"[data-slot='select-item'][data-highlighted]\") : null\n      if (highlightedItem) {\n        e.preventDefault()\n        highlightedItem.click()\n        return\n      }\n    }\n\n    if (e.key === 'ArrowRight') {\n      e.preventDefault()\n      onRightFocus?.()\n    }\n    if (e.key === 'ArrowLeft') {\n      e.preventDefault()\n      onLeftFocus?.()\n    }\n  }\n\n  const handleContentKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (!isSpaceKey(e.key)) return\n\n    const highlightedItem = e.currentTarget.querySelector<HTMLElement>(\"[data-slot='select-item'][data-highlighted]\")\n    if (highlightedItem) {\n      e.preventDefault()\n      highlightedItem.click()\n    }\n  }\n\n  return (\n    <Select\n      defaultValue={period}\n      disabled={disabled}\n      onValueChange={(value) => onPeriodChange(value as Period)}\n      value={period}\n    >\n      <SelectTrigger\n        aria-label={effectiveAriaLabel}\n        className={cn('h-9 min-w-20 w-fit grid-cols-[max-content_auto]', className)}\n        data-slot='time-period-select'\n        data-testid='spectral-time-period-select'\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        size='sm'\n        {...props}\n      >\n        <SelectValue>{period === 'am' ? labels.am : labels.pm}</SelectValue>\n      </SelectTrigger>\n      <SelectContent\n        data-testid='spectral-time-period-select-content'\n        onKeyDown={handleContentKeyDown}\n        position='popper'\n        sideOffset={4}\n      >\n        <SelectItem\n          data-testid='spectral-time-period-select-am'\n          value='am'\n        >\n          {labels.am}\n        </SelectItem>\n        <SelectItem\n          data-testid='spectral-time-period-select-pm'\n          value='pm'\n        >\n          {labels.pm}\n        </SelectItem>\n      </SelectContent>\n    </Select>\n  )\n}\n\nTimePeriodSelect.displayName = 'TimePeriodSelect'\n"],"mappings":";;;;;;;AAcA,MAAM,iBAA+B;CAAE,IAAI;CAAM,IAAI;CAAK;AAE1D,MAAa,oBAAoB,EAAE,WAAW,WAAW,UAAU,SAAS,gBAAgB,aAAa,gBAAgB,cAAc,QAAQ,KAAK,GAAG,YAAsE;CAE3N,MAAM,qBAAqB,aAAa,UAAU,OAAO,GAAG,MAAM,OAAO;CACzE,MAAM,cAAc,QAAgB,QAAQ,OAAO,QAAQ,WAAW,QAAQ;CAE9E,MAAM,iBAAiB,MAAwC;EAC7D,MAAM,SAAS,EAAE,cAAc,aAAa,aAAa,KAAK;EAC9D,MAAM,uBAAuB,EAAE,QAAQ,WAAW,WAAW,EAAE,IAAG;AAElE,MAAI,UAAU,sBAAsB;GAClC,MAAM,YAAY,EAAE,cAAc,aAAa,gBAAe;GAC9D,MAAM,kBAAkB,YAAY,EAAE,cAAc,cAAc,eAAe,UAAU,EAAE,cAA2B,8CAA8C,GAAG;AACzK,OAAI,iBAAiB;AACnB,MAAE,gBAAe;AACjB,oBAAgB,OAAM;AACtB;;;AAIJ,MAAI,EAAE,QAAQ,cAAc;AAC1B,KAAE,gBAAe;AACjB,mBAAe;;AAEjB,MAAI,EAAE,QAAQ,aAAa;AACzB,KAAE,gBAAe;AACjB,kBAAc;;;CAIlB,MAAM,wBAAwB,MAAqC;AACjE,MAAI,CAAC,WAAW,EAAE,IAAI,CAAE;EAExB,MAAM,kBAAkB,EAAE,cAAc,cAA2B,8CAA6C;AAChH,MAAI,iBAAiB;AACnB,KAAE,gBAAe;AACjB,mBAAgB,OAAM;;;AAI1B,QACE,qBAAC,QAAD;EACE,cAAc;EACJ;EACV,gBAAgB,UAAU,eAAe,MAAgB;EACzD,OAAO;YAJT,CAME,oBAAC,eAAD;GACE,cAAY;GACZ,WAAW,GAAG,mDAAmD,UAAU;GAC3E,aAAU;GAEV,WAAW;GACN;GACL,MAAK;GACL,GAAI;aAEJ,oBAAC,aAAD,YAAc,WAAW,OAAO,OAAO,KAAK,OAAO,IAAgB;GACtD,GACf,qBAAC,eAAD;GAEE,WAAW;GACX,UAAS;GACT,YAAY;aAJd,CAME,oBAAC,YAAD;IAEE,OAAM;cAEL,OAAO;IACE,GACZ,oBAAC,YAAD;IAEE,OAAM;cAEL,OAAO;IACE,EACC;KACT;;;AAIZ,iBAAiB,cAAc"}

package/dist/DateTimePicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","names":[],"sources":["../../src/components/DateTimePicker/TimePicker.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { useMemo, useRef, type ComponentProps } from 'react'\nimport { DateTimeInput } from './DateTimeInput'\nimport { DEFAULT_TRANSLATIONS, detectHourFormat, formatSelectPeriodLabel, getLocalizedPeriodLabels, getPeriodFromHours, getResolvedLocale, type HourFormat, type Period, type TimePickerTranslations } from './DateTimeUtils'\nimport { TimePeriodSelect } from './TimePeriodSelect'\n\nexport interface TimePickerProps extends Omit<ComponentProps<'div'>, 'onChange'> {\n  date: Date | undefined\n  hourFormat?: HourFormat\n  locale?: string\n  onChange: (date: Date | undefined) => void\n  onPeriodChange?: (newPeriod: Period) => void\n  /** Override translation strings for ARIA labels */\n  translations?: Partial<TimePickerTranslations>\n}\n\nexport const TimePicker = ({ className, date, hourFormat, locale, onChange, onPeriodChange, translations, ...props }: TimePickerProps) => {\n  const minuteRef = useRef<HTMLInputElement>(null)\n  const hourRef = useRef<HTMLInputElement>(null)\n  const periodRef = useRef<HTMLButtonElement>(null)\n\n  // Resolve locale with fallback chain\n  const resolvedLocale = useMemo(() => getResolvedLocale(locale), [locale])\n\n  // Merge translations with defaults\n  const mergedTranslations = useMemo(() => ({ ...DEFAULT_TRANSLATIONS, ...translations }), [translations])\n\n  // Auto-detect hour format from locale if not explicitly provided\n  const effectiveHourFormat = useMemo(() => hourFormat ?? detectHourFormat(resolvedLocale), [hourFormat, resolvedLocale])\n\n  // Get localized am/pm labels\n  const periodLabels = useMemo(() => getLocalizedPeriodLabels(resolvedLocale), [resolvedLocale])\n\n  // Generate localized ARIA label for period select\n  const selectPeriodAriaLabel = useMemo(() => formatSelectPeriodLabel(periodLabels, mergedTranslations.selectPeriodTemplate), [mergedTranslations.selectPeriodTemplate, periodLabels])\n\n  const is24Hour = effectiveHourFormat === '24'\n  const period = date ? getPeriodFromHours(date.getHours()) : 'am'\n\n  const handlePeriodChange = (newPeriod: Period) => {\n    if (!date) {\n      // Match DateTimeInput behavior: initialize from today's date at midnight.\n      const initialDate = new Date()\n      initialDate.setHours(newPeriod === 'pm' ? 12 : 0, 0, 0, 0)\n      onChange(initialDate)\n      onPeriodChange?.(newPeriod)\n      return\n    }\n\n    // Update the date to reflect the new period\n    const newDate = new Date(date)\n    const currentHours = newDate.getHours()\n    const currentPeriod = getPeriodFromHours(currentHours)\n\n    if (currentPeriod !== newPeriod) {\n      // Toggle between am and pm (add or subtract 12 hours)\n      const adjustment = newPeriod === 'pm' ? 12 : -12\n      newDate.setHours(currentHours + adjustment)\n      onChange(newDate)\n    }\n\n    onPeriodChange?.(newPeriod)\n  }\n\n  return (\n    <div aria-label={is24Hour ? mergedTranslations.timePicker24Hour : mergedTranslations.timePicker12Hour} className={cn('gap-1 inline-flex items-center', className)} data-slot='time-picker' data-testid='spectral-time-picker' role='group' {...props}>\n      <DateTimeInput\n        aria-label={is24Hour ? mergedTranslations.hours24 : mergedTranslations.hours12}\n        className='w-12'\n        data-testid='spectral-time-picker-hours'\n        date={date}\n        locale={resolvedLocale}\n        onRightFocus={() => minuteRef.current?.focus()}\n        period={is24Hour ? undefined : period}\n        picker={is24Hour ? 'hours' : '12hours'}\n        ref={hourRef}\n        setDate={onChange}\n        translations={mergedTranslations}\n      />\n\n      <span aria-hidden='true' className='select-none'>\n        :\n      </span>\n\n      <DateTimeInput\n        aria-label={mergedTranslations.minutes}\n        className='w-12'\n        data-testid='spectral-time-picker-minutes'\n        date={date}\n        locale={resolvedLocale}\n        onLeftFocus={() => hourRef.current?.focus()}\n        onRightFocus={!is24Hour ? () => periodRef.current?.focus() : undefined}\n        period={is24Hour ? undefined : period}\n        picker='minutes'\n        ref={minuteRef}\n        setDate={onChange}\n        translations={mergedTranslations}\n      />\n\n      {!is24Hour && <TimePeriodSelect ariaLabel={selectPeriodAriaLabel} labels={periodLabels} onLeftFocus={() => minuteRef.current?.focus()} onPeriodChange={handlePeriodChange} period={period} ref={periodRef} />}\n    </div>\n  )\n}\nTimePicker.displayName = 'TimePicker'\n"],"mappings":";;;;;;;;;AAgBA,MAAa,cAAc,EAAE,WAAW,MAAM,YAAY,QAAQ,UAAU,gBAAgB,cAAc,GAAG,YAA6B;CACxI,MAAM,YAAY,OAAyB,KAAI;CAC/C,MAAM,UAAU,OAAyB,KAAI;CAC7C,MAAM,YAAY,OAA0B,KAAI;CAGhD,MAAM,iBAAiB,cAAc,kBAAkB,OAAO,EAAE,CAAC,OAAO,CAAA;CAGxE,MAAM,qBAAqB,eAAe;EAAE,GAAG;EAAsB,GAAG;EAAc,GAAG,CAAC,aAAa,CAAA;CAGvG,MAAM,sBAAsB,cAAc,cAAc,iBAAiB,eAAe,EAAE,CAAC,YAAY,eAAe,CAAA;CAGtH,MAAM,eAAe,cAAc,yBAAyB,eAAe,EAAE,CAAC,eAAe,CAAA;CAG7F,MAAM,wBAAwB,cAAc,wBAAwB,cAAc,mBAAmB,qBAAqB,EAAE,CAAC,mBAAmB,sBAAsB,aAAa,CAAA;CAEnL,MAAM,WAAW,wBAAwB;CACzC,MAAM,SAAS,OAAO,mBAAmB,KAAK,UAAU,CAAC,GAAG;CAE5D,MAAM,sBAAsB,cAAsB;AAChD,MAAI,CAAC,MAAM;GAET,MAAM,8BAAc,IAAI,MAAK;AAC7B,eAAY,SAAS,cAAc,OAAO,KAAK,GAAG,GAAG,GAAG,EAAC;AACzD,YAAS,YAAW;AACpB,oBAAiB,UAAS;AAC1B;;EAIF,MAAM,UAAU,IAAI,KAAK,KAAI;EAC7B,MAAM,eAAe,QAAQ,UAAS;AAGtC,MAFsB,mBAAmB,aAExB,KAAK,WAAW;GAE/B,MAAM,aAAa,cAAc,OAAO,KAAK;AAC7C,WAAQ,SAAS,eAAe,WAAU;AAC1C,YAAS,QAAO;;AAGlB,mBAAiB,UAAS;;AAG5B,QACE,qBAAC,OAAD;EAAK,cAAY,WAAW,mBAAmB,mBAAmB,mBAAmB;EAAkB,WAAW,GAAG,kCAAkC,UAAU;EAAE,aAAU;EAAiD,MAAK;EAAQ,GAAI;YAA/O;GACE,oBAAC,eAAD;IACE,cAAY,WAAW,mBAAmB,UAAU,mBAAmB;IACvE,WAAU;IAEJ;IACN,QAAQ;IACR,oBAAoB,UAAU,SAAS,OAAO;IAC9C,QAAQ,WAAW,SAAY;IAC/B,QAAQ,WAAW,UAAU;IAC7B,KAAK;IACL,SAAS;IACT,cAAc;IACf;GAED,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;cAAa;IAE1C;GAEN,oBAAC,eAAD;IACE,cAAY,mBAAmB;IAC/B,WAAU;IAEJ;IACN,QAAQ;IACR,mBAAmB,QAAQ,SAAS,OAAO;IAC3C,cAAc,CAAC,iBAAiB,UAAU,SAAS,OAAO,GAAG;IAC7D,QAAQ,WAAW,SAAY;IAC/B,QAAO;IACP,KAAK;IACL,SAAS;IACT,cAAc;IACf;GAEA,CAAC,YAAY,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,QAAQ;IAAc,mBAAmB,UAAU,SAAS,OAAO;IAAE,gBAAgB;IAA4B;IAAQ,KAAK;IAAa;GAC1M;;;AAGT,WAAW,cAAc"}
+{"version":3,"file":"TimePicker.js","names":[],"sources":["../../src/components/DateTimePicker/TimePicker.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { useMemo, useRef, type ComponentProps } from 'react'\nimport { DateTimeInput } from './DateTimeInput'\nimport { DEFAULT_TRANSLATIONS, detectHourFormat, formatSelectPeriodLabel, getLocalizedPeriodLabels, getPeriodFromHours, getResolvedLocale, type HourFormat, type Period, type TimePickerTranslations } from './DateTimeUtils'\nimport { TimePeriodSelect } from './TimePeriodSelect'\n\nexport interface TimePickerProps extends Omit<ComponentProps<'div'>, 'onChange'> {\n  date: Date | undefined\n  hourFormat?: HourFormat\n  locale?: string\n  onChange: (date: Date | undefined) => void\n  onPeriodChange?: (newPeriod: Period) => void\n  /** Override translation strings for ARIA labels */\n  translations?: Partial<TimePickerTranslations>\n}\n\nexport const TimePicker = ({ className, date, hourFormat, locale, onChange, onPeriodChange, translations, ...props }: TimePickerProps) => {\n  const minuteRef = useRef<HTMLInputElement>(null)\n  const hourRef = useRef<HTMLInputElement>(null)\n  const periodRef = useRef<HTMLButtonElement>(null)\n\n  // Resolve locale with fallback chain\n  const resolvedLocale = useMemo(() => getResolvedLocale(locale), [locale])\n\n  // Merge translations with defaults\n  const mergedTranslations = useMemo(() => ({ ...DEFAULT_TRANSLATIONS, ...translations }), [translations])\n\n  // Auto-detect hour format from locale if not explicitly provided\n  const effectiveHourFormat = useMemo(() => hourFormat ?? detectHourFormat(resolvedLocale), [hourFormat, resolvedLocale])\n\n  // Get localized am/pm labels\n  const periodLabels = useMemo(() => getLocalizedPeriodLabels(resolvedLocale), [resolvedLocale])\n\n  // Generate localized ARIA label for period select\n  const selectPeriodAriaLabel = useMemo(() => formatSelectPeriodLabel(periodLabels, mergedTranslations.selectPeriodTemplate), [mergedTranslations.selectPeriodTemplate, periodLabels])\n\n  const is24Hour = effectiveHourFormat === '24'\n  const period = date ? getPeriodFromHours(date.getHours()) : 'am'\n\n  const handlePeriodChange = (newPeriod: Period) => {\n    if (!date) {\n      // Match DateTimeInput behavior: initialize from today's date at midnight.\n      const initialDate = new Date()\n      initialDate.setHours(newPeriod === 'pm' ? 12 : 0, 0, 0, 0)\n      onChange(initialDate)\n      onPeriodChange?.(newPeriod)\n      return\n    }\n\n    // Update the date to reflect the new period\n    const newDate = new Date(date)\n    const currentHours = newDate.getHours()\n    const currentPeriod = getPeriodFromHours(currentHours)\n\n    if (currentPeriod !== newPeriod) {\n      // Toggle between am and pm (add or subtract 12 hours)\n      const adjustment = newPeriod === 'pm' ? 12 : -12\n      newDate.setHours(currentHours + adjustment)\n      onChange(newDate)\n    }\n\n    onPeriodChange?.(newPeriod)\n  }\n\n  return (\n    <div\n      aria-label={is24Hour ? mergedTranslations.timePicker24Hour : mergedTranslations.timePicker12Hour}\n      className={cn('gap-1 inline-flex items-center', className)}\n      data-slot='time-picker'\n      data-testid='spectral-time-picker'\n      role='group'\n      {...props}\n    >\n      <DateTimeInput\n        aria-label={is24Hour ? mergedTranslations.hours24 : mergedTranslations.hours12}\n        className='w-12'\n        data-testid='spectral-time-picker-hours'\n        date={date}\n        locale={resolvedLocale}\n        onRightFocus={() => minuteRef.current?.focus()}\n        period={is24Hour ? undefined : period}\n        picker={is24Hour ? 'hours' : '12hours'}\n        ref={hourRef}\n        setDate={onChange}\n        translations={mergedTranslations}\n      />\n\n      <span\n        aria-hidden='true'\n        className='select-none'\n      >\n        :\n      </span>\n\n      <DateTimeInput\n        aria-label={mergedTranslations.minutes}\n        className='w-12'\n        data-testid='spectral-time-picker-minutes'\n        date={date}\n        locale={resolvedLocale}\n        onLeftFocus={() => hourRef.current?.focus()}\n        onRightFocus={!is24Hour ? () => periodRef.current?.focus() : undefined}\n        period={is24Hour ? undefined : period}\n        picker='minutes'\n        ref={minuteRef}\n        setDate={onChange}\n        translations={mergedTranslations}\n      />\n\n      {!is24Hour && (\n        <TimePeriodSelect\n          ariaLabel={selectPeriodAriaLabel}\n          labels={periodLabels}\n          onLeftFocus={() => minuteRef.current?.focus()}\n          onPeriodChange={handlePeriodChange}\n          period={period}\n          ref={periodRef}\n        />\n      )}\n    </div>\n  )\n}\nTimePicker.displayName = 'TimePicker'\n"],"mappings":";;;;;;;;;AAgBA,MAAa,cAAc,EAAE,WAAW,MAAM,YAAY,QAAQ,UAAU,gBAAgB,cAAc,GAAG,YAA6B;CACxI,MAAM,YAAY,OAAyB,KAAI;CAC/C,MAAM,UAAU,OAAyB,KAAI;CAC7C,MAAM,YAAY,OAA0B,KAAI;CAGhD,MAAM,iBAAiB,cAAc,kBAAkB,OAAO,EAAE,CAAC,OAAO,CAAA;CAGxE,MAAM,qBAAqB,eAAe;EAAE,GAAG;EAAsB,GAAG;EAAc,GAAG,CAAC,aAAa,CAAA;CAGvG,MAAM,sBAAsB,cAAc,cAAc,iBAAiB,eAAe,EAAE,CAAC,YAAY,eAAe,CAAA;CAGtH,MAAM,eAAe,cAAc,yBAAyB,eAAe,EAAE,CAAC,eAAe,CAAA;CAG7F,MAAM,wBAAwB,cAAc,wBAAwB,cAAc,mBAAmB,qBAAqB,EAAE,CAAC,mBAAmB,sBAAsB,aAAa,CAAA;CAEnL,MAAM,WAAW,wBAAwB;CACzC,MAAM,SAAS,OAAO,mBAAmB,KAAK,UAAU,CAAC,GAAG;CAE5D,MAAM,sBAAsB,cAAsB;AAChD,MAAI,CAAC,MAAM;GAET,MAAM,8BAAc,IAAI,MAAK;AAC7B,eAAY,SAAS,cAAc,OAAO,KAAK,GAAG,GAAG,GAAG,EAAC;AACzD,YAAS,YAAW;AACpB,oBAAiB,UAAS;AAC1B;;EAIF,MAAM,UAAU,IAAI,KAAK,KAAI;EAC7B,MAAM,eAAe,QAAQ,UAAS;AAGtC,MAFsB,mBAAmB,aAExB,KAAK,WAAW;GAE/B,MAAM,aAAa,cAAc,OAAO,KAAK;AAC7C,WAAQ,SAAS,eAAe,WAAU;AAC1C,YAAS,QAAO;;AAGlB,mBAAiB,UAAS;;AAG5B,QACE,qBAAC,OAAD;EACE,cAAY,WAAW,mBAAmB,mBAAmB,mBAAmB;EAChF,WAAW,GAAG,kCAAkC,UAAU;EAC1D,aAAU;EAEV,MAAK;EACL,GAAI;YANN;GAQE,oBAAC,eAAD;IACE,cAAY,WAAW,mBAAmB,UAAU,mBAAmB;IACvE,WAAU;IAEJ;IACN,QAAQ;IACR,oBAAoB,UAAU,SAAS,OAAO;IAC9C,QAAQ,WAAW,SAAY;IAC/B,QAAQ,WAAW,UAAU;IAC7B,KAAK;IACL,SAAS;IACT,cAAc;IACf;GAED,oBAAC,QAAD;IACE,eAAY;IACZ,WAAU;cACZ;IAEM;GAEN,oBAAC,eAAD;IACE,cAAY,mBAAmB;IAC/B,WAAU;IAEJ;IACN,QAAQ;IACR,mBAAmB,QAAQ,SAAS,OAAO;IAC3C,cAAc,CAAC,iBAAiB,UAAU,SAAS,OAAO,GAAG;IAC7D,QAAQ,WAAW,SAAY;IAC/B,QAAO;IACP,KAAK;IACL,SAAS;IACT,cAAc;IACf;GAEA,CAAC,YACA,oBAAC,kBAAD;IACE,WAAW;IACX,QAAQ;IACR,mBAAmB,UAAU,SAAS,OAAO;IAC7C,gBAAgB;IACR;IACR,KAAK;IACN;GAEA;;;AAGT,WAAW,cAAc"}

package/dist/DateTimePicker.d.ts

@@ -32,7 +32,7 @@ interface DateTimePickerProps extends Omit<ComponentProps<'div'>, 'onChange' | '
    * The date treated as "today" in the calendar. Receives the `rdp-today` styling and is used as
    * the reference for `disablePastDates`. When no value is selected, the calendar opens to this
    * date's month instead of the current month. Useful when assigning dates around historical data.
-  */
+   */
   today?: Date;
   /** Override translation strings for time picker ARIA labels */
   timeTranslations?: Partial<TimePickerTranslations>;

package/dist/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import { CalendarIcon } from '@components/Icons'\nimport { Popover, PopoverContent, PopoverTrigger } from '@components/Popover/Popover'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { ErrorMessage, getErrorMessageId, getWarningMessageId, useFormFieldId, WarningMessage } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useMemo, type ComponentProps } from 'react'\nimport { type Locale } from 'react-day-picker'\nimport { Calendar, type CalendarProps } from './Calendar'\nimport { DateTimeDisplayInput } from './DateTimeDisplayInput'\nimport { detectHourFormat, getResolvedLocale, type HourFormat, type Period, type TimePickerTranslations } from './DateTimeUtils'\nimport { TimePicker } from './TimePicker'\n\nexport interface DateTimePickerProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {\n  calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'disablePastDates' | 'locale'>\n  defaultValue?: Date\n  disabled?: boolean\n  disablePastDates?: boolean\n  errorMessage?: string | string[] | Record<string, unknown> | null\n  hideTimePicker?: boolean\n  hourFormat?: HourFormat\n  inputClassName?: string\n  label?: string\n  locale?: Partial<Locale>\n  maxDate?: Date\n  minDate?: Date\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  onChange?: (date: Date | undefined) => void\n  state?: 'default' | 'disabled' | 'error' | 'warning'\n  timeLocale?: string\n  /**\n   * The date treated as \"today\" in the calendar. Receives the `rdp-today` styling and is used as\n   * the reference for `disablePastDates`. When no value is selected, the calendar opens to this\n   * date's month instead of the current month. Useful when assigning dates around historical data.\n  */\n  today?: Date\n  /** Override translation strings for time picker ARIA labels */\n  timeTranslations?: Partial<TimePickerTranslations>\n  value?: Date\n  warningMessage?: string | string[] | Record<string, unknown> | null\n}\n\nexport const DateTimePicker = ({\n  calendarProps,\n  className,\n  defaultValue,\n  disabled = false,\n  disablePastDates = true,\n  errorMessage,\n  hideTimePicker = false,\n  hourFormat,\n  id,\n  inputClassName,\n  label,\n  locale,\n  maxDate,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  minDate,\n  onChange,\n  state = 'default',\n  timeLocale,\n  timeTranslations,\n  today,\n  value,\n  warningMessage,\n  ...props\n}: DateTimePickerProps) => {\n  const fieldId = useFormFieldId(id)\n  const errorMessageId = getErrorMessageId(fieldId)\n  const warningMessageId = getWarningMessageId(fieldId)\n  const describedBy = state === 'error' && errorMessage ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const [date, setDate] = useUncontrolledState<Date | undefined>({\n    defaultValue,\n    onChange,\n    value,\n  })\n\n  // Resolve time locale with fallback chain\n  const resolvedTimeLocale = useMemo(() => getResolvedLocale(timeLocale), [timeLocale])\n\n  // Auto-detect hour format from locale if not explicitly provided\n  const effectiveHourFormat = useMemo(() => hourFormat ?? detectHourFormat(resolvedTimeLocale), [hourFormat, resolvedTimeLocale])\n\n  const handleDateSelect = (selectedDate: Date | undefined) => {\n    if (!selectedDate) {\n      setDate(undefined)\n      return\n    }\n\n    // Preserve the time from the existing date\n    if (date) {\n      selectedDate.setHours(date.getHours(), date.getMinutes(), 0, 0)\n    }\n\n    setDate(selectedDate)\n  }\n\n  const handleTimeChange = useCallback(\n    (newDate: Date | undefined) => {\n      setDate(newDate)\n    },\n    [setDate],\n  )\n\n  const handlePeriodChange = (period: Period) => {\n    // Period change is already handled in TimePicker\n    // This callback is for external consumers who want to react to period changes\n    void period\n  }\n\n  const handleInputDateChange = (newDate: Date | undefined) => {\n    setDate(newDate)\n  }\n\n  return (\n    <Popover>\n      <div className={cn('w-full', className)} data-slot='datetime-picker' data-testid='spectral-datetime-picker' {...props}>\n        <DateTimeDisplayInput\n          aria-describedby={describedBy}\n          aria-invalid={state === 'error'}\n          className={cn('gap-4 pr-12 flex w-full justify-start', !date && 'text-text-secondary', inputClassName)}\n          data-testid='spectral-datetime-picker-input'\n          disabled={disabled}\n          endIcon={\n            <PopoverTrigger asChild disabled={disabled}>\n              <CalendarIcon\n                aria-label='Open date picker'\n                className={cn('right-4 text-input-icon hover:text-input-icon--hover absolute top-1/2 -translate-y-1/2 cursor-pointer focus:outline-none', disabled ? 'pointer-events-none cursor-not-allowed opacity-50' : 'hover:text-input-icon--hover cursor-pointer')}\n                data-testid='spectral-datetime-picker-trigger'\n                disabled={disabled}\n              />\n            </PopoverTrigger>\n          }\n          hourFormat={effectiveHourFormat}\n          id={fieldId}\n          label={label}\n          onChange={handleInputDateChange}\n          hideTime={hideTimePicker}\n          state={state}\n          value={date}\n        />\n        <ErrorMessage\n          dataTestId='spectral-datetime-picker-error-message'\n          id={errorMessageId}\n          message={state === 'error' ? errorMessage : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace}\n        />\n        <WarningMessage\n          dataTestId='spectral-datetime-picker-warning-message'\n          id={warningMessageId}\n          message={state === 'warning' ? warningMessage : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace}\n        />\n      </div>\n\n      <PopoverContent\n        align='start'\n        className={cn('rounded-lg py-4 px-6 flex', hideTimePicker ? 'w-[330px]' : effectiveHourFormat === '24' ? 'w-[486px]' : 'w-[560px]')}\n        data-testid='spectral-datetime-picker-popover'\n        onOpenAutoFocus={(e) => e.preventDefault()}\n      >\n        <Calendar {...calendarProps} defaultMonth={calendarProps?.defaultMonth ?? date ?? today ?? minDate} disablePastDates={disablePastDates} locale={locale} maxDate={maxDate} minDate={minDate} mode='single' onSelect={handleDateSelect} selected={date} today={today} />\n        {!hideTimePicker && (\n          <div className='pl-6 border-l border-border-secondary'>\n            <TimePicker date={date} hourFormat={effectiveHourFormat} locale={resolvedTimeLocale} onChange={handleTimeChange} onPeriodChange={handlePeriodChange} translations={timeTranslations} />\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nDateTimePicker.displayName = 'DateTimePicker'\n\n// Re-export sub-components for granular usage\nexport { Calendar } from './Calendar'\nexport { DateTimeDisplayInput } from './DateTimeDisplayInput'\nexport { DateTimeInput } from './DateTimeInput'\nexport { TimePeriodSelect } from './TimePeriodSelect'\nexport { TimePicker } from './TimePicker'\nexport * from './DateTimeUtils'\nexport { type Locale } from 'react-day-picker'\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,MAAa,kBAAkB,EAC7B,eACA,WACA,cACA,WAAW,OACX,mBAAmB,MACnB,cACA,iBAAiB,OACjB,YACA,IACA,gBACA,OACA,QACA,SACA,sBAAsB,GACtB,sBAAsB,OACtB,SACA,UACA,QAAQ,WACR,YACA,kBACA,OACA,OACA,gBACA,GAAG,YACsB;CACzB,MAAM,UAAU,eAAe,GAAE;CACjC,MAAM,iBAAiB,kBAAkB,QAAO;CAChD,MAAM,mBAAmB,oBAAoB,QAAO;CACpD,MAAM,cAAc,UAAU,WAAW,eAAe,iBAAiB,UAAU,aAAa,iBAAiB,mBAAmB;CACpI,MAAM,CAAC,MAAM,WAAW,qBAAuC;EAC7D;EACA;EACA;EACD,CAAA;CAGD,MAAM,qBAAqB,cAAc,kBAAkB,WAAW,EAAE,CAAC,WAAW,CAAA;CAGpF,MAAM,sBAAsB,cAAc,cAAc,iBAAiB,mBAAmB,EAAE,CAAC,YAAY,mBAAmB,CAAA;CAE9H,MAAM,oBAAoB,iBAAmC;AAC3D,MAAI,CAAC,cAAc;AACjB,WAAQ,OAAS;AACjB;;AAIF,MAAI,KACF,cAAa,SAAS,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,GAAG,EAAC;AAGhE,UAAQ,aAAY;;CAGtB,MAAM,mBAAmB,aACtB,YAA8B;AAC7B,UAAQ,QAAO;IAEjB,CAAC,QAAQ,CACX;CAEA,MAAM,sBAAsB,WAAmB;CAM/C,MAAM,yBAAyB,YAA8B;AAC3D,UAAQ,QAAO;;AAGjB,QACE,qBAAC,SAAD,aACE,qBAAC,OAAD;EAAK,WAAW,GAAG,UAAU,UAAU;EAAE,aAAU;EAAyD,GAAI;YAAhH;GACE,oBAAC,sBAAD;IACE,oBAAkB;IAClB,gBAAc,UAAU;IACxB,WAAW,GAAG,yCAAyC,CAAC,QAAQ,uBAAuB,eAAe;IAE5F;IACV,SACE,oBAAC,gBAAD;KAAgB;KAAkB;eAChC,oBAAC,cAAD;MACE,cAAW;MACX,WAAW,GAAG,4HAA4H,WAAW,sDAAsD,8CAA8C;MAE/O;MACX;KACa;IAElB,YAAY;IACZ,IAAI;IACG;IACP,UAAU;IACV,UAAU;IACH;IACP,OAAO;IACR;GACD,oBAAC,cAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,UAAU,eAAe;IACvB;IACA;IACtB;GACD,oBAAC,gBAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,YAAY,iBAAiB;IAC3B;IACA;IACtB;GACE;KAEL,qBAAC,gBAAD;EACE,OAAM;EACN,WAAW,GAAG,6BAA6B,iBAAiB,cAAc,wBAAwB,OAAO,cAAc,YAAY;EAEnI,kBAAkB,MAAM,EAAE,gBAAgB;YAJ5C,CAME,oBAAC,UAAD;GAAU,GAAI;GAAe,cAAc,eAAe,gBAAgB,QAAQ,SAAS;GAA2B;GAA0B;GAAiB;GAAkB;GAAS,MAAK;GAAS,UAAU;GAAkB,UAAU;GAAa;GAAQ,GACpQ,CAAC,kBACA,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,YAAD;IAAkB;IAAM,YAAY;IAAqB,QAAQ;IAAoB,UAAU;IAAkB,gBAAgB;IAAoB,cAAc;IAAmB;GACnL,EAEO;IACT;;AAIb,eAAe,cAAc"}
+{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import { CalendarIcon } from '@components/Icons'\nimport { Popover, PopoverContent, PopoverTrigger } from '@components/Popover/Popover'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { ErrorMessage, getErrorMessageId, getWarningMessageId, useFormFieldId, WarningMessage } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useMemo, type ComponentProps } from 'react'\nimport { type Locale } from 'react-day-picker'\nimport { Calendar, type CalendarProps } from './Calendar'\nimport { DateTimeDisplayInput } from './DateTimeDisplayInput'\nimport { detectHourFormat, getResolvedLocale, type HourFormat, type Period, type TimePickerTranslations } from './DateTimeUtils'\nimport { TimePicker } from './TimePicker'\n\nexport interface DateTimePickerProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {\n  calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'disablePastDates' | 'locale'>\n  defaultValue?: Date\n  disabled?: boolean\n  disablePastDates?: boolean\n  errorMessage?: string | string[] | Record<string, unknown> | null\n  hideTimePicker?: boolean\n  hourFormat?: HourFormat\n  inputClassName?: string\n  label?: string\n  locale?: Partial<Locale>\n  maxDate?: Date\n  minDate?: Date\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  onChange?: (date: Date | undefined) => void\n  state?: 'default' | 'disabled' | 'error' | 'warning'\n  timeLocale?: string\n  /**\n   * The date treated as \"today\" in the calendar. Receives the `rdp-today` styling and is used as\n   * the reference for `disablePastDates`. When no value is selected, the calendar opens to this\n   * date's month instead of the current month. Useful when assigning dates around historical data.\n   */\n  today?: Date\n  /** Override translation strings for time picker ARIA labels */\n  timeTranslations?: Partial<TimePickerTranslations>\n  value?: Date\n  warningMessage?: string | string[] | Record<string, unknown> | null\n}\n\nexport const DateTimePicker = ({\n  calendarProps,\n  className,\n  defaultValue,\n  disabled = false,\n  disablePastDates = true,\n  errorMessage,\n  hideTimePicker = false,\n  hourFormat,\n  id,\n  inputClassName,\n  label,\n  locale,\n  maxDate,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  minDate,\n  onChange,\n  state = 'default',\n  timeLocale,\n  timeTranslations,\n  today,\n  value,\n  warningMessage,\n  ...props\n}: DateTimePickerProps) => {\n  const fieldId = useFormFieldId(id)\n  const errorMessageId = getErrorMessageId(fieldId)\n  const warningMessageId = getWarningMessageId(fieldId)\n  const describedBy = state === 'error' && errorMessage ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const [date, setDate] = useUncontrolledState<Date | undefined>({\n    defaultValue,\n    onChange,\n    value,\n  })\n\n  // Resolve time locale with fallback chain\n  const resolvedTimeLocale = useMemo(() => getResolvedLocale(timeLocale), [timeLocale])\n\n  // Auto-detect hour format from locale if not explicitly provided\n  const effectiveHourFormat = useMemo(() => hourFormat ?? detectHourFormat(resolvedTimeLocale), [hourFormat, resolvedTimeLocale])\n\n  const handleDateSelect = (selectedDate: Date | undefined) => {\n    if (!selectedDate) {\n      setDate(undefined)\n      return\n    }\n\n    // Preserve the time from the existing date\n    if (date) {\n      selectedDate.setHours(date.getHours(), date.getMinutes(), 0, 0)\n    }\n\n    setDate(selectedDate)\n  }\n\n  const handleTimeChange = useCallback(\n    (newDate: Date | undefined) => {\n      setDate(newDate)\n    },\n    [setDate],\n  )\n\n  const handlePeriodChange = (period: Period) => {\n    // Period change is already handled in TimePicker\n    // This callback is for external consumers who want to react to period changes\n    void period\n  }\n\n  const handleInputDateChange = (newDate: Date | undefined) => {\n    setDate(newDate)\n  }\n\n  return (\n    <Popover>\n      <div\n        className={cn('w-full', className)}\n        data-slot='datetime-picker'\n        data-testid='spectral-datetime-picker'\n        {...props}\n      >\n        <DateTimeDisplayInput\n          aria-describedby={describedBy}\n          aria-invalid={state === 'error'}\n          className={cn('gap-4 pr-12 flex w-full justify-start', !date && 'text-text-secondary', inputClassName)}\n          data-testid='spectral-datetime-picker-input'\n          disabled={disabled}\n          endIcon={\n            <PopoverTrigger\n              asChild\n              disabled={disabled}\n            >\n              <CalendarIcon\n                aria-label='Open date picker'\n                className={cn('right-4 text-input-icon hover:text-input-icon--hover absolute top-1/2 -translate-y-1/2 cursor-pointer focus:outline-none', disabled ? 'pointer-events-none cursor-not-allowed opacity-50' : 'hover:text-input-icon--hover cursor-pointer')}\n                data-testid='spectral-datetime-picker-trigger'\n                disabled={disabled}\n              />\n            </PopoverTrigger>\n          }\n          hourFormat={effectiveHourFormat}\n          id={fieldId}\n          label={label}\n          onChange={handleInputDateChange}\n          hideTime={hideTimePicker}\n          state={state}\n          value={date}\n        />\n        <ErrorMessage\n          dataTestId='spectral-datetime-picker-error-message'\n          id={errorMessageId}\n          message={state === 'error' ? errorMessage : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace}\n        />\n        <WarningMessage\n          dataTestId='spectral-datetime-picker-warning-message'\n          id={warningMessageId}\n          message={state === 'warning' ? warningMessage : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace}\n        />\n      </div>\n\n      <PopoverContent\n        align='start'\n        className={cn('rounded-lg py-4 px-6 flex', hideTimePicker ? 'w-[330px]' : effectiveHourFormat === '24' ? 'w-[486px]' : 'w-[560px]')}\n        data-testid='spectral-datetime-picker-popover'\n        onOpenAutoFocus={(e) => e.preventDefault()}\n      >\n        <Calendar\n          {...calendarProps}\n          defaultMonth={calendarProps?.defaultMonth ?? date ?? today ?? minDate}\n          disablePastDates={disablePastDates}\n          locale={locale}\n          maxDate={maxDate}\n          minDate={minDate}\n          mode='single'\n          onSelect={handleDateSelect}\n          selected={date}\n          today={today}\n        />\n        {!hideTimePicker && (\n          <div className='pl-6 border-l border-border-secondary'>\n            <TimePicker\n              date={date}\n              hourFormat={effectiveHourFormat}\n              locale={resolvedTimeLocale}\n              onChange={handleTimeChange}\n              onPeriodChange={handlePeriodChange}\n              translations={timeTranslations}\n            />\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nDateTimePicker.displayName = 'DateTimePicker'\n\n// Re-export sub-components for granular usage\nexport { Calendar } from './Calendar'\nexport { DateTimeDisplayInput } from './DateTimeDisplayInput'\nexport { DateTimeInput } from './DateTimeInput'\nexport { TimePeriodSelect } from './TimePeriodSelect'\nexport { TimePicker } from './TimePicker'\nexport * from './DateTimeUtils'\nexport { type Locale } from 'react-day-picker'\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,MAAa,kBAAkB,EAC7B,eACA,WACA,cACA,WAAW,OACX,mBAAmB,MACnB,cACA,iBAAiB,OACjB,YACA,IACA,gBACA,OACA,QACA,SACA,sBAAsB,GACtB,sBAAsB,OACtB,SACA,UACA,QAAQ,WACR,YACA,kBACA,OACA,OACA,gBACA,GAAG,YACsB;CACzB,MAAM,UAAU,eAAe,GAAE;CACjC,MAAM,iBAAiB,kBAAkB,QAAO;CAChD,MAAM,mBAAmB,oBAAoB,QAAO;CACpD,MAAM,cAAc,UAAU,WAAW,eAAe,iBAAiB,UAAU,aAAa,iBAAiB,mBAAmB;CACpI,MAAM,CAAC,MAAM,WAAW,qBAAuC;EAC7D;EACA;EACA;EACD,CAAA;CAGD,MAAM,qBAAqB,cAAc,kBAAkB,WAAW,EAAE,CAAC,WAAW,CAAA;CAGpF,MAAM,sBAAsB,cAAc,cAAc,iBAAiB,mBAAmB,EAAE,CAAC,YAAY,mBAAmB,CAAA;CAE9H,MAAM,oBAAoB,iBAAmC;AAC3D,MAAI,CAAC,cAAc;AACjB,WAAQ,OAAS;AACjB;;AAIF,MAAI,KACF,cAAa,SAAS,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,GAAG,EAAC;AAGhE,UAAQ,aAAY;;CAGtB,MAAM,mBAAmB,aACtB,YAA8B;AAC7B,UAAQ,QAAO;IAEjB,CAAC,QAAQ,CACX;CAEA,MAAM,sBAAsB,WAAmB;CAM/C,MAAM,yBAAyB,YAA8B;AAC3D,UAAQ,QAAO;;AAGjB,QACE,qBAAC,SAAD,aACE,qBAAC,OAAD;EACE,WAAW,GAAG,UAAU,UAAU;EAClC,aAAU;EAEV,GAAI;YAJN;GAME,oBAAC,sBAAD;IACE,oBAAkB;IAClB,gBAAc,UAAU;IACxB,WAAW,GAAG,yCAAyC,CAAC,QAAQ,uBAAuB,eAAe;IAE5F;IACV,SACE,oBAAC,gBAAD;KACE;KACU;eAEV,oBAAC,cAAD;MACE,cAAW;MACX,WAAW,GAAG,4HAA4H,WAAW,sDAAsD,8CAA8C;MAE/O;MACX;KACa;IAElB,YAAY;IACZ,IAAI;IACG;IACP,UAAU;IACV,UAAU;IACH;IACP,OAAO;IACR;GACD,oBAAC,cAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,UAAU,eAAe;IACvB;IACA;IACtB;GACD,oBAAC,gBAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,YAAY,iBAAiB;IAC3B;IACA;IACtB;GACE;KAEL,qBAAC,gBAAD;EACE,OAAM;EACN,WAAW,GAAG,6BAA6B,iBAAiB,cAAc,wBAAwB,OAAO,cAAc,YAAY;EAEnI,kBAAkB,MAAM,EAAE,gBAAgB;YAJ5C,CAME,oBAAC,UAAD;GACE,GAAI;GACJ,cAAc,eAAe,gBAAgB,QAAQ,SAAS;GAC5C;GACV;GACC;GACA;GACT,MAAK;GACL,UAAU;GACV,UAAU;GACH;GACR,GACA,CAAC,kBACA,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,YAAD;IACQ;IACN,YAAY;IACZ,QAAQ;IACR,UAAU;IACV,gBAAgB;IAChB,cAAc;IACf;GACE,EAEO;IACT;;AAIb,eAAe,cAAc"}

package/dist/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","names":[],"sources":["../src/components/Dialog/Dialog.tsx"],"mappings":";;;;;;cAMM,MAAA;EAAM,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAIT,IAAA,CAAK,cAAA,QAAsB,eAAA,CAAgB,IAAA;EAC5C,MAAA;EACA,aAAA;AAAA,MACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAIK,aAAA;EAAA,GAAa;AAAA,GAAkB,cAAA,QAAsB,eAAA,CAAgB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAI7E,YAAA;EAAA,GAAY;AAAA,GAAkB,cAAA,QAAsB,eAAA,CAAgB,MAAA,MAAO,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAI3E,WAAA;EAAW,SAAA;EAAA,GAAA;AAAA,GAA6B,cAAA,QAAsB,eAAA,CAAgB,KAAA,MAAM,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAIpF,aAAA;EAAa,SAAA;EAAA,GAAA;AAAA,GAA6B,cAAA,QAAsB,eAAA,CAAgB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAYxF,aAAA;EAAa,QAAA;EAAA,SAAA;EAAA,aAAA;EAAA,eAAA;EAAA,iBAAA;EAAA,oBAAA;EAAA,eAAA;EAAA,GAAA;AAAA,GAShB,cAAA,QAAsB,eAAA,CAAgB,OAAA;EACvC,aAAA;EACA,eAAA,IAAmB,KAAA,EAAO,aAAA;EAC1B,iBAAA,IAAqB,KAAA,EAAO,YAAA,GAAe,UAAA;EAC3C,oBAAA,IAAwB,KAAA,EAAO,YAAA;EAC/B,eAAA;AAAA,MACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAmCK,YAAA;EAAY,SAAA;EAAA,GAAA;AAAA,GAA6B,cAAA,YAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAI9D,YAAA;EAAY,SAAA;EAAA,GAAA;AAAA,GAA6B,cAAA,YAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAM9D,WAAA;EAAW,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAuC,cAAA,QAAsB,eAAA,CAAgB,KAAA,MAAM,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAY9F,iBAAA;EAAiB,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAuC,cAAA,QAAsB,eAAA,CAAgB,WAAA,MAAY,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Dialog.d.ts","names":[],"sources":["../src/components/Dialog/Dialog.tsx"],"mappings":";;;;;;cAMM,MAAA;EAAM,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAIT,IAAA,CAAK,cAAA,QAAsB,eAAA,CAAgB,IAAA;EAC5C,MAAA;EACA,aAAA;AAAA,MACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAYK,aAAA;EAAA,GAAa;AAAA,GAAkB,cAAA,QAAsB,eAAA,CAAgB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAU7E,YAAA;EAAA,GAAY;AAAA,GAAkB,cAAA,QAAsB,eAAA,CAAgB,MAAA,MAAO,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAU3E,WAAA;EAAW,SAAA;EAAA,GAAA;AAAA,GAA6B,cAAA,QAAsB,eAAA,CAAgB,KAAA,MAAM,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAYpF,aAAA;EAAa,SAAA;EAAA,GAAA;AAAA,GAA6B,cAAA,QAAsB,eAAA,CAAgB,OAAA,MAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAWxF,aAAA;EAAa,QAAA;EAAA,SAAA;EAAA,aAAA;EAAA,eAAA;EAAA,iBAAA;EAAA,oBAAA;EAAA,eAAA;EAAA,GAAA;AAAA,GAShB,cAAA,QAAsB,eAAA,CAAgB,OAAA;EACvC,aAAA;EACA,eAAA,IAAmB,KAAA,EAAO,aAAA;EAC1B,iBAAA,IAAqB,KAAA,EAAO,YAAA,GAAe,UAAA;EAC3C,oBAAA,IAAwB,KAAA,EAAO,YAAA;EAC/B,eAAA;AAAA,MACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAsCK,YAAA;EAAY,SAAA;EAAA,GAAA;AAAA,GAA6B,cAAA,YAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAW9D,YAAA;EAAY,SAAA;EAAA,GAAA;AAAA,GAA6B,cAAA,YAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAa9D,WAAA;EAAW,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAuC,cAAA,QAAsB,eAAA,CAAgB,KAAA,MAAM,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAuC9F,iBAAA;EAAiB,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAuC,cAAA,QAAsB,eAAA,CAAgB,WAAA,MAAY,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Dialog.js

@@ -37,7 +37,7 @@ const DialogClose = ({ className, ...props }) => {
 };
 const DialogOverlay = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
-		className: cn("inset-0 bg-black/50 backdrop-blur-sm fixed z-50 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:animate-out", "motion-safe:data-[state=closed]:fade-out-0", className),
+		className: cn("inset-0 bg-black/50 backdrop-blur-sm fixed z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:fade-out-0", className),
 		"data-slot": "dialog-overlay",
 		...props
 	});
@@ -46,14 +46,14 @@ const DialogContent = ({ children, className, dialogOverlay = true, onEscapeKeyD
 	return /* @__PURE__ */ jsxs(DialogPortal, {
 		"data-slot": "dialog-portal",
 		children: [dialogOverlay && /* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
-			className: cn("max-w-xl gap-4 rounded-lg p-6 shadow-elevation-3 has-[[data-slot=dialog-footer]]:pb-0 fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full -translate-x-1/2 -translate-y-1/2 flex-col", "overflow-y-auto overscroll-contain bg-dialog-bg motion-safe:data-[state=open]:duration-200 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:slide-in-from-bottom-20", "motion-safe:data-[state=open]:zoom-in-100! motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95", RemoveScroll.classNames.fullWidth, className),
+			className: cn("max-w-xl gap-4 rounded-lg p-6 has-[[data-slot=dialog-footer]]:pb-0 fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full -translate-x-1/2 -translate-y-1/2 flex-col shadow-elevation-3", "overflow-y-auto overscroll-contain bg-dialog-bg motion-safe:data-[state=open]:duration-200 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:slide-in-from-bottom-20", "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-100!", RemoveScroll.classNames.fullWidth, className),
 			"data-slot": "dialog-content",
 			onEscapeKeyDown,
 			onInteractOutside,
 			onPointerDownOutside,
 			...props,
 			children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
-				className: `focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-accent data-[state=open]:text-text-primary top-4 right-4 rounded-xs absolute opacity-70 transition-opacity hover:opacity-100 hover:cursor-pointer disabled:pointer-events-none data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+				className: `top-4 right-4 rounded-xs absolute opacity-70 transition-opacity hover:cursor-pointer hover:opacity-100 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0`,
 				"data-slot": "dialog-close",
 				children: [/* @__PURE__ */ jsx(CloseIcon, { size: 18 }), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",

package/dist/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":[],"sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { CloseIcon } from '@components/Icons/CloseIcon'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cn } from '@utils/twUtils'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { RemoveScroll } from 'react-remove-scroll'\n\nconst Dialog = ({\n  isOpen,\n  modal = false,\n  ...props\n}: Omit<ComponentProps<typeof DialogPrimitive.Root>, 'open'> & {\n  isOpen?: boolean\n  dialogOverlay?: boolean\n}) => {\n  return <DialogPrimitive.Root open={isOpen} modal={modal} data-slot='dialog' data-testid='spectral-dialog' {...props} />\n}\n\nconst DialogTrigger = ({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>) => {\n  return <DialogPrimitive.Trigger asChild data-testid='spectral-dialog-trigger' {...props} />\n}\n\nconst DialogPortal = ({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>) => {\n  return <DialogPrimitive.Portal data-slot='dialog-portal' data-testid='dialog-portal' {...props} />\n}\n\nconst DialogClose = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Close>) => {\n  return <DialogPrimitive.Close asChild data-slot='dialog-close' data-testid='spectral-dialog-close' {...props} className={cn('hover:cursor-pointer', className)} />\n}\n\nconst DialogOverlay = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>) => {\n  return (\n    <DialogPrimitive.Overlay\n      className={cn('inset-0 bg-black/50 backdrop-blur-sm fixed z-50 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:animate-out',\n      'motion-safe:data-[state=closed]:fade-out-0', className)}\n      data-slot='dialog-overlay'\n      data-testid='spectral-dialog-overlay'\n      {...props}\n    />\n  )\n}\n\nconst DialogContent = ({\n  children,\n  className,\n  dialogOverlay = true,\n  onEscapeKeyDown,\n  onInteractOutside,\n  onPointerDownOutside,\n  showCloseButton = true,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Content> & {\n  dialogOverlay?: boolean\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  onInteractOutside?: (event: PointerEvent | FocusEvent) => void\n  onPointerDownOutside?: (event: PointerEvent) => void\n  showCloseButton?: boolean\n}) => {\n  return (\n    <DialogPortal data-slot='dialog-portal' data-testid='spectral-dialog-portal'>\n      {dialogOverlay && <DialogOverlay />}\n      <DialogPrimitive.Content\n        className={cn(\n          'max-w-xl gap-4 rounded-lg p-6 shadow-elevation-3 has-[[data-slot=dialog-footer]]:pb-0 fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full -translate-x-1/2 -translate-y-1/2 flex-col',\n          'overflow-y-auto overscroll-contain bg-dialog-bg motion-safe:data-[state=open]:duration-200 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:slide-in-from-bottom-20',\n          'motion-safe:data-[state=open]:zoom-in-100! motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95',\n          RemoveScroll.classNames.fullWidth,\n          className,\n        )}\n        data-slot='dialog-content'\n        data-testid='spectral-dialog-content'\n        onEscapeKeyDown={onEscapeKeyDown}\n        onInteractOutside={onInteractOutside}\n        onPointerDownOutside={onPointerDownOutside}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            className={`focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-accent data-[state=open]:text-text-primary top-4 right-4 rounded-xs absolute opacity-70 transition-opacity hover:opacity-100 hover:cursor-pointer disabled:pointer-events-none data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:shrink-0`}\n            data-slot='dialog-close'\n            data-testid='spectral-dialog-close'\n          >\n            <CloseIcon size={18} />\n            <span className='sr-only'>Close dialog</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nconst DialogHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('gap-2 sm:text-left flex flex-col text-center', className)} data-slot='dialog-header' data-testid='spectral-dialog-header' {...props} />\n}\n\nconst DialogFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('gap-2 sm:flex-row sm:justify-end bottom-0 py-4 px-6 -mx-6 sticky z-10 flex flex-col-reverse bg-dialog-bg/85', className)} data-slot='dialog-footer' data-testid='spectral-dialog-footer' {...props} />\n}\n\nconst hasTextContent = (value: ReactNode) => (typeof value === 'string' ? value.trim().length > 0 : typeof value === 'number')\n\nconst DialogTitle = ({ children, className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => {\n  if (hasTextContent(children)) {\n    return <DialogPrimitive.Title className={cn('text-2xl font-semibold leading-none', className)} data-slot='dialog-title' data-testid='spectral-dialog-title' {...props}>{children}</DialogPrimitive.Title>\n  }\n\n  if (isValidElement(children)) {\n    return <DialogPrimitive.Title asChild data-slot='dialog-title' data-testid='spectral-dialog-title' {...props}>{children}</DialogPrimitive.Title>\n  }\n\n  return <DialogPrimitive.Title className={className} data-slot='dialog-title' data-testid='spectral-dialog-title' {...props}>{children}</DialogPrimitive.Title>\n}\n\nconst DialogDescription = ({ children, className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => {\n  if (hasTextContent(children)) {\n    return <DialogPrimitive.Description className={cn('text-muted-foreground text-sm', className)} data-slot='dialog-description' data-testid='spectral-dialog-description' {...props}>{children}</DialogPrimitive.Description>\n  }\n\n  if (isValidElement(children)) {\n    return <DialogPrimitive.Description asChild data-slot='dialog-description' data-testid='spectral-dialog-description' {...props}>{children}</DialogPrimitive.Description>\n  }\n\n  return <DialogPrimitive.Description className={className} data-slot='dialog-description' data-testid='spectral-dialog-description' {...props}>{children}</DialogPrimitive.Description>\n}\n\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger }\n"],"mappings":";;;;;;;;;AAMA,MAAM,UAAU,EACd,QACA,QAAQ,OACR,GAAG,YAIC;AACJ,QAAO,oBAAC,gBAAgB,MAAjB;EAAsB,MAAM;EAAe;EAAO,aAAU;EAAuC,GAAI;EAAQ;;AAGxH,MAAM,iBAAiB,EAAE,GAAG,YAA4D;AACtF,QAAO,oBAAC,gBAAgB,SAAjB;EAAyB;EAA8C,GAAI;EAAQ;;AAG5F,MAAM,gBAAgB,EAAE,GAAG,YAA2D;AACpF,QAAO,oBAAC,gBAAgB,QAAjB;EAAwB,aAAU;EAA4C,GAAI;EAAQ;;AAGnG,MAAM,eAAe,EAAE,WAAW,GAAG,YAA0D;AAC7F,QAAO,oBAAC,gBAAgB,OAAjB;EAAuB;EAAQ,aAAU;EAAmD,GAAI;EAAO,WAAW,GAAG,wBAAwB,UAAU;EAAG;;AAGnK,MAAM,iBAAiB,EAAE,WAAW,GAAG,YAA4D;AACjG,QACE,oBAAC,gBAAgB,SAAjB;EACE,WAAW,GAAG,gLACd,8CAA8C,UAAU;EACxD,aAAU;EAEV,GAAI;EACL;;AAIL,MAAM,iBAAiB,EACrB,UACA,WACA,gBAAgB,MAChB,iBACA,mBACA,sBACA,kBAAkB,MAClB,GAAG,YAOC;AACJ,QACE,qBAAC,cAAD;EAAc,aAAU;YAAxB,CACG,iBAAiB,oBAAC,eAAD,EAAiB,GACnC,qBAAC,gBAAgB,SAAjB;GACE,WAAW,GACT,6LACA,6LACA,iLACA,aAAa,WAAW,WACxB,UACD;GACD,aAAU;GAEO;GACE;GACG;GACtB,GAAI;aAbN,CAeG,UACA,mBACC,qBAAC,gBAAgB,OAAjB;IACE,WAAW;IACX,aAAU;cAFZ,CAKE,oBAAC,WAAD,EAAW,MAAM,IAAK,GACtB,oBAAC,QAAD;KAAM,WAAU;eAAU;KAAkB,EACvB;MAEF;KACb;;;AAIlB,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAmC;AACvE,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,gDAAgD,UAAU;EAAE,aAAU;EAAqD,GAAI;EAAQ;;AAGnK,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAmC;AACvE,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,+GAA+G,UAAU;EAAE,aAAU;EAAqD,GAAI;EAAQ;;AAGlO,MAAM,kBAAkB,UAAsB,OAAO,UAAU,WAAW,MAAM,MAAM,CAAC,SAAS,IAAI,OAAO,UAAU;AAErH,MAAM,eAAe,EAAE,UAAU,WAAW,GAAG,YAA0D;AACvG,KAAI,eAAe,SAAS,CAC1B,QAAO,oBAAC,gBAAgB,OAAjB;EAAuB,WAAW,GAAG,uCAAuC,UAAU;EAAE,aAAU;EAAmD,GAAI;EAAQ;EAAgC;AAG1M,KAAI,eAAe,SAAS,CAC1B,QAAO,oBAAC,gBAAgB,OAAjB;EAAuB;EAAQ,aAAU;EAAmD,GAAI;EAAQ;EAAgC;AAGjJ,QAAO,oBAAC,gBAAgB,OAAjB;EAAkC;EAAW,aAAU;EAAmD,GAAI;EAAQ;EAAgC;;AAG/J,MAAM,qBAAqB,EAAE,UAAU,WAAW,GAAG,YAAgE;AACnH,KAAI,eAAe,SAAS,CAC1B,QAAO,oBAAC,gBAAgB,aAAjB;EAA6B,WAAW,GAAG,iCAAiC,UAAU;EAAE,aAAU;EAA+D,GAAI;EAAQ;EAAsC;AAG5N,KAAI,eAAe,SAAS,CAC1B,QAAO,oBAAC,gBAAgB,aAAjB;EAA6B;EAAQ,aAAU;EAA+D,GAAI;EAAQ;EAAsC;AAGzK,QAAO,oBAAC,gBAAgB,aAAjB;EAAwC;EAAW,aAAU;EAA+D,GAAI;EAAQ;EAAsC"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { CloseIcon } from '@components/Icons/CloseIcon'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cn } from '@utils/twUtils'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { RemoveScroll } from 'react-remove-scroll'\n\nconst Dialog = ({\n  isOpen,\n  modal = false,\n  ...props\n}: Omit<ComponentProps<typeof DialogPrimitive.Root>, 'open'> & {\n  isOpen?: boolean\n  dialogOverlay?: boolean\n}) => {\n  return (\n    <DialogPrimitive.Root\n      open={isOpen}\n      modal={modal}\n      data-slot='dialog'\n      data-testid='spectral-dialog'\n      {...props}\n    />\n  )\n}\n\nconst DialogTrigger = ({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>) => {\n  return (\n    <DialogPrimitive.Trigger\n      asChild\n      data-testid='spectral-dialog-trigger'\n      {...props}\n    />\n  )\n}\n\nconst DialogPortal = ({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>) => {\n  return (\n    <DialogPrimitive.Portal\n      data-slot='dialog-portal'\n      data-testid='dialog-portal'\n      {...props}\n    />\n  )\n}\n\nconst DialogClose = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Close>) => {\n  return (\n    <DialogPrimitive.Close\n      asChild\n      data-slot='dialog-close'\n      data-testid='spectral-dialog-close'\n      {...props}\n      className={cn('hover:cursor-pointer', className)}\n    />\n  )\n}\n\nconst DialogOverlay = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>) => {\n  return (\n    <DialogPrimitive.Overlay\n      className={cn('inset-0 bg-black/50 backdrop-blur-sm fixed z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0', 'motion-safe:data-[state=closed]:fade-out-0', className)}\n      data-slot='dialog-overlay'\n      data-testid='spectral-dialog-overlay'\n      {...props}\n    />\n  )\n}\n\nconst DialogContent = ({\n  children,\n  className,\n  dialogOverlay = true,\n  onEscapeKeyDown,\n  onInteractOutside,\n  onPointerDownOutside,\n  showCloseButton = true,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Content> & {\n  dialogOverlay?: boolean\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  onInteractOutside?: (event: PointerEvent | FocusEvent) => void\n  onPointerDownOutside?: (event: PointerEvent) => void\n  showCloseButton?: boolean\n}) => {\n  return (\n    <DialogPortal\n      data-slot='dialog-portal'\n      data-testid='spectral-dialog-portal'\n    >\n      {dialogOverlay && <DialogOverlay />}\n      <DialogPrimitive.Content\n        className={cn(\n          'max-w-xl gap-4 rounded-lg p-6 has-[[data-slot=dialog-footer]]:pb-0 fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full -translate-x-1/2 -translate-y-1/2 flex-col shadow-elevation-3',\n          'overflow-y-auto overscroll-contain bg-dialog-bg motion-safe:data-[state=open]:duration-200 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:slide-in-from-bottom-20',\n          'motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-100!',\n          RemoveScroll.classNames.fullWidth,\n          className,\n        )}\n        data-slot='dialog-content'\n        data-testid='spectral-dialog-content'\n        onEscapeKeyDown={onEscapeKeyDown}\n        onInteractOutside={onInteractOutside}\n        onPointerDownOutside={onPointerDownOutside}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            className={`top-4 right-4 rounded-xs absolute opacity-70 transition-opacity hover:cursor-pointer hover:opacity-100 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0`}\n            data-slot='dialog-close'\n            data-testid='spectral-dialog-close'\n          >\n            <CloseIcon size={18} />\n            <span className='sr-only'>Close dialog</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nconst DialogHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('gap-2 sm:text-left flex flex-col text-center', className)}\n      data-slot='dialog-header'\n      data-testid='spectral-dialog-header'\n      {...props}\n    />\n  )\n}\n\nconst DialogFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('gap-2 sm:flex-row sm:justify-end bottom-0 py-4 px-6 -mx-6 sticky z-10 flex flex-col-reverse bg-dialog-bg/85', className)}\n      data-slot='dialog-footer'\n      data-testid='spectral-dialog-footer'\n      {...props}\n    />\n  )\n}\n\nconst hasTextContent = (value: ReactNode) => (typeof value === 'string' ? value.trim().length > 0 : typeof value === 'number')\n\nconst DialogTitle = ({ children, className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => {\n  if (hasTextContent(children)) {\n    return (\n      <DialogPrimitive.Title\n        className={cn('text-2xl font-semibold leading-none', className)}\n        data-slot='dialog-title'\n        data-testid='spectral-dialog-title'\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Title>\n    )\n  }\n\n  if (isValidElement(children)) {\n    return (\n      <DialogPrimitive.Title\n        asChild\n        data-slot='dialog-title'\n        data-testid='spectral-dialog-title'\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Title>\n    )\n  }\n\n  return (\n    <DialogPrimitive.Title\n      className={className}\n      data-slot='dialog-title'\n      data-testid='spectral-dialog-title'\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Title>\n  )\n}\n\nconst DialogDescription = ({ children, className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => {\n  if (hasTextContent(children)) {\n    return (\n      <DialogPrimitive.Description\n        className={cn('text-muted-foreground text-sm', className)}\n        data-slot='dialog-description'\n        data-testid='spectral-dialog-description'\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Description>\n    )\n  }\n\n  if (isValidElement(children)) {\n    return (\n      <DialogPrimitive.Description\n        asChild\n        data-slot='dialog-description'\n        data-testid='spectral-dialog-description'\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Description>\n    )\n  }\n\n  return (\n    <DialogPrimitive.Description\n      className={className}\n      data-slot='dialog-description'\n      data-testid='spectral-dialog-description'\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Description>\n  )\n}\n\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger }\n"],"mappings":";;;;;;;;;AAMA,MAAM,UAAU,EACd,QACA,QAAQ,OACR,GAAG,YAIC;AACJ,QACE,oBAAC,gBAAgB,MAAjB;EACE,MAAM;EACC;EACP,aAAU;EAEV,GAAI;EACL;;AAIL,MAAM,iBAAiB,EAAE,GAAG,YAA4D;AACtF,QACE,oBAAC,gBAAgB,SAAjB;EACE;EAEA,GAAI;EACL;;AAIL,MAAM,gBAAgB,EAAE,GAAG,YAA2D;AACpF,QACE,oBAAC,gBAAgB,QAAjB;EACE,aAAU;EAEV,GAAI;EACL;;AAIL,MAAM,eAAe,EAAE,WAAW,GAAG,YAA0D;AAC7F,QACE,oBAAC,gBAAgB,OAAjB;EACE;EACA,aAAU;EAEV,GAAI;EACJ,WAAW,GAAG,wBAAwB,UAAU;EACjD;;AAIL,MAAM,iBAAiB,EAAE,WAAW,GAAG,YAA4D;AACjG,QACE,oBAAC,gBAAgB,SAAjB;EACE,WAAW,GAAG,gLAAgL,8CAA8C,UAAU;EACtP,aAAU;EAEV,GAAI;EACL;;AAIL,MAAM,iBAAiB,EACrB,UACA,WACA,gBAAgB,MAChB,iBACA,mBACA,sBACA,kBAAkB,MAClB,GAAG,YAOC;AACJ,QACE,qBAAC,cAAD;EACE,aAAU;YADZ,CAIG,iBAAiB,oBAAC,eAAD,EAAiB,GACnC,qBAAC,gBAAgB,SAAjB;GACE,WAAW,GACT,6LACA,6LACA,iLACA,aAAa,WAAW,WACxB,UACD;GACD,aAAU;GAEO;GACE;GACG;GACtB,GAAI;aAbN,CAeG,UACA,mBACC,qBAAC,gBAAgB,OAAjB;IACE,WAAW;IACX,aAAU;cAFZ,CAKE,oBAAC,WAAD,EAAW,MAAM,IAAK,GACtB,oBAAC,QAAD;KAAM,WAAU;eAAU;KAAkB,EACvB;MAEF;KACb;;;AAIlB,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAmC;AACvE,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,gDAAgD,UAAU;EACxE,aAAU;EAEV,GAAI;EACL;;AAIL,MAAM,gBAAgB,EAAE,WAAW,GAAG,YAAmC;AACvE,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,+GAA+G,UAAU;EACvI,aAAU;EAEV,GAAI;EACL;;AAIL,MAAM,kBAAkB,UAAsB,OAAO,UAAU,WAAW,MAAM,MAAM,CAAC,SAAS,IAAI,OAAO,UAAU;AAErH,MAAM,eAAe,EAAE,UAAU,WAAW,GAAG,YAA0D;AACvG,KAAI,eAAe,SAAS,CAC1B,QACE,oBAAC,gBAAgB,OAAjB;EACE,WAAW,GAAG,uCAAuC,UAAU;EAC/D,aAAU;EAEV,GAAI;EAEH;EACoB;AAI3B,KAAI,eAAe,SAAS,CAC1B,QACE,oBAAC,gBAAgB,OAAjB;EACE;EACA,aAAU;EAEV,GAAI;EAEH;EACoB;AAI3B,QACE,oBAAC,gBAAgB,OAAjB;EACa;EACX,aAAU;EAEV,GAAI;EAEH;EACoB;;AAI3B,MAAM,qBAAqB,EAAE,UAAU,WAAW,GAAG,YAAgE;AACnH,KAAI,eAAe,SAAS,CAC1B,QACE,oBAAC,gBAAgB,aAAjB;EACE,WAAW,GAAG,iCAAiC,UAAU;EACzD,aAAU;EAEV,GAAI;EAEH;EAC0B;AAIjC,KAAI,eAAe,SAAS,CAC1B,QACE,oBAAC,gBAAgB,aAAjB;EACE;EACA,aAAU;EAEV,GAAI;EAEH;EAC0B;AAIjC,QACE,oBAAC,gBAAgB,aAAjB;EACa;EACX,aAAU;EAEV,GAAI;EAEH;EAC0B"}

package/dist/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","names":[],"sources":["../src/components/Drawer/Drawer.tsx"],"mappings":";;;;;;UAMiB,WAAA;EACf,SAAA;EACA,QAAA,GAAW,SAAA;EACX,WAAA;EACA,WAAA,GAAc,SAAA;EACd,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA,GAAa,MAAA,CAAO,KAAA,CAAM,KAAA;EAC1B,YAAA,GAAe,MAAA,CAAO,KAAA,CAAM,KAAA;EAC5B,KAAA;EACA,YAAA;EACA,YAAA,IAAgB,IAAA;EAChB,IAAA;EACA,IAAA;EACA,KAAA,GAAQ,SAAA;EACR,OAAA,EAAS,SAAA;AAAA;AAAA,cA8BE,MAAA;EAAM,QAAA;EAAA,SAAA;EAAA,WAAA;EAAA,WAAA;EAAA,SAAA;EAAA,WAAA;EAAA,YAAA;EAAA,UAAA;EAAA,YAAA;EAAA,KAAA;EAAA,YAAA;EAAA,YAAA;EAAA,IAAA;EAAA,IAAA;EAAA,KAAA;EAAA;AAAA,GAgBhB,WAAA,KAAW,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Drawer.d.ts","names":[],"sources":["../src/components/Drawer/Drawer.tsx"],"mappings":";;;;;;UAMiB,WAAA;EACf,SAAA;EACA,QAAA,GAAW,SAAA;EACX,WAAA;EACA,WAAA,GAAc,SAAA;EACd,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA,GAAa,MAAA,CAAO,KAAA,CAAM,KAAA;EAC1B,YAAA,GAAe,MAAA,CAAO,KAAA,CAAM,KAAA;EAC5B,KAAA;EACA,YAAA;EACA,YAAA,IAAgB,IAAA;EAChB,IAAA;EACA,IAAA;EACA,KAAA,GAAQ,SAAA;EACR,OAAA,EAAS,SAAA;AAAA;AAAA,cA8BE,MAAA;EAAM,QAAA;EAAA,SAAA;EAAA,WAAA;EAAA,WAAA;EAAA,SAAA;EAAA,WAAA;EAAA,YAAA;EAAA,UAAA;EAAA,YAAA;EAAA,KAAA;EAAA,YAAA;EAAA,YAAA;EAAA,IAAA;EAAA,IAAA;EAAA,KAAA;EAAA;AAAA,GAAmP,WAAA,KAAW,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { Dialog } from '@base-ui/react/dialog'\nimport { Drawer as DrawerGesture } from '@base-ui/react/drawer'\nimport { SpectralProvider } from '@components/SpectralProvider/SpectralProvider'\nimport { cn } from '@utils/twUtils'\nimport { Fragment, isValidElement, type CSSProperties, type ElementType, type ReactElement, type ReactNode } from 'react'\n\nexport interface DrawerProps {\n  className?: string\n  children?: ReactNode\n  defaultOpen?: boolean\n  description?: ReactNode\n  direction?: 'left' | 'right' | 'top' | 'bottom'\n  dismissible?: boolean\n  dragBehavior?: 'surface' | 'handle' | 'none'\n  finalFocus?: Dialog.Popup.Props['finalFocus']\n  initialFocus?: Dialog.Popup.Props['initialFocus']\n  modal?: boolean\n  nativeButton?: boolean\n  onOpenChange?: (open: boolean) => void\n  open?: boolean\n  size?: string\n  title?: ReactNode\n  trigger: ReactNode\n}\n\nconst hasRenderableText = (value: ReactNode) => (typeof value === 'string' ? value.trim().length > 0 : typeof value === 'number')\n\nconst hasRenderableContent = (value: ReactNode) => {\n  if (hasRenderableText(value)) {\n    return true\n  }\n\n  if (value === null || value === undefined || typeof value === 'boolean' || typeof value === 'string') {\n    return false\n  }\n\n  return true\n}\n\nconst isElementAndNotFragment = (element: ReactNode) => isValidElement(element) && element.type !== Fragment\n\n// Dismissal reasons that should be blocked when `dismissible` is false. The\n// close button (`close-press`), trigger, and imperative actions stay allowed.\nconst BLOCKED_DISMISS_REASONS = new Set(['outside-press', 'escape-key', 'focus-out', 'swipe', 'close-watcher'])\n\nconst swipeDirectionByDirection = {\n  left: 'left',\n  right: 'right',\n  top: 'up',\n  bottom: 'down',\n} as const\n\nexport const Drawer = ({\n  children,\n  className,\n  defaultOpen = false,\n  description,\n  direction = 'right',\n  dismissible = true,\n  dragBehavior = 'surface',\n  finalFocus,\n  initialFocus,\n  modal = true,\n  nativeButton = true,\n  onOpenChange,\n  open,\n  size = '380px',\n  title, trigger\n}: DrawerProps) => {\n  const baseStyles = 'font-sans! fixed transition-transform duration-300 ease-out motion-reduce:transition-none'\n  const hasTitle = hasRenderableContent(title)\n  const hasDescription = hasRenderableContent(description)\n  const isTextTitle = hasRenderableText(title)\n  const isTextDescription = hasRenderableText(description)\n  const isCustomTitleElement = isElementAndNotFragment(title)\n  const isCustomDescriptionElement = isElementAndNotFragment(description)\n  // Only the handle variant keeps a drag-to-close gesture; everything else is a\n  // positioned Dialog so content interaction and text selection never dismiss it.\n  const usesGesture = dragBehavior === 'handle'\n  const shouldRenderHandle = dragBehavior === 'handle'\n\n  const directionStyles = {\n    left: {\n      className: cn(baseStyles, 'top-0 bottom-0 left-0 shadow-[20px_0_20px_var(--color-black-40)] data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full'),\n      style: { width: size },\n    },\n    right: {\n      className: cn(baseStyles, 'top-0 bottom-0 right-0 shadow-[-20px_0_20px_var(--color-black-40)] data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full'),\n      style: { width: size },\n    },\n    top: {\n      className: cn(baseStyles, 'top-0 left-0 right-0 shadow-[0_20px_20px_var(--color-black-40)] data-[ending-style]:-translate-y-full data-[starting-style]:-translate-y-full'),\n      style: { height: size },\n    },\n    bottom: {\n      className: cn(baseStyles, 'bottom-0 left-0 right-0 shadow-[0_-20px_20px_var(--color-black-40)] data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full'),\n      style: { height: size },\n    },\n  }\n\n  const { className: directionClassName, style } = directionStyles[direction]\n  // During a handle swipe, follow the pointer live (Base UI exposes the offset\n  // via CSS variables) and disable the open/close transition.\n  const swipeClassName = usesGesture ? 'data-[swiping]:transition-none data-[swiping]:[transform:translate(var(--drawer-swipe-movement-x,0px),var(--drawer-swipe-movement-y,0px))]' : ''\n\n  const handleOpenChange = (nextOpen: boolean, eventDetails: { reason?: string; cancel: () => void }) => {\n    if (!dismissible && !nextOpen && eventDetails.reason && BLOCKED_DISMISS_REASONS.has(eventDetails.reason)) {\n      eventDetails.cancel()\n      return\n    }\n\n    onOpenChange?.(nextOpen)\n  }\n\n  const Primitive = usesGesture ? DrawerGesture : Dialog\n  const Root = Primitive.Root as ElementType\n  const Trigger = Primitive.Trigger as ElementType\n  const Portal = Primitive.Portal as ElementType\n  const Backdrop = Primitive.Backdrop as ElementType\n  const Popup = Primitive.Popup as ElementType\n  const Title = Primitive.Title as ElementType\n  const Description = Primitive.Description as ElementType\n  const Close = Primitive.Close as ElementType\n  const Viewport = DrawerGesture.Viewport as ElementType\n\n  const rootProps = {\n    defaultOpen,\n    disablePointerDismissal: !dismissible,\n    modal,\n    onOpenChange: handleOpenChange,\n    open,\n    ...(usesGesture ? { swipeDirection: swipeDirectionByDirection[direction] } : {}),\n  }\n\n  const popup = (\n    <Popup\n      aria-label={!hasTitle && !hasDescription ? 'Drawer' : undefined}\n      className={cn('z-50 flex flex-col overscroll-contain bg-drawer-bg **:box-border focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', directionClassName, swipeClassName, className)}\n      data-testid='spectral-drawer-content'\n      finalFocus={finalFocus}\n      initialFocus={initialFocus}\n      render={<div className='min-h-0 flex h-full flex-col' />}\n      style={style as CSSProperties}\n    >\n      <Close />\n      {shouldRenderHandle && (\n        <div\n          className='mt-2 mb-1 h-1.5 w-12 mx-auto shrink-0 cursor-grab touch-none rounded-full bg-text-secondary/40 active:cursor-grabbing'\n          data-testid='spectral-drawer-handle'\n        />\n      )}\n      {/* Opt content out of swipe dismissal so interaction and text selection\n          never close the drawer; only the handle (above) initiates a drag. */}\n      <div\n        className='min-h-0 flex flex-1 flex-col'\n        data-base-ui-swipe-ignore=''\n      >\n        {hasTitle && (\n          <>\n            {isTextTitle && (\n              <Title\n                className='px-3 pt-4 text-xl font-semibold text-text-primary'\n                data-testid='spectral-drawer-title'\n              >\n                {title}\n              </Title>\n            )}\n            {!isTextTitle && isCustomTitleElement && (\n              <Title\n                data-testid='spectral-drawer-title'\n                render={title as ReactElement}\n              />\n            )}\n            {!isTextTitle && !isCustomTitleElement && <Title data-testid='spectral-drawer-title'>{title}</Title>}\n          </>\n        )}\n        {hasDescription && (\n          <>\n            {isTextDescription && (\n              <Description\n                className='mb-2 px-3 text-xs! text-text-secondary! uppercase'\n                data-testid='spectral-drawer-description'\n              >\n                {description}\n              </Description>\n            )}\n            {!isTextDescription && isCustomDescriptionElement && (\n              <Description\n                data-testid='spectral-drawer-description'\n                render={description as ReactElement}\n              />\n            )}\n            {!isTextDescription && !isCustomDescriptionElement && <Description data-testid='spectral-drawer-description'>{description}</Description>}\n          </>\n        )}\n        <div\n          className='py-2 px-3 min-w-0 [&>*]:min-w-0 [&_*]:min-w-0 min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain *:box-border'\n          data-testid='spectral-drawer-body'\n        >\n          {children}\n        </div>\n      </div>\n    </Popup>\n  )\n\n  return (\n    <SpectralProvider>\n      <Root {...rootProps}>\n        <Trigger\n          data-testid='spectral-drawer-trigger'\n          nativeButton={nativeButton}\n          render={trigger as ReactElement}\n        />\n        <Portal>\n          <Backdrop\n            className='inset-0 fixed bg-transparent'\n            data-testid='spectral-drawer-overlay'\n          />\n          {usesGesture ? <Viewport className='inset-0 fixed z-50'>{popup}</Viewport> : popup}\n        </Portal>\n      </Root>\n    </SpectralProvider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { Dialog } from '@base-ui/react/dialog'\nimport { Drawer as DrawerGesture } from '@base-ui/react/drawer'\nimport { SpectralProvider } from '@components/SpectralProvider/SpectralProvider'\nimport { cn } from '@utils/twUtils'\nimport { Fragment, isValidElement, type CSSProperties, type ElementType, type ReactElement, type ReactNode } from 'react'\n\nexport interface DrawerProps {\n  className?: string\n  children?: ReactNode\n  defaultOpen?: boolean\n  description?: ReactNode\n  direction?: 'left' | 'right' | 'top' | 'bottom'\n  dismissible?: boolean\n  dragBehavior?: 'surface' | 'handle' | 'none'\n  finalFocus?: Dialog.Popup.Props['finalFocus']\n  initialFocus?: Dialog.Popup.Props['initialFocus']\n  modal?: boolean\n  nativeButton?: boolean\n  onOpenChange?: (open: boolean) => void\n  open?: boolean\n  size?: string\n  title?: ReactNode\n  trigger: ReactNode\n}\n\nconst hasRenderableText = (value: ReactNode) => (typeof value === 'string' ? value.trim().length > 0 : typeof value === 'number')\n\nconst hasRenderableContent = (value: ReactNode) => {\n  if (hasRenderableText(value)) {\n    return true\n  }\n\n  if (value === null || value === undefined || typeof value === 'boolean' || typeof value === 'string') {\n    return false\n  }\n\n  return true\n}\n\nconst isElementAndNotFragment = (element: ReactNode) => isValidElement(element) && element.type !== Fragment\n\n// Dismissal reasons that should be blocked when `dismissible` is false. The\n// close button (`close-press`), trigger, and imperative actions stay allowed.\nconst BLOCKED_DISMISS_REASONS = new Set(['outside-press', 'escape-key', 'focus-out', 'swipe', 'close-watcher'])\n\nconst swipeDirectionByDirection = {\n  left: 'left',\n  right: 'right',\n  top: 'up',\n  bottom: 'down',\n} as const\n\nexport const Drawer = ({ children, className, defaultOpen = false, description, direction = 'right', dismissible = true, dragBehavior = 'surface', finalFocus, initialFocus, modal = true, nativeButton = true, onOpenChange, open, size = '380px', title, trigger }: DrawerProps) => {\n  const baseStyles = 'font-sans! fixed transition-transform duration-300 ease-out motion-reduce:transition-none'\n  const hasTitle = hasRenderableContent(title)\n  const hasDescription = hasRenderableContent(description)\n  const isTextTitle = hasRenderableText(title)\n  const isTextDescription = hasRenderableText(description)\n  const isCustomTitleElement = isElementAndNotFragment(title)\n  const isCustomDescriptionElement = isElementAndNotFragment(description)\n  // Only the handle variant keeps a drag-to-close gesture; everything else is a\n  // positioned Dialog so content interaction and text selection never dismiss it.\n  const usesGesture = dragBehavior === 'handle'\n  const shouldRenderHandle = dragBehavior === 'handle'\n\n  const directionStyles = {\n    left: {\n      className: cn(baseStyles, 'top-0 bottom-0 left-0 shadow-[20px_0_20px_var(--color-black-40)] data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full'),\n      style: { width: size },\n    },\n    right: {\n      className: cn(baseStyles, 'top-0 bottom-0 right-0 shadow-[-20px_0_20px_var(--color-black-40)] data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full'),\n      style: { width: size },\n    },\n    top: {\n      className: cn(baseStyles, 'top-0 left-0 right-0 shadow-[0_20px_20px_var(--color-black-40)] data-[ending-style]:-translate-y-full data-[starting-style]:-translate-y-full'),\n      style: { height: size },\n    },\n    bottom: {\n      className: cn(baseStyles, 'bottom-0 left-0 right-0 shadow-[0_-20px_20px_var(--color-black-40)] data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full'),\n      style: { height: size },\n    },\n  }\n\n  const { className: directionClassName, style } = directionStyles[direction]\n  // During a handle swipe, follow the pointer live (Base UI exposes the offset\n  // via CSS variables) and disable the open/close transition.\n  const swipeClassName = usesGesture ? 'data-[swiping]:transition-none data-[swiping]:[transform:translate(var(--drawer-swipe-movement-x,0px),var(--drawer-swipe-movement-y,0px))]' : ''\n\n  const handleOpenChange = (nextOpen: boolean, eventDetails: { reason?: string; cancel: () => void }) => {\n    if (!dismissible && !nextOpen && eventDetails.reason && BLOCKED_DISMISS_REASONS.has(eventDetails.reason)) {\n      eventDetails.cancel()\n      return\n    }\n\n    onOpenChange?.(nextOpen)\n  }\n\n  const Primitive = usesGesture ? DrawerGesture : Dialog\n  const Root = Primitive.Root as ElementType\n  const Trigger = Primitive.Trigger as ElementType\n  const Portal = Primitive.Portal as ElementType\n  const Backdrop = Primitive.Backdrop as ElementType\n  const Popup = Primitive.Popup as ElementType\n  const Title = Primitive.Title as ElementType\n  const Description = Primitive.Description as ElementType\n  const Close = Primitive.Close as ElementType\n  const Viewport = DrawerGesture.Viewport as ElementType\n\n  const rootProps = {\n    defaultOpen,\n    disablePointerDismissal: !dismissible,\n    modal,\n    onOpenChange: handleOpenChange,\n    open,\n    ...(usesGesture ? { swipeDirection: swipeDirectionByDirection[direction] } : {}),\n  }\n\n  const popup = (\n    <Popup\n      aria-label={!hasTitle && !hasDescription ? 'Drawer' : undefined}\n      className={cn('z-50 flex flex-col overscroll-contain bg-drawer-bg **:box-border focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', directionClassName, swipeClassName, className)}\n      data-testid='spectral-drawer-content'\n      finalFocus={finalFocus}\n      initialFocus={initialFocus}\n      render={<div className='min-h-0 flex h-full flex-col' />}\n      style={style as CSSProperties}\n    >\n      <Close />\n      {shouldRenderHandle && (\n        <div\n          className='mt-2 mb-1 h-1.5 w-12 mx-auto shrink-0 cursor-grab touch-none rounded-full bg-text-secondary/40 active:cursor-grabbing'\n          data-testid='spectral-drawer-handle'\n        />\n      )}\n      {/* Opt content out of swipe dismissal so interaction and text selection\n          never close the drawer; only the handle (above) initiates a drag. */}\n      <div\n        className='min-h-0 flex flex-1 flex-col'\n        data-base-ui-swipe-ignore=''\n      >\n        {hasTitle && (\n          <>\n            {isTextTitle && (\n              <Title\n                className='px-3 pt-4 text-xl font-semibold text-text-primary'\n                data-testid='spectral-drawer-title'\n              >\n                {title}\n              </Title>\n            )}\n            {!isTextTitle && isCustomTitleElement && (\n              <Title\n                data-testid='spectral-drawer-title'\n                render={title as ReactElement}\n              />\n            )}\n            {!isTextTitle && !isCustomTitleElement && <Title data-testid='spectral-drawer-title'>{title}</Title>}\n          </>\n        )}\n        {hasDescription && (\n          <>\n            {isTextDescription && (\n              <Description\n                className='mb-2 px-3 text-xs! text-text-secondary! uppercase'\n                data-testid='spectral-drawer-description'\n              >\n                {description}\n              </Description>\n            )}\n            {!isTextDescription && isCustomDescriptionElement && (\n              <Description\n                data-testid='spectral-drawer-description'\n                render={description as ReactElement}\n              />\n            )}\n            {!isTextDescription && !isCustomDescriptionElement && <Description data-testid='spectral-drawer-description'>{description}</Description>}\n          </>\n        )}\n        <div\n          className='py-2 px-3 min-w-0 [&>*]:min-w-0 [&_*]:min-w-0 min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain *:box-border'\n          data-testid='spectral-drawer-body'\n        >\n          {children}\n        </div>\n      </div>\n    </Popup>\n  )\n\n  return (\n    <SpectralProvider>\n      <Root {...rootProps}>\n        <Trigger\n          data-testid='spectral-drawer-trigger'\n          nativeButton={nativeButton}\n          render={trigger as ReactElement}\n        />\n        <Portal>\n          <Backdrop\n            className='inset-0 fixed bg-transparent'\n            data-testid='spectral-drawer-overlay'\n          />\n          {usesGesture ? <Viewport className='inset-0 fixed z-50'>{popup}</Viewport> : popup}\n        </Portal>\n      </Root>\n    </SpectralProvider>\n  )\n}\n"],"mappings":"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"}

package/dist/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckmarkIcon } from '@components/Icons'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { useAutoDropdownHorizontalShift } from '@utils/dropdownPositioning'\nimport { EmptyState, getDropdownWidthStyles, getDropdownSurfaceClasses, getOptionClasses, LoadingState, type DropdownWidth } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type RefObject, type ReactNode } from 'react'\n\ntype Align = 'start' | 'center' | 'end'\ntype Side = 'top' | 'bottom' | 'left' | 'right'\ntype DropdownValue = string | string[]\n\ninterface BaseDropdownOption {\n  disabled?: boolean\n  label: string\n  shortcut?: ReactNode\n  value: string\n}\n\nexport interface DropdownMenuItemOption extends BaseDropdownOption {\n  type?: 'item'\n}\n\nexport interface DropdownMenuCheckboxOption extends BaseDropdownOption {\n  type: 'checkbox'\n}\n\nexport interface DropdownMenuLabelOption {\n  id?: string\n  label: string\n  type: 'label'\n}\n\nexport interface DropdownMenuSeparatorOption {\n  id?: string\n  type: 'separator'\n}\n\nexport type DropdownMenuOption = DropdownMenuItemOption | DropdownMenuCheckboxOption | DropdownMenuLabelOption | DropdownMenuSeparatorOption\n\nexport interface DropdownMenuProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>, 'defaultOpen' | 'onOpenChange' | 'open'> {\n  align?: Align\n  asChild?: boolean\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionBoundary?: Element | Element[] | null\n  collisionPadding?: number | Partial<Record<Side, number>>\n  className?: string\n  contentClassName?: string\n  dataTestId?: string\n  defaultOpen?: boolean\n  defaultValue?: DropdownValue\n  disabled?: boolean\n  dropdownContentRef?: RefObject<HTMLDivElement | null>\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: ReactNode\n  loadingMessage?: string\n  onOpenChange?: (open: boolean) => void\n  onValueChange?: (value: DropdownValue) => void\n  open?: boolean\n  options: DropdownMenuOption[]\n  selectionMode?: 'single' | 'multiple'\n  side?: Side\n  sideOffset?: number\n  state?: 'default' | 'loading'\n  trigger: ReactNode\n  value?: DropdownValue\n}\n\nconst normalizeValue = (value: DropdownValue | undefined, selectionMode: 'single' | 'multiple') => {\n  if (selectionMode === 'multiple') {\n    if (Array.isArray(value)) return value\n    return value ? [value] : []\n  }\n\n  if (Array.isArray(value)) {\n    return value[0] ?? ''\n  }\n\n  return value ?? ''\n}\n\nconst isSelectableOption = (option: DropdownMenuOption): option is DropdownMenuItemOption | DropdownMenuCheckboxOption => {\n  return option.type !== 'separator' && option.type !== 'label'\n}\n\nexport const DropdownMenu = ({\n  align = 'start',\n  asChild = true,\n  alignOffset = 0,\n  avoidCollisions = true,\n  className,\n  collisionBoundary,\n  collisionPadding = 10,\n  contentClassName,\n  dataTestId,\n  defaultOpen,\n  defaultValue,\n  disabled = false,\n  dropdownContentRef,\n  dropdownWidth = 'content',\n  emptyMessage = 'No options found',\n  loadingMessage = 'Loading…',\n  modal = true,\n  onOpenChange,\n  onValueChange,\n  open: openProp,\n  options,\n  selectionMode = 'single',\n  side = 'bottom',\n  sideOffset = 4,\n  state = 'default',\n  trigger,\n  value: valueProp,\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useUncontrolledState<boolean>({\n    value: openProp,\n    defaultValue: defaultOpen ?? false,\n    onChange: onOpenChange,\n  })\n\n  const { dropdownShiftStyle, setDropdownElement } = useAutoDropdownHorizontalShift(open)\n\n  const resolvedDefaultValue = normalizeValue(defaultValue, selectionMode)\n  const resolvedControlledValue = valueProp === undefined ? undefined : normalizeValue(valueProp, selectionMode)\n  const [value, setValue] = useUncontrolledState<DropdownValue>({\n    value: resolvedControlledValue,\n    defaultValue: resolvedDefaultValue,\n    onChange: onValueChange,\n  })\n\n  const { dropdownWidthMode, dropdownWidthStyle } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: 'var(--radix-dropdown-menu-trigger-width)',\n  })\n\n  const isDisabled = disabled || state === 'loading'\n  const selectableOptions = options.filter(isSelectableOption)\n\n  const isOptionSelected = (optionValue: string) => {\n    if (selectionMode === 'multiple') {\n      const values = Array.isArray(value) ? value : []\n      return values.includes(optionValue)\n    }\n\n    return value === optionValue\n  }\n\n  const handleValueChange = (nextValue: string) => {\n    if (selectionMode === 'multiple') {\n      const values = Array.isArray(value) ? value : []\n      const nextValues = values.includes(nextValue) ? values.filter((entry) => entry !== nextValue) : [...values, nextValue]\n      setValue(nextValues)\n      return\n    }\n\n    setValue(nextValue)\n    setOpen(false)\n  }\n\n  const renderOption = (option: DropdownMenuOption, index: number) => {\n    if (option.type === 'separator') {\n      return <DropdownMenuPrimitive.Separator className='-mx-1 my-1 h-px bg-border-secondary' data-testid='spectral-dropdown-menu-separator' key={option.id ?? `separator-${index}`} />\n    }\n\n    if (option.type === 'label') {\n      return (\n        <DropdownMenuPrimitive.Label className='px-2 py-1.5 text-base font-semibold text-text-primary' data-testid='spectral-dropdown-menu-label' key={option.id ?? `label-${index}`}>\n          {option.label}\n        </DropdownMenuPrimitive.Label>\n      )\n    }\n\n    const isSelected = isOptionSelected(option.value)\n    const itemClassName = cn(getOptionClasses(Boolean(option.disabled), false, isSelected), 'group/spectral-dropdown-menu-item pr-2 gap-4 relative flex w-full justify-between')\n\n    if (selectionMode === 'multiple' || option.type === 'checkbox') {\n      return (\n        <DropdownMenuPrimitive.CheckboxItem\n          checked={isSelected}\n          className={itemClassName}\n          data-testid='spectral-dropdown-menu-checkbox-item'\n          disabled={option.disabled}\n          key={option.value}\n          onCheckedChange={() => handleValueChange(option.value)}\n          onSelect={(event) => event.preventDefault()}\n        >\n          <span className='min-w-0 flex-1 truncate whitespace-nowrap'>{option.label}</span>\n          {option.shortcut && <span className='text-xs tracking-widest ml-auto text-input-text-placeholder'>{option.shortcut}</span>}\n          <span aria-hidden='true' className='ml-2 size-4 flex shrink-0 items-center justify-center'>\n            <DropdownMenuPrimitive.ItemIndicator asChild>\n              <span className='size-4 flex items-center justify-center'>\n                <CheckmarkIcon size={16} />\n              </span>\n            </DropdownMenuPrimitive.ItemIndicator>\n          </span>\n        </DropdownMenuPrimitive.CheckboxItem>\n      )\n    }\n\n    return (\n      <DropdownMenuPrimitive.Item className={itemClassName} data-testid='spectral-dropdown-menu-item' disabled={option.disabled} key={option.value} onSelect={() => handleValueChange(option.value)}>\n        <span className='min-w-0 flex-1 truncate whitespace-nowrap'>{option.label}</span>\n        {option.shortcut && <span className='text-xs tracking-widest ml-auto text-input-text-placeholder'>{option.shortcut}</span>}\n        <span aria-hidden='true' className='ml-2 size-4 flex shrink-0 items-center justify-center'>\n          {isSelected && <CheckmarkIcon size={16} />}\n        </span>\n      </DropdownMenuPrimitive.Item>\n    )\n  }\n\n  return (\n    <DropdownMenuPrimitive.Root modal={modal} onOpenChange={setOpen} open={open}>\n      <DropdownMenuPrimitive.Trigger asChild={asChild} className={cn(className, 'transition-opacity duration-200 hover:cursor-pointer hover:opacity-80')} data-testid={dataTestId ?? 'spectral-dropdown-menu-trigger'} disabled={isDisabled}>\n        {trigger}\n      </DropdownMenuPrimitive.Trigger>\n      <DropdownMenuPrimitive.Portal>\n        <DropdownMenuPrimitive.Content\n          align={align}\n          alignOffset={alignOffset}\n          avoidCollisions={avoidCollisions}\n          className={cn(\n            'p-1 relative z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in',\n            getDropdownSurfaceClasses(),\n            'motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95',\n            'max-h-[min(var(--radix-dropdown-menu-content-available-height),300px)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2',\n            'min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto',\n            contentClassName,\n          )}\n          collisionBoundary={collisionBoundary}\n          collisionPadding={collisionPadding}\n          data-dropdown-width-mode={dropdownWidthMode}\n          data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n          data-testid='spectral-dropdown-menu-content'\n          ref={(node) => {\n            setDropdownElement(node)\n            if (dropdownContentRef) {\n              dropdownContentRef.current = node\n            }\n          }}\n          side={side}\n          sideOffset={sideOffset}\n          style={{\n            ...dropdownWidthStyle,\n            ...dropdownShiftStyle,\n          }}\n        >\n          {state === 'loading' ? <LoadingState message={loadingMessage} /> : selectableOptions.length === 0 ? <EmptyState message={emptyMessage} /> : options.map(renderOption)}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  )\n}\n\nDropdownMenu.displayName = 'DropdownMenu'\n"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckmarkIcon } from '@components/Icons'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { useAutoDropdownHorizontalShift } from '@utils/dropdownPositioning'\nimport { EmptyState, getDropdownWidthStyles, getDropdownSurfaceClasses, getOptionClasses, LoadingState, type DropdownWidth } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type RefObject, type ReactNode } from 'react'\n\ntype Align = 'start' | 'center' | 'end'\ntype Side = 'top' | 'bottom' | 'left' | 'right'\ntype DropdownValue = string | string[]\n\ninterface BaseDropdownOption {\n  disabled?: boolean\n  label: string\n  shortcut?: ReactNode\n  value: string\n}\n\nexport interface DropdownMenuItemOption extends BaseDropdownOption {\n  type?: 'item'\n}\n\nexport interface DropdownMenuCheckboxOption extends BaseDropdownOption {\n  type: 'checkbox'\n}\n\nexport interface DropdownMenuLabelOption {\n  id?: string\n  label: string\n  type: 'label'\n}\n\nexport interface DropdownMenuSeparatorOption {\n  id?: string\n  type: 'separator'\n}\n\nexport type DropdownMenuOption = DropdownMenuItemOption | DropdownMenuCheckboxOption | DropdownMenuLabelOption | DropdownMenuSeparatorOption\n\nexport interface DropdownMenuProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>, 'defaultOpen' | 'onOpenChange' | 'open'> {\n  align?: Align\n  asChild?: boolean\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionBoundary?: Element | Element[] | null\n  collisionPadding?: number | Partial<Record<Side, number>>\n  className?: string\n  contentClassName?: string\n  dataTestId?: string\n  defaultOpen?: boolean\n  defaultValue?: DropdownValue\n  disabled?: boolean\n  dropdownContentRef?: RefObject<HTMLDivElement | null>\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: ReactNode\n  loadingMessage?: string\n  onOpenChange?: (open: boolean) => void\n  onValueChange?: (value: DropdownValue) => void\n  open?: boolean\n  options: DropdownMenuOption[]\n  selectionMode?: 'single' | 'multiple'\n  side?: Side\n  sideOffset?: number\n  state?: 'default' | 'loading'\n  trigger: ReactNode\n  value?: DropdownValue\n}\n\nconst normalizeValue = (value: DropdownValue | undefined, selectionMode: 'single' | 'multiple') => {\n  if (selectionMode === 'multiple') {\n    if (Array.isArray(value)) return value\n    return value ? [value] : []\n  }\n\n  if (Array.isArray(value)) {\n    return value[0] ?? ''\n  }\n\n  return value ?? ''\n}\n\nconst isSelectableOption = (option: DropdownMenuOption): option is DropdownMenuItemOption | DropdownMenuCheckboxOption => {\n  return option.type !== 'separator' && option.type !== 'label'\n}\n\nexport const DropdownMenu = ({\n  align = 'start',\n  asChild = true,\n  alignOffset = 0,\n  avoidCollisions = true,\n  className,\n  collisionBoundary,\n  collisionPadding = 10,\n  contentClassName,\n  dataTestId,\n  defaultOpen,\n  defaultValue,\n  disabled = false,\n  dropdownContentRef,\n  dropdownWidth = 'content',\n  emptyMessage = 'No options found',\n  loadingMessage = 'Loading…',\n  modal = true,\n  onOpenChange,\n  onValueChange,\n  open: openProp,\n  options,\n  selectionMode = 'single',\n  side = 'bottom',\n  sideOffset = 4,\n  state = 'default',\n  trigger,\n  value: valueProp,\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useUncontrolledState<boolean>({\n    value: openProp,\n    defaultValue: defaultOpen ?? false,\n    onChange: onOpenChange,\n  })\n\n  const { dropdownShiftStyle, setDropdownElement } = useAutoDropdownHorizontalShift(open)\n\n  const resolvedDefaultValue = normalizeValue(defaultValue, selectionMode)\n  const resolvedControlledValue = valueProp === undefined ? undefined : normalizeValue(valueProp, selectionMode)\n  const [value, setValue] = useUncontrolledState<DropdownValue>({\n    value: resolvedControlledValue,\n    defaultValue: resolvedDefaultValue,\n    onChange: onValueChange,\n  })\n\n  const { dropdownWidthMode, dropdownWidthStyle } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: 'var(--radix-dropdown-menu-trigger-width)',\n  })\n\n  const isDisabled = disabled || state === 'loading'\n  const selectableOptions = options.filter(isSelectableOption)\n\n  const isOptionSelected = (optionValue: string) => {\n    if (selectionMode === 'multiple') {\n      const values = Array.isArray(value) ? value : []\n      return values.includes(optionValue)\n    }\n\n    return value === optionValue\n  }\n\n  const handleValueChange = (nextValue: string) => {\n    if (selectionMode === 'multiple') {\n      const values = Array.isArray(value) ? value : []\n      const nextValues = values.includes(nextValue) ? values.filter((entry) => entry !== nextValue) : [...values, nextValue]\n      setValue(nextValues)\n      return\n    }\n\n    setValue(nextValue)\n    setOpen(false)\n  }\n\n  const renderOption = (option: DropdownMenuOption, index: number) => {\n    if (option.type === 'separator') {\n      return (\n        <DropdownMenuPrimitive.Separator\n          className='-mx-1 my-1 h-px bg-border-secondary'\n          data-testid='spectral-dropdown-menu-separator'\n          key={option.id ?? `separator-${index}`}\n        />\n      )\n    }\n\n    if (option.type === 'label') {\n      return (\n        <DropdownMenuPrimitive.Label\n          className='px-2 py-1.5 text-base font-semibold text-text-primary'\n          data-testid='spectral-dropdown-menu-label'\n          key={option.id ?? `label-${index}`}\n        >\n          {option.label}\n        </DropdownMenuPrimitive.Label>\n      )\n    }\n\n    const isSelected = isOptionSelected(option.value)\n    const itemClassName = cn(getOptionClasses(Boolean(option.disabled), false, isSelected), 'group/spectral-dropdown-menu-item pr-2 gap-4 relative flex w-full justify-between')\n\n    if (selectionMode === 'multiple' || option.type === 'checkbox') {\n      return (\n        <DropdownMenuPrimitive.CheckboxItem\n          checked={isSelected}\n          className={itemClassName}\n          data-testid='spectral-dropdown-menu-checkbox-item'\n          disabled={option.disabled}\n          key={option.value}\n          onCheckedChange={() => handleValueChange(option.value)}\n          onSelect={(event) => event.preventDefault()}\n        >\n          <span className='min-w-0 flex-1 truncate whitespace-nowrap'>{option.label}</span>\n          {option.shortcut && <span className='text-xs tracking-widest ml-auto text-input-text-placeholder'>{option.shortcut}</span>}\n          <span\n            aria-hidden='true'\n            className='ml-2 size-4 flex shrink-0 items-center justify-center'\n          >\n            <DropdownMenuPrimitive.ItemIndicator asChild>\n              <span className='size-4 flex items-center justify-center'>\n                <CheckmarkIcon size={16} />\n              </span>\n            </DropdownMenuPrimitive.ItemIndicator>\n          </span>\n        </DropdownMenuPrimitive.CheckboxItem>\n      )\n    }\n\n    return (\n      <DropdownMenuPrimitive.Item\n        className={itemClassName}\n        data-testid='spectral-dropdown-menu-item'\n        disabled={option.disabled}\n        key={option.value}\n        onSelect={() => handleValueChange(option.value)}\n      >\n        <span className='min-w-0 flex-1 truncate whitespace-nowrap'>{option.label}</span>\n        {option.shortcut && <span className='text-xs tracking-widest ml-auto text-input-text-placeholder'>{option.shortcut}</span>}\n        <span\n          aria-hidden='true'\n          className='ml-2 size-4 flex shrink-0 items-center justify-center'\n        >\n          {isSelected && <CheckmarkIcon size={16} />}\n        </span>\n      </DropdownMenuPrimitive.Item>\n    )\n  }\n\n  return (\n    <DropdownMenuPrimitive.Root\n      modal={modal}\n      onOpenChange={setOpen}\n      open={open}\n    >\n      <DropdownMenuPrimitive.Trigger\n        asChild={asChild}\n        className={cn(className, 'transition-opacity duration-200 hover:cursor-pointer hover:opacity-80')}\n        data-testid={dataTestId ?? 'spectral-dropdown-menu-trigger'}\n        disabled={isDisabled}\n      >\n        {trigger}\n      </DropdownMenuPrimitive.Trigger>\n      <DropdownMenuPrimitive.Portal>\n        <DropdownMenuPrimitive.Content\n          align={align}\n          alignOffset={alignOffset}\n          avoidCollisions={avoidCollisions}\n          className={cn(\n            'p-1 relative z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in',\n            getDropdownSurfaceClasses(),\n            'motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95',\n            'max-h-[min(var(--radix-dropdown-menu-content-available-height),300px)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2',\n            'min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto',\n            contentClassName,\n          )}\n          collisionBoundary={collisionBoundary}\n          collisionPadding={collisionPadding}\n          data-dropdown-width-mode={dropdownWidthMode}\n          data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n          data-testid='spectral-dropdown-menu-content'\n          ref={(node) => {\n            setDropdownElement(node)\n            if (dropdownContentRef) {\n              dropdownContentRef.current = node\n            }\n          }}\n          side={side}\n          sideOffset={sideOffset}\n          style={{\n            ...dropdownWidthStyle,\n            ...dropdownShiftStyle,\n          }}\n        >\n          {state === 'loading' ? <LoadingState message={loadingMessage} /> : selectableOptions.length === 0 ? <EmptyState message={emptyMessage} /> : options.map(renderOption)}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  )\n}\n\nDropdownMenu.displayName = 'DropdownMenu'\n"],"mappings":";;;;;;;;;;;AAqEA,MAAM,kBAAkB,OAAkC,kBAAyC;AACjG,KAAI,kBAAkB,YAAY;AAChC,MAAI,MAAM,QAAQ,MAAM,CAAE,QAAO;AACjC,SAAO,QAAQ,CAAC,MAAM,GAAG,EAAC;;AAG5B,KAAI,MAAM,QAAQ,MAAM,CACtB,QAAO,MAAM,MAAM;AAGrB,QAAO,SAAS;;AAGlB,MAAM,sBAAsB,WAA8F;AACxH,QAAO,OAAO,SAAS,eAAe,OAAO,SAAS;;AAGxD,MAAa,gBAAgB,EAC3B,QAAQ,SACR,UAAU,MACV,cAAc,GACd,kBAAkB,MAClB,WACA,mBACA,mBAAmB,IACnB,kBACA,YACA,aACA,cACA,WAAW,OACX,oBACA,gBAAgB,WAChB,eAAe,oBACf,iBAAiB,YACjB,QAAQ,MACR,cACA,eACA,MAAM,UACN,SACA,gBAAgB,UAChB,OAAO,UACP,aAAa,GACb,QAAQ,WACR,SACA,OAAO,gBACgB;CACvB,MAAM,CAAC,MAAM,WAAW,qBAA8B;EACpD,OAAO;EACP,cAAc,eAAe;EAC7B,UAAU;EACX,CAAA;CAED,MAAM,EAAE,oBAAoB,uBAAuB,+BAA+B,KAAI;CAEtF,MAAM,uBAAuB,eAAe,cAAc,cAAa;CAEvE,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D,OAF8B,cAAc,SAAY,SAAY,eAAe,WAAW,cAAa;EAG3G,cAAc;EACd,UAAU;EACX,CAAA;CAED,MAAM,EAAE,mBAAmB,uBAAuB,uBAAuB;EACvE;EACA,cAAc;EACf,CAAA;CAED,MAAM,aAAa,YAAY,UAAU;CACzC,MAAM,oBAAoB,QAAQ,OAAO,mBAAkB;CAE3D,MAAM,oBAAoB,gBAAwB;AAChD,MAAI,kBAAkB,WAEpB,SADe,MAAM,QAAQ,MAAM,GAAG,QAAQ,EAAC,EACjC,SAAS,YAAW;AAGpC,SAAO,UAAU;;CAGnB,MAAM,qBAAqB,cAAsB;AAC/C,MAAI,kBAAkB,YAAY;GAChC,MAAM,SAAS,MAAM,QAAQ,MAAM,GAAG,QAAQ,EAAC;AAE/C,YADmB,OAAO,SAAS,UAAU,GAAG,OAAO,QAAQ,UAAU,UAAU,UAAU,GAAG,CAAC,GAAG,QAAQ,UAAS,CAClG;AACnB;;AAGF,WAAS,UAAS;AAClB,UAAQ,MAAK;;CAGf,MAAM,gBAAgB,QAA4B,UAAkB;AAClE,MAAI,OAAO,SAAS,YAClB,QACE,oBAAC,sBAAsB,WAAvB,EACE,WAAU,uCAGX,EADM,OAAO,MAAM,aAAa,QAChC;AAIL,MAAI,OAAO,SAAS,QAClB,QACE,oBAAC,sBAAsB,OAAvB;GACE,WAAU;aAIT,OAAO;GACmB,EAHtB,OAAO,MAAM,SAAS,QAGA;EAIjC,MAAM,aAAa,iBAAiB,OAAO,MAAK;EAChD,MAAM,gBAAgB,GAAG,iBAAiB,QAAQ,OAAO,SAAS,EAAE,OAAO,WAAW,EAAE,oFAAmF;AAE3K,MAAI,kBAAkB,cAAc,OAAO,SAAS,WAClD,QACE,qBAAC,sBAAsB,cAAvB;GACE,SAAS;GACT,WAAW;GAEX,UAAU,OAAO;GAEjB,uBAAuB,kBAAkB,OAAO,MAAM;GACtD,WAAW,UAAU,MAAM,gBAAgB;aAP7C;IASE,oBAAC,QAAD;KAAM,WAAU;eAA6C,OAAO;KAAY;IAC/E,OAAO,YAAY,oBAAC,QAAD;KAAM,WAAU;eAA+D,OAAO;KAAgB;IAC1H,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;eAEV,oBAAC,sBAAsB,eAAvB;MAAqC;gBACnC,oBAAC,QAAD;OAAM,WAAU;iBACd,oBAAC,eAAD,EAAe,MAAM,IAAK;OACtB;MAC6B;KACjC;IAC4B;KAhB7B,OAAO,MAgBsB;AAIxC,SACE,qBAAC,sBAAsB,MAAvB;GACE,WAAW;GAEX,UAAU,OAAO;GAEjB,gBAAgB,kBAAkB,OAAO,MAAM;aALjD;IAOE,oBAAC,QAAD;KAAM,WAAU;eAA6C,OAAO;KAAY;IAC/E,OAAO,YAAY,oBAAC,QAAD;KAAM,WAAU;eAA+D,OAAO;KAAgB;IAC1H,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;eAET,cAAc,oBAAC,eAAD,EAAe,MAAM,IAAM;KACtC;IACoB;KAXrB,OAAO,MAWc;;AAIhC,QACE,qBAAC,sBAAsB,MAAvB;EACS;EACP,cAAc;EACR;YAHR,CAKE,oBAAC,sBAAsB,SAAvB;GACW;GACT,WAAW,GAAG,WAAW,wEAAwE;GAEjG,UAAU;aAET;GAC4B,GAC/B,oBAAC,sBAAsB,QAAvB,YACE,oBAAC,sBAAsB,SAAvB;GACS;GACM;GACI;GACjB,WAAW,GACT,0GACA,2BAA2B,EAC3B,2KACA,gLACA,sGACA,iBACD;GACkB;GACD;GAClB,4BAA0B;GAC1B,6BAA2B,sBAAsB,WAAW,gBAAgB;GAE5E,MAAM,SAAS;AACb,uBAAmB,KAAI;AACvB,QAAI,mBACF,oBAAmB,UAAU;;GAG3B;GACM;GACZ,OAAO;IACL,GAAG;IACH,GAAG;IACJ;aAEA,UAAU,YAAY,oBAAC,cAAD,EAAc,SAAS,gBAAkB,IAAG,kBAAkB,WAAW,IAAI,oBAAC,YAAD,EAAY,SAAS,cAAgB,IAAG,QAAQ,IAAI,aAAa;GACxI,GACH,EACJ;;;AAIhC,aAAa,cAAc"}

package/dist/HoverCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.d.ts","names":[],"sources":["../src/components/HoverCard/HoverCard.tsx"],"mappings":";;;;;;KAIK,KAAA;AAAA,KACA,IAAA;AAAA,UAEK,qBAAA;EACR,KAAA,GAAQ,KAAA;EACR,WAAA;EACA,iBAAA,GAAoB,OAAA,WAAkB,OAAA;EACtC,gBAAA,YAA4B,OAAA,CAAQ,MAAA,CAAO,IAAA;EAC3C,IAAA,GAAO,IAAA;EACP,UAAA;EACA,KAAA;AAAA;AAAA,UAKe,cAAA,SAAuB,cAAA,QAAsB,kBAAA,CAAmB,IAAA,GAAO,qBAAA;AAAA;EAE5D,KAAA;EAAO,WAAA;EAAa,iBAAA;EAAmB,gBAAA;EAAkB,IAAA;EAAM,UAAA;EAAY,KAAA;EAAA,GAAU;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EASrG,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,QAAsB,kBAAA,CAAmB,OAAA,IAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAMzG,KAAA,EAAO,SAAA;EACP,WAAA,EAAa,eAAA;EACb,SAAA;EACA,iBAAA,EAAmB,qBAAA;EACnB,gBAAA,EAAkB,oBAAA;EAClB,IAAA,EAAM,QAAA;EACN,UAAA,EAAY,cAAA;EACZ,KAAA,EAAO,SAAA;EAAA,GACJ;AAAA,GACF,cAAA,QAAsB,kBAAA,CAAmB,OAAA;EAC1C,KAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"HoverCard.d.ts","names":[],"sources":["../src/components/HoverCard/HoverCard.tsx"],"mappings":";;;;;;KAIK,KAAA;AAAA,KACA,IAAA;AAAA,UAEK,qBAAA;EACR,KAAA,GAAQ,KAAA;EACR,WAAA;EACA,iBAAA,GAAoB,OAAA,WAAkB,OAAA;EACtC,gBAAA,YAA4B,OAAA,CAAQ,MAAA,CAAO,IAAA;EAC3C,IAAA,GAAO,IAAA;EACP,UAAA;EACA,KAAA;AAAA;AAAA,UAKe,cAAA,SAAuB,cAAA,QAAsB,kBAAA,CAAmB,IAAA,GAAO,qBAAA;AAAA;EAE5D,KAAA;EAAO,WAAA;EAAa,iBAAA;EAAmB,gBAAA;EAAkB,IAAA;EAAM,UAAA;EAAY,KAAA;EAAA,GAAU;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAarG,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,QAAsB,kBAAA,CAAmB,OAAA,IAAQ,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;;EAazG,KAAA,EAAO,SAAA;EACP,WAAA,EAAa,eAAA;EACb,SAAA;EACA,iBAAA,EAAmB,qBAAA;EACnB,gBAAA,EAAkB,oBAAA;EAClB,IAAA,EAAM,QAAA;EACN,UAAA,EAAY,cAAA;EACZ,KAAA,EAAO,SAAA;EAAA,GACJ;AAAA,GACF,cAAA,QAAsB,kBAAA,CAAmB,OAAA;EAC1C,KAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/HoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","names":[],"sources":["../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as HoverCardPrimitive from '@radix-ui/react-hover-card'\nimport { cn } from '@utils/twUtils'\nimport { createContext, useContext, type ComponentProps, type CSSProperties } from 'react'\n\ntype Align = 'start' | 'center' | 'end'\ntype Side = 'top' | 'right' | 'bottom' | 'left'\n\ninterface HoverCardContentProps {\n  align?: Align\n  alignOffset?: number\n  collisionBoundary?: Element | null | (Element | null)[]\n  collisionPadding?: number | Partial<Record<Side, number>>\n  side?: Side\n  sideOffset?: number\n  width?: number | 'w-fit' | 'trigger-width'\n}\n\nconst HoverCardContext = createContext<HoverCardContentProps>({})\n\nexport interface HoverCardProps extends ComponentProps<typeof HoverCardPrimitive.Root>, HoverCardContentProps {}\n\nexport const HoverCard = ({ align, alignOffset, collisionBoundary, collisionPadding, side, sideOffset, width, ...props }: HoverCardProps) => {\n  return (\n    <HoverCardContext.Provider value={{ side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, width }}>\n      <HoverCardPrimitive.Root data-slot='hover-card' data-testid='spectral-hover-card' {...props} />\n    </HoverCardContext.Provider>\n  )\n}\nHoverCard.displayName = 'HoverCard'\n\nexport const HoverCardTrigger = ({ className, ...props }: ComponentProps<typeof HoverCardPrimitive.Trigger>) => {\n  return <HoverCardPrimitive.Trigger className={cn('font-base', className)} data-slot='hover-card-trigger' data-testid='spectral-hover-card-trigger' {...props} />\n}\nHoverCardTrigger.displayName = 'HoverCardTrigger'\n\nexport const HoverCardContent = ({\n  align: alignProp,\n  alignOffset: alignOffsetProp,\n  className,\n  collisionBoundary: collisionBoundaryProp,\n  collisionPadding: collisionPaddingProp,\n  side: sideProp,\n  sideOffset: sideOffsetProp,\n  width: widthProp,\n  ...props\n}: ComponentProps<typeof HoverCardPrimitive.Content> & {\n  width?: number | 'w-fit' | 'trigger-width'\n}) => {\n  const context = useContext(HoverCardContext)\n\n  const align = alignProp ?? context.align ?? 'center'\n  const sideOffset = sideOffsetProp ?? context.sideOffset ?? 4\n  const side = sideProp ?? context.side ?? 'bottom'\n  const width = widthProp ?? context.width ?? 380\n  const alignOffset = alignOffsetProp ?? context.alignOffset\n  const collisionBoundary = collisionBoundaryProp ?? context.collisionBoundary\n  const collisionPadding = collisionPaddingProp ?? context.collisionPadding\n\n  return (\n    <HoverCardPrimitive.Portal data-slot='hover-card-portal'>\n      <HoverCardPrimitive.Content\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          'rounded-lg shadow-lg p-5 z-50 origin-[--radix-hover-card-content-transform-origin] bg-popover-bg text-text-primary outline-none motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95',\n          className,\n        )}\n        collisionBoundary={collisionBoundary}\n        collisionPadding={collisionPadding}\n        data-slot='hover-card-content'\n        data-testid='spectral-hover-card-content'\n        side={side}\n        sideOffset={sideOffset}\n        style={\n          {\n            width: typeof width === 'number' ? `${width}px` : width === 'trigger-width' ? 'var(--radix-hover-card-trigger-width)' : 'fit-content',\n          } as CSSProperties\n        }\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\nHoverCardContent.displayName = 'HoverCardContent'\n"],"mappings":";;;;;;;AAiBA,MAAM,mBAAmB,cAAqC,EAAE,CAAA;AAIhE,MAAa,aAAa,EAAE,OAAO,aAAa,mBAAmB,kBAAkB,MAAM,YAAY,OAAO,GAAG,YAA4B;AAC3I,QACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;GAAE;GAAM;GAAY;GAAO;GAAa;GAAmB;GAAkB;GAAO;YACpH,oBAAC,mBAAmB,MAApB;GAAyB,aAAU;GAA+C,GAAI;GAAQ;EACrE;;AAG/B,UAAU,cAAc;AAExB,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAA+D;AAC9G,QAAO,oBAAC,mBAAmB,SAApB;EAA4B,WAAW,GAAG,aAAa,UAAU;EAAE,aAAU;EAA+D,GAAI;EAAQ;;AAEjK,iBAAiB,cAAc;AAE/B,MAAa,oBAAoB,EAC/B,OAAO,WACP,aAAa,iBACb,WACA,mBAAmB,uBACnB,kBAAkB,sBAClB,MAAM,UACN,YAAY,gBACZ,OAAO,WACP,GAAG,YAGC;CACJ,MAAM,UAAU,WAAW,iBAAgB;CAE3C,MAAM,QAAQ,aAAa,QAAQ,SAAS;CAC5C,MAAM,aAAa,kBAAkB,QAAQ,cAAc;CAC3D,MAAM,OAAO,YAAY,QAAQ,QAAQ;CACzC,MAAM,QAAQ,aAAa,QAAQ,SAAS;CAC5C,MAAM,cAAc,mBAAmB,QAAQ;CAC/C,MAAM,oBAAoB,yBAAyB,QAAQ;CAC3D,MAAM,mBAAmB,wBAAwB,QAAQ;AAEzD,QACE,oBAAC,mBAAmB,QAApB;EAA2B,aAAU;YACnC,oBAAC,mBAAmB,SAApB;GACS;GACM;GACb,WAAW,GACT,4kBACA,UACD;GACkB;GACD;GAClB,aAAU;GAEJ;GACM;GACZ,OACE,EACE,OAAO,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM,UAAU,kBAAkB,0CAA0C,eACzH;GAEH,GAAI;GACL;EACwB;;AAG/B,iBAAiB,cAAc"}
+{"version":3,"file":"HoverCard.js","names":[],"sources":["../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as HoverCardPrimitive from '@radix-ui/react-hover-card'\nimport { cn } from '@utils/twUtils'\nimport { createContext, useContext, type ComponentProps, type CSSProperties } from 'react'\n\ntype Align = 'start' | 'center' | 'end'\ntype Side = 'top' | 'right' | 'bottom' | 'left'\n\ninterface HoverCardContentProps {\n  align?: Align\n  alignOffset?: number\n  collisionBoundary?: Element | null | (Element | null)[]\n  collisionPadding?: number | Partial<Record<Side, number>>\n  side?: Side\n  sideOffset?: number\n  width?: number | 'w-fit' | 'trigger-width'\n}\n\nconst HoverCardContext = createContext<HoverCardContentProps>({})\n\nexport interface HoverCardProps extends ComponentProps<typeof HoverCardPrimitive.Root>, HoverCardContentProps {}\n\nexport const HoverCard = ({ align, alignOffset, collisionBoundary, collisionPadding, side, sideOffset, width, ...props }: HoverCardProps) => {\n  return (\n    <HoverCardContext.Provider value={{ side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, width }}>\n      <HoverCardPrimitive.Root\n        data-slot='hover-card'\n        data-testid='spectral-hover-card'\n        {...props}\n      />\n    </HoverCardContext.Provider>\n  )\n}\nHoverCard.displayName = 'HoverCard'\n\nexport const HoverCardTrigger = ({ className, ...props }: ComponentProps<typeof HoverCardPrimitive.Trigger>) => {\n  return (\n    <HoverCardPrimitive.Trigger\n      className={cn('font-base', className)}\n      data-slot='hover-card-trigger'\n      data-testid='spectral-hover-card-trigger'\n      {...props}\n    />\n  )\n}\nHoverCardTrigger.displayName = 'HoverCardTrigger'\n\nexport const HoverCardContent = ({\n  align: alignProp,\n  alignOffset: alignOffsetProp,\n  className,\n  collisionBoundary: collisionBoundaryProp,\n  collisionPadding: collisionPaddingProp,\n  side: sideProp,\n  sideOffset: sideOffsetProp,\n  width: widthProp,\n  ...props\n}: ComponentProps<typeof HoverCardPrimitive.Content> & {\n  width?: number | 'w-fit' | 'trigger-width'\n}) => {\n  const context = useContext(HoverCardContext)\n\n  const align = alignProp ?? context.align ?? 'center'\n  const sideOffset = sideOffsetProp ?? context.sideOffset ?? 4\n  const side = sideProp ?? context.side ?? 'bottom'\n  const width = widthProp ?? context.width ?? 380\n  const alignOffset = alignOffsetProp ?? context.alignOffset\n  const collisionBoundary = collisionBoundaryProp ?? context.collisionBoundary\n  const collisionPadding = collisionPaddingProp ?? context.collisionPadding\n\n  return (\n    <HoverCardPrimitive.Portal data-slot='hover-card-portal'>\n      <HoverCardPrimitive.Content\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          'rounded-lg shadow-lg p-5 z-50 origin-[--radix-hover-card-content-transform-origin] bg-popover-bg text-text-primary outline-none motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95',\n          className,\n        )}\n        collisionBoundary={collisionBoundary}\n        collisionPadding={collisionPadding}\n        data-slot='hover-card-content'\n        data-testid='spectral-hover-card-content'\n        side={side}\n        sideOffset={sideOffset}\n        style={\n          {\n            width: typeof width === 'number' ? `${width}px` : width === 'trigger-width' ? 'var(--radix-hover-card-trigger-width)' : 'fit-content',\n          } as CSSProperties\n        }\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\nHoverCardContent.displayName = 'HoverCardContent'\n"],"mappings":";;;;;;;AAiBA,MAAM,mBAAmB,cAAqC,EAAE,CAAA;AAIhE,MAAa,aAAa,EAAE,OAAO,aAAa,mBAAmB,kBAAkB,MAAM,YAAY,OAAO,GAAG,YAA4B;AAC3I,QACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;GAAE;GAAM;GAAY;GAAO;GAAa;GAAmB;GAAkB;GAAO;YACpH,oBAAC,mBAAmB,MAApB;GACE,aAAU;GAEV,GAAI;GACL;EACwB;;AAG/B,UAAU,cAAc;AAExB,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAA+D;AAC9G,QACE,oBAAC,mBAAmB,SAApB;EACE,WAAW,GAAG,aAAa,UAAU;EACrC,aAAU;EAEV,GAAI;EACL;;AAGL,iBAAiB,cAAc;AAE/B,MAAa,oBAAoB,EAC/B,OAAO,WACP,aAAa,iBACb,WACA,mBAAmB,uBACnB,kBAAkB,sBAClB,MAAM,UACN,YAAY,gBACZ,OAAO,WACP,GAAG,YAGC;CACJ,MAAM,UAAU,WAAW,iBAAgB;CAE3C,MAAM,QAAQ,aAAa,QAAQ,SAAS;CAC5C,MAAM,aAAa,kBAAkB,QAAQ,cAAc;CAC3D,MAAM,OAAO,YAAY,QAAQ,QAAQ;CACzC,MAAM,QAAQ,aAAa,QAAQ,SAAS;CAC5C,MAAM,cAAc,mBAAmB,QAAQ;CAC/C,MAAM,oBAAoB,yBAAyB,QAAQ;CAC3D,MAAM,mBAAmB,wBAAwB,QAAQ;AAEzD,QACE,oBAAC,mBAAmB,QAApB;EAA2B,aAAU;YACnC,oBAAC,mBAAmB,SAApB;GACS;GACM;GACb,WAAW,GACT,4kBACA,UACD;GACkB;GACD;GAClB,aAAU;GAEJ;GACM;GACZ,OACE,EACE,OAAO,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM,UAAU,kBAAkB,0CAA0C,eACzH;GAEH,GAAI;GACL;EACwB;;AAG/B,iBAAiB,cAAc"}

package/dist/Icons/AdjustmentsIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdjustmentsIcon.d.ts","names":[],"sources":["../../src/components/Icons/AdjustmentsIcon.tsx"],"mappings":";;;;;cAqCa,eAAA;EAAe,GAAA;EAAA,SAAA;EAAA,KAAA;EAAA,WAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAlCyD,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"AdjustmentsIcon.d.ts","names":[],"sources":["../../src/components/Icons/AdjustmentsIcon.tsx"],"mappings":";;;;;cAuEa,eAAA;EAAe,GAAA;EAAA,SAAA;EAAA,KAAA;EAAA,WAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GApEyD,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA"}