payload-intl 1.2.2 → 1.2.4

package/dist/components/inputs/variables/editors/PluralVariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import { TYPE } from '@formatjs/icu-messageformat-parser';\nimport { IconX } from '@tabler/icons-react';\nimport { Popover } from 'radix-ui';\nimport { Fragment, useImperativeHandle, useMemo } from 'react';\nimport { Controller, useFieldArray, useForm } from 'react-hook-form';\nimport type { PluralElement } from '@/types';\n\nimport { parseICUMessage, serializeICUMessage } from '@/utils/icu-tranform';\n\nimport styles from './PluralVariableEditor.module.css';\n\nconst NAMED_PLURAL_OPTIONS = ['zero', 'one', 'two', 'few', 'many'] as const;\n\nexport interface PluralVariableEditorProps {\n  variableName: string;\n  element: PluralElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\n// TODO add support for selectordinal (\"pluralType\": \"ordinal\")\n\nexport function PluralVariableEditor({\n  variableName,\n  element,\n  ref,\n}: PluralVariableEditorProps) {\n  const config = useMemo<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n  }>(() => {\n    const { other, ...options } = element?.options ?? {};\n    return {\n      offset: element?.offset ?? 0,\n      options: Object.entries(options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n      other: serializeICUMessage(other ? other.value : []),\n    };\n  }, [element]);\n\n  const { control, register, getValues } = useForm<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n    customValue?: number;\n  }>({\n    defaultValues: config,\n  });\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      const values = getValues();\n      const updatedElement: PluralElement = {\n        type: TYPE.plural,\n        value: variableName,\n        offset: values.offset,\n        pluralType: element?.pluralType ?? 'cardinal',\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      return serializeICUMessage([updatedElement]);\n    },\n  }));\n\n  const options = useFieldArray({\n    control,\n    name: 'options',\n  });\n\n  return (\n    <div className={styles.root}>\n      <fieldset className={styles.optionsFieldset}>\n        <legend>Options</legend>\n        {options.fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <label htmlFor={`options.${index}`}>{field.name}</label>\n            {/* // TODO add support for variable mentions */}\n            <input\n              className={styles.input}\n              type=\"text\"\n              {...register(`options.${index}.content`, { required: true })}\n            />\n            <button\n              className={styles.removeButton}\n              onClick={() => options.remove(index)}\n              type=\"button\"\n            >\n              <IconX size={16} />\n            </button>\n          </Fragment>\n        ))}\n\n        <label htmlFor=\"other\">other</label>\n        {/* // TODO add support for variable mentions */}\n        <input\n          className={styles.inputSpan2}\n          type=\"text\"\n          {...register('other', { required: true })}\n        />\n      </fieldset>\n      <div className={styles.controlsGrid}>\n        <label className={styles.offsetLabel}>\n          offset\n          <input\n            className={styles.offsetInput}\n            placeholder=\"0\"\n            type=\"numeric\"\n            {...register('offset')}\n          />\n        </label>\n        <Popover.Root>\n          <Popover.Trigger>Add Option</Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content className={styles.popoverContent} sideOffset={4}>\n              <div className={styles.optionsList}>\n                {NAMED_PLURAL_OPTIONS.filter((option) =>\n                  options.fields.every((field) => field.name !== option),\n                ).map((option) => (\n                  <Popover.Close\n                    className={styles.optionItem}\n                    key={option}\n                    onClick={() => {\n                      // TODO ensure the fields are always in the same order as staticPluralOptions\n                      options.append(\n                        {\n                          name: option,\n                          content: '',\n                        },\n                        {\n                          shouldFocus: true,\n                        },\n                      );\n                    }}\n                  >\n                    {option}\n                  </Popover.Close>\n                ))}\n              </div>\n\n              <div className={styles.customInputGroup}>\n                <label htmlFor=\"customValue\">custom</label>\n                <Controller\n                  control={control}\n                  name=\"customValue\"\n                  render={({ field }) => (\n                    <input\n                      className={styles.customInput}\n                      min={0}\n                      onChange={({ currentTarget: { value } }) => {\n                        const number = Number(value);\n                        if (Number.isNaN(number)) return;\n                        if (number < 0) return;\n                        field.onChange(number);\n                      }}\n                      onKeyDown={(e) => {\n                        if (e.key !== 'Enter') return;\n                        if (field.value === undefined) return;\n                        const isUnique = !options.fields.some(\n                          (existingField) =>\n                            existingField.name === `=${field.value}`,\n                        );\n                        if (!isUnique) return; // TODO maybe show error?\n                        options.append(\n                          {\n                            name: `=${field.value}`,\n                            content: '',\n                          },\n                          {\n                            shouldFocus: true,\n                          },\n                        );\n                        field.onChange(undefined);\n                      }}\n                      placeholder=\"=0\"\n                      type=\"numeric\"\n                      value={field.value ?? ''}\n                    />\n                  )}\n                />\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </div>\n  );\n}\n"],"names":["TYPE","IconX","Popover","Fragment","useImperativeHandle","useMemo","Controller","useFieldArray","useForm","parseICUMessage","serializeICUMessage","styles","NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","other","options","offset","Object","entries","map","name","option","content","value","control","register","getValues","defaultValues","getValue","values","updatedElement","type","plural","pluralType","fromEntries","div","className","root","fieldset","optionsFieldset","legend","fields","field","index","label","htmlFor","input","required","button","removeButton","onClick","remove","size","id","inputSpan2","controlsGrid","offsetLabel","offsetInput","placeholder","Root","Trigger","Portal","Content","popoverContent","sideOffset","optionsList","filter","every","Close","optionItem","append","shouldFocus","customInputGroup","render","customInput","min","onChange","currentTarget","number","Number","isNaN","onKeyDown","e","key","undefined","isUnique","some","existingField"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import { Popover } from '@base-ui/react/popover';\nimport { TYPE } from '@formatjs/icu-messageformat-parser';\nimport { IconX } from '@tabler/icons-react';\nimport { Fragment, useImperativeHandle, useMemo } from 'react';\nimport { Controller, useFieldArray, useForm } from 'react-hook-form';\nimport type { PluralElement } from '@/types';\n\nimport { parseICUMessage, serializeICUMessage } from '@/utils/icu-tranform';\n\nimport styles from './PluralVariableEditor.module.css';\n\nconst NAMED_PLURAL_OPTIONS = ['zero', 'one', 'two', 'few', 'many'] as const;\n\nexport interface PluralVariableEditorProps {\n  variableName: string;\n  element: PluralElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\n// TODO add support for selectordinal (\"pluralType\": \"ordinal\")\n\nexport function PluralVariableEditor({\n  variableName,\n  element,\n  ref,\n}: PluralVariableEditorProps) {\n  const config = useMemo<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n  }>(() => {\n    const { other, ...options } = element?.options ?? {};\n    return {\n      offset: element?.offset ?? 0,\n      options: Object.entries(options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n      other: serializeICUMessage(other ? other.value : []),\n    };\n  }, [element]);\n\n  const { control, register, getValues } = useForm<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n    customValue?: number;\n  }>({\n    defaultValues: config,\n  });\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      const values = getValues();\n      const updatedElement: PluralElement = {\n        type: TYPE.plural,\n        value: variableName,\n        offset: values.offset,\n        pluralType: element?.pluralType ?? 'cardinal',\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      return serializeICUMessage([updatedElement]);\n    },\n  }));\n\n  const options = useFieldArray({\n    control,\n    name: 'options',\n  });\n\n  return (\n    <div className={styles.root}>\n      <fieldset className={styles.optionsFieldset}>\n        <legend>Options</legend>\n        {options.fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <label htmlFor={`options.${index}`}>{field.name}</label>\n            {/* // TODO add support for variable mentions */}\n            <input\n              className={styles.input}\n              type=\"text\"\n              {...register(`options.${index}.content`, { required: true })}\n            />\n            <button\n              className={styles.removeButton}\n              onClick={() => options.remove(index)}\n              type=\"button\"\n            >\n              <IconX size={16} />\n            </button>\n          </Fragment>\n        ))}\n\n        <label htmlFor=\"other\">other</label>\n        {/* // TODO add support for variable mentions */}\n        <input\n          className={styles.inputSpan2}\n          type=\"text\"\n          {...register('other', { required: true })}\n        />\n      </fieldset>\n      <div className={styles.controlsGrid}>\n        <label className={styles.offsetLabel}>\n          offset\n          <input\n            className={styles.offsetInput}\n            placeholder=\"0\"\n            type=\"numeric\"\n            {...register('offset')}\n          />\n        </label>\n        <Popover.Root>\n          <Popover.Trigger>Add Option</Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Positioner sideOffset={4}>\n              <Popover.Popup className={styles.popoverContent}>\n                <div className={styles.optionsList}>\n                  {NAMED_PLURAL_OPTIONS.filter((option) =>\n                    options.fields.every((field) => field.name !== option),\n                  ).map((option) => (\n                    <Popover.Close\n                      className={styles.optionItem}\n                      key={option}\n                      onClick={() => {\n                        // TODO ensure the fields are always in the same order as staticPluralOptions\n                        options.append(\n                          {\n                            name: option,\n                            content: '',\n                          },\n                          {\n                            shouldFocus: true,\n                          },\n                        );\n                      }}\n                    >\n                      {option}\n                    </Popover.Close>\n                  ))}\n                </div>\n\n                <div className={styles.customInputGroup}>\n                  <label htmlFor=\"customValue\">custom</label>\n                  <Controller\n                    control={control}\n                    name=\"customValue\"\n                    render={({ field }) => (\n                      <input\n                        className={styles.customInput}\n                        min={0}\n                        onChange={({ currentTarget: { value } }) => {\n                          const number = Number(value);\n                          if (Number.isNaN(number)) return;\n                          if (number < 0) return;\n                          field.onChange(number);\n                        }}\n                        onKeyDown={(e) => {\n                          if (e.key !== 'Enter') return;\n                          if (field.value === undefined) return;\n                          const isUnique = !options.fields.some(\n                            (existingField) =>\n                              existingField.name === `=${field.value}`,\n                          );\n                          if (!isUnique) return; // TODO maybe show error?\n                          options.append(\n                            {\n                              name: `=${field.value}`,\n                              content: '',\n                            },\n                            {\n                              shouldFocus: true,\n                            },\n                          );\n                          field.onChange(undefined);\n                        }}\n                        placeholder=\"=0\"\n                        type=\"numeric\"\n                        value={field.value ?? ''}\n                      />\n                    )}\n                  />\n                </div>\n              </Popover.Popup>\n            </Popover.Positioner>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </div>\n  );\n}\n"],"names":["Popover","TYPE","IconX","Fragment","useImperativeHandle","useMemo","Controller","useFieldArray","useForm","parseICUMessage","serializeICUMessage","styles","NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","other","options","offset","Object","entries","map","name","option","content","value","control","register","getValues","defaultValues","getValue","values","updatedElement","type","plural","pluralType","fromEntries","div","className","root","fieldset","optionsFieldset","legend","fields","field","index","label","htmlFor","input","required","button","removeButton","onClick","remove","size","id","inputSpan2","controlsGrid","offsetLabel","offsetInput","placeholder","Root","Trigger","Portal","Positioner","sideOffset","Popup","popoverContent","optionsList","filter","every","Close","optionItem","append","shouldFocus","customInputGroup","render","customInput","min","onChange","currentTarget","number","Number","isNaN","onKeyDown","e","key","undefined","isUnique","some","existingField"],"mappings":"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"}

package/dist/components/inputs/variables/editors/PluralVariableEditor.module.css

@@ -68,9 +68,9 @@
 
 .popoverContent {
   z-index: 50;
-  max-height: var(--radix-dropdown-menu-content-available-height);
+  max-height: var(--available-height);
   min-width: 8rem;
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  transform-origin: var(--transform-origin);
   overflow-y: auto;
   overflow-x: hidden;
   border-radius: var(--style-radius-m);
@@ -81,11 +81,11 @@
     0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
-.popoverContent[data-state="open"] {
+.popoverContent[data-open] {
   animation: popoverIn 150ms ease-out;
 }
 
-.popoverContent[data-state="closed"] {
+.popoverContent[data-closed] {
   animation: popoverOut 150ms ease-in;
 }
 

package/dist/components/inputs/variables/editors/TemporalVariableEditor.d.ts

@@ -0,0 +1,11 @@
+import type { DateElement, TimeElement } from '../../../../types';
+export interface TemporalVariableEditorProps {
+    type: 'date' | 'time';
+    name: string;
+    element: DateElement | TimeElement | undefined;
+    ref: React.Ref<{
+        getValue: () => string;
+    }>;
+}
+export declare function TemporalVariableEditor({ type, ref, }: TemporalVariableEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TemporalVariableEditor.d.ts.map

package/dist/components/inputs/variables/editors/TemporalVariableEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemporalVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/editors/TemporalVariableEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAExD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC;IAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;QAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,GAAG,GACJ,EAAE,2BAA2B,2CAS7B"}

package/dist/components/inputs/variables/editors/{DateVariableEditor.js → TemporalVariableEditor.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useImperativeHandle } from 'react';
-export function DateVariableEditor({ ref }) {
+export function TemporalVariableEditor({ type, ref }) {
     useImperativeHandle(ref, ()=>({
             getValue: ()=>{
                 // TODO
@@ -8,8 +8,8 @@ export function DateVariableEditor({ ref }) {
             }
         }));
     return /*#__PURE__*/ _jsx(_Fragment, {
-        children: "DateElementEditor"
+        children: type === 'date' ? 'DateElementEditor' : 'TimeElementEditor'
     });
 }
 
-//# sourceMappingURL=DateVariableEditor.js.map
+//# sourceMappingURL=TemporalVariableEditor.js.map

package/dist/components/inputs/variables/editors/TemporalVariableEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/variables/editors/TemporalVariableEditor.tsx"],"sourcesContent":["import { useImperativeHandle } from 'react';\nimport type { DateElement, TimeElement } from '@/types';\n\nexport interface TemporalVariableEditorProps {\n  type: 'date' | 'time';\n  name: string;\n  element: DateElement | TimeElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\nexport function TemporalVariableEditor({\n  type,\n  ref,\n}: TemporalVariableEditorProps) {\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      // TODO\n      return '';\n    },\n  }));\n\n  return <>{type === 'date' ? 'DateElementEditor' : 'TimeElementEditor'}</>;\n}\n"],"names":["useImperativeHandle","TemporalVariableEditor","type","ref","getValue"],"mappings":";AAAA,SAASA,mBAAmB,QAAQ,QAAQ;AAU5C,OAAO,SAASC,uBAAuB,EACrCC,IAAI,EACJC,GAAG,EACyB;IAC5BH,oBAAoBG,KAAK,IAAO,CAAA;YAC9BC,UAAU;gBACR,OAAO;gBACP,OAAO;YACT;QACF,CAAA;IAEA,qBAAO;kBAAGF,SAAS,SAAS,sBAAsB;;AACpD"}

package/dist/components/inputs/variables/pickers/NumericVariableEditor.d.ts

@@ -0,0 +1,7 @@
+import type { NumberElement, PluralElement } from '../../../../types';
+export interface NumericVariableEditorProps {
+    element: NumberElement | PluralElement;
+    onUpdate: (value: string) => void;
+}
+export declare function NumericVariableEditor({ element, onUpdate, }: NumericVariableEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NumericVariableEditor.d.ts.map

package/dist/components/inputs/variables/pickers/{NumericVariablePicker.d.ts.map → NumericVariableEditor.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"NumericVariablePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/pickers/NumericVariablePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAe5D,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,aAAa,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,QAAQ,GACT,EAAE,0BAA0B,2CA8C5B"}
+{"version":3,"file":"NumericVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/pickers/NumericVariableEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAe5D,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,aAAa,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,QAAQ,GACT,EAAE,0BAA0B,2CA6C5B"}

package/dist/components/inputs/variables/pickers/{NumericVariablePicker.js → NumericVariableEditor.js}

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToggleGroup } from 'radix-ui';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { useEffect, useRef, useState } from 'react';
 import { isNumberElement, isPluralElement } from '../../../../utils/guards';
 import { PluralVariableEditor } from '../editors/PluralVariableEditor';
-import styles from './NumericVariablePicker.module.css';
+import styles from './NumericVariableEditor.module.css';
 const NUMERIC_TYPES = [
     'number',
     'plural'
 ];
-export function NumericVariablePicker({ element, onUpdate }) {
+export function NumericVariableEditor({ element, onUpdate }) {
     const [type, setType] = useState(()=>{
         if (isNumberElement(element)) return 'number';
         if (isPluralElement(element)) return 'plural';
@@ -24,12 +25,17 @@ export function NumericVariablePicker({ element, onUpdate }) {
     }, []);
     return /*#__PURE__*/ _jsxs("div", {
         children: [
-            /*#__PURE__*/ _jsx(ToggleGroup.Root, {
+            /*#__PURE__*/ _jsx(ToggleGroup, {
                 className: styles.toggleGroup,
-                onValueChange: (value)=>setType(value),
-                type: "single",
-                value: type,
-                children: NUMERIC_TYPES.map((type)=>/*#__PURE__*/ _jsx(ToggleGroup.Item, {
+                onValueChange: (newValue)=>{
+                    if (newValue.length === 0) return;
+                    const next = newValue.find((v)=>v !== type);
+                    if (next) setType(next);
+                },
+                value: type ? [
+                    type
+                ] : [],
+                children: NUMERIC_TYPES.map((type)=>/*#__PURE__*/ _jsx(Toggle, {
                         className: styles.toggleItem,
                         value: type,
                         children: type
@@ -47,4 +53,4 @@ export function NumericVariablePicker({ element, onUpdate }) {
     });
 }
 
-//# sourceMappingURL=NumericVariablePicker.js.map
+//# sourceMappingURL=NumericVariableEditor.js.map

package/dist/components/inputs/variables/pickers/NumericVariableEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/variables/pickers/NumericVariableEditor.tsx"],"sourcesContent":["import { Toggle } from '@base-ui/react/toggle';\nimport { ToggleGroup } from '@base-ui/react/toggle-group';\nimport { useEffect, useRef, useState } from 'react';\nimport type { NumberElement, PluralElement } from '@/types';\n\nimport { isNumberElement, isPluralElement } from '@/utils/guards';\n\nimport { PluralVariableEditor } from '../editors/PluralVariableEditor';\nimport styles from './NumericVariableEditor.module.css';\n\nconst NUMERIC_TYPES = [\n  'number',\n  'plural',\n  // \"selectordinal\"\n] as const;\n\ntype NumericType = (typeof NUMERIC_TYPES)[number];\n\nexport interface NumericVariableEditorProps {\n  element: NumberElement | PluralElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function NumericVariableEditor({\n  element,\n  onUpdate,\n}: NumericVariableEditorProps) {\n  const [type, setType] = useState<NumericType | undefined>(() => {\n    if (isNumberElement(element)) return 'number';\n    if (isPluralElement(element)) return 'plural';\n    return undefined;\n  });\n  const getValueRef = useRef<{ getValue: () => string }>(null);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent\n  useEffect(() => {\n    return () => {\n      if (!getValueRef.current) return;\n      onUpdate(getValueRef.current.getValue());\n    };\n  }, []);\n\n  return (\n    <div>\n      <ToggleGroup\n        className={styles.toggleGroup}\n        onValueChange={(newValue) => {\n          if (newValue.length === 0) return;\n          const next = newValue.find((v) => v !== type);\n          if (next) setType(next as NumericType);\n        }}\n        value={type ? [type] : []}\n      >\n        {NUMERIC_TYPES.map((type) => (\n          <Toggle className={styles.toggleItem} key={type} value={type}>\n            {type}\n          </Toggle>\n        ))}\n      </ToggleGroup>\n\n      <div className={styles.content}>\n        {type === 'plural' && (\n          <PluralVariableEditor\n            element={isPluralElement(element) ? element : undefined}\n            ref={getValueRef}\n            variableName={element.value}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["Toggle","ToggleGroup","useEffect","useRef","useState","isNumberElement","isPluralElement","PluralVariableEditor","styles","NUMERIC_TYPES","NumericVariableEditor","element","onUpdate","type","setType","undefined","getValueRef","current","getValue","div","className","toggleGroup","onValueChange","newValue","length","next","find","v","value","map","toggleItem","content","ref","variableName"],"mappings":";AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,eAAe,EAAEC,eAAe,QAAQ,iBAAiB;AAElE,SAASC,oBAAoB,QAAQ,kCAAkC;AACvE,OAAOC,YAAY,qCAAqC;AAExD,MAAMC,gBAAgB;IACpB;IACA;CAED;AASD,OAAO,SAASC,sBAAsB,EACpCC,OAAO,EACPC,QAAQ,EACmB;IAC3B,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAAkC;QACxD,IAAIC,gBAAgBM,UAAU,OAAO;QACrC,IAAIL,gBAAgBK,UAAU,OAAO;QACrC,OAAOI;IACT;IACA,MAAMC,cAAcb,OAAmC;IAEvD,0EAA0E;IAC1ED,UAAU;QACR,OAAO;YACL,IAAI,CAACc,YAAYC,OAAO,EAAE;YAC1BL,SAASI,YAAYC,OAAO,CAACC,QAAQ;QACvC;IACF,GAAG,EAAE;IAEL,qBACE,MAACC;;0BACC,KAAClB;gBACCmB,WAAWZ,OAAOa,WAAW;gBAC7BC,eAAe,CAACC;oBACd,IAAIA,SAASC,MAAM,KAAK,GAAG;oBAC3B,MAAMC,OAAOF,SAASG,IAAI,CAAC,CAACC,IAAMA,MAAMd;oBACxC,IAAIY,MAAMX,QAAQW;gBACpB;gBACAG,OAAOf,OAAO;oBAACA;iBAAK,GAAG,EAAE;0BAExBJ,cAAcoB,GAAG,CAAC,CAAChB,qBAClB,KAACb;wBAAOoB,WAAWZ,OAAOsB,UAAU;wBAAaF,OAAOf;kCACrDA;uBADwCA;;0BAM/C,KAACM;gBAAIC,WAAWZ,OAAOuB,OAAO;0BAC3BlB,SAAS,0BACR,KAACN;oBACCI,SAASL,gBAAgBK,WAAWA,UAAUI;oBAC9CiB,KAAKhB;oBACLiB,cAActB,QAAQiB,KAAK;;;;;AAMvC"}

package/dist/components/inputs/variables/pickers/{NumericVariablePicker.module.css → NumericVariableEditor.module.css}

@@ -8,16 +8,16 @@
   border: none;
 }
 
-.toggleItem[data-state="off"] {
+.toggleItem:not([data-pressed]) {
   cursor: pointer;
   opacity: 0.5;
 }
 
-.toggleItem[data-state="off"]:hover {
+.toggleItem:not([data-pressed]):hover {
   opacity: 1;
 }
 
-.toggleItem[data-state="on"] {
+.toggleItem[data-pressed] {
   background-color: var(--theme-elevation-800);
   color: var(--theme-elevation-0);
 }

package/dist/components/inputs/variables/pickers/TemporalVariablePicker.d.ts

@@ -0,0 +1,7 @@
+import type { DateElement, TimeElement } from '../../../../types';
+export interface TemporalVariablePickerProps {
+    element: DateElement | TimeElement;
+    onUpdate: (value: string) => void;
+}
+export declare function TemporalVariablePicker({ element, onUpdate, }: TemporalVariablePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TemporalVariablePicker.d.ts.map

package/dist/components/inputs/variables/pickers/TemporalVariablePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemporalVariablePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/pickers/TemporalVariablePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWxD,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,WAAW,GAAG,WAAW,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,QAAQ,GACT,EAAE,2BAA2B,2CAsD7B"}

package/dist/components/inputs/variables/pickers/TemporalVariablePicker.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { useEffect, useRef, useState } from 'react';
+import { isDateElement, isTimeElement } from '../../../../utils/guards';
+import { TemporalVariableEditor } from '../editors/TemporalVariableEditor';
+import styles from './TemporalVariablePicker.module.css';
+const TEMPORAL_TYPES = [
+    'date',
+    'time'
+];
+export function TemporalVariablePicker({ element, onUpdate }) {
+    const [type, setType] = useState(()=>{
+        if (isDateElement(element)) return 'date';
+        if (isTimeElement(element)) return 'time';
+        return undefined;
+    });
+    const getValueRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent
+    useEffect(()=>{
+        return ()=>{
+            if (!getValueRef.current) return;
+            onUpdate(getValueRef.current.getValue());
+        };
+    }, []);
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx(ToggleGroup, {
+                className: styles.toggleGroup,
+                onValueChange: (newValue)=>{
+                    if (newValue.length === 0) return;
+                    const next = newValue.find((v)=>v !== type);
+                    if (next) setType(next);
+                },
+                value: type ? [
+                    type
+                ] : [],
+                children: TEMPORAL_TYPES.map((type)=>/*#__PURE__*/ _jsx(Toggle, {
+                        className: styles.toggleItem,
+                        value: type,
+                        children: type
+                    }, type))
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: styles.content,
+                children: type && /*#__PURE__*/ _jsx(TemporalVariableEditor, {
+                    element: type === 'date' ? isDateElement(element) ? element : undefined : isTimeElement(element) ? element : undefined,
+                    name: element.value,
+                    ref: getValueRef,
+                    type: type
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TemporalVariablePicker.js.map

package/dist/components/inputs/variables/pickers/TemporalVariablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/variables/pickers/TemporalVariablePicker.tsx"],"sourcesContent":["import { Toggle } from '@base-ui/react/toggle';\nimport { ToggleGroup } from '@base-ui/react/toggle-group';\nimport { useEffect, useRef, useState } from 'react';\nimport type { DateElement, TimeElement } from '@/types';\n\nimport { isDateElement, isTimeElement } from '@/utils/guards';\n\nimport { TemporalVariableEditor } from '../editors/TemporalVariableEditor';\nimport styles from './TemporalVariablePicker.module.css';\n\nconst TEMPORAL_TYPES = ['date', 'time'] as const;\n\ntype TemporalType = (typeof TEMPORAL_TYPES)[number];\n\nexport interface TemporalVariablePickerProps {\n  element: DateElement | TimeElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TemporalVariablePicker({\n  element,\n  onUpdate,\n}: TemporalVariablePickerProps) {\n  const [type, setType] = useState<TemporalType | undefined>(() => {\n    if (isDateElement(element)) return 'date';\n    if (isTimeElement(element)) return 'time';\n    return undefined;\n  });\n  const getValueRef = useRef<{ getValue: () => string }>(null);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent\n  useEffect(() => {\n    return () => {\n      if (!getValueRef.current) return;\n      onUpdate(getValueRef.current.getValue());\n    };\n  }, []);\n\n  return (\n    <div>\n      <ToggleGroup\n        className={styles.toggleGroup}\n        onValueChange={(newValue) => {\n          if (newValue.length === 0) return;\n          const next = newValue.find((v) => v !== type);\n          if (next) setType(next as TemporalType);\n        }}\n        value={type ? [type] : []}\n      >\n        {TEMPORAL_TYPES.map((type) => (\n          <Toggle className={styles.toggleItem} key={type} value={type}>\n            {type}\n          </Toggle>\n        ))}\n      </ToggleGroup>\n\n      <div className={styles.content}>\n        {type && (\n          <TemporalVariableEditor\n            element={\n              type === 'date'\n                ? isDateElement(element)\n                  ? element\n                  : undefined\n                : isTimeElement(element)\n                  ? element\n                  : undefined\n            }\n            name={element.value}\n            ref={getValueRef}\n            type={type}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["Toggle","ToggleGroup","useEffect","useRef","useState","isDateElement","isTimeElement","TemporalVariableEditor","styles","TEMPORAL_TYPES","TemporalVariablePicker","element","onUpdate","type","setType","undefined","getValueRef","current","getValue","div","className","toggleGroup","onValueChange","newValue","length","next","find","v","value","map","toggleItem","content","name","ref"],"mappings":";AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,aAAa,EAAEC,aAAa,QAAQ,iBAAiB;AAE9D,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IAAC;IAAQ;CAAO;AASvC,OAAO,SAASC,uBAAuB,EACrCC,OAAO,EACPC,QAAQ,EACoB;IAC5B,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAAmC;QACzD,IAAIC,cAAcM,UAAU,OAAO;QACnC,IAAIL,cAAcK,UAAU,OAAO;QACnC,OAAOI;IACT;IACA,MAAMC,cAAcb,OAAmC;IAEvD,0EAA0E;IAC1ED,UAAU;QACR,OAAO;YACL,IAAI,CAACc,YAAYC,OAAO,EAAE;YAC1BL,SAASI,YAAYC,OAAO,CAACC,QAAQ;QACvC;IACF,GAAG,EAAE;IAEL,qBACE,MAACC;;0BACC,KAAClB;gBACCmB,WAAWZ,OAAOa,WAAW;gBAC7BC,eAAe,CAACC;oBACd,IAAIA,SAASC,MAAM,KAAK,GAAG;oBAC3B,MAAMC,OAAOF,SAASG,IAAI,CAAC,CAACC,IAAMA,MAAMd;oBACxC,IAAIY,MAAMX,QAAQW;gBACpB;gBACAG,OAAOf,OAAO;oBAACA;iBAAK,GAAG,EAAE;0BAExBJ,eAAeoB,GAAG,CAAC,CAAChB,qBACnB,KAACb;wBAAOoB,WAAWZ,OAAOsB,UAAU;wBAAaF,OAAOf;kCACrDA;uBADwCA;;0BAM/C,KAACM;gBAAIC,WAAWZ,OAAOuB,OAAO;0BAC3BlB,sBACC,KAACN;oBACCI,SACEE,SAAS,SACLR,cAAcM,WACZA,UACAI,YACFT,cAAcK,WACZA,UACAI;oBAERiB,MAAMrB,QAAQiB,KAAK;oBACnBK,KAAKjB;oBACLH,MAAMA;;;;;AAMlB"}

package/dist/components/inputs/variables/pickers/{TemporalElementEditor.module.css → TemporalVariablePicker.module.css}

@@ -8,16 +8,16 @@
   border: none;
 }
 
-.toggleItem[data-state="off"] {
+.toggleItem:not([data-pressed]) {
   cursor: pointer;
   opacity: 0.5;
 }
 
-.toggleItem[data-state="off"]:hover {
+.toggleItem:not([data-pressed]):hover {
   opacity: 1;
 }
 
-.toggleItem[data-state="on"] {
+.toggleItem[data-pressed] {
   background-color: var(--theme-elevation-800);
   color: var(--theme-elevation-0);
 }

package/dist/components/layout/GroupStatusDot.d.ts

@@ -0,0 +1,6 @@
+interface GroupStatusDotProps {
+    path: string;
+}
+export declare function GroupStatusDot({ path }: GroupStatusDotProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GroupStatusDot.d.ts.map

package/dist/components/layout/GroupStatusDot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupStatusDot.d.ts","sourceRoot":"","sources":["../../../src/components/layout/GroupStatusDot.tsx"],"names":[],"mappings":"AAaA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE,mBAAmB,2CAK3D"}

package/dist/components/layout/GroupStatusDot.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWatch } from 'react-hook-form';
+import { useMessagesForm } from '../../components/MessagesFormProvider';
+import { StatusDot } from './StatusDot';
+function isFullyTranslated(values) {
+    if (typeof values === 'string') return values.length > 0;
+    if (values && typeof values === 'object') {
+        return Object.values(values).every(isFullyTranslated);
+    }
+    return false;
+}
+export function GroupStatusDot({ path }) {
+    const { control, activeLocale } = useMessagesForm();
+    const value = useWatch({
+        control,
+        name: `${activeLocale}.${path}`
+    });
+    const status = isFullyTranslated(value) ? 'translated' : 'missing';
+    return /*#__PURE__*/ _jsx(StatusDot, {
+        status: status
+    });
+}
+
+//# sourceMappingURL=GroupStatusDot.js.map

package/dist/components/layout/GroupStatusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/GroupStatusDot.tsx"],"sourcesContent":["import { useWatch } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessagesFormProvider';\n\nimport { StatusDot } from './StatusDot';\n\nfunction isFullyTranslated(values: unknown): boolean {\n  if (typeof values === 'string') return values.length > 0;\n  if (values && typeof values === 'object') {\n    return Object.values(values).every(isFullyTranslated);\n  }\n  return false;\n}\n\ninterface GroupStatusDotProps {\n  path: string;\n}\n\nexport function GroupStatusDot({ path }: GroupStatusDotProps) {\n  const { control, activeLocale } = useMessagesForm();\n  const value = useWatch({ control, name: `${activeLocale}.${path}` as never });\n  const status = isFullyTranslated(value) ? 'translated' : 'missing';\n  return <StatusDot status={status} />;\n}\n"],"names":["useWatch","useMessagesForm","StatusDot","isFullyTranslated","values","length","Object","every","GroupStatusDot","path","control","activeLocale","value","name","status"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,SAASC,SAAS,QAAQ,cAAc;AAExC,SAASC,kBAAkBC,MAAe;IACxC,IAAI,OAAOA,WAAW,UAAU,OAAOA,OAAOC,MAAM,GAAG;IACvD,IAAID,UAAU,OAAOA,WAAW,UAAU;QACxC,OAAOE,OAAOF,MAAM,CAACA,QAAQG,KAAK,CAACJ;IACrC;IACA,OAAO;AACT;AAMA,OAAO,SAASK,eAAe,EAAEC,IAAI,EAAuB;IAC1D,MAAM,EAAEC,OAAO,EAAEC,YAAY,EAAE,GAAGV;IAClC,MAAMW,QAAQZ,SAAS;QAAEU;QAASG,MAAM,GAAGF,aAAa,CAAC,EAAEF,MAAM;IAAU;IAC3E,MAAMK,SAASX,kBAAkBS,SAAS,eAAe;IACzD,qBAAO,KAACV;QAAUY,QAAQA;;AAC5B"}

package/dist/components/layout/MessageField.d.ts

@@ -4,7 +4,8 @@ interface MessageFieldProps {
     messageKey: string;
     path: string;
     hidden?: boolean;
+    showStatus?: boolean;
 }
-export declare function MessageField({ schema, messageKey, path, hidden, }: MessageFieldProps): React.ReactNode;
+export declare const MessageField: import("react").NamedExoticComponent<MessageFieldProps>;
 export {};
 //# sourceMappingURL=MessageField.d.ts.map

package/dist/components/layout/MessageField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageField.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessageField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,IAAI,EACJ,MAAM,GACP,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA8CrC"}
+{"version":3,"file":"MessageField.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessageField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAS7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,yDAwDvB,CAAC"}

package/dist/components/layout/MessageField.js

@@ -1,21 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { useMessagesForm } from '../../components/MessageFormContext';
+import clsx from 'clsx';
+import { get } from 'lodash-es';
+import { memo, useMemo } from 'react';
+import { useFormState, useWatch } from 'react-hook-form';
+import { useMessagesForm } from '../../components/MessagesFormProvider';
+import { toWords } from '../../utils/format';
 import { parseMessageSchema } from '../../utils/schema';
 import { createValidator } from '../../utils/validate';
-import { MessageController } from '../MessageController';
+import { MessageFormField } from '../MessageFormField';
+import { GroupStatusDot } from './GroupStatusDot';
 import styles from './MessageField.module.css';
-export function MessageField({ schema, messageKey, path, hidden }) {
-    const { locales } = useMessagesForm();
+export const MessageField = /*#__PURE__*/ memo(function MessageField({ schema, messageKey, path, hidden, showStatus }) {
+    const { defaultLocale, activeLocale, control } = useMessagesForm();
     const config = useMemo(()=>parseMessageSchema(schema), [
         schema
     ]);
     const validator = useMemo(()=>createValidator(config.variables), [
         config.variables
     ]);
-    const [firstLocale, ...otherLocales] = locales;
-    if (!firstLocale) return null;
-    return /*#__PURE__*/ _jsxs("div", {
+    const multiline = schema.includes('\n');
+    const isDefaultLocale = activeLocale === defaultLocale;
+    const fieldPath = [
+        path,
+        messageKey
+    ].filter(Boolean).join('.');
+    const fullName = `${activeLocale}.${fieldPath}`;
+    const defaultValue = useWatch({
+        name: `${defaultLocale}.${fieldPath}`
+    });
+    const { errors } = useFormState({
+        control
+    });
+    const hasError = get(errors, fullName) !== undefined;
+    const content = /*#__PURE__*/ _jsxs("div", {
         style: {
             display: hidden ? 'none' : undefined
         },
@@ -23,35 +40,37 @@ export function MessageField({ schema, messageKey, path, hidden }) {
             config.description && /*#__PURE__*/ _jsx("p", {
                 children: config.description
             }),
-            otherLocales.length === 0 ? /*#__PURE__*/ _jsx(MessageController, {
-                locale: firstLocale,
-                name: [
-                    firstLocale,
-                    path,
-                    messageKey
-                ].join('.'),
+            /*#__PURE__*/ _jsx(MessageFormField, {
+                locale: activeLocale,
+                multiline: multiline,
+                name: fullName,
+                reference: !isDefaultLocale ? defaultValue : undefined,
                 validate: validator,
                 variables: config.variables
-            }) : /*#__PURE__*/ _jsx("div", {
-                className: [
-                    styles.localeRow,
-                    styles.localeRowScrollable
-                ].filter(Boolean).join(' '),
-                children: locales.map((locale)=>/*#__PURE__*/ _jsx(MessageController, {
-                        className: styles.localeItem,
-                        label: locale.toUpperCase(),
-                        locale: locale,
-                        name: [
-                            locale,
-                            path,
-                            messageKey
-                        ].join('.'),
-                        validate: validator,
-                        variables: config.variables
-                    }, locale))
             })
         ]
     });
-}
+    if (showStatus !== undefined) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: clsx(styles.row, hasError && styles.rowError),
+            children: [
+                /*#__PURE__*/ _jsxs("span", {
+                    className: styles.label,
+                    children: [
+                        toWords(messageKey),
+                        showStatus && /*#__PURE__*/ _jsx(GroupStatusDot, {
+                            path: fieldPath
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: styles.input,
+                    children: content
+                })
+            ]
+        });
+    }
+    return content;
+});
 
 //# sourceMappingURL=MessageField.js.map

package/dist/components/layout/MessageField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useMessagesForm } from '@/components/MessageFormContext';\nimport type { MessageSchema } from '@/types';\nimport { parseMessageSchema } from '@/utils/schema';\nimport { createValidator } from '@/utils/validate';\n\nimport { MessageController } from '../MessageController';\nimport styles from './MessageField.module.css';\n\ninterface MessageFieldProps {\n  schema: MessageSchema;\n  messageKey: string;\n  path: string;\n  hidden?: boolean;\n}\n\nexport function MessageField({\n  schema,\n  messageKey,\n  path,\n  hidden,\n}: MessageFieldProps): React.ReactNode {\n  const { locales } = useMessagesForm();\n\n  const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n  const validator = useMemo(\n    () => createValidator(config.variables),\n    [config.variables],\n  );\n\n  const [firstLocale, ...otherLocales] = locales;\n\n  if (!firstLocale) return null;\n\n  return (\n    <div style={{ display: hidden ? 'none' : undefined }}>\n      {config.description && <p>{config.description}</p>}\n\n      {otherLocales.length === 0 ? (\n        <MessageController\n          locale={firstLocale}\n          name={[firstLocale, path, messageKey].join('.')}\n          validate={validator}\n          variables={config.variables}\n        />\n      ) : (\n        <div\n          className={[styles.localeRow, styles.localeRowScrollable]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {locales.map((locale) => (\n            <MessageController\n              className={styles.localeItem}\n              key={locale}\n              label={locale.toUpperCase()}\n              locale={locale}\n              name={[locale, path, messageKey].join('.')}\n              validate={validator}\n              variables={config.variables}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useMemo","useMessagesForm","parseMessageSchema","createValidator","MessageController","styles","MessageField","schema","messageKey","path","hidden","locales","config","validator","variables","firstLocale","otherLocales","div","style","display","undefined","description","p","length","locale","name","join","validate","className","localeRow","localeRowScrollable","filter","Boolean","map","localeItem","label","toUpperCase"],"mappings":";AAAA,SAASA,OAAO,QAAQ,QAAQ;AAChC,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,kBAAkB,QAAQ,iBAAiB;AACpD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,OAAOC,YAAY,4BAA4B;AAS/C,OAAO,SAASC,aAAa,EAC3BC,MAAM,EACNC,UAAU,EACVC,IAAI,EACJC,MAAM,EACY;IAClB,MAAM,EAAEC,OAAO,EAAE,GAAGV;IAEpB,MAAMW,SAASZ,QAAQ,IAAME,mBAAmBK,SAAS;QAACA;KAAO;IAEjE,MAAMM,YAAYb,QAChB,IAAMG,gBAAgBS,OAAOE,SAAS,GACtC;QAACF,OAAOE,SAAS;KAAC;IAGpB,MAAM,CAACC,aAAa,GAAGC,aAAa,GAAGL;IAEvC,IAAI,CAACI,aAAa,OAAO;IAEzB,qBACE,MAACE;QAAIC,OAAO;YAAEC,SAAST,SAAS,SAASU;QAAU;;YAChDR,OAAOS,WAAW,kBAAI,KAACC;0BAAGV,OAAOS,WAAW;;YAE5CL,aAAaO,MAAM,KAAK,kBACvB,KAACnB;gBACCoB,QAAQT;gBACRU,MAAM;oBAACV;oBAAaN;oBAAMD;iBAAW,CAACkB,IAAI,CAAC;gBAC3CC,UAAUd;gBACVC,WAAWF,OAAOE,SAAS;+BAG7B,KAACG;gBACCW,WAAW;oBAACvB,OAAOwB,SAAS;oBAAExB,OAAOyB,mBAAmB;iBAAC,CACtDC,MAAM,CAACC,SACPN,IAAI,CAAC;0BAEPf,QAAQsB,GAAG,CAAC,CAACT,uBACZ,KAACpB;wBACCwB,WAAWvB,OAAO6B,UAAU;wBAE5BC,OAAOX,OAAOY,WAAW;wBACzBZ,QAAQA;wBACRC,MAAM;4BAACD;4BAAQf;4BAAMD;yBAAW,CAACkB,IAAI,CAAC;wBACtCC,UAAUd;wBACVC,WAAWF,OAAOE,SAAS;uBALtBU;;;;AAYnB"}
+{"version":3,"sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { get } from 'lodash-es';\nimport { memo, useMemo } from 'react';\nimport { useFormState, useWatch } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessagesFormProvider';\nimport type { MessageSchema } from '@/types';\nimport { toWords } from '@/utils/format';\nimport { parseMessageSchema } from '@/utils/schema';\nimport { createValidator } from '@/utils/validate';\n\nimport { MessageFormField } from '../MessageFormField';\nimport { GroupStatusDot } from './GroupStatusDot';\nimport styles from './MessageField.module.css';\n\ninterface MessageFieldProps {\n  schema: MessageSchema;\n  messageKey: string;\n  path: string;\n  hidden?: boolean;\n  showStatus?: boolean;\n}\n\nexport const MessageField = memo(function MessageField({\n  schema,\n  messageKey,\n  path,\n  hidden,\n  showStatus,\n}: MessageFieldProps): React.ReactNode {\n  const { defaultLocale, activeLocale, control } = useMessagesForm();\n\n  const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n  const validator = useMemo(\n    () => createValidator(config.variables),\n    [config.variables],\n  );\n\n  const multiline = schema.includes('\\n');\n  const isDefaultLocale = activeLocale === defaultLocale;\n  const fieldPath = [path, messageKey].filter(Boolean).join('.');\n  const fullName = `${activeLocale}.${fieldPath}`;\n\n  const defaultValue = useWatch({ name: `${defaultLocale}.${fieldPath}` }) as\n    | string\n    | undefined;\n\n  const { errors } = useFormState({ control });\n  const hasError = get(errors, fullName) !== undefined;\n\n  const content = (\n    <div style={{ display: hidden ? 'none' : undefined }}>\n      {config.description && <p>{config.description}</p>}\n\n      <MessageFormField\n        locale={activeLocale}\n        multiline={multiline}\n        name={fullName}\n        reference={!isDefaultLocale ? defaultValue : undefined}\n        validate={validator}\n        variables={config.variables}\n      />\n    </div>\n  );\n\n  if (showStatus !== undefined) {\n    return (\n      <div className={clsx(styles.row, hasError && styles.rowError)}>\n        <span className={styles.label}>\n          {toWords(messageKey)}\n          {showStatus && <GroupStatusDot path={fieldPath} />}\n        </span>\n        <div className={styles.input}>{content}</div>\n      </div>\n    );\n  }\n\n  return content;\n});\n"],"names":["clsx","get","memo","useMemo","useFormState","useWatch","useMessagesForm","toWords","parseMessageSchema","createValidator","MessageFormField","GroupStatusDot","styles","MessageField","schema","messageKey","path","hidden","showStatus","defaultLocale","activeLocale","control","config","validator","variables","multiline","includes","isDefaultLocale","fieldPath","filter","Boolean","join","fullName","defaultValue","name","errors","hasError","undefined","content","div","style","display","description","p","locale","reference","validate","className","row","rowError","span","label","input"],"mappings":";AAAA,OAAOA,UAAU,OAAO;AACxB,SAASC,GAAG,QAAQ,YAAY;AAChC,SAASC,IAAI,EAAEC,OAAO,QAAQ,QAAQ;AACtC,SAASC,YAAY,EAAEC,QAAQ,QAAQ,kBAAkB;AACzD,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,SAASC,OAAO,QAAQ,iBAAiB;AACzC,SAASC,kBAAkB,QAAQ,iBAAiB;AACpD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,YAAY,4BAA4B;AAU/C,OAAO,MAAMC,6BAAeX,KAAK,SAASW,aAAa,EACrDC,MAAM,EACNC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,UAAU,EACQ;IAClB,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGf;IAEjD,MAAMgB,SAASnB,QAAQ,IAAMK,mBAAmBM,SAAS;QAACA;KAAO;IAEjE,MAAMS,YAAYpB,QAChB,IAAMM,gBAAgBa,OAAOE,SAAS,GACtC;QAACF,OAAOE,SAAS;KAAC;IAGpB,MAAMC,YAAYX,OAAOY,QAAQ,CAAC;IAClC,MAAMC,kBAAkBP,iBAAiBD;IACzC,MAAMS,YAAY;QAACZ;QAAMD;KAAW,CAACc,MAAM,CAACC,SAASC,IAAI,CAAC;IAC1D,MAAMC,WAAW,GAAGZ,aAAa,CAAC,EAAEQ,WAAW;IAE/C,MAAMK,eAAe5B,SAAS;QAAE6B,MAAM,GAAGf,cAAc,CAAC,EAAES,WAAW;IAAC;IAItE,MAAM,EAAEO,MAAM,EAAE,GAAG/B,aAAa;QAAEiB;IAAQ;IAC1C,MAAMe,WAAWnC,IAAIkC,QAAQH,cAAcK;IAE3C,MAAMC,wBACJ,MAACC;QAAIC,OAAO;YAAEC,SAASxB,SAAS,SAASoB;QAAU;;YAChDf,OAAOoB,WAAW,kBAAI,KAACC;0BAAGrB,OAAOoB,WAAW;;0BAE7C,KAAChC;gBACCkC,QAAQxB;gBACRK,WAAWA;gBACXS,MAAMF;gBACNa,WAAW,CAAClB,kBAAkBM,eAAeI;gBAC7CS,UAAUvB;gBACVC,WAAWF,OAAOE,SAAS;;;;IAKjC,IAAIN,eAAemB,WAAW;QAC5B,qBACE,MAACE;YAAIQ,WAAW/C,KAAKY,OAAOoC,GAAG,EAAEZ,YAAYxB,OAAOqC,QAAQ;;8BAC1D,MAACC;oBAAKH,WAAWnC,OAAOuC,KAAK;;wBAC1B5C,QAAQQ;wBACRG,4BAAc,KAACP;4BAAeK,MAAMY;;;;8BAEvC,KAACW;oBAAIQ,WAAWnC,OAAOwC,KAAK;8BAAGd;;;;IAGrC;IAEA,OAAOA;AACT,GAAG"}

package/dist/components/layout/MessageField.module.css

@@ -1,19 +1,30 @@
-.localeRow {
-  margin-inline: -0.75rem;
+.row {
   display: flex;
-  min-width: 0;
+  align-items: flex-start;
   gap: 1rem;
-  padding-inline: 0.75rem;
+  padding-left: 0.75rem;
+  background-color: var(--theme-elevation-50);
+  border: 1px solid var(--theme-border-color);
+  border-radius: var(--style-radius-m);
 }
 
-.localeRowScrollable {
-  overflow-x: auto;
+.rowError {
+  border-color: var(--theme-error-400);
 }
 
-.localeItem {
-  flex: 1;
+.label {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 10ch;
+  padding-top: 0.35rem;
+  font-size: var(--font-size-large);
+  font-weight: 500;
 }
 
-.hidden {
-  display: none;
+.input {
+  flex: 1;
+  min-width: 0;
+  margin-block: -1px;
+  margin-right: -1px;
 }

package/dist/components/layout/MessagesTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesTabs.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,UAAU,iBAAiB;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAGD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAoCrC"}
+{"version":3,"file":"MessagesTabs.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTabs.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,UAAU,iBAAiB;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAGD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA+BrC"}

package/dist/components/layout/MessagesTabs.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@payloadcms/ui';
+import clsx from 'clsx';
 import { get } from 'lodash-es';
 import { useCallback } from 'react';
 import { useFormState } from 'react-hook-form';
-import { useMessagesForm } from '../../components/MessageFormContext';
+import { useMessagesForm } from '../../components/MessagesFormProvider';
 import { toWords } from '../../utils/format';
 import styles from './MessagesTabs.module.css';
 // TODO add hash for current tab to url
@@ -26,10 +27,7 @@ export function MessagesTabs({ schema, activeTab, setActiveTab }) {
         role: "tablist",
         children: Object.keys(schema).map((key)=>/*#__PURE__*/ _jsx(Button, {
                 buttonStyle: activeTab === key ? 'pill' : 'tab',
-                className: [
-                    styles.tab,
-                    hasErrors(key) ? activeTab === key ? styles.tabError : styles.tabErrorInactive : undefined
-                ].filter(Boolean).join(' '),
+                className: clsx(styles.tab, hasErrors(key) && activeTab === key && styles.tabError, hasErrors(key) && activeTab !== key && styles.tabErrorInactive),
                 onClick: ()=>setActiveTab(key),
                 size: "large",
                 type: "button",