payload-intl 0.0.4 → 0.0.6

package/dist/components/MessageController.d.ts

@@ -3,7 +3,7 @@ import { MessageType } from '../utils/schema';
 import { MessageValidator } from '../utils/validate';
 interface MessageControllerProps {
     type: MessageType;
-    label: string;
+    label?: string;
     locale: string;
     name: string;
     className?: string;

package/dist/components/MessageController.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageController.js","sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport type { MessageType } from \"@/utils/schema\";\nimport type { MessageValidator } from \"@/utils/validate\";\nimport { Controller } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nimport { MessageInput } from \"./inputs/MessageInput\";\nimport { RichTextInput } from \"./inputs/RichTextInput\";\n\ninterface MessageControllerProps {\n  type: MessageType;\n  label: string;\n  locale: string;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n}\n\nexport function MessageController({\n  type,\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n}: MessageControllerProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  if (type === \"rich\") {\n    return (\n      <Controller\n        control={control}\n        name={name}\n        render={({ field, fieldState }) => (\n          <RichTextInput\n            className={className}\n            error={fieldState.error}\n            label={label}\n            lang={locale}\n            onChange={field.onChange}\n            onBlur={field.onBlur}\n            value={(field.value as unknown as string) || \"\"}\n          />\n        )}\n        rules={{\n          required: true,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          label={label}\n          lang={locale}\n          className={className}\n          value={(field.value as unknown as string) || \"\"}\n          variables={variables}\n          error={fieldState.error}\n          onChange={field.onChange}\n          onBlur={field.onBlur}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["MessageController","type","name","variables","label","locale","validate","className","control","useMessagesForm","jsx","Controller","field","fieldState","RichTextInput","MessageInput"],"mappings":";;;;;AAoBO,SAASA,EAAkB;AAAA,EAChC,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA4C;AAC1C,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SAAIR,MAAS,SAET,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAAP;AAAA,UACA,OAAOM,EAAW;AAAA,UAClB,OAAAT;AAAA,UACA,MAAMC;AAAA,UACN,UAAUO,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,UACd,OAAQA,EAAM,SAA+B;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjD,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,IAMJ,gBAAAF;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAAX;AAAA,UACA,MAAMC;AAAA,UACN,WAAAE;AAAA,UACA,OAAQK,EAAM,SAA+B;AAAA,UAC7C,WAAAT;AAAA,UACA,OAAOU,EAAW;AAAA,UAClB,UAAUD,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAAN;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"MessageController.js","sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport type { MessageType } from \"@/utils/schema\";\nimport type { MessageValidator } from \"@/utils/validate\";\nimport { Controller } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nimport { MessageInput } from \"./inputs/MessageInput\";\nimport { RichTextInput } from \"./inputs/RichTextInput\";\n\ninterface MessageControllerProps {\n  type: MessageType;\n  label?: string;\n  locale: string;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n}\n\nexport function MessageController({\n  type,\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n}: MessageControllerProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  if (type === \"rich\") {\n    return (\n      <Controller\n        control={control}\n        name={name}\n        render={({ field, fieldState }) => (\n          <RichTextInput\n            className={className}\n            error={fieldState.error}\n            label={label}\n            lang={locale}\n            onChange={field.onChange}\n            onBlur={field.onBlur}\n            value={(field.value as unknown as string) || \"\"}\n          />\n        )}\n        rules={{\n          required: true,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          label={label}\n          lang={locale}\n          className={className}\n          value={(field.value as unknown as string) || \"\"}\n          variables={variables}\n          error={fieldState.error}\n          onChange={field.onChange}\n          onBlur={field.onBlur}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["MessageController","type","name","variables","label","locale","validate","className","control","useMessagesForm","jsx","Controller","field","fieldState","RichTextInput","MessageInput"],"mappings":";;;;;AAoBO,SAASA,EAAkB;AAAA,EAChC,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA4C;AAC1C,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SAAIR,MAAS,SAET,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAAP;AAAA,UACA,OAAOM,EAAW;AAAA,UAClB,OAAAT;AAAA,UACA,MAAMC;AAAA,UACN,UAAUO,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,UACd,OAAQA,EAAM,SAA+B;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjD,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,IAMJ,gBAAAF;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAAX;AAAA,UACA,MAAMC;AAAA,UACN,WAAAE;AAAA,UACA,OAAQK,EAAM,SAA+B;AAAA,UAC7C,WAAAT;AAAA,UACA,OAAOU,EAAW;AAAA,UAClB,UAAUD,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAAN;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/inputs/InputWrapper.d.ts

@@ -1,6 +1,6 @@
 import { FieldError } from 'react-hook-form';
 export interface InputWrapperProps {
-    label: string;
+    label?: string;
     error: FieldError | undefined;
     className?: string;
 }

package/dist/components/inputs/InputWrapper.js

@@ -1,26 +1,26 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { FieldLabel as i } from "@payloadcms/ui";
-import { cn as s } from "../../utils/cn.js";
+import { cn as t } from "../../utils/cn.js";
 function c({
-  label: o,
-  error: r,
-  className: t,
+  label: r,
+  error: s,
+  className: l,
   children: a
 }) {
-  return /* @__PURE__ */ l("div", { className: s("flex flex-col gap-1", t), children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ o("div", { className: t("flex flex-col gap-1", l), children: [
+    /* @__PURE__ */ o(
       "fieldset",
       {
-        className: s("mx-0 rounded-md focus-within:border-elevation-400", {
-          "border-error bg-error": r
+        className: t("mx-0 rounded-md focus-within:border-elevation-400", {
+          "border-error bg-error": s
         }),
         children: [
-          /* @__PURE__ */ e("legend", { className: "-ml-2 px-1.5 text-base", children: /* @__PURE__ */ e(i, { label: o }) }),
+          r && /* @__PURE__ */ e("legend", { className: "-ml-2 px-1.5 text-base", children: /* @__PURE__ */ e(i, { label: r }) }),
           a
         ]
       }
     ),
-    /* @__PURE__ */ e("p", { className: "text-base text-error", children: r?.message })
+    /* @__PURE__ */ e("p", { className: "text-base text-error", children: s?.message })
   ] });
 }
 export {

package/dist/components/inputs/InputWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.js","sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import type { FieldError } from \"react-hook-form\";\nimport { FieldLabel } from \"@payloadcms/ui\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface InputWrapperProps {\n  label: string;\n  error: FieldError | undefined;\n  className?: string;\n}\n\nexport function InputWrapper({\n  label,\n  error,\n  className,\n  children,\n}: React.PropsWithChildren<InputWrapperProps>) {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)}>\n      <fieldset\n        className={cn(\"mx-0 rounded-md focus-within:border-elevation-400\", {\n          \"border-error bg-error\": error,\n        })}\n      >\n        <legend className=\"-ml-2 px-1.5 text-base\">\n          <FieldLabel label={label} />\n        </legend>\n        {children}\n      </fieldset>\n      <p className=\"text-base text-error\">{error?.message}</p>\n    </div>\n  );\n}\n"],"names":["InputWrapper","label","error","className","children","cn","jsxs","jsx","FieldLabel"],"mappings":";;;AAWO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA+C;AAC7C,2BACG,OAAA,EAAI,WAAWC,EAAG,uBAAuBF,CAAS,GACjD,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,qDAAqD;AAAA,UACjE,yBAAyBH;AAAA,QAAA,CAC1B;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAK,EAAC,YAAO,WAAU,0BAChB,UAAA,gBAAAA,EAACC,GAAA,EAAW,OAAAP,GAAc,GAC5B;AAAA,UACCG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAG,EAAC,KAAA,EAAE,WAAU,wBAAwB,aAAO,QAAA,CAAQ;AAAA,EAAA,GACtD;AAEJ;"}
+{"version":3,"file":"InputWrapper.js","sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import type { FieldError } from \"react-hook-form\";\nimport { FieldLabel } from \"@payloadcms/ui\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface InputWrapperProps {\n  label?: string;\n  error: FieldError | undefined;\n  className?: string;\n}\n\nexport function InputWrapper({\n  label,\n  error,\n  className,\n  children,\n}: React.PropsWithChildren<InputWrapperProps>) {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)}>\n      <fieldset\n        className={cn(\"mx-0 rounded-md focus-within:border-elevation-400\", {\n          \"border-error bg-error\": error,\n        })}\n      >\n        {label && (\n          <legend className=\"-ml-2 px-1.5 text-base\">\n            <FieldLabel label={label} />\n          </legend>\n        )}\n        {children}\n      </fieldset>\n      <p className=\"text-base text-error\">{error?.message}</p>\n    </div>\n  );\n}\n"],"names":["InputWrapper","label","error","className","children","cn","jsxs","jsx","FieldLabel"],"mappings":";;;AAWO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA+C;AAC7C,2BACG,OAAA,EAAI,WAAWC,EAAG,uBAAuBF,CAAS,GACjD,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,qDAAqD;AAAA,UACjE,yBAAyBH;AAAA,QAAA,CAC1B;AAAA,QAEA,UAAA;AAAA,UAAAD,uBACE,UAAA,EAAO,WAAU,0BAChB,UAAA,gBAAAM,EAACC,GAAA,EAAW,OAAAP,GAAc,EAAA,CAC5B;AAAA,UAEDG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAG,EAAC,KAAA,EAAE,WAAU,wBAAwB,aAAO,QAAA,CAAQ;AAAA,EAAA,GACtD;AAEJ;"}

package/dist/components/layout/MessageField.js

@@ -1,22 +1,21 @@
 import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import { useMemo as n } from "react";
-import { useMessagesForm as d } from "../../context/messages-form.js";
-import { cn as f } from "../../utils/cn.js";
-import { toWords as v } from "../../utils/format.js";
-import { parseMessageSchema as x } from "../../utils/schema.js";
-import { createValidator as b } from "../../utils/validate.js";
+import { useMessagesForm as v } from "../../context/messages-form.js";
+import { cn as d } from "../../utils/cn.js";
+import { parseMessageSchema as f } from "../../utils/schema.js";
+import { createValidator as x } from "../../utils/validate.js";
 import { MessageController as p } from "../MessageController.js";
-function F({
-  schema: s,
-  messageKey: i,
+function w({
+  schema: i,
+  messageKey: s,
   path: t,
   className: l
 }) {
-  const { locales: r } = d(), e = n(() => x(s), [s]), m = n(
-    () => b(e.variables),
+  const { locales: r } = v(), e = n(() => f(i), [i]), m = n(
+    () => x(e.variables),
     [e.variables]
   );
-  return /* @__PURE__ */ c("div", { className: f("", l), children: [
+  return /* @__PURE__ */ c("div", { className: d("", l), children: [
     e.description && /* @__PURE__ */ a("p", { children: e.description }),
     r.length === 1 ? /* @__PURE__ */ a(
       p,
@@ -24,9 +23,8 @@ function F({
         className: l,
         type: e.type,
         variables: e.variables,
-        label: v(i),
         locale: r[0],
-        name: [r[0], t, i].join("."),
+        name: [r[0], t, s].join("."),
         validate: m
       }
     ) : /* @__PURE__ */ a("div", { className: "-mx-3 flex min-w-0 gap-4 overflow-x-auto overscroll-x-none px-3", children: r.map((o) => /* @__PURE__ */ a(
@@ -37,7 +35,7 @@ function F({
         label: o.toUpperCase(),
         locale: o,
         variables: e.variables,
-        name: [o, t, i].join("."),
+        name: [o, t, s].join("."),
         validate: m
       },
       o
@@ -45,6 +43,6 @@ function F({
   ] });
 }
 export {
-  F as MessageField
+  w as MessageField
 };
 //# sourceMappingURL=MessageField.js.map

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

@@ -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 { toWords } from \"@/utils/format\";\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          label={toWords(messageKey)}\n          locale={locales[0]}\n          name={[locales[0], path, messageKey].join(\".\")}\n          validate={validator}\n        />\n      ) : (\n        <div className=\"-mx-3 flex min-w-0 gap-4 overflow-x-auto overscroll-x-none px-3\">\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","toWords","locale"],"mappings":";;;;;;;;AAkBO,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,OAAOQ,EAAQb,CAAU;AAAA,QACzB,QAAQG,EAAQ,CAAC;AAAA,QACjB,MAAM,CAACA,EAAQ,CAAC,GAAGF,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,QAC7C,UAAUQ;AAAA,MAAA;AAAA,IAAA,sBAGX,OAAA,EAAI,WAAU,mEACZ,UAAAL,EAAQ,IAAI,CAACW,MACZ,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,MAAMP,EAAO;AAAA,QACb,OAAOS,EAAO,YAAA;AAAA,QACd,QAAAA;AAAA,QACA,WAAWT,EAAO;AAAA,QAClB,MAAM,CAACS,GAAQb,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,QACzC,UAAUQ;AAAA,MAAA;AAAA,MAPLM;AAAA,IAAA,CASR,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}
+{"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 { toWords } from \"@/utils/format\";\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 className=\"-mx-3 flex min-w-0 gap-4 overflow-x-auto overscroll-x-none px-3\">\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":";;;;;;;AAkBO,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,sBAGX,OAAA,EAAI,WAAU,mEACZ,UAAAL,EAAQ,IAAI,CAACU,MACZ,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,MAAMP,EAAO;AAAA,QACb,OAAOQ,EAAO,YAAA;AAAA,QACd,QAAAA;AAAA,QACA,WAAWR,EAAO;AAAA,QAClB,MAAM,CAACQ,GAAQZ,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,QACzC,UAAUQ;AAAA,MAAA;AAAA,MAPLK;AAAA,IAAA,CASR,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/layout/MessagesTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesTree.js","sources":["../../../src/components/layout/MessagesTree.tsx"],"sourcesContent":["import type { Messages } from \"@/types\";\nimport { Collapsible } from \"@payloadcms/ui\";\nimport { get } from \"lodash-es\";\nimport { useCallback } from \"react\";\nimport { useFormState } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\nimport { toWords } from \"@/utils/format\";\n\nimport { MessageField } from \"./MessageField\";\n\ninterface MessagesTreeProps {\n  path: string;\n  nestingLevel: number;\n  schema: Messages;\n  className?: string;\n}\n\nexport function MessagesTree({\n  path,\n  schema,\n  nestingLevel = 0,\n  className,\n}: MessagesTreeProps): React.ReactNode {\n  const { control, locales } = useMessagesForm();\n  const { errors } = useFormState({ control });\n\n  const hasErrors = useCallback(\n    (key: string) => {\n      return locales.some(\n        (locale) => get(errors, [locale, path, key].join(\".\")) !== undefined,\n      );\n    },\n    [errors, locales, path],\n  );\n\n  return (\n    <div className={cn(\"grid gap-6\", className)}>\n      {Object.entries(schema).map(([key, value]) => (\n        <div\n          key={key}\n          className=\"grid min-w-0\"\n          style={\n            {\n              [\"--nesting-level\"]: nestingLevel,\n            } as React.CSSProperties\n          }\n        >\n          <Collapsible\n            className=\"messages-tree-collapsible min-w-0\"\n            header={\n              <span\n                className={cn(\"text-xl\", {\n                  \"text-error\": hasErrors(key),\n                })}\n              >\n                {toWords(key)}\n              </span>\n            }\n          >\n            {typeof value === \"string\" ? (\n              <MessageField\n                className=\"min-w-0\"\n                schema={value}\n                key={key}\n                messageKey={key}\n                path={path}\n              />\n            ) : (\n              <MessagesTree\n                nestingLevel={nestingLevel + 1}\n                path={[path, key].join(\".\")}\n                schema={value}\n              />\n            )}\n          </Collapsible>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["MessagesTree","path","schema","nestingLevel","className","control","locales","useMessagesForm","errors","useFormState","hasErrors","useCallback","key","locale","get","cn","value","jsx","Collapsible","MessageField"],"mappings":";;;;;;;;;AAmBO,SAASA,EAAa;AAAA,EAC3B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAA,GACvB,EAAE,QAAAC,EAAA,IAAWC,EAAa,EAAE,SAAAJ,GAAS,GAErCK,IAAYC;AAAA,IAChB,CAACC,MACQN,EAAQ;AAAA,MACb,CAACO,MAAWC,EAAIN,GAAQ,CAACK,GAAQZ,GAAMW,CAAG,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAAA;AAAA,IAG/D,CAACJ,GAAQF,GAASL,CAAI;AAAA,EAAA;AAGxB,2BACG,OAAA,EAAI,WAAWc,EAAG,cAAcX,CAAS,GACvC,UAAA,OAAO,QAAQF,CAAM,EAAE,IAAI,CAAC,CAACU,GAAKI,CAAK,MACtC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,OACE;AAAA,QACG,mBAAoBd;AAAA,MAAA;AAAA,MAIzB,UAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,QACE,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAG,WAAW;AAAA,gBACvB,cAAcL,EAAUE,CAAG;AAAA,cAAA,CAC5B;AAAA,cAEA,YAAQA,CAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAIf,UAAA,OAAOI,KAAU,WAChB,gBAAAC;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,QAAQH;AAAA,cAER,YAAYJ;AAAA,cACZ,MAAAX;AAAA,YAAA;AAAA,YAFKW;AAAA,UAAA,IAKP,gBAAAK;AAAA,YAACjB;AAAA,YAAA;AAAA,cACC,cAAcG,IAAe;AAAA,cAC7B,MAAM,CAACF,GAAMW,CAAG,EAAE,KAAK,GAAG;AAAA,cAC1B,QAAQI;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAEJ;AAAA,IAnCKJ;AAAA,EAAA,CAqCR,GACH;AAEJ;"}
+{"version":3,"file":"MessagesTree.js","sources":["../../../src/components/layout/MessagesTree.tsx"],"sourcesContent":["import type { Messages } from \"@/types\";\nimport { Collapsible } from \"@payloadcms/ui\";\nimport { get } from \"lodash-es\";\nimport { useCallback } from \"react\";\nimport { useFormState } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\nimport { toWords } from \"@/utils/format\";\n\nimport { MessageField } from \"./MessageField\";\n\ninterface MessagesTreeProps {\n  path: string;\n  nestingLevel: number;\n  schema: Messages;\n  className?: string;\n}\n\n// TODO fix sticky position on single locale form\n\nexport function MessagesTree({\n  path,\n  schema,\n  nestingLevel = 0,\n  className,\n}: MessagesTreeProps): React.ReactNode {\n  const { control, locales } = useMessagesForm();\n  const { errors } = useFormState({ control });\n\n  const hasErrors = useCallback(\n    (key: string) => {\n      return locales.some(\n        (locale) => get(errors, [locale, path, key].join(\".\")) !== undefined,\n      );\n    },\n    [errors, locales, path],\n  );\n\n  return (\n    <div className={cn(\"grid gap-6\", className)}>\n      {Object.entries(schema).map(([key, value]) => (\n        <div\n          key={key}\n          className=\"grid min-w-0\"\n          style={\n            {\n              [\"--nesting-level\"]: nestingLevel,\n            } as React.CSSProperties\n          }\n        >\n          <Collapsible\n            className=\"messages-tree-collapsible min-w-0\"\n            header={\n              <span\n                className={cn(\"text-xl\", {\n                  \"text-error\": hasErrors(key),\n                })}\n              >\n                {toWords(key)}\n              </span>\n            }\n          >\n            {typeof value === \"string\" ? (\n              <MessageField\n                className=\"min-w-0\"\n                schema={value}\n                key={key}\n                messageKey={key}\n                path={path}\n              />\n            ) : (\n              <MessagesTree\n                nestingLevel={nestingLevel + 1}\n                path={[path, key].join(\".\")}\n                schema={value}\n              />\n            )}\n          </Collapsible>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["MessagesTree","path","schema","nestingLevel","className","control","locales","useMessagesForm","errors","useFormState","hasErrors","useCallback","key","locale","get","cn","value","jsx","Collapsible","MessageField"],"mappings":";;;;;;;;;AAqBO,SAASA,EAAa;AAAA,EAC3B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAA,GACvB,EAAE,QAAAC,EAAA,IAAWC,EAAa,EAAE,SAAAJ,GAAS,GAErCK,IAAYC;AAAA,IAChB,CAACC,MACQN,EAAQ;AAAA,MACb,CAACO,MAAWC,EAAIN,GAAQ,CAACK,GAAQZ,GAAMW,CAAG,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAAA;AAAA,IAG/D,CAACJ,GAAQF,GAASL,CAAI;AAAA,EAAA;AAGxB,2BACG,OAAA,EAAI,WAAWc,EAAG,cAAcX,CAAS,GACvC,UAAA,OAAO,QAAQF,CAAM,EAAE,IAAI,CAAC,CAACU,GAAKI,CAAK,MACtC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,OACE;AAAA,QACG,mBAAoBd;AAAA,MAAA;AAAA,MAIzB,UAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,QACE,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAG,WAAW;AAAA,gBACvB,cAAcL,EAAUE,CAAG;AAAA,cAAA,CAC5B;AAAA,cAEA,YAAQA,CAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAIf,UAAA,OAAOI,KAAU,WAChB,gBAAAC;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,QAAQH;AAAA,cAER,YAAYJ;AAAA,cACZ,MAAAX;AAAA,YAAA;AAAA,YAFKW;AAAA,UAAA,IAKP,gBAAAK;AAAA,YAACjB;AAAA,YAAA;AAAA,cACC,cAAcG,IAAe;AAAA,cAC7B,MAAM,CAACF,GAAMW,CAAG,EAAE,KAAK,GAAG;AAAA,cAC1B,QAAQI;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAEJ;AAAA,IAnCKJ;AAAA,EAAA,CAqCR,GACH;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-intl",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Payload Plugin for I18N using ICU Messages",
   "license": "MIT",
   "type": "module",
@@ -14,7 +14,8 @@
       "import": "./dist/exports/rsc.js",
       "types": "./dist/exports/rsc.d.ts",
       "default": "./dist/exports/rsc.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",