@thangnqdev/ui 0.2.1 → 0.2.2

package/src/navigation/Tabs.tsx

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