@nationaldesignstudio/react 0.1.0 → 0.2.0

package/dist/component-registry.md

@@ -1,7 +1,7 @@
 # Component Registry
 
 > Auto-generated component metadata for AI/agent consumption.
-> Generated: 2026-01-12T21:40:10.008Z
+> Generated: 2026-01-13T20:09:44.586Z
 
 ---
 
@@ -484,6 +484,9 @@ className="font-semibold"        // Font weight 600
   The title text displayed in the hero.
 - `titleClassName`: string
   Custom typography class for the title using primitive tokens.
+- `colorScheme`: "dark" | "light"
+  Color scheme for text content.
+  Values: `dark`, `light`
 - `top`: React.ReactNode
   Content for the top slot (full-width, no padding).
 - `background`: React.ReactNode | string
@@ -1203,7 +1206,11 @@ className="font-semibold"        // Font weight 600
 <Banner
       heading="Custom Styled Banner"
       description="This banner has a custom background color applied via className."
-      action={<Button variant="ivory">Action</Button>}
+      action={
+        <Button variant="outline" colorScheme="light">
+          Action
+        </Button>
+      }
       className="bg-gray-1000 text-gray-50 [&_h2]:text-gray-50 [&_p]:text-gray-200"
     />
 ```
@@ -1503,8 +1510,8 @@ className="font-semibold"        // Font weight 600
 ```
 
 ```tsx
-<FaqSection variant="dark">
-      <Accordion defaultExpanded="faq-1">
+<FaqSection colorScheme="dark">
+      <Accordion colorScheme="dark" defaultExpanded="faq-1">
         <AccordionItem
           id="faq-1"
           title="What is the US Tech Force (Tech Force)?"
@@ -1531,7 +1538,7 @@ className="font-semibold"        // Font weight 600
 ```
 
 ```tsx
-<FaqSection variant="light">
+<FaqSection colorScheme="light">
       <Accordion defaultExpanded="faq-1">
         <AccordionItem
           id="faq-1"
@@ -2177,7 +2184,11 @@ className="font-semibold"        // Font weight 600
       headline="Brand-Large/Headline/Small"
       body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
       primaryAction={<Button>Primary</Button>}
-      secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+      secondaryAction={
+        <Button variant="outline" colorScheme="light">
+          Secondary
+        </Button>
+      }
       backgroundMedia={<PlaceholderBackground />}
     />
 ```
@@ -2187,7 +2198,11 @@ className="font-semibold"        // Font weight 600
       headline="Brand-Large/Headline/Small"
       body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
       primaryAction={<Button>Primary</Button>}
-      secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+      secondaryAction={
+        <Button variant="outline" colorScheme="light">
+          Secondary
+        </Button>
+      }
       backgroundMedia={<PlaceholderBackground />}
     />
 ```
@@ -2198,7 +2213,7 @@ className="font-semibold"        // Font weight 600
       body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
       primaryAction={<Button size="sm">Primary</Button>}
       secondaryAction={
-        <Button size="sm" variant="charcoalOutline">
+        <Button size="sm" variant="outline" colorScheme="light">
           Secondary
         </Button>
       }
@@ -2211,7 +2226,11 @@ className="font-semibold"        // Font weight 600
       headline="Work with Purpose"
       body="Join a team that's building the future of government services. We're looking for passionate individuals who want to make a difference."
       primaryAction={<Button>View Careers</Button>}
-      secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
+      secondaryAction={
+        <Button variant="outline" colorScheme="light">
+          Learn More
+        </Button>
+      }
       backgroundMedia={<ImageBackground />}
     />
 ```
@@ -2230,7 +2249,11 @@ className="font-semibold"        // Font weight 600
       headline="Experience Innovation"
       body="See how modern technology is transforming the way government serves its citizens."
       primaryAction={<Button>Watch Video</Button>}
-      secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
+      secondaryAction={
+        <Button variant="outline" colorScheme="light">
+          Learn More
+        </Button>
+      }
       backgroundMedia={
         <div className="absolute inset-0 bg-gray-800 flex items-center justify-center">
           <span className="text-gray-400 typography-body-small">
@@ -2246,7 +2269,11 @@ className="font-semibold"        // Font weight 600
       headline="Work with Purpose"
       body="Join a team that's building the future of government services. We're looking for passionate individuals who want to make a difference."
       primaryAction={<Button>View Careers</Button>}
-      secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
+      secondaryAction={
+        <Button variant="outline" colorScheme="light">
+          Learn More
+        </Button>
+      }
       backgroundMedia={<ImageBackground />}
       footer={<NdstudioFooter />}
     />
@@ -2279,7 +2306,7 @@ className="font-semibold"        // Font weight 600
 
 ```tsx
 <TwoColumnSection
-      variant="dark"
+      colorScheme="dark"
       title="US Tech Force"
       lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology."
     >
@@ -2296,7 +2323,7 @@ className="font-semibold"        // Font weight 600
 
 ```tsx
 <TwoColumnSection
-      variant="light"
+      colorScheme="light"
       title="US Tech Force"
       lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology."
     >
@@ -2313,7 +2340,7 @@ className="font-semibold"        // Font weight 600
 
 ```tsx
 <TwoColumnSection
-      variant="dark"
+      colorScheme="dark"
       title="US Tech Force"
       lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
     >
@@ -2341,7 +2368,7 @@ className="font-semibold"        // Font weight 600
 
 ```tsx
 <TwoColumnSection
-      variant="dark"
+      colorScheme="dark"
       title="US Tech Force"
       lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
     >
@@ -2369,7 +2396,7 @@ className="font-semibold"        // Font weight 600
 
 ```tsx
 <TwoColumnSection
-      variant="dark"
+      colorScheme="dark"
       title="US Tech Force"
       lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
     >
@@ -2396,7 +2423,7 @@ className="font-semibold"        // Font weight 600
 ```
 
 ```tsx
-<TwoColumnSection variant="dark" title="About the Program">
+<TwoColumnSection colorScheme="dark" title="About the Program">
       <p>
         Through a two-year program, participants will work in teams reporting
         directly to agency leadership. In collaboration with leading technology
@@ -2413,7 +2440,7 @@ className="font-semibold"        // Font weight 600
 
 ```tsx
 <TwoColumnSection
-      variant="dark"
+      colorScheme="dark"
       title="Our Mission"
       lead={
         <>
@@ -2438,7 +2465,7 @@ className="font-semibold"        // Font weight 600
 
 ```tsx
 <TwoColumnSection
-      variant="dark"
+      colorScheme="dark"
       title="Join Us"
       lead="Build the future of American government technology."
     >

package/dist/components/atoms/accordion/accordion.d.ts

@@ -1,37 +1,37 @@
 import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
 declare const accordionVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
 }, undefined, "flex flex-col", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
 }>, {
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
 }, undefined, "flex flex-col", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };

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

@@ -14,37 +14,37 @@ import * as React from "react";
  * Must be placed inside a `grid-container`. Uses `col-full` to span all columns.
  */
 declare const bannerVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }>, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -84,9 +84,9 @@ export interface BannerProps extends React.HTMLAttributes<HTMLElement>, VariantP
  *   />
  * </div>
  *
- * // Dark variant
+ * // Dark colorScheme
  * <Banner
- *   variant="dark"
+ *   colorScheme="dark"
  *   heading="Still Have Questions?"
  *   description="Contact us at support@example.com"
  *   action={<Button variant="secondary">Email Us</Button>}

package/dist/components/sections/faq-section/faq-section.d.ts

@@ -35,7 +35,7 @@ export interface FaqSectionProps extends Omit<React.HTMLAttributes<HTMLElement>,
  * </FaqSection>
  *
  * // With custom title
- * <FaqSection title="Common Questions" variant="light">
+ * <FaqSection title="Common Questions" colorScheme="light">
  *   ...
  * </FaqSection>
  * ```

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>>;