@thangnqdev/ui 0.1.2 → 0.2.0

package/src/core/ThemeProvider.tsx

@@ -1,123 +1,135 @@
-import React, { createContext, useContext, useEffect, useState, useMemo } from 'react';
-
-export type Theme = 'dark' | 'light' | 'system';
-
-export interface ThemeProviderProps {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-  attribute?: string;
-  enableSystem?: boolean;
-}
-
-interface ThemeContextType {
-  theme: Theme;
-  resolvedTheme: 'dark' | 'light';
-  setTheme: (theme: Theme) => void;
-  toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-export function ThemeProvider({
-  children,
-  defaultTheme = 'dark',
-  storageKey = 'ui-theme',
-  attribute = 'data-theme',
-  enableSystem = true,
-}: ThemeProviderProps) {
-  const [theme, setThemeState] = useState<Theme>(() => {
-    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {
-      try {
-        const stored = window.localStorage.getItem(storageKey) as Theme | null;
-        if (stored) return stored;
-      } catch {
-        // Ignore storage access errors in test/restricted environments
-      }
-    }
-    return defaultTheme;
-  });
-
-  const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>('dark');
-
-  useEffect(() => {
-    const root = document.documentElement;
-
-    const computeResolved = (t: Theme): 'dark' | 'light' => {
-      if (t === 'system' && enableSystem && typeof window !== 'undefined' && window.matchMedia) {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      }
-      return t === 'dark' ? 'dark' : 'light';
-    };
-
-    const currentResolved = computeResolved(theme);
-    setResolvedTheme(currentResolved);
-
-    // Apply attributes and classes
-    root.setAttribute(attribute, currentResolved);
-    if (currentResolved === 'dark') {
-      root.classList.add('dark');
-      root.classList.remove('light');
-    } else {
-      root.classList.add('light');
-      root.classList.remove('dark');
-    }
-
-    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {
-      try {
-        window.localStorage.setItem(storageKey, theme);
-      } catch {
-        // Ignore storage access errors
-      }
-    }
-  }, [theme, attribute, enableSystem, storageKey]);
-
-  // System theme listener
-  useEffect(() => {
-    if (theme !== 'system' || !enableSystem) return;
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handleChange = () => {
-      const newResolved = mediaQuery.matches ? 'dark' : 'light';
-      setResolvedTheme(newResolved);
-      document.documentElement.setAttribute(attribute, newResolved);
-      if (newResolved === 'dark') {
-        document.documentElement.classList.add('dark');
-        document.documentElement.classList.remove('light');
-      } else {
-        document.documentElement.classList.add('light');
-        document.documentElement.classList.remove('dark');
-      }
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, [theme, enableSystem, attribute]);
-
-  const toggleTheme = () => {
-    setThemeState((prev) => {
-      if (prev === 'dark') return 'light';
-      return 'dark';
-    });
-  };
-
-  const value = useMemo(
-    () => ({
-      theme,
-      resolvedTheme,
-      setTheme: setThemeState,
-      toggleTheme,
-    }),
-    [theme, resolvedTheme]
-  );
-
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
-}
-
-export function useTheme(): ThemeContextType {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-}
+import React, { createContext, useContext, useEffect, useState, useMemo, useCallback } from 'react';
+
+export type Theme = 'dark' | 'light' | 'system';
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+  attribute?: string;
+  enableSystem?: boolean;
+}
+
+interface ThemeContextType {
+  theme: Theme;
+  resolvedTheme: 'dark' | 'light';
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'dark',
+  storageKey = 'ui-theme',
+  attribute = 'data-theme',
+  enableSystem = true,
+}: ThemeProviderProps) {
+  // Always initialize identically on SSR and initial client pass to avoid hydration mismatches
+  const [theme, setThemeState] = useState<Theme>(defaultTheme);
+  const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>(
+    defaultTheme === 'light' ? 'light' : 'dark'
+  );
+
+  const computeResolved = useCallback(
+    (t: Theme): 'dark' | 'light' => {
+      if (t === 'system' && enableSystem && typeof window !== 'undefined' && window.matchMedia) {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+      return t === 'dark' ? 'dark' : 'light';
+    },
+    [enableSystem]
+  );
+
+  // Client-side initialization: read storage once mounted
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    try {
+      const stored = window.localStorage?.getItem(storageKey) as Theme | null;
+      if (stored && stored !== theme) {
+        setThemeState(stored);
+      }
+    } catch {
+      // Ignore storage access errors in restricted iframe/incognito environments
+    }
+  }, [storageKey, theme]);
+
+  // Sync theme changes to DOM and storage
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    const root = document.documentElement;
+    const currentResolved = computeResolved(theme);
+    setResolvedTheme(currentResolved);
+
+    root.setAttribute(attribute, currentResolved);
+    if (currentResolved === 'dark') {
+      root.classList.add('dark');
+      root.classList.remove('light');
+    } else {
+      root.classList.add('light');
+      root.classList.remove('dark');
+    }
+
+    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {
+      try {
+        window.localStorage.setItem(storageKey, theme);
+      } catch {
+        // Ignore storage access errors
+      }
+    }
+  }, [theme, attribute, computeResolved, storageKey]);
+
+  // System media query listener
+  useEffect(() => {
+    if (theme !== 'system' || !enableSystem || typeof window === 'undefined' || !window.matchMedia) return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      const newResolved = mediaQuery.matches ? 'dark' : 'light';
+      setResolvedTheme(newResolved);
+      if (typeof document !== 'undefined') {
+        document.documentElement.setAttribute(attribute, newResolved);
+        if (newResolved === 'dark') {
+          document.documentElement.classList.add('dark');
+          document.documentElement.classList.remove('light');
+        } else {
+          document.documentElement.classList.add('light');
+          document.documentElement.classList.remove('dark');
+        }
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme, enableSystem, attribute]);
+
+  const toggleTheme = () => {
+    setThemeState((prev) => {
+      if (prev === 'dark') return 'light';
+      return 'dark';
+    });
+  };
+
+  const value = useMemo(
+    () => ({
+      theme,
+      resolvedTheme,
+      setTheme: setThemeState,
+      toggleTheme,
+    }),
+    [theme, resolvedTheme]
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}

package/src/core/index.ts

@@ -1,2 +1,2 @@
-export * from './ThemeProvider';
-export * from '../utils/cn';
+export * from './ThemeProvider';
+export * from '../utils/cn';

package/src/core/tokens.css

@@ -1,134 +1,134 @@
-:root {
-  /* ==========================================================================
-     APPLE DESIGN SYSTEM TOKENS — LIGHT MODE (ALABASTER & FROSTED GLASS)
-     ========================================================================== */
-  --ui-bg-primary: #f5f5f7;
-  --ui-bg-page: #f5f5f7;
-  --ui-bg-secondary: #ffffff;
-  --ui-bg-tertiary: #e8e8ed;
-  --ui-bg-surface: rgba(255, 255, 255, 0.75);
-  --ui-bg-overlay: rgba(0, 0, 0, 0.28);
-  
-  --ui-border-subtle: rgba(0, 0, 0, 0.06);
-  --ui-border-default: rgba(0, 0, 0, 0.10);
-  --ui-border-strong: rgba(0, 0, 0, 0.20);
-
-  --ui-text-primary: #1d1d1f;
-  --ui-text-secondary: #515154;
-  --ui-text-muted: #86868b;
-  --ui-text-inverse: #ffffff;
-
-  /* Typography Fonts */
-  --ui-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Inter, sans-serif;
-  --ui-font-mono: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
-
-  /* Apple System Colors */
-  --ui-primary: #0071e3;
-  --ui-primary-hover: #0077ed;
-  --ui-primary-fg: #ffffff;
-  --ui-primary-glow: rgba(0, 113, 227, 0.25);
-  
-  --ui-secondary: #06c;
-  --ui-secondary-hover: #0071e3;
-  --ui-secondary-fg: #ffffff;
-  --ui-secondary-glow: rgba(0, 102, 204, 0.25);
-
-  --ui-accent: #af52de;
-  --ui-accent-hover: #bf5af2;
-  --ui-accent-fg: #ffffff;
-
-  /* Apple Semantic Feedback */
-  --ui-success: #34c759;
-  --ui-success-subtle: rgba(52, 199, 89, 0.12);
-  --ui-success-fg: #ffffff;
-
-  --ui-warning: #ff9500;
-  --ui-warning-subtle: rgba(255, 149, 0, 0.12);
-  --ui-warning-fg: #ffffff;
-
-  --ui-error: #ff3b30;
-  --ui-error-subtle: rgba(255, 59, 48, 0.12);
-  --ui-error-fg: #ffffff;
-
-  --ui-info: #0071e3;
-  --ui-info-subtle: rgba(0, 113, 227, 0.12);
-  --ui-info-fg: #ffffff;
-
-  /* Apple Shadows & Translucency */
-  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --ui-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.12);
-  --ui-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.16);
-  --ui-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.2);
-  --ui-focus-ring: 0 0 0 4px rgba(0, 113, 227, 0.35);
-
-  /* Radii (Apple Continuous Corners) */
-  --ui-radius-sm: 0.5rem;
-  --ui-radius-md: 0.75rem;
-  --ui-radius-lg: 1.125rem;
-  --ui-radius-xl: 1.5rem;
-  --ui-radius-2xl: 2rem;
-  --ui-radius-full: 9999px;
-
-  /* Transitions (Apple Spring Curves) */
-  --ui-transition-fast: 160ms cubic-bezier(0.25, 1, 0.5, 1);
-  --ui-transition-normal: 280ms cubic-bezier(0.25, 1, 0.5, 1);
-  --ui-transition-slow: 420ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-
-.dark, [data-theme="dark"] {
-  /* ==========================================================================
-     APPLE DESIGN SYSTEM TOKENS — DARK MODE (VISIONOS OBSIDIAN & LIQUID GLASS)
-     ========================================================================== */
-  --ui-bg-primary: #000000;
-  --ui-bg-page: #000000;
-  --ui-bg-secondary: #161618;
-  --ui-bg-tertiary: #242426;
-  --ui-bg-surface: rgba(30, 30, 34, 0.72);
-  --ui-bg-overlay: rgba(0, 0, 0, 0.75);
-
-  --ui-border-subtle: rgba(255, 255, 255, 0.08);
-  --ui-border-default: rgba(255, 255, 255, 0.14);
-  --ui-border-strong: rgba(255, 255, 255, 0.25);
-
-  --ui-text-primary: #f5f5f7;
-  --ui-text-secondary: #a1a1a6;
-  --ui-text-muted: #6e6e73;
-  --ui-text-inverse: #000000;
-
-  /* Apple Vision Dark System Colors */
-  --ui-primary: #2997ff;
-  --ui-primary-hover: #47a6ff;
-  --ui-primary-fg: #ffffff;
-  --ui-primary-glow: rgba(41, 151, 255, 0.35);
-
-  --ui-secondary: #64d2ff;
-  --ui-secondary-hover: #7dd9ff;
-  --ui-secondary-fg: #000000;
-  --ui-secondary-glow: rgba(100, 210, 255, 0.35);
-
-  --ui-accent: #bf5af2;
-  --ui-accent-hover: #d27fff;
-  --ui-accent-fg: #ffffff;
-
-  --ui-success: #30d158;
-  --ui-success-subtle: rgba(48, 209, 88, 0.15);
-  --ui-success-fg: #ffffff;
-
-  --ui-warning: #ffd60a;
-  --ui-warning-subtle: rgba(255, 214, 10, 0.15);
-  --ui-warning-fg: #000000;
-
-  --ui-error: #ff453a;
-  --ui-error-subtle: rgba(255, 69, 58, 0.15);
-  --ui-error-fg: #ffffff;
-
-  --ui-info: #0a84ff;
-  --ui-info-subtle: rgba(10, 132, 255, 0.15);
-  --ui-info-fg: #ffffff;
-
-  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
-  --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
-  --ui-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16);
-  --ui-shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.22);
-  --ui-focus-ring: 0 0 0 4px rgba(41, 151, 255, 0.4);
-}
+:root {
+  /* ==========================================================================
+     APPLE DESIGN SYSTEM TOKENS — LIGHT MODE (ALABASTER & FROSTED GLASS)
+     ========================================================================== */
+  --ui-bg-primary: #f5f5f7;
+  --ui-bg-page: #f5f5f7;
+  --ui-bg-secondary: #ffffff;
+  --ui-bg-tertiary: #e8e8ed;
+  --ui-bg-surface: rgba(255, 255, 255, 0.75);
+  --ui-bg-overlay: rgba(0, 0, 0, 0.28);
+  
+  --ui-border-subtle: rgba(0, 0, 0, 0.06);
+  --ui-border-default: rgba(0, 0, 0, 0.10);
+  --ui-border-strong: rgba(0, 0, 0, 0.20);
+
+  --ui-text-primary: #1d1d1f;
+  --ui-text-secondary: #515154;
+  --ui-text-muted: #86868b;
+  --ui-text-inverse: #ffffff;
+
+  /* Typography Fonts */
+  --ui-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Inter, sans-serif;
+  --ui-font-mono: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
+
+  /* Apple System Colors */
+  --ui-primary: #0071e3;
+  --ui-primary-hover: #0077ed;
+  --ui-primary-fg: #ffffff;
+  --ui-primary-glow: rgba(0, 113, 227, 0.25);
+  
+  --ui-secondary: #06c;
+  --ui-secondary-hover: #0071e3;
+  --ui-secondary-fg: #ffffff;
+  --ui-secondary-glow: rgba(0, 102, 204, 0.25);
+
+  --ui-accent: #af52de;
+  --ui-accent-hover: #bf5af2;
+  --ui-accent-fg: #ffffff;
+
+  /* Apple Semantic Feedback */
+  --ui-success: #34c759;
+  --ui-success-subtle: rgba(52, 199, 89, 0.12);
+  --ui-success-fg: #ffffff;
+
+  --ui-warning: #ff9500;
+  --ui-warning-subtle: rgba(255, 149, 0, 0.12);
+  --ui-warning-fg: #ffffff;
+
+  --ui-error: #ff3b30;
+  --ui-error-subtle: rgba(255, 59, 48, 0.12);
+  --ui-error-fg: #ffffff;
+
+  --ui-info: #0071e3;
+  --ui-info-subtle: rgba(0, 113, 227, 0.12);
+  --ui-info-fg: #ffffff;
+
+  /* Apple Shadows & Translucency */
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --ui-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.12);
+  --ui-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.16);
+  --ui-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.2);
+  --ui-focus-ring: 0 0 0 4px rgba(0, 113, 227, 0.35);
+
+  /* Radii (Apple Continuous Corners) */
+  --ui-radius-sm: 0.5rem;
+  --ui-radius-md: 0.75rem;
+  --ui-radius-lg: 1.125rem;
+  --ui-radius-xl: 1.5rem;
+  --ui-radius-2xl: 2rem;
+  --ui-radius-full: 9999px;
+
+  /* Transitions (Apple Spring Curves) */
+  --ui-transition-fast: 160ms cubic-bezier(0.25, 1, 0.5, 1);
+  --ui-transition-normal: 280ms cubic-bezier(0.25, 1, 0.5, 1);
+  --ui-transition-slow: 420ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.dark, [data-theme="dark"] {
+  /* ==========================================================================
+     APPLE DESIGN SYSTEM TOKENS — DARK MODE (VISIONOS OBSIDIAN & LIQUID GLASS)
+     ========================================================================== */
+  --ui-bg-primary: #000000;
+  --ui-bg-page: #000000;
+  --ui-bg-secondary: #161618;
+  --ui-bg-tertiary: #242426;
+  --ui-bg-surface: rgba(30, 30, 34, 0.72);
+  --ui-bg-overlay: rgba(0, 0, 0, 0.75);
+
+  --ui-border-subtle: rgba(255, 255, 255, 0.08);
+  --ui-border-default: rgba(255, 255, 255, 0.14);
+  --ui-border-strong: rgba(255, 255, 255, 0.25);
+
+  --ui-text-primary: #f5f5f7;
+  --ui-text-secondary: #a1a1a6;
+  --ui-text-muted: #6e6e73;
+  --ui-text-inverse: #000000;
+
+  /* Apple Vision Dark System Colors */
+  --ui-primary: #2997ff;
+  --ui-primary-hover: #47a6ff;
+  --ui-primary-fg: #ffffff;
+  --ui-primary-glow: rgba(41, 151, 255, 0.35);
+
+  --ui-secondary: #64d2ff;
+  --ui-secondary-hover: #7dd9ff;
+  --ui-secondary-fg: #000000;
+  --ui-secondary-glow: rgba(100, 210, 255, 0.35);
+
+  --ui-accent: #bf5af2;
+  --ui-accent-hover: #d27fff;
+  --ui-accent-fg: #ffffff;
+
+  --ui-success: #30d158;
+  --ui-success-subtle: rgba(48, 209, 88, 0.15);
+  --ui-success-fg: #ffffff;
+
+  --ui-warning: #ffd60a;
+  --ui-warning-subtle: rgba(255, 214, 10, 0.15);
+  --ui-warning-fg: #000000;
+
+  --ui-error: #ff453a;
+  --ui-error-subtle: rgba(255, 69, 58, 0.15);
+  --ui-error-fg: #ffffff;
+
+  --ui-info: #0a84ff;
+  --ui-info-subtle: rgba(10, 132, 255, 0.15);
+  --ui-info-fg: #ffffff;
+
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
+  --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
+  --ui-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16);
+  --ui-shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.22);
+  --ui-focus-ring: 0 0 0 4px rgba(41, 151, 255, 0.4);
+}