payload-intl 1.1.2 → 1.2.0

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

@@ -1,67 +1,89 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { NodeViewWrapper as l } from "@tiptap/react";
-import { Popover as a } from "radix-ui";
-import { useMemo as c } from "react";
-import { cn as p } from "../../../utils/cn.js";
-import { isTemporalElement as f, isNumericElement as u } from "../../../utils/guards.js";
-import { parseICUMessage as b } from "../../../utils/icu-tranform.js";
-import { SelectVariableEditor as h } from "./editors/SelectVariableEditor.js";
-import { TagVariableEditor as g } from "./editors/TagVariableEditor.js";
-import { NumericVariablePicker as E } from "./pickers/NumericVariablePicker.js";
-import { isArgumentElement as v, isSelectElement as w, isTagElement as x } from "@formatjs/icu-messageformat-parser";
-const d = !1;
-function S({
-  node: s,
-  updateAttributes: m
-}) {
-  const o = s.attrs, i = (t) => m({
-    icu: t
-  }), e = c(() => {
-    try {
-      const [t] = b(o.icu);
-      if (!t) throw new Error("No part found");
-      return t;
-    } catch (t) {
-      throw console.error(t), new Error(`Invalid ICU: ${o.icu}`, { cause: t });
-    }
-  }, [o.icu]);
-  return /* @__PURE__ */ n(a.Root, { children: [
-    /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
-      l,
-      {
-        as: "span",
-        className: p(
-          "inline-flex cursor-pointer items-center rounded-md bg-elevation-250 px-1 hover:bg-elevation-400",
-          {
-            "pointer-events-none": v(e) || f(e) && !d
-          }
-        ),
-        contentEditable: !1,
-        "data-icu": o.icu,
-        "data-variable": o.name,
-        role: "button",
-        tabIndex: 0,
-        children: o.label
-      }
-    ) }),
-    /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ n(
-      a.Content,
-      {
-        align: "start",
-        className: "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 grid origin-(--radix-hover-card-content-transform-origin) overflow-clip rounded-md border border-border bg-elevation-50 shadow-md outline-hidden empty:hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
-        side: "bottom",
-        sideOffset: 5,
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { $getNodeByKey } from '@payloadcms/richtext-lexical/lexical';
+import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';
+import { Popover } from 'radix-ui';
+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 styles from './VariableChip.module.css';
+const TEMPORAL_ELEMENTS_FLAG = false;
+// TODO replace popover with portal below input field
+export function VariableChip({ name, label, icu, nodeKey }) {
+    const [editor] = useLexicalComposerContext();
+    const handleUpdate = (value)=>{
+        editor.update(()=>{
+            const node = $getNodeByKey(nodeKey);
+            if (node) {
+                node.setData({
+                    ...node.getData(),
+                    icu: value
+                });
+            }
+        });
+    };
+    const element = useMemo(()=>{
+        try {
+            const [part] = parseICUMessage(icu);
+            if (!part) throw new Error('No part found');
+            return part;
+        } catch (error) {
+            console.error(error);
+            throw new Error(`Invalid ICU: ${icu}`, {
+                cause: error
+            });
+        }
+    }, [
+        icu
+    ]);
+    const isDisabled = isArgumentElement(element) || isTemporalElement(element) && !TEMPORAL_ELEMENTS_FLAG;
+    return /*#__PURE__*/ _jsxs(Popover.Root, {
         children: [
-          u(e) && /* @__PURE__ */ r(E, { element: e, onUpdate: i }),
-          w(e) && /* @__PURE__ */ r(h, { element: e, onUpdate: i }),
-          d,
-          x(e) && /* @__PURE__ */ r(g, { element: e, onUpdate: i })
+            /*#__PURE__*/ _jsx(Popover.Trigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx("button", {
+                    className: [
+                        styles.chip,
+                        isDisabled ? styles.chipDisabled : undefined
+                    ].filter(Boolean).join(' '),
+                    "data-icu": icu,
+                    "data-variable": name,
+                    type: "button",
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ _jsx(Popover.Portal, {
+                children: /*#__PURE__*/ _jsxs(Popover.Content, {
+                    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
+                        })
+                    ]
+                })
+            })
         ]
-      }
-    ) })
-  ] });
+    });
 }
-export {
-  S as VariableChip
-};
-//# sourceMappingURL=VariableChip.js.map
+
+//# sourceMappingURL=VariableChip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VariableChip.js","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"sourcesContent":["import type { ReactNodeViewProps } from '@tiptap/react';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { Popover } from 'radix-ui';\nimport { useMemo } from 'react';\nimport type { VariableMentionNodeAttrs } from '@/types';\n\nimport { cn } from '@/utils/cn';\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 { VariableIcon } from './VariableIcon';\n\nconst TEMPORAL_ELEMENTS_FLAG = false;\n\n// TODO replace popover with portal below input field\n\nexport function VariableChip({\n  node,\n  updateAttributes,\n}: ReactNodeViewProps<HTMLElement>) {\n  const attrs = node.attrs as VariableMentionNodeAttrs;\n  const handleUpdate = (value: string) =>\n    updateAttributes({\n      icu: value,\n    });\n\n  const element = useMemo(() => {\n    try {\n      const [part] = parseICUMessage(attrs.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: ${attrs.icu}`, { cause: error });\n    }\n  }, [attrs.icu]);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <NodeViewWrapper\n          as=\"span\"\n          className={cn(\n            'inline-flex cursor-pointer items-center rounded-md bg-elevation-250 px-1 hover:bg-elevation-400',\n            {\n              'pointer-events-none':\n                isArgumentElement(element) ||\n                (isTemporalElement(element) && !TEMPORAL_ELEMENTS_FLAG),\n            },\n          )}\n          contentEditable={false}\n          data-icu={attrs.icu}\n          data-variable={attrs.name}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {/* <VariableIcon type={element.type} className=\"size-4\" /> */}\n          {attrs.label}\n        </NodeViewWrapper>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          align=\"start\"\n          className=\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 grid origin-(--radix-hover-card-content-transform-origin) overflow-clip rounded-md border border-border bg-elevation-50 shadow-md outline-hidden empty:hidden data-[state=closed]:animate-out data-[state=open]:animate-in\"\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":["TEMPORAL_ELEMENTS_FLAG","VariableChip","node","updateAttributes","attrs","handleUpdate","value","element","useMemo","part","parseICUMessage","error","jsxs","Popover","jsx","NodeViewWrapper","cn","isArgumentElement","isTemporalElement","isNumericElement","NumericVariablePicker","isSelectElement","SelectVariableEditor","isTagElement","TagVariableEditor"],"mappings":";;;;;;;;;;;AAsBA,MAAMA,IAAyB;AAIxB,SAASC,EAAa;AAAA,EAC3B,MAAAC;AAAA,EACA,kBAAAC;AACF,GAAoC;AAClC,QAAMC,IAAQF,EAAK,OACbG,IAAe,CAACC,MACpBH,EAAiB;AAAA,IACf,KAAKG;AAAA,EAAA,CACN,GAEGC,IAAUC,EAAQ,MAAM;AAC5B,QAAI;AACF,YAAM,CAACC,CAAI,IAAIC,EAAgBN,EAAM,GAAG;AACxC,UAAI,CAACK,EAAM,OAAM,IAAI,MAAM,eAAe;AAC1C,aAAOA;AAAA,IACT,SAASE,GAAO;AACd,oBAAQ,MAAMA,CAAK,GACb,IAAI,MAAM,gBAAgBP,EAAM,GAAG,IAAI,EAAE,OAAOO,GAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAACP,EAAM,GAAG,CAAC;AAEd,SACE,gBAAAQ,EAACC,EAAQ,MAAR,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACtB,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,YACE,uBACEC,EAAkBV,CAAO,KACxBW,EAAkBX,CAAO,KAAK,CAACP;AAAA,UAAA;AAAA,QACpC;AAAA,QAEF,iBAAiB;AAAA,QACjB,YAAUI,EAAM;AAAA,QAChB,iBAAeA,EAAM;AAAA,QACrB,MAAK;AAAA,QACL,UAAU;AAAA,QAGT,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,GAEX;AAAA,IACA,gBAAAU,EAACD,EAAQ,QAAR,EACC,UAAA,gBAAAD;AAAA,MAACC,EAAQ;AAAA,MAAR;AAAA,QACC,OAAM;AAAA,QACN,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QAEX,UAAA;AAAA,UAAAM,EAAiBZ,CAAO,KACvB,gBAAAO,EAACM,GAAA,EAAsB,SAAAb,GAAkB,UAAUF,GAAc;AAAA,UAElEgB,EAAgBd,CAAO,uBACrBe,GAAA,EAAqB,SAAAf,GAAkB,UAAUF,GAAc;AAAA,UAEjEL;AAAA,UAIAuB,EAAahB,CAAO,uBAClBiB,GAAA,EAAkB,SAAAjB,GAAkB,UAAUF,EAAA,CAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAEjE,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"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"}

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

@@ -0,0 +1,66 @@
+.chip {
+  display: inline-flex;
+  cursor: pointer;
+  align-items: center;
+  border-radius: var(--style-radius-m);
+  background-color: var(--theme-elevation-250);
+  padding-inline: 0.25rem;
+  appearance: none;
+  border: none;
+}
+
+.chip:hover {
+  background-color: var(--theme-elevation-400);
+}
+
+.chipDisabled {
+  pointer-events: none;
+}
+
+.popoverContent {
+  z-index: 50;
+  display: grid;
+  transform-origin: var(--radix-hover-card-content-transform-origin);
+  overflow: clip;
+  border-radius: var(--style-radius-m);
+  border: 1px solid var(--theme-border-color);
+  background-color: var(--theme-elevation-50);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  outline: none;
+}
+
+.popoverContent:empty {
+  display: none;
+}
+
+.popoverContent[data-state="open"] {
+  animation: popoverIn 150ms ease-out;
+}
+
+.popoverContent[data-state="closed"] {
+  animation: popoverOut 150ms ease-in;
+}
+
+@keyframes popoverIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes popoverOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}

package/dist/components/inputs/variables/VariableIcon.d.ts

@@ -1,5 +1,5 @@
 import { TYPE } from '@formatjs/icu-messageformat-parser';
-import { IconProps } from '@tabler/icons-react';
+import type { IconProps } from '@tabler/icons-react';
 export interface VariableIconProps extends Omit<IconProps, 'type'> {
     type: TYPE;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"VariableIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oCAAoC,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAUrD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IAChE,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,kDAmBjE"}
+{"version":3,"file":"VariableIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oCAAoC,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AASrD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IAChE,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,kDAmBjE"}

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TYPE } from '@formatjs/icu-messageformat-parser';
+import { IconAntennaBars5, IconCalendar, IconClock, IconHash, IconLayoutList } from '@tabler/icons-react';
+export function VariableIcon({ type, ...props }) {
+    switch(type){
+        case TYPE.literal:
+        case TYPE.argument:
+        case TYPE.pound:
+            return null;
+        case TYPE.number:
+            return /*#__PURE__*/ _jsx(IconHash, {
+                ...props
+            });
+        case TYPE.date:
+            return /*#__PURE__*/ _jsx(IconCalendar, {
+                ...props
+            });
+        case TYPE.time:
+            return /*#__PURE__*/ _jsx(IconClock, {
+                ...props
+            });
+        case TYPE.select:
+            return /*#__PURE__*/ _jsx(IconLayoutList, {
+                ...props
+            });
+        case TYPE.plural:
+            return /*#__PURE__*/ _jsx(IconAntennaBars5, {
+                ...props
+            });
+        case TYPE.tag:
+            return null;
+    }
+}
+
+//# sourceMappingURL=VariableIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/inputs/variables/VariableIcon.tsx"],"sourcesContent":["import { TYPE } from '@formatjs/icu-messageformat-parser';\nimport type { IconProps } from '@tabler/icons-react';\nimport {\n  IconAntennaBars5,\n  IconCalendar,\n  IconClock,\n  IconHash,\n  IconLayoutList,\n} from '@tabler/icons-react';\n\nexport interface VariableIconProps extends Omit<IconProps, 'type'> {\n  type: TYPE;\n}\n\nexport function VariableIcon({ type, ...props }: VariableIconProps) {\n  switch (type) {\n    case TYPE.literal:\n    case TYPE.argument:\n    case TYPE.pound:\n      return null;\n    case TYPE.number:\n      return <IconHash {...props} />;\n    case TYPE.date:\n      return <IconCalendar {...props} />;\n    case TYPE.time:\n      return <IconClock {...props} />;\n    case TYPE.select:\n      return <IconLayoutList {...props} />;\n    case TYPE.plural:\n      return <IconAntennaBars5 {...props} />;\n    case TYPE.tag:\n      return null;\n  }\n}\n"],"names":["TYPE","IconAntennaBars5","IconCalendar","IconClock","IconHash","IconLayoutList","VariableIcon","type","props","literal","argument","pound","number","date","time","select","plural","tag"],"mappings":";AAAA,SAASA,IAAI,QAAQ,qCAAqC;AAE1D,SACEC,gBAAgB,EAChBC,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,cAAc,QACT,sBAAsB;AAM7B,OAAO,SAASC,aAAa,EAAEC,IAAI,EAAE,GAAGC,OAA0B;IAChE,OAAQD;QACN,KAAKP,KAAKS,OAAO;QACjB,KAAKT,KAAKU,QAAQ;QAClB,KAAKV,KAAKW,KAAK;YACb,OAAO;QACT,KAAKX,KAAKY,MAAM;YACd,qBAAO,KAACR;gBAAU,GAAGI,KAAK;;QAC5B,KAAKR,KAAKa,IAAI;YACZ,qBAAO,KAACX;gBAAc,GAAGM,KAAK;;QAChC,KAAKR,KAAKc,IAAI;YACZ,qBAAO,KAACX;gBAAW,GAAGK,KAAK;;QAC7B,KAAKR,KAAKe,MAAM;YACd,qBAAO,KAACV;gBAAgB,GAAGG,KAAK;;QAClC,KAAKR,KAAKgB,MAAM;YACd,qBAAO,KAACf;gBAAkB,GAAGO,KAAK;;QACpC,KAAKR,KAAKiB,GAAG;YACX,OAAO;IACX;AACF"}

package/dist/components/inputs/variables/VariableNode.d.ts

@@ -0,0 +1,11 @@
+import type { EditorConfig, LexicalEditor } from '@payloadcms/richtext-lexical/lexical';
+import { BeautifulMentionNode, type SerializedBeautifulMentionNode } from 'lexical-beautiful-mentions';
+export declare class VariableMentionNode extends BeautifulMentionNode {
+    static getType(): string;
+    static clone(node: VariableMentionNode): VariableMentionNode;
+    static importJSON(serializedNode: SerializedBeautifulMentionNode): VariableMentionNode;
+    exportJSON(): SerializedBeautifulMentionNode;
+    getTextContent(): string;
+    decorate(_editor: LexicalEditor, _config: EditorConfig): React.JSX.Element;
+}
+//# sourceMappingURL=VariableNode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableNode.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACd,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,KAAK,8BAA8B,EACpC,MAAM,4BAA4B,CAAC;AAIpC,qBAAa,mBAAoB,SAAQ,oBAAoB;IAC3D,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,mBAAmB,GAAG,mBAAmB;IAS5D,MAAM,CAAC,UAAU,CACf,cAAc,EAAE,8BAA8B,GAC7C,mBAAmB;IAQtB,UAAU,IAAI,8BAA8B;IAO5C,cAAc,IAAI,MAAM;IAKxB,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;CAW3E"}

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

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BeautifulMentionNode } from 'lexical-beautiful-mentions';
+import { VariableChip } from './VariableChip';
+export class VariableMentionNode extends BeautifulMentionNode {
+    static getType() {
+        return 'variableMention';
+    }
+    static clone(node) {
+        return new VariableMentionNode(node.__trigger, node.__value, node.__data, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return new VariableMentionNode(serializedNode.trigger, serializedNode.value, serializedNode.data);
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'variableMention'
+        };
+    }
+    getTextContent() {
+        const icu = this.__data?.icu;
+        return typeof icu === 'string' ? icu : `{${this.__value}}`;
+    }
+    decorate(_editor, _config) {
+        const data = this.__data;
+        return /*#__PURE__*/ _jsx(VariableChip, {
+            icu: this.getTextContent(),
+            label: typeof data?.label === 'string' ? data.label : this.__value,
+            name: this.__value,
+            nodeKey: this.__key
+        });
+    }
+}
+
+//# sourceMappingURL=VariableNode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/inputs/variables/VariableNode.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  EditorConfig,\n  LexicalEditor,\n} from '@payloadcms/richtext-lexical/lexical';\nimport {\n  BeautifulMentionNode,\n  type SerializedBeautifulMentionNode,\n} from 'lexical-beautiful-mentions';\n\nimport { VariableChip } from './VariableChip';\n\nexport class VariableMentionNode extends BeautifulMentionNode {\n  static getType(): string {\n    return 'variableMention';\n  }\n\n  static clone(node: VariableMentionNode): VariableMentionNode {\n    return new VariableMentionNode(\n      node.__trigger,\n      node.__value,\n      node.__data,\n      node.__key,\n    );\n  }\n\n  static importJSON(\n    serializedNode: SerializedBeautifulMentionNode,\n  ): VariableMentionNode {\n    return new VariableMentionNode(\n      serializedNode.trigger,\n      serializedNode.value,\n      serializedNode.data,\n    );\n  }\n\n  exportJSON(): SerializedBeautifulMentionNode {\n    return {\n      ...super.exportJSON(),\n      type: 'variableMention',\n    };\n  }\n\n  getTextContent(): string {\n    const icu = this.__data?.icu;\n    return typeof icu === 'string' ? icu : `{${this.__value}}`;\n  }\n\n  decorate(_editor: LexicalEditor, _config: EditorConfig): React.JSX.Element {\n    const data = this.__data;\n    return (\n      <VariableChip\n        icu={this.getTextContent()}\n        label={typeof data?.label === 'string' ? data.label : this.__value}\n        name={this.__value}\n        nodeKey={this.__key}\n      />\n    );\n  }\n}\n"],"names":["BeautifulMentionNode","VariableChip","VariableMentionNode","getType","clone","node","__trigger","__value","__data","__key","importJSON","serializedNode","trigger","value","data","exportJSON","type","getTextContent","icu","decorate","_editor","_config","label","name","nodeKey"],"mappings":"AAAA;;AAMA,SACEA,oBAAoB,QAEf,6BAA6B;AAEpC,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,OAAO,MAAMC,4BAA4BF;IACvC,OAAOG,UAAkB;QACvB,OAAO;IACT;IAEA,OAAOC,MAAMC,IAAyB,EAAuB;QAC3D,OAAO,IAAIH,oBACTG,KAAKC,SAAS,EACdD,KAAKE,OAAO,EACZF,KAAKG,MAAM,EACXH,KAAKI,KAAK;IAEd;IAEA,OAAOC,WACLC,cAA8C,EACzB;QACrB,OAAO,IAAIT,oBACTS,eAAeC,OAAO,EACtBD,eAAeE,KAAK,EACpBF,eAAeG,IAAI;IAEvB;IAEAC,aAA6C;QAC3C,OAAO;YACL,GAAG,KAAK,CAACA,YAAY;YACrBC,MAAM;QACR;IACF;IAEAC,iBAAyB;QACvB,MAAMC,MAAM,IAAI,CAACV,MAAM,EAAEU;QACzB,OAAO,OAAOA,QAAQ,WAAWA,MAAM,CAAC,CAAC,EAAE,IAAI,CAACX,OAAO,CAAC,CAAC,CAAC;IAC5D;IAEAY,SAASC,OAAsB,EAAEC,OAAqB,EAAqB;QACzE,MAAMP,OAAO,IAAI,CAACN,MAAM;QACxB,qBACE,KAACP;YACCiB,KAAK,IAAI,CAACD,cAAc;YACxBK,OAAO,OAAOR,MAAMQ,UAAU,WAAWR,KAAKQ,KAAK,GAAG,IAAI,CAACf,OAAO;YAClEgB,MAAM,IAAI,CAAChB,OAAO;YAClBiB,SAAS,IAAI,CAACf,KAAK;;IAGzB;AACF"}

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

@@ -0,0 +1,34 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  overflow: clip;
+  border-radius: var(--style-radius-m);
+  background-color: var(--theme-elevation-100);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.list:empty {
+  display: none;
+}
+
+.item {
+  cursor: pointer;
+  white-space: nowrap;
+  border-radius: 0;
+  border: none;
+  background-color: transparent;
+  padding: 0.25rem 0.75rem;
+  font-size: var(--font-size-large);
+}
+
+.itemSelected {
+  background-color: var(--theme-elevation-800);
+  color: var(--theme-elevation-0);
+}
+
+.item:not(.itemSelected):hover {
+  background-color: var(--theme-elevation-250);
+}

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

@@ -1,4 +1,4 @@
-import { DateElement } from '../../../../types';
+import type { DateElement } from '../../../../types';
 export interface DateVariableEditorProps {
     name: string;
     element: DateElement | undefined;
@@ -6,5 +6,5 @@ export interface DateVariableEditorProps {
         getValue: () => string;
     }>;
 }
-export declare function DateVariableEditor({ name, element, ref, }: DateVariableEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateVariableEditor({ ref }: DateVariableEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateVariableEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/editors/DateVariableEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;QAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,GAAG,GACJ,EAAE,uBAAuB,2CASzB"}
+{"version":3,"file":"DateVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/editors/DateVariableEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;QAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,wBAAgB,kBAAkB,CAAC,EAAE,GAAG,EAAE,EAAE,uBAAuB,2CASlE"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/variables/editors/DateVariableEditor.tsx"],"sourcesContent":["import { useImperativeHandle } from 'react';\nimport type { DateElement } from '@/types';\n\nexport interface DateVariableEditorProps {\n  name: string;\n  element: DateElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\nexport function DateVariableEditor({ ref }: DateVariableEditorProps) {\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      // TODO\n      return '';\n    },\n  }));\n\n  return <>DateElementEditor</>;\n}\n"],"names":["useImperativeHandle","DateVariableEditor","ref","getValue"],"mappings":";AAAA,SAASA,mBAAmB,QAAQ,QAAQ;AAS5C,OAAO,SAASC,mBAAmB,EAAEC,GAAG,EAA2B;IACjEF,oBAAoBE,KAAK,IAAO,CAAA;YAC9BC,UAAU;gBACR,OAAO;gBACP,OAAO;YACT;QACF,CAAA;IAEA,qBAAO;kBAAE;;AACX"}

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

@@ -1,4 +1,4 @@
-import { PluralElement } from '../../../../types';
+import type { PluralElement } from '../../../../types';
 export interface PluralVariableEditorProps {
     variableName: string;
     element: PluralElement | undefined;

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;AAO7C,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,2CA8K3B"}
+{"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"}