@ankhorage/zora 3.1.1 → 3.3.1

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

@@ -0,0 +1,12 @@
+export function resolveContentRailPhysicalOffset({
+  isRtl,
+  logicalOffset,
+  maxOffset,
+}: {
+  isRtl: boolean;
+  logicalOffset: number;
+  maxOffset: number;
+}): number {
+  const clampedOffset = Math.min(Math.max(0, logicalOffset), Math.max(0, maxOffset));
+  return isRtl ? Math.max(0, maxOffset) - clampedOffset : clampedOffset;
+}

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

@@ -0,0 +1,68 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolveContentRailState } from './resolveContentRailState';
+
+describe('resolveContentRailState', () => {
+  test('resolves overflow, visible items, and the nearest navigation anchor', () => {
+    expect(
+      resolveContentRailState({
+        contentWidth: 848,
+        gap: 16,
+        itemCount: 4,
+        itemWidth: 200,
+        logicalOffset: 216,
+        viewportWidth: 432,
+      }),
+    ).toEqual({
+      anchorIndex: 1,
+      canGoNext: true,
+      canGoPrevious: true,
+      firstVisibleIndex: 1,
+      lastVisibleIndex: 2,
+      maxOffset: 416,
+      offset: 216,
+      stride: 216,
+    });
+  });
+
+  test('clamps boundaries without wrapping', () => {
+    const start = resolveContentRailState({
+      contentWidth: 848,
+      gap: 16,
+      itemCount: 4,
+      itemWidth: 200,
+      logicalOffset: -100,
+      viewportWidth: 432,
+    });
+    const end = resolveContentRailState({
+      contentWidth: 848,
+      gap: 16,
+      itemCount: 4,
+      itemWidth: 200,
+      logicalOffset: 1000,
+      viewportWidth: 432,
+    });
+
+    expect(start).toMatchObject({ offset: 0, canGoPrevious: false, canGoNext: true });
+    expect(end).toMatchObject({ offset: 416, canGoPrevious: true, canGoNext: false });
+  });
+
+  test('degrades to a non-overflowing empty range', () => {
+    expect(
+      resolveContentRailState({
+        contentWidth: 0,
+        gap: 16,
+        itemCount: 0,
+        itemWidth: 0,
+        logicalOffset: 0,
+        viewportWidth: 432,
+      }),
+    ).toMatchObject({
+      canGoNext: false,
+      canGoPrevious: false,
+      firstVisibleIndex: -1,
+      lastVisibleIndex: -1,
+      maxOffset: 0,
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+export function resolveContentRailState({
+  contentWidth,
+  gap,
+  itemCount,
+  itemWidth,
+  logicalOffset,
+  viewportWidth,
+}: {
+  contentWidth: number;
+  gap: number;
+  itemCount: number;
+  itemWidth: number;
+  logicalOffset: number;
+  viewportWidth: number;
+}) {
+  const maxOffset = Math.max(0, contentWidth - viewportWidth);
+  const offset = Math.min(Math.max(0, logicalOffset), maxOffset);
+  const stride = itemWidth + gap;
+  const firstVisibleIndex = stride > 0 ? Math.min(itemCount - 1, Math.floor(offset / stride)) : 0;
+  const lastVisibleIndex =
+    stride > 0
+      ? Math.min(itemCount - 1, Math.max(0, Math.ceil((offset + viewportWidth) / stride) - 1))
+      : 0;
+  const anchorIndex = stride > 0 ? Math.round(offset / stride) : 0;
+
+  return {
+    anchorIndex: Math.min(Math.max(0, anchorIndex), Math.max(0, itemCount - 1)),
+    canGoNext: itemCount > 0 && offset < maxOffset - 1,
+    canGoPrevious: itemCount > 0 && offset > 1,
+    firstVisibleIndex: itemCount === 0 ? -1 : firstVisibleIndex,
+    lastVisibleIndex: itemCount === 0 ? -1 : lastVisibleIndex,
+    maxOffset,
+    offset,
+    stride,
+  };
+}

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,28 @@
+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/registry.ts

@@ -30,7 +30,7 @@ import { Modal } from './components/modal';
 import { NavigationItem } from './components/navigation-item';
 import { NavigationList } from './components/navigation-list';
 import { Pagination } from './components/pagination';
-import { Progress } from './components/progress';
+import { Progress, ProgressRing } from './components/progress';
 import { Radio, RadioGroup } from './components/radio';
 import { Rating } from './components/rating';
 import { SearchBar } from './components/search-bar';
@@ -72,6 +72,7 @@ import {
 import { ChatListItem } from './patterns/chat-list-item';
 import { CollectionEditor } from './patterns/collection-editor';
 import { ConfirmDialog } from './patterns/confirm-dialog';
+import { ContentRail } from './patterns/content-rail';
 import { DisclosureSection } from './patterns/disclosure-section';
 import { EmptyState } from './patterns/empty-state';
 import { FilterBar } from './patterns/filter-bar';
@@ -162,6 +163,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   NavigationList,
   Pagination,
   Progress,
+  ProgressRing,
   Radio,
   RadioGroup,
   Rating,
@@ -205,6 +207,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   ChatListItem,
   CollectionEditor,
   ConfirmDialog,
+  ContentRail,
   DisclosureSection,
   EmptyState,
   FilterBar,

package/src/showcaseCoverage.test.ts

@@ -44,6 +44,7 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'NavigationItem',
     'NavigationList',
     'Progress',
+    'ProgressRing',
     'Radio',
     'RadioGroup',
     'Rating',