@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/faq-section/index.js

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { tv, cnBase } from 'tailwind-variants';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/sections/faq-section/faq-section.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var twoColumnSectionVariants = tv({
+  // Base styles - responsive padding using primitive spacing tokens
+  base: [
+    "w-full",
+    // Small (mobile): 20px x, 56px top, 20px bottom
+    "px-20 pt-56 pb-20",
+    // Medium (tablet): 56px x, 56px y
+    "md:px-56 md:py-56",
+    // Large (desktop): 72px x, 72px top, 112px bottom
+    "lg:px-72 lg:pt-72 lg:pb-112"
+  ],
+  variants: {
+    colorScheme: {
+      dark: "bg-gray-1200",
+      light: "bg-white"
+    },
+    layout: {
+      asymmetric: "",
+      equal: ""
+    }
+  },
+  defaultVariants: {
+    colorScheme: "dark",
+    layout: "asymmetric"
+  }
+});
+var TwoColumnSection = React.forwardRef(
+  ({
+    className,
+    colorScheme = "dark",
+    layout,
+    title,
+    lead,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        className: twoColumnSectionVariants({
+          colorScheme,
+          layout,
+          class: className
+        }),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "border-t pt-36",
+              colorScheme === "dark" ? "border-gray-700" : "border-gray-300",
+              // Grid layout - uses primitive spacing tokens
+              "grid grid-cols-1 gap-56",
+              layout === "equal" ? "md:grid-cols-2" : "lg:grid-cols-24 lg:gap-56"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "typography-subheading-medium",
+                    colorScheme === "dark" ? "text-gray-100" : "text-gray-900",
+                    // Column span based on layout
+                    layout !== "equal" && "lg:col-span-9"
+                  ),
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col gap-56",
+                    layout !== "equal" && "lg:col-span-15"
+                  ),
+                  children: [
+                    lead && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "typography-body-large",
+                          colorScheme === "dark" ? "text-gray-100" : "text-gray-900"
+                        ),
+                        children: typeof lead === "string" ? /* @__PURE__ */ jsx("p", { children: lead }) : lead
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "typography-body-medium flex flex-col gap-[1em]",
+                          colorScheme === "dark" ? "text-gray-400" : "text-gray-600"
+                        ),
+                        children
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+TwoColumnSection.displayName = "TwoColumnSection";
+var FaqSection = React.forwardRef(
+  ({
+    className,
+    colorScheme = "light",
+    title = "Frequently Asked Questions",
+    children,
+    layout,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      TwoColumnSection,
+      {
+        ref,
+        colorScheme,
+        layout: layout ?? void 0,
+        title,
+        className: cn(
+          // Override title typography to be larger
+          "[&_h2]:typography-h4",
+          // Accordion typography overrides
+          "[&_button]:typography-body-large [&_button]:md:typography-h5",
+          "[&_[data-accordion-panel]]:typography-body-medium [&_[data-accordion-panel]]:md:typography-body-large",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+FaqSection.displayName = "FaqSection";
+
+export { FaqSection };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/faq-section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/sections/two-column-section/two-column-section.tsx","../../src/components/sections/faq-section/faq-section.tsx"],"names":["twMerge","React2","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * TwoColumnSection component for text-heavy content sections\n *\n * Layout:\n * - Desktop (lg+): Title left, content right with border-top divider\n * - Mobile/Tablet: Stacked vertically\n *\n * Uses the 24-column grid system.\n */\nconst twoColumnSectionVariants = tv({\n\t// Base styles - responsive padding using primitive spacing tokens\n\tbase: [\n\t\t\"w-full\",\n\t\t// Small (mobile): 20px x, 56px top, 20px bottom\n\t\t\"px-20 pt-56 pb-20\",\n\t\t// Medium (tablet): 56px x, 56px y\n\t\t\"md:px-56 md:py-56\",\n\t\t// Large (desktop): 72px x, 72px top, 112px bottom\n\t\t\"lg:px-72 lg:pt-72 lg:pb-112\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tdark: \"bg-gray-1200\",\n\t\t\tlight: \"bg-white\",\n\t\t},\n\t\tlayout: {\n\t\t\tasymmetric: \"\",\n\t\t\tequal: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"dark\",\n\t\tlayout: \"asymmetric\",\n\t},\n});\n\nexport interface TwoColumnSectionProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof twoColumnSectionVariants> {\n\t/**\n\t * The title text displayed in the left column\n\t */\n\ttitle: string;\n\t/**\n\t * Lead content - prominently styled (brighter text)\n\t * Can be a string or ReactNode for rich content\n\t */\n\tlead?: React.ReactNode;\n\t/**\n\t * Body content - secondary styled (muted text)\n\t * Can be a string or ReactNode for rich content\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Layout style for the columns\n\t * - \"asymmetric\" (default): Uses 24-column grid with ~40/60 split (title: 9, content: 15)\n\t * - \"equal\": Simple 2-column equal-width layout at md+ breakpoints\n\t */\n\tlayout?: \"asymmetric\" | \"equal\";\n}\n\n/**\n * TwoColumnSection component for text-heavy content with title/content split.\n *\n * Layout:\n * - Mobile/Tablet: Stacked (title above content)\n * - Desktop (lg+): Title left (~40%), Content right (~60%)\n *\n * @example\n * ```tsx\n * <TwoColumnSection\n *   title=\"US Tech Force\"\n *   lead=\"The US Tech Force is recruiting an elite corps of engineers...\"\n *   variant=\"dark\"\n * >\n *   <p>Through a two-year program, participants will work...</p>\n *   <p>Upon completing the program, engineers can seek...</p>\n * </TwoColumnSection>\n * ```\n */\nconst TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tcolorScheme = \"dark\",\n\t\t\tlayout,\n\t\t\ttitle,\n\t\t\tlead,\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={twoColumnSectionVariants({\n\t\t\t\t\tcolorScheme,\n\t\t\t\t\tlayout,\n\t\t\t\t\tclass: className,\n\t\t\t\t})}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Inner container with border-top - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"border-t pt-36\",\n\t\t\t\t\t\tcolorScheme === \"dark\" ? \"border-gray-700\" : \"border-gray-300\",\n\t\t\t\t\t\t// Grid layout - uses primitive spacing tokens\n\t\t\t\t\t\t\"grid grid-cols-1 gap-56\",\n\t\t\t\t\t\tlayout === \"equal\" ? \"md:grid-cols-2\" : \"lg:grid-cols-24 lg:gap-56\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{/* Title column */}\n\t\t\t\t\t<h2\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"typography-subheading-medium\",\n\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t// Column span based on layout\n\t\t\t\t\t\t\tlayout !== \"equal\" && \"lg:col-span-9\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\n\t\t\t\t\t{/* Content column - uses primitive spacing tokens */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex flex-col gap-56\",\n\t\t\t\t\t\t\tlayout !== \"equal\" && \"lg:col-span-15\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Lead content - brighter/prominent */}\n\t\t\t\t\t\t{lead && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"typography-body-large\",\n\t\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{typeof lead === \"string\" ? <p>{lead}</p> : lead}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Body content - muted */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"typography-body-medium flex flex-col gap-[1em]\",\n\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-400\" : \"text-gray-600\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nTwoColumnSection.displayName = \"TwoColumnSection\";\n\nexport { TwoColumnSection, twoColumnSectionVariants };\n","import * as React from \"react\";\nimport type { VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport { TwoColumnSection } from \"../two-column-section\";\nimport type { twoColumnSectionVariants } from \"../two-column-section/two-column-section\";\n\nexport interface FaqSectionProps\n\textends Omit<React.HTMLAttributes<HTMLElement>, \"title\">,\n\t\tVariantProps<typeof twoColumnSectionVariants> {\n\t/**\n\t * The title text displayed in the left column\n\t * @default \"Frequently Asked Questions\"\n\t */\n\ttitle?: string;\n\t/**\n\t * The FAQ content - typically an Accordion with AccordionItems\n\t */\n\tchildren: React.ReactNode;\n}\n\n/**\n * FaqSection component for displaying FAQ content in a two-column layout.\n *\n * Wraps TwoColumnSection with FAQ-specific defaults and typography.\n *\n * Layout:\n * - Mobile/Tablet: Stacked (title above content)\n * - Desktop (lg+): Title left (~40%), FAQ content right (~60%)\n *\n * @example\n * ```tsx\n * <FaqSection>\n *   <Accordion defaultExpanded=\"faq-1\">\n *     <AccordionItem id=\"faq-1\" title=\"What is the US Tech Force?\">\n *       Tech Force will be an elite group of technology specialists...\n *     </AccordionItem>\n *     <AccordionItem id=\"faq-2\" title=\"What skills are required?\">\n *       We're looking for expertise in software engineering...\n *     </AccordionItem>\n *   </Accordion>\n * </FaqSection>\n *\n * // With custom title\n * <FaqSection title=\"Common Questions\" colorScheme=\"light\">\n *   ...\n * </FaqSection>\n * ```\n */\nconst FaqSection = React.forwardRef<HTMLElement, FaqSectionProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tcolorScheme = \"light\",\n\t\t\ttitle = \"Frequently Asked Questions\",\n\t\t\tchildren,\n\t\t\tlayout,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<TwoColumnSection\n\t\t\t\tref={ref}\n\t\t\t\tcolorScheme={colorScheme}\n\t\t\t\tlayout={layout ?? undefined}\n\t\t\t\ttitle={title}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Override title typography to be larger\n\t\t\t\t\t\"[&_h2]:typography-h4\",\n\t\t\t\t\t// Accordion typography overrides\n\t\t\t\t\t\"[&_button]:typography-body-large [&_button]:md:typography-h5\",\n\t\t\t\t\t\"[&_[data-accordion-panel]]:typography-body-medium [&_[data-accordion-panel]]:md:typography-body-large\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</TwoColumnSection>\n\t\t);\n\t},\n);\nFaqSection.displayName = \"FaqSection\";\n\nexport { FaqSection };\n"]}

package/dist/grid-overlay/index.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface GridOverlayProps {
+    columnOpacity?: number;
+    borderOpacity?: number;
+    visible?: boolean;
+}
+declare function GridOverlay({ columnOpacity, borderOpacity, visible, }: GridOverlayProps): react_jsx_runtime.JSX.Element;
+
+export { GridOverlay, type GridOverlayProps };

package/dist/grid-overlay/index.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/dev-tools/grid-overlay/grid-overlay.tsx
+function GridOverlay({
+  columnOpacity = 0.15,
+  borderOpacity = 0.3,
+  visible = true
+}) {
+  const columns = Array.from({ length: 24 }, (_, i) => i);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+				fixed inset-0 z-[9998] pointer-events-none overflow-hidden
+				transition-opacity duration-300 ease-out
+				${visible ? "opacity-100" : "opacity-0"}
+			`,
+      "aria-hidden": "true",
+      "data-testid": "grid-overlay",
+      children: /* @__PURE__ */ jsx("div", { className: "h-full w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]", children: /* @__PURE__ */ jsx("div", { className: "h-full grid grid-cols-4 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]", children: columns.map((index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full border border-red-500",
+          style: {
+            backgroundColor: `rgb(239 68 68 / ${columnOpacity})`,
+            borderColor: `rgb(239 68 68 / ${borderOpacity})`
+          },
+          "data-column": index + 1
+        },
+        index
+      )) }) })
+    }
+  );
+}
+
+export { GridOverlay };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/grid-overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dev-tools/grid-overlay/grid-overlay.tsx"],"names":[],"mappings":";;;AAMO,SAAS,WAAA,CAAY;AAAA,EAC3B,aAAA,GAAgB,IAAA;AAAA,EAChB,aAAA,GAAgB,GAAA;AAAA,EAChB,OAAA,GAAU;AACX,CAAA,EAAqB;AACpB,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,IAAG,EAAG,CAAC,CAAA,EAAG,CAAA,KAAM,CAAC,CAAA;AAEtD,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW;AAAA;AAAA;AAAA,IAAA,EAGR,OAAA,GAAU,gBAAgB,WAAW;AAAA,GAAA,CAAA;AAAA,MAExC,aAAA,EAAY,MAAA;AAAA,MACZ,aAAA,EAAY,cAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8JAAA,EACd,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qLAAA,EACb,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,KAAA,qBACb,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEA,SAAA,EAAU,8BAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACN,eAAA,EAAiB,mBAAmB,aAAa,CAAA,CAAA,CAAA;AAAA,YACjD,WAAA,EAAa,mBAAmB,aAAa,CAAA,CAAA;AAAA,WAC9C;AAAA,UACA,eAAa,KAAA,GAAQ;AAAA,SAAA;AAAA,QANhB;AAAA,OAQN,GACF,CAAA,EACD;AAAA;AAAA,GACD;AAEF","file":"index.js","sourcesContent":["export interface GridOverlayProps {\n\tcolumnOpacity?: number;\n\tborderOpacity?: number;\n\tvisible?: boolean;\n}\n\nexport function GridOverlay({\n\tcolumnOpacity = 0.15,\n\tborderOpacity = 0.3,\n\tvisible = true,\n}: GridOverlayProps) {\n\tconst columns = Array.from({ length: 24 }, (_, i) => i);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`\n\t\t\t\tfixed inset-0 z-[9998] pointer-events-none overflow-hidden\n\t\t\t\ttransition-opacity duration-300 ease-out\n\t\t\t\t${visible ? \"opacity-100\" : \"opacity-0\"}\n\t\t\t`}\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-testid=\"grid-overlay\"\n\t\t>\n\t\t\t<div className=\"h-full w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]\">\n\t\t\t\t<div className=\"h-full grid grid-cols-4 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]\">\n\t\t\t\t\t{columns.map((index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tclassName=\"h-full border border-red-500\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: `rgb(239 68 68 / ${columnOpacity})`,\n\t\t\t\t\t\t\t\tborderColor: `rgb(239 68 68 / ${borderOpacity})`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-column={index + 1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/hero/index.d.ts

@@ -0,0 +1,462 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+import { a as ComponentTheme } from '../theme-CzBPUlh_.js';
+export { Background as HeroBackground, BackgroundImage as HeroBackgroundImage, BackgroundImageProps as HeroBackgroundImageProps, BackgroundStream as HeroBackgroundStream, BackgroundStreamProps as HeroBackgroundStreamProps, BackgroundVideo as HeroBackgroundVideo, BackgroundVideoProps as HeroBackgroundVideoProps, BackgroundGradient as HeroGradient, BackgroundGradientProps as HeroGradientProps, BackgroundOverlay as HeroOverlay, BackgroundOverlayProps as HeroOverlayProps } from '../background/index.js';
+import 'react/jsx-runtime';
+import '@base-ui-components/react/use-render';
+
+declare const DEFAULT_TITLE_TYPOGRAPHY = "typography-h1-display";
+declare const heroVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            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;
+    indicator: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            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[];
+        };
+    };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            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[];
+        };
+    };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            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;
+    indicator: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            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;
+    indicator: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            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[];
+        };
+    };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+    };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const heroHeaderVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "relative z-10 w-full", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "relative z-10 w-full", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+declare const heroContentVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+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>>;
+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>>;
+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;
+    /**
+     * Indicator slot for scroll hints, arrows, or other visual cues.
+     * Rendered at the bottom of the hero, below the main content.
+     * @example
+     * ```tsx
+     * <Hero indicator={<ChevronDown className="animate-bounce" />}>
+     *   <h1>Welcome</h1>
+     * </Hero>
+     * ```
+     */
+    indicator?: 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 { DEFAULT_TITLE_TYPOGRAPHY, Hero, HeroContent, type HeroContentProps, HeroHeader, type HeroHeaderProps, type HeroProps, heroContentVariants, heroHeaderVariants, heroVariants };