@ankhorage/zora 18.0.1 → 19.0.1

package/src/patterns/scanner/ScanOverlay.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { Badge } from '../../features/badge/public';
-import { View } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ScanOverlayProps } from './types';
-
-function ScanOverlayInner({
-  themeId: _themeId,
-  interactionPolicy: _interactionPolicy,
-  mode: _mode,
-  title = 'Align the barcode',
-  description = 'Hold the barcode inside the frame. Scanning starts automatically.',
-  cornerLabel = 'SCAN',
-  testID,
-}: ScanOverlayProps) {
-  const { theme } = useZoraTheme();
-  const frameStyle = {
-    borderColor: theme.semantics.border.default,
-  };
-  const cornerStyle = {
-    borderColor: theme.semantics.border.focus,
-  };
-
-  return (
-    <View testID={testID}>
-      <View gap="m">
-        <View accessibilityRole="image" style={[styles.frame, frameStyle]}>
-          <View style={[styles.corner, styles.topLeft, cornerStyle]} />
-          <View style={[styles.corner, styles.topRight, cornerStyle]} />
-          <View style={[styles.corner, styles.bottomLeft, cornerStyle]} />
-          <View style={[styles.corner, styles.bottomRight, cornerStyle]} />
-          <Badge color="primary">{cornerLabel}</Badge>
-        </View>
-        <View gap="xs">
-          <Text align="center" variant="label" weight="semiBold">
-            {title}
-          </Text>
-          <Text align="center" emphasis="muted" variant="bodySmall">
-            {description}
-          </Text>
-        </View>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  frame: {
-    alignItems: 'center',
-    aspectRatio: 1.55,
-    borderRadius: 28,
-    borderWidth: 1,
-    justifyContent: 'center',
-    minHeight: 180,
-    overflow: 'hidden',
-    position: 'relative',
-  },
-  corner: {
-    height: 34,
-    position: 'absolute',
-    width: 34,
-  },
-  topLeft: {
-    borderLeftWidth: 4,
-    borderTopWidth: 4,
-    left: 18,
-    top: 18,
-  },
-  topRight: {
-    borderRightWidth: 4,
-    borderTopWidth: 4,
-    right: 18,
-    top: 18,
-  },
-  bottomLeft: {
-    borderBottomWidth: 4,
-    borderLeftWidth: 4,
-    bottom: 18,
-    left: 18,
-  },
-  bottomRight: {
-    borderBottomWidth: 4,
-    borderRightWidth: 4,
-    bottom: 18,
-    right: 18,
-  },
-});
-
-/***
- * Camera-agnostic scan frame overlay for barcode and QR scanning flows.
- *
- * `ScanOverlay` intentionally renders no native camera. Apps provide camera
- * capability separately while ZORA owns the visible scan affordance.
- *
- */
-export const ScanOverlay = withZoraThemeScope(ScanOverlayInner);

package/src/patterns/scanner/index.ts

@@ -1,10 +0,0 @@
-export { BarcodeScannerView } from './BarcodeScannerView';
-export { CameraPermissionView } from './CameraPermissionView';
-export { ScanOverlay } from './ScanOverlay';
-export type {
-  BarcodeScannerViewProps,
-  BarcodeScanResult,
-  CameraPermissionStatus,
-  CameraPermissionViewProps,
-  ScanOverlayProps,
-} from './types';

package/src/patterns/scanner/meta.ts

@@ -1,197 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
-
-export const scanOverlayMeta = {
-  name: 'ScanOverlay',
-  category: 'pattern',
-  description: 'Camera-agnostic scan frame overlay for barcode and QR scanning flows.',
-  directManifestNode: true,
-  allowedChildren: [],
-  blueprint: {
-    label: 'Scan overlay',
-    defaultProps: {
-      title: 'Align the barcode',
-      description: 'Hold the barcode inside the frame. Scanning starts automatically.',
-      cornerLabel: 'SCAN',
-    },
-  },
-  props: {
-    title: {
-      type: 'string',
-      category: 'Content',
-      label: 'Title',
-      default: 'Align the barcode',
-    },
-    description: {
-      type: 'string',
-      category: 'Content',
-      label: 'Description',
-      default: 'Hold the barcode inside the frame. Scanning starts automatically.',
-    },
-    cornerLabel: {
-      type: 'string',
-      category: 'Content',
-      label: 'Corner label',
-      default: 'SCAN',
-    },
-  },
-} as const satisfies ZoraComponentMeta;
-
-export const cameraPermissionViewMeta = {
-  name: 'CameraPermissionView',
-  category: 'pattern',
-  description: 'ZORA-owned camera permission state for scanner flows.',
-  directManifestNode: true,
-  allowedChildren: [],
-  requirements: {
-    permissions: [{ permission: 'camera' }],
-  },
-  blueprint: {
-    label: 'Camera permission',
-    defaultProps: {
-      status: 'unknown',
-      requestLabel: 'Allow camera access',
-      manualEntryLabel: 'Enter barcode manually',
-    },
-  },
-  props: {
-    status: {
-      type: 'enum',
-      category: 'State',
-      label: 'Permission status',
-      enum: ['unknown', 'requesting', 'denied'],
-      default: 'unknown',
-    },
-    title: {
-      type: 'string',
-      category: 'Content',
-      label: 'Title',
-    },
-    description: {
-      type: 'string',
-      category: 'Content',
-      label: 'Description',
-    },
-    requestLabel: {
-      type: 'string',
-      category: 'Content',
-      label: 'Request label',
-      default: 'Allow camera access',
-    },
-    deniedLabel: {
-      type: 'string',
-      category: 'Content',
-      label: 'Denied label',
-      default: 'Open settings',
-    },
-    manualEntryLabel: {
-      type: 'string',
-      category: 'Content',
-      label: 'Manual entry label',
-      default: 'Enter barcode manually',
-    },
-    onRequestPermission: {
-      type: 'action',
-      category: 'Events',
-      label: 'Request permission action',
-    },
-    onManualEntry: {
-      type: 'action',
-      category: 'Events',
-      label: 'Manual entry action',
-    },
-  },
-} as const satisfies ZoraComponentMeta;
-
-export const barcodeScannerViewMeta = {
-  name: 'BarcodeScannerView',
-  category: 'pattern',
-  description:
-    'Composed scanner shell with permission, camera slot, scan overlay, and manual entry affordance.',
-  directManifestNode: true,
-  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-  requirements: {
-    permissions: [{ permission: 'camera' }],
-    capabilities: [{ capability: 'barcodeScanner' }],
-  },
-  blueprint: {
-    label: 'Barcode scanner',
-    defaultProps: {
-      permissionStatus: 'unknown',
-      title: 'Scan barcode',
-      description: 'Point the camera at a barcode to continue.',
-    },
-  },
-  events: {
-    onBarcodeScanned: {
-      label: 'Barcode scanned',
-      eventType: 'scan',
-      description: 'Emitted by the app camera adapter after a barcode has been scanned.',
-      payloadFields: [
-        { path: 'value', type: 'string', label: 'Barcode value' },
-        { path: 'type', type: 'string', label: 'Barcode type' },
-      ],
-    },
-  },
-  slots: {
-    camera: {
-      label: 'Camera adapter',
-      allowedChildren: [],
-    },
-    children: {
-      label: 'Scanner footer',
-      allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-    },
-  },
-  props: {
-    permissionStatus: {
-      type: 'enum',
-      category: 'State',
-      label: 'Permission status',
-      enum: ['unknown', 'requesting', 'granted', 'denied'],
-      default: 'unknown',
-    },
-    title: {
-      type: 'string',
-      category: 'Content',
-      label: 'Title',
-      default: 'Scan barcode',
-    },
-    description: {
-      type: 'string',
-      category: 'Content',
-      label: 'Description',
-      default: 'Point the camera at a barcode to continue.',
-    },
-    overlayTitle: {
-      type: 'string',
-      category: 'Content',
-      label: 'Overlay title',
-    },
-    overlayDescription: {
-      type: 'string',
-      category: 'Content',
-      label: 'Overlay description',
-    },
-    requestPermissionLabel: {
-      type: 'string',
-      category: 'Content',
-      label: 'Request permission label',
-    },
-    manualEntryLabel: {
-      type: 'string',
-      category: 'Content',
-      label: 'Manual entry label',
-    },
-    onRequestPermission: {
-      type: 'action',
-      category: 'Events',
-      label: 'Request permission action',
-    },
-    onManualEntry: {
-      type: 'action',
-      category: 'Events',
-      label: 'Manual entry action',
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/patterns/scanner/types.ts

@@ -1,47 +0,0 @@
-import type React from 'react';
-
-import type { ButtonProps } from '../../features/button/public';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type CameraPermissionStatus = 'unknown' | 'requesting' | 'granted' | 'denied';
-
-export interface BarcodeScanResult {
-  value: string;
-  type?: string;
-}
-
-export interface ScanOverlayProps extends ZoraBaseProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  cornerLabel?: React.ReactNode;
-}
-
-export interface CameraPermissionViewProps extends ZoraBaseProps {
-  status: Exclude<CameraPermissionStatus, 'granted'>;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  requestLabel?: React.ReactNode;
-  deniedLabel?: React.ReactNode;
-  manualEntryLabel?: React.ReactNode;
-  onRequestPermission?: () => void | Promise<void>;
-  onManualEntry?: () => void | Promise<void>;
-  requestButtonProps?: Omit<ButtonProps, 'children' | 'onPress'>;
-  manualEntryButtonProps?: Omit<ButtonProps, 'children' | 'onPress'>;
-}
-
-export interface BarcodeScannerViewProps extends ZoraBaseProps {
-  permissionStatus: CameraPermissionStatus;
-  camera?: React.ReactNode;
-  children?: React.ReactNode;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  overlayTitle?: React.ReactNode;
-  overlayDescription?: React.ReactNode;
-  cornerLabel?: React.ReactNode;
-  requestPermissionLabel?: React.ReactNode;
-  deniedPermissionLabel?: React.ReactNode;
-  manualEntryLabel?: React.ReactNode;
-  onRequestPermission?: () => void | Promise<void>;
-  onManualEntry?: () => void | Promise<void>;
-  onBarcodeScanned?: (result: BarcodeScanResult) => void | Promise<void>;
-}

package/src/patterns/section-header/SectionHeader.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import { View } from '../../features/layout/public';
-import { Heading } from '../../features/typography/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { SectionHeaderProps } from './types';
-
-function SectionHeaderInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  title,
-  description,
-  eyebrow,
-  actions,
-  testID,
-}: SectionHeaderProps) {
-  return (
-    <View
-      align={{ base: 'flex-start', md: 'center' }}
-      direction={{ base: 'column', md: 'row' }}
-      gap="m"
-      justify="space-between"
-      testID={testID}
-    >
-      <View flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
-        <View gap="xs">
-          {eyebrow ? (
-            <Text emphasis="muted" variant="caption" weight="semiBold">
-              {eyebrow}
-            </Text>
-          ) : null}
-          <Heading level={3}>{title}</Heading>
-          {description ? (
-            <Text emphasis="muted" variant="bodySmall">
-              {description}
-            </Text>
-          ) : null}
-        </View>
-      </View>
-      {actions ? <View>{actions}</View> : null}
-    </View>
-  );
-}
-
-/***
- * Section heading pattern with optional description and action slot.
- *
- 
- */
-export const SectionHeader = withZoraThemeScope(SectionHeaderInner);

package/src/patterns/section-header/index.ts

@@ -1,2 +0,0 @@
-export { SectionHeader } from './SectionHeader';
-export type { SectionHeaderProps } from './types';

package/src/patterns/section-header/meta.ts

@@ -1,34 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const sectionHeaderMeta = {
-  name: 'SectionHeader',
-  category: 'pattern',
-  directManifestNode: true,
-  allowedChildren: [],
-  blueprint: {
-    label: 'Section header',
-    defaultProps: {
-      title: 'Section title',
-      description: 'Short description.',
-    },
-  },
-  props: {
-    title: {
-      type: 'string',
-      category: 'Content',
-      label: 'Title',
-      default: 'Section title',
-    },
-    description: {
-      type: 'string',
-      category: 'Content',
-      label: 'Description',
-      default: 'Short description.',
-    },
-    eyebrow: {
-      type: 'string',
-      category: 'Content',
-      label: 'Eyebrow',
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/patterns/section-header/types.ts

@@ -1,10 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface SectionHeaderProps extends ZoraBaseProps {
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  eyebrow?: React.ReactNode;
-  actions?: React.ReactNode;
-}

package/src/patterns/selection/SelectableItem.tsx

@@ -1,110 +0,0 @@
-import { Pressable } from '@ankhorage/surface';
-import React from 'react';
-import type { GestureResponderEvent } from 'react-native';
-
-import { useSelection } from './SelectionProvider';
-import type { SelectableItemProps, SelectableItemState, SelectionTrigger } from './types';
-
-function resolveTrigger(trigger: SelectionTrigger | undefined): SelectionTrigger {
-  return trigger ?? 'manual';
-}
-
-function isRenderProp(
-  children: SelectableItemProps['children'],
-): children is (state: SelectableItemState) => React.ReactNode {
-  return typeof children === 'function';
-}
-
-/***
- * Adds selection behavior to arbitrary child content via render props.
- *
- 
- */
-export function SelectableItem({
-  id,
-  trigger,
-  disabled = false,
-  interactionPolicy,
-  children,
-}: SelectableItemProps) {
-  const selection = useSelection();
-  const resolvedTrigger = resolveTrigger(trigger);
-  const resolvedDisabled = selection.disabled || disabled;
-  const selected = selection.isSelected(id);
-
-  const select = React.useCallback(() => {
-    if (resolvedDisabled) return;
-    if (interactionPolicy === 'passive') return;
-    selection.select(id);
-  }, [id, resolvedDisabled, interactionPolicy, selection]);
-
-  const toggle = React.useCallback(() => {
-    if (resolvedDisabled) return;
-    if (interactionPolicy === 'passive') return;
-    selection.toggle(id);
-  }, [id, resolvedDisabled, interactionPolicy, selection]);
-
-  const clear = React.useCallback(() => {
-    if (selection.disabled) return;
-    if (interactionPolicy === 'passive') return;
-    selection.clear();
-  }, [interactionPolicy, selection]);
-
-  const itemState = React.useMemo<SelectableItemState>(() => {
-    return {
-      id,
-      selected,
-      disabled: resolvedDisabled,
-      mode: selection.mode,
-      select,
-      toggle,
-      clear,
-    };
-  }, [clear, id, resolvedDisabled, select, selected, selection.mode, toggle]);
-
-  // IMPORTANT:
-  // Do not pass `children` directly into Pressable. Pressable also supports function children,
-  // but its function signature receives interaction state, not SelectableItemState.
-  const content = isRenderProp(children) ? children(itemState) : children;
-
-  if (resolvedTrigger === 'manual') {
-    return <>{content}</>;
-  }
-
-  const handlePress = (event: GestureResponderEvent) => {
-    event.stopPropagation();
-    if (resolvedDisabled) return;
-    if (interactionPolicy === 'passive') return;
-    if (selection.mode === 'single') {
-      selection.select(id);
-      return;
-    }
-
-    selection.toggle(id);
-  };
-
-  const handleLongPress = (event: GestureResponderEvent) => {
-    event.stopPropagation();
-    if (resolvedDisabled) return;
-    if (interactionPolicy === 'passive') return;
-    if (selection.mode === 'single') {
-      selection.select(id);
-      return;
-    }
-
-    selection.toggle(id);
-  };
-
-  return (
-    <Pressable
-      interactionPolicy={interactionPolicy}
-      accessibilityRole="button"
-      accessibilityState={{ disabled: resolvedDisabled, selected }}
-      disabled={resolvedDisabled}
-      onLongPress={resolvedTrigger === 'longPress' ? handleLongPress : undefined}
-      onPress={resolvedTrigger === 'press' ? handlePress : undefined}
-    >
-      {content}
-    </Pressable>
-  );
-}

package/src/patterns/selection/SelectionProvider.tsx

@@ -1,112 +0,0 @@
-import React from 'react';
-
-import { areIdsEqual, clearIds, normalizeIds, selectId, toggleId } from './resolveSelectionNextIds';
-import type { SelectionMode, SelectionProviderProps, UseSelectionResult } from './types';
-
-const MISSING_CONTEXT_MESSAGE =
-  'ZORA selection context is missing. Wrap this tree in <SelectionProvider>.';
-
-type SelectionContextValue = UseSelectionResult;
-
-const SelectionContext = React.createContext<SelectionContextValue | null>(null);
-
-/*** Resolve the effective selection mode. */
-function resolveMode(mode: SelectionMode | undefined): SelectionMode {
-  return mode ?? 'single';
-}
-
-/*** Resolve the effective disabled state. */
-function resolveDisabled(disabled: boolean | undefined): boolean {
-  return disabled ?? false;
-}
-
-/***
- * Accesses selection state provided by `SelectionProvider`.
- */
-export function useSelection(): UseSelectionResult {
-  const value = React.use(SelectionContext);
-  if (!value) {
-    throw new Error(MISSING_CONTEXT_MESSAGE);
-  }
-
-  return value;
-}
-
-/***
- * Provides selection state for building selectable lists and grids.
- */
-export function SelectionProvider({
-  children,
-  selectedIds,
-  defaultSelectedIds,
-  mode,
-  disabled,
-  onSelectionChange,
-  interactionPolicy,
-}: SelectionProviderProps) {
-  const resolvedMode = resolveMode(mode);
-  const resolvedDisabled = resolveDisabled(disabled);
-  const isControlled = selectedIds !== undefined;
-
-  const [uncontrolledIds, setUncontrolledIds] = React.useState<readonly string[]>(
-    defaultSelectedIds ?? [],
-  );
-
-  const rawIds = isControlled ? selectedIds : uncontrolledIds;
-  const currentNormalizedIds = normalizeIds(rawIds, resolvedMode);
-
-  const selectedIdSet = React.useMemo(() => new Set(currentNormalizedIds), [currentNormalizedIds]);
-
-  const commitSelectionChange = React.useCallback(
-    (nextNormalizedIds: readonly string[]) => {
-      if (resolvedDisabled) return;
-      if (interactionPolicy === 'passive') return;
-      if (areIdsEqual(nextNormalizedIds, currentNormalizedIds)) return;
-
-      onSelectionChange?.(nextNormalizedIds);
-
-      if (!isControlled) {
-        setUncontrolledIds(nextNormalizedIds);
-      }
-    },
-    [currentNormalizedIds, interactionPolicy, isControlled, onSelectionChange, resolvedDisabled],
-  );
-
-  const clear = React.useCallback(() => {
-    commitSelectionChange(normalizeIds(clearIds(), resolvedMode));
-  }, [commitSelectionChange, resolvedMode]);
-
-  const select = React.useCallback(
-    (id: string) => {
-      const nextIds = selectId({ mode: resolvedMode, ids: currentNormalizedIds, id });
-      const nextNormalizedIds = normalizeIds(nextIds, resolvedMode);
-      commitSelectionChange(nextNormalizedIds);
-    },
-    [commitSelectionChange, currentNormalizedIds, resolvedMode],
-  );
-
-  const toggle = React.useCallback(
-    (id: string) => {
-      const nextIds = toggleId({ mode: resolvedMode, ids: currentNormalizedIds, id });
-      const nextNormalizedIds = normalizeIds(nextIds, resolvedMode);
-      commitSelectionChange(nextNormalizedIds);
-    },
-    [commitSelectionChange, currentNormalizedIds, resolvedMode],
-  );
-
-  const value = React.useMemo<UseSelectionResult>(() => {
-    return {
-      mode: resolvedMode,
-      disabled: resolvedDisabled,
-      selectedIds: currentNormalizedIds,
-      selectedCount: currentNormalizedIds.length,
-      hasSelection: currentNormalizedIds.length > 0,
-      isSelected: (id: string) => selectedIdSet.has(id),
-      select,
-      toggle,
-      clear,
-    };
-  }, [clear, currentNormalizedIds, resolvedDisabled, resolvedMode, select, selectedIdSet, toggle]);
-
-  return <SelectionContext value={value}>{children}</SelectionContext>;
-}

package/src/patterns/selection/index.ts

@@ -1,10 +0,0 @@
-export { SelectableItem } from './SelectableItem';
-export { SelectionProvider, useSelection } from './SelectionProvider';
-export type {
-  SelectableItemProps,
-  SelectableItemState,
-  SelectionMode,
-  SelectionProviderProps,
-  SelectionTrigger,
-  UseSelectionResult,
-} from './types';