@ankhorage/zora 13.0.0 → 14.0.0

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

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

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

@@ -0,0 +1,35 @@
+import type { TimePickerProps } from '../../../types/time-picker';
+import { Button } from '../../button/public';
+
+/*** Renders the shared TimePicker trigger button for native and web hosts. */
+export function TimePickerTrigger({
+  disabled,
+  formatTime,
+  interactionPolicy,
+  onPress,
+  placeholder = 'Choose time',
+  testID,
+  value,
+}: TimePickerTriggerProps) {
+  const displayValue = value ? (formatTime ? formatTime(value) : value) : placeholder;
+
+  return (
+    <Button
+      disabled={disabled}
+      interactionPolicy={interactionPolicy}
+      onPress={onPress}
+      testID={testID ? `${testID}-trigger` : undefined}
+      trailingIcon={{ name: 'chevron-down-outline' }}
+      variant="outline"
+    >
+      {displayValue}
+    </Button>
+  );
+}
+
+interface TimePickerTriggerProps extends Pick<
+  TimePickerProps,
+  'disabled' | 'formatTime' | 'interactionPolicy' | 'placeholder' | 'testID' | 'value'
+> {
+  onPress: () => void;
+}

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

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

package/src/features/toast/adapters/inbound/Toast.tsx

@@ -0,0 +1,13 @@
+import { Toast as SurfaceToast } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ToastProps } from '../../../../types/toast';
+
+/*** Renders a toast notification message with ZORA theme scoping. */
+export const Toast = withZoraThemeScope(ToastInner);
+
+/*** Applies the ZORA theme scope before delegating toast presentation to Surface. */
+function ToastInner({ mode: _mode, themeId: _themeId, ...props }: ToastProps) {
+  return <SurfaceToast {...props} />;
+}

package/src/features/toast/adapters/inbound/ToastProvider.tsx

@@ -0,0 +1,9 @@
+import { ToastProvider as SurfaceToastProvider } from '@ankhorage/surface';
+import React from 'react';
+
+import type { ToastProviderProps } from '../../../../types/toast';
+
+/*** Provides toast state and rendering context through the Surface runtime host. */
+export function ToastProvider(props: ToastProviderProps) {
+  return <SurfaceToastProvider {...props} />;
+}

package/src/features/toast/public.test.ts

@@ -0,0 +1,19 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+
+test('Toast stays imperative and installs its host only when the ZoraProvider capability is enabled', async () => {
+  const [publicSource, providerSource, webCapabilities, nativeCapabilities] = await Promise.all([
+    Bun.file('src/features/toast/public.ts').text(),
+    Bun.file('src/theme/ZoraProvider.tsx').text(),
+    Bun.file('src/theme/ZoraRuntimeCapabilities.web.tsx').text(),
+    Bun.file('src/theme/ZoraRuntimeCapabilities.native.tsx').text(),
+  ]);
+
+  expect(ZORA_COMPONENT_META.Toast?.directManifestNode).toBe(false);
+  expect(ZORA_COMPONENT_META.ToastProvider?.directManifestNode).toBe(false);
+  expect(publicSource).toContain("useToast } from '@ankhorage/surface'");
+  expect(providerSource).toContain('toast = false');
+  expect(webCapabilities).toContain('if (!toast)');
+  expect(nativeCapabilities).toContain('toast ?');
+});

package/src/features/toast/public.ts

@@ -0,0 +1,10 @@
+export type {
+  ToastController,
+  ToastOptions,
+  ToastProps,
+  ToastProviderProps,
+  ToastStatus,
+} from '../../types/toast';
+export { Toast } from './adapters/inbound/Toast';
+export { ToastProvider } from './adapters/inbound/ToastProvider';
+export { useToast } from '@ankhorage/surface';

package/src/features/toast/toastMeta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const toastMeta = {
+  name: 'Toast',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Transient feedback component exposed through the imperative toast workflow, not as a manifest node.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/features/toast/toastProviderMeta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const toastProviderMeta = {
+  name: 'ToastProvider',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Provider for imperative toast feedback; application roots should normally enable the ZoraProvider toast capability.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/index.ts

@@ -16,8 +16,6 @@ export type { SelectOption, SelectProps } from './components/select';
 export { Select } from './components/select';
 export type { TabItem, TabsProps, TabsVariant } from './components/tabs';
 export { Tabs } from './components/tabs';
-export type { ToastOptions, ToastProps, ToastProviderProps, ToastStatus } from './components/toast';
-export { Toast, ToastProvider, useToast } from './components/toast';
 export type { ToolbarActionProps, ToolbarPosition, ToolbarProps } from './components/toolbar';
 export { Toolbar, ToolbarAction } from './components/toolbar';
 export { ZORA_CORE_PLUGIN } from './corePlugin';
@@ -247,6 +245,14 @@ export {
   type TimePickerProps,
   type TimePickerValue,
 } from './features/time-picker/public';
+export type {
+  ToastController,
+  ToastOptions,
+  ToastProps,
+  ToastProviderProps,
+  ToastStatus,
+} from './features/toast/public';
+export { Toast, ToastProvider, useToast } from './features/toast/public';
 export type {
   HeadingAlign,
   HeadingColor,

package/src/metadata/componentMeta.ts

@@ -7,7 +7,6 @@ import { ratingMeta } from '../components/rating/meta';
 import { searchBarMeta } from '../components/search-bar/meta';
 import { selectMeta } from '../components/select/meta';
 import { tabsMeta } from '../components/tabs/meta';
-import { toastMeta, toastProviderMeta } from '../components/toast/meta';
 import { toolbarActionMeta, toolbarMeta } from '../components/toolbar/meta';
 import { accordionItemMeta } from '../features/accordion/accordionItemMeta';
 import { accordionMeta } from '../features/accordion/accordionMeta';
@@ -65,6 +64,8 @@ import {
 } from '../features/skeleton/skeletonMeta';
 import { surfaceMeta } from '../features/surface/surfaceMeta';
 import { timePickerMeta } from '../features/time-picker/timePickerMeta';
+import { toastMeta } from '../features/toast/toastMeta';
+import { toastProviderMeta } from '../features/toast/toastProviderMeta';
 import { headingMeta } from '../features/typography/headingMeta';
 import { textMeta } from '../features/typography/textMeta';
 import { uploaderMeta } from '../features/uploader/uploaderMeta';

package/src/patterns/selection/SelectionProvider.tsx

@@ -10,21 +10,21 @@ type SelectionContextValue = UseSelectionResult;
 
 const SelectionContext = React.createContext<SelectionContextValue | null>(null);
 
+/*** Resolve the effective selection mode. */
 function resolveMode(mode: SelectionMode | undefined): SelectionMode {
   return mode ?? 'single';
 }
 
+/*** Resolve the effective disabled state. */
 function resolveDisabled(disabled: boolean | undefined): boolean {
   return disabled ?? false;
 }
 
 /***
  * Accesses selection state provided by `SelectionProvider`.
- *
- 
  */
 export function useSelection(): UseSelectionResult {
-  const value = React.useContext(SelectionContext);
+  const value = React.use(SelectionContext);
   if (!value) {
     throw new Error(MISSING_CONTEXT_MESSAGE);
   }
@@ -34,8 +34,6 @@ export function useSelection(): UseSelectionResult {
 
 /***
  * Provides selection state for building selectable lists and grids.
- *
- 
  */
 export function SelectionProvider({
   children,
@@ -110,5 +108,5 @@ export function SelectionProvider({
     };
   }, [clear, currentNormalizedIds, resolvedDisabled, resolvedMode, select, selectedIdSet, toggle]);
 
-  return <SelectionContext.Provider value={value}>{children}</SelectionContext.Provider>;
+  return <SelectionContext value={value}>{children}</SelectionContext>;
 }

package/src/registry.ts

@@ -10,7 +10,6 @@ import { Rating } from './components/rating';
 import { SearchBar } from './components/search-bar';
 import { Select } from './components/select';
 import { Tabs } from './components/tabs';
-import { Toast } from './components/toast';
 import { Toolbar, ToolbarAction } from './components/toolbar';
 import { Accordion, AccordionItem } from './features/accordion/public';
 import { ActivityIndicator } from './features/activity-indicator/public';
@@ -56,6 +55,7 @@ import { Progress, ProgressRing } from './features/progress/public';
 import { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from './features/skeleton/public';
 import { Surface } from './features/surface/public';
 import { TimePicker } from './features/time-picker/public';
+import { Toast } from './features/toast/public';
 import { Heading } from './features/typography/public';
 import { Text } from './features/typography/public';
 import { Uploader } from './features/uploader/public';

package/src/theme/ZoraProvider.tsx

@@ -1,26 +1,22 @@
-import type { ThemeConfig } from '@ankhorage/contracts';
 import { ThemeProvider } from '@ankhorage/surface';
-import { BottomSheetProvider } from '@ankhorage/surface/bottom-sheet';
 import React from 'react';
 
+import type { ZoraProviderProps } from '../types/provider';
 import { createZoraThemeConfig } from './createZoraThemeConfig';
-import type { ZoraTheme, ZoraThemeMode } from './types';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
+import { ZoraRuntimeCapabilities } from './ZoraRuntimeCapabilities';
 import { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
 
-export interface ZoraProviderProps {
-  children: React.ReactNode;
-  theme?: ZoraTheme;
-  themeConfig?: ThemeConfig;
-  initialMode?: ZoraThemeMode;
-}
+export type { ZoraProviderProps, ZoraToastCapability } from '../types/provider';
 
-/** Installs the ZORA theme runtime, Surface theme, and shared bottom-sheet controller. */
+/*** Installs the core ZORA theme runtime and explicitly enabled optional capabilities. */
 export function ZoraProvider({
+  bottomSheet = false,
   children,
   theme = zoraDefaultTheme,
   themeConfig,
   initialMode = 'light',
+  toast = false,
 }: ZoraProviderProps) {
   const resolvedConfig = React.useMemo(
     () => themeConfig ?? createZoraThemeConfig(theme),
@@ -29,10 +25,12 @@ export function ZoraProvider({
   const runtimeValue = React.useMemo(() => ({ themeId: resolvedConfig.id }), [resolvedConfig.id]);
 
   return (
-    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>
+    <ZoraThemeRuntimeContext value={runtimeValue}>
       <ThemeProvider initialConfig={resolvedConfig} initialMode={initialMode}>
-        <BottomSheetProvider>{children}</BottomSheetProvider>
+        <ZoraRuntimeCapabilities bottomSheet={bottomSheet} toast={toast}>
+          {children}
+        </ZoraRuntimeCapabilities>
       </ThemeProvider>
-    </ZoraThemeRuntimeContext.Provider>
+    </ZoraThemeRuntimeContext>
   );
 }

package/src/theme/ZoraRuntimeCapabilities.native.tsx

@@ -0,0 +1,19 @@
+import { ToastProvider as SurfaceToastProvider } from '@ankhorage/surface';
+import { BottomSheetProvider } from '@ankhorage/surface/bottom-sheet';
+
+import type { ZoraRuntimeCapabilitiesProps } from '../types/provider';
+
+/*** Installs optional native runtime capabilities without forcing unused hosts. */
+export function ZoraRuntimeCapabilities({
+  bottomSheet,
+  children,
+  toast,
+}: ZoraRuntimeCapabilitiesProps) {
+  const toastContent = toast ? (
+    <SurfaceToastProvider {...(toast === true ? {} : toast)}>{children}</SurfaceToastProvider>
+  ) : (
+    children
+  );
+
+  return bottomSheet ? <BottomSheetProvider>{toastContent}</BottomSheetProvider> : toastContent;
+}

package/src/theme/ZoraRuntimeCapabilities.tsx

@@ -0,0 +1 @@
+export { ZoraRuntimeCapabilities } from './ZoraRuntimeCapabilities.web';

package/src/theme/ZoraRuntimeCapabilities.web.tsx

@@ -0,0 +1,10 @@
+import { ToastProvider as SurfaceToastProvider } from '@ankhorage/surface';
+
+import type { ZoraRuntimeCapabilitiesProps } from '../types/provider';
+
+/*** Installs only web-relevant optional runtime capabilities. */
+export function ZoraRuntimeCapabilities({ children, toast }: ZoraRuntimeCapabilitiesProps) {
+  if (!toast) return children;
+
+  return <SurfaceToastProvider {...(toast === true ? {} : toast)}>{children}</SurfaceToastProvider>;
+}

package/src/theme/ZoraThemeRuntimeContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 import type { ZoraThemeId } from './types';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
@@ -11,6 +11,7 @@ export const ZoraThemeRuntimeContext = createContext<ZoraThemeRuntime>({
   themeId: zoraDefaultTheme.id,
 });
 
+/*** Returns the active ZORA theme runtime. */
 export function useZoraThemeRuntime(): ZoraThemeRuntime {
-  return useContext(ZoraThemeRuntimeContext);
+  return use(ZoraThemeRuntimeContext);
 }

package/src/theme/ZoraThemeScope.tsx

@@ -11,6 +11,17 @@ export interface ZoraThemeScopeProps {
   mode?: ZoraThemeMode;
 }
 
+/*** Applies nested ZORA theme overrides without installing another Surface theme runtime. */
+export function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {
+  if (mode === undefined && themeId === undefined) return children;
+  return (
+    <ZoraThemeScopeInner mode={mode} themeId={themeId}>
+      {children}
+    </ZoraThemeScopeInner>
+  );
+}
+
+/*** Resolves and provides the scoped Surface and ZORA theme runtime values. */
 function ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {
   const parentSurface = useTheme();
   const parentRuntime = useZoraThemeRuntime();
@@ -38,17 +49,8 @@ function ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {
   const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);
 
   return (
-    <ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>
-      <ThemeContext.Provider value={scopedSurfaceValue}>{children}</ThemeContext.Provider>
-    </ZoraThemeRuntimeContext.Provider>
-  );
-}
-
-export function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {
-  if (mode === undefined && themeId === undefined) return children;
-  return (
-    <ZoraThemeScopeInner mode={mode} themeId={themeId}>
-      {children}
-    </ZoraThemeScopeInner>
+    <ZoraThemeRuntimeContext value={scopedRuntimeValue}>
+      <ThemeContext value={scopedSurfaceValue}>{children}</ThemeContext>
+    </ZoraThemeRuntimeContext>
   );
 }

package/src/theme/index.ts

@@ -4,7 +4,7 @@ export type { ThemeModeToggleProps } from './ThemeModeToggleProps';
 export { useZoraTheme } from './useZoraTheme';
 export { withZoraThemeScope } from './withZoraThemeScope';
 export type { ZoraBaseProps } from './ZoraBaseProps';
-export type { ZoraProviderProps } from './ZoraProvider';
+export type { ZoraProviderProps, ZoraToastCapability } from './ZoraProvider';
 export { ZoraProvider } from './ZoraProvider';
 export type { ZoraThemeScopeProps } from './ZoraThemeScope';
 export { ZoraThemeScope } from './ZoraThemeScope';