@jfrader/ui 0.4.0 → 0.5.0

package/README.md

@@ -18,6 +18,7 @@ React components styled with Emotion and themed through the CSS custom propertie
 | `@jfrader/ui/combobox` | `Combobox` |
 | `@jfrader/ui/command-palette` | `CommandPalette` |
 | `@jfrader/ui/container` | `Container` |
+| `@jfrader/ui/copy-button` | `CopyButton` |
 | `@jfrader/ui/date-picker` | `DatePicker` |
 | `@jfrader/ui/dialog` | `Dialog` |
 | `@jfrader/ui/divider` | `Divider` |
@@ -38,6 +39,7 @@ React components styled with Emotion and themed through the CSS custom propertie
 | `@jfrader/ui/text-field` | `TextField` |
 | `@jfrader/ui/textarea` | `Textarea` |
 | `@jfrader/ui/theme-root` | `ThemeRoot` |
+| `@jfrader/ui/time-picker` | `TimePicker` |
 | `@jfrader/ui/toast` | `Toast`, `useToast` |
 | `@jfrader/ui/toggle-group` | `ToggleGroup` |
 | `@jfrader/ui/tooltip` | `Tooltip` |

package/dist/{accordion-Bd-j04hW.js → accordion-xCI_u0BV.js}

@@ -2,9 +2,9 @@
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { t as n } from "./disclosure-caret-C5T3fcl6.js";
 import { t as r } from "./focus-ring-BK5W5_NY.js";
-import { n as i } from "./media-D_eA_I-e.js";
+import { r as i } from "./media-8yrN85VT.js";
 import { n as a } from "./roving-focus-CYlo_Kf8.js";
-import { t as o } from "./use-controlled-state-CVXDa-qM.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
 import { createContext as s, useContext as c, useId as l, useMemo as u } from "react";
 import { vars as d } from "@jfrader/tokens/vars";
 import { jsx as f } from "@emotion/react/jsx-runtime";

package/dist/accordion.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Accordion } from "./accordion-Bd-j04hW.js";
+export { t as Accordion } from "./accordion-xCI_u0BV.js";

package/dist/{alert-BBqaKI4k.js → alert-DS_einpy.js}

@@ -1,7 +1,7 @@
 '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 { r } from "./media-8yrN85VT.js";
 import { t as i } from "./visually-hidden-BJdvqqvn.js";
 import { t as a } from "./renderable-DzcIj1Lo.js";
 import { vars as o } from "@jfrader/tokens/vars";

package/dist/alert.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Alert } from "./alert-BBqaKI4k.js";
+export { t as Alert } from "./alert-DS_einpy.js";

package/dist/announcement-bar-B58xempt.js

@@ -0,0 +1,382 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as ee } from "./use-latest-callback-cj1OOQL6.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as c } from "./button-C92uYFJW.js";
+import { t as te } from "./countdown-Dp_TD1VP.js";
+import { useEffect as l, useId as ne, useRef as u, useState as d } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { Fragment as p, jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as re } from "@floating-ui/react";
+//#region src/components/announcement-bar/announcement-bar.tsx
+var g = 6e3, _ = "35rem", v = "3px", y = 2147483647, ie = {
+	previous: "Previous announcement",
+	next: "Next announcement",
+	pause: "Pause announcements",
+	resume: "Resume announcements",
+	dismiss: "Dismiss announcement",
+	slide: "slide",
+	carousel: "carousel"
+}, b = (e, t) => t && Number.isFinite(e) ? (Math.trunc(e) % t + t) % t : 0, x = (e) => s(e) && e !== "", S = e({
+	from: {
+		opacity: 0,
+		transform: `translateY(${f.space[2]})`
+	},
+	to: {
+		opacity: 1,
+		transform: "translateY(0)"
+	}
+}), C = e({
+	from: { strokeDashoffset: 0 },
+	to: { strokeDashoffset: 100 }
+}), ae = t({
+	display: "grid",
+	gridTemplateRows: "1fr",
+	opacity: 1,
+	backgroundColor: f.color.surfaceRaised,
+	color: f.color.text,
+	fontFamily: f.font.sans,
+	fontSize: f.textSize.sm,
+	lineHeight: f.lineHeight.base,
+	borderBlock: `1px solid ${f.color.borderControl}`,
+	borderInlineStart: `${v} solid var(--announcement-tone)`,
+	transitionProperty: "grid-template-rows, opacity",
+	transitionDuration: f.motion.duration.slow,
+	transitionTimingFunction: f.motion.easeStandard,
+	"&[data-state=\"closed\"]": {
+		gridTemplateRows: "0fr",
+		opacity: 0
+	},
+	[a]: { transitionDuration: "0s" },
+	[i]: {
+		backgroundColor: "Canvas",
+		color: "CanvasText",
+		borderColor: "ButtonText"
+	}
+}), oe = t({
+	backgroundColor: f.color.text,
+	color: f.color.bg,
+	"--announcement-tone": "currentColor",
+	borderColor: "currentColor",
+	[i]: {
+		backgroundColor: "Canvas",
+		color: "CanvasText"
+	}
+}), se = {
+	neutral: t({ "--announcement-tone": f.color.borderControl }),
+	info: t({ "--announcement-tone": f.color.info }),
+	warning: t({ "--announcement-tone": f.color.warning }),
+	danger: t({ "--announcement-tone": f.color.dangerText })
+}, ce = t({
+	minBlockSize: 0,
+	"&[data-closing=\"true\"]": { overflow: "hidden" }
+}), w = f.space[3], T = `(${_} - ${v} - 2 * ${f.space[4]})`, le = t({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: w,
+	alignItems: "center",
+	padding: f.space[4]
+}), ue = t({
+	flex: "0 1 auto",
+	minInlineSize: `min(100%, calc((${T} - 100%) * 999))`
+}), de = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: f.space[3],
+	minInlineSize: 0,
+	animation: `${S} ${f.motion.duration.base} ${f.motion.easeStandard}`,
+	[a]: { animation: "none" }
+}), fe = t({
+	overflowWrap: "anywhere",
+	minInlineSize: 0
+}), pe = t({
+	display: "inline-block",
+	"&:dir(rtl)": { transform: "scaleX(-1)" }
+}), me = t({
+	flex: "1 1 0",
+	display: "flex",
+	flexWrap: "wrap",
+	gap: f.space[2],
+	justifyContent: "end",
+	minInlineSize: "fit-content",
+	maxInlineSize: `calc((100% - ${T}) * 999)`,
+	"&:empty": {
+		flexBasis: w,
+		marginInline: `calc(-0.5 * ${w})`
+	}
+}), he = t({
+	minBlockSize: f.space[8],
+	blockSize: "auto",
+	minInlineSize: f.space[8],
+	paddingBlock: f.space[1],
+	paddingInline: f.space[2],
+	whiteSpace: "normal",
+	color: "inherit",
+	backgroundColor: "transparent",
+	borderColor: "currentColor",
+	borderRadius: f.radius.sm,
+	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": {
+		backgroundColor: "transparent",
+		color: "inherit"
+	},
+	[i]: {
+		borderColor: "ButtonText",
+		color: "ButtonText"
+	}
+}), ge = t({
+	...r,
+	outline: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	boxSizing: "border-box",
+	minBlockSize: f.space[8],
+	padding: f.space[2],
+	color: "inherit",
+	fontWeight: f.fontWeight.medium,
+	overflowWrap: "anywhere",
+	"&:focus-visible": r
+}), _e = t({
+	inlineSize: "1em",
+	blockSize: "1em",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	animationName: `${C}`,
+	animationDuration: "var(--announcement-interval)",
+	animationTimingFunction: "linear",
+	animationIterationCount: "infinite",
+	[a]: { display: "none" },
+	[i]: { display: "none" }
+});
+function E({ ref: e, messages: t, open: r, defaultOpen: i = !0, onOpenChange: a, value: s, defaultValue: f = 0, onValueChange: _, autoPlay: v = !1, paused: S, defaultPaused: C = !1, onPausedChange: w, interval: T = g, controls: E = !0, dismissible: ve = !0, variant: D = "subtle", tone: O = "neutral", label: ye = "Announcements", live: be = "off", locale: k, labels: xe, getMessageLabel: Se, onAction: Ce, onCountdownEnd: we, dismissFocusRef: Te, slotProps: A, className: Ee, sx: De, ...j }) {
+	let [M, Oe] = o(r, i, a), [ke, N] = o(s === void 0 ? void 0 : b(s, t.length), b(f, t.length), _), [Ae, P] = o(S, C, w), F = b(ke ?? 0, t.length), I = Number.isFinite(T) && T > 0 ? T : g, L = u(null), je = re([L, e]), [Me, R] = d(!1), [z, B] = d(!1), [Ne, Pe] = d(!1), [V, Fe] = d(!0), [H, U] = d(!!M), W = u(!1), G = u(/* @__PURE__ */ new Map()), K = ne(), q = {
+		...ie,
+		...xe
+	}, J = t.length > 1, Y = v && J && !!M && !Ae && !Me && !z && !Ne && !V, X = !!Ae || z || V, Z = u({ remaining: I }), [Ie, Le] = d(0), [Re, ze] = d(0), Be = ee(() => N(b(F + 1, t.length))), Ve = ee(we);
+	if (l(() => {
+		if (!M) return;
+		let e = L.current?.ownerDocument, t = e?.defaultView;
+		if (!e || !t) return;
+		let n = t.matchMedia("(prefers-reduced-motion: reduce)"), r = () => Fe(n.matches), i = () => Pe(e.visibilityState === "hidden");
+		return r(), i(), n.addEventListener("change", r), e.addEventListener("visibilitychange", i), () => {
+			n.removeEventListener("change", r), e.removeEventListener("visibilitychange", i);
+		};
+	}, [
+		M,
+		H,
+		t.length === 0
+	]), l(() => {
+		Z.current.remaining = I, Le((e) => e + 1);
+	}, [
+		F,
+		I,
+		t[F]?.id,
+		Re
+	]), l(() => {
+		if (!Y) return;
+		let e = Date.now() + Z.current.remaining, t, n = () => {
+			let r = Math.max(0, e - Date.now());
+			r > 0 ? t = setTimeout(n, Math.min(r, y)) : (Z.current.remaining = I, e = Date.now() + I, Be(), Le((e) => e + 1), t = setTimeout(n, Math.min(I, y)));
+		};
+		return t = setTimeout(n, Math.min(Z.current.remaining, y)), () => {
+			clearTimeout(t), Z.current.remaining = Math.max(0, e - Date.now());
+		};
+	}, [
+		Y,
+		F,
+		I,
+		Be,
+		t[F]?.id,
+		Re
+	]), l(() => {
+		if (M) {
+			U(!0);
+			return;
+		}
+		let e = L.current;
+		if (W.current && e) {
+			let t = Te?.current;
+			t?.isConnected && t.ownerDocument === e.ownerDocument && t.focus();
+		}
+		if (W.current = !1, !e || V) {
+			U(!1);
+			return;
+		}
+		let t = parseFloat(e.ownerDocument.defaultView.getComputedStyle(e).transitionDuration) * 1e3, n = setTimeout(() => U(!1), t);
+		return () => clearTimeout(n);
+	}, [
+		M,
+		V,
+		Te
+	]), !t.length || !M && !H) return null;
+	let Q = t[F], { css: He, ...Ue } = A?.root ?? {}, We = new Intl.NumberFormat(k), Ge = Se?.(F, t.length) ?? `${We.format(F + 1)} of ${We.format(t.length)}`, Ke = (e) => {
+		A?.action?.onClick?.(e), e.defaultPrevented || Q.action?.onClick?.(e), e.defaultPrevented || Ce?.(Q);
+	}, qe = (e) => {
+		ze((e) => e + 1), N(b(F + e, t.length));
+	}, $ = (e, t, n, r) => {
+		let i = A?.[e];
+		return /* @__PURE__ */ m(c, {
+			...i,
+			type: "button",
+			render: (t) => /* @__PURE__ */ m("button", {
+				...t,
+				"data-ui": `announcement-bar-${e}`
+			}),
+			size: "sm",
+			css: [he, i?.css],
+			"aria-label": i?.["aria-label"] ?? t,
+			"aria-controls": e === "previous" || e === "next" ? K : void 0,
+			"aria-pressed": void 0,
+			onClick: (e) => {
+				i?.onClick?.(e), e.defaultPrevented || r();
+			},
+			children: n
+		});
+	};
+	return /* @__PURE__ */ m(n, {
+		className: [Ee, A?.root?.className].filter(Boolean).join(" ") || void 0,
+		styles: [
+			ae,
+			se[O],
+			D === "inverted" && oe,
+			A?.root?.css
+		],
+		sx: De,
+		children: (e) => /* @__PURE__ */ m("section", {
+			...Ue,
+			...j,
+			ref: je,
+			className: e,
+			"data-ui": "announcement-bar",
+			"data-state": M ? "open" : "closed",
+			"data-running": Y,
+			"data-variant": D,
+			"data-tone": O,
+			role: "region",
+			inert: !M || void 0,
+			"aria-label": j["aria-label"] ?? A?.root?.["aria-label"] ?? (j["aria-labelledby"] ?? A?.root?.["aria-labelledby"] ? void 0 : ye),
+			"aria-labelledby": [A?.root?.["aria-labelledby"], j["aria-labelledby"]].filter(Boolean).join(" ") || void 0,
+			"aria-describedby": [A?.root?.["aria-describedby"], j["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+			"aria-roledescription": J ? q.carousel : void 0,
+			onMouseEnter: (e) => {
+				A?.root?.onMouseEnter?.(e), j.onMouseEnter?.(e), R(!0);
+			},
+			onMouseLeave: (e) => {
+				A?.root?.onMouseLeave?.(e), j.onMouseLeave?.(e), R(!1);
+			},
+			onFocusCapture: (e) => {
+				if (A?.root?.onFocusCapture?.(e), j.onFocusCapture?.(e), v && J && !z) {
+					let t = !e.currentTarget.contains(e.relatedTarget), n = Y && e.target?.closest?.("[data-ui=\"announcement-bar-content\"]") != null;
+					(t || n) && (B(!0), P(!0));
+				}
+			},
+			children: /* @__PURE__ */ m("div", {
+				css: ce,
+				"data-closing": !M,
+				children: /* @__PURE__ */ h("div", {
+					css: le,
+					children: [
+						/* @__PURE__ */ m("div", {
+							css: me,
+							children: v && J && $("rotation", X ? q.resume : q.pause, /* @__PURE__ */ h(p, { children: [X ? q.resume : q.pause, /* @__PURE__ */ m("svg", {
+								"aria-hidden": "true",
+								viewBox: "0 0 36 36",
+								css: _e,
+								style: {
+									"--announcement-interval": `${I}ms`,
+									animationPlayState: Y ? "running" : "paused"
+								},
+								children: /* @__PURE__ */ m("circle", {
+									cx: "18",
+									cy: "18",
+									r: "15",
+									pathLength: "100",
+									strokeDasharray: "100"
+								})
+							}, `${F}-${Ie}`)] }), () => {
+								X ? (B(!1), P(!1)) : P(!0);
+							})
+						}),
+						/* @__PURE__ */ m("div", {
+							...A?.content,
+							id: K,
+							"data-ui": "announcement-bar-content",
+							css: [ue, A?.content?.css],
+							"aria-live": "off",
+							children: /* @__PURE__ */ h("div", {
+								role: "group",
+								"aria-roledescription": J ? q.slide : void 0,
+								"aria-label": J ? Ge : void 0,
+								css: de,
+								children: [
+									x(Q.message) && /* @__PURE__ */ m("span", {
+										...A?.message,
+										"data-ui": "announcement-bar-message",
+										css: [fe, A?.message?.css],
+										"aria-live": Y ? "off" : be,
+										"aria-atomic": "true",
+										children: Q.message
+									}),
+									M && Q.countdown && /* @__PURE__ */ m(te, {
+										...A?.countdown,
+										css: A?.countdown?.css,
+										...Q.countdown,
+										variant: "compact",
+										locale: k,
+										announceCompletion: !1,
+										onComplete: (e) => {
+											let t = G.current.get(Q.id) ?? /* @__PURE__ */ new Set();
+											t.has(e) || (t.add(e), G.current.set(Q.id, t), Ve(Q));
+										}
+									}),
+									Q.action && x(Q.action.label) && (Q.action.href === void 0 ? /* @__PURE__ */ m(c, {
+										...A?.action,
+										type: "button",
+										render: (e) => /* @__PURE__ */ m("button", {
+											...e,
+											"data-ui": "announcement-bar-action"
+										}),
+										css: [he, A?.action?.css],
+										onClick: Ke,
+										children: Q.action.label
+									}) : /* @__PURE__ */ m("a", {
+										...A?.action,
+										href: Q.action.href,
+										"data-ui": "announcement-bar-action",
+										css: [ge, A?.action?.css],
+										onClick: Ke,
+										children: Q.action.label
+									}))
+								]
+							}, Q.id)
+						}),
+						/* @__PURE__ */ h("div", {
+							css: me,
+							children: [J && (E || v) && /* @__PURE__ */ h(p, { children: [$("previous", q.previous, /* @__PURE__ */ m("span", {
+								"aria-hidden": "true",
+								css: pe,
+								children: "‹"
+							}), () => qe(-1)), $("next", q.next, /* @__PURE__ */ m("span", {
+								"aria-hidden": "true",
+								css: pe,
+								children: "›"
+							}), () => qe(1))] }), ve && $("dismiss", q.dismiss, /* @__PURE__ */ m("span", {
+								"aria-hidden": "true",
+								children: "×"
+							}), () => {
+								W.current = L.current?.contains(L.current.ownerDocument.activeElement) ?? !1, Oe(!1);
+							})]
+						})
+					]
+				})
+			})
+		})
+	});
+}
+E.displayName = "AnnouncementBar";
+//#endregion
+export { E as t };

package/dist/announcement-bar.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as AnnouncementBar } from "./announcement-bar-B58xempt.js";

package/dist/avatar-group-DOQQuV51.js

@@ -0,0 +1,138 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-8yrN85VT.js";
+import { t as r } from "./visually-hidden-BJdvqqvn.js";
+import { t as i } from "./avatar-BahDVO9t.js";
+import { useId 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/avatar-group/avatar-group.tsx
+var l = new Intl.PluralRules("en");
+function u(e, t) {
+	return l.select(e) === "one" ? `${t} more member` : `${t} more members`;
+}
+function d(e, t) {
+	return l.select(e) === "one" ? `${t} member` : `${t} members`;
+}
+var f = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	flexWrap: "nowrap",
+	minInlineSize: 0,
+	verticalAlign: "middle"
+}), p = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	borderRadius: o.radius.full,
+	verticalAlign: "middle",
+	"&:not(:first-of-type)": { marginInlineStart: `calc(-1 * ${o.space[1]})` }
+}), m = e({
+	boxSizing: "border-box",
+	border: `2px solid ${o.color.surface}`,
+	[n]: { borderColor: "Canvas" }
+}), h = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	borderRadius: o.radius.full,
+	backgroundColor: o.color.surfaceHover,
+	color: o.color.text,
+	fontWeight: o.fontWeight.medium,
+	fontVariantNumeric: "tabular-nums",
+	lineHeight: 1,
+	whiteSpace: "nowrap",
+	userSelect: "none",
+	verticalAlign: "middle",
+	border: `2px solid ${o.color.surface}`,
+	"&:not(:first-of-type)": { marginInlineStart: `calc(-1 * ${o.space[1]})` },
+	[n]: {
+		borderColor: "Canvas",
+		color: "CanvasText",
+		backgroundColor: "Canvas"
+	}
+}), g = {
+	sm: e({
+		minInlineSize: o.space[6],
+		blockSize: o.space[6],
+		paddingInline: `calc(${o.space[1]} / 2)`,
+		fontSize: o.textSize.xs
+	}),
+	md: e({
+		minInlineSize: o.space[8],
+		blockSize: o.space[8],
+		paddingInline: o.space[1],
+		fontSize: o.textSize.sm
+	}),
+	lg: e({
+		minInlineSize: o.space[10],
+		blockSize: o.space[10],
+		paddingInline: o.space[1],
+		fontSize: o.textSize.md
+	})
+};
+function _({ ref: e, members: n, max: o = 4, size: l = "md", label: _ = "Team members", locale: v, getOverflowLabel: y = u, getSummaryLabel: b = d, slotProps: x, avatarProps: S, className: C, sx: w, ...T }) {
+	let E = a(), D = typeof o == "number" && Number.isFinite(o) ? Math.max(0, Math.floor(o)) : 4, O = n.length, k = n.slice(0, D), A = O - k.length, j = A > 0, M = new Intl.NumberFormat(v), N = M.format(A), P = M.format(O), F = y(A, N), I = b(O, P), L = !!T["aria-labelledby"]?.trim(), R = T["aria-label"] ?? (L ? void 0 : _), z = [T["aria-describedby"], E].filter(Boolean).join(" ");
+	return /* @__PURE__ */ s(t, {
+		className: C,
+		styles: f,
+		sx: w,
+		children: (t) => /* @__PURE__ */ c("div", {
+			...T,
+			ref: e,
+			"data-ui": "avatar-group",
+			role: "group",
+			"aria-label": R,
+			"aria-describedby": z,
+			className: t,
+			children: [
+				k.map((e) => /* @__PURE__ */ s("span", {
+					"data-ui": "avatar-group-member",
+					className: x?.member?.className,
+					css: [p, x?.member?.css],
+					children: /* @__PURE__ */ s(i, {
+						size: l,
+						name: e.name,
+						src: e.src,
+						status: e.status,
+						statusLabel: e.statusLabel,
+						slotProps: S?.slotProps,
+						className: S?.className,
+						sx: [m, S?.sx]
+					})
+				}, e.id)),
+				j && /* @__PURE__ */ s("span", {
+					"data-ui": "avatar-group-overflow",
+					role: "img",
+					"aria-label": F,
+					className: x?.overflow?.className,
+					css: [
+						h,
+						g[l],
+						x?.overflow?.css
+					],
+					children: /* @__PURE__ */ c("span", {
+						"aria-hidden": "true",
+						children: ["+", N]
+					})
+				}),
+				/* @__PURE__ */ s("span", {
+					id: E,
+					"data-ui": "avatar-group-summary",
+					className: x?.summary?.className,
+					css: [r, x?.summary?.css],
+					children: I
+				})
+			]
+		})
+	});
+}
+_.displayName = "AvatarGroup";
+//#endregion
+export { _ as t };

package/dist/avatar-group.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as AvatarGroup } from "./avatar-group-DOQQuV51.js";