@jfrader/ui 0.5.0 → 0.6.0

package/dist/tabs-CAVJndX1.js

@@ -1,203 +0,0 @@
-'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n, t as r } from "./focus-ring-BK5W5_NY.js";
-import { r as i } from "./media-8yrN85VT.js";
-import { n as a, r as o, t as s } from "./roving-focus-CYlo_Kf8.js";
-import { t as c } from "./use-controlled-state-DpeVQZNR.js";
-import { t as l } from "./part-id-D0zksy32.js";
-import { createContext as u, useContext as d, useEffect as f, useId as p, useImperativeHandle as m, useMemo as h, useRef as g, useState as _ } from "react";
-import { vars as v } from "@jfrader/tokens/vars";
-import { jsx as y } from "@emotion/react/jsx-runtime";
-//#region src/components/tabs/tabs.tsx
-var b = u(null);
-function x(e) {
-	let t = d(b);
-	if (!t) throw Error(`Tabs.${e} must be rendered inside <Tabs>.`);
-	return t;
-}
-var S = {
-	itemSelector: "[role=\"tab\"]:not([disabled])",
-	ownerSelector: "[role=\"tablist\"]"
-}, C = e({ "&[data-orientation=\"vertical\"]": {
-	display: "flex",
-	alignItems: "flex-start",
-	gap: v.space[4]
-} }), w = {
-	horizontal: e({
-		display: "inline-flex",
-		gap: v.space[1],
-		borderBlockEnd: `1px solid ${v.color.border}`
-	}),
-	vertical: e({
-		display: "inline-flex",
-		flexDirection: "column",
-		alignItems: "stretch",
-		borderInlineEnd: `1px solid ${v.color.border}`
-	})
-}, T = e({
-	appearance: "none",
-	border: 0,
-	background: "transparent",
-	cursor: "pointer",
-	paddingBlock: v.space[2],
-	paddingInline: v.space[3],
-	font: "inherit",
-	fontSize: v.textSize.sm,
-	fontWeight: v.fontWeight.medium,
-	color: v.color.textMuted,
-	transitionProperty: "color, border-color",
-	transitionDuration: v.motion.duration.fast,
-	transitionTimingFunction: v.motion.easeStandard,
-	"&:hover:not(:disabled):not([aria-selected=\"true\"])": { color: v.color.text },
-	"&[aria-selected=\"true\"]": {
-		color: v.color.text,
-		borderColor: v.color.accent
-	},
-	"&:disabled": {
-		opacity: .55,
-		cursor: "not-allowed"
-	},
-	"&:focus-visible": { ...r },
-	[i]: { transitionDuration: "0s" }
-}), E = {
-	horizontal: e({
-		borderBlockEnd: "2px solid transparent",
-		marginBlockEnd: "-1px"
-	}),
-	vertical: e({
-		borderInlineEnd: "2px solid transparent",
-		marginInlineEnd: "-1px",
-		textAlign: "start"
-	})
-}, D = e({
-	color: v.color.text,
-	outline: "none",
-	"&:focus-visible": { ...n },
-	"&[hidden]": { display: "none" }
-}), O = e({ paddingBlockStart: v.space[3] });
-function k({ ref: e, value: n, defaultValue: r, onValueChange: i, orientation: a = "horizontal", activation: o = "auto", className: s, sx: l, ...u }) {
-	let d = p(), [f, m] = c(n, r, i), [g, v] = _(null), x = h(() => ({
-		value: f,
-		setValue: m,
-		focused: g,
-		setFocused: v,
-		orientation: a,
-		activation: o,
-		baseId: d
-	}), [
-		f,
-		m,
-		g,
-		a,
-		o,
-		d
-	]);
-	return /* @__PURE__ */ y(b.Provider, {
-		value: x,
-		children: /* @__PURE__ */ y(t, {
-			className: s,
-			styles: C,
-			sx: l,
-			children: (t) => /* @__PURE__ */ y("div", {
-				...u,
-				ref: e,
-				"data-ui": "tabs-root",
-				"data-orientation": a,
-				className: t
-			})
-		})
-	});
-}
-k.displayName = "Tabs";
-function A({ ref: e, onKeyDown: n, className: r, sx: i, ...c }) {
-	let { orientation: l, value: u, focused: d, setFocused: p } = x("List"), h = g(null);
-	m(e, () => h.current, []), f(() => {
-		let e = h.current;
-		if (!e) return;
-		let t = o(e, S);
-		t.length !== 0 && (t.some((e) => e.tabIndex === 0) || p((s(t, u) ?? s(t, d) ?? t[0])?.dataset.value ?? null));
-	});
-	let _ = (e) => {
-		n?.(e);
-		let t = h.current;
-		!e.defaultPrevented && t && a(e, t, l, S);
-	};
-	return /* @__PURE__ */ y(t, {
-		className: r,
-		styles: w[l],
-		sx: i,
-		children: (e) => /* @__PURE__ */ y("div", {
-			...c,
-			ref: h,
-			role: "tablist",
-			"aria-orientation": l,
-			"data-ui": "tabs-list",
-			"data-orientation": l,
-			"data-roving": d ?? "",
-			"data-selected": u ?? "",
-			onKeyDown: _,
-			className: e
-		})
-	});
-}
-A.displayName = "Tabs.List";
-function j({ ref: e, value: n, disabled: r, onClick: i, onFocus: a, className: o, sx: s, ...c }) {
-	let { value: u, setValue: d, focused: f, setFocused: p, activation: m, baseId: h, orientation: _ } = x("Tab"), v = u === n, b = !r && (f === null ? v : f === n), S = g(!1), C = (e) => {
-		if (i?.(e), e.defaultPrevented) return;
-		let t = S.current;
-		S.current = !1, !(m === "auto" && t) && d(n);
-	}, w = (e) => {
-		a?.(e), !e.defaultPrevented && (S.current = !0, p(n), m === "auto" && d(n));
-	};
-	return /* @__PURE__ */ y(t, {
-		className: o,
-		styles: [T, E[_]],
-		sx: s,
-		children: (t) => /* @__PURE__ */ y("button", {
-			...c,
-			ref: e,
-			type: "button",
-			role: "tab",
-			id: l(h, "tab", n),
-			"data-ui": "tabs-tab",
-			"data-value": n,
-			"data-state": v ? "active" : "inactive",
-			"aria-selected": v,
-			"aria-controls": l(h, "panel", n),
-			tabIndex: b ? 0 : -1,
-			disabled: r,
-			onClick: C,
-			onFocus: w,
-			className: t
-		})
-	});
-}
-j.displayName = "Tabs.Tab";
-function M({ ref: e, value: n, tabIndex: r = 0, "aria-labelledby": i, className: a, sx: o, ...s }) {
-	let { value: c, baseId: u, orientation: d } = x("Panel"), f = c === n, p = [i, l(u, "tab", n)].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ y(t, {
-		className: a,
-		styles: [D, d === "horizontal" && O],
-		sx: o,
-		children: (t) => /* @__PURE__ */ y("div", {
-			...s,
-			ref: e,
-			role: "tabpanel",
-			id: l(u, "panel", n),
-			"aria-labelledby": p,
-			tabIndex: r,
-			hidden: !f,
-			"data-ui": "tabs-panel",
-			"data-state": f ? "active" : "inactive",
-			className: t
-		})
-	});
-}
-M.displayName = "Tabs.Panel";
-var N = Object.assign(k, {
-	List: A,
-	Tab: j,
-	Panel: M
-});
-//#endregion
-export { N as t };

package/dist/theme-root-BbTBuLMQ.js

@@ -1,46 +0,0 @@
-'use client';
-import { a as e, n as t, t as n } from "./sx-Dx9JUKp5.js";
-import { n as r, r as i } from "./theme-scope-t7nAKc2c.js";
-import { useContext as a, useMemo as o } from "react";
-import { vars as s } from "@jfrader/tokens/vars";
-import { jsx as c } from "@emotion/react/jsx-runtime";
-//#region src/styling/theme.ts
-var l = s;
-//#endregion
-//#region src/components/theme-provider/theme-provider.tsx
-function u({ theme: e = l, children: n }) {
-	return /* @__PURE__ */ c(t, {
-		theme: e,
-		children: n
-	});
-}
-u.displayName = "ThemeProvider";
-function d() {
-	return e();
-}
-//#endregion
-//#region src/components/theme-root/theme-root.tsx
-function f({ ref: e, theme: t = "dark", portalContainer: s, className: l, sx: d, ...f }) {
-	let p = a(r), m = s === void 0 ? p?.portalContainer : s, h = o(() => ({
-		theme: t,
-		portalContainer: m
-	}), [t, m]);
-	return /* @__PURE__ */ c(r.Provider, {
-		value: h,
-		children: /* @__PURE__ */ c(u, { children: /* @__PURE__ */ c(n, {
-			className: l,
-			styles: i,
-			sx: d,
-			children: (n) => /* @__PURE__ */ c("div", {
-				"data-ui": "theme-root",
-				"data-theme": t,
-				...f,
-				ref: e,
-				className: n
-			})
-		}) })
-	});
-}
-f.displayName = "ThemeRoot";
-//#endregion
-export { l as i, u as n, d as r, f as t };

package/dist/theme-scope-t7nAKc2c.js

@@ -1,27 +0,0 @@
-'use client';
-import { r as e } from "./sx-Dx9JUKp5.js";
-import { createContext as t, useContext as n } from "react";
-import { vars as r } from "@jfrader/tokens/vars";
-import { jsx as i } from "@emotion/react/jsx-runtime";
-//#region src/styling/theme-scope.tsx
-var a = t(null);
-function o() {
-	return n(a);
-}
-var s = e({
-	color: r.color.text,
-	colorScheme: "dark",
-	"&[data-theme=\"light\"]": { colorScheme: "light" }
-}), c = e({ display: "contents" });
-function l({ children: e }) {
-	let t = o();
-	return t ? /* @__PURE__ */ i("div", {
-		"data-ui": "theme-boundary",
-		"data-theme": t.theme,
-		css: [s, c],
-		children: e
-	}) : e;
-}
-l.displayName = "ThemeBoundary";
-//#endregion
-export { o as i, a as n, s as r, l as t };

package/dist/tooltip-CkeiW9C1.js

@@ -1,113 +0,0 @@
-'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { t as n } from "./use-controlled-state-DpeVQZNR.js";
-import { t as r } from "./trigger-style-B1KVC8O1.js";
-import { t as i } from "./overlay-layer-SeUyyEPD.js";
-import { t as a } from "./overlay-portal-C4JZFq2M.js";
-import { t as o } from "./use-overlay-floating-DvJifLpF.js";
-import { createContext as s, useContext as c, useMemo as l } from "react";
-import { vars as u } from "@jfrader/tokens/vars";
-import { jsx as d } from "@emotion/react/jsx-runtime";
-import { useDismiss as f, useFocus as p, useHover as m, useInteractions as h, useMergeRefs as g, useRole as _ } from "@floating-ui/react";
-//#region src/components/tooltip/tooltip.tsx
-var v = 300, y = 100, b = s(null);
-function x(e) {
-	let t = c(b);
-	if (!t) throw Error(`Tooltip.${e} must be rendered inside <Tooltip>.`);
-	return t;
-}
-var S = e({
-	boxSizing: "border-box",
-	backgroundColor: u.color.bgSoft,
-	border: `1px solid ${u.color.border}`,
-	borderRadius: u.radius.sm,
-	boxShadow: u.shadow.raised,
-	padding: `${u.space[1]} ${u.space[2]}`,
-	maxInlineSize: "260px",
-	color: u.color.text,
-	fontFamily: u.font.sans,
-	fontSize: u.textSize.sm,
-	lineHeight: u.lineHeight.base
-});
-function C({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: i = "top", openDelay: a = v, closeDelay: s = y, children: c }) {
-	let [u = !1, g] = n(e, t, r), { refs: x, floatingStyles: S, context: C } = o({
-		open: u,
-		placement: i,
-		onOpenChange: g
-	}), w = m(C, {
-		delay: {
-			open: a,
-			close: s
-		},
-		move: !1
-	}), T = p(C), E = f(C, { escapeKey: !0 }), D = _(C, { role: "tooltip" }), { getReferenceProps: O, getFloatingProps: k } = h([
-		w,
-		T,
-		E,
-		D
-	]), A = l(() => ({
-		open: u,
-		refs: x,
-		floatingStyles: S,
-		getReferenceProps: O,
-		getFloatingProps: k
-	}), [
-		u,
-		x,
-		S,
-		O,
-		k
-	]);
-	return /* @__PURE__ */ d(b.Provider, {
-		value: A,
-		children: c
-	});
-}
-function w(e) {
-	return /* @__PURE__ */ d(i, { children: /* @__PURE__ */ d(C, { ...e }) });
-}
-w.displayName = "Tooltip";
-function T({ ref: e, "aria-describedby": n, className: i, sx: a, ...o }) {
-	let { refs: s, getReferenceProps: c } = x("Trigger"), l = g([s.setReference, e]), u = c(o), f = [n, u["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ d(t, {
-		className: i,
-		styles: r,
-		sx: a,
-		children: (e) => /* @__PURE__ */ d("button", {
-			type: "button",
-			...u,
-			ref: l,
-			"aria-describedby": f,
-			"data-ui": "tooltip-trigger",
-			className: e
-		})
-	});
-}
-T.displayName = "Tooltip.Trigger";
-function E({ ref: e, style: n, className: r, sx: i, ...o }) {
-	let { open: s, refs: c, floatingStyles: l, getFloatingProps: u } = x("Content"), f = g([c.setFloating, e]);
-	if (!s) return null;
-	let { tabIndex: p, ...m } = u(o);
-	return /* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(t, {
-		className: r,
-		styles: S,
-		sx: i,
-		children: (e) => /* @__PURE__ */ d("div", {
-			...m,
-			ref: f,
-			"data-ui": "tooltip",
-			style: {
-				...n,
-				...l
-			},
-			className: e
-		})
-	}) });
-}
-E.displayName = "Tooltip.Content";
-var D = Object.assign(w, {
-	Trigger: T,
-	Content: E
-});
-//#endregion
-export { D as t };

package/dist/use-native-dialog-DWpIUVO1.js

@@ -1,84 +0,0 @@
-'use client';
-import { useCallback as e, useEffect as t, useImperativeHandle as n, useRef as r, useState as i } from "react";
-//#region src/overlay/use-scroll-lock.ts
-var a = /* @__PURE__ */ new Map();
-function o(e, n) {
-	let i = r(n);
-	i.current = n, t(() => {
-		if (!e) return;
-		let t = i.current?.() ?? (typeof document > "u" ? void 0 : document);
-		if (!t) return;
-		let n = a.get(t);
-		return n ? n.count += 1 : (a.set(t, {
-			count: 1,
-			rootOverflow: t.documentElement.style.overflow,
-			bodyOverflow: t.body.style.overflow
-		}), t.documentElement.style.overflow = "hidden", t.body.style.overflow = "hidden"), () => {
-			let e = a.get(t);
-			e && (--e.count, !(e.count > 0) && (t.documentElement.style.overflow = e.rootOverflow, t.body.style.overflow = e.bodyOverflow, a.delete(t)));
-		};
-	}, [e]);
-}
-//#endregion
-//#region src/overlay/use-native-dialog.ts
-function s(e, t) {
-	e && e.open && typeof e.requestClose == "function" ? e.requestClose() : t(!1);
-}
-function c(t, n) {
-	let [a, o] = i(0), c = r(null), l = e((e) => {
-		c.current = e;
-	}, []), u = e((e) => {
-		let r = c.current?.open ?? !1;
-		(e !== t || r !== t) && (e === t ? o((e) => e + 1) : n(e));
-	}, [t, n]);
-	return {
-		dialogElementRef: c,
-		setDialogElement: l,
-		setOpen: u,
-		requestClose: e(() => {
-			s(c.current, u);
-		}, [u]),
-		repairToken: a
-	};
-}
-function l(e) {
-	let { open: t, ...n } = e;
-	return n;
-}
-function u({ open: a, setOpen: s, requestClose: c, repairToken: l, setDialogElement: u }, { onCancel: d, onClick: f, onClose: p }, m, h) {
-	let g = r(null), _ = h ?? g;
-	n(m, () => _.current, []);
-	let v = r(null), y = r(!1), [b, x] = i(!1), S = e((e) => {
-		_.current = e, u(e);
-	}, [u]);
-	return o(b, () => _.current?.ownerDocument), t(() => {
-		let e = _.current;
-		if (e) {
-			if (a && !e.open) {
-				v.current = e.ownerDocument.activeElement ?? null, y.current = !0;
-				try {
-					e.showModal();
-				} catch {}
-				x(e.open);
-			} else !a && e.open && (e.close(), y.current = !1, x(!1));
-		}
-	}, [a, l]), t(() => () => {
-		let e = v.current;
-		y.current && e && e.isConnected && typeof e.focus == "function" && e.focus();
-	}, []), {
-		ref: S,
-		onCancel: (e) => {
-			d?.(e);
-			let t = e.defaultPrevented;
-			e.preventDefault(), t || s(!1);
-		},
-		onClick: (e) => {
-			f?.(e), e.target === _.current && !e.defaultPrevented && c();
-		},
-		onClose: (e) => {
-			y.current = !1, p?.(e), x(!1), a && s(!1);
-		}
-	};
-}
-//#endregion
-export { c as i, s as n, u as r, l as t };