@autoguru/overdrive 4.45.2 → 4.47.0

package/dist/components/Popover/PopoverTrigger.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { type AriaPopoverProps } from 'react-aria';
+import type { TestIdProp } from '../../types';
+import { type Language } from './Popover';
+/**
+ * Props for the PopoverTrigger component.
+ */
+export interface PopoverTriggerProps extends Pick<AriaPopoverProps, 'offset' | 'placement' | 'shouldCloseOnInteractOutside' | 'shouldFlip'>, TestIdProp {
+    /**
+     * The content to display in the popover
+     */
+    content: React.ReactNode;
+    /**
+     * The element that triggers the popover when interacted with. For accessibility,
+     * this must contain the aria visible content (e.g. "open calender")
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the trigger is disabled and non-interactive
+     */
+    isDisabled?: boolean;
+    /**
+     * Language content override
+     */
+    lang?: Language;
+    /**
+     * Callback that receives the overlay trigger state for external control
+     */
+    onStateReady?: (state: {
+        close: () => void;
+    }) => void;
+}
+/**
+ * A popover component that displays content in an overlay positioned relative to a trigger element.
+ * The popover automatically handles positioning, accessibility, and focus management.
+ *
+ * Note: Button components are not supported as children due to React Aria compatibility issues,
+ * use button tag, plain text, or other elements instead.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger content={<Calendar />}>
+ *   Choose Date
+ * </PopoverTrigger>
+ * ```
+ */
+export declare const PopoverTrigger: {
+    ({ content, children, isDisabled, offset, placement, shouldCloseOnInteractOutside, shouldFlip, testId, lang, onStateReady, }: PopoverTriggerProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=PopoverTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverTrigger.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/PopoverTrigger.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAGN,KAAK,gBAAgB,EACrB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,EAAE,KAAK,QAAQ,EAAW,MAAM,WAAW,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,mBAChB,SAAQ,IAAI,CACV,gBAAgB,EACd,QAAQ,GACR,WAAW,GACX,8BAA8B,GAC9B,YAAY,CACd,EACD,UAAU;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;CACtD;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;kIAWxB,mBAAmB;;CAwErB,CAAC"}

package/dist/components/Popover/PopoverTrigger.js

@@ -0,0 +1,94 @@
+"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 { invariant } from '@autoguru/utilities';
+import React, { useRef } from 'react';
+import { useOverlayTrigger, useButton } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { Button } from "../Button/Button.js";
+import { Popover } from "./Popover.js";
+import { triggerStyle } from "./Popover.css.js";
+/**
+ * Props for the PopoverTrigger component.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A popover component that displays content in an overlay positioned relative to a trigger element.
+ * The popover automatically handles positioning, accessibility, and focus management.
+ *
+ * Note: Button components are not supported as children due to React Aria compatibility issues,
+ * use button tag, plain text, or other elements instead.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger content={<Calendar />}>
+ *   Choose Date
+ * </PopoverTrigger>
+ * ```
+ */
+export const PopoverTrigger = ({
+  content,
+  children,
+  isDisabled,
+  offset,
+  placement,
+  shouldCloseOnInteractOutside,
+  shouldFlip,
+  testId,
+  lang,
+  onStateReady
+}) => {
+  const state = useOverlayTriggerState({});
+  const triggerRef = useRef(null);
+
+  // Provide state access to parent component
+  React.useEffect(() => {
+    if (onStateReady) {
+      onStateReady({
+        close: state.close
+      });
+    }
+  }, [onStateReady, state.close]);
+  const {
+    triggerProps,
+    overlayProps
+  } = useOverlayTrigger({
+    type: 'dialog'
+  }, state, triggerRef);
+  const {
+    buttonProps
+  } = useButton(_objectSpread(_objectSpread({}, triggerProps), {}, {
+    isDisabled
+  }), triggerRef);
+
+  // Validate that Button components are not used as children
+  if (/*#__PURE__*/React.isValidElement(children) && children.type === Button) {
+    !false ? process.env.NODE_ENV !== "production" ? invariant(false, 'PopoverTrigger: The Button component is presently incompatible with ReactAria. Please use a native button or other element for the trigger.') : invariant(false) : void 0;
+  }
+  const isNativeButton = /*#__PURE__*/React.isValidElement(children) && children.type === 'button';
+  const combinedProps = _objectSpread(_objectSpread(_objectSpread({}, buttonProps), dataAttrs({
+    testid: testId
+  })), {}, {
+    ref: triggerRef
+  });
+  const triggerElement = isNativeButton ? (/*#__PURE__*/React.cloneElement(children, combinedProps)) : /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({}, combinedProps), {}, {
+    className: triggerStyle,
+    children: children
+  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [triggerElement, state.isOpen && /*#__PURE__*/_jsx(Popover, _objectSpread(_objectSpread({}, overlayProps), {}, {
+      state: state,
+      triggerRef: triggerRef,
+      placement: placement,
+      offset: offset,
+      shouldCloseOnInteractOutside: shouldCloseOnInteractOutside,
+      shouldFlip: shouldFlip,
+      lang: lang,
+      children: content
+    }))]
+  });
+};
+PopoverTrigger.displayName = 'PopoverTrigger';

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

@@ -0,0 +1,5 @@
+export { Popover } from './Popover';
+export { PopoverTrigger } from './PopoverTrigger';
+export type { PopoverProps } from './Popover';
+export type { PopoverTriggerProps } from './PopoverTrigger';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Popover/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Popover } from "./Popover.js";
+export { PopoverTrigger } from "./PopoverTrigger.js";

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

@@ -1,16 +1,11 @@
-export declare const styledSearchBar: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+export declare const searchBarStyle: string;
+export declare const inputStyle: string;
+export declare const clearButtonVariants: import("@vanilla-extract/recipes").RuntimeFn<{
+    hasValue: {
+        false: {};
     };
-}>;
-export declare const styledInput: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
-export declare const styledClearButton: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    isFocused: {
+        false: {};
     };
 }>;
 export declare const fieldWrapper: string;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.css.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe;;;;EAkC1B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;EAetB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;EAgB5B,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC"}
+{"version":3,"file":"SearchBar.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.css.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,cAAc,QAsCzB,CAAC;AAEH,eAAO,MAAM,UAAU,QAiBrB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;EA2C9B,CAAC;AAEH,eAAO,MAAM,YAAY,QAQvB,CAAC"}

package/dist/components/SearchBar/SearchBar.css.js

@@ -5,86 +5,141 @@ __vanilla_filescope__.setFileScope("lib/components/SearchBar/SearchBar.css.ts",
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
+import { cssLayerComponent } from "../../styles/layers.css.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
-import { tokens } from "../../themes/base/tokens.js";
-import { interactionStyle } from "../../utils/css.js";
+import { overdriveTokens as tokens } from "../../themes/theme.css.js";
 const hideWebkitAppearance = style({
-  selectors: {
-    '&::-webkit-search-cancel-button, &::-webkit-search-decoration': {
-      appearance: 'none'
+  '@layer': {
+    [cssLayerComponent]: {
+      selectors: {
+        '&::-webkit-search-cancel-button, &::-webkit-search-decoration': {
+          appearance: 'none'
+        }
+      }
     }
   }
 }, "hideWebkitAppearance");
 const placeholder = style({
-  selectors: {
-    '&::placeholder': {
-      color: tokens.colours.gamut.gray400
-    },
-    '&:disabled::placeholder': {
-      color: tokens.colours.gamut.gray300
+  '@layer': {
+    [cssLayerComponent]: {
+      selectors: {
+        '&::placeholder': {
+          color: tokens.colours.gamut.gray400
+        },
+        '&:disabled::placeholder': {
+          color: tokens.colours.gamut.gray300
+        }
+      }
     }
   }
 }, "placeholder");
-export const styledSearchBar = recipe({
-  base: [{
-    alignItems: 'center',
-    backgroundColor: tokens.colours.background.body,
-    borderColor: tokens.border.colours.gray,
-    borderRadius: tokens.border.radius['md'],
-    borderStyle: 'solid',
-    borderWidth: tokens.border.width[2],
-    color: tokens.colours.gamut.gray400,
-    display: 'flex',
-    gap: tokens.space[2],
-    padding: `0 ${tokens.space[4]}`
-  }, interactionStyle({
-    focus: {
-      borderColor: tokens.border.colours.dark,
-      color: tokens.colours.gamut.gray900
-    },
-    disabled: {
-      borderColor: tokens.border.colours.light,
-      cursor: 'not-allowed',
-      color: tokens.colours.gamut.gray300
-    },
-    hover: {
-      cursor: 'text'
-    },
-    hoverNotFocus: {
-      backgroundColor: tokens.border.colours.light,
-      borderColor: tokens.border.colours.light
+export const searchBarStyle = style([{
+  '@layer': {
+    [cssLayerComponent]: {
+      alignItems: 'center',
+      backgroundColor: tokens.colours.background.body,
+      borderColor: tokens.border.colours.gray,
+      borderRadius: tokens.border.radius['md'],
+      borderStyle: 'solid',
+      borderWidth: tokens.border.width[2],
+      color: tokens.colours.gamut.gray400,
+      display: 'flex',
+      gap: tokens.space[2],
+      padding: `0 ${tokens.space[4]}`,
+      selectors: {
+        '&:focus, &[data-focus], &[data-focused]': {
+          borderColor: tokens.border.colours.dark,
+          color: tokens.colours.gamut.gray900
+        },
+        '&:disabled, &[data-disabled]': {
+          borderColor: tokens.border.colours.light,
+          color: tokens.colours.gamut.gray300,
+          cursor: 'not-allowed'
+        },
+        '&:hover:not(:disabled,[data-disabled]), &[data-hover]:not(:disabled,[data-disabled])': {
+          cursor: 'text'
+        },
+        '&:hover:not(:focus,[data-focus],[data-focused]):not(:disabled,[data-disabled]), &[data-hover]:not(:focus,[data-focus],[data-focused]):not(:disabled,[data-disabled])': {
+          backgroundColor: tokens.border.colours.light,
+          borderColor: tokens.border.colours.light
+        }
+      }
+    }
+  }
+}, focusOutlineStyle], "searchBarStyle");
+export const inputStyle = style([{
+  '@layer': {
+    [cssLayerComponent]: {
+      background: 'transparent',
+      borderWidth: 0,
+      cursor: 'inherit',
+      fontSize: tokens.typography.size[8].fontSize,
+      height: '72px',
+      outlineStyle: 'none',
+      textAlign: 'center',
+      width: '100%'
     }
-  }), focusOutlineStyle]
-}, "styledSearchBar");
-export const styledInput = recipe({
-  base: [{
-    background: 'transparent',
-    borderWidth: 0,
-    cursor: 'inherit',
-    fontSize: tokens.typography.size[8].fontSize,
-    height: '72px',
-    outlineStyle: 'none',
-    textAlign: 'center',
-    width: '100%'
-  }, hideWebkitAppearance, placeholder]
-}, "styledInput");
-export const styledClearButton = recipe({
-  base: [{
+  }
+}, hideWebkitAppearance, placeholder], "inputStyle");
+export const clearButtonVariants = recipe({
+  base: [sprinkles({
     alignItems: 'center',
-    background: 'transparent',
     borderStyle: 'none',
-    cursor: 'pointer',
-    display: 'flex',
     justifyContent: 'center',
-    padding: 0,
-    position: 'relative'
-  }, sprinkles({
+    opacity: '1',
+    p: 'none',
+    pointerEvents: 'auto',
+    position: 'relative',
     size: '6'
-  })]
-}, "styledClearButton");
+  }), {
+    '@layer': {
+      [cssLayerComponent]: {
+        background: 'transparent',
+        cursor: 'pointer'
+      }
+    }
+  }],
+  variants: {
+    hasValue: {
+      false: {}
+    },
+    isFocused: {
+      false: {}
+    }
+  },
+  compoundVariants: [{
+    variants: {
+      hasValue: false
+    },
+    style: sprinkles({
+      display: 'none'
+    })
+  }, {
+    variants: {
+      hasValue: true,
+      isFocused: false
+    },
+    style: sprinkles({
+      opacity: '0',
+      pointerEvents: 'none'
+    })
+  }, {
+    variants: {
+      hasValue: true,
+      isFocused: true
+    },
+    style: sprinkles({
+      display: 'flex'
+    })
+  }]
+}, "clearButtonVariants");
 export const fieldWrapper = style({
-  alignItems: 'center',
-  display: 'flex',
-  flexGrow: 1
+  '@layer': {
+    [cssLayerComponent]: {
+      alignItems: 'center',
+      display: 'flex',
+      flexGrow: 1
+    }
+  }
 }, "fieldWrapper");
 __vanilla_filescope__.endFileScope();

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAMN,KAAK,oBAAoB,EACzB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAY9C,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,UAAU,cAAe,SAAQ,oBAAoB,EAAE,UAAU;IAChE,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5C;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAClC;AAYD;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GAAI,gBAAgB,cAAc,sBAiEvD,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../lib/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAMN,KAAK,oBAAoB,EACzB,MAAM,YAAY,CAAC;AAIpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAY9C,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,UAAU,cAAe,SAAQ,oBAAoB,EAAE,UAAU;IAChE,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5C;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAClC;AAYD;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,GAAI,gBAAgB,cAAc,sBAuEvD,CAAC"}

package/dist/components/SearchBar/SearchBar.js

@@ -7,10 +7,11 @@ import { MagnifyIcon, CloseIcon } from '@autoguru/icons';
 import React from 'react';
 import { mergeProps, useButton, useFocusRing, useSearchField } from 'react-aria';
 import { useSearchFieldState } from 'react-stately';
+import { sprinkles } from "../../styles/index.js";
 import { mergeRefs } from "../../utils/index.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/index.js";
-import { fieldWrapper, styledClearButton, styledInput, styledSearchBar } from "./SearchBar.css.js";
+import { fieldWrapper, clearButtonVariants, inputStyle, searchBarStyle } from "./SearchBar.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultEnglish = {
   label: 'Search',
@@ -65,9 +66,14 @@ export const SearchBar = componentProps => {
     (_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : _refInput$current.focus();
   };
   const ClearButton = () => {
-    if (state.value === '') return null;
+    var _componentProps$lang$, _componentProps$lang;
+    const hasValue = state.value !== '';
     return /*#__PURE__*/_jsx(ReactAriaButton, _objectSpread(_objectSpread({
-      className: styledClearButton({})
+      className: clearButtonVariants({
+        hasValue,
+        isFocused
+      }),
+      "aria-label": (_componentProps$lang$ = (_componentProps$lang = componentProps.lang) === null || _componentProps$lang === void 0 ? void 0 : _componentProps$lang.clear) !== null && _componentProps$lang$ !== void 0 ? _componentProps$lang$ : defaultEnglish.clear
     }, clearButtonProps), {}, {
       children: /*#__PURE__*/_jsx(Icon, {
         icon: CloseIcon,
@@ -79,7 +85,7 @@ export const SearchBar = componentProps => {
     /*#__PURE__*/
     // this is a pass-through for mouse/touch interaction, the interactive element is keyboard focusable
     _jsxs("div", _objectSpread(_objectSpread({
-      className: styledSearchBar({}),
+      className: searchBarStyle,
       onClick: handleWrapperClick,
       ref: refWrapper
     }, dataAttrs({
@@ -88,15 +94,16 @@ export const SearchBar = componentProps => {
       'focus-visible': isFocusVisible,
       testid: props.testId
     })), {}, {
-      children: [/*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: MagnifyIcon,
-          size: "large"
-        })
+      children: [/*#__PURE__*/_jsx(Icon, {
+        className: sprinkles({
+          flexShrink: '0'
+        }),
+        icon: MagnifyIcon,
+        size: "large"
       }), /*#__PURE__*/_jsxs("div", {
         className: fieldWrapper,
         children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, mergeProps(inputProps, focusProps)), {}, {
-          className: styledInput({}),
+          className: inputStyle,
           ref: mergeRefs([refInput, refForwarded])
         })), /*#__PURE__*/_jsx(ClearButton, {})]
       })]

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

@@ -0,0 +1,9 @@
+export declare const container: string;
+export declare const label: string;
+export declare const valueDisplay: string;
+export declare const valueText: string;
+export declare const sliderContainer: string;
+export declare const trackContainer: string;
+export declare const track: string;
+export declare const thumb: string;
+//# sourceMappingURL=Slider.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Slider/Slider.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAIhB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,eAAe,QAK1B,CAAC;AAEH,eAAO,MAAM,cAAc,QAIzB,CAAC;AAEH,eAAO,MAAM,KAAK,QAoBhB,CAAC;AAEH,eAAO,MAAM,KAAK,QAkChB,CAAC"}

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 {
+    /**
+     * Optional label for the slider
+     */
+    label?: string;
+    /**
+     * 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.
+ *
+ * @example
+ * const handleOnChange = (value) => {
+ *   console.log('Distance changed to:', value);
+ * };
+ *
+ * <Slider
+ *   label="Distance"
+ *   value={distance}
+ *   onChange={handleOnChange}
+ *   minValue={0}
+ *   maxValue={100}
+ *   step={5}
+ *   unitText="kms"
+ * />;
+ */
+export declare const Slider: {
+    ({ testId, unitText, step, formatOptions, ...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,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"}