@thangnqdev/ui 0.1.0

package/src/buttons/ToggleButton.tsx

@@ -0,0 +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';

package/src/buttons/index.ts

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

package/src/buttons/tokens.css

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

package/src/core/ThemeProvider.tsx

@@ -0,0 +1,123 @@
+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;
+}

package/src/core/index.ts

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

package/src/core/tokens.css

@@ -0,0 +1,128 @@
+:root {
+  /* ==========================================================================
+     APPLE DESIGN SYSTEM TOKENS — LIGHT MODE (ALABASTER & FROSTED GLASS)
+     ========================================================================== */
+  --ui-bg-primary: #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;
+
+  /* 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-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);
+}

package/src/data-display/Accordion.tsx

@@ -0,0 +1,147 @@
+import React, { createContext, useContext, useState, forwardRef } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+interface AccordionContextType {
+  openItems: string[];
+  toggleItem: (id: string) => void;
+}
+
+const AccordionContext = createContext<AccordionContextType | null>(null);
+
+export function useAccordion() {
+  const context = useContext(AccordionContext);
+  if (!context) throw new Error('AccordionItem components must be used within <Accordion />');
+  return context;
+}
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  type?: 'single' | 'multiple';
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onValueChange?: (val: any) => void;
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      className,
+      type = 'single',
+      defaultValue,
+      value: controlledValue,
+      onValueChange,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = useState<string[]>(() => {
+      if (Array.isArray(defaultValue)) return defaultValue;
+      if (typeof defaultValue === 'string') return [defaultValue];
+      return [];
+    });
+
+    const openItems =
+      controlledValue !== undefined
+        ? Array.isArray(controlledValue)
+          ? controlledValue
+          : [controlledValue]
+        : internalOpen;
+
+    const toggleItem = (id: string) => {
+      let next: string[];
+      if (type === 'single') {
+        next = openItems.includes(id) ? [] : [id];
+      } else {
+        next = openItems.includes(id) ? openItems.filter((i) => i !== id) : [...openItems, id];
+      }
+
+      setInternalOpen(next);
+      onValueChange?.(type === 'single' ? next[0] || '' : next);
+    };
+
+    return (
+      <AccordionContext.Provider value={{ openItems, toggleItem }}>
+        <div ref={ref} className={cn('divide-y divide-[var(--ui-border-subtle)] border-y border-[var(--ui-border-subtle)]', className)} {...props}>
+          {children}
+        </div>
+      </AccordionContext.Provider>
+    );
+  }
+);
+Accordion.displayName = 'Accordion';
+
+interface AccordionItemContextType {
+  id: string;
+}
+
+const AccordionItemContext = createContext<AccordionItemContextType | null>(null);
+
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ className, value, children, ...props }, ref) => {
+    return (
+      <AccordionItemContext.Provider value={{ id: value }}>
+        <div ref={ref} className={cn('w-full', className)} {...props}>
+          {children}
+        </div>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+AccordionItem.displayName = 'AccordionItem';
+
+export const AccordionTrigger = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { openItems, toggleItem } = useAccordion();
+    const item = useContext(AccordionItemContext);
+    const isOpen = item ? openItems.includes(item.id) : false;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-expanded={isOpen}
+        onClick={() => item && toggleItem(item.id)}
+        className={cn(
+          'flex w-full items-center justify-between py-4 text-sm font-semibold text-[var(--ui-text-primary)] transition-all hover:text-[var(--ui-primary)] text-left',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown
+          className={cn(
+            'h-4 w-4 shrink-0 text-[var(--ui-text-muted)] transition-transform duration-200',
+            isOpen && 'rotate-180 text-[var(--ui-primary)]'
+          )}
+        />
+      </button>
+    );
+  }
+);
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+export const AccordionContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { openItems } = useAccordion();
+    const item = useContext(AccordionItemContext);
+    const isOpen = item ? openItems.includes(item.id) : false;
+
+    if (!isOpen) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn('pb-4 pt-0 text-sm text-[var(--ui-text-secondary)] animate-in fade-in duration-200', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+AccordionContent.displayName = 'AccordionContent';