@ankhorage/zora 6.0.0 → 8.0.0

package/src/components/text/themeRecipeMeta.ts

@@ -1,34 +0,0 @@
-import { ZORA_COLORS, ZORA_EMPHASES } from '../../internal/colorModel';
-import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';
-
-export const textThemeRecipeMeta = {
-  name: 'Text',
-  kind: 'component',
-  description: 'Maps semantic Text presentation defaults into runtime props.',
-  fields: {
-    variant: {
-      type: 'choice',
-      label: 'Typography variant',
-      options: ['body', 'lead', 'bodySmall', 'caption', 'label', 'eyebrow', 'code'],
-      default: 'body',
-    },
-    color: { type: 'choice', label: 'Color', options: ZORA_COLORS },
-    emphasis: {
-      type: 'choice',
-      label: 'Emphasis',
-      options: ZORA_EMPHASES,
-      default: 'default',
-    },
-    align: {
-      type: 'choice',
-      label: 'Align',
-      options: ['auto', 'left', 'right', 'center', 'justify'],
-    },
-    weight: {
-      type: 'choice',
-      label: 'Weight',
-      options: ['regular', 'medium', 'semiBold', 'bold'],
-    },
-    italic: { type: 'boolean', label: 'Italic', default: false },
-  },
-} as const satisfies ZoraThemeRecipeMeta;

package/src/components/text/types.ts

@@ -1,41 +0,0 @@
-import type { Responsive } from '@ankhorage/surface';
-import type React from 'react';
-import type {
-  AccessibilityRole,
-  StyleProp,
-  TextProps as ReactNativeTextProps,
-  TextStyle,
-} from 'react-native';
-
-import type { ZoraColor, ZoraEmphasis } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type TextVariant = 'body' | 'lead' | 'bodySmall' | 'caption' | 'label' | 'eyebrow' | 'code';
-
-export type TextColor = ZoraColor;
-export type TextEmphasis = ZoraEmphasis;
-
-export type TextWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
-
-export type TextAlign = NonNullable<TextStyle['textAlign']>;
-
-export interface TextProps extends ZoraBaseProps {
-  children?: React.ReactNode;
-  text?: string;
-  i18nKey?: string;
-  variant?: Responsive<TextVariant>;
-  color?: Responsive<TextColor>;
-  emphasis?: Responsive<TextEmphasis>;
-  align?: Responsive<TextAlign>;
-  weight?: Responsive<TextWeight>;
-  italic?: boolean;
-  numberOfLines?: number;
-  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
-  selectable?: boolean;
-  style?: StyleProp<TextStyle>;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  accessibilityRole?: AccessibilityRole;
-  accessibilityLiveRegion?: ReactNativeTextProps['accessibilityLiveRegion'];
-  nativeID?: string;
-}

package/src/foundation/Box.tsx

@@ -1,23 +0,0 @@
-import { Box as SurfaceBox, type BoxProps as SurfaceBoxProps } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface BoxProps extends ZoraBaseProps, Omit<SurfaceBoxProps, 'mode' | 'themeId'> {}
-
-function BoxInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: BoxProps) {
-  return <SurfaceBox {...props} />;
-}
-
-/***
- * Base layout primitive for themed spacing, color, border, flex, and responsive props.
- *
- 
- */
-export const Box = withZoraThemeScope(BoxInner);

package/src/foundation/Container.tsx

@@ -1,27 +0,0 @@
-import {
-  Container as SurfaceContainer,
-  type ContainerProps as SurfaceContainerProps,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface ContainerProps
-  extends ZoraBaseProps, Omit<SurfaceContainerProps, 'mode' | 'themeId'> {}
-
-function ContainerInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: ContainerProps) {
-  return <SurfaceContainer {...props} />;
-}
-
-/***
- * Constrains page content to semantic widths with responsive padding.
- *
- 
- */
-export const Container = withZoraThemeScope(ContainerInner);

package/src/foundation/Divider.tsx

@@ -1,27 +0,0 @@
-import {
-  Divider as SurfaceDivider,
-  type DividerProps as SurfaceDividerProps,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface DividerProps
-  extends ZoraBaseProps, Omit<SurfaceDividerProps, 'mode' | 'themeId'> {}
-
-function DividerInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: DividerProps) {
-  return <SurfaceDivider {...props} />;
-}
-
-/***
- * Renders a themed visual separator between content sections.
- *
- 
- */
-export const Divider = withZoraThemeScope(DividerInner);

package/src/foundation/Grid.tsx

@@ -1,23 +0,0 @@
-import { Grid as SurfaceGrid, type GridProps as SurfaceGridProps } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface GridProps extends ZoraBaseProps, Omit<SurfaceGridProps, 'mode' | 'themeId'> {}
-
-function GridInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: GridProps) {
-  return <SurfaceGrid {...props} />;
-}
-
-/***
- * Creates responsive grid layouts for cards, tiles, and dashboard content.
- *
- 
- */
-export const Grid = withZoraThemeScope(GridInner);

package/src/foundation/Stack.tsx

@@ -1,23 +0,0 @@
-import { Stack as SurfaceStack, type StackProps as SurfaceStackProps } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export interface StackProps extends ZoraBaseProps, Omit<SurfaceStackProps, 'mode' | 'themeId'> {}
-
-function StackInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: StackProps) {
-  return <SurfaceStack {...props} />;
-}
-
-/***
- * Arranges layout items in one direction with theme spacing.
- *
- 
- */
-export const Stack = withZoraThemeScope(StackInner);

package/src/foundation/Surface.tsx

@@ -1,30 +0,0 @@
-import {
-  Surface as SurfaceSurface,
-  type SurfaceProps as SurfaceSurfaceProps,
-  type SurfaceVariant,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
-
-export type { SurfaceVariant };
-
-export interface SurfaceProps
-  extends ZoraBaseProps, Omit<SurfaceSurfaceProps, 'mode' | 'themeId'> {}
-
-function SurfaceInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  ...props
-}: SurfaceProps) {
-  return <SurfaceSurface {...props} />;
-}
-
-/***
- * Provides a semantic themed region for elevated, subtle, or bordered content.
- *
- 
- */
-export const Surface = withZoraThemeScope(SurfaceInner);

package/src/patterns/content-rail/ContentRail.test.ts

@@ -1,44 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-
-import type {
-  ContentRailControlPressEvent,
-  ContentRailProps,
-  ContentRailVisibleRangeChangeEvent,
-} from '../../index';
-
-describe('ContentRail public contract', () => {
-  test('exports serializable manifest and event inputs from the package root', () => {
-    const props: ContentRailProps = {
-      direction: 'rtl',
-      gap: 'm',
-      itemSize: 'responsive',
-      motion: 'reduced',
-      padding: 'm',
-      peek: 32,
-      showControls: true,
-    };
-    const control: ContentRailControlPressEvent = { direction: 'next', targetIndex: 2 };
-    const range: ContentRailVisibleRangeChangeEvent = {
-      firstVisibleIndex: 1,
-      lastVisibleIndex: 3,
-      itemCount: 6,
-    };
-
-    expect(() => JSON.stringify(props)).not.toThrow();
-    expect(() => JSON.stringify(control)).not.toThrow();
-    expect(() => JSON.stringify(range)).not.toThrow();
-  });
-
-  test('keeps product data, navigation, and platform coupling outside the pattern', async () => {
-    const source = await Bun.file('src/patterns/content-rail/ContentRail.tsx').text();
-
-    expect(source).toContain('ScrollView');
-    expect(source).toContain('I18nManager.isRTL');
-    expect(source).toContain('accessibilityRole="list"');
-    expect(source).toContain('reducedMotion');
-    expect(source).toContain('accessibilityLiveRegion="polite"');
-    expect(source).not.toContain('expo-');
-    expect(source).not.toContain('fetch(');
-    expect(source).not.toContain('router');
-  });
-});

package/src/patterns/content-rail/ContentRail.tsx

@@ -1,245 +0,0 @@
-import React from 'react';
-import {
-  I18nManager,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  ScrollView,
-  type ViewStyle,
-} from 'react-native';
-
-import { IconButton } from '../../components/icon-button';
-import { Text } from '../../components/text';
-import { Box, Inline, Stack } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { resolveContentRailItemWidth } from './resolveContentRailItemWidth';
-import { resolveContentRailPhysicalOffset } from './resolveContentRailPhysicalOffset';
-import { resolveContentRailState } from './resolveContentRailState';
-import type { ContentRailProps, ContentRailVisibleRangeChangeEvent } from './types';
-import { useContentRailReducedMotion } from './useContentRailReducedMotion';
-
-function ContentRailInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy,
-  children,
-  itemSize = 'responsive',
-  gap = 'm',
-  padding = 'm',
-  peek = 32,
-  showControls = true,
-  direction = 'auto',
-  motion = 'system',
-  accessibilityLabel = 'Content rail',
-  previousLabel = 'Previous items',
-  nextLabel = 'Next items',
-  onControlPress,
-  onVisibleRangeChange,
-  testID,
-}: ContentRailProps) {
-  const { theme } = useZoraTheme();
-  const items = React.Children.toArray(children);
-  const scrollViewRef = React.useRef<ScrollView>(null);
-  const lastRangeRef = React.useRef<ContentRailVisibleRangeChangeEvent | null>(null);
-  const logicalOffsetRef = React.useRef(0);
-  const rtlInitializedRef = React.useRef(false);
-  const [viewportWidth, setViewportWidth] = React.useState(0);
-  const [contentWidth, setContentWidth] = React.useState(0);
-  const [logicalOffset, setLogicalOffset] = React.useState(0);
-  const reducedMotion = useContentRailReducedMotion(motion);
-  const isRtl = direction === 'rtl' || (direction === 'auto' && I18nManager.isRTL);
-  const gapValue = resolveSpacingValue(theme.spacing, gap);
-  const paddingValue = resolveSpacingValue(theme.spacing, padding);
-  const itemWidth = resolveContentRailItemWidth({
-    gap: gapValue,
-    itemCount: items.length,
-    itemSize,
-    padding: paddingValue,
-    peek,
-    viewportWidth,
-  });
-  const railState = resolveContentRailState({
-    contentWidth,
-    gap: gapValue,
-    itemCount: items.length,
-    itemWidth,
-    logicalOffset,
-    viewportWidth,
-  });
-  const passive = interactionPolicy === 'passive';
-  const hasOverflow = railState.maxOffset > 1;
-
-  const emitVisibleRange = React.useCallback(
-    (nextOffset: number) => {
-      const next = resolveContentRailState({
-        contentWidth,
-        gap: gapValue,
-        itemCount: items.length,
-        itemWidth,
-        logicalOffset: nextOffset,
-        viewportWidth,
-      });
-      const event = {
-        firstVisibleIndex: next.firstVisibleIndex,
-        lastVisibleIndex: next.lastVisibleIndex,
-        itemCount: items.length,
-      };
-      const previous = lastRangeRef.current;
-      if (
-        previous?.firstVisibleIndex === event.firstVisibleIndex &&
-        previous.lastVisibleIndex === event.lastVisibleIndex &&
-        previous.itemCount === event.itemCount
-      ) {
-        return;
-      }
-      lastRangeRef.current = event;
-      void onVisibleRangeChange?.(event);
-    },
-    [contentWidth, gapValue, itemWidth, items.length, onVisibleRangeChange, viewportWidth],
-  );
-
-  React.useEffect(() => {
-    emitVisibleRange(railState.offset);
-  }, [emitVisibleRange, railState.offset]);
-
-  React.useEffect(() => {
-    rtlInitializedRef.current = !isRtl;
-  }, [isRtl]);
-
-  React.useEffect(() => {
-    if (viewportWidth === 0 || contentWidth === 0) return;
-    const nextOffset = Math.min(logicalOffsetRef.current, railState.maxOffset);
-    scrollViewRef.current?.scrollTo({
-      animated: false,
-      x: resolveContentRailPhysicalOffset({
-        isRtl,
-        logicalOffset: nextOffset,
-        maxOffset: railState.maxOffset,
-      }),
-      y: 0,
-    });
-    rtlInitializedRef.current = true;
-  }, [contentWidth, isRtl, itemWidth, railState.maxOffset, viewportWidth]);
-
-  const scrollToIndex = (targetIndex: number, controlDirection: 'previous' | 'next') => {
-    if (passive || !hasOverflow) return;
-    const clampedIndex = Math.min(Math.max(0, targetIndex), Math.max(0, items.length - 1));
-    const targetOffset = Math.min(clampedIndex * railState.stride, railState.maxOffset);
-    logicalOffsetRef.current = targetOffset;
-    setLogicalOffset(targetOffset);
-    scrollViewRef.current?.scrollTo({
-      animated: !reducedMotion,
-      x: resolveContentRailPhysicalOffset({
-        isRtl,
-        logicalOffset: targetOffset,
-        maxOffset: railState.maxOffset,
-      }),
-      y: 0,
-    });
-    emitVisibleRange(targetOffset);
-    void onControlPress?.({ direction: controlDirection, targetIndex: clampedIndex });
-  };
-
-  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (isRtl && !rtlInitializedRef.current) return;
-    const physicalOffset = event.nativeEvent.contentOffset.x;
-    const nextOffset = resolveContentRailPhysicalOffset({
-      isRtl,
-      logicalOffset: physicalOffset,
-      maxOffset: railState.maxOffset,
-    });
-    const clampedOffset = Math.min(Math.max(0, nextOffset), railState.maxOffset);
-    logicalOffsetRef.current = clampedOffset;
-    setLogicalOffset(clampedOffset);
-    emitVisibleRange(clampedOffset);
-  };
-
-  const rangeLabel =
-    items.length === 0
-      ? 'No items'
-      : `Items ${railState.firstVisibleIndex + 1}–${railState.lastVisibleIndex + 1} of ${items.length}`;
-  const contentStyle: ViewStyle = {
-    direction: isRtl ? 'rtl' : 'ltr',
-    flexDirection: 'row',
-    gap: gapValue,
-    paddingHorizontal: paddingValue,
-  };
-
-  return (
-    <Stack gap="s" testID={testID}>
-      {showControls && hasOverflow ? (
-        <Inline justify="space-between" wrap="nowrap">
-          <Text accessibilityLiveRegion="polite" emphasis="muted" variant="caption">
-            {rangeLabel}
-          </Text>
-          <Inline gap="xs" wrap="nowrap">
-            <IconButton
-              disabled={passive || !railState.canGoPrevious}
-              icon={{ name: isRtl ? 'chevron-forward' : 'chevron-back' }}
-              interactionPolicy={interactionPolicy}
-              label={previousLabel}
-              onPress={() => scrollToIndex(railState.anchorIndex - 1, 'previous')}
-              size="l"
-            />
-            <IconButton
-              disabled={passive || !railState.canGoNext}
-              icon={{ name: isRtl ? 'chevron-back' : 'chevron-forward' }}
-              interactionPolicy={interactionPolicy}
-              label={nextLabel}
-              onPress={() => scrollToIndex(railState.anchorIndex + 1, 'next')}
-              size="l"
-            />
-          </Inline>
-        </Inline>
-      ) : null}
-      <ScrollView
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="list"
-        contentContainerStyle={contentStyle}
-        decelerationRate="fast"
-        disableIntervalMomentum
-        horizontal
-        onContentSizeChange={(width) => {
-          if (isRtl) rtlInitializedRef.current = false;
-          setContentWidth(width);
-        }}
-        onLayout={(event) => {
-          if (isRtl) rtlInitializedRef.current = false;
-          setViewportWidth(event.nativeEvent.layout.width);
-        }}
-        onScroll={handleScroll}
-        ref={scrollViewRef}
-        scrollEnabled={!passive}
-        scrollEventThrottle={16}
-        showsHorizontalScrollIndicator={false}
-        snapToInterval={itemWidth > 0 ? itemWidth + gapValue : undefined}
-      >
-        {items.map((item, index) => (
-          <Box key={index} style={{ flexShrink: 0, width: itemWidth || undefined }}>
-            {item}
-          </Box>
-        ))}
-      </ScrollView>
-    </Stack>
-  );
-}
-
-/**
- * Horizontally browsable, manifest-authorable content with responsive item sizing.
- *
- * ContentRail owns only presentation and scrolling. Apps retain ownership of item data,
- * navigation, recommendations, and route behavior.
- */
-export const ContentRail = withZoraThemeScope(ContentRailInner);
-
-function resolveSpacingValue(
-  spacing: { none: number; xs: number; s: number; m: number; l: number; xl: number },
-  token: NonNullable<ContentRailProps['gap']>,
-): number {
-  if (token === 'none') return spacing.none;
-  if (token === 'xs') return spacing.xs;
-  if (token === 's') return spacing.s;
-  if (token === 'l') return spacing.l;
-  if (token === 'xl') return spacing.xl;
-  return spacing.m;
-}

package/src/patterns/content-rail/index.ts

@@ -1,10 +0,0 @@
-export { ContentRail } from './ContentRail';
-export type {
-  ContentRailControlPressEvent,
-  ContentRailDirection,
-  ContentRailItemSize,
-  ContentRailMotion,
-  ContentRailProps,
-  ContentRailSpacing,
-  ContentRailVisibleRangeChangeEvent,
-} from './types';

package/src/patterns/content-rail/meta.ts

@@ -1,133 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-import { CONTENT_RAIL_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
-
-const spacingValues = ['none', 'xs', 's', 'm', 'l', 'xl'] as const;
-
-export const contentRailMeta = {
-  name: 'ContentRail',
-  category: 'pattern',
-  description:
-    'Horizontally browsable child content with responsive sizing, partial-next affordance, and accessible controls.',
-  directManifestNode: true,
-  allowedChildren: [...CONTENT_RAIL_ALLOWED_CHILDREN],
-  blueprint: {
-    label: 'Content rail',
-    icon: { name: 'albums-outline' },
-    defaultProps: {
-      itemSize: 'responsive',
-      gap: 'm',
-      padding: 'm',
-      peek: 32,
-      showControls: true,
-      direction: 'auto',
-      motion: 'system',
-      accessibilityLabel: 'Content rail',
-      previousLabel: 'Previous items',
-      nextLabel: 'Next items',
-    },
-  },
-  events: {
-    controlPress: {
-      label: 'Control press',
-      eventType: 'contentRail.controlPress',
-      description: 'Emitted after a previous or next control requests a target item.',
-      payloadFields: [
-        { path: 'direction', type: 'string', label: 'Direction' },
-        { path: 'targetIndex', type: 'number', label: 'Target index' },
-      ],
-    },
-    visibleRangeChange: {
-      label: 'Visible range change',
-      eventType: 'contentRail.visibleRangeChange',
-      description: 'Emitted when the zero-based visible item range changes.',
-      payloadFields: [
-        { path: 'firstVisibleIndex', type: 'number', label: 'First visible index' },
-        { path: 'lastVisibleIndex', type: 'number', label: 'Last visible index' },
-        { path: 'itemCount', type: 'number', label: 'Item count' },
-      ],
-    },
-  },
-  slots: {
-    children: {
-      label: 'Rail items',
-      allowedChildren: [...CONTENT_RAIL_ALLOWED_CHILDREN],
-    },
-  },
-  props: {
-    itemSize: {
-      type: 'enum',
-      category: 'Layout',
-      label: 'Item size',
-      enum: ['compact', 'regular', 'wide', 'responsive'],
-      default: 'responsive',
-    },
-    gap: {
-      type: 'enum',
-      category: 'Layout',
-      label: 'Gap',
-      enum: spacingValues,
-      default: 'm',
-    },
-    padding: {
-      type: 'enum',
-      category: 'Layout',
-      label: 'Horizontal padding',
-      enum: spacingValues,
-      default: 'm',
-    },
-    peek: {
-      type: 'number',
-      category: 'Layout',
-      label: 'Partial next item',
-      default: 32,
-    },
-    showControls: {
-      type: 'boolean',
-      category: 'Controls',
-      label: 'Show controls',
-      default: true,
-    },
-    direction: {
-      type: 'enum',
-      category: 'Layout',
-      label: 'Reading direction',
-      enum: ['auto', 'ltr', 'rtl'],
-      default: 'auto',
-    },
-    motion: {
-      type: 'enum',
-      category: 'Accessibility',
-      label: 'Motion',
-      enum: ['system', 'animated', 'reduced'],
-      default: 'system',
-    },
-    accessibilityLabel: {
-      type: 'string',
-      category: 'Accessibility',
-      label: 'Rail label',
-      default: 'Content rail',
-    },
-    previousLabel: {
-      type: 'string',
-      category: 'Accessibility',
-      label: 'Previous control label',
-      default: 'Previous items',
-    },
-    nextLabel: {
-      type: 'string',
-      category: 'Accessibility',
-      label: 'Next control label',
-      default: 'Next items',
-    },
-    onControlPress: {
-      type: 'action',
-      category: 'Events',
-      label: 'Control press action',
-    },
-    onVisibleRangeChange: {
-      type: 'action',
-      category: 'Events',
-      label: 'Visible range change action',
-    },
-  },
-} as const satisfies ZoraComponentMeta;