@autoguru/overdrive 4.48.0 → 4.50.0

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Calendar/Calendar.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,QAM5B,CAAC;AAEH,eAAO,MAAM,aAAa,QAQxB,CAAC;AAIH,eAAO,MAAM,SAAS,QAmCpB,CAAC;AAIH,eAAO,MAAM,WAAW,QAoCtB,CAAC;AAEH,eAAO,MAAM,OAAO,QAMlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAGH,eAAO,MAAM,UAAU,QAGrB,CAAC"}
+{"version":3,"file":"Calendar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Calendar/Calendar.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,iBAAiB,QAM5B,CAAC;AAEH,eAAO,MAAM,aAAa,QAQxB,CAAC;AAIH,eAAO,MAAM,SAAS,QAoCpB,CAAC;AAIH,eAAO,MAAM,WAAW,QAoCtB,CAAC;AAEH,eAAO,MAAM,OAAO,QAMlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAGH,eAAO,MAAM,UAAU,QAGrB,CAAC"}

package/dist/components/Calendar/Calendar.css.js

@@ -27,10 +27,11 @@ export const calendarStyle = style([sprinkles({
 
 export const cellStyle = style([sprinkles({
   alignItems: 'center',
+  borderRadius: 'md',
   display: 'flex',
+  mx: 'auto',
   justifyContent: 'center',
-  size: '7',
-  borderRadius: 'md'
+  size: '7'
 }), {
   '@layer': {
     [cssLayerComponent]: {
@@ -101,8 +102,7 @@ export const thStyle = style({
   }
 }, "thStyle");
 export const tdStyle = sprinkles({
-  padding: '1',
-  textAlign: 'center'
+  padding: '1'
 });
 
 // === Heading styles

package/dist/components/Calendar/Calendar.d.ts

@@ -5,7 +5,7 @@ declare const defaultEnglish: {
     readonly nextLabel: "Next month";
     readonly prevLabel: "Previous month";
 };
-type LanguageEntries = Partial<Record<keyof typeof defaultEnglish, string>>;
+export type CalendarTextContent = Record<keyof typeof defaultEnglish, string>;
 export interface CalendarProps extends TestIdProp {
     /**
      * Calendar props passed through to the react-aria hook
@@ -27,7 +27,7 @@ export interface CalendarProps extends TestIdProp {
     /**
      * Language content override
      */
-    lang?: LanguageEntries;
+    lang?: Partial<CalendarTextContent>;
 }
 /**
  * Calendar component for selecting a date using react-aria. Supports full localization and accessibility.
@@ -36,13 +36,6 @@ export interface CalendarProps extends TestIdProp {
  * This component implements the react-aria `useCalendar` hook and supports controlled state
  * ([docs](https://react-spectrum.adobe.com/react-aria/useCalendar.html))
  *
- * ## Features
- * - Full keyboard navigation and screen reader support
- * - Localization and internationalization
- * - Configurable date restrictions (past dates, specific dates, date ranges)
- * - Custom default values and date ranges
- * - Flexible styling and theming
- *
  * ## Working with dates
  *  - Use `parseDate('YYYY-MM-DD')` from `@internationalized/date` to create
  *    DateValue objects.
@@ -50,7 +43,7 @@ export interface CalendarProps extends TestIdProp {
  *    date, and `date.add({ days: 7, months: 1 })` for date arithmetic.
  *
  * ## Date Restrictions
- * You can restrict date selection using the `calendar` prop with react-aria calendar properties:
+ * You can restrict date selection using the `calendarOptions` prop with react-aria calendar properties:
  * - `minValue` / `maxValue`: Define selectable date range
  * - `isDateUnavailable`: Function to disable specific dates
  * - `allowPastDate` prop: Convenient way to allow/disallow past dates

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../lib/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAGN,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS9C,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX,KAAK,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,aAAc,SAAQ,UAAU;IAChD;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACpE;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACvB;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,QAAQ;kEAMlB,aAAa;;CA8Df,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../lib/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAGN,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAS9C,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,OAAO,cAAc,EAAE,MAAM,CAAC,CAAC;AAE9E,MAAM,WAAW,aAAc,SAAQ,UAAU;IAChD;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACpE;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACpC;AAUD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,QAAQ;kEAMlB,aAAa;;CAgEf,CAAC"}

package/dist/components/Calendar/Calendar.js

@@ -35,13 +35,6 @@ function createCalendar(identifier) {
  * This component implements the react-aria `useCalendar` hook and supports controlled state
  * ([docs](https://react-spectrum.adobe.com/react-aria/useCalendar.html))
  *
- * ## Features
- * - Full keyboard navigation and screen reader support
- * - Localization and internationalization
- * - Configurable date restrictions (past dates, specific dates, date ranges)
- * - Custom default values and date ranges
- * - Flexible styling and theming
- *
  * ## Working with dates
  *  - Use `parseDate('YYYY-MM-DD')` from `@internationalized/date` to create
  *    DateValue objects.
@@ -49,7 +42,7 @@ function createCalendar(identifier) {
  *    date, and `date.add({ days: 7, months: 1 })` for date arithmetic.
  *
  * ## Date Restrictions
- * You can restrict date selection using the `calendar` prop with react-aria calendar properties:
+ * You can restrict date selection using the `calendarOptions` prop with react-aria calendar properties:
  * - `minValue` / `maxValue`: Define selectable date range
  * - `isDateUnavailable`: Function to disable specific dates
  * - `allowPastDate` prop: Convenient way to allow/disallow past dates
@@ -67,12 +60,12 @@ export const Calendar = ({
   onChange,
   testId
 }) => {
-  var _lang$prevLabel, _lang$nextLabel;
   const selectedDate = useRef(null);
   const hasValue = !!(calendarOptions !== null && calendarOptions !== void 0 && calendarOptions.value) || !!(calendarOptions !== null && calendarOptions !== void 0 && calendarOptions.defaultValue);
   const fallbackDefaultValue = hasValue ? {} : {
     defaultValue: today(getLocalTimeZone())
   };
+  const textValues = _objectSpread(_objectSpread({}, defaultEnglish), lang);
   const calendarComponentProps = _objectSpread(_objectSpread({
     firstDayOfWeek: FIRST_DAY_OF_WEEK,
     minValue: allowPastDate ? undefined : today(getLocalTimeZone()),
@@ -105,7 +98,7 @@ export const Calendar = ({
     children: [/*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, calendarProps), {}, {
       className: calendarStyle,
       children: [/*#__PURE__*/_jsx(CalendarButton, _objectSpread(_objectSpread({}, prevButtonProps), {}, {
-        "aria-label": (_lang$prevLabel = lang === null || lang === void 0 ? void 0 : lang.prevLabel) !== null && _lang$prevLabel !== void 0 ? _lang$prevLabel : defaultEnglish.prevLabel,
+        "aria-label": textValues.prevLabel,
         children: /*#__PURE__*/_jsx(Icon, {
           icon: ChevronLeftIcon,
           size: "medium"
@@ -114,7 +107,7 @@ export const Calendar = ({
         className: titleStyle,
         children: calendarTitle
       }), /*#__PURE__*/_jsx(CalendarButton, _objectSpread(_objectSpread({}, nextButtonProps), {}, {
-        "aria-label": (_lang$nextLabel = lang === null || lang === void 0 ? void 0 : lang.nextLabel) !== null && _lang$nextLabel !== void 0 ? _lang$nextLabel : defaultEnglish.nextLabel,
+        "aria-label": textValues.nextLabel,
         children: /*#__PURE__*/_jsx(Icon, {
           icon: ChevronRightIcon,
           size: "medium"

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

@@ -98,7 +98,7 @@ export interface DatePickerProps extends TestIdProp {
  * // Uncontrolled component with default value
  * <DatePicker
  *   name="eventDate"
- *   defaultValue="2025-03-15"
+ *   defaultValue={today(getLocalTimeZone()} // or an ISO date string YYYY-MM-DD
  *   onChange={(isoDate) => console.log('Selected date:', isoDate)}
  * />
  *
@@ -108,10 +108,16 @@ export interface DatePickerProps extends TestIdProp {
  *   name="bookingDate"
  *   value={selectedDate}
  *   valueLabel="Select a date"
- *   onChange={(isoDate) => setSelectedDate(isoDate)}
+ *   onChange={(isoDate) => {
+ *     setSelectedDate(isoDate);
+ *     if (isToday(isoDate)) {
+ *       setValueLabel('Today');
+ *     } else {
+ *       setValueLabel(displayFormattedDate(iseDate));
+ *     }
+ *   }}
  *   calendarOptions={{
  *     allowPastDate: false,
- *     weekdayFormat: 'short',
  *   }}
  * />
  *
@@ -121,7 +127,7 @@ export interface DatePickerProps extends TestIdProp {
  *   name="startDate"
  *   useNativePicker
  *   defaultValue="2025-03-12"
- *   onChange={(isoDate) => console.log('Native picked date:', isoDate)}
+ *   onChange={(isoDate) => console.log('Date input:', isoDate)}
  * />
  */
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAQzD,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAInD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAS3D,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9C,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,KAAK,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,eAAgB,SAAQ,UAAU;IAClD;;OAEG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACvB;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,UAAU,0FA6LtB,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,KAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAInD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAU3D,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9C,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,KAAK,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,eAAgB,SAAQ,UAAU;IAClD;;OAEG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACvB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,UAAU,0FA6ItB,CAAC"}

package/dist/components/DatePicker/DatePicker.js

@@ -6,11 +6,11 @@ const _excluded = ["calendarOptions", "className", "defaultValue", "disabled", "
 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 { CalendarIcon } from '@autoguru/icons';
-import { getLocalTimeZone, parseDate, today } from '@internationalized/date';
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useMemo, useState, forwardRef } from 'react';
+import React, { useMemo, forwardRef } from 'react';
 import { elementStyles } from "../../styles/elementStyles.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
+import { formatDateValue, safeParseDateString } from "../../utils/dateFormat.js";
 import { Calendar } from "../Calendar/index.js";
 import { Icon } from "../Icon/Icon.js";
 import { PopoverTrigger } from "../Popover/index.js";
@@ -18,6 +18,7 @@ import { ProgressSpinner } from "../ProgressSpinner/ProgressSpinner.js";
 import { Text } from "../Text/Text.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import * as styles from "./DatePicker.css.js";
+import { useCalendarPopover } from "./hooks/useCalendarPopover.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultEnglish = {
   openCalendar: 'open calendar'
@@ -27,17 +28,6 @@ const textSizeMap = {
   medium: '3',
   large: '5'
 };
-const formatDateToString = date => {
-  if (!date) return '';
-  return date.toString(); // ISO format: YYYY-MM-DD to match native input
-};
-const parseDateString = dateString => {
-  try {
-    return parseDate(dateString);
-  } catch {
-    return null;
-  }
-};
 
 /**
  * The DatePicker has been updated to render the Calendar component with a Popover while
@@ -64,7 +54,7 @@ const parseDateString = dateString => {
  * // Uncontrolled component with default value
  * <DatePicker
  *   name="eventDate"
- *   defaultValue="2025-03-15"
+ *   defaultValue={today(getLocalTimeZone()} // or an ISO date string YYYY-MM-DD
  *   onChange={(isoDate) => console.log('Selected date:', isoDate)}
  * />
  *
@@ -74,10 +64,16 @@ const parseDateString = dateString => {
  *   name="bookingDate"
  *   value={selectedDate}
  *   valueLabel="Select a date"
- *   onChange={(isoDate) => setSelectedDate(isoDate)}
+ *   onChange={(isoDate) => {
+ *     setSelectedDate(isoDate);
+ *     if (isToday(isoDate)) {
+ *       setValueLabel('Today');
+ *     } else {
+ *       setValueLabel(displayFormattedDate(iseDate));
+ *     }
+ *   }}
  *   calendarOptions={{
  *     allowPastDate: false,
- *     weekdayFormat: 'short',
  *   }}
  * />
  *
@@ -87,7 +83,7 @@ const parseDateString = dateString => {
  *   name="startDate"
  *   useNativePicker
  *   defaultValue="2025-03-12"
- *   onChange={(isoDate) => console.log('Native picked date:', isoDate)}
+ *   onChange={(isoDate) => console.log('Date input:', isoDate)}
  * />
  */
 export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -111,31 +107,22 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       valueLabel
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
-  const isControlled = value !== undefined;
-  const [selectedDate, setSelectedDate] = useState(() => {
-    const initialValue = isControlled ? value : defaultValue;
-    return initialValue ? parseDateString(initialValue) : null;
-  });
-  const [popoverState, setPopoverState] = useState(null);
-
-  // Sync external value changes (only for controlled components)
-  useEffect(() => {
-    if (isControlled) {
-      const parsedDate = value ? parseDateString(value) : null;
-      setSelectedDate(parsedDate);
+  const dateValue = value ? safeParseDateString(value) : undefined;
+  const dateDefaultValue = defaultValue ? safeParseDateString(defaultValue) : undefined;
+  const {
+    selectedDate,
+    handleCalendarChange,
+    setPopoverState
+  } = useCalendarPopover({
+    value: dateValue,
+    defaultValue: dateDefaultValue,
+    onChange: dateVal => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(formatDateValue(dateVal));
     }
-  }, [value, isControlled]);
-  const onChangeEvent = event => {
+  });
+  const handleNativeChange = event => {
     const dateString = event.currentTarget.value;
-    if (dateString) {
-      const parsedDate = parseDateString(dateString);
-      setSelectedDate(parsedDate);
-    } else {
-      setSelectedDate(null);
-    }
-    if (typeof onChange === 'function') {
-      onChange(dateString);
-    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(dateString);
   };
   const indicator = isLoading ? /*#__PURE__*/_jsx(ProgressSpinner, {
     size: size
@@ -147,30 +134,15 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     size: textSizeMap[size],
     children: valueLabel
   }) : null;
-  const handleCalendarChange = useCallback(date => {
-    setSelectedDate(date);
-    if (typeof onChange === 'function') {
-      onChange(formatDateToString(date));
-    }
-    // Close the popover after date selection
-    if (popoverState) {
-      popoverState.close();
-    }
-  }, [onChange, popoverState]);
   const calendarProps = useMemo(() => _objectSpread(_objectSpread({
-    calendarOptions: _objectSpread(_objectSpread(_objectSpread({}, isControlled ? {
-      value: selectedDate || today(getLocalTimeZone())
-    } : {
-      defaultValue: selectedDate || today(getLocalTimeZone())
-    }), min && {
-      minValue: parseDateString(min)
+    calendarOptions: _objectSpread(_objectSpread(_objectSpread({}, min && {
+      minValue: safeParseDateString(min)
     }), max && {
-      maxValue: parseDateString(max)
-    })
+      maxValue: safeParseDateString(max)
+    }), calendarOptions === null || calendarOptions === void 0 ? void 0 : calendarOptions.calendarOptions)
   }, calendarOptions), {}, {
     onChange: handleCalendarChange
-  }), [selectedDate, calendarOptions, handleCalendarChange, isControlled, min, max]);
-  const contentCalendar = useMemo(() => /*#__PURE__*/_jsx(Calendar, _objectSpread({}, calendarProps)), [calendarProps]);
+  }), [calendarOptions, handleCalendarChange, min, max]);
 
   // Use native picker only if explicitly requested
   if (useNativePicker) {
@@ -187,7 +159,8 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
         disabled: disabled,
         min: min,
         max: max,
-        onChange: onChangeEvent
+        value: formatDateValue(selectedDate),
+        onChange: handleNativeChange
       })), /*#__PURE__*/_jsx("div", {
         className: styles.inputOverlay,
         children: /*#__PURE__*/_jsxs("div", {
@@ -202,7 +175,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsxs("div", {
     className: className,
     children: [/*#__PURE__*/_jsxs(PopoverTrigger, {
-      content: contentCalendar,
+      content: /*#__PURE__*/_jsx(Calendar, _objectSpread({}, calendarProps)),
       placement: placement,
       testId: testId,
       isDisabled: disabled,
@@ -219,7 +192,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       })]
     }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
       ref: ref,
-      value: formatDateToString(selectedDate),
+      value: formatDateValue(selectedDate),
       type: "hidden"
     }))]
   });

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

@@ -0,0 +1,38 @@
+import { type DateValue } from '@internationalized/date';
+export interface UseCalendarPopoverProps {
+    /**
+     * Current value for controlled components
+     */
+    value?: DateValue | null;
+    /**
+     * Default value for uncontrolled components
+     */
+    defaultValue?: DateValue | null;
+    /**
+     * Change handler called when a date is selected
+     */
+    onChange?: (date: DateValue) => void;
+}
+export interface UseCalendarPopoverReturn {
+    /**
+     * Current selected date value
+     */
+    selectedDate: DateValue | null;
+    /**
+     * Handler for calendar date selection
+     */
+    handleCalendarChange: (date: DateValue) => void;
+    /**
+     * Handler for setting popover state
+     */
+    setPopoverState: (state: {
+        close: () => void;
+    } | null) => void;
+}
+/**
+ * Custom hook for managing calendar popover state and date value logic.
+ * Handles both controlled and uncontrolled patterns, and manages popover closing
+ * after date selection.
+ */
+export declare const useCalendarPopover: ({ value, defaultValue, onChange, }: UseCalendarPopoverProps) => UseCalendarPopoverReturn;
+//# sourceMappingURL=useCalendarPopover.d.ts.map

package/dist/components/DatePicker/hooks/useCalendarPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendarPopover.d.ts","sourceRoot":"","sources":["../../../../lib/components/DatePicker/hooks/useCalendarPopover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGzD,MAAM,WAAW,uBAAuB;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,wBAAwB;IACxC;;OAEG;IACH,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/D;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,oCAIhC,uBAAuB,KAAG,wBAwC5B,CAAC"}

package/dist/components/DatePicker/hooks/useCalendarPopover.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import { useCallback, useState } from 'react';
+/**
+ * Custom hook for managing calendar popover state and date value logic.
+ * Handles both controlled and uncontrolled patterns, and manages popover closing
+ * after date selection.
+ */
+export const useCalendarPopover = ({
+  value,
+  defaultValue,
+  onChange
+}) => {
+  const isControlled = value !== undefined;
+  const [selectedDate, setSelectedDate] = useState(() => {
+    const initialValue = isControlled ? value : defaultValue;
+    return initialValue !== null && initialValue !== void 0 ? initialValue : null;
+  });
+  const [popoverState, setPopoverState] = useState(null);
+  const handleCalendarChange = useCallback(dateValue => {
+    // Update internal state for uncontrolled components
+    if (!isControlled) {
+      setSelectedDate(dateValue);
+    }
+
+    // Call external change handler
+    if (typeof onChange === 'function') {
+      onChange(dateValue);
+    }
+
+    // Close the popover after date selection
+    if (popoverState) {
+      popoverState.close();
+    }
+  }, [isControlled, onChange, popoverState]);
+
+  // For controlled components, sync with external value changes
+  const currentValue = isControlled ? value : selectedDate;
+  return {
+    selectedDate: currentValue,
+    handleCalendarChange,
+    setPopoverState
+  };
+};

package/dist/components/DateTimeField/DateField/DateField.d.ts

@@ -0,0 +1,40 @@
+import { type DateValue } from '@internationalized/date';
+import React from 'react';
+import type { TestIdProp } from '../../../types';
+import { type CalendarProps, type CalendarTextContent } from '../../Calendar/Calendar';
+import type { PopoverTextContent } from '../../Popover/Popover';
+import type { CommonSelectorProps } from '../types';
+export type DateFieldTextContent = Record<keyof typeof defaultEnglish, string> & CalendarTextContent & PopoverTextContent;
+export interface DateFieldProps extends CommonSelectorProps<DateValue | null>, TestIdProp {
+    /**
+     * Calendar props passed through to the react-aria hook
+     */
+    calendarOptions?: CalendarProps['calendarOptions'];
+    /**
+     * Allow date in the past
+     */
+    allowPastDate?: boolean;
+    /**
+     * Minimum selectable date (ISO YYYY-MM-DD)
+     */
+    min?: string;
+    /**
+     * Maximum selectable date (ISO YYYY-MM-DD)
+     */
+    max?: string;
+    /**
+     * Text values for localization
+     */
+    lang?: Partial<DateFieldTextContent>;
+}
+declare const defaultEnglish: {
+    readonly dateLabel: "date";
+    readonly select: "select";
+};
+/**
+ * DateField is a sub-component for selecting a date with a Calendar popup.
+ * Presently, this component is primarily used within the DateTimeInput.
+ */
+export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=DateField.d.ts.map

package/dist/components/DateTimeField/DateField/DateField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../../../lib/components/DateTimeField/DateField/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOjD,OAAO,EAEN,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAOhE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,OAAO,cAAc,EAAE,MAAM,CAAC,GAC7E,mBAAmB,GACnB,kBAAkB,CAAC;AAEpB,MAAM,WAAW,cAChB,SAAQ,mBAAmB,CAAC,SAAS,GAAG,IAAI,CAAC,EAC5C,UAAU;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,SAAS,yFAsGrB,CAAC"}

package/dist/components/DateTimeField/DateField/DateField.js

@@ -0,0 +1,110 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 React, { forwardRef } from 'react';
+import { dataAttrs } from "../../../utils/dataAttrs.js";
+import { displayFormattedDate, formatDateValue, safeParseDateString } from "../../../utils/dateFormat.js";
+import { Calendar } from "../../Calendar/Calendar.js";
+import { useCalendarPopover } from "../../DatePicker/hooks/useCalendarPopover.js";
+import { LoadingBox } from "../../LoadingBox/LoadingBox.js";
+import { PopoverTrigger } from "../../Popover/PopoverTrigger.js";
+import { dateFieldStyle, inputStyle, labelVariants } from "../DateTimeField.css.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultEnglish = {
+  dateLabel: 'date',
+  select: 'select'
+};
+
+/**
+ * DateField is a sub-component for selecting a date with a Calendar popup.
+ * Presently, this component is primarily used within the DateTimeInput.
+ */
+export const DateField = /*#__PURE__*/forwardRef(({
+  allowPastDate = false,
+  calendarOptions,
+  defaultValue,
+  disabled = false,
+  invalid = false,
+  lang = {},
+  loading = false,
+  max,
+  min,
+  name,
+  onChange,
+  testId,
+  value
+}, ref) => {
+  const {
+    selectedDate,
+    handleCalendarChange,
+    setPopoverState
+  } = useCalendarPopover({
+    value,
+    defaultValue,
+    onChange
+  });
+  const isDisabled = disabled || loading;
+  const textValues = _objectSpread(_objectSpread({}, defaultEnglish), lang);
+  const langTextCalendar = {
+    nextLabel: textValues.nextLabel,
+    prevLabel: textValues.prevLabel
+  };
+  const langTextPopover = {
+    close: textValues.close
+  };
+  const calendarProps = _objectSpread({
+    defaultValue: selectedDate,
+    minValue: min ? safeParseDateString(min) : undefined,
+    maxValue: max ? safeParseDateString(max) : undefined
+  }, calendarOptions);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, dataAttrs({
+    'od-component': 'date-field',
+    testId
+  })), {}, {
+    children: [/*#__PURE__*/_jsx(PopoverTrigger, {
+      content: /*#__PURE__*/_jsx(Calendar, {
+        allowPastDate: allowPastDate,
+        calendarOptions: calendarProps,
+        lang: langTextCalendar,
+        onChange: handleCalendarChange
+      }),
+      lang: langTextPopover,
+      offset: 1,
+      onStateReady: setPopoverState,
+      placement: "bottom left",
+      isDisabled: isDisabled,
+      children: /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({
+        className: dateFieldStyle
+      }, dataAttrs({
+        disabled,
+        loading,
+        invalid
+      })), {}, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: labelVariants({
+            disabled,
+            invalid
+          }),
+          children: textValues.dateLabel
+        }), loading ? /*#__PURE__*/_jsx(LoadingBox, {
+          height: "6"
+        }) : /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+          className: inputStyle
+        }, dataAttrs({
+          disabled
+        })), {}, {
+          children: selectedDate ? displayFormattedDate(selectedDate) : textValues.select
+        }))]
+      }))
+    }), /*#__PURE__*/_jsx("input", {
+      name: name,
+      value: formatDateValue(selectedDate),
+      type: "hidden",
+      disabled: disabled,
+      ref: ref
+    })]
+  }));
+});
+DateField.displayName = 'DateField';

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

@@ -0,0 +1,21 @@
+import { cssLayerComponent } from '../../styles/layers.css';
+export declare const dateFieldStyle: string;
+export declare const timeFieldStyle: string;
+export declare const labelVariants: import("@vanilla-extract/recipes").RuntimeFn<{
+    invalid: {
+        true: string;
+    };
+    disabled: {
+        true: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    color: `var(--${string})`;
+                };
+            };
+        };
+    };
+}>;
+export declare const inputResetStyle: string;
+export declare const valueStyle: string;
+export declare const inputStyle: string;
+//# sourceMappingURL=DateTimeField.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimeField/DateTimeField.css.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAgD5D,eAAO,MAAM,cAAc,QAazB,CAAC;AAEH,eAAO,MAAM,cAAc,QAczB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;gBAmBrB,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAKJ,CAAC;AAEH,eAAO,MAAM,eAAe,QAc1B,CAAC;AACH,eAAO,MAAM,UAAU,QAAqD,CAAC;AAC7E,eAAO,MAAM,UAAU,QAgBrB,CAAC"}