@ankhorage/zora 7.0.0 → 9.0.0

package/src/components/icon-button/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const iconButtonMeta = {
-  name: 'IconButton',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Icon-only action component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/components/icon-button/types.ts

@@ -1,16 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-
-import type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface IconButtonProps extends ZoraBaseProps {
-  icon: ButtonIconSpec;
-  label: string;
-  variant?: ZoraButtonVariant;
-  color?: ZoraColor;
-  size?: ZoraControlSize;
-  disabled?: boolean;
-  loading?: boolean;
-  onPress?: () => void;
-  testID?: string;
-}

package/src/components/image/Image.tsx

@@ -1,149 +0,0 @@
-import { Image as SurfaceImage, type SurfaceImageSource } from '@ankhorage/surface';
-import React from 'react';
-
-import { Box } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { UploadAsset } from '../../types/upload';
-import { Icon } from '../icon';
-import type { ImageProps } from './types';
-
-/*** Displays an image asset and owns its missing, unrenderable, and failed presentation states. */
-export const Image = withZoraThemeScope(ImageInner);
-
-/*** Renders the resolved image source or the canonical ZORA image placeholder. */
-function ImageInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  source,
-  fallbackSource,
-  alt,
-  accessibilityLabel,
-  width,
-  height,
-  aspectRatio,
-  radius,
-  style,
-  testID,
-  onError,
-  ...props
-}: ImageProps) {
-  const { theme } = useZoraTheme();
-  const resolvedSource = resolveImageSource(source);
-  const sourceKey = resolveImageSourceKey(source);
-  const firstFailureKeyRef = React.useRef<string | null>(null);
-  const [failedSourceKey, setFailedSourceKey] = React.useState<string | null>(null);
-  const showPlaceholder = resolvedSource === null || failedSourceKey === sourceKey;
-  const resolvedAlt = alt ?? (isUploadAsset(source) ? source.alt : undefined);
-  const placeholderLabel = accessibilityLabel ?? resolvedAlt;
-
-  if (showPlaceholder) {
-    return (
-      <Box
-        accessibilityLabel={placeholderLabel}
-        accessibilityRole={placeholderLabel ? 'image' : undefined}
-        accessible={Boolean(placeholderLabel)}
-        bg={theme.semantics.neutral.surface}
-        borderColor={theme.semantics.neutral.divider}
-        borderWidth={1}
-        height={height}
-        overflow="hidden"
-        radius={radius}
-        testID={testID}
-        width={width}
-        style={[
-          {
-            alignItems: 'center',
-            aspectRatio: aspectRatio ?? 1,
-            justifyContent: 'center',
-          },
-          style,
-        ]}
-      >
-        <Icon color={theme.semantics.content.muted} name="image-outline" size={24} />
-      </Box>
-    );
-  }
-
-  return (
-    <SurfaceImage
-      {...props}
-      accessibilityLabel={accessibilityLabel}
-      alt={resolvedAlt}
-      aspectRatio={aspectRatio}
-      fallbackSource={fallbackSource}
-      height={height}
-      onError={(event) => {
-        onError?.(event);
-
-        if (!sourceKey) {
-          return;
-        }
-
-        if (fallbackSource && firstFailureKeyRef.current !== sourceKey) {
-          firstFailureKeyRef.current = sourceKey;
-          return;
-        }
-
-        setFailedSourceKey(sourceKey);
-      }}
-      radius={radius}
-      source={resolvedSource}
-      style={style}
-      testID={testID}
-      width={width}
-    />
-  );
-}
-
-/*** Resolves a generic upload asset into a source understood by the Surface Image primitive. */
-function resolveImageSource(source: ImageProps['source']): SurfaceImageSource | null | undefined {
-  if (!isUploadAsset(source)) {
-    return source;
-  }
-
-  switch (source.kind) {
-    case 'local':
-      return source.uri;
-    case 'url':
-      return source.url;
-    case 'storage':
-      return source.publicUrl ?? null;
-  }
-}
-
-/*** Produces a stable-enough key for tracking image failures across source changes. */
-function resolveImageSourceKey(source: ImageProps['source']): string | null {
-  if (source === null || source === undefined) {
-    return null;
-  }
-
-  if (isUploadAsset(source)) {
-    switch (source.kind) {
-      case 'local':
-        return `local:${source.uri}`;
-      case 'url':
-        return `url:${source.url}`;
-      case 'storage':
-        return `storage:${source.bucket}:${source.path}:${source.publicUrl ?? ''}`;
-    }
-  }
-
-  if (typeof source === 'string' || typeof source === 'number') {
-    return `source:${String(source)}`;
-  }
-
-  if (!Array.isArray(source) && 'uri' in source && typeof source.uri === 'string') {
-    return `source:${source.uri}`;
-  }
-
-  return 'source:opaque';
-}
-
-/*** Identifies the generic ZORA upload asset shape without leaking picker-specific types. */
-function isUploadAsset(source: ImageProps['source']): source is UploadAsset {
-  return (
-    typeof source === 'object' && source !== null && !Array.isArray(source) && 'kind' in source
-  );
-}

package/src/components/image/index.ts

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

package/src/components/image/meta.ts

@@ -1,25 +0,0 @@
-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: {
-    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/components/image/types.ts

@@ -1,11 +0,0 @@
-import type { ImageProps as SurfaceImageProps, SurfaceImageSource } from '@ankhorage/surface';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { UploadAsset } from '../../types/upload';
-
-export type { ImageFit, SurfaceImageSource } from '@ankhorage/surface';
-
-export interface ImageProps
-  extends ZoraBaseProps, Omit<SurfaceImageProps, 'mode' | 'source' | 'themeId'> {
-  source?: SurfaceImageSource | UploadAsset | null;
-}

package/src/components/input/Input.tsx

@@ -1,69 +0,0 @@
-import * as Surface from '@ankhorage/surface';
-import React from 'react';
-
-import { resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { IconButton } from '../icon-button';
-import type { InputProps } from './types';
-
-function InputInner({
-  themeId: _themeId,
-  mode: _mode,
-  size = 'l',
-  leadingIcon,
-  trailingIcon,
-  trailingAction,
-  disabled,
-  readOnly,
-  interactionPolicy,
-  ...props
-}: InputProps) {
-  const { theme } = useZoraTheme();
-  const iconSize = resolveIconSize(size);
-  const iconColor = theme.semantics.content.muted;
-
-  return (
-    <Surface.TextInput
-      {...props}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      leadingAccessory={
-        leadingIcon ? (
-          <Surface.Icon {...leadingIcon} color={iconColor} size={iconSize} />
-        ) : undefined
-      }
-      readOnly={readOnly}
-      size={size}
-      trailingAccessory={
-        trailingAction ? (
-          <IconButton
-            icon={trailingAction.icon}
-            interactionPolicy={interactionPolicy}
-            label={trailingAction.label}
-            disabled={disabled ?? readOnly}
-            variant="ghost"
-            size={size === 'l' ? 'm' : size}
-            color="neutral"
-            onPress={trailingAction.onPress}
-          />
-        ) : trailingIcon ? (
-          <Surface.Icon {...trailingIcon} color={iconColor} size={iconSize} />
-        ) : undefined
-      }
-    />
-  );
-}
-
-/***
- * Theme-aware text input with semantic sizing and optional leading/trailing icon slots.
- *
- * Use `Input` for single-line form controls that need ZORA styling, disabled/read-only
- * handling, and accessible trailing actions without dropping into Surface directly.
- *
- * @example Search input
- * ```tsx
- * <Input placeholder="Search" leadingIcon={{ name: 'search-outline' }} />
- * ```
- */
-export const Input = withZoraThemeScope(InputInner);

package/src/components/input/index.ts

@@ -1,2 +0,0 @@
-export { Input } from './Input';
-export type { InputProps, InputTrailingAction } from './types';

package/src/components/input/meta.ts

@@ -1,46 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const inputMeta = {
-  name: 'Input',
-  category: 'component',
-  directManifestNode: true,
-  allowedChildren: [],
-  blueprint: {
-    label: 'Input',
-    defaultProps: {
-      placeholder: 'Enter text…',
-      value: '',
-    },
-  },
-  props: {
-    placeholder: {
-      type: 'string',
-      category: 'Content',
-      label: 'Placeholder',
-    },
-    value: {
-      type: 'string',
-      category: 'Content',
-      label: 'Value',
-      default: '',
-    },
-    size: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Size',
-      enum: ['s', 'm', 'l'],
-    },
-    disabled: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Disabled',
-      default: false,
-    },
-    readOnly: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Read-only',
-      default: false,
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/components/input/types.ts

@@ -1,33 +0,0 @@
-import type * as Surface from '@ankhorage/surface';
-
-import type { ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface InputTrailingAction {
-  icon: Surface.ButtonIconSpec;
-  label: string;
-  onPress: () => void;
-}
-
-type InputTrailingProps =
-  | {
-      trailingIcon?: Surface.ButtonIconSpec;
-      trailingAction?: never;
-    }
-  | {
-      trailingIcon?: never;
-      trailingAction?: InputTrailingAction;
-    };
-
-interface InputBaseProps
-  extends
-    ZoraBaseProps,
-    Omit<
-      Surface.TextInputProps,
-      'leadingAccessory' | 'size' | 'trailingAccessory' | 'mode' | 'themeId'
-    > {
-  size?: ZoraControlSize;
-  leadingIcon?: Surface.ButtonIconSpec;
-}
-
-export type InputProps = InputBaseProps & InputTrailingProps;

package/src/components/media-card/MediaCard.tsx

@@ -1,125 +0,0 @@
-import React from 'react';
-import { Image } from 'react-native';
-
-import { Box, Stack } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Card } from '../card';
-import { Heading } from '../heading';
-import { Text } from '../text';
-import type { MediaCardProps } from './types';
-
-function resolveImageAspectRatio(
-  imageAspectRatio: NonNullable<MediaCardProps['imageAspectRatio']>,
-) {
-  if (!Number.isFinite(imageAspectRatio) || imageAspectRatio <= 0) {
-    return 16 / 9;
-  }
-
-  return imageAspectRatio;
-}
-
-function MediaCardInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy,
-  testID,
-  imageSource,
-  imageLabel,
-  image,
-  imageAspectRatio = 16 / 9,
-  title,
-  description,
-  eyebrow,
-  badges,
-  actions,
-  footer,
-  children,
-  tone = 'default',
-  compact = false,
-  onPress,
-}: MediaCardProps) {
-  const { theme } = useZoraTheme();
-  const gap = compact ? 's' : 'm';
-  const isInteractive = Boolean(onPress) && !actions;
-  const resolvedAspectRatio = resolveImageAspectRatio(imageAspectRatio);
-
-  const renderImage = () => {
-    if (image) {
-      return (
-        <Box radius="m" style={{ overflow: 'hidden' }}>
-          {image}
-        </Box>
-      );
-    }
-
-    if (!imageSource) {
-      return null;
-    }
-
-    return (
-      <Box bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
-        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
-          <Image
-            accessibilityLabel={imageLabel}
-            source={imageSource}
-            style={{ height: '100%', width: '100%' }}
-          />
-        </Box>
-      </Box>
-    );
-  };
-
-  const hasHeader = [eyebrow, title, description, badges, actions].some((item) => item != null);
-
-  return (
-    <Card
-      compact={compact}
-      interactionPolicy={interactionPolicy}
-      onPress={isInteractive ? onPress : undefined}
-      testID={testID}
-      tone={tone}
-    >
-      <Stack gap={gap}>
-        {renderImage()}
-
-        {hasHeader ? (
-          <Stack
-            align={{ base: 'flex-start', md: 'center' }}
-            direction={{ base: 'column', md: 'row' }}
-            gap="m"
-            justify="space-between"
-          >
-            <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
-              <Stack gap="xs">
-                {eyebrow ? (
-                  <Text emphasis="muted" variant="caption" weight="semiBold">
-                    {eyebrow}
-                  </Text>
-                ) : null}
-                <Stack gap="xs">
-                  <Heading level={compact ? 4 : 3}>{title}</Heading>
-                  {badges ? <Box>{badges}</Box> : null}
-                </Stack>
-                {description ? (
-                  <Text emphasis="muted" variant="bodySmall">
-                    {description}
-                  </Text>
-                ) : null}
-              </Stack>
-            </Box>
-            {actions ? <Box>{actions}</Box> : null}
-          </Stack>
-        ) : null}
-
-        {children ? <Box>{children}</Box> : null}
-        {footer ? <Box pt="xs">{footer}</Box> : null}
-      </Stack>
-    </Card>
-  );
-}
-
-/***
- * Card layout with an optional media/header region and structured content slots.
- */
-export const MediaCard = withZoraThemeScope(MediaCardInner);

package/src/components/media-card/index.ts

@@ -1,2 +0,0 @@
-export { MediaCard } from './MediaCard';
-export type { MediaCardImageProps, MediaCardProps } from './types';

package/src/components/media-card/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const mediaCardMeta = {
-  name: 'MediaCard',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Specialized component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/components/media-card/types.ts

@@ -1,42 +0,0 @@
-import type React from 'react';
-import type { ImageSourcePropType } from 'react-native';
-
-import type { ZoraCardTone } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-interface MediaCardWithImageSource {
-  imageSource: ImageSourcePropType;
-  imageLabel?: string;
-  image?: never;
-}
-
-interface MediaCardWithImageSlot {
-  image: React.ReactNode;
-  imageSource?: never;
-  imageLabel?: never;
-}
-
-interface MediaCardWithoutImage {
-  image?: never;
-  imageSource?: never;
-  imageLabel?: never;
-}
-
-export type MediaCardImageProps =
-  MediaCardWithImageSource | MediaCardWithImageSlot | MediaCardWithoutImage;
-
-interface MediaCardBaseProps extends ZoraBaseProps {
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  eyebrow?: React.ReactNode;
-  badges?: React.ReactNode;
-  actions?: React.ReactNode;
-  footer?: React.ReactNode;
-  children?: React.ReactNode;
-  tone?: ZoraCardTone;
-  compact?: boolean;
-  onPress?: () => void;
-  imageAspectRatio?: number;
-}
-
-export type MediaCardProps = MediaCardBaseProps & MediaCardImageProps;

package/src/components/metric-card/MetricCard.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-
-import { Box, Inline, Stack } from '../../foundation';
-import { resolveBadgeRecipe, resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Badge } from '../badge';
-import { Card } from '../card';
-import { Heading } from '../heading';
-import { Icon } from '../icon';
-import { Text } from '../text';
-import type { MetricCardProps } from './types';
-
-function MetricCardInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy,
-  testID,
-  label,
-  value,
-  description,
-  icon,
-  delta,
-  deltaColor = 'neutral',
-  actions,
-  tone = 'default',
-  compact = false,
-  onPress,
-}: MetricCardProps) {
-  const { theme } = useZoraTheme();
-  const isInteractive = Boolean(onPress) && !actions;
-
-  const badgeRecipe = resolveBadgeRecipe({ color: deltaColor, variant: 'soft', size: 's' });
-  const iconColor = theme.semantics.content.muted;
-
-  return (
-    <Card
-      compact={compact}
-      interactionPolicy={interactionPolicy}
-      onPress={isInteractive ? onPress : undefined}
-      testID={testID}
-      tone={tone}
-    >
-      <Stack gap={compact ? 's' : 'm'}>
-        <Inline align="flex-start" gap="m" justify="space-between">
-          <Stack flex={1} gap="xs">
-            <Inline align="center" gap="xs" wrap="wrap">
-              {icon ? <Icon {...icon} color={iconColor} size={resolveIconSize('s')} /> : null}
-              <Text emphasis="muted" variant="caption" weight="semiBold">
-                {label}
-              </Text>
-              {delta != null ? (
-                <Badge
-                  variant={badgeRecipe.variant}
-                  size={badgeRecipe.size}
-                  color={badgeRecipe.color}
-                >
-                  {delta}
-                </Badge>
-              ) : null}
-            </Inline>
-
-            <Heading level={compact ? 3 : 2}>{value}</Heading>
-
-            {description ? (
-              <Text emphasis="muted" variant="bodySmall">
-                {description}
-              </Text>
-            ) : null}
-          </Stack>
-
-          {actions ? <Box>{actions}</Box> : null}
-        </Inline>
-      </Stack>
-    </Card>
-  );
-}
-
-/***
- * Highlights a key metric with label, value, and optional trend/actions.
- */
-export const MetricCard = withZoraThemeScope(MetricCardInner);

package/src/components/metric-card/index.ts

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

package/src/components/metric-card/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const metricCardMeta = {
-  name: 'MetricCard',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Specialized component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/components/metric-card/types.ts

@@ -1,18 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraCardTone, ZoraColor } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface MetricCardProps extends ZoraBaseProps {
-  label: React.ReactNode;
-  value: React.ReactNode;
-  description?: React.ReactNode;
-  icon?: ButtonIconSpec;
-  delta?: React.ReactNode;
-  deltaColor?: ZoraColor;
-  actions?: React.ReactNode;
-  tone?: ZoraCardTone;
-  compact?: boolean;
-  onPress?: () => void;
-}