@godxjp/ui 21.0.0 → 23.0.0

package/dist/components/data-entry/switch.d.ts

@@ -1,9 +1,12 @@
 import * as React from "react";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
 export type { SwitchProp, SwitchProp as SwitchProps } from "../../props/components/data-entry.prop.js";
-export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+export declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "checked" | "defaultChecked" | "onChange" | "value"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    required?: boolean;
     size?: "sm" | "md";
     loading?: boolean;
     checkedChildren?: React.ReactNode;
     unCheckedChildren?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/data-entry/switch.js

@@ -1,10 +1,11 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { Switch as AriaSwitch } from "react-aria-components";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { useFieldIdentity } from "../../lib/field-a11y.js";
+import { useFieldIdentity, useMirroredInputAttributes } from "../../lib/field-a11y.js";
+import { withOwnHitTarget } from "./choice-hit-target.js";
 const Switch = React.forwardRef(
   ({
     className,
@@ -16,6 +17,8 @@ const Switch = React.forwardRef(
     loading = false,
     checkedChildren,
     unCheckedChildren,
+    disabled,
+    required,
     ...props
   }, ref) => {
     const identity = useFieldIdentity({
@@ -34,19 +37,43 @@ const Switch = React.forwardRef(
       }
       onCheckedChange?.(next);
     };
+    const ownField = props["data-field"];
+    const fieldKey = ownField ?? identity["data-field"];
+    const invalid = props["aria-invalid"];
+    const isInvalid = invalid !== void 0 && invalid !== false && invalid !== "false";
+    const inputRef = React.useRef(null);
+    useMirroredInputAttributes(inputRef, {
+      "aria-invalid": isInvalid ? "true" : void 0,
+      "aria-busy": loading ? "true" : void 0,
+      "aria-disabled": loading ? "true" : void 0,
+      // react-aria's `Switch` Omits `isRequired`, and a switch is never the target of native
+      // constraint validation in this library — the form layer owns that. The prop is accepted
+      // for shape and announced through `aria-required`.
+      "aria-required": required ? "true" : void 0,
+      "data-field": fieldKey
+    });
+    const state = isChecked ? "checked" : "unchecked";
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value: isChecked ? "1" : "0", readOnly: true }) : null,
       /* @__PURE__ */ jsxs(
-        SwitchPrimitive.Root,
+        AriaSwitch,
         {
+          ...props,
           ref,
+          inputRef,
           "data-slot": "switch",
           "data-size": size,
+          "data-state": state,
           "data-loading": loading ? "true" : void 0,
-          "aria-busy": loading || void 0,
-          "aria-disabled": loading || void 0,
-          checked: isChecked,
-          onCheckedChange: handleCheckedChange,
+          isSelected: isChecked,
+          isDisabled: disabled,
+          onChange: handleCheckedChange,
+          onKeyDown: (event) => {
+            if (event.key !== "Enter") return;
+            event.preventDefault();
+            handleCheckedChange(!isChecked);
+          },
+          render: (domProps) => /* @__PURE__ */ jsx("label", { ...domProps, children: withOwnHitTarget(domProps.children) }),
           className: cn(
             // `.ui-switch:disabled, .ui-switch[data-disabled]` in styles/control.css already
             // declares both and reads --disabled-opacity. The utility was layered after
@@ -56,11 +83,9 @@ const Switch = React.forwardRef(
             "peer ui-switch shadow-xs transition-all outline-none",
             className
           ),
-          ...props,
-          "data-field": identity["data-field"] ?? props["data-field"],
           children: [
             checkedChildren != null || unCheckedChildren != null ? /* @__PURE__ */ jsx("span", { "data-slot": "switch-content", className: "ui-switch-content", "aria-hidden": "true", children: isChecked ? checkedChildren : unCheckedChildren }) : null,
-            /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "ui-switch-thumb", children: loading ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("span", { "data-slot": "switch-thumb", "data-state": state, className: "ui-switch-thumb", children: loading ? /* @__PURE__ */ jsx(
               Loader2,
               {
                 "data-slot": "switch-spinner",
@@ -74,7 +99,7 @@ const Switch = React.forwardRef(
     ] });
   }
 );
-Switch.displayName = SwitchPrimitive.Root.displayName;
+Switch.displayName = "Switch";
 export {
   Switch
 };

package/dist/components/layout/mobile-shell.d.ts

@@ -18,4 +18,4 @@ export type { MobileShellProp, MobileShellProp as MobileShellProps, } from "../.
  * IS the app's primary navigation). They are the same strings in all three locales, and a fourth
  * identical copy under `layout.mobileShell.*` would be three files of duplication to keep in sync.
  */
-export declare function MobileShell({ statusBar, header, children, actions, tabBar, height, className, }: MobileShellProp): import("react").JSX.Element;
+export declare function MobileShell({ statusBar, header, children, actions, tabBar, height, width, className, }: MobileShellProp): import("react").JSX.Element;

package/dist/components/layout/mobile-shell.js

@@ -9,6 +9,7 @@ function MobileShell({
   actions,
   tabBar,
   height = "viewport",
+  width = "fill",
   className
 }) {
   const { t } = useTranslation();
@@ -17,6 +18,7 @@ function MobileShell({
     {
       "data-slot": "mobile-shell",
       "data-height": height === "viewport" ? void 0 : height,
+      "data-width": width === "fill" ? void 0 : width,
       className: cn("ui-mobile-shell", className),
       children: [
         (statusBar !== void 0 || header !== void 0) && /* @__PURE__ */ jsxs("header", { className: "ui-mobile-shell-chrome", "aria-label": t("layout.appShell.headerLabel"), children: [

package/dist/components/navigation/dropdown-menu.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type MenuItemRenderProps, type PopoverProps, type PopoverRenderProps } from "react-aria-components";
-import type { DropdownMenuPlacementProp } from "../../props/components/navigation.prop.js";
-export type { DropdownMenuPlacementProp } from "../../props/components/navigation.prop.js";
+import type { DropdownMenuPlacementProp, DropdownMenuTriggerActionProp } from "../../props/components/navigation.prop.js";
+export type { DropdownMenuPlacementProp, DropdownMenuTriggerActionProp, } from "../../props/components/navigation.prop.js";
 /**
  * Dịch trạng thái item của RAC sang bộ `data-*` mà Radix phát ra và CSS của kho đang bám.
  *
@@ -47,9 +47,17 @@ interface DropdownMenuPropsOwn {
      * `useLocale`), nên prop này còn trong API vì hợp đồng, nhưng không tự đảo hướng.
      */
     dir?: "ltr" | "rtl";
+    /** Ant Design `trigger`. @see DropdownMenuTriggerActionProp. Default `['click']`. */
+    trigger?: readonly DropdownMenuTriggerActionProp[];
+    /** Ant Design `disabled` — no gesture opens the menu (antd empties the trigger list). */
+    disabled?: boolean;
+    /** Ant Design `mouseEnterDelay`, in SECONDS, for `trigger={['hover']}`. Default 0.15. */
+    mouseEnterDelay?: number;
+    /** Ant Design `mouseLeaveDelay`, in SECONDS. Default 0.1 — long enough to cross the gap. */
+    mouseLeaveDelay?: number;
 }
 type DropdownMenuProps = React.PropsWithChildren<DropdownMenuPropsOwn>;
-export declare function DropdownMenu({ children, open, defaultOpen, onOpenChange, modal, dir, }: DropdownMenuProps): React.JSX.Element;
+export declare function DropdownMenu({ children, open, defaultOpen, onOpenChange, modal, dir, trigger, disabled, mouseEnterDelay, mouseLeaveDelay, }: DropdownMenuProps): React.JSX.Element;
 interface DropdownMenuTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
     /** Giao hành vi mở cho phần tử con thay vì `<button>` mặc định — như Radix. */
     asChild?: boolean;

package/dist/components/navigation/dropdown-menu.js

@@ -12,9 +12,11 @@ import {
   OverlayTriggerStateContext,
   Popover,
   Pressable,
+  RootMenuTriggerStateContext,
   Separator,
   OverlayArrow,
-  SubmenuTrigger
+  SubmenuTrigger,
+  useLocale
 } from "react-aria-components";
 import { Check, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils.js";
@@ -58,39 +60,201 @@ function selectEvent(name) {
   return typeof CustomEvent === "function" ? new CustomEvent(name, { bubbles: false, cancelable: true }) : { defaultPrevented: false, preventDefault() {
   } };
 }
-const DropdownMenuModalContext = React.createContext({ modal: true });
+const DROPDOWN_MENU_DEFAULT_TRIGGER = ["click"];
+const DROPDOWN_MENU_MOUSE_ENTER_DELAY = 0.15;
+const DROPDOWN_MENU_MOUSE_LEAVE_DELAY = 0.1;
+const SECOND_IN_MS = 1e3;
+const DropdownMenuModalContext = React.createContext({
+  modal: true,
+  contextMenuGesture: false,
+  disabled: false,
+  hover: null,
+  racOwnsContextMenu: false,
+  openedByHover: { current: false }
+});
+function clearContextMenuPoint(state) {
+  state?.setPoint(null);
+}
+function chainGestureProps(own, incoming) {
+  const merged = { ...own };
+  for (const [key, handler] of Object.entries(incoming)) {
+    const existing = own[key];
+    merged[key] = typeof existing === "function" && typeof handler === "function" ? (event) => {
+      existing(event);
+      if (!event.defaultPrevented) handler(event);
+    } : handler;
+  }
+  return merged;
+}
+function isContextMenuKey(event) {
+  return event.key === "ContextMenu" || event.key === "F10" && event.shiftKey;
+}
 function DropdownMenu({
   children,
   open,
   defaultOpen,
   onOpenChange,
   modal = true,
-  dir
+  dir,
+  trigger = DROPDOWN_MENU_DEFAULT_TRIGGER,
+  disabled = false,
+  mouseEnterDelay = DROPDOWN_MENU_MOUSE_ENTER_DELAY,
+  mouseLeaveDelay = DROPDOWN_MENU_MOUSE_LEAVE_DELAY
 }) {
   void dir;
-  const options = React.useMemo(() => ({ modal }), [modal]);
-  return /* @__PURE__ */ jsx(DropdownMenuModalContext.Provider, { value: options, children: /* @__PURE__ */ jsx(MenuTrigger, { isOpen: open, defaultOpen, onOpenChange, children }) });
+  const wantsHover = !disabled && trigger.includes("hover");
+  const wantsClick = !disabled && trigger.includes("click");
+  const wantsContextMenu = !disabled && trigger.includes("contextMenu");
+  const racOwnsContextMenu = wantsContextMenu && !wantsClick && !wantsHover;
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolled;
+  const isOpenRef = React.useRef(isOpen);
+  isOpenRef.current = isOpen;
+  const openedByHover = React.useRef(false);
+  const setOpen = React.useCallback(
+    (next) => {
+      if (next === isOpenRef.current) return;
+      if (next && disabled) return;
+      if (!next) openedByHover.current = false;
+      if (open === void 0) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [disabled, open, onOpenChange]
+  );
+  const enterTimer = React.useRef(null);
+  const leaveTimer = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (enterTimer.current) clearTimeout(enterTimer.current);
+      if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    },
+    []
+  );
+  const hover = React.useMemo(() => {
+    if (!wantsHover) return null;
+    return {
+      enter: () => {
+        if (leaveTimer.current) clearTimeout(leaveTimer.current);
+        if (isOpenRef.current) return;
+        enterTimer.current = setTimeout(() => {
+          openedByHover.current = true;
+          setOpen(true);
+        }, mouseEnterDelay * SECOND_IN_MS);
+      },
+      leave: () => {
+        if (enterTimer.current) clearTimeout(enterTimer.current);
+        leaveTimer.current = setTimeout(() => setOpen(false), mouseLeaveDelay * SECOND_IN_MS);
+      }
+    };
+  }, [wantsHover, mouseEnterDelay, mouseLeaveDelay, setOpen]);
+  const options = React.useMemo(
+    () => ({
+      // A HOVER MENU CANNOT BE MODAL. A modal RAC popover paints a full-bleed underlay the instant
+      // it opens; that underlay lands under the pointer, the trigger gets `pointerleave`, and the
+      // menu closes before the reader can move onto it. antd's hover dropdown is non-modal for the
+      // same reason. Every other mode keeps the caller's `modal`.
+      modal: wantsHover ? false : modal,
+      contextMenuGesture: wantsContextMenu,
+      disabled,
+      hover,
+      racOwnsContextMenu,
+      openedByHover
+    }),
+    [modal, wantsContextMenu, disabled, hover, racOwnsContextMenu, wantsHover]
+  );
+  return /* @__PURE__ */ jsx(DropdownMenuModalContext.Provider, { value: options, children: /* @__PURE__ */ jsx(
+    MenuTrigger,
+    {
+      isOpen,
+      onOpenChange: setOpen,
+      trigger: racOwnsContextMenu ? "contextMenu" : "press",
+      children
+    }
+  ) });
 }
 function DropdownMenuTrigger({ asChild, children, ...props }) {
   const state = React.useContext(OverlayTriggerStateContext);
+  const menuState = React.useContext(
+    RootMenuTriggerStateContext
+  );
+  const { contextMenuGesture, disabled, hover, racOwnsContextMenu } = React.useContext(DropdownMenuModalContext);
   const dataState = state?.isOpen ? "open" : "closed";
+  const wantsContextMenu = contextMenuGesture;
+  const isDisabled = disabled || props.disabled;
+  const { direction } = useLocale();
+  const openAtTriggerBox = (element) => {
+    const rect = element.getBoundingClientRect();
+    menuState?.setPoint({ x: direction === "rtl" ? rect.right : rect.left, y: rect.bottom });
+    menuState?.open("first");
+  };
+  const gestureProps = {};
+  if (wantsContextMenu && !isDisabled) {
+    gestureProps.onKeyDown = (event) => {
+      if (!isContextMenuKey(event)) return;
+      event.preventDefault();
+      openAtTriggerBox(event.currentTarget);
+    };
+    if (!racOwnsContextMenu) {
+      gestureProps.onContextMenu = (event) => {
+        event.preventDefault();
+        menuState?.setPoint({ x: event.clientX, y: event.clientY });
+        menuState?.open(null);
+      };
+    }
+  }
+  if (!racOwnsContextMenu) {
+    gestureProps.onPointerDownCapture = () => clearContextMenuPoint(menuState);
+    gestureProps.onKeyDownCapture = (event) => {
+      if (!isContextMenuKey(event)) clearContextMenuPoint(menuState);
+    };
+  }
+  if (hover && !isDisabled) {
+    gestureProps.onPointerEnter = (event) => {
+      if (event.pointerType === "mouse") hover.enter();
+    };
+    gestureProps.onPointerLeave = (event) => {
+      if (event.pointerType === "mouse") hover.leave();
+    };
+  }
   if (asChild && React.isValidElement(children)) {
-    return /* @__PURE__ */ jsx(Pressable, { children: React.cloneElement(children, {
+    return /* @__PURE__ */ jsx(Pressable, { isDisabled, children: React.cloneElement(children, {
       "data-slot": "dropdown-menu-trigger",
-      "data-state": dataState
+      "data-state": dataState,
+      // A right click target is usually a region rather than a button, and Shift+F10 needs it
+      // focusable — so it is given a tab stop unless the consumer already placed one.
+      ...wantsContextMenu && children.props.tabIndex === void 0 ? { tabIndex: 0 } : {},
+      ...chainGestureProps(
+        children.props,
+        gestureProps
+      )
     }) });
   }
   return /* @__PURE__ */ jsx(
     AriaButton,
     {
-      ...props,
-      isDisabled: props.disabled,
+      ...chainGestureProps(
+        props,
+        gestureProps
+      ),
+      isDisabled,
       "data-slot": "dropdown-menu-trigger",
       "data-state": dataState,
       children
     }
   );
 }
+function useHoverSurfaceProps() {
+  const { hover } = React.useContext(DropdownMenuModalContext);
+  if (!hover) return {};
+  return {
+    onPointerEnter: (event) => {
+      if (event.pointerType === "mouse") hover.enter();
+    },
+    onPointerLeave: (event) => {
+      if (event.pointerType === "mouse") hover.leave();
+    }
+  };
+}
 function DropdownMenuPortal({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
@@ -129,7 +293,7 @@ function DropdownMenuContent({
   className,
   side,
   align,
-  sideOffset = 4,
+  sideOffset,
   placement,
   arrow,
   width,
@@ -144,17 +308,25 @@ function DropdownMenuContent({
   void hideWhenDetached;
   void sticky;
   void forceMount;
-  const { modal } = React.useContext(DropdownMenuModalContext);
+  const { modal, openedByHover } = React.useContext(DropdownMenuModalContext);
+  const hoverSurfaceProps = useHoverSurfaceProps();
+  const menuState = React.useContext(
+    RootMenuTriggerStateContext
+  );
   const anchor = placement ? DROPDOWN_MENU_PLACEMENT[placement] : void 0;
   const overlayPortalContainer = useOverlayPortalContainer();
+  const pointAnchored = menuState?.point != null;
+  const hasExplicitAnchor = placement !== void 0 || side !== void 0 || align !== void 0;
+  const resolvedPlacement = hasExplicitAnchor || !pointAnchored ? toPlacement(side ?? anchor?.side, align ?? anchor?.align) : "bottom start";
+  const resolvedOffset = sideOffset ?? (pointAnchored && !hasExplicitAnchor ? 0 : 4);
   return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs(
     Popover,
     {
       UNSTABLE_portalContainer: overlayPortalContainer,
       "data-slot": "dropdown-menu-content",
       isNonModal: !modal,
-      placement: toPlacement(side ?? anchor?.side, align ?? anchor?.align),
-      offset: sideOffset,
+      placement: resolvedPlacement,
+      offset: resolvedOffset,
       crossOffset: alignOffset,
       shouldFlip: avoidCollisions,
       containerPadding: collisionPadding,
@@ -168,15 +340,16 @@ function DropdownMenuContent({
           "div",
           {
             ...props,
+            ...hoverSurfaceProps,
             role: void 0,
             ...radixSurfaceState(state),
-            "data-align": align ?? anchor?.align ?? "center",
+            "data-align": align ?? anchor?.align ?? (pointAnchored && !hasExplicitAnchor ? "start" : "center"),
             "data-width": width
           }
         )
       ),
       children: [
-        /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children }),
+        /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, autoFocus: openedByHover.current ? false : void 0, children }),
         arrow ? /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
           "svg",
           {
@@ -388,6 +561,7 @@ function DropdownMenuSubContent({
   void hideWhenDetached;
   void sticky;
   const overlayPortalContainer = useOverlayPortalContainer();
+  const hoverSurfaceProps = useHoverSurfaceProps();
   return /* @__PURE__ */ jsx(
     Popover,
     {
@@ -408,6 +582,7 @@ function DropdownMenuSubContent({
           "div",
           {
             ...props,
+            ...hoverSurfaceProps,
             role: void 0,
             ...radixSurfaceState(state),
             "data-align": align ?? "center"

package/dist/components/navigation/index.d.ts

@@ -1,8 +1,5 @@
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
-export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "./context-menu.js";
 export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, } from "./pagination.js";
-export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from "./menubar.js";
-export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from "./navigation-menu.js";
 export { Steps } from "./steps.js";
 export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
 export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarOverflowProp, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";

package/dist/components/navigation/index.js

@@ -1,20 +1,4 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
-import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger
-} from "./context-menu.js";
 import {
   Pagination,
   PaginationContent,
@@ -24,32 +8,6 @@ import {
   PaginationPrevious,
   PaginationNext
 } from "./pagination.js";
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarLabel,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger
-} from "./menubar.js";
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport
-} from "./navigation-menu.js";
 import { Steps } from "./steps.js";
 import { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
 import { AppSettingPicker } from "./app-setting-picker.js";
@@ -74,20 +32,6 @@ import {
 export {
   AppSettingPicker,
   AppSettingToggle,
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -105,28 +49,6 @@ export {
   DropdownMenuTrigger,
   FilterBar,
   FilterBarGroup,
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarLabel,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
   Pagination,
   PaginationContent,
   PaginationEllipsis,

package/dist/components/navigation/steps.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { StepsProp } from "../../props/components/navigation.prop.js";
 export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, StepsSeparatorProp, StepsTypeProp, } from "../../props/components/navigation.prop.js";
-export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, separator, percent, onValueChange, className, }: StepsProp): React.JSX.Element;
+export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, separator, percent, onValueChange, className, ...props }: StepsProp): React.JSX.Element;

package/dist/components/navigation/steps.js

@@ -50,7 +50,8 @@ function Steps({
   separator = "chevron",
   percent,
   onValueChange,
-  className
+  className,
+  ...props
 }) {
   const { t } = useTranslation();
   const base = defaultValue;
@@ -69,6 +70,7 @@ function Steps({
       "data-type": type,
       className: cn("flex w-full", inline ? "ui-steps-inline" : "ui-steps-list", className),
       "aria-label": t("navigation.steps.ariaLabel"),
+      ...props,
       children: items.map((item, index) => {
         const absoluteIndex = base + index;
         const stepStatus = resolveStepStatus(absoluteIndex, current, item.status, currentStatus);

package/dist/components/navigation/tabs-scroll.d.ts

@@ -34,3 +34,30 @@ export declare function syncActiveTabIntoView(list: HTMLElement | null, behavior
  * pre-fix behaviour instead of throwing.
  */
 export declare function useKeepActiveTabVisible(listRef: React.RefObject<HTMLElement | null>): void;
+/**
+ * The values of the triggers that are NOT fully inside the strip's scrollport, in document order.
+ *
+ * Pure apart from the two rect reads — `values` is the `items` array's own order, and the triggers
+ * are matched to it by INDEX rather than by DOM id: `TabsTrigger` hands its `value` to React Aria
+ * as the collection KEY, and the rendered `id` attribute is RAC-generated, so the element carries
+ * no readable handle back to the item it came from.
+ *
+ * This is the measurement behind `overflow="menu"`. It is separated from the hook below so it can
+ * be exercised on plain numbers — jsdom lays nothing out, so the only honest unit assertions about
+ * it are the ones that hand it real geometry.
+ */
+export declare function resolveHiddenTabValues(list: HTMLElement, values: readonly string[]): string[];
+/**
+ * Keeps `onChange` fed with the values currently out of the scrollport, recomputing on the two
+ * things that can move them: the strip resizing (a viewport change, a font swap, a tab added or
+ * removed) and the strip scrolling (the user swiping, or `useKeepActiveTabVisible` re-pinning a
+ * trigger).
+ *
+ * `values` is joined into the effect key rather than passed as a dependency, so a consumer that
+ * rebuilds its `items` array on every render does not re-arm the observers on every render.
+ *
+ * The first measurement ALWAYS reports, even when nothing is hidden. Suppressing it looks harmless
+ * and is not: on a remount the local `last` resets while the caller's state does not, so a strip
+ * that had overflowed and then stopped would keep a stale menu forever.
+ */
+export declare function useTabsOverflowValues(listRef: React.RefObject<HTMLElement | null>, values: readonly string[] | undefined, onChange: (hidden: string[]) => void): void;