@nationaldesignstudio/react 0.0.7 → 0.0.9

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