@godxjp/ui 20.2.1 → 22.0.0

package/dist/components/data-entry/tree-utils.js

@@ -1,154 +1 @@
-function reactNodeText(value) {
-  if (value == null || typeof value === "boolean") return "";
-  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
-    return String(value);
-  }
-  if (Array.isArray(value)) {
-    return value.map((item) => reactNodeText(item)).join("");
-  }
-  return "";
-}
-function unknownText(value) {
-  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
-    return String(value);
-  }
-  return "";
-}
-function normalizeTreeOptions(nodes, fieldNames) {
-  if (!nodes?.length) return [];
-  const labelKey = fieldNames?.label ?? "label";
-  const valueKey = fieldNames?.value ?? "value";
-  const childrenKey = fieldNames?.children ?? "children";
-  return nodes.map((node) => {
-    const children = node[childrenKey];
-    const value = unknownText(node[valueKey]);
-    const label = node[labelKey];
-    return {
-      value,
-      label: label ?? value,
-      disabled: Boolean(node.disabled),
-      disableCheckbox: Boolean(node.disableCheckbox),
-      isLeaf: node.isLeaf,
-      children: Array.isArray(children) ? normalizeTreeOptions(children, fieldNames) : void 0
-    };
-  });
-}
-function getNodeByPath(options, path) {
-  const chain = [];
-  let level = options;
-  for (const segment of path) {
-    const found = level.find((n) => n.value === segment);
-    if (!found) break;
-    chain.push(found);
-    level = found.children ?? [];
-  }
-  return chain;
-}
-function getOptionsAtPath(options, path) {
-  if (!path.length) return options;
-  const chain = getNodeByPath(options, path);
-  return chain.at(-1)?.children ?? [];
-}
-function formatPathLabels(chain, separator = " / ") {
-  return chain.map((n) => reactNodeText(n.label)).join(separator);
-}
-function collectLeafPaths(options, prefix = [], root = options) {
-  const out = [];
-  for (const node of options) {
-    const path = [...prefix, node.value];
-    const hasChildren = (node.children?.length ?? 0) > 0;
-    if (!hasChildren || node.isLeaf === true) {
-      out.push({ path, labels: getNodeByPath(root, path).map((n) => reactNodeText(n.label)) });
-    }
-    if (hasChildren) out.push(...collectLeafPaths(node.children, path, root));
-  }
-  return out;
-}
-function collectAllPaths(options, prefix = [], root = options) {
-  const out = [];
-  for (const node of options) {
-    const path = [...prefix, node.value];
-    out.push({ path, labels: getNodeByPath(root, path).map((n) => reactNodeText(n.label)) });
-    if (node.children?.length) out.push(...collectAllPaths(node.children, path, root));
-  }
-  return out;
-}
-function pathKey(path) {
-  return path.join("\0");
-}
-function pathsEqual(a, b) {
-  return a.length === b.length && a.every((v, i) => v === b[i]);
-}
-function filterTreeOptions(options, query, filter) {
-  const q = query.trim().toLowerCase();
-  if (!q) return [];
-  const paths = collectLeafPaths(options);
-  return paths.filter(({ path }) => {
-    const chain = getNodeByPath(options, path);
-    if (filter) return filter(query, chain);
-    return chain.some((n) => reactNodeText(n.label).toLowerCase().includes(q));
-  });
-}
-function getDescendantValues(node) {
-  const values = [node.value];
-  for (const child of node.children ?? []) values.push(...getDescendantValues(child));
-  return values;
-}
-function flattenVisibleTree(options, expandedKeys, depth = 0) {
-  const out = [];
-  for (const node of options) {
-    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
-    out.push({ node, depth, hasChildren });
-    if (hasChildren && expandedKeys.has(node.value)) {
-      out.push(...flattenVisibleTree(node.children, expandedKeys, depth + 1));
-    }
-  }
-  return out;
-}
-function filterVisibleTree(options, query) {
-  const q = query.trim().toLowerCase();
-  if (!q) return flattenVisibleTree(options, new Set(collectAllExpandableKeys(options)));
-  function matches(nodes, depth) {
-    return nodes.flatMap((node) => {
-      const children = node.isLeaf ? [] : matches(node.children ?? [], depth + 1);
-      if (!reactNodeText(node.label).toLowerCase().includes(q) && children.length === 0) return [];
-      return [{ node, depth, hasChildren: children.length > 0 }, ...children];
-    });
-  }
-  return matches(options, 0);
-}
-function collectAllExpandableKeys(options) {
-  const keys = [];
-  for (const node of options) {
-    if ((node.children?.length ?? 0) > 0 && node.isLeaf !== true) {
-      keys.push(node.value);
-      keys.push(...collectAllExpandableKeys(node.children));
-    }
-  }
-  return keys;
-}
-function findNodeByValue(options, value) {
-  for (const node of options) {
-    if (node.value === value) return node;
-    const nested = node.children ? findNodeByValue(node.children, value) : void 0;
-    if (nested) return nested;
-  }
-  return void 0;
-}
-export {
-  collectAllExpandableKeys,
-  collectAllPaths,
-  collectLeafPaths,
-  filterTreeOptions,
-  filterVisibleTree,
-  findNodeByValue,
-  flattenVisibleTree,
-  formatPathLabels,
-  getDescendantValues,
-  getNodeByPath,
-  getOptionsAtPath,
-  normalizeTreeOptions,
-  pathKey,
-  pathsEqual,
-  reactNodeText
-};
+export * from "../../lib/tree.js";

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/menubar.d.ts

@@ -1,9 +1,16 @@
 import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 export declare const Menubar: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>>;
-export declare const MenubarMenu: (props: MenubarPrimitive.MenubarMenuProps & {
-    __scopeMenubar?: import("@radix-ui/react-context").Scope;
-}) => React.JSX.Element;
+/**
+ * Annotated rather than inferred, and that is load-bearing.
+ *
+ * Radix types this one through `createContextScope`, so its INFERRED type reaches into
+ * `@radix-ui/react-context` for a `Scope` — and TypeScript then refuses to emit a declaration it
+ * cannot name portably (TS2883) unless that package is a DIRECT dependency. It was one, purely to
+ * satisfy this line: nothing in the tree ever imported it. Naming the props here severs that,
+ * which is what let the dependency go.
+ */
+export declare const MenubarMenu: (props: React.ComponentProps<typeof MenubarPrimitive.Menu>) => React.ReactNode;
 export declare function MenubarTrigger(props: React.ComponentProps<typeof MenubarPrimitive.Trigger>): React.JSX.Element;
 export declare const MenubarContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const MenubarItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {

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;

package/dist/components/navigation/tabs-scroll.js

@@ -67,10 +67,61 @@ function useKeepActiveTabVisible(listRef) {
     };
   }, [listRef]);
 }
+function resolveHiddenTabValues(list, values) {
+  const scrollport = list.getBoundingClientRect();
+  const triggers = [...list.querySelectorAll('[role="tab"]')];
+  const hidden = [];
+  triggers.forEach((trigger, index) => {
+    const value = values[index];
+    if (value === void 0) return;
+    if (!isTabFullyVisible(scrollport, trigger.getBoundingClientRect())) hidden.push(value);
+  });
+  return hidden;
+}
+function useTabsOverflowValues(listRef, values, onChange) {
+  const onChangeRef = React.useRef(onChange);
+  React.useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  const key = values === void 0 ? null : values.join(" ");
+  React.useEffect(() => {
+    if (key === null) return void 0;
+    const list = listRef.current;
+    if (!list) return void 0;
+    const all = key === "" ? [] : key.split(" ");
+    let last = null;
+    const measure = () => {
+      const hidden = resolveHiddenTabValues(list, all);
+      const next = hidden.join(" ");
+      if (next === last) return;
+      last = next;
+      onChangeRef.current(hidden);
+    };
+    measure();
+    list.addEventListener("scroll", measure, { passive: true });
+    const cleanups = [
+      () => {
+        list.removeEventListener("scroll", measure);
+      }
+    ];
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(measure);
+      resizeObserver.observe(list);
+      cleanups.push(() => {
+        resizeObserver.disconnect();
+      });
+    }
+    return () => {
+      for (const cleanup of cleanups) cleanup();
+    };
+  }, [key, listRef]);
+}
 export {
   isTabFullyVisible,
   prefersReducedMotion,
+  resolveHiddenTabValues,
   resolveTabScrollTarget,
   syncActiveTabIntoView,
-  useKeepActiveTabVisible
+  useKeepActiveTabVisible,
+  useTabsOverflowValues
 };

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { TabItemProp, TabsProp } from "../../props/components/navigation.prop.js";
-export type { TabItemProp, TabsProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, } from "../../props/components/navigation.prop.js";
+export type { TabItemProp, TabsProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, TabsOverflowProp, } from "../../props/components/navigation.prop.js";
 export type TabsOrientation = "vertical" | "horizontal";
 export type TabsItem = TabItemProp;
 export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> & TabsProp & {
@@ -8,7 +8,7 @@ export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValu
     dir?: "ltr" | "rtl";
     activationMode?: "manual" | "automatic";
 };
-export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, extra, destroyOnHidden, onEdit, addIcon, hideAdd, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
+export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, extra, destroyOnHidden, onEdit, addIcon, hideAdd, closeIcon, onTabClick, overflow, 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";
     /**

package/dist/components/navigation/tabs.js

@@ -7,10 +7,16 @@ import {
   TabPanel as AriaTabPanel,
   Tabs as AriaTabs
 } from "react-aria-components";
-import { Plus, X } from "lucide-react";
+import { MoreHorizontal, Plus, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { useKeepActiveTabVisible } from "./tabs-scroll.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./dropdown-menu.js";
+import { useKeepActiveTabVisible, useTabsOverflowValues } from "./tabs-scroll.js";
 const TabsFrameContext = React.createContext({
   orientation: "horizontal",
   selectionSuppressed: false
@@ -69,6 +75,9 @@ function Tabs({
   onEdit,
   addIcon,
   hideAdd,
+  closeIcon,
+  onTabClick,
+  overflow = "scroll",
   listClassName,
   contentClassName,
   children,
@@ -86,6 +95,19 @@ function Tabs({
     [resolvedOrientation, selectionSuppressed]
   );
   const editable = variant === "editable-card";
+  const collapsible = items != null && overflow === "menu";
+  const listRef = React.useRef(null);
+  const [hiddenValues, setHiddenValues] = React.useState([]);
+  const itemValues = React.useMemo(
+    () => collapsible ? items.map((item) => item.value) : void 0,
+    [collapsible, items]
+  );
+  const handleHiddenChange = React.useCallback((next) => {
+    setHiddenValues(
+      (prev) => prev.length === next.length && prev.every((value2, index) => value2 === next[index]) ? prev : next
+    );
+  }, []);
+  useTabsOverflowValues(listRef, itemValues, handleHiddenChange);
   const [mirroredValue, setMirroredValue] = React.useState(
     value ?? resolvedDefault
   );
@@ -101,8 +123,9 @@ function Tabs({
     [onValueChange]
   );
   const { start: extraStart, end: extraEnd } = resolveTabsExtra(extra);
+  const overflowItems = collapsible ? items.filter((item) => hiddenValues.includes(item.value)) : [];
   const showAdd = editable && !hideAdd && Boolean(onEdit);
-  const needsBar = Boolean(extraStart || extraEnd || showAdd);
+  const needsBar = Boolean(extraStart || extraEnd || showAdd || collapsible);
   const card = variant === "card" || variant === "editable-card";
   const sizeTriggerClassName = cn(
     size === "sm" && "min-h-[var(--tabs-trigger-height-sm)] px-[var(--tabs-trigger-padding-x-sm)] text-[length:var(--tabs-trigger-font-size-sm)]",
@@ -112,6 +135,7 @@ function Tabs({
   const list = items ? /* @__PURE__ */ jsx(
     TabsList,
     {
+      ref: listRef,
       "data-slot": "tabs-list",
       variant: variant === "line" ? "line" : "default",
       className: cn(
@@ -136,12 +160,18 @@ function Tabs({
         // the same block inset — so the two construction paths now agree. A service that
         // wants the active bar parked back on the hairline raises `--tabs-indicator-offset`,
         // which exists for exactly that.
-        variant === "line" && "my-[calc(-1_*_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] h-auto w-full justify-start border-b px-[var(--tabs-list-line-space-inset)] py-[calc(var(--tabs-list-line-space-inset)_+_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))]",
+        // `w-full` is scoped to the HORIZONTAL axis. Unscoped it also applied when the root is
+        // vertical, where the strip is a COLUMN beside the panel: `width: 100%` made the strip
+        // claim the whole row and the panel collapsed to its own min-content floor. Measured at a
+        // 1232px root: strip 1133.72px (92%) / panel 90.28px (7%). And it is not a layer problem —
+        // tailwind-merge drops the base `w-fit` as a same-group conflict, so `w-fit` never reached
+        // the DOM at all. Scoping puts it back on the axis it was written for.
+        variant === "line" && "my-[calc(-1_*_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] h-auto justify-start border-b px-[var(--tabs-list-line-space-inset)] py-[calc(var(--tabs-list-line-space-inset)_+_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] data-[orientation=horizontal]:w-full",
         // CARD strip. The list keeps `data-variant="default"` on purpose (a hand-composed
         // <TabsList> must be unaffected), so the card face is selected from the ROOT — but the
         // three properties the base list already claims as utilities (`bg-muted`, `p-1`,
         // `rounded-lg`) have to be replaced with utilities too, or the components layer loses.
-        card && "w-full items-end justify-start gap-[var(--tabs-card-list-space-gap)] rounded-[var(--tabs-card-list-radius)] p-[var(--tabs-card-list-space-inset)] data-[variant=default]:bg-transparent",
+        card && "items-end justify-start gap-[var(--tabs-card-list-space-gap)] rounded-[var(--tabs-card-list-radius)] p-[var(--tabs-card-list-space-inset)] data-[orientation=horizontal]:w-full data-[variant=default]:bg-transparent",
         // CENTERED. Two independent moves, because the strip has two shapes: the pill/card strip
         // is `w-fit` (auto inline margins centre the BOX) and the line strip is `w-full`
         // (`justify-content` centres its CONTENT). `safe` keeps the overflow rule the strip
@@ -157,6 +187,7 @@ function Tabs({
             value: item.value,
             disabled: item.disabled,
             "aria-keyshortcuts": removable ? "Delete" : void 0,
+            onClick: onTabClick ? (event) => onTabClick(item.value, event) : void 0,
             onKeyDown: removable ? (event) => {
               if (event.key !== "Delete" && event.key !== "Backspace") return;
               event.preventDefault();
@@ -220,7 +251,7 @@ function Tabs({
                       event.stopPropagation();
                       onEdit?.(item.value, "remove");
                     },
-                    children: item.closeIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-tabs-tab-remove-icon", "aria-hidden": "true" })
+                    children: item.closeIcon ?? closeIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-tabs-tab-remove-icon", "aria-hidden": "true" })
                   }
                 )
               ) : null
@@ -242,8 +273,8 @@ function Tabs({
       "data-centered": centered ? "true" : void 0,
       orientation: resolvedOrientation,
       keyboardActivation: activationMode,
-      selectedKey: value,
-      defaultSelectedKey: value === void 0 ? resolvedDefault : void 0,
+      selectedKey: value ?? (collapsible ? mirroredValue : void 0),
+      defaultSelectedKey: value === void 0 && !collapsible ? resolvedDefault : void 0,
       onSelectionChange: (key) => handleValueChange(String(key)),
       className: cn(
         // Structure only. The paint (and the placement flip, which is `order`/`flex-direction`)
@@ -281,20 +312,42 @@ function Tabs({
               children: addIcon ?? /* @__PURE__ */ jsx(Plus, { className: "ui-tabs-add-icon", "aria-hidden": "true" })
             }
           ) : null,
+          overflowItems.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(
+              DropdownMenuTrigger,
+              {
+                className: "ui-tabs-overflow",
+                "aria-label": t("navigation.tabs.moreTabs"),
+                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "ui-tabs-overflow-icon", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { placement: "bottomEnd", children: overflowItems.map((item) => /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                disabled: item.disabled,
+                onSelect: () => handleValueChange(item.value),
+                children: item.label
+              },
+              item.value
+            )) })
+          ] }) : null,
           extraEnd ? /* @__PURE__ */ jsx("div", { "data-slot": "tabs-extra", "data-side": "end", className: "ui-tabs-extra", children: extraEnd }) : null
         ] }) : list,
-        items.map((item) => /* @__PURE__ */ jsx(
-          TabsContent,
-          {
-            value: item.value,
-            "data-slot": "tabs-panel",
-            forceMount: destroyOnHidden ? void 0 : true,
-            hidden: destroyOnHidden ? void 0 : item.value !== activeValue,
-            className: contentClassName,
-            children: item.content
-          },
-          item.value
-        ))
+        items.map((item) => {
+          const keepMounted = !destroyOnHidden || item.forceRender === true;
+          return /* @__PURE__ */ jsx(
+            TabsContent,
+            {
+              value: item.value,
+              "data-slot": "tabs-panel",
+              forceMount: keepMounted ? true : void 0,
+              hidden: keepMounted ? item.value !== activeValue : void 0,
+              className: contentClassName,
+              children: item.content
+            },
+            item.value
+          );
+        })
       ] }) : children
     }
   ) });
@@ -330,7 +383,7 @@ const TabsList = React.forwardRef(
           // — so the leading tab sat permanently outside the scrollport (an unreachable control at
           // 320px, WCAG 2.2 SC 2.1.1). `safe` falls back to start alignment exactly when it
           // overflows, and still centres whenever the tabs fit.
-          "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-1 data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
+          "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-[var(--tabs-list-line-space-gap)] data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
           className
         ),
         render: (domProps) => withDomProps("div", "tabs-list", props, domProps, { "data-variant": variant }),
@@ -341,7 +394,7 @@ const TabsList = React.forwardRef(
 );
 TabsList.displayName = "TabsList";
 const TabsTrigger = React.forwardRef(
-  ({ className, value, disabled, children, onKeyDown, ...props }, ref) => {
+  ({ className, value, disabled, children, onKeyDown, onClick, ...props }, ref) => {
     const { orientation, selectionSuppressed } = React.useContext(TabsFrameContext);
     return /* @__PURE__ */ jsx(
       AriaTab,
@@ -368,7 +421,7 @@ const TabsTrigger = React.forwardRef(
           // The line indicator lives in src/styles/navigation-layout.css so it reads --tabs-indicator-*.
           // Selected and focused stay visually distinct (WCAG 2.4.7): selected is a 1px hairline in the
           // border, focused is the 2px ring plus its halo outside it.
-          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
           className
         ),
         render: (domProps, renderProps) => withDomProps("button", "tabs-trigger", { type: "button", ...props }, domProps, {
@@ -379,6 +432,18 @@ const TabsTrigger = React.forwardRef(
           "aria-selected": renderProps.isSelected && !selectionSuppressed,
           "data-orientation": orientation,
           disabled,
+          // CHAINED, not spread — the same reason `onKeyDown` below is. `withDomProps` lays the
+          // caller's raw props down FIRST and RAC's merged ones second, so any handler RAC owns
+          // for this event would silently swallow the caller's. Caller first, then RAC's, and
+          // only while the caller has not called `preventDefault()`.
+          onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented) {
+              domProps.onClick?.(
+                event
+              );
+            }
+          },
           onKeyDown: (event) => {
             onKeyDown?.(event);
             if (!event.defaultPrevented) {

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

@@ -15,7 +15,6 @@ export * from "./menubar.js";
 export * from "./navigation-menu.js";
 export * from "./resizable.js";
 export * from "./date-picker.js";
-export * from "./date-range-picker.js";
 export * from "./dialog.js";
 export { Separator } from "./separator.js";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../feedback/tooltip.js";

package/dist/components/ui/index.js

@@ -16,7 +16,6 @@ export * from "./menubar.js";
 export * from "./navigation-menu.js";
 export * from "./resizable.js";
 export * from "./date-picker.js";
-export * from "./date-range-picker.js";
 export * from "./dialog.js";
 import { Separator } from "./separator.js";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../feedback/tooltip.js";

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

@@ -40,7 +40,7 @@ export type SegmentedProp = {
 export type SegmentedProps = SegmentedProp;
 /**
  * Segmented — one-of-N from a small, closed, always-visible set. The established enterprise
- * `Segmented` control (docs/DESIGN-AUTHORITY.md) drawn on Radix's RadioGroup,
+ * `Segmented` control (docs/DESIGN-AUTHORITY.md) drawn on react-aria-components' RadioGroup,
  * which is this repo's authority for behaviour primitives.
  *
  * WHY NOT `ToggleGroup`. A ToggleGroup is a row of PRESSED buttons: `aria-pressed`, independently
@@ -53,5 +53,19 @@ export type SegmentedProps = SegmentedProp;
  * The primitive gives roving tabindex, arrow-key traversal (RTL-aware), the radiogroup/radio roles
  * and the hidden input a native form submit needs. This file adds that geometry and nothing
  * else — the focus mark comes from `ui-focus-ring`, the ONE source in styles/focus-ring.css.
+ *
+ * "RTL-aware" IS true now, and it used not to be. On Radix it was: Radix read `dir` from its own
+ * `DirectionProvider`, this repo rendered none, and it never looked at `<html dir>` — measured in
+ * jsdom, with `document.documentElement.dir = "rtl"` ArrowLeft on the first option went to the
+ * LAST one, i.e. straight LTR traversal under a reversed layout, so the key that moves your eye
+ * left moved the selection right. The repair then was to hand Radix the ambient React Aria
+ * direction explicitly.
+ *
+ * On `react-aria-components` that hand-off is gone, because the primitive reads the SAME
+ * `useLocale()` itself. One source of truth, fed by `AppProvider`, nothing threaded through the
+ * call site — and `src/__tests__/rtl-arrow-direction.test.tsx` holds it: under an `ar-AE` locale
+ * ArrowLeft advances and ArrowRight retreats, and `<html dir="rtl">` alone still does not.
+ * `orientation` decides WHICH pair of arrows moves the focus; the locale decides which END of the
+ * row each of them means.
  */
 export declare const Segmented: React.ForwardRefExoticComponent<SegmentedProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/segmented.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
 import { cn } from "../../lib/utils.js";
 const Segmented = React.forwardRef(function Segmented2({
   options,
@@ -18,7 +18,7 @@ const Segmented = React.forwardRef(function Segmented2({
   ...props
 }, ref) {
   return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Root,
+    AriaRadioGroup,
     {
       ref,
       id,
@@ -29,17 +29,24 @@ const Segmented = React.forwardRef(function Segmented2({
       orientation: vertical ? "vertical" : "horizontal",
       value,
       defaultValue,
-      onValueChange,
-      disabled,
+      onChange: onValueChange,
+      isDisabled: disabled,
       name,
       ...props,
       children: options.map((option) => /* @__PURE__ */ jsxs(
-        RadioGroupPrimitive.Item,
+        AriaRadio,
         {
           value: option.value,
-          disabled: option.disabled,
+          isDisabled: option.disabled,
           "data-slot": "segmented-item",
           className: "ui-segmented-item ui-focus-ring",
+          render: (domProps, state) => /* @__PURE__ */ jsx(
+            "label",
+            {
+              ...domProps,
+              "data-state": state.isSelected ? "checked" : "unchecked"
+            }
+          ),
           children: [
             option.icon == null ? null : /* @__PURE__ */ jsx(
               "span",