locl-js 1.0.2 → 2.0.0

package/dist/react.d.ts

@@ -0,0 +1,120 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { S as ScopeType, N as NestedKeyOf, T as TranslationObjectFor, P as PluralKeys, I as InterpolationOptions, a as LocL, c as Language } from './LocL-fN9Yari8.js';
+
+type TransKey<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>, S extends ScopeType<T, Fallback> = undefined> = (NestedKeyOf<TranslationObjectFor<S, T, Fallback>> | PluralKeys<S, T, Fallback>) & string;
+interface TransProps<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>, S extends ScopeType<T, Fallback> = undefined, K extends string = TransKey<T, Fallback, S>> {
+    /** The translation key to look up (with IDE autocomplete + fallback tolerance) */
+    i18nKey: K | (string & {});
+    /** Values to interpolate into variable placeholders ({name}, {{name}}) */
+    values?: InterpolationOptions;
+    /**
+     * Component elements or functions to substitute for `<tag>content</tag>`
+     * @example
+     * components={{
+     *   bold: <strong />,
+     *   link: (content) => <a href="/terms">{content}</a>
+     * }}
+     */
+    components?: Record<string, ReactElement | ((content: ReactNode) => ReactNode)>;
+    /** Optional custom translator instance if not using LocLContext */
+    translator?: LocL<any, any, any, any, any>;
+    /** Optional namespace scope for the translation key */
+    scope?: S;
+    /** Fallback string if key is not found */
+    fallback?: string;
+}
+/**
+ * Renders translated text with rich React component interpolation without `dangerouslySetInnerHTML`.
+ * Subscribes reactively to language updates and supports strict type checking and autocompletion.
+ * @example
+ * ```tsx
+ * <Trans
+ *   i18nKey="agreement"
+ *   values={{ name: "Alice" }}
+ *   components={{
+ *     bold: <strong />,
+ *     link: <a href="/terms" />
+ *   }}
+ * />
+ * ```
+ */
+declare function Trans<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>, S extends ScopeType<T, Fallback> = undefined, K extends string = TransKey<T, Fallback, S>>({ i18nKey, values, components, translator: customTranslator, scope, fallback }: TransProps<T, Fallback, S, K>): ReactElement;
+
+/**
+ * Global type registry for LocL React.
+ * Augment this interface in user application code for zero-boilerplate,
+ * 100% type-safe autocompletion across all hooks and components:
+ *
+ * @example
+ * ```ts
+ * declare module "locl-js/react" {
+ *   interface LocLRegister {
+ *     translator: typeof translator;
+ *   }
+ * }
+ * ```
+ */
+interface LocLRegister {
+}
+type DefaultResources = LocLRegister extends {
+    translator: LocL<infer Res, any, any, any, any>;
+} ? Res : LocLRegister extends {
+    resources: infer Res extends Record<string, any>;
+} ? Res : Record<string, any>;
+type DefaultFallback<T = DefaultResources> = LocLRegister extends {
+    translator: LocL<any, infer FB, any, any, any>;
+} ? FB : LocLRegister extends {
+    fallbackLanguage: infer FB extends string;
+} ? FB : [keyof T & string] extends [never] ? string : keyof T & string;
+declare const LocLContext: React.Context<LocL<any, any, any, any, any> | null>;
+interface LocLProviderProps<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>, S extends ScopeType<T, Fallback> = undefined> {
+    translator: LocL<T, Fallback, S, any, any>;
+    children: ReactNode;
+}
+declare function LocLProvider<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>, S extends ScopeType<T, Fallback> = undefined>({ translator, children }: LocLProviderProps<T, Fallback, S>): React.JSX.Element;
+interface UseLocLResult<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>, S extends ScopeType<T, Fallback> = undefined> {
+    translator: LocL<T, Fallback, S, any, any>;
+    language: Language<T>;
+    changeLanguage: (lang: Language<T>) => void;
+    t: LocL<T, Fallback, S>["t"];
+    plural: LocL<T, Fallback, S>["plural"];
+    rich: LocL<T, Fallback, S>["rich"];
+    format: LocL<T, Fallback, S>["format"];
+}
+interface UseTranslationResult<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>, S extends ScopeType<T, Fallback> = undefined> extends UseLocLResult<T, Fallback, S> {
+}
+declare function useLocL<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>, S extends ScopeType<T, Fallback> = undefined>(customTranslator?: LocL<any, any, any, any, any>): UseLocLResult<T, Fallback, S>;
+declare function useTranslation<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>>(scope?: undefined, customTranslator?: LocL<any, any, any, any, any>): UseTranslationResult<T, Fallback, undefined>;
+declare function useTranslation<T extends Record<string, any> = DefaultResources, Fallback extends keyof T & string = DefaultFallback<T>, S extends ScopeType<T, Fallback> = ScopeType<T, Fallback>>(scope: S, customTranslator?: LocL<any, any, any, any, any>): UseTranslationResult<T, Fallback, S>;
+interface BoundLocLProviderProps<T extends Record<string, any>, Fallback extends keyof T & string> {
+    /** Optional override translator; defaults to the instance passed to `createLocLReact` */
+    translator?: LocL<any, any, any, any, any>;
+    children: ReactNode;
+}
+interface LocLReactSuite<T extends Record<string, any>, Fallback extends keyof T & string> {
+    LocLContext: React.Context<LocL<any, any, any, any, any> | null>;
+    LocLProvider: (props: BoundLocLProviderProps<T, Fallback>) => ReactElement;
+    useLocL: <S extends ScopeType<T, Fallback> = undefined>(customTranslator?: LocL<any, any, any, any, any>) => UseLocLResult<T, Fallback, S>;
+    useTranslation: {
+        (scope?: undefined, customTranslator?: LocL<any, any, any, any, any>): UseTranslationResult<T, Fallback, undefined>;
+        <S extends ScopeType<T, Fallback>>(scope: S, customTranslator?: LocL<any, any, any, any, any>): UseTranslationResult<T, Fallback, S>;
+        <S extends ScopeType<T, Fallback> = any>(scope?: S, customTranslator?: LocL<any, any, any, any, any>): UseTranslationResult<T, Fallback, S>;
+    };
+    Trans: <S extends ScopeType<T, Fallback> = undefined, K extends string = TransKey<T, Fallback, S>>(props: TransProps<T, Fallback, S, K>) => ReactElement;
+    translator: LocL<T, Fallback, any, any, any>;
+}
+/**
+ * Creates a pre-bound, zero-declaration React integration suite for a LocL translator instance.
+ *
+ * Inifers resources, fallback language, translation keys, and namespace scopes
+ * automatically without requiring `.d.ts` module declarations or manual generics.
+ *
+ * @example
+ * ```ts
+ * // i18n-react.ts
+ * export const { LocLProvider, useTranslation, useLocL, Trans } = createLocLReact(translator);
+ * ```
+ */
+declare function createLocLReact<T extends Record<string, any>, Fallback extends keyof T & string>(defaultTranslator: LocL<T, Fallback, any, any, any>): LocLReactSuite<T, Fallback>;
+
+export { type BoundLocLProviderProps, type DefaultFallback, type DefaultResources, LocLContext, LocLProvider, type LocLProviderProps, type LocLReactSuite, type LocLRegister, Trans, type TransKey, type TransProps, type UseLocLResult, type UseTranslationResult, createLocLReact, useLocL, useTranslation };

package/dist/react.js

@@ -0,0 +1,228 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.tsx
+var react_exports = {};
+__export(react_exports, {
+  LocLContext: () => LocLContext,
+  LocLProvider: () => LocLProvider,
+  Trans: () => Trans,
+  createLocLReact: () => createLocLReact,
+  useLocL: () => useLocL,
+  useTranslation: () => useTranslation
+});
+module.exports = __toCommonJS(react_exports);
+var import_react2 = require("react");
+
+// src/react/Trans.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function Trans({
+  i18nKey,
+  values,
+  components = {},
+  translator: customTranslator,
+  scope,
+  fallback
+}) {
+  const contextTranslator = (0, import_react.useContext)(LocLContext);
+  const activeTranslator = customTranslator ?? contextTranslator;
+  const getSnapshot = () => activeTranslator ? activeTranslator.getLanguage() : "";
+  const language = (0, import_react.useSyncExternalStore)(
+    (onStoreChange) => activeTranslator ? activeTranslator.subscribe(onStoreChange) : () => {
+    },
+    getSnapshot,
+    getSnapshot
+  );
+  const scopeKey = Array.isArray(scope) ? scope.join("|") : scope;
+  const scopedTranslator = (0, import_react.useMemo)(() => {
+    if (!activeTranslator) return null;
+    return scope !== void 0 ? activeTranslator.withConfig({ scope }) : activeTranslator;
+  }, [activeTranslator, scopeKey, language]);
+  const raw = (0, import_react.useMemo)(() => {
+    if (!scopedTranslator) {
+      return String(fallback ?? i18nKey);
+    }
+    const tInstance = scopedTranslator;
+    const res = tInstance.t(i18nKey, values);
+    const keyExists = tInstance.get(i18nKey) !== void 0;
+    if (keyExists) {
+      return String(res);
+    }
+    return String(fallback ?? i18nKey);
+  }, [scopedTranslator, i18nKey, values, fallback, language]);
+  const tagRegex = /<([a-zA-Z0-9_-]+)>([\s\S]*?)<\/\1>/g;
+  const nodes = [];
+  let lastIndex = 0;
+  let match;
+  let counter = 0;
+  while ((match = tagRegex.exec(raw)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(raw.slice(lastIndex, match.index));
+    }
+    const tagName = match[1];
+    const content = match[2];
+    const component = components[tagName];
+    if ((0, import_react.isValidElement)(component)) {
+      nodes.push(
+        (0, import_react.cloneElement)(component, { key: `trans-${tagName}-${counter++}` }, content)
+      );
+    } else if (typeof component === "function") {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: component(content) }, `trans-${tagName}-${counter++}`)
+      );
+    } else {
+      nodes.push(match[0]);
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < raw.length) {
+    nodes.push(raw.slice(lastIndex));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: nodes });
+}
+
+// src/react/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LocLContext = (0, import_react2.createContext)(null);
+function LocLProvider({ translator, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LocLContext.Provider, { value: translator, children });
+}
+function useLocL(customTranslator) {
+  const contextTranslator = (0, import_react2.useContext)(LocLContext);
+  const translator = customTranslator ?? contextTranslator;
+  if (!translator) {
+    throw new Error(
+      "[LocL] `useLocL` or `useTranslation` must be used within a `<LocLProvider>` or passed an explicit translator instance."
+    );
+  }
+  const getSnapshot = () => translator.getLanguage();
+  const language = (0, import_react2.useSyncExternalStore)(
+    (onStoreChange) => translator.subscribe(onStoreChange),
+    getSnapshot,
+    getSnapshot
+  );
+  return {
+    translator,
+    language,
+    changeLanguage: (lang) => translator.changeLanguage(lang),
+    t: translator.t.bind(translator),
+    plural: translator.plural.bind(translator),
+    rich: translator.rich.bind(translator),
+    format: translator.format.bind(translator)
+  };
+}
+function useTranslation(scope, customTranslator) {
+  const { translator, language, changeLanguage } = useLocL(customTranslator);
+  const scopeKey = Array.isArray(scope) ? scope.join("|") : scope;
+  const scopedTranslator = (0, import_react2.useMemo)(() => {
+    return scope !== void 0 ? translator.withConfig({ scope }) : translator;
+  }, [translator, scopeKey]);
+  return {
+    translator: scopedTranslator,
+    language,
+    changeLanguage,
+    t: scopedTranslator.t.bind(scopedTranslator),
+    plural: scopedTranslator.plural.bind(scopedTranslator),
+    rich: scopedTranslator.rich.bind(scopedTranslator),
+    format: scopedTranslator.format.bind(scopedTranslator)
+  };
+}
+function createLocLReact(defaultTranslator) {
+  const BoundContext = (0, import_react2.createContext)(null);
+  function BoundLocLProvider({
+    translator = defaultTranslator,
+    children
+  }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LocLContext.Provider, { value: translator, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BoundContext.Provider, { value: translator, children }) });
+  }
+  function useBoundLocL(customTranslator) {
+    const contextTranslator = (0, import_react2.useContext)(BoundContext);
+    const translator = customTranslator ?? contextTranslator ?? defaultTranslator;
+    const getSnapshot = () => translator.getLanguage();
+    const language = (0, import_react2.useSyncExternalStore)(
+      (onStoreChange) => translator.subscribe(onStoreChange),
+      getSnapshot,
+      getSnapshot
+    );
+    return {
+      translator,
+      language,
+      changeLanguage: (lang) => translator.changeLanguage(lang),
+      t: translator.t.bind(translator),
+      plural: translator.plural.bind(translator),
+      rich: translator.rich.bind(translator),
+      format: translator.format.bind(translator)
+    };
+  }
+  function useBoundTranslation(scope, customTranslator) {
+    const { translator, language, changeLanguage } = useBoundLocL(customTranslator);
+    const scopeKey = Array.isArray(scope) ? scope.join("|") : scope;
+    const scopedTranslator = (0, import_react2.useMemo)(() => {
+      return scope !== void 0 ? translator.withConfig({ scope }) : translator;
+    }, [translator, scopeKey]);
+    return {
+      translator: scopedTranslator,
+      language,
+      changeLanguage,
+      t: scopedTranslator.t.bind(scopedTranslator),
+      plural: scopedTranslator.plural.bind(scopedTranslator),
+      rich: scopedTranslator.rich.bind(scopedTranslator),
+      format: scopedTranslator.format.bind(scopedTranslator)
+    };
+  }
+  function BoundTrans(props) {
+    const contextTranslator = (0, import_react2.useContext)(BoundContext);
+    const activeTranslator = props.translator ?? contextTranslator ?? defaultTranslator;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Trans,
+      {
+        ...props,
+        translator: activeTranslator
+      }
+    );
+  }
+  return {
+    LocLContext: BoundContext,
+    LocLProvider: BoundLocLProvider,
+    useLocL: useBoundLocL,
+    useTranslation: useBoundTranslation,
+    Trans: BoundTrans,
+    translator: defaultTranslator
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LocLContext,
+  LocLProvider,
+  Trans,
+  createLocLReact,
+  useLocL,
+  useTranslation
+});

package/dist/react.mjs

@@ -0,0 +1,188 @@
+// src/react/index.tsx
+import { createContext, useContext as useContext2, useSyncExternalStore as useSyncExternalStore2, useMemo as useMemo2 } from "react";
+
+// src/react/Trans.tsx
+import React, { isValidElement, cloneElement, useContext, useMemo, useSyncExternalStore } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+function Trans({
+  i18nKey,
+  values,
+  components = {},
+  translator: customTranslator,
+  scope,
+  fallback
+}) {
+  const contextTranslator = useContext(LocLContext);
+  const activeTranslator = customTranslator ?? contextTranslator;
+  const getSnapshot = () => activeTranslator ? activeTranslator.getLanguage() : "";
+  const language = useSyncExternalStore(
+    (onStoreChange) => activeTranslator ? activeTranslator.subscribe(onStoreChange) : () => {
+    },
+    getSnapshot,
+    getSnapshot
+  );
+  const scopeKey = Array.isArray(scope) ? scope.join("|") : scope;
+  const scopedTranslator = useMemo(() => {
+    if (!activeTranslator) return null;
+    return scope !== void 0 ? activeTranslator.withConfig({ scope }) : activeTranslator;
+  }, [activeTranslator, scopeKey, language]);
+  const raw = useMemo(() => {
+    if (!scopedTranslator) {
+      return String(fallback ?? i18nKey);
+    }
+    const tInstance = scopedTranslator;
+    const res = tInstance.t(i18nKey, values);
+    const keyExists = tInstance.get(i18nKey) !== void 0;
+    if (keyExists) {
+      return String(res);
+    }
+    return String(fallback ?? i18nKey);
+  }, [scopedTranslator, i18nKey, values, fallback, language]);
+  const tagRegex = /<([a-zA-Z0-9_-]+)>([\s\S]*?)<\/\1>/g;
+  const nodes = [];
+  let lastIndex = 0;
+  let match;
+  let counter = 0;
+  while ((match = tagRegex.exec(raw)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(raw.slice(lastIndex, match.index));
+    }
+    const tagName = match[1];
+    const content = match[2];
+    const component = components[tagName];
+    if (isValidElement(component)) {
+      nodes.push(
+        cloneElement(component, { key: `trans-${tagName}-${counter++}` }, content)
+      );
+    } else if (typeof component === "function") {
+      nodes.push(
+        /* @__PURE__ */ jsx(React.Fragment, { children: component(content) }, `trans-${tagName}-${counter++}`)
+      );
+    } else {
+      nodes.push(match[0]);
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < raw.length) {
+    nodes.push(raw.slice(lastIndex));
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes });
+}
+
+// src/react/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LocLContext = createContext(null);
+function LocLProvider({ translator, children }) {
+  return /* @__PURE__ */ jsx2(LocLContext.Provider, { value: translator, children });
+}
+function useLocL(customTranslator) {
+  const contextTranslator = useContext2(LocLContext);
+  const translator = customTranslator ?? contextTranslator;
+  if (!translator) {
+    throw new Error(
+      "[LocL] `useLocL` or `useTranslation` must be used within a `<LocLProvider>` or passed an explicit translator instance."
+    );
+  }
+  const getSnapshot = () => translator.getLanguage();
+  const language = useSyncExternalStore2(
+    (onStoreChange) => translator.subscribe(onStoreChange),
+    getSnapshot,
+    getSnapshot
+  );
+  return {
+    translator,
+    language,
+    changeLanguage: (lang) => translator.changeLanguage(lang),
+    t: translator.t.bind(translator),
+    plural: translator.plural.bind(translator),
+    rich: translator.rich.bind(translator),
+    format: translator.format.bind(translator)
+  };
+}
+function useTranslation(scope, customTranslator) {
+  const { translator, language, changeLanguage } = useLocL(customTranslator);
+  const scopeKey = Array.isArray(scope) ? scope.join("|") : scope;
+  const scopedTranslator = useMemo2(() => {
+    return scope !== void 0 ? translator.withConfig({ scope }) : translator;
+  }, [translator, scopeKey]);
+  return {
+    translator: scopedTranslator,
+    language,
+    changeLanguage,
+    t: scopedTranslator.t.bind(scopedTranslator),
+    plural: scopedTranslator.plural.bind(scopedTranslator),
+    rich: scopedTranslator.rich.bind(scopedTranslator),
+    format: scopedTranslator.format.bind(scopedTranslator)
+  };
+}
+function createLocLReact(defaultTranslator) {
+  const BoundContext = createContext(null);
+  function BoundLocLProvider({
+    translator = defaultTranslator,
+    children
+  }) {
+    return /* @__PURE__ */ jsx2(LocLContext.Provider, { value: translator, children: /* @__PURE__ */ jsx2(BoundContext.Provider, { value: translator, children }) });
+  }
+  function useBoundLocL(customTranslator) {
+    const contextTranslator = useContext2(BoundContext);
+    const translator = customTranslator ?? contextTranslator ?? defaultTranslator;
+    const getSnapshot = () => translator.getLanguage();
+    const language = useSyncExternalStore2(
+      (onStoreChange) => translator.subscribe(onStoreChange),
+      getSnapshot,
+      getSnapshot
+    );
+    return {
+      translator,
+      language,
+      changeLanguage: (lang) => translator.changeLanguage(lang),
+      t: translator.t.bind(translator),
+      plural: translator.plural.bind(translator),
+      rich: translator.rich.bind(translator),
+      format: translator.format.bind(translator)
+    };
+  }
+  function useBoundTranslation(scope, customTranslator) {
+    const { translator, language, changeLanguage } = useBoundLocL(customTranslator);
+    const scopeKey = Array.isArray(scope) ? scope.join("|") : scope;
+    const scopedTranslator = useMemo2(() => {
+      return scope !== void 0 ? translator.withConfig({ scope }) : translator;
+    }, [translator, scopeKey]);
+    return {
+      translator: scopedTranslator,
+      language,
+      changeLanguage,
+      t: scopedTranslator.t.bind(scopedTranslator),
+      plural: scopedTranslator.plural.bind(scopedTranslator),
+      rich: scopedTranslator.rich.bind(scopedTranslator),
+      format: scopedTranslator.format.bind(scopedTranslator)
+    };
+  }
+  function BoundTrans(props) {
+    const contextTranslator = useContext2(BoundContext);
+    const activeTranslator = props.translator ?? contextTranslator ?? defaultTranslator;
+    return /* @__PURE__ */ jsx2(
+      Trans,
+      {
+        ...props,
+        translator: activeTranslator
+      }
+    );
+  }
+  return {
+    LocLContext: BoundContext,
+    LocLProvider: BoundLocLProvider,
+    useLocL: useBoundLocL,
+    useTranslation: useBoundTranslation,
+    Trans: BoundTrans,
+    translator: defaultTranslator
+  };
+}
+export {
+  LocLContext,
+  LocLProvider,
+  Trans,
+  createLocLReact,
+  useLocL,
+  useTranslation
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "locl-js",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Modern TypeScript internationalization (i18n) library with type-safety, performance, and backend usability",
   "license": "MIT",
   "author": "Sztrida Sámuel <sztsam@gmail.com>",
@@ -9,8 +9,27 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.cjs"
+    },
+    "./compat": {
+      "types": "./dist/compat.d.ts",
+      "import": "./dist/compat.mjs",
+      "require": "./dist/compat.cjs"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
     }
   },
   "repository": {
@@ -26,7 +45,11 @@
   "devDependencies": {
     "@types/jest": "^30.0.0",
     "@types/node": "^24.5.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "jest": "^30.2.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.2",
     "tsup": "^8.5.1",