@nationaldesignstudio/react 0.0.19 → 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;
     };
@@ -53,8 +53,8 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement>, Va
  * Built on Base UI's Accordion primitive.
  *
  * Variants:
- * - dark: Dark theme styling (default)
- * - light: Light theme styling
+ * - light: Light theme styling (default)
+ * - dark: Dark theme styling
  *
  * @example
  * ```tsx

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

@@ -25,10 +25,24 @@ export interface BackgroundImageProps extends Omit<React.ImgHTMLAttributes<HTMLI
      * Object position (default: "center")
      */
     position?: string;
+    /**
+     * Custom render prop for element composition.
+     * Accepts a React element or render function.
+     * @example
+     * ```tsx
+     * // Element pattern
+     * <BackgroundImage render={<img className="custom" />} src="/bg.jpg" />
+     *
+     * // Callback pattern
+     * <BackgroundImage render={(props) => <img {...props} />} src="/bg.jpg" />
+     * ```
+     */
+    render?: React.ReactElement | ((props: React.ImgHTMLAttributes<HTMLImageElement>) => React.ReactElement);
 }
 /**
  * Background image layer using an actual img element with object-cover.
  * Supports native lazy loading, srcset, and better accessibility.
+ * Supports render prop for element composition.
  */
 declare const BackgroundImage: React.ForwardRefExoticComponent<BackgroundImageProps & React.RefAttributes<HTMLImageElement>>;
 declare const backgroundVideoVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "absolute inset-0 size-full object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
@@ -45,9 +59,18 @@ export interface BackgroundVideoProps extends Omit<React.VideoHTMLAttributes<HTM
      * Poster image URL shown before video loads
      */
     poster?: string;
+    /**
+     * Custom render prop for element composition.
+     * @example
+     * ```tsx
+     * <BackgroundVideo render={<video className="custom" />} src="/bg.mp4" />
+     * ```
+     */
+    render?: React.ReactElement | ((props: React.VideoHTMLAttributes<HTMLVideoElement>) => React.ReactElement);
 }
 /**
  * Background video layer using HTML5 video element.
+ * Supports render prop for element composition.
  */
 declare const BackgroundVideo: React.ForwardRefExoticComponent<BackgroundVideoProps & React.RefAttributes<HTMLVideoElement>>;
 declare const backgroundStreamVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full border-0 scale-[1.5] object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "absolute inset-0 size-full border-0 scale-[1.5] object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/components/atoms/button/icon-button.d.ts

@@ -28,9 +28,9 @@ import * as React from "react";
  * - light: Light colors for use on dark backgrounds
  *
  * Sizes:
- * - lg: Large (48x48)
- * - default: Medium (40x40)
  * - sm: Small (32x32)
+ * - default: Medium (40x40)
+ * - lg: Large (48x48)
  *
  * Rounded:
  * - default: Standard border radius
@@ -49,9 +49,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -70,9 +70,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -91,9 +91,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -112,9 +112,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -133,9 +133,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -154,9 +154,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -175,9 +175,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -186,6 +186,34 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
     };
 }>, unknown, unknown, undefined>>;
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
+    /**
+     * Custom render prop for element composition.
+     * Accepts a React element or render function.
+     * @example
+     * ```tsx
+     * // Render as a link
+     * <IconButton render={<a href="/contact" />} aria-label="Contact">
+     *   <LinkIcon />
+     * </IconButton>
+     *
+     * // Render with custom element
+     * <IconButton render={(props) => <Link {...props} to="/home" />} aria-label="Home">
+     *   <HomeIcon />
+     * </IconButton>
+     * ```
+     */
+    render?: React.ReactElement | ((props: React.ButtonHTMLAttributes<HTMLButtonElement>) => React.ReactElement);
+    /**
+     * @deprecated Use `render` prop instead for element composition.
+     * @example
+     * ```tsx
+     * // Old (deprecated)
+     * <IconButton asChild><a href="/link">...</a></IconButton>
+     *
+     * // New (recommended)
+     * <IconButton render={<a href="/link" />}>...</IconButton>
+     * ```
+     */
     asChild?: boolean;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

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>
  * ```