@autoguru/overdrive 4.63.0 → 4.64.0

package/dist/components/Alert/Alert.d.ts

@@ -9,6 +9,9 @@ export interface AlertProps extends IntentStripeProps {
     dismissible?: boolean;
     onRequestClose?: ComponentProps<typeof Button>['onClick'];
 }
-export declare const Alert: ({ children, className, intent, inline, onRequestClose, dismissible, }: AlertProps) => React.JSX.Element;
+export declare const Alert: {
+    ({ children, className, intent, inline, onRequestClose, dismissible, }: AlertProps): React.JSX.Element;
+    displayName: string;
+};
 export default Alert;
 //# sourceMappingURL=Alert.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKnE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAK5D,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7D,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,GAAI,uEAOnB,UAAU,sBA6DZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAK5D,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7D,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AAmBD,eAAO,MAAM,KAAK;4EAOf,UAAU;;CAiEZ,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/Alert.js

@@ -2,7 +2,6 @@ import { AlertCircleIcon, WarningIcon, CheckCircleIcon, InformationIcon, XIcon }
 import clsx from 'clsx';
 import React from 'react';
 import { sprinkles } from "../../styles/index.js";
-import { sprinklesLegacyText } from "../../styles/typography.css.js";
 import { Box } from "../Box/Box.js";
 import { Button } from "../Button/Button.js";
 import { Icon } from "../Icon/Icon.js";
@@ -16,6 +15,12 @@ const iconMapForIntent = {
   success: CheckCircleIcon,
   warning: WarningIcon
 };
+const textColorForIntent = {
+  danger: 'alertForeground',
+  information: 'infoForeground',
+  success: 'successForeground',
+  warning: 'warningForeground'
+};
 export const Alert = ({
   children,
   className = '',
@@ -25,8 +30,8 @@ export const Alert = ({
   dismissible = typeof onRequestClose === 'function'
 }) => {
   return /*#__PURE__*/_jsxs(Box, {
-    className: clsx(className, sprinklesLegacyText({
-      color: intent
+    className: clsx(className, sprinkles({
+      color: textColorForIntent[intent]
     }), {
       [styles.contained]: !inline
     }),
@@ -36,8 +41,8 @@ export const Alert = ({
     backgroundColor: "white",
     borderWidth: "1",
     borderColor: "default",
-    borderRadius: "1",
-    boxShadow: inline ? 'none' : '4',
+    borderRadius: "xsmall",
+    boxShadow: inline ? 'none' : 'z4',
     padding: "2",
     odComponent: "alert",
     children: [/*#__PURE__*/_jsx(IntentStripe, {
@@ -85,4 +90,5 @@ export const Alert = ({
     })]
   });
 };
+Alert.displayName = 'Alert';
 export default Alert;

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

@@ -0,0 +1,64 @@
+import { type RecipeVariants } from '@vanilla-extract/recipes';
+import { cssLayerComponent } from '../../styles/layers.css';
+export declare const chip: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        filter: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: `var(--${string})`;
+                    borderColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                };
+            };
+        };
+        add: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: "transparent";
+                    borderColor: `var(--${string})`;
+                    borderStyle: "dashed";
+                    color: `var(--${string})`;
+                };
+            };
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    interactive: {
+        true: {};
+        false: {};
+    };
+}>;
+export type StyledFilterChipProps = NonNullable<RecipeVariants<typeof chip>>;
+export declare const chipBody: import("@vanilla-extract/recipes").RuntimeFn<{
+    withRemove: {
+        true: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    paddingInlineEnd: `var(--${string})`;
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+export declare const buttonFont: string;
+export declare const innerButtonText: string;
+export declare const removeButton: string;
+export declare const labelText: string;
+export declare const valueText: string;
+export declare const categoryLabel: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    color: `var(--${string})`;
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+//# sourceMappingURL=FilterChip.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChip.css.d.ts","sourceRoot":"","sources":["../../../lib/components/FilterChip/FilterChip.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEvE,OAAO,EAAe,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAczE,eAAO,MAAM,IAAI;;;;gBAsCZ,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;kBAKlB;;;;;;;;;;;;EA6EJ,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;AAE7E,eAAO,MAAM,QAAQ;;;;gBAmBhB,CAAC,iBAAiB,CAAC;;kBAElB;;;;;EAUJ,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC;AAEH,eAAO,MAAM,eAAe,QAQ1B,CAAC;AAEH,eAAO,MAAM,YAAY,QAavB,CAAC;AAEH,eAAO,MAAM,SAAS,QAOpB,CAAC;AAEH,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;gBAYrB,CAAC,iBAAiB,CAAC;;kBAElB;;;;;EASJ,CAAC"}

package/dist/components/FilterChip/FilterChip.css.js

@@ -0,0 +1,243 @@
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/FilterChip/FilterChip.css.ts", "@autoguru/overdrive");
+import { globalLayer, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
+import { selectors } from "../../styles/selectors.js";
+import { overdriveTokens as vars } from "../../themes/theme.css.js";
+globalLayer(LAYER_ORDER);
+const TRANSITION_DURATION = '150ms';
+const FOCUS_RING_WIDTH = vars.border.width['2'];
+const FOCUS_COLOUR = vars.color.info.foreground;
+const chipHover = '&:is(button):hover, &:has(button:hover)';
+export const chip = recipe({
+  base: {
+    '@layer': {
+      [cssLayerComponent]: {
+        alignItems: 'center',
+        borderRadius: vars.border.radius.pill,
+        borderStyle: 'solid',
+        borderWidth: vars.border.width['1'],
+        display: 'inline-flex',
+        fontSize: vars.typography.size['4'].fontSize,
+        lineHeight: vars.typography.size['4'].lineHeight,
+        maxWidth: '100%',
+        minWidth: 0,
+        position: 'relative',
+        transitionDuration: TRANSITION_DURATION,
+        transitionProperty: 'background-color, border-color, color',
+        transitionTimingFunction: vars.animation.easing.standard,
+        selectors: {
+          [`&:focus-visible, &[data-focus-visible], &:has(:focus-visible), &:has([data-focus-visible])`]: {
+            borderColor: FOCUS_COLOUR,
+            outline: `solid ${FOCUS_RING_WIDTH} ${FOCUS_COLOUR}`,
+            outlineOffset: FOCUS_RING_WIDTH
+          }
+        },
+        '@media': {
+          '(prefers-reduced-motion: reduce)': {
+            transitionDuration: '0s'
+          }
+        }
+      }
+    }
+  },
+  variants: {
+    variant: {
+      filter: {
+        '@layer': {
+          [cssLayerComponent]: {
+            backgroundColor: vars.color.background.emphasisInactive,
+            borderColor: vars.color.border.default,
+            color: vars.color.foreground.primary
+          }
+        }
+      },
+      add: {
+        '@layer': {
+          [cssLayerComponent]: {
+            backgroundColor: 'transparent',
+            borderColor: vars.color.border.default,
+            borderStyle: 'dashed',
+            color: vars.color.foreground.secondary
+          }
+        }
+      }
+    },
+    selected: {
+      true: {},
+      false: {}
+    },
+    interactive: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [{
+    variants: {
+      variant: 'filter',
+      interactive: true
+    },
+    style: {
+      '@layer': {
+        [cssLayerComponent]: {
+          selectors: {
+            [chipHover]: {
+              backgroundColor: vars.color.background.emphasisLight,
+              borderColor: vars.color.border.emphasis
+            }
+          }
+        }
+      }
+    }
+  }, {
+    variants: {
+      variant: 'add',
+      interactive: true
+    },
+    style: {
+      '@layer': {
+        [cssLayerComponent]: {
+          selectors: {
+            [chipHover]: {
+              borderColor: vars.color.border.selected,
+              color: vars.color.foreground.primary
+            },
+            [selectors.focusVisible]: {
+              borderColor: FOCUS_COLOUR,
+              color: vars.color.foreground.primary
+            }
+          }
+        }
+      }
+    }
+  }, {
+    variants: {
+      variant: 'filter',
+      selected: true
+    },
+    style: {
+      '@layer': {
+        [cssLayerComponent]: {
+          backgroundColor: vars.color.brand.solid,
+          borderColor: vars.color.brand.solid,
+          color: vars.color.brand.onSolid,
+          selectors: {
+            [chipHover]: {
+              backgroundColor: vars.color.brand.solid,
+              borderColor: vars.color.brand.solid
+            }
+          }
+        }
+      }
+    }
+  }],
+  defaultVariants: {
+    variant: 'filter',
+    selected: false,
+    interactive: false
+  }
+}, "chip");
+export const chipBody = recipe({
+  base: {
+    '@layer': {
+      [cssLayerComponent]: {
+        alignItems: 'center',
+        display: 'inline-flex',
+        gap: vars.space['1'],
+        minWidth: 0,
+        paddingBlock: vars.space['2'],
+        paddingInlineEnd: vars.space['3'],
+        paddingInlineStart: vars.space['3']
+      }
+    }
+  },
+  variants: {
+    withRemove: {
+      true: {
+        '@layer': {
+          [cssLayerComponent]: {
+            paddingInlineEnd: vars.space['1']
+          }
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    withRemove: false
+  }
+}, "chipBody");
+export const buttonFont = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      fontFamily: 'inherit',
+      fontWeight: 'inherit'
+    }
+  }
+}, "buttonFont");
+export const innerButtonText = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      color: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 'inherit'
+    }
+  }
+}, "innerButtonText");
+export const removeButton = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      display: 'inline-flex',
+      flexShrink: 0,
+      justifyContent: 'center',
+      paddingBlock: vars.space['2'],
+      paddingInlineEnd: vars.space['3'],
+      paddingInlineStart: 0
+    }
+  }
+}, "removeButton");
+export const labelText = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      flexShrink: 0,
+      whiteSpace: 'nowrap'
+    }
+  }
+}, "labelText");
+export const valueText = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }
+}, "valueText");
+export const categoryLabel = recipe({
+  base: {
+    '@layer': {
+      [cssLayerComponent]: {
+        color: vars.color.foreground.secondary
+      }
+    }
+  },
+  variants: {
+    selected: {
+      true: {
+        '@layer': {
+          [cssLayerComponent]: {
+            color: vars.color.brand.onSolid
+          }
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    selected: false
+  }
+}, "categoryLabel");
+__vanilla_filescope__.endFileScope();

package/dist/components/FilterChip/FilterChip.d.ts

@@ -0,0 +1,112 @@
+import React, { type HTMLAttributes, type MouseEventHandler } from 'react';
+import type { TestIdProp } from '../../types';
+/** Attributes forwarded to the chip body. */
+type FilterChipBodyAttributes = Pick<HTMLAttributes<HTMLElement>, 'aria-controls' | 'aria-describedby' | 'aria-haspopup' | 'aria-label' | 'aria-labelledby' | 'id' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave'>;
+interface FilterChipBaseProps extends FilterChipBodyAttributes, TestIdProp {
+    /** The category name, or the chip's only text for `simple` and `add`. */
+    label: string;
+    /** Override class name with additional styles */
+    className?: string;
+}
+/** The props every chip except `add` shares. */
+interface FilterChipStateProps {
+    /**
+     * Reflects the persistent chosen state as an inverted surface. Purely
+     * visual — the chip's own text is what tells a screen reader which filter is
+     * applied. Use `pressed` if the chip is a toggle.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Marks the chip as an on/off toggle and reports `aria-pressed`. Only set
+     * this when clicking the chip applies and unapplies the filter in place; a
+     * chip whose body opens an editor is not a toggle and must leave it unset.
+     */
+    pressed?: boolean;
+    /**
+     * Whether the popover or dropdown this chip controls is open. When
+     * supplied the chip is exposed as a disclosure rather than a toggle, and
+     * `aria-haspopup` is set unless you specify it yourself. Pair it with
+     * `aria-controls` and the forwarded `ref`, which `Popover` needs to anchor
+     * itself to the chip.
+     */
+    expanded?: boolean;
+    /** Activates the chip body. Omit to render the chip non-interactively. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Removes the filter. Supplying this renders the trailing `×` button.
+     */
+    onRemove?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Accessible name for the `×` button. Defaults to naming the filter and its
+     * value — `Remove State QLD filter` — so that two chips from the same
+     * category are distinguishable. Any trailing colon is stripped.
+     */
+    removeLabel?: string;
+}
+/** A category and its chosen value, e.g. `Vehicle type: Truck`. */
+interface SelectChipProps extends FilterChipBaseProps, FilterChipStateProps {
+    type?: 'select';
+    /** The chosen value. */
+    value?: string;
+    operator?: never;
+}
+/** A category, a comparison operator and a value, e.g. `Usage (km): over 100,000 km`. */
+interface NumericChipProps extends FilterChipBaseProps, FilterChipStateProps {
+    type: 'numeric';
+    /** The chosen value. */
+    value?: string;
+    /** The comparison word, e.g. `over`. */
+    operator?: string;
+}
+/** A bare label with no value, e.g. `Serviced`. */
+interface SimpleChipProps extends FilterChipBaseProps, FilterChipStateProps {
+    type: 'simple';
+    value?: never;
+    operator?: never;
+}
+/**
+ * The dashed "Add Filter" affordance that opens a filter picker. It holds no
+ * filter, so it takes no value, no state and nothing to remove, and `onClick` is
+ * required.
+ */
+interface AddChipProps extends FilterChipBaseProps {
+    type: 'add';
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    value?: never;
+    operator?: never;
+    selected?: never;
+    pressed?: never;
+    expanded?: never;
+    onRemove?: never;
+    removeLabel?: never;
+}
+/** All FilterChip props, discriminated on `type`. */
+export type FilterChipProps = SelectChipProps | NumericChipProps | SimpleChipProps | AddChipProps;
+/**
+ * The four filter chip shapes.
+ *
+ * - `select` — a category and its chosen value, e.g. `Vehicle type: Truck`
+ * - `numeric` — a category, a comparison operator and a value, e.g. `Usage (km): over 100,000 km`
+ * - `simple` — a bare label with no value
+ * - `add` — the dashed "Add Filter" affordance that opens a filter picker
+ */
+export type FilterChipType = NonNullable<FilterChipProps['type']>;
+/**
+ * A filter chip represents one active filter in a filter bar. The body opens an
+ * editor for the filter's value and the trailing `×` clears it.
+ *
+ * Distinct from `Badge`, which is a static, non-interactive label.
+ *
+ * The forwarded `ref` lands on the chip body, which is what a `Popover` anchors
+ * to. It is attached only when the body is a button — that is, when `onClick` is
+ * supplied. A chip without one has an inert `<span>` body and receives no ref,
+ * whether or not it has a `×`.
+ *
+ * Removal is by the `×` button only — the WAI-ARIA APG chip pattern also removes
+ * a focused chip on `Backspace`/`Delete`, which this component does not
+ * implement.
+ */
+export declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=FilterChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChip.d.ts","sourceRoot":"","sources":["../../../lib/components/FilterChip/FilterChip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAEb,KAAK,cAAc,EACnB,KAAK,iBAAiB,EAEtB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,6CAA6C;AAC7C,KAAK,wBAAwB,GAAG,IAAI,CACnC,cAAc,CAAC,WAAW,CAAC,EACzB,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,YAAY,GACZ,iBAAiB,GACjB,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,CAChB,CAAC;AAEF,UAAU,mBAAoB,SAAQ,wBAAwB,EAAE,UAAU;IACzE,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,gDAAgD;AAChD,UAAU,oBAAoB;IAC7B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAChD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,mEAAmE;AACnE,UAAU,eAAgB,SAAQ,mBAAmB,EAAE,oBAAoB;IAC1E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,yFAAyF;AACzF,UAAU,gBAAiB,SAAQ,mBAAmB,EAAE,oBAAoB;IAC3E,IAAI,EAAE,SAAS,CAAC;IAChB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,mDAAmD;AACnD,UAAU,eAAgB,SAAQ,mBAAmB,EAAE,oBAAoB;IAC1E,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;CACjB;AAED;;;;GAIG;AACH,UAAU,YAAa,SAAQ,mBAAmB;IACjD,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,qDAAqD;AACrD,MAAM,MAAM,eAAe,GACxB,eAAe,GACf,gBAAgB,GAChB,eAAe,GACf,YAAY,CAAC;AAEhB;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC;AAElE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,2FAqItB,CAAC"}

package/dist/components/FilterChip/FilterChip.js

@@ -0,0 +1,152 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["type", "label", "value", "operator", "selected", "pressed", "expanded", "onClick", "onRemove", "removeLabel", "className", "testId", "aria-haspopup"];
+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 { PlusIcon, XIcon } from '@autoguru/icons';
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import { useNullCheck } from "../../hooks/useNullCheck/index.js";
+import { useBox } from "../Box/useBox/useBox.js";
+import { Icon } from "../Icon/Icon.js";
+import * as styles from "./FilterChip.css.js";
+/** Attributes forwarded to the chip body. */
+/** The props every chip except `add` shares. */
+/** A category and its chosen value, e.g. `Vehicle type: Truck`. */
+/** A category, a comparison operator and a value, e.g. `Usage (km): over 100,000 km`. */
+/** A bare label with no value, e.g. `Serviced`. */
+/**
+ * The dashed "Add Filter" affordance that opens a filter picker. It holds no
+ * filter, so it takes no value, no state and nothing to remove, and `onClick` is
+ * required.
+ */
+/** All FilterChip props, discriminated on `type`. */
+/**
+ * The four filter chip shapes.
+ *
+ * - `select` — a category and its chosen value, e.g. `Vehicle type: Truck`
+ * - `numeric` — a category, a comparison operator and a value, e.g. `Usage (km): over 100,000 km`
+ * - `simple` — a bare label with no value
+ * - `add` — the dashed "Add Filter" affordance that opens a filter picker
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A filter chip represents one active filter in a filter bar. The body opens an
+ * editor for the filter's value and the trailing `×` clears it.
+ *
+ * Distinct from `Badge`, which is a static, non-interactive label.
+ *
+ * The forwarded `ref` lands on the chip body, which is what a `Popover` anchors
+ * to. It is attached only when the body is a button — that is, when `onClick` is
+ * supplied. A chip without one has an inert `<span>` body and receives no ref,
+ * whether or not it has a `×`.
+ *
+ * Removal is by the `×` button only — the WAI-ARIA APG chip pattern also removes
+ * a focused chip on `Backspace`/`Delete`, which this component does not
+ * implement.
+ */
+export const FilterChip = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      type = 'select',
+      label,
+      value,
+      operator,
+      selected = false,
+      pressed,
+      expanded,
+      onClick,
+      onRemove,
+      removeLabel,
+      className,
+      testId,
+      'aria-haspopup': ariaHasPopup
+    } = _ref,
+    bodyAttrs = _objectWithoutProperties(_ref, _excluded);
+  const isAdd = type === 'add';
+  const isSelected = !isAdd && selected;
+  const showRemove = !isAdd && typeof onRemove === 'function';
+  const isInteractive = typeof onClick === 'function' || showRemove;
+  useNullCheck(!isAdd || typeof onClick === 'function', 'FilterChip: an "add" chip needs an onClick — without one it renders as static text that still looks like a button.');
+  useNullCheck(typeof onClick === 'function' || expanded === undefined && pressed === undefined, 'FilterChip: "expanded" and "pressed" describe the chip body, which is only a button when onClick is supplied. Without one they are dropped.');
+  const accessibleName = label.replace(/:\s*$/, '');
+  const removeName = [accessibleName, operator, value].filter(Boolean).join(' ');
+  const stateProps = {
+    'aria-expanded': expanded,
+    'aria-haspopup': ariaHasPopup !== null && ariaHasPopup !== void 0 ? ariaHasPopup : expanded === undefined ? undefined : true,
+    'aria-pressed': isAdd ? undefined : pressed
+  };
+  const isBodyButton = typeof onClick === 'function';
+  const bodyInteractionProps = isBodyButton ? _objectSpread(_objectSpread({}, stateProps), {}, {
+    onClick,
+    ref,
+    type: 'button'
+  }) : {};
+  const bodyAs = isBodyButton ? 'button' : 'span';
+  const rootAs = showRemove ? 'div' : bodyAs;
+  const {
+    Component: Root,
+    componentProps: rootProps
+  } = useBox(_objectSpread({
+    as: rootAs,
+    className: [styles.chip({
+      variant: isAdd ? 'add' : 'filter',
+      selected: isSelected,
+      interactive: isInteractive
+    }), !showRemove && styles.chipBody(), !showRemove && isBodyButton && styles.buttonFont, className],
+    odComponent: 'filter-chip',
+    testId
+  }, showRemove ? {} : _objectSpread(_objectSpread({}, bodyAttrs), bodyInteractionProps)));
+  const {
+    Component: Body,
+    componentProps: bodyProps
+  } = useBox(_objectSpread(_objectSpread({
+    as: bodyAs,
+    className: [styles.chipBody({
+      withRemove: true
+    }), styles.innerButtonText, isBodyButton && styles.buttonFont]
+  }, bodyAttrs), bodyInteractionProps));
+  const {
+    Component: Remove,
+    componentProps: removeProps
+  } = useBox({
+    as: 'button',
+    className: [styles.buttonFont, styles.innerButtonText, styles.removeButton],
+    'aria-label': removeLabel !== null && removeLabel !== void 0 ? removeLabel : `Remove ${removeName} filter`,
+    onClick: onRemove,
+    type: 'button'
+  });
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isAdd && /*#__PURE__*/_jsx(Icon, {
+      icon: PlusIcon,
+      size: "small"
+    }), /*#__PURE__*/_jsx("span", {
+      className: clsx(styles.labelText, (type === 'select' || type === 'numeric') && styles.categoryLabel({
+        selected: isSelected
+      })),
+      children: label
+    }), type === 'numeric' && operator ? /*#__PURE__*/_jsx("span", {
+      className: styles.labelText,
+      children: operator
+    }) : null, (type === 'select' || type === 'numeric') && value ? /*#__PURE__*/_jsx("span", {
+      className: styles.valueText,
+      title: value,
+      children: value
+    }) : null]
+  });
+  if (showRemove) {
+    return /*#__PURE__*/_jsxs(Root, _objectSpread(_objectSpread({}, rootProps), {}, {
+      children: [/*#__PURE__*/_jsx(Body, _objectSpread(_objectSpread({}, bodyProps), {}, {
+        children: content
+      })), /*#__PURE__*/_jsx(Remove, _objectSpread(_objectSpread({}, removeProps), {}, {
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: XIcon,
+          size: "small"
+        })
+      }))]
+    }));
+  }
+  return /*#__PURE__*/_jsx(Root, _objectSpread(_objectSpread({}, rootProps), {}, {
+    children: content
+  }));
+});
+FilterChip.displayName = 'FilterChip';

package/dist/components/FilterChip/default.d.ts

@@ -0,0 +1,2 @@
+export { FilterChip as default } from './FilterChip';
+//# sourceMappingURL=default.d.ts.map

package/dist/components/FilterChip/default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../lib/components/FilterChip/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/FilterChip/default.js

@@ -0,0 +1 @@
+export { FilterChip as default } from "./FilterChip.js";

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

@@ -0,0 +1,3 @@
+export { FilterChip } from './FilterChip';
+export type { FilterChipProps, FilterChipType } from './FilterChip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/FilterChip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/FilterChip/index.js

@@ -0,0 +1 @@
+export { FilterChip } from "./FilterChip.js";