@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/drag/drag-announcements.d.mts

@@ -0,0 +1,72 @@
+import { Announcements, ScreenReaderInstructions, UniqueIdentifier } from "@dnd-kit/core";
+//#region src/components/drag/drag-announcements.d.ts
+/** A place in words: the list or area's name, and the item's position in it when it has one. */
+export type DragPlace = {
+  /**
+   * The list or area, as people see it: "Pinned", "In Review", "the right
+   * column". Empty when it has no name (an unlabelled tab row): then only the
+   * position is said.
+   */
+  place: string;
+  /** 1-based. */
+  position?: number;
+  count?: number;
+};
+export type DragNamed = {
+  name: string;
+};
+/**
+ * What a screen reader hears during a drag, by name and never by id
+ * (design/patterns/drag-and-drop.md#screen-readers). The defaults are English;
+ * pass your translations, built from the same details.
+ */
+export type DragMessages = {
+  /** Read with every draggable item. */
+  instructions: string;
+  pickedUp: (details: DragNamed & Partial<DragPlace>) => string;
+  over: (details: DragNamed & DragPlace) => string;
+  /** The hand is over no place: a drop now puts the item back. */
+  notOver: (details: DragNamed) => string;
+  refused: (details: DragNamed & {
+    place: string;
+    reason: string;
+  }) => string;
+  dropped: (details: DragNamed & DragPlace) => string;
+  cancelled: (details: DragNamed & Partial<DragPlace>) => string;
+  /** A drop on a refused place: why, then the item back home (`place` is its home). */
+  refusedDrop: (details: DragNamed & Partial<DragPlace> & {
+    reason: string;
+  }) => string;
+};
+export declare const DEFAULT_DRAG_MESSAGES: DragMessages;
+/** Merges your messages over the English defaults. */
+export declare function dragMessages(messages?: Partial<DragMessages>): DragMessages;
+export type DragAnnouncementSource = {
+  /**
+   * The dragged item's name as people see it: "#launch-week", "Task #25",
+   * "Wug". Never an id: return an empty string when there is no name, and
+   * the drag is not announced.
+   */
+  name: (activeId: UniqueIdentifier) => string;
+  /**
+   * Where the item would land with the hand over `overId`, or where it is
+   * when `overId` is null (on pick-up and after a cancel). Return null for
+   * "nowhere". Without it, a move over a place and a drop on one are not
+   * announced (pick-up, refusals and cancels still are).
+   */
+  place?: (activeId: UniqueIdentifier, overId: UniqueIdentifier | null) => DragPlace | null;
+  /** Why `overId` won't take the item, or null when it will. */
+  refusal?: (activeId: UniqueIdentifier, overId: UniqueIdentifier) => {
+    place: string;
+    reason: string;
+  } | null;
+};
+/**
+ * dnd-kit `announcements` that speak by name, from your names and places,
+ * in your language. Pass them with `dragInstructions` as a `DndContext`'s
+ * `accessibility`, or to `TaskDndProvider`'s.
+ */
+export declare function createDragAnnouncements(source: DragAnnouncementSource, messages?: Partial<DragMessages>): Announcements;
+/** dnd-kit `screenReaderInstructions`: Space, not Enter, in your language. */
+export declare function dragInstructions(messages?: Partial<DragMessages>): ScreenReaderInstructions;
+//#endregion

package/dist/components/drag/drag-announcements.mjs

@@ -0,0 +1,115 @@
+//#region src/components/drag/drag-announcements.ts
+function at({ place, position, count }) {
+	const where = position == null ? "" : count == null ? `position ${position}` : `position ${position} of ${count}`;
+	if (!place) return where;
+	return where ? `${place}, ${where}` : place;
+}
+function sentence(text) {
+	return /[.!?]$/.test(text) ? text : `${text}.`;
+}
+const DEFAULT_DRAG_MESSAGES = {
+	instructions: "To pick up an item, press Space. Use the arrow keys to move it, Space to drop it, Escape to cancel.",
+	pickedUp: ({ name, ...place }) => at(place) ? `Picked up ${name}. Over ${at(place)}.` : `Picked up ${name}.`,
+	over: ({ name: _name, ...place }) => `Over ${at(place)}.`,
+	notOver: () => "Not over a place. Dropping now cancels.",
+	refused: ({ name, place, reason }) => `${name} can't go to ${place}. ${reason}`,
+	dropped: ({ name, ...place }) => `Dropped ${name} in ${at(place)}.`,
+	cancelled: ({ name, ...place }) => at(place) ? `Cancelled. ${name} is back in ${at(place)}.` : `Cancelled. ${name} is back.`,
+	refusedDrop: ({ reason, ...rest }) => `${sentence(reason)} ${DEFAULT_DRAG_MESSAGES.cancelled(rest)}`
+};
+/** Merges your messages over the English defaults. */
+function dragMessages(messages) {
+	return messages ? {
+		...DEFAULT_DRAG_MESSAGES,
+		...messages
+	} : DEFAULT_DRAG_MESSAGES;
+}
+/**
+* dnd-kit `announcements` that speak by name, from your names and places,
+* in your language. Pass them with `dragInstructions` as a `DndContext`'s
+* `accessibility`, or to `TaskDndProvider`'s.
+*/
+function createDragAnnouncements(source, messages) {
+	const say = dragMessages(messages);
+	let lastPlace = null;
+	const placeKey = (place) => place ? JSON.stringify(place) : null;
+	const describeOver = (name, activeId, overId) => {
+		if (overId == null) {
+			lastPlace = null;
+			return say.notOver({ name });
+		}
+		const refused = source.refusal?.(activeId, overId);
+		if (refused) {
+			lastPlace = null;
+			return say.refused({
+				name,
+				...refused
+			});
+		}
+		if (!source.place) return void 0;
+		const place = source.place(activeId, overId);
+		if (!place) {
+			lastPlace = null;
+			return say.notOver({ name });
+		}
+		const key = placeKey(place);
+		if (key === lastPlace) return void 0;
+		lastPlace = key;
+		return say.over({
+			name,
+			...place
+		});
+	};
+	const named = (speak) => (event) => {
+		const name = source.name(event.active.id);
+		return name ? speak(name, event) : void 0;
+	};
+	return {
+		onDragStart: named((name, { active }) => {
+			const home = source.place?.(active.id, null);
+			lastPlace = placeKey(home);
+			return say.pickedUp({
+				name,
+				...home
+			});
+		}),
+		onDragOver: named((name, { active, over }) => describeOver(name, active.id, over?.id ?? null)),
+		onDragMove: () => void 0,
+		onDragEnd: named((name, { active, over }) => {
+			const refused = over == null ? null : source.refusal?.(active.id, over.id);
+			if (over != null && !refused && !source.place) return void 0;
+			const place = over == null || refused ? null : source.place?.(active.id, over.id);
+			if (place) return say.dropped({
+				name,
+				...place
+			});
+			const home = source.place?.(active.id, null);
+			return refused ? say.refusedDrop({
+				name,
+				reason: refused.reason,
+				...home
+			}) : say.cancelled({
+				name,
+				...home
+			});
+		}),
+		onDragCancel: named((name, { active }) => say.cancelled({
+			name,
+			...source.place?.(active.id, null)
+		}))
+	};
+}
+/** Announcements that say nothing, for a surface that announces on its own or has no names. */
+const SILENT_DRAG_ANNOUNCEMENTS = {
+	onDragStart: () => void 0,
+	onDragMove: () => void 0,
+	onDragOver: () => void 0,
+	onDragEnd: () => void 0,
+	onDragCancel: () => void 0
+};
+/** dnd-kit `screenReaderInstructions`: Space, not Enter, in your language. */
+function dragInstructions(messages) {
+	return { draggable: dragMessages(messages).instructions };
+}
+//#endregion
+export { DEFAULT_DRAG_MESSAGES, SILENT_DRAG_ANNOUNCEMENTS, createDragAnnouncements, dragInstructions, dragMessages };

package/dist/components/drag/drag-lift.d.mts

@@ -0,0 +1,100 @@
+import { LIFT_CLASS } from "./drag.recipe.mjs";
+import { CSSProperties, ReactNode } from "react";
+import { DropAnimation, Modifier } from "@dnd-kit/core";
+//#region src/components/drag/drag-lift.d.ts
+/**
+ * A drag settling (motion.md, `motion-drag-settle-*`): the lifted copy
+ * gliding into its place on a drop or back home on a cancel, siblings sliding
+ * apart to open the place, and a layout reflowing on a drop.
+ */
+export declare const DRAG_SETTLE: {
+  readonly duration: 160;
+  readonly easing: "cubic-bezier(0.25, 1, 0.5, 1)";
+};
+/** For `useSortable({ transition })`: siblings slide with the same token. */
+export declare const DRAG_SIBLING_TRANSITION: {
+  readonly duration: 160;
+  readonly easing: "cubic-bezier(0.25, 1, 0.5, 1)";
+};
+/** The item a drag came from, while nothing else has taken its place (`data-drag-origin`). */
+export declare const ORIGIN_OPACITY = 0.4;
+/** Auto-scroll starts this close to the edge of anything that scrolls. */
+export declare const DRAG_AUTO_SCROLL_ZONE_PX = 48;
+/** How far a keyboard drag sets the copy off its place, so the place's dashed outline shows. */
+export declare const DRAG_KEYBOARD_OFFSET_PX = 6;
+/**
+ * Drop: the copy glides into its place. Cancel: it glides back home. While
+ * it glides, the item it will become stays hidden, then appears there.
+ */
+export declare const DROP_GLIDE: DropAnimation;
+/**
+ * The sibling transition for `useSortable({ transition })`: the drag-settle
+ * slide, or none with `prefers-reduced-motion`.
+ */
+export declare function useDragSiblingTransition(): {
+  readonly duration: 160;
+  readonly easing: "cubic-bezier(0.25, 1, 0.5, 1)";
+} | null;
+/**
+ * For a compact proxy (a section's head, at most 240px wide): the grab point
+ * is kept, but pulled to within `inset` of the proxy's end, so the hand never
+ * holds empty air beside it. A constant shift: the copy still tracks 1:1.
+ */
+export declare function keepGrabInside(proxyWidth: number, inset?: number): Modifier;
+/**
+ * Cancels the drag in progress, whichever sensor holds it. Every dnd-kit
+ * sensor (and so every sensor of `useDragSensors`) puts the item back when the
+ * window is resized, so this sends the window a `resize`: unlike a synthetic
+ * Escape, no app's own Escape handler (a dialog, a panel, a popover) hears it.
+ */
+export declare function cancelDrag(win?: Window): void;
+/**
+ * Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
+ * lightbox 70) and an app's own top layers: the copy in the hand is always on
+ * top. dnd-kit's own default.
+ */
+export declare const DRAG_LIFT_Z_INDEX = 999;
+export type DragLiftProps = {
+  /** The lifted copy: the dragged item itself, or a compact proxy for a large one. Nothing while nothing is lifted. */
+  children?: ReactNode;
+  /**
+   * The copy takes the item's size and the control radius. Pass the item's
+   * own radius here, such as `rounded-container` for a card, or a size for a
+   * compact proxy (`size-auto max-w-60`).
+   */
+  className?: string;
+  style?: CSSProperties;
+  /** Modifiers for the copy only, such as one that keeps a compact proxy under the hand. */
+  modifiers?: Modifier[];
+  /**
+   * Scroll whatever scrollable area the pointer comes within 48px of the edge
+   * of. Turn dnd-kit's own off (`<DndContext autoScroll={false}>`) so the two
+   * don't scroll together.
+   * @default true
+   */
+  autoScroll?: boolean;
+  /**
+   * Render the copy in another element, such as `document.body` when an
+   * ancestor has a transform (a drawer, a dialog), which would offset a
+   * `position: fixed` copy. It keeps the theme scope it was rendered in
+   * (`light` / `dark`), as raft-ui's portals do. By default it renders in place.
+   */
+  container?: Element | DocumentFragment | null;
+  /** @default DRAG_LIFT_Z_INDEX (999) */
+  zIndex?: number;
+};
+/**
+ * The copy of a dragged item that follows the hand
+ * (design/patterns/drag-and-drop.md#what-follows-the-hand): an opaque popover
+ * surface with `shadow-float` and a `line-seam` ring, no scale and no tilt,
+ * 1:1 with the pointer from the grab point, never clamped to its container and
+ * never held to one axis. On a drop it glides into its place, and on a cancel
+ * back home (160ms, `motion-drag-settle-*`; none with reduced motion).
+ *
+ * While something is lifted it also sets the grabbing cursor, cancels the
+ * drag when the window loses focus or the tab is hidden, and scrolls an area
+ * the pointer is near the edge of. Render it inside the `DndContext`.
+ */
+export declare function DragLift({ children, className, style, modifiers, autoScroll, container, zIndex }: DragLiftProps): import("react").JSX.Element;
+//#endregion
+export { LIFT_CLASS };

package/dist/components/drag/drag-lift.mjs

@@ -0,0 +1,276 @@
+"use client";
+import { cn } from "../../cn.mjs";
+import { useTheme } from "../../lib/theme/use-theme.mjs";
+import { LIFT_CLASS, drag } from "./drag.recipe.mjs";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { DragOverlay, defaultDropAnimationSideEffects, useDndContext } from "@dnd-kit/core";
+//#region src/components/drag/drag-lift.tsx
+/**
+* A drag settling (motion.md, `motion-drag-settle-*`): the lifted copy
+* gliding into its place on a drop or back home on a cancel, siblings sliding
+* apart to open the place, and a layout reflowing on a drop.
+*/
+const DRAG_SETTLE = {
+	duration: 160,
+	easing: "cubic-bezier(0.25, 1, 0.5, 1)"
+};
+/** For `useSortable({ transition })`: siblings slide with the same token. */
+const DRAG_SIBLING_TRANSITION = {
+	duration: DRAG_SETTLE.duration,
+	easing: DRAG_SETTLE.easing
+};
+/** The item a drag came from, while nothing else has taken its place (`data-drag-origin`). */
+const ORIGIN_OPACITY = .4;
+/** Auto-scroll starts this close to the edge of anything that scrolls. */
+const DRAG_AUTO_SCROLL_ZONE_PX = 48;
+/** How far a keyboard drag sets the copy off its place, so the place's dashed outline shows. */
+const DRAG_KEYBOARD_OFFSET_PX = 6;
+const hideActiveWhileGliding = defaultDropAnimationSideEffects({ styles: { active: { opacity: "0" } } });
+/**
+* Drop: the copy glides into its place. Cancel: it glides back home. While
+* it glides, the item it will become stays hidden, then appears there.
+*/
+const DROP_GLIDE = {
+	duration: DRAG_SETTLE.duration,
+	easing: DRAG_SETTLE.easing,
+	sideEffects: (parameters) => {
+		const restore = hideActiveWhileGliding(parameters);
+		const copy = parameters.dragOverlay.node.querySelector("[data-slot=drag-lift]");
+		if (copy?.style.translate) {
+			copy.style.transition = `translate ${DRAG_SETTLE.duration}ms ${DRAG_SETTLE.easing}`;
+			copy.style.translate = "0px 0px";
+		}
+		return restore;
+	}
+};
+const OVERLAY_STYLE = { pointerEvents: "none" };
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function subscribeReducedMotion(listener) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", listener);
+	return () => query.removeEventListener("change", listener);
+}
+function reducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches;
+}
+/**
+* The sibling transition for `useSortable({ transition })`: the drag-settle
+* slide, or none with `prefers-reduced-motion`.
+*/
+function useDragSiblingTransition() {
+	return useSyncExternalStore(subscribeReducedMotion, reducedMotion, () => false) ? null : DRAG_SIBLING_TRANSITION;
+}
+const KEYBOARD_OFFSET = `6px 6px`;
+function isKeyboardEvent(event) {
+	return typeof KeyboardEvent !== "undefined" && event instanceof KeyboardEvent;
+}
+/**
+* For a compact proxy (a section's head, at most 240px wide): the grab point
+* is kept, but pulled to within `inset` of the proxy's end, so the hand never
+* holds empty air beside it. A constant shift: the copy still tracks 1:1.
+*/
+function keepGrabInside(proxyWidth, inset = 20) {
+	return ({ transform, activatorEvent, activeNodeRect }) => {
+		if (!activeNodeRect || !activatorEvent) return transform;
+		const point = eventPoint(activatorEvent);
+		if (!point) return transform;
+		const grabX = point.x - activeNodeRect.left;
+		const max = proxyWidth - inset;
+		return grabX > max ? {
+			...transform,
+			x: transform.x + (grabX - max)
+		} : transform;
+	};
+}
+function eventPoint(event) {
+	if ("clientX" in event && typeof event.clientX === "number") {
+		const pointerEvent = event;
+		return {
+			x: pointerEvent.clientX,
+			y: pointerEvent.clientY
+		};
+	}
+	const touch = event.touches?.[0] ?? event.changedTouches?.[0];
+	return touch ? {
+		x: touch.clientX,
+		y: touch.clientY
+	} : null;
+}
+/**
+* Cancels the drag in progress, whichever sensor holds it. Every dnd-kit
+* sensor (and so every sensor of `useDragSensors`) puts the item back when the
+* window is resized, so this sends the window a `resize`: unlike a synthetic
+* Escape, no app's own Escape handler (a dialog, a panel, a popover) hears it.
+*/
+function cancelDrag(win = window) {
+	win.dispatchEvent(new Event("resize"));
+}
+/**
+* Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
+* lightbox 70) and an app's own top layers: the copy in the hand is always on
+* top. dnd-kit's own default.
+*/
+const DRAG_LIFT_Z_INDEX = 999;
+const noSubscribe = () => () => {};
+const clientBody = () => document.body;
+const serverBody = () => null;
+/**
+* For a component whose copy goes to `document.body` unless it is told
+* otherwise: `undefined` is the body (once on the client, so hydration
+* matches), `null` is in place, and an element is that element.
+*/
+function useLiftContainer(container) {
+	const body = useSyncExternalStore(noSubscribe, clientBody, serverBody);
+	return container === void 0 ? body : container;
+}
+/**
+* The copy of a dragged item that follows the hand
+* (design/patterns/drag-and-drop.md#what-follows-the-hand): an opaque popover
+* surface with `shadow-float` and a `line-seam` ring, no scale and no tilt,
+* 1:1 with the pointer from the grab point, never clamped to its container and
+* never held to one axis. On a drop it glides into its place, and on a cancel
+* back home (160ms, `motion-drag-settle-*`; none with reduced motion).
+*
+* While something is lifted it also sets the grabbing cursor, cancels the
+* drag when the window loses focus or the tab is hidden, and scrolls an area
+* the pointer is near the edge of. Render it inside the `DndContext`.
+*/
+function DragLift({ children, className, style, modifiers, autoScroll = true, container, zIndex = 999 }) {
+	const { lift } = drag();
+	const { resolvedMode } = useTheme();
+	const reduced = useSyncExternalStore(subscribeReducedMotion, reducedMotion, () => false);
+	const { activatorEvent } = useDndContext();
+	const liftStyle = useMemo(() => isKeyboardEvent(activatorEvent) ? {
+		translate: KEYBOARD_OFFSET,
+		...style
+	} : style, [activatorEvent, style]);
+	const overlay = /* @__PURE__ */ jsx(DragOverlay, {
+		dropAnimation: reduced ? null : DROP_GLIDE,
+		modifiers,
+		zIndex,
+		style: OVERLAY_STYLE,
+		children: children == null || children === false ? null : /* @__PURE__ */ jsx("div", {
+			className: "size-full",
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "drag-lift",
+				className: lift({ className }),
+				style: liftStyle,
+				children
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DragSession, { autoScroll }), container ? createPortal(/* @__PURE__ */ jsx("div", {
+		"data-slot": "drag-lift-portal",
+		className: cn("contents", resolvedMode),
+		children: overlay
+	}), container) : overlay] });
+}
+/** Where the pointer is during a drag: auto-scroll and the refusal hint read it. */
+const pointer = {
+	x: 0,
+	y: 0,
+	known: false
+};
+function trackPointer(event) {
+	const point = "touches" in event ? event.touches[0] : event;
+	if (!point) return;
+	pointer.x = point.clientX;
+	pointer.y = point.clientY;
+	pointer.known = true;
+}
+/** The pointer's last place, for a hint that follows it. */
+function dragPointer() {
+	return pointer.known ? {
+		x: pointer.x,
+		y: pointer.y
+	} : null;
+}
+function DragSession({ autoScroll }) {
+	const { active, activatorEvent } = useDndContext();
+	const dragging = active != null;
+	const viaKeyboard = isKeyboardEvent(activatorEvent);
+	useEffect(() => {
+		if (!dragging) return;
+		const root = document.documentElement;
+		root.setAttribute("data-dragging", "");
+		if (activatorEvent && !viaKeyboard) trackPointer(activatorEvent);
+		const onMove = (event) => trackPointer(event);
+		const onBlur = () => cancelDrag();
+		const onVisibility = () => {
+			if (document.visibilityState === "hidden") cancelDrag();
+		};
+		window.addEventListener("pointermove", onMove, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("touchmove", onMove, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("blur", onBlur);
+		document.addEventListener("visibilitychange", onVisibility);
+		let frame = 0;
+		const tick = () => {
+			if (pointer.known) autoScrollAt(pointer.x, pointer.y);
+			frame = requestAnimationFrame(tick);
+		};
+		if (autoScroll && !viaKeyboard) frame = requestAnimationFrame(tick);
+		return () => {
+			root.removeAttribute("data-dragging");
+			pointer.known = false;
+			window.removeEventListener("pointermove", onMove, { capture: true });
+			window.removeEventListener("touchmove", onMove, { capture: true });
+			window.removeEventListener("blur", onBlur);
+			document.removeEventListener("visibilitychange", onVisibility);
+			cancelAnimationFrame(frame);
+		};
+	}, [
+		dragging,
+		viaKeyboard,
+		autoScroll,
+		activatorEvent
+	]);
+	return null;
+}
+function scrollable(element) {
+	const style = getComputedStyle(element);
+	return {
+		x: /(auto|scroll)/.test(style.overflowX) && element.scrollWidth > element.clientWidth,
+		y: /(auto|scroll)/.test(style.overflowY) && element.scrollHeight > element.clientHeight
+	};
+}
+/** Faster the nearer the edge: up to 16px a frame at the edge itself. */
+function speed(depth) {
+	return Math.ceil(16 * Math.min(1, depth / 48) ** 2);
+}
+function scrollDelta(start, end, at, position, max) {
+	const zone = 48;
+	if (at < start + zone && position > 0) return -speed(start + zone - at);
+	if (at > end - zone && position < max) return speed(at - (end - zone));
+	return 0;
+}
+/** Scrolls the nearest area under the point that can still scroll toward the edge it is near. */
+function autoScrollAt(x, y) {
+	let element = document.elementFromPoint(x, y);
+	while (element && element !== document.documentElement && element !== document.body) {
+		const can = scrollable(element);
+		if (can.x || can.y) {
+			const rect = element.getBoundingClientRect();
+			const dy = can.y ? scrollDelta(rect.top, rect.bottom, y, element.scrollTop, element.scrollHeight - element.clientHeight - 1) : 0;
+			const dx = can.x ? scrollDelta(rect.left, rect.right, x, element.scrollLeft, element.scrollWidth - element.clientWidth - 1) : 0;
+			if (dx || dy) {
+				element.scrollBy(dx, dy);
+				return;
+			}
+		}
+		element = element.parentElement;
+	}
+	const page = document.scrollingElement ?? document.documentElement;
+	const dy = scrollDelta(0, window.innerHeight, y, page.scrollTop, page.scrollHeight - window.innerHeight - 1);
+	if (dy) window.scrollBy(0, dy);
+}
+//#endregion
+export { DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DragLift, LIFT_CLASS, ORIGIN_OPACITY, autoScrollAt, cancelDrag, dragPointer, keepGrabInside, useDragSiblingTransition, useLiftContainer };

package/dist/components/drag/drag-lists.d.mts

@@ -0,0 +1,98 @@
+import { DragMessages } from "./drag-announcements.mjs";
+import { ReactNode } from "react";
+import { Announcements, CollisionDetection, DragEndEvent, DragOverEvent, DragStartEvent, KeyboardCoordinateGetter, ScreenReaderInstructions, UniqueIdentifier } from "@dnd-kit/core";
+import { SortingStrategy } from "@dnd-kit/sortable";
+//#region src/components/drag/drag-lists.d.ts
+export type DragListsItems<L extends string> = Record<L, readonly string[]>;
+export type UseDragListsOptions<L extends string> = {
+  /** The lists, in the order they are on screen (by keyboard, entering a list from above lands first, from below last). */
+  lists: readonly L[];
+  /** Each list's items, by id. */
+  items: DragListsItems<L>;
+  /** Called with the lists as they should now render: while dragging (the item standing at its landing spot), on a drop and on a cancel. */
+  onItemsChange: (items: DragListsItems<L>) => void;
+  /** A list's name as people see it ("Pinned"). */
+  listName: (list: L) => string;
+  /** An item's name as people see it ("#launch-week"); never its id. */
+  itemName: (id: string) => string;
+  /** Why `to` won't take an item from `from`, or null when it will. */
+  refuse?: (from: L, to: L, id: string) => string | null;
+  /** The surface's collision detection; it is held still for a moment right after the item changes list. */
+  collisionDetection: CollisionDetection;
+  /** Says each step in a polite live region (`useDragAnnouncer`). */
+  announce: (message: string) => void;
+  /** Your translations of the announcements. */
+  messages?: Partial<DragMessages>;
+};
+/** dnd-kit's vertical strategy, except that nothing moves while the hand is outside the list. */
+export declare const dragListStrategy: SortingStrategy;
+/**
+ * Items in one or more lists that can be reordered and moved between lists
+ * (a sidebar's sections, a board's columns): the lists half of the drag
+ * model (design/patterns/drag-and-drop.md#where-it-will-land). While dragging,
+ * the item stands at its landing spot (its own slot is the place; siblings
+ * slide apart), a list can refuse it, and every step is announced by name.
+ * The keyboard is measured from the item's real place, so the arrows never
+ * skip one after a move into another list.
+ *
+ * Spread `handlers`, `collisionDetection` and `accessibility` on the
+ * `DndContext`, pass `coordinateGetter` to `useDragSensors`, and render
+ * `DragRemeasure version={items}` inside it.
+ */
+export declare function useDragLists<L extends string>({ lists, items, onItemsChange, listName, itemName, refuse, collisionDetection, announce, messages }: UseDragListsOptions<L>): {
+  /** The dragged item's id, or null. */
+  activeId: string | null;
+  /** The list that refuses the item under the hand, and why. */
+  refusal: {
+    list: L;
+    reason: string;
+  } | null;
+  /** The list the drag started in, while dragging. */
+  originList: L | null;
+  isHome: (id: string, index: number) => boolean;
+  listOf: (state: DragListsItems<L>, id: UniqueIdentifier) => L | null;
+  collisionDetection: CollisionDetection;
+  coordinateGetter: KeyboardCoordinateGetter;
+  accessibility: {
+    announcements: Announcements;
+    screenReaderInstructions: ScreenReaderInstructions;
+  };
+  handlers: {
+    onDragStart: ({ active, activatorEvent }: DragStartEvent) => void;
+    onDragOver: ({ active, over }: DragOverEvent) => void;
+    onDragEnd: ({ over }: DragEndEvent) => void;
+    onDragCancel: () => void;
+  };
+};
+export type DraggedSlotProps = {
+  /**
+   * This item is the one being dragged. Render the slot around every item
+   * and pass `isDragging`, so the dragged one keeps its node (and focus).
+   * @default false
+   */
+  dragging?: boolean;
+  /** The dragged item still stands at its own place. */
+  home: boolean;
+  /** The item's radius class, for the place: `rounded-control` by default. */
+  radius?: string;
+  /** Classes for the place, after `radius`. */
+  className?: string;
+  children: ReactNode;
+};
+/**
+ * Wraps each item's content in a list. The dragged item's own node is at 40%
+ * while it is still home, and the dashed place (its size, its radius) once it
+ * stands anywhere else. Every other item renders as it is: the wrapper stays
+ * the same, so the item keeps focus when its drag starts.
+ */
+export declare function DraggedSlot({ dragging, home, radius, className, children }: DraggedSlotProps): import("react").JSX.Element;
+/** The last announcement, for a polite live region (`DragLiveRegion`). Repeats are dropped. */
+export declare function useDragAnnouncer(): {
+  message: string;
+  announce: (text: string) => void;
+};
+/** A polite, visually hidden live region for drag announcements. */
+export declare function DragLiveRegion({ message }: {
+  message: string;
+}): import("react").JSX.Element;
+//#endregion