@cdt5058/json-render-uswds 0.0.1 → 0.1.0

package/dist/catalog.js

@@ -0,0 +1,1170 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/catalog.ts
+var catalog_exports = {};
+__export(catalog_exports, {
+  uswdsComponentDefinitions: () => uswdsComponentDefinitions
+});
+module.exports = __toCommonJS(catalog_exports);
+var import_zod = require("zod");
+var validationCheckSchema = import_zod.z.array(
+  import_zod.z.object({
+    type: import_zod.z.string(),
+    message: import_zod.z.string(),
+    args: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).optional()
+  })
+).nullable();
+var validateOnSchema = import_zod.z.enum(["change", "blur", "submit"]).nullable();
+var uswdsComponentDefinitions = {
+  // ==========================================================================
+  // Layout Components
+  // ==========================================================================
+  Grid: {
+    props: import_zod.z.object({
+      columns: import_zod.z.number().nullable(),
+      gap: import_zod.z.enum(["sm", "md", "lg"]).nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS grid row with equal-width columns. columns: 1-12. gap: spacing between columns.",
+    example: { columns: 3, gap: "md" }
+  },
+  CardGroup: {
+    props: import_zod.z.object({
+      cards: import_zod.z.array(
+        import_zod.z.object({
+          title: import_zod.z.string().nullable(),
+          description: import_zod.z.string().nullable(),
+          mediaUrl: import_zod.z.string().nullable(),
+          mediaAlt: import_zod.z.string().nullable(),
+          footer: import_zod.z.string().nullable()
+        })
+      ),
+      flag: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS group of cards in a responsive grid. cards: [{title, description, mediaUrl?, mediaAlt?, footer?}]. flag for horizontal card layout.",
+    example: {
+      cards: [
+        {
+          title: "Card One",
+          description: "Description one.",
+          mediaUrl: null,
+          mediaAlt: null,
+          footer: null
+        },
+        {
+          title: "Card Two",
+          description: "Description two.",
+          mediaUrl: null,
+          mediaAlt: null,
+          footer: null
+        }
+      ]
+    }
+  },
+  Card: {
+    props: import_zod.z.object({
+      title: import_zod.z.string().nullable(),
+      description: import_zod.z.string().nullable(),
+      headerFirst: import_zod.z.boolean().nullable(),
+      mediaUrl: import_zod.z.string().nullable(),
+      mediaAlt: import_zod.z.string().nullable(),
+      flag: import_zod.z.boolean().nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS card container. Use title/description for header, mediaUrl for an image, flag for horizontal layout.",
+    example: { title: "Card Title", description: "Supporting text." }
+  },
+  Divider: {
+    props: import_zod.z.object({}),
+    description: "USWDS horizontal rule divider (usa-divider)."
+  },
+  Footer: {
+    props: import_zod.z.object({
+      variant: import_zod.z.enum(["slim", "medium", "big"]).nullable(),
+      agencyName: import_zod.z.string(),
+      agencyUrl: import_zod.z.string().nullable(),
+      logoUrl: import_zod.z.string().nullable(),
+      logoAlt: import_zod.z.string().nullable(),
+      navGroups: import_zod.z.array(
+        import_zod.z.object({
+          heading: import_zod.z.string().nullable(),
+          links: import_zod.z.array(import_zod.z.object({ label: import_zod.z.string(), href: import_zod.z.string() }))
+        })
+      ).nullable(),
+      contactHeading: import_zod.z.string().nullable(),
+      contactInfo: import_zod.z.array(
+        import_zod.z.object({
+          type: import_zod.z.enum(["address", "phone", "email"]),
+          value: import_zod.z.string()
+        })
+      ).nullable(),
+      socialLinks: import_zod.z.array(
+        import_zod.z.object({
+          platform: import_zod.z.enum([
+            "facebook",
+            "twitter",
+            "youtube",
+            "instagram",
+            "rss",
+            "linkedin",
+            "github"
+          ]),
+          href: import_zod.z.string(),
+          label: import_zod.z.string()
+        })
+      ).nullable(),
+      returnToTop: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS site footer. variant: slim (compact), medium (default), big (multi-column nav). navGroups: [{heading?, links: [{label, href}]}]. For big variant, each group becomes a column.",
+    example: {
+      variant: "medium",
+      agencyName: "Agency Name",
+      agencyUrl: "/",
+      logoUrl: null,
+      logoAlt: null,
+      navGroups: [
+        {
+          heading: null,
+          links: [
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Contact", href: "/contact" }
+          ]
+        }
+      ],
+      contactHeading: "Contact",
+      contactInfo: [
+        { type: "address", value: "1800 F Street NW, Washington, DC 20405" },
+        { type: "phone", value: "1-800-FED-INFO" },
+        { type: "email", value: "info@agency.gov" }
+      ],
+      socialLinks: null,
+      returnToTop: true
+    }
+  },
+  // ==========================================================================
+  // Navigation Components
+  // ==========================================================================
+  Accordion: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          title: import_zod.z.string(),
+          content: import_zod.z.string(),
+          expanded: import_zod.z.boolean().nullable()
+        })
+      ),
+      bordered: import_zod.z.boolean().nullable(),
+      multiselectable: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS accordion. Items as [{title, content, expanded?}]. bordered adds border styling. multiselectable allows multiple open panels.",
+    example: {
+      items: [
+        { title: "First item", content: "Content for first item." },
+        { title: "Second item", content: "Content for second item." }
+      ]
+    }
+  },
+  Pagination: {
+    props: import_zod.z.object({
+      totalPages: import_zod.z.number(),
+      page: import_zod.z.number().nullable(),
+      ariaLabel: import_zod.z.string().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS pagination navigation. Use { $bindState } on page for current page number.",
+    example: { totalPages: 10, page: 1 }
+  },
+  StepIndicator: {
+    props: import_zod.z.object({
+      steps: import_zod.z.array(import_zod.z.string()),
+      currentStep: import_zod.z.number(),
+      counters: import_zod.z.enum(["default", "small"]).nullable(),
+      centered: import_zod.z.boolean().nullable(),
+      noLabels: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS step indicator for multi-step forms. steps: array of step labels. currentStep: 1-based index of active step.",
+    example: {
+      steps: ["Personal info", "Household", "Review"],
+      currentStep: 1
+    }
+  },
+  Header: {
+    props: import_zod.z.object({
+      variant: import_zod.z.enum(["basic", "extended"]).nullable(),
+      siteName: import_zod.z.string(),
+      siteUrl: import_zod.z.string().nullable(),
+      logoUrl: import_zod.z.string().nullable(),
+      logoAlt: import_zod.z.string().nullable(),
+      navItems: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string(),
+          current: import_zod.z.boolean().nullable(),
+          items: import_zod.z.array(
+            import_zod.z.object({
+              label: import_zod.z.string(),
+              href: import_zod.z.string()
+            })
+          ).nullable()
+        })
+      ).nullable(),
+      showSearch: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS site header with primary navigation. variant: basic (default) or extended (taller with logo). navItems: [{label, href, current?, items?}] \u2014 items creates a dropdown. showSearch adds a search bar.",
+    example: {
+      variant: "basic",
+      siteName: "Agency Name",
+      siteUrl: "/",
+      logoUrl: null,
+      logoAlt: null,
+      navItems: [
+        { label: "Home", href: "/", current: true, items: null },
+        { label: "About", href: "/about", current: false, items: null },
+        {
+          label: "Topics",
+          href: "/topics",
+          current: false,
+          items: [
+            { label: "Topic One", href: "/topics/one" },
+            { label: "Topic Two", href: "/topics/two" }
+          ]
+        }
+      ],
+      showSearch: false
+    }
+  },
+  SkipNav: {
+    props: import_zod.z.object({
+      href: import_zod.z.string().nullable(),
+      label: import_zod.z.string().nullable()
+    }),
+    description: "USWDS skip navigation link. Renders an off-screen anchor that appears on focus, letting keyboard users jump past repeated navigation. href defaults to '#main-content'.",
+    example: { href: "#main-content", label: "Skip to main content" }
+  },
+  SideNav: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string(),
+          current: import_zod.z.boolean().nullable(),
+          children: import_zod.z.array(
+            import_zod.z.object({
+              label: import_zod.z.string(),
+              href: import_zod.z.string(),
+              current: import_zod.z.boolean().nullable()
+            })
+          ).nullable()
+        })
+      ),
+      ariaLabel: import_zod.z.string().nullable()
+    }),
+    description: "USWDS side navigation. items: [{label, href, current?, children?}]. Mark the active page with current: true.",
+    example: {
+      ariaLabel: "Side navigation",
+      items: [
+        {
+          label: "Overview",
+          href: "/overview",
+          current: false,
+          children: null
+        },
+        {
+          label: "Getting started",
+          href: "/getting-started",
+          current: true,
+          children: [
+            {
+              label: "Installation",
+              href: "/getting-started/install",
+              current: false
+            },
+            {
+              label: "Configuration",
+              href: "/getting-started/config",
+              current: false
+            }
+          ]
+        }
+      ]
+    }
+  },
+  LanguageSelector: {
+    props: import_zod.z.object({
+      languages: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string(),
+          lang: import_zod.z.string(),
+          localLabel: import_zod.z.string().nullable()
+        })
+      ),
+      currentLang: import_zod.z.string().nullable()
+    }),
+    description: "USWDS language selector. languages: [{label, href, lang, localLabel?}]. currentLang: BCP-47 code of the active language (e.g. 'en').",
+    example: {
+      currentLang: "en",
+      languages: [
+        { label: "English", href: "/en", lang: "en", localLabel: null },
+        { label: "Spanish", href: "/es", lang: "es", localLabel: "Espa\xF1ol" },
+        { label: "French", href: "/fr", lang: "fr", localLabel: "Fran\xE7ais" }
+      ]
+    }
+  },
+  Link: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      href: import_zod.z.string(),
+      external: import_zod.z.boolean().nullable(),
+      variant: import_zod.z.enum(["default", "nav"]).nullable()
+    }),
+    events: ["press"],
+    description: "USWDS anchor link. external adds an external-link indicator. variant: default or nav (for navigation contexts).",
+    example: { label: "Learn more", href: "/about" }
+  },
+  InPageNavigation: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string()
+        })
+      ),
+      heading: import_zod.z.string().nullable()
+    }),
+    description: "USWDS in-page navigation with jump links to sections. items: [{label, href}] where href is an anchor like '#section-1'.",
+    example: {
+      heading: "On this page",
+      items: [
+        { label: "Introduction", href: "#introduction" },
+        { label: "Requirements", href: "#requirements" },
+        { label: "How to apply", href: "#how-to-apply" }
+      ]
+    }
+  },
+  Breadcrumb: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string().nullable()
+        })
+      )
+    }),
+    description: "USWDS breadcrumb navigation. items: array of {label, href?}. Last item is current page (no link).",
+    example: {
+      items: [
+        { label: "Home", href: "/" },
+        { label: "Components", href: "/components" },
+        { label: "Breadcrumb", href: null }
+      ]
+    }
+  },
+  // ==========================================================================
+  // Data Display Components
+  // ==========================================================================
+  Identifier: {
+    props: import_zod.z.object({
+      domain: import_zod.z.string(),
+      agencyName: import_zod.z.string(),
+      agencyUrl: import_zod.z.string().nullable(),
+      logoUrl: import_zod.z.string().nullable(),
+      logoAlt: import_zod.z.string().nullable(),
+      disclaimer: import_zod.z.string().nullable(),
+      links: import_zod.z.array(import_zod.z.object({ label: import_zod.z.string(), href: import_zod.z.string() })).nullable(),
+      showUsagov: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS agency identifier section. Shows domain, agency name, logo, required links, and USA.gov footer. Place at the bottom of .gov pages.",
+    example: {
+      domain: "agency.gov",
+      agencyName: "U.S. Department of Example",
+      agencyUrl: "/",
+      logoUrl: null,
+      logoAlt: null,
+      disclaimer: null,
+      links: [
+        { label: "About agency.gov", href: "/about" },
+        { label: "Accessibility statement", href: "/accessibility" },
+        { label: "Privacy policy", href: "/privacy" },
+        { label: "No FEAR Act data", href: "/no-fear" },
+        { label: "Office of the Inspector General", href: "/oig" },
+        { label: "Performance reports", href: "/performance" },
+        { label: "FOIA requests", href: "/foia" }
+      ],
+      showUsagov: true
+    }
+  },
+  GovBanner: {
+    props: import_zod.z.object({
+      tld: import_zod.z.enum([".gov", ".mil"]).nullable(),
+      expanded: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS government site banner ('An official website of the United States government'). tld: '.gov' (default) or '.mil'. expanded: show expanded explanation by default.",
+    example: { tld: ".gov" }
+  },
+  Collection: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          heading: import_zod.z.string(),
+          href: import_zod.z.string().nullable(),
+          description: import_zod.z.string().nullable(),
+          date: import_zod.z.string().nullable(),
+          dateLabel: import_zod.z.string().nullable(),
+          tags: import_zod.z.array(import_zod.z.string()).nullable(),
+          thumbnailUrl: import_zod.z.string().nullable(),
+          thumbnailAlt: import_zod.z.string().nullable()
+        })
+      )
+    }),
+    description: "USWDS collection list of content items. items: [{heading, href?, description?, date?, dateLabel?, tags?, thumbnailUrl?, thumbnailAlt?}].",
+    example: {
+      items: [
+        {
+          heading: "Article Title",
+          href: "/articles/1",
+          description: "A short description of the article.",
+          date: "2024-01-15",
+          dateLabel: "January 15, 2024",
+          tags: ["Policy", "Health"],
+          thumbnailUrl: null,
+          thumbnailAlt: null
+        }
+      ]
+    }
+  },
+  IconList: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          icon: import_zod.z.string(),
+          content: import_zod.z.string(),
+          color: import_zod.z.enum(["default", "success", "warning", "error", "info"]).nullable()
+        })
+      ),
+      title: import_zod.z.string().nullable(),
+      size: import_zod.z.enum(["sm", "lg", "xl", "2xl", "3xl"]).nullable()
+    }),
+    description: "USWDS icon list. items: [{icon, content, color?}]. icon is a USWDS icon name (e.g. 'check_circle', 'cancel', 'info'). size controls icon size.",
+    example: {
+      title: "Requirements",
+      items: [
+        {
+          icon: "check_circle",
+          content: "Requirement one is met.",
+          color: "success"
+        },
+        {
+          icon: "check_circle",
+          content: "Requirement two is met.",
+          color: "success"
+        },
+        {
+          icon: "cancel",
+          content: "Requirement three is not met.",
+          color: "error"
+        }
+      ]
+    }
+  },
+  Tooltip: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      content: import_zod.z.string(),
+      position: import_zod.z.enum(["top", "bottom", "left", "right"]).nullable()
+    }),
+    description: "USWDS tooltip shown on hover. label: the visible trigger text. content: tooltip text. position: top (default), bottom, left, right.",
+    example: {
+      label: "Hover me",
+      content: "This is a tooltip",
+      position: "top"
+    }
+  },
+  Table: {
+    props: import_zod.z.object({
+      columns: import_zod.z.array(import_zod.z.string()),
+      rows: import_zod.z.array(import_zod.z.array(import_zod.z.string())),
+      caption: import_zod.z.string().nullable(),
+      borderless: import_zod.z.boolean().nullable(),
+      striped: import_zod.z.boolean().nullable(),
+      compact: import_zod.z.boolean().nullable(),
+      scrollable: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS data table. columns: header labels. rows: 2D array of cell strings. borderless/striped/compact for styling variants.",
+    example: {
+      columns: ["Name", "Role", "Status"],
+      rows: [
+        ["Alice", "Admin", "Active"],
+        ["Bob", "User", "Inactive"]
+      ]
+    }
+  },
+  Heading: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      level: import_zod.z.enum(["h1", "h2", "h3", "h4", "h5", "h6"]).nullable()
+    }),
+    description: "USWDS heading text (h1\u2013h6) with usa-prose styling.",
+    example: { text: "Page Title", level: "h1" }
+  },
+  Text: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      variant: import_zod.z.enum(["body", "lead", "small", "code"]).nullable()
+    }),
+    description: "USWDS paragraph text. variant: body (default), lead, small, code.",
+    example: { text: "Supporting paragraph text." }
+  },
+  Alert: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string().nullable(),
+      message: import_zod.z.string(),
+      type: import_zod.z.enum(["info", "success", "warning", "error", "emergency"]).nullable(),
+      slim: import_zod.z.boolean().nullable(),
+      noIcon: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS alert banner. type: info (default), success, warning, error, emergency. slim for compact variant.",
+    example: {
+      heading: "Success",
+      message: "Your form has been submitted.",
+      type: "success"
+    }
+  },
+  SiteAlert: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string().nullable(),
+      message: import_zod.z.string(),
+      type: import_zod.z.enum(["info", "emergency"]).nullable(),
+      slim: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS site-wide alert banner for important announcements. type: info (default) or emergency.",
+    example: {
+      heading: "Official website of the United States government",
+      message: "Here's how you know this is a government site.",
+      type: "info"
+    }
+  },
+  Tag: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      big: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS tag/label badge. big for larger variant.",
+    example: { text: "New" }
+  },
+  SummaryBox: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string(),
+      items: import_zod.z.array(import_zod.z.string())
+    }),
+    description: "USWDS summary box with a heading and bullet list of key information.",
+    example: {
+      heading: "Key information",
+      items: ["Item one", "Item two", "Item three"]
+    }
+  },
+  ProcessList: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          heading: import_zod.z.string(),
+          content: import_zod.z.string()
+        })
+      )
+    }),
+    description: "USWDS numbered process list for step-by-step instructions. items: [{heading, content}].",
+    example: {
+      items: [
+        { heading: "Apply", content: "Submit your application online." },
+        { heading: "Review", content: "We review your application." },
+        { heading: "Approval", content: "Receive your decision letter." }
+      ]
+    }
+  },
+  // ==========================================================================
+  // Form Input Components
+  // ==========================================================================
+  Button: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      variant: import_zod.z.enum([
+        "default",
+        "secondary",
+        "accent-cool",
+        "accent-warm",
+        "base",
+        "outline",
+        "outline-inverse",
+        "big",
+        "unstyled"
+      ]).nullable(),
+      disabled: import_zod.z.boolean().nullable(),
+      type: import_zod.z.enum(["button", "submit", "reset"]).nullable()
+    }),
+    events: ["press"],
+    description: "USWDS button. variant: default (primary), secondary, accent-cool, accent-warm, base, outline, outline-inverse, big, unstyled.",
+    example: { label: "Submit", variant: "default" }
+  },
+  ButtonGroup: {
+    props: import_zod.z.object({
+      buttons: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string(),
+          variant: import_zod.z.enum(["default", "secondary", "outline"]).nullable()
+        })
+      ),
+      segmented: import_zod.z.boolean().nullable()
+    }),
+    events: ["press"],
+    description: "USWDS button group. buttons: [{label, value, variant?}]. segmented renders as a connected group.",
+    example: {
+      buttons: [
+        { label: "Back", value: "back", variant: "outline" },
+        { label: "Continue", value: "continue", variant: "default" }
+      ]
+    }
+  },
+  Input: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      type: import_zod.z.enum(["text", "email", "password", "number", "search", "tel", "url"]).nullable(),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      disabled: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["submit", "focus", "blur"],
+    description: "USWDS text input. Use { $bindState } on value for two-way binding. hint adds helper text below label. Use checks for validation.",
+    example: {
+      label: "Email address",
+      name: "email",
+      type: "email",
+      hint: "e.g. name@example.gov"
+    }
+  },
+  Textarea: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      rows: import_zod.z.number().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    description: "USWDS multi-line textarea. Use { $bindState } on value for binding. hint adds helper text below label.",
+    example: { label: "Message", name: "message", rows: 4 }
+  },
+  Select: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(
+        import_zod.z.union([
+          import_zod.z.string(),
+          import_zod.z.object({ label: import_zod.z.string(), value: import_zod.z.string() })
+        ])
+      ),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS select dropdown. options: array of strings or {label, value} objects. Use { $bindState } on value for binding.",
+    example: {
+      label: "State",
+      name: "state",
+      options: ["Alabama", "Alaska", "Arizona"]
+    }
+  },
+  Checkbox: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      checked: import_zod.z.boolean().nullable(),
+      tile: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS checkbox. Use { $bindState } on checked for binding. tile renders as a large tile variant.",
+    example: { label: "I agree to the terms", name: "terms" }
+  },
+  CheckboxGroup: {
+    props: import_zod.z.object({
+      legend: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string(),
+          hint: import_zod.z.string().nullable()
+        })
+      ),
+      tile: import_zod.z.boolean().nullable(),
+      values: import_zod.z.array(import_zod.z.string()).nullable()
+    }),
+    events: ["change"],
+    description: "USWDS group of checkboxes in a fieldset. Use { $bindState } on values for selected values array.",
+    example: {
+      legend: "Select all that apply",
+      name: "interests",
+      options: [
+        { label: "Technology", value: "tech", hint: null },
+        { label: "Science", value: "science", hint: null }
+      ]
+    }
+  },
+  Radio: {
+    props: import_zod.z.object({
+      legend: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string(),
+          hint: import_zod.z.string().nullable()
+        })
+      ),
+      tile: import_zod.z.boolean().nullable(),
+      value: import_zod.z.string().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS radio button group. Use { $bindState } on value for binding. tile renders as tile variant.",
+    example: {
+      legend: "Select an option",
+      name: "option",
+      options: [
+        { label: "Yes", value: "yes", hint: null },
+        { label: "No", value: "no", hint: null }
+      ]
+    }
+  },
+  FileInput: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      accept: import_zod.z.string().nullable(),
+      multiple: import_zod.z.boolean().nullable(),
+      required: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS file input. accept: MIME types (e.g. '.pdf,.doc'). multiple allows selecting multiple files.",
+    example: {
+      label: "Upload document",
+      name: "document",
+      hint: "Accepted formats: PDF, DOC",
+      accept: ".pdf,.doc,.docx"
+    }
+  },
+  Search: {
+    props: import_zod.z.object({
+      label: import_zod.z.string().nullable(),
+      placeholder: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      size: import_zod.z.enum(["small", "medium", "big"]).nullable()
+    }),
+    events: ["submit", "change"],
+    description: "USWDS search bar. Use { $bindState } on value for the input value. size: small, medium (default), big.",
+    example: { placeholder: "Search...", size: "medium" }
+  },
+  RangeInput: {
+    props: import_zod.z.object({
+      label: import_zod.z.string().nullable(),
+      name: import_zod.z.string(),
+      min: import_zod.z.number().nullable(),
+      max: import_zod.z.number().nullable(),
+      step: import_zod.z.number().nullable(),
+      value: import_zod.z.number().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS range slider input. Use { $bindState } on value for binding.",
+    example: { label: "Select a value", name: "range", min: 0, max: 100 }
+  },
+  DateInputGroup: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      monthValue: import_zod.z.string().nullable(),
+      dayValue: import_zod.z.string().nullable(),
+      yearValue: import_zod.z.string().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS three-field date input (separate month, day, year inputs). Use { $bindState } on monthValue/dayValue/yearValue for individual field bindings.",
+    example: {
+      label: "Date of birth",
+      name: "dob",
+      hint: "For example: January 19 2000"
+    }
+  },
+  DateRangePicker: {
+    props: import_zod.z.object({
+      startLabel: import_zod.z.string(),
+      endLabel: import_zod.z.string(),
+      startName: import_zod.z.string(),
+      endName: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      startValue: import_zod.z.string().nullable(),
+      endValue: import_zod.z.string().nullable(),
+      minDate: import_zod.z.string().nullable(),
+      maxDate: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS date range picker with start and end date inputs. Values are ISO date strings (YYYY-MM-DD). Use { $bindState } on startValue/endValue.",
+    example: {
+      startLabel: "Start date",
+      endLabel: "End date",
+      startName: "start_date",
+      endName: "end_date",
+      hint: "mm/dd/yyyy"
+    }
+  },
+  InputMask: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      preset: import_zod.z.enum(["phone", "zip", "zip+4", "ssn", "custom"]).nullable(),
+      pattern: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change", "blur"],
+    description: "USWDS input with automatic formatting mask. preset: phone '(___) ___-____', zip '_____', zip+4 '_____-____', ssn '___-__-____'. Or supply a custom pattern where '_' = digit.",
+    example: {
+      label: "Phone number",
+      name: "phone",
+      preset: "phone",
+      hint: "(___) ___-____"
+    }
+  },
+  Password: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change", "blur"],
+    description: "USWDS password input with show/hide toggle button. Use { $bindState } on value for binding. Supports validation checks.",
+    example: {
+      label: "Password",
+      name: "password",
+      hint: "Must be at least 12 characters"
+    }
+  },
+  ComboBox: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(
+        import_zod.z.union([
+          import_zod.z.string(),
+          import_zod.z.object({ label: import_zod.z.string(), value: import_zod.z.string() })
+        ])
+      ),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS combo box \u2014 a searchable/filterable select dropdown. options: strings or {label, value}. Use { $bindState } on value for binding.",
+    example: {
+      label: "Select a fruit",
+      name: "fruit",
+      options: ["Apple", "Banana", "Cherry", "Date", "Elderberry"],
+      placeholder: "- Select -"
+    }
+  },
+  DatePicker: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      minDate: import_zod.z.string().nullable(),
+      maxDate: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS date picker. value/minDate/maxDate are ISO date strings (YYYY-MM-DD). Use { $bindState } on value for binding.",
+    example: {
+      label: "Date of birth",
+      name: "dob",
+      hint: "mm/dd/yyyy"
+    }
+  },
+  TimePicker: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      minTime: import_zod.z.string().nullable(),
+      maxTime: import_zod.z.string().nullable(),
+      step: import_zod.z.number().nullable(),
+      required: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS time picker. value/minTime/maxTime use 'HH:MM' 24-hour format. step is in minutes (default 30). Use { $bindState } on value.",
+    example: {
+      label: "Appointment time",
+      name: "appt_time",
+      hint: "Select a time",
+      step: 30
+    }
+  },
+  CharacterCount: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      maxLength: import_zod.z.number(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      multiline: import_zod.z.boolean().nullable(),
+      rows: import_zod.z.number().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS input or textarea with a live character count indicator. maxLength: character limit. multiline: renders as textarea. Use { $bindState } on value.",
+    example: {
+      label: "Brief description",
+      name: "description",
+      maxLength: 150,
+      hint: "Enter a short summary",
+      multiline: true
+    }
+  },
+  // ==========================================================================
+  // Overlay / Modal Components
+  // ==========================================================================
+  Modal: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string(),
+      description: import_zod.z.string().nullable(),
+      openPath: import_zod.z.string(),
+      large: import_zod.z.boolean().nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS modal dialog. Set openPath to a boolean state path. Use setState to toggle open/close.",
+    example: {
+      heading: "Are you sure?",
+      description: "This action cannot be undone.",
+      openPath: "/modal/open"
+    }
+  },
+  // ==========================================================================
+  // Additional Display Components
+  // ==========================================================================
+  Icon: {
+    props: import_zod.z.object({
+      name: import_zod.z.string(),
+      size: import_zod.z.enum(["sm", "md", "lg", "xl", "2xl", "3xl"]).nullable(),
+      color: import_zod.z.string().nullable(),
+      ariaLabel: import_zod.z.string().nullable()
+    }),
+    description: "USWDS standalone SVG icon from the USWDS icon set. name: USWDS icon name (e.g. 'check', 'close', 'search', 'arrow_forward'). size: sm\u20133xl. color: a USWDS text-color utility class (e.g. 'text-primary').",
+    example: { name: "check_circle", size: "lg", color: "text-green" }
+  },
+  InputGroup: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      type: import_zod.z.enum(["text", "email", "password", "number", "search", "tel", "url"]).nullable(),
+      prefix: import_zod.z.string().nullable(),
+      suffix: import_zod.z.string().nullable(),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      disabled: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change", "blur"],
+    description: "USWDS input group \u2014 a text input with an optional prefix and/or suffix add-on (e.g. currency symbol, unit label). Use { $bindState } on value for two-way binding.",
+    example: {
+      label: "Amount",
+      name: "amount",
+      prefix: "$",
+      suffix: ".00",
+      type: "number",
+      placeholder: "0"
+    }
+  },
+  List: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(import_zod.z.string()),
+      variant: import_zod.z.enum(["unordered", "ordered", "unstyled"]).nullable()
+    }),
+    description: "USWDS list. variant: unordered (default, bullet list), ordered (numbered list), unstyled (no bullets/numbers).",
+    example: {
+      variant: "unordered",
+      items: ["First item", "Second item", "Third item"]
+    }
+  },
+  ValidationChecklist: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          checked: import_zod.z.boolean().nullable()
+        })
+      ),
+      heading: import_zod.z.string().nullable()
+    }),
+    description: "USWDS validation checklist (usa-checklist). Displays a list of password/input requirements with checked/unchecked states.",
+    example: {
+      heading: "Password must contain:",
+      items: [
+        { label: "At least 12 characters", checked: true },
+        { label: "At least one uppercase letter", checked: false },
+        { label: "At least one number", checked: false }
+      ]
+    }
+  },
+  Prose: {
+    props: import_zod.z.object({
+      element: import_zod.z.enum(["div", "article", "section", "main"]).nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS prose typography wrapper (usa-prose). Applies USWDS text styles \u2014 headings, paragraphs, lists, links, blockquotes, code blocks \u2014 to nested content. element: div (default), article, section, or main.",
+    example: { element: "article" }
+  },
+  Hero: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string(),
+      eyebrow: import_zod.z.string().nullable(),
+      body: import_zod.z.string().nullable(),
+      backgroundUrl: import_zod.z.string().nullable(),
+      ariaLabel: import_zod.z.string().nullable()
+    }),
+    description: "USWDS hero section \u2014 full-width landing page callout with optional background image. heading: headline text. eyebrow: smaller label above the headline. body: supporting paragraph. backgroundUrl: CSS background image URL (user-supplied).",
+    example: {
+      heading: "A tagline that explains your agency\u2019s focus",
+      eyebrow: null,
+      body: "Support the text about your agency with a brief, relevant sentence or two.",
+      backgroundUrl: null,
+      ariaLabel: "Introduction"
+    }
+  },
+  GraphicList: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string().nullable(),
+      items: import_zod.z.array(
+        import_zod.z.object({
+          imageUrl: import_zod.z.string().nullable(),
+          imageAlt: import_zod.z.string().nullable(),
+          heading: import_zod.z.string(),
+          content: import_zod.z.string()
+        })
+      )
+    }),
+    description: "USWDS graphic list \u2014 a responsive grid of image+text media blocks for showcasing values, programs, or features. items: [{imageUrl?, imageAlt?, heading, content}].",
+    example: {
+      heading: null,
+      items: [
+        {
+          imageUrl: null,
+          imageAlt: null,
+          heading: "Graphic heading",
+          content: "A short description of what this item represents."
+        },
+        {
+          imageUrl: null,
+          imageAlt: null,
+          heading: "Graphic heading",
+          content: "A short description of what this item represents."
+        }
+      ]
+    }
+  },
+  EmbedContainer: {
+    props: import_zod.z.object({
+      src: import_zod.z.string(),
+      title: import_zod.z.string(),
+      ratio: import_zod.z.enum(["16x9", "4x3"]).nullable()
+    }),
+    description: "USWDS embed container \u2014 a responsive aspect-ratio wrapper for iframe embeds such as YouTube videos. ratio: 16x9 (default) or 4x3. Provide a descriptive title for accessibility.",
+    example: {
+      src: "https://www.youtube.com/embed/example",
+      title: "An example video",
+      ratio: "16x9"
+    }
+  },
+  Form: {
+    props: import_zod.z.object({
+      large: import_zod.z.boolean().nullable()
+    }),
+    slots: ["default"],
+    events: ["submit"],
+    description: "USWDS form container (usa-form). Applies USWDS form layout \u2014 constrained max-width and consistent label/input spacing \u2014 to nested form elements. large: wider form variant. Wrap Input, Select, Checkbox, Radio, and other form components as children.",
+    example: { large: false }
+  },
+  Section: {
+    props: import_zod.z.object({
+      title: import_zod.z.string().nullable(),
+      text: import_zod.z.string().nullable(),
+      variant: import_zod.z.enum(["default", "light", "dark"]).nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS page section (usa-section). Applies consistent vertical padding to a full-width page section inside a grid-container. variant: default, light (lighter background), dark (darker background). title and text are optional \u2014 use children slots for richer content.",
+    example: {
+      title: "Section title",
+      text: "Supporting section description text.",
+      variant: null
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  uswdsComponentDefinitions
+});
+//# sourceMappingURL=catalog.js.map