@nationaldesignstudio/react 0.0.17 → 0.1.0

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

@@ -1,165 +1,171 @@
 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';
 /**
  * Hero variants based on Figma BaseKit / Heros
  *
+ * Slots:
+ * - root: The outer container
+ * - top: Full-width slot at top for banners/nav (no padding)
+ * - content: Padded content area with alignment
+ *
  * 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
+ * - A3: Content centered
  */
 declare const heroVariants: import('tailwind-variants').TVReturnType<{
     variant: {
-        A1: string[];
-        A2: string[];
-        A3: string[];
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
     };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+}, {
+    root: string;
+    top: string;
+    content: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        A1: string[];
-        A2: string[];
-        A3: string[];
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
     };
 }, {
     variant: {
-        A1: string[];
-        A2: string[];
-        A3: string[];
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
     };
 }>, {
     variant: {
-        A1: string[];
-        A2: string[];
-        A3: string[];
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
     };
-}, undefined, import('tailwind-variants').TVReturnType<{
+}, {
+    root: string;
+    top: string;
+    content: string[];
+}, import('tailwind-variants').TVReturnType<{
     variant: {
-        A1: string[];
-        A2: string[];
-        A3: string[];
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
     };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+}, {
+    root: string;
+    top: string;
+    content: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        A1: string[];
-        A2: string[];
-        A3: string[];
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
     };
 }, {
     variant: {
-        A1: string[];
-        A2: string[];
-        A3: string[];
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: 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;
+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> {
 }
-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;
+/**
+ * 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> {
 }
 /**
- * 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" />}
- * />
- * ```
+ * Content container for Hero - use for main content.
+ * Has padding and sits above backgrounds with z-10.
  */
-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> {
+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
+     * 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;
+    title?: string;
     /**
      * 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"
+     * Default: "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192"
      */
     titleClassName?: string;
+    /**
+     * 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
@@ -175,50 +181,60 @@ export interface HeroProps extends React.HTMLAttributes<HTMLElement>, VariantPro
      * 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;
 }
+/**
+ * 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 lg:text-192 lg:leading-192 lg:tracking-192 font-medium";
 /**
  * Hero component for page headers with large display typography.
  *
- * Features responsive sizing across three variants:
+ * 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
  *
- * 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 with solid color
- * <Hero title="Welcome" variant="A1" background="#1a1a1a" />
+ * // Simple - just title and background
+ * <Hero title="Welcome" background="#1a1a1a" />
  *
- * // With background image
+ * // With top slot for banner/nav
  * <Hero
- *   title="Welcome"
  *   variant="A1"
  *   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}
- * />
+ *   top={
+ *     <>
+ *       <USGovBanner variant="inverted" />
+ *       <Navigation />
+ *     </>
+ *   }
+ * >
+ *   <h1>Board of Peace</h1>
+ *   <p>Subtitle goes here</p>
+ * </Hero>
  * ```
  */
-/**
- * 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, HeroBackground, heroVariants, DEFAULT_TITLE_TYPOGRAPHY };
+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/quote-block/quote-block.d.ts

@@ -0,0 +1,152 @@
+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/index.d.ts

@@ -1,5 +1,7 @@
 export type { AccordionItemProps, AccordionProps, } from './components/atoms/accordion';
 export { Accordion, AccordionItem } from './components/atoms/accordion';
+export type { BackgroundGradientProps, BackgroundImageProps, BackgroundOverlayProps, BackgroundProps, BackgroundStreamProps, BackgroundVideoProps, } from './components/atoms/background';
+export { Background, BackgroundGradient, BackgroundImage, BackgroundOverlay, BackgroundStream, BackgroundVideo, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants, } from './components/atoms/background';
 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';
@@ -20,10 +22,12 @@ 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 { HeroBackgroundImageProps, HeroBackgroundStreamProps, HeroBackgroundVideoProps, HeroProps, } from './components/sections/hero';
-export { DEFAULT_TITLE_TYPOGRAPHY, Hero, HeroBackground, heroVariants, } from './components/sections/hero';
+export type { HeroBackgroundImageProps, HeroBackgroundStreamProps, HeroBackgroundVideoProps, HeroContentProps, HeroGradientProps, HeroHeaderProps, HeroOverlayProps, HeroProps, } from './components/sections/hero';
+export { DEFAULT_TITLE_TYPOGRAPHY, Hero, HeroBackground, HeroBackgroundImage, HeroBackgroundStream, HeroBackgroundVideo, HeroContent, HeroGradient, HeroHeader, HeroOverlay, heroContentVariants, heroHeaderVariants, heroVariants, } from './components/sections/hero';
 export type { ProseProps, ProseSectionProps, } from './components/sections/prose';
 export { Prose, ProseSection } from './components/sections/prose';
+export type { QuoteBlockProps } from './components/sections/quote-block';
+export { QuoteBlock, quoteBlockVariants, } from './components/sections/quote-block';
 export type { RiverProps } from './components/sections/river';
 export { River, riverVariants } from './components/sections/river';
 export type { ToutProps } from './components/sections/tout';