@jfrader/ui 0.1.2 → 0.3.0

package/dist/tabs-GBppQabg.js

@@ -1,174 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t, t as n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-D_eA_I-e.js";
-import { n as i, r as a, t as o } from "./roving-focus-CYlo_Kf8.js";
-import { t as s } from "./use-controlled-state-CVXDa-qM.js";
-import { t as c } from "./part-id-D0zksy32.js";
-import { createContext as l, forwardRef 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 = l(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": { ...n },
-	[r]: { 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": { ...t },
-	"&[hidden]": { display: "none" }
-}), O = e({ paddingBlockStart: v.space[3] }), k = u(function({ value: e, defaultValue: t, onValueChange: n, orientation: r = "horizontal", activation: i = "auto", ...a }, o) {
-	let c = p(), [l, u] = s(e, t, n), [d, f] = _(null), m = h(() => ({
-		value: l,
-		setValue: u,
-		focused: d,
-		setFocused: f,
-		orientation: r,
-		activation: i,
-		baseId: c
-	}), [
-		l,
-		u,
-		d,
-		r,
-		i,
-		c
-	]);
-	return /* @__PURE__ */ y(b.Provider, {
-		value: m,
-		children: /* @__PURE__ */ y("div", {
-			...a,
-			ref: o,
-			"data-ui": "tabs-root",
-			"data-orientation": r,
-			css: C
-		})
-	});
-}), A = u(function({ onKeyDown: e, ...t }, n) {
-	let { orientation: r, value: s, focused: c, setFocused: l } = x("List"), u = g(null);
-	m(n, () => u.current, []), f(() => {
-		let e = u.current;
-		if (!e) return;
-		let t = a(e, S);
-		t.length !== 0 && (t.some((e) => e.tabIndex === 0) || l((o(t, s) ?? o(t, c) ?? t[0])?.dataset.value ?? null));
-	});
-	let d = (t) => {
-		e?.(t);
-		let n = u.current;
-		!t.defaultPrevented && n && i(t, n, r, S);
-	};
-	return /* @__PURE__ */ y("div", {
-		...t,
-		ref: u,
-		role: "tablist",
-		"aria-orientation": r,
-		"data-ui": "tabs-list",
-		"data-orientation": r,
-		"data-roving": c ?? "",
-		"data-selected": s ?? "",
-		onKeyDown: d,
-		css: w[r]
-	});
-}), j = u(function({ value: e, disabled: t, onClick: n, onFocus: r, ...i }, a) {
-	let { value: o, setValue: s, focused: l, setFocused: u, activation: d, baseId: f, orientation: p } = x("Tab"), m = o === e, h = !t && (l === null ? m : l === e), _ = g(!1), v = (t) => {
-		if (n?.(t), t.defaultPrevented) return;
-		let r = _.current;
-		_.current = !1, !(d === "auto" && r) && s(e);
-	}, b = (t) => {
-		r?.(t), !t.defaultPrevented && (_.current = !0, u(e), d === "auto" && s(e));
-	};
-	return /* @__PURE__ */ y("button", {
-		...i,
-		ref: a,
-		type: "button",
-		role: "tab",
-		id: c(f, "tab", e),
-		"data-ui": "tabs-tab",
-		"data-value": e,
-		"data-state": m ? "active" : "inactive",
-		"aria-selected": m,
-		"aria-controls": c(f, "panel", e),
-		tabIndex: h ? 0 : -1,
-		disabled: t,
-		onClick: v,
-		onFocus: b,
-		css: [T, E[p]]
-	});
-}), M = u(function({ value: e, tabIndex: t = 0, "aria-labelledby": n, ...r }, i) {
-	let { value: a, baseId: o, orientation: s } = x("Panel"), l = a === e, u = [n, c(o, "tab", e)].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ y("div", {
-		...r,
-		ref: i,
-		role: "tabpanel",
-		id: c(o, "panel", e),
-		"aria-labelledby": u,
-		tabIndex: t,
-		hidden: !l,
-		"data-ui": "tabs-panel",
-		"data-state": l ? "active" : "inactive",
-		css: [D, s === "horizontal" && O]
-	});
-}), N = Object.assign(k, {
-	List: A,
-	Tab: j,
-	Panel: M
-});
-//#endregion
-export { N as t };

package/dist/text-field-DDPqQu29.js

@@ -1,74 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-BzGw1Ch9.js";
-import { forwardRef as s } from "react";
-import { vars as c } from "@jfrader/tokens/vars";
-import { jsx as l, jsxs as u } from "@emotion/react/jsx-runtime";
-//#region src/components/text-field/text-field.tsx
-var d = {
-	sm: e({
-		blockSize: "32px",
-		paddingInline: c.space[3],
-		fontSize: c.textSize.sm
-	}),
-	md: e({
-		blockSize: "40px",
-		paddingInline: c.space[4],
-		fontSize: c.textSize.sm
-	}),
-	lg: e({
-		blockSize: "48px",
-		paddingInline: c.space[4],
-		fontSize: c.textSize.md
-	})
-}, f = s(function({ label: e, description: s, error: c, size: f = "md", onChange: p, onValueChange: m, slotProps: h, className: g, required: _, id: v, "aria-describedby": y, "aria-invalid": b, ...x }, S) {
-	let C = t({
-		id: v,
-		description: s,
-		error: c,
-		"aria-describedby": y,
-		"aria-invalid": b
-	}), w = (e) => {
-		p?.(e), m?.(e.currentTarget.value);
-	};
-	return /* @__PURE__ */ u(n, {
-		"data-ui": "text-field",
-		className: g,
-		part: h?.root,
-		children: [
-			/* @__PURE__ */ l(a, {
-				htmlFor: C.id,
-				required: _,
-				part: h?.label,
-				children: e
-			}),
-			/* @__PURE__ */ l("input", {
-				...x,
-				ref: S,
-				id: C.id,
-				required: _,
-				"aria-describedby": C.describedBy,
-				"aria-invalid": C.ariaInvalid,
-				onChange: w,
-				className: h?.control?.className,
-				css: [
-					i,
-					d[f],
-					h?.control?.css
-				]
-			}),
-			/* @__PURE__ */ l(o, {
-				id: C.descriptionId,
-				part: h?.description,
-				children: s
-			}),
-			/* @__PURE__ */ l(r, {
-				id: C.errorId,
-				part: h?.error,
-				children: c
-			})
-		]
-	});
-});
-//#endregion
-export { f as t };

package/dist/textarea-OP8_3IUR.js

@@ -1,84 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-BzGw1Ch9.js";
-import { forwardRef as s } from "react";
-import { vars as c } from "@jfrader/tokens/vars";
-import { jsx as l, jsxs as u } from "@emotion/react/jsx-runtime";
-//#region src/components/textarea/textarea.tsx
-var d = e({
-	paddingBlock: c.space[2],
-	lineHeight: c.lineHeight.base
-}), f = {
-	sm: e({
-		minBlockSize: "64px",
-		paddingInline: c.space[3],
-		fontSize: c.textSize.sm
-	}),
-	md: e({
-		minBlockSize: "80px",
-		paddingInline: c.space[4],
-		fontSize: c.textSize.sm
-	}),
-	lg: e({
-		minBlockSize: "96px",
-		paddingInline: c.space[4],
-		fontSize: c.textSize.md
-	})
-}, p = {
-	none: e({ resize: "none" }),
-	vertical: e({ resize: "vertical" })
-}, m = e({ fieldSizing: "content" }), h = s(function({ label: e, description: s, error: c, size: h = "md", resize: g = "vertical", autoResize: _ = !1, rows: v = 3, onChange: y, onValueChange: b, slotProps: x, className: S, required: C, id: w, "aria-describedby": T, "aria-invalid": E, ...D }, O) {
-	let k = t({
-		id: w,
-		description: s,
-		error: c,
-		"aria-describedby": T,
-		"aria-invalid": E
-	}), A = (e) => {
-		y?.(e), b?.(e.currentTarget.value);
-	};
-	return /* @__PURE__ */ u(n, {
-		"data-ui": "textarea",
-		className: S,
-		part: x?.root,
-		children: [
-			/* @__PURE__ */ l(a, {
-				htmlFor: k.id,
-				required: C,
-				part: x?.label,
-				children: e
-			}),
-			/* @__PURE__ */ l("textarea", {
-				...D,
-				ref: O,
-				id: k.id,
-				rows: v,
-				required: C,
-				"aria-describedby": k.describedBy,
-				"aria-invalid": k.ariaInvalid,
-				onChange: A,
-				className: x?.control?.className,
-				css: [
-					i,
-					d,
-					f[h],
-					p[g],
-					_ && m,
-					x?.control?.css
-				]
-			}),
-			/* @__PURE__ */ l(o, {
-				id: k.descriptionId,
-				part: x?.description,
-				children: s
-			}),
-			/* @__PURE__ */ l(r, {
-				id: k.errorId,
-				part: x?.error,
-				children: c
-			})
-		]
-	});
-});
-//#endregion
-export { h as t };

package/dist/theme-root-eLka0ZP1.js

@@ -1,21 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { forwardRef as t } from "react";
-import { vars as n } from "@jfrader/tokens/vars";
-import { jsx as r } from "@emotion/react/jsx-runtime";
-//#region src/components/theme-root/theme-root.tsx
-var i = e({
-	color: n.color.text,
-	colorScheme: "dark",
-	"&[data-theme=\"light\"]": { colorScheme: "light" }
-}), a = t(function({ theme: e, ...t }, n) {
-	return /* @__PURE__ */ r("div", {
-		"data-ui": "theme-root",
-		"data-theme": e ?? "dark",
-		...t,
-		ref: n,
-		css: i
-	});
-});
-//#endregion
-export { a as t };

package/dist/toggle-group-BxzJ-6Cp.js

@@ -1,151 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { t } from "./focus-ring-BK5W5_NY.js";
-import { n, t as r } from "./media-D_eA_I-e.js";
-import { n as i, r as a, t as o } from "./roving-focus-CYlo_Kf8.js";
-import { t as s } from "./use-controlled-state-CVXDa-qM.js";
-import { createContext as c, forwardRef as l, useContext as u, useEffect as d, useImperativeHandle as f, useMemo as p, useRef as m, useState as h } from "react";
-import { vars as g } from "@jfrader/tokens/vars";
-import { jsx as _ } from "@emotion/react/jsx-runtime";
-//#region src/components/toggle-group/toggle-group.tsx
-var v = c(null);
-function y(e) {
-	let t = u(v);
-	if (!t) throw Error(`ToggleGroup.${e} must be rendered inside <ToggleGroup>.`);
-	return t;
-}
-var b = [], x = (e, t) => {
-	if (Array.isArray(e)) {
-		if (t === "multiple") return e;
-		e = e[0] ?? "";
-	}
-	return e === void 0 || e === "" ? b : [e];
-}, S = {
-	itemSelector: "[data-ui=\"toggle-group-item\"]:not([disabled])",
-	ownerSelector: "[data-ui=\"toggle-group-root\"]"
-}, C = "2px", w = e({
-	display: "inline-flex",
-	gap: C,
-	padding: C,
-	border: `1px solid ${g.color.borderControl}`,
-	borderRadius: g.radius.md,
-	backgroundColor: g.color.surfaceInset
-}), T = {
-	horizontal: e({ flexDirection: "row" }),
-	vertical: e({
-		flexDirection: "column",
-		alignItems: "stretch"
-	})
-}, E = e({
-	appearance: "none",
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	gap: g.space[2],
-	minBlockSize: "32px",
-	boxSizing: "border-box",
-	border: "1px solid transparent",
-	borderRadius: g.radius.sm,
-	background: "transparent",
-	cursor: "pointer",
-	paddingBlock: g.space[1],
-	paddingInline: g.space[3],
-	font: "inherit",
-	fontSize: g.textSize.sm,
-	fontWeight: g.fontWeight.medium,
-	color: g.color.textMuted,
-	transitionProperty: "background-color, border-color, color",
-	transitionDuration: g.motion.duration.fast,
-	transitionTimingFunction: g.motion.easeStandard,
-	"&:hover:not(:disabled):not([aria-pressed=\"true\"])": {
-		backgroundColor: g.color.surfaceHover,
-		color: g.color.text
-	},
-	"&[aria-pressed=\"true\"]": {
-		backgroundColor: g.color.accentSoft,
-		borderColor: g.color.accent,
-		color: g.color.accentText
-	},
-	"&[aria-pressed=\"true\"]:hover:not(:disabled)": { backgroundColor: g.color.accentSoftHover },
-	"&:disabled": {
-		opacity: .55,
-		cursor: "not-allowed"
-	},
-	"&:focus-visible": { ...t },
-	[n]: { transitionDuration: "0s" },
-	[r]: { "&[aria-pressed=\"true\"]": {
-		backgroundColor: "SelectedItem",
-		borderColor: "SelectedItem",
-		color: "SelectedItemText"
-	} }
-}), D = l(function({ type: e = "single", value: t, defaultValue: n, onValueChange: r, orientation: c = "horizontal", disabled: l = !1, allowEmpty: u = !1, label: g, "aria-label": y, onKeyDown: b, ...C }, E) {
-	let [D, O] = s(t, n, r), [k, A] = h(null), j = m(null);
-	f(E, () => j.current, []);
-	let M = p(() => x(D, e), [D, e]), N = p(() => ({
-		pressed: M,
-		toggle: (t) => {
-			let n = M.includes(t);
-			e === "multiple" ? O(n ? M.filter((e) => e !== t) : [...M, t]) : n ? u && O("") : O(t);
-		},
-		focused: k,
-		setFocused: A,
-		disabled: l
-	}), [
-		M,
-		O,
-		e,
-		u,
-		k,
-		l
-	]);
-	d(() => {
-		let e = j.current;
-		if (!e) return;
-		let t = a(e, S);
-		if (t.length === 0 || t.some((e) => e.tabIndex === 0)) return;
-		let n = t.find((e) => e.getAttribute("aria-pressed") === "true");
-		A((n ?? o(t, k) ?? t[0])?.dataset.value ?? null);
-	});
-	let P = (e) => {
-		b?.(e);
-		let t = j.current;
-		!e.defaultPrevented && t && i(e, t, c, S);
-	};
-	return /* @__PURE__ */ _(v.Provider, {
-		value: N,
-		children: /* @__PURE__ */ _("div", {
-			...C,
-			ref: j,
-			role: "group",
-			"aria-label": g ?? y,
-			"aria-disabled": l || void 0,
-			"data-ui": "toggle-group-root",
-			"data-type": e,
-			"data-orientation": c,
-			onKeyDown: P,
-			css: [w, T[c]]
-		})
-	});
-}), O = l(function({ value: e, disabled: t, onClick: n, onFocus: r, ...i }, a) {
-	let { pressed: o, toggle: s, focused: c, setFocused: l, disabled: u } = y("Item"), d = u || t, f = o.includes(e), p = !d && (c === null ? o[0] === e : c === e), m = (t) => {
-		n?.(t), !t.defaultPrevented && s(e);
-	}, h = (t) => {
-		r?.(t), l(e);
-	};
-	return /* @__PURE__ */ _("button", {
-		...i,
-		ref: a,
-		type: "button",
-		"aria-pressed": f,
-		"data-ui": "toggle-group-item",
-		"data-value": e,
-		"data-state": f ? "on" : "off",
-		tabIndex: p ? 0 : -1,
-		disabled: d,
-		onClick: m,
-		onFocus: h,
-		css: E
-	});
-}), k = Object.assign(D, { Item: O });
-//#endregion
-export { k as t };

package/dist/tooltip-CVl8HS4S.js

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