npm - @korsolutions/ui - Versions diffs - 0.0.53 → 0.0.55 - Mend

@@ -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;
+};

@@ -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,
+};

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

@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { View } from "react-native";
 import { Portal } from "../../portal";
 import { SelectContext, useSelect } from "../context";
@@ -16,12 +17,23 @@ export function SelectPortal(props: SelectPortalProps) {
   }, []);
   if (!select.isOpen) {
-    return null;
+    return (
+      <View
+        style={{ display: "none" }}
+        aria-hidden
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+      >
+        {props.children}
+      </View>
+    );
   }
   return (
     <Portal name="select-portal">
-      <SelectContext.Provider value={select}>{props.children}</SelectContext.Provider>
+      <SelectContext.Provider value={select}>
+        {props.children}
+      </SelectContext.Provider>
     </Portal>
   );
 }

@@ -62,18 +62,17 @@ export function SelectValue(props: SelectValueProps) {
     (option) => option.value === select.value,
   );
   const selectedOptionLabel = selectedOption?.label;
+  const displayValue = selectedOptionLabel ?? select.value;
   const composedStyles = calculateComposedStyles(
     select.styles,
     select.state,
-    selectedOptionLabel ? "value" : "placeholder",
+    displayValue ? "value" : "placeholder",
   );
-  if (typeof selectedOptionLabel !== "string") {
-    return <>{selectedOptionLabel}</>;
+  if (!!displayValue && typeof displayValue !== "string") {
+    return <>{displayValue}</>;
   }
   return (
-    <Text style={composedStyles}>
-      {selectedOptionLabel ?? props.placeholder}
-    </Text>
+    <Text style={composedStyles}>{displayValue ?? props.placeholder}</Text>
   );
 }

@@ -0,0 +1,19 @@
+import type { PropsWithRender } from "../../../types/props.types";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useToast } from "../context";
+export interface ToastBodyProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+export function ToastBody(props: PropsWithRender<ToastBodyProps>) {
+  const toast = useToast();
+  const composedStyle = [toast.styles?.body, props.style];
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

@@ -1,8 +1,11 @@
 import React, { useSyncExternalStore } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "../../safe-area";
+import { useComponentsConfig } from "../../themes";
 import { Portal } from "../portal";
+import { ToastBody } from "./components/toast-body";
 import { ToastDescription } from "./components/toast-description";
+import { ToastIcon } from "./components/toast-icon";
 import { ToastRoot } from "./components/toast-root";
 import { ToastTitle } from "./components/toast-title";
 import { ToastVariants } from "./variants";
@@ -107,12 +110,19 @@ interface ToastProps {
 }
 export function ToastComponent(props: ToastProps) {
+  const config = useComponentsConfig();
+  const variant = props.variant ?? "default";
+  const IconComponent = config?.toast?.icons?.[variant];
   return (
-    <ToastRoot variant={props.variant}>
-      <ToastTitle>{props.title}</ToastTitle>
-      {!!props.description && (
-        <ToastDescription>{props.description}</ToastDescription>
-      )}
+    <ToastRoot variant={variant}>
+      {!!IconComponent && <ToastIcon render={IconComponent} />}
+      <ToastBody>
+        <ToastTitle>{props.title}</ToastTitle>
+        {!!props.description && (
+          <ToastDescription>{props.description}</ToastDescription>
+        )}
+      </ToastBody>
     </ToastRoot>
   );
 }

@@ -1,3 +1,4 @@
+import type { ToastBodyProps } from "./components/toast-body";
 import type { ToastDescriptionProps } from "./components/toast-description";
 import type { ToastIconProps } from "./components/toast-icon";
 import type { ToastRootProps } from "./components/toast-root";
@@ -5,6 +6,7 @@ import type { ToastTitleProps } from "./components/toast-title";
 export interface ToastStyles {
   root?: ToastRootProps["style"];
+  body?: ToastBodyProps["style"];
   icon?: ToastIconProps;
   title?: ToastTitleProps["style"];
   description?: ToastDescriptionProps["style"];

@@ -10,14 +10,18 @@ export const useToastVariantDanger = (): ToastStyles => {
         borderColor: colors.danger,
         borderRadius: radius,
         padding: 16,
-        gap: 4,
+        gap: 12,
         minWidth: 300,
         maxWidth: 400,
         flexDirection: "row",
       },
+      body: {
+        flex: 1,
+        gap: 4,
+      },
       icon: {
         color: colors.foreground,
-        size: 20,
+        size: 16,
         style: {
           marginTop: 2,
         },

@korsolutions/ui 0.0.53 → 0.0.55