payload-intl 1.2.2 → 1.2.3

package/dist/components/inputs/ReferencePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inputs/ReferencePopover.tsx"],"sourcesContent":["import { Popover } from '@base-ui/react/popover';\n\nimport { IconX } from '@tabler/icons-react';\nimport type { ReactElement } from 'react';\n\nimport styles from './ReferencePopover.module.css';\n\nexport interface ReferencePopoverProps {\n  reference?: string;\n  children: ReactElement;\n}\n\nexport function ReferencePopover({\n  reference,\n  children,\n}: ReferencePopoverProps) {\n  if (!reference) return children;\n  return (\n    <Popover.Root>\n      <Popover.Trigger nativeButton={false} render={children} />\n      <Popover.Portal>\n        <Popover.Positioner align=\"start\" side=\"top\" sideOffset={4}>\n          <Popover.Popup\n            className={styles.popup}\n            initialFocus={false}\n            onMouseDown={(e) => e.preventDefault()}\n          >\n            <Popover.Close className={styles.dismiss} type=\"button\">\n              <IconX size={14} />\n            </Popover.Close>\n            <p className={styles.text}>{reference}</p>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["Popover","IconX","styles","ReferencePopover","reference","children","Root","Trigger","nativeButton","render","Portal","Positioner","align","side","sideOffset","Popup","className","popup","initialFocus","onMouseDown","e","preventDefault","Close","dismiss","type","size","p","text"],"mappings":";AAAA,SAASA,OAAO,QAAQ,yBAAyB;AAEjD,SAASC,KAAK,QAAQ,sBAAsB;AAG5C,OAAOC,YAAY,gCAAgC;AAOnD,OAAO,SAASC,iBAAiB,EAC/BC,SAAS,EACTC,QAAQ,EACc;IACtB,IAAI,CAACD,WAAW,OAAOC;IACvB,qBACE,MAACL,QAAQM,IAAI;;0BACX,KAACN,QAAQO,OAAO;gBAACC,cAAc;gBAAOC,QAAQJ;;0BAC9C,KAACL,QAAQU,MAAM;0BACb,cAAA,KAACV,QAAQW,UAAU;oBAACC,OAAM;oBAAQC,MAAK;oBAAMC,YAAY;8BACvD,cAAA,MAACd,QAAQe,KAAK;wBACZC,WAAWd,OAAOe,KAAK;wBACvBC,cAAc;wBACdC,aAAa,CAACC,IAAMA,EAAEC,cAAc;;0CAEpC,KAACrB,QAAQsB,KAAK;gCAACN,WAAWd,OAAOqB,OAAO;gCAAEC,MAAK;0CAC7C,cAAA,KAACvB;oCAAMwB,MAAM;;;0CAEf,KAACC;gCAAEV,WAAWd,OAAOyB,IAAI;0CAAGvB;;;;;;;;AAMxC"}

package/dist/components/inputs/ReferencePopover.module.css

@@ -0,0 +1,70 @@
+.popup {
+  z-index: 50;
+  position: relative;
+  max-height: 8rem;
+  overflow-y: auto;
+  border-radius: var(--style-radius-m);
+  border: 1px solid var(--theme-border-color);
+  background-color: var(--theme-elevation-50);
+  padding: 0.5rem 2rem 0.5rem 0.75rem;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.popup[data-open] {
+  animation: popoverIn 150ms ease-out;
+}
+
+.popup[data-closed] {
+  animation: popoverOut 100ms ease-in;
+}
+
+@keyframes popoverIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popoverOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+.dismiss {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0.125rem;
+  border-radius: var(--style-radius-s);
+  color: var(--theme-elevation-500);
+}
+
+.dismiss:hover {
+  color: var(--theme-elevation-800);
+}
+
+.text {
+  margin: 0;
+  font-size: var(--font-size-small);
+  color: var(--theme-elevation-500);
+  white-space: pre-wrap;
+  word-break: break-word;
+}

package/dist/components/inputs/SingleLinePlugin.d.ts

@@ -0,0 +1,2 @@
+export declare function SingleLinePlugin(): null;
+//# sourceMappingURL=SingleLinePlugin.d.ts.map

package/dist/components/inputs/SingleLinePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleLinePlugin.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SingleLinePlugin.tsx"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,SA2B/B"}

package/dist/components/inputs/SingleLinePlugin.js

@@ -0,0 +1,24 @@
+import { COMMAND_PRIORITY_HIGH, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND, LineBreakNode } from '@payloadcms/richtext-lexical/lexical';
+import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+export function SingleLinePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(()=>{
+        const unregisterLineBreak = editor.registerCommand(INSERT_LINE_BREAK_COMMAND, ()=>true, COMMAND_PRIORITY_HIGH);
+        const unregisterParagraph = editor.registerCommand(INSERT_PARAGRAPH_COMMAND, ()=>true, COMMAND_PRIORITY_HIGH);
+        // Catch line breaks inserted via paste or other means
+        const unregisterTransform = editor.registerNodeTransform(LineBreakNode, (node)=>{
+            node.remove();
+        });
+        return ()=>{
+            unregisterLineBreak();
+            unregisterParagraph();
+            unregisterTransform();
+        };
+    }, [
+        editor
+    ]);
+    return null;
+}
+
+//# sourceMappingURL=SingleLinePlugin.js.map

package/dist/components/inputs/SingleLinePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inputs/SingleLinePlugin.tsx"],"sourcesContent":["import {\n  COMMAND_PRIORITY_HIGH,\n  INSERT_LINE_BREAK_COMMAND,\n  INSERT_PARAGRAPH_COMMAND,\n  LineBreakNode,\n} from '@payloadcms/richtext-lexical/lexical';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport { useEffect } from 'react';\n\nexport function SingleLinePlugin() {\n  const [editor] = useLexicalComposerContext();\n  useEffect(() => {\n    const unregisterLineBreak = editor.registerCommand(\n      INSERT_LINE_BREAK_COMMAND,\n      () => true,\n      COMMAND_PRIORITY_HIGH,\n    );\n    const unregisterParagraph = editor.registerCommand(\n      INSERT_PARAGRAPH_COMMAND,\n      () => true,\n      COMMAND_PRIORITY_HIGH,\n    );\n    // Catch line breaks inserted via paste or other means\n    const unregisterTransform = editor.registerNodeTransform(\n      LineBreakNode,\n      (node) => {\n        node.remove();\n      },\n    );\n    return () => {\n      unregisterLineBreak();\n      unregisterParagraph();\n      unregisterTransform();\n    };\n  }, [editor]);\n  return null;\n}\n"],"names":["COMMAND_PRIORITY_HIGH","INSERT_LINE_BREAK_COMMAND","INSERT_PARAGRAPH_COMMAND","LineBreakNode","useLexicalComposerContext","useEffect","SingleLinePlugin","editor","unregisterLineBreak","registerCommand","unregisterParagraph","unregisterTransform","registerNodeTransform","node","remove"],"mappings":"AAAA,SACEA,qBAAqB,EACrBC,yBAAyB,EACzBC,wBAAwB,EACxBC,aAAa,QACR,uCAAuC;AAC9C,SAASC,yBAAyB,QAAQ,oEAAoE;AAC9G,SAASC,SAAS,QAAQ,QAAQ;AAElC,OAAO,SAASC;IACd,MAAM,CAACC,OAAO,GAAGH;IACjBC,UAAU;QACR,MAAMG,sBAAsBD,OAAOE,eAAe,CAChDR,2BACA,IAAM,MACND;QAEF,MAAMU,sBAAsBH,OAAOE,eAAe,CAChDP,0BACA,IAAM,MACNF;QAEF,sDAAsD;QACtD,MAAMW,sBAAsBJ,OAAOK,qBAAqB,CACtDT,eACA,CAACU;YACCA,KAAKC,MAAM;QACb;QAEF,OAAO;YACLN;YACAE;YACAC;QACF;IACF,GAAG;QAACJ;KAAO;IACX,OAAO;AACT"}

package/dist/components/inputs/variables/VariableChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableChip.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAwBpE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAkE5E"}
+{"version":3,"file":"VariableChip.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAwBpE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAqE5E"}

package/dist/components/inputs/variables/VariableChip.js

@@ -1,15 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from '@base-ui/react/popover';
 import { $getNodeByKey } from '@payloadcms/richtext-lexical/lexical';
 import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';
-import { Popover } from 'radix-ui';
+import clsx from 'clsx';
 import { useMemo } from 'react';
 import { isArgumentElement, isNumericElement, isSelectElement, isTagElement, isTemporalElement } from '../../../utils/guards';
 import { parseICUMessage } from '../../../utils/icu-tranform';
 import { SelectVariableEditor } from './editors/SelectVariableEditor';
 import { TagVariableEditor } from './editors/TagVariableEditor';
-import { NumericVariablePicker } from './pickers/NumericVariablePicker';
-import { TemporalElementEditor } from './pickers/TemporalElementEditor';
+import { NumericVariableEditor } from './pickers/NumericVariableEditor';
+import { TemporalVariablePicker } from './pickers/TemporalVariablePicker';
 import styles from './VariableChip.module.css';
 const TEMPORAL_ELEMENTS_FLAG = false;
 // TODO replace popover with portal below input field
@@ -44,42 +45,40 @@ export function VariableChip({ name, label, icu, nodeKey }) {
     return /*#__PURE__*/ _jsxs(Popover.Root, {
         children: [
             /*#__PURE__*/ _jsx(Popover.Trigger, {
-                asChild: true,
-                children: /*#__PURE__*/ _jsx("button", {
-                    className: [
-                        styles.chip,
-                        isDisabled ? styles.chipDisabled : undefined
-                    ].filter(Boolean).join(' '),
+                render: /*#__PURE__*/ _jsx("button", {
+                    className: clsx(styles.chip, isDisabled && styles.chipDisabled),
                     "data-icu": icu,
                     "data-variable": name,
-                    type: "button",
-                    children: label
-                })
+                    type: "button"
+                }),
+                children: label
             }),
             /*#__PURE__*/ _jsx(Popover.Portal, {
-                children: /*#__PURE__*/ _jsxs(Popover.Content, {
+                children: /*#__PURE__*/ _jsx(Popover.Positioner, {
                     align: "start",
-                    className: styles.popoverContent,
                     side: "bottom",
                     sideOffset: 5,
-                    children: [
-                        isNumericElement(element) && /*#__PURE__*/ _jsx(NumericVariablePicker, {
-                            element: element,
-                            onUpdate: handleUpdate
-                        }),
-                        isSelectElement(element) && /*#__PURE__*/ _jsx(SelectVariableEditor, {
-                            element: element,
-                            onUpdate: handleUpdate
-                        }),
-                        TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && /*#__PURE__*/ _jsx(TemporalElementEditor, {
-                            element: element,
-                            onUpdate: handleUpdate
-                        }),
-                        isTagElement(element) && /*#__PURE__*/ _jsx(TagVariableEditor, {
-                            element: element,
-                            onUpdate: handleUpdate
-                        })
-                    ]
+                    children: /*#__PURE__*/ _jsxs(Popover.Popup, {
+                        className: styles.popoverContent,
+                        children: [
+                            isNumericElement(element) && /*#__PURE__*/ _jsx(NumericVariableEditor, {
+                                element: element,
+                                onUpdate: handleUpdate
+                            }),
+                            isSelectElement(element) && /*#__PURE__*/ _jsx(SelectVariableEditor, {
+                                element: element,
+                                onUpdate: handleUpdate
+                            }),
+                            TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && /*#__PURE__*/ _jsx(TemporalVariablePicker, {
+                                element: element,
+                                onUpdate: handleUpdate
+                            }),
+                            isTagElement(element) && /*#__PURE__*/ _jsx(TagVariableEditor, {
+                                element: element,
+                                onUpdate: handleUpdate
+                            })
+                        ]
+                    })
                 })
             })
         ]

package/dist/components/inputs/variables/VariableChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"sourcesContent":["'use client';\n\nimport type { NodeKey } from '@payloadcms/richtext-lexical/lexical';\nimport { $getNodeByKey } from '@payloadcms/richtext-lexical/lexical';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport type { BeautifulMentionNode } from 'lexical-beautiful-mentions';\nimport { Popover } from 'radix-ui';\nimport { useMemo } from 'react';\n\nimport {\n  isArgumentElement,\n  isNumericElement,\n  isSelectElement,\n  isTagElement,\n  isTemporalElement,\n} from '@/utils/guards';\nimport { parseICUMessage } from '@/utils/icu-tranform';\n\nimport { SelectVariableEditor } from './editors/SelectVariableEditor';\nimport { TagVariableEditor } from './editors/TagVariableEditor';\nimport { NumericVariablePicker } from './pickers/NumericVariablePicker';\nimport { TemporalElementEditor } from './pickers/TemporalElementEditor';\nimport styles from './VariableChip.module.css';\n\nconst TEMPORAL_ELEMENTS_FLAG = false;\n\nexport interface VariableChipProps {\n  name: string;\n  label: string;\n  icu: string;\n  nodeKey: NodeKey;\n}\n\n// TODO replace popover with portal below input field\n\nexport function VariableChip({ name, label, icu, nodeKey }: VariableChipProps) {\n  const [editor] = useLexicalComposerContext();\n\n  const handleUpdate = (value: string) => {\n    editor.update(() => {\n      const node = $getNodeByKey(nodeKey) as BeautifulMentionNode | null;\n      if (node) {\n        node.setData({ ...node.getData(), icu: value });\n      }\n    });\n  };\n\n  const element = useMemo(() => {\n    try {\n      const [part] = parseICUMessage(icu);\n      if (!part) throw new Error('No part found');\n      return part;\n    } catch (error) {\n      console.error(error);\n      throw new Error(`Invalid ICU: ${icu}`, { cause: error });\n    }\n  }, [icu]);\n\n  const isDisabled =\n    isArgumentElement(element) ||\n    (isTemporalElement(element) && !TEMPORAL_ELEMENTS_FLAG);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <button\n          className={[styles.chip, isDisabled ? styles.chipDisabled : undefined]\n            .filter(Boolean)\n            .join(' ')}\n          data-icu={icu}\n          data-variable={name}\n          type=\"button\"\n        >\n          {/* <VariableIcon type={element.type} className=\"size-4\" /> */}\n          {label}\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          align=\"start\"\n          className={styles.popoverContent}\n          side=\"bottom\"\n          sideOffset={5}\n        >\n          {isNumericElement(element) && (\n            <NumericVariablePicker element={element} onUpdate={handleUpdate} />\n          )}\n          {isSelectElement(element) && (\n            <SelectVariableEditor element={element} onUpdate={handleUpdate} />\n          )}\n          {TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && (\n            <TemporalElementEditor element={element} onUpdate={handleUpdate} />\n          )}\n\n          {isTagElement(element) && (\n            <TagVariableEditor element={element} onUpdate={handleUpdate} />\n          )}\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["$getNodeByKey","useLexicalComposerContext","Popover","useMemo","isArgumentElement","isNumericElement","isSelectElement","isTagElement","isTemporalElement","parseICUMessage","SelectVariableEditor","TagVariableEditor","NumericVariablePicker","TemporalElementEditor","styles","TEMPORAL_ELEMENTS_FLAG","VariableChip","name","label","icu","nodeKey","editor","handleUpdate","value","update","node","setData","getData","element","part","Error","error","console","cause","isDisabled","Root","Trigger","asChild","button","className","chip","chipDisabled","undefined","filter","Boolean","join","data-icu","data-variable","type","Portal","Content","align","popoverContent","side","sideOffset","onUpdate"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ,uCAAuC;AACrE,SAASC,yBAAyB,QAAQ,oEAAoE;AAE9G,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,iBAAiB,QACZ,iBAAiB;AACxB,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,SAASC,oBAAoB,QAAQ,iCAAiC;AACtE,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,yBAAyB;AAS/B,qDAAqD;AAErD,OAAO,SAASC,aAAa,EAAEC,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAEC,OAAO,EAAqB;IAC3E,MAAM,CAACC,OAAO,GAAGpB;IAEjB,MAAMqB,eAAe,CAACC;QACpBF,OAAOG,MAAM,CAAC;YACZ,MAAMC,OAAOzB,cAAcoB;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CAAC;oBAAE,GAAGD,KAAKE,OAAO,EAAE;oBAAER,KAAKI;gBAAM;YAC/C;QACF;IACF;IAEA,MAAMK,UAAUzB,QAAQ;QACtB,IAAI;YACF,MAAM,CAAC0B,KAAK,GAAGpB,gBAAgBU;YAC/B,IAAI,CAACU,MAAM,MAAM,IAAIC,MAAM;YAC3B,OAAOD;QACT,EAAE,OAAOE,OAAO;YACdC,QAAQD,KAAK,CAACA;YACd,MAAM,IAAID,MAAM,CAAC,aAAa,EAAEX,KAAK,EAAE;gBAAEc,OAAOF;YAAM;QACxD;IACF,GAAG;QAACZ;KAAI;IAER,MAAMe,aACJ9B,kBAAkBwB,YACjBpB,kBAAkBoB,YAAY,CAACb;IAElC,qBACE,MAACb,QAAQiC,IAAI;;0BACX,KAACjC,QAAQkC,OAAO;gBAACC,OAAO;0BACtB,cAAA,KAACC;oBACCC,WAAW;wBAACzB,OAAO0B,IAAI;wBAAEN,aAAapB,OAAO2B,YAAY,GAAGC;qBAAU,CACnEC,MAAM,CAACC,SACPC,IAAI,CAAC;oBACRC,YAAU3B;oBACV4B,iBAAe9B;oBACf+B,MAAK;8BAGJ9B;;;0BAGL,KAAChB,QAAQ+C,MAAM;0BACb,cAAA,MAAC/C,QAAQgD,OAAO;oBACdC,OAAM;oBACNZ,WAAWzB,OAAOsC,cAAc;oBAChCC,MAAK;oBACLC,YAAY;;wBAEXjD,iBAAiBuB,0BAChB,KAAChB;4BAAsBgB,SAASA;4BAAS2B,UAAUjC;;wBAEpDhB,gBAAgBsB,0BACf,KAAClB;4BAAqBkB,SAASA;4BAAS2B,UAAUjC;;wBAEnDP,0BAA0BP,kBAAkBoB,0BAC3C,KAACf;4BAAsBe,SAASA;4BAAS2B,UAAUjC;;wBAGpDf,aAAaqB,0BACZ,KAACjB;4BAAkBiB,SAASA;4BAAS2B,UAAUjC;;;;;;;AAM3D"}
+{"version":3,"sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"sourcesContent":["'use client';\n\nimport { Popover } from '@base-ui/react/popover';\nimport type { NodeKey } from '@payloadcms/richtext-lexical/lexical';\nimport { $getNodeByKey } from '@payloadcms/richtext-lexical/lexical';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport clsx from 'clsx';\nimport type { BeautifulMentionNode } from 'lexical-beautiful-mentions';\nimport { useMemo } from 'react';\n\nimport {\n  isArgumentElement,\n  isNumericElement,\n  isSelectElement,\n  isTagElement,\n  isTemporalElement,\n} from '@/utils/guards';\nimport { parseICUMessage } from '@/utils/icu-tranform';\n\nimport { SelectVariableEditor } from './editors/SelectVariableEditor';\nimport { TagVariableEditor } from './editors/TagVariableEditor';\nimport { NumericVariableEditor } from './pickers/NumericVariableEditor';\nimport { TemporalVariablePicker } from './pickers/TemporalVariablePicker';\nimport styles from './VariableChip.module.css';\n\nconst TEMPORAL_ELEMENTS_FLAG = false;\n\nexport interface VariableChipProps {\n  name: string;\n  label: string;\n  icu: string;\n  nodeKey: NodeKey;\n}\n\n// TODO replace popover with portal below input field\n\nexport function VariableChip({ name, label, icu, nodeKey }: VariableChipProps) {\n  const [editor] = useLexicalComposerContext();\n\n  const handleUpdate = (value: string) => {\n    editor.update(() => {\n      const node = $getNodeByKey(nodeKey) as BeautifulMentionNode | null;\n      if (node) {\n        node.setData({ ...node.getData(), icu: value });\n      }\n    });\n  };\n\n  const element = useMemo(() => {\n    try {\n      const [part] = parseICUMessage(icu);\n      if (!part) throw new Error('No part found');\n      return part;\n    } catch (error) {\n      console.error(error);\n      throw new Error(`Invalid ICU: ${icu}`, { cause: error });\n    }\n  }, [icu]);\n\n  const isDisabled =\n    isArgumentElement(element) ||\n    (isTemporalElement(element) && !TEMPORAL_ELEMENTS_FLAG);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger\n        render={\n          <button\n            className={clsx(styles.chip, isDisabled && styles.chipDisabled)}\n            data-icu={icu}\n            data-variable={name}\n            type=\"button\"\n          />\n        }\n      >\n        {/* <VariableIcon type={element.type} className=\"size-4\" /> */}\n        {label}\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner align=\"start\" side=\"bottom\" sideOffset={5}>\n          <Popover.Popup className={styles.popoverContent}>\n            {isNumericElement(element) && (\n              <NumericVariableEditor\n                element={element}\n                onUpdate={handleUpdate}\n              />\n            )}\n            {isSelectElement(element) && (\n              <SelectVariableEditor element={element} onUpdate={handleUpdate} />\n            )}\n            {TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && (\n              <TemporalVariablePicker\n                element={element}\n                onUpdate={handleUpdate}\n              />\n            )}\n\n            {isTagElement(element) && (\n              <TagVariableEditor element={element} onUpdate={handleUpdate} />\n            )}\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["Popover","$getNodeByKey","useLexicalComposerContext","clsx","useMemo","isArgumentElement","isNumericElement","isSelectElement","isTagElement","isTemporalElement","parseICUMessage","SelectVariableEditor","TagVariableEditor","NumericVariableEditor","TemporalVariablePicker","styles","TEMPORAL_ELEMENTS_FLAG","VariableChip","name","label","icu","nodeKey","editor","handleUpdate","value","update","node","setData","getData","element","part","Error","error","console","cause","isDisabled","Root","Trigger","render","button","className","chip","chipDisabled","data-icu","data-variable","type","Portal","Positioner","align","side","sideOffset","Popup","popoverContent","onUpdate"],"mappings":"AAAA;;AAEA,SAASA,OAAO,QAAQ,yBAAyB;AAEjD,SAASC,aAAa,QAAQ,uCAAuC;AACrE,SAASC,yBAAyB,QAAQ,oEAAoE;AAC9G,OAAOC,UAAU,OAAO;AAExB,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,iBAAiB,QACZ,iBAAiB;AACxB,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,SAASC,oBAAoB,QAAQ,iCAAiC;AACtE,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,sBAAsB,QAAQ,mCAAmC;AAC1E,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,yBAAyB;AAS/B,qDAAqD;AAErD,OAAO,SAASC,aAAa,EAAEC,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAEC,OAAO,EAAqB;IAC3E,MAAM,CAACC,OAAO,GAAGpB;IAEjB,MAAMqB,eAAe,CAACC;QACpBF,OAAOG,MAAM,CAAC;YACZ,MAAMC,OAAOzB,cAAcoB;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CAAC;oBAAE,GAAGD,KAAKE,OAAO,EAAE;oBAAER,KAAKI;gBAAM;YAC/C;QACF;IACF;IAEA,MAAMK,UAAUzB,QAAQ;QACtB,IAAI;YACF,MAAM,CAAC0B,KAAK,GAAGpB,gBAAgBU;YAC/B,IAAI,CAACU,MAAM,MAAM,IAAIC,MAAM;YAC3B,OAAOD;QACT,EAAE,OAAOE,OAAO;YACdC,QAAQD,KAAK,CAACA;YACd,MAAM,IAAID,MAAM,CAAC,aAAa,EAAEX,KAAK,EAAE;gBAAEc,OAAOF;YAAM;QACxD;IACF,GAAG;QAACZ;KAAI;IAER,MAAMe,aACJ9B,kBAAkBwB,YACjBpB,kBAAkBoB,YAAY,CAACb;IAElC,qBACE,MAAChB,QAAQoC,IAAI;;0BACX,KAACpC,QAAQqC,OAAO;gBACdC,sBACE,KAACC;oBACCC,WAAWrC,KAAKY,OAAO0B,IAAI,EAAEN,cAAcpB,OAAO2B,YAAY;oBAC9DC,YAAUvB;oBACVwB,iBAAe1B;oBACf2B,MAAK;;0BAKR1B;;0BAEH,KAACnB,QAAQ8C,MAAM;0BACb,cAAA,KAAC9C,QAAQ+C,UAAU;oBAACC,OAAM;oBAAQC,MAAK;oBAASC,YAAY;8BAC1D,cAAA,MAAClD,QAAQmD,KAAK;wBAACX,WAAWzB,OAAOqC,cAAc;;4BAC5C9C,iBAAiBuB,0BAChB,KAAChB;gCACCgB,SAASA;gCACTwB,UAAU9B;;4BAGbhB,gBAAgBsB,0BACf,KAAClB;gCAAqBkB,SAASA;gCAASwB,UAAU9B;;4BAEnDP,0BAA0BP,kBAAkBoB,0BAC3C,KAACf;gCACCe,SAASA;gCACTwB,UAAU9B;;4BAIbf,aAAaqB,0BACZ,KAACjB;gCAAkBiB,SAASA;gCAASwB,UAAU9B;;;;;;;;AAO7D"}

package/dist/components/inputs/variables/VariableChip.module.css

@@ -20,7 +20,7 @@
 .popoverContent {
   z-index: 50;
   display: grid;
-  transform-origin: var(--radix-hover-card-content-transform-origin);
+  transform-origin: var(--transform-origin);
   overflow: clip;
   border-radius: var(--style-radius-m);
   border: 1px solid var(--theme-border-color);
@@ -35,11 +35,11 @@
   display: none;
 }
 
-.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/VariableSuggestion.d.ts

@@ -0,0 +1,4 @@
+import type { BeautifulMentionsMenuItemProps, BeautifulMentionsMenuProps } from 'lexical-beautiful-mentions';
+export declare const MentionMenu: import("react").ForwardRefExoticComponent<Omit<BeautifulMentionsMenuProps, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+export declare const MentionMenuItem: import("react").ForwardRefExoticComponent<Omit<BeautifulMentionsMenuItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=VariableSuggestion.d.ts.map

package/dist/components/inputs/variables/VariableSuggestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableSuggestion.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableSuggestion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,8BAA8B,EAC9B,0BAA0B,EAC3B,MAAM,4BAA4B,CAAC;AAKpC,eAAO,MAAM,WAAW,sIAKtB,CAAC;AAEH,eAAO,MAAM,eAAe,uIAoB1B,CAAC"}

package/dist/components/inputs/variables/VariableSuggestion.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './VariableSuggestion.module.css';
+export const MentionMenu = /*#__PURE__*/ forwardRef(({ loading: _, ...props }, ref)=>/*#__PURE__*/ _jsx("ul", {
+        ...props,
+        className: styles.list,
+        ref: ref
+    }));
+export const MentionMenuItem = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx("li", {
+        "aria-selected": props.selected,
+        className: clsx(styles.item, props.selected && styles.itemSelected),
+        onClick: props.onClick,
+        onKeyDown: props.onKeyDown,
+        onMouseDown: props.onMouseDown,
+        onMouseEnter: props.onMouseEnter,
+        ref: ref,
+        // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: standard WAI-ARIA listbox/option pattern
+        role: "option",
+        tabIndex: -1,
+        children: typeof props.item.data?.label === 'string' ? props.item.data.label : props.item.displayValue
+    }));
+
+//# sourceMappingURL=VariableSuggestion.js.map

package/dist/components/inputs/variables/VariableSuggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/inputs/variables/VariableSuggestion.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type {\n  BeautifulMentionsMenuItemProps,\n  BeautifulMentionsMenuProps,\n} from 'lexical-beautiful-mentions';\nimport { forwardRef } from 'react';\n\nimport styles from './VariableSuggestion.module.css';\n\nexport const MentionMenu = forwardRef<\n  HTMLUListElement,\n  BeautifulMentionsMenuProps\n>(({ loading: _, ...props }, ref) => (\n  <ul {...props} className={styles.list} ref={ref} />\n));\n\nexport const MentionMenuItem = forwardRef<\n  HTMLLIElement,\n  BeautifulMentionsMenuItemProps\n>((props, ref) => (\n  <li\n    aria-selected={props.selected}\n    className={clsx(styles.item, props.selected && styles.itemSelected)}\n    onClick={props.onClick}\n    onKeyDown={props.onKeyDown}\n    onMouseDown={props.onMouseDown}\n    onMouseEnter={props.onMouseEnter}\n    ref={ref}\n    // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: standard WAI-ARIA listbox/option pattern\n    role=\"option\"\n    tabIndex={-1}\n  >\n    {typeof props.item.data?.label === 'string'\n      ? props.item.data.label\n      : props.item.displayValue}\n  </li>\n));\n"],"names":["clsx","forwardRef","styles","MentionMenu","loading","_","props","ref","ul","className","list","MentionMenuItem","li","aria-selected","selected","item","itemSelected","onClick","onKeyDown","onMouseDown","onMouseEnter","role","tabIndex","data","label","displayValue"],"mappings":";AAAA,OAAOA,UAAU,OAAO;AAKxB,SAASC,UAAU,QAAQ,QAAQ;AAEnC,OAAOC,YAAY,kCAAkC;AAErD,OAAO,MAAMC,4BAAcF,WAGzB,CAAC,EAAEG,SAASC,CAAC,EAAE,GAAGC,OAAO,EAAEC,oBAC3B,KAACC;QAAI,GAAGF,KAAK;QAAEG,WAAWP,OAAOQ,IAAI;QAAEH,KAAKA;QAC3C;AAEH,OAAO,MAAMI,gCAAkBV,WAG7B,CAACK,OAAOC,oBACR,KAACK;QACCC,iBAAeP,MAAMQ,QAAQ;QAC7BL,WAAWT,KAAKE,OAAOa,IAAI,EAAET,MAAMQ,QAAQ,IAAIZ,OAAOc,YAAY;QAClEC,SAASX,MAAMW,OAAO;QACtBC,WAAWZ,MAAMY,SAAS;QAC1BC,aAAab,MAAMa,WAAW;QAC9BC,cAAcd,MAAMc,YAAY;QAChCb,KAAKA;QACL,4GAA4G;QAC5Gc,MAAK;QACLC,UAAU,CAAC;kBAEV,OAAOhB,MAAMS,IAAI,CAACQ,IAAI,EAAEC,UAAU,WAC/BlB,MAAMS,IAAI,CAACQ,IAAI,CAACC,KAAK,GACrBlB,MAAMS,IAAI,CAACU,YAAY;QAE5B"}

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

@@ -1 +1 @@
-{"version":3,"file":"PluralVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,aAAa,GAAG,SAAS,CAAC;IACnC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;QAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAID,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,OAAO,EACP,GAAG,GACJ,EAAE,yBAAyB,2CAuK3B"}
+{"version":3,"file":"PluralVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,aAAa,GAAG,SAAS,CAAC;IACnC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;QAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAID,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,OAAO,EACP,GAAG,GACJ,EAAE,yBAAyB,2CAyK3B"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from '@base-ui/react/popover';
 import { TYPE } from '@formatjs/icu-messageformat-parser';
 import { IconX } from '@tabler/icons-react';
-import { Popover } from 'radix-ui';
 import { Fragment, useImperativeHandle, useMemo } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { parseICUMessage, serializeICUMessage } from '../../../../utils/icu-tranform';
@@ -121,66 +121,68 @@ export function PluralVariableEditor({ variableName, element, ref }) {
                                 children: "Add Option"
                             }),
                             /*#__PURE__*/ _jsx(Popover.Portal, {
-                                children: /*#__PURE__*/ _jsxs(Popover.Content, {
-                                    className: styles.popoverContent,
+                                children: /*#__PURE__*/ _jsx(Popover.Positioner, {
                                     sideOffset: 4,
-                                    children: [
-                                        /*#__PURE__*/ _jsx("div", {
-                                            className: styles.optionsList,
-                                            children: NAMED_PLURAL_OPTIONS.filter((option)=>options.fields.every((field)=>field.name !== option)).map((option)=>/*#__PURE__*/ _jsx(Popover.Close, {
-                                                    className: styles.optionItem,
-                                                    onClick: ()=>{
-                                                        // TODO ensure the fields are always in the same order as staticPluralOptions
-                                                        options.append({
-                                                            name: option,
-                                                            content: ''
-                                                        }, {
-                                                            shouldFocus: true
-                                                        });
-                                                    },
-                                                    children: option
-                                                }, option))
-                                        }),
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            className: styles.customInputGroup,
-                                            children: [
-                                                /*#__PURE__*/ _jsx("label", {
-                                                    htmlFor: "customValue",
-                                                    children: "custom"
-                                                }),
-                                                /*#__PURE__*/ _jsx(Controller, {
-                                                    control: control,
-                                                    name: "customValue",
-                                                    render: ({ field })=>/*#__PURE__*/ _jsx("input", {
-                                                            className: styles.customInput,
-                                                            min: 0,
-                                                            onChange: ({ currentTarget: { value } })=>{
-                                                                const number = Number(value);
-                                                                if (Number.isNaN(number)) return;
-                                                                if (number < 0) return;
-                                                                field.onChange(number);
-                                                            },
-                                                            onKeyDown: (e)=>{
-                                                                if (e.key !== 'Enter') return;
-                                                                if (field.value === undefined) return;
-                                                                const isUnique = !options.fields.some((existingField)=>existingField.name === `=${field.value}`);
-                                                                if (!isUnique) return; // TODO maybe show error?
-                                                                options.append({
-                                                                    name: `=${field.value}`,
-                                                                    content: ''
-                                                                }, {
-                                                                    shouldFocus: true
-                                                                });
-                                                                field.onChange(undefined);
-                                                            },
-                                                            placeholder: "=0",
-                                                            type: "numeric",
-                                                            value: field.value ?? ''
-                                                        })
-                                                })
-                                            ]
-                                        })
-                                    ]
+                                    children: /*#__PURE__*/ _jsxs(Popover.Popup, {
+                                        className: styles.popoverContent,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: styles.optionsList,
+                                                children: NAMED_PLURAL_OPTIONS.filter((option)=>options.fields.every((field)=>field.name !== option)).map((option)=>/*#__PURE__*/ _jsx(Popover.Close, {
+                                                        className: styles.optionItem,
+                                                        onClick: ()=>{
+                                                            // TODO ensure the fields are always in the same order as staticPluralOptions
+                                                            options.append({
+                                                                name: option,
+                                                                content: ''
+                                                            }, {
+                                                                shouldFocus: true
+                                                            });
+                                                        },
+                                                        children: option
+                                                    }, option))
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: styles.customInputGroup,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("label", {
+                                                        htmlFor: "customValue",
+                                                        children: "custom"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Controller, {
+                                                        control: control,
+                                                        name: "customValue",
+                                                        render: ({ field })=>/*#__PURE__*/ _jsx("input", {
+                                                                className: styles.customInput,
+                                                                min: 0,
+                                                                onChange: ({ currentTarget: { value } })=>{
+                                                                    const number = Number(value);
+                                                                    if (Number.isNaN(number)) return;
+                                                                    if (number < 0) return;
+                                                                    field.onChange(number);
+                                                                },
+                                                                onKeyDown: (e)=>{
+                                                                    if (e.key !== 'Enter') return;
+                                                                    if (field.value === undefined) return;
+                                                                    const isUnique = !options.fields.some((existingField)=>existingField.name === `=${field.value}`);
+                                                                    if (!isUnique) return; // TODO maybe show error?
+                                                                    options.append({
+                                                                        name: `=${field.value}`,
+                                                                        content: ''
+                                                                    }, {
+                                                                        shouldFocus: true
+                                                                    });
+                                                                    field.onChange(undefined);
+                                                                },
+                                                                placeholder: "=0",
+                                                                type: "numeric",
+                                                                value: field.value ?? ''
+                                                            })
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
                                 })
                             })
                         ]

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