@enadhq/enad-react-sdk 1.2.0 → 1.3.0

package/dist/client/storefront/blocks/card-video.mjs

@@ -21,7 +21,7 @@ function CardVideo({ thumbnail, videoUrl, title, caption, aspectRatio = "16:9",
 			}) : /* @__PURE__ */ jsx("div", { className: "size-full bg-muted" }), /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0 flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "flex size-14 items-center justify-center rounded-full bg-white/90 text-foreground transition-transform group-hover:scale-110",
+					className: "flex size-14 items-center justify-center rounded-full bg-white/90 text-foreground",
 					children: /* @__PURE__ */ jsx(PlayIcon, { className: "ml-0.5 size-6 fill-current" })
 				})
 			})]

package/dist/client/storefront/blocks/card-video.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"card-video.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/card-video.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { cn } from \"../../ui/utils\"\nimport type { CardVideoProps } from \"../types\"\n\nconst aspectClasses: Record<string, string> = {\n  \"4:3\": \"aspect-[4/3]\",\n  \"1:1\": \"aspect-square\",\n  \"16:9\": \"aspect-video\",\n}\n\nfunction CardVideo({\n  thumbnail,\n  videoUrl,\n  title,\n  caption,\n  aspectRatio = \"16:9\",\n  className,\n}: CardVideoProps) {\n  const PlayIcon = useIcon(\"play\")\n  const card = (\n    <div className={cn(\"group overflow-hidden\", className)}>\n      <div className={cn(\"relative bg-muted\", aspectClasses[aspectRatio])}>\n        {thumbnail?.src ? (\n          <img\n            src={thumbnail.src}\n            alt={thumbnail.alt ?? title ?? \"\"}\n            className=\"size-full object-cover\"\n          />\n        ) : (\n          <div className=\"size-full bg-muted\" />\n        )}\n\n        {/* Play button overlay */}\n        <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30\">\n          <div className=\"flex size-14 items-center justify-center rounded-full bg-white/90 text-foreground transition-transform group-hover:scale-110\">\n            <PlayIcon className=\"ml-0.5 size-6 fill-current\" />\n          </div>\n        </div>\n      </div>\n\n      {(title || caption) && (\n        <div className=\"mt-3\">\n          {title && <p className=\"text-sm font-medium text-foreground\">{title}</p>}\n          {caption && <p className=\"mt-1 text-sm text-muted-foreground\">{caption}</p>}\n        </div>\n      )}\n    </div>\n  )\n\n  if (videoUrl) {\n    return (\n      <a href={videoUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"block\">\n        {card}\n      </a>\n    )\n  }\n\n  return card\n}\n\nexport { CardVideo, type CardVideoProps }\n"],"mappings":";;;;;AAKA,MAAM,gBAAwC;CAC5C,OAAO;CACP,OAAO;CACP,QAAQ;CACT;AAED,SAAS,UAAU,EACjB,WACA,UACA,OACA,SACA,cAAc,QACd,aACiB;CACjB,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,OACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,UAAU;YAAtD,CACE,qBAAC,OAAD;GAAK,WAAW,GAAG,qBAAqB,cAAc,aAAa;aAAnE,CACG,WAAW,MACV,oBAAC,OAAD;IACE,KAAK,UAAU;IACf,KAAK,UAAU,OAAO,SAAS;IAC/B,WAAU;IACV,CAAA,GAEF,oBAAC,OAAD,EAAK,WAAU,sBAAuB,CAAA,EAIxC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,UAAD,EAAU,WAAU,8BAA+B,CAAA;KAC/C,CAAA;IACF,CAAA,CACF;OAEJ,SAAS,YACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SAAS,oBAAC,KAAD;IAAG,WAAU;cAAuC;IAAU,CAAA,EACvE,WAAW,oBAAC,KAAD;IAAG,WAAU;cAAsC;IAAY,CAAA,CACvE;KAEJ;;AAGR,KAAI,SACF,QACE,oBAAC,KAAD;EAAG,MAAM;EAAU,QAAO;EAAS,KAAI;EAAsB,WAAU;YACpE;EACC,CAAA;AAIR,QAAO"}
+{"version":3,"file":"card-video.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/card-video.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { cn } from \"../../ui/utils\";\nimport type { CardVideoProps } from \"../types\";\n\nconst aspectClasses: Record<string, string> = {\n  \"4:3\": \"aspect-[4/3]\",\n  \"1:1\": \"aspect-square\",\n  \"16:9\": \"aspect-video\",\n};\n\nfunction CardVideo({\n  thumbnail,\n  videoUrl,\n  title,\n  caption,\n  aspectRatio = \"16:9\",\n  className,\n}: CardVideoProps) {\n  const PlayIcon = useIcon(\"play\");\n  const card = (\n    <div className={cn(\"group overflow-hidden\", className)}>\n      <div className={cn(\"relative bg-muted\", aspectClasses[aspectRatio])}>\n        {thumbnail?.src ? (\n          <img\n            src={thumbnail.src}\n            alt={thumbnail.alt ?? title ?? \"\"}\n            className=\"size-full object-cover\"\n          />\n        ) : (\n          <div className=\"size-full bg-muted\" />\n        )}\n\n        {/* Play button overlay */}\n        <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30\">\n          <div className=\"flex size-14 items-center justify-center rounded-full bg-white/90 text-foreground\">\n            <PlayIcon className=\"ml-0.5 size-6 fill-current\" />\n          </div>\n        </div>\n      </div>\n\n      {(title || caption) && (\n        <div className=\"mt-3\">\n          {title && <p className=\"text-sm font-medium text-foreground\">{title}</p>}\n          {caption && <p className=\"mt-1 text-sm text-muted-foreground\">{caption}</p>}\n        </div>\n      )}\n    </div>\n  );\n\n  if (videoUrl) {\n    return (\n      <a href={videoUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"block\">\n        {card}\n      </a>\n    );\n  }\n\n  return card;\n}\n\nexport { CardVideo, type CardVideoProps };\n"],"mappings":";;;;;AAKA,MAAM,gBAAwC;CAC5C,OAAO;CACP,OAAO;CACP,QAAQ;CACT;AAED,SAAS,UAAU,EACjB,WACA,UACA,OACA,SACA,cAAc,QACd,aACiB;CACjB,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,OACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,UAAU;YAAtD,CACE,qBAAC,OAAD;GAAK,WAAW,GAAG,qBAAqB,cAAc,aAAa;aAAnE,CACG,WAAW,MACV,oBAAC,OAAD;IACE,KAAK,UAAU;IACf,KAAK,UAAU,OAAO,SAAS;IAC/B,WAAU;IACV,CAAA,GAEF,oBAAC,OAAD,EAAK,WAAU,sBAAuB,CAAA,EAIxC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,UAAD,EAAU,WAAU,8BAA+B,CAAA;KAC/C,CAAA;IACF,CAAA,CACF;OAEJ,SAAS,YACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SAAS,oBAAC,KAAD;IAAG,WAAU;cAAuC;IAAU,CAAA,EACvE,WAAW,oBAAC,KAAD;IAAG,WAAU;cAAsC;IAAY,CAAA,CACvE;KAEJ;;AAGR,KAAI,SACF,QACE,oBAAC,KAAD;EAAG,MAAM;EAAU,QAAO;EAAS,KAAI;EAAsB,WAAU;YACpE;EACC,CAAA;AAIR,QAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"gallery-with-link-blocks.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/gallery-with-link-blocks.tsx"],"mappings":";;;;iBAIS,qBAAA,CAAA;EACP,OAAA;EACA,QAAA;EACA;AAAA,GACC,0BAAA,GAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"gallery-with-link-blocks.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/gallery-with-link-blocks.tsx"],"mappings":";;;;iBAKS,qBAAA,CAAA;EAAwB,OAAA;EAAS,QAAA;EAAU;AAAA,GAAa,0BAAA,GAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,4 +1,5 @@
 import { cn } from "../../ui/utils.mjs";
+import { Carousel, CarouselContent, CarouselItem } from "../../ui-resolver/carousel.mjs";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/blocks/gallery-with-link-blocks.tsx
@@ -17,11 +18,18 @@ function GalleryWithLinkBlocks({ heading, children, className }) {
 				children: heading
 			})
 		}), /* @__PURE__ */ jsx("div", {
-			className: "flex gap-4 overflow-x-auto px-4 scrollbar-none md:px-8",
-			children: React$1.Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
-				className: "w-52 shrink-0 sm:w-60 md:w-72 lg:w-80",
-				children: child
-			}))
+			className: "px-4 md:px-8",
+			children: /* @__PURE__ */ jsx(Carousel, {
+				opts: {
+					align: "start",
+					slidesToScroll: "auto",
+					containScroll: "trimSnaps"
+				},
+				children: /* @__PURE__ */ jsx(CarouselContent, { children: React$1.Children.map(children, (child, i) => /* @__PURE__ */ jsx(CarouselItem, {
+					className: "basis-auto w-52 sm:w-60 md:w-72 lg:w-80",
+					children: child
+				}, i)) })
+			})
 		})]
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"gallery-with-link-blocks.mjs","names":["React"],"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":";;;;AAIA,SAAS,sBAAsB,EAC7B,SACA,UACA,aAC6B;AAC7B,QACE,qBAAC,WAAD;EAAS,WAAW,GAAG,SAAS,UAAU;YAA1C,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,WACC,oBAAC,MAAD;IACE,WAAU;IACV,OAAO;KAAE,YAAY;KAA8B,eAAe;KAAgC,eAAe;KAAiC;cAEjJ;IACE,CAAA;GAEH,CAAA,EACN,oBAAC,OAAD;GAAK,WAAU;aACZA,QAAM,SAAS,IAAI,WAAW,UAC7B,oBAAC,OAAD;IAAK,WAAU;cAAyC;IAAY,CAAA,CACpE;GACE,CAAA,CACE"}
+{"version":3,"file":"gallery-with-link-blocks.mjs","names":["React"],"sources":["../../../../src/client/storefront/blocks/gallery-with-link-blocks.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { Carousel, CarouselContent, CarouselItem } from \"../../ui-resolver/carousel\";\nimport type { GalleryWithLinkBlocksProps } from \"../types\";\n\nfunction GalleryWithLinkBlocks({ heading, children, className }: 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={\n              {\n                fontWeight: \"var(--enad-heading-weight)\",\n                letterSpacing: \"var(--enad-heading-tracking)\",\n                textTransform: \"var(--enad-heading-transform)\",\n              } as unknown as React.CSSProperties\n            }\n          >\n            {heading}\n          </h2>\n        )}\n      </div>\n      <div className=\"px-4 md:px-8\">\n        <Carousel opts={{ align: \"start\", slidesToScroll: \"auto\", containScroll: \"trimSnaps\" }}>\n          <CarouselContent>\n            {React.Children.map(children, (child, i) => (\n              <CarouselItem key={i} className=\"basis-auto w-52 sm:w-60 md:w-72 lg:w-80\">\n                {child}\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n      </div>\n    </section>\n  );\n}\n\nexport { GalleryWithLinkBlocks, type GalleryWithLinkBlocksProps };\n"],"mappings":";;;;;AAKA,SAAS,sBAAsB,EAAE,SAAS,UAAU,aAAyC;AAC3F,QACE,qBAAC,WAAD;EAAS,WAAW,GAAG,SAAS,UAAU;YAA1C,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,WACC,oBAAC,MAAD;IACE,WAAU;IACV,OACE;KACE,YAAY;KACZ,eAAe;KACf,eAAe;KAChB;cAGF;IACE,CAAA;GAEH,CAAA,EACN,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,UAAD;IAAU,MAAM;KAAE,OAAO;KAAS,gBAAgB;KAAQ,eAAe;KAAa;cACpF,oBAAC,iBAAD,EAAA,UACGA,QAAM,SAAS,IAAI,WAAW,OAAO,MACpC,oBAAC,cAAD;KAAsB,WAAU;eAC7B;KACY,EAFI,EAEJ,CACf,EACc,CAAA;IACT,CAAA;GACP,CAAA,CACE"}

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

@@ -2,6 +2,15 @@ import { GalleryProps } from "../types.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/storefront/blocks/gallery.d.ts
+declare const galleryRecipe: (props?: ({
+  layout?: "grid" | "masonry" | "filmstrip" | undefined;
+} & {
+  className?: Partial<Record<"grid" | "root" | "heading", string>> | undefined;
+}) | undefined) => {
+  grid: string;
+  root: string;
+  heading: string;
+};
 declare function Gallery({
   heading,
   variant,
@@ -9,5 +18,5 @@ declare function Gallery({
   className
 }: GalleryProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-export { Gallery, type GalleryProps };
+export { Gallery, type GalleryProps, galleryRecipe };
 //# sourceMappingURL=gallery.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"gallery.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/gallery.tsx"],"mappings":";;;;iBAIS,OAAA,CAAA;EAAU,OAAA;EAAS,OAAA;EAAkB,QAAA;EAAU;AAAA,GAAa,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"gallery.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/gallery.tsx"],"mappings":";;;;cAOM,aAAA,GAAa,KAAA;;;cAqBjB,OAAA,CAAA,MAAA;AAAA;;;;;iBAQO,OAAA,CAAA;EAAU,OAAA;EAAS,OAAA;EAAS,QAAA;EAAU;AAAA,GAAa,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,54 +1,78 @@
 import { cn } from "../../ui/utils.mjs";
+import { defineSlotRecipe } from "../../ui-resolver/recipe.mjs";
+import { useVariantDefault } from "../../ui-resolver/context.mjs";
+import { Carousel, CarouselContent, CarouselItem } from "../../ui-resolver/carousel.mjs";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/blocks/gallery.tsx
-function Gallery({ heading, variant = "grid", children, className }) {
+const galleryRecipe = defineSlotRecipe({
+	slots: [
+		"root",
+		"heading",
+		"grid"
+	],
+	base: {
+		root: "px-4 py-12 md:px-8",
+		heading: "mb-6 text-2xl font-heading text-foreground md:text-3xl",
+		grid: ""
+	},
+	variants: { layout: {
+		grid: { grid: "grid gap-[var(--enad-gallery-gap,1rem)]" },
+		masonry: { grid: "columns-2 gap-[var(--enad-gallery-gap,1rem)] md:columns-3 [&>*]:mb-[var(--enad-gallery-gap,1rem)] [&>*]:break-inside-avoid" },
+		filmstrip: { grid: "flex gap-[var(--enad-gallery-gap,1rem)] 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" }
+	} },
+	defaultVariants: { layout: "grid" }
+});
+const headingStyle = {
+	fontWeight: "var(--enad-heading-weight)",
+	letterSpacing: "var(--enad-heading-tracking)",
+	textTransform: "var(--enad-heading-transform)"
+};
+function Gallery({ heading, variant, children, className }) {
+	const galleryDefault = useVariantDefault("gallery");
+	const layout = variant ?? galleryDefault ?? "grid";
 	const childCount = React$1.Children.count(children);
 	if (childCount === 0) return null;
+	const classes = galleryRecipe({ layout });
+	const gridColsClass = layout === "grid" ? childCount === 1 ? "grid-cols-1" : "grid-cols-2 md:grid-cols-3 lg:grid-cols-[repeat(var(--enad-gallery-columns,4),minmax(0,1fr))]" : "";
 	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)"
-		},
+		className: classes.heading,
+		style: headingStyle,
 		children: heading
 	}) : null;
-	if (variant === "masonry") return /* @__PURE__ */ jsx("section", {
-		className: cn("px-4 py-12 md:px-8", className),
+	if (layout === "filmstrip") return /* @__PURE__ */ jsx("section", {
+		className: cn(classes.root, 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",
+			children: [headingEl, /* @__PURE__ */ jsx(Carousel, {
+				opts: {
+					align: "start",
+					slidesToScroll: "auto",
+					containScroll: "trimSnaps"
+				},
 				"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
+				children: /* @__PURE__ */ jsx(CarouselContent, {
+					className: "-ml-[var(--enad-gallery-gap,1rem)]",
+					children: React$1.Children.map(children, (child, i) => /* @__PURE__ */ jsx(CarouselItem, {
+						className: "basis-auto pl-[var(--enad-gallery-gap,1rem)] w-64 md:w-80",
+						children: child
+					}, i))
+				})
 			})]
 		})
 	});
 	return /* @__PURE__ */ jsx("section", {
-		className: cn("px-4 py-12 md:px-8", className),
+		className: cn(classes.root, 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"),
+				className: cn(classes.grid, gridColsClass),
 				children
 			})]
 		})
 	});
 }
 //#endregion
-export { Gallery };
+export { Gallery, galleryRecipe };
 
 //# sourceMappingURL=gallery.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"gallery.mjs","names":["React"],"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":";;;;AAIA,SAAS,QAAQ,EAAE,SAAS,UAAU,QAAQ,UAAU,aAA2B;CACjF,MAAM,aAAaA,QAAM,SAAS,MAAM,SAAS;AAEjD,KAAI,eAAe,EAAG,QAAO;CAE7B,MAAM,YAAY,UAChB,oBAAC,MAAD;EACE,WAAU;EACV,OAAO;GAAE,YAAY;GAA8B,eAAe;GAAgC,eAAe;GAAiC;YAEjJ;EACE,CAAA,GACH;AAGJ,KAAI,YAAY,UACd,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,sBAAsB,UAAU;YACrD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,OAAD;IAAK,WAAU;IACZ;IACG,CAAA,CACF;;EACE,CAAA;AAKd,KAAI,YAAY,YACd,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,sBAAsB,UAAU;YACrD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,OAAD;IACE,MAAK;IACL,cAAY,WAAW;IACvB,UAAU;IACV,WAAU;IAET;IACG,CAAA,CACF;;EACE,CAAA;AAKd,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,sBAAsB,UAAU;YACrD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,OAAD;IAAK,WAAW,GACd,cACA,eAAe,IACX,gBACA,4CACL;IACE;IACG,CAAA,CACF;;EACE,CAAA"}
+{"version":3,"file":"gallery.mjs","names":["React"],"sources":["../../../../src/client/storefront/blocks/gallery.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { Carousel, CarouselContent, CarouselItem } from \"../../ui-resolver/carousel\";\nimport { defineSlotRecipe } from \"../../ui-resolver/recipe\";\nimport { useVariantDefault } from \"../../ui-resolver/context\";\nimport type { GalleryProps } from \"../types\";\n\nconst galleryRecipe = defineSlotRecipe({\n  slots: [\"root\", \"heading\", \"grid\"] as const,\n  base: {\n    root: \"px-4 py-12 md:px-8\",\n    heading: \"mb-6 text-2xl font-heading text-foreground md:text-3xl\",\n    grid: \"\",\n  },\n  variants: {\n    layout: {\n      grid: {\n        grid: \"grid gap-[var(--enad-gallery-gap,1rem)]\",\n      },\n      masonry: {\n        grid: \"columns-2 gap-[var(--enad-gallery-gap,1rem)] md:columns-3 [&>*]:mb-[var(--enad-gallery-gap,1rem)] [&>*]:break-inside-avoid\",\n      },\n      filmstrip: {\n        grid: \"flex gap-[var(--enad-gallery-gap,1rem)] 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    },\n  },\n  defaultVariants: { layout: \"grid\" },\n});\n\nconst headingStyle = {\n  fontWeight: \"var(--enad-heading-weight)\",\n  letterSpacing: \"var(--enad-heading-tracking)\",\n  textTransform: \"var(--enad-heading-transform)\",\n} as unknown as React.CSSProperties;\n\nfunction Gallery({ heading, variant, children, className }: GalleryProps) {\n  const galleryDefault = useVariantDefault(\"gallery\");\n  const layout = variant ?? galleryDefault ?? \"grid\";\n  const childCount = React.Children.count(children);\n\n  if (childCount === 0) return null;\n\n  const classes = galleryRecipe({ layout });\n\n  const gridColsClass =\n    layout === \"grid\"\n      ? childCount === 1\n        ? \"grid-cols-1\"\n        : \"grid-cols-2 md:grid-cols-3 lg:grid-cols-[repeat(var(--enad-gallery-columns,4),minmax(0,1fr))]\"\n      : \"\";\n\n  const headingEl = heading ? (\n    <h2 className={classes.heading} style={headingStyle}>\n      {heading}\n    </h2>\n  ) : null;\n\n  if (layout === \"filmstrip\") {\n    return (\n      <section className={cn(classes.root, className)}>\n        <div className=\"mx-auto max-w-7xl\">\n          {headingEl}\n          <Carousel\n            opts={{ align: \"start\", slidesToScroll: \"auto\", containScroll: \"trimSnaps\" }}\n            aria-label={heading ?? \"Gallery\"}\n          >\n            <CarouselContent className=\"-ml-[var(--enad-gallery-gap,1rem)]\">\n              {React.Children.map(children, (child, i) => (\n                <CarouselItem\n                  key={i}\n                  className=\"basis-auto pl-[var(--enad-gallery-gap,1rem)] w-64 md:w-80\"\n                >\n                  {child}\n                </CarouselItem>\n              ))}\n            </CarouselContent>\n          </Carousel>\n        </div>\n      </section>\n    );\n  }\n\n  return (\n    <section className={cn(classes.root, className)}>\n      <div className=\"mx-auto max-w-7xl\">\n        {headingEl}\n        <div className={cn(classes.grid, gridColsClass)}>{children}</div>\n      </div>\n    </section>\n  );\n}\n\nexport { Gallery, galleryRecipe, type GalleryProps };\n"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB,iBAAiB;CACrC,OAAO;EAAC;EAAQ;EAAW;EAAO;CAClC,MAAM;EACJ,MAAM;EACN,SAAS;EACT,MAAM;EACP;CACD,UAAU,EACR,QAAQ;EACN,MAAM,EACJ,MAAM,2CACP;EACD,SAAS,EACP,MAAM,8HACP;EACD,WAAW,EACT,MAAM,6PACP;EACF,EACF;CACD,iBAAiB,EAAE,QAAQ,QAAQ;CACpC,CAAC;AAEF,MAAM,eAAe;CACnB,YAAY;CACZ,eAAe;CACf,eAAe;CAChB;AAED,SAAS,QAAQ,EAAE,SAAS,SAAS,UAAU,aAA2B;CACxE,MAAM,iBAAiB,kBAAkB,UAAU;CACnD,MAAM,SAAS,WAAW,kBAAkB;CAC5C,MAAM,aAAaA,QAAM,SAAS,MAAM,SAAS;AAEjD,KAAI,eAAe,EAAG,QAAO;CAE7B,MAAM,UAAU,cAAc,EAAE,QAAQ,CAAC;CAEzC,MAAM,gBACJ,WAAW,SACP,eAAe,IACb,gBACA,kGACF;CAEN,MAAM,YAAY,UAChB,oBAAC,MAAD;EAAI,WAAW,QAAQ;EAAS,OAAO;YACpC;EACE,CAAA,GACH;AAEJ,KAAI,WAAW,YACb,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,QAAQ,MAAM,UAAU;YAC7C,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,UAAD;IACE,MAAM;KAAE,OAAO;KAAS,gBAAgB;KAAQ,eAAe;KAAa;IAC5E,cAAY,WAAW;cAEvB,oBAAC,iBAAD;KAAiB,WAAU;eACxBA,QAAM,SAAS,IAAI,WAAW,OAAO,MACpC,oBAAC,cAAD;MAEE,WAAU;gBAET;MACY,EAJR,EAIQ,CACf;KACc,CAAA;IACT,CAAA,CACP;;EACE,CAAA;AAId,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,QAAQ,MAAM,UAAU;YAC7C,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,OAAD;IAAK,WAAW,GAAG,QAAQ,MAAM,cAAc;IAAG;IAAe,CAAA,CAC7D;;EACE,CAAA"}

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

@@ -2,7 +2,18 @@ import { HeroProps } from "../types.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/storefront/blocks/hero.d.ts
+declare const heroRecipe: (props?: ({
+  layout?: "overlay" | "minimal" | "split" | "banner" | "image-only" | undefined;
+  contentWidth?: "sm" | "md" | "lg" | undefined;
+} & {
+  className?: Partial<Record<"overlay" | "root" | "content" | "background", string>> | undefined;
+}) | undefined) => {
+  overlay: string;
+  root: string;
+  content: string;
+  background: string;
+};
 declare function Hero(props: HeroProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Hero, type HeroProps };
+export { Hero, type HeroProps, heroRecipe };
 //# sourceMappingURL=hero.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/hero.tsx"],"mappings":";;;;iBA4bS,IAAA,CAAK,KAAA,EAAO,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"hero.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/hero.tsx"],"mappings":";;;;cAkBM,UAAA,GAAU,KAAA;;;;cAoCd,OAAA,CAAA,MAAA;AAAA;;;;;;iBAgTO,IAAA,CAAK,KAAA,EAAO,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}