@thangnqdev/ui 0.1.2 → 0.2.0

package/src/navigation/Stepper.tsx

@@ -1,93 +1,93 @@
-import React, { forwardRef } from 'react';
-import { Check } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export interface StepItem {
-  title: string;
-  description?: string;
-}
-
-export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
-  steps: StepItem[];
-  currentStep: number;
-  orientation?: 'horizontal' | 'vertical';
-}
-
-export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
-  ({ className, steps, currentStep, orientation = 'horizontal', ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        role="navigation"
-        aria-label="Progress Stepper"
-        className={cn(
-          'flex',
-          orientation === 'horizontal'
-            ? 'flex-row items-center w-full justify-between'
-            : 'flex-col space-y-6',
-          className
-        )}
-        {...props}
-      >
-        {steps.map((step, index) => {
-          const isCompleted = index < currentStep;
-          const isActive = index === currentStep;
-          const isPending = index > currentStep;
-
-          return (
-            <div
-              key={index}
-              className={cn(
-                'flex items-center',
-                orientation === 'horizontal' ? 'flex-1 last:flex-none' : 'flex-row items-start'
-              )}
-            >
-              <div className="flex items-center gap-3">
-                {/* Step indicator circle */}
-                <div
-                  className={cn(
-                    'flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors flex-shrink-0',
-                    isCompleted && 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]',
-                    isActive && 'border-2 border-[var(--ui-primary)] text-[var(--ui-primary)] bg-[var(--ui-bg-surface)] ring-4 ring-[var(--ui-primary)]/20',
-                    isPending && 'border border-[var(--ui-border-default)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]'
-                  )}
-                >
-                  {isCompleted ? <Check className="w-4 h-4 stroke-[3]" /> : index + 1}
-                </div>
-
-                {/* Step details */}
-                <div className="flex flex-col">
-                  <span
-                    className={cn(
-                      'text-xs font-semibold',
-                      isActive ? 'text-[var(--ui-text-primary)]' : 'text-[var(--ui-text-muted)]'
-                    )}
-                  >
-                    {step.title}
-                  </span>
-                  {step.description && (
-                    <span className="text-[11px] text-[var(--ui-text-muted)] opacity-80">
-                      {step.description}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              {/* Connecting line */}
-              {orientation === 'horizontal' && index < steps.length - 1 && (
-                <div
-                  className={cn(
-                    'flex-1 h-0.5 mx-4 transition-colors',
-                    isCompleted ? 'bg-[var(--ui-primary)]' : 'bg-[var(--ui-border-subtle)]'
-                  )}
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-);
-
-Stepper.displayName = 'Stepper';
+import React, { forwardRef } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface StepItem {
+  title: string;
+  description?: string;
+}
+
+export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: StepItem[];
+  currentStep: number;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
+  ({ className, steps, currentStep, orientation = 'horizontal', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="navigation"
+        aria-label="Progress Stepper"
+        className={cn(
+          'flex',
+          orientation === 'horizontal'
+            ? 'flex-row items-center w-full justify-between'
+            : 'flex-col space-y-6',
+          className
+        )}
+        {...props}
+      >
+        {steps.map((step, index) => {
+          const isCompleted = index < currentStep;
+          const isActive = index === currentStep;
+          const isPending = index > currentStep;
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                'flex items-center',
+                orientation === 'horizontal' ? 'flex-1 last:flex-none' : 'flex-row items-start'
+              )}
+            >
+              <div className="flex items-center gap-3">
+                {/* Step indicator circle */}
+                <div
+                  className={cn(
+                    'flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors flex-shrink-0',
+                    isCompleted && 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]',
+                    isActive && 'border-2 border-[var(--ui-primary)] text-[var(--ui-primary)] bg-[var(--ui-bg-surface)] ring-4 ring-[var(--ui-primary)]/20',
+                    isPending && 'border border-[var(--ui-border-default)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]'
+                  )}
+                >
+                  {isCompleted ? <Check className="w-4 h-4 stroke-[3]" /> : index + 1}
+                </div>
+
+                {/* Step details */}
+                <div className="flex flex-col">
+                  <span
+                    className={cn(
+                      'text-xs font-semibold',
+                      isActive ? 'text-[var(--ui-text-primary)]' : 'text-[var(--ui-text-muted)]'
+                    )}
+                  >
+                    {step.title}
+                  </span>
+                  {step.description && (
+                    <span className="text-[11px] text-[var(--ui-text-muted)] opacity-80">
+                      {step.description}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* Connecting line */}
+              {orientation === 'horizontal' && index < steps.length - 1 && (
+                <div
+                  className={cn(
+                    'flex-1 h-0.5 mx-4 transition-colors',
+                    isCompleted ? 'bg-[var(--ui-primary)]' : 'bg-[var(--ui-border-subtle)]'
+                  )}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+Stepper.displayName = 'Stepper';

package/src/navigation/Tabs.tsx

@@ -1,133 +1,265 @@
-import React, { createContext, useContext, useState, forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-interface TabsContextType {
-  activeTab: string;
-  setActiveTab: (tab: string) => void;
-  variant?: 'pills' | 'line' | 'enclosed';
-}
-
-const TabsContext = createContext<TabsContextType | null>(null);
-
-export function useTabs() {
-  const context = useContext(TabsContext);
-  if (!context) throw new Error('Tabs compound components must be used within <Tabs />');
-  return context;
-}
-
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
-  defaultValue?: string;
-  value?: string;
-  onValueChange?: (value: string) => void;
-  variant?: 'pills' | 'line' | 'enclosed';
-}
-
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
-  ({ defaultValue = '', value: controlledValue, onValueChange, variant = 'pills', className, children, ...props }, ref) => {
-    const [selectedTab, setSelectedTab] = useState(defaultValue);
-    const activeTab = controlledValue !== undefined ? controlledValue : selectedTab;
-
-    const handleTabChange = (val: string) => {
-      setSelectedTab(val);
-      onValueChange?.(val);
-    };
-
-    return (
-      <TabsContext.Provider value={{ activeTab, setActiveTab: handleTabChange, variant }}>
-        <div ref={ref} className={cn('w-full flex flex-col space-y-4', className)} {...props}>
-          {children}
-        </div>
-      </TabsContext.Provider>
-    );
-  }
-);
-Tabs.displayName = 'Tabs';
-
-export const TabsList = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
-    const { variant } = useTabs();
-
-    return (
-      <div
-        ref={ref}
-        role="tablist"
-        className={cn(
-          'inline-flex items-center',
-          variant === 'pills' && 'p-1 rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] gap-1',
-          variant === 'line' && 'border-b border-[var(--ui-border-default)] gap-6',
-          variant === 'enclosed' && 'border-b border-[var(--ui-border-default)] gap-1',
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-TabsList.displayName = 'TabsList';
-
-export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  value: string;
-}
-
-export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
-  ({ className, value, children, ...props }, ref) => {
-    const { activeTab, setActiveTab, variant } = useTabs();
-    const isActive = activeTab === value;
-
-    return (
-      <button
-        ref={ref}
-        role="tab"
-        type="button"
-        aria-selected={isActive}
-        onClick={() => setActiveTab(value)}
-        className={cn(
-          'inline-flex items-center justify-center font-medium text-sm transition-all 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',
-          variant === 'pills' &&
-            'px-3.5 py-1.5 rounded-[var(--ui-radius-md)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)]',
-          variant === 'pills' && isActive &&
-            'bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] font-semibold shadow-sm',
-          variant === 'line' &&
-            'pb-3 pt-2 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] border-b-2 border-transparent -mb-[1px]',
-          variant === 'line' && isActive &&
-            'border-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold',
-          variant === 'enclosed' &&
-            'px-4 py-2 rounded-t-[var(--ui-radius-md)] border border-transparent text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] -mb-[1px]',
-          variant === 'enclosed' && isActive &&
-            'bg-[var(--ui-bg-surface)] border-[var(--ui-border-default)] border-b-transparent text-[var(--ui-text-primary)] font-semibold',
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-TabsTrigger.displayName = 'TabsTrigger';
-
-export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  value: string;
-}
-
-export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
-  ({ className, value, children, ...props }, ref) => {
-    const { activeTab } = useTabs();
-    if (activeTab !== value) return null;
-
-    return (
-      <div
-        ref={ref}
-        role="tabpanel"
-        tabIndex={0}
-        className={cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] animate-in fade-in duration-150', className)}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-TabsContent.displayName = 'TabsContent';
+import React, { createContext, useContext, useState, forwardRef, useId, useRef, useEffect } from 'react';
+import { cn } from '../utils/cn';
+
+interface TabsContextType {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+  variant?: 'pills' | 'line' | 'enclosed';
+  orientation?: 'horizontal' | 'vertical';
+  baseId: string;
+  registerTab: (value: string, disabled: boolean, element: HTMLButtonElement | null) => void;
+  unregisterTab: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextType | null>(null);
+
+export function useTabs() {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error('Tabs compound components must be used within <Tabs />');
+  return context;
+}
+
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  variant?: 'pills' | 'line' | 'enclosed';
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  (
+    {
+      defaultValue = '',
+      value: controlledValue,
+      onValueChange,
+      variant = 'pills',
+      orientation = 'horizontal',
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const baseId = useId();
+    const [selectedTab, setSelectedTab] = useState(defaultValue);
+    const activeTab = controlledValue !== undefined ? controlledValue : selectedTab;
+
+    const tabRegistryRef = useRef<Map<string, { disabled: boolean; element: HTMLButtonElement | null }>>(
+      new Map()
+    );
+
+    const registerTab = (value: string, disabled: boolean, element: HTMLButtonElement | null) => {
+      tabRegistryRef.current.set(value, { disabled, element });
+    };
+
+    const unregisterTab = (value: string) => {
+      tabRegistryRef.current.delete(value);
+    };
+
+    const handleTabChange = (val: string) => {
+      if (!controlledValue) {
+        setSelectedTab(val);
+      }
+      onValueChange?.(val);
+    };
+
+    return (
+      <TabsContext.Provider
+        value={{
+          activeTab,
+          setActiveTab: handleTabChange,
+          variant,
+          orientation,
+          baseId,
+          registerTab,
+          unregisterTab,
+        }}
+      >
+        <div
+          ref={ref}
+          className={cn(
+            'w-full flex space-y-4',
+            orientation === 'vertical' ? 'flex-row space-y-0 space-x-6' : 'flex-col',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TabsContext.Provider>
+    );
+  }
+);
+Tabs.displayName = 'Tabs';
+
+export const TabsList = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, onKeyDown, ...props }, ref) => {
+    const { variant, orientation, activeTab, setActiveTab } = useTabs();
+    const listRef = useRef<HTMLDivElement>(null);
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+
+      const tabs = Array.from(
+        listRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]:not([disabled])') || []
+      );
+      if (tabs.length === 0) return;
+
+      const currentIndex = tabs.findIndex((tab) => tab.getAttribute('aria-selected') === 'true');
+      let nextIndex = -1;
+
+      const isPrev =
+        (orientation === 'horizontal' && e.key === 'ArrowLeft') ||
+        (orientation === 'vertical' && e.key === 'ArrowUp');
+      const isNext =
+        (orientation === 'horizontal' && e.key === 'ArrowRight') ||
+        (orientation === 'vertical' && e.key === 'ArrowDown');
+
+      if (isNext) {
+        e.preventDefault();
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % tabs.length;
+      } else if (isPrev) {
+        e.preventDefault();
+        nextIndex = currentIndex === -1 ? tabs.length - 1 : (currentIndex - 1 + tabs.length) % tabs.length;
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        nextIndex = 0;
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        nextIndex = tabs.length - 1;
+      }
+
+      if (nextIndex !== -1 && tabs[nextIndex]) {
+        const nextTab = tabs[nextIndex];
+        nextTab.focus();
+        nextTab.click();
+      }
+    };
+
+    return (
+      <div
+        ref={(node) => {
+          (listRef as any).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) (ref as any).current = node;
+        }}
+        role="tablist"
+        aria-orientation={orientation}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'inline-flex',
+          orientation === 'vertical' ? 'flex-col items-stretch gap-1' : 'items-center',
+          variant === 'pills' &&
+            'p-1 rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] gap-1',
+          variant === 'line' &&
+            (orientation === 'vertical' ? 'border-r border-[var(--ui-border-default)] pr-2' : 'border-b border-[var(--ui-border-default)] gap-6'),
+          variant === 'enclosed' && 'border-b border-[var(--ui-border-default)] gap-1',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+TabsList.displayName = 'TabsList';
+
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+}
+
+export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ className, value, disabled = false, children, id, onClick, ...props }, ref) => {
+    const { activeTab, setActiveTab, variant, baseId, registerTab, unregisterTab } = useTabs();
+    const isActive = activeTab === value;
+
+    const triggerId = id || `tab-${baseId}-${value}`;
+    const panelId = `panel-${baseId}-${value}`;
+
+    const innerRef = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+      registerTab(value, Boolean(disabled), innerRef.current);
+      return () => unregisterTab(value);
+    }, [value, disabled, registerTab, unregisterTab]);
+
+    return (
+      <button
+        ref={(node) => {
+          (innerRef as any).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) (ref as any).current = node;
+        }}
+        id={triggerId}
+        role="tab"
+        type="button"
+        disabled={disabled}
+        aria-selected={isActive}
+        aria-controls={panelId}
+        tabIndex={isActive ? 0 : -1}
+        onClick={(e) => {
+          onClick?.(e);
+          if (!disabled) setActiveTab(value);
+        }}
+        className={cn(
+          'inline-flex items-center justify-center font-medium text-sm transition-all 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',
+          variant === 'pills' &&
+            'px-3.5 py-1.5 rounded-[var(--ui-radius-md)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)]',
+          variant === 'pills' &&
+            isActive &&
+            'bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] font-semibold shadow-sm',
+          variant === 'line' &&
+            'pb-3 pt-2 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] border-b-2 border-transparent -mb-[1px]',
+          variant === 'line' && isActive && 'border-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold',
+          variant === 'enclosed' &&
+            'px-4 py-2 rounded-t-[var(--ui-radius-md)] border border-transparent text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] -mb-[1px]',
+          variant === 'enclosed' &&
+            isActive &&
+            'bg-[var(--ui-bg-surface)] border-[var(--ui-border-default)] border-b-transparent text-[var(--ui-text-primary)] font-semibold',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+TabsTrigger.displayName = 'TabsTrigger';
+
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
+  ({ className, value, children, id, ...props }, ref) => {
+    const { activeTab, baseId } = useTabs();
+    const isActive = activeTab === value;
+
+    if (!isActive) return null;
+
+    const panelId = id || `panel-${baseId}-${value}`;
+    const triggerId = `tab-${baseId}-${value}`;
+
+    return (
+      <div
+        ref={ref}
+        id={panelId}
+        role="tabpanel"
+        aria-labelledby={triggerId}
+        tabIndex={0}
+        className={cn(
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] animate-in fade-in duration-150',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+TabsContent.displayName = 'TabsContent';

package/src/navigation/index.ts

@@ -1,6 +1,6 @@
-export * from './Tabs';
-export * from './Breadcrumb';
-export * from './Pagination';
-export * from './Stepper';
-export * from './DropdownMenu';
-export * from './CommandPalette';
+export * from './Tabs';
+export * from './Breadcrumb';
+export * from './Pagination';
+export * from './Stepper';
+export * from './DropdownMenu';
+export * from './CommandPalette';

package/src/navigation/tokens.css

@@ -1,4 +1,4 @@
-/* Navigation Tokens */
-:root {
-  --ui-nav-height: 4rem;
-}
+/* Navigation Tokens */
+:root {
+  --ui-nav-height: 4rem;
+}