@ankhorage/zora 15.0.0 → 17.0.0

package/src/features/rating/utils/resolveRatingSegments.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveRatingSegments } from './resolveRatingSegments';
+
+describe('resolveRatingSegments', () => {
+  it('supports full and half values', () => {
+    expect(resolveRatingSegments({ max: 5, value: 4.5 })).toEqual([
+      'full',
+      'full',
+      'full',
+      'full',
+      'half',
+    ]);
+  });
+
+  it('clamps values to the rating range', () => {
+    expect(resolveRatingSegments({ max: 3, value: -1 })).toEqual(['empty', 'empty', 'empty']);
+    expect(resolveRatingSegments({ max: 2, value: 4 })).toEqual(['full', 'full']);
+  });
+});

package/src/features/rating/utils/resolveRatingSegments.ts

@@ -0,0 +1,19 @@
+export type RatingSegment = 'empty' | 'full' | 'half';
+
+/*** Resolves a numeric rating into full, half, and empty visual segments. */
+export function resolveRatingSegments({ value, max }: ResolveRatingSegmentsInput): RatingSegment[] {
+  const normalizedMax = Math.max(0, Math.trunc(Number.isFinite(max) ? max : 0));
+  const normalizedValue = Math.min(Math.max(Number.isFinite(value) ? value : 0, 0), normalizedMax);
+
+  return Array.from({ length: normalizedMax }, (_, index) => {
+    const remaining = normalizedValue - index;
+    if (remaining >= 1) return 'full';
+    if (remaining >= 0.5) return 'half';
+    return 'empty';
+  });
+}
+
+interface ResolveRatingSegmentsInput {
+  value: number;
+  max: number;
+}

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/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/tabs/adapters/inbound/Tab.tsx

@@ -0,0 +1,26 @@
+import { Tab as SurfaceTab } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TabProps } from '../../../../types/tabs';
+import { TabsInteractionPolicyContext } from '../../composition/TabsInteractionPolicyContext';
+
+/*** Renders one labeled selectable tab backed by Surface accessibility semantics. */
+export const Tab = withZoraThemeScope(TabInner);
+
+/*** Resolves inherited interaction policy before delegating tab behavior to Surface. */
+function TabInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  label,
+  ...props
+}: TabProps) {
+  const inheritedInteractionPolicy = React.use(TabsInteractionPolicyContext);
+
+  return (
+    <SurfaceTab {...props} interactionPolicy={interactionPolicy ?? inheritedInteractionPolicy}>
+      {label}
+    </SurfaceTab>
+  );
+}

package/src/features/tabs/adapters/inbound/TabList.tsx

@@ -0,0 +1,18 @@
+import { TabList as SurfaceTabList } from '@ankhorage/surface';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TabListProps } from '../../../../types/tabs';
+
+/*** Renders the accessible list of tabs for a Tabs composition. */
+export const TabList = withZoraThemeScope(TabListInner);
+
+/*** Delegates tablist semantics and keyboard navigation to Surface. */
+function TabListInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  children,
+  testID,
+}: TabListProps) {
+  return <SurfaceTabList testID={testID}>{children}</SurfaceTabList>;
+}

package/src/features/tabs/adapters/inbound/TabPanel.tsx

@@ -0,0 +1,23 @@
+import { TabPanel as SurfaceTabPanel } from '@ankhorage/surface';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TabPanelProps } from '../../../../types/tabs';
+
+/*** Renders content associated with one selected Tab. */
+export const TabPanel = withZoraThemeScope(TabPanelInner);
+
+/*** Delegates tabpanel visibility and accessibility linkage to Surface. */
+function TabPanelInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  children,
+  value,
+  testID,
+}: TabPanelProps) {
+  return (
+    <SurfaceTabPanel testID={testID} value={value}>
+      {children}
+    </SurfaceTabPanel>
+  );
+}

package/src/features/tabs/adapters/inbound/Tabs.tsx

@@ -0,0 +1,23 @@
+import { Tabs as SurfaceTabs } from '@ankhorage/surface';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TabsProps } from '../../../../types/tabs';
+import { TabsInteractionPolicyContext } from '../../composition/TabsInteractionPolicyContext';
+
+/*** Provides accessible tab state and interaction policy through the Surface Tabs primitive. */
+export const Tabs = withZoraThemeScope(TabsInner);
+
+/*** Connects ZORA tab composition to the Surface tab state owner. */
+function TabsInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy = 'enabled',
+  children,
+  ...props
+}: TabsProps) {
+  return (
+    <TabsInteractionPolicyContext value={interactionPolicy}>
+      <SurfaceTabs {...props}>{children}</SurfaceTabs>
+    </TabsInteractionPolicyContext>
+  );
+}

package/src/features/tabs/composition/TabsInteractionPolicyContext.ts

@@ -0,0 +1,4 @@
+import type { InteractionPolicy } from '@ankhorage/surface';
+import { createContext } from 'react';
+
+export const TabsInteractionPolicyContext = createContext<InteractionPolicy>('enabled');

package/src/features/tabs/public.ts

@@ -0,0 +1,5 @@
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from '../../types/tabs';
+export { Tab } from './adapters/inbound/Tab';
+export { TabList } from './adapters/inbound/TabList';
+export { TabPanel } from './adapters/inbound/TabPanel';
+export { Tabs } from './adapters/inbound/Tabs';

package/src/features/tabs/tabListMeta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const tabListMeta = {
+  name: 'TabList',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: ['Tab'],
+  description: 'Accessible list of selectable tabs.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/features/tabs/tabMeta.ts

@@ -0,0 +1,15 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const tabMeta = {
+  name: 'Tab',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  description: 'One labeled selectable tab within a TabList.',
+  blueprint: { label: 'Tab', defaultProps: { label: 'Tab', value: 'tab' } },
+  props: {
+    value: { type: 'string', category: 'State', label: 'Value' },
+    label: { type: 'string', category: 'Content', label: 'Label' },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/tabs/tabPanelMeta.ts

@@ -0,0 +1,13 @@
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const tabPanelMeta = {
+  name: 'TabPanel',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  description: 'Content panel associated with one Tab value.',
+  props: {
+    value: { type: 'string', category: 'State', label: 'Value' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/tabs/tabsMeta.ts

@@ -0,0 +1,41 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const tabsMeta = {
+  name: 'Tabs',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: ['TabList', 'TabPanel'],
+  description: 'Owns the active value for an accessible tablist and its panels.',
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'tabs.valueChange',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+  },
+  bindings: {
+    props: {
+      value: {
+        label: 'Value',
+        description: 'Current active tab value.',
+        value: { type: 'string' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+    events: {
+      valueChange: {
+        label: 'Value change',
+        description: 'Runs when the active tab changes.',
+        payload: {
+          eventType: 'tabs.valueChange',
+          fields: [{ path: 'value', type: 'string', label: 'Value' }],
+        },
+      },
+    },
+  },
+  props: {
+    value: { type: 'string', category: 'State', label: 'Value' },
+    defaultValue: { type: 'string', category: 'State', label: 'Default value' },
+  },
+} as const satisfies ZoraComponentMeta;

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

@@ -0,0 +1,31 @@
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ToolbarProps } from '../../../../types/toolbar';
+import { Card } from '../../../card/public';
+import { View } from '../../../layout/public';
+
+/*** Renders a visible horizontal group of contextual actions and controls. */
+export const Toolbar = withZoraThemeScope(ToolbarInner);
+
+/*** Applies toolbar presentation without owning page placement. */
+function ToolbarInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  children,
+  floating = false,
+  compact = true,
+  testID,
+}: ToolbarProps) {
+  return (
+    <Card
+      compact={compact}
+      interactionPolicy={interactionPolicy}
+      tone={floating ? 'default' : 'subtle'}
+      testID={testID}
+    >
+      <View align="center" direction="row" gap="s">
+        {children}
+      </View>
+    </Card>
+  );
+}

package/src/features/toolbar/public.ts

@@ -0,0 +1,2 @@
+export type { ToolbarProps } from '../../types/toolbar';
+export { Toolbar } from './adapters/inbound/Toolbar';

package/src/features/toolbar/toolbarMeta.ts

@@ -0,0 +1,24 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const toolbarMeta = {
+  name: 'Toolbar',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [
+    'Button',
+    'IconButton',
+    'SearchInput',
+    'Select',
+    'Chip',
+    'ChipGroup',
+    'Text',
+    'Divider',
+  ],
+  description:
+    'Visible horizontal group of contextual actions and controls; layout owns placement.',
+  blueprint: { label: 'Toolbar', defaultProps: { compact: true, floating: false } },
+  props: {
+    floating: { type: 'boolean', category: 'Style', label: 'Floating', default: false },
+    compact: { type: 'boolean', category: 'Layout', label: 'Compact', default: true },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/{components → features/typography}/contentFallback.test.ts

@@ -3,14 +3,8 @@ import { join } from 'node:path';
 
 import { describe, expect, it } from 'bun:test';
 
-const textSource = readFileSync(
-  join(import.meta.dir, '../features/typography/adapters/inbound/Text.tsx'),
-  'utf8',
-);
-const headingSource = readFileSync(
-  join(import.meta.dir, '../features/typography/adapters/inbound/Heading.tsx'),
-  'utf8',
-);
+const textSource = readFileSync(join(import.meta.dir, 'adapters/inbound/Text.tsx'), 'utf8');
+const headingSource = readFileSync(join(import.meta.dir, 'adapters/inbound/Heading.tsx'), 'utf8');
 
 describe('content fallback ownership', () => {
   it('keeps Text free of translation context coupling', () => {

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

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import { Modal } from '../../../../components/modal';
 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 { 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,21 +283,21 @@ function UploaderInner({
                 Preview
               </Button>
             ) : null}
-          </Stack>
-        </Stack>
+          </View>
+        </View>
       </FormField>
 
       {canPreviewImage ? (
-        <Modal
+        <Dialog
           closeOnBackdrop
           interactionPolicy={interactionPolicy}
           onDismiss={() => setPreviewOpen(false)}
           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,9 +306,9 @@ function UploaderInner({
               >
                 Close
               </Button>
-            </Stack>
-          </Stack>
-        </Modal>
+            </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>
   );
 }