@ankhorage/zora 17.0.0 → 18.0.1

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 { View } 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,7 +17,6 @@ function ListSectionInner({
   ...props
 }: ListSectionProps) {
   const hasHeader = title !== undefined;
-
   return (
     <View gap="s" testID={testID}>
       {hasHeader ? (
@@ -33,9 +32,5 @@ function ListSectionInner({
   );
 }
 
-/***
- * 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/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/uploader/adapters/inbound/Uploader.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { UploadAsset, UploaderProps, UploadType } from '../../../../types/upload';
 import { Button } from '../../../button/public';
 import { Dialog } from '../../../dialog/public';
-import { FormField } from '../../../form/public';
+import { Field } from '../../../form/public';
 import { Icon } from '../../../icon/public';
 import { Image } from '../../../image/public';
 import { View } from '../../../layout/public';
@@ -206,7 +206,7 @@ function UploaderInner({
 
   return (
     <>
-      <FormField
+      <Field
         description={description}
         disabled={disabled}
         errorText={effectiveError}
@@ -285,7 +285,7 @@ function UploaderInner({
             ) : null}
           </View>
         </View>
-      </FormField>
+      </Field>
 
       {canPreviewImage ? (
         <Dialog

package/src/index.ts

@@ -128,12 +128,12 @@ export {
   type CheckboxProps,
 } from './features/form/checkbox/public';
 export type {
+  FieldProps,
   FormActionsProps,
   FormErrorProps,
   FormErrors,
   FormFieldConfig,
   FormFieldInputType,
-  FormFieldProps,
   FormProps,
   FormValidationErrors,
   FormValidationResult,
@@ -143,10 +143,10 @@ export type {
   ValidationRule,
 } from './features/form/public';
 export {
+  Field,
   Form,
   FormActions,
   FormError,
-  FormField,
   hasRequiredRule,
   useFormController,
   validateField,
@@ -218,7 +218,16 @@ export type {
   ManifestListSection,
   ManifestSectionListProps,
 } from './features/list/public';
+export type {
+  ListChildrenProps,
+  ListItemProps,
+  ListItemsProps,
+  ListItemVariant,
+  ListProps,
+  ListSectionProps,
+} from './features/list/public';
 export { FlatList, SectionList } from './features/list/public';
+export { List, ListItem, ListSection } from './features/list/public';
 export { MissingElement, type MissingElementProps } from './features/missing-element/public';
 export { Pagination, type PaginationProps } from './features/pagination/public';
 export type { PaletteItemProps } from './features/palette-item/public';
@@ -361,14 +370,6 @@ export type { FilterBarProps } from './patterns/filter-bar';
 export { FilterBar } from './patterns/filter-bar';
 export type { InspectorFieldProps } from './patterns/inspector-field';
 export { InspectorField } from './patterns/inspector-field';
-export type {
-  ListChildrenProps,
-  ListItemsProps,
-  ListProps,
-  ListRowProps,
-  ListRowVariant,
-} from './patterns/list';
-export { List, ListRow, ListSection } from './patterns/list';
 export type {
   MessageBubbleAuthor,
   MessageBubbleAvatar,

package/src/metadata/bindableComponentMeta.ts

@@ -356,7 +356,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
     category: 'pattern',
     description: 'Renders a collection of list items.',
     directManifestNode: true,
-    allowedChildren: ['ListSection', 'ListRow'],
+    allowedChildren: ['ListSection', 'ListItem'],
     bindings: {
       props: {
         items: {

package/src/metadata/componentMeta.test.ts

@@ -63,7 +63,7 @@ describe('ZORA_COMPONENT_META event metadata', () => {
   });
 
   test('declares collection item metadata for list rows', () => {
-    const event = ZORA_COMPONENT_META.ListRow.events?.itemPress;
+    const event = ZORA_COMPONENT_META.ListItem.events?.itemPress;
     const eventType: ZoraComponentEventPayloadKind = event?.eventType ?? 'collection.itemPress';
 
     expect(eventType).toBe('collection.itemPress');
@@ -101,8 +101,8 @@ describe('ZORA_COMPONENT_META requirement metadata', () => {
 
 describe('ZORA_COMPONENT_META invariants', () => {
   test('keeps form nodes in their canonical hierarchy', () => {
-    expect(ZORA_COMPONENT_META.Form.allowedChildren).toEqual(['FormError', 'FormField']);
-    expect(ZORA_COMPONENT_META.FormField.allowedChildren).toEqual([
+    expect(ZORA_COMPONENT_META.Form.allowedChildren).toEqual(['FormError', 'Field']);
+    expect(ZORA_COMPONENT_META.Field.allowedChildren).toEqual([
       'Checkbox',
       'CheckboxGroup',
       'RadioGroup',
@@ -113,7 +113,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
     for (const [name, meta] of Object.entries(ZORA_COMPONENT_META)) {
       if (name === 'Form') continue;
       expect(meta.allowedChildren).not.toContain('FormError');
-      expect(meta.allowedChildren).not.toContain('FormField');
+      expect(meta.allowedChildren).not.toContain('Field');
     }
   });
 
@@ -204,7 +204,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'SectionList',
       'BottomSheet',
       'KeyboardAvoidingView',
-      'FormField',
+      'Field',
       'ButtonGroup',
       'Screen',
       'ScreenSection',

package/src/metadata/componentMeta.ts

@@ -29,9 +29,9 @@ import { datePickerMeta } from '../features/date-picker/datePickerMeta';
 import { dialogMeta } from '../features/dialog/dialogMeta';
 import { emptyStateMeta } from '../features/empty-state/emptyStateMeta';
 import { checkboxGroupMeta, checkboxMeta } from '../features/form/checkbox/checkboxMeta';
+import { fieldMeta } from '../features/form/field/meta';
 import { formActionsMeta } from '../features/form/formActionsMeta';
 import { formErrorMeta } from '../features/form/formErrorMeta';
-import { formFieldMeta } from '../features/form/formFieldMeta';
 import { formMeta } from '../features/form/formMeta';
 import { radioGroupMeta, radioMeta } from '../features/form/radio/radioMeta';
 import { searchInputMeta } from '../features/form/search-input/searchInputMeta';
@@ -50,6 +50,7 @@ import { screenSectionMeta } from '../features/layout/screenSectionMeta';
 import { scrollViewMeta } from '../features/layout/scrollViewMeta';
 import { viewMeta } from '../features/layout/viewMeta';
 import { flatListMeta } from '../features/list/flatListMeta';
+import { listItemMeta, listMeta, listSectionMeta } from '../features/list/meta';
 import { sectionListMeta } from '../features/list/sectionListMeta';
 import { missingElementMeta } from '../features/missing-element/missingElementMeta';
 import { paginationMeta } from '../features/pagination/paginationMeta';
@@ -80,7 +81,6 @@ import { collectionEditorMeta } from '../patterns/collection-editor/meta';
 import { confirmDialogMeta } from '../patterns/confirm-dialog/meta';
 import { filterBarMeta } from '../patterns/filter-bar/meta';
 import { inspectorFieldMeta } from '../patterns/inspector-field/meta';
-import { listMeta, listRowMeta, listSectionMeta } from '../patterns/list/meta';
 import { messageBubbleMeta } from '../patterns/message-bubble/meta';
 import { noticeMeta } from '../patterns/notice/meta';
 import { panelMeta } from '../patterns/panel/meta';
@@ -127,7 +127,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   Form: formMeta,
   FormActions: formActionsMeta,
   FormError: formErrorMeta,
-  FormField: formFieldMeta,
+  Field: fieldMeta,
   Gradient: gradientMeta,
   Heading: headingMeta,
   Icon: iconMeta,
@@ -182,7 +182,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   Hero: heroMeta,
   InspectorField: inspectorFieldMeta,
   List: listMeta,
-  ListRow: listRowMeta,
+  ListItem: listItemMeta,
   ListSection: listSectionMeta,
   MessageBubble: messageBubbleMeta,
   MissingElement: missingElementMeta,

package/src/patterns/chat-list-item/ChatListItem.tsx

@@ -1,4 +1,4 @@
-import { ButtonBase } from '@ankhorage/surface';
+import { Pressable } from '@ankhorage/surface';
 import React from 'react';
 
 import { Avatar } from '../../features/avatar/public';
@@ -199,7 +199,7 @@ function ChatListItemInner({
   }
 
   return (
-    <ButtonBase
+    <Pressable
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="button"
       accessibilityState={{ disabled, selected }}
@@ -215,7 +215,7 @@ function ChatListItemInner({
           hovered: state.hovered,
         })
       }
-    </ButtonBase>
+    </Pressable>
   );
 }
 

package/src/patterns/inspector-field/InspectorField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { FormField } from '../../features/form/public';
+import { Field } from '../../features/form/public';
 import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { InspectorFieldProps } from './types';
@@ -15,12 +15,12 @@ function InspectorFieldInner({
   ...props
 }: InspectorFieldProps) {
   return (
-    <FormField {...props} label={label}>
+    <Field {...props} label={label}>
       <View direction="row" gap="s" align="center">
         <View flex={1}>{children}</View>
         {control ? <View>{control}</View> : null}
       </View>
-    </FormField>
+    </Field>
   );
 }
 

package/src/patterns/message-bubble/MessageBubble.tsx

@@ -1,4 +1,4 @@
-import { ButtonBase } from '@ankhorage/surface';
+import { Pressable } from '@ankhorage/surface';
 import React from 'react';
 
 import { Avatar } from '../../features/avatar/public';
@@ -221,7 +221,7 @@ function MessageBubbleInner({
   };
 
   const bubbleContent = isInteractive ? (
-    <ButtonBase
+    <Pressable
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="button"
       accessibilityState={{ disabled, selected }}
@@ -232,7 +232,7 @@ function MessageBubbleInner({
       testID={testID}
     >
       {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}
-    </ButtonBase>
+    </Pressable>
   ) : (
     <View testID={testID}>{renderBubble({ pressed: false, hovered: false })}</View>
   );

package/src/patterns/selection/SelectableItem.tsx

@@ -1,4 +1,4 @@
-import { ButtonBase } from '@ankhorage/surface';
+import { Pressable } from '@ankhorage/surface';
 import React from 'react';
 import type { GestureResponderEvent } from 'react-native';
 
@@ -63,7 +63,7 @@ export function SelectableItem({
   }, [clear, id, resolvedDisabled, select, selected, selection.mode, toggle]);
 
   // IMPORTANT:
-  // Do not pass `children` directly into ButtonBase. ButtonBase also supports function children,
+  // Do not pass `children` directly into Pressable. Pressable also supports function children,
   // but its function signature receives interaction state, not SelectableItemState.
   const content = isRenderProp(children) ? children(itemState) : children;
 
@@ -96,7 +96,7 @@ export function SelectableItem({
   };
 
   return (
-    <ButtonBase
+    <Pressable
       interactionPolicy={interactionPolicy}
       accessibilityRole="button"
       accessibilityState={{ disabled: resolvedDisabled, selected }}
@@ -105,6 +105,6 @@ export function SelectableItem({
       onPress={resolvedTrigger === 'press' ? handlePress : undefined}
     >
       {content}
-    </ButtonBase>
+    </Pressable>
   );
 }

package/src/patterns/switch-field/SwitchField.tsx

@@ -1,8 +1,8 @@
 import { Switch } from '@ankhorage/surface';
 import React from 'react';
 
+import { ListItem } from '../../features/list/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { ListRow } from '../list';
 import type { SwitchFieldProps } from './types';
 
 function SwitchFieldInner({
@@ -17,11 +17,7 @@ function SwitchFieldInner({
   interactionPolicy,
 }: SwitchFieldProps) {
   return (
-    <ListRow
-      title={label}
-      description={description}
-      disabled={disabled}
-      testID={testID}
+    <ListItem
       action={
         <Switch
           checked={value}
@@ -30,13 +26,17 @@ function SwitchFieldInner({
           onCheckedChange={onValueChange}
         />
       }
+      description={description}
+      disabled={disabled}
+      testID={testID}
+      title={label}
+      variant="card"
     />
   );
 }
 
 /***
- * Labeled switch field pattern built on `ListRow`.
+ * Labeled switch field pattern built on the card-style `ListItem` presentation.
  *
- 
  */
 export const SwitchField = withZoraThemeScope(SwitchFieldInner);

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

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { IconButton } from '../../features/button/public';
 import { View } from '../../features/layout/public';
+import { ListItem } from '../../features/list/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import { ListRow } from '../list';
 import type { TreeItemNode, TreeItemRenderProps } from './types';
 
 interface TreeItemProps<TId extends string = string> extends ZoraBaseProps {
@@ -46,7 +46,7 @@ function TreeItemInner<TId extends string = string>({
     }
 
     return (
-      <ListRow
+      <ListItem
         title={node.label}
         action={
           <View direction="row" gap="xs" align="center">

package/src/platformAcceptance.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from 'bun:test';
 
-test('passes the isolated Surface 6 and RN Web 0.21 acceptance suite', () => {
+test('passes the isolated Surface and RN Web 0.21 acceptance suite', () => {
   const subprocess = Bun.spawnSync({
     cmd: [process.execPath, 'test', 'test-fixtures/platformAcceptance.test.tsx'],
     stderr: 'pipe',

package/src/registry.ts

@@ -33,7 +33,7 @@ import { DatePicker } from './features/date-picker/public';
 import { Dialog } from './features/dialog/public';
 import { EmptyState } from './features/empty-state/public';
 import { Checkbox, CheckboxGroup } from './features/form/checkbox/public';
-import { Form, FormActions, FormError, FormField } from './features/form/public';
+import { Field, Form, FormActions, FormError } from './features/form/public';
 import { Radio, RadioGroup } from './features/form/radio/public';
 import { SearchInput } from './features/form/search-input/public';
 import { Select } from './features/form/select/public';
@@ -53,6 +53,7 @@ import {
   View,
 } from './features/layout/public';
 import { FlatList, SectionList } from './features/list/public';
+import { List, ListItem, ListSection } from './features/list/public';
 import { MissingElement } from './features/missing-element/public';
 import { Pagination } from './features/pagination/public';
 import { PaletteItem } from './features/palette-item/public';
@@ -73,7 +74,6 @@ import { CollectionEditor } from './patterns/collection-editor';
 import { ConfirmDialog } from './patterns/confirm-dialog';
 import { FilterBar } from './patterns/filter-bar';
 import { InspectorField } from './patterns/inspector-field';
-import { List, ListRow, ListSection } from './patterns/list';
 import { MessageBubble } from './patterns/message-bubble';
 import { Notice } from './patterns/notice';
 import { Panel } from './patterns/panel';
@@ -134,7 +134,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   Form,
   FormActions,
   FormError,
-  FormField,
+  Field,
   Gradient,
   Heading,
   Icon,
@@ -193,7 +193,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   Hero,
   InspectorField,
   List,
-  ListRow,
+  ListItem,
   ListSection,
   MessageBubble,
   MissingElement,

package/src/showcaseCoverage.test.ts

@@ -34,7 +34,7 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'Form',
     'FormActions',
     'FormError',
-    'FormField',
+    'Field',
     'Heading',
     'Icon',
     'IconButton',
@@ -74,7 +74,7 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'SelectionProvider',
     'useSelection',
     'List',
-    'ListRow',
+    'ListItem',
     'ListSection',
     'InspectorField',
     'Notice',