@ankhorage/zora 13.0.0 → 14.0.0

package/dist/types/toast.d.ts

@@ -0,0 +1,9 @@
+import type { ToastController as SurfaceToastController, ToastOptions as SurfaceToastOptions, ToastProps as SurfaceToastProps, ToastProviderProps as SurfaceToastProviderProps, ToastStatus as SurfaceToastStatus } from '@ankhorage/surface';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+export type ToastStatus = SurfaceToastStatus;
+export type ToastOptions = SurfaceToastOptions;
+export type ToastController = SurfaceToastController;
+export type ToastProviderProps = SurfaceToastProviderProps;
+export interface ToastProps extends ZoraBaseProps, Omit<SurfaceToastProps, 'testID'> {
+}
+//# sourceMappingURL=toast.d.ts.map

package/dist/types/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/types/toast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,IAAI,sBAAsB,EACzC,YAAY,IAAI,mBAAmB,EACnC,UAAU,IAAI,iBAAiB,EAC/B,kBAAkB,IAAI,yBAAyB,EAC/C,WAAW,IAAI,kBAAkB,EAClC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,kBAAkB,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC;AACrD,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CAAC;AAE3D,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC;CAAG"}

package/dist/types/toast.js

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

package/dist/types/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../src/types/toast.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ToastController as SurfaceToastController,\n  ToastOptions as SurfaceToastOptions,\n  ToastProps as SurfaceToastProps,\n  ToastProviderProps as SurfaceToastProviderProps,\n  ToastStatus as SurfaceToastStatus,\n} from '@ankhorage/surface';\n\nimport type { ZoraBaseProps } from '../theme/ZoraBaseProps';\n\nexport type ToastStatus = SurfaceToastStatus;\nexport type ToastOptions = SurfaceToastOptions;\nexport type ToastController = SurfaceToastController;\nexport type ToastProviderProps = SurfaceToastProviderProps;\n\nexport interface ToastProps extends ZoraBaseProps, Omit<SurfaceToastProps, 'testID'> {}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -42,7 +42,7 @@
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.0",
     "@ankhorage/contracts": "^12.0.1",
-    "@ankhorage/surface": "^4.3.0",
+    "@ankhorage/surface": "^4.4.0",
     "@ankhorage/utility": "^0.8.0",
     "expo-document-picker": "~57.0.1",
     "expo-image-picker": "~57.0.16"

package/src/features/accordion/adapters/inbound/Accordion.tsx

@@ -38,7 +38,7 @@ function MultipleAccordion({
   const openValues = value ?? presentationValues;
 
   return (
-    <AccordionPresentationContext.Provider value={{ mode: 'multiple', openValues }}>
+    <AccordionPresentationContext value={{ mode: 'multiple', openValues }}>
       <SurfaceAccordion
         {...surfaceProps}
         defaultValue={defaultValue}
@@ -52,7 +52,7 @@ function MultipleAccordion({
       >
         {children}
       </SurfaceAccordion>
-    </AccordionPresentationContext.Provider>
+    </AccordionPresentationContext>
   );
 }
 
@@ -75,7 +75,7 @@ function SingleAccordion({
   const openValues = openValue === undefined ? [] : [openValue];
 
   return (
-    <AccordionPresentationContext.Provider value={{ mode: 'single', openValues }}>
+    <AccordionPresentationContext value={{ mode: 'single', openValues }}>
       <SurfaceAccordion
         {...surfaceProps}
         defaultValue={defaultValue}
@@ -89,6 +89,6 @@ function SingleAccordion({
       >
         {children}
       </SurfaceAccordion>
-    </AccordionPresentationContext.Provider>
+    </AccordionPresentationContext>
   );
 }

package/src/features/accordion/adapters/inbound/AccordionItem.tsx

@@ -33,7 +33,7 @@ function AccordionItemInner({
   value,
   ...surfaceItemProps
 }: AccordionItemProps) {
-  const presentation = React.useContext(AccordionPresentationContext);
+  const presentation = React.use(AccordionPresentationContext);
   if (!presentation) {
     throw new Error('AccordionItem must be rendered inside Accordion.');
   }

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>
+  );
+}