@rinzai/zen 0.9.0 → 0.10.1

package/dist/table/index.js

@@ -3,54 +3,56 @@ import { cx as e } from "../utils/cx.js";
 import { reducedMotion as t } from "../utils/motion.js";
 import n from "../icons/chevron-down.js";
 import r from "../icons/chevron-up.js";
-import { useCallback as i, useEffect as a, useLayoutEffect as o, useMemo as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { SelectionBar as i, TableSelectCell as a, TableSelectHead as o, useSelection as s } from "./selection.js";
+import { TableSwipeAction as c, TableSwipeRow as l } from "./swipe.js";
+import { useCallback as u, useEffect as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region packages/table/index.tsx
-function f({ label: t, className: n, ref: r, onScroll: o, ...s }) {
-	let l = c(null), d = i(() => {
-		let e = l.current;
+function v({ label: t, className: n, ref: r, onScroll: i, ...a }) {
+	let o = m(null), s = u(() => {
+		let e = o.current;
 		if (!e) return;
 		let t = (t, n) => n !== e.hasAttribute(t) && e.toggleAttribute(t, n);
 		t("data-under-top", e.scrollTop > 0), t("data-under-left", e.scrollLeft > 0), t("data-under-bottom", e.scrollTop + e.clientHeight < e.scrollHeight - 1);
 	}, []);
-	return a(() => {
-		let e = l.current;
+	return d(() => {
+		let e = o.current;
 		if (!e) return;
-		d();
-		let t = typeof ResizeObserver > "u" ? null : new ResizeObserver(d);
+		s();
+		let t = typeof ResizeObserver > "u" ? null : new ResizeObserver(s);
 		return t?.observe(e), e.firstElementChild && t?.observe(e.firstElementChild), () => t?.disconnect();
-	}, [d]), /* @__PURE__ */ u("div", {
+	}, [s]), /* @__PURE__ */ g("div", {
 		className: e("zen__table-panel glass glow-edge isolate flex flex-col overflow-hidden rounded-xl", n),
-		children: /* @__PURE__ */ u("div", {
+		children: /* @__PURE__ */ g("div", {
 			ref: (e) => {
-				l.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+				o.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
 			},
 			onScroll: (e) => {
-				d(), o?.(e);
+				s(), i?.(e);
 			},
 			role: t ? "region" : void 0,
 			"aria-label": t,
 			tabIndex: t ? 0 : void 0,
-			className: "zen__table-container focus-visible:ring-ring/30 min-h-0 overflow-auto rounded-[inherit] outline-hidden will-change-scroll focus-visible:ring-2 focus-visible:ring-inset",
-			...s
+			className: "zen__table-container focus-visible:ring-ring/30 relative min-h-0 overflow-auto rounded-[inherit] outline-hidden will-change-scroll focus-visible:ring-2 focus-visible:ring-inset",
+			...a
 		})
 	});
 }
-function p({ className: t, ...n }) {
-	return /* @__PURE__ */ u("table", {
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ g("table", {
 		className: e("zen__table w-full border-separate border-spacing-0 text-sm", t),
 		...n
 	});
 }
-function m({ className: t, ...n }) {
-	return /* @__PURE__ */ u("thead", {
+function b({ className: t, ...n }) {
+	return /* @__PURE__ */ g("thead", {
 		className: e("zen__sticky-top sticky top-0 z-20", t),
 		...n
 	});
 }
-function h({ ref: e, ...n }) {
-	let r = c(null), i = c(null);
-	return g(() => {
+function x({ ref: e, ...n }) {
+	let r = m(null), i = m(null);
+	return C(() => {
 		let e = r.current;
 		if (!e) return;
 		let n = [...e.rows], a = i.current;
@@ -59,14 +61,19 @@ function h({ ref: e, ...n }) {
 		if (i.current = {
 			rows: n,
 			tops: o
-		}, !(!a || t() || e.querySelector("[data-zen-spacer]"))) for (let e of n) {
-			let t = a.tops.get(e);
-			t === void 0 ? e.hasAttribute("data-tree-key") || e.animate?.({
-				opacity: [0, 1],
-				translate: ["0 -6px", "0 0"]
-			}, v) : t !== o.get(e) && e.animate?.({ translate: [`0 ${t - o.get(e)}px`, "0 0"] }, _);
+		}, !a || t() || e.querySelector("[data-zen-spacer]")) return;
+		let s = a.rows.filter((e) => !e.isConnected), c = (e) => e.matches(".zen__tree-row-enter, .zen__tree-row-exit");
+		if (!(n.some((e) => !a.tops.has(e) && c(e)) || s.some(c))) {
+			if (n.some((e) => a.tops.has(e))) for (let t of s) S(t, a.tops.get(t), e, n);
+			for (let e of n) {
+				let t = a.tops.get(e);
+				t === void 0 ? e.animate?.({
+					opacity: [0, 1],
+					translate: ["0 -6px", "0 0"]
+				}, E) : t !== o.get(e) && e.animate?.({ translate: [`0 ${t - o.get(e)}px`, "0 0"] }, T);
+			}
 		}
-	}), /* @__PURE__ */ u("tbody", {
+	}), /* @__PURE__ */ g("tbody", {
 		ref: (t) => {
 			if (r.current = t, typeof e == "function") return e(t);
 			e && (e.current = t);
@@ -74,42 +81,67 @@ function h({ ref: e, ...n }) {
 		...n
 	});
 }
-var g = typeof window > "u" ? a : o, _ = {
+function S(e, t, n, r) {
+	let i = n.closest("table"), a = n.closest(".zen__table-container"), o = r.find((t) => t.cells.length === e.cells.length);
+	if (!i || !a || !o) return;
+	let s = a.getBoundingClientRect(), c = i.getBoundingClientRect(), l = document.createElement("table");
+	l.className = i.className, l.setAttribute("aria-hidden", "true"), Object.assign(l.style, {
+		position: "absolute",
+		top: `${c.top - s.top + a.scrollTop + t}px`,
+		left: `${c.left - s.left + a.scrollLeft}px`,
+		width: `${i.offsetWidth}px`,
+		tableLayout: "fixed",
+		pointerEvents: "none"
+	});
+	let u = document.createElement("colgroup");
+	for (let e of o.cells) u.appendChild(document.createElement("col")).style.width = `${e.offsetWidth}px`;
+	l.append(u, document.createElement("tbody")), l.tBodies[0].append(e), a.append(l);
+	let d = l.animate?.({
+		opacity: [1, 0],
+		translate: ["0 0", "-12px 0"]
+	}, w);
+	d ? d.onfinish = d.oncancel = () => l.remove() : l.remove();
+}
+var C = typeof window > "u" ? d : f, w = {
+	duration: 220,
+	easing: "ease-in"
+}, T = {
 	duration: 320,
 	easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
-}, v = {
+}, E = {
 	duration: 260,
 	easing: "ease-out"
 };
-function y({ className: t, ...n }) {
-	return /* @__PURE__ */ u("tfoot", {
+function D({ className: t, ...n }) {
+	return /* @__PURE__ */ g("tfoot", {
 		className: e("zen__sticky-bottom sticky bottom-0 z-20", t),
 		...n
 	});
 }
-function b({ className: t, ...n }) {
-	return /* @__PURE__ */ u("tr", {
-		className: e("group", t),
-		...n
+function O({ selected: t, className: n, ...r }) {
+	return /* @__PURE__ */ g("tr", {
+		"data-selected": t || void 0,
+		className: e("group", n),
+		...r
 	});
 }
-function x({ numeric: t, sticky: i, sortDirection: a, onSort: o, scope: s = "col", className: c, children: l, ...f }) {
-	return /* @__PURE__ */ u("th", {
+function k({ numeric: t, sticky: i, sortDirection: a, onSort: o, scope: s = "col", className: c, children: l, ...u }) {
+	return /* @__PURE__ */ g("th", {
 		scope: s,
 		"aria-sort": a === "asc" ? "ascending" : a === "desc" ? "descending" : void 0,
 		className: e("border-tint/[0.07] text-muted-foreground border-b px-3 py-2.5 align-middle text-xs leading-5 font-medium tracking-wider whitespace-nowrap uppercase", i === "left" && "zen__sticky-left sticky left-0 z-10", t ? "text-right" : "text-left", c),
-		...f,
-		children: o ? /* @__PURE__ */ d("button", {
+		...u,
+		children: o ? /* @__PURE__ */ _("button", {
 			type: "button",
 			onClick: o,
 			className: e("hover:text-foreground touch-target inline-flex cursor-pointer items-center gap-1 align-middle leading-5 tracking-wider uppercase", t && "flex-row-reverse"),
-			children: [l, /* @__PURE__ */ u("span", {
+			children: [l, /* @__PURE__ */ g("span", {
 				"aria-hidden": !0,
 				className: "inline-flex w-3",
-				children: a === "asc" ? /* @__PURE__ */ u(r, {
+				children: a === "asc" ? /* @__PURE__ */ g(r, {
 					className: "size-3",
 					strokeWidth: 2.5
-				}) : a === "desc" ? /* @__PURE__ */ u(n, {
+				}) : a === "desc" ? /* @__PURE__ */ g(n, {
 					className: "size-3",
 					strokeWidth: 2.5
 				}) : null
@@ -117,23 +149,23 @@ function x({ numeric: t, sticky: i, sortDirection: a, onSort: o, scope: s = "col
 		}) : l
 	});
 }
-function S({ numeric: t, sticky: n, className: r, ...i }) {
-	return /* @__PURE__ */ u("td", {
-		className: e("border-tint/[0.045] border-b px-3 py-2.5 transition-colors duration-150", "group-hover:[background-image:linear-gradient(oklch(var(--tint)/0.035),oklch(var(--tint)/0.035))]", n === "left" && "zen__sticky-left sticky left-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)]", t && "text-right tabular-nums", r),
+function A({ numeric: t, sticky: n, className: r, ...i }) {
+	return /* @__PURE__ */ g("td", {
+		className: e("border-tint/[0.045] border-b px-3 py-2.5 transition-colors duration-150", "group-hover:[background-image:linear-gradient(oklch(var(--tint)/0.035),oklch(var(--tint)/0.035))]", "group-data-selected:[background-image:linear-gradient(oklch(var(--primary)/0.09),oklch(var(--primary)/0.09))]", n === "left" && "zen__sticky-left sticky left-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)]", t && "text-right tabular-nums", r),
 		...i
 	});
 }
-function C({ numeric: t, sticky: n, className: r, ...i }) {
-	return /* @__PURE__ */ u("td", {
+function j({ numeric: t, sticky: n, className: r, ...i }) {
+	return /* @__PURE__ */ g("td", {
 		className: e("border-tint/[0.07] h-9 border-t px-3 font-medium whitespace-nowrap", n === "left" && "zen__sticky-left sticky left-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)]", t && "text-right tabular-nums", r),
 		...i
 	});
 }
-function w({ height: e, colSpan: t }) {
-	return e <= 0 ? null : /* @__PURE__ */ u("tr", {
+function M({ height: e, colSpan: t }) {
+	return e <= 0 ? null : /* @__PURE__ */ g("tr", {
 		"aria-hidden": !0,
 		"data-zen-spacer": !0,
-		children: /* @__PURE__ */ u("td", {
+		children: /* @__PURE__ */ g("td", {
 			colSpan: t,
 			style: {
 				height: e,
@@ -143,17 +175,17 @@ function w({ height: e, colSpan: t }) {
 		})
 	});
 }
-function T({ colSpan: e, children: t = "Nothing here yet." }) {
-	return /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", {
+function N({ colSpan: e, children: t = "Nothing here yet." }) {
+	return /* @__PURE__ */ g("tr", { children: /* @__PURE__ */ g("td", {
 		colSpan: e,
 		className: "text-muted-foreground px-3 py-8 text-center",
 		children: t
 	}) });
 }
-function E(e, t, n) {
-	let [r, i] = l(n ?? null);
+function P(e, t, n) {
+	let [r, i] = h(n ?? null);
 	return {
-		rows: s(() => {
+		rows: p(() => {
 			if (!r) return e;
 			let n = t[r.key], i = [...e].sort(n);
 			return r.direction === "desc" ? i.reverse() : i;
@@ -177,4 +209,4 @@ function E(e, t, n) {
 	};
 }
 //#endregion
-export { h as TableBody, S as TableCell, f as TableContainer, T as TableEmpty, y as TableFooter, C as TableFooterCell, x as TableHead, m as TableHeader, b as TableRow, w as TableSpacerRow, p as default, E as useSort };
+export { i as SelectionBar, x as TableBody, A as TableCell, v as TableContainer, N as TableEmpty, D as TableFooter, j as TableFooterCell, k as TableHead, b as TableHeader, O as TableRow, a as TableSelectCell, o as TableSelectHead, M as TableSpacerRow, c as TableSwipeAction, l as TableSwipeRow, y as default, s as useSelection, P as useSort };

package/dist/table/selection.d.ts

@@ -0,0 +1,55 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Which rows are selected, by key: give it the keys in the order shown.
+ * Shift-click selects (or clears) every row between the last one clicked
+ * and this one. Keys no longer shown drop out of the selection.
+ */
+export declare function useSelection<K>(keys: readonly K[]): {
+    selected: Set<K>;
+    clear: () => void;
+    /** For a row's TableSelectCell. */
+    rowProps: (key: K) => {
+        checked: boolean;
+        onSelect: (on: boolean, range: boolean) => void;
+    };
+    /** For the header's TableSelectHead. */
+    allProps: () => {
+        checked: boolean;
+        indeterminate: boolean;
+        onSelect: (on: boolean) => void;
+    };
+};
+/** A row's checkbox cell; spread `rowProps(key)` from useSelection into it. */
+export declare function TableSelectCell({ checked, onSelect, label, className, ...rest }: TableSelectCellProps): import('react').JSX.Element;
+/** The header's checkbox, for every row at once; spread `allProps()` from useSelection into it. */
+export declare function TableSelectHead({ checked, indeterminate, onSelect, label, className, ...rest }: TableSelectHeadProps): import('react').JSX.Element;
+/**
+ * What to do with the selected rows: their count, your actions, and a × to
+ * clear the selection. Floats at the bottom of the screen while any are
+ * selected (move it with className).
+ */
+export declare function SelectionBar({ count, onClear, label, clearLabel, className, children, }: SelectionBarProps): import('react').JSX.Element | null;
+export interface TableSelectCellProps extends Omit<ComponentProps<'td'>, 'onSelect'> {
+    checked: boolean;
+    /** With `range` when shift was held. */
+    onSelect: (on: boolean, range: boolean) => void;
+    /** The checkbox's name, e.g. "Select Rent". */
+    label: string;
+}
+export interface TableSelectHeadProps extends Omit<ComponentProps<'th'>, 'onSelect'> {
+    checked: boolean;
+    indeterminate: boolean;
+    onSelect: (on: boolean) => void;
+    label?: string;
+}
+export interface SelectionBarProps {
+    count: number;
+    onClear: () => void;
+    /** The count as text (default "3 selected"). */
+    label?: (count: number) => string;
+    clearLabel?: string;
+    className?: string;
+    /** The actions, e.g. buttons to delete or re-tag them. */
+    children?: ReactNode;
+}
+//# sourceMappingURL=selection.d.ts.map

package/dist/table/selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../packages/table/selection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAc,SAAS,EAAoB,MAAM,OAAO,CAAC;AAEhF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,EAAE;;;IAoB1C,mCAAmC;oBACnB,CAAC;;uBAEE,OAAO,SAAS,OAAO;;IAO1C,wCAAwC;;;;uBAIrB,OAAO;;EAGjC;AAED,+EAA+E;AAC/E,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,+BAYrG;AAED,mGAAmG;AACnG,wBAAgB,eAAe,CAAC,EAC5B,OAAO,EACP,aAAa,EACb,QAAQ,EACR,KAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACV,EAAE,oBAAoB,+BAYtB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,OAAO,EACP,KAA8B,EAC9B,UAA8B,EAC9B,SAAS,EACT,QAAQ,GACX,EAAE,iBAAiB,sCAyBnB;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAChF,OAAO,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,QAAQ,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAChF,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gDAAgD;IAChD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB"}

package/dist/table/selection.js

@@ -0,0 +1,83 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import t from "../icons/micro/x-mark.js";
+import n from "../checkbox/index.js";
+import { useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/table/selection.tsx
+function s(e) {
+	let [t, n] = i(() => /* @__PURE__ */ new Set()), a = r(null), o = new Set(e), s = new Set([...t].filter((e) => o.has(e))), c = e.length > 0 && s.size === e.length, l = (e, t) => n((n) => {
+		let r = new Set([...n].filter((e) => o.has(e)));
+		for (let n of e) t ? r.add(n) : r.delete(n);
+		return r;
+	});
+	return {
+		selected: s,
+		clear: () => n(/* @__PURE__ */ new Set()),
+		rowProps: (t) => ({
+			checked: s.has(t),
+			onSelect: (n, r) => {
+				let i = r && a.current !== null ? e.indexOf(a.current) : -1, o = e.indexOf(t);
+				l(i === -1 ? [t] : e.slice(Math.min(i, o), Math.max(i, o) + 1), n), a.current = t;
+			}
+		}),
+		allProps: () => ({
+			checked: c,
+			indeterminate: s.size > 0 && !c,
+			onSelect: (t) => l(e, t)
+		})
+	};
+}
+function c({ checked: t, onSelect: r, label: i, className: o, ...s }) {
+	return /* @__PURE__ */ a("td", {
+		className: e("border-tint/[0.045] w-10 border-b py-2.5 pr-0 pl-3", o),
+		...s,
+		children: /* @__PURE__ */ a(n, {
+			"aria-label": i,
+			checked: t,
+			onClick: (e) => r(e.currentTarget.checked, e.shiftKey),
+			onChange: () => {},
+			className: "touch-target grid"
+		})
+	});
+}
+function l({ checked: t, indeterminate: r, onSelect: i, label: o = "Select all", className: s, ...c }) {
+	return /* @__PURE__ */ a("th", {
+		className: e("w-10 py-2.5 pr-0 pl-3", s),
+		...c,
+		children: /* @__PURE__ */ a(n, {
+			"aria-label": o,
+			checked: t,
+			indeterminate: r,
+			onChange: (e) => i(!r && e),
+			className: "touch-target grid"
+		})
+	});
+}
+function u({ count: n, onClear: r, label: i = (e) => `${e} selected`, clearLabel: s = "Clear selection", className: c, children: l }) {
+	return n === 0 ? null : /* @__PURE__ */ o("div", {
+		role: "toolbar",
+		"aria-label": "Selection",
+		className: e("zen__selection-bar glass glass-blur glow-edge fixed inset-x-0 bottom-6 z-40 mx-auto flex w-fit max-w-[calc(100vw-2rem)] items-center gap-2 rounded-2xl py-2 pr-2 pl-4 shadow-[0_12px_40px_-12px_oklch(0_0_0/0.6)]", c),
+		children: [
+			/* @__PURE__ */ a("span", {
+				className: "text-sm font-medium whitespace-nowrap tabular-nums",
+				"aria-live": "polite",
+				children: i(n)
+			}),
+			/* @__PURE__ */ a("span", {
+				className: "flex items-center gap-1",
+				children: l
+			}),
+			/* @__PURE__ */ a("button", {
+				type: "button",
+				"aria-label": s,
+				onClick: r,
+				className: "text-muted-foreground hover:text-foreground hover:bg-tint/10 focus-visible:ring-ring/50 touch-target grid size-8 cursor-pointer place-items-center rounded-lg outline-hidden focus-visible:ring-2",
+				children: /* @__PURE__ */ a(t, { className: "size-4" })
+			})
+		]
+	});
+}
+//#endregion
+export { u as SelectionBar, c as TableSelectCell, l as TableSelectHead, s as useSelection };

package/dist/table/swipe.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A row whose actions sit behind it at its end: swipe it left to reveal them
+ * (right, in right-to-left layouts), back (or tap the row) to put them away. They also come out when focused, so the
+ * keyboard reaches them. Use it in a TableContainer.
+ */
+export declare function TableSwipeRow({ actions, ref, className, children, onClickCapture, onBlur, ...rest }: TableSwipeRowProps): import('react').JSX.Element;
+/** One of a swipe row's actions: fills the row's height, flush with its end. */
+export declare function TableSwipeAction({ tone, className, ...rest }: TableSwipeActionProps): import('react').JSX.Element;
+export interface TableSwipeActionProps extends ComponentProps<'button'> {
+    tone?: 'default' | 'destructive';
+}
+export interface TableSwipeRowProps extends ComponentProps<'tr'> {
+    /** What's behind the row: TableSwipeActions, e.g. Edit and Delete. */
+    actions: ReactNode;
+    selected?: boolean;
+}
+//# sourceMappingURL=swipe.d.ts.map

package/dist/table/swipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe.d.ts","sourceRoot":"","sources":["../../packages/table/swipe.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAIpE;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,GAAG,EACH,SAAS,EACT,QAAQ,EACR,cAAc,EACd,MAAM,EACN,GAAG,IAAI,EACV,EAAE,kBAAkB,+BA2DpB;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,EAAE,IAAgB,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,+BAc/F;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACnE,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACpC;AAED,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC5D,sEAAsE;IACtE,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/table/swipe.js

@@ -0,0 +1,53 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useSwipe as t } from "../utils/swipe.js";
+import { TableRow as n } from "./index.js";
+import { useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/table/swipe.tsx
+function s({ actions: s, ref: c, className: l, children: u, onClickCapture: d, onBlur: f, ...p }) {
+	let m = r(null), h = r(null), [g, _] = i(!1), v = () => h.current?.offsetWidth ?? 0, y = (e) => m.current?.style.setProperty("--zen-row-swipe", `${Math.max(0, e)}px`), b = (e) => {
+		y(e ? v() : 0), _(e);
+	}, x = (e) => e > v() ? v() + (e - v()) / 4 : e;
+	return t(m, {
+		axis: "inline",
+		sign: g ? 1 : -1
+	}, {
+		move: (e) => y(x(g ? v() - e : e)),
+		release: (e, t) => b(g !== (e > v() / 2 || t > .5)),
+		cancel: () => b(g),
+		threshold: () => v() / 2
+	}), /* @__PURE__ */ o(n, {
+		ref: (e) => {
+			m.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+		},
+		"data-open": g || void 0,
+		className: e("zen__swipe-row relative", l),
+		onClickCapture: (e) => {
+			d?.(e), g && !h.current?.contains(e.target) && (e.preventDefault(), e.stopPropagation(), b(!1));
+		},
+		onBlur: (e) => {
+			f?.(e), g && !e.currentTarget.contains(e.relatedTarget) && b(!1);
+		},
+		...p,
+		children: [u, /* @__PURE__ */ a("td", {
+			className: "zen__swipe-actions border-tint/[0.045] absolute inset-y-0 start-full flex w-(--zen-row-swipe,0px) justify-end overflow-hidden border-b p-0",
+			children: /* @__PURE__ */ a("div", {
+				ref: h,
+				onFocus: () => !g && b(!0),
+				onClick: () => b(!1),
+				className: "flex shrink-0 items-stretch",
+				children: s
+			})
+		})]
+	});
+}
+function c({ tone: t = "default", className: n, ...r }) {
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		className: e("focus-visible:ring-ring/60 cursor-pointer px-4 text-sm font-medium whitespace-nowrap outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-inset", t === "destructive" ? "bg-destructive/90 text-destructive-foreground hover:bg-destructive" : "bg-tint/[0.09] hover:bg-tint/[0.14]", n),
+		...r
+	});
+}
+//#endregion
+export { c as TableSwipeAction, s as TableSwipeRow };

package/dist/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tabs/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAqE,MAAM,OAAO,CAAC;AAgB1G,6GAA6G;AAC7G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAetG;AAID;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAiC5F;AAiCD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,+BA0BnE;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,sCAgBpE;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tabs/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACH,cAAc,EASjB,MAAM,OAAO,CAAC;AAsBf,6GAA6G;AAC7G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAuBtG;AAID;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAiC5F;AAiCD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,+BA0BnE;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,sCA6BpE;AA4DD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;CACjB"}