@enadhq/enad-react-sdk 1.2.0 → 1.3.0

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

@@ -1,108 +1,111 @@
 "use client";
 import { cn } from "../../ui/utils.mjs";
-import { StorefrontButton } from "../primitives/button.mjs";
-import { StorefrontTextLink } from "../primitives/text-link.mjs";
+import { defineSlotRecipe } from "../../ui-resolver/recipe.mjs";
+import { BlockHeading } from "../primitives/block-heading.mjs";
+import { CTAGroup } from "../primitives/cta-group.mjs";
 import { colorThemeClasses, isThemeDark } from "../types.mjs";
 import "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/blocks/text-content-with-image.tsx
-function CTAElement({ buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark }) {
-	if (!buttonLabel && !textLinkLabel) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mt-6 flex flex-wrap items-center gap-4",
-		children: [buttonLabel && buttonHref && /* @__PURE__ */ jsx(StorefrontButton, {
-			href: buttonHref,
-			variant: dark ? "outline" : "primary",
-			children: buttonLabel
-		}), textLinkLabel && textLinkHref && /* @__PURE__ */ jsx(StorefrontTextLink, {
-			href: textLinkHref,
-			className: dark ? "text-white" : void 0,
-			children: textLinkLabel
-		})]
-	});
-}
-const headingStyle = {
-	fontWeight: "var(--enad-heading-weight)",
-	letterSpacing: "var(--enad-heading-tracking)",
-	textTransform: "var(--enad-heading-transform)"
-};
-function TextBlockContent({ preheader, heading, body, dark, preheaderColor = dark ? "text-white/70" : "text-muted-foreground", headingColor = dark ? "text-white" : "text-foreground", bodyColor = dark ? "text-white/80" : "text-muted-foreground", bodyMaxWidth = "" }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		preheader && /* @__PURE__ */ jsx("p", {
-			className: cn("mb-2 text-sm uppercase tracking-widest", preheaderColor),
-			children: preheader
-		}),
-		heading && /* @__PURE__ */ jsx("h2", {
-			className: cn("text-2xl font-heading md:text-3xl", headingColor),
-			style: headingStyle,
-			children: heading
-		}),
-		body && /* @__PURE__ */ jsx("p", {
-			className: cn("mt-4 text-base leading-relaxed", bodyColor, bodyMaxWidth),
-			children: body
-		})
-	] });
-}
-function StackedVariant({ image, fullWidth = false, preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+const textContentWithImageRecipe = defineSlotRecipe({
+	slots: [
+		"root",
+		"inner",
+		"imageArea",
+		"image",
+		"textArea"
+	],
+	base: {
+		root: "",
+		inner: "",
+		imageArea: "relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted",
+		image: "size-full object-cover",
+		textArea: "min-w-0"
+	},
+	variants: {
+		variant: {
+			"side-by-side": { imageArea: "aspect-[4/5]" },
+			stacked: {
+				imageArea: "aspect-[16/9] w-full",
+				textArea: "py-8"
+			},
+			overlap: {
+				imageArea: "lg:w-3/5",
+				textArea: "relative z-10 min-w-0 rounded-[var(--enad-card-radius)] p-8 shadow-[var(--enad-card-shadow)] lg:p-10"
+			}
+		},
+		fullWidth: {
+			true: {},
+			false: {}
+		},
+		imagePosition: {
+			first: {},
+			last: {}
+		}
+	},
+	defaultVariants: {
+		variant: "side-by-side",
+		fullWidth: "false",
+		imagePosition: "first"
+	},
+	compoundVariants: [
+		{
+			variant: "side-by-side",
+			fullWidth: "true",
+			css: {
+				inner: "grid lg:grid-cols-2",
+				textArea: "px-8 py-12 lg:px-16 lg:py-20"
+			}
+		},
+		{
+			variant: "side-by-side",
+			fullWidth: "false",
+			css: {
+				inner: "mx-auto grid max-w-7xl gap-[var(--enad-text-content-gap,2rem)] px-4 py-12 md:px-8 lg:items-center lg:gap-[calc(var(--enad-text-content-gap,2rem)*1.5)] lg:grid-cols-2",
+				textArea: "py-8 lg:py-0"
+			}
+		},
+		{
+			variant: "stacked",
+			fullWidth: "true",
+			css: { textArea: "px-8 lg:px-16" }
+		},
+		{
+			variant: "stacked",
+			fullWidth: "false",
+			css: { inner: "mx-auto max-w-7xl px-4 py-12 md:px-8" }
+		},
+		{
+			variant: "overlap",
+			css: { inner: "mx-auto max-w-7xl px-4 py-12 md:px-8" }
+		}
+	]
+});
+function StandardLayout({ image, imagePosition = "first", fullWidth = false, variant, preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
 	const hasImage = Boolean(image?.src);
-	return /* @__PURE__ */ jsx("section", {
-		className: cn(themeClasses, className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: cn(fullWidth ? "" : "mx-auto max-w-7xl px-4 py-12 md:px-8"),
-			children: [hasImage && /* @__PURE__ */ jsx("div", {
-				className: cn("relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted", "aspect-[16/9] w-full"),
-				children: /* @__PURE__ */ jsx("img", {
-					src: image?.src,
-					alt: image?.alt ?? "",
-					loading: "lazy",
-					className: "size-full object-cover"
-				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: cn("min-w-0 py-8", fullWidth && "px-8 lg:px-16"),
-				children: [/* @__PURE__ */ jsx(TextBlockContent, {
-					preheader,
-					heading,
-					body,
-					dark,
-					bodyMaxWidth: "max-w-2xl"
-				}), /* @__PURE__ */ jsx(CTAElement, {
-					buttonLabel,
-					buttonHref,
-					textLinkLabel,
-					textLinkHref,
-					dark
-				})]
-			})]
-		})
+	const classes = textContentWithImageRecipe({
+		variant,
+		fullWidth: fullWidth ? "true" : "false",
+		imagePosition
 	});
-}
-function OverlapCTA({ buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark }) {
-	if (!buttonLabel && !textLinkLabel) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mt-6 flex flex-wrap items-center gap-4",
-		children: [buttonLabel && buttonHref && /* @__PURE__ */ jsx(StorefrontButton, {
-			href: buttonHref,
-			variant: dark ? "outline" : "primary",
-			children: buttonLabel
-		}), textLinkLabel && textLinkHref && /* @__PURE__ */ jsx(StorefrontTextLink, {
-			href: textLinkHref,
-			className: dark ? "text-background" : void 0,
-			children: textLinkLabel
-		})]
-	});
-}
-function OverlapTextCard({ preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, hasImage, overlapPositionClass }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative z-10 min-w-0 rounded-[var(--enad-card-radius)] shadow-[var(--enad-card-shadow)]", hasImage ? "lg:w-2/5" : "w-full", dark ? "bg-foreground text-background" : "bg-background", "p-8 lg:p-10", hasImage ? "-mt-16 mx-4 lg:mt-0 lg:mx-0" : "", overlapPositionClass),
-		children: [/* @__PURE__ */ jsx(TextBlockContent, {
+	const imageEl = hasImage ? /* @__PURE__ */ jsx("div", {
+		className: cn(classes.imageArea, fullWidth && variant === "side-by-side" && "lg:aspect-auto"),
+		children: /* @__PURE__ */ jsx("img", {
+			src: image?.src,
+			alt: image?.alt ?? "",
+			loading: "lazy",
+			className: classes.image
+		})
+	}) : null;
+	const textEl = /* @__PURE__ */ jsxs("div", {
+		className: cn(classes.textArea, "flex flex-col justify-center"),
+		children: [/* @__PURE__ */ jsx(BlockHeading, {
 			preheader,
 			heading,
 			body,
 			dark,
-			preheaderColor: dark ? "text-background/70" : "text-muted-foreground",
-			headingColor: dark ? "text-background" : "text-foreground",
-			bodyColor: dark ? "text-background/80" : "text-muted-foreground"
-		}), /* @__PURE__ */ jsx(OverlapCTA, {
+			bodyMaxWidth: variant === "side-by-side" ? "max-w-lg" : "max-w-2xl"
+		}), /* @__PURE__ */ jsx(CTAGroup, {
 			buttonLabel,
 			buttonHref,
 			textLinkLabel,
@@ -110,109 +113,83 @@ function OverlapTextCard({ preheader, heading, body, buttonLabel, buttonHref, te
 			dark
 		})]
 	});
+	const showImageFirst = hasImage && imagePosition === "first";
+	const showImageLast = hasImage && imagePosition === "last";
+	return /* @__PURE__ */ jsx("section", {
+		className: cn(themeClasses, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn(classes.inner, hasImage && variant === "side-by-side" && fullWidth && "lg:grid-cols-2"),
+			children: [
+				showImageFirst && imageEl,
+				textEl,
+				showImageLast && imageEl,
+				!hasImage && null
+			]
+		})
+	});
 }
-function OverlapVariant({ image, imagePosition = "first", preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+function OverlapLayout({ image, imagePosition = "first", preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
 	const hasImage = Boolean(image?.src);
+	const classes = textContentWithImageRecipe({ variant: "overlap" });
 	const overlapPositionClass = (() => {
-		if (!hasImage) return "";
-		if (imagePosition === "last") return "lg:order-1 lg:-me-16";
-		return "lg:-ms-16";
+		if (!hasImage) return "w-full";
+		if (imagePosition === "last") return "lg:order-1 lg:-me-16 lg:w-2/5";
+		return "lg:-ms-16 lg:w-2/5";
 	})();
 	return /* @__PURE__ */ jsx("section", {
 		className: cn(themeClasses, className),
 		children: /* @__PURE__ */ jsx("div", {
-			className: "mx-auto max-w-7xl px-4 py-12 md:px-8",
+			className: classes.inner,
 			children: /* @__PURE__ */ jsxs("div", {
 				className: cn("relative", hasImage && "lg:flex lg:items-center"),
 				children: [hasImage && /* @__PURE__ */ jsx("div", {
-					className: cn("relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted lg:w-3/5", imagePosition === "last" ? "lg:order-2" : ""),
+					className: cn(classes.imageArea, imagePosition === "last" ? "lg:order-2" : ""),
 					children: /* @__PURE__ */ jsx("div", {
 						className: "aspect-[4/5] lg:aspect-[3/2]",
 						children: /* @__PURE__ */ jsx("img", {
 							src: image?.src,
 							alt: image?.alt ?? "",
 							loading: "lazy",
-							className: "size-full object-cover"
+							className: classes.image
 						})
 					})
-				}), /* @__PURE__ */ jsx(OverlapTextCard, {
-					preheader,
-					heading,
-					body,
-					buttonLabel,
-					buttonHref,
-					textLinkLabel,
-					textLinkHref,
-					dark,
-					hasImage,
-					overlapPositionClass
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn(classes.textArea, hasImage ? overlapPositionClass : "w-full", hasImage ? "-mt-16 mx-4 lg:mt-0 lg:mx-0" : "", dark ? "bg-foreground text-background" : "bg-background"),
+					children: [/* @__PURE__ */ jsx(BlockHeading, {
+						preheader,
+						heading,
+						body,
+						dark,
+						preheaderColor: dark ? "text-background/70" : "text-muted-foreground",
+						headingColor: dark ? "text-background" : "text-foreground",
+						bodyColor: dark ? "text-background/80" : "text-muted-foreground"
+					}), /* @__PURE__ */ jsx(CTAGroup, {
+						buttonLabel,
+						buttonHref,
+						textLinkLabel,
+						textLinkHref,
+						dark
+					})]
 				})]
 			})
 		})
 	});
 }
-function SideBySideContent({ hasImage, imagePosition, imageEl, textEl }) {
-	if (!hasImage) return textEl;
-	if (imagePosition === "first") return /* @__PURE__ */ jsxs(Fragment, { children: [imageEl, textEl] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [textEl, imageEl] });
-}
-function SideBySideVariant({ image, imagePosition = "first", fullWidth = false, preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
-	const hasImage = Boolean(image?.src);
-	const imageEl = hasImage ? /* @__PURE__ */ jsx("div", {
-		className: cn("relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted", fullWidth ? "aspect-[4/5] lg:aspect-auto" : "aspect-[4/5]"),
-		children: /* @__PURE__ */ jsx("img", {
-			src: image?.src,
-			alt: image?.alt ?? "",
-			loading: "lazy",
-			className: "size-full object-cover"
-		})
-	}) : null;
-	const textEl = /* @__PURE__ */ jsxs("div", {
-		className: cn("flex min-w-0 flex-col justify-center", fullWidth ? "px-8 py-12 lg:px-16 lg:py-20" : "py-8 lg:py-0"),
-		children: [/* @__PURE__ */ jsx(TextBlockContent, {
-			preheader,
-			heading,
-			body,
-			dark,
-			bodyMaxWidth: "max-w-lg"
-		}), /* @__PURE__ */ jsx(CTAElement, {
-			buttonLabel,
-			buttonHref,
-			textLinkLabel,
-			textLinkHref,
-			dark
-		})]
-	});
-	return /* @__PURE__ */ jsx("section", {
-		className: cn(themeClasses, className),
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn(fullWidth ? cn("grid", hasImage && "lg:grid-cols-2") : cn("mx-auto grid max-w-7xl gap-8 px-4 py-12 md:px-8 lg:items-center lg:gap-12", hasImage && "lg:grid-cols-2")),
-			children: /* @__PURE__ */ jsx(SideBySideContent, {
-				hasImage,
-				imagePosition,
-				imageEl,
-				textEl
-			})
-		})
-	});
-}
 function TextContentWithImage(props) {
 	const { variant = "side-by-side", colorTheme, className } = props;
 	const dark = isThemeDark(colorTheme);
 	const themeClasses = colorThemeClasses(colorTheme);
-	const variantProps = {
+	const layoutProps = {
 		...props,
+		variant,
 		dark,
 		themeClasses,
 		className
 	};
-	switch (variant) {
-		case "stacked": return /* @__PURE__ */ jsx(StackedVariant, { ...variantProps });
-		case "overlap": return /* @__PURE__ */ jsx(OverlapVariant, { ...variantProps });
-		default: return /* @__PURE__ */ jsx(SideBySideVariant, { ...variantProps });
-	}
+	if (variant === "overlap") return /* @__PURE__ */ jsx(OverlapLayout, { ...layoutProps });
+	return /* @__PURE__ */ jsx(StandardLayout, { ...layoutProps });
 }
 //#endregion
-export { TextContentWithImage };
+export { TextContentWithImage, textContentWithImageRecipe };
 
 //# sourceMappingURL=text-content-with-image.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-content-with-image.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/text-content-with-image.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { StorefrontButton } from \"../primitives/button\"\nimport { StorefrontTextLink } from \"../primitives/text-link\"\nimport { colorThemeClasses, isThemeDark, type TextContentWithImageProps } from \"../types\"\n\n/* ─── Shared props for variant sub-components ─── */\n\ntype VariantProps = Omit<TextContentWithImageProps, \"variant\" | \"className\"> & {\n  dark: boolean\n  themeClasses: string\n  className?: string\n}\n\n/* ─── Shared CTA element builder ─── */\n\nfunction CTAElement({\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n}: {\n  buttonLabel?: string\n  buttonHref?: string\n  textLinkLabel?: string\n  textLinkHref?: string\n  dark: boolean\n}) {\n  if (!buttonLabel && !textLinkLabel) return null\n  return (\n    <div className=\"mt-6 flex flex-wrap items-center gap-4\">\n      {buttonLabel && buttonHref && (\n        <StorefrontButton href={buttonHref} variant={dark ? \"outline\" : \"primary\"}>\n          {buttonLabel}\n        </StorefrontButton>\n      )}\n      {textLinkLabel && textLinkHref && (\n        <StorefrontTextLink href={textLinkHref} className={dark ? \"text-white\" : undefined}>\n          {textLinkLabel}\n        </StorefrontTextLink>\n      )}\n    </div>\n  )\n}\n\n/* ─── Heading style constant ─── */\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 text block (preheader + heading + body) ─── */\n\nfunction TextBlockContent({\n  preheader,\n  heading,\n  body,\n  dark,\n  preheaderColor = dark ? \"text-white/70\" : \"text-muted-foreground\",\n  headingColor = dark ? \"text-white\" : \"text-foreground\",\n  bodyColor = dark ? \"text-white/80\" : \"text-muted-foreground\",\n  bodyMaxWidth = \"\",\n}: {\n  preheader?: string\n  heading?: string\n  body?: string\n  dark: boolean\n  preheaderColor?: string\n  headingColor?: string\n  bodyColor?: string\n  bodyMaxWidth?: string\n}) {\n  return (\n    <>\n      {preheader && (\n        <p className={cn(\"mb-2 text-sm uppercase tracking-widest\", preheaderColor)}>\n          {preheader}\n        </p>\n      )}\n      {heading && (\n        <h2\n          className={cn(\"text-2xl font-heading md:text-3xl\", headingColor)}\n          style={headingStyle}\n        >\n          {heading}\n        </h2>\n      )}\n      {body && (\n        <p className={cn(\"mt-4 text-base leading-relaxed\", bodyColor, bodyMaxWidth)}>\n          {body}\n        </p>\n      )}\n    </>\n  )\n}\n\n/* ─── Stacked variant ─── */\n\nfunction StackedVariant({\n  image,\n  fullWidth = false,\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const hasImage = Boolean(image?.src)\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div className={cn(fullWidth ? \"\" : \"mx-auto max-w-7xl px-4 py-12 md:px-8\")}>\n        {hasImage && (\n          <div className={cn(\"relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted\", \"aspect-[16/9] w-full\")}>\n            <img src={image?.src} alt={image?.alt ?? \"\"} loading=\"lazy\" className=\"size-full object-cover\" />\n          </div>\n        )}\n        <div className={cn(\"min-w-0 py-8\", fullWidth && \"px-8 lg:px-16\")}>\n          <TextBlockContent preheader={preheader} heading={heading} body={body} dark={dark} bodyMaxWidth=\"max-w-2xl\" />\n          <CTAElement buttonLabel={buttonLabel} buttonHref={buttonHref} textLinkLabel={textLinkLabel} textLinkHref={textLinkHref} dark={dark} />\n        </div>\n      </div>\n    </section>\n  )\n}\n\n/* ─── Overlap text card (extracted to reduce complexity) ─── */\n\nfunction OverlapCTA({\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n}: {\n  buttonLabel?: string\n  buttonHref?: string\n  textLinkLabel?: string\n  textLinkHref?: string\n  dark: boolean\n}) {\n  if (!buttonLabel && !textLinkLabel) return null\n  return (\n    <div className=\"mt-6 flex flex-wrap items-center gap-4\">\n      {buttonLabel && buttonHref && (\n        <StorefrontButton href={buttonHref} variant={dark ? \"outline\" : \"primary\"}>\n          {buttonLabel}\n        </StorefrontButton>\n      )}\n      {textLinkLabel && textLinkHref && (\n        <StorefrontTextLink href={textLinkHref} className={dark ? \"text-background\" : undefined}>\n          {textLinkLabel}\n        </StorefrontTextLink>\n      )}\n    </div>\n  )\n}\n\nfunction OverlapTextCard({\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  hasImage,\n  overlapPositionClass,\n}: {\n  preheader?: string\n  heading?: string\n  body?: string\n  buttonLabel?: string\n  buttonHref?: string\n  textLinkLabel?: string\n  textLinkHref?: string\n  dark: boolean\n  hasImage: boolean\n  overlapPositionClass: string\n}) {\n  return (\n    <div className={cn(\n      \"relative z-10 min-w-0 rounded-[var(--enad-card-radius)] shadow-[var(--enad-card-shadow)]\",\n      hasImage ? \"lg:w-2/5\" : \"w-full\",\n      dark ? \"bg-foreground text-background\" : \"bg-background\",\n      \"p-8 lg:p-10\",\n      hasImage ? \"-mt-16 mx-4 lg:mt-0 lg:mx-0\" : \"\",\n      overlapPositionClass,\n    )}>\n      <TextBlockContent\n        preheader={preheader}\n        heading={heading}\n        body={body}\n        dark={dark}\n        preheaderColor={dark ? \"text-background/70\" : \"text-muted-foreground\"}\n        headingColor={dark ? \"text-background\" : \"text-foreground\"}\n        bodyColor={dark ? \"text-background/80\" : \"text-muted-foreground\"}\n      />\n      <OverlapCTA buttonLabel={buttonLabel} buttonHref={buttonHref} textLinkLabel={textLinkLabel} textLinkHref={textLinkHref} dark={dark} />\n    </div>\n  )\n}\n\n/* ─── Overlap variant ─── */\n\nfunction OverlapVariant({\n  image,\n  imagePosition = \"first\",\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const hasImage = Boolean(image?.src)\n\n  const overlapPositionClass = (() => {\n    if (!hasImage) return \"\"\n    if (imagePosition === \"last\") return \"lg:order-1 lg:-me-16\"\n    return \"lg:-ms-16\"\n  })()\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div className=\"mx-auto max-w-7xl px-4 py-12 md:px-8\">\n        <div className={cn(\"relative\", hasImage && \"lg:flex lg:items-center\")}>\n          {hasImage && (\n            <div className={cn(\n              \"relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted lg:w-3/5\",\n              imagePosition === \"last\" ? \"lg:order-2\" : \"\",\n            )}>\n              <div className=\"aspect-[4/5] lg:aspect-[3/2]\">\n                <img src={image?.src} alt={image?.alt ?? \"\"} loading=\"lazy\" className=\"size-full object-cover\" />\n              </div>\n            </div>\n          )}\n\n          <OverlapTextCard\n            preheader={preheader}\n            heading={heading}\n            body={body}\n            buttonLabel={buttonLabel}\n            buttonHref={buttonHref}\n            textLinkLabel={textLinkLabel}\n            textLinkHref={textLinkHref}\n            dark={dark}\n            hasImage={hasImage}\n            overlapPositionClass={overlapPositionClass}\n          />\n        </div>\n      </div>\n    </section>\n  )\n}\n\n/* ─── Side-by-side content ordering helper ─── */\n\nfunction SideBySideContent({\n  hasImage,\n  imagePosition,\n  imageEl,\n  textEl,\n}: {\n  hasImage: boolean\n  imagePosition: string\n  imageEl: React.ReactNode\n  textEl: React.ReactNode\n}) {\n  if (!hasImage) return textEl\n  if (imagePosition === \"first\") {\n    return (\n      <>\n        {imageEl}\n        {textEl}\n      </>\n    )\n  }\n  return (\n    <>\n      {textEl}\n      {imageEl}\n    </>\n  )\n}\n\n/* ─── Side-by-side variant ─── */\n\nfunction SideBySideVariant({\n  image,\n  imagePosition = \"first\",\n  fullWidth = false,\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const hasImage = Boolean(image?.src)\n\n  const imageEl = hasImage ? (\n    <div className={cn(\"relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted\", fullWidth ? \"aspect-[4/5] lg:aspect-auto\" : \"aspect-[4/5]\")}>\n      <img src={image?.src} alt={image?.alt ?? \"\"} loading=\"lazy\" className=\"size-full object-cover\" />\n    </div>\n  ) : null\n\n  const textEl = (\n    <div className={cn(\"flex min-w-0 flex-col justify-center\", fullWidth ? \"px-8 py-12 lg:px-16 lg:py-20\" : \"py-8 lg:py-0\")}>\n      <TextBlockContent preheader={preheader} heading={heading} body={body} dark={dark} bodyMaxWidth=\"max-w-lg\" />\n      <CTAElement buttonLabel={buttonLabel} buttonHref={buttonHref} textLinkLabel={textLinkLabel} textLinkHref={textLinkHref} dark={dark} />\n    </div>\n  )\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div className={cn(\n        fullWidth\n          ? cn(\"grid\", hasImage && \"lg:grid-cols-2\")\n          : cn(\"mx-auto grid max-w-7xl gap-8 px-4 py-12 md:px-8 lg:items-center lg:gap-12\", hasImage && \"lg:grid-cols-2\"),\n      )}>\n        <SideBySideContent\n          hasImage={hasImage}\n          imagePosition={imagePosition}\n          imageEl={imageEl}\n          textEl={textEl}\n        />\n      </div>\n    </section>\n  )\n}\n\n/* ─── Main component ─── */\n\nfunction TextContentWithImage(props: TextContentWithImageProps) {\n  const { variant = \"side-by-side\", colorTheme, className } = props\n  const dark = isThemeDark(colorTheme)\n  const themeClasses = colorThemeClasses(colorTheme)\n\n  const variantProps: VariantProps = { ...props, dark, themeClasses, className }\n\n  switch (variant) {\n    case \"stacked\":\n      return <StackedVariant {...variantProps} />\n    case \"overlap\":\n      return <OverlapVariant {...variantProps} />\n    default:\n      return <SideBySideVariant {...variantProps} />\n  }\n}\n\nexport { TextContentWithImage, type TextContentWithImageProps }\n"],"mappings":"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"}
+{"version":3,"file":"text-content-with-image.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/text-content-with-image.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { defineSlotRecipe } from \"../../ui-resolver/recipe\";\nimport { colorThemeClasses, isThemeDark, type TextContentWithImageProps } from \"../types\";\nimport { BlockHeading } from \"../primitives/block-heading\";\nimport { CTAGroup } from \"../primitives/cta-group\";\n\n/* ─── Recipe ─── */\n\nconst textContentWithImageRecipe = defineSlotRecipe({\n  slots: [\"root\", \"inner\", \"imageArea\", \"image\", \"textArea\"] as const,\n  base: {\n    root: \"\",\n    inner: \"\",\n    imageArea: \"relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted\",\n    image: \"size-full object-cover\",\n    textArea: \"min-w-0\",\n  },\n  variants: {\n    variant: {\n      \"side-by-side\": {\n        imageArea: \"aspect-[4/5]\",\n      },\n      stacked: {\n        imageArea: \"aspect-[16/9] w-full\",\n        textArea: \"py-8\",\n      },\n      overlap: {\n        imageArea: \"lg:w-3/5\",\n        textArea:\n          \"relative z-10 min-w-0 rounded-[var(--enad-card-radius)] p-8 shadow-[var(--enad-card-shadow)] lg:p-10\",\n      },\n    },\n    fullWidth: {\n      true: {},\n      false: {},\n    },\n    imagePosition: {\n      first: {},\n      last: {},\n    },\n  },\n  defaultVariants: {\n    variant: \"side-by-side\",\n    fullWidth: \"false\",\n    imagePosition: \"first\",\n  },\n  compoundVariants: [\n    {\n      variant: \"side-by-side\",\n      fullWidth: \"true\",\n      css: {\n        inner: \"grid lg:grid-cols-2\",\n        textArea: \"px-8 py-12 lg:px-16 lg:py-20\",\n      },\n    },\n    {\n      variant: \"side-by-side\",\n      fullWidth: \"false\",\n      css: {\n        inner:\n          \"mx-auto grid max-w-7xl gap-[var(--enad-text-content-gap,2rem)] px-4 py-12 md:px-8 lg:items-center lg:gap-[calc(var(--enad-text-content-gap,2rem)*1.5)] lg:grid-cols-2\",\n        textArea: \"py-8 lg:py-0\",\n      },\n    },\n    {\n      variant: \"stacked\",\n      fullWidth: \"true\",\n      css: {\n        textArea: \"px-8 lg:px-16\",\n      },\n    },\n    {\n      variant: \"stacked\",\n      fullWidth: \"false\",\n      css: {\n        inner: \"mx-auto max-w-7xl px-4 py-12 md:px-8\",\n      },\n    },\n    {\n      variant: \"overlap\",\n      css: {\n        inner: \"mx-auto max-w-7xl px-4 py-12 md:px-8\",\n      },\n    },\n  ],\n});\n\n/* ─── Standard layout (side-by-side + stacked) ─── */\n\nfunction StandardLayout({\n  image,\n  imagePosition = \"first\",\n  fullWidth = false,\n  variant,\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: LayoutProps) {\n  const hasImage = Boolean(image?.src);\n  const classes = textContentWithImageRecipe({\n    variant,\n    fullWidth: fullWidth ? \"true\" : \"false\",\n    imagePosition: imagePosition,\n  });\n\n  const imageEl = hasImage ? (\n    <div\n      className={cn(classes.imageArea, fullWidth && variant === \"side-by-side\" && \"lg:aspect-auto\")}\n    >\n      <img src={image?.src} alt={image?.alt ?? \"\"} loading=\"lazy\" className={classes.image} />\n    </div>\n  ) : null;\n\n  const textEl = (\n    <div className={cn(classes.textArea, \"flex flex-col justify-center\")}>\n      <BlockHeading\n        preheader={preheader}\n        heading={heading}\n        body={body}\n        dark={dark}\n        bodyMaxWidth={variant === \"side-by-side\" ? \"max-w-lg\" : \"max-w-2xl\"}\n      />\n      <CTAGroup\n        buttonLabel={buttonLabel}\n        buttonHref={buttonHref}\n        textLinkLabel={textLinkLabel}\n        textLinkHref={textLinkHref}\n        dark={dark}\n      />\n    </div>\n  );\n\n  const showImageFirst = hasImage && imagePosition === \"first\";\n  const showImageLast = hasImage && imagePosition === \"last\";\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div\n        className={cn(\n          classes.inner,\n          hasImage && variant === \"side-by-side\" && fullWidth && \"lg:grid-cols-2\",\n        )}\n      >\n        {showImageFirst && imageEl}\n        {textEl}\n        {showImageLast && imageEl}\n        {!hasImage && null}\n      </div>\n    </section>\n  );\n}\n\n/* ─── Overlap layout ─── */\n\nfunction OverlapLayout({\n  image,\n  imagePosition = \"first\",\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: LayoutProps) {\n  const hasImage = Boolean(image?.src);\n  const classes = textContentWithImageRecipe({ variant: \"overlap\" });\n\n  const overlapPositionClass = (() => {\n    if (!hasImage) return \"w-full\";\n    if (imagePosition === \"last\") return \"lg:order-1 lg:-me-16 lg:w-2/5\";\n    return \"lg:-ms-16 lg:w-2/5\";\n  })();\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div className={classes.inner}>\n        <div className={cn(\"relative\", hasImage && \"lg:flex lg:items-center\")}>\n          {hasImage && (\n            <div className={cn(classes.imageArea, imagePosition === \"last\" ? \"lg:order-2\" : \"\")}>\n              <div className=\"aspect-[4/5] lg:aspect-[3/2]\">\n                <img\n                  src={image?.src}\n                  alt={image?.alt ?? \"\"}\n                  loading=\"lazy\"\n                  className={classes.image}\n                />\n              </div>\n            </div>\n          )}\n\n          <div\n            className={cn(\n              classes.textArea,\n              hasImage ? overlapPositionClass : \"w-full\",\n              hasImage ? \"-mt-16 mx-4 lg:mt-0 lg:mx-0\" : \"\",\n              dark ? \"bg-foreground text-background\" : \"bg-background\",\n            )}\n          >\n            <BlockHeading\n              preheader={preheader}\n              heading={heading}\n              body={body}\n              dark={dark}\n              preheaderColor={dark ? \"text-background/70\" : \"text-muted-foreground\"}\n              headingColor={dark ? \"text-background\" : \"text-foreground\"}\n              bodyColor={dark ? \"text-background/80\" : \"text-muted-foreground\"}\n            />\n            <CTAGroup\n              buttonLabel={buttonLabel}\n              buttonHref={buttonHref}\n              textLinkLabel={textLinkLabel}\n              textLinkHref={textLinkHref}\n              dark={dark}\n            />\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n/* ─── Internal layout prop type ─── */\n\ntype LayoutProps = TextContentWithImageProps & {\n  variant: \"side-by-side\" | \"stacked\" | \"overlap\";\n  dark: boolean;\n  themeClasses: string;\n};\n\n/* ─── Main component ─── */\n\nfunction TextContentWithImage(props: TextContentWithImageProps) {\n  const { variant = \"side-by-side\", colorTheme, className } = props;\n  const dark = isThemeDark(colorTheme);\n  const themeClasses = colorThemeClasses(colorTheme);\n\n  const layoutProps: LayoutProps = {\n    ...props,\n    variant,\n    dark,\n    themeClasses,\n    className,\n  };\n\n  if (variant === \"overlap\") {\n    return <OverlapLayout {...layoutProps} />;\n  }\n\n  return <StandardLayout {...layoutProps} />;\n}\n\nexport { TextContentWithImage, textContentWithImageRecipe, type TextContentWithImageProps };\n"],"mappings":"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"}

package/dist/client/storefront/carousel/swipeable-carousel.d.ts

@@ -1,3 +1,4 @@
+import { CarouselWheelAxis } from "../../ui/carousel.js";
 import * as React$1 from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -11,6 +12,8 @@ interface SwipeableCarouselProps {
   dotsClassName?: string;
   activeSlide?: number;
   onSlideChange?: (index: number) => void;
+  /** Controls which wheel/trackpad axes scroll the carousel. Defaults to "vertical". */
+  wheelAxis?: CarouselWheelAxis;
 }
 declare function SwipeableCarousel({
   items,
@@ -19,7 +22,8 @@ declare function SwipeableCarousel({
   showDots,
   dotsClassName,
   activeSlide,
-  onSlideChange
+  onSlideChange,
+  wheelAxis
 }: SwipeableCarouselProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { SwipeableCarousel, type SwipeableCarouselProps };

package/dist/client/storefront/carousel/swipeable-carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swipeable-carousel.d.ts","names":[],"sources":["../../../../src/client/storefront/carousel/swipeable-carousel.tsx"],"mappings":";;;;UAaU,sBAAA;EACR,KAAA,EAAO,OAAA,CAAM,SAAA;EACb,SAAA;EAFQ;EAIR,MAAA;EACA,QAAA;EACA,aAAA;EACA,WAAA;EACA,aAAA,IAAiB,KAAA;AAAA;AAAA,iBAGV,iBAAA,CAAA;EACP,KAAA;EACA,SAAA;EACA,MAAA;EACA,QAAA;EACA,aAAA;EACA,WAAA;EACA;AAAA,GACC,sBAAA,GAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"swipeable-carousel.d.ts","names":[],"sources":["../../../../src/client/storefront/carousel/swipeable-carousel.tsx"],"mappings":";;;;;UAcU,sBAAA;EACR,KAAA,EAAO,OAAA,CAAM,SAAA;EACb,SAAA;EAFQ;EAIR,MAAA;EACA,QAAA;EACA,aAAA;EACA,WAAA;EACA,aAAA,IAAiB,KAAA;EAPJ;EASb,SAAA,GAAY,iBAAA;AAAA;AAAA,iBAGL,iBAAA,CAAA;EACP,KAAA;EACA,SAAA;EACA,MAAA;EACA,QAAA;EACA,aAAA;EACA,WAAA;EACA,aAAA;EACA;AAAA,GACC,sBAAA,GAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/carousel/swipeable-carousel.mjs

@@ -4,7 +4,7 @@ import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/carousel/swipeable-carousel.tsx
-function SwipeableCarousel({ items, className, arrows, showDots = true, dotsClassName, activeSlide, onSlideChange }) {
+function SwipeableCarousel({ items, className, arrows, showDots = true, dotsClassName, activeSlide, onSlideChange, wheelAxis }) {
 	const [api, setApi] = React$1.useState();
 	const [current, setCurrent] = React$1.useState(0);
 	const [count, setCount] = React$1.useState(0);
@@ -29,6 +29,7 @@ function SwipeableCarousel({ items, className, arrows, showDots = true, dotsClas
 		children: [/* @__PURE__ */ jsxs(Carousel, {
 			setApi,
 			opts: { loop: !singleItem },
+			wheelAxis,
 			children: [/* @__PURE__ */ jsx(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { children: item }, index)) }), arrows && !singleItem && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CarouselPrevious, { className: arrows === "inset" ? "left-3 -translate-x-0" : void 0 }), /* @__PURE__ */ jsx(CarouselNext, { className: arrows === "inset" ? "right-3 translate-x-0" : void 0 })] })]
 		}), showDots && !singleItem && count > 1 && /* @__PURE__ */ jsx("div", {
 			className: cn("absolute inset-x-0 bottom-3 z-10 flex items-center justify-center gap-1.5", dotsClassName),

package/dist/client/storefront/carousel/swipeable-carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"swipeable-carousel.mjs","names":["React"],"sources":["../../../../src/client/storefront/carousel/swipeable-carousel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  type CarouselApi,\n} from \"../../ui-resolver/carousel\"\nimport { cn } from \"../../ui/utils\"\n\ninterface SwipeableCarouselProps {\n  items: React.ReactNode[]\n  className?: string\n  /** 'inset' — arrows float over the image edges; 'outset' — arrows sit outside the image bounds */\n  arrows?: \"inset\" | \"outset\"\n  showDots?: boolean\n  dotsClassName?: string\n  activeSlide?: number\n  onSlideChange?: (index: number) => void\n}\n\nfunction SwipeableCarousel({\n  items,\n  className,\n  arrows,\n  showDots = true,\n  dotsClassName,\n  activeSlide,\n  onSlideChange,\n}: SwipeableCarouselProps) {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) return\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap())\n\n    api.on(\"select\", () => {\n      const idx = api.selectedScrollSnap()\n      setCurrent(idx)\n      onSlideChange?.(idx)\n    })\n  }, [api, onSlideChange])\n\n  React.useEffect(() => {\n    if (!api || activeSlide === undefined) return\n    if (api.selectedScrollSnap() !== activeSlide) {\n      api.scrollTo(activeSlide)\n    }\n  }, [api, activeSlide])\n\n  if (items.length === 0) return null\n\n  const singleItem = items.length === 1\n\n  return (\n    <div className={cn(\"relative\", arrows === \"outset\" && \"mx-12\", className)}>\n      <Carousel setApi={setApi} opts={{ loop: !singleItem }}>\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem key={index}>{item}</CarouselItem>\n          ))}\n        </CarouselContent>\n\n        {arrows && !singleItem && (\n          <>\n            <CarouselPrevious\n              className={arrows === \"inset\" ? \"left-3 -translate-x-0\" : undefined}\n            />\n            <CarouselNext\n              className={arrows === \"inset\" ? \"right-3 translate-x-0\" : undefined}\n            />\n          </>\n        )}\n      </Carousel>\n\n      {showDots && !singleItem && count > 1 && (\n        <div className={cn(\"absolute inset-x-0 bottom-3 z-10 flex items-center justify-center gap-1.5\", dotsClassName)} role=\"tablist\">\n          {Array.from({ length: count }).map((_, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={index === current}\n              aria-label={`Go to slide ${index + 1}`}\n              onClick={() => api?.scrollTo(index)}\n              className={cn(\n                \"size-2 rounded-full transition-all shadow-sm\",\n                index === current\n                  ? \"bg-primary\"\n                  : \"bg-background/70 hover:bg-background/90\"\n              )}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { SwipeableCarousel, type SwipeableCarouselProps }\n"],"mappings":";;;;;;AAwBA,SAAS,kBAAkB,EACzB,OACA,WACA,QACA,WAAW,MACX,eACA,aACA,iBACyB;CACzB,MAAM,CAAC,KAAK,UAAUA,QAAM,UAAuB;CACnD,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,EAAE;CAC/C,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,EAAE;AAE3C,SAAM,gBAAgB;AACpB,MAAI,CAAC,IAAK;AAEV,WAAS,IAAI,gBAAgB,CAAC,OAAO;AACrC,aAAW,IAAI,oBAAoB,CAAC;AAEpC,MAAI,GAAG,gBAAgB;GACrB,MAAM,MAAM,IAAI,oBAAoB;AACpC,cAAW,IAAI;AACf,mBAAgB,IAAI;IACpB;IACD,CAAC,KAAK,cAAc,CAAC;AAExB,SAAM,gBAAgB;AACpB,MAAI,CAAC,OAAO,gBAAgB,KAAA,EAAW;AACvC,MAAI,IAAI,oBAAoB,KAAK,YAC/B,KAAI,SAAS,YAAY;IAE1B,CAAC,KAAK,YAAY,CAAC;AAEtB,KAAI,MAAM,WAAW,EAAG,QAAO;CAE/B,MAAM,aAAa,MAAM,WAAW;AAEpC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,WAAW,YAAY,SAAS,UAAU;YAAzE,CACE,qBAAC,UAAD;GAAkB;GAAQ,MAAM,EAAE,MAAM,CAAC,YAAY;aAArD,CACE,oBAAC,iBAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD,EAAA,UAA2B,MAAoB,EAA5B,MAA4B,CAC/C,EACc,CAAA,EAEjB,UAAU,CAAC,cACV,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,EACE,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAC1D,CAAA,EACF,oBAAC,cAAD,EACE,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAC1D,CAAA,CACD,EAAA,CAAA,CAEI;MAEV,YAAY,CAAC,cAAc,QAAQ,KAClC,oBAAC,OAAD;GAAK,WAAW,GAAG,6EAA6E,cAAc;GAAE,MAAK;aAClH,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,iBAAe,UAAU;IACzB,cAAY,eAAe,QAAQ;IACnC,eAAe,KAAK,SAAS,MAAM;IACnC,WAAW,GACT,gDACA,UAAU,UACN,eACA,0CACL;IACD,EAZK,MAYL,CACF;GACE,CAAA,CAEJ"}
+{"version":3,"file":"swipeable-carousel.mjs","names":["React"],"sources":["../../../../src/client/storefront/carousel/swipeable-carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  type CarouselApi,\n} from \"../../ui-resolver/carousel\";\nimport { type CarouselWheelAxis } from \"../../ui/carousel\";\nimport { cn } from \"../../ui/utils\";\n\ninterface SwipeableCarouselProps {\n  items: React.ReactNode[];\n  className?: string;\n  /** 'inset' — arrows float over the image edges; 'outset' — arrows sit outside the image bounds */\n  arrows?: \"inset\" | \"outset\";\n  showDots?: boolean;\n  dotsClassName?: string;\n  activeSlide?: number;\n  onSlideChange?: (index: number) => void;\n  /** Controls which wheel/trackpad axes scroll the carousel. Defaults to \"vertical\". */\n  wheelAxis?: CarouselWheelAxis;\n}\n\nfunction SwipeableCarousel({\n  items,\n  className,\n  arrows,\n  showDots = true,\n  dotsClassName,\n  activeSlide,\n  onSlideChange,\n  wheelAxis,\n}: SwipeableCarouselProps) {\n  const [api, setApi] = React.useState<CarouselApi>();\n  const [current, setCurrent] = React.useState(0);\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!api) return;\n\n    setCount(api.scrollSnapList().length);\n    setCurrent(api.selectedScrollSnap());\n\n    api.on(\"select\", () => {\n      const idx = api.selectedScrollSnap();\n      setCurrent(idx);\n      onSlideChange?.(idx);\n    });\n  }, [api, onSlideChange]);\n\n  React.useEffect(() => {\n    if (!api || activeSlide === undefined) return;\n    if (api.selectedScrollSnap() !== activeSlide) {\n      api.scrollTo(activeSlide);\n    }\n  }, [api, activeSlide]);\n\n  if (items.length === 0) return null;\n\n  const singleItem = items.length === 1;\n\n  return (\n    <div className={cn(\"relative\", arrows === \"outset\" && \"mx-12\", className)}>\n      <Carousel setApi={setApi} opts={{ loop: !singleItem }} wheelAxis={wheelAxis}>\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem key={index}>{item}</CarouselItem>\n          ))}\n        </CarouselContent>\n\n        {arrows && !singleItem && (\n          <>\n            <CarouselPrevious\n              className={arrows === \"inset\" ? \"left-3 -translate-x-0\" : undefined}\n            />\n            <CarouselNext className={arrows === \"inset\" ? \"right-3 translate-x-0\" : undefined} />\n          </>\n        )}\n      </Carousel>\n\n      {showDots && !singleItem && count > 1 && (\n        <div\n          className={cn(\n            \"absolute inset-x-0 bottom-3 z-10 flex items-center justify-center gap-1.5\",\n            dotsClassName,\n          )}\n          role=\"tablist\"\n        >\n          {Array.from({ length: count }).map((_, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={index === current}\n              aria-label={`Go to slide ${index + 1}`}\n              onClick={() => api?.scrollTo(index)}\n              className={cn(\n                \"size-2 rounded-full transition-all shadow-sm\",\n                index === current ? \"bg-primary\" : \"bg-background/70 hover:bg-background/90\",\n              )}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport { SwipeableCarousel, type SwipeableCarouselProps };\n"],"mappings":";;;;;;AA2BA,SAAS,kBAAkB,EACzB,OACA,WACA,QACA,WAAW,MACX,eACA,aACA,eACA,aACyB;CACzB,MAAM,CAAC,KAAK,UAAUA,QAAM,UAAuB;CACnD,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,EAAE;CAC/C,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,EAAE;AAE3C,SAAM,gBAAgB;AACpB,MAAI,CAAC,IAAK;AAEV,WAAS,IAAI,gBAAgB,CAAC,OAAO;AACrC,aAAW,IAAI,oBAAoB,CAAC;AAEpC,MAAI,GAAG,gBAAgB;GACrB,MAAM,MAAM,IAAI,oBAAoB;AACpC,cAAW,IAAI;AACf,mBAAgB,IAAI;IACpB;IACD,CAAC,KAAK,cAAc,CAAC;AAExB,SAAM,gBAAgB;AACpB,MAAI,CAAC,OAAO,gBAAgB,KAAA,EAAW;AACvC,MAAI,IAAI,oBAAoB,KAAK,YAC/B,KAAI,SAAS,YAAY;IAE1B,CAAC,KAAK,YAAY,CAAC;AAEtB,KAAI,MAAM,WAAW,EAAG,QAAO;CAE/B,MAAM,aAAa,MAAM,WAAW;AAEpC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,WAAW,YAAY,SAAS,UAAU;YAAzE,CACE,qBAAC,UAAD;GAAkB;GAAQ,MAAM,EAAE,MAAM,CAAC,YAAY;GAAa;aAAlE,CACE,oBAAC,iBAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD,EAAA,UAA2B,MAAoB,EAA5B,MAA4B,CAC/C,EACc,CAAA,EAEjB,UAAU,CAAC,cACV,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,EACE,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAC1D,CAAA,EACF,oBAAC,cAAD,EAAc,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAAa,CAAA,CACpF,EAAA,CAAA,CAEI;MAEV,YAAY,CAAC,cAAc,QAAQ,KAClC,oBAAC,OAAD;GACE,WAAW,GACT,6EACA,cACD;GACD,MAAK;aAEJ,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,iBAAe,UAAU;IACzB,cAAY,eAAe,QAAQ;IACnC,eAAe,KAAK,SAAS,MAAM;IACnC,WAAW,GACT,gDACA,UAAU,UAAU,eAAe,0CACpC;IACD,EAVK,MAUL,CACF;GACE,CAAA,CAEJ"}

package/dist/client/storefront/components/product-recommendations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-recommendations.d.ts","names":[],"sources":["../../../../src/client/storefront/components/product-recommendations.tsx"],"mappings":";;;;UAUiB,2BAAA;EACf,KAAA;;EAEA,OAAA;EAH0C;EAK1C,QAAA,EAAU,OAAA,CAAM,SAAA;EAAS;EAEzB,WAAA;EACA,YAAA;EAHA;EAKA,UAAA;EALgB;EAOhB,OAAA;EACA,SAAA;AAAA;AAAA,iBAKc,sBAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,OAAA;EACA;AAAA,GACC,2BAAA,GAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"product-recommendations.d.ts","names":[],"sources":["../../../../src/client/storefront/components/product-recommendations.tsx"],"mappings":";;;;UAgBiB,2BAAA;EACf,KAAA;;EAEA,OAAA;EAH0C;EAK1C,QAAA,EAAU,OAAA,CAAM,SAAA;EAAS;EAEzB,WAAA;EACA,YAAA;EAHA;EAKA,UAAA;EALgB;EAOhB,OAAA;EACA,SAAA;AAAA;AAAA,iBAKc,sBAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,OAAA;EACA;AAAA,GACC,2BAAA,GAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/product-recommendations.mjs

@@ -3,43 +3,31 @@ import { useIcon } from "../../icons/icon-context.mjs";
 import { cn } from "../../ui/utils.mjs";
 import { getMotionConfig } from "../../motion/config.mjs";
 import { staggerChildStyle, staggerEntryClass } from "../../motion/stagger.mjs";
+import { Carousel, CarouselContent, CarouselItem } from "../../ui-resolver/carousel.mjs";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/components/product-recommendations.tsx
 function ProductRecommendations({ title, children, viewAllHref, viewAllLabel = "View all", showArrows = true, delight = 0, className }) {
-	const scrollRef = React$1.useRef(null);
+	const [api, setApi] = React$1.useState();
+	const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$1.useState(false);
 	const motion = React$1.useMemo(() => getMotionConfig(delight), [delight]);
-	const [canScrollLeft, setCanScrollLeft] = React$1.useState(false);
-	const [canScrollRight, setCanScrollRight] = React$1.useState(false);
 	const ChevronLeftIcon = useIcon("chevronLeft");
 	const ChevronRightIcon = useIcon("chevronRight");
-	const updateScrollState = React$1.useCallback(() => {
-		const el = scrollRef.current;
-		if (!el) return;
-		setCanScrollLeft(el.scrollLeft > 1);
-		setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
-	}, []);
 	React$1.useEffect(() => {
-		const el = scrollRef.current;
-		if (!el) return;
-		updateScrollState();
-		el.addEventListener("scroll", updateScrollState, { passive: true });
-		const ro = new ResizeObserver(updateScrollState);
-		ro.observe(el);
+		if (!api) return;
+		const onSelect = () => {
+			setCanScrollPrev(api.canScrollPrev());
+			setCanScrollNext(api.canScrollNext());
+		};
+		onSelect();
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
 		return () => {
-			el.removeEventListener("scroll", updateScrollState);
-			ro.disconnect();
+			api.off("reInit", onSelect);
+			api.off("select", onSelect);
 		};
-	}, [updateScrollState]);
-	const scroll = (direction) => {
-		const el = scrollRef.current;
-		if (!el) return;
-		const distance = el.clientWidth * .8;
-		el.scrollBy({
-			left: direction === "left" ? -distance : distance,
-			behavior: "smooth"
-		});
-	};
+	}, [api]);
 	return /* @__PURE__ */ jsxs("section", {
 		className: cn("flex flex-col gap-4", className),
 		children: [(title || viewAllHref) && /* @__PURE__ */ jsxs("div", {
@@ -55,25 +43,29 @@ function ProductRecommendations({ title, children, viewAllHref, viewAllLabel = "
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "relative group/recs",
 			children: [
-				showArrows && canScrollLeft && /* @__PURE__ */ jsx("button", {
+				showArrows && canScrollPrev && /* @__PURE__ */ jsx("button", {
 					type: "button",
-					onClick: () => scroll("left"),
+					onClick: () => api?.scrollPrev(),
 					className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)",
 					"aria-label": "Scroll left",
 					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-5" })
 				}),
-				/* @__PURE__ */ jsx("div", {
-					ref: scrollRef,
-					className: "flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-none pb-1",
-					children: React$1.Children.map(children, (child, i) => /* @__PURE__ */ jsx("div", {
-						className: cn("w-[260px] shrink-0 snap-start sm:w-[280px] lg:w-[300px]", staggerEntryClass(motion)),
+				/* @__PURE__ */ jsx(Carousel, {
+					setApi,
+					opts: {
+						align: "start",
+						slidesToScroll: "auto",
+						containScroll: "trimSnaps"
+					},
+					children: /* @__PURE__ */ jsx(CarouselContent, { children: React$1.Children.map(children, (child, i) => /* @__PURE__ */ jsx(CarouselItem, {
+						className: cn("basis-auto w-[260px] sm:w-[280px] lg:w-[300px]", staggerEntryClass(motion)),
 						style: staggerChildStyle(i, motion),
 						children: child
-					}, i))
+					}, i)) })
 				}),
-				showArrows && canScrollRight && /* @__PURE__ */ jsx("button", {
+				showArrows && canScrollNext && /* @__PURE__ */ jsx("button", {
 					type: "button",
-					onClick: () => scroll("right"),
+					onClick: () => api?.scrollNext(),
 					className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)",
 					"aria-label": "Scroll right",
 					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-5" })