@korsolutions/ui 0.0.49 → 0.0.51

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

@@ -1,102 +0,0 @@
-import { Portal } from "@/primitives/portal";
-import { useSafeAreaInsets } from "@/safe-area";
-import React, { useSyncExternalStore } from "react";
-import { StyleSheet, View } from "react-native";
-import { ToastComponent } from "./toast";
-import { ToastVariants } from "./variants";
-
-export const TOAST_PORTAL_NAME = "toast-portal";
-
-export interface ToastConfig {
-  id: string;
-  title: string;
-  description?: string;
-  variant?: keyof typeof ToastVariants;
-  duration?: number;
-}
-
-type ToastStore = {
-  toasts: ToastConfig[];
-  listeners: Set<() => void>;
-};
-
-const store: ToastStore = {
-  toasts: [],
-  listeners: new Set(),
-};
-
-function emit() {
-  for (const cb of store.listeners) cb();
-}
-
-function getSnapshot() {
-  return store.toasts;
-}
-
-function subscribe(cb: () => void) {
-  store.listeners.add(cb);
-  return () => {
-    store.listeners.delete(cb);
-  };
-}
-
-function addToast(config: ToastConfig): string {
-  // Check if toast with this ID already exists
-  const existingToast = store.toasts.find((t) => t.id === config.id);
-  if (existingToast) {
-    return existingToast.id;
-  }
-
-  const toast: ToastConfig = {
-    duration: 3000,
-    ...config,
-  };
-
-  store.toasts = [...store.toasts, toast];
-  emit();
-
-  // Auto-dismiss after duration
-  if (toast.duration) {
-    setTimeout(() => {
-      removeToast(toast.id);
-    }, toast.duration);
-  }
-
-  return toast.id;
-}
-
-function removeToast(id: string): void {
-  store.toasts = store.toasts.filter((t) => t.id !== id);
-  emit();
-}
-
-export const ToastAPI = {
-  show: addToast,
-  dismiss: removeToast,
-};
-
-export function ToastContainer() {
-  const toasts = useSyncExternalStore(subscribe, getSnapshot);
-  const insets = useSafeAreaInsets();
-
-  if (!toasts.length) return null;
-
-  return (
-    <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} />
-        ))}
-      </View>
-    </Portal>
-  );
-}
-
-const s = StyleSheet.create({
-  wrapper: {
-    width: "100%",
-    alignItems: "center",
-    position: "absolute",
-    gap: 8,
-  },
-});

package/src/components/toast/toast.tsx

@@ -1,22 +0,0 @@
-import { ToastPrimitive } from "@/primitives";
-import React from "react";
-import { ToastVariants } from "./variants";
-
-interface ToastProps {
-  title: string;
-  description?: string;
-
-  variant?: keyof typeof ToastVariants;
-}
-
-export function ToastComponent(props: ToastProps) {
-  const useVariantStyles = ToastVariants[props.variant || "default"];
-  const styles = useVariantStyles();
-
-  return (
-    <ToastPrimitive.Root styles={styles}>
-      <ToastPrimitive.Title>{props.title}</ToastPrimitive.Title>
-      {!!props.description && <ToastPrimitive.Description>{props.description}</ToastPrimitive.Description>}
-    </ToastPrimitive.Root>
-  );
-}

package/src/primitives/alert/alert-body.tsx

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

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

@@ -1,20 +0,0 @@
-import type { TextChildren } from "@/types/element.types";
-import type { PropsWithRender } from "@/types/props.types";
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useAlert } from "./context";
-
-export interface AlertDescriptionProps {
-  children?: TextChildren;
-
-  style?: StyleProp<TextStyle>;
-}
-
-export function AlertDescription(props: PropsWithRender<AlertDescriptionProps>) {
-  const alert = useAlert();
-
-  const composedStyle = [alert.styles?.description, props.style];
-
-  const Component = props.render ?? Text;
-  return <Component {...props} style={composedStyle} />;
-}

package/src/primitives/alert/alert-icon.tsx

@@ -1,17 +0,0 @@
-import type { PropsWithRequiredRender, SvgProps } from "@/types/props.types";
-import React from "react";
-import { useAlert } from "./context";
-
-export type AlertIconProps = SvgProps;
-
-export function AlertIcon({ render: Component, ...props }: PropsWithRequiredRender<AlertIconProps>) {
-  const alert = useAlert();
-
-  const composedProps = {
-    ...alert.styles?.icon,
-    ...props,
-    style: [alert.styles?.icon?.style, props.style],
-  };
-
-  return <Component absoluteStrokeWidth {...composedProps} />;
-}

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

@@ -1,28 +0,0 @@
-import type { PropsWithRender } from "@/types/props.types";
-import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import { AlertContext } from "./context";
-import { AlertVariants } from "./variants";
-
-export interface AlertRootProps {
-  variant?: keyof typeof AlertVariants;
-  children?: React.ReactNode;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-export function AlertRoot(props: PropsWithRender<AlertRootProps>) {
-  const variantStyles = AlertVariants[props.variant ?? "default"]();
-  const composedStyle: StyleProp<ViewStyle> = [variantStyles.root, props.style];
-
-  const Component = props.render ?? View;
-  return (
-    <AlertContext.Provider
-      value={{
-        styles: variantStyles,
-      }}
-    >
-      <Component {...props} style={composedStyle} />
-    </AlertContext.Provider>
-  );
-}

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

@@ -1,20 +0,0 @@
-import type { TextChildren } from "@/types/element.types";
-import type { PropsWithRender } from "@/types/props.types";
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useAlert } from "./context";
-
-export interface AlertTitleProps {
-  children?: TextChildren;
-
-  style?: StyleProp<TextStyle>;
-}
-
-export function AlertTitle(props: PropsWithRender<AlertTitleProps>) {
-  const alert = useAlert();
-
-  const composedStyle = [alert.styles?.title, props.style];
-
-  const Component = props.render ?? Text;
-  return <Component {...props} style={composedStyle} />;
-}

package/src/primitives/alert/index.ts

@@ -1,20 +0,0 @@
-import { AlertBody } from "./alert-body";
-import { AlertDescription } from "./alert-description";
-import { AlertIcon } from "./alert-icon";
-import { AlertRoot } from "./alert-root";
-import { AlertTitle } from "./alert-title";
-
-export const Alert = {
-  Root: AlertRoot,
-  Icon: AlertIcon,
-  Body: AlertBody,
-  Title: AlertTitle,
-  Description: AlertDescription,
-};
-
-export type { AlertBodyProps } from "./alert-body";
-export type { AlertDescriptionProps } from "./alert-description";
-export type { AlertIconProps } from "./alert-icon";
-export type { AlertRootProps } from "./alert-root";
-export type { AlertTitleProps } from "./alert-title";
-export type { AlertStyles } from "./types";

package/src/primitives/alert/types.ts

@@ -1,13 +0,0 @@
-import type { AlertBodyProps } from "./alert-body";
-import type { AlertDescriptionProps } from "./alert-description";
-import type { AlertIconProps } from "./alert-icon";
-import type { AlertRootProps } from "./alert-root";
-import type { AlertTitleProps } from "./alert-title";
-
-export interface AlertStyles {
-  root?: AlertRootProps["style"];
-  icon?: AlertIconProps;
-  body?: AlertBodyProps["style"];
-  title?: AlertTitleProps["style"];
-  description?: AlertDescriptionProps["style"];
-}

package/src/primitives/alert/variants/default.tsx

@@ -1,39 +0,0 @@
-import { type AlertStyles } from "@/primitives";
-import { useThemedStyles } from "@/utils/use-themed-styles";
-
-export const useAlertVariantDefault = (): AlertStyles => {
-  return useThemedStyles(
-    ({ colors, radius, fontSize }): AlertStyles => ({
-      root: {
-        padding: 16,
-        backgroundColor: colors.background,
-        borderRadius: radius,
-        borderWidth: 1,
-        borderColor: colors.border,
-        flexDirection: "row",
-        gap: 12,
-      },
-      icon: {
-        color: colors.foreground,
-        size: 20,
-        style: {
-          marginTop: 2,
-        },
-      },
-      body: {
-        flex: 1,
-      },
-      title: {
-        fontSize: fontSize,
-        fontWeight: "600",
-        color: colors.foreground,
-        marginBottom: 4,
-      },
-      description: {
-        fontSize: fontSize * 0.875,
-        color: colors.mutedForeground,
-        lineHeight: 20,
-      },
-    }),
-  );
-};

package/src/primitives/alert/variants/destructive.tsx

@@ -1,40 +0,0 @@
-import { type AlertStyles } from "@/primitives";
-import { useThemedStyles } from "@/utils/use-themed-styles";
-
-export const useAlertVariantDestructive = (): AlertStyles => {
-  return useThemedStyles(
-    ({ colors, radius, fontSize }): AlertStyles => ({
-      root: {
-        padding: 16,
-        backgroundColor: colors.background,
-        borderRadius: radius,
-        borderWidth: 1,
-        borderColor: colors.danger,
-        flexDirection: "row",
-        gap: 12,
-      },
-      icon: {
-        color: colors.danger,
-        size: 20,
-        style: {
-          marginTop: 2,
-        },
-      },
-      body: {
-        flex: 1,
-      },
-      title: {
-        fontSize: fontSize,
-        fontWeight: "600",
-        color: colors.danger,
-        marginBottom: 4,
-      },
-      description: {
-        fontSize: fontSize * 0.875,
-        color: colors.danger,
-        lineHeight: 20,
-        opacity: 0.9,
-      },
-    }),
-  );
-};

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

@@ -1,27 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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): 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/primitives/alert-dialog/context.ts

@@ -1,18 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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";