@ankhorage/zora 12.1.0 → 14.0.0

package/src/features/date-picker/composition/DatePickerField.tsx

@@ -0,0 +1,53 @@
+import { Field } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { DatePickerProps } from '../../../types/date-picker';
+import { Stack } from '../../layout/public';
+import { Text } from '../../typography/public';
+
+/*** Renders the shared DatePicker field frame around a platform-specific trigger. */
+export function DatePickerField({
+  children,
+  description,
+  disabled,
+  error,
+  label,
+  required,
+  testID,
+}: DatePickerFieldProps) {
+  return (
+    <Field
+      disabled={disabled}
+      errorText={error}
+      invalid={Boolean(error)}
+      label={label ? renderLabel(label, description) : undefined}
+      required={required}
+      testID={testID}
+    >
+      {children}
+    </Field>
+  );
+}
+
+interface DatePickerFieldProps extends Pick<
+  DatePickerProps,
+  'description' | 'disabled' | 'error' | 'label' | 'required' | 'testID'
+> {
+  children: React.ReactNode;
+}
+
+/*** Renders the picker 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>
+  );
+}

package/src/features/date-picker/composition/DatePickerTrigger.tsx

@@ -0,0 +1,47 @@
+import type React from 'react';
+
+import type { DatePickerProps } from '../../../types/date-picker';
+import { Button } from '../../button/public';
+import { parseLocalDate } from '../utils/localDate';
+
+/*** Renders the shared DatePicker trigger button for native and web hosts. */
+export function DatePickerTrigger({
+  disabled,
+  formatDate,
+  interactionPolicy,
+  onPress,
+  placeholder = 'Choose date',
+  testID,
+  value,
+}: DatePickerTriggerProps) {
+  const displayValue = value
+    ? formatDate
+      ? formatDate(value)
+      : formatDefaultDate(value)
+    : placeholder;
+
+  return (
+    <Button
+      disabled={disabled}
+      interactionPolicy={interactionPolicy}
+      onPress={onPress}
+      testID={testID ? `${testID}-trigger` : undefined}
+      trailingIcon={{ name: 'calendar-outline' }}
+      variant="outline"
+    >
+      {displayValue}
+    </Button>
+  );
+}
+
+interface DatePickerTriggerProps extends Pick<
+  DatePickerProps,
+  'disabled' | 'formatDate' | 'interactionPolicy' | 'placeholder' | 'testID' | 'value'
+> {
+  onPress: () => void;
+}
+
+/*** Formats a date using the current platform locale when no formatter is supplied. */
+function formatDefaultDate(value: string): React.ReactNode {
+  return parseLocalDate(value)?.toLocaleDateString() ?? value;
+}

package/src/features/date-picker/public.test.ts

@@ -2,14 +2,24 @@ import { expect, test } from 'bun:test';
 
 import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
 
-test('DatePicker exposes a serializable manifest contract through the shared BottomSheet', async () => {
-  const source = await Bun.file('src/features/date-picker/adapters/inbound/DatePicker.tsx').text();
+test('DatePicker keeps one manifest contract across native and web presentation hosts', async () => {
+  const nativeSource = await Bun.file(
+    'src/features/date-picker/adapters/inbound/DatePicker.native.tsx',
+  ).text();
+  const webSource = await Bun.file(
+    'src/features/date-picker/adapters/inbound/DatePicker.web.tsx',
+  ).text();
+  const contentSource = await Bun.file(
+    'src/features/date-picker/composition/DatePickerContent.tsx',
+  ).text();
   const meta = ZORA_COMPONENT_META.DatePicker;
 
   expect(meta.directManifestNode).toBe(true);
   expect(meta.props.value?.type).toBe('string');
   expect(meta.events?.valueChange?.eventType).toBe('datePicker.valueChange');
   expect(meta.bindings?.props?.value?.value.type).toBe('string');
-  expect(source).toContain('useBottomSheet()');
-  expect(source).toContain('formatLocalDate(date)');
+  expect(nativeSource).toContain('useBottomSheet()');
+  expect(webSource).toContain('<Popover');
+  expect(webSource).not.toContain('useBottomSheet');
+  expect(contentSource).toContain('DatePickerCalendar');
 });

package/src/features/time-picker/adapters/inbound/TimePicker.native.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TimePickerProps } from '../../../../types/time-picker';
+import { useBottomSheet } from '../../../bottom-sheet/public';
+import { TimePickerContent } from '../../composition/TimePickerContent';
+import { TimePickerField } from '../../composition/TimePickerField';
+import { TimePickerTrigger } from '../../composition/TimePickerTrigger';
+
+/*** Renders TimePicker with native BottomSheet presentation. */
+export const TimePicker = withZoraThemeScope(TimePickerInner);
+
+/*** Connects the shared TimePicker field and content to the native BottomSheet host. */
+function TimePickerInner({ themeId: _themeId, mode: _mode, ...props }: TimePickerProps) {
+  const { dismiss, present } = useBottomSheet();
+
+  const openPicker = React.useCallback(() => {
+    if (props.interactionPolicy === 'passive') return;
+
+    present({
+      content: (
+        <TimePickerContent
+          description={props.description}
+          formatTime={props.formatTime}
+          interactionPolicy={props.interactionPolicy}
+          label={props.label}
+          maxTime={props.maxTime}
+          minTime={props.minTime}
+          onDismiss={dismiss}
+          onSelect={(time) => {
+            props.onValueChange?.(time);
+            dismiss();
+          }}
+          stepMinutes={props.stepMinutes}
+          testID={props.testID}
+          value={props.value}
+        />
+      ),
+    });
+  }, [dismiss, present, props]);
+
+  return (
+    <TimePickerField {...props}>
+      <TimePickerTrigger {...props} onPress={openPicker} />
+    </TimePickerField>
+  );
+}

package/src/features/time-picker/adapters/inbound/TimePicker.tsx

@@ -1,258 +1 @@
-import { Field } from '@ankhorage/surface';
-import React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
-import type { TimePickerProps } from '../../../../types/time-picker';
-import { useBottomSheet } from '../../../bottom-sheet/public';
-import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
-import { Text } from '../../../typography/public';
-
-const MINUTES_PER_DAY = 24 * 60;
-const DEFAULT_STEP_MINUTES = 30;
-
-/*** 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>
-  );
-}
-
-/*** Parse one HH:mm value to minutes since midnight. */
-function parseTimeToMinutes(value: string | undefined): number | undefined {
-  if (!value) return undefined;
-  const match = /^(\d{2}):(\d{2})$/.exec(value);
-  if (!match) return undefined;
-
-  const hours = Number(match[1]);
-  const minutes = Number(match[2]);
-  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return undefined;
-  return hours * 60 + minutes;
-}
-
-/*** Format minutes since midnight as HH:mm. */
-function formatMinutes(value: number): string {
-  const hours = Math.floor(value / 60);
-  const minutes = value % 60;
-  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
-}
-
-/*** Normalize the configured time step to a positive whole minute. */
-function resolveStepMinutes(stepMinutes: number | undefined): number {
-  if (stepMinutes === undefined || !Number.isFinite(stepMinutes) || stepMinutes <= 0) {
-    return DEFAULT_STEP_MINUTES;
-  }
-  return Math.max(1, Math.floor(stepMinutes));
-}
-
-/*** Generate selectable HH:mm values within the configured range. */
-function generateTimeOptions({
-  minTime,
-  maxTime,
-  stepMinutes,
-}: Pick<TimePickerProps, 'maxTime' | 'minTime' | 'stepMinutes'>): string[] {
-  const step = resolveStepMinutes(stepMinutes);
-  const min = parseTimeToMinutes(minTime) ?? 0;
-  const max = parseTimeToMinutes(maxTime) ?? MINUTES_PER_DAY - 1;
-  return Array.from({ length: Math.ceil(MINUTES_PER_DAY / step) }, (_, index) => index * step)
-    .filter((minute) => minute >= min && minute <= max)
-    .map(formatMinutes);
-}
-
-function TimePickerInner({
-  themeId: _themeId,
-  mode: _mode,
-  value,
-  onValueChange,
-  label,
-  description,
-  error,
-  placeholder = 'Choose time',
-  minTime,
-  maxTime,
-  stepMinutes,
-  disabled = false,
-  required = false,
-  formatTime,
-  testID,
-  interactionPolicy,
-}: TimePickerProps) {
-  const { dismiss, present } = useBottomSheet();
-  const passive = interactionPolicy === 'passive';
-  const displayValue = value ? (formatTime ? formatTime(value) : value) : placeholder;
-
-  /*** Present the time options through the shared BottomSheet controller. */
-  function openPicker() {
-    if (passive) return;
-    present({
-      content: (
-        <TimePickerSheet
-          description={description}
-          formatTime={formatTime}
-          interactionPolicy={interactionPolicy}
-          label={label}
-          maxTime={maxTime}
-          minTime={minTime}
-          onDismiss={dismiss}
-          onSelect={(time) => {
-            onValueChange?.(time);
-            dismiss();
-          }}
-          stepMinutes={stepMinutes}
-          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: 'chevron-down-outline' }}
-        variant="outline"
-      >
-        {displayValue}
-      </Button>
-    </Field>
-  );
-}
-
-interface TimePickerSheetProps extends Pick<
-  TimePickerProps,
-  | 'description'
-  | 'formatTime'
-  | 'interactionPolicy'
-  | 'label'
-  | 'maxTime'
-  | 'minTime'
-  | 'stepMinutes'
-  | 'testID'
-  | 'value'
-> {
-  onDismiss: () => void;
-  onSelect: (value: string) => void;
-}
-
-/*** Render time selection content inside the shared BottomSheet host. */
-function TimePickerSheet({
-  description,
-  formatTime,
-  interactionPolicy,
-  label,
-  maxTime,
-  minTime,
-  onDismiss,
-  onSelect,
-  stepMinutes,
-  testID,
-  value,
-}: TimePickerSheetProps) {
-  const options = React.useMemo(
-    () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
-    [maxTime, minTime, stepMinutes],
-  );
-
-  return (
-    <Stack gap="m" p="m" testID={testID ? `${testID}-sheet` : undefined}>
-      <PickerSheetHeader description={description} title={label ?? 'Choose time'} />
-      <ScrollView style={styles.options}>
-        <Stack gap="xxs">
-          {options.map((option) => (
-            <TimePickerOption
-              formatTime={formatTime}
-              interactionPolicy={interactionPolicy}
-              key={option}
-              onSelect={onSelect}
-              option={option}
-              selected={option === value}
-              testID={testID}
-            />
-          ))}
-        </Stack>
-      </ScrollView>
-      <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
-        Cancel
-      </Button>
-    </Stack>
-  );
-}
-
-/*** Render the shared title block used by the time 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 one accessible selectable time option. */
-function TimePickerOption({
-  formatTime,
-  interactionPolicy,
-  onSelect,
-  option,
-  selected,
-  testID,
-}: Pick<TimePickerSheetProps, 'formatTime' | 'interactionPolicy' | 'testID'> & {
-  onSelect: (value: string) => void;
-  option: string;
-  selected: boolean;
-}) {
-  return (
-    <Button
-      accessibilityState={{ selected }}
-      fullWidth
-      interactionPolicy={interactionPolicy}
-      onPress={() => onSelect(option)}
-      testID={testID ? `${testID}-option-${option}` : undefined}
-      variant={selected ? 'soft' : 'ghost'}
-    >
-      {formatTime ? formatTime(option) : option}
-    </Button>
-  );
-}
-
-const styles = StyleSheet.create({
-  options: { maxHeight: 360 },
-});
-
-/***
- * Time input control with bottom-sheet selection and formatted display value.
- */
-export const TimePicker = withZoraThemeScope(TimePickerInner);
+export { TimePicker } from './TimePicker.web';

package/src/features/time-picker/adapters/inbound/TimePicker.web.tsx

@@ -0,0 +1,49 @@
+import { Popover } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TimePickerProps } from '../../../../types/time-picker';
+import { Surface } from '../../../surface/public';
+import { TimePickerContent } from '../../composition/TimePickerContent';
+import { TimePickerField } from '../../composition/TimePickerField';
+import { TimePickerTrigger } from '../../composition/TimePickerTrigger';
+
+/*** Renders TimePicker with anchored web Popover presentation. */
+export const TimePicker = withZoraThemeScope(TimePickerInner);
+
+/*** Connects the shared TimePicker field and content to the web Popover host. */
+function TimePickerInner({ themeId: _themeId, mode: _mode, ...props }: TimePickerProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <TimePickerField {...props}>
+      <Popover
+        anchor={({ toggle }) => <TimePickerTrigger {...props} onPress={toggle} />}
+        interactionPolicy={props.interactionPolicy}
+        onOpenChange={setOpen}
+        open={open}
+        placement="bottom-start"
+        testID={props.testID ? `${props.testID}-popover` : undefined}
+      >
+        <Surface variant="raised">
+          <TimePickerContent
+            description={props.description}
+            formatTime={props.formatTime}
+            interactionPolicy={props.interactionPolicy}
+            label={props.label}
+            maxTime={props.maxTime}
+            minTime={props.minTime}
+            onDismiss={() => setOpen(false)}
+            onSelect={(time) => {
+              props.onValueChange?.(time);
+              setOpen(false);
+            }}
+            stepMinutes={props.stepMinutes}
+            testID={props.testID}
+            value={props.value}
+          />
+        </Surface>
+      </Popover>
+    </TimePickerField>
+  );
+}

package/src/features/time-picker/composition/TimePickerContent.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+
+import type { TimePickerProps } from '../../../types/time-picker';
+import { Button } from '../../button/public';
+import { Stack } from '../../layout/public';
+import { Text } from '../../typography/public';
+
+const MINUTES_PER_DAY = 24 * 60;
+const DEFAULT_STEP_MINUTES = 30;
+
+/*** Renders shared time options for native BottomSheet and web Popover hosts. */
+export function TimePickerContent({
+  description,
+  formatTime,
+  interactionPolicy,
+  label,
+  maxTime,
+  minTime,
+  onDismiss,
+  onSelect,
+  stepMinutes,
+  testID,
+  value,
+}: TimePickerContentProps) {
+  const options = React.useMemo(
+    () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
+    [maxTime, minTime, stepMinutes],
+  );
+
+  return (
+    <Stack gap="m" p="m" testID={testID ? `${testID}-content` : undefined}>
+      <PickerHeader description={description} title={label ?? 'Choose time'} />
+      <ScrollView style={styles.options}>
+        <Stack gap="xxs">
+          {options.map((option) => (
+            <TimePickerOption
+              formatTime={formatTime}
+              interactionPolicy={interactionPolicy}
+              key={option}
+              onSelect={onSelect}
+              option={option}
+              selected={option === value}
+              testID={testID}
+            />
+          ))}
+        </Stack>
+      </ScrollView>
+      <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
+        Cancel
+      </Button>
+    </Stack>
+  );
+}
+
+interface TimePickerContentProps extends Pick<
+  TimePickerProps,
+  | 'description'
+  | 'formatTime'
+  | 'interactionPolicy'
+  | 'label'
+  | 'maxTime'
+  | 'minTime'
+  | 'stepMinutes'
+  | 'testID'
+  | 'value'
+> {
+  onDismiss: () => void;
+  onSelect: (value: string) => void;
+}
+
+/*** Renders the shared title block used by picker overlays. */
+function PickerHeader({
+  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>
+  );
+}
+
+/*** Renders one accessible selectable time option. */
+function TimePickerOption({
+  formatTime,
+  interactionPolicy,
+  onSelect,
+  option,
+  selected,
+  testID,
+}: Pick<TimePickerContentProps, 'formatTime' | 'interactionPolicy' | 'testID'> & {
+  onSelect: (value: string) => void;
+  option: string;
+  selected: boolean;
+}) {
+  return (
+    <Button
+      accessibilityState={{ selected }}
+      fullWidth
+      interactionPolicy={interactionPolicy}
+      onPress={() => onSelect(option)}
+      testID={testID ? `${testID}-option-${option}` : undefined}
+      variant={selected ? 'soft' : 'ghost'}
+    >
+      {formatTime ? formatTime(option) : option}
+    </Button>
+  );
+}
+
+/*** Parses one HH:mm value to minutes since midnight. */
+function parseTimeToMinutes(value: string | undefined): number | undefined {
+  if (!value) return undefined;
+  const match = /^(\d{2}):(\d{2})$/.exec(value);
+  if (!match) return undefined;
+
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return undefined;
+  return hours * 60 + minutes;
+}
+
+/*** Formats minutes since midnight as HH:mm. */
+function formatMinutes(value: number): string {
+  const hours = Math.floor(value / 60);
+  const minutes = value % 60;
+  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+}
+
+/*** Normalizes the configured time step to a positive whole minute. */
+function resolveStepMinutes(stepMinutes: number | undefined): number {
+  if (stepMinutes === undefined || !Number.isFinite(stepMinutes) || stepMinutes <= 0) {
+    return DEFAULT_STEP_MINUTES;
+  }
+  return Math.max(1, Math.floor(stepMinutes));
+}
+
+/*** Generates selectable HH:mm values within the configured range. */
+function generateTimeOptions({
+  minTime,
+  maxTime,
+  stepMinutes,
+}: Pick<TimePickerProps, 'maxTime' | 'minTime' | 'stepMinutes'>): string[] {
+  const step = resolveStepMinutes(stepMinutes);
+  const min = parseTimeToMinutes(minTime) ?? 0;
+  const max = parseTimeToMinutes(maxTime) ?? MINUTES_PER_DAY - 1;
+  return Array.from({ length: Math.ceil(MINUTES_PER_DAY / step) }, (_, index) => index * step)
+    .filter((minute) => minute >= min && minute <= max)
+    .map(formatMinutes);
+}
+
+const styles = StyleSheet.create({
+  options: { maxHeight: 360 },
+});