@timmbr/ui 1.9.0 → 1.10.0

package/dist/components/NavHeader/subcomponents/NavSearchPanel.js

@@ -0,0 +1,289 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { History, X, TrendingUp, Search, ArrowRight } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { resolveNavDestination, isCrossZoneNavigation } from '../NavHeader.helpers.js';
+import { searchPanelSectionTitleVariants, searchPanelTextButtonVariants, searchPanelOptionVariants } from '../NavHeader.styles.js';
+import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
+
+const DEFAULT_MIN_QUERY_LENGTH = 2;
+function useNavSearchCombobox({
+  config,
+  value,
+  onChange,
+  onSubmit,
+  onClose
+}) {
+  const searchConfig = typeof config === "object" ? config : {};
+  const { recentSearches = [], results, popularSearches = [], onRecentSearchRemove } = searchConfig;
+  const listId = React.useId();
+  const typed = value.trim();
+  const minLength = results?.minQueryLength ?? DEFAULT_MIN_QUERY_LENGTH;
+  const mode = typed.length < minLength ? "idle" : results ? "results" : "none";
+  const options = React.useMemo(() => {
+    if (mode === "idle") {
+      return recentSearches.map((query, i) => ({ kind: "recent", id: `${listId}-recent-${i}`, query }));
+    }
+    if (mode === "results" && results) {
+      return [
+        ...results.items.map((result, i) => ({ kind: "result", id: `${listId}-result-${i}`, result })),
+        { kind: "viewAll", id: `${listId}-all` }
+      ];
+    }
+    return [];
+  }, [mode, recentSearches, results, listId]);
+  const [active, setActive] = React.useState({ value, index: -1 });
+  const activeIndex = active.value === value && active.index < options.length ? active.index : -1;
+  const setActiveIndex = (index) => setActive({ value, index });
+  const activeOption = activeIndex >= 0 ? options[activeIndex] : void 0;
+  const hasContent = mode === "results" || mode === "idle" && (recentSearches.length > 0 || popularSearches.length > 0);
+  const pickRecent = (query) => {
+    onChange(query);
+    onSubmit(query);
+    onClose();
+  };
+  const submitTyped = () => {
+    if (!typed) return;
+    onSubmit(typed);
+    onClose();
+  };
+  const pickResult = (result) => {
+    searchConfig.onResultSelect?.(result);
+    onClose();
+  };
+  const onKeyDown = (event) => {
+    const count = options.length;
+    switch (event.key) {
+      case "ArrowDown":
+        if (!count) return;
+        event.preventDefault();
+        setActiveIndex((activeIndex + 1) % count);
+        return;
+      case "ArrowUp":
+        if (!count) return;
+        event.preventDefault();
+        setActiveIndex(activeIndex <= 0 ? count - 1 : activeIndex - 1);
+        return;
+      case "Enter":
+        event.preventDefault();
+        if (!activeOption) return submitTyped();
+        if (activeOption.kind === "recent") return pickRecent(activeOption.query);
+        if (activeOption.kind === "viewAll") return submitTyped();
+        document.getElementById(activeOption.id)?.click();
+        return;
+      case "Delete":
+        if (activeOption?.kind === "recent" && onRecentSearchRemove) {
+          event.preventDefault();
+          onRecentSearchRemove(activeOption.query);
+        }
+        return;
+    }
+  };
+  return {
+    hasContent,
+    inputProps: {
+      role: "combobox",
+      "aria-expanded": hasContent,
+      "aria-controls": listId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": activeOption?.id,
+      onKeyDown
+    },
+    panelProps: {
+      config,
+      listId,
+      mode,
+      query: typed,
+      options,
+      activeId: activeOption?.id,
+      onHover: (id) => setActiveIndex(options.findIndex((option) => option.id === id)),
+      onPickRecent: pickRecent,
+      onPickResult: pickResult,
+      onViewAll: submitTyped,
+      onPopularPick: (tag) => {
+        onChange(tag.label);
+        searchConfig.onPopularSearchClick?.(tag);
+        tag.onClick?.(tag);
+        onSubmit(tag.label);
+        onClose();
+      }
+    }
+  };
+}
+const NavSearchPanel = ({
+  config,
+  listId,
+  mode,
+  query,
+  options,
+  activeId,
+  onHover,
+  onPickRecent,
+  onPickResult,
+  onViewAll,
+  onPopularPick,
+  linkComponent: CustomLink,
+  className
+}) => {
+  const globalConfig = useTimmbrConfig();
+  const searchConfig = typeof config === "object" ? config : {};
+  const {
+    recentSearchesTitle = "Recent searches",
+    clearRecentSearchesLabel = "Clear",
+    removeRecentSearchLabel = (q) => `Remove "${q}" from recent searches`,
+    onRecentSearchRemove,
+    onClearRecentSearches,
+    popularSearches = [],
+    popularSearchesTitle = "Popular Searches",
+    results
+  } = searchConfig;
+  const recentOptions = options.filter((o) => o.kind === "recent");
+  const resultOptions = options.filter((o) => o.kind === "result");
+  const viewAll = options.find((o) => o.kind === "viewAll");
+  const recentTitleId = `${listId}-recent-title`;
+  const resultsTitleId = `${listId}-results-title`;
+  const renderResultLink = (option) => {
+    const { result } = option;
+    const props = {
+      id: option.id,
+      href: result.href,
+      role: "option",
+      "aria-selected": activeId === option.id,
+      tabIndex: -1,
+      onMouseEnter: () => onHover(option.id),
+      onClick: () => onPickResult(result),
+      className: searchPanelOptionVariants({ active: activeId === option.id }),
+      "data-slot": "nav-search-result"
+    };
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "size-12 shrink-0 overflow-hidden rounded-md bg-grey-100", children: result.imageUrl ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: result.imageUrl,
+          alt: result.imageAlt ?? "",
+          width: 48,
+          height: 48,
+          loading: "lazy",
+          decoding: "async",
+          className: "size-full object-cover"
+        }
+      ) : null }),
+      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-body-2 font-medium text-grey-950", children: result.title }),
+        result.subtitle ? /* @__PURE__ */ jsx("span", { className: "truncate text-body-3 text-grey-500", children: result.subtitle }) : null
+      ] }),
+      result.price ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-body-2 font-semibold text-grey-950", children: result.price }) : null
+    ] });
+    if (CustomLink && !result.crossZone) {
+      return /* @__PURE__ */ jsx(CustomLink, { ...props, children: content }, option.id);
+    }
+    return /* @__PURE__ */ jsx("a", { ...props, "data-cross-zone": result.crossZone ? "true" : void 0, children: content }, option.id);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
+    mode === "idle" && recentOptions.length > 0 && /* @__PURE__ */ jsxs("div", { "data-slot": "nav-search-recent", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("span", { id: recentTitleId, className: searchPanelSectionTitleVariants(), children: recentSearchesTitle }),
+        onClearRecentSearches && /* @__PURE__ */ jsx("button", { type: "button", onClick: onClearRecentSearches, className: searchPanelTextButtonVariants(), children: clearRecentSearchesLabel })
+      ] }),
+      /* @__PURE__ */ jsx("div", { id: listId, role: "listbox", "aria-labelledby": recentTitleId, children: recentOptions.map((option) => /* @__PURE__ */ jsxs("div", { role: "presentation", className: "group/recent relative flex items-center", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: option.id,
+            role: "option",
+            "aria-selected": activeId === option.id,
+            onMouseEnter: () => onHover(option.id),
+            onClick: () => onPickRecent(option.query),
+            className: cn(searchPanelOptionVariants({ active: activeId === option.id }), "pr-10"),
+            "data-slot": "nav-search-recent-item",
+            children: [
+              /* @__PURE__ */ jsx(History, { size: 16, className: "shrink-0 text-grey-500", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-body-2 text-grey-800", children: option.query })
+            ]
+          }
+        ),
+        onRecentSearchRemove && // Pointer shortcut only: keyboard and screen-reader users remove with Delete on
+        // the active row, so it stays out of the listbox's accessibility tree.
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": "true",
+            title: removeRecentSearchLabel(option.query),
+            "aria-label": removeRecentSearchLabel(option.query),
+            onClick: () => onRecentSearchRemove(option.query),
+            className: "absolute right-1.5 rounded-full p-1.5 text-grey-400 transition-colors hover:bg-grey-100 hover:text-grey-700",
+            children: /* @__PURE__ */ jsx(X, { size: 14, "aria-hidden": true })
+          }
+        )
+      ] }, option.id)) })
+    ] }),
+    mode === "idle" && popularSearches.length > 0 && /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": popularSearchesTitle, "data-slot": "nav-search-popular", children: [
+      /* @__PURE__ */ jsx("span", { className: cn(searchPanelSectionTitleVariants(), "mb-2 block"), children: popularSearchesTitle }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: popularSearches.map((tag, idx) => {
+        const href = resolveNavDestination(tag.href, tag.zone, globalConfig.zones?.zones);
+        const crossZone = isCrossZoneNavigation(tag.zone, globalConfig.zones?.currentZone);
+        const tagClass = "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-grey-200 bg-grey-50 hover:border-grey-400 text-body-3 font-medium text-grey-800 transition-all cursor-pointer";
+        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TrendingUp, { size: 13, className: "text-grey-500 shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { children: tag.label })
+        ] });
+        if (href && CustomLink && !crossZone) {
+          return /* @__PURE__ */ jsx(CustomLink, { href, className: tagClass, onClick: () => onPopularPick(tag), children: content }, tag.id ?? idx);
+        }
+        if (href) {
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              href,
+              "data-cross-zone": crossZone ? "true" : void 0,
+              className: tagClass,
+              onClick: () => onPopularPick(tag),
+              children: content
+            },
+            tag.id ?? idx
+          );
+        }
+        return /* @__PURE__ */ jsx("button", { type: "button", className: tagClass, onClick: () => onPopularPick(tag), children: content }, tag.id ?? idx);
+      }) })
+    ] }),
+    mode === "results" && results && /* @__PURE__ */ jsxs("div", { "data-slot": "nav-search-results", children: [
+      /* @__PURE__ */ jsx("span", { id: resultsTitleId, className: cn(searchPanelSectionTitleVariants(), "mb-1 block"), children: results.title ?? "Products" }),
+      results.loading && resultOptions.length === 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex flex-col", "data-slot": "nav-search-results-loading", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-2 py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-12 shrink-0 animate-pulse rounded-md bg-grey-100" }),
+        /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-3 w-3/4 animate-pulse rounded bg-grey-100" }),
+          /* @__PURE__ */ jsx("span", { className: "h-3 w-1/3 animate-pulse rounded bg-grey-100" })
+        ] })
+      ] }, i)) }),
+      !results.loading && resultOptions.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2 py-2 text-body-2 text-grey-500", role: "status", children: results.emptyLabel ?? "No products match" }),
+      /* @__PURE__ */ jsxs("div", { id: listId, role: "listbox", "aria-labelledby": resultsTitleId, "aria-busy": results.loading || void 0, children: [
+        resultOptions.map(renderResultLink),
+        viewAll && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: viewAll.id,
+            role: "option",
+            "aria-selected": activeId === viewAll.id,
+            onMouseEnter: () => onHover(viewAll.id),
+            onClick: onViewAll,
+            className: cn(
+              searchPanelOptionVariants({ active: activeId === viewAll.id }),
+              "mt-1 border-t border-grey-100 pt-3 text-body-2 font-semibold text-primary"
+            ),
+            "data-slot": "nav-search-view-all",
+            children: [
+              /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: results.viewAllLabel ? results.viewAllLabel(query) : `See all results for "${query}"` }),
+              /* @__PURE__ */ jsx(ArrowRight, { size: 16, className: "shrink-0", "aria-hidden": true })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+export { NavSearchPanel, useNavSearchCombobox };

package/dist/components/NavMenuColumns/NavMenuColumns.styles.js

@@ -35,7 +35,7 @@ const navMenuPromoVariants = cva(
   "relative isolate flex w-[312px] aspect-[312/270] flex-col items-start gap-1.5 overflow-hidden rounded-[10px] p-5 text-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
 );
 const navMenuPromoTitleVariants = cva(
-  "font-sans text-[20px] leading-[1.3] [&_em]:font-display [&_em]:not-italic"
+  "font-sans text-subtitle-1 leading-[1.3] [&_em]:font-display [&_em]:not-italic"
 );
 const navMenuTilesVariants = cva(
   "grid gap-x-3 gap-y-4 overflow-x-auto bg-grey-50 px-5 py-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"

package/dist/components/OptionPicker/OptionPicker.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { OptionPickerProps } from './OptionPicker.types';
+/**
+ * One product option (finish, size…) as visible choices: colour swatches or pill buttons, in a
+ * radio group (arrow keys move and select, Tab leaves the group). Sold-out options stay
+ * selectable and are struck through; combinations that don't exist are disabled. Long lists
+ * (more than `maxVisible`) become a dropdown.
+ */
+export declare const OptionPicker: React.ForwardRefExoticComponent<OptionPickerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=OptionPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionPicker.d.ts","sourceRoot":"","sources":["../../../src/components/OptionPicker/OptionPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIlF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,0FA0IxB,CAAC"}

package/dist/components/OptionPicker/OptionPicker.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { optionPickerLegendVariants, optionPickerVariants, optionStrikeVariants, optionImageVariants, optionSwatchVariants, optionPillVariants } from './OptionPicker.styles.js';
+import { Select } from '../Select/Select.js';
+import { Swatch } from '../Swatch/Swatch.js';
+
+const stateOf = (option) => option.state ?? "available";
+const OptionPicker = React.forwardRef(
+  ({ label, options, value, onChange, display = "pill", maxVisible = 8, labels, className, ...props }, ref) => {
+    const legendId = React.useId();
+    const buttons = React.useRef([]);
+    const selected = options.find((option) => option.value === value);
+    const outOfStock = labels?.outOfStock ?? "Out of stock";
+    const legend = /* @__PURE__ */ jsxs("p", { id: legendId, className: optionPickerLegendVariants(), "data-slot": "option-picker-legend", children: [
+      label,
+      selected && /* @__PURE__ */ jsxs(Fragment, { children: [
+        ": ",
+        /* @__PURE__ */ jsx("span", { className: "font-normal text-grey-700", children: selected.label }),
+        stateOf(selected) === "out-of-stock" && /* @__PURE__ */ jsx("span", { className: "font-normal text-destructive", children: ` · ${outOfStock}` })
+      ] })
+    ] });
+    if (options.length > maxVisible) {
+      const unavailable = labels?.unavailable ?? "Unavailable";
+      return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "option-picker", className: cn(optionPickerVariants(), className), ...props, children: [
+        legend,
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            ariaLabel: label,
+            value,
+            onValueChange: onChange,
+            options: options.map((option) => ({
+              value: option.value,
+              label: stateOf(option) === "available" ? option.label : `${option.label} (${stateOf(option) === "out-of-stock" ? outOfStock : unavailable})`,
+              disabled: stateOf(option) === "unavailable"
+            }))
+          }
+        )
+      ] });
+    }
+    const enabled = options.map((option, index) => stateOf(option) === "unavailable" ? -1 : index).filter((i) => i >= 0);
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    const tabStop = selectedIndex >= 0 && enabled.includes(selectedIndex) ? selectedIndex : enabled[0];
+    const move = (from, delta) => {
+      if (enabled.length === 0) return;
+      const position = enabled.indexOf(from);
+      const next = enabled[(position + delta + enabled.length) % enabled.length];
+      buttons.current[next]?.focus();
+      onChange(options[next].value);
+    };
+    const onKeyDown = (index) => (event) => {
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        event.preventDefault();
+        move(index, 1);
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        event.preventDefault();
+        move(index, -1);
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "option-picker", className: cn(optionPickerVariants(), className), ...props, children: [
+      legend,
+      /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-labelledby": legendId, className: "flex flex-wrap gap-2", children: options.map((option, index) => {
+        const state = stateOf(option);
+        const isSelected = option.value === value;
+        const asSwatch = display === "swatch" && !!option.swatchHex;
+        const asImage = display === "image" && !!option.imageUrl;
+        const name = state === "available" ? option.label : `${option.label}, ${state === "out-of-stock" ? outOfStock : labels?.unavailable ?? "Unavailable"}`;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (node) => {
+              buttons.current[index] = node;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": isSelected,
+            "aria-label": name,
+            title: option.label,
+            disabled: state === "unavailable",
+            tabIndex: index === tabStop ? 0 : -1,
+            onClick: () => onChange(option.value),
+            onKeyDown: onKeyDown(index),
+            "data-state": state,
+            "data-slot": "option-picker-option",
+            className: asImage ? optionImageVariants({ selected: isSelected, state }) : asSwatch ? optionSwatchVariants({ selected: isSelected, state }) : optionPillVariants({ selected: isSelected, state }),
+            children: asImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: option.imageUrl,
+                  alt: "",
+                  loading: "lazy",
+                  decoding: "async",
+                  className: "size-full object-cover"
+                }
+              ),
+              state !== "available" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(optionStrikeVariants(), "rounded-none") })
+            ] }) : asSwatch ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Swatch, { color: option.swatchHex, size: "lg" }),
+              state !== "available" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: optionStrikeVariants() })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              option.swatchHex && /* @__PURE__ */ jsx(Swatch, { color: option.swatchHex, size: "sm" }),
+              option.label
+            ] })
+          },
+          option.value
+        );
+      }) })
+    ] });
+  }
+);
+OptionPicker.displayName = "OptionPicker";
+
+export { OptionPicker };

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

@@ -0,0 +1,20 @@
+export declare const optionPickerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const optionPickerLegendVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Swatch button: the dot sits inside a ring that shows the selection. */
+export declare const optionSwatchVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    state?: "available" | "out-of-stock" | "unavailable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Compact chip; the selected one takes the brand accent (border + tint), like the filters. */
+export declare const optionPillVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    state?: "available" | "out-of-stock" | "unavailable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Photo tile of the option (e.g. the chair in that fabric); the label is in the legend. */
+export declare const optionImageVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    state?: "available" | "out-of-stock" | "unavailable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Diagonal line across a sold-out swatch. */
+export declare const optionStrikeVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=OptionPicker.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/OptionPicker/OptionPicker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,oFAAuC,CAAC;AAEzE,eAAO,MAAM,0BAA0B,oFAAiD,CAAC;AAEzF,0EAA0E;AAC1E,eAAO,MAAM,oBAAoB;;;8EAgBhC,CAAC;AAEF,+FAA+F;AAC/F,eAAO,MAAM,kBAAkB;;;8EAgB9B,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,mBAAmB;;;8EAgB/B,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,oBAAoB,oFAEhC,CAAC"}

package/dist/components/OptionPicker/OptionPicker.styles.js

@@ -0,0 +1,60 @@
+import { cva } from 'class-variance-authority';
+
+const optionPickerVariants = cva("flex flex-col gap-3 font-sans");
+const optionPickerLegendVariants = cva("text-body-2 font-semibold text-grey-950");
+const optionSwatchVariants = cva(
+  "relative flex size-10 items-center justify-center rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed",
+  {
+    variants: {
+      selected: {
+        true: "border-primary",
+        false: "border-transparent hover:border-grey-300"
+      },
+      state: {
+        available: "",
+        "out-of-stock": "opacity-60",
+        unavailable: "opacity-30"
+      }
+    },
+    defaultVariants: { selected: false, state: "available" }
+  }
+);
+const optionPillVariants = cva(
+  "relative inline-flex h-9 min-w-11 items-center justify-center gap-2 rounded-sm border px-3.5 text-body-3 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed",
+  {
+    variants: {
+      selected: {
+        true: "border-primary bg-primary/10 font-semibold text-grey-950 shadow-[inset_0_0_0_1px_var(--color-primary)]",
+        false: "border-grey-300 bg-grey-50 text-grey-700 hover:border-grey-500 hover:text-grey-950"
+      },
+      state: {
+        available: "",
+        "out-of-stock": "text-grey-500 line-through decoration-grey-500",
+        unavailable: "border-dashed text-grey-400 line-through"
+      }
+    },
+    defaultVariants: { selected: false, state: "available" }
+  }
+);
+const optionImageVariants = cva(
+  "relative size-16 overflow-hidden rounded-sm border-2 bg-grey-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed",
+  {
+    variants: {
+      selected: {
+        true: "border-primary",
+        false: "border-grey-200 hover:border-grey-400"
+      },
+      state: {
+        available: "",
+        "out-of-stock": "opacity-60",
+        unavailable: "opacity-30"
+      }
+    },
+    defaultVariants: { selected: false, state: "available" }
+  }
+);
+const optionStrikeVariants = cva(
+  "pointer-events-none absolute inset-1 rounded-full bg-[linear-gradient(to_top_right,transparent_calc(50%-1px),var(--color-grey-700)_calc(50%-1px),var(--color-grey-700)_calc(50%+1px),transparent_calc(50%+1px))]"
+);
+
+export { optionImageVariants, optionPickerLegendVariants, optionPickerVariants, optionPillVariants, optionStrikeVariants, optionSwatchVariants };

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

@@ -0,0 +1,39 @@
+import type * as React from 'react';
+/**
+ * - `available`: can be picked and bought;
+ * - `out-of-stock`: exists but sold out — still selectable (shown struck through), so the shopper
+ *   sees its price and can pick another option;
+ * - `unavailable`: this combination doesn't exist — disabled.
+ */
+export type OptionPickerState = 'available' | 'out-of-stock' | 'unavailable';
+export interface OptionPickerOption {
+    value: string;
+    label: string;
+    /** Swatch colour (display `swatch`); options without one fall back to a pill. */
+    swatchHex?: string | null;
+    /** Photo of the option (display `image`), e.g. the product in that fabric. */
+    imageUrl?: string | null;
+    state?: OptionPickerState;
+}
+export interface OptionPickerLabels {
+    /** Suffix after the selected label when it's sold out. Defaults to "Out of stock". */
+    outOfStock?: string;
+    /** Shown in the dropdown for combinations that don't exist. Defaults to "Unavailable". */
+    unavailable?: string;
+}
+export interface OptionPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Group name, shown as "Finish: Walnut". */
+    label: string;
+    options: OptionPickerOption[];
+    value?: string;
+    onChange: (value: string) => void;
+    /**
+     * `swatch`: colour dots; `image`: photo tiles; `pill`: text chips (a colour dot inside when the
+     * option has one). Options missing their swatch colour or image fall back to a pill.
+     */
+    display?: 'swatch' | 'image' | 'pill';
+    /** More options than this render as a dropdown. Defaults to 8. */
+    maxVisible?: number;
+    labels?: OptionPickerLabels;
+}
+//# sourceMappingURL=OptionPicker.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionPicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/OptionPicker/OptionPicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IACjC,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Price.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Price/Price.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;8EASxB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAS9B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAS/B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAShC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"Price.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Price/Price.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;8EASxB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAS9B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAS/B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/Price/Price.styles.js

@@ -4,7 +4,7 @@ const priceVariants = cva("inline-flex flex-wrap items-baseline font-sans text-f
   variants: {
     size: {
       sm: "gap-x-1.5",
-      md: "gap-x-1",
+      md: "gap-x-1.5",
       lg: "gap-x-2"
     }
   },
@@ -34,7 +34,8 @@ const priceDiscountVariants = cva("font-semibold text-success", {
   variants: {
     size: {
       sm: "text-body-3",
-      md: "ms-1 text-body-2",
+      // No own margin: the row gap spaces it, and it starts flush left when it wraps.
+      md: "text-body-2",
       lg: "text-body-1"
     }
   },

package/dist/components/ProductGallery/ProductGallery.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { ProductGalleryProps } from './ProductGallery.types';
+/**
+ * Product images: a main image you can swipe (scroll-snap) or step with arrows, a thumbnail row
+ * (visible on phones too: easier to aim than dots), and a fullscreen zoomable viewer when the main
+ * image is clicked. The first image is marked high priority (it's usually the page's LCP), the
+ * rest load lazily; the frame keeps its aspect ratio, so nothing shifts while images load.
+ */
+export declare const ProductGallery: React.ForwardRefExoticComponent<ProductGalleryProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProductGallery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGallery.d.ts","sourceRoot":"","sources":["../../../src/components/ProductGallery/ProductGallery.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EAAE,mBAAmB,EAAoD,MAAM,wBAAwB,CAAC;AAoBpH;;;;;GAKG;AACH,eAAO,MAAM,cAAc,4FAkS1B,CAAC"}