@webority-technologies/mobile 0.0.15 → 0.0.20

package/lib/module/components/Input/Input.js

@@ -2,40 +2,16 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - react-native-vector-icons ships no bundled types in this version
-import Feather from 'react-native-vector-icons/Feather';
 import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeMap = {
-  sm: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    minHeight: 38,
-    multilineMinHeight: 72,
-    fontSize: 13,
-    borderRadius: 10,
-    iconSize: 16
-  },
-  md: {
-    paddingHorizontal: 14,
-    paddingVertical: 11,
-    minHeight: 46,
-    multilineMinHeight: 92,
-    fontSize: 15,
-    borderRadius: 12,
-    iconSize: 18
-  },
-  lg: {
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    minHeight: 54,
-    multilineMinHeight: 110,
-    fontSize: 16,
-    borderRadius: 14,
-    iconSize: 20
-  }
+// FieldBase carries every dimension except `multilineMinHeight` — Input owns
+// the multiline height ramp, so we keep a tiny per-size table for that one key.
+const multilineMinHeightMap = {
+  sm: 72,
+  md: 92,
+  lg: 110
 };
 const Input = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -59,8 +35,11 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     format,
     parse,
     style,
+    containerStyle,
     inputStyle,
     labelStyle,
+    messageStyle,
+    borderRadius: borderRadiusProp,
     onFocus,
     onBlur,
     accessibilityLabel,
@@ -70,13 +49,16 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = {
-    ...sizeMap[size],
-    ...(theme.components.input?.[size] ?? {})
-  };
+  const sizeTokens = resolveFieldSize(theme, size);
+  const multilineMinHeight = multilineMinHeightMap[size];
 
-  // Per-call-site prop wins; otherwise theme defaults; otherwise library defaults.
-  const variant = variantProp ?? theme.components.input?.defaultVariant ?? 'outlined';
+  // Resolution chain: caller prop → component-specific token
+  // (`components.input.defaultVariant`) → shared field-family token
+  // (`components.field.defaultVariant`) → library default. The middle step lets
+  // brands flip every input-style control (Input, Select, SearchBar, …) in one
+  // place; the per-component slot still wins when a brand needs a different
+  // default for Input specifically.
+  const variant = variantProp ?? theme.components.input?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'outlined';
   const labelMode = labelModeProp ?? theme.components.input?.defaultLabelMode ?? 'float';
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -89,41 +71,20 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
   // above the field — the staticLabel branch below handles both.
   const showFloatingLabel = Boolean(label) && !multiline && labelMode === 'float';
 
-  // Animations
-  const focusAnim = useRef(createAnimatedValue(0)).current;
-  const errorAnim = useRef(createAnimatedValue(0)).current;
+  // Animations local to Input: floating label, shake, helper/error fade.
+  // Border + fill animations now live inside FieldBase.
   const labelAnim = useRef(createAnimatedValue(shouldFloat ? 1 : 0)).current;
   const shakeAnim = useRef(createAnimatedValue(0)).current;
   const messageAnim = useRef(createAnimatedValue(hasError || helperText ? 1 : 0)).current;
 
-  // Focus border animation
-  useEffect(() => {
-    Animated.timing(focusAnim, {
-      toValue: isFocused ? 1 : 0,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
-    }).start();
-  }, [isFocused, focusAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
-
-  // Error border + message animation
-  useEffect(() => {
-    Animated.timing(errorAnim, {
-      toValue: hasError ? 1 : 0,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
-    }).start();
-  }, [hasError, errorAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
-
   // Floating label animation
   useEffect(() => {
-    Animated.parallel([Animated.timing(labelAnim, {
+    Animated.timing(labelAnim, {
       toValue: shouldFloat ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    })]).start();
+    }).start();
   }, [shouldFloat, labelAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
 
   // Helper / error fade
@@ -136,9 +97,15 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     }).start();
   }, [hasError, helperText, messageAnim, theme.motion.easing.standard]);
 
-  // Error shake
+  // Error shake — off by default; consumers opt in via
+  // theme.components.input.shakeOnError. The haptic ships with the shake.
+  const shakeOnError = theme.components.input?.shakeOnError ?? false;
   const prevErrorRef = useRef(hasError);
   useEffect(() => {
+    if (!shakeOnError) {
+      prevErrorRef.current = hasError;
+      return;
+    }
     if (hasError && !prevErrorRef.current) {
       setNativeValue(shakeAnim, 0);
       Animated.sequence([Animated.timing(shakeAnim, {
@@ -165,7 +132,7 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
       triggerHaptic('notificationError');
     }
     prevErrorRef.current = hasError;
-  }, [hasError, shakeAnim]);
+  }, [hasError, shakeAnim, shakeOnError]);
   const handleFocus = useCallback(e => {
     setIsFocused(true);
     onFocus?.(e);
@@ -179,19 +146,25 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     setIsPasswordVisible(prev => !prev);
   }, []);
 
-  // Derived border + background colors with smooth interpolation
-  const blurredBorderColor = variant === 'filled' ? 'transparent' : theme.colors.border.primary;
-  const focusedBorderColor = theme.colors.border.focus;
-  const errorBorderColor = theme.colors.border.error;
-  const baseBorderColor = focusAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [blurredBorderColor, focusedBorderColor]
-  });
-  const animatedBorderColor = errorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [baseBorderColor, errorBorderColor]
-  });
-  const containerBackgroundColor = disabled ? theme.colors.surface.disabled : variant === 'filled' ? theme.colors.background.secondary : theme.colors.background.primary;
+  // Bridge legacy Input fill-colour API (theme.components.input.fillColors[variant])
+  // onto FieldBase's FieldVariantTokens shape. Keeps consumer overrides working.
+  const fillOverrides = useMemo(() => {
+    const legacy = theme.components.input?.fillColors?.[variant];
+    if (!legacy) return undefined;
+    const overrides = {};
+    if (legacy.idleEmpty !== undefined) overrides.backgroundIdleEmpty = legacy.idleEmpty;
+    if (legacy.idleFilled !== undefined) overrides.backgroundIdleFilled = legacy.idleFilled;
+    if (legacy.focus !== undefined) overrides.backgroundFocused = legacy.focus;
+    if (legacy.error !== undefined) overrides.backgroundError = legacy.error;
+    if (legacy.disabled !== undefined) overrides.backgroundDisabled = legacy.disabled;
+    return Object.keys(overrides).length > 0 ? overrides : undefined;
+  }, [theme.components.input?.fillColors, variant]);
+
+  // Selection / caret / handle colour walks the same resolution chain as the
+  // focused border so brands that override `components.field.<variant>.borderFocused`
+  // get a matching selection tint without also having to update root `border.focus`.
+  const selectionColor = useMemo(() => resolveVariantColors(theme, variant, fillOverrides).borderFocused, [theme, variant, fillOverrides]);
+  const borderRadiusOverride = borderRadiusProp ?? theme.components.input?.borderRadius;
 
   // Floating label styles
   const labelTranslateY = labelAnim.interpolate({
@@ -202,24 +175,53 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     inputRange: [0, 1],
     outputRange: [1, 0.85]
   });
-  const labelColor = hasError ? theme.colors.text.tertiary : isFocused ? theme.colors.border.focus : theme.colors.text.secondary;
+  // Single source of truth for label colour — used by BOTH static-top and
+  // floating modes. Label stays its resting colour on focus unless the consumer
+  // opts in via theme.components.input.tintLabelOnFocus.
+  const tintLabelOnFocus = theme.components.input?.tintLabelOnFocus ?? false;
+  const labelColor = hasError ? theme.colors.error : isFocused && tintLabelOnFocus ? theme.colors.border.focus : theme.colors.text.secondary;
   const shakeTranslateX = shakeAnim.interpolate({
     inputRange: [-1, 0, 1],
     outputRange: [-6, 0, 6]
   });
-  const inputTextColor = disabled ? theme.colors.text.disabled : theme.colors.text.primary;
-  const placeholderTextColor = theme.colors.text.tertiary;
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
+  const inputTextColor = fieldText.color;
+  const placeholderTextColor = fieldText.placeholderColor;
   const messageText = hasError ? error : helperText;
   const messageColor = hasError ? theme.colors.error : theme.colors.text.secondary;
   const a11yLabel = accessibilityLabel ?? label ?? placeholder;
-
-  // Padding adjustments to leave room for icons
-  const leftPad = leftIcon ? sizeStyles.paddingHorizontal + sizeStyles.iconSize + theme.spacing.xs : sizeStyles.paddingHorizontal;
-  const rightPadIcon = showPasswordToggle && secureTextEntry || rightIcon;
-  const rightPad = rightPadIcon ? sizeStyles.paddingHorizontal + sizeStyles.iconSize + theme.spacing.xs : sizeStyles.paddingHorizontal;
-
-  // Floating label positioning depends on size; when floated it sits above the field.
-  const floatedLabelTopOffset = -(sizeStyles.fontSize - 2);
+  const iconColor = disabled ? theme.colors.text.disabled : theme.colors.text.secondary;
+  const trailing = (() => {
+    if (showPasswordToggle && secureTextEntry) {
+      const renderer = isPasswordVisible ? theme.icons?.eyeOff : theme.icons?.eye;
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: togglePasswordVisibility,
+        disabled: !isEditable,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: isPasswordVisible ? 'Hide password' : 'Show password',
+        children: renderer ? renderer({
+          size: sizeTokens.iconSize,
+          color: iconColor
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: {
+            fontSize: sizeTokens.iconSize,
+            color: iconColor
+          },
+          children: isPasswordVisible ? '✕' : '○'
+        })
+      });
+    }
+    if (rightIcon) return /*#__PURE__*/_jsx(View, {
+      children: rightIcon
+    });
+    return null;
+  })();
+  const leading = leftIcon ? /*#__PURE__*/_jsx(View, {
+    children: leftIcon
+  }) : null;
   return /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.container, {
       transform: [{
@@ -228,7 +230,7 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     }, style],
     children: [label && !showFloatingLabel ? /*#__PURE__*/_jsxs(Text, {
       style: [styles.staticLabel, {
-        color: hasError ? theme.colors.error : isFocused ? theme.colors.border.focus : theme.colors.text.secondary,
+        color: labelColor,
         fontSize: theme.typography.fontSize.sm,
         ...fontFor(theme, 'medium'),
         marginBottom: theme.spacing.xxs
@@ -239,31 +241,58 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
         },
         children: " *"
       }) : null]
-    }) : null, /*#__PURE__*/_jsxs(Animated.View, {
-      style: [styles.inputWrapper, {
-        minHeight: multiline ? sizeStyles.multilineMinHeight : sizeStyles.minHeight,
-        borderRadius: sizeStyles.borderRadius,
-        borderWidth: variant === 'outlined' ? 1.5 : 0,
-        borderColor: animatedBorderColor,
-        backgroundColor: containerBackgroundColor,
-        opacity: disabled ? 0.65 : 1,
-        paddingLeft: leftPad,
-        paddingRight: rightPad
-      }],
-      children: [leftIcon ? /*#__PURE__*/_jsx(View, {
-        style: [styles.leftIconWrap, {
-          left: sizeStyles.paddingHorizontal - 2,
-          height: sizeStyles.minHeight
-        }],
-        pointerEvents: "none",
-        children: leftIcon
-      }) : null, showFloatingLabel ? /*#__PURE__*/_jsxs(Animated.Text, {
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: styles.fieldWrapper,
+      children: [/*#__PURE__*/_jsx(FieldBase, {
+        size: size,
+        variant: variant,
+        focused: isFocused,
+        disabled: disabled,
+        error: hasError,
+        filled: hasValue,
+        minHeight: multiline ? multilineMinHeight : undefined,
+        borderRadius: borderRadiusOverride,
+        fillOverrides: fillOverrides,
+        leading: leading,
+        trailing: trailing,
+        style: containerStyle,
+        children: /*#__PURE__*/_jsx(TextInput, {
+          ref: ref,
+          style: [styles.input, {
+            color: inputTextColor,
+            fontSize: sizeTokens.fontSize,
+            ...fieldText.weightStyle,
+            minHeight: multiline ? multilineMinHeight - sizeTokens.paddingVertical * 2 : undefined,
+            textAlignVertical: multiline ? 'top' : 'center'
+          }, inputStyle],
+          placeholder: showFloatingLabel && !shouldFloat ? undefined : placeholder,
+          placeholderTextColor: placeholderTextColor,
+          value: format && value != null ? format(value) : value,
+          onChangeText: text => {
+            if (!onChangeText) return;
+            onChangeText(parse ? parse(text) : text);
+          },
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          editable: isEditable,
+          secureTextEntry: secureTextEntry && !isPasswordVisible,
+          multiline: multiline,
+          maxLength: maxLength,
+          selectionColor: selectionColor,
+          accessibilityLabel: a11yLabel,
+          accessibilityState: {
+            disabled
+          },
+          testID: testID,
+          ...rest
+        })
+      }), showFloatingLabel ? /*#__PURE__*/_jsxs(Animated.Text, {
         pointerEvents: "none",
         style: [styles.floatingLabel, {
-          top: sizeStyles.paddingVertical,
-          left: leftPad,
+          top: sizeTokens.paddingVertical,
+          left: sizeTokens.paddingHorizontal + (leftIcon ? sizeTokens.iconSize + theme.spacing.sm : 0),
           color: labelColor,
-          fontSize: sizeStyles.fontSize,
+          fontSize: sizeTokens.fontSize,
           ...fontFor(theme, 'medium'),
           backgroundColor: shouldFloat && variant === 'outlined' ? theme.colors.background.primary : 'transparent',
           paddingHorizontal: shouldFloat && variant === 'outlined' ? 4 : 0,
@@ -279,57 +308,6 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
           },
           children: " *"
         }) : null]
-      }) : null, /*#__PURE__*/_jsx(TextInput, {
-        ref: ref,
-        style: [styles.input, {
-          color: inputTextColor,
-          fontSize: sizeStyles.fontSize,
-          paddingVertical: sizeStyles.paddingVertical,
-          minHeight: multiline ? sizeStyles.multilineMinHeight : sizeStyles.minHeight,
-          textAlignVertical: multiline ? 'top' : 'center'
-        }, inputStyle],
-        placeholder: showFloatingLabel && !shouldFloat ? undefined : placeholder,
-        placeholderTextColor: placeholderTextColor,
-        value: format && value != null ? format(value) : value,
-        onChangeText: text => {
-          if (!onChangeText) return;
-          onChangeText(parse ? parse(text) : text);
-        },
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        editable: isEditable,
-        secureTextEntry: secureTextEntry && !isPasswordVisible,
-        multiline: multiline,
-        maxLength: maxLength,
-        selectionColor: theme.colors.border.focus,
-        accessibilityLabel: a11yLabel,
-        accessibilityState: {
-          disabled
-        },
-        testID: testID,
-        ...rest
-      }), showPasswordToggle && secureTextEntry ? /*#__PURE__*/_jsx(Pressable, {
-        onPress: togglePasswordVisibility,
-        disabled: !isEditable,
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: isPasswordVisible ? 'Hide password' : 'Show password',
-        style: [styles.rightIconWrap, {
-          right: sizeStyles.paddingHorizontal - 2,
-          height: multiline ? sizeStyles.multilineMinHeight : sizeStyles.minHeight
-        }],
-        children: /*#__PURE__*/_jsx(Feather, {
-          name: isPasswordVisible ? 'eye-off' : 'eye',
-          size: sizeStyles.iconSize,
-          color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary
-        })
-      }) : rightIcon ? /*#__PURE__*/_jsx(View, {
-        style: [styles.rightIconWrap, {
-          right: sizeStyles.paddingHorizontal - 2,
-          height: multiline ? sizeStyles.multilineMinHeight : sizeStyles.minHeight
-        }],
-        pointerEvents: "box-none",
-        children: rightIcon
       }) : null]
     }), messageText ? /*#__PURE__*/_jsx(Animated.Text, {
       style: [styles.messageText, {
@@ -337,7 +315,7 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
         fontSize: theme.typography.fontSize.xs,
         marginTop: theme.spacing.xxs,
         opacity: messageAnim
-      }],
+      }, messageStyle],
       accessibilityLiveRegion: hasError ? 'polite' : 'none',
       children: messageText
     }) : null, typeof maxLength === 'number' && typeof value === 'string' ? /*#__PURE__*/_jsx(Text, {
@@ -358,9 +336,9 @@ const buildStyles = _theme => StyleSheet.create({
   staticLabel: {
     includeFontPadding: false
   },
-  inputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
+  // Wraps FieldBase + the absolutely-positioned floating label so the label
+  // can sit over the field's top border without being clipped.
+  fieldWrapper: {
     position: 'relative',
     overflow: 'visible'
   },
@@ -374,19 +352,6 @@ const buildStyles = _theme => StyleSheet.create({
     position: 'absolute',
     zIndex: 1
   },
-  leftIconWrap: {
-    position: 'absolute',
-    top: 0,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  rightIconWrap: {
-    position: 'absolute',
-    top: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 4
-  },
   messageText: {
     includeFontPadding: false
   },

package/lib/module/components/ListItem/ListItem.js

@@ -6,7 +6,7 @@ import { fontFor, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { Swipeable } from "../Swipeable/index.js";
-import { SkeletonContent } from "../Skeleton/index.js";
+import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE_FALLBACK = {
   sm: {
@@ -74,9 +74,16 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
     accessibilityLabel,
     accessibilityHint,
     style,
+    containerStyle,
+    titleStyle,
+    subtitleStyle,
+    descriptionStyle,
+    leftSlotStyle,
+    rightSlotStyle,
     testID
   } = props;
   const theme = useTheme();
+  const pressHaptic = theme.components.listItem?.pressHaptic ?? false;
   const sz = useMemo(() => sizeFor(theme, size), [theme, size]);
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const isInteractive = !!onPress && !disabled;
@@ -89,7 +96,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = event => {
     if (!isInteractive) return;
-    triggerHaptic('selection');
+    if (pressHaptic) triggerHaptic('selection');
     onPress?.(event);
   };
   const a11yLabel = accessibilityLabel ?? title;
@@ -98,9 +105,9 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
       paddingVertical: sz.paddingVertical,
       minHeight: sz.minHeight,
       backgroundColor: selected ? theme.colors.surface.selected : 'transparent'
-    }, divider ? styles.divider : null, disabled ? styles.disabled : null],
+    }, divider ? styles.divider : null, disabled ? styles.disabled : null, containerStyle],
     children: [left ? /*#__PURE__*/_jsx(View, {
-      style: styles.leftSlot,
+      style: [styles.leftSlot, leftSlotStyle],
       children: left
     }) : null, /*#__PURE__*/_jsxs(View, {
       style: styles.middle,
@@ -109,26 +116,26 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
           fontSize: sz.titleSize,
           ...fontFor(theme, 'medium'),
           color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
-        }],
+        }, titleStyle],
         numberOfLines: 1,
         children: title ?? ' '
       }), subtitle ? /*#__PURE__*/_jsx(Text, {
         style: [styles.subtitle, {
           fontSize: sz.subtitleSize,
           color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary
-        }],
+        }, subtitleStyle],
         numberOfLines: 1,
         children: subtitle
       }) : null, description ? /*#__PURE__*/_jsx(Text, {
         style: [styles.description, {
           fontSize: sz.subtitleSize,
           color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary
-        }],
+        }, descriptionStyle],
         numberOfLines: 2,
         children: description
       }) : null]
     }), right || chevron ? /*#__PURE__*/_jsxs(View, {
-      style: styles.rightSlot,
+      style: [styles.rightSlot, rightSlotStyle],
       children: [right, chevron ? /*#__PURE__*/_jsx(View, {
         style: right ? styles.chevronWithRight : null,
         children: /*#__PURE__*/_jsx(Chevron, {
@@ -189,15 +196,87 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
     children: rendered
   }) : rendered;
   if (loading) {
-    return /*#__PURE__*/_jsx(SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: final
+    return /*#__PURE__*/_jsx(ListItemSkeleton, {
+      ...props
     });
   }
   return final;
 });
 ListItem.displayName = 'ListItem';
+
+/**
+ * Placeholder shape for `<ListItem>`. Mirrors the row anatomy: optional
+ * leading slot (avatar/icon), title + subtitle/description stack, optional
+ * trailing chevron. Heights respect the configured `size`.
+ */
+const ListItemSkeleton = ({
+  subtitle,
+  description,
+  left,
+  right,
+  chevron,
+  size = 'md',
+  containerStyle,
+  style
+}) => {
+  const theme = useTheme();
+  const sz = sizeFor(theme, size);
+  const titleHeight = Math.round(sz.titleSize * 1.15);
+  const subtitleHeight = Math.round(sz.subtitleSize * 1.15);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: sz.paddingVertical,
+      minHeight: sz.minHeight
+    }, containerStyle, style],
+    children: [left !== undefined ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginRight: theme.spacing.sm
+      },
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        shape: "circle",
+        width: 40,
+        height: 40
+      })
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "70%",
+        height: titleHeight,
+        style: {
+          marginBottom: theme.spacing.xs
+        }
+      }), subtitle !== undefined ? /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "50%",
+        height: subtitleHeight,
+        style: description !== undefined ? {
+          marginBottom: theme.spacing.xs
+        } : undefined
+      }) : null, description !== undefined ? /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "85%",
+        height: subtitleHeight
+      }) : null]
+    }), right !== undefined || chevron ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginLeft: theme.spacing.sm
+      },
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        width: 20,
+        height: 20,
+        radius: "sm"
+      })
+    }) : null]
+  });
+};
+ListItemSkeleton.displayName = 'ListItemSkeleton';
+ListItem.Skeleton = ListItemSkeleton;
 const buildStyles = theme => StyleSheet.create({
   row: {
     flexDirection: 'row',