@nikala-ui/docs 0.12.0

package/dist/vendor/core-src/registry/providers/theme-provider.tsx

@@ -0,0 +1,216 @@
+import {
+  createContext,
+  createEffect,
+  createSignal,
+  onCleanup,
+  onMount,
+  useContext,
+  type ParentComponent,
+  type Accessor,
+} from "solid-js";
+
+export type Theme = "light" | "dark" | "system";
+export type AccentColor = "yellow" | "red" | "violet" | "sky" | "emerald" | "zinc";
+export type Radius = "0" | "0.3" | "0.5" | "0.75" | "1.0";
+
+export interface ThemeProviderProps {
+  /** Initial default theme mode if no saved preference is found in localStorage */
+  defaultTheme?: Theme;
+  /** Initial default accent color override if needed */
+  defaultAccent?: AccentColor;
+  /** Initial default border radius override if needed */
+  defaultRadius?: Radius;
+  /** Key used to store theme preferences in localStorage */
+  storageKey?: string;
+}
+
+const ACCENT_COLORS: Record<
+  AccentColor,
+  { light: string; dark: string; lightFg: string; darkFg: string }
+> = {
+  yellow: { light: "oklch(0.795 0.184 86.047)", dark: "oklch(0.852 0.199 91.936)", lightFg: "oklch(0.145 0 0)", darkFg: "oklch(0.145 0 0)" },
+  red: { light: "oklch(0.577 0.245 27.325)", dark: "oklch(0.637 0.237 25.331)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.985 0 0)" },
+  violet: { light: "oklch(0.541 0.281 293.009)", dark: "oklch(0.606 0.25 292.717)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.985 0 0)" },
+  sky: { light: "oklch(0.588 0.158 241.966)", dark: "oklch(0.672 0.154 238.29)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.145 0 0)" },
+  emerald: { light: "oklch(0.596 0.145 163.225)", dark: "oklch(0.696 0.17 162.48)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.145 0 0)" },
+  zinc: { light: "oklch(0.205 0 0)", dark: "oklch(0.985 0 0)", lightFg: "oklch(0.985 0 0)", darkFg: "oklch(0.205 0 0)" },
+};
+
+interface ThemeProviderContextValue {
+  theme: Accessor<Theme>;
+  setTheme: (theme: Theme) => void;
+  accent: Accessor<AccentColor | undefined>;
+  setAccent: (accent: AccentColor) => void;
+  radius: Accessor<Radius | undefined>;
+  setRadius: (radius: Radius) => void;
+}
+
+const ThemeProviderContext = createContext<ThemeProviderContextValue>();
+
+/**
+ * Context provider managing application theme state (light/dark/system), accent colors, and border radius.
+ */
+export const ThemeProvider: ParentComponent<ThemeProviderProps> = (props) => {
+  const storageKey = props.storageKey || "nikala-theme";
+  const defaultTheme = props.defaultTheme || "system";
+
+  // Safely read saved values from localStorage without forcing unnecessary fallbacks
+  const getInitialTheme = (): Theme => {
+    if (typeof window === "undefined") return defaultTheme;
+    try {
+      const saved = localStorage.getItem(`${storageKey}-mode`);
+      if (saved === "light" || saved === "dark" || saved === "system") return saved;
+    } catch { }
+    return defaultTheme;
+  };
+
+  const getInitialAccent = (): AccentColor | undefined => {
+    if (typeof window === "undefined") return props.defaultAccent;
+    try {
+      const saved = localStorage.getItem(`${storageKey}-accent`);
+      if (saved && ACCENT_COLORS[saved as AccentColor]) return saved as AccentColor;
+    } catch { }
+    return props.defaultAccent;
+  };
+
+  const getInitialRadius = (): Radius | undefined => {
+    if (typeof window === "undefined") return props.defaultRadius;
+    try {
+      const saved = localStorage.getItem(`${storageKey}-radius`);
+      if (saved) return saved as Radius;
+    } catch { }
+    return props.defaultRadius;
+  };
+
+  const [theme, setThemeSignal] = createSignal<Theme>(getInitialTheme());
+  const [accent, setAccentSignal] = createSignal<AccentColor | undefined>(getInitialAccent());
+  const [radius, setRadiusSignal] = createSignal<Radius | undefined>(getInitialRadius());
+
+  // Applies classes and CSS custom properties when custom overrides are explicitly set
+  const applyTheme = (
+    targetTheme: Theme,
+    currentAccent: AccentColor | undefined,
+    currentRadius: Radius | undefined
+  ) => {
+    if (typeof window === "undefined") return;
+
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+
+    let resolvedDark = false;
+    if (targetTheme === "system") {
+      resolvedDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      root.classList.add(resolvedDark ? "dark" : "light");
+    } else {
+      resolvedDark = targetTheme === "dark";
+      root.classList.add(targetTheme);
+    }
+    root.style.colorScheme = resolvedDark ? "dark" : "light";
+
+    // Override --primary CSS variables ONLY if explicitly chosen
+    if (currentAccent && ACCENT_COLORS[currentAccent]) {
+      const accentData = ACCENT_COLORS[currentAccent];
+      const primaryHex = resolvedDark ? accentData.dark : accentData.light;
+      const primaryFgHex = resolvedDark ? accentData.darkFg : accentData.lightFg;
+
+      root.style.setProperty("--primary", primaryHex);
+      root.style.setProperty("--primary-foreground", primaryFgHex);
+    } else {
+      root.style.removeProperty("--primary");
+      root.style.removeProperty("--primary-foreground");
+    }
+
+    // Override --radius CSS variable ONLY if explicitly chosen
+    if (currentRadius) {
+      root.style.setProperty("--radius", `${currentRadius}rem`);
+    } else {
+      root.style.removeProperty("--radius");
+    }
+  };
+
+  // Reactively apply theme updates and store preferences in localStorage
+  createEffect(() => {
+    const t = theme();
+    const a = accent();
+    const r = radius();
+
+    applyTheme(t, a, r);
+
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem(`${storageKey}-mode`, t);
+        if (a) localStorage.setItem(`${storageKey}-accent`, a);
+        else localStorage.removeItem(`${storageKey}-accent`);
+        if (r) localStorage.setItem(`${storageKey}-radius`, r);
+        else localStorage.removeItem(`${storageKey}-radius`);
+      } catch { }
+    }
+  });
+
+  onMount(() => {
+    if (typeof window === "undefined") return;
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    const handleSystemChange = (e: MediaQueryListEvent) => {
+      if (theme() === "system") {
+        const root = document.documentElement;
+        root.classList.remove("light", "dark");
+        root.classList.add(e.matches ? "dark" : "light");
+        root.style.colorScheme = e.matches ? "dark" : "light";
+
+        const currentAccent = accent();
+        if (currentAccent && ACCENT_COLORS[currentAccent]) {
+          const accentData = ACCENT_COLORS[currentAccent];
+          const primaryHex = e.matches ? accentData.dark : accentData.light;
+          const primaryFgHex = e.matches ? accentData.darkFg : accentData.lightFg;
+
+          root.style.setProperty("--primary", primaryHex);
+          root.style.setProperty("--primary-foreground", primaryFgHex);
+        }
+      }
+    };
+
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleSystemChange);
+    } else if ("addListener" in mediaQuery) {
+      (mediaQuery as any).addListener(handleSystemChange);
+    }
+
+    onCleanup(() => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", handleSystemChange);
+      } else if ("removeListener" in mediaQuery) {
+        (mediaQuery as any).removeListener(handleSystemChange);
+      }
+    });
+  });
+
+  const value: ThemeProviderContextValue = {
+    theme,
+    setTheme: (newTheme: Theme) => setThemeSignal(newTheme),
+    accent,
+    setAccent: (newAccent: AccentColor) => setAccentSignal(newAccent),
+    radius,
+    setRadius: (newRadius: Radius) => setRadiusSignal(newRadius),
+  };
+
+  return (
+    <ThemeProviderContext.Provider value={value}>
+      {props.children}
+    </ThemeProviderContext.Provider>
+  );
+};
+
+/**
+ * Accesses Nikala UI theme state, accent colors, border radius, and update functions.
+ */
+export function useTheme(): ThemeProviderContextValue {
+  const context = useContext(ThemeProviderContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+export { ThemeScript, type ThemeScriptProps } from "./theme-script";

package/dist/vendor/core-src/registry/providers/theme-script.tsx

@@ -0,0 +1,78 @@
+import { isServer } from "solid-js/web";
+import type { Component } from "solid-js";
+
+export interface ThemeScriptProps {
+  /** Storage key namespace used in localStorage (default: "nikala-theme") */
+  storageKey?: string;
+  /** Initial default theme mode if no saved preference exists (default: "system") */
+  defaultTheme?: "light" | "dark" | "system";
+  /** Initial default primary accent color if no saved preference exists */
+  defaultAccent?: string;
+  /** Initial default border radius if no saved preference exists */
+  defaultRadius?: string;
+}
+
+/**
+ * Pre-hydration inline script executed synchronously before DOM paint to prevent theme flickering (anti-FOUC).
+ */
+export const ThemeScript: Component<ThemeScriptProps> = (props) => {
+  if (!isServer) return null;
+  const key = props.storageKey || "nikala-theme";
+  const defTheme = props.defaultTheme || "system";
+  const defAccent = props.defaultAccent || "";
+  const defRadius = props.defaultRadius || "";
+
+  const scriptText = `(function(){try{
+  var key = '${key}';
+  var mode = localStorage.getItem(key + '-mode') || '${defTheme}';
+  var accent = localStorage.getItem(key + '-accent') || '${defAccent}';
+  var radius = localStorage.getItem(key + '-radius') || '${defRadius}';
+
+  var isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  var resolvedDark = mode === 'dark' || (mode === 'system' && isDark);
+
+  var root = document.documentElement;
+  root.classList.remove('light', 'dark');
+  root.classList.add(resolvedDark ? 'dark' : 'light');
+  root.style.colorScheme = resolvedDark ? 'dark' : 'light';
+
+  var colorMap = {
+    yellow: {
+      primary: resolvedDark ? 'oklch(0.852 0.199 91.936)' : 'oklch(0.795 0.184 86.047)',
+      foreground: 'oklch(0.145 0 0)'
+    },
+    red: {
+      primary: resolvedDark ? 'oklch(0.637 0.237 25.331)' : 'oklch(0.577 0.245 27.325)',
+      foreground: 'oklch(0.985 0 0)'
+    },
+    violet: {
+      primary: resolvedDark ? 'oklch(0.606 0.25 292.717)' : 'oklch(0.541 0.281 293.009)',
+      foreground: 'oklch(0.985 0 0)'
+    },
+    sky: {
+      primary: resolvedDark ? 'oklch(0.672 0.154 238.29)' : 'oklch(0.588 0.158 241.966)',
+      foreground: resolvedDark ? 'oklch(0.145 0 0)' : 'oklch(0.985 0 0)'
+    },
+    emerald: {
+      primary: resolvedDark ? 'oklch(0.696 0.17 162.48)' : 'oklch(0.596 0.145 163.225)',
+      foreground: resolvedDark ? 'oklch(0.145 0 0)' : 'oklch(0.985 0 0)'
+    },
+    zinc: {
+      primary: resolvedDark ? 'oklch(0.985 0 0)' : 'oklch(0.205 0 0)',
+      foreground: resolvedDark ? 'oklch(0.205 0 0)' : 'oklch(0.985 0 0)'
+    }
+  };
+
+  if (accent && colorMap[accent]) {
+    root.style.setProperty('--primary', colorMap[accent].primary);
+    root.style.setProperty('--primary-foreground', colorMap[accent].foreground);
+  }
+
+  if (radius) {
+    var radVal = radius.endsWith('rem') ? radius : radius + 'rem';
+    root.style.setProperty('--radius', radVal);
+  }
+}catch(e){}})();`;
+
+  return <script innerHTML={scriptText} />;
+};

package/dist/vendor/core-src/registry/providers/theme-transitions.ts

@@ -0,0 +1,139 @@
+export type ThemeEffect = "none" | "circular" | "fade";
+
+/**
+ * Injects required CSS view-transition pseudo-element styles to prevent browser mix-blend artifacts.
+ */
+function ensureTransitionStyles() {
+  if (typeof document === "undefined") return;
+  const styleId = "nikala-view-transition-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      ::view-transition-old(root),
+      ::view-transition-new(root) {
+        animation: none;
+        mix-blend-mode: normal;
+      }
+      ::view-transition-old(root) {
+        z-index: 1;
+      }
+      ::view-transition-new(root) {
+        z-index: 9999;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+/**
+ * Checks whether the current environment is Linux WebKitGTK (e.g. Tauri on Linux)
+ * where CSS View Transitions pseudo-element animations trigger known WebProcess crashes.
+ */
+function isLinuxWebKit(): boolean {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent || "";
+  const isLinux = /linux/i.test(ua);
+  const isWebKit = /applewebkit/i.test(ua);
+  const isChrome = /chrome|chromium|edg/i.test(ua);
+  const isTauri = typeof window !== "undefined" && typeof (window as any).__TAURI_INTERNALS__ !== "undefined";
+
+  return isLinux && ((isWebKit && !isChrome) || isTauri);
+}
+
+/**
+ * Executes a theme change with the specified transition effect using the Web View Transitions API.
+ * Supported on modern browsers, Windows (Tauri WebView2), and macOS (Tauri WKWebView).
+ * Automatically falls back to safe instant transitions on Linux WebKitGTK.
+ *
+ * @param effect - Desired transition animation ("none", "circular", "fade")
+ * @param event - Mouse or Pointer event to calculate transition center coordinates
+ * @param updateThemeCallback - Callback function performing the actual theme state change
+ */
+export function runThemeTransition(
+  effect: ThemeEffect = "none",
+  event: MouseEvent | undefined,
+  updateThemeCallback: () => void
+) {
+  // Safe fallback if View Transitions API is unsupported, reduced motion is preferred,
+  // or on Linux WebKitGTK where pseudo-element clipping transitions trigger WebProcess faults
+  if (
+    effect === "none" ||
+    typeof document === "undefined" ||
+    !(document as any).startViewTransition ||
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches ||
+    isLinuxWebKit()
+  ) {
+    updateThemeCallback();
+    return;
+  }
+
+  ensureTransitionStyles();
+
+  try {
+    // Circular expanding ripple transition originating from click coordinates
+    if (effect === "circular" && event) {
+      const x = event.clientX;
+      const y = event.clientY;
+
+      const endRadius = Math.hypot(
+        Math.max(x, window.innerWidth - x),
+        Math.max(y, window.innerHeight - y)
+      );
+
+      const transition = (document as any).startViewTransition(() => {
+        updateThemeCallback();
+      });
+
+      transition.ready
+        ?.then(() => {
+          document.documentElement.animate(
+            {
+              clipPath: [
+                `circle(0px at ${x}px ${y}px)`,
+                `circle(${endRadius}px at ${x}px ${y}px)`,
+              ],
+            },
+            {
+              duration: 500,
+              easing: "ease-in-out",
+              pseudoElement: "::view-transition-new(root)",
+            }
+          );
+        })
+        ?.catch(() => {
+          // Graceful fallback
+        });
+      return;
+    }
+
+    // Smooth opacity fade view transition
+    if (effect === "fade") {
+      const transition = (document as any).startViewTransition(() => {
+        updateThemeCallback();
+      });
+
+      transition.ready
+        ?.then(() => {
+          document.documentElement.animate(
+            {
+              opacity: [0, 1],
+            },
+            {
+              duration: 350,
+              easing: "ease-in-out",
+              pseudoElement: "::view-transition-new(root)",
+            }
+          );
+        })
+        ?.catch(() => {
+          // Graceful fallback
+        });
+      return;
+    }
+
+    updateThemeCallback();
+  } catch {
+    updateThemeCallback();
+  }
+}

package/dist/vendor/hooks-src/create-active-element.ts

@@ -0,0 +1,51 @@
+import { createSignal, onMount, onCleanup, type Accessor } from "solid-js";
+import { isServer } from "solid-js/web";
+
+export interface CreateActiveElementReturn {
+  /** Accessor returning the currently focused DOM element, or null */
+  activeElement: Accessor<Element | null>;
+  /** Accessor returning true if any element (non-body) is focused */
+  hasFocus: Accessor<boolean>;
+}
+
+/**
+ * SolidJS reactive primitive for tracking the currently focused (active) DOM element.
+ * Listens to focus/blur events on the document and reactively updates `activeElement` and `hasFocus`.
+ */
+export function createActiveElement(): CreateActiveElementReturn {
+  // SSR: return static defaults
+  if (isServer) {
+    const [activeElement] = createSignal<Element | null>(null);
+    const [hasFocus] = createSignal(false);
+    return { activeElement, hasFocus };
+  }
+
+  const [activeElement, setActiveElement] = createSignal<Element | null>(null);
+
+  const hasFocus = () => {
+    const el = activeElement();
+    return el !== null && el !== document.body;
+  };
+
+  const handleFocusChange = () => {
+    setActiveElement(document.activeElement);
+  };
+
+  onMount(() => {
+    // Set initial value
+    setActiveElement(document.activeElement);
+
+    document.addEventListener("focusin", handleFocusChange, true);
+    document.addEventListener("focusout", handleFocusChange, true);
+
+    onCleanup(() => {
+      document.removeEventListener("focusin", handleFocusChange, true);
+      document.removeEventListener("focusout", handleFocusChange, true);
+    });
+  });
+
+  return {
+    activeElement,
+    hasFocus,
+  };
+}