@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/form/types.d.ts

@@ -0,0 +1,51 @@
+//#region src/form/types.d.ts
+/**
+ * Metadata about a form field's current state
+ */
+export interface FieldMeta {
+  isTouched: boolean;
+  isBlurred: boolean;
+  isDirty: boolean;
+  isValidating: boolean;
+  isInvalid: boolean;
+  errors: string[];
+}
+/**
+ * Common props shared across all form field components
+ */
+export interface BaseFieldProps {
+  label?: string;
+  description?: string;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  showAllErrors?: boolean;
+}
+/**
+ * Field state interface matching TanStack Form's field.state.meta
+ */
+interface FieldStateMeta {
+  isTouched: boolean;
+  isBlurred: boolean;
+  isDirty: boolean;
+  isValidating: boolean;
+  errors: unknown[];
+}
+/**
+ * Minimal field interface for extracting metadata
+ */
+interface FieldLike {
+  state: {
+    meta: FieldStateMeta;
+  };
+}
+/**
+ * Extract field metadata from a FieldApi instance
+ */
+export declare function toFieldErrors(errors: string[], showAll: boolean): Array<{
+  message: string;
+}>;
+export declare function getFieldMeta(field: FieldLike): FieldMeta;
+//#endregion
+//# sourceMappingURL=types.d.ts.map

package/dist/form/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/form/types.ts"],"mappings":";;;;iBAGiB;EACf;EACA;EACA;EACA;EACA;EACA;;;;;iBAMe;EACf;EACA;EACA;EACA;EACA;EACA;EACA;;;;;UAMQ;EACR;EACA;EACA;EACA;EACA;;;;;UAMQ;EACR;IACE,MAAM;;;;;;wBAOM,cACd,kBACA,mBACC;EAAQ;;wBAMK,aAAa,OAAO,YAAY"}

package/dist/form/types.js

@@ -0,0 +1,23 @@
+//#region src/form/types.ts
+/**
+* Extract field metadata from a FieldApi instance
+*/
+function toFieldErrors(errors, showAll) {
+	return (showAll ? errors : errors.slice(0, 1)).map((message) => ({ message }));
+}
+function getFieldMeta(field) {
+	const { state } = field;
+	const errors = state.meta.errors.map((e) => typeof e === "string" ? e : e?.message ?? String(e)).filter(Boolean);
+	return {
+		isTouched: state.meta.isTouched,
+		isBlurred: state.meta.isBlurred,
+		isDirty: state.meta.isDirty,
+		isValidating: state.meta.isValidating,
+		isInvalid: errors.length > 0,
+		errors
+	};
+}
+//#endregion
+export { getFieldMeta, toFieldErrors };
+
+//# sourceMappingURL=types.js.map

package/dist/form/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../src/form/types.ts"],"sourcesContent":["/**\n * Metadata about a form field's current state\n */\nexport interface FieldMeta {\n  isTouched: boolean;\n  isBlurred: boolean;\n  isDirty: boolean;\n  isValidating: boolean;\n  isInvalid: boolean;\n  errors: string[];\n}\n\n/**\n * Common props shared across all form field components\n */\nexport interface BaseFieldProps {\n  label?: string;\n  description?: string;\n  required?: boolean;\n  disabled?: boolean;\n  placeholder?: string;\n  className?: string;\n  showAllErrors?: boolean;\n}\n\n/**\n * Field state interface matching TanStack Form's field.state.meta\n */\ninterface FieldStateMeta {\n  isTouched: boolean;\n  isBlurred: boolean;\n  isDirty: boolean;\n  isValidating: boolean;\n  errors: unknown[];\n}\n\n/**\n * Minimal field interface for extracting metadata\n */\ninterface FieldLike {\n  state: {\n    meta: FieldStateMeta;\n  };\n}\n\n/**\n * Extract field metadata from a FieldApi instance\n */\nexport function toFieldErrors(\n  errors: string[],\n  showAll: boolean,\n): Array<{ message: string }> {\n  return (showAll ? errors : errors.slice(0, 1)).map((message) => ({\n    message,\n  }));\n}\n\nexport function getFieldMeta(field: FieldLike): FieldMeta {\n  const { state } = field;\n  const errors = state.meta.errors\n    .map((e: unknown) =>\n      typeof e === 'string'\n        ? e\n        : ((e as { message?: string } | null)?.message ?? String(e)),\n    )\n    .filter(Boolean) as string[];\n\n  return {\n    isTouched: state.meta.isTouched,\n    isBlurred: state.meta.isBlurred,\n    isDirty: state.meta.isDirty,\n    isValidating: state.meta.isValidating,\n    isInvalid: errors.length > 0,\n    errors,\n  };\n}\n"],"mappings":";;;;AAgDA,SAAgB,cACd,QACA,SAC4B;CAC5B,QAAQ,UAAU,SAAS,OAAO,MAAM,GAAG,CAAC,EAAA,CAAG,KAAK,aAAa,EAC/D,QACF,EAAE;AACJ;AAEA,SAAgB,aAAa,OAA6B;CACxD,MAAM,EAAE,UAAU;CAClB,MAAM,SAAS,MAAM,KAAK,OACvB,KAAK,MACJ,OAAO,MAAM,WACT,IACE,GAAmC,WAAW,OAAO,CAAC,CAC9D,CAAC,CACA,OAAO,OAAO;CAEjB,OAAO;EACL,WAAW,MAAM,KAAK;EACtB,WAAW,MAAM,KAAK;EACtB,SAAS,MAAM,KAAK;EACpB,cAAc,MAAM,KAAK;EACzB,WAAW,OAAO,SAAS;EAC3B;CACF;AACF"}

package/dist/input/device/device.d.ts

@@ -0,0 +1,21 @@
+//#region src/input/device/device.d.ts
+/**
+ * What this device can be driven by. A device may have both: a laptop with
+ * a touch screen, an iPad with a keyboard.
+ */
+export type Device = {
+  /** A keyboard, or a mouse that hovers, which nearly always has one. */
+  readonly keyboard: boolean;
+  /** A touch screen. */
+  readonly touch: boolean;
+};
+/**
+ * Marks `<html>` with `data-keyboard` and `data-touch` before the first
+ * paint, so CSS shows the right hints without a flash. Inline it in the
+ * document's head.
+ */
+export declare const DEVICE_SCRIPT = "(()=>{const h=document.documentElement;if(matchMedia('(hover: hover) and (pointer: fine)').matches)h.dataset.keyboard='';if(matchMedia('(any-pointer: coarse)').matches)h.dataset.touch=''})()";
+/** What this device can be driven by, live. */
+export declare const useDevice: () => Device;
+//#endregion
+//# sourceMappingURL=device.d.ts.map

package/dist/input/device/device.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.d.ts","names":[],"sources":["../../../src/input/device/device.ts"],"mappings":";;;;;YAMY;;WAED;;WAEA;;;;;;;qBAWE;;qBAwDA,iBAAS"}

package/dist/input/device/device.js

@@ -0,0 +1,61 @@
+import { useSyncExternalStore } from "react";
+//#region src/input/device/device.ts
+const FINE = "(hover: hover) and (pointer: fine)";
+const COARSE = "(any-pointer: coarse)";
+/**
+* Marks `<html>` with `data-keyboard` and `data-touch` before the first
+* paint, so CSS shows the right hints without a flash. Inline it in the
+* document's head.
+*/
+const DEVICE_SCRIPT = `(()=>{const h=document.documentElement;if(matchMedia('${FINE}').matches)h.dataset.keyboard='';if(matchMedia('${COARSE}').matches)h.dataset.touch=''})()`;
+const SERVER = {
+	keyboard: false,
+	touch: false
+};
+let device;
+const listeners = /* @__PURE__ */ new Set();
+const read = () => {
+	return {
+		keyboard: "keyboard" in document.documentElement.dataset || matchMedia(FINE).matches,
+		touch: matchMedia(COARSE).matches
+	};
+};
+const write = (next) => {
+	const html = document.documentElement;
+	html.toggleAttribute("data-keyboard", next.keyboard);
+	html.toggleAttribute("data-touch", next.touch);
+	if (device?.keyboard === next.keyboard && device.touch === next.touch) return;
+	device = next;
+	for (const listener of listeners) listener();
+};
+const editable = (target) => target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));
+const onKey = (event) => {
+	if (device?.keyboard || editable(event.target)) return;
+	write({
+		...read(),
+		keyboard: true
+	});
+};
+const onMedia = () => write(read());
+const subscribe = (listener) => {
+	if (listeners.size === 0) {
+		write(read());
+		window.addEventListener("keydown", onKey, true);
+		matchMedia(FINE).addEventListener("change", onMedia);
+		matchMedia(COARSE).addEventListener("change", onMedia);
+	}
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+		if (listeners.size > 0) return;
+		window.removeEventListener("keydown", onKey, true);
+		matchMedia(FINE).removeEventListener("change", onMedia);
+		matchMedia(COARSE).removeEventListener("change", onMedia);
+	};
+};
+/** What this device can be driven by, live. */
+const useDevice = () => useSyncExternalStore(subscribe, () => device ??= read(), () => SERVER);
+//#endregion
+export { DEVICE_SCRIPT, useDevice };
+
+//# sourceMappingURL=device.js.map

package/dist/input/device/device.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.js","names":[],"sources":["../../../src/input/device/device.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\n/**\n * What this device can be driven by. A device may have both: a laptop with\n * a touch screen, an iPad with a keyboard.\n */\nexport type Device = {\n  /** A keyboard, or a mouse that hovers, which nearly always has one. */\n  readonly keyboard: boolean;\n  /** A touch screen. */\n  readonly touch: boolean;\n};\n\nconst FINE = '(hover: hover) and (pointer: fine)';\nconst COARSE = '(any-pointer: coarse)';\n\n/**\n * Marks `<html>` with `data-keyboard` and `data-touch` before the first\n * paint, so CSS shows the right hints without a flash. Inline it in the\n * document's head.\n */\nexport const DEVICE_SCRIPT = `(()=>{const h=document.documentElement;if(matchMedia('${FINE}').matches)h.dataset.keyboard='';if(matchMedia('${COARSE}').matches)h.dataset.touch=''})()`;\n\nconst SERVER: Device = { keyboard: false, touch: false };\n\nlet device: Device | undefined;\nconst listeners = new Set<() => void>();\n\nconst read = (): Device => {\n  const html = document.documentElement;\n  return {\n    keyboard: 'keyboard' in html.dataset || matchMedia(FINE).matches,\n    touch: matchMedia(COARSE).matches,\n  };\n};\n\nconst write = (next: Device) => {\n  const html = document.documentElement;\n  html.toggleAttribute('data-keyboard', next.keyboard);\n  html.toggleAttribute('data-touch', next.touch);\n  if (device?.keyboard === next.keyboard && device.touch === next.touch) return;\n  device = next;\n  for (const listener of listeners) listener();\n};\n\nconst editable = (target: EventTarget | null) =>\n  target instanceof HTMLElement &&\n  (target.isContentEditable ||\n    /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));\n\n// A key pressed outside a text field is a real keyboard: an on-screen one\n// only types into fields. Once seen, it stays for the visit.\nconst onKey = (event: KeyboardEvent) => {\n  if (device?.keyboard || editable(event.target)) return;\n  write({ ...read(), keyboard: true });\n};\n\nconst onMedia = () => write(read());\n\nconst subscribe = (listener: () => void) => {\n  if (listeners.size === 0) {\n    write(read());\n    window.addEventListener('keydown', onKey, true);\n    matchMedia(FINE).addEventListener('change', onMedia);\n    matchMedia(COARSE).addEventListener('change', onMedia);\n  }\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size > 0) return;\n    window.removeEventListener('keydown', onKey, true);\n    matchMedia(FINE).removeEventListener('change', onMedia);\n    matchMedia(COARSE).removeEventListener('change', onMedia);\n  };\n};\n\n/** What this device can be driven by, live. */\nexport const useDevice = () =>\n  useSyncExternalStore(\n    subscribe,\n    () => (device ??= read()),\n    () => SERVER,\n  );\n"],"mappings":";;AAaA,MAAM,OAAO;AACb,MAAM,SAAS;;;;;;AAOf,MAAa,gBAAgB,yDAAyD,KAAK,kDAAkD,OAAO;AAEpJ,MAAM,SAAiB;CAAE,UAAU;CAAO,OAAO;AAAM;AAEvD,IAAI;AACJ,MAAM,4BAAY,IAAI,IAAgB;AAEtC,MAAM,aAAqB;CAEzB,OAAO;EACL,UAAU,cAFC,SAAS,gBAES,WAAW,WAAW,IAAI,CAAC,CAAC;EACzD,OAAO,WAAW,MAAM,CAAC,CAAC;CAC5B;AACF;AAEA,MAAM,SAAS,SAAiB;CAC9B,MAAM,OAAO,SAAS;CACtB,KAAK,gBAAgB,iBAAiB,KAAK,QAAQ;CACnD,KAAK,gBAAgB,cAAc,KAAK,KAAK;CAC7C,IAAI,QAAQ,aAAa,KAAK,YAAY,OAAO,UAAU,KAAK,OAAO;CACvE,SAAS;CACT,KAAK,MAAM,YAAY,WAAW,SAAS;AAC7C;AAEA,MAAM,YAAY,WAChB,kBAAkB,gBACjB,OAAO,qBACN,4BAA4B,KAAK,OAAO,OAAO;AAInD,MAAM,SAAS,UAAyB;CACtC,IAAI,QAAQ,YAAY,SAAS,MAAM,MAAM,GAAG;CAChD,MAAM;EAAE,GAAG,KAAK;EAAG,UAAU;CAAK,CAAC;AACrC;AAEA,MAAM,gBAAgB,MAAM,KAAK,CAAC;AAElC,MAAM,aAAa,aAAyB;CAC1C,IAAI,UAAU,SAAS,GAAG;EACxB,MAAM,KAAK,CAAC;EACZ,OAAO,iBAAiB,WAAW,OAAO,IAAI;EAC9C,WAAW,IAAI,CAAC,CAAC,iBAAiB,UAAU,OAAO;EACnD,WAAW,MAAM,CAAC,CAAC,iBAAiB,UAAU,OAAO;CACvD;CACA,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;EACzB,IAAI,UAAU,OAAO,GAAG;EACxB,OAAO,oBAAoB,WAAW,OAAO,IAAI;EACjD,WAAW,IAAI,CAAC,CAAC,oBAAoB,UAAU,OAAO;EACtD,WAAW,MAAM,CAAC,CAAC,oBAAoB,UAAU,OAAO;CAC1D;AACF;;AAGA,MAAa,kBACX,qBACE,iBACO,WAAW,KAAK,SACjB,MACR"}

package/dist/input/device/index.d.ts

@@ -0,0 +1,2 @@
+import { DEVICE_SCRIPT, Device, useDevice } from "./device.js";
+export { DEVICE_SCRIPT, type Device, useDevice };

package/dist/input/device/index.js

@@ -0,0 +1,2 @@
+import { DEVICE_SCRIPT, useDevice } from "./device.js";
+export { DEVICE_SCRIPT, useDevice };

package/dist/input/gesture/index.d.ts

@@ -0,0 +1,9 @@
+import { Pointer, Pointers } from "./zones/zone/motion-pointers.js";
+import { Directions, GestureEnd, GestureOptions, GestureProvider, GestureState, GestureZone, GestureZoneProps, useGesture } from "./zones/zone/zone.js";
+import "./zones/index.js";
+import { CommitRule, Direction, Edge, Fingers, Swipe, SwipeCancel, SwipeOptions, SwipeRelease, SwipeState, useSwipe } from "./recognizers/swipe/use-swipe.js";
+import "./recognizers/index.js";
+import { PullState, usePullToRefresh } from "./patterns/pull-to-refresh/use-pull-to-refresh.js";
+import { useSidebar } from "./patterns/sidebar/use-sidebar.js";
+import "./patterns/index.js";
+export { type CommitRule, type Direction, type Directions, type Edge, type Fingers, type GestureEnd, type GestureOptions, GestureProvider, type GestureState, GestureZone, type GestureZoneProps, type Pointer, type Pointers, type PullState, type Swipe, type SwipeCancel, type SwipeOptions, type SwipeRelease, type SwipeState, useGesture, usePullToRefresh, useSidebar, useSwipe };

package/dist/input/gesture/index.js

@@ -0,0 +1,5 @@
+import { GestureProvider, GestureZone, useGesture } from "./zones/zone/zone.js";
+import { useSwipe } from "./recognizers/swipe/use-swipe.js";
+import { usePullToRefresh } from "./patterns/pull-to-refresh/use-pull-to-refresh.js";
+import { useSidebar } from "./patterns/sidebar/use-sidebar.js";
+export { GestureProvider, GestureZone, useGesture, usePullToRefresh, useSidebar, useSwipe };

package/dist/input/gesture/patterns/index.d.ts

@@ -0,0 +1,5 @@
+import { PullState, usePullToRefresh } from "./pull-to-refresh/use-pull-to-refresh.js";
+import "./pull-to-refresh/index.js";
+import { useSidebar } from "./sidebar/use-sidebar.js";
+import "./sidebar/index.js";
+export { type PullState, usePullToRefresh, useSidebar };

package/dist/input/gesture/patterns/index.js

@@ -0,0 +1,3 @@
+import { usePullToRefresh } from "./pull-to-refresh/use-pull-to-refresh.js";
+import { useSidebar } from "./sidebar/use-sidebar.js";
+export { usePullToRefresh, useSidebar };

package/dist/input/gesture/patterns/pull-to-refresh/index.d.ts

@@ -0,0 +1,2 @@
+import { PullState, PullToRefresh, PullToRefreshOptions, usePullToRefresh } from "./use-pull-to-refresh.js";
+export { type PullState, type PullToRefresh, type PullToRefreshOptions, usePullToRefresh };

package/dist/input/gesture/patterns/pull-to-refresh/index.js

@@ -0,0 +1,2 @@
+import { usePullToRefresh } from "./use-pull-to-refresh.js";
+export { usePullToRefresh };

package/dist/input/gesture/patterns/pull-to-refresh/use-pull-to-refresh.d.ts

@@ -0,0 +1,32 @@
+import { MotionValue } from "motion/react";
+//#region src/input/gesture/patterns/pull-to-refresh/use-pull-to-refresh.d.ts
+export type PullToRefreshOptions = {
+  /** Runs once a pull is released armed; the indicator holds until it settles. */
+  readonly onRefresh: () => Promise<unknown> | void;
+  /** How far, in px, the indicator travels to be armed: 72 by default. */
+  readonly distance?: number;
+  /** Whether a Swipe down pulls: true by default. */
+  readonly enabled?: boolean;
+};
+/**
+ * `pulling` while fingers pull short of `distance`, `armed` past it, and
+ * `refreshing` from an armed release until `onRefresh` settles.
+ */
+export type PullState = 'idle' | 'pulling' | 'armed' | 'refreshing';
+export type PullToRefresh = {
+  /** The indicator's offset in px, with resistance: it reaches `distance` at twice that pull. */
+  readonly y: MotionValue<number>;
+  /** 0 to 1 toward armed. */
+  readonly progress: MotionValue<number>;
+  readonly state: PullState;
+};
+/** Px of indicator for `offset` px of pull: slows as it goes, `limit` at most. */
+export declare const resist: (offset: number, limit: number) => number;
+/**
+ * Pull to refresh: a Swipe down that the indicator follows with resistance,
+ * refreshing when released past `distance`. It starts only where the list is
+ * already at its top, since a list that can still scroll keeps the touch.
+ */
+export declare function usePullToRefresh(options: PullToRefreshOptions): PullToRefresh;
+//#endregion
+//# sourceMappingURL=use-pull-to-refresh.d.ts.map

package/dist/input/gesture/patterns/pull-to-refresh/use-pull-to-refresh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pull-to-refresh.d.ts","names":[],"sources":["../../../../../src/input/gesture/patterns/pull-to-refresh/use-pull-to-refresh.ts"],"mappings":";;YAUY;;WAED,iBAAiB;;WAEjB;;WAEA;;;;;;YAOC;YAEA;;WAED,GAAG;;WAEH,UAAU;WACV,OAAO;;;qBAML,SAAM,gBAAkB;;;;;;wBAQrB,iBAAiB,SAAS,uBAAuB"}

package/dist/input/gesture/patterns/pull-to-refresh/use-pull-to-refresh.js

@@ -0,0 +1,75 @@
+import { useSwipe } from "../../recognizers/swipe/use-swipe.js";
+import { useEffect, useRef, useState } from "react";
+import { animate, useMotionValue, useTransform } from "motion/react";
+//#region src/input/gesture/patterns/pull-to-refresh/use-pull-to-refresh.ts
+const SPRING = {
+	type: "spring",
+	stiffness: 400,
+	damping: 40
+};
+/** Px of indicator for `offset` px of pull: slows as it goes, `limit` at most. */
+const resist = (offset, limit) => limit * offset / (offset + limit);
+/**
+* Pull to refresh: a Swipe down that the indicator follows with resistance,
+* refreshing when released past `distance`. It starts only where the list is
+* already at its top, since a list that can still scroll keeps the touch.
+*/
+function usePullToRefresh(options) {
+	const { distance = 72, enabled = true } = options;
+	const limit = distance * 2;
+	const y = useMotionValue(0);
+	const progress = useTransform(y, [0, distance], [0, 1]);
+	const [state, setState] = useState("idle");
+	const pulling = useRef(false);
+	const animation = useRef(void 0);
+	const to = (value) => {
+		animation.current?.stop();
+		animation.current = animate(y, value, SPRING);
+	};
+	const back = () => {
+		pulling.current = false;
+		to(0);
+		setState("idle");
+	};
+	const swipe = useSwipe({
+		enabled: enabled && state !== "refreshing",
+		direction: "down",
+		commit: { distance: limit },
+		onStart: () => {
+			animation.current?.stop();
+			pulling.current = true;
+			setState("pulling");
+		},
+		onCommit: () => {
+			pulling.current = false;
+			to(distance);
+			setState("refreshing");
+			Promise.resolve().then(options.onRefresh).finally(back);
+		},
+		onCancel: () => {
+			if (pulling.current) back();
+		}
+	});
+	useEffect(() => {
+		const offOffset = swipe.offset.on("change", (offset) => {
+			if (pulling.current) y.set(resist(offset, limit));
+		});
+		const offArmed = swipe.willCommit.on("change", (armed) => {
+			if (pulling.current) setState(armed ? "armed" : "pulling");
+		});
+		return () => {
+			offOffset();
+			offArmed();
+		};
+	});
+	useEffect(() => () => animation.current?.stop(), []);
+	return {
+		y,
+		progress,
+		state
+	};
+}
+//#endregion
+export { resist, usePullToRefresh };
+
+//# sourceMappingURL=use-pull-to-refresh.js.map

package/dist/input/gesture/patterns/pull-to-refresh/use-pull-to-refresh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pull-to-refresh.js","names":[],"sources":["../../../../../src/input/gesture/patterns/pull-to-refresh/use-pull-to-refresh.ts"],"sourcesContent":["import {\n  type AnimationPlaybackControls,\n  animate,\n  type MotionValue,\n  useMotionValue,\n  useTransform,\n} from 'motion/react';\nimport { useEffect, useRef, useState } from 'react';\nimport { useSwipe } from '../../recognizers/index.ts';\n\nexport type PullToRefreshOptions = {\n  /** Runs once a pull is released armed; the indicator holds until it settles. */\n  readonly onRefresh: () => Promise<unknown> | void;\n  /** How far, in px, the indicator travels to be armed: 72 by default. */\n  readonly distance?: number;\n  /** Whether a Swipe down pulls: true by default. */\n  readonly enabled?: boolean;\n};\n\n/**\n * `pulling` while fingers pull short of `distance`, `armed` past it, and\n * `refreshing` from an armed release until `onRefresh` settles.\n */\nexport type PullState = 'idle' | 'pulling' | 'armed' | 'refreshing';\n\nexport type PullToRefresh = {\n  /** The indicator's offset in px, with resistance: it reaches `distance` at twice that pull. */\n  readonly y: MotionValue<number>;\n  /** 0 to 1 toward armed. */\n  readonly progress: MotionValue<number>;\n  readonly state: PullState;\n};\n\nconst SPRING = { type: 'spring', stiffness: 400, damping: 40 } as const;\n\n/** Px of indicator for `offset` px of pull: slows as it goes, `limit` at most. */\nexport const resist = (offset: number, limit: number) =>\n  (limit * offset) / (offset + limit);\n\n/**\n * Pull to refresh: a Swipe down that the indicator follows with resistance,\n * refreshing when released past `distance`. It starts only where the list is\n * already at its top, since a list that can still scroll keeps the touch.\n */\nexport function usePullToRefresh(options: PullToRefreshOptions): PullToRefresh {\n  const { distance = 72, enabled = true } = options;\n  const limit = distance * 2;\n  const y = useMotionValue(0);\n  const progress = useTransform(y, [0, distance], [0, 1]);\n  const [state, setState] = useState<PullState>('idle');\n  const pulling = useRef(false);\n  const animation = useRef<AnimationPlaybackControls | undefined>(undefined);\n\n  const to = (value: number) => {\n    animation.current?.stop();\n    animation.current = animate(y, value, SPRING);\n  };\n\n  const back = () => {\n    pulling.current = false;\n    to(0);\n    setState('idle');\n  };\n\n  const swipe = useSwipe({\n    enabled: enabled && state !== 'refreshing',\n    direction: 'down',\n    commit: { distance: limit },\n    onStart: () => {\n      animation.current?.stop();\n      pulling.current = true;\n      setState('pulling');\n    },\n    onCommit: () => {\n      pulling.current = false;\n      to(distance);\n      setState('refreshing');\n      void Promise.resolve().then(options.onRefresh).finally(back);\n    },\n    onCancel: () => {\n      if (pulling.current) back();\n    },\n  });\n\n  useEffect(() => {\n    const offOffset = swipe.offset.on('change', (offset) => {\n      if (pulling.current) y.set(resist(offset, limit));\n    });\n    const offArmed = swipe.willCommit.on('change', (armed) => {\n      if (pulling.current) setState(armed ? 'armed' : 'pulling');\n    });\n    return () => {\n      offOffset();\n      offArmed();\n    };\n  });\n\n  useEffect(() => () => animation.current?.stop(), []);\n\n  return { y, progress, state };\n}\n"],"mappings":";;;;AAiCA,MAAM,SAAS;CAAE,MAAM;CAAU,WAAW;CAAK,SAAS;AAAG;;AAG7D,MAAa,UAAU,QAAgB,UACpC,QAAQ,UAAW,SAAS;;;;;;AAO/B,SAAgB,iBAAiB,SAA8C;CAC7E,MAAM,EAAE,WAAW,IAAI,UAAU,SAAS;CAC1C,MAAM,QAAQ,WAAW;CACzB,MAAM,IAAI,eAAe,CAAC;CAC1B,MAAM,WAAW,aAAa,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;CACtD,MAAM,CAAC,OAAO,YAAY,SAAoB,MAAM;CACpD,MAAM,UAAU,OAAO,KAAK;CAC5B,MAAM,YAAY,OAA8C,KAAA,CAAS;CAEzE,MAAM,MAAM,UAAkB;EAC5B,UAAU,SAAS,KAAK;EACxB,UAAU,UAAU,QAAQ,GAAG,OAAO,MAAM;CAC9C;CAEA,MAAM,aAAa;EACjB,QAAQ,UAAU;EAClB,GAAG,CAAC;EACJ,SAAS,MAAM;CACjB;CAEA,MAAM,QAAQ,SAAS;EACrB,SAAS,WAAW,UAAU;EAC9B,WAAW;EACX,QAAQ,EAAE,UAAU,MAAM;EAC1B,eAAe;GACb,UAAU,SAAS,KAAK;GACxB,QAAQ,UAAU;GAClB,SAAS,SAAS;EACpB;EACA,gBAAgB;GACd,QAAQ,UAAU;GAClB,GAAG,QAAQ;GACX,SAAS,YAAY;GACrB,QAAa,QAAQ,CAAC,CAAC,KAAK,QAAQ,SAAS,CAAC,CAAC,QAAQ,IAAI;EAC7D;EACA,gBAAgB;GACd,IAAI,QAAQ,SAAS,KAAK;EAC5B;CACF,CAAC;CAED,gBAAgB;EACd,MAAM,YAAY,MAAM,OAAO,GAAG,WAAW,WAAW;GACtD,IAAI,QAAQ,SAAS,EAAE,IAAI,OAAO,QAAQ,KAAK,CAAC;EAClD,CAAC;EACD,MAAM,WAAW,MAAM,WAAW,GAAG,WAAW,UAAU;GACxD,IAAI,QAAQ,SAAS,SAAS,QAAQ,UAAU,SAAS;EAC3D,CAAC;EACD,aAAa;GACX,UAAU;GACV,SAAS;EACX;CACF,CAAC;CAED,sBAAsB,UAAU,SAAS,KAAK,GAAG,CAAC,CAAC;CAEnD,OAAO;EAAE;EAAG;EAAU;CAAM;AAC9B"}

package/dist/input/gesture/patterns/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import { Sidebar, SidebarOptions, useSidebar } from "./use-sidebar.js";
+export { type Sidebar, type SidebarOptions, useSidebar };

package/dist/input/gesture/patterns/sidebar/index.js

@@ -0,0 +1,2 @@
+import { useSidebar } from "./use-sidebar.js";
+export { useSidebar };

package/dist/input/gesture/patterns/sidebar/use-sidebar.d.ts

@@ -0,0 +1,41 @@
+import { MotionValue } from "motion/react";
+//#region src/input/gesture/patterns/sidebar/use-sidebar.d.ts
+export type SidebarOptions = {
+  /** The screen edge it lives on. */
+  readonly side: 'left' | 'right';
+  /** Its width in px: how far it travels. */
+  readonly width: number;
+  /** Whether it is open, when the app controls it. */
+  readonly open?: boolean;
+  /** Whether it starts open, when it controls itself. */
+  readonly defaultOpen?: boolean;
+  readonly onOpenChange?: (open: boolean) => void;
+  /**
+   * Opt in to opening only from a strip along `side`, this many px wide.
+   * Without it, a Swipe that starts anywhere opens it. Either way a
+   * one-finger touch that starts in the strip, EDGE_STRIP px wide without
+   * `edge`, is always the sidebar's, even over a list that scrolls or a zone
+   * inside that wants its Direction.
+   */
+  readonly edge?: number;
+  /** Whether Swipes open and close it: true by default. */
+  readonly enabled?: boolean;
+};
+export type Sidebar = {
+  /** Its translateX in px: `-width` or `width` closed, 0 open, never past either. */
+  readonly x: MotionValue<number>;
+  /** 0 closed to 1 open, for a scrim. */
+  readonly progress: MotionValue<number>;
+  readonly open: boolean;
+  readonly setOpen: (open: boolean) => void;
+  /** Whether fingers are moving it now. */
+  readonly dragging: boolean;
+};
+/**
+ * A sidebar that follows a Swipe toward open, from anywhere or only from its
+ * `edge`, and a Swipe back from anywhere to close, then settles open or
+ * closed by where the fingers' momentum would carry it, past half its width.
+ */
+export declare function useSidebar(options: SidebarOptions): Sidebar;
+//#endregion
+//# sourceMappingURL=use-sidebar.d.ts.map

package/dist/input/gesture/patterns/sidebar/use-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sidebar.d.ts","names":[],"sources":["../../../../../src/input/gesture/patterns/sidebar/use-sidebar.ts"],"mappings":";;YAWY;;WAED;;WAEA;;WAEA;;WAEA;WACA,gBAAgB;;;;;;;;WAQhB;;WAEA;;YAGC;;WAED,GAAG;;WAEH,UAAU;WACV;WACA,UAAU;;WAEV;;;;;;;wBAwBK,WAAW,SAAS,iBAAiB"}

package/dist/input/gesture/patterns/sidebar/use-sidebar.js

@@ -0,0 +1,131 @@
+import { useGesture } from "../../zones/zone/zone.js";
+import { useSwipe } from "../../recognizers/swipe/use-swipe.js";
+import { useEffect, useRef, useState } from "react";
+import { animate, useMotionValue, useTransform } from "motion/react";
+//#region src/input/gesture/patterns/sidebar/use-sidebar.ts
+const OPEN_SPRING = {
+	type: "spring",
+	visualDuration: .13,
+	bounce: 0
+};
+const CLOSE_SPRING = {
+	type: "spring",
+	visualDuration: .1,
+	bounce: 0
+};
+/** How wide the edge strip that is always the sidebar's is, in px, without `edge`. */
+const EDGE_STRIP = 24;
+/**
+* A sidebar that follows a Swipe toward open, from anywhere or only from its
+* `edge`, and a Swipe back from anywhere to close, then settles open or
+* closed by where the fingers' momentum would carry it, past half its width.
+*/
+function useSidebar(options) {
+	const { side, width, edge, enabled = true } = options;
+	const [own, setOwn] = useState(options.defaultOpen ?? false);
+	const open = options.open ?? own;
+	const sign = side === "left" ? 1 : -1;
+	const closed = -sign * width;
+	const at = (amount) => closed + sign * Math.min(Math.max(amount, 0), width);
+	const position = useMotionValue(at(open ? width : 0));
+	const x = useMotionValue(position.get());
+	useEffect(() => position.on("change", (v) => x.set(Math.min(Math.max(v, Math.min(closed, 0)), Math.max(closed, 0)))), [
+		position,
+		x,
+		closed
+	]);
+	const progress = useTransform(x, [closed, 0], [0, 1]);
+	const moving = useRef(void 0);
+	const base = useRef(0);
+	const animation = useRef(void 0);
+	const target = useRef(open);
+	const settle = (next, velocity = 0) => {
+		moving.current = void 0;
+		target.current = next;
+		animation.current?.stop();
+		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+			position.jump(at(next ? width : 0));
+			return;
+		}
+		animation.current = animate(position, at(next ? width : 0), {
+			...next ? OPEN_SPRING : CLOSE_SPRING,
+			velocity
+		});
+	};
+	const change = (next) => {
+		if (next === open) return;
+		if (options.open === void 0) setOwn(next);
+		options.onOpenChange?.(next);
+	};
+	const setOpen = (next) => {
+		settle(next);
+		change(next);
+	};
+	useEffect(() => {
+		if (target.current !== open) settle(open);
+	});
+	const grab = (way) => () => {
+		animation.current?.stop();
+		base.current = sign * (x.get() - closed);
+		moving.current = way;
+	};
+	const release = (way) => (at) => {
+		if (moving.current !== way) return;
+		if (at === void 0) return settle(open);
+		const opens = (way === "open" ? base.current + at.projected : base.current - at.projected) >= width / 2;
+		settle(opens, (way === "open" ? sign : -sign) * at.velocity);
+		change(opens);
+	};
+	const opening = useSwipe({
+		enabled: enabled && !open,
+		direction: side === "left" ? "right" : "left",
+		...edge === void 0 ? {} : { from: {
+			edge: side,
+			within: edge
+		} },
+		onStart: grab("open"),
+		onCommit: release("open"),
+		onCancel: (_reason, at) => release("open")(at)
+	});
+	const closing = useSwipe({
+		enabled: enabled && open,
+		direction: side === "left" ? "left" : "right",
+		onStart: grab("close"),
+		onCommit: release("close"),
+		onCancel: (_reason, at) => release("close")(at)
+	});
+	const fingers = useRef(0);
+	const strip = edge ?? EDGE_STRIP;
+	useGesture({
+		enabled,
+		guardsEdge: side,
+		onPointer: (_pointer, pointers) => {
+			fingers.current = [...pointers.values()].filter((finger) => finger.end === void 0).length;
+		},
+		captures: (point) => fingers.current === 1 && (side === "left" ? point.x <= strip : point.x >= innerWidth - strip)
+	});
+	useEffect(() => {
+		const offOpen = opening.offset.on("change", (offset) => {
+			if (moving.current === "open") position.set(at(base.current + offset));
+		});
+		const offClose = closing.offset.on("change", (offset) => {
+			if (moving.current === "close") position.set(at(base.current - offset));
+		});
+		return () => {
+			offOpen();
+			offClose();
+		};
+	});
+	useEffect(() => () => animation.current?.stop(), []);
+	return {
+		x,
+		progress,
+		open,
+		setOpen,
+		dragging: opening.state === "tracking" || closing.state === "tracking"
+	};
+}
+//#endregion
+export { useSidebar };
+
+//# sourceMappingURL=use-sidebar.js.map

package/dist/input/gesture/patterns/sidebar/use-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sidebar.js","names":[],"sources":["../../../../../src/input/gesture/patterns/sidebar/use-sidebar.ts"],"sourcesContent":["import {\n  type AnimationPlaybackControls,\n  animate,\n  type MotionValue,\n  useMotionValue,\n  useTransform,\n} from 'motion/react';\nimport { useEffect, useRef, useState } from 'react';\nimport { useGesture } from '../../zones/index.ts';\nimport { type SwipeRelease, useSwipe } from '../../recognizers/index.ts';\n\nexport type SidebarOptions = {\n  /** The screen edge it lives on. */\n  readonly side: 'left' | 'right';\n  /** Its width in px: how far it travels. */\n  readonly width: number;\n  /** Whether it is open, when the app controls it. */\n  readonly open?: boolean;\n  /** Whether it starts open, when it controls itself. */\n  readonly defaultOpen?: boolean;\n  readonly onOpenChange?: (open: boolean) => void;\n  /**\n   * Opt in to opening only from a strip along `side`, this many px wide.\n   * Without it, a Swipe that starts anywhere opens it. Either way a\n   * one-finger touch that starts in the strip, EDGE_STRIP px wide without\n   * `edge`, is always the sidebar's, even over a list that scrolls or a zone\n   * inside that wants its Direction.\n   */\n  readonly edge?: number;\n  /** Whether Swipes open and close it: true by default. */\n  readonly enabled?: boolean;\n};\n\nexport type Sidebar = {\n  /** Its translateX in px: `-width` or `width` closed, 0 open, never past either. */\n  readonly x: MotionValue<number>;\n  /** 0 closed to 1 open, for a scrim. */\n  readonly progress: MotionValue<number>;\n  readonly open: boolean;\n  readonly setOpen: (open: boolean) => void;\n  /** Whether fingers are moving it now. */\n  readonly dragging: boolean;\n};\n\n// Drawer-fast, no bounce; shutting is quicker than opening, as the eye has\n// already moved on. A Swipe's velocity still carries into either.\nconst OPEN_SPRING = {\n  type: 'spring',\n  visualDuration: 0.13,\n  bounce: 0,\n} as const;\nconst CLOSE_SPRING = {\n  type: 'spring',\n  visualDuration: 0.1,\n  bounce: 0,\n} as const;\n\n/** How wide the edge strip that is always the sidebar's is, in px, without `edge`. */\nconst EDGE_STRIP = 24;\n\n/**\n * A sidebar that follows a Swipe toward open, from anywhere or only from its\n * `edge`, and a Swipe back from anywhere to close, then settles open or\n * closed by where the fingers' momentum would carry it, past half its width.\n */\nexport function useSidebar(options: SidebarOptions): Sidebar {\n  const { side, width, edge, enabled = true } = options;\n  const [own, setOwn] = useState(options.defaultOpen ?? false);\n  const open = options.open ?? own;\n  // Which way opening moves x, and x when closed.\n  const sign = side === 'left' ? 1 : -1;\n  const closed = -sign * width;\n  const at = (amount: number) =>\n    closed + sign * Math.min(Math.max(amount, 0), width);\n\n  // Where the springs put it, which may overshoot; `x` stops dead at both ends.\n  const position = useMotionValue(at(open ? width : 0));\n  const x = useMotionValue(position.get());\n  useEffect(\n    () =>\n      position.on('change', (v) =>\n        x.set(Math.min(Math.max(v, Math.min(closed, 0)), Math.max(closed, 0))),\n      ),\n    [position, x, closed],\n  );\n  const progress = useTransform(x, [closed, 0], [0, 1]);\n  const moving = useRef<'open' | 'close' | undefined>(undefined);\n  // How open it was, in px, when fingers took it.\n  const base = useRef(0);\n  const animation = useRef<AnimationPlaybackControls | undefined>(undefined);\n  // Where it is headed, so settling after a Swipe is not redone as `open` catches up.\n  const target = useRef(open);\n\n  const settle = (next: boolean, velocity = 0) => {\n    moving.current = undefined;\n    target.current = next;\n    animation.current?.stop();\n    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {\n      position.jump(at(next ? width : 0));\n      return;\n    }\n    animation.current = animate(position, at(next ? width : 0), {\n      ...(next ? OPEN_SPRING : CLOSE_SPRING),\n      velocity,\n    });\n  };\n\n  const change = (next: boolean) => {\n    if (next === open) return;\n    if (options.open === undefined) setOwn(next);\n    options.onOpenChange?.(next);\n  };\n\n  const setOpen = (next: boolean) => {\n    settle(next);\n    change(next);\n  };\n\n  useEffect(() => {\n    if (target.current !== open) settle(open);\n  });\n\n  // Fingers take it from wherever it is, even mid-spring.\n  const grab = (way: 'open' | 'close') => () => {\n    animation.current?.stop();\n    base.current = sign * (x.get() - closed);\n    moving.current = way;\n  };\n\n  // Opening Swipes measure toward open, closing ones toward closed.\n  const release = (way: 'open' | 'close') => (at?: SwipeRelease) => {\n    if (moving.current !== way) return;\n    if (at === undefined) return settle(open);\n    const headed =\n      way === 'open'\n        ? base.current + at.projected\n        : base.current - at.projected;\n    const opens = headed >= width / 2;\n    settle(opens, (way === 'open' ? sign : -sign) * at.velocity);\n    change(opens);\n  };\n\n  const opening = useSwipe({\n    enabled: enabled && !open,\n    direction: side === 'left' ? 'right' : 'left',\n    ...(edge === undefined ? {} : { from: { edge: side, within: edge } }),\n    onStart: grab('open'),\n    onCommit: release('open'),\n    onCancel: (_reason, at) => release('open')(at),\n  });\n  const closing = useSwipe({\n    enabled: enabled && open,\n    direction: side === 'left' ? 'left' : 'right',\n    onStart: grab('close'),\n    onCommit: release('close'),\n    onCancel: (_reason, at) => release('close')(at),\n  });\n\n  // Its side's edge is its own, open or closed: a swipe there while open does\n  // nothing, which beats the browser going back a page. And a one-finger\n  // touch landing in its strip is its zone's, even where a zone inside wants\n  // its Direction, so a swipe from the edge always moves it. A touch with\n  // more fingers is left to the zones, for gestures such as a resting thumb.\n  const fingers = useRef(0);\n  const strip = edge ?? EDGE_STRIP;\n  useGesture({\n    enabled,\n    guardsEdge: side,\n    onPointer: (_pointer, pointers) => {\n      fingers.current = [...pointers.values()].filter(\n        (finger) => finger.end === undefined,\n      ).length;\n    },\n    captures: (point) =>\n      fingers.current === 1 &&\n      (side === 'left' ? point.x <= strip : point.x >= innerWidth - strip),\n  });\n\n  useEffect(() => {\n    const offOpen = opening.offset.on('change', (offset) => {\n      if (moving.current === 'open') position.set(at(base.current + offset));\n    });\n    const offClose = closing.offset.on('change', (offset) => {\n      if (moving.current === 'close') position.set(at(base.current - offset));\n    });\n    return () => {\n      offOpen();\n      offClose();\n    };\n  });\n\n  useEffect(() => () => animation.current?.stop(), []);\n\n  return {\n    x,\n    progress,\n    open,\n    setOpen,\n    dragging: opening.state === 'tracking' || closing.state === 'tracking',\n  };\n}\n"],"mappings":"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"}

package/dist/input/gesture/recognizers/index.d.ts

@@ -0,0 +1,3 @@
+import { CommitRule, Direction, Edge, Fingers, Swipe, SwipeCancel, SwipeOptions, SwipeRelease, SwipeState, useSwipe } from "./swipe/use-swipe.js";
+import "./swipe/index.js";
+export { type CommitRule, type Direction, type Edge, type Fingers, type Swipe, type SwipeCancel, type SwipeOptions, type SwipeRelease, type SwipeState, useSwipe };

package/dist/input/gesture/recognizers/index.js

@@ -0,0 +1,2 @@
+import { useSwipe } from "./swipe/use-swipe.js";
+export { useSwipe };

package/dist/input/gesture/recognizers/swipe/index.d.ts

@@ -0,0 +1,2 @@
+import { CommitRule, Direction, Edge, Fingers, Swipe, SwipeCancel, SwipeOptions, SwipeRelease, SwipeState, useSwipe } from "./use-swipe.js";
+export { type CommitRule, type Direction, type Edge, type Fingers, type Swipe, type SwipeCancel, type SwipeOptions, type SwipeRelease, type SwipeState, useSwipe };

package/dist/input/gesture/recognizers/swipe/index.js

@@ -0,0 +1,2 @@
+import { useSwipe } from "./use-swipe.js";
+export { useSwipe };

package/dist/input/gesture/recognizers/swipe/use-swipe.d.ts

@@ -0,0 +1,56 @@
+import { MotionValue } from "motion/react";
+import { Direction, Direction as Direction$1, Swipe as Swipe$1 } from "@kestack/use-gesture";
+//#region src/input/gesture/recognizers/swipe/use-swipe.d.ts
+export type CommitRule = Swipe$1.CommitRule;
+export type Edge = Swipe$1.Edge;
+export type Fingers = Swipe$1.Fingers;
+export type SwipeCancel = Swipe$1.SwipeCancel;
+export type SwipeRelease = Swipe$1.SwipeRelease;
+export type SwipeOptions = {
+  /** Whether it takes the next Gesture: true by default. Read as its first finger lands. */
+  readonly enabled?: boolean;
+  readonly direction: Direction$1;
+  /** How many fingers: 1 by default. */
+  readonly fingers?: Fingers;
+  /**
+   * Where the first finger must land; anywhere in the zone by default. A touch
+   * that lands there is the Swipe's even over an element that scrolls, and it
+   * takes no touch that lands anywhere else.
+   */
+  readonly from?: Edge;
+  /** What it needs at release to Commit: `{ distance: 80, velocity: 500 }` by default. */
+  readonly commit?: CommitRule;
+  /** The touch's Direction is `direction`, with the right fingers: it is Tracking. */
+  readonly onStart?: () => void;
+  /** It met its CommitRule as its first finger lifted. */
+  readonly onCommit?: (release: SwipeRelease) => void;
+  /** It gave up; `release` is set when that was at a finger lifting. */
+  readonly onCancel?: (reason: SwipeCancel, release?: SwipeRelease) => void;
+};
+/**
+ * `possible` from the first finger landing where `from` asks until the
+ * touch's Direction is read, then `tracking` until it Commits or Cancels.
+ */
+export type SwipeState = 'idle' | 'possible' | 'tracking';
+export type Swipe = {
+  /** Px moved toward `direction`, never below 0. Reset as the next Gesture lands. */
+  readonly offset: MotionValue<number>;
+  /** `offset` over the CommitRule's `distance`, unclamped; 0 without a `distance`. */
+  readonly progress: MotionValue<number>;
+  /** Px/s toward `direction`, falling to 0 while the fingers rest. */
+  readonly velocity: MotionValue<number>;
+  /** Whether letting go now would Commit. */
+  readonly willCommit: MotionValue<boolean>;
+  readonly state: SwipeState;
+};
+/**
+ * The Swipe Recognizer: fingers moving one way. It wants its own Direction,
+ * or, with `from`, captures touches landing at that edge. It locks once the
+ * touch's Direction is read, follows the fingers while Tracking, and
+ * decides at the first finger lifting, so a two-finger Swipe is judged as
+ * its fingers leave.
+ */
+export declare function useSwipe(options: SwipeOptions): Swipe;
+//#endregion
+export type { Direction };
+//# sourceMappingURL=use-swipe.d.ts.map