@jfrader/ui 0.5.1 → 0.7.0

package/dist/button-group-B9wP2ddS.js

@@ -0,0 +1,611 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { n as a, r as o } from "./roving-focus-CYlo_Kf8.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as c } from "./button-C6OV0C7J.js";
+import { t as l } from "./overlay-layer-qEbpEtb8.js";
+import { o as u, s as d } from "./listbox-style-DNOxAulu.js";
+import { t as f } from "./overlay-portal-C9igMHnC.js";
+import { t as p } from "./use-overlay-floating-Bx2jBKAA.js";
+import { a as m, c as h, d as g, f as _, o as v, r as y, s as b, t as x, u as S } from "./menu-CVzpsyXn.js";
+import { n as C, r as w } from "./tooltip-IajLwdUb.js";
+import { createContext as T, useContext as E, useEffect as D, useLayoutEffect as O, useMemo as ee, useRef as te, useState as k } from "react";
+import { vars as A } from "@jfrader/tokens/vars";
+import { Fragment as j, jsx as M, jsxs as N } from "@emotion/react/jsx-runtime";
+import { MotionConfig as ne, animate as P, motion as F, useMotionValue as I, useReducedMotion as L } from "motion/react";
+import { useMergeRefs as R } from "@floating-ui/react";
+//#region src/components/button-group/button-group.tsx
+var z = T(null);
+function B(e) {
+	let t = E(z);
+	if (!t) throw Error(`ButtonGroup.${e} must be rendered inside <ButtonGroup>.`);
+	return t;
+}
+var V = "[data-ui=\"button-group\"]", H = {
+	ownerSelector: V,
+	itemSelector: "[data-button-group-action]:not(:disabled):not([aria-disabled=\"true\"])"
+}, U = {
+	type: "spring",
+	stiffness: 360,
+	damping: 36,
+	mass: 1
+}, re = 8, ie = t({
+	"--button-group-start-start-radius": A.radius.md,
+	"--button-group-end-start-radius": A.radius.md,
+	"--button-group-start-end-radius": A.radius.md,
+	"--button-group-end-end-radius": A.radius.md,
+	"--button-group-inline-start-width": "1px",
+	"--button-group-block-start-width": "1px",
+	label: "button-group",
+	display: "inline-flex",
+	position: "relative",
+	isolation: "isolate",
+	alignItems: "stretch",
+	inlineSize: "max-content",
+	maxInlineSize: "100%",
+	verticalAlign: "middle",
+	borderRadius: A.radius.md,
+	whiteSpace: "nowrap",
+	textAlign: "center",
+	overflowX: "auto",
+	overflowY: "hidden",
+	"&[data-compact]": { inlineSize: "100%" },
+	"&[data-orientation=\"vertical\"]": {
+		flexDirection: "column",
+		whiteSpace: "normal",
+		textAlign: "start"
+	}
+}), W = t({
+	label: "button-group-segment",
+	position: "relative",
+	flexShrink: 0,
+	blockSize: "auto",
+	paddingBlock: A.space[1],
+	borderColor: A.color.borderControl,
+	borderStartStartRadius: "var(--button-group-start-start-radius)",
+	borderEndStartRadius: "var(--button-group-end-start-radius)",
+	borderStartEndRadius: "var(--button-group-start-end-radius)",
+	borderEndEndRadius: "var(--button-group-end-end-radius)",
+	borderInlineStartWidth: "var(--button-group-inline-start-width)",
+	borderBlockStartWidth: "var(--button-group-block-start-width)",
+	whiteSpace: "inherit",
+	textAlign: "inherit",
+	"&:focus-visible": {
+		zIndex: 1,
+		outlineOffset: "-2px"
+	},
+	"&:where([data-orientation=\"horizontal\"] > [data-button-group-segment] ~ [data-button-group-segment])": {
+		"--button-group-start-start-radius": "0px",
+		"--button-group-end-start-radius": "0px",
+		"--button-group-inline-start-width": "0px"
+	},
+	"&:where([data-orientation=\"horizontal\"] > :has(~ [data-button-group-segment]))": {
+		"--button-group-start-end-radius": "0px",
+		"--button-group-end-end-radius": "0px"
+	},
+	"&:where([data-orientation=\"vertical\"] > [data-button-group-segment] ~ [data-button-group-segment])": {
+		"--button-group-start-start-radius": "0px",
+		"--button-group-start-end-radius": "0px",
+		"--button-group-block-start-width": "0px"
+	},
+	"&:where([data-orientation=\"vertical\"] > :has(~ [data-button-group-segment]))": {
+		"--button-group-end-start-radius": "0px",
+		"--button-group-end-end-radius": "0px"
+	},
+	[n]: { borderColor: "ButtonText" }
+}), G = {
+	sm: t({
+		minBlockSize: A.space[8],
+		minInlineSize: A.space[8]
+	}),
+	md: t({
+		minBlockSize: A.space[10],
+		minInlineSize: A.space[10]
+	}),
+	lg: t({
+		minBlockSize: A.space[12],
+		minInlineSize: A.space[12]
+	})
+}, K = t({ paddingInline: A.space[2] }), ae = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), oe = t({
+	display: "inline-grid",
+	"& > *": { gridArea: "1 / 1" },
+	"&[data-collapsed]": {
+		inlineSize: 0,
+		position: "absolute",
+		visibility: "hidden",
+		pointerEvents: "none"
+	},
+	"& > [data-reservation]": { visibility: "hidden" },
+	"& > [data-live]": { animation: `${ae} ${A.motion.duration.base} ${A.motion.easeStandard}` },
+	[r]: { "& > [data-live]": { animation: "none" } }
+}), se = t({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	border: `1px solid ${A.color.borderControl}`,
+	borderRadius: A.radius.md,
+	paddingInline: A.space[4],
+	fontFamily: A.font.sans,
+	fontSize: A.textSize.sm,
+	color: A.color.text,
+	backgroundColor: A.color.surface,
+	fontVariantNumeric: "tabular-nums"
+}), ce = t({
+	position: "absolute",
+	top: 0,
+	left: 0,
+	zIndex: -1,
+	pointerEvents: "none",
+	backgroundColor: A.color.surfaceHover,
+	"[data-ui=\"button-group\"]:has(> [data-button-group-action]:active) > &": { backgroundColor: A.color.surfaceRaised },
+	borderRadius: A.radius.md,
+	transitionProperty: "opacity",
+	transitionDuration: A.motion.duration.fast,
+	[r]: { transitionDuration: "0s" },
+	[n]: { display: "none" }
+}), le = t({
+	display: "inline-flex",
+	"& svg": {
+		inlineSize: "1em",
+		blockSize: "1em"
+	}
+}), ue = /* @__PURE__ */ M("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	children: /* @__PURE__ */ M("path", { d: "m4 6 4 4 4-4" })
+});
+function q({ children: e, reserveLabels: t, collapsed: n }) {
+	return !s(e) || e === "" ? e : /* @__PURE__ */ N("span", {
+		css: oe,
+		"data-button-group-labels": !0,
+		"data-collapsed": n || void 0,
+		"aria-hidden": n || void 0,
+		children: [[...new Set(t)].map((e) => /* @__PURE__ */ M("span", {
+			"data-reservation": !0,
+			"aria-hidden": !0,
+			children: e
+		}, `reserve-${e}`)), /* @__PURE__ */ M("span", {
+			"data-live": !0,
+			children: e
+		}, typeof e == "string" || typeof e == "number" ? `live-${e}` : void 0)]
+	});
+}
+function de({ root: e, target: t }) {
+	let n = L(), r = I(0), i = I(0), a = I(0), o = I(0), s = te(!1);
+	return O(() => {
+		if (!e || !t) {
+			s.current = !1;
+			return;
+		}
+		let c = [], l = (l = !1) => {
+			let u = e.getBoundingClientRect(), d = t.getBoundingClientRect(), f = u.width / e.offsetWidth || 1, p = u.height / e.offsetHeight || 1, m = [
+				r,
+				i,
+				a,
+				o
+			], h = [
+				(d.left - u.left) / f + e.scrollLeft - e.clientLeft,
+				(d.top - u.top) / p + e.scrollTop - e.clientTop,
+				d.width / f,
+				d.height / p
+			];
+			(l || !h.every((e, t) => Math.abs(e - (c[t] ?? NaN)) < .01)) && (c = h, m.forEach((e, t) => {
+				e.stop(), (l && s.current || e.isAnimating()) && !n ? P(e, h[t], U) : e.set(h[t]);
+			}), s.current = !0);
+		};
+		l(!0);
+		let u = new ResizeObserver(() => l());
+		u.observe(e), u.observe(t);
+		let d = () => l();
+		return e.addEventListener("scroll", d), () => {
+			u.disconnect(), e.removeEventListener("scroll", d), [
+				r,
+				i,
+				a,
+				o
+			].forEach((e) => e.stop());
+		};
+	}, [
+		e,
+		t,
+		n,
+		r,
+		i,
+		a,
+		o
+	]), /* @__PURE__ */ M(F.span, {
+		"aria-hidden": !0,
+		css: ce,
+		"data-button-group-highlight": !0,
+		style: {
+			x: r,
+			y: i,
+			width: a,
+			height: o,
+			opacity: +!!t
+		}
+	});
+}
+function J({ ref: e, variant: t = "outline", tone: n = "neutral", size: r = "md", orientation: s = "horizontal", collapseLabels: c = !0, disabled: l = !1, open: u, defaultOpen: d, onOpenChange: f, placement: p, children: m, className: h, sx: g, onKeyDown: _, onPointerOver: v, onPointerLeave: y, onPointerCancel: b, onFocus: S, onBlur: C, ...w }) {
+	let T = te(null), E = R([T, e]), [A, j] = k(!1), [P, F] = k(), [I, L] = k(), [B, U] = k(null);
+	O(() => {
+		let e = T.current;
+		if (!e) return;
+		if (F(getComputedStyle(e).direction === "rtl" ? "rtl" : "ltr"), !c || s === "vertical") {
+			j(!1);
+			return;
+		}
+		let t = () => {
+			let t = o(e, {
+				ownerSelector: V,
+				itemSelector: "[data-button-group-segment]"
+			}).reduce((t, n) => {
+				let r = n.querySelector("[data-button-group-labels][data-collapsed]");
+				return t + n.getBoundingClientRect().width / (e.getBoundingClientRect().width / e.offsetWidth || 1) + (r ? r.scrollWidth + parseFloat(getComputedStyle(n).columnGap || "0") : 0);
+			}, 0);
+			j((n) => n ? t > e.clientWidth - re : t > e.clientWidth + 1);
+		}, n = new ResizeObserver(t);
+		return n.observe(e), o(e, {
+			ownerSelector: V,
+			itemSelector: "[data-button-group-segment], [data-button-group-labels]"
+		}).forEach((e) => n.observe(e)), t(), () => n.disconnect();
+	}, [
+		c,
+		s,
+		m,
+		w.dir
+	]), D(() => {
+		(l || B && (!B.matches(H.itemSelector) || B.closest(V) !== T.current)) && U(null);
+	}, [
+		l,
+		m,
+		B
+	]);
+	let W = ee(() => ({
+		variant: t,
+		tone: t === "solid" ? "neutral" : n,
+		size: r,
+		disabled: l,
+		compact: A,
+		direction: P,
+		triggerLabelledBy: I,
+		setTriggerLabelledBy: L
+	}), [
+		t,
+		n,
+		r,
+		l,
+		A,
+		P,
+		I
+	]), G = (e) => {
+		let t = e instanceof Element ? e.closest(H.itemSelector) : null;
+		return t?.closest(V) === T.current ? t : null;
+	};
+	return /* @__PURE__ */ M(x, {
+		open: u,
+		defaultOpen: d,
+		onOpenChange: (e) => {
+			(!e || !l) && f?.(e);
+		},
+		placement: p ?? (s === "vertical" ? "bottom-start" : "bottom-end"),
+		children: /* @__PURE__ */ M(z.Provider, {
+			value: W,
+			children: /* @__PURE__ */ M(ne, {
+				reducedMotion: "user",
+				children: /* @__PURE__ */ M(i, {
+					className: h,
+					styles: ie,
+					sx: g,
+					children: (e) => /* @__PURE__ */ N("div", {
+						...w,
+						ref: E,
+						role: "group",
+						"data-ui": "button-group",
+						"data-orientation": s,
+						"data-compact": A || void 0,
+						className: e,
+						onKeyDown: (e) => {
+							_?.(e), !e.defaultPrevented && T.current && a(e, T.current, s, H);
+						},
+						onPointerOver: (e) => {
+							v?.(e), !e.defaultPrevented && !l && U(G(e.target));
+						},
+						onPointerLeave: (e) => {
+							y?.(e), e.defaultPrevented || U(G(T.current?.ownerDocument.activeElement ?? null));
+						},
+						onPointerCancel: (e) => {
+							b?.(e), e.defaultPrevented || U(null);
+						},
+						onFocus: (e) => {
+							S?.(e);
+							let t = G(e.target);
+							!e.defaultPrevented && t && (U(t), t.scrollIntoView({
+								block: "nearest",
+								inline: "nearest"
+							}));
+						},
+						onBlur: (e) => {
+							C?.(e), e.defaultPrevented || U(G(e.relatedTarget));
+						},
+						children: [/* @__PURE__ */ M(de, {
+							root: T.current,
+							target: B
+						}), m]
+					})
+				})
+			})
+		})
+	});
+}
+J.displayName = "ButtonGroup";
+function Y({ name: e, labelledBy: t, enabled: n, children: r }) {
+	let [i, a] = k(!1), [o, s] = k(), c = e ?? o, l = n && !!c, { refs: u, floatingStyles: d, context: m } = p({
+		open: l && i,
+		placement: "top",
+		onOpenChange: a
+	});
+	O(() => {
+		let e = u.domReference.current?.ownerDocument;
+		s(t?.split(/\s+/).map((t) => e?.getElementById(t)?.textContent ?? "").join(" ").trim() || void 0);
+	}, [u, t]), D(() => {
+		l || a(!1);
+	}, [l]);
+	let { getReferenceProps: h, getFloatingProps: g } = w(m, { enabled: l }), { tabIndex: _, ...v } = g();
+	return /* @__PURE__ */ N(j, { children: [r(h(), u.setReference), l && i && /* @__PURE__ */ M(f, { children: /* @__PURE__ */ M("div", {
+		...v,
+		ref: u.setFloating,
+		css: C,
+		style: d,
+		children: c
+	}) })] });
+}
+function X(e, t) {
+	let n = t.label ?? t["aria-label"] ?? (typeof t.children == "string" ? t.children : void 0);
+	return {
+		name: n,
+		collapsed: !!(t.iconOnly || e && s(t.startIcon) && t.startIcon !== "" && (n !== void 0 || t["aria-labelledby"] !== void 0))
+	};
+}
+function Z({ ref: e, variant: t, tone: n, size: r, disabled: i = !1, iconOnly: a = !1, label: o, reserveLabels: u, children: d, startIcon: f, endIcon: p, css: m, sx: h, ...g }) {
+	let _ = B("Item"), { collapsed: v, name: y } = X(_.compact, {
+		...g,
+		iconOnly: a,
+		label: o,
+		startIcon: f,
+		children: d
+	}), b = i || _.disabled, x = b || g["aria-disabled"] === !0 || g["aria-disabled"] === "true" || g.loading, S = r ?? _.size;
+	return /* @__PURE__ */ M(l, { children: /* @__PURE__ */ M(Y, {
+		name: y,
+		labelledBy: g["aria-labelledby"],
+		enabled: v && !x,
+		children: (r, i) => /* @__PURE__ */ M(c, {
+			...g,
+			ref: e,
+			variant: t ?? _.variant,
+			tone: n ?? _.tone,
+			size: S,
+			disabled: b,
+			startIcon: s(f) && f !== "" ? f : void 0,
+			endIcon: s(p) && p !== "" ? p : void 0,
+			"aria-label": g["aria-label"] ?? (v && g["aria-labelledby"] === void 0 ? y : void 0),
+			"data-ui": "button-group-item",
+			css: [
+				W,
+				G[S],
+				a && K,
+				m
+			],
+			sx: h,
+			render: (e) => /* @__PURE__ */ M(fe, {
+				props: e,
+				tooltipProps: r,
+				tooltipRef: i,
+				disabled: b
+			}),
+			children: /* @__PURE__ */ M(q, {
+				reserveLabels: u,
+				collapsed: v,
+				children: d
+			})
+		})
+	}) });
+}
+Z.displayName = "ButtonGroup.Item";
+function fe({ props: e, tooltipProps: t, tooltipRef: n, disabled: r }) {
+	let i = R([e.ref, n]), a = [e["aria-describedby"], t["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ M("button", {
+		...h(e, (e) => ({
+			...e,
+			...t
+		})),
+		ref: i,
+		type: e.type ?? "button",
+		disabled: r,
+		"aria-describedby": a,
+		"data-button-group-segment": !0,
+		"data-button-group-action": !0
+	});
+}
+function Q({ ref: e, href: t, disabled: n = !1, variant: r, tone: i, size: a, iconOnly: o = !1, label: u, startIcon: d, reserveLabels: f, children: p, className: m, css: h, sx: g, onClick: _, onAuxClick: v, onKeyDown: y, ...b }) {
+	let x = B("Link"), S = n || x.disabled || b["aria-disabled"] === !0 || b["aria-disabled"] === "true", C = a ?? x.size, { collapsed: w, name: T } = X(x.compact, {
+		...b,
+		iconOnly: o,
+		label: u,
+		startIcon: d,
+		children: p
+	});
+	return /* @__PURE__ */ M(l, { children: /* @__PURE__ */ M(Y, {
+		name: T,
+		labelledBy: b["aria-labelledby"],
+		enabled: w && !S,
+		children: (n, a) => /* @__PURE__ */ M(c, {
+			variant: r ?? x.variant,
+			tone: i ?? x.tone,
+			size: C,
+			startIcon: s(d) && d !== "" ? d : void 0,
+			css: [
+				W,
+				G[C],
+				o && K,
+				h
+			],
+			className: m,
+			sx: g,
+			"data-ui": "button-group-link",
+			render: ({ ref: r, type: i, ...o }) => /* @__PURE__ */ M(pe, {
+				tooltipProps: n,
+				tooltipRef: a,
+				...b,
+				...o,
+				ref: e,
+				href: S ? void 0 : t,
+				role: b.role ?? (S ? "link" : void 0),
+				"aria-busy": b["aria-busy"],
+				"aria-disabled": S || b["aria-disabled"],
+				"aria-label": b["aria-label"] ?? (w && b["aria-labelledby"] === void 0 ? T : void 0),
+				tabIndex: S ? -1 : b.tabIndex,
+				"data-button-group-segment": !0,
+				"data-button-group-action": !0,
+				onClick: (e) => {
+					S ? e.preventDefault() : _?.(e);
+				},
+				onAuxClick: (e) => {
+					S ? e.preventDefault() : v?.(e);
+				},
+				onKeyDown: (e) => {
+					S && e.key === "Enter" ? e.preventDefault() : y?.(e);
+				}
+			}),
+			children: /* @__PURE__ */ M(q, {
+				reserveLabels: f,
+				collapsed: w,
+				children: p
+			})
+		})
+	}) });
+}
+Q.displayName = "ButtonGroup.Link";
+function pe({ tooltipProps: e, tooltipRef: t, ref: n, ...r }) {
+	let i = R([n, t]), a = [r["aria-describedby"], e["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ M("a", {
+		...h(r, (t) => ({
+			...t,
+			...e
+		})),
+		ref: i,
+		"aria-describedby": a
+	});
+}
+function $({ className: e, sx: t, ...n }) {
+	let { size: r } = B("Label");
+	return /* @__PURE__ */ M(i, {
+		className: e,
+		styles: [
+			se,
+			W,
+			G[r]
+		],
+		sx: t,
+		children: (e) => /* @__PURE__ */ M("span", {
+			...n,
+			"data-ui": "button-group-label",
+			"data-button-group-segment": !0,
+			className: e
+		})
+	});
+}
+$.displayName = "ButtonGroup.Label";
+function me({ ref: e, variant: t, tone: n, size: r, disabled: i = !1, children: a = ue, startIcon: o, endIcon: l, css: u, sx: d, ...f }) {
+	let p = B("Trigger"), m = f["aria-labelledby"], { setTriggerLabelledBy: h } = p;
+	O(() => (h(m), () => h(void 0)), [m, h]);
+	let g = r ?? p.size, _ = i || p.disabled, v = f["aria-disabled"] === !0 || f["aria-disabled"] === "true";
+	return /* @__PURE__ */ M(c, {
+		...f,
+		ref: e,
+		variant: t ?? p.variant,
+		tone: n ?? p.tone,
+		size: g,
+		disabled: _,
+		startIcon: s(o) && o !== "" ? o : void 0,
+		endIcon: s(l) && l !== "" ? l : void 0,
+		"data-ui": "button-group-trigger",
+		css: [
+			W,
+			G[g],
+			u
+		],
+		sx: d,
+		render: ({ ref: e, "data-ui": t, ...n }) => /* @__PURE__ */ M(b, {
+			...n,
+			ref: e,
+			disabled: _,
+			onKeyDown: (e) => {
+				v ? e.preventDefault() : n.onKeyDown?.(e);
+			},
+			family: "ButtonGroup",
+			marker: t,
+			"data-button-group-segment": !0,
+			"data-button-group-action": !0
+		}),
+		children: s(a) && a !== "" && /* @__PURE__ */ M("span", {
+			css: le,
+			"aria-hidden": !0,
+			children: a
+		})
+	});
+}
+me.displayName = "ButtonGroup.Trigger";
+function he({ dir: e, "aria-labelledby": t, ...n }) {
+	let r = B("Content");
+	return /* @__PURE__ */ M(y, {
+		...n,
+		dir: e ?? r.direction,
+		"aria-labelledby": [t, n["aria-label"] === void 0 ? r.triggerLabelledBy : void 0].filter(Boolean).join(" ") || void 0,
+		family: "ButtonGroup",
+		marker: "button-group-content",
+		styles: [d, u]
+	});
+}
+he.displayName = "ButtonGroup.Content";
+function ge({ tone: e = "neutral", disabled: t = !1, onClick: n, onSelect: r, ...i }) {
+	let a = B("MenuItem");
+	return /* @__PURE__ */ M(m, {
+		...i,
+		disabled: t || a.disabled || i["aria-disabled"] === !0 || i["aria-disabled"] === "true",
+		family: "ButtonGroup",
+		part: "MenuItem",
+		marker: "button-group-menu-item",
+		styles: [S, g[e]],
+		onClick: (e) => {
+			n?.(e), e.defaultPrevented || r?.();
+		}
+	});
+}
+ge.displayName = "ButtonGroup.MenuItem";
+function _e(e) {
+	return B("Separator"), /* @__PURE__ */ M(v, {
+		...e,
+		marker: "button-group-separator",
+		styles: _
+	});
+}
+_e.displayName = "ButtonGroup.Separator";
+var ve = Object.assign(J, {
+	Item: Z,
+	Link: Q,
+	Label: $,
+	Trigger: me,
+	Content: he,
+	MenuItem: ge,
+	Separator: _e
+});
+//#endregion
+export { ve as t };

package/dist/button-group.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ButtonGroup } from "./button-group-B9wP2ddS.js";

package/dist/button.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Button } from "./button-NLY0h6EJ.js";
+export { t as Button } from "./button-C6OV0C7J.js";