@enadhq/enad-react-sdk 1.0.0 → 1.0.2

package/dist/client/storefront/blocks/content-with-gallery.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/content-with-gallery.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { colorThemeClasses, isThemeDark, type ContentWithGalleryProps } from \"../types\"\n\nfunction ContentWithGallery({\n  images = [],\n  preheader,\n  heading,\n  body,\n  productCards,\n  layout = \"image-above\",\n  colorTheme,\n  className,\n}: ContentWithGalleryProps) {\n  const dark = isThemeDark(colorTheme)\n  const themeClasses = colorThemeClasses(colorTheme)\n\n  const textBlock = (\n    <div>\n      {preheader && (\n        <p className={cn(\"mb-2 text-sm uppercase tracking-widest\", dark ? \"text-white/70\" : \"text-muted-foreground\")}>\n          {preheader}\n        </p>\n      )}\n      {heading && (\n        <h2\n          className={cn(\"text-2xl font-heading md:text-3xl\", dark ? \"text-white\" : \"text-foreground\")}\n          style={{ fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties}\n        >\n          {heading}\n        </h2>\n      )}\n      {body && (\n        <p className={cn(\"mt-4 max-w-2xl text-base leading-relaxed\", dark ? \"text-white/80\" : \"text-muted-foreground\")}>\n          {body}\n        </p>\n      )}\n    </div>\n  )\n\n  const imageGrid = images.length > 0 && (\n    <div className=\"grid grid-cols-2 gap-2 md:grid-cols-3\">\n      {images.map((img, i) => (\n        <div key={i} className=\"relative aspect-square bg-muted\">\n          <img src={img.src} alt={img.alt ?? \"\"} className=\"size-full object-cover\" />\n        </div>\n      ))}\n    </div>\n  )\n\n  if (layout === \"side-by-side\") {\n    return (\n      <section className={cn(\"px-4 py-12 md:px-8\", themeClasses, className)}>\n        <div className=\"mx-auto grid max-w-7xl gap-8 lg:grid-cols-2 lg:items-center\">\n          {imageGrid}\n          <div>\n            {textBlock}\n            {productCards && <div className=\"mt-8\">{productCards}</div>}\n          </div>\n        </div>\n      </section>\n    )\n  }\n\n  return (\n    <section className={cn(\"px-4 py-12 md:px-8\", themeClasses, className)}>\n      <div className=\"mx-auto max-w-7xl\">\n        {textBlock}\n        {imageGrid && <div className=\"mt-8\">{imageGrid}</div>}\n        {productCards && <div className=\"mt-8\">{productCards}</div>}\n      </div>\n    </section>\n  )\n}\n\nexport { ContentWithGallery, type ContentWithGalleryProps }\n"],"mappings":";AAoBI,SAEI,KAFJ;AAjBJ,SAAS,UAAU;AACnB,SAAS,mBAAmB,mBAAiD;AAE7E,SAAS,mBAAmB;AAAA,EAC1B,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,OAAO,YAAY,UAAU;AACnC,QAAM,eAAe,kBAAkB,UAAU;AAEjD,QAAM,YACJ,qBAAC,SACE;AAAA,iBACC,oBAAC,OAAE,WAAW,GAAG,0CAA0C,OAAO,kBAAkB,uBAAuB,GACxG,qBACH;AAAA,IAED,WACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,qCAAqC,OAAO,eAAe,iBAAiB;AAAA,QAC1F,OAAO,EAAE,YAAY,8BAA8B,eAAe,gCAAgC,eAAe,gCAAgC;AAAA,QAEhJ;AAAA;AAAA,IACH;AAAA,IAED,QACC,oBAAC,OAAE,WAAW,GAAG,4CAA4C,OAAO,kBAAkB,uBAAuB,GAC1G,gBACH;AAAA,KAEJ;AAGF,QAAM,YAAY,OAAO,SAAS,KAChC,oBAAC,SAAI,WAAU,yCACZ,iBAAO,IAAI,CAAC,KAAK,MAChB,oBAAC,SAAY,WAAU,mCACrB,8BAAC,SAAI,KAAK,IAAI,KAAK,KAAK,IAAI,OAAO,IAAI,WAAU,0BAAyB,KADlE,CAEV,CACD,GACH;AAGF,MAAI,WAAW,gBAAgB;AAC7B,WACE,oBAAC,aAAQ,WAAW,GAAG,sBAAsB,cAAc,SAAS,GAClE,+BAAC,SAAI,WAAU,+DACZ;AAAA;AAAA,MACD,qBAAC,SACE;AAAA;AAAA,QACA,gBAAgB,oBAAC,SAAI,WAAU,QAAQ,wBAAa;AAAA,SACvD;AAAA,OACF,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,aAAQ,WAAW,GAAG,sBAAsB,cAAc,SAAS,GAClE,+BAAC,SAAI,WAAU,qBACZ;AAAA;AAAA,IACA,aAAa,oBAAC,SAAI,WAAU,QAAQ,qBAAU;AAAA,IAC9C,gBAAgB,oBAAC,SAAI,WAAU,QAAQ,wBAAa;AAAA,KACvD,GACF;AAEJ;","names":[]}

package/dist/client/storefront/blocks/content-with-image-product-data.d.ts

@@ -0,0 +1,4 @@
+import type { ContentWithImageProductDataProps } from "../types";
+declare function ContentWithImageProductData({ image, preheader, heading, body, usps, buttonLabel, buttonHref, productCards, className, }: ContentWithImageProductDataProps): import("react/jsx-runtime").JSX.Element;
+export { ContentWithImageProductData, type ContentWithImageProductDataProps };
+//# sourceMappingURL=content-with-image-product-data.d.ts.map

package/dist/client/storefront/blocks/content-with-image-product-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-with-image-product-data.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/content-with-image-product-data.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,UAAU,CAAA;AAEhE,iBAAS,2BAA2B,CAAC,EACnC,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAS,EACT,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAAS,GACV,EAAE,gCAAgC,2CAgElC;AAED,OAAO,EAAE,2BAA2B,EAAE,KAAK,gCAAgC,EAAE,CAAA"}

package/dist/client/storefront/blocks/content-with-image-product-data.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIcon } from "../../icons/icon-context";
+import { cn } from "../../ui/utils";
+import { StorefrontButton } from "../primitives/button";
+function ContentWithImageProductData({
+  image,
+  preheader,
+  heading,
+  body,
+  usps = [],
+  buttonLabel,
+  buttonHref,
+  productCards,
+  className
+}) {
+  const CheckIcon = useIcon("check");
+  return /* @__PURE__ */ jsx("section", { className: cn("px-4 py-12 md:px-8", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-2 lg:items-start", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] overflow-hidden rounded-[var(--enad-image-radius)] bg-muted lg:aspect-auto lg:h-full lg:min-h-96", children: image?.src ? /* @__PURE__ */ jsx("img", { src: image.src, alt: image.alt ?? "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "size-full bg-muted" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+        preheader && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm uppercase tracking-widest text-muted-foreground", children: preheader }),
+        heading && /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: "text-2xl font-heading text-foreground md:text-3xl",
+            style: { fontWeight: "var(--enad-heading-weight)", letterSpacing: "var(--enad-heading-tracking)", textTransform: "var(--enad-heading-transform)" },
+            children: heading
+          }
+        ),
+        body && /* @__PURE__ */ jsx("p", { className: "mt-4 max-w-lg text-base leading-relaxed text-muted-foreground", children: body }),
+        usps.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-6 flex flex-col gap-2", children: usps.map((usp, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground", children: [
+          /* @__PURE__ */ jsx(CheckIcon, { className: "mt-0.5 size-4 shrink-0 text-primary" }),
+          usp
+        ] }, i)) }),
+        buttonLabel && buttonHref && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(StorefrontButton, { href: buttonHref, children: buttonLabel }) })
+      ] })
+    ] }),
+    productCards && /* @__PURE__ */ jsx("div", { className: "mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: productCards })
+  ] }) });
+}
+export {
+  ContentWithImageProductData
+};
+//# sourceMappingURL=content-with-image-product-data.mjs.map

package/dist/client/storefront/blocks/content-with-image-product-data.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/content-with-image-product-data.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { cn } from \"../../ui/utils\"\nimport { StorefrontButton } from \"../primitives/button\"\nimport type { ContentWithImageProductDataProps } from \"../types\"\n\nfunction ContentWithImageProductData({\n  image,\n  preheader,\n  heading,\n  body,\n  usps = [],\n  buttonLabel,\n  buttonHref,\n  productCards,\n  className,\n}: ContentWithImageProductDataProps) {\n  const CheckIcon = useIcon(\"check\")\n  return (\n    <section className={cn(\"px-4 py-12 md:px-8\", className)}>\n      <div className=\"mx-auto max-w-7xl\">\n        <div className=\"grid gap-8 lg:grid-cols-2 lg:items-start\">\n          {/* Image */}\n          <div className=\"relative aspect-[4/5] overflow-hidden rounded-[var(--enad-image-radius)] bg-muted lg:aspect-auto lg:h-full lg:min-h-96\">\n            {image?.src ? (\n              <img src={image.src} alt={image.alt ?? \"\"} className=\"size-full object-cover\" />\n            ) : (\n              <div className=\"size-full bg-muted\" />\n            )}\n          </div>\n\n          {/* Text content */}\n          <div className=\"flex flex-col justify-center\">\n            {preheader && (\n              <p className=\"mb-2 text-sm uppercase tracking-widest text-muted-foreground\">\n                {preheader}\n              </p>\n            )}\n            {heading && (\n              <h2\n                className=\"text-2xl font-heading text-foreground md:text-3xl\"\n                style={{ fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties}\n              >\n                {heading}\n              </h2>\n            )}\n            {body && (\n              <p className=\"mt-4 max-w-lg text-base leading-relaxed text-muted-foreground\">\n                {body}\n              </p>\n            )}\n\n            {usps.length > 0 && (\n              <ul className=\"mt-6 flex flex-col gap-2\">\n                {usps.map((usp, i) => (\n                  <li key={i} className=\"flex items-start gap-2 text-sm text-foreground\">\n                    <CheckIcon className=\"mt-0.5 size-4 shrink-0 text-primary\" />\n                    {usp}\n                  </li>\n                ))}\n              </ul>\n            )}\n\n            {buttonLabel && buttonHref && (\n              <div className=\"mt-6\">\n                <StorefrontButton href={buttonHref}>{buttonLabel}</StorefrontButton>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Product cards */}\n        {productCards && (\n          <div className=\"mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {productCards}\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n\nexport { ContentWithImageProductData, type ContentWithImageProductDataProps }\n"],"mappings":";AA2Bc,cA8BI,YA9BJ;AAxBd,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAGjC,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,CAAC;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AACnC,QAAM,YAAY,QAAQ,OAAO;AACjC,SACE,oBAAC,aAAQ,WAAW,GAAG,sBAAsB,SAAS,GACpD,+BAAC,SAAI,WAAU,qBACb;AAAA,yBAAC,SAAI,WAAU,4CAEb;AAAA,0BAAC,SAAI,WAAU,0HACZ,iBAAO,MACN,oBAAC,SAAI,KAAK,MAAM,KAAK,KAAK,MAAM,OAAO,IAAI,WAAU,0BAAyB,IAE9E,oBAAC,SAAI,WAAU,sBAAqB,GAExC;AAAA,MAGA,qBAAC,SAAI,WAAU,gCACZ;AAAA,qBACC,oBAAC,OAAE,WAAU,gEACV,qBACH;AAAA,QAED,WACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,8BAA8B,eAAe,gCAAgC,eAAe,gCAAgC;AAAA,YAEhJ;AAAA;AAAA,QACH;AAAA,QAED,QACC,oBAAC,OAAE,WAAU,iEACV,gBACH;AAAA,QAGD,KAAK,SAAS,KACb,oBAAC,QAAG,WAAU,4BACX,eAAK,IAAI,CAAC,KAAK,MACd,qBAAC,QAAW,WAAU,kDACpB;AAAA,8BAAC,aAAU,WAAU,uCAAsC;AAAA,UAC1D;AAAA,aAFM,CAGT,CACD,GACH;AAAA,QAGD,eAAe,cACd,oBAAC,SAAI,WAAU,QACb,8BAAC,oBAAiB,MAAM,YAAa,uBAAY,GACnD;AAAA,SAEJ;AAAA,OACF;AAAA,IAGC,gBACC,oBAAC,SAAI,WAAU,6DACZ,wBACH;AAAA,KAEJ,GACF;AAEJ;","names":[]}

package/dist/client/storefront/blocks/gallery-with-caption.d.ts

@@ -0,0 +1,4 @@
+import { type GalleryWithCaptionProps } from "../types";
+declare function GalleryWithCaption({ heading, indent, colorTheme, children, className, }: GalleryWithCaptionProps): import("react/jsx-runtime").JSX.Element;
+export { GalleryWithCaption, type GalleryWithCaptionProps };
+//# sourceMappingURL=gallery-with-caption.d.ts.map

package/dist/client/storefront/blocks/gallery-with-caption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-with-caption.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/gallery-with-caption.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAE1E,iBAAS,kBAAkB,CAAC,EAC1B,OAAO,EACP,MAAc,EACd,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,uBAAuB,2CA2BzB;AAED,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,CAAA"}

package/dist/client/storefront/blocks/gallery-with-caption.mjs

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../ui/utils";
+import { colorThemeClasses } from "../types";
+function GalleryWithCaption({
+  heading,
+  indent = false,
+  colorTheme,
+  children,
+  className
+}) {
+  const themeClasses = colorThemeClasses(colorTheme);
+  return /* @__PURE__ */ jsx("section", { className: cn("px-4 py-12 md:px-8", themeClasses, className), children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-7xl", indent && "md:pl-24 lg:pl-40"), children: [
+    heading && /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: "mb-6 text-2xl font-heading md:text-3xl",
+        style: { fontWeight: "var(--enad-heading-weight)", letterSpacing: "var(--enad-heading-tracking)", textTransform: "var(--enad-heading-transform)" },
+        children: heading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid gap-4",
+          indent ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
+        ),
+        children
+      }
+    )
+  ] }) });
+}
+export {
+  GalleryWithCaption
+};
+//# sourceMappingURL=gallery-with-caption.mjs.map

package/dist/client/storefront/blocks/gallery-with-caption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/gallery-with-caption.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { colorThemeClasses, type GalleryWithCaptionProps } from \"../types\"\n\nfunction GalleryWithCaption({\n  heading,\n  indent = false,\n  colorTheme,\n  children,\n  className,\n}: GalleryWithCaptionProps) {\n  const themeClasses = colorThemeClasses(colorTheme)\n\n  return (\n    <section className={cn(\"px-4 py-12 md:px-8\", themeClasses, className)}>\n      <div className={cn(\"mx-auto max-w-7xl\", indent && \"md:pl-24 lg:pl-40\")}>\n        {heading && (\n          <h2\n            className=\"mb-6 text-2xl font-heading md:text-3xl\"\n            style={{ fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties}\n          >\n            {heading}\n          </h2>\n        )}\n        <div\n          className={cn(\n            \"grid gap-4\",\n            indent\n              ? \"grid-cols-1 md:grid-cols-2\"\n              : \"grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4\",\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { GalleryWithCaption, type GalleryWithCaptionProps }\n"],"mappings":"AAeM,SAEI,KAFJ;AAdN,SAAS,UAAU;AACnB,SAAS,yBAAuD;AAEhE,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,eAAe,kBAAkB,UAAU;AAEjD,SACE,oBAAC,aAAQ,WAAW,GAAG,sBAAsB,cAAc,SAAS,GAClE,+BAAC,SAAI,WAAW,GAAG,qBAAqB,UAAU,mBAAmB,GAClE;AAAA,eACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,YAAY,8BAA8B,eAAe,gCAAgC,eAAe,gCAAgC;AAAA,QAEhJ;AAAA;AAAA,IACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SACI,+BACA;AAAA,QACN;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/client/storefront/blocks/gallery-with-link-blocks.d.ts

@@ -0,0 +1,4 @@
+import type { GalleryWithLinkBlocksProps } from "../types";
+declare function GalleryWithLinkBlocks({ heading, children, className, }: GalleryWithLinkBlocksProps): import("react/jsx-runtime").JSX.Element;
+export { GalleryWithLinkBlocks, type GalleryWithLinkBlocksProps };
+//# sourceMappingURL=gallery-with-link-blocks.d.ts.map

package/dist/client/storefront/blocks/gallery-with-link-blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-with-link-blocks.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/gallery-with-link-blocks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAA;AAE1D,iBAAS,qBAAqB,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,0BAA0B,2CAoB5B;AAED,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,CAAA"}

package/dist/client/storefront/blocks/gallery-with-link-blocks.mjs

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../ui/utils";
+function GalleryWithLinkBlocks({
+  heading,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("py-12", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 md:px-8", children: heading && /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: "mb-6 text-2xl font-heading text-foreground md:text-3xl",
+        style: { fontWeight: "var(--enad-heading-weight)", letterSpacing: "var(--enad-heading-tracking)", textTransform: "var(--enad-heading-transform)" },
+        children: heading
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-4 overflow-x-auto px-4 scrollbar-none md:px-8", children: React.Children.map(children, (child) => /* @__PURE__ */ jsx("div", { className: "w-52 shrink-0 sm:w-60 md:w-72 lg:w-80", children: child })) })
+  ] });
+}
+export {
+  GalleryWithLinkBlocks
+};
+//# sourceMappingURL=gallery-with-link-blocks.mjs.map

package/dist/client/storefront/blocks/gallery-with-link-blocks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/gallery-with-link-blocks.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport type { GalleryWithLinkBlocksProps } from \"../types\"\n\nfunction GalleryWithLinkBlocks({\n  heading,\n  children,\n  className,\n}: GalleryWithLinkBlocksProps) {\n  return (\n    <section className={cn(\"py-12\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 md:px-8\">\n        {heading && (\n          <h2\n            className=\"mb-6 text-2xl font-heading text-foreground md:text-3xl\"\n            style={{ fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties}\n          >\n            {heading}\n          </h2>\n        )}\n      </div>\n      <div className=\"flex gap-4 overflow-x-auto px-4 scrollbar-none md:px-8\">\n        {React.Children.map(children, (child) => (\n          <div className=\"w-52 shrink-0 sm:w-60 md:w-72 lg:w-80\">{child}</div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport { GalleryWithLinkBlocks, type GalleryWithLinkBlocksProps }\n"],"mappings":"AAUI,SAGM,KAHN;AAVJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAGnB,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,SACE,qBAAC,aAAQ,WAAW,GAAG,SAAS,SAAS,GACvC;AAAA,wBAAC,SAAI,WAAU,kCACZ,qBACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,YAAY,8BAA8B,eAAe,gCAAgC,eAAe,gCAAgC;AAAA,QAEhJ;AAAA;AAAA,IACH,GAEJ;AAAA,IACA,oBAAC,SAAI,WAAU,0DACZ,gBAAM,SAAS,IAAI,UAAU,CAAC,UAC7B,oBAAC,SAAI,WAAU,yCAAyC,iBAAM,CAC/D,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/client/storefront/blocks/gallery.d.ts

@@ -0,0 +1,4 @@
+import type { GalleryProps } from "../types";
+declare function Gallery({ heading, variant, children, className }: GalleryProps): import("react/jsx-runtime").JSX.Element | null;
+export { Gallery, type GalleryProps };
+//# sourceMappingURL=gallery.d.ts.map

package/dist/client/storefront/blocks/gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/gallery.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,iBAAS,OAAO,CAAC,EAAE,OAAO,EAAE,OAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,YAAY,kDA+DhF;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,CAAA"}

package/dist/client/storefront/blocks/gallery.mjs

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../ui/utils";
+function Gallery({ heading, variant = "grid", children, className }) {
+  const childCount = React.Children.count(children);
+  if (childCount === 0) return null;
+  const headingEl = heading ? /* @__PURE__ */ jsx(
+    "h2",
+    {
+      className: "mb-6 text-2xl font-heading text-foreground md:text-3xl",
+      style: { fontWeight: "var(--enad-heading-weight)", letterSpacing: "var(--enad-heading-tracking)", textTransform: "var(--enad-heading-transform)" },
+      children: heading
+    }
+  ) : null;
+  if (variant === "masonry") {
+    return /* @__PURE__ */ jsx("section", { className: cn("px-4 py-12 md:px-8", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl", children: [
+      headingEl,
+      /* @__PURE__ */ jsx("div", { className: "columns-2 gap-4 md:columns-3 [&>*]:mb-4 [&>*]:break-inside-avoid", children })
+    ] }) });
+  }
+  if (variant === "filmstrip") {
+    return /* @__PURE__ */ jsx("section", { className: cn("px-4 py-12 md:px-8", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl", children: [
+      headingEl,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "region",
+          "aria-label": heading ?? "Gallery",
+          tabIndex: 0,
+          className: "flex gap-4 overflow-x-auto snap-x snap-mandatory scrollbar-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&>*]:w-64 [&>*]:shrink-0 [&>*]:snap-start md:[&>*]:w-80",
+          children
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("section", { className: cn("px-4 py-12 md:px-8", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl", children: [
+    headingEl,
+    /* @__PURE__ */ jsx("div", { className: cn(
+      "grid gap-4",
+      childCount === 1 ? "grid-cols-1" : "grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+    ), children })
+  ] }) });
+}
+export {
+  Gallery
+};
+//# sourceMappingURL=gallery.mjs.map

package/dist/client/storefront/blocks/gallery.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/gallery.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport type { GalleryProps } from \"../types\"\n\nfunction Gallery({ heading, variant = \"grid\", children, className }: GalleryProps) {\n  const childCount = React.Children.count(children)\n\n  if (childCount === 0) return null\n\n  const headingEl = heading ? (\n    <h2\n      className=\"mb-6 text-2xl font-heading text-foreground md:text-3xl\"\n      style={{ fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties}\n    >\n      {heading}\n    </h2>\n  ) : null\n\n  /* ─── Masonry variant ─── */\n  if (variant === \"masonry\") {\n    return (\n      <section className={cn(\"px-4 py-12 md:px-8\", className)}>\n        <div className=\"mx-auto max-w-7xl\">\n          {headingEl}\n          <div className=\"columns-2 gap-4 md:columns-3 [&>*]:mb-4 [&>*]:break-inside-avoid\">\n            {children}\n          </div>\n        </div>\n      </section>\n    )\n  }\n\n  /* ─── Filmstrip variant ─── */\n  if (variant === \"filmstrip\") {\n    return (\n      <section className={cn(\"px-4 py-12 md:px-8\", className)}>\n        <div className=\"mx-auto max-w-7xl\">\n          {headingEl}\n          <div\n            role=\"region\"\n            aria-label={heading ?? \"Gallery\"}\n            tabIndex={0}\n            className=\"flex gap-4 overflow-x-auto snap-x snap-mandatory scrollbar-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&>*]:w-64 [&>*]:shrink-0 [&>*]:snap-start md:[&>*]:w-80\"\n          >\n            {children}\n          </div>\n        </div>\n      </section>\n    )\n  }\n\n  /* ─── Grid variant (default) ─── */\n  return (\n    <section className={cn(\"px-4 py-12 md:px-8\", className)}>\n      <div className=\"mx-auto max-w-7xl\">\n        {headingEl}\n        <div className={cn(\n          \"grid gap-4\",\n          childCount === 1\n            ? \"grid-cols-1\"\n            : \"grid-cols-2 md:grid-cols-3 lg:grid-cols-4\",\n        )}>\n          {children}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { Gallery, type GalleryProps }\n"],"mappings":"AAUI,cAYI,YAZJ;AAVJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAGnB,SAAS,QAAQ,EAAE,SAAS,UAAU,QAAQ,UAAU,UAAU,GAAiB;AACjF,QAAM,aAAa,MAAM,SAAS,MAAM,QAAQ;AAEhD,MAAI,eAAe,EAAG,QAAO;AAE7B,QAAM,YAAY,UAChB;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,8BAA8B,eAAe,gCAAgC,eAAe,gCAAgC;AAAA,MAEhJ;AAAA;AAAA,EACH,IACE;AAGJ,MAAI,YAAY,WAAW;AACzB,WACE,oBAAC,aAAQ,WAAW,GAAG,sBAAsB,SAAS,GACpD,+BAAC,SAAI,WAAU,qBACZ;AAAA;AAAA,MACD,oBAAC,SAAI,WAAU,oEACZ,UACH;AAAA,OACF,GACF;AAAA,EAEJ;AAGA,MAAI,YAAY,aAAa;AAC3B,WACE,oBAAC,aAAQ,WAAW,GAAG,sBAAsB,SAAS,GACpD,+BAAC,SAAI,WAAU,qBACZ;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY,WAAW;AAAA,UACvB,UAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,OACF,GACF;AAAA,EAEJ;AAGA,SACE,oBAAC,aAAQ,WAAW,GAAG,sBAAsB,SAAS,GACpD,+BAAC,SAAI,WAAU,qBACZ;AAAA;AAAA,IACD,oBAAC,SAAI,WAAW;AAAA,MACd;AAAA,MACA,eAAe,IACX,gBACA;AAAA,IACN,GACG,UACH;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/client/storefront/blocks/hero.d.ts

@@ -0,0 +1,4 @@
+import { type HeroProps } from "../types";
+declare function Hero(props: HeroProps): import("react/jsx-runtime").JSX.Element;
+export { Hero, type HeroProps };
+//# sourceMappingURL=hero.d.ts.map

package/dist/client/storefront/blocks/hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/hero.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkC,KAAK,SAAS,EAAuE,MAAM,UAAU,CAAA;AAiZ9I,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,2CAiC7B;AAED,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAA"}

package/dist/client/storefront/blocks/hero.mjs

@@ -0,0 +1,357 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../ui/utils";
+import { StorefrontButton } from "../primitives/button";
+import { StorefrontTextLink } from "../primitives/text-link";
+import { colorThemeClasses, isThemeDark } from "../types";
+const aspectClasses = {
+  "9:16": "aspect-[9/16]",
+  "4:5": "aspect-[4/5]",
+  "1:1": "aspect-square",
+  "16:9": "aspect-video"
+};
+const contentWidthClasses = {
+  sm: "max-w-sm",
+  md: "max-w-xl",
+  lg: "max-w-3xl"
+};
+const alignItemsMap = {
+  top: "items-start",
+  center: "items-center",
+  bottom: "items-end"
+};
+const justifyMap = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
+function getPositionClasses(position) {
+  const [vertical, horizontal] = position.split("-");
+  return cn(
+    "absolute inset-0 flex p-8 md:p-12 lg:p-16",
+    alignItemsMap[vertical],
+    justifyMap[horizontal]
+  );
+}
+function getTextAlign(position) {
+  const horizontal = position.split("-")[1];
+  if (horizontal === "center") return "center";
+  if (horizontal === "right") return "right";
+  return "left";
+}
+const overlayGradientStyle = (direction) => ({
+  background: `linear-gradient(${direction}, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-to-opacity) * 100%), transparent))`
+});
+function getGradientDirection(position) {
+  const [vertical, horizontal] = position.split("-");
+  if (vertical === "bottom") return "to top";
+  if (vertical === "top") return "to bottom";
+  if (horizontal === "left") return "to right";
+  if (horizontal === "right") return "to left";
+  return null;
+}
+const centerOverlayStyle = {
+  background: "color-mix(in oklch, var(--enad-overlay-color) 30%, transparent)"
+};
+const headingStyle = { fontWeight: "var(--enad-heading-weight)", letterSpacing: "var(--enad-heading-tracking)", textTransform: "var(--enad-heading-transform)" };
+function HeroCTA({
+  buttonLabel,
+  buttonHref,
+  textLinkLabel,
+  textLinkHref,
+  dark
+}) {
+  if (!buttonLabel && !textLinkLabel) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-wrap items-center gap-4", children: [
+    buttonLabel && buttonHref && /* @__PURE__ */ jsx(StorefrontButton, { href: buttonHref, variant: dark ? "outline" : "primary", children: buttonLabel }),
+    textLinkLabel && textLinkHref && /* @__PURE__ */ jsx(StorefrontTextLink, { href: textLinkHref, className: dark ? "text-white" : void 0, children: textLinkLabel })
+  ] });
+}
+function HeroTextBlock({
+  preheader,
+  heading,
+  buttonLabel,
+  buttonHref,
+  textLinkLabel,
+  textLinkHref,
+  contentWidth = "md",
+  dark = false,
+  align = "left",
+  headingClamp
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-col",
+        contentWidthClasses[contentWidth],
+        align === "center" && "items-center text-center",
+        align === "right" && "items-end text-end",
+        align === "left" && "items-start text-start"
+      ),
+      children: [
+        preheader && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mb-2 text-sm uppercase tracking-widest line-clamp-2",
+              dark ? "text-white/70" : "text-muted-foreground"
+            ),
+            children: preheader
+          }
+        ),
+        heading && /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "text-3xl font-heading md:text-4xl lg:text-5xl",
+              dark ? "text-white" : "text-foreground",
+              headingClamp
+            ),
+            style: headingStyle,
+            children: heading
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HeroCTA,
+          {
+            buttonLabel,
+            buttonHref,
+            textLinkLabel,
+            textLinkHref,
+            dark
+          }
+        )
+      ]
+    }
+  );
+}
+function HeroMinimal({
+  preheader,
+  heading,
+  buttonLabel,
+  buttonHref,
+  textLinkLabel,
+  textLinkHref,
+  dark,
+  themeClasses,
+  className
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("px-8 py-16 md:py-24 lg:py-32", themeClasses || "bg-background", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center text-center", children: [
+    preheader && /* @__PURE__ */ jsx("p", { className: cn("mb-2 text-sm uppercase tracking-widest", dark ? "text-white/70" : "text-muted-foreground"), children: preheader }),
+    heading && /* @__PURE__ */ jsx(
+      "h1",
+      {
+        className: cn("max-w-prose text-3xl font-heading line-clamp-3 md:text-5xl lg:text-6xl", dark ? "text-white" : "text-foreground"),
+        style: headingStyle,
+        children: heading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HeroCTA,
+      {
+        buttonLabel,
+        buttonHref,
+        textLinkLabel,
+        textLinkHref,
+        dark
+      }
+    )
+  ] }) });
+}
+function HeroBanner({
+  image,
+  preheader,
+  heading,
+  buttonLabel,
+  buttonHref,
+  textLinkLabel,
+  textLinkHref,
+  themeClasses,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("relative max-h-64 overflow-hidden", image?.src ? "bg-muted" : "bg-primary", themeClasses, className),
+      children: [
+        image?.src && /* @__PURE__ */ jsx("img", { src: image?.src, alt: image?.alt ?? "", className: "size-full object-cover", loading: "lazy" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: overlayGradientStyle("to right")
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center px-8 md:px-12 lg:px-16", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-wrap items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-4", children: [
+            preheader && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm uppercase tracking-widest text-white/70", children: preheader }),
+            heading && /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: "min-w-0 truncate text-xl font-heading text-white md:text-2xl lg:text-3xl",
+                style: headingStyle,
+                children: heading
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            HeroCTA,
+            {
+              buttonLabel,
+              buttonHref,
+              textLinkLabel,
+              textLinkHref,
+              dark: true
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+function HeroSplit({
+  image,
+  aspectRatio = "16:9",
+  preheader,
+  heading,
+  buttonLabel,
+  buttonHref,
+  textLinkLabel,
+  textLinkHref,
+  contentWidth = "md",
+  dark,
+  themeClasses,
+  align,
+  className
+}) {
+  const hasImage = Boolean(image?.src);
+  return /* @__PURE__ */ jsxs("section", { className: cn("grid", hasImage && "lg:grid-cols-2", themeClasses, className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center px-8 py-12 lg:px-16 lg:py-20", children: /* @__PURE__ */ jsx(
+      HeroTextBlock,
+      {
+        preheader,
+        heading,
+        buttonLabel,
+        buttonHref,
+        textLinkLabel,
+        textLinkHref,
+        contentWidth,
+        dark,
+        align,
+        headingClamp: "line-clamp-4"
+      }
+    ) }),
+    hasImage && /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio]), children: /* @__PURE__ */ jsx("img", { src: image?.src, alt: image?.alt ?? "", className: "size-full object-cover", loading: "lazy" }) })
+  ] });
+}
+function HeroImageOnly({
+  image,
+  aspectRatio = "16:9",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio], className),
+      children: image?.src && /* @__PURE__ */ jsx("img", { src: image?.src, alt: image?.alt ?? "", className: "size-full object-cover", loading: "lazy" })
+    }
+  );
+}
+function resolveOverlayGradient(position) {
+  const direction = getGradientDirection(position);
+  return direction ? overlayGradientStyle(direction) : centerOverlayStyle;
+}
+function resolveOverlayBg(imageSrc) {
+  return imageSrc ? "bg-muted" : "bg-primary";
+}
+function HeroOverlay({
+  image,
+  aspectRatio = "16:9",
+  contentPosition = "bottom-center",
+  contentWidth = "md",
+  preheader,
+  heading,
+  buttonLabel,
+  buttonHref,
+  textLinkLabel,
+  textLinkHref,
+  dark,
+  themeClasses,
+  align,
+  className
+}) {
+  const hasContent = preheader || heading || buttonLabel || textLinkLabel;
+  const position = contentPosition ?? "bottom-center";
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "relative overflow-hidden",
+        resolveOverlayBg(image?.src),
+        aspectClasses[aspectRatio],
+        themeClasses,
+        className
+      ),
+      children: [
+        image?.src && /* @__PURE__ */ jsx("img", { src: image?.src, alt: image?.alt ?? "", className: "size-full object-cover", loading: "lazy" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: resolveOverlayGradient(position)
+          }
+        ),
+        hasContent && /* @__PURE__ */ jsx("div", { className: getPositionClasses(position), children: /* @__PURE__ */ jsx(
+          HeroTextBlock,
+          {
+            preheader,
+            heading,
+            buttonLabel,
+            buttonHref,
+            textLinkLabel,
+            textLinkHref,
+            contentWidth,
+            dark,
+            align,
+            headingClamp: "line-clamp-3"
+          }
+        ) })
+      ]
+    }
+  );
+}
+function Hero(props) {
+  const {
+    layout = "overlay",
+    contentPosition = "bottom-center",
+    textAlign,
+    colorTheme
+  } = props;
+  const dark = isThemeDark(colorTheme) || layout === "overlay";
+  const themeClasses = colorThemeClasses(colorTheme);
+  const defaultAlign = layout === "overlay" ? getTextAlign(contentPosition ?? "bottom-center") : "left";
+  const align = textAlign ?? defaultAlign;
+  const layoutProps = {
+    ...props,
+    dark,
+    themeClasses,
+    align
+  };
+  switch (layout) {
+    case "minimal":
+      return /* @__PURE__ */ jsx(HeroMinimal, { ...layoutProps });
+    case "banner":
+      return /* @__PURE__ */ jsx(HeroBanner, { ...layoutProps });
+    case "split":
+      return /* @__PURE__ */ jsx(HeroSplit, { ...layoutProps });
+    case "image-only":
+      return /* @__PURE__ */ jsx(HeroImageOnly, { ...layoutProps });
+    default:
+      return /* @__PURE__ */ jsx(HeroOverlay, { ...layoutProps });
+  }
+}
+export {
+  Hero
+};
+//# sourceMappingURL=hero.mjs.map