@delacour/react-native-ui 0.1.0-alpha.3 → 0.1.0

package/src/components/button/button.variants.ts

@@ -41,6 +41,11 @@ export type ButtonSpinnerPlacement = (typeof BUTTON_SPINNER_PLACEMENTS)[number];
 export type ButtonGroupOrientation = (typeof BUTTON_GROUP_ORIENTATIONS)[number];
 export type ButtonGroupPosition = (typeof BUTTON_GROUP_POSITIONS)[number];
 
+/** How a group shapes its run. Omitted, a group joins — that is what a group is. */
+export type ButtonGroupShapeOptions = {
+	isAttached?: boolean;
+};
+
 /** A member's place in its group, or `none` for a button standing on its own. */
 export type ButtonGroupSlotPosition = ButtonGroupPosition | "none";
 
@@ -135,8 +140,9 @@ export const buttonVariants = tv({
 		/**
 		 * A `Button.Group`'s box.
 		 *
-		 * Holds no `gap` and no `overflow-hidden`, and both absences are
-		 * load-bearing. A gap is the seam this component exists to close. A clip
+		 * Holds no `gap` while attached and no `overflow-hidden` ever, and both
+		 * absences are load-bearing. A gap is the seam a joined run exists to
+		 * close — only `isAttached: false` adds one, where there is no seam. A clip
 		 * would square off the very corners the position compounds just rounded,
 		 * and would have to restate the group's own corner to avoid it — while the
 		 * members already square themselves, which is the whole point.
@@ -192,6 +198,21 @@ export const buttonVariants = tv({
 			horizontal: { group: "flex-row self-start" },
 			vertical: { group: "flex-col" },
 		},
+		// Declared after `orientation` on purpose: `tv` merges in declaration
+		// order, so `self-stretch` here replaces the horizontal run's `self-start`
+		// rather than losing to it.
+		/** A `Button.Group` that spans its parent. The members split it — see `isStretched`. */
+		isFullWidth: { true: { group: "w-full self-stretch" }, false: {} },
+		/** A `Button.Group` whose members join into one shape. Detached, they stand apart by a gap. */
+		isAttached: { true: {}, false: { group: "gap-2" } },
+		/**
+		 * A member of a full-width horizontal run, taking an equal share of it.
+		 *
+		 * `basis-0` is the half that matters. With `flex-1` alone Yoga shares out
+		 * only the space left over after each member's content width, so the
+		 * widths still follow the labels; from a zero basis every share is equal.
+		 */
+		isStretched: { true: { root: "flex-1 basis-0" }, false: {} },
 		// `middle` is the one position whose corner needs neither the size nor the
 		// orientation, so it lands here rather than in six compound cells that
 		// would all say the same word.
@@ -304,6 +325,9 @@ export const buttonVariants = tv({
 		orientation: "horizontal",
 		groupPosition: "none",
 		isSeamed: false,
+		isFullWidth: false,
+		isAttached: true,
+		isStretched: false,
 		isDisabled: false,
 		isLoading: false,
 		isDimmedWhileLoading: false,
@@ -413,9 +437,18 @@ export function resolveGroupedButtonSize(own: ButtonSize | undefined, group: But
  * trade {@link resolveSpinnerSwapIndex} already makes. React Native has no
  * sibling selector, so this is the only place a member's corner can be decided.
  *
+ * A detached run (`isAttached: false`) places every member `only` — the lone
+ * position, which draws the lone button's corner — rather than minting a fourth
+ * sentinel: a spaced member *is* a button on its own that happens to share props.
+ *
  * Pure, so the whole matrix is reachable from `bun test`. See AGENTS.md.
  */
-export function resolveGroupPositions(isMember: readonly boolean[]): (ButtonGroupPosition | null)[] {
+export function resolveGroupPositions(
+	isMember: readonly boolean[],
+	{ isAttached = true }: ButtonGroupShapeOptions = {}
+): (ButtonGroupPosition | null)[] {
+	if (!isAttached) return isMember.map((member) => (member ? "only" : null));
+
 	const count = isMember.reduce((total, member) => (member ? total + 1 : total), 0);
 	let seen = 0;
 
@@ -445,9 +478,16 @@ export function resolveGroupPositions(isMember: readonly boolean[]): (ButtonGrou
  * `isMember[-1]` is `undefined`, so the first child falls out as `false` without
  * a case of its own.
  *
+ * A detached run has no shared edge, so nothing overlaps: a point of overlap
+ * there would only eat into the gap.
+ *
  * Pure, so the whole matrix is reachable from `bun test`. See AGENTS.md.
  */
-export function resolveGroupSeams(isMember: readonly boolean[]): boolean[] {
+export function resolveGroupSeams(
+	isMember: readonly boolean[],
+	{ isAttached = true }: ButtonGroupShapeOptions = {}
+): boolean[] {
+	if (!isAttached) return isMember.map(() => false);
 	return isMember.map((member, index) => member && isMember[index - 1] === true);
 }
 
@@ -463,6 +503,10 @@ export function resolveGroupSeams(isMember: readonly boolean[]): boolean[] {
  * while its neighbours hold still, so the seam the group exists to close tears
  * open for the length of the press. `fade` moves no geometry.
  *
+ * Only while the group is *attached*. A detached run has no seam to tear, so
+ * its members fall back to the lone button's `scale`. `isAttached` defaults to
+ * `true`, because joining is what a group does when it says nothing.
+ *
  * A caller still gets `scale` by asking for it, on one button or on a whole
  * group. `pressedScale` beats both, because `resolvePressedState` lets an
  * explicit value win on the axis it names — see `pressable.variants.ts`.
@@ -472,9 +516,30 @@ export function resolveGroupSeams(isMember: readonly boolean[]): boolean[] {
 export function resolveButtonFeedback(
 	own: PressableFeedback | undefined,
 	group: PressableFeedback | undefined,
-	isGrouped: boolean
+	isGrouped: boolean,
+	isAttached = true
 ): PressableFeedback {
-	return own ?? group ?? (isGrouped ? BUTTON_GROUP_FEEDBACK : BUTTON_FEEDBACK);
+	return own ?? group ?? (isGrouped && isAttached ? BUTTON_GROUP_FEEDBACK : BUTTON_FEEDBACK);
+}
+
+/**
+ * Whether a group's members take an equal share of its width.
+ *
+ * Horizontal only. A vertical run already stretches its members on the cross
+ * axis, and `basis-0` on the main axis of a column with no definite height
+ * would collapse every member to nothing — so `isFullWidth` on a vertical group
+ * widens the group and does nothing further.
+ *
+ * Pure, so the whole matrix is reachable from `bun test`. See AGENTS.md.
+ */
+export function resolveGroupMemberStretch({
+	isFullWidth,
+	orientation,
+}: {
+	isFullWidth: boolean;
+	orientation: ButtonGroupOrientation;
+}): boolean {
+	return isFullWidth && orientation === "horizontal";
 }
 
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

package/src/components/button/index.ts

@@ -28,6 +28,7 @@ export {
 	BUTTON_VARIANTS,
 	type ButtonGroupOrientation,
 	type ButtonGroupPosition,
+	type ButtonGroupShapeOptions,
 	type ButtonGroupSlotPosition,
 	type ButtonIconSize,
 	type ButtonLabelSize,
@@ -41,6 +42,7 @@ export {
 	resolveButtonLayout,
 	resolveButtonSizeStep,
 	resolveGroupedButtonSize,
+	resolveGroupMemberStretch,
 	resolveGroupPositions,
 	resolveGroupSeams,
 } from "./button.variants";

package/src/components/calendar/AGENTS.md

@@ -0,0 +1,142 @@
+# Calendar
+
+An always-visible month grid for picking one day, several days or a range. Compound root plus
+`Calendar.Header`, `Calendar.Nav`, `Calendar.Caption`, `Calendar.Weekdays`, `Calendar.Grid`,
+`Calendar.Day` and `Calendar.Picker`. Used inline on a screen, and as the body of the date pickers'
+sheets.
+
+`import { Calendar } from "@delacour/react-native-ui/calendar";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/calendar`; also re-exports every date helper and type |
+| `calendar.tsx` | Root: selection and month state, bounds, the context value, the `Object.assign` surface |
+| `calendar-header.tsx` | `Calendar.Header` — prev arrow, caption, next arrow by default |
+| `calendar-nav.tsx` | `Calendar.Nav` — a ghost `Button` that disables itself at a bound |
+| `calendar-caption.tsx` | `Calendar.Caption` — label, or the button that cycles days → months → years |
+| `calendar-weekdays.tsx` | `Calendar.Weekdays` — short names shown, full names spoken |
+| `calendar-grid.tsx` | `Calendar.Grid` — six weeks, the paging pan and slide, hosts the picker |
+| `calendar-day.tsx` | `Calendar.Day` — one cell: band, circle, number or custom content |
+| `calendar-picker.tsx` | `Calendar.Picker` — the months and years jump views |
+| `calendar.context.tsx` | `CalendarContext`, `useCalendar()`, `useCalendarContext()`, `useCalendarPart()` |
+| `calendar.types.ts` | `CalendarSelection` (the mode union), `CalendarProps`, `CalendarCaptionLayout` |
+| `calendar.date.ts` | **Shared leaf.** `CalendarDate` maths, matchers, grid, selection rules, `Intl` formatters. No React Native |
+| `calendar.date.test.ts` | |
+| `calendar.variants.ts` | Slotted `tv()`, the day-state, range-role, bounds, axes and page-direction resolvers |
+| `calendar.variants.test.ts` | |
+
+## The date leaf
+
+- **A day is `{ year, month, day }` and nothing else.** No `Date`, no time zone, no UTC
+  round-trip — a `Date` built at midnight in Auckland is the previous day in UTC, and that is the
+  bug every calendar built on `Date` ships once. `toDate`/`fromDate` cross over by **local**
+  fields, at the edge only.
+- **`weekdayOf` is Sakamoto's method**, not `new Date().getDay()`, so the leaf never touches the
+  device clock or zone. A test checks it against the platform for every day of a leap year.
+- **`calendar.date.ts` is the only module another folder may import from here.** `date-picker`
+  and `date-time-picker` reach `../calendar/calendar.date` — never `../calendar`, which would pull
+  the whole compound in (package rule 3).
+- **`resolveWeekStart` prefers `Intl.Locale#getWeekInfo`/`weekInfo`** and falls back to a region
+  table, because Hermes support for either is not guaranteed. Unknown is Monday (ISO 8601).
+- **Formatters never throw.** An unknown locale falls back to `en`; a formatter that throws inside
+  render takes the screen down for a typo.
+- **`parseDate` is strict** — `YYYY-MM-DD` and a real day, or `null`. A lenient parser turns
+  `2026-02-31` into 3 March, which is a different booking.
+
+## Selection
+
+- **`mode` is the discriminant** of `CalendarSelection`, so `selected` and `onSelect` are typed for
+  the mode named. Internally one `CalendarSelectionState` union flows through
+  `useControllableState`, and `emitSelection` narrows back to the caller's shape.
+- **Single:** a tap on the selected day clears it. **Multiple:** toggles; always sorted, deduped.
+- **Range** (`applyRangeTap`): empty → start; start + any day → complete, in either direction,
+  with the earlier day as `start` (`normaliseRange`); complete + tap → a new start. Backwards
+  completes rather than moving the start, because tapping check-out first is as common as
+  check-in first and a tap that silently discards the first one reads as a bug. A range that would contain a disabled day
+  (`rangeContainsDisabled`) restarts at the tapped day instead of completing — a stay that spans a
+  closed night is not bookable, and silently accepting it is worse than making the user tap again.
+- **Disabled vs read-only.** `isDisabled` makes everything inert and fades the root. `isReadOnly`
+  ignores day taps and leaves paging working — looking at another month changes nothing.
+
+## Layout
+
+- **Always six weeks** (`CALENDAR_WEEKS`). A month that fits in four or five rows still draws six,
+  so height and column positions never shift while paging. An outside day with
+  `showOutsideDays={false}` is an empty cell of the same height, never a missing one.
+- **The whole cell is the target**, not the circle. A column on a phone is wider than the circle
+  is tall, and the gap belongs to whichever day it sits beside.
+- **The cell is on the input scale** (`h-input-*`, `size-input-*`, `text-input-*`): sm 36, md 44,
+  lg 52. `md` and `lg` meet 44pt.
+- **The jump view sits over the grid** (`absolute inset-0`) while the weeks are hidden with
+  `opacity-0`, not unmounted, so opening it never changes the calendar's height. The weekday row
+  hides the same way.
+
+## Drawing
+
+- **A day is three layers:** `band` (absolute, edge to edge, behind), `dayBase` (the circle) and
+  the label. The band spans the full cell so adjacent days join into one strip.
+- **The band ends at the centre of each end cell, and the circle is the cap.** Start runs from its
+  cell's centre to the right edge, end from the left edge to its centre, middle spans the cell; none
+  is rounded. A cell is wider than its circle, so the first version — a band rounded across the
+  whole end cell — showed a crescent of band beside the circle at both ends. A lone `only` day
+  draws no band. At a week's edge the strip simply stops and resumes on the next row.
+- **Today is a ring (`border-ring`) and `text-primary`, never a fill**, so it cannot be mistaken
+  for a selection.
+- **Variant:** `primary` fills `bg-primary`, band `bg-primary/15`; `secondary` fills
+  `bg-primary/25` under `text-foreground`, band `bg-primary/10`. The primary band is a tint of the selection colour, not
+  `bg-accent`: light `--accent` is 0.97 on a 0.985 page, so the band all but vanished in light
+  while reading fine in dark. A tint of `primary` reads in both themes and joins the end caps
+  as one shape. `secondary` is tinted from `primary` for the same reason — `bg-secondary`
+  and `bg-muted` are 0.97 on the same 0.985 page, and the recorded preview showed a soft
+  selection with no visible circle at all. `isInvalid` overrides both with `bg-destructive` / `bg-destructive-soft`.
+- **Colour is on the text slots only** (rule 1): `dayLabel`, `weekdayLabel`, `captionText`,
+  `pickerItemLabel`. A test holds every `View` slot to carrying no `text-*` colour.
+- **Custom day content** gets `labelClassName` in its render props, so a price under the number
+  takes the selected colour with it rather than reimplementing the tone table.
+
+## Paging
+
+- **A Gesture Handler pan on `Calendar.Grid`**, `activeOffsetX` ±12 and `failOffsetY` ±12: it
+  claims a sideways drag and gives up a vertical one, so the calendar lives inside a `ScrollView`
+  or a sheet without stealing its scroll.
+- **`resolvePageDirection` is pure and tested.** A quarter of the width, or a release faster than
+  500 pt/s, pages; a flick against the drag settles back; it never pages past a bound or on an
+  unmeasured grid.
+- **Slide out, swap, slide in.** The old month slides off, the month changes on the JS thread, and
+  the new one slides in from the opposite side — the same entrance the arrows give. The grid
+  clips (`overflow-hidden`) so the swap frame is never seen.
+- **Calm motion skips both slides.** The page change is behaviour and always happens.
+- **A drag toward a bound resists** (20% travel) and settles back with a `light` haptic — the edge
+  is felt rather than the month silently refusing to turn.
+- **Tapping an outside day** (with `selectOutsideDays`) selects it and pages to its month.
+
+## Accessibility
+
+- Each day is a button labelled with the full date (`formatDate(…, { style: "full" })`), hinted
+  "Today" / "Range start" / "Range end", with `selected` and `disabled` state.
+- The grid is `role="grid"`, named by an enclosing `Field.Label` or else the month.
+- **Paging for screen readers lives on the caption**, as increment/decrement actions. An
+  adjustable grid would fold its child buttons into itself on both platforms and make the days
+  unreachable.
+- A month change is announced with `AccessibilityInfo.announceForAccessibility` — on change only,
+  never on mount, because the caption already says it.
+- Today is re-read on `AppState` → `active`, so a calendar left open overnight marks the right day.
+
+- **Parts derive their `testID` from the root's** (`resolvePartTestID`): `testID="booking"`
+  names the days `booking-day-2026-10-05`, the arrows `booking-prev`/`booking-next`, the caption
+  `booking-caption` and the jump-view items `booking-month-10`/`booking-year-2026`. The default
+  anatomy renders forty-odd parts no caller writes, and an end-to-end test or a recorded preview
+  flow has to reach one particular day all the same. No root `testID`, no part ids.
+
+## Field
+
+`resolveCalendarAxes` is the nearest-wins chain: the calendar's own `isDisabled` / `isInvalid` /
+`isReadOnly` / `size` / `variant`, else the `Field`'s. The field's label names the grid. It does
+not `registerPress` — there is no single focus target for a row tap to reach.
+
+## Not here
+
+Non-Gregorian calendars, side-by-side months, week numbers, drag-to-select ranges, time. The
+anchored presentation belongs to `DatePicker`.

package/src/components/calendar/calendar-caption.tsx

@@ -0,0 +1,116 @@
+import { type ReactElement, useCallback } from "react";
+import { type AccessibilityActionEvent, View, type ViewProps } from "react-native";
+import { IconChevronDownSmall } from "../../icons/central";
+import { Icon } from "../icon";
+import { Pressable } from "../pressable";
+import { Text } from "../text";
+import { useCalendarPart } from "./calendar.context";
+import { formatMonthYear, formatYear } from "./calendar.date";
+import { calendarVariants, resolvePartTestID } from "./calendar.variants";
+
+export type CalendarCaptionProps = Omit<ViewProps, "children"> & {
+	className?: string;
+};
+
+const PAGE_ACTIONS = [
+	{ name: "decrement", label: "Previous" },
+	{ name: "increment", label: "Next" },
+];
+
+/**
+ * The month and year above the grid.
+ *
+ * With `captionLayout="picker"` it is a button: in the grid it opens the months view, in the
+ * months view the years view, and in the years view it returns to the grid. With `"label"` it is
+ * text.
+ *
+ * **It is where a screen-reader user pages.** A grid of buttons cannot itself be an adjustable
+ * element — iOS and Android both fold an accessible container's children into it, and the days
+ * would become unreachable — so the caption carries the increment and decrement actions instead:
+ * swipe up or down on "October 2026" to move a month. As a plain label it takes the `adjustable`
+ * role outright; as a button the two actions sit beside its activation.
+ */
+export function CalendarCaption({ className, ...props }: CalendarCaptionProps): ReactElement {
+	const {
+		canGoNext,
+		canGoPrev,
+		captionLayout,
+		goNext,
+		goPrev,
+		isDisabled,
+		locale,
+		setView,
+		size,
+		testID,
+		variant,
+		view,
+		visibleMonth,
+		yearSpan,
+	} = useCalendarPart("Calendar.Caption");
+	const slots = calendarVariants({ size, variant });
+
+	const text =
+		view === "days"
+			? formatMonthYear(visibleMonth, locale)
+			: view === "months"
+				? formatYear(visibleMonth.year, locale)
+				: `${formatYear(yearSpan.from, locale)} – ${formatYear(yearSpan.to, locale)}`;
+
+	const handleAction = useCallback(
+		(event: AccessibilityActionEvent) => {
+			if (event.nativeEvent.actionName === "increment" && canGoNext) goNext();
+			if (event.nativeEvent.actionName === "decrement" && canGoPrev) goPrev();
+		},
+		[canGoNext, canGoPrev, goNext, goPrev]
+	);
+
+	const handlePress = useCallback(() => {
+		setView(view === "days" ? "months" : view === "months" ? "years" : "days");
+	}, [setView, view]);
+
+	const label = <Text className={slots.captionText()}>{text}</Text>;
+
+	if (captionLayout === "label") {
+		return (
+			<View
+				accessibilityActions={PAGE_ACTIONS}
+				accessibilityLabel={text}
+				accessibilityRole="adjustable"
+				accessible
+				className={slots.caption({ className })}
+				onAccessibilityAction={handleAction}
+				testID={resolvePartTestID(testID, "caption")}
+				{...props}
+			>
+				{label}
+			</View>
+		);
+	}
+
+	const hint =
+		view === "days"
+			? "Opens the month and year picker"
+			: view === "months"
+				? "Opens the year list"
+				: "Returns to the month";
+
+	return (
+		<Pressable
+			accessibilityActions={PAGE_ACTIONS}
+			accessibilityHint={hint}
+			accessibilityLabel={text}
+			className={slots.caption({ className })}
+			disabled={isDisabled}
+			feedback="fade"
+			haptic="selection"
+			onAccessibilityAction={handleAction}
+			onPress={handlePress}
+			testID={resolvePartTestID(testID, "caption")}
+			{...props}
+		>
+			{label}
+			<Icon color="muted-foreground" icon={IconChevronDownSmall} size="sm" />
+		</Pressable>
+	);
+}
+CalendarCaption.displayName = "DelacourUI.Calendar.Caption";

package/src/components/calendar/calendar-day.tsx

@@ -0,0 +1,103 @@
+import { type ReactElement, type ReactNode, useCallback } from "react";
+import { View } from "react-native";
+import { Pressable } from "../pressable";
+import { Text } from "../text";
+import { useCalendarPart } from "./calendar.context";
+import { type CalendarDate, formatDate, isSameMonth, serialiseDate } from "./calendar.date";
+import { type CalendarDayState, calendarVariants, resolveDayState, resolvePartTestID } from "./calendar.variants";
+
+/** What a function child of `Calendar.Day` is handed. */
+export type CalendarDayRenderProps = CalendarDayState & {
+	date: CalendarDate;
+	/** The class the default number is drawn with — size, weight and colour for this state. */
+	labelClassName: string;
+};
+
+export type CalendarDayProps = {
+	/** The day this cell draws. */
+	date: CalendarDate;
+	/**
+	 * Custom content inside the circle, in place of the number. A function is handed the day's
+	 * state, so a price under the number can take the selected colour with it.
+	 */
+	children?: ReactNode | ((props: CalendarDayRenderProps) => ReactNode);
+	className?: string;
+};
+
+/** The state words a screen reader adds after the date. */
+function describeState(state: CalendarDayState): string | undefined {
+	const parts: string[] = [];
+	if (state.isToday) parts.push("Today");
+	if (state.rangeRole === "start") parts.push("Range start");
+	if (state.rangeRole === "end") parts.push("Range end");
+	return parts.length > 0 ? parts.join(", ") : undefined;
+}
+
+/**
+ * One day: its column share, the range band behind it, and the circle with the number.
+ *
+ * **The whole cell is the target**, not the circle — a column on a phone is wider than the
+ * circle is tall, and the gap between two circles belongs to whichever day it sits beside.
+ *
+ * The band is drawn for a range's start, middle and end and never for a lone day, which is a
+ * circle with nothing to join. An outside day with `showOutsideDays` off is an empty cell of the
+ * same height, so the grid's rows never move.
+ *
+ * Announced as a button with the full date — "Monday 5 October 2026" — plus today and the range
+ * end it is, and `selected` and `disabled` as accessibility state.
+ */
+export function CalendarDay({ date, children, className }: CalendarDayProps): ReactElement {
+	const calendar = useCalendarPart("Calendar.Day");
+	const state = resolveDayState({
+		cell: { date, isOutside: !isSameMonth(date, calendar.visibleMonth), weekIndex: 0, dayIndex: 0 },
+		isCalendarDisabled: calendar.isDisabled,
+		isDisabled: calendar.isDateDisabled,
+		isReadOnly: calendar.isReadOnly,
+		selectOutsideDays: calendar.selectOutsideDays,
+		selection: calendar.selection,
+		showOutsideDays: calendar.showOutsideDays,
+		today: calendar.today,
+	});
+	const slots = calendarVariants({
+		isDisabled: state.isDisabled,
+		isInvalid: calendar.isInvalid,
+		isOutside: state.isOutside,
+		isToday: state.isToday,
+		rangeRole: state.rangeRole ?? "none",
+		size: calendar.size,
+		tone: state.tone,
+		variant: calendar.variant,
+	});
+
+	const { select } = calendar;
+	const handlePress = useCallback(() => select(date), [date, select]);
+
+	if (state.isHidden) {
+		return <View className={slots.cell({ className })} importantForAccessibility="no-hide-descendants" />;
+	}
+
+	const labelClassName = slots.dayLabel();
+	const content =
+		typeof children === "function"
+			? children({ ...state, date, labelClassName })
+			: (children ?? <Text className={labelClassName}>{date.day}</Text>);
+	const showsBand = state.rangeRole !== null && state.rangeRole !== "only";
+
+	return (
+		<Pressable
+			accessibilityHint={describeState(state)}
+			accessibilityLabel={formatDate(date, { locale: calendar.locale, style: "full" })}
+			accessibilityState={{ selected: state.isSelected }}
+			className={slots.cell({ className })}
+			disabled={!state.isPressable}
+			feedback="fade"
+			haptic="selection"
+			onPress={handlePress}
+			testID={resolvePartTestID(calendar.testID, `day-${serialiseDate(date)}`)}
+		>
+			{showsBand ? <View className={slots.band()} /> : null}
+			<View className={slots.dayBase()}>{content}</View>
+		</Pressable>
+	);
+}
+CalendarDay.displayName = "DelacourUI.Calendar.Day";