@ankhorage/surface 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @ankhorage/surface
 
+## 1.2.0
+
+### Minor Changes
+
+- 73fd969: Add a render-only Image primitive.
+
+  This introduces a Surface `Image` component with string and React Native image source support, token-aware sizing and radius props, `fit`/`resizeMode` behavior, accessibility label mapping, and provider-neutral `fallbackSource` handling for load errors.
+
 ## 1.1.0
 
 ### Minor Changes

package/README.md

@@ -23,9 +23,18 @@ bun add @ankhorage/surface
 ## 📦 Usage
 
 ```tsx
-import { Box, Text } from '@ankhorage/surface';
+import { Box, Image, Text } from '@ankhorage/surface';
 
 <Box padding="lg" gap="md">
+  <Image
+    alt="Hero image"
+    fallbackSource="https://example.com/hero-fallback.jpg"
+    fit="cover"
+    height={240}
+    radius="l"
+    source="https://example.com/hero.jpg"
+    width="100%"
+  />
   <Text variant="title">Title</Text>
   <Text>Content</Text>
 </Box>;

package/dist/index.d.ts

@@ -50,6 +50,8 @@ export type { HeadingLevel, HeadingProps } from './primitives/heading';
 export { Heading } from './primitives/heading';
 export type { IconProps, IconProvider } from './primitives/icon';
 export { Icon } from './primitives/icon';
+export type { ImageFit, ImageProps, SurfaceImageSource } from './primitives/image';
+export { Image } from './primitives/image';
 export type { TextProps } from './primitives/text';
 export { Text } from './primitives/text';
 export * from './theme';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -25,6 +25,7 @@ export * from './layout';
 export { ButtonBase } from './primitives/button-base';
 export { Heading } from './primitives/heading';
 export { Icon } from './primitives/icon';
+export { Image } from './primitives/image';
 export { Text } from './primitives/text';
 export * from './theme';
 export { isDeepEqual } from './utils/deepEqual';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAW3C,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,MAAM,EACN,UAAU,GACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonIconSpec, ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxProps } from './components/checkbox';\nexport { Checkbox } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { FieldProps } from './components/field';\nexport { Field } from './components/field';\nexport type { HelperTextProps } from './components/helper-text';\nexport { HelperText } from './components/helper-text';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { LabelProps } from './components/label';\nexport { Label } from './components/label';\nexport type { ListItemProps } from './components/list-item';\nexport { ListItem } from './components/list-item';\nexport type { MenuItem, MenuProps } from './components/menu';\nexport { Menu } from './components/menu';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type {\n  DrawerNavigationItemProps,\n  DrawerNavigationProps,\n  NavigationItemIcon,\n  NavigationItemProps,\n  NavigationItemSpec,\n  NavigationListProps,\n  TabBarItemProps,\n  TabBarProps,\n} from './components/navigation';\nexport {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';\nexport type { RadioProps } from './components/radio';\nexport { Radio } from './components/radio';\nexport type { SwitchProps } from './components/switch';\nexport { Switch } from './components/switch';\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';\nexport { Tab, TabList, TabPanel, Tabs } from './components/tabs';\nexport type { TextInputProps } from './components/text-input';\nexport { TextInput } from './components/text-input';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToastOptions, ToastProps, ToastTone } from './components/toast';\nexport { Toast, ToastProvider, useToast } from './components/toast';\nexport type { TooltipProps } from './components/tooltip';\nexport { Tooltip } from './components/tooltip';\nexport type { FontRuntime } from './context/FontContext';\nexport { FontProvider, useFontContext } from './context/FontContext';\nexport type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';\nexport { TranslationProvider, useTranslationContext } from './context/TranslationContext';\nexport * from './core/responsive';\nexport * from './layout';\nexport type { ButtonBaseProps } from './primitives/button-base';\nexport { ButtonBase } from './primitives/button-base';\nexport type { HeadingLevel, HeadingProps } from './primitives/heading';\nexport { Heading } from './primitives/heading';\nexport type { IconProps, IconProvider } from './primitives/icon';\nexport { Icon } from './primitives/icon';\nexport type { TextProps } from './primitives/text';\nexport { Text } from './primitives/text';\nexport * from './theme';\nexport { isDeepEqual } from './utils/deepEqual';\nexport { deepMerge } from './utils/deepMerge';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAW3C,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,MAAM,EACN,UAAU,GACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonIconSpec, ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxProps } from './components/checkbox';\nexport { Checkbox } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { FieldProps } from './components/field';\nexport { Field } from './components/field';\nexport type { HelperTextProps } from './components/helper-text';\nexport { HelperText } from './components/helper-text';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { LabelProps } from './components/label';\nexport { Label } from './components/label';\nexport type { ListItemProps } from './components/list-item';\nexport { ListItem } from './components/list-item';\nexport type { MenuItem, MenuProps } from './components/menu';\nexport { Menu } from './components/menu';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type {\n  DrawerNavigationItemProps,\n  DrawerNavigationProps,\n  NavigationItemIcon,\n  NavigationItemProps,\n  NavigationItemSpec,\n  NavigationListProps,\n  TabBarItemProps,\n  TabBarProps,\n} from './components/navigation';\nexport {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';\nexport type { RadioProps } from './components/radio';\nexport { Radio } from './components/radio';\nexport type { SwitchProps } from './components/switch';\nexport { Switch } from './components/switch';\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';\nexport { Tab, TabList, TabPanel, Tabs } from './components/tabs';\nexport type { TextInputProps } from './components/text-input';\nexport { TextInput } from './components/text-input';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToastOptions, ToastProps, ToastTone } from './components/toast';\nexport { Toast, ToastProvider, useToast } from './components/toast';\nexport type { TooltipProps } from './components/tooltip';\nexport { Tooltip } from './components/tooltip';\nexport type { FontRuntime } from './context/FontContext';\nexport { FontProvider, useFontContext } from './context/FontContext';\nexport type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';\nexport { TranslationProvider, useTranslationContext } from './context/TranslationContext';\nexport * from './core/responsive';\nexport * from './layout';\nexport type { ButtonBaseProps } from './primitives/button-base';\nexport { ButtonBase } from './primitives/button-base';\nexport type { HeadingLevel, HeadingProps } from './primitives/heading';\nexport { Heading } from './primitives/heading';\nexport type { IconProps, IconProvider } from './primitives/icon';\nexport { Icon } from './primitives/icon';\nexport type { ImageFit, ImageProps, SurfaceImageSource } from './primitives/image';\nexport { Image } from './primitives/image';\nexport type { TextProps } from './primitives/text';\nexport { Text } from './primitives/text';\nexport * from './theme';\nexport { isDeepEqual } from './utils/deepEqual';\nexport { deepMerge } from './utils/deepMerge';\n"]}

package/dist/primitives/image/Image.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ImageProps } from './types';
+export declare function Image({ source, fallbackSource, alt, accessibilityLabel, width, height, aspectRatio, fit, resizeMode, radius, style, testID, onError, }: ImageProps): React.JSX.Element | null;
+//# sourceMappingURL=Image.d.ts.map

package/dist/primitives/image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/primitives/image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,cAAc,EACd,GAAG,EACH,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,EACH,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,UAAU,4BAsCZ"}

package/dist/primitives/image/Image.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Image as RNImage } from 'react-native';
+import { useTheme } from '../../theme/ThemeContext';
+import { getSourceKey, normalizeSource, resolveAccessibilityLabel, resolveAlt, resolveImageStyle, resolveRenderedSource, resolveResizeMode, } from './resolveImageProps';
+export function Image({ source, fallbackSource, alt, accessibilityLabel, width, height, aspectRatio, fit, resizeMode, radius, style, testID, onError, }) {
+    const { theme } = useTheme();
+    const [showFallback, setShowFallback] = React.useState(false);
+    const primaryKey = React.useMemo(() => getSourceKey(source), [source]);
+    React.useEffect(() => {
+        setShowFallback(false);
+    }, [primaryKey]);
+    const normalizedPrimary = normalizeSource(source);
+    const normalizedFallback = normalizeSource(fallbackSource);
+    const resolvedSource = resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback);
+    if (!resolvedSource)
+        return null;
+    const resolvedResizeMode = resolveResizeMode(fit, resizeMode);
+    const resolvedAccessibilityLabel = resolveAccessibilityLabel(alt, accessibilityLabel);
+    const resolvedAlt = resolveAlt(alt, accessibilityLabel);
+    const resolvedStyle = resolveImageStyle(theme, { width, height, aspectRatio, radius });
+    return (<RNImage accessibilityLabel={resolvedAccessibilityLabel} accessibilityRole="image" alt={resolvedAlt} onError={(event) => {
+            onError?.(event);
+            if (!showFallback && normalizedFallback) {
+                setShowFallback(true);
+            }
+        }} resizeMode={resolvedResizeMode} source={resolvedSource} style={[resolvedStyle, style]} testID={testID}/>);
+}
+//# sourceMappingURL=Image.js.map

package/dist/primitives/image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/primitives/image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EACL,YAAY,EACZ,eAAe,EACf,yBAAyB,EACzB,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,cAAc,EACd,GAAG,EACH,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,EACH,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,GACI;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEvE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;IAElG,IAAI,CAAC,cAAc;QAAE,OAAO,IAAI,CAAC;IAEjC,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC9D,MAAM,0BAA0B,GAAG,yBAAyB,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IACtF,MAAM,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;IAEvF,OAAO,CACL,CAAC,OAAO,CACN,kBAAkB,CAAC,CAAC,0BAA0B,CAAC,CAC/C,iBAAiB,CAAC,OAAO,CACzB,GAAG,CAAC,CAAC,WAAW,CAAC,CACjB,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;YAEjB,IAAI,CAAC,YAAY,IAAI,kBAAkB,EAAE,CAAC;gBACxC,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CACF,UAAU,CAAC,CAAC,kBAAkB,CAAC,CAC/B,MAAM,CAAC,CAAC,cAAc,CAAC,CACvB,KAAK,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAC9B,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { Image as RNImage } from 'react-native';\n\nimport { useTheme } from '../../theme/ThemeContext';\nimport {\n  getSourceKey,\n  normalizeSource,\n  resolveAccessibilityLabel,\n  resolveAlt,\n  resolveImageStyle,\n  resolveRenderedSource,\n  resolveResizeMode,\n} from './resolveImageProps';\nimport type { ImageProps } from './types';\n\nexport function Image({\n  source,\n  fallbackSource,\n  alt,\n  accessibilityLabel,\n  width,\n  height,\n  aspectRatio,\n  fit,\n  resizeMode,\n  radius,\n  style,\n  testID,\n  onError,\n}: ImageProps) {\n  const { theme } = useTheme();\n  const [showFallback, setShowFallback] = React.useState(false);\n  const primaryKey = React.useMemo(() => getSourceKey(source), [source]);\n\n  React.useEffect(() => {\n    setShowFallback(false);\n  }, [primaryKey]);\n\n  const normalizedPrimary = normalizeSource(source);\n  const normalizedFallback = normalizeSource(fallbackSource);\n  const resolvedSource = resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback);\n\n  if (!resolvedSource) return null;\n\n  const resolvedResizeMode = resolveResizeMode(fit, resizeMode);\n  const resolvedAccessibilityLabel = resolveAccessibilityLabel(alt, accessibilityLabel);\n  const resolvedAlt = resolveAlt(alt, accessibilityLabel);\n  const resolvedStyle = resolveImageStyle(theme, { width, height, aspectRatio, radius });\n\n  return (\n    <RNImage\n      accessibilityLabel={resolvedAccessibilityLabel}\n      accessibilityRole=\"image\"\n      alt={resolvedAlt}\n      onError={(event) => {\n        onError?.(event);\n\n        if (!showFallback && normalizedFallback) {\n          setShowFallback(true);\n        }\n      }}\n      resizeMode={resolvedResizeMode}\n      source={resolvedSource}\n      style={[resolvedStyle, style]}\n      testID={testID}\n    />\n  );\n}\n"]}

package/dist/primitives/image/index.d.ts

@@ -0,0 +1,3 @@
+export { Image } from './Image';
+export type { ImageFit, ImageProps, SurfaceImageSource } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/dist/primitives/image/index.js

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+//# sourceMappingURL=index.js.map

package/dist/primitives/image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Image } from './Image';\nexport type { ImageFit, ImageProps, SurfaceImageSource } from './types';\n"]}

package/dist/primitives/image/resolveImageProps.d.ts

@@ -0,0 +1,12 @@
+import type { ImageResizeMode, ImageSourcePropType } from 'react-native';
+import type { ImageStyle } from 'react-native';
+import type { SurfaceTheme } from '../../theme/types';
+import type { ImageProps, SurfaceImageSource } from './types';
+export declare function normalizeSource(source: SurfaceImageSource | null | undefined): ImageSourcePropType | undefined;
+export declare function resolveRenderedSource(normalizedPrimary: ImageSourcePropType | undefined, normalizedFallback: ImageSourcePropType | undefined, showFallback: boolean): ImageSourcePropType | undefined;
+export declare function getSourceKey(source: SurfaceImageSource | null | undefined): string | null;
+export declare function resolveResizeMode(fit: ImageProps['fit'], resizeMode: ImageProps['resizeMode']): ImageResizeMode;
+export declare function resolveAccessibilityLabel(alt: ImageProps['alt'], accessibilityLabel: ImageProps['accessibilityLabel']): string | undefined;
+export declare function resolveAlt(alt: ImageProps['alt'], accessibilityLabel: ImageProps['accessibilityLabel']): string | undefined;
+export declare function resolveImageStyle(theme: SurfaceTheme, props: Pick<ImageProps, 'width' | 'height' | 'aspectRatio' | 'radius'>): ImageStyle;
+//# sourceMappingURL=resolveImageProps.d.ts.map

package/dist/primitives/image/resolveImageProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveImageProps.d.ts","sourceRoot":"","sources":["../../../src/primitives/image/resolveImageProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE9D,wBAAgB,eAAe,CAC7B,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAC5C,mBAAmB,GAAG,SAAS,CAIjC;AAED,wBAAgB,qBAAqB,CACnC,iBAAiB,EAAE,mBAAmB,GAAG,SAAS,EAClD,kBAAkB,EAAE,mBAAmB,GAAG,SAAS,EACnD,YAAY,EAAE,OAAO,GACpB,mBAAmB,GAAG,SAAS,CAGjC;AAYD,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAmBzF;AAED,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,EACtB,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,GACnC,eAAe,CAEjB;AAED,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,EACtB,kBAAkB,EAAE,UAAU,CAAC,oBAAoB,CAAC,GACnD,MAAM,GAAG,SAAS,CAEpB;AAED,wBAAgB,UAAU,CACxB,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,EACtB,kBAAkB,EAAE,UAAU,CAAC,oBAAoB,CAAC,GACnD,MAAM,GAAG,SAAS,CAEpB;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,CAAC,GACrE,UAAU,CAYZ"}

package/dist/primitives/image/resolveImageProps.js

@@ -0,0 +1,67 @@
+import { resolveToken } from '../../theme/resolveToken';
+export function normalizeSource(source) {
+    if (source === null || source === undefined)
+        return undefined;
+    if (typeof source === 'string')
+        return { uri: source };
+    return source;
+}
+export function resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback) {
+    if (showFallback || !normalizedPrimary)
+        return normalizedFallback;
+    return normalizedPrimary;
+}
+function getUriFromSource(source) {
+    if (Array.isArray(source)) {
+        const [first] = source;
+        return first?.uri;
+    }
+    if (typeof source === 'number')
+        return undefined;
+    return source.uri;
+}
+export function getSourceKey(source) {
+    if (source === null || source === undefined)
+        return null;
+    if (typeof source === 'string')
+        return `uri:${source}`;
+    if (typeof source === 'number')
+        return `asset:${source}`;
+    if (Array.isArray(source)) {
+        const parts = source
+            .map((item) => item.uri)
+            .filter((value) => typeof value === 'string');
+        return `uri-set:${parts.join('|')}`;
+    }
+    const uri = getUriFromSource(source);
+    if (uri)
+        return `uri:${uri}`;
+    try {
+        return `src:${JSON.stringify(source)}`;
+    }
+    catch {
+        return 'src:unknown';
+    }
+}
+export function resolveResizeMode(fit, resizeMode) {
+    return fit ?? resizeMode ?? 'cover';
+}
+export function resolveAccessibilityLabel(alt, accessibilityLabel) {
+    return accessibilityLabel ?? alt;
+}
+export function resolveAlt(alt, accessibilityLabel) {
+    return alt ?? accessibilityLabel;
+}
+export function resolveImageStyle(theme, props) {
+    const width = resolveToken(theme.spacing, props.width);
+    const height = resolveToken(theme.spacing, props.height);
+    const borderRadius = resolveToken(theme.radii, props.radius);
+    return {
+        width,
+        height,
+        aspectRatio: props.aspectRatio,
+        borderRadius,
+        overflow: borderRadius !== undefined ? 'hidden' : undefined,
+    };
+}
+//# sourceMappingURL=resolveImageProps.js.map

package/dist/primitives/image/resolveImageProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveImageProps.js","sourceRoot":"","sources":["../../../src/primitives/image/resolveImageProps.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ImageResizeMode, ImageSourcePropType } from 'react-native';\nimport type { ImageStyle } from 'react-native';\n\nimport { resolveToken } from '../../theme/resolveToken';\nimport type { SurfaceTheme } from '../../theme/types';\nimport type { ImageProps, SurfaceImageSource } from './types';\n\nexport function normalizeSource(\n  source: SurfaceImageSource | null | undefined,\n): ImageSourcePropType | undefined {\n  if (source === null || source === undefined) return undefined;\n  if (typeof source === 'string') return { uri: source };\n  return source;\n}\n\nexport function resolveRenderedSource(\n  normalizedPrimary: ImageSourcePropType | undefined,\n  normalizedFallback: ImageSourcePropType | undefined,\n  showFallback: boolean,\n): ImageSourcePropType | undefined {\n  if (showFallback || !normalizedPrimary) return normalizedFallback;\n  return normalizedPrimary;\n}\n\nfunction getUriFromSource(source: ImageSourcePropType): string | undefined {\n  if (Array.isArray(source)) {\n    const [first] = source;\n    return first?.uri;\n  }\n\n  if (typeof source === 'number') return undefined;\n  return source.uri;\n}\n\nexport function getSourceKey(source: SurfaceImageSource | null | undefined): string | null {\n  if (source === null || source === undefined) return null;\n  if (typeof source === 'string') return `uri:${source}`;\n  if (typeof source === 'number') return `asset:${source}`;\n  if (Array.isArray(source)) {\n    const parts = source\n      .map((item) => item.uri)\n      .filter((value): value is string => typeof value === 'string');\n    return `uri-set:${parts.join('|')}`;\n  }\n\n  const uri = getUriFromSource(source);\n  if (uri) return `uri:${uri}`;\n\n  try {\n    return `src:${JSON.stringify(source)}`;\n  } catch {\n    return 'src:unknown';\n  }\n}\n\nexport function resolveResizeMode(\n  fit: ImageProps['fit'],\n  resizeMode: ImageProps['resizeMode'],\n): ImageResizeMode {\n  return fit ?? resizeMode ?? 'cover';\n}\n\nexport function resolveAccessibilityLabel(\n  alt: ImageProps['alt'],\n  accessibilityLabel: ImageProps['accessibilityLabel'],\n): string | undefined {\n  return accessibilityLabel ?? alt;\n}\n\nexport function resolveAlt(\n  alt: ImageProps['alt'],\n  accessibilityLabel: ImageProps['accessibilityLabel'],\n): string | undefined {\n  return alt ?? accessibilityLabel;\n}\n\nexport function resolveImageStyle(\n  theme: SurfaceTheme,\n  props: Pick<ImageProps, 'width' | 'height' | 'aspectRatio' | 'radius'>,\n): ImageStyle {\n  const width = resolveToken(theme.spacing, props.width);\n  const height = resolveToken(theme.spacing, props.height);\n  const borderRadius = resolveToken(theme.radii, props.radius);\n\n  return {\n    width,\n    height,\n    aspectRatio: props.aspectRatio,\n    borderRadius,\n    overflow: borderRadius !== undefined ? 'hidden' : undefined,\n  };\n}\n"]}

package/dist/primitives/image/types.d.ts

@@ -0,0 +1,21 @@
+import type { ImageProps as ReactNativeImageProps, ImageResizeMode, ImageSourcePropType } from 'react-native';
+import type { ImageStyle, StyleProp } from 'react-native';
+import type { SurfaceTheme } from '../../theme/types';
+export type SurfaceImageSource = string | ImageSourcePropType;
+export type ImageFit = ImageResizeMode;
+export interface ImageProps {
+    source?: SurfaceImageSource | null;
+    fallbackSource?: SurfaceImageSource | null;
+    alt?: string;
+    accessibilityLabel?: string;
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: number;
+    fit?: ImageFit;
+    resizeMode?: ImageResizeMode;
+    radius?: number | keyof SurfaceTheme['radii'];
+    style?: StyleProp<ImageStyle>;
+    testID?: string;
+    onError?: ReactNativeImageProps['onError'];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/primitives/image/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/primitives/image/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,IAAI,qBAAqB,EACnC,eAAe,EACf,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,mBAAmB,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC;AAEvC,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C"}

package/dist/primitives/image/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/primitives/image/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/primitives/image/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ImageProps as ReactNativeImageProps,\n  ImageResizeMode,\n  ImageSourcePropType,\n} from 'react-native';\nimport type { ImageStyle, StyleProp } from 'react-native';\n\nimport type { SurfaceTheme } from '../../theme/types';\n\nexport type SurfaceImageSource = string | ImageSourcePropType;\n\nexport type ImageFit = ImageResizeMode;\n\nexport interface ImageProps {\n  source?: SurfaceImageSource | null;\n  fallbackSource?: SurfaceImageSource | null;\n  alt?: string;\n  accessibilityLabel?: string;\n  width?: number | string;\n  height?: number | string;\n  aspectRatio?: number;\n  fit?: ImageFit;\n  resizeMode?: ImageResizeMode;\n  radius?: number | keyof SurfaceTheme['radii'];\n  style?: StyleProp<ImageStyle>;\n  testID?: string;\n  onError?: ReactNativeImageProps['onError'];\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.4",
-    "@ankhorage/contracts": "^1.1.0"
+    "@ankhorage/contracts": "^1.2.0"
   },
   "files": [
     "dist",

package/src/index.test.ts

@@ -33,6 +33,7 @@ const expectedRootExports = [
   "export { Tooltip } from './components/tooltip';",
   "export * from './core/responsive';",
   "export * from './layout';",
+  "export { Image } from './primitives/image';",
   "export * from './theme';",
 ] as const;
 

package/src/index.ts

@@ -66,6 +66,8 @@ export type { HeadingLevel, HeadingProps } from './primitives/heading';
 export { Heading } from './primitives/heading';
 export type { IconProps, IconProvider } from './primitives/icon';
 export { Icon } from './primitives/icon';
+export type { ImageFit, ImageProps, SurfaceImageSource } from './primitives/image';
+export { Image } from './primitives/image';
 export type { TextProps } from './primitives/text';
 export { Text } from './primitives/text';
 export * from './theme';

package/src/primitives/image/Image.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Image as RNImage } from 'react-native';
+
+import { useTheme } from '../../theme/ThemeContext';
+import {
+  getSourceKey,
+  normalizeSource,
+  resolveAccessibilityLabel,
+  resolveAlt,
+  resolveImageStyle,
+  resolveRenderedSource,
+  resolveResizeMode,
+} from './resolveImageProps';
+import type { ImageProps } from './types';
+
+export function Image({
+  source,
+  fallbackSource,
+  alt,
+  accessibilityLabel,
+  width,
+  height,
+  aspectRatio,
+  fit,
+  resizeMode,
+  radius,
+  style,
+  testID,
+  onError,
+}: ImageProps) {
+  const { theme } = useTheme();
+  const [showFallback, setShowFallback] = React.useState(false);
+  const primaryKey = React.useMemo(() => getSourceKey(source), [source]);
+
+  React.useEffect(() => {
+    setShowFallback(false);
+  }, [primaryKey]);
+
+  const normalizedPrimary = normalizeSource(source);
+  const normalizedFallback = normalizeSource(fallbackSource);
+  const resolvedSource = resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback);
+
+  if (!resolvedSource) return null;
+
+  const resolvedResizeMode = resolveResizeMode(fit, resizeMode);
+  const resolvedAccessibilityLabel = resolveAccessibilityLabel(alt, accessibilityLabel);
+  const resolvedAlt = resolveAlt(alt, accessibilityLabel);
+  const resolvedStyle = resolveImageStyle(theme, { width, height, aspectRatio, radius });
+
+  return (
+    <RNImage
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityRole="image"
+      alt={resolvedAlt}
+      onError={(event) => {
+        onError?.(event);
+
+        if (!showFallback && normalizedFallback) {
+          setShowFallback(true);
+        }
+      }}
+      resizeMode={resolvedResizeMode}
+      source={resolvedSource}
+      style={[resolvedStyle, style]}
+      testID={testID}
+    />
+  );
+}

package/src/primitives/image/index.ts

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export type { ImageFit, ImageProps, SurfaceImageSource } from './types';

package/src/primitives/image/resolveImageProps.test.ts

@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import {
+  getSourceKey,
+  normalizeSource,
+  resolveImageStyle,
+  resolveRenderedSource,
+  resolveResizeMode,
+} from './resolveImageProps';
+
+describe('normalizeSource', () => {
+  it('normalizes string sources into uri objects', () => {
+    expect(normalizeSource('https://example.com/image.png')).toEqual({
+      uri: 'https://example.com/image.png',
+    });
+  });
+
+  it('passes through react-native image sources', () => {
+    expect(normalizeSource({ uri: 'https://example.com/image.png' })).toEqual({
+      uri: 'https://example.com/image.png',
+    });
+  });
+
+  it('returns undefined for nullish sources', () => {
+    expect(normalizeSource(null)).toBeUndefined();
+    expect(normalizeSource(undefined)).toBeUndefined();
+  });
+});
+
+describe('resolveResizeMode', () => {
+  it('prefers fit over resizeMode', () => {
+    expect(resolveResizeMode('contain', 'cover')).toBe('contain');
+  });
+
+  it('defaults to cover when both are absent', () => {
+    expect(resolveResizeMode(undefined, undefined)).toBe('cover');
+  });
+});
+
+describe('resolveRenderedSource', () => {
+  it('renders fallback when the primary source is absent', () => {
+    const normalizedFallback = normalizeSource('https://example.com/fallback.png');
+    expect(resolveRenderedSource(undefined, normalizedFallback, false)).toEqual(normalizedFallback);
+  });
+});
+
+describe('getSourceKey', () => {
+  it('derives stable keys for string and uri sources', () => {
+    expect(getSourceKey('https://example.com/image.png')).toBe('uri:https://example.com/image.png');
+    expect(getSourceKey({ uri: 'https://example.com/image.png' })).toBe(
+      'uri:https://example.com/image.png',
+    );
+  });
+
+  it('derives stable keys for asset sources', () => {
+    expect(getSourceKey(12)).toBe('asset:12');
+  });
+
+  it('derives stable keys for uri sets', () => {
+    expect(getSourceKey([{ uri: 'a' }, { uri: 'b' }])).toBe('uri-set:a|b');
+  });
+});
+
+describe('resolveImageStyle', () => {
+  it('resolves spacing tokens for width/height and preserves raw strings', () => {
+    const theme = createTheme();
+    const style = resolveImageStyle(theme, { width: 'm', height: '100%' });
+
+    expect(style.width).toBe(theme.spacing.m);
+    expect(style.height).toBe('100%');
+  });
+
+  it('resolves radius tokens for borderRadius', () => {
+    const theme = createTheme();
+    const style = resolveImageStyle(theme, { radius: 'full' });
+
+    expect(style.borderRadius).toBe(theme.radii.full);
+    expect(style.overflow).toBe('hidden');
+  });
+});

package/src/primitives/image/resolveImageProps.ts

@@ -0,0 +1,92 @@
+import type { ImageResizeMode, ImageSourcePropType } from 'react-native';
+import type { ImageStyle } from 'react-native';
+
+import { resolveToken } from '../../theme/resolveToken';
+import type { SurfaceTheme } from '../../theme/types';
+import type { ImageProps, SurfaceImageSource } from './types';
+
+export function normalizeSource(
+  source: SurfaceImageSource | null | undefined,
+): ImageSourcePropType | undefined {
+  if (source === null || source === undefined) return undefined;
+  if (typeof source === 'string') return { uri: source };
+  return source;
+}
+
+export function resolveRenderedSource(
+  normalizedPrimary: ImageSourcePropType | undefined,
+  normalizedFallback: ImageSourcePropType | undefined,
+  showFallback: boolean,
+): ImageSourcePropType | undefined {
+  if (showFallback || !normalizedPrimary) return normalizedFallback;
+  return normalizedPrimary;
+}
+
+function getUriFromSource(source: ImageSourcePropType): string | undefined {
+  if (Array.isArray(source)) {
+    const [first] = source;
+    return first?.uri;
+  }
+
+  if (typeof source === 'number') return undefined;
+  return source.uri;
+}
+
+export function getSourceKey(source: SurfaceImageSource | null | undefined): string | null {
+  if (source === null || source === undefined) return null;
+  if (typeof source === 'string') return `uri:${source}`;
+  if (typeof source === 'number') return `asset:${source}`;
+  if (Array.isArray(source)) {
+    const parts = source
+      .map((item) => item.uri)
+      .filter((value): value is string => typeof value === 'string');
+    return `uri-set:${parts.join('|')}`;
+  }
+
+  const uri = getUriFromSource(source);
+  if (uri) return `uri:${uri}`;
+
+  try {
+    return `src:${JSON.stringify(source)}`;
+  } catch {
+    return 'src:unknown';
+  }
+}
+
+export function resolveResizeMode(
+  fit: ImageProps['fit'],
+  resizeMode: ImageProps['resizeMode'],
+): ImageResizeMode {
+  return fit ?? resizeMode ?? 'cover';
+}
+
+export function resolveAccessibilityLabel(
+  alt: ImageProps['alt'],
+  accessibilityLabel: ImageProps['accessibilityLabel'],
+): string | undefined {
+  return accessibilityLabel ?? alt;
+}
+
+export function resolveAlt(
+  alt: ImageProps['alt'],
+  accessibilityLabel: ImageProps['accessibilityLabel'],
+): string | undefined {
+  return alt ?? accessibilityLabel;
+}
+
+export function resolveImageStyle(
+  theme: SurfaceTheme,
+  props: Pick<ImageProps, 'width' | 'height' | 'aspectRatio' | 'radius'>,
+): ImageStyle {
+  const width = resolveToken(theme.spacing, props.width);
+  const height = resolveToken(theme.spacing, props.height);
+  const borderRadius = resolveToken(theme.radii, props.radius);
+
+  return {
+    width,
+    height,
+    aspectRatio: props.aspectRatio,
+    borderRadius,
+    overflow: borderRadius !== undefined ? 'hidden' : undefined,
+  };
+}

package/src/primitives/image/types.ts

@@ -0,0 +1,28 @@
+import type {
+  ImageProps as ReactNativeImageProps,
+  ImageResizeMode,
+  ImageSourcePropType,
+} from 'react-native';
+import type { ImageStyle, StyleProp } from 'react-native';
+
+import type { SurfaceTheme } from '../../theme/types';
+
+export type SurfaceImageSource = string | ImageSourcePropType;
+
+export type ImageFit = ImageResizeMode;
+
+export interface ImageProps {
+  source?: SurfaceImageSource | null;
+  fallbackSource?: SurfaceImageSource | null;
+  alt?: string;
+  accessibilityLabel?: string;
+  width?: number | string;
+  height?: number | string;
+  aspectRatio?: number;
+  fit?: ImageFit;
+  resizeMode?: ImageResizeMode;
+  radius?: number | keyof SurfaceTheme['radii'];
+  style?: StyleProp<ImageStyle>;
+  testID?: string;
+  onError?: ReactNativeImageProps['onError'];
+}