@godxjp/ui 32.0.5 → 32.1.1

package/dist/i18n/messages/ja.json

@@ -14,6 +14,7 @@
     "previous": "前へ",
     "next": "次へ",
     "selectedCount": "{count} 件選択",
+    "selectedOfTotal": "{total} 件中 {count} 件選択",
     "typeToConfirm": "確認のため {phrase} と入力"
   },
   "dataEntry": {
@@ -32,7 +33,12 @@
       "placeholder": "期間を選択",
       "from": "開始",
       "to": "終了",
-      "openCalendar": "カレンダーを開く"
+      "openCalendar": "カレンダーを開く",
+      "selectEnd": "終了日を選択",
+      "days": {
+        "other": "{count}日間"
+      },
+      "summary": "{range}（{days}）"
     },
     "timePicker": {
       "placeholder": "時刻を選択",
@@ -50,6 +56,10 @@
     "searchInput": {
       "placeholder": "検索…"
     },
+    "commandPalette": {
+      "recent": "最近の検索",
+      "clearRecent": "検索履歴を消去"
+    },
     "autocomplete": {
       "placeholder": "検索または選択…",
       "empty": "結果が見つかりません"
@@ -237,10 +247,14 @@
       "dropped": "{label} を {count} 件中 {position} 番目に置きました。",
       "cancelled": "移動を取り消しました。{label} は {count} 件中 {position} 番目に戻りました。"
     },
+    "checkboxGroup": {
+      "selectAll": "すべて選択"
+    },
     "passwordStrength": {
       "weak": "弱い",
       "fair": "普通",
       "strong": "強い",
+      "empty": "パスワードを入力",
       "meter": "パスワードの強度 4 段階中 {score}",
       "passed": "達成: ",
       "failed": "未達成: ",
@@ -263,6 +277,9 @@
       "dismiss": "閉じる",
       "verifying": "確認中…",
       "stepUpFailed": "再認証に失敗しました。もう一度お試しください。"
+    },
+    "toast": {
+      "close": "通知を閉じる"
     }
   },
   "layout": {

package/dist/i18n/messages/vi.json

@@ -14,6 +14,7 @@
     "previous": "Trước",
     "next": "Tiếp",
     "selectedCount": "{count} đã chọn",
+    "selectedOfTotal": "Đã chọn {count}/{total}",
     "typeToConfirm": "Nhập {phrase} để xác nhận"
   },
   "dataEntry": {
@@ -32,7 +33,12 @@
       "placeholder": "Chọn khoảng ngày",
       "from": "Từ",
       "to": "Đến",
-      "openCalendar": "Mở lịch"
+      "openCalendar": "Mở lịch",
+      "selectEnd": "Chọn ngày kết thúc",
+      "days": {
+        "other": "{count} ngày"
+      },
+      "summary": "{range} · {days}"
     },
     "timePicker": {
       "placeholder": "Chọn giờ",
@@ -50,6 +56,10 @@
     "searchInput": {
       "placeholder": "Tìm kiếm…"
     },
+    "commandPalette": {
+      "recent": "Tìm kiếm gần đây",
+      "clearRecent": "Xóa lịch sử tìm kiếm"
+    },
     "autocomplete": {
       "placeholder": "Tìm hoặc chọn…",
       "empty": "Không tìm thấy kết quả"
@@ -238,10 +248,14 @@
       "dropped": "Đã thả {label} ở vị trí {position}/{count}.",
       "cancelled": "Đã huỷ di chuyển. {label} trở lại vị trí {position}/{count}."
     },
+    "checkboxGroup": {
+      "selectAll": "Chọn tất cả"
+    },
     "passwordStrength": {
       "weak": "Yếu",
       "fair": "Trung bình",
       "strong": "Mạnh",
+      "empty": "Nhập mật khẩu",
       "meter": "Độ mạnh mật khẩu {score} trên 4",
       "passed": "Đạt: ",
       "failed": "Chưa đạt: ",
@@ -264,6 +278,9 @@
       "dismiss": "Đóng",
       "verifying": "Đang xác minh…",
       "stepUpFailed": "Xác thực lại thất bại. Vui lòng thử lại."
+    },
+    "toast": {
+      "close": "Đóng thông báo"
     }
   },
   "layout": {

package/dist/lib/shortcut.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A global keyboard shortcut, parsed from a combo string. Shared by `CommandPalette` (toggles the
+ * dialog) and `SearchInput` (focuses the field) so both read `"mod+k"` the same way (gh#1250).
+ */
+export type ShortcutSpec = {
+    key: string;
+    mod: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+    ctrl: boolean;
+};
+/** `"mod+shift+p"` → its parts. `true` is `mod+k`. */
+export declare function parseShortcut(shortcut: boolean | string): ShortcutSpec | null;
+export declare function shortcutMatches(spec: ShortcutSpec, event: KeyboardEvent): boolean;
+/** The hint a trigger shows: `mod+shift+p` → `⌘⇧P`. */
+export declare function shortcutHint(spec: ShortcutSpec): string;

package/dist/lib/shortcut.js

@@ -0,0 +1,37 @@
+import { isApplePlatform } from "./platform.js";
+function parseShortcut(shortcut) {
+  if (shortcut === false) return null;
+  const parts = (shortcut === true ? "mod+k" : shortcut).toLowerCase().split("+").map((p) => p.trim());
+  const key = parts.pop() ?? "";
+  if (!key) return null;
+  return {
+    key,
+    mod: parts.includes("mod"),
+    meta: parts.includes("meta") || parts.includes("cmd"),
+    ctrl: parts.includes("ctrl"),
+    shift: parts.includes("shift"),
+    alt: parts.includes("alt") || parts.includes("option")
+  };
+}
+function shortcutMatches(spec, event) {
+  const keyMatches = event.key.toLowerCase() === spec.key || /^[a-z]$/.test(spec.key) && event.code === `Key${spec.key.toUpperCase()}`;
+  if (!keyMatches) return false;
+  if (spec.mod && !(isApplePlatform() ? event.metaKey : event.ctrlKey)) return false;
+  if (spec.meta && !event.metaKey) return false;
+  if (spec.ctrl && !event.ctrlKey) return false;
+  return event.shiftKey === spec.shift && event.altKey === spec.alt;
+}
+function shortcutHint(spec) {
+  return [
+    spec.meta || spec.mod && isApplePlatform() ? "\u2318" : "",
+    spec.ctrl || spec.mod && !isApplePlatform() ? "Ctrl+" : "",
+    spec.alt ? "\u2325" : "",
+    spec.shift ? "\u21E7" : "",
+    spec.key.length === 1 ? spec.key.toUpperCase() : spec.key
+  ].join("");
+}
+export {
+  parseShortcut,
+  shortcutHint,
+  shortcutMatches
+};

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

@@ -468,6 +468,13 @@ export type SearchInputProp = FieldA11yProps & {
     status?: ControlStatusProp;
     /** Chrome level — antd `variant`. Default `outlined`. */
     variant?: ControlVariantProp;
+    /**
+     * A global shortcut that FOCUSES the field (gh#1250). `false` (default) binds none; `true` is
+     * ⌘K on Apple platforms and Ctrl+K elsewhere; a combo string (`"mod+/"`, `"mod+shift+f"`) binds
+     * that, read exactly as `CommandPalette.shortcut`. Shows a trailing key-cap hint while the field
+     * is empty. Never fires during IME composition, nor while `disabled`.
+     */
+    shortcut?: boolean | string;
 };
 /**
  * @see Checkbox
@@ -510,6 +517,16 @@ export type CheckboxGroupProp = FieldA11yProps & {
     id?: IdProp;
     className?: ClassNameProp;
     children?: React.ReactNode;
+    /**
+     * A leading "select all" box (gh#1245), `options` form only. Its state is derived from the group
+     * value — checked when every enabled option is selected, mixed on a partial selection, clear
+     * otherwise — and it is followed by a muted "{n} of {m} selected" count and a separator. One
+     * click is one `onValueChange`. Disabled options are outside it in both directions: neither
+     * counted nor added nor removed. `{ label }` replaces the default "Select all" text.
+     */
+    selectAll?: boolean | {
+        label?: React.ReactNode;
+    };
 };
 /** @see Radio.Group */
 export type RadioGroupProp = FieldA11yProps & {
@@ -1014,6 +1031,15 @@ export type DatePickerProp = DatePickerBaseProp & ({
     showTime?: false;
     /** Which endpoints may stay empty (antd `allowEmpty`), as `[from, to]`. */
     allowEmpty?: [boolean, boolean];
+    /**
+     * A polite live summary under the day grid: the start date while only the start is
+     * held, then `Intl.DateTimeFormat#formatRange` of both edges and the INCLUSIVE day count,
+     * plural-aware (en "7 days", ja 「7日間」). Default `true`. Day grid only — the
+     * month / quarter / year period grids have no day count to report and ignore it. The
+     * `to` edge's "Select end date" prompt while only the start is held is independent of
+     * this flag.
+     */
+    showSummary?: boolean;
     presets?: {
         label: React.ReactNode;
         value: DateRange | (() => DateRange);
@@ -1623,6 +1649,14 @@ export type SearchSelectMultipleProp = {
      * a token only counts when it matches a row; in `mode="tags"` it is accepted as it stands.
      */
     tokenSeparators?: string[];
+    /**
+     * Hold the panel's picks as a DRAFT until OK commits them (antd's `needConfirm`, the same word
+     * `TimePicker` / `DatePicker` use). Row toggles move a pending set; the footer's OK fires ONE
+     * `onValueChange` with the whole set and closes; its Clear empties the pending set; Escape or an
+     * outside click discards it, so the trigger keeps the committed values. `onSelect` /
+     * `onDeselect` do not fire for draft toggles. Default `false` (commit on every toggle).
+     */
+    needConfirm?: boolean;
 } & SelectTagsCreateProp;
 /**
  * antd `labelInValue`, single. The value carries its own label, so a screen that never sees the
@@ -1650,6 +1684,8 @@ export type SelectLabelInValueMultipleProp = {
     maxTagPlaceholder?: MaxTagPlaceholderProp;
     maxTagTextLength?: number;
     tokenSeparators?: string[];
+    /** @see SearchSelectMultipleProp.needConfirm */
+    needConfirm?: boolean;
     tagRender?: (props: {
         value: string;
         label: React.ReactNode;

package/dist/styles/control.css

@@ -69,7 +69,7 @@
 
   .ui-toggle[data-state="on"] {
     background: var(--toggle-on-background, hsl(var(--primary)));
-    color: hsl(var(--primary-foreground));
+    color: var(--toggle-on-color, hsl(var(--primary-foreground)));
   }
 
   .ui-toggle:disabled,
@@ -527,6 +527,17 @@
     border: var(--checkbox-border-width, var(--stroke-hairline)) solid hsl(var(--primary));
     color: hsl(var(--text-brand, var(--primary)));
     background: transparent;
+
+    transition-property: background-color, border-color, color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-checkbox,
+    .ui-radio {
+      transition: none;
+    }
   }
 
   .ui-checkbox {
@@ -1137,6 +1148,10 @@
     font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
 
+  .ui-command-palette-recent-clear:not([aria-selected="true"]) {
+    color: hsl(var(--muted-foreground));
+  }
+
   .ui-command-palette-state {
     padding-block: var(--space-6);
     padding-inline: var(--space-4);
@@ -1199,6 +1214,14 @@
     transform: translateY(-50%);
   }
 
+  .ui-search-input-shortcut {
+    position: absolute;
+    inset-inline-end: var(--search-input-edge-inset);
+    top: 50%;
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+
   .ui-search-input-clear:hover {
     color: hsl(var(--foreground));
   }
@@ -1947,11 +1970,17 @@
     display: flex;
     min-inline-size: 0;
     flex: 1 1 0%;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--search-select-option-space-gap);
     overflow: hidden;
   }
 
+  .ui-control-trigger[data-mode="multiple"]:has(.ui-search-select-values) {
+    block-size: auto;
+    min-block-size: var(--control-height);
+  }
+
   .ui-search-select-value {
     display: inline-flex;
     max-inline-size: 100%;
@@ -2736,6 +2765,9 @@
     justify-content: flex-start;
     text-align: start;
     white-space: normal;
+
+    padding-inline: var(--calendar-full-day-padding-inline, var(--space-2));
+    padding-block: var(--calendar-full-day-padding-block, var(--space-1));
   }
 
   .ui-calendar-month {
@@ -3157,8 +3189,8 @@
   }
 
   .ui-button--secondary .ui-button-count {
-    background: var(--button-count-secondary-background, hsl(var(--secondary-foreground)));
-    color: var(--button-count-secondary-color, hsl(var(--secondary)));
+    background: var(--button-count-secondary-background, hsl(var(--background)));
+    color: var(--button-count-secondary-color, hsl(var(--foreground)));
   }
 }
 

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

@@ -905,6 +905,13 @@
     padding: var(--list-row-compact-padding-y, var(--space-2))
       var(--list-row-compact-padding-x, var(--list-row-padding-x));
   }
+
+  [data-slot="card-content"]:not([data-flush]) > [data-slot="list-row"],
+  [data-slot="card-content"]:not([data-flush])
+    > :is(ul, ol, [role="list"])
+    > [data-slot="list-row"] {
+    padding-inline: 0;
+  }
   [data-slot="list-row"][data-density="compact"] [data-slot="list-row-body"] {
     min-inline-size: min(var(--list-row-compact-body-min-width, 6rem), 100%);
     flex-basis: var(--list-row-compact-body-min-width, 6rem);

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.0.5",
+  "version": "32.1.1",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -105,6 +105,7 @@
     "AppSettingPicker": {
       "layers": [
         "shell-layout.css",
+        "layout.css",
         "control.css",
         "dialog-layout.css",
         "navigation-layout.css"
@@ -330,12 +331,14 @@
     },
     "Checkbox": {
       "layers": [
+        "layout.css",
         "control.css",
         "form-layout.css"
       ]
     },
     "CheckboxGroup": {
       "layers": [
+        "layout.css",
         "control.css",
         "form-layout.css"
       ]
@@ -424,6 +427,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css"
       ],
       "vendor": [
@@ -854,6 +858,7 @@
     },
     "Select": {
       "layers": [
+        "layout.css",
         "control.css",
         "dialog-layout.css",
         "navigation-layout.css"

package/dist/styles/navigation-layout.css

@@ -627,6 +627,32 @@
     font-weight: var(--font-weight-medium);
   }
 
+  .ui-dropdown-menu-item[data-description] {
+    height: auto;
+    min-height: var(--menu-item-height);
+    padding-block: var(--menu-item-description-space-block);
+  }
+
+  .ui-dropdown-menu-item-text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-dropdown-menu-item-label {
+    display: flex;
+    align-items: center;
+    gap: var(--menu-item-space-gap);
+  }
+
+  .ui-dropdown-menu-item-description {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--menu-item-description-font-size);
+    font-weight: var(--font-weight-normal);
+  }
+
   .ui-dropdown-menu-shortcut {
     margin-inline-start: auto;
     text-align: end;

package/dist/styles/table-layout.css

@@ -235,6 +235,20 @@
     align-items: center;
     gap: var(--space-inline-sm);
     font-size: var(--font-size-base);
+
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  @starting-style {
+    .ui-data-table-bulk {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-data-table-bulk {
+      transition: none;
+    }
   }
 
   .ui-data-table-bulk-actions {

package/dist/styles/toggle.css

@@ -36,6 +36,20 @@
     color: var(--toggle-pressed-count-color, hsl(var(--primary)));
   }
 
+  .ui-toggle-quiet {
+    border: var(--stroke-hairline) solid transparent;
+  }
+
+  .ui-toggle.ui-toggle-quiet[data-state="on"] {
+    background: var(--toggle-quiet-on-background, hsl(var(--secondary)));
+    color: var(--toggle-quiet-on-color, hsl(var(--foreground)));
+  }
+
+  .ui-toggle.ui-toggle-quiet[data-state="on"] .ui-toggle-count {
+    background: var(--toggle-quiet-on-count-background, hsl(var(--background)));
+    color: var(--toggle-quiet-on-count-color, hsl(var(--foreground)));
+  }
+
   @media (forced-colors: active) {
     .ui-toggle[data-state="on"] {
       border-color: Highlight;