payload-intl 1.4.1 → 1.4.2

package/dist/components/input/MessageInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/input/MessageInput.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2BhD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,2CA0EnB"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/input/MessageInput.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2BhD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,2CAuEnB"}

package/dist/components/input/MessageInput.js

@@ -9,7 +9,7 @@ import { HistoryPlugin } from '@payloadcms/richtext-lexical/lexical/react/Lexica
 import { OnChangePlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalOnChangePlugin';
 import { PlainTextPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalPlainTextPlugin';
 import { BeautifulMentionNode, BeautifulMentionsPlugin } from 'lexical-beautiful-mentions';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { formatVariableLabel } from '../../components/input/utils';
 import { isTagElement, parseIcuToLexicalState, serializeICUMessage } from '../../icu';
 import styles from './MessageInput.module.css';
@@ -56,7 +56,7 @@ export function MessageInput({ value, variables, onChange, onBlur, multiline, er
     }, [
         variables
     ]);
-    const initialConfig = useMemo(()=>({
+    const [initialConfig] = useState(()=>({
             namespace: 'ICUMessageEditor',
             nodes: [
                 VariableMentionNode,
@@ -69,7 +69,7 @@ export function MessageInput({ value, variables, onChange, onBlur, multiline, er
             editorState: JSON.stringify(parseIcuToLexicalState(value)),
             editable: true,
             onError: console.error
-        }), []);
+        }));
     return /*#__PURE__*/ _jsx(LexicalComposer, {
         initialConfig: initialConfig,
         children: /*#__PURE__*/ _jsxs("div", {

package/dist/components/input/MessageInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input/MessageInput.tsx"],"sourcesContent":["'use client';\n\nimport type { EditorState } from '@payloadcms/richtext-lexical/lexical';\nimport { $getRoot } from '@payloadcms/richtext-lexical/lexical';\nimport { LexicalComposer } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposer';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport { ContentEditable } from '@payloadcms/richtext-lexical/lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@payloadcms/richtext-lexical/lexical/react/LexicalErrorBoundary';\nimport { HistoryPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalHistoryPlugin';\nimport { OnChangePlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalOnChangePlugin';\nimport { PlainTextPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalPlainTextPlugin';\nimport {\n  BeautifulMentionNode,\n  BeautifulMentionsPlugin,\n} from 'lexical-beautiful-mentions';\nimport { useCallback, useEffect, useMemo } from 'react';\nimport { formatVariableLabel } from '@/components/input/utils';\nimport {\n  isTagElement,\n  parseIcuToLexicalState,\n  serializeICUMessage,\n} from '@/icu';\nimport type { TemplateVariable } from '@/types';\n\nimport styles from './MessageInput.module.css';\nimport { SingleLinePlugin } from './SingleLinePlugin';\nimport { VariableMentionNode } from './variables/VariableNode';\nimport { MentionMenu, MentionMenuItem } from './variables/VariableSuggestion';\n\nfunction SyncValuePlugin({ value }: { value: string }) {\n  const [editor] = useLexicalComposerContext();\n\n  useEffect(() => {\n    const currentText = editor\n      .getEditorState()\n      .read(() => $getRoot().getTextContent());\n    if (value !== currentText) {\n      queueMicrotask(() => {\n        const newState = editor.parseEditorState(\n          JSON.stringify(parseIcuToLexicalState(value)),\n        );\n        editor.setEditorState(newState);\n      });\n    }\n  }, [value, editor]);\n\n  return null;\n}\n\nexport interface MessageInputProps {\n  value: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n  readOnly?: boolean;\n  multiline?: boolean;\n  error?: boolean;\n}\n\nexport function MessageInput({\n  value,\n  variables,\n  onChange,\n  onBlur,\n  multiline,\n  error,\n}: MessageInputProps) {\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      editorState.read(() => {\n        onChange($getRoot().getTextContent());\n      });\n    },\n    [onChange],\n  );\n\n  const mentionItems = useMemo(() => {\n    const toItem = (v: TemplateVariable) => ({\n      value: v.value,\n      label: formatVariableLabel(v),\n      icu: serializeICUMessage([v]),\n    });\n\n    return {\n      '@': variables.map(toItem),\n      '{': variables.filter((v) => !isTagElement(v)).map(toItem),\n      '<': variables.filter((v) => isTagElement(v)).map(toItem),\n    };\n  }, [variables]);\n\n  const initialConfig = useMemo(\n    () => ({\n      namespace: 'ICUMessageEditor',\n      nodes: [\n        VariableMentionNode,\n        {\n          replace: BeautifulMentionNode,\n          with: (node: BeautifulMentionNode) =>\n            new VariableMentionNode(\n              node.getTrigger(),\n              node.getValue(),\n              node.getData(),\n            ),\n          withKlass: VariableMentionNode,\n        },\n      ],\n      editorState: JSON.stringify(parseIcuToLexicalState(value)),\n      editable: true,\n      onError: console.error,\n    }),\n    [],\n  );\n\n  return (\n    <LexicalComposer initialConfig={initialConfig}>\n      <div className={styles.editor} data-multiline={multiline}>\n        <PlainTextPlugin\n          contentEditable={\n            <ContentEditable\n              className={styles.contentEditable}\n              data-error={error}\n              onBlur={onBlur}\n            />\n          }\n          ErrorBoundary={LexicalErrorBoundary}\n        />\n        {multiline && <SingleLinePlugin />}\n        <SyncValuePlugin value={value} />\n        <OnChangePlugin onChange={handleChange} />\n        <HistoryPlugin />\n\n        <BeautifulMentionsPlugin\n          items={mentionItems}\n          menuAnchorClassName={styles.menuAnchor}\n          menuComponent={MentionMenu}\n          menuItemComponent={MentionMenuItem}\n        />\n      </div>\n    </LexicalComposer>\n  );\n}\n"],"names":["$getRoot","LexicalComposer","useLexicalComposerContext","ContentEditable","LexicalErrorBoundary","HistoryPlugin","OnChangePlugin","PlainTextPlugin","BeautifulMentionNode","BeautifulMentionsPlugin","useCallback","useEffect","useMemo","formatVariableLabel","isTagElement","parseIcuToLexicalState","serializeICUMessage","styles","SingleLinePlugin","VariableMentionNode","MentionMenu","MentionMenuItem","SyncValuePlugin","value","editor","currentText","getEditorState","read","getTextContent","queueMicrotask","newState","parseEditorState","JSON","stringify","setEditorState","MessageInput","variables","onChange","onBlur","multiline","error","handleChange","editorState","mentionItems","toItem","v","label","icu","map","filter","initialConfig","namespace","nodes","replace","with","node","getTrigger","getValue","getData","withKlass","editable","onError","console","div","className","data-multiline","contentEditable","data-error","ErrorBoundary","items","menuAnchorClassName","menuAnchor","menuComponent","menuItemComponent"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/input/MessageInput.tsx"],"sourcesContent":["'use client';\n\nimport type { EditorState } from '@payloadcms/richtext-lexical/lexical';\nimport { $getRoot } from '@payloadcms/richtext-lexical/lexical';\nimport { LexicalComposer } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposer';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport { ContentEditable } from '@payloadcms/richtext-lexical/lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@payloadcms/richtext-lexical/lexical/react/LexicalErrorBoundary';\nimport { HistoryPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalHistoryPlugin';\nimport { OnChangePlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalOnChangePlugin';\nimport { PlainTextPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalPlainTextPlugin';\nimport {\n  BeautifulMentionNode,\n  BeautifulMentionsPlugin,\n} from 'lexical-beautiful-mentions';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { formatVariableLabel } from '@/components/input/utils';\nimport {\n  isTagElement,\n  parseIcuToLexicalState,\n  serializeICUMessage,\n} from '@/icu';\nimport type { TemplateVariable } from '@/types';\n\nimport styles from './MessageInput.module.css';\nimport { SingleLinePlugin } from './SingleLinePlugin';\nimport { VariableMentionNode } from './variables/VariableNode';\nimport { MentionMenu, MentionMenuItem } from './variables/VariableSuggestion';\n\nfunction SyncValuePlugin({ value }: { value: string }) {\n  const [editor] = useLexicalComposerContext();\n\n  useEffect(() => {\n    const currentText = editor\n      .getEditorState()\n      .read(() => $getRoot().getTextContent());\n    if (value !== currentText) {\n      queueMicrotask(() => {\n        const newState = editor.parseEditorState(\n          JSON.stringify(parseIcuToLexicalState(value)),\n        );\n        editor.setEditorState(newState);\n      });\n    }\n  }, [value, editor]);\n\n  return null;\n}\n\nexport interface MessageInputProps {\n  value: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n  readOnly?: boolean;\n  multiline?: boolean;\n  error?: boolean;\n}\n\nexport function MessageInput({\n  value,\n  variables,\n  onChange,\n  onBlur,\n  multiline,\n  error,\n}: MessageInputProps) {\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      editorState.read(() => {\n        onChange($getRoot().getTextContent());\n      });\n    },\n    [onChange],\n  );\n\n  const mentionItems = useMemo(() => {\n    const toItem = (v: TemplateVariable) => ({\n      value: v.value,\n      label: formatVariableLabel(v),\n      icu: serializeICUMessage([v]),\n    });\n\n    return {\n      '@': variables.map(toItem),\n      '{': variables.filter((v) => !isTagElement(v)).map(toItem),\n      '<': variables.filter((v) => isTagElement(v)).map(toItem),\n    };\n  }, [variables]);\n\n  const [initialConfig] = useState(() => ({\n    namespace: 'ICUMessageEditor',\n    nodes: [\n      VariableMentionNode,\n      {\n        replace: BeautifulMentionNode,\n        with: (node: BeautifulMentionNode) =>\n          new VariableMentionNode(\n            node.getTrigger(),\n            node.getValue(),\n            node.getData(),\n          ),\n        withKlass: VariableMentionNode,\n      },\n    ],\n    editorState: JSON.stringify(parseIcuToLexicalState(value)),\n    editable: true,\n    onError: console.error,\n  }));\n\n  return (\n    <LexicalComposer initialConfig={initialConfig}>\n      <div className={styles.editor} data-multiline={multiline}>\n        <PlainTextPlugin\n          contentEditable={\n            <ContentEditable\n              className={styles.contentEditable}\n              data-error={error}\n              onBlur={onBlur}\n            />\n          }\n          ErrorBoundary={LexicalErrorBoundary}\n        />\n        {multiline && <SingleLinePlugin />}\n        <SyncValuePlugin value={value} />\n        <OnChangePlugin onChange={handleChange} />\n        <HistoryPlugin />\n\n        <BeautifulMentionsPlugin\n          items={mentionItems}\n          menuAnchorClassName={styles.menuAnchor}\n          menuComponent={MentionMenu}\n          menuItemComponent={MentionMenuItem}\n        />\n      </div>\n    </LexicalComposer>\n  );\n}\n"],"names":["$getRoot","LexicalComposer","useLexicalComposerContext","ContentEditable","LexicalErrorBoundary","HistoryPlugin","OnChangePlugin","PlainTextPlugin","BeautifulMentionNode","BeautifulMentionsPlugin","useCallback","useEffect","useMemo","useState","formatVariableLabel","isTagElement","parseIcuToLexicalState","serializeICUMessage","styles","SingleLinePlugin","VariableMentionNode","MentionMenu","MentionMenuItem","SyncValuePlugin","value","editor","currentText","getEditorState","read","getTextContent","queueMicrotask","newState","parseEditorState","JSON","stringify","setEditorState","MessageInput","variables","onChange","onBlur","multiline","error","handleChange","editorState","mentionItems","toItem","v","label","icu","map","filter","initialConfig","namespace","nodes","replace","with","node","getTrigger","getValue","getData","withKlass","editable","onError","console","div","className","data-multiline","contentEditable","data-error","ErrorBoundary","items","menuAnchorClassName","menuAnchor","menuComponent","menuItemComponent"],"mappings":"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"}

package/dist/components/input/variables/editors/SelectVariableEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/editors/SelectVariableEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,QAAQ,GACT,EAAE,yBAAyB,2CAoD3B"}
+{"version":3,"file":"SelectVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/editors/SelectVariableEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,QAAQ,GACT,EAAE,yBAAyB,2CAqD3B"}

package/dist/components/input/variables/editors/SelectVariableEditor.js

@@ -19,6 +19,7 @@ export function SelectVariableEditor({ element, onUpdate }) {
         control,
         name: 'options'
     });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME
     useEffect(()=>{
         return ()=>{
             const values = getValues();

package/dist/components/input/variables/editors/SelectVariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/input/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useFieldArray, useForm } from 'react-hook-form';\nimport { parseICUMessage, serializeICUMessage } from '@/icu';\nimport type { SelectElement } from '@/types';\n\nimport styles from './SelectVariableEditor.module.css';\n\nexport interface SelectVariableEditorProps {\n  element: SelectElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n  element,\n  onUpdate,\n}: SelectVariableEditorProps) {\n  const options = useMemo<{ name: string; content: string }[]>(\n    () =>\n      Object.entries(element.options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n    [element],\n  );\n\n  const { control, register, getValues } = useForm<{\n    options: { name: string; content: string }[];\n  }>({\n    defaultValues: { options },\n  });\n  const { fields } = useFieldArray({\n    control,\n    name: 'options',\n  });\n\n  useEffect(() => {\n    return () => {\n      const values = getValues();\n      const updatedElement: SelectElement = {\n        ...element,\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  return (\n    <div className={styles.root}>\n      {fields.map((field, index) => (\n        <div className={styles.field} key={field.name}>\n          <label className={styles.label} htmlFor={`options.${index}.content`}>\n            {field.name}\n          </label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            className={styles.input}\n            {...register(`options.${index}.content`)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["useEffect","useMemo","useFieldArray","useForm","parseICUMessage","serializeICUMessage","styles","SelectVariableEditor","element","onUpdate","options","Object","entries","map","name","option","content","value","control","register","getValues","defaultValues","fields","values","updatedElement","fromEntries","div","className","root","field","index","label","htmlFor","input"],"mappings":";AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAC3C,SAASC,aAAa,EAAEC,OAAO,QAAQ,kBAAkB;AACzD,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,QAAQ;AAG7D,OAAOC,YAAY,oCAAoC;AAOvD,OAAO,SAASC,qBAAqB,EACnCC,OAAO,EACPC,QAAQ,EACkB;IAC1B,MAAMC,UAAUT,QACd,IACEU,OAAOC,OAAO,CAACJ,QAAQE,OAAO,EAAEG,GAAG,CAAC,CAAC,CAACC,MAAMC,OAAO,GAAM,CAAA;gBACvDD;gBACAE,SAASX,oBAAoBU,OAAOE,KAAK;YAC3C,CAAA,IACF;QAACT;KAAQ;IAGX,MAAM,EAAEU,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGjB,QAEtC;QACDkB,eAAe;YAAEX;QAAQ;IAC3B;IACA,MAAM,EAAEY,MAAM,EAAE,GAAGpB,cAAc;QAC/BgB;QACAJ,MAAM;IACR;IAEAd,UAAU;QACR,OAAO;YACL,MAAMuB,SAASH;YACf,MAAMI,iBAAgC;gBACpC,GAAGhB,OAAO;gBACVE,SAASC,OAAOc,WAAW,CACzBF,OAAOb,OAAO,CAACG,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAEE,OAAO,EAAE,GAAK;wBACxCF;wBACA;4BAAEG,OAAOb,gBAAgBY;wBAAS;qBACnC;YAEL;YACAP,SAASJ,oBAAoB;gBAACmB;aAAe;QAC/C;IACF,GAAG,EAAE;IAEL,qBACE,KAACE;QAAIC,WAAWrB,OAAOsB,IAAI;kBACxBN,OAAOT,GAAG,CAAC,CAACgB,OAAOC,sBAClB,MAACJ;gBAAIC,WAAWrB,OAAOuB,KAAK;;kCAC1B,KAACE;wBAAMJ,WAAWrB,OAAOyB,KAAK;wBAAEC,SAAS,CAAC,QAAQ,EAAEF,MAAM,QAAQ,CAAC;kCAChED,MAAMf,IAAI;;kCAGb,KAACmB;wBACCN,WAAWrB,OAAO2B,KAAK;wBACtB,GAAGd,SAAS,CAAC,QAAQ,EAAEW,MAAM,QAAQ,CAAC,CAAC;;;eAPTD,MAAMf,IAAI;;AAarD"}
+{"version":3,"sources":["../../../../../src/components/input/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useFieldArray, useForm } from 'react-hook-form';\nimport { parseICUMessage, serializeICUMessage } from '@/icu';\nimport type { SelectElement } from '@/types';\n\nimport styles from './SelectVariableEditor.module.css';\n\nexport interface SelectVariableEditorProps {\n  element: SelectElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n  element,\n  onUpdate,\n}: SelectVariableEditorProps) {\n  const options = useMemo<{ name: string; content: string }[]>(\n    () =>\n      Object.entries(element.options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n    [element],\n  );\n\n  const { control, register, getValues } = useForm<{\n    options: { name: string; content: string }[];\n  }>({\n    defaultValues: { options },\n  });\n  const { fields } = useFieldArray({\n    control,\n    name: 'options',\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME\n  useEffect(() => {\n    return () => {\n      const values = getValues();\n      const updatedElement: SelectElement = {\n        ...element,\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  return (\n    <div className={styles.root}>\n      {fields.map((field, index) => (\n        <div className={styles.field} key={field.name}>\n          <label className={styles.label} htmlFor={`options.${index}.content`}>\n            {field.name}\n          </label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            className={styles.input}\n            {...register(`options.${index}.content`)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["useEffect","useMemo","useFieldArray","useForm","parseICUMessage","serializeICUMessage","styles","SelectVariableEditor","element","onUpdate","options","Object","entries","map","name","option","content","value","control","register","getValues","defaultValues","fields","values","updatedElement","fromEntries","div","className","root","field","index","label","htmlFor","input"],"mappings":";AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAC3C,SAASC,aAAa,EAAEC,OAAO,QAAQ,kBAAkB;AACzD,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,QAAQ;AAG7D,OAAOC,YAAY,oCAAoC;AAOvD,OAAO,SAASC,qBAAqB,EACnCC,OAAO,EACPC,QAAQ,EACkB;IAC1B,MAAMC,UAAUT,QACd,IACEU,OAAOC,OAAO,CAACJ,QAAQE,OAAO,EAAEG,GAAG,CAAC,CAAC,CAACC,MAAMC,OAAO,GAAM,CAAA;gBACvDD;gBACAE,SAASX,oBAAoBU,OAAOE,KAAK;YAC3C,CAAA,IACF;QAACT;KAAQ;IAGX,MAAM,EAAEU,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGjB,QAEtC;QACDkB,eAAe;YAAEX;QAAQ;IAC3B;IACA,MAAM,EAAEY,MAAM,EAAE,GAAGpB,cAAc;QAC/BgB;QACAJ,MAAM;IACR;IAEA,iEAAiE;IACjEd,UAAU;QACR,OAAO;YACL,MAAMuB,SAASH;YACf,MAAMI,iBAAgC;gBACpC,GAAGhB,OAAO;gBACVE,SAASC,OAAOc,WAAW,CACzBF,OAAOb,OAAO,CAACG,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAEE,OAAO,EAAE,GAAK;wBACxCF;wBACA;4BAAEG,OAAOb,gBAAgBY;wBAAS;qBACnC;YAEL;YACAP,SAASJ,oBAAoB;gBAACmB;aAAe;QAC/C;IACF,GAAG,EAAE;IAEL,qBACE,KAACE;QAAIC,WAAWrB,OAAOsB,IAAI;kBACxBN,OAAOT,GAAG,CAAC,CAACgB,OAAOC,sBAClB,MAACJ;gBAAIC,WAAWrB,OAAOuB,KAAK;;kCAC1B,KAACE;wBAAMJ,WAAWrB,OAAOyB,KAAK;wBAAEC,SAAS,CAAC,QAAQ,EAAEF,MAAM,QAAQ,CAAC;kCAChED,MAAMf,IAAI;;kCAGb,KAACmB;wBACCN,WAAWrB,OAAO2B,KAAK;wBACtB,GAAGd,SAAS,CAAC,QAAQ,EAAEW,MAAM,QAAQ,CAAC,CAAC;;;eAPTD,MAAMf,IAAI;;AAarD"}

package/dist/components/input/variables/editors/TagVariableEditor.js

@@ -12,6 +12,7 @@ export function TagVariableEditor({ element, onUpdate }) {
             content
         }
     });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME
     useEffect(()=>{
         return ()=>{
             const { content } = getValues();

package/dist/components/input/variables/editors/TagVariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/input/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { parseICUMessage, serializeICUMessage } from '@/icu';\nimport type { TagElement } from '@/types';\n\nimport styles from './TagVariableEditor.module.css';\n\nexport interface TagVariableEditorProps {\n  element: TagElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n  element,\n  onUpdate,\n}: TagVariableEditorProps) {\n  const content = useMemo<string>(\n    () => serializeICUMessage(element.children),\n    [element],\n  );\n\n  const { register, getValues } = useForm<{ content: string }>({\n    defaultValues: { content },\n  });\n\n  useEffect(() => {\n    return () => {\n      const { content } = getValues();\n      // TODO find better solution for this\n      const updatedElement: TagElement = {\n        ...element,\n        children: parseICUMessage(content),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  // TODO add support for variable mentions\n  return (\n    <textarea className={styles.textarea} {...register('content')} rows={1} />\n  );\n}\n"],"names":["useEffect","useMemo","useForm","parseICUMessage","serializeICUMessage","styles","TagVariableEditor","element","onUpdate","content","children","register","getValues","defaultValues","updatedElement","textarea","className","rows"],"mappings":";AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAC3C,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,QAAQ;AAG7D,OAAOC,YAAY,iCAAiC;AAOpD,OAAO,SAASC,kBAAkB,EAChCC,OAAO,EACPC,QAAQ,EACe;IACvB,MAAMC,UAAUR,QACd,IAAMG,oBAAoBG,QAAQG,QAAQ,GAC1C;QAACH;KAAQ;IAGX,MAAM,EAAEI,QAAQ,EAAEC,SAAS,EAAE,GAAGV,QAA6B;QAC3DW,eAAe;YAAEJ;QAAQ;IAC3B;IAEAT,UAAU;QACR,OAAO;YACL,MAAM,EAAES,OAAO,EAAE,GAAGG;YACpB,qCAAqC;YACrC,MAAME,iBAA6B;gBACjC,GAAGP,OAAO;gBACVG,UAAUP,gBAAgBM;YAC5B;YACAD,SAASJ,oBAAoB;gBAACU;aAAe;QAC/C;IACF,GAAG,EAAE;IAEL,yCAAyC;IACzC,qBACE,KAACC;QAASC,WAAWX,OAAOU,QAAQ;QAAG,GAAGJ,SAAS,UAAU;QAAEM,MAAM;;AAEzE"}
+{"version":3,"sources":["../../../../../src/components/input/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { parseICUMessage, serializeICUMessage } from '@/icu';\nimport type { TagElement } from '@/types';\n\nimport styles from './TagVariableEditor.module.css';\n\nexport interface TagVariableEditorProps {\n  element: TagElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n  element,\n  onUpdate,\n}: TagVariableEditorProps) {\n  const content = useMemo<string>(\n    () => serializeICUMessage(element.children),\n    [element],\n  );\n\n  const { register, getValues } = useForm<{ content: string }>({\n    defaultValues: { content },\n  });\n  // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME\n  useEffect(() => {\n    return () => {\n      const { content } = getValues();\n      // TODO find better solution for this\n      const updatedElement: TagElement = {\n        ...element,\n        children: parseICUMessage(content),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  // TODO add support for variable mentions\n  return (\n    <textarea className={styles.textarea} {...register('content')} rows={1} />\n  );\n}\n"],"names":["useEffect","useMemo","useForm","parseICUMessage","serializeICUMessage","styles","TagVariableEditor","element","onUpdate","content","children","register","getValues","defaultValues","updatedElement","textarea","className","rows"],"mappings":";AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAC3C,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,QAAQ;AAG7D,OAAOC,YAAY,iCAAiC;AAOpD,OAAO,SAASC,kBAAkB,EAChCC,OAAO,EACPC,QAAQ,EACe;IACvB,MAAMC,UAAUR,QACd,IAAMG,oBAAoBG,QAAQG,QAAQ,GAC1C;QAACH;KAAQ;IAGX,MAAM,EAAEI,QAAQ,EAAEC,SAAS,EAAE,GAAGV,QAA6B;QAC3DW,eAAe;YAAEJ;QAAQ;IAC3B;IACA,iEAAiE;IACjET,UAAU;QACR,OAAO;YACL,MAAM,EAAES,OAAO,EAAE,GAAGG;YACpB,qCAAqC;YACrC,MAAME,iBAA6B;gBACjC,GAAGP,OAAO;gBACVG,UAAUP,gBAAgBM;YAC5B;YACAD,SAASJ,oBAAoB;gBAACU;aAAe;QAC/C;IACF,GAAG,EAAE;IAEL,yCAAyC;IACzC,qBACE,KAACC;QAASC,WAAWX,OAAOU,QAAQ;QAAG,GAAGJ,SAAS,UAAU;QAAEM,MAAM;;AAEzE"}

package/dist/components/input/variables/pickers/NumericVariableEditor.js

@@ -16,6 +16,7 @@ export function NumericVariableEditor({ element, onUpdate }) {
         return undefined;
     });
     const getValueRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME
     useEffect(()=>{
         return ()=>{
             if (!getValueRef.current) return;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/input/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 { isNumberElement, isPluralElement } from '@/icu';\nimport type { NumberElement, PluralElement } from '@/types';\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  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;AACpD,SAASC,eAAe,EAAEC,eAAe,QAAQ,QAAQ;AAGzD,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;IAEvDD,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"}
+{"version":3,"sources":["../../../../../src/components/input/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 { isNumberElement, isPluralElement } from '@/icu';\nimport type { NumberElement, PluralElement } from '@/types';\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  // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME\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;AACpD,SAASC,eAAe,EAAEC,eAAe,QAAQ,QAAQ;AAGzD,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;IACvD,iEAAiE;IACjED,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/input/variables/pickers/TemporalVariablePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemporalVariablePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/pickers/TemporalVariablePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AASxD,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,2CAqD7B"}
+{"version":3,"file":"TemporalVariablePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/pickers/TemporalVariablePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AASxD,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/input/variables/pickers/TemporalVariablePicker.js

@@ -16,6 +16,7 @@ export function TemporalVariablePicker({ element, onUpdate }) {
         return undefined;
     });
     const getValueRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME
     useEffect(()=>{
         return ()=>{
             if (!getValueRef.current) return;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/input/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 { isDateElement, isTimeElement } from '@/icu';\nimport type { DateElement, TimeElement } from '@/types';\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  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;AACpD,SAASC,aAAa,EAAEC,aAAa,QAAQ,QAAQ;AAGrD,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;IAEvDD,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"}
+{"version":3,"sources":["../../../../../src/components/input/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 { isDateElement, isTimeElement } from '@/icu';\nimport type { DateElement, TimeElement } from '@/types';\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: FIXME\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;AACpD,SAASC,aAAa,EAAEC,aAAa,QAAQ,QAAQ;AAGrD,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,iEAAiE;IACjED,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-intl",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Payload Plugin for I18N using ICU Messages",
   "keywords": [
     "payload",
@@ -53,7 +53,7 @@
     "lodash-es": "^4.17.21",
     "react-hook-form": "^7.58.1",
     "zod": "4.3.5",
-    "@davincicoding/payload-plugin-kit": "0.0.4"
+    "@davincicoding/payload-plugin-kit": "0.0.5"
   },
   "devDependencies": {
     "@payloadcms/richtext-lexical": "3.72.0",
@@ -72,11 +72,11 @@
     "vitest": "3.2.3"
   },
   "peerDependencies": {
-    "@payloadcms/next": "3.72.0",
-    "@payloadcms/richtext-lexical": "3.72.0",
+    "@payloadcms/next": ">=3.72.0",
+    "@payloadcms/richtext-lexical": ">=3.72.0",
     "@payloadcms/ui": ">=3.72.0",
-    "next": "15.5.9",
-    "payload": "3.72.0"
+    "next": ">=15.5.9",
+    "payload": ">=3.72.0"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0",