@thangnqdev/ui 0.1.2 → 0.2.0

package/dist/navigation/index.cjs

@@ -19,29 +19,114 @@ function useTabs() {
   return context;
 }
 var Tabs = react.forwardRef(
-  ({ defaultValue = "", value: controlledValue, onValueChange, variant = "pills", className, children, ...props }, ref) => {
+  ({
+    defaultValue = "",
+    value: controlledValue,
+    onValueChange,
+    variant = "pills",
+    orientation = "horizontal",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const baseId = react.useId();
     const [selectedTab, setSelectedTab] = react.useState(defaultValue);
     const activeTab = controlledValue !== void 0 ? controlledValue : selectedTab;
+    const tabRegistryRef = react.useRef(
+      /* @__PURE__ */ new Map()
+    );
+    const registerTab = (value, disabled, element) => {
+      tabRegistryRef.current.set(value, { disabled, element });
+    };
+    const unregisterTab = (value) => {
+      tabRegistryRef.current.delete(value);
+    };
     const handleTabChange = (val) => {
-      setSelectedTab(val);
+      if (!controlledValue) {
+        setSelectedTab(val);
+      }
       onValueChange?.(val);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange, variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("w-full flex flex-col space-y-4", className), ...props, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TabsContext.Provider,
+      {
+        value: {
+          activeTab,
+          setActiveTab: handleTabChange,
+          variant,
+          orientation,
+          baseId,
+          registerTab,
+          unregisterTab
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            className: cn(
+              "w-full flex space-y-4",
+              orientation === "vertical" ? "flex-row space-y-0 space-x-6" : "flex-col",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    );
   }
 );
 Tabs.displayName = "Tabs";
 var TabsList = react.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const { variant } = useTabs();
+  ({ className, children, onKeyDown, ...props }, ref) => {
+    const { variant, orientation, activeTab, setActiveTab } = useTabs();
+    const listRef = react.useRef(null);
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      const tabs = Array.from(
+        listRef.current?.querySelectorAll('[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 /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        ref,
+        ref: (node) => {
+          listRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
         role: "tablist",
+        "aria-orientation": orientation,
+        onKeyDown: handleKeyDown,
         className: cn(
-          "inline-flex items-center",
+          "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" && "border-b border-[var(--ui-border-default)] gap-6",
+          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
         ),
@@ -53,17 +138,35 @@ var TabsList = react.forwardRef(
 );
 TabsList.displayName = "TabsList";
 var TabsTrigger = react.forwardRef(
-  ({ className, value, children, ...props }, ref) => {
-    const { activeTab, setActiveTab, variant } = useTabs();
+  ({ 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 = react.useRef(null);
+    react.useEffect(() => {
+      registerTab(value, Boolean(disabled), innerRef.current);
+      return () => unregisterTab(value);
+    }, [value, disabled, registerTab, unregisterTab]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        ref,
+        ref: (node) => {
+          innerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id: triggerId,
         role: "tab",
         type: "button",
+        disabled,
         "aria-selected": isActive,
-        onClick: () => setActiveTab(value),
+        "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)]",
@@ -82,16 +185,24 @@ var TabsTrigger = react.forwardRef(
 );
 TabsTrigger.displayName = "TabsTrigger";
 var TabsContent = react.forwardRef(
-  ({ className, value, children, ...props }, ref) => {
-    const { activeTab } = useTabs();
-    if (activeTab !== value) return null;
+  ({ 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 /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         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),
+        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
       }
@@ -406,12 +517,13 @@ function useDropdown() {
 function DropdownMenu({ children }) {
   const [isOpen, setIsOpen] = react.useState(false);
   const [triggerRect, setTriggerRect] = react.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: { isOpen, setIsOpen, triggerRect, setTriggerRect }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative inline-block text-left", children }) });
+  const triggerRef = react.useRef(null);
+  const menuId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: { isOpen, setIsOpen, triggerRect, setTriggerRect, triggerRef, menuId }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative inline-block text-left", children }) });
 }
 var DropdownMenuTrigger = react.forwardRef(
-  ({ children, onClick, ...props }, ref) => {
-    const { isOpen, setIsOpen, setTriggerRect } = useDropdown();
-    const triggerRef = react.useRef(null);
+  ({ children, onClick, onKeyDown, ...props }, ref) => {
+    const { isOpen, setIsOpen, setTriggerRect, triggerRef, menuId } = useDropdown();
     const handleClick = (e) => {
       if (triggerRef.current) {
         setTriggerRect(triggerRef.current.getBoundingClientRect());
@@ -419,39 +531,110 @@ var DropdownMenuTrigger = react.forwardRef(
       setIsOpen(!isOpen);
       onClick?.(e);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleClick, className: "inline-flex cursor-pointer", ...props, children });
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (triggerRef.current) {
+          setTriggerRect(triggerRef.current.getBoundingClientRect());
+        }
+        setIsOpen(true);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: 0,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? `menu-${menuId}` : void 0,
+        className: "inline-flex cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] rounded-[var(--ui-radius-sm)]",
+        ...props,
+        children
+      }
+    );
   }
 );
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 var DropdownMenuContent = react.forwardRef(
   ({ className, align = "start", children, ...props }, ref) => {
-    const { isOpen, setIsOpen, triggerRect } = useDropdown();
+    const { isOpen, setIsOpen, triggerRect, triggerRef, menuId } = useDropdown();
     const menuRef = react.useRef(null);
     react.useEffect(() => {
+      if (!isOpen) return;
+      const timer = setTimeout(() => {
+        const firstItem = menuRef.current?.querySelector('[role="menuitem"]:not([disabled])');
+        firstItem?.focus();
+      }, 10);
       const handleOutside = (e) => {
-        if (menuRef.current && !menuRef.current.contains(e.target)) {
+        if (menuRef.current && !menuRef.current.contains(e.target) && !triggerRef.current?.contains(e.target)) {
           setIsOpen(false);
         }
       };
-      if (isOpen) {
-        document.addEventListener("mousedown", handleOutside);
-      }
-      return () => document.removeEventListener("mousedown", handleOutside);
-    }, [isOpen, setIsOpen]);
+      const handleKeyDown = (e) => {
+        if (!menuRef.current) return;
+        const items = Array.from(
+          menuRef.current.querySelectorAll('[role="menuitem"]:not([disabled])')
+        );
+        if (items.length === 0) return;
+        const currentIndex = items.indexOf(document.activeElement);
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+          items[nextIndex]?.focus();
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          const prevIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+          items[prevIndex]?.focus();
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          setIsOpen(false);
+          triggerRef.current?.focus();
+        }
+      };
+      document.addEventListener("mousedown", handleOutside);
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        clearTimeout(timer);
+        document.removeEventListener("mousedown", handleOutside);
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [isOpen, setIsOpen, triggerRef]);
     if (!isOpen || !triggerRect) return null;
     const top = triggerRect.bottom + window.scrollY + 6;
     const left = align === "end" ? triggerRect.right + window.scrollX : triggerRect.left + window.scrollX;
     return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        ref: menuRef,
+        ref: (node) => {
+          menuRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id: `menu-${menuId}`,
+        role: "menu",
+        tabIndex: -1,
         style: {
           position: "absolute",
           top: `${top}px`,
           left: `${left}px`
         },
         className: cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] p-1 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95",
+          "z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] p-1 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95 focus:outline-none",
           align === "end" && "-translate-x-full",
           className
         ),
@@ -469,14 +652,15 @@ var DropdownMenuItem = react.forwardRef(
       "button",
       {
         ref,
+        role: "menuitem",
         type: "button",
         onClick: (e) => {
           onClick?.(e);
           setIsOpen(false);
         },
         className: cn(
-          "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-[var(--ui-radius-sm)] px-2.5 py-1.5 text-xs font-medium outline-none transition-colors hover:bg-[var(--ui-bg-tertiary)] disabled:pointer-events-none disabled:opacity-50 text-left",
-          destructive && "text-[var(--ui-error)] hover:bg-[var(--ui-error-subtle)]",
+          "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-[var(--ui-radius-sm)] px-2.5 py-1.5 text-xs font-medium outline-none transition-colors hover:bg-[var(--ui-bg-tertiary)] focus:bg-[var(--ui-bg-tertiary)] disabled:pointer-events-none disabled:opacity-50 text-left",
+          destructive && "text-[var(--ui-error)] hover:bg-[var(--ui-error-subtle)] focus:bg-[var(--ui-error-subtle)]",
           className
         ),
         ...props,
@@ -492,7 +676,7 @@ var DropdownMenuItem = react.forwardRef(
 DropdownMenuItem.displayName = "DropdownMenuItem";
 var DropdownMenuSeparator = react.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("-mx-1 my-1 h-px bg-[var(--ui-border-subtle)]", className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "separator", className: cn("-mx-1 my-1 h-px bg-[var(--ui-border-subtle)]", className), ...props });
   }
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
@@ -502,37 +686,93 @@ var DropdownMenuLabel = react.forwardRef(
   }
 );
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function FocusTrap({ children, active = true }) {
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]'
+].join(", ");
+var trapStack = [];
+function FocusTrap({
+  children,
+  active = true,
+  autoFocus = true,
+  restoreFocus = true
+}) {
   const rootRef = react.useRef(null);
+  const previousActiveElementRef = react.useRef(null);
   react.useEffect(() => {
     if (!active) return;
+    if (typeof document !== "undefined") {
+      previousActiveElementRef.current = document.activeElement;
+    }
     const root = rootRef.current;
     if (!root) return;
-    const focusable = root.querySelectorAll(FOCUSABLE_SELECTOR);
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    if (first) {
-      first.focus();
+    trapStack.push(root);
+    if (autoFocus) {
+      const timer = setTimeout(() => {
+        const focusable = root.querySelectorAll(FOCUSABLE_SELECTOR);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else if (typeof root.focus === "function") {
+          root.focus();
+        }
+      }, 0);
+      return () => clearTimeout(timer);
     }
+    return () => {
+      const idx = trapStack.indexOf(root);
+      if (idx !== -1) trapStack.splice(idx, 1);
+    };
+  }, [active, autoFocus]);
+  react.useEffect(() => {
+    if (!active) return;
     const handleKeyDown = (e) => {
       if (e.key !== "Tab") return;
+      const root = rootRef.current;
+      if (!root) return;
+      if (trapStack.length > 0 && trapStack[trapStack.length - 1] !== root) {
+        return;
+      }
+      const focusable = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+        (el) => el.offsetParent !== null || el.getClientRects().length > 0
+      );
+      if (focusable.length === 0) {
+        e.preventDefault();
+        root.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
       if (e.shiftKey) {
-        if (document.activeElement === first) {
+        if (document.activeElement === first || !root.contains(document.activeElement)) {
           e.preventDefault();
-          last?.focus();
+          last.focus();
         }
       } else {
-        if (document.activeElement === last) {
+        if (document.activeElement === last || !root.contains(document.activeElement)) {
           e.preventDefault();
-          first?.focus();
+          first.focus();
         }
       }
     };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [active]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, className: "contents", children });
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+      const root = rootRef.current;
+      if (root) {
+        const idx = trapStack.indexOf(root);
+        if (idx !== -1) trapStack.splice(idx, 1);
+      }
+      if (restoreFocus && previousActiveElementRef.current && typeof previousActiveElementRef.current.focus === "function") {
+        previousActiveElementRef.current.focus();
+      }
+    };
+  }, [active, restoreFocus]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, tabIndex: -1, className: "contents", style: { outline: "none" }, children });
 }
 var Kbd = react.forwardRef(
   ({ className, children, ...props }, ref) => {