@thangnqdev/ui 0.2.1 → 0.2.3

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);
+}

package/src/data-display/Accordion.tsx

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