@nationaldesignstudio/react 0.5.0 → 0.5.2

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

@@ -1,337 +0,0 @@
-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';
-declare const DEFAULT_TITLE_TYPOGRAPHY = "typography-h1-display";
-declare const heroVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            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: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}>, {
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            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: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            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: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            content: string[];
-        };
-    };
-    colorScheme: {
-        dark: {
-            root: string;
-            title: string;
-        };
-        light: {
-            root: string;
-            title: string;
-        };
-    };
-    hasBackground: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    variant: {
-        A1: {
-            root: string;
-            content: string[];
-        };
-        A2: {
-            root: string;
-            content: string[];
-        };
-        A3: {
-            root: string;
-            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>>;
-export interface HeroHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Header slot for Hero - used for navigation, gov banners, etc.
- * Full-width with no padding, sits at the top of the hero.
- */
-declare const HeroHeader: React.ForwardRefExoticComponent<HeroHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export interface HeroContentProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Content container for Hero - use for main content.
- * Has padding and sits above backgrounds with z-10.
- */
-declare const HeroContent: React.ForwardRefExoticComponent<HeroContentProps & React.RefAttributes<HTMLDivElement>>;
-export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof heroVariants> {
-    /**
-     * The title text displayed in the hero.
-     * If provided, renders an h1 with default typography.
-     * Omit to use children for custom content composition.
-     */
-    title?: string;
-    /**
-     * Custom typography class for the title using primitive tokens.
-     * Default: "typography-h1-display"
-     */
-    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.
-     */
-    top?: React.ReactNode;
-    /**
-     * 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)
-     */
-    background?: React.ReactNode | string;
-    /**
-     * Opacity of the overlay (0-1, default: 0)
-     * Only applies when using a background slot
-     */
-    overlayOpacity?: number;
-    /**
-     * Color of the overlay (default: "black")
-     */
-    overlayColor?: string;
-    /**
-     * Border radius for the hero container
-     * Useful for designs with rounded bottom corners
-     */
-    borderRadius?: string;
-    /**
-     * Theme overrides for component styling via CSS custom properties
-     */
-    theme?: ComponentTheme;
-}
-/**
- * Hero component for page headers with large display typography.
- *
- * Slots:
- * - `top`: Full-width slot at top for USGovBanner, Navigation (no padding)
- * - `children`: Main content slot with padding and alignment
- *
- * The `title` prop is a convenience for simple heroes - it renders an h1 with
- * responsive typography. Children are always rendered, so you can use both
- * or just children for full control.
- *
- * Variants:
- * - A1: Content at bottom (default)
- * - A2: Content at top
- * - A3: Content centered
- *
- * @example
- * ```tsx
- * // Simple - just title and background
- * <Hero title="Welcome" background="#1a1a1a" />
- *
- * // With top slot for banner/nav
- * <Hero
- *   variant="A1"
- *   background={<HeroBackground.Image src="/hero.jpg" />}
- *   top={
- *     <>
- *       <USGovBanner variant="inverted" />
- *       <Navigation />
- *     </>
- *   }
- * >
- *   <h1>Board of Peace</h1>
- *   <p>Subtitle goes here</p>
- * </Hero>
- * ```
- */
-declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>> & {
-    Header: typeof HeroHeader;
-    Content: typeof HeroContent;
-};
-export { Hero, heroVariants, heroContentVariants, heroHeaderVariants, DEFAULT_TITLE_TYPOGRAPHY, HeroHeader, HeroContent, };

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

@@ -1,37 +0,0 @@
-import * as React from "react";
-export interface ProseProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-}
-/**
- * Prose container for long-form content with proper typography and spacing.
- *
- * Provides responsive spacing between content blocks:
- * - Desktop (1440px+): 96px gap
- * - Tablet (768px+): 72px gap
- * - Mobile: 56px gap
- *
- * Use with ProseSection components for proper content structure.
- */
-declare const Prose: React.ForwardRefExoticComponent<ProseProps & React.RefAttributes<HTMLDivElement>>;
-export interface ProseSectionProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * The heading text for this section
-     */
-    heading: string;
-    /**
-     * The heading level to render (h2 or h3)
-     * @default "h2"
-     */
-    as?: "h2" | "h3";
-    children: React.ReactNode;
-}
-/**
- * A section within Prose content, containing a heading and body text.
- *
- * Responsive typography:
- * - h2: Uses typography-h3
- * - h3: Uses typography-h4
- * - Body: Uses typography-body-medium
- */
-declare const ProseSection: React.ForwardRefExoticComponent<ProseSectionProps & React.RefAttributes<HTMLElement>>;
-export { Prose, ProseSection };

package/dist/components/sections/quote-block/quote-block.d.ts

@@ -1,152 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import * as React from "react";
-declare const quoteBlockVariants: import('tailwind-variants').TVReturnType<{
-    size: {
-        default: {
-            root: string;
-        };
-        compact: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-    content: string[];
-    quoteWrapper: string;
-    quote: string[];
-    openQuote: string[];
-    attribution: string;
-    signature: string;
-    byline: string;
-    bylineName: string;
-    bylineTitle: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        default: {
-            root: string;
-        };
-        compact: {
-            root: string;
-        };
-    };
-}, {
-    size: {
-        default: {
-            root: string;
-        };
-        compact: {
-            root: string;
-        };
-    };
-}>, {
-    size: {
-        default: {
-            root: string;
-        };
-        compact: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-    content: string[];
-    quoteWrapper: string;
-    quote: string[];
-    openQuote: string[];
-    attribution: string;
-    signature: string;
-    byline: string;
-    bylineName: string;
-    bylineTitle: string;
-}, import('tailwind-variants').TVReturnType<{
-    size: {
-        default: {
-            root: string;
-        };
-        compact: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-    content: string[];
-    quoteWrapper: string;
-    quote: string[];
-    openQuote: string[];
-    attribution: string;
-    signature: string;
-    byline: string;
-    bylineName: string;
-    bylineTitle: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        default: {
-            root: string;
-        };
-        compact: {
-            root: string;
-        };
-    };
-}, {
-    size: {
-        default: {
-            root: string;
-        };
-        compact: {
-            root: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-export interface QuoteBlockProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, VariantProps<typeof quoteBlockVariants> {
-    /**
-     * The quote text to display
-     */
-    quote: string;
-    /**
-     * Whether to show decorative quote marks
-     * @default true
-     */
-    showQuoteMarks?: boolean;
-    /**
-     * Signature image URL (optional)
-     */
-    signatureImage?: string;
-    /**
-     * Alt text for signature image
-     */
-    signatureAlt?: string;
-    /**
-     * Attribution name (e.g., "Donald J. Trump")
-     */
-    attributionName?: string;
-    /**
-     * Attribution title (e.g., "45 & 47 President of the United States")
-     */
-    attributionTitle?: string;
-    /**
-     * Background element - use BackgroundImage or similar
-     */
-    background?: React.ReactNode;
-    /**
-     * Overlay opacity (0-1)
-     */
-    overlayOpacity?: number;
-    /**
-     * Overlay color
-     */
-    overlayColor?: string;
-    /**
-     * Custom class for the quote text
-     */
-    quoteClassName?: string;
-    /**
-     * Custom class for the byline name
-     */
-    bylineNameClassName?: string;
-    /**
-     * Custom class for the byline title
-     */
-    bylineTitleClassName?: string;
-}
-declare const QuoteBlock: React.ForwardRefExoticComponent<QuoteBlockProps & React.RefAttributes<HTMLElement>>;
-export { QuoteBlock, quoteBlockVariants };

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

@@ -1,96 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-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: 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
-     */
-    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="outline">Secondary</Button>}
- *     media={<img src="..." alt="Feature" />}
- *   />
- * </div>
- * ```
- */
-declare const River: React.ForwardRefExoticComponent<RiverProps & React.RefAttributes<HTMLElement>>;
-export { River, riverVariants };