@jfrader/ui 0.5.1 → 0.7.0

package/dist/drawer-CceaEhCr.js

@@ -0,0 +1,590 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { i as s, n as c, r as l, t as u } from "./surface-C69kwSuk.js";
+import { t as d } from "./trigger-style-CtOrdPk4.js";
+import { i as f, n as p, r as m, t as h } from "./use-native-dialog-FB0p7lkg.js";
+import { t as g } from "./presence-spring-4zwtUDQN.js";
+import { c as _, o as v, s as y, t as b } from "./theme-scope-DGWy4H0C.js";
+import { createContext as x, useCallback as S, useContext as C, useEffect as w, useId as T, useMemo as E, useRef as D, useState as O } from "react";
+import { vars as k } from "@jfrader/tokens/vars";
+import { jsx as A } from "@emotion/react/jsx-runtime";
+import { animate as j } from "motion/react";
+import { useMergeRefs as M } from "@floating-ui/react";
+//#region src/components/drawer/drawer.tsx
+var N = x(null), P = x(null);
+function F(e) {
+	let t = C(N);
+	if (!t) throw Error(`Drawer.${e} must be rendered inside <Drawer>.`);
+	return t;
+}
+var I = 1 / 3, ee = 500, L = .2, R = 100, te = {
+	type: "spring",
+	stiffness: 400,
+	damping: 40,
+	mass: 1
+}, z = [
+	"button",
+	"a[href]",
+	"input",
+	"select",
+	"textarea",
+	"label",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[data-ui~=\"drawer-title\"]",
+	"[data-ui~=\"drawer-description\"]"
+].join(", "), ne = "[aria-expanded=\"true\"][aria-haspopup]", B = {
+	sm: "22rem",
+	md: "30rem",
+	lg: "38rem"
+}, V = "32rem", H = k.space[3], U = "@media (max-width: 40rem)", W = k.space[6], G = k.space[5], K = {
+	top: "env(safe-area-inset-top, 0px)",
+	bottom: "env(safe-area-inset-bottom, 0px)"
+}, re = e({
+	...u,
+	position: "fixed",
+	inset: 0,
+	margin: 0,
+	inlineSize: "100%",
+	blockSize: "100%",
+	maxInlineSize: "none",
+	maxBlockSize: "none",
+	overflow: "clip",
+	"&::backdrop": { opacity: "var(--drawer-presence, 1)" },
+	"&[open]": { display: "flex" }
+}), ie = {
+	"inline-start": e({
+		flexDirection: "row",
+		justifyContent: "flex-start"
+	}),
+	"inline-end": e({
+		flexDirection: "row",
+		justifyContent: "flex-end"
+	}),
+	top: e({
+		flexDirection: "column",
+		justifyContent: "flex-start"
+	}),
+	bottom: e({
+		flexDirection: "column",
+		justifyContent: "flex-end"
+	})
+}, ae = e({
+	...c,
+	display: "flex",
+	flexDirection: "column",
+	minBlockSize: 0,
+	borderWidth: 0,
+	boxShadow: k.shadow.floating,
+	[n]: {
+		boxShadow: "none",
+		borderColor: "CanvasText"
+	}
+}), q = {
+	blockSize: "100%",
+	paddingBlockStart: K.top
+}, oe = {
+	"inline-start": e({
+		...q,
+		borderInlineEndWidth: "1px",
+		borderStartEndRadius: k.radius.lg,
+		borderEndEndRadius: k.radius.lg,
+		[n]: { borderInlineEndWidth: "2px" }
+	}),
+	"inline-end": e({
+		...q,
+		borderInlineStartWidth: "1px",
+		borderStartStartRadius: k.radius.lg,
+		borderEndStartRadius: k.radius.lg,
+		[n]: { borderInlineStartWidth: "2px" }
+	}),
+	top: e({
+		inlineSize: "100%",
+		maxBlockSize: `min(${V}, 100dvh)`,
+		paddingBlockStart: K.top,
+		borderBlockEndWidth: "1px",
+		borderEndStartRadius: k.radius.lg,
+		borderEndEndRadius: k.radius.lg,
+		[n]: { borderBlockEndWidth: "2px" }
+	}),
+	bottom: e({
+		inlineSize: "100%",
+		maxBlockSize: `min(${V}, 100dvh)`,
+		borderBlockStartWidth: "1px",
+		borderStartStartRadius: k.radius.lg,
+		borderStartEndRadius: k.radius.lg,
+		[n]: { borderBlockStartWidth: "2px" }
+	})
+}, se = Object.fromEntries(Object.entries(B).map(([t, n]) => [t, e({
+	inlineSize: `min(${n}, calc(100% - ${H}))`,
+	[U]: { inlineSize: `calc(100% - ${H})` }
+})])), J = {
+	paddingInline: W,
+	[U]: { paddingInline: G }
+}, ce = e({
+	...J,
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	alignItems: "start",
+	columnGap: k.space[4],
+	flexShrink: 0,
+	paddingBlock: W,
+	borderBlockEnd: `1px solid ${k.color.border}`,
+	"& > *": { gridColumn: 1 },
+	"& > [data-ui~=\"drawer-close\"]": {
+		gridColumn: 2,
+		gridRow: 1
+	},
+	[U]: { paddingBlock: G }
+}), le = e({
+	cursor: "grab",
+	touchAction: "none",
+	"&[data-dragging]": { cursor: "grabbing" },
+	[r]: {
+		cursor: "auto",
+		touchAction: "auto"
+	}
+}), Y = { "&:last-child": {
+	paddingBlockEnd: `calc(${W} + ${K.bottom})`,
+	[U]: { paddingBlockEnd: `calc(${G} + ${K.bottom})` }
+} }, ue = e({
+	...J,
+	flex: "1 1 auto",
+	minBlockSize: 0,
+	overflow: "auto",
+	overscrollBehavior: "contain",
+	paddingBlock: k.space[5],
+	fontSize: k.textSize.sm,
+	...Y
+}), de = e({
+	...J,
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "flex-end",
+	alignItems: "center",
+	gap: k.space[3],
+	flexShrink: 0,
+	paddingBlock: k.space[4],
+	borderBlockStart: `1px solid ${k.color.border}`,
+	...Y
+}), fe = e({
+	margin: 0,
+	fontSize: k.textSize.lg,
+	fontWeight: k.fontWeight.semibold,
+	lineHeight: k.lineHeight.tight
+}), pe = e({
+	margin: 0,
+	marginBlockStart: k.space[2],
+	fontSize: k.textSize.sm,
+	color: k.color.textMuted
+}), me = e({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: k.space[2],
+	boxSizing: "border-box",
+	minBlockSize: k.space[8],
+	minInlineSize: k.space[8],
+	border: "1px solid transparent",
+	borderRadius: k.radius.md,
+	backgroundColor: "transparent",
+	paddingBlock: k.space[1],
+	paddingInline: k.space[3],
+	font: "inherit",
+	fontSize: k.textSize.sm,
+	fontWeight: k.fontWeight.medium,
+	color: k.color.textMuted,
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: k.motion.duration.fast,
+	transitionTimingFunction: k.motion.easeStandard,
+	"&:hover:not(:disabled)": {
+		backgroundColor: k.color.surfaceHover,
+		color: k.color.text
+	},
+	"&:focus-visible": { ...t },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[r]: { transitionDuration: "0s" },
+	[n]: {
+		borderColor: "ButtonText",
+		"&:focus-visible": { outlineColor: "Highlight" }
+	}
+});
+function he(e) {
+	return o(e) && e !== "";
+}
+function ge({ open: e, defaultOpen: t = !1, onOpenChange: n, side: r = "inline-end", size: i = "md", draggable: o = !1, children: s }) {
+	let c = T(), [l = !1, u] = a(e, t, n), { setDialogElement: d, setOpen: p, requestClose: m, repairToken: h } = f(l, u), [g, _] = O(!1), [v, y] = O(!1), b = E(() => ({
+		open: l,
+		setOpen: p,
+		requestClose: m,
+		repairToken: h,
+		setDialogElement: d,
+		side: r,
+		size: i,
+		draggable: o,
+		titleId: `${c}-title`,
+		descriptionId: `${c}-description`,
+		hasTitle: g,
+		hasDescription: v,
+		setHasTitle: _,
+		setHasDescription: y
+	}), [
+		l,
+		p,
+		m,
+		h,
+		d,
+		r,
+		i,
+		o,
+		c,
+		g,
+		v
+	]);
+	return /* @__PURE__ */ A(N.Provider, {
+		value: b,
+		children: s
+	});
+}
+ge.displayName = "Drawer";
+function _e({ ref: e, onClick: t, className: n, sx: r, ...a }) {
+	let { open: o, setOpen: s } = F("Trigger"), c = (e) => {
+		t?.(e), e.defaultPrevented || s(!0);
+	};
+	return /* @__PURE__ */ A(i, {
+		className: n,
+		styles: d,
+		sx: r,
+		children: (t) => /* @__PURE__ */ A("button", {
+			type: "button",
+			...a,
+			ref: e,
+			"data-ui": "drawer-trigger",
+			"aria-haspopup": "dialog",
+			"aria-expanded": o,
+			onClick: c,
+			className: t
+		})
+	});
+}
+_e.displayName = "Drawer.Trigger";
+var ve = "(prefers-reduced-motion: reduce)", ye = {
+	"inline-start": "x",
+	"inline-end": "x",
+	top: "y",
+	bottom: "y"
+};
+function be(e, t) {
+	return e === "top" ? -1 : e === "bottom" ? 1 : e === "inline-end" === t ? -1 : 1;
+}
+function X(e, t) {
+	let n = ye[t], r = e.getBoundingClientRect();
+	return {
+		axis: n,
+		sign: be(t, getComputedStyle(e).direction === "rtl"),
+		extent: n === "x" ? r.width : r.height
+	};
+}
+function Z(e) {
+	return e.ownerDocument.defaultView?.matchMedia(ve).matches ?? !1;
+}
+function xe(e, t) {
+	let n = t * e.sign;
+	return t === 0 ? "" : e.axis === "x" ? `${n}px` : `0 ${n}px`;
+}
+function Se(e, t, n, r, i) {
+	let a = D(null), o = D(null), s = D(0), c = D(0), l = D(!1), u = S((e, t) => {
+		s.current = t, r.current && (r.current.style.translate = xe(e, t));
+		let i = 1 - Math.min(1, Math.max(0, t / Math.max(1, e.extent)));
+		i === 1 ? n.current?.style.removeProperty("--drawer-presence") : n.current?.style.setProperty("--drawer-presence", String(i));
+	}, [n, r]), d = S((e, t, n, r = 0) => (o.current?.stop(), o.current = j(s.current, t, {
+		...n,
+		velocity: r,
+		onUpdate: (t) => u(e, t)
+	}), o.current), [u]), f = S(() => {
+		o.current?.stop(), o.current = null, a.current?.header.removeAttribute("data-dragging"), a.current = null, c.current = 0, l.current = !1, s.current = 0, r.current && (r.current.style.translate = ""), n.current?.style.removeProperty("--drawer-presence");
+	}, [n, r]);
+	w(() => f, [f]);
+	let p = E(() => ({
+		enter: () => {
+			let e = r.current;
+			if (l.current = !1, c.current = 0, !e || Z(e)) {
+				f();
+				return;
+			}
+			let n = X(e, t);
+			s.current <= 0 && u(n, n.extent), d(n, 0, g);
+		},
+		exit: () => {
+			let e = r.current;
+			if (!e || Z(e)) return;
+			a.current?.header.removeAttribute("data-dragging"), a.current = null, l.current = !0;
+			let n = X(e, t), i = c.current;
+			return c.current = 0, d(n, n.extent, g, i).finished;
+		}
+	}), [
+		t,
+		r,
+		u,
+		d,
+		f
+	]);
+	return {
+		headerGesture: E(() => {
+			if (!e) return null;
+			let n = (e, t) => {
+				let n = a.current;
+				if (!n || n.pointerId !== e.pointerId) return;
+				a.current = null, n.header.removeAttribute("data-dragging");
+				let r = n.axis === "x" ? e.clientX : e.clientY, o = [...n.samples, {
+					position: r,
+					time: e.timeStamp
+				}].filter((t) => e.timeStamp - t.time <= R), s = o[0], u = o.at(-1), f = s && u ? (u.time - s.time) / 1e3 : 0, p = s && u && f > 0 ? (u.position - s.position) * n.sign / f : 0;
+				t && (n.offset >= n.extent * I || p >= ee) && (c.current = p, i()), n.offset !== 0 && !l.current && d(n, 0, te, p);
+			};
+			return {
+				onPointerDown: (e) => {
+					let n = r.current;
+					if (!e.isPrimary || e.button !== 0 || !n || l.current || e.target instanceof Element && e.target.closest(z) || Z(n)) return;
+					o.current?.stop();
+					let i = X(n, t), c = i.axis === "x" ? e.clientX : e.clientY, u = s.current;
+					a.current = {
+						...i,
+						pointerId: e.pointerId,
+						header: e.currentTarget,
+						start: c - u * i.sign,
+						offset: u,
+						samples: [{
+							position: c,
+							time: e.timeStamp
+						}]
+					}, e.currentTarget.setPointerCapture?.(e.pointerId), e.currentTarget.setAttribute("data-dragging", "");
+				},
+				onPointerMove: (e) => {
+					let t = a.current;
+					if (!t || t.pointerId !== e.pointerId) return;
+					let n = t.axis === "x" ? e.clientX : e.clientY, r = (n - t.start) * t.sign;
+					t.offset = r >= 0 ? r : r * L, t.samples = [...t.samples, {
+						position: n,
+						time: e.timeStamp
+					}].filter((t) => e.timeStamp - t.time <= R), u(t, t.offset);
+				},
+				onPointerUp: (e) => n(e, !0),
+				onPointerCancel: (e) => n(e, !1),
+				onLostPointerCapture: (e) => n(e, !1)
+			};
+		}, [
+			e,
+			t,
+			r,
+			i,
+			u,
+			d
+		]),
+		reset: f,
+		transition: p
+	};
+}
+function Ce({ ref: e, className: t, sx: n, ...r }) {
+	let { children: a, onCancel: o, onClick: s, onClose: c, onKeyDownCapture: l, onKeyUp: u, "aria-labelledby": d, "aria-describedby": f, withDescription: g = !0, ..._ } = h(r), v = F("Content"), { setOpen: y, titleId: b, descriptionId: x, hasTitle: C, hasDescription: w, side: T, draggable: O } = v, k = D(null), j = D(null), M = D(!1), N = S(() => {
+		p(k.current, y);
+	}, [y]), { headerGesture: I, reset: ee, transition: L } = Se(O, T, k, j, N), R = (e) => {
+		M.current ? (M.current = !1, e.preventDefault()) : o?.(e);
+	}, te = (e) => {
+		ee(), c?.(e);
+	}, z = m({
+		...v,
+		requestClose: N
+	}, {
+		onCancel: R,
+		onClick: s,
+		onClose: te
+	}, e, k, L), B = (e, t) => (n) => n.target === k.current ? e(n) : t?.(n), V = {
+		...z,
+		onCancel: B(z.onCancel, o),
+		onClose: B(z.onClose, c),
+		onKeyDownCapture: (e) => {
+			l?.(e), e.key === "Escape" && (M.current = !!k.current?.querySelector(ne));
+		},
+		onKeyUp: (e) => {
+			u?.(e), e.key === "Escape" && (M.current = !1);
+		}
+	}, H = E(() => ({
+		requestClose: N,
+		panelRef: j,
+		headerGesture: I
+	}), [N, I]), U = [d, C && b].filter(Boolean).join(" ") || void 0, W = [f, g && w && x].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ A(i, {
+		className: t,
+		styles: [re, ie[T]],
+		sx: n,
+		children: (e) => /* @__PURE__ */ A("dialog", {
+			..._,
+			...V,
+			"data-ui": "drawer",
+			"data-side": T,
+			"aria-modal": "true",
+			"aria-labelledby": U,
+			"aria-describedby": W,
+			className: e,
+			children: /* @__PURE__ */ A(P.Provider, {
+				value: H,
+				children: a
+			})
+		})
+	});
+}
+Ce.displayName = "Drawer.Content";
+function we({ ref: e, className: t, appearance: n = "contrast", style: r, sx: a, ...o }) {
+	let { side: c, size: u } = F("Panel"), d = C(P)?.panelRef, f = M([d, e]), p = c === "inline-start" || c === "inline-end", m = y(n), h = s(n), g = _(h, r);
+	return /* @__PURE__ */ A(b, {
+		theme: h,
+		appearance: m,
+		children: /* @__PURE__ */ A(i, {
+			className: t,
+			styles: [
+				ae,
+				oe[c],
+				p && se[u],
+				h && v
+			],
+			sx: a,
+			children: (e) => /* @__PURE__ */ A("div", {
+				...o,
+				ref: f,
+				"data-ui": "drawer-panel",
+				...l(n),
+				className: e,
+				style: g
+			})
+		})
+	});
+}
+we.displayName = "Drawer.Panel";
+function Te({ ref: e, className: t, sx: n, ...r }) {
+	F("Header");
+	let a = C(P)?.headerGesture ?? null, o = a && Object.fromEntries(Object.keys(a).map((e) => [e, (t) => {
+		r[e]?.(t), a[e]?.(t);
+	}]));
+	return /* @__PURE__ */ A(i, {
+		className: t,
+		styles: [ce, a && le],
+		sx: n,
+		children: (t) => /* @__PURE__ */ A("div", {
+			...r,
+			...o,
+			ref: e,
+			"data-ui": "drawer-header",
+			"data-draggable": a ? "" : void 0,
+			className: t
+		})
+	});
+}
+Te.displayName = "Drawer.Header";
+function Q({ ref: e, className: t, sx: n, ...r }) {
+	return F("Body"), /* @__PURE__ */ A(i, {
+		className: t,
+		styles: ue,
+		sx: n,
+		children: (t) => /* @__PURE__ */ A("div", {
+			...r,
+			ref: e,
+			"data-ui": "drawer-body",
+			className: t
+		})
+	});
+}
+Q.displayName = "Drawer.Body";
+function Ee({ ref: e, className: t, sx: n, ...r }) {
+	return F("Footer"), /* @__PURE__ */ A(i, {
+		className: t,
+		styles: de,
+		sx: n,
+		children: (t) => /* @__PURE__ */ A("div", {
+			...r,
+			ref: e,
+			"data-ui": "drawer-footer",
+			className: t
+		})
+	});
+}
+Ee.displayName = "Drawer.Footer";
+function De({ ref: e, className: t, sx: n, children: r, ...a }) {
+	let { titleId: o, setHasTitle: s } = F("Title"), c = he(r);
+	return w(() => {
+		if (c) return s(!0), () => s(!1);
+	}, [c, s]), c ? /* @__PURE__ */ A(i, {
+		className: t,
+		styles: fe,
+		sx: n,
+		children: (t) => /* @__PURE__ */ A("h2", {
+			...a,
+			ref: e,
+			id: o,
+			"data-ui": "drawer-title",
+			className: t,
+			children: r
+		})
+	}) : null;
+}
+De.displayName = "Drawer.Title";
+function Oe({ ref: e, className: t, sx: n, children: r, ...a }) {
+	let { descriptionId: o, setHasDescription: s } = F("Description"), c = he(r);
+	return w(() => {
+		if (c) return s(!0), () => s(!1);
+	}, [c, s]), c ? /* @__PURE__ */ A(i, {
+		className: t,
+		styles: pe,
+		sx: n,
+		children: (t) => /* @__PURE__ */ A("p", {
+			...a,
+			ref: e,
+			id: o,
+			"data-ui": "drawer-description",
+			className: t,
+			children: r
+		})
+	}) : null;
+}
+Oe.displayName = "Drawer.Description";
+function $({ ref: e, onClick: t, className: n, sx: r, ...a }) {
+	let { setOpen: o } = F("Close"), s = C(P)?.requestClose, c = (e) => {
+		t?.(e), !e.defaultPrevented && (s ? s() : o(!1));
+	};
+	return /* @__PURE__ */ A(i, {
+		className: n,
+		styles: me,
+		sx: r,
+		children: (t) => /* @__PURE__ */ A("button", {
+			type: "button",
+			...a,
+			ref: e,
+			"data-ui": "drawer-close",
+			onClick: c,
+			className: t
+		})
+	});
+}
+$.displayName = "Drawer.Close";
+var ke = Object.assign(ge, {
+	Trigger: _e,
+	Content: Ce,
+	Panel: we,
+	Header: Te,
+	Body: Q,
+	Footer: Ee,
+	Title: De,
+	Description: Oe,
+	Close: $
+});
+//#endregion
+export { ke as t };

package/dist/drawer.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Drawer } from "./drawer-DsASTiP-.js";
+export { t as Drawer } from "./drawer-CceaEhCr.js";