@thangnqdev/ui 0.1.1 → 0.2.0

package/src/buttons/SplitButton.tsx

@@ -1,86 +1,186 @@
-import React, { forwardRef, useState, useRef, useEffect } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { Button, ButtonProps } from './Button';
-import { cn } from '../utils/cn';
-
-export interface SplitButtonItem {
-  label: React.ReactNode;
-  icon?: React.ReactNode;
-  onClick: () => void;
-  disabled?: boolean;
-}
-
-export interface SplitButtonProps extends Omit<ButtonProps, 'onClick'> {
-  items: SplitButtonItem[];
-  onMainClick?: () => void;
-}
-
-export const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
-  ({ className, items, onMainClick, variant = 'primary', size = 'md', children, disabled, ...props }, ref) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      const handleOutside = (e: MouseEvent) => {
-        if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-          setIsOpen(false);
-        }
-      };
-      if (isOpen) {
-        document.addEventListener('mousedown', handleOutside);
-      }
-      return () => document.removeEventListener('mousedown', handleOutside);
-    }, [isOpen]);
-
-    return (
-      <div ref={containerRef} className={cn('relative inline-flex', className)}>
-        <div ref={ref} className="inline-flex rounded-[var(--ui-radius-md)] shadow-sm">
-          <Button
-            variant={variant}
-            size={size}
-            disabled={disabled}
-            onClick={onMainClick}
-            className="rounded-r-none border-r border-white/20 dark:border-black/20"
-            {...props}
-          >
-            {children}
-          </Button>
-
-          <Button
-            variant={variant}
-            size={size}
-            disabled={disabled}
-            onClick={() => setIsOpen(!isOpen)}
-            aria-expanded={isOpen}
-            aria-haspopup="menu"
-            className="rounded-l-none px-2"
-          >
-            <ChevronDown className={cn('w-4 h-4 transition-transform duration-200', isOpen && 'rotate-180')} />
-          </Button>
-        </div>
-
-        {isOpen && (
-          <div className="absolute top-full right-0 mt-1 w-48 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-lg py-1 z-50 animate-in fade-in zoom-in-95">
-            {items.map((item, i) => (
-              <button
-                key={i}
-                type="button"
-                disabled={item.disabled}
-                onClick={() => {
-                  item.onClick();
-                  setIsOpen(false);
-                }}
-                className="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-50 disabled:pointer-events-none transition-colors"
-              >
-                {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
-                <span className="flex-1 truncate">{item.label}</span>
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-SplitButton.displayName = 'SplitButton';
+import React, { forwardRef, useState, useRef, useEffect, useId } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Button, ButtonProps } from './Button';
+import { cn } from '../utils/cn';
+
+export interface SplitButtonItem {
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export interface SplitButtonProps extends Omit<ButtonProps, 'onClick'> {
+  items: SplitButtonItem[];
+  onMainClick?: () => void;
+  menuAriaLabel?: string;
+}
+
+export const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
+  (
+    {
+      className,
+      items,
+      onMainClick,
+      variant = 'primary',
+      size = 'md',
+      children,
+      disabled,
+      menuAriaLabel = 'More actions',
+      ...props
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState<number>(0);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const triggerBtnRef = useRef<HTMLButtonElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const menuId = `split-button-menu-${useId()}`;
+
+    const enabledItemsIndices = items
+      .map((item, idx) => (!item.disabled ? idx : -1))
+      .filter((idx) => idx !== -1);
+
+    useEffect(() => {
+      const handleOutside = (e: MouseEvent) => {
+        if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener('mousedown', handleOutside);
+      }
+      return () => document.removeEventListener('mousedown', handleOutside);
+    }, [isOpen]);
+
+    // Auto-focus first item when menu opens
+    useEffect(() => {
+      if (isOpen && enabledItemsIndices.length > 0) {
+        setFocusedIndex(enabledItemsIndices[0]);
+        const timer = setTimeout(() => {
+          const itemEl = menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])');
+          itemEl?.focus();
+        }, 10);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+
+    const handleMenuKeyDown = (e: React.KeyboardEvent) => {
+      if (!isOpen) return;
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const currentPos = enabledItemsIndices.indexOf(focusedIndex);
+        const nextPos = (currentPos + 1) % enabledItemsIndices.length;
+        const nextIdx = enabledItemsIndices[nextPos];
+        setFocusedIndex(nextIdx);
+        const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+        buttons?.[nextIdx]?.focus();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const currentPos = enabledItemsIndices.indexOf(focusedIndex);
+        const prevPos = (currentPos - 1 + enabledItemsIndices.length) % enabledItemsIndices.length;
+        const prevIdx = enabledItemsIndices[prevPos];
+        setFocusedIndex(prevIdx);
+        const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+        buttons?.[prevIdx]?.focus();
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        if (enabledItemsIndices.length > 0) {
+          const firstIdx = enabledItemsIndices[0];
+          setFocusedIndex(firstIdx);
+          const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+          buttons?.[firstIdx]?.focus();
+        }
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        if (enabledItemsIndices.length > 0) {
+          const lastIdx = enabledItemsIndices[enabledItemsIndices.length - 1];
+          setFocusedIndex(lastIdx);
+          const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+          buttons?.[lastIdx]?.focus();
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setIsOpen(false);
+        triggerBtnRef.current?.focus();
+      }
+    };
+
+    return (
+      <div ref={containerRef} className={cn('relative inline-flex', className)}>
+        <div ref={ref} className="inline-flex rounded-[var(--ui-radius-md)] shadow-sm">
+          <Button
+            variant={variant}
+            size={size}
+            disabled={disabled}
+            onClick={onMainClick}
+            className="rounded-r-none border-r border-white/20 dark:border-black/20"
+            {...props}
+          >
+            {children}
+          </Button>
+
+          <Button
+            ref={triggerBtnRef}
+            variant={variant}
+            size={size}
+            disabled={disabled}
+            onClick={() => setIsOpen(!isOpen)}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setIsOpen(true);
+              }
+            }}
+            aria-expanded={isOpen}
+            aria-haspopup="menu"
+            aria-controls={isOpen ? menuId : undefined}
+            aria-label={menuAriaLabel}
+            className="rounded-l-none px-2 cursor-pointer"
+          >
+            <ChevronDown className={cn('w-4 h-4 transition-transform duration-200', isOpen && 'rotate-180')} />
+          </Button>
+        </div>
+
+        {isOpen && (
+          <div
+            ref={menuRef}
+            id={menuId}
+            role="menu"
+            aria-orientation="vertical"
+            tabIndex={-1}
+            onKeyDown={handleMenuKeyDown}
+            className="absolute top-full right-0 mt-1 w-48 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-lg py-1 z-50 animate-in fade-in zoom-in-95 focus:outline-none"
+          >
+            {items.map((item, i) => (
+              <button
+                key={i}
+                type="button"
+                role="menuitem"
+                tabIndex={focusedIndex === i ? 0 : -1}
+                aria-disabled={item.disabled}
+                disabled={item.disabled}
+                onClick={() => {
+                  item.onClick();
+                  setIsOpen(false);
+                  triggerBtnRef.current?.focus();
+                }}
+                className={cn(
+                  'w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] focus:bg-[var(--ui-bg-tertiary)] focus:outline-none disabled:opacity-50 disabled:pointer-events-none transition-colors cursor-pointer',
+                  focusedIndex === i && 'bg-[var(--ui-bg-tertiary)]'
+                )}
+              >
+                {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+                <span className="flex-1 truncate">{item.label}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SplitButton.displayName = 'SplitButton';

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