@ankhorage/zora 7.0.0 → 8.0.0

package/src/features/image/imageMeta.ts

@@ -0,0 +1,35 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const imageMeta = {
+  name: 'Image',
+  category: 'component',
+  description: 'Displays an image from the app media registry or a resolved runtime source.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: { label: 'Image' },
+  props: {
+    fit: {
+      type: 'enum',
+      category: 'Layout',
+      enum: ['cover', 'contain', 'stretch', 'repeat', 'center', 'none'],
+    },
+    aspectRatio: { type: 'number', category: 'Layout' },
+    width: { type: 'number', category: 'Layout' },
+    height: { type: 'number', category: 'Layout' },
+    radius: { type: 'radius', category: 'Style' },
+    fallbackSource: { type: 'media', category: 'Content', mediaKinds: ['image'] },
+    source: {
+      type: 'media',
+      category: 'Content',
+      label: 'Source',
+      mediaKinds: ['image'],
+      authoring: { authority: 'instance' },
+    },
+    alt: {
+      type: 'string',
+      category: 'Accessibility',
+      label: 'Alt text',
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/image/public.ts

@@ -0,0 +1,2 @@
+export type { ImageFit, ImageProps, SurfaceImageSource } from '../../types/image';
+export { Image } from './adapters/inbound/Image';

package/src/features/layout/adapters/inbound/Box.tsx

@@ -0,0 +1,18 @@
+import { Box as SurfaceBox } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { BoxProps } from '../../../../types/layout';
+
+/*** Adapts the themed Surface Box primitive to ZORA scope and interaction props. */
+export const Box = withZoraThemeScope(BoxInner);
+
+/*** Forwards presentation props to the published Surface boundary. */
+function BoxInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: BoxProps) {
+  return <SurfaceBox {...props} />;
+}

package/src/features/layout/adapters/inbound/Container.tsx

@@ -0,0 +1,18 @@
+import { Container as SurfaceContainer } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ContainerProps } from '../../../../types/layout';
+
+/*** Adapts the themed Surface Container primitive to ZORA scope and interaction props. */
+export const Container = withZoraThemeScope(ContainerInner);
+
+/*** Forwards presentation props to the published Surface boundary. */
+function ContainerInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: ContainerProps) {
+  return <SurfaceContainer {...props} />;
+}

package/src/features/layout/adapters/inbound/ContentRail.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from 'bun:test';
+
+import type {
+  ContentRailControlPressEvent,
+  ContentRailProps,
+  ContentRailVisibleRangeChangeEvent,
+} from '../../../..';
+
+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/features/layout/adapters/inbound/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/features/layout/adapters/inbound/ContentRail.tsx

@@ -0,0 +1,262 @@
+import React from 'react';
+import {
+  I18nManager,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  ScrollView,
+  type ViewStyle,
+} from 'react-native';
+
+import { Inline } from '../../../../foundation';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type {
+  ContentRailProps,
+  ContentRailVisibleRangeChangeEvent,
+} from '../../../../types/content-rail';
+import { IconButton } from '../../../button/public';
+import { Text } from '../../../typography/public';
+import { Box, Stack } from '../../public';
+import { resolveContentRailItemWidth } from '../../utils/resolveContentRailItemWidth';
+import { resolveContentRailPhysicalOffset } from '../../utils/resolveContentRailPhysicalOffset';
+import { resolveContentRailState } from '../../utils/resolveContentRailState';
+import { useContentRailReducedMotion } from '../../utils/useContentRailReducedMotion';
+import { ContentRailFlow } from './ContentRailFlow';
+/**
+ * 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);
+
+/*** Selects intrinsic scrolling or sized item navigation. */
+function ContentRailInner(props: ContentRailProps) {
+  return props.itemSize === 'content' ? (
+    <ContentRailFlow {...props} />
+  ) : (
+    <ContentRailCarousel {...props} />
+  );
+}
+
+/*** Renders equal-width cards with responsive sizing and accessible previous/next controls. */
+function ContentRailCarousel({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  children,
+  itemSize = 'responsive',
+  gap = 'm',
+  padding = 'm',
+  peek = 32,
+  showControls = true,
+  bounces,
+  showsScrollIndicator = false,
+  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}
+        bounces={bounces}
+        showsHorizontalScrollIndicator={showsScrollIndicator}
+        snapToInterval={itemWidth > 0 ? itemWidth + gapValue : undefined}
+      >
+        {items.map((item, index) => (
+          <Box key={index} style={{ flexShrink: 0, width: itemWidth || undefined }}>
+            {item}
+          </Box>
+        ))}
+      </ScrollView>
+    </Stack>
+  );
+}
+
+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/features/layout/adapters/inbound/ContentRailFlow.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import type { ContentRailProps } from '../../../../types/content-rail';
+
+/*** Wraps intrinsically sized content in a free horizontal native scroll view. */
+export function ContentRailFlow({
+  children,
+  gap = 'm',
+  padding = 'm',
+  direction = 'auto',
+  bounces,
+  showsScrollIndicator = false,
+  accessibilityLabel = 'Content rail',
+  interactionPolicy,
+  testID,
+}: ContentRailProps) {
+  const { theme } = useZoraTheme();
+  const spacing = new Map(Object.entries(theme.spacing));
+  return (
+    <ScrollView
+      horizontal
+      bounces={bounces}
+      scrollEnabled={interactionPolicy !== 'passive'}
+      showsHorizontalScrollIndicator={showsScrollIndicator}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      contentContainerStyle={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        direction: direction === 'auto' ? undefined : direction,
+        gap: gap === 'none' ? 0 : spacing.get(gap),
+        paddingHorizontal: padding === 'none' ? 0 : spacing.get(padding),
+      }}
+    >
+      {children}
+    </ScrollView>
+  );
+}

package/src/features/layout/adapters/inbound/Divider.tsx

@@ -0,0 +1,18 @@
+import { Divider as SurfaceDivider } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { DividerProps } from '../../../../types/layout';
+
+/*** Adapts the themed Surface Divider primitive to ZORA scope and interaction props. */
+export const Divider = withZoraThemeScope(DividerInner);
+
+/*** Forwards presentation props to the published Surface boundary. */
+function DividerInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: DividerProps) {
+  return <SurfaceDivider {...props} />;
+}

package/src/features/layout/adapters/inbound/Grid.tsx

@@ -0,0 +1,18 @@
+import { Grid as SurfaceGrid } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { GridProps } from '../../../../types/layout';
+
+/*** Adapts the themed Surface Grid primitive to ZORA scope and interaction props. */
+export const Grid = withZoraThemeScope(GridInner);
+
+/*** Forwards presentation props to the published Surface boundary. */
+function GridInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: GridProps) {
+  return <SurfaceGrid {...props} />;
+}

package/src/features/layout/adapters/inbound/Stack.tsx

@@ -0,0 +1,18 @@
+import { Stack as SurfaceStack } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { StackProps } from '../../../../types/layout';
+
+/*** Adapts the themed Surface Stack primitive to ZORA scope and interaction props. */
+export const Stack = withZoraThemeScope(StackInner);
+
+/*** Forwards presentation props to the published Surface boundary. */
+function StackInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: StackProps) {
+  return <SurfaceStack {...props} />;
+}

package/src/features/layout/boxMeta.ts

@@ -0,0 +1,16 @@
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import type { ZoraComponentMeta } from '../../metadata/types';
+import { LAYOUT_PROPS } from './constants';
+
+export const boxMeta = {
+  name: 'Box',
+  category: 'foundation',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  props: {
+    ...LAYOUT_PROPS,
+    bg: { type: 'color', category: 'Style' },
+    borderColor: { type: 'color', category: 'Style' },
+    borderWidth: { type: 'number', category: 'Style' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/layout/constants.ts

@@ -0,0 +1,21 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const CONTENT_RAIL_SPACING_VALUES = ['none', 'xs', 's', 'm', 'l', 'xl'] as const;
+
+export const LAYOUT_PROPS = {
+  p: { type: 'spacing', category: 'Spacing' },
+  px: { type: 'spacing', category: 'Spacing' },
+  py: { type: 'spacing', category: 'Spacing' },
+  pt: { type: 'spacing', category: 'Spacing' },
+  pb: { type: 'spacing', category: 'Spacing' },
+  m: { type: 'spacing', category: 'Spacing' },
+  width: { type: 'number', category: 'Layout' },
+  height: { type: 'number', category: 'Layout' },
+  minWidth: { type: 'number', category: 'Layout' },
+  maxWidth: { type: 'number', category: 'Layout' },
+  minHeight: { type: 'number', category: 'Layout' },
+  maxHeight: { type: 'number', category: 'Layout' },
+  flex: { type: 'number', category: 'Layout' },
+  radius: { type: 'radius', category: 'Style' },
+  accessibilityLabel: { type: 'string', category: 'Accessibility' },
+} as const satisfies ZoraComponentMeta['props'];

package/src/features/layout/containerMeta.ts

@@ -0,0 +1,11 @@
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import type { ZoraComponentMeta } from '../../metadata/types';
+import { LAYOUT_PROPS } from './constants';
+
+export const containerMeta = {
+  name: 'Container',
+  category: 'foundation',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  props: Object.fromEntries(Object.entries(LAYOUT_PROPS).filter(([key]) => key !== 'width')),
+} as const satisfies ZoraComponentMeta;

package/src/features/layout/contentRailMeta.ts

@@ -0,0 +1,134 @@
+import type { ZoraComponentMeta } from '../../metadata';
+import { CONTENT_RAIL_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import { CONTENT_RAIL_SPACING_VALUES } from './constants';
+
+export const contentRailMeta = {
+  name: 'ContentRail',
+  category: 'pattern',
+  description:
+    'Native horizontal ScrollView: sized cards with controls, or intrinsic-width content with itemSize="content". The content mode has no snapping, controls, or visible-range events. Use ChipGroup wrap=false for a single scrolling row.',
+  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: {
+    bounces: { type: 'boolean', category: 'Behavior', label: 'Bounce (iOS)' },
+    showsScrollIndicator: { type: 'boolean', category: 'Style', label: 'Show scroll indicator' },
+    itemSize: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Item size',
+      enum: ['compact', 'regular', 'wide', 'responsive', 'content'],
+      default: 'responsive',
+    },
+    gap: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Gap',
+      enum: CONTENT_RAIL_SPACING_VALUES,
+      default: 'm',
+    },
+    padding: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Horizontal padding',
+      enum: CONTENT_RAIL_SPACING_VALUES,
+      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;