@jfrader/ui 0.1.1 → 0.2.0

package/dist/alert-BzntPa_5.js

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

package/dist/avatar-Dk2ES3ru.js

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

package/dist/badge-DZefC7rm.js

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

package/dist/breadcrumbs-5MCZ_Jr3.js

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

package/dist/button-qy-50NPd.js

@@ -1,187 +0,0 @@
-import { t as e } from "./css-CW_HG55W.js";
-import { n as t } from "./focus-ring-qOS3rPlM.js";
-import { n } from "./media-8K3xDAxM.js";
-import { t as r } from "./icon-wrapper-BKo4FI-O.js";
-import { n as i, t as a } from "./loading-ring-CTpT-IrT.js";
-import { forwardRef as o } from "react";
-import { vars as s } from "@jfrader/tokens/vars";
-import { Fragment as c, jsx as l, jsxs as u } from "@emotion/react/jsx-runtime";
-import { useMergeRefs as d } from "@floating-ui/react";
-//#region src/components/button/button.tsx
-var f = "&:hover:not(:disabled):not([aria-disabled=\"true\"])", p = e({
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	gap: s.space[2],
-	border: "1px solid transparent",
-	borderRadius: s.radius.md,
-	fontFamily: s.font.sans,
-	fontWeight: s.fontWeight.medium,
-	lineHeight: s.lineHeight.tight,
-	letterSpacing: "-0.011em",
-	whiteSpace: "nowrap",
-	cursor: "pointer",
-	transitionProperty: "background-color, border-color, color",
-	transitionDuration: s.motion.duration.fast,
-	transitionTimingFunction: s.motion.easeStandard,
-	"&:focus-visible": { ...t },
-	"&:disabled, &[aria-disabled=\"true\"]": {
-		cursor: "not-allowed",
-		opacity: .55
-	},
-	[n]: { transitionDuration: "0s" }
-}), m = {
-	sm: e({
-		blockSize: "32px",
-		paddingInline: s.space[3],
-		fontSize: s.textSize.sm
-	}),
-	md: e({
-		blockSize: "40px",
-		paddingInline: s.space[4],
-		fontSize: s.textSize.sm
-	}),
-	lg: e({
-		blockSize: "48px",
-		paddingInline: s.space[5],
-		fontSize: s.textSize.md
-	})
-}, h = {
-	solid: {
-		accent: e({
-			backgroundColor: s.color.accent,
-			color: s.color.accentContrast,
-			[f]: { backgroundColor: s.color.accentHover }
-		}),
-		danger: e({
-			backgroundColor: s.color.danger,
-			color: s.color.dangerContrast,
-			[f]: { backgroundColor: s.color.dangerHover }
-		}),
-		neutral: e({
-			backgroundColor: s.color.surfaceRaised,
-			color: s.color.text,
-			borderColor: s.color.border,
-			[f]: { backgroundColor: s.color.surfaceHover }
-		})
-	},
-	soft: {
-		accent: e({
-			backgroundColor: s.color.accentSoft,
-			color: s.color.accentText,
-			[f]: { backgroundColor: s.color.accentSoftHover }
-		}),
-		danger: e({
-			backgroundColor: s.color.dangerSoft,
-			color: s.color.dangerText,
-			[f]: { backgroundColor: s.color.dangerSoftHover }
-		}),
-		neutral: e({
-			backgroundColor: s.color.surfaceHover,
-			color: s.color.text,
-			[f]: { backgroundColor: s.color.surfaceRaised }
-		})
-	},
-	outline: {
-		accent: e({
-			backgroundColor: "transparent",
-			borderColor: s.color.accentBorder,
-			color: s.color.accentText,
-			[f]: { backgroundColor: s.color.accentSoft }
-		}),
-		danger: e({
-			backgroundColor: "transparent",
-			borderColor: s.color.dangerBorder,
-			color: s.color.dangerText,
-			[f]: { backgroundColor: s.color.dangerSoft }
-		}),
-		neutral: e({
-			backgroundColor: "transparent",
-			borderColor: s.color.borderStrong,
-			color: s.color.text,
-			[f]: { backgroundColor: s.color.surfaceHover }
-		})
-	},
-	ghost: {
-		accent: e({
-			backgroundColor: "transparent",
-			color: s.color.accentText,
-			[f]: { backgroundColor: s.color.accentSoft }
-		}),
-		danger: e({
-			backgroundColor: "transparent",
-			color: s.color.dangerText,
-			[f]: { backgroundColor: s.color.dangerSoft }
-		}),
-		neutral: e({
-			backgroundColor: "transparent",
-			color: s.color.textMuted,
-			[f]: {
-				backgroundColor: s.color.surfaceHover,
-				color: s.color.text
-			}
-		})
-	}
-}, g = e({
-	boxSizing: "border-box",
-	textDecoration: "none"
-}), _ = e({
-	...a,
-	inlineSize: "1em",
-	blockSize: "1em",
-	[n]: { animation: `${i} 1.2s ease-in-out infinite alternate` }
-}), v = o(function({ variant: e = "solid", tone: t = "neutral", size: n = "md", loading: i = !1, startIcon: a, endIcon: o, type: s, children: f, onClick: v, css: y, render: b, ...x }, S) {
-	let { "data-ui": C, ...w } = x, T = b && C !== void 0 ? `${C} button` : "button", E = d([S]), D = w["aria-disabled"], O = i || D === !0 || D === "true" || b !== void 0 && w.disabled === !0, k = v, A = (e) => {
-		O ? e.preventDefault() : k?.(e);
-	}, j = i ? /* @__PURE__ */ l("span", { css: _ }) : a, M = /* @__PURE__ */ u(c, { children: [
-		j != null && /* @__PURE__ */ l("span", {
-			css: r,
-			"aria-hidden": !0,
-			children: j
-		}),
-		f,
-		o != null && /* @__PURE__ */ l("span", {
-			css: r,
-			"aria-hidden": !0,
-			children: o
-		})
-	] });
-	if (b) {
-		let { disabled: r, ...a } = w;
-		return b({
-			...a,
-			ref: E,
-			type: s,
-			"data-ui": T,
-			"aria-busy": i ? !0 : w["aria-busy"],
-			"aria-disabled": O ? !0 : D,
-			onClick: A,
-			css: [
-				p,
-				g,
-				m[n],
-				h[e][t],
-				y
-			],
-			children: M
-		});
-	}
-	return /* @__PURE__ */ l("button", {
-		...w,
-		ref: S,
-		type: s ?? "button",
-		"data-ui": T,
-		"aria-busy": i ? !0 : w["aria-busy"],
-		"aria-disabled": O ? !0 : D,
-		onClick: A,
-		css: [
-			p,
-			m[n],
-			h[e][t],
-			y
-		],
-		children: M
-	});
-});
-//#endregion
-export { v as t };