@enadhq/enad-react-sdk 1.0.2 → 1.1.0

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

@@ -1,357 +1,265 @@
 "use client";
+import { cn } from "../../ui/utils.mjs";
+import { useVariantDefault } from "../../ui-resolver/context.mjs";
+import { StorefrontButton } from "../primitives/button.mjs";
+import { StorefrontTextLink } from "../primitives/text-link.mjs";
+import { colorThemeClasses, isThemeDark } from "../types.mjs";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../ui/utils";
-import { StorefrontButton } from "../primitives/button";
-import { StorefrontTextLink } from "../primitives/text-link";
-import { colorThemeClasses, isThemeDark } from "../types";
+//#region src/client/storefront/blocks/hero.tsx
 const aspectClasses = {
-  "9:16": "aspect-[9/16]",
-  "4:5": "aspect-[4/5]",
-  "1:1": "aspect-square",
-  "16:9": "aspect-video"
+	"9:16": "aspect-[9/16]",
+	"4:5": "aspect-[4/5]",
+	"1:1": "aspect-square",
+	"16:9": "aspect-video"
 };
 const contentWidthClasses = {
-  sm: "max-w-sm",
-  md: "max-w-xl",
-  lg: "max-w-3xl"
+	sm: "max-w-sm",
+	md: "max-w-xl",
+	lg: "max-w-3xl"
 };
 const alignItemsMap = {
-  top: "items-start",
-  center: "items-center",
-  bottom: "items-end"
+	top: "items-start",
+	center: "items-center",
+	bottom: "items-end"
 };
 const justifyMap = {
-  left: "justify-start",
-  center: "justify-center",
-  right: "justify-end"
+	left: "justify-start",
+	center: "justify-center",
+	right: "justify-end"
 };
 function getPositionClasses(position) {
-  const [vertical, horizontal] = position.split("-");
-  return cn(
-    "absolute inset-0 flex p-8 md:p-12 lg:p-16",
-    alignItemsMap[vertical],
-    justifyMap[horizontal]
-  );
+	const [vertical, horizontal] = position.split("-");
+	return cn("absolute inset-0 flex p-8 md:p-12 lg:p-16", alignItemsMap[vertical], justifyMap[horizontal]);
 }
 function getTextAlign(position) {
-  const horizontal = position.split("-")[1];
-  if (horizontal === "center") return "center";
-  if (horizontal === "right") return "right";
-  return "left";
+	const horizontal = position.split("-")[1];
+	if (horizontal === "center") return "center";
+	if (horizontal === "right") return "right";
+	return "left";
 }
-const overlayGradientStyle = (direction) => ({
-  background: `linear-gradient(${direction}, 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))`
-});
+const overlayGradientStyle = (direction) => ({ background: `linear-gradient(${direction}, 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))` });
 function getGradientDirection(position) {
-  const [vertical, horizontal] = position.split("-");
-  if (vertical === "bottom") return "to top";
-  if (vertical === "top") return "to bottom";
-  if (horizontal === "left") return "to right";
-  if (horizontal === "right") return "to left";
-  return null;
+	const [vertical, horizontal] = position.split("-");
+	if (vertical === "bottom") return "to top";
+	if (vertical === "top") return "to bottom";
+	if (horizontal === "left") return "to right";
+	if (horizontal === "right") return "to left";
+	return null;
 }
-const centerOverlayStyle = {
-  background: "color-mix(in oklch, var(--enad-overlay-color) 30%, transparent)"
+const centerOverlayStyle = { background: "color-mix(in oklch, var(--enad-overlay-color) 30%, transparent)" };
+const headingStyle = {
+	fontWeight: "var(--enad-heading-weight)",
+	letterSpacing: "var(--enad-heading-tracking)",
+	textTransform: "var(--enad-heading-transform)"
 };
-const headingStyle = { fontWeight: "var(--enad-heading-weight)", letterSpacing: "var(--enad-heading-tracking)", textTransform: "var(--enad-heading-transform)" };
-function HeroCTA({
-  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 })
-  ] });
+function HeroCTA({ 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
+		})]
+	});
 }
-function HeroTextBlock({
-  preheader,
-  heading,
-  buttonLabel,
-  buttonHref,
-  textLinkLabel,
-  textLinkHref,
-  contentWidth = "md",
-  dark = false,
-  align = "left",
-  headingClamp
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex min-w-0 flex-col",
-        contentWidthClasses[contentWidth],
-        align === "center" && "items-center text-center",
-        align === "right" && "items-end text-end",
-        align === "left" && "items-start text-start"
-      ),
-      children: [
-        preheader && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn(
-              "mb-2 text-sm uppercase tracking-widest line-clamp-2",
-              dark ? "text-white/70" : "text-muted-foreground"
-            ),
-            children: preheader
-          }
-        ),
-        heading && /* @__PURE__ */ jsx(
-          "h1",
-          {
-            className: cn(
-              "text-3xl font-heading md:text-4xl lg:text-5xl",
-              dark ? "text-white" : "text-foreground",
-              headingClamp
-            ),
-            style: headingStyle,
-            children: heading
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HeroCTA,
-          {
-            buttonLabel,
-            buttonHref,
-            textLinkLabel,
-            textLinkHref,
-            dark
-          }
-        )
-      ]
-    }
-  );
+function HeroTextBlock({ preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, contentWidth = "md", dark = false, align = "left", headingClamp }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col", contentWidthClasses[contentWidth], align === "center" && "items-center text-center", align === "right" && "items-end text-end", align === "left" && "items-start text-start"),
+		children: [
+			preheader && /* @__PURE__ */ jsx("p", {
+				className: cn("mb-2 text-sm uppercase tracking-widest line-clamp-2", dark ? "text-white/70" : "text-muted-foreground"),
+				children: preheader
+			}),
+			heading && /* @__PURE__ */ jsx("h1", {
+				className: cn("text-3xl font-heading md:text-4xl lg:text-5xl", dark ? "text-white" : "text-foreground", headingClamp),
+				style: headingStyle,
+				children: heading
+			}),
+			/* @__PURE__ */ jsx(HeroCTA, {
+				buttonLabel,
+				buttonHref,
+				textLinkLabel,
+				textLinkHref,
+				dark
+			})
+		]
+	});
 }
-function HeroMinimal({
-  preheader,
-  heading,
-  buttonLabel,
-  buttonHref,
-  textLinkLabel,
-  textLinkHref,
-  dark,
-  themeClasses,
-  className
-}) {
-  return /* @__PURE__ */ jsx("section", { className: cn("px-8 py-16 md:py-24 lg:py-32", themeClasses || "bg-background", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center text-center", children: [
-    preheader && /* @__PURE__ */ jsx("p", { className: cn("mb-2 text-sm uppercase tracking-widest", dark ? "text-white/70" : "text-muted-foreground"), children: preheader }),
-    heading && /* @__PURE__ */ jsx(
-      "h1",
-      {
-        className: cn("max-w-prose text-3xl font-heading line-clamp-3 md:text-5xl lg:text-6xl", dark ? "text-white" : "text-foreground"),
-        style: headingStyle,
-        children: heading
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HeroCTA,
-      {
-        buttonLabel,
-        buttonHref,
-        textLinkLabel,
-        textLinkHref,
-        dark
-      }
-    )
-  ] }) });
+function HeroMinimal({ preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: cn("px-8 py-16 md:py-24 lg:py-32", themeClasses || "bg-background", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex max-w-4xl flex-col items-center text-center",
+			children: [
+				preheader && /* @__PURE__ */ jsx("p", {
+					className: cn("mb-2 text-sm uppercase tracking-widest", dark ? "text-white/70" : "text-muted-foreground"),
+					children: preheader
+				}),
+				heading && /* @__PURE__ */ jsx("h1", {
+					className: cn("max-w-prose text-3xl font-heading line-clamp-3 md:text-5xl lg:text-6xl", dark ? "text-white" : "text-foreground"),
+					style: headingStyle,
+					children: heading
+				}),
+				/* @__PURE__ */ jsx(HeroCTA, {
+					buttonLabel,
+					buttonHref,
+					textLinkLabel,
+					textLinkHref,
+					dark
+				})
+			]
+		})
+	});
 }
-function HeroBanner({
-  image,
-  preheader,
-  heading,
-  buttonLabel,
-  buttonHref,
-  textLinkLabel,
-  textLinkHref,
-  themeClasses,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: cn("relative max-h-64 overflow-hidden", image?.src ? "bg-muted" : "bg-primary", themeClasses, className),
-      children: [
-        image?.src && /* @__PURE__ */ jsx("img", { src: image?.src, alt: image?.alt ?? "", className: "size-full object-cover", loading: "lazy" }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute inset-0",
-            style: overlayGradientStyle("to right")
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center px-8 md:px-12 lg:px-16", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-wrap items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-4", children: [
-            preheader && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm uppercase tracking-widest text-white/70", children: preheader }),
-            heading && /* @__PURE__ */ jsx(
-              "h2",
-              {
-                className: "min-w-0 truncate text-xl font-heading text-white md:text-2xl lg:text-3xl",
-                style: headingStyle,
-                children: heading
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            HeroCTA,
-            {
-              buttonLabel,
-              buttonHref,
-              textLinkLabel,
-              textLinkHref,
-              dark: true
-            }
-          )
-        ] }) })
-      ]
-    }
-  );
+function HeroBanner({ image, preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, themeClasses, className }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("relative max-h-64 overflow-hidden", image?.src ? "bg-muted" : "bg-primary", themeClasses, className),
+		children: [
+			image?.src && /* @__PURE__ */ jsx("img", {
+				src: image?.src,
+				alt: image?.alt ?? "",
+				className: "size-full object-cover",
+				loading: "lazy"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				style: overlayGradientStyle("to right")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center px-8 md:px-12 lg:px-16",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full min-w-0 flex-wrap items-center justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-4",
+						children: [preheader && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-sm uppercase tracking-widest text-white/70",
+							children: preheader
+						}), heading && /* @__PURE__ */ jsx("h2", {
+							className: "min-w-0 truncate text-xl font-heading text-white md:text-2xl lg:text-3xl",
+							style: headingStyle,
+							children: heading
+						})]
+					}), /* @__PURE__ */ jsx(HeroCTA, {
+						buttonLabel,
+						buttonHref,
+						textLinkLabel,
+						textLinkHref,
+						dark: true
+					})]
+				})
+			})
+		]
+	});
 }
-function HeroSplit({
-  image,
-  aspectRatio = "16:9",
-  preheader,
-  heading,
-  buttonLabel,
-  buttonHref,
-  textLinkLabel,
-  textLinkHref,
-  contentWidth = "md",
-  dark,
-  themeClasses,
-  align,
-  className
-}) {
-  const hasImage = Boolean(image?.src);
-  return /* @__PURE__ */ jsxs("section", { className: cn("grid", hasImage && "lg:grid-cols-2", themeClasses, className), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center px-8 py-12 lg:px-16 lg:py-20", children: /* @__PURE__ */ jsx(
-      HeroTextBlock,
-      {
-        preheader,
-        heading,
-        buttonLabel,
-        buttonHref,
-        textLinkLabel,
-        textLinkHref,
-        contentWidth,
-        dark,
-        align,
-        headingClamp: "line-clamp-4"
-      }
-    ) }),
-    hasImage && /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio]), children: /* @__PURE__ */ jsx("img", { src: image?.src, alt: image?.alt ?? "", className: "size-full object-cover", loading: "lazy" }) })
-  ] });
+function HeroSplit({ image, aspectRatio = "16:9", preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, contentWidth = "md", dark, themeClasses, align, className }) {
+	const hasImage = Boolean(image?.src);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("grid", hasImage && "lg:grid-cols-2", themeClasses, className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 items-center px-8 py-12 lg:px-16 lg:py-20",
+			children: /* @__PURE__ */ jsx(HeroTextBlock, {
+				preheader,
+				heading,
+				buttonLabel,
+				buttonHref,
+				textLinkLabel,
+				textLinkHref,
+				contentWidth,
+				dark,
+				align,
+				headingClamp: "line-clamp-4"
+			})
+		}), hasImage && /* @__PURE__ */ jsx("div", {
+			className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio]),
+			children: /* @__PURE__ */ jsx("img", {
+				src: image?.src,
+				alt: image?.alt ?? "",
+				className: "size-full object-cover",
+				loading: "lazy"
+			})
+		})]
+	});
 }
-function HeroImageOnly({
-  image,
-  aspectRatio = "16:9",
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio], className),
-      children: image?.src && /* @__PURE__ */ jsx("img", { src: image?.src, alt: image?.alt ?? "", className: "size-full object-cover", loading: "lazy" })
-    }
-  );
+function HeroImageOnly({ image, aspectRatio = "16:9", className }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio], className),
+		children: image?.src && /* @__PURE__ */ jsx("img", {
+			src: image?.src,
+			alt: image?.alt ?? "",
+			className: "size-full object-cover",
+			loading: "lazy"
+		})
+	});
 }
 function resolveOverlayGradient(position) {
-  const direction = getGradientDirection(position);
-  return direction ? overlayGradientStyle(direction) : centerOverlayStyle;
+	const direction = getGradientDirection(position);
+	return direction ? overlayGradientStyle(direction) : centerOverlayStyle;
 }
 function resolveOverlayBg(imageSrc) {
-  return imageSrc ? "bg-muted" : "bg-primary";
+	return imageSrc ? "bg-muted" : "bg-primary";
 }
-function HeroOverlay({
-  image,
-  aspectRatio = "16:9",
-  contentPosition = "bottom-center",
-  contentWidth = "md",
-  preheader,
-  heading,
-  buttonLabel,
-  buttonHref,
-  textLinkLabel,
-  textLinkHref,
-  dark,
-  themeClasses,
-  align,
-  className
-}) {
-  const hasContent = preheader || heading || buttonLabel || textLinkLabel;
-  const position = contentPosition ?? "bottom-center";
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: cn(
-        "relative overflow-hidden",
-        resolveOverlayBg(image?.src),
-        aspectClasses[aspectRatio],
-        themeClasses,
-        className
-      ),
-      children: [
-        image?.src && /* @__PURE__ */ jsx("img", { src: image?.src, alt: image?.alt ?? "", className: "size-full object-cover", loading: "lazy" }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute inset-0",
-            style: resolveOverlayGradient(position)
-          }
-        ),
-        hasContent && /* @__PURE__ */ jsx("div", { className: getPositionClasses(position), children: /* @__PURE__ */ jsx(
-          HeroTextBlock,
-          {
-            preheader,
-            heading,
-            buttonLabel,
-            buttonHref,
-            textLinkLabel,
-            textLinkHref,
-            contentWidth,
-            dark,
-            align,
-            headingClamp: "line-clamp-3"
-          }
-        ) })
-      ]
-    }
-  );
+function HeroOverlay({ image, aspectRatio = "16:9", contentPosition = "bottom-center", contentWidth = "md", preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, align, className }) {
+	const hasContent = preheader || heading || buttonLabel || textLinkLabel;
+	const position = contentPosition ?? "bottom-center";
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("relative overflow-hidden", resolveOverlayBg(image?.src), aspectClasses[aspectRatio], themeClasses, className),
+		children: [
+			image?.src && /* @__PURE__ */ jsx("img", {
+				src: image?.src,
+				alt: image?.alt ?? "",
+				className: "size-full object-cover",
+				loading: "lazy"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				style: resolveOverlayGradient(position)
+			}),
+			hasContent && /* @__PURE__ */ jsx("div", {
+				className: getPositionClasses(position),
+				children: /* @__PURE__ */ jsx(HeroTextBlock, {
+					preheader,
+					heading,
+					buttonLabel,
+					buttonHref,
+					textLinkLabel,
+					textLinkHref,
+					contentWidth,
+					dark,
+					align,
+					headingClamp: "line-clamp-3"
+				})
+			})
+		]
+	});
 }
 function Hero(props) {
-  const {
-    layout = "overlay",
-    contentPosition = "bottom-center",
-    textAlign,
-    colorTheme
-  } = props;
-  const dark = isThemeDark(colorTheme) || layout === "overlay";
-  const themeClasses = colorThemeClasses(colorTheme);
-  const defaultAlign = layout === "overlay" ? getTextAlign(contentPosition ?? "bottom-center") : "left";
-  const align = textAlign ?? defaultAlign;
-  const layoutProps = {
-    ...props,
-    dark,
-    themeClasses,
-    align
-  };
-  switch (layout) {
-    case "minimal":
-      return /* @__PURE__ */ jsx(HeroMinimal, { ...layoutProps });
-    case "banner":
-      return /* @__PURE__ */ jsx(HeroBanner, { ...layoutProps });
-    case "split":
-      return /* @__PURE__ */ jsx(HeroSplit, { ...layoutProps });
-    case "image-only":
-      return /* @__PURE__ */ jsx(HeroImageOnly, { ...layoutProps });
-    default:
-      return /* @__PURE__ */ jsx(HeroOverlay, { ...layoutProps });
-  }
+	const heroDefault = useVariantDefault("hero");
+	const { layout = heroDefault ?? "overlay", contentPosition = "bottom-center", textAlign, colorTheme } = props;
+	const dark = isThemeDark(colorTheme) || layout === "overlay";
+	const themeClasses = colorThemeClasses(colorTheme);
+	const defaultAlign = layout === "overlay" ? getTextAlign(contentPosition ?? "bottom-center") : "left";
+	const align = textAlign ?? defaultAlign;
+	const layoutProps = {
+		...props,
+		dark,
+		themeClasses,
+		align
+	};
+	switch (layout) {
+		case "minimal": return /* @__PURE__ */ jsx(HeroMinimal, { ...layoutProps });
+		case "banner": return /* @__PURE__ */ jsx(HeroBanner, { ...layoutProps });
+		case "split": return /* @__PURE__ */ jsx(HeroSplit, { ...layoutProps });
+		case "image-only": return /* @__PURE__ */ jsx(HeroImageOnly, { ...layoutProps });
+		default: return /* @__PURE__ */ jsx(HeroOverlay, { ...layoutProps });
+	}
 }
-export {
-  Hero
-};
+//#endregion
+export { Hero };
+
 //# sourceMappingURL=hero.mjs.map