@nationaldesignstudio/react 0.5.1 → 0.5.3

package/dist/components/sections/river/river.js

@@ -1,100 +0,0 @@
-import { jsxs as a, jsx as l, Fragment as i } from "react/jsx-runtime";
-import * as f from "react";
-import { tv as x, cnBase as e } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
-const v = x({
-  // 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"
-  }
-}), y = f.forwardRef(
-  ({
-    className: n,
-    variant: s,
-    headline: t,
-    body: o,
-    primaryAction: d,
-    secondaryAction: m,
-    media: p,
-    ...g
-  }, h) => {
-    const r = /* @__PURE__ */ a(
-      "div",
-      {
-        className: e(
-          "flex flex-col",
-          // Full width on mobile/tablet, 9 cols on desktop
-          "lg:col-span-9"
-        ),
-        children: [
-          /* @__PURE__ */ a("div", { className: "flex flex-col gap-16", children: [
-            /* @__PURE__ */ l("h2", { className: "typography-h4 text-gray-900", children: t }),
-            /* @__PURE__ */ l("p", { className: "typography-body-small text-gray-800", children: o })
-          ] }),
-          /* @__PURE__ */ a(
-            "div",
-            {
-              className: e("flex flex-row gap-16 mt-36", "[&>*]:flex-shrink-0"),
-              children: [
-                d,
-                m
-              ]
-            }
-          )
-        ]
-      }
-    ), c = /* @__PURE__ */ l(
-      "div",
-      {
-        className: e(
-          // Full width on mobile/tablet, 15 cols on desktop
-          "lg:col-span-15",
-          // Ensure media fills the container
-          "[&>*]:w-full [&>*]:h-auto"
-        ),
-        children: p
-      }
-    );
-    return /* @__PURE__ */ l(
-      "section",
-      {
-        ref: h,
-        className: v({ variant: s, class: n }),
-        ...g,
-        children: /* @__PURE__ */ l(
-          "div",
-          {
-            className: e("grid grid-cols-1 gap-36", "lg:grid-cols-24 lg:gap-36"),
-            children: s === "B" ? /* @__PURE__ */ a(i, { children: [
-              c,
-              r
-            ] }) : /* @__PURE__ */ a(i, { children: [
-              r,
-              c
-            ] })
-          }
-        )
-      }
-    );
-  }
-);
-y.displayName = "River";
-export {
-  y as River,
-  v as riverVariants
-};
-//# sourceMappingURL=river.js.map

package/dist/components/sections/river/river.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"river.js","sources":["../../../../src/components/sections/river/river.tsx"],"sourcesContent":["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"],"names":["riverVariants","tv","River","React","className","variant","headline","body","primaryAction","secondaryAction","media","props","ref","contentColumn","jsxs","cn","jsx","mediaColumn","Fragment"],"mappings":";;;AAaA,MAAMA,IAAgBC,EAAG;AAAA;AAAA,EAExB,MAAM;AAAA,IACL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,SAAS;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACJ;AAAA,EAED,iBAAiB;AAAA,IAChB,SAAS;AAAA,EAAA;AAEX,CAAC,GAoDKC,IAAQC,EAAM;AAAA,EACnB,CACC;AAAA,IACC,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IACL,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC;AAAAA,UACV;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAID,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wBACd,UAAA;AAAA,YAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,+BAA+B,UAAAV,GAAS;AAAA,YACtD,gBAAAU,EAAC,KAAA,EAAE,WAAU,uCAAuC,UAAAT,EAAA,CAAK;AAAA,UAAA,GAC1D;AAAA,UAGA,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,WAAWC,EAAG,8BAA8B,qBAAqB;AAAA,cAEhE,UAAA;AAAA,gBAAAP;AAAA,gBACAC;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAIIQ,IACL,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWD;AAAAA;AAAAA,UAEV;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGA,UAAAL;AAAA,MAAA;AAAA,IAAA;AAIH,WACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,KAAAJ;AAAA,QACA,WAAWZ,EAAc,EAAE,SAAAK,GAAS,OAAOD,GAAW;AAAA,QACrD,GAAGO;AAAA,QAGJ,UAAA,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAWD,EAAG,2BAA2B,2BAA2B;AAAA,YAEnE,UAAAV,MAAY,MACZ,gBAAAS,EAAAI,GAAA,EACE,UAAA;AAAA,cAAAD;AAAA,cACAJ;AAAA,YAAA,EAAA,CACF,IAEA,gBAAAC,EAAAI,GAAA,EACE,UAAA;AAAA,cAAAL;AAAA,cACAI;AAAA,YAAA,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAEF;AAAA,IAAA;AAAA,EAGH;AACD;AACAf,EAAM,cAAc;"}

package/dist/components/sections/tout/tout.d.ts

@@ -1,153 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { ComponentTheme } from '../../../lib/theme';
-import * as React from "react";
-/**
- * Tout variants for background and content styling
- */
-declare const toutVariants: import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, {
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}>, {
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, {
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}>, unknown, unknown, undefined>>;
-/**
- * Tout component based on Figma BaseKit / Touts
- *
- * A full-bleed section with a background image and overlaid content.
- * Content can be positioned on the left side or centered.
- *
- * Color schemes:
- * - light: Light text styling (default)
- * - dark: Dark text styling
- *
- * Alignment:
- * - left: Content aligned to the left (default)
- * - center: Content centered
- *
- * Responsive behavior:
- * - Mobile (sm): 600px height, 4 columns with gap-20, content spans all 4 cols
- * - Tablet (md): 750px height, 12 columns with gap-20, content spans 9 cols (left) or centered
- * - Desktop (lg): 900px height, 24 columns with gap-20, content spans 9 cols (left) or centered
- *
- * This component is self-contained - do NOT wrap in a grid-container.
- */
-export interface ToutProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof toutVariants> {
-    /**
-     * The headline displayed in the tout
-     */
-    headline: React.ReactNode;
-    /**
-     * The body text displayed below the headline (optional)
-     */
-    body?: string;
-    /**
-     * Primary action button (required)
-     */
-    primaryAction: React.ReactNode;
-    /**
-     * Secondary action button (optional)
-     */
-    secondaryAction?: React.ReactNode;
-    /**
-     * Background media (image or video element)
-     * Should be a full-bleed element that covers the entire section
-     */
-    backgroundMedia: React.ReactNode;
-    /**
-     * Optional footer content to display at the bottom of the section.
-     * Use with NdstudioFooter component for the branded footer.
-     */
-    footer?: React.ReactNode;
-    /**
-     * Component-level theme overrides.
-     * Allows customization of colors, spacing, and surface properties.
-     */
-    theme?: ComponentTheme;
-}
-/**
- * Tout component for hero-like sections with background media and overlaid content.
- *
- * This component is self-contained with its own grid.
- * Grid setup:
- * - Desktop (lg): 24 columns, gap-20, content spans 9 cols
- * - Tablet (md): 12 columns, gap-20, content spans 9 cols
- * - Mobile: 4 columns, gap-20, content spans all 4 cols
- *
- * @example
- * ```tsx
- * <Tout
- *   headline="Feature Headline"
- *   body="Description of the feature..."
- *   primaryAction={<Button>Primary</Button>}
- *   secondaryAction={<Button variant="outline" colorScheme="light">Secondary</Button>}
- *   backgroundMedia={
- *     <img
- *       src="/background.jpg"
- *       alt=""
- *       className="absolute inset-0 w-full h-full object-cover"
- *     />
- *   }
- *   footer={<NdstudioFooter />}
- * />
- * ```
- */
-declare const Tout: React.ForwardRefExoticComponent<ToutProps & React.RefAttributes<HTMLElement>>;
-export { Tout, toutVariants };

package/dist/components/sections/tout/tout.js

@@ -1,178 +0,0 @@
-import { jsxs as a, jsx as l } from "react/jsx-runtime";
-import * as u from "react";
-import { tv as N, cnBase as e } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
-import { themeToStyleVars as b } from "../../../lib/theme.js";
-const w = N({
-  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"
-  }
-}), S = u.forwardRef(
-  ({
-    className: n,
-    colorScheme: s = "light",
-    align: i = "left",
-    headline: m,
-    body: o,
-    primaryAction: g,
-    secondaryAction: p,
-    backgroundMedia: h,
-    footer: d,
-    theme: t,
-    style: x,
-    ...y
-  }, f) => {
-    const r = i === "center", c = s === "dark", v = b(t);
-    return /* @__PURE__ */ a(
-      "section",
-      {
-        ref: f,
-        className: w({ colorScheme: s, align: i, class: n }),
-        style: { ...v, ...x },
-        ...y,
-        children: [
-          /* @__PURE__ */ a(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: "absolute inset-0 pointer-events-none",
-              children: [
-                /* @__PURE__ */ l("div", { className: "absolute inset-0 bg-gray-500" }),
-                h
-              ]
-            }
-          ),
-          /* @__PURE__ */ l(
-            "div",
-            {
-              className: e(
-                // 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
-                ...t?.spatial?.gridSmallMargin && {
-                  paddingLeft: "var(--theme-grid-small-margin)",
-                  paddingRight: "var(--theme-grid-small-margin)"
-                },
-                ...t?.spatial?.gridSmallGutter && {
-                  gap: "var(--theme-grid-small-gutter)"
-                }
-              },
-              children: /* @__PURE__ */ a(
-                "div",
-                {
-                  className: e(
-                    // Flex container for content
-                    "flex flex-col",
-                    r ? "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
-                    r ? "md:col-span-12 lg:col-span-24" : "md:col-span-9"
-                  ),
-                  children: [
-                    /* @__PURE__ */ a(
-                      "div",
-                      {
-                        className: e(
-                          "flex flex-col gap-16",
-                          r && "items-center text-center"
-                        ),
-                        children: [
-                          /* @__PURE__ */ l(
-                            "h2",
-                            {
-                              className: e(
-                                "typography-h4",
-                                c ? "text-gray-100" : "text-gray-900"
-                              ),
-                              style: {
-                                color: t?.colors?.textPrimary ? "var(--theme-text-primary)" : void 0
-                              },
-                              children: m
-                            }
-                          ),
-                          o && /* @__PURE__ */ l(
-                            "p",
-                            {
-                              className: e(
-                                "typography-body-small",
-                                c ? "text-gray-400" : "text-gray-800"
-                              ),
-                              style: {
-                                color: t?.colors?.textSecondary ? "var(--theme-text-secondary)" : void 0
-                              },
-                              children: o
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ a(
-                      "div",
-                      {
-                        className: e(
-                          "flex flex-row",
-                          r ? "justify-center" : "items-start",
-                          // Responsive gap between buttons
-                          "gap-8 md:gap-12",
-                          "[&>*]:flex-shrink-0"
-                        ),
-                        children: [
-                          g,
-                          p
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          ),
-          d && /* @__PURE__ */ l("div", { className: "absolute bottom-6 md:bottom-8 left-0 right-0 z-10", children: d })
-        ]
-      }
-    );
-  }
-);
-S.displayName = "Tout";
-export {
-  S as Tout,
-  w as toutVariants
-};
-//# sourceMappingURL=tout.js.map

package/dist/components/sections/tout/tout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tout.js","sources":["../../../../src/components/sections/tout/tout.tsx"],"sourcesContent":["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"],"names":["toutVariants","tv","Tout","React","className","colorScheme","align","headline","body","primaryAction","secondaryAction","backgroundMedia","footer","theme","style","props","ref","isCentered","isDark","themeStyles","themeToStyleVars","jsxs","jsx","cn"],"mappings":";;;;AAQA,MAAMA,IAAeC,EAAG;AAAA,EACvB,MAAM;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,aAAa;AAAA,MACZ,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,IAEP,OAAO;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,EACT;AAAA,EAED,iBAAiB;AAAA,IAChB,aAAa;AAAA,IACb,OAAO;AAAA,EAAA;AAET,CAAC,GAsFKC,IAAOC,EAAM;AAAA,EAClB,CACC;AAAA,IACC,WAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAAaX,MAAU,UACvBY,IAASb,MAAgB,QACzBc,IAAcC,EAAiBP,CAAK;AAE1C,WACC,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,KAAAL;AAAA,QACA,WAAWhB,EAAa,EAAE,aAAAK,GAAa,OAAAC,GAAO,OAAOF,GAAW;AAAA,QAChE,OAAO,EAAE,GAAGe,GAAa,GAAGL,EAAA;AAAA,QAC3B,GAAGC;AAAA,QAGJ,UAAA;AAAA,UAAA,gBAAAM;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,eAAY;AAAA,cACZ,WAAU;AAAA,cAGV,UAAA;AAAA,gBAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,+BAAA,CAA+B;AAAA,gBAE7CX;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIF,gBAAAW;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,WAAWC;AAAAA;AAAAA,gBAEV;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA,cAAA;AAAA,cAED,OAAO;AAAA;AAAA,gBAEN,GAAIV,GAAO,SAAS,mBAAmB;AAAA,kBACtC,aAAa;AAAA,kBACb,cAAc;AAAA,gBAAA;AAAA,gBAEf,GAAIA,GAAO,SAAS,mBAAmB;AAAA,kBACtC,KAAK;AAAA,gBAAA;AAAA,cACN;AAAA,cAID,UAAA,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACA,WAAWE;AAAAA;AAAAA,oBAEV;AAAA,oBACAN,IAAa,+BAA+B;AAAA;AAAA,oBAE5C;AAAA;AAAA,oBAEA;AAAA;AAAA,oBAEAA,IAAa,kCAAkC;AAAA,kBAAA;AAAA,kBAIhD,UAAA;AAAA,oBAAA,gBAAAI;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACA,WAAWE;AAAAA,0BACV;AAAA,0BACAN,KAAc;AAAA,wBAAA;AAAA,wBAGf,UAAA;AAAA,0BAAA,gBAAAK;AAAA,4BAAC;AAAA,4BAAA;AAAA,8BACA,WAAWC;AAAAA,gCACV;AAAA,gCACAL,IAAS,kBAAkB;AAAA,8BAAA;AAAA,8BAE5B,OAAO;AAAA,gCACN,OAAOL,GAAO,QAAQ,cACnB,8BACA;AAAA,8BAAA;AAAA,8BAGH,UAAAN;AAAA,4BAAA;AAAA,0BAAA;AAAA,0BAEDC,KACA,gBAAAc;AAAA,4BAAC;AAAA,4BAAA;AAAA,8BACA,WAAWC;AAAAA,gCACV;AAAA,gCACAL,IAAS,kBAAkB;AAAA,8BAAA;AAAA,8BAE5B,OAAO;AAAA,gCACN,OAAOL,GAAO,QAAQ,gBACnB,gCACA;AAAA,8BAAA;AAAA,8BAGH,UAAAL;AAAA,4BAAA;AAAA,0BAAA;AAAA,wBACF;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAKF,gBAAAa;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACA,WAAWE;AAAAA,0BACV;AAAA,0BACAN,IAAa,mBAAmB;AAAA;AAAA,0BAEhC;AAAA,0BACA;AAAA,wBAAA;AAAA,wBAGA,UAAA;AAAA,0BAAAR;AAAA,0BACAC;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,YACD;AAAA,UAAA;AAAA,UAIAE,KACA,gBAAAU,EAAC,OAAA,EAAI,WAAU,qDACb,UAAAV,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIJ;AACD;AACAV,EAAK,cAAc;"}

package/dist/components/sections/two-column-section/two-column-section.d.ts

@@ -1,118 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-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: import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
-    layout: {
-        asymmetric: string;
-        equal: string;
-    };
-}, undefined, string[], import('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, import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
-    layout: {
-        asymmetric: string;
-        equal: string;
-    };
-}, undefined, string[], import('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>>;
-export 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, twoColumnSectionVariants };