@korsolutions/ui 0.0.53 → 0.0.54

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}
+    />
+  );
+}

package/src/components/phone-input/context.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext } from "react";
+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 const PhoneInputContext = createContext<PhoneInputContext | undefined>(
+  undefined,
+);
+
+export const usePhoneInput = () => {
+  const context = useContext(PhoneInputContext);
+  if (!context) {
+    throw new Error("usePhoneInput must be used within a PhoneInputRoot");
+  }
+  return context;
+};

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

@@ -1,2 +1,11 @@
-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 const PhoneInput = {
+  Root: PhoneInputRoot,
+  CountryPicker,
+  Input: PhoneInputComponent,
+};

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

@@ -55,7 +55,7 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
       input: {
         default: {
           flex: 1,
-          paddingHorizontal: 12,
+          paddingHorizontal: 16,
           fontFamily,
           fontSize,
           color: colors.foreground,