payload-intl 1.1.2 → 1.2.0

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

@@ -1,53 +1,59 @@
-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 F({
-  element: t,
-  onUpdate: a
-}) {
-  const r = d(
-    () => Object.entries(t.options).map(([e, o]) => ({
-      name: e,
-      content: n(o.value)
-    })),
-    [t]
-  ), { control: i, register: l, getValues: c } = g({
-    defaultValues: { options: r }
-  }), { fields: m } = v({
-    control: i,
-    name: "options"
-  });
-  return x(() => () => {
-    const e = c(), o = {
-      ...t,
-      options: Object.fromEntries(
-        e.options.map(({ name: p, content: u }) => [
-          p,
-          { value: b(u) }
-        ])
-      )
-    };
-    a(n([o]));
-  }, []), /* @__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",
-        ...l(`options.${o}.content`)
-      }
-    )
-  ] }, e.name)) });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { parseICUMessage, serializeICUMessage } from '../../../../utils/icu-tranform';
+import styles from './SelectVariableEditor.module.css';
+export function SelectVariableEditor({ element, onUpdate }) {
+    const options = useMemo(()=>Object.entries(element.options).map(([name, option])=>({
+                name,
+                content: serializeICUMessage(option.value)
+            })), [
+        element
+    ]);
+    const { control, register, getValues } = useForm({
+        defaultValues: {
+            options
+        }
+    });
+    const { fields } = useFieldArray({
+        control,
+        name: 'options'
+    });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent
+    useEffect(()=>{
+        return ()=>{
+            const values = getValues();
+            const updatedElement = {
+                ...element,
+                options: Object.fromEntries(values.options.map(({ name, content })=>[
+                        name,
+                        {
+                            value: parseICUMessage(content)
+                        }
+                    ]))
+            };
+            onUpdate(serializeICUMessage([
+                updatedElement
+            ]));
+        };
+    }, []);
+    return /*#__PURE__*/ _jsx("div", {
+        className: styles.root,
+        children: fields.map((field, index)=>/*#__PURE__*/ _jsxs("div", {
+                className: styles.field,
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        className: styles.label,
+                        htmlFor: `options.${index}.content`,
+                        children: field.name
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        className: styles.input,
+                        ...register(`options.${index}.content`)
+                    })
+                ]
+            }, field.name))
+    });
 }
-export {
-  F as SelectVariableEditor
-};
-//# sourceMappingURL=SelectVariableEditor.js.map
+
+//# sourceMappingURL=SelectVariableEditor.js.map

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

@@ -1 +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;"}
+{"version":3,"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\nimport styles from './SelectVariableEditor.module.css';\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={styles.root}>\n      {fields.map((field, index) => (\n        <div className={styles.field} key={field.name}>\n          <label className={styles.label} htmlFor={`options.${index}.content`}>\n            {field.name}\n          </label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            className={styles.input}\n            {...register(`options.${index}.content`)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["useEffect","useMemo","useFieldArray","useForm","parseICUMessage","serializeICUMessage","styles","SelectVariableEditor","element","onUpdate","options","Object","entries","map","name","option","content","value","control","register","getValues","defaultValues","fields","values","updatedElement","fromEntries","div","className","root","field","index","label","htmlFor","input"],"mappings":";AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAC3C,SAASC,aAAa,EAAEC,OAAO,QAAQ,kBAAkB;AAGzD,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE5E,OAAOC,YAAY,oCAAoC;AAOvD,OAAO,SAASC,qBAAqB,EACnCC,OAAO,EACPC,QAAQ,EACkB;IAC1B,MAAMC,UAAUT,QACd,IACEU,OAAOC,OAAO,CAACJ,QAAQE,OAAO,EAAEG,GAAG,CAAC,CAAC,CAACC,MAAMC,OAAO,GAAM,CAAA;gBACvDD;gBACAE,SAASX,oBAAoBU,OAAOE,KAAK;YAC3C,CAAA,IACF;QAACT;KAAQ;IAGX,MAAM,EAAEU,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGjB,QAEtC;QACDkB,eAAe;YAAEX;QAAQ;IAC3B;IACA,MAAM,EAAEY,MAAM,EAAE,GAAGpB,cAAc;QAC/BgB;QACAJ,MAAM;IACR;IAEA,0EAA0E;IAC1Ed,UAAU;QACR,OAAO;YACL,MAAMuB,SAASH;YACf,MAAMI,iBAAgC;gBACpC,GAAGhB,OAAO;gBACVE,SAASC,OAAOc,WAAW,CACzBF,OAAOb,OAAO,CAACG,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAEE,OAAO,EAAE,GAAK;wBACxCF;wBACA;4BAAEG,OAAOb,gBAAgBY;wBAAS;qBACnC;YAEL;YACAP,SAASJ,oBAAoB;gBAACmB;aAAe;QAC/C;IACF,GAAG,EAAE;IAEL,qBACE,KAACE;QAAIC,WAAWrB,OAAOsB,IAAI;kBACxBN,OAAOT,GAAG,CAAC,CAACgB,OAAOC,sBAClB,MAACJ;gBAAIC,WAAWrB,OAAOuB,KAAK;;kCAC1B,KAACE;wBAAMJ,WAAWrB,OAAOyB,KAAK;wBAAEC,SAAS,CAAC,QAAQ,EAAEF,MAAM,QAAQ,CAAC;kCAChED,MAAMf,IAAI;;kCAGb,KAACmB;wBACCN,WAAWrB,OAAO2B,KAAK;wBACtB,GAAGd,SAAS,CAAC,QAAQ,EAAEW,MAAM,QAAQ,CAAC,CAAC;;;eAPTD,MAAMf,IAAI;;AAarD"}

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

@@ -0,0 +1,25 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.label {
+  font-weight: 500;
+  font-size: var(--font-size-small);
+}
+
+.input {
+  outline: none;
+}
+
+.input:focus {
+  outline: none;
+}

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

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

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

@@ -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"}
+{"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;AAM1C,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,2CA2BxB"}

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

@@ -1,33 +1,37 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useMemo as u, useEffect as m } from "react";
-import { useForm as f } from "react-hook-form";
-import { serializeICUMessage as t, parseICUMessage as l } from "../../../../utils/icu-tranform.js";
-function E({
-  element: e,
-  onUpdate: o
-}) {
-  const r = u(
-    () => t(e.children),
-    [e]
-  ), { register: s, getValues: n } = f({
-    defaultValues: { content: r }
-  });
-  return m(() => () => {
-    const { content: a } = n(), c = {
-      ...e,
-      children: l(a)
-    };
-    o(t([c]));
-  }, []), /* @__PURE__ */ i(
-    "textarea",
-    {
-      className: "p-3 focus:outline-none",
-      ...s("content"),
-      rows: 1
-    }
-  );
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { parseICUMessage, serializeICUMessage } from '../../../../utils/icu-tranform';
+import styles from './TagVariableEditor.module.css';
+export function TagVariableEditor({ element, onUpdate }) {
+    const content = useMemo(()=>serializeICUMessage(element.children), [
+        element
+    ]);
+    const { register, getValues } = useForm({
+        defaultValues: {
+            content
+        }
+    });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent
+    useEffect(()=>{
+        return ()=>{
+            const { content } = getValues();
+            // TODO find better solution for this
+            const updatedElement = {
+                ...element,
+                children: parseICUMessage(content)
+            };
+            onUpdate(serializeICUMessage([
+                updatedElement
+            ]));
+        };
+    }, []);
+    // TODO add support for variable mentions
+    return /*#__PURE__*/ _jsx("textarea", {
+        className: styles.textarea,
+        ...register('content'),
+        rows: 1
+    });
 }
-export {
-  E as TagVariableEditor
-};
-//# sourceMappingURL=TagVariableEditor.js.map
+
+//# sourceMappingURL=TagVariableEditor.js.map

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

@@ -1 +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;"}
+{"version":3,"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\nimport styles from './TagVariableEditor.module.css';\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 className={styles.textarea} {...register('content')} rows={1} />\n  );\n}\n"],"names":["useEffect","useMemo","useForm","parseICUMessage","serializeICUMessage","styles","TagVariableEditor","element","onUpdate","content","children","register","getValues","defaultValues","updatedElement","textarea","className","rows"],"mappings":";AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAC3C,SAASC,OAAO,QAAQ,kBAAkB;AAG1C,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE5E,OAAOC,YAAY,iCAAiC;AAOpD,OAAO,SAASC,kBAAkB,EAChCC,OAAO,EACPC,QAAQ,EACe;IACvB,MAAMC,UAAUR,QACd,IAAMG,oBAAoBG,QAAQG,QAAQ,GAC1C;QAACH;KAAQ;IAGX,MAAM,EAAEI,QAAQ,EAAEC,SAAS,EAAE,GAAGV,QAA6B;QAC3DW,eAAe;YAAEJ;QAAQ;IAC3B;IAEA,0EAA0E;IAC1ET,UAAU;QACR,OAAO;YACL,MAAM,EAAES,OAAO,EAAE,GAAGG;YACpB,qCAAqC;YACrC,MAAME,iBAA6B;gBACjC,GAAGP,OAAO;gBACVG,UAAUP,gBAAgBM;YAC5B;YACAD,SAASJ,oBAAoB;gBAACU;aAAe;QAC/C;IACF,GAAG,EAAE;IAEL,yCAAyC;IACzC,qBACE,KAACC;QAASC,WAAWX,OAAOU,QAAQ;QAAG,GAAGJ,SAAS,UAAU;QAAEM,MAAM;;AAEzE"}

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

@@ -0,0 +1,7 @@
+.textarea {
+  padding: 0.75rem;
+}
+
+.textarea:focus {
+  outline: none;
+}

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

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

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

@@ -1 +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"}
+{"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,EAAE,GAAG,EAAE,EAAE,sBAAsB,2CAShE"}

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

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

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

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

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

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

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

@@ -1 +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"}
+{"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;AAe5D,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

@@ -1,53 +1,50 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { ToggleGroup as l } from "radix-ui";
-import { useState as f, useRef as c, useEffect as m } from "react";
-import { isNumberElement as p, isPluralElement as i } from "@formatjs/icu-messageformat-parser";
-import { PluralVariableEditor as d } from "../editors/PluralVariableEditor.js";
-const v = [
-  "number",
-  "plural"
-  // "selectordinal"
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggleGroup } from 'radix-ui';
+import { useEffect, useRef, useState } from 'react';
+import { isNumberElement, isPluralElement } from '../../../../utils/guards';
+import { PluralVariableEditor } from '../editors/PluralVariableEditor';
+import styles from './NumericVariablePicker.module.css';
+const NUMERIC_TYPES = [
+    'number',
+    'plural'
 ];
-function E({
-  element: e,
-  onUpdate: n
-}) {
-  const [o, u] = f(() => {
-    if (p(e)) return "number";
-    if (i(e)) return "plural";
-  }), t = c(null);
-  return m(() => () => {
-    t.current && n(t.current.getValue());
-  }, []), /* @__PURE__ */ s("div", { className: "", children: [
-    /* @__PURE__ */ a(
-      l.Root,
-      {
-        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,
-            children: r
-          },
-          r
-        ))
-      }
-    ),
-    /* @__PURE__ */ a("div", { className: "p-3", children: o === "plural" && /* @__PURE__ */ a(
-      d,
-      {
-        element: i(e) ? e : void 0,
-        ref: t,
-        variableName: e.value
-      }
-    ) })
-  ] });
+export function NumericVariablePicker({ element, onUpdate }) {
+    const [type, setType] = useState(()=>{
+        if (isNumberElement(element)) return 'number';
+        if (isPluralElement(element)) return 'plural';
+        return undefined;
+    });
+    const getValueRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent
+    useEffect(()=>{
+        return ()=>{
+            if (!getValueRef.current) return;
+            onUpdate(getValueRef.current.getValue());
+        };
+    }, []);
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx(ToggleGroup.Root, {
+                className: styles.toggleGroup,
+                onValueChange: (value)=>setType(value),
+                type: "single",
+                value: type,
+                children: NUMERIC_TYPES.map((type)=>/*#__PURE__*/ _jsx(ToggleGroup.Item, {
+                        className: styles.toggleItem,
+                        value: type,
+                        children: type
+                    }, type))
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: styles.content,
+                children: type === 'plural' && /*#__PURE__*/ _jsx(PluralVariableEditor, {
+                    element: isPluralElement(element) ? element : undefined,
+                    ref: getValueRef,
+                    variableName: element.value
+                })
+            })
+        ]
+    });
 }
-export {
-  E as NumericVariablePicker
-};
-//# sourceMappingURL=NumericVariablePicker.js.map
+
+//# sourceMappingURL=NumericVariablePicker.js.map

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

@@ -1 +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;"}
+{"version":3,"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';\nimport styles from './NumericVariablePicker.module.css';\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>\n      <ToggleGroup.Root\n        className={styles.toggleGroup}\n        onValueChange={(value) => setType(value as NumericType)}\n        type=\"single\"\n        value={type}\n      >\n        {NUMERIC_TYPES.map((type) => (\n          <ToggleGroup.Item\n            className={styles.toggleItem}\n            key={type}\n            value={type}\n          >\n            {type}\n          </ToggleGroup.Item>\n        ))}\n      </ToggleGroup.Root>\n\n      <div className={styles.content}>\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":["ToggleGroup","useEffect","useRef","useState","isNumberElement","isPluralElement","PluralVariableEditor","styles","NUMERIC_TYPES","NumericVariablePicker","element","onUpdate","type","setType","undefined","getValueRef","current","getValue","div","Root","className","toggleGroup","onValueChange","value","map","Item","toggleItem","content","ref","variableName"],"mappings":";AAAA,SAASA,WAAW,QAAQ,WAAW;AACvC,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,eAAe,EAAEC,eAAe,QAAQ,iBAAiB;AAElE,SAASC,oBAAoB,QAAQ,kCAAkC;AACvE,OAAOC,YAAY,qCAAqC;AAExD,MAAMC,gBAAgB;IACpB;IACA;CAED;AASD,OAAO,SAASC,sBAAsB,EACpCC,OAAO,EACPC,QAAQ,EACmB;IAC3B,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAAkC;QACxD,IAAIC,gBAAgBM,UAAU,OAAO;QACrC,IAAIL,gBAAgBK,UAAU,OAAO;QACrC,OAAOI;IACT;IACA,MAAMC,cAAcb,OAAmC;IAEvD,0EAA0E;IAC1ED,UAAU;QACR,OAAO;YACL,IAAI,CAACc,YAAYC,OAAO,EAAE;YAC1BL,SAASI,YAAYC,OAAO,CAACC,QAAQ;QACvC;IACF,GAAG,EAAE;IAEL,qBACE,MAACC;;0BACC,KAAClB,YAAYmB,IAAI;gBACfC,WAAWb,OAAOc,WAAW;gBAC7BC,eAAe,CAACC,QAAUV,QAAQU;gBAClCX,MAAK;gBACLW,OAAOX;0BAENJ,cAAcgB,GAAG,CAAC,CAACZ,qBAClB,KAACZ,YAAYyB,IAAI;wBACfL,WAAWb,OAAOmB,UAAU;wBAE5BH,OAAOX;kCAENA;uBAHIA;;0BAQX,KAACM;gBAAIE,WAAWb,OAAOoB,OAAO;0BAC3Bf,SAAS,0BACR,KAACN;oBACCI,SAASL,gBAAgBK,WAAWA,UAAUI;oBAC9Cc,KAAKb;oBACLc,cAAcnB,QAAQa,KAAK;;;;;AAMvC"}

package/dist/components/inputs/variables/pickers/NumericVariablePicker.module.css

@@ -0,0 +1,27 @@
+.toggleGroup {
+  display: flex;
+  background-color: var(--theme-elevation-100);
+}
+
+.toggleItem {
+  flex: 1;
+  border: none;
+}
+
+.toggleItem[data-state="off"] {
+  cursor: pointer;
+  opacity: 0.5;
+}
+
+.toggleItem[data-state="off"]:hover {
+  opacity: 1;
+}
+
+.toggleItem[data-state="on"] {
+  background-color: var(--theme-elevation-800);
+  color: var(--theme-elevation-0);
+}
+
+.content {
+  padding: 0.75rem;
+}

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

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

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

@@ -1 +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"}
+{"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;AAYxD,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/inputs/variables/pickers/TemporalElementEditor.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggleGroup } from 'radix-ui';
+import { useEffect, useRef, useState } from 'react';
+import { isDateElement, isTimeElement } from '../../../../utils/guards';
+import { DateVariableEditor } from '../editors/DateVariableEditor';
+import { TimeElementEditor } from '../editors/TimeVariableEditor';
+import styles from './TemporalElementEditor.module.css';
+const TEMPORAL_TYPES = [
+    'date',
+    'time'
+];
+export function TemporalElementEditor({ element, onUpdate }) {
+    const [type, setType] = useState(()=>{
+        if (isDateElement(element)) return 'date';
+        if (isTimeElement(element)) return 'time';
+        return undefined;
+    });
+    const getValueRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent
+    useEffect(()=>{
+        return ()=>{
+            if (!getValueRef.current) return;
+            onUpdate(getValueRef.current.getValue());
+        };
+    }, []);
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx(ToggleGroup.Root, {
+                className: styles.toggleGroup,
+                onValueChange: (value)=>setType(value),
+                type: "single",
+                value: type,
+                children: TEMPORAL_TYPES.map((type)=>/*#__PURE__*/ _jsx(ToggleGroup.Item, {
+                        className: styles.toggleItem,
+                        value: type,
+                        children: type
+                    }, type))
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.content,
+                children: [
+                    type === 'date' && /*#__PURE__*/ _jsx(DateVariableEditor, {
+                        element: isDateElement(element) ? element : undefined,
+                        name: element.value,
+                        ref: getValueRef
+                    }),
+                    type === 'time' && /*#__PURE__*/ _jsx(TimeElementEditor, {
+                        element: isTimeElement(element) ? element : undefined,
+                        name: element.value,
+                        ref: getValueRef
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TemporalElementEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/variables/pickers/TemporalElementEditor.tsx"],"sourcesContent":["import { ToggleGroup } from 'radix-ui';\nimport { useEffect, useRef, useState } from 'react';\nimport type { DateElement, TimeElement } from '@/types';\n\nimport { isDateElement, isTimeElement } from '@/utils/guards';\n\nimport { DateVariableEditor } from '../editors/DateVariableEditor';\nimport { TimeElementEditor } from '../editors/TimeVariableEditor';\nimport styles from './TemporalElementEditor.module.css';\n\nconst TEMPORAL_TYPES = ['date', 'time'] as const;\n\ntype TemporalType = (typeof TEMPORAL_TYPES)[number];\n\nexport interface TemporalElementEditorProps {\n  element: DateElement | TimeElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TemporalElementEditor({\n  element,\n  onUpdate,\n}: TemporalElementEditorProps) {\n  const [type, setType] = useState<TemporalType | undefined>(() => {\n    if (isDateElement(element)) return 'date';\n    if (isTimeElement(element)) return 'time';\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>\n      <ToggleGroup.Root\n        className={styles.toggleGroup}\n        onValueChange={(value) => setType(value as TemporalType)}\n        type=\"single\"\n        value={type}\n      >\n        {TEMPORAL_TYPES.map((type) => (\n          <ToggleGroup.Item\n            className={styles.toggleItem}\n            key={type}\n            value={type}\n          >\n            {type}\n          </ToggleGroup.Item>\n        ))}\n      </ToggleGroup.Root>\n\n      <div className={styles.content}>\n        {type === 'date' && (\n          <DateVariableEditor\n            element={isDateElement(element) ? element : undefined}\n            name={element.value}\n            ref={getValueRef}\n          />\n        )}\n        {type === 'time' && (\n          <TimeElementEditor\n            element={isTimeElement(element) ? element : undefined}\n            name={element.value}\n            ref={getValueRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ToggleGroup","useEffect","useRef","useState","isDateElement","isTimeElement","DateVariableEditor","TimeElementEditor","styles","TEMPORAL_TYPES","TemporalElementEditor","element","onUpdate","type","setType","undefined","getValueRef","current","getValue","div","Root","className","toggleGroup","onValueChange","value","map","Item","toggleItem","content","name","ref"],"mappings":";AAAA,SAASA,WAAW,QAAQ,WAAW;AACvC,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,aAAa,EAAEC,aAAa,QAAQ,iBAAiB;AAE9D,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,OAAOC,YAAY,qCAAqC;AAExD,MAAMC,iBAAiB;IAAC;IAAQ;CAAO;AASvC,OAAO,SAASC,sBAAsB,EACpCC,OAAO,EACPC,QAAQ,EACmB;IAC3B,MAAM,CAACC,MAAMC,QAAQ,GAAGX,SAAmC;QACzD,IAAIC,cAAcO,UAAU,OAAO;QACnC,IAAIN,cAAcM,UAAU,OAAO;QACnC,OAAOI;IACT;IACA,MAAMC,cAAcd,OAAmC;IAEvD,0EAA0E;IAC1ED,UAAU;QACR,OAAO;YACL,IAAI,CAACe,YAAYC,OAAO,EAAE;YAC1BL,SAASI,YAAYC,OAAO,CAACC,QAAQ;QACvC;IACF,GAAG,EAAE;IAEL,qBACE,MAACC;;0BACC,KAACnB,YAAYoB,IAAI;gBACfC,WAAWb,OAAOc,WAAW;gBAC7BC,eAAe,CAACC,QAAUV,QAAQU;gBAClCX,MAAK;gBACLW,OAAOX;0BAENJ,eAAegB,GAAG,CAAC,CAACZ,qBACnB,KAACb,YAAY0B,IAAI;wBACfL,WAAWb,OAAOmB,UAAU;wBAE5BH,OAAOX;kCAENA;uBAHIA;;0BAQX,MAACM;gBAAIE,WAAWb,OAAOoB,OAAO;;oBAC3Bf,SAAS,wBACR,KAACP;wBACCK,SAASP,cAAcO,WAAWA,UAAUI;wBAC5Cc,MAAMlB,QAAQa,KAAK;wBACnBM,KAAKd;;oBAGRH,SAAS,wBACR,KAACN;wBACCI,SAASN,cAAcM,WAAWA,UAAUI;wBAC5Cc,MAAMlB,QAAQa,KAAK;wBACnBM,KAAKd;;;;;;AAMjB"}

package/dist/components/inputs/variables/pickers/TemporalElementEditor.module.css

@@ -0,0 +1,27 @@
+.toggleGroup {
+  display: flex;
+  background-color: var(--theme-elevation-100);
+}
+
+.toggleItem {
+  flex: 1;
+  border: none;
+}
+
+.toggleItem[data-state="off"] {
+  cursor: pointer;
+  opacity: 0.5;
+}
+
+.toggleItem[data-state="off"]:hover {
+  opacity: 1;
+}
+
+.toggleItem[data-state="on"] {
+  background-color: var(--theme-elevation-800);
+  color: var(--theme-elevation-0);
+}
+
+.content {
+  padding: 0.75rem;
+}

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

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