@jfrader/ui 0.1.2 → 0.2.0

package/dist/switch-2hm2WnWt.js

@@ -1,136 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t } from "./media-D_eA_I-e.js";
-import { t as n } from "./renderable-DzcIj1Lo.js";
-import { i as r, n as i, r as a, t as o } from "./choice-control-ByFogYcT.js";
-import { forwardRef as s, useId as c } from "react";
-import { vars as l } from "@jfrader/tokens/vars";
-import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
-//#region src/components/switch/switch.tsx
-var f = {
-	sm: "36px",
-	md: "44px"
-}, p = e({
-	position: "relative",
-	display: "inline-block",
-	flexShrink: 0,
-	boxSizing: "border-box",
-	border: `1px solid ${l.color.borderControl}`,
-	borderRadius: l.radius.full,
-	backgroundColor: l.color.surfaceHover,
-	transitionProperty: "background-color, border-color",
-	transitionDuration: l.motion.duration.fast,
-	transitionTimingFunction: l.motion.easeStandard,
-	"&::after": {
-		content: "\"\"",
-		position: "absolute",
-		insetBlockStart: "2px",
-		insetInlineStart: "2px",
-		borderRadius: l.radius.full,
-		backgroundColor: l.color.text,
-		transitionProperty: "transform, background-color",
-		transitionDuration: l.motion.duration.fast,
-		transitionTimingFunction: l.motion.easeStandard
-	},
-	[t]: {
-		transitionDuration: "0s",
-		"&::after": { transitionDuration: "0s" }
-	}
-}), m = {
-	sm: e({
-		inlineSize: f.sm,
-		blockSize: "20px",
-		"&::after": {
-			inlineSize: "14px",
-			blockSize: "14px"
-		}
-	}),
-	md: e({
-		inlineSize: f.md,
-		blockSize: "24px",
-		"&::after": {
-			inlineSize: "18px",
-			blockSize: "18px"
-		}
-	})
-}, h = {
-	sm: e({
-		"input:checked + span::after": {
-			transform: "translateX(16px)",
-			backgroundColor: l.color.accentContrast
-		},
-		"&:dir(rtl) input:checked + span::after": { transform: "translateX(-16px)" }
-	}),
-	md: e({
-		"input:checked + span::after": {
-			transform: "translateX(20px)",
-			backgroundColor: l.color.accentContrast
-		},
-		"&:dir(rtl) input:checked + span::after": { transform: "translateX(-20px)" }
-	})
-}, g = {
-	sm: e({ fontSize: l.textSize.sm }),
-	md: e({ fontSize: l.textSize.md })
-}, _ = e({
-	fontSize: l.textSize.sm,
-	color: l.color.textMuted
-}), v = {
-	sm: e({ marginInlineStart: `calc(${f.sm} + ${l.space[2]})` }),
-	md: e({ marginInlineStart: `calc(${f.md} + ${l.space[2]})` })
-}, y = s(function({ label: e, description: t, size: s = "md", onChange: l, onCheckedChange: f, slotProps: y, className: b, dir: x, "aria-labelledby": S, "aria-describedby": C, ...w }, T) {
-	let E = c(), D = `${E}-label`, O = `${E}-description`, k = n(e), A = n(t), j = [S, k && D].filter(Boolean).join(" ") || void 0, M = [C, A && O].filter(Boolean).join(" ") || void 0, N = [b, y?.root?.className].filter(Boolean).join(" ") || void 0, P = (e) => {
-		l?.(e), f?.(e.currentTarget.checked);
-	};
-	return /* @__PURE__ */ d("label", {
-		"data-ui": "switch",
-		dir: x,
-		className: N,
-		css: [
-			a,
-			i,
-			h[s],
-			y?.root?.css
-		],
-		children: [/* @__PURE__ */ d("span", {
-			css: r,
-			children: [
-				/* @__PURE__ */ u("input", {
-					...w,
-					ref: T,
-					type: "checkbox",
-					role: "switch",
-					"aria-labelledby": j,
-					"aria-describedby": M,
-					onChange: P,
-					css: o
-				}),
-				/* @__PURE__ */ u("span", {
-					"aria-hidden": "true",
-					className: y?.control?.className,
-					css: [
-						p,
-						m[s],
-						y?.control?.css
-					]
-				}),
-				k && /* @__PURE__ */ u("span", {
-					id: D,
-					className: y?.label?.className,
-					css: [g[s], y?.label?.css],
-					children: e
-				})
-			]
-		}), A && /* @__PURE__ */ u("span", {
-			id: O,
-			className: y?.description?.className,
-			css: [
-				_,
-				v[s],
-				y?.description?.css
-			],
-			children: t
-		})]
-	});
-});
-//#endregion
-export { y as t };

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 };