react-intlayer 7.6.0-canary.0 → 8.0.0-canary.2

package/dist/cjs/client/IntlayerProvider.cjs

@@ -12,7 +12,7 @@ _intlayer_config_built = require_rolldown_runtime.__toESM(_intlayer_config_built
 
 //#region src/client/IntlayerProvider.tsx
 /**
-* Context that store the current locale on the client side
+* Context that stores the current locale on the client side.
 */
 const IntlayerClientContext = (0, react.createContext)({
 	locale: require_client_useLocaleStorage.localeInStorage ?? _intlayer_config_built.default?.internationalization?.defaultLocale,
@@ -21,11 +21,18 @@ const IntlayerClientContext = (0, react.createContext)({
 	disableEditor: false
 });
 /**
-* Hook that provides the current locale
+* Hook that provides the current Intlayer client context.
+*
+* @returns The current Intlayer context values.
 */
 const useIntlayerContext = () => (0, react.useContext)(IntlayerClientContext);
 /**
-* Provider that store the current locale on the client side
+* Provider that stores the current locale on the client side.
+*
+* This component is focused on content delivery without the editor features.
+*
+* @param props - The provider props.
+* @returns The provider component.
 */
 const IntlayerProviderContent = ({ locale: localeProp, defaultLocale: defaultLocaleProp, children, setLocale: setLocaleProp, disableEditor, isCookieEnabled }) => {
 	const { internationalization } = _intlayer_config_built.default ?? {};
@@ -55,6 +62,26 @@ const IntlayerProviderContent = ({ locale: localeProp, defaultLocale: defaultLoc
 		children
 	});
 };
+/**
+* Main provider for Intlayer in React applications.
+*
+* It includes the editor provider by default, allowing for live content editing
+* if configured.
+*
+* @param props - The provider props.
+* @returns The provider component with editor support.
+*
+* @example
+* ```tsx
+* import { IntlayerProvider } from 'react-intlayer';
+*
+* const App = () => (
+*   <IntlayerProvider>
+*     <MyComponent />
+*   </IntlayerProvider>
+* );
+* ```
+*/
 const IntlayerProvider = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_editor_IntlayerEditorProvider.IntlayerEditorProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IntlayerProviderContent, { ...props }) });
 
 //#endregion

package/dist/cjs/client/IntlayerProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IntlayerProvider.cjs","names":["localeInStorage","configuration","MessageKey","IntlayerEditorProvider"],"sources":["../../../src/client/IntlayerProvider.tsx"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\nimport { localeResolver } from '@intlayer/core';\nimport { MessageKey, useCrossFrameState } from '@intlayer/editor-react';\nimport type { LocalesValues } from '@intlayer/types';\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useEffect,\n} from 'react';\nimport { IntlayerEditorProvider } from '../editor/IntlayerEditorProvider';\nimport { localeInStorage, setLocaleInStorage } from './useLocaleStorage';\n\ntype IntlayerValue = {\n  locale: LocalesValues;\n  setLocale: (newLocale: LocalesValues) => void;\n  disableEditor?: boolean;\n  isCookieEnabled?: boolean;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const IntlayerClientContext = createContext<IntlayerValue>({\n  locale: localeInStorage ?? configuration?.internationalization?.defaultLocale,\n  setLocale: () => null,\n  isCookieEnabled: true,\n  disableEditor: false,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useIntlayerContext = () => useContext(IntlayerClientContext);\n\nexport type IntlayerProviderProps = PropsWithChildren<{\n  locale?: LocalesValues;\n  defaultLocale?: LocalesValues;\n  setLocale?: (locale: LocalesValues) => void;\n  disableEditor?: boolean;\n  isCookieEnabled?: boolean;\n}>;\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const IntlayerProviderContent: FC<IntlayerProviderProps> = ({\n  locale: localeProp,\n  defaultLocale: defaultLocaleProp,\n  children,\n  setLocale: setLocaleProp,\n  disableEditor,\n  isCookieEnabled,\n}) => {\n  const { internationalization } = configuration ?? {};\n  const { locales: availableLocales, defaultLocale: defaultLocaleConfig } =\n    internationalization ?? {};\n\n  const initialLocale =\n    localeProp ?? localeInStorage ?? defaultLocaleProp ?? defaultLocaleConfig;\n\n  const [currentLocale, setCurrentLocale] = useCrossFrameState(\n    MessageKey.INTLAYER_CURRENT_LOCALE,\n    initialLocale\n  );\n\n  // Sync the prop to state if the prop changes from the parent\n  useEffect(() => {\n    if (localeProp && localeProp !== currentLocale) {\n      setCurrentLocale(localeProp);\n    }\n  }, [localeProp]);\n\n  const setLocaleBase = (newLocale: LocalesValues) => {\n    if (currentLocale.toString() === newLocale.toString()) return;\n\n    if (!availableLocales?.map(String).includes(newLocale)) {\n      console.error(`Locale ${newLocale} is not available`);\n      return;\n    }\n\n    setCurrentLocale(newLocale);\n    setLocaleInStorage(newLocale, isCookieEnabled);\n  };\n\n  const setLocale = setLocaleProp ?? setLocaleBase;\n\n  // Resolve based on currentLocale (the state), not the prop directly\n  const resolvedLocale = localeResolver(currentLocale);\n\n  return (\n    <IntlayerClientContext.Provider\n      value={{\n        locale: resolvedLocale,\n        setLocale,\n        disableEditor,\n      }}\n    >\n      {children}\n    </IntlayerClientContext.Provider>\n  );\n};\n\nexport const IntlayerProvider: FC<IntlayerProviderProps> = (props) => (\n  <IntlayerEditorProvider>\n    <IntlayerProviderContent {...props} />\n  </IntlayerEditorProvider>\n);\n"],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAa,iDAAqD;CAChE,QAAQA,mDAAmBC,gCAAe,sBAAsB;CAChE,iBAAiB;CACjB,iBAAiB;CACjB,eAAe;CAChB,CAAC;;;;AAKF,MAAa,iDAAsC,sBAAsB;;;;AAazE,MAAa,2BAAsD,EACjE,QAAQ,YACR,eAAe,mBACf,UACA,WAAW,eACX,eACA,sBACI;CACJ,MAAM,EAAE,yBAAyBA,kCAAiB,EAAE;CACpD,MAAM,EAAE,SAAS,kBAAkB,eAAe,wBAChD,wBAAwB,EAAE;CAE5B,MAAM,gBACJ,cAAcD,mDAAmB,qBAAqB;CAExD,MAAM,CAAC,eAAe,mEACpBE,kCAAW,yBACX,cACD;AAGD,4BAAgB;AACd,MAAI,cAAc,eAAe,cAC/B,kBAAiB,WAAW;IAE7B,CAAC,WAAW,CAAC;CAEhB,MAAM,iBAAiB,cAA6B;AAClD,MAAI,cAAc,UAAU,KAAK,UAAU,UAAU,CAAE;AAEvD,MAAI,CAAC,kBAAkB,IAAI,OAAO,CAAC,SAAS,UAAU,EAAE;AACtD,WAAQ,MAAM,UAAU,UAAU,mBAAmB;AACrD;;AAGF,mBAAiB,UAAU;AAC3B,qDAAmB,WAAW,gBAAgB;;CAGhD,MAAM,YAAY,iBAAiB;CAGnC,MAAM,oDAAgC,cAAc;AAEpD,QACE,2CAAC,sBAAsB;EACrB,OAAO;GACL,QAAQ;GACR;GACA;GACD;EAEA;GAC8B;;AAIrC,MAAa,oBAA+C,UAC1D,2CAACC,0EACC,2CAAC,2BAAwB,GAAI,QAAS,GACf"}
+{"version":3,"file":"IntlayerProvider.cjs","names":["localeInStorage","configuration","MessageKey","IntlayerEditorProvider"],"sources":["../../../src/client/IntlayerProvider.tsx"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\nimport { localeResolver } from '@intlayer/core';\nimport { MessageKey, useCrossFrameState } from '@intlayer/editor-react';\nimport type { LocalesValues } from '@intlayer/types';\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useEffect,\n} from 'react';\nimport { IntlayerEditorProvider } from '../editor/IntlayerEditorProvider';\nimport { localeInStorage, setLocaleInStorage } from './useLocaleStorage';\n\ntype IntlayerValue = {\n  locale: LocalesValues;\n  setLocale: (newLocale: LocalesValues) => void;\n  disableEditor?: boolean;\n  isCookieEnabled?: boolean;\n};\n\n/**\n * Context that stores the current locale on the client side.\n */\nexport const IntlayerClientContext = createContext<IntlayerValue>({\n  locale: localeInStorage ?? configuration?.internationalization?.defaultLocale,\n  setLocale: () => null,\n  isCookieEnabled: true,\n  disableEditor: false,\n});\n\n/**\n * Hook that provides the current Intlayer client context.\n *\n * @returns The current Intlayer context values.\n */\nexport const useIntlayerContext = () => useContext(IntlayerClientContext);\n\n/**\n * Props for the IntlayerProvider component.\n */\nexport type IntlayerProviderProps = PropsWithChildren<{\n  /**\n   * The locale to use. If not provided, it will be detected from storage or configuration.\n   */\n  locale?: LocalesValues;\n  /**\n   * The default locale to use as a fallback.\n   */\n  defaultLocale?: LocalesValues;\n  /**\n   * Function to set the locale.\n   */\n  setLocale?: (locale: LocalesValues) => void;\n  /**\n   * Whether to disable the editor.\n   */\n  disableEditor?: boolean;\n  /**\n   * Whether to enable cookies for storing the locale.\n   */\n  isCookieEnabled?: boolean;\n}>;\n\n/**\n * Provider that stores the current locale on the client side.\n *\n * This component is focused on content delivery without the editor features.\n *\n * @param props - The provider props.\n * @returns The provider component.\n */\nexport const IntlayerProviderContent: FC<IntlayerProviderProps> = ({\n  locale: localeProp,\n  defaultLocale: defaultLocaleProp,\n  children,\n  setLocale: setLocaleProp,\n  disableEditor,\n  isCookieEnabled,\n}) => {\n  const { internationalization } = configuration ?? {};\n  const { locales: availableLocales, defaultLocale: defaultLocaleConfig } =\n    internationalization ?? {};\n\n  const initialLocale =\n    localeProp ?? localeInStorage ?? defaultLocaleProp ?? defaultLocaleConfig;\n\n  const [currentLocale, setCurrentLocale] = useCrossFrameState(\n    MessageKey.INTLAYER_CURRENT_LOCALE,\n    initialLocale\n  );\n\n  // Sync the prop to state if the prop changes from the parent\n  useEffect(() => {\n    if (localeProp && localeProp !== currentLocale) {\n      setCurrentLocale(localeProp);\n    }\n  }, [localeProp]);\n\n  const setLocaleBase = (newLocale: LocalesValues) => {\n    if (currentLocale.toString() === newLocale.toString()) return;\n\n    if (!availableLocales?.map(String).includes(newLocale)) {\n      console.error(`Locale ${newLocale} is not available`);\n      return;\n    }\n\n    setCurrentLocale(newLocale);\n    setLocaleInStorage(newLocale, isCookieEnabled);\n  };\n\n  const setLocale = setLocaleProp ?? setLocaleBase;\n\n  // Resolve based on currentLocale (the state), not the prop directly\n  const resolvedLocale = localeResolver(currentLocale);\n\n  return (\n    <IntlayerClientContext.Provider\n      value={{\n        locale: resolvedLocale,\n        setLocale,\n        disableEditor,\n      }}\n    >\n      {children}\n    </IntlayerClientContext.Provider>\n  );\n};\n\n/**\n * Main provider for Intlayer in React applications.\n *\n * It includes the editor provider by default, allowing for live content editing\n * if configured.\n *\n * @param props - The provider props.\n * @returns The provider component with editor support.\n *\n * @example\n * ```tsx\n * import { IntlayerProvider } from 'react-intlayer';\n *\n * const App = () => (\n *   <IntlayerProvider>\n *     <MyComponent />\n *   </IntlayerProvider>\n * );\n * ```\n */\nexport const IntlayerProvider: FC<IntlayerProviderProps> = (props) => (\n  <IntlayerEditorProvider>\n    <IntlayerProviderContent {...props} />\n  </IntlayerEditorProvider>\n);\n"],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAa,iDAAqD;CAChE,QAAQA,mDAAmBC,gCAAe,sBAAsB;CAChE,iBAAiB;CACjB,iBAAiB;CACjB,eAAe;CAChB,CAAC;;;;;;AAOF,MAAa,iDAAsC,sBAAsB;;;;;;;;;AAoCzE,MAAa,2BAAsD,EACjE,QAAQ,YACR,eAAe,mBACf,UACA,WAAW,eACX,eACA,sBACI;CACJ,MAAM,EAAE,yBAAyBA,kCAAiB,EAAE;CACpD,MAAM,EAAE,SAAS,kBAAkB,eAAe,wBAChD,wBAAwB,EAAE;CAE5B,MAAM,gBACJ,cAAcD,mDAAmB,qBAAqB;CAExD,MAAM,CAAC,eAAe,mEACpBE,kCAAW,yBACX,cACD;AAGD,4BAAgB;AACd,MAAI,cAAc,eAAe,cAC/B,kBAAiB,WAAW;IAE7B,CAAC,WAAW,CAAC;CAEhB,MAAM,iBAAiB,cAA6B;AAClD,MAAI,cAAc,UAAU,KAAK,UAAU,UAAU,CAAE;AAEvD,MAAI,CAAC,kBAAkB,IAAI,OAAO,CAAC,SAAS,UAAU,EAAE;AACtD,WAAQ,MAAM,UAAU,UAAU,mBAAmB;AACrD;;AAGF,mBAAiB,UAAU;AAC3B,qDAAmB,WAAW,gBAAgB;;CAGhD,MAAM,YAAY,iBAAiB;CAGnC,MAAM,oDAAgC,cAAc;AAEpD,QACE,2CAAC,sBAAsB;EACrB,OAAO;GACL,QAAQ;GACR;GACA;GACD;EAEA;GAC8B;;;;;;;;;;;;;;;;;;;;;;AAwBrC,MAAa,oBAA+C,UAC1D,2CAACC,0EACC,2CAAC,2BAAwB,GAAI,QAAS,GACf"}

package/dist/cjs/client/format/index.cjs

@@ -1,3 +1,4 @@
+const require_client_format_useIntl = require('./useIntl.cjs');
 const require_client_format_useCompact = require('./useCompact.cjs');
 const require_client_format_useCurrency = require('./useCurrency.cjs');
 const require_client_format_useDate = require('./useDate.cjs');
@@ -10,6 +11,7 @@ const require_client_format_useUnit = require('./useUnit.cjs');
 exports.useCompact = require_client_format_useCompact.useCompact;
 exports.useCurrency = require_client_format_useCurrency.useCurrency;
 exports.useDate = require_client_format_useDate.useDate;
+exports.useIntl = require_client_format_useIntl.useIntl;
 exports.useList = require_client_format_useList.useList;
 exports.useNumber = require_client_format_useNumber.useNumber;
 exports.usePercentage = require_client_format_usePercentage.usePercentage;

package/dist/cjs/client/format/useIntl.cjs

@@ -0,0 +1,45 @@
+'use client';
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_client_IntlayerProvider = require('../IntlayerProvider.cjs');
+let react = require("react");
+let _intlayer_core = require("@intlayer/core");
+
+//#region src/client/format/useIntl.ts
+/**
+* React client hook that provides a locale-bound `Intl` object.
+*
+* It acts exactly like the native `Intl` object, but acts as a proxy to:
+* 1. Inject the current locale automatically if none is provided.
+* 2. Use the performance-optimized `CachedIntl` under the hood.
+*
+* @example
+* ```tsx
+* const intl = useIntl(); // uses context locale
+*
+* // Standard API, but no need to pass 'en-US' as the first argument
+* const formatted = new intl.NumberFormat({
+* style: 'currency',
+* currency: 'USD'
+* }).format(123.45);
+* ```
+*
+* @example
+* ```tsx
+* const intl = useIntl();
+*
+* // You can still override the locale if needed
+* const date = new intl.DateTimeFormat({ locale: 'fr-FR' }).format(new Date());
+* // or
+* const date2 = new intl.DateTimeFormat('fr-FR').format(new Date());
+* ```
+*/
+const useIntl = (locale) => {
+	const { locale: contextLocale } = (0, react.useContext)(require_client_IntlayerProvider.IntlayerClientContext);
+	const currentLocale = locale ?? contextLocale;
+	return (0, react.useMemo)(() => (0, _intlayer_core.bindIntl)(currentLocale), [currentLocale]);
+};
+
+//#endregion
+exports.useIntl = useIntl;
+//# sourceMappingURL=useIntl.cjs.map

package/dist/cjs/client/format/useIntl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntl.cjs","names":["IntlayerClientContext"],"sources":["../../../../src/client/format/useIntl.ts"],"sourcesContent":["'use client';\n\nimport { bindIntl } from '@intlayer/core';\nimport type { LocalesValues } from '@intlayer/types';\nimport { useContext, useMemo } from 'react';\nimport { IntlayerClientContext } from '../IntlayerProvider';\n\n/**\n * React client hook that provides a locale-bound `Intl` object.\n *\n * It acts exactly like the native `Intl` object, but acts as a proxy to:\n * 1. Inject the current locale automatically if none is provided.\n * 2. Use the performance-optimized `CachedIntl` under the hood.\n *\n * @example\n * ```tsx\n * const intl = useIntl(); // uses context locale\n *\n * // Standard API, but no need to pass 'en-US' as the first argument\n * const formatted = new intl.NumberFormat({\n * style: 'currency',\n * currency: 'USD'\n * }).format(123.45);\n * ```\n *\n * @example\n * ```tsx\n * const intl = useIntl();\n *\n * // You can still override the locale if needed\n * const date = new intl.DateTimeFormat({ locale: 'fr-FR' }).format(new Date());\n * // or\n * const date2 = new intl.DateTimeFormat('fr-FR').format(new Date());\n * ```\n */\nexport const useIntl = (locale?: LocalesValues) => {\n  const { locale: contextLocale } = useContext(IntlayerClientContext);\n  const currentLocale = locale ?? contextLocale;\n\n  return useMemo(() => bindIntl(currentLocale), [currentLocale]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,WAAW,WAA2B;CACjD,MAAM,EAAE,QAAQ,wCAA6BA,sDAAsB;CACnE,MAAM,gBAAgB,UAAU;AAEhC,8DAA8B,cAAc,EAAE,CAAC,cAAc,CAAC"}

package/dist/cjs/client/t.cjs

@@ -7,9 +7,28 @@ let _intlayer_core = require("@intlayer/core");
 
 //#region src/client/t.ts
 /**
-* On the client side, this function returns the translation of the provided multilang content.
+* Client-side translation function that returns the translation of the provided multilang content.
 *
-* If the locale is not provided, it will use the locale from the client context
+* If the locale is not provided, it will use the locale from the client context.
+*
+* @param multilangContent - An object mapping locales to their respective content.
+* @param locale - Optional locale to override the current context locale.
+* @returns The translation for the specified locale.
+*
+* @example
+* ```tsx
+* import { t } from 'react-intlayer';
+*
+* const MyComponent = () => {
+*   const greeting = t({
+*     en: 'Hello',
+*     fr: 'Bonjour',
+*     es: 'Hola',
+*   });
+*
+*   return <h1>{greeting}</h1>;
+* };
+* ```
 */
 const t = (multilangContent, locale) => {
 	const { locale: currentLocale } = (0, react.useContext)(require_client_IntlayerProvider.IntlayerClientContext);

package/dist/cjs/client/t.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"t.cjs","names":["IntlayerClientContext"],"sources":["../../../src/client/t.ts"],"sourcesContent":["'use client';\n\nimport { getTranslation } from '@intlayer/core';\nimport type { LocalesValues, StrictModeLocaleMap } from '@intlayer/types';\nimport { useContext } from 'react';\nimport { IntlayerClientContext } from './IntlayerProvider';\n\n/**\n * On the client side, this function returns the translation of the provided multilang content.\n *\n * If the locale is not provided, it will use the locale from the client context\n */\nexport const t = <Content = string>(\n  multilangContent: StrictModeLocaleMap<Content>,\n  locale?: LocalesValues\n) => {\n  const { locale: currentLocale } = useContext(IntlayerClientContext);\n  const localeTarget = locale ?? currentLocale;\n\n  return getTranslation<Content>(multilangContent, localeTarget);\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,KACX,kBACA,WACG;CACH,MAAM,EAAE,QAAQ,wCAA6BA,sDAAsB;AAGnE,2CAA+B,kBAFV,UAAU,cAE+B"}
+{"version":3,"file":"t.cjs","names":["IntlayerClientContext"],"sources":["../../../src/client/t.ts"],"sourcesContent":["'use client';\n\nimport { getTranslation } from '@intlayer/core';\nimport type { LocalesValues, StrictModeLocaleMap } from '@intlayer/types';\nimport { useContext } from 'react';\nimport { IntlayerClientContext } from './IntlayerProvider';\n\n/**\n * Client-side translation function that returns the translation of the provided multilang content.\n *\n * If the locale is not provided, it will use the locale from the client context.\n *\n * @param multilangContent - An object mapping locales to their respective content.\n * @param locale - Optional locale to override the current context locale.\n * @returns The translation for the specified locale.\n *\n * @example\n * ```tsx\n * import { t } from 'react-intlayer';\n *\n * const MyComponent = () => {\n *   const greeting = t({\n *     en: 'Hello',\n *     fr: 'Bonjour',\n *     es: 'Hola',\n *   });\n *\n *   return <h1>{greeting}</h1>;\n * };\n * ```\n */\nexport const t = <Content = string>(\n  multilangContent: StrictModeLocaleMap<Content>,\n  locale?: LocalesValues\n) => {\n  const { locale: currentLocale } = useContext(IntlayerClientContext);\n  const localeTarget = locale ?? currentLocale;\n\n  return getTranslation<Content>(multilangContent, localeTarget);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,KACX,kBACA,WACG;CACH,MAAM,EAAE,QAAQ,wCAA6BA,sDAAsB;AAGnE,2CAA+B,kBAFV,UAAU,cAE+B"}

package/dist/cjs/client/useIntlayer.cjs

@@ -7,11 +7,24 @@ let react = require("react");
 
 //#region src/client/useIntlayer.ts
 /**
-* On the client side, Hook that picking one dictionary by its key and return the content
+* Client-side hook that picks one dictionary by its key and returns its content.
 *
-* If the locale is not provided, it will use the locale from the client context
+* If the locale is not provided, it will use the locale from the client context.
 *
-* When you need the raw string for attributes like `aria-label`, access the `.value` property of the returned content
+* @param key - The unique key of the dictionary to retrieve.
+* @param locale - Optional locale to override the current context locale.
+* @returns The dictionary content for the specified locale.
+*
+* @example
+* ```tsx
+* import { useIntlayer } from 'react-intlayer';
+*
+* const MyComponent = () => {
+*   const content = useIntlayer('my-dictionary-key');
+*
+*   return <div>{content.myField.value}</div>;
+* };
+* ```
 */
 const useIntlayer = (key, locale) => {
 	const { locale: currentLocale } = (0, react.useContext)(require_client_IntlayerProvider.IntlayerClientContext);

package/dist/cjs/client/useIntlayer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIntlayer.cjs","names":["IntlayerClientContext","getIntlayer"],"sources":["../../../src/client/useIntlayer.ts"],"sourcesContent":["'use client';\n\nimport type {\n  DeclaredLocales,\n  DictionaryKeys,\n  LocalesValues,\n} from '@intlayer/types';\nimport { useContext, useMemo } from 'react';\nimport { getIntlayer } from '../getIntlayer';\nimport { IntlayerClientContext } from './IntlayerProvider';\n\n/**\n * On the client side, Hook that picking one dictionary by its key and return the content\n *\n * If the locale is not provided, it will use the locale from the client context\n *\n * When you need the raw string for attributes like `aria-label`, access the `.value` property of the returned content\n */\nexport const useIntlayer = <\n  T extends DictionaryKeys,\n  L extends LocalesValues = DeclaredLocales,\n>(\n  key: T,\n  locale?: L\n) => {\n  const { locale: currentLocale } = useContext(IntlayerClientContext);\n\n  return useMemo(() => {\n    const localeTarget = locale ?? (currentLocale as L);\n\n    return getIntlayer<T, L>(key, localeTarget);\n  }, [key, currentLocale, locale]);\n};\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,eAIX,KACA,WACG;CACH,MAAM,EAAE,QAAQ,wCAA6BA,sDAAsB;AAEnE,iCAAqB;AAGnB,SAAOC,gCAAkB,KAFJ,UAAW,cAEW;IAC1C;EAAC;EAAK;EAAe;EAAO,CAAC"}
+{"version":3,"file":"useIntlayer.cjs","names":["IntlayerClientContext","getIntlayer"],"sources":["../../../src/client/useIntlayer.ts"],"sourcesContent":["'use client';\n\nimport type {\n  DeclaredLocales,\n  DictionaryKeys,\n  LocalesValues,\n} from '@intlayer/types';\nimport { useContext, useMemo } from 'react';\nimport { getIntlayer } from '../getIntlayer';\nimport { IntlayerClientContext } from './IntlayerProvider';\n\n/**\n * Client-side hook that picks one dictionary by its key and returns its content.\n *\n * If the locale is not provided, it will use the locale from the client context.\n *\n * @param key - The unique key of the dictionary to retrieve.\n * @param locale - Optional locale to override the current context locale.\n * @returns The dictionary content for the specified locale.\n *\n * @example\n * ```tsx\n * import { useIntlayer } from 'react-intlayer';\n *\n * const MyComponent = () => {\n *   const content = useIntlayer('my-dictionary-key');\n *\n *   return <div>{content.myField.value}</div>;\n * };\n * ```\n */\nexport const useIntlayer = <\n  T extends DictionaryKeys,\n  L extends LocalesValues = DeclaredLocales,\n>(\n  key: T,\n  locale?: L\n) => {\n  const { locale: currentLocale } = useContext(IntlayerClientContext);\n\n  return useMemo(() => {\n    const localeTarget = locale ?? (currentLocale as L);\n\n    return getIntlayer<T, L>(key, localeTarget);\n  }, [key, currentLocale, locale]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,eAIX,KACA,WACG;CACH,MAAM,EAAE,QAAQ,wCAA6BA,sDAAsB;AAEnE,iCAAqB;AAGnB,SAAOC,gCAAkB,KAFJ,UAAW,cAEW;IAC1C;EAAC;EAAK;EAAe;EAAO,CAAC"}

package/dist/cjs/client/useLocale.cjs

@@ -9,7 +9,27 @@ _intlayer_config_built = require_rolldown_runtime.__toESM(_intlayer_config_built
 
 //#region src/client/useLocale.ts
 /**
-* On the client side, hook to get the current locale and all related fields
+* Client-side hook to get the current locale and related locale management functions.
+*
+* @param props - Optional properties for the hook.
+* @returns An object containing the current locale, default locale, available locales, and a function to update the locale.
+*
+* @example
+* ```tsx
+* import { useLocale } from 'react-intlayer';
+*
+* const LocaleSwitcher = () => {
+*   const { locale, setLocale, availableLocales } = useLocale();
+*
+*   return (
+*     <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+*       {availableLocales.map((loc) => (
+*         <option key={loc} value={loc}>{loc}</option>
+*       ))}
+*     </select>
+*   );
+* };
+* ```
 */
 const useLocale = ({ isCookieEnabled, onLocaleChange } = {}) => {
 	const { defaultLocale, locales: availableLocales } = _intlayer_config_built.default?.internationalization ?? {};
@@ -18,14 +38,14 @@ const useLocale = ({ isCookieEnabled, onLocaleChange } = {}) => {
 		locale,
 		defaultLocale,
 		availableLocales,
-		setLocale: (0, react.useCallback)((locale$1) => {
-			if (!availableLocales?.map(String).includes(locale$1)) {
-				console.error(`Locale ${locale$1} is not available`);
+		setLocale: (0, react.useCallback)((locale) => {
+			if (!availableLocales?.map(String).includes(locale)) {
+				console.error(`Locale ${locale} is not available`);
 				return;
 			}
-			setLocaleState(locale$1);
-			require_client_useLocaleStorage.setLocaleInStorage(locale$1, isCookieEnabled ?? isCookieEnabledContext ?? true);
-			onLocaleChange?.(locale$1);
+			setLocaleState(locale);
+			require_client_useLocaleStorage.setLocaleInStorage(locale, isCookieEnabled ?? isCookieEnabledContext ?? true);
+			onLocaleChange?.(locale);
 		}, [
 			availableLocales,
 			onLocaleChange,

package/dist/cjs/client/useLocale.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLocale.cjs","names":["configuration","IntlayerClientContext","locale"],"sources":["../../../src/client/useLocale.ts"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\nimport type { DeclaredLocales, LocalesValues } from '@intlayer/types';\nimport { useCallback, useContext } from 'react';\nimport { IntlayerClientContext } from './IntlayerProvider';\nimport { setLocaleInStorage } from './useLocaleStorage';\n\ntype UseLocaleProps = {\n  isCookieEnabled?: boolean;\n  onLocaleChange?: (locale: LocalesValues) => void;\n};\n\ntype UseLocaleResult = {\n  locale: DeclaredLocales;\n  defaultLocale: DeclaredLocales;\n  availableLocales: DeclaredLocales[];\n  setLocale: (locale: LocalesValues) => void;\n};\n\n/**\n * On the client side, hook to get the current locale and all related fields\n */\nexport const useLocale = ({\n  isCookieEnabled,\n  onLocaleChange,\n}: UseLocaleProps = {}): UseLocaleResult => {\n  const { defaultLocale, locales: availableLocales } =\n    configuration?.internationalization ?? {};\n\n  const {\n    locale,\n    setLocale: setLocaleState,\n    isCookieEnabled: isCookieEnabledContext,\n  } = useContext(IntlayerClientContext);\n\n  const setLocale = useCallback(\n    (locale: LocalesValues) => {\n      if (!availableLocales?.map(String).includes(locale)) {\n        console.error(`Locale ${locale} is not available`);\n        return;\n      }\n\n      setLocaleState(locale);\n      setLocaleInStorage(\n        locale,\n        isCookieEnabled ?? isCookieEnabledContext ?? true\n      );\n      onLocaleChange?.(locale);\n    },\n    [availableLocales, onLocaleChange, setLocaleState, isCookieEnabled]\n  );\n\n  return {\n    locale, // Current locale\n    defaultLocale, // Principal locale defined in config\n    availableLocales, // List of the available locales defined in config\n    setLocale, // Function to set the locale\n  } as UseLocaleResult;\n};\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAa,aAAa,EACxB,iBACA,mBACkB,EAAE,KAAsB;CAC1C,MAAM,EAAE,eAAe,SAAS,qBAC9BA,gCAAe,wBAAwB,EAAE;CAE3C,MAAM,EACJ,QACA,WAAW,gBACX,iBAAiB,iDACJC,sDAAsB;AAmBrC,QAAO;EACL;EACA;EACA;EACA,mCApBC,aAA0B;AACzB,OAAI,CAAC,kBAAkB,IAAI,OAAO,CAAC,SAASC,SAAO,EAAE;AACnD,YAAQ,MAAM,UAAUA,SAAO,mBAAmB;AAClD;;AAGF,kBAAeA,SAAO;AACtB,sDACEA,UACA,mBAAmB,0BAA0B,KAC9C;AACD,oBAAiBA,SAAO;KAE1B;GAAC;GAAkB;GAAgB;GAAgB;GAAgB,CACpE;EAOA"}
+{"version":3,"file":"useLocale.cjs","names":["configuration","IntlayerClientContext"],"sources":["../../../src/client/useLocale.ts"],"sourcesContent":["'use client';\n\nimport configuration from '@intlayer/config/built';\nimport type { DeclaredLocales, LocalesValues } from '@intlayer/types';\nimport { useCallback, useContext } from 'react';\nimport { IntlayerClientContext } from './IntlayerProvider';\nimport { setLocaleInStorage } from './useLocaleStorage';\n\ntype UseLocaleProps = {\n  isCookieEnabled?: boolean;\n  onLocaleChange?: (locale: LocalesValues) => void;\n};\n\ntype UseLocaleResult = {\n  locale: DeclaredLocales;\n  defaultLocale: DeclaredLocales;\n  availableLocales: DeclaredLocales[];\n  setLocale: (locale: LocalesValues) => void;\n};\n\n/**\n * Client-side hook to get the current locale and related locale management functions.\n *\n * @param props - Optional properties for the hook.\n * @returns An object containing the current locale, default locale, available locales, and a function to update the locale.\n *\n * @example\n * ```tsx\n * import { useLocale } from 'react-intlayer';\n *\n * const LocaleSwitcher = () => {\n *   const { locale, setLocale, availableLocales } = useLocale();\n *\n *   return (\n *     <select value={locale} onChange={(e) => setLocale(e.target.value)}>\n *       {availableLocales.map((loc) => (\n *         <option key={loc} value={loc}>{loc}</option>\n *       ))}\n *     </select>\n *   );\n * };\n * ```\n */\nexport const useLocale = ({\n  isCookieEnabled,\n  onLocaleChange,\n}: UseLocaleProps = {}): UseLocaleResult => {\n  const { defaultLocale, locales: availableLocales } =\n    configuration?.internationalization ?? {};\n\n  const {\n    locale,\n    setLocale: setLocaleState,\n    isCookieEnabled: isCookieEnabledContext,\n  } = useContext(IntlayerClientContext);\n\n  const setLocale = useCallback(\n    (locale: LocalesValues) => {\n      if (!availableLocales?.map(String).includes(locale)) {\n        console.error(`Locale ${locale} is not available`);\n        return;\n      }\n\n      setLocaleState(locale);\n      setLocaleInStorage(\n        locale,\n        isCookieEnabled ?? isCookieEnabledContext ?? true\n      );\n      onLocaleChange?.(locale);\n    },\n    [availableLocales, onLocaleChange, setLocaleState, isCookieEnabled]\n  );\n\n  return {\n    locale, // Current locale\n    defaultLocale, // Principal locale defined in config\n    availableLocales, // List of the available locales defined in config\n    setLocale, // Function to set the locale\n  } as UseLocaleResult;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,aAAa,EACxB,iBACA,mBACkB,EAAE,KAAsB;CAC1C,MAAM,EAAE,eAAe,SAAS,qBAC9BA,gCAAe,wBAAwB,EAAE;CAE3C,MAAM,EACJ,QACA,WAAW,gBACX,iBAAiB,iDACJC,sDAAsB;AAmBrC,QAAO;EACL;EACA;EACA;EACA,mCApBC,WAA0B;AACzB,OAAI,CAAC,kBAAkB,IAAI,OAAO,CAAC,SAAS,OAAO,EAAE;AACnD,YAAQ,MAAM,UAAU,OAAO,mBAAmB;AAClD;;AAGF,kBAAe,OAAO;AACtB,sDACE,QACA,mBAAmB,0BAA0B,KAC9C;AACD,oBAAiB,OAAO;KAE1B;GAAC;GAAkB;GAAgB;GAAgB;GAAgB,CACpE;EAOA"}

package/dist/cjs/getDictionary.cjs

@@ -7,7 +7,9 @@ const getDictionary = (dictionary, locale, additionalPlugins) => {
 	return (0, _intlayer_core.getDictionary)(dictionary, locale, [
 		require_plugins.intlayerNodePlugins,
 		require_plugins.reactNodePlugins,
+		require_plugins.insertionPlugin,
 		require_plugins.markdownPlugin,
+		require_plugins.htmlPlugin,
 		...additionalPlugins ?? []
 	]);
 };

package/dist/cjs/getDictionary.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getDictionary.cjs","names":["intlayerNodePlugins","reactNodePlugins","markdownPlugin"],"sources":["../../src/getDictionary.ts"],"sourcesContent":["import {\n  getDictionary as getDictionaryCore,\n  type Plugins,\n} from '@intlayer/core';\nimport type {\n  DeclaredLocales,\n  Dictionary,\n  LocalesValues,\n} from '@intlayer/types';\nimport {\n  type DeepTransformContent,\n  intlayerNodePlugins,\n  markdownPlugin,\n  reactNodePlugins,\n} from './plugins';\n\nexport const getDictionary = <\n  T extends Dictionary,\n  L extends LocalesValues = DeclaredLocales,\n>(\n  dictionary: T,\n  locale?: L,\n  additionalPlugins?: Plugins[]\n): DeepTransformContent<T['content'], L> => {\n  const plugins: Plugins[] = [\n    intlayerNodePlugins,\n    reactNodePlugins,\n    markdownPlugin,\n    ...(additionalPlugins ?? []),\n  ];\n\n  return getDictionaryCore(dictionary, locale, plugins) as any;\n};\n"],"mappings":";;;;;AAgBA,MAAa,iBAIX,YACA,QACA,sBAC0C;AAQ1C,0CAAyB,YAAY,QAPV;EACzBA;EACAC;EACAC;EACA,GAAI,qBAAqB,EAAE;EAC5B,CAEoD"}
+{"version":3,"file":"getDictionary.cjs","names":["intlayerNodePlugins","reactNodePlugins","insertionPlugin","markdownPlugin","htmlPlugin"],"sources":["../../src/getDictionary.ts"],"sourcesContent":["import {\n  getDictionary as getDictionaryCore,\n  type Plugins,\n} from '@intlayer/core';\nimport type {\n  DeclaredLocales,\n  Dictionary,\n  LocalesValues,\n} from '@intlayer/types';\nimport {\n  type DeepTransformContent,\n  htmlPlugin,\n  insertionPlugin,\n  intlayerNodePlugins,\n  markdownPlugin,\n  reactNodePlugins,\n} from './plugins';\n\nexport const getDictionary = <\n  T extends Dictionary,\n  L extends LocalesValues = DeclaredLocales,\n>(\n  dictionary: T,\n  locale?: L,\n  additionalPlugins?: Plugins[]\n): DeepTransformContent<T['content'], L> => {\n  const plugins: Plugins[] = [\n    intlayerNodePlugins,\n    reactNodePlugins,\n    insertionPlugin,\n    markdownPlugin,\n    htmlPlugin,\n    ...(additionalPlugins ?? []),\n  ];\n\n  return getDictionaryCore(dictionary, locale, plugins) as any;\n};\n"],"mappings":";;;;;AAkBA,MAAa,iBAIX,YACA,QACA,sBAC0C;AAU1C,0CAAyB,YAAY,QATV;EACzBA;EACAC;EACAC;EACAC;EACAC;EACA,GAAI,qBAAqB,EAAE;EAC5B,CAEoD"}

package/dist/cjs/getIntlayer.cjs

@@ -7,7 +7,9 @@ const getIntlayer = (key, locale, additionalPlugins) => {
 	return (0, _intlayer_core.getIntlayer)(key, locale, [
 		require_plugins.intlayerNodePlugins,
 		require_plugins.reactNodePlugins,
+		require_plugins.insertionPlugin,
 		require_plugins.markdownPlugin,
+		require_plugins.htmlPlugin,
 		...additionalPlugins ?? []
 	]);
 };

package/dist/cjs/getIntlayer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getIntlayer.cjs","names":["intlayerNodePlugins","reactNodePlugins","markdownPlugin"],"sources":["../../src/getIntlayer.ts"],"sourcesContent":["import { getIntlayer as getIntlayerCore, type Plugins } from '@intlayer/core';\nimport type {\n  DeclaredLocales,\n  DictionaryKeys,\n  DictionaryRegistryContent,\n  LocalesValues,\n} from '@intlayer/types';\nimport {\n  type DeepTransformContent,\n  intlayerNodePlugins,\n  markdownPlugin,\n  reactNodePlugins,\n} from './plugins';\n\nexport const getIntlayer = <\n  T extends DictionaryKeys,\n  L extends LocalesValues = DeclaredLocales,\n>(\n  key: T,\n  locale?: L,\n  additionalPlugins?: Plugins[]\n): DeepTransformContent<DictionaryRegistryContent<T>, L> => {\n  const plugins: Plugins[] = [\n    intlayerNodePlugins,\n    reactNodePlugins,\n    markdownPlugin,\n    ...(additionalPlugins ?? []),\n  ];\n\n  return getIntlayerCore(key, locale, plugins) as any;\n};\n"],"mappings":";;;;;AAcA,MAAa,eAIX,KACA,QACA,sBAC0D;AAQ1D,wCAAuB,KAAK,QAPD;EACzBA;EACAC;EACAC;EACA,GAAI,qBAAqB,EAAE;EAC5B,CAE2C"}
+{"version":3,"file":"getIntlayer.cjs","names":["intlayerNodePlugins","reactNodePlugins","insertionPlugin","markdownPlugin","htmlPlugin"],"sources":["../../src/getIntlayer.ts"],"sourcesContent":["import { getIntlayer as getIntlayerCore, type Plugins } from '@intlayer/core';\nimport type {\n  DeclaredLocales,\n  DictionaryKeys,\n  DictionaryRegistryContent,\n  LocalesValues,\n} from '@intlayer/types';\nimport {\n  type DeepTransformContent,\n  htmlPlugin,\n  insertionPlugin,\n  intlayerNodePlugins,\n  markdownPlugin,\n  reactNodePlugins,\n} from './plugins';\n\nexport const getIntlayer = <\n  T extends DictionaryKeys,\n  L extends LocalesValues = DeclaredLocales,\n>(\n  key: T,\n  locale?: L,\n  additionalPlugins?: Plugins[]\n): DeepTransformContent<DictionaryRegistryContent<T>, L> => {\n  const plugins: Plugins[] = [\n    intlayerNodePlugins,\n    reactNodePlugins,\n    insertionPlugin,\n    markdownPlugin,\n    htmlPlugin,\n    ...(additionalPlugins ?? []),\n  ];\n\n  return getIntlayerCore(key, locale, plugins) as any;\n};\n"],"mappings":";;;;;AAgBA,MAAa,eAIX,KACA,QACA,sBAC0D;AAU1D,wCAAuB,KAAK,QATD;EACzBA;EACAC;EACAC;EACAC;EACAC;EACA,GAAI,qBAAqB,EAAE;EAC5B,CAE2C"}

package/dist/cjs/html/HTMLProvider.cjs

@@ -0,0 +1,18 @@
+'use client';
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/html/HTMLProvider.tsx
+const HTMLContext = (0, react.createContext)(void 0);
+const useHTMLContext = () => (0, react.useContext)(HTMLContext);
+const HTMLProvider = ({ children, components }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HTMLContext.Provider, {
+	value: { components },
+	children
+});
+
+//#endregion
+exports.HTMLProvider = HTMLProvider;
+exports.useHTMLContext = useHTMLContext;
+//# sourceMappingURL=HTMLProvider.cjs.map

package/dist/cjs/html/HTMLProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLProvider.cjs","names":[],"sources":["../../../src/html/HTMLProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n} from 'react';\n\ntype HTMLContextValue = {\n  components?: Record<string, any>;\n};\n\ntype HTMLProviderProps = PropsWithChildren<{\n  /**\n   * Component overrides for HTML tags.\n   */\n  components?: Record<string, any>;\n}>;\n\nconst HTMLContext = createContext<HTMLContextValue | undefined>(undefined);\n\nexport const useHTMLContext = () => useContext(HTMLContext);\n\nexport const HTMLProvider: FC<HTMLProviderProps> = ({\n  children,\n  components,\n}) => (\n  <HTMLContext.Provider value={{ components }}>{children}</HTMLContext.Provider>\n);\n"],"mappings":";;;;;;;AAoBA,MAAM,uCAA0D,OAAU;AAE1E,MAAa,6CAAkC,YAAY;AAE3D,MAAa,gBAAuC,EAClD,UACA,iBAEA,2CAAC,YAAY;CAAS,OAAO,EAAE,YAAY;CAAG;EAAgC"}

package/dist/cjs/html/HTMLRenderer.cjs

@@ -0,0 +1,59 @@
+'use client';
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_html_HTMLProvider = require('./HTMLProvider.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _intlayer_core = require("@intlayer/core");
+
+//#region src/html/HTMLRenderer.tsx
+const createDefaultHTMLComponents = () => {
+	const components = {};
+	for (const tag of _intlayer_core.HTML_TAGS) components[tag] = ({ children, ...props }) => (0, react.createElement)(tag, props, children);
+	return components;
+};
+const defaultHTMLComponents = createDefaultHTMLComponents();
+/**
+* Renders HTML-like content to JSX with the provided components.
+*
+* This function does not use context from HTMLProvider. Use `useHTMLRenderer`
+* hook if you want to leverage provider context.
+*/
+const renderHTML = (content, { components } = {}) => {
+	const mergedComponents = {
+		...defaultHTMLComponents,
+		...components
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: (0, _intlayer_core.getHTML)(content, Object.fromEntries(Object.entries(mergedComponents).filter(([, Component]) => Component).map(([key, Component]) => [key, (props) => (0, react.createElement)(Component, props)]))) });
+};
+/**
+* Hook that returns a function to render HTML content.
+*
+* This hook considers the configuration from the `HTMLProvider` context if available,
+* falling back to the provided components.
+*/
+const useHTMLRenderer = ({ components } = {}) => {
+	const context = require_html_HTMLProvider.useHTMLContext();
+	return (content) => {
+		return renderHTML(content, { components: {
+			...context?.components,
+			...components
+		} });
+	};
+};
+/**
+* React component that renders HTML-like content to JSX.
+*
+* This component uses the components from the `HTMLProvider` context
+* if available.
+*/
+const HTMLRenderer = ({ children = "", components }) => {
+	return useHTMLRenderer({ components })(children);
+};
+
+//#endregion
+exports.HTMLRenderer = HTMLRenderer;
+exports.defaultHTMLComponents = defaultHTMLComponents;
+exports.renderHTML = renderHTML;
+exports.useHTMLRenderer = useHTMLRenderer;
+//# sourceMappingURL=HTMLRenderer.cjs.map

package/dist/cjs/html/HTMLRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLRenderer.cjs","names":["HTML_TAGS","Fragment","useHTMLContext"],"sources":["../../../src/html/HTMLRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getHTML, HTML_TAGS } from '@intlayer/core';\nimport { createElement, type FC, Fragment, type JSX } from 'react';\nimport { useHTMLContext } from './HTMLProvider';\nimport type { ReactHTMLComponent } from './types';\n\n/**\n * Type for React HTML tag components.\n */\ntype HTMLTagComponent = ReactHTMLComponent;\n\nconst createDefaultHTMLComponents = (): Record<string, HTMLTagComponent> => {\n  const components: Record<string, HTMLTagComponent> = {};\n\n  for (const tag of HTML_TAGS) {\n    components[tag] = ({ children, ...props }) =>\n      createElement(tag, props, children);\n  }\n\n  return components;\n};\n\nexport const defaultHTMLComponents = createDefaultHTMLComponents();\n\nexport type RenderHTMLProps = {\n  /**\n   * Component overrides for HTML tags.\n   * Allows you to customize how specific HTML elements are rendered.\n   */\n  components?: Record<string, any>;\n};\n\n/**\n * Renders HTML-like content to JSX with the provided components.\n *\n * This function does not use context from HTMLProvider. Use `useHTMLRenderer`\n * hook if you want to leverage provider context.\n */\nexport const renderHTML = (\n  content: string,\n  { components }: RenderHTMLProps = {}\n): JSX.Element => {\n  const mergedComponents = {\n    ...defaultHTMLComponents,\n    ...components,\n  };\n\n  // Wrap all components to ensure they are rendered via React.createElement\n  const wrappedComponents = Object.fromEntries(\n    Object.entries(mergedComponents)\n      .filter(([, Component]) => Component)\n      .map(([key, Component]) => [\n        key,\n        (props: any) => createElement(Component as any, props),\n      ])\n  );\n\n  return <Fragment>{getHTML(content, wrappedComponents)}</Fragment>;\n};\n\n/**\n * Hook that returns a function to render HTML content.\n *\n * This hook considers the configuration from the `HTMLProvider` context if available,\n * falling back to the provided components.\n */\nexport const useHTMLRenderer = ({ components }: RenderHTMLProps = {}) => {\n  const context = useHTMLContext();\n\n  return (content: string) => {\n    return renderHTML(content, {\n      components: {\n        ...context?.components,\n        ...components,\n      },\n    });\n  };\n};\n\nexport type HTMLRendererProps = RenderHTMLProps & {\n  /**\n   * The HTML content to render as a string.\n   */\n  children: string;\n};\n\n/**\n * React component that renders HTML-like content to JSX.\n *\n * This component uses the components from the `HTMLProvider` context\n * if available.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n  children = '',\n  components,\n}) => {\n  const render = useHTMLRenderer({ components });\n\n  return render(children);\n};\n"],"mappings":";;;;;;;;;AAYA,MAAM,oCAAsE;CAC1E,MAAM,aAA+C,EAAE;AAEvD,MAAK,MAAM,OAAOA,yBAChB,YAAW,QAAQ,EAAE,UAAU,GAAG,qCAClB,KAAK,OAAO,SAAS;AAGvC,QAAO;;AAGT,MAAa,wBAAwB,6BAA6B;;;;;;;AAgBlE,MAAa,cACX,SACA,EAAE,eAAgC,EAAE,KACpB;CAChB,MAAM,mBAAmB;EACvB,GAAG;EACH,GAAG;EACJ;AAYD,QAAO,2CAACC,wDAAkB,SATA,OAAO,YAC/B,OAAO,QAAQ,iBAAiB,CAC7B,QAAQ,GAAG,eAAe,UAAU,CACpC,KAAK,CAAC,KAAK,eAAe,CACzB,MACC,mCAA6B,WAAkB,MAAM,CACvD,CAAC,CACL,CAEoD,GAAY;;;;;;;;AASnE,MAAa,mBAAmB,EAAE,eAAgC,EAAE,KAAK;CACvE,MAAM,UAAUC,0CAAgB;AAEhC,SAAQ,YAAoB;AAC1B,SAAO,WAAW,SAAS,EACzB,YAAY;GACV,GAAG,SAAS;GACZ,GAAG;GACJ,EACF,CAAC;;;;;;;;;AAiBN,MAAa,gBAAuC,EAClD,WAAW,IACX,iBACI;AAGJ,QAFe,gBAAgB,EAAE,YAAY,CAAC,CAEhC,SAAS"}

package/dist/cjs/html/HTMLRendererPlugin.cjs

@@ -0,0 +1,36 @@
+'use client';
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_editor_ContentSelectorWrapper = require('../editor/ContentSelectorWrapper.cjs');
+const require_editor_useEditedContentRenderer = require('../editor/useEditedContentRenderer.cjs');
+const require_html_HTMLProvider = require('./HTMLProvider.cjs');
+const require_html_HTMLRenderer = require('./HTMLRenderer.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _intlayer_core = require("@intlayer/core");
+
+//#region src/html/HTMLRendererPlugin.tsx
+const HTMLRendererPlugin = (props) => {
+	const { dictionaryKey, keyPath, html, userComponents } = props;
+	const globalComponents = require_html_HTMLProvider.useHTMLContext()?.components || {};
+	const editedContentContext = require_editor_useEditedContentRenderer.useEditedContentRenderer({
+		dictionaryKey: dictionaryKey ?? "",
+		keyPath: keyPath ?? [],
+		children: html
+	});
+	const contentToRender = typeof editedContentContext === "string" ? editedContentContext : html;
+	const mergedComponents = {
+		...require_html_HTMLRenderer.defaultHTMLComponents,
+		...globalComponents,
+		...userComponents
+	};
+	const wrappedComponents = Object.fromEntries(Object.entries(mergedComponents).filter(([, Component]) => Component).map(([key, Component]) => [key, (props) => (0, react.createElement)(Component, props)]));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_editor_ContentSelectorWrapper.ContentSelectorRenderer, {
+		...props,
+		children: (0, _intlayer_core.getHTML)(contentToRender, wrappedComponents)
+	});
+};
+
+//#endregion
+exports.HTMLRendererPlugin = HTMLRendererPlugin;
+//# sourceMappingURL=HTMLRendererPlugin.cjs.map

package/dist/cjs/html/HTMLRendererPlugin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTMLRendererPlugin.cjs","names":["useHTMLContext","useEditedContentRenderer","defaultHTMLComponents","ContentSelectorRenderer"],"sources":["../../../src/html/HTMLRendererPlugin.tsx"],"sourcesContent":["'use client';\n\nimport { getHTML } from '@intlayer/core';\nimport type { KeyPath, Locale } from '@intlayer/types';\nimport { createElement, type FC, type ReactNode } from 'react';\nimport { ContentSelectorRenderer } from '../editor';\nimport { useEditedContentRenderer } from '../editor/useEditedContentRenderer';\nimport { useHTMLContext } from './HTMLProvider';\nimport { defaultHTMLComponents } from './HTMLRenderer';\nimport type { ReactComponentProps } from './types';\n\ntype HTMLRendererPluginProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  html: string;\n  locale?: Locale;\n  userComponents?: Record<string, any>;\n};\n\nexport const HTMLRendererPlugin: FC<HTMLRendererPluginProps> = (\n  props\n): ReactNode => {\n  const { dictionaryKey, keyPath, html, userComponents } = props;\n  const context = useHTMLContext();\n  const globalComponents = context?.components || {};\n\n  const editedContentContext = useEditedContentRenderer({\n    dictionaryKey: dictionaryKey ?? '',\n    keyPath: keyPath ?? [],\n    children: html,\n  });\n\n  const contentToRender =\n    typeof editedContentContext === 'string' ? editedContentContext : html;\n\n  const mergedComponents = {\n    ...defaultHTMLComponents,\n    ...globalComponents,\n    ...userComponents,\n  };\n\n  // Wrap all components to ensure they are rendered via React.createElement\n  // This is important because it allows React to handle the component's lifecycle,\n  // hooks, and Babel-injected variables correctly.\n  const wrappedComponents = Object.fromEntries(\n    Object.entries(mergedComponents)\n      .filter(([, Component]) => Component)\n      .map(([key, Component]) => [\n        key,\n        (props: ReactComponentProps) => createElement(Component, props),\n      ])\n  );\n\n  return (\n    <ContentSelectorRenderer {...props}>\n      {getHTML(contentToRender, wrappedComponents)}\n    </ContentSelectorRenderer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAa,sBACX,UACc;CACd,MAAM,EAAE,eAAe,SAAS,MAAM,mBAAmB;CAEzD,MAAM,mBADUA,0CAAgB,EACE,cAAc,EAAE;CAElD,MAAM,uBAAuBC,iEAAyB;EACpD,eAAe,iBAAiB;EAChC,SAAS,WAAW,EAAE;EACtB,UAAU;EACX,CAAC;CAEF,MAAM,kBACJ,OAAO,yBAAyB,WAAW,uBAAuB;CAEpE,MAAM,mBAAmB;EACvB,GAAGC;EACH,GAAG;EACH,GAAG;EACJ;CAKD,MAAM,oBAAoB,OAAO,YAC/B,OAAO,QAAQ,iBAAiB,CAC7B,QAAQ,GAAG,eAAe,UAAU,CACpC,KAAK,CAAC,KAAK,eAAe,CACzB,MACC,mCAA6C,WAAW,MAAM,CAChE,CAAC,CACL;AAED,QACE,2CAACC;EAAwB,GAAI;wCAClB,iBAAiB,kBAAkB;GACpB"}

package/dist/cjs/html/index.cjs

@@ -0,0 +1,11 @@
+const require_html_HTMLProvider = require('./HTMLProvider.cjs');
+const require_html_HTMLRenderer = require('./HTMLRenderer.cjs');
+const require_html_HTMLRendererPlugin = require('./HTMLRendererPlugin.cjs');
+
+exports.HTMLProvider = require_html_HTMLProvider.HTMLProvider;
+exports.HTMLRenderer = require_html_HTMLRenderer.HTMLRenderer;
+exports.HTMLRendererPlugin = require_html_HTMLRendererPlugin.HTMLRendererPlugin;
+exports.defaultHTMLComponents = require_html_HTMLRenderer.defaultHTMLComponents;
+exports.renderHTML = require_html_HTMLRenderer.renderHTML;
+exports.useHTMLContext = require_html_HTMLProvider.useHTMLContext;
+exports.useHTMLRenderer = require_html_HTMLRenderer.useHTMLRenderer;

package/dist/cjs/index.cjs

@@ -10,28 +10,40 @@ const require_getIntlayer = require('./getIntlayer.cjs');
 const require_client_useIntlayer = require('./client/useIntlayer.cjs');
 const require_client_useLocale = require('./client/useLocale.cjs');
 const require_client_useLocaleBase = require('./client/useLocaleBase.cjs');
+const require_html_HTMLProvider = require('./html/HTMLProvider.cjs');
+const require_html_HTMLRenderer = require('./html/HTMLRenderer.cjs');
 const require_markdown_MarkdownProvider = require('./markdown/MarkdownProvider.cjs');
+const require_markdown_MarkdownRenderer = require('./markdown/MarkdownRenderer.cjs');
 const require_getDictionary = require('./getDictionary.cjs');
+const require_client_format_useIntl = require('./client/format/useIntl.cjs');
 
+exports.HTMLProvider = require_html_HTMLProvider.HTMLProvider;
+exports.HTMLRenderer = require_html_HTMLRenderer.HTMLRenderer;
 exports.IntlayerClientContext = require_client_IntlayerProvider.IntlayerClientContext;
 exports.IntlayerProvider = require_client_IntlayerProvider.IntlayerProvider;
 exports.IntlayerProviderContent = require_client_IntlayerProvider.IntlayerProviderContent;
 exports.MarkdownProvider = require_markdown_MarkdownProvider.MarkdownProvider;
+exports.MarkdownRenderer = require_markdown_MarkdownRenderer.MarkdownRenderer;
 exports.getDictionary = require_getDictionary.getDictionary;
 exports.getIntlayer = require_getIntlayer.getIntlayer;
 exports.localeCookie = require_client_useLocaleStorage.localeCookie;
 exports.localeInStorage = require_client_useLocaleStorage.localeInStorage;
+exports.renderHTML = require_html_HTMLRenderer.renderHTML;
+exports.renderMarkdown = require_markdown_MarkdownRenderer.renderMarkdown;
 exports.setLocaleCookie = require_client_useLocaleStorage.setLocaleCookie;
 exports.setLocaleInStorage = require_client_useLocaleStorage.setLocaleInStorage;
 exports.t = require_client_t.t;
 exports.useDictionary = require_client_useDictionary.useDictionary;
 exports.useDictionaryAsync = require_client_useDictionaryAsync.useDictionaryAsync;
 exports.useDictionaryDynamic = require_client_useDictionaryDynamic.useDictionaryDynamic;
+exports.useHTMLRenderer = require_html_HTMLRenderer.useHTMLRenderer;
 exports.useI18n = require_client_useI18n.useI18n;
+exports.useIntl = require_client_format_useIntl.useIntl;
 exports.useIntlayer = require_client_useIntlayer.useIntlayer;
 exports.useIntlayerContext = require_client_IntlayerProvider.useIntlayerContext;
 exports.useLoadDynamic = require_client_useLoadDynamic.useLoadDynamic;
 exports.useLocale = require_client_useLocale.useLocale;
 exports.useLocaleBase = require_client_useLocaleBase.useLocaleBase;
 exports.useLocaleCookie = require_client_useLocaleStorage.useLocaleCookie;
-exports.useLocaleStorage = require_client_useLocaleStorage.useLocaleStorage;
+exports.useLocaleStorage = require_client_useLocaleStorage.useLocaleStorage;
+exports.useMarkdownRenderer = require_markdown_MarkdownRenderer.useMarkdownRenderer;

package/dist/cjs/markdown/MarkdownProvider.cjs

@@ -1,16 +1,87 @@
 'use client';
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_markdown_processor = require('./processor.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/markdown/MarkdownProvider.tsx
-const MarkdownContext = (0, react.createContext)({ renderMarkdown: (markdown) => markdown });
+const MarkdownContext = (0, react.createContext)(void 0);
 const useMarkdownContext = () => (0, react.useContext)(MarkdownContext);
-const MarkdownProvider = ({ children, renderMarkdown }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownContext.Provider, {
-	value: { renderMarkdown },
-	children
-});
+const isRenderMarkdownOptions = (override) => {
+	return override && typeof override === "object" && ("components" in override || "wrapper" in override || "forceBlock" in override || "forceInline" in override || "preserveFrontmatter" in override || "tagfilter" in override);
+};
+const mergeOptions = (baseOptions, overrides) => {
+	if (!overrides) return baseOptions;
+	if (!isRenderMarkdownOptions(overrides)) return {
+		...baseOptions,
+		components: {
+			...baseOptions.components,
+			...overrides
+		}
+	};
+	const { components: overrideComponents, wrapper, forceBlock, forceInline, preserveFrontmatter, tagfilter, ...componentsFromRest } = overrides;
+	const components = overrideComponents || componentsFromRest;
+	return {
+		...baseOptions,
+		forceBlock: forceBlock ?? baseOptions.forceBlock,
+		forceInline: forceInline ?? baseOptions.forceInline,
+		preserveFrontmatter: preserveFrontmatter ?? baseOptions.preserveFrontmatter,
+		tagfilter: tagfilter ?? baseOptions.tagfilter,
+		wrapper: wrapper || baseOptions.wrapper,
+		forceWrapper: !!(wrapper || baseOptions.wrapper),
+		components: {
+			...baseOptions.components,
+			...components
+		}
+	};
+};
+/**
+* Provider for the MarkdownRenderer component.
+*
+* It will provide the `renderMarkdown` function to the context, which can be used to render markdown.
+*
+* ```tsx
+* const content = useIntlayer('app');
+*
+* return (
+*   <div>
+*     {content.markdown} // Will be rendered with the components and options provided to the MarkdownProvider
+*   </div>
+* );
+* ```
+*
+* @example
+* ```tsx
+* <MarkdownProvider components={{ h1: CustomHeading }}>
+*   <MarkdownRenderer>
+*     {markdownContent}
+*   </MarkdownRenderer>
+* </MarkdownProvider>
+* ```
+*/
+const MarkdownProvider = ({ children, components, wrapper, forceBlock, forceInline, preserveFrontmatter, tagfilter, renderMarkdown: customRenderFn }) => {
+	const baseOptions = {
+		components,
+		forceBlock,
+		forceInline,
+		wrapper,
+		forceWrapper: !!wrapper,
+		preserveFrontmatter,
+		tagfilter
+	};
+	const defaultRenderMarkdown = (markdown, overrides) => {
+		return require_markdown_processor.compiler(markdown, mergeOptions(baseOptions, overrides));
+	};
+	const customRenderMarkdownWrapper = (markdown, overrides) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownContext.Provider, {
+		value: void 0,
+		children: customRenderFn?.(markdown, overrides)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownContext.Provider, {
+		value: { renderMarkdown: customRenderFn ? customRenderMarkdownWrapper : defaultRenderMarkdown },
+		children
+	});
+};
 
 //#endregion
 exports.MarkdownProvider = MarkdownProvider;