@jfrader/ui 0.1.1 → 0.2.0

package/dist/toast-B1PXuwZ4.js

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

package/dist/toast.js

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

package/dist/toggle-group-N_owicT0.js

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

package/dist/toggle-group.js

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

package/dist/tooltip-BJPisf60.js

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

package/dist/tooltip.js

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

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

@@ -1,4 +1,5 @@
-import { t as e } from "./css-CW_HG55W.js";
+'use client';
+import { t as e } from "./css-Cgj6sCHn.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,7 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 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'> {
     /** Allow closing the last open panel. */
     collapsible?: boolean;
 }
@@ -19,15 +19,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'> {
     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'>;
+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 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,11 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
 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'> {
     tone?: AlertTone;
     /** Announced tone word. Put visible meaning in the title text. */
     toneLabel?: string;
@@ -20,4 +20,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, ...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,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
 export type AvatarSize = 'sm' | 'md' | 'lg';
 export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
@@ -6,7 +6,7 @@ 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'> {
     /** Used for the accessible name and the initials fallback. */
     name: string;
     src?: string;
@@ -20,4 +20,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, ...rest }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Avatar {
+    var displayName: string;
+}

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
 export type BadgeVariant = 'standard' | 'dot';
 export type BadgeTone = 'accent' | 'danger' | 'neutral';
@@ -11,7 +11,7 @@ export interface BadgePartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends ComponentPropsWithRef<'span'> {
     children: ReactNode;
     badgeContent?: ReactNode;
     /** Numbers above `max` render as `max+`. */
@@ -33,4 +33,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * - Control with an explicit `aria-label`: put the count in the label (`aria-label="Inbox, 3 unread"`).
  * - Control named by its visible text: the count is read right after the control's name.
  */
-export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Badge({ ref, children, badgeContent, max, showZero, invisible, variant, tone, anchor, overlap, slotProps, className, ...rest }: BadgeProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Badge {
+    var displayName: string;
+}