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

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":"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"}

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

package/dist/disclosure/chevron.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron.js","names":["ColorValue","useEffect","I18nManager","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ChevronEndGlyph","useTheme","ExpandChevron","t0","$","_c","color","isExpanded","motion","reduceMotion","turn","isRTL","angle","t1","t2","set","duration","durationShort3","easing","bezier","easingStandard","turned","transform","rotate","get","t3","t4","_c"],"sources":["../../src/disclosure/chevron.tsx"],"sourcesContent":["import type { ColorValue } from 'react-native'\n\nimport { useEffect } from 'react'\nimport { I18nManager } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { ChevronEndGlyph } from '../glyphs'\nimport { useTheme } from '../theme/scope'\n\n/**\n * The chevron of something that opens in place, a Disclosure's header or a\n * Tree's row, pointing at what it opens and turned a quarter to point down\n * once it is open, on short3 and the standard curve, and at once under\n * reduced motion. The glyph mirrors itself under right-to-left, so the turn\n * goes the other way there to point it down too. It takes its size from the\n * slot it sits in, and its colour too unless given one.\n */\nfunction ExpandChevron({\n  color,\n  isExpanded,\n}: {\n  readonly color?: ColorValue\n  readonly isExpanded: boolean\n}) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const turn = isExpanded ? (I18nManager.isRTL ? -90 : 90) : 0\n  const angle = useSharedValue(turn)\n\n  useEffect(() => {\n    angle.set(\n      reduceMotion\n        ? turn\n        : withTiming(turn, {\n            duration: motion.durationShort3,\n            easing: Easing.bezier(...motion.easingStandard),\n          }),\n    )\n  }, [angle, motion, reduceMotion, turn])\n\n  const turned = useAnimatedStyle(() => {\n    'worklet'\n    return { transform: [{ rotate: `${angle.get()}deg` }] }\n  })\n\n  return (\n    <Animated.View style={turned}>\n      <ChevronEndGlyph color={color} />\n    </Animated.View>\n  )\n}\n\nexport { ExpandChevron }\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,SAAAW,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAuB,MAAA,EAAAC,OAAAC,eAAAJ;CAOrB,MAAA,EAAAK,WAAmBP,SAAS;CAC5B,MAAAQ,eAAqBZ,iBAAiB;CACtC,MAAAa,OAAaH,aAAcd,YAAWkB,QAAX,MAAA,KAAd;CACb,MAAAC,QAAcd,eAAeY,IAAI;CAAC,IAAAG;CAAA,IAAAC;CAAA,IAAAV,EAAA,OAAAQ,SAAAR,EAAA,OAAAI,UAAAJ,EAAA,OAAAK,gBAAAL,EAAA,OAAAM,MAAA;EAExBG,WAAA;GACRD,MAAKG,IACHN,eAAAC,OAEIX,WAAWW,MAAM;IAAAM,UACLR,OAAMS;IAAeC,QACvBvB,OAAMwB,OAAO,GAAIX,OAAMY,cAAe;GAChD,CAAC,CACP;EAAC;EACAN,KAAA;GAACF;GAAOJ;GAAQC;GAAcC;EAAI;EAACN,EAAA,KAAAQ;EAAAR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAS;EAAAT,EAAA,KAAAU;CAAA,OAAA;EAAAD,KAAAT,EAAA;EAAAU,KAAAV,EAAA;CAAA;CATtCZ,UAAUqB,IASPC,EAAmC;CAEtC,MAAAO,SAAezB,uBAAiB;EAAA;EAAA,OAEvB,EAAA0B,WAAa,CAAC,EAAAC,QAAU,GAAGX,MAAKY,IAAK,EAAC,KAAM,CAAC,EAAE;CAAC,CACxD;CAAC,IAAAC;CAAA,IAAArB,EAAA,OAAAE,OAAA;EAIEmB,KAAA,oBAAC,iBAAD,EAAwBnB,MAAK,CAAA;EAAIF,EAAA,KAAAE;EAAAF,EAAA,KAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,OAAAqB,MAAArB,EAAA,OAAAiB,QAAA;EADnCK,KAAA,oBAAA,SAAA,MAAA;GAAsBL,OAAAA;GACpBI,UAAAA;EACF,CAAA;EAAgBrB,EAAA,KAAAqB;EAAArB,EAAA,KAAAiB;EAAAjB,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,OAFhBsB;AAEgB"}

package/dist/disclosure/index.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+//#region src/disclosure/index.ts
+const DisclosureGroupStateContext = createContext(null);
+//#endregion
+export { DisclosureGroupStateContext };
+
+//# sourceMappingURL=index.js.map

package/dist/disclosure/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DisclosureGroupState","createContext","DisclosureGroupStateContext"],"sources":["../../src/disclosure/index.ts"],"sourcesContent":["import type { DisclosureGroupState } from 'react-stately/useDisclosureGroupState'\n\nimport { createContext } from 'react'\n\n// The open keys of the DisclosureGroup around a Disclosure, as React Aria's\n// group state context is on web. A Disclosure inside one reads whether it is\n// open from the group's keys, under its `id`, and toggles that key when its\n// header is pressed. Null is no group, and a Disclosure then keeps its own\n// state.\nconst DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(\n  null,\n)\n\nexport { DisclosureGroupStateContext }\n"],"mappings":";;AASA,MAAME,8BAA8BD,cAClC,IACF"}

package/dist/drop/index.d.ts

@@ -0,0 +1,54 @@
+import { PickedFile } from "../files/index.js";
+//#region src/drop/index.d.ts
+/** The kinds of thing a drag carries, asked about one MIME type at a time. */
+type DragTypes = {
+  readonly has: (type: string) => boolean;
+};
+/** Where something being dragged came over the target, from its top start corner. */
+type DropEnterEvent = {
+  readonly type: 'dropenter';
+  readonly x: number;
+  readonly y: number;
+};
+/** What landed on the target, where, and what the drop does with it. */
+type DropEvent = {
+  readonly dropOperation: Exclude<DropOperation, 'cancel'>;
+  readonly items: readonly DropItem[];
+  readonly type: 'drop';
+  readonly x: number;
+  readonly y: number;
+};
+/** Where something being dragged left the target. */
+type DropExitEvent = {
+  readonly type: 'dropexit';
+  readonly x: number;
+  readonly y: number;
+};
+type DropItem = FileDropItem | TextDropItem;
+/** What a drop does with what it carries, as web's drag and drop names it. */
+type DropOperation = 'cancel' | 'copy' | 'link' | 'move';
+/**
+ * A file dropped or picked: the file itself, and its contents as text, read
+ * when asked for.
+ */
+type FileDropItem = PickedFile & {
+  readonly getText: () => Promise<string>;
+  readonly kind: 'file';
+};
+/**
+ * Text dropped from another page or app, in each of the MIME types it was
+ * dragged as, such as `text/plain` and `text/uri-list`. Only React Native
+ * Web takes one.
+ */
+type TextDropItem = {
+  readonly getText: (type: string) => Promise<string>;
+  readonly kind: 'text';
+  readonly types: ReadonlySet<string>;
+};
+/** Whether an item is a file, for picking the files out of a drop. */
+declare function isFileDropItem(item: DropItem): item is FileDropItem;
+/** Whether an item is dropped text, for picking it out of a drop. */
+declare function isTextDropItem(item: DropItem): item is TextDropItem;
+//#endregion
+export { type DragTypes, type DropEnterEvent, type DropEvent, type DropExitEvent, type DropItem, type DropOperation, type FileDropItem, type TextDropItem, isFileDropItem, isTextDropItem };
+//# sourceMappingURL=index.d.ts.map

package/dist/drop/index.js

@@ -0,0 +1,161 @@
+//#region src/drop/index.ts
+const EVERY = [
+	"copy",
+	"link",
+	"move"
+];
+const ALLOWED = {
+	all: EVERY,
+	copy: ["copy"],
+	copyLink: ["copy", "link"],
+	copyMove: ["copy", "move"],
+	link: ["link"],
+	linkMove: ["link", "move"],
+	move: ["move"],
+	none: [],
+	uninitialized: EVERY
+};
+const FILES = "Files";
+function dragTypesOf(transfer) {
+	const files = Array.from(transfer.items, (item) => item.kind === "file" ? item.type : void 0).filter((type) => type !== void 0);
+	return typesOf([...transfer.types.filter((type) => type !== FILES), ...files]);
+}
+function droppedItemsOf(transfer) {
+	const files = Array.from(transfer.files, (file) => ({
+		getText: async () => file.text(),
+		kind: "file",
+		name: file.name,
+		size: file.size,
+		type: file.type,
+		uri: URL.createObjectURL(file)
+	}));
+	const texts = new Map(transfer.types.filter((type) => type !== FILES).map((type) => [type, transfer.getData(type)]));
+	if (texts.size === 0) return files;
+	const text = {
+		getText: async (type) => Promise.resolve(texts.get(type) ?? ""),
+		kind: "text",
+		types: new Set(texts.keys())
+	};
+	return [...files, text];
+}
+/** A picked file as a file drop item, whose text is read from its URI. */
+function fileItemOf(file) {
+	return {
+		...file,
+		getText: async () => {
+			return (await fetch(file.uri)).text();
+		},
+		kind: "file"
+	};
+}
+/**
+* Whether drops can be watched on a node: under React Native Web, where a
+* View's node is its DOM element.
+*/
+function isDropTarget(node) {
+	return typeof node === "object" && node !== null && "addEventListener" in node && "removeEventListener" in node;
+}
+/** Whether an item is a file, for picking the files out of a drop. */
+function isFileDropItem(item) {
+	return item.kind === "file";
+}
+/** Whether an item is dropped text, for picking it out of a drop. */
+function isTextDropItem(item) {
+	return item.kind === "text";
+}
+/**
+* The operation a drop of these types would do: the call site's answer, else
+* the first the drag allows, else none at all.
+*/
+function operationOf(handlers, types, allowed) {
+	const first = allowed.at(0);
+	if (first === void 0) return "cancel";
+	return handlers.getDropOperation?.(types, allowed) ?? first;
+}
+/** The kinds of thing a set of items carries, for `getDropOperation`. */
+function typesOf(types) {
+	const set = new Set(types);
+	return { has: (type) => set.has(type) };
+}
+/**
+* Takes HTML5 drag and drop on a React Native Web element, as web's React
+* Aria does on a DropZone: `onDropEnter` once something the target will take
+* comes over it, `onDropExit` once it leaves or lands, and `onDrop` with what
+* landed. `handlers` is read at each event, so it can follow the props. A
+* drag crossing the target's own children stays over it, counted in and out
+* as the browser reports each. While `isDisabled` returns true nothing is
+* taken, and the browser shows that nothing will be. It hands back what
+* stops it.
+*/
+function watchDrops(target, handlers, isDisabled, setOver) {
+	let depth = 0;
+	let over = false;
+	const point = (event) => {
+		const box = target.getBoundingClientRect?.() ?? {
+			left: 0,
+			top: 0
+		};
+		return {
+			x: event.clientX - box.left,
+			y: event.clientY - box.top
+		};
+	};
+	const operation = (event) => event.dataTransfer === null || isDisabled() ? "cancel" : operationOf(handlers(), dragTypesOf(event.dataTransfer), ALLOWED[event.dataTransfer.effectAllowed] ?? EVERY);
+	const leave = (event) => {
+		if (over) {
+			over = false;
+			setOver(false);
+			handlers().onDropExit?.({
+				type: "dropexit",
+				...point(event)
+			});
+		}
+	};
+	const onDragEnter = (event) => {
+		depth += 1;
+		if (depth === 1 && operation(event) !== "cancel") {
+			event.preventDefault();
+			over = true;
+			setOver(true);
+			handlers().onDropEnter?.({
+				type: "dropenter",
+				...point(event)
+			});
+		}
+	};
+	const onDragOver = (event) => {
+		const chosen = operation(event);
+		if (event.dataTransfer !== null) event.dataTransfer.dropEffect = chosen === "cancel" ? "none" : chosen;
+		if (chosen !== "cancel") event.preventDefault();
+	};
+	const onDragLeave = (event) => {
+		depth = Math.max(0, depth - 1);
+		if (depth === 0) leave(event);
+	};
+	const onDrop = (event) => {
+		const chosen = operation(event);
+		depth = 0;
+		event.preventDefault();
+		if (chosen !== "cancel" && event.dataTransfer !== null) handlers().onDrop?.({
+			dropOperation: chosen,
+			items: droppedItemsOf(event.dataTransfer),
+			type: "drop",
+			...point(event)
+		});
+		leave(event);
+	};
+	target.addEventListener("dragenter", onDragEnter);
+	target.addEventListener("dragover", onDragOver);
+	target.addEventListener("dragleave", onDragLeave);
+	target.addEventListener("drop", onDrop);
+	return () => {
+		target.removeEventListener("dragenter", onDragEnter);
+		target.removeEventListener("dragover", onDragOver);
+		target.removeEventListener("dragleave", onDragLeave);
+		target.removeEventListener("drop", onDrop);
+	};
+}
+//#endregion
+export { fileItemOf, isDropTarget, isFileDropItem, isTextDropItem, operationOf, typesOf, watchDrops };
+
+//# sourceMappingURL=index.js.map

package/dist/drop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["PickedFile","DomDataTransfer","dropEffect","effectAllowed","files","ArrayLike","DomFile","getData","format","items","kind","type","types","DomDragEvent","clientX","clientY","dataTransfer","preventDefault","DomDropTarget","addEventListener","listener","event","getBoundingClientRect","left","top","removeEventListener","Blob","name","text","Promise","DragTypes","has","DropEnterEvent","x","y","DropEvent","dropOperation","Exclude","DropOperation","DropItem","DropExitEvent","DropHandlers","getDropOperation","allowedOperations","onDrop","onDropEnter","onDropExit","FileDropItem","TextDropItem","getText","ReadonlySet","EVERY","ALLOWED","Readonly","Partial","Record","all","copy","copyLink","copyMove","link","linkMove","move","none","uninitialized","FILES","dragTypesOf","transfer","Array","from","item","undefined","filter","typesOf","droppedItemsOf","file","size","uri","URL","createObjectURL","texts","Map","map","resolve","get","Set","keys","fileItemOf","response","fetch","isDropTarget","node","isFileDropItem","isTextDropItem","operationOf","handlers","allowed","first","at","Iterable","set","watchDrops","target","isDisabled","setOver","isOver","depth","over","point","box","operation","leave","onDragEnter","onDragOver","chosen","onDragLeave","Math","max"],"sources":["../../src/drop/index.ts"],"sourcesContent":["import type { PickedFile } from '../files'\n\n// What a drop is, in web's React Aria's words, and how a DropZone takes one\n// under React Native Web, where the browser hands the page HTML5 drag and\n// drop. iOS and Android hand React Native no drag from another app, so there\n// the drop is a pick from the chooser, which DropZone turns into the same\n// event.\n\n// The slices of the DOM a drop reaches. The library is built without the DOM's\n// types, since Hermes has no DOM, so they are written out here, as far as\n// they are read.\ntype DomDataTransfer = {\n  dropEffect: string\n  readonly effectAllowed: string\n  readonly files: ArrayLike<DomFile>\n  readonly getData: (format: string) => string\n  readonly items: ArrayLike<{ readonly kind: string; readonly type: string }>\n  readonly types: readonly string[]\n}\n\ntype DomDragEvent = {\n  readonly clientX: number\n  readonly clientY: number\n  readonly dataTransfer: DomDataTransfer | null\n  readonly preventDefault: () => void\n}\n\ntype DomDropTarget = {\n  readonly addEventListener: (\n    type: string,\n    listener: (event: DomDragEvent) => void,\n  ) => void\n  readonly getBoundingClientRect?: () => {\n    readonly left: number\n    readonly top: number\n  }\n  readonly removeEventListener: (\n    type: string,\n    listener: (event: DomDragEvent) => void,\n  ) => void\n}\n\ntype DomFile = Blob & {\n  readonly name: string\n  readonly text: () => Promise<string>\n}\n\n/** The kinds of thing a drag carries, asked about one MIME type at a time. */\ntype DragTypes = {\n  readonly has: (type: string) => boolean\n}\n\n/** Where something being dragged came over the target, from its top start corner. */\ntype DropEnterEvent = {\n  readonly type: 'dropenter'\n  readonly x: number\n  readonly y: number\n}\n\n/** What landed on the target, where, and what the drop does with it. */\ntype DropEvent = {\n  readonly dropOperation: Exclude<DropOperation, 'cancel'>\n  readonly items: readonly DropItem[]\n  readonly type: 'drop'\n  readonly x: number\n  readonly y: number\n}\n\n/** Where something being dragged left the target. */\ntype DropExitEvent = {\n  readonly type: 'dropexit'\n  readonly x: number\n  readonly y: number\n}\n\n/** What the target does with each moment of a drag, all optional. */\ntype DropHandlers = {\n  readonly getDropOperation?:\n    | ((\n        types: DragTypes,\n        allowedOperations: readonly DropOperation[],\n      ) => DropOperation)\n    | undefined\n  readonly onDrop?: ((event: DropEvent) => void) | undefined\n  readonly onDropEnter?: ((event: DropEnterEvent) => void) | undefined\n  readonly onDropExit?: ((event: DropExitEvent) => void) | undefined\n}\n\ntype DropItem = FileDropItem | TextDropItem\n\n/** What a drop does with what it carries, as web's drag and drop names it. */\ntype DropOperation = 'cancel' | 'copy' | 'link' | 'move'\n\n/**\n * A file dropped or picked: the file itself, and its contents as text, read\n * when asked for.\n */\ntype FileDropItem = PickedFile & {\n  readonly getText: () => Promise<string>\n  readonly kind: 'file'\n}\n\n/**\n * Text dropped from another page or app, in each of the MIME types it was\n * dragged as, such as `text/plain` and `text/uri-list`. Only React Native\n * Web takes one.\n */\ntype TextDropItem = {\n  readonly getText: (type: string) => Promise<string>\n  readonly kind: 'text'\n  readonly types: ReadonlySet<string>\n}\n\n// Every operation, copy first: a file dragged in from the desktop is copied,\n// never moved.\nconst EVERY: readonly DropOperation[] = ['copy', 'link', 'move']\n\n// The operations each `effectAllowed` the dragging page set leaves open.\nconst ALLOWED: Readonly<Partial<Record<string, readonly DropOperation[]>>> = {\n  all: EVERY,\n  copy: ['copy'],\n  copyLink: ['copy', 'link'],\n  copyMove: ['copy', 'move'],\n  link: ['link'],\n  linkMove: ['link', 'move'],\n  move: ['move'],\n  none: [],\n  uninitialized: EVERY,\n}\n\n// What a drag says of its files before it lands, and what a dragged string is\n// listed as. The browser lists files as `Files` alone, so their own types are\n// read off the items.\nconst FILES = 'Files'\n\n// What a drag over the target carries, read off its data transfer while it\n// is still over the target, where the browser shows only the types.\nfunction dragTypesOf(transfer: DomDataTransfer): DragTypes {\n  const files = Array.from(transfer.items, (item) =>\n    item.kind === 'file' ? item.type : undefined,\n  ).filter((type) => type !== undefined)\n\n  return typesOf([...transfer.types.filter((type) => type !== FILES), ...files])\n}\n\n// What a drop carries, read while the drop event runs, since the browser\n// guards the data transfer once it has: each file, and every string type\n// together as one text item.\nfunction droppedItemsOf(transfer: DomDataTransfer): DropItem[] {\n  const files = Array.from(transfer.files, (file): FileDropItem => ({\n    getText: async () => file.text(),\n    kind: 'file',\n    name: file.name,\n    size: file.size,\n    type: file.type,\n    uri: URL.createObjectURL(file),\n  }))\n  const texts = new Map(\n    transfer.types\n      .filter((type) => type !== FILES)\n      .map((type) => [type, transfer.getData(type)]),\n  )\n\n  if (texts.size === 0) {\n    return files\n  }\n\n  const text: TextDropItem = {\n    getText: async (type) => Promise.resolve(texts.get(type) ?? ''),\n    kind: 'text',\n    types: new Set(texts.keys()),\n  }\n\n  return [...files, text]\n}\n\n/** A picked file as a file drop item, whose text is read from its URI. */\nfunction fileItemOf(file: PickedFile): FileDropItem {\n  return {\n    ...file,\n    getText: async () => {\n      const response = await fetch(file.uri)\n      return response.text()\n    },\n    kind: 'file',\n  }\n}\n\n/**\n * Whether drops can be watched on a node: under React Native Web, where a\n * View's node is its DOM element.\n */\nfunction isDropTarget(node: unknown): node is DomDropTarget {\n  return (\n    typeof node === 'object' &&\n    node !== null &&\n    'addEventListener' in node &&\n    'removeEventListener' in node\n  )\n}\n\n/** Whether an item is a file, for picking the files out of a drop. */\nfunction isFileDropItem(item: DropItem): item is FileDropItem {\n  return item.kind === 'file'\n}\n\n/** Whether an item is dropped text, for picking it out of a drop. */\nfunction isTextDropItem(item: DropItem): item is TextDropItem {\n  return item.kind === 'text'\n}\n\n/**\n * The operation a drop of these types would do: the call site's answer, else\n * the first the drag allows, else none at all.\n */\nfunction operationOf(\n  handlers: DropHandlers,\n  types: DragTypes,\n  allowed: readonly DropOperation[],\n): DropOperation {\n  const first = allowed.at(0)\n\n  if (first === undefined) {\n    return 'cancel'\n  }\n  return handlers.getDropOperation?.(types, allowed) ?? first\n}\n\n/** The kinds of thing a set of items carries, for `getDropOperation`. */\nfunction typesOf(types: Iterable<string>): DragTypes {\n  const set = new Set(types)\n  return { has: (type) => set.has(type) }\n}\n\n/**\n * Takes HTML5 drag and drop on a React Native Web element, as web's React\n * Aria does on a DropZone: `onDropEnter` once something the target will take\n * comes over it, `onDropExit` once it leaves or lands, and `onDrop` with what\n * landed. `handlers` is read at each event, so it can follow the props. A\n * drag crossing the target's own children stays over it, counted in and out\n * as the browser reports each. While `isDisabled` returns true nothing is\n * taken, and the browser shows that nothing will be. It hands back what\n * stops it.\n */\nfunction watchDrops(\n  target: DomDropTarget,\n  handlers: () => DropHandlers,\n  isDisabled: () => boolean,\n  setOver: (isOver: boolean) => void,\n) {\n  let depth = 0\n  let over = false\n\n  const point = (event: DomDragEvent) => {\n    const box = target.getBoundingClientRect?.() ?? { left: 0, top: 0 }\n    return { x: event.clientX - box.left, y: event.clientY - box.top }\n  }\n  const operation = (event: DomDragEvent) =>\n    event.dataTransfer === null || isDisabled()\n      ? 'cancel'\n      : operationOf(\n          handlers(),\n          dragTypesOf(event.dataTransfer),\n          ALLOWED[event.dataTransfer.effectAllowed] ?? EVERY,\n        )\n  const leave = (event: DomDragEvent) => {\n    if (over) {\n      over = false\n      setOver(false)\n      handlers().onDropExit?.({ type: 'dropexit', ...point(event) })\n    }\n  }\n\n  const onDragEnter = (event: DomDragEvent) => {\n    depth += 1\n\n    if (depth === 1 && operation(event) !== 'cancel') {\n      event.preventDefault()\n      over = true\n      setOver(true)\n      handlers().onDropEnter?.({ type: 'dropenter', ...point(event) })\n    }\n  }\n  const onDragOver = (event: DomDragEvent) => {\n    const chosen = operation(event)\n\n    if (event.dataTransfer !== null) {\n      event.dataTransfer.dropEffect = chosen === 'cancel' ? 'none' : chosen\n    }\n    if (chosen !== 'cancel') {\n      event.preventDefault()\n    }\n  }\n  const onDragLeave = (event: DomDragEvent) => {\n    depth = Math.max(0, depth - 1)\n\n    if (depth === 0) {\n      leave(event)\n    }\n  }\n  const onDrop = (event: DomDragEvent) => {\n    const chosen = operation(event)\n\n    depth = 0\n    event.preventDefault()\n\n    if (chosen !== 'cancel' && event.dataTransfer !== null) {\n      handlers().onDrop?.({\n        dropOperation: chosen,\n        items: droppedItemsOf(event.dataTransfer),\n        type: 'drop',\n        ...point(event),\n      })\n    }\n    leave(event)\n  }\n\n  target.addEventListener('dragenter', onDragEnter)\n  target.addEventListener('dragover', onDragOver)\n  target.addEventListener('dragleave', onDragLeave)\n  target.addEventListener('drop', onDrop)\n\n  return () => {\n    target.removeEventListener('dragenter', onDragEnter)\n    target.removeEventListener('dragover', onDragOver)\n    target.removeEventListener('dragleave', onDragLeave)\n    target.removeEventListener('drop', onDrop)\n  }\n}\n\nexport {\n  fileItemOf,\n  isDropTarget,\n  isFileDropItem,\n  isTextDropItem,\n  operationOf,\n  typesOf,\n  watchDrops,\n}\nexport type {\n  DragTypes,\n  DropEnterEvent,\n  DropEvent,\n  DropExitEvent,\n  DropHandlers,\n  DropItem,\n  DropOperation,\n  FileDropItem,\n  TextDropItem,\n}\n"],"mappings":"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"}