@enadhq/enad-react-sdk 1.0.0 → 1.1.0

package/dist/client/storefront/components/infinite-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-scroll.d.ts","names":[],"sources":["../../../../src/client/storefront/components/infinite-scroll.tsx"],"mappings":";;;;UAOiB,wBAAA;;EAEf,UAAA;EAFe;EAIf,OAAA;;EAEA,OAAA;EAJA;EAMA,SAAA;EAFA;EAIA,IAAA,GAAO,OAAA,CAAM,SAAA,CAAU,OAAA;AAAA;AAAA,UAGR,uBAAA;EACf,WAAA,EAAa,OAAA,CAAM,WAAA,CAAY,WAAA;EAC/B,OAAA;EACA,OAAA;AAAA;AAAA,iBAGc,iBAAA,CAAA;EACd,UAAA;EACA,OAAA;EACA,OAAA;EACA,SAAA;EACA;AAAA,GACC,wBAAA,GAA2B,uBAAA;AAAA,UA2Cb,mBAAA;EACf,UAAA;EACA,OAAA;EACA,OAAA;EAzDa;EA2Db,SAAA;EA3D+B;EA6D/B,kBAAA;EACA,aAAA;EA5DO;EA8DP,gBAAA,GAAmB,OAAA,CAAM,SAAA;EA3DX;EA6Dd,YAAA,GAAe,OAAA,CAAM,SAAA;EACrB,QAAA,EAAU,OAAA,CAAM,SAAA;EAChB,SAAA;AAAA;AAAA,iBAGc,cAAA,CAAA;EACd,UAAA;EACA,OAAA;EACA,OAAA;EACA,SAAA;EACA,kBAAA;EACA,aAAA;EACA,gBAAA;EACA,YAAA;EACA,QAAA;EACA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/infinite-scroll.mjs

@@ -0,0 +1,81 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/infinite-scroll.tsx
+function useInfiniteScroll({ onLoadMore, hasMore, loading = false, threshold = "200px", root }) {
+	const observerRef = React$1.useRef(null);
+	const callbackRef = React$1.useRef(onLoadMore);
+	callbackRef.current = onLoadMore;
+	const sentinelRef = React$1.useCallback((node) => {
+		if (observerRef.current) {
+			observerRef.current.disconnect();
+			observerRef.current = null;
+		}
+		if (!node || !hasMore || loading) return;
+		observerRef.current = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) callbackRef.current();
+		}, {
+			rootMargin: threshold,
+			root: root?.current ?? null
+		});
+		observerRef.current.observe(node);
+	}, [
+		hasMore,
+		loading,
+		threshold,
+		root
+	]);
+	React$1.useEffect(() => {
+		return () => {
+			observerRef.current?.disconnect();
+		};
+	}, []);
+	return {
+		sentinelRef,
+		loading,
+		hasMore
+	};
+}
+function InfiniteScroll({ onLoadMore, hasMore, loading = false, threshold = "200px", showLoadMoreButton = false, loadMoreLabel = "Load more", loadingIndicator, endIndicator, children, className }) {
+	const { sentinelRef } = useInfiniteScroll({
+		onLoadMore,
+		hasMore,
+		loading,
+		threshold
+	});
+	const defaultLoadingIndicator = /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center py-8",
+		children: /* @__PURE__ */ jsx("div", { className: "size-6 animate-spin rounded-full border-2 border-muted-foreground/30 border-t-foreground" })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", className),
+		children: [
+			children,
+			hasMore && !showLoadMoreButton && /* @__PURE__ */ jsx("div", {
+				ref: sentinelRef,
+				className: "h-px w-full",
+				"aria-hidden": "true"
+			}),
+			hasMore && showLoadMoreButton && !loading && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-center py-6",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onLoadMore,
+					className: "rounded-md border border-border px-6 py-2 text-sm font-medium hover:bg-muted transition-colors",
+					children: loadMoreLabel
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "status",
+				"aria-live": "polite",
+				children: loading && (loadingIndicator ?? defaultLoadingIndicator)
+			}),
+			!hasMore && !loading && endIndicator
+		]
+	});
+}
+//#endregion
+export { InfiniteScroll, useInfiniteScroll };
+
+//# sourceMappingURL=infinite-scroll.mjs.map

package/dist/client/storefront/components/infinite-scroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-scroll.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/infinite-scroll.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\n\n/* ─── Hook ─── */\n\nexport interface UseInfiniteScrollOptions {\n  /** Called when sentinel enters viewport */\n  onLoadMore: () => void;\n  /** Whether more items can be loaded */\n  hasMore: boolean;\n  /** Whether currently loading */\n  loading?: boolean;\n  /** IntersectionObserver rootMargin — controls how early to trigger */\n  threshold?: string;\n  /** Root element for intersection (defaults to viewport) */\n  root?: React.RefObject<Element | null>;\n}\n\nexport interface UseInfiniteScrollReturn {\n  sentinelRef: React.RefCallback<HTMLElement>;\n  loading: boolean;\n  hasMore: boolean;\n}\n\nexport function useInfiniteScroll({\n  onLoadMore,\n  hasMore,\n  loading = false,\n  threshold = \"200px\",\n  root,\n}: UseInfiniteScrollOptions): UseInfiniteScrollReturn {\n  const observerRef = React.useRef<IntersectionObserver | null>(null);\n  const callbackRef = React.useRef(onLoadMore);\n  callbackRef.current = onLoadMore;\n\n  const sentinelRef = React.useCallback(\n    (node: HTMLElement | null) => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n\n      if (!node || !hasMore || loading) return;\n\n      observerRef.current = new IntersectionObserver(\n        (entries) => {\n          if (entries[0]?.isIntersecting) {\n            callbackRef.current();\n          }\n        },\n        {\n          rootMargin: threshold,\n          root: root?.current ?? null,\n        },\n      );\n\n      observerRef.current.observe(node);\n    },\n    [hasMore, loading, threshold, root],\n  );\n\n  // Cleanup on unmount\n  React.useEffect(() => {\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, []);\n\n  return { sentinelRef, loading, hasMore };\n}\n\n/* ─── Component ─── */\n\nexport interface InfiniteScrollProps {\n  onLoadMore: () => void;\n  hasMore: boolean;\n  loading?: boolean;\n  /** IntersectionObserver rootMargin */\n  threshold?: string;\n  /** Fallback \"Load more\" button for accessibility */\n  showLoadMoreButton?: boolean;\n  loadMoreLabel?: string;\n  /** Loading indicator slot */\n  loadingIndicator?: React.ReactNode;\n  /** End-of-list indicator slot */\n  endIndicator?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function InfiniteScroll({\n  onLoadMore,\n  hasMore,\n  loading = false,\n  threshold = \"200px\",\n  showLoadMoreButton = false,\n  loadMoreLabel = \"Load more\",\n  loadingIndicator,\n  endIndicator,\n  children,\n  className,\n}: InfiniteScrollProps) {\n  const { sentinelRef } = useInfiniteScroll({\n    onLoadMore,\n    hasMore,\n    loading,\n    threshold,\n  });\n\n  const defaultLoadingIndicator = (\n    <div className=\"flex justify-center py-8\">\n      <div className=\"size-6 animate-spin rounded-full border-2 border-muted-foreground/30 border-t-foreground\" />\n    </div>\n  );\n\n  return (\n    <div className={cn(\"flex flex-col\", className)}>\n      {children}\n\n      {/* Sentinel for IntersectionObserver */}\n      {hasMore && !showLoadMoreButton && (\n        <div ref={sentinelRef} className=\"h-px w-full\" aria-hidden=\"true\" />\n      )}\n\n      {/* Manual load-more button fallback */}\n      {hasMore && showLoadMoreButton && !loading && (\n        <div className=\"flex justify-center py-6\">\n          <button\n            type=\"button\"\n            onClick={onLoadMore}\n            className=\"rounded-md border border-border px-6 py-2 text-sm font-medium hover:bg-muted transition-colors\"\n          >\n            {loadMoreLabel}\n          </button>\n        </div>\n      )}\n\n      {/* Loading state */}\n      <div role=\"status\" aria-live=\"polite\">\n        {loading && (loadingIndicator ?? defaultLoadingIndicator)}\n      </div>\n\n      {/* End of list */}\n      {!hasMore && !loading && endIndicator}\n    </div>\n  );\n}\n"],"mappings":";;;;;AA0BA,SAAgB,kBAAkB,EAChC,YACA,SACA,UAAU,OACV,YAAY,SACZ,QACoD;CACpD,MAAM,cAAcA,QAAM,OAAoC,KAAK;CACnE,MAAM,cAAcA,QAAM,OAAO,WAAW;AAC5C,aAAY,UAAU;CAEtB,MAAM,cAAcA,QAAM,aACvB,SAA6B;AAC5B,MAAI,YAAY,SAAS;AACvB,eAAY,QAAQ,YAAY;AAChC,eAAY,UAAU;;AAGxB,MAAI,CAAC,QAAQ,CAAC,WAAW,QAAS;AAElC,cAAY,UAAU,IAAI,sBACvB,YAAY;AACX,OAAI,QAAQ,IAAI,eACd,aAAY,SAAS;KAGzB;GACE,YAAY;GACZ,MAAM,MAAM,WAAW;GACxB,CACF;AAED,cAAY,QAAQ,QAAQ,KAAK;IAEnC;EAAC;EAAS;EAAS;EAAW;EAAK,CACpC;AAGD,SAAM,gBAAgB;AACpB,eAAa;AACX,eAAY,SAAS,YAAY;;IAElC,EAAE,CAAC;AAEN,QAAO;EAAE;EAAa;EAAS;EAAS;;AAsB1C,SAAgB,eAAe,EAC7B,YACA,SACA,UAAU,OACV,YAAY,SACZ,qBAAqB,OACrB,gBAAgB,aAChB,kBACA,cACA,UACA,aACsB;CACtB,MAAM,EAAE,gBAAgB,kBAAkB;EACxC;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,0BACJ,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD,EAAK,WAAU,4FAA6F,CAAA;EACxG,CAAA;AAGR,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,iBAAiB,UAAU;YAA9C;GACG;GAGA,WAAW,CAAC,sBACX,oBAAC,OAAD;IAAK,KAAK;IAAa,WAAU;IAAc,eAAY;IAAS,CAAA;GAIrE,WAAW,sBAAsB,CAAC,WACjC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eAET;KACM,CAAA;IACL,CAAA;GAIR,oBAAC,OAAD;IAAK,MAAK;IAAS,aAAU;cAC1B,YAAY,oBAAoB;IAC7B,CAAA;GAGL,CAAC,WAAW,CAAC,WAAW;GACrB"}

package/dist/client/storefront/components/language-selector.d.ts

@@ -0,0 +1,16 @@
+import { LanguageOption, LanguageSelectorProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/language-selector.d.ts
+declare function LanguageSelector({
+  languages,
+  value,
+  onValueChange,
+  variant,
+  size,
+  className,
+  labels
+}: LanguageSelectorProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type LanguageOption, LanguageSelector, type LanguageSelectorProps };
+//# sourceMappingURL=language-selector.d.ts.map

package/dist/client/storefront/components/language-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-selector.d.ts","names":[],"sources":["../../../../src/client/storefront/components/language-selector.tsx"],"mappings":";;;;iBAmCS,gBAAA,CAAA;EACP,SAAA;EACA,KAAA;EACA,aAAA;EACA,OAAA;EACA,IAAA;EACA,SAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/language-selector.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/language-selector.tsx
+function LanguageItemContent({ language, variant }) {
+	if (variant === "code") return /* @__PURE__ */ jsx("span", { children: language.code.toUpperCase() });
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-2",
+		children: [variant === "icon" && language.icon && /* @__PURE__ */ jsx("span", {
+			className: "inline-flex shrink-0",
+			children: language.icon
+		}), language.label]
+	});
+}
+function LanguageSelector({ languages, value, onValueChange, variant = "full", size = "default", className, labels }) {
+	const GlobeIcon = useIcon("globe");
+	const selected = languages.find((l) => l.code === value);
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		onValueChange,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size,
+			className: cn(variant === "code" && "border-none shadow-none bg-transparent px-1.5 gap-1", className),
+			"aria-label": labels?.changeLanguage ?? "Change language",
+			children: /* @__PURE__ */ jsx(SelectValue, { children: selected && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [
+					variant === "icon" && selected.icon && /* @__PURE__ */ jsx("span", {
+						className: "inline-flex shrink-0",
+						children: selected.icon
+					}),
+					variant === "code" && /* @__PURE__ */ jsx(GlobeIcon, { className: "size-4" }),
+					variant === "code" ? selected.code.toUpperCase() : selected.label
+				]
+			}) })
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			position: "popper",
+			align: "end",
+			children: languages.map((lang) => /* @__PURE__ */ jsx(SelectItem, {
+				value: lang.code,
+				children: /* @__PURE__ */ jsx(LanguageItemContent, {
+					language: lang,
+					variant
+				})
+			}, lang.code))
+		})]
+	});
+}
+//#endregion
+export { LanguageSelector };
+
+//# sourceMappingURL=language-selector.mjs.map

package/dist/client/storefront/components/language-selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-selector.mjs","names":[],"sources":["../../../../src/client/storefront/components/language-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../../ui/select\"\nimport { cn } from \"../../ui/utils\"\nimport type { LanguageSelectorProps, LanguageOption } from \"../types\"\n\nfunction LanguageItemContent({\n  language,\n  variant,\n}: {\n  language: LanguageOption\n  variant: \"code\" | \"full\" | \"icon\"\n}) {\n  if (variant === \"code\") {\n    return <span>{language.code.toUpperCase()}</span>\n  }\n\n  return (\n    <span className=\"flex items-center gap-2\">\n      {variant === \"icon\" && language.icon && (\n        <span className=\"inline-flex shrink-0\">{language.icon}</span>\n      )}\n      {language.label}\n    </span>\n  )\n}\n\nfunction LanguageSelector({\n  languages,\n  value,\n  onValueChange,\n  variant = \"full\",\n  size = \"default\",\n  className,\n  labels,\n}: LanguageSelectorProps) {\n  const GlobeIcon = useIcon(\"globe\")\n\n  const selected = languages.find((l) => l.code === value)\n\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger\n        size={size}\n        className={cn(\n          variant === \"code\" && \"border-none shadow-none bg-transparent px-1.5 gap-1\",\n          className,\n        )}\n        aria-label={labels?.changeLanguage ?? \"Change language\"}\n      >\n        <SelectValue>\n          {selected && (\n            <span className=\"flex items-center gap-2\">\n              {variant === \"icon\" && selected.icon && (\n                <span className=\"inline-flex shrink-0\">{selected.icon}</span>\n              )}\n              {variant === \"code\" && (\n                <GlobeIcon className=\"size-4\" />\n              )}\n              {variant === \"code\" ? selected.code.toUpperCase() : selected.label}\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectContent position=\"popper\" align=\"end\">\n        {languages.map((lang) => (\n          <SelectItem key={lang.code} value={lang.code}>\n            <LanguageItemContent language={lang} variant={variant} />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\nexport { LanguageSelector }\nexport type { LanguageSelectorProps, LanguageOption }\n"],"mappings":";;;;;;;AAcA,SAAS,oBAAoB,EAC3B,UACA,WAIC;AACD,KAAI,YAAY,OACd,QAAO,oBAAC,QAAD,EAAA,UAAO,SAAS,KAAK,aAAa,EAAQ,CAAA;AAGnD,QACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACG,YAAY,UAAU,SAAS,QAC9B,oBAAC,QAAD;GAAM,WAAU;aAAwB,SAAS;GAAY,CAAA,EAE9D,SAAS,MACL;;;AAIX,SAAS,iBAAiB,EACxB,WACA,OACA,eACA,UAAU,QACV,OAAO,WACP,WACA,UACwB;CACxB,MAAM,YAAY,QAAQ,QAAQ;CAElC,MAAM,WAAW,UAAU,MAAM,MAAM,EAAE,SAAS,MAAM;AAExD,QACE,qBAAC,QAAD;EAAe;EAAsB;YAArC,CACE,oBAAC,eAAD;GACQ;GACN,WAAW,GACT,YAAY,UAAU,uDACtB,UACD;GACD,cAAY,QAAQ,kBAAkB;aAEtC,oBAAC,aAAD,EAAA,UACG,YACC,qBAAC,QAAD;IAAM,WAAU;cAAhB;KACG,YAAY,UAAU,SAAS,QAC9B,oBAAC,QAAD;MAAM,WAAU;gBAAwB,SAAS;MAAY,CAAA;KAE9D,YAAY,UACX,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;KAEjC,YAAY,SAAS,SAAS,KAAK,aAAa,GAAG,SAAS;KACxD;OAEG,CAAA;GACA,CAAA,EAChB,oBAAC,eAAD;GAAe,UAAS;GAAS,OAAM;aACpC,UAAU,KAAK,SACd,oBAAC,YAAD;IAA4B,OAAO,KAAK;cACtC,oBAAC,qBAAD;KAAqB,UAAU;KAAe;KAAW,CAAA;IAC9C,EAFI,KAAK,KAET,CACb;GACY,CAAA,CACT"}

package/dist/client/storefront/components/newsletter-signup.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/newsletter-signup.d.ts
+interface NewsletterSignupProps {
+  onSubmit: (email: string) => void | Promise<void>;
+  placeholder?: string;
+  buttonLabel?: string;
+  successMessage?: string;
+  errorMessage?: string;
+  labels?: {
+    heading?: string;
+    description?: string;
+  };
+  className?: string;
+}
+declare function NewsletterSignup({
+  onSubmit,
+  placeholder,
+  buttonLabel,
+  successMessage,
+  errorMessage,
+  labels,
+  className
+}: NewsletterSignupProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NewsletterSignup, NewsletterSignupProps };
+//# sourceMappingURL=newsletter-signup.d.ts.map

package/dist/client/storefront/components/newsletter-signup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"newsletter-signup.d.ts","names":[],"sources":["../../../../src/client/storefront/components/newsletter-signup.tsx"],"mappings":";;;UAQiB,qBAAA;EACf,QAAA,GAAW,KAAA,oBAAyB,OAAA;EACpC,WAAA;EACA,WAAA;EACA,cAAA;EACA,YAAA;EACA,MAAA;IACE,OAAA;IACA,WAAA;EAAA;EAEF,SAAA;AAAA;AAAA,iBAGc,gBAAA,CAAA;EACd,QAAA;EACA,WAAA;EACA,WAAA;EACA,cAAA;EACA,YAAA;EACA,MAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/newsletter-signup.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Input } from "../../ui/input.mjs";
+import { StorefrontButton } from "../primitives/button.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/newsletter-signup.tsx
+function NewsletterSignup({ onSubmit, placeholder = "Enter your email", buttonLabel = "Subscribe", successMessage = "Thanks for subscribing!", errorMessage, labels = {}, className }) {
+	const MailIcon = useIcon("mail");
+	const [email, setEmail] = React$1.useState("");
+	const [status, setStatus] = React$1.useState("idle");
+	const [error, setError] = React$1.useState(errorMessage);
+	React$1.useEffect(() => {
+		setError(errorMessage);
+		if (errorMessage) setStatus("error");
+	}, [errorMessage]);
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		if (!email.trim() || status === "loading") return;
+		setStatus("loading");
+		setError(void 0);
+		try {
+			await onSubmit(email.trim());
+			setStatus("success");
+			setEmail("");
+		} catch (err) {
+			setStatus("error");
+			setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
+		}
+	};
+	if (status === "success") return /* @__PURE__ */ jsxs("div", {
+		className: cn("font-enad", className),
+		children: [labels.heading && /* @__PURE__ */ jsx("p", {
+			className: "text-sm font-heading font-medium text-(--enad-text-primary-color) mb-1",
+			children: labels.heading
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-(--enad-text-muted-color)",
+			children: successMessage
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("font-enad", className),
+		children: [
+			labels.heading && /* @__PURE__ */ jsx("p", {
+				className: "text-sm font-heading font-medium text-(--enad-text-primary-color) mb-1",
+				children: labels.heading
+			}),
+			labels.description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-(--enad-text-muted-color) mb-3",
+				children: labels.description
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				onSubmit: handleSubmit,
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative flex-1",
+					children: [/* @__PURE__ */ jsx(MailIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-(--enad-text-muted-color) z-10" }), /* @__PURE__ */ jsx(Input, {
+						type: "email",
+						required: true,
+						value: email,
+						onChange: (e) => setEmail(e.target.value),
+						placeholder,
+						"aria-label": placeholder,
+						"aria-describedby": error ? "newsletter-error" : void 0,
+						disabled: status === "loading",
+						className: "w-full pl-9"
+					})]
+				}), /* @__PURE__ */ jsx(StorefrontButton, {
+					type: "submit",
+					disabled: status === "loading",
+					children: status === "loading" ? "..." : buttonLabel
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: "newsletter-error",
+				className: "mt-1.5 text-xs text-(--enad-error-color)",
+				role: "alert",
+				children: error
+			})
+		]
+	});
+}
+//#endregion
+export { NewsletterSignup };
+
+//# sourceMappingURL=newsletter-signup.mjs.map

package/dist/client/storefront/components/newsletter-signup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"newsletter-signup.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/newsletter-signup.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/input\"\nimport { StorefrontButton } from \"../primitives/button\"\n\nexport interface NewsletterSignupProps {\n  onSubmit: (email: string) => void | Promise<void>\n  placeholder?: string\n  buttonLabel?: string\n  successMessage?: string\n  errorMessage?: string\n  labels?: {\n    heading?: string\n    description?: string\n  }\n  className?: string\n}\n\nexport function NewsletterSignup({\n  onSubmit,\n  placeholder = \"Enter your email\",\n  buttonLabel = \"Subscribe\",\n  successMessage = \"Thanks for subscribing!\",\n  errorMessage,\n  labels = {},\n  className,\n}: NewsletterSignupProps) {\n  const MailIcon = useIcon(\"mail\")\n  const [email, setEmail] = React.useState(\"\")\n  const [status, setStatus] = React.useState<\"idle\" | \"loading\" | \"success\" | \"error\">(\"idle\")\n  const [error, setError] = React.useState<string | undefined>(errorMessage)\n\n  React.useEffect(() => {\n    setError(errorMessage)\n    if (errorMessage) setStatus(\"error\")\n  }, [errorMessage])\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault()\n    if (!email.trim() || status === \"loading\") return\n\n    setStatus(\"loading\")\n    setError(undefined)\n\n    try {\n      await onSubmit(email.trim())\n      setStatus(\"success\")\n      setEmail(\"\")\n    } catch (err) {\n      setStatus(\"error\")\n      setError(err instanceof Error ? err.message : \"Something went wrong. Please try again.\")\n    }\n  }\n\n  if (status === \"success\") {\n    return (\n      <div className={cn(\"font-enad\", className)}>\n        {labels.heading && (\n          <p className=\"text-sm font-heading font-medium text-(--enad-text-primary-color) mb-1\">{labels.heading}</p>\n        )}\n        <p className=\"text-sm text-(--enad-text-muted-color)\">{successMessage}</p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\"font-enad\", className)}>\n      {labels.heading && (\n        <p className=\"text-sm font-heading font-medium text-(--enad-text-primary-color) mb-1\">{labels.heading}</p>\n      )}\n      {labels.description && (\n        <p className=\"text-sm text-(--enad-text-muted-color) mb-3\">{labels.description}</p>\n      )}\n      <form onSubmit={handleSubmit} className=\"flex gap-2\">\n        <div className=\"relative flex-1\">\n          <MailIcon className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-(--enad-text-muted-color) z-10\" />\n          <Input\n            type=\"email\"\n            required\n            value={email}\n            onChange={(e) => setEmail(e.target.value)}\n            placeholder={placeholder}\n            aria-label={placeholder}\n            aria-describedby={error ? \"newsletter-error\" : undefined}\n            disabled={status === \"loading\"}\n            className=\"w-full pl-9\"\n          />\n        </div>\n        <StorefrontButton\n          type=\"submit\"\n          disabled={status === \"loading\"}\n        >\n          {status === \"loading\" ? \"...\" : buttonLabel}\n        </StorefrontButton>\n      </form>\n      {error && (\n        <p id=\"newsletter-error\" className=\"mt-1.5 text-xs text-(--enad-error-color)\" role=\"alert\">\n          {error}\n        </p>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAqBA,SAAgB,iBAAiB,EAC/B,UACA,cAAc,oBACd,cAAc,aACd,iBAAiB,2BACjB,cACA,SAAS,EAAE,EACX,aACwB;CACxB,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,GAAG;CAC5C,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAAmD,OAAO;CAC5F,MAAM,CAAC,OAAO,YAAYA,QAAM,SAA6B,aAAa;AAE1E,SAAM,gBAAgB;AACpB,WAAS,aAAa;AACtB,MAAI,aAAc,WAAU,QAAQ;IACnC,CAAC,aAAa,CAAC;CAElB,MAAM,eAAe,OAAO,MAAuB;AACjD,IAAE,gBAAgB;AAClB,MAAI,CAAC,MAAM,MAAM,IAAI,WAAW,UAAW;AAE3C,YAAU,UAAU;AACpB,WAAS,KAAA,EAAU;AAEnB,MAAI;AACF,SAAM,SAAS,MAAM,MAAM,CAAC;AAC5B,aAAU,UAAU;AACpB,YAAS,GAAG;WACL,KAAK;AACZ,aAAU,QAAQ;AAClB,YAAS,eAAe,QAAQ,IAAI,UAAU,0CAA0C;;;AAI5F,KAAI,WAAW,UACb,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YAA1C,CACG,OAAO,WACN,oBAAC,KAAD;GAAG,WAAU;aAA0E,OAAO;GAAY,CAAA,EAE5G,oBAAC,KAAD;GAAG,WAAU;aAA0C;GAAmB,CAAA,CACtE;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YAA1C;GACG,OAAO,WACN,oBAAC,KAAD;IAAG,WAAU;cAA0E,OAAO;IAAY,CAAA;GAE3G,OAAO,eACN,oBAAC,KAAD;IAAG,WAAU;cAA+C,OAAO;IAAgB,CAAA;GAErF,qBAAC,QAAD;IAAM,UAAU;IAAc,WAAU;cAAxC,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,UAAD,EAAU,WAAU,uFAAwF,CAAA,EAC5G,oBAAC,OAAD;MACE,MAAK;MACL,UAAA;MACA,OAAO;MACP,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;MAC5B;MACb,cAAY;MACZ,oBAAkB,QAAQ,qBAAqB,KAAA;MAC/C,UAAU,WAAW;MACrB,WAAU;MACV,CAAA,CACE;QACN,oBAAC,kBAAD;KACE,MAAK;KACL,UAAU,WAAW;eAEpB,WAAW,YAAY,QAAQ;KACf,CAAA,CACd;;GACN,SACC,oBAAC,KAAD;IAAG,IAAG;IAAmB,WAAU;IAA2C,MAAK;cAChF;IACC,CAAA;GAEF"}

package/dist/client/storefront/components/price.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/price.d.ts
+interface PriceProps {
+  amount: number;
+  currency?: string;
+  original?: number;
+  discountPercent?: number;
+  locale?: string;
+  className?: string;
+  /** Show the -X% discount badge. Default: true */
+  showDiscountBadge?: boolean;
+  /** Apply colored background to the sale price. Default: true */
+  colorSalePrice?: boolean;
+}
+declare function Price({
+  amount,
+  currency,
+  original,
+  discountPercent,
+  locale: localeProp,
+  className,
+  showDiscountBadge,
+  colorSalePrice
+}: PriceProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Price, PriceProps };
+//# sourceMappingURL=price.d.ts.map

package/dist/client/storefront/components/price.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price.d.ts","names":[],"sources":["../../../../src/client/storefront/components/price.tsx"],"mappings":";;;UAEiB,UAAA;EACf,MAAA;EACA,QAAA;EACA,QAAA;EACA,eAAA;EACA,MAAA;EACA,SAAA;EALA;EAOA,iBAAA;EALA;EAOA,cAAA;AAAA;AAAA,iBAYc,KAAA,CAAA;EACd,MAAA;EACA,QAAA;EACA,QAAA;EACA,eAAA;EACA,MAAA,EAAQ,UAAA;EACR,SAAA;EACA,iBAAA;EACA;AAAA,GACC,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/price.mjs

@@ -0,0 +1,47 @@
+import { useLocale } from "../../global/contexts/locale.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/price.tsx
+function formatCurrency(amount, currency, locale) {
+	return new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency,
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 2
+	}).format(amount);
+}
+function Price({ amount, currency = "SEK", original, discountPercent, locale: localeProp, className = "", showDiscountBadge = true, colorSalePrice = true }) {
+	const contextLocale = useLocale();
+	const locale = localeProp ?? contextLocale;
+	const formattedAmount = formatCurrency(amount, currency, locale);
+	if (!(original !== void 0 && original !== amount)) return /* @__PURE__ */ jsx("span", {
+		className: `tabular-nums text-(--enad-text-primary-color) ${className}`,
+		children: formattedAmount
+	});
+	const formattedOriginal = formatCurrency(original, currency, locale);
+	const percent = discountPercent ?? (original > 0 ? Math.round((1 - amount / original) * 100) : void 0);
+	return /* @__PURE__ */ jsxs("span", {
+		className: `inline-flex items-center gap-2 ${className}`,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "tabular-nums text-(--enad-text-muted-color) line-through text-sm",
+				children: formattedOriginal
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: colorSalePrice ? "tabular-nums rounded-md bg-(--enad-error-color)/10 px-1.5 py-0.5 text-(--enad-error-color) font-semibold" : "tabular-nums font-semibold text-(--enad-text-primary-color)",
+				children: formattedAmount
+			}),
+			showDiscountBadge && percent != null && percent > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "rounded-full bg-(--enad-error-color) px-2 py-0.5 text-xs font-semibold text-white",
+				children: [
+					"-",
+					percent,
+					"%"
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { Price };
+
+//# sourceMappingURL=price.mjs.map

package/dist/client/storefront/components/price.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"price.mjs","names":[],"sources":["../../../../src/client/storefront/components/price.tsx"],"sourcesContent":["import { useLocale } from \"../../global/contexts/locale\";\n\nexport interface PriceProps {\n  amount: number;\n  currency?: string;\n  original?: number;\n  discountPercent?: number;\n  locale?: string;\n  className?: string;\n  /** Show the -X% discount badge. Default: true */\n  showDiscountBadge?: boolean;\n  /** Apply colored background to the sale price. Default: true */\n  colorSalePrice?: boolean;\n}\n\nfunction formatCurrency(amount: number, currency: string, locale: string): string {\n  return new Intl.NumberFormat(locale, {\n    style: \"currency\",\n    currency,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 2,\n  }).format(amount);\n}\n\nexport function Price({\n  amount,\n  currency = \"SEK\",\n  original,\n  discountPercent,\n  locale: localeProp,\n  className = \"\",\n  showDiscountBadge = true,\n  colorSalePrice = true,\n}: PriceProps) {\n  const contextLocale = useLocale();\n  const locale = localeProp ?? contextLocale;\n  const formattedAmount = formatCurrency(amount, currency, locale);\n  const hasDiscount = original !== undefined && original !== amount;\n\n  if (!hasDiscount) {\n    return (\n      <span className={`tabular-nums text-(--enad-text-primary-color) ${className}`}>\n        {formattedAmount}\n      </span>\n    );\n  }\n\n  const formattedOriginal = formatCurrency(original, currency, locale);\n  const percent =\n    discountPercent ?? (original > 0 ? Math.round((1 - amount / original) * 100) : undefined);\n\n  return (\n    <span className={`inline-flex items-center gap-2 ${className}`}>\n      <span className=\"tabular-nums text-(--enad-text-muted-color) line-through text-sm\">\n        {formattedOriginal}\n      </span>\n      <span\n        className={\n          colorSalePrice\n            ? \"tabular-nums rounded-md bg-(--enad-error-color)/10 px-1.5 py-0.5 text-(--enad-error-color) font-semibold\"\n            : \"tabular-nums font-semibold text-(--enad-text-primary-color)\"\n        }\n      >\n        {formattedAmount}\n      </span>\n      {showDiscountBadge && percent != null && percent > 0 && (\n        <span className=\"rounded-full bg-(--enad-error-color) px-2 py-0.5 text-xs font-semibold text-white\">\n          -{percent}%\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;AAeA,SAAS,eAAe,QAAgB,UAAkB,QAAwB;AAChF,QAAO,IAAI,KAAK,aAAa,QAAQ;EACnC,OAAO;EACP;EACA,uBAAuB;EACvB,uBAAuB;EACxB,CAAC,CAAC,OAAO,OAAO;;AAGnB,SAAgB,MAAM,EACpB,QACA,WAAW,OACX,UACA,iBACA,QAAQ,YACR,YAAY,IACZ,oBAAoB,MACpB,iBAAiB,QACJ;CACb,MAAM,gBAAgB,WAAW;CACjC,MAAM,SAAS,cAAc;CAC7B,MAAM,kBAAkB,eAAe,QAAQ,UAAU,OAAO;AAGhE,KAAI,EAFgB,aAAa,KAAA,KAAa,aAAa,QAGzD,QACE,oBAAC,QAAD;EAAM,WAAW,iDAAiD;YAC/D;EACI,CAAA;CAIX,MAAM,oBAAoB,eAAe,UAAU,UAAU,OAAO;CACpE,MAAM,UACJ,oBAAoB,WAAW,IAAI,KAAK,OAAO,IAAI,SAAS,YAAY,IAAI,GAAG,KAAA;AAEjF,QACE,qBAAC,QAAD;EAAM,WAAW,kCAAkC;YAAnD;GACE,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GACP,oBAAC,QAAD;IACE,WACE,iBACI,6GACA;cAGL;IACI,CAAA;GACN,qBAAqB,WAAW,QAAQ,UAAU,KACjD,qBAAC,QAAD;IAAM,WAAU;cAAhB;KAAoG;KAChG;KAAQ;KACL;;GAEJ"}

package/dist/client/storefront/components/product-recommendations.d.ts

@@ -0,0 +1,31 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/product-recommendations.d.ts
+interface ProductRecommendationsProps {
+  title?: string;
+  /** Optional variant label for styling/semantics */
+  variant?: "related" | "recent" | "complete-the-look";
+  /** Product cards to render — pass <ProductCard> elements */
+  children: React$1.ReactNode;
+  /** "View all" link */
+  viewAllHref?: string;
+  viewAllLabel?: string;
+  /** Show navigation arrows on desktop */
+  showArrows?: boolean;
+  /** Delight level (0-100) for stagger entry animation. 0 = no animation. */
+  delight?: number;
+  className?: string;
+}
+declare function ProductRecommendations({
+  title,
+  children,
+  viewAllHref,
+  viewAllLabel,
+  showArrows,
+  delight,
+  className
+}: ProductRecommendationsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProductRecommendations, ProductRecommendationsProps };
+//# sourceMappingURL=product-recommendations.d.ts.map

package/dist/client/storefront/components/product-recommendations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-recommendations.d.ts","names":[],"sources":["../../../../src/client/storefront/components/product-recommendations.tsx"],"mappings":";;;;UAUiB,2BAAA;EACf,KAAA;;EAEA,OAAA;EAH0C;EAK1C,QAAA,EAAU,OAAA,CAAM,SAAA;EAAS;EAEzB,WAAA;EACA,YAAA;EAHA;EAKA,UAAA;EALgB;EAOhB,OAAA;EACA,SAAA;AAAA;AAAA,iBAKc,sBAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,OAAA;EACA;AAAA,GACC,2BAAA,GAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/product-recommendations.mjs

@@ -0,0 +1,88 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { getMotionConfig } from "../../motion/config.mjs";
+import { staggerChildStyle, staggerEntryClass } from "../../motion/stagger.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/product-recommendations.tsx
+function ProductRecommendations({ title, children, viewAllHref, viewAllLabel = "View all", showArrows = true, delight = 0, className }) {
+	const scrollRef = React$1.useRef(null);
+	const motion = React$1.useMemo(() => getMotionConfig(delight), [delight]);
+	const [canScrollLeft, setCanScrollLeft] = React$1.useState(false);
+	const [canScrollRight, setCanScrollRight] = React$1.useState(false);
+	const ChevronLeftIcon = useIcon("chevronLeft");
+	const ChevronRightIcon = useIcon("chevronRight");
+	const updateScrollState = React$1.useCallback(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		setCanScrollLeft(el.scrollLeft > 1);
+		setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+	}, []);
+	React$1.useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		updateScrollState();
+		el.addEventListener("scroll", updateScrollState, { passive: true });
+		const ro = new ResizeObserver(updateScrollState);
+		ro.observe(el);
+		return () => {
+			el.removeEventListener("scroll", updateScrollState);
+			ro.disconnect();
+		};
+	}, [updateScrollState]);
+	const scroll = (direction) => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const distance = el.clientWidth * .8;
+		el.scrollBy({
+			left: direction === "left" ? -distance : distance,
+			behavior: "smooth"
+		});
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("flex flex-col gap-4", className),
+		children: [(title || viewAllHref) && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [title && /* @__PURE__ */ jsx("h2", {
+				className: "font-enad text-xl font-semibold",
+				children: title
+			}), viewAllHref && /* @__PURE__ */ jsx("a", {
+				href: viewAllHref,
+				className: "text-sm font-medium underline underline-offset-4 hover:text-(--enad-button-bg) transition-colors",
+				children: viewAllLabel
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative group/recs",
+			children: [
+				showArrows && canScrollLeft && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => scroll("left"),
+					className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)",
+					"aria-label": "Scroll left",
+					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-5" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: scrollRef,
+					className: "flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-none pb-1",
+					children: React$1.Children.map(children, (child, i) => /* @__PURE__ */ jsx("div", {
+						className: cn("w-[260px] shrink-0 snap-start sm:w-[280px] lg:w-[300px]", staggerEntryClass(motion)),
+						style: staggerChildStyle(i, motion),
+						children: child
+					}, i))
+				}),
+				showArrows && canScrollRight && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => scroll("right"),
+					className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)",
+					"aria-label": "Scroll right",
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-5" })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { ProductRecommendations };
+
+//# sourceMappingURL=product-recommendations.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-recommendations.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/product-recommendations.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { getMotionConfig } from \"../../motion/config\";\nimport { staggerEntryClass, staggerChildStyle } from \"../../motion/stagger\";\n\n/* ─── Types ─── */\n\nexport interface ProductRecommendationsProps {\n  title?: string;\n  /** Optional variant label for styling/semantics */\n  variant?: \"related\" | \"recent\" | \"complete-the-look\";\n  /** Product cards to render — pass <ProductCard> elements */\n  children: React.ReactNode;\n  /** \"View all\" link */\n  viewAllHref?: string;\n  viewAllLabel?: string;\n  /** Show navigation arrows on desktop */\n  showArrows?: boolean;\n  /** Delight level (0-100) for stagger entry animation. 0 = no animation. */\n  delight?: number;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ProductRecommendations({\n  title,\n  children,\n  viewAllHref,\n  viewAllLabel = \"View all\",\n  showArrows = true,\n  delight = 0,\n  className,\n}: ProductRecommendationsProps) {\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const motion = React.useMemo(() => getMotionConfig(delight), [delight]);\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n  const ChevronLeftIcon = useIcon(\"chevronLeft\");\n  const ChevronRightIcon = useIcon(\"chevronRight\");\n\n  const updateScrollState = React.useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    setCanScrollLeft(el.scrollLeft > 1);\n    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);\n  }, []);\n\n  React.useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    updateScrollState();\n    el.addEventListener(\"scroll\", updateScrollState, { passive: true });\n    const ro = new ResizeObserver(updateScrollState);\n    ro.observe(el);\n    return () => {\n      el.removeEventListener(\"scroll\", updateScrollState);\n      ro.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const scroll = (direction: \"left\" | \"right\") => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const distance = el.clientWidth * 0.8;\n    el.scrollBy({\n      left: direction === \"left\" ? -distance : distance,\n      behavior: \"smooth\",\n    });\n  };\n\n  return (\n    <section className={cn(\"flex flex-col gap-4\", className)}>\n      {/* Header */}\n      {(title || viewAllHref) && (\n        <div className=\"flex items-center justify-between\">\n          {title && <h2 className=\"font-enad text-xl font-semibold\">{title}</h2>}\n          {viewAllHref && (\n            <a\n              href={viewAllHref}\n              className=\"text-sm font-medium underline underline-offset-4 hover:text-(--enad-button-bg) transition-colors\"\n            >\n              {viewAllLabel}\n            </a>\n          )}\n        </div>\n      )}\n\n      {/* Scrollable row */}\n      <div className=\"relative group/recs\">\n        {showArrows && canScrollLeft && (\n          <button\n            type=\"button\"\n            onClick={() => scroll(\"left\")}\n            className=\"absolute left-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)\"\n            aria-label=\"Scroll left\"\n          >\n            <ChevronLeftIcon className=\"size-5\" />\n          </button>\n        )}\n\n        <div\n          ref={scrollRef}\n          className=\"flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-none pb-1\"\n        >\n          {React.Children.map(children, (child, i) => (\n            <div\n              key={i}\n              className={cn(\n                \"w-[260px] shrink-0 snap-start sm:w-[280px] lg:w-[300px]\",\n                staggerEntryClass(motion),\n              )}\n              style={staggerChildStyle(i, motion)}\n            >\n              {child}\n            </div>\n          ))}\n        </div>\n\n        {showArrows && canScrollRight && (\n          <button\n            type=\"button\"\n            onClick={() => scroll(\"right\")}\n            className=\"absolute right-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)\"\n            aria-label=\"Scroll right\"\n          >\n            <ChevronRightIcon className=\"size-5\" />\n          </button>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;AA4BA,SAAgB,uBAAuB,EACrC,OACA,UACA,aACA,eAAe,YACf,aAAa,MACb,UAAU,GACV,aAC8B;CAC9B,MAAM,YAAYA,QAAM,OAAuB,KAAK;CACpD,MAAM,SAASA,QAAM,cAAc,gBAAgB,QAAQ,EAAE,CAAC,QAAQ,CAAC;CACvE,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,gBAAgB,qBAAqBA,QAAM,SAAS,MAAM;CACjE,MAAM,kBAAkB,QAAQ,cAAc;CAC9C,MAAM,mBAAmB,QAAQ,eAAe;CAEhD,MAAM,oBAAoBA,QAAM,kBAAkB;EAChD,MAAM,KAAK,UAAU;AACrB,MAAI,CAAC,GAAI;AACT,mBAAiB,GAAG,aAAa,EAAE;AACnC,oBAAkB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,EAAE;IACrE,EAAE,CAAC;AAEN,SAAM,gBAAgB;EACpB,MAAM,KAAK,UAAU;AACrB,MAAI,CAAC,GAAI;AACT,qBAAmB;AACnB,KAAG,iBAAiB,UAAU,mBAAmB,EAAE,SAAS,MAAM,CAAC;EACnE,MAAM,KAAK,IAAI,eAAe,kBAAkB;AAChD,KAAG,QAAQ,GAAG;AACd,eAAa;AACX,MAAG,oBAAoB,UAAU,kBAAkB;AACnD,MAAG,YAAY;;IAEhB,CAAC,kBAAkB,CAAC;CAEvB,MAAM,UAAU,cAAgC;EAC9C,MAAM,KAAK,UAAU;AACrB,MAAI,CAAC,GAAI;EACT,MAAM,WAAW,GAAG,cAAc;AAClC,KAAG,SAAS;GACV,MAAM,cAAc,SAAS,CAAC,WAAW;GACzC,UAAU;GACX,CAAC;;AAGJ,QACE,qBAAC,WAAD;EAAS,WAAW,GAAG,uBAAuB,UAAU;YAAxD,EAEI,SAAS,gBACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SAAS,oBAAC,MAAD;IAAI,WAAU;cAAmC;IAAW,CAAA,EACrE,eACC,oBAAC,KAAD;IACE,MAAM;IACN,WAAU;cAET;IACC,CAAA,CAEF;MAIR,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,cAAc,iBACb,oBAAC,UAAD;KACE,MAAK;KACL,eAAe,OAAO,OAAO;KAC7B,WAAU;KACV,cAAW;eAEX,oBAAC,iBAAD,EAAiB,WAAU,UAAW,CAAA;KAC/B,CAAA;IAGX,oBAAC,OAAD;KACE,KAAK;KACL,WAAU;eAETA,QAAM,SAAS,IAAI,WAAW,OAAO,MACpC,oBAAC,OAAD;MAEE,WAAW,GACT,2DACA,kBAAkB,OAAO,CAC1B;MACD,OAAO,kBAAkB,GAAG,OAAO;gBAElC;MACG,EARC,EAQD,CACN;KACE,CAAA;IAEL,cAAc,kBACb,oBAAC,UAAD;KACE,MAAK;KACL,eAAe,OAAO,QAAQ;KAC9B,WAAU;KACV,cAAW;eAEX,oBAAC,kBAAD,EAAkB,WAAU,UAAW,CAAA;KAChC,CAAA;IAEP;KACE"}

package/dist/client/storefront/components/product-tabs.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/product-tabs.d.ts
+interface ProductTab {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+}
+interface ProductTabsProps {
+  tabs: ProductTab[];
+  defaultTab?: string;
+  className?: string;
+}
+declare function ProductTabs({
+  tabs,
+  defaultTab,
+  className
+}: ProductTabsProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ProductTab, ProductTabs, ProductTabsProps };
+//# sourceMappingURL=product-tabs.d.ts.map

package/dist/client/storefront/components/product-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-tabs.d.ts","names":[],"sources":["../../../../src/client/storefront/components/product-tabs.tsx"],"mappings":";;;UAIiB,UAAA;EACf,EAAA;EACA,KAAA;EACA,OAAA,EAAS,KAAA,CAAM,SAAA;AAAA;AAAA,UAGA,gBAAA;EACf,IAAA,EAAM,UAAA;EACN,UAAA;EACA,SAAA;AAAA;AAAA,iBAGc,WAAA,CAAA;EAAc,IAAA;EAAM,UAAA;EAAY;AAAA,GAAkB,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,56 @@
+"use client";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/product-tabs.tsx
+function ProductTabs({ tabs, defaultTab, className = "" }) {
+	const [activeTab, setActiveTab] = useState(() => defaultTab || tabs[0]?.id || "");
+	if (tabs.length === 0) return null;
+	const activePanel = tabs.find((tab) => tab.id === activeTab);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `font-enad ${className}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex border-b border-(--enad-border-color)",
+			role: "tablist",
+			children: tabs.map((tab) => {
+				const isActive = tab.id === activeTab;
+				return /* @__PURE__ */ jsx("button", {
+					role: "tab",
+					id: `tab-${tab.id}`,
+					"aria-selected": isActive,
+					"aria-controls": `panel-${tab.id}`,
+					tabIndex: isActive ? 0 : -1,
+					onClick: () => setActiveTab(tab.id),
+					onKeyDown: (e) => {
+						const currentIndex = tabs.findIndex((t) => t.id === activeTab);
+						let nextIndex;
+						if (e.key === "ArrowRight") nextIndex = (currentIndex + 1) % tabs.length;
+						else if (e.key === "ArrowLeft") nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+						else if (e.key === "Home") nextIndex = 0;
+						else if (e.key === "End") nextIndex = tabs.length - 1;
+						if (nextIndex !== void 0) {
+							e.preventDefault();
+							const nextTab = tabs[nextIndex];
+							if (nextTab) {
+								setActiveTab(nextTab.id);
+								document.getElementById(`tab-${nextTab.id}`)?.focus();
+							}
+						}
+					},
+					className: `px-4 py-3 text-sm font-medium transition-colors border-b-2 -mb-px ${isActive ? "border-(--enad-button-bg) text-(--enad-text-primary-color)" : "border-transparent text-(--enad-text-muted-color) hover:text-(--enad-text-primary-color) hover:border-(--enad-border-color)"}`,
+					children: tab.label
+				}, tab.id);
+			})
+		}), activePanel && /* @__PURE__ */ jsx("div", {
+			role: "tabpanel",
+			id: `panel-${activePanel.id}`,
+			"aria-labelledby": `tab-${activePanel.id}`,
+			tabIndex: 0,
+			className: "py-4 text-(--enad-text-primary-color)",
+			children: activePanel.content
+		})]
+	});
+}
+//#endregion
+export { ProductTabs };
+
+//# sourceMappingURL=product-tabs.mjs.map