@ankhorage/zora 16.0.0 → 18.0.0

package/src/features/list/adapters/inbound/ListItem.tsx

@@ -0,0 +1,89 @@
+import { ListItem as SurfaceListItem } from '@ankhorage/surface';
+import React from 'react';
+
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ListItemProps, ListItemVariant } from '../../../../types/list';
+import { View } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+
+function ListItemInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  interactionPolicy,
+  title,
+  description,
+  meta,
+  leading,
+  trailing,
+  action,
+  onPress,
+  selected = false,
+  disabled = false,
+  compact = false,
+  variant = 'divider',
+}: ListItemProps) {
+  const { theme } = useZoraTheme();
+  const trailingContent = renderTrailing(trailing, action);
+
+  return (
+    <View
+      bg={variant === 'card' ? theme.semantics.surface.raised : 'transparent'}
+      borderColor={
+        selected
+          ? theme.semantics.border.focus
+          : variant === 'card'
+            ? theme.semantics.border.default
+            : 'transparent'
+      }
+      borderWidth={variant === 'card' || selected ? 1 : 0}
+      overflow="hidden"
+      radius={resolveRadius(variant)}
+    >
+      <SurfaceListItem
+        compact={compact}
+        disabled={disabled}
+        interactionPolicy={interactionPolicy}
+        leading={leading}
+        onPress={action ? undefined : onPress}
+        selected={selected}
+        testID={testID}
+        trailing={trailingContent}
+      >
+        <View gap="xxs">
+          <Text variant="body" weight={selected ? 'semiBold' : 'medium'}>
+            {title}
+          </Text>
+          {description ? (
+            <Text emphasis="muted" variant="bodySmall">
+              {description}
+            </Text>
+          ) : null}
+          {meta ? (
+            <Text emphasis="subtle" variant="caption">
+              {meta}
+            </Text>
+          ) : null}
+        </View>
+      </SurfaceListItem>
+    </View>
+  );
+}
+
+function resolveRadius(variant: ListItemVariant) {
+  return variant === 'card' ? ('l' as const) : ('m' as const);
+}
+
+function renderTrailing(trailing: React.ReactNode, action: React.ReactNode) {
+  if (!trailing && !action) return undefined;
+  return (
+    <View align="center" direction="row" gap="s" wrap="nowrap">
+      {trailing}
+      {action}
+    </View>
+  );
+}
+
+/*** Opinionated list item built on the Surface list-item interaction and geometry boundary. */
+export const ListItem = withZoraThemeScope(ListItemInner);

package/src/{patterns/list → features/list/adapters/inbound}/ListSection.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { SectionHeader } from '../section-header';
+import { SectionHeader } from '../../../../patterns/section-header';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ListSectionProps } from '../../../../types/list';
+import { View } from '../../../layout/public';
 import { List } from './List';
-import type { ListSectionProps } from './types';
 
 function ListSectionInner({
   themeId: _themeId,
@@ -17,9 +17,8 @@ function ListSectionInner({
   ...props
 }: ListSectionProps) {
   const hasHeader = title !== undefined;
-
   return (
-    <Stack gap="s" testID={testID}>
+    <View gap="s" testID={testID}>
       {hasHeader ? (
         <SectionHeader
           actions={actions}
@@ -29,13 +28,9 @@ function ListSectionInner({
         />
       ) : null}
       <List {...props} />
-    </Stack>
+    </View>
   );
 }
 
-/***
- * Section wrapper for lists with optional title and description.
- *
- 
- */
+/*** Section wrapper for lists with optional ZORA section-heading semantics. */
 export const ListSection = withZoraThemeScope(ListSectionInner);

package/src/{patterns → features}/list/meta.ts

@@ -1,6 +1,7 @@
 import type { ZoraComponentMeta } from '../../metadata';
 
-const LIST_NOTE = 'List pattern component; not represented as a manifest node in v1.';
+const LIST_NOTE =
+  'List feature component; collection authoring is represented through List metadata.';
 
 export const listMeta = {
   name: 'List',
@@ -11,8 +12,8 @@ export const listMeta = {
   props: {},
 } as const satisfies ZoraComponentMeta;
 
-export const listRowMeta = {
-  name: 'ListRow',
+export const listItemMeta = {
+  name: 'ListItem',
   category: 'pattern',
   directManifestNode: false,
   allowedChildren: [],
@@ -21,18 +22,10 @@ export const listRowMeta = {
     itemPress: {
       label: 'Item press',
       eventType: 'collection.itemPress',
-      description: 'Emitted when a collection item row is selected.',
+      description: 'Emitted when a collection item is selected.',
       payloadFields: [
-        {
-          path: 'payload.itemId',
-          type: 'string',
-          label: 'Item ID',
-        },
-        {
-          path: 'payload.item',
-          type: 'record',
-          label: 'Item',
-        },
+        { path: 'payload.itemId', type: 'string', label: 'Item ID' },
+        { path: 'payload.item', type: 'record', label: 'Item' },
       ],
     },
   },

package/src/features/list/public.ts

@@ -1,7 +1,18 @@
+export type {
+  ListChildrenProps,
+  ListItemProps,
+  ListItemsProps,
+  ListItemVariant,
+  ListProps,
+  ListSectionProps,
+} from '../../types/list';
 export type {
   ManifestListProps,
   ManifestListSection,
   ManifestSectionListProps,
 } from '../../types/manifest-list';
 export { FlatList } from './adapters/inbound/FlatList';
+export { List } from './adapters/inbound/List';
+export { ListItem } from './adapters/inbound/ListItem';
+export { ListSection } from './adapters/inbound/ListSection';
 export { SectionList } from './adapters/inbound/SectionList';

package/src/features/list/utils/resolveListSeparator.ts

@@ -0,0 +1,9 @@
+import type { ListItemVariant } from '../../../types/list';
+
+export type ListSeparatorKind = 'none' | 'divider' | 'spacer';
+
+/*** Resolves the separator preceding an item for the active list presentation. */
+export function resolveListSeparator(variant: ListItemVariant, index: number): ListSeparatorKind {
+  if (index === 0) return 'none';
+  return variant === 'divider' ? 'divider' : 'spacer';
+}

package/src/features/missing-element/adapters/inbound/MissingElement.tsx

@@ -5,7 +5,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { MissingElementProps } from '../../../../types/missing-element';
 import { Badge } from '../../../badge/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 /***
@@ -26,7 +26,7 @@ function MissingElementInner({
   const accessibilityLabel = `Missing element: ${requestedCapability}. ${reason}`;
 
   return (
-    <Box
+    <View
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="text"
       accessible
@@ -40,7 +40,7 @@ function MissingElementInner({
       style={styles.root}
       testID={testID}
     >
-      <Stack gap="xs">
+      <View gap="xs">
         <Badge color="warning">Missing element</Badge>
         <Text variant="label" weight="semiBold">
           {requestedCapability}
@@ -53,8 +53,8 @@ function MissingElementInner({
             Evidence: {evidenceId}
           </Text>
         ) : null}
-      </Stack>
-    </Box>
+      </View>
+    </View>
   );
 }
 

package/src/features/pagination/adapters/inbound/Pagination.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { PaginationProps } from '../../../../types/pagination';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 import { resolvePaginationPage } from '../../utils/resolvePaginationPage';
 import { resolvePaginationState } from '../../utils/resolvePaginationState';
@@ -46,7 +46,7 @@ function PaginationInner({
   );
 
   return (
-    <Stack align="center" direction="row" gap="xs" testID={testID}>
+    <View align="center" direction="row" gap="xs" testID={testID}>
       {showFirstLast ? (
         <Button
           disabled={navigationDisabled || state.currentPage === 1}
@@ -111,6 +111,6 @@ function PaginationInner({
           {lastLabel}
         </Button>
       ) : null}
-    </Stack>
+    </View>
   );
 }

package/src/{patterns/tile-grid → features/palette-item/adapters/inbound}/PaletteItem.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-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';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { PaletteItemProps } from '../../../../types/palette-item';
+import { Card } from '../../../card/public';
+import { View } from '../../../layout/public';
+import { Heading } from '../../../typography/public';
+import { Text } from '../../../typography/public';
 
 function PaletteItemInner({
   themeId: _themeId,
@@ -38,8 +38,8 @@ function PaletteItemInner({
           : undefined
       }
     >
-      <Box p="xs" style={{ alignItems: 'center' }}>
-        {icon ? <Box pb="s">{/* Icon spec here */}</Box> : null}
+      <View p="xs" style={{ alignItems: 'center' }}>
+        {icon ? <View pb="s">{/* Icon spec here */}</View> : null}
         <Heading level={5} align="center">
           {title}
         </Heading>
@@ -48,8 +48,8 @@ function PaletteItemInner({
             {description}
           </Text>
         ) : null}
-        {badge ? <Box pt="xs">{badge}</Box> : null}
-      </Box>
+        {badge ? <View pt="xs">{badge}</View> : null}
+      </View>
     </Card>
   );
 }

package/src/{layout/sidebar-layout/meta.ts → features/palette-item/paletteItemMeta.ts}

@@ -1,10 +1,10 @@
 import type { ZoraComponentMeta } from '../../metadata';
 
-export const sidebarLayoutMeta = {
-  name: 'SidebarLayout',
-  category: 'layout',
+export const paletteItemMeta = {
+  name: 'PaletteItem',
+  category: 'pattern',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Application layout; not represented as a manifest node in v1.',
+  note: 'Palette option pattern; not represented as a manifest node in v1.',
   props: {},
 } as const satisfies ZoraComponentMeta;

package/src/features/palette-item/public.ts

@@ -0,0 +1,2 @@
+export type { PaletteItemProps } from '../../types/palette-item';
+export { PaletteItem } from './adapters/inbound/PaletteItem';

package/src/features/popover-menu/adapters/inbound/PopoverMenu.tsx

@@ -9,7 +9,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { PopoverMenuAction, PopoverMenuProps } from '../../../../types/popover-menu';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Presents a ZORA-styled action list through the Surface PopoverMenu capability. */
 export const PopoverMenu = withZoraThemeScope(PopoverMenuInner);
@@ -56,5 +56,5 @@ function renderActionLeading(action: PopoverMenuAction, iconColor: string): Reac
 
 /*** Wraps optional trailing action content in the ZORA layout boundary. */
 function renderActionTrailing(action: PopoverMenuAction): React.ReactNode {
-  return action.trailing === undefined ? undefined : <Box>{action.trailing}</Box>;
+  return action.trailing === undefined ? undefined : <View>{action.trailing}</View>;
 }

package/src/features/progress/adapters/inbound/Progress.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import { type ProgressProps, resolveProgressRole } from '../../../../types/progress';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { resolveProgressFraction } from '../../utils/resolveProgressFraction';
 
 function resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number {
@@ -34,7 +34,7 @@ function ProgressInner({
   const role = resolveProgressRole(theme, color);
 
   return (
-    <Box
+    <View
       accessibilityRole="progressbar"
       bg={theme.semantics.neutral.surface}
       borderColor={theme.semantics.neutral.divider}
@@ -43,8 +43,8 @@ function ProgressInner({
       testID={testID}
       style={{ height, overflow: 'hidden' }}
     >
-      <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />
-    </Box>
+      <View bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />
+    </View>
   );
 }
 

package/src/features/progress/adapters/inbound/ProgressRing.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View as ReactNativeView } from 'react-native';
 
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import { type ProgressRingProps, resolveProgressRole } from '../../../../types/progress';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 import { resolveProgressFraction } from '../../utils/resolveProgressFraction';
 import { resolveProgressRingGeometry } from '../../utils/resolveProgressRingGeometry';
@@ -36,7 +36,7 @@ function ProgressRingInner({
   const segments = Array.from({ length: geometry.filledSegmentCount });
 
   return (
-    <View
+    <ReactNativeView
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="progressbar"
       accessibilityValue={{
@@ -49,7 +49,7 @@ function ProgressRingInner({
       style={{ height: geometry.diameter, width: geometry.diameter }}
       testID={testID}
     >
-      <View
+      <ReactNativeView
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
         style={styles.visual}
@@ -86,15 +86,15 @@ function ProgressRingInner({
             />
           </View>
         ))}
-      </View>
+      </ReactNativeView>
 
       {centerValue !== undefined || centerLabel !== undefined ? (
-        <View
+        <ReactNativeView
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={styles.center}
         >
-          <Stack align="center" gap="xxs" px="s">
+          <View align="center" gap="xxs" px="s">
             {centerValue !== undefined ? (
               <Text align="center" variant="lead" weight="bold">
                 {centerValue}
@@ -105,10 +105,10 @@ function ProgressRingInner({
                 {centerLabel}
               </Text>
             ) : null}
-          </Stack>
-        </View>
+          </View>
+        </ReactNativeView>
       ) : null}
-    </View>
+    </ReactNativeView>
   );
 }
 

package/src/features/rating/adapters/inbound/Rating.tsx

@@ -1,12 +1,12 @@
 import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 
-import { Inline } from '../../../../foundation';
 import type { ZoraColor } from '../../../../internal/recipes';
 import { resolveIconSize } from '../../../../internal/recipes';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { RatingProps } from '../../../../types/rating';
 import { Icon } from '../../../icon/public';
+import { View } from '../../../layout/public';
 import { resolveRatingSegments } from '../../utils/resolveRatingSegments';
 
 /*** Displays a read-only star rating with optional half steps. */
@@ -29,7 +29,7 @@ function RatingInner({
   const iconSize = resolveIconSize(size);
 
   return (
-    <Inline align="center" gap="xxs" testID={testID} wrap="nowrap">
+    <View direction="row" align="center" gap="xxs" testID={testID} wrap="nowrap">
       {segments.map((segment, index) => {
         const name =
           segment === 'full' ? 'star' : segment === 'half' ? 'star-half' : 'star-outline';
@@ -38,7 +38,7 @@ function RatingInner({
           <Icon key={`${index}-${segment}`} color={segmentColor} name={name} size={iconSize} />
         );
       })}
-    </Inline>
+    </View>
   );
 }
 

package/src/features/skeleton/adapters/inbound/Skeleton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SkeletonProps } from '../../../../types/skeleton';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 function SkeletonInner({
   themeId: _themeId,
@@ -16,7 +16,7 @@ function SkeletonInner({
   const { theme } = useZoraTheme();
 
   return (
-    <Box
+    <View
       accessibilityLabel="Loading"
       accessibilityRole="text"
       bg={theme.semantics.neutral.surfaceHover}

package/src/features/skeleton/adapters/inbound/SkeletonCard.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SkeletonCardProps } from '../../../../types/skeleton';
 import { ButtonGroup } from '../../../button/public';
 import { Card } from '../../../card/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Skeleton } from './Skeleton';
 import { SkeletonText } from './SkeletonText';
 
@@ -19,19 +19,19 @@ function SkeletonCardInner({
 }: SkeletonCardProps) {
   return (
     <Card compact={compact} testID={testID} tone="default">
-      <Stack gap={compact ? 's' : 'm'}>
+      <View gap={compact ? 's' : 'm'}>
         {media ? <Skeleton height={compact ? 120 : 180} radius="m" /> : null}
-        <Stack gap="s">
+        <View gap="s">
           <Skeleton height={18} radius="full" width="54%" />
           <SkeletonText lines={lines} />
-        </Stack>
+        </View>
         {actions ? (
           <ButtonGroup align="end">
             <Skeleton height={36} radius="m" width={88} />
             <Skeleton height={36} radius="m" width={120} />
           </ButtonGroup>
         ) : null}
-      </Stack>
+      </View>
     </Card>
   );
 }

package/src/features/skeleton/adapters/inbound/SkeletonList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { List, type ListRowProps } from '../../../../patterns/list';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SkeletonListProps } from '../../../../types/skeleton';
+import { List, type ListItemProps } from '../../../list/public';
 import { Skeleton } from './Skeleton';
 import { SkeletonText } from './SkeletonText';
 
@@ -38,7 +38,7 @@ function SkeletonListInner({
   compact = false,
 }: SkeletonListProps) {
   const rowCount = clampRows(rows);
-  const items: ListRowProps[] = Array.from({ length: rowCount }).map(() => ({
+  const items: ListItemProps[] = Array.from({ length: rowCount }).map(() => ({
     compact,
     description: <SkeletonText lines={lines} />,
     leading: renderLeading({ avatar, media }),
@@ -46,7 +46,7 @@ function SkeletonListInner({
     variant,
   }));
 
-  return <List compact={compact} items={items} rowVariant={variant} testID={testID} />;
+  return <List compact={compact} items={items} itemVariant={variant} testID={testID} />;
 }
 
 /***

package/src/features/skeleton/adapters/inbound/SkeletonText.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SkeletonTextProps } from '../../../../types/skeleton';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Skeleton } from './Skeleton';
 
 function clampLines(lines: number): number {
@@ -26,7 +26,7 @@ function SkeletonTextInner({
   const lineCount = clampLines(lines);
 
   return (
-    <Stack gap={gap} testID={testID}>
+    <View gap={gap} testID={testID}>
       {Array.from({ length: lineCount }).map((_, index) => {
         const isLastLine = index === lineCount - 1;
         return (
@@ -38,7 +38,7 @@ function SkeletonTextInner({
           />
         );
       })}
-    </Stack>
+    </View>
   );
 }
 

package/src/features/time-picker/composition/TimePickerContent.tsx

@@ -3,7 +3,7 @@ import { ScrollView, StyleSheet } from 'react-native';
 
 import type { TimePickerProps } from '../../../types/time-picker';
 import { Button } from '../../button/public';
-import { Stack } from '../../layout/public';
+import { View } from '../../layout/public';
 import { Text } from '../../typography/public';
 
 const MINUTES_PER_DAY = 24 * 60;
@@ -29,10 +29,10 @@ export function TimePickerContent({
   );
 
   return (
-    <Stack gap="m" p="m" testID={testID ? `${testID}-content` : undefined}>
+    <View gap="m" p="m" testID={testID ? `${testID}-content` : undefined}>
       <PickerHeader description={description} title={label ?? 'Choose time'} />
       <ScrollView style={styles.options}>
-        <Stack gap="xxs">
+        <View gap="xxs">
           {options.map((option) => (
             <TimePickerOption
               formatTime={formatTime}
@@ -44,12 +44,12 @@ export function TimePickerContent({
               testID={testID}
             />
           ))}
-        </Stack>
+        </View>
       </ScrollView>
       <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
         Cancel
       </Button>
-    </Stack>
+    </View>
   );
 }
 
@@ -78,7 +78,7 @@ function PickerHeader({
   title: React.ReactNode;
 }) {
   return (
-    <Stack gap="xxs">
+    <View gap="xxs">
       <Text align="center" variant="label" weight="semiBold">
         {title}
       </Text>
@@ -87,7 +87,7 @@ function PickerHeader({
           {description}
         </Text>
       ) : null}
-    </Stack>
+    </View>
   );
 }
 

package/src/features/time-picker/composition/TimePickerField.tsx

@@ -2,7 +2,7 @@ import { Field } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { TimePickerProps } from '../../../types/time-picker';
-import { Stack } from '../../layout/public';
+import { View } from '../../layout/public';
 import { Text } from '../../typography/public';
 
 /*** Renders the shared TimePicker field frame around a platform-specific trigger. */
@@ -39,7 +39,7 @@ interface TimePickerFieldProps extends Pick<
 /*** Renders the picker label and optional supporting description. */
 function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
   return (
-    <Stack gap="xs">
+    <View gap="xs">
       <Text variant="label" weight="semiBold">
         {label}
       </Text>
@@ -48,6 +48,6 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
           {description}
         </Text>
       ) : null}
-    </Stack>
+    </View>
   );
 }