@korsolutions/ui 0.0.36 → 0.0.38

package/src/index.tsx

@@ -1,4 +1,5 @@
 import { ThemeProvider } from "@/themes";
+import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-dialog";
 import { ToastContainer } from "./components/toast/toast-manager";
 import { PortalHost } from "./primitives/portal";
 import { type PortalHostProps } from "./primitives/portal/portal.constants";
@@ -15,6 +16,7 @@ export const UniversalUIProvider = ({ children, portalContainer }: ProviderProps
       <ToastContainer />
       {children}
       <PortalHost container={portalContainer} />
+      <AsyncAlertDialogManager />
     </ThemeProvider>
   );
 };

package/src/primitives/alert-dialog/alert-dialog-action.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Pressable, Text, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveActionProps extends PressableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogAction(props: AlertDialogPrimitiveActionProps) {
+  const { children, style, onPress, ...pressableProps } = props;
+  const { styles, setIsOpen } = useAlertDialog();
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    onPress?.(event);
+    setIsOpen(false);
+  };
+
+  const calculatedStyle = [styles?.action, style];
+  const textStyle = styles?.actionText;
+
+  return (
+    <Pressable {...pressableProps} style={calculatedStyle} onPress={handlePress}>
+      <Text style={textStyle}>{children}</Text>
+    </Pressable>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-cancel.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Pressable, Text, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveCancelProps extends PressableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogCancel(props: AlertDialogPrimitiveCancelProps) {
+  const { children, style, onPress, ...pressableProps } = props;
+  const { styles, setIsOpen } = useAlertDialog();
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    onPress?.(event);
+    setIsOpen(false);
+  };
+
+  const calculatedStyle = [styles?.cancel, style];
+  const textStyle = styles?.cancelText;
+
+  return (
+    <Pressable {...pressableProps} style={calculatedStyle} onPress={handlePress}>
+      <Text style={textStyle}>{children}</Text>
+    </Pressable>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-content.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveContentProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogContent(props: AlertDialogPrimitiveContentProps) {
+  const { children, style, ...viewProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.content, style];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {children}
+    </View>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-description.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveDescriptionProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function AlertDialogDescription(props: AlertDialogPrimitiveDescriptionProps) {
+  const { children, style, ...textProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.description, style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-footer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveFooterProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogFooter(props: AlertDialogPrimitiveFooterProps) {
+  const { children, style, ...viewProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.footer, style];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {children}
+    </View>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-overlay.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveOverlayProps extends PressableProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogOverlay(props: AlertDialogPrimitiveOverlayProps) {
+  const { style, ...pressableProps } = props;
+  const { styles, setIsOpen } = useAlertDialog();
+
+  const calculatedStyle = [styles?.overlay, style];
+
+  return (
+    <Pressable
+      {...pressableProps}
+      style={calculatedStyle}
+      onPress={() => setIsOpen(false)}
+      accessible={true}
+      accessibilityRole="button"
+      accessibilityLabel="Close alert dialog"
+    />
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-portal.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Portal } from "../portal";
+import { AlertDialogPrimitiveContext, useAlertDialog } from "./context";
+
+interface AlertDialogPortalProps {
+  children: React.ReactNode;
+}
+
+export function AlertDialogPortal(props: AlertDialogPortalProps) {
+  const alertDialog = useAlertDialog();
+
+  if (!alertDialog.isOpen) {
+    return null;
+  }
+  return (
+    <Portal name="alert-dialog-content">
+      <AlertDialogPrimitiveContext.Provider value={alertDialog}>{props.children}</AlertDialogPrimitiveContext.Provider>
+    </Portal>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-root.tsx

@@ -0,0 +1,25 @@
+import React, { useMemo, useState } from "react";
+import { AlertDialogPrimitiveContext } from "./context";
+import type { AlertDialogStyles } from "./types";
+
+export interface AlertDialogPrimitiveRootProps {
+  children: React.ReactNode;
+
+  styles?: AlertDialogStyles;
+}
+
+export function AlertDialogRoot(props: AlertDialogPrimitiveRootProps) {
+  const { children, styles } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const contextValue = useMemo(
+    () => ({
+      isOpen,
+      setIsOpen,
+      styles,
+    }),
+    [isOpen, styles]
+  );
+
+  return <AlertDialogPrimitiveContext.Provider value={contextValue}>{children}</AlertDialogPrimitiveContext.Provider>;
+}

package/src/primitives/alert-dialog/alert-dialog-title.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveTitleProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function AlertDialogTitle(props: AlertDialogPrimitiveTitleProps) {
+  const { children, style, ...textProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.title, style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/primitives/alert-dialog/alert-dialog-trigger.tsx

@@ -0,0 +1,27 @@
+import type { ViewRef } from "@/types/element.types";
+import React from "react";
+import { type PressableProps } from "react-native";
+import { useAlertDialog } from "./context";
+
+export interface AlertDialogPrimitiveTriggerProps extends PressableProps {
+  children: React.ReactElement<React.RefAttributes<ViewRef> & PressableProps>;
+}
+
+export function AlertDialogTrigger(props: AlertDialogPrimitiveTriggerProps) {
+  const { onPress } = props;
+  const { isOpen, setIsOpen } = useAlertDialog();
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    onPress?.(event);
+    setIsOpen(true);
+  };
+
+  return React.cloneElement(props.children, {
+    onPress: handlePress,
+    role: "button",
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityState: { expanded: isOpen },
+    ...props.children.props,
+  });
+}

package/src/primitives/alert-dialog/context.ts

@@ -0,0 +1,18 @@
+import React, { createContext, useContext, type Dispatch } from "react";
+import type { AlertDialogStyles } from "./types";
+
+export interface AlertDialogPrimitiveContextValue {
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  styles?: AlertDialogStyles;
+}
+
+export const AlertDialogPrimitiveContext = createContext<AlertDialogPrimitiveContextValue | null>(null);
+
+export const useAlertDialog = () => {
+  const context = useContext(AlertDialogPrimitiveContext);
+  if (!context) {
+    throw new Error("AlertDialog compound components must be used within AlertDialogPrimitive.Root");
+  }
+  return context;
+};

package/src/primitives/alert-dialog/index.ts

@@ -0,0 +1,34 @@
+import { AlertDialogAction } from "./alert-dialog-action";
+import { AlertDialogCancel } from "./alert-dialog-cancel";
+import { AlertDialogContent } from "./alert-dialog-content";
+import { AlertDialogDescription } from "./alert-dialog-description";
+import { AlertDialogFooter } from "./alert-dialog-footer";
+import { AlertDialogOverlay } from "./alert-dialog-overlay";
+import { AlertDialogPortal } from "./alert-dialog-portal";
+import { AlertDialogRoot } from "./alert-dialog-root";
+import { AlertDialogTitle } from "./alert-dialog-title";
+import { AlertDialogTrigger } from "./alert-dialog-trigger";
+
+export const AlertDialogPrimitive = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Portal: AlertDialogPortal,
+  Overlay: AlertDialogOverlay,
+  Content: AlertDialogContent,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Footer: AlertDialogFooter,
+  Action: AlertDialogAction,
+  Cancel: AlertDialogCancel,
+};
+
+export type { AlertDialogPrimitiveActionProps } from "./alert-dialog-action";
+export type { AlertDialogPrimitiveCancelProps } from "./alert-dialog-cancel";
+export type { AlertDialogPrimitiveContentProps } from "./alert-dialog-content";
+export type { AlertDialogPrimitiveDescriptionProps } from "./alert-dialog-description";
+export type { AlertDialogPrimitiveFooterProps } from "./alert-dialog-footer";
+export type { AlertDialogPrimitiveOverlayProps } from "./alert-dialog-overlay";
+export type { AlertDialogPrimitiveRootProps } from "./alert-dialog-root";
+export type { AlertDialogPrimitiveTitleProps } from "./alert-dialog-title";
+export type { AlertDialogPrimitiveTriggerProps } from "./alert-dialog-trigger";
+export * from "./types";

package/src/primitives/alert-dialog/types.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+export interface AlertDialogStyles {
+  overlay?: StyleProp<ViewStyle>;
+  content?: StyleProp<ViewStyle>;
+  title?: StyleProp<TextStyle>;
+  description?: StyleProp<TextStyle>;
+  footer?: StyleProp<ViewStyle>;
+  action?: StyleProp<ViewStyle>;
+  actionText?: StyleProp<TextStyle>;
+  cancel?: StyleProp<ViewStyle>;
+  cancelText?: StyleProp<TextStyle>;
+}

package/src/primitives/checkbox/checkbox-context.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import type { CheckboxStyles, CheckboxState } from "./types";
+import type { CheckboxState, CheckboxStyles } from "./types";
 
 export interface CheckboxPrimitiveContextValue {
-  checked: boolean;
-  disabled?: boolean;
+  value: boolean;
+  isDisabled?: boolean;
   state: CheckboxState;
   styles?: CheckboxStyles;
 }

package/src/primitives/checkbox/checkbox-indicator.tsx

@@ -19,16 +19,16 @@ const calculateState = (rootState: CheckboxState, checked: boolean): CheckboxSta
 
 export function CheckboxIndicator(props: CheckboxPrimitiveIndicatorProps) {
   const { style, ...viewProps } = props;
-  const { checked, state, styles } = useCheckboxContext();
+  const { value, state, styles } = useCheckboxContext();
 
-  const indicatorState = calculateState(state, checked);
+  const indicatorState = calculateState(state, value);
 
   const calculatedStyle = [styles?.indicator?.default, styles?.indicator?.[indicatorState], style];
   const checkmarkStyle = [styles?.checkmark?.default, styles?.checkmark?.[indicatorState]];
 
   return (
     <View {...viewProps} style={calculatedStyle}>
-      {checked && <Text style={checkmarkStyle}>✓</Text>}
+      {value && <Text style={checkmarkStyle}>✓</Text>}
     </View>
   );
 }

package/src/primitives/checkbox/checkbox-root.tsx

@@ -5,35 +5,34 @@ import type { CheckboxState, CheckboxStyles } from "./types";
 
 export interface CheckboxPrimitiveRootProps extends Omit<PressableProps, "children"> {
   children: React.ReactNode;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  disabled?: boolean;
+  value: boolean;
+  onChange: (value: boolean) => void;
+  isDisabled?: boolean;
   style?: StyleProp<ViewStyle>;
   styles?: CheckboxStyles;
 }
 
-const calculateState = (checked: boolean, disabled: boolean | undefined, isHovered: boolean): CheckboxState => {
-  if (disabled) {
+const calculateState = (value: boolean, isDisabled: boolean | undefined, isHovered: boolean): CheckboxState => {
+  if (isDisabled) {
     return "disabled";
   }
   if (isHovered) {
     return "hovered";
   }
-  if (checked) {
+  if (value) {
     return "checked";
   }
   return "default";
 };
 
 export function CheckboxRoot(props: CheckboxPrimitiveRootProps) {
-  const { children, checked, onChange, disabled, style, styles, ...pressableProps } = props;
+  const { children, value, onChange, isDisabled, style, styles, ...pressableProps } = props;
   const [isHovered, setIsHovered] = useState(false);
 
-  const state = calculateState(checked, disabled, isHovered);
-
+  const state = calculateState(value, isDisabled, isHovered);
   const handlePress = () => {
-    if (!disabled) {
-      onChange(!checked);
+    if (!isDisabled) {
+      onChange(!value);
     }
   };
 
@@ -41,19 +40,19 @@ export function CheckboxRoot(props: CheckboxPrimitiveRootProps) {
 
   const contextValue = React.useMemo(
     () => ({
-      checked,
-      disabled,
+      value,
+      isDisabled,
       state,
       styles,
     }),
-    [checked, disabled, state, styles]
+    [value, isDisabled, state, styles]
   );
 
   return (
     <CheckboxPrimitiveContext.Provider value={contextValue}>
       <Pressable
         {...pressableProps}
-        disabled={disabled}
+        disabled={isDisabled}
         onPress={handlePress}
         onHoverIn={() => setIsHovered(true)}
         onHoverOut={() => setIsHovered(false)}

package/src/primitives/index.ts

@@ -14,3 +14,4 @@ export * from "./portal";
 export * from "./calendar";
 export * from "./tabs";
 export * from "./checkbox";
+export * from "./alert-dialog";

package/src/primitives/popover/popover-portal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Portal } from "../portal";
-import { usePopover, PopoverContext } from "./context";
+import { PopoverContext, usePopover } from "./context";
 
 export interface PopoverPortalProps {
   children?: React.ReactNode;