@worldcoin/mini-apps-ui-kit-react 1.3.6 → 1.4.0

package/dist/components/CountryDrawer/CountryDrawer.d.ts

@@ -1,3 +1,4 @@
+import { Direction } from '../../types/global';
 import { CountryCode } from '../Flag';
 interface CountryDrawerProps {
     /** Currently selected country code */
@@ -14,11 +15,15 @@ interface CountryDrawerProps {
     title?: string;
     /** Label text shown in the search field */
     searchLabel?: string;
+    /** The reading direction of the drawer. If omitted, assumes LTR (left-to-right) reading mode. */
+    dir?: Direction;
+    /** Optional BCP 47 locale to localize country names and search */
+    locale?: string;
     /** Callback fired when a country is selected */
     onChange: (countryCode: string) => void;
     /** Optional callback fired when drawer open/close animation completes */
     onAnimationEnd?: (open: boolean) => void;
 }
-declare function CountryDrawer({ onChange, value, countries, onAnimationEnd, disabled, children, defaultValue, title, searchLabel, }: CountryDrawerProps): import("react/jsx-runtime").JSX.Element;
+declare function CountryDrawer({ onChange, value, countries, locale, onAnimationEnd, disabled, children, defaultValue, title, searchLabel, dir, }: CountryDrawerProps): import("react/jsx-runtime").JSX.Element;
 export { CountryDrawer };
 export type { CountryDrawerProps };

package/dist/components/CountryDrawer/CountryDrawer.js

@@ -6,7 +6,7 @@ import { XMark } from "../Icons/XMark.js";
 import { GroupedCountryList } from "../PhoneField/GroupedCountryList.js";
 import { useCountryFiltering } from "./useCountryFiltering.js";
 import { useCountryGrouping } from "./useCountryGrouping.js";
-import { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose } from "../Drawer/Drawer.js";
+import { DrawerDialog, DrawerDialogTrigger, DrawerDialogContent, DrawerDialogTitle, DrawerDialogClose } from "../DrawerDialog/DrawerDialog.js";
 import { TopBar } from "../TopBar/TopBar.js";
 import { Button } from "../Button/Button.js";
 import { SearchField } from "../SearchField/SearchField.js";
@@ -14,12 +14,14 @@ function CountryDrawer({
   onChange,
   value,
   countries,
+  locale = "en",
   onAnimationEnd,
   disabled = false,
   children,
   defaultValue = "US",
   title = "Country",
-  searchLabel
+  searchLabel,
+  dir
 }) {
   const [searchText, setSearchText] = useState("");
   const [open, setOpen] = useState(false);
@@ -29,47 +31,60 @@ function CountryDrawer({
   };
   const filteredCountries = useCountryFiltering({
     countries,
-    searchText
+    searchText,
+    locale
   });
   const groupedCountries = useCountryGrouping({
     countries: filteredCountries,
-    defaultValue
+    defaultValue,
+    locale
   });
   const handleCountrySelect = (countryCode) => {
     onChange(countryCode);
     setSearchText("");
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, onAnimationEnd, height: "full", children: [
-    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, className: "outline-none", disabled, children }),
-    /* @__PURE__ */ jsxs(DrawerContent, { children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: title }) }),
-      /* @__PURE__ */ jsx(
-        TopBar,
-        {
-          title,
-          startAdornment: /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ jsx(XMark, {}) }) })
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "p-6 shrink-0", children: /* @__PURE__ */ jsx(
-        SearchField,
-        {
-          ref: searchRef,
-          value: searchText,
-          onChange: handleSearchChange,
-          label: searchLabel
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: "no-scrollbar w-full overflow-auto px-6 grow", children: /* @__PURE__ */ jsx(
-        GroupedCountryList,
-        {
-          groupedCountries,
-          onSelect: handleCountrySelect,
-          value
-        }
-      ) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    DrawerDialog,
+    {
+      open,
+      onOpenChange: setOpen,
+      onAnimationEnd,
+      height: "full",
+      children: [
+        /* @__PURE__ */ jsx(DrawerDialogTrigger, { asChild: true, className: "outline-none", disabled, children }),
+        /* @__PURE__ */ jsx(DrawerDialogContent, { dialogClassName: "h-[80vh]", dir, children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DrawerDialogTitle, { children: title }) }),
+          /* @__PURE__ */ jsx(
+            TopBar,
+            {
+              title,
+              startAdornment: /* @__PURE__ */ jsx(DrawerDialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ jsx(XMark, {}) }) })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "p-6 shrink-0", children: /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              ref: searchRef,
+              value: searchText,
+              onChange: handleSearchChange,
+              label: searchLabel
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "no-scrollbar w-full overflow-auto px-6 pb-6 grow", children: /* @__PURE__ */ jsx(
+            GroupedCountryList,
+            {
+              groupedCountries,
+              onSelect: handleCountrySelect,
+              value,
+              dir,
+              locale
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
 }
 export {
   CountryDrawer

package/dist/components/CountryDrawer/useCountryFiltering.d.ts

@@ -2,6 +2,7 @@ import { CountryCode } from '../Flag';
 interface UseCountryFilteringProps {
     countries?: CountryCode[];
     searchText: string;
+    locale: string;
 }
-export declare function useCountryFiltering({ countries, searchText }: UseCountryFilteringProps): import('react-international-phone').CountryData[];
+export declare function useCountryFiltering({ countries, searchText, locale, }: UseCountryFilteringProps): import('react-international-phone').CountryData[];
 export {};

package/dist/components/CountryDrawer/useCountryFiltering.js

@@ -1,8 +1,19 @@
+import { useI18n } from "../../lib/I18nProvider.js";
 import { defaultCountries as R } from "../../node_modules/.pnpm/react-international-phone@4.5.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
 import { getCountryDataListByCodes, filterCountries } from "../PhoneField/utils.js";
-function useCountryFiltering({ countries, searchText }) {
+function useCountryFiltering({
+  countries,
+  searchText,
+  locale
+}) {
+  const i18nStore = useI18n();
   const richCountries = countries ? getCountryDataListByCodes(countries) : R;
-  const filteredCountries = filterCountries(richCountries, searchText);
+  const filteredCountries = filterCountries({
+    countries: richCountries,
+    searchText,
+    i18nStore,
+    locale
+  });
   return filteredCountries;
 }
 export {

package/dist/components/CountryDrawer/useCountryGrouping.d.ts

@@ -1,3 +1,4 @@
+import { CountryData } from 'react-international-phone';
 import { CountryCode } from '../Flag';
 interface GroupedCountries {
     [key: string]: {
@@ -6,8 +7,9 @@ interface GroupedCountries {
     }[];
 }
 interface UseCountryGroupingProps {
-    countries: any[];
+    countries: CountryData[];
     defaultValue?: CountryCode;
+    locale?: string;
 }
-export declare function useCountryGrouping({ countries, defaultValue, }: UseCountryGroupingProps): GroupedCountries;
+export declare function useCountryGrouping({ countries, defaultValue, locale, }: UseCountryGroupingProps): GroupedCountries;
 export {};

package/dist/components/CountryDrawer/useCountryGrouping.js

@@ -1,12 +1,18 @@
+import { useI18n } from "../../lib/I18nProvider.js";
 import { parseCountry as M } from "../../node_modules/.pnpm/react-international-phone@4.5.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
-import { getValidatedCountryCode } from "../PhoneField/utils.js";
+import { normalizeString, getValidatedCountryCode } from "../PhoneField/utils.js";
 function useCountryGrouping({
   countries,
-  defaultValue = "US"
+  defaultValue = "US",
+  locale = "en"
 }) {
+  const i18nStore = useI18n();
   const groupedCountries = countries.reduce((acc, country) => {
     const parsedCountry = M(country);
-    const firstLetter = parsedCountry.name.charAt(0).toUpperCase();
+    const countryName = i18nStore.getName(parsedCountry.iso2, locale);
+    const nameToUse = countryName ?? parsedCountry.name;
+    const normalizedName = normalizeString(nameToUse);
+    const firstLetter = normalizedName.charAt(0).toUpperCase();
     if (!acc[firstLetter]) {
       acc[firstLetter] = [];
     }

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,13 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Root, Trigger, Content, Title, Close, Portal, Overlay, Description } from "../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.15_@types_react-dom@18.3.7_@types_react@18.3.23__@types_react@18.3_n6h2mnlo6eeop2x37d75f7xnhe/node_modules/@radix-ui/react-dialog/dist/index.js";
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx(Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsx(Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-gray-900/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-gray-0 rounded-[1.75rem] sm:max-w-lg max-h-[80vh] overflow-y-auto",
+          "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] origin-center",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-75 data-[state=open]:zoom-in-75 data-[state=closed]:duration-200 data-[state=open]:duration-200",
+          className
+        ),
+        ...props,
+        children
+      }
+    )
+  ] });
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+};

package/dist/components/DrawerDialog/DrawerDialog.d.ts

@@ -0,0 +1,32 @@
+import { DialogOverlay, DialogPortal } from '../Dialog/Dialog';
+import { DrawerCloseProps, DrawerContentProps, DrawerHeaderProps, DrawerProps, DrawerTitleProps, DrawerTriggerProps } from '../Drawer/types';
+import * as React from "react";
+declare const DrawerDialog: {
+    (props: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerDialogTrigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerDialogClose: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerDialogContent: React.ForwardRefExoticComponent<DrawerContentProps & {
+    dialogClassName?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerDialogHeader: {
+    (props: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerDialogTitle: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDialogDescription: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerDialogFooter: {
+    (props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerDialogOverlay: {
+    (props: React.ComponentProps<typeof DialogOverlay>): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+declare const DrawerDialogPortal: {
+    (props: React.ComponentProps<typeof DialogPortal>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DrawerDialog, DrawerDialogClose, DrawerDialogContent, DrawerDialogDescription, DrawerDialogFooter, DrawerDialogHeader, DrawerDialogOverlay, DrawerDialogPortal, DrawerDialogTitle, DrawerDialogTrigger, };
+export type { DrawerProps as DrawerDialogProps, DrawerContentProps as DrawerDialogContentProps, DrawerHeaderProps as DrawerDialogHeaderProps, DrawerTitleProps as DrawerDialogTitleProps, DrawerTriggerProps as DrawerDialogTriggerProps, DrawerCloseProps as DrawerDialogCloseProps, };

package/dist/components/DrawerDialog/DrawerDialog.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogClose, DialogDescription } from "../Dialog/Dialog.js";
+import { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose } from "../Drawer/Drawer.js";
+const MOBILE_BREAKPOINT = "(max-width: 768px)";
+const DrawerDialog = (props) => {
+  const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Drawer, { ...props });
+  }
+  return /* @__PURE__ */ jsx(Dialog, { ...props });
+};
+DrawerDialog.displayName = "DrawerDialog";
+const DrawerDialogTrigger = React.forwardRef((props, ref) => {
+  const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(DrawerTrigger, { ...props, ref });
+  }
+  return /* @__PURE__ */ jsx(DialogTrigger, { ...props, ref });
+});
+DrawerDialogTrigger.displayName = "DrawerDialogTrigger";
+const DrawerDialogClose = React.forwardRef((props, ref) => {
+  const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(DrawerClose, { ...props, ref });
+  }
+  return /* @__PURE__ */ jsx(DialogClose, { ...props, ref });
+});
+DrawerDialogClose.displayName = "DrawerDialogClose";
+const DrawerDialogContent = React.forwardRef((props, ref) => {
+  const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(DrawerContent, { ...props, ref });
+  }
+  return /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      ...props,
+      ref,
+      className: cn(props.className, props.dialogClassName)
+    }
+  );
+});
+DrawerDialogContent.displayName = "DrawerDialogContent";
+const DrawerDialogTitle = React.forwardRef((props, ref) => {
+  const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(DrawerTitle, { ...props, ref });
+  }
+  return /* @__PURE__ */ jsx(DialogTitle, { ...props, ref });
+});
+DrawerDialogTitle.displayName = "DrawerDialogTitle";
+const DrawerDialogDescription = React.forwardRef((props, ref) => {
+  const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+  if (isMobile) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DialogDescription, { ...props, ref });
+});
+DrawerDialogDescription.displayName = "DrawerDialogDescription";
+export {
+  DrawerDialog,
+  DrawerDialogClose,
+  DrawerDialogContent,
+  DrawerDialogDescription,
+  DrawerDialogTitle,
+  DrawerDialogTrigger
+};

package/dist/components/DrawerDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawerDialog, DrawerDialogClose, DrawerDialogContent, DrawerDialogDescription, DrawerDialogFooter, DrawerDialogHeader, DrawerDialogOverlay, DrawerDialogPortal, DrawerDialogTitle, DrawerDialogTrigger, } from './DrawerDialog';
+export type { DrawerDialogProps, DrawerDialogContentProps, DrawerDialogHeaderProps, DrawerDialogTitleProps, DrawerDialogTriggerProps, DrawerDialogCloseProps, } from './DrawerDialog';

package/dist/components/PhoneField/CountryListItem.d.ts

@@ -1,12 +1,14 @@
+import { Direction } from '../../types/global';
 import { CountryCode } from '../Flag';
 interface CountryListItemProps {
     countryCode: CountryCode;
     countryName: string;
     isSelected?: boolean;
     onClick?: (value: CountryCode) => void;
+    dir?: Direction;
 }
 declare const CountryListItem: {
-    ({ countryCode, countryName, onClick, isSelected, }: CountryListItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ countryCode, countryName, onClick, isSelected, dir, }: CountryListItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CountryListItem;

package/dist/components/PhoneField/CountryListItem.js

@@ -5,7 +5,8 @@ const CountryListItem = ({
   countryCode,
   countryName,
   onClick,
-  isSelected
+  isSelected,
+  dir
 }) => {
   return /* @__PURE__ */ jsxs(
     "button",
@@ -14,6 +15,7 @@ const CountryListItem = ({
       "data-country": countryCode,
       className: "h-[3.75rem] flex items-center w-full gap-2 cursor-pointer",
       onClick: () => onClick == null ? void 0 : onClick(countryCode),
+      dir,
       ...isSelected && { "data-selected": true },
       children: [
         /* @__PURE__ */ jsx(Flag, { countryCode, size: 32 }),

package/dist/components/PhoneField/CountrySelectorButton.js

@@ -10,7 +10,7 @@ const triggerVariants = cva(
   {
     variants: {
       disabled: {
-        true: "cursor-not-allowed opacity-20",
+        true: "cursor-not-allowed opacity-20 pointer-events-none",
         false: ""
       }
     },
@@ -28,6 +28,7 @@ const CountrySelectorButton = forwardRef(
         ...props,
         className: cn(triggerVariants({ disabled, className })),
         "data-testid": "country-selector-button",
+        "aria-disabled": disabled,
         children: [
           /* @__PURE__ */ jsx("div", { className: "mr-2", children: /* @__PURE__ */ jsx(Flag, { countryCode: value, size: 24 }) }),
           /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 3, className: "mr-2", children: label }),

package/dist/components/PhoneField/GroupedCountryList.d.ts

@@ -1,3 +1,4 @@
+import { Direction } from '../../types/global';
 import { CountryCode } from '../Flag';
 interface GroupedCountries {
     [key: string]: {
@@ -9,6 +10,8 @@ interface GroupedCountryListProps {
     groupedCountries: GroupedCountries;
     value: CountryCode;
     onSelect: (countryCode: CountryCode) => void;
+    dir?: Direction;
+    locale?: string;
 }
-export declare function GroupedCountryList({ groupedCountries, onSelect, value, }: GroupedCountryListProps): import("react/jsx-runtime").JSX.Element;
+export declare function GroupedCountryList({ groupedCountries, onSelect, value, dir, locale, }: GroupedCountryListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PhoneField/GroupedCountryList.js

@@ -1,4 +1,5 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useI18n } from "../../lib/I18nProvider.js";
 import { withHaptics } from "../../lib/haptics.js";
 import { Magnifier } from "../Icons/Magnifier.js";
 import CountryListItem from "./CountryListItem.js";
@@ -7,23 +8,30 @@ import { DrawerClose } from "../Drawer/Drawer.js";
 function GroupedCountryList({
   groupedCountries,
   onSelect,
-  value
+  value,
+  dir,
+  locale
 }) {
+  const i18nStore = useI18n();
   if (Object.keys(groupedCountries).length === 0) {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center grow text-gray-400 gap-2 h-full", children: [
       /* @__PURE__ */ jsx(Magnifier, { className: "size-8" }),
       /* @__PURE__ */ jsx(Typography, { variant: "body", level: 3, children: "No search results" })
     ] });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: Object.entries(groupedCountries).sort(([a], [b]) => a.localeCompare(b)).map(([letter, countries]) => /* @__PURE__ */ jsxs("div", { className: "group", children: [
+  return /* @__PURE__ */ jsx("div", { dir, children: Object.entries(groupedCountries).sort(([a], [b]) => a.localeCompare(b, locale)).map(([letter, countries]) => /* @__PURE__ */ jsxs("div", { className: "group", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 3, className: "text-gray-400 mb-2", children: letter }),
-    countries.map((country) => /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(
+    countries.sort((a, b) => a.name.localeCompare(b.name, locale)).map((country) => /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(
       CountryListItem,
       {
         countryCode: country.countryCode,
-        countryName: country.name,
+        countryName: i18nStore.getName(
+          country.countryCode,
+          typeof locale === "string" ? locale : (locale == null ? void 0 : locale[0]) ?? "en"
+        ) ?? country.name,
         onClick: withHaptics(onSelect),
-        isSelected: value === country.countryCode
+        isSelected: value === country.countryCode,
+        dir
       }
     ) }, country.countryCode)),
     /* @__PURE__ */ jsx("div", { className: "h-[1px] bg-gray-200 my-4 group-last:hidden" })

package/dist/components/PhoneField/PhoneField.d.ts

@@ -1,3 +1,4 @@
+import { Direction } from '../../types/global';
 import { CountryCode } from '../Flag/types';
 import { InputProps } from '../Input';
 interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdornment" | "placeholder"> {
@@ -48,6 +49,12 @@ interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdornment"
      * The component should use currentColor to match the Input's styling.
      */
     endAdornment?: React.ReactNode;
+    /**
+     * The reading direction of the phone field. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
+     */
+    dir?: Direction;
+    /** Optional BCP 47 locale to localize country names and search */
+    locale?: string;
 }
 declare const PhoneField: import('react').ForwardRefExoticComponent<PhoneFieldProps & import('react').RefAttributes<HTMLDivElement>>;
 export { PhoneField };

package/dist/components/PhoneField/PhoneField.js

@@ -23,6 +23,8 @@ const PhoneField = forwardRef(
     inputMode = "tel",
     autoCapitalize = "off",
     autoCorrect = "off",
+    dir,
+    locale,
     ...props
   }, ref) => {
     const { inputValue, country, inputRef, handlePhoneValueChange, setCountry } = ee(
@@ -80,6 +82,8 @@ const PhoneField = forwardRef(
             onAnimationEnd: handleDrawerAnimationEnd,
             onChange: handleCountrySelect,
             disabled,
+            dir,
+            locale,
             children: /* @__PURE__ */ jsx(CountrySelectorButton, { value: selectedCountryCode, label: currentDialCode })
           }
         )

package/dist/components/PhoneField/utils.d.ts

@@ -1,5 +1,18 @@
+import { I18nStore } from '../../lib/i18n';
 import { CountryData } from 'react-international-phone';
 import { CountryCode } from '../Flag';
+/**
+ * Normalizes a string by removing accents and diacritics, then converts to lowercase.
+ * This makes string comparison accent-agnostic.
+ * @param str - The string to normalize
+ * @returns The normalized string in lowercase without accents/diacritics
+ */
+export declare const normalizeString: (str: string) => string;
 export declare const getValidatedCountryCode: (code: string, defaultCountryCode: CountryCode) => CountryCode;
 export declare const getCountryDataListByCodes: (countryCodes: CountryCode[] | undefined) => CountryData[];
-export declare const filterCountries: (countries: CountryData[], searchText: string) => CountryData[];
+export declare const filterCountries: ({ countries, searchText, i18nStore, locale, }: {
+    countries: CountryData[];
+    searchText: string;
+    i18nStore: I18nStore;
+    locale: string;
+}) => CountryData[];

package/dist/components/PhoneField/utils.js

@@ -1,6 +1,9 @@
 import { defaultCountries as R, parseCountry as M } from "../../node_modules/.pnpm/react-international-phone@4.5.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
 import { isSupportedCountryCode } from "../Flag/utils.js";
 import { DIAL_CODE_PREFIX } from "./constants.js";
+const normalizeString = (str) => {
+  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+};
 const getValidatedCountryCode = (code, defaultCountryCode) => {
   const upperCaseCode = code.toUpperCase();
   return isSupportedCountryCode(upperCaseCode) ? upperCaseCode : defaultCountryCode;
@@ -15,20 +18,26 @@ const getCountryDataListByCodes = (countryCodes) => {
     return countryCodeSet.has(countryCode);
   });
 };
-const filterCountries = (countries, searchText) => {
+const filterCountries = ({
+  countries,
+  searchText,
+  i18nStore,
+  locale
+}) => {
   if (!searchText) {
     return countries;
   }
+  const normalizedSearch = normalizeString(searchText);
   return countries.filter((country) => {
     const parsedCountry = M(country);
-    const countryName = parsedCountry.name.toLowerCase();
+    const countryName = i18nStore.getName(parsedCountry.iso2.toLocaleUpperCase(), locale) ?? parsedCountry.name;
     const dialCode = `${DIAL_CODE_PREFIX}${parsedCountry.dialCode.toLowerCase()}`;
-    const searchLower = searchText.toLowerCase();
-    return countryName.includes(searchLower) || dialCode.includes(searchLower);
+    return normalizeString(countryName).includes(normalizedSearch) || normalizeString(dialCode).includes(normalizedSearch);
   });
 };
 export {
   filterCountries,
   getCountryDataListByCodes,
-  getValidatedCountryCode
+  getValidatedCountryCode,
+  normalizeString
 };