payload-intl 1.1.2 → 1.2.0

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

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

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

@@ -1 +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';\nimport type { PluralElement } from '@/types';\n\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              onClick={() => options.remove(index)}\n              type=\"button\"\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            className=\"col-span-2 focus:outline-none\"\n            type=\"text\"\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            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\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 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-border bg-elevation-50 shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in\"\n              sideOffset={4}\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                    className={cn(\n                      'cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250',\n                    )}\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=\"flex items-center justify-between gap-2 border-border border-t p-2\">\n                <label htmlFor=\"customValue\">custom</label>\n                <Controller\n                  control={control}\n                  name=\"customValue\"\n                  render={({ field }) => (\n                    <input\n                      className=\"w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none\"\n                      min={0}\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                      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":["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","jsxs","jsx","field","index","Fragment","IconX","Popover","cn","Controller","value","number","e","existingField"],"mappings":"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"}
+{"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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"}

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

@@ -0,0 +1,149 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.optionsFieldset {
+  margin-inline: 0;
+  display: grid;
+  grid-template-columns: 3rem 8rem 1.5rem;
+  gap: 0.5rem 0;
+  border-radius: var(--style-radius-m);
+  border: 1px solid var(--theme-border-color);
+  padding-inline: 0.5rem;
+  padding-right: 0;
+}
+
+.input {
+  outline: none;
+}
+
+.input:focus {
+  outline: none;
+}
+
+.inputSpan2 {
+  grid-column: span 2;
+  outline: none;
+}
+
+.inputSpan2:focus {
+  outline: none;
+}
+
+.removeButton {
+  margin-left: auto;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+.removeButton:hover {
+  color: var(--theme-error-400);
+}
+
+.controlsGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.offsetLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-left: 0.5rem;
+}
+
+.offsetInput {
+  width: 2rem;
+  text-align: center;
+}
+
+.popoverContent {
+  z-index: 50;
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  min-width: 8rem;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  overflow-y: auto;
+  overflow-x: hidden;
+  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);
+}
+
+.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);
+  }
+}
+
+.optionsList {
+  display: flex;
+  flex-direction: column;
+}
+
+.optionItem {
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  padding-inline: 0.25rem;
+}
+
+.optionItem:hover {
+  background-color: var(--theme-elevation-250);
+}
+
+.customInputGroup {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid var(--theme-border-color);
+  padding: 0.5rem;
+}
+
+.customInput {
+  width: 2rem;
+  border-radius: var(--style-radius-s);
+  border-color: transparent;
+  text-align: center;
+}
+
+.customInput:focus {
+  border-color: var(--theme-border-color);
+  outline: none;
+}

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

@@ -1,4 +1,4 @@
-import { SelectElement } from '../../../../types';
+import type { SelectElement } from '../../../../types';
 export interface SelectVariableEditorProps {
     element: SelectElement;
     onUpdate: (value: string) => void;

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

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