@nationaldesignstudio/react 0.0.6 → 0.0.8

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 };

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

@@ -0,0 +1,58 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * TwoColumnSection component for text-heavy content sections
+ *
+ * Layout:
+ * - Desktop (lg+): Title left, content right with border-top divider
+ * - Mobile/Tablet: Stacked vertically
+ *
+ * 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;
+export interface TwoColumnSectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof twoColumnSectionVariants> {
+    /**
+     * The title text displayed in the left column
+     */
+    title: string;
+    /**
+     * Lead content - prominently styled (brighter text)
+     * Can be a string or ReactNode for rich content
+     */
+    lead?: React.ReactNode;
+    /**
+     * Body content - secondary styled (muted text)
+     * Can be a string or ReactNode for rich content
+     */
+    children: React.ReactNode;
+    /**
+     * Layout style for the columns
+     * - "asymmetric" (default): Uses 24-column grid with ~40/60 split (title: 9, content: 15)
+     * - "equal": Simple 2-column equal-width layout at md+ breakpoints
+     */
+    layout?: "asymmetric" | "equal";
+}
+/**
+ * TwoColumnSection component for text-heavy content with title/content split.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (title above content)
+ * - Desktop (lg+): Title left (~40%), Content right (~60%)
+ *
+ * @example
+ * ```tsx
+ * <TwoColumnSection
+ *   title="US Tech Force"
+ *   lead="The US Tech Force is recruiting an elite corps of engineers..."
+ *   theme="dark"
+ * >
+ *   <p>Through a two-year program, participants will work...</p>
+ *   <p>Upon completing the program, engineers can seek...</p>
+ * </TwoColumnSection>
+ * ```
+ */
+declare const TwoColumnSection: React.ForwardRefExoticComponent<TwoColumnSectionProps & React.RefAttributes<HTMLElement>>;
+export { TwoColumnSection, twoColumnSectionVariants };

package/dist/index.d.ts

@@ -1,13 +1,29 @@
-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 type { AccordionItemProps, AccordionProps, } from './components/atoms/accordion';
+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 { PagerControlProps } from './components/atoms/pager-control';
+export { PagerControl, pagerControlVariants, } from './components/atoms/pager-control';
+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';
+export { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarMobileMenu, NavbarMobileMenuButton, NavbarMobileMenuLink, } from './components/organisms/navbar';
+export type { USGovBannerProps } from './components/organisms/us-gov-banner';
+export { USGovBanner } from './components/organisms/us-gov-banner';
+export type { BannerProps } from './components/sections/banner';
+export { Banner, bannerVariants } from './components/sections/banner';
+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 { ProseProps, ProseSectionProps, } from './components/sections/prose';
+export { Prose, ProseSection } from './components/sections/prose';
+export type { RiverProps } from './components/sections/river';
+export { River, riverVariants } from './components/sections/river';
+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 { cn } from './lib/utils';