@nationaldesignstudio/react 0.0.19 → 0.2.0

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

@@ -2,19 +2,7 @@ import { VariantProps } from 'tailwind-variants';
 import { ComponentTheme } from '../../../lib/theme';
 import * as React from "react";
 export { Background as HeroBackground, BackgroundGradient as HeroGradient, type BackgroundGradientProps as HeroGradientProps, BackgroundImage as HeroBackgroundImage, type BackgroundImageProps as HeroBackgroundImageProps, BackgroundOverlay as HeroOverlay, type BackgroundOverlayProps as HeroOverlayProps, BackgroundStream as HeroBackgroundStream, type BackgroundStreamProps as HeroBackgroundStreamProps, BackgroundVideo as HeroBackgroundVideo, type BackgroundVideoProps as HeroBackgroundVideoProps, } from '../../atoms/background';
-/**
- * Hero variants based on Figma BaseKit / Heros
- *
- * Slots:
- * - root: The outer container
- * - top: Full-width slot at top for banners/nav (no padding)
- * - content: Padded content area with alignment
- *
- * Variants:
- * - A1: Content aligned at bottom (default)
- * - A2: Content aligned at top
- * - A3: Content centered
- */
+declare const DEFAULT_TITLE_TYPOGRAPHY = "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192 font-medium";
 declare const heroVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         A1: {
@@ -30,10 +18,26 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     top: string;
     content: string[];
+    title: string;
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
         A1: {
@@ -49,6 +53,21 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     variant: {
         A1: {
@@ -64,6 +83,21 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }>, {
     variant: {
         A1: {
@@ -79,10 +113,26 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     top: string;
     content: string[];
+    title: string;
 }, import('tailwind-variants').TVReturnType<{
     variant: {
         A1: {
@@ -98,10 +148,26 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     top: string;
     content: string[];
+    title: string;
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
         A1: {
@@ -117,6 +183,21 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     variant: {
         A1: {
@@ -132,6 +213,21 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }>, unknown, unknown, undefined>>;
 declare const heroHeaderVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "relative z-10 w-full", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "relative z-10 w-full", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 declare const heroContentVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
@@ -161,6 +257,12 @@ export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, "titl
      * Default: "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192"
      */
     titleClassName?: string;
+    /**
+     * Color scheme for text content.
+     * - dark: Dark text for use on light backgrounds (default)
+     * - light: Light text for use on dark backgrounds
+     */
+    colorScheme?: "dark" | "light";
     /**
      * Content for the top slot (full-width, no padding).
      * Use for USGovBanner, Navigation, etc.
@@ -191,11 +293,6 @@ export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, "titl
      */
     theme?: ComponentTheme;
 }
-/**
- * Default responsive typography for hero title using primitive tokens
- * Mobile: 64px, Tablet: 128px, Desktop: 192px
- */
-declare const DEFAULT_TITLE_TYPOGRAPHY = "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192 font-medium";
 /**
  * Hero component for page headers with large display typography.
  *

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

@@ -5,7 +5,7 @@ import * as React from "react";
  * Tout variants for background and content styling
  */
 declare const toutVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -14,7 +14,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -23,7 +23,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -32,7 +32,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }>, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -41,7 +41,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -50,7 +50,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -59,7 +59,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -74,7 +74,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
  * A full-bleed section with a background image and overlaid content.
  * Content can be positioned on the left side or centered.
  *
- * Variants:
+ * Color schemes:
  * - light: Light text styling (default)
  * - dark: Dark text styling
  *

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

@@ -10,80 +10,66 @@ import * as React from "react";
  * Uses the 24-column grid system.
  */
 declare const twoColumnSectionVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }>, {
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }>, unknown, unknown, undefined>>;