@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/theme/ThemeProvider.tsx

@@ -0,0 +1,319 @@
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+import { ThemeScript } from "./themeScript";
+import type { Attribute, ThemeProviderProps, UseThemeProps, BaseTheme, ComputedTheme } from "./types";
+
+export const colorSchemes = ["light", "dark"] as const;
+export const MEDIA = "(prefers-color-scheme: dark)";
+export const isServer = typeof window === "undefined";
+export const ThemeContext = createContext<UseThemeProps | undefined>(undefined);
+
+export const saveToLS = (key: string, value: string) => {
+  // Save to storage
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    // Unsupported
+  }
+};
+
+export const getFromLS = (key: string, fallback: string): string => {
+  if (isServer) return fallback;
+  try {
+    return localStorage.getItem(key) || fallback;
+  } catch {
+    return fallback;
+  }
+};
+
+/**
+ * Calculate the actual theme name
+ */
+export const computeTheme = (baseTheme: BaseTheme, isLiquid: boolean, systemIsDark: boolean): ComputedTheme => {
+  let resolvedBase: "light" | "dark";
+  
+  if (baseTheme === "system") {
+    resolvedBase = systemIsDark ? "dark" : "light";
+  } else {
+    resolvedBase = baseTheme;
+  }
+  
+  return isLiquid ? `liquid-${resolvedBase}` as ComputedTheme : resolvedBase;
+};
+
+/**
+ * Parse old theme string to new state structure
+ */
+export const parseOldTheme = (oldTheme: string): { baseTheme: BaseTheme; isLiquid: boolean } => {
+  if (oldTheme === "system") {
+    return { baseTheme: "system", isLiquid: false };
+  }
+  
+  if (oldTheme.startsWith("liquid-")) {
+    const base = oldTheme.replace("liquid-", "") as "light" | "dark";
+    return { baseTheme: base, isLiquid: true };
+  }
+  
+  return { baseTheme: oldTheme as BaseTheme, isLiquid: false };
+};
+
+
+
+/**
+ * Hook to read and update theme state from `ThemeProvider`.
+ * Throws if used outside a provider.
+ */
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+
+  if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};
+
+/**
+ * Provides theme context and DOM attribute synchronization for theming.
+ * Nesting providers is supported; inner providers will passthrough.
+ */
+export const ThemeProvider = (props: PropsWithChildren<ThemeProviderProps>) => {
+  const context = useContext(ThemeContext);
+
+  // Ignore nested context providers, just passthrough children
+  if (context) return <>{props.children}</>;
+  return <Theme {...props} />;
+};
+
+export const defaultThemes = ["light", "dark", "liquid-light", "liquid-dark"];
+
+/**
+ * Internal component implementing theme persistence, system preference,
+ * and DOM attribute updates.
+ */
+export const Theme = ({
+  forcedTheme,
+  disableTransitionOnChange = false,
+  enableSystem = true,
+  enableColorScheme = false,
+  storageKey = "vuer-uikit-theme",
+  defaultBaseTheme = enableSystem ? "system" : "light",
+  defaultIsLiquid = true,
+  attribute = "class",
+  value,
+  children,
+  nonce,
+  scriptProps,
+}: PropsWithChildren<ThemeProviderProps>) => {
+  const themes = defaultThemes;
+  
+  const initialState = useMemo(() => {
+    return { baseTheme: defaultBaseTheme!, isLiquid: defaultIsLiquid! };
+  }, [defaultBaseTheme, defaultIsLiquid]);
+
+  const [baseTheme, setBaseThemeState] = useState<BaseTheme>(() => {
+    const stored = getFromLS(`${storageKey}-base`, "");
+    if (!stored) {
+      return initialState.baseTheme;
+    }
+    return (["light", "dark", "system"].includes(stored) ? stored : initialState.baseTheme) as BaseTheme;
+  });
+  
+  const [isLiquid, setIsLiquidState] = useState<boolean>(() => {
+    const stored = getFromLS(`${storageKey}-liquid`, "");
+    if (!stored) {
+      return initialState.isLiquid;
+    }
+    return stored === "true";
+  });
+
+  const [systemIsDark, setSystemIsDark] = useState(() => {
+    if (isServer) {
+      return false;
+    }
+    return window.matchMedia(MEDIA).matches;
+  });
+
+  const attrs = !value ? themes : Object.values(value);
+
+  const computedTheme = useMemo(() => 
+    computeTheme(baseTheme, isLiquid, systemIsDark), 
+    [baseTheme, isLiquid, systemIsDark]
+  );
+
+  const resolvedTheme = useMemo((): ComputedTheme => {
+    if (forcedTheme) {
+      const parsed = parseOldTheme(forcedTheme);
+      return computeTheme(parsed.baseTheme, parsed.isLiquid, systemIsDark);
+    }
+    return computedTheme;
+  }, [forcedTheme, computedTheme, systemIsDark]);
+
+  const applyTheme = useCallback(
+    (theme: string) => {
+      if (!theme) return;
+
+      const name = value ? value[theme] : theme;
+      const enable = disableTransitionOnChange ? disableAnimation(nonce) : null;
+      const d = document.documentElement;
+
+      const handleAttribute = (attr: Attribute) => {
+        if (attr === "class") {
+          d.classList.remove(...attrs);
+          if (name) d.classList.add(name);
+        } else if (attr.startsWith("data-")) {
+          if (name) {
+            d.setAttribute(attr, name);
+          } else {
+            d.removeAttribute(attr);
+          }
+        }
+      };
+
+      if (Array.isArray(attribute)) attribute.forEach(handleAttribute);
+      else handleAttribute(attribute);
+
+      if (enableColorScheme) {
+        // Extract base color scheme from theme name
+        const isDark = theme.includes("dark");
+        d.style.colorScheme = isDark ? "dark" : "light";
+      }
+
+      enable?.();
+    },
+    [attribute, attrs, disableTransitionOnChange, enableColorScheme, nonce, value],
+  );
+
+  const setBaseTheme = useCallback((newBaseTheme: BaseTheme) => {
+    setBaseThemeState(newBaseTheme);
+    saveToLS(`${storageKey}-base`, newBaseTheme);
+  }, [storageKey]);
+
+  const toggleLiquid = useCallback(() => {
+    setIsLiquidState(prev => {
+      const newValue = !prev;
+      saveToLS(`${storageKey}-liquid`, String(newValue));
+      return newValue;
+    });
+  }, [storageKey]);
+
+  const handleMediaQuery = useCallback(
+    (e: MediaQueryListEvent | MediaQueryList) => {
+      const isDark = e.matches;
+      setSystemIsDark(isDark);
+    },
+    [],
+  );
+
+  // Always listen to System preference
+  useEffect(() => {
+    const media = window.matchMedia(MEDIA);
+
+    // Intentionally use deprecated listener methods to support iOS & old browsers
+    media.addListener(handleMediaQuery);
+    handleMediaQuery(media);
+
+    return () => media.removeListener(handleMediaQuery);
+  }, [handleMediaQuery]);
+
+  // localStorage event handling
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === `${storageKey}-base` && e.newValue) {
+        setBaseThemeState(e.newValue as BaseTheme);
+      } else if (e.key === `${storageKey}-liquid` && e.newValue !== null) {
+        setIsLiquidState(e.newValue === "true");
+      }
+    };
+
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [storageKey]);
+
+  // Whenever theme changes, apply it
+  useEffect(() => {
+    applyTheme(resolvedTheme);
+  }, [applyTheme, resolvedTheme]);
+
+  const contextValue = useMemo(
+    () => ({
+      baseTheme,
+      setBaseTheme,
+      isLiquid,
+      toggleLiquid,
+      computedTheme,
+      resolvedTheme,
+      systemTheme: (enableSystem ? (systemIsDark ? "dark" : "light") : undefined) as "light" | "dark" | undefined,
+      forcedTheme,
+      storageKey,
+    }),
+    [
+      baseTheme, setBaseTheme, isLiquid, toggleLiquid, computedTheme, resolvedTheme,
+      systemIsDark, enableSystem, forcedTheme, storageKey
+    ],
+  );
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      <ThemeScript
+        {...{
+          forcedTheme,
+          storageKey,
+          attribute,
+          enableSystem,
+          enableColorScheme,
+          defaultTheme: initialState.baseTheme === "system" 
+            ? "system" 
+            : (initialState.isLiquid ? `liquid-${initialState.baseTheme}` : initialState.baseTheme),
+          value,
+          themes,
+          nonce,
+          scriptProps,
+        }}
+      />
+
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+// Helpers
+export const getTheme = (key: string, fallback: string) => {
+  return getFromLS(key, fallback);
+};
+
+export const disableAnimation = (nonce?: string) => {
+  const css = document.createElement("style");
+  if (nonce) css.setAttribute("nonce", nonce);
+  css.appendChild(
+    document.createTextNode(
+      `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,
+    ),
+  );
+  document.head.appendChild(css);
+
+  return () => {
+    // Force restyle
+    (() => window.getComputedStyle(document.body))();
+
+    // Wait for next tick before removing
+    setTimeout(() => {
+      if (css && css.parentNode) {
+        css.parentNode.removeChild(css);
+      }
+    }, 1);
+  };
+};
+
+export const getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {
+  if (isServer) return "liquid-light"; // Default to liquid-light on server
+  if (!e) e = window.matchMedia(MEDIA);
+  const isDark = e.matches;
+  return isDark ? "liquid-dark" : "liquid-light";
+};

package/src/ui/theme/ThemeToggles.tsx

@@ -0,0 +1,84 @@
+// Liquid toggle component
+import { Droplet, Moon, Sun, SunMoon } from "lucide-react";
+import React, { type ComponentProps } from "react";
+
+import { Button } from "../button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+import { useTheme } from "./ThemeProvider";
+import { cn, createClientOnlyComponent, useDocument } from "../../hooks";
+
+type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
+
+export const LiquidToggle: React.FC<LiquidToggleProps> = ({ className, ...props }) => {
+  const { isLiquid, toggleLiquid } = useTheme();
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          icon
+          variant="ghost"
+          value={isLiquid}
+          aria-label={`Toggle liquid theme: ${isLiquid ? "on" : "off"}`}
+          {...props}
+          onClick={toggleLiquid}
+          className={className}
+        >
+          <Droplet size={20} />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Toggle liquid theme</TooltipContent>
+    </Tooltip>
+  );
+};
+
+// Theme color toggle component for light/dark/system
+type ThemeColorToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
+
+export const ThemeColorToggle: React.FC<ThemeColorToggleProps> = (props) => {
+  const { baseTheme, setBaseTheme, resolvedTheme } = useTheme();
+
+  const handleThemeChange = () => {
+    if (baseTheme === "light") {
+      setBaseTheme("dark");
+    } else if (baseTheme === "dark") {
+      setBaseTheme("system");
+    } else if (baseTheme === "system") {
+      setBaseTheme("light");
+    }
+  };
+
+  const isDark = resolvedTheme.includes("dark");
+  const isSystem = baseTheme === "system";
+
+  return (
+    <Button
+      icon
+      variant="ghost"
+      aria-label={`Current theme: ${isSystem ? "system" : isDark ? "dark" : "light"}`}
+      {...props}
+      onClick={handleThemeChange}
+    >
+      {isSystem ? <SunMoon size={20} /> : isDark ? <Moon size={20} /> : <Sun size={20} />}
+    </Button>
+  );
+};
+
+type ThemeTogglesProps = {
+  className?: string;
+  liquidToggleProps?: Omit<LiquidToggleProps, "className">;
+  colorToggleProps?: Omit<ThemeColorToggleProps, "className">;
+};
+
+export const ThemeToggles: React.FC<ThemeTogglesProps> = ({ 
+  className, 
+  liquidToggleProps = {}, 
+  colorToggleProps = {} 
+}) => {
+  return (
+    <div className={cn("flex gap-1", className)}>
+      <LiquidToggle {...liquidToggleProps} />
+      <ThemeColorToggle {...colorToggleProps} />
+    </div>
+  );
+};

package/src/ui/theme/index.ts

@@ -0,0 +1,21 @@
+export { 
+  useTheme, 
+  ThemeProvider, 
+  defaultThemes,
+  computeTheme,
+  parseOldTheme
+} from "./ThemeProvider";
+export { 
+  LiquidToggle, 
+  ThemeColorToggle,
+  ThemeToggles,
+} from "./ThemeToggles";
+export { ThemeScript } from "./themeScript";
+
+export type { 
+  Attribute, 
+  ThemeProviderProps, 
+  UseThemeProps,
+  BaseTheme,
+  ComputedTheme 
+} from "./types";

package/src/ui/theme/themeScript.tsx

@@ -0,0 +1,179 @@
+import { memo } from "react";
+
+import { Attribute, ThemeProviderProps } from "./types";
+
+const themeScript = (
+  defaultTheme: string,
+  storageKey: string,
+  attribute: Attribute | Attribute[],
+  themes: string[],
+  value?: Record<string, string> | undefined,
+  forcedTheme?: string | undefined,
+  enableSystem?: boolean | undefined,
+  enableColorScheme?: boolean | undefined,
+) => {
+  const el = document.documentElement;
+
+  function updateDOM(theme: string) {
+    const attributes = Array.isArray(attribute) ? attribute : [attribute];
+
+    attributes.forEach((attr) => {
+      const isClass = attr === "class";
+      const classes = isClass && value ? themes.map((t) => value[t] || t) : themes;
+      if (isClass) {
+        el.classList.remove(...classes);
+        el.classList.add(value && value[theme] ? value[theme] : theme);
+      } else {
+        el.setAttribute(attr, theme);
+      }
+    });
+
+    setColorScheme(theme);
+  }
+
+  function setColorScheme(theme: string) {
+    if (enableColorScheme) {
+      // Extract base color scheme from theme name
+      const isDark = theme.includes("dark");
+      el.style.colorScheme = isDark ? "dark" : "light";
+    }
+  }
+
+  function getSystemTheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "liquid-dark"
+      : "liquid-light";
+  }
+
+  function parseOldTheme(oldTheme: string): { baseTheme: string; isLiquid: boolean } {
+    if (oldTheme === "system") {
+      return { baseTheme: "system", isLiquid: false };
+    }
+    
+    if (oldTheme.startsWith("liquid-")) {
+      const base = oldTheme.replace("liquid-", "");
+      return { baseTheme: base, isLiquid: true };
+    }
+    
+    return { baseTheme: oldTheme, isLiquid: false };
+  }
+
+  function computeTheme(baseTheme: string, isLiquid: boolean, systemIsDark: boolean): string {
+    let resolvedBase: string;
+    
+    if (baseTheme === "system") {
+      resolvedBase = systemIsDark ? "dark" : "light";
+    } else {
+      resolvedBase = baseTheme;
+    }
+    
+    return isLiquid ? `liquid-${resolvedBase}` : resolvedBase;
+  }
+
+  function getStoredState(): { baseTheme: string; isLiquid: boolean } {
+    try {
+      // Try to read from new storage format
+      const baseTheme = localStorage.getItem(`${storageKey}-base`);
+      const isLiquid = localStorage.getItem(`${storageKey}-liquid`);
+      
+      if (baseTheme !== null && isLiquid !== null) {
+        return {
+          baseTheme,
+          isLiquid: isLiquid === "true"
+        };
+      }
+      
+      const oldTheme = localStorage.getItem(storageKey);
+      if (oldTheme) {
+        return parseOldTheme(oldTheme);
+      }
+      
+      const defaultBaseTheme = enableSystem ? "system" : "light";
+      return {
+        baseTheme: defaultBaseTheme,
+        isLiquid: true
+      };
+    } catch {
+      // Default values on error
+      const defaultBaseTheme = enableSystem ? "system" : "light";
+      return {
+        baseTheme: defaultBaseTheme,
+        isLiquid: true
+      };
+    }
+  }
+
+  if (forcedTheme) {
+    updateDOM(forcedTheme);
+  } else {
+    const { baseTheme, isLiquid } = getStoredState();
+    
+    const hasStoredBase = localStorage.getItem(`${storageKey}-base`) !== null;
+    const hasStoredLiquid = localStorage.getItem(`${storageKey}-liquid`) !== null;
+    
+    if (!hasStoredBase || !hasStoredLiquid) {
+      try {
+        if (!hasStoredBase) {
+          localStorage.setItem(`${storageKey}-base`, baseTheme);
+        }
+        if (!hasStoredLiquid) {
+          localStorage.setItem(`${storageKey}-liquid`, String(isLiquid));
+        }
+              } catch {
+        }
+    }
+    
+    const systemIsDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const computedTheme = computeTheme(baseTheme, isLiquid, systemIsDark);
+    updateDOM(computedTheme);
+  }
+};
+
+interface ThemeScriptProps extends ThemeProviderProps {
+  themes: string[];
+  storageKey: string;
+  defaultTheme: string;
+  attribute: Attribute | Attribute[];
+  forcedTheme?: string;
+  enableSystem?: boolean;
+  enableColorScheme?: boolean;
+  value?: Record<string, string>;
+  nonce?: string;
+}
+
+const ThemeScript = memo(
+  ({
+    forcedTheme,
+    storageKey,
+    attribute,
+    enableSystem,
+    enableColorScheme,
+    defaultTheme,
+    value,
+    themes,
+    nonce,
+    scriptProps,
+  }: ThemeScriptProps) => {
+    const scriptArgs = JSON.stringify([
+      defaultTheme,
+      storageKey,
+      attribute,
+      themes,
+      value,
+      forcedTheme,
+      enableSystem,
+      enableColorScheme,
+    ]).slice(1, -1);
+
+    return (
+      <script
+        {...scriptProps}
+        suppressHydrationWarning
+        nonce={typeof window === "undefined" ? nonce : ""}
+        dangerouslySetInnerHTML={{ __html: `(${themeScript.toString()})(${scriptArgs})` }}
+      />
+    );
+  },
+);
+
+export { ThemeScript };

package/src/ui/theme/types.ts

@@ -0,0 +1,61 @@
+import { DetailedHTMLProps, Dispatch, ScriptHTMLAttributes, SetStateAction } from "react";
+
+type DataAttribute = `data-${string}`;
+
+interface ScriptProps
+  extends DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> {
+  [dataAttribute: DataAttribute]: never;
+}
+
+export type BaseTheme = "dark" | "light" | "system";
+
+/** Computed actual theme type */
+export type ComputedTheme = "light" | "dark" | "liquid-light" | "liquid-dark";
+
+export interface UseThemeProps {
+  /** Base theme color */
+  baseTheme: BaseTheme;
+  /** Set base theme color */
+  setBaseTheme: (theme: BaseTheme) => void;
+  /** Whether liquid mode is enabled */
+  isLiquid: boolean;
+  /** Toggle liquid mode */
+  toggleLiquid: () => void;
+  /** Computed actual theme name */
+  computedTheme: ComputedTheme;
+  /** Resolved theme (handles system theme) */
+  resolvedTheme: ComputedTheme;
+  /** System theme preference (only valid when baseTheme is system) */
+  systemTheme?: "dark" | "light" | undefined;
+  /** Forced theme name */
+  forcedTheme?: string | undefined;
+  /** Local storage key */
+  storageKey: string;
+}
+
+export type Attribute = DataAttribute | "class";
+
+export interface ThemeProviderProps {
+  /** Default base theme */
+  defaultBaseTheme?: BaseTheme | undefined;
+  /** Default liquid mode enabled */
+  defaultIsLiquid?: boolean | undefined;
+  /** Forced theme name */
+  forcedTheme?: string | undefined;
+  /** Enable system theme detection */
+  enableSystem?: boolean | undefined;
+  /** Disable CSS transitions when switching themes */
+  disableTransitionOnChange?: boolean | undefined;
+  /** Enable color scheme indication for built-in UI elements */
+  enableColorScheme?: boolean | undefined;
+  /** Local storage key prefix */
+  storageKey?: string | undefined;
+  /** HTML attribute name */
+  attribute?: Attribute | Attribute[] | undefined;
+  /** Theme name to attribute value mapping */
+  value?: Record<string, string> | undefined;
+  /** CSP nonce */
+  nonce?: string;
+  /** Script tag properties */
+  scriptProps?: ScriptProps;
+}

package/src/ui/toast.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { Toaster as Sonner, ToasterProps, toast } from "sonner";
+
+/**
+ * Client-only Toaster wrapper applying default classes.
+ */
+const Toaster = ({ ...props }: ToasterProps) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // Don't render anything during SSR
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <Sonner
+      toastOptions={{
+        className: "vk-toast liquid:liquid-bg",
+        descriptionClassName: "vk-toast-description",
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster, toast };