@spear-ai/spectral 1.13.0 → 1.14.1

package/dist/DateTimePicker/DateTimeDisplayInput.js.map

@@ -0,0 +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').toLowerCase()\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.toLowerCase()\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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"}

package/dist/DateTimePicker/DateTimeInput.d.ts

@@ -1,21 +1,43 @@
-import { ComponentProps, Ref } from 'react';
-import { Period, TimePickerTranslations, TimePickerType } from './DateTimeUtils';
-export interface DateTimeInputProps extends Omit<ComponentProps<'input'>, 'onChange' | 'type'> {
-    date: Date | undefined;
-    /** Locale for number formatting */
-    locale?: string;
-    onLeftFocus?: () => void;
-    onRightFocus?: () => void;
-    period?: Period;
-    picker: TimePickerType;
-    setDate: (date: Date | undefined) => void;
-    /** Override translation strings for ARIA labels */
-    translations?: TimePickerTranslations;
+'use client';
+import { Period, TimePickerTranslations, TimePickerType } from "./DateTimeUtils.js";
+import { ComponentProps, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/DateTimePicker/DateTimeInput.d.ts
+interface DateTimeInputProps extends Omit<ComponentProps<'input'>, 'onChange' | 'type'> {
+  date: Date | undefined;
+  /** Locale for number formatting */
+  locale?: string;
+  onLeftFocus?: () => void;
+  onRightFocus?: () => void;
+  period?: Period;
+  picker: TimePickerType;
+  setDate: (date: Date | undefined) => void;
+  /** Override translation strings for ARIA labels */
+  translations?: TimePickerTranslations;
 }
-export declare const DateTimeInput: {
-    ({ className, date, disabled, id, locale, name, onKeyDown, onLeftFocus, onRightFocus, period, picker, ref, setDate, translations, ...props }: DateTimeInputProps & {
-        ref?: Ref<HTMLInputElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function DateTimeInput({
+  className,
+  date,
+  disabled,
+  id,
+  locale,
+  name,
+  onKeyDown,
+  onLeftFocus,
+  onRightFocus,
+  period,
+  picker,
+  ref,
+  setDate,
+  translations,
+  ...props
+}: DateTimeInputProps & {
+  ref?: Ref<HTMLInputElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace DateTimeInput {
+  var displayName: string;
+}
+//#endregion
+export { DateTimeInput, DateTimeInputProps };
 //# sourceMappingURL=DateTimeInput.d.ts.map

package/dist/DateTimePicker/DateTimeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.d.ts","names":[],"sources":["../../src/components/DateTimePicker/DateTimeInput.tsx"],"mappings":";;;;;;UAKiB,kBAAA,SAA2B,IAAA,CAAK,cAAA;EAC/C,IAAA,EAAM,IAAA;;EAEN,MAAA;EACA,WAAA;EACA,YAAA;EACA,MAAA,GAAS,MAAA;EACT,MAAA,EAAQ,cAAA;EACR,OAAA,GAAU,IAAA,EAAM,IAAA;EADR;EAGR,YAAA,GAAe,sBAAA;AAAA;AAAA;EAgBe,SAAA;EAAW,IAAA;EAAM,QAAA;EAAU,EAAA;EAAI,MAAA;EAAQ,IAAA;EAAM,SAAA;EAAW,WAAA;EAAa,YAAA;EAAc,MAAA;EAAQ,MAAA;EAAQ,GAAA;EAAK,OAAA;EAAS,YAAA;EAAA,GAAwC;AAAA,GAAS,kBAAA;EAAuB,GAAA,GAAM,GAAA,CAAI,gBAAA;AAAA,IAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/DateTimePicker/DateTimeInput.js

@@ -1,136 +1,189 @@
-'use client'
-import '../styles/main.css'
-import { t as e } from "../twUtils-BpqlKSeB.js";
-import { Input as t } from "../primitives/input.js";
-import { F as n, S as r, _ as i, g as a, h as o, m as s, p as c, t as l, v as u } from "../DateTimeUtils-BJUAMuot.js";
-import { useCallback as d, useEffect as f, useMemo as p, useRef as m } from "react";
-import { jsx as h } from "react/jsx-runtime";
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { Input } from "../primitives/input.js";
+import { DEFAULT_TRANSLATIONS, formatTimeNumber, getAriaLabel, getAriaValueMinMax, getAriaValueNow, getArrowByType, getDateByType, getResolvedLocale, setDateByType } from "./DateTimeUtils.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
 //#region src/components/DateTimePicker/DateTimeInput.tsx
-var g = (...e) => (t) => {
-	e.forEach((e) => {
-		e && (typeof e == "function" ? e(t) : e.current = t);
-	});
-}, _ = ({ className: _, date: v, disabled: y, id: b, locale: x, name: S, onKeyDown: C, onLeftFocus: w, onRightFocus: T, period: E, picker: D, ref: O, setDate: k, translations: A = l, ...j }) => {
-	let M = m(null), N = g(M, O), P = m(""), F = m(!1), I = p(() => r(x), [x]), L = p(() => {
-		if (v) return v;
-		let e = /* @__PURE__ */ new Date();
-		return e.setHours(0, 0, 0, 0), e;
-	}, [v]), { min: R, max: z } = p(() => o(D), [D]), B = p(() => u(L, D), [L, D]), V = p(() => c(parseInt(B, 10), I), [B, I]), H = p(() => ({
-		"aria-label": s(D, A),
-		"aria-valuemin": R,
-		"aria-valuemax": z,
-		"aria-valuenow": a(L, D),
-		"aria-valuetext": V
+const mergeRefs = (...refs) => {
+	return (value) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") ref(value);
+			else ref.current = value;
+		});
+	};
+};
+const DateTimeInput = ({ className, date, disabled, id, locale, name, onKeyDown, onLeftFocus, onRightFocus, period, picker, ref, setDate, translations = DEFAULT_TRANSLATIONS, ...props }) => {
+	const internalRef = useRef(null);
+	const inputRef = mergeRefs(internalRef, ref);
+	const editBufferRef = useRef("");
+	const isEditingRef = useRef(false);
+	const resolvedLocale = useMemo(() => getResolvedLocale(locale), [locale]);
+	const effectiveDate = useMemo(() => {
+		if (date) return date;
+		const d = /* @__PURE__ */ new Date();
+		d.setHours(0, 0, 0, 0);
+		return d;
+	}, [date]);
+	const { min, max } = useMemo(() => getAriaValueMinMax(picker), [picker]);
+	const internalValue = useMemo(() => getDateByType(effectiveDate, picker), [effectiveDate, picker]);
+	const displayValue = useMemo(() => formatTimeNumber(parseInt(internalValue, 10), resolvedLocale), [internalValue, resolvedLocale]);
+	const ariaProps = useMemo(() => ({
+		"aria-label": getAriaLabel(picker, translations),
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": getAriaValueNow(effectiveDate, picker),
+		"aria-valuetext": displayValue
 	}), [
-		L,
-		D,
-		V,
-		A,
-		R,
-		z
+		effectiveDate,
+		picker,
+		displayValue,
+		translations,
+		min,
+		max
 	]);
-	f(() => {
-		M.current && !F.current && (M.current.value = V);
-	}, [V]);
-	let U = d((e) => {
-		P.current = "", F.current = !1, k(n(new Date(L), D, e, E));
+	useEffect(() => {
+		if (internalRef.current && !isEditingRef.current) internalRef.current.value = displayValue;
+	}, [displayValue]);
+	const commitValue = useCallback((value) => {
+		editBufferRef.current = "";
+		isEditingRef.current = false;
+		setDate(setDateByType(new Date(effectiveDate), picker, value, period));
 	}, [
-		L,
-		D,
-		E,
-		k
-	]), W = d((e) => {
+		effectiveDate,
+		picker,
+		period,
+		setDate
+	]);
+	const handleKeyDown = useCallback((e) => {
 		if (e.key === "Tab") {
-			if (P.current) {
-				let e = parseInt(P.current, 10);
-				isNaN(e) || U(Math.max(R, Math.min(z, e)).toString().padStart(2, "0"));
+			if (editBufferRef.current) {
+				const numValue = parseInt(editBufferRef.current, 10);
+				if (!isNaN(numValue)) commitValue(Math.max(min, Math.min(max, numValue)).toString().padStart(2, "0"));
 			}
 			return;
 		}
 		if (e.key === "ArrowRight") {
-			if (e.preventDefault(), P.current) {
-				let e = parseInt(P.current, 10);
-				isNaN(e) || U(Math.max(R, Math.min(z, e)).toString().padStart(2, "0"));
+			e.preventDefault();
+			if (editBufferRef.current) {
+				const numValue = parseInt(editBufferRef.current, 10);
+				if (!isNaN(numValue)) commitValue(Math.max(min, Math.min(max, numValue)).toString().padStart(2, "0"));
 			}
-			T?.();
+			onRightFocus?.();
 			return;
 		}
 		if (e.key === "ArrowLeft") {
-			if (e.preventDefault(), P.current) {
-				let e = parseInt(P.current, 10);
-				isNaN(e) || U(Math.max(R, Math.min(z, e)).toString().padStart(2, "0"));
+			e.preventDefault();
+			if (editBufferRef.current) {
+				const numValue = parseInt(editBufferRef.current, 10);
+				if (!isNaN(numValue)) commitValue(Math.max(min, Math.min(max, numValue)).toString().padStart(2, "0"));
 			}
-			w?.();
+			onLeftFocus?.();
 			return;
 		}
 		if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-			e.preventDefault(), P.current = "", F.current = !1;
-			let t = i(e.key === "ArrowUp" ? 1 : -1, D, B);
-			k(n(new Date(L), D, t, E));
+			e.preventDefault();
+			editBufferRef.current = "";
+			isEditingRef.current = false;
+			const newValue = getArrowByType(e.key === "ArrowUp" ? 1 : -1, picker, internalValue);
+			setDate(setDateByType(new Date(effectiveDate), picker, newValue, period));
 			return;
 		}
 		if (e.key === "Home" || e.key === "End") {
-			e.preventDefault(), P.current = "", F.current = !1;
-			let t = (e.key === "Home" ? R : z).toString().padStart(2, "0");
-			k(n(new Date(L), D, t, E));
+			e.preventDefault();
+			editBufferRef.current = "";
+			isEditingRef.current = false;
+			const newValue = (e.key === "Home" ? min : max).toString().padStart(2, "0");
+			setDate(setDateByType(new Date(effectiveDate), picker, newValue, period));
 			return;
 		}
 		if (e.key >= "0" && e.key <= "9") {
 			e.preventDefault();
-			let t = P.current + e.key, n = parseInt(t, 10);
-			t.length >= 2 || n * 10 > z ? (U(Math.max(R, Math.min(z, n)).toString().padStart(2, "0")), T?.()) : (P.current = t, F.current = !0, M.current && (M.current.value = c(n, I)));
+			const newBuffer = editBufferRef.current + e.key;
+			const numValue = parseInt(newBuffer, 10);
+			if (newBuffer.length >= 2) {
+				commitValue(Math.max(min, Math.min(max, numValue)).toString().padStart(2, "0"));
+				onRightFocus?.();
+			} else if (numValue * 10 > max) {
+				commitValue(Math.max(min, Math.min(max, numValue)).toString().padStart(2, "0"));
+				onRightFocus?.();
+			} else {
+				editBufferRef.current = newBuffer;
+				isEditingRef.current = true;
+				if (internalRef.current) internalRef.current.value = formatTimeNumber(numValue, resolvedLocale);
+			}
 			return;
 		}
-		if (e.key === "Backspace") if (e.preventDefault(), P.current) {
-			let e = P.current.slice(0, -1);
-			P.current = e, F.current = e.length > 0, M.current && (M.current.value = e ? c(parseInt(e, 10), I) : V);
-		} else P.current = "", U(R.toString().padStart(2, "0")), M.current && (M.current.value = c(R, I));
+		if (e.key === "Backspace") {
+			e.preventDefault();
+			if (editBufferRef.current) {
+				const newBuffer = editBufferRef.current.slice(0, -1);
+				editBufferRef.current = newBuffer;
+				isEditingRef.current = newBuffer.length > 0;
+				if (internalRef.current) internalRef.current.value = newBuffer ? formatTimeNumber(parseInt(newBuffer, 10), resolvedLocale) : displayValue;
+			} else {
+				editBufferRef.current = "";
+				commitValue(min.toString().padStart(2, "0"));
+				if (internalRef.current) internalRef.current.value = formatTimeNumber(min, resolvedLocale);
+			}
+		}
 	}, [
-		B,
-		L,
-		R,
-		z,
-		w,
-		T,
-		E,
-		D,
-		k,
-		U,
-		V,
-		I
-	]), G = d(() => {
-		F.current || (P.current = "");
-	}, []), K = d(() => {
-		if (P.current) {
-			let e = parseInt(P.current, 10);
-			isNaN(e) ? (P.current = "", F.current = !1) : U(Math.max(R, Math.min(z, e)).toString().padStart(2, "0"));
+		internalValue,
+		effectiveDate,
+		min,
+		max,
+		onLeftFocus,
+		onRightFocus,
+		period,
+		picker,
+		setDate,
+		commitValue,
+		displayValue,
+		resolvedLocale
+	]);
+	const handleFocus = useCallback(() => {
+		if (!isEditingRef.current) editBufferRef.current = "";
+	}, []);
+	const handleBlur = useCallback(() => {
+		if (editBufferRef.current) {
+			const numValue = parseInt(editBufferRef.current, 10);
+			if (!isNaN(numValue)) commitValue(Math.max(min, Math.min(max, numValue)).toString().padStart(2, "0"));
+			else {
+				editBufferRef.current = "";
+				isEditingRef.current = false;
+			}
 		}
 	}, [
-		R,
-		z,
-		U
+		min,
+		max,
+		commitValue
 	]);
-	return /* @__PURE__ */ h(t, {
-		className: e("text-center tabular-nums", _),
+	return /* @__PURE__ */ jsx(Input, {
+		className: cn("text-center tabular-nums", className),
 		"data-slot": "datetime-input",
-		"data-testid": `spectral-datetime-input-${D}`,
-		defaultValue: V,
-		disabled: y,
-		id: b ?? D,
+		"data-testid": `spectral-datetime-input-${picker}`,
+		defaultValue: displayValue,
+		disabled,
+		id: id ?? picker,
 		inputMode: "numeric",
-		name: S ?? D,
-		onBlur: K,
-		onFocus: G,
+		name: name ?? picker,
+		onBlur: handleBlur,
+		onFocus: handleFocus,
 		onKeyDown: (e) => {
-			C?.(e), W(e);
+			onKeyDown?.(e);
+			handleKeyDown(e);
 		},
-		readOnly: !0,
-		ref: N,
+		readOnly: true,
+		ref: inputRef,
 		role: "spinbutton",
-		...H,
-		...j
+		...ariaProps,
+		...props
 	});
 };
-_.displayName = "DateTimeInput";
+DateTimeInput.displayName = "DateTimeInput";
+
 //#endregion
-export { _ as DateTimeInput };
+export { DateTimeInput };
+//# sourceMappingURL=DateTimeInput.js.map

package/dist/DateTimePicker/DateTimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.js","names":[],"sources":["../../src/components/DateTimePicker/DateTimeInput.tsx"],"sourcesContent":["import { Input } from '@primitives/input'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useEffect, useMemo, useRef, type ComponentProps, type KeyboardEvent, type Ref } from 'react'\nimport { DEFAULT_TRANSLATIONS, formatTimeNumber, getAriaLabel, getAriaValueMinMax, getAriaValueNow, getArrowByType, getDateByType, getResolvedLocale, setDateByType, type Period, type TimePickerTranslations, type TimePickerType } from './DateTimeUtils'\n\nexport interface DateTimeInputProps extends Omit<ComponentProps<'input'>, 'onChange' | 'type'> {\n  date: Date | undefined\n  /** Locale for number formatting */\n  locale?: string\n  onLeftFocus?: () => void\n  onRightFocus?: () => void\n  period?: Period\n  picker: TimePickerType\n  setDate: (date: Date | undefined) => void\n  /** Override translation strings for ARIA labels */\n  translations?: TimePickerTranslations\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\nexport const DateTimeInput = ({ className, date, disabled, id, locale, name, onKeyDown, onLeftFocus, onRightFocus, period, picker, ref, setDate, translations = DEFAULT_TRANSLATIONS, ...props }: DateTimeInputProps & { ref?: Ref<HTMLInputElement> }) => {\n  const internalRef = useRef<HTMLInputElement>(null)\n  const inputRef = mergeRefs(internalRef, ref)\n  const editBufferRef = useRef('')\n  const isEditingRef = useRef(false)\n\n  const resolvedLocale = useMemo(() => getResolvedLocale(locale), [locale])\n\n  const effectiveDate = useMemo(() => {\n    if (date) return date\n    const d = new Date()\n    d.setHours(0, 0, 0, 0)\n    return d\n  }, [date])\n\n  const { min, max } = useMemo(() => getAriaValueMinMax(picker), [picker])\n\n  const internalValue = useMemo(() => getDateByType(effectiveDate, picker), [effectiveDate, picker])\n\n  const displayValue = useMemo(() => formatTimeNumber(parseInt(internalValue, 10), resolvedLocale), [internalValue, resolvedLocale])\n\n  const ariaProps = useMemo(\n    () => ({\n      'aria-label': getAriaLabel(picker, translations),\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': getAriaValueNow(effectiveDate, picker),\n      'aria-valuetext': displayValue,\n    }),\n    [effectiveDate, picker, displayValue, translations, min, max],\n  )\n\n  useEffect(() => {\n    if (internalRef.current && !isEditingRef.current) {\n      internalRef.current.value = displayValue\n    }\n  }, [displayValue])\n\n  const commitValue = useCallback(\n    (value: string) => {\n      editBufferRef.current = ''\n      isEditingRef.current = false\n      const newDate = new Date(effectiveDate)\n      setDate(setDateByType(newDate, picker, value, period))\n    },\n    [effectiveDate, picker, period, setDate],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Tab') {\n        if (editBufferRef.current) {\n          const numValue = parseInt(editBufferRef.current, 10)\n          if (!isNaN(numValue)) {\n            const clamped = Math.max(min, Math.min(max, numValue))\n            commitValue(clamped.toString().padStart(2, '0'))\n          }\n        }\n        return\n      }\n\n      if (e.key === 'ArrowRight') {\n        e.preventDefault()\n        if (editBufferRef.current) {\n          const numValue = parseInt(editBufferRef.current, 10)\n          if (!isNaN(numValue)) {\n            const clamped = Math.max(min, Math.min(max, numValue))\n            commitValue(clamped.toString().padStart(2, '0'))\n          }\n        }\n        onRightFocus?.()\n        return\n      }\n\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault()\n        if (editBufferRef.current) {\n          const numValue = parseInt(editBufferRef.current, 10)\n          if (!isNaN(numValue)) {\n            const clamped = Math.max(min, Math.min(max, numValue))\n            commitValue(clamped.toString().padStart(2, '0'))\n          }\n        }\n        onLeftFocus?.()\n        return\n      }\n\n      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        const step = e.key === 'ArrowUp' ? 1 : -1\n        const newValue = getArrowByType(step, picker, internalValue)\n        const newDate = new Date(effectiveDate)\n        setDate(setDateByType(newDate, picker, newValue, period))\n        return\n      }\n\n      if (e.key === 'Home' || e.key === 'End') {\n        e.preventDefault()\n        editBufferRef.current = ''\n        isEditingRef.current = false\n        const newValue = (e.key === 'Home' ? min : max).toString().padStart(2, '0')\n        const newDate = new Date(effectiveDate)\n        setDate(setDateByType(newDate, picker, newValue, period))\n        return\n      }\n\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        if (newBuffer.length >= 2) {\n          const clamped = Math.max(min, Math.min(max, numValue))\n          commitValue(clamped.toString().padStart(2, '0'))\n          onRightFocus?.()\n        } else if (numValue * 10 > max) {\n          const clamped = Math.max(min, Math.min(max, numValue))\n          commitValue(clamped.toString().padStart(2, '0'))\n          onRightFocus?.()\n        } else {\n          editBufferRef.current = newBuffer\n          isEditingRef.current = true\n          if (internalRef.current) {\n            internalRef.current.value = formatTimeNumber(numValue, resolvedLocale)\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 (internalRef.current) {\n            internalRef.current.value = newBuffer ? formatTimeNumber(parseInt(newBuffer, 10), resolvedLocale) : displayValue\n          }\n        } else {\n          editBufferRef.current = ''\n          commitValue(min.toString().padStart(2, '0'))\n          if (internalRef.current) {\n            internalRef.current.value = formatTimeNumber(min, resolvedLocale)\n          }\n        }\n      }\n    },\n    [internalValue, effectiveDate, min, max, onLeftFocus, onRightFocus, period, picker, setDate, commitValue, displayValue, resolvedLocale],\n  )\n\n  const handleFocus = useCallback(() => {\n    if (!isEditingRef.current) {\n      editBufferRef.current = ''\n    }\n  }, [])\n\n  const handleBlur = useCallback(() => {\n    if (editBufferRef.current) {\n      const numValue = parseInt(editBufferRef.current, 10)\n      if (!isNaN(numValue)) {\n        const clamped = Math.max(min, Math.min(max, numValue))\n        commitValue(clamped.toString().padStart(2, '0'))\n      } else {\n        editBufferRef.current = ''\n        isEditingRef.current = false\n      }\n    }\n  }, [min, max, commitValue])\n\n  return (\n    <Input\n      className={cn('text-center tabular-nums', className)}\n      data-slot='datetime-input'\n      data-testid={`spectral-datetime-input-${picker}`}\n      defaultValue={displayValue}\n      disabled={disabled}\n      id={id ?? picker}\n      inputMode='numeric'\n      name={name ?? picker}\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onKeyDown={(e) => {\n        onKeyDown?.(e)\n        handleKeyDown(e)\n      }}\n      readOnly\n      ref={inputRef}\n      role='spinbutton'\n      {...ariaProps}\n      {...props}\n    />\n  )\n}\n\nDateTimeInput.displayName = 'DateTimeInput'\n"],"mappings":"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"}