@godxjp/ui 33.1.0 → 33.2.1

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

@@ -125,6 +125,14 @@ export type CommandProp = {
      */
     split?: boolean;
 };
+export type CommandSeparatorProp = {
+    /**
+     * Keep the separator while a search query is typed. Default `true` — the opposite of cmdk, which
+     * hides it under a query; a `+ Create "<q>"` group only exists while the user types, so the rule
+     * above it must stay. `false` restores cmdk's palette behaviour.
+     */
+    alwaysRender?: boolean;
+};
 export type InputProp = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
     onValueChange?: (value: string) => void;
     /**
@@ -221,6 +229,43 @@ export type TextareaProp = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** Character counter — antd `count`. */
     count?: ControlCountProp;
 };
+/**
+ * One translatable field's per-locale values, keyed by BCP-47 tag: `{ ja: "…", en: "…", vi: "…" }`.
+ * A locale with no key (or `""`) is empty. The shape a `*_translations` backend (Astrotomic,
+ * Spatie translatable, Rails Mobility) already sends.
+ */
+export type TranslatableValue = Partial<Record<string, string>>;
+/** The locale + value contract shared by {@link TranslatableInputProp} and {@link TranslatableTextareaProp}. */
+type TranslatableFieldProp = {
+    /** Controlled per-locale values. */
+    value?: ValueProp<TranslatableValue>;
+    /** Uncontrolled initial per-locale values. */
+    defaultValue?: DefaultValueProp<TranslatableValue>;
+    /** The WHOLE map after an edit — every other locale's text is carried over untouched. */
+    onValueChange?: OnValueChangeProp<TranslatableValue>;
+    /**
+     * The locales the field edits, in tab order. Default: every locale registered with the app
+     * (`getRegisteredLocales()` — the built-in `vi`/`en`/`ja` plus `registerLocale(...)`).
+     */
+    locales?: readonly string[];
+    /** The locale tab selected first. Default: the AppProvider's active locale when it is in `locales`. */
+    defaultLocale?: string;
+    /**
+     * The locale whose text shows as the placeholder of an EMPTY locale. Default: the AppProvider's
+     * `fallbackLocale`, or the first of `locales` when that is not one of them.
+     */
+    fallbackLocale?: string;
+    /**
+     * Per-locale validation messages. A locale that has one gets an error mark on its tab (a glyph
+     * plus screen-reader text, never colour alone); the ACTIVE locale's message sets `aria-invalid`
+     * and is shown by the enclosing `FormField` (or under the field when there is none).
+     */
+    errors?: Partial<Record<string, ErrorProp>>;
+};
+/** @see TranslatableInput — one `Input` holding a value per locale, switched by locale tabs. */
+export type TranslatableInputProp = Omit<InputProp, "value" | "defaultValue" | "onValueChange" | "lang"> & TranslatableFieldProp;
+/** @see TranslatableTextarea — the `Textarea` counterpart of {@link TranslatableInputProp}. */
+export type TranslatableTextareaProp = Omit<TextareaProp, "value" | "defaultValue" | "onValueChange" | "lang"> & TranslatableFieldProp;
 /**
  * @see NumberInput — localized numeric spinbutton (composes `Input` + step `Button`s).
  * `value`/`defaultValue`/`onValueChange` carry a `number | null` (null = empty). `step` drives both
@@ -2469,3 +2514,4 @@ export type EmojiPickerProp = {
     id?: IdProp;
     className?: ClassNameProp;
 };
+export {};

package/dist/props/components/index.d.ts

@@ -1,6 +1,6 @@
 export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelLabels, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerExtraProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
-export type { CommandProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, ColorPickerPresetProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
+export type { CommandProp, CommandSeparatorProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, ColorPickerPresetProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AuthExpiryProviderProp, AlertProp, DialogProp, DialogContentProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";

package/dist/props/registry.d.ts

@@ -1641,11 +1641,62 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "antd List `split` — ruled-list presentation (row dividers, 0 list padding) for option/checkbox lists; the rest of the root API is cmdk's (gh#699).";
         }];
     };
+    readonly CommandSeparatorProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "alwaysRender";
+            readonly local: true;
+            readonly reason: "cmdk's own Command.Separator prop name, kept so the cmdk docs still apply; only its default differs (true) so the rule stays above a `+ Create` group while the user types (gh#1335).";
+        }];
+    };
     readonly TextareaProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly ["PlaceholderProp", "DisabledProp", "ValueProp", "DefaultValueProp", "OnChangeProp", "IdProp", "ClassNameProp"];
     };
+    readonly TranslatableInputProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "SizeProp", "PlaceholderProp", "DisabledProp", "IdProp", "ClassNameProp", {
+            readonly field: "locales";
+            readonly local: true;
+            readonly reason: "The BCP-47 tags the field edits, in tab order (gh#1336). Defaults to the app's registered locales; a per-field list, not a value.";
+        }, {
+            readonly field: "defaultLocale";
+            readonly local: true;
+            readonly reason: "The locale tab selected first — the AppProvider's own `defaultLocale` spelling, scoped to one field. Defaults to the active app locale.";
+        }, {
+            readonly field: "fallbackLocale";
+            readonly local: true;
+            readonly reason: "The locale whose text an EMPTY locale shows as its placeholder — the AppProvider's own `fallbackLocale` spelling, scoped to one field.";
+        }, {
+            readonly field: "errors";
+            readonly local: true;
+            readonly reason: "Per-locale validation messages keyed by BCP-47 tag; marks each locale's tab and sends the ACTIVE one through FormField. `error` (one message) cannot say which locale failed.";
+        }];
+    };
+    readonly TranslatableTextareaProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "SizeProp", "PlaceholderProp", "DisabledProp", "IdProp", "ClassNameProp", {
+            readonly field: "locales";
+            readonly local: true;
+            readonly reason: "The BCP-47 tags the field edits, in tab order (gh#1336). Defaults to the app's registered locales; a per-field list, not a value.";
+        }, {
+            readonly field: "defaultLocale";
+            readonly local: true;
+            readonly reason: "The locale tab selected first — the AppProvider's own `defaultLocale` spelling, scoped to one field. Defaults to the active app locale.";
+        }, {
+            readonly field: "fallbackLocale";
+            readonly local: true;
+            readonly reason: "The locale whose text an EMPTY locale shows as its placeholder — the AppProvider's own `fallbackLocale` spelling, scoped to one field.";
+        }, {
+            readonly field: "errors";
+            readonly local: true;
+            readonly reason: "Per-locale validation messages keyed by BCP-47 tag; marks each locale's tab and sends the ACTIVE one through FormField. `error` (one message) cannot say which locale failed.";
+        }];
+    };
     readonly NumberInputProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";

package/dist/props/registry.js

@@ -1854,6 +1854,17 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  CommandSeparatorProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      {
+        field: "alwaysRender",
+        local: true,
+        reason: "cmdk's own Command.Separator prop name, kept so the cmdk docs still apply; only its default differs (true) so the rule stays above a `+ Create` group while the user types (gh#1335)."
+      }
+    ]
+  },
   TextareaProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -1867,6 +1878,74 @@ const COMPONENT_PROP_REGISTRY = {
       "ClassNameProp"
     ]
   },
+  TranslatableInputProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "SizeProp",
+      "PlaceholderProp",
+      "DisabledProp",
+      "IdProp",
+      "ClassNameProp",
+      {
+        field: "locales",
+        local: true,
+        reason: "The BCP-47 tags the field edits, in tab order (gh#1336). Defaults to the app's registered locales; a per-field list, not a value."
+      },
+      {
+        field: "defaultLocale",
+        local: true,
+        reason: "The locale tab selected first \u2014 the AppProvider's own `defaultLocale` spelling, scoped to one field. Defaults to the active app locale."
+      },
+      {
+        field: "fallbackLocale",
+        local: true,
+        reason: "The locale whose text an EMPTY locale shows as its placeholder \u2014 the AppProvider's own `fallbackLocale` spelling, scoped to one field."
+      },
+      {
+        field: "errors",
+        local: true,
+        reason: "Per-locale validation messages keyed by BCP-47 tag; marks each locale's tab and sends the ACTIVE one through FormField. `error` (one message) cannot say which locale failed."
+      }
+    ]
+  },
+  TranslatableTextareaProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "SizeProp",
+      "PlaceholderProp",
+      "DisabledProp",
+      "IdProp",
+      "ClassNameProp",
+      {
+        field: "locales",
+        local: true,
+        reason: "The BCP-47 tags the field edits, in tab order (gh#1336). Defaults to the app's registered locales; a per-field list, not a value."
+      },
+      {
+        field: "defaultLocale",
+        local: true,
+        reason: "The locale tab selected first \u2014 the AppProvider's own `defaultLocale` spelling, scoped to one field. Defaults to the active app locale."
+      },
+      {
+        field: "fallbackLocale",
+        local: true,
+        reason: "The locale whose text an EMPTY locale shows as its placeholder \u2014 the AppProvider's own `fallbackLocale` spelling, scoped to one field."
+      },
+      {
+        field: "errors",
+        local: true,
+        reason: "Per-locale validation messages keyed by BCP-47 tag; marks each locale's tab and sends the ACTIVE one through FormField. `error` (one message) cannot say which locale failed."
+      }
+    ]
+  },
   NumberInputProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",

package/dist/styles/control.css

@@ -966,6 +966,17 @@
     opacity: 0.5;
   }
 
+  .ui-command-separator {
+    height: var(--command-item-divider-width, var(--stroke-hairline));
+    margin-block: var(--command-group-padding);
+    background: hsl(var(--command-item-divider-color, var(--border)));
+  }
+
+  .ui-command-group[hidden] + .ui-command-separator,
+  .ui-command-separator:has(+ .ui-command-group[hidden]) {
+    display: none;
+  }
+
   .ui-command[data-split] .ui-command-group {
     padding: var(--command-list-split-padding);
   }
@@ -990,6 +1001,10 @@
       hsl(var(--command-item-divider-color, var(--border)));
   }
 
+  .ui-command[data-split] .ui-command-separator {
+    display: none;
+  }
+
   [data-slot="dialog-content"].ui-command-palette {
     top: var(--command-palette-inset-top);
     width: min(

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

@@ -868,3 +868,28 @@
     border-radius: var(--radius-md);
   }
 }
+
+@layer components {
+
+  .ui-translatable-field {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--translatable-field-gap);
+    min-inline-size: 0;
+  }
+  .ui-translatable-field-tabs {
+    align-self: flex-start;
+    max-inline-size: 100%;
+  }
+  .ui-translatable-field-panel {
+    min-inline-size: 0;
+  }
+
+  .ui-translatable-field-error-mark {
+    inline-size: var(--translatable-field-error-icon-size);
+    block-size: var(--translatable-field-error-icon-size);
+    flex: none;
+    color: hsl(var(--text-error));
+  }
+}

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.1.0",
+  "version": "33.2.1",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -1097,6 +1097,24 @@
         "navigation-layout.css"
       ]
     },
+    "TranslatableInput": {
+      "layers": [
+        "control.css",
+        "toggle.css",
+        "dialog-layout.css",
+        "data-entry-layout.css",
+        "navigation-layout.css"
+      ]
+    },
+    "TranslatableTextarea": {
+      "layers": [
+        "control.css",
+        "toggle.css",
+        "dialog-layout.css",
+        "data-entry-layout.css",
+        "navigation-layout.css"
+      ]
+    },
     "Tree": {
       "layers": [
         "layout.css",