@godxjp/ui 19.5.0 → 20.0.0

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

@@ -1,138 +1,361 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {
+  Header,
+  Menu,
+  MenuItem,
+  MenuSection,
+  MenuTrigger,
+  OverlayTriggerStateContext,
+  Popover,
+  Pressable,
+  Separator,
+  SubmenuTrigger
+} from "react-aria-components";
 import { Check, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { useInertHiddenBackground } from "../general/inert-background.js";
-function DropdownMenu(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+import { Slot } from "../../lib/slot.js";
+function borrowedTag(children, asChild) {
+  return asChild ? React.Children.only(children) : null;
 }
-function DropdownMenuTrigger(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+function renderItemTag(tag, domProps, content) {
+  if (!tag) {
+    return /* @__PURE__ */ jsx("div", { ...domProps, children: content });
+  }
+  return /* @__PURE__ */ jsx(Slot, { ...domProps, children: React.cloneElement(tag, void 0, content) });
+}
+function radixItemState(state) {
+  return {
+    "data-highlighted": state.isFocused ? "" : void 0,
+    "data-disabled": state.isDisabled ? "" : void 0,
+    "data-state": state.hasSubmenu ? state.isOpen ? "open" : "closed" : state.selectionMode === "none" ? void 0 : state.isSelected ? "checked" : "unchecked"
+  };
+}
+function radixSurfaceState(state) {
+  return {
+    "data-state": state.isExiting ? "closed" : "open",
+    "data-side": state.placement && state.placement !== "center" ? state.placement : void 0
+  };
 }
-function DropdownMenuPortal(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+function toPlacement(side, align) {
+  const resolvedSide = side ?? "bottom";
+  if (!align || align === "center") return resolvedSide;
+  return `${resolvedSide} ${align}`;
 }
-function DropdownMenuGroup(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+function selectEvent(name) {
+  return typeof CustomEvent === "function" ? new CustomEvent(name, { bubbles: false, cancelable: true }) : { defaultPrevented: false, preventDefault() {
+  } };
 }
-function DropdownMenuRadioGroup(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+const DropdownMenuModalContext = React.createContext({ modal: true });
+function DropdownMenu({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = true,
+  dir
+}) {
+  void dir;
+  const options = React.useMemo(() => ({ modal }), [modal]);
+  return /* @__PURE__ */ jsx(DropdownMenuModalContext.Provider, { value: options, children: /* @__PURE__ */ jsx(MenuTrigger, { isOpen: open, defaultOpen, onOpenChange, children }) });
+}
+function DropdownMenuTrigger({ asChild, children, ...props }) {
+  const state = React.useContext(OverlayTriggerStateContext);
+  const dataState = state?.isOpen ? "open" : "closed";
+  if (asChild && React.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(Pressable, { children: React.cloneElement(children, {
+      "data-slot": "dropdown-menu-trigger",
+      "data-state": dataState
+    }) });
+  }
+  return /* @__PURE__ */ jsx(Pressable, { children: /* @__PURE__ */ jsx("button", { type: "button", "data-slot": "dropdown-menu-trigger", "data-state": dataState, ...props, children }) });
+}
+function DropdownMenuPortal({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function DropdownMenuGroup({ children, className }) {
+  return /* @__PURE__ */ jsx(MenuSection, { "data-slot": "dropdown-menu-group", className, children });
+}
+function DropdownMenuRadioGroup({
+  children,
+  className,
+  value,
+  onValueChange
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuSection,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      className,
+      selectionMode: "single",
+      disallowEmptySelection: true,
+      selectedKeys: value == null ? [] : [value],
+      onSelectionChange: (keys) => {
+        if (keys === "all") return;
+        const [first] = [...keys];
+        if (first != null) onValueChange?.(String(first));
+      },
+      children
+    }
+  );
 }
-function DropdownMenuSub(props) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+function DropdownMenuSub({ children }) {
+  const parts = React.Children.toArray(children).filter(React.isValidElement);
+  return /* @__PURE__ */ jsx(SubmenuTrigger, { children: parts });
 }
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
-  const contentRef = useInertHiddenBackground(ref);
+function DropdownMenuContent({
+  children,
+  className,
+  side,
+  align,
+  sideOffset = 4,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  loop,
+  hideWhenDetached,
+  sticky,
+  forceMount
+}) {
+  void hideWhenDetached;
+  void sticky;
+  void forceMount;
+  const { modal } = React.useContext(DropdownMenuModalContext);
   return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.Content,
+    Popover,
     {
-      ref: contentRef,
       "data-slot": "dropdown-menu-content",
-      sideOffset,
+      isNonModal: !modal,
+      placement: toPlacement(side, align),
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip: avoidCollisions,
+      containerPadding: collisionPadding,
       className: cn(
-        "ui-dropdown-menu-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
+        "ui-dropdown-menu-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--trigger-anchor-point)]",
         className
       ),
-      ...props
+      render: (props, state) => (
+        // `role={undefined}`: một menu không phải một dialog — xem radixSurfaceState.
+        /* @__PURE__ */ jsx("div", { ...props, role: void 0, ...radixSurfaceState(state) })
+      ),
+      children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children })
     }
   ) });
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    "data-slot": "dropdown-menu-item",
-    "data-inset": inset,
-    "data-variant": variant,
-    className: cn(
-      "ui-dropdown-menu-item [&_svg:not([class*='text-'])]:text-muted-foreground",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    "data-slot": "dropdown-menu-label",
-    "data-inset": inset,
-    className: cn("ui-dropdown-menu-label", className),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    "data-slot": "dropdown-menu-separator",
-    className: cn("ui-dropdown-menu-separator", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    "data-slot": "dropdown-menu-checkbox-item",
-    className: cn("ui-dropdown-menu-checkbox-item", className),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "ui-dropdown-menu-indicator-slot", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "ui-dropdown-menu-check", "aria-hidden": "true" }) }) }),
+}
+function DropdownMenuItem({
+  children,
+  className,
+  inset,
+  variant = "default",
+  disabled,
+  onSelect,
+  textValue,
+  asChild
+}) {
+  const tag = borrowedTag(children, asChild);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      isDisabled: disabled,
+      textValue,
+      onAction: onSelect ? () => onSelect(selectEvent("dropdownmenu.itemSelect")) : void 0,
+      className: cn(
+        "ui-dropdown-menu-item [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      render: (props, state) => {
+        const { children: content, ...rest } = props;
+        return renderItemTag(
+          tag,
+          {
+            ...rest,
+            "data-slot": "dropdown-menu-item",
+            "data-inset": inset,
+            "data-variant": variant,
+            ...radixItemState(state)
+          },
+          content
+        );
+      },
+      children: tag ? tag.props.children : children
+    }
+  );
+}
+function DropdownMenuLabel({ children, className, inset, asChild }) {
+  return /* @__PURE__ */ jsx(
+    Header,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn("ui-dropdown-menu-label", className),
+      render: asChild ? (props) => /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ...props
+        }
+      ) : void 0,
       children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    ref,
-    "data-slot": "dropdown-menu-radio-item",
-    className: cn("ui-dropdown-menu-radio-item", className),
-    ...props,
-    children
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.SubTrigger,
-  {
-    ref,
-    "data-slot": "dropdown-menu-sub-trigger",
-    "data-inset": inset,
-    className: cn(
-      "ui-dropdown-menu-sub-trigger [&_svg:not([class*='text-'])]:text-muted-foreground",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ui-dropdown-menu-sub-trigger-icon", "aria-hidden": "true" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.SubContent,
-  {
-    ref,
-    "data-slot": "dropdown-menu-sub-content",
-    className: cn(
-      "ui-dropdown-menu-sub-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+    }
+  );
+}
+function DropdownMenuSeparator({ className }) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("ui-dropdown-menu-separator", className)
+    }
+  );
+}
+const CHECKBOX_KEY = "checked-item";
+function DropdownMenuCheckboxItem({
+  children,
+  className,
+  checked,
+  onCheckedChange,
+  disabled,
+  textValue,
+  asChild
+}) {
+  const tag = borrowedTag(children, asChild);
+  return /* @__PURE__ */ jsx(
+    MenuSection,
+    {
+      selectionMode: "multiple",
+      shouldCloseOnSelect: true,
+      selectedKeys: checked ? [CHECKBOX_KEY] : [],
+      onSelectionChange: (keys) => {
+        onCheckedChange?.(keys === "all" ? true : keys.has(CHECKBOX_KEY));
+      },
+      children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          id: CHECKBOX_KEY,
+          isDisabled: disabled,
+          textValue,
+          className: cn("ui-dropdown-menu-checkbox-item", className),
+          render: (props, state) => {
+            const { children: content, ...rest } = props;
+            return renderItemTag(
+              tag,
+              { ...rest, "data-slot": "dropdown-menu-checkbox-item", ...radixItemState(state) },
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "ui-dropdown-menu-indicator-slot", children: state.isSelected ? /* @__PURE__ */ jsx(Check, { className: "ui-dropdown-menu-check", "aria-hidden": "true" }) : null }),
+                content
+              ] })
+            );
+          },
+          children: tag ? tag.props.children : children
+        }
+      )
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  children,
+  className,
+  value,
+  disabled,
+  textValue,
+  asChild
+}) {
+  const tag = borrowedTag(children, asChild);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      id: value,
+      isDisabled: disabled,
+      textValue,
+      className: cn("ui-dropdown-menu-radio-item", className),
+      render: (props, state) => {
+        const { children: content, ...rest } = props;
+        return renderItemTag(
+          tag,
+          { ...rest, "data-slot": "dropdown-menu-radio-item", ...radixItemState(state) },
+          content
+        );
+      },
+      children: tag ? tag.props.children : children
+    }
+  );
+}
+function DropdownMenuSubTrigger({
+  children,
+  className,
+  inset,
+  disabled,
+  textValue,
+  asChild
+}) {
+  const tag = borrowedTag(children, asChild);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      isDisabled: disabled,
+      textValue,
+      className: cn(
+        "ui-dropdown-menu-sub-trigger [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      render: (props, state) => {
+        const { children: content, ...rest } = props;
+        return renderItemTag(
+          tag,
+          {
+            ...rest,
+            "data-slot": "dropdown-menu-sub-trigger",
+            "data-inset": inset,
+            ...radixItemState(state)
+          },
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            content,
+            /* @__PURE__ */ jsx(ChevronRight, { className: "ui-dropdown-menu-sub-trigger-icon", "aria-hidden": "true" })
+          ] })
+        );
+      },
+      children: tag ? tag.props.children : children
+    }
+  );
+}
+function DropdownMenuSubContent({
+  children,
+  className,
+  align,
+  alignOffset,
+  sideOffset,
+  avoidCollisions,
+  collisionPadding,
+  loop,
+  forceMount,
+  hideWhenDetached,
+  sticky
+}) {
+  void forceMount;
+  void hideWhenDetached;
+  void sticky;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      placement: align ? toPlacement("right", align) : void 0,
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip: avoidCollisions,
+      containerPadding: collisionPadding,
+      className: cn(
+        "ui-dropdown-menu-sub-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--trigger-anchor-point)]",
+        className
+      ),
+      render: (props, state) => (
+        // `role={undefined}`: một menu không phải một dialog — xem radixSurfaceState.
+        /* @__PURE__ */ jsx("div", { ...props, role: void 0, ...radixSurfaceState(state) })
+      ),
+      children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children })
+    }
+  );
+}
 const DropdownMenuShortcut = ({
   className,
   ...props
@@ -159,5 +382,9 @@ export {
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
+  radixItemState,
+  radixSurfaceState,
+  selectEvent,
+  toPlacement
 };

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

@@ -8,5 +8,7 @@ export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.j
 export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarOverflowProp, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingKind, } from "./app-setting-picker.js";
+export { AppSettingToggle } from "./app-setting-toggle.js";
+export type { AppSettingToggleProp, AppSettingToggleProps, AppSettingToggleKind, } from "./app-setting-toggle.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";

package/dist/components/navigation/index.js

@@ -53,6 +53,7 @@ import {
 import { Steps } from "./steps.js";
 import { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
 import { AppSettingPicker } from "./app-setting-picker.js";
+import { AppSettingToggle } from "./app-setting-toggle.js";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -72,6 +73,7 @@ import {
 } from "./dropdown-menu.js";
 export {
   AppSettingPicker,
+  AppSettingToggle,
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,

package/dist/components/navigation/pagination-utils.d.ts

@@ -1,5 +1,6 @@
 /**
- * Build visible page numbers with ellipsis — Ant Design / MUI pagination style. The item count is
+ * Build visible page numbers with ellipsis — the conventional enterprise / MUI pagination style.
+ * The item count is
  * CONSTANT wherever the current page sits.
  */
 export declare function buildPageRange(current: number, totalPages: number, siblingCount?: number, boundaryCount?: number): (number | "ellipsis")[];

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

@@ -1,20 +1,61 @@
 import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
 export type TabsItem = {
     value: string;
     label: React.ReactNode;
     content: React.ReactNode;
     disabled?: boolean;
 };
-export type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {
+export type TabsOrientation = "vertical" | "horizontal";
+/**
+ * The repo's Radix-era vocabulary, kept VERBATIM. React Aria spells the same four things
+ * `selectedKey` / `defaultSelectedKey` / `onSelectionChange` / `keyboardActivation`; the
+ * translation lives inside this file so no consumer ever has to learn RAC's names.
+ *
+ * `activationMode` is the one that MUST NOT be dropped. `.ai/rules/settings.md` in the consumer
+ * requires `orientation="vertical"` + `activationMode="manual"` for the settings rail, because
+ * every item there is a URL — automatic activation would load four pages while the reader is only
+ * arrowing past them.
+ */
+export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> & {
+    /** Controlled selected tab — RAC `selectedKey`. */
+    value?: string;
+    /** Uncontrolled initial selection — RAC `defaultSelectedKey`. */
+    defaultValue?: string;
+    /** Fired with the NEW selected value — RAC `onSelectionChange`. */
+    onValueChange?: (value: string) => void;
+    orientation?: TabsOrientation;
+    /**
+     * DOM attribute only. Under Radix this also steered RTL arrow keys; React Aria reads the
+     * direction from the locale, so an RTL app must set it through `I18nProvider`.
+     */
+    dir?: "ltr" | "rtl";
+    /** `"manual"` = arrow keys move focus without selecting — RAC `keyboardActivation`. */
+    activationMode?: "manual" | "automatic";
     items?: TabsItem[];
     variant?: "default" | "line" | "card";
     listClassName?: string;
     contentClassName?: string;
 };
-export declare function Tabs({ className, orientation, items, value, defaultValue, variant, listClassName, contentClassName, ...props }: TabsProps): React.JSX.Element;
-export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     variant?: "default" | "line";
+    /**
+     * ACCEPTED AND IGNORED. Radix's `RovingFocusGroup` took a `loop` switch; React Aria's tab list
+     * always wraps at the ends and exposes no equivalent knob. The prop stays so no consumer's build
+     * breaks. No test records this: the claim worth pinning would have been "both libraries wrap
+     * by default", and once Radix is gone there is no second library left to compare against.
+     */
+    loop?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value"> & {
+    /** The tab's key — RAC `id` (its DOM `id` stays RAC-generated, exactly as Radix generated one). */
+    value: string;
+    /** RAC `isDisabled`; ALSO written to the button so `disabled:` utilities keep matching. */
+    disabled?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "value"> & {
+    /** The panel's key — must match a `TabsTrigger value`. RAC `id`. */
+    value: string;
+    /** Keep the panel mounted while another tab is selected — RAC `shouldForceMount`. */
+    forceMount?: true;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;