{
  "example": "import { FormField, TranslatableField, Textarea } from \"@godxjp/ui/data-entry\";\n\n<FormField label=\"説明\">\n  <TranslatableField\n    locales={[\"ja\", \"en\", \"vi\"]}\n    value={description}\n    onValueChange={setDescription}\n    renderControl={(control) => <Textarea {...control} rows={4} />}\n  />\n</FormField>",
  "group": "data-entry",
  "importPath": "@godxjp/ui/data-entry",
  "name": "TranslatableField",
  "props": [
    {
      "description": "Renders the one control in the panel. Spread `control` onto it: `lang`, `value` / `onValueChange` (the active locale's text), the resolved `placeholder`, `status`, `size`, and the field-a11y props (`aria-labelledby` with the locale's name, `aria-invalid`, `aria-errormessage`) plus every prop the field does not own (`id`, `disabled`, …).",
      "name": "renderControl",
      "type": "(control: TranslatableFieldControlProp) => ReactNode"
    },
    {
      "description": "Turns the fallback locale's stored text into the plain placeholder an empty locale shows (HTML → text for a rich-text control). Default: the text as stored.",
      "name": "toPlaceholder",
      "type": "(fallbackText: string) => string"
    },
    {
      "description": "The per-locale map; onValueChange gets the whole map, only the active key changed.",
      "name": "value / defaultValue / onValueChange",
      "type": "TranslatableValue"
    },
    {
      "description": "Exactly as on TranslatableInput.",
      "name": "locales / defaultLocale / fallbackLocale / errors",
      "type": "—"
    },
    {
      "description": "Passed to the control; the tab strip uses Tabs `sm` (`md` for `lg`).",
      "name": "size",
      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
    },
    {
      "description": "Shown when there is no fallback text.",
      "name": "placeholder",
      "type": "string"
    },
    {
      "description": "Passed to the control; the active locale's error turns it into `error`.",
      "name": "status",
      "type": "\"error\" | \"warning\""
    },
    {
      "description": "Passed to the control, so a FormField label click focuses it.",
      "name": "id",
      "type": "string"
    },
    {
      "description": "Root (strip + panel) class override.",
      "name": "className",
      "type": "string"
    }
  ],
  "related": [
    "TranslatableInput — the engine around an Input.",
    "TranslatableTextarea — the engine around a Textarea.",
    "TranslatableRichText (@godxjp/block-editor) — the engine around a RichTextEditor."
  ],
  "rules": [],
  "storyPath": "data-entry/translatable-input.tsx",
  "tagline": "The locale-tab engine behind TranslatableInput, TranslatableTextarea and `@godxjp/block-editor`'s TranslatableRichText (gh#1365): the locale list and first tab (AppProvider `contentLocales`), the per-locale map, the fallback placeholder, the error marks and the FormField error report — around ONE control you render with `renderControl`. Use it only to make another control translatable; for text use TranslatableInput / TranslatableTextarea.",
  "usage": [
    "DO render ONE control and spread `control` onto it (`<X {...control} ref={ref} />`): the engine swaps its value per tab, so the ref, FormField id and IME composition stay on one node.",
    "DO make the control accept `lang`, `status`, `placeholder` and the field-a11y props on its focus target — that is how the locale, the error and the label reach it.",
    "DON'T use it for a plain text field: TranslatableInput / TranslatableTextarea are this engine with an Input / Textarea already."
  ],
  "useCases": [
    "Making a rich-text, date or custom control hold one value per locale with the kit's tab / error / fallback contract"
  ]
}