@kanso-labs/react-native-kanso-ui 0.11.24 → 0.11.26

package/dist/components/carousel/index.js

@@ -7,7 +7,7 @@ import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { IconButton } from "../icon-button/index.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 Animated, { Extrapolation, interpolate, useAnimatedReaction, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, 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";
@@ -317,7 +317,7 @@ function Carousel(t0) {
 * cuts what it holds to the width it is drawn at.
 */
 function CarouselItem(t0) {
-	const $ = c(28);
+	const $ = c(32);
 	let children;
 	let props;
 	let style;
@@ -339,7 +339,9 @@ function CarouselItem(t0) {
 	const slot = use(SlotContext);
 	const count = slot?.count ?? 1;
 	const index = slot?.index ?? 0;
-	const drawn = useDrawn(slot);
+	const visibleWidth = useVisibleWidth(slot);
+	const drawn = useDrawn(slot, visibleWidth);
+	const large = slot?.large ?? 0;
 	const T0 = View;
 	let t1;
 	if ($[4] !== slot) {
@@ -372,45 +374,56 @@ function CarouselItem(t0) {
 		$[13] = t8;
 	} else t8 = $[13];
 	let t9;
-	if ($[14] !== children || $[15] !== t8) {
-		t9 = /* @__PURE__ */ jsx(View, {
-			style: t8,
-			children
-		});
+	if ($[14] !== children || $[15] !== large || $[16] !== visibleWidth) {
+		t9 = typeof children === "function" ? children({
+			visibleWidth,
+			width: large
+		}) : children;
 		$[14] = children;
-		$[15] = t8;
-		$[16] = t9;
-	} else t9 = $[16];
+		$[15] = large;
+		$[16] = visibleWidth;
+		$[17] = t9;
+	} else t9 = $[17];
 	let t10;
-	if ($[17] !== props || $[18] !== t2.View || $[19] !== t4 || $[20] !== t6 || $[21] !== t7 || $[22] !== t9) {
-		t10 = /* @__PURE__ */ jsx(t2.View, {
+	if ($[18] !== t8 || $[19] !== t9) {
+		t10 = /* @__PURE__ */ jsx(View, {
+			style: t8,
+			children: t9
+		});
+		$[18] = t8;
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== props || $[22] !== t10 || $[23] !== t2.View || $[24] !== t4 || $[25] !== t6 || $[26] !== t7) {
+		t11 = /* @__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;
+		$[21] = props;
+		$[22] = t10;
+		$[23] = t2.View;
+		$[24] = t4;
+		$[25] = t6;
+		$[26] = t7;
 		$[27] = t11;
 	} else t11 = $[27];
-	return t11;
+	let t12;
+	if ($[28] !== T0 || $[29] !== t1 || $[30] !== t11) {
+		t12 = /* @__PURE__ */ jsx(T0, {
+			style: t1,
+			children: t11
+		});
+		$[28] = T0;
+		$[29] = t1;
+		$[30] = t11;
+		$[31] = t12;
+	} else t12 = $[31];
+	return t12;
 }
 function describedAs(word) {
 	return Platform.OS === "web" ? { "aria-roledescription": word } : void 0;
@@ -463,7 +476,7 @@ function pathsOf(rests, count) {
 function slotWidthOf(slot) {
 	return slot === null ? void 0 : { width: slot.large };
 }
-function useDrawn(slot) {
+function useDrawn(slot, visibleWidth) {
 	const path = slot?.path;
 	const scrolled = slot?.scrolled;
 	const index = slot?.index ?? 0;
@@ -474,9 +487,8 @@ function useDrawn(slot) {
 		"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 start = interpolate(offset / step, path.rests, path.starts, Extrapolation.CLAMP);
+		const width = visibleWidth.get();
 		const shift = offset + start + width / 2 - index * step - large / 2;
 		return {
 			transform: [{ translateX: rtl ? -shift : shift }],
@@ -484,6 +496,17 @@ function useDrawn(slot) {
 		};
 	});
 }
+function useVisibleWidth(slot) {
+	const path = slot?.path;
+	const scrolled = slot?.scrolled;
+	const large = slot?.large ?? 0;
+	const step = slot?.step ?? 0;
+	return useDerivedValue(() => {
+		"worklet";
+		if (path === void 0 || scrolled === void 0) return large;
+		return interpolate(scrolled.get() / step, path.rests, path.widths, Extrapolation.CLAMP);
+	});
+}
 function widthTo(onMeasure) {
 	return (event) => {
 		onMeasure(event.nativeEvent.layout.width);

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

@@ -1 +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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","ScrollView","ViewProps","ViewStyle","AnimatedStyle","DerivedValue","SharedValue","Children","createContext","isValidElement","use","useCallback","useRef","useState","I18nManager","Platform","StyleSheet","useWindowDimensions","View","Animated","Extrapolation","interpolate","useAnimatedReaction","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useReducedMotion","useSharedValue","scheduleOnRN","CarouselLayout","Placement","arrange","GAP","placements","ChevronEndGlyph","slideLabelFor","useLocaleOf","useMessages","useTheme","composeStyles","themedStyles","IconButton","DEFAULT_ITEM_SIZE","SLACK","CarouselItemProps","Omit","children","state","CarouselItemRenderProps","ref","visibleWidth","width","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","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","useVisibleWidth","drawn","useDrawn","slotWidthOf","slide","word","OS","atStart","atEnd","Set","at","_placed","placed","left","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 {\n  AnimatedStyle,\n  DerivedValue,\n  SharedValue,\n} 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  useDerivedValue,\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// **What an item holds can see its mask.** The page shows an item's text\n// once the item is wide enough to hold it, and only what the item holds\n// knows where its text is, so `Carousel.Item` takes its children as a\n// function too, as web's does, handed the width the item is laid out at and\n// the width that shows of it. The second is a Reanimated value rather than\n// web's number, since the mask follows the scroll on the UI thread and a\n// number would re-render the item every frame; an animated style reads it\n// there, so text can fade or hide as the mask closes over it.\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  /**\n   * What the item shows: usually an image, which the item masks. A function\n   * is handed how much of the item shows, so text the item has no room for\n   * can be hidden as the mask closes over it.\n   */\n  readonly children?:\n    | ((state: CarouselItemRenderProps) => ReactNode)\n    | ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/** How much of a `Carousel.Item` shows, for children written as a function. */\ntype CarouselItemRenderProps = {\n  /**\n   * How much of `width` shows, in dp, following the scroll on the UI\n   * thread, where an animated style reads it. The mask takes the rest evenly\n   * from both sides, so `(width - visibleWidth) / 2` is cut off each. It is\n   * `width` for an item drawn large, and for every item of an uncontained\n   * carousel, which masks nothing.\n   */\n  readonly visibleWidth: DerivedValue<number>\n  /**\n   * The width the item is laid out at, in dp: the large item's, which every\n   * item in the carousel shares.\n   */\n  readonly width: number\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 visibleWidth = useVisibleWidth(slot)\n  const drawn = useDrawn(slot, visibleWidth)\n  const large = slot?.large ?? 0\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          {typeof children === 'function'\n            ? children({ visibleWidth, width: large })\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, visibleWidth: DerivedValue<number>) {\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 start = interpolate(\n      offset / step,\n      path.rests,\n      path.starts,\n      Extrapolation.CLAMP,\n    )\n    const width = visibleWidth.get()\n    const shift = offset + start + width / 2 - index * step - large / 2\n    return { transform: [{ translateX: rtl ? -shift : shift }], width }\n  })\n}\n\n// The width an item is drawn at, which is how much of it shows: the\n// arrangement's, interpolated between rests, or the large width where\n// nothing is masked.\nfunction useVisibleWidth(slot: null | Slot): DerivedValue<number> {\n  const path = slot?.path\n  const scrolled = slot?.scrolled\n  const large = slot?.large ?? 0\n  const step = slot?.step ?? 0\n\n  return useDerivedValue(() => {\n    'worklet'\n    if (path === undefined || scrolled === undefined) {\n      return large\n    }\n    return interpolate(\n      scrolled.get() / step,\n      path.rests,\n      path.widths,\n      Extrapolation.CLAMP,\n    )\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 {\n  CarouselItemProps,\n  CarouselItemRenderProps,\n  CarouselLayout,\n  CarouselProps,\n}\n"],"mappings":"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"}

package/dist/components/color-picker/index.js

@@ -35,6 +35,7 @@ const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>
 		height: SWATCH,
 		width: SWATCH
 	},
+	swatchDisabled: { opacity: stateLayerOpacity.disabledContent },
 	trigger: {
 		alignItems: "center",
 		alignSelf: "flex-start",
@@ -73,7 +74,7 @@ const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>
 * places.
 */
 function ColorPicker(t0) {
-	const $ = c(68);
+	const $ = c(69);
 	const { alpha: t1, children, defaultOpen, defaultValue, isDisabled: t2, isOpen, label, onChange, onOpenChange, ref, style, testID, value } = t0;
 	const alpha = t1 === void 0 ? false : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -160,38 +161,42 @@ function ColorPicker(t0) {
 	const t14 = "button";
 	const t15 = composeStyles(styles.trigger, isDisabled ? styles.disabled : void 0, feedback.ring, style);
 	const t16 = feedback.layer;
-	let t17;
-	if ($[22] !== state.color || $[23] !== styles.swatch) {
-		t17 = /* @__PURE__ */ jsx(ColorSwatch, {
-			color: state.color,
-			style: styles.swatch
-		});
-		$[22] = state.color;
-		$[23] = styles.swatch;
-		$[24] = t17;
-	} else t17 = $[24];
-	let t18;
-	if ($[25] !== colors.onSurface || $[26] !== isDisabled || $[27] !== labelRole || $[28] !== stateLayerOpacity) {
-		t18 = composeStyles(labelRole, { color: isDisabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurface });
-		$[25] = colors.onSurface;
-		$[26] = isDisabled;
-		$[27] = labelRole;
-		$[28] = stateLayerOpacity;
-		$[29] = t18;
-	} else t18 = $[29];
+	const T1 = ColorSwatch;
+	const t17 = state.color;
+	const t18 = composeStyles(styles.swatch, isDisabled ? styles.swatchDisabled : void 0);
 	let t19;
-	if ($[30] !== label || $[31] !== t18) {
-		t19 = /* @__PURE__ */ jsx(Text, {
-			style: t18,
-			children: label
+	if ($[22] !== T1 || $[23] !== state.color || $[24] !== t18) {
+		t19 = /* @__PURE__ */ jsx(T1, {
+			color: t17,
+			style: t18
 		});
-		$[30] = label;
-		$[31] = t18;
-		$[32] = t19;
-	} else t19 = $[32];
+		$[22] = T1;
+		$[23] = state.color;
+		$[24] = t18;
+		$[25] = t19;
+	} else t19 = $[25];
 	let t20;
-	if ($[33] !== T0 || $[34] !== feedback.handlers || $[35] !== feedback.layer || $[36] !== isDisabled || $[37] !== overlay.isOpen || $[38] !== show || $[39] !== t10 || $[40] !== t12 || $[41] !== t13 || $[42] !== t15 || $[43] !== t17 || $[44] !== t19 || $[45] !== testID) {
-		t20 = /* @__PURE__ */ jsxs(T0, {
+	if ($[26] !== colors.onSurface || $[27] !== isDisabled || $[28] !== labelRole || $[29] !== stateLayerOpacity) {
+		t20 = composeStyles(labelRole, { color: isDisabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurface });
+		$[26] = colors.onSurface;
+		$[27] = isDisabled;
+		$[28] = labelRole;
+		$[29] = stateLayerOpacity;
+		$[30] = t20;
+	} else t20 = $[30];
+	let t21;
+	if ($[31] !== label || $[32] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Text, {
+			style: t20,
+			children: label
+		});
+		$[31] = label;
+		$[32] = t20;
+		$[33] = t21;
+	} else t21 = $[33];
+	let t22;
+	if ($[34] !== T0 || $[35] !== feedback.handlers || $[36] !== feedback.layer || $[37] !== isDisabled || $[38] !== overlay.isOpen || $[39] !== show || $[40] !== t10 || $[41] !== t12 || $[42] !== t13 || $[43] !== t15 || $[44] !== t19 || $[45] !== t21 || $[46] !== testID) {
+		t22 = /* @__PURE__ */ jsxs(T0, {
 			...t8,
 			"aria-expanded": t9,
 			"aria-label": t10,
@@ -204,35 +209,35 @@ function ColorPicker(t0) {
 			testID,
 			children: [
 				t16,
-				t17,
-				t19
+				t19,
+				t21
 			]
 		});
-		$[33] = T0;
-		$[34] = feedback.handlers;
-		$[35] = feedback.layer;
-		$[36] = isDisabled;
-		$[37] = overlay.isOpen;
-		$[38] = show;
-		$[39] = t10;
-		$[40] = t12;
-		$[41] = t13;
-		$[42] = t15;
-		$[43] = t17;
+		$[34] = T0;
+		$[35] = feedback.handlers;
+		$[36] = feedback.layer;
+		$[37] = isDisabled;
+		$[38] = overlay.isOpen;
+		$[39] = show;
+		$[40] = t10;
+		$[41] = t12;
+		$[42] = t13;
+		$[43] = t15;
 		$[44] = t19;
-		$[45] = testID;
-		$[46] = t20;
-	} else t20 = $[46];
-	const t21 = overlay.isOpen;
-	let t22;
-	if ($[47] !== state) {
-		t22 = pickedOf(state);
-		$[47] = state;
-		$[48] = t22;
-	} else t22 = $[48];
-	let t23;
-	if ($[49] !== alpha || $[50] !== children || $[51] !== isDisabled || $[52] !== label || $[53] !== locale || $[54] !== styles.body) {
-		t23 = children ?? /* @__PURE__ */ jsxs(View, {
+		$[45] = t21;
+		$[46] = testID;
+		$[47] = t22;
+	} else t22 = $[47];
+	const t23 = overlay.isOpen;
+	let t24;
+	if ($[48] !== state) {
+		t24 = pickedOf(state);
+		$[48] = state;
+		$[49] = t24;
+	} else t24 = $[49];
+	let t25;
+	if ($[50] !== alpha || $[51] !== children || $[52] !== isDisabled || $[53] !== label || $[54] !== locale || $[55] !== styles) {
+		t25 = children ?? /* @__PURE__ */ jsxs(View, {
 			style: styles.body,
 			children: [
 				/* @__PURE__ */ jsx(ColorArea, {
@@ -259,49 +264,49 @@ function ColorPicker(t0) {
 				})
 			]
 		});
-		$[49] = alpha;
-		$[50] = children;
-		$[51] = isDisabled;
-		$[52] = label;
-		$[53] = locale;
-		$[54] = styles.body;
-		$[55] = t23;
-	} else t23 = $[55];
-	let t24;
-	if ($[56] !== t22 || $[57] !== t23) {
-		t24 = /* @__PURE__ */ jsx(PickedColorContext, {
-			value: t22,
-			children: t23
+		$[50] = alpha;
+		$[51] = children;
+		$[52] = isDisabled;
+		$[53] = label;
+		$[54] = locale;
+		$[55] = styles;
+		$[56] = t25;
+	} else t25 = $[56];
+	let t26;
+	if ($[57] !== t24 || $[58] !== t25) {
+		t26 = /* @__PURE__ */ jsx(PickedColorContext, {
+			value: t24,
+			children: t25
 		});
-		$[56] = t22;
-		$[57] = t23;
-		$[58] = t24;
-	} else t24 = $[58];
-	let t25;
-	if ($[59] !== close || $[60] !== label || $[61] !== overlay.isOpen || $[62] !== t24 || $[63] !== trigger) {
-		t25 = /* @__PURE__ */ jsx(PickerPopup, {
+		$[57] = t24;
+		$[58] = t25;
+		$[59] = t26;
+	} else t26 = $[59];
+	let t27;
+	if ($[60] !== close || $[61] !== label || $[62] !== overlay.isOpen || $[63] !== t26 || $[64] !== trigger) {
+		t27 = /* @__PURE__ */ jsx(PickerPopup, {
 			anchor,
 			close,
-			isOpen: t21,
+			isOpen: t23,
 			label,
 			trigger,
-			children: t24
+			children: t26
 		});
-		$[59] = close;
-		$[60] = label;
-		$[61] = overlay.isOpen;
-		$[62] = t24;
-		$[63] = trigger;
-		$[64] = t25;
-	} else t25 = $[64];
-	let t26;
-	if ($[65] !== t20 || $[66] !== t25) {
-		t26 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t20, t25] });
-		$[65] = t20;
-		$[66] = t25;
-		$[67] = t26;
-	} else t26 = $[67];
-	return t26;
+		$[60] = close;
+		$[61] = label;
+		$[62] = overlay.isOpen;
+		$[63] = t26;
+		$[64] = trigger;
+		$[65] = t27;
+	} else t27 = $[65];
+	let t28;
+	if ($[66] !== t22 || $[67] !== t27) {
+		t28 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t22, t27] });
+		$[66] = t22;
+		$[67] = t27;
+		$[68] = t28;
+	} else t28 = $[68];
+	return t28;
 }
 function pickedOf(state) {
 	return {