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

package/dist/components/tooltip/index.js

@@ -0,0 +1,223 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { ButtonTooltipContext } from "../../button/slots.js";
+import { PANEL_ORIGINS, usePanelMotion } from "../../overlay/panel.js";
+import { Overlay } from "../../overlay/host.js";
+import { useAnchoredPlacement } from "../../overlay/anchored.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, Text } from "react-native";
+import Animated from "react-native-reanimated";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTooltipTriggerState } from "react-stately/useTooltipTriggerState";
+//#region src/components/tooltip/index.tsx
+const DEFAULT_DELAY = 1500;
+const DEFAULT_CLOSE_DELAY = 500;
+const MAX_WIDTH = 320;
+const stylesOf = themedStyles(({ colors, radii, spacing }) => StyleSheet.create({
+	label: { color: colors.inverseOnSurface },
+	surface: {
+		backgroundColor: colors.inverseSurface,
+		borderRadius: radii.xs,
+		maxWidth: MAX_WIDTH,
+		paddingHorizontal: spacing.sm,
+		paddingVertical: spacing.xs,
+		pointerEvents: "none"
+	}
+}));
+/**
+* A label for the button it wraps, the tooltips spec page's plain tooltip,
+* shown while a press is held on the button or a pointer rests on it.
+*
+* ```tsx
+* <Tooltip label="Search">
+*   <IconButton aria-label="Search">
+*     <SearchGlyph />
+*   </IconButton>
+* </Tooltip>
+* ```
+*
+* Pass `isOpen` with `onOpenChange` to hold the open state, or `defaultOpen`
+* to let it keep its own, and `delay` and `closeDelay` for how long it waits
+* before it opens and closes. What it says has to repeat what the button
+* already means, since a screen reader hears it as the button's hint and
+* touch only shows it to someone who holds a press: anything with a button
+* in it, or worth reading twice, is a `Popover`.
+*
+* `style`, `ref` and `testID` land on the tooltip itself.
+*/
+function Tooltip(t0) {
+	const $ = c(30);
+	const { align: t1, alignOffset, children, closeDelay: t2, defaultOpen, delay: t3, isDisabled: t4, isOpen, label, onOpenChange, ref, shouldCloseOnPress: t5, side: t6, sideOffset, style, testID, trigger } = t0;
+	const align = t1 === void 0 ? "center" : t1;
+	const closeDelay = t2 === void 0 ? DEFAULT_CLOSE_DELAY : t2;
+	const delay = t3 === void 0 ? DEFAULT_DELAY : t3;
+	const isDisabled = t4 === void 0 ? false : t4;
+	const shouldCloseOnPress = t5 === void 0 ? true : t5;
+	const side = t6 === void 0 ? "top" : t6;
+	let t7;
+	if ($[0] !== closeDelay || $[1] !== defaultOpen || $[2] !== delay || $[3] !== isOpen || $[4] !== onOpenChange) {
+		t7 = {
+			closeDelay,
+			defaultOpen,
+			delay,
+			isOpen,
+			onOpenChange
+		};
+		$[0] = closeDelay;
+		$[1] = defaultOpen;
+		$[2] = delay;
+		$[3] = isOpen;
+		$[4] = onOpenChange;
+		$[5] = t7;
+	} else t7 = $[5];
+	const state = useTooltipTriggerState(t7);
+	const anchor = useRef(null);
+	const hovered = useRef(false);
+	const [present, setPresent] = useState(state.isOpen);
+	const pointer = trigger !== "focus";
+	let t8;
+	if ($[6] !== delay || $[7] !== isDisabled || $[8] !== label || $[9] !== pointer || $[10] !== shouldCloseOnPress || $[11] !== state) {
+		t8 = isDisabled ? null : {
+			delayLongPress: delay,
+			hint: label,
+			onHoverIn: pointer ? () => {
+				hovered.current = true;
+				state.open(false);
+			} : void 0,
+			onHoverOut: pointer ? () => {
+				hovered.current = false;
+				state.close(false);
+			} : void 0,
+			onLongPress: () => {
+				state.open(true);
+			},
+			onPressIn: shouldCloseOnPress ? () => {
+				state.close(true);
+			} : void 0,
+			onPressOut: () => {
+				if (!hovered.current) state.close(false);
+			},
+			ref: anchor
+		};
+		$[6] = delay;
+		$[7] = isDisabled;
+		$[8] = label;
+		$[9] = pointer;
+		$[10] = shouldCloseOnPress;
+		$[11] = state;
+		$[12] = t8;
+	} else t8 = $[12];
+	const described = t8;
+	if (state.isOpen && !present) setPresent(true);
+	let t9;
+	if ($[13] !== children || $[14] !== described) {
+		t9 = /* @__PURE__ */ jsx(ButtonTooltipContext, {
+			value: described,
+			children
+		});
+		$[13] = children;
+		$[14] = described;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== align || $[17] !== alignOffset || $[18] !== label || $[19] !== present || $[20] !== ref || $[21] !== side || $[22] !== sideOffset || $[23] !== state.isOpen || $[24] !== style || $[25] !== testID) {
+		t10 = present ? /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(TooltipSurface, {
+			align,
+			alignOffset,
+			anchor,
+			isOpen: state.isOpen,
+			label,
+			ref,
+			setPresent,
+			side,
+			sideOffset,
+			style,
+			testID
+		}) }) : null;
+		$[16] = align;
+		$[17] = alignOffset;
+		$[18] = label;
+		$[19] = present;
+		$[20] = ref;
+		$[21] = side;
+		$[22] = sideOffset;
+		$[23] = state.isOpen;
+		$[24] = style;
+		$[25] = testID;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== t10 || $[28] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t9, t10] });
+		$[27] = t10;
+		$[28] = t9;
+		$[29] = t11;
+	} else t11 = $[29];
+	return t11;
+}
+function TooltipSurface(t0) {
+	const $ = c(17);
+	const { align, alignOffset, anchor, isOpen, label, ref, setPresent, side, sideOffset, style, testID } = t0;
+	const styles = stylesOf(useTheme());
+	const role = useTypeRole("bodySmall");
+	let t1;
+	if ($[0] !== align || $[1] !== alignOffset || $[2] !== anchor || $[3] !== side || $[4] !== sideOffset) {
+		t1 = {
+			align,
+			alignOffset,
+			anchor,
+			side,
+			sideOffset
+		};
+		$[0] = align;
+		$[1] = alignOffset;
+		$[2] = anchor;
+		$[3] = side;
+		$[4] = sideOffset;
+		$[5] = t1;
+	} else t1 = $[5];
+	const placement = useAnchoredPlacement(t1);
+	const motion = usePanelMotion(isOpen, placement.placed, setPresent);
+	const t2 = Animated;
+	const t3 = true;
+	const t4 = placement.onLayout;
+	const t5 = composeStyles(styles.surface, placement.style, { transformOrigin: PANEL_ORIGINS[placement.side] }, motion, style);
+	const T0 = Text;
+	const t6 = composeStyles(role, styles.label);
+	let t7;
+	if ($[6] !== T0 || $[7] !== label || $[8] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			style: t6,
+			children: label
+		});
+		$[6] = T0;
+		$[7] = label;
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== placement.onLayout || $[11] !== ref || $[12] !== t2.View || $[13] !== t5 || $[14] !== t7 || $[15] !== testID) {
+		t8 = /* @__PURE__ */ jsx(t2.View, {
+			"aria-hidden": t3,
+			onLayout: t4,
+			ref,
+			style: t5,
+			testID,
+			children: t7
+		});
+		$[10] = placement.onLayout;
+		$[11] = ref;
+		$[12] = t2.View;
+		$[13] = t5;
+		$[14] = t7;
+		$[15] = testID;
+		$[16] = t8;
+	} else t8 = $[16];
+	return t8;
+}
+//#endregion
+export { Tooltip };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","RefObject","HostInstance","StyleProp","TextStyle","ViewStyle","AnimatedStyle","useMemo","useRef","useState","Text","NativeText","StyleSheet","Animated","useTooltipTriggerState","ButtonTooltip","OverlayAlign","OverlaySide","ResolvedTheme","ButtonTooltipContext","Overlay","useAnchoredPlacement","PANEL_ORIGINS","usePanelMotion","useTheme","composeStyles","themedStyles","useTypeRole","DEFAULT_DELAY","DEFAULT_CLOSE_DELAY","MAX_WIDTH","stylesOf","colors","radii","spacing","create","label","color","inverseOnSurface","surface","backgroundColor","inverseSurface","borderRadius","xs","maxWidth","paddingHorizontal","sm","paddingVertical","pointerEvents","SurfaceProps","Pick","TooltipProps","anchor","isOpen","setPresent","present","testID","TooltipAlign","align","alignOffset","children","closeDelay","defaultOpen","delay","isDisabled","onOpenChange","ref","shouldCloseOnPress","side","TooltipSide","sideOffset","style","trigger","Tooltip","t0","$","_c","t1","t2","t3","t4","t5","t6","undefined","t7","state","hovered","pointer","t8","delayLongPress","hint","onHoverIn","current","open","onHoverOut","close","onLongPress","onPressIn","onPressOut","described","t9","t10","t11","TooltipSurface","styles","role","placement","motion","placed","onLayout","transformOrigin","T0","View","_c","NativeText"],"sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["import type { ReactNode, Ref, RefObject } from 'react'\nimport type {\n  HostInstance,\n  StyleProp,\n  TextStyle,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { useMemo, useRef, useState } from 'react'\nimport { Text as NativeText, StyleSheet } from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useTooltipTriggerState } from 'react-stately/useTooltipTriggerState'\n\nimport type { ButtonTooltip } from '../../button/slots'\nimport type { OverlayAlign, OverlaySide } from '../../overlay'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { ButtonTooltipContext } from '../../button/slots'\nimport { Overlay, useAnchoredPlacement } from '../../overlay'\nimport { PANEL_ORIGINS, usePanelMotion } from '../../overlay/panel'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// kanso-ui's Tooltip, the tooltips page's plain tooltip: a container on\n// inverse surface with 8dp of padding at the ends and 4dp above and below,\n// holding a line of supporting text in body small on inverse on surface, so\n// one line is the page's 24dp. The page names a shape token without giving\n// its value, so it takes the extra-small corner, as web's does, and it lies\n// flat: the plain tooltip's tokens give no elevation. A long label wraps at\n// 320dp rather than running the width of the window.\n//\n// **It is placed by src/overlay's anchored placement**, in the overlay host\n// above the screen: on `side`, `top` unless told otherwise, lined up by\n// `align`, flipped to the opposite side at the edge of the window and kept\n// inside the safe area. It grows and fades in and out from the edge facing\n// the trigger as every anchored panel does, through src/overlay's panel\n// motion. It takes no press and draws no layer under it, so the screen stays\n// usable while it shows.\n//\n// **Touch has no hover, so a press held on the trigger for `delay` opens it**,\n// as Android's own tooltips open on a long press, and the press then ends\n// without pressing the trigger. A pointer resting on the trigger for `delay`\n// opens it as well, an iPad's or an Android mouse's. It closes `closeDelay`\n// after the pointer leaves, or after a held press ends while no pointer is on\n// the trigger, and at once on a press of the trigger unless\n// `shouldCloseOnPress` is off. `trigger=\"focus\"` leaves the pointer out, so\n// only the held press opens it. The state is React Stately's, the one web's\n// React Aria keeps, so once one tooltip has shown, the next a pointer rests on\n// opens at once, and only one shows at a time.\n//\n// **A screen reader never reaches the surface.** The label is the trigger's\n// accessibility hint instead, read after its name, which is what web's\n// `aria-describedby` gives a reader, and why the label is text.\n//\n// **The trigger is a Button, an IconButton or a FAB placed directly inside\n// it**, which takes the tooltip through src/button's slots.ts, as a\n// popover's trigger takes the popover. A tooltip and a popover or menu can\n// wrap the same button in either order.\n\n// How long a pointer rests on the trigger, or a press is held on it, before\n// the tooltip opens, and how long it stays once the pointer or the press has\n// gone, React Aria's own defaults, which web's takes.\nconst DEFAULT_DELAY = 1500\nconst DEFAULT_CLOSE_DELAY = 500\n\n// The widest it draws, web's cap.\nconst MAX_WIDTH = 320\n\nconst stylesOf = themedStyles(({ colors, radii, spacing }: ResolvedTheme) =>\n  StyleSheet.create({\n    label: {\n      color: colors.inverseOnSurface,\n    },\n    surface: {\n      backgroundColor: colors.inverseSurface,\n      borderRadius: radii.xs,\n      maxWidth: MAX_WIDTH,\n      paddingHorizontal: spacing.sm,\n      paddingVertical: spacing.xs,\n      pointerEvents: 'none',\n    },\n  }),\n)\n\ntype SurfaceProps = Pick<\n  TooltipProps,\n  'align' | 'alignOffset' | 'label' | 'ref' | 'side' | 'sideOffset' | 'style'\n> & {\n  readonly anchor: RefObject<HostInstance | null>\n  readonly isOpen: boolean\n  readonly setPresent: (present: boolean) => void\n  readonly testID: string | undefined\n}\n\n/** Where the tooltip sits along the side it opens on. */\ntype TooltipAlign = OverlayAlign\n\ntype TooltipProps = {\n  /**\n   * Where the tooltip sits along the side it opens on. On `top` and\n   * `bottom`, `start` and `end` follow a right-to-left layout.\n   * @default 'center'\n   */\n  readonly align?: TooltipAlign\n  /** Moves the tooltip along that side, in dp: right or down when positive. */\n  readonly alignOffset?: number\n  /**\n   * The button the tooltip describes, and nothing else: a `Button`,\n   * `IconButton` or `Fab`, or a `Popover` or `Menu` whose trigger is one.\n   */\n  readonly children?: ReactNode\n  /**\n   * How long the tooltip stays once the pointer has left the trigger, or a\n   * held press has ended, in milliseconds.\n   * @default 500\n   */\n  readonly closeDelay?: number\n  /** Whether the tooltip starts open, when it keeps its own state. */\n  readonly defaultOpen?: boolean\n  /**\n   * How long a pointer rests on the trigger, or a press is held on it,\n   * before the tooltip opens, in milliseconds.\n   * @default 1500\n   */\n  readonly delay?: number\n  /**\n   * Keeps the tooltip from opening, and its label off the trigger's hint.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Whether the tooltip is open, when the call site holds the state. */\n  readonly isOpen?: boolean\n  /**\n   * What the tooltip says. Text, since it is also the trigger's\n   * accessibility hint, which a screen reader reads after its name.\n   */\n  readonly label: string\n  /** Called with the new state as the tooltip opens or closes. */\n  readonly onOpenChange?: (isOpen: boolean) => void\n  readonly ref?: Ref<HostInstance>\n  /**\n   * Whether a press of the trigger closes the tooltip.\n   * @default true\n   */\n  readonly shouldCloseOnPress?: boolean\n  /**\n   * Which side of the trigger the tooltip opens on. It flips to the opposite\n   * side when there is no room.\n   * @default 'top'\n   */\n  readonly side?: TooltipSide\n  /**\n   * The gap between the trigger and the tooltip, in dp.\n   * @default spacing.sm\n   */\n  readonly sideOffset?: number\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n  /**\n   * `focus` leaves a pointer resting on the trigger out, so only a press\n   * held on it opens the tooltip.\n   */\n  readonly trigger?: 'focus'\n}\n\n/** Which side of the trigger the tooltip opens on. */\ntype TooltipSide = OverlaySide\n\n/**\n * A label for the button it wraps, the tooltips spec page's plain tooltip,\n * shown while a press is held on the button or a pointer rests on it.\n *\n * ```tsx\n * <Tooltip label=\"Search\">\n *   <IconButton aria-label=\"Search\">\n *     <SearchGlyph />\n *   </IconButton>\n * </Tooltip>\n * ```\n *\n * Pass `isOpen` with `onOpenChange` to hold the open state, or `defaultOpen`\n * to let it keep its own, and `delay` and `closeDelay` for how long it waits\n * before it opens and closes. What it says has to repeat what the button\n * already means, since a screen reader hears it as the button's hint and\n * touch only shows it to someone who holds a press: anything with a button\n * in it, or worth reading twice, is a `Popover`.\n *\n * `style`, `ref` and `testID` land on the tooltip itself.\n */\nfunction Tooltip({\n  align = 'center',\n  alignOffset,\n  children,\n  closeDelay = DEFAULT_CLOSE_DELAY,\n  defaultOpen,\n  delay = DEFAULT_DELAY,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  ref,\n  shouldCloseOnPress = true,\n  side = 'top',\n  sideOffset,\n  style,\n  testID,\n  trigger,\n}: TooltipProps) {\n  const state = useTooltipTriggerState({\n    closeDelay,\n    defaultOpen,\n    delay,\n    isOpen,\n    onOpenChange,\n  })\n  const anchor = useRef<HostInstance>(null)\n  const hovered = useRef(false)\n  const [present, setPresent] = useState(state.isOpen)\n  const pointer = trigger !== 'focus'\n  // What the trigger takes on: the pointer resting on it and leaving it, the\n  // held press that opens the tooltip, and a press that closes it, at once as\n  // it starts and after `closeDelay` as a held one ends, unless a pointer\n  // still rests on the trigger, which keeps it until the pointer leaves.\n  const described = useMemo<ButtonTooltip | null>(\n    () =>\n      isDisabled\n        ? null\n        : {\n            delayLongPress: delay,\n            hint: label,\n            onHoverIn: pointer\n              ? () => {\n                  hovered.current = true\n                  state.open(false)\n                }\n              : undefined,\n            onHoverOut: pointer\n              ? () => {\n                  hovered.current = false\n                  state.close(false)\n                }\n              : undefined,\n            onLongPress: () => {\n              state.open(true)\n            },\n            onPressIn: shouldCloseOnPress\n              ? () => {\n                  state.close(true)\n                }\n              : undefined,\n            onPressOut: () => {\n              if (!hovered.current) {\n                state.close(false)\n              }\n            },\n            ref: anchor,\n          },\n    [delay, isDisabled, label, pointer, shouldCloseOnPress, state],\n  )\n\n  // Mounted the moment it opens, and kept until its exit has run.\n  if (state.isOpen && !present) {\n    setPresent(true)\n  }\n\n  return (\n    <>\n      <ButtonTooltipContext value={described}>{children}</ButtonTooltipContext>\n      {present ? (\n        <Overlay>\n          <TooltipSurface\n            align={align}\n            alignOffset={alignOffset}\n            anchor={anchor}\n            isOpen={state.isOpen}\n            label={label}\n            ref={ref}\n            setPresent={setPresent}\n            side={side}\n            sideOffset={sideOffset}\n            style={style}\n            testID={testID}\n          />\n        </Overlay>\n      ) : null}\n    </>\n  )\n}\n\n// The tooltip itself, drawn in the overlay host and placed beside the\n// trigger once it has reported its size.\nfunction TooltipSurface({\n  align,\n  alignOffset,\n  anchor,\n  isOpen,\n  label,\n  ref,\n  setPresent,\n  side,\n  sideOffset,\n  style,\n  testID,\n}: SurfaceProps) {\n  const styles = stylesOf(useTheme())\n  const role = useTypeRole('bodySmall')\n  const placement = useAnchoredPlacement({\n    align,\n    alignOffset,\n    anchor,\n    side,\n    sideOffset,\n  })\n  const motion = usePanelMotion(isOpen, placement.placed, setPresent)\n\n  return (\n    <Animated.View\n      aria-hidden\n      onLayout={placement.onLayout}\n      ref={ref}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.surface,\n        placement.style,\n        { transformOrigin: PANEL_ORIGINS[placement.side] },\n        motion,\n        style,\n      )}\n      testID={testID}\n    >\n      <NativeText style={composeStyles<TextStyle>(role, styles.label)}>\n        {label}\n      </NativeText>\n    </Animated.View>\n  )\n}\n\nexport { Tooltip }\nexport type { TooltipAlign, TooltipProps, TooltipSide }\n"],"mappings":"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"}

package/dist/components/tree/index.d.ts

@@ -0,0 +1,112 @@
+import { CollectionLoadMoreProps, CollectionProps, CollectionRowProps, CollectionSectionProps, loaderNode, sectionNode } from "../../collection/index.js";
+import { ReactNode } from "react";
+import { Key } from "react-stately";
+//#region src/components/tree/index.d.ts
+type TreeItemProps = Omit<CollectionRowProps, 'children' | 'overline' | 'textValue'> & TreeItemText & {
+  /** The rows nested under this one, as further `Tree.Item` parts. */
+  readonly children?: ReactNode;
+};
+type TreeItemText = {
+  /** The row's headline, as something other than a plain string. */
+  readonly headline?: ReactNode;
+  /** The row's text, which a headline that is not a string cannot give. */
+  readonly textValue: string;
+} | {
+  /** The row's headline, the one thing it is mostly about. */
+  readonly headline: string;
+  /** The row's text. Defaults to the headline. */
+  readonly textValue?: string;
+};
+type TreeLoadMoreProps = CollectionLoadMoreProps;
+type TreeProps<T extends object = object> = CollectionProps<T> & {
+  /** The keys of the rows open at first, when the tree keeps its own. */
+  readonly defaultExpandedKeys?: Iterable<Key>;
+  /**
+   * The keys of the open rows, for a call site holding them itself with
+   * `onExpandedChange`.
+   */
+  readonly expandedKeys?: Iterable<Key>;
+  /** Called with the keys of the open rows whenever a row opens or closes. */
+  readonly onExpandedChange?: (keys: Set<Key>) => void;
+};
+type TreeSectionProps = CollectionSectionProps;
+/**
+ * A list whose rows nest. Which rows are open is React Stately's, as web's
+ * is React Aria's: pass `expandedKeys` with `onExpandedChange` to control
+ * it, or `defaultExpandedKeys` to let it keep its own. Selection is React
+ * Stately's too: set `selectionMode` to `single` or `multiple`, and a tree
+ * that selects draws a checkbox on every row.
+ *
+ * ```tsx
+ * <Tree aria-label="Label">
+ *   <Tree.Item headline="First item" id="first">
+ *     <Tree.Item headline="Second item" id="second" />
+ *   </Tree.Item>
+ * </Tree>
+ * ```
+ *
+ * Each row is the row every list here draws, indented by its depth, with a
+ * chevron on the rows that have rows under them. Composed from parts,
+ * `Tree.Item`, `Tree.Section` and `Tree.LoadMore`, which the tree draws from
+ * their props, so none of them renders anything on its own. Name the tree
+ * with `aria-label`. It scrolls by itself, so it wants a height to fill: a
+ * short tree on a page that scrolls takes `scrollEnabled={false}` and is
+ * laid out at its full length. It is drawn on surface, and `style` and `ref`
+ * land on the `FlatList`.
+ */
+declare function Tree<T extends object = object>({ children, defaultExpandedKeys, defaultSelectedKeys, disabledKeys, disallowEmptySelection, expandedKeys, items, onExpandedChange, onSelectionChange, selectedKeys, selectionMode, ...props }: TreeProps<T>): import("react").JSX.Element;
+declare namespace Tree {
+  var Item: typeof TreeItem;
+  var LoadMore: typeof TreeLoadMore;
+  var Section: typeof TreeSection;
+}
+/**
+ * One row, and the rows under it. Its slots are ListItem's: `leading`, the
+ * `headline`, `supporting` under it, and `trailing`. Give every row an `id`,
+ * which is the key selection and opening are reported by.
+ *
+ * Rows nested as `children` are what make it open: a row with none draws no
+ * chevron. The tree draws it from its entry in the collection, so it renders
+ * nothing on its own. `style`, `ref` and `testID` land on the row.
+ */
+declare function TreeItem(_props: TreeItemProps): null;
+declare namespace TreeItem {
+  var getCollectionNode: typeof treeItemNode;
+}
+/**
+ * The row shown while more rows are being fetched. `onLoadMore` is called
+ * as the reader nears the end of the tree, and the ring is drawn only while
+ * `isLoading`, in a live region, so a screen reader hears it arrive. It goes
+ * last, after the rows it loads more of.
+ */
+declare function TreeLoadMore(_props: TreeLoadMoreProps): null;
+declare namespace TreeLoadMore {
+  var getCollectionNode: typeof loaderNode;
+}
+/**
+ * A group of rows under a heading, which stays at the top of the tree while
+ * the group's rows scroll under it.
+ */
+declare function TreeSection(_props: TreeSectionProps): null;
+declare namespace TreeSection {
+  var getCollectionNode: typeof sectionNode;
+}
+declare function treeItemNode(props: TreeItemProps): Generator<{
+  'aria-label': string | undefined;
+  childNodes(): Generator<{
+    element: ReactNode;
+  }, void, unknown>;
+  hasChildNodes: boolean;
+  key: Key | undefined;
+  props: {
+    readonly 'aria-label'?: string;
+    readonly children?: ReactNode;
+    readonly id?: Key;
+  };
+  rendered: ReactNode;
+  textValue: string;
+  type: string;
+}, void, unknown>;
+//#endregion
+export { Tree, TreeItem, type TreeItemProps, TreeLoadMore, type TreeLoadMoreProps, type TreeProps, TreeSection, type TreeSectionProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tree/index.js

@@ -0,0 +1,157 @@
+import { CollectionView, loaderNode, nestedRowNode, sectionNode } from "../../collection/index.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useTreeState } from "react-stately/useTreeState";
+//#region src/components/tree/index.tsx
+/**
+* A list whose rows nest. Which rows are open is React Stately's, as web's
+* is React Aria's: pass `expandedKeys` with `onExpandedChange` to control
+* it, or `defaultExpandedKeys` to let it keep its own. Selection is React
+* Stately's too: set `selectionMode` to `single` or `multiple`, and a tree
+* that selects draws a checkbox on every row.
+*
+* ```tsx
+* <Tree aria-label="Label">
+*   <Tree.Item headline="First item" id="first">
+*     <Tree.Item headline="Second item" id="second" />
+*   </Tree.Item>
+* </Tree>
+* ```
+*
+* Each row is the row every list here draws, indented by its depth, with a
+* chevron on the rows that have rows under them. Composed from parts,
+* `Tree.Item`, `Tree.Section` and `Tree.LoadMore`, which the tree draws from
+* their props, so none of them renders anything on its own. Name the tree
+* with `aria-label`. It scrolls by itself, so it wants a height to fill: a
+* short tree on a page that scrolls takes `scrollEnabled={false}` and is
+* laid out at its full length. It is drawn on surface, and `style` and `ref`
+* land on the `FlatList`.
+*/
+function Tree(t0) {
+	const $ = c(28);
+	let children;
+	let defaultExpandedKeys;
+	let defaultSelectedKeys;
+	let disabledKeys;
+	let disallowEmptySelection;
+	let expandedKeys;
+	let items;
+	let onExpandedChange;
+	let onSelectionChange;
+	let props;
+	let selectedKeys;
+	let t1;
+	if ($[0] !== t0) {
+		({children, defaultExpandedKeys, defaultSelectedKeys, disabledKeys, disallowEmptySelection, expandedKeys, items, onExpandedChange, onSelectionChange, selectedKeys, selectionMode: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultExpandedKeys;
+		$[3] = defaultSelectedKeys;
+		$[4] = disabledKeys;
+		$[5] = disallowEmptySelection;
+		$[6] = expandedKeys;
+		$[7] = items;
+		$[8] = onExpandedChange;
+		$[9] = onSelectionChange;
+		$[10] = props;
+		$[11] = selectedKeys;
+		$[12] = t1;
+	} else {
+		children = $[1];
+		defaultExpandedKeys = $[2];
+		defaultSelectedKeys = $[3];
+		disabledKeys = $[4];
+		disallowEmptySelection = $[5];
+		expandedKeys = $[6];
+		items = $[7];
+		onExpandedChange = $[8];
+		onSelectionChange = $[9];
+		props = $[10];
+		selectedKeys = $[11];
+		t1 = $[12];
+	}
+	const selectionMode = t1 === void 0 ? "none" : t1;
+	const t2 = children;
+	let t3;
+	if ($[13] !== defaultExpandedKeys || $[14] !== defaultSelectedKeys || $[15] !== disabledKeys || $[16] !== disallowEmptySelection || $[17] !== expandedKeys || $[18] !== items || $[19] !== onExpandedChange || $[20] !== onSelectionChange || $[21] !== selectedKeys || $[22] !== selectionMode || $[23] !== t2) {
+		t3 = {
+			children: t2,
+			defaultExpandedKeys,
+			defaultSelectedKeys,
+			disabledKeys,
+			disallowEmptySelection,
+			expandedKeys,
+			items,
+			onExpandedChange,
+			onSelectionChange,
+			selectedKeys,
+			selectionMode
+		};
+		$[13] = defaultExpandedKeys;
+		$[14] = defaultSelectedKeys;
+		$[15] = disabledKeys;
+		$[16] = disallowEmptySelection;
+		$[17] = expandedKeys;
+		$[18] = items;
+		$[19] = onExpandedChange;
+		$[20] = onSelectionChange;
+		$[21] = selectedKeys;
+		$[22] = selectionMode;
+		$[23] = t2;
+		$[24] = t3;
+	} else t3 = $[24];
+	const state = useTreeState(t3);
+	let t4;
+	if ($[25] !== props || $[26] !== state) {
+		t4 = /* @__PURE__ */ jsx(CollectionView, {
+			...props,
+			kind: "list",
+			state
+		});
+		$[25] = props;
+		$[26] = state;
+		$[27] = t4;
+	} else t4 = $[27];
+	return t4;
+}
+/**
+* One row, and the rows under it. Its slots are ListItem's: `leading`, the
+* `headline`, `supporting` under it, and `trailing`. Give every row an `id`,
+* which is the key selection and opening are reported by.
+*
+* Rows nested as `children` are what make it open: a row with none draws no
+* chevron. The tree draws it from its entry in the collection, so it renders
+* nothing on its own. `style`, `ref` and `testID` land on the row.
+*/
+function TreeItem(_props) {
+	return null;
+}
+TreeItem.getCollectionNode = treeItemNode;
+/**
+* The row shown while more rows are being fetched. `onLoadMore` is called
+* as the reader nears the end of the tree, and the ring is drawn only while
+* `isLoading`, in a live region, so a screen reader hears it arrive. It goes
+* last, after the rows it loads more of.
+*/
+function TreeLoadMore(_props) {
+	return null;
+}
+TreeLoadMore.getCollectionNode = loaderNode;
+/**
+* A group of rows under a heading, which stays at the top of the tree while
+* the group's rows scroll under it.
+*/
+function TreeSection(_props) {
+	return null;
+}
+TreeSection.getCollectionNode = sectionNode;
+function treeItemNode(props) {
+	return nestedRowNode(props, props.headline, props.textValue ?? (typeof props.headline === "string" ? props.headline : ""));
+}
+Tree.Item = TreeItem;
+Tree.LoadMore = TreeLoadMore;
+Tree.Section = TreeSection;
+//#endregion
+export { Tree, TreeItem, TreeLoadMore, TreeSection };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Key","TreeProps","StatelyTreeProps","useTreeState","CollectionLoadMoreProps","CollectionProps","CollectionRowProps","CollectionSectionProps","CollectionView","loaderNode","nestedRowNode","sectionNode","TreeItemProps","Omit","TreeItemText","children","headline","textValue","TreeLoadMoreProps","T","defaultExpandedKeys","Iterable","expandedKeys","onExpandedChange","keys","Set","TreeSectionProps","Tree","t0","$","_c","defaultSelectedKeys","disabledKeys","disallowEmptySelection","items","onSelectionChange","props","selectedKeys","t1","selectionMode","undefined","t2","t3","state","t4","TreeItem","_props","getCollectionNode","treeItemNode","TreeLoadMore","TreeSection","Item","LoadMore","Section","_c"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Key } from 'react-stately'\nimport type { TreeProps as StatelyTreeProps } from 'react-stately/useTreeState'\n\nimport { useTreeState } from 'react-stately/useTreeState'\n\nimport type {\n  CollectionLoadMoreProps,\n  CollectionProps,\n  CollectionRowProps,\n  CollectionSectionProps,\n} from '../../collection'\n\nimport {\n  CollectionView,\n  loaderNode,\n  nestedRowNode,\n  sectionNode,\n} from '../../collection'\n\n// kanso-ui's Tree: a list whose rows nest. Each row is the row every list\n// here draws, src/row's, drawn by src/collection as a List draws it, so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers,\n// selection colours and checkbox are that module's, and a tree beside a list\n// cannot drift from it.\n//\n// The lists page gives no nesting, so the two things a tree adds are web's\n// own, and src/collection draws both: a level is set in by 24dp, the width\n// of the menus page's chevron, which makes a level of nesting exactly as wide\n// as the caret that opens it; and a row with rows under it starts with that\n// chevron, which turns a quarter as it opens and mirrors under right-to-left,\n// while a row with none starts with the chevron's space, so its headline\n// lines up with a sibling's that opens.\n//\n// Three things differ from web's, each because a screen reader or a touch on\n// a phone works differently from a keyboard in a browser, and each the same\n// as List's.\n//\n// **A row is one element to a screen reader.** Web's row is a tree grid row\n// whose chevron and checkbox are buttons a keyboard reaches on their own.\n// VoiceOver and TalkBack read a pressable row as one element and reach\n// nothing inside it, so a row reports whether it is open and whether it is\n// selected, and opening, closing and selecting it are accessibility actions,\n// named from src/i18n as React Aria names web's chevron. Arrow keys, which\n// open and close a row on web, have nothing to reach on a phone and are\n// dropped.\n//\n// **A press does what React Aria's touch press does.** The chevron opens and\n// closes its row. A press on the row runs its action while nothing is\n// selected and selects once something is, a long press selects, and in a\n// tree that neither selects nor acts a press opens or closes the row, as\n// React Aria's does.\n//\n// **The tree is one `FlatList`.** The rows of an open row follow it in the\n// same column, and a section is its header and then its rows, so a large\n// tree draws only the rows in view, and a section's header stays at the top\n// while its rows scroll under it.\n\ntype TreeItemProps = Omit<\n  CollectionRowProps,\n  'children' | 'overline' | 'textValue'\n> &\n  TreeItemText & {\n    /** The rows nested under this one, as further `Tree.Item` parts. */\n    readonly children?: ReactNode\n  }\n\n// What the row is worth as text, which the collection keeps beside the row\n// as web's does: a string headline is taken as the value, and anything else\n// has to say what it is worth, so the compiler asks for it where web's types\n// do.\ntype TreeItemText =\n  | {\n      /** The row's headline, as something other than a plain string. */\n      readonly headline?: ReactNode\n      /** The row's text, which a headline that is not a string cannot give. */\n      readonly textValue: string\n    }\n  | {\n      /** The row's headline, the one thing it is mostly about. */\n      readonly headline: string\n      /** The row's text. Defaults to the headline. */\n      readonly textValue?: string\n    }\n\ntype TreeLoadMoreProps = CollectionLoadMoreProps\n\ntype TreeProps<T extends object = object> = CollectionProps<T> & {\n  /** The keys of the rows open at first, when the tree keeps its own. */\n  readonly defaultExpandedKeys?: Iterable<Key>\n  /**\n   * The keys of the open rows, for a call site holding them itself with\n   * `onExpandedChange`.\n   */\n  readonly expandedKeys?: Iterable<Key>\n  /** Called with the keys of the open rows whenever a row opens or closes. */\n  readonly onExpandedChange?: (keys: Set<Key>) => void\n}\n\ntype TreeSectionProps = CollectionSectionProps\n\n/**\n * A list whose rows nest. Which rows are open is React Stately's, as web's\n * is React Aria's: pass `expandedKeys` with `onExpandedChange` to control\n * it, or `defaultExpandedKeys` to let it keep its own. Selection is React\n * Stately's too: set `selectionMode` to `single` or `multiple`, and a tree\n * that selects draws a checkbox on every row.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * chevron on the rows that have rows under them. Composed from parts,\n * `Tree.Item`, `Tree.Section` and `Tree.LoadMore`, which the tree draws from\n * their props, so none of them renders anything on its own. Name the tree\n * with `aria-label`. It scrolls by itself, so it wants a height to fill: a\n * short tree on a page that scrolls takes `scrollEnabled={false}` and is\n * laid out at its full length. It is drawn on surface, and `style` and `ref`\n * land on the `FlatList`.\n */\nfunction Tree<T extends object = object>({\n  children,\n  defaultExpandedKeys,\n  defaultSelectedKeys,\n  disabledKeys,\n  disallowEmptySelection,\n  expandedKeys,\n  items,\n  onExpandedChange,\n  onSelectionChange,\n  selectedKeys,\n  selectionMode = 'none',\n  ...props\n}: TreeProps<T>) {\n  const state = useTreeState<T>({\n    // Each part builds its own entry in the collection; see `treeItemNode`\n    // and the two src/collection gives. The collection skips what is not an\n    // element, as a ReactNode may be, and asks any element for its entry.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n    children: children as StatelyTreeProps<T>['children'],\n    defaultExpandedKeys,\n    defaultSelectedKeys,\n    disabledKeys,\n    disallowEmptySelection,\n    expandedKeys,\n    items,\n    onExpandedChange,\n    onSelectionChange,\n    selectedKeys,\n    selectionMode,\n  })\n\n  return <CollectionView<T> {...props} kind=\"list\" state={state} />\n}\n\n/**\n * One row, and the rows under it. Its slots are ListItem's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`,\n * which is the key selection and opening are reported by.\n *\n * Rows nested as `children` are what make it open: a row with none draws no\n * chevron. The tree draws it from its entry in the collection, so it renders\n * nothing on its own. `style`, `ref` and `testID` land on the row.\n */\nfunction TreeItem(_props: TreeItemProps): null {\n  return null\n}\n\nTreeItem.getCollectionNode = treeItemNode\n\n/**\n * The row shown while more rows are being fetched. `onLoadMore` is called\n * as the reader nears the end of the tree, and the ring is drawn only while\n * `isLoading`, in a live region, so a screen reader hears it arrive. It goes\n * last, after the rows it loads more of.\n */\nfunction TreeLoadMore(_props: TreeLoadMoreProps): null {\n  return null\n}\n\nTreeLoadMore.getCollectionNode = loaderNode\n\n/**\n * A group of rows under a heading, which stays at the top of the tree while\n * the group's rows scroll under it.\n */\nfunction TreeSection(_props: TreeSectionProps): null {\n  return null\n}\n\nTreeSection.getCollectionNode = sectionNode\n\n// The entry the collection holds for an `Item` part, whose first line is its\n// headline.\nfunction treeItemNode(props: TreeItemProps) {\n  return nestedRowNode(\n    props,\n    props.headline,\n    props.textValue ??\n      (typeof props.headline === 'string' ? props.headline : ''),\n  )\n}\n\nTree.Item = TreeItem\nTree.LoadMore = TreeLoadMore\nTree.Section = TreeSection\n\nexport { Tree, TreeItem, TreeLoadMore, TreeSection }\nexport type { TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HA,SAAA4B,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAf;CAAA,IAAAK;CAAA,IAAAW;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAX;CAAA,IAAAY;CAAA,IAAAX;CAAA,IAAAY;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAT,EAAA,OAAAD,IAAA;EAAyC,CAAA,CAAAb,UAAAK,qBAAAW,qBAAAC,cAAAC,wBAAAX,cAAAY,OAAAX,kBAAAY,mBAAAE,cAAAE,eAAAD,IAAA,GAAAF,SAAAR;EAa1BC,EAAA,KAAAD;EAAAC,EAAA,KAAAd;EAAAc,EAAA,KAAAT;EAAAS,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAP;EAAAO,EAAA,KAAAK;EAAAL,EAAA,KAAAN;EAAAM,EAAA,KAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAA;EAAAvB,WAAAc,EAAA;EAAAT,sBAAAS,EAAA;EAAAE,sBAAAF,EAAA;EAAAG,eAAAH,EAAA;EAAAI,yBAAAJ,EAAA;EAAAP,eAAAO,EAAA;EAAAK,QAAAL,EAAA;EAAAN,mBAAAM,EAAA;EAAAM,oBAAAN,EAAA;EAAAO,QAAAP,EAAA;EAAAQ,eAAAR,EAAA;EAAAS,KAAAT,EAAA;CAAA;CAFb,MAAAU,gBAAAD,OAAAE,KAAAA,IAAA,SAAAF;CAQY,MAAAG,KAAA1B;CAA2C,IAAA2B;CAAA,IAAAb,EAAA,QAAAT,uBAAAS,EAAA,QAAAE,uBAAAF,EAAA,QAAAG,gBAAAH,EAAA,QAAAI,0BAAAJ,EAAA,QAAAP,gBAAAO,EAAA,QAAAK,SAAAL,EAAA,QAAAN,oBAAAM,EAAA,QAAAM,qBAAAN,EAAA,QAAAQ,gBAAAR,EAAA,QAAAU,iBAAAV,EAAA,QAAAY,IAAA;EALzBC,KAAA;GAAA3B,UAKlB0B;GAA2CrB;GAAAW;GAAAC;GAAAC;GAAAX;GAAAY;GAAAX;GAAAY;GAAAE;GAAAE;EAWvD;EAACV,EAAA,MAAAT;EAAAS,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAP;EAAAO,EAAA,MAAAK;EAAAL,EAAA,MAAAN;EAAAM,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;EAAAV,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAhBD,MAAAc,QAAcxC,aAAgBuC,EAgB7B;CAAC,IAAAE;CAAA,IAAAf,EAAA,QAAAO,SAAAP,EAAA,QAAAc,OAAA;EAEKC,KAAA,oBAAC,gBAAD;GAAe,GAAQR;GAAY,MAAA;GAAcO;EAAK,CAAA;EAAId,EAAA,MAAAO;EAAAP,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAA1De;AAA0D;;;;;;;;;;AAYnE,SAASC,SAASC,QAA6B;CAC7C,OAAO;AACT;AAEAD,SAASE,oBAAoBC;;;;;;;AAQ7B,SAASC,aAAaH,QAAiC;CACrD,OAAO;AACT;AAEAG,aAAaF,oBAAoBtC;;;;;AAMjC,SAASyC,YAAYJ,QAAgC;CACnD,OAAO;AACT;AAEAI,YAAYH,oBAAoBpC;AAIhC,SAASqC,aAAaZ,OAAsB;CAC1C,OAAO1B,cACL0B,OACAA,MAAMpB,UACNoB,MAAMnB,cACH,OAAOmB,MAAMpB,aAAa,WAAWoB,MAAMpB,WAAW,GAC3D;AACF;AAEAW,KAAKwB,OAAON;AACZlB,KAAKyB,WAAWH;AAChBtB,KAAK0B,UAAUH"}

package/dist/control/group.js

@@ -0,0 +1,23 @@
+import { createContext } from "react";
+//#region src/control/group.ts
+const CheckboxGroupContext = createContext(null);
+/** An empty list of a group's checkboxes, made once per group. */
+function createMembers() {
+	const controls = /* @__PURE__ */ new Map();
+	return {
+		add: (id, control) => {
+			controls.set(id, control);
+		},
+		get current() {
+			for (const control of controls.values()) if (control.current !== null) return control.current;
+			return null;
+		},
+		remove: (id) => {
+			controls.delete(id);
+		}
+	};
+}
+//#endregion
+export { CheckboxGroupContext, createMembers };
+
+//# sourceMappingURL=group.js.map

package/dist/control/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":["RefObject","createContext","Focusable","CheckboxGroupContextValue","isDisabled","isInvalid","isReadOnly","isSelected","value","members","CheckboxGroupMembers","set","add","id","control","remove","CheckboxGroupContext","createMembers","controls","Map","current","values","delete"],"sources":["../../src/control/group.ts"],"sourcesContent":["import type { RefObject } from 'react'\n\nimport { createContext } from 'react'\n\nimport type { Focusable } from '../form'\n\n// What a CheckboxGroup tells the checkboxes inside it, as React Aria's group\n// state does on web: which entries are selected, how to change one, and the\n// states that reach every box from the group. Beside src/control's row\n// rather than in the group's own module, so Checkbox reads it without\n// importing the group.\n\ntype CheckboxGroupContextValue = {\n  readonly isDisabled: boolean\n  readonly isInvalid: boolean\n  readonly isReadOnly: boolean\n  readonly isSelected: (value: string) => boolean\n  readonly members: CheckboxGroupMembers\n  /** Selects or clears one entry, as a press on its checkbox does. */\n  readonly set: (value: string, isSelected: boolean) => void\n}\n\n/**\n * A group's checkboxes, in the order they mounted, which is the order they\n * are drawn in. As a ref it holds the first of them that has a control, which\n * is what the form around the group focuses when the group holds a native\n * submission back.\n */\ntype CheckboxGroupMembers = RefObject<Focusable | null> & {\n  /** Adds a checkbox's control, keeping its place if it is already there. */\n  readonly add: (id: string, control: RefObject<Focusable | null>) => void\n  readonly remove: (id: string) => void\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(\n  null,\n)\n\n/** An empty list of a group's checkboxes, made once per group. */\nfunction createMembers(): CheckboxGroupMembers {\n  const controls = new Map<string, RefObject<Focusable | null>>()\n\n  return {\n    add: (id, control) => {\n      controls.set(id, control)\n    },\n    get current() {\n      for (const control of controls.values()) {\n        if (control.current !== null) {\n          return control.current\n        }\n      }\n      return null\n    },\n    remove: (id) => {\n      controls.delete(id)\n    },\n  }\n}\n\nexport { CheckboxGroupContext, createMembers }\nexport type { CheckboxGroupContextValue, CheckboxGroupMembers }\n"],"mappings":";;AAkCA,MAAMgB,uBAAuBf,cAC3B,IACF;;AAGA,SAASgB,gBAAsC;CAC7C,MAAMC,2BAAW,IAAIC,IAAyC;CAE9D,OAAO;EACLP,MAAMC,IAAIC,YAAY;GACpBI,SAASP,IAAIE,IAAIC,OAAO;EAC1B;EACA,IAAIM,UAAU;GACZ,KAAK,MAAMN,WAAWI,SAASG,OAAO,GACpC,IAAIP,QAAQM,YAAY,MACtB,OAAON,QAAQM;GAGnB,OAAO;EACT;EACAL,SAASF,OAAO;GACdK,SAASI,OAAOT,EAAE;EACpB;CACF;AACF"}

package/dist/disclosure/chevron.js

@@ -0,0 +1,75 @@
+import { useTheme } from "../theme/scope.js";
+import { ChevronEndGlyph } from "../glyphs/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/disclosure/chevron.tsx
+/**
+* The chevron of something that opens in place, a Disclosure's header or a
+* Tree's row, pointing at what it opens and turned a quarter to point down
+* once it is open, on short3 and the standard curve, and at once under
+* reduced motion. The glyph mirrors itself under right-to-left, so the turn
+* goes the other way there to point it down too. It takes its size from the
+* slot it sits in, and its colour too unless given one.
+*/
+function ExpandChevron(t0) {
+	const $ = c(11);
+	const { color, isExpanded } = t0;
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const turn = isExpanded ? I18nManager.isRTL ? -90 : 90 : 0;
+	const angle = useSharedValue(turn);
+	let t1;
+	let t2;
+	if ($[0] !== angle || $[1] !== motion || $[2] !== reduceMotion || $[3] !== turn) {
+		t1 = () => {
+			angle.set(reduceMotion ? turn : withTiming(turn, {
+				duration: motion.durationShort3,
+				easing: Easing.bezier(...motion.easingStandard)
+			}));
+		};
+		t2 = [
+			angle,
+			motion,
+			reduceMotion,
+			turn
+		];
+		$[0] = angle;
+		$[1] = motion;
+		$[2] = reduceMotion;
+		$[3] = turn;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
+	const turned = useAnimatedStyle(() => {
+		"worklet";
+		return { transform: [{ rotate: `${angle.get()}deg` }] };
+	});
+	let t3;
+	if ($[6] !== color) {
+		t3 = /* @__PURE__ */ jsx(ChevronEndGlyph, { color });
+		$[6] = color;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3 || $[9] !== turned) {
+		t4 = /* @__PURE__ */ jsx(Animated.View, {
+			style: turned,
+			children: t3
+		});
+		$[8] = t3;
+		$[9] = turned;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+//#endregion
+export { ExpandChevron };
+
+//# sourceMappingURL=chevron.js.map