@godxjp/ui 22.0.0 → 23.1.0

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

@@ -5,6 +5,7 @@ import { Switch as AriaSwitch } from "react-aria-components";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useFieldIdentity, useMirroredInputAttributes } from "../../lib/field-a11y.js";
+import { withOwnHitTarget } from "./choice-hit-target.js";
 const Switch = React.forwardRef(
   ({
     className,
@@ -72,13 +73,14 @@ const Switch = React.forwardRef(
             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
             // components, so it silently outranked that token. Byte-identical: the token
             // defaults to 0.5. (`shadow-xs` STAYS — .ui-switch declares --shadow-sm, so this
             // utility is the switch's real resting elevation, not a duplicate.)
-            "peer ui-switch shadow-xs transition-all outline-none",
+            "peer ui-switch shadow-xs transition-all",
             className
           ),
           children: [

package/dist/components/feedback/dialog.js

@@ -149,7 +149,7 @@ function DialogContent({
     showCloseButton ? /* @__PURE__ */ jsxs(
       DialogClose,
       {
-        className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
+        className: "ui-focus-ring transition-opacity disabled:pointer-events-none",
         children: [
           /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
@@ -265,7 +265,7 @@ function AlertDialogContent({
       {
         type: "button",
         "data-slot": "dialog-close",
-        className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
+        className: "ui-focus-ring transition-opacity disabled:pointer-events-none",
         "aria-label": t("feedback.alert.dismiss"),
         onClick: () => {
           state.setOpen(false);

package/dist/components/feedback/sheet.js

@@ -6,7 +6,7 @@ import { chain, mergeRefs } from "@react-aria/utils";
 import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
-import { useMediaQuery } from "../../lib/hooks.js";
+import { useMaxWidthBreakpoint } from "../../lib/breakpoint-token.js";
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
@@ -15,28 +15,8 @@ import { useTranslation } from "../../i18n/use-translation.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
 const SHEET_BREAKPOINT_TOKEN = "--sheet-responsive-breakpoint-width";
 const SHEET_BREAKPOINT_FALLBACK_QUERY = "(max-width: 768px)";
-function cssLengthToPx(value, rootFontSize) {
-  const match = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(value.trim());
-  if (match == null) return void 0;
-  const amount = Number(match[1]);
-  if (!Number.isFinite(amount)) return void 0;
-  return match[2] === "rem" || match[2] === "em" ? amount * rootFontSize : amount;
-}
-function readSheetBreakpointQuery() {
-  if (typeof document === "undefined" || typeof window.getComputedStyle !== "function") {
-    return SHEET_BREAKPOINT_FALLBACK_QUERY;
-  }
-  const rootStyle = window.getComputedStyle(document.documentElement);
-  const rootFontSize = cssLengthToPx(rootStyle.fontSize || "16px", 16) ?? 16;
-  const px = cssLengthToPx(rootStyle.getPropertyValue(SHEET_BREAKPOINT_TOKEN), rootFontSize);
-  return px == null ? SHEET_BREAKPOINT_FALLBACK_QUERY : `(max-width: ${String(px)}px)`;
-}
 function useSheetResponsiveMode(responsive = "side") {
-  const [query, setQuery] = React.useState(SHEET_BREAKPOINT_FALLBACK_QUERY);
-  React.useEffect(() => {
-    setQuery(readSheetBreakpointQuery());
-  }, []);
-  const compact = useMediaQuery(query);
+  const compact = useMaxWidthBreakpoint(SHEET_BREAKPOINT_TOKEN, SHEET_BREAKPOINT_FALLBACK_QUERY);
   if (responsive === "side" || responsive === "bottom") return responsive;
   return compact ? "bottom" : "side";
 }

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/filter-bar.js

@@ -96,7 +96,8 @@ function Toolbar({
                         defaultValue: filter.defaultSelected,
                         onValueChange: (selected) => filter.onSelectedChange?.(selected),
                         placeholder: filter.placeholder,
-                        disabled: disabled || filter.disabled
+                        disabled: disabled || filter.disabled,
+                        clearLabel: typeof filter.label === "string" ? t("navigation.filterBar.clearFilter", { label: filter.label }) : void 0
                       }
                     )
                   },

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/tabs.js

@@ -9,6 +9,7 @@ import {
 } from "react-aria-components";
 import { MoreHorizontal, Plus, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { useMaxWidthBreakpoint } from "../../lib/breakpoint-token.js";
 import { cn } from "../../lib/utils.js";
 import {
   DropdownMenu,
@@ -57,6 +58,13 @@ function resolveTabsAxis(tabPlacement, orientation) {
     orientation: orientation ?? "horizontal"
   };
 }
+const TABS_PLACEMENT_BREAKPOINT_TOKEN = "--tabs-placement-responsive-breakpoint-width";
+const TABS_PLACEMENT_BREAKPOINT_FALLBACK_QUERY = "(max-width: 768px)";
+function foldVerticalPlacement(axis, narrow) {
+  if (!narrow || axis.orientation !== "vertical") return axis;
+  const trailing = axis.placement === "end" || axis.placement === "bottom";
+  return { placement: trailing ? "bottom" : "top", orientation: "horizontal" };
+}
 function Tabs({
   className,
   orientation,
@@ -85,9 +93,13 @@ function Tabs({
 }) {
   const { t } = useTranslation();
   const resolvedDefault = resolveFallbackTabValue(items, defaultValue);
-  const { placement, orientation: resolvedOrientation } = resolveTabsAxis(
-    tabPlacement,
-    orientation
+  const narrow = useMaxWidthBreakpoint(
+    TABS_PLACEMENT_BREAKPOINT_TOKEN,
+    TABS_PLACEMENT_BREAKPOINT_FALLBACK_QUERY
+  );
+  const { placement, orientation: resolvedOrientation } = foldVerticalPlacement(
+    resolveTabsAxis(tabPlacement, orientation),
+    narrow
   );
   const selectionSuppressed = value === void 0 && items != null && items.length > 0 && resolvedDefault === void 0;
   const frame = React.useMemo(
@@ -470,7 +482,7 @@ const TabsContent = React.forwardRef(
         ref,
         id: value,
         shouldForceMount: forceMount,
-        className: cn("ui-focus-ring flex-1 outline-none", className),
+        className: cn("ui-focus-ring flex-1", className),
         render: (domProps, renderProps) => withDomProps("div", "tabs-content", props, domProps, {
           // A force-mounted panel whose tab is not selected: Radix marked it `data-state="inactive"`
           // and `hidden`; RAC marks it inert. The state hook is re-emitted so CSS keys the same way.

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

@@ -10,9 +10,6 @@ export * from "./card.js";
 export * from "./checkbox.js";
 export * from "./color-picker.js";
 export * from "./command.js";
-export * from "./context-menu.js";
-export * from "./menubar.js";
-export * from "./navigation-menu.js";
 export * from "./resizable.js";
 export * from "./date-picker.js";
 export * from "./dialog.js";

package/dist/components/ui/index.js

@@ -11,9 +11,6 @@ export * from "./card.js";
 export * from "./checkbox.js";
 export * from "./color-picker.js";
 export * from "./command.js";
-export * from "./context-menu.js";
-export * from "./menubar.js";
-export * from "./navigation-menu.js";
 export * from "./resizable.js";
 export * from "./date-picker.js";
 export * from "./dialog.js";

package/dist/components/ui/input-otp.d.ts

@@ -16,7 +16,7 @@ import * as React from "react";
  * too, and `input-otp` writes its own internal state inside its paste handler, which a wrapper
  * that only intercepted `onChange` could not undo.
  */
-export declare const InputOTP: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "onChange" | "size" | "value"> & {
+export declare const InputOTP: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "onChange" | "size" | "style" | "value"> & {
     maxLength: number;
     value?: string;
     defaultValue?: string;

package/dist/components/ui/segmented.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
+import { withOwnHitTarget } from "../data-entry/choice-hit-target.js";
 import { cn } from "../../lib/utils.js";
 const Segmented = React.forwardRef(function Segmented2({
   options,
@@ -44,7 +45,8 @@ const Segmented = React.forwardRef(function Segmented2({
             "label",
             {
               ...domProps,
-              "data-state": state.isSelected ? "checked" : "unchecked"
+              "data-state": state.isSelected ? "checked" : "unchecked",
+              children: withOwnHitTarget(domProps.children)
             }
           ),
           children: [

package/dist/components/ui/tag-input.js

@@ -7,11 +7,9 @@ import { cn } from "../../lib/utils.js";
 import {
   applyMaxTagCount,
   controlSurfaceAttrs,
-  resolveAllowClear
+  resolveAllowClear,
+  splitByTokenSeparators
 } from "../data-entry/control-surface.js";
-function escapeForCharClass(character) {
-  return character.replace(/[\\\]^-]/g, "\\$&");
-}
 const TagInput = React.forwardRef(
   ({
     value,
@@ -51,7 +49,7 @@ const TagInput = React.forwardRef(
     };
     const addAll = (raw) => {
       let next = [...tags];
-      const pieces = tokenSeparators.length ? raw.split(new RegExp(`[${tokenSeparators.map(escapeForCharClass).join("")}]`)) : [raw];
+      const pieces = splitByTokenSeparators(raw, tokenSeparators);
       for (const piece of pieces) {
         const tag = piece.trim();
         if (!tag || next.includes(tag)) continue;