@godxjp/ui 33.1.1 → 33.2.1

package/dist/components/data-entry/command.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
-import type { CommandProp } from "../../props/components/data-entry.prop.js";
+import type { CommandProp, CommandSeparatorProp } from "../../props/components/data-entry.prop.js";
 export type { CommandProp, CommandProp as CommandProps };
+export type { CommandSeparatorProp, CommandSeparatorProp as CommandSeparatorProps };
 export declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
@@ -66,3 +67,23 @@ export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     keywords?: string[];
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A hairline between two groups of one list — e.g. the matches, then `+ Create "<q>"` (gh#1335).
+ * It is cmdk's own `Command.Separator`, so it must sit inside the same `Command` as its groups.
+ *
+ * `alwaysRender` defaults to `true`, the OPPOSITE of cmdk: cmdk drops a separator as soon as the
+ * search is non-empty, because in a palette the groups collapse under filtering. A "Create" group
+ * exists only BECAUSE the user typed, so with cmdk's default the rule vanished exactly when it
+ * was needed. Pass `alwaysRender={false}` for cmdk's palette behaviour.
+ *
+ * `aria-hidden` by default: the rule is decorative, and a `role="separator"` child is not allowed
+ * in the `listbox` CommandList renders (ARIA owns only `option` / `group` there); the groups'
+ * headings carry the structure.
+ */
+export declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & CommandSeparatorProp & React.RefAttributes<HTMLDivElement>>;

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

@@ -50,11 +50,24 @@ const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PU
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(CommandPrimitive.Item, { ref, className: cn("ui-command-item", className), ...props }));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
+const CommandSeparator = React.forwardRef(({ className, alwaysRender = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Separator,
+  {
+    ref,
+    className: cn("ui-command-separator", className),
+    "data-slot": "command-separator",
+    "aria-hidden": "true",
+    alwaysRender,
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 export {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-  CommandList
+  CommandList,
+  CommandSeparator
 };

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

@@ -5,7 +5,12 @@ import { CheckCircle, CircleAlert, LoaderCircle, TriangleAlert } from "lucide-re
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Label } from "../data-entry/label.js";
 import { cn } from "../../lib/utils.js";
-import { FieldIdentityContext, FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
+import {
+  FieldErrorReportContext,
+  FieldIdentityContext,
+  FieldNameContext,
+  mergeAriaIds
+} from "../../lib/field-a11y.js";
 import { useOptionalAppContext } from "../../app/app-provider.js";
 import { useFormLayout } from "./form.js";
 import { firstBagMessage, useClaimErrorKey, useFormErrorsRegistry } from "./form-errors.js";
@@ -42,7 +47,8 @@ function FormField({
   const collapseBelow = form?.collapseBelow ?? "md";
   const errorsRegistry = useFormErrorsRegistry();
   useClaimErrorKey(name);
-  const error = errorProp ?? (name && errorsRegistry ? firstBagMessage(errorsRegistry.errors[name]) : void 0);
+  const [reportedError, setReportedError] = React.useState(void 0);
+  const error = errorProp ?? (name && errorsRegistry ? firstBagMessage(errorsRegistry.errors[name]) : void 0) ?? (reportedError === null || reportedError === false || reportedError === "" ? void 0 : reportedError);
   const autoId = React.useId();
   const resolvedId = id ?? autoId;
   const labelId = `${resolvedId}-label`;
@@ -165,7 +171,7 @@ function FormField({
         ] }) : null,
         /* @__PURE__ */ jsxs("div", { "data-slot": "form-field-control", className: "ui-form-field-control", children: [
           helperPlacement === "before" ? helperNode : null,
-          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: /* @__PURE__ */ jsx(FieldIdentityContext.Provider, { value: fieldIdentityContext, children: /* @__PURE__ */ jsx(
+          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: /* @__PURE__ */ jsx(FieldIdentityContext.Provider, { value: fieldIdentityContext, children: /* @__PURE__ */ jsx(FieldErrorReportContext.Provider, { value: setReportedError, children: /* @__PURE__ */ jsx(
             "fieldset",
             {
               role: "presentation",
@@ -173,7 +179,7 @@ function FormField({
               disabled: form?.disabled && childProps?.disabled !== false,
               children: childWithA11y
             }
-          ) }) }),
+          ) }) }) }),
           hasFeedback && validationStatus ? /* @__PURE__ */ jsxs(
             "span",
             {

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

@@ -9,6 +9,8 @@ export { CheckboxGroup } from "./checkbox-group.js";
 export { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
 export { Textarea } from "./textarea.js";
 export type { TextareaProps } from "./textarea.js";
+export { TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
+export type { TranslatableValue, TranslatableInputProp, TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProps, } from "./translatable-input.js";
 export { Form, useFormLayout, type FormLayoutContextValue } from "./form.js";
 export type { FormProp, FormProps } from "./form.js";
 export { FormField } from "./form-field.js";
@@ -47,8 +49,8 @@ export { TreeSelect, SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select.js"
 export type { TreeSelectProps } from "./tree-select.js";
 export { Transfer } from "./transfer.js";
 export type { TransferProps, TransferItemProp } from "./transfer.js";
-export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
-export type { CommandProps } from "./command.js";
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command.js";
+export type { CommandProps, CommandSeparatorProps } from "./command.js";
 export { CommandPalette } from "./command-palette.js";
 export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteLabels, CommandPaletteProps, CommandPaletteRecent, CommandPaletteSelectModifiers, } from "./command-palette.js";
 export { PasswordInput } from "./password-input.js";

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

@@ -17,6 +17,7 @@ import { Checkbox } from "./checkbox.js";
 import { CheckboxGroup } from "./checkbox-group.js";
 import { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
 import { Textarea } from "./textarea.js";
+import { TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
 import { Form, useFormLayout } from "./form.js";
 import { FormField } from "./form-field.js";
 import { FormErrors, FormErrorsProvider } from "./form-errors.js";
@@ -48,7 +49,8 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
-  CommandList
+  CommandList,
+  CommandSeparator
 } from "./command.js";
 import { CommandPalette } from "./command-palette.js";
 import { PasswordInput } from "./password-input.js";
@@ -77,6 +79,7 @@ export {
   CommandItem,
   CommandList,
   CommandPalette,
+  CommandSeparator,
   DatePicker,
   DayButton,
   Field,
@@ -123,6 +126,8 @@ export {
   ToggleGroup,
   ToggleGroupItem,
   Transfer,
+  TranslatableInput,
+  TranslatableTextarea,
   TreeSelect,
   UPLOAD_LIST_IGNORE,
   Upload,

package/dist/components/data-entry/translatable-input.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { TranslatableValue } from "../../props/components/data-entry.prop.js";
+export type { TranslatableValue, TranslatableInputProp, TranslatableInputProp as TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProp as TranslatableTextareaProps, } from "../../props/components/data-entry.prop.js";
+/**
+ * TranslatableInput — ONE text field that holds a value per locale (`{ ja, en, vi }`), switched by
+ * locale tabs above it (gh#1336). The locale list, the first tab and the fallback come from
+ * `AppProvider` and are overridable per field; an empty locale shows the fallback locale's text as
+ * its placeholder; a locale with an error is marked on its tab. Every other `Input` prop applies to
+ * the single control, and `ref` is that control's `<input>`.
+ */
+export declare const TranslatableInput: React.ForwardRefExoticComponent<Omit<import("./input.js").InputProp, "defaultValue" | "lang" | "onValueChange" | "value"> & {
+    value?: import("../../props/index.js").ValueProp<TranslatableValue>;
+    defaultValue?: import("../../props/index.js").DefaultValueProp<TranslatableValue>;
+    onValueChange?: import("../../props/index.js").OnValueChangeProp<TranslatableValue>;
+    locales?: readonly string[];
+    defaultLocale?: string;
+    fallbackLocale?: string;
+    errors?: Partial<Record<string, import("../../props/index.js").ErrorProp>>;
+} & React.RefAttributes<HTMLInputElement>>;
+/** TranslatableTextarea — {@link TranslatableInput} over a `Textarea`; `ref` is the `<textarea>`. */
+export declare const TranslatableTextarea: React.ForwardRefExoticComponent<Omit<import("./textarea.js").TextareaProp, "defaultValue" | "lang" | "onValueChange" | "value"> & {
+    value?: import("../../props/index.js").ValueProp<TranslatableValue>;
+    defaultValue?: import("../../props/index.js").DefaultValueProp<TranslatableValue>;
+    onValueChange?: import("../../props/index.js").OnValueChangeProp<TranslatableValue>;
+    locales?: readonly string[];
+    defaultLocale?: string;
+    fallbackLocale?: string;
+    errors?: Partial<Record<string, import("../../props/index.js").ErrorProp>>;
+} & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,184 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CircleAlert } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { getRegisteredLocales } from "../../i18n/locale-tags.js";
+import { mergeAriaIds, useReportFieldError } from "../../lib/field-a11y.js";
+import { displayNames } from "../../lib/intl-cache.js";
+import { cn } from "../../lib/utils.js";
+import { Tabs, TabsList, TabsTrigger } from "../navigation/tabs.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+const NO_VALUE = {};
+function localeName(code, uiLocale) {
+  try {
+    return displayNames(uiLocale, { type: "language" }).of(code) ?? code;
+  } catch {
+    return code;
+  }
+}
+const idPart = (code) => code.replace(/[^A-Za-z0-9_-]/g, "_");
+function TranslatableField({
+  kind,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  locales: localesProp,
+  defaultLocale,
+  fallbackLocale: fallbackLocaleProp,
+  errors,
+  size,
+  placeholder,
+  className,
+  forwardedRef,
+  ...rest
+}) {
+  const { t, locale: uiLocale, fallbackLocale: appFallbackLocale } = useTranslation();
+  const locales = React.useMemo(() => {
+    const list = localesProp ?? getRegisteredLocales();
+    return list.length > 0 ? list : [uiLocale];
+  }, [localesProp, uiLocale]);
+  const pick = (candidates) => candidates.find((code) => code !== void 0 && locales.includes(code)) ?? locales[0];
+  const fallbackLocale = pick([fallbackLocaleProp, appFallbackLocale]);
+  const [activeState, setActiveState] = React.useState(
+    () => pick([defaultLocale, uiLocale, fallbackLocale])
+  );
+  const active = locales.includes(activeState) ? activeState : pick([defaultLocale, fallbackLocale]);
+  const [innerValue, setInnerValue] = React.useState(defaultValue ?? NO_VALUE);
+  const current = valueProp ?? innerValue;
+  const currentRef = React.useRef(current);
+  currentRef.current = current;
+  const handleText = (text) => {
+    const next = { ...currentRef.current, [active]: text };
+    currentRef.current = next;
+    if (valueProp === void 0) setInnerValue(next);
+    onValueChange?.(next);
+  };
+  const activeText = current[active] ?? "";
+  const fallbackText = active !== fallbackLocale && activeText === "" ? current[fallbackLocale] : void 0;
+  const activeError = errors?.[active];
+  const hasActiveError = activeError !== void 0 && activeError !== null && activeError !== false && activeError !== "";
+  const insideFormField = useReportFieldError(hasActiveError ? activeError : void 0);
+  const baseId = React.useId();
+  const tabId = (code) => `${baseId}-tab-${idPart(code)}`;
+  const panelId = `${baseId}-panel`;
+  const switcherNameId = `${baseId}-languages`;
+  const localeNameId = `${baseId}-locale`;
+  const ownErrorId = `${baseId}-error`;
+  const labelledBy = rest["aria-labelledby"];
+  const ariaLabel = rest["aria-label"];
+  const showOwnError = hasActiveError && !insideFormField;
+  const controlProps = {
+    ...rest,
+    ref: forwardedRef,
+    lang: active,
+    value: activeText,
+    onValueChange: handleText,
+    placeholder: fallbackText ? fallbackText : placeholder,
+    // The control is named by the field AND the locale it holds: "商品名 English".
+    "aria-labelledby": labelledBy ? `${labelledBy} ${localeNameId}` : void 0,
+    "aria-invalid": hasActiveError ? true : rest["aria-invalid"],
+    "aria-errormessage": mergeAriaIds(
+      rest["aria-errormessage"],
+      showOwnError ? ownErrorId : void 0
+    ),
+    status: hasActiveError ? "error" : rest.status
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "translatable-field",
+      "data-size": size,
+      className: cn("ui-translatable-field", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            value: active,
+            onValueChange: setActiveState,
+            size: size === "lg" ? "md" : "sm",
+            controls: panelId,
+            className: "ui-translatable-field-tabs",
+            ...labelledBy ? { "aria-labelledby": `${labelledBy} ${switcherNameId}` } : {
+              "aria-label": [ariaLabel, t("dataEntry.translatable.languages")].filter(Boolean).join(" ")
+            },
+            children: /* @__PURE__ */ jsx(TabsList, { children: locales.map((code) => {
+              const error = errors?.[code];
+              const invalid = error !== void 0 && error !== null && error !== false && error !== "";
+              return /* @__PURE__ */ jsxs(
+                TabsTrigger,
+                {
+                  id: tabId(code),
+                  value: code,
+                  "data-locale": code,
+                  "data-invalid": invalid ? "true" : void 0,
+                  "data-filled": current[code] ? "true" : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: localeName(code, uiLocale) }),
+                    invalid ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(CircleAlert, { className: "ui-translatable-field-error-mark", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${t("dataEntry.translatable.hasError")}` })
+                    ] }) : null
+                  ]
+                },
+                code
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { id: switcherNameId, hidden: true, children: t("dataEntry.translatable.languages") }),
+        /* @__PURE__ */ jsx("span", { id: localeNameId, hidden: true, children: localeName(active, uiLocale) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tabpanel",
+            id: panelId,
+            "aria-labelledby": tabId(active),
+            className: "ui-translatable-field-panel",
+            children: kind === "input" ? /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...controlProps,
+                size
+              }
+            ) : /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                ...controlProps,
+                size
+              }
+            )
+          }
+        ),
+        showOwnError ? /* @__PURE__ */ jsx("p", { id: ownErrorId, role: "alert", className: "ui-form-field-note text-error-strong text-xs", children: activeError }) : null
+      ]
+    }
+  );
+}
+const TranslatableInput = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(
+    TranslatableField,
+    {
+      ...props,
+      kind: "input",
+      forwardedRef: ref
+    }
+  )
+);
+TranslatableInput.displayName = "TranslatableInput";
+const TranslatableTextarea = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(
+    TranslatableField,
+    {
+      ...props,
+      kind: "textarea",
+      forwardedRef: ref
+    }
+  )
+);
+TranslatableTextarea.displayName = "TranslatableTextarea";
+export {
+  TranslatableInput,
+  TranslatableTextarea
+};

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.1.1",
+  "version": "33.2.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -278,6 +278,10 @@
         "number": "Contains number",
         "symbol": "Contains symbol"
       }
+    },
+    "translatable": {
+      "languages": "Language",
+      "hasError": "has an error"
     }
   },
   "feedback": {

package/dist/i18n/messages/ja.json

@@ -273,6 +273,10 @@
         "number": "数字を含む",
         "symbol": "記号を含む"
       }
+    },
+    "translatable": {
+      "languages": "言語",
+      "hasError": "エラーあり"
     }
   },
   "feedback": {

package/dist/i18n/messages/vi.json

@@ -274,6 +274,10 @@
         "number": "Có chữ số",
         "symbol": "Có ký hiệu"
       }
+    },
+    "translatable": {
+      "languages": "Ngôn ngữ",
+      "hasError": "có lỗi"
     }
   },
   "feedback": {

package/dist/lib/field-a11y.d.ts

@@ -106,3 +106,18 @@ export declare function pickGroupFieldA11y(props: FieldA11yProps): {
     "aria-describedby"?: string;
     "data-field"?: string;
 };
+/**
+ * A control that owns SEVERAL values reports which of its messages is current (gh#1336). A
+ * `TranslatableInput` holds one value per locale and gets one message per locale; only the active
+ * locale's message describes the text the user is looking at, and only the control knows which
+ * locale that is. FormField reads the report as the lowest-precedence source of its `error` — its
+ * own `error` prop and the form's error bag both win — so the message renders in FormField's own
+ * error line and reaches the control through the same `aria-invalid` / `aria-errormessage` wiring
+ * every other field uses. `null` outside a FormField.
+ */
+export declare const FieldErrorReportContext: React.Context<((message: React.ReactNode) => void) | null>;
+/**
+ * Report `message` (or its absence) to the enclosing FormField. Returns `true` when a FormField is
+ * listening — a caller with no FormField above it has to render its own message.
+ */
+export declare function useReportFieldError(message: React.ReactNode): boolean;

package/dist/lib/field-a11y.js

@@ -78,7 +78,18 @@ function pickGroupFieldA11y(props) {
     ...props["data-field"] !== void 0 ? { "data-field": props["data-field"] } : {}
   };
 }
+const FieldErrorReportContext = React.createContext(null);
+function useReportFieldError(message) {
+  const report = React.useContext(FieldErrorReportContext);
+  React.useEffect(() => {
+    if (!report) return;
+    report(message);
+    return () => report(void 0);
+  }, [report, message]);
+  return report !== null;
+}
 export {
+  FieldErrorReportContext,
   FieldIdentityContext,
   FieldNameContext,
   mergeAriaIds,
@@ -88,5 +99,6 @@ export {
   resolveFieldA11y,
   useFieldIdentity,
   useFieldNameFallback,
-  useMirroredInputAttributes
+  useMirroredInputAttributes,
+  useReportFieldError
 };

package/dist/lib/intl-cache.d.ts

@@ -30,3 +30,4 @@ export declare function dateTimeFormat(locale: string, options?: Intl.DateTimeFo
 export declare function numberFormat(locale: string, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 export declare function pluralRules(locale: string, options?: Intl.PluralRulesOptions): Intl.PluralRules;
 export declare function listFormat(locale: string, options?: Intl.ListFormatOptions): Intl.ListFormat;
+export declare function displayNames(locale: string, options: Intl.DisplayNamesOptions): Intl.DisplayNames;

package/dist/lib/intl-cache.js

@@ -21,8 +21,12 @@ function pluralRules(locale, options) {
 function listFormat(locale, options) {
   return memoise("lf", locale, options, () => new Intl.ListFormat(locale, options));
 }
+function displayNames(locale, options) {
+  return memoise("dn", locale, options, () => new Intl.DisplayNames(locale, options));
+}
 export {
   dateTimeFormat,
+  displayNames,
   listFormat,
   numberFormat,
   pluralRules

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";