@autoguru/overdrive 4.47.2 → 4.48.0-next.0

package/dist/components/DateInput/DateInput.css.d.ts

@@ -0,0 +1,3 @@
+export declare const segmentStyle: string;
+export declare const verticalCenterStyle: string;
+//# sourceMappingURL=DateInput.css.d.ts.map

package/dist/components/DateInput/DateInput.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateInput/DateInput.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,QAevB,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAI9B,CAAC"}

package/dist/components/DateInput/DateInput.css.js

@@ -0,0 +1,30 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/DateInput/DateInput.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { cssLayerComponent } from "../../styles/layers.css.js";
+import { selectors } from "../../styles/selectors.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+export const segmentStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      fontVariantNumeric: 'tabular-nums',
+      userSelect: 'none',
+      selectors: {
+        [selectors.focusVisible]: {
+          outlineOffset: '3px'
+        },
+        '&:nth-child(even)': {
+          padding: '0 2.5px'
+        }
+      }
+    }
+  }
+}, "segmentStyle");
+export const verticalCenterStyle = sprinkles({
+  alignSelf: 'center',
+  display: 'flex',
+  justifyContent: 'center'
+});
+__vanilla_filescope__.endFileScope();

package/dist/components/DateInput/DateInput.d.ts

@@ -1,3 +1,47 @@
-import * as React from 'react';
-export declare const DateInput: React.ForwardRefExoticComponent<Partial<Pick<HTMLInputElement, "min" | "max">> & import("../private/InputBase/withEnhancedInput").EnhanceInputPrimitiveProps<HTMLInputElement> & import("../private/InputBase/withEnhancedInput").EventHandlers<HTMLInputElement> & import("../private/InputBase/withEnhancedInput").ValidationProps & React.RefAttributes<HTMLInputElement>>;
+import React from 'react';
+import { type DatePickerProps } from '../DatePicker/DatePicker';
+type FilteredDatePickerProps = Pick<DatePickerProps, 'calendarOptions' | 'lang'>;
+/**
+ * Input component for structured date entry with integrated calendar date picker.
+ *
+ * ## Dates and internationalization
+ * - Uses ISO date strings (YYYY-MM-DD) for `value`, `min`, and `max`
+ * - Extends DatePicker text values via `lang` props
+ * - Also extends Calendar options including calendar-specific text values via `calendarOptions` prop
+ * - Advanced i18n and localization handled by [React Aria I18Provider](https://react-spectrum.adobe.com/react-aria/I18nProvider.html)
+ * - Read more about [International calendars](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#international-calendars)
+ * - Date formatting helper available in `...utils/dateFormat.ts` or use `@internationalized/date` utils
+ *
+ * **Note:** By default, past dates are allowed. To restrict past date selection, use
+ * the `calendarOptions` prop: `<DateInput calendarOptions={{ allowPastDate: false }} />`
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateInput
+ *   value="2025-10-15"
+ *   onChange={(e) => setValue(e.target.value)}
+ * />
+ *
+ * // With restrictions
+ * <DateInput
+ *   min="2025-01-01"
+ *   max="2025-12-31"
+ *   calendarOptions={{ allowPastDate: false }}
+ * />
+ *
+ * // With translated text values
+ * <DateInput
+ *   lang={{ openCalendar: 'kalendar offnen' }}
+ *   calendarOptions={{
+ *     lang: {
+ *       prevMonthAriaLabel: 'nachster monat',
+ *       nextMonthAriaLabel: 'vorheriger monat'
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+export declare const DateInput: React.ForwardRefExoticComponent<FilteredDatePickerProps & Partial<Pick<HTMLInputElement, "min" | "max">> & import("../private/InputBase/withEnhancedInput").EnhanceInputPrimitiveProps<HTMLInputElement> & import("../private/InputBase/withEnhancedInput").EventHandlers<HTMLInputElement> & import("../private/InputBase/withEnhancedInput").ValidationProps & React.RefAttributes<HTMLInputElement>>;
+export {};
 //# sourceMappingURL=DateInput.d.ts.map

package/dist/components/DateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../lib/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,SAAS,+WAgCrB,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../lib/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;AAWf,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAM5E,KAAK,uBAAuB,GAAG,IAAI,CAClC,eAAe,EACf,iBAAiB,GAAG,MAAM,CAC1B,CAAC;AAmCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,SAAS,yYAmJrB,CAAC"}

package/dist/components/DateInput/DateInput.js

@@ -1,33 +1,207 @@
 "use strict";
 
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["field", "eventHandlers", "validation", "isLoading", "suffixed", "prefixed", "size"];
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["defaultValue", "id", "ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { warning } from '@autoguru/utilities';
-import * as React from 'react';
-import { Box } from "../Box/Box.js";
+import { GregorianCalendar } from '@internationalized/date';
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDateField, useDateSegment, useLocale } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
+import { useDateInputRef } from "../../hooks/useDateInputRef.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { formatDateValue, safeParseDateString } from "../../utils/dateFormat.js";
+import { DatePicker } from "../DatePicker/DatePicker.js";
+import { inline } from "../Flex/flex.js";
 import { withEnhancedInput } from "../private/InputBase/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const DateInput = withEnhancedInput(_ref => {
-  let {
-      field,
-      eventHandlers,
-      validation,
-      isLoading,
-      suffixed,
-      prefixed,
-      size
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  process.env.NODE_ENV !== "production" ? warning(field.value !== '', 'Date Input does not support empty values.') : void 0;
-  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    as: "input"
-  }, eventHandlers), field), rest), {}, {
-    autoComplete: "off",
-    type: "date"
+import * as styles from "./DateInput.css.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function createCalendar(identifier) {
+  if (identifier === 'gregory') {
+    return new GregorianCalendar();
+  }
+  throw new Error(`Unsupported calendar configured ${identifier}`);
+}
+const defaultCalendarOptions = {
+  allowPastDate: true
+};
+const DateSegment = /*#__PURE__*/React.memo(({
+  segment,
+  state,
+  className
+}) => {
+  const ref = useRef(null);
+  const {
+    segmentProps
+  } = useDateSegment(segment, state, ref);
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, segmentProps), {}, {
+    ref: ref,
+    className: className,
+    "data-placeholder": segment.isPlaceholder || undefined,
+    children: segment.text
+  }));
+});
+DateSegment.displayName = 'DateInput.DateSegment';
+
+/**
+ * Input component for structured date entry with integrated calendar date picker.
+ *
+ * ## Dates and internationalization
+ * - Uses ISO date strings (YYYY-MM-DD) for `value`, `min`, and `max`
+ * - Extends DatePicker text values via `lang` props
+ * - Also extends Calendar options including calendar-specific text values via `calendarOptions` prop
+ * - Advanced i18n and localization handled by [React Aria I18Provider](https://react-spectrum.adobe.com/react-aria/I18nProvider.html)
+ * - Read more about [International calendars](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#international-calendars)
+ * - Date formatting helper available in `...utils/dateFormat.ts` or use `@internationalized/date` utils
+ *
+ * **Note:** By default, past dates are allowed. To restrict past date selection, use
+ * the `calendarOptions` prop: `<DateInput calendarOptions={{ allowPastDate: false }} />`
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateInput
+ *   value="2025-10-15"
+ *   onChange={(e) => setValue(e.target.value)}
+ * />
+ *
+ * // With restrictions
+ * <DateInput
+ *   min="2025-01-01"
+ *   max="2025-12-31"
+ *   calendarOptions={{ allowPastDate: false }}
+ * />
+ *
+ * // With translated text values
+ * <DateInput
+ *   lang={{ openCalendar: 'kalendar offnen' }}
+ *   calendarOptions={{
+ *     lang: {
+ *       prevMonthAriaLabel: 'nachster monat',
+ *       nextMonthAriaLabel: 'vorheriger monat'
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+export const DateInput = withEnhancedInput(({
+  calendarOptions,
+  eventHandlers,
+  field,
+  lang,
+  max,
+  min,
+  size
+}) => {
+  const {
+      defaultValue,
+      id,
+      ref
+    } = field,
+    filteredProps = _objectWithoutProperties(field, _excluded);
+  const {
+    disabled,
+    name,
+    onChange,
+    value
+  } = field;
+  const datePickerRef = useRef(null);
+  const dateFieldRef = useRef(null);
+  const {
+    locale
+  } = useLocale();
+  const [selectedDate, setSelectedDate] = useState(value ? safeParseDateString(value) : null);
+  const minMaxValues = {
+    minValue: min ? safeParseDateString(min) : undefined,
+    maxValue: max ? safeParseDateString(max) : undefined
+  };
+  useEffect(() => {
+    const parsedDate = value ? safeParseDateString(value) : null;
+    setSelectedDate(parsedDate);
+  }, [value]);
+  const handleDateChange = useCallback(date => {
+    setSelectedDate(date);
+    const dateString = formatDateValue(date);
+
+    // Trigger the withEnhancedInput onChange mechanism
+    if (eventHandlers.onChange && typeof onChange === 'function') {
+      // Create a synthetic event for compatibility with withEnhancedInput
+      const event = {
+        currentTarget: {
+          value: dateString
+        },
+        target: {
+          value: dateString
+        }
+      };
+      eventHandlers.onChange(event);
+    }
+  }, [eventHandlers, onChange]);
+  const createSyntheticHandler = useCallback(handler => {
+    if (!handler) return;
+    return e => {
+      const syntheticEvent = _objectSpread(_objectSpread({}, e), {}, {
+        target: dateFieldRef.current,
+        currentTarget: dateFieldRef.current
+      });
+      handler(syntheticEvent);
+    };
+  }, []);
+  const handleFocus = useMemo(() => createSyntheticHandler(eventHandlers.onFocus), [createSyntheticHandler, eventHandlers.onFocus]);
+  const handleBlur = useMemo(() => createSyntheticHandler(eventHandlers.onBlur), [createSyntheticHandler, eventHandlers.onBlur]);
+  const hookProps = _objectSpread(_objectSpread({}, filteredProps), {}, {
+    isDisabled: field.disabled,
+    onBlur: handleBlur,
+    onChange: handleDateChange,
+    onFocus: handleFocus,
+    value: selectedDate
+  }, minMaxValues);
+  const dateFieldState = useDateFieldState(_objectSpread(_objectSpread({}, hookProps), {}, {
+    locale,
+    createCalendar
   }));
+  const {
+    fieldProps
+  } = useDateField(hookProps, dateFieldState, dateFieldRef);
+  useDateInputRef(ref, datePickerRef, dateFieldRef);
+  const handleDatePickerChange = useCallback(dateString => {
+    const parsedDate = dateString ? safeParseDateString(dateString) : null;
+    handleDateChange(parsedDate);
+  }, [handleDateChange]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: clsx(field.className, inline({
+      gap: '2',
+      spaceBetween: true
+    }), disabled && sprinkles({
+      colour: 'muted'
+    })),
+    children: [/*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, fieldProps), {}, {
+      className: styles.verticalCenterStyle,
+      ref: dateFieldRef,
+      children: dateFieldState.segments.map((segment, idx) => {
+        var _segment$minValue;
+        return /*#__PURE__*/_jsx(DateSegment, {
+          className: styles.segmentStyle,
+          segment: segment,
+          state: dateFieldState
+        }, `${segment.type}-${(_segment$minValue = segment.minValue) !== null && _segment$minValue !== void 0 ? _segment$minValue : idx}`);
+      })
+    })), /*#__PURE__*/_jsx(DatePicker, {
+      className: styles.verticalCenterStyle,
+      ref: datePickerRef,
+      id: id,
+      name: name,
+      value: formatDateValue(selectedDate),
+      calendarOptions: _objectSpread(_objectSpread(_objectSpread({}, defaultCalendarOptions), calendarOptions), minMaxValues),
+      disabled: disabled,
+      lang: lang,
+      size: size,
+      onChange: handleDatePickerChange
+    })]
+  });
 }, {
   primitiveType: 'date'
-});
+});
+DateInput.displayName = 'DateInput';

package/dist/components/DatePicker/DatePicker.d.ts

@@ -81,7 +81,7 @@ export interface DatePickerProps extends TestIdProp {
  *
  * ## Internationalization
  * - Override text values via `lang={{ openCalendar: 'open calendar' }}`
- * - Calendar options including `lang`can be passed via `calendarOptions` prop
+ * - Calendar options including `lang` can be passed via `calendarOptions` prop
  * - Date formatting helper available in `...utils/dateFormat.ts` or use `@internationalized/date` utils
  * - Advanced i18n and localization handled by [React Aria I18Provider](https://react-spectrum.adobe.com/react-aria/I18nProvider.html)
  * - Read more about [International calendars](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#international-calendars)

package/dist/components/DatePicker/DatePicker.js

@@ -55,7 +55,7 @@ const parseDateString = dateString => {
  *
  * ## Internationalization
  * - Override text values via `lang={{ openCalendar: 'open calendar' }}`
- * - Calendar options including `lang`can be passed via `calendarOptions` prop
+ * - Calendar options including `lang` can be passed via `calendarOptions` prop
  * - Date formatting helper available in `...utils/dateFormat.ts` or use `@internationalized/date` utils
  * - Advanced i18n and localization handled by [React Aria I18Provider](https://react-spectrum.adobe.com/react-aria/I18nProvider.html)
  * - Read more about [International calendars](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#international-calendars)

package/dist/components/OptionList/OptionList.d.ts

@@ -60,20 +60,20 @@ export declare const OptionList: {
             onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
             onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
             onClick?: ((e: React.MouseEvent<import("@react-types/shared").FocusableElement>) => void) | undefined;
-            excludeFromTabOrder?: boolean | undefined;
             isDisabled?: boolean | undefined;
-            isRequired?: boolean | undefined;
-            isInvalid?: boolean | undefined;
-            validationState?: import("react-stately").ValidationState | undefined;
-            onFocusChange?: ((isFocused: boolean) => void) | undefined;
-            isReadOnly?: boolean | undefined;
             onPress?: ((e: import("react-aria").PressEvent) => void) | undefined;
             onPressStart?: ((e: import("react-aria").PressEvent) => void) | undefined;
             onPressEnd?: ((e: import("react-aria").PressEvent) => void) | undefined;
             onPressChange?: ((isPressed: boolean) => void) | undefined;
             onPressUp?: ((e: import("react-aria").PressEvent) => void) | undefined;
-            validationBehavior?: "aria" | "native" | undefined;
+            onFocusChange?: ((isFocused: boolean) => void) | undefined;
+            excludeFromTabOrder?: boolean | undefined;
             validate?: ((value: boolean) => import("@react-types/shared").ValidationError | true | null | undefined) | undefined;
+            isReadOnly?: boolean | undefined;
+            isRequired?: boolean | undefined;
+            isInvalid?: boolean | undefined;
+            validationState?: import("react-stately").ValidationState | undefined;
+            validationBehavior?: "aria" | "native" | undefined;
         }): React.JSX.Element;
         displayName: string;
     };

package/dist/components/private/InputBase/withEnhancedInput.d.ts

@@ -1,6 +1,7 @@
 import { IconType } from '@autoguru/icons';
 import React, { type ChangeEventHandler, type ComponentProps, type ComponentType, type FocusEventHandler, type ForwardedRef, type InputHTMLAttributes, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type Ref, type RefObject } from 'react';
-import { Box } from '../../Box/Box';
+import { type Sprinkles } from '../../../styles/sprinkles.css';
+import type { TestIdProp } from '../../../types';
 import { NotchedBase } from './NotchedBase';
 import type { InputSize } from './withEnhancedInput.css';
 type ElementTypes = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
@@ -15,7 +16,7 @@ export interface EventHandlers<E extends ElementTypes> {
     onMouseLeave?: MouseEventHandler<E>;
     onReset?(): void;
 }
-export interface EnhanceInputPrimitiveProps<E extends ElementTypes> extends NativeAttributes<E>, Pick<ComponentProps<typeof NotchedBase>, 'notch' | 'placeholder' | 'attach' | 'borderMerged' | 'isFocused'>, Pick<ComponentProps<typeof Box>, 'backgroundColour'> {
+export interface EnhanceInputPrimitiveProps<E extends ElementTypes> extends NativeAttributes<E>, Pick<ComponentProps<typeof NotchedBase>, 'notch' | 'placeholder' | 'attach' | 'borderMerged' | 'isFocused'>, Pick<Sprinkles, 'backgroundColour'>, TestIdProp {
     name: string;
     id?: string;
     className?: string;

package/dist/components/private/InputBase/withEnhancedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,KAAK,EAAE,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAEjB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,SAAS,EAGd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,KAAK,YAAY,GAAG,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAC/E,KAAK,gBAAgB,CAAC,CAAC,SAAS,YAAY,IAAI,IAAI,CACnD,mBAAmB,CAAC,CAAC,CAAC,EACtB,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,CACnE,CAAC;AAGF,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,YAAY;IACpD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAEpC,OAAO,CAAC,IAAI,IAAI,CAAC;CACjB;AAGD,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,YAAY,CACjE,SAAQ,gBAAgB,CAAC,CAAC,CAAC,EAC1B,IAAI,CACH,cAAc,CAAC,OAAO,WAAW,CAAC,EAClC,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,cAAc,GAAG,WAAW,CACjE,EACD,IAAI,CAAC,SAAS,EAAE,kBAAkB,CAAC,EACnC,UAAU;IACX,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAGD,MAAM,MAAM,iBAAiB,CAC5B,aAAa,EACb,CAAC,SAAS,YAAY,IACnB,aAAa,GAChB,0BAA0B,CAAC,CAAC,CAAC,GAC7B,aAAa,CAAC,CAAC,CAAC,GAChB,eAAe,CAAC;AAGjB,MAAM,MAAM,qBAAqB,CAAC,aAAa,EAAE,CAAC,SAAS,YAAY,IAAI;IAC1E,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,eAAe,CAAC;IAC5B,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAChC,KAAK,EAAE,IAAI,CACV,0BAA0B,CAAC,CAAC,CAAC,EAC7B,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CACjD,GAAG;QACH,GAAG,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;KAC1D,CAAC;IACF,SAAS,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACnB,GAAG,aAAa,GAChB,IAAI,CACH,cAAc,CAAC,OAAO,WAAW,CAAC,EAClC,QAAQ,GAAG,cAAc,GAAG,WAAW,CACvC,CAAC;AAEH,UAAU,oBAAoB,CAAC,SAAS,GAAG,MAAM;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC5E;AAED,eAAO,MAAM,iBAAiB,GAC7B,aAAa,SAAS,MAAM,GAAG,EAAE,EACjC,CAAC,SAAS,YAAY,GAAG,gBAAgB,EAEzC,mBAAmB,aAAa,CAAC,qBAAqB,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EACzE,mEAMG,oBAAsE,yHAoQxE,CAAC"}

package/dist/components/private/InputBase/withEnhancedInput.js

@@ -2,15 +2,16 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["placeholder", "name", "id", "hintText", "disabled", "className", "isTouched", "isValid", "isLoading", "notch", "reserveHintSpace", "size", "backgroundColour", "value", "onChange", "onReset", "onMouseLeave", "onMouseEnter", "onBlur", "onFocus", "onKeyDown", "prefixIcon", "suffixIcon", "wrapperRef", "autoFocus", "attach", "borderMerged"];
+const _excluded = ["placeholder", "name", "id", "hintText", "disabled", "className", "isTouched", "isValid", "isLoading", "notch", "reserveHintSpace", "size", "backgroundColour", "testId", "value", "onChange", "onReset", "onMouseLeave", "onMouseEnter", "onBlur", "onFocus", "onKeyDown", "prefixIcon", "suffixIcon", "wrapperRef", "autoFocus", "attach", "borderMerged"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { invariant, wrapEvent } from '@autoguru/utilities';
 import clsx from 'clsx';
 import React, { forwardRef, useCallback, useState } from 'react';
-import { sprinkles, elementStyles } from "../../../styles/index.js";
+import { elementStyles } from "../../../styles/elementStyles.js";
+import { sprinkles } from "../../../styles/sprinkles.css.js";
 import { useInputControlledState } from "../../../utils/index.js";
-import { Box } from "../../Box/Box.js";
+import { useBox } from "../../Box/useBox/useBox.js";
 import { Icon } from "../../Icon/Icon.js";
 import { ProgressSpinner } from "../../ProgressSpinner/ProgressSpinner.js";
 import { HintText } from "./HintText.js";
@@ -49,6 +50,7 @@ forwardRef((_ref, ref) => {
       reserveHintSpace = false,
       size = 'medium',
       backgroundColour = 'transparent',
+      testId,
       value: incomingValue = defaultValue || '',
       onChange: incomingOnChange,
       onReset,
@@ -151,11 +153,18 @@ forwardRef((_ref, ref) => {
     pointerEvents: 'none',
     position: 'absolute'
   });
-  return /*#__PURE__*/_jsxs(Box, {
-    width: "full",
-    className: className,
+  const {
+    Component: ComponentRoot,
+    componentProps: rootComponentProps
+  } = useBox({
+    width: 'full',
+    className,
     onMouseEnter: onMouseOver,
     onMouseLeave: onMouseOut,
+    odComponent: `${primitiveType}-input`,
+    testId
+  });
+  return /*#__PURE__*/_jsxs(ComponentRoot, _objectSpread(_objectSpread({}, rootComponentProps), {}, {
     children: [/*#__PURE__*/_jsx(NotchedBase, {
       id: id,
       prefixed: Boolean(prefixIcon),
@@ -172,11 +181,12 @@ forwardRef((_ref, ref) => {
         [derivedColours.colour]: !isEmpty
       }),
       borderColourClassName: derivedColours.borderColour,
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: clsx(styles.inputWrapperSize[size].root[primitiveType], sprinkles({
+          height: 'full',
+          width: 'full'
+        })),
         ref: wrapperRef,
-        className: styles.inputWrapperSize[size].root[primitiveType],
-        width: "full",
-        height: "full",
         children: [prefixIcon ? /*#__PURE__*/_jsx(Icon, {
           icon: prefixIcon,
           size: iconSize,
@@ -198,7 +208,7 @@ forwardRef((_ref, ref) => {
       reserveHintSpace: reserveHintSpace,
       size: size
     }) : null]
-  });
+  }));
 });
 const stateNodeGetter = styles => (isHovered, isActive) => {
   if (isHovered) return styles.hover;

package/dist/hooks/useDateInputRef.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject, type ForwardedRef } from 'react';
+type ElementTypes = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+/**
+ * Custom hook for creating a composite ref that provides HTMLInputElement compatibility
+ * for the DateInput component while maintaining proper focus management for the date field segments.
+ */
+export declare const useDateInputRef: (ref: ForwardedRef<ElementTypes> | RefObject<ElementTypes>, hiddenInputRef: RefObject<HTMLInputElement | null>, dateFieldRef: RefObject<HTMLDivElement | null>) => void;
+export {};
+//# sourceMappingURL=useDateInputRef.d.ts.map

package/dist/hooks/useDateInputRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDateInputRef.d.ts","sourceRoot":"","sources":["../../lib/hooks/useDateInputRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAE/E,KAAK,YAAY,GAAG,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAE/E;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC3B,KAAK,YAAY,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EACzD,gBAAgB,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAClD,cAAc,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,SAuC9C,CAAC"}

package/dist/hooks/useDateInputRef.js

@@ -0,0 +1,47 @@
+"use strict";
+
+import { useImperativeHandle } from 'react';
+/**
+ * Custom hook for creating a composite ref that provides HTMLInputElement compatibility
+ * for the DateInput component while maintaining proper focus management for the date field segments.
+ */
+export const useDateInputRef = (ref, hiddenInputRef, dateFieldRef) => {
+  useImperativeHandle(ref, () => {
+    const hiddenInput = hiddenInputRef.current;
+    const dateField = dateFieldRef.current;
+    if (!hiddenInput) return {};
+
+    // Use Proxy for cleaner implementation that inherits all HTMLInputElement properties
+    return new Proxy(hiddenInput, {
+      get(target, prop) {
+        switch (prop) {
+          case 'focus':
+            {
+              return options => {
+                var _ref;
+                const firstSegment = dateField === null || dateField === void 0 ? void 0 : dateField.querySelector('[role="spinbutton"]');
+                (_ref = firstSegment || dateField) === null || _ref === void 0 ? void 0 : _ref.focus(options);
+              };
+            }
+          case 'click':
+            {
+              return () => {
+                var _ref2;
+                const firstSegment = dateField === null || dateField === void 0 ? void 0 : dateField.querySelector('[role="spinbutton"]');
+                (_ref2 = firstSegment || dateField) === null || _ref2 === void 0 ? void 0 : _ref2.click();
+              };
+            }
+          case 'type':
+            {
+              return 'date';
+            }
+          default:
+            {
+              // Pass through to the hidden input for all other properties
+              return target[prop];
+            }
+        }
+      }
+    });
+  }, []);
+};

package/dist/utils/dateFormat.d.ts

@@ -5,6 +5,18 @@ import { type DateValue } from '@internationalized/date';
  * @returns boolean
  */
 export declare function isToday(date: DateValue | string | null | undefined): boolean;
+/**
+ * Safely parses a date string into a DateValue
+ * @param dateString - ISO date string to parse
+ * @returns DateValue or null if parsing fails
+ */
+export declare function safeParseDateString(dateString: string): DateValue | null;
+/**
+ * Formats a DateValue to its string representation
+ * @param date - DateValue or null
+ * @returns String representation of the date or empty string for null
+ */
+export declare function formatDateValue(date: DateValue | null): string;
 /**
  * Formats a date value or ISO date string for display, with special handling for "today"
  *

package/dist/utils/dateFormat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateFormat.d.ts","sourceRoot":"","sources":["../../lib/utils/dateFormat.ts"],"names":[],"mappings":"AAAA,OAAO,EAIN,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AAEjC;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,WAUlE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,oBAAoB,CACnC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAC3C,MAAM,GAAE,IAAI,CAAC,qBAAqB,CAAC,WAAW,CAAY,EAC1D,OAAO,GAAE,IAAI,CAAC,eAAyB,GACrC,MAAM,CAmBR"}
+{"version":3,"file":"dateFormat.d.ts","sourceRoot":"","sources":["../../lib/utils/dateFormat.ts"],"names":[],"mappings":"AAAA,OAAO,EAIN,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AAEjC;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,WAUlE;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAOxE;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,CAE9D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,oBAAoB,CACnC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAC3C,MAAM,GAAE,IAAI,CAAC,qBAAqB,CAAC,WAAW,CAAY,EAC1D,OAAO,GAAE,IAAI,CAAC,eAAyB,GACrC,MAAM,CAmBR"}

package/dist/utils/dateFormat.js

@@ -19,6 +19,30 @@ export function isToday(date) {
   return date.compare(today(getLocalTimeZone())) === 0;
 }
 
+/**
+ * Safely parses a date string into a DateValue
+ * @param dateString - ISO date string to parse
+ * @returns DateValue or null if parsing fails
+ */
+export function safeParseDateString(dateString) {
+  if (!dateString) return null;
+  try {
+    return parseDate(dateString);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Formats a DateValue to its string representation
+ * @param date - DateValue or null
+ * @returns String representation of the date or empty string for null
+ */
+export function formatDateValue(date) {
+  var _date$toString;
+  return (_date$toString = date === null || date === void 0 ? void 0 : date.toString()) !== null && _date$toString !== void 0 ? _date$toString : '';
+}
+
 /**
  * Formats a date value or ISO date string for display, with special handling for "today"
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.47.2",
+	"version": "4.48.0-next.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",