@asafarim/shared-i18n 0.5.2 → 0.6.1

package/demo/src/locales/fr/demo.json

@@ -0,0 +1,85 @@
+{
+  "title": "Démonstration Shared i18n",
+  "subtitle": "Un wrapper React i18next léger avec persistance des cookies.",
+  "cta": "Changer de langue",
+  "overview": {
+    "heading": "Aperçu",
+    "description": "@asafarim/shared-i18n est un package d'internationalisation (i18n) de qualité production pour les applications React.",
+    "features": {
+      "title": "Fonctionnalités Principales",
+      "items": [
+        "Support multi-langues avec persistance des cookies",
+        "Détection de langue et fallback intégrés",
+        "Support TypeScript avec sécurité typage complet",
+        "Espaces de noms common et identity-portal préconfigurés",
+        "Intégration transparente avec react-i18next",
+        "Synchronisation des préférences de langue avec le backend",
+        "Utilitaires SSR-safe pour le rendu côté serveur"
+      ]
+    },
+    "useCases": {
+      "title": "Idéal Pour",
+      "items": [
+        "Applications globales nécessitant un support multi-langues",
+        "Plateformes enterprise avec préférences de langue utilisateur",
+        "Systèmes d'identité et d'authentification",
+        "Systèmes de gestion de contenu avec localisation",
+        "Applications SaaS servant des utilisateurs internationaux"
+      ]
+    }
+  },
+  "getStarted": {
+    "heading": "Premiers Pas",
+    "intro": "Apprenez à intégrer @asafarim/shared-i18n dans votre application React en quelques minutes.",
+    "steps": [
+      {
+        "title": "1. Installer le Package",
+        "description": "Ajoutez le package aux dépendances de votre projet.",
+        "code": "pnpm add @asafarim/shared-i18n"
+      },
+      {
+        "title": "2. Initialiser i18n dans Votre App",
+        "description": "Appelez initI18n au démarrage de l'application pour configurer les paramètres de langue.",
+        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: /* vos traductions */\n});"
+      },
+      {
+        "title": "3. Utiliser le Hook useLanguage",
+        "description": "Accédez au changement de langue et à l'état de langue actuel dans vos composants.",
+        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('en')}>\n  Vers Anglais\n</button>"
+      },
+      {
+        "title": "4. Traduire avec useTranslation",
+        "description": "Utilisez le hook useTranslation pour accéder aux chaînes traduites.",
+        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
+      },
+      {
+        "title": "5. Profiter de la Persistance des Cookies",
+        "description": "Les préférences de langue des utilisateurs sont automatiquement sauvegardées et restaurées.",
+        "code": "// Sauvegardé automatiquement via cookies\n// Aucune configuration supplémentaire requise !"
+      },
+      {
+        "title": "6. Synchroniser avec le Backend (Optionnel)",
+        "description": "Mettez à jour les préférences de langue des utilisateurs sur votre backend.",
+        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('fr');"
+      }
+    ],
+    "tips": {
+      "title": "Conseils Pro",
+      "items": [
+        "Utilisez les espaces de noms pour organiser les traductions par fonctionnalité",
+        "Profitez du composant Trans pour les traductions complexes avec variables",
+        "Configurez VITE_IDENTITY_API_URL pour la synchronisation backend",
+        "Vérifiez la détection de langue du navigateur avec getInitialLanguage()",
+        "Combinez avec les design tokens pour des thèmes cohérents dans toutes les langues"
+      ]
+    }
+  },
+  "status": {
+    "heading": "Statut en direct",
+    "cookie": "Cookie",
+    "backend": "Backend",
+    "simulate": "Simuler la synchronisation backend",
+    "resultOk": "Synchronisation backend réussie",
+    "resultFail": "Échec de la synchronisation backend"
+  }
+}

package/demo/src/locales/nl/demo.json

@@ -0,0 +1,85 @@
+{
+  "title": "Shared i18n demo",
+  "subtitle": "Een lichtgewicht React i18next wrapper met cookie persistentie.",
+  "cta": "Taal wisselen",
+  "overview": {
+    "heading": "Overzicht",
+    "description": "@asafarim/shared-i18n is een production-grade internationalisatie (i18n) pakket voor React-applicaties.",
+    "features": {
+      "title": "Belangrijkste Functies",
+      "items": [
+        "Ondersteuning voor meerdere talen met cookie persistentie",
+        "Ingebouwde taaldetectie en fallback",
+        "TypeScript-ondersteuning met volledige type veiligheid",
+        "Vooraf geconfigureerde common en identity-portal naamruimten",
+        "Naadloze integratie met react-i18next",
+        "Synchronisatie van taalvoorkeur met backend",
+        "SSR-veilige hulpprogramma's voor server-side rendering"
+      ]
+    },
+    "useCases": {
+      "title": "Ideaal Voor",
+      "items": [
+        "Globale applicaties die ondersteuning voor meerdere talen vereisen",
+        "Enterprise-platforms met taalvoorkeuren van gebruikers",
+        "Identiteits- en verificatiesystemen",
+        "Content management systemen met lokalisatie",
+        "SaaS-applicaties die internationale gebruikers bedienen"
+      ]
+    }
+  },
+  "getStarted": {
+    "heading": "Aan de Slag",
+    "intro": "Leer hoe je @asafarim/shared-i18n in minuten in je React-applicatie integreert.",
+    "steps": [
+      {
+        "title": "1. Installeer het Pakket",
+        "description": "Voeg het pakket toe aan je projectafhankelijkheden.",
+        "code": "pnpm add @asafarim/shared-i18n"
+      },
+      {
+        "title": "2. Initialiseer i18n in Je App",
+        "description": "Roep initI18n aan bij het opstarten van de applicatie om taalinstellingen te configureren.",
+        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: { /* je vertalingen */ }\n});"
+      },
+      {
+        "title": "3. Gebruik de useLanguage Hook",
+        "description": "Krijg toegang tot taalwisseling en huidige taaltoestand in je componenten.",
+        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('en')}>\n  Naar Engels\n</button>"
+      },
+      {
+        "title": "4. Vertaal met useTranslation",
+        "description": "Gebruik de useTranslation hook om toegang te krijgen tot vertaalde strings.",
+        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
+      },
+      {
+        "title": "5. Maak Gebruik van Cookie Persistentie",
+        "description": "Taalvoorkeuren van gebruikers worden automatisch opgeslagen en hersteld.",
+        "code": "// Automatisch opgeslagen via cookies\n// Geen extra setup vereist!"
+      },
+      {
+        "title": "6. Synchroniseer met Backend (Optioneel)",
+        "description": "Werk taalvoorkeuren van gebruikers bij op je backend.",
+        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('nl');"
+      }
+    ],
+    "tips": {
+      "title": "Pro Tips",
+      "items": [
+        "Gebruik naamruimten om vertalingen per functie in te delen",
+        "Maak gebruik van de Trans-component voor complexe vertalingen met variabelen",
+        "Stel VITE_IDENTITY_API_URL in voor backend-synchronisatie",
+        "Controleer browsertaldetectie met getInitialLanguage()",
+        "Combineer met design tokens voor consistent thema's in alle talen"
+      ]
+    }
+  },
+  "status": {
+    "heading": "Live status",
+    "cookie": "Cookie",
+    "backend": "Backend",
+    "simulate": "Backend synchronisatie simuleren",
+    "resultOk": "Backend synchronisatie geslaagd",
+    "resultFail": "Backend synchronisatie mislukt"
+  }
+}

package/demo/src/main.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { initI18n } from '@asafarim/shared-i18n'
+import App from './App'
+import './index.css'
+import enDemo from './locales/en/demo.json'
+import nlDemo from './locales/nl/demo.json'
+import frDemo from './locales/fr/demo.json'
+
+initI18n({
+  defaultNS: 'common',
+  ns: ['common', 'demo'],
+  resources: {
+    en: { demo: enDemo },
+    nl: { demo: nlDemo },
+    fr: { demo: frDemo }
+  }
+})
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/demo/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "../src/types", "../vite-env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }, { "path": "../tsconfig.json" }]
+}

package/demo/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/demo/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module 'vite/client' {
+  interface ImportMetaEnv {
+    readonly VITE_IDENTITY_API_URL?: string
+  }
+}

package/demo/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  base: process.env.BASE_PATH || '/shared-i18n/',
+  server: {
+    port: 5173,
+    open: true
+  }
+})

package/dist/components/LanguageSwitcher.d.ts

@@ -0,0 +1,20 @@
+import { type SupportedLanguage } from "../config/i18n.js";
+export interface LanguageSwitcherProps {
+    className?: string;
+    style?: React.CSSProperties;
+    languages?: readonly SupportedLanguage[];
+    variant?: "buttons" | "select" | "icon-dropdown";
+    disabled?: boolean;
+    getLabel?: (lang: SupportedLanguage) => string;
+    getIcon?: (lang: SupportedLanguage) => React.ReactNode;
+    onChanged?: (lang: SupportedLanguage) => void;
+    buttonClassName?: string;
+    selectClassName?: string;
+    showLabel?: boolean;
+    showIcon?: boolean;
+    showEmoji?: boolean;
+    unstyled?: boolean;
+    isToggler?: boolean;
+}
+export declare const LanguageSwitcher: ({ className, style, languages, variant, disabled, getLabel, getIcon, onChanged, buttonClassName, selectClassName, showLabel, showIcon, showEmoji, unstyled, isToggler, }: LanguageSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LanguageSwitcher.d.ts.map

package/dist/components/LanguageSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.d.ts","sourceRoot":"","sources":["../../components/LanguageSwitcher.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0E,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAInI,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACzC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,eAAe,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,MAAM,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAC;IACvD,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,GAAI,0KAgB9B,qBAAqB,4CAyJvB,CAAC"}

package/dist/components/LanguageSwitcher.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useLanguage } from "../hooks/useLanguage.js";
+import { LANGUAGE_CONFIGS, LANGUAGE_NAMES, LANGUAGE_EMOJIS, SUPPORTED_LANGUAGES } from "../config/i18n.js";
+import { getLanguageFlag } from "../utils/languageIcons.js";
+import styles from "./LanguageSwitcher.module.css";
+export const LanguageSwitcher = ({ className, style, languages = SUPPORTED_LANGUAGES, variant = "buttons", disabled = false, getLabel, getIcon, onChanged, buttonClassName, selectClassName, showLabel = true, showIcon = false, showEmoji = true, unstyled = false, isToggler = true, }) => {
+    const { language, changeLanguage, isChanging } = useLanguage();
+    const handleChange = async (lang) => {
+        await changeLanguage(lang);
+        onChanged?.(lang);
+    };
+    const isDisabled = isChanging || disabled;
+    const shouldUseToggler = isToggler && languages.length === 2 && variant === "select";
+    const getSelectClassName = () => {
+        if (selectClassName)
+            return selectClassName;
+        if (unstyled)
+            return className || "";
+        return `${styles.switcher} ${className || ""}`.trim();
+    };
+    const getButtonsClassName = () => {
+        if (unstyled)
+            return className || "";
+        return `${styles.switcher} ${className || ""}`.trim();
+    };
+    if (variant === "icon-dropdown") {
+        const [isOpen, setIsOpen] = useState(false);
+        const dropdownRef = useRef(null);
+        const currentLang = languages.find((lang) => lang === language);
+        const currentLabel = currentLang ? (getLabel ? getLabel(currentLang) : LANGUAGE_NAMES[currentLang]) : "";
+        const currentFlag = currentLang ? getLanguageFlag(currentLang) : "🌐";
+        useEffect(() => {
+            const handleClickOutside = (event) => {
+                if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                    setIsOpen(false);
+                }
+            };
+            if (isOpen) {
+                document.addEventListener("mousedown", handleClickOutside);
+                return () => document.removeEventListener("mousedown", handleClickOutside);
+            }
+        }, [isOpen]);
+        const handleSelect = async (lang) => {
+            await handleChange(lang);
+            setIsOpen(false);
+        };
+        return (_jsxs("div", { ref: dropdownRef, className: `${styles.iconDropdownContainer} ${selectClassName || className || ""}`.trim(), style: style, children: [_jsx("button", { className: styles.iconDropdownButton, onClick: () => setIsOpen(!isOpen), disabled: isDisabled, title: currentLabel, "aria-label": `Select language: ${currentLabel}`, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: currentFlag }), isOpen && (_jsx("div", { className: styles.iconDropdownMenu, role: "listbox", children: languages.map((lang) => (_jsx("button", { className: `${styles.iconDropdownOption} ${lang === language ? styles.active : ""}`, onClick: () => handleSelect(lang), role: "option", "aria-selected": lang === language, title: getLabel ? getLabel(lang) : LANGUAGE_NAMES[lang], children: showEmoji ? LANGUAGE_EMOJIS[lang] : (getLabel ? getLabel(lang) : LANGUAGE_NAMES[lang]) }, lang))) }))] }));
+    }
+    if (shouldUseToggler) {
+        const otherLang = languages.find((lang) => lang !== language);
+        const currentLangConfig = LANGUAGE_CONFIGS.find(config => config.code === language);
+        return (_jsx("button", { className: `${styles.toggler} ${selectClassName || className || ""}`.trim(), style: style, onClick: () => handleChange(otherLang), disabled: isDisabled, "aria-label": `Switch to ${getLabel ? getLabel(otherLang) : LANGUAGE_NAMES[otherLang]}`, title: `Switch to ${getLabel ? getLabel(otherLang) : LANGUAGE_NAMES[otherLang]}`, children: showEmoji ? (currentLangConfig && LANGUAGE_EMOJIS[currentLangConfig.code]) : (getLabel ? getLabel(language) : LANGUAGE_NAMES[language]) }));
+    }
+    if (variant === "select") {
+        return (_jsx("select", { className: getSelectClassName(), style: style, value: language, onChange: (e) => handleChange(e.target.value), disabled: isDisabled, children: languages.map((lang) => {
+                const displayText = showEmoji ? LANGUAGE_EMOJIS[lang] : (getLabel ? getLabel(lang) : LANGUAGE_NAMES[lang]);
+                return (_jsx("option", { value: lang, children: displayText }, lang));
+            }) }));
+    }
+    return (_jsx("div", { className: getButtonsClassName(), style: style, children: languages.map((lang) => {
+            const isActive = lang === language;
+            const btnClass = buttonClassName
+                ? `${buttonClassName}${isActive ? " active" : ""}`
+                : isActive
+                    ? "active"
+                    : "";
+            const label = getLabel ? getLabel(lang) : LANGUAGE_NAMES[lang];
+            const icon = getIcon ? getIcon(lang) : null;
+            return (_jsxs("button", { className: btnClass, onClick: () => handleChange(lang), disabled: isDisabled, "aria-pressed": isActive, "data-active": isActive, "aria-label": !showLabel ? label : undefined, title: !showLabel ? label : undefined, children: [showIcon && icon, showLabel && label] }, lang));
+        }) }));
+};

package/dist/components/LanguageSwitcher.module.css

@@ -0,0 +1,205 @@
+@import "@asafarim/design-tokens/css";
+
+.switcher {
+  display: flex;
+  gap: var(--asm-space-2);
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.switcher button {
+  padding: var(--asm-space-2) var(--asm-space-4);
+  border: 1px solid var(--asm-color-border);
+  background: var(--asm-color-surface);
+  border-radius: var(--asm-radius-md);
+  cursor: pointer;
+  font-size: var(--asm-font-size-sm);
+  font-weight: 500;
+  transition: all var(--asm-motion-duration-fast) var(--asm-motion-easing-standard);
+  display: flex;
+  align-items: center;
+  gap: var(--asm-space-2);
+  min-width: 2.5rem;
+  justify-content: center;
+  color: var(--asm-color-text);
+  white-space: nowrap;
+}
+
+.switcher button:hover:not(:disabled) {
+  background: var(--asm-color-primary-600);
+  color: var(--asm-color-bg);
+  border-color: var(--asm-color-primary-600);
+  box-shadow: var(--asm-effect-shadow-sm);
+}
+
+.switcher button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.switcher button.active {
+  background: var(--asm-color-primary-600);
+  color: var(--asm-color-bg);
+  border-color: var(--asm-color-primary-600);
+  box-shadow: var(--asm-effect-shadow-md);
+}
+
+.switcher button.active:hover:not(:disabled) {
+  background: var(--asm-color-primary-700);
+  border-color: var(--asm-color-primary-700);
+  box-shadow: var(--asm-effect-shadow-lg);
+}
+
+.switcher select {
+  padding: var(--asm-space-2) calc(var(--asm-space-4) * 2) var(--asm-space-2) var(--asm-space-3);
+  border: 1px solid var(--asm-color-border);
+  background: var(--asm-color-surface);
+  border-radius: var(--asm-radius-md);
+  cursor: pointer;
+  font-size: var(--asm-font-size-sm);
+  font-weight: 500;
+  appearance: none;
+  color: var(--asm-color-text);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--asm-space-3) center;
+  transition: all var(--asm-motion-duration-fast) var(--asm-motion-easing-standard);
+  white-space: nowrap;
+}
+
+.switcher select:hover:not(:disabled) {
+  border-color: var(--asm-color-primary-600);
+  background-color: var(--asm-color-surface-muted);
+  box-shadow: var(--asm-effect-shadow-sm);
+}
+
+.switcher select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.iconDropdownContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.iconDropdownButton {
+  padding: 0;
+  border: 1px solid var(--asm-color-border);
+  background: var(--asm-color-surface);
+  border-radius: var(--asm-radius-md);
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: var(--asm-color-text);
+  width: 2.75rem;
+  height: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--asm-motion-duration-fast) var(--asm-motion-easing-standard);
+  flex-shrink: 0;
+}
+
+.iconDropdownButton:hover:not(:disabled) {
+  border-color: var(--asm-color-primary-600);
+  background: var(--asm-color-surface-muted);
+  box-shadow: var(--asm-effect-shadow-sm);
+}
+
+.iconDropdownButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.iconDropdownMenu {
+  position: absolute;
+  top: calc(100% + var(--asm-space-2));
+  left: 0;
+  background: var(--asm-color-surface);
+  border: 1px solid var(--asm-color-border);
+  border-radius: var(--asm-radius-md);
+  box-shadow: var(--asm-effect-shadow-lg);
+  z-index: 1000;
+  min-width: 10rem;
+  overflow: hidden;
+}
+
+.iconDropdownOption {
+  display: flex;
+  align-items: center;
+  gap: var(--asm-space-2);
+  width: 100%;
+  padding: var(--asm-space-2) var(--asm-space-3);
+  border: none;
+  background: transparent;
+  color: var(--asm-color-text);
+  cursor: pointer;
+  font-size: var(--asm-font-size-sm);
+  font-weight: 500;
+  text-align: left;
+  transition: all var(--asm-motion-duration-fast) var(--asm-motion-easing-standard);
+  white-space: nowrap;
+}
+
+.iconDropdownOption:hover:not(:disabled) {
+  background: var(--asm-color-surface-muted);
+  color: var(--asm-color-text);
+}
+
+.iconDropdownOption.active {
+  background: var(--asm-color-primary-600);
+  color: var(--asm-color-bg);
+}
+
+.iconDropdownOption.active:hover {
+  background: var(--asm-color-primary-700);
+}
+
+.toggler {
+  padding: var(--asm-space-2) var(--asm-space-4);
+  border: 1px solid var(--asm-color-border);
+  background: var(--asm-color-transparent);
+  border-radius: var(--asm-radius-md);
+  cursor: pointer;
+  font-size: var(--asm-font-size-sm);
+  font-weight: 500;
+  transition: all var(--asm-motion-duration-fast) var(--asm-motion-easing-standard);
+  display: flex;
+  align-items: center;
+  gap: var(--asm-space-2);
+  color: var(--asm-color-text);
+  white-space: nowrap;
+}
+
+.toggler:hover:not(:disabled) {
+  background: var(--asm-color-primary-600);
+  color: var(--asm-color-bg);
+  border-color: var(--asm-color-primary-600);
+  box-shadow: var(--asm-effect-shadow-sm);
+}
+
+.toggler:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 640px) {
+  .switcher button {
+    padding: var(--asm-space-1) var(--asm-space-3);
+    font-size: var(--asm-font-size-xs);
+    min-width: 2.25rem;
+  }
+
+  .switcher select {
+    font-size: var(--asm-font-size-xs);
+  }
+
+  .toggler {
+    padding: var(--asm-space-1) var(--asm-space-2);
+    font-size: var(--asm-font-size-xs);
+  }
+
+  .togglerLabel {
+    padding: var(--asm-space-1) var(--asm-space-1);
+  }
+}

package/dist/config/i18n.d.ts

@@ -0,0 +1,46 @@
+import i18n from 'i18next';
+export declare const LANGUAGE_CONFIGS: readonly [{
+    readonly code: "en";
+    readonly name: "English";
+    readonly emoji: "🌍";
+}, {
+    readonly code: "nl";
+    readonly name: "Nederlands";
+    readonly emoji: "🇳🇱";
+}, {
+    readonly code: "fr";
+    readonly name: "Français";
+    readonly emoji: "🇫🇷";
+}, {
+    readonly code: "de";
+    readonly name: "Deutsch";
+    readonly emoji: "🇩🇪";
+}, {
+    readonly code: "es";
+    readonly name: "Español";
+    readonly emoji: "🇪🇸";
+}, {
+    readonly code: "it";
+    readonly name: "Italiano";
+    readonly emoji: "🇮🇹";
+}, {
+    readonly code: "pt";
+    readonly name: "Português";
+    readonly emoji: "🇵🇹";
+}];
+export type SupportedLanguage = typeof LANGUAGE_CONFIGS[number]['code'];
+export declare const SUPPORTED_LANGUAGES: readonly SupportedLanguage[];
+export declare const LANGUAGE_NAMES: Record<SupportedLanguage, string>;
+export declare const LANGUAGE_EMOJIS: Record<SupportedLanguage, string>;
+export declare const DEFAULT_LANGUAGE: SupportedLanguage;
+export declare const LANGUAGE_COOKIE_NAME = "preferredLanguage";
+export interface I18nConfig {
+    defaultNS?: string;
+    ns?: string[];
+    resources?: Record<string, Record<string, any>>;
+    supportedLngs?: string[];
+    defaultLanguage?: string;
+}
+export declare const initI18n: (config?: I18nConfig) => import("i18next").i18n;
+export default i18n;
+//# sourceMappingURL=i18n.d.ts.map

package/dist/config/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../config/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAC;AAY3B,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAiW,CAAC;AAC/X,MAAM,MAAM,iBAAiB,GAAG,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,eAAO,MAAM,mBAAmB,EAAkD,SAAS,iBAAiB,EAAE,CAAC;AAE/G,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAEvB,CAAC;AAEvC,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAExB,CAAC;AAEvC,eAAO,MAAM,gBAAgB,EAAE,iBAAwB,CAAC;AACxD,eAAO,MAAM,oBAAoB,sBAAsB,CAAC;AAExD,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,QAAQ,GAAI,SAAS,UAAU,2BAuD3C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/config/i18n.js

@@ -0,0 +1,66 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+// Import common translations
+import enCommon from '../locales/en/common.json';
+import nlCommon from '../locales/nl/common.json';
+// Import identity-portal translations
+import enIdentityPortal from '../locales/en/identity-portal.json';
+import nlIdentityPortal from '../locales/nl/identity-portal.json';
+export const LANGUAGE_CONFIGS = [{ code: 'en', name: 'English', emoji: '🌍' }, { code: 'nl', name: 'Nederlands', emoji: '🇳🇱' }, { code: 'fr', name: 'Français', emoji: '🇫🇷' }, { code: 'de', name: 'Deutsch', emoji: '🇩🇪' }, { code: 'es', name: 'Español', emoji: '🇪🇸' }, { code: 'it', name: 'Italiano', emoji: '🇮🇹' }, { code: 'pt', name: 'Português', emoji: '🇵🇹' }];
+export const SUPPORTED_LANGUAGES = LANGUAGE_CONFIGS.map(config => config.code);
+export const LANGUAGE_NAMES = Object.fromEntries(LANGUAGE_CONFIGS.map(config => [config.code, config.name]));
+export const LANGUAGE_EMOJIS = Object.fromEntries(LANGUAGE_CONFIGS.map(config => [config.code, config.emoji]));
+export const DEFAULT_LANGUAGE = 'en';
+export const LANGUAGE_COOKIE_NAME = 'preferredLanguage';
+export const initI18n = (config) => {
+    const resources = config?.resources;
+    const supportedLngs = config?.supportedLngs;
+    const defaultLanguage = config?.defaultLanguage;
+    const defaultNS = config?.defaultNS;
+    const ns = config?.ns;
+    // const {
+    //   defaultNS = 'common',
+    //   ns = ['common', 'identityPortal'],
+    //   resources,
+    //   supportedLngs,
+    //   defaultLanguage,
+    // } = config || {};
+    // Merge common translations with app-specific resources
+    const mergedResources = { ...config?.resources };
+    mergedResources.en = {
+        common: enCommon,
+        identityPortal: enIdentityPortal,
+        ...(resources?.en || {}),
+    };
+    mergedResources.nl = {
+        common: nlCommon,
+        identityPortal: nlIdentityPortal,
+        ...(resources?.nl || {}),
+    };
+    const finalSupportedLngs = supportedLngs ?? Object.keys(mergedResources);
+    const fallbackLng = defaultLanguage ?? DEFAULT_LANGUAGE;
+    i18n
+        .use(initReactI18next)
+        .use(LanguageDetector)
+        .init({
+        resources: mergedResources,
+        fallbackLng,
+        defaultNS,
+        ns,
+        supportedLngs: finalSupportedLngs,
+        detection: {
+            order: ['cookie', 'navigator'],
+            caches: ['cookie'],
+            lookupCookie: LANGUAGE_COOKIE_NAME
+        },
+        interpolation: {
+            escapeValue: false // React already escapes
+        },
+        react: {
+            useSuspense: false
+        }
+    });
+    return i18n;
+};
+export default i18n;