@enadhq/enad-react-sdk 1.0.2 → 1.1.0

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

@@ -1,228 +1,228 @@
 "use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.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 { useIcon } from "../../icons/icon-context";
-import { Card, CardContent, CardFooter, CardHeader } from "../../ui-resolver/card";
-import { cn } from "../../ui/utils";
-import { SwipeableCarousel } from "../carousel/swipeable-carousel";
-function OptionalLink({
-  href,
-  radiusClass,
-  children
-}) {
-  if (!href) return children;
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      className: cn("block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", radiusClass),
-      children
-    }
-  );
+//#region src/client/storefront/blocks/product-card.tsx
+function OptionalLink({ href, radiusClass, children }) {
+	if (!href) return children;
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		className: cn("block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", radiusClass),
+		children
+	});
 }
 function FallbackImage() {
-  return /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] bg-muted", "aria-hidden": "true" });
+	return /* @__PURE__ */ jsx(ProductCardImageArea, {
+		className: "aspect-[var(--enad-image-product-aspect)]",
+		"aria-hidden": "true"
+	});
 }
-function FavoriteButton({
-  HeartIcon,
-  onFavoriteClick,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onFavoriteClick?.();
-      },
-      className,
-      "aria-label": "Add to favorites",
-      children: /* @__PURE__ */ jsx(HeartIcon, { className: "size-4" })
-    }
-  );
+function GalleryImageArea({ imageElements, fallback, showPaginationDots }) {
+	if (imageElements.length > 1) return /* @__PURE__ */ jsx(SwipeableCarousel, {
+		items: imageElements,
+		showDots: showPaginationDots
+	});
+	if (imageElements.length === 1) return imageElements[0];
+	return fallback;
 }
-function GalleryImageArea({
-  imageElements,
-  fallback,
-  showPaginationDots
-}) {
-  if (imageElements.length > 1) {
-    return /* @__PURE__ */ jsx(SwipeableCarousel, { items: imageElements, showDots: showPaginationDots });
-  }
-  if (imageElements.length === 1) {
-    return imageElements[0];
-  }
-  return fallback;
+function HorizontalCard({ images = [], title, subtitle, price, tag, href, showFavorites = false, onFavoriteClick, className, HeartIcon }) {
+	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),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "relative w-1/3 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 ?? "",
+						className: "transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]"
+					})
+				}) : /* @__PURE__ */ jsx(FallbackImage, {}), tag && /* @__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",
+				children: [
+					title && /* @__PURE__ */ jsx(ProductCardTitle, {
+						className: "text-base",
+						children: title
+					}),
+					subtitle && /* @__PURE__ */ jsx(ProductCardSubtitle, {
+						className: "mt-1",
+						children: subtitle
+					}),
+					price && /* @__PURE__ */ jsx(ProductCardPrice, {
+						className: "mt-2 text-base",
+						children: price
+					}),
+					showFavorites && /* @__PURE__ */ jsx(ProductCardFavoriteButton, {
+						className: "mt-3 self-start bg-muted hover:bg-accent",
+						onClick: () => onFavoriteClick?.(),
+						children: /* @__PURE__ */ jsx(HeartIcon, { className: "size-4" })
+					})
+				]
+			})]
+		})
+	});
 }
-function HorizontalCard({
-  images = [],
-  title,
-  subtitle,
-  price,
-  tag,
-  href,
-  showFavorites = false,
-  onFavoriteClick,
-  className,
-  HeartIcon
-}) {
-  const content = /* @__PURE__ */ jsxs(Card, { className: cn("enad-interactive group flex overflow-hidden border-0 shadow-[var(--enad-card-shadow)] transition-shadow duration-[var(--enad-motion-duration)] hover:shadow-[var(--enad-card-hover-shadow)]", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative w-1/3 shrink-0", children: [
-      images[0] ? /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] bg-muted", children: /* @__PURE__ */ jsx("img", { src: images[0].src, alt: images[0].alt ?? title ?? "", loading: "lazy", className: "size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]" }) }) : /* @__PURE__ */ jsx(FallbackImage, {}),
-      tag && /* @__PURE__ */ jsx("span", { className: "absolute start-2 top-2 rounded-[var(--enad-card-radius)] bg-background/90 px-2 py-0.5 text-xs font-medium text-foreground", children: tag })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "flex min-w-0 flex-1 flex-col justify-center p-4 md:p-6", children: [
-      title && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-base font-medium text-foreground", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-sm text-muted-foreground", children: subtitle }),
-      price && /* @__PURE__ */ jsx("p", { className: "mt-2 text-base font-medium text-foreground", children: price }),
-      showFavorites && /* @__PURE__ */ jsx(
-        FavoriteButton,
-        {
-          HeartIcon,
-          onFavoriteClick,
-          className: "mt-3 self-start rounded-full bg-muted p-1.5 text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        }
-      )
-    ] })
-  ] });
-  return /* @__PURE__ */ jsx(OptionalLink, { href, children: content });
+function MinimalCard({ images = [], title, price, tag, href, showFavorites = false, onFavoriteClick, className, HeartIcon }) {
+	return /* @__PURE__ */ jsx(OptionalLink, {
+		href,
+		radiusClass: "rounded-[var(--enad-card-radius)]",
+		children: /* @__PURE__ */ jsxs(ProductCardRoot, {
+			className: cn("relative", 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)]"
+					})
+				}) : /* @__PURE__ */ jsx(FallbackImage, {}),
+				tag && /* @__PURE__ */ jsx(ProductCardTag, {
+					className: "z-10",
+					children: tag
+				}),
+				showFavorites && /* @__PURE__ */ jsx(ProductCardFavoriteButton, {
+					className: "absolute end-3 top-3 z-10",
+					onClick: () => onFavoriteClick?.(),
+					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",
+					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",
+						children: title
+					}), price && /* @__PURE__ */ jsx(ProductCardPrice, {
+						className: "mt-0.5 text-white/80",
+						children: price
+					})]
+				})
+			]
+		})
+	});
 }
-function MinimalCard({
-  images = [],
-  title,
-  price,
-  tag,
-  href,
-  showFavorites = false,
-  onFavoriteClick,
-  className,
-  HeartIcon
-}) {
-  const content = /* @__PURE__ */ jsxs("div", { className: cn("enad-interactive group relative overflow-hidden rounded-[var(--enad-card-radius)]", className), children: [
-    images[0] ? /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] bg-muted", children: /* @__PURE__ */ jsx("img", { src: images[0].src, alt: images[0].alt ?? title ?? "", loading: "lazy", className: "size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]" }) }) : /* @__PURE__ */ jsx(FallbackImage, {}),
-    tag && /* @__PURE__ */ jsx("span", { className: "absolute start-3 top-3 z-10 rounded-[var(--enad-card-radius)] bg-background/90 px-2 py-0.5 text-xs font-medium text-foreground", children: tag }),
-    showFavorites && /* @__PURE__ */ jsx(
-      FavoriteButton,
-      {
-        HeartIcon,
-        onFavoriteClick,
-        className: "absolute end-3 top-3 z-10 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"
-      }
-    ),
-    /* @__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",
-        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("p", { className: "line-clamp-2 text-sm font-medium text-white", children: title }),
-          price && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-white/80", children: price })
-        ]
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx(OptionalLink, { href, radiusClass: "rounded-[var(--enad-card-radius)]", children: content });
+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 ListCard({
-  images = [],
-  title,
-  subtitle,
-  price,
-  href,
-  className
-}) {
-  const content = /* @__PURE__ */ jsxs(Card, { className: cn("flex overflow-hidden border-0 shadow-none", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-32 shrink-0", children: images[0] ? /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] bg-muted", children: /* @__PURE__ */ jsx("img", { src: images[0].src, alt: images[0].alt ?? title ?? "", loading: "lazy", className: "size-full object-cover" }) }) : /* @__PURE__ */ jsx(FallbackImage, {}) }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "flex min-w-0 flex-col justify-center p-4", children: [
-      title && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm font-medium text-foreground", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-sm text-muted-foreground", children: subtitle }),
-      price && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium text-foreground", children: price })
-    ] })
-  ] });
-  return /* @__PURE__ */ jsx(OptionalLink, { href, children: content });
+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 StrippedCard({
-  images = [],
-  title,
-  price,
-  href,
-  className
-}) {
-  const content = /* @__PURE__ */ jsxs("div", { className: cn("group min-w-0", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: images[0] ? /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] bg-muted", children: /* @__PURE__ */ jsx("img", { src: images[0].src, alt: images[0].alt ?? title ?? "", loading: "lazy", className: "size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]" }) }) : /* @__PURE__ */ jsx(FallbackImage, {}) }),
-    title && /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-2 text-sm text-foreground", children: title }),
-    price && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: price })
-  ] });
-  return /* @__PURE__ */ jsx(OptionalLink, { href, children: content });
-}
-function GalleryCard({
-  images = [],
-  title,
-  subtitle,
-  price,
-  tag,
-  href,
-  showFavorites = false,
-  showPaginationDots = true,
-  onFavoriteClick,
-  className,
-  HeartIcon
-}) {
-  const imageElements = images.map((img, i) => /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] bg-muted", children: /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: img.src,
-      alt: img.alt ?? title ?? "",
-      loading: "lazy",
-      className: "size-full object-cover"
-    }
-  ) }, i));
-  const content = /* @__PURE__ */ jsxs(Card, { className: cn("enad-interactive group overflow-hidden border-0 shadow-none", className), children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "relative p-0", children: [
-      /* @__PURE__ */ jsx(
-        GalleryImageArea,
-        {
-          imageElements,
-          fallback: /* @__PURE__ */ jsx(FallbackImage, {}),
-          showPaginationDots
-        }
-      ),
-      tag && /* @__PURE__ */ jsx("span", { className: "absolute start-3 top-3 rounded-[var(--enad-card-radius)] bg-background/90 px-2 py-0.5 text-xs font-medium text-foreground", children: tag }),
-      showFavorites && /* @__PURE__ */ jsx(
-        FavoriteButton,
-        {
-          HeartIcon,
-          onFavoriteClick,
-          className: "absolute end-3 top-3 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"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(CardFooter, { className: "flex min-w-0 flex-col items-start gap-0.5 p-3", children: [
-      title && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm font-medium text-foreground", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: subtitle }),
-      price && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: price })
-    ] })
-  ] });
-  return /* @__PURE__ */ jsx(OptionalLink, { href, children: content });
+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 HeartIcon = useIcon("heart");
-  const layoutProps = { ...props, HeartIcon };
-  switch (props.layout ?? "gallery") {
-    case "horizontal":
-      return /* @__PURE__ */ jsx(HorizontalCard, { ...layoutProps });
-    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 });
-  }
+	const cardDefault = useVariantDefault("productCard");
+	const HeartIcon = useIcon("heart");
+	const layout = props.layout ?? cardDefault ?? "gallery";
+	const layoutProps = {
+		...props,
+		HeartIcon
+	};
+	switch (layout) {
+		case "horizontal": return /* @__PURE__ */ jsx(HorizontalCard, { ...layoutProps });
+		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 });
+	}
 }
-export {
-  ProductCard
-};
+//#endregion
+export { ProductCard };
+
 //# sourceMappingURL=product-card.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/client/storefront/blocks/product-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { Card, CardContent, CardFooter, CardHeader } from \"../../ui-resolver/card\"\nimport { cn } from \"../../ui/utils\"\nimport { SwipeableCarousel } from \"../carousel/swipeable-carousel\"\nimport type { ProductCardProps } from \"../types\"\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(\"block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\", radiusClass)}\n    >\n      {children}\n    </a>\n  )\n}\n\nfunction FallbackImage() {\n  return <div className=\"relative aspect-[4/5] bg-muted\" aria-hidden=\"true\" />\n}\n\nfunction FavoriteButton({\n  HeartIcon,\n  onFavoriteClick,\n  className,\n}: {\n  HeartIcon: React.ComponentType<{ className?: string }>\n  onFavoriteClick?: () => void\n  className: string\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        e.preventDefault()\n        e.stopPropagation()\n        onFavoriteClick?.()\n      }}\n      className={className}\n      aria-label=\"Add to favorites\"\n    >\n      <HeartIcon className=\"size-4\" />\n    </button>\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    <Card className={cn(\"enad-interactive group flex overflow-hidden border-0 shadow-[var(--enad-card-shadow)] transition-shadow duration-[var(--enad-motion-duration)] hover:shadow-[var(--enad-card-hover-shadow)]\", className)}>\n      <div className=\"relative w-1/3 shrink-0\">\n        {images[0] ? (\n          <div className=\"relative aspect-[4/5] bg-muted\">\n            <img src={images[0].src} alt={images[0].alt ?? title ?? \"\"} loading=\"lazy\" className=\"size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\" />\n          </div>\n        ) : <FallbackImage />}\n        {tag && (\n          <span className=\"absolute start-2 top-2 rounded-[var(--enad-card-radius)] bg-background/90 px-2 py-0.5 text-xs font-medium text-foreground\">\n            {tag}\n          </span>\n        )}\n      </div>\n      <CardContent className=\"flex min-w-0 flex-1 flex-col justify-center p-4 md:p-6\">\n        {title && <p className=\"line-clamp-2 text-base font-medium text-foreground\">{title}</p>}\n        {subtitle && <p className=\"mt-1 truncate text-sm text-muted-foreground\">{subtitle}</p>}\n        {price && <p className=\"mt-2 text-base font-medium text-foreground\">{price}</p>}\n        {showFavorites && (\n          <FavoriteButton\n            HeartIcon={HeartIcon}\n            onFavoriteClick={onFavoriteClick}\n            className=\"mt-3 self-start rounded-full bg-muted p-1.5 text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          />\n        )}\n      </CardContent>\n    </Card>\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    <div className={cn(\"enad-interactive group relative overflow-hidden rounded-[var(--enad-card-radius)]\", className)}>\n      {images[0] ? (\n        <div className=\"relative aspect-[4/5] bg-muted\">\n          <img src={images[0].src} alt={images[0].alt ?? title ?? \"\"} loading=\"lazy\" className=\"size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\" />\n        </div>\n      ) : <FallbackImage />}\n\n      {tag && (\n        <span className=\"absolute start-3 top-3 z-10 rounded-[var(--enad-card-radius)] bg-background/90 px-2 py-0.5 text-xs font-medium text-foreground\">\n          {tag}\n        </span>\n      )}\n\n      {showFavorites && (\n        <FavoriteButton\n          HeartIcon={HeartIcon}\n          onFavoriteClick={onFavoriteClick}\n          className=\"absolute end-3 top-3 z-10 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        />\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={{ background: \"linear-gradient(to top, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), transparent)\" }}\n      >\n        {title && <p className=\"line-clamp-2 text-sm font-medium text-white\">{title}</p>}\n        {price && <p className=\"mt-0.5 text-sm text-white/80\">{price}</p>}\n      </div>\n    </div>\n  )\n  return <OptionalLink href={href} radiusClass=\"rounded-[var(--enad-card-radius)]\">{content}</OptionalLink>\n}\n\n/* ─── List layout ─── */\n\nfunction ListCard({\n  images = [],\n  title,\n  subtitle,\n  price,\n  href,\n  className,\n}: CardLayoutProps) {\n  const content = (\n    <Card className={cn(\"flex overflow-hidden border-0 shadow-none\", className)}>\n      <div className=\"w-32 shrink-0\">\n        {images[0] ? (\n          <div className=\"relative aspect-[4/5] bg-muted\">\n            <img src={images[0].src} alt={images[0].alt ?? title ?? \"\"} loading=\"lazy\" className=\"size-full object-cover\" />\n          </div>\n        ) : <FallbackImage />}\n      </div>\n      <CardContent className=\"flex min-w-0 flex-col justify-center p-4\">\n        {title && <p className=\"line-clamp-2 text-sm font-medium text-foreground\">{title}</p>}\n        {subtitle && <p className=\"mt-0.5 truncate text-sm text-muted-foreground\">{subtitle}</p>}\n        {price && <p className=\"mt-1 text-sm font-medium text-foreground\">{price}</p>}\n      </CardContent>\n    </Card>\n  )\n  return <OptionalLink href={href}>{content}</OptionalLink>\n}\n\n/* ─── Stripped layout ─── */\n\nfunction StrippedCard({\n  images = [],\n  title,\n  price,\n  href,\n  className,\n}: CardLayoutProps) {\n  const content = (\n    <div className={cn(\"group min-w-0\", className)}>\n      <div className=\"relative overflow-hidden\">\n        {images[0] ? (\n          <div className=\"relative aspect-[4/5] bg-muted\">\n            <img src={images[0].src} alt={images[0].alt ?? title ?? \"\"} loading=\"lazy\" className=\"size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\" />\n          </div>\n        ) : <FallbackImage />}\n      </div>\n      {title && <p className=\"mt-2 line-clamp-2 text-sm text-foreground\">{title}</p>}\n      {price && <p className=\"text-sm text-muted-foreground\">{price}</p>}\n    </div>\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    <div key={i} className=\"relative aspect-[4/5] bg-muted\">\n      <img\n        src={img.src}\n        alt={img.alt ?? title ?? \"\"}\n        loading=\"lazy\"\n        className=\"size-full object-cover\"\n      />\n    </div>\n  ))\n\n  const content = (\n    <Card className={cn(\"enad-interactive group overflow-hidden border-0 shadow-none\", className)}>\n      <CardHeader className=\"relative p-0\">\n        <GalleryImageArea\n          imageElements={imageElements}\n          fallback={<FallbackImage />}\n          showPaginationDots={showPaginationDots}\n        />\n\n        {tag && (\n          <span className=\"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            {tag}\n          </span>\n        )}\n\n        {showFavorites && (\n          <FavoriteButton\n            HeartIcon={HeartIcon}\n            onFavoriteClick={onFavoriteClick}\n            className=\"absolute end-3 top-3 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          />\n        )}\n      </CardHeader>\n\n      <CardFooter className=\"flex min-w-0 flex-col items-start gap-0.5 p-3\">\n        {title && <p className=\"line-clamp-2 text-sm font-medium text-foreground\">{title}</p>}\n        {subtitle && <p className=\"truncate text-sm text-muted-foreground\">{subtitle}</p>}\n        {price && <p className=\"text-sm font-medium text-foreground\">{price}</p>}\n      </CardFooter>\n    </Card>\n  )\n  return <OptionalLink href={href}>{content}</OptionalLink>\n}\n\n/* ─── Main component (dispatcher) ─── */\n\nfunction ProductCard(props: ProductCardProps) {\n  const HeartIcon = useIcon(\"heart\")\n  const layoutProps: CardLayoutProps = { ...props, HeartIcon }\n\n  switch (props.layout ?? \"gallery\") {\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":"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","names":[]}
+{"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":"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"}

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

@@ -1,4 +1,16 @@
-import type { ProductImageProps } from "../types";
-declare function ProductImage({ images, aspectRatio, showZoom, arrows, showDots, showThumbnails, className, }: ProductImageProps): import("react/jsx-runtime").JSX.Element;
+import { ProductImageProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/product-image.d.ts
+declare function ProductImage({
+  images,
+  aspectRatio,
+  showZoom,
+  arrows,
+  showDots,
+  showThumbnails,
+  className
+}: ProductImageProps): react_jsx_runtime0.JSX.Element;
+//#endregion
 export { ProductImage, type ProductImageProps };
 //# sourceMappingURL=product-image.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"product-image.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/product-image.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAWjD,iBAAS,YAAY,CAAC,EACpB,MAAM,EACN,WAAmB,EACnB,QAAgB,EAChB,MAAiB,EACjB,QAAe,EACf,cAAsB,EACtB,SAAS,GACV,EAAE,iBAAiB,2CAwFnB;AAED,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"product-image.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/product-image.tsx"],"mappings":";;;;iBAgBS,YAAA,CAAA;EACP,MAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,QAAA;EACA,cAAA;EACA;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}