@autoguru/overdrive 4.48.0 → 4.50.0

package/dist/components/Popover/PopoverTrigger.js

@@ -39,19 +39,22 @@ export const PopoverTrigger = ({
   shouldFlip,
   testId,
   lang,
+  ref,
   onStateReady
 }) => {
   const state = useOverlayTriggerState({});
-  const triggerRef = useRef(null);
+  const internalRef = useRef(null);
+  const triggerRef = ref !== null && ref !== void 0 ? ref : internalRef;
 
   // Provide state access to parent component
   React.useEffect(() => {
     if (onStateReady) {
       onStateReady({
-        close: state.close
+        close: state.close,
+        isOpen: state.isOpen
       });
     }
-  }, [onStateReady, state.close]);
+  }, [onStateReady, state.close, state.isOpen]);
   const {
     triggerProps,
     overlayProps

package/dist/components/Tabs/Tabs.d.ts

@@ -10,11 +10,55 @@ interface TabsContextValue {
     getTabCount: () => number;
 }
 export declare const TabsContext: React.Context<TabsContextValue | null>;
+/**
+ * ## Tabs
+ *
+ * A tabbed interface component that manages tab navigation and content panels. The tabs system consists of several coordinated components:
+ *
+ * ### Component Structure
+ *
+ * - **Tabs** - Root container that provides context and state management
+ * - **TabList** - Container for tab navigation elements with keyboard navigation and scrolling support
+ * - **Tab** - Individual clickable tab with support for indications and custom rendering
+ * - **TabPanes** - Container for tab content panels with optional inactive rendering
+ * - **TabPane** - Individual content panel associated with each tab
+ *
+ * ### Component Props Overview
+ *
+ * #### TabList Props
+ * - `stretch?: boolean` - Whether tabs should stretch to fill available width
+ * - `scrollable?: boolean` - Enable horizontal scrolling with navigation buttons (cannot be used with stretch)
+ *
+ * #### Tab Props
+ * - `id?: string` - Custom ID for the tab element (auto-generated if not provided)
+ * - `as?: ElementType | ReactElement` - Custom component or element to render the tab as
+ * - `indication?: number` - Optional numeric badge displayed on the tab
+ *
+ * #### TabPanes Props
+ * - `renderInactivePanes?: boolean` - Whether to render inactive tab panels in the DOM (hidden but present)
+ * - `paddingTop?: string` - Top padding for the panes container (default: '6')
+ * - `paddingBottom?: string` - Bottom padding for the panes container (default: '6')
+ *
+ * #### TabPane Props
+ * - `id?: string` - Custom ID for the tab panel element (auto-generated if not provided)
+ *
+ * ### Visual Variants
+ *
+ * The `appearance` prop supports different visual styles:
+ * - `"underlined"` (default) - Tabs with bottom border indication
+ * - `"pill"`
+ * - `"minimal"`
+ */
 export interface TabsProps {
+    /** Custom ID for the tabs container. Auto-generated if not provided. */
     id?: string | null;
+    /** Index of the currently active tab (0-based) */
     active: number;
+    /** Visual appearance style for the tabs */
     appearance?: TabAppearance;
+    /** Tab navigation and content elements (typically TabList and TabPanes) */
     children?: ReactNode;
+    /** Callback fired when the active tab changes */
     onChange?: (index: number) => void;
 }
 export declare const Tabs: FunctionComponent<TabsProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEb,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,UAAU,gBAAgB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IACnD,WAAW,EAAE,MAAM,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE,MAAM,WAAW,SAAS;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAuD7C,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEb,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,UAAU,gBAAgB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IACnD,WAAW,EAAE,MAAM,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,SAAS;IACzB,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAuD7C,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -4,6 +4,47 @@ import React, { createContext, useCallback, useMemo, useRef } from 'react';
 import { useId, useUncontrolledState } from "../../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TabsContext = /*#__PURE__*/createContext(null);
+
+/**
+ * ## Tabs
+ *
+ * A tabbed interface component that manages tab navigation and content panels. The tabs system consists of several coordinated components:
+ *
+ * ### Component Structure
+ *
+ * - **Tabs** - Root container that provides context and state management
+ * - **TabList** - Container for tab navigation elements with keyboard navigation and scrolling support
+ * - **Tab** - Individual clickable tab with support for indications and custom rendering
+ * - **TabPanes** - Container for tab content panels with optional inactive rendering
+ * - **TabPane** - Individual content panel associated with each tab
+ *
+ * ### Component Props Overview
+ *
+ * #### TabList Props
+ * - `stretch?: boolean` - Whether tabs should stretch to fill available width
+ * - `scrollable?: boolean` - Enable horizontal scrolling with navigation buttons (cannot be used with stretch)
+ *
+ * #### Tab Props
+ * - `id?: string` - Custom ID for the tab element (auto-generated if not provided)
+ * - `as?: ElementType | ReactElement` - Custom component or element to render the tab as
+ * - `indication?: number` - Optional numeric badge displayed on the tab
+ *
+ * #### TabPanes Props
+ * - `renderInactivePanes?: boolean` - Whether to render inactive tab panels in the DOM (hidden but present)
+ * - `paddingTop?: string` - Top padding for the panes container (default: '6')
+ * - `paddingBottom?: string` - Bottom padding for the panes container (default: '6')
+ *
+ * #### TabPane Props
+ * - `id?: string` - Custom ID for the tab panel element (auto-generated if not provided)
+ *
+ * ### Visual Variants
+ *
+ * The `appearance` prop supports different visual styles:
+ * - `"underlined"` (default) - Tabs with bottom border indication
+ * - `"pill"`
+ * - `"minimal"`
+ */
+
 export const Tabs = ({
   id: incomingId,
   active = 0,

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

@@ -0,0 +1,18 @@
+import { cssLayerComponent } from '../../styles/layers.css';
+export declare const toggleButtonsContainer: string;
+export declare const toggleButtonsContainerStyle: string;
+export declare const toggleButtonGroup: import("@vanilla-extract/recipes").RuntimeFn<{
+    iconOnly: {
+        true: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    color: `var(--${string})`;
+                    display: "block";
+                    lineHeight: number;
+                };
+            };
+        };
+    };
+}>;
+export declare const toggleButton: string;
+//# sourceMappingURL=ToggleButtons.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtons.css.d.ts","sourceRoot":"","sources":["../../../lib/components/ToggleButtons/ToggleButtons.css.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAS5D,eAAO,MAAM,sBAAsB,QAAoB,CAAC;AACxD,eAAO,MAAM,2BAA2B,QAOtC,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;gBAuBzB,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;EAQJ,CAAC;AAIH,eAAO,MAAM,YAAY,QA0FvB,CAAC"}

package/dist/components/ToggleButtons/ToggleButtons.css.js

@@ -0,0 +1,138 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/ToggleButtons/ToggleButtons.css.ts", "@autoguru/overdrive");
+import { createContainer, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { elementReset } from "../../styles/elementReset.css.js";
+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";
+import { WIDTH_COMPACT_ORIENTATION } from "./ToggleButtons.js";
+const TOGGLE_BUTTON_HEIGHT = '40px';
+export const toggleButtonsContainer = createContainer("toggleButtonsContainer");
+export const toggleButtonsContainerStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      containerName: toggleButtonsContainer,
+      containerType: 'inline-size'
+    }
+  }
+}, "toggleButtonsContainerStyle");
+export const toggleButtonGroup = recipe({
+  base: [{
+    '@layer': {
+      [cssLayerComponent]: {
+        color: vars.color.gamut.gray[500],
+        display: 'grid',
+        gridTemplateColumns: '1fr',
+        '@container': {
+          [`${toggleButtonsContainer} (min-width: ${WIDTH_COMPACT_ORIENTATION}px)`]: {
+            gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr))'
+          }
+        }
+      }
+    }
+  }],
+  variants: {
+    iconOnly: {
+      true: {
+        '@layer': {
+          [cssLayerComponent]: {
+            color: vars.color.content.normal,
+            display: 'block',
+            lineHeight: 1
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    iconOnly: false
+  }
+}, "toggleButtonGroup");
+const selectorNotIconOnly = `${toggleButtonGroup.classNames.base}:not([data-icon-only])`;
+export const toggleButton = style([elementReset.button, focusOutlineStyle, sprinkles({
+  backgroundColor: 'page',
+  borderColour: 'gray',
+  borderStyle: 'solid',
+  borderWidth: '1',
+  px: '3',
+  text: '4',
+  textWrap: 'nowrap'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      appearance: 'none',
+      color: 'inherit',
+      height: TOGGLE_BUTTON_HEIGHT,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      transitionDuration: '0.1s',
+      transitionProperty: 'background-color, border-color, box-shadow, color',
+      transitionTimingFunction: vars.animation.easing.standard,
+      userSelect: 'none',
+      selectors: {
+        '&:first-child': {
+          borderBottomLeftRadius: vars.border.radius.md,
+          borderTopLeftRadius: vars.border.radius.md
+        },
+        '&:last-child': {
+          borderBottomRightRadius: vars.border.radius.md,
+          borderTopRightRadius: vars.border.radius.md
+        },
+        '&:focus-visible': {
+          position: 'relative',
+          zIndex: 1
+        },
+        '&+&': {
+          borderLeftStyle: 'none'
+        },
+        [selectors.hoverNotDisabled]: {
+          cursor: 'pointer'
+        },
+        [selectors.hoverNotSelected]: {
+          backgroundColor: vars.color.gamut.gray[200],
+          boxShadow: 'inset 0 1px 5px 0 rgba(0, 0, 0, 0.03), inset 0 2px 2px 0 rgba(0, 0, 0, 0.03), inset 0 3px 1px -2px rgba(0, 0, 0, 0.05)',
+          transitionDelay: '50ms',
+          transitionDuration: '0.2s'
+        },
+        [selectors.selected]: {
+          backgroundColor: vars.color.surface.hard,
+          borderColor: vars.color.surface.hard,
+          color: vars.color.content.inverse
+        },
+        [selectors.disabled]: {
+          cursor: 'not-allowed',
+          opacity: 0.6
+        }
+      },
+      // Container-based responsive styles for mobile stacking (only for non-iconOnly)
+      '@container': {
+        [`${toggleButtonsContainer} (max-width: ${WIDTH_COMPACT_ORIENTATION}px)`]: {
+          selectors: {
+            [`${selectorNotIconOnly} &`]: {
+              borderLeftStyle: 'solid'
+            },
+            [`${selectorNotIconOnly} &+&`]: {
+              borderTopStyle: 'none'
+            },
+            [`${selectorNotIconOnly} &:first-child`]: {
+              borderBottomLeftRadius: 0,
+              borderTopLeftRadius: vars.border.radius.md,
+              borderTopRightRadius: vars.border.radius.md
+            },
+            [`${selectorNotIconOnly} &:last-child`]: {
+              borderBottomLeftRadius: vars.border.radius.md,
+              borderBottomRightRadius: vars.border.radius.md,
+              borderTopRightRadius: 0
+            }
+          }
+        }
+      }
+    }
+  }
+}], "toggleButton");
+__vanilla_filescope__.endFileScope();

package/dist/components/ToggleButtons/ToggleButtons.d.ts

@@ -0,0 +1,113 @@
+import type { AriaToggleButtonGroupItemProps } from '@react-types/button';
+import type { Key } from '@react-types/shared';
+import React, { type ReactNode } from 'react';
+import { type AriaToggleButtonGroupProps } from 'react-aria';
+import type { TestIdProp } from '../../types';
+import { type UseBoxProps } from '../Box/useBox/useBox';
+export interface ToggleButtonsProps extends AriaToggleButtonGroupProps, UseBoxProps, TestIdProp {
+    /**
+     * The toggle buttons to display in the group
+     * ```tsx
+     * <ToggleButton id="option1">Option 1</ToggleButton>
+     * <ToggleButton id="option2">Option 2</ToggleButton>
+     * ```
+     */
+    children: ReactNode;
+    /** Whether the buttons contain only icons (affects layout styling) */
+    iconOnly?: boolean;
+    /** Whether single or multiple selection is enabled. @default 'single' */
+    selectionMode?: 'single' | 'multiple';
+    /** Whether the collection allows empty selection. @default true */
+    disallowEmptySelection?: boolean;
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: Iterable<Key>;
+    /** The initial selected keys in the collection (uncontrolled). */
+    defaultSelectedKeys?: Iterable<Key>;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (keys: Set<Key>) => void;
+    /** Whether all toggle buttons are disabled. */
+    isDisabled?: boolean;
+    /** (_Not in use_) The orientation of the toggle button group. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const WIDTH_COMPACT_ORIENTATION = 640;
+/**
+ * ## ToggleButtons
+ *
+ * A toggle button group component that allows users to select one option from a set (multiple selection
+ * configurable). The ToggleButtons component also exports `ToggleButton` which are the child contents.
+ * Each `ToggleButton` item must be populated with an `id="[value]"` prop which is used to identify it
+ * both for default selection and in the on-change event.
+ *
+ * ### Configuration Overview
+ * - **Selection mode**: `selectionMode` - "single" or "multiple" behavior
+ * - **Default selection**: `defaultSelectedKeys` - initial selected keys as `string[]` (uncontrolled)
+ * - **Controlled mode**: `selectedKeys` + `onSelectionChange` - external state control
+ * - **Icon-only**: `iconOnly` - changes layout for single icon content (ARIA label or hidden text label required)
+ * - `disallowEmptySelection`: Prevents deselecting all options (**default**: `true`)
+ * - `isDisabled`: Disables the entire group
+ *
+ * ### Responsive Behaviour
+ * - For toggle buttons that are not `iconOnly` the layout will be vertical below tablet viewport width
+ *
+ * ### Accessibility
+ * - **Group Label**: When the button group has a label, associate it with `aria-labelledby` to and `id` on the heading text.
+ *   To add a label without a heading use `aria-label`
+ * - **Button Label**: For icons and other visual-only buttons add `aria-label` or label text within VisuallyHidden
+ *
+ * ### Selection Handling
+ * The `onSelectionChange` callback receives a `Set<Key>` containing the IDs of current selected buttons.
+ * Since a Set is not seralizable, the common approach is to convert it to an array for operations:
+ * ```tsx
+ * onSelectionChange={(keys) => {
+ *   console.log([...keys]); // Convert Set to array: ["option1", "option3"]
+ *   setSelected(new Set(keys)); // Store as Set for controlled state
+ * }}
+ * ```
+ * @example
+ * ```tsx
+ * // Uncontrolled (recommended)
+ * <ToggleButtons
+ *   defaultSelectedKeys={['confirm']}
+ *   onSelectionChange={(keys) => handleChange(keys)}
+ * >
+ *   <ToggleButton id="confirm">Confirm</ToggleButton>
+ *   <ToggleButton id="decline">Decline</ToggleButton>
+ *   <ToggleButton id="change-date">Change date</ToggleButton>
+ * </ToggleButtons>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled mode
+ * const [selected, setSelected] = useState(new Set(['list']));
+ *
+ * <ToggleButtons
+ *   selectedKeys={selected}
+ *   onSelectionChange={setSelected}
+ * >
+ *   <ToggleButton id="list">List</ToggleButton>
+ *   <ToggleButton id="grid">Grid</ToggleButton>
+ * </ToggleButtons>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon-only buttons
+ * <ToggleButtons
+ *   defaultSelectedKeys={['list']}
+ *   iconOnly
+ *   onSelectionChange={handleViewChange}
+ * >
+ *   <ToggleButton id="list" aria-label="List view">
+ *     <Icon icon={ListIcon} />
+ *   </ToggleButton>
+ *   <ToggleButton id="map" aria-label="Map view">
+ *     <Icon icon={MapIcon} />
+ *   </ToggleButton>
+ * </ToggleButtons>
+ * ```
+ */
+export declare const ToggleButtons: React.ForwardRefExoticComponent<ToggleButtonsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<AriaToggleButtonGroupItemProps<"button"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToggleButtons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtons.d.ts","sourceRoot":"","sources":["../../../lib/components/ToggleButtons/ToggleButtons.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,KAAK,EAAE,EAIb,KAAK,SAAS,EAEd,MAAM,OAAO,CAAC;AACf,OAAO,EAGN,KAAK,0BAA0B,EAC/B,MAAM,YAAY,CAAC;AAIpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIhE,MAAM,WAAW,kBAChB,SAAQ,0BAA0B,EACjC,WAAW,EACX,UAAU;IACX;;;;;;OAMG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC,mEAAmE;IACnE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,kEAAkE;IAClE,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uFAAuF;IACvF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACxC;AAGD,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAM7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,eAAO,MAAM,aAAa,2FA0FzB,CAAC;AAIF,eAAO,MAAM,YAAY,oHAsCvB,CAAC"}

package/dist/components/ToggleButtons/ToggleButtons.js

@@ -0,0 +1,199 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "disallowEmptySelection", "iconOnly", "orientation", "selectionMode"],
+  _excluded2 = ["selectedKeys", "defaultSelectedKeys", "onSelectionChange", "isDisabled", "aria-describedby", "aria-details", "aria-label", "aria-labelledby"],
+  _excluded3 = ["children"];
+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, { Children, forwardRef, useRef } from 'react';
+import { useToggleButtonGroup, useToggleButtonGroupItem } from 'react-aria';
+import { useToggleGroupState } from 'react-stately';
+import { useContainerWidth } from "../../hooks/index.js";
+import { mergeRefs } from "../../utils/index.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { useBox } from "../Box/useBox/useBox.js";
+import * as styles from "./ToggleButtons.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+// only applies to non `iconOnly` layout
+export const WIDTH_COMPACT_ORIENTATION = 640;
+const ToggleButtonGroupContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * ## ToggleButtons
+ *
+ * A toggle button group component that allows users to select one option from a set (multiple selection
+ * configurable). The ToggleButtons component also exports `ToggleButton` which are the child contents.
+ * Each `ToggleButton` item must be populated with an `id="[value]"` prop which is used to identify it
+ * both for default selection and in the on-change event.
+ *
+ * ### Configuration Overview
+ * - **Selection mode**: `selectionMode` - "single" or "multiple" behavior
+ * - **Default selection**: `defaultSelectedKeys` - initial selected keys as `string[]` (uncontrolled)
+ * - **Controlled mode**: `selectedKeys` + `onSelectionChange` - external state control
+ * - **Icon-only**: `iconOnly` - changes layout for single icon content (ARIA label or hidden text label required)
+ * - `disallowEmptySelection`: Prevents deselecting all options (**default**: `true`)
+ * - `isDisabled`: Disables the entire group
+ *
+ * ### Responsive Behaviour
+ * - For toggle buttons that are not `iconOnly` the layout will be vertical below tablet viewport width
+ *
+ * ### Accessibility
+ * - **Group Label**: When the button group has a label, associate it with `aria-labelledby` to and `id` on the heading text.
+ *   To add a label without a heading use `aria-label`
+ * - **Button Label**: For icons and other visual-only buttons add `aria-label` or label text within VisuallyHidden
+ *
+ * ### Selection Handling
+ * The `onSelectionChange` callback receives a `Set<Key>` containing the IDs of current selected buttons.
+ * Since a Set is not seralizable, the common approach is to convert it to an array for operations:
+ * ```tsx
+ * onSelectionChange={(keys) => {
+ *   console.log([...keys]); // Convert Set to array: ["option1", "option3"]
+ *   setSelected(new Set(keys)); // Store as Set for controlled state
+ * }}
+ * ```
+ * @example
+ * ```tsx
+ * // Uncontrolled (recommended)
+ * <ToggleButtons
+ *   defaultSelectedKeys={['confirm']}
+ *   onSelectionChange={(keys) => handleChange(keys)}
+ * >
+ *   <ToggleButton id="confirm">Confirm</ToggleButton>
+ *   <ToggleButton id="decline">Decline</ToggleButton>
+ *   <ToggleButton id="change-date">Change date</ToggleButton>
+ * </ToggleButtons>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled mode
+ * const [selected, setSelected] = useState(new Set(['list']));
+ *
+ * <ToggleButtons
+ *   selectedKeys={selected}
+ *   onSelectionChange={setSelected}
+ * >
+ *   <ToggleButton id="list">List</ToggleButton>
+ *   <ToggleButton id="grid">Grid</ToggleButton>
+ * </ToggleButtons>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon-only buttons
+ * <ToggleButtons
+ *   defaultSelectedKeys={['list']}
+ *   iconOnly
+ *   onSelectionChange={handleViewChange}
+ * >
+ *   <ToggleButton id="list" aria-label="List view">
+ *     <Icon icon={ListIcon} />
+ *   </ToggleButton>
+ *   <ToggleButton id="map" aria-label="Map view">
+ *     <Icon icon={MapIcon} />
+ *   </ToggleButton>
+ * </ToggleButtons>
+ * ```
+ */
+export const ToggleButtons = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      children,
+      disallowEmptySelection = true,
+      iconOnly = false,
+      orientation: incomingOrientation,
+      selectionMode = 'single'
+    } = _ref,
+    withBoxProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+      selectedKeys,
+      defaultSelectedKeys,
+      onSelectionChange,
+      isDisabled,
+      'aria-describedby': ariaDescribedBy,
+      'aria-details': ariaDetails,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy
+    } = withBoxProps,
+    boxProps = _objectWithoutProperties(withBoxProps, _excluded2);
+  const childArray = Children.toArray(children);
+  !(childArray.length > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, 'ToggleButtons: Must contain at least one ToggleButton child') : invariant(false) : void 0;
+  const internalRef = useRef(null);
+  const containerWidth = useContainerWidth({
+    containerRef: internalRef
+  });
+
+  // Determine orientation based on container width (not iconOnly)
+  const hasCompactLayout = !iconOnly && containerWidth > 0 && containerWidth < WIDTH_COMPACT_ORIENTATION;
+  const orientation = hasCompactLayout ? 'vertical' : incomingOrientation !== null && incomingOrientation !== void 0 ? incomingOrientation : 'horizontal';
+  const ariaProps = {
+    disallowEmptySelection,
+    defaultSelectedKeys,
+    isDisabled,
+    selectionMode,
+    onSelectionChange,
+    orientation,
+    selectedKeys,
+    'aria-describedby': ariaDescribedBy,
+    'aria-details': ariaDetails,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  const state = useToggleGroupState(ariaProps);
+  const {
+    groupProps
+  } = useToggleButtonGroup(ariaProps, state, internalRef);
+  const {
+    Component,
+    componentProps
+  } = useBox(_objectSpread(_objectSpread({}, boxProps), {}, {
+    className: !iconOnly && styles.toggleButtonsContainerStyle,
+    display: iconOnly ? 'flex' : undefined,
+    odComponent: 'toggle-buttons'
+  }));
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+    ref: mergeRefs([internalRef, forwardedRef]),
+    children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({
+      className: styles.toggleButtonGroup({
+        iconOnly
+      })
+    }, groupProps), dataAttrs({
+      iconOnly
+    })), {}, {
+      children: /*#__PURE__*/_jsx(ToggleButtonGroupContext.Provider, {
+        value: state,
+        children: children
+      })
+    }))
+  }));
+});
+ToggleButtons.displayName = 'ToggleButtons';
+export const ToggleButton = /*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
+  let {
+      children
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded3);
+  const internalRef = useRef(null);
+  const state = React.useContext(ToggleButtonGroupContext);
+  !(state !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'ToggleButton: Must be used within ToggleButtons component') : invariant(false) : void 0;
+  !(props.id !== undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, 'ToggleButton: Missing required "id" prop') : invariant(false) : void 0;
+  const {
+    buttonProps,
+    isSelected
+  } = useToggleButtonGroupItem(props, state, internalRef);
+  const {
+    isDisabled
+  } = props;
+  return /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread(_objectSpread({}, buttonProps), {}, {
+    className: styles.toggleButton
+  }, dataAttrs({
+    selected: isSelected,
+    disabled: isDisabled
+  })), {}, {
+    ref: mergeRefs([internalRef, forwardedRef]),
+    children: children
+  }));
+});
+ToggleButton.displayName = 'ToggleButton';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/ToggleButtons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,aAAa,EACb,YAAY,EACZ,KAAK,kBAAkB,GACvB,MAAM,iBAAiB,CAAC"}

package/dist/components/ToggleButtons/index.js

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

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './ColourInput';
 export * from './Columns';
 export * from './DateInput';
 export * from './DatePicker';
+export * from './DateTimeField';
 export * from './DividerLine';
 export * from './DropDown';
 export * from './EditableText';
@@ -65,6 +66,7 @@ export * from './TextContainer';
 export * from './TextInput';
 export * from './TextLink';
 export * from './Toaster';
+export * from './ToggleButtons';
 export * from './Tooltip';
 export * from './VisuallyHidden';
 //# sourceMappingURL=index.d.ts.map

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,cAAc,CAAC;AAC7B,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,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,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,aAAa,CAAC;AAC5B,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"}
+{"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,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,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,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,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,aAAa,CAAC;AAC5B,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,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}