@korsolutions/ui 0.0.52 → 0.0.54

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

@@ -0,0 +1,11 @@
+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/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>>>;
+}

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

@@ -0,0 +1,124 @@
+import { Platform } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { PhoneInputStyles } from "../types";
+
+export function usePhoneInputVariantDefault(): PhoneInputStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): PhoneInputStyles => ({
+      root: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          backgroundColor: colors.surface,
+          height: 48,
+          overflow: "hidden",
+          outlineWidth: 0,
+        },
+        focused: {
+          borderColor: colors.primary,
+        },
+        disabled: {
+          backgroundColor: colors.muted,
+        },
+      },
+      countryButton: {
+        default: {
+          paddingHorizontal: 12,
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 4,
+        },
+      },
+      countryButtonText: {
+        default: {
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      separator: {
+        default: {
+          width: 1,
+          alignSelf: "center",
+          height: "60%",
+          backgroundColor: colors.border,
+        },
+      },
+      input: {
+        default: {
+          flex: 1,
+          paddingHorizontal: 16,
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+          height: "100%",
+          outlineWidth: 0,
+          ...Platform.select({
+            default: {},
+            web: {
+              outline: "none",
+            },
+          }),
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      pickerOverlay: {
+        default: {},
+      },
+      pickerContent: {
+        default: {
+          backgroundColor: colors.surface,
+          borderRadius: radius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          padding: 4,
+          maxHeight: 300,
+        },
+      },
+      pickerOption: {
+        default: {
+          paddingVertical: 10,
+          paddingHorizontal: 12,
+          borderRadius: radius / 2,
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8,
+        },
+        selected: {
+          backgroundColor: colors.muted,
+        },
+      },
+      pickerOptionText: {
+        default: {
+          fontFamily,
+          fontSize,
+          color: colors.foreground,
+        },
+      },
+      pickerSearch: {
+        default: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          paddingVertical: 8,
+          paddingHorizontal: 12,
+          fontFamily,
+          fontSize: fontSize * 0.875,
+          color: colors.foreground,
+          marginBottom: 4,
+          outlineWidth: 0,
+        },
+      },
+    }),
+  );
+}

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

@@ -0,0 +1,5 @@
+import { usePhoneInputVariantDefault } from "./default";
+
+export const PhoneInputVariants = {
+  default: usePhoneInputVariantDefault,
+};

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

@@ -1,5 +1,5 @@
-import { useRelativePosition } from "@/hooks/use-relative-position";
-import { useSafeAreaInsets } from "@/safe-area";
+import { useRelativePosition } from "../../../hooks/use-relative-position";
+import { useSafeAreaInsets } from "../../../safe-area";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { usePopover } from "../context";

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

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

@@ -1,5 +1,5 @@
-import type { ViewRef } from "@/types/element.types";
-import { measureLayoutPosition } from "@/utils/normalize-layout";
+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 { usePopover } from "../context";

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

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

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

package/src/components/popover/variants/unstyled.tsx

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

package/src/components/progress/components/progress-indicator.tsx

@@ -1,4 +1,4 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { useProgress } from "../context";

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

@@ -1,4 +1,4 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { ProgressContext } from "../context";

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

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

package/src/components/scroll-bar/scroll-bar.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@/themes";
+import { useTheme } from "../../themes";
 import React, { useEffect } from "react";
 import { Platform } from "react-native";
 

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

@@ -1,5 +1,5 @@
-import { useRelativePosition } from "@/hooks/use-relative-position";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { useRelativePosition } from "../../../hooks/use-relative-position";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { useSelect } from "../context";

package/src/components/select/components/select-option.tsx

@@ -1,4 +1,4 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React, { useEffect, useState } from "react";
 import { Pressable, Text } from "react-native";
 import { useSelect } from "../context";

package/src/components/select/components/select-overlay.tsx

@@ -1,4 +1,4 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
 import { useSelect } from "../context";

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

@@ -1,5 +1,5 @@
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React, { useState } from "react";
 import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
 import { SelectContext } from "../context";

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

@@ -1,8 +1,14 @@
-import type { ViewRef } from "@/types/element.types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import { measureLayoutPosition } from "@/utils/normalize-layout";
 import React, { useRef } from "react";
-import { Pressable, Text, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import {
+  Pressable,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import type { ViewRef } from "../../../types/element.types";
+import { calculateComposedStyles } from "../../../utils/calculate-styles";
+import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import { useSelect } from "../context";
 
 export interface SelectTriggerProps {
@@ -14,7 +20,12 @@ export function SelectTrigger(props: SelectTriggerProps) {
   const select = useSelect();
   const triggerRef = useRef<ViewRef>(null);
 
-  const composedStyles = calculateComposedStyles(select.styles, select.state, "trigger", props.style);
+  const composedStyles = calculateComposedStyles(
+    select.styles,
+    select.state,
+    "trigger",
+    props.style,
+  );
 
   const onTriggerPress = () => {
     if (!select.isOpen) {
@@ -28,7 +39,12 @@ export function SelectTrigger(props: SelectTriggerProps) {
   };
 
   return (
-    <Pressable ref={triggerRef} onPress={onTriggerPress} disabled={select.isDisabled} style={composedStyles}>
+    <Pressable
+      ref={triggerRef}
+      onPress={onTriggerPress}
+      disabled={select.isDisabled}
+      style={composedStyles}
+    >
       <SelectValue placeholder={props.placeholder} />
     </Pressable>
   );
@@ -42,12 +58,22 @@ export interface SelectValueProps {
 export function SelectValue(props: SelectValueProps) {
   const select = useSelect();
 
-  const selectedOption = select.options.find((option) => option.value === select.value);
+  const selectedOption = select.options.find(
+    (option) => option.value === select.value,
+  );
   const selectedOptionLabel = selectedOption?.label;
 
-  const composedStyles = calculateComposedStyles(select.styles, select.state, selectedOptionLabel ? "value" : "placeholder");
+  const composedStyles = calculateComposedStyles(
+    select.styles,
+    select.state,
+    selectedOptionLabel ? "value" : "placeholder",
+  );
   if (typeof selectedOptionLabel !== "string") {
     return <>{selectedOptionLabel}</>;
   }
-  return <Text style={composedStyles}>{selectedOptionLabel ?? props.placeholder}</Text>;
+  return (
+    <Text style={composedStyles}>
+      {selectedOptionLabel ?? props.placeholder}
+    </Text>
+  );
 }

package/src/components/select/context.ts

@@ -1,4 +1,4 @@
-import type { LayoutPosition } from "@/hooks";
+import type { LayoutPosition } from "../../hooks";
 import { createContext, type Dispatch, useContext } from "react";
 import type { LayoutRectangle } from "react-native";
 import type { SelectOption, SelectState, SelectStyles } from "./types";

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

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

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

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

package/src/components/tabs/variants/line.tsx

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

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

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

package/src/components/toast/components/toast-icon.tsx

@@ -1,10 +1,16 @@
-import type { PropsWithRequiredRender, SvgProps } from "@/types/props.types";
 import React from "react";
+import type {
+  PropsWithRequiredRender,
+  SvgProps,
+} from "../../../types/props.types";
 import { useToast } from "../context";
 
 export type ToastIconProps = SvgProps;
 
-export function ToastIcon({ render: Component, ...props }: PropsWithRequiredRender<ToastIconProps>) {
+export function ToastIcon({
+  render: Component,
+  ...props
+}: PropsWithRequiredRender<ToastIconProps>) {
   const toast = useToast();
 
   const composedProps = {

package/src/components/toast/manager.tsx

@@ -1,7 +1,7 @@
-import { Portal } from "@/components/portal";
-import { useSafeAreaInsets } from "@/safe-area";
 import React, { useSyncExternalStore } from "react";
 import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "../../safe-area";
+import { Portal } from "../portal";
 import { ToastDescription } from "./components/toast-description";
 import { ToastRoot } from "./components/toast-root";
 import { ToastTitle } from "./components/toast-title";
@@ -87,7 +87,12 @@ export function ToastContainer() {
     <Portal name={TOAST_PORTAL_NAME}>
       <View style={[s.wrapper, { top: insets.top + 24 }]}>
         {toasts.map((toast) => (
-          <ToastComponent key={toast.id} title={toast.title} description={toast.description} variant={toast.variant} />
+          <ToastComponent
+            key={toast.id}
+            title={toast.title}
+            description={toast.description}
+            variant={toast.variant}
+          />
         ))}
       </View>
     </Portal>
@@ -105,7 +110,9 @@ export function ToastComponent(props: ToastProps) {
   return (
     <ToastRoot variant={props.variant}>
       <ToastTitle>{props.title}</ToastTitle>
-      {!!props.description && <ToastDescription>{props.description}</ToastDescription>}
+      {!!props.description && (
+        <ToastDescription>{props.description}</ToastDescription>
+      )}
     </ToastRoot>
   );
 }

package/src/components/toast/variants/danger.tsx

@@ -1,4 +1,4 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type ToastStyles } from "../types";
 
 export const useToastVariantDanger = (): ToastStyles => {

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

@@ -1,4 +1,4 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type ToastStyles } from "../types";
 
 export const useToastVariantDefault = (): ToastStyles => {

package/src/components/toast/variants/success.tsx

@@ -1,4 +1,4 @@
-import { useThemedStyles } from "@/utils/use-themed-styles";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type ToastStyles } from "../types";
 
 export const useToastVariantSuccess = (): ToastStyles => {

package/src/components/typography/variants/body-lg.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 useTextVariantBodyLg(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/body-md.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 useTextVariantBodyMd(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/body-sm.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 useTextVariantBodySm(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/heading-lg.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 useTextVariantHeadingLg(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/heading-md.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 useTextVariantHeadingMd(): TextStyle {
   return useThemedStyles(

package/src/components/typography/variants/heading-sm.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 useTextVariantHeadingSm(): TextStyle {
   return useThemedStyles(