@godxjp/ui 23.0.0 → 23.1.0

package/dist/app/date-format-labels.d.ts

@@ -1,8 +1,20 @@
 import type { AppLocale } from "./types.js";
 import type { AppDateFormat } from "./date-formats.js";
 export declare const APP_DATE_FORMAT_OPTIONS: {
-    value: "dmy" | "iso" | "mdy";
+    value: "dmy" | "iso" | "mdy" | "ymd";
 }[];
 export declare function getDateFormatLabel(dateFormat: AppDateFormat, locale: AppLocale, fallbackLocale?: AppLocale): string;
-/** Suggested default per locale — vi → dmy, ja → iso, en → mdy. */
+/**
+ * Suggested default per locale — vi → dmy, ja → ymd, en → mdy.
+ *
+ * `ja` used to be `iso` (`yyyy-MM-dd`). Nothing recorded a reason for it, and it is not the form a
+ * Japanese business document is written in: those use `YYYY/MM/DD` (or `YYYY年MM月DD日`). The cost
+ * of the old default was measured in a consumer — gino-cloud shipped its own date formatter as an
+ * explicit stopgap purely to get the slashes, which is the package's own rule 1 broken by the
+ * package's own default.
+ *
+ * ONLY THE DEFAULT MOVES. A stored preference still wins (see `resolveDateFormat` in
+ * app-provider.tsx), a service can pin any value through `defaultDateFormat`, and `iso` is still
+ * one keystroke away in `DateFormatPicker`.
+ */
 export declare function resolveDefaultDateFormat(locale: AppLocale): AppDateFormat;

package/dist/app/date-format-labels.js

@@ -6,7 +6,7 @@ function getDateFormatLabel(dateFormat, locale, fallbackLocale = "en") {
 }
 function resolveDefaultDateFormat(locale) {
   if (locale === "en") return "mdy";
-  if (locale === "ja") return "iso";
+  if (locale === "ja") return "ymd";
   return "dmy";
 }
 export {

package/dist/app/date-formats.d.ts

@@ -1,7 +1,19 @@
 /** Date-only display preset — sent as `x-date-format` to backend. */
 import { type AppTimeFormat } from "./time-formats.js";
-export type AppDateFormat = "iso" | "dmy" | "mdy";
-export declare const APP_DATE_FORMATS: readonly ["iso", "dmy", "mdy"];
+export type AppDateFormat = "iso" | "ymd" | "dmy" | "mdy";
+/**
+ * `ymd` (`yyyy/MM/dd`) IS THE JAPANESE BUSINESS FORM, AND ITS ABSENCE WAS A HOLE WITH NO WAY OUT.
+ *
+ * The axis shipped three values and none of them said `2026/05/01`: `iso` writes hyphens, and the
+ * two slash forms put the day or the month first. A Japanese-first consumer (gino-cloud) therefore
+ * wrote its own formatter and marked it an explicit stopgap — the tell that a named axis was
+ * missing a value rather than the consumer wanting something exotic, since the only alternative
+ * the package left was the thing docs/DATETIME.md rule 1 forbids ("never use date-fns/format,
+ * toLocaleString, or raw ISO slices for UI").
+ *
+ * It sits BEFORE the day/month-first pair because it is the other year-first form, next to `iso`.
+ */
+export declare const APP_DATE_FORMATS: readonly ["iso", "ymd", "dmy", "mdy"];
 export declare const APP_REQUEST_HEADER_DATE_FORMAT: "x-date-format";
 /** date-fns pattern for date-only display. */
 export declare function getDatePattern(dateFormat: AppDateFormat): string;

package/dist/app/date-formats.js

@@ -1,8 +1,15 @@
 import { getTimePattern } from "./time-formats.js";
-const APP_DATE_FORMATS = ["iso", "dmy", "mdy"];
+const APP_DATE_FORMATS = [
+  "iso",
+  "ymd",
+  "dmy",
+  "mdy"
+];
 const APP_REQUEST_HEADER_DATE_FORMAT = "x-date-format";
 function getDatePattern(dateFormat) {
   switch (dateFormat) {
+    case "ymd":
+      return "yyyy/MM/dd";
     case "dmy":
       return "dd/MM/yyyy";
     case "mdy":
@@ -16,7 +23,7 @@ function getDateTimePattern(timeFormat, dateFormat) {
   return `${getDatePattern(dateFormat)} ${getTimePattern(timeFormat)}`;
 }
 function isAppDateFormat(value) {
-  return value === "iso" || value === "dmy" || value === "mdy";
+  return APP_DATE_FORMATS.includes(value);
 }
 export {
   APP_DATE_FORMATS,

package/dist/components/data-display/data-table.d.ts

@@ -13,6 +13,13 @@ interface DataTableProps<T> {
     columns: ColumnDef<T>[];
     /** Required when `selectable` is true. Default: assume row.id (typed as any). */
     getRowId?: (row: T) => string;
+    /**
+     * Human name of a row, announced by its selection checkbox or radio as "Select row {label}".
+     * Default: the text of the `priority: "primary"` column, else of the first column, when that
+     * value is a string or number; the row id only as a last resort — an id is a KEY, and announced
+     * it reads a UUID aloud. `rowSelection.getCheckboxProps` `aria-label` still overrides a row.
+     */
+    getRowLabel?: (row: T) => string;
     selectable?: boolean;
     selected?: Set<string>;
     onSelectChange?: (next: Set<string>) => void;
@@ -130,7 +137,7 @@ interface DataTableProps<T> {
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowTone, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, getRowLabel, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowTone, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;

package/dist/components/data-display/data-table.js

@@ -190,6 +190,7 @@ function DataTable({
   data,
   columns,
   getRowId = noopGetRowId,
+  getRowLabel,
   selectable = false,
   selected: controlledSelected,
   onSelectChange,
@@ -443,6 +444,7 @@ function DataTable({
     toggleExpanded,
     rowSelection,
     getRowId,
+    getRowLabel,
     showSorterTooltip,
     sortDirections,
     sortPriorities,
@@ -764,6 +766,7 @@ DataTable.Content = function DataTableContent() {
     toggleExpanded,
     rowSelection,
     getRowId,
+    getRowLabel,
     showSorterTooltip,
     sortDirections,
     sortPriorities
@@ -791,6 +794,7 @@ DataTable.Content = function DataTableContent() {
       );
     }
   }, [missingHeaderNames]);
+  const selectLabelColumn = visibleColumns.find((col) => col.priority === "primary") ?? visibleColumns[0];
   const scrollRef = React.useRef(null);
   const [hasOverflowEnd, setHasOverflowEnd] = React.useState(false);
   React.useEffect(() => {
@@ -1096,6 +1100,9 @@ DataTable.Content = function DataTableContent() {
                   const rowKey = getRowId(original);
                   const isSelected = row.getIsSelected();
                   const checkboxProps = rowSelection?.getCheckboxProps?.(original) ?? {};
+                  const labelValue = selectLabelColumn ? original[selectLabelColumn.key] : void 0;
+                  const rowLabel = getRowLabel?.(original) ?? (typeof labelValue === "string" && labelValue.trim() !== "" || typeof labelValue === "number" ? String(labelValue) : row.id);
+                  const selectRowLabel = checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: rowLabel });
                   const canExpand = expandColumnShown && (expandable?.rowExpandable?.(original) ?? true);
                   const isExpanded = canExpand && expandedKeys.includes(rowKey);
                   const rowProps = onRow?.(original, rowIndex) ?? {};
@@ -1206,7 +1213,7 @@ DataTable.Content = function DataTableContent() {
                                       RadioItem,
                                       {
                                         value: rowKey,
-                                        "aria-label": checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: row.id }),
+                                        "aria-label": selectRowLabel,
                                         onClick: (e) => {
                                           e.stopPropagation();
                                         }
@@ -1222,7 +1229,7 @@ DataTable.Content = function DataTableContent() {
                                   onCheckedChange: (v) => {
                                     row.toggleSelected(!!v);
                                   },
-                                  "aria-label": checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: row.id }),
+                                  "aria-label": selectRowLabel,
                                   onClick: (e) => {
                                     e.stopPropagation();
                                   }

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

@@ -94,7 +94,7 @@ const CheckboxRoot = React.forwardRef((props, ref) => {
         // itself). react-aria's root is a `<label>`, which is `display:inline` — without this the
         // 16px box collapses to nothing. CheckboxVisual already carries the same three for the
         // same reason.
-        "peer ui-checkbox data-[invalid]:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow outline-none",
+        "peer ui-checkbox data-[invalid]:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow",
         className
       ),
       render: (domProps) => /* @__PURE__ */ jsx("label", { ...domProps, children: withOwnHitTarget(domProps.children) }),

package/dist/components/data-entry/form-field.js

@@ -47,7 +47,7 @@ function FormField({
   const resolvedId = id ?? autoId;
   const labelId = `${resolvedId}-label`;
   const helperId = helper ? `${resolvedId}-helper` : void 0;
-  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null;
+  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "ui-form-field-note text-muted-foreground text-xs", children: helper }) : null;
   const validationStatus = error ? "error" : validateStatus;
   const feedbackId = hasFeedback && validationStatus ? `${resolvedId}-feedback` : void 0;
   const FeedbackIcon = validationStatus === "validating" ? LoaderCircle : validationStatus === "error" ? CircleAlert : validationStatus === "warning" ? TriangleAlert : CheckCircle;
@@ -175,7 +175,7 @@ function FormField({
             t(`dataEntry.form.${validationStatus}`)
           ] }) : null,
           helperPlacement === "after" ? helperNode : null,
-          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : null
+          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-destructive text-xs", children: error }) : null
         ] })
       ]
     }

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

@@ -13,7 +13,7 @@ import {
 } from "./control-appearance.js";
 import { resolveAllowClear } from "./control-surface.js";
 const inputBaseClass = [
-  "ui-control ui-input w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
+  "ui-control ui-input w-full rounded-[var(--control-radius)] transition-[color,box-shadow]",
   "selection:bg-primary selection:text-primary-foreground",
   "placeholder:text-muted-foreground",
   "aria-invalid:border-destructive",

package/dist/components/data-entry/number-input.js

@@ -57,6 +57,21 @@ const NumberInput = React.forwardRef(
   }, ref) => {
     const { t, locale } = useTranslation();
     const fieldA11y = pickFieldA11y(ariaProps);
+    const stepperVerbId = React.useId();
+    const fieldLabel = typeof fieldA11y["aria-label"] === "string" ? fieldA11y["aria-label"] : void 0;
+    const fieldLabelledBy = typeof fieldA11y["aria-labelledby"] === "string" ? fieldA11y["aria-labelledby"] : void 0;
+    const stepperName = (direction) => {
+      const verb = t(`ui.numberInput.${direction}`);
+      if (fieldLabelledBy) {
+        return { "aria-labelledby": `${fieldLabelledBy} ${stepperVerbId}-${direction}` };
+      }
+      if (fieldLabel) {
+        return {
+          "aria-label": t(`ui.numberInput.${direction}Field`, { label: fieldLabel }) || verb
+        };
+      }
+      return { "aria-label": verb };
+    };
     const isControlled = controlledValue !== void 0;
     const [internal, setInternal] = React.useState(defaultValue);
     const numericValue = isControlled ? controlledValue ?? null : internal;
@@ -228,7 +243,7 @@ const NumberInput = React.forwardRef(
             }
           ) : null,
           controls ? /* @__PURE__ */ jsxs("span", { "data-slot": "number-input-steppers", className: "ui-number-input-steppers", children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
@@ -237,12 +252,15 @@ const NumberInput = React.forwardRef(
                 className: "ui-number-input-step ui-number-input-step-up",
                 tabIndex: -1,
                 disabled: !interactive || atMax,
-                "aria-label": t("ui.numberInput.increment"),
+                ...stepperName("increment"),
                 onClick: () => stepBy(1),
-                children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
+                children: [
+                  /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { id: `${stepperVerbId}-increment`, className: "sr-only", children: t("ui.numberInput.increment") })
+                ]
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
@@ -251,9 +269,12 @@ const NumberInput = React.forwardRef(
                 className: "ui-number-input-step ui-number-input-step-down",
                 tabIndex: -1,
                 disabled: !interactive || atMin,
-                "aria-label": t("ui.numberInput.decrement"),
+                ...stepperName("decrement"),
                 onClick: () => stepBy(-1),
-                children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+                children: [
+                  /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { id: `${stepperVerbId}-decrement`, className: "sr-only", children: t("ui.numberInput.decrement") })
+                ]
               }
             )
           ] }) : null

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

@@ -62,7 +62,7 @@ const RadioItem = React.forwardRef(
           // records: react-aria's root is a `<label>`, which is `display:inline`, so without it the
           // 16px dot collapses to nothing. `data-[invalid]` replaces `aria-invalid:` because
           // react-aria puts `aria-invalid` on the `<input>` and `data-invalid` on this box.
-          "ui-radio data-[invalid]:border-destructive inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow outline-none",
+          "ui-radio data-[invalid]:border-destructive inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow",
           className
         ),
         ...props,

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

@@ -80,7 +80,7 @@ const Switch = React.forwardRef(
             // 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/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/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/i18n/messages/en.json

@@ -341,7 +341,9 @@
     },
     "numberInput": {
       "increment": "Increase",
-      "decrement": "Decrease"
+      "decrement": "Decrease",
+      "incrementField": "Increase {label}",
+      "decrementField": "Decrease {label}"
     }
   },
   "navigation": {
@@ -368,6 +370,7 @@
     },
     "filterBar": {
       "appliedFilters": "Applied filters",
+      "clearFilter": "Clear {label} selection",
       "removeFilter": "Remove filter: {label}",
       "resultCount": {
         "one": "{count} result",
@@ -442,6 +445,7 @@
   },
   "dateFormat": {
     "iso": "ISO (yyyy-MM-dd)",
+    "ymd": "Year / Month / Day (yyyy/MM/dd)",
     "dmy": "Day / Month / Year",
     "mdy": "Month / Day / Year"
   },

package/dist/i18n/messages/ja.json

@@ -334,7 +334,9 @@
     },
     "numberInput": {
       "increment": "増やす",
-      "decrement": "減らす"
+      "decrement": "減らす",
+      "incrementField": "{label}を増やす",
+      "decrementField": "{label}を減らす"
     }
   },
   "navigation": {
@@ -361,6 +363,7 @@
     },
     "filterBar": {
       "appliedFilters": "適用中のフィルター",
+      "clearFilter": "{label}の選択をクリア",
       "removeFilter": "フィルターを解除: {label}",
       "resultCount": "{count} 件の結果"
     },
@@ -429,6 +432,7 @@
   },
   "dateFormat": {
     "iso": "YYYY-MM-DD（年-月-日）",
+    "ymd": "YYYY/MM/DD（年/月/日）",
     "dmy": "日/月/年",
     "mdy": "月/日/年"
   },

package/dist/i18n/messages/vi.json

@@ -335,7 +335,9 @@
     },
     "numberInput": {
       "increment": "Tăng",
-      "decrement": "Giảm"
+      "decrement": "Giảm",
+      "incrementField": "Tăng {label}",
+      "decrementField": "Giảm {label}"
     }
   },
   "navigation": {
@@ -362,6 +364,7 @@
     },
     "filterBar": {
       "appliedFilters": "Bộ lọc đang áp dụng",
+      "clearFilter": "Xóa lựa chọn {label}",
       "removeFilter": "Bỏ bộ lọc: {label}",
       "resultCount": "{count} kết quả"
     },
@@ -430,6 +433,7 @@
   },
   "dateFormat": {
     "iso": "ISO (yyyy-MM-dd)",
+    "ymd": "Năm / Tháng / Ngày (yyyy/MM/dd)",
     "dmy": "Ngày / Tháng / Năm",
     "mdy": "Tháng / Ngày / Năm"
   },

package/dist/lib/breakpoint-token.d.ts

@@ -0,0 +1,8 @@
+/**
+ * True while the viewport is at or below the width the theme token `token` names.
+ *
+ * The token is read once per mount rather than at module scope: the fallback is what SSR and the
+ * first client render agree on, and the themed value arrives in the effect. Same-value updates
+ * bail out inside React, so a theme that left the default alone re-renders nothing.
+ */
+export declare function useMaxWidthBreakpoint(token: string, fallbackQuery: string): boolean;

package/dist/lib/breakpoint-token.js

@@ -0,0 +1,29 @@
+"use client";
+import * as React from "react";
+import { useMediaQuery } from "./hooks.js";
+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 readMaxWidthQuery(token, fallbackQuery) {
+  if (typeof document === "undefined" || typeof window.getComputedStyle !== "function") {
+    return fallbackQuery;
+  }
+  const rootStyle = window.getComputedStyle(document.documentElement);
+  const rootFontSize = cssLengthToPx(rootStyle.fontSize || "16px", 16) ?? 16;
+  const px = cssLengthToPx(rootStyle.getPropertyValue(token), rootFontSize);
+  return px == null ? fallbackQuery : `(max-width: ${String(px)}px)`;
+}
+function useMaxWidthBreakpoint(token, fallbackQuery) {
+  const [query, setQuery] = React.useState(fallbackQuery);
+  React.useEffect(() => {
+    setQuery(readMaxWidthQuery(token, fallbackQuery));
+  }, [token, fallbackQuery]);
+  return useMediaQuery(query);
+}
+export {
+  useMaxWidthBreakpoint
+};

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

@@ -28,7 +28,7 @@ export type ProseProp = {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, ValueProp, DefaultValueProp, OnValueChangeProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, GetRowLabelProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, ValueProp, DefaultValueProp, OnValueChangeProp } from "../vocabulary/index.js";
 import type { TreeFieldNamesProp, TreeOptionProp } from "./data-entry.prop.js";
 /**
  * One key in a `Legend`: a tone, and the words that tone stands for.
@@ -255,6 +255,13 @@ export type DataTableProp<T> = {
     data: T[];
     columns: ColumnDefProp<T>[];
     getRowId?: GetRowIdProp<T>;
+    /**
+     * Human name of a row, announced by its selection checkbox or radio as "Select row {label}".
+     * Default: the text of the `priority: "primary"` column, else of the first column, when that
+     * value is a string or number; the row id only as a last resort. `rowSelection.getCheckboxProps`
+     * `aria-label` still overrides a single row.
+     */
+    getRowLabel?: GetRowLabelProp<T>;
     selectable?: boolean;
     selected?: SelectedIdsProp;
     onSelectChange?: OnSelectChangeProp;

package/dist/props/components/navigation.prop.d.ts

@@ -337,7 +337,14 @@ export type TabsProp = {
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     variant?: TabsVariantProp;
-    /** Ant Design `tabPlacement`. Default `top`. */
+    /**
+     * Ant Design `tabPlacement`. Default `top`.
+     *
+     * `start`/`end` FOLD to `top`/`bottom` at or below
+     * `--tabs-placement-responsive-breakpoint-width` (48rem), arrow keys included — a vertical strip
+     * shares one inline axis with its panel and a phone has no room for both. Ant Design folds the
+     * same pair the same way. Set the token to `0px` to keep the strip vertical at every width.
+     */
     tabPlacement?: TabsPlacementProp;
     /** Control tier of the triggers. Default `md`. Ant Design `size` (`small`/`middle`/`large`). */
     size?: "sm" | "md" | "lg";

package/dist/props/registry.d.ts

@@ -584,6 +584,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "data";
         readonly description: "Row ID extractor generic";
     };
+    readonly GetRowLabelProp: {
+        readonly file: "vocabulary/data.prop.ts";
+        readonly category: "data";
+        readonly description: "Row label extractor generic — the accessible name of a row's selection control";
+    };
     readonly OnRowClickProp: {
         readonly file: "vocabulary/data.prop.ts";
         readonly category: "data";
@@ -1533,7 +1538,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly DataTableProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp", "HandlerProp", "TablePresetProp", "TableColumnPriorityProp", "BreakpointProp", "ColumnFixedProp", "ColumnFilterItemProp", "ColumnFilterStateProp", "ColumnSorterProp", "TableRowSelectionProp", "TableExpandableProp", "TableSummaryProp", "TableScrollProp", "TableStickyProp", "OnRowProp", "TablePaginationProp", "SortDirectionProp", "OnColumnFilterChangeProp"];
+        readonly vocabulary: readonly ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp", "GetRowLabelProp", "HandlerProp", "TablePresetProp", "TableColumnPriorityProp", "BreakpointProp", "ColumnFixedProp", "ColumnFilterItemProp", "ColumnFilterStateProp", "ColumnSorterProp", "TableRowSelectionProp", "TableExpandableProp", "TableSummaryProp", "TableScrollProp", "TableStickyProp", "OnRowProp", "TablePaginationProp", "SortDirectionProp", "OnColumnFilterChangeProp"];
     };
     readonly ListRowDensityProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -585,6 +585,11 @@ const VOCABULARY_REGISTRY = {
     category: "data",
     description: "Row ID extractor generic"
   },
+  GetRowLabelProp: {
+    file: "vocabulary/data.prop.ts",
+    category: "data",
+    description: "Row label extractor generic \u2014 the accessible name of a row's selection control"
+  },
   OnRowClickProp: {
     file: "vocabulary/data.prop.ts",
     category: "data",
@@ -1833,6 +1838,7 @@ const COMPONENT_PROP_REGISTRY = {
       "DensityProp",
       "SortStateProp",
       "SelectedIdsProp",
+      "GetRowLabelProp",
       "HandlerProp",
       "TablePresetProp",
       "TableColumnPriorityProp",

package/dist/props/vocabulary/data.prop.d.ts

@@ -7,6 +7,11 @@ import type { BreakpointProp, ColumnAlignProp, SortDirectionProp } from "./inter
 import type { TableDensityProp } from "./layout.prop.js";
 /** Generic row identifier extractor for tables with selection. */
 export type GetRowIdProp<T> = (row: T) => string;
+/**
+ * Human-readable row name — what a row's selection control is announced as. The row id is a KEY,
+ * not a name: announced, it reads a UUID aloud.
+ */
+export type GetRowLabelProp<T> = (row: T) => string;
 /** Row click navigation handler. */
 export type OnRowClickProp<T> = (row: T) => void;
 /** Column definition for DataTable. */