@jfrader/ui 0.5.1 → 0.7.0

package/dist/drawer-DsASTiP-.js

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