@autoguru/overdrive 4.47.0 → 4.47.1

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.d.ts

@@ -7,12 +7,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 +25,28 @@ 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;
     /**
      * 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 +81,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 +107,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,KAMN,MAAM,OAAO,CAAC;AAIf,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,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", "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, { 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,15 +86,16 @@ 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,
@@ -94,11 +104,24 @@ export const DatePicker = _ref => {
       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) {
@@ -128,9 +151,11 @@ export const DatePicker = _ref => {
     children: valueLabel
   }) : null;
   const calendarProps = useMemo(() => ({
-    calendar: _objectSpread({
+    calendarOptions: _objectSpread(_objectSpread({}, isControlled ? {
+      value: selectedDate || today(getLocalTimeZone())
+    } : {
       defaultValue: selectedDate || today(getLocalTimeZone())
-    }, calendarOptions),
+    }), calendarOptions),
     onChange: date => {
       setSelectedDate(date);
       if (typeof onChange === 'function') {
@@ -141,7 +166,7 @@ export const DatePicker = _ref => {
         popoverState.close();
       }
     }
-  }), [selectedDate, calendarOptions, onChange, popoverState]);
+  }), [selectedDate, calendarOptions, onChange, popoverState, isControlled]);
   const contentCalendar = useMemo(() => /*#__PURE__*/_jsx(Calendar, _objectSpread({}, calendarProps)), [calendarProps]);
 
   // Use native picker only if explicitly requested
@@ -149,6 +174,7 @@ export const DatePicker = _ref => {
     return /*#__PURE__*/_jsxs("div", {
       className: clsx(containerStyle, styles.inputContainer),
       children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+        ref: ref,
         className: elementStyles({
           className: [styles.input, {
             [styles.disabled.default]: disabled
@@ -184,9 +210,10 @@ export const DatePicker = _ref => {
         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), {}, {
+      ref: ref,
       value: formatDateToString(selectedDate),
       type: "hidden"
     }))]
   });
-};
+});
 DatePicker.displayName = 'DatePicker';

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.1",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",