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

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/fab/index.d.ts

@@ -0,0 +1,19 @@
+import "../button/palettes.js";
+import "../typography/roles.js";
+import { ViewStyle } from "react-native";
+//#region src/fab/index.d.ts
+/**
+ * The pages' three sizes: `md` the FAB at 56dp, `lg` the medium FAB at 80dp
+ * and `xl` the large FAB at 96dp.
+ */
+type FabSize = 'lg' | 'md' | 'xl';
+/** The colour role a FAB is drawn in. */
+type FabTone = 'primary' | 'secondary' | 'tertiary';
+/**
+ * `tonal` draws the tone's container pair, the pages' default; `filled`
+ * draws the tone itself.
+ */
+type FabVariant = 'filled' | 'tonal';
+//#endregion
+export type { FabSize, FabTone, FabVariant };
+//# sourceMappingURL=index.d.ts.map

package/dist/fab/index.js

@@ -0,0 +1,147 @@
+import { themedStyles } from "../theme/styles.js";
+import { palettesOf } from "../button/palettes.js";
+import { StyleSheet } from "react-native";
+//#region src/fab/index.ts
+const MEDIUM_SIZE = 80;
+const MEDIUM_CORNER = 20;
+/** The icon each size draws, from the pages' size token sets. */
+const FAB_ICON_SIZES = {
+	lg: 28,
+	md: 24,
+	xl: 36
+};
+/** The type role the extended form sets its label in at each size. */
+const EXTENDED_FAB_ROLES = {
+	lg: "titleLarge",
+	md: "titleMedium",
+	xl: "headlineSmall"
+};
+/**
+* Each size's corner, apart from its size so the press feedback can clip to
+* the same one.
+*/
+const fabCornersOf = themedStyles(({ radii }) => StyleSheet.create({
+	lg: { borderRadius: MEDIUM_CORNER },
+	md: { borderRadius: radii.lg },
+	xl: { borderRadius: radii.xl }
+}));
+/** The FAB on its own: a square of the size's edge. */
+const fabSizesOf = themedStyles(({ sizing }) => StyleSheet.create({
+	lg: {
+		height: MEDIUM_SIZE,
+		width: MEDIUM_SIZE
+	},
+	md: {
+		height: sizing.controlLg,
+		width: sizing.controlLg
+	},
+	xl: {
+		height: sizing.controlXl,
+		width: sizing.controlXl
+	}
+}));
+/**
+* The extended form: the size's height, with its padding at either end and
+* the gap before the label. The 26dp and 28dp paddings fall between steps of
+* the spacing scale and are written out, as on web.
+*
+* The height is a floor rather than a fixed size, so a label the device's
+* text size enlarges grows the button rather than spilling out of it, which
+* web's fixed height has no need to allow for.
+*/
+const extendedFabSizesOf = themedStyles(({ sizing, spacing }) => StyleSheet.create({
+	lg: {
+		columnGap: spacing.md,
+		minHeight: MEDIUM_SIZE,
+		paddingHorizontal: 26
+	},
+	md: {
+		columnGap: spacing.sm,
+		minHeight: sizing.controlLg,
+		paddingHorizontal: spacing.lg
+	},
+	xl: {
+		columnGap: spacing.lg,
+		minHeight: sizing.controlXl,
+		paddingHorizontal: 28
+	}
+}));
+/**
+* The six colour pairs, by variant and tone: each tone's container pair, and
+* the tone itself. Plain colours, for FabMenu's FAB, which eases from one
+* pair to another as its menu opens.
+*/
+const fabColorsOf = themedStyles(({ colors }) => ({
+	filled: {
+		primary: {
+			container: colors.primary,
+			content: colors.onPrimary
+		},
+		secondary: {
+			container: colors.secondary,
+			content: colors.onSecondary
+		},
+		tertiary: {
+			container: colors.tertiary,
+			content: colors.onTertiary
+		}
+	},
+	tonal: {
+		primary: {
+			container: colors.primaryContainer,
+			content: colors.onPrimaryContainer
+		},
+		secondary: {
+			container: colors.secondaryContainer,
+			content: colors.onSecondaryContainer
+		},
+		tertiary: {
+			container: colors.tertiaryContainer,
+			content: colors.onTertiaryContainer
+		}
+	}
+}));
+/**
+* The six colour pairs as the palettes a button draws, and the one disabled
+* container every button shares: on-surface at the two disabled opacities,
+* as src/button/palettes.ts draws it.
+*/
+const fabPalettesOf = themedStyles((theme) => {
+	const pairs = fabColorsOf(theme);
+	return {
+		disabled: palettesOf(theme).filledDisabled,
+		filled: palettesFor(pairs.filled),
+		tonal: palettesFor(pairs.tonal)
+	};
+});
+const fabShadowsOf = themedStyles(({ shadows }) => StyleSheet.create({
+	elevation3: { boxShadow: shadows.elevation3 },
+	elevation4: { boxShadow: shadows.elevation4 }
+}));
+/**
+* The shadow a FAB draws in its state: level 3 at rest and while pressed,
+* level 4 under a hovering pointer, and none while disabled, since a shadow
+* says a control is there to press.
+*/
+function fabShadowOf({ hovered, pressed }, isDisabled, theme) {
+	if (isDisabled) return;
+	return fabShadowsOf(theme)[hovered && !pressed ? "elevation4" : "elevation3"];
+}
+function palette({ container, content }) {
+	return {
+		container: { backgroundColor: container },
+		content,
+		label: { color: content }
+	};
+}
+function palettesFor(pairs) {
+	return {
+		primary: palette(pairs.primary),
+		secondary: palette(pairs.secondary),
+		tertiary: palette(pairs.tertiary)
+	};
+}
+//#endregion
+export { EXTENDED_FAB_ROLES, FAB_ICON_SIZES, extendedFabSizesOf, fabColorsOf, fabCornersOf, fabPalettesOf, fabShadowOf, fabSizesOf };
+
+//# sourceMappingURL=index.js.map

package/dist/fab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ViewStyle","StyleSheet","Palette","ResolvedTheme","TypeRole","palettesOf","themedStyles","FabSize","FabTone","FabVariant","MEDIUM_SIZE","MEDIUM_CORNER","FAB_ICON_SIZES","Readonly","Record","lg","md","xl","EXTENDED_FAB_ROLES","fabCornersOf","radii","create","borderRadius","fabSizesOf","sizing","height","width","controlLg","controlXl","extendedFabSizesOf","spacing","columnGap","minHeight","paddingHorizontal","sm","FabColors","container","content","fabColorsOf","colors","filled","primary","onPrimary","secondary","onSecondary","tertiary","onTertiary","tonal","primaryContainer","onPrimaryContainer","secondaryContainer","onSecondaryContainer","tertiaryContainer","onTertiaryContainer","fabPalettesOf","theme","disabled","pairs","filledDisabled","palettesFor","fabShadowsOf","shadows","elevation3","boxShadow","elevation4","fabShadowOf","hovered","pressed","isDisabled","undefined","palette","backgroundColor","label","color"],"sources":["../../src/fab/index.ts"],"sourcesContent":["import type { ViewStyle } from 'react-native'\n\nimport { StyleSheet } from 'react-native'\n\nimport type { Palette } from '../button/palettes'\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { TypeRole } from '../typography/roles'\n\nimport { palettesOf } from '../button/palettes'\nimport { themedStyles } from '../theme/styles'\n\n// The FAB's metrics and colours, shared by Fab and by the FAB that opens\n// FabMenu, which is the same button until its menu opens, as web's\n// src/fab/styles.ts is shared. Apart from either component, and outside\n// `src/components`, which holds the public components alone. Fab's header\n// gives the values and where they come from.\n\n/**\n * The pages' three sizes: `md` the FAB at 56dp, `lg` the medium FAB at 80dp\n * and `xl` the large FAB at 96dp.\n */\ntype FabSize = 'lg' | 'md' | 'xl'\n\n/** The colour role a FAB is drawn in. */\ntype FabTone = 'primary' | 'secondary' | 'tertiary'\n\n/**\n * `tonal` draws the tone's container pair, the pages' default; `filled`\n * draws the tone itself.\n */\ntype FabVariant = 'filled' | 'tonal'\n\n// The medium FAB's container and corner, between the steps of the control\n// and radius scales, so written out as web writes them.\nconst MEDIUM_SIZE = 80\nconst MEDIUM_CORNER = 20\n\n/** The icon each size draws, from the pages' size token sets. */\nconst FAB_ICON_SIZES: Readonly<Record<FabSize, number>> = {\n  lg: 28,\n  md: 24,\n  xl: 36,\n}\n\n/** The type role the extended form sets its label in at each size. */\nconst EXTENDED_FAB_ROLES: Readonly<Record<FabSize, TypeRole>> = {\n  lg: 'titleLarge',\n  md: 'titleMedium',\n  xl: 'headlineSmall',\n}\n\n/**\n * Each size's corner, apart from its size so the press feedback can clip to\n * the same one.\n */\nconst fabCornersOf = themedStyles(({ radii }) =>\n  StyleSheet.create({\n    lg: { borderRadius: MEDIUM_CORNER },\n    md: { borderRadius: radii.lg },\n    xl: { borderRadius: radii.xl },\n  }),\n)\n\n/** The FAB on its own: a square of the size's edge. */\nconst fabSizesOf = themedStyles(({ sizing }) =>\n  StyleSheet.create({\n    lg: { height: MEDIUM_SIZE, width: MEDIUM_SIZE },\n    md: { height: sizing.controlLg, width: sizing.controlLg },\n    xl: { height: sizing.controlXl, width: sizing.controlXl },\n  }),\n)\n\n/**\n * The extended form: the size's height, with its padding at either end and\n * the gap before the label. The 26dp and 28dp paddings fall between steps of\n * the spacing scale and are written out, as on web.\n *\n * The height is a floor rather than a fixed size, so a label the device's\n * text size enlarges grows the button rather than spilling out of it, which\n * web's fixed height has no need to allow for.\n */\nconst extendedFabSizesOf = themedStyles(({ sizing, spacing }) =>\n  StyleSheet.create({\n    lg: {\n      columnGap: spacing.md,\n      minHeight: MEDIUM_SIZE,\n      paddingHorizontal: 26,\n    },\n    md: {\n      columnGap: spacing.sm,\n      minHeight: sizing.controlLg,\n      paddingHorizontal: spacing.lg,\n    },\n    xl: {\n      columnGap: spacing.lg,\n      minHeight: sizing.controlXl,\n      paddingHorizontal: 28,\n    },\n  }),\n)\n\n/** A FAB's container colour and the colour drawn on it. */\ntype FabColors = { readonly container: string; readonly content: string }\n\n/**\n * The six colour pairs, by variant and tone: each tone's container pair, and\n * the tone itself. Plain colours, for FabMenu's FAB, which eases from one\n * pair to another as its menu opens.\n */\nconst fabColorsOf = themedStyles(\n  ({\n    colors,\n  }): Readonly<Record<FabVariant, Readonly<Record<FabTone, FabColors>>>> => ({\n    filled: {\n      primary: { container: colors.primary, content: colors.onPrimary },\n      secondary: { container: colors.secondary, content: colors.onSecondary },\n      tertiary: { container: colors.tertiary, content: colors.onTertiary },\n    },\n    tonal: {\n      primary: {\n        container: colors.primaryContainer,\n        content: colors.onPrimaryContainer,\n      },\n      secondary: {\n        container: colors.secondaryContainer,\n        content: colors.onSecondaryContainer,\n      },\n      tertiary: {\n        container: colors.tertiaryContainer,\n        content: colors.onTertiaryContainer,\n      },\n    },\n  }),\n)\n\n/**\n * The six colour pairs as the palettes a button draws, and the one disabled\n * container every button shares: on-surface at the two disabled opacities,\n * as src/button/palettes.ts draws it.\n */\nconst fabPalettesOf = themedStyles(\n  (\n    theme,\n  ): {\n    readonly disabled: Palette\n    readonly filled: Readonly<Record<FabTone, Palette>>\n    readonly tonal: Readonly<Record<FabTone, Palette>>\n  } => {\n    const pairs = fabColorsOf(theme)\n\n    return {\n      disabled: palettesOf(theme).filledDisabled,\n      filled: palettesFor(pairs.filled),\n      tonal: palettesFor(pairs.tonal),\n    }\n  },\n)\n\nconst fabShadowsOf = themedStyles(({ shadows }) =>\n  StyleSheet.create({\n    elevation3: { boxShadow: shadows.elevation3 },\n    elevation4: { boxShadow: shadows.elevation4 },\n  }),\n)\n\n/**\n * The shadow a FAB draws in its state: level 3 at rest and while pressed,\n * level 4 under a hovering pointer, and none while disabled, since a shadow\n * says a control is there to press.\n */\nfunction fabShadowOf(\n  {\n    hovered,\n    pressed,\n  }: { readonly hovered: boolean; readonly pressed: boolean },\n  isDisabled: boolean,\n  theme: ResolvedTheme,\n): undefined | ViewStyle {\n  if (isDisabled) {\n    return undefined\n  }\n\n  return fabShadowsOf(theme)[hovered && !pressed ? 'elevation4' : 'elevation3']\n}\n\nfunction palette({ container, content }: FabColors): Palette {\n  return {\n    container: { backgroundColor: container },\n    content,\n    label: { color: content },\n  }\n}\n\nfunction palettesFor(\n  pairs: Readonly<Record<FabTone, FabColors>>,\n): Readonly<Record<FabTone, Palette>> {\n  return {\n    primary: palette(pairs.primary),\n    secondary: palette(pairs.secondary),\n    tertiary: palette(pairs.tertiary),\n  }\n}\n\nexport {\n  EXTENDED_FAB_ROLES,\n  extendedFabSizesOf,\n  FAB_ICON_SIZES,\n  fabColorsOf,\n  fabCornersOf,\n  fabPalettesOf,\n  fabShadowOf,\n  fabSizesOf,\n}\nexport type { FabColors, FabSize, FabTone, FabVariant }\n"],"mappings":";;;;AAkCA,MAAMU,cAAc;AACpB,MAAMC,gBAAgB;;AAGtB,MAAMC,iBAAoD;CACxDG,IAAI;CACJC,IAAI;CACJC,IAAI;AACN;;AAGA,MAAMC,qBAA0D;CAC9DH,IAAI;CACJC,IAAI;CACJC,IAAI;AACN;;;;;AAMA,MAAME,eAAeb,cAAc,EAAEc,YACnCnB,WAAWoB,OAAO;CAChBN,IAAI,EAAEO,cAAcX,cAAc;CAClCK,IAAI,EAAEM,cAAcF,MAAML,GAAG;CAC7BE,IAAI,EAAEK,cAAcF,MAAMH,GAAG;AAC/B,CAAC,CACH;;AAGA,MAAMM,aAAajB,cAAc,EAAEkB,aACjCvB,WAAWoB,OAAO;CAChBN,IAAI;EAAEU,QAAQf;EAAagB,OAAOhB;CAAY;CAC9CM,IAAI;EAAES,QAAQD,OAAOG;EAAWD,OAAOF,OAAOG;CAAU;CACxDV,IAAI;EAAEQ,QAAQD,OAAOI;EAAWF,OAAOF,OAAOI;CAAU;AAC1D,CAAC,CACH;;;;;;;;;;AAWA,MAAMC,qBAAqBvB,cAAc,EAAEkB,QAAQM,cACjD7B,WAAWoB,OAAO;CAChBN,IAAI;EACFgB,WAAWD,QAAQd;EACnBgB,WAAWtB;EACXuB,mBAAmB;CACrB;CACAjB,IAAI;EACFe,WAAWD,QAAQI;EACnBF,WAAWR,OAAOG;EAClBM,mBAAmBH,QAAQf;CAC7B;CACAE,IAAI;EACFc,WAAWD,QAAQf;EACnBiB,WAAWR,OAAOI;EAClBK,mBAAmB;CACrB;AACF,CAAC,CACH;;;;;;AAUA,MAAMK,cAAchC,cACjB,EACCiC,cACyE;CACzEC,QAAQ;EACNC,SAAS;GAAEL,WAAWG,OAAOE;GAASJ,SAASE,OAAOG;EAAU;EAChEC,WAAW;GAAEP,WAAWG,OAAOI;GAAWN,SAASE,OAAOK;EAAY;EACtEC,UAAU;GAAET,WAAWG,OAAOM;GAAUR,SAASE,OAAOO;EAAW;CACrE;CACAC,OAAO;EACLN,SAAS;GACPL,WAAWG,OAAOS;GAClBX,SAASE,OAAOU;EAClB;EACAN,WAAW;GACTP,WAAWG,OAAOW;GAClBb,SAASE,OAAOY;EAClB;EACAN,UAAU;GACRT,WAAWG,OAAOa;GAClBf,SAASE,OAAOc;EAClB;CACF;AACF,EACF;;;;;;AAOA,MAAMC,gBAAgBhD,cAElBiD,UAKG;CACH,MAAME,QAAQnB,YAAYiB,KAAK;CAE/B,OAAO;EACLC,UAAUnD,WAAWkD,KAAK,CAAC,CAACG;EAC5BlB,QAAQmB,YAAYF,MAAMjB,MAAM;EAChCO,OAAOY,YAAYF,MAAMV,KAAK;CAChC;AACF,CACF;AAEA,MAAMa,eAAetD,cAAc,EAAEuD,cACnC5D,WAAWoB,OAAO;CAChByC,YAAY,EAAEC,WAAWF,QAAQC,WAAW;CAC5CE,YAAY,EAAED,WAAWF,QAAQG,WAAW;AAC9C,CAAC,CACH;;;;;;AAOA,SAASC,YACP,EACEC,SACAC,WAEFC,YACAb,OACuB;CACvB,IAAIa,YACF;CAGF,OAAOR,aAAaL,KAAK,CAAC,CAACW,WAAW,CAACC,UAAU,eAAe;AAClE;AAEA,SAASG,QAAQ,EAAElC,WAAWC,WAA+B;CAC3D,OAAO;EACLD,WAAW,EAAEmC,iBAAiBnC,UAAU;EACxCC;EACAmC,OAAO,EAAEC,OAAOpC,QAAQ;CAC1B;AACF;AAEA,SAASsB,YACPF,OACoC;CACpC,OAAO;EACLhB,SAAS6B,QAAQb,MAAMhB,OAAO;EAC9BE,WAAW2B,QAAQb,MAAMd,SAAS;EAClCE,UAAUyB,QAAQb,MAAMZ,QAAQ;CAClC;AACF"}

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