@godxjp/ui 31.28.4 → 31.30.0

package/dist/i18n/messages/vi.json

@@ -229,6 +229,30 @@
         "symbols": "Ký hiệu",
         "flags": "Cờ"
       }
+    },
+    "sortableList": {
+      "handle": "Sắp xếp lại {label}",
+      "hint": "Nhấn Space để nhấc, phím mũi tên để di chuyển, Space để thả, Esc để huỷ.",
+      "lifted": "Đã nhấc {label}. Vị trí {position}/{count}.",
+      "moved": "{label}: vị trí {position}/{count}.",
+      "dropped": "Đã thả {label} ở vị trí {position}/{count}.",
+      "cancelled": "Đã huỷ di chuyển. {label} trở lại vị trí {position}/{count}."
+    },
+    "passwordStrength": {
+      "weak": "Yếu",
+      "fair": "Trung bình",
+      "strong": "Mạnh",
+      "meter": "Độ mạnh mật khẩu {score} trên 4",
+      "passed": "Đạt: ",
+      "failed": "Chưa đạt: ",
+      "announcement": "Độ mạnh mật khẩu: {strength}",
+      "rules": {
+        "length": "Tối thiểu 8 ký tự",
+        "upper": "Có chữ in hoa",
+        "lower": "Có chữ thường",
+        "number": "Có chữ số",
+        "symbol": "Có ký hiệu"
+      }
     }
   },
   "feedback": {
@@ -717,7 +741,13 @@
     "childRows": "Hàng con",
     "outsideAfter": "Sau khoảng đang xem",
     "outsideBefore": "Trước khoảng đang xem",
-    "schedule": "Lịch công việc"
+    "schedule": "Lịch công việc",
+    "noDates": "Chưa có ngày",
+    "resizeLabel": "Đổi độ rộng cột nhãn",
+    "overdue": "Quá hạn",
+    "overrun": "Vượt kế hoạch",
+    "early": "Sớm hơn kế hoạch",
+    "lateBy": "+{n} ngày"
   },
   "chat": {
     "bubble": {

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

@@ -71,6 +71,15 @@ import type { TreeFieldNamesProp, TreeOptionProp } from "./data-entry.prop.js";
 export type LegendItemProp = {
     /** The tone this key explains — the SAME tone the marks it stands for are drawn in. */
     tone: ToneProp;
+    color?: never;
+    label: LabelProp;
+} | {
+    /**
+     * A hex colour from data (the same contract as `Badge color` / `RangeTimelineRow color`),
+     * for keys whose colours are user-chosen, e.g. a project's status colours (gh#1189).
+     */
+    color: string;
+    tone?: never;
     label: LabelProp;
 };
 /** @see Legend — the key for a colour-coded surface: a breakdown bar, a chart, a status column. */
@@ -303,6 +312,15 @@ export type AvatarPresenceProp = "online" | "away" | "busy" | "offline";
  * @see Avatar
  */
 export type AvatarAppearanceProp = "default" | "tinted";
+/**
+ * How an `AvatarImage` fills its frame (`object-fit`). `cover` (default) fills the frame and crops
+ * — right for a photo of a face. `contain` shows the whole image inside the frame — right for a
+ * logo or an app icon that is wide, transparent or not centred, which `cover` would cut off
+ * (gh#1176). A full-bleed square icon (the GoDX service icon set) wants `cover`.
+ *
+ * @see Avatar
+ */
+export type AvatarImageFitProp = "cover" | "contain";
 /** @see Badge */
 export type BadgeProp = {
     /**

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

@@ -2361,6 +2361,40 @@ export type AttachmentsRefProp = {
         multiple?: boolean;
     }) => void;
 };
+/** One row of a {@link SortableListProp}: its key (`value`), and the name the announcements speak. */
+export type SortableListItemProp = {
+    /** Stable key — the order is reported as these keys. */
+    value: string;
+    /** Spoken in the handle's name and the live announcements; rendered when there is no `renderItem`. */
+    label: string;
+    /** This item's grip is inert; other items still move past it. */
+    disabled?: boolean;
+};
+/**
+ * @see SortableList — reorder a flat list or a grid of tiles (gh#1173): pointer drag on each
+ * item's grip, or the keyboard (Space/Enter lift, arrows / Home / End move, Space/Enter drop, Esc
+ * cancel), with every step announced politely ("2 / 3"). The order is the value.
+ */
+export type SortableListProp = {
+    items: SortableListItemProp[];
+    /** The item keys in order. Controlled with `onValueChange`; keys not in `items` are ignored. */
+    value?: ValueProp<string[]>;
+    defaultValue?: DefaultValueProp<string[]>;
+    /** Called once per drop with the keys in their new order (not on every preview step). */
+    onValueChange?: OnValueChangeProp<string[]>;
+    /** Draws an item's content beside its grip. Default: the item's `label`. */
+    renderItem?: (item: SortableListItemProp, state: {
+        index: number;
+        dragging: boolean;
+    }) => React.ReactNode;
+    /** `list` stacks rows; `grid` flows tiles into auto-filled columns. Default `list`. */
+    layout?: "list" | "grid";
+    disabled?: DisabledProp;
+    /** Accessible name of the list. */
+    "aria-label"?: string;
+    id?: IdProp;
+    className?: ClassNameProp;
+};
 /**
  * @see EmojiPicker — a page icon / reaction picker (gh#1164): search by ja / en / vi keywords
  * (emojibase-data, loaded for the active locale on first open), categories, per-user recents, a

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

@@ -1,7 +1,7 @@
 /** Feedback component prop types — @see docs/COMPONENTS.md#feedback */
 import type * as React from "react";
 import type { QueryErrorCategory } from "../../lib/query-error.js";
-import type { AlertVariantProp, AvatarShapeProp, CalloutKindProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DefaultOpenProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ShapeProp, SizeProp, ToneProp, TitleProp } from "../vocabulary/index.js";
+import type { AlertVariantProp, AvatarShapeProp, CalloutKindProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DefaultOpenProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ShapeProp, SizeProp, ToneProp, TitleProp, WidthProp } from "../vocabulary/index.js";
 /**
  * @see Dialog — the compound modal ROOT.
  *
@@ -38,6 +38,11 @@ export type DialogContentProp = {
     showClose?: boolean;
     /** Semantic class for the scrim the surface owns (RAC nests overlay → modal → dialog). */
     overlayClassName?: ClassNameProp;
+    /**
+     * Panel width (antd Modal `width`; same vocabulary as SheetContent `width`): number = px, string
+     * = any CSS length. Capped at the viewport minus `--dialog-viewport-inset`. Default 32rem.
+     */
+    width?: WidthProp;
     className?: ClassNameProp;
     children?: ChildrenProp;
 };

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

@@ -1430,6 +1430,16 @@ export type AppLauncherProp = {
      */
     side?: "top" | "right" | "bottom" | "left";
     align?: "start" | "center" | "end";
+    /**
+     * Secondary links UNDER the grid — "Request access", "All apps", "Add apps": the row Google
+     * Workspace, Okta and Microsoft My Apps put below their launcher grid (gh#1172). Pass the links
+     * themselves (`<a>` or a router link); the launcher draws the row (a hairline above it, the
+     * small type step, `--app-launcher-footer-*`) outside the scrolling grid, so it stays in view and
+     * comes after the tiles in focus order. Rendered in every state — loading, error and empty
+     * included — because "request access" is most needed when there is nothing to open. Not a tile:
+     * a link dressed as an app reads as an app.
+     */
+    footer?: ReactNode;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     className?: ClassNameProp;
@@ -1463,6 +1473,14 @@ export type SidebarProp = {
      * not belong here — see AppShell's `navRail` for where it goes and why.
      */
     brand?: ReactNode | ((collapsed: boolean) => ReactNode);
+    /**
+     * The rail's ONE primary action ("New issue", "+ Create", "New page"), rendered between `brand`
+     * and the scrolling nav and never scrolling with it. Put exactly one primary control here: a
+     * `Button` (variant primary) full width when expanded, icon-only with an `aria-label` + tooltip
+     * when collapsed. It takes a function for the same reason `brand` and `footer` do: it receives the
+     * EFFECTIVE collapsed value, so the mobile drawer (which never collapses) gets the full button.
+     */
+    action?: ReactNode | ((collapsed: boolean) => ReactNode);
     collapsed?: boolean;
     children?: ChildrenProp;
     /**
@@ -1620,6 +1638,10 @@ export type TopbarItemProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      *
      * The count is not an accessible name: give the cell an `aria-label` that says what the number
      * means (`aria-label={t("topbar.notifications.unread", { count })}`).
+     *
+     * Drawn under `asChild` too (gh#1171): the pill goes inside the child element, after its own
+     * children, so a bell that is a link (`<TopbarItem asChild badge={3}><a …/></TopbarItem>`) keeps
+     * its count.
      */
     badge?: ReactNode;
     /**

package/dist/props/registry.d.ts

@@ -2017,6 +2017,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly AvatarImageFitProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly BadgeProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
@@ -2428,7 +2433,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly DialogContentProp: {
         readonly group: "feedback";
         readonly file: "components/feedback.prop.ts";
-        readonly vocabulary: readonly ["ConfirmVariantProp", "ClassNameProp", "ChildrenProp", {
+        readonly vocabulary: readonly ["ConfirmVariantProp", "ClassNameProp", "ChildrenProp", "WidthProp", {
             readonly field: "showCloseButton";
             readonly local: true;
             readonly reason: 'Corner ✕ opt-out; defaults to false under variant="destructive".';
@@ -3312,13 +3317,39 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "antd `onDrop` info: true when it lands as a sibling, false inside.";
         }];
     };
+    readonly SortableListItemProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "LabelProp", "DisabledProp"];
+    };
+    readonly SortableListProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "DisabledProp", "IdProp", "ClassNameProp", {
+            readonly field: "items";
+            readonly local: true;
+            readonly reason: "The rows to order — key + spoken label + per-item disabled; not select options (nothing is chosen, the order is the value).";
+        }, {
+            readonly field: "renderItem";
+            readonly local: true;
+            readonly reason: "Draws an item's content beside the grip, with its index and whether it is held.";
+        }, {
+            readonly field: "layout";
+            readonly local: true;
+            readonly reason: "list (stacked rows) vs grid (auto-filled tiles) — the same keyboard order either way; not OrientationProp, a grid is neither axis.";
+        }, {
+            readonly field: "aria-label";
+            readonly local: true;
+            readonly reason: "Accessible name of the list.";
+        }];
+    };
     readonly EmojiPickerProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "OpenProp", "DefaultOpenProp", "OnOpenChangeProp", "SizeProp", "DisabledProp", "IdProp", "ClassNameProp", {
             readonly field: "removable";
             readonly local: true;
-            readonly reason: "Whether \"remove icon\" is offered while a value is set — a picker for an OPTIONAL icon (gh#1164), not AllowClearProp's inline ✕ on a field.";
+            readonly reason: 'Whether "remove icon" is offered while a value is set — a picker for an OPTIONAL icon (gh#1164), not AllowClearProp\'s inline ✕ on a field.';
         }, {
             readonly field: "recentsKey";
             readonly local: true;

package/dist/props/registry.js

@@ -2417,6 +2417,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display.prop.ts",
     vocabulary: []
   },
+  AvatarImageFitProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: []
+  },
   BadgeProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
@@ -2850,6 +2855,7 @@ const COMPONENT_PROP_REGISTRY = {
       "ConfirmVariantProp",
       "ClassNameProp",
       "ChildrenProp",
+      "WidthProp",
       {
         field: "showCloseButton",
         local: true,
@@ -3917,6 +3923,39 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  SortableListItemProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["ValueProp", "LabelProp", "DisabledProp"]
+  },
+  SortableListProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "DisabledProp",
+      "IdProp",
+      "ClassNameProp",
+      {
+        field: "items",
+        local: true,
+        reason: "The rows to order \u2014 key + spoken label + per-item disabled; not select options (nothing is chosen, the order is the value)."
+      },
+      {
+        field: "renderItem",
+        local: true,
+        reason: "Draws an item's content beside the grip, with its index and whether it is held."
+      },
+      {
+        field: "layout",
+        local: true,
+        reason: "list (stacked rows) vs grid (auto-filled tiles) \u2014 the same keyboard order either way; not OrientationProp, a grid is neither axis."
+      },
+      { field: "aria-label", local: true, reason: "Accessible name of the list." }
+    ]
+  },
   EmojiPickerProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -3946,7 +3985,11 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "Replaces the default trigger button (a page icon drawn large, a reaction chip) \u2014 a ReactNode slot, not a TriggerProp mode."
       },
-      { field: "aria-label", local: true, reason: "Accessible name of the trigger and the popover." }
+      {
+        field: "aria-label",
+        local: true,
+        reason: "Accessible name of the trigger and the popover."
+      }
     ]
   },
   TreeProp: {

package/dist/styles/control.css

@@ -1026,6 +1026,56 @@
     background-color: hsl(var(--accent));
   }
 
+  .ui-sortable-list-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sortable-list-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ui-sortable-list[data-layout="grid"] .ui-sortable-list-items {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(100%, var(--sortable-list-grid-item-min-inline-size)), 1fr)
+    );
+  }
+
+  .ui-sortable-list-item {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--sortable-list-gap);
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    border-radius: var(--sortable-list-item-radius);
+    background: hsl(var(--card));
+    padding: var(--sortable-list-item-padding);
+  }
+
+  .ui-sortable-list-item[data-dragging] {
+    position: relative;
+    z-index: 1;
+    border-color: hsl(var(--ring));
+    box-shadow: var(--shadow-md);
+  }
+
+  .ui-sortable-list-content {
+    min-inline-size: 0;
+    flex: 1 1 0%;
+  }
+
+  .ui-sortable-list-handle {
+    flex-shrink: 0;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .ui-sortable-list-item[data-dragging] .ui-sortable-list-handle {
+    cursor: grabbing;
+  }
+
   .ui-emoji-picker-grid {
     display: flex;
     flex-direction: column;

package/dist/styles/data-display-layout.css

@@ -72,6 +72,10 @@
     object-fit: cover;
   }
 
+  .ui-avatar-image[data-fit="contain"] {
+    object-fit: contain;
+  }
+
   .ui-avatar-fallback {
     display: flex;
     width: 100%;
@@ -349,6 +353,10 @@
     border-radius: var(--legend-swatch-radius);
   }
 
+  .ui-legend-swatch[data-color="true"] {
+    background: var(--legend-swatch-color, hsl(var(--muted-foreground)));
+  }
+
   .ui-legend-swatch[data-tone="default"] {
     background: hsl(
       var(
@@ -2004,6 +2012,50 @@
   .ui-range-timeline-header {
     background: hsl(var(--muted));
   }
+
+  .ui-range-timeline-label-resizer {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: calc(var(--range-timeline-resizer-inline-size) / -2);
+    z-index: 2;
+    inline-size: var(--range-timeline-resizer-inline-size);
+    cursor: col-resize;
+    touch-action: none;
+  }
+  .ui-range-timeline-label-resizer::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 50%;
+    inline-size: var(--range-timeline-resizer-active-width);
+    translate: -50% 0;
+    background: transparent;
+  }
+  .ui-range-timeline-label-resizer:hover::after,
+  .ui-range-timeline-label-resizer:focus-visible::after {
+    background: hsl(var(--primary));
+  }
+  .ui-range-timeline-label-resizer:focus-visible {
+    outline: none;
+  }
+
+  .ui-range-timeline[data-busy="true"] .ui-range-timeline-body {
+    opacity: var(--range-timeline-busy-body-alpha);
+  }
+  .ui-range-timeline-busy {
+    position: relative;
+    overflow: hidden;
+    block-size: var(--range-timeline-busy-line-block-size);
+    background: hsl(var(--primary) / 0.2);
+  }
+  .ui-range-timeline-busy::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inline-size: 30%;
+    background: hsl(var(--primary));
+    animation: ui-range-timeline-busy var(--duration-slow, 1.2s) ease-in-out infinite;
+  }
   .ui-range-timeline-label {
     position: sticky;
     inset-inline-start: 0;
@@ -2105,10 +2157,77 @@
       --radius-sm,
       calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
     );
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
+    background: var(--range-timeline-bar-color, hsl(var(--primary)));
+    color: var(--range-timeline-bar-ink, hsl(var(--primary-foreground)));
+  }
+
+  .ui-range-timeline-plan,
+  .ui-range-timeline-overrun,
+  .ui-range-timeline-early {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    block-size: var(--range-timeline-bar-height);
+  }
+  .ui-range-timeline-plan {
+    border: var(--range-timeline-plan-border-width) dashed hsl(var(--foreground) / 0.45);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
+  }
+  .ui-range-timeline-overrun {
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    overflow: visible;
+    background: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+    pointer-events: none;
+  }
+  .ui-range-timeline-variance {
+    position: absolute;
+    inset-inline-start: 100%;
+    padding-inline: var(--space-1);
+    color: hsl(var(--text-error));
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+  }
+  .ui-range-timeline-plan-note {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    padding-inline: var(--space-1);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+    white-space: nowrap;
+    pointer-events: none;
+  }
+  .ui-range-timeline-early {
+    z-index: 1;
+    inline-size: var(--range-timeline-early-marker-inline-size);
+    background: hsl(var(--success));
+    pointer-events: none;
+  }
+  .ui-range-timeline-bar[data-muted="true"] {
+    opacity: var(--range-timeline-bar-muted-alpha);
+  }
+  .ui-range-timeline-bar[data-overdue="true"] {
+    box-shadow: inset calc(-1 * var(--range-timeline-bar-overdue-width)) 0 0 hsl(var(--destructive));
+  }
+  [dir="rtl"] .ui-range-timeline-bar[data-overdue="true"] {
+    box-shadow: inset var(--range-timeline-bar-overdue-width) 0 0 hsl(var(--destructive));
+  }
+
+  .ui-range-timeline-bar-hit {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
   }
   .ui-range-timeline-handle {
+    z-index: 1;
     position: absolute;
     inset-block: 0;
     min-inline-size: 0;
@@ -3368,3 +3487,21 @@
     display: contents;
   }
 }
+
+@keyframes ui-range-timeline-busy {
+  from {
+    inset-inline-start: -30%;
+  }
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-range-timeline-busy::before {
+    animation: none;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    opacity: 0.6;
+  }
+}

package/dist/styles/dialog-layout.css

@@ -47,7 +47,12 @@
     top: 50%;
     z-index: var(--overlay-z-index);
     display: grid;
-    width: min(var(--dialog-width-default), calc(100% - var(--dialog-viewport-inset)));
+    width: min(
+      var(--dialog-width, var(--dialog-width-default)),
+      calc(100% - var(--dialog-viewport-inset))
+    );
+
+    --tw-animation-duration: var(--dialog-motion-duration, var(--duration-fast));
     max-width: none;
     transform: translate(-50%, -50%);
     gap: var(--dialog-space-gap);
@@ -424,6 +429,14 @@
     inset: 0;
   }
 
+  .ui-sheet-panel[data-state="open"] {
+    --tw-animation-duration: var(--sheet-enter-duration, var(--duration-fast));
+  }
+
+  .ui-sheet-panel[data-state="closed"] {
+    --tw-animation-duration: var(--sheet-exit-duration, var(--duration-fast));
+  }
+
   .ui-sheet-panel {
 
     background-color: var(--sheet-surface-background, hsl(var(--background)));

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.28.4",
+  "version": "31.30.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -1035,6 +1035,11 @@
         "control.css"
       ]
     },
+    "SortableList": {
+      "layers": [
+        "control.css"
+      ]
+    },
     "SpaceCompact": {
       "layers": [
         "layout.css"