@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/quote-block/index.js

@@ -0,0 +1,321 @@
+import * as React from 'react';
+import { tv } from 'tailwind-variants';
+import { useRender } from '@base-ui-components/react/use-render';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/sections/quote-block/quote-block.tsx
+var backgroundVariants = tv({
+  base: "absolute inset-0"
+});
+var Background = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: backgroundVariants({ class: className }),
+      ...props,
+      children
+    }
+  )
+);
+Background.displayName = "Background";
+var backgroundImageVariants = tv({
+  base: "absolute inset-0 size-full object-cover"
+});
+function BackgroundImage(props) {
+  const {
+    className,
+    src,
+    position = "center",
+    alt = "",
+    style,
+    render,
+    ...otherProps
+  } = props;
+  const imgClassName = backgroundImageVariants({ class: className });
+  const imgStyle = { objectPosition: position, ...style };
+  return useRender({
+    render,
+    props: {
+      src,
+      alt,
+      className: imgClassName,
+      style: imgStyle,
+      ...otherProps
+    },
+    defaultTagName: "img"
+  });
+}
+BackgroundImage.displayName = "Background.Image";
+var backgroundVideoVariants = tv({
+  base: "absolute inset-0 size-full object-cover"
+});
+function BackgroundVideo(props) {
+  const {
+    className,
+    src,
+    type,
+    poster,
+    autoPlay = true,
+    loop = true,
+    muted = true,
+    playsInline = true,
+    render,
+    children,
+    ...otherProps
+  } = props;
+  const videoClassName = backgroundVideoVariants({ class: className });
+  const rendered = useRender({
+    render,
+    props: {
+      autoPlay,
+      loop,
+      muted,
+      playsInline,
+      poster,
+      className: videoClassName,
+      ...otherProps
+    },
+    defaultTagName: "video"
+  });
+  if (!render) {
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        autoPlay,
+        loop,
+        muted,
+        playsInline,
+        poster,
+        className: videoClassName,
+        ...otherProps,
+        children: /* @__PURE__ */ jsx("source", { src, type })
+      }
+    );
+  }
+  return rendered;
+}
+BackgroundVideo.displayName = "Background.Video";
+var backgroundStreamVariants = tv({
+  base: "absolute inset-0 size-full border-0 scale-[1.5] object-cover"
+});
+var BackgroundStream = React.forwardRef(
+  ({
+    className,
+    videoId,
+    poster,
+    autoplay = true,
+    loop = true,
+    muted = true,
+    controls = false,
+    customerSubdomain,
+    title = "Background video",
+    ...props
+  }, ref) => {
+    const baseUrl = customerSubdomain ? `https://${customerSubdomain}.cloudflarestream.com` : "https://iframe.videodelivery.net";
+    const params = new URLSearchParams();
+    if (autoplay) params.set("autoplay", "true");
+    if (loop) params.set("loop", "true");
+    if (muted) params.set("muted", "true");
+    if (!controls) params.set("controls", "false");
+    if (poster) params.set("poster", poster);
+    params.set("preload", "auto");
+    const streamUrl = `${baseUrl}/${videoId}?${params.toString()}`;
+    return /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref,
+        src: streamUrl,
+        title,
+        allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true,
+        className: backgroundStreamVariants({ class: className }),
+        ...props
+      }
+    );
+  }
+);
+BackgroundStream.displayName = "Background.Stream";
+var backgroundOverlayVariants = tv({
+  base: "absolute inset-0 bg-bg-overlay"
+});
+var BackgroundOverlay = React.forwardRef(({ className, opacity = 0.4, style, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "aria-hidden": "true",
+    className: backgroundOverlayVariants({ class: className }),
+    style: {
+      opacity,
+      ...style
+    },
+    ...props
+  }
+));
+BackgroundOverlay.displayName = "Background.Overlay";
+var backgroundGradientVariants = tv({
+  base: "absolute inset-0"
+});
+var BackgroundGradient = React.forwardRef(
+  ({
+    className,
+    direction = "to-b",
+    from = "transparent",
+    via,
+    to = "black",
+    gradient,
+    style,
+    ...props
+  }, ref) => {
+    const cssDirection = direction.startsWith("to-") ? direction.replace("to-", "to ") : direction;
+    const gradientValue = gradient || (via ? `linear-gradient(${cssDirection}, ${from}, ${via}, ${to})` : `linear-gradient(${cssDirection}, ${from}, ${to})`);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: backgroundGradientVariants({ class: className }),
+        style: {
+          backgroundImage: gradientValue,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+BackgroundGradient.displayName = "Background.Gradient";
+Object.assign(Background, {
+  Image: BackgroundImage,
+  Video: BackgroundVideo,
+  Stream: BackgroundStream,
+  Overlay: BackgroundOverlay,
+  Gradient: BackgroundGradient
+});
+var quoteBlockVariants = tv({
+  slots: {
+    root: "relative flex min-h-[500px] w-full flex-col overflow-hidden rounded-radius-8",
+    content: [
+      "relative z-10 flex max-w-[1440px] flex-1 flex-col items-start justify-end",
+      "p-40",
+      "md:p-80",
+      "lg:p-112"
+    ],
+    quoteWrapper: "relative flex flex-col gap-40 md:gap-48",
+    quote: [
+      "relative text-text-inverted",
+      "typography-small-headline-small",
+      "md:typography-medium-headline-small",
+      "lg:typography-large-headline-small",
+      "font-serif md:font-serif lg:font-serif"
+    ],
+    openQuote: [
+      "absolute text-text-inverted",
+      "typography-small-headline-small",
+      "md:typography-medium-headline-small",
+      "lg:typography-large-headline-small",
+      "font-serif md:font-serif lg:font-serif",
+      "-left-[0.5em] -top-[0.1em]"
+    ],
+    attribution: "flex flex-col items-start gap-4",
+    signature: "h-auto w-[120px] md:w-[153px]",
+    byline: "flex flex-col text-text-inverted",
+    bylineName: "typography-body-medium text-text-inverted",
+    bylineTitle: "typography-body-medium text-text-inverted opacity-80"
+  },
+  variants: {
+    size: {
+      default: {
+        root: ""
+      },
+      compact: {
+        root: "min-h-[400px] lg:min-h-[600px]"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var QuoteBlock = React.forwardRef(
+  ({
+    className,
+    quote,
+    showQuoteMarks = true,
+    signatureImage,
+    signatureAlt = "Signature",
+    attributionName,
+    attributionTitle,
+    background,
+    overlayOpacity = 0,
+    overlayColor = "black",
+    quoteClassName,
+    bylineNameClassName,
+    bylineTitleClassName,
+    size,
+    ...props
+  }, ref) => {
+    const styles = quoteBlockVariants({ size });
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        className: styles.root({ class: className }),
+        ...props,
+        children: [
+          background,
+          overlayOpacity > 0 && /* @__PURE__ */ jsx(
+            BackgroundOverlay,
+            {
+              opacity: overlayOpacity,
+              className: overlayColor !== "black" ? void 0 : "bg-black",
+              style: overlayColor !== "black" ? { backgroundColor: overlayColor } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles.content(), children: /* @__PURE__ */ jsxs("div", { className: styles.quoteWrapper(), children: [
+            /* @__PURE__ */ jsxs("blockquote", { className: styles.quote({ class: quoteClassName }), children: [
+              showQuoteMarks && /* @__PURE__ */ jsx("span", { className: styles.openQuote(), "aria-hidden": "true", children: '"' }),
+              /* @__PURE__ */ jsx("span", { className: "relative", children: showQuoteMarks ? `${quote}"` : quote })
+            ] }),
+            (signatureImage || attributionName || attributionTitle) && /* @__PURE__ */ jsxs("div", { className: styles.attribution(), children: [
+              signatureImage && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: signatureImage,
+                  alt: signatureAlt,
+                  className: styles.signature()
+                }
+              ),
+              (attributionName || attributionTitle) && /* @__PURE__ */ jsxs("div", { className: styles.byline(), children: [
+                attributionName && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: styles.bylineName({
+                      class: bylineNameClassName
+                    }),
+                    children: attributionName
+                  }
+                ),
+                attributionTitle && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: styles.bylineTitle({
+                      class: bylineTitleClassName
+                    }),
+                    children: attributionTitle
+                  }
+                )
+              ] })
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+QuoteBlock.displayName = "QuoteBlock";
+
+export { QuoteBlock, quoteBlockVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/quote-block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/atoms/background/background.tsx","../../src/components/sections/quote-block/quote-block.tsx"],"names":["tv","React2","jsx"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\n\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\n// =============================================================================\n// Background Atomic Component\n// =============================================================================\n\nconst backgroundVariants = tv({\n\tbase: \"absolute inset-0\",\n});\n\n/**\n * Base container for background composition.\n * Use as a wrapper to compose multiple background layers (image, video, overlay, gradient).\n *\n * @example\n * ```tsx\n * <Background>\n *   <Background.Image src=\"/hero.jpg\" />\n *   <Background.Overlay opacity={0.4} />\n *   <Background.Gradient direction=\"to-t\" from=\"black\" to=\"transparent\" />\n * </Background>\n * ```\n */\nexport interface BackgroundProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst Background = React.forwardRef<HTMLDivElement, BackgroundProps>(\n\t({ className, children, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={backgroundVariants({ class: className })}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nBackground.displayName = \"Background\";\n\n// =============================================================================\n// Background.Image\n// =============================================================================\n\nconst backgroundImageVariants = tv({\n\tbase: \"absolute inset-0 size-full object-cover\",\n});\n\nexport interface BackgroundImageProps\n\textends useRender.ComponentProps<\"img\">,\n\t\tOmit<React.ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"render\"> {\n\t/**\n\t * URL for the background image\n\t */\n\tsrc: string;\n\t/**\n\t * Object position (default: \"center\")\n\t */\n\tposition?: string;\n}\n\n/**\n * Background image layer using an actual img element with object-cover.\n * Supports native lazy loading, srcset, and better accessibility.\n * Supports render prop for element composition.\n */\nfunction BackgroundImage(props: BackgroundImageProps) {\n\tconst {\n\t\tclassName,\n\t\tsrc,\n\t\tposition = \"center\",\n\t\talt = \"\",\n\t\tstyle,\n\t\trender,\n\t\t...otherProps\n\t} = props;\n\n\tconst imgClassName = backgroundImageVariants({ class: className });\n\tconst imgStyle = { objectPosition: position, ...style };\n\n\treturn useRender({\n\t\trender,\n\t\tprops: {\n\t\t\tsrc,\n\t\t\talt,\n\t\t\tclassName: imgClassName,\n\t\t\tstyle: imgStyle,\n\t\t\t...otherProps,\n\t\t},\n\t\tdefaultTagName: \"img\",\n\t});\n}\nBackgroundImage.displayName = \"Background.Image\";\n\n// =============================================================================\n// Background.Video\n// =============================================================================\n\nconst backgroundVideoVariants = tv({\n\tbase: \"absolute inset-0 size-full object-cover\",\n});\n\nexport interface BackgroundVideoProps\n\textends useRender.ComponentProps<\"video\">,\n\t\tOmit<\n\t\t\tReact.VideoHTMLAttributes<HTMLVideoElement>,\n\t\t\t\"children\" | \"render\" | \"src\"\n\t\t> {\n\t/**\n\t * URL for the video source\n\t */\n\tsrc: string;\n\t/**\n\t * Video MIME type (default: auto-detected from src)\n\t */\n\ttype?: string;\n\t/**\n\t * Poster image URL shown before video loads\n\t */\n\tposter?: string;\n}\n\n/**\n * Background video layer using HTML5 video element.\n * Supports render prop for element composition.\n */\nfunction BackgroundVideo(props: BackgroundVideoProps) {\n\tconst {\n\t\tclassName,\n\t\tsrc,\n\t\ttype,\n\t\tposter,\n\t\tautoPlay = true,\n\t\tloop = true,\n\t\tmuted = true,\n\t\tplaysInline = true,\n\t\trender,\n\t\tchildren,\n\t\t...otherProps\n\t} = props;\n\n\tconst videoClassName = backgroundVideoVariants({ class: className });\n\n\t// useRender must be called unconditionally\n\tconst rendered = useRender({\n\t\trender,\n\t\tprops: {\n\t\t\tautoPlay,\n\t\t\tloop,\n\t\t\tmuted,\n\t\t\tplaysInline,\n\t\t\tposter,\n\t\t\tclassName: videoClassName,\n\t\t\t...otherProps,\n\t\t},\n\t\tdefaultTagName: \"video\",\n\t});\n\n\t// If no render prop, return video with source child\n\tif (!render) {\n\t\treturn (\n\t\t\t<video\n\t\t\t\tautoPlay={autoPlay}\n\t\t\t\tloop={loop}\n\t\t\t\tmuted={muted}\n\t\t\t\tplaysInline={playsInline}\n\t\t\t\tposter={poster}\n\t\t\t\tclassName={videoClassName}\n\t\t\t\t{...otherProps}\n\t\t\t>\n\t\t\t\t<source src={src} type={type} />\n\t\t\t</video>\n\t\t);\n\t}\n\n\treturn rendered;\n}\nBackgroundVideo.displayName = \"Background.Video\";\n\n// =============================================================================\n// Background.Stream\n// =============================================================================\n\nconst backgroundStreamVariants = tv({\n\tbase: \"absolute inset-0 size-full border-0 scale-[1.5] object-cover\",\n});\n\nexport interface BackgroundStreamProps\n\textends React.IframeHTMLAttributes<HTMLIFrameElement> {\n\t/**\n\t * Cloudflare Stream video ID\n\t */\n\tvideoId: string;\n\t/**\n\t * Poster image URL (Cloudflare Stream thumbnail or custom)\n\t */\n\tposter?: string;\n\t/**\n\t * Whether the video should autoplay (default: true)\n\t */\n\tautoplay?: boolean;\n\t/**\n\t * Whether the video should loop (default: true)\n\t */\n\tloop?: boolean;\n\t/**\n\t * Whether the video should be muted (default: true)\n\t */\n\tmuted?: boolean;\n\t/**\n\t * Whether to show playback controls (default: false)\n\t */\n\tcontrols?: boolean;\n\t/**\n\t * Custom Cloudflare customer subdomain (if using custom domains)\n\t */\n\tcustomerSubdomain?: string;\n}\n\n/**\n * Background video layer using Cloudflare Stream.\n */\nconst BackgroundStream = React.forwardRef<\n\tHTMLIFrameElement,\n\tBackgroundStreamProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvideoId,\n\t\t\tposter,\n\t\t\tautoplay = true,\n\t\t\tloop = true,\n\t\t\tmuted = true,\n\t\t\tcontrols = false,\n\t\t\tcustomerSubdomain,\n\t\t\ttitle = \"Background video\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst baseUrl = customerSubdomain\n\t\t\t? `https://${customerSubdomain}.cloudflarestream.com`\n\t\t\t: \"https://iframe.videodelivery.net\";\n\n\t\tconst params = new URLSearchParams();\n\t\tif (autoplay) params.set(\"autoplay\", \"true\");\n\t\tif (loop) params.set(\"loop\", \"true\");\n\t\tif (muted) params.set(\"muted\", \"true\");\n\t\tif (!controls) params.set(\"controls\", \"false\");\n\t\tif (poster) params.set(\"poster\", poster);\n\t\tparams.set(\"preload\", \"auto\");\n\n\t\tconst streamUrl = `${baseUrl}/${videoId}?${params.toString()}`;\n\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tref={ref}\n\t\t\t\tsrc={streamUrl}\n\t\t\t\ttitle={title}\n\t\t\t\tallow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n\t\t\t\tallowFullScreen\n\t\t\t\tclassName={backgroundStreamVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nBackgroundStream.displayName = \"Background.Stream\";\n\n// =============================================================================\n// Background.Overlay\n// =============================================================================\n\nconst backgroundOverlayVariants = tv({\n\tbase: \"absolute inset-0 bg-bg-overlay\",\n});\n\nexport interface BackgroundOverlayProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Overlay opacity (0-1)\n\t */\n\topacity?: number;\n}\n\n/**\n * Solid color overlay layer. Uses semantic bg-overlay token by default.\n * Override with className for different colors.\n */\nconst BackgroundOverlay = React.forwardRef<\n\tHTMLDivElement,\n\tBackgroundOverlayProps\n>(({ className, opacity = 0.4, style, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\taria-hidden=\"true\"\n\t\tclassName={backgroundOverlayVariants({ class: className })}\n\t\tstyle={{\n\t\t\topacity,\n\t\t\t...style,\n\t\t}}\n\t\t{...props}\n\t/>\n));\nBackgroundOverlay.displayName = \"Background.Overlay\";\n\n// =============================================================================\n// Background.Gradient\n// =============================================================================\n\nconst backgroundGradientVariants = tv({\n\tbase: \"absolute inset-0\",\n});\n\nexport interface BackgroundGradientProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Gradient direction (Tailwind convention: to-t, to-b, to-l, to-r, etc.)\n\t * Or CSS gradient direction (to top, to bottom, 45deg, etc.)\n\t */\n\tdirection?: string;\n\t/**\n\t * Starting color (from)\n\t */\n\tfrom?: string;\n\t/**\n\t * Optional middle color (via)\n\t */\n\tvia?: string;\n\t/**\n\t * Ending color (to)\n\t */\n\tto?: string;\n\t/**\n\t * Full custom gradient string (overrides from/via/to)\n\t */\n\tgradient?: string;\n}\n\n/**\n * Gradient overlay layer. Use for fading backgrounds or creating depth.\n */\nconst BackgroundGradient = React.forwardRef<\n\tHTMLDivElement,\n\tBackgroundGradientProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdirection = \"to-b\",\n\t\t\tfrom = \"transparent\",\n\t\t\tvia,\n\t\t\tto = \"black\",\n\t\t\tgradient,\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\t// Convert Tailwind-style direction to CSS\n\t\tconst cssDirection = direction.startsWith(\"to-\")\n\t\t\t? direction.replace(\"to-\", \"to \")\n\t\t\t: direction;\n\n\t\tconst gradientValue =\n\t\t\tgradient ||\n\t\t\t(via\n\t\t\t\t? `linear-gradient(${cssDirection}, ${from}, ${via}, ${to})`\n\t\t\t\t: `linear-gradient(${cssDirection}, ${from}, ${to})`);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={backgroundGradientVariants({ class: className })}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundImage: gradientValue,\n\t\t\t\t\t...style,\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nBackgroundGradient.displayName = \"Background.Gradient\";\n\n// =============================================================================\n// Compound Export\n// =============================================================================\n\nconst BackgroundCompound = Object.assign(Background, {\n\tImage: BackgroundImage,\n\tVideo: BackgroundVideo,\n\tStream: BackgroundStream,\n\tOverlay: BackgroundOverlay,\n\tGradient: BackgroundGradient,\n});\n\nexport {\n\tBackgroundCompound as Background,\n\tBackgroundImage,\n\tBackgroundVideo,\n\tBackgroundStream,\n\tBackgroundOverlay,\n\tBackgroundGradient,\n\tbackgroundVariants,\n\tbackgroundImageVariants,\n\tbackgroundVideoVariants,\n\tbackgroundStreamVariants,\n\tbackgroundOverlayVariants,\n\tbackgroundGradientVariants,\n};\n","import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { BackgroundOverlay } from \"@/components/atoms/background\";\n\n// =============================================================================\n// QuoteBlock Variants\n// =============================================================================\n\nconst quoteBlockVariants = tv({\n\tslots: {\n\t\troot: \"relative flex min-h-[500px] w-full flex-col overflow-hidden rounded-radius-8\",\n\t\tcontent: [\n\t\t\t\"relative z-10 flex max-w-[1440px] flex-1 flex-col items-start justify-end\",\n\t\t\t\"p-40\",\n\t\t\t\"md:p-80\",\n\t\t\t\"lg:p-112\",\n\t\t],\n\t\tquoteWrapper: \"relative flex flex-col gap-40 md:gap-48\",\n\t\tquote: [\n\t\t\t\"relative text-text-inverted\",\n\t\t\t\"typography-small-headline-small\",\n\t\t\t\"md:typography-medium-headline-small\",\n\t\t\t\"lg:typography-large-headline-small\",\n\t\t\t\"font-serif md:font-serif lg:font-serif\",\n\t\t],\n\t\topenQuote: [\n\t\t\t\"absolute text-text-inverted\",\n\t\t\t\"typography-small-headline-small\",\n\t\t\t\"md:typography-medium-headline-small\",\n\t\t\t\"lg:typography-large-headline-small\",\n\t\t\t\"font-serif md:font-serif lg:font-serif\",\n\t\t\t\"-left-[0.5em] -top-[0.1em]\",\n\t\t],\n\t\tattribution: \"flex flex-col items-start gap-4\",\n\t\tsignature: \"h-auto w-[120px] md:w-[153px]\",\n\t\tbyline: \"flex flex-col text-text-inverted\",\n\t\tbylineName: \"typography-body-medium text-text-inverted\",\n\t\tbylineTitle: \"typography-body-medium text-text-inverted opacity-80\",\n\t},\n\tvariants: {\n\t\tsize: {\n\t\t\tdefault: {\n\t\t\t\troot: \"\",\n\t\t\t},\n\t\t\tcompact: {\n\t\t\t\troot: \"min-h-[400px] lg:min-h-[600px]\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t},\n});\n\n// =============================================================================\n// QuoteBlock Component\n// =============================================================================\n\nexport interface QuoteBlockProps\n\textends Omit<React.HTMLAttributes<HTMLElement>, \"children\">,\n\t\tVariantProps<typeof quoteBlockVariants> {\n\t/**\n\t * The quote text to display\n\t */\n\tquote: string;\n\t/**\n\t * Whether to show decorative quote marks\n\t * @default true\n\t */\n\tshowQuoteMarks?: boolean;\n\t/**\n\t * Signature image URL (optional)\n\t */\n\tsignatureImage?: string;\n\t/**\n\t * Alt text for signature image\n\t */\n\tsignatureAlt?: string;\n\t/**\n\t * Attribution name (e.g., \"Donald J. Trump\")\n\t */\n\tattributionName?: string;\n\t/**\n\t * Attribution title (e.g., \"45 & 47 President of the United States\")\n\t */\n\tattributionTitle?: string;\n\t/**\n\t * Background element - use BackgroundImage or similar\n\t */\n\tbackground?: React.ReactNode;\n\t/**\n\t * Overlay opacity (0-1)\n\t */\n\toverlayOpacity?: number;\n\t/**\n\t * Overlay color\n\t */\n\toverlayColor?: string;\n\t/**\n\t * Custom class for the quote text\n\t */\n\tquoteClassName?: string;\n\t/**\n\t * Custom class for the byline name\n\t */\n\tbylineNameClassName?: string;\n\t/**\n\t * Custom class for the byline title\n\t */\n\tbylineTitleClassName?: string;\n}\n\nconst QuoteBlock = React.forwardRef<HTMLElement, QuoteBlockProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tquote,\n\t\t\tshowQuoteMarks = true,\n\t\t\tsignatureImage,\n\t\t\tsignatureAlt = \"Signature\",\n\t\t\tattributionName,\n\t\t\tattributionTitle,\n\t\t\tbackground,\n\t\t\toverlayOpacity = 0,\n\t\t\toverlayColor = \"black\",\n\t\t\tquoteClassName,\n\t\t\tbylineNameClassName,\n\t\t\tbylineTitleClassName,\n\t\t\tsize,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst styles = quoteBlockVariants({ size });\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={styles.root({ class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Background */}\n\t\t\t\t{background}\n\n\t\t\t\t{/* Overlay */}\n\t\t\t\t{overlayOpacity > 0 && (\n\t\t\t\t\t<BackgroundOverlay\n\t\t\t\t\t\topacity={overlayOpacity}\n\t\t\t\t\t\tclassName={overlayColor !== \"black\" ? undefined : \"bg-black\"}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\toverlayColor !== \"black\"\n\t\t\t\t\t\t\t\t? { backgroundColor: overlayColor }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{/* Content */}\n\t\t\t\t<div className={styles.content()}>\n\t\t\t\t\t<div className={styles.quoteWrapper()}>\n\t\t\t\t\t\t{/* Quote */}\n\t\t\t\t\t\t<blockquote className={styles.quote({ class: quoteClassName })}>\n\t\t\t\t\t\t\t{showQuoteMarks && (\n\t\t\t\t\t\t\t\t<span className={styles.openQuote()} aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span className=\"relative\">\n\t\t\t\t\t\t\t\t{showQuoteMarks ? `${quote}\"` : quote}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\n\t\t\t\t\t\t{/* Attribution */}\n\t\t\t\t\t\t{(signatureImage || attributionName || attributionTitle) && (\n\t\t\t\t\t\t\t<div className={styles.attribution()}>\n\t\t\t\t\t\t\t\t{signatureImage && (\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tsrc={signatureImage}\n\t\t\t\t\t\t\t\t\t\talt={signatureAlt}\n\t\t\t\t\t\t\t\t\t\tclassName={styles.signature()}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{(attributionName || attributionTitle) && (\n\t\t\t\t\t\t\t\t\t<div className={styles.byline()}>\n\t\t\t\t\t\t\t\t\t\t{attributionName && (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={styles.bylineName({\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass: bylineNameClassName,\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{attributionName}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{attributionTitle && (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={styles.bylineTitle({\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass: bylineTitleClassName,\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{attributionTitle}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\n\nQuoteBlock.displayName = \"QuoteBlock\";\n\nexport { QuoteBlock, quoteBlockVariants };\n"]}

package/dist/river/index.d.ts

@@ -0,0 +1,100 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+
+/**
+ * River component for content sections with text and media
+ *
+ * Variants:
+ * - A: Text on left (9 cols), media on right (15 cols) on desktop
+ * - B: Media on left (15 cols), text on right (9 cols) on desktop
+ *
+ * Uses the 24-column grid system. Must be placed inside a `grid-container`.
+ */
+declare const riverVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface RiverProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof riverVariants> {
+    /**
+     * The headline text
+     */
+    headline: string;
+    /**
+     * The body text
+     */
+    body: string;
+    /**
+     * Primary action button (required)
+     */
+    primaryAction: React.ReactNode;
+    /**
+     * Secondary action button (optional)
+     */
+    secondaryAction?: React.ReactNode;
+    /**
+     * Media content (image, video, etc.)
+     */
+    media: React.ReactNode;
+}
+/**
+ * River component for content sections with text and media.
+ *
+ * Uses the 24-column grid system - must be placed inside a `grid-container`.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (text above media)
+ * - Desktop (lg+):
+ *   - Variant A: Text (9 cols) | Media (15 cols)
+ *   - Variant B: Media (15 cols) | Text (9 cols)
+ *
+ * @example
+ * ```tsx
+ * <div className="grid-container">
+ *   <River
+ *     variant="A"
+ *     headline="Feature Headline"
+ *     body="Description of the feature..."
+ *     primaryAction={<Button>Primary</Button>}
+ *     secondaryAction={<Button variant="outline">Secondary</Button>}
+ *     media={<img src="..." alt="Feature" />}
+ *   />
+ * </div>
+ * ```
+ */
+declare const River: React.ForwardRefExoticComponent<RiverProps & React.RefAttributes<HTMLElement>>;
+
+export { River, type RiverProps, riverVariants };

package/dist/river/index.js

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/sections/river/river.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var riverVariants = tv({
+  // Base styles - col-full within parent grid, responsive padding using primitive spacing tokens
+  base: [
+    "col-full",
+    // Small (mobile): 20px x, 72px top, 20px bottom
+    "px-20 pt-72 pb-20",
+    // Medium (tablet): 56px x, 96px y
+    "md:px-56 md:py-96",
+    // Large (desktop): 72px x, 128px y
+    "lg:px-72 lg:py-128"
+  ],
+  variants: {
+    variant: {
+      A: "",
+      B: ""
+    }
+  },
+  defaultVariants: {
+    variant: "A"
+  }
+});
+var River = React.forwardRef(
+  ({
+    className,
+    variant,
+    headline,
+    body,
+    primaryAction,
+    secondaryAction,
+    media,
+    ...props
+  }, ref) => {
+    const contentColumn = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col",
+          // Full width on mobile/tablet, 9 cols on desktop
+          "lg:col-span-9"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-16", children: [
+            /* @__PURE__ */ jsx("h2", { className: "typography-h4 text-gray-900", children: headline }),
+            /* @__PURE__ */ jsx("p", { className: "typography-body-small text-gray-800", children: body })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("flex flex-row gap-16 mt-36", "[&>*]:flex-shrink-0"),
+              children: [
+                primaryAction,
+                secondaryAction
+              ]
+            }
+          )
+        ]
+      }
+    );
+    const mediaColumn = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          // Full width on mobile/tablet, 15 cols on desktop
+          "lg:col-span-15",
+          // Ensure media fills the container
+          "[&>*]:w-full [&>*]:h-auto"
+        ),
+        children: media
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        className: riverVariants({ variant, class: className }),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("grid grid-cols-1 gap-36", "lg:grid-cols-24 lg:gap-36"),
+            children: variant === "B" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              mediaColumn,
+              contentColumn
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              contentColumn,
+              mediaColumn
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+River.displayName = "River";
+
+export { River, riverVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/river/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/sections/river/river.tsx"],"names":["twMerge"],"mappings":";;;;;;AAKO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAOA,MAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACMA,IAAM,gBAAgB,EAAA,CAAG;AAAA;AAAA,EAExB,IAAA,EAAM;AAAA,IACL,UAAA;AAAA;AAAA,IAEA,mBAAA;AAAA;AAAA,IAEA,mBAAA;AAAA;AAAA,IAEA;AAAA,GACD;AAAA,EACA,QAAA,EAAU;AAAA,IACT,OAAA,EAAS;AAAA,MACR,CAAA,EAAG,EAAA;AAAA,MACH,CAAA,EAAG;AAAA;AACJ,GACD;AAAA,EACA,eAAA,EAAiB;AAAA,IAChB,OAAA,EAAS;AAAA;AAEX,CAAC;AAoDD,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EACnB,CACC;AAAA,IACC,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEJ,GAAA,KACI;AACJ,IAAA,MAAM,aAAA,mBACL,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACV,eAAA;AAAA;AAAA,UAEA;AAAA,SACD;AAAA,QAGA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,sBAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,4BACtD,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qCAAA,EAAuC,QAAA,EAAA,IAAA,EAAK;AAAA,WAAA,EAC1D,CAAA;AAAA,0BAGA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACA,SAAA,EAAW,EAAA,CAAG,4BAAA,EAA8B,qBAAqB,CAAA;AAAA,cAEhE,QAAA,EAAA;AAAA,gBAAA,aAAA;AAAA,gBACA;AAAA;AAAA;AAAA;AACF;AAAA;AAAA,KACD;AAGD,IAAA,MAAM,WAAA,mBACL,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA;AAAA,UAEV,gBAAA;AAAA;AAAA,UAEA;AAAA,SACD;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACF;AAGD,IAAA,uBACC,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAW,aAAA,CAAc,EAAE,OAAA,EAAS,KAAA,EAAO,WAAW,CAAA;AAAA,QACrD,GAAG,KAAA;AAAA,QAGJ,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,2BAA2B,CAAA;AAAA,YAEnE,QAAA,EAAA,OAAA,KAAY,sBACZ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,cAAA,WAAA;AAAA,cACA;AAAA,aAAA,EACF,oBAEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,cAAA,aAAA;AAAA,cACA;AAAA,aAAA,EACF;AAAA;AAAA;AAEF;AAAA,KACD;AAAA,EAEF;AACD;AACA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * River component for content sections with text and media\n *\n * Variants:\n * - A: Text on left (9 cols), media on right (15 cols) on desktop\n * - B: Media on left (15 cols), text on right (9 cols) on desktop\n *\n * Uses the 24-column grid system. Must be placed inside a `grid-container`.\n */\nconst riverVariants = tv({\n\t// Base styles - col-full within parent grid, responsive padding using primitive spacing tokens\n\tbase: [\n\t\t\"col-full\",\n\t\t// Small (mobile): 20px x, 72px top, 20px bottom\n\t\t\"px-20 pt-72 pb-20\",\n\t\t// Medium (tablet): 56px x, 96px y\n\t\t\"md:px-56 md:py-96\",\n\t\t// Large (desktop): 72px x, 128px y\n\t\t\"lg:px-72 lg:py-128\",\n\t],\n\tvariants: {\n\t\tvariant: {\n\t\t\tA: \"\",\n\t\t\tB: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"A\",\n\t},\n});\n\nexport interface RiverProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof riverVariants> {\n\t/**\n\t * The headline text\n\t */\n\theadline: string;\n\t/**\n\t * The body text\n\t */\n\tbody: string;\n\t/**\n\t * Primary action button (required)\n\t */\n\tprimaryAction: React.ReactNode;\n\t/**\n\t * Secondary action button (optional)\n\t */\n\tsecondaryAction?: React.ReactNode;\n\t/**\n\t * Media content (image, video, etc.)\n\t */\n\tmedia: React.ReactNode;\n}\n\n/**\n * River component for content sections with text and media.\n *\n * Uses the 24-column grid system - must be placed inside a `grid-container`.\n *\n * Layout:\n * - Mobile/Tablet: Stacked (text above media)\n * - Desktop (lg+):\n *   - Variant A: Text (9 cols) | Media (15 cols)\n *   - Variant B: Media (15 cols) | Text (9 cols)\n *\n * @example\n * ```tsx\n * <div className=\"grid-container\">\n *   <River\n *     variant=\"A\"\n *     headline=\"Feature Headline\"\n *     body=\"Description of the feature...\"\n *     primaryAction={<Button>Primary</Button>}\n *     secondaryAction={<Button variant=\"outline\">Secondary</Button>}\n *     media={<img src=\"...\" alt=\"Feature\" />}\n *   />\n * </div>\n * ```\n */\nconst River = React.forwardRef<HTMLElement, RiverProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\theadline,\n\t\t\tbody,\n\t\t\tprimaryAction,\n\t\t\tsecondaryAction,\n\t\t\tmedia,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst contentColumn = (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t// Full width on mobile/tablet, 9 cols on desktop\n\t\t\t\t\t\"lg:col-span-9\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/* Text content with 16px gap - uses primitive spacing tokens */}\n\t\t\t\t<div className=\"flex flex-col gap-16\">\n\t\t\t\t\t<h2 className=\"typography-h4 text-gray-900\">{headline}</h2>\n\t\t\t\t\t<p className=\"typography-body-small text-gray-800\">{body}</p>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Buttons with 36px gap from text, responsive sizes - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\"flex flex-row gap-16 mt-36\", \"[&>*]:flex-shrink-0\")}\n\t\t\t\t>\n\t\t\t\t\t{primaryAction}\n\t\t\t\t\t{secondaryAction}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\n\t\tconst mediaColumn = (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Full width on mobile/tablet, 15 cols on desktop\n\t\t\t\t\t\"lg:col-span-15\",\n\t\t\t\t\t// Ensure media fills the container\n\t\t\t\t\t\"[&>*]:w-full [&>*]:h-auto\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{media}\n\t\t\t</div>\n\t\t);\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={riverVariants({ variant, class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Inner grid container for 24-col layout - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\"grid grid-cols-1 gap-36\", \"lg:grid-cols-24 lg:gap-36\")}\n\t\t\t\t>\n\t\t\t\t\t{variant === \"B\" ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{mediaColumn}\n\t\t\t\t\t\t\t{contentColumn}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{contentColumn}\n\t\t\t\t\t\t\t{mediaColumn}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nRiver.displayName = \"River\";\n\nexport { River, riverVariants };\n"]}