@medway-ui/native 1.6.1 → 1.7.0

package/src/components/Toast.tsx

@@ -1,5 +1,22 @@
-import { useState, useEffect, type ReactElement, type ReactNode } from "react";
-import { View, Pressable, type ViewProps } from "react-native";
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  type ViewProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { useUnstableNativeVariable } from "nativewind";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 
 import { Text } from "@/components/Text";
 import { cva } from "class-variance-authority";
@@ -7,22 +24,41 @@ import Animated, {
   useSharedValue,
   useAnimatedStyle,
   withTiming,
-  withDelay,
   runOnJS,
 } from "react-native-reanimated";
 import { cn } from "@/lib/utils";
+import { loadLinearGradient } from "@/lib/optional-deps";
 import {
   CircleCheck,
   CloseMd,
   Info,
   OctagonWarning,
+  Rocket,
   TriangleWarning,
 } from "@medway-ui/icons/native";
 import { Button, type ButtonProps } from "@/components/Button";
+import { Loading } from "@/components/Loading";
 import { useToast } from "@/hooks/use-toast";
 import { useThemeColor } from "@/hooks/useThemeColor";
 
-type ToastVariant = "primary" | "secondary" | "success" | "warning" | "error";
+const GRADIENT_VARIANTS = [
+  "green-gradient",
+  "gold-gradient",
+  "silver-gradient",
+  "bronze-gradient",
+] as const;
+
+type ToastGradientVariant = (typeof GRADIENT_VARIANTS)[number];
+
+type ToastSolidVariant =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error";
+
+type ToastVariant = ToastSolidVariant | ToastGradientVariant;
+
 type ToastActionVariant = ToastVariant;
 
 type ToastActionElement = ReactElement<typeof ToastAction>;
@@ -33,55 +69,174 @@ interface ToastProps extends ViewProps {
   duration?: number;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  icon?: ReactNode;
   children?: ReactNode;
 }
 
 interface ToastActionProps extends Omit<ButtonProps, "variant"> {
   variant?: ToastActionVariant;
   altText?: string;
-  onPress?: () => void;
 }
 
-interface ToastCloseProps extends Omit<ViewProps, "children"> {
-  onPress?: () => void;
+interface ToastCloseProps extends Omit<ButtonProps, "variant" | "children"> {
   label?: string;
+  variant?: ToastVariant;
 }
 
+type GradientStyle = {
+  /** Design tokens for LinearGradient color stops (aligned with web/Figma). */
+  colorTokens: [string, string];
+  locations: [number, number];
+  angleDeg: number;
+  textClassName: string;
+  pressedClassName: string;
+  iconToken: string;
+  solidFallbackClassName: string;
+  /** Optional solid layer under the gradient (green uses white underlay on web). */
+  underlayClassName?: string;
+};
+
+/** Podium / green gradient visuals — stops & angles match `@medway-ui/core` Toast. */
+const GRADIENT_STYLES: Record<ToastGradientVariant, GradientStyle> = {
+  "green-gradient": {
+    colorTokens: ["secondary", "secondary-12"],
+    locations: [0.29, 1],
+    angleDeg: 124,
+    textClassName: "text-secondary-darken-4",
+    pressedClassName: "active:bg-black-8",
+    iconToken: "secondary-darken-4",
+    solidFallbackClassName: "bg-secondary",
+    underlayClassName: "bg-white",
+  },
+  "gold-gradient": {
+    // Literal hex from Figma replaced by podium tokens on web (#72)
+    colorTokens: ["gold", "gold-lighten-6"],
+    locations: [0.29, 1],
+    angleDeg: 124,
+    textClassName: "text-gold-foreground-onfill",
+    pressedClassName: "active:bg-black-8",
+    iconToken: "gold-foreground-onfill",
+    solidFallbackClassName: "bg-gold",
+  },
+  "silver-gradient": {
+    colorTokens: ["silver-darken-4", "silver"],
+    locations: [0.05, 1],
+    angleDeg: 100,
+    textClassName: "text-white",
+    pressedClassName: "active:bg-white-16",
+    iconToken: "white",
+    solidFallbackClassName: "bg-silver-darken-4",
+  },
+  "bronze-gradient": {
+    colorTokens: ["bronze-darken-2", "bronze"],
+    locations: [0.02, 1],
+    angleDeg: 100,
+    textClassName: "text-white",
+    pressedClassName: "active:bg-white-16",
+    iconToken: "white",
+    solidFallbackClassName: "bg-bronze",
+  },
+};
+
+type ToastContextValue = {
+  variant: ToastVariant;
+  onOpenChange?: (open: boolean) => void;
+};
+
+const ToastContext = createContext<ToastContextValue>({
+  variant: "primary",
+});
+
+function useToastContext(override?: ToastVariant): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  return {
+    variant: override ?? ctx.variant,
+    onOpenChange: ctx.onOpenChange,
+  };
+}
+
+const isGradientVariant = (v: ToastVariant): v is ToastGradientVariant =>
+  (GRADIENT_VARIANTS as readonly string[]).includes(v);
+
+/** CSS angle (0deg = up, clockwise) → expo-linear-gradient start/end. */
+function cssAngleToPoints(angleDeg: number) {
+  const rad = (angleDeg * Math.PI) / 180;
+  const dx = Math.sin(rad);
+  const dy = -Math.cos(rad);
+  return {
+    start: { x: 0.5 - dx / 2, y: 0.5 - dy / 2 },
+    end: { x: 0.5 + dx / 2, y: 0.5 + dy / 2 },
+  };
+}
+
+const RADIUS_LG_FALLBACK = 16;
+
+function useRadiusLg(): number {
+  const value = useUnstableNativeVariable("--radius-lg");
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return RADIUS_LG_FALLBACK;
+}
+
+/** Mirrors web `toastVariants` solid/gradient chrome (minus Radix animation attrs). */
 const toastVariants = cva(
-  "flex-row items-center gap-3 w-full rounded-md bg-surface-elevated p-3 shadow-lg",
+  "flex-row items-center justify-between gap-4 w-full overflow-hidden shadow-lg",
   {
     variants: {
+      appearance: {
+        solid: "rounded-md bg-surface-elevated p-2 pl-4",
+        gradient: "rounded-lg p-4",
+      },
       variant: {
-        primary: "border-l-4 border-primary-foreground",
-        secondary: "border-l-4 border-secondary-foreground",
-        success: "border-l-4 border-feedback-success-foreground",
-        warning: "border-l-4 border-feedback-warning-foreground",
-        error: "border-l-4 border-feedback-error-foreground",
+        primary: "",
+        secondary: "",
+        success: "",
+        warning: "",
+        error: "",
+        "green-gradient": "",
+        "gold-gradient": "",
+        "silver-gradient": "",
+        "bronze-gradient": "",
       },
     },
-    defaultVariants: { variant: "primary" },
+    defaultVariants: { appearance: "solid", variant: "primary" },
   }
 );
 
-const toastIconVariants = cva("shrink-0", {
-  variants: {
-    variant: {
-      primary: "text-primary-foreground",
-      secondary: "text-secondary-foreground",
-      success: "text-feedback-success-foreground",
-      warning: "text-feedback-warning-foreground",
-      error: "text-feedback-error-foreground",
-    },
-  },
-  defaultVariants: { variant: "primary" },
-});
+/** Solid title/description colors — web inherits from the root; RN Text does not. */
+const toastSolidTextClassName: Record<ToastSolidVariant, string> = {
+  primary: "text-primary-foreground",
+  secondary: "text-secondary-foreground",
+  success: "text-feedback-success-foreground",
+  warning: "text-feedback-warning-foreground",
+  error: "text-feedback-error-foreground",
+};
 
-const toastActionButtonVariantMap: Record<ToastActionVariant, ButtonProps["variant"]> = {
+/** Soft fills for solid icons — approximates web `fill-*-background-soft` on SVG. */
+const toastIconSoftFillClassName: Record<ToastSolidVariant, string> = {
+  primary: "bg-primary-background-soft",
+  secondary: "bg-secondary-background-soft",
+  success: "bg-feedback-success-background-soft",
+  warning: "bg-feedback-warning-background-soft",
+  error: "bg-feedback-error-background-soft",
+};
+
+const toastActionButtonVariantMap: Record<
+  ToastActionVariant,
+  ButtonProps["variant"]
+> = {
   primary: "regular-soft",
   secondary: "emphasis-soft",
   success: "success-soft",
   warning: "warning-soft",
   error: "error-soft",
+  "green-gradient": "regular-basic",
+  "gold-gradient": "regular-basic",
+  "silver-gradient": "regular-basic",
+  "bronze-gradient": "regular-basic",
 };
 
 const toastIconColorTokens: Record<ToastVariant, string> = {
@@ -90,6 +245,10 @@ const toastIconColorTokens: Record<ToastVariant, string> = {
   success: "feedback-success-foreground",
   warning: "feedback-warning-foreground",
   error: "feedback-error-foreground",
+  "green-gradient": GRADIENT_STYLES["green-gradient"].iconToken,
+  "gold-gradient": GRADIENT_STYLES["gold-gradient"].iconToken,
+  "silver-gradient": GRADIENT_STYLES["silver-gradient"].iconToken,
+  "bronze-gradient": GRADIENT_STYLES["bronze-gradient"].iconToken,
 };
 
 const variantIcons = {
@@ -98,61 +257,190 @@ const variantIcons = {
   success: CircleCheck,
   warning: TriangleWarning,
   error: OctagonWarning,
+  "green-gradient": Rocket,
+  "gold-gradient": Rocket,
+  "silver-gradient": Rocket,
+  "bronze-gradient": Rocket,
 } as const;
 
+const ACTION_SIZE_CLASSES: Record<"sm" | "md" | "lg" | "xl", string> = {
+  sm: "min-h-8 min-w-8 px-3 py-1",
+  md: "min-h-10 min-w-10 px-3.5 py-2",
+  lg: "min-h-12 min-w-12 px-4 py-3",
+  xl: "min-h-14 min-w-14 px-[18px] py-3.5",
+};
+
+const ACTION_TEXT_SIZE: Record<"sm" | "md" | "lg" | "xl", string> = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-md",
+  xl: "text-lg",
+};
+
+const DEFAULT_TOAST_DURATION = 5000;
+const TOAST_ENTER_MS = 300;
+const TOAST_EXIT_MS = 400;
+
+function ToastClose({
+  className,
+  onPress,
+  label = "Fechar",
+  variant: variantProp,
+  ...props
+}: ToastCloseProps) {
+  const { variant, onOpenChange } = useToastContext(variantProp);
+  const gradient = isGradientVariant(variant) ? GRADIENT_STYLES[variant] : null;
+  // Web solid close uses `regular-basic` → primary-foreground (not gray).
+  const closeIconColor = useThemeColor(
+    gradient ? gradient.iconToken : "primary-foreground"
+  );
+
+  return (
+    <Button
+      onPress={onPress ?? (() => onOpenChange?.(false))}
+      accessibilityLabel={label}
+      size="sm"
+      variant="regular-basic"
+      iconLeft={
+        closeIconColor ? (
+          <CloseMd width={16} height={16} color={closeIconColor} />
+        ) : undefined
+      }
+      className={cn(
+        "shrink-0",
+        // Match web `gradientActionClassName` (fixed text + pressed bg on gradients).
+        gradient?.textClassName,
+        gradient?.pressedClassName,
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ToastGradientFill({ variant }: { variant: ToastGradientVariant }) {
+  const style = GRADIENT_STYLES[variant];
+  const LinearGradient = loadLinearGradient();
+  const borderRadius = useRadiusLg();
+  const color0 = useThemeColor(style.colorTokens[0]);
+  const color1 = useThemeColor(style.colorTokens[1]);
+  const { start, end } = cssAngleToPoints(style.angleDeg);
+
+  if (!LinearGradient || !color0 || !color1) {
+    return (
+      <View
+        pointerEvents="none"
+        className={style.solidFallbackClassName}
+        style={[StyleSheet.absoluteFill, { borderRadius }]}
+      />
+    );
+  }
+
+  return (
+    <>
+      {style.underlayClassName ? (
+        <View
+          pointerEvents="none"
+          className={style.underlayClassName}
+          style={[StyleSheet.absoluteFill, { borderRadius }]}
+        />
+      ) : null}
+      <LinearGradient
+        colors={[color0, color1]}
+        locations={style.locations}
+        start={start}
+        end={end}
+        pointerEvents="none"
+        style={[StyleSheet.absoluteFill, { borderRadius }]}
+      />
+    </>
+  );
+}
+
+function ToastDefaultIcon({ variant }: { variant: ToastVariant }) {
+  const IconComponent = variantIcons[variant];
+  const iconColor = useThemeColor(toastIconColorTokens[variant]);
+  if (!iconColor) return null;
+
+  const softFill = !isGradientVariant(variant)
+    ? toastIconSoftFillClassName[variant]
+    : null;
+
+  return (
+    <View className="size-6 shrink-0 items-center justify-center">
+      {softFill ? (
+        <View
+          className={cn("absolute h-[18px] w-[18px] rounded-full", softFill)}
+        />
+      ) : null}
+      <IconComponent width={24} height={24} color={iconColor} />
+    </View>
+  );
+}
+
 function ToastItem({
   className,
   variant = "primary",
   showIcon = true,
+  duration = DEFAULT_TOAST_DURATION,
   open = true,
   onOpenChange,
+  icon,
   children,
   ...props
 }: ToastProps) {
   const [visible, setVisible] = useState(open);
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
   const translateY = useSharedValue(open ? 0 : -80);
   const opacity = useSharedValue(open ? 1 : 0);
+  const gradient = isGradientVariant(variant);
 
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: translateY.value }],
     opacity: opacity.value,
   }));
-  const iconColor = useThemeColor(toastIconColorTokens[variant]);
-  const closeIconColor = useThemeColor("gray-foreground");
 
   useEffect(() => {
     if (open) {
       setVisible(true);
-      translateY.value = withTiming(0, { duration: 300 });
-      opacity.value = withTiming(1, { duration: 300 });
+      translateY.value = withTiming(0, { duration: TOAST_ENTER_MS });
+      opacity.value = withTiming(1, { duration: TOAST_ENTER_MS });
     } else {
-      translateY.value = withDelay(50, withTiming(-80, { duration: 200 }));
-      opacity.value = withTiming(0, { duration: 200 }, (finished) => {
+      translateY.value = withTiming(-80, { duration: TOAST_EXIT_MS });
+      opacity.value = withTiming(0, { duration: TOAST_EXIT_MS }, (finished) => {
         if (finished) runOnJS(setVisible)(false);
       });
     }
   }, [open]);
 
+  useEffect(() => {
+    if (!open || !Number.isFinite(duration) || duration <= 0) return;
+
+    const timeout = setTimeout(() => onOpenChangeRef.current?.(false), duration);
+    return () => clearTimeout(timeout);
+  }, [open, duration]);
+
   if (!visible) return null;
 
-  const IconComponent = variantIcons[variant];
+  const resolvedIcon = icon ?? <ToastDefaultIcon variant={variant} />;
+  const appearance = gradient ? "gradient" : "solid";
+  const containerClassName = cn(
+    toastVariants({ appearance, variant }),
+    className
+  );
 
   return (
     <Animated.View style={animatedStyle}>
-      <View className={cn(toastVariants({ variant }), className)} {...props}>
-        {showIcon && iconColor && (
-          <IconComponent width={20} height={20} color={iconColor} />
-        )}
-        <View className="flex-1 flex-row items-center justify-between gap-3">
-          {children}
+      <ToastContext.Provider value={{ variant, onOpenChange }}>
+        <View className={containerClassName} {...props}>
+          {gradient ? <ToastGradientFill variant={variant} /> : null}
+          {showIcon && resolvedIcon}
+          <View className="min-w-0 flex-1 flex-row items-center justify-between gap-4">
+            {children}
+          </View>
         </View>
-        <Pressable
-          onPress={() => onOpenChange?.(false)}
-          className="rounded-pill p-1 active:bg-gray-background-soft"
-        >
-          {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
-        </Pressable>
-      </View>
+      </ToastContext.Provider>
     </Animated.View>
   );
 }
@@ -163,6 +451,7 @@ function Toast({
   duration,
   open,
   onOpenChange,
+  icon,
   children,
   ...props
 }: ToastProps) {
@@ -173,6 +462,7 @@ function Toast({
       duration={duration}
       open={open}
       onOpenChange={onOpenChange}
+      icon={icon}
       {...props}
     >
       {children}
@@ -182,17 +472,73 @@ function Toast({
 
 function ToastAction({
   className,
-  variant = "primary",
+  variant: variantProp,
   size = "sm",
-  altText,
+  altText = "Toast action",
   children,
+  loading,
+  iconLeft,
+  iconRight,
+  disabled,
+  containerStyle: _containerStyle,
+  badge: _badge,
+  alert: _alert,
   ...props
 }: ToastActionProps) {
+  const { variant } = useToastContext(variantProp);
+  const resolvedSize = size ?? "sm";
+
+  if (isGradientVariant(variant)) {
+    const gradient = GRADIENT_STYLES[variant];
+    const isDisabled = Boolean(disabled || loading);
+
+    return (
+      <Pressable
+        accessibilityLabel={altText}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: isDisabled, busy: Boolean(loading) }}
+        disabled={isDisabled}
+        className={cn(
+          "flex-row items-center justify-center gap-2 rounded-pill",
+          ACTION_SIZE_CLASSES[resolvedSize],
+          gradient.pressedClassName,
+          className
+        )}
+        {...props}
+      >
+        {loading ? (
+          <Loading size={resolvedSize === "sm" ? 16 : 20} />
+        ) : (
+          <>
+            {iconLeft}
+            {children != null && (
+              <Text
+                className={cn(
+                  "font-semibold shrink-0",
+                  ACTION_TEXT_SIZE[resolvedSize],
+                  gradient.textClassName
+                )}
+              >
+                {children as ReactNode}
+              </Text>
+            )}
+            {iconRight}
+          </>
+        )}
+      </Pressable>
+    );
+  }
+
   return (
     <Button
       size={size}
       variant={toastActionButtonVariantMap[variant]}
       className={cn(className)}
+      loading={loading}
+      iconLeft={iconLeft}
+      iconRight={iconRight}
+      disabled={disabled}
+      accessibilityLabel={altText}
       {...props}
     >
       {children as ReactNode}
@@ -200,27 +546,53 @@ function ToastAction({
   );
 }
 
-function ToastTitle({ className, children }: ViewProps & { children?: ReactNode }) {
+function ToastTitle({
+  className,
+  children,
+}: ViewProps & { children?: ReactNode }) {
+  const { variant } = useToastContext();
+  const textClassName = isGradientVariant(variant)
+    ? GRADIENT_STYLES[variant].textClassName
+    : toastSolidTextClassName[variant];
+
   return (
-    <Text className={cn("text-md font-medium text-content-title flex-1", className)}>
+    <Text
+      className={cn("text-md font-semibold flex-1", textClassName, className)}
+    >
       {children}
     </Text>
   );
 }
 
-function ToastDescription({ className, children }: ViewProps & { children?: ReactNode }) {
+function ToastDescription({
+  className,
+  children,
+}: ViewProps & { children?: ReactNode }) {
+  const { variant } = useToastContext();
+  const textClassName = isGradientVariant(variant)
+    ? GRADIENT_STYLES[variant].textClassName
+    : toastSolidTextClassName[variant];
+
   return (
-    <Text className={cn("text-xs text-content-paragraph", className)}>
+    <Text className={cn("text-xs font-medium", textClassName, className)}>
       {children}
     </Text>
   );
 }
 
-function ToastViewport({ className, children, ...props }: ViewProps & { children?: ReactNode }) {
+const TOAST_VIEWPORT_EXTRA_TOP_GAP = 8;
+/** Matches previous `pt-12` (48) when SafeAreaProvider is absent: 40 + 8. */
+const TOAST_VIEWPORT_FALLBACK_TOP = 40;
+
+function ToastViewport({
+  className,
+  children,
+  ...props
+}: ViewProps & { children?: ReactNode }) {
   return (
     <View
       pointerEvents="box-none"
-      className={cn("absolute top-0 left-0 right-0 z-50 px-4 pt-12 gap-2", className)}
+      className={cn("absolute top-0 left-0 right-0 z-50 px-4 gap-2", className)}
       {...props}
     >
       {children}
@@ -228,41 +600,62 @@ function ToastViewport({ className, children, ...props }: ViewProps & { children
   );
 }
 
-function ToastClose({ className, onPress, label = "Close", ...props }: ToastCloseProps) {
-  const closeIconColor = useThemeColor("gray-foreground");
-
-  return (
-    <Pressable
-      onPress={onPress}
-      accessibilityLabel={label}
-      className={cn("rounded-pill p-1 active:bg-gray-background-soft", className)}
-      {...props}
-    >
-      {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
-    </Pressable>
-  );
-}
+type ToastProviderProps = {
+  /** Extra gap below the top safe-area inset (default: 8). */
+  topOffset?: number;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+};
 
-function ToastProvider() {
+function ToastProvider({
+  topOffset = TOAST_VIEWPORT_EXTRA_TOP_GAP,
+  style,
+  className,
+}: ToastProviderProps = {}) {
   const { toasts, dismiss } = useToast();
+  // Soft read: does not throw without SafeAreaProvider (keeps prior pt-12 fallback).
+  const insets = useContext(SafeAreaInsetsContext);
+  const paddingTop = (insets?.top ?? TOAST_VIEWPORT_FALLBACK_TOP) + topOffset;
 
   return (
-    <ToastViewport>
-      {toasts.map(({ id, title, description, action, open = true, variant, showIcon }) => (
-        <Toast
-          key={id}
-          variant={variant}
-          showIcon={showIcon}
-          open={open}
-          onOpenChange={(isOpen) => !isOpen && dismiss(id)}
-        >
-          <View className="flex-col gap-0.5">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </View>
-          {action}
-        </Toast>
-      ))}
+    <ToastViewport
+      className={className}
+      style={[{ paddingTop }, style]}
+    >
+      {toasts.map(
+        ({
+          id,
+          title,
+          description,
+          action,
+          open = true,
+          variant = "primary",
+          showIcon,
+          icon,
+          duration,
+        }) => (
+          <Toast
+            key={id}
+            variant={variant}
+            showIcon={showIcon}
+            icon={icon}
+            duration={duration}
+            open={open}
+            onOpenChange={(isOpen) => !isOpen && dismiss(id)}
+          >
+            <View className="min-w-0 flex-1 flex-col">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </View>
+            <View className="flex-row items-center gap-2">
+              {action}
+              <ToastClose variant={variant} />
+            </View>
+          </Toast>
+        )
+      )}
     </ToastViewport>
   );
 }
@@ -277,4 +670,13 @@ export {
   ToastViewport,
   toastVariants,
 };
-export type { ToastActionElement, ToastProps };
+export type {
+  ToastActionElement,
+  ToastActionProps,
+  ToastActionVariant,
+  ToastCloseProps,
+  ToastGradientVariant,
+  ToastProps,
+  ToastProviderProps,
+  ToastVariant,
+};