@korsolutions/ui 0.0.53 → 0.0.55

package/src/hooks/use-phone-mask.ts

@@ -13,7 +13,7 @@ export interface UsePhoneMaskOptions {
   countries?: CountryData[];
 }
 
-export interface UsePhoneMaskReturn {
+export interface PhoneMask {
   displayValue: string;
   e164Value: string;
   country: CountryData;
@@ -78,7 +78,7 @@ export function usePhoneMask({
   onChange,
   onCountryChange,
   countries: customCountries,
-}: UsePhoneMaskOptions = {}): UsePhoneMaskReturn {
+}: UsePhoneMaskOptions = {}): PhoneMask {
   const availableCountries = customCountries ?? COUNTRIES;
   const isInternalChange = useRef(false);
 

package/src/index.tsx

@@ -3,13 +3,18 @@ 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";
+import {
+  ThemeProvider,
+  type ComponentsConfig,
+  type ThemeProviderProps,
+} from "./themes";
 
 export interface ProviderProps {
   children: React.ReactNode;
   portalContainer?: PortalHostProps["container"];
   theme?: ThemeProviderProps["theme"];
   safeAreaInsets?: SafeAreaInsets;
+  components?: ComponentsConfig;
 }
 
 export const UIProvider = ({
@@ -17,10 +22,11 @@ export const UIProvider = ({
   portalContainer,
   theme,
   safeAreaInsets,
+  components,
 }: ProviderProps) => {
   return (
     <SafeAreaProvider insets={safeAreaInsets}>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={theme} components={components}>
         <ToastContainer />
         {children}
         <PortalHost container={portalContainer} />
@@ -34,7 +40,7 @@ export * from "./hooks/use-screen-size";
 
 export * from "./themes/adapters";
 export * from "./themes/default";
-export { useTheme } from "./themes/provider";
+export { useTheme, type ComponentsConfig } from "./themes/provider";
 export * from "./themes/types";
 
 export * from "./components";

package/src/themes/provider.tsx

@@ -6,6 +6,8 @@ import {
   useState,
 } from "react";
 import { useColorScheme } from "react-native";
+import type { ToastVariants } from "../components/toast/variants";
+import type { SvgProps } from "../types/props.types";
 import type { DeepPartial } from "../types/util.types";
 import { defaultThemeAssets } from "./default";
 import type {
@@ -27,16 +29,26 @@ interface ThemeContext {
   letterSpacing: LetterSpacing;
   fontSize: FontSize;
   setColorScheme: (scheme: ColorScheme) => void;
+  components?: ComponentsConfig;
+}
+
+export interface ComponentsConfig {
+  toast?: {
+    icons?: Partial<
+      Record<keyof typeof ToastVariants, (props: SvgProps) => React.ReactNode>
+    >;
+  };
 }
 
 const ThemeContext = createContext<ThemeContext | null>(null);
 
 export interface ThemeProviderProps extends PropsWithChildren {
   theme?: DeepPartial<ThemeAssets>;
+  components?: ComponentsConfig;
 }
 
 export const ThemeProvider = (props: ThemeProviderProps) => {
-  const { children, theme } = props;
+  const { children, theme, components } = props;
 
   const systemColorScheme = useColorScheme();
   const [colorScheme, setColorScheme] = useState<ColorScheme>(
@@ -65,6 +77,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
         fontFamily: themeAssets.fontFamily,
         letterSpacing: themeAssets.letterSpacing,
         fontSize: themeAssets.fontSize,
+        components,
       }}
     >
       {children}
@@ -79,3 +92,11 @@ export const useTheme = () => {
   }
   return context;
 };
+
+export const useComponentsConfig = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useComponentsConfig must be used within a ThemeProvider");
+  }
+  return context.components;
+};

package/dist/module/components/phone-input/phone-input.js

@@ -1,165 +0,0 @@
-"use strict";
-
-import { usePhoneMask } from "../../hooks/use-phone-mask.js";
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, useRelativePosition } from "../../hooks/use-relative-position.js";
-import { measureLayoutPosition } from "../../utils/normalize-layout.js";
-import React, { useRef, useState } from "react";
-import { Keyboard, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
-import { Portal } from "../portal/index.js";
-import { PhoneInputVariants } from "./variants/index.js";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const calculateState = (isDisabled, isFocused) => {
-  if (isDisabled) return "disabled";
-  if (isFocused) return "focused";
-  return "default";
-};
-export function PhoneInput({
-  value,
-  onChange,
-  defaultCountry = "US",
-  countries,
-  placeholder,
-  isDisabled = false,
-  variant = "default",
-  style
-}) {
-  const variantStyles = PhoneInputVariants[variant]();
-  const [isFocused, setIsFocused] = useState(false);
-  const [isPickerOpen, setIsPickerOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [triggerPosition, setTriggerPosition] = useState(DEFAULT_POSITION);
-  const [contentLayout, setContentLayout] = useState(DEFAULT_LAYOUT);
-  const triggerRef = useRef(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 => {
-    phoneMask.setCountry(country.code);
-    closePicker();
-  };
-  const filteredCountries = searchQuery ? phoneMask.countries.filter(c => c.name.toLowerCase().includes(searchQuery.toLowerCase())) : phoneMask.countries;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      ref: triggerRef,
-      style: rootStyles,
-      children: [/*#__PURE__*/_jsx(Pressable, {
-        onPress: openPicker,
-        disabled: isDisabled,
-        style: countryButtonStyles,
-        children: /*#__PURE__*/_jsxs(Text, {
-          style: countryButtonTextStyles,
-          children: [phoneMask.country.flag, " +", phoneMask.country.dialCode]
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: separatorStyles
-      }), /*#__PURE__*/_jsx(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
-      })]
-    }), isPickerOpen && /*#__PURE__*/_jsx(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
-    })]
-  });
-}
-function CountryPicker({
-  countries,
-  selectedCode,
-  searchQuery,
-  onSearchChange,
-  onSelect,
-  onClose,
-  triggerPosition,
-  contentLayout,
-  onContentLayout,
-  variantStyles,
-  state
-}) {
-  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 /*#__PURE__*/_jsxs(Portal, {
-    name: "phone-input-country-picker",
-    children: [/*#__PURE__*/_jsx(Pressable, {
-      onPress: onClose,
-      style: [StyleSheet.absoluteFill, overlayStyles]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: [positionStyle, contentStyles, {
-        width: triggerPosition.width
-      }],
-      onLayout: e => onContentLayout(e.nativeEvent.layout),
-      pointerEvents: "box-none",
-      children: [/*#__PURE__*/_jsx(TextInput, {
-        value: searchQuery,
-        onChangeText: onSearchChange,
-        placeholder: "Search countries...",
-        autoFocus: true,
-        style: searchStyles
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        keyboardShouldPersistTaps: "handled",
-        children: 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 /*#__PURE__*/_jsx(Pressable, {
-            onPress: () => onSelect(country),
-            style: optionStyles,
-            children: /*#__PURE__*/_jsxs(Text, {
-              style: optionTextStyles,
-              children: [country.flag, " ", country.name, " +", country.dialCode]
-            })
-          }, country.code);
-        })
-      })]
-    })]
-  });
-}
-//# sourceMappingURL=phone-input.js.map

package/dist/module/components/phone-input/phone-input.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["usePhoneMask","DEFAULT_LAYOUT","DEFAULT_POSITION","useRelativePosition","measureLayoutPosition","React","useRef","useState","Keyboard","Platform","Pressable","ScrollView","StyleSheet","Text","TextInput","View","Portal","PhoneInputVariants","jsxs","_jsxs","jsx","_jsx","Fragment","_Fragment","calculateState","isDisabled","isFocused","PhoneInput","value","onChange","defaultCountry","countries","placeholder","variant","style","variantStyles","setIsFocused","isPickerOpen","setIsPickerOpen","searchQuery","setSearchQuery","triggerPosition","setTriggerPosition","contentLayout","setContentLayout","triggerRef","state","phoneMask","rootStyles","flatten","root","default","countryButtonStyles","countryButton","countryButtonTextStyles","countryButtonText","separatorStyles","separator","inputStyles","input","openPicker","OS","dismiss","current","layout","closePicker","selectCountry","country","setCountry","code","filteredCountries","filter","c","name","toLowerCase","includes","children","ref","onPress","disabled","flag","dialCode","displayValue","onChangeText","keyboardType","placeholderTextColor","color","readOnly","onFocus","onBlur","CountryPicker","selectedCode","onSearchChange","onSelect","onClose","onContentLayout","positionStyle","align","alignOffset","preferredSide","sideOffset","overlayStyles","pickerOverlay","contentStyles","pickerContent","searchStyles","pickerSearch","absoluteFill","width","onLayout","e","nativeEvent","pointerEvents","autoFocus","keyboardShouldPersistTaps","map","isSelected","optionStyles","pickerOption","selected","optionTextStyles","pickerOptionText"],"sourceRoot":"../../../../src","sources":["components/phone-input/phone-input.tsx"],"mappings":"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","ignoreList":[]}

package/dist/typescript/src/components/phone-input/phone-input.d.ts

@@ -1,16 +0,0 @@
-import type { CountryData } from "../../data/countries";
-import React from "react";
-import { type StyleProp, type ViewStyle } from "react-native";
-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>;
-}
-export declare function PhoneInput({ value, onChange, defaultCountry, countries, placeholder, isDisabled, variant, style, }: PhoneInputProps): React.JSX.Element;
-//# sourceMappingURL=phone-input.d.ts.map

package/dist/typescript/src/components/phone-input/phone-input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/phone-input/phone-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAML,KAAK,SAAS,EAKd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,WAAW,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,OAAO,kBAAkB,CAAC;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAQD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,cAAqB,EACrB,SAAS,EACT,WAAW,EACX,UAAkB,EAClB,OAAmB,EACnB,KAAK,GACN,EAAE,eAAe,qBAyFjB"}

package/scripts/build.sh

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

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

@@ -1,220 +0,0 @@
-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>
-  );
-}