@mikenotthepope/substrateui 0.1.1 → 0.1.2

package/dist/index.mjs

@@ -3271,30 +3271,58 @@ import * as React40 from "react";
 // components/ThemeProvider.tsx
 import { createContext as createContext3, useContext as useContext3, useEffect, useState as useState2, useCallback, useMemo as useMemo2 } from "react";
 import { jsx as jsx43 } from "react/jsx-runtime";
+var VALID_THEMES = ["light", "dark", "system"];
+var COLOR_THEMES = ["blue", "plum", "plum-trio"];
 var ThemeContext = createContext3(void 0);
 var STORAGE_KEY = "substrateui-theme";
+var COLOR_STORAGE_KEY = "substrateui-color-theme";
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
+function readStoredTheme(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const stored = localStorage.getItem(key);
+  return VALID_THEMES.includes(stored) ? stored : fallback;
+}
+function readStoredColorTheme(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const stored = localStorage.getItem(key);
+  return COLOR_THEMES.includes(stored != null ? stored : "") ? stored : fallback;
+}
 function applyClass(resolved) {
   document.documentElement.classList.remove("light", "dark");
   document.documentElement.classList.add(resolved);
 }
+function applyColorTheme(colorTheme) {
+  for (const t of COLOR_THEMES) {
+    document.documentElement.classList.remove(`theme-${t}`);
+  }
+  if (colorTheme !== "blue") {
+    document.documentElement.classList.add(`theme-${colorTheme}`);
+  }
+}
 function ThemeProvider({
   children,
   defaultTheme = "system",
-  storageKey = STORAGE_KEY
+  defaultColorTheme = "blue",
+  storageKey = STORAGE_KEY,
+  colorStorageKey = COLOR_STORAGE_KEY
 }) {
-  const [theme, setThemeState] = useState2(() => {
-    if (typeof window === "undefined") return defaultTheme;
-    return localStorage.getItem(storageKey) || defaultTheme;
-  });
+  const [theme, setThemeState] = useState2(
+    () => readStoredTheme(storageKey, defaultTheme)
+  );
+  const [colorTheme, setColorThemeState] = useState2(
+    () => readStoredColorTheme(colorStorageKey, defaultColorTheme)
+  );
   const [systemTheme, setSystemTheme] = useState2(getSystemTheme);
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   useEffect(() => {
     applyClass(resolvedTheme);
   }, [resolvedTheme]);
+  useEffect(() => {
+    applyColorTheme(colorTheme);
+  }, [colorTheme]);
   useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => {
@@ -3303,6 +3331,23 @@ function ThemeProvider({
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      var _a;
+      if (e.key === storageKey) {
+        setThemeState(
+          VALID_THEMES.includes(e.newValue) ? e.newValue : defaultTheme
+        );
+      }
+      if (e.key === colorStorageKey) {
+        setColorThemeState(
+          COLOR_THEMES.includes((_a = e.newValue) != null ? _a : "") ? e.newValue : defaultColorTheme
+        );
+      }
+    };
+    window.addEventListener("storage", handler);
+    return () => window.removeEventListener("storage", handler);
+  }, [storageKey, colorStorageKey, defaultTheme, defaultColorTheme]);
   const setTheme = useCallback(
     (newTheme) => {
       localStorage.setItem(storageKey, newTheme);
@@ -3310,9 +3355,16 @@ function ThemeProvider({
     },
     [storageKey]
   );
+  const setColorTheme = useCallback(
+    (newColorTheme) => {
+      localStorage.setItem(colorStorageKey, newColorTheme);
+      setColorThemeState(newColorTheme);
+    },
+    [colorStorageKey]
+  );
   const value = useMemo2(
-    () => ({ theme, resolvedTheme, setTheme }),
-    [theme, resolvedTheme, setTheme]
+    () => ({ theme, resolvedTheme, setTheme, colorTheme, setColorTheme, colorThemes: COLOR_THEMES }),
+    [theme, resolvedTheme, setTheme, colorTheme, setColorTheme]
   );
   return /* @__PURE__ */ jsx43(ThemeContext.Provider, { value, children });
 }
@@ -5836,6 +5888,83 @@ function ThemeToggle(_a) {
   );
 }
 
+// components/ColorThemeToggle.tsx
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { jsx as jsx65, jsxs as jsxs33 } from "react/jsx-runtime";
+var subscribe2 = () => () => {
+};
+var getSnapshot2 = () => true;
+var getServerSnapshot2 = () => false;
+var COLOR_SWATCHES = {
+  blue: "#5294FF",
+  plum: "#B254CF",
+  "plum-trio": "#B254CF"
+};
+var COLOR_LABELS = {
+  blue: "Blue",
+  plum: "Plum",
+  "plum-trio": "Plum Trio"
+};
+function ColorThemeToggle(_a) {
+  var _b = _a, {
+    variant = "ghost",
+    size = "md",
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "className"
+  ]);
+  const { colorTheme, setColorTheme, colorThemes } = useTheme();
+  const mounted = useSyncExternalStore2(subscribe2, getSnapshot2, getServerSnapshot2);
+  return /* @__PURE__ */ jsxs33(DropdownMenuComponent, { children: [
+    /* @__PURE__ */ jsx65(DropdownMenuComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsx65(
+      IconButton,
+      __spreadProps(__spreadValues({
+        variant,
+        size,
+        className,
+        "aria-label": mounted ? `Color theme: ${colorTheme}` : "Color theme"
+      }, props), {
+        children: /* @__PURE__ */ jsx65(
+          "span",
+          {
+            className: "block w-4 h-4 border-2 border-border",
+            style: {
+              backgroundColor: mounted ? COLOR_SWATCHES[colorTheme] : void 0,
+              borderRadius: "var(--radius, 0)"
+            }
+          }
+        )
+      })
+    ) }),
+    /* @__PURE__ */ jsxs33(DropdownMenuComponent.Content, { align: "end", children: [
+      /* @__PURE__ */ jsx65(DropdownMenuComponent.Label, { children: "Color Theme" }),
+      /* @__PURE__ */ jsx65(DropdownMenuComponent.Separator, {}),
+      /* @__PURE__ */ jsx65(
+        DropdownMenuComponent.RadioGroup,
+        {
+          value: colorTheme,
+          onValueChange: (v) => setColorTheme(v),
+          children: colorThemes.map((theme) => /* @__PURE__ */ jsxs33(DropdownMenuComponent.RadioItem, { value: theme, children: [
+            /* @__PURE__ */ jsx65(
+              "span",
+              {
+                className: "inline-block w-3 h-3 border border-border mr-1",
+                style: {
+                  backgroundColor: COLOR_SWATCHES[theme],
+                  borderRadius: "var(--radius, 0)"
+                }
+              }
+            ),
+            COLOR_LABELS[theme]
+          ] }, theme))
+        }
+      )
+    ] })
+  ] });
+}
+
 // lib/create-theme.ts
 function createTheme(name, config) {
   const declarations = [];
@@ -5876,7 +6005,7 @@ ${declarations.join("\n")}
 }
 
 // components/landing/Hero.tsx
-import { jsx as jsx65, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs34 } from "react/jsx-runtime";
 function Hero({
   badge,
   title,
@@ -5886,14 +6015,14 @@ function Hero({
   className,
   align = "center"
 }) {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     "section",
     {
       className: cn(
         "w-full border-b-2 bg-background",
         className
       ),
-      children: /* @__PURE__ */ jsxs33(
+      children: /* @__PURE__ */ jsxs34(
         "div",
         {
           className: cn(
@@ -5902,10 +6031,10 @@ function Hero({
             align === "left" && "items-start text-left"
           ),
           children: [
-            badge && /* @__PURE__ */ jsx65("div", { children: badge }),
-            /* @__PURE__ */ jsx65("h1", { className: "font-head text-4xl sm:text-5xl lg:text-6xl max-w-4xl", children: title }),
-            subtitle && /* @__PURE__ */ jsx65("p", { className: "font-sans text-lg lg:text-xl text-muted-foreground max-w-2xl", children: subtitle }),
-            actions && /* @__PURE__ */ jsx65("div", { className: "flex flex-wrap gap-3 mt-2", children: actions }),
+            badge && /* @__PURE__ */ jsx66("div", { children: badge }),
+            /* @__PURE__ */ jsx66("h1", { className: "font-head text-4xl sm:text-5xl lg:text-6xl max-w-4xl", children: title }),
+            subtitle && /* @__PURE__ */ jsx66("p", { className: "font-sans text-lg lg:text-xl text-muted-foreground max-w-2xl", children: subtitle }),
+            actions && /* @__PURE__ */ jsx66("div", { className: "flex flex-wrap gap-3 mt-2", children: actions }),
             children
           ]
         }
@@ -5916,7 +6045,7 @@ function Hero({
 
 // components/landing/Section.tsx
 import { cva as cva20 } from "class-variance-authority";
-import { jsx as jsx66, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs35 } from "react/jsx-runtime";
 var sectionVariants = cva20("w-full py-16 lg:py-24 scroll-mt-[120px]", {
   variants: {
     background: {
@@ -5946,13 +6075,13 @@ function Section(_a) {
     "background",
     "align"
   ]);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     "section",
     __spreadProps(__spreadValues({
       className: cn(sectionVariants({ background }), className)
     }, props), {
-      children: /* @__PURE__ */ jsxs34("div", { className: "mx-auto max-w-6xl px-4", children: [
-        (title || subtitle) && /* @__PURE__ */ jsxs34(
+      children: /* @__PURE__ */ jsxs35("div", { className: "mx-auto max-w-6xl px-4", children: [
+        (title || subtitle) && /* @__PURE__ */ jsxs35(
           "div",
           {
             className: cn(
@@ -5961,8 +6090,8 @@ function Section(_a) {
               align === "left" && "text-left"
             ),
             children: [
-              title && /* @__PURE__ */ jsx66("h2", { className: "font-head text-3xl lg:text-4xl mb-3", children: title }),
-              subtitle && /* @__PURE__ */ jsx66("p", { className: "font-sans text-lg text-muted-foreground max-w-2xl mx-auto", children: subtitle })
+              title && /* @__PURE__ */ jsx67("h2", { className: "font-head text-3xl lg:text-4xl mb-3", children: title }),
+              subtitle && /* @__PURE__ */ jsx67("p", { className: "font-sans text-lg text-muted-foreground max-w-2xl mx-auto", children: subtitle })
             ]
           }
         ),
@@ -5973,7 +6102,7 @@ function Section(_a) {
 }
 
 // components/landing/Footer.tsx
-import { jsx as jsx67, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs36 } from "react/jsx-runtime";
 function Footer({
   brand,
   tagline,
@@ -5981,15 +6110,15 @@ function Footer({
   bottom,
   className
 }) {
-  return /* @__PURE__ */ jsx67("footer", { className: cn("w-full border-t-2 bg-background", className), children: /* @__PURE__ */ jsxs35("div", { className: "mx-auto max-w-6xl px-4 py-12 lg:py-16", children: [
-    /* @__PURE__ */ jsxs35("div", { className: "grid gap-8 lg:grid-cols-[1.5fr_repeat(auto-fit,1fr)]", children: [
-      /* @__PURE__ */ jsxs35("div", { className: "max-w-xs", children: [
-        /* @__PURE__ */ jsx67("div", { className: "font-head text-2xl mb-2", children: brand }),
-        tagline && /* @__PURE__ */ jsx67("p", { className: "font-sans text-sm text-muted-foreground", children: tagline })
+  return /* @__PURE__ */ jsx68("footer", { className: cn("w-full border-t-2 bg-background", className), children: /* @__PURE__ */ jsxs36("div", { className: "mx-auto max-w-6xl px-4 py-12 lg:py-16", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "grid gap-8 lg:grid-cols-[1.5fr_repeat(auto-fit,1fr)]", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "max-w-xs", children: [
+        /* @__PURE__ */ jsx68("div", { className: "font-head text-2xl mb-2", children: brand }),
+        tagline && /* @__PURE__ */ jsx68("p", { className: "font-sans text-sm text-muted-foreground", children: tagline })
       ] }),
-      groups.length > 0 && /* @__PURE__ */ jsx67("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3 col-span-full lg:col-span-1", children: groups.map((group) => /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx67("h4", { className: "font-head text-sm uppercase mb-3", children: group.title }),
-        /* @__PURE__ */ jsx67("ul", { className: "flex flex-col gap-2", children: group.links.map((link) => /* @__PURE__ */ jsx67("li", { children: /* @__PURE__ */ jsx67(
+      groups.length > 0 && /* @__PURE__ */ jsx68("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3 col-span-full lg:col-span-1", children: groups.map((group) => /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx68("h4", { className: "font-head text-sm uppercase mb-3", children: group.title }),
+        /* @__PURE__ */ jsx68("ul", { className: "flex flex-col gap-2", children: group.links.map((link) => /* @__PURE__ */ jsx68("li", { children: /* @__PURE__ */ jsx68(
           "a",
           {
             href: link.href,
@@ -5999,21 +6128,21 @@ function Footer({
         ) }, link.label)) })
       ] }, group.title)) })
     ] }),
-    bottom && /* @__PURE__ */ jsx67("div", { className: "mt-12 pt-6 border-t-2 font-sans text-sm text-muted-foreground", children: bottom })
+    bottom && /* @__PURE__ */ jsx68("div", { className: "mt-12 pt-6 border-t-2 font-sans text-sm text-muted-foreground", children: bottom })
   ] }) });
 }
 
 // components/landing/PricingTable.tsx
-import { jsx as jsx68, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs37 } from "react/jsx-runtime";
 function PricingTable({ tiers, className }) {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       className: cn(
         "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
         className
       ),
-      children: tiers.map((tier) => /* @__PURE__ */ jsxs36(
+      children: tiers.map((tier) => /* @__PURE__ */ jsxs37(
         "div",
         {
           className: cn(
@@ -6021,15 +6150,15 @@ function PricingTable({ tiers, className }) {
             tier.highlighted ? "shadow-lg border-primary ring-2 ring-primary scale-[1.02]" : "shadow-md"
           ),
           children: [
-            /* @__PURE__ */ jsxs36("div", { className: "p-6 border-b-2", children: [
-              /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between mb-2", children: [
-                /* @__PURE__ */ jsx68("h3", { className: "font-head text-xl", children: tier.name }),
+            /* @__PURE__ */ jsxs37("div", { className: "p-6 border-b-2", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between mb-2", children: [
+                /* @__PURE__ */ jsx69("h3", { className: "font-head text-xl", children: tier.name }),
                 tier.badge
               ] }),
-              /* @__PURE__ */ jsx68("div", { className: "font-head text-4xl mb-1", children: tier.price }),
-              tier.description && /* @__PURE__ */ jsx68("p", { className: "font-sans text-sm text-muted-foreground", children: tier.description })
+              /* @__PURE__ */ jsx69("div", { className: "font-head text-4xl mb-1", children: tier.price }),
+              tier.description && /* @__PURE__ */ jsx69("p", { className: "font-sans text-sm text-muted-foreground", children: tier.description })
             ] }),
-            /* @__PURE__ */ jsx68("div", { className: "p-6 flex-1", children: /* @__PURE__ */ jsx68("ul", { className: "flex flex-col gap-3", children: tier.features.map((feature) => /* @__PURE__ */ jsxs36(
+            /* @__PURE__ */ jsx69("div", { className: "p-6 flex-1", children: /* @__PURE__ */ jsx69("ul", { className: "flex flex-col gap-3", children: tier.features.map((feature) => /* @__PURE__ */ jsxs37(
               "li",
               {
                 className: cn(
@@ -6037,7 +6166,7 @@ function PricingTable({ tiers, className }) {
                   !feature.included && "text-muted-foreground line-through"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx68(
+                  /* @__PURE__ */ jsx69(
                     "span",
                     {
                       className: cn(
@@ -6052,7 +6181,7 @@ function PricingTable({ tiers, className }) {
               },
               feature.text
             )) }) }),
-            /* @__PURE__ */ jsx68("div", { className: "p-6 border-t-2", children: tier.cta })
+            /* @__PURE__ */ jsx69("div", { className: "p-6 border-t-2", children: tier.cta })
           ]
         },
         tier.name
@@ -6062,7 +6191,7 @@ function PricingTable({ tiers, className }) {
 }
 
 // components/landing/FeatureSection.tsx
-import { jsx as jsx69, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs38 } from "react/jsx-runtime";
 var columnClasses2 = {
   2: "grid gap-6 sm:grid-cols-2",
   3: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
@@ -6073,14 +6202,14 @@ function FeatureSection({
   columns = 3,
   className
 }) {
-  return /* @__PURE__ */ jsx69("div", { className: cn(columnClasses2[columns], className), children: features.map((feature) => /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsx70("div", { className: cn(columnClasses2[columns], className), children: features.map((feature) => /* @__PURE__ */ jsxs38(
     "div",
     {
       className: "border-2 p-6 bg-card shadow-md",
       children: [
-        feature.icon && /* @__PURE__ */ jsx69("div", { className: "mb-4 inline-flex items-center justify-center h-12 w-12 border-2 bg-primary text-primary-foreground shadow-sm", children: feature.icon }),
-        /* @__PURE__ */ jsx69("h3", { className: "font-head text-lg mb-2", children: feature.title }),
-        /* @__PURE__ */ jsx69("p", { className: "font-sans text-sm text-muted-foreground", children: feature.description })
+        feature.icon && /* @__PURE__ */ jsx70("div", { className: "mb-4 inline-flex items-center justify-center h-12 w-12 border-2 bg-primary text-primary-foreground shadow-sm", children: feature.icon }),
+        /* @__PURE__ */ jsx70("h3", { className: "font-head text-lg mb-2", children: feature.title }),
+        /* @__PURE__ */ jsx70("p", { className: "font-sans text-sm text-muted-foreground", children: feature.description })
       ]
     },
     feature.title
@@ -6088,7 +6217,7 @@ function FeatureSection({
 }
 
 // components/landing/Testimonial.tsx
-import { jsx as jsx70, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs39 } from "react/jsx-runtime";
 var columnClasses3 = {
   1: "grid gap-6 max-w-2xl mx-auto",
   2: "grid gap-6 sm:grid-cols-2",
@@ -6099,21 +6228,21 @@ function Testimonial({
   columns = 3,
   className
 }) {
-  return /* @__PURE__ */ jsx70("div", { className: cn(columnClasses3[columns], className), children: testimonials.map((t) => /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsx71("div", { className: cn(columnClasses3[columns], className), children: testimonials.map((t) => /* @__PURE__ */ jsxs39(
     "div",
     {
       className: "border-2 p-6 bg-card shadow-md flex flex-col",
       children: [
-        /* @__PURE__ */ jsxs38("blockquote", { className: "font-sans text-sm leading-relaxed flex-1 mb-6", children: [
+        /* @__PURE__ */ jsxs39("blockquote", { className: "font-sans text-sm leading-relaxed flex-1 mb-6", children: [
           "\u201C",
           t.quote,
           "\u201D"
         ] }),
-        /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-3 border-t-2 pt-4", children: [
-          t.avatar && /* @__PURE__ */ jsx70("div", { className: "h-10 w-10 shrink-0 border-2 overflow-hidden", children: t.avatar }),
-          /* @__PURE__ */ jsxs38("div", { children: [
-            /* @__PURE__ */ jsx70("p", { className: "font-head text-sm", children: t.name }),
-            (t.role || t.company) && /* @__PURE__ */ jsx70("p", { className: "font-sans text-xs text-muted-foreground", children: [t.role, t.company].filter(Boolean).join(", ") })
+        /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-3 border-t-2 pt-4", children: [
+          t.avatar && /* @__PURE__ */ jsx71("div", { className: "h-10 w-10 shrink-0 border-2 overflow-hidden", children: t.avatar }),
+          /* @__PURE__ */ jsxs39("div", { children: [
+            /* @__PURE__ */ jsx71("p", { className: "font-head text-sm", children: t.name }),
+            (t.role || t.company) && /* @__PURE__ */ jsx71("p", { className: "font-sans text-xs text-muted-foreground", children: [t.role, t.company].filter(Boolean).join(", ") })
           ] })
         ] })
       ]
@@ -6123,9 +6252,9 @@ function Testimonial({
 }
 
 // components/landing/LogoCloud.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 function LogoCloud({ children, className }) {
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     "div",
     {
       className: cn(
@@ -6138,24 +6267,24 @@ function LogoCloud({ children, className }) {
 }
 
 // components/landing/CTABanner.tsx
-import { jsx as jsx72, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs40 } from "react/jsx-runtime";
 function CTABanner({
   title,
   subtitle,
   actions,
   className
 }) {
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     "section",
     {
       className: cn(
         "w-full border-y-2 bg-primary text-primary-foreground",
         className
       ),
-      children: /* @__PURE__ */ jsxs39("div", { className: "mx-auto max-w-6xl px-4 py-16 lg:py-20 flex flex-col items-center text-center gap-4", children: [
-        /* @__PURE__ */ jsx72("h2", { className: "font-head text-3xl lg:text-4xl", children: title }),
-        subtitle && /* @__PURE__ */ jsx72("p", { className: "font-sans text-lg max-w-xl", children: subtitle }),
-        actions && /* @__PURE__ */ jsx72("div", { className: "flex flex-wrap gap-3 mt-2", children: actions })
+      children: /* @__PURE__ */ jsxs40("div", { className: "mx-auto max-w-6xl px-4 py-16 lg:py-20 flex flex-col items-center text-center gap-4", children: [
+        /* @__PURE__ */ jsx73("h2", { className: "font-head text-3xl lg:text-4xl", children: title }),
+        subtitle && /* @__PURE__ */ jsx73("p", { className: "font-sans text-lg max-w-xl", children: subtitle }),
+        actions && /* @__PURE__ */ jsx73("div", { className: "flex flex-wrap gap-3 mt-2", children: actions })
       ] })
     }
   );
@@ -6164,20 +6293,20 @@ function CTABanner({
 // components/landing/FAQ.tsx
 import * as React60 from "react";
 import { ChevronDown as ChevronDown6 } from "lucide-react";
-import { jsx as jsx73, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs41 } from "react/jsx-runtime";
 function FAQ({ items, className }) {
   const [openIndex, setOpenIndex] = React60.useState(null);
-  return /* @__PURE__ */ jsx73("div", { className: cn("w-full max-w-3xl mx-auto", className), children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx74("div", { className: cn("w-full max-w-3xl mx-auto", className), children: items.map((item, i) => {
     const isOpen = openIndex === i;
-    return /* @__PURE__ */ jsxs40("div", { className: "border-2 border-b-0 last:border-b-2", children: [
-      /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs41("div", { className: "border-2 border-b-0 last:border-b-2", children: [
+      /* @__PURE__ */ jsxs41(
         "button",
         {
           onClick: () => setOpenIndex(isOpen ? null : i),
           className: "w-full flex items-center justify-between p-4 text-left cursor-pointer hover:bg-accent/30 transition-colors",
           children: [
-            /* @__PURE__ */ jsx73("span", { className: "font-head text-sm pr-4", children: item.question }),
-            /* @__PURE__ */ jsx73(
+            /* @__PURE__ */ jsx74("span", { className: "font-head text-sm pr-4", children: item.question }),
+            /* @__PURE__ */ jsx74(
               ChevronDown6,
               {
                 className: cn(
@@ -6189,24 +6318,24 @@ function FAQ({ items, className }) {
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsx73("div", { className: "px-4 pb-4 font-sans text-sm text-muted-foreground", children: item.answer })
+      isOpen && /* @__PURE__ */ jsx74("div", { className: "px-4 pb-4 font-sans text-sm text-muted-foreground", children: item.answer })
     ] }, i);
   }) });
 }
 
 // components/landing/StatsBar.tsx
-import { jsx as jsx74, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs42 } from "react/jsx-runtime";
 function StatsBar({ stats, className }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn(
         "w-full border-y-2 bg-card",
         className
       ),
-      children: /* @__PURE__ */ jsx74("div", { className: "mx-auto max-w-6xl px-4 py-10 grid grid-cols-2 lg:grid-cols-4 gap-8", children: stats.map((stat) => /* @__PURE__ */ jsxs41("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx74("div", { className: "font-head text-3xl lg:text-4xl mb-1", children: stat.value }),
-        /* @__PURE__ */ jsx74("div", { className: "font-sans text-sm text-muted-foreground uppercase", children: stat.label })
+      children: /* @__PURE__ */ jsx75("div", { className: "mx-auto max-w-6xl px-4 py-10 grid grid-cols-2 lg:grid-cols-4 gap-8", children: stats.map((stat) => /* @__PURE__ */ jsxs42("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx75("div", { className: "font-head text-3xl lg:text-4xl mb-1", children: stat.value }),
+        /* @__PURE__ */ jsx75("div", { className: "font-sans text-sm text-muted-foreground uppercase", children: stat.label })
       ] }, stat.label)) })
     }
   );
@@ -6215,37 +6344,39 @@ function StatsBar({ stats, className }) {
 // components/landing/AnnouncementBanner.tsx
 import * as React61 from "react";
 import { X as X4 } from "lucide-react";
-import { jsx as jsx75, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs43 } from "react/jsx-runtime";
 function AnnouncementBanner({
   children,
   dismissible = true,
   className
 }) {
-  const [visible, setVisible] = React61.useState(() => {
-    if (typeof window === "undefined") return true;
-    return sessionStorage.getItem("announcement-dismissed") !== "true";
-  });
+  const [visible, setVisible] = React61.useState(true);
+  React61.useEffect(() => {
+    if (sessionStorage.getItem("announcement-dismissed") === "true") {
+      setVisible(false);
+    }
+  }, []);
   const handleDismiss = () => {
     setVisible(false);
     sessionStorage.setItem("announcement-dismissed", "true");
   };
   if (!visible) return null;
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       className: cn(
         "w-full bg-primary text-primary-foreground border-b-2",
         className
       ),
-      children: /* @__PURE__ */ jsxs42("div", { className: "mx-auto max-w-6xl px-4 py-2 flex items-center justify-center gap-3", children: [
-        /* @__PURE__ */ jsx75("p", { className: "font-sans text-sm text-center flex-1", children }),
-        dismissible && /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsxs43("div", { className: "mx-auto max-w-6xl px-4 py-2 flex items-center justify-center gap-3", children: [
+        /* @__PURE__ */ jsx76("p", { className: "font-sans text-sm text-center flex-1", children }),
+        dismissible && /* @__PURE__ */ jsx76(
           "button",
           {
             onClick: handleDismiss,
             className: "shrink-0 p-2 min-w-[44px] min-h-[44px] inline-flex items-center justify-center hover:bg-foreground/10 transition-colors cursor-pointer",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx75(X4, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx76(X4, { className: "h-4 w-4" })
           }
         )
       ] })
@@ -6254,7 +6385,7 @@ function AnnouncementBanner({
 }
 
 // components/landing/NewsletterSignup.tsx
-import { jsx as jsx76, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs44 } from "react/jsx-runtime";
 function NewsletterSignup({
   title = "Stay in the loop",
   subtitle,
@@ -6262,16 +6393,16 @@ function NewsletterSignup({
   buttonLabel = "Subscribe",
   className
 }) {
-  return /* @__PURE__ */ jsxs43("div", { className: cn("w-full max-w-md mx-auto", className), children: [
-    title && /* @__PURE__ */ jsx76("h3", { className: "font-head text-xl mb-2 text-center", children: title }),
-    subtitle && /* @__PURE__ */ jsx76("p", { className: "font-sans text-sm text-muted-foreground text-center mb-4", children: subtitle }),
-    /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44("div", { className: cn("w-full max-w-md mx-auto", className), children: [
+    title && /* @__PURE__ */ jsx77("h3", { className: "font-head text-xl mb-2 text-center", children: title }),
+    subtitle && /* @__PURE__ */ jsx77("p", { className: "font-sans text-sm text-muted-foreground text-center mb-4", children: subtitle }),
+    /* @__PURE__ */ jsxs44(
       "form",
       {
         onSubmit: (e) => e.preventDefault(),
         className: "flex gap-2",
         children: [
-          /* @__PURE__ */ jsx76(
+          /* @__PURE__ */ jsx77(
             "input",
             {
               type: "email",
@@ -6280,7 +6411,7 @@ function NewsletterSignup({
               required: true
             }
           ),
-          /* @__PURE__ */ jsx76(
+          /* @__PURE__ */ jsx77(
             "button",
             {
               type: "submit",
@@ -6310,6 +6441,7 @@ export {
   ChartComponent as Chart,
   Checkbox,
   CollapsibleComponent as Collapsible,
+  ColorThemeToggle,
   ComboboxComponent as Combobox,
   CommandComponent as Command,
   Container,