@ankhorage/zora 6.0.0 → 8.0.0

package/src/components/form/FormField.tsx

@@ -1,10 +1,10 @@
 import { Field } from '@ankhorage/surface';
 import React from 'react';
 
-import { Stack } from '../../foundation';
+import { Stack } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Input } from '../input';
-import { Text } from '../text';
 import type { FormFieldConfig, FormFieldControlProps, FormFieldProps } from './types';
 import { hasRequiredRule } from './validation';
 

package/src/components/gradient/Gradient.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 { useGradientRenderer } from './GradientRendererContext';
 import type { GradientProps } from './types';

package/src/components/gradient/types.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import type { BoxProps } from '../../foundation';
+import type { BoxProps } from '../../features/layout/public';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type GradientColor = string;

package/src/components/input/Input.tsx

@@ -1,10 +1,10 @@
 import * as Surface from '@ankhorage/surface';
 import React from 'react';
 
+import { IconButton } from '../../features/button/public';
 import { resolveIconSize } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { IconButton } from '../icon-button';
 import type { InputProps } from './types';
 
 function InputInner({

package/src/components/menu/Menu.tsx

@@ -1,11 +1,11 @@
 import { Menu as SurfaceMenu, type MenuAction as SurfaceMenuAction } from '@ankhorage/surface';
 import React, { useMemo } from 'react';
 
-import { Box } from '../../foundation';
+import { Icon } from '../../features/icon/public';
+import { Box } from '../../features/layout/public';
 import { resolveIconSize } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Icon } from '../icon';
 import type { MenuAction, MenuProps } from './types';
 
 function renderActionLeading(action: MenuAction, iconColor: string) {

package/src/components/modal/Modal.tsx

@@ -1,11 +1,11 @@
 import { Modal as SurfaceModal } from '@ankhorage/surface';
 import React, { useCallback, useEffect, useRef } from 'react';
 
-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 { resolveDialogWidth } from '../../internal/recipes';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Heading } from '../heading';
-import { Text } from '../text';
 import type { ModalProps } from './types';
 
 function useStableCallback(callback: (() => void) | undefined): (() => void) | undefined {

package/src/components/pagination/Pagination.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Stack } from '../../foundation';
+import { Button } from '../../features/button/public';
+import { Stack } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Button } from '../button';
-import { Text } from '../text';
 import type { PaginationProps } from './types';
 
 type PaginationItem = number | 'ellipsis';

package/src/components/progress/Progress.tsx

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

package/src/components/progress/ProgressRing.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Stack } from '../../foundation';
+import { Stack } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Text } from '../text';
 import { resolveProgressFraction } from './resolveProgressFraction';
 import { resolveProgressRingGeometry } from './resolveProgressRingGeometry';
 import { type ProgressRingProps, resolveProgressRole } from './types';

package/src/components/radio/RadioGroup.tsx

@@ -2,10 +2,10 @@ import { Radio } from '@ankhorage/surface';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Stack } from '../../foundation';
+import { Stack } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Text } from '../text';
 import { RadioOptionControl } from './RadioOptionControl';
 import { resolveRadioGroupThemeRecipe } from './resolveRadioGroupThemeRecipe';
 import type { RadioGroupProps } from './types';

package/src/components/radio/RadioOptionControl.tsx

@@ -2,8 +2,8 @@ import { useTheme } from '@ankhorage/surface';
 import React from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 
-import { Icon } from '../icon';
-import { Text } from '../text';
+import { Icon } from '../../features/icon/public';
+import { Text } from '../../features/typography/public';
 import {
   handleRadioOptionKeyDown,
   type RadioOptionKeyboardTarget,

package/src/components/radio/types.ts

@@ -1,8 +1,8 @@
 import type { RadioProps as SurfaceRadioProps } from '@ankhorage/surface';
 import type React from 'react';
 
+import type { IconProps } from '../../features/icon/public';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { IconProps } from '../icon';
 
 export interface RadioProps extends ZoraBaseProps, Omit<SurfaceRadioProps, 'mode' | 'themeId'> {}
 

package/src/components/rating/Rating.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+import { Icon } from '../../features/icon/public';
 import { Inline } from '../../foundation';
 import { resolveIconSize } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Icon } from '../icon';
 import { resolveRatingSegments } from './resolveRatingSegments';
 import { type RatingProps, resolveRatingRole } from './types';
 

package/src/components/select/Select.tsx

@@ -2,7 +2,7 @@ import { Picker } from '@react-native-picker/picker';
 import React from 'react';
 import { View } from 'react-native';
 
-import { Box } from '../../foundation';
+import { Box } from '../../features/layout/public';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SelectProps } from './types';

package/src/components/skeleton/Skeleton.tsx

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

package/src/components/skeleton/SkeletonCard.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Stack } from '../../foundation';
+import { ButtonGroup } from '../../features/button/public';
+import { Card } from '../../features/card/public';
+import { Stack } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { ButtonGroup } from '../button-group';
-import { Card } from '../card';
 import { Skeleton } from './Skeleton';
 import { SkeletonText } from './SkeletonText';
 import type { SkeletonCardProps } from './types';

package/src/components/skeleton/SkeletonText.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 { Skeleton } from './Skeleton';
 import type { SkeletonTextProps } from './types';

package/src/components/skeleton/types.ts

@@ -1,4 +1,4 @@
-import type { BoxProps, StackProps } from '../../foundation';
+import type { BoxProps, StackProps } from '../../features/layout/public';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type SkeletonRadius = BoxProps['radius'];

package/src/components/tabs/Tabs.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { Box, Stack } from '../../foundation';
+import { Button } from '../../features/button/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 { Button } from '../button';
-import { Text } from '../text';
 import type { TabItem, TabsProps } from './types';
 
 function TabsInner<TValue extends string = string>({

package/src/components/time-picker/TimePicker.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 
 import { useBottomSheet } from '../../features/bottom-sheet/public';
-import { Stack } from '../../foundation';
+import { Button } from '../../features/button/public';
+import { Stack } from '../../features/layout/public';
+import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Button } from '../button';
-import { Text } from '../text';
 import type { TimePickerProps } from './types';
 
 const MINUTES_PER_DAY = 24 * 60;

package/src/components/toolbar/Toolbar.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Stack } from '../../foundation';
+import { Card } from '../../features/card/public';
+import { Stack } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Card } from '../card';
 import type { ToolbarProps } from './types';
 
 function ToolbarInner({

package/src/components/toolbar/ToolbarAction.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import { IconButton } from '../../features/button/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { IconButton } from '../icon-button';
 import type { ToolbarActionProps } from './types';
 
 function ToolbarActionInner({

package/src/constants.ts

@@ -0,0 +1,23 @@
+export const COMPONENT_THEME_AUTHORING = {
+  authority: 'theme',
+  scope: 'component',
+  allowInstanceOverride: true,
+} as const;
+
+export const FEATURE_MANIFEST_ELEMENTS = {
+  surface: ['Surface'],
+  avatar: ['Avatar', 'AvatarGroup'],
+  badge: ['Badge'],
+  card: ['Card', 'MediaCard', 'MetricCard', 'PostCard', 'ProductCard'],
+  chip: ['Chip', 'ChipGroup'],
+  'data-table': ['DataTable'],
+  button: ['Button', 'IconButton', 'ButtonGroup'],
+  icon: ['Icon'],
+  image: ['Image'],
+  layout: ['Box', 'Container', 'ContentRail', 'Divider', 'Grid', 'Stack'],
+  list: ['FlatList', 'SectionList'],
+  'splash-screen': ['SplashScreen'],
+  typography: ['Heading', 'Text'],
+  uploader: ['Uploader'],
+  'bottom-sheet': ['BottomSheet'],
+} as const;

package/src/corePluginMetadata.ts

@@ -37,7 +37,16 @@ function mergeBindableMeta(
     Object.entries(componentMeta).map(([componentName, meta]) => [
       componentName,
       bindingsByComponent.get(componentName)
-        ? { ...meta, bindings: bindingsByComponent.get(componentName) }
+        ? {
+            ...meta,
+            bindings: {
+              props: { ...bindingsByComponent.get(componentName)?.props, ...meta.bindings?.props },
+              events: {
+                ...bindingsByComponent.get(componentName)?.events,
+                ...meta.bindings?.events,
+              },
+            },
+          }
         : meta,
     ]),
   );

package/src/featureManifest.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from 'bun:test';
+
+import { FEATURE_MANIFEST_ELEMENTS } from './constants';
+import { ZORA_CORE_PLUGIN_METADATA } from './corePluginMetadata';
+import { ZORA_COMPONENT_META } from './metadata/componentMeta';
+
+test('every selected feature element is directly authorable through its canonical public facade', async () => {
+  const catalog = new Map(Object.entries(ZORA_COMPONENT_META));
+  for (const [family, names] of Object.entries(FEATURE_MANIFEST_ELEMENTS)) {
+    const source = await Bun.file(`src/features/${family}/public.ts`).text();
+    for (const name of names) {
+      const meta = catalog.get(name);
+      expect(meta?.directManifestNode, name).toBe(true);
+      expect(Object.keys(meta?.props ?? {}).length, name).toBeGreaterThan(0);
+      expect(source, name).toContain(name);
+    }
+  }
+});
+
+test('interactive authoring retains state and event payload bindings after plugin composition', () => {
+  const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
+  expect(meta.DataTable?.bindings?.props?.sort?.value.type).toBe('object');
+  expect(meta.DataTable?.bindings?.props?.rows?.value.type).toBe('array');
+  expect(meta.Uploader?.bindings?.props?.value?.value.type).toBe('object');
+  expect(meta.Uploader?.bindings?.events?.uploadRequest?.payload?.fields).toContainEqual({
+    path: 'asset',
+    type: 'object',
+  });
+  expect(meta.BottomSheet?.bindings?.props?.open?.value.type).toBe('boolean');
+  expect(meta.Heading?.bindings?.props?.level?.value.type).toBe('number');
+  expect(meta.Image?.bindings?.props?.radius?.value.type).toBe('unknown');
+});
+
+test('authoring schemas omit layout and avatar options ignored by the underlying components', () => {
+  const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
+  expect(meta.Divider?.props).not.toHaveProperty('width');
+  expect(meta.Container?.props).not.toHaveProperty('width');
+  expect(meta.AvatarGroup?.props.items?.itemSchema?.map(({ key }) => key)).not.toContain('size');
+  expect(meta.AvatarGroup?.props.items?.itemSchema?.map(({ key }) => key)).not.toContain('shape');
+});
+
+test('ContentRail accepts chips and all card elements and offers intrinsic-width scrolling', () => {
+  const rail = ZORA_COMPONENT_META.ContentRail;
+  for (const child of ['ChipGroup', ...FEATURE_MANIFEST_ELEMENTS.card])
+    expect(rail.allowedChildren).toContain(child);
+  expect(rail.props.itemSize?.enum).toContain('content');
+  expect(rail.props).not.toHaveProperty('stickyHeaderIndices');
+});

package/src/features/avatar/adapters/inbound/Avatar.tsx

@@ -0,0 +1,147 @@
+import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
+import React from 'react';
+import { Image } from 'react-native';
+
+import type { ZoraColor } from '../../../../internal/recipes';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { AvatarProps, AvatarShape, AvatarSize } from '../../../../types/avatar';
+import { Icon } from '../../../icon/public';
+import { Box } from '../../../layout/public';
+import { Text, type TextVariant } from '../../../typography/public';
+import { resolveAvatarInitials } from '../../utils/resolveAvatarInitials';
+/***
+ * Displays a user or entity avatar with image support and initials fallback.
+ */
+export const Avatar = withZoraThemeScope(AvatarInner);
+
+function resolveAvatarSize(size: AvatarSize): number {
+  switch (size) {
+    case 'xs':
+      return 24;
+    case 's':
+      return 32;
+    case 'l':
+      return 48;
+    case 'xl':
+      return 64;
+    case 'm':
+    default:
+      return 40;
+  }
+}
+
+function resolveRoleSemantics(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {
+  switch (color) {
+    case 'secondary':
+      return theme.semantics.secondary;
+    case 'tertiary':
+      return theme.semantics.accent;
+    case 'quaternary':
+      return theme.semantics.highlight;
+    case 'primary':
+      return theme.semantics.action.primary;
+    case 'error':
+      return theme.semantics.error;
+    case 'info':
+      return theme.semantics.info;
+    case 'danger':
+      return theme.semantics.action.danger;
+    case 'success':
+      return theme.semantics.success;
+    case 'warning':
+      return theme.semantics.warning;
+    case 'neutral':
+    default:
+      return theme.semantics.action.neutral;
+  }
+}
+
+function resolveTextColor(color: ZoraColor): ZoraColor | undefined {
+  return color === 'neutral' ? undefined : color;
+}
+
+function resolveTextVariant(size: AvatarSize): TextVariant {
+  switch (size) {
+    case 'xs':
+    case 's':
+      return 'caption';
+    case 'l':
+      return 'bodySmall';
+    case 'xl':
+      return 'lead';
+    case 'm':
+    default:
+      return 'label';
+  }
+}
+
+function resolveRadius(shape: AvatarShape): 'full' | 'l' {
+  return shape === 'circle' ? 'full' : 'l';
+}
+
+function AvatarInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  source,
+  name,
+  initials,
+  iconFallback,
+  label,
+  size = 'm',
+  shape = 'circle',
+  color = 'neutral',
+  interactionPolicy: _interactionPolicy,
+}: AvatarProps) {
+  const { theme } = useZoraTheme();
+  const resolvedSize = resolveAvatarSize(size);
+  const resolvedInitials = initials ?? resolveAvatarInitials(name);
+  const role = resolveRoleSemantics(theme, color);
+  const backgroundColor = color === 'neutral' ? theme.semantics.neutral.surface : role.softBg;
+  const contentColor = color === 'neutral' ? theme.semantics.content.default : role.base;
+  const radius = resolveRadius(shape);
+
+  const renderFallback = () => {
+    if (resolvedInitials) {
+      return (
+        <Text color={resolveTextColor(color)} variant={resolveTextVariant(size)} weight="semiBold">
+          {resolvedInitials}
+        </Text>
+      );
+    }
+
+    if (iconFallback) {
+      const iconSize = Math.max(16, Math.round(resolvedSize * 0.48));
+      return <Icon {...iconFallback} color={contentColor} size={iconSize} />;
+    }
+
+    return null;
+  };
+
+  return (
+    <Box
+      accessibilityLabel={label}
+      bg={backgroundColor}
+      height={resolvedSize}
+      radius={radius}
+      testID={testID}
+      width={resolvedSize}
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      {source ? (
+        <Image
+          accessibilityLabel={label}
+          source={source}
+          style={{ height: '100%', width: '100%' }}
+        />
+      ) : (
+        renderFallback()
+      )}
+    </Box>
+  );
+}

package/src/features/avatar/adapters/inbound/AvatarGroup.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { AvatarGroupItem, AvatarGroupProps } from '../../../../types/avatar-group';
+import { Box, Stack } from '../../../layout/public';
+import { Avatar } from '../../public';
+/***
+ * Renders a compact group of avatars with optional overflow handling.
+ */
+export const AvatarGroup = withZoraThemeScope(AvatarGroupInner);
+
+function defaultOverflowLabel(overflowCount: number): string {
+  return `+${overflowCount}`;
+}
+
+function AvatarGroupInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  testID,
+  items,
+  max = 4,
+  size = 's',
+  shape = 'circle',
+  overflowLabel = defaultOverflowLabel,
+}: AvatarGroupProps) {
+  const { theme } = useZoraTheme();
+
+  const visibleItems = items.slice(0, max);
+  const overflowCount = Math.max(0, items.length - visibleItems.length);
+  const overlap =
+    size === 'xs' ? 8 : size === 's' ? 10 : size === 'm' ? 12 : size === 'l' ? 14 : 16;
+  const borderColor = theme.semantics.surface.default;
+
+  const renderItem = (item: AvatarGroupItem, index: number) => (
+    <Box
+      key={item.id ?? `${index}`}
+      ml={index === 0 ? 0 : -overlap}
+      radius="full"
+      borderWidth={2}
+      borderColor={borderColor}
+    >
+      <Avatar
+        iconFallback={item.iconFallback}
+        initials={item.initials}
+        label={item.label}
+        name={item.name}
+        shape={shape}
+        size={size}
+        source={item.source}
+        color={item.color}
+      />
+    </Box>
+  );
+
+  return (
+    <Stack align="center" direction="row" testID={testID} wrap="nowrap">
+      {visibleItems.map(renderItem)}
+      {overflowCount > 0 ? (
+        <Box
+          ml={visibleItems.length === 0 ? 0 : -overlap}
+          radius="full"
+          borderWidth={2}
+          borderColor={borderColor}
+        >
+          <Avatar
+            initials={overflowLabel(overflowCount)}
+            size={size}
+            shape={shape}
+            color="neutral"
+          />
+        </Box>
+      ) : null}
+    </Stack>
+  );
+}

package/src/features/avatar/avatarGroupMeta.ts

@@ -0,0 +1,25 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+import { avatarMeta } from './avatarMeta';
+
+export const avatarGroupMeta = {
+  name: 'AvatarGroup',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: { label: 'Avatar group', defaultProps: { items: [] } },
+  props: {
+    items: {
+      type: 'array',
+      category: 'Content',
+      itemSchema: [
+        { key: 'id', schema: { type: 'string', category: 'Identity' } },
+        ...Object.entries(avatarMeta.props)
+          .filter(([key]) => key !== 'size' && key !== 'shape')
+          .map(([key, schema]) => ({ key, schema })),
+      ],
+    },
+    max: { type: 'number', category: 'Layout' },
+    size: avatarMeta.props.size,
+    shape: avatarMeta.props.shape,
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/avatar/avatarMeta.ts

@@ -0,0 +1,42 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const avatarMeta = {
+  name: 'Avatar',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  props: {
+    source: {
+      type: 'media',
+      category: 'Content',
+      mediaKinds: ['image'],
+    },
+    name: {
+      type: 'string',
+      category: 'Content',
+    },
+    initials: {
+      type: 'string',
+      category: 'Content',
+    },
+    label: {
+      type: 'string',
+      category: 'Accessibility',
+    },
+    size: {
+      type: 'enum',
+      category: 'Style',
+      enum: ['xs', 's', 'm', 'l', 'xl'],
+    },
+    shape: {
+      type: 'enum',
+      category: 'Style',
+      enum: ['circle', 'rounded'],
+    },
+    color: {
+      type: 'enum',
+      category: 'Style',
+      enum: ['primary', 'secondary', 'neutral', 'success', 'warning', 'danger', 'info'],
+    },
+  },
+} as const satisfies ZoraComponentMeta;