@autoguru/overdrive 4.46.0 → 4.47.0

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

@@ -0,0 +1,8 @@
+export declare const calendarGridStyle: string;
+export declare const calendarStyle: string;
+export declare const cellStyle: string;
+export declare const buttonStyle: string;
+export declare const thStyle: string;
+export declare const tdStyle: string;
+export declare const titleStyle: string;
+//# sourceMappingURL=Calendar.css.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,113 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/Calendar/Calendar.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { cssLayerComponent } from "../../styles/layers.css.js";
+import { selectors } from "../../styles/selectors.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { overdriveTokens as tokens } from "../../themes/theme.css.js";
+export const calendarGridStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      width: '100%'
+    }
+  }
+}, "calendarGridStyle");
+export const calendarStyle = style([sprinkles({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'spaceBetween',
+  mb: '2',
+  px: '1'
+})], "calendarStyle");
+
+// === Cell styles
+
+export const cellStyle = style([sprinkles({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  size: '7',
+  borderRadius: 'md'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      background: tokens.colours.background.body,
+      color: tokens.colours.foreground.body,
+      cursor: 'pointer',
+      selectors: {
+        [selectors.focusVisible]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [selectors.selected]: {
+          background: tokens.colours.foreground.body,
+          color: tokens.colours.background.body
+        },
+        [selectors.hoverNotSelected]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [`${selectors.disabled}, ${selectors.unavailable}`]: {
+          background: tokens.colours.background.body,
+          color: tokens.colours.gamut.gray400,
+          cursor: 'default'
+        }
+      }
+    }
+  }
+}, focusOutlineStyle], "cellStyle");
+
+// === Button styles
+
+export const buttonStyle = style([sprinkles({
+  alignItems: 'center',
+  borderColour: 'gray',
+  borderRadius: 'md',
+  borderStyle: 'solid',
+  borderWidth: '1',
+  display: 'flex',
+  justifyContent: 'center',
+  padding: 'none',
+  size: '7'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      background: tokens.colours.background.body,
+      color: tokens.colours.gamut.gray600,
+      cursor: 'pointer',
+      selectors: {
+        [selectors.hoverNotDisabled]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [selectors.focusVisible]: {
+          background: tokens.colours.gamut.gray200
+        },
+        [selectors.disabled]: {
+          background: tokens.colours.background.body,
+          borderColor: tokens.border.colours.light,
+          color: tokens.colours.gamut.gray300,
+          cursor: 'not-allowed'
+        }
+      }
+    }
+  }
+}, focusOutlineStyle], "buttonStyle");
+export const thStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      color: tokens.colours.gamut.gray600
+    }
+  }
+}, "thStyle");
+export const tdStyle = sprinkles({
+  padding: '1',
+  textAlign: 'center'
+});
+
+// === Heading styles
+export const titleStyle = sprinkles({
+  fontWeight: 'bold',
+  margin: 'none'
+});
+__vanilla_filescope__.endFileScope();

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { type AriaCalendarProps, type DateValue } from 'react-aria';
+import type { TestIdProp } from '../../types';
+declare const defaultEnglish: {
+    readonly nextLabel: "Next month";
+    readonly prevLabel: "Previous month";
+};
+type LanguageEntries = Partial<Record<keyof typeof defaultEnglish, string>>;
+export interface CalendarProps extends TestIdProp {
+    /**
+     * Calendar props passed through to the react-aria hook
+     * ([docs](https://react-spectrum.adobe.com/react-aria/useCalendar.html))
+     *
+     * *Defaults*
+     * - `defaultValue`: Today's date
+     * - `firstDayOfWeek`: Sunday
+     */
+    calendarOptions?: Exclude<AriaCalendarProps<DateValue>, 'onChange'>;
+    /**
+     * Allow date in the past
+     */
+    allowPastDate?: boolean;
+    /**
+     * Custom event handler return value when a date is selected
+     */
+    onChange?: (value: DateValue) => void;
+    /**
+     * Language content override
+     */
+    lang?: LanguageEntries;
+}
+/**
+ * Calendar component for selecting a date using react-aria. Supports full localization and accessibility.
+ * Uses the Gregorian calendar system.
+ *
+ * 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
+ *
+ * ## Date Restrictions
+ * You can restrict date selection using the `calendar` 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
+ *
+ * ## Examples
+ * See the Calendar stories for comprehensive examples including:
+ * - Disabled specific dates and weekends
+ * - Disabled date ranges
+ * - Custom validation rules
+ * - Localization examples
+ */
+export declare const Calendar: {
+    ({ allowPastDate, calendarOptions, lang, onChange, testId, }: CalendarProps): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=Calendar.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ;kEAMlB,aAAa;;CA0Df,CAAC"}

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,122 @@
+"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 { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
+import { getLocalTimeZone,
+// currently only supporting western-style Gregorian calendar
+GregorianCalendar, today } from '@internationalized/date';
+import React, { useEffect, useRef } from 'react';
+import { useCalendar, useLocale } from 'react-aria';
+import { useCalendarState } from 'react-stately';
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { Icon } from "../Icon/index.js";
+import { calendarStyle, titleStyle } from "./Calendar.css.js";
+import { CalendarButton } from "./CalendarButton.js";
+import { CalendarGrid } from "./CalendarGrid.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FIRST_DAY_OF_WEEK = 'mon';
+const defaultEnglish = {
+  nextLabel: 'Next month',
+  prevLabel: 'Previous month'
+};
+function createCalendar(identifier) {
+  if (identifier === 'gregory') {
+    return new GregorianCalendar();
+  }
+  throw new Error(`Unsupported calendar configured ${identifier}`);
+}
+
+/**
+ * Calendar component for selecting a date using react-aria. Supports full localization and accessibility.
+ * Uses the Gregorian calendar system.
+ *
+ * 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
+ *
+ * ## Date Restrictions
+ * You can restrict date selection using the `calendar` 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
+ *
+ * ## Examples
+ * See the Calendar stories for comprehensive examples including:
+ * - Disabled specific dates and weekends
+ * - Disabled date ranges
+ * - Custom validation rules
+ * - Localization examples
+ */
+export const Calendar = ({
+  allowPastDate = false,
+  calendarOptions,
+  lang,
+  onChange,
+  testId
+}) => {
+  var _lang$prevLabel, _lang$nextLabel;
+  const selectedDate = useRef(null);
+  const calendarComponentProps = _objectSpread({
+    defaultValue: today(getLocalTimeZone()),
+    firstDayOfWeek: FIRST_DAY_OF_WEEK,
+    minValue: allowPastDate ? undefined : today(getLocalTimeZone()),
+    onChange: value => {
+      selectedDate.current = value;
+      onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+  }, calendarOptions);
+  const {
+    locale
+  } = useLocale();
+  const state = useCalendarState(_objectSpread(_objectSpread({}, calendarComponentProps), {}, {
+    locale,
+    createCalendar
+  }));
+  const {
+    calendarProps,
+    prevButtonProps,
+    nextButtonProps,
+    title: calendarTitle
+  } = useCalendar(calendarComponentProps, state);
+  useEffect(() => {
+    if (state.value) {
+      selectedDate.current = state.value;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- run only once
+  }, []);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, dataAttrs({
+    testid: testId
+  })), {}, {
+    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,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ChevronLeftIcon,
+          size: "medium"
+        })
+      })), /*#__PURE__*/_jsx("h4", {
+        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,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ChevronRightIcon,
+          size: "medium"
+        })
+      }))]
+    })), /*#__PURE__*/_jsx(CalendarGrid, {
+      state: state,
+      firstDayOfWeek: calendarComponentProps.firstDayOfWeek
+    })]
+  }));
+};
+Calendar.displayName = 'Calendar';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type AriaButtonProps } from 'react-aria';
+export declare const CalendarButton: {
+    (props: AriaButtonProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=CalendarButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarButton.d.ts","sourceRoot":"","sources":["../../../lib/components/Calendar/CalendarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAa,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAI7D,eAAO,MAAM,cAAc;YAAW,eAAe;;CAQpD,CAAC"}

package/dist/components/{DateTimePicker → Calendar}/CalendarButton.js

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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, { useRef } from 'react';
 import { useButton } from 'react-aria';
-import { buttonStyle } from "./DateTimePicker.css.js";
+import { buttonStyle } from "./Calendar.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const CalendarButton = props => {
   const ref = useRef(null);
@@ -17,4 +17,5 @@ export const CalendarButton = props => {
     ref: ref,
     children: props.children
   }));
-};
+};
+CalendarButton.displayName = 'CalendarButton';

package/dist/components/{DateTimePicker → Calendar}/CalendarGrid.d.ts

@@ -4,6 +4,9 @@ import type { CalendarState } from 'react-stately';
 interface CalendarGridProps extends AriaCalendarGridProps {
     state: CalendarState;
 }
-export declare const CalendarGrid: ({ state, ...props }: CalendarGridProps) => React.JSX.Element;
+export declare const CalendarGrid: {
+    ({ state, ...props }: CalendarGridProps): React.JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=CalendarGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarGrid.d.ts","sourceRoot":"","sources":["../../../lib/components/Calendar/CalendarGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAKN,KAAK,qBAAqB,EAC1B,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAyCnD,UAAU,iBAAkB,SAAQ,qBAAqB;IACxD,KAAK,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,YAAY;0BAAyB,iBAAiB;;CA2ClE,CAAC"}

package/dist/components/{DateTimePicker → Calendar}/CalendarGrid.js

@@ -10,7 +10,7 @@ import { getWeeksInMonth } from '@internationalized/date';
 import React, { useRef } from 'react';
 import { useCalendarCell, useCalendarGrid, useLocale } from 'react-aria';
 import { dataAttrs } from "../../utils/dataAttrs.js";
-import { calendarGridStyle, cellStyle, tdStyle, thStyle } from "./DateTimePicker.css.js";
+import { calendarGridStyle, cellStyle, tdStyle, thStyle } from "./Calendar.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CalendarCell = ({
   state,
@@ -37,7 +37,7 @@ const CalendarCell = ({
     }, dataAttrs({
       selected: isSelected,
       disabled: isDisabled,
-      unvailable: isUnavailable
+      unavailable: isUnavailable
     })), {}, {
       children: formattedDate
     }))
@@ -61,10 +61,10 @@ export const CalendarGrid = _ref => {
     className: calendarGridStyle,
     children: [/*#__PURE__*/_jsx("thead", _objectSpread(_objectSpread({}, headerProps), {}, {
       children: /*#__PURE__*/_jsx("tr", {
-        children: weekDays.map(day => /*#__PURE__*/_jsx("th", {
+        children: weekDays.map((day, index) => /*#__PURE__*/_jsx("th", {
           className: thStyle,
           children: day
-        }, day))
+        }, index))
       })
     })), /*#__PURE__*/_jsx("tbody", {
       children: _toConsumableArray(Array.from({
@@ -73,8 +73,9 @@ export const CalendarGrid = _ref => {
         children: state.getDatesInWeek(weekIndex).map((date, idx) => date ? /*#__PURE__*/_jsx(CalendarCell, {
           state: state,
           date: date
-        }, idx) : /*#__PURE__*/_jsx("td", {}, idx))
+        }, `${date.year}-${date.month}-${date.day}`) : /*#__PURE__*/_jsx("td", {}, `empty-${weekIndex}-${idx}`))
       }, weekIndex))
     })]
   }));
-};
+};
+CalendarGrid.displayName = 'CalendarGrid';

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

@@ -0,0 +1,3 @@
+export { Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/Calendar/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { Calendar } from "./Calendar.js";

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

@@ -1,5 +1,6 @@
+export declare const inputContainer: string;
 export declare const input: string;
+export declare const inputOverlay: string;
 export declare const contents: Record<"default" | "withLabel", string>;
 export declare const disabled: Record<"default" | "root", string>;
-export declare const spinner: string;
 //# sourceMappingURL=DatePicker.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,QAqBhB,CAAC;AAEH,eAAO,MAAM,QAAQ,yCAWnB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC"}
+{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH,eAAO,MAAM,KAAK,QAsBhB,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC;AAEH,eAAO,MAAM,QAAQ,yCAmBnB,CAAC;AAEH,eAAO,MAAM,QAAQ,oCAenB,CAAC"}

package/dist/components/DatePicker/DatePicker.css.js

@@ -3,52 +3,82 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DatePicker/DatePicker.css.ts", "@autoguru/overdrive");
 import { style, styleVariants } from '@vanilla-extract/css';
+import { cssLayerComponent } from "../../styles/layers.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
+export const inputContainer = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      display: 'grid',
+      position: 'relative'
+    }
+  }
+}, "inputContainer");
 export const input = style({
-  bottom: 0,
-  cursor: 'pointer',
-  left: 0,
-  opacity: 0,
-  right: 0,
-  top: 0,
-  selectors: {
-    '&::-webkit-calendar-picker-indicator': {
-      background: 'transparent',
-      bottom: 0,
-      color: 'transparent',
+  '@layer': {
+    [cssLayerComponent]: {
       cursor: 'pointer',
-      height: 'auto',
-      left: 0,
-      position: 'absolute',
-      right: 0,
-      top: 0,
-      width: 'auto'
+      gridArea: '1 / 1',
+      opacity: 0,
+      position: 'relative',
+      zIndex: 1,
+      selectors: {
+        '&::-webkit-calendar-picker-indicator': {
+          background: 'transparent',
+          color: 'transparent',
+          cursor: 'pointer',
+          height: '100%',
+          left: 0,
+          position: 'absolute',
+          top: 0,
+          width: '100%'
+        }
+      }
     }
   }
 }, "input");
+export const inputOverlay = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      gridArea: '1 / 1',
+      pointerEvents: 'none',
+      zIndex: 0
+    }
+  }
+}, "inputOverlay");
 export const contents = styleVariants({
   default: {
-    alignItems: 'center',
-    display: 'grid',
-    gridGap: vars.space['1'],
-    gridTemplateColumns: 'auto',
-    justifyContent: 'flex-start'
+    '@layer': {
+      [cssLayerComponent]: {
+        alignItems: 'center',
+        display: 'grid',
+        gridGap: vars.space['1'],
+        gridTemplateColumns: 'auto',
+        justifyContent: 'flex-start'
+      }
+    }
   },
   withLabel: {
-    gridTemplateColumns: 'auto auto'
+    '@layer': {
+      [cssLayerComponent]: {
+        gridTemplateColumns: 'auto auto'
+      }
+    }
   }
 }, "contents");
 export const disabled = styleVariants({
   default: {
-    cursor: 'not-allowed'
+    '@layer': {
+      [cssLayerComponent]: {
+        cursor: 'not-allowed'
+      }
+    }
   },
   root: {
-    opacity: '0.3'
+    '@layer': {
+      [cssLayerComponent]: {
+        opacity: '0.3'
+      }
+    }
   }
 }, "disabled");
-export const spinner = style({
-  left: '50%',
-  top: '50%',
-  transform: 'translate(-50%, -50%)'
-}, "spinner");
 __vanilla_filescope__.endFileScope();

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

@@ -1,15 +1,93 @@
 import { IconType } from '@autoguru/icons';
-import { FunctionComponent } from 'react';
+import React from 'react';
+import type { TestIdProp } from '../../types';
+import { type CalendarProps } from '../Calendar';
 type SizeScale = 'small' | 'medium' | 'large';
-export interface DatePickerProps extends Partial<Pick<HTMLInputElement, 'min' | 'max' | 'value'>> {
-    size?: SizeScale;
+declare const defaultEnglish: {
+    readonly openCalendar: "open calendar";
+};
+type LanguageEntries = Partial<Record<keyof typeof defaultEnglish, string>>;
+export interface DatePickerProps extends Pick<HTMLInputElement, 'id' | 'name'>, TestIdProp {
+    /**
+     * Options to customise the calendar: `allowPastDate`, `lang`, etc.
+     */
+    calendarOptions?: Omit<CalendarProps, 'onChange'>;
     className?: string;
+    /**
+     * Whether the picker is disabled and non-interactive
+     */
     disabled?: boolean;
+    /**
+     * Icon to render inside the picker (defaults to calendar icon)
+     */
     icon?: IconType;
+    /**
+     * Show a loading state spinner instead of the icon
+     */
     isLoading?: boolean;
+    onChange(date: string): void;
+    /**
+     * Visual size of the picker control (small, medium, large)
+     */
+    size?: SizeScale;
+    /**
+     * Fallback label to display when no date value is selected.
+     */
     valueLabel?: string;
-    onChange(date: string): any;
+    /**
+     * Use native browser date picker instead of Calendar popover
+     */
+    useNativePicker?: boolean;
+    /**
+     * Language content override for DatePicker
+     */
+    lang?: LanguageEntries;
 }
-export declare const DatePicker: FunctionComponent<DatePickerProps>;
+/**
+ * The DatePicker has been updated to render the Calendar component with a Popover while
+ * maintaining backwards compatability.
+ *
+ * ## Props
+ * - Visual size controlled by `size` (small | medium | large)
+ * - Icon can be customized via the `icon` prop
+ *
+ * ## Event handling
+ * - `onChange` is always invoked with the raw ISO date string (or empty string when cleared)
+ *
+ * ## Compatibility mode
+ * - Setting `useNativePicker={true}` preserves the original browser-specific experience.
+ *
+ * ## Internationalization
+ * - Override text values via `lang={{ openCalendar: 'open calendar' }}`
+ * - 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)
+ *
+ *
+ * @example
+ * <DatePicker
+ *   name="bookingDate"
+ *   valueLabel="Select a date"
+ *   onChange={(isoDate) => console.log('Selected date:', isoDate)}
+ *   calendarOptions={{
+ *     allowPastDate: false,
+ *     weekdayFormat: 'short',
+ *   }}
+ * />
+ *
+ * @example
+ * // Native date picker usage
+ * <DatePicker
+ *   name="startDate"
+ *   useNativePicker
+ *   value={initialDateISO} // e.g., "2025-03-12"
+ *   onChange={(isoDate) => console.log('Native picked date:', isoDate)}
+ * />
+ */
+export declare const DatePicker: {
+    ({ calendarOptions, className, disabled, icon, isLoading, lang, onChange, size, testId, useNativePicker, valueLabel, ...inputProps }: DatePickerProps): React.JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=DatePicker.d.ts.map

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;AAGzD,OAAO,EAA+B,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAUvE,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9C,MAAM,WAAW,eAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,QAAQ,CAAC,IAAI,EAAE,MAAM,OAAE;CACvB;AAOD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoEzD,CAAC"}
+{"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,KAA8C,MAAM,OAAO,CAAC;AAInE,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,eAChB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,CAAC,EAC5C,UAAU;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,UAAU;0IAcpB,eAAe;;CA2HjB,CAAC"}