@ankhorage/zora 1.0.10 → 1.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"uploadFlow.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/uploadFlow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAuC/C,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,WAAW,EACX,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B,GAAG,OAAO,CAkBV;AAmBD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAI1E;AAED,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAIjF;AAED,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,eAAe,GAAG,cAAc,CAYvF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAIhF;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,YAAY,EACZ,cAAc,GACf,EAAE;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CAC/E,GAAG,MAAM,GAAG,SAAS,CAiBrB"}

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

@@ -0,0 +1,106 @@
+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[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

@@ -0,0 +1 @@
+{"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[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/dist/patterns/list/types.d.ts

@@ -34,7 +34,7 @@ export interface ListChildrenProps extends ZoraBaseProps {
     children: React.ReactNode;
 }
 export type ListProps = ListItemsProps | ListChildrenProps;
-export interface ListSectionItemsProps extends ZoraBaseProps {
+interface ListSectionItemsProps extends ZoraBaseProps {
     title?: React.ReactNode;
     description?: React.ReactNode;
     eyebrow?: React.ReactNode;
@@ -43,7 +43,7 @@ export interface ListSectionItemsProps extends ZoraBaseProps {
     rowVariant?: ListRowVariant;
     compact?: boolean;
 }
-export interface ListSectionChildrenProps extends ZoraBaseProps {
+interface ListSectionChildrenProps extends ZoraBaseProps {
     title?: React.ReactNode;
     description?: React.ReactNode;
     eyebrow?: React.ReactNode;

package/dist/patterns/list/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhD,UAAU,gBAAiB,SAAQ,aAAa;IAC9C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC1B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,qBAAqB,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE3D,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,wBAAyB,SAAQ,aAAa;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,wBAAwB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhD,UAAU,gBAAiB,SAAQ,aAAa;IAC9C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC1B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,qBAAqB,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE3D,UAAU,qBAAsB,SAAQ,aAAa;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,wBAAyB,SAAQ,aAAa;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,wBAAwB,CAAC"}

package/dist/patterns/list/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/list/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type ListRowVariant = 'divider' | 'card';\n\ninterface ListRowBaseProps extends ZoraBaseProps {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  meta?: React.ReactNode;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n  compact?: boolean;\n  variant?: ListRowVariant;\n}\n\ninterface ListRowPressableProps {\n  onPress: () => void;\n  action?: never;\n}\n\ninterface ListRowActionProps {\n  action: React.ReactNode;\n  onPress?: never;\n}\n\ninterface ListRowStaticProps {\n  action?: never;\n  onPress?: never;\n}\n\nexport type ListRowProps = ListRowBaseProps &\n  (ListRowPressableProps | ListRowActionProps | ListRowStaticProps);\n\nexport interface ListItemsProps extends ZoraBaseProps {\n  items: readonly ListRowProps[];\n  rowVariant?: ListRowVariant;\n  compact?: boolean;\n}\n\nexport interface ListChildrenProps extends ZoraBaseProps {\n  children: React.ReactNode;\n}\n\nexport type ListProps = ListItemsProps | ListChildrenProps;\n\nexport interface ListSectionItemsProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  items: readonly ListRowProps[];\n  rowVariant?: ListRowVariant;\n  compact?: boolean;\n}\n\nexport interface ListSectionChildrenProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport type ListSectionProps = ListSectionItemsProps | ListSectionChildrenProps;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/list/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type ListRowVariant = 'divider' | 'card';\n\ninterface ListRowBaseProps extends ZoraBaseProps {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  meta?: React.ReactNode;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n  compact?: boolean;\n  variant?: ListRowVariant;\n}\n\ninterface ListRowPressableProps {\n  onPress: () => void;\n  action?: never;\n}\n\ninterface ListRowActionProps {\n  action: React.ReactNode;\n  onPress?: never;\n}\n\ninterface ListRowStaticProps {\n  action?: never;\n  onPress?: never;\n}\n\nexport type ListRowProps = ListRowBaseProps &\n  (ListRowPressableProps | ListRowActionProps | ListRowStaticProps);\n\nexport interface ListItemsProps extends ZoraBaseProps {\n  items: readonly ListRowProps[];\n  rowVariant?: ListRowVariant;\n  compact?: boolean;\n}\n\nexport interface ListChildrenProps extends ZoraBaseProps {\n  children: React.ReactNode;\n}\n\nexport type ListProps = ListItemsProps | ListChildrenProps;\n\ninterface ListSectionItemsProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  items: readonly ListRowProps[];\n  rowVariant?: ListRowVariant;\n  compact?: boolean;\n}\n\ninterface ListSectionChildrenProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport type ListSectionProps = ListSectionItemsProps | ListSectionChildrenProps;\n"]}

package/dist/patterns/responsive-panel/types.d.ts

@@ -1,8 +1,8 @@
 import type React from 'react';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 export type ResponsivePanelSide = 'left' | 'right';
 export type ResponsivePanelDesktopMode = 'inline' | 'floating';
 export type ResponsivePanelMobileMode = 'drawer' | 'modal';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 export interface ResponsivePanelProps extends ZoraBaseProps {
     title?: React.ReactNode;
     description?: React.ReactNode;

package/dist/patterns/responsive-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,0BAA0B,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC/D,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,0BAA0B,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC/D,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/patterns/responsive-panel/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nexport type ResponsivePanelSide = 'left' | 'right';\nexport type ResponsivePanelDesktopMode = 'inline' | 'floating';\nexport type ResponsivePanelMobileMode = 'drawer' | 'modal';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ResponsivePanelProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  footer?: React.ReactNode;\n  children?: React.ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  side?: ResponsivePanelSide;\n  desktopMode?: ResponsivePanelDesktopMode;\n  mobileMode?: ResponsivePanelMobileMode;\n  compact?: boolean;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type ResponsivePanelSide = 'left' | 'right';\nexport type ResponsivePanelDesktopMode = 'inline' | 'floating';\nexport type ResponsivePanelMobileMode = 'drawer' | 'modal';\n\nexport interface ResponsivePanelProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  footer?: React.ReactNode;\n  children?: React.ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  side?: ResponsivePanelSide;\n  desktopMode?: ResponsivePanelDesktopMode;\n  mobileMode?: ResponsivePanelMobileMode;\n  compact?: boolean;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "1.0.10",
+  "version": "1.2.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -44,8 +44,8 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.4",
-    "@ankhorage/contracts": "^1.1.1",
-    "@ankhorage/surface": "^1.1.0"
+    "@ankhorage/contracts": "^1.2.0",
+    "@ankhorage/surface": "^1.3.0"
   },
   "files": [
     "dist",
@@ -72,25 +72,24 @@
     "build": "rm -rf dist tsconfig.tsbuildinfo && bun x tsc -p tsconfig.json",
     "changeset": "changeset",
     "changeset:status": "changeset status --since=origin/main",
-    "knip": "knip",
-    "lint": "eslint . --max-warnings=0",
-    "lint:fix": "eslint . --fix --max-warnings=0",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
+    "knip": "ankhorage-knip",
+    "lint": "ankhorage-eslint . --max-warnings=0",
+    "lint:fix": "ankhorage-eslint . --fix --max-warnings=0",
+    "format": "ankhorage-prettier --write .",
+    "format:check": "ankhorage-prettier --check .",
     "prepack": "bun run build",
     "test": "bun test src",
     "typecheck": "bun x tsc --noEmit -p tsconfig.json",
     "version-packages": "changeset version"
   },
   "devDependencies": {
-    "@ankhorage/devtools": "^1.0.1",
+    "@ankhorage/devtools": "^1.0.5",
     "@changesets/cli": "^2.31.0",
     "@expo/vector-icons": "^15.1.1",
     "@react-native-picker/picker": "^2.11.4",
     "@types/bun": "^1.3.13",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
-    "knip": "^5.88.1",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "typescript": "^5.9.3"

package/src/components/app-bar/AppBar.tsx

@@ -0,0 +1,133 @@
+import { AppBar as SurfaceAppBar } from '@ankhorage/surface';
+import React from 'react';
+
+import { Box, Inline, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Heading } from '../heading';
+import { IconButton } from '../icon-button';
+import { Text } from '../text';
+import type { AppBarMode, AppBarOverflowAction, AppBarProps } from './types';
+
+const DEFAULT_CANCEL_ICON = { name: 'close-outline' };
+const DEFAULT_OVERFLOW_ICON = { name: 'ellipsis-vertical' };
+
+function resolveMode(mode: AppBarMode | undefined): AppBarMode {
+  return mode ?? { type: 'default' };
+}
+
+function resolveSelectionLabel({ count, label }: { count?: number; label: string }): string {
+  if (count === undefined) {
+    return label;
+  }
+
+  return `${label} (${count})`;
+}
+
+function resolveOverflowLabel(overflow: AppBarOverflowAction): string {
+  return overflow.label ?? 'More options';
+}
+
+function resolveCancelLabel(mode: Extract<AppBarMode, { type: 'selection' }>): string {
+  return mode.cancelLabel ?? 'Cancel selection';
+}
+
+function AppBarInner({
+  themeId: _themeId,
+  mode: _mode,
+  title,
+  subtitle,
+  leading,
+  actions,
+  overflow,
+  appMode,
+  children,
+  safeAreaTop = true,
+  divider = true,
+  testID,
+}: AppBarProps) {
+  const { theme } = useZoraTheme();
+  const resolvedMode = resolveMode(appMode);
+  const isSelectionMode = resolvedMode.type === 'selection';
+
+  const resolvedLeading =
+    leading ??
+    (isSelectionMode ? (
+      <IconButton
+        icon={resolvedMode.cancelIcon ?? DEFAULT_CANCEL_ICON}
+        label={resolveCancelLabel(resolvedMode)}
+        emphasis="ghost"
+        size="m"
+        tone="neutral"
+        onPress={resolvedMode.onCancel}
+      />
+    ) : undefined);
+
+  const overflowButton = overflow?.onPress ? (
+    <IconButton
+      disabled={overflow.disabled}
+      icon={overflow.icon ?? DEFAULT_OVERFLOW_ICON}
+      label={resolveOverflowLabel(overflow)}
+      emphasis="ghost"
+      size="m"
+      tone="neutral"
+      onPress={overflow.onPress}
+    />
+  ) : null;
+
+  const resolvedTrailing =
+    actions || overflowButton ? (
+      <Inline align="center" gap="s" wrap="nowrap">
+        {actions}
+        {overflowButton}
+      </Inline>
+    ) : undefined;
+
+  const resolvedCenter = (() => {
+    if (children !== undefined) {
+      return children;
+    }
+
+    if (isSelectionMode) {
+      return (
+        <Text numberOfLines={1} tone="default" variant="label" weight="semiBold">
+          {resolveSelectionLabel(resolvedMode)}
+        </Text>
+      );
+    }
+
+    if (title == null && subtitle == null) {
+      return null;
+    }
+
+    return (
+      <Stack gap="xs">
+        {title != null ? (
+          <Heading ellipsizeMode="tail" level={3} numberOfLines={1} size="h5">
+            {title}
+          </Heading>
+        ) : null}
+        {subtitle != null ? (
+          <Text ellipsizeMode="tail" numberOfLines={1} tone="muted" variant="bodySmall">
+            {subtitle}
+          </Text>
+        ) : null}
+      </Stack>
+    );
+  })();
+
+  return (
+    <SurfaceAppBar
+      bg={isSelectionMode ? theme.semantics.action.primary.softBg : undefined}
+      divider={divider}
+      leading={resolvedLeading}
+      safeAreaTop={safeAreaTop}
+      testID={testID}
+      trailing={resolvedTrailing}
+    >
+      {resolvedCenter ? <Box style={{ minWidth: 0 }}>{resolvedCenter}</Box> : null}
+    </SurfaceAppBar>
+  );
+}
+
+export const AppBar = withZoraThemeScope(AppBarInner);

package/src/components/app-bar/index.ts

@@ -0,0 +1,2 @@
+export * from './AppBar';
+export * from './types';

package/src/components/app-bar/types.ts

@@ -0,0 +1,36 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type AppBarMode =
+  | {
+      type: 'default';
+    }
+  | {
+      type: 'selection';
+      label: string;
+      count?: number;
+      onCancel: () => void;
+      cancelLabel?: string;
+      cancelIcon?: ButtonIconSpec;
+    };
+
+export interface AppBarOverflowAction {
+  onPress: () => void;
+  label?: string;
+  icon?: ButtonIconSpec;
+  disabled?: boolean;
+}
+
+export interface AppBarProps extends ZoraBaseProps {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  leading?: React.ReactNode;
+  actions?: React.ReactNode;
+  overflow?: AppBarOverflowAction;
+  appMode?: AppBarMode;
+  children?: React.ReactNode;
+  safeAreaTop?: boolean;
+  divider?: boolean;
+}

package/src/components/image/Image.tsx

@@ -0,0 +1,11 @@
+import { Image as SurfaceImage } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ImageProps } from './types';
+
+function ImageInner({ themeId: _themeId, mode: _mode, ...props }: ImageProps) {
+  return <SurfaceImage {...props} />;
+}
+
+export const Image = withZoraThemeScope(ImageInner);

package/src/components/image/index.ts

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

package/src/components/image/types.ts

@@ -0,0 +1,7 @@
+import type { ImageProps as SurfaceImageProps } from '@ankhorage/surface';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type { ImageFit, SurfaceImageSource } from '@ankhorage/surface';
+
+export interface ImageProps extends ZoraBaseProps, Omit<SurfaceImageProps, 'mode' | 'themeId'> {}

package/src/components/input/types.ts

@@ -19,7 +19,7 @@ type InputTrailingProps =
       trailingAction?: InputTrailingAction;
     };
 
-export interface InputBaseProps
+interface InputBaseProps
   extends
     ZoraBaseProps,
     Omit<

package/src/components/toolbar/types.ts

@@ -1,10 +1,10 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type React from 'react';
 
-export type ToolbarPosition = 'top' | 'bottom' | 'inline';
-
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
+export type ToolbarPosition = 'top' | 'bottom' | 'inline';
+
 export interface ToolbarProps extends ZoraBaseProps {
   children?: React.ReactNode;
   position?: ToolbarPosition;

package/src/index.ts

@@ -1,3 +1,5 @@
+export type { AppBarMode, AppBarOverflowAction, AppBarProps } from './components/app-bar';
+export { AppBar } from './components/app-bar';
 export type { AvatarProps, AvatarShape, AvatarSize } from './components/avatar';
 export { Avatar, resolveAvatarInitials } from './components/avatar';
 export type { AvatarGroupItem, AvatarGroupProps } from './components/avatar-group';
@@ -58,6 +60,8 @@ export type { IconProps } from './components/icon';
 export { Icon } from './components/icon';
 export type { IconButtonProps } from './components/icon-button';
 export { IconButton } from './components/icon-button';
+export type { ImageFit, ImageProps, SurfaceImageSource } from './components/image';
+export { Image } from './components/image';
 export type { InputProps, InputTrailingAction } from './components/input';
 export { Input } from './components/input';
 export type { MediaCardImageProps, MediaCardProps } from './components/media-card';
@@ -84,13 +88,13 @@ export type { SearchBarProps } from './components/search-bar';
 export { SearchBar } from './components/search-bar';
 export type { SelectOption, SelectProps } from './components/select';
 export { Select } from './components/select';
-export type { TabItem, TabsProps } from './components/tabs';
+export type { TabItem, TabsProps, TabsVariant } from './components/tabs';
 export { Tabs } from './components/tabs';
 export type { TextAlign, TextProps, TextTone, TextVariant, TextWeight } from './components/text';
 export { Text } from './components/text';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
-export type { ToolbarActionProps, ToolbarProps } from './components/toolbar';
+export type { ToolbarActionProps, ToolbarPosition, ToolbarProps } from './components/toolbar';
 export { Toolbar, ToolbarAction } from './components/toolbar';
 export type {
   BoxProps,
@@ -160,6 +164,18 @@ export type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';
 export { EmptyState } from './patterns/empty-state';
 export type { FilterBarProps } from './patterns/filter-bar';
 export { FilterBar } from './patterns/filter-bar';
+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 {
@@ -175,7 +191,12 @@ export type { NoticeProps } from './patterns/notice';
 export { Notice } from './patterns/notice';
 export type { PanelProps } from './patterns/panel';
 export { Panel } from './patterns/panel';
-export type { ResponsivePanelProps } from './patterns/responsive-panel';
+export type {
+  ResponsivePanelDesktopMode,
+  ResponsivePanelMobileMode,
+  ResponsivePanelProps,
+  ResponsivePanelSide,
+} from './patterns/responsive-panel';
 export { ResponsivePanel } from './patterns/responsive-panel';
 export type { SectionHeaderProps } from './patterns/section-header';
 export { SectionHeader } from './patterns/section-header';

package/src/internal/resolveZoraNavigationItems.ts

@@ -6,7 +6,7 @@ import type {
 } from '../components/navigation-item';
 import type { ZoraNavigationRouteMap } from '../components/navigation-list';
 
-export interface ZoraNavigationDescriptorOptions {
+interface ZoraNavigationDescriptorOptions {
   title?: string;
   tabBarLabel?: string | React.ReactNode;
   drawerLabel?: string | React.ReactNode;
@@ -25,13 +25,13 @@ export interface ZoraNavigationState {
   routes: readonly ZoraNavigationRouteState[];
 }
 
-export interface ZoraTabPressEvent {
+interface ZoraTabPressEvent {
   type: 'tabPress';
   target: string;
   canPreventDefault: true;
 }
 
-export interface ZoraTabPressEventResult {
+interface ZoraTabPressEventResult {
   defaultPrevented: boolean;
 }
 

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

@@ -0,0 +1,76 @@
+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.',
+}: 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 tone="muted" variant="bodySmall">
+              {emptyDescription}
+            </Text>
+          </Stack>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export const ImagePreview = withZoraThemeScope(ImagePreviewInner);

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

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