@ankhorage/zora 4.4.1 → 5.0.0

package/dist/registry.js

@@ -12,7 +12,6 @@ import { Chip } from './components/chip';
 import { ChipGroup } from './components/chip-group';
 import { DataTable } from './components/data-table';
 import { DatePicker } from './components/date-picker';
-import { Drawer } from './components/drawer';
 import { Form, FormActions, FormError, FormField } from './components/form';
 import { Gradient } from './components/gradient';
 import { Heading } from './components/heading';
@@ -24,8 +23,6 @@ import { MediaCard } from './components/media-card';
 import { DropdownMenu, Menu } from './components/menu';
 import { MetricCard } from './components/metric-card';
 import { Modal } from './components/modal';
-import { NavigationItem } from './components/navigation-item';
-import { NavigationList } from './components/navigation-list';
 import { Pagination } from './components/pagination';
 import { Progress, ProgressRing } from './components/progress';
 import { Radio, RadioGroup } from './components/radio';
@@ -67,7 +64,6 @@ import { Panel } from './patterns/panel';
 import { PostCard } from './patterns/post-card';
 import { ProductCard } from './patterns/product-card';
 import { ReaderSurface } from './patterns/reader';
-import { ResponsivePanel } from './patterns/responsive-panel';
 import { BarcodeScannerView, CameraPermissionView, ScanOverlay } from './patterns/scanner';
 import { SectionHeader } from './patterns/section-header';
 import { SelectableItem } from './patterns/selection';
@@ -77,8 +73,6 @@ import { ThemeComposer } from './patterns/theme-composer';
 import { PaletteItem, TileGrid } from './patterns/tile-grid';
 import { Timeline } from './patterns/timeline';
 import { TreeItem, TreeView } from './patterns/tree-view';
-import { ZoraDrawerContent } from './patterns/zora-drawer-content';
-import { ZoraTabBar } from './patterns/zora-tab-bar';
 import { ThemeModeToggle } from './theme/ThemeModeToggle';
 const _ZORA_COMPONENT_REGISTRY = {
     ActionSheet,
@@ -97,7 +91,6 @@ const _ZORA_COMPONENT_REGISTRY = {
     ChipGroup,
     DataTable,
     DatePicker,
-    Drawer,
     DropdownMenu,
     Form,
     FormActions,
@@ -113,8 +106,6 @@ const _ZORA_COMPONENT_REGISTRY = {
     Menu,
     MetricCard,
     Modal,
-    NavigationItem,
-    NavigationList,
     Pagination,
     Progress,
     ProgressRing,
@@ -178,7 +169,6 @@ const _ZORA_COMPONENT_REGISTRY = {
     Panel,
     PostCard,
     ProductCard,
-    ResponsivePanel,
     ReaderSurface,
     BarcodeScannerView,
     CameraPermissionView,
@@ -193,8 +183,6 @@ const _ZORA_COMPONENT_REGISTRY = {
     Timeline,
     TreeItem,
     TreeView,
-    ZoraDrawerContent,
-    ZoraTabBar,
 };
 export const ZORA_COMPONENT_REGISTRY = _ZORA_COMPONENT_REGISTRY;
 //# sourceMappingURL=registry.js.map

package/dist/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import type { InteractionPolicyProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport { ActionSheet, ActionSheetItem } from './components/action-sheet';\nimport { AppBar } from './components/app-bar';\nimport { Avatar } from './components/avatar';\nimport { AvatarGroup } from './components/avatar-group';\nimport { Badge } from './components/badge';\nimport { Breadcrumbs } from './components/breadcrumbs';\nimport { Button } from './components/button';\nimport { ButtonGroup } from './components/button-group';\nimport { Card } from './components/card';\nimport { Checkbox, CheckboxGroup } from './components/checkbox';\nimport { Chip } from './components/chip';\nimport { ChipGroup } from './components/chip-group';\nimport { DataTable } from './components/data-table';\nimport { DatePicker } from './components/date-picker';\nimport { Drawer } from './components/drawer';\nimport { Form, FormActions, FormError, FormField } from './components/form';\nimport { Gradient } from './components/gradient';\nimport { Heading } from './components/heading';\nimport { Icon } from './components/icon';\nimport { IconButton } from './components/icon-button';\nimport { Image } from './components/image';\nimport { Input } from './components/input';\nimport { MediaCard } from './components/media-card';\nimport { DropdownMenu, Menu } from './components/menu';\nimport { MetricCard } from './components/metric-card';\nimport { Modal } from './components/modal';\nimport { NavigationItem } from './components/navigation-item';\nimport { NavigationList } from './components/navigation-list';\nimport { Pagination } from './components/pagination';\nimport { Progress, ProgressRing } from './components/progress';\nimport { Radio, RadioGroup } from './components/radio';\nimport { Rating } from './components/rating';\nimport { SearchBar } from './components/search-bar';\nimport { Select } from './components/select';\nimport { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from './components/skeleton';\nimport { SplashScreen } from './components/splash-screen';\nimport { Tabs } from './components/tabs';\nimport { Text } from './components/text';\nimport { Textarea } from './components/textarea';\nimport { TimePicker } from './components/time-picker';\nimport { Toast } from './components/toast';\nimport { Toolbar, ToolbarAction } from './components/toolbar';\nimport {\n  Box,\n  Center,\n  Container,\n  Divider,\n  Grid,\n  Inline,\n  Show,\n  Spacer,\n  Stack,\n  Surface,\n} from './foundation';\nimport { AppShell } from './layout/app-shell';\nimport { Screen } from './layout/screen';\nimport { ScreenSection } from './layout/screen-section';\nimport { SettingsLayout } from './layout/settings-layout';\nimport { SidebarLayout } from './layout/sidebar-layout';\nimport { TopbarLayout } from './layout/topbar-layout';\nimport {\n  ForgotPasswordForm,\n  OAuthProviderButton,\n  OAuthProviderList,\n  OtpForm,\n  SignInForm,\n  SignUpForm,\n} from './patterns/auth';\nimport { ChatListItem } from './patterns/chat-list-item';\nimport { CollectionEditor } from './patterns/collection-editor';\nimport { ConfirmDialog } from './patterns/confirm-dialog';\nimport { ContentRail } from './patterns/content-rail';\nimport { DisclosureSection } from './patterns/disclosure-section';\nimport { EmptyState } from './patterns/empty-state';\nimport { FilterBar } from './patterns/filter-bar';\nimport { Hero } from './patterns/hero';\nimport { ImagePreview } from './patterns/image-preview';\nimport { ImageUploadField } from './patterns/image-upload-field';\nimport { InspectorField } from './patterns/inspector-field';\nimport { List, ListRow, ListSection } from './patterns/list';\nimport { MessageBubble } from './patterns/message-bubble';\nimport { MissingElement } from './patterns/missing-element';\nimport { Notice } from './patterns/notice';\nimport { Panel } from './patterns/panel';\nimport { PostCard } from './patterns/post-card';\nimport { ProductCard } from './patterns/product-card';\nimport { ReaderSurface } from './patterns/reader';\nimport { ResponsivePanel } from './patterns/responsive-panel';\nimport { BarcodeScannerView, CameraPermissionView, ScanOverlay } from './patterns/scanner';\nimport { SectionHeader } from './patterns/section-header';\nimport { SelectableItem } from './patterns/selection';\nimport { SettingsRow } from './patterns/settings-row';\nimport { SwitchField } from './patterns/switch-field';\nimport { ThemeComposer } from './patterns/theme-composer';\nimport { PaletteItem, TileGrid } from './patterns/tile-grid';\nimport { Timeline } from './patterns/timeline';\nimport { TreeItem, TreeView } from './patterns/tree-view';\nimport { ZoraDrawerContent } from './patterns/zora-drawer-content';\nimport { ZoraTabBar } from './patterns/zora-tab-bar';\nimport { ThemeModeToggle } from './theme/ThemeModeToggle';\n\nexport type ZoraComponentRegistry = Readonly<Record<string, React.ElementType>>;\n\ntype ComponentPropsFor<K extends keyof typeof _ZORA_COMPONENT_REGISTRY> = React.ComponentProps<\n  (typeof _ZORA_COMPONENT_REGISTRY)[K]\n>;\n\ntype AcceptsSurfaceInteractionPolicyProps<P> = 'interactionPolicy' extends keyof P\n  ? InteractionPolicyProps extends Pick<P, 'interactionPolicy'>\n    ? Pick<P, 'interactionPolicy'> extends InteractionPolicyProps\n      ? true\n      : false\n    : false\n  : false;\n\ntype RegistryInteractionPolicyContract = {\n  [K in keyof typeof _ZORA_COMPONENT_REGISTRY]: AcceptsSurfaceInteractionPolicyProps<\n    ComponentPropsFor<K>\n  >;\n};\n\ntype _AssertTrue<T extends true> = T;\ntype _RegistryInteractionPolicyCheck = _AssertTrue<\n  RegistryInteractionPolicyContract[keyof typeof _ZORA_COMPONENT_REGISTRY]\n>;\n\nconst _ZORA_COMPONENT_REGISTRY = {\n  ActionSheet,\n  ActionSheetItem,\n  AppBar,\n  Avatar,\n  AvatarGroup,\n  Badge,\n  Breadcrumbs,\n  Button,\n  ButtonGroup,\n  Card,\n  Checkbox,\n  CheckboxGroup,\n  Chip,\n  ChipGroup,\n  DataTable,\n  DatePicker,\n  Drawer,\n  DropdownMenu,\n  Form,\n  FormActions,\n  FormError,\n  FormField,\n  Gradient,\n  Heading,\n  Icon,\n  IconButton,\n  Image,\n  Input,\n  MediaCard,\n  Menu,\n  MetricCard,\n  Modal,\n  NavigationItem,\n  NavigationList,\n  Pagination,\n  Progress,\n  ProgressRing,\n  Radio,\n  RadioGroup,\n  Rating,\n  SearchBar,\n  Select,\n  Skeleton,\n  SkeletonCard,\n  SkeletonList,\n  SkeletonText,\n  SplashScreen,\n  Tabs,\n  Text,\n  Textarea,\n  TimePicker,\n  Toast,\n  Toolbar,\n  ToolbarAction,\n  ThemeModeToggle,\n  Box,\n  Center,\n  Container,\n  Divider,\n  Grid,\n  Inline,\n  Show,\n  Spacer,\n  Stack,\n  Surface,\n  AppShell,\n  Screen,\n  ScreenSection,\n  SettingsLayout,\n  SidebarLayout,\n  TopbarLayout,\n  ForgotPasswordForm,\n  OAuthProviderButton,\n  OAuthProviderList,\n  OtpForm,\n  SignInForm,\n  SignUpForm,\n  ChatListItem,\n  CollectionEditor,\n  ConfirmDialog,\n  ContentRail,\n  DisclosureSection,\n  EmptyState,\n  FilterBar,\n  Hero,\n  ImagePreview,\n  ImageUploadField,\n  InspectorField,\n  List,\n  ListRow,\n  ListSection,\n  MessageBubble,\n  MissingElement,\n  Notice,\n  Panel,\n  PostCard,\n  ProductCard,\n  ResponsivePanel,\n  ReaderSurface,\n  BarcodeScannerView,\n  CameraPermissionView,\n  ScanOverlay,\n  SectionHeader,\n  SelectableItem,\n  SettingsRow,\n  SwitchField,\n  ThemeComposer,\n  PaletteItem,\n  TileGrid,\n  Timeline,\n  TreeItem,\n  TreeView,\n  ZoraDrawerContent,\n  ZoraTabBar,\n} as const satisfies ZoraComponentRegistry;\n\nexport const ZORA_COMPONENT_REGISTRY: ZoraComponentRegistry = _ZORA_COMPONENT_REGISTRY;\n"]}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"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","sourcesContent":["import type { InteractionPolicyProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport { ActionSheet, ActionSheetItem } from './components/action-sheet';\nimport { AppBar } from './components/app-bar';\nimport { Avatar } from './components/avatar';\nimport { AvatarGroup } from './components/avatar-group';\nimport { Badge } from './components/badge';\nimport { Breadcrumbs } from './components/breadcrumbs';\nimport { Button } from './components/button';\nimport { ButtonGroup } from './components/button-group';\nimport { Card } from './components/card';\nimport { Checkbox, CheckboxGroup } from './components/checkbox';\nimport { Chip } from './components/chip';\nimport { ChipGroup } from './components/chip-group';\nimport { DataTable } from './components/data-table';\nimport { DatePicker } from './components/date-picker';\nimport { Form, FormActions, FormError, FormField } from './components/form';\nimport { Gradient } from './components/gradient';\nimport { Heading } from './components/heading';\nimport { Icon } from './components/icon';\nimport { IconButton } from './components/icon-button';\nimport { Image } from './components/image';\nimport { Input } from './components/input';\nimport { MediaCard } from './components/media-card';\nimport { DropdownMenu, Menu } from './components/menu';\nimport { MetricCard } from './components/metric-card';\nimport { Modal } from './components/modal';\nimport { Pagination } from './components/pagination';\nimport { Progress, ProgressRing } from './components/progress';\nimport { Radio, RadioGroup } from './components/radio';\nimport { Rating } from './components/rating';\nimport { SearchBar } from './components/search-bar';\nimport { Select } from './components/select';\nimport { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from './components/skeleton';\nimport { SplashScreen } from './components/splash-screen';\nimport { Tabs } from './components/tabs';\nimport { Text } from './components/text';\nimport { Textarea } from './components/textarea';\nimport { TimePicker } from './components/time-picker';\nimport { Toast } from './components/toast';\nimport { Toolbar, ToolbarAction } from './components/toolbar';\nimport {\n  Box,\n  Center,\n  Container,\n  Divider,\n  Grid,\n  Inline,\n  Show,\n  Spacer,\n  Stack,\n  Surface,\n} from './foundation';\nimport { AppShell } from './layout/app-shell';\nimport { Screen } from './layout/screen';\nimport { ScreenSection } from './layout/screen-section';\nimport { SettingsLayout } from './layout/settings-layout';\nimport { SidebarLayout } from './layout/sidebar-layout';\nimport { TopbarLayout } from './layout/topbar-layout';\nimport {\n  ForgotPasswordForm,\n  OAuthProviderButton,\n  OAuthProviderList,\n  OtpForm,\n  SignInForm,\n  SignUpForm,\n} from './patterns/auth';\nimport { ChatListItem } from './patterns/chat-list-item';\nimport { CollectionEditor } from './patterns/collection-editor';\nimport { ConfirmDialog } from './patterns/confirm-dialog';\nimport { ContentRail } from './patterns/content-rail';\nimport { DisclosureSection } from './patterns/disclosure-section';\nimport { EmptyState } from './patterns/empty-state';\nimport { FilterBar } from './patterns/filter-bar';\nimport { Hero } from './patterns/hero';\nimport { ImagePreview } from './patterns/image-preview';\nimport { ImageUploadField } from './patterns/image-upload-field';\nimport { InspectorField } from './patterns/inspector-field';\nimport { List, ListRow, ListSection } from './patterns/list';\nimport { MessageBubble } from './patterns/message-bubble';\nimport { MissingElement } from './patterns/missing-element';\nimport { Notice } from './patterns/notice';\nimport { Panel } from './patterns/panel';\nimport { PostCard } from './patterns/post-card';\nimport { ProductCard } from './patterns/product-card';\nimport { ReaderSurface } from './patterns/reader';\nimport { BarcodeScannerView, CameraPermissionView, ScanOverlay } from './patterns/scanner';\nimport { SectionHeader } from './patterns/section-header';\nimport { SelectableItem } from './patterns/selection';\nimport { SettingsRow } from './patterns/settings-row';\nimport { SwitchField } from './patterns/switch-field';\nimport { ThemeComposer } from './patterns/theme-composer';\nimport { PaletteItem, TileGrid } from './patterns/tile-grid';\nimport { Timeline } from './patterns/timeline';\nimport { TreeItem, TreeView } from './patterns/tree-view';\nimport { ThemeModeToggle } from './theme/ThemeModeToggle';\n\nexport type ZoraComponentRegistry = Readonly<Record<string, React.ElementType>>;\n\ntype ComponentPropsFor<K extends keyof typeof _ZORA_COMPONENT_REGISTRY> = React.ComponentProps<\n  (typeof _ZORA_COMPONENT_REGISTRY)[K]\n>;\n\ntype AcceptsSurfaceInteractionPolicyProps<P> = 'interactionPolicy' extends keyof P\n  ? InteractionPolicyProps extends Pick<P, 'interactionPolicy'>\n    ? Pick<P, 'interactionPolicy'> extends InteractionPolicyProps\n      ? true\n      : false\n    : false\n  : false;\n\ntype RegistryInteractionPolicyContract = {\n  [K in keyof typeof _ZORA_COMPONENT_REGISTRY]: AcceptsSurfaceInteractionPolicyProps<\n    ComponentPropsFor<K>\n  >;\n};\n\ntype _AssertTrue<T extends true> = T;\ntype _RegistryInteractionPolicyCheck = _AssertTrue<\n  RegistryInteractionPolicyContract[keyof typeof _ZORA_COMPONENT_REGISTRY]\n>;\n\nconst _ZORA_COMPONENT_REGISTRY = {\n  ActionSheet,\n  ActionSheetItem,\n  AppBar,\n  Avatar,\n  AvatarGroup,\n  Badge,\n  Breadcrumbs,\n  Button,\n  ButtonGroup,\n  Card,\n  Checkbox,\n  CheckboxGroup,\n  Chip,\n  ChipGroup,\n  DataTable,\n  DatePicker,\n  DropdownMenu,\n  Form,\n  FormActions,\n  FormError,\n  FormField,\n  Gradient,\n  Heading,\n  Icon,\n  IconButton,\n  Image,\n  Input,\n  MediaCard,\n  Menu,\n  MetricCard,\n  Modal,\n  Pagination,\n  Progress,\n  ProgressRing,\n  Radio,\n  RadioGroup,\n  Rating,\n  SearchBar,\n  Select,\n  Skeleton,\n  SkeletonCard,\n  SkeletonList,\n  SkeletonText,\n  SplashScreen,\n  Tabs,\n  Text,\n  Textarea,\n  TimePicker,\n  Toast,\n  Toolbar,\n  ToolbarAction,\n  ThemeModeToggle,\n  Box,\n  Center,\n  Container,\n  Divider,\n  Grid,\n  Inline,\n  Show,\n  Spacer,\n  Stack,\n  Surface,\n  AppShell,\n  Screen,\n  ScreenSection,\n  SettingsLayout,\n  SidebarLayout,\n  TopbarLayout,\n  ForgotPasswordForm,\n  OAuthProviderButton,\n  OAuthProviderList,\n  OtpForm,\n  SignInForm,\n  SignUpForm,\n  ChatListItem,\n  CollectionEditor,\n  ConfirmDialog,\n  ContentRail,\n  DisclosureSection,\n  EmptyState,\n  FilterBar,\n  Hero,\n  ImagePreview,\n  ImageUploadField,\n  InspectorField,\n  List,\n  ListRow,\n  ListSection,\n  MessageBubble,\n  MissingElement,\n  Notice,\n  Panel,\n  PostCard,\n  ProductCard,\n  ReaderSurface,\n  BarcodeScannerView,\n  CameraPermissionView,\n  ScanOverlay,\n  SectionHeader,\n  SelectableItem,\n  SettingsRow,\n  SwitchField,\n  ThemeComposer,\n  PaletteItem,\n  TileGrid,\n  Timeline,\n  TreeItem,\n  TreeView,\n} as const satisfies ZoraComponentRegistry;\n\nexport const ZORA_COMPONENT_REGISTRY: ZoraComponentRegistry = _ZORA_COMPONENT_REGISTRY;\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "4.4.1",
+  "version": "5.0.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/audit.test.ts

@@ -240,32 +240,3 @@ describe('Plan 5 audit — public exports carry no legacy types', () => {
     expect(indexSource).not.toContain('AnkhTheme');
   });
 });
-
-describe('navigation chrome policy', () => {
-  const NAVIGATION_PATHS = [
-    join(SRC_ROOT, 'components', 'navigation-item'),
-    join(SRC_ROOT, 'components', 'navigation-list'),
-    join(SRC_ROOT, 'patterns', 'zora-tab-bar'),
-    join(SRC_ROOT, 'patterns', 'zora-drawer-content'),
-    join(SRC_ROOT, 'internal', 'resolveZoraNavigationItems.ts'),
-  ];
-
-  test('does not import expo-router, react-navigation, or Surface internals', () => {
-    const sources = NAVIGATION_PATHS.flatMap((path) => {
-      if (path.endsWith('.ts')) {
-        return [readFileSync(path, 'utf8')];
-      }
-
-      if (!path.includes(`${SRC_ROOT}/`)) {
-        return [];
-      }
-
-      return listFiles(path).map((filePath) => readFileSync(filePath, 'utf8'));
-    }).join('\n');
-
-    expect(sources).not.toMatch(/expo-router/);
-    expect(sources).not.toMatch(/@react-navigation\//);
-    expect(sources).not.toMatch(/@ankhorage\/surface\/src\//);
-    expect(sources).not.toMatch(/@ankhorage\/surface\/dist\//);
-  });
-});

package/src/components/radio/RadioGroup.test.ts

@@ -19,13 +19,17 @@ test('resolves RadioGroup theme defaults while preserving instance overrides', (
   ).toEqual({ gap: 'l', color: 'danger', size: 's' });
 });
 
-test('card presentation stays on the RadioGroup and Surface Radio semantic path', async () => {
-  const source = await Bun.file('src/components/radio/RadioGroup.tsx').text();
-
-  expect(source).toContain('accessibilityRole="radiogroup"');
-  expect(source).toContain('checked={value === option.value}');
-  expect(source).toContain('<Radio');
-  expect(source).toContain("const isCard = presentation === 'card';");
-  expect(source).not.toContain('<Button');
-  expect(source).not.toContain('SelectableItem');
+test('icon radio options expose serializable authoring metadata', async () => {
+  const { radioGroupMeta } = await import('./meta');
+  expect(radioGroupMeta.directManifestNode).toBe(true);
+  expect(radioGroupMeta.blueprint.label).toBe('Radio button group');
+  expect(radioGroupMeta.blueprint.defaultProps.options.map((option) => option.value)).toContain(
+    radioGroupMeta.blueprint.defaultProps.defaultValue,
+  );
+  expect(
+    radioGroupMeta.props.options.itemSchema.find((field) => field.key === 'iconSource')?.schema,
+  ).toMatchObject({ type: 'media', mediaKinds: ['image'] });
+  expect(radioGroupMeta.props.columns.enum).toEqual([1, 2, 3, 4]);
+  expect(radioGroupMeta.props.contentOrientation.enum).toEqual(['horizontal', 'vertical']);
+  expect(radioGroupMeta.events.valueChange.eventType).toBe('radioGroup.valueChange');
 });

package/src/components/radio/RadioGroup.tsx

@@ -1,145 +1,117 @@
-import { Radio, useTheme } from '@ankhorage/surface';
+import { Radio } from '@ankhorage/surface';
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { Stack } from '../../foundation';
 import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
+import { RadioOptionControl } from './RadioOptionControl';
 import { resolveRadioGroupThemeRecipe } from './resolveRadioGroupThemeRecipe';
-import type { RadioGroupOption, RadioGroupProps } from './types';
+import type { RadioGroupProps } from './types';
 
-/***
- * Resolves the themed radio-group presentation within the active ZORA scope.
- */
+/*** Present one controlled single-choice group as inline radios or icon radio options. */
+export const RadioGroup = withZoraThemeScope(RadioGroupInner);
+
+/*** Resolve shared presentation once and preserve a single interaction boundary per option. */
 function RadioGroupInner<TValue extends string>({
   themeId: _themeId,
   mode: _mode,
-  value,
-  onValueChange,
-  options,
-  orientation = 'vertical',
-  gap,
-  presentation = 'inline',
-  color,
-  size,
-  invalid = false,
-  readOnly = false,
-  disabled = false,
-  testID,
-  interactionPolicy,
+  ...props
 }: RadioGroupProps<TValue>) {
-  const isHorizontal = orientation === 'horizontal';
+  const [localValue, setLocalValue] = React.useState(props.defaultValue);
+  const onValueChange = (next: TValue) => {
+    if (props.value === undefined) setLocalValue(next);
+    props.onValueChange?.(next);
+  };
+  const selectedProps = { ...props, value: props.value ?? localValue, onValueChange };
   const themeFields = useZoraThemeRecipe('RadioGroup');
-  const recipe = resolveRadioGroupThemeRecipe({ gap, color, size, themeFields });
+  const recipe = resolveRadioGroupThemeRecipe({ ...props, themeFields });
+  if (props.presentation !== 'card') return <RadioGroupInline {...selectedProps} {...recipe} />;
+  const columns =
+    props.columns ?? (props.orientation === 'horizontal' ? Math.max(1, props.options.length) : 1);
+  const rows = Array.from({ length: Math.ceil(props.options.length / columns) }, (_, index) =>
+    props.options.slice(index * columns, (index + 1) * columns),
+  );
+  return (
+    <View testID={props.testID} accessibilityRole="radiogroup">
+      <Stack gap={recipe.gap}>
+        {rows.map((options, index) => (
+          <Stack key={index} direction="row" gap={recipe.gap}>
+            {options.map((option) => (
+              <View key={option.value} style={styles.option}>
+                <RadioGroupItem {...selectedProps} {...recipe} option={option} />
+              </View>
+            ))}
+            {Array.from({ length: columns - options.length }, (_, slot) => (
+              <View key={`empty-${slot}`} style={styles.option} />
+            ))}
+          </Stack>
+        ))}
+      </Stack>
+    </View>
+  );
+}
 
+/*** Preserve ordinary radio wrapping independently of the icon-option grid. */
+function RadioGroupInline<TValue extends string>(props: RadioGroupProps<TValue>) {
   return (
-    <View
-      testID={testID}
-      accessibilityRole="radiogroup"
-      style={{
-        flexDirection: isHorizontal ? 'row' : 'column',
-        flexWrap: isHorizontal ? 'wrap' : 'nowrap',
-      }}
-    >
+    <View testID={props.testID} accessibilityRole="radiogroup">
       <Stack
-        direction={isHorizontal ? 'row' : 'column'}
-        gap={recipe.gap}
-        wrap={isHorizontal ? 'wrap' : 'nowrap'}
+        direction={props.orientation === 'horizontal' ? 'row' : 'column'}
+        gap={props.gap}
+        wrap="wrap"
       >
-        {options.map((option) => (
-          <RadioGroupItem
-            key={option.value}
-            option={option}
-            checked={value === option.value}
-            disabled={disabled || option.disabled === true}
-            invalid={invalid}
-            readOnly={readOnly}
-            size={recipe.size}
-            color={recipe.color}
-            orientation={orientation}
-            presentation={presentation}
-            onSelect={onValueChange}
-            interactionPolicy={interactionPolicy}
-          />
+        {props.options.map((option) => (
+          <RadioGroupItem key={option.value} {...props} option={option} />
         ))}
       </Stack>
     </View>
   );
 }
 
-/***
- * Renders a group of radio options for selecting a single value.
- */
-export const RadioGroup = withZoraThemeScope(RadioGroupInner);
-
-/***
- * Renders one option through the single Surface Radio interaction boundary.
- */
-function RadioGroupItem<TValue extends string>({
-  option,
-  checked,
-  disabled,
-  invalid,
-  readOnly,
-  size,
-  color,
-  orientation,
-  presentation,
-  onSelect,
-  interactionPolicy,
-}: {
-  option: RadioGroupOption<TValue>;
-  checked: boolean;
-  disabled: boolean;
-  invalid: boolean;
-  readOnly: boolean;
-  size: NonNullable<RadioGroupProps<TValue>['size']>;
-  color: NonNullable<RadioGroupProps<TValue>['color']>;
-  orientation: NonNullable<RadioGroupProps<TValue>['orientation']>;
-  presentation: NonNullable<RadioGroupProps<TValue>['presentation']>;
-  onSelect: (value: TValue) => void;
-  interactionPolicy: RadioGroupProps<TValue>['interactionPolicy'];
-}) {
-  const { theme } = useTheme();
-  const passive = interactionPolicy === 'passive';
-  const isCard = presentation === 'card';
-
+/*** Delegate icon options to their composed radio boundary and ordinary options to Surface Radio. */
+function RadioGroupItem<TValue extends string>(
+  props: RadioGroupProps<TValue> & {
+    option: RadioGroupProps<TValue>['options'][number];
+  },
+) {
+  const { option, value, onValueChange, interactionPolicy, color, size } = props;
+  const checked = value === option.value;
+  const inactive = props.disabled === true || option.disabled === true;
+  const readOnly = props.readOnly === true;
+  const invalid = props.invalid === true;
+  const onSelect = () => {
+    if (!inactive && !readOnly && interactionPolicy !== 'passive' && !checked)
+      onValueChange?.(option.value);
+  };
+  if (props.presentation === 'card') {
+    return (
+      <RadioOptionControl
+        {...props}
+        checked={checked}
+        disabled={inactive}
+        readOnly={readOnly}
+        invalid={invalid}
+        layout={props.contentOrientation ?? 'horizontal'}
+        onSelect={onSelect}
+      />
+    );
+  }
   return (
     <Radio
-      interactionPolicy={interactionPolicy}
       checked={checked}
-      disabled={disabled}
-      invalid={invalid}
+      disabled={inactive}
       readOnly={readOnly}
-      size={size}
+      invalid={invalid}
+      interactionPolicy={interactionPolicy}
       color={color}
+      size={size}
       testID={option.testID}
-      bg={
-        isCard
-          ? checked
-            ? theme.semantics.selection.background
-            : theme.semantics.surface.default
-          : undefined
-      }
-      borderColor={
-        isCard
-          ? checked
-            ? theme.semantics.selection.border
-            : theme.semantics.border.default
-          : undefined
-      }
-      borderWidth={isCard ? 1 : undefined}
-      p={isCard ? 'm' : undefined}
-      radius={isCard ? 'l' : undefined}
-      width={isCard && orientation === 'vertical' ? '100%' : undefined}
-      onCheckedChange={(nextChecked) => {
-        if (passive) return;
-        if (nextChecked) onSelect(option.value);
-      }}
+      onCheckedChange={onSelect}
     >
       <Stack gap="xs">
-        <Text weight={isCard ? 'semiBold' : undefined}>{option.label}</Text>
+        <Text>{option.label}</Text>
         {option.description ? (
           <Text emphasis="muted" variant="caption">
             {option.description}
@@ -149,3 +121,5 @@ function RadioGroupItem<TValue extends string>({
     </Radio>
   );
 }
+
+const styles = StyleSheet.create({ option: { flex: 1, minWidth: 0 } });

package/src/components/radio/RadioOptionControl.tsx

@@ -0,0 +1,192 @@
+import { useTheme } from '@ankhorage/surface';
+import React from 'react';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+
+import { Icon } from '../icon';
+import { Text } from '../text';
+import {
+  handleRadioOptionKeyDown,
+  type RadioOptionKeyboardTarget,
+} from './handleRadioOptionKeyDown';
+import { resolveRadioOptionColors } from './resolveRadioOptionColors';
+import type { RadioGroupProps } from './types';
+
+/*** Render a selectable icon radio option with one accessible radio target and a trailing check. */
+export function RadioOptionControl<TValue extends string>(props: RadioOptionControlProps<TValue>) {
+  const { theme } = useTheme();
+  const { option, checked, disabled, readOnly, interactionPolicy, onSelect } = props;
+  const colors = resolveRadioOptionColors(theme, props);
+  const [focused, setFocused] = React.useState(false);
+  const keyboardProps =
+    Platform.OS === 'web' && !readOnly && !disabled && interactionPolicy !== 'passive'
+      ? {
+          onKeyDown: (event: React.KeyboardEvent<RadioOptionKeyboardTarget>) =>
+            handleRadioOptionKeyDown(event, onSelect),
+        }
+      : {};
+  const controlStyle = {
+    flex: 1,
+    width: '100%' as const,
+    minHeight: props.size === 'l' ? 84 : 44,
+    borderWidth: checked || focused ? 2 : 1,
+    borderColor: focused ? theme.semantics.border.focus : checked ? colors.accent : colors.border,
+    borderRadius: theme.radii.l,
+    backgroundColor: colors.surface,
+  };
+  return (
+    <Pressable
+      {...keyboardProps}
+      accessibilityRole="radio"
+      accessibilityState={{ checked, disabled }}
+      aria-checked={checked}
+      aria-disabled={disabled}
+      aria-readonly={readOnly}
+      disabled={disabled}
+      onPress={readOnly || interactionPolicy === 'passive' ? undefined : onSelect}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      testID={option.testID}
+      style={controlStyle}
+    >
+      {(state) => <RadioOptionControlBody {...props} pressed={state.pressed} />}
+    </Pressable>
+  );
+}
+
+/*** Arrange the icon, label and passive indicator within the native radio press target. */
+function RadioOptionControlBody<TValue extends string>(
+  props: RadioOptionControlProps<TValue> & { pressed: boolean },
+) {
+  const { theme } = useTheme();
+  const colors = resolveRadioOptionColors(theme, props);
+  const contentStyle = {
+    padding: props.size === 's' ? theme.spacing.s : props.size === 'm' ? 12 : theme.spacing.m,
+    gap:
+      props.layout === 'vertical' || !props.option.iconSource ? theme.spacing.s : theme.spacing.m,
+    ...(!props.option.iconSource ? { flexDirection: 'row-reverse' as const } : {}),
+    opacity: props.disabled ? 0.5 : props.pressed ? 0.7 : 1,
+  };
+  return (
+    <View
+      style={[
+        styles.content,
+        props.layout === 'vertical' ? styles.vertical : styles.horizontal,
+        contentStyle,
+      ]}
+    >
+      <RadioOptionControlContent {...props} />
+      {props.option.iconSource || props.checked ? (
+        <View style={props.layout === 'vertical' ? styles.corner : undefined}>
+          <RadioOptionControlIndicator
+            checked={props.checked}
+            accent={colors.accent}
+            onAccent={colors.onAccent}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+interface RadioOptionControlProps<TValue extends string> extends Pick<
+  RadioGroupProps<TValue>,
+  'color' | 'size' | 'interactionPolicy'
+> {
+  option: RadioGroupProps<TValue>['options'][number];
+  checked: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  layout: 'horizontal' | 'vertical';
+  onSelect: () => void;
+}
+
+/*** Keep decoration passive while allowing labels to wrap at narrow widths and large text sizes. */
+function RadioOptionControlContent<TValue extends string>({
+  option,
+  layout,
+  size,
+  color,
+  invalid,
+  disabled,
+}: RadioOptionControlProps<TValue>) {
+  const { theme } = useTheme();
+  const colors = resolveRadioOptionColors(theme, { color, invalid, disabled });
+  return (
+    <>
+      {option.iconSource ? (
+        <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+          <Icon source={option.iconSource} size={size === 'l' ? 36 : 28} color={colors.accent} />
+        </View>
+      ) : null}
+      <View style={layout === 'horizontal' ? styles.label : styles.centerLabel}>
+        <Text
+          variant={size === 'l' ? 'body' : 'bodySmall'}
+          weight="semiBold"
+          align={layout === 'vertical' || !option.iconSource ? 'center' : 'left'}
+        >
+          {option.label}
+        </Text>
+        {option.description ? (
+          <Text
+            emphasis="muted"
+            variant="bodySmall"
+            align={layout === 'vertical' || !option.iconSource ? 'center' : 'left'}
+          >
+            {option.description}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+}
+
+/*** Draw a passive check using themed geometry without requiring an application media asset. */
+function RadioOptionControlIndicator({
+  checked,
+  accent,
+  onAccent,
+}: {
+  checked: boolean;
+  accent: string;
+  onAccent: string;
+}) {
+  const indicatorStyle = { backgroundColor: checked ? accent : 'transparent' };
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={[styles.indicator, indicatorStyle]}
+    >
+      {checked ? <View style={[styles.check, { borderColor: onAccent }]} /> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: { gap: 16, flex: 1, minWidth: 0 },
+  horizontal: { flexDirection: 'row', alignItems: 'center' },
+  vertical: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 24,
+  },
+  label: { flex: 1, minWidth: 0, gap: 4 },
+  centerLabel: { alignSelf: 'stretch', gap: 4 },
+  corner: { position: 'absolute', right: 8, top: 8 },
+  indicator: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  check: {
+    width: 7,
+    height: 12,
+    borderRightWidth: 2.5,
+    borderBottomWidth: 2.5,
+    transform: [{ rotate: '45deg' }, { translateY: -2 }],
+  },
+});