@korsolutions/ui 0.0.52 → 0.0.54

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

@@ -1,6 +1,6 @@
-import { type ButtonStyles } from "@/components";
-import { hslaSetRelativeLightness } from "@/utils/hsla-utils";
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type ButtonStyles } from "../..";
+import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 
 export const useButtonVariantSecondary = (): ButtonStyles => {
   return useThemedStyles(

package/src/components/calendar/components/calendar-day.tsx

@@ -1,4 +1,4 @@
-import { formatDate, isDateAfter, isDateBefore, isDateSameDay, isDateToday, isSameMonth } from "@/utils/date-utils";
+import { formatDate, isDateAfter, isDateBefore, isDateSameDay, isDateToday, isSameMonth } from "../../../utils/date-utils";
 import React, { useMemo, useState } from "react";
 import { Pressable, Text, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { useCalendarContext } from "../context";

package/src/components/calendar/components/calendar-nav-button.tsx

@@ -1,4 +1,4 @@
-import { addMonths, subMonths } from "@/utils/date-utils";
+import { addMonths, subMonths } from "../../../utils/date-utils";
 import React, { useState } from "react";
 import { Pressable, Text, type PressableProps, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { useCalendarContext } from "../context";

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

@@ -1,4 +1,4 @@
-import { formatDate } from "@/utils/date-utils";
+import { formatDate } from "../../../utils/date-utils";
 import React from "react";
 import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
 import { useCalendarContext } from "../context";

package/src/components/calendar/components/calendar-weeks.tsx

@@ -1,4 +1,4 @@
-import { getWeekDays, getWeeksInMonth } from "@/utils/date-utils";
+import { getWeekDays, getWeeksInMonth } from "../../../utils/date-utils";
 import React from "react";
 import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
 import { useCalendarContext } from "../context";

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