@intl-party/react 1.1.0 → 1.1.3

package/README.md

@@ -0,0 +1,342 @@
+# @intl-party/react
+
+React integration for IntlParty - hooks, context, and components for type-safe internationalization in React applications.
+
+## 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
+- 📱 **SSR support** - Server-side rendering compatible
+- 🎨 **Type safety** - Full TypeScript support with typed hooks
+
+## Installation
+
+```bash
+npm install @intl-party/react @intl-party/core
+# or
+pnpm add @intl-party/react @intl-party/core
+# or
+yarn add @intl-party/react @intl-party/core
+```
+
+## Quick Start
+
+```tsx
+import React from "react";
+import { I18nProvider, useTranslations, useLocale } from "@intl-party/react";
+import { createI18n } from "@intl-party/core";
+
+// Create i18n instance
+const i18n = createI18n({
+  locales: ["en", "es", "fr"],
+  defaultLocale: "en",
+  namespaces: ["common"],
+});
+
+// Add translations
+i18n.addTranslations("en", "common", {
+  welcome: "Welcome!",
+  greeting: "Hello, {{name}}!",
+});
+
+i18n.addTranslations("es", "common", {
+  welcome: "¡Bienvenido!",
+  greeting: "¡Hola, {{name}}!",
+});
+
+function App() {
+  return (
+    <I18nProvider i18n={i18n}>
+      <HomePage />
+    </I18nProvider>
+  );
+}
+
+function HomePage() {
+  const t = useTranslations("common");
+  const { locale, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>{t("welcome")}</h1>
+      <p>{t("greeting", { interpolation: { name: "John" } })}</p>
+
+      <button onClick={() => setLocale("es")}>Español</button>
+      <button onClick={() => setLocale("en")}>English</button>
+
+      <p>Current locale: {locale}</p>
+    </div>
+  );
+}
+```
+
+## Hooks
+
+### useTranslations
+
+Get a translation function for a specific namespace:
+
+```tsx
+import { useTranslations } from "@intl-party/react";
+
+function MyComponent() {
+  const t = useTranslations("common");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1>
+      <p>
+        {t("description", {
+          interpolation: { name: "User" },
+          count: 5,
+        })}
+      </p>
+    </div>
+  );
+}
+
+// With fallback namespace
+function MyComponent() {
+  const t = useTranslations(["common", "fallback"]);
+  return <h1>{t("title")}</h1>;
+}
+```
+
+### useLocale
+
+Manage the current locale:
+
+```tsx
+import { useLocale } from "@intl-party/react";
+
+function 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>
+  );
+}
+```
+
+### useNamespace
+
+Manage the current namespace:
+
+```tsx
+import { useNamespace } from "@intl-party/react";
+
+function NamespaceSwitcher() {
+  const { namespace, setNamespace, availableNamespaces } = useNamespace();
+
+  return (
+    <div>
+      <p>Current namespace: {namespace}</p>
+      {availableNamespaces.map((ns) => (
+        <button key={ns} onClick={() => setNamespace(ns)}>
+          {ns}
+        </button>
+      ))}
+    </div>
+  );
+}
+```
+
+### useI18nContext
+
+Access the full i18n context:
+
+```tsx
+import { useI18nContext } from "@intl-party/react";
+
+function AdvancedComponent() {
+  const { i18n, locale, namespace } = useI18nContext();
+
+  // Direct access to i18n instance
+  const hasTranslation = i18n.hasTranslation("some.key");
+
+  return <div>...</div>;
+}
+```
+
+## Components
+
+### Trans Component
+
+Declarative translation with JSX interpolation:
+
+```tsx
+import { Trans } from "@intl-party/react";
+
+function MyComponent() {
+  return (
+    <Trans
+      namespace="common"
+      i18nKey="welcome.message"
+      values={{ name: "John", count: 5 }}
+      components={{
+        bold: <strong />,
+        link: <a href="/profile" />,
+      }}
+    />
+  );
+}
+```
+
+Translation file:
+
+```json
+{
+  "welcome": {
+    "message": "Hello <bold>{{name}}</bold>! You have <link>{{count}} messages</link>."
+  }
+}
+```
+
+### LocaleSelector Component
+
+Pre-built locale selector:
+
+```tsx
+import { LocaleSelector } from "@intl-party/react";
+
+function Header() {
+  return (
+    <header>
+      <h1>My App</h1>
+      <LocaleSelector
+        className="locale-selector"
+        showFlags={true}
+        onChange={(locale) => console.log("Locale changed to:", locale)}
+      />
+    </header>
+  );
+}
+```
+
+## Provider Configuration
+
+### I18nProvider
+
+```tsx
+import { I18nProvider } from "@intl-party/react";
+
+function App() {
+  return (
+    <I18nProvider
+      i18n={i18nInstance}
+      fallback={<div>Loading translations...</div>}
+    >
+      <YourApp />
+    </I18nProvider>
+  );
+}
+```
+
+### Server-Side Rendering
+
+For SSR compatibility, initialize with server-detected locale:
+
+```tsx
+// Server-side
+import { createI18n } from "@intl-party/core";
+
+function createServerI18n(locale: string) {
+  const i18n = createI18n({
+    locales: ["en", "es", "fr"],
+    defaultLocale: "en",
+    namespaces: ["common"],
+  });
+
+  i18n.setLocale(locale);
+  return i18n;
+}
+
+// In your SSR setup
+const i18n = createServerI18n(detectedLocale);
+```
+
+## TypeScript Support
+
+Create typed hooks for better developer experience:
+
+```tsx
+interface MyTranslations {
+  common: {
+    welcome: string;
+    user: {
+      profile: string;
+      settings: string;
+    };
+  };
+  navigation: {
+    home: string;
+    about: string;
+  };
+}
+
+// Type the hooks
+const useTypedTranslations = useTranslations as <
+  T extends keyof MyTranslations,
+>(
+  namespace: T,
+) => (key: string) => string;
+
+function TypedComponent() {
+  const t = useTypedTranslations("common");
+  // Now t() has autocomplete for keys in 'common' namespace
+  return <h1>{t("welcome")}</h1>;
+}
+```
+
+## Advanced Usage
+
+### Dynamic namespace loading
+
+```tsx
+import { useTranslations, useI18nContext } from "@intl-party/react";
+
+function DynamicComponent() {
+  const { i18n } = useI18nContext();
+  const t = useTranslations("dynamic");
+
+  useEffect(() => {
+    // Load translations dynamically
+    import(`./translations/${i18n.locale}/dynamic.json`).then(
+      (translations) => {
+        i18n.addTranslations(i18n.locale, "dynamic", translations.default);
+      },
+    );
+  }, [i18n.locale]);
+
+  return <div>{t("content")}</div>;
+}
+```
+
+### Custom hook for scoped translations
+
+```tsx
+function usePageTranslations(page: string) {
+  const { i18n } = useI18nContext();
+  return useMemo(
+    () => i18n.createScopedTranslator(`pages.${page}`),
+    [i18n, page],
+  );
+}
+
+function ContactPage() {
+  const t = usePageTranslations("contact");
+  return <h1>{t("title")}</h1>; // translates 'pages.contact.title'
+}
+```
+
+## License
+
+MIT © IntlParty

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -194,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;
@@ -228,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"
     );

package/dist/index.mjs

@@ -1,3 +1,5 @@
+"use client";
+
 // src/index.tsx
 import React4 from "react";
 
@@ -127,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;
@@ -161,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"
     );

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/dist/server.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/server.ts
+var server_exports = {};
+__export(server_exports, {
+  I18nProvider: () => I18nProvider,
+  useLocale: () => useLocale,
+  useTranslations: () => useTranslations
+});
+module.exports = __toCommonJS(server_exports);
+function useTranslations() {
+  throw new Error(
+    "useTranslations() is a client-side hook and cannot be used in Server Components. Use getServerTranslations() from @intl-party/nextjs/server instead."
+  );
+}
+function useLocale() {
+  throw new Error(
+    "useLocale() is a client-side hook and cannot be used in Server Components. Use getLocale() from @intl-party/nextjs/server instead."
+  );
+}
+function I18nProvider() {
+  throw new Error(
+    "I18nProvider is a client component and cannot be used in Server Components. Use AppI18nProvider from @intl-party/nextjs in a client component instead."
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  I18nProvider,
+  useLocale,
+  useTranslations
+});

package/dist/server.mjs

@@ -0,0 +1,21 @@
+// src/server.ts
+function useTranslations() {
+  throw new Error(
+    "useTranslations() is a client-side hook and cannot be used in Server Components. Use getServerTranslations() from @intl-party/nextjs/server instead."
+  );
+}
+function useLocale() {
+  throw new Error(
+    "useLocale() is a client-side hook and cannot be used in Server Components. Use getLocale() from @intl-party/nextjs/server instead."
+  );
+}
+function I18nProvider() {
+  throw new Error(
+    "I18nProvider is a client component and cannot be used in Server Components. Use AppI18nProvider from @intl-party/nextjs in a client component instead."
+  );
+}
+export {
+  I18nProvider,
+  useLocale,
+  useTranslations
+};

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@intl-party/react",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "React integration for IntlParty - hooks, context, and components for type-safe i18n",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "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": [
@@ -26,7 +27,7 @@
   "author": "IntlParty Team",
   "license": "MIT",
   "dependencies": {
-    "@intl-party/core": "1.0.0"
+    "@intl-party/core": "1.0.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.4",
@@ -52,10 +53,10 @@
     "directory": "packages/react"
   },
   "scripts": {
-    "build": "tsup src/index.tsx --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"