@nationaldesignstudio/react 0.0.1 → 0.0.3

package/README.md

@@ -69,11 +69,61 @@ The CSS includes all design tokens as CSS variables. Use them directly or via Ta
 <div style={{ color: 'var(--color-blue-500)' }}>
   Content
 </div>
+```
+
+## Breakpoints
+
+The design system uses three responsive breakpoints:
+
+| Breakpoint | Min Width | Tailwind Prefix |
+|:-----------|:----------|:----------------|
+| sm | 320px | (default) |
+| md | 768px | `md:` |
+| lg | 1440px | `lg:` |
+
+```tsx
+// Responsive padding
+<div className="p-4 md:p-8 lg:p-12">Content</div>
+```
+
+## Typography
+
+### Responsive Typography (Recommended)
+
+Use responsive typography utilities that automatically scale across breakpoints:
 
-// Using typography composites
-<h1 className="text-product-title-large">
-  Heading
-</h1>
+```tsx
+<h1 className="typography-display-large">Responsive Display</h1>
+<h2 className="typography-headline-medium">Responsive Headline</h2>
+<p className="typography-body-medium">Responsive Body Text</p>
+```
+
+These classes automatically apply:
+- **Mobile (< 768px)**: `brand-small` typography
+- **Tablet (768px+)**: `brand-medium` typography
+- **Desktop (1440px+)**: `brand-large` typography
+
+**Available utilities:**
+
+| Category | Utilities |
+|:---------|:----------|
+| Display | `typography-display-hero`, `typography-display-xl`, `typography-display-large`, `typography-display-medium`, `typography-display-small` |
+| Headline | `typography-headline-xl`, `typography-headline-large`, `typography-headline-medium`, `typography-headline-small` |
+| Subheading | `typography-subheading-large`, `typography-subheading-medium`, `typography-subheading-small` |
+| Body | `typography-body-large`, `typography-body-medium`, `typography-body-small` |
+| Button | `typography-button-large`, `typography-button-medium`, `typography-button-small` |
+| Label | `typography-label-large`, `typography-label-medium`, `typography-label-small` |
+| Caption | `typography-caption-large`, `typography-caption-small` |
+
+Weight variants: `typography-headline-medium-semibold`, `typography-display-hero-regular`, etc.
+
+### Static Typography
+
+For fixed typography that doesn't change with screen size:
+
+```tsx
+<h1 className="typography-brand-large-headline-medium">Always Large</h1>
+<p className="typography-brand-small-body-medium">Always Small</p>
 ```
 
 ## Components

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

@@ -0,0 +1,29 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Button component based on Figma BaseKit / Interface / Buttons
+ *
+ * Variants:
+ * - charcoal: Dark filled button (for light backgrounds)
+ * - charcoalOutline: Dark outlined button (for light backgrounds)
+ * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
+ * - ivory: Light filled button (for dark backgrounds)
+ * - ivoryOutline: Light outlined button (for dark backgrounds)
+ * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
+ *
+ * Sizes:
+ * - lg: Large buttons (46px height)
+ * - default: Medium buttons (38px height)
+ * - sm: Small buttons (33px height)
+ *
+ * For icon-only buttons, use the IconButton component instead.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "charcoal" | "charcoalOutline" | "charcoalOutlineQuiet" | "ivory" | "ivoryOutline" | "ivoryOutlineQuiet" | 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;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/button/icon-button.d.ts

@@ -0,0 +1,29 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * IconButton component based on Figma BaseKit / Interface / Icon Button
+ *
+ * Variants:
+ * - charcoal: Dark filled button (for light backgrounds)
+ * - charcoalOutline: Dark outlined button (for light backgrounds)
+ * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
+ * - ghost: No background/border, just icon (for light backgrounds)
+ * - ghostDark: No background/border, just icon (for dark backgrounds)
+ * - ivory: Light filled button (for dark backgrounds)
+ * - ivoryOutline: Light outlined button (for dark backgrounds)
+ * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
+ *
+ * Sizes:
+ * - lg: Large (46x46)
+ * - default: Medium (36x36)
+ * - sm: Small (29x29)
+ */
+declare const iconButtonVariants: (props?: ({
+    variant?: "charcoal" | "charcoalOutline" | "charcoalOutlineQuiet" | "ivory" | "ivoryOutline" | "ivoryOutlineQuiet" | "ghost" | "ghostDark" | null | undefined;
+    size?: "lg" | "default" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
+    asChild?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { IconButton, iconButtonVariants };

package/dist/components/card/card.d.ts

@@ -0,0 +1,69 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const cardVariants: (props?: ({
+    layout?: "vertical" | "horizontal" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+/**
+ * Card component for displaying content in a contained, scannable format.
+ *
+ * Layouts:
+ * - vertical: Image on top, content below (default)
+ * - horizontal: Image on left, content on right
+ *
+ * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+}
+/**
+ * Card image area. For vertical layout, displays with 16:9 aspect ratio.
+ * For horizontal layout, takes up ~40% width and stretches to content height.
+ */
+declare const CardImage: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Card content container with proper padding and spacing.
+ */
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardEyebrowProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * Optional eyebrow text above the card title.
+ */
+declare const CardEyebrow: React.ForwardRefExoticComponent<CardEyebrowProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+/**
+ * Card title/heading.
+ */
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * Card body/description text.
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Container for card text content (eyebrow, title, description).
+ */
+declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Container for card action buttons.
+ */
+declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
+export { Card, cardVariants, CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, CardBody, CardActions, };

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface HeroProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * The title text displayed in the hero
+     */
+    title: string;
+}
+/**
+ * Hero component for page headers with large display typography.
+ *
+ * Features responsive sizing:
+ * - Desktop (1440px+): 850px height, 64px padding, 192px typography
+ * - Tablet (768px+): 650px height, 56px padding, 148px typography
+ * - Mobile: 500px height, 20px padding, 64px typography
+ */
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
+export { Hero };

package/dist/components/navbar/navbar.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
+}
+/**
+ * Main navigation bar container.
+ * Provides responsive layout for brand, links, and actions.
+ */
+declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLElement>>;
+export interface NavbarBrandProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+}
+/**
+ * Brand/logo area of the navbar.
+ * Use asChild to render as a link.
+ */
+declare const NavbarBrand: React.ForwardRefExoticComponent<NavbarBrandProps & React.RefAttributes<HTMLDivElement>>;
+export interface NavbarLinksProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Container for navigation links.
+ * Centers links on desktop, hidden on mobile (use NavbarMobileMenu instead).
+ */
+declare const NavbarLinks: React.ForwardRefExoticComponent<NavbarLinksProps & React.RefAttributes<HTMLDivElement>>;
+export interface NavbarLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    asChild?: boolean;
+    active?: boolean;
+}
+/**
+ * Individual navigation link.
+ * Use asChild to render with a router Link component.
+ */
+declare const NavbarLink: React.ForwardRefExoticComponent<NavbarLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+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 };

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

@@ -0,0 +1,37 @@
+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-headline-medium (42px mobile → 56px tablet → 72px desktop)
+ * - h3: Uses typography-headline-small (32px mobile → 42px tablet → 56px desktop)
+ * - Body: Uses typography-body-medium (16px mobile/tablet → 18px desktop)
+ */
+declare const ProseSection: React.ForwardRefExoticComponent<ProseSectionProps & React.RefAttributes<HTMLElement>>;
+export { Prose, ProseSection };

package/dist/components/us-gov-banner/us-gov-banner.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface USGovBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom flag icon element. Defaults to a US flag SVG.
+     */
+    flagIcon?: React.ReactNode;
+    /**
+     * Banner text content
+     * @default "An official website of the United States government"
+     */
+    text?: string;
+}
+/**
+ * US Government official website banner.
+ * Displays the official government website notice with flag icon.
+ * Commonly placed at the very top of government websites.
+ */
+declare const USGovBanner: React.ForwardRefExoticComponent<USGovBannerProps & React.RefAttributes<HTMLDivElement>>;
+export { USGovBanner };

package/dist/index.d.ts

@@ -1,3 +1,13 @@
-export type { ButtonProps } from './components/button';
-export { Button, buttonVariants } from './components/button';
+export type { ButtonProps, IconButtonProps } from './components/button';
+export { Button, buttonVariants, IconButton, iconButtonVariants, } from './components/button';
+export type { CardActionsProps, CardBodyProps, CardContentProps, CardDescriptionProps, CardEyebrowProps, CardImageProps, CardProps, CardTitleProps, } from './components/card';
+export { Card, CardActions, CardBody, CardContent, CardDescription, CardEyebrow, CardImage, CardTitle, cardVariants, } from './components/card';
+export type { HeroProps } from './components/hero';
+export { Hero } from './components/hero';
+export type { NavbarActionsProps, NavbarBrandProps, NavbarLinkProps, NavbarLinksProps, NavbarProps, } from './components/navbar';
+export { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, } from './components/navbar';
+export type { ProseProps, ProseSectionProps } from './components/prose';
+export { Prose, ProseSection } from './components/prose';
+export type { USGovBannerProps } from './components/us-gov-banner';
+export { USGovBanner } from './components/us-gov-banner';
 export { cn } from './lib/utils';