@spear-ai/spectral 1.21.0 → 1.21.1

package/dist/Checkbox.js

@@ -3,7 +3,7 @@ import { CheckmarkIcon } from "./Icons/CheckmarkIcon.js";
 import { MinusIcon } from "./Icons/MinusIcon.js";
 import { cn } from "./utils/twUtils.js";
 import { ErrorMessage, WarningMessage } from "./FormFieldMessage.js";
-import { useFormFieldId } from "./utils/formFieldUtils.js";
+import { getErrorMessageId, getWarningMessageId, useFormFieldId } from "./utils/formFieldUtils.js";
 import { CheckboxBase, CheckboxIndicator } from "./Checkbox/CheckboxBase.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,8 +12,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const Checkbox = ({ checked, className, errorMessage, id, label, labelText, messageReserveLines = 1, messageReserveSpace = false, onCheckedChange, ref, required, state = "default", warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, ...props }) => {
 	const inputId = useFormFieldId(id, props.name);
 	const resolvedLabel = label ?? labelText;
-	const errorMessageId = `${inputId}-error`;
-	const warningMessageId = `${inputId}-warning`;
+	const errorMessageId = getErrorMessageId(inputId);
+	const warningMessageId = getWarningMessageId(inputId);
 	return /* @__PURE__ */ jsxs("div", { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "gap-2 flex items-start shrink-0",

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckmarkIcon, MinusIcon } from '@components/Icons'\nimport { ErrorMessage, WarningMessage, useFormFieldId, type BaseFormFieldProps, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type ComponentRef, type Ref } from 'react'\nimport { CheckboxBase, CheckboxIndicator } from './CheckboxBase'\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxBase>, 'onCheckedChange'> {\n  'aria-describedby'?: string\n  'aria-label'?: string\n  checked?: boolean | 'indeterminate'\n  disabled?: boolean\n  errorMessage?: BaseFormFieldProps['errorMessage']\n  id?: string\n  label?: string\n  /* Deprecated - use label instead */\n  labelText?: string\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  name?: string\n  onCheckedChange: (value: boolean | 'indeterminate') => void\n  required?: boolean\n  state?: FormFieldState\n  value?: string\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nexport const Checkbox = ({\n  checked,\n  className,\n  errorMessage,\n  id,\n  label,\n  labelText,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  onCheckedChange,\n  ref,\n  required,\n  state = 'default',\n  warningMessage,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n  ...props\n}: CheckboxProps & {\n  ref?: Ref<ComponentRef<typeof CheckboxBase>>\n}) => {\n  const inputId = useFormFieldId(id, props.name)\n  const resolvedLabel = label ?? labelText\n  const errorMessageId = `${inputId}-error`\n  const warningMessageId = `${inputId}-warning`\n  const messageId = state === 'error' && errorMessage && errorMessageId ? errorMessageId : state === 'warning' && warningMessage && warningMessageId ? warningMessageId : undefined\n\n  return (\n    <div>\n      <div className='gap-2 flex items-start shrink-0'>\n        <CheckboxBase\n          aria-describedby={[messageId, ariaDescribedBy].filter(Boolean).join(' ') || undefined}\n          aria-invalid={state === 'error' ? true : undefined}\n          aria-label={ariaLabel ?? (!resolvedLabel ? 'Checkbox' : undefined)}\n          aria-required={required ?? undefined}\n          checked={checked}\n          className={cn(\n            'checkbox peer size-5 mt-0.5 border-checkbox-border hover:opacity-80 focus-visible:outline-1 focus-visible:outline-checkbox-border--focus data-[state=checked]:border-checkbox-border--checked',\n            className,\n          )}\n          data-field-state={state}\n          data-testid='spectral-checkbox'\n          id={inputId}\n          onCheckedChange={onCheckedChange}\n          ref={ref}\n          {...props}\n        >\n          <CheckboxIndicator data-testid='spectral-checkbox-indicator' className={cn('checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked')}>\n            {checked === 'indeterminate' ? <MinusIcon className='checkbox-indeterminate' size={16} strokeWidth={4} /> : <CheckmarkIcon className='checkbox-check' size={16} strokeWidth={4} />}\n          </CheckboxIndicator>\n        </CheckboxBase>\n        {resolvedLabel && (\n          <label className='text-md peer-disabled:text-neutral-400 text-text-primary' data-testid='spectral-checkbox-label' htmlFor={inputId}>\n            {resolvedLabel}\n          </label>\n        )}\n      </div>\n      <ErrorMessage\n        dataTestId='spectral-checkbox-error-message'\n        id={errorMessageId}\n        message={state === 'error' ? errorMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-checkbox-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? warningMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;;;;;AA0BA,MAAa,YAAY,EACvB,SACA,WACA,cACA,IACA,OACA,WACA,sBAAsB,GACtB,sBAAsB,OACtB,iBACA,KACA,UACA,QAAQ,WACR,gBACA,oBAAoB,iBACpB,cAAc,WACd,GAAG,YAGC;CACJ,MAAM,UAAU,eAAe,IAAI,MAAM,KAAI;CAC7C,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiB,GAAG,QAAQ;CAClC,MAAM,mBAAmB,GAAG,QAAQ;AAGpC,QACE,qBAAC,OAAD;EACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,cAAD;IACE,oBAAkB,CANR,UAAU,WAAW,gBAAgB,iBAAiB,iBAAiB,UAAU,aAAa,kBAAkB,mBAAmB,mBAAmB,QAMlI,gBAAgB,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI;IAC5E,gBAAc,UAAU,UAAU,OAAO;IACzC,cAAY,cAAc,CAAC,gBAAgB,aAAa;IACxD,iBAAe,YAAY;IAClB;IACT,WAAW,GACT,iMACA,UACD;IACD,oBAAkB;IAElB,IAAI;IACa;IACZ;IACL,GAAI;cAEJ,oBAAC,mBAAD;KAA6D,WAAW,GAAG,uFAAuF;eAC/J,YAAY,kBAAkB,oBAAC,WAAD;MAAW,WAAU;MAAyB,MAAM;MAAI,aAAa;MAAK,IAAG,oBAAC,eAAD;MAAe,WAAU;MAAiB,MAAM;MAAI,aAAa;MAAK;KACjK;IACP,GACb,iBACC,oBAAC,SAAD;IAAO,WAAU;IAAiG,SAAS;cACxH;IACI,EAEN;;EACL,oBAAC,cAAD;GACE,YAAW;GACX,IAAI;GACJ,SAAS,UAAU,UAAU,eAAe;GACvB;GACrB,qBAAqB,uBAAuB,UAAU;GACvD;EACD,oBAAC,gBAAD;GACE,YAAW;GACX,IAAI;GACJ,SAAS,UAAU,YAAY,iBAAiB;GAC3B;GACrB,qBAAqB,uBAAuB,UAAU;GACvD;EACE;;AAIT,SAAS,cAAc"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckmarkIcon, MinusIcon } from '@components/Icons'\nimport { ErrorMessage, getErrorMessageId, getWarningMessageId, useFormFieldId, WarningMessage, type BaseFormFieldProps, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { type ComponentPropsWithoutRef, type ComponentRef, type Ref } from 'react'\nimport { CheckboxBase, CheckboxIndicator } from './CheckboxBase'\n\nexport interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxBase>, 'onCheckedChange'> {\n  'aria-describedby'?: string\n  'aria-label'?: string\n  checked?: boolean | 'indeterminate'\n  disabled?: boolean\n  errorMessage?: BaseFormFieldProps['errorMessage']\n  id?: string\n  label?: string\n  /* Deprecated - use label instead */\n  labelText?: string\n  messageReserveLines?: number\n  messageReserveSpace?: boolean\n  name?: string\n  onCheckedChange: (value: boolean | 'indeterminate') => void\n  required?: boolean\n  state?: FormFieldState\n  value?: string\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nexport const Checkbox = ({\n  checked,\n  className,\n  errorMessage,\n  id,\n  label,\n  labelText,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  onCheckedChange,\n  ref,\n  required,\n  state = 'default',\n  warningMessage,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n  ...props\n}: CheckboxProps & {\n  ref?: Ref<ComponentRef<typeof CheckboxBase>>\n}) => {\n  const inputId = useFormFieldId(id, props.name)\n  const resolvedLabel = label ?? labelText\n  const errorMessageId = getErrorMessageId(inputId)\n  const warningMessageId = getWarningMessageId(inputId)\n  const messageId = state === 'error' && errorMessage && errorMessageId ? errorMessageId : state === 'warning' && warningMessage && warningMessageId ? warningMessageId : undefined\n\n  return (\n    <div>\n      <div className='gap-2 flex items-start shrink-0'>\n        <CheckboxBase\n          aria-describedby={[messageId, ariaDescribedBy].filter(Boolean).join(' ') || undefined}\n          aria-invalid={state === 'error' ? true : undefined}\n          aria-label={ariaLabel ?? (!resolvedLabel ? 'Checkbox' : undefined)}\n          aria-required={required ?? undefined}\n          checked={checked}\n          className={cn(\n            'checkbox peer size-5 mt-0.5 border-checkbox-border hover:opacity-80 focus-visible:outline-1 focus-visible:outline-checkbox-border--focus data-[state=checked]:border-checkbox-border--checked',\n            className,\n          )}\n          data-field-state={state}\n          data-testid='spectral-checkbox'\n          id={inputId}\n          onCheckedChange={onCheckedChange}\n          ref={ref}\n          {...props}\n        >\n          <CheckboxIndicator data-testid='spectral-checkbox-indicator' className={cn('checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked')}>\n            {checked === 'indeterminate' ? <MinusIcon className='checkbox-indeterminate' size={16} strokeWidth={4} /> : <CheckmarkIcon className='checkbox-check' size={16} strokeWidth={4} />}\n          </CheckboxIndicator>\n        </CheckboxBase>\n        {resolvedLabel && (\n          <label className='text-md peer-disabled:text-neutral-400 text-text-primary' data-testid='spectral-checkbox-label' htmlFor={inputId}>\n            {resolvedLabel}\n          </label>\n        )}\n      </div>\n      <ErrorMessage\n        dataTestId='spectral-checkbox-error-message'\n        id={errorMessageId}\n        message={state === 'error' ? errorMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-checkbox-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? warningMessage : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;;;;;AA0BA,MAAa,YAAY,EACvB,SACA,WACA,cACA,IACA,OACA,WACA,sBAAsB,GACtB,sBAAsB,OACtB,iBACA,KACA,UACA,QAAQ,WACR,gBACA,oBAAoB,iBACpB,cAAc,WACd,GAAG,YAGC;CACJ,MAAM,UAAU,eAAe,IAAI,MAAM,KAAI;CAC7C,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiB,kBAAkB,QAAO;CAChD,MAAM,mBAAmB,oBAAoB,QAAO;AAGpD,QACE,qBAAC,OAAD;EACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,cAAD;IACE,oBAAkB,CANR,UAAU,WAAW,gBAAgB,iBAAiB,iBAAiB,UAAU,aAAa,kBAAkB,mBAAmB,mBAAmB,QAMlI,gBAAgB,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI;IAC5E,gBAAc,UAAU,UAAU,OAAO;IACzC,cAAY,cAAc,CAAC,gBAAgB,aAAa;IACxD,iBAAe,YAAY;IAClB;IACT,WAAW,GACT,iMACA,UACD;IACD,oBAAkB;IAElB,IAAI;IACa;IACZ;IACL,GAAI;cAEJ,oBAAC,mBAAD;KAA6D,WAAW,GAAG,uFAAuF;eAC/J,YAAY,kBAAkB,oBAAC,WAAD;MAAW,WAAU;MAAyB,MAAM;MAAI,aAAa;MAAK,IAAG,oBAAC,eAAD;MAAe,WAAU;MAAiB,MAAM;MAAI,aAAa;MAAK;KACjK;IACP,GACb,iBACC,oBAAC,SAAD;IAAO,WAAU;IAAiG,SAAS;cACxH;IACI,EAEN;;EACL,oBAAC,cAAD;GACE,YAAW;GACX,IAAI;GACJ,SAAS,UAAU,UAAU,eAAe;GACvB;GACrB,qBAAqB,uBAAuB,UAAU;GACvD;EACD,oBAAC,gBAAD;GACE,YAAW;GACX,IAAI;GACJ,SAAS,UAAU,YAAY,iBAAiB;GAC3B;GACrB,qBAAqB,uBAAuB,UAAU;GACvD;EACE;;AAIT,SAAS,cAAc"}

package/dist/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","names":[],"sources":["../src/components/Combobox/Combobox.tsx"],"mappings":";;;;;;KA0BY,cAAA,GAAiB,UAAA;AAAA,UAEZ,aAAA,SAAsB,IAAA,CAAK,kBAAA;EAC1C,SAAA;EACA,YAAA;EACA,aAAA,GAAgB,aAAA;EAChB,YAAA;EACA,cAAA;EACA,cAAA;EACA,QAAA,IAAY,KAAA;EAPiB;EAS7B,aAAA,IAAiB,KAAA;EACjB,OAAA,EAAS,cAAA;EACT,WAAA;EACA,KAAA,GAAQ,OAAA,CAAQ,cAAA;EAChB,KAAA;EACA,cAAA,GAAiB,kBAAA;AAAA;AAAA;EAIjB,SAAA;EACA,QAAA;EACA,YAAA;EACA,aAAA;EACA,YAAA;EACA,YAAA;EACA,EAAA;EACA,KAAA;EACA,cAAA;EACA,cAAA;EACA,mBAAA;EACA,mBAAA;EACA,IAAA;EACA,QAAA;EACA,aAAA;EACA,OAAA;EACA,WAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,KAAA,EAAO,SAAA;EACP,cAAA;EAAA,oBACoB,eAAA;EAAA,cACN;AAAA,GACb,aAAA;EAAkB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"Combobox.d.ts","names":[],"sources":["../src/components/Combobox/Combobox.tsx"],"mappings":";;;;;;KA2BY,cAAA,GAAiB,UAAA;AAAA,UAEZ,aAAA,SAAsB,IAAA,CAAK,kBAAA;EAC1C,SAAA;EACA,YAAA;EACA,aAAA,GAAgB,aAAA;EAChB,YAAA;EACA,cAAA;EACA,cAAA;EACA,QAAA,IAAY,KAAA;EAPiB;EAS7B,aAAA,IAAiB,KAAA;EACjB,OAAA,EAAS,cAAA;EACT,WAAA;EACA,KAAA,GAAQ,OAAA,CAAQ,cAAA;EAChB,KAAA;EACA,cAAA,GAAiB,kBAAA;AAAA;AAAA;EAIjB,SAAA;EACA,QAAA;EACA,YAAA;EACA,aAAA;EACA,YAAA;EACA,YAAA;EACA,EAAA;EACA,KAAA;EACA,cAAA;EACA,cAAA;EACA,mBAAA;EACA,mBAAA;EACA,IAAA;EACA,QAAA;EACA,aAAA;EACA,OAAA;EACA,WAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,KAAA,EAAO,SAAA;EACP,cAAA;EAAA,oBACoB,eAAA;EAAA,cACN;AAAA,GACb,aAAA;EAAkB,GAAA,GAAM,GAAA,CAAI,cAAA;AAAA,IAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/Combobox.js

@@ -4,7 +4,7 @@ import { ChevronDownIcon } from "./Icons/ChevronDownIcon.js";
 import { LoaderIcon } from "./Icons/LoaderIcon.js";
 import { cn } from "./utils/twUtils.js";
 import { ErrorMessage, WarningMessage } from "./FormFieldMessage.js";
-import { EmptyState, LoadingState, getAriaProps, getDropdownSurfaceClasses, getDropdownWidthStyles, getErrorMessageId, getFormFieldCSSProperties, getOptionClasses, getTriggerClasses, useFormFieldId } from "./utils/formFieldUtils.js";
+import { EmptyState, LoadingState, getAriaProps, getDropdownSurfaceClasses, getDropdownWidthStyles, getErrorMessageId, getFormFieldCSSProperties, getOptionClasses, getTriggerClasses, getWarningMessageId, useFormFieldId } from "./utils/formFieldUtils.js";
 import { useUncontrolledState } from "./hooks/useUncontrolledState.js";
 import { Label } from "./Label.js";
 import { InputGroup, InputGroupAddon } from "./primitives/input-group.js";
@@ -18,7 +18,7 @@ const Combobox = ({ className, disabled, defaultValue = "", dropdownWidth = "tri
 	const comboboxId = useFormFieldId(id, name);
 	const listboxId = `${comboboxId}-listbox`;
 	const errorMessageId = getErrorMessageId(comboboxId);
-	const warningMessageId = `${comboboxId}-warning`;
+	const warningMessageId = getWarningMessageId(comboboxId);
 	const messageId = state === "error" ? errorMessageId : state === "warning" && warningMessage ? warningMessageId : void 0;
 	const isDisabled = Boolean(disabled);
 	const isLoading = state === "loading";

package/dist/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","names":[],"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxPrimitive } from '@base-ui/react'\nimport { CheckmarkIcon, ChevronDownIcon, LoaderIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { InputGroup, InputGroupAddon } from '@primitives/input-group'\nimport {\n  EmptyState,\n  ErrorMessage,\n  getAriaProps,\n  getDropdownWidthStyles,\n  getDropdownSurfaceClasses,\n  getErrorMessageId,\n  getFormFieldCSSProperties,\n  getOptionClasses,\n  getTriggerClasses,\n  LoadingState,\n  WarningMessage,\n  useFormFieldId,\n  type BaseFormFieldProps,\n  type BaseOption,\n  type DropdownWidth,\n  type FormFieldState,\n} from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useMemo, useRef, useState, type CSSProperties, type MouseEvent, type Ref } from 'react'\n\nexport type ComboboxOption = BaseOption\n\nexport interface ComboboxProps extends Omit<BaseFormFieldProps, 'onChange' | 'state'> {\n  className?: string\n  defaultValue?: string\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: string\n  labelClassName?: string\n  loadingMessage?: string\n  onChange?: (value: string) => void\n  /** @deprecated Use `onChange` instead. `onValueChange` will be removed in a future release. */\n  onValueChange?: (value: string) => void\n  options: ComboboxOption[]\n  placeholder?: string\n  state?: Exclude<FormFieldState, 'disabled'>\n  value?: string\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nexport const Combobox = ({\n  className,\n  disabled,\n  defaultValue = '',\n  dropdownWidth = 'trigger',\n  emptyMessage = 'No options found.',\n  errorMessage,\n  id,\n  label,\n  labelClassName,\n  loadingMessage = 'Loading…',\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  name,\n  onChange,\n  onValueChange,\n  options,\n  placeholder = 'Search…',\n  ref,\n  required,\n  state = 'default',\n  value: valueProp,\n  warningMessage,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n}: ComboboxProps & { ref?: Ref<HTMLDivElement> }) => {\n  if (process.env.NODE_ENV !== 'production' && !label && !ariaLabel) {\n    console.warn('Combobox: provide either `label` or `aria-label` for an accessible name.')\n  }\n\n  const comboboxId = useFormFieldId(id, name)\n  const listboxId = `${comboboxId}-listbox`\n  const errorMessageId = getErrorMessageId(comboboxId)\n  const warningMessageId = `${comboboxId}-warning`\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const isDisabled = Boolean(disabled)\n  const isLoading = state === 'loading'\n  const isInvalid = state === 'error'\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n\n  const [open, setOpen] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue,\n    onChange: (nextValue) => {\n      if (onChange) {\n        onChange(nextValue)\n      } else {\n        onValueChange?.(nextValue)\n      }\n    },\n  })\n\n  const selectedOption = useMemo(() => options.find((o) => o.value === value) ?? null, [options, value])\n  const filteredOptions = useMemo(() => {\n    const query = inputValue.trim().toLowerCase()\n    if (!query) return options\n    return options.filter((option) => option.label.toLowerCase().includes(query))\n  }, [inputValue, options])\n  const showsSelectedValueAsPlaceholder = Boolean(selectedOption && inputValue.length === 0)\n  const { dropdownWidthMode, dropdownWidthStyle } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: 'var(--anchor-width)',\n  })\n\n  const handleValueChange = (nextOption: ComboboxOption | null, eventDetails: { reason?: string }) => {\n    const nextValue = nextOption?.value ?? ''\n    const shouldClearSelection = eventDetails.reason === 'item-press' && nextValue === value\n    setValue(shouldClearSelection ? '' : nextValue)\n    setInputValue('')\n    setOpen(false)\n  }\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (isDisabled || isLoading) {\n      setOpen(false)\n      return\n    }\n\n    if (!nextOpen) {\n      setInputValue('')\n    }\n\n    setOpen(nextOpen)\n  }\n\n  const handleTriggerContainerClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (isDisabled || isLoading) return\n\n    const target = event.target as HTMLElement\n    if (target === inputRef.current) return\n    if (target.closest('[data-slot=combobox-trigger-button]')) return\n    inputRef.current?.focus()\n    setOpen(true)\n  }\n\n  return (\n    <div className='w-full' ref={ref}>\n      {label && (\n        <Label className={cn('mb-2 block text-text-primary', labelClassName, isDisabled && 'text-text-secondary')} data-testid='spectral-combobox-label' htmlFor={comboboxId}>\n          {label}\n        </Label>\n      )}\n\n      <ComboboxPrimitive.Root\n        autoHighlight\n        disabled={isDisabled || isLoading}\n        filter={null}\n        inputValue={inputValue}\n        itemToStringLabel={(option: ComboboxOption) => option.label}\n        itemToStringValue={(option: ComboboxOption) => option.value}\n        openOnInputClick\n        onInputValueChange={(nextInputValue, eventDetails) => {\n          if (eventDetails.reason !== 'input-change' && eventDetails.reason !== 'input-clear') return\n          setInputValue(nextInputValue)\n        }}\n        name={name}\n        onOpenChange={handleOpenChange}\n        onValueChange={handleValueChange}\n        open={open}\n        required={required}\n        value={selectedOption}\n      >\n        <ComboboxPrimitive.InputGroup\n          render={\n            <InputGroup\n              data-slot='combobox-content'\n              data-state={state}\n              data-testid='spectral-combobox-trigger'\n              className={cn(getTriggerClasses(open, state), 'ring-0! outline-none focus-within:outline-none has-[[data-slot=input-group-control]:focus-visible]:outline-0', isDisabled && 'pointer-events-none cursor-not-allowed', className)}\n              onClick={handleTriggerContainerClick}\n              style={getFormFieldCSSProperties() as CSSProperties}\n            />\n          }\n        >\n          <ComboboxPrimitive.Input\n            aria-controls={listboxId}\n            aria-expanded={open}\n            aria-label={ariaLabel ?? label}\n            autoComplete='off'\n            className={cn(\n              'min-w-0 text-base flex-1 truncate overflow-hidden border-0 bg-transparent whitespace-nowrap text-input-text outline-hidden outline-0 placeholder:opacity-100 focus-visible:ring-0 focus-visible:outline-none',\n              showsSelectedValueAsPlaceholder ? 'placeholder:text-input-text!' : 'placeholder:text-input-text-placeholder!',\n            )}\n            data-slot='input-group-control'\n            id={comboboxId}\n            ref={inputRef}\n            placeholder={selectedOption?.label ?? placeholder}\n            {...ariaProps}\n          />\n          <InputGroupAddon align='inline-end' className='cursor-pointer'>\n            <ComboboxPrimitive.Trigger\n              aria-label='Toggle options'\n              className='cursor-pointer'\n              data-slot='combobox-trigger-button'\n            >\n              {isLoading ? <LoaderIcon className='size-5 motion-safe:animate-spin' /> : <ChevronDownIcon className={cn('size-5 shrink-0 transition-transform duration-200', open && 'rotate-180')} />}\n            </ComboboxPrimitive.Trigger>\n          </InputGroupAddon>\n        </ComboboxPrimitive.InputGroup>\n\n        <ComboboxPrimitive.Portal>\n          <ComboboxPrimitive.Positioner align='start' className='isolate z-50' sideOffset={4}>\n            <ComboboxPrimitive.Popup\n              className={cn(\n                'p-1 z-50 motion-safe:data-closed:animate-out motion-safe:data-open:animate-in',\n                getDropdownSurfaceClasses(),\n                'motion-safe:data-closed:fade-out-0 motion-safe:data-closed:zoom-out-95 motion-safe:data-open:fade-in-0 motion-safe:data-open:zoom-in-95',\n                'max-h-[min(var(--available-height),18rem)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2',\n                // Keep a single scroll container (the list) to avoid dual scrollbar styles.\n                'min-w-32 origin-(--transform-origin) overflow-hidden',\n              )}\n              data-dropdown-width-mode={dropdownWidthMode}\n              data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n              data-testid='spectral-combobox-content'\n              style={dropdownWidthStyle}\n            >\n              {isLoading ? (\n                <LoadingState message={loadingMessage} />\n              ) : filteredOptions.length === 0 ? (\n                <EmptyState message={emptyMessage} />\n              ) : (\n                <ComboboxPrimitive.List className='max-h-[min(var(--available-height),18rem)] overflow-y-auto' id={listboxId}>\n                  {filteredOptions.map((option) => (\n                    <ComboboxPrimitive.Item\n                      className={cn(getOptionClasses(!!option.disabled, false, value === option.value), 'group/command-item relative flex w-full items-center data-highlighted:bg-input-bg--hover')}\n                      data-testid='spectral-combobox-item'\n                      disabled={option.disabled}\n                      key={option.value}\n                      value={option}\n                    >\n                      <span className='min-w-0 flex-1 truncate whitespace-nowrap'>{option.label}</span>\n                      <ComboboxPrimitive.ItemIndicator\n                        render={\n                          <span className='right-2 h-4 w-4 absolute flex items-center justify-center'>\n                            <CheckmarkIcon size={16} />\n                          </span>\n                        }\n                      />\n                    </ComboboxPrimitive.Item>\n                  ))}\n                </ComboboxPrimitive.List>\n              )}\n            </ComboboxPrimitive.Popup>\n          </ComboboxPrimitive.Positioner>\n        </ComboboxPrimitive.Portal>\n      </ComboboxPrimitive.Root>\n\n      <ErrorMessage\n        dataTestId='spectral-combobox-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-combobox-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? (warningMessage ?? null) : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nCombobox.displayName = 'Combobox'\n"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","names":[],"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxPrimitive } from '@base-ui/react'\nimport { CheckmarkIcon, ChevronDownIcon, LoaderIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { InputGroup, InputGroupAddon } from '@primitives/input-group'\nimport {\n  EmptyState,\n  ErrorMessage,\n  getAriaProps,\n  getDropdownWidthStyles,\n  getDropdownSurfaceClasses,\n  getErrorMessageId,\n  getFormFieldCSSProperties,\n  getOptionClasses,\n  getTriggerClasses,\n  getWarningMessageId,\n  LoadingState,\n  WarningMessage,\n  useFormFieldId,\n  type BaseFormFieldProps,\n  type BaseOption,\n  type DropdownWidth,\n  type FormFieldState,\n} from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useMemo, useRef, useState, type CSSProperties, type MouseEvent, type Ref } from 'react'\n\nexport type ComboboxOption = BaseOption\n\nexport interface ComboboxProps extends Omit<BaseFormFieldProps, 'onChange' | 'state'> {\n  className?: string\n  defaultValue?: string\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: string\n  labelClassName?: string\n  loadingMessage?: string\n  onChange?: (value: string) => void\n  /** @deprecated Use `onChange` instead. `onValueChange` will be removed in a future release. */\n  onValueChange?: (value: string) => void\n  options: ComboboxOption[]\n  placeholder?: string\n  state?: Exclude<FormFieldState, 'disabled'>\n  value?: string\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nexport const Combobox = ({\n  className,\n  disabled,\n  defaultValue = '',\n  dropdownWidth = 'trigger',\n  emptyMessage = 'No options found.',\n  errorMessage,\n  id,\n  label,\n  labelClassName,\n  loadingMessage = 'Loading…',\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  name,\n  onChange,\n  onValueChange,\n  options,\n  placeholder = 'Search…',\n  ref,\n  required,\n  state = 'default',\n  value: valueProp,\n  warningMessage,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n}: ComboboxProps & { ref?: Ref<HTMLDivElement> }) => {\n  if (process.env.NODE_ENV !== 'production' && !label && !ariaLabel) {\n    console.warn('Combobox: provide either `label` or `aria-label` for an accessible name.')\n  }\n\n  const comboboxId = useFormFieldId(id, name)\n  const listboxId = `${comboboxId}-listbox`\n  const errorMessageId = getErrorMessageId(comboboxId)\n  const warningMessageId = getWarningMessageId(comboboxId)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const isDisabled = Boolean(disabled)\n  const isLoading = state === 'loading'\n  const isInvalid = state === 'error'\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n\n  const [open, setOpen] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue,\n    onChange: (nextValue) => {\n      if (onChange) {\n        onChange(nextValue)\n      } else {\n        onValueChange?.(nextValue)\n      }\n    },\n  })\n\n  const selectedOption = useMemo(() => options.find((o) => o.value === value) ?? null, [options, value])\n  const filteredOptions = useMemo(() => {\n    const query = inputValue.trim().toLowerCase()\n    if (!query) return options\n    return options.filter((option) => option.label.toLowerCase().includes(query))\n  }, [inputValue, options])\n  const showsSelectedValueAsPlaceholder = Boolean(selectedOption && inputValue.length === 0)\n  const { dropdownWidthMode, dropdownWidthStyle } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: 'var(--anchor-width)',\n  })\n\n  const handleValueChange = (nextOption: ComboboxOption | null, eventDetails: { reason?: string }) => {\n    const nextValue = nextOption?.value ?? ''\n    const shouldClearSelection = eventDetails.reason === 'item-press' && nextValue === value\n    setValue(shouldClearSelection ? '' : nextValue)\n    setInputValue('')\n    setOpen(false)\n  }\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (isDisabled || isLoading) {\n      setOpen(false)\n      return\n    }\n\n    if (!nextOpen) {\n      setInputValue('')\n    }\n\n    setOpen(nextOpen)\n  }\n\n  const handleTriggerContainerClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (isDisabled || isLoading) return\n\n    const target = event.target as HTMLElement\n    if (target === inputRef.current) return\n    if (target.closest('[data-slot=combobox-trigger-button]')) return\n    inputRef.current?.focus()\n    setOpen(true)\n  }\n\n  return (\n    <div className='w-full' ref={ref}>\n      {label && (\n        <Label className={cn('mb-2 block text-text-primary', labelClassName, isDisabled && 'text-text-secondary')} data-testid='spectral-combobox-label' htmlFor={comboboxId}>\n          {label}\n        </Label>\n      )}\n\n      <ComboboxPrimitive.Root\n        autoHighlight\n        disabled={isDisabled || isLoading}\n        filter={null}\n        inputValue={inputValue}\n        itemToStringLabel={(option: ComboboxOption) => option.label}\n        itemToStringValue={(option: ComboboxOption) => option.value}\n        openOnInputClick\n        onInputValueChange={(nextInputValue, eventDetails) => {\n          if (eventDetails.reason !== 'input-change' && eventDetails.reason !== 'input-clear') return\n          setInputValue(nextInputValue)\n        }}\n        name={name}\n        onOpenChange={handleOpenChange}\n        onValueChange={handleValueChange}\n        open={open}\n        required={required}\n        value={selectedOption}\n      >\n        <ComboboxPrimitive.InputGroup\n          render={\n            <InputGroup\n              data-slot='combobox-content'\n              data-state={state}\n              data-testid='spectral-combobox-trigger'\n              className={cn(getTriggerClasses(open, state), 'ring-0! outline-none focus-within:outline-none has-[[data-slot=input-group-control]:focus-visible]:outline-0', isDisabled && 'pointer-events-none cursor-not-allowed', className)}\n              onClick={handleTriggerContainerClick}\n              style={getFormFieldCSSProperties() as CSSProperties}\n            />\n          }\n        >\n          <ComboboxPrimitive.Input\n            aria-controls={listboxId}\n            aria-expanded={open}\n            aria-label={ariaLabel ?? label}\n            autoComplete='off'\n            className={cn(\n              'min-w-0 text-base flex-1 truncate overflow-hidden border-0 bg-transparent whitespace-nowrap text-input-text outline-hidden outline-0 placeholder:opacity-100 focus-visible:ring-0 focus-visible:outline-none',\n              showsSelectedValueAsPlaceholder ? 'placeholder:text-input-text!' : 'placeholder:text-input-text-placeholder!',\n            )}\n            data-slot='input-group-control'\n            id={comboboxId}\n            ref={inputRef}\n            placeholder={selectedOption?.label ?? placeholder}\n            {...ariaProps}\n          />\n          <InputGroupAddon align='inline-end' className='cursor-pointer'>\n            <ComboboxPrimitive.Trigger\n              aria-label='Toggle options'\n              className='cursor-pointer'\n              data-slot='combobox-trigger-button'\n            >\n              {isLoading ? <LoaderIcon className='size-5 motion-safe:animate-spin' /> : <ChevronDownIcon className={cn('size-5 shrink-0 transition-transform duration-200', open && 'rotate-180')} />}\n            </ComboboxPrimitive.Trigger>\n          </InputGroupAddon>\n        </ComboboxPrimitive.InputGroup>\n\n        <ComboboxPrimitive.Portal>\n          <ComboboxPrimitive.Positioner align='start' className='isolate z-50' sideOffset={4}>\n            <ComboboxPrimitive.Popup\n              className={cn(\n                'p-1 z-50 motion-safe:data-closed:animate-out motion-safe:data-open:animate-in',\n                getDropdownSurfaceClasses(),\n                'motion-safe:data-closed:fade-out-0 motion-safe:data-closed:zoom-out-95 motion-safe:data-open:fade-in-0 motion-safe:data-open:zoom-in-95',\n                'max-h-[min(var(--available-height),18rem)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2',\n                // Keep a single scroll container (the list) to avoid dual scrollbar styles.\n                'min-w-32 origin-(--transform-origin) overflow-hidden',\n              )}\n              data-dropdown-width-mode={dropdownWidthMode}\n              data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n              data-testid='spectral-combobox-content'\n              style={dropdownWidthStyle}\n            >\n              {isLoading ? (\n                <LoadingState message={loadingMessage} />\n              ) : filteredOptions.length === 0 ? (\n                <EmptyState message={emptyMessage} />\n              ) : (\n                <ComboboxPrimitive.List className='max-h-[min(var(--available-height),18rem)] overflow-y-auto' id={listboxId}>\n                  {filteredOptions.map((option) => (\n                    <ComboboxPrimitive.Item\n                      className={cn(getOptionClasses(!!option.disabled, false, value === option.value), 'group/command-item relative flex w-full items-center data-highlighted:bg-input-bg--hover')}\n                      data-testid='spectral-combobox-item'\n                      disabled={option.disabled}\n                      key={option.value}\n                      value={option}\n                    >\n                      <span className='min-w-0 flex-1 truncate whitespace-nowrap'>{option.label}</span>\n                      <ComboboxPrimitive.ItemIndicator\n                        render={\n                          <span className='right-2 h-4 w-4 absolute flex items-center justify-center'>\n                            <CheckmarkIcon size={16} />\n                          </span>\n                        }\n                      />\n                    </ComboboxPrimitive.Item>\n                  ))}\n                </ComboboxPrimitive.List>\n              )}\n            </ComboboxPrimitive.Popup>\n          </ComboboxPrimitive.Positioner>\n        </ComboboxPrimitive.Portal>\n      </ComboboxPrimitive.Root>\n\n      <ErrorMessage\n        dataTestId='spectral-combobox-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-combobox-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? (warningMessage ?? null) : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nCombobox.displayName = 'Combobox'\n"],"mappings":";;;;;;;;;;;;;;;AA8CA,MAAa,YAAY,EACvB,WACA,UACA,eAAe,IACf,gBAAgB,WAChB,eAAe,qBACf,cACA,IACA,OACA,gBACA,iBAAiB,YACjB,sBAAsB,GACtB,sBAAsB,OACtB,MACA,UACA,eACA,SACA,cAAc,WACd,KACA,UACA,QAAQ,WACR,OAAO,WACP,gBACA,oBAAoB,iBACpB,cAAc,gBACqC;AACnD,KAA6C,CAAC,SAAS,CAAC,UACtD,SAAQ,KAAK,2EAA0E;CAGzF,MAAM,aAAa,eAAe,IAAI,KAAI;CAC1C,MAAM,YAAY,GAAG,WAAW;CAChC,MAAM,iBAAiB,kBAAkB,WAAU;CACnD,MAAM,mBAAmB,oBAAoB,WAAU;CACvD,MAAM,YAAY,UAAU,UAAU,iBAAiB,UAAU,aAAa,iBAAiB,mBAAmB;CAClH,MAAM,aAAa,QAAQ,SAAQ;CACnC,MAAM,YAAY,UAAU;CAC5B,MAAM,YAAY,UAAU;CAC5B,MAAM,YAAY,aAAa,OAAO,iBAAiB,UAAU,UAAS;CAE1E,MAAM,CAAC,MAAM,WAAW,SAAS,MAAK;CACtC,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAE;CAC/C,MAAM,WAAW,OAAyB,KAAI;CAC9C,MAAM,CAAC,OAAO,YAAY,qBAA6B;EACrD,OAAO;EACP;EACA,WAAW,cAAc;AACvB,OAAI,SACF,UAAS,UAAS;OAElB,iBAAgB,UAAS;;EAG9B,CAAA;CAED,MAAM,iBAAiB,cAAc,QAAQ,MAAM,MAAM,EAAE,UAAU,MAAM,IAAI,MAAM,CAAC,SAAS,MAAM,CAAA;CACrG,MAAM,kBAAkB,cAAc;EACpC,MAAM,QAAQ,WAAW,MAAM,CAAC,aAAY;AAC5C,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO,QAAQ,QAAQ,WAAW,OAAO,MAAM,aAAa,CAAC,SAAS,MAAM,CAAA;IAC3E,CAAC,YAAY,QAAQ,CAAA;CACxB,MAAM,kCAAkC,QAAQ,kBAAkB,WAAW,WAAW,EAAC;CACzF,MAAM,EAAE,mBAAmB,uBAAuB,uBAAuB;EACvE;EACA,cAAc;EACf,CAAA;CAED,MAAM,qBAAqB,YAAmC,iBAAsC;EAClG,MAAM,YAAY,YAAY,SAAS;AAEvC,WAD6B,aAAa,WAAW,gBAAgB,cAAc,QACnD,KAAK,UAAS;AAC9C,gBAAc,GAAE;AAChB,UAAQ,MAAK;;CAGf,MAAM,oBAAoB,aAAsB;AAC9C,MAAI,cAAc,WAAW;AAC3B,WAAQ,MAAK;AACb;;AAGF,MAAI,CAAC,SACH,eAAc,GAAE;AAGlB,UAAQ,SAAQ;;CAGlB,MAAM,+BAA+B,UAAsC;AACzE,MAAI,cAAc,UAAW;EAE7B,MAAM,SAAS,MAAM;AACrB,MAAI,WAAW,SAAS,QAAS;AACjC,MAAI,OAAO,QAAQ,sCAAsC,CAAE;AAC3D,WAAS,SAAS,OAAM;AACxB,UAAQ,KAAI;;AAGd,QACE,qBAAC,OAAD;EAAK,WAAU;EAAc;YAA7B;GACG,SACC,oBAAC,OAAD;IAAO,WAAW,GAAG,gCAAgC,gBAAgB,cAAc,sBAAsB;IAAwC,SAAS;cACvJ;IACI;GAGT,qBAAC,WAAkB,MAAnB;IACE;IACA,UAAU,cAAc;IACxB,QAAQ;IACI;IACZ,oBAAoB,WAA2B,OAAO;IACtD,oBAAoB,WAA2B,OAAO;IACtD;IACA,qBAAqB,gBAAgB,iBAAiB;AACpD,SAAI,aAAa,WAAW,kBAAkB,aAAa,WAAW,cAAe;AACrF,mBAAc,eAAc;;IAExB;IACN,cAAc;IACd,eAAe;IACT;IACI;IACV,OAAO;cAjBT,CAmBE,qBAAC,WAAkB,YAAnB;KACE,QACE,oBAAC,YAAD;MACE,aAAU;MACV,cAAY;MAEZ,WAAW,GAAG,kBAAkB,MAAM,MAAM,EAAE,gHAAgH,cAAc,0CAA0C,UAAU;MAChO,SAAS;MACT,OAAO,2BAA2B;MACnC;eATL,CAYE,oBAAC,WAAkB,OAAnB;MACE,iBAAe;MACf,iBAAe;MACf,cAAY,aAAa;MACzB,cAAa;MACb,WAAW,GACT,gNACA,kCAAkC,iCAAiC,2CACpE;MACD,aAAU;MACV,IAAI;MACJ,KAAK;MACL,aAAa,gBAAgB,SAAS;MACtC,GAAI;MACL,GACD,oBAAC,iBAAD;MAAiB,OAAM;MAAa,WAAU;gBAC5C,oBAAC,WAAkB,SAAnB;OACE,cAAW;OACX,WAAU;OACV,aAAU;iBAET,YAAY,oBAAC,YAAD,EAAY,WAAU,mCAAoC,IAAG,oBAAC,iBAAD,EAAiB,WAAW,GAAG,qDAAqD,QAAQ,aAAa,EAAI;OAC9J;MACZ,EACW;QAE9B,oBAAC,WAAkB,QAAnB,YACE,oBAAC,WAAkB,YAAnB;KAA8B,OAAM;KAAQ,WAAU;KAAe,YAAY;eAC/E,oBAAC,WAAkB,OAAnB;MACE,WAAW,GACT,iFACA,2BAA2B,EAC3B,2IACA,oJAEA,uDACD;MACD,4BAA0B;MAC1B,6BAA2B,sBAAsB,WAAW,gBAAgB;MAE5E,OAAO;gBAEN,YACC,oBAAC,cAAD,EAAc,SAAS,gBAAiB,IACtC,gBAAgB,WAAW,IAC7B,oBAAC,YAAD,EAAY,SAAS,cAAe,IAEpC,oBAAC,WAAkB,MAAnB;OAAwB,WAAU;OAA6D,IAAI;iBAChG,gBAAgB,KAAK,WACpB,qBAAC,WAAkB,MAAnB;QACE,WAAW,GAAG,iBAAiB,CAAC,CAAC,OAAO,UAAU,OAAO,UAAU,OAAO,MAAM,EAAE,2FAA2F;QAE7K,UAAU,OAAO;QAEjB,OAAO;kBALT,CAOE,oBAAC,QAAD;SAAM,WAAU;mBAA6C,OAAO;SAAY,GAChF,oBAAC,WAAkB,eAAnB,EACE,QACE,oBAAC,QAAD;SAAM,WAAU;mBACd,oBAAC,eAAD,EAAe,MAAM,IAAK;SACtB,GAET,EACqB;UAXjB,OAAO,MAWU,CACxB;OACoB;MAEH;KACG,GACN,EACJ;;GAExB,oBAAC,cAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,YAAa,gBAAgB,OAAQ;IACzB;IACrB,qBAAqB,uBAAuB,UAAU;IACvD;GACD,oBAAC,gBAAD;IACE,YAAW;IACX,IAAI;IACJ,SAAS,UAAU,YAAa,kBAAkB,OAAQ;IACrC;IACrB,qBAAqB,uBAAuB,UAAU;IACvD;GACE;;;AAGT,SAAS,cAAc"}

package/dist/DateTimePicker/Calendar.d.ts

@@ -7,15 +7,27 @@ type CalendarProps = DayPickerProps & {
   disabled?: Matcher | Matcher[];
   disablePastDates?: boolean;
   fixedWeeks?: boolean; /** The locale object used to localize dates. Import from 'react-day-picker/locale'. */
-  locale?: Partial<Locale>;
+  locale?: Partial<Locale>; /** The earliest selectable date (inclusive). Dates before this are disabled. */
+  minDate?: Date; /** The latest selectable date (inclusive). Dates after this are disabled. */
+  maxDate?: Date;
+  /**
+   * The date treated as "today". Receives the `rdp-today` styling and is used as the reference
+   * for `disablePastDates`. When `defaultMonth` is not set, the calendar also opens to this date's
+   * month. Defaults to the current date. Useful when picking dates around historical data.
+   */
+  today?: Date;
 };
 declare function Calendar({
   classNames,
+  defaultMonth,
   disabled,
   disablePastDates,
   fixedWeeks,
   locale,
+  maxDate,
+  minDate,
   showOutsideDays,
+  today,
   ...props
 }: CalendarProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Calendar {

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","names":[],"sources":["../../src/components/DateTimePicker/Calendar.tsx"],"mappings":";;;;;KAKY,aAAA,GAAgB,cAAA;EAC1B,QAAA,GAAW,OAAA,GAAU,OAAA;EACrB,gBAAA;EACA,UAAA,YAHuB;EAKvB,MAAA,GAAS,OAAA,CAAQ,MAAA;AAAA;AAAA;EAGQ,UAAA;EAAY,QAAA;EAAU,gBAAA;EAAyB,UAAA;EAAY,MAAA;EAAQ,eAAA;EAAA,GAA2B;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"Calendar.d.ts","names":[],"sources":["../../src/components/DateTimePicker/Calendar.tsx"],"mappings":";;;;;KAKY,aAAA,GAAgB,cAAA;EAC1B,QAAA,GAAW,OAAA,GAAU,OAAA;EACrB,gBAAA;EACA,UAAA,YAHuB;EAKvB,MAAA,GAAS,OAAA,CAAQ,MAAA,GALS;EAO1B,OAAA,GAAU,IAAA,EANW;EAQrB,OAAA,GAAU,IAAA;EAJD;;;;;EAUT,KAAA,GAAQ,IAAA;AAAA;AAAA;EAGiB,UAAA;EAAY,YAAA;EAAc,QAAA;EAAU,gBAAA;EAAyB,UAAA;EAAY,MAAA;EAAQ,OAAA;EAAS,OAAA;EAAS,eAAA;EAAwB,KAAA;EAAA,GAAU;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/DateTimePicker/Calendar.js

@@ -6,9 +6,14 @@ import { jsx } from "react/jsx-runtime";
 import { DayPicker } from "react-day-picker";
 
 //#region src/components/DateTimePicker/Calendar.tsx
-const Calendar = ({ classNames, disabled, disablePastDates = true, fixedWeeks, locale, showOutsideDays = true, ...props }) => {
-	const today = useMemo(() => /* @__PURE__ */ new Date(), []);
-	const combinedDisabled = [...disablePastDates ? [{ before: today }] : [], ...Array.isArray(disabled) ? disabled : disabled ? [disabled] : []];
+const Calendar = ({ classNames, defaultMonth, disabled, disablePastDates = true, fixedWeeks, locale, maxDate, minDate, showOutsideDays = true, today, ...props }) => {
+	const referenceDate = useMemo(() => today ?? /* @__PURE__ */ new Date(), [today]);
+	const combinedDisabled = [
+		...disablePastDates ? [{ before: referenceDate }] : [],
+		...minDate ? [{ before: minDate }] : [],
+		...maxDate ? [{ after: maxDate }] : [],
+		...Array.isArray(disabled) ? disabled : disabled ? [disabled] : []
+	];
 	return /* @__PURE__ */ jsx(DayPicker, {
 		...props,
 		classNames: {
@@ -40,10 +45,12 @@ const Calendar = ({ classNames, disabled, disablePastDates = true, fixedWeeks, l
 			className: cn("size-4", orientation === "left" && "rotate-90", orientation === "right" && "-rotate-90")
 		}) },
 		"data-slot": "calendar",
+		defaultMonth: defaultMonth ?? referenceDate,
 		disabled: combinedDisabled.length > 0 ? combinedDisabled : void 0,
 		fixedWeeks,
 		locale,
-		showOutsideDays
+		showOutsideDays,
+		today: referenceDate
 	});
 };
 Calendar.displayName = "Calendar";

package/dist/DateTimePicker/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":[],"sources":["../../src/components/DateTimePicker/Calendar.tsx"],"sourcesContent":["import { ChevronDownIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { useMemo } from 'react'\nimport { DayPicker, type DayPickerProps, type Matcher, type Locale } from 'react-day-picker'\n\nexport type CalendarProps = DayPickerProps & {\n  disabled?: Matcher | Matcher[]\n  disablePastDates?: boolean\n  fixedWeeks?: boolean\n  /** The locale object used to localize dates. Import from 'react-day-picker/locale'. */\n  locale?: Partial<Locale>\n}\n\nexport const Calendar = ({ classNames, disabled, disablePastDates = true, fixedWeeks, locale, showOutsideDays = true, ...props }: CalendarProps) => {\n  // Memoize today's date to avoid creating new Date objects on every render\n  const today = useMemo(() => new Date(), [])\n\n  // Combine user-provided disabled dates with past dates if enabled\n  const combinedDisabled: Matcher[] = [...(disablePastDates ? [{ before: today }] : []), ...(Array.isArray(disabled) ? disabled : disabled ? [disabled] : [])]\n\n  return (\n    <DayPicker\n      {...props}\n      classNames={{\n        months: cn('months relative flex'),\n        month: cn('month'),\n        caption: cn('calendar-header'),\n        caption_label: cn('month-title'),\n        nav: cn('rdp-nav flex w-full items-center'),\n        nav_button: cn('nav-button h-7 w-7 p-0 bg-transparent opacity-50 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent'),\n        button_previous: cn('nav-prev left-1 top-0 absolute'),\n        button_next: cn('nav-next right-1 top-0 absolute'),\n        table: cn('table w-full border-collapse'),\n        head_row: cn('day-head-row flex'),\n        head_cell: cn('days-of-week'),\n        row: cn('day-row mt-2 flex w-full'),\n        cell: cn('day-cell'),\n        day: cn('day'),\n        day_range_start: cn('day-range-start'),\n        day_range_middle: cn('day-range-middle'),\n        day_range_end: cn('day-range-end'),\n        day_selected: cn('day-selected'),\n        day_outside: cn('day-outside'),\n        day_disabled: cn('day-disabled'),\n        hidden: cn('hidden'),\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({ orientation }) => <ChevronDownIcon aria-hidden='true' className={cn('size-4', orientation === 'left' && 'rotate-90', orientation === 'right' && '-rotate-90')} />,\n      }}\n      data-slot='calendar'\n      data-testid='spectral-calendar'\n      disabled={combinedDisabled.length > 0 ? combinedDisabled : undefined}\n      fixedWeeks={fixedWeeks}\n      locale={locale}\n      showOutsideDays={showOutsideDays}\n    />\n  )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":";;;;;;;;AAaA,MAAa,YAAY,EAAE,YAAY,UAAU,mBAAmB,MAAM,YAAY,QAAQ,kBAAkB,MAAM,GAAG,YAA2B;CAElJ,MAAM,QAAQ,8BAAc,IAAI,MAAM,EAAE,EAAE,CAAA;CAG1C,MAAM,mBAA8B,CAAC,GAAI,mBAAmB,CAAC,EAAE,QAAQ,OAAO,CAAC,GAAG,EAAE,EAAG,GAAI,MAAM,QAAQ,SAAS,GAAG,WAAW,WAAW,CAAC,SAAS,GAAG,EAAE,CAAC;AAE3J,QACE,oBAAC,WAAD;EACE,GAAI;EACJ,YAAY;GACV,QAAQ,GAAG,uBAAuB;GAClC,OAAO,GAAG,QAAQ;GAClB,SAAS,GAAG,kBAAkB;GAC9B,eAAe,GAAG,cAAc;GAChC,KAAK,GAAG,mCAAmC;GAC3C,YAAY,GAAG,mLAAmL;GAClM,iBAAiB,GAAG,iCAAiC;GACrD,aAAa,GAAG,kCAAkC;GAClD,OAAO,GAAG,+BAA+B;GACzC,UAAU,GAAG,oBAAoB;GACjC,WAAW,GAAG,eAAe;GAC7B,KAAK,GAAG,2BAA2B;GACnC,MAAM,GAAG,WAAW;GACpB,KAAK,GAAG,MAAM;GACd,iBAAiB,GAAG,kBAAkB;GACtC,kBAAkB,GAAG,mBAAmB;GACxC,eAAe,GAAG,gBAAgB;GAClC,cAAc,GAAG,eAAe;GAChC,aAAa,GAAG,cAAc;GAC9B,cAAc,GAAG,eAAe;GAChC,QAAQ,GAAG,SAAS;GACpB,GAAG;GACJ;EACD,YAAY,EACV,UAAU,EAAE,kBAAkB,oBAAC,iBAAD;GAAiB,eAAY;GAAO,WAAW,GAAG,UAAU,gBAAgB,UAAU,aAAa,gBAAgB,WAAW,aAAa;GAAI,GAC9K;EACD,aAAU;EAEV,UAAU,iBAAiB,SAAS,IAAI,mBAAmB;EAC/C;EACJ;EACS;EAClB;;AAIL,SAAS,cAAc"}
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../src/components/DateTimePicker/Calendar.tsx"],"sourcesContent":["import { ChevronDownIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { useMemo } from 'react'\nimport { DayPicker, type DayPickerProps, type Matcher, type Locale } from 'react-day-picker'\n\nexport type CalendarProps = DayPickerProps & {\n  disabled?: Matcher | Matcher[]\n  disablePastDates?: boolean\n  fixedWeeks?: boolean\n  /** The locale object used to localize dates. Import from 'react-day-picker/locale'. */\n  locale?: Partial<Locale>\n  /** The earliest selectable date (inclusive). Dates before this are disabled. */\n  minDate?: Date\n  /** The latest selectable date (inclusive). Dates after this are disabled. */\n  maxDate?: Date\n  /**\n   * The date treated as \"today\". Receives the `rdp-today` styling and is used as the reference\n   * for `disablePastDates`. When `defaultMonth` is not set, the calendar also opens to this date's\n   * month. Defaults to the current date. Useful when picking dates around historical data.\n   */\n  today?: Date\n}\n\nexport const Calendar = ({ classNames, defaultMonth, disabled, disablePastDates = true, fixedWeeks, locale, maxDate, minDate, showOutsideDays = true, today, ...props }: CalendarProps) => {\n  // Reference date for the `today` modifier and past-date disabling. Defaults to the current date.\n  const referenceDate = useMemo(() => today ?? new Date(), [today])\n\n  // Combine user-provided disabled dates with the past-date, min, and max constraints\n  const combinedDisabled: Matcher[] = [\n    ...(disablePastDates ? [{ before: referenceDate }] : []),\n    ...(minDate ? [{ before: minDate }] : []),\n    ...(maxDate ? [{ after: maxDate }] : []),\n    ...(Array.isArray(disabled) ? disabled : disabled ? [disabled] : []),\n  ]\n\n  return (\n    <DayPicker\n      {...props}\n      classNames={{\n        months: cn('months relative flex'),\n        month: cn('month'),\n        caption: cn('calendar-header'),\n        caption_label: cn('month-title'),\n        nav: cn('rdp-nav flex w-full items-center'),\n        nav_button: cn('nav-button h-7 w-7 p-0 bg-transparent opacity-50 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent'),\n        button_previous: cn('nav-prev left-1 top-0 absolute'),\n        button_next: cn('nav-next right-1 top-0 absolute'),\n        table: cn('table w-full border-collapse'),\n        head_row: cn('day-head-row flex'),\n        head_cell: cn('days-of-week'),\n        row: cn('day-row mt-2 flex w-full'),\n        cell: cn('day-cell'),\n        day: cn('day'),\n        day_range_start: cn('day-range-start'),\n        day_range_middle: cn('day-range-middle'),\n        day_range_end: cn('day-range-end'),\n        day_selected: cn('day-selected'),\n        day_outside: cn('day-outside'),\n        day_disabled: cn('day-disabled'),\n        hidden: cn('hidden'),\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({ orientation }) => <ChevronDownIcon aria-hidden='true' className={cn('size-4', orientation === 'left' && 'rotate-90', orientation === 'right' && '-rotate-90')} />,\n      }}\n      data-slot='calendar'\n      data-testid='spectral-calendar'\n      defaultMonth={defaultMonth ?? referenceDate}\n      disabled={combinedDisabled.length > 0 ? combinedDisabled : undefined}\n      fixedWeeks={fixedWeeks}\n      locale={locale}\n      showOutsideDays={showOutsideDays}\n      today={referenceDate}\n    />\n  )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":";;;;;;;;AAuBA,MAAa,YAAY,EAAE,YAAY,cAAc,UAAU,mBAAmB,MAAM,YAAY,QAAQ,SAAS,SAAS,kBAAkB,MAAM,OAAO,GAAG,YAA2B;CAEzL,MAAM,gBAAgB,cAAc,yBAAS,IAAI,MAAM,EAAE,CAAC,MAAM,CAAA;CAGhE,MAAM,mBAA8B;EAClC,GAAI,mBAAmB,CAAC,EAAE,QAAQ,eAAe,CAAC,GAAG,EAAE;EACvD,GAAI,UAAU,CAAC,EAAE,QAAQ,SAAS,CAAC,GAAG,EAAE;EACxC,GAAI,UAAU,CAAC,EAAE,OAAO,SAAS,CAAC,GAAG,EAAE;EACvC,GAAI,MAAM,QAAQ,SAAS,GAAG,WAAW,WAAW,CAAC,SAAS,GAAG,EAAE;EACrE;AAEA,QACE,oBAAC,WAAD;EACE,GAAI;EACJ,YAAY;GACV,QAAQ,GAAG,uBAAuB;GAClC,OAAO,GAAG,QAAQ;GAClB,SAAS,GAAG,kBAAkB;GAC9B,eAAe,GAAG,cAAc;GAChC,KAAK,GAAG,mCAAmC;GAC3C,YAAY,GAAG,mLAAmL;GAClM,iBAAiB,GAAG,iCAAiC;GACrD,aAAa,GAAG,kCAAkC;GAClD,OAAO,GAAG,+BAA+B;GACzC,UAAU,GAAG,oBAAoB;GACjC,WAAW,GAAG,eAAe;GAC7B,KAAK,GAAG,2BAA2B;GACnC,MAAM,GAAG,WAAW;GACpB,KAAK,GAAG,MAAM;GACd,iBAAiB,GAAG,kBAAkB;GACtC,kBAAkB,GAAG,mBAAmB;GACxC,eAAe,GAAG,gBAAgB;GAClC,cAAc,GAAG,eAAe;GAChC,aAAa,GAAG,cAAc;GAC9B,cAAc,GAAG,eAAe;GAChC,QAAQ,GAAG,SAAS;GACpB,GAAG;GACJ;EACD,YAAY,EACV,UAAU,EAAE,kBAAkB,oBAAC,iBAAD;GAAiB,eAAY;GAAO,WAAW,GAAG,UAAU,gBAAgB,UAAU,aAAa,gBAAgB,WAAW,aAAa;GAAI,GAC9K;EACD,aAAU;EAEV,cAAc,gBAAgB;EAC9B,UAAU,iBAAiB,SAAS,IAAI,mBAAmB;EAC/C;EACJ;EACS;EACjB,OAAO;EACR;;AAIL,SAAS,cAAc"}

package/dist/DateTimePicker/DateTimeDisplayInput.d.ts

@@ -8,11 +8,11 @@ interface DateTimeDisplayInputProps extends Omit<ComponentProps<'div'>, 'onChang
   defaultValue?: Date;
   disabled?: boolean;
   endIcon?: ReactNode;
+  hideTime?: boolean;
   hourFormat?: HourFormat;
   label?: string;
   locale?: string;
   onChange?: (date: Date | undefined) => void;
-  showTime?: boolean;
   state?: 'default' | 'disabled' | 'error';
   value?: Date;
   /** @deprecated Use `value` instead */

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeDisplayInput.d.ts","names":[],"sources":["../../src/components/DateTimePicker/DateTimeDisplayInput.tsx"],"mappings":";;;;;;UAOiB,yBAAA,SAAkC,IAAA,CAAK,cAAA;EACtD,YAAA,GAAe,IAAA;EACf,QAAA;EACA,OAAA,GAAU,SAAA;EACV,UAAA,GAAa,UAAA;EACb,KAAA;EACA,MAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;EAClB,QAAA;EACA,KAAA;EACA,KAAA,GAAQ,IAAA;EAAA;EAGR,IAAA,GAAO,IAAA;EAEe;EAAtB,YAAA,IAAgB,IAAA,EAAM,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;cA4WX,oBAAA,EAAoB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,yBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA"}
+{"version":3,"file":"DateTimeDisplayInput.d.ts","names":[],"sources":["../../src/components/DateTimePicker/DateTimeDisplayInput.tsx"],"mappings":";;;;;;UAOiB,yBAAA,SAAkC,IAAA,CAAK,cAAA;EACtD,YAAA,GAAe,IAAA;EACf,QAAA;EACA,OAAA,GAAU,SAAA;EACV,QAAA;EACA,UAAA,GAAa,UAAA;EACb,KAAA;EACA,MAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;EAClB,KAAA;EACA,KAAA,GAAQ,IAAA;EAAA;EAGR,IAAA,GAAO,IAAA;EAEe;EAAtB,YAAA,IAAgB,IAAA,EAAM,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;cA4WX,oBAAA,EAAoB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,yBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/DateTimePicker/DateTimeDisplayInput.js

@@ -325,7 +325,7 @@ const SegmentInput = ({ ariaLabel, config, disabled, onLeftFocus, onRightFocus,
 * <DateTimeDisplayInput date={date} onDateChange={setDate} />
 * ```
 */
-const DateTimeDisplayInput = forwardRef(({ className, defaultValue, disabled, endIcon, hourFormat = "12", id, label, locale, onChange, showTime = true, state = "default", value, "aria-labelledby": ariaLabelledBy, date: legacyDate, onDateChange: legacyOnDateChange, ...props }, ref) => {
+const DateTimeDisplayInput = forwardRef(({ className, defaultValue, disabled, endIcon, hourFormat = "12", id, label, locale, onChange, hideTime = false, state = "default", value, "aria-labelledby": ariaLabelledBy, date: legacyDate, onDateChange: legacyOnDateChange, ...props }, ref) => {
 	const generatedId = useId();
 	const displayInputId = id ?? `datetime-display-input-${generatedId}`;
 	const displayLabelId = `${displayInputId}-label`;
@@ -421,7 +421,7 @@ const DateTimeDisplayInput = forwardRef(({ className, defaultValue, disabled, en
 				ariaLabel: "Year"
 			}
 		];
-		if (!showTime) return dateSegments;
+		if (hideTime) return dateSegments;
 		const timeSegments = hourFormat === "24" ? [{
 			key: "hour",
 			config: SEGMENT_CONFIGS.hour24,
@@ -449,7 +449,7 @@ const DateTimeDisplayInput = forwardRef(({ className, defaultValue, disabled, en
 		];
 		return [...dateSegments, ...timeSegments];
 	}, [
-		showTime,
+		hideTime,
 		hourFormat,
 		periodLabels
 	]);

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'\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,16 +16,24 @@ 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';
   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;
@@ -37,17 +45,20 @@ declare function DateTimePicker({
   disabled,
   disablePastDates,
   errorMessage,
+  hideTimePicker,
   hourFormat,
   inputClassName,
   label,
   locale,
+  maxDate,
+  minDate,
   messageReserveLines,
   messageReserveSpace,
   onChange,
-  showTimePicker,
   state,
   timeLocale,
   timeTranslations,
+  today,
   value,
   id,
   ...props

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;AAAA;AAAA;EAIR,aAAA;EACA,SAAA;EACA,YAAA;EACA,QAAA;EACA,gBAAA;EACA,YAAA;EACA,cAAA;EACA,UAAA;EACA,cAAA;EACA,KAAA;EACA,MAAA;EACA,OAAA;EACA,OAAA;EACA,mBAAA;EACA,mBAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA;EACA,gBAAA;EACA,KAAA;EACA,KAAA;EACA,EAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/DateTimePicker.js

@@ -16,7 +16,7 @@ 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, inputClassName, label, locale, maxDate, minDate, messageReserveLines = 1, messageReserveSpace = false, onChange, state = "default", timeLocale, timeTranslations, today, value, id, ...props }) => {
 	const fieldId = useFormFieldId(id);
 	const errorMessageId = getErrorMessageId(fieldId);
 	const describedBy = state === "error" && errorMessage ? errorMessageId : void 0;
@@ -64,7 +64,7 @@ const DateTimePicker = ({ calendarProps, className, defaultValue, disabled = fal
 			id: fieldId,
 			label,
 			onChange: handleInputDateChange,
-			showTime: showTimePicker,
+			hideTime: hideTimePicker,
 			state,
 			value: date
 		}), /* @__PURE__ */ jsx(ErrorMessage, {
@@ -76,16 +76,20 @@ const DateTimePicker = ({ calendarProps, className, defaultValue, disabled = fal
 		})]
 	}), /* @__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, 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  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'\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}\n\nexport const DateTimePicker = ({\n  calendarProps,\n  className,\n  defaultValue,\n  disabled = false,\n  disablePastDates = true,\n  errorMessage,\n  hideTimePicker = false,\n  hourFormat,\n  inputClassName,\n  label,\n  locale,\n  maxDate,\n  minDate,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  onChange,\n  state = 'default',\n  timeLocale,\n  timeTranslations,\n  today,\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          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      </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":";;;;;;;;;;;;;;;;;;AAyCA,MAAa,kBAAkB,EAC7B,eACA,WACA,cACA,WAAW,OACX,mBAAmB,MACnB,cACA,iBAAiB,OACjB,YACA,gBACA,OACA,QACA,SACA,SACA,sBAAsB,GACtB,sBAAsB,OACtB,UACA,QAAQ,WACR,YACA,kBACA,OACA,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,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"}