@timmbr/ui 1.8.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.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { NavMenuColumnsProps, NavMenuGroup, NavMenuPromoProps, NavMenuTilesProps } from './NavMenuColumns.types';
+import type { NavHeaderItem } from '../NavHeader/NavHeader.types';
+import type { NavMenuColumnsProps, NavMenuData, NavMenuGroup, NavMenuPromoProps, NavMenuTilesProps, ToNavMenuItemsOptions } from './NavMenuColumns.types';
 /**
  * Splits groups, in order, into at most `maxColumns` stacks so the tallest
  * stack is as short as possible (groups never split). Uses up to
@@ -27,4 +28,10 @@ export declare const NAV_MENU_TILE_PX = 88;
  * initial on a muted square.
  */
 export declare const NavMenuTiles: React.ForwardRefExoticComponent<NavMenuTilesProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Turns plain menu data into `NavHeader` items: each opens a popover with
+ * `NavMenuColumns` on desktop and, when `tiles` are given, `NavMenuTiles` in
+ * the mobile tab panel. The item label itself is not a link.
+ */
+export declare function toNavMenuItems(menus: readonly NavMenuData[], { crossZone, linkComponent, popoverWidth }?: ToNavMenuItemsOptions): NavHeaderItem[];
 //# sourceMappingURL=NavMenuColumns.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavMenuColumns.d.ts","sourceRoot":"","sources":["../../../src/components/NavMenuColumns/NavMenuColumns.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EAEV,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,wBAAwB,CAAC;AA8BhC;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE,UAAU,EAAE,MAAM,GAAG,YAAY,EAAE,EAAE,CA+B9F;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,yFAgE1B,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,YAAY,uFA0CxB,CAAC;AAGF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC;;;;;GAKG;AACH,eAAO,MAAM,YAAY,uFAuCxB,CAAC"}
+{"version":3,"file":"NavMenuColumns.d.ts","sourceRoot":"","sources":["../../../src/components/NavMenuColumns/NavMenuColumns.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAiBlE,OAAO,KAAK,EAEV,mBAAmB,EACnB,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,wBAAwB,CAAC;AA8BhC;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE,UAAU,EAAE,MAAM,GAAG,YAAY,EAAE,EAAE,CA+B9F;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,yFAgE1B,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,YAAY,uFA0CxB,CAAC;AAGF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC;;;;;GAKG;AACH,eAAO,MAAM,YAAY,uFAuCxB,CAAC;AAGF;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,SAAS,WAAW,EAAE,EAC7B,EAAE,SAAiB,EAAE,aAAa,EAAE,YAA0B,EAAE,GAAE,qBAA0B,GAC3F,aAAa,EAAE,CAuBjB"}

package/dist/components/NavMenuColumns/NavMenuColumns.js

@@ -134,5 +134,31 @@ const NavMenuTiles = React.forwardRef(
   }
 );
 NavMenuTiles.displayName = "NavMenuTiles";
+function toNavMenuItems(menus, { crossZone = false, linkComponent, popoverWidth = "container" } = {}) {
+  return menus.map((menu) => ({
+    id: menu.id,
+    label: menu.label,
+    popoverWidth,
+    content: /* @__PURE__ */ jsx(
+      NavMenuColumns,
+      {
+        "aria-label": typeof menu.label === "string" ? menu.label : void 0,
+        groups: menu.groups,
+        aside: menu.aside,
+        crossZone,
+        linkComponent
+      }
+    ),
+    mobileContent: menu.tiles ? /* @__PURE__ */ jsx(
+      NavMenuTiles,
+      {
+        "aria-label": typeof menu.label === "string" ? menu.label : void 0,
+        items: menu.tiles,
+        crossZone,
+        linkComponent
+      }
+    ) : void 0
+  }));
+}
 
-export { NAV_MENU_TILE_PX, NavMenuColumns, NavMenuPromo, NavMenuTiles, packNavMenuGroups };
+export { NAV_MENU_TILE_PX, NavMenuColumns, NavMenuPromo, NavMenuTiles, packNavMenuGroups, toNavMenuItems };

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/NavMenuColumns/NavMenuColumns.types.d.ts

@@ -81,4 +81,22 @@ export interface NavMenuTilesProps extends Omit<React.HTMLAttributes<HTMLElement
     /** Accessible name of the navigation landmark. */
     'aria-label'?: string;
 }
+/** Plain data for one header menu: desktop groups, optional mobile tiles and aside. */
+export interface NavMenuData {
+    id: string;
+    label: React.ReactNode;
+    groups: NavMenuGroup[];
+    /** Mobile tab panel tiles; without them the mobile panel shows the groups. */
+    tiles?: NavMenuTile[];
+    /** Desktop aside, e.g. a `NavMenuPromo`. */
+    aside?: React.ReactNode;
+}
+export interface ToNavMenuItemsOptions {
+    /** The menu links lead to another zone: plain `<a>` (full navigation). */
+    crossZone?: boolean;
+    /** Link component for same-zone links (e.g. `next/link`). */
+    linkComponent?: React.ComponentType<NavMenuColumnsLinkProps>;
+    /** Desktop popover width. Defaults to 'container'. */
+    popoverWidth?: 'container' | 'full' | 'dropdown' | number;
+}
 //# sourceMappingURL=NavMenuColumns.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavMenuColumns.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavMenuColumns/NavMenuColumns.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,yCAAyC;AACzC,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,8DAA8D;IAC9D,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC9F,mFAAmF;IACnF,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC7D,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACzF,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC7D,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5F,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC7D,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"NavMenuColumns.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavMenuColumns/NavMenuColumns.types.ts"],"names":[],"mappings":"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"}

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