@ankhorage/zora 6.0.0 → 7.0.0

package/src/features/uploader/application/use-cases/validateUploadAsset.ts

@@ -0,0 +1,111 @@
+import type { ValidateUploadAssetInput } from '../../../../types/upload';
+
+/*** Validates a picked upload asset against MIME, extension, size, and caller rules. */
+export function validateUploadAsset({
+  asset,
+  accept,
+  maxSizeBytes,
+  validate,
+}: ValidateUploadAssetInput): string | undefined {
+  if (!isAccepted(asset.contentType, asset.fileName, accept)) {
+    return accept ? `File type not accepted. Expected ${accept}.` : 'File type not accepted.';
+  }
+
+  if (
+    maxSizeBytes !== undefined &&
+    Number.isFinite(maxSizeBytes) &&
+    maxSizeBytes > 0 &&
+    asset.sizeBytes !== undefined &&
+    Number.isFinite(asset.sizeBytes) &&
+    asset.sizeBytes > maxSizeBytes
+  ) {
+    return `File is too large (${formatBytes(asset.sizeBytes)}). Max ${formatBytes(maxSizeBytes)}.`;
+  }
+
+  return validate?.(asset);
+}
+
+/*** Returns whether available file metadata satisfies at least one accept token. */
+function isAccepted(
+  contentType: string | undefined,
+  fileName: string | undefined,
+  accept: string | undefined,
+): boolean {
+  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;
+    }
+  }
+
+  return !hadSignal;
+}
+
+/*** Matches one MIME or extension accept token against available file metadata. */
+function matchesAcceptToken(
+  token: string,
+  contentType: string | undefined,
+  fileName: string | undefined,
+): boolean | null {
+  const normalizedToken = token.toLowerCase();
+  const normalizedContentType = contentType?.toLowerCase();
+  const normalizedFileName = fileName?.toLowerCase();
+
+  if (normalizedToken.startsWith('.')) {
+    return normalizedFileName ? normalizedFileName.endsWith(normalizedToken) : null;
+  }
+
+  if (normalizedToken.endsWith('/*')) {
+    if (!normalizedContentType) {
+      return null;
+    }
+
+    return normalizedContentType.startsWith(normalizedToken.slice(0, -1));
+  }
+
+  return normalizedContentType ? normalizedContentType === normalizedToken : null;
+}
+
+/*** Parses a browser-style accept string into normalized non-empty tokens. */
+function parseAccept(accept: string | undefined): readonly string[] {
+  if (!accept) {
+    return [];
+  }
+
+  return accept
+    .split(',')
+    .map((token) => token.trim())
+    .filter((token) => token.length > 0);
+}
+
+/*** Formats a byte count for concise upload validation feedback. */
+function formatBytes(value: number): string {
+  if (!Number.isFinite(value) || value <= 0) {
+    return '0 B';
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB'] as const;
+  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}`;
+}

package/src/features/uploader/composition/createUploadPicker.ts

@@ -0,0 +1,14 @@
+import { pickDocumentOrFileAsync } from '../adapters/outbound/pickDocumentOrFileAsync';
+import { pickImageOrVideoAsync } from '../adapters/outbound/pickImageOrVideoAsync';
+import type { UploadPickerPort } from '../application/ports/outbound/UploadPickerPort';
+import { pickUploadAssetAsync } from '../application/use-cases/pickUploadAssetAsync';
+
+/*** Wires the Expo picker adapters into the generic upload picker use case. */
+export function createUploadPicker(): UploadPickerPort {
+  const imageOrVideoPicker: UploadPickerPort = { pickAsync: pickImageOrVideoAsync };
+  const documentOrFilePicker: UploadPickerPort = { pickAsync: pickDocumentOrFileAsync };
+
+  return {
+    pickAsync: (input) => pickUploadAssetAsync(input, imageOrVideoPicker, documentOrFilePicker),
+  };
+}

package/src/features/uploader/meta.ts

@@ -0,0 +1,11 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const uploaderMeta = {
+  name: 'Uploader',
+  category: 'pattern',
+  description: 'Picks and manages one image, video, document, or generic file upload.',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Upload transport callbacks remain runtime-owned and are not serialized into AppManifest.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/features/uploader/public.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test } from 'bun:test';
+
+describe('ZORA Uploader public contract', () => {
+  test('publishes the generic uploader through root and explicit subpath APIs', async () => {
+    const packageJson = (await Bun.file('package.json').json()) as {
+      dependencies: Readonly<Record<string, string>>;
+      exports: Readonly<Record<string, unknown>>;
+    };
+    const [rootSource, publicSource] = await Promise.all([
+      Bun.file('src/index.ts').text(),
+      Bun.file('src/features/uploader/public.ts').text(),
+    ]);
+
+    expect(packageJson.exports['./uploader']).toBeDefined();
+    expect(packageJson.dependencies['expo-image-picker']).toMatch(/^~57\./u);
+    expect(packageJson.dependencies['expo-document-picker']).toMatch(/^~57\./u);
+    expect(rootSource).toContain("from './features/uploader/public'");
+    expect(publicSource).toContain('export { Uploader }');
+    expect(publicSource).toContain('export { validateUploadAsset }');
+  });
+
+  test('removes the superseded image preview and upload field APIs', async () => {
+    const [rootSource, registrySource, metadataSource] = await Promise.all([
+      Bun.file('src/index.ts').text(),
+      Bun.file('src/registry.ts').text(),
+      Bun.file('src/metadata/componentMeta.ts').text(),
+    ]);
+    const publicSurface = `${rootSource}\n${registrySource}\n${metadataSource}`;
+
+    expect(publicSurface).not.toContain('ImagePreview');
+    expect(publicSurface).not.toContain('ImageUploadField');
+    expect(publicSurface).toContain('Uploader');
+  });
+});

package/src/features/uploader/public.ts

@@ -0,0 +1,10 @@
+export type {
+  UploadAsset,
+  UploadAssetBase,
+  UploaderProps,
+  UploadProgressContext,
+  UploadType,
+  ValidateUploadAssetInput,
+} from '../../types/upload';
+export { Uploader } from './adapters/inbound/Uploader';
+export { validateUploadAsset } from './application/use-cases/validateUploadAsset';

package/src/index.ts

@@ -146,6 +146,15 @@ export type { ToolbarActionProps, ToolbarPosition, ToolbarProps } from './compon
 export { Toolbar, ToolbarAction } from './components/toolbar';
 export { ZORA_CORE_PLUGIN } from './corePlugin';
 export { ZORA_CORE_PLUGIN_METADATA } from './corePluginMetadata';
+export type {
+  UploadAsset,
+  UploadAssetBase,
+  UploaderProps,
+  UploadProgressContext,
+  UploadType,
+  ValidateUploadAssetInput,
+} from './features/uploader/public';
+export { Uploader, validateUploadAsset } from './features/uploader/public';
 export type {
   BoxProps,
   CenterProps,
@@ -284,18 +293,6 @@ export type { FilterBarProps } from './patterns/filter-bar';
 export { FilterBar } from './patterns/filter-bar';
 export type { HeroAction, HeroAlign, HeroLayout, HeroProps, HeroTone } from './patterns/hero';
 export { Hero } from './patterns/hero';
-export type {
-  ImagePreviewProps,
-  ZoraImageAsset,
-  ZoraImageMetadata,
-} from './patterns/image-preview';
-export { ImagePreview } from './patterns/image-preview';
-export type {
-  ImageUploadFieldProps,
-  ImageUploadProgressContext,
-  ZoraPickedImage,
-} from './patterns/image-upload-field';
-export { ImageUploadField } from './patterns/image-upload-field';
 export type { InspectorFieldProps } from './patterns/inspector-field';
 export { InspectorField } from './patterns/inspector-field';
 export type {

package/src/metadata/componentMeta.ts

@@ -41,6 +41,7 @@ import { textareaMeta } from '../components/textarea/meta';
 import { timePickerMeta } from '../components/time-picker/meta';
 import { toastMeta, toastProviderMeta } from '../components/toast/meta';
 import { toolbarActionMeta, toolbarMeta } from '../components/toolbar/meta';
+import { uploaderMeta } from '../features/uploader/meta';
 import { foundationMetas } from '../foundation/meta';
 import { appShellMeta } from '../layout/app-shell/meta';
 import { screenMeta } from '../layout/screen/meta';
@@ -64,8 +65,6 @@ import { disclosureSectionMeta } from '../patterns/disclosure-section/meta';
 import { emptyStateMeta } from '../patterns/empty-state/meta';
 import { filterBarMeta } from '../patterns/filter-bar/meta';
 import { heroMeta } from '../patterns/hero/meta';
-import { imagePreviewMeta } from '../patterns/image-preview/meta';
-import { imageUploadFieldMeta } from '../patterns/image-upload-field/meta';
 import { inspectorFieldMeta } from '../patterns/inspector-field/meta';
 import { listMeta, listRowMeta, listSectionMeta } from '../patterns/list/meta';
 import { messageBubbleMeta } from '../patterns/message-bubble/meta';
@@ -143,6 +142,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   ToastProvider: toastProviderMeta,
   Toolbar: toolbarMeta,
   ToolbarAction: toolbarActionMeta,
+  Uploader: uploaderMeta,
   ThemeModeToggle: themeModeToggleMeta,
   AppShell: appShellMeta,
   Screen: screenMeta,
@@ -164,8 +164,6 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   EmptyState: emptyStateMeta,
   FilterBar: filterBarMeta,
   Hero: heroMeta,
-  ImagePreview: imagePreviewMeta,
-  ImageUploadField: imageUploadFieldMeta,
   InspectorField: inspectorFieldMeta,
   List: listMeta,
   ListRow: listRowMeta,

package/src/registry.test.ts

@@ -55,7 +55,7 @@ async function listPublicConcreteComponentExports(): Promise<readonly string[]>
   const source = await Bun.file('src/index.ts').text();
   const componentExports = Array.from(
     source.matchAll(
-      /export\s+\{([^}]+)\}\s+from '\.\/(components\/[^']+|foundation|layout\/[^']+|patterns\/[^']+)';/g,
+      /export\s+\{([^}]+)\}\s+from '\.\/(components\/[^']+|features\/[^']+|foundation|layout\/[^']+|patterns\/[^']+)';/g,
     ),
   )
     .flatMap((match) => match[1].split(',').map((item) => item.trim()))

package/src/registry.ts

@@ -39,6 +39,7 @@ import { Textarea } from './components/textarea';
 import { TimePicker } from './components/time-picker';
 import { Toast } from './components/toast';
 import { Toolbar, ToolbarAction } from './components/toolbar';
+import { Uploader } from './features/uploader/public';
 import {
   Box,
   Center,
@@ -73,8 +74,6 @@ import { DisclosureSection } from './patterns/disclosure-section';
 import { EmptyState } from './patterns/empty-state';
 import { FilterBar } from './patterns/filter-bar';
 import { Hero } from './patterns/hero';
-import { ImagePreview } from './patterns/image-preview';
-import { ImageUploadField } from './patterns/image-upload-field';
 import { InspectorField } from './patterns/inspector-field';
 import { List, ListRow, ListSection } from './patterns/list';
 import { MessageBubble } from './patterns/message-bubble';
@@ -170,6 +169,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   Toast,
   Toolbar,
   ToolbarAction,
+  Uploader,
   ThemeModeToggle,
   Box,
   Center,
@@ -201,8 +201,6 @@ const _ZORA_COMPONENT_REGISTRY = {
   EmptyState,
   FilterBar,
   Hero,
-  ImagePreview,
-  ImageUploadField,
   InspectorField,
   List,
   ListRow,

package/src/showcaseCoverage.test.ts

@@ -65,6 +65,7 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'Stack',
     'Surface',
   ],
+  features: ['Uploader'],
   layouts: [
     'AppShell',
     'Screen',
@@ -90,8 +91,6 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'ListRow',
     'ListSection',
     'InspectorField',
-    'ImagePreview',
-    'ImageUploadField',
     'Notice',
     'Panel',
     'ReaderSurface',

package/src/types/upload.ts

@@ -0,0 +1,62 @@
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type UploadType = 'image' | 'video' | 'document' | 'file';
+
+export interface UploadAssetBase {
+  fileName?: string;
+  sizeBytes?: number;
+  contentType?: string;
+  width?: number;
+  height?: number;
+  alt?: string;
+  createdAt?: string;
+}
+
+export type UploadAsset =
+  | (UploadAssetBase & {
+      kind: 'local';
+      uri: string;
+    })
+  | (UploadAssetBase & {
+      kind: 'url';
+      url: string;
+    })
+  | (UploadAssetBase & {
+      kind: 'storage';
+      storageId?: string;
+      bucket: string;
+      path: string;
+      publicUrl?: string;
+    });
+
+export interface UploadProgressContext {
+  setProgress: (progress: number | null) => void;
+}
+
+export interface ValidateUploadAssetInput {
+  asset: UploadAsset;
+  accept?: string;
+  maxSizeBytes?: number;
+  validate?: (asset: UploadAsset) => string | undefined;
+}
+
+export interface UploaderProps extends ZoraBaseProps {
+  value: UploadAsset | null;
+  onChange: (next: UploadAsset | null) => void;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  helperText?: React.ReactNode;
+  errorText?: React.ReactNode;
+  type?: UploadType;
+  accept?: string;
+  maxSizeBytes?: number;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  validatePicked?: (asset: UploadAsset) => string | undefined;
+  onUpload?: (asset: UploadAsset, context: UploadProgressContext) => Promise<UploadAsset>;
+  onRemove?: (current: UploadAsset) => void | Promise<void>;
+  aspectRatio?: number;
+}

package/dist/patterns/image-preview/ImagePreview.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { ImagePreviewProps } from './types';
-/***
- * Preview pattern for showing an image with optional metadata and actions.
- *
- 
- */
-export declare const ImagePreview: (props: ImagePreviewProps) => React.ReactElement | null;
-//# sourceMappingURL=ImagePreview.d.ts.map

package/dist/patterns/image-preview/ImagePreview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,iBAAiB,EAAkB,MAAM,SAAS,CAAC;AAqEjE;;;;GAIG;AACH,eAAO,MAAM,YAAY,yDAAwC,CAAC"}

package/dist/patterns/image-preview/ImagePreview.js

@@ -1,46 +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';
-function resolveRenderableUrl(asset) {
-    if (!asset)
-        return null;
-    if (asset.kind === 'url') {
-        return asset.url;
-    }
-    return asset.publicUrl ?? null;
-}
-function resolveSafeAspectRatio(value) {
-    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, }) {
-    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);
-//# sourceMappingURL=ImagePreview.js.map

package/dist/patterns/image-preview/ImagePreview.js.map

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

package/dist/patterns/image-preview/index.d.ts

@@ -1,3 +0,0 @@
-export { ImagePreview } from './ImagePreview';
-export type { ImagePreviewProps, ZoraImageAsset, ZoraImageMetadata } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/patterns/image-preview/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/patterns/image-preview/index.js

@@ -1,2 +0,0 @@
-export { ImagePreview } from './ImagePreview';
-//# sourceMappingURL=index.js.map

package/dist/patterns/image-preview/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/image-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { ImagePreview } from './ImagePreview';\nexport type { ImagePreviewProps, ZoraImageAsset, ZoraImageMetadata } from './types';\n"]}

package/dist/patterns/image-preview/meta.d.ts

@@ -1,9 +0,0 @@
-export declare const imagePreviewMeta: {
-    readonly name: "ImagePreview";
-    readonly category: "pattern";
-    readonly directManifestNode: false;
-    readonly allowedChildren: readonly [];
-    readonly note: "Media pattern; not represented as a manifest node in v1.";
-    readonly props: {};
-};
-//# sourceMappingURL=meta.d.ts.map

package/dist/patterns/image-preview/meta.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-preview/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;CAOS,CAAC"}

package/dist/patterns/image-preview/meta.js

@@ -1,9 +0,0 @@
-export const imagePreviewMeta = {
-    name: 'ImagePreview',
-    category: 'pattern',
-    directManifestNode: false,
-    allowedChildren: [],
-    note: 'Media pattern; not represented as a manifest node in v1.',
-    props: {},
-};
-//# sourceMappingURL=meta.js.map

package/dist/patterns/image-preview/meta.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/patterns/image-preview/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,SAAS;IACnB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,0DAA0D;IAChE,KAAK,EAAE,EAAE;CAC2B,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const imagePreviewMeta = {\n  name: 'ImagePreview',\n  category: 'pattern',\n  directManifestNode: false,\n  allowedChildren: [],\n  note: 'Media pattern; not represented as a manifest node in v1.',\n  props: {},\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/patterns/image-preview/types.d.ts

@@ -1,36 +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;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/patterns/image-preview/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-preview/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GACtB;IACE,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,GACD;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,CAAC;AAEN,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,KAAK,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC"}

package/dist/patterns/image-preview/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/patterns/image-preview/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/image-preview/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ImageFit } from '../../components/image';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ZoraImageMetadata {\n  fileName?: string;\n  sizeBytes?: number;\n  createdAt?: string;\n}\n\nexport type ZoraImageAsset =\n  | {\n      kind: 'url';\n      url: string;\n      alt?: string;\n      width?: number;\n      height?: number;\n      contentType?: string;\n      metadata?: ZoraImageMetadata;\n    }\n  | {\n      kind: 'storage';\n      storageId?: string;\n      bucket: string;\n      path: string;\n      publicUrl?: string;\n      alt?: string;\n      width?: number;\n      height?: number;\n      contentType?: string;\n      metadata?: ZoraImageMetadata;\n    };\n\nexport interface ImagePreviewProps extends ZoraBaseProps {\n  asset?: ZoraImageAsset | null;\n  aspectRatio?: number;\n  fit?: ImageFit;\n  emptyTitle?: React.ReactNode;\n  emptyDescription?: React.ReactNode;\n}\n"]}

package/dist/patterns/image-upload-field/ImageUploadField.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { ImageUploadFieldProps } from './types';
-/***
- * Form field pattern for picking, previewing, and uploading an image.
- *
- 
- */
-export declare const ImageUploadField: (props: ImageUploadFieldProps) => React.ReactElement | null;
-//# sourceMappingURL=ImageUploadField.d.ts.map

package/dist/patterns/image-upload-field/ImageUploadField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImageUploadField.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/ImageUploadField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+SrD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,6DAA4C,CAAC"}