@jfrader/ui 0.2.0 → 0.3.0

package/dist/textarea.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Textarea } from "./textarea-CcGWuntL.js";
+export { t as Textarea } from "./textarea-DyfjtP0A.js";

package/dist/theme-root-BiXXvQvr.js

@@ -0,0 +1,42 @@
+'use client';
+import { a as e, n as t, r as n, t as r } from "./sx-Dx9JUKp5.js";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a } from "@emotion/react/jsx-runtime";
+//#region src/styling/theme.ts
+var o = i;
+//#endregion
+//#region src/components/theme-provider/theme-provider.tsx
+function s({ theme: e = o, children: n }) {
+	return /* @__PURE__ */ a(t, {
+		theme: e,
+		children: n
+	});
+}
+s.displayName = "ThemeProvider";
+function c() {
+	return e();
+}
+//#endregion
+//#region src/components/theme-root/theme-root.tsx
+var l = n({
+	color: i.color.text,
+	colorScheme: "dark",
+	"&[data-theme=\"light\"]": { colorScheme: "light" }
+});
+function u({ ref: e, theme: t, className: n, sx: i, ...o }) {
+	return /* @__PURE__ */ a(s, { children: /* @__PURE__ */ a(r, {
+		className: n,
+		styles: l,
+		sx: i,
+		children: (n) => /* @__PURE__ */ a("div", {
+			"data-ui": "theme-root",
+			"data-theme": t ?? "dark",
+			...o,
+			ref: e,
+			className: n
+		})
+	}) });
+}
+u.displayName = "ThemeRoot";
+//#endregion
+export { o as i, s as n, c as r, u as t };

package/dist/theme-root.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ThemeRoot } from "./theme-root-BRLIA4eb.js";
+export { t as ThemeRoot } from "./theme-root-BiXXvQvr.js";

package/dist/toast-iqelR-r0.js

@@ -0,0 +1,282 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-D_eA_I-e.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { t as i } from "./button-P2e7_44z.js";
+import { createContext as a, useCallback as o, useContext as s, useEffect as c, useId as l, useMemo as u, useRef as d, useState as f } from "react";
+import { vars as p } from "@jfrader/tokens/vars";
+import { Fragment as m, jsx as h, jsxs as g } from "@emotion/react/jsx-runtime";
+import { createPortal as _ } from "react-dom";
+//#region src/components/toast/toast.tsx
+var v = 4, y = 5e3, b = "Dismiss", x = 100, S = "min(380px, calc(100vw - 32px))", C = "3px", w = a(null), T = a(null), E = e({
+	position: "fixed",
+	insetBlockEnd: 0,
+	insetInlineEnd: 0,
+	display: "flex",
+	flexDirection: "column",
+	gap: p.space[2],
+	inlineSize: S,
+	margin: 0,
+	paddingInlineEnd: p.space[4],
+	paddingBlockEnd: p.space[4],
+	pointerEvents: "none",
+	fontFamily: p.font.sans
+}), D = e({
+	boxSizing: "border-box",
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	alignItems: "start",
+	gap: p.space[2],
+	backgroundColor: p.color.surfaceRaised,
+	border: `1px solid ${p.color.border}`,
+	borderRadius: p.radius.lg,
+	boxShadow: p.shadow.floating,
+	padding: p.space[3],
+	color: p.color.text,
+	lineHeight: p.lineHeight.base,
+	pointerEvents: "auto",
+	transitionProperty: "opacity, transform",
+	transitionDuration: p.motion.duration.base,
+	transitionTimingFunction: p.motion.easeStandard,
+	"&[data-populated=\"false\"]": { opacity: 0 },
+	"&[data-state=\"closing\"]": {
+		opacity: 0,
+		transform: `translateY(${p.space[2]})`,
+		pointerEvents: "none"
+	},
+	[n]: { transitionDuration: "0s" }
+}), O = {
+	neutral: e({ borderInlineStart: `${C} solid ${p.color.borderStrong}` }),
+	success: e({ borderInlineStart: `${C} solid ${p.color.success}` }),
+	danger: e({ borderInlineStart: `${C} solid ${p.color.danger}` })
+}, k = e({
+	display: "grid",
+	gap: p.space[1],
+	alignSelf: "center",
+	minInlineSize: 0
+}), A = e({
+	margin: 0,
+	fontSize: p.textSize.sm,
+	fontWeight: p.fontWeight.semibold
+}), j = e({
+	margin: 0,
+	fontSize: p.textSize.sm,
+	color: p.color.textMuted
+}), M = e({
+	gridColumn: 2,
+	gridRow: 1,
+	inlineSize: "32px",
+	paddingInline: 0
+}), N = e({ display: "contents" }), P = e({
+	gridColumn: "1 / -1",
+	display: "flex",
+	gap: p.space[2]
+});
+function F(e) {
+	let t = s(T);
+	if (!t) throw Error(`Toast.${e} must be rendered inside <Toast.Provider>.`);
+	return t;
+}
+function I() {
+	let e = s(w);
+	if (!e) throw Error("useToast() must be called inside <Toast.Provider>.");
+	return e;
+}
+function L({ children: e, max: t = v, duration: n = y, dismissLabel: r = b }) {
+	let i = l(), a = d(0), [s, c] = f([]), p = d([]), m = d(/* @__PURE__ */ new Map()), g = Math.max(1, Math.floor(Number.isFinite(t) ? t : v)), _ = o((e, t) => {
+		t ? m.current.set(e, t) : m.current.delete(e);
+	}, []), x = o((e, t) => {
+		let n = new Set(t.filter((e) => e.state === "open").map((e) => m.current.get(e.id)));
+		for (let t of e) {
+			let e = m.current.get(t.id);
+			if (e?.contains(e.ownerDocument.activeElement)) {
+				Array.from(e.parentElement?.querySelectorAll("[data-ui=\"toast\"]") ?? []).find((e) => n.has(e))?.querySelector("[data-toast-dismiss]")?.focus();
+				break;
+			}
+		}
+	}, []), S = o((e) => {
+		a.current += 1;
+		let t = `${i}toast-${a.current}`, r = {
+			id: t,
+			options: {
+				...e,
+				duration: e.duration === void 0 ? n : e.duration
+			},
+			state: "open"
+		}, o = p.current, s = [...o, r].slice(-g);
+		return x(o.filter((e) => !s.includes(e)), s), p.current = s, c(s), t;
+	}, [
+		i,
+		g,
+		n,
+		x
+	]), C = o((e) => {
+		let t = p.current;
+		x(t.filter((t) => t.id === e), t.filter((t) => t.id !== e));
+		let n = t.map((t) => t.id === e && t.state === "open" ? {
+			...t,
+			state: "closing"
+		} : t);
+		p.current = n, c(n);
+	}, [x]), E = o((e) => {
+		let t = p.current, n = t.filter((t) => t.id !== e);
+		x(t.filter((t) => t.id === e), n), p.current = n, c(n);
+	}, [x]), D = u(() => ({
+		toast: S,
+		dismiss: C
+	}), [S, C]), O = u(() => ({
+		toasts: s,
+		dismiss: C,
+		remove: E,
+		registerRoot: _,
+		dismissLabel: r
+	}), [
+		s,
+		C,
+		E,
+		_,
+		r
+	]);
+	return /* @__PURE__ */ h(w.Provider, {
+		value: D,
+		children: /* @__PURE__ */ h(T.Provider, {
+			value: O,
+			children: e
+		})
+	});
+}
+L.displayName = "Toast.Provider";
+function R({ ref: e, className: n, sx: r, ...i }) {
+	let { toasts: a } = F("Viewport"), o = d(null), [s, l] = f(null);
+	return c(() => {
+		l(o.current?.ownerDocument.body ?? null);
+	}, []), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("span", {
+		hidden: !0,
+		ref: o
+	}), s && _(/* @__PURE__ */ h(t, {
+		className: n,
+		styles: E,
+		sx: r,
+		children: (t) => /* @__PURE__ */ h("div", {
+			...i,
+			ref: e,
+			"data-ui": "toast-viewport",
+			className: t,
+			children: a.map((e) => /* @__PURE__ */ h(z, { record: e }, e.id))
+		})
+	}), s)] });
+}
+R.displayName = "Toast.Viewport";
+function z({ record: e }) {
+	let { dismiss: t, remove: n, registerRoot: a, dismissLabel: s } = F("Viewport"), { id: l, options: u, state: p } = e, { title: _, description: v, tone: y = "neutral", action: b } = u, S = u.duration, C = d(null), w = o((e) => {
+		C.current = e, a(l, e);
+	}, [l, a]), [T, E] = f(!1), [I, L] = f(!1), [R, z] = f(!1), V = d(S ?? 0);
+	c(() => {
+		let e = setTimeout(() => E(!0), x);
+		return () => clearTimeout(e);
+	}, []);
+	let H = T && p === "open" && S !== null && !I && !R;
+	return c(() => {
+		if (!H) return;
+		let e = performance.now(), n = setTimeout(() => t(l), V.current);
+		return () => {
+			clearTimeout(n), V.current -= performance.now() - e;
+		};
+	}, [
+		H,
+		t,
+		l
+	]), c(() => {
+		if (p !== "closing") return;
+		let e = C.current, t = e && typeof e.getAnimations == "function" ? e.getAnimations() : [], r = !1;
+		return Promise.allSettled(t.map((e) => e.finished)).then(() => {
+			r || n(l);
+		}), () => {
+			r = !0;
+		};
+	}, [
+		p,
+		n,
+		l
+	]), /* @__PURE__ */ g("div", {
+		ref: w,
+		inert: p === "closing",
+		"data-ui": "toast",
+		"data-tone": y,
+		"data-state": p,
+		"data-populated": T,
+		onPointerEnter: () => L(!0),
+		onPointerLeave: () => L(!1),
+		onFocus: () => z(!0),
+		onBlur: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || z(!1);
+		},
+		css: [D, O[y]],
+		children: [/* @__PURE__ */ h("div", {
+			role: y === "danger" ? "alert" : "status",
+			"aria-atomic": "true",
+			css: k,
+			children: T && /* @__PURE__ */ g(m, { children: [r(_) && /* @__PURE__ */ h("div", {
+				css: A,
+				children: _
+			}), r(v) && /* @__PURE__ */ h("div", {
+				css: j,
+				children: v
+			})] })
+		}), T && /* @__PURE__ */ g("div", {
+			css: N,
+			children: [/* @__PURE__ */ h(i, {
+				variant: "ghost",
+				size: "sm",
+				"aria-label": s,
+				"data-toast-dismiss": "",
+				onClick: () => t(l),
+				css: M,
+				children: /* @__PURE__ */ h(B, {})
+			}), b && /* @__PURE__ */ h("div", {
+				css: P,
+				children: /* @__PURE__ */ h(i, {
+					variant: "outline",
+					size: "sm",
+					onClick: (e) => {
+						b?.onClick(e), e.defaultPrevented || t(l);
+					},
+					children: b.label
+				})
+			})]
+		})]
+	});
+}
+function B() {
+	return /* @__PURE__ */ g("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		children: [/* @__PURE__ */ h("line", {
+			x1: "4",
+			y1: "4",
+			x2: "12",
+			y2: "12"
+		}), /* @__PURE__ */ h("line", {
+			x1: "12",
+			y1: "4",
+			x2: "4",
+			y2: "12"
+		})]
+	});
+}
+function V(e) {
+	return /* @__PURE__ */ h(L, { ...e });
+}
+V.displayName = "Toast";
+var H = Object.assign(V, {
+	Provider: L,
+	Viewport: R
+});
+//#endregion
+export { I as n, H as t };

package/dist/toast.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Toast, n as useToast } from "./toast-B1PXuwZ4.js";
+export { t as Toast, n as useToast } from "./toast-iqelR-r0.js";

package/dist/toggle-group-CI0e7hFm.js

@@ -0,0 +1,166 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, t as i } from "./media-D_eA_I-e.js";
+import { n as a, r as o, t as s } from "./roving-focus-CYlo_Kf8.js";
+import { t as c } from "./use-controlled-state-CVXDa-qM.js";
+import { createContext as l, useContext as u, useEffect as d, useImperativeHandle as f, useMemo as p, useRef as m, useState as h } from "react";
+import { vars as g } from "@jfrader/tokens/vars";
+import { jsx as _ } from "@emotion/react/jsx-runtime";
+//#region src/components/toggle-group/toggle-group.tsx
+var v = l(null);
+function y(e) {
+	let t = u(v);
+	if (!t) throw Error(`ToggleGroup.${e} must be rendered inside <ToggleGroup>.`);
+	return t;
+}
+var b = [], x = (e, t) => {
+	if (Array.isArray(e)) {
+		if (t === "multiple") return e;
+		e = e[0] ?? "";
+	}
+	return e === void 0 || e === "" ? b : [e];
+}, S = {
+	itemSelector: "[data-ui=\"toggle-group-item\"]:not([disabled])",
+	ownerSelector: "[data-ui=\"toggle-group-root\"]"
+}, C = "2px", w = e({
+	display: "inline-flex",
+	gap: C,
+	padding: C,
+	border: `1px solid ${g.color.borderControl}`,
+	borderRadius: g.radius.md,
+	backgroundColor: g.color.surfaceInset
+}), T = {
+	horizontal: e({ flexDirection: "row" }),
+	vertical: e({
+		flexDirection: "column",
+		alignItems: "stretch"
+	})
+}, E = e({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: g.space[2],
+	minBlockSize: "32px",
+	boxSizing: "border-box",
+	border: "1px solid transparent",
+	borderRadius: g.radius.sm,
+	background: "transparent",
+	cursor: "pointer",
+	paddingBlock: g.space[1],
+	paddingInline: g.space[3],
+	font: "inherit",
+	fontSize: g.textSize.sm,
+	fontWeight: g.fontWeight.medium,
+	color: g.color.textMuted,
+	transitionProperty: "background-color, border-color, color",
+	transitionDuration: g.motion.duration.fast,
+	transitionTimingFunction: g.motion.easeStandard,
+	"&:hover:not(:disabled):not([aria-pressed=\"true\"])": {
+		backgroundColor: g.color.surfaceHover,
+		color: g.color.text
+	},
+	"&[aria-pressed=\"true\"]": {
+		backgroundColor: g.color.accentSoft,
+		borderColor: g.color.accent,
+		color: g.color.accentText
+	},
+	"&[aria-pressed=\"true\"]:hover:not(:disabled)": { backgroundColor: g.color.accentSoftHover },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&:focus-visible": { ...n },
+	[r]: { transitionDuration: "0s" },
+	[i]: { "&[aria-pressed=\"true\"]": {
+		backgroundColor: "SelectedItem",
+		borderColor: "SelectedItem",
+		color: "SelectedItemText"
+	} }
+});
+function D({ ref: e, type: n = "single", value: r, defaultValue: i, onValueChange: l, orientation: u = "horizontal", disabled: g = !1, allowEmpty: y = !1, label: b, "aria-label": C, onKeyDown: E, className: D, sx: O, ...k }) {
+	let [A, j] = c(r, i, l), [M, N] = h(null), P = m(null);
+	f(e, () => P.current, []);
+	let F = p(() => x(A, n), [A, n]), I = p(() => ({
+		pressed: F,
+		toggle: (e) => {
+			let t = F.includes(e);
+			n === "multiple" ? j(t ? F.filter((t) => t !== e) : [...F, e]) : t ? y && j("") : j(e);
+		},
+		focused: M,
+		setFocused: N,
+		disabled: g
+	}), [
+		F,
+		j,
+		n,
+		y,
+		M,
+		g
+	]);
+	d(() => {
+		let e = P.current;
+		if (!e) return;
+		let t = o(e, S);
+		if (t.length === 0 || t.some((e) => e.tabIndex === 0)) return;
+		let n = t.find((e) => e.getAttribute("aria-pressed") === "true");
+		N((n ?? s(t, M) ?? t[0])?.dataset.value ?? null);
+	});
+	let L = (e) => {
+		E?.(e);
+		let t = P.current;
+		!e.defaultPrevented && t && a(e, t, u, S);
+	};
+	return /* @__PURE__ */ _(v.Provider, {
+		value: I,
+		children: /* @__PURE__ */ _(t, {
+			className: D,
+			styles: [w, T[u]],
+			sx: O,
+			children: (e) => /* @__PURE__ */ _("div", {
+				...k,
+				ref: P,
+				role: "group",
+				"aria-label": b ?? C,
+				"aria-disabled": g || void 0,
+				"data-ui": "toggle-group-root",
+				"data-type": n,
+				"data-orientation": u,
+				onKeyDown: L,
+				className: e
+			})
+		})
+	});
+}
+D.displayName = "ToggleGroup";
+function O({ ref: e, value: n, disabled: r, onClick: i, onFocus: a, className: o, sx: s, ...c }) {
+	let { pressed: l, toggle: u, focused: d, setFocused: f, disabled: p } = y("Item"), m = p || r, h = l.includes(n), g = !m && (d === null ? l[0] === n : d === n), v = (e) => {
+		i?.(e), !e.defaultPrevented && u(n);
+	}, b = (e) => {
+		a?.(e), f(n);
+	};
+	return /* @__PURE__ */ _(t, {
+		className: o,
+		styles: E,
+		sx: s,
+		children: (t) => /* @__PURE__ */ _("button", {
+			...c,
+			ref: e,
+			type: "button",
+			"aria-pressed": h,
+			"data-ui": "toggle-group-item",
+			"data-value": n,
+			"data-state": h ? "on" : "off",
+			tabIndex: g ? 0 : -1,
+			disabled: m,
+			onClick: v,
+			onFocus: b,
+			className: t
+		})
+	});
+}
+O.displayName = "ToggleGroup.Item";
+var k = Object.assign(D, { Item: O });
+//#endregion
+export { k as t };

package/dist/toggle-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ToggleGroup } from "./toggle-group-N_owicT0.js";
+export { t as ToggleGroup } from "./toggle-group-CI0e7hFm.js";

package/dist/tooltip-CB-HC1js.js

@@ -0,0 +1,108 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./use-controlled-state-CVXDa-qM.js";
+import { t as r } from "./trigger-style-B1KVC8O1.js";
+import { t as i } from "./use-overlay-floating-efeqppiw.js";
+import { createContext as a, useContext as o, useMemo as s } from "react";
+import { vars as c } from "@jfrader/tokens/vars";
+import { jsx as l } from "@emotion/react/jsx-runtime";
+import { FloatingPortal as u, useDismiss as d, useFocus as f, useHover as p, useInteractions as m, useMergeRefs as h, useRole as g } from "@floating-ui/react";
+//#region src/components/tooltip/tooltip.tsx
+var _ = 300, v = 100, y = a(null);
+function b(e) {
+	let t = o(y);
+	if (!t) throw Error(`Tooltip.${e} must be rendered inside <Tooltip>.`);
+	return t;
+}
+var x = e({
+	boxSizing: "border-box",
+	backgroundColor: c.color.bgSoft,
+	border: `1px solid ${c.color.border}`,
+	borderRadius: c.radius.sm,
+	boxShadow: c.shadow.raised,
+	padding: `${c.space[1]} ${c.space[2]}`,
+	maxInlineSize: "260px",
+	color: c.color.text,
+	fontFamily: c.font.sans,
+	fontSize: c.textSize.sm,
+	lineHeight: c.lineHeight.base
+});
+function S({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: a = "top", openDelay: o = _, closeDelay: c = v, children: u }) {
+	let [h = !1, b] = n(e, t, r), { refs: x, floatingStyles: S, context: C } = i({
+		open: h,
+		placement: a,
+		onOpenChange: b
+	}), w = p(C, {
+		delay: {
+			open: o,
+			close: c
+		},
+		move: !1
+	}), T = f(C), E = d(C, { escapeKey: !0 }), D = g(C, { role: "tooltip" }), { getReferenceProps: O, getFloatingProps: k } = m([
+		w,
+		T,
+		E,
+		D
+	]), A = s(() => ({
+		open: h,
+		refs: x,
+		floatingStyles: S,
+		getReferenceProps: O,
+		getFloatingProps: k
+	}), [
+		h,
+		x,
+		S,
+		O,
+		k
+	]);
+	return /* @__PURE__ */ l(y.Provider, {
+		value: A,
+		children: u
+	});
+}
+S.displayName = "Tooltip";
+function C({ ref: e, "aria-describedby": n, className: i, sx: a, ...o }) {
+	let { refs: s, getReferenceProps: c } = b("Trigger"), u = h([s.setReference, e]), d = c(o), f = [n, d["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ l(t, {
+		className: i,
+		styles: r,
+		sx: a,
+		children: (e) => /* @__PURE__ */ l("button", {
+			type: "button",
+			...d,
+			ref: u,
+			"aria-describedby": f,
+			"data-ui": "tooltip-trigger",
+			className: e
+		})
+	});
+}
+C.displayName = "Tooltip.Trigger";
+function w({ ref: e, style: n, className: r, sx: i, ...a }) {
+	let { open: o, refs: s, floatingStyles: c, getFloatingProps: d } = b("Content"), f = h([s.setFloating, e]);
+	if (!o) return null;
+	let { tabIndex: p, ...m } = d(a);
+	return /* @__PURE__ */ l(u, { children: /* @__PURE__ */ l(t, {
+		className: r,
+		styles: x,
+		sx: i,
+		children: (e) => /* @__PURE__ */ l("div", {
+			...m,
+			ref: f,
+			"data-ui": "tooltip",
+			style: {
+				...n,
+				...c
+			},
+			className: e
+		})
+	}) });
+}
+w.displayName = "Tooltip.Content";
+var T = Object.assign(S, {
+	Trigger: C,
+	Content: w
+});
+//#endregion
+export { T as t };

package/dist/tooltip.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Tooltip } from "./tooltip-BJPisf60.js";
+export { t as Tooltip } from "./tooltip-CB-HC1js.js";

package/dist/{trigger-style-B1GFmH7M.js → trigger-style-B1KVC8O1.js}

@@ -1,5 +1,5 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
+import { r as e } from "./sx-Dx9JUKp5.js";
 import { vars as t } from "@jfrader/tokens/vars";
 //#region src/styling/trigger-style.ts
 var n = e({

package/dist/types/components/accordion/accordion.d.ts

@@ -1,7 +1,8 @@
 import { type ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type AccordionType = 'single' | 'multiple';
 export type AccordionValue = string | string[];
-interface AccordionBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+interface AccordionBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, SxProps {
     /** Allow closing the last open panel. */
     collapsible?: boolean;
 }
@@ -19,16 +20,16 @@ export interface AccordionMultipleProps extends AccordionBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
-export interface AccordionItemProps extends ComponentPropsWithRef<'div'> {
+export interface AccordionItemProps extends ComponentPropsWithRef<'div'>, SxProps {
     value: string;
     disabled?: boolean;
 }
-export type AccordionTriggerProps = ComponentPropsWithRef<'button'>;
-export type AccordionPanelProps = ComponentPropsWithRef<'div'>;
-declare function AccordionRoot({ ref, value: valueProp, defaultValue, onValueChange, type, collapsible, onKeyDown, ...rest }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function AccordionItem({ ref, value, disabled, ...rest }: AccordionItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function AccordionTrigger({ ref, onClick, disabled: disabledProp, ...rest }: AccordionTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function AccordionPanel({ ref, 'aria-labelledby': ariaLabelledByProp, ...rest }: AccordionPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type AccordionTriggerProps = ComponentPropsWithRef<'button'> & SxProps;
+export type AccordionPanelProps = ComponentPropsWithRef<'div'> & SxProps;
+declare function AccordionRoot({ ref, value: valueProp, defaultValue, onValueChange, type, collapsible, onKeyDown, className, sx, ...rest }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ ref, value, disabled, className, sx, ...rest }: AccordionItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ ref, onClick, disabled: disabledProp, className, sx, ...rest }: AccordionTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function AccordionPanel({ ref, 'aria-labelledby': ariaLabelledByProp, className, sx, ...rest }: AccordionPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Accordion: typeof AccordionRoot & {
     Item: typeof AccordionItem;
     Trigger: typeof AccordionTrigger;

package/dist/types/components/alert/alert.d.ts

@@ -1,11 +1,12 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
 export interface AlertPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface AlertProps extends Omit<ComponentPropsWithRef<'div'>, 'title' | 'role'> {
+export interface AlertProps extends Omit<ComponentPropsWithRef<'div'>, 'title' | 'role'>, SxProps {
     tone?: AlertTone;
     /** Announced tone word. Put visible meaning in the title text. */
     toneLabel?: string;
@@ -20,7 +21,7 @@ export interface AlertProps extends Omit<ComponentPropsWithRef<'div'>, 'title' |
         dismiss?: AlertPartProps;
     };
 }
-export declare function Alert({ ref, tone, toneLabel, title, children, onDismiss, dismissLabel, slotProps, className, ...rest }: AlertProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Alert({ ref, tone, toneLabel, title, children, onDismiss, dismissLabel, slotProps, className, sx, ...rest }: AlertProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Alert {
     var displayName: string;
 }