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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.4.0",
+	"version": "0.4.1-alpha.20261021071515",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",

package/src/components/badge/AGENTS.md

@@ -90,4 +90,6 @@ A compact label for status, category or count. Compound root plus `Badge.Label`,
 - **`material="etched"` squares the capsule and tints.** The root and the close button take
   `rounded-sm`; `soft` status fills become `bg-<status>/8` in light and `/16` in dark, written out
   per colour because Tailwind's scanner cannot see a built class. The material rides the badge
-  context so the close button follows the root.
+  context so the close button follows the root. `BADGE_MATERIALS` and `BadgeMaterial` are exported
+  from the index beside the other three axes — a public prop whose type a caller cannot name is half
+  an API.

package/src/components/badge/index.ts

@@ -4,9 +4,11 @@ export type { BadgeSlotProps } from "./badge.types";
 export {
 	BADGE_COLORS,
 	BADGE_FOREGROUND_TOKEN,
+	BADGE_MATERIALS,
 	BADGE_SIZES,
 	BADGE_VARIANTS,
 	type BadgeColor,
+	type BadgeMaterial,
 	type BadgeSize,
 	type BadgeVariant,
 	type BadgeVariantProps,

package/src/components/button/AGENTS.md

@@ -254,4 +254,5 @@ for a chunk that says something rather than doing something. An
   inset top edge at 16%); `secondary`, `tertiary` and `outline` take the light/dark edge
   (`shadow-etched dark:shadow-etched-dark`); `ghost`, `destructive` and `destructive-soft` stay flat
   — a ghost has no surface to lift and a signal colour does not take a second highlight. The press
-  scale is already 0.97. The tokens live in `tokens.css`.
+  scale is already 0.97. The tokens live in `tokens.css`. `BUTTON_MATERIALS` and `ButtonMaterial`
+  are exported from the index like every other axis.

package/src/components/button/index.ts

@@ -23,6 +23,7 @@ export {
 	BUTTON_GROUP_SEPARATOR_ORIENTATION,
 	BUTTON_ICON_SIZES,
 	BUTTON_LABEL_SIZES,
+	BUTTON_MATERIALS,
 	BUTTON_SIZES,
 	BUTTON_SPINNER_PLACEMENTS,
 	BUTTON_VARIANTS,
@@ -33,6 +34,7 @@ export {
 	type ButtonIconSize,
 	type ButtonLabelSize,
 	type ButtonLayout,
+	type ButtonMaterial,
 	type ButtonSize,
 	type ButtonSpinnerPlacement,
 	type ButtonVariant,

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: {} },

package/src/components/screen/AGENTS.md

@@ -25,7 +25,7 @@ whole-screen states.
 | `screen-header.tsx` | `Screen.Header` |
 | `screen-footer.tsx` | `Screen.Footer` |
 | `screen-footer-background.tsx` | The footer's backing and its top hairline — internal |
-| `screen-scroll-shadow.tsx` | `Screen.ScrollShadow`, and `SCROLL_SHADOW_EDGES` |
+| `screen-scroll-shadow.tsx` | `Screen.ScrollShadow`, and its two axes — `SCROLL_SHADOW_EDGES` and `SCROLL_SHADOW_ANCHORS` |
 | `screen-scroll-area.tsx` | `Screen.ScrollArea` |
 | `screen-flat-list.tsx` | `Screen.FlatList` |
 | `screen-section-list.tsx` | `Screen.SectionList` |

package/src/components/screen/index.ts

@@ -65,8 +65,10 @@ export type { ScreenNavbarTitleProps } from "./screen-navbar-title";
 export type { ScreenRootProps } from "./screen-root";
 export type { ScreenScrollAreaProps } from "./screen-scroll-area";
 export {
+	SCROLL_SHADOW_ANCHORS,
 	SCROLL_SHADOW_EDGES,
 	ScreenScrollShadow,
+	type ScreenScrollShadowAnchor,
 	type ScreenScrollShadowEdge,
 	type ScreenScrollShadowProps,
 } from "./screen-scroll-shadow";

package/src/components/surface/AGENTS.md

@@ -80,3 +80,4 @@ components built on it (`Card`, `Alert`) can read the plane they sit on.
   down; `SurfaceContext.material` is how that panel knows to take `rounded-xl`, one step under the
   tray's corner. A single `shadow-*` utility sets one `box-shadow`, which is why light and dark are
   two tokens joined by `dark:` and not one composed class. Opt-in: nothing in the default look uses it.
+  `SURFACE_MATERIALS` and `SurfaceMaterial` are exported from the index like every other axis.

package/src/components/surface/index.ts

@@ -5,8 +5,10 @@ export {
 	resolveSurfaceVariant,
 	SURFACE_FILLED_VARIANTS,
 	SURFACE_FOREGROUND_TOKENS,
+	SURFACE_MATERIALS,
 	SURFACE_PADDINGS,
 	SURFACE_VARIANTS,
+	type SurfaceMaterial,
 	type SurfacePadding,
 	type SurfacePlane,
 	type SurfaceVariant,

package/src/components/text-animation/AGENTS.md

@@ -22,7 +22,7 @@ scope — it is an input, not a text effect.
 | `text-animation-caret.tsx` | Internal leaf: the typing caret |
 | `text-animation-clock.ts` | `useTextAnimationClock` — a frame-callback elapsed-ms shared value, pausable, keyed by run |
 | `text-animation.types.ts` | `TextAnimationBase`, the props every part shares |
-| `text-animation.variants.ts` | The slotted `tv()` + every pure resolver: splitting, stagger, effect frames, typing timeline, number format, roll targets |
+| `text-animation.variants.ts` | The slotted `tv()` + every pure resolver: splitting, stagger, effect frames, typing timeline, number format, roll targets — and the five axes (`TEXT_ANIMATION_UNITS`, `_ORDERS`, `_EFFECT_KINDS`, `_CARET_KINDS`, `_SLIDE_DIRECTIONS`), each exported with its union |
 | `text-animation.variants.test.ts` | |
 
 ## The root is Reveal

package/src/components/text-animation/index.ts

@@ -19,11 +19,15 @@ export {
 	TEXT_ANIMATION_CARET_KINDS,
 	TEXT_ANIMATION_EFFECT_KINDS,
 	TEXT_ANIMATION_ORDERS,
+	TEXT_ANIMATION_SLIDE_DIRECTIONS,
 	TEXT_ANIMATION_UNITS,
 	type TextAnimationCaret,
+	type TextAnimationCaretKind,
 	type TextAnimationEffect,
+	type TextAnimationEffectKind,
 	type TextAnimationNumberFormat,
 	type TextAnimationOrder,
+	type TextAnimationSlideFrom,
 	type TextAnimationTransition,
 	type TextAnimationUnit,
 	textAnimationVariants,

package/src/components/text-animation/text-animation.variants.test.ts

@@ -23,6 +23,7 @@ import {
 	splitText,
 	TEXT_ANIMATION_CARET_KINDS,
 	TEXT_ANIMATION_ORDERS,
+	TEXT_ANIMATION_SLIDE_DIRECTIONS,
 	TEXT_ANIMATION_UNITS,
 	textAnimationVariants,
 } from "./text-animation.variants";
@@ -205,6 +206,14 @@ describe("resolveEffectFrame", () => {
 		expect(resolveEffectFrame({ kind: "fade" }, 0)).toEqual({ opacity: 0, translateX: 0, translateY: 0, scale: 1 });
 	});
 
+	// The array is the public list of `from` values, so every entry must move the unit.
+	test("every slide direction starts off its rest position", () => {
+		for (const from of TEXT_ANIMATION_SLIDE_DIRECTIONS) {
+			const frame = resolveEffectFrame({ kind: "slide", from }, 0);
+			expect(Math.abs(frame.translateX) + Math.abs(frame.translateY)).toBe(12);
+		}
+	});
+
 	test("slide starts its distance away on the side it comes from", () => {
 		expect(resolveEffectFrame({ kind: "slide", from: "up" }, 0).translateY).toBe(-12);
 		expect(resolveEffectFrame({ kind: "slide", from: "down" }, 0).translateY).toBe(12);

package/src/components/text-animation/text-animation.variants.ts

@@ -5,6 +5,7 @@ export const TEXT_ANIMATION_UNITS = ["character", "word", "line"] as const;
 export const TEXT_ANIMATION_ORDERS = ["forward", "reverse", "center", "random"] as const;
 export const TEXT_ANIMATION_EFFECT_KINDS = ["fade", "slide", "scale"] as const;
 export const TEXT_ANIMATION_CARET_KINDS = ["none", "bar", "block"] as const;
+export const TEXT_ANIMATION_SLIDE_DIRECTIONS = ["up", "down", "left", "right"] as const;
 
 /** What one entering piece of a `Reveal` is. */
 export type TextAnimationUnit = (typeof TEXT_ANIMATION_UNITS)[number];
@@ -12,7 +13,8 @@ export type TextAnimationUnit = (typeof TEXT_ANIMATION_UNITS)[number];
 export type TextAnimationOrder = (typeof TEXT_ANIMATION_ORDERS)[number];
 export type TextAnimationEffectKind = (typeof TEXT_ANIMATION_EFFECT_KINDS)[number];
 export type TextAnimationCaretKind = (typeof TEXT_ANIMATION_CARET_KINDS)[number];
-export type TextAnimationSlideFrom = "up" | "down" | "left" | "right";
+/** Where a `slide` effect enters from. */
+export type TextAnimationSlideFrom = (typeof TEXT_ANIMATION_SLIDE_DIRECTIONS)[number];
 
 /** How a unit arrives. Every kind fades in; `slide` and `scale` add a transform on top. */
 export type TextAnimationEffect =

package/src/variant-axes.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, test } from "bun:test";
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+const COMPONENTS = join(import.meta.dirname, "components");
+
+/**
+ * Every variant axis a component declares must reach its public entry point.
+ *
+ * An axis is a `const` array and the union read off it —
+ * `BADGE_MATERIALS` and `BadgeMaterial`. The union types a prop; the array is how
+ * a caller iterates the values, builds a picker or a story, or narrows a string
+ * from outside. `Badge`, `Button` and `Surface` each grew a public `material`
+ * prop whose pair stayed behind `index.ts`, so a caller could pass the prop but
+ * not name its type without reaching into a file the package does not export.
+ *
+ * Like `docs.test.ts`, this reads the tree as **text** and imports nothing from
+ * it: an axis is recognised by its declaration,
+ * `export type Name = (typeof NAME)[number]`, and both names must appear in the
+ * folder's `index.ts` export lists. Declaring an axis that way is declaring it
+ * public — an internal union is a plain string-literal type and is not checked.
+ */
+
+type Axis = { file: string; type: string; values: string };
+
+const AXIS = /^export type ([A-Za-z0-9_]+) = \(typeof ([A-Z0-9_]+)\)\[number\];/gm;
+
+/** Every component folder's non-test modules, as relative path → source. */
+function modules(folder: string): Map<string, string> {
+	const found = new Map<string, string>();
+	for (const entry of readdirSync(join(COMPONENTS, folder), { withFileTypes: true })) {
+		if (!entry.isFile() || !/\.tsx?$/.test(entry.name) || entry.name.includes(".test.")) continue;
+		if (entry.name === "index.ts") continue;
+		found.set(`${folder}/${entry.name}`, readFileSync(join(COMPONENTS, folder, entry.name), "utf-8"));
+	}
+	return found;
+}
+
+/** The axes one module declares. */
+function axesIn(file: string, source: string): Axis[] {
+	return [...source.matchAll(AXIS)].map(([, type, values]) => ({ file, type, values }));
+}
+
+/** Every name inside an `export { … }` or `export type { … }` list of an index. */
+function exportedNames(index: string): Set<string> {
+	const names = new Set<string>();
+	for (const [, list] of index.matchAll(/export (?:type )?\{([^}]*)\}/g)) {
+		for (const raw of list.split(",")) {
+			const name = raw
+				.trim()
+				.replace(/^type\s+/, "")
+				.split(/\s+as\s+/)
+				.pop();
+			if (name) names.add(name);
+		}
+	}
+	return names;
+}
+
+const FOLDERS = readdirSync(COMPONENTS, { withFileTypes: true })
+	.filter((entry) => entry.isDirectory())
+	.map((entry) => entry.name)
+	.sort();
+
+const AXES = FOLDERS.flatMap((folder) => {
+	const exported = exportedNames(readFileSync(join(COMPONENTS, folder, "index.ts"), "utf-8"));
+	return [...modules(folder)].flatMap(([file, source]) => axesIn(file, source).map((axis) => ({ ...axis, exported })));
+});
+
+describe("variant axes", () => {
+	// A matcher that found nothing would pass every assertion below on an empty set.
+	test("finds the axes", () => {
+		expect(AXES.length).toBeGreaterThan(50);
+	});
+
+	test("every axis union is exported from its component's index", () => {
+		const missing = AXES.filter((axis) => !axis.exported.has(axis.type)).map((axis) => `${axis.file}: ${axis.type}`);
+		expect(missing).toEqual([]);
+	});
+
+	test("every axis array is exported from its component's index", () => {
+		const missing = AXES.filter((axis) => !axis.exported.has(axis.values)).map(
+			(axis) => `${axis.file}: ${axis.values}`
+		);
+		expect(missing).toEqual([]);
+	});
+});