@intl-party/react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,958 @@
+// src/index.tsx
+import React4 from "react";
+
+// src/context/I18nContext.tsx
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  useEffect
+} from "react";
+import {
+  createI18n
+} from "@intl-party/core";
+import { Fragment, jsx } from "react/jsx-runtime";
+var I18nContext = createContext(null);
+function I18nProvider({
+  children,
+  config,
+  i18n: externalI18n,
+  initialLocale,
+  initialNamespace,
+  loadingComponent,
+  fallbackComponent,
+  onLocaleChange,
+  onNamespaceChange,
+  onError
+}) {
+  const i18nInstance = useMemo(() => {
+    if (externalI18n) {
+      return externalI18n;
+    }
+    if (!config) {
+      throw new Error(
+        "Either config or i18n instance must be provided to I18nProvider"
+      );
+    }
+    const instance = createI18n(config);
+    if (initialLocale && config.locales.includes(initialLocale)) {
+      instance.setLocale(initialLocale);
+    }
+    if (initialNamespace && config.namespaces.includes(initialNamespace)) {
+      instance.setNamespace(initialNamespace);
+    }
+    return instance;
+  }, [config, externalI18n, initialLocale, initialNamespace]);
+  const [locale, setLocaleState] = useState(i18nInstance.getLocale());
+  const [namespace, setNamespaceState] = useState(
+    i18nInstance.getNamespace()
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const handleLocaleChange = (newLocale) => {
+    try {
+      setIsLoading(true);
+      i18nInstance.setLocale(newLocale);
+      setLocaleState(newLocale);
+      onLocaleChange?.(newLocale);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to change locale");
+      setError(error2);
+      onError?.(error2);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleNamespaceChange = (newNamespace) => {
+    try {
+      i18nInstance.setNamespace(newNamespace);
+      setNamespaceState(newNamespace);
+      onNamespaceChange?.(newNamespace);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to change namespace");
+      setError(error2);
+      onError?.(error2);
+    }
+  };
+  useEffect(() => {
+    const handleLocaleChangeEvent = ({
+      locale: newLocale
+    }) => {
+      setLocaleState(newLocale);
+      onLocaleChange?.(newLocale);
+    };
+    const handleNamespaceChangeEvent = ({
+      namespace: newNamespace
+    }) => {
+      setNamespaceState(newNamespace);
+      onNamespaceChange?.(newNamespace);
+    };
+    const handleTranslationsPreloading = () => setIsLoading(true);
+    const handleTranslationsPreloaded = () => setIsLoading(false);
+    i18nInstance.on("localeChange", handleLocaleChangeEvent);
+    i18nInstance.on("namespaceChange", handleNamespaceChangeEvent);
+    i18nInstance.on("translationsPreloading", handleTranslationsPreloading);
+    i18nInstance.on("translationsPreloaded", handleTranslationsPreloaded);
+    return () => {
+      i18nInstance.off("localeChange", handleLocaleChangeEvent);
+      i18nInstance.off("namespaceChange", handleNamespaceChangeEvent);
+      i18nInstance.off("translationsPreloading", handleTranslationsPreloading);
+      i18nInstance.off("translationsPreloaded", handleTranslationsPreloaded);
+    };
+  }, [i18nInstance, onLocaleChange, onNamespaceChange]);
+  const contextValue = useMemo(
+    () => ({
+      i18n: i18nInstance,
+      locale,
+      namespace,
+      t: i18nInstance.t,
+      setLocale: handleLocaleChange,
+      setNamespace: handleNamespaceChange,
+      isLoading
+    }),
+    [i18nInstance, locale, namespace, isLoading]
+  );
+  if (error && fallbackComponent) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallbackComponent });
+  }
+  if (error) {
+    throw error;
+  }
+  if (isLoading && loadingComponent) {
+    return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent });
+  }
+  return /* @__PURE__ */ jsx(I18nContext.Provider, { value: contextValue, children });
+}
+function useI18nContext() {
+  const context = useContext(I18nContext);
+  if (!context) {
+    throw new Error("useI18nContext must be used within an I18nProvider");
+  }
+  return context;
+}
+var TypedI18nContext = createContext(null);
+function TypedI18nProvider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(I18nProvider, { ...props, children: /* @__PURE__ */ jsx(TypedI18nContextWrapper, { children }) });
+}
+function TypedI18nContextWrapper({
+  children
+}) {
+  const { i18n, locale, namespace, setLocale, setNamespace, isLoading } = useI18nContext();
+  const typedContextValue = useMemo(
+    () => ({
+      i18n,
+      locale,
+      namespace,
+      t: i18n.t,
+      setLocale,
+      setNamespace,
+      isLoading
+    }),
+    [i18n, locale, namespace, setLocale, setNamespace, isLoading]
+  );
+  return /* @__PURE__ */ jsx(TypedI18nContext.Provider, { value: typedContextValue, children });
+}
+function useTypedI18nContext() {
+  const context = useContext(
+    TypedI18nContext
+  );
+  if (!context) {
+    throw new Error(
+      "useTypedI18nContext must be used within a TypedI18nProvider"
+    );
+  }
+  return context;
+}
+function withI18n(Component) {
+  const WrappedComponent = (props) => {
+    const i18nContext = useI18nContext();
+    return /* @__PURE__ */ jsx(Component, { ...props, i18n: i18nContext });
+  };
+  WrappedComponent.displayName = `withI18n(${Component.displayName || Component.name})`;
+  return WrappedComponent;
+}
+function ScopedI18nProvider({
+  children,
+  namespace,
+  locale
+}) {
+  const parentContext = useI18nContext();
+  const scopedContextValue = useMemo(
+    () => ({
+      ...parentContext,
+      namespace,
+      locale: locale || parentContext.locale,
+      t: parentContext.i18n.createScopedTranslator(namespace)
+    }),
+    [parentContext, namespace, locale]
+  );
+  return /* @__PURE__ */ jsx(I18nContext.Provider, { value: scopedContextValue, children });
+}
+
+// src/hooks/useTranslations.ts
+import { useCallback, useMemo as useMemo2 } from "react";
+function useTranslations(namespace) {
+  const { i18n, namespace: currentNamespace } = useI18nContext();
+  const targetNamespace = namespace || currentNamespace;
+  return useCallback(
+    (key, options) => {
+      return i18n.t(key, { ...options, namespace: targetNamespace });
+    },
+    [i18n, targetNamespace]
+  );
+}
+function useTypedTranslations(namespace) {
+  const { i18n, namespace: currentNamespace } = useTypedI18nContext();
+  const targetNamespace = namespace || currentNamespace;
+  return useCallback(
+    (key, options) => {
+      return i18n.t(key, {
+        ...options,
+        namespace: targetNamespace
+      });
+    },
+    [i18n, targetNamespace]
+  );
+}
+var useT = useTranslations;
+var useTypedT = useTypedTranslations;
+function useScopedTranslations(namespace) {
+  const { i18n } = useI18nContext();
+  return useMemo2(() => {
+    return i18n.createScopedTranslator(namespace);
+  }, [i18n, namespace]);
+}
+function useMultipleTranslations(namespaces) {
+  const { i18n } = useI18nContext();
+  return useMemo2(() => {
+    const translators = {};
+    for (const namespace of namespaces) {
+      translators[namespace] = i18n.createScopedTranslator(namespace);
+    }
+    return translators;
+  }, [i18n, namespaces]);
+}
+function useOptionalTranslation(key, namespace, options) {
+  const { i18n, namespace: currentNamespace } = useI18nContext();
+  const targetNamespace = namespace || currentNamespace;
+  return useMemo2(() => {
+    if (i18n.hasTranslation(key, targetNamespace)) {
+      return i18n.t(key, { ...options, namespace: targetNamespace });
+    }
+    return void 0;
+  }, [i18n, key, targetNamespace, options]);
+}
+function useTranslationWithFallback(key, fallback, namespace, options) {
+  const { i18n, namespace: currentNamespace } = useI18nContext();
+  const targetNamespace = namespace || currentNamespace;
+  return useMemo2(() => {
+    return i18n.t(key, {
+      ...options,
+      namespace: targetNamespace,
+      fallback
+    });
+  }, [i18n, key, fallback, targetNamespace, options]);
+}
+function useHasTranslation() {
+  const { i18n, namespace: currentNamespace } = useI18nContext();
+  return useCallback(
+    (key, namespace) => {
+      const targetNamespace = namespace || currentNamespace;
+      return i18n.hasTranslation(key, targetNamespace);
+    },
+    [i18n, currentNamespace]
+  );
+}
+function useTranslationValue() {
+  const { i18n, namespace: currentNamespace } = useI18nContext();
+  return useCallback(
+    (key, namespace) => {
+      const targetNamespace = namespace || currentNamespace;
+      return i18n.getTranslation(key, targetNamespace);
+    },
+    [i18n, currentNamespace]
+  );
+}
+function useInterpolatedTranslation(key, variables, namespace) {
+  const t = useTranslations(namespace);
+  return useMemo2(() => {
+    return t(key, { interpolation: variables });
+  }, [t, key, variables]);
+}
+function usePluralization(key, count, namespace, additionalOptions) {
+  const t = useTranslations(namespace);
+  return useMemo2(() => {
+    return t(key, { ...additionalOptions, count });
+  }, [t, key, count, additionalOptions]);
+}
+
+// src/hooks/useLocale.ts
+import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
+function useLocale() {
+  const { locale, setLocale } = useI18nContext();
+  return [locale, setLocale];
+}
+function useLocaleInfo() {
+  const { locale, i18n } = useI18nContext();
+  return useMemo3(() => {
+    const availableLocales = i18n.getAvailableLocales();
+    const fallbackChain = i18n.getFallbackChain(locale);
+    return {
+      current: locale,
+      available: availableLocales,
+      fallbackChain,
+      isRTL: isRTLLocale(locale),
+      direction: isRTLLocale(locale) ? "rtl" : "ltr"
+    };
+  }, [locale, i18n]);
+}
+function useLocaleSwitch() {
+  const { i18n, setLocale } = useI18nContext();
+  const switchLocale = useCallback2(
+    (locale) => {
+      const availableLocales = i18n.getAvailableLocales();
+      if (!availableLocales.includes(locale)) {
+        throw new Error(
+          `Locale "${locale}" is not available. Available locales: ${availableLocales.join(", ")}`
+        );
+      }
+      setLocale(locale);
+    },
+    [i18n, setLocale]
+  );
+  const isLocaleAvailable = useCallback2(
+    (locale) => {
+      return i18n.getAvailableLocales().includes(locale);
+    },
+    [i18n]
+  );
+  return {
+    switchLocale,
+    isLocaleAvailable,
+    availableLocales: i18n.getAvailableLocales()
+  };
+}
+function useBrowserLocale() {
+  const { i18n } = useI18nContext();
+  return useMemo3(() => {
+    if (typeof window === "undefined") return null;
+    const detected = i18n.detectLocale({
+      request: void 0,
+      url: window.location.href,
+      userAgent: navigator.userAgent
+    });
+    return {
+      detected,
+      browser: navigator.language,
+      supported: i18n.getAvailableLocales().includes(detected)
+    };
+  }, [i18n]);
+}
+function useLocalePreference() {
+  const { locale, setLocale, i18n } = useI18nContext();
+  const savePreference = useCallback2(
+    (newLocale) => {
+      if (typeof window !== "undefined") {
+        localStorage.setItem("intl-party-locale", newLocale);
+      }
+      setLocale(newLocale);
+    },
+    [setLocale]
+  );
+  const loadPreference = useCallback2(() => {
+    if (typeof window === "undefined") return null;
+    const saved = localStorage.getItem("intl-party-locale");
+    if (saved && i18n.getAvailableLocales().includes(saved)) {
+      return saved;
+    }
+    return null;
+  }, [i18n]);
+  const clearPreference = useCallback2(() => {
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("intl-party-locale");
+    }
+  }, []);
+  return {
+    current: locale,
+    save: savePreference,
+    load: loadPreference,
+    clear: clearPreference
+  };
+}
+function isRTLLocale(locale) {
+  const rtlLocales = [
+    "ar",
+    "arc",
+    "ckb",
+    "dv",
+    "fa",
+    "ha",
+    "he",
+    "khw",
+    "ks",
+    "ku",
+    "ps",
+    "sd",
+    "ur",
+    "yi"
+  ];
+  const baseLocale = locale.split("-")[0];
+  return rtlLocales.includes(baseLocale);
+}
+function useDirection() {
+  const { locale } = useI18nContext();
+  return useMemo3(() => {
+    return isRTLLocale(locale) ? "rtl" : "ltr";
+  }, [locale]);
+}
+function useFormatting() {
+  const { i18n } = useI18nContext();
+  return useMemo3(
+    () => ({
+      formatDate: (date, options) => i18n.formatDate(date, options),
+      formatNumber: (number, options) => i18n.formatNumber(number, options),
+      formatCurrency: (amount, currency, options) => i18n.formatCurrency(amount, currency, options),
+      formatRelativeTime: (value, unit, options) => i18n.formatRelativeTime(value, unit, options)
+    }),
+    [i18n]
+  );
+}
+
+// src/hooks/useNamespace.ts
+import { useCallback as useCallback3, useMemo as useMemo4 } from "react";
+function useNamespace() {
+  const { namespace, setNamespace } = useI18nContext();
+  return [namespace, setNamespace];
+}
+function useNamespaceInfo() {
+  const { namespace, i18n } = useI18nContext();
+  return useMemo4(() => {
+    const availableNamespaces = i18n.getAvailableNamespaces();
+    return {
+      current: namespace,
+      available: availableNamespaces,
+      isAvailable: availableNamespaces.includes(namespace)
+    };
+  }, [namespace, i18n]);
+}
+function useNamespaceSwitch() {
+  const { i18n, setNamespace } = useI18nContext();
+  const switchNamespace = useCallback3(
+    (namespace) => {
+      const availableNamespaces = i18n.getAvailableNamespaces();
+      if (!availableNamespaces.includes(namespace)) {
+        throw new Error(
+          `Namespace "${namespace}" is not available. Available namespaces: ${availableNamespaces.join(", ")}`
+        );
+      }
+      setNamespace(namespace);
+    },
+    [i18n, setNamespace]
+  );
+  const isNamespaceAvailable = useCallback3(
+    (namespace) => {
+      return i18n.getAvailableNamespaces().includes(namespace);
+    },
+    [i18n]
+  );
+  return {
+    switchNamespace,
+    isNamespaceAvailable,
+    availableNamespaces: i18n.getAvailableNamespaces()
+  };
+}
+function useMultipleNamespaces(namespaces) {
+  const { i18n } = useI18nContext();
+  const translators = useMemo4(() => {
+    return namespaces.reduce(
+      (acc, ns) => {
+        acc[ns] = i18n.createScopedTranslator(ns);
+        return acc;
+      },
+      {}
+    );
+  }, [i18n, namespaces]);
+  const isAllAvailable = useMemo4(() => {
+    const available = i18n.getAvailableNamespaces();
+    return namespaces.every((ns) => available.includes(ns));
+  }, [i18n, namespaces]);
+  const getMissingNamespaces = useCallback3(() => {
+    const available = i18n.getAvailableNamespaces();
+    return namespaces.filter((ns) => !available.includes(ns));
+  }, [i18n, namespaces]);
+  return {
+    translators,
+    isAllAvailable,
+    getMissingNamespaces
+  };
+}
+function useNamespacePreloading() {
+  const { i18n, locale } = useI18nContext();
+  const preloadNamespace = useCallback3(
+    async (namespace) => {
+      await i18n.preloadTranslations(locale, namespace);
+    },
+    [i18n, locale]
+  );
+  const preloadNamespaces = useCallback3(
+    async (namespaces) => {
+      await i18n.preloadTranslations(locale, namespaces);
+    },
+    [i18n, locale]
+  );
+  return {
+    preloadNamespace,
+    preloadNamespaces
+  };
+}
+
+// src/components/Trans.tsx
+import React2, { Fragment as Fragment2, useMemo as useMemo5 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Trans({
+  i18nKey,
+  namespace,
+  values = {},
+  components = {},
+  count,
+  fallback,
+  children
+}) {
+  const t = useTranslations(namespace);
+  const rendered = useMemo5(() => {
+    const options = {
+      interpolation: values,
+      count,
+      fallback
+    };
+    const translation = t(i18nKey, options);
+    if (Object.keys(components).length === 0) {
+      return translation;
+    }
+    return parseTranslationWithComponents(translation, components);
+  }, [t, i18nKey, values, components, count, fallback]);
+  if (typeof rendered === "string") {
+    return /* @__PURE__ */ jsx2(Fragment2, { children: rendered });
+  }
+  return /* @__PURE__ */ jsx2(Fragment2, { children: rendered });
+}
+function ConditionalTrans({
+  when = true,
+  fallbackComponent,
+  ...transProps
+}) {
+  if (!when) {
+    return /* @__PURE__ */ jsx2(Fragment2, { children: fallbackComponent });
+  }
+  return /* @__PURE__ */ jsx2(Trans, { ...transProps });
+}
+function PluralTrans({
+  count,
+  zero,
+  one,
+  other,
+  i18nKey,
+  ...props
+}) {
+  const selectedKey = useMemo5(() => {
+    if (count === 0 && zero) return zero;
+    if (count === 1 && one) return one;
+    if (other) return other;
+    return i18nKey;
+  }, [count, zero, one, other, i18nKey]);
+  return /* @__PURE__ */ jsx2(
+    Trans,
+    {
+      ...props,
+      i18nKey: selectedKey,
+      count,
+      values: { count, ...props.values }
+    }
+  );
+}
+function RichTrans({
+  allowedTags = ["strong", "em", "br", "span"],
+  sanitize = true,
+  ...transProps
+}) {
+  const t = useTranslations(transProps.namespace);
+  const rendered = useMemo5(() => {
+    const translation = t(transProps.i18nKey, {
+      interpolation: transProps.values,
+      count: transProps.count,
+      fallback: transProps.fallback
+    });
+    if (sanitize) {
+      const sanitized = translation.replace(
+        /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+        ""
+      );
+      return parseHTMLString(sanitized, allowedTags);
+    }
+    return parseHTMLString(translation, allowedTags);
+  }, [t, transProps, allowedTags, sanitize]);
+  return /* @__PURE__ */ jsx2(Fragment2, { children: rendered });
+}
+function parseTranslationWithComponents(text, components) {
+  const parts = [];
+  let currentIndex = 0;
+  const componentRegex = /<(\w+)>(.*?)<\/\1>/g;
+  let match;
+  while ((match = componentRegex.exec(text)) !== null) {
+    const [fullMatch, componentKey, content] = match;
+    const matchStart = match.index;
+    if (matchStart > currentIndex) {
+      parts.push(text.slice(currentIndex, matchStart));
+    }
+    if (components[componentKey]) {
+      if (React2.isValidElement(components[componentKey])) {
+        parts.push(
+          React2.cloneElement(
+            components[componentKey],
+            { key: parts.length },
+            content
+          )
+        );
+      } else {
+        parts.push(components[componentKey]);
+      }
+    } else {
+      parts.push(content);
+    }
+    currentIndex = matchStart + fullMatch.length;
+  }
+  if (currentIndex < text.length) {
+    parts.push(text.slice(currentIndex));
+  }
+  return parts.length > 0 ? parts : [text];
+}
+function parseHTMLString(html, allowedTags) {
+  if (!allowedTags.length) {
+    return html;
+  }
+  const tagRegex = new RegExp(
+    `<(/?)(${allowedTags.join("|")})(?:\\s[^>]*)?>`,
+    "gi"
+  );
+  const parts = html.split(tagRegex).filter(Boolean);
+  const elements = [];
+  let i = 0;
+  while (i < parts.length) {
+    const part = parts[i];
+    if (allowedTags.some((tag) => part.toLowerCase() === tag)) {
+      const tag = part.toLowerCase();
+      let content = "";
+      let depth = 1;
+      i++;
+      while (i < parts.length && depth > 0) {
+        const nextPart = parts[i];
+        if (nextPart === "/") {
+          i++;
+          if (i < parts.length && parts[i].toLowerCase() === tag) {
+            depth--;
+            i++;
+          }
+        } else if (allowedTags.some((t) => nextPart.toLowerCase() === t)) {
+          depth++;
+          content += `<${nextPart}>`;
+          i++;
+        } else {
+          content += nextPart;
+          i++;
+        }
+      }
+      elements.push(
+        React2.createElement(tag, { key: elements.length }, content)
+      );
+    } else {
+      elements.push(part);
+      i++;
+    }
+  }
+  return elements.length === 1 ? elements[0] : elements;
+}
+
+// src/components/LocaleSelector.tsx
+import { useMemo as useMemo6 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function LocaleSelector({
+  className,
+  style,
+  placeholder = "Select language",
+  disabled = false,
+  showNativeNames = true,
+  filterLocales,
+  formatLocale,
+  onLocaleChange,
+  variant = "select"
+}) {
+  const [currentLocale, setLocale] = useLocale();
+  const { available } = useLocaleInfo();
+  const filteredLocales = useMemo6(() => {
+    return filterLocales ? available.filter(filterLocales) : available;
+  }, [available, filterLocales]);
+  const handleLocaleChange = (locale) => {
+    setLocale(locale);
+    onLocaleChange?.(locale);
+  };
+  const formatLocaleDisplay = (locale) => {
+    if (formatLocale) {
+      return formatLocale(locale);
+    }
+    if (showNativeNames) {
+      try {
+        const intlLocale = new Intl.Locale(locale);
+        const displayNames = new Intl.DisplayNames([locale], {
+          type: "language"
+        });
+        return displayNames.of(intlLocale.language) || locale;
+      } catch {
+        return locale;
+      }
+    }
+    return locale;
+  };
+  if (variant === "select") {
+    return /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className,
+        style,
+        value: currentLocale,
+        disabled,
+        onChange: (e) => handleLocaleChange(e.target.value),
+        children: [
+          placeholder && /* @__PURE__ */ jsx3("option", { value: "", disabled: true, children: placeholder }),
+          filteredLocales.map((locale) => /* @__PURE__ */ jsx3("option", { value: locale, children: formatLocaleDisplay(locale) }, locale))
+        ]
+      }
+    );
+  }
+  if (variant === "buttons") {
+    return /* @__PURE__ */ jsx3("div", { className, style, children: filteredLocales.map((locale) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => handleLocaleChange(locale),
+        style: {
+          fontWeight: currentLocale === locale ? "bold" : "normal",
+          opacity: currentLocale === locale ? 1 : 0.7
+        },
+        children: formatLocaleDisplay(locale)
+      },
+      locale
+    )) });
+  }
+  return null;
+}
+function FlagLocaleSelector({
+  flagMap = {},
+  showFlags = true,
+  showLabels = true,
+  variant = "buttons",
+  ...props
+}) {
+  const [currentLocale, setLocale] = useLocale();
+  const { available } = useLocaleInfo();
+  const defaultFlagMap = {
+    en: "\u{1F1FA}\u{1F1F8}",
+    es: "\u{1F1EA}\u{1F1F8}",
+    fr: "\u{1F1EB}\u{1F1F7}",
+    de: "\u{1F1E9}\u{1F1EA}",
+    it: "\u{1F1EE}\u{1F1F9}",
+    pt: "\u{1F1F5}\u{1F1F9}",
+    ru: "\u{1F1F7}\u{1F1FA}",
+    ja: "\u{1F1EF}\u{1F1F5}",
+    ko: "\u{1F1F0}\u{1F1F7}",
+    zh: "\u{1F1E8}\u{1F1F3}"
+  };
+  const combinedFlagMap = { ...defaultFlagMap, ...flagMap };
+  const formatLocaleWithFlag = (locale) => {
+    const parts = [];
+    if (showFlags && combinedFlagMap[locale]) {
+      parts.push(combinedFlagMap[locale]);
+    }
+    if (showLabels) {
+      if (props.formatLocale) {
+        parts.push(props.formatLocale(locale));
+      } else {
+        try {
+          const displayNames = new Intl.DisplayNames([locale], {
+            type: "language"
+          });
+          const intlLocale = new Intl.Locale(locale);
+          parts.push(displayNames.of(intlLocale.language) || locale);
+        } catch {
+          parts.push(locale);
+        }
+      }
+    }
+    return parts.join(" ");
+  };
+  return /* @__PURE__ */ jsx3(
+    LocaleSelector,
+    {
+      ...props,
+      variant,
+      formatLocale: formatLocaleWithFlag,
+      showNativeNames: false
+    }
+  );
+}
+function CompactLocaleSelector({
+  maxVisibleLocales = 3,
+  ...props
+}) {
+  const { available } = useLocaleInfo();
+  if (available.length <= maxVisibleLocales) {
+    return /* @__PURE__ */ jsx3(LocaleSelector, { ...props, variant: "buttons" });
+  }
+  return /* @__PURE__ */ jsx3(LocaleSelector, { ...props, variant: "select" });
+}
+function AccessibleLocaleSelector({
+  ariaLabel = "Select language",
+  ariaDescribedBy,
+  ...props
+}) {
+  const [currentLocale] = useLocale();
+  const enhancedProps = {
+    ...props,
+    style: {
+      ...props.style,
+      // Ensure minimum touch target size for accessibility
+      minHeight: "44px",
+      minWidth: "44px"
+    }
+  };
+  if (props.variant === "select") {
+    return /* @__PURE__ */ jsx3(
+      LocaleSelector,
+      {
+        ...enhancedProps,
+        className: `${props.className || ""} accessible-locale-selector`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      className: props.className,
+      style: props.style,
+      children: [
+        /* @__PURE__ */ jsx3(LocaleSelector, { ...enhancedProps }),
+        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          "Current language: ",
+          currentLocale
+        ] })
+      ]
+    }
+  );
+}
+
+// src/index.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var VERSION = "0.1.0";
+function createI18nHook() {
+  return {
+    useTranslations: useTypedTranslations,
+    useT: useTypedTranslations
+  };
+}
+function createNamespaceHOC(namespace) {
+  return function withNamespace(Component) {
+    return function NamespacedComponent(props) {
+      return /* @__PURE__ */ jsx4(ScopedI18nProvider, { namespace, children: /* @__PURE__ */ jsx4(Component, { ...props }) });
+    };
+  };
+}
+var I18nErrorBoundary = class extends React4.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      const FallbackComponent = this.props.fallback;
+      if (FallbackComponent && this.state.error) {
+        return /* @__PURE__ */ jsx4(FallbackComponent, { error: this.state.error });
+      }
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            padding: "1rem",
+            border: "1px solid red",
+            borderRadius: "4px"
+          },
+          children: [
+            /* @__PURE__ */ jsx4("h3", { children: "Translation Error" }),
+            /* @__PURE__ */ jsx4("p", { children: "Something went wrong with translations." }),
+            process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ jsxs2("details", { children: [
+              /* @__PURE__ */ jsx4("summary", { children: "Error details" }),
+              /* @__PURE__ */ jsx4("pre", { children: this.state.error.message })
+            ] })
+          ]
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+export {
+  AccessibleLocaleSelector,
+  CompactLocaleSelector,
+  ConditionalTrans,
+  FlagLocaleSelector,
+  I18nErrorBoundary,
+  I18nProvider,
+  LocaleSelector,
+  PluralTrans,
+  RichTrans,
+  ScopedI18nProvider,
+  Trans,
+  TypedI18nProvider,
+  VERSION,
+  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
+};