@ankhorage/zora 7.0.0 → 8.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/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;
-}

package/src/components/splash-screen/SplashScreen.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-
-import { Box, Center, Stack } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Heading } from '../heading';
-import { Text } from '../text';
-import type { SplashScreenLogoShape, SplashScreenProps } from './types';
-
-interface PlaceholderLogoProps {
-  label: string;
-  shape: SplashScreenLogoShape;
-  size: number;
-}
-
-function resolveLogoRadius(shape: SplashScreenLogoShape): number {
-  switch (shape) {
-    case 'circle':
-      return 9999;
-    case 'square':
-      return 0;
-    case 'rounded':
-    default:
-      return 28;
-  }
-}
-
-function PlaceholderLogo({ label, shape, size }: PlaceholderLogoProps) {
-  const { theme } = useZoraTheme();
-  const radius = resolveLogoRadius(shape);
-
-  return (
-    <Center
-      accessibilityLabel={label}
-      bg={theme.semantics.action.primary.base}
-      height={size}
-      width={size}
-      style={{ borderRadius: radius }}
-    >
-      <Text emphasis="inverse" variant="eyebrow" weight="bold">
-        {label.slice(0, 2).toUpperCase()}
-      </Text>
-    </Center>
-  );
-}
-
-function SplashScreenInner({
-  themeId: _themeId,
-  mode: _mode,
-  logo,
-  title,
-  subtitle,
-  children,
-  minHeight = '100%',
-  backgroundColor,
-  logoSize = 96,
-  logoLabel = 'ZORA',
-  logoShape = 'rounded',
-  testID,
-}: SplashScreenProps) {
-  const { theme } = useZoraTheme();
-  const background = backgroundColor ?? theme.semantics.neutral.surface;
-  const renderedLogo = logo ?? (
-    <PlaceholderLogo label={logoLabel} shape={logoShape} size={logoSize} />
-  );
-
-  return (
-    <Center bg={background} minHeight={minHeight} p="xl" testID={testID} width="100%">
-      <Stack align="center" gap="l" style={{ maxWidth: 360 }}>
-        {renderedLogo}
-        {title || subtitle ? (
-          <Stack align="center" gap="xs">
-            {title ? (
-              <Heading align="center" level={1} size="h1">
-                {title}
-              </Heading>
-            ) : null}
-            {subtitle ? (
-              <Text align="center" emphasis="muted" variant="bodySmall">
-                {subtitle}
-              </Text>
-            ) : null}
-          </Stack>
-        ) : null}
-        {children ? <Box width="100%">{children}</Box> : null}
-      </Stack>
-    </Center>
-  );
-}
-
-/***
- * Branded launch/loading surface for previews, web fallbacks, and app bootstrap states.
- *
- * `SplashScreen` is a React-rendered component. It intentionally does not manage
- * Expo's native splash screen lifecycle or replace generated `expo-splash-screen`
- * configuration.
- */
-export const SplashScreen = withZoraThemeScope(SplashScreenInner);

package/src/components/splash-screen/index.ts

@@ -1,2 +0,0 @@
-export { SplashScreen } from './SplashScreen';
-export type { SplashScreenLogoShape, SplashScreenProps } from './types';

package/src/components/splash-screen/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const splashScreenMeta = {
-  name: 'SplashScreen',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'React-rendered branded loading and preview surface; native splash configuration is generated outside ZORA.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/components/splash-screen/types.ts

@@ -1,18 +0,0 @@
-import type React from 'react';
-
-import type { BoxProps } from '../../foundation';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type SplashScreenLogoShape = 'circle' | 'square' | 'rounded';
-
-export interface SplashScreenProps extends ZoraBaseProps {
-  logo?: React.ReactNode;
-  title?: React.ReactNode;
-  subtitle?: React.ReactNode;
-  children?: React.ReactNode;
-  minHeight?: BoxProps['minHeight'];
-  backgroundColor?: BoxProps['bg'];
-  logoSize?: number;
-  logoLabel?: string;
-  logoShape?: SplashScreenLogoShape;
-}