@ankhorage/zora 5.0.0 → 7.0.0

package/dist/patterns/image-upload-field/uploadFlow.js

@@ -1,106 +0,0 @@
-function parseAccept(accept) {
-    if (!accept)
-        return [];
-    return accept
-        .split(',')
-        .map((entry) => entry.trim())
-        .filter((entry) => entry.length > 0);
-}
-function matchesAcceptToken({ token, contentType, fileName, }) {
-    const normalizedToken = token.toLowerCase();
-    const normalizedContentType = contentType?.toLowerCase();
-    const normalizedFileName = fileName?.toLowerCase();
-    if (normalizedToken.startsWith('.')) {
-        if (!normalizedFileName)
-            return null;
-        return normalizedFileName.endsWith(normalizedToken);
-    }
-    if (normalizedToken.endsWith('/*')) {
-        if (!normalizedContentType)
-            return null;
-        const prefix = normalizedToken.slice(0, Math.max(0, normalizedToken.length - 1));
-        return normalizedContentType.startsWith(prefix);
-    }
-    if (!normalizedContentType)
-        return null;
-    return normalizedContentType === normalizedToken;
-}
-export function isAccepted({ accept, contentType, fileName, }) {
-    const tokens = parseAccept(accept);
-    if (tokens.length === 0)
-        return true;
-    let hadSignal = false;
-    for (const token of tokens) {
-        const matches = matchesAcceptToken({ token, contentType, fileName });
-        if (matches === null) {
-            continue;
-        }
-        hadSignal = true;
-        if (matches)
-            return true;
-    }
-    // If we cannot validate due to missing metadata, do not block.
-    return !hadSignal;
-}
-function formatBytes(value) {
-    if (!Number.isFinite(value) || value <= 0)
-        return '0 B';
-    const units = ['B', 'KB', 'MB', 'GB'];
-    let size = value;
-    let unitIndex = 0;
-    while (size >= 1024 && unitIndex < units.length - 1) {
-        size /= 1024;
-        unitIndex += 1;
-    }
-    const unit = units.at(unitIndex) ?? 'B';
-    const rounded = unitIndex === 0 ? Math.round(size) : Math.round(size * 10) / 10;
-    return `${rounded} ${unit}`;
-}
-export function formatAcceptHint(accept) {
-    const tokens = parseAccept(accept);
-    if (tokens.length === 0)
-        return null;
-    return `Accepted: ${tokens.join(', ')}`;
-}
-export function formatMaxSizeHint(maxSizeBytes) {
-    if (maxSizeBytes === undefined)
-        return null;
-    if (!Number.isFinite(maxSizeBytes) || maxSizeBytes <= 0)
-        return null;
-    return `Max size: ${formatBytes(maxSizeBytes)}`;
-}
-export function createOptimisticAssetFromPicked(picked) {
-    return {
-        kind: 'url',
-        url: picked.uri,
-        width: picked.width,
-        height: picked.height,
-        contentType: picked.contentType,
-        metadata: {
-            fileName: picked.fileName,
-            sizeBytes: picked.sizeBytes,
-        },
-    };
-}
-export function resolveRenderableUrl(asset) {
-    if (!asset)
-        return null;
-    if (asset.kind === 'url')
-        return asset.url;
-    return asset.publicUrl ?? null;
-}
-export function validatePickedImage({ picked, accept, maxSizeBytes, validatePicked, }) {
-    if (!isAccepted({ accept, contentType: picked.contentType, fileName: picked.fileName })) {
-        return accept ? `File type not accepted. Expected ${accept}.` : 'File type not accepted.';
-    }
-    if (maxSizeBytes !== undefined &&
-        Number.isFinite(maxSizeBytes) &&
-        maxSizeBytes > 0 &&
-        picked.sizeBytes !== undefined &&
-        Number.isFinite(picked.sizeBytes) &&
-        picked.sizeBytes > maxSizeBytes) {
-        return `File is too large (${formatBytes(picked.sizeBytes)}). Max ${formatBytes(maxSizeBytes)}.`;
-    }
-    return validatePicked?.(picked);
-}
-//# sourceMappingURL=uploadFlow.js.map

package/dist/patterns/image-upload-field/uploadFlow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"uploadFlow.js","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/uploadFlow.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ZoraImageAsset } from '../image-preview';\nimport type { ZoraPickedImage } from './types';\n\nfunction parseAccept(accept: string | undefined): readonly string[] {\n  if (!accept) return [];\n\n  return accept\n    .split(',')\n    .map((entry) => entry.trim())\n    .filter((entry) => entry.length > 0);\n}\n\nfunction matchesAcceptToken({\n  token,\n  contentType,\n  fileName,\n}: {\n  token: string;\n  contentType: string | undefined;\n  fileName: string | undefined;\n}): boolean | null {\n  const normalizedToken = token.toLowerCase();\n  const normalizedContentType = contentType?.toLowerCase();\n  const normalizedFileName = fileName?.toLowerCase();\n\n  if (normalizedToken.startsWith('.')) {\n    if (!normalizedFileName) return null;\n    return normalizedFileName.endsWith(normalizedToken);\n  }\n\n  if (normalizedToken.endsWith('/*')) {\n    if (!normalizedContentType) return null;\n    const prefix = normalizedToken.slice(0, Math.max(0, normalizedToken.length - 1));\n    return normalizedContentType.startsWith(prefix);\n  }\n\n  if (!normalizedContentType) return null;\n  return normalizedContentType === normalizedToken;\n}\n\nexport function isAccepted({\n  accept,\n  contentType,\n  fileName,\n}: {\n  accept: string | undefined;\n  contentType: string | undefined;\n  fileName: string | undefined;\n}): boolean {\n  const tokens = parseAccept(accept);\n  if (tokens.length === 0) return true;\n\n  let hadSignal = false;\n\n  for (const token of tokens) {\n    const matches = matchesAcceptToken({ token, contentType, fileName });\n    if (matches === null) {\n      continue;\n    }\n\n    hadSignal = true;\n    if (matches) return true;\n  }\n\n  // If we cannot validate due to missing metadata, do not block.\n  return !hadSignal;\n}\n\nfunction formatBytes(value: number): string {\n  if (!Number.isFinite(value) || value <= 0) return '0 B';\n\n  const units = ['B', 'KB', 'MB', 'GB'] as const;\n  let size = value;\n  let unitIndex = 0;\n\n  while (size >= 1024 && unitIndex < units.length - 1) {\n    size /= 1024;\n    unitIndex += 1;\n  }\n\n  const unit = units.at(unitIndex) ?? 'B';\n  const rounded = unitIndex === 0 ? Math.round(size) : Math.round(size * 10) / 10;\n  return `${rounded} ${unit}`;\n}\n\nexport function formatAcceptHint(accept: string | undefined): string | null {\n  const tokens = parseAccept(accept);\n  if (tokens.length === 0) return null;\n  return `Accepted: ${tokens.join(', ')}`;\n}\n\nexport function formatMaxSizeHint(maxSizeBytes: number | undefined): string | null {\n  if (maxSizeBytes === undefined) return null;\n  if (!Number.isFinite(maxSizeBytes) || maxSizeBytes <= 0) return null;\n  return `Max size: ${formatBytes(maxSizeBytes)}`;\n}\n\nexport function createOptimisticAssetFromPicked(picked: ZoraPickedImage): ZoraImageAsset {\n  return {\n    kind: 'url',\n    url: picked.uri,\n    width: picked.width,\n    height: picked.height,\n    contentType: picked.contentType,\n    metadata: {\n      fileName: picked.fileName,\n      sizeBytes: picked.sizeBytes,\n    },\n  };\n}\n\nexport function resolveRenderableUrl(asset: ZoraImageAsset | null): string | null {\n  if (!asset) return null;\n  if (asset.kind === 'url') return asset.url;\n  return asset.publicUrl ?? null;\n}\n\nexport function validatePickedImage({\n  picked,\n  accept,\n  maxSizeBytes,\n  validatePicked,\n}: {\n  picked: ZoraPickedImage;\n  accept: string | undefined;\n  maxSizeBytes: number | undefined;\n  validatePicked: ((picked: ZoraPickedImage) => string | undefined) | undefined;\n}): string | undefined {\n  if (!isAccepted({ accept, contentType: picked.contentType, fileName: picked.fileName })) {\n    return accept ? `File type not accepted. Expected ${accept}.` : 'File type not accepted.';\n  }\n\n  if (\n    maxSizeBytes !== undefined &&\n    Number.isFinite(maxSizeBytes) &&\n    maxSizeBytes > 0 &&\n    picked.sizeBytes !== undefined &&\n    Number.isFinite(picked.sizeBytes) &&\n    picked.sizeBytes > maxSizeBytes\n  ) {\n    return `File is too large (${formatBytes(picked.sizeBytes)}). Max ${formatBytes(maxSizeBytes)}.`;\n  }\n\n  return validatePicked?.(picked);\n}\n"]}

package/src/components/action-sheet/ActionSheet.tsx

@@ -1,14 +0,0 @@
-import { ActionSheet as SurfaceActionSheet } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ActionSheetProps } from './types';
-
-function ActionSheetInner({ mode: _mode, themeId: _themeId, ...props }: ActionSheetProps) {
-  return <SurfaceActionSheet {...props} />;
-}
-
-/***
- * Presents a modal bottom sheet with a list of actions.
- */
-export const ActionSheet = withZoraThemeScope(ActionSheetInner);

package/src/components/action-sheet/ActionSheetItem.tsx

@@ -1,30 +0,0 @@
-import { ActionSheetItem as SurfaceActionSheetItem } from '@ankhorage/surface';
-import React from 'react';
-
-import { resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Icon } from '../icon';
-import type { ActionSheetItemProps } from './types';
-
-function ActionSheetItemInner({
-  themeId: _themeId,
-  mode: _mode,
-  icon,
-  leading,
-  ...props
-}: ActionSheetItemProps) {
-  const { theme } = useZoraTheme();
-  const resolvedLeading =
-    leading ??
-    (icon ? (
-      <Icon {...icon} color={theme.semantics.content.muted} size={resolveIconSize('s')} />
-    ) : undefined);
-
-  return <SurfaceActionSheetItem {...props} leading={resolvedLeading} />;
-}
-
-/***
- * Renders a single selectable action row within an `ActionSheet`.
- */
-export const ActionSheetItem = withZoraThemeScope(ActionSheetItemInner);

package/src/components/action-sheet/index.ts

@@ -1,3 +0,0 @@
-export { ActionSheet } from './ActionSheet';
-export { ActionSheetItem } from './ActionSheetItem';
-export type { ActionSheetItemProps, ActionSheetProps } from './types';

package/src/components/action-sheet/meta.ts

@@ -1,19 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const actionSheetMeta = {
-  name: 'ActionSheet',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Surface-backed contextual action sheet; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const actionSheetItemMeta = {
-  name: 'ActionSheetItem',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Surface-backed contextual action sheet row; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/components/action-sheet/types.ts

@@ -1,23 +0,0 @@
-import type {
-  ActionSheetItemProps as SurfaceActionSheetItemProps,
-  ActionSheetProps as SurfaceActionSheetProps,
-  ButtonIconSpec,
-} from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraColor } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ActionSheetProps
-  extends ZoraBaseProps, Omit<SurfaceActionSheetProps, 'children' | 'mode' | 'themeId'> {
-  children?: React.ReactNode;
-}
-
-export interface ActionSheetItemProps
-  extends
-    ZoraBaseProps,
-    Omit<SurfaceActionSheetItemProps, 'color' | 'leading' | 'mode' | 'themeId'> {
-  color?: ZoraColor;
-  icon?: ButtonIconSpec;
-  leading?: React.ReactNode;
-}

package/src/patterns/image-preview/ImagePreview.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-
-import { Image } from '../../components/image';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ImagePreviewProps, ZoraImageAsset } from './types';
-
-function resolveRenderableUrl(asset: ZoraImageAsset | null | undefined): string | null {
-  if (!asset) return null;
-
-  if (asset.kind === 'url') {
-    return asset.url;
-  }
-
-  return asset.publicUrl ?? null;
-}
-
-function resolveSafeAspectRatio(value: number | undefined): number {
-  if (!value || !Number.isFinite(value) || value <= 0) {
-    return 1;
-  }
-
-  return value;
-}
-
-function ImagePreviewInner({
-  themeId: _themeId,
-  mode: _mode,
-  testID,
-  asset,
-  aspectRatio,
-  fit = 'cover',
-  emptyTitle = 'No image',
-  emptyDescription = 'Select an image to preview it here.',
-  interactionPolicy: _interactionPolicy,
-}: ImagePreviewProps) {
-  const { theme } = useZoraTheme();
-  const renderableUrl = resolveRenderableUrl(asset);
-  const resolvedAspectRatio = resolveSafeAspectRatio(aspectRatio);
-
-  return (
-    <Box
-      bg={theme.semantics.neutral.surface}
-      borderColor={theme.semantics.neutral.divider}
-      borderWidth={1}
-      radius="l"
-      testID={testID}
-      style={{ overflow: 'hidden' }}
-    >
-      {renderableUrl ? (
-        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
-          <Image
-            alt={asset?.alt}
-            fit={fit}
-            source={renderableUrl}
-            style={{ height: '100%', width: '100%' }}
-          />
-        </Box>
-      ) : (
-        <Box p="l">
-          <Stack gap="xs">
-            <Text variant="label" weight="semiBold">
-              {emptyTitle}
-            </Text>
-            <Text emphasis="muted" variant="bodySmall">
-              {emptyDescription}
-            </Text>
-          </Stack>
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-/***
- * Preview pattern for showing an image with optional metadata and actions.
- *
- 
- */
-export const ImagePreview = withZoraThemeScope(ImagePreviewInner);

package/src/patterns/image-preview/index.ts

@@ -1,2 +0,0 @@
-export { ImagePreview } from './ImagePreview';
-export type { ImagePreviewProps, ZoraImageAsset, ZoraImageMetadata } from './types';

package/src/patterns/image-preview/meta.ts

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

package/src/patterns/image-preview/types.ts

@@ -1,41 +0,0 @@
-import type React from 'react';
-
-import type { ImageFit } from '../../components/image';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ZoraImageMetadata {
-  fileName?: string;
-  sizeBytes?: number;
-  createdAt?: string;
-}
-
-export type ZoraImageAsset =
-  | {
-      kind: 'url';
-      url: string;
-      alt?: string;
-      width?: number;
-      height?: number;
-      contentType?: string;
-      metadata?: ZoraImageMetadata;
-    }
-  | {
-      kind: 'storage';
-      storageId?: string;
-      bucket: string;
-      path: string;
-      publicUrl?: string;
-      alt?: string;
-      width?: number;
-      height?: number;
-      contentType?: string;
-      metadata?: ZoraImageMetadata;
-    };
-
-export interface ImagePreviewProps extends ZoraBaseProps {
-  asset?: ZoraImageAsset | null;
-  aspectRatio?: number;
-  fit?: ImageFit;
-  emptyTitle?: React.ReactNode;
-  emptyDescription?: React.ReactNode;
-}

package/src/patterns/image-upload-field/ImageUploadField.tsx

@@ -1,319 +0,0 @@
-import React from 'react';
-
-import { Button } from '../../components/button';
-import { Modal } from '../../components/modal';
-import { Progress } from '../../components/progress';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { FormField } from '../form-field';
-import { ImagePreview } from '../image-preview';
-import type { ImageUploadFieldProps } from './types';
-import {
-  createOptimisticAssetFromPicked,
-  formatAcceptHint,
-  formatMaxSizeHint,
-  resolveRenderableUrl,
-  validatePickedImage,
-} from './uploadFlow';
-
-function clampProgress(value: number | null): number | null {
-  if (value === null) return null;
-  if (!Number.isFinite(value)) return null;
-  return Math.max(0, Math.min(1, value));
-}
-
-function formatUnknownError(error: unknown): string {
-  if (error instanceof Error && error.message) return error.message;
-  if (typeof error === 'string' && error.trim().length > 0) return error;
-  return 'Something went wrong.';
-}
-
-function ImageUploadFieldInner({
-  themeId: _themeId,
-  mode: _mode,
-  testID,
-  value,
-  onChange,
-  label,
-  description,
-  helperText,
-  errorText,
-  required,
-  disabled = false,
-  readOnly = false,
-  accept,
-  maxSizeBytes,
-  validatePicked,
-  onPick,
-  onUpload,
-  onRemove,
-  aspectRatio = 1,
-  previewTitle = 'Image preview',
-  previewDescription,
-  interactionPolicy,
-}: ImageUploadFieldProps) {
-  const passive = interactionPolicy === 'passive';
-  const [internalError, setInternalError] = React.useState<string | undefined>(undefined);
-  const [uploading, setUploading] = React.useState(false);
-  const [removing, setRemoving] = React.useState(false);
-  const [progress, setProgress] = React.useState<number | null>(null);
-  const [previewOpen, setPreviewOpen] = React.useState(false);
-  const isMountedRef = React.useRef(true);
-
-  React.useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  const renderableUrl = resolveRenderableUrl(value);
-  const isRenderable = renderableUrl !== null;
-  const actionsDisabled = disabled || readOnly;
-
-  const effectiveError = errorText ?? internalError;
-  const invalid = Boolean(effectiveError);
-
-  const acceptHint = formatAcceptHint(accept);
-  const maxSizeHint = formatMaxSizeHint(maxSizeBytes);
-
-  const setProgressSafe = React.useCallback((next: number | null) => {
-    if (!isMountedRef.current) return;
-    setProgress(clampProgress(next));
-  }, []);
-
-  const clearTransientState = React.useCallback(() => {
-    if (!isMountedRef.current) return;
-    setUploading(false);
-    setRemoving(false);
-    setProgress(null);
-  }, []);
-
-  const handleReplace = React.useCallback(async () => {
-    if (passive || actionsDisabled || uploading || removing) return;
-
-    setInternalError(undefined);
-    let picked;
-    try {
-      picked = await onPick();
-    } catch (error) {
-      if (!isMountedRef.current) return;
-      setInternalError(formatUnknownError(error));
-      return;
-    }
-    if (!picked) return;
-
-    const validationError = validatePickedImage({
-      picked,
-      accept,
-      maxSizeBytes,
-      validatePicked,
-    });
-
-    if (validationError) {
-      setInternalError(validationError);
-      return;
-    }
-
-    if (!onUpload) {
-      onChange(createOptimisticAssetFromPicked(picked));
-      return;
-    }
-
-    const optimisticAsset = createOptimisticAssetFromPicked(picked);
-    onChange(optimisticAsset);
-    setUploading(true);
-    setProgressSafe(0);
-
-    try {
-      const uploaded = await onUpload(picked, { setProgress: setProgressSafe });
-      if (!isMountedRef.current) return;
-      onChange(uploaded);
-      setInternalError(undefined);
-      clearTransientState();
-    } catch (error) {
-      if (!isMountedRef.current) return;
-      setInternalError(formatUnknownError(error));
-      setUploading(false);
-      setProgress(null);
-    }
-  }, [
-    accept,
-    actionsDisabled,
-    clearTransientState,
-    maxSizeBytes,
-    onChange,
-    onPick,
-    onUpload,
-    passive,
-    removing,
-    setProgressSafe,
-    uploading,
-    validatePicked,
-  ]);
-
-  const handleRemove = React.useCallback(async () => {
-    if (passive || actionsDisabled || uploading || removing) return;
-    if (!value) {
-      onChange(null);
-      return;
-    }
-
-    setInternalError(undefined);
-
-    if (!onRemove) {
-      onChange(null);
-      return;
-    }
-
-    setRemoving(true);
-    try {
-      await onRemove(value);
-      if (!isMountedRef.current) return;
-      onChange(null);
-      setRemoving(false);
-    } catch (error) {
-      if (!isMountedRef.current) return;
-      setInternalError(formatUnknownError(error));
-      setRemoving(false);
-    }
-  }, [actionsDisabled, onChange, onRemove, passive, removing, uploading, value]);
-
-  const handlePreview = React.useCallback(() => {
-    if (passive || !isRenderable) return;
-    setPreviewOpen(true);
-  }, [isRenderable, passive]);
-
-  const closePreview = React.useCallback(() => {
-    if (passive) return;
-    setPreviewOpen(false);
-  }, [passive]);
-
-  return (
-    <>
-      <FormField
-        description={description}
-        disabled={disabled}
-        errorText={effectiveError}
-        helperText={helperText}
-        interactionPolicy={interactionPolicy}
-        invalid={invalid}
-        label={label}
-        readOnly={readOnly}
-        required={required}
-        testID={testID}
-      >
-        <Stack gap="m">
-          <ImagePreview
-            aspectRatio={aspectRatio}
-            asset={value}
-            emptyDescription={actionsDisabled ? 'No image available.' : undefined}
-          />
-
-          {acceptHint || maxSizeHint ? (
-            <Stack gap="xs">
-              {acceptHint ? (
-                <Text emphasis="muted" variant="caption">
-                  {acceptHint}
-                </Text>
-              ) : null}
-              {maxSizeHint ? (
-                <Text emphasis="muted" variant="caption">
-                  {maxSizeHint}
-                </Text>
-              ) : null}
-            </Stack>
-          ) : null}
-
-          {uploading ? (
-            <Stack gap="xs">
-              <Text emphasis="muted" variant="caption">
-                Uploading…
-              </Text>
-              {progress !== null ? <Progress max={1} value={progress} /> : null}
-            </Stack>
-          ) : null}
-
-          <Stack direction={{ base: 'column', md: 'row' }} gap="s">
-            <Button
-              disabled={actionsDisabled || uploading || removing}
-              interactionPolicy={interactionPolicy}
-              onPress={() => {
-                void handleReplace();
-              }}
-            >
-              {value ? 'Replace image' : 'Select image'}
-            </Button>
-
-            {value ? (
-              <Button
-                disabled={actionsDisabled || uploading || removing}
-                variant="outline"
-                loading={removing}
-                color="danger"
-                interactionPolicy={interactionPolicy}
-                onPress={() => {
-                  void handleRemove();
-                }}
-              >
-                Remove
-              </Button>
-            ) : null}
-
-            {isRenderable ? (
-              <Button
-                disabled={false}
-                interactionPolicy={interactionPolicy}
-                variant="soft"
-                color="neutral"
-                onPress={handlePreview}
-              >
-                Preview
-              </Button>
-            ) : null}
-          </Stack>
-
-          {!isRenderable && value?.kind === 'storage' && value.publicUrl === undefined ? (
-            <Box>
-              <Text emphasis="muted" variant="caption">
-                This image is stored, but no preview URL is available yet.
-              </Text>
-            </Box>
-          ) : null}
-        </Stack>
-      </FormField>
-
-      {isRenderable ? (
-        <Modal
-          closeOnBackdrop
-          description={previewDescription}
-          interactionPolicy={interactionPolicy}
-          onDismiss={closePreview}
-          title={previewTitle}
-          visible={previewOpen}
-        >
-          <Stack gap="m">
-            <ImagePreview asset={value} aspectRatio={aspectRatio} />
-            <Stack direction="row" justify="flex-end">
-              <Button
-                interactionPolicy={interactionPolicy}
-                variant="soft"
-                color="neutral"
-                onPress={closePreview}
-              >
-                Close
-              </Button>
-            </Stack>
-          </Stack>
-        </Modal>
-      ) : null}
-    </>
-  );
-}
-
-/***
- * Form field pattern for picking, previewing, and uploading an image.
- *
- 
- */
-export const ImageUploadField = withZoraThemeScope(ImageUploadFieldInner);

package/src/patterns/image-upload-field/index.ts

@@ -1,2 +0,0 @@
-export { ImageUploadField } from './ImageUploadField';
-export type { ImageUploadFieldProps, ImageUploadProgressContext, ZoraPickedImage } from './types';