@intlayer/react-intl 8.12.5-canary.0

package/README.md

@@ -0,0 +1,330 @@
+<p align="center">
+  <a href="https://intlayer.org" rel="">
+    <img src="https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/cover.png" width="60%" alt="Intlayer Logo" />
+  </a>
+</p>
+
+<h1 align="center">
+  <strong>Per-component i18n</strong>
+</h1>
+
+<h2 align="center">
+  <strong>AI-powered translation. Visual Editor. Multilingual CMS.</strong>
+</h2>
+
+<br />
+
+<p align="center">
+  <a href="https://intlayer.org/doc/concept/content" rel="">Docs</a> •
+  <a href="https://intlayer.org/doc/environment/nextjs" rel="">Next.js</a> •
+  <a href="https://intlayer.org/doc/environment/vite-and-react" rel="">React + Vite</a> •
+  <a href="https://intlayer.org/doc/concept/cms" rel="">CMS</a> •
+  <a href="https://discord.gg/7uxamYVeCk" rel="noopener noreferrer nofollow">Discord</a>
+</p>
+<p align="center" style="margin-top:15px;">
+  <a href="https://www.npmjs.com/package/intlayer" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/intlayer?style=for-the-badge&labelColor=FFFFFF&color=000000&logoColor=FFFFFF" alt="npm version" height="24"/></a>
+  <a href="https://github.com/aymericzip/intlayer/stargazers" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logo=github&logoColor=FFD700" alt="GitHub Stars" height="24"/></a>
+  <a href="https://www.npmjs.org/package/intlayer" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="monthly downloads" height="24"/></a>
+  <a href="https://github.com/aymericzip/intlayer/blob/main/LICENSE" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/github/license/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="license"/></a>
+  <a href="https://github.com/aymericzip/intlayer/commits/main" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="last commit"/>
+  </a>
+</p>
+
+![Watch the video](https://github.com/aymericzip/intlayer/blob/main/docs/assets/demo_video.gif)
+
+<a href="https://intlayer.org/doc/concept/content" rel="">
+  <img src="https://img.shields.io/badge/Get_Started-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" />
+</a>
+
+## What is Intlayer?
+
+Most i18n libraries are either too complex, too rigid, or not built for modern frameworks.
+
+Intlayer is a **modern i18n solution** for web and mobile apps.  
+It’s framework-agnostic, **AI-powered**, and includes a free **CMS & visual editor**.
+
+With **per-locale content files**, **TypeScript autocompletion**, **tree-shakable dictionaries**, and **CI/CD integration**, Intlayer makes internationalization **faster, cleaner, and smarter**.
+
+## Keys benefits of Intlayer:
+
+| Feature                                                                                                                                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true" alt="Feature" width="700">                          | **Cross-Frameworks Support**<br><br>Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more.                                                                                                                                                                                                                                                                                                |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true" alt="Feature" width="700">       | **JavaScript-Powered Content Management**<br><br>Harness the flexibility of JavaScript to define and manage your content efficiently. <br><br> - [Content declaration](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                                                                            |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true" alt="Feature" width="700"> | **Per-Locale Content Declaration File**<br><br>Speed up your development by declaring your content once, before auto generation.<br><br> - [Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                                                                          |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700">                            | **Compiler**<br><br>The Intlayer Compiler extract automatically the content from the components and generate the dictionary files.<br><br> - [Compiler](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                                                                  |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true" alt="Feature" width="700">                      | **Type-Safe Environment**<br><br>Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.<br><br> - [TypeScript configuration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                                                                              |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true" alt="Feature" width="700">                         | **Simplified Setup**<br><br>Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease. <br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                      |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true" alt="Feature" width="700">                   | **Simplified Content Retrieval**<br><br>No need to call your `t` function for each piece of content. Retrieve all your content directly using a single hook.<br><br> - [React integration](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                                                                           |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true" alt="Feature" width="700">                    | **Consistent Server Component Implementation**<br><br>Perfectly suited for Next.js server components, use the same implementation for both client and server components, no need to pass your `t` function across each server component. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                                                                                    |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true" alt="Feature" width="700">                           | **Organized Codebase**<br><br>Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components, enhance maintainability and clarity. <br><br> - [How Intlayer works](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                                                                                |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true" alt="Feature" width="700">                         | **Enhanced Routing**<br><br>Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.<br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                 |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true" alt="Feature" width="700">                            | **Markdown Support**<br><br>Import and interpret, locale files and remote Markdown for multilingual content like privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code.<br><br> - [Content files](https://intlayer.org/doc/concept/content/file)                                                                                                                                                                               |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true" alt="Feature" width="700">                       | **Free Visual Editor & CMS**<br><br>A free visual editor and CMS are available for content writers, removing the need for a localization platform. Keep your content synchronized using Git, or externalize it totally or partially with the CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms)                                                                                          |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true" alt="Feature" width="700">                              | **Tree-shakable Content**<br><br>Tree-shakable content, reducing the size of the final bundle. Loads content per component, excluding any unused content from your bundle. Supports lazy loading to enhance app loading efficiency. <br><br> - [App build optimization](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                                                                                                         |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true" alt="Feature" width="700">                    | **Static Rendering**<br><br>Doesn't block Static Rendering. <br><br> - [Next.js integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                                                   |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true" alt="Feature" width="700">                      | **AI-Powered Translation**<br><br>Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools using your own AI provider / API key. <br><br> - [CI/CD integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Auto fill](https://intlayer.org/doc/concept/auto-fill)                                                                              |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true" alt="Feature" width="700">                                 | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)                                                                                                                                                            |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true" alt="Feature" width="700">                    | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                                                |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true" alt="Feature" width="700">                    | **Interoperability**<br><br>Allow interoperability with react-i18next, next-i18next, next-intl, react-intl, vue-i18n. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer and vue-i18n](https://intlayer.org/blog/intlayer-with-vue-i18n) |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/benchmark.png?raw=true" alt="Feature" width="700">                           | **Performances & Benchmark**<br><br>Uses advanced tree-shaking and dynamic loading to boost performances and keep the solution as light as possible. <br><br> - [Performances & Benchmark](https://intlayer.org/doc/benchmark)                                                                                                                                                                                                                                              |
+
+---
+
+## 📦 Installation
+
+Start your journey with Intlayer today and experience a smoother, more powerful approach to internationalization.
+
+<a href="https://intlayer.org/doc/concept/content" rel="">
+  <img src="https://img.shields.io/badge/Get_Started-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" />
+</a>
+
+```bash
+npm install intlayer react-intlayer
+```
+
+⚡ Quick Start (Next.js)
+
+```ts
+// intlayer.config.ts
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```ts
+// app/home.content.ts
+import { t, type Dictionary } from "intlayer";
+
+const content = {
+  key: "home",
+  content: {
+    title: t({
+      en: "Home",
+      fr: "Accueil",
+      es: "Inicio",
+    }),
+  },
+} satisfies Dictionary;
+
+export default content;
+```
+
+```tsx
+// app/page.tsx
+import { useIntlayer } from "react-intlayer";
+
+const HomePage = () => {
+  const { title } = useIntlayer("home");
+
+  return <h1>{title}</h1>;
+};
+```
+
+<a href="https://intlayer.org/doc/environment/nextjs"> Get the full guide → </a>
+
+## 🎥 Live tutorial on YouTube
+
+[![How to Internationalize your application using Intlayer](https://i.ytimg.com/vi/e_PPG7PTqGU/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDtyJ4uYotEjl12nZ_gZKZ_kjEgOQ)](https://youtu.be/e_PPG7PTqGU?si=GyU_KpVhr61razRw)
+
+<a href="https://intlayer.org/doc/concept/content" rel="">
+  <img src="https://img.shields.io/badge/Get_Started-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" />
+</a>
+
+## Table of Contents
+
+Explore our comprehensive documentation to get started with Intlayer and learn how to integrate it into your projects.
+
+<details open>
+<summary style="font-size:16px; font-weight:bold;">📘 Get Started</summary>
+<ul>
+  <li><a href="https://intlayer.org/doc/why" rel=''>Why Intlayer?</a></li>
+  <li><a href="https://intlayer.org/doc" rel=''>Introduction</a></li>
+</ul>
+</details>
+
+<details>
+<summary style="font-size:16px; font-weight:bold;">⚙️ Concept</summary>
+<ul>
+  <li><a href="https://intlayer.org/doc/concept/how-works-intlayer" rel=''>How Intlayer Works</a></li>
+  <li><a href="https://intlayer.org/doc/concept/configuration" rel=''>Configuration</a></li>
+  <li><a href="https://intlayer.org/doc/concept/cli" rel=''>Intlayer CLI</a></li>
+  <li><a href="https://intlayer.org/doc/compiler" rel=''>Compiler</a></li>
+
+  <li><a href="https://intlayer.org/doc/concept/editor" rel=''>Intlayer Editor</a></li>
+  <li><a href="https://intlayer.org/doc/concept/cms" rel=''>Intlayer CMS</a></li>
+  <li><a href="https://intlayer.org/doc/concept/content" rel=''>Dictionary</a>
+    <ul>
+      <li><a href="https://intlayer.org/doc/concept/content/per-locale-file" rel=''>Per-Locale Content Declaration File</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/translation" rel=''>Translation</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/enumeration" rel=''>Enumeration</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/condition" rel=''>Condition</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/nesting" rel=''>Nesting</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/markdown" rel=''>Markdown</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/function-fetching" rel=''>Function Fetching</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/insertion" rel=''>Insertion</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/file" rel=''>File</a></li>
+    </ul>
+  </li>
+</ul>
+</details>
+
+<details open>
+<summary style="font-size:16px; font-weight:bold;">🌐 Environment</summary>
+<ul>
+  <li><a href="https://intlayer.org/doc/environment/nextjs" rel=''>Intlayer with Next.js 16</a>
+    <ul>
+      <li><a href="https://intlayer.org/doc/environment/nextjs/15" rel=''>Next.js 15</a></li>
+      <li><a href="https://intlayer.org/doc/environment/nextjs/14" rel=''>Next.js 14 (App Router)</a></li>
+      <li><a href="https://intlayer.org/doc/environment/nextjs/next-with-Page-Router" rel=''>Next.js Page Router</a></li>
+      <li><a href="https://intlayer.org/doc/environment/nextjs/compiler" rel=''>Next.js using Compiler</a></li>
+    </ul>
+  </li>
+  <li><a href="https://intlayer.org/doc/environment/create-react-app" rel=''>React CRA</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-react" rel=''>Vite + React</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-react" rel=''>Vite + React using Compiler</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-react/compiler" rel=''>React-router-v7</a></li>
+  <li><a href="https://intlayer.org/doc/environment/tanstack-start" rel=''>Tanstack start</a>
+    <ul>
+      <li><a href="https://intlayer.org/doc/environment/tanstack-start/solid" rel=''>Solid</a></li>
+    </ul>
+  </li>
+  <li><a href="https://intlayer.org/doc/environment/astro" rel=''>Astro</a>
+    <ul>
+      <li><a href="https://intlayer.org/doc/environment/astro/react" rel=''>React</a></li>
+      <li><a href="https://intlayer.org/doc/environment/astro/vue" rel=''>Vue</a></li>
+      <li><a href="https://intlayer.org/doc/environment/astro/svelte" rel=''>Svelte</a></li>
+      <li><a href="https://intlayer.org/doc/environment/astro/solid" rel=''>Solid</a></li>
+      <li><a href="https://intlayer.org/doc/environment/astro/vanilla" rel=''>Vanilla JS</a></li>
+      <li><a href="https://intlayer.org/doc/environment/astro/lit" rel=''>Lit</a></li>
+    </ul>
+  </li>
+
+  <li><a href="https://intlayer.org/doc/environment/react-native-and-expo" rel=''>React Native</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-svelte" rel=''>Vite + Svelte</a></li>
+  <li><a href="https://intlayer.org/doc/environment/sveltekit" rel=''>SvelteKit</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-preact" rel=''>Vite + Preact</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-vue" rel=''>Vite + Vue</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-nuxt" rel=''>Vite + Nuxt</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-solid" rel=''>Vite + Solid</a></li>
+  <li><a href="https://intlayer.org/doc/environment/angular" rel=''>Angular</a></li>
+  <li>
+     <a href="https://intlayer.org/doc/environment/express" rel=''>Backend</a>
+     <ul>
+      <li><a href="https://intlayer.org/doc/environment/express" rel=''>Express</a></li>
+      <li><a href="https://intlayer.org/doc/environment/nest" rel=''>NestJS</a></li>
+      <li><a href="https://intlayer.org/doc/environment/fastify" rel=''>Fastify</a></li>
+      <li><a href="https://intlayer.org/doc/environment/adonisjs" rel=''>AdonisJS</a></li>
+      <li><a href="https://intlayer.org/doc/environment/hono" rel=''>Hono</a></li>
+    </ul>
+  </li>
+</ul>
+</details>
+
+<details>
+<summary style="font-size:16px; font-weight:bold;">📊 Benchmark</summary>
+<ul>
+  <li><a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/nextjs.md" rel=''>Next.js</a></li>
+  <li><a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/tanstack.md" rel=''>TanStack Start</a></li>
+  <li><a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/vue.md" rel=''>Vue</a></li>
+  <li><a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/solid.md" rel=''>Solid</a></li>
+  <li><a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/svelte.md" rel=''>Svelte</a></li>
+</ul>
+</details>
+
+<details>
+<summary style="font-size:16px; font-weight:bold;">📰 Blog</summary>
+<ul>
+  <li><a href="https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/what_is_internationalization.md" rel=''>What is i18n</a></li>
+  <li><a href="https://intlayer.org/blog/SEO-and-i18n" rel=''>i18n and SEO</a></li>
+  <li><a href="https://intlayer.org/blog/intlayer-with-next-i18next" rel=''>Intlayer and i18next</a></li>
+  <li><a href="https://intlayer.org/blog/intlayer-with-react-i18next" rel=''>Intlayer and react-intl</a></li>
+  <li><a href="https://intlayer.org/blog/intlayer-with-next-intl" rel=''>Intlayer and next-intl</a></li>
+</ul>
+</details>
+
+## Multilingual content management system
+
+More than an i18n library, Intlayer is a complete **multilingual content management system**. A full CMS is available for free at [app.intlayer.org](https://app.intlayer.org).
+
+Intlayer connects **developers**, **copywriters**, and **AI agents** in one workflow for creating and maintaining multilingual websites effortlessly.Intlayer replaces the following stack in a single solution:
+
+- i18n solutions (e.g. `i18next`, `next-intl`, `vue-i18n`)
+- TMSs (Translation Management Systems) (e.g. Crowdin, Phrase, Lokalise)
+- Feature flags
+- Headless CMSs (e.g. Contentful, Strapi, Sanity)
+
+![CMS Preview](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png?raw=true)
+
+## 🌐 Readme in other languages
+
+<p align="center">
+  <a href="https://github.com/aymericzip/intlayer/blob/main/readme.md">English</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/readme.md">简体中文</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/readme.md">Русский</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/readme.md">日本語</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/readme.md">Français</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/readme.md">한국어</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/readme.md">Español</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/readme.md">Deutsch</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/readme.md">العربية</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/readme.md">Italiano</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/readme.md">English (UK)</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/readme.md">Português</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/readme.md">हिन्दी</a> •
+  <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/readme.md">Türkçe</a>
+</p>
+
+## 🤝 Community
+
+Intlayer is built with and for the community and we’d love your input!
+
+- Have a suggestion? [Open an issue](https://github.com/aymericzip/intlayer/issues)
+- Found a bug or improvement? [Submit a PR](https://github.com/aymericzip/intlayer/pulls)
+- Need help or want to connect? [Join our Discord](https://discord.gg/7uxamYVeCk)
+
+You can also follow us on :
+
+  <div>
+    <br/>
+    <p align="center">
+      <a href="https://discord.gg/528mBV4N" target="blank" rel='noopener noreferrer nofollow'><img align="center"
+         src="https://img.shields.io/badge/discord-5865F2.svg?style=for-the-badge&logo=discord&logoColor=white"
+         alt="Intlayer Discord" height="30"/></a>
+      <a href="https://www.linkedin.com/company/intlayerorg" target="blank" rel='noopener noreferrer nofollow'><img align="center"
+         src="https://img.shields.io/badge/linkedin-%231DA1F2.svg?style=for-the-badge&logo=linkedin&logoColor=white"
+         alt="Intlayer LinkedIn" height="30"/></a>
+      <a href="https://www.instagram.com/intlayer/" target="blank" rel='noopener noreferrer nofollow'><img align="center"
+         src="https://img.shields.io/badge/instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white"
+         alt="Intlayer Instagram" height="30"/></a>
+      <a href="https://x.com/Intlayer183096" target="blank" rel='noopener noreferrer nofollow'><img align="center"
+         src="https://img.shields.io/badge/x-1DA1F2.svg?style=for-the-badge&logo=x&logoColor=white"
+         alt="Intlayer X" height="30"/></a>
+      <a href="https://www.youtube.com/@intlayer" target="blank" rel='noopener noreferrer nofollow'><img align="center"
+         src="https://img.shields.io/badge/youtube-FF0000.svg?style=for-the-badge&logo=youtube&logoColor=white"
+         alt="Intlayer YouTube" height="30"/></a>
+      <a href="https://www.tiktok.com/@intlayer" target="blank" rel='noopener noreferrer nofollow'><img align="center"
+         src="https://img.shields.io/badge/tiktok-000000.svg?style=for-the-badge&logo=tiktok&logoColor=white"
+         alt="Intlayer TikTok" height="30"/></a>
+      <br>
+    </p>
+</div>
+
+### Contribution
+
+For more detailed guidelines on contributing to this project, please refer to the [`CONTRIBUTING.md`](https://github.com/aymericzip/intlayer/blob/main/CONTRIBUTING.md) file. It contains essential information on our development process, commit message conventions, and release procedures. Your contributions are valuable to us, and we appreciate your efforts in making this project better!
+
+Contribute on [GitHub](https://github.com/aymericzip/intlayer), [GitLab](https://gitlab.com/ay.pineau/intlayer), or [Bitbucket](https://bitbucket.org/intlayer/intlayer/).
+
+### Thank You for the Support
+
+If you like Intlayer, give us a ⭐ on GitHub. It helps others discover the project! [See why GitHub Stars matter](https://github.com/aymericzip/intlayer/blob/main/CONTRIBUTING.md#why-github-stars-matter-).
+
+[![Star History Chart](https://api.star-history.com/svg?repos=aymericzip/intlayer&type=Date)](https://star-history.com/#aymericzip/intlayer&Date)

package/dist/cjs/FormattedComponents.cjs

@@ -0,0 +1,131 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_useIntl = require('./useIntl.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/FormattedComponents.tsx
+/**
+* Drop-in for react-intl's `<FormattedDate>`.
+* Renders a locale-aware date string using `Intl.DateTimeFormat`.
+*/
+const FormattedDate = ({ value, children, format: _format, ...options }) => {
+	const formatted = require_useIntl.useIntl().formatDate(value, options);
+	if (typeof children === "function") return children(formatted) ?? null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: formatted });
+};
+/**
+* Drop-in for react-intl's `<FormattedTime>`.
+* Renders a locale-aware time string using `Intl.DateTimeFormat`.
+*/
+const FormattedTime = ({ value, children, format: _format, ...options }) => {
+	const formatted = require_useIntl.useIntl().formatTime(value, options);
+	if (typeof children === "function") return children(formatted) ?? null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: formatted });
+};
+/**
+* Drop-in for react-intl's `<FormattedNumber>`.
+* Renders a locale-aware number string using `Intl.NumberFormat`.
+*/
+const FormattedNumber = ({ value, children, format: _format, ...options }) => {
+	const formatted = require_useIntl.useIntl().formatNumber(value, options);
+	if (typeof children === "function") return children(formatted) ?? null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: formatted });
+};
+/**
+* Drop-in for react-intl's `<FormattedList>`.
+* Renders a locale-aware list string using `Intl.ListFormat`.
+*/
+const FormattedList = ({ value, ...options }) => {
+	const intl = require_useIntl.useIntl();
+	const strings = value.filter((item) => typeof item === "string");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: intl.formatList(strings, options) });
+};
+/**
+* Drop-in for react-intl's `<FormattedDisplayName>`.
+* Renders a locale-aware display name using `Intl.DisplayNames`.
+*/
+const FormattedDisplayName = ({ value, ...options }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: require_useIntl.useIntl().formatDisplayName(value, options) ?? value });
+};
+/**
+* Drop-in for react-intl's `<FormattedRelativeTime>`.
+* Renders a locale-aware relative time string using `Intl.RelativeTimeFormat`.
+* Auto-update (`updateIntervalInSeconds`) is not implemented.
+*/
+const FormattedRelativeTime = ({ value = 0, unit = "second", children, updateIntervalInSeconds: _updateIntervalInSeconds, ...options }) => {
+	const formatted = require_useIntl.useIntl().formatRelativeTime(value, unit, options);
+	if (typeof children === "function") return children(formatted) ?? null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: formatted });
+};
+/**
+* Drop-in for react-intl's `<FormattedPlural>`.
+* Selects the matching plural slot using `Intl.PluralRules`.
+*/
+const FormattedPlural = ({ value, other, zero, one, two, few, many, children, ...options }) => {
+	const rule = require_useIntl.useIntl().formatPlural(value, options);
+	const selected = {
+		zero,
+		one,
+		two,
+		few,
+		many,
+		other
+	}[rule] ?? other;
+	if (typeof children === "function") return children(selected) ?? null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: selected });
+};
+/**
+* Drop-in for react-intl's `<FormattedDateTimeRange>`.
+* Renders a locale-aware date range string using `Intl.DateTimeFormat#formatRange`.
+*/
+const FormattedDateTimeRange = ({ from, to, children, ...options }) => {
+	const formatted = require_useIntl.useIntl().formatDateTimeRange(from, to, options);
+	if (typeof children === "function") return children(formatted) ?? null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: formatted });
+};
+/**
+* Drop-in for react-intl's `<FormattedDateParts>`.
+* Renders format parts via a `children` render-prop.
+*/
+const FormattedDateParts = ({ value, children, format: _format, ...options }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(require_useIntl.useIntl().formatDateToParts(value, options)) });
+};
+/**
+* Drop-in for react-intl's `<FormattedTimeParts>`.
+* Renders format parts via a `children` render-prop.
+*/
+const FormattedTimeParts = ({ value, children, format: _format, ...options }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(require_useIntl.useIntl().formatTimeToParts(value, options)) });
+};
+/**
+* Drop-in for react-intl's `<FormattedNumberParts>`.
+* Renders format parts via a `children` render-prop.
+*/
+const FormattedNumberParts = ({ value, children, format: _format, ...options }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(require_useIntl.useIntl().formatNumberToParts(value, options)) });
+};
+/**
+* Drop-in for react-intl's `<FormattedListParts>`.
+* Renders list format parts via a `children` render-prop.
+*/
+const FormattedListParts = ({ value, children, ...options }) => {
+	const intl = require_useIntl.useIntl();
+	const strings = Array.from(value).filter((item) => typeof item === "string");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(intl.formatListToParts(strings, options)) });
+};
+
+//#endregion
+exports.FormattedDate = FormattedDate;
+exports.FormattedDateParts = FormattedDateParts;
+exports.FormattedDateTimeRange = FormattedDateTimeRange;
+exports.FormattedDisplayName = FormattedDisplayName;
+exports.FormattedList = FormattedList;
+exports.FormattedListParts = FormattedListParts;
+exports.FormattedNumber = FormattedNumber;
+exports.FormattedNumberParts = FormattedNumberParts;
+exports.FormattedPlural = FormattedPlural;
+exports.FormattedRelativeTime = FormattedRelativeTime;
+exports.FormattedTime = FormattedTime;
+exports.FormattedTimeParts = FormattedTimeParts;
+//# sourceMappingURL=FormattedComponents.cjs.map

package/dist/cjs/FormattedComponents.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedComponents.cjs","names":["useIntl"],"sources":["../../src/FormattedComponents.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement } from 'react';\nimport type {\n  FormattedDate as _FormattedDate,\n  FormattedDateParts as _FormattedDateParts,\n  FormattedDateTimeRange as _FormattedDateTimeRange,\n  FormattedDisplayName as _FormattedDisplayName,\n  FormattedList as _FormattedList,\n  FormattedListParts as _FormattedListParts,\n  FormattedNumber as _FormattedNumber,\n  FormattedNumberParts as _FormattedNumberParts,\n  FormattedPlural as _FormattedPlural,\n  FormattedRelativeTime as _FormattedRelativeTime,\n  FormattedTime as _FormattedTime,\n  FormattedTimeParts as _FormattedTimeParts,\n} from 'react-intl';\nimport { useIntl } from './useIntl';\n\nconst toDate = (value: Date | number | string | undefined): Date =>\n  value instanceof Date\n    ? value\n    : typeof value === 'undefined'\n      ? new Date()\n      : new Date(value);\n\n/**\n * Drop-in for react-intl's `<FormattedDate>`.\n * Renders a locale-aware date string using `Intl.DateTimeFormat`.\n */\nexport const FormattedDate: typeof _FormattedDate = ({\n  value,\n  children,\n  format: _format,\n  ...options\n}) => {\n  const intl = useIntl();\n  const formatted = intl.formatDate(value, options);\n  if (typeof children === 'function') {\n    return (children(formatted) ?? null) as ReactElement | null;\n  }\n  return <>{formatted}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedTime>`.\n * Renders a locale-aware time string using `Intl.DateTimeFormat`.\n */\nexport const FormattedTime: typeof _FormattedTime = ({\n  value,\n  children,\n  format: _format,\n  ...options\n}) => {\n  const intl = useIntl();\n  const formatted = intl.formatTime(value, options);\n  if (typeof children === 'function') {\n    return (children(formatted) ?? null) as ReactElement | null;\n  }\n  return <>{formatted}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedNumber>`.\n * Renders a locale-aware number string using `Intl.NumberFormat`.\n */\nexport const FormattedNumber: typeof _FormattedNumber = ({\n  value,\n  children,\n  format: _format,\n  ...options\n}) => {\n  const intl = useIntl();\n  const formatted = intl.formatNumber(value, options);\n  if (typeof children === 'function') {\n    return (children(formatted) ?? null) as ReactElement | null;\n  }\n  return <>{formatted}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedList>`.\n * Renders a locale-aware list string using `Intl.ListFormat`.\n */\nexport const FormattedList: typeof _FormattedList = ({ value, ...options }) => {\n  const intl = useIntl();\n  const strings = (value as unknown[]).filter(\n    (item): item is string => typeof item === 'string'\n  );\n  const formatted = intl.formatList(strings, options);\n  return <>{formatted}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedDisplayName>`.\n * Renders a locale-aware display name using `Intl.DisplayNames`.\n */\nexport const FormattedDisplayName: typeof _FormattedDisplayName = ({\n  value,\n  ...options\n}) => {\n  const intl = useIntl();\n  const formatted = intl.formatDisplayName(\n    value,\n    options as Intl.DisplayNamesOptions\n  );\n  return <>{formatted ?? value}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedRelativeTime>`.\n * Renders a locale-aware relative time string using `Intl.RelativeTimeFormat`.\n * Auto-update (`updateIntervalInSeconds`) is not implemented.\n */\nexport const FormattedRelativeTime: typeof _FormattedRelativeTime = ({\n  value = 0,\n  unit = 'second',\n  children,\n  updateIntervalInSeconds: _updateIntervalInSeconds,\n  ...options\n}) => {\n  const intl = useIntl();\n  const formatted = intl.formatRelativeTime(value, unit, options);\n  if (typeof children === 'function') {\n    return (children(formatted) ?? null) as ReactElement | null;\n  }\n  return <>{formatted}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedPlural>`.\n * Selects the matching plural slot using `Intl.PluralRules`.\n */\nexport const FormattedPlural: typeof _FormattedPlural = ({\n  value,\n  other,\n  zero,\n  one,\n  two,\n  few,\n  many,\n  children,\n  ...options\n}) => {\n  const intl = useIntl();\n  const rule = intl.formatPlural(value, options);\n  const slots: Record<Intl.LDMLPluralRule, unknown> = {\n    zero,\n    one,\n    two,\n    few,\n    many,\n    other,\n  };\n  const selected = slots[rule] ?? other;\n\n  if (typeof children === 'function') {\n    return (children(selected as import('react').ReactNode) ??\n      null) as ReactElement | null;\n  }\n\n  return <>{selected}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedDateTimeRange>`.\n * Renders a locale-aware date range string using `Intl.DateTimeFormat#formatRange`.\n */\nexport const FormattedDateTimeRange: typeof _FormattedDateTimeRange = ({\n  from,\n  to,\n  children,\n  ...options\n}) => {\n  const intl = useIntl();\n  const formatted = intl.formatDateTimeRange(from, to, options);\n  if (typeof children === 'function') {\n    return (children(formatted) ?? null) as ReactElement | null;\n  }\n  return <>{formatted}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedDateParts>`.\n * Renders format parts via a `children` render-prop.\n */\nexport const FormattedDateParts: typeof _FormattedDateParts = ({\n  value,\n  children,\n  format: _format,\n  ...options\n}) => {\n  const intl = useIntl();\n  const parts = intl.formatDateToParts(\n    value as Parameters<Intl.DateTimeFormat['format']>[0],\n    options\n  );\n  return <>{children(parts)}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedTimeParts>`.\n * Renders format parts via a `children` render-prop.\n */\nexport const FormattedTimeParts: typeof _FormattedTimeParts = ({\n  value,\n  children,\n  format: _format,\n  ...options\n}) => {\n  const intl = useIntl();\n  const parts = intl.formatTimeToParts(\n    value as Parameters<Intl.DateTimeFormat['format']>[0],\n    options\n  );\n  return <>{children(parts)}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedNumberParts>`.\n * Renders format parts via a `children` render-prop.\n */\nexport const FormattedNumberParts: typeof _FormattedNumberParts = ({\n  value,\n  children,\n  format: _format,\n  ...options\n}) => {\n  const intl = useIntl();\n  const parts = intl.formatNumberToParts(value, options);\n  return <>{children(parts)}</>;\n};\n\n/**\n * Drop-in for react-intl's `<FormattedListParts>`.\n * Renders list format parts via a `children` render-prop.\n */\nexport const FormattedListParts: typeof _FormattedListParts = ({\n  value,\n  children,\n  ...options\n}) => {\n  const intl = useIntl();\n  const strings = Array.from(value).filter(\n    (item): item is string => typeof item === 'string'\n  );\n  const parts = intl.formatListToParts(strings, options);\n  return <>{children(parts)}</>;\n};\n"],"mappings":";;;;;;;;;;;AA8BA,MAAa,iBAAwC,EACnD,OACA,UACA,QAAQ,SACR,GAAG,cACC;CAEJ,MAAM,YADOA,wBACQ,CAAC,CAAC,WAAW,OAAO,OAAO;CAChD,IAAI,OAAO,aAAa,YACtB,OAAQ,SAAS,SAAS,KAAK;CAEjC,OAAO,mFAAG,UAAY;AACxB;;;;;AAMA,MAAa,iBAAwC,EACnD,OACA,UACA,QAAQ,SACR,GAAG,cACC;CAEJ,MAAM,YADOA,wBACQ,CAAC,CAAC,WAAW,OAAO,OAAO;CAChD,IAAI,OAAO,aAAa,YACtB,OAAQ,SAAS,SAAS,KAAK;CAEjC,OAAO,mFAAG,UAAY;AACxB;;;;;AAMA,MAAa,mBAA4C,EACvD,OACA,UACA,QAAQ,SACR,GAAG,cACC;CAEJ,MAAM,YADOA,wBACQ,CAAC,CAAC,aAAa,OAAO,OAAO;CAClD,IAAI,OAAO,aAAa,YACtB,OAAQ,SAAS,SAAS,KAAK;CAEjC,OAAO,mFAAG,UAAY;AACxB;;;;;AAMA,MAAa,iBAAwC,EAAE,OAAO,GAAG,cAAc;CAC7E,MAAM,OAAOA,wBAAQ;CACrB,MAAM,UAAW,MAAoB,QAClC,SAAyB,OAAO,SAAS,QAC5C;CAEA,OAAO,mFADW,KAAK,WAAW,SAAS,OACzB,EAAI;AACxB;;;;;AAMA,MAAa,wBAAsD,EACjE,OACA,GAAG,cACC;CAMJ,OAAO,mFALMA,wBACQ,CAAC,CAAC,kBACrB,OACA,OAEgB,KAAK,MAAQ;AACjC;;;;;;AAOA,MAAa,yBAAwD,EACnE,QAAQ,GACR,OAAO,UACP,UACA,yBAAyB,0BACzB,GAAG,cACC;CAEJ,MAAM,YADOA,wBACQ,CAAC,CAAC,mBAAmB,OAAO,MAAM,OAAO;CAC9D,IAAI,OAAO,aAAa,YACtB,OAAQ,SAAS,SAAS,KAAK;CAEjC,OAAO,mFAAG,UAAY;AACxB;;;;;AAMA,MAAa,mBAA4C,EACvD,OACA,OACA,MACA,KACA,KACA,KACA,MACA,UACA,GAAG,cACC;CAEJ,MAAM,OADOA,wBACG,CAAC,CAAC,aAAa,OAAO,OAAO;CAS7C,MAAM,WAAW;EAPf;EACA;EACA;EACA;EACA;EACA;CAEmB,EAAE,SAAS;CAEhC,IAAI,OAAO,aAAa,YACtB,OAAQ,SAAS,QAAqC,KACpD;CAGJ,OAAO,mFAAG,SAAW;AACvB;;;;;AAMA,MAAa,0BAA0D,EACrE,MACA,IACA,UACA,GAAG,cACC;CAEJ,MAAM,YADOA,wBACQ,CAAC,CAAC,oBAAoB,MAAM,IAAI,OAAO;CAC5D,IAAI,OAAO,aAAa,YACtB,OAAQ,SAAS,SAAS,KAAK;CAEjC,OAAO,mFAAG,UAAY;AACxB;;;;;AAMA,MAAa,sBAAkD,EAC7D,OACA,UACA,QAAQ,SACR,GAAG,cACC;CAMJ,OAAO,mFAAG,SALGA,wBACI,CAAC,CAAC,kBACjB,OACA,OAEqB,CAAC,EAAI;AAC9B;;;;;AAMA,MAAa,sBAAkD,EAC7D,OACA,UACA,QAAQ,SACR,GAAG,cACC;CAMJ,OAAO,mFAAG,SALGA,wBACI,CAAC,CAAC,kBACjB,OACA,OAEqB,CAAC,EAAI;AAC9B;;;;;AAMA,MAAa,wBAAsD,EACjE,OACA,UACA,QAAQ,SACR,GAAG,cACC;CAGJ,OAAO,mFAAG,SAFGA,wBACI,CAAC,CAAC,oBAAoB,OAAO,OACvB,CAAC,EAAI;AAC9B;;;;;AAMA,MAAa,sBAAkD,EAC7D,OACA,UACA,GAAG,cACC;CACJ,MAAM,OAAOA,wBAAQ;CACrB,MAAM,UAAU,MAAM,KAAK,KAAK,CAAC,CAAC,QAC/B,SAAyB,OAAO,SAAS,QAC5C;CAEA,OAAO,mFAAG,SADI,KAAK,kBAAkB,SAAS,OACvB,CAAC,EAAI;AAC9B"}

package/dist/cjs/FormattedMessage.cjs

@@ -0,0 +1,45 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_useIntl = require('./useIntl.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/FormattedMessage.tsx
+/**
+* Drop-in for react-intl's `<FormattedMessage>`.
+*
+* Translates the message identified by `id` using the active intl context.
+* Full ICU MessageFormat syntax is supported.
+*
+* When `values` contains render functions, rich text tags
+* (`<b>chunks</b>`) are mapped through them. When a `tagName` is provided,
+* the output is wrapped in that element; otherwise a fragment is used.
+* A `children` render-prop receives the resolved nodes.
+*
+* @example
+* ```tsx
+* <FormattedMessage id="home.title" />
+* <FormattedMessage id="home.greeting" values={{ name: 'Alice' }} />
+* <FormattedMessage
+*   id="terms.agreement"
+*   values={{ b: (chunks) => <strong>{chunks}</strong> }}
+* />
+* ```
+*/
+const FormattedMessage = ({ id = "", description: _description, defaultMessage, values, tagName: TagName, children, ignoreTag: _ignoreTag }) => {
+	const intl = require_useIntl.useIntl();
+	const stringDefaultMessage = typeof defaultMessage === "string" ? defaultMessage : void 0;
+	const result = intl.formatMessage({
+		id,
+		defaultMessage: stringDefaultMessage
+	}, values);
+	const nodes = Array.isArray(result) ? result : [result];
+	if (typeof children === "function") return children(nodes) ?? null;
+	if (TagName && TagName !== react.Fragment) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagName, { children: nodes });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: nodes });
+};
+
+//#endregion
+exports.FormattedMessage = FormattedMessage;
+//# sourceMappingURL=FormattedMessage.cjs.map

package/dist/cjs/FormattedMessage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedMessage.cjs","names":["useIntl","Fragment"],"sources":["../../src/FormattedMessage.tsx"],"sourcesContent":["'use client';\n\nimport { Fragment, type ReactElement, type ReactNode } from 'react';\nimport type { FormattedMessage as _FormattedMessage } from 'react-intl';\nimport { useIntl } from './useIntl';\n\n/**\n * Drop-in for react-intl's `<FormattedMessage>`.\n *\n * Translates the message identified by `id` using the active intl context.\n * Full ICU MessageFormat syntax is supported.\n *\n * When `values` contains render functions, rich text tags\n * (`<b>chunks</b>`) are mapped through them. When a `tagName` is provided,\n * the output is wrapped in that element; otherwise a fragment is used.\n * A `children` render-prop receives the resolved nodes.\n *\n * @example\n * ```tsx\n * <FormattedMessage id=\"home.title\" />\n * <FormattedMessage id=\"home.greeting\" values={{ name: 'Alice' }} />\n * <FormattedMessage\n *   id=\"terms.agreement\"\n *   values={{ b: (chunks) => <strong>{chunks}</strong> }}\n * />\n * ```\n */\nexport const FormattedMessage: typeof _FormattedMessage = ({\n  id = '',\n  description: _description,\n  defaultMessage,\n  values,\n  tagName: TagName,\n  children,\n  ignoreTag: _ignoreTag,\n}) => {\n  const intl = useIntl();\n  const stringDefaultMessage =\n    typeof defaultMessage === 'string' ? defaultMessage : undefined;\n  const result = (\n    intl.formatMessage as (\n      descriptor: { id: string; defaultMessage?: string },\n      values?: Record<string, unknown>\n    ) => string | ReactNode[]\n  )(\n    { id, defaultMessage: stringDefaultMessage },\n    values as Record<string, unknown>\n  );\n  const nodes: ReactNode[] = Array.isArray(result) ? result : [result];\n\n  if (typeof children === 'function') {\n    return (children(nodes) ?? null) as ReactElement | null;\n  }\n\n  if (TagName && TagName !== Fragment) {\n    return <TagName>{nodes}</TagName>;\n  }\n\n  return <>{nodes}</>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,oBAA8C,EACzD,KAAK,IACL,aAAa,cACb,gBACA,QACA,SAAS,SACT,UACA,WAAW,iBACP;CACJ,MAAM,OAAOA,wBAAQ;CACrB,MAAM,uBACJ,OAAO,mBAAmB,WAAW,iBAAiB;CACxD,MAAM,SACJ,KAAK,cAKL;EAAE;EAAI,gBAAgB;CAAqB,GAC3C,MACF;CACA,MAAM,QAAqB,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;CAEnE,IAAI,OAAO,aAAa,YACtB,OAAQ,SAAS,KAAK,KAAK;CAG7B,IAAI,WAAW,YAAYC,gBACzB,OAAO,2CAAC,SAAD,YAAU,MAAe;CAGlC,OAAO,mFAAG,MAAQ;AACpB"}

package/dist/cjs/IntlProvider.cjs

@@ -0,0 +1,38 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_context = require('./context.cjs');
+const require_createIntlObject = require('./createIntlObject.cjs');
+let _intlayer_config_built = require("@intlayer/config/built");
+let _intlayer_config_colors = require("@intlayer/config/colors");
+let _intlayer_config_logger = require("@intlayer/config/logger");
+let react = require("react");
+let react_intlayer = require("react-intlayer");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/IntlProvider.tsx
+/**
+* Drop-in for react-intl's `IntlProvider`.
+*
+* `messages`, `formats`, `timeZone`, `now`, `defaultRichTextElements`,
+* and `onError`/`onWarn` are accepted for API compatibility but have no
+* effect — Intlayer uses its own compiled dictionaries.
+*
+* The `locale` prop is forwarded to `IntlayerClientProvider`.
+*/
+const IntlProvider = ({ locale, children, messages: _messages, formats: _formats, timeZone: _timeZone, defaultRichTextElements: _defaultRichTextElements, onError: _onError, ...rest }) => {
+	const intlObject = (0, react.useMemo)(() => require_createIntlObject.createIntlObject(locale), [locale]);
+	if (process.env.NODE_ENV === "development" && typeof _messages !== "undefined") (0, _intlayer_config_logger.getAppLogger)({ log: _intlayer_config_built.log })(`${(0, _intlayer_config_logger.colorize)("IntlProvider", _intlayer_config_colors.CYAN)} do not pass the messages prop with intlayer. Messages are loaded automatically under the hood for bundle optimization reasons.`);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.IntlContext.Provider, {
+		value: intlObject,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_intlayer.IntlayerProvider, {
+			locale,
+			...rest,
+			children
+		})
+	});
+};
+
+//#endregion
+exports.IntlProvider = IntlProvider;
+//# sourceMappingURL=IntlProvider.cjs.map

package/dist/cjs/IntlProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntlProvider.cjs","names":["createIntlObject","CYAN","IntlContext","IntlayerProvider"],"sources":["../../src/IntlProvider.tsx"],"sourcesContent":["'use client';\n\nimport { log } from '@intlayer/config/built';\nimport { CYAN } from '@intlayer/config/colors';\nimport { colorize, getAppLogger } from '@intlayer/config/logger';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { useMemo } from 'react';\nimport type { IntlProvider as _IntlProvider } from 'react-intl';\nimport { IntlayerProvider } from 'react-intlayer';\nimport { IntlContext } from './context';\nimport { createIntlObject } from './createIntlObject';\n\n/**\n * Drop-in for react-intl's `IntlProvider`.\n *\n * `messages`, `formats`, `timeZone`, `now`, `defaultRichTextElements`,\n * and `onError`/`onWarn` are accepted for API compatibility but have no\n * effect — Intlayer uses its own compiled dictionaries.\n *\n * The `locale` prop is forwarded to `IntlayerClientProvider`.\n */\nexport const IntlProvider: typeof _IntlProvider = ({\n  locale,\n  children,\n  messages: _messages,\n  formats: _formats,\n  timeZone: _timeZone,\n  defaultRichTextElements: _defaultRichTextElements,\n  onError: _onError,\n  ...rest\n}) => {\n  const intlObject = useMemo(\n    () => createIntlObject(locale as LocalesValues),\n    [locale]\n  );\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    typeof _messages !== 'undefined'\n  ) {\n    const appLogger = getAppLogger({ log });\n    appLogger(\n      `${colorize('IntlProvider', CYAN)} do not pass the messages prop with intlayer. Messages are loaded automatically under the hood for bundle optimization reasons.`\n    );\n  }\n\n  return (\n    <IntlContext.Provider value={intlObject}>\n      <IntlayerProvider locale={locale as LocalesValues} {...(rest as object)}>\n        {children}\n      </IntlayerProvider>\n    </IntlContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,gBAAsC,EACjD,QACA,UACA,UAAU,WACV,SAAS,UACT,UAAU,WACV,yBAAyB,0BACzB,SAAS,UACT,GAAG,WACC;CACJ,MAAM,sCACEA,0CAAiB,MAAuB,GAC9C,CAAC,MAAM,CACT;CAEA,IACE,QAAQ,IAAI,aAAa,iBACzB,OAAO,cAAc,aAGrB,0CAD+B,EAAE,gCAAI,CAC7B,CAAC,CACP,yCAAY,gBAAgBC,4BAAI,EAAE,gIACpC;CAGF,OACE,2CAACC,4BAAY,UAAb;EAAsB,OAAO;YAC3B,2CAACC,iCAAD;GAA0B;GAAyB,GAAK;GACrD;EACe;CACE;AAE1B"}