@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/DateTimePicker/TimePeriodSelect.d.ts

@@ -1,12 +1,18 @@
-import { ComponentProps } from 'react';
-import { Period, PeriodLabels } from './DateTimeUtils';
-export interface TimePeriodSelectProps extends Omit<ComponentProps<'button'>, 'onChange' | 'ref'> {
-    ariaLabel?: string;
-    labels?: PeriodLabels;
-    onLeftFocus?: () => void;
-    onPeriodChange: (period: Period) => void;
-    onRightFocus?: () => void;
-    period: Period;
+'use client';
+import { Period, PeriodLabels } from "./DateTimeUtils.js";
+import * as _$react from "react";
+import { ComponentProps } from "react";
+
+//#region src/components/DateTimePicker/TimePeriodSelect.d.ts
+interface TimePeriodSelectProps extends Omit<ComponentProps<'button'>, 'onChange' | 'ref'> {
+  ariaLabel?: string;
+  labels?: PeriodLabels;
+  onLeftFocus?: () => void;
+  onPeriodChange: (period: Period) => void;
+  onRightFocus?: () => void;
+  period: Period;
 }
-export declare const TimePeriodSelect: import('react').ForwardRefExoticComponent<TimePeriodSelectProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const TimePeriodSelect: _$react.ForwardRefExoticComponent<TimePeriodSelectProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { TimePeriodSelect, TimePeriodSelectProps };
 //# sourceMappingURL=TimePeriodSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePeriodSelect.d.ts","names":[],"sources":["../../src/components/DateTimePicker/TimePeriodSelect.tsx"],"mappings":";;;;;;UAKiB,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;EACA,MAAA,GAAS,YAAA;EACT,WAAA;EACA,cAAA,GAAiB,MAAA,EAAQ,MAAA;EACzB,YAAA;EACA,MAAA,EAAQ,MAAA;AAAA;AAAA,cAKG,gBAAA,EAAgB,OAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/DateTimePicker/TimePeriodSelect.js

@@ -1,45 +1,59 @@
-'use client'
-import '../styles/main.css'
-import { t as e } from "../twUtils-BpqlKSeB.js";
-import { i as t, l as n, n as r, t as i, u as a } from "../select-DFE8xm1L.js";
-import { forwardRef as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../primitives/select.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/DateTimePicker/TimePeriodSelect.tsx
-var l = {
+const DEFAULT_LABELS = {
 	am: "AM",
 	pm: "PM"
-}, u = o(({ ariaLabel: o, className: u, disabled: d, labels: f = l, onLeftFocus: p, onPeriodChange: m, onRightFocus: h, period: g, ..._ }, v) => /* @__PURE__ */ c(i, {
-	defaultValue: g,
-	disabled: d,
-	onValueChange: (e) => m(e),
-	value: g,
-	children: [/* @__PURE__ */ s(n, {
-		"aria-label": o ?? `Select ${f.am} or ${f.pm}`,
-		className: e("w-fit", u),
-		"data-slot": "time-period-select",
-		"data-testid": "spectral-time-period-select",
-		onKeyDown: (e) => {
-			e.key === "ArrowRight" && (e.preventDefault(), h?.()), e.key === "ArrowLeft" && (e.preventDefault(), p?.());
-		},
-		ref: v,
-		size: "sm",
-		..._,
-		children: /* @__PURE__ */ s(a, { children: g === "AM" ? f.am : f.pm })
-	}), /* @__PURE__ */ c(r, {
-		"data-testid": "spectral-time-period-select-content",
-		position: "popper",
-		sideOffset: 4,
-		children: [/* @__PURE__ */ s(t, {
-			"data-testid": "spectral-time-period-select-am",
-			value: "AM",
-			children: f.am
-		}), /* @__PURE__ */ s(t, {
-			"data-testid": "spectral-time-period-select-pm",
-			value: "PM",
-			children: f.pm
+};
+const TimePeriodSelect = forwardRef(({ ariaLabel, className, disabled, labels = DEFAULT_LABELS, onLeftFocus, onPeriodChange, onRightFocus, period, ...props }, ref) => {
+	const effectiveAriaLabel = ariaLabel ?? `Select ${labels.am} or ${labels.pm}`;
+	const handleKeyDown = (e) => {
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			onRightFocus?.();
+		}
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			onLeftFocus?.();
+		}
+	};
+	return /* @__PURE__ */ jsxs(Select, {
+		defaultValue: period,
+		disabled,
+		onValueChange: (value) => onPeriodChange(value),
+		value: period,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"aria-label": effectiveAriaLabel,
+			className: cn("w-fit", className),
+			"data-slot": "time-period-select",
+			"data-testid": "spectral-time-period-select",
+			onKeyDown: handleKeyDown,
+			ref,
+			size: "sm",
+			...props,
+			children: /* @__PURE__ */ jsx(SelectValue, { children: period === "AM" ? labels.am : labels.pm })
+		}), /* @__PURE__ */ jsxs(SelectContent, {
+			"data-testid": "spectral-time-period-select-content",
+			position: "popper",
+			sideOffset: 4,
+			children: [/* @__PURE__ */ jsx(SelectItem, {
+				"data-testid": "spectral-time-period-select-am",
+				value: "AM",
+				children: labels.am
+			}), /* @__PURE__ */ jsx(SelectItem, {
+				"data-testid": "spectral-time-period-select-pm",
+				value: "PM",
+				children: labels.pm
+			})]
 		})]
-	})]
-}));
-u.displayName = "TimePeriodSelect";
+	});
+});
+TimePeriodSelect.displayName = "TimePeriodSelect";
+
 //#endregion
-export { u as TimePeriodSelect };
+export { TimePeriodSelect };
+//# sourceMappingURL=TimePeriodSelect.js.map

package/dist/DateTimePicker/TimePeriodSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePeriodSelect.js","names":[],"sources":["../../src/components/DateTimePicker/TimePeriodSelect.tsx"],"sourcesContent":["import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@primitives/select'\nimport { cn } from '@utils/twUtils'\nimport { forwardRef, type ComponentProps, type KeyboardEvent } from 'react'\nimport { type Period, type PeriodLabels } from './DateTimeUtils'\n\nexport interface TimePeriodSelectProps extends Omit<ComponentProps<'button'>, 'onChange' | 'ref'> {\n  ariaLabel?: string\n  labels?: PeriodLabels\n  onLeftFocus?: () => void\n  onPeriodChange: (period: Period) => void\n  onRightFocus?: () => void\n  period: Period\n}\n\nconst DEFAULT_LABELS: PeriodLabels = { am: 'AM', pm: 'PM' }\n\nexport const TimePeriodSelect = forwardRef<HTMLButtonElement, TimePeriodSelectProps>(({ ariaLabel, className, disabled, labels = DEFAULT_LABELS, onLeftFocus, onPeriodChange, onRightFocus, period, ...props }, ref) => {\n  // Generate default ARIA label from the provided labels if not explicitly provided\n  const effectiveAriaLabel = ariaLabel ?? `Select ${labels.am} or ${labels.pm}`\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault()\n      onRightFocus?.()\n    }\n    if (e.key === 'ArrowLeft') {\n      e.preventDefault()\n      onLeftFocus?.()\n    }\n  }\n\n  return (\n    <Select defaultValue={period} disabled={disabled} onValueChange={(value) => onPeriodChange(value as Period)} value={period}>\n      <SelectTrigger aria-label={effectiveAriaLabel} className={cn('w-fit', className)} data-slot='time-period-select' data-testid='spectral-time-period-select' onKeyDown={handleKeyDown} ref={ref} size='sm' {...props}>\n        <SelectValue>{period === 'AM' ? labels.am : labels.pm}</SelectValue>\n      </SelectTrigger>\n      <SelectContent data-testid='spectral-time-period-select-content' position='popper' sideOffset={4}>\n        <SelectItem data-testid='spectral-time-period-select-am' value='AM'>\n          {labels.am}\n        </SelectItem>\n        <SelectItem data-testid='spectral-time-period-select-pm' value='PM'>\n          {labels.pm}\n        </SelectItem>\n      </SelectContent>\n    </Select>\n  )\n})\n\nTimePeriodSelect.displayName = 'TimePeriodSelect'\n"],"mappings":";;;;;;;AAcA,MAAM,iBAA+B;CAAE,IAAI;CAAM,IAAI;CAAM;AAE3D,MAAa,mBAAmB,YAAsD,EAAE,WAAW,WAAW,UAAU,SAAS,gBAAgB,aAAa,gBAAgB,cAAc,QAAQ,GAAG,SAAS,QAAQ;CAEtN,MAAM,qBAAqB,aAAa,UAAU,OAAO,GAAG,MAAM,OAAO;CACzE,MAAM,iBAAiB,MAAwC;AAC7D,MAAI,EAAE,QAAQ,cAAc;AAC1B,KAAE,gBAAgB;AAClB,mBAAgB;;AAElB,MAAI,EAAE,QAAQ,aAAa;AACzB,KAAE,gBAAgB;AAClB,kBAAe;;;AAInB,QACE,qBAAC,QAAD;EAAQ,cAAc;EAAkB;EAAU,gBAAgB,UAAU,eAAe,MAAgB;EAAE,OAAO;YAApH,CACE,oBAAC,eAAD;GAAe,cAAY;GAAoB,WAAW,GAAG,SAAS,UAAU;GAAE,aAAU;GAAqB,eAAY;GAA8B,WAAW;GAAoB;GAAK,MAAK;GAAK,GAAI;aAC3M,oBAAC,aAAD,YAAc,WAAW,OAAO,OAAO,KAAK,OAAO,IAAiB;GACtD,GAChB,qBAAC,eAAD;GAAe,eAAY;GAAsC,UAAS;GAAS,YAAY;aAA/F,CACE,oBAAC,YAAD;IAAY,eAAY;IAAiC,OAAM;cAC5D,OAAO;IACG,GACb,oBAAC,YAAD;IAAY,eAAY;IAAiC,OAAM;cAC5D,OAAO;IACG,EACC;KACT;;EAEX;AAEF,iBAAiB,cAAc"}

package/dist/DateTimePicker/TimePicker.d.ts

@@ -1,16 +1,31 @@
-import { ComponentProps } from 'react';
-import { HourFormat, Period, TimePickerTranslations } from './DateTimeUtils';
-export interface TimePickerProps extends Omit<ComponentProps<'div'>, 'onChange'> {
-    date: Date | undefined;
-    hourFormat?: HourFormat;
-    locale?: string;
-    onChange: (date: Date | undefined) => void;
-    onPeriodChange?: (newPeriod: Period) => void;
-    /** Override translation strings for ARIA labels */
-    translations?: Partial<TimePickerTranslations>;
+'use client';
+import { HourFormat, Period, TimePickerTranslations } from "./DateTimeUtils.js";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/DateTimePicker/TimePicker.d.ts
+interface TimePickerProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+  date: Date | undefined;
+  hourFormat?: HourFormat;
+  locale?: string;
+  onChange: (date: Date | undefined) => void;
+  onPeriodChange?: (newPeriod: Period) => void;
+  /** Override translation strings for ARIA labels */
+  translations?: Partial<TimePickerTranslations>;
 }
-export declare const TimePicker: {
-    ({ className, date, hourFormat, locale, onChange, onPeriodChange, translations, ...props }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function TimePicker({
+  className,
+  date,
+  hourFormat,
+  locale,
+  onChange,
+  onPeriodChange,
+  translations,
+  ...props
+}: TimePickerProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace TimePicker {
+  var displayName: string;
+}
+//#endregion
+export { TimePicker, TimePickerProps };
 //# sourceMappingURL=TimePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.d.ts","names":[],"sources":["../../src/components/DateTimePicker/TimePicker.tsx"],"mappings":";;;;;;UAMiB,eAAA,SAAwB,IAAA,CAAK,cAAA;EAC5C,IAAA,EAAM,IAAA;EACN,UAAA,GAAa,UAAA;EACb,MAAA;EACA,QAAA,GAAW,IAAA,EAAM,IAAA;EACjB,cAAA,IAAkB,SAAA,EAAW,MAAA;EALe;EAO5C,YAAA,GAAe,OAAA,CAAQ,sBAAA;AAAA;AAAA;EAGI,SAAA;EAAW,IAAA;EAAM,UAAA;EAAY,MAAA;EAAQ,QAAA;EAAU,cAAA;EAAgB,YAAA;EAAA,GAAiB;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/DateTimePicker/TimePicker.js

@@ -1,79 +1,93 @@
-'use client'
-import '../styles/main.css'
-import { t as e } from "../twUtils-BpqlKSeB.js";
-import { S as t, b as n, f as r, t as i, u as a, x as o } from "../DateTimeUtils-BJUAMuot.js";
-import { DateTimeInput as s } from "./DateTimeInput.js";
-import { TimePeriodSelect as c } from "./TimePeriodSelect.js";
-import { useMemo as l, useRef as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { DEFAULT_TRANSLATIONS, detectHourFormat, formatSelectPeriodLabel, getLocalizedPeriodLabels, getPeriodFromHours, getResolvedLocale } from "./DateTimeUtils.js";
+import { DateTimeInput } from "./DateTimeInput.js";
+import { TimePeriodSelect } from "./TimePeriodSelect.js";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/DateTimePicker/TimePicker.tsx
-var p = ({ className: p, date: m, hourFormat: h, locale: g, onChange: _, onPeriodChange: v, translations: y, ...b }) => {
-	let x = u(null), S = u(null), C = u(null), w = l(() => t(g), [g]), T = l(() => ({
-		...i,
-		...y
-	}), [y]), E = l(() => h ?? a(w), [h, w]), D = l(() => n(w), [w]), O = l(() => r(D, T.selectPeriodTemplate), [T.selectPeriodTemplate, D]), k = E === "24", A = m ? o(m.getHours()) : "AM", j = (e) => {
-		if (!m) {
-			v?.(e);
+const TimePicker = ({ className, date, hourFormat, locale, onChange, onPeriodChange, translations, ...props }) => {
+	const minuteRef = useRef(null);
+	const hourRef = useRef(null);
+	const periodRef = useRef(null);
+	const resolvedLocale = useMemo(() => getResolvedLocale(locale), [locale]);
+	const mergedTranslations = useMemo(() => ({
+		...DEFAULT_TRANSLATIONS,
+		...translations
+	}), [translations]);
+	const effectiveHourFormat = useMemo(() => hourFormat ?? detectHourFormat(resolvedLocale), [hourFormat, resolvedLocale]);
+	const periodLabels = useMemo(() => getLocalizedPeriodLabels(resolvedLocale), [resolvedLocale]);
+	const selectPeriodAriaLabel = useMemo(() => formatSelectPeriodLabel(periodLabels, mergedTranslations.selectPeriodTemplate), [mergedTranslations.selectPeriodTemplate, periodLabels]);
+	const is24Hour = effectiveHourFormat === "24";
+	const period = date ? getPeriodFromHours(date.getHours()) : "AM";
+	const handlePeriodChange = (newPeriod) => {
+		if (!date) {
+			onPeriodChange?.(newPeriod);
 			return;
 		}
-		let t = new Date(m), n = t.getHours();
-		if (o(n) !== e) {
-			let r = e === "PM" ? 12 : -12;
-			t.setHours(n + r), _(t);
+		const newDate = new Date(date);
+		const currentHours = newDate.getHours();
+		if (getPeriodFromHours(currentHours) !== newPeriod) {
+			const adjustment = newPeriod === "PM" ? 12 : -12;
+			newDate.setHours(currentHours + adjustment);
+			onChange(newDate);
 		}
-		v?.(e);
+		onPeriodChange?.(newPeriod);
 	};
-	return /* @__PURE__ */ f("div", {
-		"aria-label": k ? T.timePicker24Hour : T.timePicker12Hour,
-		className: e("gap-1 inline-flex items-center", p),
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": is24Hour ? mergedTranslations.timePicker24Hour : mergedTranslations.timePicker12Hour,
+		className: cn("gap-1 inline-flex items-center", className),
 		"data-slot": "time-picker",
 		"data-testid": "spectral-time-picker",
 		role: "group",
-		...b,
+		...props,
 		children: [
-			/* @__PURE__ */ d(s, {
-				"aria-label": k ? T.hours24 : T.hours12,
+			/* @__PURE__ */ jsx(DateTimeInput, {
+				"aria-label": is24Hour ? mergedTranslations.hours24 : mergedTranslations.hours12,
 				className: "w-12",
 				"data-testid": "spectral-time-picker-hours",
-				date: m,
-				locale: w,
-				onRightFocus: () => x.current?.focus(),
-				period: k ? void 0 : A,
-				picker: k ? "hours" : "12hours",
-				ref: S,
-				setDate: _,
-				translations: T
+				date,
+				locale: resolvedLocale,
+				onRightFocus: () => minuteRef.current?.focus(),
+				period: is24Hour ? void 0 : period,
+				picker: is24Hour ? "hours" : "12hours",
+				ref: hourRef,
+				setDate: onChange,
+				translations: mergedTranslations
 			}),
-			/* @__PURE__ */ d("span", {
+			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				className: "select-none",
 				children: ":"
 			}),
-			/* @__PURE__ */ d(s, {
-				"aria-label": T.minutes,
+			/* @__PURE__ */ jsx(DateTimeInput, {
+				"aria-label": mergedTranslations.minutes,
 				className: "w-12",
 				"data-testid": "spectral-time-picker-minutes",
-				date: m,
-				locale: w,
-				onLeftFocus: () => S.current?.focus(),
-				onRightFocus: k ? void 0 : () => C.current?.focus(),
-				period: k ? void 0 : A,
+				date,
+				locale: resolvedLocale,
+				onLeftFocus: () => hourRef.current?.focus(),
+				onRightFocus: !is24Hour ? () => periodRef.current?.focus() : void 0,
+				period: is24Hour ? void 0 : period,
 				picker: "minutes",
-				ref: x,
-				setDate: _,
-				translations: T
+				ref: minuteRef,
+				setDate: onChange,
+				translations: mergedTranslations
 			}),
-			!k && /* @__PURE__ */ d(c, {
-				ariaLabel: O,
-				labels: D,
-				onLeftFocus: () => x.current?.focus(),
-				onPeriodChange: j,
-				period: A,
-				ref: C
+			!is24Hour && /* @__PURE__ */ jsx(TimePeriodSelect, {
+				ariaLabel: selectPeriodAriaLabel,
+				labels: periodLabels,
+				onLeftFocus: () => minuteRef.current?.focus(),
+				onPeriodChange: handlePeriodChange,
+				period,
+				ref: periodRef
 			})
 		]
 	});
 };
-p.displayName = "TimePicker";
+TimePicker.displayName = "TimePicker";
+
 //#endregion
-export { p as TimePicker };
+export { TimePicker };
+//# sourceMappingURL=TimePicker.js.map

package/dist/DateTimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","names":[],"sources":["../../src/components/DateTimePicker/TimePicker.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { useMemo, useRef, type ComponentProps } from 'react'\nimport { DateTimeInput } from './DateTimeInput'\nimport { DEFAULT_TRANSLATIONS, detectHourFormat, formatSelectPeriodLabel, getLocalizedPeriodLabels, getPeriodFromHours, getResolvedLocale, type HourFormat, type Period, type TimePickerTranslations } from './DateTimeUtils'\nimport { TimePeriodSelect } from './TimePeriodSelect'\n\nexport interface TimePickerProps extends Omit<ComponentProps<'div'>, 'onChange'> {\n  date: Date | undefined\n  hourFormat?: HourFormat\n  locale?: string\n  onChange: (date: Date | undefined) => void\n  onPeriodChange?: (newPeriod: Period) => void\n  /** Override translation strings for ARIA labels */\n  translations?: Partial<TimePickerTranslations>\n}\n\nexport const TimePicker = ({ className, date, hourFormat, locale, onChange, onPeriodChange, translations, ...props }: TimePickerProps) => {\n  const minuteRef = useRef<HTMLInputElement>(null)\n  const hourRef = useRef<HTMLInputElement>(null)\n  const periodRef = useRef<HTMLButtonElement>(null)\n\n  // Resolve locale with fallback chain\n  const resolvedLocale = useMemo(() => getResolvedLocale(locale), [locale])\n\n  // Merge translations with defaults\n  const mergedTranslations = useMemo(() => ({ ...DEFAULT_TRANSLATIONS, ...translations }), [translations])\n\n  // Auto-detect hour format from locale if not explicitly provided\n  const effectiveHourFormat = useMemo(() => hourFormat ?? detectHourFormat(resolvedLocale), [hourFormat, resolvedLocale])\n\n  // Get localized AM/PM labels\n  const periodLabels = useMemo(() => getLocalizedPeriodLabels(resolvedLocale), [resolvedLocale])\n\n  // Generate localized ARIA label for period select\n  const selectPeriodAriaLabel = useMemo(() => formatSelectPeriodLabel(periodLabels, mergedTranslations.selectPeriodTemplate), [mergedTranslations.selectPeriodTemplate, periodLabels])\n\n  const is24Hour = effectiveHourFormat === '24'\n  const period = date ? getPeriodFromHours(date.getHours()) : 'AM'\n\n  const handlePeriodChange = (newPeriod: Period) => {\n    if (!date) {\n      onPeriodChange?.(newPeriod)\n      return\n    }\n\n    // Update the date to reflect the new period\n    const newDate = new Date(date)\n    const currentHours = newDate.getHours()\n    const currentPeriod = getPeriodFromHours(currentHours)\n\n    if (currentPeriod !== newPeriod) {\n      // Toggle between AM and PM (add or subtract 12 hours)\n      const adjustment = newPeriod === 'PM' ? 12 : -12\n      newDate.setHours(currentHours + adjustment)\n      onChange(newDate)\n    }\n\n    onPeriodChange?.(newPeriod)\n  }\n\n  return (\n    <div aria-label={is24Hour ? mergedTranslations.timePicker24Hour : mergedTranslations.timePicker12Hour} className={cn('gap-1 inline-flex items-center', className)} data-slot='time-picker' data-testid='spectral-time-picker' role='group' {...props}>\n      <DateTimeInput\n        aria-label={is24Hour ? mergedTranslations.hours24 : mergedTranslations.hours12}\n        className='w-12'\n        data-testid='spectral-time-picker-hours'\n        date={date}\n        locale={resolvedLocale}\n        onRightFocus={() => minuteRef.current?.focus()}\n        period={is24Hour ? undefined : period}\n        picker={is24Hour ? 'hours' : '12hours'}\n        ref={hourRef}\n        setDate={onChange}\n        translations={mergedTranslations}\n      />\n\n      <span aria-hidden='true' className='select-none'>\n        :\n      </span>\n\n      <DateTimeInput\n        aria-label={mergedTranslations.minutes}\n        className='w-12'\n        data-testid='spectral-time-picker-minutes'\n        date={date}\n        locale={resolvedLocale}\n        onLeftFocus={() => hourRef.current?.focus()}\n        onRightFocus={!is24Hour ? () => periodRef.current?.focus() : undefined}\n        period={is24Hour ? undefined : period}\n        picker='minutes'\n        ref={minuteRef}\n        setDate={onChange}\n        translations={mergedTranslations}\n      />\n\n      {!is24Hour && <TimePeriodSelect ariaLabel={selectPeriodAriaLabel} labels={periodLabels} onLeftFocus={() => minuteRef.current?.focus()} onPeriodChange={handlePeriodChange} period={period} ref={periodRef} />}\n    </div>\n  )\n}\nTimePicker.displayName = 'TimePicker'\n"],"mappings":";;;;;;;;;AAgBA,MAAa,cAAc,EAAE,WAAW,MAAM,YAAY,QAAQ,UAAU,gBAAgB,cAAc,GAAG,YAA6B;CACxI,MAAM,YAAY,OAAyB,KAAK;CAChD,MAAM,UAAU,OAAyB,KAAK;CAC9C,MAAM,YAAY,OAA0B,KAAK;CAGjD,MAAM,iBAAiB,cAAc,kBAAkB,OAAO,EAAE,CAAC,OAAO,CAAC;CAGzE,MAAM,qBAAqB,eAAe;EAAE,GAAG;EAAsB,GAAG;EAAc,GAAG,CAAC,aAAa,CAAC;CAGxG,MAAM,sBAAsB,cAAc,cAAc,iBAAiB,eAAe,EAAE,CAAC,YAAY,eAAe,CAAC;CAGvH,MAAM,eAAe,cAAc,yBAAyB,eAAe,EAAE,CAAC,eAAe,CAAC;CAG9F,MAAM,wBAAwB,cAAc,wBAAwB,cAAc,mBAAmB,qBAAqB,EAAE,CAAC,mBAAmB,sBAAsB,aAAa,CAAC;CAEpL,MAAM,WAAW,wBAAwB;CACzC,MAAM,SAAS,OAAO,mBAAmB,KAAK,UAAU,CAAC,GAAG;CAE5D,MAAM,sBAAsB,cAAsB;AAChD,MAAI,CAAC,MAAM;AACT,oBAAiB,UAAU;AAC3B;;EAIF,MAAM,UAAU,IAAI,KAAK,KAAK;EAC9B,MAAM,eAAe,QAAQ,UAAU;AAGvC,MAFsB,mBAAmB,aAExB,KAAK,WAAW;GAE/B,MAAM,aAAa,cAAc,OAAO,KAAK;AAC7C,WAAQ,SAAS,eAAe,WAAW;AAC3C,YAAS,QAAQ;;AAGnB,mBAAiB,UAAU;;AAG7B,QACE,qBAAC,OAAD;EAAK,cAAY,WAAW,mBAAmB,mBAAmB,mBAAmB;EAAkB,WAAW,GAAG,kCAAkC,UAAU;EAAE,aAAU;EAAc,eAAY;EAAuB,MAAK;EAAQ,GAAI;YAA/O;GACE,oBAAC,eAAD;IACE,cAAY,WAAW,mBAAmB,UAAU,mBAAmB;IACvE,WAAU;IACV,eAAY;IACN;IACN,QAAQ;IACR,oBAAoB,UAAU,SAAS,OAAO;IAC9C,QAAQ,WAAW,SAAY;IAC/B,QAAQ,WAAW,UAAU;IAC7B,KAAK;IACL,SAAS;IACT,cAAc;IACd;GAEF,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;cAAc;IAE1C;GAEP,oBAAC,eAAD;IACE,cAAY,mBAAmB;IAC/B,WAAU;IACV,eAAY;IACN;IACN,QAAQ;IACR,mBAAmB,QAAQ,SAAS,OAAO;IAC3C,cAAc,CAAC,iBAAiB,UAAU,SAAS,OAAO,GAAG;IAC7D,QAAQ,WAAW,SAAY;IAC/B,QAAO;IACP,KAAK;IACL,SAAS;IACT,cAAc;IACd;GAED,CAAC,YAAY,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,QAAQ;IAAc,mBAAmB,UAAU,SAAS,OAAO;IAAE,gBAAgB;IAA4B;IAAQ,KAAK;IAAa;GACzM;;;AAGV,WAAW,cAAc"}

package/dist/DateTimePicker.d.ts

@@ -1,33 +1,58 @@
-import { ComponentProps } from 'react';
-import { Locale } from 'react-day-picker';
-import { CalendarProps } from './Calendar';
-import { HourFormat, TimePickerTranslations } from './DateTimeUtils';
-export interface DateTimePickerProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {
-    calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'disablePastDates' | 'locale'>;
-    defaultValue?: Date;
-    disabled?: boolean;
-    disablePastDates?: boolean;
-    errorMessage?: string | string[] | Record<string, unknown> | null;
-    hourFormat?: HourFormat;
-    label?: string;
-    locale?: Partial<Locale>;
-    onChange?: (date: Date | undefined) => void;
-    showTimePicker?: boolean;
-    state?: 'default' | 'disabled' | 'error';
-    timeLocale?: string;
-    /** Override translation strings for time picker ARIA labels */
-    timeTranslations?: Partial<TimePickerTranslations>;
-    value?: Date;
+'use client';
+import { Calendar, CalendarProps } from "./DateTimePicker/Calendar.js";
+import { DEFAULT_TRANSLATIONS, DateTimeConfigSchema, HourFormat, HourFormatSchema, PICKER_TYPES, Period, PeriodLabels, PeriodSchema, TIME_BOUNDS, TimePickerConfig, TimePickerTranslations, TimePickerType, TimePickerTypeSchema, TimeValue, TimeValueSchema, convert12HourTo24Hour, detectHourFormat, display12HourValue, formatSelectPeriodLabel, formatTimeNumber, getAriaLabel, getAriaValueMinMax, getAriaValueNow, getArrowByType, getDateByType, getLocalizedPeriodLabel, getLocalizedPeriodLabels, getPeriodFromHours, getResolvedLocale, getValid12Hour, getValidArrow12Hour, getValidArrowHour, getValidArrowMinute, getValidArrowNumber, getValidHour, getValidMinute, getValidNumber, isValid12Hour, isValidHour, isValidMinute, set12Hours, setDateByType, setHours, setMinutes } from "./DateTimePicker/DateTimeUtils.js";
+import { DateTimeDisplayInput } from "./DateTimePicker/DateTimeDisplayInput.js";
+import { DateTimeInput } from "./DateTimePicker/DateTimeInput.js";
+import { TimePeriodSelect } from "./DateTimePicker/TimePeriodSelect.js";
+import { TimePicker } from "./DateTimePicker/TimePicker.js";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Locale, Locale as Locale$1 } from "react-day-picker";
+
+//#region src/components/DateTimePicker/DateTimePicker.d.ts
+interface DateTimePickerProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {
+  calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'disablePastDates' | 'locale'>;
+  defaultValue?: Date;
+  disabled?: boolean;
+  disablePastDates?: boolean;
+  errorMessage?: string | string[] | Record<string, unknown> | null;
+  hourFormat?: HourFormat;
+  label?: string;
+  locale?: Partial<Locale$1>;
+  messageReserveLines?: number;
+  messageReserveSpace?: boolean;
+  onChange?: (date: Date | undefined) => void;
+  showTimePicker?: boolean;
+  state?: 'default' | 'disabled' | 'error';
+  timeLocale?: string;
+  /** Override translation strings for time picker ARIA labels */
+  timeTranslations?: Partial<TimePickerTranslations>;
+  value?: Date;
 }
-export declare const DateTimePicker: {
-    ({ calendarProps, className, defaultValue, disabled, disablePastDates, errorMessage, hourFormat, label, locale, onChange, showTimePicker, state, timeLocale, timeTranslations, value, id, ...props }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { Calendar } from './Calendar';
-export { DateTimeDisplayInput } from './DateTimeDisplayInput';
-export { DateTimeInput } from './DateTimeInput';
-export { TimePeriodSelect } from './TimePeriodSelect';
-export { TimePicker } from './TimePicker';
-export * from './DateTimeUtils';
-export { type Locale } from 'react-day-picker';
+declare function DateTimePicker({
+  calendarProps,
+  className,
+  defaultValue,
+  disabled,
+  disablePastDates,
+  errorMessage,
+  hourFormat,
+  label,
+  locale,
+  messageReserveLines,
+  messageReserveSpace,
+  onChange,
+  showTimePicker,
+  state,
+  timeLocale,
+  timeTranslations,
+  value,
+  id,
+  ...props
+}: DateTimePickerProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace DateTimePicker {
+  var displayName: string;
+}
+//#endregion
+export { Calendar, DEFAULT_TRANSLATIONS, DateTimeConfigSchema, DateTimeDisplayInput, DateTimeInput, DateTimePicker, DateTimePickerProps, HourFormat, HourFormatSchema, type Locale, PICKER_TYPES, Period, PeriodLabels, PeriodSchema, TIME_BOUNDS, TimePeriodSelect, TimePicker, TimePickerConfig, TimePickerTranslations, TimePickerType, TimePickerTypeSchema, TimeValue, TimeValueSchema, convert12HourTo24Hour, detectHourFormat, display12HourValue, formatSelectPeriodLabel, formatTimeNumber, getAriaLabel, getAriaValueMinMax, getAriaValueNow, getArrowByType, getDateByType, getLocalizedPeriodLabel, getLocalizedPeriodLabels, getPeriodFromHours, getResolvedLocale, getValid12Hour, getValidArrow12Hour, getValidArrowHour, getValidArrowMinute, getValidArrowNumber, getValidHour, getValidMinute, getValidNumber, isValid12Hour, isValidHour, isValidMinute, set12Hours, setDateByType, setHours, setMinutes };
 //# sourceMappingURL=DateTimePicker.d.ts.map

package/dist/DateTimePicker.d.ts.map

@@ -0,0 +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,KAAA;EACA,MAAA,GAAS,OAAA,CAAQ,QAAA;EACjB,mBAAA;EACA,mBAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;EAClB,cAAA;EACA,KAAA;EACA,UAAA;EARa;EAUb,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,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"}