@jfrader/ui 0.2.0 → 0.3.0

package/dist/breadcrumbs-DVAOxfvL.js

@@ -0,0 +1,141 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r } from "./media-D_eA_I-e.js";
+import { createContext 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 = i(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": { ...n },
+	[r]: { transitionDuration: "0s" }
+});
+function w({ ref: e, label: n = "Breadcrumb", separator: r = "/", children: i, className: o, sx: s, ...c }) {
+	let l = d(/* @__PURE__ */ new Map()), [p, h] = f(null), _ = d(null), b = a(() => {
+		let e = Array.from(l.current).sort(v), t = e.some(([, e]) => e.current === !0) ? null : e.at(-1)?.[0] ?? null;
+		_.current !== t && (_.current = t, h(t));
+	}, []), x = a((e, t) => {
+		l.current.set(e, t), b();
+	}, [b]), S = a((e) => {
+		l.current.delete(e), b();
+	}, [b]), C = u(() => ({
+		separator: r,
+		autoCurrentId: p,
+		register: x,
+		unregister: S
+	}), [
+		r,
+		p,
+		x,
+		S
+	]);
+	return /* @__PURE__ */ m(g.Provider, {
+		value: C,
+		children: /* @__PURE__ */ m(t, {
+			className: o,
+			sx: s,
+			children: (t) => /* @__PURE__ */ m("nav", {
+				...c,
+				ref: e,
+				"aria-label": n,
+				"data-ui": "breadcrumbs",
+				className: t,
+				children: /* @__PURE__ */ m("ol", {
+					css: y,
+					children: i
+				})
+			})
+		})
+	});
+}
+w.displayName = "Breadcrumbs";
+function T({ ref: e, href: n, current: r, children: i, className: a, sx: o, ...u }) {
+	let { separator: f, autoCurrentId: p, register: g, unregister: v } = _("Item"), y = s(), w = d(null);
+	c(e, () => w.current, []), l(() => {
+		let e = w.current;
+		e && g(y, {
+			node: e,
+			current: r
+		});
+	}), l(() => () => v(y), [y, v]);
+	let T = r ?? p === y ? "page" : void 0;
+	return /* @__PURE__ */ m(t, {
+		className: a,
+		styles: b,
+		sx: o,
+		children: (e) => /* @__PURE__ */ h("li", {
+			...u,
+			ref: w,
+			"data-ui": "breadcrumbs-item",
+			className: e,
+			children: [/* @__PURE__ */ m("span", {
+				"aria-hidden": "true",
+				"data-ui": "breadcrumbs-separator",
+				css: x,
+				children: f
+			}), n === void 0 ? /* @__PURE__ */ m("span", {
+				"aria-current": T,
+				css: S,
+				children: i
+			}) : /* @__PURE__ */ m("a", {
+				href: n,
+				"aria-current": T,
+				css: [S, C],
+				children: i
+			})]
+		})
+	});
+}
+T.displayName = "Breadcrumbs.Item";
+var E = Object.assign(w, { Item: T });
+//#endregion
+export { E as t };

package/dist/breadcrumbs.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Breadcrumbs } from "./breadcrumbs-694hF_hm.js";
+export { t as Breadcrumbs } from "./breadcrumbs-DVAOxfvL.js";

package/dist/button-P2e7_44z.js

@@ -0,0 +1,200 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r } from "./media-D_eA_I-e.js";
+import { t as i } from "./icon-wrapper-stN8sD7R.js";
+import { n as a, t as o } from "./loading-ring-B8-30Dl1.js";
+import "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": { ...n },
+	"&:disabled, &[aria-disabled=\"true\"]": {
+		cursor: "not-allowed",
+		opacity: .55
+	},
+	[r]: { 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({
+	...o,
+	inlineSize: "1em",
+	blockSize: "1em",
+	[r]: { animation: `${a} 1.2s ease-in-out infinite alternate` }
+});
+function v({ ref: e, variant: n = "solid", tone: r = "neutral", size: a = "md", loading: o = !1, startIcon: s, endIcon: f, type: v, children: y, onClick: b, className: x, css: S, sx: C, render: w, ...T }) {
+	let { "data-ui": E, ...D } = T, O = w && E !== void 0 ? `${E} button` : "button", k = d([e]), A = D["aria-disabled"], j = o || A === !0 || A === "true" || w !== void 0 && D.disabled === !0, M = b, N = (e) => {
+		j ? e.preventDefault() : M?.(e);
+	}, P = o ? /* @__PURE__ */ l("span", { css: _ }) : s, F = /* @__PURE__ */ u(c, { children: [
+		P != null && /* @__PURE__ */ l("span", {
+			css: i,
+			"aria-hidden": !0,
+			children: P
+		}),
+		y,
+		f != null && /* @__PURE__ */ l("span", {
+			css: i,
+			"aria-hidden": !0,
+			children: f
+		})
+	] });
+	if (w) {
+		let { disabled: e, ...i } = D;
+		return /* @__PURE__ */ l(t, {
+			className: x,
+			sx: C,
+			children: (e) => w({
+				...i,
+				className: e,
+				ref: k,
+				type: v,
+				"data-ui": O,
+				"aria-busy": o ? !0 : D["aria-busy"],
+				"aria-disabled": j ? !0 : A,
+				onClick: N,
+				css: [
+					p,
+					g,
+					m[a],
+					h[n][r],
+					S
+				],
+				children: F
+			})
+		});
+	}
+	return /* @__PURE__ */ l(t, {
+		className: x,
+		styles: [
+			p,
+			m[a],
+			h[n][r],
+			S
+		],
+		sx: C,
+		children: (t) => /* @__PURE__ */ l("button", {
+			...D,
+			ref: e,
+			type: v ?? "button",
+			"data-ui": O,
+			"aria-busy": o ? !0 : D["aria-busy"],
+			"aria-disabled": j ? !0 : A,
+			onClick: N,
+			className: t,
+			children: F
+		})
+	});
+}
+v.displayName = "Button";
+//#endregion
+export { v as t };

package/dist/button.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Button } from "./button-CoaIcykB.js";
+export { t as Button } from "./button-P2e7_44z.js";