@korsolutions/ui 0.0.52 → 0.0.53

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";

package/src/hooks/use-phone-mask.ts

@@ -0,0 +1,183 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  type CountryData,
+  COUNTRIES,
+  getCountryByCode,
+} from "../data/countries";
+
+export interface UsePhoneMaskOptions {
+  value?: string;
+  defaultCountry?: string;
+  onChange?: (e164Value: string) => void;
+  onCountryChange?: (country: CountryData) => void;
+  countries?: CountryData[];
+}
+
+export interface UsePhoneMaskReturn {
+  displayValue: string;
+  e164Value: string;
+  country: CountryData;
+  countries: CountryData[];
+  onChangeText: (text: string) => void;
+  setCountry: (countryCode: string) => void;
+  setValue: (e164: string) => void;
+  keyboardType: "phone-pad";
+}
+
+function stripToDigits(text: string): string {
+  return text.replace(/\D/g, "");
+}
+
+function formatNational(digits: string, format: string): string {
+  let result = "";
+  let digitIndex = 0;
+  for (let i = 0; i < format.length && digitIndex < digits.length; i++) {
+    if (format[i] === "#") {
+      result += digits[digitIndex];
+      digitIndex++;
+    } else {
+      result += format[i];
+    }
+  }
+  return result;
+}
+
+function toE164(dialCode: string, nationalDigits: string): string {
+  return `+${dialCode}${nationalDigits}`;
+}
+
+function getMaxDigits(format: string): number {
+  return format.split("").filter((c) => c === "#").length;
+}
+
+function parseE164(
+  e164: string,
+  countries: CountryData[],
+): { country: CountryData; nationalDigits: string } | null {
+  if (!e164.startsWith("+")) return null;
+  const digits = e164.slice(1);
+
+  const sorted = [...countries].sort(
+    (a, b) => b.dialCode.length - a.dialCode.length,
+  );
+
+  for (const country of sorted) {
+    if (digits.startsWith(country.dialCode)) {
+      return {
+        country,
+        nationalDigits: digits.slice(country.dialCode.length),
+      };
+    }
+  }
+  return null;
+}
+
+export function usePhoneMask({
+  value: controlledValue,
+  defaultCountry = "US",
+  onChange,
+  onCountryChange,
+  countries: customCountries,
+}: UsePhoneMaskOptions = {}): UsePhoneMaskReturn {
+  const availableCountries = customCountries ?? COUNTRIES;
+  const isInternalChange = useRef(false);
+
+  const [country, setCountryState] = useState<CountryData>(
+    () => getCountryByCode(defaultCountry) ?? availableCountries[0]!,
+  );
+  const [nationalDigits, setNationalDigits] = useState<string>("");
+  const [displayValue, setDisplayValue] = useState<string>("");
+
+  useEffect(() => {
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+
+    if (controlledValue) {
+      const parsed = parseE164(controlledValue, availableCountries);
+      if (parsed) {
+        setCountryState(parsed.country);
+        setNationalDigits(parsed.nationalDigits);
+        setDisplayValue(
+          formatNational(parsed.nationalDigits, parsed.country.format),
+        );
+      }
+    } else {
+      setNationalDigits("");
+      setDisplayValue("");
+    }
+  }, [controlledValue]);
+
+  const onChangeText = useCallback(
+    (text: string) => {
+      const digits = stripToDigits(text);
+      const maxDigits = getMaxDigits(country.format);
+      const trimmed = digits.slice(0, maxDigits);
+
+      setNationalDigits(trimmed);
+      setDisplayValue(formatNational(trimmed, country.format));
+
+      const e164 = trimmed.length > 0 ? toE164(country.dialCode, trimmed) : "";
+      isInternalChange.current = true;
+      onChange?.(e164);
+    },
+    [country, onChange],
+  );
+
+  const handleSetCountry = useCallback(
+    (countryCode: string) => {
+      const newCountry = availableCountries.find((c) => c.code === countryCode);
+      if (!newCountry) return;
+
+      setCountryState(newCountry);
+      onCountryChange?.(newCountry);
+
+      const maxDigits = getMaxDigits(newCountry.format);
+      const trimmed = nationalDigits.slice(0, maxDigits);
+      setNationalDigits(trimmed);
+      setDisplayValue(formatNational(trimmed, newCountry.format));
+
+      const e164 =
+        trimmed.length > 0 ? toE164(newCountry.dialCode, trimmed) : "";
+      isInternalChange.current = true;
+      onChange?.(e164);
+    },
+    [nationalDigits, availableCountries, onChange, onCountryChange],
+  );
+
+  const setValue = useCallback(
+    (e164: string) => {
+      if (!e164) {
+        setNationalDigits("");
+        setDisplayValue("");
+        isInternalChange.current = true;
+        onChange?.("");
+        return;
+      }
+      const parsed = parseE164(e164, availableCountries);
+      if (parsed) {
+        setCountryState(parsed.country);
+        setNationalDigits(parsed.nationalDigits);
+        setDisplayValue(
+          formatNational(parsed.nationalDigits, parsed.country.format),
+        );
+        isInternalChange.current = true;
+        onChange?.(e164);
+      }
+    },
+    [availableCountries, onChange],
+  );
+
+  return {
+    displayValue,
+    e164Value:
+      nationalDigits.length > 0 ? toE164(country.dialCode, nationalDigits) : "",
+    country,
+    countries: availableCountries,
+    onChangeText,
+    setCountry: handleSetCountry,
+    setValue,
+    keyboardType: "phone-pad",
+  };
+}