@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/swipe-actions/index.d.ts

@@ -0,0 +1,2 @@
+import { SwipeAction, SwipeActions, SwipeActionsProps, SwipeActionsRow, SwipeActionsRowProps } from "./swipe-actions.js";
+export { type SwipeAction, SwipeActions, type SwipeActionsProps, SwipeActionsRow, type SwipeActionsRowProps };

package/dist/swipe-actions/index.js

@@ -0,0 +1,2 @@
+import { SwipeActions, SwipeActionsRow } from "./swipe-actions.js";
+export { SwipeActions, SwipeActionsRow };

package/dist/swipe-actions/swipe-actions.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from "react";
+//#region src/swipe-actions/swipe-actions.d.ts
+export interface SwipeAction {
+  /** Names the action: under its icon when revealed, and in the row's More actions menu. */
+  label: string;
+  icon: ReactNode;
+  /** The fill of the revealed action. Pair `destructive` with a label that names the destructive result. @default "neutral" */
+  tone?: "neutral" | "primary" | "destructive";
+  /** Runs for a full swipe, a tap on the revealed action, or the More actions menu. Remove the item here unless `keepRow` is set. */
+  onSelect: () => void;
+  /** The row springs home after the action instead of sliding away, for actions such as Mark as unread. */
+  keepRow?: boolean;
+}
+export interface SwipeActionsProps {
+  /** Names the list. */
+  label: string;
+  /** `SwipeActionsRow`s, each with a stable `key`: a row that is removed slides out and the list closes the gap. */
+  children: ReactNode;
+  /** Extra classes for the list's frame. Merged last. */
+  className?: string;
+}
+/** One row. `leading` actions sit under the left edge and `trailing` ones under the right; the outermost on each side commits on a full swipe. */
+export interface SwipeActionsRowProps {
+  /** Names the row in its menu button, for example the message subject. */
+  label: string;
+  leading?: SwipeAction[];
+  trailing?: SwipeAction[];
+  /** Lets a long swipe commit the outermost action without a tap. @default true */
+  fullSwipe?: boolean;
+  children: ReactNode;
+  /** Extra classes for the row's content. Merged last. */
+  className?: string;
+}
+/**
+ * A list whose rows reveal actions on a horizontal swipe, the way a mail inbox does. Use
+ * it for short lists where people triage items quickly.
+ *
+ * Only one row stays open at a time; touching anywhere else or pressing Escape puts it
+ * away. Every row also has a More actions menu with the same actions, so keyboard,
+ * screen reader and single-pointer users never need the gesture. A row that is removed
+ * slides out and the list closes the gap; a row added later opens its height.
+ *
+ * Reduced motion: rows jump to where the finger leaves them, and removal is immediate.
+ *
+ * @example
+ * <SwipeActions label="Inbox">
+ *   {mails.map((mail) => (
+ *     <SwipeActionsRow key={mail.id} label={mail.subject} trailing={[archive, trash]}>
+ *       {mail.subject}
+ *     </SwipeActionsRow>
+ *   ))}
+ * </SwipeActions>
+ */
+export declare function SwipeActions({ label, children, className }: SwipeActionsProps): import("react").JSX.Element;
+/**
+ * One row of a `SwipeActions` list. Drag it sideways to reveal its actions: they share the
+ * revealed space, widen together past their resting width, and the outermost one stretches
+ * over the whole row for a full swipe (a tick of haptics on touch devices). A flick opens,
+ * commits or closes by its speed as well as its distance, and a row dragged past its last
+ * stop pulls back against elastic.
+ *
+ * The row's More actions button opens a menu of the same actions: the way to use them
+ * without a gesture.
+ */
+export declare function SwipeActionsRow({ label, leading, trailing, fullSwipe, children, className }: SwipeActionsRowProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=swipe-actions.d.ts.map

package/dist/swipe-actions/swipe-actions.js

@@ -0,0 +1,552 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { MORPH, SMOOTH, SNAPPY, live, retarget } from "../lib/spring-tween.js";
+import { Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger } from "../menu/menu.js";
+import { useLeavingList } from "../lib/leaving-list.js";
+import { Children, Fragment, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/swipe-actions/swipe-actions.tsx
+/** Width of one action while a row rests open. */
+const ACTION = 76;
+/** Movement before a press is read as a swipe or handed to the page as a scroll. */
+const SLOP = 8;
+/** Seconds of travel projected from the release velocity, roughly a 0.99 deceleration rate. */
+const PROJECTION = .1;
+/** Release speed in px/s that counts as a flick. */
+const FLICK = 900;
+/** The longest a leaving row's collapse takes, plus a margin, for the backstop that removes a row whose transition never ends. */
+const COLLAPSE_BACKSTOP = 1300;
+/** How long a committed row waits for its list to remove it before it comes back. */
+const RESTORE_MS = 1400;
+const clamp01 = (value) => Math.min(1, Math.max(0, value));
+/** Past its last stop the row still follows, but every pixel costs more, like pulling against elastic. */
+const rubberBand = (overshoot, dimension) => (1 - 1 / (overshoot * .55 / dimension + 1)) * dimension;
+const sideOf = (value) => value > 0 ? "leading" : value < 0 ? "trailing" : null;
+const GroupContext = createContext({
+	openId: null,
+	setOpenId: () => {},
+	rows: /* @__PURE__ */ new Map()
+});
+const RowStateContext = createContext(null);
+function velocityOf(samples) {
+	const last = samples[samples.length - 1];
+	if (!last) return 0;
+	const first = samples.find((sample) => last[0] - sample[0] <= 80) ?? last;
+	const elapsed = (last[0] - first[0]) / 1e3;
+	return elapsed > 0 ? (last[1] - first[1]) / elapsed : 0;
+}
+/**
+* A list whose rows reveal actions on a horizontal swipe, the way a mail inbox does. Use
+* it for short lists where people triage items quickly.
+*
+* Only one row stays open at a time; touching anywhere else or pressing Escape puts it
+* away. Every row also has a More actions menu with the same actions, so keyboard,
+* screen reader and single-pointer users never need the gesture. A row that is removed
+* slides out and the list closes the gap; a row added later opens its height.
+*
+* Reduced motion: rows jump to where the finger leaves them, and removal is immediate.
+*
+* @example
+* <SwipeActions label="Inbox">
+*   {mails.map((mail) => (
+*     <SwipeActionsRow key={mail.id} label={mail.subject} trailing={[archive, trash]}>
+*       {mail.subject}
+*     </SwipeActionsRow>
+*   ))}
+* </SwipeActions>
+*/
+function SwipeActions({ label, children, className }) {
+	const [openId, setOpenId] = useState(null);
+	const [rows] = useState(() => /* @__PURE__ */ new Map());
+	useEffect(() => {
+		if (!openId) return;
+		const onPointerDown = (event) => {
+			const row = rows.get(openId);
+			if (row && event.target instanceof Node && row.contains(event.target)) return;
+			setOpenId(null);
+		};
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") setOpenId(null);
+		};
+		document.addEventListener("pointerdown", onPointerDown, true);
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("pointerdown", onPointerDown, true);
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [openId, rows]);
+	const group = useMemo(() => ({
+		openId,
+		setOpenId,
+		rows
+	}), [openId, rows]);
+	const items = Children.toArray(children).filter((child) => isValidElement(child));
+	const { list, done: leaveDone } = useLeavingList(items.map((node) => ({
+		id: String(node.key),
+		node
+	})));
+	const [initial] = useState(() => new Set(items.map((node) => String(node.key))));
+	const [ready, setReady] = useState(false);
+	useIsomorphicLayoutEffect(() => {
+		const frame = requestAnimationFrame(() => setReady(true));
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	const done = useCallback((id) => {
+		initial.delete(id);
+		leaveDone(id);
+	}, [initial, leaveDone]);
+	return /* @__PURE__ */ jsx(GroupContext.Provider, {
+		value: group,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "swipe-actions",
+			className: cn("swipe-actions-surface rounded-panel border-(length:--border-width) border-border bg-surface font-sans text-foreground", className),
+			children: /* @__PURE__ */ jsx("ul", {
+				role: "list",
+				"aria-label": label,
+				tabIndex: -1,
+				className: "m-0 -mb-px list-none p-0 outline-none",
+				children: list.map(({ item, leaving }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(RowStateContext.Provider, {
+					value: {
+						id: item.id,
+						leaving,
+						fresh: ready && !initial.has(item.id),
+						done
+					},
+					children: item.node
+				}) }, item.id))
+			})
+		})
+	});
+}
+const layerTone = {
+	neutral: "bg-secondary text-secondary-foreground",
+	primary: "bg-primary text-primary-foreground",
+	destructive: "bg-destructive text-destructive-foreground"
+};
+const iconOf = (action) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	"data-swipe-icon": "",
+	className: "inline-flex w-4 text-text-secondary [&_svg]:size-4",
+	children: action.icon
+});
+/**
+* One row of a `SwipeActions` list. Drag it sideways to reveal its actions: they share the
+* revealed space, widen together past their resting width, and the outermost one stretches
+* over the whole row for a full swipe (a tick of haptics on touch devices). A flick opens,
+* commits or closes by its speed as well as its distance, and a row dragged past its last
+* stop pulls back against elastic.
+*
+* The row's More actions button opens a menu of the same actions: the way to use them
+* without a gesture.
+*/
+function SwipeActionsRow({ label, leading = [], trailing = [], fullSwipe = true, children, className }) {
+	const { openId, setOpenId, rows } = useContext(GroupContext);
+	const state = useContext(RowStateContext);
+	const leaving = state?.leaving ?? false;
+	const id = useId();
+	const rowRef = useRef(null);
+	const contentRef = useRef(null);
+	const parts = useRef(/* @__PURE__ */ new Map());
+	const motion = useRef({
+		x: live(0),
+		cover: live(0)
+	});
+	const covering = useRef(null);
+	const width = useRef(0);
+	const drag = useRef(null);
+	const armed = useRef(false);
+	const exiting = useRef(false);
+	const swallowClick = useRef(false);
+	const focusNeighbour = useRef(false);
+	const restoreTimer = useRef(0);
+	const [arrives] = useState(state?.fresh ?? false);
+	const latest = useRef({
+		leading,
+		trailing,
+		fullSwipe
+	});
+	useIsomorphicLayoutEffect(() => {
+		latest.current = {
+			leading,
+			trailing,
+			fullSwipe
+		};
+	});
+	const actionsOf = (side) => latest.current[side];
+	const openWidth = (side) => actionsOf(side).length * ACTION;
+	const outermost = (side) => side === "leading" ? 0 : actionsOf(side).length - 1;
+	const canCommit = (side) => latest.current.fullSwipe && actionsOf(side).length > 0;
+	const threshold = (side) => Math.max(openWidth(side) + 48, width.current * .56);
+	/** Writes the row and every revealed action from `x` and `cover`. Called every frame; no React render. */
+	function paint() {
+		const content = contentRef.current;
+		if (!content) return;
+		const value = motion.current.x.value;
+		const progress = motion.current.cover.value;
+		content.style.transform = value === 0 ? "" : `translate3d(${value}px, 0, 0)`;
+		for (const side of ["leading", "trailing"]) {
+			const direction = side === "leading" ? 1 : -1;
+			const count = actionsOf(side).length;
+			const covered = covering.current;
+			for (let index = 0; index < count; index++) {
+				const layer = parts.current.get(`${side}-${index}`);
+				if (!layer) continue;
+				const rank = side === "leading" ? count - 1 - index : index;
+				const coverRank = covered?.side === side ? side === "leading" ? count - 1 - covered.index : covered.index : null;
+				const revealed = Math.max(0, value * direction);
+				const segment = revealed / count;
+				const base = (count - rank) * revealed / count;
+				const inset = coverRank === rank ? base + progress * (revealed - base) : coverRank !== null && rank > coverRank ? base * (1 - progress) : base;
+				layer.layer.style.transform = `translate3d(${direction * inset}px, 0, 0)`;
+				const glyph = coverRank === rank ? segment / 2 + progress * (ACTION / 2 - segment / 2) : segment / 2;
+				if (layer.anchor) layer.anchor.style.transform = `translate3d(${-direction * glyph}px, 0, 0)`;
+				const reveal = (own) => coverRank === rank ? Math.max(own, progress) : coverRank === null ? own : own * (1 - progress);
+				const icon = reveal(clamp01((segment - ACTION * .25) / (ACTION * .55)));
+				const text = reveal(clamp01((segment - ACTION * .72) / (ACTION * .24)));
+				if (layer.icon) {
+					layer.icon.style.opacity = String(icon);
+					layer.icon.style.scale = String(.6 + .4 * icon);
+				}
+				if (layer.label) layer.label.style.opacity = String(text);
+			}
+		}
+	}
+	function stretchTo(value) {
+		retarget(motion.current.cover, value, MORPH, paint);
+	}
+	/** Springs the row to a stop. Under reduced motion it snaps. */
+	function settle(target) {
+		if (armed.current || target !== 0 && motion.current.cover.value !== 0) stretchTo(0);
+		armed.current = false;
+		retarget(motion.current.x, target, target === 0 ? SMOOTH : SNAPPY, paint, 0, () => {
+			if (target === 0) {
+				motion.current.cover.stop();
+				motion.current.cover.value = 0;
+				paint();
+			}
+		});
+		if (target === 0) setOpenId((current) => current === id ? null : current);
+		else setOpenId(id);
+	}
+	/** The chosen action stretches over the whole row while the row leaves in its direction; the list then closes the gap. */
+	function commit(side, index) {
+		const action = actionsOf(side)[index];
+		if (!action || exiting.current) return;
+		const direction = side === "leading" ? 1 : -1;
+		armed.current = false;
+		covering.current = {
+			side,
+			index
+		};
+		stretchTo(1);
+		if (action.keepRow) {
+			action.onSelect();
+			settle(0);
+			return;
+		}
+		exiting.current = true;
+		const row = rowRef.current;
+		if (row) row.dataset.removing = "";
+		retarget(motion.current.x, direction * (width.current + 2), SMOOTH, paint);
+		setOpenId((current) => current === id ? null : current);
+		action.onSelect();
+		window.clearTimeout(restoreTimer.current);
+		restoreTimer.current = window.setTimeout(comeBack, RESTORE_MS);
+	}
+	function comeBack() {
+		if (!exiting.current) return;
+		exiting.current = false;
+		delete rowRef.current?.dataset.removing;
+		settle(0);
+	}
+	function arm(value, pointerType) {
+		const side = sideOf(value);
+		const limit = side ? threshold(side) : Infinity;
+		const next = !!side && canCommit(side) && Math.abs(value) > (armed.current ? limit - 20 : limit);
+		if (next === armed.current || !side) {
+			if (!side && armed.current) {
+				armed.current = false;
+				stretchTo(0);
+			}
+			return;
+		}
+		armed.current = next;
+		if (next) {
+			covering.current = {
+				side,
+				index: outermost(side)
+			};
+			if (pointerType === "touch") navigator.vibrate?.(8);
+		}
+		stretchTo(next ? 1 : 0);
+	}
+	function constrain(raw) {
+		const side = sideOf(raw);
+		if (!side) return 0;
+		const dimension = width.current || 320;
+		const limit = actionsOf(side).length === 0 ? 0 : canCommit(side) ? dimension : openWidth(side);
+		const distance = Math.abs(raw);
+		return Math.sign(raw) * (distance <= limit ? distance : limit + rubberBand(distance - limit, dimension));
+	}
+	function release(velocity) {
+		const value = motion.current.x.value;
+		const side = sideOf(value);
+		if (!side || actionsOf(side).length === 0) {
+			settle(0);
+			return;
+		}
+		const direction = side === "leading" ? 1 : -1;
+		const distance = Math.abs(value);
+		const outward = velocity * direction;
+		const open = openWidth(side);
+		const projected = distance + outward * PROJECTION;
+		const flung = distance > open && outward > FLICK && projected > threshold(side);
+		if (canCommit(side) && (armed.current && outward > -900 || flung)) {
+			commit(side, outermost(side));
+			return;
+		}
+		settle(projected > open / 2 ? direction * open : 0);
+	}
+	function onPointerDown(event) {
+		swallowClick.current = false;
+		if (event.target.closest("[data-swipe-more]")) return;
+		if (exiting.current || !event.isPrimary || event.pointerType === "mouse" && event.button !== 0) return;
+		motion.current.x.stop();
+		drag.current = {
+			pointer: event.pointerId,
+			type: event.pointerType,
+			startX: event.clientX,
+			startY: event.clientY,
+			origin: motion.current.x.value,
+			locked: null,
+			samples: [[event.timeStamp, event.clientX]]
+		};
+	}
+	function onPointerMove(event) {
+		const current = drag.current;
+		if (!current || current.pointer !== event.pointerId || current.locked === "y") return;
+		if (!current.locked) {
+			const dx = event.clientX - current.startX;
+			const dy = event.clientY - current.startY;
+			if (Math.hypot(dx, dy) < SLOP) return;
+			if (Math.abs(dy) > Math.abs(dx)) {
+				current.locked = "y";
+				return;
+			}
+			current.locked = "x";
+			current.startX = event.clientX;
+			try {
+				event.currentTarget.setPointerCapture(event.pointerId);
+			} catch {}
+			if (rowRef.current) rowRef.current.dataset.dragging = "";
+			setOpenId(id);
+		}
+		const value = constrain(current.origin + event.clientX - current.startX);
+		motion.current.x.value = value;
+		paint();
+		current.samples.push([event.timeStamp, event.clientX]);
+		if (current.samples.length > 12) current.samples.shift();
+		arm(value, current.type);
+	}
+	function onPointerEnd(event) {
+		const current = drag.current;
+		if (!current || current.pointer !== event.pointerId) return;
+		drag.current = null;
+		if (current.locked === "x") {
+			swallowClick.current = true;
+			if (rowRef.current) delete rowRef.current.dataset.dragging;
+			current.samples.push([event.timeStamp, event.clientX]);
+			release(event.type === "pointercancel" ? 0 : velocityOf(current.samples));
+			return;
+		}
+		if (current.locked === null && Math.abs(motion.current.x.value) > .5) {
+			swallowClick.current = true;
+			settle(0);
+		}
+	}
+	function onClickCapture(event) {
+		if (!swallowClick.current) return;
+		swallowClick.current = false;
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	/** After an action removed this row, focus goes to the next row's menu button, so a keyboard user keeps their place. */
+	function moveFocusToNeighbour() {
+		const row = rowRef.current;
+		if (!row) return;
+		const staying = (step) => {
+			let node = row[step];
+			while (node instanceof HTMLElement && ("removing" in node.dataset || "leaving" in node.dataset)) node = node[step];
+			return node;
+		};
+		((staying("nextElementSibling") ?? staying("previousElementSibling"))?.querySelector("[data-swipe-more]") ?? row.parentElement)?.focus({ preventScroll: true });
+	}
+	useEffect(() => {
+		const row = rowRef.current;
+		if (!row) return;
+		const { x, cover } = motion.current;
+		rows.set(id, row);
+		width.current = row.offsetWidth;
+		const observer = new ResizeObserver(([entry]) => {
+			if (entry) width.current = entry.contentRect.width;
+		});
+		observer.observe(row);
+		return () => {
+			observer.disconnect();
+			rows.delete(id);
+			window.clearTimeout(restoreTimer.current);
+			x.stop();
+			cover.stop();
+			setOpenId((current) => current === id ? null : current);
+		};
+	}, [
+		id,
+		rows,
+		setOpenId
+	]);
+	useEffect(() => {
+		if (openId !== id && !exiting.current && drag.current?.locked !== "x" && motion.current.x.value !== 0) settle(0);
+	}, [openId]);
+	const wasLeaving = useRef(false);
+	const gone = useCallback(() => state?.done(state.id), [state]);
+	useExitBackstop(leaving, gone, COLLAPSE_BACKSTOP);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving) {
+			window.clearTimeout(restoreTimer.current);
+			wasLeaving.current = true;
+			if (prefersReducedMotion()) gone();
+		} else if (wasLeaving.current) {
+			wasLeaving.current = false;
+			exiting.current = false;
+			delete rowRef.current?.dataset.removing;
+			settle(0);
+		}
+	}, [leaving, gone]);
+	const menuItems = [...leading.map((action, index) => ({
+		action,
+		side: "leading",
+		index
+	})), ...trailing.map((action, index) => ({
+		action,
+		side: "trailing",
+		index
+	}))];
+	return /* @__PURE__ */ jsxs("li", {
+		ref: rowRef,
+		"data-slot": "swipe-actions-row",
+		"data-leaving": leaving || void 0,
+		"data-fresh": arrives || void 0,
+		onTransitionEnd: (event) => {
+			if (leaving && event.target === event.currentTarget && event.propertyName === "height") gone();
+		},
+		className: "swipe-actions-row",
+		style: { "--swipe-action-width": `${ACTION}px` },
+		children: [["leading", "trailing"].map((side) => (side === "leading" ? leading : trailing).map((action, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			tabIndex: -1,
+			"aria-hidden": "true",
+			"data-slot": "swipe-actions-action",
+			"data-side": side,
+			ref: (node) => {
+				const key = `${side}-${index}`;
+				if (!node) {
+					parts.current.delete(key);
+					return;
+				}
+				parts.current.set(key, {
+					layer: node,
+					anchor: node.querySelector("[data-part=anchor]"),
+					icon: node.querySelector("[data-part=icon]"),
+					label: node.querySelector("[data-part=label]")
+				});
+			},
+			onClick: () => commit(side, index),
+			style: { zIndex: (side === "leading" ? leading.length - 1 - index : index) + 1 },
+			className: cnAll("swipe-actions-layer border-0 p-0 font-sans", layerTone[action.tone ?? "neutral"]),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-part": "anchor",
+				className: "swipe-actions-anchor",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "swipe-actions-glyph",
+					children: [/* @__PURE__ */ jsx("span", {
+						"data-part": "icon",
+						className: "grid place-items-center opacity-0 [&_svg]:size-5",
+						children: action.icon
+					}), /* @__PURE__ */ jsx("span", {
+						"data-part": "label",
+						className: "text-xs leading-(--leading-normal) font-medium whitespace-nowrap opacity-0",
+						children: action.label
+					})]
+				})
+			})
+		}, `${side}-${index}`))), /* @__PURE__ */ jsxs("div", {
+			ref: contentRef,
+			"data-slot": "swipe-actions-content",
+			onPointerDown,
+			onPointerMove,
+			onPointerUp: onPointerEnd,
+			onPointerCancel: onPointerEnd,
+			onClickCapture,
+			className: cn("swipe-actions-content bg-surface", className),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children
+			}), menuItems.length > 0 ? /* @__PURE__ */ jsxs(MenuTrigger, {
+				onOpenChange: (open) => {
+					if (open || !focusNeighbour.current) return;
+					focusNeighbour.current = false;
+					requestAnimationFrame(() => requestAnimationFrame(moveFocusToNeighbour));
+				},
+				children: [/* @__PURE__ */ jsx(Button, {
+					"data-swipe-more": "",
+					"aria-label": `More actions for ${label}`,
+					className: "grid size-8 flex-none cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-text-secondary outline-none motion-safe:transition-[background-color,color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle data-[hovered]:bg-muted data-[hovered]:text-foreground data-[pressed]:bg-muted data-[pressed]:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring)",
+					children: /* @__PURE__ */ jsxs("svg", {
+						"aria-hidden": "true",
+						viewBox: "0 0 24 24",
+						fill: "currentColor",
+						className: "pointer-events-none size-4.5",
+						children: [
+							/* @__PURE__ */ jsx("circle", {
+								cx: "5",
+								cy: "12",
+								r: "1.75"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "12",
+								cy: "12",
+								r: "1.75"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "19",
+								cy: "12",
+								r: "1.75"
+							})
+						]
+					})
+				}), /* @__PURE__ */ jsx(Menu$1, {
+					placement: "bottom end",
+					offset: 6,
+					onAction: (key) => {
+						const found = menuItems.find((item) => `${item.side}-${item.index}` === key);
+						if (!found) return;
+						focusNeighbour.current = !found.action.keepRow;
+						commit(found.side, found.index);
+					},
+					children: menuItems.map(({ action, side, index }) => /* @__PURE__ */ jsxs(MenuItem$1, {
+						id: `${side}-${index}`,
+						textValue: action.label,
+						className: action.tone === "destructive" ? "[&_[data-swipe-icon]]:text-destructive-strong" : void 0,
+						children: [iconOf(action), action.label]
+					}, `${side}-${index}`))
+				})]
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { SwipeActions, SwipeActionsRow };
+
+//# sourceMappingURL=swipe-actions.js.map