@godxjp/ui 21.0.0 → 22.0.0

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",

package/dist/i18n/messages/en.json

@@ -132,7 +132,7 @@
       "openGrid": "Open month grid",
       "previousYear": "Previous year",
       "nextYear": "Next year",
-      "placeholder": "yyyy/mm"
+      "placeholder": "Select month"
     },
     "branchScope": {
       "label": "Branch scope",
@@ -347,7 +347,8 @@
   "navigation": {
     "tabs": {
       "addTab": "Add tab",
-      "removeTab": "Close tab"
+      "removeTab": "Close tab",
+      "moreTabs": "More tabs"
     },
     "steps": {
       "ariaLabel": "Progress",

package/dist/i18n/messages/ja.json

@@ -132,7 +132,7 @@
       "openGrid": "月選択を開く",
       "previousYear": "前年へ",
       "nextYear": "翌年へ",
-      "placeholder": "yyyy/mm"
+      "placeholder": "年月を選択"
     },
     "branchScope": {
       "label": "ブランチ範囲",
@@ -340,7 +340,8 @@
   "navigation": {
     "tabs": {
       "addTab": "タブを追加",
-      "removeTab": "タブを閉じる"
+      "removeTab": "タブを閉じる",
+      "moreTabs": "他のタブ"
     },
     "steps": {
       "ariaLabel": "進行状況",

package/dist/i18n/messages/vi.json

@@ -132,7 +132,7 @@
       "openGrid": "Mở chọn tháng",
       "previousYear": "Năm trước",
       "nextYear": "Năm sau",
-      "placeholder": "yyyy/mm"
+      "placeholder": "Chọn tháng"
     },
     "branchScope": {
       "label": "Phạm vi chi nhánh",
@@ -341,7 +341,8 @@
   "navigation": {
     "tabs": {
       "addTab": "Thêm tab",
-      "removeTab": "Đóng tab"
+      "removeTab": "Đóng tab",
+      "moreTabs": "Tab khác"
     },
     "steps": {
       "ariaLabel": "Tiến trình",

package/dist/lib/datetime/picker-format.d.ts

@@ -1,8 +1,26 @@
 import { type Locale } from "date-fns";
 import type { DatePickerBaseProp, PickerDateFormatProp } from "../../props/components/data-entry.prop.js";
+/** The granularity axis a picker selects at — `DatePickerProp["picker"]`, resolved. */
+export type DatePickerPicker = NonNullable<DatePickerBaseProp["picker"]>;
 /** Display is independent from the canonical value submitted by the field. */
 export declare function formatPickerDate(date: Date | undefined, format: PickerDateFormatProp | undefined, locale: string, withTime?: boolean): string;
 export declare function parsePickerDate(text: string, format: PickerDateFormatProp | undefined, parser?: (text: string) => Date | undefined, withTime?: boolean): Date | undefined;
 export declare function pickerDateAllowed(date: Date, min: Date | undefined, max: Date | undefined, disabled?: (date: Date) => boolean): boolean;
 /** Normalize a reporting period with the active calendar's week convention. */
 export declare function pickerPeriodStart(date: Date, picker: DatePickerBaseProp["picker"], locale: Pick<Locale, "options">): Date;
+/**
+ * ISO-8601 at the precision the picker actually selects.
+ *
+ * The standard defines reduced forms, and a month picker that submits `2026/03` is simply using
+ * none of them: `/` is not an ISO separator and a server parsing an ISO date will reject it. Each
+ * granularity gets the shortest ISO form that loses nothing:
+ *   year → `2026` · month → `2026-03` · quarter → `2026-01` (the quarter's first month, which is
+ *   what the value IS) · week → `2026-W07` (ISO week-numbering year + week) · date → `2026-03-01`.
+ */
+export declare function toIsoPeriod(date: Date | undefined, picker: DatePickerPicker): string;
+/**
+ * The inverse of `toIsoPeriod`: read back the reduced ISO form the field displays for this
+ * granularity. `date` is left to `parsePickerDate`, which already owns the full `yyyy-MM-dd` path
+ * (custom parser, `format` pattern, era display).
+ */
+export declare function parseIsoPeriod(raw: string, picker: DatePickerPicker): Date | undefined;

package/dist/lib/datetime/picker-format.js

@@ -46,9 +46,43 @@ function pickerPeriodStart(date, picker, locale) {
       return date;
   }
 }
+function toIsoPeriod(date, picker) {
+  if (!date || Number.isNaN(date.getTime())) return "";
+  switch (picker) {
+    case "year":
+      return String(date.getFullYear()).padStart(4, "0");
+    case "quarter":
+    case "month":
+      return toIsoDate(date).slice(0, 7);
+    case "week":
+      return formatDate(date, "RRRR-'W'II");
+    default:
+      return toIsoDate(date);
+  }
+}
+function parseIsoPeriod(raw, picker) {
+  const text = raw.trim();
+  if (picker === "year") {
+    const m = /^(\d{4})$/.exec(text);
+    return m ? new Date(Number(m[1]), 0, 1) : void 0;
+  }
+  if (picker === "month" || picker === "quarter") {
+    const m = /^(\d{4})-(\d{1,2})$/.exec(text);
+    if (!m) return void 0;
+    const month = Number(m[2]);
+    return month >= 1 && month <= 12 ? new Date(Number(m[1]), month - 1, 1) : void 0;
+  }
+  if (picker === "week") {
+    const parsed = parse(text, "RRRR-'W'II", new Date(2e3, 0, 1));
+    return isValid(parsed) ? parsed : void 0;
+  }
+  return void 0;
+}
 export {
   formatPickerDate,
+  parseIsoPeriod,
   parsePickerDate,
   pickerDateAllowed,
-  pickerPeriodStart
+  pickerPeriodStart,
+  toIsoPeriod
 };

package/dist/lib/field-a11y.d.ts

@@ -51,6 +51,18 @@ export interface FieldNameContextValue {
     /** The label's plain-text content, when it is a string (belt-and-suspenders `aria-label`). */
     label?: string;
 }
+/**
+ * Write attributes onto the real `<input>` react-aria hides inside a Checkbox / Radio / Switch.
+ *
+ * react-aria renders the painted control as a `<label>` and the FOCUS TARGET as a visually hidden
+ * `<input>` inside it — then strips every `data-*` off that input (`removeDataAttributes`) and
+ * forwards only the aria attributes its own props model knows about. So the two contracts this
+ * library puts on the semantic focus target — `data-field` (gh#337, the machine key automation
+ * addresses) and the aria state a control has no react-aria prop for — have to be written by hand.
+ *
+ * Deliberately NOT left on the root as well: one field must resolve to exactly one node.
+ */
+export declare function useMirroredInputAttributes(inputRef: React.RefObject<HTMLInputElement | null>, attributes: Record<string, string | undefined>): void;
 export declare const FieldNameContext: React.Context<FieldNameContextValue | null>;
 /**
  * Resolve the last-resort accessible name for a control's semantic focus target (see

package/dist/lib/field-a11y.js

@@ -37,6 +37,18 @@ function resolveFieldA11y(props, intrinsicAriaLabel) {
   }
   return picked;
 }
+function useMirroredInputAttributes(inputRef, attributes) {
+  const key = JSON.stringify(attributes);
+  React.useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const entries = JSON.parse(key);
+    for (const [name, value] of Object.entries(entries)) {
+      if (value === void 0) input.removeAttribute(name);
+      else input.setAttribute(name, value);
+    }
+  }, [inputRef, key]);
+}
 const FieldNameContext = React.createContext(null);
 function useFieldNameFallback(name) {
   const field = React.useContext(FieldNameContext);
@@ -75,5 +87,6 @@ export {
   pickGroupFieldA11y,
   resolveFieldA11y,
   useFieldIdentity,
-  useFieldNameFallback
+  useFieldNameFallback,
+  useMirroredInputAttributes
 };

package/dist/props/components/data-display.prop.d.ts

@@ -187,6 +187,13 @@ export type BadgeProp = {
     icon?: React.ComponentType<{
         className?: string;
     }> | null;
+    /**
+     * Lining, fixed-width figures — for a chip whose content is a COUNT sitting in a column with
+     * other counts. The same axis `Text`, `TableCell` and `StatCard` already carry; its absence here
+     * was an asymmetry, not a decision. Off by default, because tabular figures are wider and a chip
+     * carrying words should not pay for them.
+     */
+    tabular?: boolean;
     className?: ClassNameProp;
     children?: ChildrenProp;
 };