@jfrader/ui 0.2.0 → 0.4.0

package/dist/accordion-CkOZ-tvs.js

@@ -1,178 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { t } from "./disclosure-caret-C5T3fcl6.js";
-import { t as n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-D_eA_I-e.js";
-import { n as i } from "./roving-focus-CYlo_Kf8.js";
-import { t as a } from "./use-controlled-state-CVXDa-qM.js";
-import { createContext as o, useContext as s, useId as c, useMemo as l } from "react";
-import { vars as u } from "@jfrader/tokens/vars";
-import { jsx as d } from "@emotion/react/jsx-runtime";
-//#region src/components/accordion/accordion.tsx
-var f = o(null), p = o(null);
-function m(e) {
-	let t = s(f);
-	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion>.`);
-	return t;
-}
-function h(e) {
-	let t = s(p);
-	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion.Item>.`);
-	return t;
-}
-var g = "", _ = {
-	itemSelector: "[data-ui=\"accordion-trigger\"]:not([disabled])",
-	ownerSelector: "[data-ui=\"accordion\"]"
-}, v = (e, t) => {
-	if (t === "multiple" && Array.isArray(e)) return e;
-	let n = Array.isArray(e) ? e[0] : e;
-	return n === void 0 || n === g ? [] : [n];
-}, y = e({
-	borderBlockEnd: `1px solid ${u.color.border}`,
-	"&:first-of-type": { borderBlockStart: `1px solid ${u.color.border}` }
-}), b = e({
-	margin: 0,
-	font: "inherit"
-}), x = e({
-	appearance: "none",
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "space-between",
-	gap: u.space[3],
-	inlineSize: "100%",
-	border: 0,
-	background: "transparent",
-	cursor: "pointer",
-	paddingBlock: u.space[3],
-	paddingInline: u.space[4],
-	font: "inherit",
-	fontSize: u.textSize.sm,
-	fontWeight: u.fontWeight.medium,
-	color: u.color.text,
-	textAlign: "start",
-	transitionProperty: "background-color",
-	transitionDuration: u.motion.duration.fast,
-	transitionTimingFunction: u.motion.easeStandard,
-	"&::after": { ...t },
-	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
-	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
-	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { backgroundColor: u.color.surfaceHover },
-	"&[aria-disabled=\"true\"]": { cursor: "default" },
-	"&:disabled": {
-		opacity: .55,
-		cursor: "not-allowed"
-	},
-	"&:focus-visible": { ...n },
-	[r]: {
-		transitionDuration: "0s",
-		"&::after": { transitionDuration: "0s" }
-	}
-}), S = e({
-	paddingBlock: u.space[3],
-	paddingInline: u.space[4],
-	color: u.color.textMuted,
-	lineHeight: u.lineHeight.relaxed,
-	"&[hidden]": { display: "none" }
-});
-function C({ ref: e, value: t, defaultValue: n, onValueChange: r, type: o = "single", collapsible: s = !0, onKeyDown: c, ...u }) {
-	let [p, m] = a(t, n, r), h = l(() => {
-		let e = v(p, o), t = s || e.length > 1;
-		return {
-			openValues: e,
-			toggle: (n) => {
-				let r = e.includes(n);
-				(!r || t) && m(o === "multiple" ? r ? e.filter((e) => e !== n) : [...e, n] : r ? g : n);
-			},
-			canCollapse: t
-		};
-	}, [
-		p,
-		m,
-		o,
-		s
-	]), y = (e) => {
-		c?.(e), !e.defaultPrevented && i(e, e.currentTarget, "vertical", _);
-	};
-	return /* @__PURE__ */ d(f.Provider, {
-		value: h,
-		children: /* @__PURE__ */ d("div", {
-			...u,
-			ref: e,
-			"data-ui": "accordion",
-			onKeyDown: y
-		})
-	});
-}
-C.displayName = "Accordion";
-function w({ ref: e, value: t, disabled: n = !1, ...r }) {
-	let { openValues: i } = m("Item"), a = c(), o = i.includes(t), s = l(() => ({
-		value: t,
-		disabled: n,
-		expanded: o,
-		triggerId: `${a}-trigger`,
-		panelId: `${a}-panel`
-	}), [
-		t,
-		n,
-		o,
-		a
-	]);
-	return /* @__PURE__ */ d(p.Provider, {
-		value: s,
-		children: /* @__PURE__ */ d("div", {
-			...r,
-			ref: e,
-			"data-ui": "accordion-item",
-			"data-state": o ? "open" : "closed",
-			"data-disabled": n ? "" : void 0,
-			css: y
-		})
-	});
-}
-w.displayName = "Accordion.Item";
-function T({ ref: e, onClick: t, disabled: n, ...r }) {
-	let { toggle: i, canCollapse: a } = m("Trigger"), { value: o, disabled: s, expanded: c, triggerId: l, panelId: u } = h("Trigger"), f = c && !a, p = (e) => {
-		t?.(e), !e.defaultPrevented && i(o);
-	};
-	return /* @__PURE__ */ d("h3", {
-		"data-ui": "accordion-heading",
-		css: b,
-		children: /* @__PURE__ */ d("button", {
-			...r,
-			ref: e,
-			type: "button",
-			id: l,
-			"data-ui": "accordion-trigger",
-			"data-state": c ? "open" : "closed",
-			"aria-expanded": c,
-			"aria-controls": u,
-			"aria-disabled": f || void 0,
-			disabled: s || n,
-			onClick: p,
-			css: x
-		})
-	});
-}
-T.displayName = "Accordion.Trigger";
-function E({ ref: e, "aria-labelledby": t, ...n }) {
-	let { expanded: r, triggerId: i, panelId: a } = h("Panel"), o = [t, i].filter(Boolean).join(" ");
-	return /* @__PURE__ */ d("div", {
-		...n,
-		ref: e,
-		role: "region",
-		id: a,
-		"aria-labelledby": o,
-		hidden: !r,
-		"data-ui": "accordion-panel",
-		"data-state": r ? "open" : "closed",
-		css: S
-	});
-}
-E.displayName = "Accordion.Panel";
-var D = Object.assign(C, {
-	Item: w,
-	Trigger: T,
-	Panel: E
-});
-//#endregion
-export { D as t };

package/dist/alert-Dsjx14UW.js

@@ -1,131 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t } from "./focus-ring-BK5W5_NY.js";
-import { n } from "./media-D_eA_I-e.js";
-import { t as r } from "./visually-hidden-DCWhf0Cb.js";
-import { t as i } from "./renderable-DzcIj1Lo.js";
-import { vars as a } from "@jfrader/tokens/vars";
-import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
-//#region src/components/alert/alert.tsx
-var c = {
-	info: "Information",
-	success: "Success",
-	warning: "Warning",
-	danger: "Error"
-}, l = e({
-	display: "grid",
-	gap: a.space[1],
-	boxSizing: "border-box",
-	backgroundColor: a.color.surfaceRaised,
-	border: `1px solid ${a.color.border}`,
-	borderInlineStartWidth: "3px",
-	borderInlineStartStyle: "solid",
-	borderRadius: a.radius.md,
-	paddingBlock: a.space[3],
-	paddingInline: a.space[4],
-	fontFamily: a.font.sans,
-	lineHeight: a.lineHeight.base
-}), u = e({
-	gridTemplateColumns: "minmax(0, 1fr) auto",
-	columnGap: a.space[3]
-}), d = e({
-	display: "grid",
-	gap: a.space[1],
-	minInlineSize: 0,
-	gridColumn: 1,
-	gridRow: 1
-}), f = {
-	info: e({ borderInlineStartColor: a.color.info }),
-	success: e({ borderInlineStartColor: a.color.success }),
-	warning: e({ borderInlineStartColor: a.color.warning }),
-	danger: e({ borderInlineStartColor: a.color.dangerText })
-}, p = e({
-	gridColumn: 1,
-	fontSize: a.textSize.sm,
-	fontWeight: a.fontWeight.semibold,
-	color: a.color.text
-}), m = e({
-	gridColumn: 1,
-	fontSize: a.textSize.sm,
-	color: a.color.textMuted
-}), h = e({
-	gridColumn: 2,
-	gridRow: 1,
-	alignSelf: "start",
-	appearance: "none",
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	minInlineSize: "24px",
-	minBlockSize: "24px",
-	margin: 0,
-	padding: 0,
-	border: "1px solid transparent",
-	borderRadius: a.radius.sm,
-	backgroundColor: "transparent",
-	fontFamily: "inherit",
-	fontSize: a.textSize.md,
-	lineHeight: 1,
-	color: a.color.textMuted,
-	cursor: "pointer",
-	transitionProperty: "background-color, color",
-	transitionDuration: a.motion.duration.fast,
-	transitionTimingFunction: a.motion.easeStandard,
-	"&:hover": {
-		backgroundColor: a.color.surfaceHover,
-		color: a.color.text
-	},
-	"&:focus-visible": { ...t },
-	[n]: { transitionDuration: "0s" }
-});
-function g({ ref: e, tone: t = "info", toneLabel: n = c[t], title: a, children: g, onDismiss: _, dismissLabel: v = "Dismiss", slotProps: y, className: b, ...x }) {
-	let S = _ !== void 0;
-	return /* @__PURE__ */ s("div", {
-		...x,
-		ref: e,
-		"data-ui": "alert",
-		"data-tone": t,
-		className: [b, y?.root?.className].filter(Boolean).join(" ") || void 0,
-		css: [
-			l,
-			f[t],
-			S && u,
-			y?.root?.css
-		],
-		children: [/* @__PURE__ */ s("div", {
-			role: t === "danger" ? "alert" : "status",
-			"aria-atomic": "true",
-			css: d,
-			children: [
-				/* @__PURE__ */ o("span", {
-					css: r,
-					children: n
-				}),
-				i(a) && /* @__PURE__ */ o("div", {
-					className: y?.title?.className,
-					css: [p, y?.title?.css],
-					children: a
-				}),
-				i(g) && /* @__PURE__ */ o("div", {
-					className: y?.body?.className,
-					css: [m, y?.body?.css],
-					children: g
-				})
-			]
-		}), S && /* @__PURE__ */ o("button", {
-			type: "button",
-			"data-ui": "alert-dismiss",
-			"aria-label": v,
-			onClick: () => _?.(),
-			className: y?.dismiss?.className,
-			css: [h, y?.dismiss?.css],
-			children: /* @__PURE__ */ o("span", {
-				"aria-hidden": !0,
-				children: "×"
-			})
-		})]
-	});
-}
-g.displayName = "Alert";
-//#endregion
-export { g as t };

package/dist/avatar-BRGKkoSr.js

@@ -1,127 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { useState as t } from "react";
-import { vars as n } from "@jfrader/tokens/vars";
-import { jsx as r, jsxs as i } from "@emotion/react/jsx-runtime";
-//#region src/components/avatar/avatar.tsx
-var a = 2, o = new Intl.Segmenter(void 0, { granularity: "grapheme" });
-function s(e) {
-	let t = Array.from(o.segment(e), ({ segment: e }) => e), n = t[0] ?? "";
-	if (!/\p{Extended_Pictographic}/u.test(n)) return n;
-	let r = "";
-	for (let e of t) {
-		if (!/\p{Extended_Pictographic}/u.test(e)) break;
-		r += e;
-	}
-	return r;
-}
-function c(e) {
-	return e.trim().split(/\s+/).filter(Boolean).slice(0, a).map(s).join("").toLocaleUpperCase();
-}
-var l = e({
-	position: "relative",
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	flexShrink: 0,
-	boxSizing: "border-box",
-	borderRadius: n.radius.full,
-	backgroundColor: n.color.surfaceHover,
-	color: n.color.text,
-	fontWeight: n.fontWeight.medium,
-	lineHeight: 1,
-	userSelect: "none",
-	verticalAlign: "middle"
-}), u = {
-	sm: e({
-		inlineSize: n.space[6],
-		blockSize: n.space[6],
-		fontSize: n.textSize.xs
-	}),
-	md: e({
-		inlineSize: n.space[8],
-		blockSize: n.space[8],
-		fontSize: n.textSize.sm
-	}),
-	lg: e({
-		inlineSize: n.space[10],
-		blockSize: n.space[10],
-		fontSize: n.textSize.md
-	})
-}, d = e({
-	display: "block",
-	inlineSize: "100%",
-	blockSize: "100%",
-	borderRadius: n.radius.full,
-	objectFit: "cover"
-}), f = e({
-	position: "absolute",
-	insetBlockEnd: 0,
-	insetInlineEnd: 0,
-	inlineSize: "25%",
-	blockSize: "25%",
-	"&::before": {
-		content: "\"\"",
-		position: "absolute",
-		insetBlockStart: 0,
-		insetInlineStart: 0,
-		inlineSize: "100%",
-		blockSize: "100%",
-		boxSizing: "border-box",
-		borderRadius: n.radius.full,
-		boxShadow: `0 0 0 2px ${n.color.bg}`
-	}
-}), p = {
-	online: e({ "&::before": { backgroundColor: n.color.success } }),
-	away: e({ "&::before": {
-		border: `2px solid ${n.color.warning}`,
-		backgroundColor: "transparent"
-	} }),
-	busy: e({ "&::before": {
-		backgroundColor: n.color.danger,
-		blockSize: "30%",
-		insetBlockStart: "35%"
-	} }),
-	offline: e({ "&::before": {
-		backgroundColor: n.color.textSubtle,
-		inlineSize: "60%",
-		blockSize: "60%",
-		insetBlockStart: "20%",
-		insetInlineStart: "20%"
-	} })
-};
-function m({ ref: e, name: n, src: a, size: o = "md", status: s, statusLabel: m, slotProps: h, ...g }) {
-	let [_, v] = t(), y = a !== void 0 && a !== "" && a !== _, b = s === void 0 ? n : `${n}, ${m ?? s}`;
-	return /* @__PURE__ */ i("span", {
-		...g,
-		ref: e,
-		"data-ui": "avatar",
-		role: "img",
-		"aria-label": b,
-		css: [l, u[o]],
-		children: [y ? /* @__PURE__ */ r("img", {
-			src: a,
-			alt: "",
-			onError: () => v(a),
-			className: h?.image?.className,
-			css: [d, h?.image?.css]
-		}) : /* @__PURE__ */ r("span", {
-			"aria-hidden": "true",
-			className: h?.fallback?.className,
-			css: h?.fallback?.css,
-			children: c(n)
-		}), s !== void 0 && /* @__PURE__ */ r("span", {
-			"aria-hidden": "true",
-			"data-status": s,
-			className: h?.status?.className,
-			css: [
-				f,
-				p[s],
-				h?.status?.css
-			]
-		})]
-	});
-}
-m.displayName = "Avatar";
-//#endregion
-export { m as t };

package/dist/badge-DLxUMsCx.js

@@ -1,104 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { vars as t } from "@jfrader/tokens/vars";
-import { jsx as n, jsxs as r } from "@emotion/react/jsx-runtime";
-//#region src/components/badge/badge.tsx
-var i = 99, a = e({
-	position: "relative",
-	display: "inline-flex",
-	flexShrink: 0,
-	verticalAlign: "middle"
-}), o = e({
-	position: "absolute",
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "center",
-	boxSizing: "border-box",
-	boxShadow: `0 0 0 2px ${t.color.bg}`,
-	fontWeight: t.fontWeight.medium,
-	lineHeight: 1,
-	whiteSpace: "nowrap",
-	pointerEvents: "none"
-}), s = {
-	standard: e({
-		blockSize: t.space[5],
-		minInlineSize: t.space[5],
-		paddingInline: t.space[1],
-		fontSize: t.textSize.xs
-	}),
-	dot: e({
-		blockSize: t.space[2],
-		inlineSize: t.space[2],
-		borderRadius: t.radius.full
-	})
-}, c = {
-	rectangular: e({ borderRadius: t.radius.sm }),
-	circular: e({ borderRadius: t.radius.full })
-}, l = {
-	"top-start": e({
-		insetBlockStart: 0,
-		insetInlineStart: 0,
-		transform: "translate(-50%, -50%)",
-		"&:dir(rtl)": { transform: "translate(50%, -50%)" }
-	}),
-	"top-end": e({
-		insetBlockStart: 0,
-		insetInlineEnd: 0,
-		transform: "translate(50%, -50%)",
-		"&:dir(rtl)": { transform: "translate(-50%, -50%)" }
-	}),
-	"bottom-start": e({
-		insetBlockEnd: 0,
-		insetInlineStart: 0,
-		transform: "translate(-50%, 50%)",
-		"&:dir(rtl)": { transform: "translate(50%, 50%)" }
-	}),
-	"bottom-end": e({
-		insetBlockEnd: 0,
-		insetInlineEnd: 0,
-		transform: "translate(50%, 50%)",
-		"&:dir(rtl)": { transform: "translate(-50%, 50%)" }
-	})
-}, u = {
-	accent: e({
-		backgroundColor: t.color.accent,
-		color: t.color.accentContrast
-	}),
-	danger: e({
-		backgroundColor: t.color.danger,
-		color: t.color.dangerContrast
-	}),
-	neutral: e({
-		backgroundColor: t.color.textMuted,
-		color: t.color.bg
-	})
-};
-function d({ ref: e, children: t, badgeContent: d, max: f = i, showZero: p = !1, invisible: m = !1, variant: h = "standard", tone: g = "accent", anchor: _, overlap: v = "rectangular", slotProps: y, className: b, ...x }) {
-	let S = h === "dot", C = m || h !== "dot" && (d == null || d === !1 || d === 0 && !p), w = typeof d == "number" && d > f ? `${f}+` : d, T = `${_?.vertical ?? "top"}-${_?.horizontal ?? "end"}`, E = [b, y?.root?.className].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ r("span", {
-		...x,
-		ref: e,
-		"data-ui": "badge",
-		className: E,
-		css: [a, y?.root?.css],
-		children: [t, !C && /* @__PURE__ */ n("span", {
-			"data-ui": "badge-marker",
-			"data-variant": h,
-			"data-tone": g,
-			"aria-hidden": S ? "true" : void 0,
-			className: y?.badge?.className,
-			css: [
-				o,
-				s[h],
-				!S && c[v],
-				l[T],
-				u[g],
-				y?.badge?.css
-			],
-			children: S ? null : w
-		})]
-	});
-}
-d.displayName = "Badge";
-//#endregion
-export { d as t };

package/dist/breadcrumbs-694hF_hm.js

@@ -1,131 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t } from "./focus-ring-BK5W5_NY.js";
-import { n } from "./media-D_eA_I-e.js";
-import { createContext as r, useCallback as i, useContext as a, useId as o, useImperativeHandle as s, useLayoutEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import { vars as f } from "@jfrader/tokens/vars";
-import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
-//#region src/components/breadcrumbs/breadcrumbs.tsx
-var h = r(null);
-function g(e) {
-	let t = a(h);
-	if (!t) throw Error(`Breadcrumbs.${e} must be rendered inside <Breadcrumbs>.`);
-	return t;
-}
-var _ = ([, e], [, t]) => e.node.compareDocumentPosition(t.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1, v = e({
-	display: "flex",
-	flexWrap: "wrap",
-	alignItems: "center",
-	gap: f.space[2],
-	margin: 0,
-	padding: 0,
-	listStyle: "none",
-	fontFamily: f.font.sans,
-	fontSize: f.textSize.sm,
-	lineHeight: f.lineHeight.tight
-}), y = e({
-	display: "inline-flex",
-	alignItems: "center",
-	gap: f.space[2],
-	color: f.color.textMuted,
-	"&:first-of-type > [data-ui=\"breadcrumbs-separator\"]": { display: "none" }
-}), b = e({ display: "inline-flex" }), x = e({
-	display: "inline-flex",
-	alignItems: "center",
-	gap: f.space[1],
-	minBlockSize: "24px",
-	borderRadius: f.radius.sm,
-	color: "inherit",
-	"& svg": {
-		inlineSize: "1em",
-		blockSize: "1em",
-		flexShrink: 0
-	},
-	"&[aria-current=\"page\"]": {
-		color: f.color.text,
-		fontWeight: f.fontWeight.medium
-	}
-}), S = e({
-	textDecoration: "underline",
-	textDecorationColor: "transparent",
-	textUnderlineOffset: "0.2em",
-	transitionProperty: "color, text-decoration-color",
-	transitionDuration: f.motion.duration.fast,
-	transitionTimingFunction: f.motion.easeStandard,
-	"&:hover": {
-		color: f.color.text,
-		textDecorationColor: "currentColor"
-	},
-	"&:focus-visible": { ...t },
-	[n]: { transitionDuration: "0s" }
-});
-function C({ ref: e, label: t = "Breadcrumb", separator: n = "/", children: r, ...a }) {
-	let o = u(/* @__PURE__ */ new Map()), [s, c] = d(null), f = u(null), m = i(() => {
-		let e = Array.from(o.current).sort(_), t = e.some(([, e]) => e.current === !0) ? null : e.at(-1)?.[0] ?? null;
-		f.current !== t && (f.current = t, c(t));
-	}, []), g = i((e, t) => {
-		o.current.set(e, t), m();
-	}, [m]), y = i((e) => {
-		o.current.delete(e), m();
-	}, [m]), b = l(() => ({
-		separator: n,
-		autoCurrentId: s,
-		register: g,
-		unregister: y
-	}), [
-		n,
-		s,
-		g,
-		y
-	]);
-	return /* @__PURE__ */ p(h.Provider, {
-		value: b,
-		children: /* @__PURE__ */ p("nav", {
-			...a,
-			ref: e,
-			"aria-label": t,
-			"data-ui": "breadcrumbs",
-			children: /* @__PURE__ */ p("ol", {
-				css: v,
-				children: r
-			})
-		})
-	});
-}
-C.displayName = "Breadcrumbs";
-function w({ ref: e, href: t, current: n, children: r, ...i }) {
-	let { separator: a, autoCurrentId: l, register: d, unregister: f } = g("Item"), h = o(), _ = u(null);
-	s(e, () => _.current, []), c(() => {
-		let e = _.current;
-		e && d(h, {
-			node: e,
-			current: n
-		});
-	}), c(() => () => f(h), [h, f]);
-	let v = n ?? l === h ? "page" : void 0;
-	return /* @__PURE__ */ m("li", {
-		...i,
-		ref: _,
-		"data-ui": "breadcrumbs-item",
-		css: y,
-		children: [/* @__PURE__ */ p("span", {
-			"aria-hidden": "true",
-			"data-ui": "breadcrumbs-separator",
-			css: b,
-			children: a
-		}), t === void 0 ? /* @__PURE__ */ p("span", {
-			"aria-current": v,
-			css: x,
-			children: r
-		}) : /* @__PURE__ */ p("a", {
-			href: t,
-			"aria-current": v,
-			css: [x, S],
-			children: r
-		})]
-	});
-}
-w.displayName = "Breadcrumbs.Item";
-var T = Object.assign(C, { Item: w });
-//#endregion
-export { T as t };