@godxjp/ui 33.1.0 → 33.2.1

package/agent/patterns/list-filters.json

@@ -6,7 +6,7 @@
     "advanced-filters",
     "add-filter"
   ],
-  "code": "// Research basis: Shopify Polaris Filters (\"include no more than 2 or 3 promoted filters\"; a\n// More button opens a sheet with the rest), Linear (one Filter menu), IBM Carbon filtering\n// (filters hidden in a drawer/menu show how many are applied), WCAG 2.2 SC 1.4.10 Reflow\n// (search fields and controls are not in the 2-D exception: they reflow, they do not scroll).\n//\n// RULE #51: a filter bar WRAPS — stacked below 640px, extra rows above — at every width.\n// ❌ FilterBar overflow=\"scroll\" (removed in 33.0.0), <ScrollArea orientation=\"horizontal\"> or an\n//    overflow-x-auto box around filters: the strip runs off-screen and clips its first label.\n// ✅ the common filters inline + ONE \"More filters\" Sheet for the rest + wrapping chips.\nimport { useState } from \"react\";\nimport { SlidersHorizontal } from \"lucide-react\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\";\nimport {\n  Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader,\n  SheetTitle, SheetTrigger,\n} from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { FilterBar, FilterBarGroup } from \"@godxjp/ui/navigation\";\n\ntype Option = { value: string; label: string };\ntype Filters = Record<\"q\" | \"status\" | \"owner\" | \"region\" | \"channel\" | \"period\", string>;\nexport const NO_FILTERS: Filters = { q: \"\", status: \"\", owner: \"\", region: \"\", channel: \"\", period: \"\" };\n\nconst STATUS: Option[] = [{ value: \"open\", label: \"Open\" }, { value: \"paid\", label: \"Paid\" }, { value: \"void\", label: \"Void\" }];\nconst OWNER: Option[] = [{ value: \"me\", label: \"Me\" }, { value: \"team\", label: \"My team\" }];\n// Everything people reach for less often. Order = the order of the sheet.\nconst MORE: { key: \"region\" | \"channel\" | \"period\"; label: string; options: Option[] }[] = [\n  { key: \"region\", label: \"Region\", options: [{ value: \"kanto\", label: \"Kanto\" }, { value: \"kansai\", label: \"Kansai\" }] },\n  { key: \"channel\", label: \"Sales channel\", options: [{ value: \"web\", label: \"Web\" }, { value: \"store\", label: \"Store\" }] },\n  { key: \"period\", label: \"Period\", options: [{ value: \"month\", label: \"This month\" }, { value: \"quarter\", label: \"This quarter\" }] },\n];\nconst LABELS: Record<string, { label: string; options: Option[] }> = {\n  status: { label: \"Status\", options: STATUS },\n  owner: { label: \"Owner\", options: OWNER },\n  ...Object.fromEntries(MORE.map((f) => [f.key, f])),\n};\n\nexport function OrderFilters({ value, onValueChange, resultCount }: {\n  value: Filters; onValueChange: (next: Filters) => void; resultCount: number;\n}) {\n  const [moreOpen, setMoreOpen] = useState(false);\n  const set = (key: keyof Filters, v: string) => onValueChange({ ...value, [key]: v });\n\n  // ONE chip per applied filter — inline AND hidden ones, so nothing applied is out of sight.\n  const chips = Object.entries(LABELS)\n    .filter(([key]) => value[key as keyof Filters] !== \"\")\n    .map(([key, f]) => ({\n      value: key,\n      label: `${f.label}: ${f.options.find((o) => o.value === value[key as keyof Filters])?.label ?? \"\"}`,\n    }));\n  if (value.q) chips.unshift({ value: \"q\", label: `Search: ${value.q}` });\n  const hiddenApplied = MORE.filter((f) => value[f.key] !== \"\").length;\n\n  return (\n    <FilterBar\n      search={{ value: value.q, onValueChange: (v) => set(\"q\", v), placeholder: \"Search orders\", ariaLabel: \"Search orders\" }}\n      // The 2–4 most-used filters, INLINE. Typed filters wire each caption as the real <label>.\n      filters={[\n        { value: \"status\", label: \"Status\", options: STATUS, selected: value.status, onSelectedChange: (v) => set(\"status\", v), placeholder: \"All\" },\n        { value: \"owner\", label: \"Owner\", options: OWNER, selected: value.owner, onSelectedChange: (v) => set(\"owner\", v), placeholder: \"Anyone\" },\n      ]}\n      chips={chips}\n      onChipRemove={(key) => set(key as keyof Filters, \"\")}\n      hasActiveFilters={chips.length > 0}\n      onClear={() => onValueChange(NO_FILTERS)}\n      resultCount={resultCount}\n    >\n      {/* Children render after the typed filters, before the reset: ONE \"More filters\" control.\n          count = hidden filters applied (0 renders nothing), so the closed sheet still says so. */}\n      <Sheet open={moreOpen} onOpenChange={setMoreOpen}>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\" count={hiddenApplied} countLabel=\"applied\">\n            <SlidersHorizontal aria-hidden=\"true\" />\n            More filters\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"right\">\n          <SheetHeader>\n            <SheetTitle>More filters</SheetTitle>\n            <SheetDescription>Applied filters also show as chips above the list.</SheetDescription>\n          </SheetHeader>\n          <SheetBody>\n            {/* A Sheet scrolls VERTICALLY; the fields stack. The same FilterBarGroup labels them. */}\n            <Flex direction=\"col\" gap=\"md\">\n              {MORE.map((f) => (\n                <FilterBarGroup key={f.key} label={f.label} controlId={`more-${f.key}`}>\n                  <Select value={value[f.key]} onValueChange={(v: string) => set(f.key, v)}>\n                    <SelectTrigger id={`more-${f.key}`}><SelectValue placeholder=\"All\" /></SelectTrigger>\n                    <SelectContent>\n                      {f.options.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}\n                    </SelectContent>\n                  </Select>\n                </FilterBarGroup>\n              ))}\n            </Flex>\n          </SheetBody>\n          <SheetFooter>\n            <SheetClose asChild><Button>Show results</Button></SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </FilterBar>\n  );\n}\n// Phone width: the bar stacks (search, each filter, More filters, reset) and the chips wrap.\n// A row of filter CHIPS (ToggleGroup) takes `wrap` — it does not scroll sideways either.\n// Few filters (≤ 4)? Drop the Sheet: the plain bar in the data-table-page pattern is enough.",
+  "code": "// Research basis: Shopify Polaris Filters (\"include no more than 2 or 3 promoted filters\"; a\n// More button opens a sheet with the rest), Linear (one Filter menu), IBM Carbon filtering\n// (filters hidden in a drawer/menu show how many are applied), WCAG 2.2 SC 1.4.10 Reflow\n// (search fields and controls are not in the 2-D exception: they reflow, they do not scroll).\n//\n// RULE #51: a filter bar WRAPS — stacked below 640px, extra rows above — at every width.\n// ❌ FilterBar overflow=\"scroll\" (removed in 33.0.0), <ScrollArea orientation=\"horizontal\"> or an\n//    overflow-x-auto box around filters: the strip runs off-screen and clips its first label.\n// ✅ the common filters inline + ONE \"More filters\" Sheet for the rest + wrapping chips.\nimport { useState } from \"react\";\nimport { SlidersHorizontal } from \"lucide-react\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\";\nimport {\n  Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader,\n  SheetTitle, SheetTrigger,\n} from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { FilterBar, FilterBarGroup } from \"@godxjp/ui/navigation\";\n\ntype Option = { value: string; label: string };\ntype Filters = Record<\"q\" | \"status\" | \"owner\" | \"region\" | \"channel\" | \"period\", string>;\nexport const NO_FILTERS: Filters = { q: \"\", status: \"\", owner: \"\", region: \"\", channel: \"\", period: \"\" };\n\nconst STATUS: Option[] = [{ value: \"open\", label: \"Open\" }, { value: \"paid\", label: \"Paid\" }, { value: \"void\", label: \"Void\" }];\nconst OWNER: Option[] = [{ value: \"me\", label: \"Me\" }, { value: \"team\", label: \"My team\" }];\n// Everything people reach for less often. Order = the order of the sheet.\nconst MORE: { key: \"region\" | \"channel\" | \"period\"; label: string; options: Option[] }[] = [\n  { key: \"region\", label: \"Region\", options: [{ value: \"kanto\", label: \"Kanto\" }, { value: \"kansai\", label: \"Kansai\" }] },\n  { key: \"channel\", label: \"Sales channel\", options: [{ value: \"web\", label: \"Web\" }, { value: \"store\", label: \"Store\" }] },\n  { key: \"period\", label: \"Period\", options: [{ value: \"month\", label: \"This month\" }, { value: \"quarter\", label: \"This quarter\" }] },\n];\nconst LABELS: Record<string, { label: string; options: Option[] }> = {\n  status: { label: \"Status\", options: STATUS },\n  owner: { label: \"Owner\", options: OWNER },\n  ...Object.fromEntries(MORE.map((f) => [f.key, f])),\n};\n\nexport function OrderFilters({ value, onValueChange, resultCount }: {\n  value: Filters; onValueChange: (next: Filters) => void; resultCount: number;\n}) {\n  const [moreOpen, setMoreOpen] = useState(false);\n  const set = (key: keyof Filters, v: string) => onValueChange({ ...value, [key]: v });\n\n  // ONE chip per applied filter — inline AND hidden ones, so nothing applied is out of sight.\n  const chips = Object.entries(LABELS)\n    .filter(([key]) => value[key as keyof Filters] !== \"\")\n    .map(([key, f]) => ({\n      value: key,\n      label: `${f.label}: ${f.options.find((o) => o.value === value[key as keyof Filters])?.label ?? \"\"}`,\n    }));\n  if (value.q) chips.unshift({ value: \"q\", label: `Search: ${value.q}` });\n  const hiddenApplied = MORE.filter((f) => value[f.key] !== \"\").length;\n\n  return (\n    <FilterBar\n      search={{ value: value.q, onValueChange: (v) => set(\"q\", v), placeholder: \"Search orders\", ariaLabel: \"Search orders\" }}\n      // The 2–4 most-used filters, INLINE. Typed filters wire each caption as the real <label>.\n      filters={[\n        { value: \"status\", label: \"Status\", options: STATUS, selected: value.status, onSelectedChange: (v) => set(\"status\", v), placeholder: \"All\" },\n        { value: \"owner\", label: \"Owner\", options: OWNER, selected: value.owner, onSelectedChange: (v) => set(\"owner\", v), placeholder: \"Anyone\" },\n      ]}\n      chips={chips}\n      onChipRemove={(key) => set(key as keyof Filters, \"\")}\n      hasActiveFilters={chips.length > 0}\n      onClear={() => onValueChange(NO_FILTERS)}\n      resultCount={resultCount}\n    >\n      {/* Children render after the typed filters, before the reset: ONE \"More filters\" control.\n          count = hidden filters applied, so the closed sheet still says so. Button paints a 0 pill by\n          default (showZero = true) — showZero={false} hides it when nothing hidden is applied (#1333). */}\n      <Sheet open={moreOpen} onOpenChange={setMoreOpen}>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\" count={hiddenApplied} showZero={false} countLabel=\"applied\">\n            <SlidersHorizontal aria-hidden=\"true\" />\n            More filters\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"right\">\n          <SheetHeader>\n            <SheetTitle>More filters</SheetTitle>\n            <SheetDescription>Applied filters also show as chips above the list.</SheetDescription>\n          </SheetHeader>\n          <SheetBody>\n            {/* A Sheet scrolls VERTICALLY; the fields stack. The same FilterBarGroup labels them. */}\n            <Flex direction=\"col\" gap=\"md\">\n              {MORE.map((f) => (\n                <FilterBarGroup key={f.key} label={f.label} controlId={`more-${f.key}`}>\n                  <Select value={value[f.key]} onValueChange={(v: string) => set(f.key, v)}>\n                    <SelectTrigger id={`more-${f.key}`}><SelectValue placeholder=\"All\" /></SelectTrigger>\n                    <SelectContent>\n                      {f.options.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}\n                    </SelectContent>\n                  </Select>\n                </FilterBarGroup>\n              ))}\n            </Flex>\n          </SheetBody>\n          <SheetFooter>\n            <SheetClose asChild><Button>Show results</Button></SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </FilterBar>\n  );\n}\n// Phone width: the bar stacks (search, each filter, More filters, reset) and the chips wrap.\n// A row of filter CHIPS (ToggleGroup) takes `wrap` — it does not scroll sideways either.\n// Few filters (≤ 4)? Drop the Sheet: the plain bar in the data-table-page pattern is enough.",
   "name": "list-filters",
   "tagline": "A list page with MANY filters (cardinal rule #51) — FilterBar WRAPS; the 2–4 most-used filters stay inline, the rest sit behind ONE 'More filters' Button (count = hidden filters applied) that opens a Sheet; every applied filter is a removable chip. Never a sideways-scrolling strip.",
   "tags": [

package/agent/patterns.json

@@ -280,7 +280,7 @@
       "advanced-filters",
       "add-filter"
     ],
-    "code": "// Research basis: Shopify Polaris Filters (\"include no more than 2 or 3 promoted filters\"; a\n// More button opens a sheet with the rest), Linear (one Filter menu), IBM Carbon filtering\n// (filters hidden in a drawer/menu show how many are applied), WCAG 2.2 SC 1.4.10 Reflow\n// (search fields and controls are not in the 2-D exception: they reflow, they do not scroll).\n//\n// RULE #51: a filter bar WRAPS — stacked below 640px, extra rows above — at every width.\n// ❌ FilterBar overflow=\"scroll\" (removed in 33.0.0), <ScrollArea orientation=\"horizontal\"> or an\n//    overflow-x-auto box around filters: the strip runs off-screen and clips its first label.\n// ✅ the common filters inline + ONE \"More filters\" Sheet for the rest + wrapping chips.\nimport { useState } from \"react\";\nimport { SlidersHorizontal } from \"lucide-react\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\";\nimport {\n  Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader,\n  SheetTitle, SheetTrigger,\n} from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { FilterBar, FilterBarGroup } from \"@godxjp/ui/navigation\";\n\ntype Option = { value: string; label: string };\ntype Filters = Record<\"q\" | \"status\" | \"owner\" | \"region\" | \"channel\" | \"period\", string>;\nexport const NO_FILTERS: Filters = { q: \"\", status: \"\", owner: \"\", region: \"\", channel: \"\", period: \"\" };\n\nconst STATUS: Option[] = [{ value: \"open\", label: \"Open\" }, { value: \"paid\", label: \"Paid\" }, { value: \"void\", label: \"Void\" }];\nconst OWNER: Option[] = [{ value: \"me\", label: \"Me\" }, { value: \"team\", label: \"My team\" }];\n// Everything people reach for less often. Order = the order of the sheet.\nconst MORE: { key: \"region\" | \"channel\" | \"period\"; label: string; options: Option[] }[] = [\n  { key: \"region\", label: \"Region\", options: [{ value: \"kanto\", label: \"Kanto\" }, { value: \"kansai\", label: \"Kansai\" }] },\n  { key: \"channel\", label: \"Sales channel\", options: [{ value: \"web\", label: \"Web\" }, { value: \"store\", label: \"Store\" }] },\n  { key: \"period\", label: \"Period\", options: [{ value: \"month\", label: \"This month\" }, { value: \"quarter\", label: \"This quarter\" }] },\n];\nconst LABELS: Record<string, { label: string; options: Option[] }> = {\n  status: { label: \"Status\", options: STATUS },\n  owner: { label: \"Owner\", options: OWNER },\n  ...Object.fromEntries(MORE.map((f) => [f.key, f])),\n};\n\nexport function OrderFilters({ value, onValueChange, resultCount }: {\n  value: Filters; onValueChange: (next: Filters) => void; resultCount: number;\n}) {\n  const [moreOpen, setMoreOpen] = useState(false);\n  const set = (key: keyof Filters, v: string) => onValueChange({ ...value, [key]: v });\n\n  // ONE chip per applied filter — inline AND hidden ones, so nothing applied is out of sight.\n  const chips = Object.entries(LABELS)\n    .filter(([key]) => value[key as keyof Filters] !== \"\")\n    .map(([key, f]) => ({\n      value: key,\n      label: `${f.label}: ${f.options.find((o) => o.value === value[key as keyof Filters])?.label ?? \"\"}`,\n    }));\n  if (value.q) chips.unshift({ value: \"q\", label: `Search: ${value.q}` });\n  const hiddenApplied = MORE.filter((f) => value[f.key] !== \"\").length;\n\n  return (\n    <FilterBar\n      search={{ value: value.q, onValueChange: (v) => set(\"q\", v), placeholder: \"Search orders\", ariaLabel: \"Search orders\" }}\n      // The 2–4 most-used filters, INLINE. Typed filters wire each caption as the real <label>.\n      filters={[\n        { value: \"status\", label: \"Status\", options: STATUS, selected: value.status, onSelectedChange: (v) => set(\"status\", v), placeholder: \"All\" },\n        { value: \"owner\", label: \"Owner\", options: OWNER, selected: value.owner, onSelectedChange: (v) => set(\"owner\", v), placeholder: \"Anyone\" },\n      ]}\n      chips={chips}\n      onChipRemove={(key) => set(key as keyof Filters, \"\")}\n      hasActiveFilters={chips.length > 0}\n      onClear={() => onValueChange(NO_FILTERS)}\n      resultCount={resultCount}\n    >\n      {/* Children render after the typed filters, before the reset: ONE \"More filters\" control.\n          count = hidden filters applied (0 renders nothing), so the closed sheet still says so. */}\n      <Sheet open={moreOpen} onOpenChange={setMoreOpen}>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\" count={hiddenApplied} countLabel=\"applied\">\n            <SlidersHorizontal aria-hidden=\"true\" />\n            More filters\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"right\">\n          <SheetHeader>\n            <SheetTitle>More filters</SheetTitle>\n            <SheetDescription>Applied filters also show as chips above the list.</SheetDescription>\n          </SheetHeader>\n          <SheetBody>\n            {/* A Sheet scrolls VERTICALLY; the fields stack. The same FilterBarGroup labels them. */}\n            <Flex direction=\"col\" gap=\"md\">\n              {MORE.map((f) => (\n                <FilterBarGroup key={f.key} label={f.label} controlId={`more-${f.key}`}>\n                  <Select value={value[f.key]} onValueChange={(v: string) => set(f.key, v)}>\n                    <SelectTrigger id={`more-${f.key}`}><SelectValue placeholder=\"All\" /></SelectTrigger>\n                    <SelectContent>\n                      {f.options.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}\n                    </SelectContent>\n                  </Select>\n                </FilterBarGroup>\n              ))}\n            </Flex>\n          </SheetBody>\n          <SheetFooter>\n            <SheetClose asChild><Button>Show results</Button></SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </FilterBar>\n  );\n}\n// Phone width: the bar stacks (search, each filter, More filters, reset) and the chips wrap.\n// A row of filter CHIPS (ToggleGroup) takes `wrap` — it does not scroll sideways either.\n// Few filters (≤ 4)? Drop the Sheet: the plain bar in the data-table-page pattern is enough.",
+    "code": "// Research basis: Shopify Polaris Filters (\"include no more than 2 or 3 promoted filters\"; a\n// More button opens a sheet with the rest), Linear (one Filter menu), IBM Carbon filtering\n// (filters hidden in a drawer/menu show how many are applied), WCAG 2.2 SC 1.4.10 Reflow\n// (search fields and controls are not in the 2-D exception: they reflow, they do not scroll).\n//\n// RULE #51: a filter bar WRAPS — stacked below 640px, extra rows above — at every width.\n// ❌ FilterBar overflow=\"scroll\" (removed in 33.0.0), <ScrollArea orientation=\"horizontal\"> or an\n//    overflow-x-auto box around filters: the strip runs off-screen and clips its first label.\n// ✅ the common filters inline + ONE \"More filters\" Sheet for the rest + wrapping chips.\nimport { useState } from \"react\";\nimport { SlidersHorizontal } from \"lucide-react\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\";\nimport {\n  Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader,\n  SheetTitle, SheetTrigger,\n} from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { FilterBar, FilterBarGroup } from \"@godxjp/ui/navigation\";\n\ntype Option = { value: string; label: string };\ntype Filters = Record<\"q\" | \"status\" | \"owner\" | \"region\" | \"channel\" | \"period\", string>;\nexport const NO_FILTERS: Filters = { q: \"\", status: \"\", owner: \"\", region: \"\", channel: \"\", period: \"\" };\n\nconst STATUS: Option[] = [{ value: \"open\", label: \"Open\" }, { value: \"paid\", label: \"Paid\" }, { value: \"void\", label: \"Void\" }];\nconst OWNER: Option[] = [{ value: \"me\", label: \"Me\" }, { value: \"team\", label: \"My team\" }];\n// Everything people reach for less often. Order = the order of the sheet.\nconst MORE: { key: \"region\" | \"channel\" | \"period\"; label: string; options: Option[] }[] = [\n  { key: \"region\", label: \"Region\", options: [{ value: \"kanto\", label: \"Kanto\" }, { value: \"kansai\", label: \"Kansai\" }] },\n  { key: \"channel\", label: \"Sales channel\", options: [{ value: \"web\", label: \"Web\" }, { value: \"store\", label: \"Store\" }] },\n  { key: \"period\", label: \"Period\", options: [{ value: \"month\", label: \"This month\" }, { value: \"quarter\", label: \"This quarter\" }] },\n];\nconst LABELS: Record<string, { label: string; options: Option[] }> = {\n  status: { label: \"Status\", options: STATUS },\n  owner: { label: \"Owner\", options: OWNER },\n  ...Object.fromEntries(MORE.map((f) => [f.key, f])),\n};\n\nexport function OrderFilters({ value, onValueChange, resultCount }: {\n  value: Filters; onValueChange: (next: Filters) => void; resultCount: number;\n}) {\n  const [moreOpen, setMoreOpen] = useState(false);\n  const set = (key: keyof Filters, v: string) => onValueChange({ ...value, [key]: v });\n\n  // ONE chip per applied filter — inline AND hidden ones, so nothing applied is out of sight.\n  const chips = Object.entries(LABELS)\n    .filter(([key]) => value[key as keyof Filters] !== \"\")\n    .map(([key, f]) => ({\n      value: key,\n      label: `${f.label}: ${f.options.find((o) => o.value === value[key as keyof Filters])?.label ?? \"\"}`,\n    }));\n  if (value.q) chips.unshift({ value: \"q\", label: `Search: ${value.q}` });\n  const hiddenApplied = MORE.filter((f) => value[f.key] !== \"\").length;\n\n  return (\n    <FilterBar\n      search={{ value: value.q, onValueChange: (v) => set(\"q\", v), placeholder: \"Search orders\", ariaLabel: \"Search orders\" }}\n      // The 2–4 most-used filters, INLINE. Typed filters wire each caption as the real <label>.\n      filters={[\n        { value: \"status\", label: \"Status\", options: STATUS, selected: value.status, onSelectedChange: (v) => set(\"status\", v), placeholder: \"All\" },\n        { value: \"owner\", label: \"Owner\", options: OWNER, selected: value.owner, onSelectedChange: (v) => set(\"owner\", v), placeholder: \"Anyone\" },\n      ]}\n      chips={chips}\n      onChipRemove={(key) => set(key as keyof Filters, \"\")}\n      hasActiveFilters={chips.length > 0}\n      onClear={() => onValueChange(NO_FILTERS)}\n      resultCount={resultCount}\n    >\n      {/* Children render after the typed filters, before the reset: ONE \"More filters\" control.\n          count = hidden filters applied, so the closed sheet still says so. Button paints a 0 pill by\n          default (showZero = true) — showZero={false} hides it when nothing hidden is applied (#1333). */}\n      <Sheet open={moreOpen} onOpenChange={setMoreOpen}>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\" count={hiddenApplied} showZero={false} countLabel=\"applied\">\n            <SlidersHorizontal aria-hidden=\"true\" />\n            More filters\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"right\">\n          <SheetHeader>\n            <SheetTitle>More filters</SheetTitle>\n            <SheetDescription>Applied filters also show as chips above the list.</SheetDescription>\n          </SheetHeader>\n          <SheetBody>\n            {/* A Sheet scrolls VERTICALLY; the fields stack. The same FilterBarGroup labels them. */}\n            <Flex direction=\"col\" gap=\"md\">\n              {MORE.map((f) => (\n                <FilterBarGroup key={f.key} label={f.label} controlId={`more-${f.key}`}>\n                  <Select value={value[f.key]} onValueChange={(v: string) => set(f.key, v)}>\n                    <SelectTrigger id={`more-${f.key}`}><SelectValue placeholder=\"All\" /></SelectTrigger>\n                    <SelectContent>\n                      {f.options.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}\n                    </SelectContent>\n                  </Select>\n                </FilterBarGroup>\n              ))}\n            </Flex>\n          </SheetBody>\n          <SheetFooter>\n            <SheetClose asChild><Button>Show results</Button></SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </FilterBar>\n  );\n}\n// Phone width: the bar stacks (search, each filter, More filters, reset) and the chips wrap.\n// A row of filter CHIPS (ToggleGroup) takes `wrap` — it does not scroll sideways either.\n// Few filters (≤ 4)? Drop the Sheet: the plain bar in the data-table-page pattern is enough.",
     "name": "list-filters",
     "tagline": "A list page with MANY filters (cardinal rule #51) — FilterBar WRAPS; the 2–4 most-used filters stay inline, the rest sit behind ONE 'More filters' Button (count = hidden filters applied) that opens a Sheet; every applied filter is a removable chip. Never a sideways-scrolling strip.",
     "tags": [

package/agent/tokens.json

@@ -6503,6 +6503,18 @@
     "tier": "component",
     "value": "16rem"
   },
+  {
+    "description": "TranslatableInput / TranslatableTextarea (gh#1336). The rhythm between the locale tab strip and the field it switches — a service aligning its forms to a tighter grid sets it once. 4px",
+    "name": "--translatable-field-gap",
+    "tier": "component",
+    "value": "var(--space-1)"
+  },
+  {
+    "description": "The error mark beside a locale's name on its tab. The ICON scale one step below the tab's own 14px text, so it reads as a mark on the label rather than a second word. 12px",
+    "name": "--translatable-field-error-icon-size",
+    "tier": "component",
+    "value": "var(--icon-size-xs)"
+  },
   {
     "description": "Width of the label column when <Descriptions layout=\"horizontal\">. Labels align to this shared column so the values line up (the horizontal-detail look, mirroring <Form layout>). A rem value gives a fixed aligned column; set `max-content` to size each label to its text. (rule #44/#45 — a service theme tunes it here instead of forking CSS.)",
     "name": "--descriptions-label-width",

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.0",
+  "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