@oxy.so/bloom 4.0.0 → 4.1.0

package/src/content-panel/ContentPanel.web.tsx

@@ -8,10 +8,10 @@
  *
  *  1. BLEED-MASK overlay (`z-30`): a `box-shadow` ring in the GUTTER color
  *     (Bloom `background` token) drawn OVER content that bleeds into the thin
- *     lateral gutter / rounded corners. `clip-path: inset(-12px)` keeps that
- *     ring off the side columns. It sits below opaque chrome (headers/banners),
+ *     lateral gutter / rounded corners. The clip stays within the panel’s horizontal bounds
+ *     and covers the full declared vertical insets. It sits below opaque chrome (headers/banners),
  *     so it only masks the content's bleed, never the chrome. No border.
- *     (`clip-path` MUST be the arbitrary class — RN-web drops it from `style`.)
+ *     (`clip-path` lives in the adopted sheet — RN-web drops it from `style`.)
  *
  *  2. BORDER-FRAME overlay (`z-[120]`): a single 1px rounded `border-border`
  *     outline with a transparent interior, ABOVE all content. Being one element
@@ -44,9 +44,12 @@
  * "100% of my own height" at all).
  *
  * The bleed-mask's `clip-path` also changes with the mode, not just its box
- * size: `inset(-12px)` (viewport mode) is a deliberate small halo — the
- * `box-shadow`'s `GUTTER_MASK_SPREAD` is 40px, and the clip-path caps how much
- * of that is actually allowed to paint past the box edge. A document-scroll
+ * size: viewport mode allows just 1px of horizontal overlap, while the vertical
+ * halo and shadow expand to cover overlayInset. A former 12px horizontal halo
+ * painted over a neighbouring sidebar Fab when navigationGap was zero. A 1px
+ * horizontal overlap now covers device-pixel rounding without reaching that Fab. The old fixed inset(-12px)
+ * leaked a 4px strip with a 16px gutter and could not cover a 72px header
+ * inset. GUTTER_MASK_SPREAD (40px) remains the minimum shadow spread. A document-scroll
  * consumer has nothing else positioned right above/below the panel for that
  * halo to land on. A bounded-shell consumer might — the whole reason for
  * `overlaySizing="panel"` is that something IS placed right outside the panel
@@ -82,9 +85,11 @@
  * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28` /
  * `md:` parts — whole class strings are selected per mode instead).
  */
-import React, { memo } from 'react';
+import React, { memo, useInsertionEffect } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import type { WebCssStyle } from '../styles/web-view-style';
 import { StyledView } from '../styles/styled-primitives';
 
 import { useOptionalPanelChrome } from '../styles/panel-chrome';
@@ -144,6 +149,22 @@ const RESPONSIVE_WEB: Record<
   },
 };
 
+// The mask must reach the viewport edges for arbitrary shell gutters. Keep
+// horizontal bleed to one CSS pixel to cover fractional device-pixel seams
+// without reaching adjacent controls. CSS owns
+// responsive framing, including the sticky inset inherited by PageHeader.
+const PANEL_INSET_CSS = `
+[data-bloom-panel] { --bloom-panel-sticky-top: 0px; }
+[data-bloom-panel="framed"] { --bloom-panel-sticky-top: var(--bloom-panel-inset-top); }
+@media (min-width: 500px) { [data-bloom-panel="500"] { --bloom-panel-sticky-top: var(--bloom-panel-inset-top); } }
+@media (min-width: 640px) { [data-bloom-panel="640"] { --bloom-panel-sticky-top: var(--bloom-panel-inset-top); } }
+@media (min-width: 768px) { [data-bloom-panel="768"] { --bloom-panel-sticky-top: var(--bloom-panel-inset-top); } }
+@media (min-width: 1024px) { [data-bloom-panel="1024"] { --bloom-panel-sticky-top: var(--bloom-panel-inset-top); } }
+[data-bloom-panel-mask="viewport"] {
+  clip-path: inset(calc(-1 * max(12px, var(--bloom-panel-inset-top))) -1px calc(-1 * max(12px, var(--bloom-panel-inset-bottom))) -1px);
+}
+`;
+
 const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   children,
   framed,
@@ -161,6 +182,11 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   overlaySizing = 'viewport',
   overlayInset,
 }) => {
+  // Install only for a mounted panel. Insertion effects run before layout and
+  // paint on web, and never during SSR, so import remains side-effect free.
+  useInsertionEffect(() => {
+    adoptStyleSheet('bloom-content-panel-insets', PANEL_INSET_CSS);
+  }, []);
   // Dev-only invariant — must run unconditionally (before deriving any
   // mode-specific branch) so the hook order stays stable (rules of hooks).
   useContentPanelNestingGuard();
@@ -247,16 +273,24 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
       } as unknown as ViewStyle)
     : undefined;
 
+  const insetVars: WebCssStyle = {
+    '--bloom-panel-inset-top': `${insetTop}px`,
+    '--bloom-panel-inset-bottom': `${insetBottom}px`,
+  };
+  const maskSpread = boundToPanel ? GUTTER_MASK_SPREAD : Math.max(GUTTER_MASK_SPREAD, insetTop, insetBottom);
+
   return (
     <ContentPanelNestingContext.Provider value={true}>
       <StyledView
         testID="content-panel-surface"
+        {...{ dataSet: { bloomPanel: boundToPanel || framed === false ? 'none' : responsive ? String(framedFrom) : 'framed' } }}
         className={surfaceClass}
         style={[
           // `--bloom-surface` rides the element that carries the fill, so CSS
           // below the panel and `useSurfaceFill()` below the panel cannot
           // disagree about what the panel painted.
           surfaceFillVars(publishedFill),
+          insetVars,
           surfaceStyle,
         ]}
       >
@@ -267,15 +301,16 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
           <StyledView
             key="bleed-mask"
             testID="content-panel-bleed-mask"
+            {...{ dataSet: { bloomPanelMask: boundToPanel ? 'panel' : 'viewport' } }}
             pointerEvents="none"
             className={
               boundToPanel
                 ? `web:[grid-area:1/1] z-30 h-full w-full rounded-radius-28 ${responsive ? bp.overlayHidden : ''} web:[clip-path:inset(0)]`
                 : responsive
-                  ? `web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]`
-                  : 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]'
+                  ? `web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]`
+                  : 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)]'
             }
-            style={{ ...insetStyle, boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}` }}
+            style={{ ...insetStyle, boxShadow: `0 0 0 ${maskSpread}px ${maskColor ?? colors.background}` }}
           />
         )}
         {/* (2) Border-frame overlay — one continuous rounded border, above all.

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';

package/src/delivery-slot/constants.ts

@@ -0,0 +1,45 @@
+import type { DeliveryTier } from './types';
+
+/** The words a tier is drawn and announced with. */
+export const DELIVERY_TIER_LABELS: Record<DeliveryTier, string> = {
+  standard: 'Standard',
+  express: 'Express',
+};
+
+/** What a taken window says. */
+export const DELIVERY_SOLD_OUT_LABEL = 'Sold out';
+
+/** The option that belongs to no day. */
+export const DELIVERY_ASAP_LABEL = 'As soon as possible';
+
+/** The field's own name, which is also the radio group's. */
+export const DELIVERY_FIELD_LABEL = 'Delivery time';
+export const DELIVERY_DAY_LABEL = 'Day';
+
+/** What there is to say when a day has nothing left. */
+export const DELIVERY_EMPTY_TITLE = 'No windows left';
+export const DELIVERY_EMPTY_DESCRIPTION = 'Pick another day, or take the next courier.';
+
+/**
+ * The radio dot at the head of an option row. 20 is `Radio`'s `lg` rung: the
+ * row it marks is two lines tall, and the 16 `md` dot read as a bullet beside
+ * it rather than as the control.
+ */
+export const DELIVERY_DOT = 20;
+/** The glyph the ASAP row draws instead of a dot, when it is not chosen. */
+export const DELIVERY_GLYPH = 20;
+
+/** Between the day strip and the options, and between the options. */
+export const DELIVERY_SECTION_GAP = 16;
+export const DELIVERY_OPTION_GAP = 8;
+
+/**
+ * The option row's corner and border. Radius 12 is the field rung every picker
+ * in the library draws its choosable boxes at; the row is bordered rather than
+ * washed because an unbordered list of windows and a bordered day strip above
+ * it read as two different controls.
+ */
+export const DELIVERY_OPTION_RADIUS = 12;
+
+/** The separator between the parts of an option's detail line. */
+export const DELIVERY_DETAIL_SEPARATOR = ' · ';

package/src/delivery-slot/index.ts

@@ -0,0 +1,24 @@
+export { DeliverySlotDays } from './DeliverySlotDays';
+export { DeliverySlotOption } from './DeliverySlotOption';
+export { DeliverySlotPicker } from './DeliverySlotPicker';
+export {
+  DELIVERY_ASAP_LABEL,
+  DELIVERY_DAY_LABEL,
+  DELIVERY_EMPTY_DESCRIPTION,
+  DELIVERY_EMPTY_TITLE,
+  DELIVERY_FIELD_LABEL,
+  DELIVERY_OPTION_RADIUS,
+  DELIVERY_SOLD_OUT_LABEL,
+  DELIVERY_TIER_LABELS,
+} from './constants';
+export { joinDeliveryParts, resolveDeliverySlotPaint, windowDetail, windowName } from './shared';
+export type { DeliverySlotPaint } from './shared';
+export type {
+  DeliveryAsapOption,
+  DeliveryDay,
+  DeliverySlotDaysProps,
+  DeliverySlotOptionProps,
+  DeliverySlotPickerProps,
+  DeliveryTier,
+  DeliveryWindow,
+} from './types';