@korsolutions/ui 0.0.50 → 0.0.51

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

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

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

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

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useToast } from "../context";
+
+export interface ToastTitleProps {
+  children?: string;
+
+  render?: (props: ToastTitleProps) => React.ReactNode;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function ToastTitle(props: ToastTitleProps) {
+  const toast = useToast();
+
+  const composedStyle = [toast.styles?.title, props.style];
+
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/components/toast/index.ts

@@ -1,7 +1,3 @@
-import { ToastComponent } from "./toast";
-import { ToastAPI } from "./toast-manager";
+import { ToastAPI } from "./manager";
 
-export const Toast = Object.assign(ToastComponent, {
-  show: ToastAPI.show,
-  dismiss: ToastAPI.dismiss,
-});
+export const Toast = ToastAPI;

package/src/components/toast/manager.tsx

@@ -0,0 +1,120 @@
+import { Portal } from "@/components/portal";
+import { useSafeAreaInsets } from "@/safe-area";
+import React, { useSyncExternalStore } from "react";
+import { StyleSheet, View } from "react-native";
+import { ToastDescription } from "./components/toast-description";
+import { ToastRoot } from "./components/toast-root";
+import { ToastTitle } from "./components/toast-title";
+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>
+  );
+}
+
+interface ToastProps {
+  title: string;
+  description?: string;
+
+  variant?: keyof typeof ToastVariants;
+}
+
+export function ToastComponent(props: ToastProps) {
+  return (
+    <ToastRoot variant={props.variant}>
+      <ToastTitle>{props.title}</ToastTitle>
+      {!!props.description && <ToastDescription>{props.description}</ToastDescription>}
+    </ToastRoot>
+  );
+}
+
+const s = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    alignItems: "center",
+    position: "absolute",
+    gap: 8,
+  },
+});

package/src/components/toast/types.ts

@@ -0,0 +1,11 @@
+import type { ToastDescriptionProps } from "./components/toast-description";
+import type { ToastIconProps } from "./components/toast-icon";
+import type { ToastRootProps } from "./components/toast-root";
+import type { ToastTitleProps } from "./components/toast-title";
+
+export interface ToastStyles {
+  root?: ToastRootProps["style"];
+  icon?: ToastIconProps;
+  title?: ToastTitleProps["style"];
+  description?: ToastDescriptionProps["style"];
+}

package/src/components/toast/variants/danger.tsx

@@ -1,5 +1,5 @@
-import { type ToastStyles } from "@/primitives";
 import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type ToastStyles } from "../types";
 
 export const useToastVariantDanger = (): ToastStyles => {
   return useThemedStyles(
@@ -13,6 +13,14 @@ export const useToastVariantDanger = (): ToastStyles => {
         gap: 4,
         minWidth: 300,
         maxWidth: 400,
+        flexDirection: "row",
+      },
+      icon: {
+        color: colors.foreground,
+        size: 20,
+        style: {
+          marginTop: 2,
+        },
       },
       title: {
         color: colors.foreground,
@@ -26,6 +34,6 @@ export const useToastVariantDanger = (): ToastStyles => {
         fontFamily,
         opacity: 0.9,
       },
-    })
+    }),
   );
 };

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

@@ -1,5 +1,5 @@
-import { type ToastStyles } from "@/primitives";
 import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type ToastStyles } from "../types";
 
 export const useToastVariantDefault = (): ToastStyles => {
   return useThemedStyles(
@@ -13,6 +13,14 @@ export const useToastVariantDefault = (): ToastStyles => {
         gap: 4,
         minWidth: 300,
         maxWidth: 400,
+        flexDirection: "row",
+      },
+      icon: {
+        color: colors.foreground,
+        size: 20,
+        style: {
+          marginTop: 2,
+        },
       },
       title: {
         color: colors.foreground,
@@ -25,6 +33,6 @@ export const useToastVariantDefault = (): ToastStyles => {
         fontSize: fontSize * 0.875,
         fontFamily,
       },
-    })
+    }),
   );
 };

package/src/components/toast/variants/success.tsx

@@ -1,5 +1,5 @@
-import { type ToastStyles } from "@/primitives";
 import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type ToastStyles } from "../types";
 
 export const useToastVariantSuccess = (): ToastStyles => {
   return useThemedStyles(
@@ -13,6 +13,14 @@ export const useToastVariantSuccess = (): ToastStyles => {
         gap: 4,
         minWidth: 300,
         maxWidth: 400,
+        flexDirection: "row",
+      },
+      icon: {
+        color: colors.foreground,
+        size: 20,
+        style: {
+          marginTop: 2,
+        },
       },
       title: {
         color: colors.foreground,
@@ -26,6 +34,6 @@ export const useToastVariantSuccess = (): ToastStyles => {
         fontFamily,
         opacity: 0.9,
       },
-    })
+    }),
   );
 };

package/src/components/typography/typography.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Text as RnText, StyleSheet, type TextProps as RnTextProps } from "react-native";
+import { TypographyVariants } from "./variants";
+
+export interface TypographyProps extends RnTextProps {
+  variant?: keyof typeof TypographyVariants;
+}
+
+export function Typography(props: TypographyProps) {
+  const variantStyles = TypographyVariants[props.variant ?? "body-md"]();
+
+  const combinedStyles = StyleSheet.flatten([variantStyles, props.style]);
+
+  return <RnText {...props} style={combinedStyles} />;
+}

package/src/components/typography/variants/body-lg.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type TextStyle } from "react-native";
+
+export function useTextVariantBodyLg(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize: fontSize * 1.25,
+      fontFamily,
+      letterSpacing,
+      lineHeight: fontSize * 1.5,
+    }),
+  );
+}

package/src/components/typography/variants/body-md.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type TextStyle } from "react-native";
+
+export function useTextVariantBodyMd(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize,
+      fontFamily,
+      letterSpacing,
+      lineHeight: fontSize * 1.5,
+    }),
+  );
+}

package/src/components/typography/variants/body-sm.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type TextStyle } from "react-native";
+
+export function useTextVariantBodySm(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize: fontSize * 0.875,
+      fontFamily,
+      letterSpacing,
+      lineHeight: fontSize * 1.5,
+    }),
+  );
+}

package/src/components/typography/variants/heading-lg.tsx

@@ -0,0 +1,15 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type TextStyle } from "react-native";
+
+export function useTextVariantHeadingLg(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize: fontSize * 1.5,
+      fontFamily,
+      letterSpacing,
+      fontWeight: "600",
+      lineHeight: fontSize * 1.2,
+    }),
+  );
+}

package/src/components/typography/variants/heading-md.tsx

@@ -0,0 +1,15 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type TextStyle } from "react-native";
+
+export function useTextVariantHeadingMd(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize: fontSize * 1.25,
+      fontFamily,
+      letterSpacing,
+      fontWeight: "600",
+      lineHeight: fontSize * 1.2,
+    }),
+  );
+}

package/src/components/typography/variants/heading-sm.tsx

@@ -0,0 +1,15 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type TextStyle } from "react-native";
+
+export function useTextVariantHeadingSm(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize,
+      fontFamily,
+      letterSpacing,
+      fontWeight: "600",
+      lineHeight: fontSize * 1.2,
+    }),
+  );
+}

package/src/hooks/use-first-effect.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef, type DependencyList, type EffectCallback } from "react";
+
+export function useFirstEffect(effect: EffectCallback, deps: DependencyList) {
+  const isFirstEffect = useRef(true);
+
+  useEffect(() => {
+    if (isFirstEffect.current) {
+      isFirstEffect.current = false;
+      return;
+    }
+
+    return effect();
+  }, deps);
+}

package/src/hooks/use-relative-position.ts

@@ -1,12 +1,6 @@
-import * as React from "react";
-import { useWindowDimensions, type DisplayMetrics, type LayoutRectangle } from "react-native";
-
-interface Insets {
-  top?: number;
-  bottom?: number;
-  left?: number;
-  right?: number;
-}
+import type { SafeAreaInsets } from "@/safe-area";
+import { useMemo } from "react";
+import { useWindowDimensions, type DisplayMetrics, type LayoutRectangle, type ViewStyle } from "react-native";
 
 type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "contentLayout" | "dimensions"> & {
   triggerPosition: LayoutPosition | null;
@@ -15,37 +9,38 @@ type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "co
 
 export function useRelativePosition({
   align,
-  avoidCollisions,
   triggerPosition,
   contentLayout,
   alignOffset,
   insets,
   sideOffset,
-  side,
-}: UseRelativePositionArgs) {
+  preferredSide,
+}: UseRelativePositionArgs): ViewStyle {
   const dimensions = useWindowDimensions();
 
-  return React.useMemo(() => {
+  return useMemo(() => {
     if (!triggerPosition || !contentLayout) {
       return {
         position: "absolute",
         opacity: 0,
         top: dimensions.height,
         zIndex: -9999999,
-      } as const;
+      };
     }
-    return getContentStyle({
+
+    const style = getContentStyle({
       align,
-      avoidCollisions,
       contentLayout,
-      side,
+      preferredSide,
       triggerPosition,
       alignOffset,
       insets,
       sideOffset,
       dimensions,
     });
-  }, [align, avoidCollisions, side, alignOffset, insets, triggerPosition, contentLayout, dimensions.width, dimensions.height]);
+
+    return style;
+  }, [align, preferredSide, alignOffset, insets, triggerPosition, contentLayout, dimensions.width, dimensions.height, sideOffset]);
 }
 
 export interface LayoutPosition {
@@ -57,31 +52,67 @@ export interface LayoutPosition {
 
 interface GetPositionArgs {
   dimensions: DisplayMetrics;
-  avoidCollisions: boolean;
   triggerPosition: LayoutPosition;
   contentLayout: LayoutRectangle;
-  insets?: Insets;
+  insets?: SafeAreaInsets;
 }
 
 interface GetSidePositionArgs extends GetPositionArgs {
-  side: "top" | "bottom";
+  preferredSide: "top" | "bottom";
   sideOffset: number;
 }
 
 export const DEFAULT_LAYOUT: LayoutRectangle = { x: 0, y: 0, width: 0, height: 0 };
 export const DEFAULT_POSITION: LayoutPosition = { height: 0, width: 0, pageX: 0, pageY: 0 };
 
-function getSidePosition({ side, triggerPosition, contentLayout, sideOffset, insets, avoidCollisions, dimensions }: GetSidePositionArgs) {
+interface GetSideArgs {
+  preferredSide: "top" | "bottom";
+  insetTop: number;
+  insetBottom: number;
+  positionTop: number;
+  positionBottom: number;
+  contentLayout: LayoutRectangle;
+  dimensions: DisplayMetrics;
+}
+
+function getSide({ preferredSide, insetTop, insetBottom, positionTop, positionBottom, contentLayout, dimensions }: GetSideArgs) {
+  if (preferredSide === "bottom") {
+    const spaceBelow = dimensions.height - insetBottom - positionBottom;
+    if (spaceBelow >= contentLayout.height) {
+      return "bottom";
+    }
+    const spaceAbove = positionTop - insetTop;
+    if (spaceAbove > spaceBelow) {
+      return "top";
+    }
+    return "bottom";
+  }
+  const spaceAbove = positionTop - insetTop;
+  if (spaceAbove >= contentLayout.height) {
+    return "top";
+  }
+  const spaceBelow = dimensions.height - insetBottom - positionBottom;
+  if (spaceBelow > spaceAbove) {
+    return "bottom";
+  }
+  return "top";
+}
+
+function getSidePosition({ preferredSide, triggerPosition, contentLayout, sideOffset, insets, dimensions }: GetSidePositionArgs) {
   const insetTop = insets?.top ?? 0;
   const insetBottom = insets?.bottom ?? 0;
   const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
   const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
 
-  if (!avoidCollisions) {
-    return {
-      top: side === "top" ? positionTop : positionBottom,
-    };
-  }
+  const side = getSide({
+    preferredSide,
+    insetTop,
+    insetBottom,
+    positionTop,
+    positionBottom,
+    contentLayout,
+    dimensions,
+  });
 
   if (side === "top") {
     return {
@@ -99,7 +130,7 @@ interface GetAlignPositionArgs extends GetPositionArgs {
   alignOffset: number;
 }
 
-function getAlignPosition({ align, avoidCollisions, contentLayout, triggerPosition, alignOffset, insets, dimensions }: GetAlignPositionArgs) {
+function getAlignPosition({ align, contentLayout, triggerPosition, alignOffset, insets, dimensions }: GetAlignPositionArgs) {
   const insetLeft = insets?.left ?? 0;
   const insetRight = insets?.right ?? 0;
   const maxContentWidth = dimensions.width - insetLeft - insetRight;
@@ -108,20 +139,18 @@ function getAlignPosition({ align, avoidCollisions, contentLayout, triggerPositi
 
   let left = getLeftPosition(align, triggerPosition.pageX, triggerPosition.width, contentWidth, alignOffset, insetLeft, insetRight, dimensions);
 
-  if (avoidCollisions) {
-    const doesCollide = left < insetLeft || left + contentWidth > dimensions.width - insetRight;
-    if (doesCollide) {
-      const spaceLeft = left - insetLeft;
-      const spaceRight = dimensions.width - insetRight - (left + contentWidth);
-
-      if (spaceLeft > spaceRight && spaceLeft >= contentWidth) {
-        left = insetLeft;
-      } else if (spaceRight >= contentWidth) {
-        left = dimensions.width - insetRight - contentWidth;
-      } else {
-        const centeredPosition = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
-        left = centeredPosition;
-      }
+  const doesCollide = left < insetLeft || left + contentWidth > dimensions.width - insetRight;
+  if (doesCollide) {
+    const spaceLeft = left - insetLeft;
+    const spaceRight = dimensions.width - insetRight - (left + contentWidth);
+
+    if (spaceLeft > spaceRight && spaceLeft >= contentWidth) {
+      left = insetLeft;
+    } else if (spaceRight >= contentWidth) {
+      left = dimensions.width - insetRight - contentWidth;
+    } else {
+      const centeredPosition = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
+      left = centeredPosition;
     }
   }
 
@@ -153,36 +182,10 @@ function getLeftPosition(
 
 type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
 
-function getContentStyle({
-  align,
-  avoidCollisions,
-  contentLayout,
-  side,
-  triggerPosition,
-  alignOffset,
-  insets,
-  sideOffset,
-  dimensions,
-}: GetContentStyleArgs) {
-  return Object.assign(
-    { position: "absolute" } as const,
-    getSidePosition({
-      side,
-      triggerPosition,
-      contentLayout,
-      sideOffset,
-      insets,
-      avoidCollisions,
-      dimensions,
-    }),
-    getAlignPosition({
-      align,
-      avoidCollisions,
-      triggerPosition,
-      contentLayout,
-      alignOffset,
-      insets,
-      dimensions,
-    }),
-  );
+function getContentStyle(args: GetContentStyleArgs): ViewStyle {
+  return {
+    position: "absolute",
+    ...getSidePosition(args),
+    ...getAlignPosition(args),
+  };
 }