@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs

@@ -0,0 +1,179 @@
+'use client';
+
+
+import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
+import { Container } from "../Container/index.mjs";
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
+import { Input } from "../Input/Input.mjs";
+import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../SwitchSelector/index.mjs";
+import { DropDown } from "../DropDown/index.mjs";
+import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
+import { Check, Globe, MoveVertical } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { getHTMLTextDir, getLocaleName } from "@intlayer/core";
+import { useIntlayer, useLocale } from "react-intlayer";
+import { Locales } from "@intlayer/types";
+import Fuse from "fuse.js";
+
+//#region src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
+const DROPDOWN_IDENTIFIER = "locale-switcher-content";
+const LocaleSwitcherContent = ({ panelProps, isMultilingual = true }) => {
+	const { switchTo, searchInput, localeSwitcherLabel, languageListLabel, seeAllLocalesSwitch } = useIntlayer("locale-switcher-content");
+	const inputRef = useRef(null);
+	const { locale } = useLocale();
+	const { availableLocales, selectedLocales, setSelectedLocales } = useLocaleSwitcherContent();
+	const multilingualAvailableLocales = useMemo(() => availableLocales.map((localeEl) => {
+		return {
+			locale: localeEl,
+			englishName: getLocaleName(localeEl, Locales.ENGLISH),
+			currentLocaleName: getLocaleName(localeEl, locale),
+			ownLocaleName: getLocaleName(localeEl)
+		};
+	}), [availableLocales, locale]);
+	const [results, setResults] = useState(multilingualAvailableLocales);
+	const [seeAllLocales, setSeeAllLocales] = usePersistedStore("locale-content-selector-see-all-locales", false);
+	const fuse = useMemo(() => {
+		return new Fuse(multilingualAvailableLocales, {
+			keys: [
+				{
+					name: "ownLocaleName",
+					weight: .4
+				},
+				{
+					name: "englishName",
+					weight: .2
+				},
+				{
+					name: "currentLocaleName",
+					weight: .2
+				},
+				{
+					name: "locale",
+					weight: .2
+				}
+			],
+			threshold: .02
+		});
+	}, [multilingualAvailableLocales]);
+	const handleSearch = useCallback((searchQuery) => {
+		if (searchQuery) setResults(fuse.search(searchQuery).map((result) => result.item));
+		else setResults(multilingualAvailableLocales);
+	}, [fuse, multilingualAvailableLocales]);
+	const handleClickLocale = (localeItem) => {
+		if (isMultilingual) if (selectedLocales.includes(localeItem)) {
+			if (selectedLocales.length > 1) setSelectedLocales((prev) => prev.filter((el) => el !== localeItem));
+		} else setSelectedLocales((prev) => [...prev, localeItem]);
+		else setSelectedLocales([localeItem]);
+	};
+	const handleSeeAllLocales = (value) => {
+		setSeeAllLocales(value);
+		if (value) setSelectedLocales(availableLocales);
+		else setSelectedLocales([locale]);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-xl border border-text text-text transition-colors",
+		"aria-label": localeSwitcherLabel.value,
+		children: /* @__PURE__ */ jsxs(DropDown, {
+			identifier: DROPDOWN_IDENTIFIER,
+			children: [/* @__PURE__ */ jsx(DropDown.Trigger, {
+				identifier: DROPDOWN_IDENTIFIER,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center justify-between",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "px-2 py-1",
+						children: /* @__PURE__ */ jsx(Globe, { size: 18 })
+					}), /* @__PURE__ */ jsx(MoveVertical, {
+						className: "self-center",
+						size: 18
+					})]
+				})
+			}), /* @__PURE__ */ jsx(DropDown.Panel, {
+				identifier: DROPDOWN_IDENTIFIER,
+				isOverable: true,
+				isFocusable: true,
+				className: "right-0 left-auto",
+				...panelProps,
+				children: /* @__PURE__ */ jsxs(Container, {
+					className: "max-h-[80vh] min-w-28",
+					separator: "y",
+					role: "listbox",
+					transparency: "sm",
+					border: true,
+					roundedSize: "2xl",
+					borderColor: "text",
+					"aria-label": languageListLabel.value,
+					children: [isMultilingual && /* @__PURE__ */ jsx("div", {
+						className: "m-auto p-2",
+						children: /* @__PURE__ */ jsx(SwitchSelector, {
+							defaultValue: false,
+							onChange: handleSeeAllLocales,
+							color: SwitchSelectorColor.TEXT,
+							size: SwitchSelectorSize.SM,
+							className: "!w-60",
+							choices: [{
+								content: seeAllLocalesSwitch.true.value,
+								value: true
+							}, {
+								content: seeAllLocalesSwitch.false.value,
+								value: false
+							}]
+						})
+					}), !(isMultilingual && seeAllLocales) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+						className: "p-3",
+						children: /* @__PURE__ */ jsx(Input, {
+							type: "search",
+							"aria-label": searchInput.ariaLabel.value,
+							placeholder: searchInput.placeholder.value,
+							onChange: (e) => handleSearch(e.target.value),
+							ref: inputRef
+						})
+					}), /* @__PURE__ */ jsx("ol", {
+						className: "divide-y divide-dashed divide-text/20 overflow-y-auto p-1",
+						children: results.map(({ locale: localeItem, currentLocaleName, ownLocaleName }) => /* @__PURE__ */ jsx("li", {
+							className: "px-1.5 py-1",
+							children: /* @__PURE__ */ jsx(Button, {
+								onClick: () => handleClickLocale(localeItem),
+								label: `${switchTo} ${currentLocaleName}`,
+								disabled: !(availableLocales ?? availableLocales).includes(localeItem),
+								isActive: selectedLocales.includes(localeItem),
+								variant: ButtonVariant.HOVERABLE,
+								color: ButtonColor.TEXT,
+								isFullWidth: true,
+								textAlign: ButtonTextAlign.LEFT,
+								size: ButtonSize.SM,
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-row items-center justify-between gap-3 px-2 py-1",
+									children: [isMultilingual && /* @__PURE__ */ jsx("div", {
+										className: "w-4",
+										children: selectedLocales.includes(localeItem) && /* @__PURE__ */ jsx(Check, { className: "size-full" })
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1",
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: "flex flex-col text-nowrap",
+											children: [/* @__PURE__ */ jsx("span", {
+												dir: getHTMLTextDir(localeItem),
+												lang: localeItem,
+												children: ownLocaleName
+											}), /* @__PURE__ */ jsx("span", {
+												className: "text-neutral text-xs",
+												children: currentLocaleName
+											})]
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-neutral text-sm",
+											children: localeItem.toUpperCase()
+										})]
+									})]
+								})
+							})
+						}, localeItem))
+					})] })]
+				})
+			})]
+		})
+	});
+};
+
+//#endregion
+export { LocaleSwitcherContent };
+//# sourceMappingURL=LocaleSwitcherContent.mjs.map

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocaleSwitcherContent.mjs","names":["LocaleSwitcherContent: FC<LocaleSwitcherContentProps>","multilingualAvailableLocales: MultilingualAvailableLocales[]"],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport { Locales, type LocalesValues } from '@intlayer/types';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { Check, Globe, MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport { usePersistedStore } from '../../hooks';\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\nimport {\n  SwitchSelector,\n  SwitchSelectorColor,\n  SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { useLocaleSwitcherContent } from './LocaleSwitcherContentContext';\n\nexport type LocaleSwitcherContentProps = {\n  panelProps?: Omit<PanelProps, 'identifier'>;\n  isMultilingual?: boolean;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher-content';\n\ntype MultilingualAvailableLocales = {\n  locale: LocalesValues;\n  englishName: string;\n  currentLocaleName: string;\n  ownLocaleName: string;\n};\n\nexport const LocaleSwitcherContent: FC<LocaleSwitcherContentProps> = ({\n  panelProps,\n  isMultilingual = true,\n}) => {\n  const {\n    switchTo,\n    searchInput,\n    localeSwitcherLabel,\n    languageListLabel,\n    seeAllLocalesSwitch,\n  } = useIntlayer('locale-switcher-content');\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { locale } = useLocale();\n  const { availableLocales, selectedLocales, setSelectedLocales } =\n    useLocaleSwitcherContent();\n\n  const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n    () =>\n      availableLocales.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    [availableLocales, locale]\n  );\n\n  const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n    multilingualAvailableLocales\n  );\n  const [seeAllLocales, setSeeAllLocales] = usePersistedStore(\n    'locale-content-selector-see-all-locales',\n    false\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  const handleClickLocale = (localeItem: LocalesValues) => {\n    if (isMultilingual) {\n      if (selectedLocales.includes(localeItem)) {\n        if (selectedLocales.length > 1) {\n          setSelectedLocales((prev) => prev.filter((el) => el !== localeItem));\n        }\n      } else {\n        setSelectedLocales((prev) => [...prev, localeItem]);\n      }\n    } else {\n      setSelectedLocales([localeItem]);\n    }\n  };\n\n  const handleSeeAllLocales = (value: boolean) => {\n    setSeeAllLocales(value);\n    if (value) {\n      setSelectedLocales(availableLocales);\n    } else {\n      setSelectedLocales([locale]);\n    }\n  };\n\n  return (\n    <div\n      className=\"rounded-xl border border-text text-text transition-colors\"\n      aria-label={localeSwitcherLabel.value}\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=\"px-2 py-1\">\n              <Globe size={18} />\n            </div>\n            <MoveVertical className=\"self-center\" size={18} />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          className=\"right-0 left-auto\"\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"sm\"\n            border\n            roundedSize=\"2xl\"\n            borderColor=\"text\"\n            aria-label={languageListLabel.value}\n          >\n            {isMultilingual && (\n              <div className=\"m-auto p-2\">\n                <SwitchSelector\n                  defaultValue={false}\n                  onChange={handleSeeAllLocales}\n                  color={SwitchSelectorColor.TEXT}\n                  size={SwitchSelectorSize.SM}\n                  className=\"!w-60\"\n                  choices={[\n                    {\n                      content: seeAllLocalesSwitch.true.value,\n                      value: true,\n                    },\n                    {\n                      content: seeAllLocalesSwitch.false.value,\n                      value: false,\n                    },\n                  ]}\n                />\n              </div>\n            )}\n\n            {!(isMultilingual && seeAllLocales) && (\n              <>\n                <div className=\"p-3\">\n                  <Input\n                    type=\"search\"\n                    aria-label={searchInput.ariaLabel.value}\n                    placeholder={searchInput.placeholder.value}\n                    onChange={(e) => handleSearch(e.target.value)}\n                    ref={inputRef}\n                  />\n                </div>\n                <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n                  {results.map(\n                    ({\n                      locale: localeItem,\n                      currentLocaleName,\n                      ownLocaleName,\n                    }) => (\n                      <li className=\"px-1.5 py-1\" key={localeItem}>\n                        <Button\n                          onClick={() => handleClickLocale(localeItem)}\n                          label={`${switchTo} ${currentLocaleName}`}\n                          disabled={\n                            !(availableLocales ?? availableLocales).includes(\n                              localeItem\n                            )\n                          }\n                          isActive={selectedLocales.includes(localeItem)}\n                          variant={ButtonVariant.HOVERABLE}\n                          color={ButtonColor.TEXT}\n                          isFullWidth\n                          textAlign={ButtonTextAlign.LEFT}\n                          size={ButtonSize.SM}\n                        >\n                          <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n                            {isMultilingual && (\n                              <div className=\"w-4\">\n                                {selectedLocales.includes(localeItem) && (\n                                  <Check className=\"size-full\" />\n                                )}\n                              </div>\n                            )}\n                            <div className=\"flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1\">\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 text-xs\">\n                                  {currentLocaleName}\n                                </span>\n                              </div>\n                              <span className=\"text-neutral text-sm\">\n                                {localeItem.toUpperCase()}\n                              </span>\n                            </div>\n                          </div>\n                        </Button>\n                      </li>\n                    )\n                  )}\n                </ol>\n              </>\n            )}\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs

@@ -0,0 +1,31 @@
+'use client';
+
+
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useLocale } from "react-intlayer";
+
+//#region src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx
+const LocaleSwitcherContentContext = createContext({
+	availableLocales: [],
+	selectedLocales: [],
+	setSelectedLocales: () => {}
+});
+const useLocaleSwitcherContent = () => useContext(LocaleSwitcherContentContext);
+const LocaleSwitcherContentProvider = ({ availableLocales, defaultSelectedLocales, children }) => {
+	const { locale } = useLocale();
+	const [selectedLocales, setSelectedLocales] = usePersistedStore("locale-content-selector-selected-locales", defaultSelectedLocales ?? [locale]);
+	return /* @__PURE__ */ jsx(LocaleSwitcherContentContext, {
+		value: {
+			availableLocales,
+			selectedLocales,
+			setSelectedLocales
+		},
+		children
+	});
+};
+
+//#endregion
+export { LocaleSwitcherContentProvider, useLocaleSwitcherContent };
+//# sourceMappingURL=LocaleSwitcherContentContext.mjs.map

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocaleSwitcherContentContext.mjs","names":["LocaleSwitcherContentProvider: FC<\n  PropsWithChildren<LocaleSwitcherContentProviderProps>\n>"],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx"],"sourcesContent":["'use client';\n\nimport type { LocalesValues } from 'intlayer';\nimport {\n  createContext,\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type SetStateAction,\n  useContext,\n} from 'react';\nimport { useLocale } from 'react-intlayer';\nimport { usePersistedStore } from '../../hooks';\n\ntype LocaleSwitcherContentContextProps = {\n  availableLocales: LocalesValues[];\n  selectedLocales: LocalesValues[];\n  setSelectedLocales: Dispatch<SetStateAction<LocalesValues[]>>;\n};\n\nconst LocaleSwitcherContentContext =\n  createContext<LocaleSwitcherContentContextProps>({\n    availableLocales: [],\n    selectedLocales: [],\n    setSelectedLocales: () => {},\n  });\n\nexport const useLocaleSwitcherContent = () =>\n  useContext(LocaleSwitcherContentContext);\n\ntype LocaleSwitcherContentProviderProps = {\n  availableLocales: LocalesValues[];\n  defaultSelectedLocales?: LocalesValues[];\n};\n\nexport const LocaleSwitcherContentProvider: FC<\n  PropsWithChildren<LocaleSwitcherContentProviderProps>\n> = ({ availableLocales, defaultSelectedLocales, children }) => {\n  const { locale } = useLocale();\n\n  const [selectedLocales, setSelectedLocales] = usePersistedStore<\n    LocalesValues[]\n  >(\n    'locale-content-selector-selected-locales',\n    defaultSelectedLocales ?? [locale]\n  );\n\n  return (\n    <LocaleSwitcherContentContext\n      value={{\n        availableLocales,\n        selectedLocales,\n        setSelectedLocales,\n      }}\n    >\n      {children}\n    </LocaleSwitcherContentContext>\n  );\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAM,+BACJ,cAAiD;CAC/C,kBAAkB,EAAE;CACpB,iBAAiB,EAAE;CACnB,0BAA0B;CAC3B,CAAC;AAEJ,MAAa,iCACX,WAAW,6BAA6B;AAO1C,MAAaA,iCAER,EAAE,kBAAkB,wBAAwB,eAAe;CAC9D,MAAM,EAAE,WAAW,WAAW;CAE9B,MAAM,CAAC,iBAAiB,sBAAsB,kBAG5C,4CACA,0BAA0B,CAAC,OAAO,CACnC;AAED,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACD;EAEA;GAC4B"}

package/dist/esm/components/LocaleSwitcherContentDropDown/index.mjs

@@ -0,0 +1,4 @@
+import { LocaleSwitcherContentProvider, useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
+import { LocaleSwitcherContent } from "./LocaleSwitcherContent.mjs";
+
+export { LocaleSwitcherContent, LocaleSwitcherContentProvider, useLocaleSwitcherContent };

package/dist/esm/components/LocaleSwitcherContentDropDown/localeSwitcher.content.mjs

@@ -0,0 +1,176 @@
+import { t } from "intlayer";
+
+//#region src/components/LocaleSwitcherContentDropDown/localeSwitcher.content.ts
+const localeSwitcherContent = {
+	key: "locale-switcher-content",
+	content: {
+		localeSwitcherLabel: 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: "Переключатель языка",
+			tr: "Dil değiştirici",
+			pl: "Przełącznik języka",
+			id: "Pengalih bahasa",
+			vi: "Chuyển đổi ngôn ngữ"
+		}),
+		languageListLabel: 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: "Список языков",
+			tr: "Dil listesi",
+			pl: "Lista języków",
+			id: "Daftar bahasa",
+			vi: "Danh sách ngôn ngữ"
+		}),
+		switchTo: 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: "Переключиться на",
+			tr: "Geçiş yap",
+			pl: "Przełącz na",
+			id: "Beralih ke",
+			vi: "Chuyển sang"
+		}),
+		searchInput: {
+			text: 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: "Поиск языка",
+				tr: "Dil ara",
+				pl: "Wyszukaj lokalizację",
+				id: "Cari locale",
+				vi: "Tìm Locale"
+			}),
+			placeholder: 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: "Поиск языка",
+				tr: "Dil ara",
+				pl: "Wyszukaj lokalizację",
+				id: "Cari locale",
+				vi: "Tìm một Locale"
+			}),
+			ariaLabel: t({
+				en: "Language search",
+				"en-GB": "Language search",
+				fr: "Recherche de langue",
+				es: "Búsqueda de idioma",
+				de: "Sprachsuche",
+				ja: "言語検索",
+				ko: "언어 검색",
+				zh: "语言搜索",
+				it: "Ricerca lingua",
+				pt: "Pesquisa de idioma",
+				hi: "भाषा खोजें",
+				ar: "بحث اللغة",
+				ru: "Поиск языка",
+				tr: "Dil ara",
+				pl: "Wyszukiwanie lokalizacji",
+				id: "Pencarian locale",
+				vi: "Tìm kiếm Locale"
+			})
+		},
+		seeAllLocalesSwitch: {
+			true: t({
+				en: "See all locales",
+				"en-GB": "See all locales",
+				fr: "Voir toutes les langues",
+				es: "Ver todos los idiomas",
+				de: "Alle Sprachen anzeigen",
+				ja: "すべての言語を表示",
+				ko: "모든 언어 보기",
+				zh: "查看所有语言",
+				it: "Vedi tutte le lingue",
+				pt: "Ver todos os idiomas",
+				hi: "सभी भाषाओं को देखें",
+				ar: "عرض جميع اللغات",
+				ru: "Показать все языки",
+				tr: "Tüm dilleri göster",
+				pl: "Pokaż wszystkie lokalizacje",
+				id: "Tampilkan semua locale",
+				vi: "Xem tất cả các Locale"
+			}),
+			false: t({
+				en: "See only selected locales",
+				"en-GB": "See only selected locales",
+				fr: "Voir seulement les langues sélectionnées",
+				es: "Ver solo los idiomas seleccionados",
+				de: "Nur ausgewählte Sprachen anzeigen",
+				ja: "選択された言語のみを表示",
+				ko: "선택한 언어만 보기",
+				zh: "仅查看选定的语言",
+				it: "Vedi solo le lingue selezionate",
+				pt: "Ver apenas os idiomas selecionados",
+				hi: "केवल चुने गए भाषाओं को देखें",
+				ar: "عرض اللغات المحددة فقط",
+				ru: "Показать только выбранные языки",
+				tr: "Yalnızca seçilen dilleri göster",
+				pl: "Pokaż tylko wybrane lokalizacje",
+				id: "Tampilkan hanya locale yang dipilih",
+				vi: "Chỉ xem các Locale đã chọn"
+			})
+		}
+	},
+	title: "Locale switcher content",
+	description: "Content strings for the locale switcher component, including labels, placeholders, and toggle options for displaying available locales.",
+	tags: [
+		"component",
+		"locale switcher",
+		"i18n"
+	]
+};
+var localeSwitcher_content_default = localeSwitcherContent;
+
+//#endregion
+export { localeSwitcher_content_default as default };
+//# sourceMappingURL=localeSwitcher.content.mjs.map

package/dist/esm/components/LocaleSwitcherContentDropDown/localeSwitcher.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"localeSwitcher.content.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/localeSwitcher.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst localeSwitcherContent = {\n  key: 'locale-switcher-content',\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      tr: 'Dil değiştirici',\n      pl: 'Przełącznik języka',\n      id: 'Pengalih bahasa',\n      vi: 'Chuyển đổi ngôn ngữ',\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      tr: 'Dil listesi',\n      pl: 'Lista języków',\n      id: 'Daftar bahasa',\n      vi: 'Danh sách ngôn ngữ',\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      tr: 'Geçiş yap',\n      pl: 'Przełącz na',\n      id: 'Beralih ke',\n      vi: 'Chuyển sang',\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        tr: 'Dil ara',\n        pl: 'Wyszukaj lokalizację',\n        id: 'Cari locale',\n        vi: 'Tìm Locale',\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        tr: 'Dil ara',\n        pl: 'Wyszukaj lokalizację',\n        id: 'Cari locale',\n        vi: 'Tìm một Locale',\n      }),\n      ariaLabel: t({\n        en: 'Language search',\n        'en-GB': 'Language search',\n        fr: 'Recherche de langue',\n        es: 'Búsqueda de idioma',\n        de: 'Sprachsuche',\n        ja: '言語検索',\n        ko: '언어 검색',\n        zh: '语言搜索',\n        it: 'Ricerca lingua',\n        pt: 'Pesquisa de idioma',\n        hi: 'भाषा खोजें',\n        ar: 'بحث اللغة',\n        ru: 'Поиск языка',\n        tr: 'Dil ara',\n        pl: 'Wyszukiwanie lokalizacji',\n        id: 'Pencarian locale',\n        vi: 'Tìm kiếm Locale',\n      }),\n    },\n    seeAllLocalesSwitch: {\n      true: t({\n        en: 'See all locales',\n        'en-GB': 'See all locales',\n        fr: 'Voir toutes les langues',\n        es: 'Ver todos los idiomas',\n        de: 'Alle Sprachen anzeigen',\n        ja: 'すべての言語を表示',\n        ko: '모든 언어 보기',\n        zh: '查看所有语言',\n        it: 'Vedi tutte le lingue',\n        pt: 'Ver todos os idiomas',\n        hi: 'सभी भाषाओं को देखें',\n        ar: 'عرض جميع اللغات',\n        ru: 'Показать все языки',\n        tr: 'Tüm dilleri göster',\n        pl: 'Pokaż wszystkie lokalizacje',\n        id: 'Tampilkan semua locale',\n        vi: 'Xem tất cả các Locale',\n      }),\n      false: t({\n        en: 'See only selected locales',\n        'en-GB': 'See only selected locales',\n        fr: 'Voir seulement les langues sélectionnées',\n        es: 'Ver solo los idiomas seleccionados',\n        de: 'Nur ausgewählte Sprachen anzeigen',\n        ja: '選択された言語のみを表示',\n        ko: '선택한 언어만 보기',\n        zh: '仅查看选定的语言',\n        it: 'Vedi solo le lingue selezionate',\n        pt: 'Ver apenas os idiomas selecionados',\n        hi: 'केवल चुने गए भाषाओं को देखें',\n        ar: 'عرض اللغات المحددة فقط',\n        ru: 'Показать только выбранные языки',\n        tr: 'Yalnızca seçilen dilleri göster',\n        pl: 'Pokaż tylko wybrane lokalizacje',\n        id: 'Tampilkan hanya locale yang dipilih',\n        vi: 'Chỉ xem các Locale đã chọn',\n      }),\n    },\n  },\n  title: 'Locale switcher content',\n  description:\n    'Content strings for the locale switcher component, including labels, placeholders, and toggle options for displaying available locales.',\n  tags: ['component', 'locale switcher', 'i18n'],\n} satisfies Dictionary;\n\nexport default localeSwitcherContent;\n"],"mappings":";;;AAEA,MAAM,wBAAwB;CAC5B,KAAK;CACL,SAAS;EACP,qBAAqB,EAAE;GACrB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,mBAAmB,EAAE;GACnB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,UAAU,EAAE;GACV,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa;GACX,MAAM,EAAE;IACN,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,aAAa,EAAE;IACb,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,WAAW,EAAE;IACX,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACH;EACD,qBAAqB;GACnB,MAAM,EAAE;IACN,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACF,OAAO,EAAE;IACP,IAAI;IACJ,SAAS;IACT,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAAC;GACH;EACF;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAa;EAAmB;EAAO;CAC/C;AAED,qCAAe"}

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

@@ -0,0 +1,134 @@
+'use client';
+
+
+import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
+import { Container } from "../Container/index.mjs";
+import { Input } from "../Input/Input.mjs";
+import { DropDown } from "../DropDown/index.mjs";
+import { MoveVertical } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getHTMLTextDir, getLocaleName } from "@intlayer/core";
+import { useIntlayer } from "react-intlayer";
+import { Locales } from "@intlayer/types";
+import Fuse from "fuse.js";
+
+//#region src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx
+const DROPDOWN_IDENTIFIER = "locale-switcher";
+const LocaleSwitcher = ({ locale, localeList, availableLocales, fullLocaleName = true, setLocale, panelProps }) => {
+	let localeName = "Select a locale";
+	const { switchTo, searchInput, languageListLabel } = useIntlayer("locale-switcher");
+	const inputRef = useRef(null);
+	const multilingualAvailableLocales = useMemo(() => localeList.map((localeEl) => {
+		return {
+			locale: localeEl,
+			englishName: getLocaleName(localeEl, Locales.ENGLISH),
+			currentLocaleName: getLocaleName(localeEl, locale),
+			ownLocaleName: getLocaleName(localeEl)
+		};
+	}), [localeList, locale]);
+	const [results, setResults] = useState(multilingualAvailableLocales);
+	const fuse = useMemo(() => {
+		return new Fuse(multilingualAvailableLocales, {
+			keys: [
+				{
+					name: "ownLocaleName",
+					weight: .4
+				},
+				{
+					name: "englishName",
+					weight: .2
+				},
+				{
+					name: "currentLocaleName",
+					weight: .2
+				},
+				{
+					name: "locale",
+					weight: .2
+				}
+			],
+			threshold: .02
+		});
+	}, [multilingualAvailableLocales]);
+	const handleSearch = useCallback((searchQuery) => {
+		if (searchQuery) setResults(fuse.search(searchQuery).map((result) => result.item));
+		else setResults(multilingualAvailableLocales);
+	}, [fuse, multilingualAvailableLocales]);
+	if (locale) localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-xl border border-text text-text transition-colors",
+		"aria-label": localeSwitcherLabel.value,
+		children: /* @__PURE__ */ jsxs(DropDown, {
+			identifier: DROPDOWN_IDENTIFIER,
+			children: [/* @__PURE__ */ jsx(DropDown.Trigger, {
+				identifier: DROPDOWN_IDENTIFIER,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center justify-between",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-nowrap px-2",
+						children: localeName
+					}), /* @__PURE__ */ jsx(MoveVertical, { className: "w-5 self-center" })]
+				})
+			}), /* @__PURE__ */ jsx(DropDown.Panel, {
+				identifier: DROPDOWN_IDENTIFIER,
+				isOverable: true,
+				isFocusable: true,
+				...panelProps,
+				children: /* @__PURE__ */ jsxs(Container, {
+					className: "max-h-[80vh] min-w-28",
+					separator: "y",
+					role: "listbox",
+					transparency: "sm",
+					"aria-label": languageListLabel.value,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "p-3",
+						children: /* @__PURE__ */ jsx(Input, {
+							type: "search",
+							"aria-label": searchInput.ariaLabel.value,
+							placeholder: searchInput.placeholder.value,
+							onChange: (e) => handleSearch(e.target.value),
+							ref: inputRef
+						})
+					}), /* @__PURE__ */ jsx("ol", {
+						className: "divide-y divide-dashed divide-text/20 overflow-y-auto p-1",
+						children: results.map(({ locale: localeItem, currentLocaleName, ownLocaleName }) => /* @__PURE__ */ jsx("li", {
+							className: "px-1.5 py-1",
+							children: /* @__PURE__ */ jsx(Button, {
+								onClick: () => setLocale(localeItem),
+								label: `${switchTo} ${currentLocaleName}`,
+								disabled: !(availableLocales ?? localeList).includes(localeItem),
+								isActive: locale === localeItem,
+								variant: ButtonVariant.HOVERABLE,
+								color: ButtonColor.TEXT,
+								isFullWidth: true,
+								textAlign: ButtonTextAlign.LEFT,
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-row items-center justify-between gap-3 px-2 py-1",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col text-nowrap",
+										children: [/* @__PURE__ */ jsx("span", {
+											dir: getHTMLTextDir(localeItem),
+											lang: localeItem,
+											children: ownLocaleName
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-neutral text-xs",
+											children: currentLocaleName
+										})]
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-neutral text-sm",
+										children: localeItem.toUpperCase()
+									})]
+								})
+							})
+						}, localeItem))
+					})]
+				})
+			})]
+		})
+	});
+};
+
+//#endregion
+export { LocaleSwitcher };
+//# sourceMappingURL=LocaleSwitcher.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LocaleSwitcher.mjs","names":["LocaleSwitcher: FC<LocaleSwitcherProps>","multilingualAvailableLocales: MultilingualAvailableLocales[]"],"sources":["../../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport { type Locale, Locales } from '@intlayer/types';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\n\nexport type LocaleSwitcherProps = {\n  locale?: Locale;\n  localeList: Locale[];\n  availableLocales?: Locale[];\n  fullLocaleName?: boolean;\n  setLocale: (locale: Locale) => void;\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\ntype MultilingualAvailableLocales = {\n  locale: Locale;\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, languageListLabel } =\n    useIntlayer('locale-switcher');\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=\"rounded-xl border border-text text-text transition-colors\"\n      aria-label={localeSwitcherLabel.value}\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.value}\n          >\n            <div className=\"p-3\">\n              <Input\n                type=\"search\"\n                aria-label={searchInput.ariaLabel.value}\n                placeholder={searchInput.placeholder.value}\n                onChange={(e) => handleSearch(e.target.value)}\n                ref={inputRef}\n              />\n            </div>\n            <ol className=\"divide-y divide-dashed divide-text/20 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                      isActive={locale === localeItem}\n                      variant={ButtonVariant.HOVERABLE}\n                      color={ButtonColor.TEXT}\n                      isFullWidth\n                      textAlign={ButtonTextAlign.LEFT}\n                    >\n                      <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\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 text-xs\">\n                            {currentLocaleName}\n                          </span>\n                        </div>\n                        <span className=\"text-neutral 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"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAM,sBAAsB;AAS5B,MAAaA,kBAA2C,EACtD,QACA,YACA,kBACA,iBAAiB,MACjB,WACA,iBACI;CACJ,IAAI,aAAa;CACjB,MAAM,EAAE,UAAU,aAAa,sBAC7B,YAAY,kBAAkB;CAChC,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAMC,+BAA+D,cAEjE,WAAW,KAAK,aAAa;AAI3B,SAAO;GACL,QAAQ;GACR,aALkB,cAAc,UAAU,QAAQ,QAAQ;GAM1D,mBALwB,cAAc,UAAU,OAAO;GAMvD,eALoB,cAAc,SAAS;GAM5C;GACD,EACJ,CAAC,YAAY,OAAO,CACrB;CAED,MAAM,CAAC,SAAS,cAAc,SAC5B,6BACD;CAGD,MAAM,OAAO,cAAc;AAWzB,SAAO,IAAI,KAAK,8BAVgD;GAC9D,MAAM;IACJ;KAAE,MAAM;KAAiB,QAAQ;KAAK;IACtC;KAAE,MAAM;KAAe,QAAQ;KAAK;IACpC;KAAE,MAAM;KAAqB,QAAQ;KAAK;IAC1C;KAAE,MAAM;KAAU,QAAQ;KAAK;IAChC;GACD,WAAW;GACZ,CAEyD;IACzD,CAAC,6BAA6B,CAAC;CAElC,MAAM,eAAe,aAClB,gBAAwB;AACvB,MAAI,YAKF,YAHsB,KACnB,OAAO,YAAY,CACnB,KAAK,WAAW,OAAO,KAAK,CACN;MAEzB,YAAW,6BAA6B;IAG5C,CAAC,MAAM,6BAA6B,CACrC;AAED,KAAI,OACF,cAAa,iBAAiB,cAAc,OAAO,GAAG,OAAO,aAAa;AAG5E,QACE,oBAAC;EACC,WAAU;EACV,cAAY,oBAAoB;YAEhC,qBAAC;GAAS,YAAY;cACpB,oBAAC,SAAS;IAAQ,YAAY;cAC5B,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAI,WAAU;gBAAoB;OAAiB,EACpD,oBAAC,gBAAa,WAAU,oBAAoB;MACxC;KACW,EAEnB,oBAAC,SAAS;IACR,YAAY;IACZ;IACA;IACA,GAAI;cAEJ,qBAAC;KACC,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb,cAAY,kBAAkB;gBAE9B,oBAAC;MAAI,WAAU;gBACb,oBAAC;OACC,MAAK;OACL,cAAY,YAAY,UAAU;OAClC,aAAa,YAAY,YAAY;OACrC,WAAW,MAAM,aAAa,EAAE,OAAO,MAAM;OAC7C,KAAK;QACL;OACE,EACN,oBAAC;MAAG,WAAU;gBACX,QAAQ,KACN,EAAE,QAAQ,YAAY,mBAAmB,oBACxC,oBAAC;OAAG,WAAU;iBACZ,oBAAC;QACC,eAAe,UAAU,WAAW;QACpC,OAAO,GAAG,SAAS,GAAG;QACtB,UACE,EAAE,oBAAoB,YAAY,SAAS,WAAW;QAExD,UAAU,WAAW;QACrB,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB;QACA,WAAW,gBAAgB;kBAE3B,qBAAC;SAAI,WAAU;oBACb,qBAAC;UAAI,WAAU;qBACb,oBAAC;WACC,KAAK,eAAe,WAAW;WAC/B,MAAM;qBAEL;YACI,EACP,oBAAC;WAAK,WAAU;qBACb;YACI;WACH,EACN,oBAAC;UAAK,WAAU;oBACb,WAAW,aAAa;WACpB;UACH;SACC;SA7BsB,WA8B5B,CAER;OACE;MACK;KACG;IACR;GACP"}

package/dist/esm/components/LocaleSwitcherDropDown/index.mjs

@@ -0,0 +1,3 @@
+import { LocaleSwitcher } from "./LocaleSwitcher.mjs";
+
+export { LocaleSwitcher };