react-native-system-ui 0.0.2 → 0.0.4

package/dist/es/{dropdown-menu → components/dropdown-menu}/DropdownItem.js

@@ -53,7 +53,9 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const panelContent = useMemo(() => {
     if (children) {
       return /*#__PURE__*/React.createElement(View, {
-        style: [styles.customPanel, panelStyle]
+        style: [styles.customPanel, {
+          padding: tokens.spacing.customPanelPadding
+        }, panelStyle]
       }, children);
     }
     if (!options?.length) {
@@ -73,17 +75,21 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (isText(activeIcon)) {
           return /*#__PURE__*/React.createElement(Text, {
             style: [styles.indicator, {
-              color
+              color,
+              marginLeft: tokens.spacing.indicatorMarginLeft
             }]
           }, activeIcon);
         }
         return /*#__PURE__*/React.createElement(View, {
-          style: styles.indicator
+          style: [styles.indicator, {
+            marginLeft: tokens.spacing.indicatorMarginLeft
+          }]
         }, activeIcon);
       }
       return /*#__PURE__*/React.createElement(Text, {
         style: [styles.indicator, {
-          color
+          color,
+          marginLeft: tokens.spacing.indicatorMarginLeft
         }]
       }, "\u2713");
     };
@@ -92,7 +98,9 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       if (/*#__PURE__*/React.isValidElement(optionIcon)) return optionIcon;
       if (isText(optionIcon)) {
         return /*#__PURE__*/React.createElement(Text, {
-          style: styles.optionIconText
+          style: [styles.optionIconText, {
+            fontSize: tokens.sizing.optionFontSize
+          }]
         }, optionIcon);
       }
       return optionIcon;
@@ -110,30 +118,38 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     };
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles.optionPanel, panelStyle]
+      style: [styles.optionPanel, {
+        paddingHorizontal: tokens.spacing.panelPaddingHorizontal
+      }, panelStyle]
     }, options.map(option => {
       const active = value === option.value;
       const optionText = getOptionText(option);
       const optionColor = option.disabled ? tokens.colors.disabledText : active ? activeTextColor : tokens.colors.text;
       return /*#__PURE__*/React.createElement(Pressable, {
         key: String(option.value),
-        style: [styles.optionRow, createHairlineBorderBottom('rgba(0,0,0,0.06)')],
+        style: [styles.optionRow, {
+          paddingVertical: tokens.spacing.optionRowPaddingVertical,
+          paddingHorizontal: tokens.spacing.optionRowPaddingHorizontal
+        }, createHairlineBorderBottom('rgba(0,0,0,0.06)')],
         onPress: () => handleSelect(option),
         disabled: option.disabled,
         testID: `rv-dropdown-option-${option.value}`
       }, /*#__PURE__*/React.createElement(View, {
         style: styles.optionLeft
       }, option.icon ? /*#__PURE__*/React.createElement(View, {
-        style: styles.optionIcon
+        style: [styles.optionIcon, {
+          marginRight: tokens.spacing.optionIconMarginRight
+        }]
       }, renderOptionIcon(option.icon)) : null, isText(optionText) ? /*#__PURE__*/React.createElement(Text, {
         style: [styles.optionText, {
-          color: optionColor
+          color: optionColor,
+          fontSize: tokens.sizing.optionFontSize
         }]
       }, optionText) : /*#__PURE__*/React.createElement(View, {
         style: styles.optionTextNode
       }, optionText)), active ? renderActiveIcon() : null);
     }));
-  }, [children, options, panelStyle, tokens, value, activeIcon, activeTextColor, closeMenu, closeOnSelect, menuValue, name, onMenuChange, triggerChange]);
+  }, [activeIcon, activeTextColor, children, closeMenu, closeOnSelect, menuValue, name, onMenuChange, options, panelStyle, tokens, triggerChange, value]);
   useEffect(() => {
     registerPanel(index, panelContent);
   }, [index, panelContent, registerPanel]);
@@ -175,12 +191,26 @@ const DropdownItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: displayColor
   }];
   const arrowStyle = [styles.arrow, {
-    borderTopColor: tokens.colors.arrow
+    borderTopColor: tokens.colors.arrow,
+    marginLeft: tokens.spacing.arrowMarginLeft,
+    width: tokens.sizing.arrowSize,
+    height: tokens.sizing.arrowSize,
+    borderLeftWidth: tokens.sizing.arrowBorderWidth,
+    borderRightWidth: tokens.sizing.arrowBorderWidth,
+    borderTopWidth: tokens.sizing.arrowBorderHeight,
+    borderLeftColor: tokens.colors.transparent,
+    borderRightColor: tokens.colors.transparent,
+    opacity: tokens.opacity.arrowInactive
   }, isActive && styles.arrowActive, isActive && {
-    borderBottomColor: activeColor ?? tokens.colors.activeText
+    borderBottomColor: activeColor ?? tokens.colors.activeText,
+    borderBottomWidth: tokens.sizing.arrowBorderHeight,
+    borderTopColor: tokens.colors.transparent,
+    opacity: tokens.opacity.arrowActive
   }];
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
-    style: [styles.item, barScrollable ? styles.itemScrollable : null, style],
+    style: [styles.item, barScrollable ? [styles.itemScrollable, {
+      paddingHorizontal: tokens.spacing.itemScrollablePaddingHorizontal
+    }] : null, style],
     onPress: handleToggle,
     accessibilityRole: "button",
     testID: `rv-dropdown-trigger-${index}`,
@@ -204,40 +234,21 @@ const styles = StyleSheet.create({
     minWidth: 0
   },
   itemScrollable: {
-    flex: 0,
-    paddingHorizontal: 12
+    flex: 0
   },
   titleNode: {
     flexShrink: 1,
     minWidth: 0
   },
-  arrow: {
-    marginLeft: 4,
-    width: 6,
-    height: 6,
-    borderLeftWidth: 3,
-    borderRightWidth: 3,
-    borderTopWidth: 4,
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent',
-    opacity: 0.8
-  },
+  arrow: {},
   arrowActive: {
-    borderTopWidth: 0,
-    borderBottomWidth: 4,
-    borderBottomColor: 'currentColor',
-    borderTopColor: 'transparent',
-    opacity: 1
-  },
-  optionPanel: {
-    paddingHorizontal: 0
+    borderTopWidth: 0
   },
+  optionPanel: {},
   optionRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 10,
-    paddingHorizontal: 16
+    justifyContent: 'space-between'
   },
   optionLeft: {
     flex: 1,
@@ -245,24 +256,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     minWidth: 0
   },
-  optionIcon: {
-    marginRight: 8
-  },
-  optionIconText: {
-    fontSize: 16
-  },
-  optionText: {
-    fontSize: 16
-  },
+  optionIcon: {},
+  optionIconText: {},
+  optionText: {},
   optionTextNode: {
     flex: 1
   },
-  indicator: {
-    marginLeft: 12
-  },
-  customPanel: {
-    padding: 16
-  }
+  indicator: {},
+  customPanel: {}
 });
 DropdownItem.displayName = 'DropdownMenu.Item';
 export default DropdownItem;

package/dist/es/{dropdown-menu → components/dropdown-menu}/DropdownMenu.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Animated, Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { measureInWindow, nativeDriverEnabled } from '../../platform';
@@ -167,7 +167,7 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     animationRef.current?.stop();
   }, []);
   const barScrollable = threshold !== undefined && React.Children.count(children) > threshold;
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     activeIndex,
     registerPanel,
     toggleItem,
@@ -179,7 +179,7 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     disabled,
     menuValue,
     onMenuChange
-  }), [activeColor, activeIcon, activeIndex, closeMenu, direction, disabled, registerPanel, showItem, toggleItem, menuValue, onMenuChange]);
+  };
   const shouldRenderMask = mounted && (overlay || closeOnClickOutside);
   const shouldCloseOnMask = closeOnClickOverlay || closeOnClickOutside;
   const resolvedBarTop = barFrame?.y ?? 0;
@@ -188,29 +188,25 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const resolvedBarWidth = barFrame?.width ?? (barWidth || windowWidth);
   const resolvedBarBottom = resolvedBarTop + resolvedBarHeight;
   const bottomInset = Math.max(0, windowHeight - resolvedBarTop);
-  const insetStyle = useMemo(() => direction === 'up' ? {
+  const insetStyle = direction === 'up' ? {
     bottom: bottomInset
   } : {
     top: resolvedBarBottom
-  }, [bottomInset, direction, resolvedBarBottom]);
-  const panelPositionStyle = useMemo(() => ({
+  };
+  const panelPositionStyle = {
     left: resolvedBarLeft,
     width: resolvedBarWidth
-  }), [resolvedBarLeft, resolvedBarWidth]);
+  };
   const panelRadiusStyle = direction === 'up' ? styles.panelUp : styles.panelDown;
-  const panelAnimatedStyle = useMemo(() => {
-    const offset = 8;
-    const translate = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: direction === 'up' ? [offset, 0] : [-offset, 0]
-    });
-    return {
-      opacity: progress,
-      transform: [{
-        translateY: translate
-      }]
-    };
-  }, [direction, progress]);
+  const panelAnimatedStyle = {
+    opacity: progress,
+    transform: [{
+      translateY: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: direction === 'up' ? [8, 0] : [-8, 0]
+      })
+    }]
+  };
   const {
     zIndex: stackZIndex
   } = useOverlayStack({
@@ -220,21 +216,21 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     type: 'dropdown-menu'
   });
   const resolvedZIndex = stackZIndex ?? zIndex;
-  const barChildren = useMemo(() => React.Children.map(children, (child, index) => {
+  const barChildren = React.Children.map(children, (child, index) => {
     if (! /*#__PURE__*/React.isValidElement(child)) return child;
     const element = child;
     return /*#__PURE__*/React.cloneElement(element, {
       index,
       barScrollable
     });
-  }), [barScrollable, children]);
-  const barStyle = useMemo(() => [styles.barWrapper, {
+  });
+  const barStyle = [styles.barWrapper, {
     height: tokens.sizing.barHeight,
     backgroundColor: tokens.colors.barBackground,
     paddingHorizontal: tokens.spacing.horizontal,
     zIndex: mounted ? resolvedZIndex + 1 : undefined,
     ...tokens.shadow
-  }, createHairlineBorderBottom(tokens.colors.divider)], [mounted, resolvedZIndex, tokens.colors.barBackground, tokens.colors.divider, tokens.shadow, tokens.sizing.barHeight, tokens.spacing.horizontal]);
+  }, createHairlineBorderBottom(tokens.colors.divider)];
   const handleBarLayout = useCallback(event => {
     const {
       height,

package/dist/es/{dropdown-menu → components/dropdown-menu}/tokens.js

@@ -16,18 +16,35 @@ const createTokens = foundations => {
       panelBackground: '#ffffff',
       mask: 'rgba(0,0,0,0.45)',
       divider: palette.default[200],
-      barBackground: '#ffffff'
+      barBackground: '#ffffff',
+      transparent: 'transparent'
     },
     spacing: {
       horizontal: spacing.md,
       vertical: spacing.sm,
-      titlePadding: spacing.xs
+      titlePadding: spacing.xs,
+      customPanelPadding: spacing.lg,
+      optionRowPaddingHorizontal: spacing.lg,
+      optionRowPaddingVertical: 10,
+      itemScrollablePaddingHorizontal: spacing.md,
+      arrowMarginLeft: spacing.xs,
+      optionIconMarginRight: spacing.sm,
+      indicatorMarginLeft: spacing.md,
+      panelPaddingHorizontal: spacing.none
     },
     sizing: {
       barHeight: 48,
       titleFontSize: 15,
       titleLineHeight: fontSize.lg * typography.lineHeightMultiplier,
-      panelMaxHeight: 320
+      panelMaxHeight: 320,
+      optionFontSize: fontSize.md,
+      arrowSize: 6,
+      arrowBorderWidth: 3,
+      arrowBorderHeight: 4
+    },
+    opacity: {
+      arrowInactive: 0.8,
+      arrowActive: 1
     },
     shadow: {
       shadowColor: 'rgba(100, 101, 102, 0.12)',

package/dist/es/{field → components/field}/Field.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useId, useImperativeHandle, useRef, useState } from 'react';
 import { Platform, Pressable, Text, TextInput, View } from 'react-native';
 import { Clear, QuestionO } from 'react-native-system-icon';
 import Cell from '../cell';
@@ -80,7 +80,7 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
   const clearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
   const rows = rowsProp ?? tokens.defaults.rows;
   const formatTrigger = formatTriggerProp ?? tokens.defaults.formatTrigger;
-  const mergedTitleStyle = useMemo(() => [{
+  const mergedTitleStyle = [{
     width: labelWidth,
     minWidth: labelWidth,
     maxWidth: labelWidth,
@@ -88,7 +88,7 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
     marginRight: tokens.spacing.labelGap,
     flexShrink: 0,
     flexGrow: 0
-  }, titleStyle], [labelWidth, titleStyle, tokens.spacing.labelGap]);
+  }, titleStyle];
   const resolvedSuffix = suffixProp ?? button;
   const resolvedDescription = intro ?? description;
   const resolvedPlaceholderColor = placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder);
@@ -101,10 +101,10 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
   const inputRef = useRef(null);
   const introId = useId();
   const errorId = useId();
-  const describedBy = useMemo(() => {
+  const describedBy = (() => {
     const ids = [isRenderable(errorMessage) ? errorId : null, isRenderable(resolvedDescription) ? introId : null].filter(Boolean);
     return ids.length ? ids : undefined;
-  }, [errorId, errorMessage, introId, resolvedDescription]);
+  })();
   const lineHeight = tokens.defaults.textareaLineHeight;
   const autoSizeConfig = autoSize && isObject(autoSize) ? autoSize : undefined;
   const minRows = !isTextarea ? 1 : autoSizeConfig && isDef(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows);
@@ -378,10 +378,10 @@ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }, resolvedDescription);
   };
-  const contentWrapperStyle = useMemo(() => [{
+  const contentWrapperStyle = [{
     width: '100%',
     justifyContent: alignMap[controlAlign]
-  }, contentStyle], [contentStyle, controlAlign]);
+  }, contentStyle];
   const renderAffix = node => {
     if (isText(node)) {
       return /*#__PURE__*/React.createElement(Text, {

package/dist/es/{field → components/field}/index.js

@@ -1,6 +1,6 @@
 import Field from './Field';
 import { CellGroup as FieldGroup } from '../cell';
-export { useFieldTokens } from './tokens';
 export { FieldGroup };
+export { useFieldTokens } from './tokens';
 export default Field;
 export { Field };

package/dist/es/{form → components/form}/Form.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { isPromiseLike } from '../../utils/promise';
 import { isNumber, isString, isText } from '../../utils/validate';
@@ -226,7 +226,7 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
       return next;
     });
   }, [notify, onValuesChange, runFieldValidation]);
-  const formApi = useMemo(() => ({
+  const formApi = {
     submit: async () => {
       try {
         const result = await validateFields();
@@ -278,12 +278,12 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     validateFields,
     getFieldError: name => errorsRef.current[serializeNamePath(name)] ?? []
-  }), [notify, onFinish, onValuesChange, validateFields, runFieldValidation]);
+  };
   useImperativeHandle(ref, () => formApi, [formApi]);
   const getFieldError = useCallback(name => errors[serializeNamePath(name)], [errors]);
   const getFieldValue = useCallback(name => getValueByName(values, name), [values]);
   const contextValidateField = useCallback((name, trigger) => runFieldValidation(name, trigger), [runFieldValidation]);
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     values,
     getFieldValue,
     setFieldValue,
@@ -299,7 +299,7 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
     colon,
     labelWidth,
     showValidateMessage
-  }), [values, setFieldValue, registerField, getFieldError, contextValidateField, formApi, colon, labelWidth, showValidateMessage]);
+  };
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({
@@ -309,11 +309,7 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
 InternalForm.displayName = 'Form';
 export const useWatch = (name, formRef) => {
   const context = useContext(FormContext);
-  const names = useMemo(() => {
-    if (name === undefined) return undefined;
-    if (!Array.isArray(name)) return [name];
-    return name.length && isText(name[0]) ? [name] : name;
-  }, [name]);
+  const names = name === undefined ? undefined : !Array.isArray(name) ? [name] : name.length && isText(name[0]) ? [name] : name;
   const getSnapshot = useCallback(allValues => {
     const source = allValues ?? context?.getFieldsValue?.() ?? formRef?.current?.getFieldsValue?.() ?? {};
     if (!names) return source;

package/dist/es/{grid → components/grid}/Grid.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useMemo } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import { createHairlineView } from '../../utils';
 import { GridContext } from './GridContext';
@@ -55,7 +55,7 @@ export const Grid = props => {
       bottom: 0
     })]
   });
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     columnNum,
     gutter,
     border,
@@ -68,7 +68,7 @@ export const Grid = props => {
     iconColor,
     count: childArray.length,
     tokens
-  }), [border, center, childArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
+  };
   return /*#__PURE__*/React.createElement(GridContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({

package/dist/es/{image → components/image}/Image.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ActivityIndicator, Image as RNImage, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 import { isNumber, isString, isText } from '../../utils';
@@ -100,24 +100,30 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
   const fit = fitProp ?? tokens.defaults.fit;
   const showLoading = showLoadingProp ?? tokens.defaults.showLoading;
   const showError = showErrorProp ?? tokens.defaults.showError;
-  const loadingText = loadingTextProp ?? tokens.defaults.loadingText;
-  const errorText = errorTextProp ?? tokens.defaults.errorText;
+  const loadingText = loadingTextProp !== undefined ? loadingTextProp : tokens.defaults.loadingText;
+  const errorText = errorTextProp !== undefined ? errorTextProp : tokens.defaults.errorText;
   const {
     container: containerLayoutStyle,
     image: imageStyleWithoutLayout
-  } = useMemo(() => splitImageStyle(style), [style]);
-  const actualSource = useMemo(() => {
-    if (source) return source;
-    if (src) return {
-      uri: src
-    };
-    return undefined;
-  }, [source, src]);
+  } = splitImageStyle(style);
+  const actualSource = source ? source : src ? {
+    uri: src
+  } : undefined;
+  const sourceKey = (() => {
+    if (source) {
+      if (typeof source === 'number') return `res:${source}`;
+      const uri = resolveSourceUri(source);
+      if (uri) return `uri:${uri}`;
+      return 'source:unknown';
+    }
+    if (src) return `src:${src}`;
+    return 'none';
+  })();
   const resolvedAccessibilityLabel = alt ?? accessibilityLabel ?? ariaLabel;
   const [status, setStatus] = useState(() => actualSource ? 'loading' : 'idle');
   useEffect(() => {
     setStatus(actualSource ? 'loading' : 'idle');
-  }, [actualSource]);
+  }, [sourceKey]);
   const handleLoad = useCallback(event => {
     setStatus('loaded');
     onLoad?.(event);
@@ -139,10 +145,8 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
   }, [handleError]);
   const uri = resolveSourceUri(actualSource);
-  const isSvg = useMemo(() => {
-    const normalizedUri = isString(uri) ? uri.toLowerCase() : undefined;
-    return isString(normalizedUri) && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
-  }, [uri]);
+  const normalizedUri = isString(uri) ? uri.toLowerCase() : undefined;
+  const isSvg = !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
   const resolvedLoadingSize = isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
   const resolvedErrorIconSize = iconSizeProp ?? tokens.defaults.iconSize;
   const containerRole = onPress ? 'button' : undefined;