npm - payload-intl - Versions diffs - 0.3.0 → 1.0.0 - Mend

payload-intl 0.3.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

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

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

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

@@ -0,0 +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"}

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

@@ -1,4 +1,4 @@
-import { PluralElement } from '../../../../types.ts';
+import { PluralElement } from '../../../../types';
 export interface PluralVariableEditorProps {
     variableName: string;
     element: PluralElement | undefined;
@@ -7,3 +7,4 @@ export interface PluralVariableEditorProps {
     }>;
 }
 export declare function PluralVariableEditor({ variableName, element, ref, }: PluralVariableEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PluralVariableEditor.d.ts.map

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

@@ -0,0 +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"}

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

@@ -63,8 +63,8 @@ function A({
           "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),
+            type: "button",
             children: /* @__PURE__ */ r(v, { size: 16 })
           }
         )
@@ -74,8 +74,8 @@ function A({
         /* @__PURE__ */ r(
           "input",
           {
-            type: "text",
             className: "col-span-2 focus:outline-none",
+            type: "text",
             ...d("other", { required: !0 })
           }
         )
@@ -88,8 +88,8 @@ function A({
           "input",
           {
             className: "w-8 text-center",
-            type: "numeric",
             placeholder: "0",
+            type: "numeric",
             ...d("offset")
           }
         )
@@ -99,8 +99,8 @@ function A({
         /* @__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,
-            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",
             children: [
               /* @__PURE__ */ r("div", { className: "flex flex-col", children: z.filter(
                 (e) => a.fields.every((t) => t.name !== e)
@@ -125,42 +125,39 @@ function A({
                 },
                 e
               )) }),
-              /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2 border-t border-border p-2", children: [
+              /* @__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 }) => (
-                      // eslint-disable-next-line jsx-a11y/control-has-associated-label
-                      /* @__PURE__ */ r(
-                        "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 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(
-                              {
-                                name: `=${e.value}`,
-                                content: ""
-                              },
-                              {
-                                shouldFocus: !0
-                              }
-                            ), e.onChange(void 0));
-                          }
-                        }
-                      )
+                    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(
+                            {
+                              name: `=${e.value}`,
+                              content: ""
+                            },
+                            {
+                              shouldFocus: !0
+                            }
+                          ), e.onChange(void 0));
+                        },
+                        placeholder: "=0",
+                        type: "numeric",
+                        value: e.value ?? ""
+                      }
                     )
                   }
                 )

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PluralVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import type { PluralElement } from \"@/types\";\nimport { 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 { 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","jsxs","jsx","field","index","Fragment","IconX","Popover","cn","Controller","value","number","e","existingField"],"mappings":"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"}
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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"}

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

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

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

@@ -0,0 +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"}

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

@@ -1,17 +1,17 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
 import { useMemo as d, useEffect as x } from "react";
 import { useForm as g, useFieldArray as v } from "react-hook-form";
 import { serializeICUMessage as n, parseICUMessage as b } from "../../../../utils/icu-tranform.js";
-function M({
-  element: s,
+function F({
+  element: t,
   onUpdate: a
 }) {
   const r = d(
-    () => Object.entries(s.options).map(([e, o]) => ({
+    () => Object.entries(t.options).map(([e, o]) => ({
       name: e,
       content: n(o.value)
     })),
-    [s]
+    [t]
   ), { control: i, register: l, getValues: c } = g({
     defaultValues: { options: r }
   }), { fields: m } = v({
@@ -20,7 +20,7 @@ function M({
   });
   return x(() => () => {
     const e = c(), o = {
-      ...s,
+      ...t,
       options: Object.fromEntries(
         e.options.map(({ name: p, content: u }) => [
           p,
@@ -29,9 +29,16 @@ function M({
       )
     };
     a(n([o]));
-  }, []), /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 p-3", children: m.map((e, o) => /* @__PURE__ */ f("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ t("label", { className: "text-sm font-medium", children: e.name }),
-    /* @__PURE__ */ t(
+  }, []), /* @__PURE__ */ s("div", { className: "flex flex-col gap-2 p-3", children: m.map((e, o) => /* @__PURE__ */ f("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ s(
+      "label",
+      {
+        className: "font-medium text-sm",
+        htmlFor: `options.${o}.content`,
+        children: e.name
+      }
+    ),
+    /* @__PURE__ */ s(
       "input",
       {
         className: "focus:outline-none",
@@ -41,6 +48,6 @@ function M({
   ] }, e.name)) });
 }
 export {
-  M as SelectVariableEditor
+  F as SelectVariableEditor
 };
 //# sourceMappingURL=SelectVariableEditor.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import ~~type~~ { ~~SelectElement } from \"@/types\";\nimport {~~ useEffect, useMemo } from \"react\";\nimport { useFieldArray, useForm } from \"react-hook-form\";\n\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","jsx","field","index","jsxs"],"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,gBAAAG,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAAP,EAAO,IAAI,CAACQ,GAAOC,MAClB,gBAAAC,EAAC,OAAA,~~EAAqB~~,WAAU,~~uBAC9B~~,UAAA;AAAA,IAAA,gBAAAH,~~EAAC~~,~~SAAA~~,~~EAAM~~,WAAU,~~uBAAuB~~,~~UAAAC~~,EAAM,~~MAAK~~;AAAA,~~IAEnD~~,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAGV,EAAS,WAAWY,CAAK,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,EAAA,~~GANQD~~,EAAM,~~IAOhB~~,CACD,GACH;AAEJ;"}
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';\nimport type { SelectElement } from '@/types';\n\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 // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent\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 className=\"flex flex-col gap-1\" key={field.name}>\n <label\n className=\"font-medium text-sm\"\n htmlFor={`options.${index}.content`}\n >\n {field.name}\n </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","jsx","field","index","jsxs"],"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;AAGD,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,gBAAAG,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAAP,EAAO,IAAI,CAACQ,GAAOC,MAClB,gBAAAC,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,WAAWE,CAAK;AAAA,QAExB,UAAAD,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAGT,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAGV,EAAS,WAAWY,CAAK,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,EAAA,GAXwCD,EAAM,IAYhD,CACD,GACH;AAEJ;"}

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

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

package/dist/components/inputs/variables/editors/TagVariableEditor.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"TagVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/editors/TagVariableEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,QAAQ,GACT,EAAE,sBAAsB,2CA+BxB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TagVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import ~~type~~ { ~~TagElement } from \"@/types\";\nimport {~~ useEffect, useMemo } from \"react\";\nimport { useForm } from \"react-hook-form\";\n\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","jsx"],"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,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAGN,EAAS,SAAS;AAAA,MACtB,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
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';\nimport type { TagElement } from '@/types';\n\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 // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent\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","jsx"],"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;AAGD,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,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAGN,EAAS,SAAS;AAAA,MACtB,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -1,4 +1,4 @@
-import { TimeElement } from '../../../../types.ts';
+import { TimeElement } from '../../../../types';
 export interface TimeElementEditorProps {
     name: string;
     element: TimeElement | undefined;
@@ -7,3 +7,4 @@ export interface TimeElementEditorProps {
     }>;
 }
 export declare function TimeElementEditor({ name, element, ref, }: TimeElementEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TimeVariableEditor.d.ts.map

package/dist/components/inputs/variables/editors/TimeVariableEditor.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TimeVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/editors/TimeVariableEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,WAAW,sBAAsB;IACrC,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,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,GAAG,GACJ,EAAE,sBAAsB,2CASxB"}

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

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

package/dist/components/inputs/variables/extension.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"extension.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/extension.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAShE,OAAO,KAAK,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAS1E,wBAAgB,eAAe,CAAC,SAAS,EAAE,gBAAgB,EAAE,wGA6B5D"}

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

	@@ -1 +1 @@
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;\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);\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":";;;;;;;;~~AAqBO~~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"}
1	+ {"version":3,"file":"extension.js","sources":["../../../../src/components/inputs/variables/extension.ts"],"sourcesContent":["import type { VirtualElement } from '@floating-ui/dom';\nimport { computePosition, flip, shift } from '@floating-ui/dom';\nimport type { MentionOptions } from '@tiptap/extension-mention';\nimport Mention from '@tiptap/extension-mention';\nimport type { Attribute, Editor } from '@tiptap/react';\nimport {\n posToDOMRect,\n ReactNodeViewRenderer,\n ReactRenderer,\n} from '@tiptap/react';\nimport type { SuggestionKeyDownProps } from '@tiptap/suggestion';\nimport type { TemplateVariable, VariableMentionNodeAttrs } from '@/types';\n\nimport { formatVariableLabel } from '@/utils/format';\nimport { isTagElement, isTemporalElement } from '@/utils/guards';\nimport { serializeICUMessage } from '@/utils/icu-tranform';\nimport { VariableChip } from './VariableChip';\nimport type { VariableSuggestionProps } from './VariableSuggestion';\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;\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);\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 CHANGED Viewed

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

package/dist/components/inputs/variables/pickers/NumericVariablePicker.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NumericVariablePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/pickers/NumericVariablePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAc5D,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,aAAa,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,QAAQ,GACT,EAAE,0BAA0B,2CA8C5B"}

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

@@ -22,15 +22,15 @@ function E({
     /* @__PURE__ */ a(
       l.Root,
       {
-        type: "single",
         className: "flex bg-elevation-100",
         onValueChange: (r) => u(r),
+        type: "single",
         value: o,
         children: v.map((r) => /* @__PURE__ */ a(
           l.Item,
           {
+            className: "flex-1 border-none data-[state=off]:cursor-pointer data-[state=on]:bg-elevation-800 data-[state=on]:text-elevation-0 data-[state=off]:opacity-50 data-[state=off]:hover:opacity-100",
             value: r,
-            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",
             children: r
           },
           r
@@ -40,9 +40,9 @@ function E({
     /* @__PURE__ */ a("div", { className: "p-3", children: o === "plural" && /* @__PURE__ */ a(
       d,
       {
-        variableName: e.value,
         element: i(e) ? e : void 0,
-        ref: t
+        ref: t,
+        variableName: e.value
       }
     ) })
   ] });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumericVariablePicker.js","sources":["../../../../../src/components/inputs/variables/pickers/NumericVariablePicker.tsx"],"sourcesContent":["import ~~type~~ { ~~NumberElement, PluralElement } from \"@/types\";\nimport {~~ ToggleGroup } from \"radix-ui\";\nimport { useEffect, useRef, useState } from \"react\";\n\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","jsxs","jsx","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,gBAAAG,EAAC,OAAA,EAAI,WAAU,IACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC,EAAY;AAAA,MAAZ;AAAA,QACC,~~MAAK;AAAA,QACL,~~WAAU;AAAA,QACV,eAAe,CAACC,MAAUV,EAAQU,CAAoB;AAAA,QACtD,OAAOX;AAAA,QAEN,UAAAJ,EAAc,IAAI,CAACI,MAClB,gBAAAS;AAAA,UAACC,EAAY;AAAA,UAAZ;AAAA,~~YAEC~~,~~OAAOV~~;~~AAAAA~~,~~YACP~~,~~WAAU~~;~~AAAA~~,~~YAET~~,UAAAA;AAAAA,UAAA;AAAA,~~UAJIA~~;AAAAA,QAAA,~~CAMR~~;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH,gBAAAS,EAAC,OAAA,EAAI,WAAU,OACZ,gBAAS,YACR,gBAAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,~~cAAcd~~,~~EAAQ;AAAA,QACtB,SAASM,~~EAAgBN,CAAO,IAAIA,IAAU;AAAA,QAC9C,KAAKO;AAAA,MAAA;AAAA,IAAA,~~EACP~~,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
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';\nimport type { NumberElement, PluralElement } from '@/types';\n\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 // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent\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 className=\"flex bg-elevation-100\"\n onValueChange={(value) => setType(value as NumericType)}\n type=\"single\"\n value={type}\n >\n {NUMERIC_TYPES.map((type) => (\n <ToggleGroup.Item\n className=\"flex-1 border-none data-[state=off]:cursor-pointer data-[state=on]:bg-elevation-800 data-[state=on]:text-elevation-0 data-[state=off]:opacity-50 data-[state=off]:hover:opacity-100\"\n key={type}\n value={type}\n >\n {type}\n </ToggleGroup.Item>\n ))}\n </ToggleGroup.Root>\n\n <div className=\"p-3\">\n {type === 'plural' && (\n <PluralVariableEditor\n element={isPluralElement(element) ? element : undefined}\n ref={getValueRef}\n variableName={element.value}\n />\n )}\n </div>\n </div>\n );\n}\n"],"names":["NUMERIC_TYPES","NumericVariablePicker","element","onUpdate","type","setType","useState","isNumberElement","isPluralElement","getValueRef","useRef","useEffect","jsxs","jsx","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;AAG3D,SAAAC,EAAU,MACD,MAAM;AACX,IAAKF,EAAY,WACjBN,EAASM,EAAY,QAAQ,UAAU;AAAA,EACzC,GACC,CAAA,CAAE,GAGH,gBAAAG,EAAC,OAAA,EAAI,WAAU,IACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC,EAAY;AAAA,MAAZ;AAAA,QACC,WAAU;AAAA,QACV,eAAe,CAACC,MAAUV,EAAQU,CAAoB;AAAA,QACtD,MAAK;AAAA,QACL,OAAOX;AAAA,QAEN,UAAAJ,EAAc,IAAI,CAACI,MAClB,gBAAAS;AAAA,UAACC,EAAY;AAAA,UAAZ;AAAA,YACC,WAAU;AAAA,YAEV,OAAOV;AAAAA,YAEN,UAAAA;AAAAA,UAAA;AAAA,UAHIA;AAAAA,QAAA,CAKR;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH,gBAAAS,EAAC,OAAA,EAAI,WAAU,OACZ,gBAAS,YACR,gBAAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAASR,EAAgBN,CAAO,IAAIA,IAAU;AAAA,QAC9C,KAAKO;AAAA,QACL,cAAcP,EAAQ;AAAA,MAAA;AAAA,IAAA,EACxB,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/inputs/variables/pickers/TemporalElementEditor.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-import { DateElement, TimeElement } from '../../../../types.ts';
+import { DateElement, TimeElement } from '../../../../types';
 export interface TemporalElementEditorProps {
     element: DateElement | TimeElement;
     onUpdate: (value: string) => void;
 }
 export declare function TemporalElementEditor({ element, onUpdate, }: TemporalElementEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TemporalElementEditor.d.ts.map

package/dist/components/inputs/variables/pickers/TemporalElementEditor.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TemporalElementEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/pickers/TemporalElementEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWxD,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,WAAW,GAAG,WAAW,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,QAAQ,GACT,EAAE,0BAA0B,2CAqD5B"}

package/dist/components/layout/MessageField.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { MessageSchema } from '../../types.ts';
+import { MessageSchema } from '../../types';
 interface MessageFieldProps {
     schema: MessageSchema;
     messageKey: string;
@@ -7,3 +7,4 @@ interface MessageFieldProps {
 }
 export declare function MessageField({ schema, messageKey, path, className, }: MessageFieldProps): React.ReactNode;
 export {};
+//# sourceMappingURL=MessageField.d.ts.map

package/dist/components/layout/MessageField.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MessageField.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessageField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,IAAI,EACJ,SAAS,GACV,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA8CrC"}

package/dist/components/layout/MessageField.js CHANGED Viewed

@@ -21,11 +21,11 @@ function w({
       c,
       {
         className: l,
-        type: e.type,
-        variables: e.variables,
         locale: r[0],
         name: [r[0], t, s].join("."),
-        validate: m
+        type: e.type,
+        validate: m,
+        variables: e.variables
       }
     ) : /* @__PURE__ */ i(
       "div",
@@ -38,12 +38,12 @@ function w({
           c,
           {
             className: "flex-1",
-            type: e.type,
             label: a.toUpperCase(),
             locale: a,
-            variables: e.variables,
             name: [a, t, s].join("."),
-            validate: m
+            type: e.type,
+            validate: m,
+            variables: e.variables
           },
           a
         ))

package/dist/components/layout/MessageField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageField.js","sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import ~~type~~ { ~~MessageSchema~~ } from ~~\"@/types\"~~;\nimport { ~~useMemo~~ } from ~~\"react\"~~;\n\nimport { ~~useMessagesForm~~ } from \"@/~~context/messages-form\"~~;\nimport { cn } from \"@/utils/cn\";\nimport { parseMessageSchema } from \"@/utils/schema\";\nimport { createValidator } from \"@/utils/validate\";\n\nimport { MessageController } from \"../MessageController\";\n\ninterface MessageFieldProps {\n schema: MessageSchema;\n messageKey: string;\n path: string;\n className?: string;\n}\n\nexport function MessageField({\n schema,\n messageKey,\n path,\n className,\n}: MessageFieldProps): React.ReactNode {\n const { locales } = useMessagesForm();\n\n const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n const validator = useMemo(\n () => createValidator(config.variables),\n [config.variables],\n );\n\n return (\n <div className={cn(~~\"\"~~, className)}>\n {config.description && <p>{config.description}</p>}\n\n {locales.length === 1 ? (\n <MessageController\n className={className}\n ~~type={config.type}\n variables={config.variables}\n~~ locale={locales[0]}\n name={[locales[0], path, messageKey].join(~~\".\"~~)}\n validate={validator}\n />\n ) : (\n <div\n className={cn(\"-mx-3 flex min-w-0 gap-4 px-3\", {\n \"overflow-x-auto\": config.type === \"icu\",\n // \"flex-col\": config.type === \"rich\",\n })}\n >\n {locales.map((locale) => (\n <MessageController\n ~~key={locale}\n~~ className=\"flex-1\"\n ~~type~~={~~config.type~~}\n label={locale.toUpperCase()}\n locale={locale}\n ~~variables={config.variables}\n~~ name={[locale, path, messageKey].join(~~\".\"~~)}\n validate={validator}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n"],"names":["MessageField","schema","messageKey","path","className","locales","useMessagesForm","config","useMemo","parseMessageSchema","validator","createValidator","cn","jsx","MessageController","locale"],"mappings":";;;;;;;~~AAiBO~~,SAASA,EAAa;AAAA,EAC3B,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GAEdC,IAASC,EAAQ,MAAMC,EAAmBR,CAAM,GAAG,CAACA,CAAM,CAAC,GAE3DS,IAAYF;AAAA,IAChB,MAAMG,EAAgBJ,EAAO,SAAS;AAAA,IACtC,CAACA,EAAO,SAAS;AAAA,EAAA;AAGnB,2BACG,OAAA,EAAI,WAAWK,EAAG,IAAIR,CAAS,GAC7B,UAAA;AAAA,IAAAG,EAAO,eAAe,gBAAAM,EAAC,KAAA,EAAG,UAAAN,EAAO,aAAY;AAAA,IAE7CF,EAAQ,WAAW,IAClB,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAV;AAAA,QACA,~~MAAMG~~,~~EAAO;AAAA,QACb,WAAWA,EAAO;AAAA,QAClB,QAAQF,~~EAAQ,CAAC;AAAA,QACjB,MAAM,CAACA,EAAQ,CAAC,GAAGF,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,QAC7C,~~UAAUQ~~;AAAA,MAAA;AAAA,IAAA,~~IAGZ~~,~~gBAAAG~~;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,iCAAiC;AAAA,UAC7C,mBAAmBL,EAAO,SAAS;AAAA;AAAA,QAAA,CAEpC;AAAA,QAEA,UAAAF,EAAQ,IAAI,CAACU,MACZ,gBAAAF;AAAA,UAACC;AAAA,UAAA;AAAA,~~YAEC~~,WAAU;AAAA,~~YACV~~,~~MAAMP~~,EAAO~~;AAAA~~,~~YACb,OAAOQ,EAAO,~~YAAA;AAAA,YACd,QAAAA;AAAA,YACA,~~WAAWR,EAAO;AAAA,YAClB,~~MAAM,~~CAACQ~~,GAAQZ,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,YACzC,~~UAAUQ~~;AAAA,UAAA;AAAA,~~UAPLK~~;AAAA,QAAA,~~CASR~~;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}
1	+ {"version":3,"file":"MessageField.js","sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useMessagesForm } from '@/context/messages-form';\nimport type { MessageSchema } from '@/types';\nimport { cn } from '@/utils/cn';\nimport { parseMessageSchema } from '@/utils/schema';\nimport { createValidator } from '@/utils/validate';\n\nimport { MessageController } from '../MessageController';\n\ninterface MessageFieldProps {\n schema: MessageSchema;\n messageKey: string;\n path: string;\n className?: string;\n}\n\nexport function MessageField({\n schema,\n messageKey,\n path,\n className,\n}: MessageFieldProps): React.ReactNode {\n const { locales } = useMessagesForm();\n\n const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n const validator = useMemo(\n () => createValidator(config.variables),\n [config.variables],\n );\n\n return (\n <div className={cn('', className)}>\n {config.description && <p>{config.description}</p>}\n\n {locales.length === 1 ? (\n <MessageController\n className={className}\n locale={locales[0]}\n name={[locales[0], path, messageKey].join('.')}\n type={config.type}\n validate={validator}\n variables={config.variables}\n />\n ) : (\n <div\n className={cn('-mx-3 flex min-w-0 gap-4 px-3', {\n 'overflow-x-auto': config.type === 'icu',\n // \"flex-col\": config.type === \"rich\",\n })}\n >\n {locales.map((locale) => (\n <MessageController\n className=\"flex-1\"\n key={locale}\n label={locale.toUpperCase()}\n locale={locale}\n name={[locale, path, messageKey].join('.')}\n type={config.type}\n validate={validator}\n variables={config.variables}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n"],"names":["MessageField","schema","messageKey","path","className","locales","useMessagesForm","config","useMemo","parseMessageSchema","validator","createValidator","cn","jsx","MessageController","locale"],"mappings":";;;;;;;AAgBO,SAASA,EAAa;AAAA,EAC3B,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GAEdC,IAASC,EAAQ,MAAMC,EAAmBR,CAAM,GAAG,CAACA,CAAM,CAAC,GAE3DS,IAAYF;AAAA,IAChB,MAAMG,EAAgBJ,EAAO,SAAS;AAAA,IACtC,CAACA,EAAO,SAAS;AAAA,EAAA;AAGnB,2BACG,OAAA,EAAI,WAAWK,EAAG,IAAIR,CAAS,GAC7B,UAAA;AAAA,IAAAG,EAAO,eAAe,gBAAAM,EAAC,KAAA,EAAG,UAAAN,EAAO,aAAY;AAAA,IAE7CF,EAAQ,WAAW,IAClB,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAV;AAAA,QACA,QAAQC,EAAQ,CAAC;AAAA,QACjB,MAAM,CAACA,EAAQ,CAAC,GAAGF,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,QAC7C,MAAMK,EAAO;AAAA,QACb,UAAUG;AAAA,QACV,WAAWH,EAAO;AAAA,MAAA;AAAA,IAAA,IAGpB,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,iCAAiC;AAAA,UAC7C,mBAAmBL,EAAO,SAAS;AAAA;AAAA,QAAA,CAEpC;AAAA,QAEA,UAAAF,EAAQ,IAAI,CAACU,MACZ,gBAAAF;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YAEV,OAAOC,EAAO,YAAA;AAAA,YACd,QAAAA;AAAA,YACA,MAAM,CAACA,GAAQZ,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,YACzC,MAAMK,EAAO;AAAA,YACb,UAAUG;AAAA,YACV,WAAWH,EAAO;AAAA,UAAA;AAAA,UANbQ;AAAA,QAAA,CAQR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

package/dist/components/layout/MessagesTabs.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { MessagesSchema } from '../../types.ts';
+import { MessagesSchema } from '../../types';
 interface MessagesTabsProps {
     schema: MessagesSchema;
     activeTab: string | undefined;
@@ -6,3 +6,4 @@ interface MessagesTabsProps {
 }
 export declare function MessagesTabs({ schema, activeTab, setActiveTab, }: MessagesTabsProps): React.ReactNode;
 export {};
+//# sourceMappingURL=MessagesTabs.d.ts.map

package/dist/components/layout/MessagesTabs.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MessagesTabs.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,UAAU,iBAAiB;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAGD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAqCrC"}

package/dist/components/layout/MessagesTabs.js CHANGED Viewed

@@ -18,18 +18,18 @@ function N({
   return /* @__PURE__ */ s(
     "div",
     {
+      className: "overflow-x-auto text-nowrap border-border border-b-2 px-4",
       role: "tablist",
-      className: "overflow-x-auto border-b-2 border-border px-4 text-nowrap",
       children: Object.keys(m).map((r) => /* @__PURE__ */ s(
         p,
         {
-          size: "large",
+          buttonStyle: o === r ? "pill" : "tab",
           className: f(
             "my-0 rounded-b-none text-lg",
             i(r) ? o === r ? "bg-error" : "text-error" : void 0
           ),
-          buttonStyle: o === r ? "pill" : "tab",
           onClick: () => n(r),
+          size: "large",
           type: "button",
           children: x(r)
         },