@ankhorage/zora 16.0.0 → 17.0.0

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>
   );
 }

package/src/features/toolbar/adapters/inbound/Toolbar.tsx

@@ -1,7 +1,7 @@
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ToolbarProps } from '../../../../types/toolbar';
 import { Card } from '../../../card/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Renders a visible horizontal group of contextual actions and controls. */
 export const Toolbar = withZoraThemeScope(ToolbarInner);
@@ -23,9 +23,9 @@ function ToolbarInner({
       tone={floating ? 'default' : 'subtle'}
       testID={testID}
     >
-      <Stack align="center" direction="row" gap="s">
+      <View align="center" direction="row" gap="s">
         {children}
-      </Stack>
+      </View>
     </Card>
   );
 }

package/src/features/uploader/adapters/inbound/Uploader.tsx

@@ -7,7 +7,7 @@ import { Dialog } from '../../../dialog/public';
 import { FormField } from '../../../form/public';
 import { Icon } from '../../../icon/public';
 import { Image } from '../../../image/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Progress } from '../../../progress/public';
 import { Text } from '../../../typography/public';
 import { validateUploadAsset } from '../../application/use-cases/validateUploadAsset';
@@ -218,11 +218,11 @@ function UploaderInner({
         required={required}
         testID={testID}
       >
-        <Stack gap="m">
+        <View gap="m">
           <UploadPresentation asset={value} aspectRatio={aspectRatio} type={type} />
 
           {resolvedAccept || maxSizeBytes ? (
-            <Stack gap="xs">
+            <View gap="xs">
               {resolvedAccept ? (
                 <Text emphasis="muted" variant="caption">
                   Accepted: {resolvedAccept}
@@ -233,21 +233,21 @@ function UploaderInner({
                   Max size: {formatBytes(maxSizeBytes)}
                 </Text>
               ) : null}
-            </Stack>
+            </View>
           ) : null}
 
           {uploading ? (
-            <Stack gap="xs">
+            <View gap="xs">
               <Text emphasis="muted" variant="caption">
                 Uploading…
               </Text>
               {uploadProgress !== undefined || progress !== null ? (
                 <Progress max={1} value={clampProgress(uploadProgress ?? progress) ?? 0} />
               ) : null}
-            </Stack>
+            </View>
           ) : null}
 
-          <Stack direction={{ base: 'column', md: 'row' }} gap="s">
+          <View direction={{ base: 'column', md: 'row' }} gap="s">
             <Button
               disabled={actionsDisabled || uploading || removing}
               interactionPolicy={interactionPolicy}
@@ -283,8 +283,8 @@ function UploaderInner({
                 Preview
               </Button>
             ) : null}
-          </Stack>
-        </Stack>
+          </View>
+        </View>
       </FormField>
 
       {canPreviewImage ? (
@@ -295,9 +295,9 @@ function UploaderInner({
           title="Image preview"
           visible={previewOpen}
         >
-          <Stack gap="m">
+          <View gap="m">
             <Image aspectRatio={aspectRatio} fit="contain" source={value} />
-            <Stack direction="row" justify="flex-end">
+            <View direction="row" justify="flex-end">
               <Button
                 color="neutral"
                 interactionPolicy={interactionPolicy}
@@ -306,8 +306,8 @@ function UploaderInner({
               >
                 Close
               </Button>
-            </Stack>
-          </Stack>
+            </View>
+          </View>
         </Dialog>
       ) : null}
     </>
@@ -329,10 +329,10 @@ function UploadPresentation({
   }
 
   return (
-    <Box borderWidth={1} p="m" radius="m">
-      <Stack direction="row" gap="s">
+    <View borderWidth={1} p="m" radius="m">
+      <View direction="row" gap="s">
         <Icon name={resolveUploadIcon(type)} size={22} />
-        <Stack gap="xs">
+        <View gap="xs">
           <Text variant="label" weight="semiBold">
             {asset?.fileName ?? 'No file selected'}
           </Text>
@@ -341,9 +341,9 @@ function UploadPresentation({
               {asset.contentType}
             </Text>
           ) : null}
-        </Stack>
-      </Stack>
-    </Box>
+        </View>
+      </View>
+    </View>
   );
 }
 

package/src/index.ts

@@ -88,6 +88,16 @@ export type { ChipProps } from './features/chip/public';
 export type { ChipGroupItem, ChipGroupProps } from './features/chip/public';
 export { Chip } from './features/chip/public';
 export { ChipGroup } from './features/chip/public';
+export type {
+  ContentRailControlPressEvent,
+  ContentRailDirection,
+  ContentRailItemSize,
+  ContentRailMotion,
+  ContentRailProps,
+  ContentRailSpacing,
+  ContentRailVisibleRangeChangeEvent,
+} from './features/content-rail/public';
+export { ContentRail } from './features/content-rail/public';
 export type {
   DataTableCellContext,
   DataTableColumn,
@@ -186,23 +196,23 @@ export {
   type KeyboardAvoidingViewProps,
 } from './features/keyboard-avoiding-view/public';
 export type {
-  BoxProps,
-  ContainerProps,
+  AppShellProps,
   DividerProps,
   GridProps,
-  StackProps,
+  ScreenProps,
+  ScreenSectionProps,
+  ScrollViewProps,
+  ViewProps,
 } from './features/layout/public';
-export type {
-  ContentRailControlPressEvent,
-  ContentRailDirection,
-  ContentRailItemSize,
-  ContentRailMotion,
-  ContentRailProps,
-  ContentRailSpacing,
-  ContentRailVisibleRangeChangeEvent,
+export {
+  AppShell,
+  Divider,
+  Grid,
+  Screen,
+  ScreenSection,
+  ScrollView,
+  View,
 } from './features/layout/public';
-export { Box, Container, Divider, Grid, Stack } from './features/layout/public';
-export { ContentRail } from './features/layout/public';
 export type {
   ManifestListProps,
   ManifestListSection,
@@ -211,6 +221,8 @@ export type {
 export { FlatList, SectionList } 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';
+export { PaletteItem } from './features/palette-item/public';
 export {
   PopoverMenu,
   type PopoverMenuAction,
@@ -291,8 +303,6 @@ export type {
   ValidateUploadAssetInput,
 } from './features/uploader/public';
 export { Uploader, validateUploadAsset } from './features/uploader/public';
-export type { CenterProps, InlineProps, ShowProps, SpacerProps } from './foundation';
-export { Center, Inline, Show, Spacer } from './foundation';
 export type {
   ZoraColor,
   ZoraEmphasis,
@@ -305,18 +315,6 @@ export {
   ZORA_PALETTE_COLORS,
   ZORA_STATUS_COLORS,
 } from './internal/colorModel';
-export type { AppShellProps } from './layout/app-shell';
-export { AppShell } from './layout/app-shell';
-export type { ScreenProps } from './layout/screen';
-export { Screen } from './layout/screen';
-export type { ScreenSectionProps } from './layout/screen-section';
-export { ScreenSection } from './layout/screen-section';
-export type { SettingsLayoutProps } from './layout/settings-layout';
-export { SettingsLayout } from './layout/settings-layout';
-export type { SidebarLayoutProps } from './layout/sidebar-layout';
-export { SidebarLayout } from './layout/sidebar-layout';
-export type { TopbarLayoutProps } from './layout/topbar-layout';
-export { TopbarLayout } from './layout/topbar-layout';
 export type {
   ZoraBindableComponentType,
   ZoraComponentBlueprint,
@@ -416,14 +414,10 @@ export type {
   UseSelectionResult,
 } from './patterns/selection';
 export { SelectableItem, SelectionProvider, useSelection } from './patterns/selection';
-export type { SettingsRowProps } from './patterns/settings-row';
-export { SettingsRow } from './patterns/settings-row';
 export type { SwitchFieldProps } from './patterns/switch-field';
 export { SwitchField } from './patterns/switch-field';
 export type { ThemeComposerProps } from './patterns/theme-composer';
 export { ThemeComposer } from './patterns/theme-composer';
-export type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';
-export { PaletteItem, TileGrid } from './patterns/tile-grid';
 export type { TimelineItem, TimelineProps } from './patterns/timeline';
 export { Timeline } from './patterns/timeline';
 export type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';

package/src/interactionPolicy.test.ts

@@ -195,7 +195,7 @@ describe('ContentRail', () => {
   });
 
   test('suppresses scrolling and forwards interactionPolicy to owned controls', () => {
-    const source = readSource('features/layout/adapters/inbound/ContentRail.tsx');
+    const source = readSource('features/content-rail/adapters/inbound/ContentRail.tsx');
 
     expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
     expect(source).toContain('scrollEnabled={!passive}');

package/src/metadata/allowedChildren.ts

@@ -33,11 +33,10 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'SectionList',
   'BottomSheet',
   'ProductCard',
-  'Box',
-  'Stack',
+  'View',
+  'ScrollView',
   'Grid',
   'Gradient',
-  'Container',
   'Divider',
   'Text',
   'Heading',
@@ -57,7 +56,6 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'Notice',
   'EmptyState',
   'SectionHeader',
-  'SettingsRow',
   'PostCard',
   'ChatListItem',
   'MessageBubble',
@@ -77,8 +75,8 @@ export const CONTENT_RAIL_ALLOWED_CHILDREN = [
   'Badge',
   'Button',
   'IconButton',
-  'Box',
-  'Stack',
+  'View',
+  'ScrollView',
   'Card',
   'Panel',
   'Image',

package/src/metadata/componentMeta.test.ts

@@ -165,7 +165,6 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'MetricCard',
       'Uploader',
       'SectionHeader',
-      'SettingsRow',
       'EmptyState',
       'Hero',
       'Button',
@@ -214,10 +213,9 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Notice',
       'PostCard',
       'MessageBubble',
-      'Box',
-      'Stack',
+      'View',
+      'ScrollView',
       'Grid',
-      'Container',
       'BarcodeScannerView',
       'ContentRail',
       'Tabs',
@@ -386,8 +384,8 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Badge',
       'Button',
       'IconButton',
-      'Box',
-      'Stack',
+      'View',
+      'ScrollView',
       'Card',
       'Panel',
       'Image',

package/src/metadata/componentMeta.ts

@@ -23,6 +23,7 @@ import { postCardMeta } from '../features/card/postCardMeta';
 import { productCardMeta } from '../features/card/productCardMeta';
 import { chipGroupMeta } from '../features/chip/chipGroupMeta';
 import { chipMeta } from '../features/chip/chipMeta';
+import { contentRailMeta } from '../features/content-rail/contentRailMeta';
 import { dataTableMeta } from '../features/data-table/dataTableMeta';
 import { datePickerMeta } from '../features/date-picker/datePickerMeta';
 import { dialogMeta } from '../features/dialog/dialogMeta';
@@ -41,16 +42,18 @@ import { heroMeta } from '../features/hero/heroMeta';
 import { iconMeta } from '../features/icon/iconMeta';
 import { imageMeta } from '../features/image/imageMeta';
 import { keyboardAvoidingViewMeta } from '../features/keyboard-avoiding-view/keyboardAvoidingViewMeta';
-import { boxMeta } from '../features/layout/boxMeta';
-import { containerMeta } from '../features/layout/containerMeta';
-import { contentRailMeta } from '../features/layout/contentRailMeta';
+import { appShellMeta } from '../features/layout/appShellMeta';
 import { dividerMeta } from '../features/layout/dividerMeta';
 import { gridMeta } from '../features/layout/gridMeta';
-import { stackMeta } from '../features/layout/stackMeta';
+import { screenMeta } from '../features/layout/screenMeta';
+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 { sectionListMeta } from '../features/list/sectionListMeta';
 import { missingElementMeta } from '../features/missing-element/missingElementMeta';
 import { paginationMeta } from '../features/pagination/paginationMeta';
+import { paletteItemMeta } from '../features/palette-item/paletteItemMeta';
 import { popoverMenuMeta } from '../features/popover-menu/popoverMenuMeta';
 import { progressMeta, progressRingMeta } from '../features/progress/progressMeta';
 import { ratingMeta } from '../features/rating/ratingMeta';
@@ -72,13 +75,6 @@ import { toolbarMeta } from '../features/toolbar/toolbarMeta';
 import { headingMeta } from '../features/typography/headingMeta';
 import { textMeta } from '../features/typography/textMeta';
 import { uploaderMeta } from '../features/uploader/uploaderMeta';
-import { foundationMetas } from '../foundation/meta';
-import { appShellMeta } from '../layout/app-shell/meta';
-import { screenMeta } from '../layout/screen/meta';
-import { screenSectionMeta } from '../layout/screen-section/meta';
-import { settingsLayoutMeta } from '../layout/settings-layout/meta';
-import { sidebarLayoutMeta } from '../layout/sidebar-layout/meta';
-import { topbarLayoutMeta } from '../layout/topbar-layout/meta';
 import { chatListItemMeta } from '../patterns/chat-list-item/meta';
 import { collectionEditorMeta } from '../patterns/collection-editor/meta';
 import { confirmDialogMeta } from '../patterns/confirm-dialog/meta';
@@ -96,10 +92,8 @@ import {
 } from '../patterns/scanner/meta';
 import { sectionHeaderMeta } from '../patterns/section-header/meta';
 import { selectableItemMeta, selectionProviderMeta } from '../patterns/selection/meta';
-import { settingsRowMeta } from '../patterns/settings-row/meta';
 import { switchFieldMeta } from '../patterns/switch-field/meta';
 import { themeComposerMeta } from '../patterns/theme-composer/meta';
-import { paletteItemMeta, tileGridMeta } from '../patterns/tile-grid/meta';
 import { timelineMeta } from '../patterns/timeline/meta';
 import { treeItemMeta, treeViewMeta } from '../patterns/tree-view/meta';
 import { themeModeToggleMeta } from '../theme/ThemeModeToggle.meta';
@@ -107,13 +101,11 @@ import { finalizeFeatureMetadata } from '../utils/finalizeFeatureMetadata';
 import type { ZoraComponentMetaRegistry } from './types';
 
 export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMetadata({
-  ...foundationMetas,
   Accordion: accordionMeta,
   AccordionItem: accordionItemMeta,
   ActivityIndicator: activityIndicatorMeta,
-  Box: boxMeta,
-  Container: containerMeta,
-  Stack: stackMeta,
+  View: viewMeta,
+  ScrollView: scrollViewMeta,
   Grid: gridMeta,
   Divider: dividerMeta,
   Surface: surfaceMeta,
@@ -175,9 +167,6 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   AppShell: appShellMeta,
   Screen: screenMeta,
   ScreenSection: screenSectionMeta,
-  SettingsLayout: settingsLayoutMeta,
-  SidebarLayout: sidebarLayoutMeta,
-  TopbarLayout: topbarLayoutMeta,
   ForgotPasswordForm: forgotPasswordFormMeta,
   OAuthProviderButton: oauthProviderButtonMeta,
   OAuthProviderList: oauthProviderListMeta,
@@ -208,11 +197,9 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   SectionHeader: sectionHeaderMeta,
   SelectableItem: selectableItemMeta,
   SelectionProvider: selectionProviderMeta,
-  SettingsRow: settingsRowMeta,
   SwitchField: switchFieldMeta,
   ThemeComposer: themeComposerMeta,
   PaletteItem: paletteItemMeta,
-  TileGrid: tileGridMeta,
   Timeline: timelineMeta,
   TreeItem: treeItemMeta,
   TreeView: treeViewMeta,

package/src/metadata/radioGroupReachability.test.ts

@@ -5,8 +5,8 @@ import { ZORA_COMPONENT_META } from '.';
 const containers = [
   ['Screen', ZORA_COMPONENT_META.Screen],
   ['ScreenSection', ZORA_COMPONENT_META.ScreenSection],
-  ['Box', ZORA_COMPONENT_META.Box],
-  ['Stack', ZORA_COMPONENT_META.Stack],
+  ['View', ZORA_COMPONENT_META.View],
+  ['ScrollView', ZORA_COMPONENT_META.ScrollView],
   ['Card', ZORA_COMPONENT_META.Card],
   ['Panel', ZORA_COMPONENT_META.Panel],
 ] as const;

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

@@ -3,9 +3,8 @@ import React from 'react';
 
 import { Avatar } from '../../features/avatar/public';
 import { Badge } from '../../features/badge/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
-import { Inline } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ChatListAvatar, ChatListItemProps } from './types';
@@ -110,7 +109,7 @@ function ChatListItemInner({
     });
 
     return (
-      <Box
+      <View
         bg={styles.bg}
         borderColor={styles.borderColor}
         borderWidth={styles.borderWidth}
@@ -119,7 +118,7 @@ function ChatListItemInner({
         radius="m"
         style={{ opacity: styles.opacity }}
       >
-        <Inline align="center" gap="m" wrap="nowrap">
+        <View direction="row" align="center" gap="m" wrap="nowrap">
           {leading ?? (
             <Avatar
               initials={avatar?.initials}
@@ -132,10 +131,10 @@ function ChatListItemInner({
             />
           )}
 
-          <Box flex={1}>
-            <Stack gap="xxs">
-              <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
-                <Box flex={1}>
+          <View flex={1}>
+            <View gap="xxs">
+              <View direction="row" align="center" gap="s" justify="space-between" wrap="nowrap">
+                <View flex={1}>
                   <Text
                     numberOfLines={1}
                     emphasis={disabled ? 'muted' : 'default'}
@@ -144,7 +143,7 @@ function ChatListItemInner({
                   >
                     {title}
                   </Text>
-                </Box>
+                </View>
                 {hasTimestamp ? (
                   <Text
                     numberOfLines={1}
@@ -156,12 +155,12 @@ function ChatListItemInner({
                     {timestamp}
                   </Text>
                 ) : null}
-              </Inline>
+              </View>
 
               {hasSecondaryRow ? (
-                <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
-                  <Box flex={1}>
-                    <Stack gap="xxs">
+                <View direction="row" align="center" gap="s" justify="space-between" wrap="nowrap">
+                  <View flex={1}>
+                    <View gap="xxs">
                       {hasPreview ? (
                         <Text
                           numberOfLines={1}
@@ -177,26 +176,26 @@ function ChatListItemInner({
                           {meta}
                         </Text>
                       ) : null}
-                    </Stack>
-                  </Box>
+                    </View>
+                  </View>
 
                   {hasUnreadCount || hasTrailing ? (
-                    <Inline align="center" gap="s" wrap="nowrap">
+                    <View direction="row" align="center" gap="s" wrap="nowrap">
                       {renderUnreadCount(unreadCount)}
                       {trailing}
-                    </Inline>
+                    </View>
                   ) : null}
-                </Inline>
+                </View>
               ) : null}
-            </Stack>
-          </Box>
-        </Inline>
-      </Box>
+            </View>
+          </View>
+        </View>
+      </View>
     );
   };
 
   if (!isInteractive) {
-    return <Box testID={testID}>{content({ pressed: false, hovered: false })}</Box>;
+    return <View testID={testID}>{content({ pressed: false, hovered: false })}</View>;
   }
 
   return (