@nationaldesignstudio/react 0.0.10 → 0.0.12

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

@@ -1,4 +1,4 @@
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
 /**
  * CardGrid component for displaying cards in a responsive grid layout
@@ -9,9 +9,42 @@ import * as React from "react";
  *
  * 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;
+declare const cardGridVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, unknown, unknown, undefined>>;
 export interface CardGridProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof cardGridVariants> {
     /**
      * The title text displayed above the cards

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

@@ -1,4 +1,4 @@
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
 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> {
@@ -35,7 +35,7 @@ export interface FaqSectionProps extends Omit<React.HTMLAttributes<HTMLElement>,
  * </FaqSection>
  *
  * // With custom title
- * <FaqSection title="Common Questions" theme="light">
+ * <FaqSection title="Common Questions" variant="light">
  *   ...
  * </FaqSection>
  * ```

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

@@ -1,4 +1,5 @@
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
+import { ComponentTheme } from '../../../lib/theme';
 import * as React from "react";
 /**
  * Hero variants based on Figma BaseKit / Heros
@@ -13,24 +14,161 @@ import * as React from "react";
  * - 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;
+declare const heroVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        A1: string[];
+        A2: string[];
+        A3: string[];
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        A1: string[];
+        A2: string[];
+        A3: string[];
+    };
+}, {
+    variant: {
+        A1: string[];
+        A2: string[];
+        A3: string[];
+    };
+}>, {
+    variant: {
+        A1: string[];
+        A2: string[];
+        A3: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        A1: string[];
+        A2: string[];
+        A3: string[];
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        A1: string[];
+        A2: string[];
+        A3: string[];
+    };
+}, {
+    variant: {
+        A1: string[];
+        A2: string[];
+        A3: string[];
+    };
+}>, unknown, unknown, undefined>>;
+export interface HeroBackgroundImageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * URL for the background image
+     */
+    src: string;
+    /**
+     * CSS background-position value (default: "center")
+     */
+    position?: string;
+    /**
+     * Alt text for accessibility (used in aria-label)
+     */
+    alt?: string;
+}
+export interface HeroBackgroundVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children"> {
+    /**
+     * URL for the video source
+     */
+    src: string;
+    /**
+     * Video MIME type (default: auto-detected from src)
+     */
+    type?: string;
+    /**
+     * Poster image URL shown before video loads
+     */
+    poster?: string;
+}
+export interface HeroBackgroundStreamProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
+    /**
+     * Cloudflare Stream video ID
+     */
+    videoId: string;
+    /**
+     * Poster image URL (Cloudflare Stream thumbnail or custom)
+     */
+    poster?: string;
+    /**
+     * Whether the video should autoplay (default: true)
+     */
+    autoplay?: boolean;
+    /**
+     * Whether the video should loop (default: true)
+     */
+    loop?: boolean;
+    /**
+     * Whether the video should be muted (default: true)
+     */
+    muted?: boolean;
+    /**
+     * Whether to show playback controls (default: false)
+     */
+    controls?: boolean;
+    /**
+     * Custom Cloudflare customer subdomain (if using custom domains)
+     */
+    customerSubdomain?: string;
+}
+/**
+ * Compound component for Hero backgrounds
+ *
+ * Provides sub-components for different background types:
+ * - `HeroBackground.Image` - Static image backgrounds
+ * - `HeroBackground.Video` - HTML5 video backgrounds
+ * - `HeroBackground.Stream` - Cloudflare Stream video backgrounds
+ *
+ * @example
+ * ```tsx
+ * // Image background
+ * <Hero
+ *   title="Welcome"
+ *   background={<HeroBackground.Image src="/hero.jpg" />}
+ * />
+ *
+ * // Video background
+ * <Hero
+ *   title="Welcome"
+ *   background={<HeroBackground.Video src="/hero.mp4" />}
+ * />
+ *
+ * // Cloudflare Stream background
+ * <Hero
+ *   title="Welcome"
+ *   background={<HeroBackground.Stream videoId="abc123" />}
+ * />
+ * ```
+ */
+declare const HeroBackground: {
+    Image: React.ForwardRefExoticComponent<HeroBackgroundImageProps & React.RefAttributes<HTMLDivElement>>;
+    Video: React.ForwardRefExoticComponent<HeroBackgroundVideoProps & React.RefAttributes<HTMLVideoElement>>;
+    Stream: React.ForwardRefExoticComponent<HeroBackgroundStreamProps & React.RefAttributes<HTMLIFrameElement>>;
+};
 export interface HeroProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof heroVariants> {
     /**
      * The title text displayed in the hero
      */
     title: string;
     /**
-     * URL for the background image
+     * Custom typography class for the title using primitive tokens.
+     * Use primitive typography classes like "text-128 leading-128 tracking-128"
+     * Default: "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 xl:text-192 xl:leading-192 xl:tracking-192"
      */
-    backgroundImage?: string;
+    titleClassName?: string;
     /**
-     * URL for a background video (takes precedence over backgroundImage)
+     * Background for the hero. Can be:
+     * - A color string (hex, rgb, etc.) for solid backgrounds
+     * - A ReactNode (use HeroBackground.Image, HeroBackground.Video, or HeroBackground.Stream)
      */
-    backgroundVideo?: string;
+    background?: React.ReactNode | string;
     /**
-     * Opacity of the dark overlay (0-1, default: 0)
+     * Opacity of the overlay (0-1, default: 0)
+     * Only applies when using a background slot
      */
     overlayOpacity?: number;
     /**
@@ -38,9 +176,9 @@ export interface HeroProps extends React.HTMLAttributes<HTMLElement>, VariantPro
      */
     overlayColor?: string;
     /**
-     * CSS background-position value (default: "center")
+     * Theme overrides for component styling via CSS custom properties
      */
-    backgroundPosition?: string;
+    theme?: ComponentTheme;
 }
 /**
  * Hero component for page headers with large display typography.
@@ -57,17 +195,30 @@ export interface HeroProps extends React.HTMLAttributes<HTMLElement>, VariantPro
  *
  * @example
  * ```tsx
- * // Simple hero
- * <Hero title="Welcome" variant="A1" />
+ * // Simple hero with solid color
+ * <Hero title="Welcome" variant="A1" background="#1a1a1a" />
  *
- * // With background image and overlay
+ * // With background image
  * <Hero
  *   title="Welcome"
  *   variant="A1"
- *   backgroundImage="/hero.jpg"
+ *   background={<HeroBackground.Image src="/hero.jpg" />}
  *   overlayOpacity={0.4}
  * />
+ *
+ * // With Cloudflare Stream video
+ * <Hero
+ *   title="Welcome"
+ *   variant="A1"
+ *   background={<HeroBackground.Stream videoId="abc123" />}
+ *   overlayOpacity={0.3}
+ * />
  * ```
  */
+/**
+ * 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 xl:text-192 xl:leading-192 xl:tracking-192 font-medium";
 declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
-export { Hero, heroVariants };
+export { Hero, HeroBackground, heroVariants, DEFAULT_TITLE_TYPOGRAPHY };

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

@@ -1,4 +1,4 @@
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
 /**
  * River component for content sections with text and media
@@ -9,9 +9,42 @@ import * as React from "react";
  *
  * 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;
+declare const riverVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, unknown, unknown, undefined>>;
 export interface RiverProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof riverVariants> {
     /**
      * The headline text

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

@@ -1,10 +1,87 @@
+import { VariantProps } from 'tailwind-variants';
+import { ComponentTheme } from '../../../lib/theme';
 import * as React from "react";
+/**
+ * Tout variants for background and content styling
+ */
+declare const toutVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, {
+    variant: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}>, {
+    variant: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, {
+    variant: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}>, unknown, unknown, undefined>>;
 /**
  * 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.
  *
+ * Variants:
+ * - light: Light text styling (default)
+ * - dark: Dark text styling
+ *
+ * Alignment:
+ * - left: Content aligned to the left (default)
+ * - center: Content 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
@@ -12,7 +89,7 @@ import * as React from "react";
  *
  * This component is self-contained - do NOT wrap in a grid-container.
  */
-export interface ToutProps extends React.HTMLAttributes<HTMLElement> {
+export interface ToutProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof toutVariants> {
     /**
      * The headline displayed in the tout
      */
@@ -35,13 +112,15 @@ export interface ToutProps extends React.HTMLAttributes<HTMLElement> {
      */
     backgroundMedia: React.ReactNode;
     /**
-     * Content alignment: left (default) or center
+     * Optional footer content to display at the bottom of the section.
+     * Use with NdstudioFooter component for the branded footer.
      */
-    align?: "left" | "center";
+    footer?: React.ReactNode;
     /**
-     * Show National Design Studio footer link at the bottom of the section
+     * Component-level theme overrides.
+     * Allows customization of colors, spacing, and surface properties.
      */
-    ndstudioFooter?: boolean;
+    theme?: ComponentTheme;
 }
 /**
  * Tout component for hero-like sections with background media and overlaid content.
@@ -66,8 +145,9 @@ export interface ToutProps extends React.HTMLAttributes<HTMLElement> {
  *       className="absolute inset-0 w-full h-full object-cover"
  *     />
  *   }
+ *   footer={<NdstudioFooter />}
  * />
  * ```
  */
 declare const Tout: React.ForwardRefExoticComponent<ToutProps & React.RefAttributes<HTMLElement>>;
-export { Tout };
+export { Tout, toutVariants };

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

@@ -1,4 +1,4 @@
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
 /**
  * TwoColumnSection component for text-heavy content sections
@@ -9,10 +9,84 @@ import * as React from "react";
  *
  * Uses the 24-column grid system.
  */
-declare const twoColumnSectionVariants: (props?: ({
-    theme?: "light" | "dark" | null | undefined;
-    layout?: "asymmetric" | "equal" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const twoColumnSectionVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        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: {
+        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: {
+        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: {
+        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: {
+        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: {
+        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: {
+        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>>;
 export interface TwoColumnSectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof twoColumnSectionVariants> {
     /**
      * The title text displayed in the left column
@@ -47,7 +121,7 @@ export interface TwoColumnSectionProps extends React.HTMLAttributes<HTMLElement>
  * <TwoColumnSection
  *   title="US Tech Force"
  *   lead="The US Tech Force is recruiting an elite corps of engineers..."
- *   theme="dark"
+ *   variant="dark"
  * >
  *   <p>Through a two-year program, participants will work...</p>
  *   <p>Upon completing the program, engineers can seek...</p>

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useEventListener } from './use-event-listener';

package/dist/hooks/use-event-listener.d.ts

@@ -0,0 +1,24 @@
+type EventMap<T> = T extends Window ? WindowEventMap : T extends Document ? DocumentEventMap : T extends HTMLElement ? HTMLElementEventMap : never;
+/**
+ * Custom hook that attaches an event listener to a specified element.
+ * Automatically handles cleanup on unmount and when dependencies change.
+ *
+ * @param eventName - The name of the event to listen for
+ * @param handler - The callback function to execute when the event fires
+ * @param element - The element to attach the listener to (defaults to window)
+ * @param options - Optional event listener options
+ *
+ * @example
+ * ```tsx
+ * // Listen to window resize
+ * useEventListener('resize', handleResize);
+ *
+ * // Listen to element scroll
+ * useEventListener('scroll', handleScroll, containerRef.current);
+ *
+ * // With options
+ * useEventListener('scroll', handleScroll, window, { passive: true });
+ * ```
+ */
+export declare function useEventListener<T extends Window | Document | HTMLElement, K extends keyof EventMap<T>>(eventName: K, handler: (event: EventMap<T>[K]) => void, element?: T | null, options?: boolean | AddEventListenerOptions): void;
+export {};

package/dist/index.d.ts

@@ -2,8 +2,12 @@ export type { AccordionItemProps, AccordionProps, } from './components/atoms/acc
 export { Accordion, AccordionItem } from './components/atoms/accordion';
 export type { ButtonProps, IconButtonProps } from './components/atoms/button';
 export { Button, buttonVariants, IconButton, iconButtonVariants, } from './components/atoms/button';
+export type { NdstudioFooterProps } from './components/atoms/ndstudio-footer';
+export { NdstudioFooter } from './components/atoms/ndstudio-footer';
 export type { PagerControlProps } from './components/atoms/pager-control';
 export { PagerControl, pagerControlVariants, } from './components/atoms/pager-control';
+export type { DevToolbarProps, GridOverlayProps } from './components/dev-tools';
+export { DevToolbar, GridOverlay } from './components/dev-tools';
 export type { CardActionsProps, CardBodyProps, CardContentProps, CardDescriptionProps, CardEyebrowProps, CardImageProps, CardProps, CardTitleProps, } from './components/organisms/card';
 export { Card, CardActions, CardBody, CardContent, CardDescription, CardEyebrow, CardImage, CardTitle, cardVariants, } from './components/organisms/card';
 export type { NavbarActionsProps, NavbarBrandProps, NavbarLinkProps, NavbarLinksProps, NavbarMobileMenuButtonProps, NavbarMobileMenuLinkProps, NavbarMobileMenuProps, NavbarProps, } from './components/organisms/navbar';
@@ -16,8 +20,8 @@ export type { CardGridProps } from './components/sections/card-grid';
 export { CardGrid, cardGridVariants } from './components/sections/card-grid';
 export type { FaqSectionProps } from './components/sections/faq-section';
 export { FaqSection } from './components/sections/faq-section';
-export type { HeroProps } from './components/sections/hero';
-export { Hero } from './components/sections/hero';
+export type { HeroBackgroundImageProps, HeroBackgroundStreamProps, HeroBackgroundVideoProps, HeroProps, } from './components/sections/hero';
+export { DEFAULT_TITLE_TYPOGRAPHY, Hero, HeroBackground, heroVariants, } from './components/sections/hero';
 export type { ProseProps, ProseSectionProps, } from './components/sections/prose';
 export { Prose, ProseSection } from './components/sections/prose';
 export type { RiverProps } from './components/sections/river';
@@ -26,4 +30,7 @@ export type { ToutProps } from './components/sections/tout';
 export { Tout } from './components/sections/tout';
 export type { TwoColumnSectionProps } from './components/sections/two-column-section';
 export { TwoColumnSection, twoColumnSectionVariants, } from './components/sections/two-column-section';
+export type { ButtonTheme, ColorToken, ComponentTheme, ComponentThemeColors, ComponentThemeSpatial, ComponentThemeSurface, FontSizeToken, RadiusToken, SpacingToken, } from './lib/theme';
+export { buttonThemeToStyleVars, FONT_SIZES, fontSizeToClass, responsiveTypographyClass, themeToStyleVars, } from './lib/theme';
 export { cn } from './lib/utils';
+export { applyTheme, createThemeStyle, filterCSSVars, getToken, mergeCSSVars, removeTheme, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, toCSSVars, useCSSVars, useTheme, useThemeTokens, } from './theme';