@oxy.so/bloom 3.6.0 → 4.1.0

package/src/data-table/DataTableSelect.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Platform, View } from 'react-native';
 
 import { Badge } from '../badge';
-import { resolveButtonRamps } from '../button/shared';
 import { useControllableState } from '../hooks/use-controllable-state';
 import {
   Select,
@@ -39,7 +38,7 @@ function OptionMark({ option, color }: { option: DataTableSelectOption; color: s
     const Icon = option.icon;
     return <Icon width={OPTION_ICON_SIZE} height={OPTION_ICON_SIZE} fill={color} />;
   }
-  if (option.dot) return <Badge dot color={option.dot} />;
+  if (option.dot) return <Badge dot tone={option.dot} />;
   return null;
 }
 
@@ -61,7 +60,6 @@ export function DataTableSelect({
   testID,
 }: DataTableSelectProps) {
   const theme = useTheme();
-  const { neutral } = resolveButtonRamps(theme);
   const [value, setValue] = useControllableState<string | undefined>({
     value: valueProp,
     defaultValue,
@@ -80,14 +78,14 @@ export function DataTableSelect({
           className={current?.icon ? 'pl-2' : undefined}
           style={[{ width }, SHRINK_TO_CONTENT]}
         >
-          <SelectValue leading={current ? <OptionMark option={current} color={neutral[500]} /> : null} />
+          <SelectValue leading={current ? <OptionMark option={current} color={theme.colors.textSecondary} /> : null} />
           <SelectIcon />
         </SelectTrigger>
         <SelectContent<DataTableSelectOption>
           label={label}
           items={[...options]}
           renderItem={(item) => (
-            <SelectItem value={item.value} label={item.label} leading={<OptionMark option={item} color={neutral[500]} />}>
+            <SelectItem value={item.value} label={item.label} leading={<OptionMark option={item} color={theme.colors.textSecondary} />}>
               <SelectItemText>{item.label}</SelectItemText>
             </SelectItem>
           )}

package/src/data-table/types.ts

@@ -2,7 +2,7 @@ import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { ButtonProps } from '../button/types';
-import type { AccentTone } from '../theme/accent-colors';
+import type { BloomTone } from '../appearance';
 import type { TableColumnLayout, TableSize } from '../table/types';
 import type { BloomIconComponent } from '../icons/icon-component';
 
@@ -208,7 +208,7 @@ export interface DataTableSearchProps {
   /** Accessible name, e.g. `"Search customers"`. */
   label: string;
   value?: string;
-  onChangeText?: (text: string) => void;
+  onValueChange?: (text: string) => void;
   /** Default `"Search"`. */
   placeholder?: string;
   testID?: string;
@@ -223,7 +223,7 @@ export interface DataTableSelectOption extends DataTableOption {
    * A status dot (`Badge dot`): `green` is `success`, `yellow` is `warning`,
    * `indigo` is `info`.
    */
-  dot?: AccentTone;
+  dot?: BloomTone;
   /** An 18px icon in `foreground-icon-secondary`. */
   icon?: DataTableIconComponent;
 }

package/src/date-picker/MeetingScheduler.tsx

@@ -509,16 +509,12 @@ export function MeetingScheduler({
             </>
           ) : null}
         </View>
-        <Button
-          onPress={() => {
+        <Button onPress={() => {
             // Guarded here too, not only by `disabled`: a booking needs a time.
             if (!pending?.time) return;
             setCommitted(pending);
             setOpenState(false);
-          }}
-          disabled={!pending?.time}
-          testID={testID ? `${testID}-send` : undefined}
-        >
+          }} disabled={!pending?.time} testID={testID ? `${testID}-send` : undefined}>
           {sendLabel}
         </Button>
       </View>

package/src/date-picker/PickerShell.tsx

@@ -77,16 +77,7 @@ export function PickerShell({
   return (
     <Popover open={open} onOpenChange={disabled ? undefined : onOpenChange}>
       <PopoverTrigger asChild disabled={disabled}>
-        <Button
-          variant="secondary"
-          size="medium"
-          leadingIcon={CalendarIcon}
-          trailingIcon={trailingIcon}
-          disabled={disabled}
-          accessibilityLabel={`${accessibilityLabel}, ${triggerText}`}
-          style={[{ height: TRIGGER_HEIGHT }, style]}
-          testID={testID}
-        >
+        <Button size="md" leadingIcon={CalendarIcon} trailingIcon={trailingIcon} disabled={disabled} accessibilityLabel={`${accessibilityLabel}, ${triggerText}`} style={[{ height: TRIGGER_HEIGHT }, style]} testID={testID} appearance="outline" tone="neutral">
           {triggerText}
         </Button>
       </PopoverTrigger>
@@ -117,7 +108,7 @@ export function PickerActions({
 }) {
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-      <Button variant="secondary" onPress={onCancel} testID={testID ? `${testID}-cancel` : undefined}>
+      <Button onPress={onCancel} testID={testID ? `${testID}-cancel` : undefined} appearance="subtle" tone="neutral">
         Cancel
       </Button>
       <Button onPress={onApply} disabled={applyDisabled} testID={testID ? `${testID}-apply` : undefined}>

package/src/date-picker/TimeField.tsx

@@ -74,7 +74,8 @@ function TimeFieldComponent({
   // `"--:--"` names nothing, so the name is a prop — or, inside a `Field`, the
   // field's label. The density contract supplies the size the same way: a
   // container can ask for `small` once instead of on every control.
-  const size = useInheritedControl('density', sizeProp, 'medium');
+  const density = useInheritedControl('density', sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : undefined, 'md');
+  const size = density === 'sm' ? 'small' : 'medium';
   const field = useFieldMembership({ accessibilityLabel, disabled: disabledProp });
   const disabled = field.disabled;
   const palette = useMemo(() => resolveCalendarPalette(theme), [theme]);

package/src/date-picker/palette.ts

@@ -1,24 +1,7 @@
-import { BUTTON_SHADOW, resolveButtonRamps } from '../button/shared';
+import { BUTTON_SHADOW } from '../button/shared';
 import type { Theme } from '../theme/types';
 
-/**
- * Date-picker tokens, resolved through the ramps `Button` builds from Bloom's
- * theme.
- *
- *                     light         dark
- *   popup surface     neutral-100   neutral-900
- *   month panel       card          neutral-800
- *   title, day        text          text
- *   weekday, chevron  neutral-500   neutral-500
- *   disabled day      neutral-400   neutral-600
- *   day / nav hover   neutral-200   neutral-800
- *   range band        accent-100    accent-950
- *   range edge        accent-300    accent-800
- *   focus ring        accent-500    accent-500
- *   chip border       neutral-200   neutral-700
- *   chip focused      neutral-400   neutral-600
- *   pill / preset on  neutral-200   neutral-800
- */
+/** Surface and text slots read canonical theme roles; fixed shadow geometry is unchanged. */
 export interface CalendarPalette {
   popup: string;
   panel: string;
@@ -39,40 +22,15 @@ export interface CalendarPalette {
 }
 
 export function resolveCalendarPalette(theme: Theme): CalendarPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
   const c = theme.colors;
-  return theme.isDark
-    ? {
-        popup: n[900],
-        panel: n[800],
-        text: c.text,
-        secondaryText: n[500],
-        disabledText: n[600],
-        hover: n[800],
-        rangeBand: accent[950],
-        rangeEdge: accent[800],
-        ring: accent[500],
-        chipBorder: n[700],
-        chipBorderFocused: n[600],
-        tertiary: n[800],
-        shadowXs: BUTTON_SHADOW.dark,
-        shadowDropdown: '0 1px 1px 0 rgb(0 0 0 / 0.14), 0 4px 4px 0 rgb(0 0 0 / 0.10)',
-      }
-    : {
-        popup: n[100],
-        panel: c.card,
-        text: c.text,
-        secondaryText: n[500],
-        disabledText: n[400],
-        hover: n[200],
-        rangeBand: accent[100],
-        rangeEdge: accent[300],
-        ring: accent[500],
-        chipBorder: n[200],
-        chipBorderFocused: n[400],
-        tertiary: n[200],
-        shadowXs: BUTTON_SHADOW.light,
-        shadowDropdown: '0 1px 1px 0 rgb(0 0 0 / 0.04), 0 4px 4px 0 rgb(0 0 0 / 0.02)',
-      };
+  return {
+    popup: c.backgroundSecondary, panel: c.card, text: c.text,
+    secondaryText: c.textSecondary, disabledText: c.textTertiary,
+    hover: c.backgroundTertiary, rangeBand: c.primarySubtle,
+    rangeEdge: c.primarySubtle, ring: c.primary,
+    chipBorder: c.border, chipBorderFocused: c.primary, tertiary: c.backgroundTertiary,
+    shadowXs: theme.isDark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
+    shadowDropdown: theme.isDark ? '0 1px 1px 0 rgb(0 0 0 / 0.14), 0 4px 4px 0 rgb(0 0 0 / 0.10)' : '0 1px 1px 0 rgb(0 0 0 / 0.04), 0 4px 4px 0 rgb(0 0 0 / 0.02)',
+  };
 }
 

package/src/delivery-slot/DeliverySlotDays.tsx

@@ -0,0 +1,88 @@
+import React, { memo } from 'react';
+
+import { ChipRow } from '../chip';
+import { SelectChip } from '../listing-actions/parts';
+import { Text } from '../typography';
+import { DELIVERY_DAY_LABEL } from './constants';
+import type { DeliverySlotDaysProps } from './types';
+
+/**
+ * The days across the top: which day's windows are listed below.
+ *
+ *   tile     `SelectChip shape="day"` — 56 wide, radius 12, a hairline at rest,
+ *            a neutral wash under a pointer, INVERTED when chosen
+ *   text     the weekday caption-1-regular over the date headline-semibold in
+ *            tabular figures, so a two-digit date does not widen the tile
+ *   strip    `ChipRow`, 8 apart, which supplies the sideways scroll, the fade
+ *            at whichever edge has more behind it, and the room a focus ring
+ *            needs so the outline is not clipped by its own scroller
+ *   unavailable  struck through at the disabled opacity, not pressable
+ *
+ * Both parts are the library's. `SelectChip` is the day tile Bloom already
+ * draws for scheduling a viewing — a day picked out of a strip is one thing,
+ * not one per app — and `ChipRow` is the sideways scroller five filter rows
+ * share. Nothing here is a new shape.
+ *
+ * It announces as a `radiogroup` of `radio`s, which is what the control IS: one
+ * day of several, exactly one chosen. The WINDOWS are their own group — two
+ * choices, two groups, rather than one group a reader has to infer the halves
+ * of.
+ */
+function DeliverySlotDaysComponent({
+  days,
+  value,
+  onChange,
+  accessibilityLabel = DELIVERY_DAY_LABEL,
+  disabled = false,
+  fadeColor,
+  style,
+  testID,
+}: DeliverySlotDaysProps) {
+  return (
+    <ChipRow
+      role="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      fadeColor={fadeColor}
+      gap={8}
+      style={style}
+      testID={testID}
+    >
+      {days.map((d) => {
+        const unavailable = disabled || d.disabled === true;
+        return (
+          <SelectChip
+            key={d.id}
+            shape="day"
+            selected={d.id === value}
+            disabled={unavailable}
+            onPress={onChange ? () => onChange(d.id) : undefined}
+            accessibilityLabel={d.accessibilityLabel ?? `${d.weekday} ${d.day}`}
+            testID={d.testID ?? (testID ? `${testID}-${d.id}` : undefined)}
+          >
+            {(ink) => (
+              <>
+                <Text variant="caption-1-regular" style={{ color: ink }}>
+                  {d.weekday}
+                </Text>
+                <Text
+                  variant="headline-semibold"
+                  style={{
+                    color: ink,
+                    fontVariant: ['tabular-nums'],
+                    textDecorationLine: unavailable ? 'line-through' : 'none',
+                  }}
+                >
+                  {d.day}
+                </Text>
+              </>
+            )}
+          </SelectChip>
+        );
+      })}
+    </ChipRow>
+  );
+}
+
+export const DeliverySlotDays = memo(DeliverySlotDaysComponent);
+DeliverySlotDays.displayName = 'DeliverySlotDays';

package/src/delivery-slot/DeliverySlotOption.tsx

@@ -0,0 +1,123 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Item } from '../item';
+import { RadioIndicator } from '../radio-indicator';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { DELIVERY_DOT, DELIVERY_GLYPH, DELIVERY_OPTION_RADIUS } from './constants';
+import { joinDeliveryParts, resolveDeliverySlotPaint } from './shared';
+import type { DeliverySlotOptionProps } from './types';
+
+/**
+ * One choosable slot: the window, what class of service it is and what is left
+ * of it, and what it costs.
+ *
+ *   dot      `RadioIndicator` at 20 (`Radio`'s `lg` rung — the row is two lines
+ *            tall, and the 16 dot read as a bullet beside it)
+ *   label    the row's own rung, with an optional glyph before it and a `Badge`
+ *            after it
+ *   detail   body-2-regular secondary — the tier, the capacity, the note, or
+ *            just "Sold out"
+ *   price    body-medium in TABULAR figures at the end, so a column of
+ *            surcharges lines up
+ *   box      radius 12, a hairline at rest; the chosen row takes the text
+ *            colour for its border and one surface step for its fill
+ *
+ * It is `Item` with `role="radio"`: the press target, the hover and press
+ * paint, the disabled opacity and — the part worth naming — the `aria-checked`
+ * that role scopes are all `Item`'s, which is why this is a radio rather than a
+ * pressable that happens to look selected. A sold-out window is `disabled`, so
+ * it announces as unavailable instead of merely being drawn pale.
+ */
+function DeliverySlotOptionComponent({
+  label,
+  detail,
+  price,
+  badge,
+  icon: Icon,
+  selected = false,
+  disabled = false,
+  onPress,
+  accessibilityLabel,
+  style,
+  testID,
+}: DeliverySlotOptionProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveDeliverySlotPaint(theme, surface), [theme, surface]);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  return (
+    <Item
+      role="radio"
+      selected={selected}
+      // `onPress` stays wired while disabled: `Item` drops the handler itself
+      // and keeps the row in the group's tab order, which is what a radio that
+      // is present but unavailable should do.
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityLabel={accessibilityLabel ?? joinDeliveryParts([label, detail, price]) ?? label}
+      leading={<RadioIndicator selected={selected} size={DELIVERY_DOT} testID={id('dot')} />}
+      trailing={
+        price ? (
+          <Text
+            variant="body-medium"
+            numberOfLines={1}
+            testID={id('price')}
+            style={{ color: paint.text, fontVariant: ['tabular-nums'] }}
+          >
+            {price}
+          </Text>
+        ) : null
+      }
+      style={[
+        {
+          borderRadius: DELIVERY_OPTION_RADIUS,
+          borderWidth: 1,
+          borderColor: selected ? paint.text : paint.border,
+          backgroundColor: selected ? paint.selected : 'transparent',
+        },
+        style,
+      ]}
+      testID={testID}
+    >
+      {/*
+        `flex: 1` + `minWidth: 0`: `Item` gives `children` no column of its own,
+        and a one-line Text is `nowrap` on web — without the floor a long window
+        label becomes the row's min-content width and the page scrolls sideways
+        instead of the label truncating.
+      */}
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+          {Icon ? (
+            <Icon width={DELIVERY_GLYPH} height={DELIVERY_GLYPH} fill={paint.textSecondary} />
+          ) : null}
+          <Text
+            variant="body-medium"
+            numberOfLines={1}
+            testID={id('label')}
+            style={{ flexShrink: 1, minWidth: 0, color: paint.text }}
+          >
+            {label}
+          </Text>
+          {badge}
+        </View>
+        {detail ? (
+          <Text
+            variant="body-2-regular"
+            numberOfLines={2}
+            testID={id('detail')}
+            style={{ color: paint.textSecondary }}
+          >
+            {detail}
+          </Text>
+        ) : null}
+      </View>
+    </Item>
+  );
+}
+
+export const DeliverySlotOption = memo(DeliverySlotOptionComponent);
+DeliverySlotOption.displayName = 'DeliverySlotOption';

package/src/delivery-slot/DeliverySlotPicker.tsx

@@ -0,0 +1,266 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { EmptyState } from '../empty-state';
+import { Field } from '../field';
+import { useFieldControl } from '../field/context';
+import { useFieldMembership } from '../field/membership';
+import { RiFlashlightLine } from '../icons/remix/RiFlashlightLine';
+import { RiTimeLine } from '../icons/remix/RiTimeLine';
+import * as Skeleton from '../skeleton';
+import { DeliverySlotDays } from './DeliverySlotDays';
+import { DeliverySlotOption } from './DeliverySlotOption';
+import {
+  DELIVERY_ASAP_LABEL,
+  DELIVERY_DAY_LABEL,
+  DELIVERY_DOT,
+  DELIVERY_EMPTY_DESCRIPTION,
+  DELIVERY_EMPTY_TITLE,
+  DELIVERY_FIELD_LABEL,
+  DELIVERY_OPTION_GAP,
+  DELIVERY_OPTION_RADIUS,
+  DELIVERY_SECTION_GAP,
+  DELIVERY_SOLD_OUT_LABEL,
+} from './constants';
+import { joinDeliveryParts, windowDetail, windowName } from './shared';
+import type { DeliverySlotPickerProps } from './types';
+
+/**
+ * INTERNAL — the two groups, inside the field, so they can READ it.
+ *
+ * It is a separate component and not the body of `DeliverySlotPicker` for one
+ * mechanical reason: `useFieldMembership()` reads the context a `Field`
+ * publishes, and a component cannot read a context it renders itself. Splitting
+ * here is what makes the picker a real member of the field contract — the
+ * field's label names the group, and the field's `disabled` reaches every day
+ * and every window and cannot be opted out of.
+ */
+type DeliverySlotGroupsProps = Omit<
+  DeliverySlotPickerProps,
+  'description' | 'error' | 'required' | 'style'
+> &
+  Required<
+    Pick<
+      DeliverySlotPickerProps,
+      'dayLabel' | 'emptyTitle' | 'emptyDescription' | 'soldOutLabel' | 'loadingRows'
+    >
+  >;
+
+function DeliverySlotGroups({
+  label,
+  days,
+  day,
+  onDayChange,
+  dayLabel,
+  windows,
+  value,
+  onValueChange,
+  asap,
+  disabled,
+  loading,
+  loadingRows,
+  empty,
+  emptyTitle,
+  emptyDescription,
+  tierLabels,
+  soldOutLabel,
+  fadeColor,
+  testID,
+}: DeliverySlotGroupsProps) {
+  // The NAME defers to the field (`??`) and `disabled` combines with it (`||`)
+  // — the two directions `field/membership.ts` exists to stop every family
+  // getting backwards.
+  const field = useFieldMembership({ accessibilityLabel: label, disabled });
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const off = field.disabled;
+
+  const options = useMemo(
+    () =>
+      windows.map((w) => ({
+        window: w,
+        detail: windowDetail(w, tierLabels, soldOutLabel),
+        name: windowName(w, tierLabels, soldOutLabel),
+      })),
+    [windows, tierLabels, soldOutLabel],
+  );
+
+  const asapRow = asap ? (
+    <DeliverySlotOption
+      key="asap"
+      label={asap.label ?? DELIVERY_ASAP_LABEL}
+      detail={asap.soldOut ? soldOutLabel : joinDeliveryParts([asap.eta, asap.note])}
+      price={asap.price}
+      icon={asap.icon ?? RiFlashlightLine}
+      selected={asap.id === value}
+      disabled={off || asap.disabled === true || asap.soldOut === true}
+      onPress={onValueChange ? () => onValueChange(asap.id) : undefined}
+      accessibilityLabel={asap.accessibilityLabel}
+      testID={asap.testID ?? id('asap')}
+    />
+  ) : null;
+
+  const body = loading ? (
+    <View aria-busy accessibilityLabel={field.accessibilityLabel} testID={id('loading')} style={{ gap: DELIVERY_OPTION_GAP }}>
+      {Array.from({ length: loadingRows }, (_unused, index) => (
+        <View
+          key={index}
+          testID={id(`placeholder-${index}`)}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            borderRadius: DELIVERY_OPTION_RADIUS,
+          }}
+        >
+          <Skeleton.Circle size={DELIVERY_DOT} />
+          <View style={{ flex: 1, minWidth: 0, gap: 4 }}>
+            <Skeleton.Text style={{ width: '40%', lineHeight: 16 }} />
+            <Skeleton.Text style={{ width: '60%', lineHeight: 14 }} />
+          </View>
+        </View>
+      ))}
+    </View>
+  ) : options.length === 0 && asapRow == null ? (
+    (empty ?? (
+      <EmptyState
+        variant="compact"
+        icon={RiTimeLine}
+        title={emptyTitle}
+        description={emptyDescription}
+        testID={id('empty')}
+      />
+    ))
+  ) : (
+    <View
+      role="radiogroup"
+      accessibilityLabel={field.accessibilityLabel}
+      aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
+      aria-disabled={off || undefined}
+      testID={id('windows')}
+      style={{ gap: DELIVERY_OPTION_GAP }}
+    >
+      {asapRow}
+      {options.map(({ window: w, detail, name }) => (
+        <DeliverySlotOption
+          key={w.id}
+          label={w.label}
+          detail={detail}
+          price={w.price}
+          selected={w.id === value}
+          disabled={off || w.disabled === true || w.soldOut === true}
+          onPress={onValueChange ? () => onValueChange(w.id) : undefined}
+          accessibilityLabel={name}
+          testID={w.testID ?? id(w.id)}
+        />
+      ))}
+    </View>
+  );
+
+  return (
+    <View style={{ gap: DELIVERY_SECTION_GAP }}>
+      <DeliverySlotDays
+        days={days}
+        value={day}
+        onChange={onDayChange}
+        accessibilityLabel={dayLabel}
+        disabled={off}
+        fadeColor={fadeColor}
+        testID={id('days')}
+      />
+      {body}
+    </View>
+  );
+}
+
+/**
+ * When: a day, then a window of that day — or the next courier.
+ *
+ *   field    standalone, the whole picker IS a `Field` (`multiple`), so one
+ *            label names the choice, one `error` puts it in its invalid state,
+ *            and one `disabled` reaches the strip and every option. Dropped
+ *            inside somebody else's `Field` it renders no second one and reads
+ *            theirs instead.
+ *   days     `DeliverySlotDays`, a `radiogroup` of day tiles
+ *   options  16 under the strip; a `radiogroup` of `DeliverySlotOption`s 8
+ *            apart, the ASAP option at the head of it
+ *   loading  placeholder rows announced as busy — the windows are RELOADED when
+ *            the day changes, and an empty list during that reload reads as
+ *            "nothing left today"
+ *   empty    `EmptyState` at the panel rung
+ *
+ * ## It is a selection, so it is a radio group
+ *
+ * Not a set of pressables that happen to look selected. The difference is what
+ * a screen reader says: a `radiogroup` announces the name of the choice and
+ * "3 of 7", and each row announces whether it is the chosen one. Pressables
+ * announce seven unrelated buttons, one of which is drawn differently.
+ *
+ * ## It computes nothing
+ *
+ * Every window, every price and every reading is a string the app formatted.
+ * The only ordering this family does is the order it was handed.
+ */
+function DeliverySlotPickerComponent({
+  label,
+  description,
+  error,
+  required,
+  disabled,
+  dayLabel = DELIVERY_DAY_LABEL,
+  emptyTitle = DELIVERY_EMPTY_TITLE,
+  emptyDescription = DELIVERY_EMPTY_DESCRIPTION,
+  soldOutLabel = DELIVERY_SOLD_OUT_LABEL,
+  loadingRows = 3,
+  style,
+  testID,
+  ...rest
+}: DeliverySlotPickerProps) {
+  // Is there already a `Field` around us? A picker dropped into somebody's form
+  // must not make a SECOND one: two fields means two labels above one control
+  // and an error the outer field describes and the inner one does not.
+  //
+  // Reading the context here is safe — `Field` is rendered BELOW this node, so
+  // what this sees is the enclosing one — and the branch is a render decision,
+  // not a conditional hook.
+  const enclosing = useFieldControl();
+
+  const groups = (
+    <DeliverySlotGroups
+      {...rest}
+      label={label}
+      disabled={disabled}
+      dayLabel={dayLabel}
+      emptyTitle={emptyTitle}
+      emptyDescription={emptyDescription}
+      soldOutLabel={soldOutLabel}
+      loadingRows={loadingRows}
+      testID={testID}
+    />
+  );
+
+  // Inside somebody's field, the field owns the label, the hint and the error —
+  // and `label` stays undefined by default so the field's own label is what
+  // names the group. Standalone, the picker IS the field and supplies its own.
+  if (enclosing) return <View style={style}>{groups}</View>;
+
+  return (
+    <Field
+      label={label ?? DELIVERY_FIELD_LABEL}
+      description={description}
+      error={error}
+      required={required}
+      disabled={disabled}
+      multiple
+      style={style}
+      testID={testID}
+    >
+      {groups}
+    </Field>
+  );
+}
+
+export const DeliverySlotPicker = memo(DeliverySlotPickerComponent);
+DeliverySlotPicker.displayName = 'DeliverySlotPicker';