@kanso-labs/react-native-kanso-ui 0.9.0 → 0.10.0

package/dist/components/carousel/index.js

@@ -0,0 +1,496 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { slideLabelFor } from "../../i18n/index.js";
+import { useLocaleOf, useMessages } from "../../i18n/provider.js";
+import { ChevronEndGlyph } from "../../glyphs/index.js";
+import { IconButton } from "../icon-button/index.js";
+import { arrange, placements } from "../../carousel/arrangement.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, Platform, StyleSheet, View, useWindowDimensions } from "react-native";
+import Animated, { Extrapolation, interpolate, useAnimatedReaction, useAnimatedScrollHandler, useAnimatedStyle, useReducedMotion, useSharedValue } from "react-native-reanimated";
+import { Children, createContext, isValidElement, use, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { scheduleOnRN } from "react-native-worklets";
+//#region src/components/carousel/index.tsx
+const DEFAULT_ITEM_SIZE = 240;
+const SLACK = .5;
+const SlotContext = createContext(null);
+const styles = StyleSheet.create({
+	contentMasked: { overflow: "hidden" },
+	held: { flexGrow: 1 },
+	previousGlyph: { transform: [{ scaleX: -1 }] },
+	previousGlyphRightToLeft: { transform: [{ scaleX: 1 }] },
+	root: { minWidth: 0 },
+	slot: {
+		alignItems: "center",
+		flexShrink: 0
+	}
+});
+const stylesOf = themedStyles(({ radii, spacing }) => StyleSheet.create({
+	controls: {
+		columnGap: spacing.sm,
+		flexDirection: "row",
+		justifyContent: "flex-end",
+		paddingHorizontal: spacing.lg
+	},
+	item: {
+		alignItems: "center",
+		borderRadius: radii.xl,
+		flexGrow: 1,
+		overflow: "hidden"
+	},
+	root: { rowGap: spacing.sm },
+	row: {
+		columnGap: 8,
+		flexDirection: "row",
+		paddingHorizontal: spacing.lg,
+		paddingVertical: spacing.sm
+	}
+}));
+function along(direction, { end, masked, scrolled, step }) {
+	const offset = masked ? (Math.round(scrolled / step) + direction) * step : scrolled + direction * step;
+	return Math.min(Math.max(offset, 0), end);
+}
+/**
+* A row of items that scrolls on and off the screen, in the carousel page's
+* multi-browse, hero or uncontained layout. Name it with `label`, and give it
+* a `Carousel.Item` for each item.
+*
+* ```tsx
+* <Carousel label="Label">
+*   <Carousel.Item><Image alt="First item" source={first} /></Carousel.Item>
+*   <Carousel.Item><Image alt="Second item" source={second} /></Carousel.Item>
+* </Carousel>
+* ```
+*
+* `style`, `ref` and `testID` land on the carousel as a whole, which is the
+* view a layout positions, and a `style` there applies over its own.
+*/
+function Carousel(t0) {
+	const $ = c(55);
+	let children;
+	let label;
+	let nextLabel;
+	let previousLabel;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, itemSize: t1, label, layout: t2, nextLabel, previousLabel, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = label;
+		$[3] = nextLabel;
+		$[4] = previousLabel;
+		$[5] = props;
+		$[6] = style;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		children = $[1];
+		label = $[2];
+		nextLabel = $[3];
+		previousLabel = $[4];
+		props = $[5];
+		style = $[6];
+		t1 = $[7];
+		t2 = $[8];
+	}
+	const itemSize = t1 === void 0 ? DEFAULT_ITEM_SIZE : t1;
+	const layout = t2 === void 0 ? "multi-browse" : t2;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const messages = useMessages();
+	const reduceMotion = useReducedMotion();
+	const dimensions = useWindowDimensions();
+	const scroller = useRef(null);
+	const scrolled = useSharedValue(0);
+	const [measured, setMeasured] = useState();
+	const width = measured ?? dimensions.width;
+	const padding = theme.spacing.lg;
+	const rtl = I18nManager.isRTL;
+	const items = Children.toArray(children).filter(isValidElement);
+	const count = items.length;
+	const room = Math.max(width - 2 * padding, 0);
+	const arrangement = arrange(layout, room, itemSize, count);
+	const masked = layout !== "uncontained";
+	const step = arrangement.large + 8;
+	const end = masked ? arrangement.steps * step : Math.max(count * step - 8 + 2 * padding - width, 0);
+	const paths = masked ? pathsOf(Array.from({ length: arrangement.steps + 1 }, (_, rest) => placements(layout, arrangement, room, padding, count, rest)), count) : [];
+	let t3;
+	if ($[9] !== end) {
+		t3 = () => edgeOf(0, end);
+		$[9] = end;
+		$[10] = t3;
+	} else t3 = $[10];
+	const [edge, setEdge] = useState(t3);
+	const onScroll = useAnimatedScrollHandler({ onScroll: (event) => {
+		"worklet";
+		scrolled.set(fromStart(event.contentOffset.x, end, rtl));
+	} });
+	useAnimatedReaction(() => {
+		"worklet";
+		return edgeOf(scrolled.get(), end);
+	}, (now, before) => {
+		"worklet";
+		if (now !== before) scheduleOnRN(setEdge, now);
+	});
+	let t4;
+	if ($[11] !== end || $[12] !== masked || $[13] !== reduceMotion || $[14] !== rtl || $[15] !== scrolled || $[16] !== step) {
+		t4 = (direction) => {
+			const geometry = {
+				end,
+				masked,
+				scrolled: scrolled.get(),
+				step
+			};
+			scroller.current?.scrollTo({
+				animated: !reduceMotion,
+				x: fromStart(along(direction, geometry), end, rtl)
+			});
+		};
+		$[11] = end;
+		$[12] = masked;
+		$[13] = reduceMotion;
+		$[14] = rtl;
+		$[15] = scrolled;
+		$[16] = step;
+		$[17] = t4;
+	} else t4 = $[17];
+	const move = t4;
+	let t5;
+	if ($[18] !== move) {
+		t5 = () => {
+			move(-1);
+		};
+		$[18] = move;
+		$[19] = t5;
+	} else t5 = $[19];
+	const previous = t5;
+	let t6;
+	if ($[20] !== move) {
+		t6 = () => {
+			move(1);
+		};
+		$[20] = move;
+		$[21] = t6;
+	} else t6 = $[21];
+	const next = t6;
+	const slots = items.map((__0, index) => ({
+		count,
+		index,
+		large: arrangement.large,
+		layout,
+		path: paths[index],
+		rtl,
+		scrolled,
+		step
+	}));
+	const T0 = View;
+	const t7 = "region";
+	let t8;
+	if ($[22] !== messages.carousel) {
+		t8 = describedAs(messages.carousel);
+		$[22] = messages.carousel;
+		$[23] = t8;
+	} else t8 = $[23];
+	const t9 = composeStyles(styles.root, own.root, style);
+	const t10 = Animated;
+	const t11 = composeStyles(own.row, masked && styles.contentMasked, masked && { width: width + end });
+	const t12 = "fast";
+	const t13 = end > 0;
+	const t14 = true;
+	let t15;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = widthTo(setMeasured);
+		$[24] = t15;
+	} else t15 = $[24];
+	const t16 = 16;
+	const t17 = false;
+	const t18 = offsetsOf(masked, arrangement.steps, step, count, end);
+	const t19 = items.map((item, index_0) => /* @__PURE__ */ jsx(SlotContext, {
+		value: slots[index_0] ?? null,
+		children: item
+	}, item.key ?? index_0));
+	let t20;
+	if ($[25] !== onScroll || $[26] !== t10.ScrollView || $[27] !== t11 || $[28] !== t13 || $[29] !== t15 || $[30] !== t18 || $[31] !== t19) {
+		t20 = /* @__PURE__ */ jsx(t10.ScrollView, {
+			contentContainerStyle: t11,
+			decelerationRate: t12,
+			focusable: t13,
+			horizontal: t14,
+			onLayout: t15,
+			onScroll,
+			ref: scroller,
+			scrollEventThrottle: t16,
+			showsHorizontalScrollIndicator: t17,
+			snapToOffsets: t18,
+			children: t19
+		});
+		$[25] = onScroll;
+		$[26] = t10.ScrollView;
+		$[27] = t11;
+		$[28] = t13;
+		$[29] = t15;
+		$[30] = t18;
+		$[31] = t19;
+		$[32] = t20;
+	} else t20 = $[32];
+	const t21 = previousLabel ?? messages.previousSlide;
+	const t22 = edge === "start" || edge === "both";
+	let t23;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = /* @__PURE__ */ jsx(ChevronEndGlyph, { style: rtl ? styles.previousGlyphRightToLeft : styles.previousGlyph });
+		$[33] = t23;
+	} else t23 = $[33];
+	let t24;
+	if ($[34] !== previous || $[35] !== t21 || $[36] !== t22) {
+		t24 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t21,
+			isDisabled: t22,
+			onPress: previous,
+			children: t23
+		});
+		$[34] = previous;
+		$[35] = t21;
+		$[36] = t22;
+		$[37] = t24;
+	} else t24 = $[37];
+	const t25 = nextLabel ?? messages.nextSlide;
+	const t26 = edge === "end" || edge === "both";
+	let t27;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = /* @__PURE__ */ jsx(ChevronEndGlyph, {});
+		$[38] = t27;
+	} else t27 = $[38];
+	let t28;
+	if ($[39] !== next || $[40] !== t25 || $[41] !== t26) {
+		t28 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t25,
+			isDisabled: t26,
+			onPress: next,
+			children: t27
+		});
+		$[39] = next;
+		$[40] = t25;
+		$[41] = t26;
+		$[42] = t28;
+	} else t28 = $[42];
+	let t29;
+	if ($[43] !== own.controls || $[44] !== t24 || $[45] !== t28) {
+		t29 = /* @__PURE__ */ jsxs(View, {
+			style: own.controls,
+			children: [t24, t28]
+		});
+		$[43] = own.controls;
+		$[44] = t24;
+		$[45] = t28;
+		$[46] = t29;
+	} else t29 = $[46];
+	let t30;
+	if ($[47] !== T0 || $[48] !== label || $[49] !== props || $[50] !== t20 || $[51] !== t29 || $[52] !== t8 || $[53] !== t9) {
+		t30 = /* @__PURE__ */ jsxs(T0, {
+			"aria-label": label,
+			role: t7,
+			...t8,
+			...props,
+			style: t9,
+			children: [t20, t29]
+		});
+		$[47] = T0;
+		$[48] = label;
+		$[49] = props;
+		$[50] = t20;
+		$[51] = t29;
+		$[52] = t8;
+		$[53] = t9;
+		$[54] = t30;
+	} else t30 = $[54];
+	return t30;
+}
+/**
+* One item. It is named by which of how many it is — "2 of 6" — unless it is
+* given an `aria-label` of its own.
+*
+* `style`, `ref` and `testID` land on the item, the view with the corner that
+* cuts what it holds to the width it is drawn at.
+*/
+function CarouselItem(t0) {
+	const $ = c(28);
+	let children;
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({children, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = style;
+	} else {
+		children = $[1];
+		props = $[2];
+		style = $[3];
+	}
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const locale = useLocaleOf(void 0);
+	const messages = useMessages();
+	const slot = use(SlotContext);
+	const count = slot?.count ?? 1;
+	const index = slot?.index ?? 0;
+	const drawn = useDrawn(slot);
+	const T0 = View;
+	let t1;
+	if ($[4] !== slot) {
+		t1 = composeStyles(styles.slot, slotWidthOf(slot));
+		$[4] = slot;
+		$[5] = t1;
+	} else t1 = $[5];
+	const t2 = Animated;
+	const t3 = index + 1;
+	let t4;
+	if ($[6] !== count || $[7] !== locale || $[8] !== t3) {
+		t4 = slideLabelFor(t3, count, locale);
+		$[6] = count;
+		$[7] = locale;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	const t5 = "group";
+	let t6;
+	if ($[10] !== messages.slide) {
+		t6 = describedAs(messages.slide);
+		$[10] = messages.slide;
+		$[11] = t6;
+	} else t6 = $[11];
+	const t7 = composeStyles(own.item, drawn, style);
+	let t8;
+	if ($[12] !== slot) {
+		t8 = composeStyles(styles.held, slotWidthOf(slot));
+		$[12] = slot;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== children || $[15] !== t8) {
+		t9 = /* @__PURE__ */ jsx(View, {
+			style: t8,
+			children
+		});
+		$[14] = children;
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== props || $[18] !== t2.View || $[19] !== t4 || $[20] !== t6 || $[21] !== t7 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsx(t2.View, {
+			"aria-label": t4,
+			role: t5,
+			...t6,
+			...props,
+			style: t7,
+			children: t9
+		});
+		$[17] = props;
+		$[18] = t2.View;
+		$[19] = t4;
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== T0 || $[25] !== t1 || $[26] !== t10) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			style: t1,
+			children: t10
+		});
+		$[24] = T0;
+		$[25] = t1;
+		$[26] = t10;
+		$[27] = t11;
+	} else t11 = $[27];
+	return t11;
+}
+function describedAs(word) {
+	return Platform.OS === "web" ? { "aria-roledescription": word } : void 0;
+}
+function edgeOf(scrolled, end) {
+	"worklet";
+	const atStart = scrolled <= SLACK;
+	const atEnd = scrolled >= end - SLACK;
+	if (atStart && atEnd) return "both";
+	if (atStart) return "start";
+	return atEnd ? "end" : "none";
+}
+/**
+* A right-to-left scroll view's offset counted from its other edge: from the
+* start of the text where it is from the left, and from the left where it is
+* from the start, so the one function reads an offset and writes one. `end`
+* is how much longer the content is than the view.
+*
+* iOS and Android agree on what a right-to-left scroll view reports, though
+* they get there differently. iOS turns the whole scroll view over, so its
+* own offset counts from the start, and React Native counts it from the left
+* again before handing it to `onScroll`, and back before `scrollTo`
+* (`_scrollViewMetrics` and `scrollToOffset` in
+* RCTScrollViewComponentView.mm). Android's is the view's own `scrollX`,
+* which is from the left and starts at the far end, so the start shows first
+* (ReactHorizontalScrollView.kt). So on both an event's offset and the one
+* `scrollTo` takes are from the left, while `snapToOffsets` is read from the
+* start on both: Android turns its offsets round where it flings, and iOS
+* compares them with its own turned-over offset. React Native Web reports no
+* right-to-left layout through I18nManager, so there nothing is turned.
+*/
+function fromStart(offset, end, rtl) {
+	"worklet";
+	return rtl ? end - offset : offset;
+}
+function offsetsOf(masked, steps, step, count, end) {
+	if (end <= 0) return;
+	if (masked) return Array.from({ length: steps + 1 }, (_, rest) => rest * step);
+	const starts = Array.from({ length: count }, (_, index) => Math.min(index * step, end));
+	return [...new Set(starts)];
+}
+function pathsOf(rests, count) {
+	const at = rests.length > 1 ? rests : [...rests, ...rests];
+	return Array.from({ length: count }, (_, index) => ({
+		rests: at.map((_placed, rest) => rest),
+		starts: at.map((placed) => placed[index]?.left ?? 0),
+		widths: at.map((placed) => placed[index]?.width ?? 0)
+	}));
+}
+function slotWidthOf(slot) {
+	return slot === null ? void 0 : { width: slot.large };
+}
+function useDrawn(slot) {
+	const path = slot?.path;
+	const scrolled = slot?.scrolled;
+	const index = slot?.index ?? 0;
+	const large = slot?.large ?? 0;
+	const step = slot?.step ?? 0;
+	const rtl = slot?.rtl ?? false;
+	return useAnimatedStyle(() => {
+		"worklet";
+		if (path === void 0 || scrolled === void 0) return {};
+		const offset = scrolled.get();
+		const position = offset / step;
+		const start = interpolate(position, path.rests, path.starts, Extrapolation.CLAMP);
+		const width = interpolate(position, path.rests, path.widths, Extrapolation.CLAMP);
+		const shift = offset + start + width / 2 - index * step - large / 2;
+		return {
+			transform: [{ translateX: rtl ? -shift : shift }],
+			width
+		};
+	});
+}
+function widthTo(onMeasure) {
+	return (event) => {
+		onMeasure(event.nativeEvent.layout.width);
+	};
+}
+Carousel.Item = CarouselItem;
+//#endregion
+export { Carousel, CarouselItem };
+
+//# sourceMappingURL=index.js.map

package/dist/components/carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","ScrollView","ViewProps","ViewStyle","AnimatedStyle","SharedValue","Children","createContext","isValidElement","use","useCallback","useRef","useState","I18nManager","Platform","StyleSheet","useWindowDimensions","View","Animated","Extrapolation","interpolate","useAnimatedReaction","useAnimatedScrollHandler","useAnimatedStyle","useReducedMotion","useSharedValue","scheduleOnRN","CarouselLayout","Placement","arrange","GAP","placements","ChevronEndGlyph","slideLabelFor","useLocaleOf","useMessages","useTheme","composeStyles","themedStyles","IconButton","DEFAULT_ITEM_SIZE","SLACK","CarouselItemProps","Omit","children","ref","CarouselProps","itemSize","label","layout","nextLabel","previousLabel","Edge","Geometry","end","masked","scrolled","step","Path","rests","starts","widths","Slot","count","index","large","path","rtl","SlotContext","styles","create","contentMasked","overflow","held","flexGrow","previousGlyph","transform","scaleX","previousGlyphRightToLeft","root","minWidth","slot","alignItems","flexShrink","stylesOf","radii","spacing","controls","columnGap","sm","flexDirection","justifyContent","paddingHorizontal","lg","item","borderRadius","xl","rowGap","row","paddingVertical","along","direction","offset","Math","round","min","max","Carousel","t0","$","_c","props","style","t1","t2","undefined","theme","own","messages","reduceMotion","dimensions","scroller","measured","setMeasured","width","padding","isRTL","items","toArray","filter","length","room","arrangement","steps","paths","pathsOf","Array","from","_","rest","t3","edgeOf","edge","setEdge","onScroll","event","set","fromStart","contentOffset","x","get","now","before","t4","geometry","current","scrollTo","animated","move","t5","previous","t6","next","slots","map","__0","T0","t7","t8","carousel","describedAs","t9","t10","t11","t12","t13","t14","t15","Symbol","for","widthTo","t16","t17","t18","offsetsOf","t19","index_0","key","t20","t21","previousSlide","t22","t23","t24","t25","nextSlide","t26","t27","t28","t29","t30","CarouselItem","locale","drawn","useDrawn","slotWidthOf","slide","word","OS","atStart","atEnd","Set","at","_placed","placed","left","position","start","CLAMP","shift","translateX","onMeasure","nativeEvent","Item","_c"],"sources":["../../../src/components/carousel/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  LayoutChangeEvent,\n  ScrollView,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle, SharedValue } from 'react-native-reanimated'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useRef,\n  useState,\n} from 'react'\nimport {\n  I18nManager,\n  Platform,\n  StyleSheet,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport Animated, {\n  Extrapolation,\n  interpolate,\n  useAnimatedReaction,\n  useAnimatedScrollHandler,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n} from 'react-native-reanimated'\nimport { scheduleOnRN } from 'react-native-worklets'\n\nimport type { CarouselLayout, Placement } from '../../carousel/arrangement'\n\nimport { arrange, GAP, placements } from '../../carousel/arrangement'\nimport { ChevronEndGlyph } from '../../glyphs'\nimport { slideLabelFor } from '../../i18n'\nimport { useLocaleOf, useMessages } from '../../i18n/provider'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { IconButton } from '../icon-button'\n\n// The carousel page's carousel, as kanso-ui's Carousel draws it: a row of\n// items that scrolls on and off the screen, in three of the page's layouts.\n// Each has the page's 16dp of padding at its ends and 8dp at its top and\n// bottom, 8dp between items and a 28dp corner on every item.\n//\n// - **Multi-browse**, the default, shows as many large items as fit at\n//   `itemSize`, then a medium one and a small one, and fills its width\n//   exactly; the large width gives way where the preferred one does not fit.\n// - **Hero** shows one large item and one small.\n// - **Uncontained** shows every item at `itemSize`, scrolling past the edge.\n//\n// **Items change size as they move**, as the page draws them. The first two\n// layouts come to rest one item apart, and between two rests every item's\n// place and width are interpolated, so an item shrinks as it leaves and\n// grows as it arrives; the last rests turn the arrangement round a slot at a\n// time, so every item is drawn large at one of them. The arithmetic is\n// `src/carousel/arrangement.ts`, web's own.\n//\n// **The scrolling is the platform's.** A horizontal scroll view holds the\n// items in a row, each in a slot as wide as a large item, and is as long as\n// the run of rests, so it comes to rest at them through `snapToOffsets`. A\n// scroll handler keeps how far it has scrolled on the UI thread, and each\n// item is drawn from that there too: moved along by as much as the view has\n// scrolled, which holds it against what shows, and then to where the\n// arrangement places it, and cut to the width it is drawn at by a view with\n// the page's corner, centred on what it holds, which is laid out at the large\n// width. What it holds is cut at both sides rather than squeezed, as the\n// page's masked items are, and as web's are by `clip-path`. Uncontained has\n// no rests and no masks, so its items scroll in the row themselves, snapping\n// to their own starts.\n//\n// **It is the ARIA carousel pattern** that web follows: a region named by\n// `label`, each item a group named by which of how many it is, and a previous\n// and a next button under it, at the end, which move to the neighbouring rest\n// and are disabled at either limit. Under React Native Web the region and its\n// items take web's role descriptions, carousel and slide; neither platform\n// has a role description to give them. On iOS and Android a screen reader\n// moves through the items itself, and nothing here scrolls when one is\n// reached, which web does on focus. Under reduced motion the buttons jump\n// rather than scroll.\n//\n// The gap between items is the arrangement's 8dp, `GAP`, rather than the\n// theme's `spacing.sm`, since every rest and every place is worked out from\n// it, and a scheme moving the one without the other would draw the items\n// over each other. The padding at the ends is the theme's `spacing.lg`, which\n// the arithmetic is handed.\n//\n// The page's large width is \"dynamic, or user-set\", and neither MDC-Android\n// nor Compose has a default for it; `itemSize`'s 240 is web's own.\n// Uncontained keeps the padding at its end as well as its start, where the\n// page gives it a leading padding alone, so its last item does not end flush\n// against the edge.\n//\n// React Native Web has no `snapToOffsets`, so in the web Storybook the\n// carousel rests wherever a drag leaves it; the buttons still move it from\n// rest to rest.\n\nconst DEFAULT_ITEM_SIZE = 240\n\n// How near a limit counts as at it, in dp, since a scroll can come to rest a\n// fraction of a pixel short.\nconst SLACK = 0.5\n\ntype CarouselItemProps = Omit<ViewProps, 'children'> & {\n  /** What the item shows: usually an image, which the item masks. */\n  readonly children?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\ntype CarouselProps = Omit<ViewProps, 'children'> & {\n  /** The items: `Carousel.Item` for each. */\n  readonly children?: ReactNode\n  /**\n   * The large item's preferred width, in dp. Multi-browse lays out as many\n   * as fit and narrows them where they do not; uncontained draws every item\n   * at it; hero takes its large item's width from the carousel's.\n   * @default 240\n   */\n  readonly itemSize?: number\n  /**\n   * What the carousel shows, for a screen reader. Required rather than\n   * optional: a carousel is a region, and a region with no name is one a\n   * screen reader cannot introduce.\n   */\n  readonly label: string\n  /**\n   * Which of the page's layouts the carousel draws.\n   * @default 'multi-browse'\n   */\n  readonly layout?: CarouselLayout\n  /**\n   * What the next button is called. Left out, the library names it in the\n   * reader's locale — \"Next slide\" in English.\n   */\n  readonly nextLabel?: string\n  /**\n   * What the previous button is called. Left out, the library names it in\n   * the reader's locale — \"Previous slide\" in English.\n   */\n  readonly previousLabel?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/** Which limits the carousel is at, as one value a reaction can compare. */\ntype Edge = 'both' | 'end' | 'none' | 'start'\n\n/** What the controls scroll by, as numbers read off one render. */\ntype Geometry = {\n  /** The offset of the last rest, or for uncontained how far it scrolls. */\n  readonly end: number\n  readonly masked: boolean\n  readonly scrolled: number\n  /** The distance between two rests, or for uncontained between two items. */\n  readonly step: number\n}\n\n/** Where a layout that masks draws an item at each of its rests. */\ntype Path = {\n  /** The rests, counted from 0, which the two below are drawn at. */\n  readonly rests: readonly number[]\n  /** Where the item starts at each rest, along the content box. */\n  readonly starts: readonly number[]\n  readonly widths: readonly number[]\n}\n\ntype Slot = {\n  readonly count: number\n  readonly index: number\n  /** The width the item is laid out at. */\n  readonly large: number\n  readonly layout: CarouselLayout\n  /** Where it is drawn, for a layout that masks. */\n  readonly path: Path | undefined\n  readonly rtl: boolean\n  /** How far the carousel has scrolled along the text, on the UI thread. */\n  readonly scrolled: SharedValue<number>\n  /** The distance between two rests. */\n  readonly step: number\n}\n\nconst SlotContext = createContext<null | Slot>(null)\n\nconst styles = StyleSheet.create({\n  // A layout that masks holds its row to the run of rests, and clips what it\n  // places past either end rather than letting it lengthen the scroll view.\n  contentMasked: {\n    overflow: 'hidden',\n  },\n  // What an item holds, laid out at the large width and centred on the mask,\n  // so the mask cuts it at both sides.\n  held: {\n    flexGrow: 1,\n  },\n  // Previous points at the start, and next at the end; the end chevron turns\n  // over with the text itself, so previous turns it back.\n  previousGlyph: {\n    transform: [{ scaleX: -1 }],\n  },\n  previousGlyphRightToLeft: {\n    transform: [{ scaleX: 1 }],\n  },\n  root: {\n    minWidth: 0,\n  },\n  // The room a large item is laid out in. The mask inside it is centred,\n  // and the row stretches every slot to the tallest item.\n  slot: {\n    alignItems: 'center',\n    flexShrink: 0,\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, spacing }) =>\n  StyleSheet.create({\n    controls: {\n      columnGap: spacing.sm,\n      flexDirection: 'row',\n      justifyContent: 'flex-end',\n      paddingHorizontal: spacing.lg,\n    },\n    // The mask, which is the item: the page's corner, cutting what it holds\n    // to the width it is drawn at.\n    item: {\n      alignItems: 'center',\n      borderRadius: radii.xl,\n      flexGrow: 1,\n      overflow: 'hidden',\n    },\n    root: {\n      rowGap: spacing.sm,\n    },\n    row: {\n      columnGap: GAP,\n      flexDirection: 'row',\n      paddingHorizontal: spacing.lg,\n      paddingVertical: spacing.sm,\n    },\n  }),\n)\n\n// Where a press of previous or next scrolls to from `scrolled`: the rest\n// either side of the nearest one, or for uncontained an item's width along,\n// kept between the two ends.\nfunction along(\n  direction: -1 | 1,\n  { end, masked, scrolled, step }: Geometry,\n): number {\n  const offset = masked\n    ? (Math.round(scrolled / step) + direction) * step\n    : scrolled + direction * step\n  return Math.min(Math.max(offset, 0), end)\n}\n\n/**\n * A row of items that scrolls on and off the screen, in the carousel page's\n * multi-browse, hero or uncontained layout. Name it with `label`, and give it\n * a `Carousel.Item` for each item.\n *\n * ```tsx\n * <Carousel label=\"Label\">\n *   <Carousel.Item><Image alt=\"First item\" source={first} /></Carousel.Item>\n *   <Carousel.Item><Image alt=\"Second item\" source={second} /></Carousel.Item>\n * </Carousel>\n * ```\n *\n * `style`, `ref` and `testID` land on the carousel as a whole, which is the\n * view a layout positions, and a `style` there applies over its own.\n */\nfunction Carousel({\n  children,\n  itemSize = DEFAULT_ITEM_SIZE,\n  label,\n  layout = 'multi-browse',\n  nextLabel,\n  previousLabel,\n  style,\n  ...props\n}: CarouselProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const messages = useMessages()\n  const reduceMotion = useReducedMotion()\n  const dimensions = useWindowDimensions()\n  const scroller = useRef<ComponentRef<typeof ScrollView>>(null)\n  const scrolled = useSharedValue(0)\n  // The scroll view's width, which the layout reports once it has drawn;\n  // before that the first render guesses the window's.\n  const [measured, setMeasured] = useState<number>()\n  const width = measured ?? dimensions.width\n  const padding = theme.spacing.lg\n  const rtl = I18nManager.isRTL\n\n  const items = Children.toArray(children).filter(isValidElement)\n  const count = items.length\n  const room = Math.max(width - 2 * padding, 0)\n  const arrangement = arrange(layout, room, itemSize, count)\n  const masked = layout !== 'uncontained'\n  const step = arrangement.large + GAP\n  // The last rest, or how far the uncontained row runs past the scroll view.\n  const end = masked\n    ? arrangement.steps * step\n    : Math.max(count * step - GAP + 2 * padding - width, 0)\n  const paths = masked\n    ? pathsOf(\n        Array.from({ length: arrangement.steps + 1 }, (_, rest) =>\n          placements(layout, arrangement, room, padding, count, rest),\n        ),\n        count,\n      )\n    : []\n\n  const [edge, setEdge] = useState<Edge>(() => edgeOf(0, end))\n\n  const onScroll = useAnimatedScrollHandler({\n    onScroll: (event) => {\n      'worklet'\n      scrolled.set(fromStart(event.contentOffset.x, end, rtl))\n    },\n  })\n\n  // Which limits the carousel is at, on the JavaScript thread, for the two\n  // buttons; told only when it changes, rather than on every frame.\n  useAnimatedReaction(\n    () => {\n      'worklet'\n      return edgeOf(scrolled.get(), end)\n    },\n    (now, before) => {\n      'worklet'\n      if (now !== before) {\n        scheduleOnRN(setEdge, now)\n      }\n    },\n  )\n\n  const move = useCallback(\n    (direction: -1 | 1) => {\n      const geometry = { end, masked, scrolled: scrolled.get(), step }\n      scroller.current?.scrollTo({\n        animated: !reduceMotion,\n        x: fromStart(along(direction, geometry), end, rtl),\n      })\n    },\n    [end, masked, reduceMotion, rtl, scrolled, step],\n  )\n  const previous = useCallback(() => {\n    move(-1)\n  }, [move])\n  const next = useCallback(() => {\n    move(1)\n  }, [move])\n\n  const slots = items.map((_, index): Slot => ({\n    count,\n    index,\n    large: arrangement.large,\n    layout,\n    path: paths[index],\n    rtl,\n    scrolled,\n    step,\n  }))\n\n  return (\n    <View\n      aria-label={label}\n      role=\"region\"\n      {...describedAs(messages.carousel)}\n      {...props}\n      style={composeStyles<ViewStyle>(styles.root, own.root, style)}\n    >\n      <Animated.ScrollView\n        contentContainerStyle={composeStyles<ViewStyle>(\n          own.row,\n          masked && styles.contentMasked,\n          masked && { width: width + end },\n        )}\n        decelerationRate=\"fast\"\n        // A keyboard stop while there is anywhere to scroll, so the arrow\n        // keys move it whatever its items hold, which axe's\n        // scrollable-region-focusable asks of it under React Native Web.\n        focusable={end > 0}\n        horizontal\n        onLayout={widthTo(setMeasured)}\n        onScroll={onScroll}\n        ref={scroller}\n        scrollEventThrottle={16}\n        showsHorizontalScrollIndicator={false}\n        snapToOffsets={offsetsOf(masked, arrangement.steps, step, count, end)}\n      >\n        {items.map((item, index) => (\n          <SlotContext key={item.key ?? index} value={slots[index] ?? null}>\n            {item}\n          </SlotContext>\n        ))}\n      </Animated.ScrollView>\n      <View style={own.controls}>\n        <IconButton\n          aria-label={previousLabel ?? messages.previousSlide}\n          isDisabled={edge === 'start' || edge === 'both'}\n          onPress={previous}\n        >\n          <ChevronEndGlyph\n            style={rtl ? styles.previousGlyphRightToLeft : styles.previousGlyph}\n          />\n        </IconButton>\n        <IconButton\n          aria-label={nextLabel ?? messages.nextSlide}\n          isDisabled={edge === 'end' || edge === 'both'}\n          onPress={next}\n        >\n          <ChevronEndGlyph />\n        </IconButton>\n      </View>\n    </View>\n  )\n}\n\n/**\n * One item. It is named by which of how many it is — \"2 of 6\" — unless it is\n * given an `aria-label` of its own.\n *\n * `style`, `ref` and `testID` land on the item, the view with the corner that\n * cuts what it holds to the width it is drawn at.\n */\nfunction CarouselItem({ children, style, ...props }: CarouselItemProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const locale = useLocaleOf(undefined)\n  const messages = useMessages()\n  const slot = use(SlotContext)\n  const count = slot?.count ?? 1\n  const index = slot?.index ?? 0\n  const drawn = useDrawn(slot)\n\n  return (\n    <View style={composeStyles<ViewStyle>(styles.slot, slotWidthOf(slot))}>\n      <Animated.View\n        aria-label={slideLabelFor(index + 1, count, locale)}\n        role=\"group\"\n        {...describedAs(messages.slide)}\n        {...props}\n        style={composeStyles<AnimatedStyle<ViewStyle>>(own.item, drawn, style)}\n      >\n        <View style={composeStyles<ViewStyle>(styles.held, slotWidthOf(slot))}>\n          {children}\n        </View>\n      </Animated.View>\n    </View>\n  )\n}\n\n// What the region and its items are described as, under React Native Web,\n// where the DOM takes a role description; React Native has none to give.\nfunction describedAs(word: string) {\n  return Platform.OS === 'web' ? { 'aria-roledescription': word } : undefined\n}\n\nfunction edgeOf(scrolled: number, end: number): Edge {\n  'worklet'\n  const atStart = scrolled <= SLACK\n  const atEnd = scrolled >= end - SLACK\n  if (atStart && atEnd) {\n    return 'both'\n  }\n  if (atStart) {\n    return 'start'\n  }\n  return atEnd ? 'end' : 'none'\n}\n\n/**\n * A right-to-left scroll view's offset counted from its other edge: from the\n * start of the text where it is from the left, and from the left where it is\n * from the start, so the one function reads an offset and writes one. `end`\n * is how much longer the content is than the view.\n *\n * iOS and Android agree on what a right-to-left scroll view reports, though\n * they get there differently. iOS turns the whole scroll view over, so its\n * own offset counts from the start, and React Native counts it from the left\n * again before handing it to `onScroll`, and back before `scrollTo`\n * (`_scrollViewMetrics` and `scrollToOffset` in\n * RCTScrollViewComponentView.mm). Android's is the view's own `scrollX`,\n * which is from the left and starts at the far end, so the start shows first\n * (ReactHorizontalScrollView.kt). So on both an event's offset and the one\n * `scrollTo` takes are from the left, while `snapToOffsets` is read from the\n * start on both: Android turns its offsets round where it flings, and iOS\n * compares them with its own turned-over offset. React Native Web reports no\n * right-to-left layout through I18nManager, so there nothing is turned.\n */\nfunction fromStart(offset: number, end: number, rtl: boolean): number {\n  'worklet'\n  return rtl ? end - offset : offset\n}\n\n// Where the scroll view comes to rest: at every rest of a layout that masks,\n// or at each uncontained item's start, as far as the row goes.\nfunction offsetsOf(\n  masked: boolean,\n  steps: number,\n  step: number,\n  count: number,\n  end: number,\n): number[] | undefined {\n  if (end <= 0) {\n    return undefined\n  }\n  if (masked) {\n    return Array.from({ length: steps + 1 }, (_, rest) => rest * step)\n  }\n  const starts = Array.from({ length: count }, (_, index) =>\n    Math.min(index * step, end),\n  )\n  return [...new Set(starts)]\n}\n\n// Each item's place and width at every rest, which the UI thread\n// interpolates between as the carousel moves. A carousel with one rest is\n// given it twice, since an interpolation needs two.\nfunction pathsOf(rests: readonly Placement[][], count: number): Path[] {\n  const at = rests.length > 1 ? rests : [...rests, ...rests]\n  return Array.from({ length: count }, (_, index) => ({\n    rests: at.map((_placed, rest) => rest),\n    starts: at.map((placed) => placed[index]?.left ?? 0),\n    widths: at.map((placed) => placed[index]?.width ?? 0),\n  }))\n}\n\nfunction slotWidthOf(slot: null | Slot): undefined | ViewStyle {\n  return slot === null ? undefined : { width: slot.large }\n}\n\n// Where a layout that masks draws an item as the carousel scrolls: moved\n// along by as much as it has scrolled, which holds it against what shows,\n// then from its slot to where the arrangement places it, at the width it is\n// drawn at. Physical, since a transform is: a right-to-left row is laid out\n// from the right, so there the item moves the other way.\nfunction useDrawn(slot: null | Slot) {\n  const path = slot?.path\n  const scrolled = slot?.scrolled\n  const index = slot?.index ?? 0\n  const large = slot?.large ?? 0\n  const step = slot?.step ?? 0\n  const rtl = slot?.rtl ?? false\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    if (path === undefined || scrolled === undefined) {\n      return {}\n    }\n    const offset = scrolled.get()\n    const position = offset / step\n    const start = interpolate(\n      position,\n      path.rests,\n      path.starts,\n      Extrapolation.CLAMP,\n    )\n    const width = interpolate(\n      position,\n      path.rests,\n      path.widths,\n      Extrapolation.CLAMP,\n    )\n    const shift = offset + start + width / 2 - index * step - large / 2\n    return { transform: [{ translateX: rtl ? -shift : shift }], width }\n  })\n}\n\n// A layout handler handing the width it reports to `onMeasure`. Built by a\n// call rather than written inline, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises it.\nfunction widthTo(onMeasure: (width: number) => void) {\n  return (event: LayoutChangeEvent) => {\n    onMeasure(event.nativeEvent.layout.width)\n  }\n}\n\nCarousel.Item = CarouselItem\n\nexport { Carousel, CarouselItem }\nexport type { CarouselItemProps, CarouselLayout, CarouselProps }\n"],"mappings":";;;;;;;;;;;;;;AAuGA,MAAM2C,oBAAoB;AAI1B,MAAMC,QAAQ;AA+Ed,MAAM2B,cAAc7D,cAA2B,IAAI;AAEnD,MAAM8D,SAAStD,WAAWuD,OAAO;CAG/BC,eAAe,EACbC,UAAU,SACZ;CAGAC,MAAM,EACJC,UAAU,EACZ;CAGAC,eAAe,EACbC,WAAW,CAAC,EAAEC,QAAQ,GAAG,CAAC,EAC5B;CACAC,0BAA0B,EACxBF,WAAW,CAAC,EAAEC,QAAQ,EAAE,CAAC,EAC3B;CACAE,MAAM,EACJC,UAAU,EACZ;CAGAC,MAAM;EACJC,YAAY;EACZC,YAAY;CACd;AACF,CAAC;AAED,MAAMC,WAAW9C,cAAc,EAAE+C,OAAOC,cACtCvE,WAAWuD,OAAO;CAChBiB,UAAU;EACRC,WAAWF,QAAQG;EACnBC,eAAe;EACfC,gBAAgB;EAChBC,mBAAmBN,QAAQO;CAC7B;CAGAC,MAAM;EACJZ,YAAY;EACZa,cAAcV,MAAMW;EACpBtB,UAAU;EACVF,UAAU;CACZ;CACAO,MAAM,EACJkB,QAAQX,QAAQG,GAClB;CACAS,KAAK;EACHV,WAAAA;EACAE,eAAe;EACfE,mBAAmBN,QAAQO;EAC3BM,iBAAiBb,QAAQG;CAC3B;AACF,CAAC,CACH;AAKA,SAASW,MACPC,WACA,EAAE/C,KAAKC,QAAQC,UAAUC,QACjB;CACR,MAAM6C,SAAS/C,UACVgD,KAAKC,MAAMhD,WAAWC,IAAI,IAAI4C,aAAa5C,OAC5CD,WAAW6C,YAAY5C;CAC3B,OAAO8C,KAAKE,IAAIF,KAAKG,IAAIJ,QAAQ,CAAC,GAAGhD,GAAG;AAC1C;;;;;;;;;;;;;;;;AAiBA,SAAAqD,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAlE;CAAA,IAAAI;CAAA,IAAAE;CAAA,IAAAC;CAAA,IAAA4D;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAkB,CAAA,CAAAhE,UAAAG,UAAAkE,IAAAjE,OAAAC,QAAAiE,IAAAhE,WAAAC,eAAA6D,OAAA,GAAAD,SAAAH;EASFC,EAAA,KAAAD;EAAAC,EAAA,KAAAjE;EAAAiE,EAAA,KAAA7D;EAAA6D,EAAA,KAAA3D;EAAA2D,EAAA,KAAA1D;EAAA0D,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAtE,WAAAiE,EAAA;EAAA7D,QAAA6D,EAAA;EAAA3D,YAAA2D,EAAA;EAAA1D,gBAAA0D,EAAA;EAAAE,QAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAPd,MAAA9D,WAAAkE,OAAAE,KAAAA,IAAA3E,oBAAAyE;CAEA,MAAAhE,SAAAiE,OAAAC,KAAAA,IAAA,iBAAAD;CAMA,MAAAE,QAAchF,SAAS;CACvB,MAAAiF,MAAYjC,SAASgC,KAAK;CAC1B,MAAAE,WAAiBnF,YAAY;CAC7B,MAAAoF,eAAqB/F,iBAAiB;CACtC,MAAAgG,aAAmBxG,oBAAoB;CACvC,MAAAyG,WAAiB9G,OAAwC,IAAI;CAC7D,MAAA6C,WAAiB/B,eAAe,CAAC;CAGjC,MAAA,CAAAiG,UAAAC,eAAgC/G,SAAiB;CACjD,MAAAgH,QAAcF,YAAYF,WAAUI;CACpC,MAAAC,UAAgBT,MAAK9B,QAAQO;CAC7B,MAAA1B,MAAYtD,YAAWiH;CAEvB,MAAAC,QAAczH,SAAQ0H,QAASpF,QAAQ,CAAC,CAAAqF,OAAQzH,cAAc;CAC9D,MAAAuD,QAAcgE,MAAKG;CACnB,MAAAC,OAAa5B,KAAIG,IAAKkB,QAAQ,IAAIC,SAAS,CAAC;CAC5C,MAAAO,cAAoBvG,QAAQoB,QAAQkF,MAAMpF,UAAUgB,KAAK;CACzD,MAAAR,SAAeN,WAAW;CAC1B,MAAAQ,OAAa2E,YAAWnE,QAAAA;CAExB,MAAAX,MAAYC,SACR6E,YAAWC,QAAS5E,OACpB8C,KAAIG,IAAK3C,QAAQN,OAAAA,IAAa,IAAIoE,UAAUD,OAAO,CAAC;CACxD,MAAAU,QAAc/E,SACVgF,QACEC,MAAKC,KAAM,EAAAP,QAAUE,YAAWC,QAAS,EAAE,IAAGK,GAAAC,SAC5C5G,WAAWkB,QAAQmF,aAAaD,MAAMN,SAAS9D,OAAO4E,IAAI,CAC5D,GACA5E,KAED,IAPS,CAAA;CAOR,IAAA6E;CAAA,IAAA/B,EAAA,OAAAvD,KAAA;EAEiCsF,WAAMC,OAAO,GAAGvF,GAAG;EAACuD,EAAA,KAAAvD;EAAAuD,EAAA,MAAA+B;CAAA,OAAAA,KAAA/B,EAAA;CAA3D,MAAA,CAAAiC,MAAAC,WAAwBnI,SAAegI,EAAoB;CAE3D,MAAAI,WAAiB1H,yBAAyB,EAAA0H,WAC9BC,UAAA;EAAA;EAERzF,SAAQ0F,IAAKC,UAAUF,MAAKG,cAAcC,GAAI/F,KAAKa,GAAG,CAAC;CAAC,EAE5D,CAAC;CAID9C,0BACE;EAAA;EAAA,OAESwH,OAAOrF,SAAQ8F,IAAK,GAAGhG,GAAG;CAAC,IAEpCiG,KAAAC,WAAA;EAAA;EAEE,IAAID,QAAQC,QACV9H,aAAaqH,SAASQ,GAAG;CAC1B,CAEL;CAAC,IAAAE;CAAA,IAAA5C,EAAA,QAAAvD,OAAAuD,EAAA,QAAAtD,UAAAsD,EAAA,QAAAU,gBAAAV,EAAA,QAAA1C,OAAA0C,EAAA,QAAArD,YAAAqD,EAAA,QAAApD,MAAA;EAGCgG,MAAApD,cAAA;GACE,MAAAqD,WAAiB;IAAApG;IAAAC;IAAAC,UAAyBA,SAAQ8F,IAAK;IAAC7F;GAAO;GAC/DgE,SAAQkC,SAAkBC,SAAC;IAAAC,UACf,CAACtC;IAAY8B,GACpBF,UAAU/C,MAAMC,WAAWqD,QAAQ,GAAGpG,KAAKa,GAAG;GACnD,CAAC;EAAC;EACH0C,EAAA,MAAAvD;EAAAuD,EAAA,MAAAtD;EAAAsD,EAAA,MAAAU;EAAAV,EAAA,MAAA1C;EAAA0C,EAAA,MAAArD;EAAAqD,EAAA,MAAApD;EAAAoD,EAAA,MAAA4C;CAAA,OAAAA,KAAA5C,EAAA;CAPH,MAAAiD,OAAaL;CASZ,IAAAM;CAAA,IAAAlD,EAAA,QAAAiD,MAAA;EAC4BC,WAAA;GAC3BD,KAAK,EAAE;EAAC;EACTjD,EAAA,MAAAiD;EAAAjD,EAAA,MAAAkD;CAAA,OAAAA,KAAAlD,EAAA;CAFD,MAAAmD,WAAiBD;CAEP,IAAAE;CAAA,IAAApD,EAAA,QAAAiD,MAAA;EACeG,WAAA;GACvBH,KAAK,CAAC;EAAC;EACRjD,EAAA,MAAAiD;EAAAjD,EAAA,MAAAoD;CAAA,OAAAA,KAAApD,EAAA;CAFD,MAAAqD,OAAaD;CAIb,MAAAE,QAAcpC,MAAKqC,KAAKC,KAAArG,WAAqB;EAAAD;EAAAC;EAAAC,OAGpCmE,YAAWnE;EAAMhB;EAAAiB,MAElBoE,MAAMtE;EAAMG;EAAAX;EAAAC;CAIpB,EAAE;CAGC,MAAA6G,KAAArJ;CAEM,MAAAsJ,KAAA;CAAQ,IAAAC;CAAA,IAAA3D,EAAA,QAAAS,SAAAmD,UAAA;EACTD,KAAAE,YAAYpD,SAAQmD,QAAS;EAAC5D,EAAA,MAAAS,SAAAmD;EAAA5D,EAAA,MAAA2D;CAAA,OAAAA,KAAA3D,EAAA;CAE3B,MAAA8D,KAAAtI,cAAyBgC,OAAMU,MAAOsC,IAAGtC,MAAOiC,KAAK;CAE3D,MAAA4D,MAAA1J;CACwB,MAAA2J,MAAAxI,cACrBgF,IAAGnB,KACH3C,UAAUc,OAAME,eAChBhB,UAAA,EAAAqE,OAAmBA,QAAQtE,IAAI,CACjC;CACiB,MAAAwH,MAAA;CAIN,MAAAC,MAAAzH,MAAM;CACjB,MAAA0H,MAAA;CAAU,IAAAC;CAAA,IAAApE,EAAA,QAAAqE,OAAAC,IAAA,2BAAA,GAAA;EACAF,MAAAG,QAAQzD,WAAW;EAACd,EAAA,MAAAoE;CAAA,OAAAA,MAAApE,EAAA;CAGT,MAAAwE,MAAA;CACW,MAAAC,MAAA;CACjB,MAAAC,MAAAC,UAAUjI,QAAQ6E,YAAWC,OAAQ5E,MAAMM,OAAOT,GAAG;CAEnE,MAAAmI,MAAA1D,MAAKqC,KAAKtE,MAAA4F,YACT,oBAAC,aAAD;EAA4C,OAAAvB,MAAMnG,YAAN;EACzC8B,UAAAA;CADS,GAAMA,KAAI6F,OAAJD,OAAN,CAGb;CAAC,IAAAE;CAAA,IAAA/E,EAAA,QAAAmC,YAAAnC,EAAA,QAAA+D,IAAA3K,cAAA4G,EAAA,QAAAgE,OAAAhE,EAAA,QAAAkE,OAAAlE,EAAA,QAAAoE,OAAApE,EAAA,QAAA0E,OAAA1E,EAAA,QAAA4E,KAAA;EAvBJG,MAAA,oBAAA,IAAA,YAAA;GACyB,uBAAAf;GAKN,kBAAAC;GAIN,WAAAC;GACX,YAAAC;GACU,UAAAC;GACAjC;GACLvB,KAAAA;GACgB,qBAAA4D;GACW,gCAAAC;GACjB,eAAAC;GAEdE,UAAAA;EAKH,CAAA;EAAsB5E,EAAA,MAAAmC;EAAAnC,EAAA,MAAA+D,IAAA3K;EAAA4G,EAAA,MAAAgE;EAAAhE,EAAA,MAAAkE;EAAAlE,EAAA,MAAAoE;EAAApE,EAAA,MAAA0E;EAAA1E,EAAA,MAAA4E;EAAA5E,EAAA,MAAA+E;CAAA,OAAAA,MAAA/E,EAAA;CAGN,MAAAgF,MAAA1I,iBAAiBmE,SAAQwE;CACzB,MAAAC,MAAAjD,SAAS,WAAWA,SAAS;CAAM,IAAAkD;CAAA,IAAAnF,EAAA,QAAAqE,OAAAC,IAAA,2BAAA,GAAA;EAG/Ca,MAAA,oBAAC,iBAAD,EACS,OAAA7H,MAAME,OAAMS,2BAA4BT,OAAMM,cAAc,CAAA;EACnEkC,EAAA,MAAAmF;CAAA,OAAAA,MAAAnF,EAAA;CAAA,IAAAoF;CAAA,IAAApF,EAAA,QAAAmD,YAAAnD,EAAA,QAAAgF,OAAAhF,EAAA,QAAAkF,KAAA;EAPJE,MAAA,oBAAC,YAAD;GACc,cAAAJ;GACA,YAAAE;GACH/B,SAAAA;GAETgC,UAAAA;EALS,CAAA;EAQEnF,EAAA,MAAAmD;EAAAnD,EAAA,MAAAgF;EAAAhF,EAAA,MAAAkF;EAAAlF,EAAA,MAAAoF;CAAA,OAAAA,MAAApF,EAAA;CAEC,MAAAqF,MAAAhJ,aAAaoE,SAAQ6E;CACrB,MAAAC,MAAAtD,SAAS,SAASA,SAAS;CAAM,IAAAuD;CAAA,IAAAxF,EAAA,QAAAqE,OAAAC,IAAA,2BAAA,GAAA;EAG7CkB,MAAA,oBAAC,iBAAD,CAAgB,CAAA;EAAGxF,EAAA,MAAAwF;CAAA,OAAAA,MAAAxF,EAAA;CAAA,IAAAyF;CAAA,IAAAzF,EAAA,QAAAqD,QAAArD,EAAA,QAAAqF,OAAArF,EAAA,QAAAuF,KAAA;EALrBE,MAAA,oBAAC,YAAD;GACc,cAAAJ;GACA,YAAAE;GACHlC,SAAAA;GAETmC,UAAAA;EALS,CAAA;EAMExF,EAAA,MAAAqD;EAAArD,EAAA,MAAAqF;EAAArF,EAAA,MAAAuF;EAAAvF,EAAA,MAAAyF;CAAA,OAAAA,MAAAzF,EAAA;CAAA,IAAA0F;CAAA,IAAA1F,EAAA,QAAAQ,IAAA9B,YAAAsB,EAAA,QAAAoF,OAAApF,EAAA,QAAAyF,KAAA;EAhBfC,MAAA,qBAAC,MAAD;GAAa,OAAAlF,IAAG9B;GAAhB,UAAA,CACE0G,KASAK,GAVG;;EAiBEzF,EAAA,MAAAQ,IAAA9B;EAAAsB,EAAA,MAAAoF;EAAApF,EAAA,MAAAyF;EAAAzF,EAAA,MAAA0F;CAAA,OAAAA,MAAA1F,EAAA;CAAA,IAAA2F;CAAA,IAAA3F,EAAA,QAAAyD,MAAAzD,EAAA,QAAA7D,SAAA6D,EAAA,QAAAE,SAAAF,EAAA,QAAA+E,OAAA/E,EAAA,QAAA0F,OAAA1F,EAAA,QAAA2D,MAAA3D,EAAA,QAAA8D,IAAA;EAjDT6B,MAAA,qBAAC,IAAD;GACcxJ,cAAAA;GACP,MAAAuH;GAAQ,GACTC;GAA8B,GAC9BzD;GACG,OAAA4D;GALT,UAAA,CAOEiB,KAyBAW,GAhCG;;EAkDE1F,EAAA,MAAAyD;EAAAzD,EAAA,MAAA7D;EAAA6D,EAAA,MAAAE;EAAAF,EAAA,MAAA+E;EAAA/E,EAAA,MAAA0F;EAAA1F,EAAA,MAAA2D;EAAA3D,EAAA,MAAA8D;EAAA9D,EAAA,MAAA2F;CAAA,OAAAA,MAAA3F,EAAA;CAAA,OAlDP2F;AAkDO;;;;;;;;AAWX,SAAAC,aAAA7F,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAlE;CAAA,IAAAmE;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAsB,CAAA,CAAAhE,UAAAoE,OAAA,GAAAD,SAAAH;EAAgDC,EAAA,KAAAD;EAAAC,EAAA,KAAAjE;EAAAiE,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAApE,WAAAiE,EAAA;EAAAE,QAAAF,EAAA;EAAAG,QAAAH,EAAA;CAAA;CACpE,MAAAO,QAAchF,SAAS;CACvB,MAAAiF,MAAYjC,SAASgC,KAAK;CAC1B,MAAAsF,SAAexK,YAAYiF,KAAAA,CAAS;CACpC,MAAAG,WAAiBnF,YAAY;CAC7B,MAAA8C,OAAaxE,IAAI2D,WAAW;CAC5B,MAAAL,QAAckB,MAAIlB,SAAJ;CACd,MAAAC,QAAciB,MAAIjB,SAAJ;CACd,MAAA2I,QAAcC,SAAS3H,IAAI;CAGxB,MAAAqF,KAAArJ;CAAI,IAAAgG;CAAA,IAAAJ,EAAA,OAAA5B,MAAA;EAAQgC,KAAA5E,cAAyBgC,OAAMY,MAAO4H,YAAY5H,IAAI,CAAC;EAAC4B,EAAA,KAAA5B;EAAA4B,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAClE,MAAAK,KAAAhG;CAC2B,MAAA0H,KAAA5E,QAAQ;CAAC,IAAAyF;CAAA,IAAA5C,EAAA,OAAA9C,SAAA8C,EAAA,OAAA6F,UAAA7F,EAAA,OAAA+B,IAAA;EAAvBa,KAAAxH,cAAc2G,IAAW7E,OAAO2I,MAAM;EAAC7F,EAAA,KAAA9C;EAAA8C,EAAA,KAAA6F;EAAA7F,EAAA,KAAA+B;EAAA/B,EAAA,KAAA4C;CAAA,OAAAA,KAAA5C,EAAA;CAC9C,MAAAkD,KAAA;CAAO,IAAAE;CAAA,IAAApD,EAAA,QAAAS,SAAAwF,OAAA;EACR7C,KAAAS,YAAYpD,SAAQwF,KAAM;EAACjG,EAAA,MAAAS,SAAAwF;EAAAjG,EAAA,MAAAoD;CAAA,OAAAA,KAAApD,EAAA;CAExB,MAAA0D,KAAAlI,cAAwCgF,IAAGvB,MAAO6G,OAAO3F,KAAK;CAAC,IAAAwD;CAAA,IAAA3D,EAAA,QAAA5B,MAAA;EAEzDuF,KAAAnI,cAAyBgC,OAAMI,MAAOoI,YAAY5H,IAAI,CAAC;EAAC4B,EAAA,MAAA5B;EAAA4B,EAAA,MAAA2D;CAAA,OAAAA,KAAA3D,EAAA;CAAA,IAAA8D;CAAA,IAAA9D,EAAA,QAAAjE,YAAAiE,EAAA,QAAA2D,IAAA;EAArEG,KAAA,oBAAC,MAAD;GAAa,OAAAH;GACV5H;EADE,CAAA;EAEEiE,EAAA,MAAAjE;EAAAiE,EAAA,MAAA2D;EAAA3D,EAAA,MAAA8D;CAAA,OAAAA,KAAA9D,EAAA;CAAA,IAAA+D;CAAA,IAAA/D,EAAA,QAAAE,SAAAF,EAAA,QAAAK,GAAAjG,QAAA4F,EAAA,QAAA4C,MAAA5C,EAAA,QAAAoD,MAAApD,EAAA,QAAA0D,MAAA1D,EAAA,QAAA8D,IAAA;EATTC,MAAA,oBAAA,GAAA,MAAA;GACc,cAAAnB;GACP,MAAAM;GAAO,GACRE;GAA2B,GAC3BlD;GACG,OAAAwD;GAEPI,UAAAA;EAGF,CAAA;EAAgB9D,EAAA,MAAAE;EAAAF,EAAA,MAAAK,GAAAjG;EAAA4F,EAAA,MAAA4C;EAAA5C,EAAA,MAAAoD;EAAApD,EAAA,MAAA0D;EAAA1D,EAAA,MAAA8D;EAAA9D,EAAA,MAAA+D;CAAA,OAAAA,MAAA/D,EAAA;CAAA,IAAAgE;CAAA,IAAAhE,EAAA,QAAAyD,MAAAzD,EAAA,QAAAI,MAAAJ,EAAA,QAAA+D,KAAA;EAXlBC,MAAA,oBAAC,IAAD;GAAa,OAAA5D;GACX2D,UAAAA;EADG,CAAA;EAYE/D,EAAA,MAAAyD;EAAAzD,EAAA,MAAAI;EAAAJ,EAAA,MAAA+D;EAAA/D,EAAA,MAAAgE;CAAA,OAAAA,MAAAhE,EAAA;CAAA,OAZPgE;AAYO;AAMX,SAASH,YAAYqC,MAAc;CACjC,OAAOjM,SAASkM,OAAO,QAAQ,EAAE,wBAAwBD,KAAK,IAAI5F,KAAAA;AACpE;AAEA,SAAS0B,OAAOrF,UAAkBF,KAAmB;CACnD;CACA,MAAM2J,UAAUzJ,YAAYf;CAC5B,MAAMyK,QAAQ1J,YAAYF,MAAMb;CAChC,IAAIwK,WAAWC,OACb,OAAO;CAET,IAAID,SACF,OAAO;CAET,OAAOC,QAAQ,QAAQ;AACzB;;;;;;;;;;;;;;;;;;;;AAqBA,SAAS/D,UAAU7C,QAAgBhD,KAAaa,KAAsB;CACpE;CACA,OAAOA,MAAMb,MAAMgD,SAASA;AAC9B;AAIA,SAASkF,UACPjI,QACA8E,OACA5E,MACAM,OACAT,KACsB;CACtB,IAAIA,OAAO,GACT;CAEF,IAAIC,QACF,OAAOiF,MAAMC,KAAK,EAAEP,QAAQG,QAAQ,EAAE,IAAIK,GAAGC,SAASA,OAAOlF,IAAI;CAEnE,MAAMG,SAAS4E,MAAMC,KAAK,EAAEP,QAAQnE,MAAM,IAAI2E,GAAG1E,UAC/CuC,KAAKE,IAAIzC,QAAQP,MAAMH,GAAG,CAC5B;CACA,OAAO,CAAC,GAAG,IAAI6J,IAAIvJ,MAAM,CAAC;AAC5B;AAKA,SAAS2E,QAAQ5E,OAA+BI,OAAuB;CACrE,MAAMqJ,KAAKzJ,MAAMuE,SAAS,IAAIvE,QAAQ,CAAC,GAAGA,OAAO,GAAGA,KAAK;CACzD,OAAO6E,MAAMC,KAAK,EAAEP,QAAQnE,MAAM,IAAI2E,GAAG1E,WAAW;EAClDL,OAAOyJ,GAAGhD,KAAKiD,SAAS1E,SAASA,IAAI;EACrC/E,QAAQwJ,GAAGhD,KAAKkD,WAAWA,OAAOtJ,MAAM,EAAEuJ,QAAQ,CAAC;EACnD1J,QAAQuJ,GAAGhD,KAAKkD,WAAWA,OAAOtJ,MAAM,EAAE4D,SAAS,CAAC;CACtD,EAAE;AACJ;AAEA,SAASiF,YAAY5H,MAA0C;CAC7D,OAAOA,SAAS,OAAOkC,KAAAA,IAAY,EAAES,OAAO3C,KAAKhB,MAAM;AACzD;AAOA,SAAA2I,SAAA3H,MAAA;CACE,MAAAf,OAAae,MAAIf;CACjB,MAAAV,WAAiByB,MAAIzB;CACrB,MAAAQ,QAAciB,MAAIjB,SAAJ;CACd,MAAAC,QAAcgB,MAAIhB,SAAJ;CACd,MAAAR,OAAawB,MAAIxB,QAAJ;CACb,MAAAU,MAAYc,MAAId,OAAJ;CAAkB,OAEvB5C,uBAAiB;EAAA;EAEtB,IAAI2C,SAASiD,KAAAA,KAAa3D,aAAa2D,KAAAA,GAAS,OACvC,CAAC;EAEV,MAAAb,SAAe9C,SAAQ8F,IAAK;EAC5B,MAAAkE,WAAiBlH,SAAS7C;EAC1B,MAAAgK,QAAcrM,YACZoM,UACAtJ,KAAIP,OACJO,KAAIN,QACJzC,cAAauM,KACf;EACA,MAAA9F,QAAcxG,YACZoM,UACAtJ,KAAIP,OACJO,KAAIL,QACJ1C,cAAauM,KACf;EACA,MAAAC,QAAcrH,SAASmH,QAAQ7F,QAAQ,IAAI5D,QAAQP,OAAOQ,QAAQ;EAAC,OAC5D;GAAAW,WAAa,CAAC,EAAAgJ,YAAczJ,MAAA,CAAOwJ,QAAPA,MAAqB,CAAC;GAAC/F;EAAQ;CAAC,CACpE;AAAC;AAMJ,SAASwD,QAAQyC,WAAoC;CACnD,QAAQ5E,UAA6B;EACnC4E,UAAU5E,MAAM6E,YAAY7K,OAAO2E,KAAK;CAC1C;AACF;AAEAjB,SAASoH,OAAOtB"}

package/dist/components/checkbox-group/index.d.ts

@@ -45,10 +45,9 @@ type CheckboxGroupProps = Omit<ViewProps, 'children' | 'style'> & {
    */
   readonly label: string;
   /**
-   * The name the form around the group knows it by, which its
-   * `validationErrors` are keyed on. A form hands `onSubmit` one string per
-   * name, so a group's selection is not among those values: read it through
-   * `onChange`, or hold it with `value`.
+   * The name the form around the group knows it by: its `onSubmit` is handed
+   * the ticked entries' values as a list under it, an empty one while none
+   * is ticked, and its `validationErrors` are keyed on it.
    */
   readonly name?: string;
   /** Called with the newly selected entries whenever a press changes them. */

package/dist/components/checkbox-group/index.js

@@ -146,7 +146,7 @@ function CheckboxGroup(t0) {
 			isReadOnly,
 			isRequired,
 			name,
-			submitted: void 0,
+			submitted: state.value,
 			validate,
 			value: state.value
 		};