@korsolutions/ui 0.0.53 → 0.0.55

package/dist/module/utils/use-themed-styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["useTheme","useThemedStyles","callback","theme","colors","radius","fontFamily","letterSpacing","fontSize"],"sourceRoot":"../../../src","sources":["utils/use-themed-styles.ts"],"mappings":";;AAAA,SAASA,QAAQ;AAiBjB,OAAO,MAAMC,eAAe,GAC1BC,QAAqC,IAC/B;EACN,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EACxB,OAAOE,QAAQ,CAAC;IACdE,MAAM,EAAED,KAAK,CAACC,MAAM;IACpBC,MAAM,EAAEF,KAAK,CAACE,MAAM;IACpBC,UAAU,EAAEH,KAAK,CAACG,UAAU;IAC5BC,aAAa,EAAEJ,KAAK,CAACI,aAAa;IAClCC,QAAQ,EAAEL,KAAK,CAACK;EAClB,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["useTheme","useThemedStyles","callback","theme","colors","radius","fontFamily","letterSpacing","fontSize"],"sourceRoot":"../../../src","sources":["utils/use-themed-styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,oBAAW;AAiBpC,OAAO,MAAMC,eAAe,GAC1BC,QAAqC,IAC/B;EACN,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EACxB,OAAOE,QAAQ,CAAC;IACdE,MAAM,EAAED,KAAK,CAACC,MAAM;IACpBC,MAAM,EAAEF,KAAK,CAACE,MAAM;IACpBC,UAAU,EAAEH,KAAK,CAACG,UAAU;IAC5BC,aAAa,EAAEJ,KAAK,CAACI,aAAa;IAClCC,QAAQ,EAAEL,KAAK,CAACK;EAClB,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}

package/dist/typescript/babel.config.d.ts

@@ -1,11 +1,6 @@
 declare function _exports(api: any): {
     presets: string[];
-    plugins: (string | {
-        root: string[];
-        alias: {
-            "@": string;
-        };
-    })[][];
+    plugins: never[];
 };
 export = _exports;
 //# sourceMappingURL=babel.config.d.ts.map

package/dist/typescript/babel.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"babel.config.d.ts","sourceRoot":"","sources":["../../babel.config.js"],"names":[],"mappings":"AAAiB;;;;;;;;EAiBhB"}
+{"version":3,"file":"babel.config.d.ts","sourceRoot":"","sources":["../../babel.config.js"],"names":[],"mappings":"AAAiB;;;EAOhB"}

package/dist/typescript/src/components/phone-input/components/country-picker.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function CountryPicker(): React.JSX.Element;
+//# sourceMappingURL=country-picker.d.ts.map

package/dist/typescript/src/components/phone-input/components/country-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-picker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/phone-input/components/country-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuBxC,wBAAgB,aAAa,sBAmI5B"}

package/dist/typescript/src/components/phone-input/components/phone-input-root.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type CountryCode } from "../../../data/countries";
+import { PhoneInputVariants } from "../variants";
+export interface PhoneInputRootProps {
+    children?: React.ReactNode;
+    value?: string;
+    onChange?: (value: string) => void;
+    defaultCountry?: string;
+    countryCodes?: CountryCode[];
+    isDisabled?: boolean;
+    variant?: keyof typeof PhoneInputVariants;
+    placeholder?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function PhoneInputRoot({ children, value, onChange, defaultCountry, countryCodes, isDisabled, variant, style, }: PhoneInputRootProps): React.JSX.Element;
+//# sourceMappingURL=phone-input-root.d.ts.map

package/dist/typescript/src/components/phone-input/components/phone-input-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/phone-input/components/phone-input-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,OAAO,kBAAkB,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAWD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,cAAqB,EACrB,YAAqB,EACrB,UAAkB,EAClB,OAAmB,EACnB,KAAK,GACN,EAAE,mBAAmB,qBA6CrB"}

package/dist/typescript/src/components/phone-input/components/phone-input.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { type StyleProp, type TextStyle } from "react-native";
+export interface PhoneInputProps {
+    placeholder?: string;
+    style?: StyleProp<TextStyle>;
+}
+export declare function PhoneInput({ placeholder, style, }: PhoneInputProps): React.JSX.Element;
+//# sourceMappingURL=phone-input.d.ts.map

package/dist/typescript/src/components/phone-input/components/phone-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../../../../src/components/phone-input/components/phone-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAkC,EAClC,KAAK,GACN,EAAE,eAAe,qBAyBjB"}

package/dist/typescript/src/components/phone-input/context.d.ts

@@ -0,0 +1,17 @@
+import type { PhoneMask } from "../../hooks";
+import type { ViewRef } from "../../types/element.types";
+import type { PhoneInputState, PhoneInputStyles } from "./types";
+export interface PhoneInputContext {
+    value: string | undefined;
+    onChange: ((value: string) => void) | undefined;
+    isFocused: boolean;
+    setIsFocused: (focused: boolean) => void;
+    isDisabled: boolean;
+    triggerRef: React.RefObject<ViewRef | null>;
+    phoneMask: PhoneMask;
+    state: PhoneInputState;
+    styles: PhoneInputStyles;
+}
+export declare const PhoneInputContext: import("react").Context<PhoneInputContext | undefined>;
+export declare const usePhoneInput: () => PhoneInputContext;
+//# sourceMappingURL=context.d.ts.map

package/dist/typescript/src/components/phone-input/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/phone-input/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEhD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,OAAO,CAAC;IAEpB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAE5C,SAAS,EAAE,SAAS,CAAC;IAErB,KAAK,EAAE,eAAe,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,wDAE7B,CAAC;AAEF,eAAO,MAAM,aAAa,yBAMzB,CAAC"}

package/dist/typescript/src/components/phone-input/index.d.ts

@@ -1,3 +1,10 @@
-export { PhoneInput, type PhoneInputProps } from "./phone-input";
 export type { PhoneInputState, PhoneInputStyles } from "./types";
+import { CountryPicker } from "./components/country-picker";
+import { PhoneInput as PhoneInputComponent } from "./components/phone-input";
+import { PhoneInputRoot } from "./components/phone-input-root";
+export declare const PhoneInput: {
+    Root: typeof PhoneInputRoot;
+    CountryPicker: typeof CountryPicker;
+    Input: typeof PhoneInputComponent;
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/phone-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/phone-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/phone-input/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,eAAO,MAAM,UAAU;;;;CAItB,CAAC"}

package/dist/typescript/src/components/select/components/select-portal.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 export interface SelectPortalProps {
     children?: React.ReactNode;
 }
-export declare function SelectPortal(props: SelectPortalProps): React.JSX.Element | null;
+export declare function SelectPortal(props: SelectPortalProps): React.JSX.Element;
 //# sourceMappingURL=select-portal.d.ts.map

package/dist/typescript/src/components/select/components/select-portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-portal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,4BAkBpD"}
+{"version":3,"file":"select-portal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAKzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA6BpD"}

package/dist/typescript/src/components/select/components/select-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAMtB,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAgCtD;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAqBlD"}
+{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/select/components/select-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAMtB,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAgCtD;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAoBlD"}

package/dist/typescript/src/components/toast/components/toast-body.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithRender } from "../../../types/props.types";
+import React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface ToastBodyProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ToastBody(props: PropsWithRender<ToastBodyProps>): React.JSX.Element;
+//# sourceMappingURL=toast-body.d.ts.map

package/dist/typescript/src/components/toast/components/toast-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-body.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast/components/toast-body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,eAAe,CAAC,cAAc,CAAC,qBAO/D"}

package/dist/typescript/src/components/toast/manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../../../../../src/components/toast/manager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA2BD,iBAAS,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAuB7C;AAED,iBAAS,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAGrC;AAED,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,wBAAgB,cAAc,6BAoB7B;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;CACtC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,qBAS/C"}
+{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../../../../../src/components/toast/manager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAUpD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA2BD,iBAAS,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAuB7C;AAED,iBAAS,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAGrC;AAED,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,wBAAgB,cAAc,6BAoB7B;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;CACtC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,qBAgB/C"}

package/dist/typescript/src/components/toast/types.d.ts

@@ -1,9 +1,11 @@
+import type { ToastBodyProps } from "./components/toast-body";
 import type { ToastDescriptionProps } from "./components/toast-description";
 import type { ToastIconProps } from "./components/toast-icon";
 import type { ToastRootProps } from "./components/toast-root";
 import type { ToastTitleProps } from "./components/toast-title";
 export interface ToastStyles {
     root?: ToastRootProps["style"];
+    body?: ToastBodyProps["style"];
     icon?: ToastIconProps;
     title?: ToastTitleProps["style"];
     description?: ToastDescriptionProps["style"];

package/dist/typescript/src/components/toast/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEhE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;CAC9C"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEhE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;CAC9C"}

package/dist/typescript/src/components/toast/variants/danger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"danger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast/variants/danger.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,qBAAqB,QAAO,WAmCxC,CAAC"}
+{"version":3,"file":"danger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast/variants/danger.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,qBAAqB,QAAO,WAuCxC,CAAC"}

package/dist/typescript/src/components/toast/variants/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast/variants/default.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,sBAAsB,QAAO,WAkCzC,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast/variants/default.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,sBAAsB,QAAO,WAsCzC,CAAC"}

package/dist/typescript/src/components/toast/variants/success.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"success.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast/variants/success.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,sBAAsB,QAAO,WAmCzC,CAAC"}
+{"version":3,"file":"success.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast/variants/success.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,sBAAsB,QAAO,WAuCzC,CAAC"}

package/dist/typescript/src/data/countries.d.ts

@@ -1,6 +1,7 @@
+export type CountryCode = "AF" | "AL" | "DZ" | "AR" | "AU" | "AT" | "BD" | "BE" | "BR" | "CA" | "CL" | "CN" | "CO" | "CR" | "CZ" | "DK" | "DO" | "EC" | "EG" | "FI" | "FR" | "DE" | "GH" | "GR" | "GT" | "HK" | "HU" | "IN" | "ID" | "IE" | "IL" | "IT" | "JM" | "JP" | "KE" | "KR" | "MY" | "MX" | "MA" | "NL" | "NZ" | "NG" | "NO" | "PK" | "PA" | "PE" | "PH" | "PL" | "PT" | "PR" | "RO" | "RU" | "SA" | "SG" | "ZA" | "ES" | "SE" | "CH" | "TW" | "TH" | "TR" | "UA" | "AE" | "GB" | "US" | "VE" | "VN";
 export interface CountryData {
     /** ISO 3166-1 alpha-2 code */
-    code: string;
+    code: CountryCode;
     /** Display name */
     name: string;
     /** Dial code without plus sign */

package/dist/typescript/src/data/countries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"countries.d.ts","sourceRoot":"","sources":["../../../../src/data/countries.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,EAAE,WAAW,EAoElC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAEtE"}
+{"version":3,"file":"countries.d.ts","sourceRoot":"","sources":["../../../../src/data/countries.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GACnB,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,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,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,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,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AAET,MAAM,WAAW,WAAW;IAC1B,8BAA8B;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,EAAE,WAAW,EAyhBlC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAEtE"}

package/dist/typescript/src/hooks/use-phone-mask.d.ts

@@ -6,7 +6,7 @@ export interface UsePhoneMaskOptions {
     onCountryChange?: (country: CountryData) => void;
     countries?: CountryData[];
 }
-export interface UsePhoneMaskReturn {
+export interface PhoneMask {
     displayValue: string;
     e164Value: string;
     country: CountryData;
@@ -16,5 +16,5 @@ export interface UsePhoneMaskReturn {
     setValue: (e164: string) => void;
     keyboardType: "phone-pad";
 }
-export declare function usePhoneMask({ value: controlledValue, defaultCountry, onChange, onCountryChange, countries: customCountries, }?: UsePhoneMaskOptions): UsePhoneMaskReturn;
+export declare function usePhoneMask({ value: controlledValue, defaultCountry, onChange, onCountryChange, countries: customCountries, }?: UsePhoneMaskOptions): PhoneMask;
 //# sourceMappingURL=use-phone-mask.d.ts.map

package/dist/typescript/src/hooks/use-phone-mask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-phone-mask.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-phone-mask.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,WAAW,EAGjB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,WAAW,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,YAAY,EAAE,WAAW,CAAC;CAC3B;AAkDD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EAAE,eAAe,EACtB,cAAqB,EACrB,QAAQ,EACR,eAAe,EACf,SAAS,EAAE,eAAe,GAC3B,GAAE,mBAAwB,GAAG,kBAAkB,CAsG/C"}
+{"version":3,"file":"use-phone-mask.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-phone-mask.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,WAAW,EAGjB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,WAAW,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,YAAY,EAAE,WAAW,CAAC;CAC3B;AAkDD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EAAE,eAAe,EACtB,cAAqB,EACrB,QAAQ,EACR,eAAe,EACf,SAAS,EAAE,eAAe,GAC3B,GAAE,mBAAwB,GAAG,SAAS,CAsGtC"}

package/dist/typescript/src/index.d.ts

@@ -1,17 +1,18 @@
 import { type PortalHostProps } from "./components/portal/portal.constants";
 import { type SafeAreaInsets } from "./safe-area";
-import { type ThemeProviderProps } from "./themes";
+import { type ComponentsConfig, type ThemeProviderProps } from "./themes";
 export interface ProviderProps {
     children: React.ReactNode;
     portalContainer?: PortalHostProps["container"];
     theme?: ThemeProviderProps["theme"];
     safeAreaInsets?: SafeAreaInsets;
+    components?: ComponentsConfig;
 }
-export declare const UIProvider: ({ children, portalContainer, theme, safeAreaInsets, }: ProviderProps) => import("react").JSX.Element;
+export declare const UIProvider: ({ children, portalContainer, theme, safeAreaInsets, components, }: ProviderProps) => import("react").JSX.Element;
 export * from "./hooks/use-screen-size";
 export * from "./themes/adapters";
 export * from "./themes/default";
-export { useTheme } from "./themes/provider";
+export { useTheme, type ComponentsConfig } from "./themes/provider";
 export * from "./themes/types";
 export * from "./components";
 export * from "./safe-area";

package/dist/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,OAAO,EAAoB,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAElE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,eAAO,MAAM,UAAU,GAAI,uDAKxB,aAAa,gCAWf,CAAC;AAEF,cAAc,yBAAyB,CAAC;AAExC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,cAAc,gBAAgB,CAAC;AAE/B,cAAc,cAAc,CAAC;AAE7B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,OAAO,EAAoB,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,GAAI,mEAMxB,aAAa,gCAWf,CAAC;AAEF,cAAc,yBAAyB,CAAC;AAExC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACpE,cAAc,gBAAgB,CAAC;AAE/B,cAAc,cAAc,CAAC;AAE7B,cAAc,aAAa,CAAC"}

package/dist/typescript/src/themes/provider.d.ts

@@ -1,4 +1,6 @@
 import { type PropsWithChildren } from "react";
+import type { ToastVariants } from "../components/toast/variants";
+import type { SvgProps } from "../types/props.types";
 import type { DeepPartial } from "../types/util.types";
 import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeAssets } from "./types";
 interface ThemeContext {
@@ -9,12 +11,20 @@ interface ThemeContext {
     letterSpacing: LetterSpacing;
     fontSize: FontSize;
     setColorScheme: (scheme: ColorScheme) => void;
+    components?: ComponentsConfig;
+}
+export interface ComponentsConfig {
+    toast?: {
+        icons?: Partial<Record<keyof typeof ToastVariants, (props: SvgProps) => React.ReactNode>>;
+    };
 }
 declare const ThemeContext: import("react").Context<ThemeContext | null>;
 export interface ThemeProviderProps extends PropsWithChildren {
     theme?: DeepPartial<ThemeAssets>;
+    components?: ComponentsConfig;
 }
 export declare const ThemeProvider: (props: ThemeProviderProps) => import("react").JSX.Element;
 export declare const useTheme: () => ThemeContext;
+export declare const useComponentsConfig: () => ComponentsConfig | undefined;
 export {};
 //# sourceMappingURL=provider.d.ts.map

package/dist/typescript/src/themes/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/themes/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EACV,MAAM,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,MAAM,EACN,WAAW,EACZ,MAAM,SAAS,CAAC;AAGjB,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,YAAY,8CAA2C,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,KAAK,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAmCtD,CAAC;AAEF,eAAO,MAAM,QAAQ,oBAMpB,CAAC"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/themes/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EACV,MAAM,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,MAAM,EACN,WAAW,EACZ,MAAM,SAAS,CAAC;AAGjB,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,OAAO,CACb,MAAM,CAAC,MAAM,OAAO,aAAa,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC,CACzE,CAAC;KACH,CAAC;CACH;AAED,QAAA,MAAM,YAAY,8CAA2C,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,KAAK,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAoCtD,CAAC;AAEF,eAAO,MAAM,QAAQ,oBAMpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,oCAM/B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,19 +21,14 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "dev": "nodemon",
-    "prepare": "./scripts/build.sh",
-    "ts-check": "tsc --noEmit",
+    "prepare": "bob build",
     "lint": "tsc --noEmit"
   },
   "devDependencies": {
     "@react-navigation/native": "^7.1.28",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "nodemon": "^3.1.11",
     "react-native-builder-bob": "^0.40.17",
-    "tsc-alias": "^1.8.16",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {

package/src/components/phone-input/components/country-picker.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import {
+  Keyboard,
+  type LayoutRectangle,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import type { CountryData } from "../../../data/countries";
+import {
+  DEFAULT_LAYOUT,
+  DEFAULT_POSITION,
+  type LayoutPosition,
+  useRelativePosition,
+} from "../../../hooks/use-relative-position";
+import { measureLayoutPosition } from "../../../utils/normalize-layout";
+import { Portal } from "../../portal";
+import { usePhoneInput } from "../context";
+
+export function CountryPicker() {
+  const { styles, state, phoneMask, isDisabled, triggerRef } = usePhoneInput();
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [triggerPosition, setTriggerPosition] =
+    useState<LayoutPosition>(DEFAULT_POSITION);
+  const [contentLayout, setContentLayout] =
+    useState<LayoutRectangle>(DEFAULT_LAYOUT);
+
+  const filteredCountries = searchQuery
+    ? phoneMask.countries.filter((c) =>
+        c.name.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+    : phoneMask.countries;
+
+  const onOpen = () => {
+    if (isDisabled) return;
+    if (Platform.OS !== "web") {
+      Keyboard.dismiss();
+    }
+    measureLayoutPosition(triggerRef.current, (layout) => {
+      setTriggerPosition(layout);
+      setSearchQuery("");
+      setIsOpen(true);
+    });
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+    setSearchQuery("");
+  };
+
+  const onSelectCountry = (country: CountryData) => {
+    phoneMask.setCountry(country.code);
+    onClose();
+  };
+
+  const positionStyle = useRelativePosition({
+    align: "start",
+    triggerPosition,
+    contentLayout,
+    alignOffset: 0,
+    preferredSide: "bottom",
+    sideOffset: 4,
+  });
+
+  const countryButtonStyles = StyleSheet.flatten([
+    styles.countryButton?.default,
+    styles.countryButton?.[state],
+  ]);
+  const countryButtonTextStyles = StyleSheet.flatten([
+    styles.countryButtonText?.default,
+    styles.countryButtonText?.[state],
+  ]);
+
+  const overlayStyles = StyleSheet.flatten([
+    styles.pickerOverlay?.default,
+    styles.pickerOverlay?.[state],
+  ]);
+  const contentStyles = StyleSheet.flatten([
+    styles.pickerContent?.default,
+    styles.pickerContent?.[state],
+  ]);
+  const searchStyles = StyleSheet.flatten([
+    styles.pickerSearch?.default,
+    styles.pickerSearch?.[state],
+  ]);
+
+  return (
+    <>
+      <Pressable
+        onPress={onOpen}
+        disabled={isDisabled}
+        style={countryButtonStyles}
+      >
+        <Text style={countryButtonTextStyles}>
+          {phoneMask.country.flag} +{phoneMask.country.dialCode}
+        </Text>
+      </Pressable>
+      {isOpen && (
+        <Portal name="phone-input-country-picker">
+          <Pressable
+            onPress={onClose}
+            style={[StyleSheet.absoluteFill, overlayStyles]}
+          />
+          <View
+            style={[
+              positionStyle,
+              contentStyles,
+              { width: triggerPosition.width },
+            ]}
+            onLayout={(e) => setContentLayout(e.nativeEvent.layout)}
+            pointerEvents="box-none"
+          >
+            <TextInput
+              value={searchQuery}
+              onChangeText={setSearchQuery}
+              placeholder="Search countries..."
+              autoFocus
+              style={searchStyles}
+            />
+            <ScrollView keyboardShouldPersistTaps="handled">
+              {filteredCountries.map((country) => {
+                const isSelected = country.code === phoneMask.country.code;
+                const optionStyles = StyleSheet.flatten([
+                  styles.pickerOption?.default,
+                  isSelected && styles.pickerOption?.selected,
+                ]);
+                const optionTextStyles = StyleSheet.flatten([
+                  styles.pickerOptionText?.default,
+                  isSelected && styles.pickerOptionText?.selected,
+                ]);
+
+                return (
+                  <Pressable
+                    key={country.code}
+                    onPress={() => onSelectCountry(country)}
+                    style={optionStyles}
+                  >
+                    <Text style={optionTextStyles}>
+                      {country.flag} {country.name} +{country.dialCode}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+          </View>
+        </Portal>
+      )}
+    </>
+  );
+}

package/src/components/phone-input/components/phone-input-root.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo, useRef, useState } from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { COUNTRIES, type CountryCode } from "../../../data/countries";
+import { usePhoneMask } from "../../../hooks/use-phone-mask";
+import type { ViewRef } from "../../../types/element.types";
+import { PhoneInputContext } from "../context";
+import type { PhoneInputState } from "../types";
+import { PhoneInputVariants } from "../variants";
+
+export interface PhoneInputRootProps {
+  children?: React.ReactNode;
+  value?: string;
+  onChange?: (value: string) => void;
+  defaultCountry?: string;
+  countryCodes?: CountryCode[];
+  isDisabled?: boolean;
+  variant?: keyof typeof PhoneInputVariants;
+  placeholder?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (
+  isDisabled: boolean,
+  isFocused: boolean,
+): PhoneInputState => {
+  if (isDisabled) return "disabled";
+  if (isFocused) return "focused";
+  return "default";
+};
+
+export function PhoneInputRoot({
+  children,
+  value,
+  onChange,
+  defaultCountry = "US",
+  countryCodes = ["US"],
+  isDisabled = false,
+  variant = "default",
+  style,
+}: PhoneInputRootProps) {
+  const variantStyles = PhoneInputVariants[variant]();
+  const [isFocused, setIsFocused] = useState(false);
+  const triggerRef = useRef<ViewRef>(null);
+
+  const state = calculateState(isDisabled, isFocused);
+
+  const countries = COUNTRIES.filter((c) => countryCodes.includes(c.code));
+
+  const phoneMask = usePhoneMask({
+    value,
+    defaultCountry,
+    onChange,
+    countries,
+  });
+
+  const rootStyles = StyleSheet.flatten([
+    variantStyles.root?.default,
+    variantStyles.root?.[state],
+    style,
+  ]);
+
+  const context = useMemo(
+    () =>
+      ({
+        value,
+        onChange,
+        isFocused,
+        setIsFocused,
+        state,
+        phoneMask,
+        isDisabled,
+        styles: variantStyles,
+        triggerRef,
+      }) satisfies PhoneInputContext,
+    [variantStyles, state, phoneMask, isDisabled, value, isFocused],
+  );
+
+  return (
+    <PhoneInputContext.Provider value={context}>
+      <View ref={triggerRef} style={rootStyles}>
+        {children}
+      </View>
+    </PhoneInputContext.Provider>
+  );
+}

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

@@ -0,0 +1,43 @@
+import React from "react";
+import {
+  type StyleProp,
+  StyleSheet,
+  TextInput,
+  type TextStyle,
+} from "react-native";
+import { usePhoneInput } from "../context";
+
+export interface PhoneInputProps {
+  placeholder?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+export function PhoneInput({
+  placeholder = "Enter phone number",
+  style,
+}: PhoneInputProps) {
+  const { styles, state, setIsFocused, phoneMask, isDisabled } =
+    usePhoneInput();
+
+  const inputStyles = StyleSheet.flatten([
+    styles.input?.default,
+    styles.input?.[state],
+    style,
+  ]);
+
+  return (
+    <TextInput
+      value={phoneMask.displayValue}
+      onChangeText={phoneMask.onChangeText}
+      keyboardType={phoneMask.keyboardType}
+      placeholder={placeholder}
+      placeholderTextColor={
+        StyleSheet.flatten(styles.countryButtonText?.disabled)?.color
+      }
+      readOnly={isDisabled}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      style={inputStyles}
+    />
+  );
+}