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

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

package/dist/field/chevron.js

@@ -0,0 +1,74 @@
+import { useTheme } from "../theme/scope.js";
+import { ChevronDownGlyph } from "../glyphs/index.js";
+import { c } from "react/compiler-runtime";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/field/chevron.tsx
+const OPEN_TURN = -180;
+/**
+* The chevron in the trailing slot of a field that opens a list, pointing
+* down at the list and turned to point up while it is open, on the step the
+* list arrives on, short3 on the standard curve, and at once under reduced
+* motion. It is the down chevron turned half a turn rather than web's end
+* chevron turned a quarter either way, which draws the same two states; the
+* down one does not mirror under right-to-left, so the turn needs no second
+* direction. It takes its colour and size from the slot.
+*/
+function FieldChevron(t0) {
+	const $ = c(9);
+	const { isOpen } = t0;
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const turn = isOpen ? OPEN_TURN : 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] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ChevronDownGlyph, {});
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== turned) {
+		t4 = /* @__PURE__ */ jsx(Animated.View, {
+			style: turned,
+			children: t3
+		});
+		$[7] = turned;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+//#endregion
+export { FieldChevron };
+
+//# sourceMappingURL=chevron.js.map

package/dist/field/chevron.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron.js","names":["useEffect","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ChevronDownGlyph","useTheme","OPEN_TURN","FieldChevron","t0","$","_c","isOpen","motion","reduceMotion","turn","angle","t1","t2","set","duration","durationShort3","easing","bezier","easingStandard","turned","transform","rotate","get","t3","Symbol","for","t4","_c"],"sources":["../../src/field/chevron.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { ChevronDownGlyph } from '../glyphs'\nimport { useTheme } from '../theme/scope'\n\n// How far the chevron turns while the list is open: half a turn, against\n// the clock as web's end chevron turns from pointing down to pointing up.\nconst OPEN_TURN = -180\n\n/**\n * The chevron in the trailing slot of a field that opens a list, pointing\n * down at the list and turned to point up while it is open, on the step the\n * list arrives on, short3 on the standard curve, and at once under reduced\n * motion. It is the down chevron turned half a turn rather than web's end\n * chevron turned a quarter either way, which draws the same two states; the\n * down one does not mirror under right-to-left, so the turn needs no second\n * direction. It takes its colour and size from the slot.\n */\nfunction FieldChevron({ isOpen }: { readonly isOpen: boolean }) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const turn = isOpen ? OPEN_TURN : 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      <ChevronDownGlyph />\n    </Animated.View>\n  )\n}\n\nexport { FieldChevron }\n"],"mappings":";;;;;;;AAcA,MAAMS,YAAY;;;;;;;;;;AAWlB,SAAAC,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAC,WAAAH;CACpB,MAAA,EAAAI,WAAmBP,SAAS;CAC5B,MAAAQ,eAAqBZ,iBAAiB;CACtC,MAAAa,OAAaH,SAAAL,YAAA;CACb,MAAAS,QAAcb,eAAeY,IAAI;CAAC,IAAAE;CAAA,IAAAC;CAAA,IAAAR,EAAA,OAAAM,SAAAN,EAAA,OAAAG,UAAAH,EAAA,OAAAI,gBAAAJ,EAAA,OAAAK,MAAA;EAExBE,WAAA;GACRD,MAAKG,IACHL,eAAAC,OAEIX,WAAWW,MAAM;IAAAK,UACLP,OAAMQ;IAAeC,QACvBtB,OAAMuB,OAAO,GAAIV,OAAMW,cAAe;GAChD,CAAC,CACP;EAAC;EACAN,KAAA;GAACF;GAAOH;GAAQC;GAAcC;EAAI;EAACL,EAAA,KAAAM;EAAAN,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;CAAA,OAAA;EAAAD,KAAAP,EAAA;EAAAQ,KAAAR,EAAA;CAAA;CATtCZ,UAAUmB,IASPC,EAAmC;CAEtC,MAAAO,SAAexB,uBAAiB;EAAA;EAAA,OAEvB,EAAAyB,WAAa,CAAC,EAAAC,QAAU,GAAGX,MAAKY,IAAK,EAAC,KAAM,CAAC,EAAE;CAAC,CACxD;CAAC,IAAAC;CAAA,IAAAnB,EAAA,OAAAoB,OAAAC,IAAA,2BAAA,GAAA;EAIEF,KAAA,oBAAC,kBAAD,CAAiB,CAAA;EAAGnB,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,OAAAe,QAAA;EADtBO,KAAA,oBAAA,SAAA,MAAA;GAAsBP,OAAAA;GACpBI,UAAAA;EACF,CAAA;EAAgBnB,EAAA,KAAAe;EAAAf,EAAA,KAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,OAFhBsB;AAEgB"}

package/dist/field/index.d.ts

@@ -1,4 +1,5 @@
-import { StyleProp, TextInput, TextInputProps, ViewStyle } from "react-native";
+import "../form/index.js";
+import { HostInstance, StyleProp, TextInput, TextInputProps, ViewProps, ViewStyle } from "react-native";
 import "react-native-reanimated";
 import { ComponentRef, ReactNode, Ref, RefObject } from "react";
 //#region src/field/index.d.ts