@korsolutions/ui 0.0.50 → 0.0.52

package/src/components/alert-dialog/components/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 AlertDialogCancelProps extends PressableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogCancel(props: AlertDialogCancelProps) {
+  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/components/alert-dialog/components/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 AlertDialogContentProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogContent(props: AlertDialogContentProps) {
+  const { children, style, ...viewProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.content, style];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {children}
+    </View>
+  );
+}

package/src/components/alert-dialog/components/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 AlertDialogDescriptionProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function AlertDialogDescription(props: AlertDialogDescriptionProps) {
+  const { children, style, ...textProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.description, style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/components/alert-dialog/components/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 AlertDialogFooterProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogFooter(props: AlertDialogFooterProps) {
+  const { children, style, ...viewProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.footer, style];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {children}
+    </View>
+  );
+}

package/src/components/alert-dialog/components/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 AlertDialogOverlayProps extends PressableProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AlertDialogOverlay(props: AlertDialogOverlayProps) {
+  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/components/alert-dialog/components/alert-dialog-portal.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Portal } from "../../portal";
+import { AlertDialogContext, 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">
+      <AlertDialogContext.Provider value={alertDialog}>{props.children}</AlertDialogContext.Provider>
+    </Portal>
+  );
+}

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

@@ -0,0 +1,25 @@
+import React, { useMemo, useState } from "react";
+import { AlertDialogContext, type AlertDialogContextValue } from "../context";
+import { AlertDialogVariants } from "../variants";
+
+export interface AlertDialogRootProps {
+  variant?: keyof typeof AlertDialogVariants;
+  children: React.ReactNode;
+}
+
+export function AlertDialogRoot(props: AlertDialogRootProps) {
+  const variantStyles = AlertDialogVariants[props.variant || "default"]();
+  const { children } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const contextValue: AlertDialogContextValue = useMemo(
+    () => ({
+      isOpen,
+      setIsOpen,
+      styles: variantStyles,
+    }),
+    [isOpen, variantStyles],
+  );
+
+  return <AlertDialogContext.Provider value={contextValue}>{children}</AlertDialogContext.Provider>;
+}

package/src/components/alert-dialog/components/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 AlertDialogTitleProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function AlertDialogTitle(props: AlertDialogTitleProps) {
+  const { children, style, ...textProps } = props;
+  const { styles } = useAlertDialog();
+
+  const calculatedStyle = [styles?.title, style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/components/alert-dialog/components/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 AlertDialogTriggerProps extends PressableProps {
+  children: React.ReactElement<React.RefAttributes<ViewRef> & PressableProps>;
+}
+
+export function AlertDialogTrigger(props: AlertDialogTriggerProps): React.ReactElement {
+  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/components/alert-dialog/context.ts

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

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

@@ -1,3 +1,35 @@
-export { AlertDialog } from "./alert-dialog";
-export { AlertDialogVariants } from "./variants";
-export { AsyncAlertDialog, AsyncAlertDialogManager } from "./async-alert-dialog";
+import { AlertDialogAction } from "./components/alert-dialog-action";
+import { AlertDialogCancel } from "./components/alert-dialog-cancel";
+import { AlertDialogContent } from "./components/alert-dialog-content";
+import { AlertDialogDescription } from "./components/alert-dialog-description";
+import { AlertDialogFooter } from "./components/alert-dialog-footer";
+import { AlertDialogOverlay } from "./components/alert-dialog-overlay";
+import { AlertDialogPortal } from "./components/alert-dialog-portal";
+import { AlertDialogRoot } from "./components/alert-dialog-root";
+import { AlertDialogTitle } from "./components/alert-dialog-title";
+import { AlertDialogTrigger } from "./components/alert-dialog-trigger";
+
+export const AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Portal: AlertDialogPortal,
+  Overlay: AlertDialogOverlay,
+  Content: AlertDialogContent,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Footer: AlertDialogFooter,
+  Action: AlertDialogAction,
+  Cancel: AlertDialogCancel,
+};
+
+export * from "./async-alert-dialog";
+export type { AlertDialogActionProps } from "./components/alert-dialog-action";
+export type { AlertDialogCancelProps } from "./components/alert-dialog-cancel";
+export type { AlertDialogContentProps } from "./components/alert-dialog-content";
+export type { AlertDialogDescriptionProps } from "./components/alert-dialog-description";
+export type { AlertDialogFooterProps } from "./components/alert-dialog-footer";
+export type { AlertDialogOverlayProps } from "./components/alert-dialog-overlay";
+export type { AlertDialogRootProps } from "./components/alert-dialog-root";
+export type { AlertDialogTitleProps } from "./components/alert-dialog-title";
+export type { AlertDialogTriggerProps } from "./components/alert-dialog-trigger";
+export * from "./types";

package/src/components/alert-dialog/variants/default.tsx

@@ -1,4 +1,4 @@
-import { type AlertDialogStyles } from "@/primitives";
+import { type AlertDialogStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useAlertDialogVariantDefault = (): AlertDialogStyles => {
@@ -77,6 +77,6 @@ export const useAlertDialogVariantDefault = (): AlertDialogStyles => {
         fontWeight: "500",
         fontFamily,
       },
-    })
+    }),
   );
 };

package/src/components/avatar/components/avatar-fallback.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Text, type StyleProp, type TextStyle } from "react-native";
+import { useAvatar } from "../context";
+
+export interface AvatarFallbackProps {
+  children: string | string[];
+  style?: StyleProp<TextStyle>;
+}
+
+export function AvatarFallback(props: AvatarFallbackProps) {
+  const avatar = useAvatar();
+
+  if (avatar.imageLoaded) {
+    return null;
+  }
+
+  const composedStyles = [avatar.styles?.fallback, props.style];
+  return <Text {...props} style={composedStyles} />;
+}

package/src/components/avatar/components/avatar-image.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Image, type ImageSource, type ImageStyle, type StyleProp } from "react-native";
+import { useAvatar } from "../context";
+
+export interface AvatarImageProps {
+  source: ImageSource;
+  style?: StyleProp<ImageStyle>;
+}
+
+export function AvatarImage(props: AvatarImageProps) {
+  const avatar = useAvatar();
+  const composedStyles = [avatar.styles?.image, props.style];
+
+  return <Image {...props} style={composedStyles} onLoad={() => avatar.setImageLoaded(true)} onError={() => avatar.setImageLoaded(false)} />;
+}

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

@@ -0,0 +1,34 @@
+import React, { useMemo, useState } from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { AvatarContext } from "../context";
+import { AvatarVariants } from "../variants";
+
+export interface AvatarRootProps {
+  variant?: keyof typeof AvatarVariants;
+  children: React.ReactNode;
+  render?: (props: AvatarRootProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AvatarRoot(props: AvatarRootProps) {
+  const variantStyles = AvatarVariants[props.variant || "default"]();
+  const composedStyles = [variantStyles.root, props.style];
+
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  const contextValue: AvatarContext = useMemo(
+    () => ({
+      styles: variantStyles,
+      imageLoaded,
+      setImageLoaded,
+    }),
+    [variantStyles, imageLoaded],
+  );
+
+  const Component = props.render ?? View;
+  return (
+    <AvatarContext.Provider value={contextValue}>
+      <Component {...props} style={composedStyles} />
+    </AvatarContext.Provider>
+  );
+}

package/src/components/avatar/context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import type { AvatarStyles } from "./types";
+
+export interface AvatarContext {
+  imageLoaded: boolean;
+  setImageLoaded: (loaded: boolean) => void;
+
+  styles?: AvatarStyles;
+}
+
+export const AvatarContext = createContext<AvatarContext | undefined>(undefined);
+
+export const useAvatar = () => {
+  const context = useContext(AvatarContext);
+  if (!context) {
+    throw new Error("useAvatarContext must be used within a AvatarProvider");
+  }
+  return context;
+};

package/src/components/avatar/index.ts

@@ -0,0 +1,14 @@
+import { AvatarFallback } from "./components/avatar-fallback";
+import { AvatarImage } from "./components/avatar-image";
+import { AvatarRoot } from "./components/avatar-root";
+
+export const Avatar = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+};
+
+export type { AvatarFallbackProps } from "./components/avatar-fallback";
+export type { AvatarImageProps } from "./components/avatar-image";
+export type { AvatarRootProps } from "./components/avatar-root";
+export type { AvatarStyles } from "./types";

package/src/components/avatar/types.ts

@@ -0,0 +1,9 @@
+import type { AvatarFallbackProps } from "./components/avatar-fallback";
+import type { AvatarImageProps } from "./components/avatar-image";
+import type { AvatarRootProps } from "./components/avatar-root";
+
+export type AvatarStyles = {
+  root?: AvatarRootProps["style"];
+  image?: AvatarImageProps["style"];
+  fallback?: AvatarFallbackProps["style"];
+};

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

@@ -1,4 +1,4 @@
-import type { AvatarStyles } from "@/primitives";
+import type { AvatarStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export function useAvatarVariantDefault(): AvatarStyles {
@@ -25,6 +25,6 @@ export function useAvatarVariantDefault(): AvatarStyles {
         textAlign: "center",
         verticalAlign: "middle",
       },
-    })
+    }),
   );
 }

package/src/components/badge/components/badge-label.tsx

@@ -0,0 +1,21 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useBadge } from "../context";
+
+export interface BadgeLabelProps {
+  children?: string;
+
+  render?: (props: BadgeLabelProps) => React.ReactNode;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function BadgeLabel(props: BadgeLabelProps) {
+  const badge = useBadge();
+
+  const composedStyle = calculateComposedStyles(badge.styles, badge.state, "label", props.style);
+
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyle} />;
+}

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

@@ -0,0 +1,36 @@
+import type { ElementChildren } from "@/types/element.types";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { BadgeContext } from "../context";
+import { BadgeVariants } from "../variants";
+
+export interface BadgeRootProps {
+  variant?: keyof typeof BadgeVariants;
+  color?: string;
+  children?: ElementChildren;
+
+  render?: (props: BadgeRootProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function BadgeRoot(props: BadgeRootProps) {
+  const variantStyles = BadgeVariants[props.variant || "default"]();
+
+  const customStyle = props.color ? { backgroundColor: props.color } : undefined;
+
+  const composedStyle = calculateComposedStyles(variantStyles, "default", "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <BadgeContext.Provider
+      value={{
+        state: "default",
+        styles: variantStyles,
+      }}
+    >
+      <Component {...props} style={[composedStyle, customStyle]} />
+    </BadgeContext.Provider>
+  );
+}

package/src/components/badge/index.ts

@@ -0,0 +1,11 @@
+import { BadgeLabel } from "./components/badge-label";
+import { BadgeRoot } from "./components/badge-root";
+
+export const Badge = {
+  Root: BadgeRoot,
+  Label: BadgeLabel,
+};
+
+export type { BadgeLabelProps } from "./components/badge-label";
+export type { BadgeRootProps } from "./components/badge-root";
+export type { BadgeStyles } from "./types";

package/src/components/badge/types.ts

@@ -0,0 +1,9 @@
+import type { BadgeLabelProps } from "./components/badge-label";
+import type { BadgeRootProps } from "./components/badge-root";
+
+export type BadgeState = "default";
+
+export interface BadgeStyles {
+  root?: Partial<Record<BadgeState, BadgeRootProps["style"]>>;
+  label?: Partial<Record<BadgeState, BadgeLabelProps["style"]>>;
+}

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

@@ -1,4 +1,4 @@
-import type { BadgeStyles } from "@/primitives";
+import type { BadgeStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useBadgeVariantDefault = (): BadgeStyles => {
@@ -21,6 +21,6 @@ export const useBadgeVariantDefault = (): BadgeStyles => {
           fontFamily,
         },
       },
-    })
+    }),
   );
 };

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

@@ -1,4 +1,4 @@
-import { type BadgeStyles } from "@/primitives";
+import { type BadgeStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useBadgeVariantSecondary = (): BadgeStyles => {
@@ -21,6 +21,6 @@ export const useBadgeVariantSecondary = (): BadgeStyles => {
           fontFamily,
         },
       },
-    })
+    }),
   );
 };

package/src/components/button/components/button-label.tsx

@@ -0,0 +1,25 @@
+import type { TextChildren } from "@/types/element.types";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useButton } from "../context";
+
+export interface ButtonLabelProps {
+  children?: TextChildren;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function ButtonLabel(props: ButtonLabelProps) {
+  const button = useButton();
+
+  const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
+
+  const isSelectable = button.state !== "disabled" && button.state !== "loading";
+
+  return (
+    <Text selectable={isSelectable} style={calculatedStyle}>
+      {props.children}
+    </Text>
+  );
+}

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

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import { Pressable, type CursorValue, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { ButtonContext } from "../context";
+import type { ButtonState } from "../types";
+import { ButtonVariants } from "../variants";
+
+export interface ButtonRootProps extends PressableProps {
+  variant?: keyof typeof ButtonVariants;
+  children?: React.ReactNode;
+
+  isDisabled?: boolean;
+  isLoading?: boolean;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (props: ButtonRootProps, isHovered: boolean): ButtonState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  if (props.isLoading) {
+    return "loading";
+  }
+  if (isHovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
+const cursorValue = (state: ButtonState): CursorValue => {
+  switch (state) {
+    case "disabled":
+      return "not-allowed" as CursorValue;
+    case "loading":
+      return "wait" as CursorValue;
+    default:
+      return "pointer";
+  }
+};
+
+export function ButtonRoot(props: ButtonRootProps) {
+  const variantStyles = ButtonVariants[props.variant ?? "default"]();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const state = calculateState(props, isHovered);
+
+  const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], props.style];
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    if (props.isDisabled || props.isLoading) {
+      event.preventDefault();
+      return;
+    }
+    props.onPress?.(event);
+  };
+
+  const contextValue: ButtonContext = { state, styles: variantStyles };
+
+  return (
+    <ButtonContext.Provider value={contextValue}>
+      <Pressable
+        {...props}
+        onPress={handlePress}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        disabled={props.isDisabled}
+        style={[
+          calculatedStyle,
+          {
+            cursor: cursorValue(state),
+          },
+        ]}
+      />
+    </ButtonContext.Provider>
+  );
+}

package/src/components/button/components/button-spinner.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ActivityIndicator, type ActivityIndicatorProps, type StyleProp, type ViewStyle } from "react-native";
+import { useButton } from "../context";
+
+export interface ButtonSpinnerProps {
+  style?: StyleProp<ViewStyle>;
+  color?: ActivityIndicatorProps["color"];
+}
+
+export function ButtonSpinner(props: ButtonSpinnerProps) {
+  const button = useButton();
+  const composedStyle = [button.styles?.spinner?.default?.style, button.styles?.spinner?.[button.state]?.style, props.style];
+  return <ActivityIndicator style={composedStyle} color={props.color} />;
+}