@enadhq/enad-react-sdk 1.2.0 → 1.3.0

package/dist/client/storefront/blocks/product-card-parts.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"product-card-parts.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/product-card-parts.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\n\n/* ─── ProductCard compound sub-components ─── */\n\n/**\n * Root container for a composable product card.\n * Provides group context for hover effects and overflow handling.\n */\nfunction ProductCardRoot({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"product-card\"\n      className={cn(\n        \"enad-interactive group overflow-hidden rounded-[var(--enad-card-radius)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Container for the product image area.\n * Use as a wrapper for ProductCardImage, ProductCardTag, and ProductCardFavoriteButton.\n */\nfunction ProductCardImageArea({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"product-card-image-area\"\n      className={cn(\"relative bg-muted\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Product image with lazy loading.\n */\nfunction ProductCardImage({\n  className,\n  alt = \"\",\n  loading = \"lazy\",\n  ...props\n}: React.ComponentProps<\"img\">) {\n  return (\n    <img\n      data-slot=\"product-card-image\"\n      alt={alt}\n      loading={loading}\n      className={cn(\"size-full object-cover\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Badge overlay for product status (Sale, New, etc.).\n * Positioned absolutely within ProductCardImageArea by default.\n */\nfunction ProductCardTag({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"product-card-tag\"\n      className={cn(\n        \"absolute start-3 top-3 rounded-[var(--enad-card-radius)] bg-background/90 px-2 py-0.5 text-xs font-medium text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Favorite/wishlist toggle button.\n * Stops event propagation by default (safe inside links).\n */\nfunction ProductCardFavoriteButton({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"product-card-favorite\"\n      className={cn(\n        \"rounded-full bg-background/80 p-1.5 text-foreground transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        className,\n      )}\n      aria-label=\"Add to favorites\"\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n}\n\n/**\n * Container for product text content (title, subtitle, price).\n */\nfunction ProductCardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"product-card-content\"\n      className={cn(\"flex min-w-0 flex-col gap-0.5 p-3\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Product name / title.\n */\nfunction ProductCardTitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"product-card-title\"\n      className={cn(\"line-clamp-2 text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Secondary text (category, brand, etc.).\n */\nfunction ProductCardSubtitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"product-card-subtitle\"\n      className={cn(\"truncate text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Price display.\n */\nfunction ProductCardPrice({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"product-card-price\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ProductCardRoot,\n  ProductCardImageArea,\n  ProductCardImage,\n  ProductCardTag,\n  ProductCardFavoriteButton,\n  ProductCardContent,\n  ProductCardTitle,\n  ProductCardSubtitle,\n  ProductCardPrice,\n};\n"],"mappings":";;;;;;;;;AAWA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;AAC7E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4EACA,UACD;EACD,GAAI;EACJ,CAAA;;;;;;AAQN,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAsC;AAClF,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qBAAqB,UAAU;EAC7C,GAAI;EACJ,CAAA;;;;;AAON,SAAS,iBAAiB,EACxB,WACA,MAAM,IACN,UAAU,QACV,GAAG,SAC2B;AAC9B,QACE,oBAAC,OAAD;EACE,aAAU;EACL;EACI;EACT,WAAW,GAAG,0BAA0B,UAAU;EAClD,GAAI;EACJ,CAAA;;;;;;AAQN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,6HACA,UACD;EACD,GAAI;EACJ,CAAA;;;;;;AAQN,SAAS,0BAA0B,EACjC,WACA,SACA,GAAG,SAC8B;AACjC,QACE,oBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GACT,qKACA,UACD;EACD,cAAW;EACX,UAAU,MAAM;AACd,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;AACnB,aAAU,EAAE;;EAEd,GAAI;EACJ,CAAA;;;;;AAON,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;AAChF,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;;;;AAON,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;AAC5E,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,oDAAoD,UAAU;EAC5E,GAAI;EACJ,CAAA;;;;;AAON,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAoC;AAC/E,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,0CAA0C,UAAU;EAClE,GAAI;EACJ,CAAA;;;;;AAON,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAuC;AAC/E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA"}
+{"version":3,"file":"product-card-parts.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/product-card-parts.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\n\n/* ─── ProductCard compound sub-components ─── */\n\n/**\n * Root container for a composable product card.\n * Provides grouping and overflow handling for composed layouts.\n */\nfunction ProductCardRoot({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"product-card\"\n      className={cn(\"group overflow-hidden rounded-[var(--enad-card-radius)]\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Container for the product image area.\n * Use as a wrapper for ProductCardImage, ProductCardTag, and ProductCardFavoriteButton.\n */\nfunction ProductCardImageArea({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"product-card-image-area\"\n      className={cn(\"relative bg-muted\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Product image with lazy loading.\n */\nfunction ProductCardImage({\n  className,\n  alt = \"\",\n  loading = \"lazy\",\n  ...props\n}: React.ComponentProps<\"img\">) {\n  return (\n    <img\n      data-slot=\"product-card-image\"\n      alt={alt}\n      loading={loading}\n      className={cn(\"size-full object-cover\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Badge overlay for product status (Sale, New, etc.).\n * Positioned absolutely within ProductCardImageArea by default.\n */\nfunction ProductCardTag({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"product-card-tag\"\n      className={cn(\n        \"absolute start-3 top-3 rounded-[var(--enad-card-radius)] bg-background/90 px-2 py-0.5 text-xs font-medium text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Favorite/wishlist toggle button.\n * Stops event propagation by default (safe inside links).\n */\nfunction ProductCardFavoriteButton({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"product-card-favorite\"\n      className={cn(\n        \"rounded-full bg-background/80 p-1.5 text-foreground transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        className,\n      )}\n      aria-label=\"Add to favorites\"\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n}\n\n/**\n * Container for product text content (title, subtitle, price).\n */\nfunction ProductCardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"product-card-content\"\n      className={cn(\"flex min-w-0 flex-col gap-0.5 p-3\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Product name / title.\n */\nfunction ProductCardTitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"product-card-title\"\n      className={cn(\"line-clamp-2 text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Secondary text (category, brand, etc.).\n */\nfunction ProductCardSubtitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"product-card-subtitle\"\n      className={cn(\"truncate text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Price display.\n */\nfunction ProductCardPrice({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"product-card-price\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ProductCardRoot,\n  ProductCardImageArea,\n  ProductCardImage,\n  ProductCardTag,\n  ProductCardFavoriteButton,\n  ProductCardContent,\n  ProductCardTitle,\n  ProductCardSubtitle,\n  ProductCardPrice,\n};\n"],"mappings":";;;;;;;;;AAWA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;AAC7E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2DAA2D,UAAU;EACnF,GAAI;EACJ,CAAA;;;;;;AAQN,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAsC;AAClF,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qBAAqB,UAAU;EAC7C,GAAI;EACJ,CAAA;;;;;AAON,SAAS,iBAAiB,EACxB,WACA,MAAM,IACN,UAAU,QACV,GAAG,SAC2B;AAC9B,QACE,oBAAC,OAAD;EACE,aAAU;EACL;EACI;EACT,WAAW,GAAG,0BAA0B,UAAU;EAClD,GAAI;EACJ,CAAA;;;;;;AAQN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,6HACA,UACD;EACD,GAAI;EACJ,CAAA;;;;;;AAQN,SAAS,0BAA0B,EACjC,WACA,SACA,GAAG,SAC8B;AACjC,QACE,oBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GACT,qKACA,UACD;EACD,cAAW;EACX,UAAU,MAAM;AACd,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;AACnB,aAAU,EAAE;;EAEd,GAAI;EACJ,CAAA;;;;;AAON,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;AAChF,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;;;;AAON,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;AAC5E,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,oDAAoD,UAAU;EAC5E,GAAI;EACJ,CAAA;;;;;AAON,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAoC;AAC/E,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,0CAA0C,UAAU;EAClE,GAAI;EACJ,CAAA;;;;;AAON,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAuC;AAC/E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA"}

package/dist/client/storefront/blocks/product-card.d.ts

@@ -2,7 +2,16 @@ import { ProductCardProps } from "../types.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/storefront/blocks/product-card.d.ts
+declare const productCardRecipe: (props?: ({
+  layout?: "gallery" | "list" | "minimal" | "horizontal" | "stripped" | undefined;
+} & {
+  className?: Partial<Record<"root" | "content" | "imageWrapper", string>> | undefined;
+}) | undefined) => {
+  root: string;
+  content: string;
+  imageWrapper: string;
+};
 declare function ProductCard(props: ProductCardProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { ProductCard, type ProductCardProps };
+export { ProductCard, type ProductCardProps, productCardRecipe };
 //# sourceMappingURL=product-card.d.ts.map

package/dist/client/storefront/blocks/product-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-card.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/product-card.tsx"],"mappings":";;;;iBAoSS,WAAA,CAAY,KAAA,EAAO,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"product-card.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/product-card.tsx"],"mappings":";;;;cAuBM,iBAAA,GAAiB,KAAA;;;cAmCrB,OAAA,CAAA,MAAA;AAAA;;;;;iBAgQO,WAAA,CAAY,KAAA,EAAO,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,12 +1,50 @@
 "use client";
 import { useIcon } from "../../icons/icon-context.mjs";
 import { cn } from "../../ui/utils.mjs";
+import { defineSlotRecipe } from "../../ui-resolver/recipe.mjs";
 import { useVariantDefault } from "../../ui-resolver/context.mjs";
 import { SwipeableCarousel } from "../carousel/swipeable-carousel.mjs";
 import { ProductCardContent, ProductCardFavoriteButton, ProductCardImage, ProductCardImageArea, ProductCardPrice, ProductCardRoot, ProductCardSubtitle, ProductCardTag, ProductCardTitle } from "./product-card-parts.mjs";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/blocks/product-card.tsx
+const productCardRecipe = defineSlotRecipe({
+	slots: [
+		"root",
+		"imageWrapper",
+		"content"
+	],
+	base: {
+		root: "",
+		imageWrapper: "relative",
+		content: ""
+	},
+	variants: { layout: {
+		gallery: {
+			root: "shadow-none",
+			content: "flex min-w-0 flex-col gap-[var(--enad-product-card-content-gap,0.125rem)] p-[var(--enad-product-card-content-py,0.75rem)]"
+		},
+		horizontal: {
+			root: "flex shadow-[var(--enad-card-shadow)]",
+			imageWrapper: "w-1/3 shrink-0",
+			content: "flex min-w-0 flex-1 flex-col justify-center gap-0 p-4 md:p-6"
+		},
+		minimal: {
+			root: "relative",
+			content: ""
+		},
+		list: {
+			root: "flex shadow-none",
+			imageWrapper: "w-32 shrink-0",
+			content: "flex min-w-0 flex-1 flex-col justify-center p-4"
+		},
+		stripped: {
+			root: "rounded-none shadow-none",
+			content: ""
+		}
+	} },
+	defaultVariants: { layout: "gallery" }
+});
 function OptionalLink({ href, radiusClass, children }) {
 	if (!href) return children;
 	return /* @__PURE__ */ jsx("a", {
@@ -29,40 +67,95 @@ function GalleryImageArea({ imageElements, fallback, showPaginationDots }) {
 	if (imageElements.length === 1) return imageElements[0];
 	return fallback;
 }
-function HorizontalCard({ images = [], title, subtitle, price, tag, href, showFavorites = false, onFavoriteClick, className, HeartIcon }) {
+function VerticalCard({ images = [], title, subtitle, price, tag, href, layout = "gallery", showFavorites = false, showPaginationDots = true, onFavoriteClick, className, HeartIcon }) {
+	const classes = productCardRecipe({ layout });
+	const isStripped = layout === "stripped";
+	const imageElements = images.map((img, i) => /* @__PURE__ */ jsx(ProductCardImageArea, {
+		className: "aspect-[var(--enad-image-product-aspect)]",
+		children: /* @__PURE__ */ jsx(ProductCardImage, {
+			src: img.src,
+			alt: img.alt ?? title ?? ""
+		})
+	}, i));
 	return /* @__PURE__ */ jsx(OptionalLink, {
 		href,
 		children: /* @__PURE__ */ jsxs(ProductCardRoot, {
-			className: cn("flex shadow-[var(--enad-card-shadow)] transition-shadow duration-[var(--enad-motion-duration)] hover:shadow-[var(--enad-card-hover-shadow)]", className),
+			className: cn(classes.root, className),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: classes.imageWrapper,
+				children: isStripped ? /* @__PURE__ */ jsx("div", {
+					className: "overflow-hidden",
+					children: images[0] ? /* @__PURE__ */ jsx(ProductCardImageArea, {
+						className: "aspect-[var(--enad-image-product-aspect)]",
+						children: /* @__PURE__ */ jsx(ProductCardImage, {
+							src: images[0].src,
+							alt: images[0].alt ?? title ?? ""
+						})
+					}) : /* @__PURE__ */ jsx(FallbackImage, {})
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(GalleryImageArea, {
+						imageElements,
+						fallback: /* @__PURE__ */ jsx(FallbackImage, {}),
+						showPaginationDots
+					}),
+					tag && /* @__PURE__ */ jsx(ProductCardTag, { children: tag }),
+					showFavorites && /* @__PURE__ */ jsx(ProductCardFavoriteButton, {
+						className: "absolute end-3 top-3",
+						onClick: () => onFavoriteClick?.(),
+						children: /* @__PURE__ */ jsx(HeartIcon, { className: "size-4" })
+					})
+				] })
+			}), isStripped ? /* @__PURE__ */ jsxs(Fragment, { children: [title && /* @__PURE__ */ jsx(ProductCardTitle, {
+				className: "mt-2",
+				children: title
+			}), price && /* @__PURE__ */ jsx(ProductCardPrice, {
+				className: "text-muted-foreground",
+				children: price
+			})] }) : /* @__PURE__ */ jsxs(ProductCardContent, {
+				className: classes.content,
+				children: [
+					title && /* @__PURE__ */ jsx(ProductCardTitle, { children: title }),
+					subtitle && /* @__PURE__ */ jsx(ProductCardSubtitle, { children: subtitle }),
+					price && /* @__PURE__ */ jsx(ProductCardPrice, { children: price })
+				]
+			})]
+		})
+	});
+}
+function HorizontalCardLayout({ images = [], title, subtitle, price, tag, href, layout = "horizontal", showFavorites = false, onFavoriteClick, className, HeartIcon }) {
+	const classes = productCardRecipe({ layout });
+	return /* @__PURE__ */ jsx(OptionalLink, {
+		href,
+		children: /* @__PURE__ */ jsxs(ProductCardRoot, {
+			className: cn(classes.root, className),
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "relative w-1/3 shrink-0",
+				className: classes.imageWrapper,
 				children: [images[0] ? /* @__PURE__ */ jsx(ProductCardImageArea, {
 					className: "aspect-[var(--enad-image-product-aspect)]",
 					children: /* @__PURE__ */ jsx(ProductCardImage, {
 						src: images[0].src,
-						alt: images[0].alt ?? title ?? "",
-						className: "transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]"
+						alt: images[0].alt ?? title ?? ""
 					})
-				}) : /* @__PURE__ */ jsx(FallbackImage, {}), tag && /* @__PURE__ */ jsx(ProductCardTag, {
+				}) : /* @__PURE__ */ jsx(FallbackImage, {}), tag && layout === "horizontal" && /* @__PURE__ */ jsx(ProductCardTag, {
 					className: "start-2 top-2",
 					children: tag
 				})]
 			}), /* @__PURE__ */ jsxs(ProductCardContent, {
-				className: "flex-1 justify-center gap-0 p-4 md:p-6",
+				className: classes.content,
 				children: [
 					title && /* @__PURE__ */ jsx(ProductCardTitle, {
-						className: "text-base",
+						className: layout === "horizontal" ? "text-base" : void 0,
 						children: title
 					}),
 					subtitle && /* @__PURE__ */ jsx(ProductCardSubtitle, {
-						className: "mt-1",
+						className: layout === "horizontal" ? "mt-1" : "mt-0.5",
 						children: subtitle
 					}),
 					price && /* @__PURE__ */ jsx(ProductCardPrice, {
-						className: "mt-2 text-base",
+						className: layout === "horizontal" ? "mt-2 text-base" : "mt-1",
 						children: price
 					}),
-					showFavorites && /* @__PURE__ */ jsx(ProductCardFavoriteButton, {
+					showFavorites && layout === "horizontal" && /* @__PURE__ */ jsx(ProductCardFavoriteButton, {
 						className: "mt-3 self-start bg-muted hover:bg-accent",
 						onClick: () => onFavoriteClick?.(),
 						children: /* @__PURE__ */ jsx(HeartIcon, { className: "size-4" })
@@ -77,14 +170,13 @@ function MinimalCard({ images = [], title, price, tag, href, showFavorites = fal
 		href,
 		radiusClass: "rounded-[var(--enad-card-radius)]",
 		children: /* @__PURE__ */ jsxs(ProductCardRoot, {
-			className: cn("relative", className),
+			className: cn(productCardRecipe({ layout: "minimal" }).root, className),
 			children: [
 				images[0] ? /* @__PURE__ */ jsx(ProductCardImageArea, {
 					className: "aspect-[var(--enad-image-product-aspect)]",
 					children: /* @__PURE__ */ jsx(ProductCardImage, {
 						src: images[0].src,
-						alt: images[0].alt ?? title ?? "",
-						className: "transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]"
+						alt: images[0].alt ?? title ?? ""
 					})
 				}) : /* @__PURE__ */ jsx(FallbackImage, {}),
 				tag && /* @__PURE__ */ jsx(ProductCardTag, {
@@ -97,7 +189,7 @@ function MinimalCard({ images = [], title, price, tag, href, showFavorites = fal
 					children: /* @__PURE__ */ jsx(HeartIcon, { className: "size-4" })
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "absolute inset-x-0 bottom-0 min-w-0 translate-y-full p-4 transition-transform duration-[var(--enad-motion-duration)] group-hover:translate-y-0",
+					className: "absolute inset-x-0 bottom-0 min-w-0 p-4",
 					style: { background: "linear-gradient(to top, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), transparent)" },
 					children: [title && /* @__PURE__ */ jsx(ProductCardTitle, {
 						className: "text-white",
@@ -111,101 +203,6 @@ function MinimalCard({ images = [], title, price, tag, href, showFavorites = fal
 		})
 	});
 }
-function ListCard({ images = [], title, subtitle, price, href, className }) {
-	return /* @__PURE__ */ jsx(OptionalLink, {
-		href,
-		children: /* @__PURE__ */ jsxs(ProductCardRoot, {
-			className: cn("flex shadow-none", className),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "w-32 shrink-0",
-				children: images[0] ? /* @__PURE__ */ jsx(ProductCardImageArea, {
-					className: "aspect-[var(--enad-image-product-aspect)]",
-					children: /* @__PURE__ */ jsx(ProductCardImage, {
-						src: images[0].src,
-						alt: images[0].alt ?? title ?? ""
-					})
-				}) : /* @__PURE__ */ jsx(FallbackImage, {})
-			}), /* @__PURE__ */ jsxs(ProductCardContent, {
-				className: "flex-1 justify-center p-4",
-				children: [
-					title && /* @__PURE__ */ jsx(ProductCardTitle, { children: title }),
-					subtitle && /* @__PURE__ */ jsx(ProductCardSubtitle, {
-						className: "mt-0.5",
-						children: subtitle
-					}),
-					price && /* @__PURE__ */ jsx(ProductCardPrice, {
-						className: "mt-1",
-						children: price
-					})
-				]
-			})]
-		})
-	});
-}
-function StrippedCard({ images = [], title, price, href, className }) {
-	return /* @__PURE__ */ jsx(OptionalLink, {
-		href,
-		children: /* @__PURE__ */ jsxs(ProductCardRoot, {
-			className: cn("rounded-none shadow-none", className),
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "relative overflow-hidden",
-					children: images[0] ? /* @__PURE__ */ jsx(ProductCardImageArea, {
-						className: "aspect-[var(--enad-image-product-aspect)]",
-						children: /* @__PURE__ */ jsx(ProductCardImage, {
-							src: images[0].src,
-							alt: images[0].alt ?? title ?? "",
-							className: "transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]"
-						})
-					}) : /* @__PURE__ */ jsx(FallbackImage, {})
-				}),
-				title && /* @__PURE__ */ jsx(ProductCardTitle, {
-					className: "mt-2",
-					children: title
-				}),
-				price && /* @__PURE__ */ jsx(ProductCardPrice, {
-					className: "text-muted-foreground",
-					children: price
-				})
-			]
-		})
-	});
-}
-function GalleryCard({ images = [], title, subtitle, price, tag, href, showFavorites = false, showPaginationDots = true, onFavoriteClick, className, HeartIcon }) {
-	const imageElements = images.map((img, i) => /* @__PURE__ */ jsx(ProductCardImageArea, {
-		className: "aspect-[var(--enad-image-product-aspect)]",
-		children: /* @__PURE__ */ jsx(ProductCardImage, {
-			src: img.src,
-			alt: img.alt ?? title ?? ""
-		})
-	}, i));
-	return /* @__PURE__ */ jsx(OptionalLink, {
-		href,
-		children: /* @__PURE__ */ jsxs(ProductCardRoot, {
-			className: cn("shadow-none", className),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "relative",
-				children: [
-					/* @__PURE__ */ jsx(GalleryImageArea, {
-						imageElements,
-						fallback: /* @__PURE__ */ jsx(FallbackImage, {}),
-						showPaginationDots
-					}),
-					tag && /* @__PURE__ */ jsx(ProductCardTag, { children: tag }),
-					showFavorites && /* @__PURE__ */ jsx(ProductCardFavoriteButton, {
-						className: "absolute end-3 top-3",
-						onClick: () => onFavoriteClick?.(),
-						children: /* @__PURE__ */ jsx(HeartIcon, { className: "size-4" })
-					})
-				]
-			}), /* @__PURE__ */ jsxs(ProductCardContent, { children: [
-				title && /* @__PURE__ */ jsx(ProductCardTitle, { children: title }),
-				subtitle && /* @__PURE__ */ jsx(ProductCardSubtitle, { children: subtitle }),
-				price && /* @__PURE__ */ jsx(ProductCardPrice, { children: price })
-			] })]
-		})
-	});
-}
 function ProductCard(props) {
 	const cardDefault = useVariantDefault("productCard");
 	const HeartIcon = useIcon("heart");
@@ -215,14 +212,23 @@ function ProductCard(props) {
 		HeartIcon
 	};
 	switch (layout) {
-		case "horizontal": return /* @__PURE__ */ jsx(HorizontalCard, { ...layoutProps });
+		case "horizontal":
+		case "list": return /* @__PURE__ */ jsx(HorizontalCardLayout, {
+			...layoutProps,
+			layout
+		});
 		case "minimal": return /* @__PURE__ */ jsx(MinimalCard, { ...layoutProps });
-		case "list": return /* @__PURE__ */ jsx(ListCard, { ...layoutProps });
-		case "stripped": return /* @__PURE__ */ jsx(StrippedCard, { ...layoutProps });
-		default: return /* @__PURE__ */ jsx(GalleryCard, { ...layoutProps });
+		case "stripped": return /* @__PURE__ */ jsx(VerticalCard, {
+			...layoutProps,
+			layout: "stripped"
+		});
+		default: return /* @__PURE__ */ jsx(VerticalCard, {
+			...layoutProps,
+			layout: "gallery"
+		});
 	}
 }
 //#endregion
-export { ProductCard };
+export { ProductCard, productCardRecipe };
 
 //# sourceMappingURL=product-card.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"product-card.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/product-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { cn } from \"../../ui/utils\";\nimport { useVariantDefault } from \"../../ui-resolver/context\";\nimport { SwipeableCarousel } from \"../carousel/swipeable-carousel\";\nimport type { ProductCardProps } from \"../types\";\nimport {\n  ProductCardContent,\n  ProductCardFavoriteButton,\n  ProductCardImage,\n  ProductCardImageArea,\n  ProductCardPrice,\n  ProductCardRoot,\n  ProductCardSubtitle,\n  ProductCardTag,\n  ProductCardTitle,\n} from \"./product-card-parts\";\n\n/* ─── Shared helpers ─── */\n\ntype CardLayoutProps = ProductCardProps & {\n  HeartIcon: React.ComponentType<{ className?: string }>;\n};\n\nfunction OptionalLink({\n  href,\n  radiusClass,\n  children,\n}: {\n  href?: string;\n  radiusClass?: string;\n  children: React.ReactNode;\n}) {\n  if (!href) return children;\n  return (\n    <a\n      href={href}\n      className={cn(\n        \"block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        radiusClass,\n      )}\n    >\n      {children}\n    </a>\n  );\n}\n\nfunction FallbackImage() {\n  return (\n    <ProductCardImageArea\n      className=\"aspect-[var(--enad-image-product-aspect)]\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n/* ─── Gallery image element helper ─── */\n\nfunction GalleryImageArea({\n  imageElements,\n  fallback,\n  showPaginationDots,\n}: {\n  imageElements: React.ReactNode[];\n  fallback: React.ReactNode;\n  showPaginationDots: boolean;\n}) {\n  if (imageElements.length > 1) {\n    return <SwipeableCarousel items={imageElements} showDots={showPaginationDots} />;\n  }\n  if (imageElements.length === 1) {\n    return imageElements[0];\n  }\n  return fallback;\n}\n\n/* ─── Horizontal layout ─── */\n\nfunction HorizontalCard({\n  images = [],\n  title,\n  subtitle,\n  price,\n  tag,\n  href,\n  showFavorites = false,\n  onFavoriteClick,\n  className,\n  HeartIcon,\n}: CardLayoutProps) {\n  const content = (\n    <ProductCardRoot\n      className={cn(\n        \"flex shadow-[var(--enad-card-shadow)] transition-shadow duration-[var(--enad-motion-duration)] hover:shadow-[var(--enad-card-hover-shadow)]\",\n        className,\n      )}\n    >\n      <div className=\"relative w-1/3 shrink-0\">\n        {images[0] ? (\n          <ProductCardImageArea className=\"aspect-[var(--enad-image-product-aspect)]\">\n            <ProductCardImage\n              src={images[0].src}\n              alt={images[0].alt ?? title ?? \"\"}\n              className=\"transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n            />\n          </ProductCardImageArea>\n        ) : (\n          <FallbackImage />\n        )}\n        {tag && <ProductCardTag className=\"start-2 top-2\">{tag}</ProductCardTag>}\n      </div>\n      <ProductCardContent className=\"flex-1 justify-center gap-0 p-4 md:p-6\">\n        {title && <ProductCardTitle className=\"text-base\">{title}</ProductCardTitle>}\n        {subtitle && <ProductCardSubtitle className=\"mt-1\">{subtitle}</ProductCardSubtitle>}\n        {price && <ProductCardPrice className=\"mt-2 text-base\">{price}</ProductCardPrice>}\n        {showFavorites && (\n          <ProductCardFavoriteButton\n            className=\"mt-3 self-start bg-muted hover:bg-accent\"\n            onClick={() => onFavoriteClick?.()}\n          >\n            <HeartIcon className=\"size-4\" />\n          </ProductCardFavoriteButton>\n        )}\n      </ProductCardContent>\n    </ProductCardRoot>\n  );\n  return <OptionalLink href={href}>{content}</OptionalLink>;\n}\n\n/* ─── Minimal layout ─── */\n\nfunction MinimalCard({\n  images = [],\n  title,\n  price,\n  tag,\n  href,\n  showFavorites = false,\n  onFavoriteClick,\n  className,\n  HeartIcon,\n}: CardLayoutProps) {\n  const content = (\n    <ProductCardRoot className={cn(\"relative\", className)}>\n      {images[0] ? (\n        <ProductCardImageArea className=\"aspect-[var(--enad-image-product-aspect)]\">\n          <ProductCardImage\n            src={images[0].src}\n            alt={images[0].alt ?? title ?? \"\"}\n            className=\"transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n          />\n        </ProductCardImageArea>\n      ) : (\n        <FallbackImage />\n      )}\n\n      {tag && <ProductCardTag className=\"z-10\">{tag}</ProductCardTag>}\n\n      {showFavorites && (\n        <ProductCardFavoriteButton\n          className=\"absolute end-3 top-3 z-10\"\n          onClick={() => onFavoriteClick?.()}\n        >\n          <HeartIcon className=\"size-4\" />\n        </ProductCardFavoriteButton>\n      )}\n\n      {/* Hover overlay with product info */}\n      <div\n        className=\"absolute inset-x-0 bottom-0 min-w-0 translate-y-full p-4 transition-transform duration-[var(--enad-motion-duration)] group-hover:translate-y-0\"\n        style={{\n          background:\n            \"linear-gradient(to top, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), transparent)\",\n        }}\n      >\n        {title && <ProductCardTitle className=\"text-white\">{title}</ProductCardTitle>}\n        {price && <ProductCardPrice className=\"mt-0.5 text-white/80\">{price}</ProductCardPrice>}\n      </div>\n    </ProductCardRoot>\n  );\n  return (\n    <OptionalLink href={href} radiusClass=\"rounded-[var(--enad-card-radius)]\">\n      {content}\n    </OptionalLink>\n  );\n}\n\n/* ─── List layout ─── */\n\nfunction ListCard({ images = [], title, subtitle, price, href, className }: CardLayoutProps) {\n  const content = (\n    <ProductCardRoot className={cn(\"flex shadow-none\", className)}>\n      <div className=\"w-32 shrink-0\">\n        {images[0] ? (\n          <ProductCardImageArea className=\"aspect-[var(--enad-image-product-aspect)]\">\n            <ProductCardImage src={images[0].src} alt={images[0].alt ?? title ?? \"\"} />\n          </ProductCardImageArea>\n        ) : (\n          <FallbackImage />\n        )}\n      </div>\n      <ProductCardContent className=\"flex-1 justify-center p-4\">\n        {title && <ProductCardTitle>{title}</ProductCardTitle>}\n        {subtitle && <ProductCardSubtitle className=\"mt-0.5\">{subtitle}</ProductCardSubtitle>}\n        {price && <ProductCardPrice className=\"mt-1\">{price}</ProductCardPrice>}\n      </ProductCardContent>\n    </ProductCardRoot>\n  );\n  return <OptionalLink href={href}>{content}</OptionalLink>;\n}\n\n/* ─── Stripped layout ─── */\n\nfunction StrippedCard({ images = [], title, price, href, className }: CardLayoutProps) {\n  const content = (\n    <ProductCardRoot className={cn(\"rounded-none shadow-none\", className)}>\n      <div className=\"relative overflow-hidden\">\n        {images[0] ? (\n          <ProductCardImageArea className=\"aspect-[var(--enad-image-product-aspect)]\">\n            <ProductCardImage\n              src={images[0].src}\n              alt={images[0].alt ?? title ?? \"\"}\n              className=\"transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n            />\n          </ProductCardImageArea>\n        ) : (\n          <FallbackImage />\n        )}\n      </div>\n      {title && <ProductCardTitle className=\"mt-2\">{title}</ProductCardTitle>}\n      {price && <ProductCardPrice className=\"text-muted-foreground\">{price}</ProductCardPrice>}\n    </ProductCardRoot>\n  );\n  return <OptionalLink href={href}>{content}</OptionalLink>;\n}\n\n/* ─── Gallery layout (default) ─── */\n\nfunction GalleryCard({\n  images = [],\n  title,\n  subtitle,\n  price,\n  tag,\n  href,\n  showFavorites = false,\n  showPaginationDots = true,\n  onFavoriteClick,\n  className,\n  HeartIcon,\n}: CardLayoutProps) {\n  const imageElements = images.map((img, i) => (\n    <ProductCardImageArea key={i} className=\"aspect-[var(--enad-image-product-aspect)]\">\n      <ProductCardImage src={img.src} alt={img.alt ?? title ?? \"\"} />\n    </ProductCardImageArea>\n  ));\n\n  const content = (\n    <ProductCardRoot className={cn(\"shadow-none\", className)}>\n      <div className=\"relative\">\n        <GalleryImageArea\n          imageElements={imageElements}\n          fallback={<FallbackImage />}\n          showPaginationDots={showPaginationDots}\n        />\n\n        {tag && <ProductCardTag>{tag}</ProductCardTag>}\n\n        {showFavorites && (\n          <ProductCardFavoriteButton\n            className=\"absolute end-3 top-3\"\n            onClick={() => onFavoriteClick?.()}\n          >\n            <HeartIcon className=\"size-4\" />\n          </ProductCardFavoriteButton>\n        )}\n      </div>\n\n      <ProductCardContent>\n        {title && <ProductCardTitle>{title}</ProductCardTitle>}\n        {subtitle && <ProductCardSubtitle>{subtitle}</ProductCardSubtitle>}\n        {price && <ProductCardPrice>{price}</ProductCardPrice>}\n      </ProductCardContent>\n    </ProductCardRoot>\n  );\n  return <OptionalLink href={href}>{content}</OptionalLink>;\n}\n\n/* ─── Main component (dispatcher) ─── */\n\nfunction ProductCard(props: ProductCardProps) {\n  const cardDefault = useVariantDefault(\"productCard\");\n  const HeartIcon = useIcon(\"heart\");\n  const layout = props.layout ?? cardDefault ?? \"gallery\";\n  const layoutProps: CardLayoutProps = { ...props, HeartIcon };\n\n  switch (layout) {\n    case \"horizontal\":\n      return <HorizontalCard {...layoutProps} />;\n    case \"minimal\":\n      return <MinimalCard {...layoutProps} />;\n    case \"list\":\n      return <ListCard {...layoutProps} />;\n    case \"stripped\":\n      return <StrippedCard {...layoutProps} />;\n    default:\n      return <GalleryCard {...layoutProps} />;\n  }\n}\n\nexport { ProductCard, type ProductCardProps };\n"],"mappings":";;;;;;;;;AA0BA,SAAS,aAAa,EACpB,MACA,aACA,YAKC;AACD,KAAI,CAAC,KAAM,QAAO;AAClB,QACE,oBAAC,KAAD;EACQ;EACN,WAAW,GACT,6GACA,YACD;EAEA;EACC,CAAA;;AAIR,SAAS,gBAAgB;AACvB,QACE,oBAAC,sBAAD;EACE,WAAU;EACV,eAAY;EACZ,CAAA;;AAMN,SAAS,iBAAiB,EACxB,eACA,UACA,sBAKC;AACD,KAAI,cAAc,SAAS,EACzB,QAAO,oBAAC,mBAAD;EAAmB,OAAO;EAAe,UAAU;EAAsB,CAAA;AAElF,KAAI,cAAc,WAAW,EAC3B,QAAO,cAAc;AAEvB,QAAO;;AAKT,SAAS,eAAe,EACtB,SAAS,EAAE,EACX,OACA,UACA,OACA,KACA,MACA,gBAAgB,OAChB,iBACA,WACA,aACkB;AAqClB,QAAO,oBAAC,cAAD;EAAoB;YAnCzB,qBAAC,iBAAD;GACE,WAAW,GACT,+IACA,UACD;aAJH,CAME,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,OAAO,KACN,oBAAC,sBAAD;KAAsB,WAAU;eAC9B,oBAAC,kBAAD;MACE,KAAK,OAAO,GAAG;MACf,KAAK,OAAO,GAAG,OAAO,SAAS;MAC/B,WAAU;MACV,CAAA;KACmB,CAAA,GAEvB,oBAAC,eAAD,EAAiB,CAAA,EAElB,OAAO,oBAAC,gBAAD;KAAgB,WAAU;eAAiB;KAAqB,CAAA,CACpE;OACN,qBAAC,oBAAD;IAAoB,WAAU;cAA9B;KACG,SAAS,oBAAC,kBAAD;MAAkB,WAAU;gBAAa;MAAyB,CAAA;KAC3E,YAAY,oBAAC,qBAAD;MAAqB,WAAU;gBAAQ;MAA+B,CAAA;KAClF,SAAS,oBAAC,kBAAD;MAAkB,WAAU;gBAAkB;MAAyB,CAAA;KAChF,iBACC,oBAAC,2BAAD;MACE,WAAU;MACV,eAAe,mBAAmB;gBAElC,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;MACN,CAAA;KAEX;MACL;;EAEqC,CAAA;;AAK3D,SAAS,YAAY,EACnB,SAAS,EAAE,EACX,OACA,OACA,KACA,MACA,gBAAgB,OAChB,iBACA,WACA,aACkB;AAuClB,QACE,oBAAC,cAAD;EAAoB;EAAM,aAAY;YAtCtC,qBAAC,iBAAD;GAAiB,WAAW,GAAG,YAAY,UAAU;aAArD;IACG,OAAO,KACN,oBAAC,sBAAD;KAAsB,WAAU;eAC9B,oBAAC,kBAAD;MACE,KAAK,OAAO,GAAG;MACf,KAAK,OAAO,GAAG,OAAO,SAAS;MAC/B,WAAU;MACV,CAAA;KACmB,CAAA,GAEvB,oBAAC,eAAD,EAAiB,CAAA;IAGlB,OAAO,oBAAC,gBAAD;KAAgB,WAAU;eAAQ;KAAqB,CAAA;IAE9D,iBACC,oBAAC,2BAAD;KACE,WAAU;KACV,eAAe,mBAAmB;eAElC,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;KACN,CAAA;IAI9B,qBAAC,OAAD;KACE,WAAU;KACV,OAAO,EACL,YACE,mJACH;eALH,CAOG,SAAS,oBAAC,kBAAD;MAAkB,WAAU;gBAAc;MAAyB,CAAA,EAC5E,SAAS,oBAAC,kBAAD;MAAkB,WAAU;gBAAwB;MAAyB,CAAA,CACnF;;IACU;;EAKH,CAAA;;AAMnB,SAAS,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,UAAU,OAAO,MAAM,aAA8B;AAmB3F,QAAO,oBAAC,cAAD;EAAoB;YAjBzB,qBAAC,iBAAD;GAAiB,WAAW,GAAG,oBAAoB,UAAU;aAA7D,CACE,oBAAC,OAAD;IAAK,WAAU;cACZ,OAAO,KACN,oBAAC,sBAAD;KAAsB,WAAU;eAC9B,oBAAC,kBAAD;MAAkB,KAAK,OAAO,GAAG;MAAK,KAAK,OAAO,GAAG,OAAO,SAAS;MAAM,CAAA;KACtD,CAAA,GAEvB,oBAAC,eAAD,EAAiB,CAAA;IAEf,CAAA,EACN,qBAAC,oBAAD;IAAoB,WAAU;cAA9B;KACG,SAAS,oBAAC,kBAAD,EAAA,UAAmB,OAAyB,CAAA;KACrD,YAAY,oBAAC,qBAAD;MAAqB,WAAU;gBAAU;MAA+B,CAAA;KACpF,SAAS,oBAAC,kBAAD;MAAkB,WAAU;gBAAQ;MAAyB,CAAA;KACpD;MACL;;EAEqC,CAAA;;AAK3D,SAAS,aAAa,EAAE,SAAS,EAAE,EAAE,OAAO,OAAO,MAAM,aAA8B;AAoBrF,QAAO,oBAAC,cAAD;EAAoB;YAlBzB,qBAAC,iBAAD;GAAiB,WAAW,GAAG,4BAA4B,UAAU;aAArE;IACE,oBAAC,OAAD;KAAK,WAAU;eACZ,OAAO,KACN,oBAAC,sBAAD;MAAsB,WAAU;gBAC9B,oBAAC,kBAAD;OACE,KAAK,OAAO,GAAG;OACf,KAAK,OAAO,GAAG,OAAO,SAAS;OAC/B,WAAU;OACV,CAAA;MACmB,CAAA,GAEvB,oBAAC,eAAD,EAAiB,CAAA;KAEf,CAAA;IACL,SAAS,oBAAC,kBAAD;KAAkB,WAAU;eAAQ;KAAyB,CAAA;IACtE,SAAS,oBAAC,kBAAD;KAAkB,WAAU;eAAyB;KAAyB,CAAA;IACxE;;EAEqC,CAAA;;AAK3D,SAAS,YAAY,EACnB,SAAS,EAAE,EACX,OACA,UACA,OACA,KACA,MACA,gBAAgB,OAChB,qBAAqB,MACrB,iBACA,WACA,aACkB;CAClB,MAAM,gBAAgB,OAAO,KAAK,KAAK,MACrC,oBAAC,sBAAD;EAA8B,WAAU;YACtC,oBAAC,kBAAD;GAAkB,KAAK,IAAI;GAAK,KAAK,IAAI,OAAO,SAAS;GAAM,CAAA;EAC1C,EAFI,EAEJ,CACvB;AA8BF,QAAO,oBAAC,cAAD;EAAoB;YA3BzB,qBAAC,iBAAD;GAAiB,WAAW,GAAG,eAAe,UAAU;aAAxD,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,kBAAD;MACiB;MACf,UAAU,oBAAC,eAAD,EAAiB,CAAA;MACP;MACpB,CAAA;KAED,OAAO,oBAAC,gBAAD,EAAA,UAAiB,KAAqB,CAAA;KAE7C,iBACC,oBAAC,2BAAD;MACE,WAAU;MACV,eAAe,mBAAmB;gBAElC,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;MACN,CAAA;KAE1B;OAEN,qBAAC,oBAAD,EAAA,UAAA;IACG,SAAS,oBAAC,kBAAD,EAAA,UAAmB,OAAyB,CAAA;IACrD,YAAY,oBAAC,qBAAD,EAAA,UAAsB,UAA+B,CAAA;IACjE,SAAS,oBAAC,kBAAD,EAAA,UAAmB,OAAyB,CAAA;IACnC,EAAA,CAAA,CACL;;EAEqC,CAAA;;AAK3D,SAAS,YAAY,OAAyB;CAC5C,MAAM,cAAc,kBAAkB,cAAc;CACpD,MAAM,YAAY,QAAQ,QAAQ;CAClC,MAAM,SAAS,MAAM,UAAU,eAAe;CAC9C,MAAM,cAA+B;EAAE,GAAG;EAAO;EAAW;AAE5D,SAAQ,QAAR;EACE,KAAK,aACH,QAAO,oBAAC,gBAAD,EAAgB,GAAI,aAAe,CAAA;EAC5C,KAAK,UACH,QAAO,oBAAC,aAAD,EAAa,GAAI,aAAe,CAAA;EACzC,KAAK,OACH,QAAO,oBAAC,UAAD,EAAU,GAAI,aAAe,CAAA;EACtC,KAAK,WACH,QAAO,oBAAC,cAAD,EAAc,GAAI,aAAe,CAAA;EAC1C,QACE,QAAO,oBAAC,aAAD,EAAa,GAAI,aAAe,CAAA"}
+{"version":3,"file":"product-card.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/product-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { cn } from \"../../ui/utils\";\nimport { defineSlotRecipe } from \"../../ui-resolver/recipe\";\nimport { useVariantDefault } from \"../../ui-resolver/context\";\nimport { SwipeableCarousel } from \"../carousel/swipeable-carousel\";\nimport type { ProductCardProps } from \"../types\";\nimport {\n  ProductCardContent,\n  ProductCardFavoriteButton,\n  ProductCardImage,\n  ProductCardImageArea,\n  ProductCardPrice,\n  ProductCardRoot,\n  ProductCardSubtitle,\n  ProductCardTag,\n  ProductCardTitle,\n} from \"./product-card-parts\";\n\n/* ─── Recipe ─── */\n\nconst productCardRecipe = defineSlotRecipe({\n  slots: [\"root\", \"imageWrapper\", \"content\"] as const,\n  base: {\n    root: \"\",\n    imageWrapper: \"relative\",\n    content: \"\",\n  },\n  variants: {\n    layout: {\n      gallery: {\n        root: \"shadow-none\",\n        content:\n          \"flex min-w-0 flex-col gap-[var(--enad-product-card-content-gap,0.125rem)] p-[var(--enad-product-card-content-py,0.75rem)]\",\n      },\n      horizontal: {\n        root: \"flex shadow-[var(--enad-card-shadow)]\",\n        imageWrapper: \"w-1/3 shrink-0\",\n        content: \"flex min-w-0 flex-1 flex-col justify-center gap-0 p-4 md:p-6\",\n      },\n      minimal: {\n        root: \"relative\",\n        content: \"\",\n      },\n      list: {\n        root: \"flex shadow-none\",\n        imageWrapper: \"w-32 shrink-0\",\n        content: \"flex min-w-0 flex-1 flex-col justify-center p-4\",\n      },\n      stripped: {\n        root: \"rounded-none shadow-none\",\n        content: \"\",\n      },\n    },\n  },\n  defaultVariants: { layout: \"gallery\" },\n});\n\n/* ─── Shared helpers ─── */\n\nfunction OptionalLink({\n  href,\n  radiusClass,\n  children,\n}: {\n  href?: string;\n  radiusClass?: string;\n  children: React.ReactNode;\n}) {\n  if (!href) return children;\n  return (\n    <a\n      href={href}\n      className={cn(\n        \"block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        radiusClass,\n      )}\n    >\n      {children}\n    </a>\n  );\n}\n\nfunction FallbackImage() {\n  return (\n    <ProductCardImageArea\n      className=\"aspect-[var(--enad-image-product-aspect)]\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nfunction GalleryImageArea({\n  imageElements,\n  fallback,\n  showPaginationDots,\n}: {\n  imageElements: React.ReactNode[];\n  fallback: React.ReactNode;\n  showPaginationDots: boolean;\n}) {\n  if (imageElements.length > 1) {\n    return <SwipeableCarousel items={imageElements} showDots={showPaginationDots} />;\n  }\n  if (imageElements.length === 1) {\n    return imageElements[0];\n  }\n  return fallback;\n}\n\n/* ─── Internal layout prop type ─── */\n\ntype CardLayoutProps = ProductCardProps & {\n  HeartIcon: React.ComponentType<{ className?: string }>;\n};\n\n/* ─── Vertical layout (gallery + stripped) ─── */\n\nfunction VerticalCard({\n  images = [],\n  title,\n  subtitle,\n  price,\n  tag,\n  href,\n  layout = \"gallery\",\n  showFavorites = false,\n  showPaginationDots = true,\n  onFavoriteClick,\n  className,\n  HeartIcon,\n}: CardLayoutProps) {\n  const classes = productCardRecipe({ layout });\n  const isStripped = layout === \"stripped\";\n\n  const imageElements = images.map((img, i) => (\n    <ProductCardImageArea key={i} className=\"aspect-[var(--enad-image-product-aspect)]\">\n      <ProductCardImage src={img.src} alt={img.alt ?? title ?? \"\"} />\n    </ProductCardImageArea>\n  ));\n\n  const content = (\n    <ProductCardRoot className={cn(classes.root, className)}>\n      <div className={classes.imageWrapper}>\n        {isStripped ? (\n          <div className=\"overflow-hidden\">\n            {images[0] ? (\n              <ProductCardImageArea className=\"aspect-[var(--enad-image-product-aspect)]\">\n                <ProductCardImage src={images[0].src} alt={images[0].alt ?? title ?? \"\"} />\n              </ProductCardImageArea>\n            ) : (\n              <FallbackImage />\n            )}\n          </div>\n        ) : (\n          <>\n            <GalleryImageArea\n              imageElements={imageElements}\n              fallback={<FallbackImage />}\n              showPaginationDots={showPaginationDots}\n            />\n            {tag && <ProductCardTag>{tag}</ProductCardTag>}\n            {showFavorites && (\n              <ProductCardFavoriteButton\n                className=\"absolute end-3 top-3\"\n                onClick={() => onFavoriteClick?.()}\n              >\n                <HeartIcon className=\"size-4\" />\n              </ProductCardFavoriteButton>\n            )}\n          </>\n        )}\n      </div>\n\n      {isStripped ? (\n        <>\n          {title && <ProductCardTitle className=\"mt-2\">{title}</ProductCardTitle>}\n          {price && <ProductCardPrice className=\"text-muted-foreground\">{price}</ProductCardPrice>}\n        </>\n      ) : (\n        <ProductCardContent className={classes.content}>\n          {title && <ProductCardTitle>{title}</ProductCardTitle>}\n          {subtitle && <ProductCardSubtitle>{subtitle}</ProductCardSubtitle>}\n          {price && <ProductCardPrice>{price}</ProductCardPrice>}\n        </ProductCardContent>\n      )}\n    </ProductCardRoot>\n  );\n\n  return <OptionalLink href={href}>{content}</OptionalLink>;\n}\n\n/* ─── Horizontal layout (horizontal + list) ─── */\n\nfunction HorizontalCardLayout({\n  images = [],\n  title,\n  subtitle,\n  price,\n  tag,\n  href,\n  layout = \"horizontal\",\n  showFavorites = false,\n  onFavoriteClick,\n  className,\n  HeartIcon,\n}: CardLayoutProps) {\n  const classes = productCardRecipe({ layout });\n\n  const content = (\n    <ProductCardRoot className={cn(classes.root, className)}>\n      <div className={classes.imageWrapper}>\n        {images[0] ? (\n          <ProductCardImageArea className=\"aspect-[var(--enad-image-product-aspect)]\">\n            <ProductCardImage src={images[0].src} alt={images[0].alt ?? title ?? \"\"} />\n          </ProductCardImageArea>\n        ) : (\n          <FallbackImage />\n        )}\n        {tag && layout === \"horizontal\" && (\n          <ProductCardTag className=\"start-2 top-2\">{tag}</ProductCardTag>\n        )}\n      </div>\n      <ProductCardContent className={classes.content}>\n        {title && (\n          <ProductCardTitle className={layout === \"horizontal\" ? \"text-base\" : undefined}>\n            {title}\n          </ProductCardTitle>\n        )}\n        {subtitle && (\n          <ProductCardSubtitle className={layout === \"horizontal\" ? \"mt-1\" : \"mt-0.5\"}>\n            {subtitle}\n          </ProductCardSubtitle>\n        )}\n        {price && (\n          <ProductCardPrice className={layout === \"horizontal\" ? \"mt-2 text-base\" : \"mt-1\"}>\n            {price}\n          </ProductCardPrice>\n        )}\n        {showFavorites && layout === \"horizontal\" && (\n          <ProductCardFavoriteButton\n            className=\"mt-3 self-start bg-muted hover:bg-accent\"\n            onClick={() => onFavoriteClick?.()}\n          >\n            <HeartIcon className=\"size-4\" />\n          </ProductCardFavoriteButton>\n        )}\n      </ProductCardContent>\n    </ProductCardRoot>\n  );\n\n  return <OptionalLink href={href}>{content}</OptionalLink>;\n}\n\n/* ─── Minimal layout (hover overlay) ─── */\n\nfunction MinimalCard({\n  images = [],\n  title,\n  price,\n  tag,\n  href,\n  showFavorites = false,\n  onFavoriteClick,\n  className,\n  HeartIcon,\n}: CardLayoutProps) {\n  const classes = productCardRecipe({ layout: \"minimal\" });\n\n  const content = (\n    <ProductCardRoot className={cn(classes.root, className)}>\n      {images[0] ? (\n        <ProductCardImageArea className=\"aspect-[var(--enad-image-product-aspect)]\">\n          <ProductCardImage src={images[0].src} alt={images[0].alt ?? title ?? \"\"} />\n        </ProductCardImageArea>\n      ) : (\n        <FallbackImage />\n      )}\n\n      {tag && <ProductCardTag className=\"z-10\">{tag}</ProductCardTag>}\n\n      {showFavorites && (\n        <ProductCardFavoriteButton\n          className=\"absolute end-3 top-3 z-10\"\n          onClick={() => onFavoriteClick?.()}\n        >\n          <HeartIcon className=\"size-4\" />\n        </ProductCardFavoriteButton>\n      )}\n\n      <div\n        className=\"absolute inset-x-0 bottom-0 min-w-0 p-4\"\n        style={{\n          background:\n            \"linear-gradient(to top, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), transparent)\",\n        }}\n      >\n        {title && <ProductCardTitle className=\"text-white\">{title}</ProductCardTitle>}\n        {price && <ProductCardPrice className=\"mt-0.5 text-white/80\">{price}</ProductCardPrice>}\n      </div>\n    </ProductCardRoot>\n  );\n\n  return (\n    <OptionalLink href={href} radiusClass=\"rounded-[var(--enad-card-radius)]\">\n      {content}\n    </OptionalLink>\n  );\n}\n\n/* ─── Main component (dispatcher) ─── */\n\nfunction ProductCard(props: ProductCardProps) {\n  const cardDefault = useVariantDefault(\"productCard\");\n  const HeartIcon = useIcon(\"heart\");\n  const layout = props.layout ?? cardDefault ?? \"gallery\";\n  const layoutProps: CardLayoutProps = { ...props, HeartIcon };\n\n  switch (layout) {\n    case \"horizontal\":\n    case \"list\":\n      return <HorizontalCardLayout {...layoutProps} layout={layout} />;\n    case \"minimal\":\n      return <MinimalCard {...layoutProps} />;\n    case \"stripped\":\n      return <VerticalCard {...layoutProps} layout=\"stripped\" />;\n    default:\n      return <VerticalCard {...layoutProps} layout=\"gallery\" />;\n  }\n}\n\nexport { ProductCard, productCardRecipe, type ProductCardProps };\n"],"mappings":"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"}

package/dist/client/storefront/blocks/product-image.mjs

@@ -11,7 +11,7 @@ const aspectClasses = {
 function getZoomLabel(zoomed) {
 	return zoomed ? "Zoom out" : "Zoom in";
 }
-function ProductImage({ images, aspectRatio = "4:5", showZoom = false, arrows = "outset", showDots = true, showThumbnails = false, className }) {
+function ProductImage({ images, aspectRatio = "4:5", showZoom = false, arrows = void 0, showDots = true, showThumbnails = false, className }) {
 	const [zoomed, setZoomed] = React$1.useState(false);
 	const [activeSlide, setActiveSlide] = React$1.useState(0);
 	const toggleZoom = () => {
@@ -35,7 +35,7 @@ function ProductImage({ images, aspectRatio = "4:5", showZoom = false, arrows =
 		children: /* @__PURE__ */ jsx("img", {
 			src: img.src,
 			alt: img.alt ?? "",
-			className: cn("size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)]", zoomed && "scale-150")
+			className: cn("size-full object-cover", zoomed && "scale-150")
 		})
 	}, i));
 	if (images.length === 0) return /* @__PURE__ */ jsx("div", { className: cn("bg-muted", aspectClasses[aspectRatio], className) });

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

@@ -1 +1 @@
-{"version":3,"file":"product-image.mjs","names":["React"],"sources":["../../../../src/client/storefront/blocks/product-image.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { SwipeableCarousel } from \"../carousel/swipeable-carousel\"\nimport type { ProductImageProps } from \"../types\"\n\nconst aspectClasses: Record<string, string> = {\n  \"1:1\": \"aspect-square\",\n  \"4:5\": \"aspect-[4/5]\",\n}\n\nfunction getZoomLabel(zoomed: boolean): string {\n  return zoomed ? \"Zoom out\" : \"Zoom in\"\n}\n\nfunction ProductImage({\n  images,\n  aspectRatio = \"4:5\",\n  showZoom = false,\n  arrows = \"outset\",\n  showDots = true,\n  showThumbnails = false,\n  className,\n}: ProductImageProps) {\n  const [zoomed, setZoomed] = React.useState(false)\n  const [activeSlide, setActiveSlide] = React.useState(0)\n\n  const toggleZoom = () => {\n    if (showZoom) setZoomed((z) => !z)\n  }\n\n  const handleZoomKeyDown = (e: React.KeyboardEvent) => { if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); toggleZoom() } }\n\n  const imageElements = images.map((img, i) => (\n    <div\n      key={i}\n      className={cn(\n        \"relative overflow-hidden bg-muted\",\n        aspectClasses[aspectRatio],\n        showZoom && (zoomed ? \"cursor-zoom-out\" : \"cursor-zoom-in\"),\n      )}\n      {...(showZoom && {\n        role: \"button\" as const,\n        tabIndex: 0,\n        \"aria-label\": getZoomLabel(zoomed),\n        onClick: toggleZoom,\n        onKeyDown: handleZoomKeyDown,\n      })}\n    >\n      <img\n        src={img.src}\n        alt={img.alt ?? \"\"}\n        className={cn(\n          \"size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)]\",\n          zoomed && \"scale-150\",\n        )}\n      />\n    </div>\n  ))\n\n  if (images.length === 0) {\n    return (\n      <div className={cn(\"bg-muted\", aspectClasses[aspectRatio], className)} />\n    )\n  }\n\n  if (images.length === 1) {\n    return <div className={className}>{imageElements[0]}</div>\n  }\n\n  const carousel = (\n    <SwipeableCarousel\n      items={imageElements}\n      arrows={arrows}\n      showDots={showDots}\n      activeSlide={activeSlide}\n      onSlideChange={setActiveSlide}\n    />\n  )\n\n  if (showThumbnails && images.length > 1) {\n    return (\n      <div className={cn(\"flex gap-3\", className)}>\n        <div className=\"hidden md:flex flex-col gap-2 w-16 shrink-0\">\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              aria-label={`View image ${i + 1}`}\n              onClick={() => setActiveSlide(i)}\n              className={cn(\n                \"relative aspect-square overflow-hidden rounded-[var(--enad-card-radius)] border-2 transition\",\n                i === activeSlide\n                  ? \"border-primary ring-1 ring-primary/30\"\n                  : \"border-transparent opacity-60 hover:opacity-100\",\n              )}\n            >\n              <img\n                src={img.src}\n                alt={img.alt ?? \"\"}\n                className=\"size-full object-cover\"\n              />\n            </button>\n          ))}\n        </div>\n        <div className=\"min-w-0 flex-1\">{carousel}</div>\n      </div>\n    )\n  }\n\n  return <div className={className}>{carousel}</div>\n}\n\nexport { ProductImage, type ProductImageProps }\n"],"mappings":";;;;;;AAOA,MAAM,gBAAwC;CAC5C,OAAO;CACP,OAAO;CACR;AAED,SAAS,aAAa,QAAyB;AAC7C,QAAO,SAAS,aAAa;;AAG/B,SAAS,aAAa,EACpB,QACA,cAAc,OACd,WAAW,OACX,SAAS,UACT,WAAW,MACX,iBAAiB,OACjB,aACoB;CACpB,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAAS,MAAM;CACjD,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAS,EAAE;CAEvD,MAAM,mBAAmB;AACvB,MAAI,SAAU,YAAW,MAAM,CAAC,EAAE;;CAGpC,MAAM,qBAAqB,MAA2B;AAAE,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAAE,KAAE,gBAAgB;AAAE,eAAY;;;CAElI,MAAM,gBAAgB,OAAO,KAAK,KAAK,MACrC,oBAAC,OAAD;EAEE,WAAW,GACT,qCACA,cAAc,cACd,aAAa,SAAS,oBAAoB,kBAC3C;EACD,GAAK,YAAY;GACf,MAAM;GACN,UAAU;GACV,cAAc,aAAa,OAAO;GAClC,SAAS;GACT,WAAW;GACZ;YAED,oBAAC,OAAD;GACE,KAAK,IAAI;GACT,KAAK,IAAI,OAAO;GAChB,WAAW,GACT,2FACA,UAAU,YACX;GACD,CAAA;EACE,EAtBC,EAsBD,CACN;AAEF,KAAI,OAAO,WAAW,EACpB,QACE,oBAAC,OAAD,EAAK,WAAW,GAAG,YAAY,cAAc,cAAc,UAAU,EAAI,CAAA;AAI7E,KAAI,OAAO,WAAW,EACpB,QAAO,oBAAC,OAAD;EAAgB;YAAY,cAAc;EAAS,CAAA;CAG5D,MAAM,WACJ,oBAAC,mBAAD;EACE,OAAO;EACC;EACE;EACG;EACb,eAAe;EACf,CAAA;AAGJ,KAAI,kBAAkB,OAAO,SAAS,EACpC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,UAAU;YAA3C,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,OAAO,KAAK,KAAK,MAChB,oBAAC,UAAD;IAEE,MAAK;IACL,cAAY,cAAc,IAAI;IAC9B,eAAe,eAAe,EAAE;IAChC,WAAW,GACT,gGACA,MAAM,cACF,0CACA,kDACL;cAED,oBAAC,OAAD;KACE,KAAK,IAAI;KACT,KAAK,IAAI,OAAO;KAChB,WAAU;KACV,CAAA;IACK,EAhBF,EAgBE,CACT;GACE,CAAA,EACN,oBAAC,OAAD;GAAK,WAAU;aAAkB;GAAe,CAAA,CAC5C;;AAIV,QAAO,oBAAC,OAAD;EAAgB;YAAY;EAAe,CAAA"}
+{"version":3,"file":"product-image.mjs","names":["React"],"sources":["../../../../src/client/storefront/blocks/product-image.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { SwipeableCarousel } from \"../carousel/swipeable-carousel\";\nimport type { ProductImageProps } from \"../types\";\n\nconst aspectClasses: Record<string, string> = {\n  \"1:1\": \"aspect-square\",\n  \"4:5\": \"aspect-[4/5]\",\n};\n\nfunction getZoomLabel(zoomed: boolean): string {\n  return zoomed ? \"Zoom out\" : \"Zoom in\";\n}\n\nfunction ProductImage({\n  images,\n  aspectRatio = \"4:5\",\n  showZoom = false,\n  arrows = undefined,\n  showDots = true,\n  showThumbnails = false,\n  className,\n}: ProductImageProps) {\n  const [zoomed, setZoomed] = React.useState(false);\n  const [activeSlide, setActiveSlide] = React.useState(0);\n\n  const toggleZoom = () => {\n    if (showZoom) setZoomed((z) => !z);\n  };\n\n  const handleZoomKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      toggleZoom();\n    }\n  };\n\n  const imageElements = images.map((img, i) => (\n    <div\n      key={i}\n      className={cn(\n        \"relative overflow-hidden bg-muted\",\n        aspectClasses[aspectRatio],\n        showZoom && (zoomed ? \"cursor-zoom-out\" : \"cursor-zoom-in\"),\n      )}\n      {...(showZoom && {\n        role: \"button\" as const,\n        tabIndex: 0,\n        \"aria-label\": getZoomLabel(zoomed),\n        onClick: toggleZoom,\n        onKeyDown: handleZoomKeyDown,\n      })}\n    >\n      <img\n        src={img.src}\n        alt={img.alt ?? \"\"}\n        className={cn(\"size-full object-cover\", zoomed && \"scale-150\")}\n      />\n    </div>\n  ));\n\n  if (images.length === 0) {\n    return <div className={cn(\"bg-muted\", aspectClasses[aspectRatio], className)} />;\n  }\n\n  if (images.length === 1) {\n    return <div className={className}>{imageElements[0]}</div>;\n  }\n\n  const carousel = (\n    <SwipeableCarousel\n      items={imageElements}\n      arrows={arrows}\n      showDots={showDots}\n      activeSlide={activeSlide}\n      onSlideChange={setActiveSlide}\n    />\n  );\n\n  if (showThumbnails && images.length > 1) {\n    return (\n      <div className={cn(\"flex gap-3\", className)}>\n        <div className=\"hidden md:flex flex-col gap-2 w-16 shrink-0\">\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              aria-label={`View image ${i + 1}`}\n              onClick={() => setActiveSlide(i)}\n              className={cn(\n                \"relative aspect-square overflow-hidden rounded-[var(--enad-card-radius)] border-2 transition\",\n                i === activeSlide\n                  ? \"border-primary ring-1 ring-primary/30\"\n                  : \"border-transparent opacity-60 hover:opacity-100\",\n              )}\n            >\n              <img src={img.src} alt={img.alt ?? \"\"} className=\"size-full object-cover\" />\n            </button>\n          ))}\n        </div>\n        <div className=\"min-w-0 flex-1\">{carousel}</div>\n      </div>\n    );\n  }\n\n  return <div className={className}>{carousel}</div>;\n}\n\nexport { ProductImage, type ProductImageProps };\n"],"mappings":";;;;;;AAOA,MAAM,gBAAwC;CAC5C,OAAO;CACP,OAAO;CACR;AAED,SAAS,aAAa,QAAyB;AAC7C,QAAO,SAAS,aAAa;;AAG/B,SAAS,aAAa,EACpB,QACA,cAAc,OACd,WAAW,OACX,SAAS,KAAA,GACT,WAAW,MACX,iBAAiB,OACjB,aACoB;CACpB,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAAS,MAAM;CACjD,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAS,EAAE;CAEvD,MAAM,mBAAmB;AACvB,MAAI,SAAU,YAAW,MAAM,CAAC,EAAE;;CAGpC,MAAM,qBAAqB,MAA2B;AACpD,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,eAAY;;;CAIhB,MAAM,gBAAgB,OAAO,KAAK,KAAK,MACrC,oBAAC,OAAD;EAEE,WAAW,GACT,qCACA,cAAc,cACd,aAAa,SAAS,oBAAoB,kBAC3C;EACD,GAAK,YAAY;GACf,MAAM;GACN,UAAU;GACV,cAAc,aAAa,OAAO;GAClC,SAAS;GACT,WAAW;GACZ;YAED,oBAAC,OAAD;GACE,KAAK,IAAI;GACT,KAAK,IAAI,OAAO;GAChB,WAAW,GAAG,0BAA0B,UAAU,YAAY;GAC9D,CAAA;EACE,EAnBC,EAmBD,CACN;AAEF,KAAI,OAAO,WAAW,EACpB,QAAO,oBAAC,OAAD,EAAK,WAAW,GAAG,YAAY,cAAc,cAAc,UAAU,EAAI,CAAA;AAGlF,KAAI,OAAO,WAAW,EACpB,QAAO,oBAAC,OAAD;EAAgB;YAAY,cAAc;EAAS,CAAA;CAG5D,MAAM,WACJ,oBAAC,mBAAD;EACE,OAAO;EACC;EACE;EACG;EACb,eAAe;EACf,CAAA;AAGJ,KAAI,kBAAkB,OAAO,SAAS,EACpC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,UAAU;YAA3C,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,OAAO,KAAK,KAAK,MAChB,oBAAC,UAAD;IAEE,MAAK;IACL,cAAY,cAAc,IAAI;IAC9B,eAAe,eAAe,EAAE;IAChC,WAAW,GACT,gGACA,MAAM,cACF,0CACA,kDACL;cAED,oBAAC,OAAD;KAAK,KAAK,IAAI;KAAK,KAAK,IAAI,OAAO;KAAI,WAAU;KAA2B,CAAA;IACrE,EAZF,EAYE,CACT;GACE,CAAA,EACN,oBAAC,OAAD;GAAK,WAAU;aAAkB;GAAe,CAAA,CAC5C;;AAIV,QAAO,oBAAC,OAAD;EAAgB;YAAY;EAAe,CAAA"}

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

@@ -2,7 +2,20 @@ import { TextContentWithImageProps } from "../types.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/storefront/blocks/text-content-with-image.d.ts
+declare const textContentWithImageRecipe: (props?: ({
+  variant?: "side-by-side" | "stacked" | "overlap" | undefined;
+  fullWidth?: "true" | "false" | undefined;
+  imagePosition?: "first" | "last" | undefined;
+} & {
+  className?: Partial<Record<"root" | "image" | "inner" | "imageArea" | "textArea", string>> | undefined;
+}) | undefined) => {
+  root: string;
+  image: string;
+  inner: string;
+  imageArea: string;
+  textArea: string;
+};
 declare function TextContentWithImage(props: TextContentWithImageProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TextContentWithImage, type TextContentWithImageProps };
+export { TextContentWithImage, type TextContentWithImageProps, textContentWithImageRecipe };
 //# sourceMappingURL=text-content-with-image.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-content-with-image.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/text-content-with-image.tsx"],"mappings":";;;;iBA6VS,oBAAA,CAAqB,KAAA,EAAO,yBAAA,GAAyB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"text-content-with-image.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/text-content-with-image.tsx"],"mappings":";;;;cAWM,0BAAA,GAA0B,KAAA;;;;;cA6E9B,OAAA,CAAA,MAAA;AAAA;;;;;;;iBA6JO,oBAAA,CAAqB,KAAA,EAAO,yBAAA,GAAyB,kBAAA,CAAA,GAAA,CAAA,OAAA"}