@ankhorage/zora 7.0.0 → 8.0.0

package/src/patterns/scanner/BarcodeScannerView.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Card } from '../../components/card';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
+import { Card } from '../../features/card/public';
+import { Box, Stack } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { CameraPermissionView } from './CameraPermissionView';

package/src/patterns/scanner/CameraPermissionView.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Button } from '../../components/button';
-import { Card } from '../../components/card';
-import { Text } from '../../components/text';
-import { Stack } from '../../foundation';
+import { Button } from '../../features/button/public';
+import { Card } from '../../features/card/public';
+import { Stack } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { CameraPermissionViewProps } from './types';
 

package/src/patterns/scanner/ScanOverlay.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Badge } from '../../components/badge';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
+import { Badge } from '../../features/badge/public';
+import { Box, Stack } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ScanOverlayProps } from './types';

package/src/patterns/scanner/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { ButtonProps } from '../../components/button';
+import type { ButtonProps } from '../../features/button/public';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type CameraPermissionStatus = 'unknown' | 'requesting' | 'granted' | 'denied';

package/src/patterns/section-header/SectionHeader.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Heading } from '../../components/heading';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
+import { Box, Stack } from '../../features/layout/public';
+import { Heading } from '../../features/typography/public';
+import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SectionHeaderProps } from './types';
 

package/src/patterns/settings-row/SettingsRow.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Card } from '../../components/card';
-import { Text } from '../../components/text';
-import { Box } from '../../foundation';
+import { Card } from '../../features/card/public';
+import { Box } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SettingsRowProps } from './types';
 

package/src/patterns/theme-composer/ThemeComposer.tsx

@@ -3,15 +3,15 @@ import type { AppCategory } from '@ankhorage/contracts';
 import { APP_CATEGORIES } from '@ankhorage/contracts';
 import React from 'react';
 
-import { Badge } from '../../components/badge';
-import { Button } from '../../components/button';
-import { Card } from '../../components/card';
-import { Heading } from '../../components/heading';
 import { Input } from '../../components/input';
 import { Select } from '../../components/select';
 import { Tabs } from '../../components/tabs';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
+import { Badge } from '../../features/badge/public';
+import { Button } from '../../features/button/public';
+import { Card } from '../../features/card/public';
+import { Box, Stack } from '../../features/layout/public';
+import { Heading } from '../../features/typography/public';
+import { Text } from '../../features/typography/public';
 import type { ZoraThemeMode } from '../../theme/types';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';

package/src/patterns/tile-grid/PaletteItem.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Card } from '../../components/card';
-import { Heading } from '../../components/heading';
-import { Text } from '../../components/text';
-import { Box } from '../../foundation';
+import { Card } from '../../features/card/public';
+import { Box } from '../../features/layout/public';
+import { Heading } from '../../features/typography/public';
+import { Text } from '../../features/typography/public';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PaletteItemProps } from './types';

package/src/patterns/tile-grid/TileGrid.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box } from '../../foundation';
+import { Box } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { TileGridProps } from './types';
 

package/src/patterns/timeline/Timeline.tsx

@@ -1,10 +1,11 @@
 import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 import React from 'react';
 
-import { Heading } from '../../components/heading';
-import { Icon } from '../../components/icon';
-import { Text } from '../../components/text';
-import { Box, Inline, Stack } from '../../foundation';
+import { Icon } from '../../features/icon/public';
+import { Box, Stack } from '../../features/layout/public';
+import { Heading } from '../../features/typography/public';
+import { Text } from '../../features/typography/public';
+import { Inline } from '../../foundation';
 import type { ZoraColor } from '../../internal/recipes';
 import { resolveIconSize } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';

package/src/patterns/tree-view/TreeItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { IconButton } from '../../components/icon-button';
-import { Box, Stack } from '../../foundation';
+import { IconButton } from '../../features/button/public';
+import { Box, Stack } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 import { SettingsRow } from '../settings-row';

package/src/patterns/tree-view/TreeView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '../../foundation';
+import { Stack } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { TreeItem } from './TreeItem';
 import type { TreeViewProps } from './types';

package/src/platformAcceptance.test.ts

@@ -9,6 +9,6 @@ test('passes the isolated Surface 4 and RN Web 0.21 acceptance suite', () => {
   const output = `${subprocess.stdout.toString()}\n${subprocess.stderr.toString()}`;
 
   expect(subprocess.exitCode, output).toBe(0);
-  expect(output).toContain('5 pass');
+  expect(output).toContain('9 pass');
   expect(output).toContain('0 fail');
 });

package/src/registry.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 
-import type { ZoraComponentRegistry } from './index';
+import type { ZoraComponentRegistry } from '.';
 
 const NON_RUNTIME_COMPONENT_EXPORTS = new Set([
   'GradientRendererProvider',

package/src/registry.ts

@@ -2,28 +2,13 @@ import type { InteractionPolicyProps } from '@ankhorage/surface';
 import type React from 'react';
 
 import { AppBar } from './components/app-bar';
-import { Avatar } from './components/avatar';
-import { AvatarGroup } from './components/avatar-group';
-import { Badge } from './components/badge';
 import { Breadcrumbs } from './components/breadcrumbs';
-import { Button } from './components/button';
-import { ButtonGroup } from './components/button-group';
-import { Card } from './components/card';
 import { Checkbox, CheckboxGroup } from './components/checkbox';
-import { Chip } from './components/chip';
-import { ChipGroup } from './components/chip-group';
-import { DataTable } from './components/data-table';
 import { DatePicker } from './components/date-picker';
 import { Form, FormActions, FormError, FormField } from './components/form';
 import { Gradient } from './components/gradient';
-import { Heading } from './components/heading';
-import { Icon } from './components/icon';
-import { IconButton } from './components/icon-button';
-import { Image } from './components/image';
 import { Input } from './components/input';
-import { MediaCard } from './components/media-card';
 import { DropdownMenu, Menu } from './components/menu';
-import { MetricCard } from './components/metric-card';
 import { Modal } from './components/modal';
 import { Pagination } from './components/pagination';
 import { Progress, ProgressRing } from './components/progress';
@@ -32,26 +17,37 @@ import { Rating } from './components/rating';
 import { SearchBar } from './components/search-bar';
 import { Select } from './components/select';
 import { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from './components/skeleton';
-import { SplashScreen } from './components/splash-screen';
 import { Tabs } from './components/tabs';
-import { Text } from './components/text';
 import { Textarea } from './components/textarea';
 import { TimePicker } from './components/time-picker';
 import { Toast } from './components/toast';
 import { Toolbar, ToolbarAction } from './components/toolbar';
+import { Avatar } from './features/avatar/public';
+import { AvatarGroup } from './features/avatar/public';
+import { Badge } from './features/badge/public';
+import { BottomSheet } from './features/bottom-sheet/public';
+import { Button } from './features/button/public';
+import { ButtonGroup } from './features/button/public';
+import { IconButton } from './features/button/public';
+import { Card } from './features/card/public';
+import { MediaCard } from './features/card/public';
+import { MetricCard } from './features/card/public';
+import { PostCard } from './features/card/public';
+import { ProductCard } from './features/card/public';
+import { Chip } from './features/chip/public';
+import { ChipGroup } from './features/chip/public';
+import { DataTable } from './features/data-table/public';
+import { Icon } from './features/icon/public';
+import { Image } from './features/image/public';
+import { Box, Container, Divider, Grid, Stack } from './features/layout/public';
+import { ContentRail } from './features/layout/public';
+import { FlatList, SectionList } from './features/list/public';
+import { SplashScreen } from './features/splash-screen/public';
+import { Surface } from './features/surface/public';
+import { Heading } from './features/typography/public';
+import { Text } from './features/typography/public';
 import { Uploader } from './features/uploader/public';
-import {
-  Box,
-  Center,
-  Container,
-  Divider,
-  Grid,
-  Inline,
-  Show,
-  Spacer,
-  Stack,
-  Surface,
-} from './foundation';
+import { Center, Inline, Show, Spacer } from './foundation';
 import { AppShell } from './layout/app-shell';
 import { Screen } from './layout/screen';
 import { ScreenSection } from './layout/screen-section';
@@ -69,7 +65,6 @@ import {
 import { ChatListItem } from './patterns/chat-list-item';
 import { CollectionEditor } from './patterns/collection-editor';
 import { ConfirmDialog } from './patterns/confirm-dialog';
-import { ContentRail } from './patterns/content-rail';
 import { DisclosureSection } from './patterns/disclosure-section';
 import { EmptyState } from './patterns/empty-state';
 import { FilterBar } from './patterns/filter-bar';
@@ -80,8 +75,6 @@ import { MessageBubble } from './patterns/message-bubble';
 import { MissingElement } from './patterns/missing-element';
 import { Notice } from './patterns/notice';
 import { Panel } from './patterns/panel';
-import { PostCard } from './patterns/post-card';
-import { ProductCard } from './patterns/product-card';
 import { ReaderSurface } from './patterns/reader';
 import { BarcodeScannerView, CameraPermissionView, ScanOverlay } from './patterns/scanner';
 import { SectionHeader } from './patterns/section-header';
@@ -170,6 +163,9 @@ const _ZORA_COMPONENT_REGISTRY = {
   Toolbar,
   ToolbarAction,
   Uploader,
+  BottomSheet,
+  FlatList,
+  SectionList,
   ThemeModeToggle,
   Box,
   Center,

package/src/showcaseCoverage.test.ts

@@ -65,7 +65,7 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'Stack',
     'Surface',
   ],
-  features: ['Uploader'],
+  features: ['Uploader', 'BottomSheet', 'FlatList', 'SectionList'],
   layouts: [
     'AppShell',
     'Screen',

package/src/theme/ThemeModeToggle.tsx

@@ -1,4 +1,4 @@
-import { IconButton } from '../components/icon-button';
+import { IconButton } from '../features/button/public';
 import { resolveThemeModeToggleState } from './resolveThemeModeToggleState';
 import type { ThemeModeToggleProps } from './ThemeModeToggleProps';
 import { useZoraTheme } from './useZoraTheme';

package/src/theme/ThemeModeToggleProps.ts

@@ -1,4 +1,4 @@
-import type { IconButtonProps } from '../components/icon-button';
+import type { IconButtonProps } from '../features/button/public';
 
 export type ThemeModeToggleProps = Pick<
   IconButtonProps,

package/src/theme/themeScopeStructure.test.ts

@@ -53,22 +53,25 @@ const scopeGuardDirs = [
 const scopeGuardFiles = scopeGuardDirs.flatMap(collectSourceFiles);
 
 const scopedComponentFiles = [
+  join(srcDir, 'features', 'list', 'adapters', 'inbound', 'FlatList.tsx'),
+  join(srcDir, 'features', 'list', 'adapters', 'inbound', 'SectionList.tsx'),
+  join(srcDir, 'features', 'bottom-sheet', 'adapters', 'inbound', 'BottomSheet.tsx'),
   join(srcDir, 'components', 'app-bar', 'AppBar.tsx'),
-  join(srcDir, 'components', 'badge', 'Badge.tsx'),
-  join(srcDir, 'components', 'button', 'Button.tsx'),
-  join(srcDir, 'components', 'button-group', 'ButtonGroup.tsx'),
-  join(srcDir, 'components', 'card', 'Card.tsx'),
-  join(srcDir, 'components', 'media-card', 'MediaCard.tsx'),
-  join(srcDir, 'components', 'metric-card', 'MetricCard.tsx'),
+  join(srcDir, 'features', 'badge', 'adapters', 'inbound', 'Badge.tsx'),
+  join(srcDir, 'features', 'button', 'adapters', 'inbound', 'Button.tsx'),
+  join(srcDir, 'features', 'button', 'adapters', 'inbound', 'ButtonGroup.tsx'),
+  join(srcDir, 'features', 'card', 'adapters', 'inbound', 'Card.tsx'),
+  join(srcDir, 'features', 'card', 'adapters', 'inbound', 'MediaCard.tsx'),
+  join(srcDir, 'features', 'card', 'adapters', 'inbound', 'MetricCard.tsx'),
   join(srcDir, 'components', 'checkbox', 'Checkbox.tsx'),
   join(srcDir, 'components', 'checkbox', 'CheckboxGroup.tsx'),
   join(srcDir, 'components', 'form', 'Form.tsx'),
   join(srcDir, 'components', 'form', 'FormActions.tsx'),
   join(srcDir, 'components', 'form', 'FormError.tsx'),
   join(srcDir, 'components', 'form', 'FormField.tsx'),
-  join(srcDir, 'components', 'heading', 'Heading.tsx'),
-  join(srcDir, 'components', 'icon', 'Icon.tsx'),
-  join(srcDir, 'components', 'icon-button', 'IconButton.tsx'),
+  join(srcDir, 'features', 'typography', 'adapters', 'inbound', 'Heading.tsx'),
+  join(srcDir, 'features', 'icon', 'adapters', 'inbound', 'Icon.tsx'),
+  join(srcDir, 'features', 'button', 'adapters', 'inbound', 'IconButton.tsx'),
   join(srcDir, 'components', 'input', 'Input.tsx'),
   join(srcDir, 'components', 'modal', 'Modal.tsx'),
   join(srcDir, 'components', 'progress', 'Progress.tsx'),
@@ -77,7 +80,7 @@ const scopedComponentFiles = [
   join(srcDir, 'components', 'rating', 'Rating.tsx'),
   join(srcDir, 'components', 'select', 'Select.tsx'),
   join(srcDir, 'components', 'tabs', 'Tabs.tsx'),
-  join(srcDir, 'components', 'text', 'Text.tsx'),
+  join(srcDir, 'features', 'typography', 'adapters', 'inbound', 'Text.tsx'),
   join(srcDir, 'components', 'textarea', 'Textarea.tsx'),
   join(srcDir, 'components', 'toolbar', 'Toolbar.tsx'),
   join(srcDir, 'components', 'toolbar', 'ToolbarAction.tsx'),
@@ -113,31 +116,31 @@ const scopedComponentFiles = [
   join(srcDir, 'patterns', 'tree-view', 'TreeItem.tsx'),
   join(srcDir, 'patterns', 'tree-view', 'TreeView.tsx'),
 
-  join(srcDir, 'foundation', 'Box.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Box.tsx'),
   join(srcDir, 'foundation', 'Center.tsx'),
-  join(srcDir, 'foundation', 'Container.tsx'),
-  join(srcDir, 'foundation', 'Divider.tsx'),
-  join(srcDir, 'foundation', 'Grid.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Container.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Divider.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Grid.tsx'),
   join(srcDir, 'foundation', 'Inline.tsx'),
   join(srcDir, 'foundation', 'Show.tsx'),
   join(srcDir, 'foundation', 'Spacer.tsx'),
-  join(srcDir, 'foundation', 'Stack.tsx'),
-  join(srcDir, 'foundation', 'Surface.tsx'),
+  join(srcDir, 'features', 'layout', 'adapters', 'inbound', 'Stack.tsx'),
+  join(srcDir, 'features', 'surface', 'adapters', 'inbound', 'Surface.tsx'),
 ] as const;
 
 const scopedPropTypeFiles = [
   join(srcDir, 'components', 'app-bar', 'types.ts'),
-  join(srcDir, 'components', 'badge', 'types.ts'),
-  join(srcDir, 'components', 'button', 'types.ts'),
-  join(srcDir, 'components', 'button-group', 'types.ts'),
-  join(srcDir, 'components', 'card', 'types.ts'),
-  join(srcDir, 'components', 'media-card', 'types.ts'),
-  join(srcDir, 'components', 'metric-card', 'types.ts'),
+  join(srcDir, 'types', 'badge.ts'),
+  join(srcDir, 'types', 'button.ts'),
+  join(srcDir, 'types', 'button-group.ts'),
+  join(srcDir, 'types', 'card.ts'),
+  join(srcDir, 'types', 'media-card.ts'),
+  join(srcDir, 'types', 'metric-card.ts'),
   join(srcDir, 'components', 'checkbox', 'types.ts'),
   join(srcDir, 'components', 'form', 'types.ts'),
-  join(srcDir, 'components', 'heading', 'types.ts'),
-  join(srcDir, 'components', 'icon', 'Icon.tsx'),
-  join(srcDir, 'components', 'icon-button', 'types.ts'),
+  join(srcDir, 'types', 'heading.ts'),
+  join(srcDir, 'types', 'icon.ts'),
+  join(srcDir, 'types', 'icon-button.ts'),
   join(srcDir, 'components', 'input', 'types.ts'),
   join(srcDir, 'components', 'modal', 'types.ts'),
   join(srcDir, 'components', 'progress', 'types.ts'),
@@ -145,7 +148,7 @@ const scopedPropTypeFiles = [
   join(srcDir, 'components', 'rating', 'types.ts'),
   join(srcDir, 'components', 'select', 'types.ts'),
   join(srcDir, 'components', 'tabs', 'types.ts'),
-  join(srcDir, 'components', 'text', 'types.ts'),
+  join(srcDir, 'types', 'text.ts'),
   join(srcDir, 'components', 'textarea', 'types.ts'),
   join(srcDir, 'components', 'toolbar', 'types.ts'),
 

package/src/types/avatar-group.ts

@@ -0,0 +1,24 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { AvatarShape, AvatarSize } from '../features/avatar/public';
+import type { ZoraColor } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface AvatarGroupItem {
+  id?: string;
+  source?: ImageSourcePropType;
+  name?: string;
+  initials?: string;
+  iconFallback?: ButtonIconSpec;
+  label?: string;
+  color?: ZoraColor;
+}
+
+export interface AvatarGroupProps extends ZoraBaseProps {
+  items: readonly AvatarGroupItem[];
+  max?: number;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  overflowLabel?: (overflowCount: number) => string;
+}

package/src/types/avatar.ts

@@ -0,0 +1,20 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { ZoraColor } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+export type AvatarShape = 'circle' | 'rounded';
+
+export interface AvatarProps extends ZoraBaseProps {
+  source?: ImageSourcePropType;
+  name?: string;
+  initials?: string;
+  iconFallback?: ButtonIconSpec;
+  label?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  color?: ZoraColor;
+}

package/src/types/badge.ts

@@ -0,0 +1,15 @@
+import type { BadgeProps as SurfaceBadgeProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraBadgeVariant, ZoraColor, ZoraControlSize } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface BadgeProps
+  extends
+    ZoraBaseProps,
+    Omit<SurfaceBadgeProps, 'content' | 'size' | 'color' | 'variant' | 'mode' | 'themeId'> {
+  children?: React.ReactNode;
+  color?: ZoraColor;
+  variant?: ZoraBadgeVariant;
+  size?: ZoraControlSize;
+}

package/src/types/button-group.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+
+import type { StackProps } from '../features/layout/public';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type ButtonGroupAlign = 'start' | 'center' | 'end' | 'stretch' | 'between';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical' | 'responsive';
+
+export interface ButtonGroupProps extends ZoraBaseProps {
+  children?: React.ReactNode;
+  align?: ButtonGroupAlign;
+  orientation?: ButtonGroupOrientation;
+  gap?: StackProps['gap'];
+  reverse?: boolean;
+}

package/src/types/button.ts

@@ -0,0 +1,15 @@
+import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ButtonProps
+  extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'color' | 'variant'> {
+  children?: React.ReactNode;
+  color?: ZoraColor;
+  variant?: ZoraButtonVariant;
+  size?: ZoraControlSize;
+  leadingIcon?: ButtonIconSpec;
+  trailingIcon?: ButtonIconSpec;
+}

package/src/types/card.ts

@@ -0,0 +1,19 @@
+import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraCardTone } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface CardProps
+  extends ZoraBaseProps, Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  actions?: React.ReactNode;
+  footer?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+  padding?: string;
+  radius?: string;
+}

package/src/types/chip-group.ts

@@ -0,0 +1,36 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraColor, ZoraControlSize } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ChipGroupItem<TValue extends string = string> {
+  value: TValue;
+  label: React.ReactNode;
+  icon?: ButtonIconSpec;
+  disabled?: boolean;
+  testID?: string;
+}
+
+interface ChipGroupBaseProps<TValue extends string> extends ZoraBaseProps {
+  items: readonly ChipGroupItem<TValue>[];
+  color?: ZoraColor;
+  size?: ZoraControlSize;
+  wrap?: boolean;
+  disabled?: boolean;
+}
+
+interface ChipGroupSingleProps<TValue extends string> {
+  multiple?: false;
+  value?: TValue;
+  onValueChange?: (value: TValue) => void;
+}
+
+interface ChipGroupMultipleProps<TValue extends string> {
+  multiple: true;
+  value?: readonly TValue[];
+  onValueChange?: (value: TValue[]) => void;
+}
+
+export type ChipGroupProps<TValue extends string = string> = ChipGroupBaseProps<TValue> &
+  (ChipGroupSingleProps<TValue> | ChipGroupMultipleProps<TValue>);

package/src/types/chip.ts

@@ -0,0 +1,29 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraColor, ZoraControlSize } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ChipProps extends ZoraBaseProps {
+  children: React.ReactNode;
+  icon?: ButtonIconSpec;
+  selected?: boolean;
+  disabled?: boolean;
+  color?: ZoraColor;
+  size?: ZoraControlSize;
+  onPress?: () => void;
+}
+
+export interface ChipColors {
+  backgroundColor: string;
+  borderColor: string;
+  contentColor: string;
+  opacity?: number;
+}
+
+export interface ChipInteractionState {
+  pressed: boolean;
+  hovered: boolean;
+  focused: boolean;
+  disabled: boolean;
+}