@autoguru/overdrive 4.46.0 → 4.47.1

package/dist/components/Slider/Slider.css.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/Slider/Slider.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 vars } from "../../themes/theme.css.js";
+export const container = sprinkles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '3',
+  width: 'full'
+});
+export const label = sprinkles({
+  fontSize: '6',
+  fontWeight: 'semiBold',
+  color: 'normal'
+});
+export const valueDisplay = sprinkles({
+  display: 'flex',
+  justifyContent: 'center',
+  marginBottom: '3'
+});
+export const valueText = sprinkles({
+  fontSize: '7',
+  fontWeight: 'semiBold',
+  color: 'normal'
+});
+export const sliderContainer = sprinkles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4',
+  width: 'full'
+});
+export const trackContainer = sprinkles({
+  position: 'relative',
+  width: 'full',
+  display: 'flex'
+});
+export const track = style([sprinkles({
+  borderRadius: 'pill',
+  height: '1',
+  position: 'relative',
+  width: 'full'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      backgroundColor: vars.colours.gamut.gray300,
+      selectors: {
+        [selectors.disabled]: {
+          backgroundColor: vars.colours.gamut.gray200,
+          cursor: 'not-allowed'
+        }
+      }
+    }
+  }
+}], "track");
+export const thumb = style([sprinkles({
+  borderRadius: 'full',
+  borderWidth: 'none',
+  size: '5'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      backgroundColor: vars.colours.gamut.black900,
+      cursor: 'pointer',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translate(-50%, -50%)',
+      transition: `box-shadow 0.2s ${vars.animation.easing.standard}`,
+      selectors: {
+        [selectors.hover]: {
+          boxShadow: `0 0 0 4px rgba(0, 0, 0, 0.1)`
+        },
+        [selectors.focusVisible]: {
+          boxShadow: `0 0 0 4px rgba(0, 0, 0, 0.2)`
+        },
+        '&[data-dragging]': {
+          boxShadow: `0 0 0 4px rgba(0, 0, 0, 0.2)`
+        },
+        [selectors.disabled]: {
+          backgroundColor: vars.colours.gamut.gray500,
+          cursor: 'not-allowed'
+        }
+      }
+    }
+  }
+}, focusOutlineStyle], "thumb");
+__vanilla_filescope__.endFileScope();

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { type AriaSliderProps, type AriaSliderThumbProps } from 'react-aria';
+import type { TestIdProp } from '../../types';
+export interface SliderProps extends AriaSliderProps, Pick<AriaSliderThumbProps, 'name'>, TestIdProp {
+    /**
+     * Label for the slider. Can be a string or custom child element.
+     */
+    label?: React.ReactNode;
+    /**
+     * Unit text to display with the value (e.g., 'kms', 'miles', '%')
+     */
+    unitText?: string;
+    /**
+     * Step value for slider increments
+     * @default 5
+     */
+    step?: number;
+    /**
+     * Formatting options for the value displayed in the slider
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+}
+/**
+ * A slider component that allows users to select a value from a range,
+ * supports configurable step values and value unit post-fix. Use the `onChange` handler
+ * in most instances for retrieving the current 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}
+ *   onChange={handleOnChange}
+ *   minValue={0}
+ *   maxValue={100}
+ *   step={5}
+ *   unitText="kms"
+ * />;
+ */
+export declare const Slider: {
+    ({ 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

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

@@ -0,0 +1,141 @@
+"use strict";
+
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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, { isValidElement } from 'react';
+import { mergeProps, useFocusRing, useNumberFormatter, useSlider, useSliderThumb } from 'react-aria';
+import { useSliderState } from 'react-stately';
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { Box } from "../Box/index.js";
+import { Icon } from "../Icon/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import * as styles from "./Slider.css.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SliderThumb = ({
+  state,
+  trackRef,
+  index,
+  name
+}) => {
+  const inputRef = React.useRef(null);
+  const {
+    thumbProps,
+    inputProps,
+    isDisabled,
+    isDragging
+  } = useSliderThumb({
+    index,
+    trackRef,
+    inputRef,
+    name
+  }, state);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({}, thumbProps), {}, {
+    className: styles.thumb
+  }, dataAttrs({
+    'focus-visible': isFocusVisible,
+    dragging: isDragging,
+    disabled: isDisabled
+  })), {}, {
+    children: /*#__PURE__*/_jsx(VisuallyHidden, {
+      children: /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, mergeProps(inputProps, focusProps)), {}, {
+        ref: inputRef
+      }))
+    })
+  }));
+};
+
+/**
+ * A slider component that allows users to select a value from a range,
+ * supports configurable step values and value unit post-fix. Use the `onChange` handler
+ * in most instances for retrieving the current 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}
+ *   onChange={handleOnChange}
+ *   minValue={0}
+ *   maxValue={100}
+ *   step={5}
+ *   unitText="kms"
+ * />;
+ */
+export const Slider = _ref => {
+  let {
+      formatOptions,
+      label,
+      step = 5,
+      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
+  }));
+  const {
+    groupProps,
+    trackProps,
+    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: [hasTextLabel && /*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({}, labelProps), {}, {
+      className: styles.label,
+      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,
+        children: [state.getThumbValueLabel(0), unitText]
+      }))
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.sliderContainer,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: MinusIcon,
+        size: "medium"
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.trackContainer,
+        children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({}, trackProps), {}, {
+          ref: trackRef,
+          className: styles.track
+        }, dataAttrs({
+          disabled: props.isDisabled
+        })), {}, {
+          children: /*#__PURE__*/_jsx(SliderThumb, {
+            index: 0,
+            state: state,
+            trackRef: trackRef,
+            name: props.name
+          })
+        }))
+      }), /*#__PURE__*/_jsx(Icon, {
+        icon: PlusIcon,
+        size: "medium"
+      })]
+    })]
+  }));
+};
+Slider.displayName = 'Slider';

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

@@ -0,0 +1,2 @@
+export { Slider, type SliderProps } from './Slider';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Slider/index.js

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

package/dist/components/index.d.ts

@@ -44,6 +44,7 @@ export * from './ScrollPane';
 export * from './Section';
 export * from './SelectInput';
 export * from './SimplePagination';
+export * from './Slider';
 export * from './SliderProgress';
 export * from './Stack';
 export * from './StandardModal';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,0BAA0B,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,0BAA0B,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -46,6 +46,7 @@ export * from "./ScrollPane/index.js";
 export * from "./Section/index.js";
 export * from "./SelectInput/index.js";
 export * from "./SimplePagination/index.js";
+export * from "./Slider/index.js";
 export * from "./SliderProgress/index.js";
 export * from "./Stack/index.js";
 export * from "./StandardModal/index.js";

package/dist/styles/selectors.d.ts

@@ -1,10 +1,11 @@
 export declare const selectors: {
     readonly active: "&:active";
     readonly checked: "&:checked, &[data-checked], &[data-selected]";
-    readonly disabled: "&:disabled, &[data-disabled]";
+    readonly disabled: "&:disabled, &[data-disabled], &[aria-disabled=\"true\"]";
     readonly focus: "&:focus, &[data-focus], &[data-focused]";
     readonly focusVisible: "&:focus-visible, &[data-focus-visible]";
     readonly selected: "&[data-selected], &[aria-selected=\"true\"]";
+    readonly unavailable: "&[data-unavailable]";
     readonly hover: string;
     readonly hoverNotDisabled: string;
     readonly hoverNotSelected: string;

package/dist/styles/selectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../lib/styles/selectors.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;CAmBZ,CAAC"}
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../lib/styles/selectors.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;CAoBZ,CAAC"}

package/dist/styles/selectors.js

@@ -7,10 +7,11 @@
 export const selectors = {
   active: '&:active',
   checked: '&:checked, &[data-checked], &[data-selected]',
-  disabled: '&:disabled, &[data-disabled]',
+  disabled: '&:disabled, &[data-disabled], &[aria-disabled="true"]',
   focus: '&:focus, &[data-focus], &[data-focused]',
   focusVisible: '&:focus-visible, &[data-focus-visible]',
   selected: '&[data-selected], &[aria-selected="true"]',
+  unavailable: '&[data-unavailable]',
   get hover() {
     return `&:hover:not(${this.disabled}), &[data-hover]:not(${this.disabled})`;
   },

package/dist/utils/dateFormat.d.ts

@@ -0,0 +1,24 @@
+import { type DateValue } from '@internationalized/date';
+/**
+ * Checks if a given DateValue represents today's date
+ * @param dateValue
+ * @returns boolean
+ */
+export declare function isToday(date: DateValue | string | null | undefined): boolean;
+/**
+ * Formats a date value or ISO date string for display, with special handling for "today"
+ *
+ * @param date - DateValue, ISO date string, or null/undefined
+ * @param format - Intl date formatting style (default: 'medium')
+ * @param locales - Locales for formatting (default: 'en-AU')
+ * @returns Formatted date string or empty string for null/undefined
+ *
+ * @example
+ * ```ts
+ * displayFormattedDate('2025-05-01') // "May 01, 2025"
+ * displayFormattedDate('2024-01-15', 'full') // "Monday, January 15, 2024"
+ * displayFormattedDate('2025-09-21', 'short') // "21/9/25"
+ * ```
+ */
+export declare function displayFormattedDate(date: DateValue | string | null | undefined, format?: Intl.DateTimeFormatOptions['dateStyle'], locales?: Intl.LocalesArgument): string;
+//# sourceMappingURL=dateFormat.d.ts.map

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

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

package/dist/utils/dateFormat.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import { getLocalTimeZone, parseDate, today } from '@internationalized/date';
+
+/**
+ * Checks if a given DateValue represents today's date
+ * @param dateValue
+ * @returns boolean
+ */
+export function isToday(date) {
+  if (!date) return false;
+  if (typeof date === 'string') {
+    try {
+      date = parseDate(date);
+    } catch {
+      return false;
+    }
+  }
+  return date.compare(today(getLocalTimeZone())) === 0;
+}
+
+/**
+ * Formats a date value or ISO date string for display, with special handling for "today"
+ *
+ * @param date - DateValue, ISO date string, or null/undefined
+ * @param format - Intl date formatting style (default: 'medium')
+ * @param locales - Locales for formatting (default: 'en-AU')
+ * @returns Formatted date string or empty string for null/undefined
+ *
+ * @example
+ * ```ts
+ * displayFormattedDate('2025-05-01') // "May 01, 2025"
+ * displayFormattedDate('2024-01-15', 'full') // "Monday, January 15, 2024"
+ * displayFormattedDate('2025-09-21', 'short') // "21/9/25"
+ * ```
+ */
+export function displayFormattedDate(date, format = 'medium', locales = 'en-AU') {
+  if (!date) return '';
+  let dateValue;
+
+  // Handle string input by parsing it
+  if (typeof date === 'string') {
+    try {
+      dateValue = parseDate(date);
+    } catch {
+      return date; // Return original string if parsing fails
+    }
+  } else {
+    dateValue = date;
+  }
+
+  // Format the date using Intl.DateTimeFormat
+  const formatter = new Intl.DateTimeFormat(locales, {
+    dateStyle: format
+  });
+  return formatter.format(dateValue.toDate(getLocalTimeZone()));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.46.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",
@@ -64,39 +64,39 @@
 		"@autoguru/tsconfig": "1.3.1",
 		"@autoguru/utilities": "^1.3.3",
 		"@babel/cli": "7.28.3",
-		"@babel/core": "7.28.3",
+		"@babel/core": "7.28.4",
 		"@babel/plugin-proposal-class-properties": "7.18.6",
 		"@babel/plugin-proposal-export-default-from": "7.27.1",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
 		"@babel/plugin-proposal-object-rest-spread": "7.20.7",
 		"@babel/plugin-proposal-optional-chaining": "7.21.0",
 		"@babel/plugin-syntax-dynamic-import": "7.8.3",
-		"@babel/plugin-transform-classes": "7.28.3",
+		"@babel/plugin-transform-classes": "7.28.4",
 		"@babel/plugin-transform-runtime": "7.28.3",
 		"@babel/plugin-transform-spread": "7.27.1",
 		"@babel/plugin-transform-strict-mode": "7.27.1",
 		"@babel/preset-env": "7.28.3",
 		"@babel/preset-react": "7.27.1",
 		"@babel/preset-typescript": "7.27.1",
-		"@babel/runtime-corejs3": "7.28.3",
+		"@babel/runtime-corejs3": "7.28.4",
 		"@changesets/cli": "2.29.6",
 		"@chromatic-com/storybook": "4.1.1",
 		"@internationalized/date": "3.9.0",
 		"@octokit/rest": "22.0.0",
 		"@popperjs/core": "2.11.8",
 		"@react-stately/toggle": "3.9.1",
-		"@storybook/addon-a11y": "9.1.3",
-		"@storybook/addon-docs": "9.1.3",
-		"@storybook/addon-links": "9.1.3",
-		"@storybook/addon-onboarding": "9.1.3",
-		"@storybook/addon-vitest": "9.1.3",
-		"@storybook/react-vite": "9.1.3",
+		"@storybook/addon-a11y": "9.1.5",
+		"@storybook/addon-docs": "9.1.5",
+		"@storybook/addon-links": "9.1.5",
+		"@storybook/addon-onboarding": "9.1.5",
+		"@storybook/addon-vitest": "9.1.5",
+		"@storybook/react-vite": "9.1.5",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "6.8.0",
 		"@testing-library/react": "16.3.0",
 		"@testing-library/react-hooks": "8.0.1",
 		"@testing-library/user-event": "14.6.1",
-		"@types/node": "24.3.0",
+		"@types/node": "24.3.1",
 		"@types/react": "19.1.12",
 		"@types/react-dom": "19.1.9",
 		"@types/webpack-env": "1.18.8",
@@ -110,7 +110,7 @@
 		"@vanilla-extract/webpack-plugin": "2.3.22",
 		"@vitest/browser": "3.2.4",
 		"@vitest/coverage-v8": "3.2.4",
-		"@vitest/eslint-plugin": "1.3.5",
+		"@vitest/eslint-plugin": "1.3.9",
 		"babel-plugin-add-import-extension": "1.6.0",
 		"babel-plugin-dev-expression": "0.2.3",
 		"babel-plugin-macros": "3.1.0",
@@ -124,16 +124,16 @@
 		"deepmerge": "4.3.1",
 		"es-toolkit": "1.39.10",
 		"eslint": "9.34.0",
-		"eslint-plugin-storybook": "9.1.3",
+		"eslint-plugin-storybook": "9.1.5",
 		"husky": "9.1.7",
 		"intersection-observer": "0.12.2",
 		"jsdom": "26.1.0",
-		"lint-staged": "16.1.5",
-		"magic-string": "0.30.18",
+		"lint-staged": "16.1.6",
+		"magic-string": "0.30.19",
 		"mini-css-extract-plugin": "2.9.4",
 		"mockdate": "3.0.5",
 		"playwright": "1.55.0",
-		"plop": "4.0.1",
+		"plop": "4.0.2",
 		"postcss": "8.5.6",
 		"prettier": "3.6.2",
 		"prop-types": "15.8.1",
@@ -148,11 +148,11 @@
 		"react-stately": "3.41.0",
 		"react-swipeable": "7.0.2",
 		"rollup-plugin-visualizer": "6.0.3",
-		"storybook": "9.1.3",
+		"storybook": "9.1.5",
 		"storybook-addon-tag-badges": "2.0.2",
 		"typescript": "5.9.2",
 		"url-loader": "4.1.1",
-		"vite": "7.1.3",
+		"vite": "7.1.5",
 		"vitest": "3.2.4",
 		"webpack": "5.101.3"
 	},

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"CalendarGrid.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/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;AA8CnD,UAAU,iBAAkB,SAAQ,qBAAqB;IACxD,KAAK,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,qBAAqB,iBAAiB,sBA2ClE,CAAC"}