@autoguru/overdrive 4.45.2 → 4.47.0

package/dist/components/Slider/Slider.js

@@ -0,0 +1,137 @@
+"use strict";
+
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["testId", "unitText", "step", "formatOptions"];
+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 { 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.
+ *
+ * @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 const Slider = _ref => {
+  let {
+      testId,
+      unitText = '',
+      step = 5,
+      formatOptions
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const trackRef = React.useRef(null);
+  const numberFormatter = useNumberFormatter(formatOptions);
+  const state = useSliderState(_objectSpread(_objectSpread({}, props), {}, {
+    step,
+    numberFormatter
+  }));
+  const {
+    groupProps,
+    trackProps,
+    labelProps,
+    outputProps
+  } = useSlider(_objectSpread(_objectSpread({}, props), {}, {
+    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), {}, {
+      className: styles.label,
+      children: props.label
+    })), /*#__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/hooks/useMedia/useMedia.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useMedia.spec.d.ts.map

package/dist/hooks/useMedia/useMedia.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMedia.spec.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useMedia/useMedia.spec.ts"],"names":[],"mappings":""}

package/dist/hooks/useMedia/useMedia.spec.js

@@ -0,0 +1,288 @@
+"use strict";
+
+import { renderHook, act } from '@testing-library/react';
+import React from 'react';
+import { OverdriveProvider } from "../../components/OverdriveProvider/index.js";
+import baseTheme from "../../themes/base/index.js";
+import { useMedia } from "./useMedia.js"; // Mock the utils module to control isBrowser
+vi.mock('../../utils', () => ({
+  isBrowser: true
+}));
+
+// Mock window.matchMedia since it's not available in test environment
+const mockMatchMedia = vi.fn();
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: mockMatchMedia
+});
+
+// Helper to create a mock MediaQueryList
+const createMockMediaQueryList = (matches = false) => ({
+  matches,
+  media: '',
+  onchange: null,
+  addListener: vi.fn(),
+  // deprecated but still used by some
+  removeListener: vi.fn(),
+  // deprecated but still used by some
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn()
+});
+
+// Wrapper component with OverdriveProvider
+const createWrapper = () => {
+  // eslint-disable-next-line react/display-name
+  return ({
+    children
+  }) => /*#__PURE__*/React.createElement(OverdriveProvider, {
+    theme: baseTheme
+  }, children);
+};
+describe('useMedia hook', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Default mock implementation
+    mockMatchMedia.mockImplementation(() => createMockMediaQueryList(false));
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // Note: SSR testing is complex due to static imports, focusing on browser behavior
+
+  describe('Browser environment', () => {
+    it('creates media queries with correct breakpoint values', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValue(mockMQL);
+      renderHook(() => useMedia(['mobile', 'tablet']), {
+        wrapper: createWrapper()
+      });
+
+      // Should be called twice for each query, once for initial and once for effect
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 0px)'); // mobile
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 768px)'); // tablet
+    });
+    it('returns initial matches state', () => {
+      const mockMobileMatch = createMockMediaQueryList(true);
+      const mockTabletMatch = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValueOnce(mockMobileMatch) // initial mobile
+      .mockReturnValueOnce(mockTabletMatch) // initial tablet
+      .mockReturnValueOnce(mockMobileMatch) // effect mobile
+      .mockReturnValueOnce(mockTabletMatch); // effect tablet
+
+      const {
+        result
+      } = renderHook(() => useMedia(['mobile', 'tablet']), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([true, false]);
+    });
+    it('sets up event listeners for media query changes', () => {
+      const mockMQL1 = createMockMediaQueryList(false);
+      const mockMQL2 = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValueOnce(mockMQL1).mockReturnValueOnce(mockMQL2).mockReturnValueOnce(mockMQL1).mockReturnValueOnce(mockMQL2);
+      renderHook(() => useMedia(['mobile', 'tablet']), {
+        wrapper: createWrapper()
+      });
+      expect(mockMQL1.addEventListener).toHaveBeenCalledWith('change', expect.any(Function), {
+        passive: true
+      });
+      expect(mockMQL2.addEventListener).toHaveBeenCalledWith('change', expect.any(Function), {
+        passive: true
+      });
+    });
+    it('updates state when media query changes', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      let changeHandler;
+      mockMQL.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') {
+          changeHandler = handler;
+        }
+      });
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        result
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([false]);
+
+      // Simulate media query change
+      act(() => {
+        changeHandler({
+          matches: true
+        });
+      });
+      expect(result.current).toEqual([true]);
+    });
+    it('handles multiple media query changes independently', () => {
+      const mockMQL1 = createMockMediaQueryList(false);
+      const mockMQL2 = createMockMediaQueryList(false);
+      let changeHandler1;
+      let changeHandler2;
+      mockMQL1.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') changeHandler1 = handler;
+      });
+      mockMQL2.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') changeHandler2 = handler;
+      });
+      mockMatchMedia.mockReturnValueOnce(mockMQL1).mockReturnValueOnce(mockMQL2).mockReturnValueOnce(mockMQL1).mockReturnValueOnce(mockMQL2);
+      const {
+        result
+      } = renderHook(() => useMedia(['mobile', 'tablet']), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([false, false]);
+
+      // Change first media query
+      act(() => {
+        changeHandler1({
+          matches: true
+        });
+      });
+      expect(result.current).toEqual([true, false]);
+
+      // Change second media query
+      act(() => {
+        changeHandler2({
+          matches: true
+        });
+      });
+      expect(result.current).toEqual([true, true]);
+    });
+    it('removes event listeners on unmount', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        unmount
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      expect(mockMQL.removeEventListener).not.toHaveBeenCalled();
+      unmount();
+      expect(mockMQL.removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+    });
+    it('prevents state updates after unmount', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      let changeHandler;
+      mockMQL.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') changeHandler = handler;
+      });
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        result,
+        unmount
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      const initialResult = result.current;
+      unmount();
+
+      // Simulate change after unmount - should not update state
+      act(() => {
+        changeHandler({
+          matches: true
+        });
+      });
+
+      // State should remain unchanged after unmount
+      expect(result.current).toBe(initialResult);
+    });
+    it('updates listeners when queries change', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        rerender
+      } = renderHook(({
+        queries
+      }) => useMedia(queries), {
+        wrapper: createWrapper(),
+        initialProps: {
+          queries: ['mobile']
+        }
+      });
+
+      // Change queries
+      rerender({
+        queries: ['tablet', 'desktop']
+      });
+
+      // Should have been called more times now with the new queries
+      expect(mockMatchMedia.mock.calls.length).toBeGreaterThan(2);
+    });
+    it('handles all standard breakpoint keys', () => {
+      const allBreakpoints = ['mobile', 'tablet', 'desktop', 'largeDesktop'];
+      mockMatchMedia.mockReturnValue(createMockMediaQueryList(false));
+      const {
+        result
+      } = renderHook(() => useMedia(allBreakpoints), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toHaveLength(4);
+      expect(result.current).toEqual([false, false, false, false]);
+
+      // Verify correct media queries were created
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 0px)'); // mobile
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 768px)'); // tablet
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 1024px)'); // desktop
+      expect(mockMatchMedia).toHaveBeenCalledWith('(min-width: 1920px)'); // largeDesktop
+    });
+    it('handles empty queries array in browser', () => {
+      mockMatchMedia.mockReturnValue(createMockMediaQueryList(false));
+      const {
+        result
+      } = renderHook(() => useMedia([]), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([]);
+      expect(mockMatchMedia).not.toHaveBeenCalled();
+    });
+    it('maintains referential stability when values do not change', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        result,
+        rerender
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      const firstResult = result.current;
+      rerender();
+
+      // Should maintain the same reference when values haven't changed
+      expect(result.current).toBe(firstResult);
+    });
+  });
+  describe('Edge cases', () => {
+    it('handles rapid successive changes', () => {
+      const mockMQL = createMockMediaQueryList(false);
+      let changeHandler;
+      mockMQL.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'change') changeHandler = handler;
+      });
+      mockMatchMedia.mockReturnValue(mockMQL);
+      const {
+        result
+      } = renderHook(() => useMedia(['mobile']), {
+        wrapper: createWrapper()
+      });
+      expect(result.current).toEqual([false]);
+
+      // Rapid changes
+      act(() => {
+        changeHandler({
+          matches: true
+        });
+        changeHandler({
+          matches: false
+        });
+        changeHandler({
+          matches: true
+        });
+      });
+      expect(result.current).toEqual([true]);
+    });
+  });
+});

package/dist/styles/selectors.d.ts

@@ -0,0 +1,14 @@
+export declare const selectors: {
+    readonly active: "&:active";
+    readonly checked: "&:checked, &[data-checked], &[data-selected]";
+    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;
+    readonly focusVisibleNotSelected: string;
+};
+//# sourceMappingURL=selectors.d.ts.map

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

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

@@ -0,0 +1,27 @@
+"use strict";
+
+// === Common selector patterns for consistent interactive states
+// These patterns provide a standardized way to target element states across components and
+// include support for both pseudo-classes and data attributes used by libraries like React Aria
+
+export const selectors = {
+  active: '&:active',
+  checked: '&:checked, &[data-checked], &[data-selected]',
+  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})`;
+  },
+  get hoverNotDisabled() {
+    return `&:hover:not(${this.disabled}), &[data-hover]:not(${this.disabled})`;
+  },
+  get hoverNotSelected() {
+    return `&:hover:not(${this.disabled}, ${this.selected}), &[data-hover]:not(${this.disabled}, ${this.selected})`;
+  },
+  get focusVisibleNotSelected() {
+    return `&:focus-visible:not(${this.disabled}, ${this.selected}), &[data-focus-visible]:not(${this.disabled}, ${this.selected})`;
+  }
+};

package/dist/utils/css.d.ts

@@ -1,25 +1,3 @@
-import type { StyleRule } from '@vanilla-extract/css';
 export declare const cssVarUnwrap: (value: string) => string;
 export declare const getThemeTokenValue: (themeClass?: string | null, token?: string | null) => string;
-export type SelectorStates = 'base' | 'active' | 'checked' | 'selected' | 'disabled' | 'focus' | 'focusVisible' | 'hover' | 'hoverNotFocus' | 'hoverNotSelected';
-export type InteractionStyleProps = Partial<Record<SelectorStates, StyleRule>>;
-export declare const notDisabled = ":not(:disabled,[data-disabled])";
-export declare const notFocused = ":not(:focus,[data-focus],[data-focused])";
-export declare const notSelected = ":not(:checked,[data-checked],[data-selected])";
-/**
- * Creates style variants for different interaction states that can be spread
- * within vanilla-extract `style` object.
- *
- * @example
- * const buttonStyle = style({
- *   backgroundColor: tokens.colours.background.primary,
- *   color: tokens.colours.text.primary,
- *   ...interactionStyle({
- *     initial: { background: 'white', color: 'black' },
- *     hover: { background: 'lightgray' },
- *     disabled: { opacity: 0.5 }
- *   })
- * });
- */
-export declare const interactionStyle: (selectors: InteractionStyleProps) => StyleRule;
 //# sourceMappingURL=css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../lib/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAItD,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC9B,aAAa,MAAM,GAAG,IAAI,EAC1B,QAAQ,MAAM,GAAG,IAAI,KACnB,MAQF,CAAC;AAEF,MAAM,MAAM,cAAc,GACvB,MAAM,GACN,QAAQ,GACR,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,cAAc,GACd,OAAO,GACP,eAAe,GACf,kBAAkB,CAAC;AACtB,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC;AAG/E,eAAO,MAAM,WAAW,oCAAoC,CAAC;AAC7D,eAAO,MAAM,UAAU,6CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,kDAAkD,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,GAC5B,WAAW,qBAAqB,KAC9B,SAwBF,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../lib/utils/css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC9B,aAAa,MAAM,GAAG,IAAI,EAC1B,QAAQ,MAAM,GAAG,IAAI,KACnB,MAQF,CAAC"}

package/dist/utils/css.js

@@ -1,10 +1,5 @@
 "use strict";
 
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["base"];
-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; }
 const cssVarRegExp = /var\(([^)]+)\)/;
 export const cssVarUnwrap = value => {
   const matches = cssVarRegExp.exec(value);
@@ -17,51 +12,4 @@ export const getThemeTokenValue = (themeClass, token) => {
   const themedElement = document.querySelector(`.${themeClass}`);
   if (!themedElement || !cssVar) return '';
   return ((_getComputedStyle$get = getComputedStyle(themedElement).getPropertyValue(cssVar)) === null || _getComputedStyle$get === void 0 ? void 0 : _getComputedStyle$get.trim()) || '';
-};
-export const notDisabled = ':not(:disabled,[data-disabled])';
-export const notFocused = ':not(:focus,[data-focus],[data-focused])';
-export const notSelected = ':not(:checked,[data-checked],[data-selected])';
-
-/**
- * Creates style variants for different interaction states that can be spread
- * within vanilla-extract `style` object.
- *
- * @example
- * const buttonStyle = style({
- *   backgroundColor: tokens.colours.background.primary,
- *   color: tokens.colours.text.primary,
- *   ...interactionStyle({
- *     initial: { background: 'white', color: 'black' },
- *     hover: { background: 'lightgray' },
- *     disabled: { opacity: 0.5 }
- *   })
- * });
- */
-export const interactionStyle = selectors => {
-  const {
-      base = {}
-    } = selectors,
-    interactionStyles = _objectWithoutProperties(selectors, _excluded);
-  const styles = _objectSpread(_objectSpread({}, base), {}, {
-    selectors: {}
-  });
-  const rules = {
-    hover: `&:hover${notDisabled}, &[data-hover]${notDisabled}`,
-    hoverNotFocus: `&:hover${notFocused}${notDisabled}, &[data-hover]${notFocused}${notDisabled}`,
-    hoverNotSelected: `&:hover${notSelected}${notDisabled}, &[data-hover]${notSelected}${notDisabled}`,
-    active: '&:active',
-    selected: '&:checked, &[data-checked], &[data-selected]',
-    focus: '&:focus, &[data-focus], &[data-focused]',
-    focusVisible: '&:focus-visible, &[data-focus-visible]',
-    disabled: '&:disabled, &[data-disabled]'
-  };
-
-  // Add selectors for each interaction state that has styles
-  Object.entries(interactionStyles).forEach(([state, stateStyles]) => {
-    if (state in rules && stateStyles) {
-      if (state === 'checked') state = 'selected';
-      styles.selectors[rules[state]] = stateStyles;
-    }
-  });
-  return styles;
 };

package/dist/utils/css.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=css.spec.d.ts.map

package/dist/utils/css.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.spec.d.ts","sourceRoot":"","sources":["../../lib/utils/css.spec.ts"],"names":[],"mappings":""}