@korsolutions/ui 0.0.52 → 0.0.54

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 PhoneMask {
+  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 = {}): PhoneMask {
+  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",
+  };
+}

package/src/hooks/use-relative-position.ts

@@ -1,8 +1,16 @@
-import type { SafeAreaInsets } from "@/safe-area";
 import { useMemo } from "react";
-import { useWindowDimensions, type DisplayMetrics, type LayoutRectangle, type ViewStyle } from "react-native";
+import {
+  useWindowDimensions,
+  type DisplayMetrics,
+  type LayoutRectangle,
+  type ViewStyle,
+} from "react-native";
+import type { SafeAreaInsets } from "../safe-area";
 
-type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "contentLayout" | "dimensions"> & {
+type UseRelativePositionArgs = Omit<
+  GetContentStyleArgs,
+  "triggerPosition" | "contentLayout" | "dimensions"
+> & {
   triggerPosition: LayoutPosition | null;
   contentLayout: LayoutRectangle | null;
 };
@@ -40,7 +48,17 @@ export function useRelativePosition({
     });
 
     return style;
-  }, [align, preferredSide, alignOffset, insets, triggerPosition, contentLayout, dimensions.width, dimensions.height, sideOffset]);
+  }, [
+    align,
+    preferredSide,
+    alignOffset,
+    insets,
+    triggerPosition,
+    contentLayout,
+    dimensions.width,
+    dimensions.height,
+    sideOffset,
+  ]);
 }
 
 export interface LayoutPosition {
@@ -62,8 +80,18 @@ interface GetSidePositionArgs extends GetPositionArgs {
   sideOffset: number;
 }
 
-export const DEFAULT_LAYOUT: LayoutRectangle = { x: 0, y: 0, width: 0, height: 0 };
-export const DEFAULT_POSITION: LayoutPosition = { height: 0, width: 0, pageX: 0, pageY: 0 };
+export const DEFAULT_LAYOUT: LayoutRectangle = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+export const DEFAULT_POSITION: LayoutPosition = {
+  height: 0,
+  width: 0,
+  pageX: 0,
+  pageY: 0,
+};
 
 interface GetSideArgs {
   preferredSide: "top" | "bottom";
@@ -75,7 +103,15 @@ interface GetSideArgs {
   dimensions: DisplayMetrics;
 }
 
-function getSide({ preferredSide, insetTop, insetBottom, positionTop, positionBottom, contentLayout, dimensions }: GetSideArgs) {
+function getSide({
+  preferredSide,
+  insetTop,
+  insetBottom,
+  positionTop,
+  positionBottom,
+  contentLayout,
+  dimensions,
+}: GetSideArgs) {
   if (preferredSide === "bottom") {
     const spaceBelow = dimensions.height - insetBottom - positionBottom;
     if (spaceBelow >= contentLayout.height) {
@@ -98,11 +134,20 @@ function getSide({ preferredSide, insetTop, insetBottom, positionTop, positionBo
   return "top";
 }
 
-function getSidePosition({ preferredSide, triggerPosition, contentLayout, sideOffset, insets, dimensions }: GetSidePositionArgs) {
+function getSidePosition({
+  preferredSide,
+  triggerPosition,
+  contentLayout,
+  sideOffset,
+  insets,
+  dimensions,
+}: GetSidePositionArgs) {
   const insetTop = insets?.top ?? 0;
   const insetBottom = insets?.bottom ?? 0;
-  const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
-  const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
+  const positionTop =
+    triggerPosition?.pageY - sideOffset - contentLayout.height;
+  const positionBottom =
+    triggerPosition.pageY + triggerPosition.height + sideOffset;
 
   const side = getSide({
     preferredSide,
@@ -116,12 +161,18 @@ function getSidePosition({ preferredSide, triggerPosition, contentLayout, sideOf
 
   if (side === "top") {
     return {
-      top: Math.min(Math.max(insetTop, positionTop), dimensions.height - insetBottom - contentLayout.height),
+      top: Math.min(
+        Math.max(insetTop, positionTop),
+        dimensions.height - insetBottom - contentLayout.height,
+      ),
     };
   }
 
   return {
-    top: Math.min(dimensions.height - insetBottom - contentLayout.height, positionBottom),
+    top: Math.min(
+      dimensions.height - insetBottom - contentLayout.height,
+      positionBottom,
+    ),
   };
 }
 
@@ -130,16 +181,33 @@ interface GetAlignPositionArgs extends GetPositionArgs {
   alignOffset: number;
 }
 
-function getAlignPosition({ align, contentLayout, triggerPosition, alignOffset, insets, dimensions }: GetAlignPositionArgs) {
+function getAlignPosition({
+  align,
+  contentLayout,
+  triggerPosition,
+  alignOffset,
+  insets,
+  dimensions,
+}: GetAlignPositionArgs) {
   const insetLeft = insets?.left ?? 0;
   const insetRight = insets?.right ?? 0;
   const maxContentWidth = dimensions.width - insetLeft - insetRight;
 
   const contentWidth = Math.min(contentLayout.width, maxContentWidth);
 
-  let left = getLeftPosition(align, triggerPosition.pageX, triggerPosition.width, contentWidth, alignOffset, insetLeft, insetRight, dimensions);
+  let left = getLeftPosition(
+    align,
+    triggerPosition.pageX,
+    triggerPosition.width,
+    contentWidth,
+    alignOffset,
+    insetLeft,
+    insetRight,
+    dimensions,
+  );
 
-  const doesCollide = left < insetLeft || left + contentWidth > dimensions.width - insetRight;
+  const doesCollide =
+    left < insetLeft || left + contentWidth > dimensions.width - insetRight;
   if (doesCollide) {
     const spaceLeft = left - insetLeft;
     const spaceRight = dimensions.width - insetRight - (left + contentWidth);
@@ -149,7 +217,10 @@ function getAlignPosition({ align, contentLayout, triggerPosition, alignOffset,
     } else if (spaceRight >= contentWidth) {
       left = dimensions.width - insetRight - contentWidth;
     } else {
-      const centeredPosition = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
+      const centeredPosition = Math.max(
+        insetLeft,
+        (dimensions.width - contentWidth - insetRight) / 2,
+      );
       left = centeredPosition;
     }
   }
@@ -177,10 +248,15 @@ function getLeftPosition(
   if (align === "end") {
     left = triggerPageX + triggerWidth - contentWidth;
   }
-  return Math.max(insetLeft, Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight));
+  return Math.max(
+    insetLeft,
+    Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight),
+  );
 }
 
-type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
+type GetContentStyleArgs = GetPositionArgs &
+  GetSidePositionArgs &
+  GetAlignPositionArgs;
 
 function getContentStyle(args: GetContentStyleArgs): ViewStyle {
   return {

package/src/index.tsx

@@ -1,9 +1,9 @@
-import { SafeAreaProvider, type SafeAreaInsets } from "@/safe-area";
-import { ThemeProvider, type ThemeProviderProps } from "@/themes";
 import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-dialog";
 import { PortalHost } from "./components/portal";
 import { type PortalHostProps } from "./components/portal/portal.constants";
 import { ToastContainer } from "./components/toast/manager";
+import { SafeAreaProvider, type SafeAreaInsets } from "./safe-area";
+import { ThemeProvider, type ThemeProviderProps } from "./themes";
 
 export interface ProviderProps {
   children: React.ReactNode;
@@ -12,7 +12,12 @@ export interface ProviderProps {
   safeAreaInsets?: SafeAreaInsets;
 }
 
-export const UIProvider = ({ children, portalContainer, theme, safeAreaInsets }: ProviderProps) => {
+export const UIProvider = ({
+  children,
+  portalContainer,
+  theme,
+  safeAreaInsets,
+}: ProviderProps) => {
   return (
     <SafeAreaProvider insets={safeAreaInsets}>
       <ThemeProvider theme={theme}>

package/src/themes/provider.tsx

@@ -1,8 +1,22 @@
-import type { DeepPartial } from "@/types/util.types";
-import { createContext, type PropsWithChildren, useContext, useEffect, useState } from "react";
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { useColorScheme } from "react-native";
+import type { DeepPartial } from "../types/util.types";
 import { defaultThemeAssets } from "./default";
-import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeAssets } from "./types";
+import type {
+  Colors,
+  ColorScheme,
+  FontFamily,
+  FontSize,
+  LetterSpacing,
+  Radius,
+  ThemeAssets,
+} from "./types";
 import { mergeThemeAssets } from "./utils";
 
 interface ThemeContext {
@@ -25,9 +39,13 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
   const { children, theme } = props;
 
   const systemColorScheme = useColorScheme();
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(systemColorScheme === "dark" ? "dark" : "light");
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(
+    systemColorScheme === "dark" ? "dark" : "light",
+  );
 
-  const themeAssets = theme ? mergeThemeAssets(defaultThemeAssets, theme) : defaultThemeAssets;
+  const themeAssets = theme
+    ? mergeThemeAssets(defaultThemeAssets, theme)
+    : defaultThemeAssets;
 
   const colors = themeAssets.colors[colorScheme];
 

package/src/themes/utils.ts

@@ -1,7 +1,10 @@
-import type { DeepPartial } from "@/types/util.types";
+import type { DeepPartial } from "../types/util.types";
 import type { ThemeAssets } from "./types";
 
-export function mergeThemeAssets(base: ThemeAssets, override: DeepPartial<ThemeAssets>): ThemeAssets {
+export function mergeThemeAssets(
+  base: ThemeAssets,
+  override: DeepPartial<ThemeAssets>,
+): ThemeAssets {
   return {
     colors: {
       light: { ...base.colors.light, ...override.colors?.light },

package/src/utils/input-utils.ts

@@ -1,7 +1,10 @@
-import type { TextInputRef } from "@/types/element.types";
 import { Platform } from "react-native";
+import type { TextInputRef } from "../types/element.types";
 
-export function setInnerInputValue(element: HTMLInputElement | TextInputRef, value: string) {
+export function setInnerInputValue(
+  element: HTMLInputElement | TextInputRef,
+  value: string,
+) {
   if (Platform.OS === "web") {
     (element as HTMLInputElement).value = value;
   } else {

package/src/utils/normalize-layout.ts

@@ -1,5 +1,5 @@
-import type { LayoutPosition } from "@/hooks";
 import type { HostInstance, LayoutRectangle } from "react-native";
+import type { LayoutPosition } from "../hooks";
 
 export const normalizeLayout = (layout: LayoutRectangle) => {
   const _layout = { ...layout };
@@ -21,7 +21,10 @@ const isValidNumber = (value: unknown): value is number => {
   return isValid;
 };
 
-export const measureLayoutPosition = (ref: HostInstance | null, callback: (layout: LayoutPosition) => void) => {
+export const measureLayoutPosition = (
+  ref: HostInstance | null,
+  callback: (layout: LayoutPosition) => void,
+) => {
   ref?.measureInWindow((pageX, pageY, width, height) => {
     callback({
       height: isValidNumber(height) ? height : 0,

package/src/utils/use-themed-styles.ts

@@ -1,5 +1,11 @@
-import { useTheme } from "@/themes";
-import type { Colors, FontFamily, FontSize, LetterSpacing, Radius } from "@/themes/types";
+import { useTheme } from "../themes";
+import type {
+  Colors,
+  FontFamily,
+  FontSize,
+  LetterSpacing,
+  Radius,
+} from "../themes/types";
 
 interface CallbackProps {
   colors: Colors;
@@ -9,7 +15,9 @@ interface CallbackProps {
   fontSize: FontSize;
 }
 
-export const useThemedStyles = <T>(callback: (props: CallbackProps) => T): T => {
+export const useThemedStyles = <T>(
+  callback: (props: CallbackProps) => T,
+): T => {
   const theme = useTheme();
   return callback({
     colors: theme.colors,

package/tsconfig.json

@@ -1,10 +1,17 @@
 {
   "compilerOptions": {
-    "customConditions": ["dev-source", "react-native", "react-native-strict-api"],
+    "customConditions": [
+      "dev-source",
+      "react-native",
+      "react-native-strict-api"
+    ],
     "allowJs": true,
     "esModuleInterop": true,
     "jsx": "react-native",
-    "lib": ["DOM", "ESNext"],
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
     "module": "preserve",
     "moduleDetection": "force",
     "moduleResolution": "bundler",
@@ -24,9 +31,9 @@
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
   },
-  "exclude": ["node_modules", "dist"]
-}
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/scripts/build.sh

@@ -1,2 +0,0 @@
-bob build
-tsc-alias -p tsconfig.json --outDir dist/typescript