@enadhq/enad-react-sdk 1.0.0 → 1.1.0

package/dist/client/storefront/blocks/link-block.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-block.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/link-block.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { colorThemeClasses, isThemeDark, type LinkBlockProps } from \"../types\"\n\n/* ─── Shared types ─── */\n\ntype VariantProps = LinkBlockProps & {\n  dark: boolean\n  themeClasses: string\n}\n\nconst headingStyle = { fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties\n\n/* ─── Shared link wrapper ─── */\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\n/* ─── Card variant ─── */\n\nfunction CardVariant({\n  image,\n  eyebrow,\n  title,\n  buttonLabel,\n  buttonHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const content = (\n    <div\n      className={cn(\n        \"enad-interactive group overflow-hidden rounded-[var(--enad-card-radius)]\",\n        \"shadow-[var(--enad-card-shadow)] transition-shadow duration-[var(--enad-motion-duration)] hover:shadow-[var(--enad-card-hover-shadow)]\",\n        themeClasses || \"bg-background\",\n        className,\n      )}\n    >\n      {/* Image top */}\n      {image?.src ? (\n        <div className=\"overflow-hidden rounded-t-[var(--enad-image-radius)] bg-muted\">\n          <img\n            src={image.src}\n            alt={image.alt ?? title ?? \"\"}\n            loading=\"lazy\"\n            className=\"aspect-[3/2] w-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n          />\n        </div>\n      ) : (\n        <div className=\"aspect-[3/2] w-full bg-muted\" aria-hidden=\"true\" />\n      )}\n\n      {/* Text content below */}\n      <div className=\"min-w-0 p-6\">\n        {eyebrow && (\n          <p className={cn(\"mb-1 text-sm uppercase tracking-widest\", dark ? \"text-white/70\" : \"text-muted-foreground\")}>\n            {eyebrow}\n          </p>\n        )}\n        {title && (\n          <h3\n            className={cn(\"line-clamp-2 text-xl font-heading\", dark ? \"text-white\" : \"text-foreground\")}\n            style={headingStyle}\n          >\n            {title}\n          </h3>\n        )}\n        {buttonLabel && (\n          <span className={cn(\"mt-3 inline-block text-sm font-medium line-clamp-3\", dark ? \"text-white/80\" : \"text-foreground\")}>\n            {buttonLabel}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n\n  return (\n    <OptionalLink href={buttonHref} radiusClass=\"rounded-[var(--enad-card-radius)]\">\n      {content}\n    </OptionalLink>\n  )\n}\n\n/* ─── Text-only variant ─── */\n\nfunction TextOnlyVariant({\n  eyebrow,\n  title,\n  buttonLabel,\n  buttonHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const content = (\n    <div\n      className={cn(\n        \"enad-interactive group rounded-[var(--enad-card-radius)] border transition-colors duration-[var(--enad-motion-duration)]\",\n        \"border-[length:var(--enad-border-width)] px-6 py-5\",\n        dark\n          ? \"border-white/20 hover:bg-white/10\"\n          : \"border-border hover:bg-accent\",\n        themeClasses,\n        className,\n      )}\n    >\n      {eyebrow && (\n        <p className={cn(\"mb-1 text-sm uppercase tracking-widest\", dark ? \"text-white/70\" : \"text-muted-foreground\")}>\n          {eyebrow}\n        </p>\n      )}\n      {title && (\n        <h3\n          className={cn(\"truncate text-lg font-heading\", dark ? \"text-white\" : \"text-foreground\")}\n          style={headingStyle}\n        >\n          {title}\n        </h3>\n      )}\n      {buttonLabel && (\n        <span className={cn(\"mt-2 inline-block text-sm font-medium\", dark ? \"text-white/80\" : \"text-muted-foreground\")}>\n          {buttonLabel}\n        </span>\n      )}\n    </div>\n  )\n\n  return (\n    <OptionalLink href={buttonHref} radiusClass=\"rounded-[var(--enad-card-radius)]\">\n      {content}\n    </OptionalLink>\n  )\n}\n\n/* ─── Overlay variant (default) ─── */\n\nfunction OverlayVariant({\n  image,\n  eyebrow,\n  title,\n  buttonLabel,\n  buttonHref,\n  className,\n}: VariantProps) {\n  const content = (\n    <div className={cn(\"enad-interactive group relative aspect-[3/4] overflow-hidden md:aspect-[2/1]\", className)}>\n      {/* Background image */}\n      {image?.src ? (\n        <img\n          src={image.src}\n          alt={image.alt ?? title ?? \"\"}\n          loading=\"lazy\"\n          className=\"size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n        />\n      ) : (\n        <div className=\"size-full bg-primary\" aria-hidden=\"true\" />\n      )}\n\n      {/* Gradient overlay */}\n      <div\n        className=\"absolute inset-0\"\n        style={{ background: \"linear-gradient(to top, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-to-opacity) * 100%), transparent))\" }}\n      />\n\n      {/* Text content */}\n      <div className=\"absolute inset-x-0 bottom-0 min-w-0 p-6 md:p-8\">\n        {eyebrow && (\n          <p className=\"mb-1 text-sm uppercase tracking-widest text-white/70\">\n            {eyebrow}\n          </p>\n        )}\n        {title && (\n          <h3 className=\"line-clamp-2 text-xl font-heading text-white md:text-2xl\" style={headingStyle}>\n            {title}\n          </h3>\n        )}\n        {buttonLabel && (\n          <span className=\"mt-3 inline-block border-b border-white/50 pb-0.5 text-sm text-white transition-colors group-hover:border-white\">\n            {buttonLabel}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n\n  return <OptionalLink href={buttonHref}>{content}</OptionalLink>\n}\n\n/* ─── Main component (dispatcher) ─── */\n\nfunction LinkBlock(props: LinkBlockProps) {\n  const dark = isThemeDark(props.colorTheme)\n  const themeClasses = colorThemeClasses(props.colorTheme)\n  const variantProps: VariantProps = { ...props, dark, themeClasses }\n\n  switch (props.variant ?? \"overlay\") {\n    case \"card\":\n      return <CardVariant {...variantProps} />\n    case \"text-only\":\n      return <TextOnlyVariant {...variantProps} />\n    default:\n      return <OverlayVariant {...variantProps} />\n  }\n}\n\nexport { LinkBlock, type LinkBlockProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,77 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/product-card-parts.d.ts
+/**
+ * Root container for a composable product card.
+ * Provides group context for hover effects and overflow handling.
+ */
+declare function ProductCardRoot({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+/**
+ * Container for the product image area.
+ * Use as a wrapper for ProductCardImage, ProductCardTag, and ProductCardFavoriteButton.
+ */
+declare function ProductCardImageArea({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+/**
+ * Product image with lazy loading.
+ */
+declare function ProductCardImage({
+  className,
+  alt,
+  loading,
+  ...props
+}: React$1.ComponentProps<"img">): react_jsx_runtime0.JSX.Element;
+/**
+ * Badge overlay for product status (Sale, New, etc.).
+ * Positioned absolutely within ProductCardImageArea by default.
+ */
+declare function ProductCardTag({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime0.JSX.Element;
+/**
+ * Favorite/wishlist toggle button.
+ * Stops event propagation by default (safe inside links).
+ */
+declare function ProductCardFavoriteButton({
+  className,
+  onClick,
+  ...props
+}: React$1.ComponentProps<"button">): react_jsx_runtime0.JSX.Element;
+/**
+ * Container for product text content (title, subtitle, price).
+ */
+declare function ProductCardContent({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+/**
+ * Product name / title.
+ */
+declare function ProductCardTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<"p">): react_jsx_runtime0.JSX.Element;
+/**
+ * Secondary text (category, brand, etc.).
+ */
+declare function ProductCardSubtitle({
+  className,
+  ...props
+}: React$1.ComponentProps<"p">): react_jsx_runtime0.JSX.Element;
+/**
+ * Price display.
+ */
+declare function ProductCardPrice({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProductCardContent, ProductCardFavoriteButton, ProductCardImage, ProductCardImageArea, ProductCardPrice, ProductCardRoot, ProductCardSubtitle, ProductCardTag, ProductCardTitle };
+//# sourceMappingURL=product-card-parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-card-parts.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/product-card-parts.tsx"],"mappings":";;;;;;;AAE+B;iBAStB,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;iBAiBpE,oBAAA,CAAA;EAAuB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAazE,gBAAA,CAAA;EACP,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;iBAgBrB,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA;;AAnDA;;;iBAoEpE,yBAAA,CAAA;EACP,SAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAuBxB,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAavE,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAanE,mBAAA,CAAA;EAAsB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;AAxGG;;iBAqHzE,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,112 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/product-card-parts.tsx
+/**
+* Root container for a composable product card.
+* Provides group context for hover effects and overflow handling.
+*/
+function ProductCardRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "product-card",
+		className: cn("enad-interactive group overflow-hidden rounded-[var(--enad-card-radius)]", className),
+		...props
+	});
+}
+/**
+* Container for the product image area.
+* Use as a wrapper for ProductCardImage, ProductCardTag, and ProductCardFavoriteButton.
+*/
+function ProductCardImageArea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "product-card-image-area",
+		className: cn("relative bg-muted", className),
+		...props
+	});
+}
+/**
+* Product image with lazy loading.
+*/
+function ProductCardImage({ className, alt = "", loading = "lazy", ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		"data-slot": "product-card-image",
+		alt,
+		loading,
+		className: cn("size-full object-cover", className),
+		...props
+	});
+}
+/**
+* Badge overlay for product status (Sale, New, etc.).
+* Positioned absolutely within ProductCardImageArea by default.
+*/
+function ProductCardTag({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "product-card-tag",
+		className: cn("absolute start-3 top-3 rounded-[var(--enad-card-radius)] bg-background/90 px-2 py-0.5 text-xs font-medium text-foreground", className),
+		...props
+	});
+}
+/**
+* Favorite/wishlist toggle button.
+* Stops event propagation by default (safe inside links).
+*/
+function ProductCardFavoriteButton({ className, onClick, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "product-card-favorite",
+		className: cn("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", className),
+		"aria-label": "Add to favorites",
+		onClick: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			onClick?.(e);
+		},
+		...props
+	});
+}
+/**
+* Container for product text content (title, subtitle, price).
+*/
+function ProductCardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "product-card-content",
+		className: cn("flex min-w-0 flex-col gap-0.5 p-3", className),
+		...props
+	});
+}
+/**
+* Product name / title.
+*/
+function ProductCardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "product-card-title",
+		className: cn("line-clamp-2 text-sm font-medium text-foreground", className),
+		...props
+	});
+}
+/**
+* Secondary text (category, brand, etc.).
+*/
+function ProductCardSubtitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "product-card-subtitle",
+		className: cn("truncate text-sm text-muted-foreground", className),
+		...props
+	});
+}
+/**
+* Price display.
+*/
+function ProductCardPrice({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "product-card-price",
+		className: cn("text-sm font-medium text-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { ProductCardContent, ProductCardFavoriteButton, ProductCardImage, ProductCardImageArea, ProductCardPrice, ProductCardRoot, ProductCardSubtitle, ProductCardTag, ProductCardTitle };
+
+//# sourceMappingURL=product-card-parts.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,8 @@
+import { ProductCardProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/product-card.d.ts
+declare function ProductCard(props: ProductCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProductCard, type ProductCardProps };
+//# sourceMappingURL=product-card.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +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";
+//#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(ProductCardImageArea, {
+		className: "aspect-[var(--enad-image-product-aspect)]",
+		"aria-hidden": "true"
+	});
+}
+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 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 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");
+	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 });
+	}
+}
+//#endregion
+export { ProductCard };
+
+//# sourceMappingURL=product-card.mjs.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1 @@
+{"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"}

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

@@ -0,0 +1,81 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import { SwipeableCarousel } from "../carousel/swipeable-carousel.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/product-image.tsx
+const aspectClasses = {
+	"1:1": "aspect-square",
+	"4:5": "aspect-[4/5]"
+};
+function getZoomLabel(zoomed) {
+	return zoomed ? "Zoom out" : "Zoom in";
+}
+function ProductImage({ images, aspectRatio = "4:5", showZoom = false, arrows = "outset", showDots = true, showThumbnails = false, className }) {
+	const [zoomed, setZoomed] = React$1.useState(false);
+	const [activeSlide, setActiveSlide] = React$1.useState(0);
+	const toggleZoom = () => {
+		if (showZoom) setZoomed((z) => !z);
+	};
+	const handleZoomKeyDown = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			toggleZoom();
+		}
+	};
+	const imageElements = images.map((img, i) => /* @__PURE__ */ jsx("div", {
+		className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio], showZoom && (zoomed ? "cursor-zoom-out" : "cursor-zoom-in")),
+		...showZoom && {
+			role: "button",
+			tabIndex: 0,
+			"aria-label": getZoomLabel(zoomed),
+			onClick: toggleZoom,
+			onKeyDown: handleZoomKeyDown
+		},
+		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")
+		})
+	}, i));
+	if (images.length === 0) return /* @__PURE__ */ jsx("div", { className: cn("bg-muted", aspectClasses[aspectRatio], className) });
+	if (images.length === 1) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: imageElements[0]
+	});
+	const carousel = /* @__PURE__ */ jsx(SwipeableCarousel, {
+		items: imageElements,
+		arrows,
+		showDots,
+		activeSlide,
+		onSlideChange: setActiveSlide
+	});
+	if (showThumbnails && images.length > 1) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex gap-3", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "hidden md:flex flex-col gap-2 w-16 shrink-0",
+			children: images.map((img, i) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `View image ${i + 1}`,
+				onClick: () => setActiveSlide(i),
+				className: cn("relative aspect-square overflow-hidden rounded-[var(--enad-card-radius)] border-2 transition", i === activeSlide ? "border-primary ring-1 ring-primary/30" : "border-transparent opacity-60 hover:opacity-100"),
+				children: /* @__PURE__ */ jsx("img", {
+					src: img.src,
+					alt: img.alt ?? "",
+					className: "size-full object-cover"
+				})
+			}, i))
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children: carousel
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: carousel
+	});
+}
+//#endregion
+export { ProductImage };
+
+//# sourceMappingURL=product-image.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,10 @@
+import { SpacerProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/spacer.d.ts
+declare function Spacer({
+  size
+}: SpacerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Spacer, type SpacerProps };
+//# sourceMappingURL=spacer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/spacer.tsx"],"mappings":";;;;iBAUS,MAAA,CAAA;EAAS;AAAA,GAAe,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}