@intl-party/react 1.1.1 → 1.1.4

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 IntlParty Team
+Copyright (c) 2025-2026 IntlParty Team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -0,0 +1,473 @@
+# @intl-party/react
+
+**React integration for IntlParty with perfect TypeScript support and developer experience.**
+
+## ✨ Features
+
+- **⚛️ React Hooks**: `useTranslations`, `useLocale`, `useNamespace`
+- **🎯 Context Provider**: `I18nProvider` for app-wide i18n state
+- **🧩 Components**: `Trans`, `LocaleSelector` for declarative translations
+- **🔄 Real-time Updates**: Automatic re-renders when locale changes
+- **🔒 Type-Safe**: Full TypeScript support with auto-completion
+- **⚡ Performance Optimized**: Minimal re-renders and efficient caching
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+npm install @intl-party/react @intl-party/core
+```
+
+### Basic Usage
+
+```tsx
+import React from "react";
+import { I18nProvider, useTranslations } from "@intl-party/react";
+import { createI18n } from "@intl-party/core";
+
+// Create i18n instance
+const i18n = createI18n({
+  locales: ["en", "es", "fr"],
+  defaultLocale: "en",
+  namespaces: ["common"],
+});
+
+function App() {
+  return (
+    <I18nProvider i18n={i18n}>
+      <Welcome />
+    </I18nProvider>
+  );
+}
+
+function Welcome() {
+  const t = useTranslations("common");
+
+  return (
+    <div>
+      <h1>{t("welcome")}</h1>
+      <p>{t("greeting", { interpolation: { name: "World" } })}</p>
+    </div>
+  );
+}
+```
+
+## 🎯 API Reference
+
+### `I18nProvider`
+
+Provides i18n context to the React component tree.
+
+```tsx
+<I18nProvider
+  i18n={i18nInstance}
+  initialLocale="en"
+  initialNamespace="common"
+  loadingComponent={<Loading />}
+  fallbackComponent={<Error />}
+>
+  {children}
+</I18nProvider>
+```
+
+#### Props
+
+```typescript
+interface I18nProviderProps {
+  children: ReactNode;
+  i18n?: I18nInstance; // I18n instance
+  config?: I18nConfig; // Config (creates instance if not provided)
+  initialLocale?: Locale; // Initial locale
+  initialNamespace?: Namespace; // Initial namespace
+  loadingComponent?: ReactNode; // Loading component
+  fallbackComponent?: ReactNode; // Error fallback component
+  onLocaleChange?: (locale: Locale) => void;
+  onNamespaceChange?: (namespace: Namespace) => void;
+  onError?: (error: Error) => void;
+}
+```
+
+### Hooks
+
+#### `useTranslations(namespace?)`
+
+Main hook for using translations.
+
+```tsx
+// Without namespace (uses default)
+const t = useTranslations();
+
+// With namespace
+const t = useTranslations("common");
+
+// Usage
+t("welcome"); // "Welcome!"
+t("greeting", { interpolation: { name: "John" } }); // "Hello John!"
+t("navigation.home"); // "Home"
+```
+
+#### `useLocale()`
+
+Get and set the current locale.
+
+```tsx
+function LocaleComponent() {
+  const [locale, setLocale] = useLocale();
+
+  return (
+    <div>
+      <p>Current locale: {locale}</p>
+      <button onClick={() => setLocale("es")}>Español</button>
+      <button onClick={() => setLocale("fr")}>Français</button>
+    </div>
+  );
+}
+```
+
+#### `useNamespace()`
+
+Get and set the current namespace.
+
+```tsx
+function NamespaceComponent() {
+  const [namespace, setNamespace] = useNamespace();
+
+  return (
+    <div>
+      <p>Current namespace: {namespace}</p>
+      <button onClick={() => setNamespace("navigation")}>Navigation</button>
+      <button onClick={() => setNamespace("auth")}>Auth</button>
+    </div>
+  );
+}
+```
+
+#### `useI18nContext()`
+
+Access the full i18n context.
+
+```tsx
+function AdvancedComponent() {
+  const { i18n, locale, namespace, t, setLocale, setNamespace } =
+    useI18nContext();
+
+  return (
+    <div>
+      <p>Locale: {locale}</p>
+      <p>Namespace: {namespace}</p>
+      <button
+        onClick={() => i18n.addTranslations("en", "common", { new: "Key" })}
+      >
+        Add Translation
+      </button>
+    </div>
+  );
+}
+```
+
+## 🧩 Components
+
+### `Trans`
+
+Component for translations with rich text and interpolation.
+
+```tsx
+import { Trans } from "@intl-party/react";
+
+function RichText() {
+  return (
+    <Trans
+      i18nKey="rich.greeting"
+      interpolation={{ name: "John" }}
+      components={{
+        bold: <strong />,
+        link: <a href="/about" />,
+      }}
+    >
+      Hello <bold>{{ name }}</bold>! Learn more <link>about</link>.
+    </Trans>
+  );
+}
+```
+
+### `LocaleSelector`
+
+Pre-built locale selector component.
+
+```tsx
+import { LocaleSelector } from "@intl-party/react";
+
+function Header() {
+  return (
+    <LocaleSelector
+      locales={[
+        { code: "en", name: "English", flag: "🇺🇸" },
+        { code: "es", name: "Español", flag: "🇪🇸" },
+        { code: "fr", name: "Français", flag: "🇫🇷" },
+      ]}
+      variant="flags" // or "dropdown" or "compact"
+    />
+  );
+}
+```
+
+## 🎨 Advanced Usage
+
+### Typed Translations
+
+```typescript
+interface AppTranslations {
+  common: {
+    welcome: string;
+    navigation: {
+      home: string;
+      about: string;
+    };
+  };
+  auth: {
+    login: string;
+    register: string;
+  };
+}
+
+// Create typed i18n instance
+const i18n = createI18n<AppTranslations>({
+  locales: ["en", "es", "fr"],
+  defaultLocale: "en",
+  namespaces: ["common", "auth"],
+});
+
+// Use with full type safety
+function TypedComponent() {
+  const t = useTranslations<AppTranslations["common"]>("common");
+
+  return (
+    <div>
+      {t("welcome")} {/* ✅ Type-safe */}
+      {t("navigation.home")} {/* ✅ Type-safe */}
+      {t("invalid.key")} {/* ❌ TypeScript error */}
+    </div>
+  );
+}
+```
+
+### Multiple Namespaces
+
+```tsx
+function MultiNamespaceComponent() {
+  const commonT = useTranslations("common");
+  const authT = useTranslations("auth");
+
+  return (
+    <div>
+      <h1>{commonT("welcome")}</h1>
+      <button>{authT("login")}</button>
+    </div>
+  );
+}
+```
+
+### Server-Side Rendering
+
+```tsx
+// Server component (Next.js App Router)
+async function ServerPage() {
+  const t = await getServerTranslations("common");
+
+  return (
+    <div>
+      <h1>{t("welcome")}</h1>
+    </div>
+  );
+}
+```
+
+### Dynamic Namespace Loading
+
+```tsx
+function DynamicComponent({ namespace }: { namespace: string }) {
+  const t = useTranslations(namespace);
+
+  return (
+    <div>
+      <h2>Namespace: {namespace}</h2>
+      <p>{t("title")}</p>
+    </div>
+  );
+}
+```
+
+## 🔧 Utilities
+
+### `createNamespaceHOC(namespace)`
+
+Higher-order component for automatic namespacing.
+
+```tsx
+import { createNamespaceHOC } from "@intl-party/react";
+
+const withNavigation = createNamespaceHOC("navigation");
+
+function NavigationComponent({ t }) {
+  return (
+    <nav>
+      <a href="/">{t("home")}</a>
+      <a href="/about">{t("about")}</a>
+    </nav>
+  );
+}
+
+export default withNavigation(NavigationComponent);
+```
+
+### `useMultipleTranslations(namespaces)`
+
+Use multiple namespaces at once.
+
+```tsx
+function MultiNamespaceComponent() {
+  const { common, auth, navigation } = useMultipleTranslations([
+    "common",
+    "auth",
+    "navigation",
+  ]);
+
+  return (
+    <div>
+      <h1>{common("welcome")}</h1>
+      <button>{auth("login")}</button>
+      <nav>{navigation("home")}</nav>
+    </div>
+  );
+}
+```
+
+## 🎨 Styling
+
+### Theme Support
+
+```tsx
+import { I18nProvider } from "@intl-party/react";
+
+function ThemedApp() {
+  return (
+    <I18nProvider
+      i18n={i18n}
+      theme="dark" // or "light", "auto"
+    >
+      <App />
+    </I18nProvider>
+  );
+}
+```
+
+### Custom Components
+
+```tsx
+// Custom translation component
+function CustomTrans({ i18nKey, interpolation, components }) {
+  const t = useTranslations();
+
+  return (
+    <span className="translation">
+      {t(i18nKey, { interpolation, components })}
+    </span>
+  );
+}
+```
+
+## 🔄 Migration from react-i18next
+
+### Simple Migration
+
+```tsx
+// react-i18next
+import { useTranslation } from "react-i18next";
+const { t } = useTranslation();
+
+// intl-party/react
+import { useTranslations } from "@intl-party/react";
+const t = useTranslations();
+```
+
+### Benefits of switching:
+
+- ✅ **Better TypeScript**: No more `t('key' as any)`
+- ✅ **Simpler API**: Less boilerplate code
+- ✅ **Performance**: Optimized re-rendering
+- ✅ **Modern**: Built for React 18+ and concurrent features
+
+## 📦 Exports
+
+```typescript
+// Provider and context
+export {
+  I18nProvider,
+  TypedI18nProvider,
+  ScopedI18nProvider,
+  useI18nContext,
+  useTypedI18nContext,
+  withI18n,
+  type I18nProviderProps,
+  type TypedI18nProviderProps,
+  type ScopedI18nProviderProps,
+  type I18nContextValue,
+  type TypedI18nContextValue,
+};
+
+// Hooks
+export {
+  useTranslations,
+  useTypedTranslations,
+  useT,
+  useTypedT,
+  useScopedTranslations,
+  useMultipleTranslations,
+  useOptionalTranslation,
+  useTranslationWithFallback,
+  useHasTranslation,
+  useTranslationValue,
+  useInterpolatedTranslation,
+  usePluralization,
+};
+
+// Locale and namespace hooks
+export {
+  useLocale,
+  useLocaleInfo,
+  useLocaleSwitch,
+  useBrowserLocale,
+  useLocalePreference,
+  useDirection,
+  useFormatting,
+  useNamespace,
+  useNamespaceInfo,
+  useNamespaceSwitch,
+  useMultipleNamespaces,
+  useNamespacePreloading,
+};
+
+// Components
+export {
+  Trans,
+  ConditionalTrans,
+  PluralTrans,
+  RichTrans,
+  LocaleSelector,
+  FlagLocaleSelector,
+  CompactLocaleSelector,
+  AccessibleLocaleSelector,
+};
+
+// Utilities
+export { createI18nHook, createNamespaceHOC, I18nErrorBoundary };
+```
+
+## 🤝 Contributing
+
+See the [main README](../../README.md) for contribution guidelines.
+
+## 📄 License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,196 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _intl_party_core from '@intl-party/core';
+import { I18nConfig, I18nInstance, Locale, Namespace, TranslationFunction, TypedTranslationFunction, TranslationKey, TranslationOptions } from '@intl-party/core';
+export { DeepKeyOf, I18nConfig, I18nInstance, Locale, Namespace, TranslationFunction, TranslationKey, TranslationOptions, TranslationValue, Translations, TypedI18nInstance, TypedTranslationFunction } from '@intl-party/core';
+import React, { ReactNode } from 'react';
+
+interface I18nContextValue {
+    i18n: I18nInstance;
+    locale: Locale;
+    namespace: Namespace;
+    t: TranslationFunction;
+    setLocale: (locale: Locale) => void;
+    setNamespace: (namespace: Namespace) => void;
+    isLoading: boolean;
+}
+interface TypedI18nContextValue<T extends Record<string, any> = Record<string, any>> extends Omit<I18nContextValue, "t"> {
+    t: TypedTranslationFunction<T>;
+}
+interface I18nProviderProps {
+    children: ReactNode;
+    config?: I18nConfig;
+    i18n?: I18nInstance;
+    initialLocale?: Locale;
+    initialNamespace?: Namespace;
+    loadingComponent?: ReactNode;
+    fallbackComponent?: ReactNode;
+    onLocaleChange?: (locale: Locale) => void;
+    onNamespaceChange?: (namespace: Namespace) => void;
+    onError?: (error: Error) => void;
+}
+declare function I18nProvider({ children, config, i18n: externalI18n, initialLocale, initialNamespace, loadingComponent, fallbackComponent, onLocaleChange, onNamespaceChange, onError, }: I18nProviderProps): react_jsx_runtime.JSX.Element;
+declare function useI18nContext(): I18nContextValue;
+interface TypedI18nProviderProps<T extends Record<string, any>> extends Omit<I18nProviderProps, "i18n"> {
+    i18n?: I18nInstance;
+}
+declare function TypedI18nProvider<T extends Record<string, any>>({ children, ...props }: TypedI18nProviderProps<T>): react_jsx_runtime.JSX.Element;
+declare function useTypedI18nContext<T extends Record<string, any>>(): TypedI18nContextValue<T>;
+interface WithI18nProps {
+    i18n: I18nContextValue;
+}
+declare function withI18n<P extends object>(Component: React.ComponentType<P & WithI18nProps>): React.ComponentType<P>;
+interface ScopedI18nProviderProps {
+    children: ReactNode;
+    namespace: Namespace;
+    locale?: Locale;
+}
+declare function ScopedI18nProvider({ children, namespace, locale, }: ScopedI18nProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useTranslations(namespace?: Namespace): TranslationFunction;
+declare function useTypedTranslations<T extends Record<string, any>>(namespace?: Namespace): TypedTranslationFunction<T>;
+declare const useT: typeof useTranslations;
+declare const useTypedT: typeof useTypedTranslations;
+declare function useScopedTranslations(namespace: Namespace): TranslationFunction;
+declare function useMultipleTranslations(namespaces: Namespace[]): Record<Namespace, TranslationFunction>;
+declare function useOptionalTranslation(key: TranslationKey, namespace?: Namespace, options?: TranslationOptions): string | undefined;
+declare function useTranslationWithFallback(key: TranslationKey, fallback: string, namespace?: Namespace, options?: TranslationOptions): string;
+declare function useHasTranslation(): (key: TranslationKey, namespace?: Namespace) => boolean;
+declare function useTranslationValue(): (key: TranslationKey, namespace?: Namespace) => any;
+declare function useInterpolatedTranslation(key: TranslationKey, variables: Record<string, any>, namespace?: Namespace): string;
+declare function usePluralization(key: TranslationKey, count: number, namespace?: Namespace, additionalOptions?: Omit<TranslationOptions, "count">): string;
+
+declare function useLocale(): [Locale, (locale: Locale) => void];
+declare function useLocaleInfo(): {
+    current: string;
+    available: string[];
+    fallbackChain: string[];
+    isRTL: boolean;
+    direction: string;
+};
+declare function useLocaleSwitch(): {
+    switchLocale: (locale: Locale) => void;
+    isLocaleAvailable: (locale: Locale) => boolean;
+    availableLocales: string[];
+};
+declare function useBrowserLocale(): {
+    detected: string;
+    browser: string;
+    supported: boolean;
+} | null;
+declare function useLocalePreference(): {
+    current: string;
+    save: (newLocale: Locale) => void;
+    load: () => string | null;
+    clear: () => void;
+};
+declare function useDirection(): "ltr" | "rtl";
+declare function useFormatting(): {
+    formatDate: (date: Date, options?: Intl.DateTimeFormatOptions) => string;
+    formatNumber: (number: number, options?: Intl.NumberFormatOptions) => string;
+    formatCurrency: (amount: number, currency: string, options?: Intl.NumberFormatOptions) => string;
+    formatRelativeTime: (value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions) => string;
+};
+
+declare function useNamespace(): [Namespace, (namespace: Namespace) => void];
+declare function useNamespaceInfo(): {
+    current: string;
+    available: string[];
+    isAvailable: boolean;
+};
+declare function useNamespaceSwitch(): {
+    switchNamespace: (namespace: Namespace) => void;
+    isNamespaceAvailable: (namespace: Namespace) => boolean;
+    availableNamespaces: string[];
+};
+declare function useMultipleNamespaces(namespaces: Namespace[]): {
+    translators: Record<string, _intl_party_core.TranslationFunction>;
+    isAllAvailable: boolean;
+    getMissingNamespaces: () => string[];
+};
+declare function useNamespacePreloading(): {
+    preloadNamespace: (namespace: Namespace) => Promise<void>;
+    preloadNamespaces: (namespaces: Namespace[]) => Promise<void>;
+};
+
+interface TransProps {
+    i18nKey: TranslationKey;
+    namespace?: Namespace;
+    values?: Record<string, any>;
+    components?: Record<string, ReactNode>;
+    count?: number;
+    fallback?: string;
+    children?: ReactNode;
+}
+declare function Trans({ i18nKey, namespace, values, components, count, fallback, children, }: TransProps): react_jsx_runtime.JSX.Element;
+interface ConditionalTransProps extends TransProps {
+    when?: boolean;
+    fallbackComponent?: ReactNode;
+}
+declare function ConditionalTrans({ when, fallbackComponent, ...transProps }: ConditionalTransProps): react_jsx_runtime.JSX.Element;
+interface PluralTransProps extends Omit<TransProps, "count"> {
+    count: number;
+    zero?: TranslationKey;
+    one?: TranslationKey;
+    other?: TranslationKey;
+}
+declare function PluralTrans({ count, zero, one, other, i18nKey, ...props }: PluralTransProps): react_jsx_runtime.JSX.Element;
+interface RichTransProps extends TransProps {
+    allowedTags?: string[];
+    sanitize?: boolean;
+}
+declare function RichTrans({ allowedTags, sanitize, ...transProps }: RichTransProps): react_jsx_runtime.JSX.Element;
+
+interface LocaleSelectorProps {
+    className?: string;
+    style?: React.CSSProperties;
+    placeholder?: string;
+    disabled?: boolean;
+    showNativeNames?: boolean;
+    filterLocales?: (locale: Locale) => boolean;
+    formatLocale?: (locale: Locale) => string;
+    onLocaleChange?: (locale: Locale) => void;
+    variant?: "select" | "buttons" | "dropdown";
+}
+declare function LocaleSelector({ className, style, placeholder, disabled, showNativeNames, filterLocales, formatLocale, onLocaleChange, variant, }: LocaleSelectorProps): react_jsx_runtime.JSX.Element | null;
+interface FlagLocaleSelectorProps extends Omit<LocaleSelectorProps, "showNativeNames"> {
+    flagMap?: Record<Locale, string>;
+    showFlags?: boolean;
+    showLabels?: boolean;
+}
+declare function FlagLocaleSelector({ flagMap, showFlags, showLabels, variant, ...props }: FlagLocaleSelectorProps): react_jsx_runtime.JSX.Element;
+interface CompactLocaleSelectorProps extends LocaleSelectorProps {
+    maxVisibleLocales?: number;
+}
+declare function CompactLocaleSelector({ maxVisibleLocales, ...props }: CompactLocaleSelectorProps): react_jsx_runtime.JSX.Element;
+interface AccessibleLocaleSelectorProps extends LocaleSelectorProps {
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+}
+declare function AccessibleLocaleSelector({ ariaLabel, ariaDescribedBy, ...props }: AccessibleLocaleSelectorProps): react_jsx_runtime.JSX.Element;
+
+declare const VERSION = "0.1.0";
+declare function createI18nHook<T extends Record<string, any>>(): {
+    useTranslations: (namespace?: _intl_party_core.Namespace) => _intl_party_core.TypedTranslationFunction<T>;
+    useT: (namespace?: _intl_party_core.Namespace) => _intl_party_core.TypedTranslationFunction<T>;
+};
+declare function createNamespaceHOC(namespace: string): <P extends object>(Component: React.ComponentType<P>) => React.ComponentType<P>;
+declare class I18nErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+    fallback?: React.ComponentType<{
+        error: Error;
+    }>;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}, {
+    hasError: boolean;
+    error?: Error;
+}> {
+    constructor(props: any);
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        error: Error;
+    };
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+
+export { AccessibleLocaleSelector, type AccessibleLocaleSelectorProps, CompactLocaleSelector, type CompactLocaleSelectorProps, ConditionalTrans, type ConditionalTransProps, FlagLocaleSelector, type FlagLocaleSelectorProps, type I18nContextValue, I18nErrorBoundary, I18nProvider, type I18nProviderProps, LocaleSelector, type LocaleSelectorProps, PluralTrans, type PluralTransProps, RichTrans, type RichTransProps, ScopedI18nProvider, type ScopedI18nProviderProps, Trans, type TransProps, type TypedI18nContextValue, TypedI18nProvider, type TypedI18nProviderProps, VERSION, type WithI18nProps, createI18nHook, createNamespaceHOC, useBrowserLocale, useDirection, useFormatting, useHasTranslation, useI18nContext, useInterpolatedTranslation, useLocale, useLocaleInfo, useLocalePreference, useLocaleSwitch, useMultipleNamespaces, useMultipleTranslations, useNamespace, useNamespaceInfo, useNamespacePreloading, useNamespaceSwitch, useOptionalTranslation, usePluralization, useScopedTranslations, useT, useTranslationValue, useTranslationWithFallback, useTranslations, useTypedI18nContext, useTypedT, useTypedTranslations, withI18n };

package/dist/index.d.ts

@@ -0,0 +1,196 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _intl_party_core from '@intl-party/core';
+import { I18nConfig, I18nInstance, Locale, Namespace, TranslationFunction, TypedTranslationFunction, TranslationKey, TranslationOptions } from '@intl-party/core';
+export { DeepKeyOf, I18nConfig, I18nInstance, Locale, Namespace, TranslationFunction, TranslationKey, TranslationOptions, TranslationValue, Translations, TypedI18nInstance, TypedTranslationFunction } from '@intl-party/core';
+import React, { ReactNode } from 'react';
+
+interface I18nContextValue {
+    i18n: I18nInstance;
+    locale: Locale;
+    namespace: Namespace;
+    t: TranslationFunction;
+    setLocale: (locale: Locale) => void;
+    setNamespace: (namespace: Namespace) => void;
+    isLoading: boolean;
+}
+interface TypedI18nContextValue<T extends Record<string, any> = Record<string, any>> extends Omit<I18nContextValue, "t"> {
+    t: TypedTranslationFunction<T>;
+}
+interface I18nProviderProps {
+    children: ReactNode;
+    config?: I18nConfig;
+    i18n?: I18nInstance;
+    initialLocale?: Locale;
+    initialNamespace?: Namespace;
+    loadingComponent?: ReactNode;
+    fallbackComponent?: ReactNode;
+    onLocaleChange?: (locale: Locale) => void;
+    onNamespaceChange?: (namespace: Namespace) => void;
+    onError?: (error: Error) => void;
+}
+declare function I18nProvider({ children, config, i18n: externalI18n, initialLocale, initialNamespace, loadingComponent, fallbackComponent, onLocaleChange, onNamespaceChange, onError, }: I18nProviderProps): react_jsx_runtime.JSX.Element;
+declare function useI18nContext(): I18nContextValue;
+interface TypedI18nProviderProps<T extends Record<string, any>> extends Omit<I18nProviderProps, "i18n"> {
+    i18n?: I18nInstance;
+}
+declare function TypedI18nProvider<T extends Record<string, any>>({ children, ...props }: TypedI18nProviderProps<T>): react_jsx_runtime.JSX.Element;
+declare function useTypedI18nContext<T extends Record<string, any>>(): TypedI18nContextValue<T>;
+interface WithI18nProps {
+    i18n: I18nContextValue;
+}
+declare function withI18n<P extends object>(Component: React.ComponentType<P & WithI18nProps>): React.ComponentType<P>;
+interface ScopedI18nProviderProps {
+    children: ReactNode;
+    namespace: Namespace;
+    locale?: Locale;
+}
+declare function ScopedI18nProvider({ children, namespace, locale, }: ScopedI18nProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useTranslations(namespace?: Namespace): TranslationFunction;
+declare function useTypedTranslations<T extends Record<string, any>>(namespace?: Namespace): TypedTranslationFunction<T>;
+declare const useT: typeof useTranslations;
+declare const useTypedT: typeof useTypedTranslations;
+declare function useScopedTranslations(namespace: Namespace): TranslationFunction;
+declare function useMultipleTranslations(namespaces: Namespace[]): Record<Namespace, TranslationFunction>;
+declare function useOptionalTranslation(key: TranslationKey, namespace?: Namespace, options?: TranslationOptions): string | undefined;
+declare function useTranslationWithFallback(key: TranslationKey, fallback: string, namespace?: Namespace, options?: TranslationOptions): string;
+declare function useHasTranslation(): (key: TranslationKey, namespace?: Namespace) => boolean;
+declare function useTranslationValue(): (key: TranslationKey, namespace?: Namespace) => any;
+declare function useInterpolatedTranslation(key: TranslationKey, variables: Record<string, any>, namespace?: Namespace): string;
+declare function usePluralization(key: TranslationKey, count: number, namespace?: Namespace, additionalOptions?: Omit<TranslationOptions, "count">): string;
+
+declare function useLocale(): [Locale, (locale: Locale) => void];
+declare function useLocaleInfo(): {
+    current: string;
+    available: string[];
+    fallbackChain: string[];
+    isRTL: boolean;
+    direction: string;
+};
+declare function useLocaleSwitch(): {
+    switchLocale: (locale: Locale) => void;
+    isLocaleAvailable: (locale: Locale) => boolean;
+    availableLocales: string[];
+};
+declare function useBrowserLocale(): {
+    detected: string;
+    browser: string;
+    supported: boolean;
+} | null;
+declare function useLocalePreference(): {
+    current: string;
+    save: (newLocale: Locale) => void;
+    load: () => string | null;
+    clear: () => void;
+};
+declare function useDirection(): "ltr" | "rtl";
+declare function useFormatting(): {
+    formatDate: (date: Date, options?: Intl.DateTimeFormatOptions) => string;
+    formatNumber: (number: number, options?: Intl.NumberFormatOptions) => string;
+    formatCurrency: (amount: number, currency: string, options?: Intl.NumberFormatOptions) => string;
+    formatRelativeTime: (value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions) => string;
+};
+
+declare function useNamespace(): [Namespace, (namespace: Namespace) => void];
+declare function useNamespaceInfo(): {
+    current: string;
+    available: string[];
+    isAvailable: boolean;
+};
+declare function useNamespaceSwitch(): {
+    switchNamespace: (namespace: Namespace) => void;
+    isNamespaceAvailable: (namespace: Namespace) => boolean;
+    availableNamespaces: string[];
+};
+declare function useMultipleNamespaces(namespaces: Namespace[]): {
+    translators: Record<string, _intl_party_core.TranslationFunction>;
+    isAllAvailable: boolean;
+    getMissingNamespaces: () => string[];
+};
+declare function useNamespacePreloading(): {
+    preloadNamespace: (namespace: Namespace) => Promise<void>;
+    preloadNamespaces: (namespaces: Namespace[]) => Promise<void>;
+};
+
+interface TransProps {
+    i18nKey: TranslationKey;
+    namespace?: Namespace;
+    values?: Record<string, any>;
+    components?: Record<string, ReactNode>;
+    count?: number;
+    fallback?: string;
+    children?: ReactNode;
+}
+declare function Trans({ i18nKey, namespace, values, components, count, fallback, children, }: TransProps): react_jsx_runtime.JSX.Element;
+interface ConditionalTransProps extends TransProps {
+    when?: boolean;
+    fallbackComponent?: ReactNode;
+}
+declare function ConditionalTrans({ when, fallbackComponent, ...transProps }: ConditionalTransProps): react_jsx_runtime.JSX.Element;
+interface PluralTransProps extends Omit<TransProps, "count"> {
+    count: number;
+    zero?: TranslationKey;
+    one?: TranslationKey;
+    other?: TranslationKey;
+}
+declare function PluralTrans({ count, zero, one, other, i18nKey, ...props }: PluralTransProps): react_jsx_runtime.JSX.Element;
+interface RichTransProps extends TransProps {
+    allowedTags?: string[];
+    sanitize?: boolean;
+}
+declare function RichTrans({ allowedTags, sanitize, ...transProps }: RichTransProps): react_jsx_runtime.JSX.Element;
+
+interface LocaleSelectorProps {
+    className?: string;
+    style?: React.CSSProperties;
+    placeholder?: string;
+    disabled?: boolean;
+    showNativeNames?: boolean;
+    filterLocales?: (locale: Locale) => boolean;
+    formatLocale?: (locale: Locale) => string;
+    onLocaleChange?: (locale: Locale) => void;
+    variant?: "select" | "buttons" | "dropdown";
+}
+declare function LocaleSelector({ className, style, placeholder, disabled, showNativeNames, filterLocales, formatLocale, onLocaleChange, variant, }: LocaleSelectorProps): react_jsx_runtime.JSX.Element | null;
+interface FlagLocaleSelectorProps extends Omit<LocaleSelectorProps, "showNativeNames"> {
+    flagMap?: Record<Locale, string>;
+    showFlags?: boolean;
+    showLabels?: boolean;
+}
+declare function FlagLocaleSelector({ flagMap, showFlags, showLabels, variant, ...props }: FlagLocaleSelectorProps): react_jsx_runtime.JSX.Element;
+interface CompactLocaleSelectorProps extends LocaleSelectorProps {
+    maxVisibleLocales?: number;
+}
+declare function CompactLocaleSelector({ maxVisibleLocales, ...props }: CompactLocaleSelectorProps): react_jsx_runtime.JSX.Element;
+interface AccessibleLocaleSelectorProps extends LocaleSelectorProps {
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+}
+declare function AccessibleLocaleSelector({ ariaLabel, ariaDescribedBy, ...props }: AccessibleLocaleSelectorProps): react_jsx_runtime.JSX.Element;
+
+declare const VERSION = "0.1.0";
+declare function createI18nHook<T extends Record<string, any>>(): {
+    useTranslations: (namespace?: _intl_party_core.Namespace) => _intl_party_core.TypedTranslationFunction<T>;
+    useT: (namespace?: _intl_party_core.Namespace) => _intl_party_core.TypedTranslationFunction<T>;
+};
+declare function createNamespaceHOC(namespace: string): <P extends object>(Component: React.ComponentType<P>) => React.ComponentType<P>;
+declare class I18nErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+    fallback?: React.ComponentType<{
+        error: Error;
+    }>;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}, {
+    hasError: boolean;
+    error?: Error;
+}> {
+    constructor(props: any);
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        error: Error;
+    };
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+
+export { AccessibleLocaleSelector, type AccessibleLocaleSelectorProps, CompactLocaleSelector, type CompactLocaleSelectorProps, ConditionalTrans, type ConditionalTransProps, FlagLocaleSelector, type FlagLocaleSelectorProps, type I18nContextValue, I18nErrorBoundary, I18nProvider, type I18nProviderProps, LocaleSelector, type LocaleSelectorProps, PluralTrans, type PluralTransProps, RichTrans, type RichTransProps, ScopedI18nProvider, type ScopedI18nProviderProps, Trans, type TransProps, type TypedI18nContextValue, TypedI18nProvider, type TypedI18nProviderProps, VERSION, type WithI18nProps, createI18nHook, createNamespaceHOC, useBrowserLocale, useDirection, useFormatting, useHasTranslation, useI18nContext, useInterpolatedTranslation, useLocale, useLocaleInfo, useLocalePreference, useLocaleSwitch, useMultipleNamespaces, useMultipleTranslations, useNamespace, useNamespaceInfo, useNamespacePreloading, useNamespaceSwitch, useOptionalTranslation, usePluralization, useScopedTranslations, useT, useTranslationValue, useTranslationWithFallback, useTranslations, useTypedI18nContext, useTypedT, useTypedTranslations, withI18n };

package/dist/index.js

@@ -195,6 +195,24 @@ function I18nProvider({
 function useI18nContext() {
   const context = (0, import_react.useContext)(I18nContext);
   if (!context) {
+    if (typeof window === "undefined") {
+      const fallbackI18n = (0, import_core.createI18n)({
+        locales: ["en"],
+        defaultLocale: "en",
+        namespaces: ["common"]
+      });
+      return {
+        i18n: fallbackI18n,
+        locale: "en",
+        namespace: "common",
+        t: fallbackI18n.t,
+        setLocale: () => {
+        },
+        setNamespace: () => {
+        },
+        isLoading: false
+      };
+    }
     throw new Error("useI18nContext must be used within an I18nProvider");
   }
   return context;
@@ -229,6 +247,24 @@ function useTypedI18nContext() {
     TypedI18nContext
   );
   if (!context) {
+    if (typeof window === "undefined") {
+      const fallbackI18n = (0, import_core.createI18n)({
+        locales: ["en"],
+        defaultLocale: "en",
+        namespaces: ["common"]
+      });
+      return {
+        i18n: fallbackI18n,
+        locale: "en",
+        namespace: "common",
+        t: fallbackI18n.t,
+        setLocale: () => {
+        },
+        setNamespace: () => {
+        },
+        isLoading: false
+      };
+    }
     throw new Error(
       "useTypedI18nContext must be used within a TypedI18nProvider"
     );
@@ -816,6 +852,25 @@ function LocaleSelector({
       locale
     )) });
   }
+  if (variant === "dropdown") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "select",
+      {
+        value: currentLocale,
+        onChange: (e) => handleLocaleChange(e.target.value),
+        disabled,
+        style: {
+          padding: "8px 12px",
+          borderRadius: "4px",
+          border: "1px solid #ccc",
+          backgroundColor: "white",
+          fontSize: "14px",
+          minWidth: "120px"
+        },
+        children: filteredLocales.map((locale) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: locale, children: formatLocaleDisplay(locale) }, locale))
+      }
+    ) });
+  }
   return null;
 }
 function FlagLocaleSelector({

package/dist/index.mjs

@@ -129,6 +129,24 @@ function I18nProvider({
 function useI18nContext() {
   const context = useContext(I18nContext);
   if (!context) {
+    if (typeof window === "undefined") {
+      const fallbackI18n = createI18n({
+        locales: ["en"],
+        defaultLocale: "en",
+        namespaces: ["common"]
+      });
+      return {
+        i18n: fallbackI18n,
+        locale: "en",
+        namespace: "common",
+        t: fallbackI18n.t,
+        setLocale: () => {
+        },
+        setNamespace: () => {
+        },
+        isLoading: false
+      };
+    }
     throw new Error("useI18nContext must be used within an I18nProvider");
   }
   return context;
@@ -163,6 +181,24 @@ function useTypedI18nContext() {
     TypedI18nContext
   );
   if (!context) {
+    if (typeof window === "undefined") {
+      const fallbackI18n = createI18n({
+        locales: ["en"],
+        defaultLocale: "en",
+        namespaces: ["common"]
+      });
+      return {
+        i18n: fallbackI18n,
+        locale: "en",
+        namespace: "common",
+        t: fallbackI18n.t,
+        setLocale: () => {
+        },
+        setNamespace: () => {
+        },
+        isLoading: false
+      };
+    }
     throw new Error(
       "useTypedI18nContext must be used within a TypedI18nProvider"
     );
@@ -750,6 +786,25 @@ function LocaleSelector({
       locale
     )) });
   }
+  if (variant === "dropdown") {
+    return /* @__PURE__ */ jsx3("div", { className, style, children: /* @__PURE__ */ jsx3(
+      "select",
+      {
+        value: currentLocale,
+        onChange: (e) => handleLocaleChange(e.target.value),
+        disabled,
+        style: {
+          padding: "8px 12px",
+          borderRadius: "4px",
+          border: "1px solid #ccc",
+          backgroundColor: "white",
+          fontSize: "14px",
+          minWidth: "120px"
+        },
+        children: filteredLocales.map((locale) => /* @__PURE__ */ jsx3("option", { value: locale, children: formatLocaleDisplay(locale) }, locale))
+      }
+    ) });
+  }
   return null;
 }
 function FlagLocaleSelector({

package/dist/server.d.mts

@@ -0,0 +1,7 @@
+export { I18nConfig, I18nInstance, Locale, Namespace, TranslationFunction, TranslationKey, TranslationOptions, TranslationValue } from '@intl-party/core';
+
+declare function useTranslations(): never;
+declare function useLocale(): never;
+declare function I18nProvider(): never;
+
+export { I18nProvider, useLocale, useTranslations };

package/dist/server.d.ts

@@ -0,0 +1,7 @@
+export { I18nConfig, I18nInstance, Locale, Namespace, TranslationFunction, TranslationKey, TranslationOptions, TranslationValue } from '@intl-party/core';
+
+declare function useTranslations(): never;
+declare function useLocale(): never;
+declare function I18nProvider(): never;
+
+export { I18nProvider, useLocale, useTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intl-party/react",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "description": "React integration for IntlParty - hooks, context, and components for type-safe i18n",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -8,9 +8,9 @@
   "exports": {
     ".": {
       "react-server": "./dist/server.js",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     }
   },
   "files": [
@@ -24,10 +24,14 @@
     "hooks",
     "context"
   ],
-  "author": "IntlParty Team",
+  "author": "RodrigoEspinosa",
   "license": "MIT",
+  "homepage": "https://github.com/RodrigoEspinosa/intl-party#readme",
+  "bugs": {
+    "url": "https://github.com/RodrigoEspinosa/intl-party/issues"
+  },
   "dependencies": {
-    "@intl-party/core": "1.0.0"
+    "@intl-party/core": "1.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.4",
@@ -49,14 +53,17 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/intl-party/intl-party.git",
+    "url": "https://github.com/RodrigoEspinosa/intl-party.git",
     "directory": "packages/react"
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "scripts": {
-    "build": "tsup src/index.tsx src/server.ts --format cjs,esm --external react,react-dom",
+    "build": "tsup src/index.tsx src/server.ts --format cjs,esm --dts --external react,react-dom",
     "dev": "tsup src/index.tsx --format cjs,esm --external react,react-dom --watch",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
+    "test": "vitest --run",
+    "test:watch": "vitest",
     "lint": "eslint src --ext .ts,.tsx",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist"