@godxjp/ui 21.0.0 → 22.0.0

package/dist/app/app-provider.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { I18nProvider } from "react-aria-components";
 import { resolveDefaultDateFormat } from "./date-format-labels.js";
 import { getDateFnsLocale, getDayPickerLocale } from "./locales.js";
 import { syncAppRequestHeaders } from "./request-headers.js";
@@ -362,7 +363,7 @@ function AppProvider({
       setScaling
     ]
   );
-  return /* @__PURE__ */ jsx(AppContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(AppContext.Provider, { value, children }) });
 }
 function useAppContext() {
   const ctx = React.useContext(AppContext);

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

@@ -45,9 +45,36 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
         className?: string;
     }> | null;
     status?: string;
+    /**
+     * Lining, fixed-width figures — for a chip whose content is a COUNT that sits in a column with
+     * other counts (a queue length per row, an unread tally per tab, a defect count per site). With
+     * proportional figures a `1` is narrower than a `0`, so the chips jitter and the numbers do not
+     * line up down the column; it is the same axis `Text`, `TableCell` and `StatCard` already carry,
+     * and its absence here was the asymmetry rather than a decision.
+     *
+     * MEASURE IT BEFORE YOU EXPECT PIXELS TO MOVE. With the stack this library ships,
+     * `font-variant-numeric` changes nothing: measured in Chromium at the chip's own 12.47px,
+     * `"1111"` and `"0000"` both advance **31.094px** with and without `tabular-nums`, because the
+     * resolved face already gives its figures one advance. What this prop buys is the DECLARATION —
+     * it survives a service retuning `--font-family-sans` to a face whose figures are proportional,
+     * which is the same reason `Text`, `TableCell` and `StatCard` carry the axis.
+     *
+     * It is also NOT the fix for chips of DIFFERENT WIDTHS down a column: `11` and `100` are two
+     * and three figures, so they are two widths whatever the face does. That is a minimum measure on
+     * the chip, and it belongs to the screen.
+     *
+     * There WAS a legal move — `<Badge><Text size="xs" tabular>12</Text></Badge>` measures the same
+     * 12.47px as the chip's own label. It just requires the call site to know that a Badge's type
+     * step is `xs`, which is the chip's own `--badge-font-size` token and not a fact a consumer
+     * should have to carry: retune that token in a theme and every such call site silently desyncs.
+     *
+     * Off by default. Tabular figures are wider than proportional ones in a face that has both, so a
+     * chip carrying WORDS should not pay for them.
+     */
+    tabular?: boolean;
     children?: React.ReactNode;
 }
-export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, style, children, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, tabular, style, children, ...props }: BadgeProps): React.JSX.Element;
 /**
  * Status-aware badge with the shared domain-status-to-tone mapping. `Badge` remains the
  * general-purpose primitive.

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

@@ -97,6 +97,7 @@ function Badge({
   color,
   icon,
   status,
+  tabular,
   style,
   children,
   ...props
@@ -114,6 +115,7 @@ function Badge({
       "data-tone": tinted ? void 0 : resolvedTone,
       "data-tinted": tinted ? "" : void 0,
       "data-shape": shape ?? "default",
+      "data-tabular": tabular ? "" : void 0,
       className: cn(
         badgeVariants({
           variant: tinted ? "tinted" : variant ?? "default",

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { flexRender, type ColumnVisibilityState, type OnChangeFn, type PaginationState } from "@tanstack/react-table";
-import type { BreakpointProp, ColumnDefProp, DensityProp, OnColumnFilterChangeProp, OnRowProp, SortDirectionProp, SortStateProp, TableExpandableProp, TablePaginationProp, TablePresetProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, ColumnDefProp, DensityProp, OnColumnFilterChangeProp, OnRowProp, RowToneProp, SortDirectionProp, SortStateProp, TableExpandableProp, TablePaginationProp, TablePresetProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp } from "../../props/vocabulary/index.js";
 export type Density = DensityProp;
 /**
  * Lean column definition — the simple, common-case column API. `render` shapes a cell; `sortable`
@@ -82,6 +82,22 @@ interface DataTableProps<T> {
      * classes are appended last, so they win over the built-in hover/selected fills.
      */
     rowClassName?: (row: T) => string | undefined;
+    /**
+     * Per-row STATE, drawn as a leading-edge rail plus a wash — the same six tone names `Card accent`
+     * carries, so a row that needs attention and a card that needs attention read as one vocabulary.
+     * Return `undefined` for an ordinary row.
+     *
+     * This is the token-driven answer to what `rowClassName` could only do with utilities, and
+     * `ui-audit` blocks those in a consumer: `rowClassName` matches the gate's `class`-name suffix
+     * rule, so every colour and spacing rule scans the arrow body — a leading-edge border utility
+     * plus a raw palette fill in there is two errors, not zero. Consumers fell back to a badge in a
+     * cell instead.
+     *
+     * It is never the ONLY signal: colour alone cannot carry meaning (WCAG 1.4.1), so keep the
+     * reason in a cell — a Badge, a status column — and let the rail make that cell findable in a
+     * long table.
+     */
+    rowTone?: RowToneProp<T>;
     /**
      * Full row-selection configuration (antd `rowSelection`). Supersedes — and can be mixed with —
      * `selectable` / `selected` / `onSelectChange`, which drive the same state.
@@ -114,7 +130,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, 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, 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

@@ -219,6 +219,7 @@ function DataTable({
   preset = "default",
   collapseBelow = "sm",
   rowClassName,
+  rowTone,
   rowSelection,
   expandable,
   summary,
@@ -431,6 +432,7 @@ function DataTable({
     preset,
     collapseBelow,
     rowClassName,
+    rowTone,
     bordered,
     scroll,
     sticky,
@@ -751,6 +753,7 @@ DataTable.Content = function DataTableContent() {
     preset,
     collapseBelow,
     rowClassName,
+    rowTone,
     bordered,
     scroll,
     sticky,
@@ -1106,6 +1109,7 @@ DataTable.Content = function DataTableContent() {
                       {
                         ...rowProps,
                         "data-state": isSelected ? "selected" : void 0,
+                        "data-tone": rowTone?.(original),
                         tabIndex: onRowClick ? 0 : rowProps.tabIndex,
                         onClick: (e) => {
                           rowProps.onClick?.(e);

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

@@ -1,5 +1,5 @@
 export { Badge, StatusBadge } from "./badge.js";
-export type { BadgeProps } from "./badge.js";
+export type { BadgeProps, BadgeTone } from "./badge.js";
 export { Legend } from "./legend.js";
 export type { LegendItemProp, LegendProp, LegendProps } from "./legend.js";
 export { ListRow } from "./list-row.js";

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

@@ -33,7 +33,25 @@ export declare function PopoverAnchor({ asChild, ref, ...props }: PopoverAnchorP
 type PopoverContentFlush = {
     flush?: FlushProp;
 };
+/**
+ * How the panel is MEASURED across the inline axis.
+ *
+ * `"panel"` (default) is the popover's own measure, `--popover-width` (18rem) — right for prose and
+ * for a list the panel itself sizes. `"auto"` lets the CONTENT decide, which is the only correct
+ * answer for something that already has a width of its own: a two-month `Calendar` is far wider
+ * than 18rem and was being clipped by it. `"trigger"` matches the anchor, the shape every
+ * select-like control in this library wants.
+ *
+ * The axis exists because `flush` had no counterpart. The catalog's own rule says a panel must
+ * never zero its padding with a `p-0` utility, "that is a per-call-site constant no service theme
+ * can retune" — and until now the only way to get a content-width panel was exactly such a
+ * constant, `className="w-auto"`. The library's internal `.ui-control-panel-flush` has always set
+ * both knobs; this is the public half of it.
+ */
+type PopoverContentWidth = "panel" | "auto" | "trigger";
 interface PopoverContentProps extends React.ComponentPropsWithRef<"div">, PopoverContentFlush {
+    /** Inline measure of the panel — `panel` (default) · `auto` (content decides) · `trigger`. */
+    width?: PopoverContentWidth;
     /**
      * Render THIS panel somewhere other than the default. Almost always unnecessary: mounting the
      * whole tree in a shadow root is what `OverlayPortalProvider` is for, and it moves every overlay
@@ -73,7 +91,7 @@ interface PopoverContentProps extends React.ComponentPropsWithRef<"div">, Popove
      */
     onCloseAutoFocus?: (event: Event) => void;
 }
-export declare function PopoverContent({ className, style, children, ref, flush, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onOpenAutoFocus, onCloseAutoFocus, portalContainer, ...props }: PopoverContentProps): React.JSX.Element;
+export declare function PopoverContent({ className, style, children, ref, flush, width, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onOpenAutoFocus, onCloseAutoFocus, portalContainer, ...props }: PopoverContentProps): React.JSX.Element;
 export declare const PopoverHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverTitle: ({ className, id, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverDescription: ({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;

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

@@ -126,12 +126,18 @@ function PopoverAnchor({ asChild, ref, ...props }) {
   }, [setAnchored]);
   return /* @__PURE__ */ jsx(Comp, { "data-slot": "popover-anchor", ...props, ref: mergeRefs(ref, root.anchorRef) });
 }
+const POPOVER_SURFACE_INLINE_SIZE = {
+  panel: null,
+  auto: "auto",
+  trigger: "var(--trigger-width)"
+};
 function PopoverContent({
   className,
   style,
   children,
   ref,
   flush,
+  width,
   side = "bottom",
   align = "center",
   sideOffset = 4,
@@ -214,6 +220,7 @@ function PopoverContent({
             "data-align": align,
             "data-state": isExiting ? "closed" : "open",
             "data-flush": flush ? "" : void 0,
+            "data-width": width && width !== "panel" ? width : void 0,
             ...props,
             "aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : root.hasTitle ? root.titleId : root.triggerId),
             "aria-describedby": props["aria-describedby"] ?? (root.hasDescription ? root.descriptionId : void 0),
@@ -234,7 +241,8 @@ function PopoverContent({
                 "--radix-popover-content-available-height": typeof availableHeight === "number" ? `${availableHeight}px` : availableHeight
               },
               ...style,
-              ...flush ? { "--popover-space-inset": "0" } : null
+              ...flush ? { "--popover-space-inset": "0" } : null,
+              ...width && POPOVER_SURFACE_INLINE_SIZE[width] ? { "--popover-surface-inline-size": POPOVER_SURFACE_INLINE_SIZE[width] } : null
             },
             children
           }

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

@@ -14,6 +14,20 @@ export type ProgressSegment = {
     label: string;
 };
 type ProgressBase = Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "children" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext"> & {
+    /**
+     * Bar thickness — `md` (default) or `sm`.
+     *
+     * `md` is the size each form was designed at, and it stays the default for the reason spelled
+     * out on the breakdown below: three abutting fills need height before their ratios are
+     * comparable. `sm` is for a bar that is not the subject of the screen but a column of one — an
+     * in-table capacity bar next to a row of numbers, where a 22px partition outweighs the row it
+     * annotates and sets the row height for the whole table.
+     *
+     * Both steps come from the same token pair (`--progress-*-block-size`,
+     * `--progress-*-block-size-sm`), so a theme retunes the scale rather than one call site. Nothing
+     * about the ARIA changes: `sm` is thickness, not meaning.
+     */
+    size?: "sm" | "md";
     /**
      * Visible caption under the bar; it also becomes the bar's accessible name. Omit it and the bar
      * falls back to the catalogue name — or to whatever `aria-label`/`aria-labelledby` the caller
@@ -21,10 +35,31 @@ type ProgressBase = Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "childre
      */
     label?: string;
 };
+/**
+ * Geometry of the METER — the same measurement, drawn two ways.
+ *
+ * `bar` is the default and what every existing call site gets. `ring` draws the identical ratio as
+ * an arc, for a header with no room for a full-width bar: a phone app bar that has to show
+ * "18 of 42 done" beside a title has one square of space, and a bar plus its caption needs two
+ * stacked rows. Reach for it when the SPACE is square, not when the number is important — the two
+ * shapes say exactly the same thing and carry the same ARIA.
+ *
+ * It is a meter shape only. A ring around a `segments` breakdown is a pie chart, which is
+ * `PieChart donut` and belongs to the charts entry point; that one is a part-to-whole across
+ * CATEGORIES with a legend and tooltips, and a screen reader should hear it as an image, not as a
+ * progressbar.
+ */
+export type ProgressShape = "bar" | "ring";
 /** A METER: one ratio of one whole. */
 type ProgressMeterProps = ProgressBase & {
     value: number;
     tone?: ProgressTone;
+    /**
+     * `bar` (default) or `ring` — the same measurement drawn as a full-width bar or as an arc.
+     * `label` moves INSIDE the ring, which is the point of it: the readout and its proportion take
+     * one square instead of two stacked rows.
+     */
+    shape?: ProgressShape;
     /**
      * Allow `value` to exceed 100 and render an OVER-CAPACITY fill: the bar caps at 100% width but
      * gets a diagonal striped overlay + destructive tone, so an over-limit meter (e.g. 252% of a
@@ -57,6 +92,8 @@ type ProgressBreakdownProps = ProgressBase & {
     value?: never;
     tone?: never;
     over?: never;
+    /** A ring around a partition is a pie chart — that is `PieChart donut`, not this. */
+    shape?: never;
 };
 export type ProgressProps = ProgressMeterProps | ProgressBreakdownProps;
 export declare function Progress(props: ProgressProps): React.JSX.Element;

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

@@ -1,8 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+const RING_BOX = 40;
+const RING_CENTRE = RING_BOX / 2;
+const RING_RADIUS = 16;
+const RING_ROTATION = `rotate(-90 ${RING_CENTRE} ${RING_CENTRE})`;
 function Progress(props) {
   const { t } = useTranslation();
   const labelId = React.useId();
@@ -12,6 +16,8 @@ function Progress(props) {
     segments,
     value,
     tone,
+    size,
+    shape,
     over = false,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -30,6 +36,7 @@ function Progress(props) {
       {
         className: cn("ui-progress", className),
         "data-breakdown": "",
+        "data-size": size === "sm" ? "sm" : void 0,
         role: "img",
         "aria-labelledby": ariaLabelledBy,
         "aria-label": ariaLabelledBy !== void 0 ? void 0 : ariaLabel !== void 0 ? `${ariaLabel}${separator}${spoken}` : label !== void 0 ? `${label}${separator}${spoken}` : spoken,
@@ -53,12 +60,14 @@ function Progress(props) {
   const isOver = over && meterValue > 100;
   const boundedValue = Math.max(0, Math.min(100, meterValue));
   const effectiveTone = tone ?? (isOver ? "destructive" : "success");
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn("ui-progress", className),
       "data-tone": effectiveTone,
-      "data-over": isOver ? "" : void 0,
+      "data-size": size === "sm" ? "sm" : void 0,
+      "data-shape": shape === "ring" ? "ring" : void 0,
+      "data-over": isOver && shape !== "ring" ? "" : void 0,
       role: "progressbar",
       "aria-valuenow": boundedValue,
       "aria-valuemin": 0,
@@ -67,10 +76,53 @@ function Progress(props) {
       "aria-labelledby": labelledBy,
       "aria-label": labelledBy !== void 0 ? void 0 : named ? ariaLabel : t("dataDisplay.progress.ariaLabel"),
       ...domProps,
-      children: [
+      children: shape === "ring" ? (
+        /*
+         * The ARC is aria-hidden and the ring carries no text of its own for a screen reader: the
+         * element above is already `role="progressbar"` with `aria-valuenow`/`aria-valuetext`, so
+         * announcing the drawing as well would say the same number twice. `focusable="false"`
+         * because IE-era SVG semantics still reach some AT through the tab order.
+         */
+        /* @__PURE__ */ jsxs("div", { className: "ui-progress-ring", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "ui-progress-ring-svg",
+              viewBox: `0 0 ${RING_BOX} ${RING_BOX}`,
+              "aria-hidden": "true",
+              focusable: "false",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "ui-progress-ring-track",
+                    cx: RING_CENTRE,
+                    cy: RING_CENTRE,
+                    r: RING_RADIUS,
+                    pathLength: 100
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "ui-progress-ring-indicator",
+                    cx: RING_CENTRE,
+                    cy: RING_CENTRE,
+                    r: RING_RADIUS,
+                    pathLength: 100,
+                    transform: RING_ROTATION,
+                    strokeDasharray: `${boundedValue} 100`
+                  }
+                )
+              ]
+            }
+          ),
+          label !== void 0 ? /* @__PURE__ */ jsx("div", { className: "ui-progress-ring-label", id: labelId, children: label }) : null
+        ] })
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "ui-progress-track", children: /* @__PURE__ */ jsx("div", { className: "ui-progress-bar", style: { width: `${boundedValue}%` } }) }),
         caption
-      ]
+      ] })
     }
   );
 }

package/dist/components/data-entry/date-picker.d.ts

@@ -2,8 +2,15 @@ import * as React from "react";
 import type { DatePickerProp } from "../../props/components/data-entry.prop.js";
 export type { DatePickerProp, DatePickerProp as DatePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
- * DatePicker — WAI-ARIA date combobox. A real, typeable `<input>` holds the value as an ISO-8601
- * `yyyy-MM-dd` string (the international standard): it is form-submittable (give it a `name`),
- * screen-reader friendly, and e2e-testable by simply filling the input.
+ * DatePicker — ONE date control, WAI-ARIA date combobox. A real, typeable `<input>` holds the
+ * value (form-submittable via `name`, screen-reader friendly, e2e-testable by filling the input);
+ * the panel is the visual affordance.
+ *
+ * Two axes: `picker` sets the GRANULARITY (day · week · month · quarter · year), `range` sets the
+ * CARDINALITY (one date, `multiple` dates, or a two-endpoint `DateRange`). This replaces the four
+ * components this package used to ship — `DateRangePicker`, `MonthPicker`, `MonthRangePicker` were
+ * separate copies of this same machine, and every one of them had drifted: a disabled picker that
+ * still opened, bounds that greyed a chevron and clamped nothing, an unhandled Enter key, and a
+ * `name` that submitted `2026/03`. Written once, those are fixed on all eight combinations.
  */
 export declare function DatePicker(props: DatePickerProp): React.JSX.Element;