@nationaldesignstudio/react 0.1.0 → 0.3.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/atoms/background/background.d.ts

@@ -1,3 +1,4 @@
+import { useRender } from '@base-ui-components/react/use-render';
 import * as React from "react";
 declare const backgroundVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "absolute inset-0", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "absolute inset-0", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 /**
@@ -16,7 +17,7 @@ declare const backgroundVariants: import('tailwind-variants').TVReturnType<{} |
 export interface BackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const backgroundImageVariants: 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>>;
-export interface BackgroundImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
+export interface BackgroundImageProps extends useRender.ComponentProps<"img">, Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "render"> {
     /**
      * URL for the background image
      */
@@ -25,28 +26,18 @@ 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 function BackgroundImage(props: BackgroundImageProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare namespace BackgroundImage {
+    var displayName: string;
+}
 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>>;
-export interface BackgroundVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children"> {
+export interface BackgroundVideoProps extends useRender.ComponentProps<"video">, Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "render" | "src"> {
     /**
      * URL for the video source
      */
@@ -59,20 +50,15 @@ 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 function BackgroundVideo(props: BackgroundVideoProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BackgroundVideo {
+    var displayName: string;
+}
 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>>;
 export interface BackgroundStreamProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
     /**
@@ -149,8 +135,8 @@ export interface BackgroundGradientProps extends React.HTMLAttributes<HTMLDivEle
  */
 declare const BackgroundGradient: React.ForwardRefExoticComponent<BackgroundGradientProps & React.RefAttributes<HTMLDivElement>>;
 declare const BackgroundCompound: React.ForwardRefExoticComponent<BackgroundProps & React.RefAttributes<HTMLDivElement>> & {
-    Image: React.ForwardRefExoticComponent<BackgroundImageProps & React.RefAttributes<HTMLImageElement>>;
-    Video: React.ForwardRefExoticComponent<BackgroundVideoProps & React.RefAttributes<HTMLVideoElement>>;
+    Image: typeof BackgroundImage;
+    Video: typeof BackgroundVideo;
     Stream: React.ForwardRefExoticComponent<BackgroundStreamProps & React.RefAttributes<HTMLIFrameElement>>;
     Overlay: React.ForwardRefExoticComponent<BackgroundOverlayProps & React.RefAttributes<HTMLDivElement>>;
     Gradient: React.ForwardRefExoticComponent<BackgroundGradientProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -3,22 +3,20 @@ import { VariantProps } from 'tailwind-variants';
 import { ButtonTheme } from '../../../lib/theme';
 import * as React from "react";
 /**
- * Button component based on Figma BaseKit / Interface / Buttons
+ * Button component based on Figma Button component
  *
- * Variants:
- * - solid: Filled button
- * - outline: Outlined button
- * - ghost: No background/border, just text
- * - subtle: Light background with subtle styling
- *
- * Color Schemes:
- * - dark: Dark colors for use on light backgrounds (default)
- * - light: Light colors for use on dark backgrounds
+ * Variants (matches Figma):
+ * - primary: Filled brand button (indigo background)
+ * - primary-outline: Outlined brand button (indigo border/text)
+ * - secondary: Filled neutral button (white background, for dark backgrounds)
+ * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)
+ * - ghost: Transparent button with subtle hover (for light backgrounds)
+ * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)
  *
  * Sizes:
- * - lg: Large buttons
- * - default: Medium buttons
- * - sm: Small buttons
+ * - lg: Large buttons (56px height)
+ * - md: Medium buttons (40px height) - default
+ * - sm: Small buttons (28px height)
  *
  * For icon-only buttons, use the IconButton component instead.
  *
@@ -27,121 +25,107 @@ import * as React from "react";
  */
 declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
+        "ghost-inverse": string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
         lg: string;
-        default: string;
+        md: string;
         sm: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-spacing-8 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded-surface-button stroke-surface-button border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+}, undefined, "inline-flex items-center justify-center gap-6 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
+        "ghost-inverse": string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
         lg: string;
-        default: string;
+        md: string;
         sm: string;
     };
 }, {
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
+        "ghost-inverse": string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
         lg: string;
-        default: string;
+        md: string;
         sm: string;
     };
 }>, {
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
+        "ghost-inverse": string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
         lg: string;
-        default: string;
+        md: string;
         sm: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
+        "ghost-inverse": string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
         lg: string;
-        default: string;
+        md: string;
         sm: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-spacing-8 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded-surface-button stroke-surface-button border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+}, undefined, "inline-flex items-center justify-center gap-6 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
+        "ghost-inverse": string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
         lg: string;
-        default: string;
+        md: string;
         sm: string;
     };
 }, {
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
+        "ghost-inverse": string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
         lg: string;
-        default: string;
+        md: string;
         sm: string;
     };
 }>, unknown, unknown, undefined>>;