@ankhorage/zora 5.0.0 → 7.0.0

package/src/components/date-picker/DatePicker.tsx

@@ -1,9 +1,9 @@
 import { Field } from '@ankhorage/surface';
 import React from 'react';
 
+import { useBottomSheet } from '../../features/bottom-sheet/public';
 import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { ActionSheet } from '../action-sheet';
 import { Button } from '../button';
 import { Text } from '../text';
 import type { DatePickerProps } from './types';
@@ -11,6 +11,7 @@ import type { DatePickerProps } from './types';
 const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const;
 const DAY_CELL_WIDTH = 42;
 
+/*** Render the field label and optional supporting description. */
 function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
   return (
     <Stack gap="xs">
@@ -26,75 +27,70 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
   );
 }
 
+/*** Normalize a date to the start of its local calendar day. */
 function startOfLocalDay(value: Date): Date {
   return new Date(value.getFullYear(), value.getMonth(), value.getDate());
 }
 
+/*** Compare two values by local calendar day. */
 function isSameLocalDay(left: Date | null, right: Date): boolean {
-  if (!left) {
-    return false;
-  }
-
+  if (!left) return false;
   return startOfLocalDay(left).getTime() === startOfLocalDay(right).getTime();
 }
 
+/*** Report whether one local calendar day precedes another. */
 function isBeforeLocalDay(left: Date, right: Date): boolean {
   return startOfLocalDay(left).getTime() < startOfLocalDay(right).getTime();
 }
 
+/*** Report whether one local calendar day follows another. */
 function isAfterLocalDay(left: Date, right: Date): boolean {
   return startOfLocalDay(left).getTime() > startOfLocalDay(right).getTime();
 }
 
+/*** Resolve whether a date falls outside the configured picker range. */
 function isDateDisabled(
   value: Date,
   minDate: Date | undefined,
   maxDate: Date | undefined,
 ): boolean {
-  if (minDate && isBeforeLocalDay(value, minDate)) {
-    return true;
-  }
-
-  if (maxDate && isAfterLocalDay(value, maxDate)) {
-    return true;
-  }
-
+  if (minDate && isBeforeLocalDay(value, minDate)) return true;
+  if (maxDate && isAfterLocalDay(value, maxDate)) return true;
   return false;
 }
 
+/*** Format the current calendar month for the picker heading. */
 function formatMonthLabel(value: Date): string {
   return value.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
 }
 
+/*** Format a selected date with the platform locale defaults. */
 function formatDefaultDate(value: Date): string {
   return value.toLocaleDateString();
 }
 
+/*** Build the padded calendar grid for one month. */
 function createMonthDays(month: Date): (Date | null)[] {
   const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
   const dayCount = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
   const days: (Date | null)[] = [];
 
-  for (let offset = 0; offset < firstDay.getDay(); offset += 1) {
-    days.push(null);
-  }
-
+  for (let offset = 0; offset < firstDay.getDay(); offset += 1) days.push(null);
   for (let day = 1; day <= dayCount; day += 1) {
     days.push(new Date(month.getFullYear(), month.getMonth(), day));
   }
-
-  while (days.length % 7 !== 0) {
-    days.push(null);
-  }
+  while (days.length % 7 !== 0) days.push(null);
 
   return days;
 }
 
+/*** Resolve the month initially shown by the calendar sheet. */
 function resolveInitialMonth(value: Date | null, minDate: Date | undefined): Date {
   const base = value ?? minDate ?? new Date();
   return new Date(base.getFullYear(), base.getMonth(), 1);
 }
 
+/*** Report whether the configured range intersects a candidate month. */
 function canNavigateToMonth(
   month: Date,
   minDate: Date | undefined,
@@ -103,14 +99,8 @@ function canNavigateToMonth(
   const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
   const lastDay = new Date(month.getFullYear(), month.getMonth() + 1, 0);
 
-  if (maxDate && isAfterLocalDay(firstDay, maxDate)) {
-    return false;
-  }
-
-  if (minDate && isBeforeLocalDay(lastDay, minDate)) {
-    return false;
-  }
-
+  if (maxDate && isAfterLocalDay(firstDay, maxDate)) return false;
+  if (minDate && isBeforeLocalDay(lastDay, minDate)) return false;
   return true;
 }
 
@@ -131,35 +121,35 @@ function DatePickerInner({
   testID,
   interactionPolicy,
 }: DatePickerProps) {
+  const { dismiss, present } = useBottomSheet();
   const passive = interactionPolicy === 'passive';
-  const [visible, setVisible] = React.useState(false);
-  const [fallbackMonth] = React.useState(() => resolveInitialMonth(null, undefined));
-  const initialMonth = value || minDate ? resolveInitialMonth(value, minDate) : fallbackMonth;
-  const initialMonthKey = initialMonth.getTime();
-  const [displayMonthState, setDisplayMonthState] = React.useState(() => ({
-    sourceMonthKey: initialMonthKey,
-    month: initialMonth,
-  }));
-  const displayMonth =
-    displayMonthState.sourceMonthKey === initialMonthKey ? displayMonthState.month : initialMonth;
-  const monthDays = React.useMemo(() => createMonthDays(displayMonth), [displayMonth]);
-  const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);
-  const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);
   const displayValue = value
     ? formatDate
       ? formatDate(value)
       : formatDefaultDate(value)
     : placeholder;
 
-  function setDisplayMonth(month: Date) {
-    setDisplayMonthState({ sourceMonthKey: initialMonthKey, month });
-  }
-
+  /*** Present the calendar content through the shared BottomSheet controller. */
   function openPicker() {
     if (passive) return;
-
-    setDisplayMonthState({ sourceMonthKey: initialMonthKey, month: initialMonth });
-    setVisible(true);
+    present({
+      content: (
+        <DatePickerSheet
+          description={description}
+          interactionPolicy={interactionPolicy}
+          label={label}
+          maxDate={maxDate}
+          minDate={minDate}
+          onDismiss={dismiss}
+          onSelect={(date) => {
+            onValueChange?.(startOfLocalDay(date));
+            dismiss();
+          }}
+          testID={testID}
+          value={value}
+        />
+      ),
+    });
   }
 
   return (
@@ -181,95 +171,173 @@ function DatePickerInner({
       >
         {displayValue}
       </Button>
-      <ActionSheet
-        description={description}
+    </Field>
+  );
+}
+
+interface DatePickerSheetProps extends Pick<
+  DatePickerProps,
+  'description' | 'interactionPolicy' | 'label' | 'maxDate' | 'minDate' | 'testID' | 'value'
+> {
+  onDismiss: () => void;
+  onSelect: (value: Date) => void;
+}
+
+/*** Render the calendar-specific content inside the shared BottomSheet host. */
+function DatePickerSheet({
+  description,
+  interactionPolicy,
+  label,
+  maxDate,
+  minDate,
+  onDismiss,
+  onSelect,
+  testID,
+  value,
+}: DatePickerSheetProps) {
+  const [displayMonth, setDisplayMonth] = React.useState(() => resolveInitialMonth(value, minDate));
+  const monthDays = React.useMemo(() => createMonthDays(displayMonth), [displayMonth]);
+
+  return (
+    <Stack gap="m" p="m" testID={testID ? `${testID}-sheet` : undefined}>
+      <PickerSheetHeader description={description} title={label ?? 'Choose date'} />
+      <DatePickerMonthNavigation
+        displayMonth={displayMonth}
         interactionPolicy={interactionPolicy}
-        onDismiss={() => {
-          if (passive) return;
+        maxDate={maxDate}
+        minDate={minDate}
+        onMonthChange={setDisplayMonth}
+      />
+      <DatePickerWeekdays />
+      <DatePickerCalendar
+        interactionPolicy={interactionPolicy}
+        maxDate={maxDate}
+        minDate={minDate}
+        monthDays={monthDays}
+        onSelect={onSelect}
+        testID={testID}
+        value={value}
+      />
+      <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
+        Cancel
+      </Button>
+    </Stack>
+  );
+}
+
+/*** Render the shared title block used by the calendar sheet. */
+function PickerSheetHeader({
+  description,
+  title,
+}: {
+  description: React.ReactNode | undefined;
+  title: React.ReactNode;
+}) {
+  return (
+    <Stack gap="xxs">
+      <Text align="center" variant="label" weight="semiBold">
+        {title}
+      </Text>
+      {description ? (
+        <Text align="center" emphasis="muted" variant="bodySmall">
+          {description}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}
+
+/*** Render previous/next month controls for the calendar sheet. */
+function DatePickerMonthNavigation({
+  displayMonth,
+  interactionPolicy,
+  maxDate,
+  minDate,
+  onMonthChange,
+}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate'> & {
+  displayMonth: Date;
+  onMonthChange: (month: Date) => void;
+}) {
+  const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);
+  const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);
 
-          setVisible(false);
-        }}
-        testID={testID ? `${testID}-sheet` : undefined}
-        title={label ?? 'Choose date'}
-        visible={visible}
+  return (
+    <Stack align="center" direction="row" justify="space-between">
+      <Button
+        disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}
+        interactionPolicy={interactionPolicy}
+        onPress={() => onMonthChange(previousMonth)}
+        size="s"
+        variant="ghost"
       >
-        <Stack gap="m">
-          <Stack align="center" direction="row" justify="space-between">
-            <Button
-              disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}
-              interactionPolicy={interactionPolicy}
-              onPress={() => {
-                if (passive) return;
+        Previous
+      </Button>
+      <Text align="center" variant="label" weight="semiBold">
+        {formatMonthLabel(displayMonth)}
+      </Text>
+      <Button
+        disabled={!canNavigateToMonth(nextMonth, minDate, maxDate)}
+        interactionPolicy={interactionPolicy}
+        onPress={() => onMonthChange(nextMonth)}
+        size="s"
+        variant="ghost"
+      >
+        Next
+      </Button>
+    </Stack>
+  );
+}
 
-                setDisplayMonth(previousMonth);
-              }}
-              size="s"
-              variant="ghost"
-            >
-              Previous
-            </Button>
-            <Text align="center" variant="label" weight="semiBold">
-              {formatMonthLabel(displayMonth)}
-            </Text>
+/*** Render weekday headings for the calendar grid. */
+function DatePickerWeekdays() {
+  return (
+    <Stack direction="row" justify="space-between">
+      {WEEKDAY_LABELS.map((weekday) => (
+        <Box key={weekday} width={DAY_CELL_WIDTH}>
+          <Text align="center" emphasis="muted" variant="caption" weight="semiBold">
+            {weekday}
+          </Text>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
+
+/*** Render selectable day cells for the current calendar month. */
+function DatePickerCalendar({
+  interactionPolicy,
+  maxDate,
+  minDate,
+  monthDays,
+  onSelect,
+  testID,
+  value,
+}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate' | 'testID' | 'value'> & {
+  monthDays: readonly (Date | null)[];
+  onSelect: (value: Date) => void;
+}) {
+  return (
+    <Stack direction="row" gap="xs" wrap="wrap">
+      {monthDays.map((day, index) => {
+        if (!day) return <Box key={`empty-${index}`} width={DAY_CELL_WIDTH} />;
+        const selected = isSameLocalDay(value, day);
+        return (
+          <Box key={day.toISOString()} width={DAY_CELL_WIDTH}>
             <Button
-              disabled={!canNavigateToMonth(nextMonth, minDate, maxDate)}
+              color={selected ? 'primary' : 'neutral'}
+              disabled={isDateDisabled(day, minDate, maxDate)}
               interactionPolicy={interactionPolicy}
-              onPress={() => {
-                if (passive) return;
-
-                setDisplayMonth(nextMonth);
-              }}
+              onPress={() => onSelect(day)}
               size="s"
-              variant="ghost"
+              testID={testID ? `${testID}-day-${day.getDate()}` : undefined}
+              variant={selected ? 'solid' : 'ghost'}
             >
-              Next
+              {day.getDate()}
             </Button>
-          </Stack>
-
-          <Stack direction="row" justify="space-between">
-            {WEEKDAY_LABELS.map((weekday) => (
-              <Box key={weekday} style={{ width: DAY_CELL_WIDTH }}>
-                <Text align="center" emphasis="muted" variant="caption" weight="semiBold">
-                  {weekday}
-                </Text>
-              </Box>
-            ))}
-          </Stack>
-
-          <Stack direction="row" gap="xs" style={{ flexWrap: 'wrap' }}>
-            {monthDays.map((day, index) => {
-              if (!day) {
-                return <Box key={`empty-${index}`} style={{ width: DAY_CELL_WIDTH }} />;
-              }
-
-              const selected = isSameLocalDay(value, day);
-              const dayDisabled = isDateDisabled(day, minDate, maxDate);
-
-              return (
-                <Box key={day.toISOString()} style={{ width: DAY_CELL_WIDTH }}>
-                  <Button
-                    color={selected ? 'primary' : 'neutral'}
-                    disabled={dayDisabled}
-                    interactionPolicy={interactionPolicy}
-                    onPress={() => {
-                      if (passive) return;
-
-                      onValueChange?.(startOfLocalDay(day));
-                      setVisible(false);
-                    }}
-                    size="s"
-                    testID={testID ? `${testID}-day-${day.getDate()}` : undefined}
-                    variant={selected ? 'solid' : 'ghost'}
-                  >
-                    {day.getDate()}
-                  </Button>
-                </Box>
-              );
-            })}
-          </Stack>
-        </Stack>
-      </ActionSheet>
-    </Field>
+          </Box>
+        );
+      })}
+    </Stack>
   );
 }
 

package/src/components/date-picker/meta.ts

@@ -5,6 +5,6 @@ export const datePickerMeta = {
   category: 'component',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Code-facing ActionSheet-backed date picker; not represented as a manifest node in v1.',
+  note: 'Code-facing BottomSheet-backed date picker; not represented as a manifest node in v1.',
   props: {},
 } as const satisfies ZoraComponentMeta;

package/src/components/image/Image.tsx

@@ -1,21 +1,149 @@
-import { Image as SurfaceImage } from '@ankhorage/surface';
+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) {
-  return <SurfaceImage {...props} />;
+  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}
+    />
+  );
 }
 
-/***
- * Displays an image with cross-platform source and fit handling.
- *
- 
- */
-export const Image = withZoraThemeScope(ImageInner);
+/*** 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/types.ts

@@ -1,7 +1,11 @@
-import type { ImageProps as SurfaceImageProps } from '@ankhorage/surface';
+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' | 'themeId'> {}
+export interface ImageProps
+  extends ZoraBaseProps, Omit<SurfaceImageProps, 'mode' | 'source' | 'themeId'> {
+  source?: SurfaceImageSource | UploadAsset | null;
+}