@korsolutions/ui 0.0.51 → 0.0.53

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

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

package/src/components/card/card-body.tsx

@@ -1,5 +1,5 @@
-import type { PropsWithRender } from "@/types/props.types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { useCard } from "./context";

package/src/components/card/card-footer.tsx

@@ -1,5 +1,5 @@
-import type { PropsWithRender } from "@/types/props.types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { useCard } from "./context";

package/src/components/card/card-header.tsx

@@ -1,5 +1,5 @@
-import type { PropsWithRender } from "@/types/props.types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { useCard } from "./context";

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

@@ -1,5 +1,5 @@
-import type { PropsWithRender } from "@/types/props.types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { CardContext } from "./context";

package/src/components/card/card-title.tsx

@@ -1,6 +1,6 @@
-import type { TextChildren } from "@/types/element.types";
-import type { PropsWithRender } from "@/types/props.types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import type { TextChildren } from "../../types/element.types";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, Text, type TextStyle } from "react-native";
 import { useCard } from "./context";

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

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

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

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

package/src/components/checkbox/variants/outlined.tsx

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

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

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

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

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

package/src/components/icon/icon.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithRequiredRender, SvgProps } from "@/types/props.types";
+import type { PropsWithRequiredRender, SvgProps } from "../../types/props.types";
 import React from "react";
 import { IconVariants } from "./variants";
 

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

@@ -1,4 +1,4 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type IconProps } from "../icon";
 
 export function useIconVariantDefault(): IconProps {

package/src/components/index.ts

@@ -13,6 +13,7 @@ export * from "./input";
 export * from "./link";
 export * from "./list";
 export * from "./menu";
+export * from "./phone-input";
 export * from "./popover";
 export * from "./portal";
 export * from "./progress";

package/src/components/input/input.tsx

@@ -1,4 +1,4 @@
-import type { TextInputRef } from "@/types/element.types";
+import type { TextInputRef } from "../../types/element.types";
 import { forwardRef, useState } from "react";
 import { StyleSheet, TextInput, type TextInputProps } from "react-native";
 import { useFieldOptional } from "../field/context";

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

@@ -1,9 +1,15 @@
-import { useNumericMask, type NumericMaskFormat } from "@/hooks/use-numeric-mask";
 import React, { useEffect } from "react";
+import {
+  useNumericMask,
+  type NumericMaskFormat,
+} from "../../hooks/use-numeric-mask";
 import { Input, type InputProps } from "./input";
 import { InputVariants } from "./variants";
 
-export interface NumericInputProps extends Omit<InputProps, "value" | "onChange" | "keyboardType"> {
+export interface NumericInputProps extends Omit<
+  InputProps,
+  "value" | "onChange" | "keyboardType"
+> {
   variant?: keyof typeof InputVariants;
   value?: number | null;
   onChange?: (value: number | null) => void;

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

@@ -1,5 +1,6 @@
-import { type InputStyles } from "@/components";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { Platform } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import { type InputStyles } from "../types";
 
 export function useInputVariantDefault(): InputStyles {
   return useThemedStyles(
@@ -14,11 +15,17 @@ export function useInputVariantDefault(): InputStyles {
           backgroundColor: colors.surface,
           paddingVertical: 12,
           paddingHorizontal: 16,
-          outlineWidth: 0,
           fontFamily,
           fontSize,
           height: 48,
           color: colors.foreground,
+          outlineWidth: 0,
+          ...Platform.select({
+            default: {},
+            web: {
+              outline: "none",
+            },
+          }),
         },
       },
       focused: {

package/src/components/input/variants/secondary.tsx

@@ -1,5 +1,6 @@
-import { type InputStyles } from "@/components";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { Platform } from "react-native";
+import { type InputStyles } from "../..";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export function useInputVariantSecondary(): InputStyles {
   return useThemedStyles(
@@ -14,11 +15,17 @@ export function useInputVariantSecondary(): InputStyles {
           backgroundColor: colors.background,
           paddingVertical: 12,
           paddingHorizontal: 16,
-          outlineWidth: 0,
           fontFamily,
           fontSize,
           height: 48,
           color: colors.foreground,
+          outlineWidth: 0,
+          ...Platform.select({
+            default: {},
+            web: {
+              outline: "none",
+            },
+          }),
         },
       },
       focused: {

package/src/components/link/variants/default.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 useLinkVariantDefault(): TextStyle {
   return useThemedStyles(
@@ -9,6 +9,6 @@ export function useLinkVariantDefault(): TextStyle {
       fontFamily,
       textDecorationLine: "underline",
       letterSpacing,
-    })
+    }),
   );
 }

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

@@ -1,4 +1,4 @@
-import { useRelativePosition } from "@/hooks/use-relative-position";
+import { useRelativePosition } from "../../../hooks/use-relative-position";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { useMenu } from "../context";

package/src/components/menu/components/menu-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 { MenuContext } from "../context";

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

@@ -1,7 +1,7 @@
-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 type { ViewRef } from "../../../types/element.types";
+import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import { useMenu } from "../context";
 
 export interface MenuTriggerProps extends PressableProps {
@@ -13,45 +13,47 @@ export interface MenuTriggerRef {
   close: () => void;
 }
 
-export const MenuTrigger = forwardRef<MenuTriggerRef, MenuTriggerProps>((props, ref) => {
-  const menu = useMenu();
-  const triggerRef = useRef<ViewRef>(null);
+export const MenuTrigger = forwardRef<MenuTriggerRef, MenuTriggerProps>(
+  (props, ref) => {
+    const menu = useMenu();
+    const triggerRef = useRef<ViewRef>(null);
 
-  const onTriggerPress = async () => {
-    if (!menu.isOpen) {
-      measureLayoutPosition(triggerRef.current, (layout) => {
-        menu.setTriggerPosition(layout);
-        menu.setIsOpen(true);
-      });
-    } else {
-      menu.setIsOpen(false);
-    }
-  };
+    const onTriggerPress = async () => {
+      if (!menu.isOpen) {
+        measureLayoutPosition(triggerRef.current, (layout) => {
+          menu.setTriggerPosition(layout);
+          menu.setIsOpen(true);
+        });
+      } else {
+        menu.setIsOpen(false);
+      }
+    };
 
-  useImperativeHandle(ref, () => ({
-    open: () => {
-      triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
-        menu.setTriggerPosition({
-          height,
-          width,
-          pageX,
-          pageY,
+    useImperativeHandle(ref, () => ({
+      open: () => {
+        triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
+          menu.setTriggerPosition({
+            height,
+            width,
+            pageX,
+            pageY,
+          });
+          menu.setIsOpen(true);
         });
-        menu.setIsOpen(true);
-      });
-    },
-    close: () => menu.setIsOpen(false),
-  }));
+      },
+      close: () => menu.setIsOpen(false),
+    }));
 
-  return React.cloneElement(props.children, {
-    ref: triggerRef,
-    onPress: onTriggerPress,
-    role: "button",
-    accessible: true,
-    accessibilityRole: "button",
-    accessibilityState: { expanded: menu.isOpen },
-    ...props.children.props,
-  });
-});
+    return React.cloneElement(props.children, {
+      ref: triggerRef,
+      onPress: onTriggerPress,
+      role: "button",
+      accessible: true,
+      accessibilityRole: "button",
+      accessibilityState: { expanded: menu.isOpen },
+      ...props.children.props,
+    });
+  },
+);
 
 MenuTrigger.displayName = "MenuTrigger";

package/src/components/menu/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 { MenuStyles } from "./types";

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

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

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

@@ -0,0 +1,2 @@
+export { PhoneInput, type PhoneInputProps } from "./phone-input";
+export type { PhoneInputState, PhoneInputStyles } from "./types";

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

@@ -0,0 +1,220 @@
+import type { CountryData } from "../../data/countries";
+import { usePhoneMask } from "../../hooks/use-phone-mask";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition, useRelativePosition } from "../../hooks/use-relative-position";
+import type { ViewRef } from "../../types/element.types";
+import { measureLayoutPosition } from "../../utils/normalize-layout";
+import React, { useRef, useState } from "react";
+import {
+  Keyboard,
+  type LayoutRectangle,
+  Platform,
+  Pressable,
+  ScrollView,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type ViewStyle,
+} from "react-native";
+import { Portal } from "../portal";
+import type { PhoneInputState } from "./types";
+import { PhoneInputVariants } from "./variants";
+
+export interface PhoneInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  defaultCountry?: string;
+  countries?: CountryData[];
+  placeholder?: string;
+  isDisabled?: boolean;
+  variant?: keyof typeof PhoneInputVariants;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (isDisabled: boolean, isFocused: boolean): PhoneInputState => {
+  if (isDisabled) return "disabled";
+  if (isFocused) return "focused";
+  return "default";
+};
+
+export function PhoneInput({
+  value,
+  onChange,
+  defaultCountry = "US",
+  countries,
+  placeholder,
+  isDisabled = false,
+  variant = "default",
+  style,
+}: PhoneInputProps) {
+  const variantStyles = PhoneInputVariants[variant]();
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
+  const triggerRef = useRef<ViewRef>(null);
+
+  const state = calculateState(isDisabled, isFocused);
+
+  const phoneMask = usePhoneMask({
+    value,
+    defaultCountry,
+    onChange,
+    countries,
+  });
+
+  const rootStyles = StyleSheet.flatten([variantStyles.root?.default, variantStyles.root?.[state], style]);
+  const countryButtonStyles = StyleSheet.flatten([variantStyles.countryButton?.default, variantStyles.countryButton?.[state]]);
+  const countryButtonTextStyles = StyleSheet.flatten([variantStyles.countryButtonText?.default, variantStyles.countryButtonText?.[state]]);
+  const separatorStyles = StyleSheet.flatten([variantStyles.separator?.default, variantStyles.separator?.[state]]);
+  const inputStyles = StyleSheet.flatten([variantStyles.input?.default, variantStyles.input?.[state]]);
+
+  const openPicker = () => {
+    if (isDisabled) return;
+    if (Platform.OS !== "web") {
+      Keyboard.dismiss();
+    }
+    measureLayoutPosition(triggerRef.current, (layout) => {
+      setTriggerPosition(layout);
+      setSearchQuery("");
+      setIsPickerOpen(true);
+    });
+  };
+
+  const closePicker = () => {
+    setIsPickerOpen(false);
+    setSearchQuery("");
+  };
+
+  const selectCountry = (country: CountryData) => {
+    phoneMask.setCountry(country.code);
+    closePicker();
+  };
+
+  const filteredCountries = searchQuery
+    ? phoneMask.countries.filter((c) => c.name.toLowerCase().includes(searchQuery.toLowerCase()))
+    : phoneMask.countries;
+
+  return (
+    <>
+      <View ref={triggerRef} style={rootStyles}>
+        <Pressable onPress={openPicker} disabled={isDisabled} style={countryButtonStyles}>
+          <Text style={countryButtonTextStyles}>
+            {phoneMask.country.flag} +{phoneMask.country.dialCode}
+          </Text>
+        </Pressable>
+        <View style={separatorStyles} />
+        <TextInput
+          value={phoneMask.displayValue}
+          onChangeText={phoneMask.onChangeText}
+          keyboardType={phoneMask.keyboardType}
+          placeholder={placeholder}
+          placeholderTextColor={StyleSheet.flatten(variantStyles.countryButtonText?.disabled)?.color}
+          readOnly={isDisabled}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          style={inputStyles}
+        />
+      </View>
+
+      {isPickerOpen && (
+        <CountryPicker
+          countries={filteredCountries}
+          selectedCode={phoneMask.country.code}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          onSelect={selectCountry}
+          onClose={closePicker}
+          triggerPosition={triggerPosition}
+          contentLayout={contentLayout}
+          onContentLayout={setContentLayout}
+          variantStyles={variantStyles}
+          state={state}
+        />
+      )}
+    </>
+  );
+}
+
+interface CountryPickerProps {
+  countries: CountryData[];
+  selectedCode: string;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onSelect: (country: CountryData) => void;
+  onClose: () => void;
+  triggerPosition: LayoutPosition;
+  contentLayout: LayoutRectangle;
+  onContentLayout: (layout: LayoutRectangle) => void;
+  variantStyles: ReturnType<(typeof PhoneInputVariants)["default"]>;
+  state: PhoneInputState;
+}
+
+function CountryPicker({
+  countries,
+  selectedCode,
+  searchQuery,
+  onSearchChange,
+  onSelect,
+  onClose,
+  triggerPosition,
+  contentLayout,
+  onContentLayout,
+  variantStyles,
+  state,
+}: CountryPickerProps) {
+  const positionStyle = useRelativePosition({
+    align: "start",
+    triggerPosition,
+    contentLayout,
+    alignOffset: 0,
+    preferredSide: "bottom",
+    sideOffset: 4,
+  });
+
+  const overlayStyles = StyleSheet.flatten([variantStyles.pickerOverlay?.default, variantStyles.pickerOverlay?.[state]]);
+  const contentStyles = StyleSheet.flatten([variantStyles.pickerContent?.default, variantStyles.pickerContent?.[state]]);
+  const searchStyles = StyleSheet.flatten([variantStyles.pickerSearch?.default, variantStyles.pickerSearch?.[state]]);
+
+  return (
+    <Portal name="phone-input-country-picker">
+      <Pressable onPress={onClose} style={[StyleSheet.absoluteFill, overlayStyles]} />
+      <View
+        style={[positionStyle, contentStyles, { width: triggerPosition.width }]}
+        onLayout={(e) => onContentLayout(e.nativeEvent.layout)}
+        pointerEvents="box-none"
+      >
+        <TextInput
+          value={searchQuery}
+          onChangeText={onSearchChange}
+          placeholder="Search countries..."
+          autoFocus
+          style={searchStyles}
+        />
+        <ScrollView keyboardShouldPersistTaps="handled">
+          {countries.map((country) => {
+            const isSelected = country.code === selectedCode;
+            const optionStyles = StyleSheet.flatten([
+              variantStyles.pickerOption?.default,
+              isSelected && variantStyles.pickerOption?.selected,
+            ]);
+            const optionTextStyles = StyleSheet.flatten([
+              variantStyles.pickerOptionText?.default,
+              isSelected && variantStyles.pickerOptionText?.selected,
+            ]);
+
+            return (
+              <Pressable key={country.code} onPress={() => onSelect(country)} style={optionStyles}>
+                <Text style={optionTextStyles}>
+                  {country.flag} {country.name} +{country.dialCode}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      </View>
+    </Portal>
+  );
+}

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

@@ -0,0 +1,20 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+export type PhoneInputState = "default" | "focused" | "disabled";
+
+export interface PhoneInputStyles {
+  root?: Partial<Record<PhoneInputState, StyleProp<ViewStyle>>>;
+  countryButton?: Partial<Record<PhoneInputState, StyleProp<ViewStyle>>>;
+  countryButtonText?: Partial<Record<PhoneInputState, StyleProp<TextStyle>>>;
+  separator?: Partial<Record<PhoneInputState, StyleProp<ViewStyle>>>;
+  input?: Partial<Record<PhoneInputState, StyleProp<TextStyle>>>;
+  pickerOverlay?: Partial<Record<PhoneInputState, StyleProp<ViewStyle>>>;
+  pickerContent?: Partial<Record<PhoneInputState, StyleProp<ViewStyle>>>;
+  pickerOption?: Partial<
+    Record<PhoneInputState | "selected", StyleProp<ViewStyle>>
+  >;
+  pickerOptionText?: Partial<
+    Record<PhoneInputState | "selected", StyleProp<TextStyle>>
+  >;
+  pickerSearch?: Partial<Record<PhoneInputState, StyleProp<TextStyle>>>;
+}