@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/tout/index.js

@@ -0,0 +1,315 @@
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/sections/tout/tout.tsx
+
+// src/lib/theme.ts
+function colorToVar(token) {
+  return `var(--color-${token})`;
+}
+function spacingToVar(token) {
+  return `var(--${token})`;
+}
+function radiusToVar(token) {
+  return `var(--${token})`;
+}
+function themeToStyleVars(theme) {
+  if (!theme) return {};
+  const vars = {};
+  if (theme.colors) {
+    const { colors } = theme;
+    if (colors.bgSection)
+      vars["--theme-bg-section"] = colorToVar(colors.bgSection);
+    if (colors.cardBackground)
+      vars["--theme-card-background"] = colorToVar(colors.cardBackground);
+    if (colors.bgMuted) vars["--theme-bg-muted"] = colorToVar(colors.bgMuted);
+    if (colors.textPrimary)
+      vars["--theme-text-primary"] = colorToVar(colors.textPrimary);
+    if (colors.textSecondary)
+      vars["--theme-text-secondary"] = colorToVar(colors.textSecondary);
+    if (colors.textMuted)
+      vars["--theme-text-muted"] = colorToVar(colors.textMuted);
+    if (colors.textInverted)
+      vars["--theme-text-inverted"] = colorToVar(colors.textInverted);
+    if (colors.textLink)
+      vars["--theme-text-link"] = colorToVar(colors.textLink);
+    if (colors.textLinkHover)
+      vars["--theme-text-link-hover"] = colorToVar(colors.textLinkHover);
+    if (colors.accentBrand)
+      vars["--theme-accent-brand"] = colorToVar(colors.accentBrand);
+    if (colors.accentBrandSoft)
+      vars["--theme-accent-brand-soft"] = colorToVar(colors.accentBrandSoft);
+    if (colors.borderSubtle)
+      vars["--theme-border-subtle"] = colorToVar(colors.borderSubtle);
+    if (colors.borderStrong)
+      vars["--theme-border-strong"] = colorToVar(colors.borderStrong);
+    if (colors.borderFocus)
+      vars["--theme-border-focus"] = colorToVar(colors.borderFocus);
+    if (colors.borderDivider)
+      vars["--theme-border-divider"] = colorToVar(colors.borderDivider);
+    if (colors.buttonPrimaryBg)
+      vars["--theme-button-primary-bg"] = colorToVar(colors.buttonPrimaryBg);
+    if (colors.buttonPrimaryBgHover)
+      vars["--theme-button-primary-bg-hover"] = colorToVar(
+        colors.buttonPrimaryBgHover
+      );
+    if (colors.buttonSecondaryBg)
+      vars["--theme-button-secondary-bg"] = colorToVar(
+        colors.buttonSecondaryBg
+      );
+    if (colors.buttonSecondaryBgHover)
+      vars["--theme-button-secondary-bg-hover"] = colorToVar(
+        colors.buttonSecondaryBgHover
+      );
+  }
+  if (theme.spatial) {
+    const { spatial } = theme;
+    if (spatial.gridLargeMargin)
+      vars["--theme-grid-large-margin"] = spacingToVar(spatial.gridLargeMargin);
+    if (spatial.gridLargeGutter)
+      vars["--theme-grid-large-gutter"] = spacingToVar(spatial.gridLargeGutter);
+    if (spatial.gridLargeColumns)
+      vars["--theme-grid-large-columns"] = String(spatial.gridLargeColumns);
+    if (spatial.gridMediumMargin)
+      vars["--theme-grid-medium-margin"] = spacingToVar(
+        spatial.gridMediumMargin
+      );
+    if (spatial.gridMediumGutter)
+      vars["--theme-grid-medium-gutter"] = spacingToVar(
+        spatial.gridMediumGutter
+      );
+    if (spatial.gridMediumColumns)
+      vars["--theme-grid-medium-columns"] = String(spatial.gridMediumColumns);
+    if (spatial.gridSmallMargin)
+      vars["--theme-grid-small-margin"] = spacingToVar(spatial.gridSmallMargin);
+    if (spatial.gridSmallGutter)
+      vars["--theme-grid-small-gutter"] = spacingToVar(spatial.gridSmallGutter);
+    if (spatial.gridSmallColumns)
+      vars["--theme-grid-small-columns"] = String(spatial.gridSmallColumns);
+    if (spatial.sectionLargeGap)
+      vars["--theme-section-large-gap"] = spacingToVar(spatial.sectionLargeGap);
+    if (spatial.sectionLargePadding)
+      vars["--theme-section-large-padding"] = spacingToVar(
+        spatial.sectionLargePadding
+      );
+    if (spatial.sectionMediumGap)
+      vars["--theme-section-medium-gap"] = spacingToVar(
+        spatial.sectionMediumGap
+      );
+    if (spatial.sectionMediumPadding)
+      vars["--theme-section-medium-padding"] = spacingToVar(
+        spatial.sectionMediumPadding
+      );
+    if (spatial.sectionSmallGap)
+      vars["--theme-section-small-gap"] = spacingToVar(spatial.sectionSmallGap);
+    if (spatial.sectionSmallPadding)
+      vars["--theme-section-small-padding"] = spacingToVar(
+        spatial.sectionSmallPadding
+      );
+    if (spatial.cardLargeGap)
+      vars["--theme-card-large-gap"] = spacingToVar(spatial.cardLargeGap);
+    if (spatial.cardLargePadding)
+      vars["--theme-card-large-padding"] = spacingToVar(
+        spatial.cardLargePadding
+      );
+    if (spatial.cardSmallGap)
+      vars["--theme-card-small-gap"] = spacingToVar(spatial.cardSmallGap);
+    if (spatial.cardSmallPadding)
+      vars["--theme-card-small-padding"] = spacingToVar(
+        spatial.cardSmallPadding
+      );
+  }
+  if (theme.surface) {
+    const { surface } = theme;
+    if (surface.cardRadius)
+      vars["--theme-card-radius"] = radiusToVar(surface.cardRadius);
+    if (surface.cardStroke)
+      vars["--theme-card-stroke"] = `${surface.cardStroke}px`;
+    if (surface.buttonRadius)
+      vars["--theme-button-radius"] = radiusToVar(surface.buttonRadius);
+    if (surface.buttonStrokeWeight)
+      vars["--theme-button-stroke-weight"] = `${surface.buttonStrokeWeight}px`;
+  }
+  return vars;
+}
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var toutVariants = tv({
+  base: [
+    // Full width
+    "w-full",
+    // Positioning context for background
+    "relative overflow-hidden",
+    // Responsive height: 600px mobile, 750px tablet, 900px desktop
+    "h-[600px] md:h-[750px] lg:h-[900px]"
+  ],
+  variants: {
+    colorScheme: {
+      light: "",
+      dark: ""
+    },
+    align: {
+      left: "",
+      center: ""
+    }
+  },
+  defaultVariants: {
+    colorScheme: "light",
+    align: "left"
+  }
+});
+var Tout = React.forwardRef(
+  ({
+    className,
+    colorScheme = "light",
+    align = "left",
+    headline,
+    body,
+    primaryAction,
+    secondaryAction,
+    backgroundMedia,
+    footer,
+    theme,
+    style,
+    ...props
+  }, ref) => {
+    const isCentered = align === "center";
+    const isDark = colorScheme === "dark";
+    const themeStyles = themeToStyleVars(theme);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        className: toutVariants({ colorScheme, align, class: className }),
+        style: { ...themeStyles, ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-0 pointer-events-none",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gray-500" }),
+                backgroundMedia
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                // Position above background
+                "relative z-10",
+                // Grid setup with responsive columns
+                "grid w-full h-full",
+                // Mobile: 4 columns with gap-20
+                "grid-cols-4 gap-20",
+                // Tablet (md): 12 columns
+                "md:grid-cols-12",
+                // Desktop (lg): 24 columns
+                "lg:grid-cols-24",
+                // Max width and centering like grid-container
+                "max-w-[var(--breakpoint-lg)] mx-auto",
+                // Responsive margins matching grid-container - uses primitive spacing tokens
+                "px-20 md:px-56 lg:px-72",
+                // Vertical padding to position content at bottom - uses primitive spacing tokens
+                "py-36 md:py-56 lg:py-72"
+              ),
+              style: {
+                // Grid spacing theme overrides
+                ...theme?.spatial?.gridSmallMargin && {
+                  paddingLeft: "var(--theme-grid-small-margin)",
+                  paddingRight: "var(--theme-grid-small-margin)"
+                },
+                ...theme?.spatial?.gridSmallGutter && {
+                  gap: "var(--theme-grid-small-gutter)"
+                }
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    // Flex container for content
+                    "flex flex-col",
+                    isCentered ? "justify-start items-center" : "justify-end",
+                    // Responsive gap between text and buttons - uses primitive spacing tokens
+                    "gap-28 md:gap-36",
+                    // Mobile: all 4 cols
+                    "col-span-4",
+                    // Tablet & Desktop: 9 cols left-aligned, full width centered
+                    isCentered ? "md:col-span-12 lg:col-span-24" : "md:col-span-9"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "flex flex-col gap-16",
+                          isCentered && "items-center text-center"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "h2",
+                            {
+                              className: cn(
+                                "typography-h4",
+                                isDark ? "text-gray-100" : "text-gray-900"
+                              ),
+                              style: {
+                                color: theme?.colors?.textPrimary ? "var(--theme-text-primary)" : void 0
+                              },
+                              children: headline
+                            }
+                          ),
+                          body && /* @__PURE__ */ jsx(
+                            "p",
+                            {
+                              className: cn(
+                                "typography-body-small",
+                                isDark ? "text-gray-400" : "text-gray-800"
+                              ),
+                              style: {
+                                color: theme?.colors?.textSecondary ? "var(--theme-text-secondary)" : void 0
+                              },
+                              children: body
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "flex flex-row",
+                          isCentered ? "justify-center" : "items-start",
+                          // Responsive gap between buttons
+                          "gap-8 md:gap-12",
+                          "[&>*]:flex-shrink-0"
+                        ),
+                        children: [
+                          primaryAction,
+                          secondaryAction
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          footer && /* @__PURE__ */ jsx("div", { className: "absolute bottom-6 md:bottom-8 left-0 right-0 z-10", children: footer })
+        ]
+      }
+    );
+  }
+);
+Tout.displayName = "Tout";
+
+export { Tout };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/tout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/theme.ts","../../src/lib/utils.ts","../../src/components/sections/tout/tout.tsx"],"names":["twMerge"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Component-level theming interface\n *\n * This interface defines all the customizable design tokens that can be\n * overridden at the component level. Components accepting a `theme` prop\n * will apply these values as CSS custom properties, allowing fine-grained\n * control over appearance without creating new variants.\n *\n * All values use primitive token names (e.g., \"gray-100\", \"spacing-40\")\n * which are converted to CSS variable references internally.\n */\n\n// =============================================================================\n// Token Name Types\n// =============================================================================\n\n/**\n * Color token names - maps to `--color-{name}` CSS variables\n * @example \"gray-100\", \"ember-v300\", \"alpha-black-10\"\n */\nexport type ColorToken =\n\t// Grayscale\n\t| \"gray-50\"\n\t| \"gray-100\"\n\t| \"gray-200\"\n\t| \"gray-300\"\n\t| \"gray-400\"\n\t| \"gray-500\"\n\t| \"gray-600\"\n\t| \"gray-700\"\n\t| \"gray-800\"\n\t| \"gray-900\"\n\t| \"gray-1000\"\n\t| \"gray-1100\"\n\t| \"gray-1200\"\n\t// Steel\n\t| \"steel-50\"\n\t| \"steel-100\"\n\t| \"steel-200\"\n\t| \"steel-300\"\n\t| \"steel-400\"\n\t| \"steel-500\"\n\t| \"steel-600\"\n\t| \"steel-700\"\n\t| \"steel-800\"\n\t| \"steel-900\"\n\t| \"steel-1000\"\n\t| \"steel-1100\"\n\t| \"steel-1200\"\n\t// Brown\n\t| \"brown-50\"\n\t| \"brown-100\"\n\t| \"brown-200\"\n\t| \"brown-300\"\n\t| \"brown-400\"\n\t| \"brown-500\"\n\t| \"brown-600\"\n\t| \"brown-700\"\n\t| \"brown-800\"\n\t| \"brown-900\"\n\t| \"brown-1000\"\n\t| \"brown-1100\"\n\t| \"brown-1200\"\n\t// Ember\n\t| \"ember-50\"\n\t| \"ember-100\"\n\t| \"ember-200\"\n\t| \"ember-300\"\n\t| \"ember-400\"\n\t| \"ember-500\"\n\t| \"ember-600\"\n\t| \"ember-700\"\n\t| \"ember-800\"\n\t| \"ember-900\"\n\t| \"ember-v100\"\n\t| \"ember-v200\"\n\t| \"ember-v300\"\n\t| \"ember-v400\"\n\t// Orange\n\t| \"orange-50\"\n\t| \"orange-100\"\n\t| \"orange-200\"\n\t| \"orange-300\"\n\t| \"orange-400\"\n\t| \"orange-500\"\n\t| \"orange-600\"\n\t| \"orange-700\"\n\t| \"orange-800\"\n\t| \"orange-900\"\n\t| \"orange-v100\"\n\t| \"orange-v200\"\n\t| \"orange-v300\"\n\t| \"orange-v400\"\n\t// Amber\n\t| \"amber-50\"\n\t| \"amber-100\"\n\t| \"amber-200\"\n\t| \"amber-300\"\n\t| \"amber-400\"\n\t| \"amber-500\"\n\t| \"amber-600\"\n\t| \"amber-700\"\n\t| \"amber-800\"\n\t| \"amber-900\"\n\t| \"amber-v100\"\n\t| \"amber-v200\"\n\t| \"amber-v300\"\n\t| \"amber-v400\"\n\t// Yellow\n\t| \"yellow-50\"\n\t| \"yellow-100\"\n\t| \"yellow-200\"\n\t| \"yellow-300\"\n\t| \"yellow-400\"\n\t| \"yellow-500\"\n\t| \"yellow-600\"\n\t| \"yellow-700\"\n\t| \"yellow-800\"\n\t| \"yellow-900\"\n\t| \"yellow-v100\"\n\t| \"yellow-v200\"\n\t| \"yellow-v300\"\n\t| \"yellow-v400\"\n\t// Lime\n\t| \"lime-50\"\n\t| \"lime-100\"\n\t| \"lime-200\"\n\t| \"lime-300\"\n\t| \"lime-400\"\n\t| \"lime-500\"\n\t| \"lime-600\"\n\t| \"lime-700\"\n\t| \"lime-800\"\n\t| \"lime-900\"\n\t| \"lime-v100\"\n\t| \"lime-v200\"\n\t| \"lime-v300\"\n\t| \"lime-v400\"\n\t// Green\n\t| \"green-50\"\n\t| \"green-100\"\n\t| \"green-200\"\n\t| \"green-300\"\n\t| \"green-400\"\n\t| \"green-500\"\n\t| \"green-600\"\n\t| \"green-700\"\n\t| \"green-800\"\n\t| \"green-900\"\n\t| \"green-v100\"\n\t| \"green-v200\"\n\t| \"green-v300\"\n\t| \"green-v400\"\n\t// Sage\n\t| \"sage-50\"\n\t| \"sage-100\"\n\t| \"sage-200\"\n\t| \"sage-300\"\n\t| \"sage-400\"\n\t| \"sage-500\"\n\t| \"sage-600\"\n\t| \"sage-700\"\n\t| \"sage-800\"\n\t| \"sage-900\"\n\t| \"sage-v100\"\n\t| \"sage-v200\"\n\t| \"sage-v300\"\n\t| \"sage-v400\"\n\t// Teal\n\t| \"teal-50\"\n\t| \"teal-100\"\n\t| \"teal-200\"\n\t| \"teal-300\"\n\t| \"teal-400\"\n\t| \"teal-500\"\n\t| \"teal-600\"\n\t| \"teal-700\"\n\t| \"teal-800\"\n\t| \"teal-900\"\n\t| \"teal-v100\"\n\t| \"teal-v200\"\n\t| \"teal-v300\"\n\t| \"teal-v400\"\n\t// Cyan\n\t| \"cyan-50\"\n\t| \"cyan-100\"\n\t| \"cyan-200\"\n\t| \"cyan-300\"\n\t| \"cyan-400\"\n\t| \"cyan-500\"\n\t| \"cyan-600\"\n\t| \"cyan-700\"\n\t| \"cyan-800\"\n\t| \"cyan-900\"\n\t| \"cyan-v100\"\n\t| \"cyan-v200\"\n\t| \"cyan-v300\"\n\t| \"cyan-v400\"\n\t// Ice\n\t| \"ice-50\"\n\t| \"ice-100\"\n\t| \"ice-200\"\n\t| \"ice-300\"\n\t| \"ice-400\"\n\t| \"ice-500\"\n\t| \"ice-600\"\n\t| \"ice-700\"\n\t| \"ice-800\"\n\t| \"ice-900\"\n\t| \"ice-v100\"\n\t| \"ice-v200\"\n\t| \"ice-v300\"\n\t| \"ice-v400\"\n\t// Blue\n\t| \"blue-50\"\n\t| \"blue-100\"\n\t| \"blue-200\"\n\t| \"blue-300\"\n\t| \"blue-400\"\n\t| \"blue-500\"\n\t| \"blue-600\"\n\t| \"blue-700\"\n\t| \"blue-800\"\n\t| \"blue-900\"\n\t| \"blue-v100\"\n\t| \"blue-v200\"\n\t| \"blue-v300\"\n\t| \"blue-v400\"\n\t// Indigo\n\t| \"indigo-50\"\n\t| \"indigo-100\"\n\t| \"indigo-200\"\n\t| \"indigo-300\"\n\t| \"indigo-400\"\n\t| \"indigo-500\"\n\t| \"indigo-600\"\n\t| \"indigo-700\"\n\t| \"indigo-800\"\n\t| \"indigo-900\"\n\t| \"indigo-v100\"\n\t| \"indigo-v200\"\n\t| \"indigo-v300\"\n\t| \"indigo-v400\"\n\t// Iris\n\t| \"iris-50\"\n\t| \"iris-100\"\n\t| \"iris-200\"\n\t| \"iris-300\"\n\t| \"iris-400\"\n\t| \"iris-500\"\n\t| \"iris-600\"\n\t| \"iris-700\"\n\t| \"iris-800\"\n\t| \"iris-900\"\n\t| \"iris-v100\"\n\t| \"iris-v200\"\n\t| \"iris-v300\"\n\t| \"iris-v400\"\n\t// Purple\n\t| \"purple-50\"\n\t| \"purple-100\"\n\t| \"purple-200\"\n\t| \"purple-300\"\n\t| \"purple-400\"\n\t| \"purple-500\"\n\t| \"purple-600\"\n\t| \"purple-700\"\n\t| \"purple-800\"\n\t| \"purple-900\"\n\t| \"purple-v100\"\n\t| \"purple-v200\"\n\t| \"purple-v300\"\n\t| \"purple-v400\"\n\t// Pink\n\t| \"pink-50\"\n\t| \"pink-100\"\n\t| \"pink-200\"\n\t| \"pink-300\"\n\t| \"pink-400\"\n\t| \"pink-500\"\n\t| \"pink-600\"\n\t| \"pink-700\"\n\t| \"pink-800\"\n\t| \"pink-900\"\n\t| \"pink-v100\"\n\t| \"pink-v200\"\n\t| \"pink-v300\"\n\t| \"pink-v400\"\n\t// Red\n\t| \"red-50\"\n\t| \"red-100\"\n\t| \"red-200\"\n\t| \"red-300\"\n\t| \"red-400\"\n\t| \"red-500\"\n\t| \"red-600\"\n\t| \"red-700\"\n\t| \"red-800\"\n\t| \"red-900\"\n\t| \"red-v100\"\n\t| \"red-v200\"\n\t| \"red-v300\"\n\t| \"red-v400\"\n\t// Alpha\n\t| \"alpha-black-5\"\n\t| \"alpha-black-10\"\n\t| \"alpha-black-20\"\n\t| \"alpha-black-30\"\n\t| \"alpha-black-40\"\n\t| \"alpha-black-50\"\n\t| \"alpha-black-60\"\n\t| \"alpha-black-70\"\n\t| \"alpha-black-80\"\n\t| \"alpha-black-90\"\n\t| \"alpha-black-95\"\n\t| \"alpha-white-5\"\n\t| \"alpha-white-10\"\n\t| \"alpha-white-20\"\n\t| \"alpha-white-30\"\n\t| \"alpha-white-40\"\n\t| \"alpha-white-50\"\n\t| \"alpha-white-60\"\n\t| \"alpha-white-70\"\n\t| \"alpha-white-80\"\n\t| \"alpha-white-90\"\n\t| \"alpha-white-95\"\n\t// Special\n\t| \"white\"\n\t| \"black\";\n\n/**\n * Spacing token names - maps to `--spacing-{name}` CSS variables\n * @example \"spacing-40\", \"spacing-72\"\n */\nexport type SpacingToken =\n\t| \"spacing-0\"\n\t| \"spacing-2\"\n\t| \"spacing-4\"\n\t| \"spacing-6\"\n\t| \"spacing-8\"\n\t| \"spacing-10\"\n\t| \"spacing-11\"\n\t| \"spacing-12\"\n\t| \"spacing-16\"\n\t| \"spacing-20\"\n\t| \"spacing-24\"\n\t| \"spacing-28\"\n\t| \"spacing-32\"\n\t| \"spacing-36\"\n\t| \"spacing-40\"\n\t| \"spacing-48\"\n\t| \"spacing-56\"\n\t| \"spacing-64\"\n\t| \"spacing-72\"\n\t| \"spacing-80\"\n\t| \"spacing-96\"\n\t| \"spacing-112\"\n\t| \"spacing-128\"\n\t| \"spacing-144\"\n\t| \"spacing-160\"\n\t| \"spacing-176\"\n\t| \"spacing-192\"\n\t| \"spacing-208\"\n\t| \"spacing-224\"\n\t| \"spacing-240\"\n\t| \"spacing-256\"\n\t| \"spacing-288\"\n\t| \"spacing-320\"\n\t| \"spacing-352\"\n\t| \"spacing-384\"\n\t| \"spacing-400\";\n\n/**\n * Radius token names - maps to `--radii-{name}` CSS variables\n * @example \"radii-4\", \"radii-6\"\n */\nexport type RadiusToken =\n\t| \"radii-0\"\n\t| \"radii-2\"\n\t| \"radii-4\"\n\t| \"radii-6\"\n\t| \"radii-8\"\n\t| \"radii-10\"\n\t| \"radii-11\"\n\t| \"radii-12\"\n\t| \"radii-16\"\n\t| \"radii-20\"\n\t| \"radii-24\"\n\t| \"radii-28\"\n\t| \"radii-32\"\n\t| \"radii-36\"\n\t| \"radii-40\"\n\t| \"radii-48\"\n\t| \"radii-56\"\n\t| \"radii-64\"\n\t| \"radii-72\"\n\t| \"radii-80\"\n\t| \"radii-96\"\n\t| \"radii-112\"\n\t| \"radii-128\"\n\t| \"radii-144\"\n\t| \"radii-160\"\n\t| \"radii-176\"\n\t| \"radii-192\"\n\t| \"radii-208\"\n\t| \"radii-224\"\n\t| \"radii-240\"\n\t| \"radii-256\"\n\t| \"radii-288\"\n\t| \"radii-320\"\n\t| \"radii-352\"\n\t| \"radii-384\"\n\t| \"radii-400\";\n\n/**\n * Font size token values - primitive font sizes available in the design system\n * These correspond to Tailwind classes like `text-64`, `text-128`, etc.\n * @example 64, 128, 192\n */\nexport type FontSizeToken =\n\t| 9\n\t| 11\n\t| 12\n\t| 14\n\t| 16\n\t| 18\n\t| 21\n\t| 24\n\t| 28\n\t| 32\n\t| 36\n\t| 42\n\t| 48\n\t| 56\n\t| 64\n\t| 72\n\t| 84\n\t| 88\n\t| 96\n\t| 112\n\t| 128\n\t| 148\n\t| 168\n\t| 192\n\t| 224\n\t| 256\n\t| 280;\n\n/**\n * Array of all available font sizes for use in UI selectors/dropdowns\n */\nexport const FONT_SIZES: FontSizeToken[] = [\n\t9, 11, 12, 14, 16, 18, 21, 24, 28, 32, 36, 42, 48, 56, 64, 72, 84, 88, 96,\n\t112, 128, 148, 168, 192, 224, 256, 280,\n];\n\n/**\n * Helper to generate typography class string from font size\n * @example fontSizeToClass(128) => \"text-128 leading-128 tracking-128\"\n */\nexport function fontSizeToClass(size: FontSizeToken): string {\n\treturn `text-${size} leading-${size} tracking-${size}`;\n}\n\n/**\n * Helper to generate responsive typography class string\n * @example responsiveTypographyClass(64, 128, 192) => \"text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 xl:text-192 xl:leading-192 xl:tracking-192\"\n */\nexport function responsiveTypographyClass(\n\tmobile: FontSizeToken,\n\ttablet: FontSizeToken,\n\tdesktop: FontSizeToken,\n): string {\n\treturn [\n\t\tfontSizeToClass(mobile),\n\t\t`md:${fontSizeToClass(tablet).split(\" \").join(\" md:\")}`,\n\t\t`xl:${fontSizeToClass(desktop).split(\" \").join(\" xl:\")}`,\n\t].join(\" \");\n}\n\n// =============================================================================\n// Color Tokens\n// =============================================================================\n\nexport interface ComponentThemeColors {\n\t/**\n\t * Background color for sections\n\t * @example \"gray-100\"\n\t */\n\tbgSection?: ColorToken;\n\n\t/**\n\t * Background color for cards\n\t * @example \"white\"\n\t */\n\tcardBackground?: ColorToken;\n\n\t/**\n\t * Muted background color\n\t * @example \"gray-50\"\n\t */\n\tbgMuted?: ColorToken;\n\n\t/**\n\t * Primary text color\n\t * @example \"gray-1100\"\n\t */\n\ttextPrimary?: ColorToken;\n\n\t/**\n\t * Secondary text color\n\t * @example \"gray-800\"\n\t */\n\ttextSecondary?: ColorToken;\n\n\t/**\n\t * Muted text color\n\t * @example \"gray-600\"\n\t */\n\ttextMuted?: ColorToken;\n\n\t/**\n\t * Inverted text color (for dark backgrounds)\n\t * @example \"gray-100\"\n\t */\n\ttextInverted?: ColorToken;\n\n\t/**\n\t * Link text color\n\t * @example \"gray-1100\"\n\t */\n\ttextLink?: ColorToken;\n\n\t/**\n\t * Link hover text color\n\t * @example \"gray-700\"\n\t */\n\ttextLinkHover?: ColorToken;\n\n\t/**\n\t * Brand accent color\n\t * @example \"ember-v300\"\n\t */\n\taccentBrand?: ColorToken;\n\n\t/**\n\t * Soft brand accent color\n\t * @example \"ember-100\"\n\t */\n\taccentBrandSoft?: ColorToken;\n\n\t/**\n\t * Subtle border color\n\t * @example \"alpha-black-10\"\n\t */\n\tborderSubtle?: ColorToken;\n\n\t/**\n\t * Strong border color\n\t * @example \"alpha-black-20\"\n\t */\n\tborderStrong?: ColorToken;\n\n\t/**\n\t * Focus border color (uses accentBrand by default)\n\t * @example \"ember-v300\"\n\t */\n\tborderFocus?: ColorToken;\n\n\t/**\n\t * Divider border color\n\t * @example \"alpha-black-10\"\n\t */\n\tborderDivider?: ColorToken;\n\n\t/**\n\t * Primary button background color\n\t * @example \"gray-1100\"\n\t */\n\tbuttonPrimaryBg?: ColorToken;\n\n\t/**\n\t * Primary button hover background color\n\t * @example \"gray-600\"\n\t */\n\tbuttonPrimaryBgHover?: ColorToken;\n\n\t/**\n\t * Secondary button background color\n\t * @example \"white\"\n\t */\n\tbuttonSecondaryBg?: ColorToken;\n\n\t/**\n\t * Secondary button hover background color\n\t * @example \"gray-100\"\n\t */\n\tbuttonSecondaryBgHover?: ColorToken;\n}\n\n// =============================================================================\n// Spatial Tokens\n// =============================================================================\n\nexport interface ComponentThemeSpatial {\n\t/**\n\t * Grid margin for large breakpoint\n\t * @example \"spacing-72\"\n\t */\n\tgridLargeMargin?: SpacingToken;\n\n\t/**\n\t * Grid gutter for large breakpoint\n\t * @example \"spacing-24\"\n\t */\n\tgridLargeGutter?: SpacingToken;\n\n\t/**\n\t * Number of grid columns for large breakpoint\n\t */\n\tgridLargeColumns?: number;\n\n\t/**\n\t * Grid margin for medium breakpoint\n\t * @example \"spacing-56\"\n\t */\n\tgridMediumMargin?: SpacingToken;\n\n\t/**\n\t * Grid gutter for medium breakpoint\n\t * @example \"spacing-20\"\n\t */\n\tgridMediumGutter?: SpacingToken;\n\n\t/**\n\t * Number of grid columns for medium breakpoint\n\t */\n\tgridMediumColumns?: number;\n\n\t/**\n\t * Grid margin for small breakpoint\n\t * @example \"spacing-24\"\n\t */\n\tgridSmallMargin?: SpacingToken;\n\n\t/**\n\t * Grid gutter for small breakpoint\n\t * @example \"spacing-12\"\n\t */\n\tgridSmallGutter?: SpacingToken;\n\n\t/**\n\t * Number of grid columns for small breakpoint\n\t */\n\tgridSmallColumns?: number;\n\n\t/**\n\t * Section gap for large breakpoint\n\t * @example \"spacing-64\"\n\t */\n\tsectionLargeGap?: SpacingToken;\n\n\t/**\n\t * Section padding for large breakpoint\n\t * @example \"spacing-128\"\n\t */\n\tsectionLargePadding?: SpacingToken;\n\n\t/**\n\t * Section gap for medium breakpoint\n\t * @example \"spacing-56\"\n\t */\n\tsectionMediumGap?: SpacingToken;\n\n\t/**\n\t * Section padding for medium breakpoint\n\t * @example \"spacing-96\"\n\t */\n\tsectionMediumPadding?: SpacingToken;\n\n\t/**\n\t * Section gap for small breakpoint\n\t * @example \"spacing-32\"\n\t */\n\tsectionSmallGap?: SpacingToken;\n\n\t/**\n\t * Section padding for small breakpoint\n\t * @example \"spacing-64\"\n\t */\n\tsectionSmallPadding?: SpacingToken;\n\n\t/**\n\t * Card gap for large size\n\t * @example \"spacing-10\"\n\t */\n\tcardLargeGap?: SpacingToken;\n\n\t/**\n\t * Card padding for large size\n\t * @example \"spacing-24\"\n\t */\n\tcardLargePadding?: SpacingToken;\n\n\t/**\n\t * Card gap for small size\n\t * @example \"spacing-12\"\n\t */\n\tcardSmallGap?: SpacingToken;\n\n\t/**\n\t * Card padding for small size\n\t * @example \"spacing-16\"\n\t */\n\tcardSmallPadding?: SpacingToken;\n}\n\n// =============================================================================\n// Surface Tokens\n// =============================================================================\n\nexport interface ComponentThemeSurface {\n\t/**\n\t * Card border radius\n\t * @example \"radii-4\"\n\t */\n\tcardRadius?: RadiusToken;\n\n\t/**\n\t * Card stroke/border width in pixels\n\t * @example 1\n\t */\n\tcardStroke?: number;\n\n\t/**\n\t * Button border radius\n\t * @example \"radii-6\"\n\t */\n\tbuttonRadius?: RadiusToken;\n\n\t/**\n\t * Button stroke/border weight in pixels\n\t * @example 1\n\t */\n\tbuttonStrokeWeight?: number;\n}\n\n// =============================================================================\n// Combined Theme Interface\n// =============================================================================\n\n/**\n * Complete component theme interface combining colors, spatial, and surface tokens.\n *\n * @example\n * ```tsx\n * const customTheme: ComponentTheme = {\n *   colors: {\n *     textPrimary: \"gray-100\",\n *     accentBrand: \"ember-500\",\n *   },\n *   spatial: {\n *     sectionLargePadding: \"spacing-96\",\n *   },\n *   surface: {\n *     cardRadius: \"radii-8\",\n *   },\n * };\n *\n * <Tout theme={customTheme} ... />\n * ```\n */\nexport interface ComponentTheme {\n\tcolors?: ComponentThemeColors;\n\tspatial?: ComponentThemeSpatial;\n\tsurface?: ComponentThemeSurface;\n}\n\n// =============================================================================\n// Button Theme Interface\n// =============================================================================\n\n/**\n * Button-specific theme interface for customizing individual button appearance.\n *\n * @example\n * ```tsx\n * const buttonTheme: ButtonTheme = {\n *   bg: \"ember-500\",\n *   bgHover: \"ember-600\",\n *   text: \"white\",\n *   radius: \"radii-8\",\n * };\n *\n * <Button theme={buttonTheme}>Themed Button</Button>\n * ```\n */\nexport interface ButtonTheme {\n\t/** Background color */\n\tbg?: ColorToken;\n\t/** Background color on hover */\n\tbgHover?: ColorToken;\n\t/** Background color on active/press */\n\tbgActive?: ColorToken;\n\t/** Text color */\n\ttext?: ColorToken;\n\t/** Border color (if using border) */\n\tborderColor?: ColorToken;\n\t/** Border width in pixels (0 for no border) */\n\tborderWidth?: number;\n\t/** Border radius */\n\tradius?: RadiusToken;\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Converts a color token name to a CSS variable reference\n */\nfunction colorToVar(token: ColorToken): string {\n\treturn `var(--color-${token})`;\n}\n\n/**\n * Converts a spacing token name to a CSS variable reference\n */\nfunction spacingToVar(token: SpacingToken): string {\n\treturn `var(--${token})`;\n}\n\n/**\n * Converts a radius token name to a CSS variable reference\n */\nfunction radiusToVar(token: RadiusToken): string {\n\treturn `var(--${token})`;\n}\n\n/**\n * Converts a ComponentTheme object to CSS custom properties (inline style object)\n *\n * @param theme - The theme object to convert\n * @returns An object suitable for use as React inline styles\n */\nexport function themeToStyleVars(\n\ttheme: ComponentTheme | undefined,\n): React.CSSProperties {\n\tif (!theme) return {};\n\n\tconst vars: Record<string, string> = {};\n\n\t// Colors\n\tif (theme.colors) {\n\t\tconst { colors } = theme;\n\t\tif (colors.bgSection)\n\t\t\tvars[\"--theme-bg-section\"] = colorToVar(colors.bgSection);\n\t\tif (colors.cardBackground)\n\t\t\tvars[\"--theme-card-background\"] = colorToVar(colors.cardBackground);\n\t\tif (colors.bgMuted) vars[\"--theme-bg-muted\"] = colorToVar(colors.bgMuted);\n\t\tif (colors.textPrimary)\n\t\t\tvars[\"--theme-text-primary\"] = colorToVar(colors.textPrimary);\n\t\tif (colors.textSecondary)\n\t\t\tvars[\"--theme-text-secondary\"] = colorToVar(colors.textSecondary);\n\t\tif (colors.textMuted)\n\t\t\tvars[\"--theme-text-muted\"] = colorToVar(colors.textMuted);\n\t\tif (colors.textInverted)\n\t\t\tvars[\"--theme-text-inverted\"] = colorToVar(colors.textInverted);\n\t\tif (colors.textLink)\n\t\t\tvars[\"--theme-text-link\"] = colorToVar(colors.textLink);\n\t\tif (colors.textLinkHover)\n\t\t\tvars[\"--theme-text-link-hover\"] = colorToVar(colors.textLinkHover);\n\t\tif (colors.accentBrand)\n\t\t\tvars[\"--theme-accent-brand\"] = colorToVar(colors.accentBrand);\n\t\tif (colors.accentBrandSoft)\n\t\t\tvars[\"--theme-accent-brand-soft\"] = colorToVar(colors.accentBrandSoft);\n\t\tif (colors.borderSubtle)\n\t\t\tvars[\"--theme-border-subtle\"] = colorToVar(colors.borderSubtle);\n\t\tif (colors.borderStrong)\n\t\t\tvars[\"--theme-border-strong\"] = colorToVar(colors.borderStrong);\n\t\tif (colors.borderFocus)\n\t\t\tvars[\"--theme-border-focus\"] = colorToVar(colors.borderFocus);\n\t\tif (colors.borderDivider)\n\t\t\tvars[\"--theme-border-divider\"] = colorToVar(colors.borderDivider);\n\t\tif (colors.buttonPrimaryBg)\n\t\t\tvars[\"--theme-button-primary-bg\"] = colorToVar(colors.buttonPrimaryBg);\n\t\tif (colors.buttonPrimaryBgHover)\n\t\t\tvars[\"--theme-button-primary-bg-hover\"] = colorToVar(\n\t\t\t\tcolors.buttonPrimaryBgHover,\n\t\t\t);\n\t\tif (colors.buttonSecondaryBg)\n\t\t\tvars[\"--theme-button-secondary-bg\"] = colorToVar(\n\t\t\t\tcolors.buttonSecondaryBg,\n\t\t\t);\n\t\tif (colors.buttonSecondaryBgHover)\n\t\t\tvars[\"--theme-button-secondary-bg-hover\"] = colorToVar(\n\t\t\t\tcolors.buttonSecondaryBgHover,\n\t\t\t);\n\t}\n\n\t// Spatial\n\tif (theme.spatial) {\n\t\tconst { spatial } = theme;\n\t\tif (spatial.gridLargeMargin)\n\t\t\tvars[\"--theme-grid-large-margin\"] = spacingToVar(spatial.gridLargeMargin);\n\t\tif (spatial.gridLargeGutter)\n\t\t\tvars[\"--theme-grid-large-gutter\"] = spacingToVar(spatial.gridLargeGutter);\n\t\tif (spatial.gridLargeColumns)\n\t\t\tvars[\"--theme-grid-large-columns\"] = String(spatial.gridLargeColumns);\n\t\tif (spatial.gridMediumMargin)\n\t\t\tvars[\"--theme-grid-medium-margin\"] = spacingToVar(\n\t\t\t\tspatial.gridMediumMargin,\n\t\t\t);\n\t\tif (spatial.gridMediumGutter)\n\t\t\tvars[\"--theme-grid-medium-gutter\"] = spacingToVar(\n\t\t\t\tspatial.gridMediumGutter,\n\t\t\t);\n\t\tif (spatial.gridMediumColumns)\n\t\t\tvars[\"--theme-grid-medium-columns\"] = String(spatial.gridMediumColumns);\n\t\tif (spatial.gridSmallMargin)\n\t\t\tvars[\"--theme-grid-small-margin\"] = spacingToVar(spatial.gridSmallMargin);\n\t\tif (spatial.gridSmallGutter)\n\t\t\tvars[\"--theme-grid-small-gutter\"] = spacingToVar(spatial.gridSmallGutter);\n\t\tif (spatial.gridSmallColumns)\n\t\t\tvars[\"--theme-grid-small-columns\"] = String(spatial.gridSmallColumns);\n\t\tif (spatial.sectionLargeGap)\n\t\t\tvars[\"--theme-section-large-gap\"] = spacingToVar(spatial.sectionLargeGap);\n\t\tif (spatial.sectionLargePadding)\n\t\t\tvars[\"--theme-section-large-padding\"] = spacingToVar(\n\t\t\t\tspatial.sectionLargePadding,\n\t\t\t);\n\t\tif (spatial.sectionMediumGap)\n\t\t\tvars[\"--theme-section-medium-gap\"] = spacingToVar(\n\t\t\t\tspatial.sectionMediumGap,\n\t\t\t);\n\t\tif (spatial.sectionMediumPadding)\n\t\t\tvars[\"--theme-section-medium-padding\"] = spacingToVar(\n\t\t\t\tspatial.sectionMediumPadding,\n\t\t\t);\n\t\tif (spatial.sectionSmallGap)\n\t\t\tvars[\"--theme-section-small-gap\"] = spacingToVar(spatial.sectionSmallGap);\n\t\tif (spatial.sectionSmallPadding)\n\t\t\tvars[\"--theme-section-small-padding\"] = spacingToVar(\n\t\t\t\tspatial.sectionSmallPadding,\n\t\t\t);\n\t\tif (spatial.cardLargeGap)\n\t\t\tvars[\"--theme-card-large-gap\"] = spacingToVar(spatial.cardLargeGap);\n\t\tif (spatial.cardLargePadding)\n\t\t\tvars[\"--theme-card-large-padding\"] = spacingToVar(\n\t\t\t\tspatial.cardLargePadding,\n\t\t\t);\n\t\tif (spatial.cardSmallGap)\n\t\t\tvars[\"--theme-card-small-gap\"] = spacingToVar(spatial.cardSmallGap);\n\t\tif (spatial.cardSmallPadding)\n\t\t\tvars[\"--theme-card-small-padding\"] = spacingToVar(\n\t\t\t\tspatial.cardSmallPadding,\n\t\t\t);\n\t}\n\n\t// Surface\n\tif (theme.surface) {\n\t\tconst { surface } = theme;\n\t\tif (surface.cardRadius)\n\t\t\tvars[\"--theme-card-radius\"] = radiusToVar(surface.cardRadius);\n\t\tif (surface.cardStroke)\n\t\t\tvars[\"--theme-card-stroke\"] = `${surface.cardStroke}px`;\n\t\tif (surface.buttonRadius)\n\t\t\tvars[\"--theme-button-radius\"] = radiusToVar(surface.buttonRadius);\n\t\tif (surface.buttonStrokeWeight)\n\t\t\tvars[\"--theme-button-stroke-weight\"] = `${surface.buttonStrokeWeight}px`;\n\t}\n\n\treturn vars as React.CSSProperties;\n}\n\n/**\n * Converts a ButtonTheme object to CSS custom properties (inline style object)\n *\n * @param theme - The button theme object to convert\n * @returns An object suitable for use as React inline styles\n */\nexport function buttonThemeToStyleVars(\n\ttheme: ButtonTheme | undefined,\n): React.CSSProperties {\n\tif (!theme) return {};\n\n\tconst vars: Record<string, string> = {};\n\n\tif (theme.bg) vars[\"--btn-bg\"] = colorToVar(theme.bg);\n\tif (theme.bgHover) vars[\"--btn-bg-hover\"] = colorToVar(theme.bgHover);\n\tif (theme.bgActive) vars[\"--btn-bg-active\"] = colorToVar(theme.bgActive);\n\tif (theme.text) vars[\"--btn-text\"] = colorToVar(theme.text);\n\tif (theme.borderColor)\n\t\tvars[\"--btn-border-color\"] = colorToVar(theme.borderColor);\n\tif (theme.borderWidth !== undefined)\n\t\tvars[\"--btn-border-width\"] = `${theme.borderWidth}px`;\n\tif (theme.radius) vars[\"--btn-radius\"] = radiusToVar(theme.radius);\n\n\treturn vars as React.CSSProperties;\n}\n","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 { type ComponentTheme, themeToStyleVars } from \"@/lib/theme\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Tout variants for background and content styling\n */\nconst toutVariants = tv({\n\tbase: [\n\t\t// Full width\n\t\t\"w-full\",\n\t\t// Positioning context for background\n\t\t\"relative overflow-hidden\",\n\t\t// Responsive height: 600px mobile, 750px tablet, 900px desktop\n\t\t\"h-[600px] md:h-[750px] lg:h-[900px]\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tlight: \"\",\n\t\t\tdark: \"\",\n\t\t},\n\t\talign: {\n\t\t\tleft: \"\",\n\t\t\tcenter: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"light\",\n\t\talign: \"left\",\n\t},\n});\n\n/**\n * Tout component based on Figma BaseKit / Touts\n *\n * A full-bleed section with a background image and overlaid content.\n * Content can be positioned on the left side or centered.\n *\n * Color schemes:\n * - light: Light text styling (default)\n * - dark: Dark text styling\n *\n * Alignment:\n * - left: Content aligned to the left (default)\n * - center: Content centered\n *\n * Responsive behavior:\n * - Mobile (sm): 600px height, 4 columns with gap-20, content spans all 4 cols\n * - Tablet (md): 750px height, 12 columns with gap-20, content spans 9 cols (left) or centered\n * - Desktop (lg): 900px height, 24 columns with gap-20, content spans 9 cols (left) or centered\n *\n * This component is self-contained - do NOT wrap in a grid-container.\n */\nexport interface ToutProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof toutVariants> {\n\t/**\n\t * The headline displayed in the tout\n\t */\n\theadline: React.ReactNode;\n\t/**\n\t * The body text displayed below the headline (optional)\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 * Background media (image or video element)\n\t * Should be a full-bleed element that covers the entire section\n\t */\n\tbackgroundMedia: React.ReactNode;\n\t/**\n\t * Optional footer content to display at the bottom of the section.\n\t * Use with NdstudioFooter component for the branded footer.\n\t */\n\tfooter?: React.ReactNode;\n\t/**\n\t * Component-level theme overrides.\n\t * Allows customization of colors, spacing, and surface properties.\n\t */\n\ttheme?: ComponentTheme;\n}\n\n/**\n * Tout component for hero-like sections with background media and overlaid content.\n *\n * This component is self-contained with its own grid.\n * Grid setup:\n * - Desktop (lg): 24 columns, gap-20, content spans 9 cols\n * - Tablet (md): 12 columns, gap-20, content spans 9 cols\n * - Mobile: 4 columns, gap-20, content spans all 4 cols\n *\n * @example\n * ```tsx\n * <Tout\n *   headline=\"Feature Headline\"\n *   body=\"Description of the feature...\"\n *   primaryAction={<Button>Primary</Button>}\n *   secondaryAction={<Button variant=\"outline\" colorScheme=\"light\">Secondary</Button>}\n *   backgroundMedia={\n *     <img\n *       src=\"/background.jpg\"\n *       alt=\"\"\n *       className=\"absolute inset-0 w-full h-full object-cover\"\n *     />\n *   }\n *   footer={<NdstudioFooter />}\n * />\n * ```\n */\nconst Tout = React.forwardRef<HTMLElement, ToutProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tcolorScheme = \"light\",\n\t\t\talign = \"left\",\n\t\t\theadline,\n\t\t\tbody,\n\t\t\tprimaryAction,\n\t\t\tsecondaryAction,\n\t\t\tbackgroundMedia,\n\t\t\tfooter,\n\t\t\ttheme,\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isCentered = align === \"center\";\n\t\tconst isDark = colorScheme === \"dark\";\n\t\tconst themeStyles = themeToStyleVars(theme);\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={toutVariants({ colorScheme, align, class: className })}\n\t\t\t\tstyle={{ ...themeStyles, ...style }}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Background layer - full bleed */}\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"absolute inset-0 pointer-events-none\"\n\t\t\t\t>\n\t\t\t\t\t{/* Fallback background color */}\n\t\t\t\t\t<div className=\"absolute inset-0 bg-gray-500\" />\n\t\t\t\t\t{/* Background media */}\n\t\t\t\t\t{backgroundMedia}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Inner grid for content alignment - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Position above background\n\t\t\t\t\t\t\"relative z-10\",\n\t\t\t\t\t\t// Grid setup with responsive columns\n\t\t\t\t\t\t\"grid w-full h-full\",\n\t\t\t\t\t\t// Mobile: 4 columns with gap-20\n\t\t\t\t\t\t\"grid-cols-4 gap-20\",\n\t\t\t\t\t\t// Tablet (md): 12 columns\n\t\t\t\t\t\t\"md:grid-cols-12\",\n\t\t\t\t\t\t// Desktop (lg): 24 columns\n\t\t\t\t\t\t\"lg:grid-cols-24\",\n\t\t\t\t\t\t// Max width and centering like grid-container\n\t\t\t\t\t\t\"max-w-[var(--breakpoint-lg)] mx-auto\",\n\t\t\t\t\t\t// Responsive margins matching grid-container - uses primitive spacing tokens\n\t\t\t\t\t\t\"px-20 md:px-56 lg:px-72\",\n\t\t\t\t\t\t// Vertical padding to position content at bottom - uses primitive spacing tokens\n\t\t\t\t\t\t\"py-36 md:py-56 lg:py-72\",\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t// Grid spacing theme overrides\n\t\t\t\t\t\t...(theme?.spatial?.gridSmallMargin && {\n\t\t\t\t\t\t\tpaddingLeft: \"var(--theme-grid-small-margin)\",\n\t\t\t\t\t\t\tpaddingRight: \"var(--theme-grid-small-margin)\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t\t...(theme?.spatial?.gridSmallGutter && {\n\t\t\t\t\t\t\tgap: \"var(--theme-grid-small-gutter)\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{/* Content column - aligned to grid */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t// Flex container for content\n\t\t\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t\t\tisCentered ? \"justify-start items-center\" : \"justify-end\",\n\t\t\t\t\t\t\t// Responsive gap between text and buttons - uses primitive spacing tokens\n\t\t\t\t\t\t\t\"gap-28 md:gap-36\",\n\t\t\t\t\t\t\t// Mobile: all 4 cols\n\t\t\t\t\t\t\t\"col-span-4\",\n\t\t\t\t\t\t\t// Tablet & Desktop: 9 cols left-aligned, full width centered\n\t\t\t\t\t\t\tisCentered ? \"md:col-span-12 lg:col-span-24\" : \"md:col-span-9\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Text content stack - uses primitive spacing tokens */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex flex-col gap-16\",\n\t\t\t\t\t\t\t\tisCentered && \"items-center text-center\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"typography-h4\",\n\t\t\t\t\t\t\t\t\tisDark ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: theme?.colors?.textPrimary\n\t\t\t\t\t\t\t\t\t\t? \"var(--theme-text-primary)\"\n\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t{body && (\n\t\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"typography-body-small\",\n\t\t\t\t\t\t\t\t\t\tisDark ? \"text-gray-400\" : \"text-gray-800\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: theme?.colors?.textSecondary\n\t\t\t\t\t\t\t\t\t\t\t? \"var(--theme-text-secondary)\"\n\t\t\t\t\t\t\t\t\t\t\t: undefined,\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\t{body}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* CTA buttons - uses primitive spacing tokens */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex flex-row\",\n\t\t\t\t\t\t\t\tisCentered ? \"justify-center\" : \"items-start\",\n\t\t\t\t\t\t\t\t// Responsive gap between buttons\n\t\t\t\t\t\t\t\t\"gap-8 md:gap-12\",\n\t\t\t\t\t\t\t\t\"[&>*]:flex-shrink-0\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{primaryAction}\n\t\t\t\t\t\t\t{secondaryAction}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Footer slot */}\n\t\t\t\t{footer && (\n\t\t\t\t\t<div className=\"absolute bottom-6 md:bottom-8 left-0 right-0 z-10\">\n\t\t\t\t\t\t{footer}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</section>\n\t\t);\n\t},\n);\nTout.displayName = \"Tout\";\n\nexport { Tout, toutVariants };\n"]}

package/dist/two-column-section/index.d.ts

@@ -0,0 +1,122 @@
+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';
+
+/**
+ * TwoColumnSection component for text-heavy content sections
+ *
+ * Layout:
+ * - Desktop (lg+): Title left, content right with border-top divider
+ * - Mobile/Tablet: Stacked vertically
+ *
+ * Uses the 24-column grid system.
+ */
+declare const twoColumnSectionVariants: tailwind_variants.TVReturnType<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}>, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface TwoColumnSectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof twoColumnSectionVariants> {
+    /**
+     * The title text displayed in the left column
+     */
+    title: string;
+    /**
+     * Lead content - prominently styled (brighter text)
+     * Can be a string or ReactNode for rich content
+     */
+    lead?: React.ReactNode;
+    /**
+     * Body content - secondary styled (muted text)
+     * Can be a string or ReactNode for rich content
+     */
+    children: React.ReactNode;
+    /**
+     * Layout style for the columns
+     * - "asymmetric" (default): Uses 24-column grid with ~40/60 split (title: 9, content: 15)
+     * - "equal": Simple 2-column equal-width layout at md+ breakpoints
+     */
+    layout?: "asymmetric" | "equal";
+}
+/**
+ * TwoColumnSection component for text-heavy content with title/content split.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (title above content)
+ * - Desktop (lg+): Title left (~40%), Content right (~60%)
+ *
+ * @example
+ * ```tsx
+ * <TwoColumnSection
+ *   title="US Tech Force"
+ *   lead="The US Tech Force is recruiting an elite corps of engineers..."
+ *   variant="dark"
+ * >
+ *   <p>Through a two-year program, participants will work...</p>
+ *   <p>Upon completing the program, engineers can seek...</p>
+ * </TwoColumnSection>
+ * ```
+ */
+declare const TwoColumnSection: React.ForwardRefExoticComponent<TwoColumnSectionProps & React.RefAttributes<HTMLElement>>;
+
+export { TwoColumnSection, type TwoColumnSectionProps, twoColumnSectionVariants };

package/dist/two-column-section/index.js

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/sections/two-column-section/two-column-section.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var twoColumnSectionVariants = tv({
+  // Base styles - responsive padding using primitive spacing tokens
+  base: [
+    "w-full",
+    // Small (mobile): 20px x, 56px top, 20px bottom
+    "px-20 pt-56 pb-20",
+    // Medium (tablet): 56px x, 56px y
+    "md:px-56 md:py-56",
+    // Large (desktop): 72px x, 72px top, 112px bottom
+    "lg:px-72 lg:pt-72 lg:pb-112"
+  ],
+  variants: {
+    colorScheme: {
+      dark: "bg-gray-1200",
+      light: "bg-white"
+    },
+    layout: {
+      asymmetric: "",
+      equal: ""
+    }
+  },
+  defaultVariants: {
+    colorScheme: "dark",
+    layout: "asymmetric"
+  }
+});
+var TwoColumnSection = React.forwardRef(
+  ({
+    className,
+    colorScheme = "dark",
+    layout,
+    title,
+    lead,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        className: twoColumnSectionVariants({
+          colorScheme,
+          layout,
+          class: className
+        }),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "border-t pt-36",
+              colorScheme === "dark" ? "border-gray-700" : "border-gray-300",
+              // Grid layout - uses primitive spacing tokens
+              "grid grid-cols-1 gap-56",
+              layout === "equal" ? "md:grid-cols-2" : "lg:grid-cols-24 lg:gap-56"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "typography-subheading-medium",
+                    colorScheme === "dark" ? "text-gray-100" : "text-gray-900",
+                    // Column span based on layout
+                    layout !== "equal" && "lg:col-span-9"
+                  ),
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col gap-56",
+                    layout !== "equal" && "lg:col-span-15"
+                  ),
+                  children: [
+                    lead && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "typography-body-large",
+                          colorScheme === "dark" ? "text-gray-100" : "text-gray-900"
+                        ),
+                        children: typeof lead === "string" ? /* @__PURE__ */ jsx("p", { children: lead }) : lead
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "typography-body-medium flex flex-col gap-[1em]",
+                          colorScheme === "dark" ? "text-gray-400" : "text-gray-600"
+                        ),
+                        children
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+TwoColumnSection.displayName = "TwoColumnSection";
+
+export { TwoColumnSection, twoColumnSectionVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map