nextworks 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/kits/blocks/app/templates/saasdashboard/page.tsx

@@ -1,39 +1,39 @@
-import { Navbar } from "./components/Navbar";
-import { Hero } from "./components/Hero";
-import { Features } from "./components/Features";
-import { Testimonials } from "./components/Testimonials";
-import { TrustBadges } from "./components/TrustBadges";
-import { Contact } from "./components/Contact";
-import { Pricing } from "./components/Pricing";
-import { FAQ } from "./components/FAQ";
-import { Footer } from "./components/Footer";
-import { SmoothScroll } from "./components/SmoothScroll";
-
-import { PresetThemeVars } from "./PresetThemeVars";
-
-export default function SaaSDashboardPage() {
-  return (
-    <PresetThemeVars>
-      <div>
-        <SmoothScroll />
-        <Navbar />
-        <section id="home">
-          <Hero />
-        </section>
-        <Features />
-        <Testimonials />
-        <TrustBadges />
-        <section id="pricing">
-          <Pricing />
-        </section>
-        <section id="contact">
-          <Contact />
-        </section>
-        <section id="faq">
-          <FAQ />
-        </section>
-        <Footer />
-      </div>
-    </PresetThemeVars>
-  );
-}
+import { Navbar } from "./components/Navbar";
+import { Hero } from "./components/Hero";
+import { Features } from "./components/Features";
+import { Testimonials } from "./components/Testimonials";
+import { TrustBadges } from "./components/TrustBadges";
+import { Contact } from "./components/Contact";
+import { Pricing } from "./components/Pricing";
+import { FAQ } from "./components/FAQ";
+import { Footer } from "./components/Footer";
+import { SmoothScroll } from "./components/SmoothScroll";
+
+import { PresetThemeVars } from "./PresetThemeVars";
+
+export default function SaaSDashboardPage() {
+  return (
+    <PresetThemeVars>
+      <div>
+        <SmoothScroll />
+        <Navbar />
+        <section id="home">
+          <Hero />
+        </section>
+        <Features />
+        <Testimonials />
+        <TrustBadges />
+        <section id="pricing">
+          <Pricing />
+        </section>
+        <section id="contact">
+          <Contact />
+        </section>
+        <section id="faq">
+          <FAQ />
+        </section>
+        <Footer />
+      </div>
+    </PresetThemeVars>
+  );
+}

package/dist/kits/blocks/components/enhanced-theme-provider.tsx

@@ -1,183 +1,195 @@
-"use client";
-
-import * as React from "react";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import type { ThemeProviderProps as NextThemesProviderProps } from "next-themes";
-import {
-  ThemeVariant,
-  themes,
-  darkThemes,
-  type ThemeConfig,
-} from "@/lib/themes";
-
-type ColorTokens = ThemeConfig["colors"];
-const CUSTOM_STORAGE_KEY = "nxw-theme-custom";
-
-interface EnhancedThemeProviderProps {
-  children: React.ReactNode;
-  attribute?: NextThemesProviderProps["attribute"];
-  defaultTheme?: NextThemesProviderProps["defaultTheme"];
-  enableSystem?: NextThemesProviderProps["enableSystem"];
-  disableTransitionOnChange?: NextThemesProviderProps["disableTransitionOnChange"];
-  defaultThemeVariant?: ThemeVariant;
-  // Optional DX: provide default custom tokens declaratively (e.g. brand colors)
-  defaultCustomTokens?: Partial<ColorTokens> | null;
-}
-
-interface ThemeContextType {
-  themeVariant: ThemeVariant;
-  setThemeVariant: (variant: ThemeVariant) => void;
-
-  customTheme: Partial<ColorTokens> | null;
-  setCustomTheme: (tokens: Partial<ColorTokens> | null) => void;
-  setCustomBrandColors: (tokens: Partial<ColorTokens>) => void;
-
-  applyTheme: (variant: ThemeVariant, isDark?: boolean) => void;
-}
-
-const ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);
-
-export function useThemeVariant() {
-  const context = React.useContext(ThemeContext);
-  if (context === undefined) {
-    throw new Error(
-      "useThemeVariant must be used within an EnhancedThemeProvider",
-    );
-  }
-  return context;
-}
-
-export function EnhancedThemeProvider({
-  children,
-  attribute = "class",
-  defaultTheme = "system",
-  enableSystem = true,
-  disableTransitionOnChange = false,
-  defaultThemeVariant = "monochrome",
-  defaultCustomTokens = null,
-}: EnhancedThemeProviderProps) {
-  const [themeVariant, setThemeVariant] =
-    React.useState<ThemeVariant>(defaultThemeVariant);
-  const [customTheme, setCustomThemeState] =
-    React.useState<Partial<ColorTokens> | null>(defaultCustomTokens);
-
-  const writeCustomCookies = React.useCallback(
-    (tokens: Partial<ColorTokens> | null) => {
-      if (tokens) {
-        document.cookie = `theme-variant=custom; Path=/; Max-Age=31536000; SameSite=Lax`;
-        document.cookie = `theme-custom=${encodeURIComponent(JSON.stringify(tokens))}; Path=/; Max-Age=31536000; SameSite=Lax`;
-      } else {
-        document.cookie = `theme-custom=; Path=/; Max-Age=0; SameSite=Lax`;
-      }
-    },
-    [],
-  );
-
-  const setCustomTheme = React.useCallback(
-    (tokens: Partial<ColorTokens> | null) => {
-      setCustomThemeState(tokens);
-      try {
-        if (tokens) {
-          localStorage.setItem(CUSTOM_STORAGE_KEY, JSON.stringify(tokens));
-        } else {
-          localStorage.removeItem(CUSTOM_STORAGE_KEY);
-        }
-      } catch {
-        // ignore
-      }
-      writeCustomCookies(tokens ?? null);
-    },
-    [writeCustomCookies],
-  );
-
-  const setCustomBrandColors = React.useCallback(
-    (tokens: Partial<ColorTokens>) => {
-      setThemeVariant("custom");
-      setCustomTheme(tokens);
-    },
-    [setCustomTheme],
-  );
-
-  const applyTheme = React.useCallback(
-    (variant: ThemeVariant, isDark = false) => {
-      const base = isDark ? darkThemes[variant].colors : themes[variant].colors;
-      const merged =
-        variant === "custom" && customTheme ? { ...base, ...customTheme } : base;
-
-      // Apply CSS custom properties to the document root
-      const root = document.documentElement;
-
-      // Reflect the current variant for CSS selectors
-      root.setAttribute("data-theme-variant", variant);
-
-      Object.entries(merged).forEach(([key, value]) => {
-        const cssVar = `--${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
-        root.style.setProperty(cssVar, value as string);
-      });
-    },
-    [customTheme],
-  );
-
-  // Apply theme when variant or custom tokens change
-  React.useEffect(() => {
-    const isDark = document.documentElement.classList.contains("dark");
-    applyTheme(themeVariant, isDark);
-  }, [themeVariant, customTheme, applyTheme]);
-
-  // Load custom tokens from localStorage on mount (overrides defaultCustomTokens if present)
-  React.useEffect(() => {
-    try {
-      const raw = localStorage.getItem(CUSTOM_STORAGE_KEY);
-      if (raw) {
-        const parsed = JSON.parse(raw) as Partial<ColorTokens>;
-        setCustomThemeState(parsed);
-      }
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  // Listen for theme changes from next-themes
-  React.useEffect(() => {
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === "class") {
-          const isDark = document.documentElement.classList.contains("dark");
-          applyTheme(themeVariant, isDark);
-        }
-      });
-    });
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-
-    return () => observer.disconnect();
-  }, [themeVariant, applyTheme]);
-
-  const contextValue = React.useMemo(
-    () => ({
-      themeVariant,
-      setThemeVariant,
-      customTheme,
-      setCustomTheme,
-      setCustomBrandColors,
-      applyTheme,
-    }),
-    [themeVariant, customTheme, setCustomTheme, setCustomBrandColors, applyTheme],
-  );
-
-  return (
-    <NextThemesProvider
-      attribute={attribute}
-      defaultTheme={defaultTheme}
-      enableSystem={enableSystem}
-      disableTransitionOnChange={disableTransitionOnChange}
-    >
-      <ThemeContext.Provider value={contextValue}>
-        {children}
-      </ThemeContext.Provider>
-    </NextThemesProvider>
-  );
-}
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps as NextThemesProviderProps } from "next-themes";
+import {
+  ThemeVariant,
+  themes,
+  darkThemes,
+  type ThemeConfig,
+} from "@/lib/themes";
+
+type ColorTokens = ThemeConfig["colors"];
+const CUSTOM_STORAGE_KEY = "nxw-theme-custom";
+
+interface EnhancedThemeProviderProps {
+  children: React.ReactNode;
+  attribute?: NextThemesProviderProps["attribute"];
+  defaultTheme?: NextThemesProviderProps["defaultTheme"];
+  enableSystem?: NextThemesProviderProps["enableSystem"];
+  disableTransitionOnChange?: NextThemesProviderProps["disableTransitionOnChange"];
+  defaultThemeVariant?: ThemeVariant;
+  defaultCustomTokens?: Partial<ColorTokens> | null;
+}
+
+interface ThemeContextType {
+  themeVariant: ThemeVariant;
+  setThemeVariant: (variant: ThemeVariant) => void;
+
+  customTheme: Partial<ColorTokens> | null;
+  setCustomTheme: (tokens: Partial<ColorTokens> | null) => void;
+  setCustomBrandColors: (tokens: Partial<ColorTokens>) => void;
+
+  applyTheme: (variant: ThemeVariant, isDark?: boolean) => void;
+}
+
+const ThemeContext = React.createContext<ThemeContextType | undefined>(
+  undefined,
+);
+
+export function useThemeVariant() {
+  const context = React.useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error(
+      "useThemeVariant must be used within an EnhancedThemeProvider",
+    );
+  }
+  return context;
+}
+
+export function EnhancedThemeProvider({
+  children,
+  attribute = "class",
+  defaultTheme = "system",
+  enableSystem = true,
+  disableTransitionOnChange = false,
+  defaultThemeVariant = "monochrome",
+  defaultCustomTokens = null,
+}: EnhancedThemeProviderProps) {
+  const [themeVariant, setThemeVariant] =
+    React.useState<ThemeVariant>(defaultThemeVariant);
+  const [customTheme, setCustomThemeState] =
+    React.useState<Partial<ColorTokens> | null>(defaultCustomTokens);
+
+  const writeCustomCookies = React.useCallback(
+    (tokens: Partial<ColorTokens> | null) => {
+      if (tokens) {
+        document.cookie = `theme-variant=custom; Path=/; Max-Age=31536000; SameSite=Lax`;
+        document.cookie = `theme-custom=${encodeURIComponent(JSON.stringify(tokens))}; Path=/; Max-Age=31536000; SameSite=Lax`;
+      } else {
+        document.cookie = `theme-custom=; Path=/; Max-Age=0; SameSite=Lax`;
+      }
+    },
+    [],
+  );
+
+  const setCustomTheme = React.useCallback(
+    (tokens: Partial<ColorTokens> | null) => {
+      setCustomThemeState(tokens);
+      try {
+        if (tokens) {
+          localStorage.setItem(CUSTOM_STORAGE_KEY, JSON.stringify(tokens));
+        } else {
+          localStorage.removeItem(CUSTOM_STORAGE_KEY);
+        }
+      } catch {
+        // ignore
+      }
+      writeCustomCookies(tokens ?? null);
+    },
+    [writeCustomCookies],
+  );
+
+  const setCustomBrandColors = React.useCallback(
+    (tokens: Partial<ColorTokens>) => {
+      setThemeVariant("custom");
+      setCustomTheme(tokens);
+    },
+    [setCustomTheme],
+  );
+
+  const applyTheme = React.useCallback(
+    (variant: ThemeVariant, isDark = false) => {
+      const base = isDark ? darkThemes[variant].colors : themes[variant].colors;
+      const merged =
+        variant === "custom" && customTheme
+          ? { ...base, ...customTheme }
+          : base;
+
+      // Apply CSS custom properties to the document root
+      const root = document.documentElement;
+
+      // Reflect the current variant for CSS selectors
+      root.setAttribute("data-theme-variant", variant);
+
+      Object.entries(merged).forEach(([key, value]) => {
+        const cssVar = `--${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+        root.style.setProperty(cssVar, value as string);
+      });
+    },
+    [customTheme],
+  );
+
+  // Apply theme when variant or custom tokens change
+  React.useEffect(() => {
+    const isDark = document.documentElement.classList.contains("dark");
+    applyTheme(themeVariant, isDark);
+  }, [themeVariant, customTheme, applyTheme]);
+
+  // Load custom tokens from localStorage on mount (overrides defaultCustomTokens if present)
+  React.useEffect(() => {
+    try {
+      const raw = localStorage.getItem(CUSTOM_STORAGE_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw) as Partial<ColorTokens>;
+        setCustomThemeState(parsed);
+      }
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  // Listen for theme changes from next-themes
+  React.useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "class"
+        ) {
+          const isDark = document.documentElement.classList.contains("dark");
+          applyTheme(themeVariant, isDark);
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, [themeVariant, applyTheme]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      themeVariant,
+      setThemeVariant,
+      customTheme,
+      setCustomTheme,
+      setCustomBrandColors,
+      applyTheme,
+    }),
+    [
+      themeVariant,
+      customTheme,
+      setCustomTheme,
+      setCustomBrandColors,
+      applyTheme,
+    ],
+  );
+
+  return (
+    <NextThemesProvider
+      attribute={attribute}
+      defaultTheme={defaultTheme}
+      enableSystem={enableSystem}
+      disableTransitionOnChange={disableTransitionOnChange}
+    >
+      <ThemeContext.Provider value={contextValue}>
+        {children}
+      </ThemeContext.Provider>
+    </NextThemesProvider>
+  );
+}

package/dist/kits/blocks/components/providers/BlocksAppProviders.tsx

@@ -1,27 +1,27 @@
-"use client";
-
-import * as React from "react";
-import { EnhancedThemeProvider } from "../enhanced-theme-provider";
-import type { ThemeVariant } from "../../lib/themes";
-
-type BlocksAppProvidersProps = {
-  children: React.ReactNode;
-  defaultThemeVariant?: ThemeVariant;
-};
-
-/**
- * Client-safe provider wrapper for Nextworks blocks (kit-local).
- *
- * This intentionally avoids importing providers/hooks from @nextworks/blocks-core
- * to prevent duplicate React context instances in Turbopack dev.
- */
-export function BlocksAppProviders({
-  children,
-  defaultThemeVariant = "monochrome",
-}: BlocksAppProvidersProps) {
-  return (
-    <EnhancedThemeProvider defaultThemeVariant={defaultThemeVariant}>
-      {children}
-    </EnhancedThemeProvider>
-  );
-}
+"use client";
+
+import * as React from "react";
+import { EnhancedThemeProvider } from "../enhanced-theme-provider";
+import type { ThemeVariant } from "../../lib/themes";
+
+type BlocksAppProvidersProps = {
+  children: React.ReactNode;
+  defaultThemeVariant?: ThemeVariant;
+};
+
+/**
+ * Client-safe provider wrapper for Nextworks blocks (kit-local).
+ *
+ * This intentionally avoids importing providers/hooks from @nextworks/blocks-core
+ * to prevent duplicate React context instances in Turbopack dev.
+ */
+export function BlocksAppProviders({
+  children,
+  defaultThemeVariant = "monochrome",
+}: BlocksAppProvidersProps) {
+  return (
+    <EnhancedThemeProvider defaultThemeVariant={defaultThemeVariant}>
+      {children}
+    </EnhancedThemeProvider>
+  );
+}