@wow-two-beta/ui 0.0.56 → 0.0.58

package/dist/{chunk-BKR7A7WH.js → chunk-EEHJHPAP.js}

@@ -1,12 +1,12 @@
-import { listboxItemVariants, listboxEmptyVariants, listboxGroupLabelVariants, listboxSeparatorVariants } from './chunk-CRKW4VXA.js';
-import { DialogContent, Dialog } from './chunk-O2DK3E3E.js';
-import { useControlled } from './chunk-NUMFGKPY.js';
-import { Icon } from './chunk-F227LKWK.js';
-import { dataAttr, tv, surfaceVariants } from './chunk-RDDIOVK4.js';
-import { Slot, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-BMABNEZX.js';
-import { cn, composeRefs } from './chunk-LDRFQG44.js';
+import { listboxItemVariants, listboxEmptyVariants, listboxGroupLabelVariants, listboxSeparatorVariants } from './chunk-577JZ2A2.js';
+import { DialogContent, Dialog } from './chunk-EJCO7AWR.js';
+import { useControlled } from './chunk-V267IMBH.js';
+import { Icon } from './chunk-MVMDDGW7.js';
+import { dataAttr, tv, surfaceVariants } from './chunk-JYGC5SRP.js';
+import { Slot, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-TTSJZEL7.js';
+import { cn, composeRefs } from './chunk-X2MYOHOB.js';
 import { forwardRef, Fragment, createContext, useId, useRef, useEffect, useCallback, useMemo, useState, useContext } from 'react';
-import { ChevronLeft, ChevronRight, ChevronDown, Search } from 'lucide-react';
+import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ChevronDown, Search } from 'lucide-react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { FocusScope } from '@radix-ui/react-focus-scope';
 
@@ -45,11 +45,22 @@ function buildPages(total, page, siblings) {
   return pages;
 }
 var Pagination = forwardRef(
-  ({ total, page, onPageChange, siblings = 1, className, ...props }, ref) => {
+  ({ total, page, onPageChange, siblings = 1, hideFirstLast = false, className, ...props }, ref) => {
     const pages = buildPages(total, page, siblings);
     const go = (p) => onPageChange(Math.min(total, Math.max(1, p)));
     const baseBtn = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-transparent px-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
     return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": "Pagination", className: cn("inline-flex items-center gap-1", className), ...props, children: [
+      !hideFirstLast && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "First page",
+          disabled: page <= 1,
+          onClick: () => go(1),
+          className: cn(baseBtn, "hover:bg-muted"),
+          children: /* @__PURE__ */ jsx(Icon, { icon: ChevronsLeft, size: 16 })
+        }
+      ),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -87,6 +98,17 @@ var Pagination = forwardRef(
           className: cn(baseBtn, "hover:bg-muted"),
           children: /* @__PURE__ */ jsx(Icon, { icon: ChevronRight, size: 16 })
         }
+      ),
+      !hideFirstLast && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Last page",
+          disabled: page >= total,
+          onClick: () => go(total),
+          className: cn(baseBtn, "hover:bg-muted"),
+          children: /* @__PURE__ */ jsx(Icon, { icon: ChevronsRight, size: 16 })
+        }
       )
     ] });
   }
@@ -158,6 +180,7 @@ function Menu({
   onClose,
   placement = "bottom-start",
   offset = 6,
+  onKeyDown,
   "aria-label": ariaLabel,
   variant,
   tone,
@@ -213,6 +236,8 @@ function Menu({
                 className
               ),
               onKeyDown: (e) => {
+                onKeyDown?.(e);
+                if (e.defaultPrevented) return;
                 if (e.key === "Tab") {
                   e.preventDefault();
                   onClose();
@@ -226,21 +251,25 @@ function Menu({
     }
   ) }) });
 }
-var MenuItem = forwardRef(function MenuItem2({ onSelect, disabled = false, state, className, onClick, onKeyDown, children, ...rest }, forwardedRef) {
+var MenuItem = forwardRef(function MenuItem2({ onSelect, isDisabled = false, state, className, onClick, onKeyDown, children, ...rest }, forwardedRef) {
   const ctx = useMenuContext();
   const id = useId();
   const ref = useRef(null);
   useEffect(() => {
-    ctx.registerItem({ id, ref: ref.current, disabled });
+    ctx.registerItem({ id, ref: ref.current, disabled: isDisabled });
     return () => ctx.unregisterItem(id);
-  }, [ctx, id, disabled]);
+  }, [ctx, id, isDisabled]);
   const moveFocus = useCallback(
-    (direction, jump = 1) => {
+    (target) => {
       const list = ctx.itemsRef.current.filter((i) => !i.disabled);
       if (list.length === 0) return;
+      if (target === "first" || target === "last") {
+        list[target === "first" ? 0 : list.length - 1]?.ref?.focus();
+        return;
+      }
       const idx = list.findIndex((i) => i.id === id);
-      let nextIdx = idx + direction * jump;
-      if (idx === -1) nextIdx = direction === 1 ? 0 : list.length - 1;
+      let nextIdx = idx + target;
+      if (idx === -1) nextIdx = target === 1 ? 0 : list.length - 1;
       if (nextIdx < 0) nextIdx = list.length - 1;
       if (nextIdx >= list.length) nextIdx = 0;
       list[nextIdx]?.ref?.focus();
@@ -249,7 +278,7 @@ var MenuItem = forwardRef(function MenuItem2({ onSelect, disabled = false, state
   );
   const handleKeyDown = (e) => {
     onKeyDown?.(e);
-    if (e.defaultPrevented || disabled) return;
+    if (e.defaultPrevented || isDisabled) return;
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
@@ -261,11 +290,11 @@ var MenuItem = forwardRef(function MenuItem2({ onSelect, disabled = false, state
         break;
       case "Home":
         e.preventDefault();
-        moveFocus(-1, ctx.itemsRef.current.length);
+        moveFocus("first");
         break;
       case "End":
         e.preventDefault();
-        moveFocus(1, ctx.itemsRef.current.length);
+        moveFocus("last");
         break;
       case "Enter":
       case " ":
@@ -275,19 +304,19 @@ var MenuItem = forwardRef(function MenuItem2({ onSelect, disabled = false, state
         break;
     }
   };
-  const itemState = state ?? (disabled ? "disabled" : "default");
+  const itemState = state ?? (isDisabled ? "disabled" : "default");
   return /* @__PURE__ */ jsx(
     "button",
     {
       ref: composeRefs(forwardedRef, ref),
       type: "button",
       role: "menuitem",
-      disabled,
-      "aria-disabled": disabled || void 0,
-      "data-disabled": disabled ? "" : void 0,
+      disabled: isDisabled,
+      "aria-disabled": isDisabled || void 0,
+      "data-disabled": isDisabled ? "" : void 0,
       onClick: (e) => {
         onClick?.(e);
-        if (e.defaultPrevented || disabled) return;
+        if (e.defaultPrevented || isDisabled) return;
         onSelect?.();
         ctx.onClose();
       },
@@ -348,9 +377,10 @@ function DropdownMenu({
     onChange: onOpenChange
   });
   const triggerRef = useRef(null);
+  const [triggerNode, setTriggerNode] = useState(null);
   const ctx = useMemo(
-    () => ({ open, setOpen, triggerRef, placement, offset }),
-    [open, setOpen, placement, offset]
+    () => ({ open, setOpen, triggerRef, triggerNode, setTriggerNode, placement, offset }),
+    [open, setOpen, triggerNode, placement, offset]
   );
   return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: ctx, children });
 }
@@ -380,7 +410,7 @@ var DropdownMenuTrigger = forwardRef(
     return /* @__PURE__ */ jsx(
       Component,
       {
-        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        ref: composeRefs(forwardedRef, ctx.triggerRef, ctx.setTriggerNode),
         type: "button",
         "aria-haspopup": "menu",
         "aria-expanded": ctx.open,
@@ -403,7 +433,7 @@ function DropdownMenuContent({
     Menu,
     {
       open: ctx.open,
-      anchor: ctx.triggerRef.current,
+      anchor: ctx.triggerNode,
       onClose: () => {
         ctx.setOpen(false);
         requestAnimationFrame(() => ctx.triggerRef.current?.focus());
@@ -456,6 +486,12 @@ function ContextMenu({ children }) {
     },
     [setAnchor]
   );
+  useEffect(() => {
+    if (!anchor) return;
+    return () => {
+      if (anchor.parentNode === document.body) anchor.remove();
+    };
+  }, [anchor]);
   const ctx = useMemo(
     () => ({ open, setOpen: handleSetOpen, anchor, setAnchor, triggerRef }),
     [open, handleSetOpen, anchor, setAnchor]
@@ -463,24 +499,25 @@ function ContextMenu({ children }) {
   return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: ctx, children });
 }
 var ContextMenuTrigger = forwardRef(
-  function ContextMenuTrigger2({ asChild, disabled, onContextMenu, onPointerDown, onPointerCancel, onPointerUp, children, ...rest }, forwardedRef) {
+  function ContextMenuTrigger2({ asChild, isDisabled, onContextMenu, onPointerDown, onPointerCancel, onPointerUp, children, ...rest }, forwardedRef) {
     const ctx = useContextMenuContext();
     const longPressTimer = useRef(null);
     const Component = asChild ? Slot : "div";
     const handleContextMenu = useCallback(
       (e) => {
         onContextMenu?.(e);
-        if (e.defaultPrevented || disabled) return;
+        if (e.defaultPrevented || isDisabled) return;
         e.preventDefault();
         ctx.setAnchor(makeVirtualAnchor(e.clientX, e.clientY));
         ctx.setOpen(true);
       },
-      [ctx, disabled, onContextMenu]
+      [ctx, isDisabled, onContextMenu]
     );
     const clearLongPress = useCallback(() => {
       if (longPressTimer.current) clearTimeout(longPressTimer.current);
       longPressTimer.current = null;
     }, []);
+    useEffect(() => () => clearLongPress(), [clearLongPress]);
     return /* @__PURE__ */ jsx(
       Component,
       {
@@ -488,7 +525,7 @@ var ContextMenuTrigger = forwardRef(
         onContextMenu: handleContextMenu,
         onPointerDown: (e) => {
           onPointerDown?.(e);
-          if (e.defaultPrevented || disabled || e.pointerType !== "touch") return;
+          if (e.defaultPrevented || isDisabled || e.pointerType !== "touch") return;
           const x = e.clientX;
           const y = e.clientY;
           longPressTimer.current = setTimeout(() => {
@@ -573,9 +610,24 @@ var Menubar = forwardRef(function Menubar2({ value, defaultValue = null, onValue
   const unregisterTrigger = useCallback((id) => {
     triggersRef.current = triggersRef.current.filter((t) => t.id !== id);
   }, []);
+  const moveAcross = useCallback(
+    (fromId, direction) => {
+      const list = triggersRef.current;
+      const idx = list.findIndex((t) => t.id === fromId);
+      if (idx === -1) return;
+      let nextIdx = idx + direction;
+      if (nextIdx < 0) nextIdx = list.length - 1;
+      if (nextIdx >= list.length) nextIdx = 0;
+      const next = list[nextIdx];
+      if (!next) return;
+      next.ref?.focus();
+      if (activeId !== null) setActiveId(next.id);
+    },
+    [activeId, setActiveId]
+  );
   const ctx = useMemo(
-    () => ({ activeId, setActiveId, registerTrigger, unregisterTrigger, triggersRef }),
-    [activeId, setActiveId, registerTrigger, unregisterTrigger]
+    () => ({ activeId, setActiveId, registerTrigger, unregisterTrigger, triggersRef, moveAcross }),
+    [activeId, setActiveId, registerTrigger, unregisterTrigger, moveAcross]
   );
   return /* @__PURE__ */ jsx(MenubarContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     "div",
@@ -591,6 +643,7 @@ var Menubar = forwardRef(function Menubar2({ value, defaultValue = null, onValue
 function MenubarMenu({ value, children }) {
   const ctx = useMenubarContext();
   const triggerRef = useRef(null);
+  const [triggerNode, setTriggerNode] = useState(null);
   const open = ctx.activeId === value;
   const setOpen = useCallback(
     (next) => {
@@ -599,8 +652,8 @@ function MenubarMenu({ value, children }) {
     [ctx, value]
   );
   const menuCtx = useMemo(
-    () => ({ id: value, open, setOpen, triggerRef }),
-    [value, open, setOpen]
+    () => ({ id: value, open, setOpen, triggerRef, triggerNode, setTriggerNode }),
+    [value, open, setOpen, triggerNode]
   );
   return /* @__PURE__ */ jsx(MenubarMenuContext.Provider, { value: menuCtx, children });
 }
@@ -612,24 +665,10 @@ var MenubarTrigger = forwardRef(
       bar.registerTrigger(menu.id, menu.triggerRef.current);
       return () => bar.unregisterTrigger(menu.id);
     }, [bar, menu.id, menu.triggerRef]);
-    const moveAcross = useCallback(
-      (direction) => {
-        const list = bar.triggersRef.current;
-        const idx = list.findIndex((t) => t.id === menu.id);
-        if (idx === -1) return;
-        let nextIdx = idx + direction;
-        if (nextIdx < 0) nextIdx = list.length - 1;
-        if (nextIdx >= list.length) nextIdx = 0;
-        const next = list[nextIdx];
-        next?.ref?.focus();
-        if (bar.activeId !== null && next) bar.setActiveId(next.id);
-      },
-      [bar, menu.id]
-    );
     return /* @__PURE__ */ jsx(
       "button",
       {
-        ref: composeRefs(forwardedRef, menu.triggerRef),
+        ref: composeRefs(forwardedRef, menu.triggerRef, menu.setTriggerNode),
         type: "button",
         role: "menuitem",
         "aria-haspopup": "menu",
@@ -652,11 +691,11 @@ var MenubarTrigger = forwardRef(
           switch (e.key) {
             case "ArrowRight":
               e.preventDefault();
-              moveAcross(1);
+              bar.moveAcross(menu.id, 1);
               break;
             case "ArrowLeft":
               e.preventDefault();
-              moveAcross(-1);
+              bar.moveAcross(menu.id, -1);
               break;
             case "ArrowDown":
             case "Enter":
@@ -690,16 +729,29 @@ function MenubarContent({
   "aria-label": ariaLabel,
   children
 }) {
+  const bar = useMenubarContext();
   const menu = useMenubarMenuContext();
   return /* @__PURE__ */ jsx(
     Menu,
     {
       open: menu.open,
-      anchor: menu.triggerRef.current,
+      anchor: menu.triggerNode,
       onClose: () => {
         menu.setOpen(false);
         requestAnimationFrame(() => menu.triggerRef.current?.focus());
       },
+      onKeyDown: (e) => {
+        switch (e.key) {
+          case "ArrowRight":
+            e.preventDefault();
+            bar.moveAcross(menu.id, 1);
+            break;
+          case "ArrowLeft":
+            e.preventDefault();
+            bar.moveAcross(menu.id, -1);
+            break;
+        }
+      },
       placement,
       offset,
       "aria-label": ariaLabel,
@@ -766,7 +818,7 @@ var NavigationMenuList = forwardRef(
       {
         ref,
         orientation: "horizontal",
-        loop: true,
+        canLoop: true,
         role: "list",
         className: cn("flex items-center gap-1", className),
         ...rest,
@@ -963,15 +1015,18 @@ function CommandPalette({
   const itemsRef = useRef([]);
   const inputRef = useRef(null);
   const [activeId, setActiveId] = useState(null);
+  const [registryVersion, setRegistryVersion] = useState(0);
   const inputId = useId();
   const listboxId = useId();
   const registerItem = useCallback((entry) => {
     const idx = itemsRef.current.findIndex((i) => i.id === entry.id);
     if (idx >= 0) itemsRef.current[idx] = entry;
     else itemsRef.current.push(entry);
+    setRegistryVersion((v) => v + 1);
   }, []);
   const unregisterItem = useCallback((id) => {
     itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
+    setRegistryVersion((v) => v + 1);
   }, []);
   useEffect(() => {
     if (!triggerKey) return;
@@ -1003,6 +1058,7 @@ function CommandPalette({
       itemsRef,
       registerItem,
       unregisterItem,
+      registryVersion,
       filter,
       inputId,
       listboxId,
@@ -1016,6 +1072,7 @@ function CommandPalette({
       activeId,
       registerItem,
       unregisterItem,
+      registryVersion,
       filter,
       inputId,
       listboxId
@@ -1054,7 +1111,7 @@ var CommandPaletteInput = forwardRef(
       } else if (list.length === 0) {
         ctx.setActiveId(null);
       }
-    }, [ctx.inputValue, ctx.itemsRef.current.length]);
+    }, [ctx.inputValue, ctx.registryVersion]);
     const moveActive = (direction) => {
       const list = visibleItems();
       if (list.length === 0) return;
@@ -1177,7 +1234,7 @@ var CommandPaletteItem = forwardRef(
   function CommandPaletteItem2({
     value,
     searchText,
-    disabled = false,
+    isDisabled = false,
     onSelect,
     closeOnSelect = true,
     className,
@@ -1189,21 +1246,22 @@ var CommandPaletteItem = forwardRef(
     const ctx = useCommandPaletteContext();
     const id = useId();
     const resolvedSearch = searchText ?? (typeof children === "string" ? children : Array.isArray(children) ? children.filter((c) => typeof c === "string").join(" ") : value);
+    const { registerItem, unregisterItem } = ctx;
     useEffect(() => {
-      ctx.registerItem({
+      registerItem({
         id,
         value,
         searchText: resolvedSearch,
-        disabled,
+        disabled: isDisabled,
         onSelect: () => onSelect?.(),
         closeOnSelect
       });
-      return () => ctx.unregisterItem(id);
-    }, [ctx, id, value, resolvedSearch, disabled, onSelect, closeOnSelect]);
+      return () => unregisterItem(id);
+    }, [registerItem, unregisterItem, id, value, resolvedSearch, isDisabled, onSelect, closeOnSelect]);
     const matches = ctx.inputValue === "" || ctx.filter(resolvedSearch, ctx.inputValue);
     if (!matches) return null;
     const isActive = ctx.activeId === id;
-    const state = disabled ? "disabled" : isActive ? "active" : "default";
+    const state = isDisabled ? "disabled" : isActive ? "active" : "default";
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -1211,17 +1269,17 @@ var CommandPaletteItem = forwardRef(
         id,
         role: "option",
         "aria-selected": isActive,
-        "aria-disabled": disabled || void 0,
+        "aria-disabled": isDisabled || void 0,
         "data-active": isActive ? "" : void 0,
         onClick: (e) => {
           onClick?.(e);
-          if (e.defaultPrevented || disabled) return;
+          if (e.defaultPrevented || isDisabled) return;
           onSelect?.();
           if (closeOnSelect) ctx.setOpen(false);
         },
         onPointerEnter: (e) => {
           onPointerEnter?.(e);
-          if (!disabled) ctx.setActiveId(id);
+          if (!isDisabled) ctx.setActiveId(id);
         },
         className: cn(listboxItemVariants({ state }), className),
         ...rest,
@@ -1313,7 +1371,7 @@ var TableOfContents = forwardRef(
     source,
     headingSelector = "h2, h3",
     activeId: activeIdProp,
-    sticky,
+    isSticky,
     className,
     ...rest
   }, ref) {
@@ -1339,7 +1397,7 @@ var TableOfContents = forwardRef(
       {
         ref,
         "aria-label": "Table of contents",
-        className: cn(sticky && "sticky top-4 self-start", className),
+        className: cn(isSticky && "sticky top-4 self-start", className),
         ...rest,
         children: /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-sm", children: items.map((item) => {
           const isActive = item.id === activeId;
@@ -1370,5 +1428,5 @@ var TableOfContents = forwardRef(
 );
 
 export { Breadcrumb, CommandPalette, CommandPaletteContent, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, ContextMenu, ContextMenuContent, ContextMenuTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, Menu, MenuGroup, MenuItem, MenuLabel, MenuSeparator, Menubar, MenubarContent, MenubarMenu, MenubarTrigger, NavItem, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Pagination, ScrollSpy, TableOfContents, menuItemVariants, menuLabelVariants, menuSeparatorVariants, menuVariants, useScrollSpy };
-//# sourceMappingURL=chunk-BKR7A7WH.js.map
-//# sourceMappingURL=chunk-BKR7A7WH.js.map
+//# sourceMappingURL=chunk-EEHJHPAP.js.map
+//# sourceMappingURL=chunk-EEHJHPAP.js.map