payload-intl 0.0.1

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

@@ -0,0 +1,60 @@
+import { NodeViewWrapper as l } from "@tiptap/react";
+import { Popover as r } from "radix-ui";
+import { useMemo as m } from "react";
+import { cn as s } from "@/utils/cn";
+import { isArgumentElement as c, isTemporalElement as p, isNumericElement as f, isSelectElement as u, isTagElement as E } from "@/utils/guards";
+import { parseICUMessage as b } from "@/utils/icu-tranform";
+import { SelectVariableEditor as g } from "./editors/SelectVariableEditor.js";
+import { TagVariableEditor as h } from "./editors/TagVariableEditor.js";
+import { NumericVariablePicker as v } from "./pickers/NumericVariablePicker.js";
+const i = !1;
+function M({
+  node: n,
+  updateAttributes: d
+}) {
+  const a = n.attrs, o = (t) => d({
+    icu: t
+  }), e = m(() => {
+    try {
+      const [t] = b(a.icu);
+      if (!t) throw new Error("No part found");
+      return t;
+    } catch (t) {
+      throw console.error(t), new Error(`Invalid ICU: ${a.icu}`, { cause: t });
+    }
+  }, [a.icu]);
+  return /* @__PURE__ */ React.createElement(r.Root, null, /* @__PURE__ */ React.createElement(r.Trigger, { asChild: !0 }, /* @__PURE__ */ React.createElement(
+    l,
+    {
+      as: "span",
+      className: s(
+        "inline-flex cursor-pointer items-center rounded-md bg-elevation-250 px-1 hover:bg-elevation-400",
+        {
+          "pointer-events-none": c(e) || p(e) && !i
+        }
+      ),
+      contentEditable: !1,
+      "data-variable": a.name,
+      "data-icu": a.icu,
+      role: "button",
+      tabIndex: 0
+    },
+    a.label
+  )), /* @__PURE__ */ React.createElement(r.Portal, null, /* @__PURE__ */ React.createElement(
+    r.Content,
+    {
+      side: "bottom",
+      sideOffset: 5,
+      align: "start",
+      className: "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-[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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+    },
+    f(e) && /* @__PURE__ */ React.createElement(v, { element: e, onUpdate: o }),
+    u(e) && /* @__PURE__ */ React.createElement(g, { element: e, onUpdate: o }),
+    i,
+    E(e) && /* @__PURE__ */ React.createElement(h, { element: e, onUpdate: o })
+  )));
+}
+export {
+  M as VariableChip
+};
+//# sourceMappingURL=VariableChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableChip.js","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"sourcesContent":["import type { VariableMentionNodeAttrs } from \"@/types\";\nimport type { ReactNodeViewProps } from \"@tiptap/react\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { Popover } from \"radix-ui\";\nimport { useMemo } from \"react\";\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\";\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-variable={attrs.name}\n          data-icu={attrs.icu}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {attrs.label}\n        </NodeViewWrapper>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          side=\"bottom\"\n          sideOffset={5}\n          align=\"start\"\n          className=\"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-[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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\"\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","Popover","NodeViewWrapper","cn","isArgumentElement","isTemporalElement","isNumericElement","NumericVariablePicker","isSelectElement","SelectVariableEditor","isTagElement","TagVariableEditor"],"mappings":";;;;;;;;;AAqBA,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,sBAAA,cAACQ,EAAQ,MAAR,0CACEA,EAAQ,SAAR,EAAgB,SAAO,GAAA,GACtB,sBAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,UACE,uBACEC,EAAkBR,CAAO,KACxBS,EAAkBT,CAAO,KAAK,CAACP;AAAA,QAAA;AAAA,MACpC;AAAA,MAEF,iBAAiB;AAAA,MACjB,iBAAeI,EAAM;AAAA,MACrB,YAAUA,EAAM;AAAA,MAChB,MAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,IAETA,EAAM;AAAA,EAAA,CAEX,GACA,sBAAA,cAACQ,EAAQ,QAAR,MACC,sBAAA;AAAA,IAACA,EAAQ;AAAA,IAAR;AAAA,MACC,MAAK;AAAA,MACL,YAAY;AAAA,MACZ,OAAM;AAAA,MACN,WAAU;AAAA,IAAA;AAAA,IAETK,EAAiBV,CAAO,yCACtBW,GAAA,EAAsB,SAAAX,GAAkB,UAAUF,GAAc;AAAA,IAElEc,EAAgBZ,CAAO,yCACrBa,GAAA,EAAqB,SAAAb,GAAkB,UAAUF,GAAc;AAAA,IAEjEL;AAAA,IAIAqB,EAAad,CAAO,yCAClBe,GAAA,EAAkB,SAAAf,GAAkB,UAAUF,EAAA,CAAc;AAAA,EAAA,CAGnE,CACF;AAEJ;"}

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

@@ -0,0 +1,8 @@
+import { VariableMentionNodeAttrs } from '../../../types.ts';
+import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
+export interface VariableSuggestionProps extends SuggestionProps<VariableMentionNodeAttrs, VariableMentionNodeAttrs> {
+    ref: React.RefObject<{
+        onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+    }>;
+}
+export declare function VariableSuggestion({ items, command, ref, }: VariableSuggestionProps): import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { useState as p, useEffect as f, useImperativeHandle as i } from "react";
+import { cn as g } from "@/utils/cn";
+function v({
+  items: e,
+  command: a,
+  ref: c
+}) {
+  const [r, o] = p(0), l = (t) => {
+    const n = e[t];
+    n && a(n);
+  }, u = () => {
+    o((r + e.length - 1) % e.length);
+  }, s = () => {
+    o((r + 1) % e.length);
+  }, d = () => {
+    l(r);
+  };
+  return f(() => o(0), [e]), i(c, () => ({
+    onKeyDown: ({ event: t }) => t.key === "ArrowUp" ? (u(), !0) : t.key === "ArrowDown" ? (s(), !0) : t.key === "Enter" ? (d(), !0) : !1
+  })), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col overflow-clip rounded-md bg-elevation-100" }, e.length ? e.map((t, n) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: n,
+      type: "button",
+      className: g(
+        "cursor-pointer rounded-none border-none bg-transparent px-3 py-1 text-lg text-nowrap",
+        {
+          "bg-elevation-800 text-elevation-0": n === r,
+          "hover:bg-elevation-250": n !== r
+        }
+      ),
+      onClick: () => l(n)
+    },
+    t.label
+  )) : /* @__PURE__ */ React.createElement("div", { className: "item" }, "No result"));
+}
+export {
+  v as VariableSuggestion
+};
+//# sourceMappingURL=VariableSuggestion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableSuggestion.js","sources":["../../../../src/components/inputs/variables/VariableSuggestion.tsx"],"sourcesContent":["import type { VariableMentionNodeAttrs } from \"@/types\";\nimport type {\n  SuggestionKeyDownProps,\n  SuggestionProps,\n} from \"@tiptap/suggestion\";\nimport { useEffect, useImperativeHandle, useState } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface VariableSuggestionProps\n  extends SuggestionProps<VariableMentionNodeAttrs, VariableMentionNodeAttrs> {\n  ref: React.RefObject<{\n    onKeyDown: (props: SuggestionKeyDownProps) => boolean;\n  }>;\n}\n\nexport function VariableSuggestion({\n  items,\n  command,\n  ref,\n}: VariableSuggestionProps) {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const selectItem = (index: number) => {\n    const item = items[index];\n\n    if (item) command(item);\n  };\n\n  const upHandler = () => {\n    setSelectedIndex((selectedIndex + items.length - 1) % items.length);\n  };\n\n  const downHandler = () => {\n    setSelectedIndex((selectedIndex + 1) % items.length);\n  };\n\n  const enterHandler = () => {\n    selectItem(selectedIndex);\n  };\n\n  useEffect(() => setSelectedIndex(0), [items]);\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }) => {\n      if (event.key === \"ArrowUp\") {\n        upHandler();\n        return true;\n      }\n\n      if (event.key === \"ArrowDown\") {\n        downHandler();\n        return true;\n      }\n\n      if (event.key === \"Enter\") {\n        enterHandler();\n        return true;\n      }\n\n      return false;\n    },\n  }));\n\n  return (\n    <div className=\"flex flex-col overflow-clip rounded-md bg-elevation-100\">\n      {items.length ? (\n        items.map((item, index) => (\n          <button\n            key={index}\n            type=\"button\"\n            className={cn(\n              \"cursor-pointer rounded-none border-none bg-transparent px-3 py-1 text-lg text-nowrap\",\n              {\n                \"bg-elevation-800 text-elevation-0\": index === selectedIndex,\n                \"hover:bg-elevation-250\": index !== selectedIndex,\n              },\n            )}\n            onClick={() => selectItem(index)}\n          >\n            {item.label}\n          </button>\n        ))\n      ) : (\n        <div className=\"item\">No result</div>\n      )}\n    </div>\n  );\n}\n"],"names":["VariableSuggestion","items","command","ref","selectedIndex","setSelectedIndex","useState","selectItem","index","item","upHandler","downHandler","enterHandler","useEffect","useImperativeHandle","event","cn"],"mappings":";;AAgBO,SAASA,EAAmB;AAAA,EACjC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AACF,GAA4B;AAC1B,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAE9CC,IAAa,CAACC,MAAkB;AACpC,UAAMC,IAAOR,EAAMO,CAAK;AAExB,IAAIC,OAAcA,CAAI;AAAA,EACxB,GAEMC,IAAY,MAAM;AACtB,IAAAL,GAAkBD,IAAgBH,EAAM,SAAS,KAAKA,EAAM,MAAM;AAAA,EACpE,GAEMU,IAAc,MAAM;AACxB,IAAAN,GAAkBD,IAAgB,KAAKH,EAAM,MAAM;AAAA,EACrD,GAEMW,IAAe,MAAM;AACzB,IAAAL,EAAWH,CAAa;AAAA,EAC1B;AAEA,SAAAS,EAAU,MAAMR,EAAiB,CAAC,GAAG,CAACJ,CAAK,CAAC,GAE5Ca,EAAoBX,GAAK,OAAO;AAAA,IAC9B,WAAW,CAAC,EAAE,OAAAY,QACRA,EAAM,QAAQ,aAChBL,EAAA,GACO,MAGLK,EAAM,QAAQ,eAChBJ,EAAA,GACO,MAGLI,EAAM,QAAQ,WAChBH,EAAA,GACO,MAGF;AAAA,EACT,EACA,GAGA,sBAAA,cAAC,OAAA,EAAI,WAAU,0DAAA,GACZX,EAAM,SACLA,EAAM,IAAI,CAACQ,GAAMD,MACf,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKA;AAAA,MACL,MAAK;AAAA,MACL,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,UACE,qCAAqCR,MAAUJ;AAAA,UAC/C,0BAA0BI,MAAUJ;AAAA,QAAA;AAAA,MACtC;AAAA,MAEF,SAAS,MAAMG,EAAWC,CAAK;AAAA,IAAA;AAAA,IAE9BC,EAAK;AAAA,EAAA,CAET,IAED,sBAAA,cAAC,SAAI,WAAU,OAAA,GAAO,WAAS,CAEnC;AAEJ;"}

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

@@ -0,0 +1,9 @@
+import { DateElement } from '../../../../types.ts';
+export interface DateVariableEditorProps {
+    name: string;
+    element: DateElement | undefined;
+    ref: React.Ref<{
+        getValue: () => string;
+    }>;
+}
+export declare function DateVariableEditor({ name, element, ref, }: DateVariableEditorProps): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { PluralElement } from '../../../../types.ts';
+export interface PluralVariableEditorProps {
+    variableName: string;
+    element: PluralElement | undefined;
+    ref: React.Ref<{
+        getValue: () => string;
+    }>;
+}
+export declare function PluralVariableEditor({ variableName, element, ref, }: PluralVariableEditorProps): import("react").JSX.Element;

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

@@ -0,0 +1,149 @@
+import { TYPE as f } from "@formatjs/icu-messageformat-parser";
+import { IconX as b } from "@tabler/icons-react";
+import { Popover as n } from "radix-ui";
+import { useMemo as g, useImperativeHandle as E, Fragment as v } from "react";
+import { useForm as R, useFieldArray as h, Controller as y } from "react-hook-form";
+import { cn as x } from "@/utils/cn";
+import { serializeICUMessage as c, parseICUMessage as N } from "@/utils/icu-tranform";
+const w = ["zero", "one", "two", "few", "many"];
+function k({
+  variableName: i,
+  element: l,
+  ref: u
+}) {
+  const d = g(() => {
+    const { other: e, ...t } = l?.options ?? {};
+    return {
+      offset: l?.offset ?? 0,
+      options: Object.entries(t).map(([r, o]) => ({
+        name: r,
+        content: c(o.value)
+      })),
+      other: c(e ? e.value : [])
+    };
+  }, [l]), { control: m, register: s, getValues: p } = R({
+    defaultValues: d
+  });
+  E(u, () => ({
+    getValue: () => {
+      const e = p(), t = {
+        type: f.plural,
+        value: i,
+        offset: e.offset,
+        pluralType: l?.pluralType ?? "cardinal",
+        options: Object.fromEntries(
+          e.options.map(({ name: r, content: o }) => [
+            r,
+            { value: N(o) }
+          ])
+        )
+      };
+      return c([t]);
+    }
+  }));
+  const a = h({
+    control: m,
+    name: "options"
+  });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("fieldset", { className: "mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0" }, /* @__PURE__ */ React.createElement("legend", null, "Options"), a.fields.map((e, t) => /* @__PURE__ */ React.createElement(v, { key: e.id }, /* @__PURE__ */ React.createElement("label", { htmlFor: `options.${t}` }, e.name), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      className: "focus:outline-none",
+      type: "text",
+      ...s(`options.${t}.content`, { required: !0 })
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error",
+      type: "button",
+      onClick: () => a.remove(t)
+    },
+    /* @__PURE__ */ React.createElement(b, { size: 16 })
+  ))), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { htmlFor: "other" }, "other"), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "text",
+      className: "col-span-2 focus:outline-none",
+      ...s("other", { required: !0 })
+    }
+  ))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 items-center gap-2" }, /* @__PURE__ */ React.createElement("label", { className: "flex items-center gap-3 pl-2" }, "offset", /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      className: "w-8 text-center",
+      type: "numeric",
+      placeholder: "0",
+      ...s("offset")
+    }
+  )), /* @__PURE__ */ React.createElement(n.Root, null, /* @__PURE__ */ React.createElement(n.Trigger, null, "Add Option"), /* @__PURE__ */ React.createElement(n.Portal, null, /* @__PURE__ */ React.createElement(
+    n.Content,
+    {
+      sideOffset: 4,
+      className: "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-elevation-50 shadow-md 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, w.filter(
+      (e) => a.fields.every((t) => t.name !== e)
+    ).map((e) => /* @__PURE__ */ React.createElement(
+      n.Close,
+      {
+        key: e,
+        className: x(
+          "cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250"
+        ),
+        onClick: () => {
+          a.append(
+            {
+              name: e,
+              content: ""
+            },
+            {
+              shouldFocus: !0
+            }
+          );
+        }
+      },
+      e
+    ))),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-2 border-t border-border p-2" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "customValue" }, "custom"), /* @__PURE__ */ React.createElement(
+      y,
+      {
+        control: m,
+        name: "customValue",
+        render: ({ field: e }) => (
+          // eslint-disable-next-line jsx-a11y/control-has-associated-label
+          /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              type: "numeric",
+              className: "w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none",
+              placeholder: "=0",
+              min: 0,
+              value: e.value ?? "",
+              onChange: ({ currentTarget: { value: t } }) => {
+                const r = Number(t);
+                isNaN(r) || r < 0 || e.onChange(r);
+              },
+              onKeyDown: (t) => {
+                t.key !== "Enter" || e.value === void 0 || a.fields.some(
+                  (o) => o.name === `=${e.value}`
+                ) || (a.append(
+                  {
+                    name: `=${e.value}`,
+                    content: ""
+                  },
+                  {
+                    shouldFocus: !0
+                  }
+                ), e.onChange(void 0));
+              }
+            }
+          )
+        )
+      }
+    ))
+  )))));
+}
+export {
+  k as PluralVariableEditor
+};
+//# sourceMappingURL=PluralVariableEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PluralVariableEditor.js","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\";\n\nimport type { PluralElement } from \"@/types\";\nimport { cn } from \"@/utils/cn\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\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=\"flex flex-col gap-3\">\n      <fieldset className=\"mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0\">\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=\"focus:outline-none\"\n              type=\"text\"\n              {...register(`options.${index}.content`, { required: true })}\n            />\n            <button\n              className=\"ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error\"\n              type=\"button\"\n              onClick={() => options.remove(index)}\n            >\n              <IconX size={16} />\n            </button>\n          </Fragment>\n        ))}\n\n        <>\n          <label htmlFor=\"other\">other</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            type=\"text\"\n            className=\"col-span-2 focus:outline-none\"\n            {...register(\"other\", { required: true })}\n          />\n        </>\n      </fieldset>\n      <div className=\"grid grid-cols-2 items-center gap-2\">\n        <label className=\"flex items-center gap-3 pl-2\">\n          offset\n          <input\n            className=\"w-8 text-center\"\n            type=\"numeric\"\n            placeholder=\"0\"\n            {...register(\"offset\")}\n          />\n        </label>\n        <Popover.Root>\n          <Popover.Trigger>Add Option</Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              sideOffset={4}\n              className=\"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-elevation-50 shadow-md 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\"\n            >\n              <div className=\"flex flex-col\">\n                {NAMED_PLURAL_OPTIONS.filter((option) =>\n                  options.fields.every((field) => field.name !== option),\n                ).map((option) => (\n                  <Popover.Close\n                    key={option}\n                    className={cn(\n                      \"cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250\",\n                    )}\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=\"flex items-center justify-between gap-2 border-t border-border p-2\">\n                <label htmlFor=\"customValue\">custom</label>\n                <Controller\n                  control={control}\n                  name=\"customValue\"\n                  render={({ field }) => (\n                    // eslint-disable-next-line jsx-a11y/control-has-associated-label\n                    <input\n                      type=\"numeric\"\n                      className=\"w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none\"\n                      placeholder=\"=0\"\n                      min={0}\n                      value={field.value ?? \"\"}\n                      onChange={({ currentTarget: { value } }) => {\n                        const number = Number(value);\n                        if (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                    />\n                  )}\n                />\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </div>\n  );\n}\n"],"names":["NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","useMemo","other","options","name","option","serializeICUMessage","control","register","getValues","useForm","useImperativeHandle","values","updatedElement","TYPE","content","parseICUMessage","useFieldArray","field","index","Fragment","IconX","Popover","cn","Controller","value","number","e","existingField"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+import { SelectElement } from '../../../../types.ts';
+export interface SelectVariableEditorProps {
+    element: SelectElement;
+    onUpdate: (value: string) => void;
+}
+export declare function SelectVariableEditor({ element, onUpdate, }: SelectVariableEditorProps): import("react").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { useMemo as u, useEffect as f } from "react";
+import { useForm as d, useFieldArray as E } from "react-hook-form";
+import { serializeICUMessage as o, parseICUMessage as g } from "@/utils/icu-tranform";
+function N({
+  element: a,
+  onUpdate: s
+}) {
+  const n = u(
+    () => Object.entries(a.options).map(([e, t]) => ({
+      name: e,
+      content: o(t.value)
+    })),
+    [a]
+  ), { control: c, register: r, getValues: l } = d({
+    defaultValues: { options: n }
+  }), { fields: m } = E({
+    control: c,
+    name: "options"
+  });
+  return f(() => () => {
+    const e = l(), t = {
+      ...a,
+      options: Object.fromEntries(
+        e.options.map(({ name: i, content: p }) => [
+          i,
+          { value: g(p) }
+        ])
+      )
+    };
+    s(o([t]));
+  }, []), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 p-3" }, m.map((e, t) => /* @__PURE__ */ React.createElement("div", { key: e.name, className: "flex flex-col gap-1" }, /* @__PURE__ */ React.createElement("label", { className: "text-sm font-medium" }, e.name), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      className: "focus:outline-none",
+      ...r(`options.${t}.content`)
+    }
+  ))));
+}
+export {
+  N as SelectVariableEditor
+};
+//# sourceMappingURL=SelectVariableEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useFieldArray, useForm } from \"react-hook-form\";\n\nimport type { SelectElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface SelectVariableEditorProps {\n  element: SelectElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n  element,\n  onUpdate,\n}: SelectVariableEditorProps) {\n  const options = useMemo<{ name: string; content: string }[]>(\n    () =>\n      Object.entries(element.options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n    [element],\n  );\n\n  const { control, register, getValues } = useForm<{\n    options: { name: string; content: string }[];\n  }>({\n    defaultValues: { options },\n  });\n  const { fields } = useFieldArray({\n    control,\n    name: \"options\",\n  });\n\n  useEffect(() => {\n    return () => {\n      const values = getValues();\n      const updatedElement: SelectElement = {\n        ...element,\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  return (\n    <div className=\"flex flex-col gap-2 p-3\">\n      {fields.map((field, index) => (\n        <div key={field.name} className=\"flex flex-col gap-1\">\n          <label className=\"text-sm font-medium\">{field.name}</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            className=\"focus:outline-none\"\n            {...register(`options.${index}.content`)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["SelectVariableEditor","element","onUpdate","options","useMemo","name","option","serializeICUMessage","control","register","getValues","useForm","fields","useFieldArray","useEffect","values","updatedElement","content","parseICUMessage","field","index"],"mappings":";;;AAWO,SAASA,EAAqB;AAAA,EACnC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAUC;AAAA,IACd,MACE,OAAO,QAAQH,EAAQ,OAAO,EAAE,IAAI,CAAC,CAACI,GAAMC,CAAM,OAAO;AAAA,MACvD,MAAAD;AAAA,MACA,SAASE,EAAoBD,EAAO,KAAK;AAAA,IAAA,EACzC;AAAA,IACJ,CAACL,CAAO;AAAA,EAAA,GAGJ,EAAE,SAAAO,GAAS,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAEtC;AAAA,IACD,eAAe,EAAE,SAAAR,EAAA;AAAA,EAAQ,CAC1B,GACK,EAAE,QAAAS,EAAA,IAAWC,EAAc;AAAA,IAC/B,SAAAL;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAMC,IAASL,EAAA,GACTM,IAAgC;AAAA,MACpC,GAAGf;AAAA,MACH,SAAS,OAAO;AAAA,QACdc,EAAO,QAAQ,IAAI,CAAC,EAAE,MAAAV,GAAM,SAAAY,QAAc;AAAA,UACxCZ;AAAA,UACA,EAAE,OAAOa,EAAgBD,CAAO,EAAA;AAAA,QAAE,CACnC;AAAA,MAAA;AAAA,IACH;AAEF,IAAAf,EAASK,EAAoB,CAACS,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAGH,sBAAA,cAAC,SAAI,WAAU,0BAAA,GACZJ,EAAO,IAAI,CAACO,GAAOC,MAClB,sBAAA,cAAC,OAAA,EAAI,KAAKD,EAAM,MAAM,WAAU,sBAAA,GAC9B,sBAAA,cAAC,WAAM,WAAU,sBAAA,GAAuBA,EAAM,IAAK,GAEnD,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAGV,EAAS,WAAWW,CAAK,UAAU;AAAA,IAAA;AAAA,EAAA,CAE3C,CACD,CACH;AAEJ;"}

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

@@ -0,0 +1,6 @@
+import { TagElement } from '../../../../types.ts';
+export interface TagVariableEditorProps {
+    element: TagElement;
+    onUpdate: (value: string) => void;
+}
+export declare function TagVariableEditor({ element, onUpdate, }: TagVariableEditorProps): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { useMemo as i, useEffect as u } from "react";
+import { useForm as l } from "react-hook-form";
+import { serializeICUMessage as t, parseICUMessage as m } from "@/utils/icu-tranform";
+function g({
+  element: e,
+  onUpdate: o
+}) {
+  const r = i(
+    () => t(e.children),
+    [e]
+  ), { register: n, getValues: s } = l({
+    defaultValues: { content: r }
+  });
+  return u(() => () => {
+    const { content: a } = s(), c = {
+      ...e,
+      children: m(a)
+    };
+    o(t([c]));
+  }, []), /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      className: "p-3 focus:outline-none",
+      ...n("content"),
+      rows: 1
+    }
+  );
+}
+export {
+  g as TagVariableEditor
+};
+//# sourceMappingURL=TagVariableEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useForm } from \"react-hook-form\";\n\nimport type { TagElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface TagVariableEditorProps {\n  element: TagElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n  element,\n  onUpdate,\n}: TagVariableEditorProps) {\n  const content = useMemo<string>(\n    () => serializeICUMessage(element.children),\n    [element],\n  );\n\n  const { register, getValues } = useForm<{ content: string }>({\n    defaultValues: { content },\n  });\n\n  useEffect(() => {\n    return () => {\n      const { content } = getValues();\n      // TODO find better solution for this\n      const updatedElement: TagElement = {\n        ...element,\n        children: parseICUMessage(content),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  // TODO add support for variable mentions\n  return (\n    <textarea\n      className=\"p-3 focus:outline-none\"\n      {...register(\"content\")}\n      rows={1}\n    />\n  );\n}\n"],"names":["TagVariableEditor","element","onUpdate","content","useMemo","serializeICUMessage","register","getValues","useForm","useEffect","updatedElement","parseICUMessage"],"mappings":";;;AAWO,SAASA,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA2B;AACzB,QAAMC,IAAUC;AAAA,IACd,MAAMC,EAAoBJ,EAAQ,QAAQ;AAAA,IAC1C,CAACA,CAAO;AAAA,EAAA,GAGJ,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC,EAA6B;AAAA,IAC3D,eAAe,EAAE,SAAAL,EAAA;AAAA,EAAQ,CAC1B;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAM,EAAE,SAAAN,EAAAA,IAAYI,EAAA,GAEdG,IAA6B;AAAA,MACjC,GAAGT;AAAA,MACH,UAAUU,EAAgBR,CAAO;AAAA,IAAA;AAEnC,IAAAD,EAASG,EAAoB,CAACK,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAIH,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAGJ,EAAS,SAAS;AAAA,MACtB,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,9 @@
+import { TimeElement } from '../../../../types.ts';
+export interface TimeElementEditorProps {
+    name: string;
+    element: TimeElement | undefined;
+    ref: React.Ref<{
+        getValue: () => string;
+    }>;
+}
+export declare function TimeElementEditor({ name, element, ref, }: TimeElementEditorProps): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { TemplateVariable, VariableMentionNodeAttrs } from '../../../types.ts';
+import { MentionOptions } from '@tiptap/extension-mention';
+export declare function VariableMention(variables: TemplateVariable[]): import('@tiptap/core').Node<MentionOptions<VariableMentionNodeAttrs, VariableMentionNodeAttrs>, any>;

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

@@ -0,0 +1,93 @@
+import { computePosition as f, shift as c, flip as p } from "@floating-ui/dom";
+import y from "@tiptap/extension-mention";
+import { ReactNodeViewRenderer as g, ReactRenderer as b, posToDOMRect as w } from "@tiptap/react";
+import { formatVariableLabel as R } from "@/utils/format";
+import { isTagElement as s } from "@/utils/guards";
+import { serializeICUMessage as h } from "@/utils/icu-tranform";
+import { VariableChip as v } from "./VariableChip.js";
+import { VariableSuggestion as x } from "./VariableSuggestion.js";
+function S(r) {
+  return y.extend({
+    name: "variable",
+    addNodeView: () => g(v),
+    addAttributes: () => ({
+      name: { default: null },
+      icu: { default: null },
+      label: { default: null }
+    }),
+    renderText: ({ node: n }) => n.attrs.icu
+  }).configure({
+    HTMLAttributes: {
+      class: "variable"
+    },
+    suggestions: [
+      l("@", r),
+      l(
+        "{",
+        r.filter((n) => !s(n))
+      ),
+      l(
+        "<",
+        r.filter((n) => s(n))
+      )
+    ]
+  });
+}
+function l(r, n) {
+  const m = n.map((e) => ({
+    name: e.value,
+    label: R(e),
+    icu: h([e])
+  }));
+  function a(e, o) {
+    f({
+      getBoundingClientRect: () => w(
+        e.view,
+        e.state.selection.from,
+        e.state.selection.to
+      )
+    }, o, {
+      placement: "bottom-start",
+      strategy: "absolute",
+      middleware: [c(), p()]
+    }).then(({ x: i, y: u, strategy: d }) => {
+      o.style.width = "max-content", o.style.position = d, o.style.left = `${i}px`, o.style.top = `${u}px`;
+    });
+  }
+  return {
+    char: r,
+    items: ({ query: e }) => m.filter(
+      (o) => o.name.toLowerCase().startsWith(e.toLowerCase())
+    ),
+    render: () => {
+      let e;
+      const o = document.getElementById(
+        "messages-form-content"
+      );
+      return {
+        onStart: (t) => {
+          if (e = new b(x, {
+            props: t,
+            editor: t.editor
+          }), !t.clientRect) return;
+          o.style.overflow = "hidden";
+          const i = e.element;
+          i.style.position = "absolute", document.body.appendChild(i), a(t.editor, i);
+        },
+        onUpdate(t) {
+          e.updateProps(t), t.clientRect && a(t.editor, e.element);
+        },
+        onKeyDown(t) {
+          return t.event.key === "Escape" ? (e.destroy(), !0) : e.ref ? e.ref.onKeyDown(t) : !1;
+        },
+        onExit() {
+          e.element.remove(), e.destroy(), o.style.overflow = "";
+        }
+      };
+    }
+  };
+}
+export {
+  S as VariableMention
+};
+//# sourceMappingURL=extension.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"extension.js","sources":["../../../../src/components/inputs/variables/extension.ts"],"sourcesContent":["import type { TemplateVariable, VariableMentionNodeAttrs } from \"@/types\";\nimport type { VirtualElement } from \"@floating-ui/dom\";\nimport type { MentionOptions } from \"@tiptap/extension-mention\";\nimport type { Attribute, Editor } from \"@tiptap/react\";\nimport type { SuggestionKeyDownProps } from \"@tiptap/suggestion\";\nimport { computePosition, flip, shift } from \"@floating-ui/dom\";\nimport Mention from \"@tiptap/extension-mention\";\nimport {\n  posToDOMRect,\n  ReactNodeViewRenderer,\n  ReactRenderer,\n} from \"@tiptap/react\";\n\nimport { formatVariableLabel } from \"@/utils/format\";\nimport { isTagElement, isTemporalElement } from \"@/utils/guards\";\nimport { serializeICUMessage } from \"@/utils/icu-tranform\";\n\nimport type { VariableSuggestionProps } from \"./VariableSuggestion\";\nimport { VariableChip } from \"./VariableChip\";\nimport { VariableSuggestion } from \"./VariableSuggestion\";\n\nexport function VariableMention(variables: TemplateVariable[]) {\n  return Mention.extend<\n    MentionOptions<VariableMentionNodeAttrs, VariableMentionNodeAttrs>\n  >({\n    name: \"variable\",\n    addNodeView: () => ReactNodeViewRenderer(VariableChip),\n    addAttributes: () =>\n      ({\n        name: { default: null },\n        icu: { default: null },\n        label: { default: null },\n      }) satisfies Record<keyof VariableMentionNodeAttrs, Attribute>,\n    renderText: ({ node }) => node.attrs.icu,\n  }).configure({\n    HTMLAttributes: {\n      class: \"variable\",\n    },\n    suggestions: [\n      createSuggestion(\"@\", variables),\n      createSuggestion(\n        \"{\",\n        variables.filter((variable) => !isTagElement(variable)),\n      ),\n      createSuggestion(\n        \"<\",\n        variables.filter((variable) => isTagElement(variable)),\n      ),\n    ],\n  });\n}\n\nfunction createSuggestion(\n  char: string,\n  variables: TemplateVariable[],\n): MentionOptions<\n  VariableMentionNodeAttrs,\n  VariableMentionNodeAttrs\n>[\"suggestion\"] {\n  const items = variables.map((variable) => ({\n    name: variable.value,\n    label: formatVariableLabel(variable),\n    icu: serializeICUMessage([variable]),\n  }));\n\n  function updatePosition(editor: Editor, element: HTMLElement): void {\n    const virtualElement: VirtualElement = {\n      getBoundingClientRect: () =>\n        posToDOMRect(\n          editor.view,\n          editor.state.selection.from,\n          editor.state.selection.to,\n        ),\n    };\n\n    void computePosition(virtualElement, element, {\n      placement: \"bottom-start\",\n      strategy: \"absolute\",\n      middleware: [shift(), flip()],\n    }).then(({ x, y, strategy }) => {\n      element.style.width = \"max-content\";\n      element.style.position = strategy;\n      element.style.left = `${x}px`;\n      element.style.top = `${y}px`;\n    });\n  }\n\n  return {\n    char,\n    items: ({ query }) =>\n      items.filter((item) =>\n        item.name.toLowerCase().startsWith(query.toLowerCase()),\n      ),\n    render: () => {\n      let component: ReactRenderer<\n        { onKeyDown(props: SuggestionKeyDownProps): boolean },\n        VariableSuggestionProps\n      >;\n\n      const scrollableElement = document.getElementById(\n        \"messages-form-content\",\n      );\n\n      return {\n        onStart: (props) => {\n          component = new ReactRenderer<\n            { onKeyDown(props: SuggestionKeyDownProps): boolean },\n            VariableSuggestionProps\n          >(VariableSuggestion, {\n            props,\n            editor: props.editor,\n          });\n\n          if (!props.clientRect) return;\n\n          scrollableElement!.style.overflow = \"hidden\";\n\n          const element = component.element as HTMLElement;\n          element.style.position = \"absolute\";\n          document.body.appendChild(element);\n\n          updatePosition(props.editor, element);\n        },\n\n        onUpdate(props) {\n          component.updateProps(props);\n\n          if (!props.clientRect) return;\n\n          updatePosition(props.editor, component.element as HTMLElement);\n        },\n\n        onKeyDown(props) {\n          if (props.event.key === \"Escape\") {\n            component.destroy();\n            return true;\n          }\n          if (!component.ref) return false;\n\n          return component.ref.onKeyDown(props);\n        },\n\n        onExit() {\n          component.element.remove();\n          component.destroy();\n          scrollableElement!.style.overflow = \"\";\n        },\n      };\n    },\n  };\n}\n"],"names":["VariableMention","variables","Mention","ReactNodeViewRenderer","VariableChip","node","createSuggestion","variable","isTagElement","char","items","formatVariableLabel","serializeICUMessage","updatePosition","editor","element","computePosition","posToDOMRect","shift","flip","x","y","strategy","query","item","component","scrollableElement","props","ReactRenderer","VariableSuggestion"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+import { NumberElement, PluralElement } from '../../../../types.ts';
+export interface NumericVariablePickerProps {
+    element: NumberElement | PluralElement;
+    onUpdate: (value: string) => void;
+}
+export declare function NumericVariablePicker({ element, onUpdate, }: NumericVariablePickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,49 @@
+import { ToggleGroup as l } from "radix-ui";
+import { useState as i, useRef as c, useEffect as s } from "react";
+import { isNumberElement as m, isPluralElement as o } from "@/utils/guards";
+import { PluralVariableEditor as f } from "../editors/PluralVariableEditor.js";
+const p = [
+  "number",
+  "plural"
+  // "selectordinal"
+];
+function R({
+  element: e,
+  onUpdate: n
+}) {
+  const [r, u] = i(() => {
+    if (m(e)) return "number";
+    if (o(e)) return "plural";
+  }), a = c(null);
+  return s(() => () => {
+    a.current && n(a.current.getValue());
+  }, []), /* @__PURE__ */ React.createElement("div", { className: "" }, /* @__PURE__ */ React.createElement(
+    l.Root,
+    {
+      type: "single",
+      className: "flex bg-elevation-100",
+      onValueChange: (t) => u(t),
+      value: r
+    },
+    p.map((t) => /* @__PURE__ */ React.createElement(
+      l.Item,
+      {
+        key: t,
+        value: t,
+        className: "flex-1 border-none data-[state=off]:cursor-pointer data-[state=off]:opacity-50 data-[state=off]:hover:opacity-100 data-[state=on]:bg-elevation-800 data-[state=on]:text-elevation-0"
+      },
+      t
+    ))
+  ), /* @__PURE__ */ React.createElement("div", { className: "p-3" }, r === "plural" && /* @__PURE__ */ React.createElement(
+    f,
+    {
+      variableName: e.value,
+      element: o(e) ? e : void 0,
+      ref: a
+    }
+  )));
+}
+export {
+  R as NumericVariablePicker
+};
+//# sourceMappingURL=NumericVariablePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumericVariablePicker.js","sources":["../../../../../src/components/inputs/variables/pickers/NumericVariablePicker.tsx"],"sourcesContent":["import { ToggleGroup } from \"radix-ui\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { NumberElement, PluralElement } from \"@/types\";\nimport { isNumberElement, isPluralElement } from \"@/utils/guards\";\n\nimport { PluralVariableEditor } from \"../editors/PluralVariableEditor\";\n\nconst NUMERIC_TYPES = [\n  \"number\",\n  \"plural\",\n  // \"selectordinal\"\n] as const;\n\ntype NumericType = (typeof NUMERIC_TYPES)[number];\n\nexport interface NumericVariablePickerProps {\n  element: NumberElement | PluralElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function NumericVariablePicker({\n  element,\n  onUpdate,\n}: NumericVariablePickerProps) {\n  const [type, setType] = useState<NumericType | undefined>(() => {\n    if (isNumberElement(element)) return \"number\";\n    if (isPluralElement(element)) return \"plural\";\n    return undefined;\n  });\n  const getValueRef = useRef<{ getValue: () => string }>(null);\n\n  useEffect(() => {\n    return () => {\n      if (!getValueRef.current) return;\n      onUpdate(getValueRef.current.getValue());\n    };\n  }, []);\n\n  return (\n    <div className=\"\">\n      <ToggleGroup.Root\n        type=\"single\"\n        className=\"flex bg-elevation-100\"\n        onValueChange={(value) => setType(value as NumericType)}\n        value={type}\n      >\n        {NUMERIC_TYPES.map((type) => (\n          <ToggleGroup.Item\n            key={type}\n            value={type}\n            className=\"flex-1 border-none data-[state=off]:cursor-pointer data-[state=off]:opacity-50 data-[state=off]:hover:opacity-100 data-[state=on]:bg-elevation-800 data-[state=on]:text-elevation-0\"\n          >\n            {type}\n          </ToggleGroup.Item>\n        ))}\n      </ToggleGroup.Root>\n\n      <div className=\"p-3\">\n        {type === \"plural\" && (\n          <PluralVariableEditor\n            variableName={element.value}\n            element={isPluralElement(element) ? element : undefined}\n            ref={getValueRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["NUMERIC_TYPES","NumericVariablePicker","element","onUpdate","type","setType","useState","isNumberElement","isPluralElement","getValueRef","useRef","useEffect","ToggleGroup","value","PluralVariableEditor"],"mappings":";;;;AAQA,MAAMA,IAAgB;AAAA,EACpB;AAAA,EACA;AAAA;AAEF;AASO,SAASC,EAAsB;AAAA,EACpC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA+B;AAC7B,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAkC,MAAM;AAC9D,QAAIC,EAAgBL,CAAO,EAAG,QAAO;AACrC,QAAIM,EAAgBN,CAAO,EAAG,QAAO;AAAA,EAEvC,CAAC,GACKO,IAAcC,EAAmC,IAAI;AAE3D,SAAAC,EAAU,MACD,MAAM;AACX,IAAKF,EAAY,WACjBN,EAASM,EAAY,QAAQ,UAAU;AAAA,EACzC,GACC,CAAA,CAAE,GAGH,sBAAA,cAAC,OAAA,EAAI,WAAU,GAAA,GACb,sBAAA;AAAA,IAACG,EAAY;AAAA,IAAZ;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAe,CAACC,MAAUR,EAAQQ,CAAoB;AAAA,MACtD,OAAOT;AAAA,IAAA;AAAA,IAENJ,EAAc,IAAI,CAACI,MAClB,sBAAA;AAAA,MAACQ,EAAY;AAAA,MAAZ;AAAA,QACC,KAAKR;AAAAA,QACL,OAAOA;AAAAA,QACP,WAAU;AAAA,MAAA;AAAA,MAETA;AAAAA,IAAA,CAEJ;AAAA,EAAA,GAGH,sBAAA,cAAC,OAAA,EAAI,WAAU,MAAA,GACZA,MAAS,YACR,sBAAA;AAAA,IAACU;AAAA,IAAA;AAAA,MACC,cAAcZ,EAAQ;AAAA,MACtB,SAASM,EAAgBN,CAAO,IAAIA,IAAU;AAAA,MAC9C,KAAKO;AAAA,IAAA;AAAA,EAAA,CAGX,CACF;AAEJ;"}