@jfrader/ui 0.1.2 → 0.3.0

package/dist/textarea-DyfjtP0A.js

@@ -0,0 +1,86 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-D2ToMeRa.js";
+import { vars as s } from "@jfrader/tokens/vars";
+import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
+//#region src/components/textarea/textarea.tsx
+var u = e({
+	paddingBlock: s.space[2],
+	lineHeight: s.lineHeight.base
+}), d = {
+	sm: e({
+		minBlockSize: "64px",
+		paddingInline: s.space[3],
+		fontSize: s.textSize.sm
+	}),
+	md: e({
+		minBlockSize: "80px",
+		paddingInline: s.space[4],
+		fontSize: s.textSize.sm
+	}),
+	lg: e({
+		minBlockSize: "96px",
+		paddingInline: s.space[4],
+		fontSize: s.textSize.md
+	})
+}, f = {
+	none: e({ resize: "none" }),
+	vertical: e({ resize: "vertical" })
+}, p = e({ fieldSizing: "content" });
+function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize: _ = "vertical", autoResize: v = !1, rows: y = 3, onChange: b, onValueChange: x, slotProps: S, className: C, sx: w, required: T, id: E, "aria-describedby": D, "aria-invalid": O, ...k }) {
+	let A = t({
+		id: E,
+		description: m,
+		error: h,
+		"aria-describedby": D,
+		"aria-invalid": O
+	}), j = (e) => {
+		b?.(e), x?.(e.currentTarget.value);
+	};
+	return /* @__PURE__ */ l(n, {
+		"data-ui": "textarea",
+		className: C,
+		sx: w,
+		part: S?.root,
+		children: [
+			/* @__PURE__ */ c(a, {
+				htmlFor: A.id,
+				required: T,
+				part: S?.label,
+				children: s
+			}),
+			/* @__PURE__ */ c("textarea", {
+				...k,
+				ref: e,
+				id: A.id,
+				rows: y,
+				required: T,
+				"aria-describedby": A.describedBy,
+				"aria-invalid": A.ariaInvalid,
+				onChange: j,
+				className: S?.control?.className,
+				css: [
+					i,
+					u,
+					d[g],
+					f[_],
+					v && p,
+					S?.control?.css
+				]
+			}),
+			/* @__PURE__ */ c(o, {
+				id: A.descriptionId,
+				part: S?.description,
+				children: m
+			}),
+			/* @__PURE__ */ c(r, {
+				id: A.errorId,
+				part: S?.error,
+				children: h
+			})
+		]
+	});
+}
+m.displayName = "Textarea";
+//#endregion
+export { m as t };

package/dist/textarea.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Textarea } from "./textarea-OP8_3IUR.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-eLka0ZP1.js";
+export { t as ThemeRoot } from "./theme-root-BiXXvQvr.js";

package/dist/{toast-D3Y6OAsg.js → toast-iqelR-r0.js}

@@ -1,14 +1,14 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t } from "./media-D_eA_I-e.js";
-import { t as n } from "./renderable-DzcIj1Lo.js";
-import { t as r } from "./button-Cmixur4Q.js";
-import { createContext as i, forwardRef 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 { 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 = i(null), T = i(null), E = e({
+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,
@@ -44,7 +44,7 @@ var v = 4, y = 5e3, b = "Dismiss", x = 100, S = "min(380px, calc(100vw - 32px))"
 		transform: `translateY(${p.space[2]})`,
 		pointerEvents: "none"
 	},
-	[t]: { transitionDuration: "0s" }
+	[n]: { transitionDuration: "0s" }
 }), O = {
 	neutral: e({ borderInlineStart: `${C} solid ${p.color.borderStrong}` }),
 	success: e({ borderInlineStart: `${C} solid ${p.color.success}` }),
@@ -145,23 +145,30 @@ function L({ children: e, max: t = v, duration: n = y, dismissLabel: r = b }) {
 		})
 	});
 }
-var R = a(function(e, t) {
-	let { toasts: n } = F("Viewport"), r = d(null), [i, a] = f(null);
+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(() => {
-		a(r.current?.ownerDocument.body ?? null);
+		l(o.current?.ownerDocument.body ?? null);
 	}, []), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("span", {
 		hidden: !0,
-		ref: r
-	}), i && _(/* @__PURE__ */ h("div", {
-		...e,
-		ref: t,
-		"data-ui": "toast-viewport",
-		css: E,
-		children: n.map((e) => /* @__PURE__ */ h(z, { record: e }, e.id))
-	}), i)] });
-});
+		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: i, 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) => {
+	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(() => {
@@ -181,15 +188,15 @@ function z({ record: e }) {
 		l
 	]), c(() => {
 		if (p !== "closing") return;
-		let e = C.current, t = e && typeof e.getAnimations == "function" ? e.getAnimations() : [], n = !1;
+		let e = C.current, t = e && typeof e.getAnimations == "function" ? e.getAnimations() : [], r = !1;
 		return Promise.allSettled(t.map((e) => e.finished)).then(() => {
-			n || i(l);
+			r || n(l);
 		}), () => {
-			n = !0;
+			r = !0;
 		};
 	}, [
 		p,
-		i,
+		n,
 		l
 	]), /* @__PURE__ */ g("div", {
 		ref: w,
@@ -209,16 +216,16 @@ function z({ record: e }) {
 			role: y === "danger" ? "alert" : "status",
 			"aria-atomic": "true",
 			css: k,
-			children: T && /* @__PURE__ */ g(m, { children: [n(_) && /* @__PURE__ */ h("div", {
+			children: T && /* @__PURE__ */ g(m, { children: [r(_) && /* @__PURE__ */ h("div", {
 				css: A,
 				children: _
-			}), n(v) && /* @__PURE__ */ h("div", {
+			}), r(v) && /* @__PURE__ */ h("div", {
 				css: j,
 				children: v
 			})] })
 		}), T && /* @__PURE__ */ g("div", {
 			css: N,
-			children: [/* @__PURE__ */ h(r, {
+			children: [/* @__PURE__ */ h(i, {
 				variant: "ghost",
 				size: "sm",
 				"aria-label": s,
@@ -228,7 +235,7 @@ function z({ record: e }) {
 				children: /* @__PURE__ */ h(B, {})
 			}), b && /* @__PURE__ */ h("div", {
 				css: P,
-				children: /* @__PURE__ */ h(r, {
+				children: /* @__PURE__ */ h(i, {
 					variant: "outline",
 					size: "sm",
 					onClick: (e) => {
@@ -263,9 +270,13 @@ function B() {
 		})]
 	});
 }
-var V = Object.assign(L, {
+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, V as t };
+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-D3Y6OAsg.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-BxzJ-6Cp.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-CVl8HS4S.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 ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+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<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+interface AccordionBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, SxProps {
     /** Allow closing the last open panel. */
     collapsible?: boolean;
 }
@@ -19,15 +20,19 @@ export interface AccordionMultipleProps extends AccordionBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
-export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface AccordionItemProps extends ComponentPropsWithRef<'div'>, SxProps {
     value: string;
     disabled?: boolean;
 }
-export type AccordionTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
-export type AccordionPanelProps = HTMLAttributes<HTMLDivElement>;
-export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
-    Trigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Panel: import("react").ForwardRefExoticComponent<AccordionPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+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;
+    Panel: typeof AccordionPanel;
 };
 export {};

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

@@ -1,11 +1,12 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+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<HTMLAttributes<HTMLDivElement>, '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,4 +21,7 @@ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
         dismiss?: AlertPartProps;
     };
 }
-export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+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;
+}

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

@@ -1,12 +1,13 @@
-import { type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type AvatarSize = 'sm' | 'md' | 'lg';
 export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
 export interface AvatarPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role' | 'aria-label'> {
+export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'role' | 'aria-label'>, SxProps {
     /** Used for the accessible name and the initials fallback. */
     name: string;
     src?: string;
@@ -20,4 +21,7 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'chil
         status?: AvatarPartProps;
     };
 }
-export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Avatar({ ref, name, src, size, status, statusLabel, slotProps, className, sx, ...rest }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Avatar {
+    var displayName: string;
+}