@ankhorage/zora 7.0.0 → 9.0.0

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;

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

@@ -1,39 +0,0 @@
-import type { ContentRailItemSize } from './types';
-
-export function resolveContentRailItemWidth({
-  gap,
-  itemCount,
-  itemSize,
-  padding,
-  peek,
-  viewportWidth,
-}: {
-  gap: number;
-  itemCount: number;
-  itemSize: ContentRailItemSize;
-  padding: number;
-  peek: number;
-  viewportWidth: number;
-}): number {
-  const availableWidth = Math.max(0, viewportWidth - padding * 2);
-  if (availableWidth === 0 || itemCount === 0) return 0;
-
-  const fixedWidth = resolveFixedItemWidth(itemSize);
-  if (fixedWidth !== undefined) return Math.min(fixedWidth, availableWidth);
-
-  const slots = viewportWidth >= 1024 ? 4 : viewportWidth >= 768 ? 3 : viewportWidth >= 480 ? 2 : 1;
-  const fullItems = Math.min(slots, itemCount);
-  const overflows = itemCount > fullItems;
-  const resolvedPeek = overflows ? Math.min(Math.max(0, peek), availableWidth / 2) : 0;
-  const gaps = overflows ? fullItems : Math.max(0, fullItems - 1);
-  const resolved = (availableWidth - resolvedPeek - gap * gaps) / fullItems;
-
-  return Math.min(280, Math.max(Math.min(96, availableWidth), Math.floor(resolved)));
-}
-
-function resolveFixedItemWidth(itemSize: ContentRailItemSize): number | undefined {
-  if (itemSize === 'compact') return 144;
-  if (itemSize === 'regular') return 200;
-  if (itemSize === 'wide') return 280;
-  return undefined;
-}

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

@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type ContentRailDirection = 'auto' | 'ltr' | 'rtl';
-export type ContentRailItemSize = 'compact' | 'regular' | 'wide' | 'responsive';
-export type ContentRailMotion = 'system' | 'animated' | 'reduced';
-export type ContentRailSpacing = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl';
-
-export interface ContentRailControlPressEvent {
-  direction: 'previous' | 'next';
-  targetIndex: number;
-}
-
-export interface ContentRailVisibleRangeChangeEvent {
-  firstVisibleIndex: number;
-  lastVisibleIndex: number;
-  itemCount: number;
-}
-
-export interface ContentRailProps extends ZoraBaseProps {
-  children?: ReactNode;
-  itemSize?: ContentRailItemSize;
-  gap?: ContentRailSpacing;
-  padding?: ContentRailSpacing;
-  peek?: number;
-  showControls?: boolean;
-  direction?: ContentRailDirection;
-  motion?: ContentRailMotion;
-  accessibilityLabel?: string;
-  previousLabel?: string;
-  nextLabel?: string;
-  onControlPress?: (event: ContentRailControlPressEvent) => void | Promise<void>;
-  onVisibleRangeChange?: (event: ContentRailVisibleRangeChangeEvent) => void | Promise<void>;
-}

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { AccessibilityInfo } from 'react-native';
-
-import type { ContentRailMotion } from './types';
-
-export function useContentRailReducedMotion(motion: ContentRailMotion): boolean {
-  const [systemReducedMotion, setSystemReducedMotion] = React.useState(false);
-
-  React.useEffect(() => {
-    if (motion !== 'system') return;
-
-    let active = true;
-    void AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
-      if (active) setSystemReducedMotion(enabled);
-    });
-    const subscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      setSystemReducedMotion,
-    );
-
-    return () => {
-      active = false;
-      subscription.remove();
-    };
-  }, [motion]);
-
-  return motion === 'reduced' || (motion === 'system' && systemReducedMotion);
-}

package/src/patterns/empty-state/EmptyState.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import { Button } from '../../components/button';
-import { Card } from '../../components/card';
-import { Stack } from '../../foundation';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { EmptyStateProps } from './types';
-
-function EmptyStateInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy,
-  title,
-  description,
-  eyebrow,
-  primaryAction,
-  secondaryAction,
-  footer,
-  testID,
-}: EmptyStateProps) {
-  return (
-    <Card
-      compact
-      description={description}
-      eyebrow={eyebrow}
-      interactionPolicy={interactionPolicy}
-      testID={testID}
-      title={title}
-      tone="subtle"
-    >
-      <Stack gap="m">
-        {primaryAction || secondaryAction ? (
-          <Stack direction={{ base: 'column', md: 'row' }} gap="s">
-            {primaryAction ? (
-              <Button
-                interactionPolicy={interactionPolicy}
-                variant={primaryAction.variant}
-                onPress={primaryAction.onPress}
-                color={primaryAction.color}
-              >
-                {primaryAction.label}
-              </Button>
-            ) : null}
-            {secondaryAction ? (
-              <Button
-                interactionPolicy={interactionPolicy}
-                variant={secondaryAction.variant ?? 'soft'}
-                onPress={secondaryAction.onPress}
-                color={secondaryAction.color ?? 'neutral'}
-              >
-                {secondaryAction.label}
-              </Button>
-            ) : null}
-          </Stack>
-        ) : null}
-        {footer}
-      </Stack>
-    </Card>
-  );
-}
-
-/***
- * Reusable fallback state for empty lists, missing data, or first-run experiences.
- *
- * `EmptyState` combines concise copy with optional primary and secondary actions
- * so apps can guide users without custom card and button wiring.
- *
- 
- * @example Empty project list
- * ```tsx
- * <EmptyState title="No projects yet" primaryAction={{ label: 'Create project', onPress }} />
- * ```
- */
-export const EmptyState = withZoraThemeScope(EmptyStateInner);

package/src/patterns/empty-state/index.ts

@@ -1,2 +0,0 @@
-export { EmptyState } from './EmptyState';
-export type { EmptyStateAction, EmptyStateProps } from './types';

package/src/patterns/empty-state/types.ts

@@ -1,20 +0,0 @@
-import type React from 'react';
-
-import type { ZoraButtonVariant, ZoraColor } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface EmptyStateAction {
-  label: React.ReactNode;
-  onPress: () => void;
-  color?: ZoraColor;
-  variant?: ZoraButtonVariant;
-}
-
-export interface EmptyStateProps extends ZoraBaseProps {
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  eyebrow?: React.ReactNode;
-  primaryAction?: EmptyStateAction;
-  secondaryAction?: EmptyStateAction;
-  footer?: React.ReactNode;
-}

package/src/patterns/post-card/PostCard.test.tsx

@@ -1,11 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-
-import { ZORA_COMPONENT_META } from '../../metadata';
-
-describe('PostCard', () => {
-  test('is registered as a public ZORA pattern', () => {
-    expect(ZORA_COMPONENT_META.PostCard?.name).toBe('PostCard');
-    expect(ZORA_COMPONENT_META.PostCard?.category).toBe('pattern');
-    expect(ZORA_COMPONENT_META.PostCard?.directManifestNode).toBe(true);
-  });
-});