@spear-ai/spectral 1.21.0 → 1.21.2

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  hourFormat?: HourFormat\n  label?: string\n  locale?: string\n  onChange?: (date: Date | undefined) => void\n  showTime?: boolean\n  state?: 'default' | 'disabled' | 'error'\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      showTime = true,\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 (!showTime) 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    }, [showTime, 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 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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"}

package/dist/DateTimePicker.d.ts

@@ -16,19 +16,28 @@ interface DateTimePickerProps extends Omit<ComponentProps<'div'>, 'onChange' | '
   disabled?: boolean;
   disablePastDates?: boolean;
   errorMessage?: string | string[] | Record<string, unknown> | null;
+  hideTimePicker?: boolean;
   hourFormat?: HourFormat;
   inputClassName?: string;
   label?: string;
   locale?: Partial<Locale$1>;
+  maxDate?: Date;
+  minDate?: Date;
   messageReserveLines?: number;
   messageReserveSpace?: boolean;
   onChange?: (date: Date | undefined) => void;
-  showTimePicker?: boolean;
-  state?: 'default' | 'disabled' | 'error';
+  state?: 'default' | 'disabled' | 'error' | 'warning';
   timeLocale?: string;
+  /**
+   * 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>;
   value?: Date;
+  warningMessage?: string | string[] | Record<string, unknown> | null;
 }
 declare function DateTimePicker({
   calendarProps,
@@ -37,19 +46,23 @@ declare function DateTimePicker({
   disabled,
   disablePastDates,
   errorMessage,
+  hideTimePicker,
   hourFormat,
+  id,
   inputClassName,
   label,
   locale,
+  maxDate,
   messageReserveLines,
   messageReserveSpace,
+  minDate,
   onChange,
-  showTimePicker,
   state,
   timeLocale,
   timeTranslations,
+  today,
   value,
-  id,
+  warningMessage,
   ...props
 }: DateTimePickerProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace DateTimePicker {

package/dist/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","names":[],"sources":["../src/components/DateTimePicker/DateTimePicker.tsx"],"mappings":";;;;;;;;;;;;UAYiB,mBAAA,SAA4B,IAAA,CAAK,cAAA;EAChD,aAAA,GAAgB,IAAA,CAAK,aAAA;EACrB,YAAA,GAAe,IAAA;EACf,QAAA;EACA,gBAAA;EACA,YAAA,uBAAmC,MAAA;EACnC,UAAA,GAAa,UAAA;EACb,cAAA;EACA,KAAA;EACA,MAAA,GAAS,OAAA,CAAQ,QAAA;EACjB,mBAAA;EACA,mBAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;EAClB,cAAA;EACA,KAAA;EACA,UAAA;EANiB;EAQjB,gBAAA,GAAmB,OAAA,CAAQ,sBAAA;EAC3B,KAAA,GAAQ,IAAA;AAAA;AAAA;EAIR,aAAA;EACA,SAAA;EACA,YAAA;EACA,QAAA;EACA,gBAAA;EACA,YAAA;EACA,UAAA;EACA,cAAA;EACA,KAAA;EACA,MAAA;EACA,mBAAA;EACA,mBAAA;EACA,QAAA;EACA,cAAA;EACA,KAAA;EACA,UAAA;EACA,gBAAA;EACA,KAAA;EACA,EAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"DateTimePicker.d.ts","names":[],"sources":["../src/components/DateTimePicker/DateTimePicker.tsx"],"mappings":";;;;;;;;;;;;UAYiB,mBAAA,SAA4B,IAAA,CAAK,cAAA;EAChD,aAAA,GAAgB,IAAA,CAAK,aAAA;EACrB,YAAA,GAAe,IAAA;EACf,QAAA;EACA,gBAAA;EACA,YAAA,uBAAmC,MAAA;EACnC,cAAA;EACA,UAAA,GAAa,UAAA;EACb,cAAA;EACA,KAAA;EACA,MAAA,GAAS,OAAA,CAAQ,QAAA;EACjB,OAAA,GAAU,IAAA;EACV,OAAA,GAAU,IAAA;EACV,mBAAA;EACA,mBAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;EAClB,KAAA;EACA,UAAA;EANU;;;;;EAYV,KAAA,GAAQ,IAAA;EAGA;EADR,gBAAA,GAAmB,OAAA,CAAQ,sBAAA;EAC3B,KAAA,GAAQ,IAAA;EACR,cAAA,uBAAqC,MAAA;AAAA;AAAA;EAIrC,aAAA;EACA,SAAA;EACA,YAAA;EACA,QAAA;EACA,gBAAA;EACA,YAAA;EACA,cAAA;EACA,UAAA;EACA,EAAA;EACA,cAAA;EACA,KAAA;EACA,MAAA;EACA,OAAA;EACA,mBAAA;EACA,mBAAA;EACA,OAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA;EACA,gBAAA;EACA,KAAA;EACA,KAAA;EACA,cAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/DateTimePicker.js

@@ -1,8 +1,8 @@
 'use client';
 import { CalendarIcon } from "./Icons/CalendarIcon.js";
 import { cn } from "./utils/twUtils.js";
-import { ErrorMessage } from "./FormFieldMessage.js";
-import { getErrorMessageId, useFormFieldId } from "./utils/formFieldUtils.js";
+import { ErrorMessage, WarningMessage } from "./FormFieldMessage.js";
+import { getErrorMessageId, getWarningMessageId, useFormFieldId } from "./utils/formFieldUtils.js";
 import { useUncontrolledState } from "./hooks/useUncontrolledState.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover.js";
 import { Calendar } from "./DateTimePicker/Calendar.js";
@@ -16,10 +16,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "react-day-picker";
 
 //#region src/components/DateTimePicker/DateTimePicker.tsx
-const DateTimePicker = ({ calendarProps, className, defaultValue, disabled = false, disablePastDates = true, errorMessage, hourFormat, inputClassName, label, locale, messageReserveLines = 1, messageReserveSpace = false, onChange, showTimePicker = true, state = "default", timeLocale, timeTranslations, value, id, ...props }) => {
+const DateTimePicker = ({ calendarProps, className, defaultValue, disabled = false, disablePastDates = true, errorMessage, hideTimePicker = false, hourFormat, id, inputClassName, label, locale, maxDate, messageReserveLines = 1, messageReserveSpace = false, minDate, onChange, state = "default", timeLocale, timeTranslations, today, value, warningMessage, ...props }) => {
 	const fieldId = useFormFieldId(id);
 	const errorMessageId = getErrorMessageId(fieldId);
-	const describedBy = state === "error" && errorMessage ? errorMessageId : void 0;
+	const warningMessageId = getWarningMessageId(fieldId);
+	const describedBy = state === "error" && errorMessage ? errorMessageId : state === "warning" && warningMessage ? warningMessageId : void 0;
 	const [date, setDate] = useUncontrolledState({
 		defaultValue,
 		onChange,
@@ -46,46 +47,60 @@ const DateTimePicker = ({ calendarProps, className, defaultValue, disabled = fal
 		className: cn("w-full", className),
 		"data-slot": "datetime-picker",
 		...props,
-		children: [/* @__PURE__ */ jsx(DateTimeDisplayInput, {
-			"aria-describedby": describedBy,
-			"aria-invalid": state === "error",
-			className: cn("gap-4 pr-12 flex w-full justify-start", !date && "text-text-secondary", inputClassName),
-			disabled,
-			endIcon: /* @__PURE__ */ jsx(PopoverTrigger, {
-				asChild: true,
+		children: [
+			/* @__PURE__ */ jsx(DateTimeDisplayInput, {
+				"aria-describedby": describedBy,
+				"aria-invalid": state === "error",
+				className: cn("gap-4 pr-12 flex w-full justify-start", !date && "text-text-secondary", inputClassName),
 				disabled,
-				children: /* @__PURE__ */ jsx(CalendarIcon, {
-					"aria-label": "Open date picker",
-					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"),
-					disabled
-				})
+				endIcon: /* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					disabled,
+					children: /* @__PURE__ */ jsx(CalendarIcon, {
+						"aria-label": "Open date picker",
+						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"),
+						disabled
+					})
+				}),
+				hourFormat: effectiveHourFormat,
+				id: fieldId,
+				label,
+				onChange: handleInputDateChange,
+				hideTime: hideTimePicker,
+				state,
+				value: date
 			}),
-			hourFormat: effectiveHourFormat,
-			id: fieldId,
-			label,
-			onChange: handleInputDateChange,
-			showTime: showTimePicker,
-			state,
-			value: date
-		}), /* @__PURE__ */ jsx(ErrorMessage, {
-			dataTestId: "spectral-datetime-picker-error-message",
-			id: errorMessageId,
-			message: state === "error" ? errorMessage : null,
-			messageReserveLines,
-			messageReserveSpace
-		})]
+			/* @__PURE__ */ jsx(ErrorMessage, {
+				dataTestId: "spectral-datetime-picker-error-message",
+				id: errorMessageId,
+				message: state === "error" ? errorMessage : null,
+				messageReserveLines,
+				messageReserveSpace
+			}),
+			/* @__PURE__ */ jsx(WarningMessage, {
+				dataTestId: "spectral-datetime-picker-warning-message",
+				id: warningMessageId,
+				message: state === "warning" ? warningMessage : null,
+				messageReserveLines,
+				messageReserveSpace
+			})
+		]
 	}), /* @__PURE__ */ jsxs(PopoverContent, {
 		align: "start",
-		className: cn("rounded-lg py-4 px-6 flex", !showTimePicker && "w-[330px]", showTimePicker && effectiveHourFormat === "24" && "w-[486px]", showTimePicker && effectiveHourFormat === "12" && "w-[560px]"),
+		className: cn("rounded-lg py-4 px-6 flex", hideTimePicker ? "w-[330px]" : effectiveHourFormat === "24" ? "w-[486px]" : "w-[560px]"),
 		onOpenAutoFocus: (e) => e.preventDefault(),
 		children: [/* @__PURE__ */ jsx(Calendar, {
 			...calendarProps,
+			defaultMonth: calendarProps?.defaultMonth ?? date ?? today ?? minDate,
 			disablePastDates,
 			locale,
+			maxDate,
+			minDate,
 			mode: "single",
 			onSelect: handleDateSelect,
-			selected: date
-		}), showTimePicker && /* @__PURE__ */ jsx("div", {
+			selected: date,
+			today
+		}), !hideTimePicker && /* @__PURE__ */ jsx("div", {
 			className: "pl-6 border-l border-border-secondary",
 			children: /* @__PURE__ */ jsx(TimePicker, {
 				date,

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, useFormFieldId } 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  hourFormat?: HourFormat\n  inputClassName?: string\n  label?: string\n  locale?: Partial<Locale>\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  onChange?: (date: Date | undefined) => void\n  showTimePicker?: boolean\n  state?: 'default' | 'disabled' | 'error'\n  timeLocale?: string\n  /** Override translation strings for time picker ARIA labels */\n  timeTranslations?: Partial<TimePickerTranslations>\n  value?: Date\n}\n\nexport const DateTimePicker = ({\n  calendarProps,\n  className,\n  defaultValue,\n  disabled = false,\n  disablePastDates = true,\n  errorMessage,\n  hourFormat,\n  inputClassName,\n  label,\n  locale,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  onChange,\n  showTimePicker = true,\n  state = 'default',\n  timeLocale,\n  timeTranslations,\n  value,\n  id,\n  ...props\n}: DateTimePickerProps) => {\n  const fieldId = useFormFieldId(id)\n  const errorMessageId = getErrorMessageId(fieldId)\n  const describedBy = state === 'error' && errorMessage ? errorMessageId : 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          showTime={showTimePicker}\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      </div>\n\n      <PopoverContent\n        align='start'\n        className={cn('rounded-lg py-4 px-6 flex', !showTimePicker && 'w-[330px]', showTimePicker && effectiveHourFormat === '24' && 'w-[486px]', showTimePicker && effectiveHourFormat === '12' && 'w-[560px]')}\n        data-testid='spectral-datetime-picker-popover'\n        onOpenAutoFocus={(e) => e.preventDefault()}\n      >\n        <Calendar {...calendarProps} disablePastDates={disablePastDates} locale={locale} mode='single' onSelect={handleDateSelect} selected={date} />\n        {showTimePicker && (\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":";;;;;;;;;;;;;;;;;;AAiCA,MAAa,kBAAkB,EAC7B,eACA,WACA,cACA,WAAW,OACX,mBAAmB,MACnB,cACA,YACA,gBACA,OACA,QACA,sBAAsB,GACtB,sBAAsB,OACtB,UACA,iBAAiB,MACjB,QAAQ,WACR,YACA,kBACA,OACA,IACA,GAAG,YACsB;CACzB,MAAM,UAAU,eAAe,GAAE;CACjC,MAAM,iBAAiB,kBAAkB,QAAO;CAChD,MAAM,cAAc,UAAU,WAAW,eAAe,iBAAiB;CACzE,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,CACE,oBAAC,sBAAD;GACE,oBAAkB;GAClB,gBAAc,UAAU;GACxB,WAAW,GAAG,yCAAyC,CAAC,QAAQ,uBAAuB,eAAe;GAE5F;GACV,SACE,oBAAC,gBAAD;IAAgB;IAAkB;cAChC,oBAAC,cAAD;KACE,cAAW;KACX,WAAW,GAAG,4HAA4H,WAAW,sDAAsD,8CAA8C;KAE/O;KACX;IACa;GAElB,YAAY;GACZ,IAAI;GACG;GACP,UAAU;GACV,UAAU;GACH;GACP,OAAO;GACR,GACD,oBAAC,cAAD;GACE,YAAW;GACX,IAAI;GACJ,SAAS,UAAU,UAAU,eAAe;GACvB;GACA;GACtB,EACE;KAEL,qBAAC,gBAAD;EACE,OAAM;EACN,WAAW,GAAG,6BAA6B,CAAC,kBAAkB,aAAa,kBAAkB,wBAAwB,QAAQ,aAAa,kBAAkB,wBAAwB,QAAQ,YAAY;EAExM,kBAAkB,MAAM,EAAE,gBAAgB;YAJ5C,CAME,oBAAC,UAAD;GAAU,GAAI;GAAiC;GAA0B;GAAQ,MAAK;GAAS,UAAU;GAAkB,UAAU;GAAO,GAC3I,kBACC,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 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"}

package/dist/Input.d.ts

@@ -8,6 +8,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange'>
   className?: string;
   clearOnFocus?: boolean;
   endIcon?: ReactElement;
+  hideStateIcon?: boolean;
   labelClassName?: string;
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
   onChange?: (value: string) => void;
@@ -15,7 +16,6 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange'>
   placeholder?: string;
   prefix?: string;
   showClearButton?: boolean;
-  showStateIcon?: boolean;
   startIcon?: ReactElement;
   suppressHydrationWarning?: boolean;
   type?: InputType;

package/dist/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","names":[],"sources":["../src/components/Input/Input.tsx"],"mappings":";;;;;KAQY,SAAA;AAAA,KAEA,UAAA,GAAa,IAAA,CAAK,mBAAA,CAAoB,gBAAA,wBAChD,kBAAA;EACE,SAAA;EACA,YAAA;EACA,OAAA,GAAU,YAAA;EACV,cAAA;EACA,MAAA,IAAU,CAAA,EAAG,UAAA,CAAW,gBAAA;EACxB,QAAA,IAAY,KAAA;EACZ,OAAA,IAAW,CAAA,EAAG,UAAA,CAAW,gBAAA;EACzB,WAAA;EACA,MAAA;EACA,eAAA;EACA,aAAA;EACA,SAAA,GAAY,YAAA;EACZ,wBAAA;EACA,IAAA,GAAO,SAAA;EACP,KAAA;EACA,cAAA,GAAiB,kBAAA;AAAA;AAAA,uBA+BnB,QAAA,EAAU,UAAA;EACR,GAAA,GAAM,GAAA,CAAI,gBAAA;AAAA,IAEX,YAAA;AAAA"}
+{"version":3,"file":"Input.d.ts","names":[],"sources":["../src/components/Input/Input.tsx"],"mappings":";;;;;KAoBY,SAAA;AAAA,KAEA,UAAA,GAAa,IAAA,CAAK,mBAAA,CAAoB,gBAAA,wBAChD,kBAAA;EACE,SAAA;EACA,YAAA;EACA,OAAA,GAAU,YAAA;EACV,aAAA;EACA,cAAA;EACA,MAAA,IAAU,CAAA,EAAG,UAAA,CAAW,gBAAA;EACxB,QAAA,IAAY,KAAA;EACZ,OAAA,IAAW,CAAA,EAAG,UAAA,CAAW,gBAAA;EACzB,WAAA;EACA,MAAA;EACA,eAAA;EACA,SAAA,GAAY,YAAA;EACZ,wBAAA;EACA,IAAA,GAAO,SAAA;EACP,KAAA;EACA,cAAA,GAAiB,kBAAA;AAAA;AAAA,uBAoCnB,QAAA,EAAU,UAAA;EACR,GAAA,GAAM,GAAA,CAAI,gBAAA;AAAA,IAEX,YAAA;AAAA"}

package/dist/Input.js

@@ -8,7 +8,7 @@ import { LoaderIcon } from "./Icons/LoaderIcon.js";
 import { WarningIcon } from "./Icons/WarningIcon.js";
 import { cn } from "./utils/twUtils.js";
 import { ErrorMessage, WarningMessage } from "./FormFieldMessage.js";
-import { getAriaProps, getFormFieldCSSProperties, getInputClasses, useFormFieldId, useFormFieldState } from "./utils/formFieldUtils.js";
+import { getAriaProps, getErrorMessageId, getFormFieldCSSProperties, getInputClasses, getPasswordManagerIgnoreProps, getWarningMessageId, useFormFieldId, useFormFieldState } from "./utils/formFieldUtils.js";
 import { useUncontrolledState } from "./hooks/useUncontrolledState.js";
 import { Label } from "./Label.js";
 import { useClearOnFocus, usePasswordVisibility, usePrefixWidth } from "./Input/InputUtils.js";
@@ -25,6 +25,10 @@ const mergeRefs = (...refs) => {
 		});
 	};
 };
+const iconBaseClasses = "absolute top-1/2 -translate-y-1/2";
+const endIconClasses = cn(iconBaseClasses, "right-3 text-input-icon");
+const startIconClasses = cn(iconBaseClasses, "left-3 text-input-icon");
+const iconButtonClasses = cn(endIconClasses, "aspect-square max-h-6 rounded-sm hover:text-input-icon--hover cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-1");
 const getAutoCompleteValue = (type) => {
 	return {
 		date: "off",
@@ -38,10 +42,10 @@ const getAutoCompleteValue = (type) => {
 	}[type] || "off";
 };
 const Input = (allProps) => {
-	const { className, clearOnFocus = false, defaultValue, disabled, endIcon, errorMessage, id, label, labelClassName, messageReserveLines = 1, messageReserveSpace = false, name, onBlur, onChange, onFocus, placeholder, prefix, ref, required, showClearButton = false, showStateIcon = true, startIcon, state = "default", suppressHydrationWarning = true, type = "text", value: valueProp, warningMessage, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props } = allProps;
+	const { className, clearOnFocus = false, defaultValue, disabled, endIcon, errorMessage, hideStateIcon = false, id, label, labelClassName, messageReserveLines = 1, messageReserveSpace = false, name, onBlur, onChange, onFocus, placeholder, prefix, ref, required, showClearButton = false, startIcon, state = "default", suppressHydrationWarning = true, type = "text", value: valueProp, warningMessage, autoComplete, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props } = allProps;
 	const inputId = useFormFieldId(id, name);
-	const errorMessageId = `${inputId}-error`;
-	const warningMessageId = `${inputId}-warning`;
+	const errorMessageId = getErrorMessageId(inputId);
+	const warningMessageId = getWarningMessageId(inputId);
 	const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state);
 	const ariaProps = getAriaProps(state, ariaDescribedBy, required, state === "error" ? errorMessageId : state === "warning" && warningMessage ? warningMessageId : void 0);
 	const [value, setValue] = useUncontrolledState({
@@ -73,60 +77,62 @@ const Input = (allProps) => {
 	}, [setValue]);
 	const showClearButtonNow = showClearButton && value.length > 0;
 	const getEndIcon = () => {
-		const iconClasses = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer";
 		const iconComponents = {
 			password: () => /* @__PURE__ */ jsx("button", {
 				"aria-controls": inputId,
 				"aria-label": isVisible ? `Hide ${label ?? "password"}` : `Show ${label ?? "password"}`,
 				"aria-pressed": isVisible,
-				className: iconClasses,
+				className: iconButtonClasses,
 				onClick: toggleVisibility,
 				type: "button",
 				children: isVisible ? /* @__PURE__ */ jsx(EyeClosedIcon, { size: 22 }) : /* @__PURE__ */ jsx(EyeOpenIcon, { size: 22 })
 			}),
 			clear: () => /* @__PURE__ */ jsx("button", {
 				"aria-label": String(`Clear ${label ?? "input"}`),
-				className: iconClasses,
+				className: iconButtonClasses,
 				onClick: handleClear,
 				type: "button",
-				children: /* @__PURE__ */ jsx(CloseCircleIcon, { size: 24 })
+				children: /* @__PURE__ */ jsx(CloseCircleIcon, { size: 22 })
 			}),
 			loading: () => /* @__PURE__ */ jsx("div", {
-				className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
+				className: endIconClasses,
 				children: /* @__PURE__ */ jsx(LoaderIcon, { size: 24 })
 			}),
 			error: () => /* @__PURE__ */ jsx("div", {
-				className: "right-4 absolute top-1/2 -translate-y-1/2 text-danger-400",
+				className: cn(iconBaseClasses, "right-3 text-danger-400"),
 				children: /* @__PURE__ */ jsx(ErrorIcon, { size: 24 })
 			}),
 			success: () => /* @__PURE__ */ jsx("div", {
-				className: "right-4 absolute top-1/2 -translate-y-1/2 text-success-400",
+				className: cn(iconBaseClasses, "right-3 text-success-400"),
 				children: /* @__PURE__ */ jsx(CheckCircleIcon, { size: 24 })
 			}),
 			warning: () => /* @__PURE__ */ jsx("div", {
-				className: "right-4 absolute top-1/2 -translate-y-1/2 text-warning-400",
+				className: cn(iconBaseClasses, "right-3 text-warning-400"),
 				children: /* @__PURE__ */ jsx(WarningIcon, { size: 24 })
 			})
 		};
 		if (endIcon) return /* @__PURE__ */ jsx("div", {
-			className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
+			className: endIconClasses,
 			children: endIcon
 		});
 		if (type === "password") return iconComponents.password();
 		if (showClearButtonNow) return iconComponents.clear();
 		if (isLoading) return iconComponents.loading();
-		if (!showStateIcon && (state === "success" || state === "warning" || state === "error")) return null;
+		if (hideStateIcon && (state === "success" || state === "warning" || state === "error")) return null;
 		if (state === "success") return iconComponents.success();
 		if (state === "warning") return iconComponents.warning();
 		if (state === "error") return iconComponents.error();
 		return null;
 	};
 	const getStartIcon = () => {
-		if (startIcon) return startIcon;
+		if (startIcon) return /* @__PURE__ */ jsx("div", {
+			className: startIconClasses,
+			children: startIcon
+		});
 		return null;
 	};
 	const usesTabularNumbers = type === "number" || type === "date" || type === "datetime-local";
-	const inputClasses = cn(getInputClasses(state, className), "[text-indent:var(--prefix-width)]", showClearButtonNow && "pr-10", usesTabularNumbers && "tabular-nums");
+	const inputClasses = cn(getInputClasses(state, className), "[text-indent:var(--prefix-width)]", startIcon && "pl-10", showClearButtonNow && "pr-10", usesTabularNumbers && "tabular-nums");
 	const prefixClasses = cn("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex w-full flex-col gap-1.5",
@@ -148,7 +154,7 @@ const Input = (allProps) => {
 						}),
 						/* @__PURE__ */ jsx("input", {
 							"aria-label": ariaLabel ?? label,
-							autoComplete: getAutoCompleteValue(type),
+							autoComplete: autoComplete ?? getAutoCompleteValue(type),
 							className: inputClasses,
 							"data-state": state,
 							disabled: isDisabled,
@@ -164,6 +170,7 @@ const Input = (allProps) => {
 							suppressHydrationWarning,
 							type: type === "password" ? inputType : type,
 							value,
+							...getPasswordManagerIgnoreProps(type),
 							...ariaProps,
 							...props
 						}),

package/dist/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import { CheckCircleIcon, CloseCircleIcon, ErrorIcon, EyeClosedIcon, EyeOpenIcon, LoaderIcon, WarningIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { ErrorMessage, WarningMessage, getAriaProps, getFormFieldCSSProperties, getInputClasses, useFormFieldId, useFormFieldState, type BaseFormFieldProps } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useRef, type ChangeEvent, type CSSProperties, type FocusEvent, type InputHTMLAttributes, type ReactElement, type Ref } from 'react'\nimport { useClearOnFocus, usePasswordVisibility, usePrefixWidth } from './InputUtils'\n\nexport type InputType = 'text' | 'email' | 'url' | 'tel' | 'password' | 'number' | 'date' | 'datetime-local'\n\nexport type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange'> &\n  BaseFormFieldProps & {\n    className?: string\n    clearOnFocus?: boolean\n    endIcon?: ReactElement\n    labelClassName?: string\n    onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n    onChange?: (value: string) => void\n    onFocus?: (e: FocusEvent<HTMLInputElement>) => void\n    placeholder?: string\n    prefix?: string\n    showClearButton?: boolean\n    showStateIcon?: boolean\n    startIcon?: ReactElement\n    suppressHydrationWarning?: boolean\n    type?: InputType\n    value?: string\n    warningMessage?: BaseFormFieldProps['errorMessage']\n  }\n\nconst mergeRefs = <T,>(...refs: (Ref<T> | undefined)[]): Ref<T> => {\n  return (value: T | null) => {\n    refs.forEach((ref) => {\n      if (!ref) return\n      if (typeof ref === 'function') {\n        ref(value)\n      } else {\n        ;(ref as { current: T | null }).current = value\n      }\n    })\n  }\n}\n\nconst getAutoCompleteValue = (type: InputType): string => {\n  const autoCompleteMap: Record<InputType, string> = {\n    date: 'off',\n    email: 'email',\n    number: 'off',\n    password: 'current-password',\n    tel: 'tel',\n    text: 'off',\n    url: 'url',\n    'datetime-local': 'off',\n  }\n  return autoCompleteMap[type] || 'off'\n}\n\nexport const Input = (\n  allProps: InputProps & {\n    ref?: Ref<HTMLInputElement>\n  },\n): ReactElement => {\n  const {\n    className,\n    clearOnFocus = false,\n    defaultValue,\n    disabled,\n    endIcon,\n    errorMessage,\n    id,\n    label,\n    labelClassName,\n    messageReserveLines = 1,\n    messageReserveSpace = false,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    prefix,\n    ref,\n    required,\n    showClearButton = false,\n    showStateIcon = true,\n    startIcon,\n    state = 'default',\n    suppressHydrationWarning = true,\n    type = 'text',\n    value: valueProp,\n    warningMessage,\n    'aria-label': ariaLabel,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n  } = allProps\n  const inputId = useFormFieldId(id, name)\n  const errorMessageId = `${inputId}-error`\n  const warningMessageId = `${inputId}-warning`\n  const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n\n  const internalRef = useRef<HTMLInputElement>(null)\n  const inputRef = mergeRefs(ref, internalRef)\n\n  const { isVisible, toggleVisibility, inputType } = usePasswordVisibility()\n  const { prefixWidth, prefixRef } = usePrefixWidth(prefix)\n  const { handleFocus: clearOnFocusHandler } = useClearOnFocus(clearOnFocus, (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value))\n\n  const handleBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      onBlur?.(e)\n    },\n    [onBlur],\n  )\n\n  const handleFocus = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      clearOnFocusHandler(e, onFocus)\n    },\n    [clearOnFocusHandler, onFocus],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>): void => {\n      const newValue = e.target.value\n      setValue(newValue)\n    },\n    [setValue],\n  )\n\n  const handleClear = useCallback((): void => {\n    const element = internalRef.current\n    if (element) {\n      setValue('')\n      element.focus()\n    }\n  }, [setValue])\n\n  const showClearButtonNow = showClearButton && value.length > 0\n\n  const getEndIcon = (): ReactElement | null => {\n    const iconClasses = 'absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer'\n\n    const iconComponents = {\n      password: () => (\n        <button aria-controls={inputId} aria-label={isVisible ? `Hide ${label ?? 'password'}` : `Show ${label ?? 'password'}`} aria-pressed={isVisible} className={iconClasses} data-testid='spectral-input-password-toggle' onClick={toggleVisibility} type='button'>\n          {isVisible ? <EyeClosedIcon size={22} /> : <EyeOpenIcon size={22} />}\n        </button>\n      ),\n      clear: () => (\n        <button aria-label={String(`Clear ${label ?? 'input'}`)} className={iconClasses} data-testid='spectral-input-clear-button' onClick={handleClear} type='button'>\n          <CloseCircleIcon size={24} />\n        </button>\n      ),\n      loading: () => (\n        <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-loading-icon'>\n          <LoaderIcon size={24} />\n        </div>\n      ),\n      error: () => (\n        <div className='right-4 absolute top-1/2 -translate-y-1/2 text-danger-400' data-testid='spectral-input-error-icon'>\n          <ErrorIcon size={24} />\n        </div>\n      ),\n      success: () => (\n        <div className='right-4 absolute top-1/2 -translate-y-1/2 text-success-400' data-testid='spectral-input-success-icon'>\n          <CheckCircleIcon size={24} />\n        </div>\n      ),\n      warning: () => (\n        <div className='right-4 absolute top-1/2 -translate-y-1/2 text-warning-400' data-testid='spectral-input-warning-icon'>\n          <WarningIcon size={24} />\n        </div>\n      ),\n    }\n\n    if (endIcon) return <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2'>{endIcon}</div>\n    if (type === 'password') return iconComponents.password()\n    if (showClearButtonNow) return iconComponents.clear()\n    if (isLoading) return iconComponents.loading()\n    if (!showStateIcon && (state === 'success' || state === 'warning' || state === 'error')) return null\n    if (state === 'success') return iconComponents.success()\n    if (state === 'warning') return iconComponents.warning()\n    if (state === 'error') return iconComponents.error()\n\n    return null\n  }\n\n  const getStartIcon = (): ReactElement | null => {\n    if (startIcon) return startIcon\n    return null\n  }\n\n  const usesTabularNumbers = type === 'number' || type === 'date' || type === 'datetime-local'\n  const inputClasses = cn(getInputClasses(state, className), '[text-indent:var(--prefix-width)]', showClearButtonNow && 'pr-10', usesTabularNumbers && 'tabular-nums')\n\n  const prefixClasses = cn('inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50')\n\n  return (\n    <div className='flex w-full flex-col gap-1.5' data-testid='spectral-input-container'>\n      {label && (\n        <Label className={cn('mb-2 block', labelClassName, isDisabled && 'cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder')} data-testid='spectral-input-label' htmlFor={inputId}>\n          {label}\n        </Label>\n      )}\n      <div className='relative' data-testid='spectral-input-wrapper'>\n        <div className='relative'>\n          {getStartIcon()}\n          {prefix && (\n            <span ref={prefixRef} className={prefixClasses}>\n              {prefix}\n            </span>\n          )}\n          <input\n            aria-label={ariaLabel ?? label}\n            autoComplete={getAutoCompleteValue(type)}\n            className={inputClasses}\n            data-state={state}\n            data-testid='spectral-input'\n            disabled={isDisabled}\n            id={inputId}\n            name={name}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            placeholder={placeholder ?? label}\n            ref={inputRef}\n            required={required}\n            style={\n              getFormFieldCSSProperties({\n                '--prefix-width': prefix ? `${prefixWidth}px` : '0',\n              }) as CSSProperties\n            }\n            suppressHydrationWarning={suppressHydrationWarning}\n            type={type === 'password' ? inputType : type}\n            value={value}\n            {...ariaProps}\n            {...props}\n          />\n          {getEndIcon()}\n        </div>\n\n        <ErrorMessage\n          dataTestId='spectral-input-error-message'\n          id={errorMessageId}\n          message={isInvalid ? (errorMessage ?? null) : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace && state === 'error'}\n        />\n        <WarningMessage\n          dataTestId='spectral-input-warning-message'\n          id={warningMessageId}\n          message={state === 'warning' ? (warningMessage ?? null) : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace && state === 'warning'}\n        />\n      </div>\n    </div>\n  )\n}\nInput.displayName = 'Input'\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import { CheckCircleIcon, CloseCircleIcon, ErrorIcon, EyeClosedIcon, EyeOpenIcon, LoaderIcon, WarningIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport {\n  ErrorMessage,\n  getAriaProps,\n  getErrorMessageId,\n  getFormFieldCSSProperties,\n  getInputClasses,\n  getPasswordManagerIgnoreProps,\n  getWarningMessageId,\n  useFormFieldId,\n  useFormFieldState,\n  WarningMessage,\n  type BaseFormFieldProps,\n} from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useRef, type ChangeEvent, type CSSProperties, type FocusEvent, type InputHTMLAttributes, type ReactElement, type Ref } from 'react'\nimport { useClearOnFocus, usePasswordVisibility, usePrefixWidth } from './InputUtils'\n\nexport type InputType = 'text' | 'email' | 'url' | 'tel' | 'password' | 'number' | 'date' | 'datetime-local'\n\nexport type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange'> &\n  BaseFormFieldProps & {\n    className?: string\n    clearOnFocus?: boolean\n    endIcon?: ReactElement\n    hideStateIcon?: boolean\n    labelClassName?: string\n    onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n    onChange?: (value: string) => void\n    onFocus?: (e: FocusEvent<HTMLInputElement>) => void\n    placeholder?: string\n    prefix?: string\n    showClearButton?: boolean\n    startIcon?: ReactElement\n    suppressHydrationWarning?: boolean\n    type?: InputType\n    value?: string\n    warningMessage?: BaseFormFieldProps['errorMessage']\n  }\n\nconst mergeRefs = <T,>(...refs: (Ref<T> | undefined)[]): Ref<T> => {\n  return (value: T | null) => {\n    refs.forEach((ref) => {\n      if (!ref) return\n      if (typeof ref === 'function') {\n        ref(value)\n      } else {\n        ;(ref as { current: T | null }).current = value\n      }\n    })\n  }\n}\n\nconst iconBaseClasses = 'absolute top-1/2 -translate-y-1/2'\nconst endIconClasses = cn(iconBaseClasses, 'right-3 text-input-icon')\nconst startIconClasses = cn(iconBaseClasses, 'left-3 text-input-icon')\nconst iconButtonClasses = cn(endIconClasses, 'aspect-square max-h-6 rounded-sm hover:text-input-icon--hover cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-1')\n\nconst getAutoCompleteValue = (type: InputType): string => {\n  const autoCompleteMap: Record<InputType, string> = {\n    date: 'off',\n    email: 'email',\n    number: 'off',\n    password: 'current-password',\n    tel: 'tel',\n    text: 'off',\n    url: 'url',\n    'datetime-local': 'off',\n  }\n  return autoCompleteMap[type] || 'off'\n}\n\nexport const Input = (\n  allProps: InputProps & {\n    ref?: Ref<HTMLInputElement>\n  },\n): ReactElement => {\n  const {\n    className,\n    clearOnFocus = false,\n    defaultValue,\n    disabled,\n    endIcon,\n    errorMessage,\n    hideStateIcon = false,\n    id,\n    label,\n    labelClassName,\n    messageReserveLines = 1,\n    messageReserveSpace = false,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    prefix,\n    ref,\n    required,\n    showClearButton = false,\n    startIcon,\n    state = 'default',\n    suppressHydrationWarning = true,\n    type = 'text',\n    value: valueProp,\n    warningMessage,\n    autoComplete,\n    'aria-label': ariaLabel,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n  } = allProps\n  const inputId = useFormFieldId(id, name)\n  const errorMessageId = getErrorMessageId(inputId)\n  const warningMessageId = getWarningMessageId(inputId)\n  const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n\n  const internalRef = useRef<HTMLInputElement>(null)\n  const inputRef = mergeRefs(ref, internalRef)\n\n  const { isVisible, toggleVisibility, inputType } = usePasswordVisibility()\n  const { prefixWidth, prefixRef } = usePrefixWidth(prefix)\n  const { handleFocus: clearOnFocusHandler } = useClearOnFocus(clearOnFocus, (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value))\n\n  const handleBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      onBlur?.(e)\n    },\n    [onBlur],\n  )\n\n  const handleFocus = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      clearOnFocusHandler(e, onFocus)\n    },\n    [clearOnFocusHandler, onFocus],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>): void => {\n      const newValue = e.target.value\n      setValue(newValue)\n    },\n    [setValue],\n  )\n\n  const handleClear = useCallback((): void => {\n    const element = internalRef.current\n    if (element) {\n      setValue('')\n      element.focus()\n    }\n  }, [setValue])\n\n  const showClearButtonNow = showClearButton && value.length > 0\n\n  const getEndIcon = (): ReactElement | null => {\n    const iconComponents = {\n      password: () => (\n        <button aria-controls={inputId} aria-label={isVisible ? `Hide ${label ?? 'password'}` : `Show ${label ?? 'password'}`} aria-pressed={isVisible} className={iconButtonClasses} data-testid='spectral-input-password-toggle' onClick={toggleVisibility} type='button'>\n          {isVisible ? <EyeClosedIcon size={22} /> : <EyeOpenIcon size={22} />}\n        </button>\n      ),\n      clear: () => (\n        <button aria-label={String(`Clear ${label ?? 'input'}`)} className={iconButtonClasses} data-testid='spectral-input-clear-button' onClick={handleClear} type='button'>\n          <CloseCircleIcon size={22} />\n        </button>\n      ),\n      loading: () => (\n        <div className={endIconClasses} data-testid='spectral-input-loading-icon'>\n          <LoaderIcon size={24} />\n        </div>\n      ),\n      error: () => (\n        <div className={cn(iconBaseClasses, 'right-3 text-danger-400')} data-testid='spectral-input-error-icon'>\n          <ErrorIcon size={24} />\n        </div>\n      ),\n      success: () => (\n        <div className={cn(iconBaseClasses, 'right-3 text-success-400')} data-testid='spectral-input-success-icon'>\n          <CheckCircleIcon size={24} />\n        </div>\n      ),\n      warning: () => (\n        <div className={cn(iconBaseClasses, 'right-3 text-warning-400')} data-testid='spectral-input-warning-icon'>\n          <WarningIcon size={24} />\n        </div>\n      ),\n    }\n\n    if (endIcon) return <div className={endIconClasses}>{endIcon}</div>\n    if (type === 'password') return iconComponents.password()\n    if (showClearButtonNow) return iconComponents.clear()\n    if (isLoading) return iconComponents.loading()\n    if (hideStateIcon && (state === 'success' || state === 'warning' || state === 'error')) return null\n    if (state === 'success') return iconComponents.success()\n    if (state === 'warning') return iconComponents.warning()\n    if (state === 'error') return iconComponents.error()\n\n    return null\n  }\n\n  const getStartIcon = (): ReactElement | null => {\n    if (startIcon) return <div className={startIconClasses}>{startIcon}</div>\n    return null\n  }\n\n  const usesTabularNumbers = type === 'number' || type === 'date' || type === 'datetime-local'\n  const inputClasses = cn(getInputClasses(state, className), '[text-indent:var(--prefix-width)]', startIcon && 'pl-10', showClearButtonNow && 'pr-10', usesTabularNumbers && 'tabular-nums')\n\n  const prefixClasses = cn('inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50')\n\n  return (\n    <div className='flex w-full flex-col gap-1.5' data-testid='spectral-input-container'>\n      {label && (\n        <Label className={cn('mb-2 block', labelClassName, isDisabled && 'cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder')} data-testid='spectral-input-label' htmlFor={inputId}>\n          {label}\n        </Label>\n      )}\n      <div className='relative' data-testid='spectral-input-wrapper'>\n        <div className='relative'>\n          {getStartIcon()}\n          {prefix && (\n            <span ref={prefixRef} className={prefixClasses}>\n              {prefix}\n            </span>\n          )}\n          <input\n            aria-label={ariaLabel ?? label}\n            autoComplete={autoComplete ?? getAutoCompleteValue(type)}\n            className={inputClasses}\n            data-state={state}\n            data-testid='spectral-input'\n            disabled={isDisabled}\n            id={inputId}\n            name={name}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            placeholder={placeholder ?? label}\n            ref={inputRef}\n            required={required}\n            style={\n              getFormFieldCSSProperties({\n                '--prefix-width': prefix ? `${prefixWidth}px` : '0',\n              }) as CSSProperties\n            }\n            suppressHydrationWarning={suppressHydrationWarning}\n            type={type === 'password' ? inputType : type}\n            value={value}\n            {...getPasswordManagerIgnoreProps(type)}\n            {...ariaProps}\n            {...props}\n          />\n          {getEndIcon()}\n        </div>\n\n        <ErrorMessage\n          dataTestId='spectral-input-error-message'\n          id={errorMessageId}\n          message={isInvalid ? (errorMessage ?? null) : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace && state === 'error'}\n        />\n        <WarningMessage\n          dataTestId='spectral-input-warning-message'\n          id={warningMessageId}\n          message={state === 'warning' ? (warningMessage ?? null) : null}\n          messageReserveLines={messageReserveLines}\n          messageReserveSpace={messageReserveSpace && state === 'warning'}\n        />\n      </div>\n    </div>\n  )\n}\nInput.displayName = 'Input'\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,MAAM,aAAiB,GAAG,SAAyC;AACjE,SAAQ,UAAoB;AAC1B,OAAK,SAAS,QAAQ;AACpB,OAAI,CAAC,IAAK;AACV,OAAI,OAAO,QAAQ,WACjB,KAAI,MAAK;OAER,CAAC,IAA8B,UAAU;IAE7C;;;AAIL,MAAM,kBAAkB;AACxB,MAAM,iBAAiB,GAAG,iBAAiB,0BAAyB;AACpE,MAAM,mBAAmB,GAAG,iBAAiB,yBAAwB;AACrE,MAAM,oBAAoB,GAAG,gBAAgB,sLAAqL;AAElO,MAAM,wBAAwB,SAA4B;AAWxD,QAAO;EATL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,UAAU;EACV,KAAK;EACL,MAAM;EACN,KAAK;EACL,kBAAkB;EAEE,CAAC,SAAS;;AAGlC,MAAa,SACX,aAGiB;CACjB,MAAM,EACJ,WACA,eAAe,OACf,cACA,UACA,SACA,cACA,gBAAgB,OAChB,IACA,OACA,gBACA,sBAAsB,GACtB,sBAAsB,OACtB,MACA,QACA,UACA,SACA,aACA,QACA,KACA,UACA,kBAAkB,OAClB,WACA,QAAQ,WACR,2BAA2B,MAC3B,OAAO,QACP,OAAO,WACP,gBACA,cACA,cAAc,WACd,oBAAoB,iBACpB,GAAG,UACD;CACJ,MAAM,UAAU,eAAe,IAAI,KAAI;CACvC,MAAM,iBAAiB,kBAAkB,QAAO;CAChD,MAAM,mBAAmB,oBAAoB,QAAO;CACpD,MAAM,EAAE,YAAY,WAAW,cAAc,kBAAkB,UAAU,MAAK;CAE9E,MAAM,YAAY,aAAa,OAAO,iBAAiB,UADrC,UAAU,UAAU,iBAAiB,UAAU,aAAa,iBAAiB,mBAAmB,OACxC;CAE1E,MAAM,CAAC,OAAO,YAAY,qBAA6B;EACrD,OAAO;EACP,cAH6B,OAAO,iBAAiB,WAAW,eAAe,iBAAiB,UAAa,iBAAiB,OAAO,OAAO,aAAa,GAAG;EAI5J;EACD,CAAA;CAED,MAAM,cAAc,OAAyB,KAAI;CACjD,MAAM,WAAW,UAAU,KAAK,YAAW;CAE3C,MAAM,EAAE,WAAW,kBAAkB,cAAc,uBAAsB;CACzE,MAAM,EAAE,aAAa,cAAc,eAAe,OAAM;CACxD,MAAM,EAAE,aAAa,wBAAwB,gBAAgB,eAAe,MAAqC,SAAS,EAAE,OAAO,MAAM,CAAA;CAEzI,MAAM,aAAa,aAChB,MAA0C;AACzC,WAAS,EAAC;IAEZ,CAAC,OAAO,CACV;CAEA,MAAM,cAAc,aACjB,MAA0C;AACzC,sBAAoB,GAAG,QAAO;IAEhC,CAAC,qBAAqB,QAAQ,CAChC;CAEA,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAC1B,WAAS,SAAQ;IAEnB,CAAC,SAAS,CACZ;CAEA,MAAM,cAAc,kBAAwB;EAC1C,MAAM,UAAU,YAAY;AAC5B,MAAI,SAAS;AACX,YAAS,GAAE;AACX,WAAQ,OAAM;;IAEf,CAAC,SAAS,CAAA;CAEb,MAAM,qBAAqB,mBAAmB,MAAM,SAAS;CAE7D,MAAM,mBAAwC;EAC5C,MAAM,iBAAiB;GACrB,gBACE,oBAAC,UAAD;IAAQ,iBAAe;IAAS,cAAY,YAAY,QAAQ,SAAS,eAAe,QAAQ,SAAS;IAAc,gBAAc;IAAW,WAAW;IAAgE,SAAS;IAAkB,MAAK;cACxP,YAAY,oBAAC,eAAD,EAAe,MAAM,IAAM,IAAG,oBAAC,aAAD,EAAa,MAAM,IAAM;IAC9D;GAEV,aACE,oBAAC,UAAD;IAAQ,cAAY,OAAO,SAAS,SAAS,UAAU;IAAE,WAAW;IAA6D,SAAS;IAAa,MAAK;cAC1J,oBAAC,iBAAD,EAAiB,MAAM,IAAK;IACtB;GAEV,eACE,oBAAC,OAAD;IAAK,WAAW;cACd,oBAAC,YAAD,EAAY,MAAM,IAAK;IACpB;GAEP,aACE,oBAAC,OAAD;IAAK,WAAW,GAAG,iBAAiB,0BAA0B;cAC5D,oBAAC,WAAD,EAAW,MAAM,IAAK;IACnB;GAEP,eACE,oBAAC,OAAD;IAAK,WAAW,GAAG,iBAAiB,2BAA2B;cAC7D,oBAAC,iBAAD,EAAiB,MAAM,IAAK;IACzB;GAEP,eACE,oBAAC,OAAD;IAAK,WAAW,GAAG,iBAAiB,2BAA2B;cAC7D,oBAAC,aAAD,EAAa,MAAM,IAAK;IACrB;GAET;AAEA,MAAI,QAAS,QAAO,oBAAC,OAAD;GAAK,WAAW;aAAiB;GAAa;AAClE,MAAI,SAAS,WAAY,QAAO,eAAe,UAAS;AACxD,MAAI,mBAAoB,QAAO,eAAe,OAAM;AACpD,MAAI,UAAW,QAAO,eAAe,SAAQ;AAC7C,MAAI,kBAAkB,UAAU,aAAa,UAAU,aAAa,UAAU,SAAU,QAAO;AAC/F,MAAI,UAAU,UAAW,QAAO,eAAe,SAAQ;AACvD,MAAI,UAAU,UAAW,QAAO,eAAe,SAAQ;AACvD,MAAI,UAAU,QAAS,QAAO,eAAe,OAAM;AAEnD,SAAO;;CAGT,MAAM,qBAA0C;AAC9C,MAAI,UAAW,QAAO,oBAAC,OAAD;GAAK,WAAW;aAAmB;GAAe;AACxE,SAAO;;CAGT,MAAM,qBAAqB,SAAS,YAAY,SAAS,UAAU,SAAS;CAC5E,MAAM,eAAe,GAAG,gBAAgB,OAAO,UAAU,EAAE,qCAAqC,aAAa,SAAS,sBAAsB,SAAS,sBAAsB,eAAc;CAEzL,MAAM,gBAAgB,GAAG,wIAAuI;AAEhK,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,SACC,oBAAC,OAAD;GAAO,WAAW,GAAG,cAAc,gBAAgB,cAAc,uFAAuF;GAAqC,SAAS;aACnM;GACI,GAET,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,cAAc;MACd,UACC,oBAAC,QAAD;OAAM,KAAK;OAAW,WAAW;iBAC9B;OACG;MAER,oBAAC,SAAD;OACE,cAAY,aAAa;OACzB,cAAc,gBAAgB,qBAAqB,KAAK;OACxD,WAAW;OACX,cAAY;OAEZ,UAAU;OACV,IAAI;OACE;OACN,QAAQ;OACR,UAAU;OACV,SAAS;OACT,aAAa,eAAe;OAC5B,KAAK;OACK;OACV,OACE,0BAA0B,EACxB,kBAAkB,SAAS,GAAG,YAAY,MAAM,KACjD,CAAC;OAEsB;OAC1B,MAAM,SAAS,aAAa,YAAY;OACjC;OACP,GAAI,8BAA8B,KAAK;OACvC,GAAI;OACJ,GAAI;OACL;MACA,YAAY;MACV;;IAEL,oBAAC,cAAD;KACE,YAAW;KACX,IAAI;KACJ,SAAS,YAAa,gBAAgB,OAAQ;KACzB;KACrB,qBAAqB,uBAAuB,UAAU;KACvD;IACD,oBAAC,gBAAD;KACE,YAAW;KACX,IAAI;KACJ,SAAS,UAAU,YAAa,kBAAkB,OAAQ;KACrC;KACrB,qBAAqB,uBAAuB,UAAU;KACvD;IACE;KACF;;;AAGT,MAAM,cAAc"}