@intlayer/design-system 3.5.3 → 3.5.5

package/dist/components/LocaleSwitcherDropDown/LocaleSwitcher.cjs

@@ -1,31 +1,73 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
+const client = require("@intlayer/config/client");
 const core = require("@intlayer/core");
+const Fuse = require("fuse.js");
 const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const reactIntlayer = require("react-intlayer");
+const components_Button_Button = require("../Button/Button.cjs");
 const components_Container_index = require("../Container/index.cjs");
 const components_DropDown_index = require("../DropDown/index.cjs");
-const ButtonItem = ({
-  children,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "relative w-full p-0.5", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  "button",
-  {
-    className: "hover:bg-text/10 focus:bg-text-opposite/20 aria-selected:bg-text/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 dark:aria-selected:bg-text-opposite/20 w-full cursor-pointer rounded-lg px-3 py-1 text-left focus:outline-none disabled:text-white/25 aria-selected:hover:cursor-default",
-    "data-mode": "system",
-    ...props,
-    children
-  }
-) });
+const components_Input_Input = require("../Input/Input.cjs");
+require("../Input/InputPassword.cjs");
+require("../Input/Checkbox.cjs");
+const components_LocaleSwitcherDropDown_localeSwitcher_content = require("./localeSwitcher.content.cjs");
 const DROPDOWN_IDENTIFIER = "locale-switcher";
 const LocaleSwitcher = ({
   locale,
   localeList,
   availableLocales,
   fullLocaleName = true,
-  setLocale
+  setLocale,
+  panelProps
 }) => {
   let localeName = "Select a locale";
+  const { switchTo, searchInput, localeSwitcherLabel, languageListLabel } = reactIntlayer.useDictionary(components_LocaleSwitcherDropDown_localeSwitcher_content);
+  const inputRef = require$$0.useRef(null);
+  const multilingualAvailableLocales = require$$0.useMemo(
+    () => localeList.map((localeEl) => {
+      const englishName = core.getLocaleName(localeEl, client.Locales.ENGLISH);
+      const currentLocaleName = core.getLocaleName(localeEl, locale);
+      const ownLocaleName = core.getLocaleName(localeEl);
+      return {
+        locale: localeEl,
+        englishName,
+        currentLocaleName,
+        ownLocaleName
+      };
+    }),
+    [localeList, locale]
+  );
+  const [results, setResults] = require$$0.useState(
+    multilingualAvailableLocales
+  );
+  const fuse = require$$0.useMemo(() => {
+    const fuseOptions = {
+      keys: [
+        { name: "ownLocaleName", weight: 0.4 },
+        { name: "englishName", weight: 0.2 },
+        { name: "currentLocaleName", weight: 0.2 },
+        { name: "locale", weight: 0.2 }
+      ],
+      threshold: 0.02
+      // Defines how fuzzy the matching should be (lower is more strict)
+    };
+    return new Fuse(multilingualAvailableLocales, fuseOptions);
+  }, [multilingualAvailableLocales]);
+  const handleSearch = require$$0.useCallback(
+    (searchQuery) => {
+      if (searchQuery) {
+        const searchResults = fuse.search(searchQuery).map((result) => result.item);
+        setResults(searchResults);
+      } else {
+        setResults(multilingualAvailableLocales);
+      }
+    },
+    [fuse, multilingualAvailableLocales]
+  );
   if (locale) {
     localeName = fullLocaleName ? core.getLocaleName(locale) : locale.toUpperCase();
   }
@@ -33,41 +75,79 @@ const LocaleSwitcher = ({
     "div",
     {
       className: "border-text text-text dark:border-text-dark dark:text-text-dark rounded-xl border transition-colors",
-      "aria-label": "Language switcher",
+      "aria-label": localeSwitcherLabel,
       children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(components_DropDown_index.DropDown, { identifier: DROPDOWN_IDENTIFIER, children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_DropDown_index.DropDown.Trigger, { identifier: DROPDOWN_IDENTIFIER, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "text-nowrap px-2", children: localeName }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.MoveVertical, { className: "w-5 self-center" })
+        ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-          components_DropDown_index.DropDown.Trigger,
+          components_DropDown_index.DropDown.Panel,
           {
             identifier: DROPDOWN_IDENTIFIER,
-            "aria-label": "Language selector",
-            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "px-2", children: localeName }),
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.MoveVertical, { className: "w-5 self-center" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_DropDown_index.DropDown.Panel, { identifier: DROPDOWN_IDENTIFIER, isOverable: true, isFocusable: true, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-          components_Container_index.Container,
-          {
-            className: "min-w-28 p-1",
-            separator: "y",
-            role: "listbox",
-            "aria-label": "Language list",
-            children: localeList.map((lang) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-              ButtonItem,
+            isOverable: true,
+            isFocusable: true,
+            ...panelProps,
+            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+              components_Container_index.Container,
               {
-                onClick: () => setLocale(lang),
-                "aria-label": `Switch to ${lang}`,
-                disabled: !(availableLocales ?? localeList).includes(lang),
-                role: "option",
-                "aria-selected": locale === lang,
-                lang,
-                children: core.getLocaleName(lang)
-              },
-              lang
-            ))
+                className: "max-h-[80vh] min-w-28",
+                separator: "y",
+                role: "listbox",
+                transparency: "sm",
+                "aria-label": languageListLabel,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                    components_Input_Input.Input,
+                    {
+                      type: "search",
+                      placeholder: searchInput.placeholder,
+                      onChange: (e) => handleSearch(e.target.value),
+                      ref: inputRef
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("ol", { className: "divide-text/20 dark:divide-text-dark/20 divide-y divide-dashed overflow-y-auto p-1", children: results.map(
+                    ({ locale: localeItem, currentLocaleName, ownLocaleName }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("li", { className: "px-1.5 py-1", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                      components_Button_Button.Button,
+                      {
+                        onClick: () => setLocale(localeItem),
+                        label: `${switchTo} ${currentLocaleName}`,
+                        disabled: !(availableLocales ?? localeList).includes(localeItem),
+                        role: "option",
+                        isActive: locale === localeItem,
+                        variant: "hoverable",
+                        color: "text",
+                        isFullWidth: true,
+                        textAlign: "left",
+                        children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+                          "div",
+                          {
+                            className: "flex flex-row items-center justify-between gap-3 px-2 py-1",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex flex-col text-nowrap", children: [
+                                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                                  "span",
+                                  {
+                                    dir: core.getHTMLTextDir(localeItem),
+                                    lang: localeItem,
+                                    children: ownLocaleName
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "text-neutral dark:text-neutral-dark text-xs", children: currentLocaleName })
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "text-neutral dark:text-neutral-dark text-sm", children: localeItem.toUpperCase() })
+                            ]
+                          },
+                          locale
+                        )
+                      }
+                    ) }, localeItem)
+                  ) })
+                ]
+              }
+            )
           }
-        ) })
+        )
       ] })
     }
   );

package/dist/components/LocaleSwitcherDropDown/LocaleSwitcher.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LocaleSwitcher.cjs","sources":["../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport { getLocaleName } from '@intlayer/core';\nimport { MoveVertical } from 'lucide-react';\nimport type { ButtonHTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\nconst ButtonItem: FC<ButtonHTMLAttributes<HTMLButtonElement>> = ({\n  children,\n  ...props\n}) => (\n  <div className=\"relative w-full p-0.5\">\n    <button\n      className=\"hover:bg-text/10 focus:bg-text-opposite/20 aria-selected:bg-text/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 dark:aria-selected:bg-text-opposite/20 w-full cursor-pointer rounded-lg px-3 py-1 text-left focus:outline-none disabled:text-white/25 aria-selected:hover:cursor-default\"\n      data-mode=\"system\"\n      {...props}\n    >\n      {children}\n    </button>\n  </div>\n);\n\nexport type LocaleSwitcherProps = {\n  locale?: Locales;\n  localeList: Locales[];\n  availableLocales?: Locales[];\n  fullLocaleName?: boolean;\n  setLocale: (locale: Locales) => void;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n  locale,\n  localeList,\n  availableLocales,\n  fullLocaleName = true,\n  setLocale,\n}) => {\n  let localeName = 'Select a locale';\n\n  if (locale) {\n    localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n  }\n\n  return (\n    <div\n      className=\"border-text text-text dark:border-text-dark dark:text-text-dark rounded-xl border transition-colors\"\n      aria-label=\"Language switcher\"\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger\n          identifier={DROPDOWN_IDENTIFIER}\n          aria-label=\"Language selector\"\n        >\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"px-2\">{localeName}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel identifier={DROPDOWN_IDENTIFIER} isOverable isFocusable>\n          <Container\n            className=\"min-w-28 p-1\"\n            separator=\"y\"\n            role=\"listbox\"\n            aria-label=\"Language list\"\n          >\n            {localeList.map((lang) => (\n              <ButtonItem\n                key={lang}\n                onClick={() => setLocale(lang)}\n                aria-label={`Switch to ${lang}`}\n                disabled={!(availableLocales ?? localeList).includes(lang)}\n                role=\"option\"\n                aria-selected={locale === lang}\n                lang={lang}\n              >\n                {getLocaleName(lang)}\n              </ButtonItem>\n            ))}\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"names":["jsx","getLocaleName","jsxs","DropDown","MoveVertical","Container"],"mappings":";;;;;;;AAOA,MAAM,aAA0D,CAAC;AAAA,EAC/D;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,yBACb,UAAAA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAU;AAAA,IACT,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,GACF;AAWF,MAAM,sBAAsB;AAErB,MAAM,iBAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AACF,MAAM;AACJ,MAAI,aAAa;AAEjB,MAAI,QAAQ;AACV,iBAAa,iBAAiBC,KAAA,cAAc,MAAM,IAAI,OAAO,YAAY;AAAA,EAAA;AAIzE,SAAAD,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAW;AAAA,MAEX,UAAAE,2BAAA,kBAAA,KAACC,0BAAS,UAAA,EAAA,YAAY,qBACpB,UAAA;AAAA,QAAAH,2BAAA,kBAAA;AAAA,UAACG,0BAAAA,SAAS;AAAA,UAAT;AAAA,YACC,YAAY;AAAA,YACZ,cAAW;AAAA,YAEX,UAAAD,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,4CACb,UAAA;AAAA,cAACF,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,QAAQ,UAAW,YAAA;AAAA,cAClCA,2BAAAA,kBAAAA,IAACI,YAAa,cAAA,EAAA,WAAU,kBAAkB,CAAA;AAAA,YAAA,EAC5C,CAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEAJ,2BAAAA,kBAAAA,IAACG,mCAAS,OAAT,EAAe,YAAY,qBAAqB,YAAU,MAAC,aAAW,MACrE,UAAAH,2BAAA,kBAAA;AAAA,UAACK,2BAAA;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEV,UAAA,WAAW,IAAI,CAAC,SACfL,2BAAA,kBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,SAAS,MAAM,UAAU,IAAI;AAAA,gBAC7B,cAAY,aAAa,IAAI;AAAA,gBAC7B,UAAU,EAAE,oBAAoB,YAAY,SAAS,IAAI;AAAA,gBACzD,MAAK;AAAA,gBACL,iBAAe,WAAW;AAAA,gBAC1B;AAAA,gBAEC,6BAAc,IAAI;AAAA,cAAA;AAAA,cARd;AAAA,YAUR,CAAA;AAAA,UAAA;AAAA,QAAA,EAEL,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"LocaleSwitcher.cjs","sources":["../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/config/client';\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport Fuse, { IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { useCallback, useMemo, useRef, useState, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\nimport localeSwitcherContent from './localeSwitcher.content';\n\nexport type LocaleSwitcherProps = {\n  locale?: Locales;\n  localeList: Locales[];\n  availableLocales?: Locales[];\n  fullLocaleName?: boolean;\n  setLocale: (locale: Locales) => void;\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\ntype MultilingualAvailableLocales = {\n  locale: Locales;\n  englishName: string;\n  currentLocaleName: string;\n  ownLocaleName: string;\n};\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n  locale,\n  localeList,\n  availableLocales,\n  fullLocaleName = true,\n  setLocale,\n  panelProps,\n}) => {\n  let localeName = 'Select a locale';\n  const { switchTo, searchInput, localeSwitcherLabel, languageListLabel } =\n    useDictionary(localeSwitcherContent);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n    () =>\n      localeList.map((localeEl) => {\n        const englishName = getLocaleName(localeEl, Locales.ENGLISH);\n        const currentLocaleName = getLocaleName(localeEl, locale);\n        const ownLocaleName = getLocaleName(localeEl);\n        return {\n          locale: localeEl,\n          englishName,\n          currentLocaleName,\n          ownLocaleName,\n        };\n      }),\n    [localeList, locale]\n  );\n\n  const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n    multilingualAvailableLocales\n  );\n\n  // Create a new Fuse instance with the options and documentation data\n  const fuse = useMemo(() => {\n    const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n      keys: [\n        { name: 'ownLocaleName', weight: 0.4 },\n        { name: 'englishName', weight: 0.2 },\n        { name: 'currentLocaleName', weight: 0.2 },\n        { name: 'locale', weight: 0.2 },\n      ],\n      threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n    };\n\n    return new Fuse(multilingualAvailableLocales, fuseOptions);\n  }, [multilingualAvailableLocales]);\n\n  const handleSearch = useCallback(\n    (searchQuery: string) => {\n      if (searchQuery) {\n        // Perform search on every input change\n        const searchResults = fuse\n          .search(searchQuery)\n          .map((result) => result.item);\n        setResults(searchResults);\n      } else {\n        setResults(multilingualAvailableLocales);\n      }\n    },\n    [fuse, multilingualAvailableLocales]\n  );\n\n  if (locale) {\n    localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n  }\n\n  return (\n    <div\n      className=\"border-text text-text dark:border-text-dark dark:text-text-dark rounded-xl border transition-colors\"\n      aria-label={localeSwitcherLabel}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-nowrap px-2\">{localeName}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"sm\"\n            aria-label={languageListLabel}\n          >\n            <div className=\"p-3\">\n              <Input\n                type=\"search\"\n                placeholder={searchInput.placeholder}\n                onChange={(e) => handleSearch(e.target.value)}\n                ref={inputRef}\n              />\n            </div>\n            <ol className=\"divide-text/20 dark:divide-text-dark/20 divide-y divide-dashed overflow-y-auto p-1\">\n              {results.map(\n                ({ locale: localeItem, currentLocaleName, ownLocaleName }) => (\n                  <li className=\"px-1.5 py-1\" key={localeItem}>\n                    <Button\n                      onClick={() => setLocale(localeItem)}\n                      label={`${switchTo} ${currentLocaleName}`}\n                      disabled={\n                        !(availableLocales ?? localeList).includes(localeItem)\n                      }\n                      role=\"option\"\n                      isActive={locale === localeItem}\n                      variant=\"hoverable\"\n                      color=\"text\"\n                      isFullWidth\n                      textAlign=\"left\"\n                    >\n                      <div\n                        className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\"\n                        key={locale}\n                      >\n                        <div className=\"flex flex-col text-nowrap\">\n                          <span\n                            dir={getHTMLTextDir(localeItem)}\n                            lang={localeItem}\n                          >\n                            {ownLocaleName}\n                          </span>\n                          <span className=\"text-neutral dark:text-neutral-dark text-xs\">\n                            {currentLocaleName}\n                          </span>\n                        </div>\n                        <span className=\"text-neutral dark:text-neutral-dark text-sm\">\n                          {localeItem.toUpperCase()}\n                        </span>\n                      </div>\n                    </Button>\n                  </li>\n                )\n              )}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"names":["useDictionary","localeSwitcherContent","useRef","useMemo","getLocaleName","Locales","useState","useCallback","jsx","jsxs","DropDown","MoveVertical","Container","Input","Button","getHTMLTextDir"],"mappings":"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"}

package/dist/components/LocaleSwitcherDropDown/LocaleSwitcher.d.ts

@@ -1,11 +1,13 @@
 import { Locales } from '@intlayer/config/client';
 import { FC } from 'react';
+import { PanelProps } from '../DropDown';
 export type LocaleSwitcherProps = {
     locale?: Locales;
     localeList: Locales[];
     availableLocales?: Locales[];
     fullLocaleName?: boolean;
     setLocale: (locale: Locales) => void;
+    panelProps?: Omit<PanelProps, 'identifier'>;
 };
 export declare const LocaleSwitcher: FC<LocaleSwitcherProps>;
 //# sourceMappingURL=LocaleSwitcher.d.ts.map

package/dist/components/LocaleSwitcherDropDown/LocaleSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocaleSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,KAAK,EAAwB,EAAE,EAAE,MAAM,OAAO,CAAC;AAmBtD,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,EAAE,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAsDlD,CAAC"}
+{"version":3,"file":"LocaleSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAIlD,OAAO,EAA0C,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,EAAE,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;CAC7C,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAmJlD,CAAC"}

package/dist/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs

@@ -1,29 +1,71 @@
+"use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
-import { getLocaleName } from "@intlayer/core";
+import { Locales } from "@intlayer/config/client";
+import { getLocaleName, getHTMLTextDir } from "@intlayer/core";
+import Fuse from "fuse.js";
 import { MoveVertical } from "lucide-react";
+import { useRef, useMemo, useState, useCallback } from "react";
+import { useDictionary } from "react-intlayer";
+import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
 import { DropDown } from "../DropDown/index.mjs";
-const ButtonItem = ({
-  children,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-full p-0.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-  "button",
-  {
-    className: "hover:bg-text/10 focus:bg-text-opposite/20 aria-selected:bg-text/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 dark:aria-selected:bg-text-opposite/20 w-full cursor-pointer rounded-lg px-3 py-1 text-left focus:outline-none disabled:text-white/25 aria-selected:hover:cursor-default",
-    "data-mode": "system",
-    ...props,
-    children
-  }
-) });
+import { Input } from "../Input/Input.mjs";
+import "../Input/InputPassword.mjs";
+import "../Input/Checkbox.mjs";
+import localeSwitcherContent from "./localeSwitcher.content.mjs";
 const DROPDOWN_IDENTIFIER = "locale-switcher";
 const LocaleSwitcher = ({
   locale,
   localeList,
   availableLocales,
   fullLocaleName = true,
-  setLocale
+  setLocale,
+  panelProps
 }) => {
   let localeName = "Select a locale";
+  const { switchTo, searchInput, localeSwitcherLabel, languageListLabel } = useDictionary(localeSwitcherContent);
+  const inputRef = useRef(null);
+  const multilingualAvailableLocales = useMemo(
+    () => localeList.map((localeEl) => {
+      const englishName = getLocaleName(localeEl, Locales.ENGLISH);
+      const currentLocaleName = getLocaleName(localeEl, locale);
+      const ownLocaleName = getLocaleName(localeEl);
+      return {
+        locale: localeEl,
+        englishName,
+        currentLocaleName,
+        ownLocaleName
+      };
+    }),
+    [localeList, locale]
+  );
+  const [results, setResults] = useState(
+    multilingualAvailableLocales
+  );
+  const fuse = useMemo(() => {
+    const fuseOptions = {
+      keys: [
+        { name: "ownLocaleName", weight: 0.4 },
+        { name: "englishName", weight: 0.2 },
+        { name: "currentLocaleName", weight: 0.2 },
+        { name: "locale", weight: 0.2 }
+      ],
+      threshold: 0.02
+      // Defines how fuzzy the matching should be (lower is more strict)
+    };
+    return new Fuse(multilingualAvailableLocales, fuseOptions);
+  }, [multilingualAvailableLocales]);
+  const handleSearch = useCallback(
+    (searchQuery) => {
+      if (searchQuery) {
+        const searchResults = fuse.search(searchQuery).map((result) => result.item);
+        setResults(searchResults);
+      } else {
+        setResults(multilingualAvailableLocales);
+      }
+    },
+    [fuse, multilingualAvailableLocales]
+  );
   if (locale) {
     localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();
   }
@@ -31,41 +73,79 @@ const LocaleSwitcher = ({
     "div",
     {
       className: "border-text text-text dark:border-text-dark dark:text-text-dark rounded-xl border transition-colors",
-      "aria-label": "Language switcher",
+      "aria-label": localeSwitcherLabel,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropDown, { identifier: DROPDOWN_IDENTIFIER, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown.Trigger, { identifier: DROPDOWN_IDENTIFIER, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-nowrap px-2", children: localeName }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(MoveVertical, { className: "w-5 self-center" })
+        ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DropDown.Trigger,
+          DropDown.Panel,
           {
             identifier: DROPDOWN_IDENTIFIER,
-            "aria-label": "Language selector",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2", children: localeName }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(MoveVertical, { className: "w-5 self-center" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown.Panel, { identifier: DROPDOWN_IDENTIFIER, isOverable: true, isFocusable: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Container,
-          {
-            className: "min-w-28 p-1",
-            separator: "y",
-            role: "listbox",
-            "aria-label": "Language list",
-            children: localeList.map((lang) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ButtonItem,
+            isOverable: true,
+            isFocusable: true,
+            ...panelProps,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Container,
               {
-                onClick: () => setLocale(lang),
-                "aria-label": `Switch to ${lang}`,
-                disabled: !(availableLocales ?? localeList).includes(lang),
-                role: "option",
-                "aria-selected": locale === lang,
-                lang,
-                children: getLocaleName(lang)
-              },
-              lang
-            ))
+                className: "max-h-[80vh] min-w-28",
+                separator: "y",
+                role: "listbox",
+                transparency: "sm",
+                "aria-label": languageListLabel,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Input,
+                    {
+                      type: "search",
+                      placeholder: searchInput.placeholder,
+                      onChange: (e) => handleSearch(e.target.value),
+                      ref: inputRef
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: "divide-text/20 dark:divide-text-dark/20 divide-y divide-dashed overflow-y-auto p-1", children: results.map(
+                    ({ locale: localeItem, currentLocaleName, ownLocaleName }) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "px-1.5 py-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        onClick: () => setLocale(localeItem),
+                        label: `${switchTo} ${currentLocaleName}`,
+                        disabled: !(availableLocales ?? localeList).includes(localeItem),
+                        role: "option",
+                        isActive: locale === localeItem,
+                        variant: "hoverable",
+                        color: "text",
+                        isFullWidth: true,
+                        textAlign: "left",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                          "div",
+                          {
+                            className: "flex flex-row items-center justify-between gap-3 px-2 py-1",
+                            children: [
+                              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col text-nowrap", children: [
+                                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                  "span",
+                                  {
+                                    dir: getHTMLTextDir(localeItem),
+                                    lang: localeItem,
+                                    children: ownLocaleName
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-neutral dark:text-neutral-dark text-xs", children: currentLocaleName })
+                              ] }),
+                              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-neutral dark:text-neutral-dark text-sm", children: localeItem.toUpperCase() })
+                            ]
+                          },
+                          locale
+                        )
+                      }
+                    ) }, localeItem)
+                  ) })
+                ]
+              }
+            )
           }
-        ) })
+        )
       ] })
     }
   );

package/dist/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LocaleSwitcher.mjs","sources":["../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport { getLocaleName } from '@intlayer/core';\nimport { MoveVertical } from 'lucide-react';\nimport type { ButtonHTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\nconst ButtonItem: FC<ButtonHTMLAttributes<HTMLButtonElement>> = ({\n  children,\n  ...props\n}) => (\n  <div className=\"relative w-full p-0.5\">\n    <button\n      className=\"hover:bg-text/10 focus:bg-text-opposite/20 aria-selected:bg-text/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 dark:aria-selected:bg-text-opposite/20 w-full cursor-pointer rounded-lg px-3 py-1 text-left focus:outline-none disabled:text-white/25 aria-selected:hover:cursor-default\"\n      data-mode=\"system\"\n      {...props}\n    >\n      {children}\n    </button>\n  </div>\n);\n\nexport type LocaleSwitcherProps = {\n  locale?: Locales;\n  localeList: Locales[];\n  availableLocales?: Locales[];\n  fullLocaleName?: boolean;\n  setLocale: (locale: Locales) => void;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n  locale,\n  localeList,\n  availableLocales,\n  fullLocaleName = true,\n  setLocale,\n}) => {\n  let localeName = 'Select a locale';\n\n  if (locale) {\n    localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n  }\n\n  return (\n    <div\n      className=\"border-text text-text dark:border-text-dark dark:text-text-dark rounded-xl border transition-colors\"\n      aria-label=\"Language switcher\"\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger\n          identifier={DROPDOWN_IDENTIFIER}\n          aria-label=\"Language selector\"\n        >\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"px-2\">{localeName}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel identifier={DROPDOWN_IDENTIFIER} isOverable isFocusable>\n          <Container\n            className=\"min-w-28 p-1\"\n            separator=\"y\"\n            role=\"listbox\"\n            aria-label=\"Language list\"\n          >\n            {localeList.map((lang) => (\n              <ButtonItem\n                key={lang}\n                onClick={() => setLocale(lang)}\n                aria-label={`Switch to ${lang}`}\n                disabled={!(availableLocales ?? localeList).includes(lang)}\n                role=\"option\"\n                aria-selected={locale === lang}\n                lang={lang}\n              >\n                {getLocaleName(lang)}\n              </ButtonItem>\n            ))}\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"names":["jsx","jsxs"],"mappings":";;;;;AAOA,MAAM,aAA0D,CAAC;AAAA,EAC/D;AAAA,EACA,GAAG;AACL,MACEA,kCAAAA,IAAC,OAAI,EAAA,WAAU,yBACb,UAAAA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAU;AAAA,IACT,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,GACF;AAWF,MAAM,sBAAsB;AAErB,MAAM,iBAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AACF,MAAM;AACJ,MAAI,aAAa;AAEjB,MAAI,QAAQ;AACV,iBAAa,iBAAiB,cAAc,MAAM,IAAI,OAAO,YAAY;AAAA,EAAA;AAIzE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAW;AAAA,MAEX,UAAAC,kCAAA,KAAC,UAAS,EAAA,YAAY,qBACpB,UAAA;AAAA,QAAAD,kCAAA;AAAA,UAAC,SAAS;AAAA,UAAT;AAAA,YACC,YAAY;AAAA,YACZ,cAAW;AAAA,YAEX,UAAAC,kCAAA,KAAC,OAAI,EAAA,WAAU,4CACb,UAAA;AAAA,cAACD,kCAAA,IAAA,OAAA,EAAI,WAAU,QAAQ,UAAW,YAAA;AAAA,cAClCA,kCAAAA,IAAC,cAAa,EAAA,WAAU,kBAAkB,CAAA;AAAA,YAAA,EAC5C,CAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEAA,kCAAAA,IAAC,SAAS,OAAT,EAAe,YAAY,qBAAqB,YAAU,MAAC,aAAW,MACrE,UAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEV,UAAA,WAAW,IAAI,CAAC,SACfA,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,SAAS,MAAM,UAAU,IAAI;AAAA,gBAC7B,cAAY,aAAa,IAAI;AAAA,gBAC7B,UAAU,EAAE,oBAAoB,YAAY,SAAS,IAAI;AAAA,gBACzD,MAAK;AAAA,gBACL,iBAAe,WAAW;AAAA,gBAC1B;AAAA,gBAEC,wBAAc,IAAI;AAAA,cAAA;AAAA,cARd;AAAA,YAUR,CAAA;AAAA,UAAA;AAAA,QAAA,EAEL,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"LocaleSwitcher.mjs","sources":["../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/config/client';\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport Fuse, { IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { useCallback, useMemo, useRef, useState, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\nimport localeSwitcherContent from './localeSwitcher.content';\n\nexport type LocaleSwitcherProps = {\n  locale?: Locales;\n  localeList: Locales[];\n  availableLocales?: Locales[];\n  fullLocaleName?: boolean;\n  setLocale: (locale: Locales) => void;\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\ntype MultilingualAvailableLocales = {\n  locale: Locales;\n  englishName: string;\n  currentLocaleName: string;\n  ownLocaleName: string;\n};\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n  locale,\n  localeList,\n  availableLocales,\n  fullLocaleName = true,\n  setLocale,\n  panelProps,\n}) => {\n  let localeName = 'Select a locale';\n  const { switchTo, searchInput, localeSwitcherLabel, languageListLabel } =\n    useDictionary(localeSwitcherContent);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n    () =>\n      localeList.map((localeEl) => {\n        const englishName = getLocaleName(localeEl, Locales.ENGLISH);\n        const currentLocaleName = getLocaleName(localeEl, locale);\n        const ownLocaleName = getLocaleName(localeEl);\n        return {\n          locale: localeEl,\n          englishName,\n          currentLocaleName,\n          ownLocaleName,\n        };\n      }),\n    [localeList, locale]\n  );\n\n  const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n    multilingualAvailableLocales\n  );\n\n  // Create a new Fuse instance with the options and documentation data\n  const fuse = useMemo(() => {\n    const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n      keys: [\n        { name: 'ownLocaleName', weight: 0.4 },\n        { name: 'englishName', weight: 0.2 },\n        { name: 'currentLocaleName', weight: 0.2 },\n        { name: 'locale', weight: 0.2 },\n      ],\n      threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n    };\n\n    return new Fuse(multilingualAvailableLocales, fuseOptions);\n  }, [multilingualAvailableLocales]);\n\n  const handleSearch = useCallback(\n    (searchQuery: string) => {\n      if (searchQuery) {\n        // Perform search on every input change\n        const searchResults = fuse\n          .search(searchQuery)\n          .map((result) => result.item);\n        setResults(searchResults);\n      } else {\n        setResults(multilingualAvailableLocales);\n      }\n    },\n    [fuse, multilingualAvailableLocales]\n  );\n\n  if (locale) {\n    localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n  }\n\n  return (\n    <div\n      className=\"border-text text-text dark:border-text-dark dark:text-text-dark rounded-xl border transition-colors\"\n      aria-label={localeSwitcherLabel}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-nowrap px-2\">{localeName}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"sm\"\n            aria-label={languageListLabel}\n          >\n            <div className=\"p-3\">\n              <Input\n                type=\"search\"\n                placeholder={searchInput.placeholder}\n                onChange={(e) => handleSearch(e.target.value)}\n                ref={inputRef}\n              />\n            </div>\n            <ol className=\"divide-text/20 dark:divide-text-dark/20 divide-y divide-dashed overflow-y-auto p-1\">\n              {results.map(\n                ({ locale: localeItem, currentLocaleName, ownLocaleName }) => (\n                  <li className=\"px-1.5 py-1\" key={localeItem}>\n                    <Button\n                      onClick={() => setLocale(localeItem)}\n                      label={`${switchTo} ${currentLocaleName}`}\n                      disabled={\n                        !(availableLocales ?? localeList).includes(localeItem)\n                      }\n                      role=\"option\"\n                      isActive={locale === localeItem}\n                      variant=\"hoverable\"\n                      color=\"text\"\n                      isFullWidth\n                      textAlign=\"left\"\n                    >\n                      <div\n                        className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\"\n                        key={locale}\n                      >\n                        <div className=\"flex flex-col text-nowrap\">\n                          <span\n                            dir={getHTMLTextDir(localeItem)}\n                            lang={localeItem}\n                          >\n                            {ownLocaleName}\n                          </span>\n                          <span className=\"text-neutral dark:text-neutral-dark text-xs\">\n                            {currentLocaleName}\n                          </span>\n                        </div>\n                        <span className=\"text-neutral dark:text-neutral-dark text-sm\">\n                          {localeItem.toUpperCase()}\n                        </span>\n                      </div>\n                    </Button>\n                  </li>\n                )\n              )}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"names":["jsx","jsxs"],"mappings":"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"}

package/dist/components/LocaleSwitcherDropDown/localeSwitcher.content.cjs

@@ -0,0 +1,86 @@
+"use strict";
+const intlayer = require("intlayer");
+const localeSwitcherContent = {
+  key: "locale-switcher",
+  content: {
+    localeSwitcherLabel: intlayer.t({
+      en: "Language switcher",
+      "en-GB": "Language switcher",
+      fr: "Changer de langue",
+      es: "Cambiar idioma",
+      de: "Sprachwechsler",
+      ja: "言語スイッチャー",
+      ko: "언어 스위치",
+      zh: "语言切换器",
+      it: "Cambia lingua",
+      pt: "Mudar idioma",
+      hi: "भाषा स्विचर",
+      ar: "مبدل اللغة",
+      ru: "Переключатель языка"
+    }),
+    languageListLabel: intlayer.t({
+      en: "Language list",
+      "en-GB": "Language list",
+      fr: "Liste des langues",
+      es: "Lista de idiomas",
+      de: "Sprachliste",
+      ja: "言語リスト",
+      ko: "언어 목록",
+      zh: "语言列表",
+      it: "Elenco lingue",
+      pt: "Lista de idiomas",
+      hi: "भाषा सूची",
+      ar: "قائمة اللغات",
+      ru: "Список языков"
+    }),
+    switchTo: intlayer.t({
+      en: "Switch to",
+      fr: "Passer à",
+      es: "Cambiar a",
+      "en-GB": "Switch to",
+      de: "Wechseln Sie zu",
+      ja: "に切り替える",
+      ko: "전환",
+      zh: "切换到",
+      it: "Passa a",
+      pt: "Mudar para",
+      hi: "स्विच करें",
+      ar: "التبديل إلى",
+      ru: "Переключиться на"
+    }),
+    searchInput: {
+      text: intlayer.t({
+        en: "Search Locale",
+        "en-GB": "Search Locale",
+        fr: "Rechercher la locale",
+        es: "Buscar idioma",
+        de: "Sprache durchsuchen",
+        ja: "ロケールを検索",
+        ko: "언어 검색",
+        zh: "搜索语言",
+        it: "Cerca lingua",
+        pt: "Pesquisar idioma",
+        hi: "भाषा खोजें",
+        ar: "بحث اللغة",
+        ru: "Поиск языка"
+      }),
+      placeholder: intlayer.t({
+        en: "Search a locale",
+        "en-GB": "Search a locale",
+        fr: "Rechercher une locale",
+        es: "Buscar un idioma",
+        de: "Sprache suchen",
+        ja: "ロケールを検索",
+        ko: "언어 검색",
+        zh: "搜索语言",
+        it: "Cerca una lingua",
+        pt: "Pesquisar um idioma",
+        hi: "भाषा खोजें",
+        ar: "بحث اللغة",
+        ru: "Поиск языка"
+      })
+    }
+  }
+};
+module.exports = localeSwitcherContent;
+//# sourceMappingURL=localeSwitcher.content.cjs.map

package/dist/components/LocaleSwitcherDropDown/localeSwitcher.content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"localeSwitcher.content.cjs","sources":["../../../src/components/LocaleSwitcherDropDown/localeSwitcher.content.ts"],"sourcesContent":["import { t, type DeclarationContent } from 'intlayer';\n\nconst localeSwitcherContent = {\n  key: 'locale-switcher',\n  content: {\n    localeSwitcherLabel: t({\n      en: 'Language switcher',\n      'en-GB': 'Language switcher',\n      fr: 'Changer de langue',\n      es: 'Cambiar idioma',\n      de: 'Sprachwechsler',\n      ja: '言語スイッチャー',\n      ko: '언어 스위치',\n      zh: '语言切换器',\n      it: 'Cambia lingua',\n      pt: 'Mudar idioma',\n      hi: 'भाषा स्विचर',\n      ar: 'مبدل اللغة',\n      ru: 'Переключатель языка',\n    }),\n    languageListLabel: t({\n      en: 'Language list',\n      'en-GB': 'Language list',\n      fr: 'Liste des langues',\n      es: 'Lista de idiomas',\n      de: 'Sprachliste',\n      ja: '言語リスト',\n      ko: '언어 목록',\n      zh: '语言列表',\n      it: 'Elenco lingue',\n      pt: 'Lista de idiomas',\n      hi: 'भाषा सूची',\n      ar: 'قائمة اللغات',\n      ru: 'Список языков',\n    }),\n    switchTo: t({\n      en: 'Switch to',\n      fr: 'Passer à',\n      es: 'Cambiar a',\n      'en-GB': 'Switch to',\n      de: 'Wechseln Sie zu',\n      ja: 'に切り替える',\n      ko: '전환',\n      zh: '切换到',\n      it: 'Passa a',\n      pt: 'Mudar para',\n      hi: 'स्विच करें',\n      ar: 'التبديل إلى',\n      ru: 'Переключиться на',\n    }),\n    searchInput: {\n      text: t({\n        en: 'Search Locale',\n        'en-GB': 'Search Locale',\n        fr: 'Rechercher la locale',\n        es: 'Buscar idioma',\n        de: 'Sprache durchsuchen',\n        ja: 'ロケールを検索',\n        ko: '언어 검색',\n        zh: '搜索语言',\n        it: 'Cerca lingua',\n        pt: 'Pesquisar idioma',\n        hi: 'भाषा खोजें',\n        ar: 'بحث اللغة',\n        ru: 'Поиск языка',\n      }),\n      placeholder: t({\n        en: 'Search a locale',\n        'en-GB': 'Search a locale',\n        fr: 'Rechercher une locale',\n        es: 'Buscar un idioma',\n        de: 'Sprache suchen',\n        ja: 'ロケールを検索',\n        ko: '언어 검색',\n        zh: '搜索语言',\n        it: 'Cerca una lingua',\n        pt: 'Pesquisar um idioma',\n        hi: 'भाषा खोजें',\n        ar: 'بحث اللغة',\n        ru: 'Поиск языка',\n      }),\n    },\n  },\n} satisfies DeclarationContent;\n\nexport default localeSwitcherContent;\n"],"names":["t"],"mappings":";;AAEA,MAAM,wBAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,SAAS;AAAA,IACP,qBAAqBA,SAAAA,EAAE;AAAA,MACrB,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,IACD,mBAAmBA,SAAAA,EAAE;AAAA,MACnB,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,IACD,UAAUA,SAAAA,EAAE;AAAA,MACV,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,IACD,aAAa;AAAA,MACX,MAAMA,SAAAA,EAAE;AAAA,QACN,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA,CACL;AAAA,MACD,aAAaA,SAAAA,EAAE;AAAA,QACb,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACL,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;;"}

package/dist/components/LocaleSwitcherDropDown/localeSwitcher.content.d.ts

@@ -0,0 +1,14 @@
+declare const localeSwitcherContent: {
+    key: string;
+    content: {
+        localeSwitcherLabel: import('@intlayer/core').TranslationContent<string>;
+        languageListLabel: import('@intlayer/core').TranslationContent<string>;
+        switchTo: import('@intlayer/core').TranslationContent<string>;
+        searchInput: {
+            text: import('@intlayer/core').TranslationContent<string>;
+            placeholder: import('@intlayer/core').TranslationContent<string>;
+        };
+    };
+};
+export default localeSwitcherContent;
+//# sourceMappingURL=localeSwitcher.content.d.ts.map

package/dist/components/LocaleSwitcherDropDown/localeSwitcher.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localeSwitcher.content.d.ts","sourceRoot":"","sources":["../../../src/components/LocaleSwitcherDropDown/localeSwitcher.content.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,qBAAqB;;;;;;;;;;;CAiFG,CAAC;AAE/B,eAAe,qBAAqB,CAAC"}