orn-ui 0.2.9 → 0.3.0

package/src/atoms/Button.tsx

@@ -4,6 +4,8 @@ import {
   Animated,
   Pressable,
   Text,
+  View,
+  type Insets,
   type GestureResponderEvent,
   type StyleProp,
   type TextStyle,
@@ -12,6 +14,7 @@ import {
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors, useTheme } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
+import { useReduceMotion } from './Transition';
 import type { IconName } from '../icons/types';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
@@ -20,20 +23,36 @@ export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'lin
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
 export interface ButtonProps {
+  /** Visible label. Also the accessible name unless `accessibilityLabel` is set. */
   title: string;
+  /** Called on press. Not called while `disabled` or `loading`. */
   onPress: (e: GestureResponderEvent) => void;
+  /**
+   * Semantic style: `primary` is the filled focal action; the others step the visual weight down.
+   * @default 'primary'
+   */
   variant?: ButtonVariant;
+  /** Density: padding and font size. `sm` gets extra touch area through `hitSlop`. @default 'md' */
   size?: ButtonSize;
+  /** Shows a spinner over the hidden label (the width doesn't change) and blocks presses. @default false */
   loading?: boolean;
+  /** Paints the disabled colors and ignores presses. @default false */
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
+  /** Extra style for the label text. */
   textStyle?: StyleProp<TextStyle>;
+  /** Custom node to the left of the label. Takes precedence over `leftIconName`. */
   leftIcon?: React.ReactNode;
+  /** Custom node to the right of the label. Takes precedence over `rightIconName`. */
   rightIcon?: React.ReactNode;
+  /** Icon from the library's set to the left of the label, sized to match `size`. */
   leftIconName?: IconName;
+  /** Icon from the library's set to the right of the label, sized to match `size`. */
   rightIconName?: IconName;
+  /** Color of `leftIconName`/`rightIconName`. Defaults to the label color of the variant. */
   iconColor?: string;
   testID?: string;
+  /** What screen readers announce. @default title */
   accessibilityLabel?: string;
 }
 
@@ -46,11 +65,11 @@ const useStyles = createStyles((theme) => ({
     borderWidth: 0,
   },
   sm: { paddingVertical: theme.tokens.spacing.sm, paddingHorizontal: theme.tokens.spacing.md },
-  md: { paddingVertical: theme.tokens.spacing.lg - 1, paddingHorizontal: theme.tokens.spacing.xl },
-  lg: { paddingVertical: theme.tokens.spacing.lg + 2, paddingHorizontal: theme.tokens.spacing.xxl },
+  md: { paddingVertical: theme.tokens.spacing.lg, paddingHorizontal: theme.tokens.spacing.xl },
+  lg: { paddingVertical: theme.tokens.spacing.xl, paddingHorizontal: theme.tokens.spacing.xxl },
   link: { paddingVertical: theme.tokens.spacing.xs, paddingHorizontal: 0, justifyContent: 'flex-start' },
   outline: { borderWidth: 1 },
-  filledShadow: { ...theme.tokens.shadow.md, shadowColor: '#000' },
+  filledShadow: theme.tokens.shadow.md,
   text: { fontWeight: theme.tokens.fontWeight.semibold, textAlign: 'center' },
   textSm: { fontSize: theme.tokens.fontSize.sm },
   textMd: { fontSize: theme.tokens.fontSize.lg },
@@ -58,15 +77,37 @@ const useStyles = createStyles((theme) => ({
   underline: { textDecorationLine: 'underline' },
   iconLeft: { marginRight: theme.tokens.spacing.sm },
   iconRight: { marginLeft: theme.tokens.spacing.sm },
+  // The label keeps taking its space (invisible) while loading: the button
+  // doesn't change width and the spinner is centered on top.
+  hidden: { opacity: 0 },
+  spinner: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, alignItems: 'center', justifyContent: 'center' },
 }));
 
+/**
+ * Extra touch area for the sizes that fall below 44pt in height
+ * (Fitts): `sm` measures ~30pt and `link` ~27pt. hitSlop enlarges the area
+ * that receives the touch without changing how it looks.
+ */
+function useHitSlop(size: ButtonSize, variant: ButtonVariant): Insets | undefined {
+  const theme = useTheme();
+  if (variant === 'link') {
+    const v = theme.tokens.spacing.md;
+    return { top: v, bottom: v, left: theme.tokens.spacing.sm, right: theme.tokens.spacing.sm };
+  }
+  if (size === 'sm') {
+    const v = theme.tokens.spacing.sm;
+    return { top: v, bottom: v };
+  }
+  return undefined;
+}
+
 function resolveColors(variant: ButtonVariant, disabled: boolean, colors: ReturnType<typeof useColors>) {
   if (disabled) {
     return { background: colors.inputBackground, text: colors.textLight, border: 'transparent' };
   }
   switch (variant) {
-    // Las variantes sin relleno pintan texto sobre el fondo de la pantalla:
-    // van con el rol `*Text`. Las rellenas van con `on*` sobre el acento.
+    // The unfilled variants paint text over the screen background: they
+    // use the `*Text` role. The filled ones use `on*` over the accent.
     case 'outline':
       return { background: 'transparent', text: colors.primaryText, border: colors.primary };
     case 'ghost':
@@ -85,9 +126,24 @@ function resolveColors(variant: ButtonVariant, disabled: boolean, colors: Return
 
 /**
  * Button
- * Único componente de botón de la librería. `variant` decide el estilo
- * semántico, `size` la densidad. El feedback de "presionado" anima solo
- * `transform` (Animated.spring, useNativeDriver) — nunca opacity ni layout.
+ * The library's only button component. `variant` sets the semantic style,
+ * `size` the density. The "pressed" feedback animates only `transform`
+ * (Animated.spring, useNativeDriver) — never opacity or layout — and is
+ * skipped when Reduce Motion is on.
+ *
+ * Gestalt:
+ * - Focal point (Von Restorff): `primary` is the only one filled with the
+ *   accent and a shadow; there should be one per screen or group. The other
+ *   variants step the visual weight down (secondary → outline → ghost → link).
+ * - Similarity: all variants share shape, radius and typography, so a row of
+ *   buttons reads as a single group of actions; only what conveys the
+ *   hierarchy changes (fill, border, color).
+ * - Proximity: icon and label sit `spacing.sm` apart, much less than the
+ *   padding, so they read as a single label.
+ *
+ * Fitts: `sm` and `link` are less than 44pt tall and make up for it with `hitSlop`.
+ * While `loading`, the label is invisible but keeps its space: the button
+ * doesn't change width (no layout jumps).
  */
 export const Button = memo(
   ({
@@ -112,6 +168,8 @@ export const Button = memo(
     const theme = useTheme();
     const allowFontScaling = useAllowFontScaling();
     const scale = useRef(new Animated.Value(1)).current;
+    const reduceMotion = useReduceMotion();
+    const hitSlop = useHitSlop(size, variant);
     const isDisabled = disabled || loading;
     const isFilled = variant === 'primary' || variant === 'secondary' || variant === 'destructive';
 
@@ -119,6 +177,7 @@ export const Button = memo(
     const effectiveIconColor = iconColor ?? resolved.text;
 
     const animateTo = (value: number) => {
+      if (reduceMotion) return;
       Animated.spring(scale, { toValue: value, useNativeDriver: true, speed: 50, bounciness: 6 }).start();
     };
 
@@ -129,7 +188,10 @@ export const Button = memo(
       variant === 'outline' && [styles.outline, { borderColor: resolved.border }],
       { backgroundColor: resolved.background },
       isFilled && !disabled && styles.filledShadow,
-      { opacity: isDisabled ? 0.7 : 1 },
+      // Disabled is already marked by its colors (resolveColors); lowering the
+      // opacity on top of that left it almost invisible (figure and ground).
+      // Only `loading` dims it, to signal that the button is busy.
+      { opacity: loading && !disabled ? 0.7 : 1 },
       style,
     ];
 
@@ -144,11 +206,11 @@ export const Button = memo(
     const iconSize = size === 'sm' ? 16 : size === 'lg' ? 22 : 20;
 
     return (
-      // El Pressable ES el contenedor animado, no un wrapper alrededor de uno.
-      // Con un Animated.View interno, un `style` de layout (flex, width,
-      // margin) caía en el hijo mientras el Pressable — que es quien ocupa
-      // lugar en el layout del padre — quedaba sin él: el ancho colapsaba y
-      // el label desaparecía (visible en los botones en fila del Alert).
+      // The Pressable IS the animated container, not a wrapper around one.
+      // With an inner Animated.View, a layout `style` (flex, width, margin)
+      // landed on the child while the Pressable — which is what takes up
+      // space in the parent's layout — was left without it: the width
+      // collapsed and the label disappeared (visible in the Alert's row of buttons).
       <AnimatedPressable
         onPress={onPress}
         onPressIn={() => {
@@ -158,28 +220,38 @@ export const Button = memo(
           if (!isDisabled) animateTo(1);
         }}
         disabled={isDisabled}
+        hitSlop={hitSlop}
         testID={testID}
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel ?? title}
         accessibilityState={{ disabled: isDisabled, busy: loading }}
         style={[containerStyle, { transform: [{ scale }] }]}
       >
-        {loading ? (
-          <ActivityIndicator size="small" color={resolved.text} />
-        ) : (
-          <>
-            {leftIcon}
-            {!leftIcon && leftIconName && (
-              <Icon name={leftIconName} size={iconSize} color={effectiveIconColor} style={styles.iconLeft} />
-            )}
-            <Text allowFontScaling={allowFontScaling} style={labelStyle}>
-              {title}
-            </Text>
-            {rightIcon}
-            {!rightIcon && rightIconName && (
-              <Icon name={rightIconName} size={iconSize} color={effectiveIconColor} style={styles.iconRight} />
-            )}
-          </>
+        {leftIcon ? <View style={[styles.iconLeft, loading && styles.hidden]}>{leftIcon}</View> : null}
+        {!leftIcon && leftIconName && (
+          <Icon
+            name={leftIconName}
+            size={iconSize}
+            color={effectiveIconColor}
+            style={[styles.iconLeft, loading && styles.hidden]}
+          />
+        )}
+        <Text allowFontScaling={allowFontScaling} style={[labelStyle, loading && styles.hidden]}>
+          {title}
+        </Text>
+        {rightIcon ? <View style={[styles.iconRight, loading && styles.hidden]}>{rightIcon}</View> : null}
+        {!rightIcon && rightIconName && (
+          <Icon
+            name={rightIconName}
+            size={iconSize}
+            color={effectiveIconColor}
+            style={[styles.iconRight, loading && styles.hidden]}
+          />
+        )}
+        {loading && (
+          <View style={styles.spinner} pointerEvents="none">
+            <ActivityIndicator size="small" color={resolved.text} />
+          </View>
         )}
       </AnimatedPressable>
     );

package/src/atoms/Card.tsx

@@ -1,21 +1,41 @@
 import React, { memo } from 'react';
-import { View, type ViewProps, type ViewStyle } from 'react-native';
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 
 export interface CardProps extends ViewProps {
+  /** Content of the card, inside its padding, background and border. */
   children: React.ReactNode;
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 }
 
+const CARD_BORDER_DARK = 1;
+
 const useStyles = createStyles((theme) => ({
   card: {
-    backgroundColor: theme.colors.surface,
+    // surfaceRaised: lighter than surface in dark, so a card on a sheet or
+    // on another card still reads as a separate tile (figure and ground).
+    backgroundColor: theme.colors.surfaceRaised,
     borderRadius: theme.tokens.radius.xl,
     padding: theme.tokens.spacing.lg,
     ...theme.tokens.shadow.sm,
+    // In dark the shadow isn't visible and surface barely stands out from the
+    // background (or not at all, on another surface): a 1pt border restores
+    // the outline (figure and ground). A hairline was invisible.
+    ...(theme.scheme === 'dark' && { borderWidth: CARD_BORDER_DARK, borderColor: theme.colors.border }),
   },
 }));
 
+/**
+ * Card
+ * Surface container: groups related content.
+ *
+ * Gestalt, common region: everything inside the same background and border
+ * reads as a group, even when other elements are nearby. Figure and ground:
+ * in light the shadow sets it apart; in dark (where the shadow isn't visible)
+ * a thin border does. The inner padding (`spacing.lg`) must be larger than the
+ * spacing between the elements inside, so the content reads as one block.
+ */
+
 export const Card = memo(({ children, style, ...props }: CardProps) => {
   const styles = useStyles();
   return (

package/src/atoms/Checkbox.tsx

@@ -1,20 +1,34 @@
 import React, { memo, useEffect, useRef } from 'react';
 import { Animated, Text, TouchableOpacity } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { useAllowFontScaling, useColors, useTheme } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
+import { onColor } from '../icons/defaultIcons';
+import { useReduceMotion } from './Transition';
 
 export interface CheckboxProps {
+  /** Whether the box is checked (controlled). */
   value: boolean;
+  /** Called with the new value when the row is pressed. */
   onValueChange: (value: boolean) => void;
+  /** Text next to the box; the whole row is touchable. Also the accessible name. */
   label?: string;
+  /**
+   * Fill and border color when checked. The check turns black or white for contrast. @default
+   * colors.primary
+   */
   color?: string;
+  /** Dims the box and the label and ignores presses. */
   disabled?: boolean;
+  /** Effectively required without `label`: it is all a screen reader announces. */
+  accessibilityLabel?: string;
   testID?: string;
 }
 
 const useStyles = createStyles((theme) => ({
-  container: { flexDirection: 'row', alignItems: 'center', marginBottom: theme.tokens.spacing.sm },
+  // 44pt tall: the whole row is the touch area (Fitts). Replaces the
+  // marginBottom that separated stacked checkboxes; now the row provides the room.
+  container: { flexDirection: 'row', alignItems: 'center', minHeight: 44 },
   box: {
     width: 24,
     height: 24,
@@ -22,31 +36,54 @@ const useStyles = createStyles((theme) => ({
     borderWidth: 2,
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: theme.tokens.spacing.sm + 2,
+    marginRight: theme.tokens.spacing.md,
   },
   label: { fontSize: theme.tokens.fontSize.md, color: theme.colors.text },
+  labelDisabled: { color: theme.colors.textLight },
 }));
 
-export const Checkbox = memo(({ value, onValueChange, label, color, disabled, testID }: CheckboxProps) => {
+/**
+ * Checkbox
+ * Box + optional label; the whole row is touchable.
+ *
+ * Gestalt:
+ * - Proximity: the box and its label sit `spacing.md` apart, less than the
+ *   spacing between rows, so each label reads with its box.
+ * - Common region: the whole row is the touch area, not just the box, and it
+ *   is at least 44pt tall (Fitts).
+ * - Figure and ground: when checked, the box fills with the accent and the
+ *   check turns black or white depending on that fill (also with a custom `color`).
+ *
+ * `disabled` dims the box and the label (not just the box). The check
+ * animation is skipped with Reduce Motion.
+ */
+export const Checkbox = memo(({ value, onValueChange, label, color, disabled, accessibilityLabel, testID }: CheckboxProps) => {
   const colors = useColors();
   const styles = useStyles();
   const allowFontScaling = useAllowFontScaling();
   const activeColor = color || colors.primary;
-  // El check va encima del relleno: con `color` propio no sabemos qué tono
-  // contrasta, así que ahí seguimos con blanco (decisión del consumidor).
-  const checkColor = color ? colors.white : colors.onPrimary;
+  // The check sits on top of the fill: with a custom `color`, black or white is
+  // picked by luminance (a fixed white disappeared over light colors).
+  const checkColor = color ? onColor(color) : colors.onPrimary;
+  const theme = useTheme();
+  const reduceMotion = useReduceMotion();
   const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
   const checkScale = useRef(new Animated.Value(value ? 1 : 0)).current;
 
   useEffect(() => {
-    Animated.timing(progress, { toValue: value ? 1 : 0, duration: 150, useNativeDriver: false }).start();
+    if (reduceMotion) {
+      progress.setValue(value ? 1 : 0);
+      checkScale.setValue(value ? 1 : 0);
+      return;
+    }
+    Animated.timing(progress, { toValue: value ? 1 : 0, duration: theme.tokens.duration.fast, useNativeDriver: false }).start();
     Animated.spring(checkScale, {
       toValue: value ? 1 : 0,
       useNativeDriver: true,
       speed: 40,
       bounciness: 10,
     }).start();
-  }, [value]);
+  }, [value, reduceMotion]);
 
   const backgroundColor = progress.interpolate({ inputRange: [0, 1], outputRange: [colors.surface, activeColor] });
   const borderColor = progress.interpolate({ inputRange: [0, 1], outputRange: [colors.border, activeColor] });
@@ -59,7 +96,7 @@ export const Checkbox = memo(({ value, onValueChange, label, color, disabled, te
       onPress={() => onValueChange(!value)}
       accessibilityRole="checkbox"
       accessibilityState={{ checked: value, disabled: !!disabled }}
-      accessibilityLabel={label}
+      accessibilityLabel={accessibilityLabel ?? label}
       testID={testID}
     >
       <Animated.View style={[styles.box, { backgroundColor, borderColor, opacity: disabled ? 0.5 : 1 }]}>
@@ -67,8 +104,8 @@ export const Checkbox = memo(({ value, onValueChange, label, color, disabled, te
           <Icon name="check" size={16} color={checkColor} />
         </Animated.View>
       </Animated.View>
-      {label && (
-        <Text allowFontScaling={allowFontScaling} style={styles.label}>
+      {!!label && (
+        <Text allowFontScaling={allowFontScaling} style={[styles.label, disabled && styles.labelDisabled]}>
           {label}
         </Text>
       )}

package/src/atoms/Divider.tsx

@@ -1,14 +1,44 @@
 import React, { memo } from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
-import { useColors } from '../theme/UIProvider';
+import { useTheme } from '../theme/UIProvider';
+import type { Tokens } from '../theme/tokens';
 
 export interface DividerProps {
+  /** `vertical` separates items in a row and stretches to the row's height. @default 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+  /** Space on each side of the line, from the spacing scale. Unset, the line adds no margin. */
+  spacing?: keyof Tokens['spacing'];
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
-export const Divider = memo(({ style, testID }: DividerProps) => {
-  const colors = useColors();
-  return <View testID={testID} style={[{ height: 1, backgroundColor: colors.border, width: '100%' }, style]} />;
+/**
+ * Divider
+ * 1pt line in `colors.border`.
+ *
+ * Gestalt: separates groups when proximity alone isn't enough (dense lists,
+ * rows spanning the whole screen). If spacing already separates the groups,
+ * prefer spacing: one line too many fragments what should read together.
+ * `spacing` takes its room from the token scale so the separation is the
+ * same across the whole app, instead of a different margin on each screen.
+ *
+ * It is decorative: it doesn't enter the accessibility tree.
+ */
+export const Divider = memo(({ orientation = 'horizontal', spacing, style, testID }: DividerProps) => {
+  const theme = useTheme();
+  const gap = spacing ? theme.tokens.spacing[spacing] : 0;
+  const line: ViewStyle =
+    orientation === 'vertical'
+      ? { width: 1, alignSelf: 'stretch', marginHorizontal: gap }
+      : { height: 1, width: '100%', marginVertical: gap };
+  return (
+    <View
+      testID={testID}
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      accessibilityElementsHidden
+      style={[line, { backgroundColor: theme.colors.border }, style]}
+    />
+  );
 });
 Divider.displayName = 'Divider';

package/src/atoms/EmptyState.tsx

@@ -1,43 +1,80 @@
 import React, { memo } from 'react';
-import { Text, View, type ViewStyle } from 'react-native';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
 import type { IconName } from '../icons/types';
+import { Button, type ButtonVariant } from './Button';
+
+export interface EmptyStateAction {
+  label: string;
+  onPress: () => void;
+  /** @default 'primary' */
+  variant?: ButtonVariant;
+}
 
 export interface EmptyStateProps {
+  /** Main line. @default labels.noResultsTitle */
   title?: string;
+  /** Supporting line under the title. @default labels.noResultsDescription */
   description?: string;
+  /** Built-in or custom icon name. Ignored when `icon` is passed. @default 'search' */
   iconName?: IconName;
+  /** Any node in place of the icon (an Image, an illustration). */
   icon?: React.ReactNode;
-  style?: ViewStyle;
+  /** The next step, shown as a button under the text (e.g. "Add client"). */
+  action?: EmptyStateAction;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
+/** Icon size: the block's focal point without competing with the title. */
+const ICON_SIZE = 48;
+/** Minimum height: the block doesn't get squashed inside a short empty list. */
+const MIN_HEIGHT = 200;
+
 const useStyles = createStyles((theme) => ({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    padding: theme.tokens.spacing.xxl - 4,
-    minHeight: 200,
+    padding: theme.tokens.spacing.xl,
+    minHeight: MIN_HEIGHT,
   },
   title: {
     fontSize: theme.tokens.fontSize.lg,
     fontWeight: theme.tokens.fontWeight.semibold,
-    color: theme.colors.textLight,
-    marginTop: theme.tokens.spacing.md - 2,
+    lineHeight: theme.tokens.lineHeight.lg,
+    color: theme.colors.text,
+    marginTop: theme.tokens.spacing.md,
     textAlign: 'center',
   },
   description: {
     fontSize: theme.tokens.fontSize.md,
+    lineHeight: theme.tokens.lineHeight.md,
     color: theme.colors.textLight,
-    marginTop: theme.tokens.spacing.xs + 1,
+    marginTop: theme.tokens.spacing.xs,
     textAlign: 'center',
   },
+  message: { alignItems: 'center' },
+  action: { marginTop: theme.tokens.spacing.lg },
 }));
 
+/**
+ * EmptyState
+ * Centered icon + title + description for a list or screen with no data.
+ *
+ * Gestalt, proximity: title and description sit close together (`spacing.xs`)
+ * and the icon one step further (`spacing.md`), so they read as a message
+ * with its image and not as three loose pieces. Similarity: the title in
+ * `text` and the description in `textLight` mark the hierarchy. The action,
+ * if any, is set further apart (`spacing.lg`): it is the next step, not part
+ * of the message.
+ * The message is a single accessibility node (title and description together;
+ * the icon is decorative) and the button a separate, focusable one.
+ */
 export const EmptyState = memo(
-  ({ title, description, iconName = 'search', icon, style }: EmptyStateProps) => {
+  ({ title, description, iconName = 'search', icon, action, style, testID }: EmptyStateProps) => {
     const colors = useColors();
     const styles = useStyles();
     const labels = useLabels();
@@ -45,14 +82,24 @@ export const EmptyState = memo(
     const resolvedTitle = title ?? labels.noResultsTitle;
     const resolvedDescription = description ?? labels.noResultsDescription;
     return (
-      <View style={[styles.container, style]} accessible accessibilityRole="text">
-        {icon ?? <Icon name={iconName} size={48} color={colors.textLight} />}
-        <Text allowFontScaling={allowFontScaling} style={styles.title}>
-          {resolvedTitle}
-        </Text>
-        <Text allowFontScaling={allowFontScaling} style={styles.description}>
-          {resolvedDescription}
-        </Text>
+      <View style={[styles.container, style]} testID={testID}>
+        <View style={styles.message} accessible accessibilityRole="text">
+          {icon ?? <Icon name={iconName} size={ICON_SIZE} color={colors.textLight} />}
+          <Text allowFontScaling={allowFontScaling} style={styles.title}>
+            {resolvedTitle}
+          </Text>
+          <Text allowFontScaling={allowFontScaling} style={styles.description}>
+            {resolvedDescription}
+          </Text>
+        </View>
+        {action && (
+          <Button
+            title={action.label}
+            onPress={action.onPress}
+            variant={action.variant ?? 'primary'}
+            style={styles.action}
+          />
+        )}
       </View>
     );
   }