@thangnqdev/ui 0.2.1 → 0.2.3

package/src/buttons/ToggleButton.tsx

@@ -1,157 +1,157 @@
-import React, { forwardRef, createContext, useContext } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const toggleVariants = cva(
-  'inline-flex items-center justify-center text-sm font-medium transition-colors hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer',
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent text-[var(--ui-text-secondary)]',
-        outline:
-          'border border-[var(--ui-border-default)] bg-transparent hover:bg-[var(--ui-bg-tertiary)]',
-      },
-      size: {
-        sm: 'h-8 px-2.5 text-xs rounded-[var(--ui-radius-sm)]',
-        md: 'h-9 px-3 text-sm rounded-[var(--ui-radius-md)]',
-        lg: 'h-10 px-4 text-base rounded-[var(--ui-radius-md)]',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'md',
-    },
-  }
-);
-
-interface ToggleGroupContextType {
-  value?: string | string[];
-  onChange?: (val: string) => void;
-  variant?: 'default' | 'outline';
-  size?: 'sm' | 'md' | 'lg';
-}
-
-const ToggleGroupContext = createContext<ToggleGroupContextType>({});
-
-export interface ToggleButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof toggleVariants> {
-  pressed?: boolean;
-  value?: string;
-}
-
-export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
-  ({ className, pressed: customPressed, variant, size, value, onClick, children, ...props }, ref) => {
-    const group = useContext(ToggleGroupContext);
-
-    const isPressed =
-      customPressed !== undefined
-        ? customPressed
-        : group.value !== undefined && value !== undefined
-        ? Array.isArray(group.value)
-          ? group.value.includes(value)
-          : group.value === value
-        : false;
-
-    const currentVariant = variant || group.variant || 'default';
-    const currentSize = size || group.size || 'md';
-
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      if (value && group.onChange) {
-        group.onChange(value);
-      }
-      onClick?.(e);
-    };
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        aria-pressed={isPressed}
-        data-state={isPressed ? 'on' : 'off'}
-        onClick={handleClick}
-        className={cn(
-          toggleVariants({ variant: currentVariant, size: currentSize }),
-          isPressed &&
-            'bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)] font-semibold shadow-inner border-[var(--ui-border-strong)]',
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-ToggleButton.displayName = 'ToggleButton';
-
-export interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  type?: 'single' | 'multiple';
-  value?: string | string[];
-  defaultValue?: string | string[];
-  onValueChange?: (value: any) => void;
-  variant?: 'default' | 'outline';
-  size?: 'sm' | 'md' | 'lg';
-}
-
-export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
-  (
-    {
-      className,
-      type = 'single',
-      value: controlledValue,
-      defaultValue,
-      onValueChange,
-      variant = 'outline',
-      size = 'md',
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [stateValue, setStateValue] = React.useState<string | string[]>(
-      defaultValue || (type === 'multiple' ? [] : '')
-    );
-
-    const currentValue = controlledValue !== undefined ? controlledValue : stateValue;
-
-    const handleItemChange = (itemValue: string) => {
-      if (type === 'single') {
-        const next = currentValue === itemValue ? '' : itemValue;
-        setStateValue(next);
-        onValueChange?.(next);
-      } else {
-        const arr = Array.isArray(currentValue) ? currentValue : [];
-        const next = arr.includes(itemValue)
-          ? arr.filter((v) => v !== itemValue)
-          : [...arr, itemValue];
-        setStateValue(next);
-        onValueChange?.(next);
-      }
-    };
-
-    return (
-      <ToggleGroupContext.Provider
-        value={{
-          value: currentValue,
-          onChange: handleItemChange,
-          variant,
-          size,
-        }}
-      >
-        <div
-          ref={ref}
-          role="group"
-          className={cn(
-            'inline-flex items-center gap-1 rounded-[var(--ui-radius-md)] p-1 bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)]',
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </ToggleGroupContext.Provider>
-    );
-  }
-);
-ToggleGroup.displayName = 'ToggleGroup';
+import React, { forwardRef, createContext, useContext } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center text-sm font-medium transition-colors hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent text-[var(--ui-text-secondary)]',
+        outline:
+          'border border-[var(--ui-border-default)] bg-transparent hover:bg-[var(--ui-bg-tertiary)]',
+      },
+      size: {
+        sm: 'h-8 px-2.5 text-xs rounded-[var(--ui-radius-sm)]',
+        md: 'h-9 px-3 text-sm rounded-[var(--ui-radius-md)]',
+        lg: 'h-10 px-4 text-base rounded-[var(--ui-radius-md)]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+interface ToggleGroupContextType {
+  value?: string | string[];
+  onChange?: (val: string) => void;
+  variant?: 'default' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextType>({});
+
+export interface ToggleButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof toggleVariants> {
+  pressed?: boolean;
+  value?: string;
+}
+
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  ({ className, pressed: customPressed, variant, size, value, onClick, children, ...props }, ref) => {
+    const group = useContext(ToggleGroupContext);
+
+    const isPressed =
+      customPressed !== undefined
+        ? customPressed
+        : group.value !== undefined && value !== undefined
+        ? Array.isArray(group.value)
+          ? group.value.includes(value)
+          : group.value === value
+        : false;
+
+    const currentVariant = variant || group.variant || 'default';
+    const currentSize = size || group.size || 'md';
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (value && group.onChange) {
+        group.onChange(value);
+      }
+      onClick?.(e);
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={isPressed}
+        data-state={isPressed ? 'on' : 'off'}
+        onClick={handleClick}
+        className={cn(
+          toggleVariants({ variant: currentVariant, size: currentSize }),
+          isPressed &&
+            'bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)] font-semibold shadow-inner border-[var(--ui-border-strong)]',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+ToggleButton.displayName = 'ToggleButton';
+
+export interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  type?: 'single' | 'multiple';
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: any) => void;
+  variant?: 'default' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+  (
+    {
+      className,
+      type = 'single',
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      variant = 'outline',
+      size = 'md',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [stateValue, setStateValue] = React.useState<string | string[]>(
+      defaultValue || (type === 'multiple' ? [] : '')
+    );
+
+    const currentValue = controlledValue !== undefined ? controlledValue : stateValue;
+
+    const handleItemChange = (itemValue: string) => {
+      if (type === 'single') {
+        const next = currentValue === itemValue ? '' : itemValue;
+        setStateValue(next);
+        onValueChange?.(next);
+      } else {
+        const arr = Array.isArray(currentValue) ? currentValue : [];
+        const next = arr.includes(itemValue)
+          ? arr.filter((v) => v !== itemValue)
+          : [...arr, itemValue];
+        setStateValue(next);
+        onValueChange?.(next);
+      }
+    };
+
+    return (
+      <ToggleGroupContext.Provider
+        value={{
+          value: currentValue,
+          onChange: handleItemChange,
+          variant,
+          size,
+        }}
+      >
+        <div
+          ref={ref}
+          role="group"
+          className={cn(
+            'inline-flex items-center gap-1 rounded-[var(--ui-radius-md)] p-1 bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)]',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </ToggleGroupContext.Provider>
+    );
+  }
+);
+ToggleGroup.displayName = 'ToggleGroup';

package/src/buttons/index.ts

@@ -1,5 +1,5 @@
-export * from './Button';
-export * from './IconButton';
-export * from './ButtonGroup';
-export * from './ToggleButton';
-export * from './SplitButton';
+export * from './Button';
+export * from './IconButton';
+export * from './ButtonGroup';
+export * from './ToggleButton';
+export * from './SplitButton';

package/src/buttons/tokens.css

@@ -1,6 +1,6 @@
-/* Button Tokens */
-:root {
-  --ui-btn-height-sm: 2rem;
-  --ui-btn-height-md: 2.5rem;
-  --ui-btn-height-lg: 3rem;
-}
+/* Button Tokens */
+:root {
+  --ui-btn-height-sm: 2rem;
+  --ui-btn-height-md: 2.5rem;
+  --ui-btn-height-lg: 3rem;
+}

package/src/core/ThemeProvider.tsx

@@ -1,135 +1,153 @@
-import React, { createContext, useContext, useEffect, useState, useMemo, useCallback } from 'react';
-
-export type Theme = 'dark' | 'light' | 'system';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} 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 interface ThemeProviderProps {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-  attribute?: string;
-  enableSystem?: boolean;
-}
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
-interface ThemeContextType {
-  theme: Theme;
-  resolvedTheme: 'dark' | 'light';
-  setTheme: (theme: Theme) => void;
-  toggleTheme: () => void;
+function isTheme(value: string | null): value is Theme {
+  return value === 'dark' || value === 'light' || value === 'system';
 }
-
-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);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'light',
+  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'
+    defaultTheme === 'dark' ? 'dark' : 'light'
   );
-
-  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';
+  const pendingStoredThemeRef = useRef<{ storageKey: string; theme: Theme } | null>(null);
+
+  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]
+  );
+
+  const applyResolvedTheme = useCallback(
+    (nextResolvedTheme: 'dark' | 'light') => {
+      setResolvedTheme(nextResolvedTheme);
+
+      if (typeof document === 'undefined') return;
+
+      const root = document.documentElement;
+      root.setAttribute(attribute, nextResolvedTheme);
+      root.classList.toggle('dark', nextResolvedTheme === 'dark');
+      root.classList.toggle('light', nextResolvedTheme === 'light');
     },
-    [enableSystem]
+    [attribute]
   );
 
-  // Client-side initialization: read storage once mounted
-  useEffect(() => {
+  // Read the persisted value before paint. The pending ref prevents the DOM/storage
+  // sync below from writing defaultTheme over a different persisted theme first.
+  useIsomorphicLayoutEffect(() => {
     if (typeof window === 'undefined') return;
 
+    let initialTheme = defaultTheme;
     try {
-      const stored = window.localStorage?.getItem(storageKey) as Theme | null;
-      if (stored && stored !== theme) {
-        setThemeState(stored);
-      }
+      const stored = window.localStorage?.getItem(storageKey);
+      if (isTheme(stored)) initialTheme = 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;
+    pendingStoredThemeRef.current = { storageKey, theme: initialTheme };
+    setThemeState((currentTheme) => (currentTheme === initialTheme ? currentTheme : initialTheme));
+  }, [storageKey]);
+
+  // Apply user changes before paint. Storage initialization and user updates now
+  // have a single write direction, so a click cannot oscillate light <-> dark.
+  useIsomorphicLayoutEffect(() => {
+    const pendingStoredTheme = pendingStoredThemeRef.current;
+    if (pendingStoredTheme?.storageKey === storageKey) {
+      if (pendingStoredTheme.theme !== theme) return;
+      pendingStoredThemeRef.current = null;
+    }
 
-    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');
-    }
+    applyResolvedTheme(currentResolved);
 
     if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {
       try {
-        window.localStorage.setItem(storageKey, theme);
-      } catch {
+        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;
-
+  }, [theme, computeResolved, applyResolvedTheme, 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');
-        }
-      }
+      applyResolvedTheme(newResolved);
     };
-
+
     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;
-}
+  }, [theme, enableSystem, applyResolvedTheme]);
+
+  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';