@enadhq/enad-react-sdk 1.0.0 → 1.1.0

package/dist/client/storefront/components/product-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-tabs.mjs","names":[],"sources":["../../../../src/client/storefront/components/product-tabs.tsx"],"sourcesContent":["\"use client\"\n\nimport { useState } from \"react\"\n\nexport interface ProductTab {\n  id: string\n  label: string\n  content: React.ReactNode\n}\n\nexport interface ProductTabsProps {\n  tabs: ProductTab[]\n  defaultTab?: string\n  className?: string\n}\n\nexport function ProductTabs({ tabs, defaultTab, className = \"\" }: ProductTabsProps) {\n  const [activeTab, setActiveTab] = useState(() => defaultTab || tabs[0]?.id || \"\")\n\n  if (tabs.length === 0) return null\n\n  const activePanel = tabs.find((tab) => tab.id === activeTab)\n\n  return (\n    <div className={`font-enad ${className}`}>\n      {/* Tab list */}\n      <div className=\"flex border-b border-(--enad-border-color)\" role=\"tablist\">\n        {tabs.map((tab) => {\n          const isActive = tab.id === activeTab\n          return (\n            <button\n              key={tab.id}\n              role=\"tab\"\n              id={`tab-${tab.id}`}\n              aria-selected={isActive}\n              aria-controls={`panel-${tab.id}`}\n              tabIndex={isActive ? 0 : -1}\n              onClick={() => setActiveTab(tab.id)}\n              onKeyDown={(e) => {\n                const currentIndex = tabs.findIndex((t) => t.id === activeTab)\n                let nextIndex: number | undefined\n\n                if (e.key === \"ArrowRight\") {\n                  nextIndex = (currentIndex + 1) % tabs.length\n                } else if (e.key === \"ArrowLeft\") {\n                  nextIndex = (currentIndex - 1 + tabs.length) % tabs.length\n                } else if (e.key === \"Home\") {\n                  nextIndex = 0\n                } else if (e.key === \"End\") {\n                  nextIndex = tabs.length - 1\n                }\n\n                if (nextIndex !== undefined) {\n                  e.preventDefault()\n                  const nextTab = tabs[nextIndex]\n                  if (nextTab) {\n                    setActiveTab(nextTab.id)\n                    const el = document.getElementById(`tab-${nextTab.id}`)\n                    el?.focus()\n                  }\n                }\n              }}\n              className={`px-4 py-3 text-sm font-medium transition-colors border-b-2 -mb-px ${\n                isActive\n                  ? \"border-(--enad-button-bg) text-(--enad-text-primary-color)\"\n                  : \"border-transparent text-(--enad-text-muted-color) hover:text-(--enad-text-primary-color) hover:border-(--enad-border-color)\"\n              }`}\n            >\n              {tab.label}\n            </button>\n          )\n        })}\n      </div>\n\n      {/* Tab panel */}\n      {activePanel && (\n        <div\n          role=\"tabpanel\"\n          id={`panel-${activePanel.id}`}\n          aria-labelledby={`tab-${activePanel.id}`}\n          tabIndex={0}\n          className=\"py-4 text-(--enad-text-primary-color)\"\n        >\n          {activePanel.content}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;AAgBA,SAAgB,YAAY,EAAE,MAAM,YAAY,YAAY,MAAwB;CAClF,MAAM,CAAC,WAAW,gBAAgB,eAAe,cAAc,KAAK,IAAI,MAAM,GAAG;AAEjF,KAAI,KAAK,WAAW,EAAG,QAAO;CAE9B,MAAM,cAAc,KAAK,MAAM,QAAQ,IAAI,OAAO,UAAU;AAE5D,QACE,qBAAC,OAAD;EAAK,WAAW,aAAa;YAA7B,CAEE,oBAAC,OAAD;GAAK,WAAU;GAA6C,MAAK;aAC9D,KAAK,KAAK,QAAQ;IACjB,MAAM,WAAW,IAAI,OAAO;AAC5B,WACE,oBAAC,UAAD;KAEE,MAAK;KACL,IAAI,OAAO,IAAI;KACf,iBAAe;KACf,iBAAe,SAAS,IAAI;KAC5B,UAAU,WAAW,IAAI;KACzB,eAAe,aAAa,IAAI,GAAG;KACnC,YAAY,MAAM;MAChB,MAAM,eAAe,KAAK,WAAW,MAAM,EAAE,OAAO,UAAU;MAC9D,IAAI;AAEJ,UAAI,EAAE,QAAQ,aACZ,cAAa,eAAe,KAAK,KAAK;eAC7B,EAAE,QAAQ,YACnB,cAAa,eAAe,IAAI,KAAK,UAAU,KAAK;eAC3C,EAAE,QAAQ,OACnB,aAAY;eACH,EAAE,QAAQ,MACnB,aAAY,KAAK,SAAS;AAG5B,UAAI,cAAc,KAAA,GAAW;AAC3B,SAAE,gBAAgB;OAClB,MAAM,UAAU,KAAK;AACrB,WAAI,SAAS;AACX,qBAAa,QAAQ,GAAG;AACb,iBAAS,eAAe,OAAO,QAAQ,KAAK,EACnD,OAAO;;;;KAIjB,WAAW,qEACT,WACI,+DACA;eAGL,IAAI;KACE,EAtCF,IAAI,GAsCF;KAEX;GACE,CAAA,EAGL,eACC,oBAAC,OAAD;GACE,MAAK;GACL,IAAI,SAAS,YAAY;GACzB,mBAAiB,OAAO,YAAY;GACpC,UAAU;GACV,WAAU;aAET,YAAY;GACT,CAAA,CAEJ"}

package/dist/client/storefront/components/quick-view.d.ts

@@ -0,0 +1,39 @@
+import { ImageAsset } from "../types.js";
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/quick-view.d.ts
+interface QuickViewProduct {
+  title: string;
+  images?: ImageAsset[];
+  price?: React$1.ReactNode;
+  description?: string;
+  href?: string;
+}
+interface QuickViewProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  product: QuickViewProduct | null;
+  /** Presentation mode */
+  mode?: "sheet" | "modal";
+  /** Side when mode is "sheet" */
+  side?: "right" | "left";
+  /** Slot for variant selector, add-to-cart, wishlist, etc. */
+  children?: React$1.ReactNode;
+  /** Link label for "View full details" */
+  viewDetailsLabel?: string;
+  className?: string;
+}
+declare function QuickView({
+  open,
+  onOpenChange,
+  product,
+  mode,
+  side,
+  viewDetailsLabel,
+  children,
+  className
+}: QuickViewProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { QuickView, QuickViewProduct, QuickViewProps };
+//# sourceMappingURL=quick-view.d.ts.map

package/dist/client/storefront/components/quick-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-view.d.ts","names":[],"sources":["../../../../src/client/storefront/components/quick-view.tsx"],"mappings":";;;;;UAUiB,gBAAA;EACf,KAAA;EACA,MAAA,GAAS,UAAA;EACT,KAAA,GAAQ,OAAA,CAAM,SAAA;EACd,WAAA;EACA,IAAA;AAAA;AAAA,UAGe,cAAA;EACf,IAAA;EACA,YAAA,GAAe,IAAA;EACf,OAAA,EAAS,gBAAA;EARD;EAUR,IAAA;EATA;EAWA,IAAA;EAVI;EAYJ,QAAA,GAAW,OAAA,CAAM,SAAA;EATF;EAWf,gBAAA;EACA,SAAA;AAAA;AAAA,iBAKc,SAAA,CAAA;EACd,IAAA;EACA,YAAA;EACA,OAAA;EACA,IAAA;EACA,IAAA;EACA,gBAAA;EACA,QAAA;EACA;AAAA,GACC,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/quick-view.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../../ui-resolver/sheet.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/quick-view.tsx
+function QuickView({ open, onOpenChange, product, mode = "sheet", side = "right", viewDetailsLabel = "View full details", children, className }) {
+	const CloseIcon = useIcon("close");
+	const titleId = React$1.useId();
+	if (!product) return null;
+	const { title, images = [], price, description, href } = product;
+	const imageContent = /* @__PURE__ */ jsx(QuickViewGallery, { images });
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-6", className),
+		children: [imageContent, /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 px-1",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("h3", {
+						id: titleId,
+						className: "font-enad text-lg font-semibold leading-tight",
+						children: title
+					}), price && /* @__PURE__ */ jsx("div", {
+						className: "text-base",
+						children: price
+					})]
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground leading-relaxed",
+					children: description
+				}),
+				children,
+				href && /* @__PURE__ */ jsx("a", {
+					href,
+					className: "mt-2 text-sm font-medium underline underline-offset-4 hover:text-primary transition-colors",
+					children: viewDetailsLabel
+				})
+			]
+		})]
+	});
+	if (mode === "modal") return /* @__PURE__ */ jsx(ModalOverlay, {
+		open,
+		onOpenChange,
+		labelId: titleId,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative max-h-[85vh] overflow-y-auto rounded-lg bg-background p-6 shadow-lg sm:max-w-lg w-full",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onOpenChange(false),
+				className: "absolute right-4 top-4 z-10 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity",
+				"aria-label": "Close",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+			}), content]
+		})
+	});
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side,
+			className: "overflow-y-auto sm:max-w-md",
+			children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, {
+				className: "sr-only",
+				children: title
+			}) }), content]
+		})
+	});
+}
+function QuickViewGallery({ images }) {
+	const [activeIndex, setActiveIndex] = React$1.useState(0);
+	if (images.length === 0) return /* @__PURE__ */ jsx("div", { className: "aspect-[4/5] w-full rounded-md bg-muted" });
+	const active = images[activeIndex];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative aspect-[4/5] w-full overflow-hidden rounded-md bg-muted",
+			children: /* @__PURE__ */ jsx("img", {
+				src: active.src,
+				alt: active.alt ?? "",
+				className: "size-full object-cover"
+			})
+		}), images.length > 1 && /* @__PURE__ */ jsx("div", {
+			className: "flex gap-2 overflow-x-auto pb-1",
+			children: images.map((img, i) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setActiveIndex(i),
+				className: cn("relative size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none", i === activeIndex ? "border-primary" : "border-transparent hover:border-muted-foreground/30"),
+				children: /* @__PURE__ */ jsx("img", {
+					src: img.src,
+					alt: img.alt ?? "",
+					loading: "lazy",
+					className: "size-full object-cover"
+				})
+			}, i))
+		})]
+	});
+}
+function ModalOverlay({ open, onOpenChange, children, labelId }) {
+	const overlayRef = React$1.useRef(null);
+	const previousFocusRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (open) {
+			previousFocusRef.current = document.activeElement;
+			requestAnimationFrame(() => overlayRef.current?.focus());
+		} else if (previousFocusRef.current) {
+			previousFocusRef.current.focus();
+			previousFocusRef.current = null;
+		}
+	}, [open]);
+	React$1.useEffect(() => {
+		if (!open) return;
+		const handleKey = (e) => {
+			if (e.key === "Escape") {
+				onOpenChange(false);
+				return;
+			}
+			if (e.key === "Tab") {
+				const dialog = overlayRef.current;
+				if (!dialog) return;
+				const focusable = dialog.querySelectorAll("a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])");
+				if (focusable.length === 0) return;
+				const first = focusable[0];
+				const last = focusable[focusable.length - 1];
+				if (e.shiftKey && document.activeElement === first) {
+					e.preventDefault();
+					last.focus();
+				} else if (!e.shiftKey && document.activeElement === last) {
+					e.preventDefault();
+					first.focus();
+				}
+			}
+		};
+		document.addEventListener("keydown", handleKey);
+		return () => document.removeEventListener("keydown", handleKey);
+	}, [open, onOpenChange]);
+	if (!open) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: overlayRef,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": labelId,
+		tabIndex: -1,
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-(--enad-overlay-color)/50 backdrop-blur-[2px] outline-none",
+		onClick: (e) => {
+			if (e.target === overlayRef.current) onOpenChange(false);
+		},
+		children
+	});
+}
+//#endregion
+export { QuickView };
+
+//# sourceMappingURL=quick-view.mjs.map

package/dist/client/storefront/components/quick-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-view.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/quick-view.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"../../ui-resolver/sheet\";\nimport type { ImageAsset } from \"../types\";\n\n/* ─── Types ─── */\n\nexport interface QuickViewProduct {\n  title: string;\n  images?: ImageAsset[];\n  price?: React.ReactNode;\n  description?: string;\n  href?: string;\n}\n\nexport interface QuickViewProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  product: QuickViewProduct | null;\n  /** Presentation mode */\n  mode?: \"sheet\" | \"modal\";\n  /** Side when mode is \"sheet\" */\n  side?: \"right\" | \"left\";\n  /** Slot for variant selector, add-to-cart, wishlist, etc. */\n  children?: React.ReactNode;\n  /** Link label for \"View full details\" */\n  viewDetailsLabel?: string;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function QuickView({\n  open,\n  onOpenChange,\n  product,\n  mode = \"sheet\",\n  side = \"right\",\n  viewDetailsLabel = \"View full details\",\n  children,\n  className,\n}: QuickViewProps) {\n  const CloseIcon = useIcon(\"close\");\n  const titleId = React.useId();\n\n  if (!product) return null;\n\n  const { title, images = [], price, description, href } = product;\n\n  const imageContent = <QuickViewGallery images={images} />;\n\n  const content = (\n    <div className={cn(\"flex flex-col gap-6\", className)}>\n      {imageContent}\n\n      <div className=\"flex flex-col gap-4 px-1\">\n        <div className=\"flex flex-col gap-1\">\n          <h3 id={titleId} className=\"font-enad text-lg font-semibold leading-tight\">\n            {title}\n          </h3>\n          {price && <div className=\"text-base\">{price}</div>}\n        </div>\n\n        {description && (\n          <p className=\"text-sm text-muted-foreground leading-relaxed\">{description}</p>\n        )}\n\n        {children}\n\n        {href && (\n          <a\n            href={href}\n            className=\"mt-2 text-sm font-medium underline underline-offset-4 hover:text-primary transition-colors\"\n          >\n            {viewDetailsLabel}\n          </a>\n        )}\n      </div>\n    </div>\n  );\n\n  if (mode === \"modal\") {\n    return (\n      <ModalOverlay open={open} onOpenChange={onOpenChange} labelId={titleId}>\n        <div className=\"relative max-h-[85vh] overflow-y-auto rounded-lg bg-background p-6 shadow-lg sm:max-w-lg w-full\">\n          <button\n            type=\"button\"\n            onClick={() => onOpenChange(false)}\n            className=\"absolute right-4 top-4 z-10 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity\"\n            aria-label=\"Close\"\n          >\n            <CloseIcon className=\"size-4\" />\n          </button>\n          {content}\n        </div>\n      </ModalOverlay>\n    );\n  }\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent side={side} className=\"overflow-y-auto sm:max-w-md\">\n        <SheetHeader>\n          <SheetTitle className=\"sr-only\">{title}</SheetTitle>\n        </SheetHeader>\n        {content}\n      </SheetContent>\n    </Sheet>\n  );\n}\n\n/* ─── Gallery (internal) ─── */\n\nfunction QuickViewGallery({ images }: { images: ImageAsset[] }) {\n  const [activeIndex, setActiveIndex] = React.useState(0);\n\n  if (images.length === 0) {\n    return <div className=\"aspect-[4/5] w-full rounded-md bg-muted\" />;\n  }\n\n  const active = images[activeIndex]!;\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-md bg-muted\">\n        <img src={active.src} alt={active.alt ?? \"\"} className=\"size-full object-cover\" />\n      </div>\n\n      {images.length > 1 && (\n        <div className=\"flex gap-2 overflow-x-auto pb-1\">\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              onClick={() => setActiveIndex(i)}\n              className={cn(\n                \"relative size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none\",\n                i === activeIndex\n                  ? \"border-primary\"\n                  : \"border-transparent hover:border-muted-foreground/30\",\n              )}\n            >\n              <img\n                src={img.src}\n                alt={img.alt ?? \"\"}\n                loading=\"lazy\"\n                className=\"size-full object-cover\"\n              />\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ─── Modal overlay (internal) ─── */\n\nfunction ModalOverlay({\n  open,\n  onOpenChange,\n  children,\n  labelId,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: React.ReactNode;\n  labelId?: string;\n}) {\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n  const previousFocusRef = React.useRef<HTMLElement | null>(null);\n\n  // Capture triggering element and manage focus\n  React.useEffect(() => {\n    if (open) {\n      previousFocusRef.current = document.activeElement as HTMLElement | null;\n      // Focus the dialog container after mount\n      requestAnimationFrame(() => overlayRef.current?.focus());\n    } else if (previousFocusRef.current) {\n      previousFocusRef.current.focus();\n      previousFocusRef.current = null;\n    }\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onOpenChange(false);\n        return;\n      }\n      // Focus trap: cycle Tab within the dialog\n      if (e.key === \"Tab\") {\n        const dialog = overlayRef.current;\n        if (!dialog) return;\n        const focusable = dialog.querySelectorAll<HTMLElement>(\n          'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (focusable.length === 0) return;\n        const first = focusable[0]!;\n        const last = focusable[focusable.length - 1]!;\n        if (e.shiftKey && document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      ref={overlayRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelId}\n      tabIndex={-1}\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-(--enad-overlay-color)/50 backdrop-blur-[2px] outline-none\"\n      onClick={(e) => {\n        if (e.target === overlayRef.current) onOpenChange(false);\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/client/storefront/components/review-summary.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/review-summary.d.ts
+interface ReviewDistribution {
+  /** Star count (1-5) */
+  stars: number;
+  /** Number of reviews with this rating */
+  count: number;
+}
+interface ReviewSummaryProps {
+  averageRating: number;
+  totalReviews: number;
+  /** Distribution from 5 stars to 1 star. Missing entries default to 0. */
+  distribution: ReviewDistribution[];
+  /** Called when user clicks a distribution bar (for filtering) */
+  onBarClick?: (stars: number) => void;
+  className?: string;
+}
+declare function ReviewSummary({
+  averageRating,
+  totalReviews,
+  distribution,
+  onBarClick,
+  className
+}: ReviewSummaryProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ReviewDistribution, ReviewSummary, ReviewSummaryProps };
+//# sourceMappingURL=review-summary.d.ts.map

package/dist/client/storefront/components/review-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-summary.d.ts","names":[],"sources":["../../../../src/client/storefront/components/review-summary.tsx"],"mappings":";;;UAQiB,kBAAA;;EAEf,KAAA;EAFe;EAIf,KAAA;AAAA;AAAA,UAGe,kBAAA;EACf,aAAA;EACA,YAAA;EAFiC;EAIjC,YAAA,EAAc,kBAAA;EAAkB;EAEhC,UAAA,IAAc,KAAA;EACd,SAAA;AAAA;AAAA,iBAKc,aAAA,CAAA;EACd,aAAA;EACA,YAAA;EACA,YAAA;EACA,UAAA;EACA;AAAA,GACC,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/review-summary.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { StarRating } from "./star-rating.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/review-summary.tsx
+function ReviewSummary({ averageRating, totalReviews, distribution, onBarClick, className }) {
+	const StarFilledIcon = useIcon("starFilled");
+	const maxCount = Math.max(1, ...distribution.map((d) => d.count));
+	const distributionMap = new Map(distribution.map((d) => [d.stars, d.count]));
+	const rows = [
+		5,
+		4,
+		3,
+		2,
+		1
+	].map((stars) => ({
+		stars,
+		count: distributionMap.get(stars) ?? 0
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-4 sm:flex-row sm:gap-8", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-1 sm:min-w-[120px]",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-4xl font-bold font-enad tabular-nums",
+					children: averageRating.toFixed(1)
+				}),
+				/* @__PURE__ */ jsx(StarRating, {
+					rating: averageRating,
+					size: "sm"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						totalReviews.toLocaleString(),
+						" ",
+						totalReviews === 1 ? "review" : "reviews"
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-1 flex-col gap-2",
+			children: rows.map(({ stars, count }) => {
+				const pct = maxCount > 0 ? count / maxCount * 100 : 0;
+				const isClickable = onBarClick && count > 0;
+				return /* @__PURE__ */ jsxs(isClickable ? "button" : "div", {
+					...isClickable && {
+						type: "button",
+						onClick: () => onBarClick(stars)
+					},
+					className: cn("flex items-center gap-3 text-sm", isClickable && "cursor-pointer hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm"),
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "w-8 shrink-0 text-right tabular-nums font-enad inline-flex items-center justify-end gap-0.5",
+							children: [stars, /* @__PURE__ */ jsx(StarFilledIcon, { className: "size-3 text-(--enad-star-color)" })]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "relative h-2.5 flex-1 overflow-hidden rounded-full bg-muted",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "absolute inset-y-0 left-0 rounded-full bg-(--enad-star-color) transition-all duration-300",
+								style: { width: `${pct}%` }
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "w-10 shrink-0 text-right tabular-nums text-muted-foreground",
+							children: count
+						})
+					]
+				}, stars);
+			})
+		})]
+	});
+}
+//#endregion
+export { ReviewSummary };
+
+//# sourceMappingURL=review-summary.mjs.map

package/dist/client/storefront/components/review-summary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-summary.mjs","names":[],"sources":["../../../../src/client/storefront/components/review-summary.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { StarRating } from \"./star-rating\";\n\n/* ─── Types ─── */\n\nexport interface ReviewDistribution {\n  /** Star count (1-5) */\n  stars: number;\n  /** Number of reviews with this rating */\n  count: number;\n}\n\nexport interface ReviewSummaryProps {\n  averageRating: number;\n  totalReviews: number;\n  /** Distribution from 5 stars to 1 star. Missing entries default to 0. */\n  distribution: ReviewDistribution[];\n  /** Called when user clicks a distribution bar (for filtering) */\n  onBarClick?: (stars: number) => void;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ReviewSummary({\n  averageRating,\n  totalReviews,\n  distribution,\n  onBarClick,\n  className,\n}: ReviewSummaryProps) {\n  const StarFilledIcon = useIcon(\"starFilled\");\n  const maxCount = Math.max(1, ...distribution.map((d) => d.count));\n\n  // Build full 5-to-1 distribution, filling missing entries with 0\n  const distributionMap = new Map(distribution.map((d) => [d.stars, d.count]));\n  const rows = [5, 4, 3, 2, 1].map((stars) => ({\n    stars,\n    count: distributionMap.get(stars) ?? 0,\n  }));\n\n  return (\n    <div className={cn(\"flex flex-col gap-4 sm:flex-row sm:gap-8\", className)}>\n      {/* Left: average */}\n      <div className=\"flex flex-col items-center gap-1 sm:min-w-[120px]\">\n        <span className=\"text-4xl font-bold font-enad tabular-nums\">\n          {averageRating.toFixed(1)}\n        </span>\n        <StarRating rating={averageRating} size=\"sm\" />\n        <span className=\"text-sm text-muted-foreground\">\n          {totalReviews.toLocaleString()} {totalReviews === 1 ? \"review\" : \"reviews\"}\n        </span>\n      </div>\n\n      {/* Right: distribution bars */}\n      <div className=\"flex flex-1 flex-col gap-2\">\n        {rows.map(({ stars, count }) => {\n          const pct = maxCount > 0 ? (count / maxCount) * 100 : 0;\n          const isClickable = onBarClick && count > 0;\n          const Tag = isClickable ? \"button\" : \"div\";\n\n          return (\n            <Tag\n              key={stars}\n              {...(isClickable && {\n                type: \"button\" as const,\n                onClick: () => onBarClick(stars),\n              })}\n              className={cn(\n                \"flex items-center gap-3 text-sm\",\n                isClickable &&\n                  \"cursor-pointer hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm\",\n              )}\n            >\n              <span className=\"w-8 shrink-0 text-right tabular-nums font-enad inline-flex items-center justify-end gap-0.5\">\n                {stars}\n                <StarFilledIcon className=\"size-3 text-(--enad-star-color)\" />\n              </span>\n              <div className=\"relative h-2.5 flex-1 overflow-hidden rounded-full bg-muted\">\n                <div\n                  className=\"absolute inset-y-0 left-0 rounded-full bg-(--enad-star-color) transition-all duration-300\"\n                  style={{ width: `${pct}%` }}\n                />\n              </div>\n              <span className=\"w-10 shrink-0 text-right tabular-nums text-muted-foreground\">\n                {count}\n              </span>\n            </Tag>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgB,cAAc,EAC5B,eACA,cACA,cACA,YACA,aACqB;CACrB,MAAM,iBAAiB,QAAQ,aAAa;CAC5C,MAAM,WAAW,KAAK,IAAI,GAAG,GAAG,aAAa,KAAK,MAAM,EAAE,MAAM,CAAC;CAGjE,MAAM,kBAAkB,IAAI,IAAI,aAAa,KAAK,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;CAC5E,MAAM,OAAO;EAAC;EAAG;EAAG;EAAG;EAAG;EAAE,CAAC,KAAK,WAAW;EAC3C;EACA,OAAO,gBAAgB,IAAI,MAAM,IAAI;EACtC,EAAE;AAEH,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,4CAA4C,UAAU;YAAzE,CAEE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,QAAD;KAAM,WAAU;eACb,cAAc,QAAQ,EAAE;KACpB,CAAA;IACP,oBAAC,YAAD;KAAY,QAAQ;KAAe,MAAK;KAAO,CAAA;IAC/C,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,aAAa,gBAAgB;MAAC;MAAE,iBAAiB,IAAI,WAAW;MAC5D;;IACH;MAGN,oBAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,EAAE,OAAO,YAAY;IAC9B,MAAM,MAAM,WAAW,IAAK,QAAQ,WAAY,MAAM;IACtD,MAAM,cAAc,cAAc,QAAQ;AAG1C,WACE,qBAHU,cAAc,WAAW,OAGnC;KAEE,GAAK,eAAe;MAClB,MAAM;MACN,eAAe,WAAW,MAAM;MACjC;KACD,WAAW,GACT,mCACA,eACE,oKACH;eAVH;MAYE,qBAAC,QAAD;OAAM,WAAU;iBAAhB,CACG,OACD,oBAAC,gBAAD,EAAgB,WAAU,mCAAoC,CAAA,CACzD;;MACP,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,OAAD;QACE,WAAU;QACV,OAAO,EAAE,OAAO,GAAG,IAAI,IAAI;QAC3B,CAAA;OACE,CAAA;MACN,oBAAC,QAAD;OAAM,WAAU;iBACb;OACI,CAAA;MACH;OAxBC,MAwBD;KAER;GACE,CAAA,CACF"}

package/dist/client/storefront/components/search-autocomplete.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/search-autocomplete.d.ts
+interface SearchSuggestion {
+  id: string;
+  label: string;
+  type?: "product" | "category" | "recent" | "suggestion";
+  imageUrl?: string;
+  meta?: string;
+}
+interface SearchAutocompleteProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  onSearch?: (query: string) => void;
+  onSelect?: (suggestion: SearchSuggestion) => void;
+  suggestions?: SearchSuggestion[];
+  loading?: boolean;
+  placeholder?: string;
+  debounceMs?: number;
+  className?: string;
+  labels?: {
+    clear?: string;
+    noResults?: string;
+    searching?: string;
+  };
+}
+declare function SearchAutocomplete({
+  value: controlledValue,
+  onValueChange,
+  onSearch,
+  onSelect,
+  suggestions,
+  loading,
+  placeholder,
+  debounceMs,
+  className,
+  labels
+}: SearchAutocompleteProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SearchAutocomplete, SearchAutocompleteProps, SearchSuggestion };
+//# sourceMappingURL=search-autocomplete.d.ts.map

package/dist/client/storefront/components/search-autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-autocomplete.d.ts","names":[],"sources":["../../../../src/client/storefront/components/search-autocomplete.tsx"],"mappings":";;;UAOiB,gBAAA;EACf,EAAA;EACA,KAAA;EACA,IAAA;EACA,QAAA;EACA,IAAA;AAAA;AAAA,UAGe,uBAAA;EACf,KAAA;EACA,aAAA,IAAiB,KAAA;EACjB,QAAA,IAAY,KAAA;EACZ,QAAA,IAAY,UAAA,EAAY,gBAAA;EACxB,WAAA,GAAc,gBAAA;EACd,OAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EACA,MAAA;IACE,KAAA;IACA,SAAA;IACA,SAAA;EAAA;AAAA;AAAA,iBAIY,kBAAA,CAAA;EACd,KAAA,EAAO,eAAA;EACP,aAAA;EACA,QAAA;EACA,QAAA;EACA,WAAA;EACA,OAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EACA;AAAA,GACC,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/search-autocomplete.mjs

@@ -0,0 +1,167 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Input } from "../../ui-resolver/input.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/search-autocomplete.tsx
+function SearchAutocomplete({ value: controlledValue, onValueChange, onSearch, onSelect, suggestions = [], loading = false, placeholder = "Search...", debounceMs = 300, className, labels = {} }) {
+	const { clear: clearLabel = "Clear", noResults = "No results found", searching: searchingLabel = "Searching..." } = labels;
+	const SearchIcon = useIcon("search");
+	const CloseIcon = useIcon("close");
+	const listboxId = React$1.useId();
+	const [internalValue, setInternalValue] = React$1.useState("");
+	const value = controlledValue ?? internalValue;
+	const setValue = onValueChange ?? setInternalValue;
+	const [isOpen, setIsOpen] = React$1.useState(false);
+	const [activeIndex, setActiveIndex] = React$1.useState(-1);
+	const containerRef = React$1.useRef(null);
+	const inputRef = React$1.useRef(null);
+	const debounceRef = React$1.useRef(void 0);
+	const onSearchRef = React$1.useRef(onSearch);
+	onSearchRef.current = onSearch;
+	const showDropdown = isOpen && value.length > 0;
+	React$1.useEffect(() => {
+		if (!value.trim() || !onSearchRef.current) return;
+		clearTimeout(debounceRef.current);
+		debounceRef.current = setTimeout(() => {
+			onSearchRef.current?.(value.trim());
+		}, debounceMs);
+		return () => clearTimeout(debounceRef.current);
+	}, [value, debounceMs]);
+	React$1.useEffect(() => {
+		setActiveIndex(-1);
+	}, [suggestions]);
+	React$1.useEffect(() => {
+		function handleClick(e) {
+			if (containerRef.current && !containerRef.current.contains(e.target)) setIsOpen(false);
+		}
+		document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, []);
+	function handleKeyDown(e) {
+		if (!showDropdown) {
+			if (e.key === "ArrowDown" && value.length > 0) {
+				setIsOpen(true);
+				e.preventDefault();
+			}
+			return;
+		}
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				setActiveIndex((i) => i < suggestions.length - 1 ? i + 1 : 0);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				setActiveIndex((i) => i > 0 ? i - 1 : suggestions.length - 1);
+				break;
+			case "Enter":
+				e.preventDefault();
+				if (activeIndex >= 0 && suggestions[activeIndex]) {
+					onSelect?.(suggestions[activeIndex]);
+					setIsOpen(false);
+				} else if (onSearch) {
+					onSearch(value.trim());
+					setIsOpen(false);
+				}
+				break;
+			case "Escape":
+				setIsOpen(false);
+				inputRef.current?.blur();
+				break;
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: cn("font-enad relative", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-(--enad-text-muted-color)" }),
+				/* @__PURE__ */ jsx(Input, {
+					ref: inputRef,
+					type: "search",
+					value,
+					onChange: (e) => {
+						setValue(e.target.value);
+						setIsOpen(true);
+					},
+					onFocus: () => value.length > 0 && setIsOpen(true),
+					onKeyDown: handleKeyDown,
+					placeholder,
+					className: "pl-9 pr-9",
+					role: "combobox",
+					"aria-expanded": showDropdown,
+					"aria-autocomplete": "list",
+					"aria-controls": listboxId,
+					"aria-activedescendant": activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0
+				}),
+				value.length > 0 && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => {
+						setValue("");
+						setIsOpen(false);
+						inputRef.current?.focus();
+					},
+					className: "absolute right-3 top-1/2 -translate-y-1/2 text-(--enad-text-muted-color) hover:text-(--enad-text-primary-color)",
+					"aria-label": clearLabel,
+					children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+				})
+			]
+		}), showDropdown && /* @__PURE__ */ jsxs("ul", {
+			id: listboxId,
+			role: "listbox",
+			className: cn("absolute z-50 mt-1 w-full overflow-hidden rounded-(--enad-card-radius) border border-(--enad-border-color)", "bg-(--enad-surface) shadow-lg"),
+			children: [
+				loading && /* @__PURE__ */ jsx("li", {
+					className: "px-4 py-3 text-sm text-(--enad-text-muted-color) animate-pulse",
+					children: searchingLabel
+				}),
+				!loading && suggestions.length === 0 && /* @__PURE__ */ jsx("li", {
+					className: "px-4 py-3 text-sm text-(--enad-text-muted-color)",
+					children: noResults
+				}),
+				!loading && suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs("li", {
+					id: `${listboxId}-option-${index}`,
+					role: "option",
+					"aria-selected": index === activeIndex,
+					onMouseEnter: () => setActiveIndex(index),
+					onClick: () => {
+						onSelect?.(suggestion);
+						setIsOpen(false);
+					},
+					className: cn("flex cursor-pointer items-center gap-3 px-4 py-2.5 text-sm transition-colors", index === activeIndex ? "bg-(--enad-hover-bg)" : "hover:bg-(--enad-hover-bg)"),
+					children: [
+						suggestion.imageUrl ? /* @__PURE__ */ jsx("img", {
+							src: suggestion.imageUrl,
+							alt: "",
+							className: "size-8 shrink-0 rounded object-cover"
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "flex size-8 shrink-0 items-center justify-center text-(--enad-text-muted-color)",
+							children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" })
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "truncate text-(--enad-text-primary-color)",
+								children: suggestion.label
+							}), suggestion.meta && /* @__PURE__ */ jsx("p", {
+								className: "truncate text-xs text-(--enad-text-muted-color)",
+								children: suggestion.meta
+							})]
+						}),
+						suggestion.type && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 rounded-full bg-(--enad-hover-bg) px-2 py-0.5 text-[10px] font-medium text-(--enad-text-muted-color) capitalize",
+							children: suggestion.type
+						})
+					]
+				}, suggestion.id))
+			]
+		})]
+	});
+}
+//#endregion
+export { SearchAutocomplete };
+
+//# sourceMappingURL=search-autocomplete.mjs.map

package/dist/client/storefront/components/search-autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-autocomplete.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/search-autocomplete.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Input } from \"../../ui-resolver/input\";\n\nexport interface SearchSuggestion {\n  id: string;\n  label: string;\n  type?: \"product\" | \"category\" | \"recent\" | \"suggestion\";\n  imageUrl?: string;\n  meta?: string;\n}\n\nexport interface SearchAutocompleteProps {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  onSearch?: (query: string) => void;\n  onSelect?: (suggestion: SearchSuggestion) => void;\n  suggestions?: SearchSuggestion[];\n  loading?: boolean;\n  placeholder?: string;\n  debounceMs?: number;\n  className?: string;\n  labels?: {\n    clear?: string;\n    noResults?: string;\n    searching?: string;\n  };\n}\n\nexport function SearchAutocomplete({\n  value: controlledValue,\n  onValueChange,\n  onSearch,\n  onSelect,\n  suggestions = [],\n  loading = false,\n  placeholder = \"Search...\",\n  debounceMs = 300,\n  className,\n  labels = {},\n}: SearchAutocompleteProps) {\n  const {\n    clear: clearLabel = \"Clear\",\n    noResults = \"No results found\",\n    searching: searchingLabel = \"Searching...\",\n  } = labels;\n\n  const SearchIcon = useIcon(\"search\");\n  const CloseIcon = useIcon(\"close\");\n\n  const listboxId = React.useId();\n  const [internalValue, setInternalValue] = React.useState(\"\");\n  const value = controlledValue ?? internalValue;\n  const setValue = onValueChange ?? setInternalValue;\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [activeIndex, setActiveIndex] = React.useState(-1);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const onSearchRef = React.useRef(onSearch);\n  onSearchRef.current = onSearch;\n\n  const showDropdown = isOpen && value.length > 0;\n\n  React.useEffect(() => {\n    if (!value.trim() || !onSearchRef.current) return;\n    clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => {\n      onSearchRef.current?.(value.trim());\n    }, debounceMs);\n    return () => clearTimeout(debounceRef.current);\n  }, [value, debounceMs]);\n\n  React.useEffect(() => {\n    setActiveIndex(-1);\n  }, [suggestions]);\n\n  // Close on outside click\n  React.useEffect(() => {\n    function handleClick(e: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, []);\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (!showDropdown) {\n      if (e.key === \"ArrowDown\" && value.length > 0) {\n        setIsOpen(true);\n        e.preventDefault();\n      }\n      return;\n    }\n\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setActiveIndex((i) => (i < suggestions.length - 1 ? i + 1 : 0));\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setActiveIndex((i) => (i > 0 ? i - 1 : suggestions.length - 1));\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (activeIndex >= 0 && suggestions[activeIndex]) {\n          onSelect?.(suggestions[activeIndex]);\n          setIsOpen(false);\n        } else if (onSearch) {\n          onSearch(value.trim());\n          setIsOpen(false);\n        }\n        break;\n      case \"Escape\":\n        setIsOpen(false);\n        inputRef.current?.blur();\n        break;\n    }\n  }\n\n  return (\n    <div ref={containerRef} className={cn(\"font-enad relative\", className)}>\n      <div className=\"relative\">\n        <SearchIcon className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-(--enad-text-muted-color)\" />\n        <Input\n          ref={inputRef}\n          type=\"search\"\n          value={value}\n          onChange={(e) => {\n            setValue(e.target.value);\n            setIsOpen(true);\n          }}\n          onFocus={() => value.length > 0 && setIsOpen(true)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          className=\"pl-9 pr-9\"\n          role=\"combobox\"\n          aria-expanded={showDropdown}\n          aria-autocomplete=\"list\"\n          aria-controls={listboxId}\n          aria-activedescendant={\n            activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\n          }\n        />\n        {value.length > 0 && (\n          <button\n            type=\"button\"\n            onClick={() => {\n              setValue(\"\");\n              setIsOpen(false);\n              inputRef.current?.focus();\n            }}\n            className=\"absolute right-3 top-1/2 -translate-y-1/2 text-(--enad-text-muted-color) hover:text-(--enad-text-primary-color)\"\n            aria-label={clearLabel}\n          >\n            <CloseIcon className=\"size-4\" />\n          </button>\n        )}\n      </div>\n\n      {showDropdown && (\n        <ul\n          id={listboxId}\n          role=\"listbox\"\n          className={cn(\n            \"absolute z-50 mt-1 w-full overflow-hidden rounded-(--enad-card-radius) border border-(--enad-border-color)\",\n            \"bg-(--enad-surface) shadow-lg\",\n          )}\n        >\n          {loading && (\n            <li className=\"px-4 py-3 text-sm text-(--enad-text-muted-color) animate-pulse\">\n              {searchingLabel}\n            </li>\n          )}\n\n          {!loading && suggestions.length === 0 && (\n            <li className=\"px-4 py-3 text-sm text-(--enad-text-muted-color)\">{noResults}</li>\n          )}\n\n          {!loading &&\n            suggestions.map((suggestion, index) => (\n              <li\n                key={suggestion.id}\n                id={`${listboxId}-option-${index}`}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                onMouseEnter={() => setActiveIndex(index)}\n                onClick={() => {\n                  onSelect?.(suggestion);\n                  setIsOpen(false);\n                }}\n                className={cn(\n                  \"flex cursor-pointer items-center gap-3 px-4 py-2.5 text-sm transition-colors\",\n                  index === activeIndex ? \"bg-(--enad-hover-bg)\" : \"hover:bg-(--enad-hover-bg)\",\n                )}\n              >\n                {suggestion.imageUrl ? (\n                  <img\n                    src={suggestion.imageUrl}\n                    alt=\"\"\n                    className=\"size-8 shrink-0 rounded object-cover\"\n                  />\n                ) : (\n                  <span className=\"flex size-8 shrink-0 items-center justify-center text-(--enad-text-muted-color)\">\n                    <SearchIcon className=\"size-4\" />\n                  </span>\n                )}\n\n                <div className=\"flex-1 min-w-0\">\n                  <p className=\"truncate text-(--enad-text-primary-color)\">{suggestion.label}</p>\n                  {suggestion.meta && (\n                    <p className=\"truncate text-xs text-(--enad-text-muted-color)\">\n                      {suggestion.meta}\n                    </p>\n                  )}\n                </div>\n\n                {suggestion.type && (\n                  <span className=\"shrink-0 rounded-full bg-(--enad-hover-bg) px-2 py-0.5 text-[10px] font-medium text-(--enad-text-muted-color) capitalize\">\n                    {suggestion.type}\n                  </span>\n                )}\n              </li>\n            ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAgCA,SAAgB,mBAAmB,EACjC,OAAO,iBACP,eACA,UACA,UACA,cAAc,EAAE,EAChB,UAAU,OACV,cAAc,aACd,aAAa,KACb,WACA,SAAS,EAAE,IACe;CAC1B,MAAM,EACJ,OAAO,aAAa,SACpB,YAAY,oBACZ,WAAW,iBAAiB,mBAC1B;CAEJ,MAAM,aAAa,QAAQ,SAAS;CACpC,MAAM,YAAY,QAAQ,QAAQ;CAElC,MAAM,YAAYA,QAAM,OAAO;CAC/B,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAAS,GAAG;CAC5D,MAAM,QAAQ,mBAAmB;CACjC,MAAM,WAAW,iBAAiB;CAElC,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAAS,MAAM;CACjD,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAS,GAAG;CACxD,MAAM,eAAeA,QAAM,OAAuB,KAAK;CACvD,MAAM,WAAWA,QAAM,OAAyB,KAAK;CACrD,MAAM,cAAcA,QAAM,OAAkD,KAAA,EAAU;CACtF,MAAM,cAAcA,QAAM,OAAO,SAAS;AAC1C,aAAY,UAAU;CAEtB,MAAM,eAAe,UAAU,MAAM,SAAS;AAE9C,SAAM,gBAAgB;AACpB,MAAI,CAAC,MAAM,MAAM,IAAI,CAAC,YAAY,QAAS;AAC3C,eAAa,YAAY,QAAQ;AACjC,cAAY,UAAU,iBAAiB;AACrC,eAAY,UAAU,MAAM,MAAM,CAAC;KAClC,WAAW;AACd,eAAa,aAAa,YAAY,QAAQ;IAC7C,CAAC,OAAO,WAAW,CAAC;AAEvB,SAAM,gBAAgB;AACpB,iBAAe,GAAG;IACjB,CAAC,YAAY,CAAC;AAGjB,SAAM,gBAAgB;EACpB,SAAS,YAAY,GAAe;AAClC,OAAI,aAAa,WAAW,CAAC,aAAa,QAAQ,SAAS,EAAE,OAAe,CAC1E,WAAU,MAAM;;AAGpB,WAAS,iBAAiB,aAAa,YAAY;AACnD,eAAa,SAAS,oBAAoB,aAAa,YAAY;IAClE,EAAE,CAAC;CAEN,SAAS,cAAc,GAAwB;AAC7C,MAAI,CAAC,cAAc;AACjB,OAAI,EAAE,QAAQ,eAAe,MAAM,SAAS,GAAG;AAC7C,cAAU,KAAK;AACf,MAAE,gBAAgB;;AAEpB;;AAGF,UAAQ,EAAE,KAAV;GACE,KAAK;AACH,MAAE,gBAAgB;AAClB,oBAAgB,MAAO,IAAI,YAAY,SAAS,IAAI,IAAI,IAAI,EAAG;AAC/D;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,oBAAgB,MAAO,IAAI,IAAI,IAAI,IAAI,YAAY,SAAS,EAAG;AAC/D;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,QAAI,eAAe,KAAK,YAAY,cAAc;AAChD,gBAAW,YAAY,aAAa;AACpC,eAAU,MAAM;eACP,UAAU;AACnB,cAAS,MAAM,MAAM,CAAC;AACtB,eAAU,MAAM;;AAElB;GACF,KAAK;AACH,cAAU,MAAM;AAChB,aAAS,SAAS,MAAM;AACxB;;;AAIN,QACE,qBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,GAAG,sBAAsB,UAAU;YAAtE,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,YAAD,EAAY,WAAU,sGAAuG,CAAA;IAC7H,oBAAC,OAAD;KACE,KAAK;KACL,MAAK;KACE;KACP,WAAW,MAAM;AACf,eAAS,EAAE,OAAO,MAAM;AACxB,gBAAU,KAAK;;KAEjB,eAAe,MAAM,SAAS,KAAK,UAAU,KAAK;KAClD,WAAW;KACE;KACb,WAAU;KACV,MAAK;KACL,iBAAe;KACf,qBAAkB;KAClB,iBAAe;KACf,yBACE,eAAe,IAAI,GAAG,UAAU,UAAU,gBAAgB,KAAA;KAE5D,CAAA;IACD,MAAM,SAAS,KACd,oBAAC,UAAD;KACE,MAAK;KACL,eAAe;AACb,eAAS,GAAG;AACZ,gBAAU,MAAM;AAChB,eAAS,SAAS,OAAO;;KAE3B,WAAU;KACV,cAAY;eAEZ,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;KACzB,CAAA;IAEP;MAEL,gBACC,qBAAC,MAAD;GACE,IAAI;GACJ,MAAK;GACL,WAAW,GACT,8GACA,gCACD;aANH;IAQG,WACC,oBAAC,MAAD;KAAI,WAAU;eACX;KACE,CAAA;IAGN,CAAC,WAAW,YAAY,WAAW,KAClC,oBAAC,MAAD;KAAI,WAAU;eAAoD;KAAe,CAAA;IAGlF,CAAC,WACA,YAAY,KAAK,YAAY,UAC3B,qBAAC,MAAD;KAEE,IAAI,GAAG,UAAU,UAAU;KAC3B,MAAK;KACL,iBAAe,UAAU;KACzB,oBAAoB,eAAe,MAAM;KACzC,eAAe;AACb,iBAAW,WAAW;AACtB,gBAAU,MAAM;;KAElB,WAAW,GACT,gFACA,UAAU,cAAc,yBAAyB,6BAClD;eAbH;MAeG,WAAW,WACV,oBAAC,OAAD;OACE,KAAK,WAAW;OAChB,KAAI;OACJ,WAAU;OACV,CAAA,GAEF,oBAAC,QAAD;OAAM,WAAU;iBACd,oBAAC,YAAD,EAAY,WAAU,UAAW,CAAA;OAC5B,CAAA;MAGT,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,KAAD;QAAG,WAAU;kBAA6C,WAAW;QAAU,CAAA,EAC9E,WAAW,QACV,oBAAC,KAAD;QAAG,WAAU;kBACV,WAAW;QACV,CAAA,CAEF;;MAEL,WAAW,QACV,oBAAC,QAAD;OAAM,WAAU;iBACb,WAAW;OACP,CAAA;MAEN;OAxCE,WAAW,GAwCb,CACL;IACD;KAEH"}

package/dist/client/storefront/components/section-nav.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/section-nav.d.ts
+interface SectionLink {
+  label: string;
+  /** Anchor href, e.g. "#specs" */
+  href: string;
+  /** Optional group name for the overflow popover */
+  group?: string;
+}
+interface SectionNavProps {
+  links: SectionLink[];
+  /** How many pills to show inline before overflow (default: 4) */
+  visibleCount?: number;
+  /** Top offset in px for sticky positioning, e.g. header height (default: 0) */
+  stickyOffset?: number;
+  /** Label for the overflow trigger (default: "More") */
+  moreLabel?: string;
+  className?: string;
+}
+declare function SectionNav({
+  links,
+  visibleCount,
+  stickyOffset,
+  moreLabel,
+  className
+}: SectionNavProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type SectionLink, SectionNav, type SectionNavProps };
+//# sourceMappingURL=section-nav.d.ts.map

package/dist/client/storefront/components/section-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-nav.d.ts","names":[],"sources":["../../../../src/client/storefront/components/section-nav.tsx"],"mappings":";;;UASU,WAAA;EACR,KAAA;;EAEA,IAAA;EAHmB;EAKnB,KAAA;AAAA;AAAA,UAGQ,eAAA;EACR,KAAA,EAAO,WAAA;EAJP;EAMA,YAAA;EANK;EAQL,YAAA;EALuB;EAOvB,SAAA;EACA,SAAA;AAAA;AAAA,iBAGO,UAAA,CAAA;EACP,KAAA;EACA,YAAA;EACA,YAAA;EACA,SAAA;EACA;AAAA,GACC,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}