@autoguru/overdrive 4.47.0 → 4.47.2

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

@@ -43,18 +43,23 @@ export interface CalendarProps extends TestIdProp {
  * - 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.
+ *  - Other useful utilities include `today(getLocalTimeZone())` for current
+ *    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:
  * - `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
+ * ## Internationalization
+ * - Override text values via `lang={{ openCalendar: 'open calendar' }}`
+ * - 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)
  */
 export declare const Calendar: {
     ({ allowPastDate, calendarOptions, lang, onChange, testId, }: CalendarProps): React.JSX.Element;

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

package/dist/components/Calendar/Calendar.js

@@ -42,18 +42,23 @@ function createCalendar(identifier) {
  * - 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.
+ *  - Other useful utilities include `today(getLocalTimeZone())` for current
+ *    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:
  * - `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
+ * ## Internationalization
+ * - Override text values via `lang={{ openCalendar: 'open calendar' }}`
+ * - 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)
  */
 export const Calendar = ({
   allowPastDate = false,
@@ -64,15 +69,18 @@ export const Calendar = ({
 }) => {
   var _lang$prevLabel, _lang$nextLabel;
   const selectedDate = useRef(null);
-  const calendarComponentProps = _objectSpread({
-    defaultValue: today(getLocalTimeZone()),
+  const hasValue = !!(calendarOptions !== null && calendarOptions !== void 0 && calendarOptions.value) || !!(calendarOptions !== null && calendarOptions !== void 0 && calendarOptions.defaultValue);
+  const fallbackDefaultValue = hasValue ? {} : {
+    defaultValue: today(getLocalTimeZone())
+  };
+  const calendarComponentProps = _objectSpread(_objectSpread({
     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);
+  }, calendarOptions), fallbackDefaultValue);
   const {
     locale
   } = useLocale();
@@ -90,8 +98,7 @@ export const Calendar = ({
     if (state.value) {
       selectedDate.current = state.value;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- run only once
-  }, []);
+  }, [state.value]);
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, dataAttrs({
     testid: testId
   })), {}, {

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

@@ -2,5 +2,5 @@ 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 disabled: Record<"cursor" | "native", 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":"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"}
+{"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,qCAenB,CAAC"}

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

@@ -66,14 +66,14 @@ export const contents = styleVariants({
   }
 }, "contents");
 export const disabled = styleVariants({
-  default: {
+  cursor: {
     '@layer': {
       [cssLayerComponent]: {
         cursor: 'not-allowed'
       }
     }
   },
-  root: {
+  native: {
     '@layer': {
       [cssLayerComponent]: {
         opacity: '0.3'

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

@@ -1,5 +1,6 @@
 import { IconType } from '@autoguru/icons';
 import React from 'react';
+import type { AriaPopoverProps } from 'react-aria';
 import type { TestIdProp } from '../../types';
 import { type CalendarProps } from '../Calendar';
 type SizeScale = 'small' | 'medium' | 'large';
@@ -7,12 +8,16 @@ declare const defaultEnglish: {
     readonly openCalendar: "open calendar";
 };
 type LanguageEntries = Partial<Record<keyof typeof defaultEnglish, string>>;
-export interface DatePickerProps extends Pick<HTMLInputElement, 'id' | 'name'>, TestIdProp {
+export interface DatePickerProps extends TestIdProp {
     /**
      * Options to customise the calendar: `allowPastDate`, `lang`, etc.
      */
     calendarOptions?: Omit<CalendarProps, 'onChange'>;
     className?: string;
+    /**
+     * Default selected date as an ISO string YYYY-MM-DD (uncontrolled)
+     */
+    defaultValue?: string;
     /**
      * Whether the picker is disabled and non-interactive
      */
@@ -21,15 +26,32 @@ export interface DatePickerProps extends Pick<HTMLInputElement, 'id' | 'name'>,
      * Icon to render inside the picker (defaults to calendar icon)
      */
     icon?: IconType;
+    /**
+     * Form field id
+     */
+    id?: string;
     /**
      * Show a loading state spinner instead of the icon
      */
     isLoading?: boolean;
+    /**
+     * Input field name recommended for form usage
+     */
+    name?: string;
     onChange(date: string): void;
+    /**
+     * Calendar popover placement relative to the trigger ('bottom left', 'top', etc.)
+     */
+    placement?: AriaPopoverProps['placement'];
     /**
      * Visual size of the picker control (small, medium, large)
      */
     size?: SizeScale;
+    /**
+     * The selected date as an ISO string (YYYY-MM-DD). Use `undefined` for an empty value
+     * (controlled)
+     */
+    value?: string;
     /**
      * Fallback label to display when no date value is selected.
      */
@@ -64,12 +86,21 @@ export interface DatePickerProps extends Pick<HTMLInputElement, 'id' | 'name'>,
  * - 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
+ * // Uncontrolled component with default value
+ * <DatePicker
+ *   name="eventDate"
+ *   defaultValue="2025-03-15"
+ *   onChange={(isoDate) => console.log('Selected date:', isoDate)}
+ * />
  *
  * @example
+ * // Controlled component
  * <DatePicker
  *   name="bookingDate"
+ *   value={selectedDate}
  *   valueLabel="Select a date"
- *   onChange={(isoDate) => console.log('Selected date:', isoDate)}
+ *   onChange={(isoDate) => setSelectedDate(isoDate)}
  *   calendarOptions={{
  *     allowPastDate: false,
  *     weekdayFormat: 'short',
@@ -81,13 +112,10 @@ export interface DatePickerProps extends Pick<HTMLInputElement, 'id' | 'name'>,
  * <DatePicker
  *   name="startDate"
  *   useNativePicker
- *   value={initialDateISO} // e.g., "2025-03-12"
+ *   defaultValue="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 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 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;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"}
+{"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,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,0FAqLtB,CAAC"}

package/dist/components/DatePicker/DatePicker.js

@@ -2,13 +2,13 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["calendarOptions", "className", "disabled", "icon", "isLoading", "lang", "onChange", "size", "testId", "useNativePicker", "valueLabel"];
+const _excluded = ["calendarOptions", "className", "defaultValue", "disabled", "icon", "isLoading", "lang", "onChange", "placement", "size", "testId", "useNativePicker", "value", "valueLabel"];
 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, { useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, forwardRef } from 'react';
 import { elementStyles } from "../../styles/elementStyles.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { Calendar } from "../Calendar/index.js";
@@ -60,12 +60,21 @@ const parseDateString = dateString => {
  * - 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
+ * // Uncontrolled component with default value
+ * <DatePicker
+ *   name="eventDate"
+ *   defaultValue="2025-03-15"
+ *   onChange={(isoDate) => console.log('Selected date:', isoDate)}
+ * />
  *
  * @example
+ * // Controlled component
  * <DatePicker
  *   name="bookingDate"
+ *   value={selectedDate}
  *   valueLabel="Select a date"
- *   onChange={(isoDate) => console.log('Selected date:', isoDate)}
+ *   onChange={(isoDate) => setSelectedDate(isoDate)}
  *   calendarOptions={{
  *     allowPastDate: false,
  *     weekdayFormat: 'short',
@@ -77,28 +86,43 @@ const parseDateString = dateString => {
  * <DatePicker
  *   name="startDate"
  *   useNativePicker
- *   value={initialDateISO} // e.g., "2025-03-12"
+ *   defaultValue="2025-03-12"
  *   onChange={(isoDate) => console.log('Native picked date:', isoDate)}
  * />
  */
-export const DatePicker = _ref => {
+export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _lang$openCalendar;
   let {
       calendarOptions,
       className,
+      defaultValue,
       disabled = false,
       icon = CalendarIcon,
       isLoading = false,
       lang,
       onChange,
+      placement = 'bottom left',
       size = 'medium',
       testId,
       useNativePicker = false,
+      value,
       valueLabel
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
-  const [selectedDate, setSelectedDate] = useState(null);
+  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);
+    }
+  }, [value, isControlled]);
   const onChangeEvent = event => {
     const dateString = event.currentTarget.value;
     if (dateString) {
@@ -111,12 +135,6 @@ export const DatePicker = _ref => {
       onChange(dateString);
     }
   };
-  const containerStyle = elementStyles({
-    className: [className, {
-      [styles.disabled.default]: disabled,
-      [styles.disabled.root]: disabled
-    }]
-  });
   const indicator = isLoading ? /*#__PURE__*/_jsx(ProgressSpinner, {
     size: size
   }) : /*#__PURE__*/_jsx(Icon, {
@@ -124,34 +142,40 @@ export const DatePicker = _ref => {
     size: size
   });
   const label = valueLabel ? /*#__PURE__*/_jsx(Text, {
+    colour: !useNativePicker && disabled ? 'muted' : undefined,
     size: textSizeMap[size],
     children: valueLabel
   }) : null;
-  const calendarProps = useMemo(() => ({
-    calendar: _objectSpread({
-      defaultValue: selectedDate || today(getLocalTimeZone())
-    }, calendarOptions),
-    onChange: date => {
-      setSelectedDate(date);
-      if (typeof onChange === 'function') {
-        onChange(formatDateToString(date));
-      }
-      // Close the popover after date selection
-      if (popoverState) {
-        popoverState.close();
-      }
+  const handleCalendarChange = useCallback(date => {
+    setSelectedDate(date);
+    if (typeof onChange === 'function') {
+      onChange(formatDateToString(date));
     }
-  }), [selectedDate, calendarOptions, onChange, popoverState]);
+    // Close the popover after date selection
+    if (popoverState) {
+      popoverState.close();
+    }
+  }, [onChange, popoverState]);
+  const calendarProps = useMemo(() => _objectSpread(_objectSpread({
+    calendarOptions: _objectSpread({}, isControlled ? {
+      value: selectedDate || today(getLocalTimeZone())
+    } : {
+      defaultValue: selectedDate || today(getLocalTimeZone())
+    })
+  }, calendarOptions), {}, {
+    onChange: handleCalendarChange
+  }), [selectedDate, calendarOptions, handleCalendarChange, isControlled]);
   const contentCalendar = useMemo(() => /*#__PURE__*/_jsx(Calendar, _objectSpread({}, calendarProps)), [calendarProps]);
 
   // Use native picker only if explicitly requested
   if (useNativePicker) {
     return /*#__PURE__*/_jsxs("div", {
-      className: clsx(containerStyle, styles.inputContainer),
+      className: clsx(className, styles.inputContainer, disabled && styles.disabled.native),
       children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+        ref: ref,
         className: elementStyles({
           className: [styles.input, {
-            [styles.disabled.default]: disabled
+            [styles.disabled.cursor]: disabled
           }]
         }),
         type: "date",
@@ -169,24 +193,28 @@ export const DatePicker = _ref => {
     });
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: clsx(containerStyle, sprinkles({
-      display: 'flex',
-      alignItems: 'center',
-      gap: '1'
-    })),
+    className: className,
     children: [/*#__PURE__*/_jsxs(PopoverTrigger, {
       content: contentCalendar,
-      placement: "bottom left",
+      placement: placement,
       testId: testId,
       isDisabled: disabled,
       onStateReady: setPopoverState,
-      children: [indicator, /*#__PURE__*/_jsx(VisuallyHidden, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: sprinkles({
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1'
+        }),
+        children: [indicator, label]
+      }), /*#__PURE__*/_jsx(VisuallyHidden, {
         children: (_lang$openCalendar = lang === null || lang === void 0 ? void 0 : lang.openCalendar) !== null && _lang$openCalendar !== void 0 ? _lang$openCalendar : defaultEnglish.openCalendar
       })]
-    }), label, /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+    }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+      ref: ref,
       value: formatDateToString(selectedDate),
       type: "hidden"
     }))]
   });
-};
+});
 DatePicker.displayName = 'DatePicker';

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/Popover.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,QAiBvB,CAAC;AAEH,eAAO,MAAM,YAAY,QASvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC"}
+{"version":3,"file":"Popover.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/Popover.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,YAAY,QAiBvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAcvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAY1B,CAAC"}

package/dist/components/Popover/Popover.css.js

@@ -4,6 +4,7 @@ import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Popover/Popover.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";
 import { overdriveTokens as tokens } from "../../themes/theme.css.js";
 export const overlayStyle = style([sprinkles({
@@ -27,7 +28,12 @@ export const triggerStyle = style({
       background: 'transparent',
       border: 'none',
       cursor: 'pointer',
-      padding: 0
+      padding: 0,
+      selectors: {
+        [selectors.disabled]: {
+          cursor: 'not-allowed'
+        }
+      }
     }
   }
 }, "triggerStyle");
@@ -39,7 +45,8 @@ export const fullScreenStyle = style({
       left: 0,
       position: 'fixed',
       right: 0,
-      top: 0
+      top: 0,
+      zIndex: 3
     }
   }
 }, "fullScreenStyle");

package/dist/components/Slider/Slider.d.ts

@@ -3,9 +3,9 @@ import { type AriaSliderProps, type AriaSliderThumbProps } from 'react-aria';
 import type { TestIdProp } from '../../types';
 export interface SliderProps extends AriaSliderProps, Pick<AriaSliderThumbProps, 'name'>, TestIdProp {
     /**
-     * Optional label for the slider
+     * Label for the slider. Can be a string or custom child element.
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Unit text to display with the value (e.g., 'kms', 'miles', '%')
      */
@@ -25,11 +25,11 @@ export interface SliderProps extends AriaSliderProps, Pick<AriaSliderThumbProps,
  * supports configurable step values and value unit post-fix. Use the `onChange` handler
  * in most instances for retrieving the current value.
  *
- * @example
- * const handleOnChange = (value) => {
- *   console.log('Distance changed to:', value);
- * };
+ * Supports flexible label approach:
+ * - Pre-styled label `label="Distance"`
+ * - Custom label content: `label={<label className={customlabelStyles}>Distance</label>}`
  *
+ * @example
  * <Slider
  *   label="Distance"
  *   value={distance}
@@ -41,7 +41,7 @@ export interface SliderProps extends AriaSliderProps, Pick<AriaSliderThumbProps,
  * />;
  */
 export declare const Slider: {
-    ({ testId, unitText, step, formatOptions, ...props }: SliderProps): React.JSX.Element;
+    ({ formatOptions, label, step, testId, unitText, ...props }: SliderProps): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Slider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../lib/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAMN,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,MAAM,WAAW,WAChB,SAAQ,eAAe,EACtB,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,EAClC,UAAU;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACzC;AAqCD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;0DAMhB,WAAW;;CA0Db,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../lib/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAMN,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,MAAM,WAAW,WAChB,SAAQ,eAAe,EACtB,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,EAClC,UAAU;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACzC;AAqCD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;iEAOhB,WAAW;;CAqEb,CAAC"}

package/dist/components/Slider/Slider.js

@@ -2,11 +2,11 @@
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["testId", "unitText", "step", "formatOptions"];
+const _excluded = ["formatOptions", "label", "step", "testId", "unitText"];
 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 { MinusIcon, PlusIcon } from '@autoguru/icons';
-import React from 'react';
+import React, { isValidElement } from 'react';
 import { mergeProps, useFocusRing, useNumberFormatter, useSlider, useSliderThumb } from 'react-aria';
 import { useSliderState } from 'react-stately';
 import { dataAttrs } from "../../utils/dataAttrs.js";
@@ -57,11 +57,11 @@ const SliderThumb = ({
  * supports configurable step values and value unit post-fix. Use the `onChange` handler
  * in most instances for retrieving the current value.
  *
- * @example
- * const handleOnChange = (value) => {
- *   console.log('Distance changed to:', value);
- * };
+ * Supports flexible label approach:
+ * - Pre-styled label `label="Distance"`
+ * - Custom label content: `label={<label className={customlabelStyles}>Distance</label>}`
  *
+ * @example
  * <Slider
  *   label="Distance"
  *   value={distance}
@@ -74,14 +74,17 @@ const SliderThumb = ({
  */
 export const Slider = _ref => {
   let {
-      testId,
-      unitText = '',
+      formatOptions,
+      label,
       step = 5,
-      formatOptions
+      testId,
+      unitText
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const trackRef = React.useRef(null);
   const numberFormatter = useNumberFormatter(formatOptions);
+  const hasTextLabel = !!label && typeof label === 'string' && label !== '';
+  const hasCustomLabel = !hasTextLabel && /*#__PURE__*/isValidElement(label);
   const state = useSliderState(_objectSpread(_objectSpread({}, props), {}, {
     step,
     numberFormatter
@@ -92,16 +95,17 @@ export const Slider = _ref => {
     labelProps,
     outputProps
   } = useSlider(_objectSpread(_objectSpread({}, props), {}, {
+    label,
     step
   }), state, trackRef);
   return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({}, groupProps), {}, {
     className: styles.container,
     odComponent: "slider",
     testId: testId,
-    children: [props.label && /*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({}, labelProps), {}, {
+    children: [hasTextLabel && /*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({}, labelProps), {}, {
       className: styles.label,
-      children: props.label
-    })), /*#__PURE__*/_jsx("div", {
+      children: label
+    })), hasCustomLabel && /*#__PURE__*/React.cloneElement(label, _objectSpread({}, labelProps)), /*#__PURE__*/_jsx("div", {
       className: styles.valueDisplay,
       children: /*#__PURE__*/_jsxs("output", _objectSpread(_objectSpread({}, outputProps), {}, {
         className: styles.valueText,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.47.0",
+	"version": "4.47.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -79,7 +79,7 @@
 		"@babel/preset-react": "7.27.1",
 		"@babel/preset-typescript": "7.27.1",
 		"@babel/runtime-corejs3": "7.28.4",
-		"@changesets/cli": "2.29.6",
+		"@changesets/cli": "2.29.7",
 		"@chromatic-com/storybook": "4.1.1",
 		"@internationalized/date": "3.9.0",
 		"@octokit/rest": "22.0.0",
@@ -96,8 +96,8 @@
 		"@testing-library/react": "16.3.0",
 		"@testing-library/react-hooks": "8.0.1",
 		"@testing-library/user-event": "14.6.1",
-		"@types/node": "24.3.1",
-		"@types/react": "19.1.12",
+		"@types/node": "24.4.0",
+		"@types/react": "19.1.13",
 		"@types/react-dom": "19.1.9",
 		"@types/webpack-env": "1.18.8",
 		"@typescript-eslint/utils": "8.41.0",
@@ -139,8 +139,8 @@
 		"prop-types": "15.8.1",
 		"rand-seed": "3.0.0",
 		"react": "19.1.1",
-		"react-aria": "3.43.1",
-		"react-aria-components": "1.12.1",
+		"react-aria": "3.43.2",
+		"react-aria-components": "1.12.2",
 		"react-dom": "19.1.1",
 		"react-focus-lock": "2.13.6",
 		"react-intersection-observer": "9.16.0",