@timmbr/ui 1.9.0 → 1.11.0

package/dist/components/FilterDrawer/FilterDrawer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDrawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/FilterDrawer/FilterDrawer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAE1G,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAC;CAC/C;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,6FAA6F;IAC7F,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,6EAA6E;IAC7E,KAAK,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;IACvD,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qEAAqE;IACrE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B"}

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

@@ -0,0 +1,4 @@
+export * from './FilterDrawer';
+export * from './FilterDrawer.types';
+export * from './FilterDrawer.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FilterDrawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}

package/dist/components/FilterPanel/FilterPanel.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { type FilterGroup, type FilterOption, type FilterOptionListProps, type FilterPanelLabels, type FilterPanelProps, type FilterPriceConfig } from './FilterPanel.types';
+export declare const DEFAULT_FILTER_LABELS: FilterPanelLabels;
+/** An option is unavailable when picking it would show nothing (and it isn't picked already). */
+export declare const isOptionDisabled: (option: FilterOption) => boolean;
+/**
+ * The options of one group as checkboxes (with a colour dot for swatch groups) and counts.
+ * Long groups show the first `limit` options plus every selected one behind "Show more", and
+ * very long groups get a search box. Options that would show nothing are disabled, not hidden,
+ * so the list doesn't jump as filters change.
+ */
+export declare function FilterOptionList({ group, onToggle, limit, searchThreshold, labels: labelOverrides, className, }: FilterOptionListProps): React.JSX.Element;
+/** Yes/no groups as switches: "Fast Delivery (12)". */
+export declare function FilterToggleRow({ group, onToggle, }: {
+    group: FilterGroup;
+    onToggle: (key: string, value: string) => void;
+}): React.JSX.Element | null;
+/** The price slider with Apply/Reset; the slider value is local until Apply. */
+export declare function FilterPriceSlider({ price, labels: labelOverrides, onValueChange, showActions, }: {
+    price: FilterPriceConfig;
+    labels?: Partial<FilterPanelLabels>;
+    /** Called while dragging (the drawer stages the value instead of using Apply). */
+    onValueChange?: (min: number, max: number) => void;
+    showActions?: boolean;
+}): React.JSX.Element;
+/**
+ * Filter sidebar for a listing (Figma PLP): yes/no toggles first, then a price slider and
+ * collapsible groups of checkbox or swatch options with result counts. Purely presentational:
+ * selections come in through `groups`, changes go out through `onToggle` — the page decides
+ * when to apply them (see the listing-state helpers in @timmbr/utils).
+ */
+export declare const FilterPanel: React.ForwardRefExoticComponent<FilterPanelProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FilterPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FilterPanel/FilterPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,qBAAqB,EAAE,iBAYnC,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,gBAAgB,GAAI,QAAQ,YAAY,YAAgE,CAAC;AActH;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,KAAS,EACT,eAAoB,EACpB,MAAM,EAAE,cAAc,EACtB,SAAS,GACV,EAAE,qBAAqB,qBA2DvB;AAED,uDAAuD;AACvD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,4BAmBA;AAED,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,MAAM,EAAE,cAAc,EACtB,aAAa,EACb,WAAkB,GACnB,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,qBAkCA;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,yFA2FvB,CAAC"}

package/dist/components/FilterPanel/FilterPanel.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Search } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { filterOptionRowVariants, filterLinkButtonVariants, filterPanelTitleVariants, filterPanelHeaderVariants, filterToggleListVariants, filterSectionTriggerVariants, filterSectionContentVariants, filterPanelBodyVariants, filterPanelVariants, filterOptionCountVariants, filterOptionLabelVariants } from './FilterPanel.styles.js';
+import { PRICE_GROUP_KEY } from './FilterPanel.types.js';
+import { Input } from '../Input/Input.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../Accordion/Accordion.js';
+import { RangeSlider } from '../RangeSlider/RangeSlider.js';
+import { Switch } from '../Switch/Switch.js';
+import { Swatch } from '../Swatch/Swatch.js';
+
+const DEFAULT_FILTER_LABELS = {
+  title: "Filters",
+  price: "Price range",
+  apply: "Apply",
+  reset: "Reset",
+  clear: "Clear",
+  showLess: "Show less",
+  showMore: (hidden) => `Show more (${hidden})`,
+  searchPlaceholder: (group) => `Search ${group.toLowerCase()}`,
+  noMatches: "No matches",
+  thumbMin: "Minimum price",
+  thumbMax: "Maximum price"
+};
+const isOptionDisabled = (option) => option.disabled ?? (option.count === 0 && !option.selected);
+const selectedCount = (group) => group.options.filter((o) => o.selected).length;
+function OptionLabel({ option, display }) {
+  return /* @__PURE__ */ jsxs("span", { className: filterOptionLabelVariants(), children: [
+    display === "swatch" && option.swatch && /* @__PURE__ */ jsx(Swatch, { color: option.swatch, size: "sm" }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+    option.count !== void 0 && /* @__PURE__ */ jsxs("span", { className: filterOptionCountVariants(), children: [
+      "(",
+      option.count,
+      ")"
+    ] })
+  ] });
+}
+function FilterOptionList({
+  group,
+  onToggle,
+  limit = 5,
+  searchThreshold = 15,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = { ...DEFAULT_FILTER_LABELS, ...labelOverrides };
+  const [expanded, setExpanded] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const searchable = group.options.length > searchThreshold;
+  const needle = query.trim().toLowerCase();
+  const ordered = [
+    ...group.options.filter((o) => !isOptionDisabled(o)),
+    ...group.options.filter((o) => isOptionDisabled(o))
+  ];
+  const matching = needle ? ordered.filter((o) => o.label.toLowerCase().includes(needle)) : ordered;
+  const visible = expanded || needle ? matching : matching.filter((o, i) => i < limit || o.selected);
+  const hidden = matching.length - visible.length;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 pb-4", className), "data-slot": "filter-option-list", children: [
+    searchable && /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "sm",
+        type: "search",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        placeholder: labels.searchPlaceholder(group.label),
+        "aria-label": labels.searchPlaceholder(group.label),
+        leftAdornment: /* @__PURE__ */ jsx(Search, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-3", children: [
+      visible.map((option) => {
+        const disabled = isOptionDisabled(option);
+        return /* @__PURE__ */ jsx("li", { className: filterOptionRowVariants({ disabled }), children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "sm",
+            checked: !!option.selected,
+            disabled,
+            onCheckedChange: () => onToggle(group.key, option.value),
+            label: /* @__PURE__ */ jsx(OptionLabel, { option, display: group.display })
+          }
+        ) }, option.value);
+      }),
+      visible.length === 0 && /* @__PURE__ */ jsx("li", { className: "text-body-3 text-grey-500", children: labels.noMatches })
+    ] }),
+    !needle && (hidden > 0 || expanded) && matching.length > limit && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: filterLinkButtonVariants(),
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((e) => !e),
+        children: expanded ? labels.showLess : labels.showMore(hidden)
+      }
+    )
+  ] });
+}
+function FilterToggleRow({
+  group,
+  onToggle
+}) {
+  const option = group.options[0];
+  if (!option) return null;
+  const disabled = isOptionDisabled(option);
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      size: "sm",
+      checked: !!option.selected,
+      disabled,
+      onCheckedChange: () => onToggle(group.key, option.value),
+      containerClassName: cn(disabled && "opacity-50"),
+      label: /* @__PURE__ */ jsxs("span", { className: filterOptionLabelVariants(), children: [
+        group.label,
+        option.count !== void 0 && /* @__PURE__ */ jsxs("span", { className: filterOptionCountVariants(), children: [
+          "(",
+          option.count,
+          ")"
+        ] })
+      ] })
+    }
+  );
+}
+function FilterPriceSlider({
+  price,
+  labels: labelOverrides,
+  onValueChange,
+  showActions = true
+}) {
+  const labels = { ...DEFAULT_FILTER_LABELS, ...labelOverrides };
+  const applied = price.value ?? [price.min, price.max];
+  const atBounds = (v) => v[0] <= price.min && v[1] >= price.max;
+  const appliedKey = `${applied[0]}-${applied[1]}-${price.min}-${price.max}-${price.resetKey ?? ""}`;
+  const [local, setLocal] = React.useState({
+    key: appliedKey,
+    value: applied
+  });
+  const draft = local.key === appliedKey ? local.value : applied;
+  const setDraft = (value) => setLocal({ key: appliedKey, value });
+  return /* @__PURE__ */ jsx(
+    RangeSlider,
+    {
+      min: price.min,
+      max: price.max,
+      step: price.step,
+      value: draft,
+      formatValue: price.format,
+      showActions,
+      applyLabel: labels.apply,
+      resetLabel: labels.reset,
+      thumbLabels: [labels.thumbMin, labels.thumbMax],
+      resetDisabled: atBounds(applied) && atBounds(draft),
+      onValueChange: (values) => {
+        setDraft(values);
+        onValueChange?.(values[0], values[1]);
+      },
+      onApply: (values) => price.onApply(values[0], values[1]),
+      onReset: () => price.onReset()
+    }
+  );
+}
+const FilterPanel = React.forwardRef(
+  ({
+    groups,
+    onToggle,
+    onClearGroup,
+    price,
+    defaultOpen,
+    optionLimit,
+    searchThreshold,
+    labels: labelOverrides,
+    headerAction,
+    className
+  }, ref) => {
+    const labels = { ...DEFAULT_FILTER_LABELS, ...labelOverrides };
+    const toggles = groups.filter((g) => g.display === "toggle");
+    const sections = groups.filter((g) => g.display !== "toggle");
+    const showPrice = !!price && price.max - price.min >= price.step && price.step > 0;
+    const [initialOpen] = React.useState(
+      () => defaultOpen ?? [PRICE_GROUP_KEY, ...sections.slice(0, 3).map((g) => g.key)]
+    );
+    return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "filter-panel", className: cn(filterPanelVariants(), className), children: [
+      /* @__PURE__ */ jsxs("div", { className: filterPanelHeaderVariants(), children: [
+        /* @__PURE__ */ jsx("h2", { className: filterPanelTitleVariants(), children: labels.title }),
+        headerAction
+      ] }),
+      /* @__PURE__ */ jsxs("div", { "data-slot": "filter-panel-body", className: filterPanelBodyVariants(), children: [
+        toggles.length > 0 && /* @__PURE__ */ jsx("div", { className: filterToggleListVariants(), children: toggles.map((group) => /* @__PURE__ */ jsx(FilterToggleRow, { group, onToggle }, group.key)) }),
+        /* @__PURE__ */ jsxs(Accordion, { type: "multiple", defaultValue: initialOpen, className: "border-t border-grey-200", children: [
+          showPrice && price && /* @__PURE__ */ jsxs(AccordionItem, { value: PRICE_GROUP_KEY, className: "border-grey-200", children: [
+            /* @__PURE__ */ jsx(AccordionTrigger, { className: filterSectionTriggerVariants(), children: labels.price }),
+            /* @__PURE__ */ jsx(AccordionContent, { className: filterSectionContentVariants(), children: /* @__PURE__ */ jsx("div", { className: "pb-4", children: /* @__PURE__ */ jsx(FilterPriceSlider, { price, labels }) }) })
+          ] }),
+          sections.map((group) => {
+            const count = selectedCount(group);
+            return /* @__PURE__ */ jsxs(AccordionItem, { value: group.key, className: "border-grey-200", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { className: filterSectionTriggerVariants(), children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                group.label,
+                count > 0 && /* @__PURE__ */ jsxs("span", { className: "text-primary", children: [
+                  "(",
+                  count,
+                  ")"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxs(AccordionContent, { className: filterSectionContentVariants(), children: [
+                count > 0 && onClearGroup && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(filterLinkButtonVariants(), "mb-3"),
+                    onClick: () => onClearGroup(group.key),
+                    children: labels.clear
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FilterOptionList,
+                  {
+                    group,
+                    onToggle,
+                    limit: optionLimit,
+                    searchThreshold,
+                    labels
+                  }
+                )
+              ] })
+            ] }, group.key);
+          })
+        ] })
+      ] })
+    ] });
+  }
+);
+FilterPanel.displayName = "FilterPanel";
+
+export { DEFAULT_FILTER_LABELS, FilterOptionList, FilterPanel, FilterPriceSlider, FilterToggleRow, isOptionDisabled };

package/dist/components/FilterPanel/FilterPanel.styles.d.ts

@@ -0,0 +1,16 @@
+/** Card: white surface, light shadow (Figma PLP filter sidebar). */
+export declare const filterPanelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterPanelHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Everything below the header; scrolls inside the card when the card has a max height. */
+export declare const filterPanelBodyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterPanelTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterToggleListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterSectionTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterSectionContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterOptionRowVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const filterOptionLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterOptionCountVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterLinkButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=FilterPanel.styles.d.ts.map

package/dist/components/FilterPanel/FilterPanel.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/FilterPanel/FilterPanel.styles.ts"],"names":[],"mappings":"AAEA,oEAAoE;AACpE,eAAO,MAAM,mBAAmB,oFAAiF,CAAC;AAElH,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAA6D,CAAC;AAEnG,eAAO,MAAM,wBAAwB,oFAAuC,CAAC;AAE7E,eAAO,MAAM,4BAA4B,oFAExC,CAAC;AAEF,eAAO,MAAM,4BAA4B,oFAAc,CAAC;AAExD,eAAO,MAAM,uBAAuB;;8EAQlC,CAAC;AAEH,eAAO,MAAM,yBAAyB,oFAA0E,CAAC;AAEjH,eAAO,MAAM,yBAAyB,oFAAmC,CAAC;AAE1E,eAAO,MAAM,wBAAwB,oFAEpC,CAAC"}

package/dist/components/FilterPanel/FilterPanel.styles.js

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+const filterPanelVariants = cva("flex flex-col overflow-hidden rounded-sm bg-grey-50 font-sans shadow-md");
+const filterPanelHeaderVariants = cva(
+  "flex shrink-0 items-center justify-between gap-2 border-b border-grey-100 px-5 py-4"
+);
+const filterPanelBodyVariants = cva(
+  "min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable] [scrollbar-width:thin]"
+);
+const filterPanelTitleVariants = cva("text-body-1 font-medium tracking-wide text-grey-950");
+const filterToggleListVariants = cva("flex flex-col gap-4 px-5 py-4");
+const filterSectionTriggerVariants = cva(
+  "px-4 py-4 text-body-3 font-medium uppercase tracking-wider text-grey-950 hover:no-underline"
+);
+const filterSectionContentVariants = cva("px-4");
+const filterOptionRowVariants = cva("min-w-0", {
+  variants: {
+    disabled: {
+      true: "opacity-50",
+      false: ""
+    }
+  },
+  defaultVariants: { disabled: false }
+});
+const filterOptionLabelVariants = cva("inline-flex min-w-0 items-center gap-2 text-body-2 text-grey-700");
+const filterOptionCountVariants = cva("text-body-3 text-grey-500");
+const filterLinkButtonVariants = cva(
+  "self-start rounded-sm text-body-3 font-semibold text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+);
+
+export { filterLinkButtonVariants, filterOptionCountVariants, filterOptionLabelVariants, filterOptionRowVariants, filterPanelBodyVariants, filterPanelHeaderVariants, filterPanelTitleVariants, filterPanelVariants, filterSectionContentVariants, filterSectionTriggerVariants, filterToggleListVariants };

package/dist/components/FilterPanel/FilterPanel.types.d.ts

@@ -0,0 +1,80 @@
+import type * as React from 'react';
+/** How a group's options are shown. */
+export type FilterGroupDisplay = 'checkbox' | 'swatch' | 'toggle';
+export interface FilterOption {
+    /** Value sent back in `onToggle` (e.g. a URL slug). */
+    value: string;
+    label: string;
+    /** Matching results if this option were picked; shown as "(12)". */
+    count?: number;
+    selected?: boolean;
+    /** Defaults to true when `count` is 0 and the option isn't selected. */
+    disabled?: boolean;
+    /** Colour for swatch groups. */
+    swatch?: string | null;
+}
+export interface FilterGroup {
+    key: string;
+    label: string;
+    display: FilterGroupDisplay;
+    options: FilterOption[];
+}
+export interface FilterPriceConfig {
+    /** Slider bounds and step. */
+    min: number;
+    max: number;
+    step: number;
+    /** The applied range (the slider starts here). */
+    value?: [number, number];
+    /** Shown on the readouts, e.g. (v) => `₹${v}`. */
+    format?: (value: number) => string;
+    onApply: (min: number, max: number) => void;
+    onReset: () => void;
+    /**
+     * Changes whenever the slider should drop an un-applied drag and show `value` again, e.g.
+     * the URL of the applied listing (so "Clear all" also resets the slider).
+     */
+    resetKey?: string;
+}
+export interface FilterPanelLabels {
+    title: string;
+    price: string;
+    apply: string;
+    reset: string;
+    clear: string;
+    showLess: string;
+    showMore: (hidden: number) => string;
+    searchPlaceholder: (groupLabel: string) => string;
+    noMatches: string;
+    thumbMin: string;
+    thumbMax: string;
+}
+export interface FilterOptionListProps {
+    group: FilterGroup;
+    onToggle: (key: string, value: string) => void;
+    /** Options shown before "Show more" (selected ones always show). @default 5 */
+    limit?: number;
+    /** Groups with more options than this get a search box. @default 15 */
+    searchThreshold?: number;
+    labels?: Partial<FilterPanelLabels>;
+    className?: string;
+}
+export interface FilterPanelProps {
+    groups: FilterGroup[];
+    onToggle: (key: string, value: string) => void;
+    /** Clears one group; adds a "Clear" link to groups with a selection. */
+    onClearGroup?: (key: string) => void;
+    /** Price slider, shown first when the range is wider than one step. */
+    price?: FilterPriceConfig;
+    /** Groups open at first ("price" is the slider). Default: price and the first three groups. */
+    defaultOpen?: string[];
+    optionLimit?: number;
+    searchThreshold?: number;
+    labels?: Partial<FilterPanelLabels>;
+    /** Right side of the header, e.g. a "Clear all" button. */
+    headerAction?: React.ReactNode;
+    className?: string;
+}
+/** Group key used by the panel and drawer for the price slider. */
+export declare const PRICE_GROUP_KEY = "price";
+//# sourceMappingURL=FilterPanel.types.d.ts.map

package/dist/components/FilterPanel/FilterPanel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/FilterPanel/FilterPanel.types.ts"],"names":[],"mappings":"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"}

package/dist/components/FilterPanel/FilterPanel.types.js

@@ -0,0 +1,3 @@
+const PRICE_GROUP_KEY = "price";
+
+export { PRICE_GROUP_KEY };

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

@@ -0,0 +1,4 @@
+export * from './FilterPanel';
+export * from './FilterPanel.types';
+export * from './FilterPanel.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FilterPanel/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/components/ImageUpload/ImageUpload.styles.d.ts

@@ -1,16 +1,16 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const imageUploadZoneVariants: (props?: ({
-    aspectRatio?: "video" | "auto" | "square" | "wide" | null | undefined;
+    aspectRatio?: "auto" | "video" | "square" | "wide" | null | undefined;
     size?: "default" | "compact" | null | undefined;
     isDragging?: boolean | null | undefined;
     isError?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const imagePreviewContainerVariants: (props?: ({
-    aspectRatio?: "video" | "auto" | "square" | "wide" | null | undefined;
+    aspectRatio?: "auto" | "video" | "square" | "wide" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const thumbnailCardVariants: (props?: ({
-    aspectRatio?: "video" | "auto" | "square" | "wide" | null | undefined;
+    aspectRatio?: "auto" | "video" | "square" | "wide" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ImageUploadZoneVariants = VariantProps<typeof imageUploadZoneVariants>;
 export type ImagePreviewContainerVariants = VariantProps<typeof imagePreviewContainerVariants>;

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

@@ -1 +1 @@
-{"version":3,"file":"MediaCard.d.ts","sourceRoot":"","sources":["../../../src/components/MediaCard/MediaCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAc5E;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,oFAgJrB,CAAC"}
+{"version":3,"file":"MediaCard.d.ts","sourceRoot":"","sources":["../../../src/components/MediaCard/MediaCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAc5E;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,oFAkJrB,CAAC"}

package/dist/components/MediaCard/MediaCard.js

@@ -113,7 +113,9 @@ const MediaCard = React.forwardRef(
                 ]
               }
             ),
-            footer && /* @__PURE__ */ jsx("div", { className: "relative z-10 mt-2 flex flex-wrap items-center gap-2", "data-slot": "media-card-footer", children: footer })
+            footer && // mt-auto: pinned to the card's bottom, so footers line up across a grid row even when
+            // titles or prices wrap differently.
+            /* @__PURE__ */ jsx("div", { className: "relative z-10 mt-auto flex flex-wrap items-center gap-2 pt-2", "data-slot": "media-card-footer", children: footer })
           ] })
         ]
       }

package/dist/components/NavHeader/NavHeader.styles.d.ts

@@ -34,7 +34,14 @@ export declare const megaMenuCardVariants: (props?: import("class-variance-autho
 /**
  * Search popover suggestions card styles.
  */
+/** Right-aligned under the input and wider than it, so product suggestions have room. */
 export declare const searchPopoverCardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** A row of the search panel (recent search, suggested product, "see all"). */
+export declare const searchPanelOptionVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const searchPanelSectionTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const searchPanelTextButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /**
  * Overflow action menu dropdown popover container.
  */

package/dist/components/NavHeader/NavHeader.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.styles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,mBAAmB,oFAE/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;8EAa7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;8EAiBtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;8EAkBjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;8EAa7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;8EAatC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;8EAkBjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,oFAEtC,CAAC"}
+{"version":3,"file":"NavHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.styles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,mBAAmB,oFAE/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;8EAa7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;8EAiBtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;8EAkBjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;8EAa7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF;;GAEG;AACH,yFAAyF;AACzF,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,yBAAyB;;8EAWrC,CAAC;AAEF,eAAO,MAAM,+BAA+B,oFAE3C,CAAC;AAEF,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;8EAatC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;8EAkBjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,oFAEtC,CAAC"}

package/dist/components/NavHeader/NavHeader.styles.js

@@ -72,7 +72,25 @@ const megaMenuCardVariants = cva(
   "w-full max-w-[1216px] mx-auto bg-grey-50 border border-grey-200/80 shadow-2xl rounded-b-xl z-50 overflow-hidden"
 );
 const searchPopoverCardVariants = cva(
-  "absolute top-full left-0 right-0 w-full mt-2 bg-grey-50 border border-grey-200 shadow-2xl rounded-2xl p-4 sm:p-5 z-50 text-left"
+  "absolute top-full right-0 mt-2 w-[min(26rem,calc(100vw-2rem))] max-h-[min(32rem,calc(100dvh-8rem))] overflow-y-auto bg-grey-50 border border-grey-200 shadow-2xl rounded-2xl p-3 sm:p-4 z-50 text-left"
+);
+const searchPanelOptionVariants = cva(
+  "flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-grey-100",
+        false: "hover:bg-grey-100"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+const searchPanelSectionTitleVariants = cva(
+  "px-2 text-caption font-semibold uppercase tracking-wider text-grey-500"
+);
+const searchPanelTextButtonVariants = cva(
+  "rounded-sm px-2 text-body-3 font-semibold text-grey-700 underline underline-offset-4 hover:text-grey-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
 );
 const actionOverflowPopoverVariants = cva(
   "absolute top-full right-0 mt-3 w-60 bg-grey-50 border border-border-warm shadow-2xl rounded-2xl p-2 z-50 text-left overflow-hidden divide-y divide-grey-100"
@@ -120,4 +138,4 @@ const mobileSearchDrawerVariants = cva(
   "fixed inset-0 z-[9999] h-[100dvh] w-screen bg-[var(--color-bg-2,#F7F1E6)] flex flex-col overflow-hidden"
 );
 
-export { actionOverflowItemVariants, actionOverflowPopoverVariants, megaMenuCardVariants, mobileSearchDrawerVariants, mobileTabContentPanelVariants, mobileTabItemVariants, mobileTabSliderVariants, navActionVariants, navHeaderContainerVariants, navHeaderItemVariants, navHeaderVariants, offerBannerVariants, searchPopoverCardVariants };
+export { actionOverflowItemVariants, actionOverflowPopoverVariants, megaMenuCardVariants, mobileSearchDrawerVariants, mobileTabContentPanelVariants, mobileTabItemVariants, mobileTabSliderVariants, navActionVariants, navHeaderContainerVariants, navHeaderItemVariants, navHeaderVariants, offerBannerVariants, searchPanelOptionVariants, searchPanelSectionTitleVariants, searchPanelTextButtonVariants, searchPopoverCardVariants };