@medway-ui/native 1.4.0 → 1.6.0

package/src/components/LoadingOverlay.tsx

@@ -0,0 +1,308 @@
+import { useEffect, type ReactNode } from "react";
+import { Modal, View, type ModalProps, type ViewProps } from "react-native";
+import Svg, { Circle } from "react-native-svg";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+
+import { Text } from "@/components/Text";
+import { useThemeColor, type ThemeColorToken } from "@/hooks/useThemeColor";
+import { cn } from "@/lib/utils";
+
+interface LoadingOverlaySpinnerProps {
+  /** Icon rendered at the center of the ring, e.g. `<ThemedIcon icon={Brain} />`. */
+  icon?: ReactNode;
+  /** Ring diameter in px. Defaults to 72. */
+  size?: number;
+  /** Ring stroke width in px. Defaults to 2. */
+  trackWidth?: number;
+  /** Theme token for the spinning arc. Defaults to `gray-stroke-muted`. */
+  colorToken?: ThemeColorToken;
+  /** Explicit arc color. Takes precedence over `colorToken`. */
+  color?: string;
+  /** Theme token for the track behind the arc. The track is hidden when omitted. */
+  trackColorToken?: ThemeColorToken;
+  /** Pulses the center icon opacity. Defaults to true. */
+  pulse?: boolean;
+}
+
+interface LoadingOverlayCardProps
+  extends LoadingOverlaySpinnerProps,
+    Omit<ViewProps, "children"> {
+  /** Main label. Defaults to "Carregando..."; pass `null` or `""` to hide it. */
+  text?: ReactNode;
+  /** Secondary text rendered below the label. */
+  description?: ReactNode;
+  /** Extra content below the texts, e.g. a cancel button. */
+  children?: ReactNode;
+  textClassName?: string;
+  descriptionClassName?: string;
+}
+
+interface LoadingOverlayProps extends LoadingOverlayCardProps {
+  /** Controls the overlay visibility. Defaults to true. */
+  visible?: boolean;
+  /** Called on the Android back button. Defaults to a no-op, so the overlay blocks dismissal. */
+  onRequestClose?: ModalProps["onRequestClose"];
+  /** Theme token for the backdrop color. Defaults to `backdrop`. */
+  overlayColorToken?: ThemeColorToken;
+  /** Extra classes for the backdrop. Use `overlayColorToken` to change its color. */
+  overlayClassName?: string;
+  /** Extra classes for the wrapper that constrains the card width (`w-[90%] max-w-[320px]`). */
+  containerClassName?: string;
+  /** Props forwarded to the React Native `Modal`. */
+  modalProps?: Omit<ModalProps, "visible" | "onRequestClose" | "children">;
+}
+
+/** Rendered only when a track token is set, so the default case skips the color lookup. */
+function SpinnerTrack({
+  size,
+  radius,
+  strokeWidth,
+  colorToken,
+}: {
+  size: number;
+  radius: number;
+  strokeWidth: number;
+  colorToken: ThemeColorToken;
+}) {
+  const color = useThemeColor(colorToken);
+
+  return (
+    <Circle
+      cx={size / 2}
+      cy={size / 2}
+      r={radius}
+      stroke={color}
+      strokeWidth={strokeWidth}
+      fill="none"
+    />
+  );
+}
+
+function LoadingOverlaySpinner({
+  icon,
+  size = 72,
+  trackWidth = 2,
+  colorToken = "gray-stroke-muted",
+  color,
+  trackColorToken,
+  pulse = true,
+}: LoadingOverlaySpinnerProps) {
+  const themeColor = useThemeColor(colorToken);
+  const stroke = color ?? themeColor;
+  const hasIcon = Boolean(icon);
+
+  const rotation = useSharedValue(0);
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 1000, easing: Easing.linear }),
+      -1,
+      false
+    );
+    return () => cancelAnimation(rotation);
+  }, [rotation]);
+
+  useEffect(() => {
+    // Nothing to pulse without an icon; skip the infinite loop on the UI thread.
+    if (!pulse || !hasIcon) {
+      opacity.value = 1;
+      return;
+    }
+    opacity.value = 0.4;
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: 400 }),
+        withTiming(0.4, { duration: 400 })
+      ),
+      -1,
+      false
+    );
+    return () => cancelAnimation(opacity);
+  }, [opacity, pulse, hasIcon]);
+
+  const ringStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  const iconStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  const radius = (size - trackWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  return (
+    <View
+      className="items-center justify-center"
+      style={{ width: size, height: size }}
+    >
+      <Animated.View style={[{ position: "absolute" }, ringStyle]}>
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          {trackColorToken ? (
+            <SpinnerTrack
+              size={size}
+              radius={radius}
+              strokeWidth={trackWidth}
+              colorToken={trackColorToken}
+            />
+          ) : null}
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={stroke}
+            strokeWidth={trackWidth}
+            strokeLinecap="round"
+            strokeDasharray={`${circumference * 0.75} ${circumference}`}
+            fill="none"
+          />
+        </Svg>
+      </Animated.View>
+
+      {icon ? <Animated.View style={iconStyle}>{icon}</Animated.View> : null}
+    </View>
+  );
+}
+
+const DEFAULT_ACCESSIBILITY_LABEL = "Carregando";
+
+/** Builds the progressbar label from the string parts of `text` and `description`. */
+function getAccessibilityLabel(text: ReactNode, description: ReactNode): string {
+  const parts = [text, description].filter(
+    (part): part is string => typeof part === "string" && part.length > 0
+  );
+  return parts.length > 0 ? parts.join(". ") : DEFAULT_ACCESSIBILITY_LABEL;
+}
+
+function LoadingOverlayCard({
+  icon,
+  size,
+  trackWidth,
+  colorToken,
+  color,
+  trackColorToken,
+  pulse,
+  text = "Carregando...",
+  description,
+  children,
+  className,
+  textClassName,
+  descriptionClassName,
+  accessibilityLabel,
+  ...props
+}: LoadingOverlayCardProps) {
+  return (
+    <View
+      className={cn(
+        "w-full min-h-[230px] items-center justify-center gap-6 rounded-xl bg-surface-card p-10",
+        className
+      )}
+      {...props}
+    >
+      {/* Role and live region wrap only the spinner + texts, so `children` (e.g. a
+          cancel button) stay focusable and aren't re-announced by TalkBack. */}
+      <View
+        accessible
+        accessibilityRole="progressbar"
+        accessibilityLabel={
+          accessibilityLabel ?? getAccessibilityLabel(text, description)
+        }
+        accessibilityState={{ busy: true }}
+        accessibilityLiveRegion="polite"
+        className="w-full items-center gap-6"
+      >
+        <LoadingOverlaySpinner
+          icon={icon}
+          size={size}
+          trackWidth={trackWidth}
+          colorToken={colorToken}
+          color={color}
+          trackColorToken={trackColorToken}
+          pulse={pulse}
+        />
+
+        {text || description ? (
+          <View className="w-full items-center gap-2">
+            {text ? (
+              <Text
+                className={cn(
+                  "text-center text-sm font-semibold text-content-title",
+                  textClassName
+                )}
+              >
+                {text}
+              </Text>
+            ) : null}
+            {description ? (
+              <Text
+                className={cn(
+                  "text-center text-sm font-medium text-content-paragraph",
+                  descriptionClassName
+                )}
+              >
+                {description}
+              </Text>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+
+      {children ? <View className="w-full">{children}</View> : null}
+    </View>
+  );
+}
+
+const noop = () => {};
+
+function LoadingOverlay({
+  visible = true,
+  onRequestClose = noop,
+  overlayColorToken = "backdrop",
+  overlayClassName,
+  containerClassName,
+  modalProps,
+  ...cardProps
+}: LoadingOverlayProps) {
+  // Inline style: `bg-backdrop` depends on the consumer's Tailwind config having
+  // the token, which older `@medway-ui/core` versions don't ship.
+  const backdropColor = useThemeColor(overlayColorToken);
+
+  return (
+    <Modal
+      transparent
+      statusBarTranslucent
+      animationType="fade"
+      {...modalProps}
+      visible={visible}
+      onRequestClose={onRequestClose}
+    >
+      <View
+        className={cn(
+          "flex-1 items-center justify-center",
+          overlayClassName
+        )}
+        style={{ backgroundColor: backdropColor }}
+      >
+        <View className={cn("w-[90%] max-w-[320px]", containerClassName)}>
+          <LoadingOverlayCard {...cardProps} />
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+export { LoadingOverlay, LoadingOverlayCard, LoadingOverlaySpinner };
+export type {
+  LoadingOverlayCardProps,
+  LoadingOverlayProps,
+  LoadingOverlaySpinnerProps,
+};

package/src/components/Tooltip.tsx

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import { StyleSheet } from "react-native";
 
 import { Text } from "@/components/Text";
 import * as TooltipPrimitive from "@rn-primitives/tooltip";
@@ -28,7 +29,7 @@ function TooltipContent({
 }: TooltipContentProps) {
   return (
     <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Overlay className="absolute inset-0" />
+      <TooltipPrimitive.Overlay style={StyleSheet.absoluteFill} />
       <TooltipPrimitive.Content
         sideOffset={sideOffset}
         className={cn(

package/src/hooks/useThemeColor.ts

@@ -25,6 +25,9 @@ const LIGHT_COLOR_ALIAS_MAP: Record<string, string> = {
   'prev-background-fill': 'prev',
   'red-foreground': 'red-darken-2',
   'go-foreground': 'go-darken-1',
+  // Not a real CSS var: `--color-backdrop` resolves directly, this alias only
+  // keys the static fallback below (keep in sync with tokens.native.css).
+  backdrop: 'backdrop-light',
 };
 
 /** Fallback — dark mode (espelha tokens.css `.dark`). */
@@ -49,6 +52,8 @@ const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
   'prev-background-fill': 'prev',
   'red-foreground': 'red-lighten-3',
   'go-foreground': 'go-lighten-5',
+  // Fallback key only, see LIGHT_COLOR_ALIAS_MAP.
+  backdrop: 'backdrop-dark',
 };
 
 /** Fallback estático quando NativeWind não resolve `var(--color-*)` encadeado. */
@@ -77,6 +82,8 @@ const THEME_COLOR_FALLBACKS: Record<string, string> = {
   'secondary-darken-1': 'rgba(7, 171, 149, 1)',
   'secondary-darken-3': 'rgba(13, 104, 92, 1)',
   'secondary-lighten-1': 'rgba(22, 208, 118, 1)',
+  'backdrop-light': 'rgba(16, 19, 24, 0.3)',
+  'backdrop-dark': 'rgba(16, 19, 24, 0.5)',
 };
 
 const DEFAULT_COLOR = '#3B4958';

package/src/index.ts

@@ -243,6 +243,18 @@ export type { LabelProps } from "@/components/Label";
 export { Loading } from "@/components/Loading";
 export type { LoadingProps } from "@/components/Loading";
 
+// LoadingOverlay
+export {
+  LoadingOverlay,
+  LoadingOverlayCard,
+  LoadingOverlaySpinner,
+} from "@/components/LoadingOverlay";
+export type {
+  LoadingOverlayCardProps,
+  LoadingOverlayProps,
+  LoadingOverlaySpinnerProps,
+} from "@/components/LoadingOverlay";
+
 // Skeleton
 export { Skeleton } from "@/components/Skeleton";
 export type { SkeletonProps } from "@/components/Skeleton";