@jfrader/ui 0.4.0 → 0.5.1

package/dist/{divider-DYoJf0I_.js → divider-Cp7aNbhM.js}

@@ -1,13 +1,14 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { t as n } from "./renderable-DzcIj1Lo.js";
-import { useId as r } from "react";
-import { vars as i } from "@jfrader/tokens/vars";
-import { jsx as a } from "@emotion/react/jsx-runtime";
+import { n } from "./media-8yrN85VT.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { useId as i } from "react";
+import { vars as a } from "@jfrader/tokens/vars";
+import { jsx as o } from "@emotion/react/jsx-runtime";
 //#region src/components/divider/divider.tsx
-var o = "@media (forced-colors: active)", s = "1px", c = {
-	backgroundColor: i.color.border,
-	[o]: {
+var s = "1px", c = {
+	backgroundColor: a.color.border,
+	[n]: {
 		forcedColorAdjust: "none",
 		backgroundColor: "CanvasText"
 	}
@@ -28,11 +29,11 @@ var o = "@media (forced-colors: active)", s = "1px", c = {
 	display: "flex",
 	alignItems: "center",
 	alignSelf: "stretch",
-	gap: i.space[3],
-	fontFamily: i.font.sans,
-	fontSize: i.textSize.sm,
-	lineHeight: i.lineHeight.tight,
-	color: i.color.textMuted,
+	gap: a.space[3],
+	fontFamily: a.font.sans,
+	fontSize: a.textSize.sm,
+	lineHeight: a.lineHeight.tight,
+	color: a.color.textMuted,
 	"&::before, &::after": {
 		...c,
 		content: "\"\"",
@@ -40,13 +41,13 @@ var o = "@media (forced-colors: active)", s = "1px", c = {
 		blockSize: s
 	}
 });
-function f({ ref: e, orientation: i = "horizontal", label: o, "aria-labelledby": s, className: c, sx: f, ...p }) {
-	let m = r(), h = i === "vertical", g = !h && n(o);
-	return /* @__PURE__ */ a(t, {
+function f({ ref: e, orientation: n = "horizontal", label: a, "aria-labelledby": s, className: c, sx: f, ...p }) {
+	let m = i(), h = n === "vertical", g = !h && r(a);
+	return /* @__PURE__ */ o(t, {
 		className: c,
 		styles: h ? u : g ? d : l,
 		sx: f,
-		children: (t) => h ? /* @__PURE__ */ a("div", {
+		children: (t) => h ? /* @__PURE__ */ o("div", {
 			...p,
 			ref: e,
 			role: "separator",
@@ -55,7 +56,7 @@ function f({ ref: e, orientation: i = "horizontal", label: o, "aria-labelledby":
 			"data-ui": "divider",
 			"data-orientation": "vertical",
 			className: t
-		}) : g ? /* @__PURE__ */ a("div", {
+		}) : g ? /* @__PURE__ */ o("div", {
 			...p,
 			ref: e,
 			role: "separator",
@@ -64,12 +65,12 @@ function f({ ref: e, orientation: i = "horizontal", label: o, "aria-labelledby":
 			"data-ui": "divider",
 			"data-orientation": "horizontal",
 			className: t,
-			children: /* @__PURE__ */ a("span", {
+			children: /* @__PURE__ */ o("span", {
 				id: m,
 				"data-ui": "divider-label",
-				children: o
+				children: a
 			})
-		}) : /* @__PURE__ */ a("hr", {
+		}) : /* @__PURE__ */ o("hr", {
 			...p,
 			ref: e,
 			"aria-labelledby": s,

package/dist/divider.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Divider } from "./divider-DYoJf0I_.js";
+export { t as Divider } from "./divider-Cp7aNbhM.js";

package/dist/drawer-DsASTiP-.js

@@ -0,0 +1,553 @@
+'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 };

package/dist/drawer.js

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