@medway-ui/native 1.9.2 → 1.10.0

package/setup/tokens.native.css

@@ -387,6 +387,7 @@
   --color-state-focus: var(--color-gray-70);
   --color-state-active: var(--color-primary-16);
   --color-state-error: var(--color-red-16);
+  --color-state-success: var(--color-green-16);
 
   /* === Base feedback success colors === */
   --color-feedback-success-foreground: var(--color-green-darken-3);
@@ -628,25 +629,39 @@
   --color-gradient-prev-bg-2: var(--color-gray-10);
 
   /* === Base gradient r1 === */
-  --color-gradient-r1-blur-1: var(--color-secondary);
-  --color-gradient-r1-blur-2: var(--color-primary-lighten-3);
+  --color-gradient-r1-blur-1: var(--color-secondary-lighten-1);
+  --color-gradient-r1-blur-2: var(--color-cm);
   --color-gradient-r1-blur-3: var(--color-primary-lighten-5);
-  --color-gradient-r1-bg-1: var(--color-primary);
-  --color-gradient-r1-bg-2: var(--color-primary-lighten-1);
+  --color-gradient-r1-bg-1: var(--color-primary-lighten-2);
+  --color-gradient-r1-bg-2: var(--color-primary-lighten-6);
 
   /* === Base gradient rplus === */
-  --color-gradient-rplus-blur-1: var(--color-primary-lighten-1);
+  --color-gradient-rplus-blur-1: var(--color-prev);
   --color-gradient-rplus-blur-2: var(--color-primary-lighten-3);
   --color-gradient-rplus-blur-3: var(--color-primary-lighten-5);
-  --color-gradient-rplus-bg-1: var(--color-primary-lighten-1);
-  --color-gradient-rplus-bg-2: var(--color-primary);
+  --color-gradient-rplus-bg-1: var(--color-primary-lighten-4);
+  --color-gradient-rplus-bg-2: var(--color-prev-lighten-3);
 
   /* === Base gradient pt === */
-  --color-gradient-pt-blur-1: var(--color-secondary);
-  --color-gradient-pt-blur-2: var(--color-secondary-darken-2);
-  --color-gradient-pt-blur-3: var(--color-secondary-darken-4);
+  --color-gradient-pt-blur-1: var(--color-cir);
+  --color-gradient-pt-blur-2: var(--color-secondary-darken-1);
+  --color-gradient-pt-blur-3: var(--color-secondary-darken-2);
   --color-gradient-pt-bg-1: var(--color-gray-600);
-  --color-gradient-pt-bg-2: var(--color-gray-450);
+  --color-gradient-pt-bg-2: var(--color-gray-300);
+
+  /* === Base gradient default === */
+  --color-gradient-default-blur-1: var(--color-gray-10);
+  --color-gradient-default-blur-2: var(--color-secondary-lighten-5);
+  --color-gradient-default-blur-3: var(--color-primary-lighten-6);
+  --color-gradient-default-bg-1: var(--color-gray-150);
+  --color-gradient-default-bg-2: var(--color-gray-50);
+
+  /* === Base gradient neutral === */
+  --color-gradient-neutral-blur-1: var(--color-white);
+  --color-gradient-neutral-blur-2: var(--color-gray-70);
+  --color-gradient-neutral-blur-3: var(--color-gray-150);
+  --color-gradient-neutral-bg-1: var(--color-gray-50);
+  --color-gradient-neutral-bg-2: var(--color-gray-30);
 
   /* === Typography fontfamily === */
   /* RN: single family name (loaded via expo-font as "Montserrat"). */
@@ -662,7 +677,7 @@
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
-  --font-weight-extrabold: 900;
+  --font-weight-extrabold: 800;
 
   /* === Typography size === */
   --text-xxs: 10px;
@@ -702,6 +717,7 @@
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 16px;
+  --radius-xl: 32px;
   --radius-pill: 320px;
   --radius-circular: 1600px;
   --radius-full: 9999px;
@@ -745,6 +761,7 @@
     --color-state-focus: var(--color-gray-700);
     --color-state-active: var(--color-white-16);
     --color-state-error: var(--color-red-16);
+    --color-state-success: var(--color-green-16);
 
     /* === Base feedback success colors === */
     --color-feedback-success-foreground: var(--color-green-lighten-4);
@@ -794,7 +811,7 @@
     /* === Dark surface colors === */
     --color-surface-elevated: var(--color-gray-800);
     --color-surface-card: var(--color-gray-850);
-    --color-surface-navigation: var(--color-gray-850);
+    --color-surface-navigation: var(--color-gray-900);
     --color-surface-section: var(--color-gray-850);
     --color-surface-page: var(--color-gray-950);
     --color-surface-disable: var(--color-black-8);
@@ -1000,23 +1017,37 @@
 
     /* === Dark gradient r1 === */
     --color-gradient-r1-blur-1: var(--color-secondary);
-    --color-gradient-r1-blur-2: var(--color-primary-lighten-1);
+    --color-gradient-r1-blur-2: var(--color-primary-lighten-2);
     --color-gradient-r1-blur-3: var(--color-primary-lighten-2);
     --color-gradient-r1-bg-1: var(--color-primary);
-    --color-gradient-r1-bg-2: var(--color-primary-darken-2);
+    --color-gradient-r1-bg-2: var(--color-primary-darken-1);
 
     /* === Dark gradient rplus === */
-    --color-gradient-rplus-blur-1: var(--color-primary-lighten-5);
+    --color-gradient-rplus-blur-1: var(--color-prev-darken-1);
     --color-gradient-rplus-blur-2: var(--color-primary-lighten-3);
     --color-gradient-rplus-blur-3: var(--color-primary-lighten-1);
     --color-gradient-rplus-bg-1: var(--color-primary);
-    --color-gradient-rplus-bg-2: var(--color-primary-darken-2);
+    --color-gradient-rplus-bg-2: var(--color-prev-darken-6);
 
     /* === Dark gradient pt === */
-    --color-gradient-pt-blur-1: var(--color-secondary);
-    --color-gradient-pt-blur-2: var(--color-secondary-darken-1);
-    --color-gradient-pt-blur-3: var(--color-secondary-darken-3);
+    --color-gradient-pt-blur-1: var(--color-cir-darken-1);
+    --color-gradient-pt-blur-2: var(--color-secondary-darken-2);
+    --color-gradient-pt-blur-3: var(--color-secondary-darken-4);
     --color-gradient-pt-bg-1: var(--color-gray-800);
     --color-gradient-pt-bg-2: var(--color-gray-900);
+
+    /* === Dark gradient default === */
+    --color-gradient-default-blur-1: var(--color-primary-lighten-1);
+    --color-gradient-default-blur-2: var(--color-secondary-lighten-2);
+    --color-gradient-default-blur-3: var(--color-primary-lighten-3);
+    --color-gradient-default-bg-1: var(--color-gray-850);
+    --color-gradient-default-bg-2: var(--color-gray-900);
+
+    /* === Dark gradient neutral === */
+    --color-gradient-neutral-blur-1: var(--color-gray-900);
+    --color-gradient-neutral-blur-2: var(--color-gray-850);
+    --color-gradient-neutral-blur-3: var(--color-gray-800);
+    --color-gradient-neutral-bg-1: var(--color-gray-850);
+    --color-gradient-neutral-bg-2: var(--color-gray-950);
   }
 }

package/src/components/Alert.tsx

@@ -29,15 +29,17 @@ const AlertContext = createContext<{
   onClose?: () => void;
 } | null>(null);
 
+const alertBackgroundClassName: Record<AlertVariant, string> = {
+  regular: "bg-primary-background-soft",
+  emphasis: "bg-secondary-background-soft",
+  success: "bg-feedback-success-background-soft",
+  warning: "bg-feedback-warning-background-soft",
+  error: "bg-feedback-error-background-soft",
+};
+
 const alertVariants = cva("relative w-full rounded-md px-4 py-3 flex-col gap-1", {
   variants: {
-    variant: {
-      regular: "bg-primary-background-soft",
-      emphasis: "bg-secondary-background-soft",
-      success: "bg-green-background-soft",
-      warning: "bg-yellow-background-soft",
-      error: "bg-red-background-soft",
-    },
+    variant: alertBackgroundClassName,
   },
   defaultVariants: { variant: "regular" },
 });
@@ -47,30 +49,45 @@ const alertTextColorVariants = cva("", {
     variant: {
       regular: "text-primary-foreground",
       emphasis: "text-secondary-foreground",
-      success: "text-green-foreground",
-      warning: "text-yellow-foreground",
-      error: "text-red-foreground",
+      success: "text-feedback-success-foreground",
+      warning: "text-feedback-warning-foreground",
+      error: "text-feedback-error-foreground",
     },
   },
   defaultVariants: { variant: "regular" },
 });
 
+const alertDescriptionColorClassName: Record<AlertVariant, string> = {
+  regular: "text-primary-foreground-emphasis",
+  emphasis: "text-secondary-foreground-emphasis",
+  success: "text-feedback-success-foreground-emphasis",
+  warning: "text-feedback-warning-foreground-emphasis",
+  error: "text-feedback-error-foreground-emphasis",
+};
+
 const alertButtonVariants = cva(
-  "flex-row items-center justify-center rounded-pill px-3 min-h-10",
+  "flex-row items-center justify-center rounded-pill px-3 min-h-10 disabled:opacity-50",
   {
     variants: {
       variant: {
         regular: "",
-        basic: "bg-transparent",
+        basic: "",
       },
       alertVariant: {
-        regular: "bg-primary-background-soft",
-        emphasis: "bg-secondary-background-soft",
-        success: "bg-green-background-soft",
-        warning: "bg-yellow-background-soft",
-        error: "bg-red-background-soft",
+        regular: "active:bg-primary-background-soft-emphasis",
+        emphasis: "active:bg-secondary-background-soft-emphasis",
+        success: "active:bg-feedback-success-background-soft-emphasis",
+        warning: "active:bg-feedback-warning-background-soft-emphasis",
+        error: "active:bg-feedback-error-background-soft-emphasis",
       },
     },
+    compoundVariants: (Object.keys(alertBackgroundClassName) as AlertVariant[]).map(
+      (alertVariant) => ({
+        variant: "regular" as const,
+        alertVariant,
+        className: alertBackgroundClassName[alertVariant],
+      })
+    ),
     defaultVariants: { variant: "regular", alertVariant: "regular" },
   }
 );
@@ -89,7 +106,7 @@ function Alert({ className, variant = "regular", onClose, children, ...props }:
     <AlertContext.Provider value={ctx}>
       <View
         accessibilityRole="alert"
-        className={cn(alertVariants({ variant }), className)}
+        className={cn(alertVariants({ variant }), onClose && "pr-12", className)}
         {...props}
       >
         {children}
@@ -131,7 +148,7 @@ function AlertTitle({ className, children, ...props }: ViewProps & { children?:
     <View className={cn("", className)} {...props}>
       <Text
         numberOfLines={1}
-        className={cn("text-md font-medium", alertTextColorVariants({ variant }))}
+        className={cn("text-md font-semibold", alertTextColorVariants({ variant }))}
       >
         {children}
       </Text>
@@ -145,7 +162,7 @@ function AlertDescription({ className, children, ...props }: ViewProps & { child
     <View className={cn("", className)} {...props}>
       <Text
         numberOfLines={3}
-        className={cn("text-sm font-medium leading-5", alertTextColorVariants({ variant }))}
+        className={cn("text-sm font-medium leading-sm", alertDescriptionColorClassName[variant])}
       >
         {children}
       </Text>

package/src/components/AlertDialog.tsx

@@ -1,10 +1,12 @@
 import { createContext, useContext, useMemo, type ReactNode } from "react";
-import { View, Text, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
 import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
 import { cva } from "class-variance-authority";
 import { CloseMd } from "@medway-ui/icons/native";
 import { useThemeColor } from "@/hooks/useThemeColor";
+import { useBackdropStyle } from "@/lib/backdrop";
 import { cn } from "@/lib/utils";
+import { Text } from "@/components/Text";
 import { Button, type ButtonProps } from "@/components/Button";
 import { Tag, type TagProps } from "@/components/Tag";
 
@@ -66,9 +68,9 @@ const alertDialogIconContainerVariants = cva(
       variant: {
         regular: "bg-primary-background-fill",
         emphasis: "bg-secondary-background-fill",
-        warning: "bg-yellow-background-fill",
-        error: "bg-red-background-fill",
-        success: "bg-green-background-fill",
+        warning: "bg-feedback-warning-background-fill",
+        error: "bg-feedback-error-background-fill",
+        success: "bg-feedback-success-background-fill",
       },
     },
     defaultVariants: { variant: DEFAULT_VARIANT },
@@ -80,9 +82,9 @@ const alertDialogIconTextVariants = cva("", {
     variant: {
       regular: "text-primary-foreground-onfill",
       emphasis: "text-secondary-foreground-onfill",
-      warning: "text-yellow-foreground-onfill",
-      error: "text-red-foreground-onfill",
-      success: "text-green-foreground-onfill",
+      warning: "text-feedback-warning-foreground-onfill",
+      error: "text-feedback-error-foreground-onfill",
+      success: "text-feedback-success-foreground-onfill",
     },
   },
   defaultVariants: { variant: DEFAULT_VARIANT },
@@ -96,14 +98,6 @@ const alertDialogTagVariantMap: Record<AlertDialogVariant, TagProps["variant"]>
   success: "success-soft",
 };
 
-const actionVariantMap: Record<AlertDialogVariant, NonNullable<ButtonProps["variant"]>> = {
-  regular: "regular",
-  emphasis: "emphasis",
-  warning: "warning",
-  error: "error",
-  success: "success",
-};
-
 function AlertDialog({ variant = DEFAULT_VARIANT, ...props }: AlertDialogProps) {
   const ctx = useMemo(() => ({ variant }), [variant]);
   return (
@@ -122,9 +116,12 @@ function AlertDialogPortal({ ...props }: AlertDialogPrimitive.PortalProps) {
 }
 
 function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.OverlayProps) {
+  const backdropStyle = useBackdropStyle(className);
+
   return (
     <AlertDialogPrimitive.Overlay
-      className={cn("absolute inset-0 bg-black-48", className)}
+      className={cn("absolute inset-0", className)}
+      style={backdropStyle}
       {...props}
     />
   );
@@ -138,11 +135,13 @@ function AlertDialogContent({
   ...props
 }: AlertDialogContentProps) {
   const closeIconColor = useThemeColor("gray-foreground");
+  const backdropStyle = useBackdropStyle(overlayClassName);
 
   return (
     <AlertDialogPrimitive.Portal>
       <AlertDialogPrimitive.Overlay
-        className={cn("absolute inset-0 bg-black-48", overlayClassName)}
+        className={cn("absolute inset-0", overlayClassName)}
+        style={backdropStyle}
       />
       <AlertDialogPrimitive.Content
         className="absolute inset-0 items-center justify-center px-4"
@@ -150,7 +149,7 @@ function AlertDialogContent({
       >
         <View
           className={cn(
-            "relative flex-col w-full rounded-xl bg-background shadow-lg overflow-hidden",
+            "relative flex-col w-full rounded-lg bg-surface-elevated shadow-lg overflow-hidden",
             className
           )}
         >
@@ -247,7 +246,7 @@ function AlertDialogAction({
 }: AlertDialogActionProps) {
   const ctx = useContext(AlertDialogContext);
   const primitiveCtx = AlertDialogPrimitive.useRootContext();
-  const resolvedVariant = variant ?? actionVariantMap[ctx?.variant ?? DEFAULT_VARIANT];
+  const resolvedVariant = variant ?? ctx?.variant ?? DEFAULT_VARIANT;
 
   return (
     <View className={cn("flex-1", className)}>

package/src/components/Badge.tsx

@@ -57,13 +57,13 @@ const badgeVariants = cva("flex-row items-center justify-center rounded-pill", {
       cir: "bg-cir-background-fill",
       "cir-soft": "bg-surface-card",
       // The design paints pediatrics with the warning tokens, all but the filled label.
-      ped: "bg-yellow-background-fill",
+      ped: "bg-feedback-warning-background-fill",
       "ped-soft": "bg-surface-card",
       prev: "bg-prev-background-fill",
       "prev-soft": "bg-surface-card",
       freemium: "bg-primary",
-      error: "bg-red-background-soft",
-      warning: "bg-yellow-background-soft",
+      error: "bg-feedback-error-background-soft",
+      warning: "bg-feedback-warning-background-soft",
       neutral: "bg-gray-background-soft",
     },
     size: {
@@ -93,7 +93,7 @@ const SOFT_TINT: Partial<Record<BadgeVariant, string>> = {
   "cm-soft": "bg-cm-background-soft",
   "go-soft": "bg-go-background-soft",
   "cir-soft": "bg-cir-background-soft",
-  "ped-soft": "bg-yellow-background-soft",
+  "ped-soft": "bg-feedback-warning-background-soft",
   "prev-soft": "bg-prev-background-soft",
 };
 
@@ -112,13 +112,13 @@ const badgeTextVariants = cva("font-bold", {
       cir: "text-cir-foreground-onfill",
       "cir-soft": "text-cir-foreground",
       ped: "text-ped-foreground-onfill",
-      "ped-soft": "text-yellow-foreground",
+      "ped-soft": "text-feedback-warning-foreground",
       prev: "text-prev-foreground-onfill",
       "prev-soft": "text-prev-foreground",
       // White, not the design's onfill token: that one turns dark in dark mode, on a fill that stays navy.
       freemium: "font-semibold text-white",
-      error: "text-red-stroke-emphasis",
-      warning: "text-yellow-foreground",
+      error: "text-feedback-error-foreground",
+      warning: "text-feedback-warning-foreground",
       neutral: "text-primary-foreground",
     },
     size: {
@@ -151,13 +151,13 @@ const badgeDotVariants = cva("rounded-circular", {
       "go-soft": "bg-go-background-fill",
       cir: "bg-cir-background-fill",
       "cir-soft": "bg-cir-background-fill",
-      ped: "bg-yellow-background-fill",
-      "ped-soft": "bg-yellow-background-fill",
+      ped: "bg-feedback-warning-background-fill",
+      "ped-soft": "bg-feedback-warning-background-fill",
       prev: "bg-prev-background-fill",
       "prev-soft": "bg-prev-background-fill",
       freemium: "bg-primary",
-      error: "bg-red-background-fill",
-      warning: "bg-yellow-background-fill",
+      error: "bg-feedback-error-background-fill",
+      warning: "bg-feedback-warning-background-fill",
       neutral: "bg-gray-background-fill",
     },
     size: {
@@ -197,6 +197,8 @@ const FREEMIUM_GRADIENT: ViewStyle = {
 
 const SHINE_DURATION_MS = 2000;
 
+const SHINE_BAND_FRAME: ViewStyle = { position: "absolute", top: 0, bottom: 0 };
+
 function BadgeShine() {
   const progress = useSharedValue(0);
   const width = useSharedValue(0);
@@ -234,10 +236,9 @@ function BadgeShine() {
       className="absolute inset-0 overflow-hidden rounded-pill"
       onLayout={handleLayout}
     >
-      <Animated.View
-        className="absolute bottom-0 top-0 bg-white-24"
-        style={bandStyle}
-      />
+      <Animated.View style={[SHINE_BAND_FRAME, bandStyle]}>
+        <View className="flex-1 bg-white-24" />
+      </Animated.View>
     </View>
   );
 }

package/src/components/Button.tsx

@@ -91,23 +91,23 @@ const buttonVariants = cva(
         "emphasis-basic":
           "bg-transparent active:bg-secondary-background-soft-emphasis disabled:bg-transparent",
         error:
-          "bg-red-background-fill active:bg-red-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+          "bg-feedback-error-background-fill active:bg-feedback-error-background-fill-emphasis disabled:bg-gray-background-fill-muted",
         "error-soft":
-          "bg-red-background-soft active:bg-red-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+          "bg-feedback-error-background-soft active:bg-feedback-error-background-soft-emphasis disabled:bg-gray-background-soft-muted",
         "error-basic":
-          "bg-transparent active:bg-red-background-soft-emphasis disabled:bg-transparent",
+          "bg-transparent active:bg-feedback-error-background-soft-emphasis disabled:bg-transparent",
         warning:
-          "bg-yellow-background-fill active:bg-yellow-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+          "bg-feedback-warning-background-fill active:bg-feedback-warning-background-fill-emphasis disabled:bg-gray-background-fill-muted",
         "warning-soft":
-          "bg-yellow-background-soft active:bg-yellow-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+          "bg-feedback-warning-background-soft active:bg-feedback-warning-background-soft-emphasis disabled:bg-gray-background-soft-muted",
         "warning-basic":
-          "bg-transparent active:bg-yellow-background-soft-emphasis disabled:bg-transparent",
+          "bg-transparent active:bg-feedback-warning-background-soft-emphasis disabled:bg-transparent",
         success:
-          "bg-green-background-fill active:bg-green-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+          "bg-feedback-success-background-fill active:bg-feedback-success-background-fill-emphasis disabled:bg-gray-background-fill-muted",
         "success-soft":
-          "bg-green-background-soft active:bg-green-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+          "bg-feedback-success-background-soft active:bg-feedback-success-background-soft-emphasis disabled:bg-gray-background-soft-muted",
         "success-basic":
-          "bg-transparent active:bg-green-background-soft-emphasis disabled:bg-transparent",
+          "bg-transparent active:bg-feedback-success-background-soft-emphasis disabled:bg-transparent",
         outlined:
           "border border-gray-stroke-muted bg-transparent active:bg-state-hover disabled:border-gray-stroke-muted",
         gradient:
@@ -132,24 +132,24 @@ const buttonVariants = cva(
 const buttonTextVariants = cva("font-semibold shrink-0", {
   variants: {
     variant: {
-      regular: "text-primary-foreground-onfill disabled:text-gray-foreground-onfill",
-      "regular-soft": "text-primary-foreground disabled:text-gray-foreground-muted",
-      "regular-basic": "text-primary-foreground disabled:text-gray-foreground-muted",
-      emphasis: "text-secondary-foreground-onfill disabled:text-gray-foreground-onfill",
-      "emphasis-soft": "text-secondary-foreground disabled:text-gray-foreground-muted",
-      "emphasis-basic": "text-secondary-foreground disabled:text-gray-foreground-muted",
-      error: "text-red-foreground-onfill disabled:text-gray-foreground-onfill",
-      "error-soft": "text-red-foreground disabled:text-gray-foreground-muted",
-      "error-basic": "text-red-foreground disabled:text-gray-foreground-muted",
-      warning: "text-yellow-foreground-onfill disabled:text-gray-foreground-onfill",
-      "warning-soft": "text-yellow-foreground disabled:text-gray-foreground-muted",
-      "warning-basic": "text-yellow-foreground disabled:text-gray-foreground-muted",
-      success: "text-green-foreground-onfill disabled:text-gray-foreground-onfill",
-      "success-soft": "text-green-foreground disabled:text-gray-foreground-muted",
-      "success-basic": "text-green-foreground disabled:text-gray-foreground-muted",
-      outlined: "text-foreground disabled:text-gray-foreground-muted",
-      gradient: "text-white disabled:text-gray-foreground-onfill",
-      medbrain: "text-secondary disabled:text-gray-foreground-onfill",
+      regular: "text-primary-foreground-onfill",
+      "regular-soft": "text-primary-foreground",
+      "regular-basic": "text-primary-foreground",
+      emphasis: "text-secondary-foreground-onfill",
+      "emphasis-soft": "text-secondary-foreground",
+      "emphasis-basic": "text-secondary-foreground",
+      error: "text-feedback-error-foreground-onfill",
+      "error-soft": "text-feedback-error-foreground",
+      "error-basic": "text-feedback-error-foreground",
+      warning: "text-feedback-warning-foreground-onfill",
+      "warning-soft": "text-feedback-warning-foreground",
+      "warning-basic": "text-feedback-warning-foreground",
+      success: "text-feedback-success-foreground-onfill",
+      "success-soft": "text-feedback-success-foreground",
+      "success-basic": "text-feedback-success-foreground",
+      outlined: "text-foreground",
+      gradient: "text-white",
+      medbrain: "text-secondary",
     },
     size: {
       sm: "text-xs",
@@ -157,10 +157,39 @@ const buttonTextVariants = cva("font-semibold shrink-0", {
       lg: "text-md",
       xl: "text-lg",
     },
+    disabled: {
+      true: "",
+      false: "",
+    },
   },
+  compoundVariants: [
+    {
+      variant: ["regular", "emphasis", "error", "warning", "success", "gradient", "medbrain"],
+      disabled: true,
+      className: "text-gray-foreground-onfill",
+    },
+    {
+      variant: [
+        "regular-soft",
+        "regular-basic",
+        "emphasis-soft",
+        "emphasis-basic",
+        "error-soft",
+        "error-basic",
+        "warning-soft",
+        "warning-basic",
+        "success-soft",
+        "success-basic",
+        "outlined",
+      ],
+      disabled: true,
+      className: "text-gray-foreground-muted",
+    },
+  ],
   defaultVariants: {
     variant: "regular",
     size: "md",
+    disabled: false,
   },
 });
 
@@ -185,6 +214,10 @@ function Button({
   const resolvedSize = size ?? "md";
   const resolvedVariant = variant ?? "regular";
   const isIconOnly = !children && !alert && (!!iconLeft || !!iconRight);
+  const isDisabled = !!disabled || loading;
+  const textClassName = cn(
+    buttonTextVariants({ variant: resolvedVariant, size, disabled: isDisabled })
+  );
 
   return (
     <View style={[{ position: "relative" }, containerStyle]}>
@@ -197,9 +230,9 @@ function Button({
       )}
 
       <Pressable
-        disabled={disabled || loading}
+        disabled={isDisabled}
         accessibilityRole="button"
-        accessibilityState={{ disabled: disabled || loading, busy: loading }}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
         className={cn(
           buttonVariants({ variant, size }),
           isIconOnly && ICON_ONLY_SIZES[resolvedSize],
@@ -218,7 +251,7 @@ function Button({
             <View className="opacity-0 flex-row items-center gap-2">
               {iconLeft}
               {children != null && (
-                <Text className={cn(buttonTextVariants({ variant: resolvedVariant, size }))}>
+                <Text className={textClassName}>
                   {children}
                 </Text>
               )}
@@ -242,7 +275,7 @@ function Button({
               iconLeft
             )}
             {children != null && (
-              <Text className={cn(buttonTextVariants({ variant: resolvedVariant, size }))}>
+              <Text className={textClassName}>
                 {children}
               </Text>
             )}

package/src/components/CardNews.tsx

@@ -54,6 +54,11 @@ interface CardNewsAuthorProps extends Omit<ViewProps, "role"> {
   src?: string;
   alt?: string;
   name?: string;
+  jobTitle?: string;
+  /**
+   * @deprecated Use `jobTitle` para o cargo. Sem `jobTitle`, `role` ainda é
+   * exibido como cargo; com `jobTitle`, vira o papel de acessibilidade da View.
+   */
   role?: string;
   children?: ReactNode;
 }
@@ -177,8 +182,8 @@ function CardNewsImage({
 }: CardNewsImageProps) {
   const { orientation } = useContext(CardNewsContext);
   const { width } = useWindowDimensions();
-  const [hasError, setHasError] = useState(false);
-  const showImage = !!src && !hasError;
+  const [failedSrc, setFailedSrc] = useState<string>();
+  const showImage = !!src && failedSrc !== src;
   const showHorizontalImage =
     orientation !== "horizontal" || width >= HORIZONTAL_IMAGE_MIN_WIDTH;
 
@@ -206,11 +211,11 @@ function CardNewsImage({
           {...imageProps}
           onError={(event) => {
             imageProps?.onError?.(event);
-            setHasError(true);
+            setFailedSrc(src);
           }}
         />
       ) : (
-        children ?? <FallbackImage className="absolute inset-0" />
+        children ?? <FallbackImage className="absolute inset-0" label={alt} />
       )}
     </View>
   );
@@ -310,12 +315,18 @@ function CardNewsAuthor({
   src,
   alt,
   name,
+  jobTitle,
   role,
   children,
   ...props
 }: CardNewsAuthorProps) {
+  const title = jobTitle ?? role;
+  const accessibilityRole =
+    jobTitle === undefined ? undefined : (role as ViewProps["role"]);
+
   return (
     <View
+      role={accessibilityRole}
       className={cn("flex-row items-center gap-2", className)}
       {...props}
     >
@@ -328,9 +339,9 @@ function CardNewsAuthor({
             </AvatarFallback>
           </Avatar>
           <View className="flex flex-col gap-0.5">
-            {role ? (
+            {title ? (
               <Text className="text-xs font-medium leading-xs text-secondary-foreground">
-                {role}
+                {title}
               </Text>
             ) : null}
             {name ? (