@jfrader/ui 0.4.0 → 0.5.1

package/dist/filter-toolbar-Cy5Hqur-.js

@@ -0,0 +1,314 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r } from "./media-8yrN85VT.js";
+import { t as i } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { t as o } from "./button-NLY0h6EJ.js";
+import { createContext as s, useContext as c, useLayoutEffect as l, useMemo as u, useRef as d } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as h } from "@floating-ui/react";
+//#region src/components/filter-toolbar/filter-toolbar.tsx
+var g = [], _ = [
+	"button:not(:disabled)",
+	"input:not(:disabled)",
+	"select:not(:disabled)",
+	"textarea:not(:disabled)",
+	"a[href]",
+	"[tabindex]"
+].map((e) => `[data-ui="filter-toolbar-controls"] ${e}`).join(", "), v = {
+	remove: (e) => `Remove ${e.label}: ${e.valueLabel ?? e.value}`,
+	clear: "Clear all"
+}, y = new Intl.PluralRules("en"), b = (e, t) => `${t} ${y.select(e) === "one" ? "result" : "results"}`;
+function x(e) {
+	return Array.from(new Map(e.map((e) => [e.id, e])).values());
+}
+function S(e, t) {
+	return e.length === t.length && e.every((e, n) => {
+		let r = t[n];
+		return r !== void 0 && e.id === r.id && e.value === r.value && e.label === r.label && e.valueLabel === r.valueLabel;
+	});
+}
+var C = s(null);
+function w(e) {
+	let t = c(C);
+	if (!t) throw Error(`FilterToolbar.${e} must be rendered inside <FilterToolbar>.`);
+	return t;
+}
+var T = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: f.space[2],
+	minInlineSize: 0,
+	"& > *": {
+		minInlineSize: 0,
+		maxInlineSize: "100%"
+	}
+}), E = e({
+	display: "flex",
+	flexDirection: "column",
+	gap: f.space[3],
+	minInlineSize: 0,
+	padding: f.space[4],
+	border: `1px solid ${f.color.border}`,
+	borderRadius: f.radius.md,
+	backgroundColor: f.color.surface,
+	color: f.color.text,
+	fontFamily: f.font.sans,
+	fontSize: f.textSize.sm,
+	"&:focus": n,
+	[r]: {
+		borderColor: "CanvasText",
+		backgroundColor: "Canvas",
+		color: "CanvasText"
+	}
+}), D = e({
+	margin: 0,
+	padding: 0,
+	listStyle: "none"
+}), O = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: f.space[2],
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	paddingInlineStart: f.space[3],
+	border: `1px solid ${f.color.borderControl}`,
+	borderRadius: f.radius.full,
+	backgroundColor: f.color.surfaceHover,
+	color: f.color.text,
+	[r]: {
+		borderColor: "CanvasText",
+		backgroundColor: "Canvas",
+		color: "CanvasText"
+	}
+}), k = e({
+	minInlineSize: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+}), A = e({ color: f.color.textMuted }), j = e({ fontWeight: f.fontWeight.medium }), M = e({
+	flexShrink: 0,
+	minInlineSize: f.space[8],
+	minBlockSize: f.space[8],
+	blockSize: "auto",
+	padding: 0,
+	borderRadius: f.radius.full,
+	color: f.color.text,
+	[r]: { borderColor: "ButtonText" }
+}), N = e({
+	alignSelf: "flex-start",
+	maxInlineSize: "100%",
+	blockSize: "auto",
+	minBlockSize: f.space[8],
+	paddingBlock: f.space[2],
+	whiteSpace: "normal",
+	overflowWrap: "anywhere",
+	borderColor: f.color.borderControl,
+	[r]: { borderColor: "ButtonText" }
+}), P = e({
+	margin: 0,
+	minInlineSize: 0,
+	overflowWrap: "anywhere",
+	color: f.color.textMuted,
+	fontSize: f.textSize.sm,
+	lineHeight: f.lineHeight.base
+});
+function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled: o = !1, label: s = "Filters", messages: c, className: f, sx: m, children: y, "aria-label": b, "aria-labelledby": w, tabIndex: T = -1, ...D }) {
+	let [O = g, k] = i(n, r, a), A = u(() => x(O), [O]), j = d(null), M = h([j, e]), N = d(null), P = u(() => ({
+		...v,
+		...c
+	}), [c]), F = u(() => {
+		let e = (e) => {
+			if (o) return;
+			let t = x(e);
+			S(A, t) || k(t);
+		}, t = (e, t) => {
+			if (N.current = null, e.ownerDocument.activeElement !== e) return;
+			let n = A.findIndex((e) => e.id === t);
+			N.current = {
+				source: e,
+				removedId: t,
+				neighbors: t === void 0 ? [] : [...A.slice(n + 1).map((e) => e.id), ...A.slice(0, n).reverse().map((e) => e.id)]
+			};
+		};
+		return {
+			value: A,
+			disabled: o,
+			messages: P,
+			onValueChange: e,
+			remove: (n, r) => {
+				o || (t(r, n.id), e(A.filter((e) => e.id !== n.id)));
+			},
+			clear: (n) => {
+				o || (t(n), e(g));
+			}
+		};
+	}, [
+		A,
+		o,
+		P,
+		k
+	]);
+	return l(() => {
+		let e = N.current, t = j.current;
+		if (!e || !t) return;
+		let n = t.ownerDocument.activeElement;
+		if (n !== e.source && n !== t.ownerDocument.body) {
+			N.current = null;
+			return;
+		}
+		if (!(e.removedId === void 0 ? A.length === 0 : !A.some((t) => t.id === e.removedId))) return;
+		N.current = null;
+		let r = (e) => e.closest("[data-ui=\"filter-toolbar\"]") === t, i = Array.from(t.querySelectorAll("[data-ui~=\"filter-toolbar-remove\"]:not(:disabled)")).filter(r), a = e.neighbors.map((e) => i.find((t) => t.dataset.filterId === e)).find((e) => e !== void 0), o = Array.from(t.querySelectorAll(_)).find((e) => r(e) && e.tabIndex >= 0 && e.getAttribute("aria-disabled") !== "true" && !e.closest("[hidden], [inert]") && e.getClientRects().length > 0);
+		(a ?? o ?? t).focus();
+	}, [A]), /* @__PURE__ */ p(C.Provider, {
+		value: F,
+		children: /* @__PURE__ */ p(t, {
+			className: f,
+			styles: E,
+			sx: m,
+			children: (e) => /* @__PURE__ */ p("div", {
+				...D,
+				ref: M,
+				role: "group",
+				"data-ui": "filter-toolbar",
+				className: e,
+				tabIndex: T,
+				"aria-label": b ?? (w ? void 0 : s),
+				"aria-labelledby": w,
+				"aria-disabled": o || D["aria-disabled"],
+				children: y
+			})
+		})
+	});
+}
+F.displayName = "FilterToolbar";
+function I({ children: e, className: n, sx: r, ...i }) {
+	let { value: a, disabled: o, onValueChange: s } = w("Controls");
+	return /* @__PURE__ */ p(t, {
+		className: n,
+		styles: T,
+		sx: r,
+		children: (t) => /* @__PURE__ */ p("div", {
+			...i,
+			"data-ui": "filter-toolbar-controls",
+			className: t,
+			children: typeof e == "function" ? e({
+				value: a,
+				disabled: o,
+				onValueChange: s
+			}) : e
+		})
+	});
+}
+I.displayName = "FilterToolbar.Controls";
+function L({ empty: e, slotProps: n, className: r, sx: i, ...s }) {
+	let { value: c, disabled: l, messages: u, remove: d } = w("ActiveFilters");
+	return /* @__PURE__ */ p(t, {
+		className: r,
+		styles: T,
+		sx: i,
+		children: (t) => /* @__PURE__ */ p("div", {
+			...s,
+			"data-ui": "filter-toolbar-active-filters",
+			className: t,
+			children: c.length > 0 ? /* @__PURE__ */ p("ul", {
+				className: n?.list?.className,
+				css: [
+					T,
+					D,
+					n?.list?.css
+				],
+				children: c.map((e) => /* @__PURE__ */ m("li", {
+					className: n?.chip?.className,
+					css: [O, n?.chip?.css],
+					children: [/* @__PURE__ */ m("span", {
+						className: n?.label?.className,
+						css: [k, n?.label?.css],
+						children: [/* @__PURE__ */ m("span", {
+							css: A,
+							children: [e.label, ": "]
+						}), /* @__PURE__ */ p("span", {
+							css: j,
+							children: e.valueLabel ?? e.value
+						})]
+					}), /* @__PURE__ */ p(o, {
+						variant: "ghost",
+						size: "sm",
+						disabled: l,
+						"aria-label": u.remove(e),
+						"data-ui": "filter-toolbar-remove",
+						"data-filter-id": e.id,
+						className: n?.remove?.className,
+						css: [M, n?.remove?.css],
+						onClick: (t) => d(e, t.currentTarget),
+						render: (e) => /* @__PURE__ */ p("button", {
+							...e,
+							type: "button",
+							disabled: l,
+							children: /* @__PURE__ */ p("span", {
+								"aria-hidden": "true",
+								children: "×"
+							})
+						})
+					})]
+				}, e.id))
+			}) : a(e) ? e : null
+		})
+	});
+}
+L.displayName = "FilterToolbar.ActiveFilters";
+function R({ children: e, onClick: t, disabled: n = !1, css: r, ...i }) {
+	let { value: a, disabled: s, messages: c, clear: l } = w("Clear");
+	if (!a.length) return null;
+	let u = s || n;
+	return /* @__PURE__ */ p(o, {
+		variant: "outline",
+		size: "sm",
+		...i,
+		disabled: u,
+		"data-ui": "filter-toolbar-clear",
+		css: [N, r],
+		onClick: (e) => {
+			t?.(e), e.defaultPrevented || l(e.currentTarget);
+		},
+		render: (e) => /* @__PURE__ */ p("button", {
+			...e,
+			type: "button",
+			disabled: u
+		}),
+		children: e === void 0 ? c.clear : e
+	});
+}
+R.displayName = "FilterToolbar.Clear";
+function z({ count: e, locale: n, formatCount: r = b, loading: i = !1, loadingLabel: a = "Loading results", unknownLabel: o = "Results unavailable", className: s, sx: c, ...l }) {
+	w("ResultCount");
+	let u = e !== null && Number.isFinite(e) && Number.isInteger(e) && e >= 0 ? r(e, new Intl.NumberFormat(n).format(e)) : o;
+	return /* @__PURE__ */ p(t, {
+		className: s,
+		styles: P,
+		sx: c,
+		children: (e) => /* @__PURE__ */ p("p", {
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			...l,
+			role: "status",
+			"aria-busy": i || l["aria-busy"],
+			"data-ui": "filter-toolbar-result-count",
+			className: e,
+			children: i ? a : u
+		})
+	});
+}
+z.displayName = "FilterToolbar.ResultCount";
+var B = Object.assign(F, {
+	Controls: I,
+	ActiveFilters: L,
+	Clear: R,
+	ResultCount: z
+});
+//#endregion
+export { B as t };

package/dist/filter-toolbar.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as FilterToolbar } from "./filter-toolbar-Cy5Hqur-.js";

package/dist/hold-to-confirm-DjB2EVjM.js

@@ -0,0 +1,294 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as o } from "./use-latest-callback-cj1OOQL6.js";
+import { t as s } from "./use-controlled-state-DpeVQZNR.js";
+import { t as c } from "./visually-hidden-BJdvqqvn.js";
+import { t as l } from "./renderable-DzcIj1Lo.js";
+import { t as u } from "./icon-wrapper-stN8sD7R.js";
+import { useEffect as d, useId as f, useRef as p, useState as m } from "react";
+import { vars as h } from "@jfrader/tokens/vars";
+import { Fragment as g, jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as ee } from "@floating-ui/react";
+//#region src/components/hold-to-confirm/hold-to-confirm.tsx
+var te = 1200, y = 24, ne = 1e3, b = 2 ** 31 - 1, x = "--hold-progress", re = t({
+	label: "hold-to-confirm",
+	position: "relative",
+	display: "inline-grid",
+	boxSizing: "border-box",
+	maxInlineSize: "100%",
+	overflow: "hidden",
+	padding: 0,
+	border: `1px solid ${h.color.borderControl}`,
+	borderRadius: h.radius.md,
+	backgroundColor: h.color.surface,
+	color: h.color.text,
+	fontFamily: h.font.sans,
+	fontWeight: h.fontWeight.medium,
+	lineHeight: h.lineHeight.base,
+	cursor: "pointer",
+	touchAction: "none",
+	userSelect: "none",
+	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { backgroundColor: h.color.surfaceHover },
+	"&:focus-visible": r,
+	"&:disabled": {
+		cursor: "not-allowed",
+		opacity: .55
+	},
+	"&[aria-disabled=\"true\"]": { cursor: "default" },
+	"&[data-state=\"holding\"] > [data-ui=\"hold-to-confirm-fill\"]": {
+		visibility: "visible",
+		transitionDuration: "0s"
+	},
+	"&[data-state=\"confirmed\"] > [data-ui=\"hold-to-confirm-fill\"]": {
+		visibility: "visible",
+		clipPath: "inset(0)"
+	},
+	[i]: {
+		borderColor: "ButtonText",
+		"&:focus-visible": { outlineColor: "Highlight" },
+		"&[data-state=\"holding\"]": { borderStyle: "double" }
+	}
+}), ie = {
+	sm: t({
+		minBlockSize: h.space[8],
+		fontSize: h.textSize.sm,
+		"--hold-padding": h.space[3]
+	}),
+	md: t({
+		minBlockSize: h.space[10],
+		fontSize: h.textSize.sm,
+		"--hold-padding": h.space[4]
+	}),
+	lg: t({
+		minBlockSize: h.space[12],
+		fontSize: h.textSize.md,
+		"--hold-padding": h.space[5]
+	})
+}, ae = {
+	accent: t({
+		"--hold-fill": h.color.accent,
+		"--hold-ink": h.color.accentContrast
+	}),
+	danger: t({
+		color: h.color.dangerText,
+		"--hold-fill": h.color.danger,
+		"--hold-ink": h.color.dangerContrast
+	}),
+	neutral: t({
+		"--hold-fill": h.color.text,
+		"--hold-ink": h.color.bg
+	})
+}, S = t({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: h.space[2],
+	paddingInline: "var(--hold-padding)",
+	paddingBlock: h.space[2],
+	overflowWrap: "anywhere"
+}), C = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), w = t({
+	animation: `${C} ${h.motion.duration.fast} ${h.motion.easeStandard}`,
+	[a]: { animation: "none" }
+}), oe = t({
+	position: "absolute",
+	inset: 0,
+	backgroundColor: "var(--hold-fill)",
+	color: "var(--hold-ink)",
+	pointerEvents: "none",
+	visibility: "hidden",
+	clipPath: "inset(0 calc(100% - var(--hold-progress, 0%)) 0 0)",
+	transitionProperty: "clip-path, visibility",
+	transitionDuration: h.motion.duration.base,
+	transitionTimingFunction: h.motion.easeStandard,
+	"&:dir(rtl)": { clipPath: "inset(0 0 0 calc(100% - var(--hold-progress, 0%)))" },
+	[a]: { transitionDuration: "0s" },
+	[i]: {
+		forcedColorAdjust: "none",
+		backgroundColor: "Highlight",
+		color: "HighlightText"
+	}
+}), se = t([c, { [i]: { "&[data-holding=\"true\"]": {
+	position: "static",
+	inlineSize: "auto",
+	blockSize: "auto",
+	overflow: "visible",
+	clip: "auto",
+	clipPath: "none",
+	whiteSpace: "normal",
+	marginInlineStart: h.space[2]
+} } }]);
+function T({ ref: e, label: t, confirmedLabel: r, confirmationAnnouncement: i, getHoldDescription: a, locale: h, duration: C = te, value: T, defaultValue: ce = !1, onValueChange: le, onConfirm: ue, onHoldChange: de, tone: fe = "accent", size: pe = "md", icon: me, confirmedIcon: he = "✓", disabled: E = !1, slotProps: D, className: ge, sx: _e, onPointerDown: ve, onPointerMove: ye, onPointerUp: O, onPointerCancel: k, onLostPointerCapture: A, onKeyDown: j, onKeyUp: M, onBlur: N, onClick: P, onContextMenu: be, "aria-describedby": F, ...I }) {
+	if (!Number.isFinite(C) || C <= 0) throw Error("HoldToConfirm: duration must be a finite positive number of milliseconds.");
+	let L = `${f()}-hint`, [R, xe] = s(T, ce, le), [z, B] = m(!1), [Se, V] = m(""), H = p(!1), U = p(null), Ce = ee([e]), W = o(de), we = o(ue), G = I["aria-disabled"] === !0 || I["aria-disabled"] === "true", K = (e = !0) => {
+		let t = U.current;
+		t && (U.current = null, t.stop(), t.button.style.setProperty(x, "0%"), B(!1), !t.completed && e && W(!1), "pointerId" in t.origin && t.button.hasPointerCapture(t.origin.pointerId) && t.button.releasePointerCapture(t.origin.pointerId));
+	}, q = o(K);
+	d(() => {
+		H.current && (H.current = !1, R && V(i)), R || V("");
+	}, [
+		R,
+		z,
+		i
+	]), d(() => {
+		q();
+	}, [
+		C,
+		E,
+		G,
+		q
+	]), d(() => {
+		R && U.current && !U.current.completed && q();
+	}, [R, q]), d(() => () => q(!1), [q]);
+	let J = E || R || G, Y = (e, t) => {
+		let n = e.ownerDocument, r = n.defaultView;
+		if (J || U.current || !r || n.hidden) return;
+		let i = r.performance.now(), a = 0, o = 0, s = {
+			origin: t,
+			button: e,
+			completed: !1,
+			stop: () => {}
+		}, c = () => q(), l = () => {
+			n.hidden && c();
+		}, u = (n) => {
+			"pointerId" in t && n.pointerId === t.pointerId && !e.contains(n.target) && c();
+		}, d = (n) => {
+			if (!("pointerId" in t) || t.pointerId !== n.pointerId) return;
+			let r = e.getBoundingClientRect();
+			(n.clientX < r.left - y || n.clientX > r.right + y || n.clientY < r.top - y || n.clientY > r.bottom + y) && c();
+		}, f = () => {
+			r.clearTimeout(a), r.cancelAnimationFrame(o);
+		};
+		s.stop = () => {
+			f(), n.removeEventListener("visibilitychange", l), n.removeEventListener("pointerup", u, !0), n.removeEventListener("pointercancel", u, !0), n.removeEventListener("pointermove", d), r.removeEventListener("blur", c);
+		};
+		let p = () => {
+			if (U.current !== s || s.completed) return;
+			if (n.hidden || !e.isConnected || e.disabled || e.getAttribute("aria-disabled") === "true") {
+				c();
+				return;
+			}
+			let t = C - (r.performance.now() - i);
+			t > 0 ? a = r.setTimeout(p, Math.min(t, b)) : (s.completed = !0, f(), e.style.setProperty(x, "0%"), H.current = !0, B(!1), W(!1), xe(!0), we());
+		}, m = () => {
+			U.current !== s || s.completed || (e.style.setProperty(x, `${Math.min(100, (r.performance.now() - i) / C * 100)}%`), o = r.requestAnimationFrame(m));
+		};
+		U.current = s, e.style.setProperty(x, "0%"), B(!0), V(""), n.addEventListener("visibilitychange", l), n.addEventListener("pointerup", u, !0), n.addEventListener("pointercancel", u, !0), n.addEventListener("pointermove", d), r.addEventListener("blur", c), a = r.setTimeout(p, Math.min(C, b)), o = r.requestAnimationFrame(m), W(!0);
+	}, X = (e) => {
+		let t = U.current?.origin;
+		t && "pointerId" in t && t.pointerId === e && K();
+	}, Z = R ? r : t, Q = R ? he : me, $ = /* @__PURE__ */ v(g, { children: [l(Q) && /* @__PURE__ */ _("span", {
+		"aria-hidden": "true",
+		className: D?.icon?.className,
+		css: [
+			u,
+			w,
+			D?.icon?.css
+		],
+		children: Q
+	}, `icon-${R}`), l(Z) && /* @__PURE__ */ _("span", {
+		className: D?.label?.className,
+		css: [w, D?.label?.css],
+		children: Z
+	}, `label-${R}`)] }), Te = new Intl.NumberFormat(h, {
+		style: "unit",
+		unit: "second",
+		unitDisplay: "long",
+		maximumFractionDigits: 3,
+		...C < 1 ? { maximumSignificantDigits: 3 } : void 0
+	}).format(C / ne);
+	return /* @__PURE__ */ v(g, { children: [
+		/* @__PURE__ */ _(n, {
+			className: ge,
+			styles: [
+				re,
+				ie[pe],
+				ae[fe]
+			],
+			sx: _e,
+			children: (e) => /* @__PURE__ */ v("button", {
+				...I,
+				ref: Ce,
+				className: e,
+				type: "button",
+				disabled: E,
+				"data-ui": "hold-to-confirm",
+				"data-state": R ? "confirmed" : z ? "holding" : "idle",
+				"aria-disabled": R ? !0 : I["aria-disabled"],
+				"aria-describedby": [F, L].filter(Boolean).join(" "),
+				onPointerDown: (e) => {
+					if (ve?.(e), !(e.defaultPrevented || !e.isPrimary || e.button !== 0 || J || U.current) && (e.preventDefault(), e.currentTarget.focus({ preventScroll: !0 }), Y(e.currentTarget, { pointerId: e.pointerId }), U.current)) try {
+						e.currentTarget.setPointerCapture(e.pointerId);
+					} catch {}
+				},
+				onPointerMove: (e) => {
+					ye?.(e);
+				},
+				onPointerUp: (e) => {
+					O?.(e), X(e.pointerId);
+				},
+				onPointerCancel: (e) => {
+					k?.(e), X(e.pointerId);
+				},
+				onLostPointerCapture: (e) => {
+					A?.(e), X(e.pointerId);
+				},
+				onKeyDown: (e) => {
+					j?.(e), e.key === "Escape" || e.key === "Tab" ? K() : (e.key === " " || e.key === "Enter") && (e.defaultPrevented || (e.preventDefault(), e.repeat || Y(e.currentTarget, { key: e.key })));
+				},
+				onKeyUp: (e) => {
+					M?.(e);
+					let t = U.current?.origin;
+					t && "key" in t && e.key === t.key && K(), (e.key === " " || e.key === "Enter") && e.preventDefault();
+				},
+				onBlur: (e) => {
+					N?.(e), K();
+				},
+				onClick: (e) => {
+					P?.(e), e.preventDefault();
+				},
+				onContextMenu: (e) => {
+					be?.(e), U.current && "pointerId" in U.current.origin && !U.current.completed && e.preventDefault();
+				},
+				children: [/* @__PURE__ */ _("span", {
+					className: D?.face?.className,
+					css: [S, D?.face?.css],
+					children: $
+				}), /* @__PURE__ */ _("span", {
+					"data-ui": "hold-to-confirm-fill",
+					"aria-hidden": "true",
+					className: [D?.face?.className, D?.fill?.className].filter(Boolean).join(" ") || void 0,
+					css: [
+						S,
+						D?.face?.css,
+						oe,
+						D?.fill?.css
+					],
+					children: $
+				})]
+			})
+		}),
+		/* @__PURE__ */ _("span", {
+			id: L,
+			"data-holding": z || void 0,
+			className: D?.hint?.className,
+			css: [se, D?.hint?.css],
+			children: a(Te)
+		}),
+		/* @__PURE__ */ _("span", {
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			className: D?.status?.className,
+			css: [c, D?.status?.css],
+			children: Se
+		})
+	] });
+}
+T.displayName = "HoldToConfirm";
+//#endregion
+export { T as t };

package/dist/hold-to-confirm.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as HoldToConfirm } from "./hold-to-confirm-DjB2EVjM.js";