@nationaldesignstudio/react 0.0.7 → 0.0.9

package/README.md

@@ -200,7 +200,3 @@ bun run build
 # Type check
 bun run type:check
 ```
-
-## License
-
-MIT

package/dist/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Allow multiple items to be expanded at once
+     * @default false
+     */
+    allowMultiple?: boolean;
+    /**
+     * The ID(s) of items that should be expanded by default
+     */
+    defaultExpanded?: string | string[];
+    children: React.ReactNode;
+}
+/**
+ * Accordion component for expandable/collapsible content sections.
+ * Built on Base UI's Accordion primitive.
+ *
+ * @example
+ * ```tsx
+ * <Accordion defaultExpanded="item-1">
+ *   <AccordionItem id="item-1" title="Question 1">
+ *     Answer to question 1
+ *   </AccordionItem>
+ *   <AccordionItem id="item-2" title="Question 2">
+ *     Answer to question 2
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Unique identifier for this item
+     */
+    id: string;
+    /**
+     * The question/title displayed in the header
+     */
+    title: string;
+    /**
+     * The answer/content revealed when expanded
+     */
+    children: React.ReactNode;
+}
+/**
+ * Individual accordion item with collapsible content.
+ * Must be used within an Accordion component.
+ */
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem };

package/dist/components/{button → atoms/button}/button.d.ts

@@ -1,3 +1,4 @@
+import { ButtonProps as BaseButtonProps } from '@base-ui-components/react/button';
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 /**
@@ -10,6 +11,7 @@ import * as React from "react";
  * - ivory: Light filled button (for dark backgrounds)
  * - ivoryOutline: Light outlined button (for dark backgrounds)
  * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
+ * - secondary: Gray filled button (for dark backgrounds)
  *
  * Sizes:
  * - lg: Large buttons (46px height)
@@ -19,11 +21,10 @@ import * as React from "react";
  * For icon-only buttons, use the IconButton component instead.
  */
 declare const buttonVariants: (props?: ({
-    variant?: "charcoal" | "charcoalOutline" | "charcoalOutlineQuiet" | "ivory" | "ivoryOutline" | "ivoryOutlineQuiet" | null | undefined;
+    variant?: "charcoal" | "charcoalOutline" | "charcoalOutlineQuiet" | "ivory" | "ivoryOutline" | "ivoryOutlineQuiet" | "gray" | null | undefined;
     size?: "lg" | "default" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-}
+export type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ButtonProps = BaseButtonProps & VariantProps<typeof buttonVariants> & HTMLButtonProps;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/dist/components/{button → atoms/button}/icon-button.d.ts

@@ -3,6 +3,26 @@ import * as React from "react";
 /**
  * IconButton component based on Figma BaseKit / Interface / Icon Button
  *
+ * **IMPORTANT: Accessibility Requirement**
+ * Icon-only buttons MUST have an accessible label. Provide one of:
+ * - `aria-label`: A text description of the button's action (recommended)
+ * - `aria-labelledby`: Reference to an element containing the label
+ * - `title`: Tooltip text (less preferred, but provides a label)
+ *
+ * @example
+ * ```tsx
+ * // Correct usage with aria-label
+ * <IconButton aria-label="Close menu">
+ *   <CloseIcon />
+ * </IconButton>
+ *
+ * // Correct usage with aria-labelledby
+ * <IconButton aria-labelledby="close-label">
+ *   <CloseIcon />
+ * </IconButton>
+ * <span id="close-label" className="sr-only">Close menu</span>
+ * ```
+ *
  * Variants:
  * - charcoal: Dark filled button (for light backgrounds)
  * - charcoalOutline: Dark outlined button (for light backgrounds)

package/dist/components/atoms/pager-control/pager-control.d.ts

@@ -0,0 +1,62 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const pagerControlVariants: (props?: ({
+    size?: "lg" | "default" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const dotBaseVariants: (props?: ({
+    size?: "lg" | "default" | "sm" | null | undefined;
+    variant?: "charcoal" | "ivory" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface PagerControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof pagerControlVariants>, VariantProps<typeof dotBaseVariants> {
+    /**
+     * Total number of pages/items
+     */
+    count: number;
+    /**
+     * Current active page index (0-based)
+     */
+    activeIndex?: number;
+    /**
+     * Duration in milliseconds for each page before auto-advancing
+     * Set to 0 to disable auto-advance
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Whether the pager should auto-advance
+     * @default true
+     */
+    autoPlay?: boolean;
+    /**
+     * Callback when the active page changes
+     */
+    onChange?: (index: number) => void;
+    /**
+     * Whether to pause auto-advance on hover
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Whether to loop back to the first page after the last
+     * @default true
+     */
+    loop?: boolean;
+}
+/**
+ * PagerControl component for indicating progress through a series of pages/slides.
+ *
+ * Features smooth width transitions when switching between dots and an animated
+ * progress fill on the active dot that shows time remaining before auto-advancing
+ * (similar to Apple's carousel indicators).
+ *
+ * Variants:
+ * - charcoal: Dark dots (for light backgrounds)
+ * - ivory: Light dots (for dark backgrounds)
+ *
+ * Sizes:
+ * - sm: Small dots (6px height)
+ * - default: Medium dots (10px height)
+ * - lg: Large dots (14px height)
+ */
+declare const PagerControl: React.ForwardRefExoticComponent<PagerControlProps & React.RefAttributes<HTMLDivElement>>;
+export { PagerControl, pagerControlVariants };

package/dist/components/{card → organisms/card}/card.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const cardVariants: (props?: ({
-    layout?: "vertical" | "horizontal" | null | undefined;
+    layout?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
 }
@@ -43,9 +43,13 @@ export interface CardEyebrowProps extends React.HTMLAttributes<HTMLParagraphElem
  */
 declare const CardEyebrow: React.ForwardRefExoticComponent<CardEyebrowProps & React.RefAttributes<HTMLParagraphElement>>;
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * The heading level to render (h1-h6). Defaults to h3.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
 /**
- * Card title/heading.
+ * Card title/heading. Use the `as` prop to change the heading level.
  */
 declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {

package/dist/components/{navbar → organisms/navbar}/navbar.d.ts

@@ -36,4 +36,31 @@ export interface NavbarActionsProps extends React.HTMLAttributes<HTMLDivElement>
  * Container for navbar action items (search, menu button, etc).
  */
 declare const NavbarActions: React.ForwardRefExoticComponent<NavbarActionsProps & React.RefAttributes<HTMLDivElement>>;
-export { Navbar, NavbarBrand, NavbarLinks, NavbarLink, NavbarActions };
+export interface NavbarMobileMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Mobile menu container that displays navigation links on mobile devices.
+ * Hidden on desktop (md and above). Should be used with NavbarMobileMenuButton.
+ * Built on Base UI Dialog for accessibility (focus trap, escape key, click-outside).
+ */
+declare const NavbarMobileMenu: React.ForwardRefExoticComponent<NavbarMobileMenuProps & React.RefAttributes<HTMLDivElement>>;
+export interface NavbarMobileMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+/**
+ * Button to toggle the mobile menu.
+ * Should be placed in NavbarActions on mobile.
+ * Use asChild to render as a custom button component (e.g., IconButton).
+ */
+declare const NavbarMobileMenuButton: React.ForwardRefExoticComponent<NavbarMobileMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface NavbarMobileMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    asChild?: boolean;
+    active?: boolean;
+}
+/**
+ * Navigation link for the mobile menu.
+ * Automatically closes the mobile menu when clicked.
+ * Use asChild to render with a router Link component.
+ */
+declare const NavbarMobileMenuLink: React.ForwardRefExoticComponent<NavbarMobileMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { Navbar, NavbarBrand, NavbarLinks, NavbarLink, NavbarActions, NavbarMobileMenu, NavbarMobileMenuButton, NavbarMobileMenuLink, };

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

@@ -0,0 +1,64 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Banner component based on Figma BaseKit / Banners
+ *
+ * Used to surface short, important updates or a single key action
+ * without disrupting the main page content.
+ *
+ * Responsive behavior using 24-column grid:
+ * - Mobile (sm): Stacked layout, 20px horizontal / 32px vertical padding
+ * - Tablet (md): Horizontal layout, 56px padding
+ * - Desktop (lg): Horizontal layout, 72px padding
+ *
+ * Must be placed inside a `grid-container`. Uses `col-full` to span all columns.
+ */
+declare const bannerVariants: (props?: ({
+    theme?: "light" | "dark" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BannerProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bannerVariants> {
+    /**
+     * The heading text displayed in the banner
+     */
+    heading: string;
+    /**
+     * The description text displayed below the heading
+     */
+    description: string;
+    /**
+     * Optional action element (typically a Button component)
+     */
+    action?: React.ReactNode;
+}
+/**
+ * Banner component for surfacing important updates or CTAs.
+ *
+ * Uses the 24-column grid system - must be placed inside a `grid-container`.
+ * Spans full width with `col-full`.
+ *
+ * Responsive across breakpoints:
+ * - Mobile: Stacked layout with smaller padding
+ * - Tablet: Horizontal layout with medium padding
+ * - Desktop: Horizontal layout with larger padding
+ *
+ * @example
+ * ```tsx
+ * <div className="grid-container">
+ *   <Banner
+ *     heading="Important Update"
+ *     description="Check out our new features."
+ *     action={<Button>Learn More</Button>}
+ *   />
+ * </div>
+ *
+ * // Dark theme
+ * <Banner
+ *   theme="dark"
+ *   heading="Still Have Questions?"
+ *   description="Contact us at support@example.com"
+ *   action={<Button variant="secondary">Email Us</Button>}
+ * />
+ * ```
+ */
+declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLElement>>;
+export { Banner, bannerVariants };

package/dist/components/sections/card-grid/card-grid.d.ts

@@ -0,0 +1,53 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * CardGrid component for displaying cards in a responsive grid layout
+ *
+ * Variants:
+ * - A: 3 columns on desktop, 2 on tablet, 1 on mobile
+ * - B: 2 columns on desktop/tablet, 1 on mobile
+ *
+ * Uses the 24-column grid system with grid-container as root.
+ */
+declare const cardGridVariants: (props?: ({
+    variant?: "A" | "B" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardGridProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof cardGridVariants> {
+    /**
+     * The title text displayed above the cards
+     */
+    title: string;
+    /**
+     * The card elements to display in the grid
+     */
+    cards: React.ReactNode[];
+}
+/**
+ * CardGrid component for displaying cards in a responsive grid layout.
+ *
+ * Uses the 24-column grid system with grid-container as root.
+ *
+ * Layout (Variant A):
+ * - Mobile (sm): Single column, py-72
+ * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards
+ * - Desktop (lg+): 3 columns, py-128, gap-64 between title and cards, gap-y-20 between cards
+ *
+ * Layout (Variant B):
+ * - Mobile (sm): Single column, py-72
+ * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards
+ * - Desktop (lg+): 2 columns, py-128, gap-64 between title and cards, gap-y-20 between cards
+ *
+ * @example
+ * ```tsx
+ * <CardGrid
+ *   variant="A"
+ *   title="Featured Cards"
+ *   cards={[
+ *     <Card key="1">...</Card>,
+ *     <Card key="2">...</Card>,
+ *   ]}
+ * />
+ * ```
+ */
+declare const CardGrid: React.ForwardRefExoticComponent<CardGridProps & React.RefAttributes<HTMLElement>>;
+export { CardGrid, cardGridVariants };

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

@@ -0,0 +1,44 @@
+import { VariantProps } from 'class-variance-authority';
+import { twoColumnSectionVariants } from '../two-column-section/two-column-section';
+import * as React from "react";
+export interface FaqSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof twoColumnSectionVariants> {
+    /**
+     * The title text displayed in the left column
+     * @default "Frequently Asked Questions"
+     */
+    title?: string;
+    /**
+     * The FAQ content - typically an Accordion with AccordionItems
+     */
+    children: React.ReactNode;
+}
+/**
+ * FaqSection component for displaying FAQ content in a two-column layout.
+ *
+ * Wraps TwoColumnSection with FAQ-specific defaults and typography.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (title above content)
+ * - Desktop (lg+): Title left (~40%), FAQ content right (~60%)
+ *
+ * @example
+ * ```tsx
+ * <FaqSection>
+ *   <Accordion defaultExpanded="faq-1">
+ *     <AccordionItem id="faq-1" title="What is the US Tech Force?">
+ *       Tech Force will be an elite group of technology specialists...
+ *     </AccordionItem>
+ *     <AccordionItem id="faq-2" title="What skills are required?">
+ *       We're looking for expertise in software engineering...
+ *     </AccordionItem>
+ *   </Accordion>
+ * </FaqSection>
+ *
+ * // With custom title
+ * <FaqSection title="Common Questions" theme="light">
+ *   ...
+ * </FaqSection>
+ * ```
+ */
+declare const FaqSection: React.ForwardRefExoticComponent<FaqSectionProps & React.RefAttributes<HTMLElement>>;
+export { FaqSection };

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

@@ -0,0 +1,73 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Hero variants based on Figma BaseKit / Heros
+ *
+ * Variants:
+ * - A1: Content aligned at bottom (default)
+ * - A2: Content aligned at top
+ * - A3: Content aligned at center
+ *
+ * Each variant is responsive across breakpoints:
+ * - sm (Mobile): 500px height, 20px padding
+ * - md (Tablet): 650px height, 56px padding
+ * - lg (Desktop): 700-850px height, 64-72px padding
+ */
+declare const heroVariants: (props?: ({
+    variant?: "A1" | "A2" | "A3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface HeroProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof heroVariants> {
+    /**
+     * The title text displayed in the hero
+     */
+    title: string;
+    /**
+     * URL for the background image
+     */
+    backgroundImage?: string;
+    /**
+     * URL for a background video (takes precedence over backgroundImage)
+     */
+    backgroundVideo?: string;
+    /**
+     * Opacity of the dark overlay (0-1, default: 0)
+     */
+    overlayOpacity?: number;
+    /**
+     * Color of the overlay (default: "black")
+     */
+    overlayColor?: string;
+    /**
+     * CSS background-position value (default: "center")
+     */
+    backgroundPosition?: string;
+}
+/**
+ * Hero component for page headers with large display typography.
+ *
+ * Features responsive sizing across three variants:
+ * - A1: Content at bottom (default)
+ * - A2: Content at top
+ * - A3: Content centered
+ *
+ * Each variant responds to breakpoints:
+ * - Mobile: 500px height, 20px padding, 64px typography
+ * - Tablet (768px+): 650px height, 56px padding, 128-148px typography
+ * - Desktop (1440px+): 700-800px height, 64-72px padding, 148-192px typography
+ *
+ * @example
+ * ```tsx
+ * // Simple hero
+ * <Hero title="Welcome" variant="A1" />
+ *
+ * // With background image and overlay
+ * <Hero
+ *   title="Welcome"
+ *   variant="A1"
+ *   backgroundImage="/hero.jpg"
+ *   overlayOpacity={0.4}
+ * />
+ * ```
+ */
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
+export { Hero, heroVariants };

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

@@ -0,0 +1,63 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * River component for content sections with text and media
+ *
+ * Variants:
+ * - A: Text on left (9 cols), media on right (15 cols) on desktop
+ * - B: Media on left (15 cols), text on right (9 cols) on desktop
+ *
+ * Uses the 24-column grid system. Must be placed inside a `grid-container`.
+ */
+declare const riverVariants: (props?: ({
+    variant?: "A" | "B" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface RiverProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof riverVariants> {
+    /**
+     * The headline text
+     */
+    headline: string;
+    /**
+     * The body text
+     */
+    body: string;
+    /**
+     * Primary action button (required)
+     */
+    primaryAction: React.ReactNode;
+    /**
+     * Secondary action button (optional)
+     */
+    secondaryAction?: React.ReactNode;
+    /**
+     * Media content (image, video, etc.)
+     */
+    media: React.ReactNode;
+}
+/**
+ * River component for content sections with text and media.
+ *
+ * Uses the 24-column grid system - must be placed inside a `grid-container`.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (text above media)
+ * - Desktop (lg+):
+ *   - Variant A: Text (9 cols) | Media (15 cols)
+ *   - Variant B: Media (15 cols) | Text (9 cols)
+ *
+ * @example
+ * ```tsx
+ * <div className="grid-container">
+ *   <River
+ *     variant="A"
+ *     headline="Feature Headline"
+ *     body="Description of the feature..."
+ *     primaryAction={<Button>Primary</Button>}
+ *     secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+ *     media={<img src="..." alt="Feature" />}
+ *   />
+ * </div>
+ * ```
+ */
+declare const River: React.ForwardRefExoticComponent<RiverProps & React.RefAttributes<HTMLElement>>;
+export { River, riverVariants };

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

@@ -0,0 +1,73 @@
+import * as React from "react";
+/**
+ * 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.
+ *
+ * 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> {
+    /**
+     * 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;
+    /**
+     * Content alignment: left (default) or center
+     */
+    align?: "left" | "center";
+    /**
+     * Show National Design Studio footer link at the bottom of the section
+     */
+    ndstudioFooter?: boolean;
+}
+/**
+ * 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-spacing-20, content spans 9 cols
+ * - Tablet (md): 12 columns, gap-spacing-20, content spans 9 cols
+ * - Mobile: 4 columns, gap-spacing-20, content spans all 4 cols
+ *
+ * @example
+ * ```tsx
+ * <Tout
+ *   headline="Feature Headline"
+ *   body="Description of the feature..."
+ *   primaryAction={<Button>Primary</Button>}
+ *   secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+ *   backgroundMedia={
+ *     <img
+ *       src="/background.jpg"
+ *       alt=""
+ *       className="absolute inset-0 w-full h-full object-cover"
+ *     />
+ *   }
+ * />
+ * ```
+ */
+declare const Tout: React.ForwardRefExoticComponent<ToutProps & React.RefAttributes<HTMLElement>>;
+export { Tout };