@delacour/react-native-ui 0.4.0-alpha.20261020155447 → 0.4.1-alpha.20261020200151

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.4.0-alpha.20261020155447",
+	"version": "0.4.1-alpha.20261020200151",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -181,7 +181,7 @@
 		"expo-blur": ">=15",
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.2.0-alpha.20261020155447",
+		"@delacour/react-native-bottom-sheet": ">=0.2.0",
 		"@delacour/react-native-charts": ">=0.1.0",
 		"@legendapp/list": ">=3.3",
 		"@shopify/react-native-skia": ">=2",

package/src/components/calendar/AGENTS.md

@@ -75,13 +75,18 @@ sheets.
 
 ## 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.
+- **A day is three layers:** the band (`bandTrack`, absolute, edge to edge, behind), `dayBase`
+  (the circle) and the label. The band spans the full cell so adjacent days join into one strip.
+- **An end's band runs under the whole circle, capped at the circle's radius.** `bandTrack` clips
+  to the cell and centres `bandAnchor`, a box `w-input-*` wide — the width `size-input-*` gives the
+  circle. The band hangs off the anchor: start from its left edge (`rounded-l-full`) out past the
+  cell's right, end the mirror, middle past both edges and square; the clip trims each to the
+  cell. Three earlier versions failed: a band rounded across the whole end cell showed a crescent
+  beside the circle; one stopped at the cell's centre put half a translucent `secondary` circle
+  over band and half over the page — a two-tone circle; and one sized by `basis-input-*` did not
+  follow the house style's runtime retune of the input scale, so at `lg` the cap slid ~6pt off
+  the circle. 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

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

@@ -95,7 +95,13 @@ export function CalendarDay({ date, children, className }: CalendarDayProps): Re
 			onPress={handlePress}
 			testID={resolvePartTestID(calendar.testID, `day-${serialiseDate(date)}`)}
 		>
-			{showsBand ? <View className={slots.band()} /> : null}
+			{showsBand ? (
+				<View className={slots.bandTrack()}>
+					<View className={slots.bandAnchor()}>
+						<View className={slots.band()} />
+					</View>
+				</View>
+			) : null}
 			<View className={slots.dayBase()}>{content}</View>
 		</Pressable>
 	);

package/src/components/calendar/calendar.variants.test.ts

@@ -90,6 +90,8 @@ describe("text colour stays on the text", () => {
 						"week",
 						"cell",
 						"dayBase",
+						"bandTrack",
+						"bandAnchor",
 						"band",
 						"pickerGrid",
 						"pickerItem",
@@ -111,33 +113,52 @@ describe("text colour stays on the text", () => {
 });
 
 describe("range band geometry", () => {
-	const bandOf = (rangeRole: CalendarRangeRole) => calendarVariants({ rangeRole }).band();
+	const slotsOf = (rangeRole: CalendarRangeRole) => calendarVariants({ rangeRole });
+	const bandOf = (rangeRole: CalendarRangeRole) => slotsOf(rangeRole).band();
 
 	// The cell is wider than the circle, so a band end rounded across the whole cell pokes out
-	// beside the circle. Each end instead stops at its cell's centre, under the circle.
-	test("start runs from the cell's centre to its right edge", () => {
-		expect(bandOf("start")).toMatch(/\bleft-1\/2\b/);
-		expect(bandOf("start")).toMatch(/\bright-0\b/);
+	// beside the circle. Each end instead runs under the whole circle with a cap of its radius, so a
+	// translucent circle lies over band everywhere and never shows a two-tone half.
+	test("the track clips to the cell and centres the anchor", () => {
+		const track = slotsOf("start").bandTrack();
+		expect(track).toMatch(/\babsolute\b/);
+		expect(track).toMatch(/\binset-0\b/);
+		expect(track).toMatch(/\bitems-center\b/);
+		expect(track).toMatch(/\boverflow-hidden\b/);
+	});
+
+	// `w-input-*` is the width `size-input-*` sets, so the anchor tracks the circle through a
+	// runtime retune of the input scale; `basis-input-*` did not, and the cap slid off the circle.
+	test("the anchor is exactly as wide as the circle", () => {
+		for (const size of ["sm", "md", "lg"] as const) {
+			const slots = calendarVariants({ rangeRole: "start", size });
+			expect(slots.bandAnchor()).toContain(`w-input-${size}`);
+			expect(slots.dayBase()).toContain(`size-input-${size}`);
+		}
 	});
 
-	test("end runs from the cell's left edge to its centre", () => {
-		expect(bandOf("end")).toMatch(/\bleft-0\b/);
-		expect(bandOf("end")).toMatch(/\bright-1\/2\b/);
+	test("start runs from the circle's left edge out past the cell, capped on the left", () => {
+		expect(bandOf("start")).toMatch(/(?:^|\s)left-0\b/);
+		expect(bandOf("start")).toMatch(/-right-\[\d+px\]/);
+		expect(bandOf("start")).toMatch(/\brounded-l-full\b/);
+		expect(bandOf("start")).not.toMatch(/\brounded-r-full\b/);
 	});
 
-	test("middle spans the whole cell, square", () => {
-		expect(bandOf("middle")).toMatch(/\binset-x-0\b/);
-		expect(bandOf("middle")).not.toMatch(/rounded-(?:l-|r-)?full/);
+	test("end mirrors start", () => {
+		expect(bandOf("end")).toMatch(/(?:^|\s)right-0\b/);
+		expect(bandOf("end")).toMatch(/-left-\[\d+px\]/);
+		expect(bandOf("end")).toMatch(/\brounded-r-full\b/);
+		expect(bandOf("end")).not.toMatch(/\brounded-l-full\b/);
 	});
 
-	test("no band end is rounded — the circle is the cap", () => {
-		for (const rangeRole of ["start", "middle", "end"] as const) {
-			expect(bandOf(rangeRole)).not.toMatch(/rounded-(?:l-|r-)?full/);
-		}
+	test("middle runs past both edges, square", () => {
+		expect(bandOf("middle")).toMatch(/-left-\[\d+px\]/);
+		expect(bandOf("middle")).toMatch(/-right-\[\d+px\]/);
+		expect(bandOf("middle")).not.toMatch(/rounded-(?:l-|r-)?full/);
 	});
 
 	test("a lone day draws no band", () => {
-		expect(bandOf("only")).toContain("hidden");
+		expect(slotsOf("only").bandTrack()).toContain("hidden");
 	});
 
 	test("a selected day is a circle, never square", () => {

package/src/components/calendar/calendar.variants.ts

@@ -54,12 +54,14 @@ export const CALENDAR_PAGE_VELOCITY = 500;
  * whole cell so neighbouring days join into one continuous strip — a gap between columns would
  * break it into beads.
  *
- * **The band ends under the circle, never beside it.** Start runs from its cell's centre to the
- * right edge, end from the left edge to its centre, and every day between spans the whole cell
- * square — including at a week's edge, where the strip simply stops and picks up again on the
- * next row. A cell is wider than its circle, so a band rounded across the whole end cell poked a
- * crescent out beside the circle; stopping at the centre lets the circle itself be the cap. A
- * one-day range draws no band at all.
+ * **The band ends under the whole circle, never beside it.** `bandTrack` clips to the cell and
+ * centres `bandAnchor`, a box as wide as the circle — `w-input-*`, the width `size-input-*` sets,
+ * so a runtime retune of the input scale moves both. The band hangs off the anchor: start from
+ * its left edge, capped at the circle's radius, out past the cell's right; end the mirror; every
+ * day between past both edges, so the clip leaves it spanning the whole cell square — including at a week's edge, where the strip simply stops and
+ * picks up again on the next row. A band rounded across the whole end cell poked a crescent out
+ * beside the circle; one stopped at the cell's centre left half a translucent `secondary` circle
+ * over band and half over the page, a two-tone circle. A one-day range draws no band at all.
  *
  * **The cell steps on the input scale** — `h-input-*` and `text-input-*` — so a calendar inline
  * beside a field shares its density, and a retune of the field retunes the calendar.
@@ -91,7 +93,11 @@ export const calendarVariants = tv({
 		week: "flex-row",
 		/** One day's column share, and the height of its touch target. */
 		cell: "flex-1 items-center justify-center",
-		/** The strip behind a day inside a range. */
+		/** The cell-sized clip behind a day inside a range, centring the band's anchor. */
+		bandTrack: "absolute inset-0 items-center overflow-hidden",
+		/** A circle-wide box where the circle sits, that the band hangs off. */
+		bandAnchor: "h-full",
+		/** The strip behind a day inside a range, run past the cell and clipped by the track. */
 		band: "absolute inset-y-0",
 		/** The circle a selection fills and today rings. */
 		dayBase: "items-center justify-center rounded-full border border-transparent",
@@ -113,6 +119,7 @@ export const calendarVariants = tv({
 			sm: {
 				captionText: "text-input-sm",
 				cell: "h-input-sm",
+				bandAnchor: "w-input-sm",
 				dayBase: "size-input-sm",
 				dayLabel: "text-input-sm",
 				pickerItem: "h-input-sm",
@@ -121,6 +128,7 @@ export const calendarVariants = tv({
 			md: {
 				captionText: "text-input-md",
 				cell: "h-input-md",
+				bandAnchor: "w-input-md",
 				dayBase: "size-input-md",
 				dayLabel: "text-input-md",
 				pickerItem: "h-input-md",
@@ -129,6 +137,7 @@ export const calendarVariants = tv({
 			lg: {
 				captionText: "text-input-lg",
 				cell: "h-input-lg",
+				bandAnchor: "w-input-lg",
 				dayBase: "size-input-lg",
 				dayLabel: "text-input-lg",
 				pickerItem: "h-input-lg",
@@ -141,11 +150,11 @@ export const calendarVariants = tv({
 			band: { dayBase: "bg-transparent" },
 		},
 		rangeRole: {
-			none: { band: "hidden" },
-			start: { band: "left-1/2 right-0" },
-			middle: { band: "inset-x-0" },
-			end: { band: "left-0 right-1/2" },
-			only: { band: "hidden" },
+			none: { bandTrack: "hidden" },
+			start: { band: "-right-[1000px] left-0 rounded-l-full" },
+			middle: { band: "-left-[1000px] -right-[1000px]" },
+			end: { band: "-left-[1000px] right-0 rounded-r-full" },
+			only: { bandTrack: "hidden" },
 		},
 		isToday: { true: {}, false: {} },
 		isOutside: { true: {}, false: {} },