@ankhorage/zora 13.0.0 → 14.0.1

package/src/features/app-bar/adapters/inbound/AppBar.tsx

@@ -0,0 +1,176 @@
+import { AppBar as SurfaceAppBar, type ButtonIconSpec } from '@ankhorage/surface';
+import React from 'react';
+
+import { Inline } from '../../../../foundation';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { AppBarMode, AppBarOverflowAction, AppBarProps } from '../../../../types/app-bar';
+import { IconButton } from '../../../button/public';
+import { Box, Stack } from '../../../layout/public';
+import { Heading, Text } from '../../../typography/public';
+
+const DEFAULT_CANCEL_ICON = { name: 'close-outline' } satisfies ButtonIconSpec;
+const DEFAULT_OVERFLOW_ICON = { name: 'ellipsis-vertical' } satisfies ButtonIconSpec;
+
+/*** Resolves the effective AppBar mode. */
+function resolveMode(mode: AppBarMode | undefined): AppBarMode {
+  return mode ?? { type: 'default' };
+}
+
+/*** Formats the active selection label with its optional count. */
+function resolveSelectionLabel({ count, label }: { count?: number; label: string }): string {
+  if (count === undefined) return label;
+  return `${label} (${count})`;
+}
+
+/*** Resolves the accessible label for the overflow action. */
+function resolveOverflowLabel(overflow: AppBarOverflowAction): string {
+  return overflow.label ?? 'More options';
+}
+
+/*** Resolves the accessible label for leaving selection mode. */
+function resolveCancelLabel(mode: Extract<AppBarMode, { type: 'selection' }>): string {
+  return mode.cancelLabel ?? 'Cancel selection';
+}
+
+/*** Renders a top app bar with title/subtitle and optional leading/trailing actions. */
+export const AppBar = withZoraThemeScope(AppBarInner);
+
+/*** Composes the opinionated ZORA AppBar over the Surface layout primitive. */
+function AppBarInner({
+  themeId: _themeId,
+  mode: _mode,
+  title,
+  subtitle,
+  leading,
+  actions,
+  overflow,
+  appMode,
+  children,
+  safeAreaTop = true,
+  divider = true,
+  testID,
+  interactionPolicy,
+}: AppBarProps) {
+  const { theme } = useZoraTheme();
+  const resolvedMode = resolveMode(appMode);
+  const isSelectionMode = resolvedMode.type === 'selection';
+  const resolvedLeading = leading ?? resolveSelectionLeading(resolvedMode, interactionPolicy);
+  const overflowButton = resolveOverflowButton(overflow, interactionPolicy);
+  const resolvedTrailing = resolveTrailing(actions, overflowButton);
+  const resolvedCenter = resolveCenter({
+    children,
+    isSelectionMode,
+    resolvedMode,
+    subtitle,
+    title,
+  });
+
+  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>
+  );
+}
+
+/*** Resolves the selection action shown at the leading edge. */
+function resolveSelectionLeading(
+  mode: AppBarMode,
+  interactionPolicy: AppBarProps['interactionPolicy'],
+): React.ReactNode | undefined {
+  if (mode.type !== 'selection') return undefined;
+
+  return (
+    <IconButton
+      color="neutral"
+      icon={mode.cancelIcon ?? DEFAULT_CANCEL_ICON}
+      interactionPolicy={interactionPolicy}
+      label={resolveCancelLabel(mode)}
+      onPress={mode.onCancel}
+      size="m"
+      variant="ghost"
+    />
+  );
+}
+
+/*** Resolves the optional overflow action. */
+function resolveOverflowButton(
+  overflow: AppBarOverflowAction | undefined,
+  interactionPolicy: AppBarProps['interactionPolicy'],
+): React.ReactNode {
+  if (!overflow?.onPress) return null;
+
+  return (
+    <IconButton
+      color="neutral"
+      disabled={overflow.disabled}
+      icon={overflow.icon ?? DEFAULT_OVERFLOW_ICON}
+      interactionPolicy={interactionPolicy}
+      label={resolveOverflowLabel(overflow)}
+      onPress={overflow.onPress}
+      size="m"
+      variant="ghost"
+    />
+  );
+}
+
+/*** Composes trailing actions and overflow controls. */
+function resolveTrailing(
+  actions: React.ReactNode,
+  overflowButton: React.ReactNode,
+): React.ReactNode {
+  if (!actions && !overflowButton) return undefined;
+  return (
+    <Inline align="center" gap="s" wrap="nowrap">
+      {actions}
+      {overflowButton}
+    </Inline>
+  );
+}
+
+/*** Resolves the center content for default and selection modes. */
+function resolveCenter({
+  children,
+  isSelectionMode,
+  resolvedMode,
+  subtitle,
+  title,
+}: {
+  children: React.ReactNode;
+  isSelectionMode: boolean;
+  resolvedMode: AppBarMode;
+  subtitle: React.ReactNode;
+  title: React.ReactNode;
+}): React.ReactNode {
+  if (children !== undefined) return children;
+  if (isSelectionMode && resolvedMode.type === 'selection') {
+    return (
+      <Text emphasis="default" numberOfLines={1} 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" emphasis="muted" numberOfLines={1} variant="bodySmall">
+          {subtitle}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}

package/src/features/app-bar/public.ts

@@ -0,0 +1,2 @@
+export type { AppBarMode, AppBarOverflowAction, AppBarProps } from '../../types/app-bar';
+export { AppBar } from './adapters/inbound/AppBar';

package/src/features/bottom-sheet/public.test.ts

@@ -22,18 +22,21 @@ describe('ZORA BottomSheet public contract', () => {
     expect(workletsPeer).toBeDefined();
   });
 
-  test('installs the shared provider and removes picker ActionSheet dependencies', async () => {
-    const [provider, datePicker, timePicker] = await Promise.all([
-      Bun.file('src/theme/ZoraProvider.tsx').text(),
-      Bun.file('src/features/date-picker/adapters/inbound/DatePicker.tsx').text(),
-      Bun.file('src/features/time-picker/adapters/inbound/TimePicker.tsx').text(),
-    ]);
+  test('installs BottomSheet only in the enabled native runtime capability host', async () => {
+    const [provider, nativeCapabilities, webCapabilities, nativeDatePicker, nativeTimePicker] =
+      await Promise.all([
+        Bun.file('src/theme/ZoraProvider.tsx').text(),
+        Bun.file('src/theme/ZoraRuntimeCapabilities.native.tsx').text(),
+        Bun.file('src/theme/ZoraRuntimeCapabilities.web.tsx').text(),
+        Bun.file('src/features/date-picker/adapters/inbound/DatePicker.native.tsx').text(),
+        Bun.file('src/features/time-picker/adapters/inbound/TimePicker.native.tsx').text(),
+      ]);
 
-    expect(provider).toContain('<BottomSheetProvider>{children}</BottomSheetProvider>');
-    expect(provider).not.toContain('GestureHandlerRootView');
-    expect(datePicker).toContain('useBottomSheet()');
-    expect(timePicker).toContain('useBottomSheet()');
-    expect(datePicker).not.toContain("from '../action-sheet'");
-    expect(timePicker).not.toContain("from '../action-sheet'");
+    expect(provider).toContain('<ZoraRuntimeCapabilities');
+    expect(provider).not.toContain('BottomSheetProvider');
+    expect(nativeCapabilities).toContain('<BottomSheetProvider>');
+    expect(webCapabilities).not.toContain('BottomSheetProvider');
+    expect(nativeDatePicker).toContain('useBottomSheet()');
+    expect(nativeTimePicker).toContain('useBottomSheet()');
   });
 });

package/src/features/date-picker/adapters/inbound/DatePicker.native.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { DatePickerProps } from '../../../../types/date-picker';
+import { useBottomSheet } from '../../../bottom-sheet/public';
+import { DatePickerContent } from '../../composition/DatePickerContent';
+import { DatePickerField } from '../../composition/DatePickerField';
+import { DatePickerTrigger } from '../../composition/DatePickerTrigger';
+import { formatLocalDate } from '../../utils/localDate';
+
+/*** Renders DatePicker with native BottomSheet presentation. */
+export const DatePicker = withZoraThemeScope(DatePickerInner);
+
+/*** Connects the shared DatePicker field and content to the native BottomSheet host. */
+function DatePickerInner({ themeId: _themeId, mode: _mode, ...props }: DatePickerProps) {
+  const { dismiss, present } = useBottomSheet();
+
+  const openPicker = React.useCallback(() => {
+    if (props.interactionPolicy === 'passive') return;
+
+    present({
+      content: (
+        <DatePickerContent
+          description={props.description}
+          interactionPolicy={props.interactionPolicy}
+          label={props.label}
+          maxDate={props.maxDate}
+          minDate={props.minDate}
+          onDismiss={dismiss}
+          onSelect={(date) => {
+            props.onValueChange?.(formatLocalDate(date));
+            dismiss();
+          }}
+          testID={props.testID}
+          value={props.value}
+        />
+      ),
+    });
+  }, [dismiss, present, props]);
+
+  return (
+    <DatePickerField {...props}>
+      <DatePickerTrigger {...props} onPress={openPicker} />
+    </DatePickerField>
+  );
+}

package/src/features/date-picker/adapters/inbound/DatePicker.tsx

@@ -1,356 +1 @@
-import { Field } from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
-import type { DatePickerProps } from '../../../../types/date-picker';
-import { useBottomSheet } from '../../../bottom-sheet/public';
-import { Button } from '../../../button/public';
-import { Box, Stack } from '../../../layout/public';
-import { Text } from '../../../typography/public';
-import { formatLocalDate, parseLocalDate } from '../../utils/localDate';
-
-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">
-      <Text variant="label" weight="semiBold">
-        {label}
-      </Text>
-      {description ? (
-        <Text emphasis="muted" variant="bodySmall">
-          {description}
-        </Text>
-      ) : null}
-    </Stack>
-  );
-}
-
-/*** Compare two values by local calendar day. */
-function isSameLocalDay(left: string | null, right: Date): boolean {
-  return left === formatLocalDate(right);
-}
-
-/*** Normalize a Date to the start of its local calendar day for range comparisons. */
-function startOfLocalDay(value: Date): Date {
-  return new Date(value.getFullYear(), value.getMonth(), value.getDate());
-}
-
-/*** 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;
-  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: string): string {
-  return parseLocalDate(value)?.toLocaleDateString() ?? value;
-}
-
-/*** 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 populatedLength = firstDay.getDay() + dayCount;
-  const paddedLength = Math.ceil(populatedLength / 7) * 7;
-
-  return Array.from({ length: paddedLength }, (_, index) =>
-    index < firstDay.getDay()
-      ? null
-      : new Date(month.getFullYear(), month.getMonth(), index - firstDay.getDay() + 1),
-  );
-}
-
-/*** Resolve the month initially shown by the calendar sheet. */
-function resolveInitialMonth(value: string | null, minDate: string | undefined): Date {
-  const base = parseLocalDate(value) ?? parseLocalDate(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,
-  maxDate: Date | undefined,
-): boolean {
-  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;
-  return true;
-}
-
-function DatePickerInner({
-  themeId: _themeId,
-  mode: _mode,
-  value,
-  onValueChange,
-  label,
-  description,
-  error,
-  placeholder = 'Choose date',
-  minDate,
-  maxDate,
-  disabled = false,
-  required = false,
-  formatDate,
-  testID,
-  interactionPolicy,
-}: DatePickerProps) {
-  const { dismiss, present } = useBottomSheet();
-  const passive = interactionPolicy === 'passive';
-  const displayValue = value
-    ? formatDate
-      ? formatDate(value)
-      : formatDefaultDate(value)
-    : placeholder;
-
-  /*** Present the calendar content through the shared BottomSheet controller. */
-  function openPicker() {
-    if (passive) return;
-    present({
-      content: (
-        <DatePickerSheet
-          description={description}
-          interactionPolicy={interactionPolicy}
-          label={label}
-          maxDate={maxDate}
-          minDate={minDate}
-          onDismiss={dismiss}
-          onSelect={(date) => {
-            onValueChange?.(formatLocalDate(date));
-            dismiss();
-          }}
-          testID={testID}
-          value={value}
-        />
-      ),
-    });
-  }
-
-  return (
-    <Field
-      disabled={disabled}
-      errorText={error}
-      invalid={Boolean(error)}
-      label={label ? renderLabel(label, description) : undefined}
-      required={required}
-      testID={testID}
-    >
-      <Button
-        disabled={disabled}
-        interactionPolicy={interactionPolicy}
-        onPress={openPicker}
-        testID={testID ? `${testID}-trigger` : undefined}
-        trailingIcon={{ name: 'calendar-outline' }}
-        variant="outline"
-      >
-        {displayValue}
-      </Button>
-    </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]);
-  const resolvedMaxDate = React.useMemo(() => parseLocalDate(maxDate), [maxDate]);
-  const resolvedMinDate = React.useMemo(() => parseLocalDate(minDate), [minDate]);
-
-  return (
-    <Stack gap="m" p="m" testID={testID ? `${testID}-sheet` : undefined}>
-      <PickerSheetHeader description={description} title={label ?? 'Choose date'} />
-      <DatePickerMonthNavigation
-        displayMonth={displayMonth}
-        interactionPolicy={interactionPolicy}
-        maxDate={resolvedMaxDate}
-        minDate={resolvedMinDate}
-        onMonthChange={setDisplayMonth}
-      />
-      <DatePickerWeekdays />
-      <DatePickerCalendar
-        interactionPolicy={interactionPolicy}
-        maxDate={resolvedMaxDate}
-        minDate={resolvedMinDate}
-        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,
-}: {
-  displayMonth: Date;
-  interactionPolicy: DatePickerProps['interactionPolicy'];
-  maxDate: Date | undefined;
-  minDate: Date | undefined;
-  onMonthChange: (month: Date) => void;
-}) {
-  const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);
-  const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);
-
-  return (
-    <Stack align="center" direction="row" justify="space-between">
-      <Button
-        disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}
-        interactionPolicy={interactionPolicy}
-        onPress={() => onMonthChange(previousMonth)}
-        size="s"
-        variant="ghost"
-      >
-        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>
-  );
-}
-
-/*** 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,
-}: {
-  interactionPolicy: DatePickerProps['interactionPolicy'];
-  maxDate: Date | undefined;
-  minDate: Date | undefined;
-  monthDays: readonly (Date | null)[];
-  onSelect: (value: Date) => void;
-  testID: string | undefined;
-  value: DatePickerProps['value'];
-}) {
-  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
-              color={selected ? 'primary' : 'neutral'}
-              disabled={isDateDisabled(day, minDate, maxDate)}
-              interactionPolicy={interactionPolicy}
-              onPress={() => onSelect(day)}
-              size="s"
-              testID={testID ? `${testID}-day-${day.getDate()}` : undefined}
-              variant={selected ? 'solid' : 'ghost'}
-            >
-              {day.getDate()}
-            </Button>
-          </Box>
-        );
-      })}
-    </Stack>
-  );
-}
-
-/***
- * Date input control with calendar selection and formatted display value.
- */
-export const DatePicker = withZoraThemeScope(DatePickerInner);
+export { DatePicker } from './DatePicker.web';

package/src/features/date-picker/adapters/inbound/DatePicker.web.tsx

@@ -0,0 +1,48 @@
+import { Popover } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { DatePickerProps } from '../../../../types/date-picker';
+import { Surface } from '../../../surface/public';
+import { DatePickerContent } from '../../composition/DatePickerContent';
+import { DatePickerField } from '../../composition/DatePickerField';
+import { DatePickerTrigger } from '../../composition/DatePickerTrigger';
+import { formatLocalDate } from '../../utils/localDate';
+
+/*** Renders DatePicker with anchored web Popover presentation. */
+export const DatePicker = withZoraThemeScope(DatePickerInner);
+
+/*** Connects the shared DatePicker field and content to the web Popover host. */
+function DatePickerInner({ themeId: _themeId, mode: _mode, ...props }: DatePickerProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <DatePickerField {...props}>
+      <Popover
+        anchor={({ toggle }) => <DatePickerTrigger {...props} onPress={toggle} />}
+        interactionPolicy={props.interactionPolicy}
+        onOpenChange={setOpen}
+        open={open}
+        placement="bottom-start"
+        testID={props.testID ? `${props.testID}-popover` : undefined}
+      >
+        <Surface variant="raised">
+          <DatePickerContent
+            description={props.description}
+            interactionPolicy={props.interactionPolicy}
+            label={props.label}
+            maxDate={props.maxDate}
+            minDate={props.minDate}
+            onDismiss={() => setOpen(false)}
+            onSelect={(date) => {
+              props.onValueChange?.(formatLocalDate(date));
+              setOpen(false);
+            }}
+            testID={props.testID}
+            value={props.value}
+          />
+        </Surface>
+      </Popover>
+    </DatePickerField>
+  );
+}