@enadhq/enad-react-sdk 0.0.6 → 1.0.2

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

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../ui/utils";
+function useInfiniteScroll({
+  onLoadMore,
+  hasMore,
+  loading = false,
+  threshold = "200px",
+  root
+}) {
+  const observerRef = React.useRef(null);
+  const callbackRef = React.useRef(onLoadMore);
+  callbackRef.current = onLoadMore;
+  const sentinelRef = React.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.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
+  ] });
+}
+export {
+  InfiniteScroll,
+  useInfiniteScroll
+};
+//# sourceMappingURL=infinite-scroll.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"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":";AAiHM,cAKF,YALE;AA/GN,YAAY,WAAW;AACvB,SAAS,UAAU;AAuBZ,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AACF,GAAsD;AACpD,QAAM,cAAc,MAAM,OAAoC,IAAI;AAClE,QAAM,cAAc,MAAM,OAAO,UAAU;AAC3C,cAAY,UAAU;AAEtB,QAAM,cAAc,MAAM;AAAA,IACxB,CAAC,SAA6B;AAC5B,UAAI,YAAY,SAAS;AACvB,oBAAY,QAAQ,WAAW;AAC/B,oBAAY,UAAU;AAAA,MACxB;AAEA,UAAI,CAAC,QAAQ,CAAC,WAAW,QAAS;AAElC,kBAAY,UAAU,IAAI;AAAA,QACxB,CAAC,YAAY;AACX,cAAI,QAAQ,CAAC,GAAG,gBAAgB;AAC9B,wBAAY,QAAQ;AAAA,UACtB;AAAA,QACF;AAAA,QACA;AAAA,UACE,YAAY;AAAA,UACZ,MAAM,MAAM,WAAW;AAAA,QACzB;AAAA,MACF;AAEA,kBAAY,QAAQ,QAAQ,IAAI;AAAA,IAClC;AAAA,IACA,CAAC,SAAS,SAAS,WAAW,IAAI;AAAA,EACpC;AAGA,QAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,kBAAY,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,aAAa,SAAS,QAAQ;AACzC;AAqBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,EAAE,YAAY,IAAI,kBAAkB;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,0BACJ,oBAAC,SAAI,WAAU,4BACb,8BAAC,SAAI,WAAU,4FAA2F,GAC5G;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,GAC1C;AAAA;AAAA,IAGA,WAAW,CAAC,sBACX,oBAAC,SAAI,KAAK,aAAa,WAAU,eAAc,eAAY,QAAO;AAAA,IAInE,WAAW,sBAAsB,CAAC,WACjC,oBAAC,SAAI,WAAU,4BACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QAET;AAAA;AAAA,IACH,GACF;AAAA,IAIF,oBAAC,SAAI,MAAK,UAAS,aAAU,UAC1B,sBAAY,oBAAoB,0BACnC;AAAA,IAGC,CAAC,WAAW,CAAC,WAAW;AAAA,KAC3B;AAEJ;","names":[]}

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

@@ -0,0 +1,5 @@
+import type { LanguageSelectorProps, LanguageOption } from "../types";
+declare function LanguageSelector({ languages, value, onValueChange, variant, size, className, labels, }: LanguageSelectorProps): import("react/jsx-runtime").JSX.Element;
+export { LanguageSelector };
+export type { LanguageSelectorProps, LanguageOption };
+//# 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","sourceRoot":"","sources":["../../../../src/client/storefront/components/language-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAuBrE,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAK,EACL,aAAa,EACb,OAAgB,EAChB,IAAgB,EAChB,SAAS,EACT,MAAM,GACP,EAAE,qBAAqB,2CAsCvB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAC3B,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAA"}

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIcon } from "../../icons/icon-context";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../ui/select";
+import { cn } from "../../ui/utils";
+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)) })
+  ] });
+}
+export {
+  LanguageSelector
+};
+//# sourceMappingURL=language-selector.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"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":";AAsBW,cAIP,YAJO;AAnBX,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAGnB,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,MAAI,YAAY,QAAQ;AACtB,WAAO,oBAAC,UAAM,mBAAS,KAAK,YAAY,GAAE;AAAA,EAC5C;AAEA,SACE,qBAAC,UAAK,WAAU,2BACb;AAAA,gBAAY,UAAU,SAAS,QAC9B,oBAAC,UAAK,WAAU,wBAAwB,mBAAS,MAAK;AAAA,IAEvD,SAAS;AAAA,KACZ;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,YAAY,QAAQ,OAAO;AAEjC,QAAM,WAAW,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,KAAK;AAEvD,SACE,qBAAC,UAAO,OAAc,eACpB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,YAAY,UAAU;AAAA,UACtB;AAAA,QACF;AAAA,QACA,cAAY,QAAQ,kBAAkB;AAAA,QAEtC,8BAAC,eACE,sBACC,qBAAC,UAAK,WAAU,2BACb;AAAA,sBAAY,UAAU,SAAS,QAC9B,oBAAC,UAAK,WAAU,wBAAwB,mBAAS,MAAK;AAAA,UAEvD,YAAY,UACX,oBAAC,aAAU,WAAU,UAAS;AAAA,UAE/B,YAAY,SAAS,SAAS,KAAK,YAAY,IAAI,SAAS;AAAA,WAC/D,GAEJ;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,iBAAc,UAAS,UAAS,OAAM,OACpC,oBAAU,IAAI,CAAC,SACd,oBAAC,cAA2B,OAAO,KAAK,MACtC,8BAAC,uBAAoB,UAAU,MAAM,SAAkB,KADxC,KAAK,IAEtB,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,14 @@
+export interface NewsletterSignupProps {
+    onSubmit: (email: string) => void | Promise<void>;
+    placeholder?: string;
+    buttonLabel?: string;
+    successMessage?: string;
+    errorMessage?: string;
+    labels?: {
+        heading?: string;
+        description?: string;
+    };
+    className?: string;
+}
+export declare function NewsletterSignup({ onSubmit, placeholder, buttonLabel, successMessage, errorMessage, labels, className, }: NewsletterSignupProps): import("react/jsx-runtime").JSX.Element;
+//# 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","sourceRoot":"","sources":["../../../../src/client/storefront/components/newsletter-signup.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAgC,EAChC,WAAyB,EACzB,cAA0C,EAC1C,YAAY,EACZ,MAAW,EACX,SAAS,GACV,EAAE,qBAAqB,2CA4EvB"}

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

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../ui/utils";
+import { useIcon } from "../../icons/icon-context";
+import { Input } from "../../ui/input";
+import { StorefrontButton } from "../primitives/button";
+function NewsletterSignup({
+  onSubmit,
+  placeholder = "Enter your email",
+  buttonLabel = "Subscribe",
+  successMessage = "Thanks for subscribing!",
+  errorMessage,
+  labels = {},
+  className
+}) {
+  const MailIcon = useIcon("mail");
+  const [email, setEmail] = React.useState("");
+  const [status, setStatus] = React.useState("idle");
+  const [error, setError] = React.useState(errorMessage);
+  React.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 })
+  ] });
+}
+export {
+  NewsletterSignup
+};
+//# sourceMappingURL=newsletter-signup.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"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":";AA2DM,SAEI,KAFJ;AAzDN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,aAAa;AACtB,SAAS,wBAAwB;AAe1B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAA0B;AACxB,QAAM,WAAW,QAAQ,MAAM;AAC/B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmD,MAAM;AAC3F,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA6B,YAAY;AAEzE,QAAM,UAAU,MAAM;AACpB,aAAS,YAAY;AACrB,QAAI,aAAc,WAAU,OAAO;AAAA,EACrC,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,eAAe,OAAO,MAAuB;AACjD,MAAE,eAAe;AACjB,QAAI,CAAC,MAAM,KAAK,KAAK,WAAW,UAAW;AAE3C,cAAU,SAAS;AACnB,aAAS,MAAS;AAElB,QAAI;AACF,YAAM,SAAS,MAAM,KAAK,CAAC;AAC3B,gBAAU,SAAS;AACnB,eAAS,EAAE;AAAA,IACb,SAAS,KAAK;AACZ,gBAAU,OAAO;AACjB,eAAS,eAAe,QAAQ,IAAI,UAAU,yCAAyC;AAAA,IACzF;AAAA,EACF;AAEA,MAAI,WAAW,WAAW;AACxB,WACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC;AAAA,aAAO,WACN,oBAAC,OAAE,WAAU,0EAA0E,iBAAO,SAAQ;AAAA,MAExG,oBAAC,OAAE,WAAU,0CAA0C,0BAAe;AAAA,OACxE;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC;AAAA,WAAO,WACN,oBAAC,OAAE,WAAU,0EAA0E,iBAAO,SAAQ;AAAA,IAEvG,OAAO,eACN,oBAAC,OAAE,WAAU,+CAA+C,iBAAO,aAAY;AAAA,IAEjF,qBAAC,UAAK,UAAU,cAAc,WAAU,cACtC;AAAA,2BAAC,SAAI,WAAU,mBACb;AAAA,4BAAC,YAAS,WAAU,uFAAsF;AAAA,QAC1G;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAQ;AAAA,YACR,OAAO;AAAA,YACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,YACxC;AAAA,YACA,cAAY;AAAA,YACZ,oBAAkB,QAAQ,qBAAqB;AAAA,YAC/C,UAAU,WAAW;AAAA,YACrB,WAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU,WAAW;AAAA,UAEpB,qBAAW,YAAY,QAAQ;AAAA;AAAA,MAClC;AAAA,OACF;AAAA,IACC,SACC,oBAAC,OAAE,IAAG,oBAAmB,WAAU,4CAA2C,MAAK,SAChF,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,14 @@
+export 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;
+}
+export declare function Price({ amount, currency, original, discountPercent, locale, className, showDiscountBadge, colorSalePrice, }: PriceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=price.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/price.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAWD,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,QAAgB,EAChB,QAAQ,EACR,eAAe,EACf,MAAgB,EAChB,SAAc,EACd,iBAAwB,EACxB,cAAqB,GACtB,EAAE,UAAU,2CAoCZ"}

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

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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 = "sv-SE",
+  className = "",
+  showDiscountBadge = true,
+  colorSalePrice = true
+}) {
+  const formattedAmount = formatCurrency(amount, currency, locale);
+  const hasDiscount = original !== void 0 && original !== amount;
+  if (!hasDiscount) {
+    return /* @__PURE__ */ jsx("span", { className: `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: "text-(--enad-text-muted-color) line-through text-sm", children: formattedOriginal }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: colorSalePrice ? "rounded-md bg-(--enad-error-color)/10 px-1.5 py-0.5 text-(--enad-error-color) font-semibold" : "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,
+      "%"
+    ] })
+  ] });
+}
+export {
+  Price
+};
+//# sourceMappingURL=price.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/price.tsx"],"sourcesContent":["export 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 = \"sv-SE\",\n  className = \"\",\n  showDiscountBadge = true,\n  colorSalePrice = true,\n}: PriceProps) {\n  const formattedAmount = formatCurrency(amount, currency, locale)\n  const hasDiscount = original !== undefined && original !== amount\n\n  if (!hasDiscount) {\n    return (\n      <span className={`text-(--enad-text-primary-color) ${className}`}>\n        {formattedAmount}\n      </span>\n    )\n  }\n\n  const formattedOriginal = formatCurrency(original, currency, locale)\n  const percent = 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=\"text-(--enad-text-muted-color) line-through text-sm\">\n        {formattedOriginal}\n      </span>\n      <span\n        className={\n          colorSalePrice\n            ? \"rounded-md bg-(--enad-error-color)/10 px-1.5 py-0.5 text-(--enad-error-color) font-semibold\"\n            : \"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":"AAqCM,cAwBE,YAxBF;AAxBN,SAAS,eAAe,QAAgB,UAAkB,QAAwB;AAChF,SAAO,IAAI,KAAK,aAAa,QAAQ;AAAA,IACnC,OAAO;AAAA,IACP;AAAA,IACA,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,EACzB,CAAC,EAAE,OAAO,MAAM;AAClB;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,iBAAiB;AACnB,GAAe;AACb,QAAM,kBAAkB,eAAe,QAAQ,UAAU,MAAM;AAC/D,QAAM,cAAc,aAAa,UAAa,aAAa;AAE3D,MAAI,CAAC,aAAa;AAChB,WACE,oBAAC,UAAK,WAAW,oCAAoC,SAAS,IAC3D,2BACH;AAAA,EAEJ;AAEA,QAAM,oBAAoB,eAAe,UAAU,UAAU,MAAM;AACnE,QAAM,UAAU,oBAAoB,WAAW,IAAI,KAAK,OAAO,IAAI,SAAS,YAAY,GAAG,IAAI;AAE/F,SACE,qBAAC,UAAK,WAAW,kCAAkC,SAAS,IAC1D;AAAA,wBAAC,UAAK,WAAU,uDACb,6BACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WACE,iBACI,gGACA;AAAA,QAGL;AAAA;AAAA,IACH;AAAA,IACC,qBAAqB,WAAW,QAAQ,UAAU,KACjD,qBAAC,UAAK,WAAU,qFAAoF;AAAA;AAAA,MAChG;AAAA,MAAQ;AAAA,OACZ;AAAA,KAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+export 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.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;
+}
+export declare function ProductRecommendations({ title, children, viewAllHref, viewAllLabel, showArrows, delight, className, }: ProductRecommendationsProps): import("react/jsx-runtime").JSX.Element;
+//# 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","sourceRoot":"","sources":["../../../../src/client/storefront/components/product-recommendations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,mBAAmB,CAAC;IACrD,4DAA4D;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sBAAsB;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,YAAyB,EACzB,UAAiB,EACjB,OAAW,EACX,SAAS,GACV,EAAE,2BAA2B,2CAmG7B"}

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

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../ui/utils";
+import { useIcon } from "../../icons/icon-context";
+import { getMotionConfig } from "../../motion/config";
+import { staggerEntryClass, staggerChildStyle } from "../../motion/stagger";
+function ProductRecommendations({
+  title,
+  children,
+  viewAllHref,
+  viewAllLabel = "View all",
+  showArrows = true,
+  delight = 0,
+  className
+}) {
+  const scrollRef = React.useRef(null);
+  const motion = React.useMemo(() => getMotionConfig(delight), [delight]);
+  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+  const [canScrollRight, setCanScrollRight] = React.useState(false);
+  const ChevronLeftIcon = useIcon("chevronLeft");
+  const ChevronRightIcon = useIcon("chevronRight");
+  const updateScrollState = React.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 1);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+  React.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 * 0.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.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" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ProductRecommendations
+};
+//# sourceMappingURL=product-recommendations.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"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, type MotionConfig } 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":";AA8EQ,SACY,KADZ;AA5ER,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,uBAA0C;AACnD,SAAS,mBAAmB,yBAAyB;AAsB9C,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AACF,GAAgC;AAC9B,QAAM,YAAY,MAAM,OAAuB,IAAI;AACnD,QAAM,SAAS,MAAM,QAAQ,MAAM,gBAAgB,OAAO,GAAG,CAAC,OAAO,CAAC;AACtE,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,KAAK;AAC9D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM,SAAS,KAAK;AAChE,QAAM,kBAAkB,QAAQ,aAAa;AAC7C,QAAM,mBAAmB,QAAQ,cAAc;AAE/C,QAAM,oBAAoB,MAAM,YAAY,MAAM;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,qBAAiB,GAAG,aAAa,CAAC;AAClC,sBAAkB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,CAAC;AAAA,EACvE,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,MAAM;AACpB,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,sBAAkB;AAClB,OAAG,iBAAiB,UAAU,mBAAmB,EAAE,SAAS,KAAK,CAAC;AAClE,UAAM,KAAK,IAAI,eAAe,iBAAiB;AAC/C,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM;AACX,SAAG,oBAAoB,UAAU,iBAAiB;AAClD,SAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,iBAAiB,CAAC;AAEtB,QAAM,SAAS,CAAC,cAAgC;AAC9C,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,UAAM,WAAW,GAAG,cAAc;AAClC,OAAG,SAAS;AAAA,MACV,MAAM,cAAc,SAAS,CAAC,WAAW;AAAA,MACzC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,aAAQ,WAAW,GAAG,uBAAuB,SAAS,GAEnD;AAAA,cAAS,gBACT,qBAAC,SAAI,WAAU,qCACZ;AAAA,eAAS,oBAAC,QAAG,WAAU,mCAAmC,iBAAM;AAAA,MAChE,eACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,IAIF,qBAAC,SAAI,WAAU,uBACZ;AAAA,oBAAc,iBACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,OAAO,MAAM;AAAA,UAC5B,WAAU;AAAA,UACV,cAAW;AAAA,UAEX,8BAAC,mBAAgB,WAAU,UAAS;AAAA;AAAA,MACtC;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UAET,gBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,MACpC;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,gBACT;AAAA,gBACA,kBAAkB,MAAM;AAAA,cAC1B;AAAA,cACA,OAAO,kBAAkB,GAAG,MAAM;AAAA,cAEjC;AAAA;AAAA,YAPI;AAAA,UAQP,CACD;AAAA;AAAA,MACH;AAAA,MAEC,cAAc,kBACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,OAAO,OAAO;AAAA,UAC7B,WAAU;AAAA,UACV,cAAW;AAAA,UAEX,8BAAC,oBAAiB,WAAU,UAAS;AAAA;AAAA,MACvC;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,12 @@
+export interface ProductTab {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+export interface ProductTabsProps {
+    tabs: ProductTab[];
+    defaultTab?: string;
+    className?: string;
+}
+export declare function ProductTabs({ tabs, defaultTab, className }: ProductTabsProps): import("react/jsx-runtime").JSX.Element | null;
+//# 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","sourceRoot":"","sources":["../../../../src/client/storefront/components/product-tabs.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,UAAU,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,SAAc,EAAE,EAAE,gBAAgB,kDAwEjF"}

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+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);
+                const el = document.getElementById(`tab-${nextTab.id}`);
+                el?.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
+      }
+    )
+  ] });
+}
+export {
+  ProductTabs
+};
+//# sourceMappingURL=product-tabs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"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":";AAwBI,SAMQ,KANR;AAtBJ,SAAS,gBAAgB;AAclB,SAAS,YAAY,EAAE,MAAM,YAAY,YAAY,GAAG,GAAqB;AAClF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAM,cAAc,KAAK,CAAC,GAAG,MAAM,EAAE;AAEhF,MAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QAAM,cAAc,KAAK,KAAK,CAAC,QAAQ,IAAI,OAAO,SAAS;AAE3D,SACE,qBAAC,SAAI,WAAW,aAAa,SAAS,IAEpC;AAAA,wBAAC,SAAI,WAAU,8CAA6C,MAAK,WAC9D,eAAK,IAAI,CAAC,QAAQ;AACjB,YAAM,WAAW,IAAI,OAAO;AAC5B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,IAAI,OAAO,IAAI,EAAE;AAAA,UACjB,iBAAe;AAAA,UACf,iBAAe,SAAS,IAAI,EAAE;AAAA,UAC9B,UAAU,WAAW,IAAI;AAAA,UACzB,SAAS,MAAM,aAAa,IAAI,EAAE;AAAA,UAClC,WAAW,CAAC,MAAM;AAChB,kBAAM,eAAe,KAAK,UAAU,CAAC,MAAM,EAAE,OAAO,SAAS;AAC7D,gBAAI;AAEJ,gBAAI,EAAE,QAAQ,cAAc;AAC1B,2BAAa,eAAe,KAAK,KAAK;AAAA,YACxC,WAAW,EAAE,QAAQ,aAAa;AAChC,2BAAa,eAAe,IAAI,KAAK,UAAU,KAAK;AAAA,YACtD,WAAW,EAAE,QAAQ,QAAQ;AAC3B,0BAAY;AAAA,YACd,WAAW,EAAE,QAAQ,OAAO;AAC1B,0BAAY,KAAK,SAAS;AAAA,YAC5B;AAEA,gBAAI,cAAc,QAAW;AAC3B,gBAAE,eAAe;AACjB,oBAAM,UAAU,KAAK,SAAS;AAC9B,kBAAI,SAAS;AACX,6BAAa,QAAQ,EAAE;AACvB,sBAAM,KAAK,SAAS,eAAe,OAAO,QAAQ,EAAE,EAAE;AACtD,oBAAI,MAAM;AAAA,cACZ;AAAA,YACF;AAAA,UACF;AAAA,UACA,WAAW,qEACT,WACI,+DACA,6HACN;AAAA,UAEC,cAAI;AAAA;AAAA,QArCA,IAAI;AAAA,MAsCX;AAAA,IAEJ,CAAC,GACH;AAAA,IAGC,eACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,YAAY,EAAE;AAAA,QAC3B,mBAAiB,OAAO,YAAY,EAAE;AAAA,QACtC,UAAU;AAAA,QACV,WAAU;AAAA,QAET,sBAAY;AAAA;AAAA,IACf;AAAA,KAEJ;AAEJ;","names":[]}