@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/two-column-section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/sections/two-column-section/two-column-section.tsx"],"names":["twMerge"],"mappings":";;;;;;AAKO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAOA,MAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACMA,IAAM,2BAA2B,EAAA,CAAG;AAAA;AAAA,EAEnC,IAAA,EAAM;AAAA,IACL,QAAA;AAAA;AAAA,IAEA,mBAAA;AAAA;AAAA,IAEA,mBAAA;AAAA;AAAA,IAEA;AAAA,GACD;AAAA,EACA,QAAA,EAAU;AAAA,IACT,WAAA,EAAa;AAAA,MACZ,IAAA,EAAM,cAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR;AAAA,IACA,MAAA,EAAQ;AAAA,MACP,UAAA,EAAY,EAAA;AAAA,MACZ,KAAA,EAAO;AAAA;AACR,GACD;AAAA,EACA,eAAA,EAAiB;AAAA,IAChB,WAAA,EAAa,MAAA;AAAA,IACb,MAAA,EAAQ;AAAA;AAEV,CAAC;AA8CD,IAAM,gBAAA,GAAyB,KAAA,CAAA,UAAA;AAAA,EAC9B,CACC;AAAA,IACC,SAAA;AAAA,IACA,WAAA,GAAc,MAAA;AAAA,IACd,MAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEJ,GAAA,KACI;AACJ,IAAA,uBACC,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAW,wBAAA,CAAyB;AAAA,UACnC,WAAA;AAAA,UACA,MAAA;AAAA,UACA,KAAA,EAAO;AAAA,SACP,CAAA;AAAA,QACA,GAAG,KAAA;AAAA,QAGJ,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,SAAA,EAAW,EAAA;AAAA,cACV,gBAAA;AAAA,cACA,WAAA,KAAgB,SAAS,iBAAA,GAAoB,iBAAA;AAAA;AAAA,cAE7C,yBAAA;AAAA,cACA,MAAA,KAAW,UAAU,gBAAA,GAAmB;AAAA,aACzC;AAAA,YAGA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,IAAA;AAAA,gBAAA;AAAA,kBACA,SAAA,EAAW,EAAA;AAAA,oBACV,8BAAA;AAAA,oBACA,WAAA,KAAgB,SAAS,eAAA,GAAkB,eAAA;AAAA;AAAA,oBAE3C,WAAW,OAAA,IAAW;AAAA,mBACvB;AAAA,kBAEC,QAAA,EAAA;AAAA;AAAA,eACF;AAAA,8BAGA,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACA,SAAA,EAAW,EAAA;AAAA,oBACV,sBAAA;AAAA,oBACA,WAAW,OAAA,IAAW;AAAA,mBACvB;AAAA,kBAGC,QAAA,EAAA;AAAA,oBAAA,IAAA,oBACA,GAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACA,SAAA,EAAW,EAAA;AAAA,0BACV,uBAAA;AAAA,0BACA,WAAA,KAAgB,SAAS,eAAA,GAAkB;AAAA,yBAC5C;AAAA,wBAEC,iBAAO,IAAA,KAAS,QAAA,mBAAW,GAAA,CAAC,GAAA,EAAA,EAAG,gBAAK,CAAA,GAAO;AAAA;AAAA,qBAC7C;AAAA,oCAID,GAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACA,SAAA,EAAW,EAAA;AAAA,0BACV,gDAAA;AAAA,0BACA,WAAA,KAAgB,SAAS,eAAA,GAAkB;AAAA,yBAC5C;AAAA,wBAEC;AAAA;AAAA;AACF;AAAA;AAAA;AACD;AAAA;AAAA;AACD;AAAA,KACD;AAAA,EAEF;AACD;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","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"]}

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

@@ -0,0 +1,141 @@
+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';
+
+declare const usGovBannerVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    text: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}>, {
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    text: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    text: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+interface USGovBannerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof usGovBannerVariants> {
+    /**
+     * 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.
+ *
+ * Variants:
+ * - default: Light background with dark text (for light pages)
+ * - inverted: Transparent background with white text/flag (for dark backgrounds/heroes)
+ *
+ * @example
+ * ```tsx
+ * // Default (light)
+ * <USGovBanner />
+ *
+ * // Inverted (for dark backgrounds)
+ * <USGovBanner variant="inverted" />
+ * ```
+ */
+declare const USGovBanner: React.ForwardRefExoticComponent<USGovBannerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { USGovBanner, type USGovBannerProps, usGovBannerVariants };

package/dist/us-gov-banner/index.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { tv } from 'tailwind-variants';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/organisms/us-gov-banner/us-gov-banner.tsx
+var usGovBannerVariants = tv({
+  slots: {
+    root: "flex w-full items-center justify-center py-12",
+    content: "flex items-center gap-8",
+    text: "text-[11px] leading-[13px] tracking-[0.17px]"
+  },
+  variants: {
+    variant: {
+      default: {
+        root: "bg-gray-50",
+        content: "opacity-70",
+        text: "text-gray-900"
+      },
+      inverted: {
+        root: "bg-transparent",
+        content: "opacity-70",
+        text: "text-text-inverted"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var USGovBanner = React.forwardRef(
+  ({
+    className,
+    variant,
+    flagIcon,
+    text = "An official website of the United States government",
+    ...props
+  }, ref) => {
+    const styles = usGovBannerVariants({ variant });
+    return /* @__PURE__ */ jsx("div", { ref, className: styles.root({ class: className }), ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.content(), children: [
+      flagIcon ?? /* @__PURE__ */ jsx(MonoUSFlag, {}),
+      /* @__PURE__ */ jsx("p", { className: styles.text(), children: text })
+    ] }) });
+  }
+);
+USGovBanner.displayName = "USGovBanner";
+function MonoUSFlag() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "12",
+      viewBox: "0 0 16 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M0 0H16V12H0V0Z", fill: "currentColor", fillOpacity: "0.1" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M0 0H16V0.923077H0V0ZM0 1.84615H16V2.76923H0V1.84615ZM0 3.69231H16V4.61538H0V3.69231ZM0 5.53846H16V6.46154H0V5.53846ZM0 7.38462H16V8.30769H0V7.38462ZM0 9.23077H16V10.1538H0V9.23077ZM0 11.0769H16V12H0V11.0769Z",
+            fill: "currentColor",
+            fillOpacity: "0.8"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M0 0H8V6.46154H0V0Z", fill: "currentColor", fillOpacity: "0.6" })
+      ]
+    }
+  );
+}
+
+export { USGovBanner, usGovBannerVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/us-gov-banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/organisms/us-gov-banner/us-gov-banner.tsx"],"names":[],"mappings":";;;;;AAGA,IAAM,sBAAsB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACN,IAAA,EAAM,+CAAA;AAAA,IACN,OAAA,EAAS,yBAAA;AAAA,IACT,IAAA,EAAM;AAAA,GACP;AAAA,EACA,QAAA,EAAU;AAAA,IACT,OAAA,EAAS;AAAA,MACR,OAAA,EAAS;AAAA,QACR,IAAA,EAAM,YAAA;AAAA,QACN,OAAA,EAAS,YAAA;AAAA,QACT,IAAA,EAAM;AAAA,OACP;AAAA,MACA,QAAA,EAAU;AAAA,QACT,IAAA,EAAM,gBAAA;AAAA,QACN,OAAA,EAAS,YAAA;AAAA,QACT,IAAA,EAAM;AAAA;AACP;AACD,GACD;AAAA,EACA,eAAA,EAAiB;AAAA,IAChB,OAAA,EAAS;AAAA;AAEX,CAAC;AAkCD,IAAM,WAAA,GAAoB,KAAA,CAAA,UAAA;AAAA,EACzB,CACC;AAAA,IACC,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA,GAAO,qDAAA;AAAA,IACP,GAAG;AAAA,KAEJ,GAAA,KACI;AACJ,IAAA,MAAM,MAAA,GAAS,mBAAA,CAAoB,EAAE,OAAA,EAAS,CAAA;AAE9C,IAAA,2BACE,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,MAAA,CAAO,IAAA,CAAK,EAAE,KAAA,EAAO,SAAA,EAAW,CAAA,EAAI,GAAG,KAAA,EAChE,QAAA,kBAAA,IAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,SAAQ,EAC7B,QAAA,EAAA;AAAA,MAAA,QAAA,wBAAa,UAAA,EAAA,EAAW,CAAA;AAAA,0BACxB,GAAA,EAAA,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,IAAS,QAAA,EAAA,IAAA,EAAK;AAAA,KAAA,EACpC,CAAA,EACD,CAAA;AAAA,EAEF;AACD;AACA,WAAA,CAAY,WAAA,GAAc,aAAA;AAE1B,SAAS,UAAA,GAAa;AACrB,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,IAAA;AAAA,MACP,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,aAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAK,CAAA,EAAE,iBAAA,EAAkB,IAAA,EAAK,cAAA,EAAe,aAAY,KAAA,EAAM,CAAA;AAAA,wBAChE,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACA,CAAA,EAAE,kNAAA;AAAA,YACF,IAAA,EAAK,cAAA;AAAA,YACL,WAAA,EAAY;AAAA;AAAA,SACb;AAAA,4BACC,MAAA,EAAA,EAAK,CAAA,EAAE,uBAAsB,IAAA,EAAK,cAAA,EAAe,aAAY,KAAA,EAAM;AAAA;AAAA;AAAA,GACrE;AAEF","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst usGovBannerVariants = tv({\n\tslots: {\n\t\troot: \"flex w-full items-center justify-center py-12\",\n\t\tcontent: \"flex items-center gap-8\",\n\t\ttext: \"text-[11px] leading-[13px] tracking-[0.17px]\",\n\t},\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: {\n\t\t\t\troot: \"bg-gray-50\",\n\t\t\t\tcontent: \"opacity-70\",\n\t\t\t\ttext: \"text-gray-900\",\n\t\t\t},\n\t\t\tinverted: {\n\t\t\t\troot: \"bg-transparent\",\n\t\t\t\tcontent: \"opacity-70\",\n\t\t\t\ttext: \"text-text-inverted\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\nexport interface USGovBannerProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof usGovBannerVariants> {\n\t/**\n\t * Custom flag icon element. Defaults to a US flag SVG.\n\t */\n\tflagIcon?: React.ReactNode;\n\t/**\n\t * Banner text content\n\t * @default \"An official website of the United States government\"\n\t */\n\ttext?: string;\n}\n\n/**\n * US Government official website banner.\n * Displays the official government website notice with flag icon.\n * Commonly placed at the very top of government websites.\n *\n * Variants:\n * - default: Light background with dark text (for light pages)\n * - inverted: Transparent background with white text/flag (for dark backgrounds/heroes)\n *\n * @example\n * ```tsx\n * // Default (light)\n * <USGovBanner />\n *\n * // Inverted (for dark backgrounds)\n * <USGovBanner variant=\"inverted\" />\n * ```\n */\nconst USGovBanner = React.forwardRef<HTMLDivElement, USGovBannerProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tflagIcon,\n\t\t\ttext = \"An official website of the United States government\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst styles = usGovBannerVariants({ variant });\n\n\t\treturn (\n\t\t\t<div ref={ref} className={styles.root({ class: className })} {...props}>\n\t\t\t\t<div className={styles.content()}>\n\t\t\t\t\t{flagIcon ?? <MonoUSFlag />}\n\t\t\t\t\t<p className={styles.text()}>{text}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nUSGovBanner.displayName = \"USGovBanner\";\n\nfunction MonoUSFlag() {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"16\"\n\t\t\theight=\"12\"\n\t\t\tviewBox=\"0 0 16 12\"\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<path d=\"M0 0H16V12H0V0Z\" fill=\"currentColor\" fillOpacity=\"0.1\" />\n\t\t\t<path\n\t\t\t\td=\"M0 0H16V0.923077H0V0ZM0 1.84615H16V2.76923H0V1.84615ZM0 3.69231H16V4.61538H0V3.69231ZM0 5.53846H16V6.46154H0V5.53846ZM0 7.38462H16V8.30769H0V7.38462ZM0 9.23077H16V10.1538H0V9.23077ZM0 11.0769H16V12H0V11.0769Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tfillOpacity=\"0.8\"\n\t\t\t/>\n\t\t\t<path d=\"M0 0H8V6.46154H0V0Z\" fill=\"currentColor\" fillOpacity=\"0.6\" />\n\t\t</svg>\n\t);\n}\n\nexport { USGovBanner, usGovBannerVariants };\n"]}

package/dist/use-captions-AkKlJhov.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Represents a single caption cue parsed from VTT.
+ */
+interface CaptionCue {
+    /** Unique identifier for the cue */
+    id: string;
+    /** Start time in seconds */
+    startTime: number;
+    /** End time in seconds */
+    endTime: number;
+    /** Caption text content */
+    text: string;
+}
+interface UseCaptionsOptions {
+    /** VTT file URL to fetch */
+    src?: string;
+    /** Pre-loaded VTT content string */
+    content?: string;
+    /** Strip VTT formatting tags from caption text */
+    stripTags?: boolean;
+    /** Current playback time in seconds (alternative to setCurrentTime) */
+    currentTime?: number;
+}
+interface UseCaptionsReturn {
+    /** All parsed caption cues */
+    cues: CaptionCue[];
+    /** Currently active cue based on current time */
+    activeCue: CaptionCue | null;
+    /** Update the current playback time to get active cue */
+    setCurrentTime: (time: number) => void;
+    /** Loading state */
+    isLoading: boolean;
+    /** Error state */
+    error: Error | null;
+}
+/**
+ * Hook for parsing VTT captions and tracking the active cue.
+ *
+ * @param options - Caption source options
+ * @returns Parsed cues, active cue, and state
+ *
+ * @example
+ * ```tsx
+ * function VideoPlayer() {
+ *   const videoRef = React.useRef<HTMLVideoElement>(null);
+ *   const { activeCue, setCurrentTime } = useCaptions({
+ *     src: '/captions.vtt',
+ *   });
+ *
+ *   // Sync with video time
+ *   React.useEffect(() => {
+ *     const video = videoRef.current;
+ *     if (!video) return;
+ *
+ *     const handleTimeUpdate = () => setCurrentTime(video.currentTime);
+ *     video.addEventListener('timeupdate', handleTimeUpdate);
+ *     return () => video.removeEventListener('timeupdate', handleTimeUpdate);
+ *   }, [setCurrentTime]);
+ *
+ *   return (
+ *     <div>
+ *       <video ref={videoRef} src="/video.mp4" />
+ *       {activeCue && <div className="caption">{activeCue.text}</div>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useCaptions(options?: UseCaptionsOptions): UseCaptionsReturn;
+
+export { type CaptionCue as C, useCaptions as u };

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+import * as tailwind_variants from 'tailwind-variants';
+export { cnBase as twMerge } from 'tailwind-variants';
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): tailwind_variants.CnReturn;
+
+export { cn };

package/dist/utils/index.js

@@ -0,0 +1,12 @@
+import { clsx } from 'clsx';
+import { cnBase } from 'tailwind-variants';
+export { cnBase as twMerge } from 'tailwind-variants';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+
+export { cn };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts"],"names":["twMerge"],"mappings":";;;;;AAKO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAOA,MAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B","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"]}

package/dist/video-dialog/index.d.ts

@@ -0,0 +1,106 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+import { BlurredVideoBackdropProps } from '../blurred-video-backdrop/index.js';
+import { V as VideoPlayerProps } from '../video-player-qxf-BURH.js';
+
+/**
+ * Video dialog container variants.
+ * Uses fixed positioning to cover the viewport.
+ */
+declare const videoDialogVariants: 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>>;
+/**
+ * Close button variants.
+ */
+declare const closeButtonVariants: tailwind_variants.TVReturnType<{
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, {
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}>, {
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, {
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Video container variants.
+ * Expands to fill viewport, constrained by height (maintains aspect ratio).
+ */
+declare const videoContainerVariants: 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 VideoDialogProps extends Omit<VideoPlayerProps, "videoRef" | "className"> {
+    /** Trigger element that opens the dialog */
+    trigger: React.ReactNode;
+    /** Blur intensity for backdrop (default: high) */
+    blur?: BlurredVideoBackdropProps["blur"];
+    /** Gradient overlay for backdrop (default: vignette) */
+    overlay?: BlurredVideoBackdropProps["overlay"];
+    /** Backdrop opacity (default: 0.6) */
+    backdropOpacity?: number;
+    /** Whether to show close button (default: true) */
+    showClose?: boolean;
+    /** Close button position (default: top-right) */
+    closePosition?: "top-right" | "top-left";
+    /** Video player rounded corners (default: lg) */
+    rounded?: VideoPlayerProps["rounded"];
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the dialog container */
+    className?: string;
+}
+/**
+ * VideoDialog - Fullscreen video modal with blurred video backdrop.
+ *
+ * Creates an immersive video viewing experience where the blurred video
+ * serves as the modal backdrop, with the main video centered on top.
+ * Based on the DGA modal pattern.
+ *
+ * Features:
+ * - Blurred video backdrop that syncs with main video
+ * - Configurable blur intensity and gradient overlays
+ * - Automatic play/pause when dialog opens/closes
+ * - HLS streaming support via Cloudflare Stream
+ * - Accessible dialog with focus trap and escape key handling
+ *
+ * @example
+ * ```tsx
+ * <VideoDialog
+ *   trigger={<Button>Watch Video</Button>}
+ *   cloudflare={{ videoId: "abc123", customerCode: "xyz789" }}
+ *   blur="high"
+ *   overlay="vignette"
+ * />
+ * ```
+ */
+declare const VideoDialog: React.ForwardRefExoticComponent<VideoDialogProps & React.RefAttributes<HTMLDivElement>>;
+
+export { VideoDialog, type VideoDialogProps, closeButtonVariants, videoContainerVariants, videoDialogVariants };