@korsolutions/ui 0.0.51 → 0.0.53

package/src/components/phone-input/variants/default.tsx

@@ -0,0 +1,124 @@
+import { Platform } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { PhoneInputStyles } from "../types";
+
+export function usePhoneInputVariantDefault(): PhoneInputStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): PhoneInputStyles => ({
+      root: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          backgroundColor: colors.surface,
+          height: 48,
+          overflow: "hidden",
+          outlineWidth: 0,
+        },
+        focused: {
+          borderColor: colors.primary,
+        },
+        disabled: {
+          backgroundColor: colors.muted,
+        },
+      },
+      countryButton: {
+        default: {
+          paddingHorizontal: 12,
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 4,
+        },
+      },
+      countryButtonText: {
+        default: {
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      separator: {
+        default: {
+          width: 1,
+          alignSelf: "center",
+          height: "60%",
+          backgroundColor: colors.border,
+        },
+      },
+      input: {
+        default: {
+          flex: 1,
+          paddingHorizontal: 12,
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+          height: "100%",
+          outlineWidth: 0,
+          ...Platform.select({
+            default: {},
+            web: {
+              outline: "none",
+            },
+          }),
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      pickerOverlay: {
+        default: {},
+      },
+      pickerContent: {
+        default: {
+          backgroundColor: colors.surface,
+          borderRadius: radius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          padding: 4,
+          maxHeight: 300,
+        },
+      },
+      pickerOption: {
+        default: {
+          paddingVertical: 10,
+          paddingHorizontal: 12,
+          borderRadius: radius / 2,
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8,
+        },
+        selected: {
+          backgroundColor: colors.muted,
+        },
+      },
+      pickerOptionText: {
+        default: {
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+        },
+      },
+      pickerSearch: {
+        default: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          paddingVertical: 8,
+          paddingHorizontal: 12,
+          fontFamily,
+          fontSize: fontSize * 0.875,
+          color: colors.foreground,
+          marginBottom: 4,
+          outlineWidth: 0,
+        },
+      },
+    }),
+  );
+}

package/src/components/phone-input/variants/index.ts

@@ -0,0 +1,5 @@
+import { usePhoneInputVariantDefault } from "./default";
+
+export const PhoneInputVariants = {
+  default: usePhoneInputVariantDefault,
+};

package/src/components/popover/components/popover-content.tsx

@@ -1,5 +1,5 @@
-import { useRelativePosition } from "@/hooks/use-relative-position";
-import { useSafeAreaInsets } from "@/safe-area";
+import { useRelativePosition } from "../../../hooks/use-relative-position";
+import { useSafeAreaInsets } from "../../../safe-area";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { usePopover } from "../context";

package/src/components/popover/components/popover-root.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks/use-relative-position";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks/use-relative-position";
 import React, { useState } from "react";
 import { type LayoutRectangle } from "react-native";
 import { PopoverContext } from "../context";

package/src/components/popover/components/popover-trigger.tsx

@@ -1,5 +1,5 @@
-import type { ViewRef } from "@/types/element.types";
-import { measureLayoutPosition } from "@/utils/normalize-layout";
+import type { ViewRef } from "../../../types/element.types";
+import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { type PressableProps } from "react-native";
 import { usePopover } from "../context";

package/src/components/popover/context.ts

@@ -1,4 +1,4 @@
-import type { LayoutPosition } from "@/hooks/use-relative-position";
+import type { LayoutPosition } from "../../hooks/use-relative-position";
 import { createContext, type Dispatch, useContext } from "react";
 import type { LayoutRectangle } from "react-native";
 import type { PopoverStyles } from "./types";

package/src/components/popover/variants/default.tsx

@@ -1,5 +1,5 @@
-import { type PopoverStyles } from "@/components/popover/types";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type PopoverStyles } from "../types";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export const usePopoverVariantDefault = (): PopoverStyles => {
   return useThemedStyles(

package/src/components/popover/variants/unstyled.tsx

@@ -1,5 +1,5 @@
-import { type PopoverStyles } from "@/components/popover/types";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type PopoverStyles } from "../types";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export const usePopoverVariantUnstyled = (): PopoverStyles => {
   return useThemedStyles(

package/src/components/progress/components/progress-indicator.tsx

@@ -1,4 +1,4 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { useProgress } from "../context";

package/src/components/progress/components/progress-root.tsx

@@ -1,4 +1,4 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { ProgressContext } from "../context";

package/src/components/progress/variants/default.tsx

@@ -1,5 +1,5 @@
-import { type ProgressStyles } from "@/components";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type ProgressStyles } from "../..";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export const useProgressVariantDefault = (): ProgressStyles => {
   return useThemedStyles(

package/src/components/scroll-bar/scroll-bar.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@/themes";
+import { useTheme } from "../../themes";
 import React, { useEffect } from "react";
 import { Platform } from "react-native";
 

package/src/components/select/components/select-content.tsx

@@ -1,5 +1,5 @@
-import { useRelativePosition } from "@/hooks/use-relative-position";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { useRelativePosition } from "../../../hooks/use-relative-position";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { useSelect } from "../context";

package/src/components/select/components/select-option.tsx

@@ -1,4 +1,4 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React, { useEffect, useState } from "react";
 import { Pressable, Text } from "react-native";
 import { useSelect } from "../context";

package/src/components/select/components/select-overlay.tsx

@@ -1,4 +1,4 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
 import { useSelect } from "../context";

package/src/components/select/components/select-root.tsx

@@ -1,5 +1,5 @@
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React, { useState } from "react";
 import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
 import { SelectContext } from "../context";

package/src/components/select/components/select-trigger.tsx

@@ -1,8 +1,14 @@
-import type { ViewRef } from "@/types/element.types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import { measureLayoutPosition } from "@/utils/normalize-layout";
 import React, { useRef } from "react";
-import { Pressable, Text, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import {
+  Pressable,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import type { ViewRef } from "../../../types/element.types";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
+import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import { useSelect } from "../context";
 
 export interface SelectTriggerProps {
@@ -14,7 +20,12 @@ export function SelectTrigger(props: SelectTriggerProps) {
   const select = useSelect();
   const triggerRef = useRef<ViewRef>(null);
 
-  const composedStyles = calculateComposedStyles(select.styles, select.state, "trigger", props.style);
+  const composedStyles = calculateComposedStyles(
+    select.styles,
+    select.state,
+    "trigger",
+    props.style,
+  );
 
   const onTriggerPress = () => {
     if (!select.isOpen) {
@@ -28,7 +39,12 @@ export function SelectTrigger(props: SelectTriggerProps) {
   };
 
   return (
-    <Pressable ref={triggerRef} onPress={onTriggerPress} disabled={select.isDisabled} style={composedStyles}>
+    <Pressable
+      ref={triggerRef}
+      onPress={onTriggerPress}
+      disabled={select.isDisabled}
+      style={composedStyles}
+    >
       <SelectValue placeholder={props.placeholder} />
     </Pressable>
   );
@@ -42,12 +58,22 @@ export interface SelectValueProps {
 export function SelectValue(props: SelectValueProps) {
   const select = useSelect();
 
-  const selectedOption = select.options.find((option) => option.value === select.value);
+  const selectedOption = select.options.find(
+    (option) => option.value === select.value,
+  );
   const selectedOptionLabel = selectedOption?.label;
 
-  const composedStyles = calculateComposedStyles(select.styles, select.state, selectedOptionLabel ? "value" : "placeholder");
+  const composedStyles = calculateComposedStyles(
+    select.styles,
+    select.state,
+    selectedOptionLabel ? "value" : "placeholder",
+  );
   if (typeof selectedOptionLabel !== "string") {
     return <>{selectedOptionLabel}</>;
   }
-  return <Text style={composedStyles}>{selectedOptionLabel ?? props.placeholder}</Text>;
+  return (
+    <Text style={composedStyles}>
+      {selectedOptionLabel ?? props.placeholder}
+    </Text>
+  );
 }

package/src/components/select/context.ts

@@ -1,4 +1,4 @@
-import type { LayoutPosition } from "@/hooks";
+import type { LayoutPosition } from "../../hooks";
 import { createContext, type Dispatch, useContext } from "react";
 import type { LayoutRectangle } from "react-native";
 import type { SelectOption, SelectState, SelectStyles } from "./types";

package/src/components/select/variants/default.tsx

@@ -1,5 +1,5 @@
-import { type SelectStyles } from "@/components";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type SelectStyles } from "../..";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export function useSelectVariantDefault(): SelectStyles {
   return useThemedStyles(

package/src/components/tabs/variants/default.tsx

@@ -1,5 +1,5 @@
-import { type TabsStyles } from "@/components";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import { type TabsStyles } from "../types";
 
 export const useTabsVariantDefault = (): TabsStyles => {
   return useThemedStyles(

package/src/components/tabs/variants/line.tsx

@@ -1,5 +1,5 @@
-import { type TabsStyles } from "@/components";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type TabsStyles } from "../..";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export const useTabsVariantLine = (): TabsStyles => {
   return useThemedStyles(

package/src/components/textarea/variants/default.tsx

@@ -1,5 +1,5 @@
-import { type TextareaStyles } from "@/components";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type TextareaStyles } from "../..";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export function useTextareaVariantDefault(): TextareaStyles {
   return useThemedStyles(

package/src/components/toast/components/toast-icon.tsx

@@ -1,10 +1,16 @@
-import type { PropsWithRequiredRender, SvgProps } from "@/types/props.types";
 import React from "react";
+import type {
+  PropsWithRequiredRender,
+  SvgProps,
+} from "../../../types/props.types";
 import { useToast } from "../context";
 
 export type ToastIconProps = SvgProps;
 
-export function ToastIcon({ render: Component, ...props }: PropsWithRequiredRender<ToastIconProps>) {
+export function ToastIcon({
+  render: Component,
+  ...props
+}: PropsWithRequiredRender<ToastIconProps>) {
   const toast = useToast();
 
   const composedProps = {

package/src/components/toast/manager.tsx

@@ -1,7 +1,7 @@
-import { Portal } from "@/components/portal";
-import { useSafeAreaInsets } from "@/safe-area";
 import React, { useSyncExternalStore } from "react";
 import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "../../safe-area";
+import { Portal } from "../portal";
 import { ToastDescription } from "./components/toast-description";
 import { ToastRoot } from "./components/toast-root";
 import { ToastTitle } from "./components/toast-title";
@@ -87,7 +87,12 @@ export function ToastContainer() {
     <Portal name={TOAST_PORTAL_NAME}>
       <View style={[s.wrapper, { top: insets.top + 24 }]}>
         {toasts.map((toast) => (
-          <ToastComponent key={toast.id} title={toast.title} description={toast.description} variant={toast.variant} />
+          <ToastComponent
+            key={toast.id}
+            title={toast.title}
+            description={toast.description}
+            variant={toast.variant}
+          />
         ))}
       </View>
     </Portal>
@@ -105,7 +110,9 @@ export function ToastComponent(props: ToastProps) {
   return (
     <ToastRoot variant={props.variant}>
       <ToastTitle>{props.title}</ToastTitle>
-      {!!props.description && <ToastDescription>{props.description}</ToastDescription>}
+      {!!props.description && (
+        <ToastDescription>{props.description}</ToastDescription>
+      )}
     </ToastRoot>
   );
 }

package/src/components/toast/variants/danger.tsx

@@ -1,4 +1,4 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type ToastStyles } from "../types";
 
 export const useToastVariantDanger = (): ToastStyles => {

package/src/components/toast/variants/default.tsx

@@ -1,4 +1,4 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type ToastStyles } from "../types";
 
 export const useToastVariantDefault = (): ToastStyles => {

package/src/components/toast/variants/success.tsx

@@ -1,4 +1,4 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type ToastStyles } from "../types";
 
 export const useToastVariantSuccess = (): ToastStyles => {

package/src/components/typography/variants/body-lg.tsx

@@ -1,5 +1,5 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
 import { type TextStyle } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export function useTextVariantBodyLg(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/body-md.tsx

@@ -1,5 +1,5 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
 import { type TextStyle } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export function useTextVariantBodyMd(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/body-sm.tsx

@@ -1,5 +1,5 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
 import { type TextStyle } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export function useTextVariantBodySm(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/heading-lg.tsx

@@ -1,5 +1,5 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
 import { type TextStyle } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export function useTextVariantHeadingLg(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/heading-md.tsx

@@ -1,5 +1,5 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
 import { type TextStyle } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export function useTextVariantHeadingMd(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/heading-sm.tsx

@@ -1,5 +1,5 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
 import { type TextStyle } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export function useTextVariantHeadingSm(): TextStyle {
   return useThemedStyles(

package/src/data/countries.ts

@@ -0,0 +1,88 @@
+export interface CountryData {
+  /** ISO 3166-1 alpha-2 code */
+  code: string;
+  /** Display name */
+  name: string;
+  /** Dial code without plus sign */
+  dialCode: string;
+  /** Flag emoji */
+  flag: string;
+  /** Format pattern using # for digits */
+  format: string;
+  /** Priority for sorting countries with same dial code (lower = higher) */
+  priority: number;
+}
+
+export const COUNTRIES: CountryData[] = [
+  { code: "AF", name: "Afghanistan", dialCode: "93", flag: "🇦🇫", format: "## ### ####", priority: 0 },
+  { code: "AL", name: "Albania", dialCode: "355", flag: "🇦🇱", format: "## ### ####", priority: 0 },
+  { code: "DZ", name: "Algeria", dialCode: "213", flag: "🇩🇿", format: "### ## ## ##", priority: 0 },
+  { code: "AR", name: "Argentina", dialCode: "54", flag: "🇦🇷", format: "## ####-####", priority: 0 },
+  { code: "AU", name: "Australia", dialCode: "61", flag: "🇦🇺", format: "#### ### ###", priority: 0 },
+  { code: "AT", name: "Austria", dialCode: "43", flag: "🇦🇹", format: "### #######", priority: 0 },
+  { code: "BD", name: "Bangladesh", dialCode: "880", flag: "🇧🇩", format: "#### ######", priority: 0 },
+  { code: "BE", name: "Belgium", dialCode: "32", flag: "🇧🇪", format: "### ## ## ##", priority: 0 },
+  { code: "BR", name: "Brazil", dialCode: "55", flag: "🇧🇷", format: "(##) #####-####", priority: 0 },
+  { code: "CA", name: "Canada", dialCode: "1", flag: "🇨🇦", format: "(###) ###-####", priority: 1 },
+  { code: "CL", name: "Chile", dialCode: "56", flag: "🇨🇱", format: "# #### ####", priority: 0 },
+  { code: "CN", name: "China", dialCode: "86", flag: "🇨🇳", format: "### #### ####", priority: 0 },
+  { code: "CO", name: "Colombia", dialCode: "57", flag: "🇨🇴", format: "### ### ####", priority: 0 },
+  { code: "CR", name: "Costa Rica", dialCode: "506", flag: "🇨🇷", format: "#### ####", priority: 0 },
+  { code: "CZ", name: "Czech Republic", dialCode: "420", flag: "🇨🇿", format: "### ### ###", priority: 0 },
+  { code: "DK", name: "Denmark", dialCode: "45", flag: "🇩🇰", format: "## ## ## ##", priority: 0 },
+  { code: "DO", name: "Dominican Republic", dialCode: "1", flag: "🇩🇴", format: "(###) ###-####", priority: 2 },
+  { code: "EC", name: "Ecuador", dialCode: "593", flag: "🇪🇨", format: "## ### ####", priority: 0 },
+  { code: "EG", name: "Egypt", dialCode: "20", flag: "🇪🇬", format: "### ### ####", priority: 0 },
+  { code: "FI", name: "Finland", dialCode: "358", flag: "🇫🇮", format: "## ### ## ##", priority: 0 },
+  { code: "FR", name: "France", dialCode: "33", flag: "🇫🇷", format: "# ## ## ## ##", priority: 0 },
+  { code: "DE", name: "Germany", dialCode: "49", flag: "🇩🇪", format: "#### #######", priority: 0 },
+  { code: "GH", name: "Ghana", dialCode: "233", flag: "🇬🇭", format: "## ### ####", priority: 0 },
+  { code: "GR", name: "Greece", dialCode: "30", flag: "🇬🇷", format: "### ### ####", priority: 0 },
+  { code: "GT", name: "Guatemala", dialCode: "502", flag: "🇬🇹", format: "#### ####", priority: 0 },
+  { code: "HK", name: "Hong Kong", dialCode: "852", flag: "🇭🇰", format: "#### ####", priority: 0 },
+  { code: "HU", name: "Hungary", dialCode: "36", flag: "🇭🇺", format: "## ### ####", priority: 0 },
+  { code: "IN", name: "India", dialCode: "91", flag: "🇮🇳", format: "#####-#####", priority: 0 },
+  { code: "ID", name: "Indonesia", dialCode: "62", flag: "🇮🇩", format: "### #### ####", priority: 0 },
+  { code: "IE", name: "Ireland", dialCode: "353", flag: "🇮🇪", format: "## ### ####", priority: 0 },
+  { code: "IL", name: "Israel", dialCode: "972", flag: "🇮🇱", format: "##-###-####", priority: 0 },
+  { code: "IT", name: "Italy", dialCode: "39", flag: "🇮🇹", format: "### ### ####", priority: 0 },
+  { code: "JM", name: "Jamaica", dialCode: "1", flag: "🇯🇲", format: "(###) ###-####", priority: 3 },
+  { code: "JP", name: "Japan", dialCode: "81", flag: "🇯🇵", format: "##-####-####", priority: 0 },
+  { code: "KE", name: "Kenya", dialCode: "254", flag: "🇰🇪", format: "### ######", priority: 0 },
+  { code: "KR", name: "South Korea", dialCode: "82", flag: "🇰🇷", format: "##-####-####", priority: 0 },
+  { code: "MY", name: "Malaysia", dialCode: "60", flag: "🇲🇾", format: "##-### ####", priority: 0 },
+  { code: "MX", name: "Mexico", dialCode: "52", flag: "🇲🇽", format: "## #### ####", priority: 0 },
+  { code: "MA", name: "Morocco", dialCode: "212", flag: "🇲🇦", format: "##-### ####", priority: 0 },
+  { code: "NL", name: "Netherlands", dialCode: "31", flag: "🇳🇱", format: "# ## ## ## ##", priority: 0 },
+  { code: "NZ", name: "New Zealand", dialCode: "64", flag: "🇳🇿", format: "## ### ####", priority: 0 },
+  { code: "NG", name: "Nigeria", dialCode: "234", flag: "🇳🇬", format: "### ### ####", priority: 0 },
+  { code: "NO", name: "Norway", dialCode: "47", flag: "🇳🇴", format: "### ## ###", priority: 0 },
+  { code: "PK", name: "Pakistan", dialCode: "92", flag: "🇵🇰", format: "### #######", priority: 0 },
+  { code: "PA", name: "Panama", dialCode: "507", flag: "🇵🇦", format: "####-####", priority: 0 },
+  { code: "PE", name: "Peru", dialCode: "51", flag: "🇵🇪", format: "### ### ###", priority: 0 },
+  { code: "PH", name: "Philippines", dialCode: "63", flag: "🇵🇭", format: "### ### ####", priority: 0 },
+  { code: "PL", name: "Poland", dialCode: "48", flag: "🇵🇱", format: "### ### ###", priority: 0 },
+  { code: "PT", name: "Portugal", dialCode: "351", flag: "🇵🇹", format: "### ### ###", priority: 0 },
+  { code: "PR", name: "Puerto Rico", dialCode: "1", flag: "🇵🇷", format: "(###) ###-####", priority: 4 },
+  { code: "RO", name: "Romania", dialCode: "40", flag: "🇷🇴", format: "### ### ###", priority: 0 },
+  { code: "RU", name: "Russia", dialCode: "7", flag: "🇷🇺", format: "### ###-##-##", priority: 0 },
+  { code: "SA", name: "Saudi Arabia", dialCode: "966", flag: "🇸🇦", format: "## ### ####", priority: 0 },
+  { code: "SG", name: "Singapore", dialCode: "65", flag: "🇸🇬", format: "#### ####", priority: 0 },
+  { code: "ZA", name: "South Africa", dialCode: "27", flag: "🇿🇦", format: "## ### ####", priority: 0 },
+  { code: "ES", name: "Spain", dialCode: "34", flag: "🇪🇸", format: "### ## ## ##", priority: 0 },
+  { code: "SE", name: "Sweden", dialCode: "46", flag: "🇸🇪", format: "##-### ## ##", priority: 0 },
+  { code: "CH", name: "Switzerland", dialCode: "41", flag: "🇨🇭", format: "## ### ## ##", priority: 0 },
+  { code: "TW", name: "Taiwan", dialCode: "886", flag: "🇹🇼", format: "### ### ###", priority: 0 },
+  { code: "TH", name: "Thailand", dialCode: "66", flag: "🇹🇭", format: "## ### ####", priority: 0 },
+  { code: "TR", name: "Turkey", dialCode: "90", flag: "🇹🇷", format: "### ### ## ##", priority: 0 },
+  { code: "UA", name: "Ukraine", dialCode: "380", flag: "🇺🇦", format: "## ### ## ##", priority: 0 },
+  { code: "AE", name: "United Arab Emirates", dialCode: "971", flag: "🇦🇪", format: "## ### ####", priority: 0 },
+  { code: "GB", name: "United Kingdom", dialCode: "44", flag: "🇬🇧", format: "#### ######", priority: 0 },
+  { code: "US", name: "United States", dialCode: "1", flag: "🇺🇸", format: "(###) ###-####", priority: 0 },
+  { code: "VE", name: "Venezuela", dialCode: "58", flag: "🇻🇪", format: "###-###-####", priority: 0 },
+  { code: "VN", name: "Vietnam", dialCode: "84", flag: "🇻🇳", format: "## ### ## ##", priority: 0 },
+];
+
+export function getCountryByCode(code: string): CountryData | undefined {
+  return COUNTRIES.find((c) => c.code === code);
+}

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from "./use-screen-size";
 export * from "./use-currency-mask";
 export * from "./use-numeric-mask";
+export * from "./use-phone-mask";
 export * from "./use-relative-position";