payload-intl 1.1.2 → 1.2.0

package/README.md

@@ -1,267 +1,108 @@
 # payload-intl
 
-**payload-intl** moves translations out of your codebase.
+Schema-driven internationalization for Payload CMS using ICU MessageFormat.
 
-1. Define message keys (and their arguments) in TypeScript.
-2. Translate them in Payload’s admin panel — no code required.
+[![npm version](https://img.shields.io/npm/v/payload-intl)](https://www.npmjs.com/package/payload-intl)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 
-**Features**
-
-- Define message schema in code; edit translations in a rich admin UI
-- Compatible with [next-intl](https://next-intl.dev/) and any ICU consumer
-- Automatic runtime validation of message arguments
-- Autocomplete to quickly insert and configure valid ICU arguments
-- Add optional descriptions to each message so editors understand the context
-- Visual tree & tabbed editor for quick navigation
-<!-- - Support for Rich Text messages -->
-<!-- - Import/export JSON, copy messages between paths -->
-
-## Getting Started
-
-```bash
-# pnpm
-pnpm add payload-intl
-# yarn
-yarn add payload-intl
-# npm
-npm install payload-intl
-```
-
-### 1) Define messages
-
-Organize messages in a hierarchical structure using ICU MessageFormat:
-
-```typescript
-// messages.ts
-export default {
-  UserProfile: {
-    title: "Hello {firstName}",
-    description:
-      "Welcome back, {firstName}! You have {count, plural, =0 {no messages} one {# message} other {# messages}}.",
-    status:
-      "Your account is {status, select, active {active} inactive {inactive} pending {pending} other {unknown}}.",
-  },
-  Navigation: {
-    home: "Home",
-    about: "About",
-  },
-} as const;
-```
-
-You can also use JSON files, but additional steps are required for type-safe arguments with next-intl. See the [next-intl documentation](https://next-intl.dev/docs/workflows/typescript#messages-arguments) for details.
-
-### 2) Configure Payload
-
-Add the plugin to your `payload.config.ts`:
-
-```typescript
-import { buildConfig } from "payload";
-import { intlPlugin } from "payload-intl";
+## Overview
 
-import messages from "./messages";
+Define your message keys as a typed schema using ICU MessageFormat syntax, then manage translations across locales in a rich admin UI with validation, autocompletion, and support for plurals, selects, dates, and tags. Messages can be fetched server-side or client-side.
 
-export default buildConfig({
-  // the plugin reads locales from this config
-  localization: {
-    locales: ["en", "de", "fr"],
-    defaultLocale: "en",
-  },
-  plugins: [
-    // add the plugin
-    intlPlugin({
-      schema: messages,
-    }),
-    // add the "messages" collection to your storage adapter
-  ],
-});
-```
-
-### 3) Fetch messages in your app
-
-**Node.js:**
-
-```typescript
-import config from "@payload-config";
-import { getPayload } from "payload";
-import { fetchMessages } from "payload-intl/requests";
+**Features**
 
-const payload = await getPayload({ config });
-const messages = await fetchMessages(payload, "en");
-```
+- **ICU MessageFormat** — variables, plurals, selects, number/date/time formatting, and XML-like tags.
+- **Schema-driven** — define message keys and templates in a typed schema with automatic validation.
+- **Rich editor UI** — message editor with variable chips, autocompletion, and inline ICU element editors.
+- **JSON import** — bulk-import translations from JSON files directly in the admin UI.
+- **Flexible fetching** — works with a Payload instance (server-side) or a config object (client-side API fetch).
 
-**Edge runtime:**
+## Installation
 
-```typescript
-const response = await fetch(`${process.env.PAYLOAD_API_URL}/intl-plugin/en`);
-const messages = await response.json();
+```sh
+pnpm add payload-intl
 ```
 
-## Plugin Options
-
-The `intlPlugin` accepts the following configuration:
+## Usage
 
-| Option                  | Default                  | Description                                             |
-| ----------------------- | ------------------------ | ------------------------------------------------------- |
-| `schema`                | **Required**             | Your messages schema definition                         |
-| `collectionSlug`        | `"messages"`             | Custom collection slug                                  |
-| `editorAccess`          | Authenticated users only | Access control for editing messages                     |
-| `hooks`                 | -                        | Collection hooks with and additional `afterUpdate` hook |
-| `tabs`                  | -                        | Enable tabbed interface                                 |
-
-<!-- ## Storage Adapter Requirements
-
-The plugin creates a "messages" upload collection that stores translations as JSON files.
-
-You must ensure that the storage provider returns the direct URL to the uploaded files and read access is guaranteed. -->
-
-<!-- ## Message Schema Definition
-
-### Message Descriptions
-
-Add context for editors using the syntax `"[Description] message"`:
-
-```typescript
-export default {
-  UserProfile: {
-    title: "[Greeting shown at the top of user profile page] Hello {firstName}",
-    description:
-      "[Subtitle with user's name and message count] Welcome back, {firstName}! You have {count} new messages.",
-  },
-} as const;
-``` -->
-
-<!-- ### Rich Text Messages
-
-Use `"$RICH$"` as the message value to enable rich text editing. Note that rich text messages do not support ICU arguments.
-
-```typescript
-export default {
-  Content: {
-    welcome: "$RICH$", // Rich text editor will be used
-    terms: "$RICH$", // Rich text editor will be used
-  },
-} as const;
-``` -->
-
-## Example Usage
-
-Here's a complete example showing how to integrate payload-intl using next-intl and S3 storage:
-
-```typescript
+```ts
 // payload.config.ts
-import { s3Storage } from "@payloadcms/storage-s3";
-import { revalidateTag } from "next/cache";
-import { buildConfig } from "payload";
-import { intlPlugin } from "payload-intl";
-
-import { messages } from "./i18n/messages";
+import { buildConfig } from 'payload';
+import { intlPlugin } from 'payload-intl';
 
 export default buildConfig({
   localization: {
-    locales: ["en", "de", "fr"],
-    defaultLocale: "en",
+    locales: ['en', 'de', 'fr'],
+    defaultLocale: 'en',
   },
+  // ...
   plugins: [
     intlPlugin({
-      schema: messages,
-      hooks: {
-        afterUpdate: () => revalidateTag("messages"), // or anything else you want
-      },
-    }),
-    s3Storage({
-      collections: {
-        messages: {
-          prefix: "messages", // or anything else you want
+      schema: {
+        common: {
+          greeting: '[Main greeting] Hello {name}!',
+          items: '{count, plural, one {# item} other {# items}}',
+        },
+        auth: {
+          login: 'Sign in',
+          logout: 'Sign out',
         },
       },
+      tabs: true,
     }),
   ],
 });
 ```
 
-```typescript
-// i18n/messages.ts
-export const messages = {
-  UserProfile: {
-    title: "Hello {firstName}",
-    description:
-      "Welcome back, {firstName}! You have {count, plural, =0 {no messages} one {# message} other {# messages}}.",
-  },
-  // ...
-} as const;
-```
+Fetch messages in your application:
+
+```ts
+import { fetchMessages } from 'payload-intl';
 
-```typescript
-// i18n/global.ts
-import type messages from "./messages";
+// Server-side — pass the Payload instance directly
+const messages = await fetchMessages(payload, 'en');
 
-declare module "next-intl" {
-  interface AppConfig {
-    Messages: typeof messages;
-    // ...
-  }
-}
+// Client-side — pass a config object to fetch from the REST API
+const messages = await fetchMessages({ serverUrl: 'http://localhost:3000' }, 'en');
 ```
 
-```typescript
-// i18n/request.ts
-import { getRequestConfig } from "next-intl/server";
+### Options
 
-import { fetchCachedMessages } from "./server/messages";
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `schema` | `MessagesSchema` | — | Required. Nested object defining message keys and ICU templates. Leaf values are ICU MessageFormat strings, optionally prefixed with a `[description]`. |
+| `collectionSlug` | `CollectionSlug` | `'messages'` | Slug of the collection used to store translation files. |
+| `editorAccess` | `(req: PayloadRequest) => boolean \| Promise<boolean>` | `(req) => req.user !== null` | Access control function that determines who can edit messages. |
+| `hooks` | `MessagesHooks` | `{}` | Collection hooks. Extends Payload's collection hooks with an additional `afterUpdate` callback fired when translations are saved. |
+| `tabs` | `boolean` | `false` | When enabled, top-level keys in the schema are rendered as tabs in the admin UI. |
 
-export default getRequestConfig(async ({ locale }) => {
-  const messages = await fetchCachedMessages(locale);
+## Contributing
 
-  return {
-    locale,
-    messages,
-  };
-});
-```
+This plugin lives in the [payload-plugins](https://github.com/davincicoding-org/payload-plugins) monorepo.
 
-```typescript
-// server.ts
-"use server";
+### Development
 
-import config from "@payload-config";
-import { unstable_cache } from "next/cache";
-import { getPayload } from "payload";
-import { fetchMessages } from "payload-intl";
+```sh
+pnpm install
 
-export const fetchCachedMessages = unstable_cache(
-  async (locale: string) => {
-    // Node.js
-    const payload = await getPayload({ config });
-    return await fetchMessages(payload, locale);
+# watch this plugin for changes
+pnpm --filter payload-intl dev
 
-    // Edge runtime
-    const response = await fetch(
-      `${process.env.PAYLOAD_API_URL}/intl-plugin/en`,
-    );
-    return await response.json();
-  },
-  ["messages"],
-  {
-    revalidate: false,
-  },
-);
+# run the Payload dev app (in a second terminal)
+pnpm --filter sandbox dev
 ```
 
-## Development
+The `sandbox/` directory is a Next.js + Payload app that imports plugins via `workspace:*` — use it to test changes locally.
 
-```bash
-# Install dependencies
-pnpm install
+### Code quality
 
-# Start development server
-pnpm dev
+- **Formatting & linting** — handled by [Biome](https://biomejs.dev/), enforced on commit via husky + lint-staged.
+- **Commits** — must follow [Conventional Commits](https://www.conventionalcommits.org/) with a valid scope (e.g. `fix(payload-intl): ...`).
+- **Changesets** — please include a [changeset](https://github.com/changesets/changesets) in your PR by running `pnpm release`.
 
-# Build the plugin
-pnpm build
+### Issues & PRs
 
-# Run tests
-pnpm test
-```
+Bug reports and feature requests are welcome — [open an issue](https://github.com/davincicoding-org/payload-plugins/issues).
 
 ## License
 

package/dist/components/MessageController.d.ts

@@ -1,15 +1,13 @@
-import { TemplateVariable } from '../types';
-import { MessageType } from '../utils/schema';
-import { MessageValidator } from '../utils/validate';
+import type { Locale, TemplateVariable } from '../types';
+import type { MessageValidator } from '../utils/validate';
 interface MessageControllerProps {
-    type: MessageType;
     label?: string;
-    locale: string;
+    locale: Locale;
     name: string;
     className?: string;
     variables: TemplateVariable[];
     validate: MessageValidator;
 }
-export declare function MessageController({ type, name, variables, label, locale, validate, className, }: MessageControllerProps): React.ReactNode;
+export declare function MessageController({ name, variables, label, locale, validate, className, }: MessageControllerProps): React.ReactNode;
 export {};
 //# sourceMappingURL=MessageController.d.ts.map

package/dist/components/MessageController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageController.d.ts","sourceRoot":"","sources":["../../src/components/MessageController.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAgD1C"}
+{"version":3,"file":"MessageController.d.ts","sourceRoot":"","sources":["../../src/components/MessageController.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,UAAU,sBAAsB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAyB1C"}

package/dist/components/MessageController.js

@@ -1,43 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Controller as p } from "react-hook-form";
-import { useMessagesForm as g } from "../context/messages-form.js";
-import { MessageInput as i } from "./inputs/MessageInput.js";
-function v({
-  type: C,
-  name: e,
-  variables: n,
-  label: t,
-  locale: s,
-  validate: u,
-  className: l
-}) {
-  const { control: m } = g();
-  return /* @__PURE__ */ o(
-    p,
-    {
-      control: m,
-      name: e,
-      render: ({ field: r, fieldState: a }) => /* @__PURE__ */ o(
-        i,
-        {
-          className: l,
-          error: a.error,
-          label: t,
-          lang: s,
-          onBlur: r.onBlur,
-          onChange: r.onChange,
-          value: r.value || "",
-          variables: n
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import { useMessagesForm } from '../components/MessageFormContext';
+import { MessageInput } from './inputs/MessageInput';
+export function MessageController({ name, variables, label, locale, validate, className }) {
+    const { control } = useMessagesForm();
+    return /*#__PURE__*/ _jsx(Controller, {
+        control: control,
+        name: name,
+        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(MessageInput, {
+                className: className,
+                error: fieldState.error,
+                label: label,
+                lang: locale,
+                onBlur: field.onBlur,
+                onChange: field.onChange,
+                value: field.value || '',
+                variables: variables
+            }),
+        rules: {
+            required: true,
+            validate
         }
-      ),
-      rules: {
-        required: !0,
-        validate: u
-      }
-    }
-  );
+    });
 }
-export {
-  v as MessageController
-};
-//# sourceMappingURL=MessageController.js.map
+
+//# sourceMappingURL=MessageController.js.map

package/dist/components/MessageController.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageController.js","sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\nimport { useMessagesForm } from '@/context/messages-form';\nimport type { TemplateVariable } from '@/types';\nimport type { MessageType } from '@/utils/schema';\nimport type { MessageValidator } from '@/utils/validate';\n\nimport { MessageInput } from './inputs/MessageInput';\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  //         <LexicalInput\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          className={className}\n          error={fieldState.error}\n          label={label}\n          lang={locale}\n          onBlur={field.onBlur}\n          onChange={field.onChange}\n          value={(field.value as unknown as string) || ''}\n          variables={variables}\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","MessageInput"],"mappings":";;;;AAkBO,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;AAyBpB,SACE,gBAAAC;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,QAAQO,EAAM;AAAA,UACd,UAAUA,EAAM;AAAA,UAChB,OAAQA,EAAM,SAA+B;AAAA,UAC7C,WAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAAG;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessageFormContext';\nimport type { Locale, TemplateVariable } from '@/types';\nimport type { MessageValidator } from '@/utils/validate';\n\nimport { MessageInput } from './inputs/MessageInput';\n\ninterface MessageControllerProps {\n  label?: string;\n  locale: Locale;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n}\n\nexport function MessageController({\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n}: MessageControllerProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          className={className}\n          error={fieldState.error}\n          label={label}\n          lang={locale}\n          onBlur={field.onBlur}\n          onChange={field.onChange}\n          value={(field.value as unknown as string) || ''}\n          variables={variables}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["Controller","useMessagesForm","MessageInput","MessageController","name","variables","label","locale","validate","className","control","render","field","fieldState","error","lang","onBlur","onChange","value","rules","required"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,kCAAkC;AAIlE,SAASC,YAAY,QAAQ,wBAAwB;AAWrD,OAAO,SAASC,kBAAkB,EAChCC,IAAI,EACJC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACc;IACvB,MAAM,EAAEC,OAAO,EAAE,GAAGT;IAEpB,qBACE,KAACD;QACCU,SAASA;QACTN,MAAMA;QACNO,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACX;gBACCO,WAAWA;gBACXK,OAAOD,WAAWC,KAAK;gBACvBR,OAAOA;gBACPS,MAAMR;gBACNS,QAAQJ,MAAMI,MAAM;gBACpBC,UAAUL,MAAMK,QAAQ;gBACxBC,OAAO,AAACN,MAAMM,KAAK,IAA0B;gBAC7Cb,WAAWA;;QAGfc,OAAO;YACLC,UAAU;YACVZ;QACF;;AAGN"}

package/dist/components/MessageFormContext.d.ts

@@ -0,0 +1,29 @@
+import type { UseFormReturn } from 'react-hook-form';
+import type { Locale, Messages, Translations } from '../types';
+export type FormValues = Translations<Messages>;
+interface MessagesFormProviderProps {
+    locales: Locale[];
+    form: UseFormReturn<FormValues>;
+}
+export declare function MessagesFormProvider({ locales, form, children, }: React.PropsWithChildren<MessagesFormProviderProps>): import("react/jsx-runtime").JSX.Element;
+export declare const useMessagesForm: () => {
+    watch: import("react-hook-form").UseFormWatch<FormValues>;
+    getValues: import("react-hook-form").UseFormGetValues<FormValues>;
+    getFieldState: import("react-hook-form").UseFormGetFieldState<FormValues>;
+    setError: import("react-hook-form").UseFormSetError<FormValues>;
+    clearErrors: import("react-hook-form").UseFormClearErrors<FormValues>;
+    setValue: import("react-hook-form").UseFormSetValue<FormValues>;
+    trigger: import("react-hook-form").UseFormTrigger<FormValues>;
+    formState: import("react-hook-form").FormState<FormValues>;
+    resetField: import("react-hook-form").UseFormResetField<FormValues>;
+    reset: import("react-hook-form").UseFormReset<FormValues>;
+    handleSubmit: import("react-hook-form").UseFormHandleSubmit<FormValues, FormValues>;
+    unregister: import("react-hook-form").UseFormUnregister<FormValues>;
+    control: import("react-hook-form").Control<FormValues, any, FormValues>;
+    register: import("react-hook-form").UseFormRegister<FormValues>;
+    setFocus: import("react-hook-form").UseFormSetFocus<FormValues>;
+    subscribe: import("react-hook-form").UseFormSubscribe<FormValues>;
+    locales: Locale[];
+};
+export {};
+//# sourceMappingURL=MessageFormContext.d.ts.map

package/dist/components/MessageFormContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageFormContext.d.ts","sourceRoot":"","sources":["../../src/components/MessageFormContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;AAQhD,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACjC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,IAAI,EACJ,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,2CAMpD;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;aAtBjB,MAAM,EAAE;CA6BlB,CAAC"}

package/dist/components/MessageFormContext.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use } from 'react';
+import { FormProvider, useFormContext } from 'react-hook-form';
+const MessagesFormContext = /*#__PURE__*/ createContext({
+    locales: [
+        'en'
+    ]
+});
+export function MessagesFormProvider({ locales, form, children }) {
+    return /*#__PURE__*/ _jsx(MessagesFormContext, {
+        value: {
+            locales
+        },
+        children: /*#__PURE__*/ _jsx(FormProvider, {
+            ...form,
+            children: children
+        })
+    });
+}
+export const useMessagesForm = ()=>{
+    const context = use(MessagesFormContext);
+    const form = useFormContext();
+    return {
+        ...context,
+        ...form
+    };
+};
+
+//# sourceMappingURL=MessageFormContext.js.map

package/dist/components/MessageFormContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/MessageFormContext.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\nimport type { UseFormReturn } from 'react-hook-form';\nimport { FormProvider, useFormContext } from 'react-hook-form';\nimport type { Locale, Messages, Translations } from '@/types';\n\nexport type FormValues = Translations<Messages>;\n\nconst MessagesFormContext = createContext<{\n  locales: Locale[];\n}>({\n  locales: ['en'],\n});\n\ninterface MessagesFormProviderProps {\n  locales: Locale[];\n  form: UseFormReturn<FormValues>;\n}\n\nexport function MessagesFormProvider({\n  locales,\n  form,\n  children,\n}: React.PropsWithChildren<MessagesFormProviderProps>) {\n  return (\n    <MessagesFormContext value={{ locales }}>\n      <FormProvider {...form}>{children}</FormProvider>\n    </MessagesFormContext>\n  );\n}\n\nexport const useMessagesForm = () => {\n  const context = use(MessagesFormContext);\n  const form = useFormContext<FormValues>();\n  return {\n    ...context,\n    ...form,\n  };\n};\n"],"names":["createContext","use","FormProvider","useFormContext","MessagesFormContext","locales","MessagesFormProvider","form","children","value","useMessagesForm","context"],"mappings":"AAAA;;AAEA,SAASA,aAAa,EAAEC,GAAG,QAAQ,QAAQ;AAE3C,SAASC,YAAY,EAAEC,cAAc,QAAQ,kBAAkB;AAK/D,MAAMC,oCAAsBJ,cAEzB;IACDK,SAAS;QAAC;KAAK;AACjB;AAOA,OAAO,SAASC,qBAAqB,EACnCD,OAAO,EACPE,IAAI,EACJC,QAAQ,EAC2C;IACnD,qBACE,KAACJ;QAAoBK,OAAO;YAAEJ;QAAQ;kBACpC,cAAA,KAACH;YAAc,GAAGK,IAAI;sBAAGC;;;AAG/B;AAEA,OAAO,MAAME,kBAAkB;IAC7B,MAAMC,UAAUV,IAAIG;IACpB,MAAMG,OAAOJ;IACb,OAAO;QACL,GAAGQ,OAAO;QACV,GAAGJ,IAAI;IACT;AACF,EAAE"}

package/dist/components/MessagesForm.d.ts

@@ -1,6 +1,6 @@
-import { DeepPartial, Locales, Messages, MessagesSchema, Translations } from '../types';
+import type { DeepPartial, Locale, Messages, MessagesSchema, Translations } from '../types';
 interface MessagesFormProps {
-    locales: Locales;
+    locales: Locale[];
     schema: MessagesSchema;
     tabs?: boolean;
     values: Translations<DeepPartial<Messages>>;

package/dist/components/MessagesForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesForm.d.ts","sourceRoot":"","sources":["../../src/components/MessagesForm.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAY,EACb,MAAM,SAAS,CAAC;AAQjB,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,IAAY,EACZ,MAAM,EACN,WAAW,GACZ,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA6GrC"}
+{"version":3,"file":"MessagesForm.d.ts","sourceRoot":"","sources":["../../src/components/MessagesForm.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,cAAc,EACd,YAAY,EACb,MAAM,SAAS,CAAC;AAQjB,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,IAAY,EACZ,MAAM,EACN,WAAW,GACZ,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAuGrC"}