@jfrader/ui 0.0.0-stage → 0.1.0

package/dist/toast-D_dnqnn-.js

@@ -0,0 +1,270 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { n as t } from "./media-8K3xDAxM.js";
+import { t as n } from "./renderable-DwPvt1I8.js";
+import { t as r } from "./button-qy-50NPd.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 { 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({
+	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"
+	},
+	[t]: { 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
+		})
+	});
+}
+var R = a(function(e, t) {
+	let { toasts: n } = F("Viewport"), r = d(null), [i, a] = f(null);
+	return c(() => {
+		a(r.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)] });
+});
+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) => {
+		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() : [], n = !1;
+		return Promise.allSettled(t.map((e) => e.finished)).then(() => {
+			n || i(l);
+		}), () => {
+			n = !0;
+		};
+	}, [
+		p,
+		i,
+		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: [n(_) && /* @__PURE__ */ h("div", {
+				css: A,
+				children: _
+			}), n(v) && /* @__PURE__ */ h("div", {
+				css: j,
+				children: v
+			})] })
+		}), T && /* @__PURE__ */ g("div", {
+			css: N,
+			children: [/* @__PURE__ */ h(r, {
+				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(r, {
+					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"
+		})]
+	});
+}
+var V = Object.assign(L, {
+	Provider: L,
+	Viewport: R
+});
+//#endregion
+export { I as n, V as t };

package/dist/toast.js

@@ -0,0 +1 @@
+export { t as Toast, n as useToast } from "./toast-D_dnqnn-.js";

package/dist/toggle-group-B7gXCea8.js

@@ -0,0 +1,150 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { t } from "./focus-ring-qOS3rPlM.js";
+import { n, t as r } from "./media-8K3xDAxM.js";
+import { n as i, r as a, t as o } from "./roving-focus-DeEZ55-T.js";
+import { t as s } from "./use-controlled-state-DQXkiTQI.js";
+import { createContext as c, forwardRef 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 = c(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": { ...t },
+	[n]: { transitionDuration: "0s" },
+	[r]: { "&[aria-pressed=\"true\"]": {
+		backgroundColor: "SelectedItem",
+		borderColor: "SelectedItem",
+		color: "SelectedItemText"
+	} }
+}), D = l(function({ type: e = "single", value: t, defaultValue: n, onValueChange: r, orientation: c = "horizontal", disabled: l = !1, allowEmpty: u = !1, label: g, "aria-label": y, onKeyDown: b, ...C }, E) {
+	let [D, O] = s(t, n, r), [k, A] = h(null), j = m(null);
+	f(E, () => j.current, []);
+	let M = p(() => x(D, e), [D, e]), N = p(() => ({
+		pressed: M,
+		toggle: (t) => {
+			let n = M.includes(t);
+			e === "multiple" ? O(n ? M.filter((e) => e !== t) : [...M, t]) : n ? u && O("") : O(t);
+		},
+		focused: k,
+		setFocused: A,
+		disabled: l
+	}), [
+		M,
+		O,
+		e,
+		u,
+		k,
+		l
+	]);
+	d(() => {
+		let e = j.current;
+		if (!e) return;
+		let t = a(e, S);
+		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) => {
+		b?.(e);
+		let t = j.current;
+		!e.defaultPrevented && t && i(e, t, c, S);
+	};
+	return /* @__PURE__ */ _(v.Provider, {
+		value: N,
+		children: /* @__PURE__ */ _("div", {
+			...C,
+			ref: j,
+			role: "group",
+			"aria-label": g ?? y,
+			"aria-disabled": l || void 0,
+			"data-ui": "toggle-group-root",
+			"data-type": e,
+			"data-orientation": c,
+			onKeyDown: P,
+			css: [w, T[c]]
+		})
+	});
+}), O = l(function({ value: e, disabled: t, onClick: n, onFocus: r, ...i }, a) {
+	let { pressed: o, toggle: s, focused: c, setFocused: l, disabled: u } = y("Item"), d = u || t, f = o.includes(e), p = !d && (c === null ? o[0] === e : c === e), m = (t) => {
+		n?.(t), !t.defaultPrevented && s(e);
+	}, h = (t) => {
+		r?.(t), l(e);
+	};
+	return /* @__PURE__ */ _("button", {
+		...i,
+		ref: a,
+		type: "button",
+		"aria-pressed": f,
+		"data-ui": "toggle-group-item",
+		"data-value": e,
+		"data-state": f ? "on" : "off",
+		tabIndex: p ? 0 : -1,
+		disabled: d,
+		onClick: m,
+		onFocus: h,
+		css: E
+	});
+}), k = Object.assign(D, { Item: O });
+//#endregion
+export { k as t };

package/dist/toggle-group.js

@@ -0,0 +1 @@
+export { t as ToggleGroup } from "./toggle-group-B7gXCea8.js";

package/dist/tooltip-BJ2hLV1b.js

@@ -0,0 +1,92 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { t } from "./use-controlled-state-DQXkiTQI.js";
+import { t as n } from "./trigger-style-f54idgjT.js";
+import { t as r } from "./use-overlay-floating-CsZd3qxa.js";
+import { createContext as i, forwardRef 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 = i(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: n = !1, onOpenChange: i, placement: a = "top", openDelay: o = _, closeDelay: c = v, children: u }) {
+	let [h = !1, b] = t(e, n, i), { refs: x, floatingStyles: S, context: C } = r({
+		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
+	});
+}
+var C = a(function({ "aria-describedby": e, ...t }, r) {
+	let { refs: i, getReferenceProps: a } = b("Trigger"), o = h([i.setReference, r]), s = a(t), c = [e, s["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ l("button", {
+		type: "button",
+		...s,
+		ref: o,
+		"aria-describedby": c,
+		"data-ui": "tooltip-trigger",
+		css: n
+	});
+}), w = a(function({ style: e, ...t }, n) {
+	let { open: r, refs: i, floatingStyles: a, getFloatingProps: o } = b("Content"), s = h([i.setFloating, n]);
+	if (!r) return null;
+	let { tabIndex: c, ...d } = o(t);
+	return /* @__PURE__ */ l(u, { children: /* @__PURE__ */ l("div", {
+		...d,
+		ref: s,
+		"data-ui": "tooltip",
+		style: {
+			...e,
+			...a
+		},
+		css: x
+	}) });
+}), T = Object.assign(S, {
+	Trigger: C,
+	Content: w
+});
+//#endregion
+export { T as t };

package/dist/tooltip.js

@@ -0,0 +1 @@
+export { t as Tooltip } from "./tooltip-BJ2hLV1b.js";

package/dist/trigger-style-f54idgjT.js

@@ -0,0 +1,35 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { vars as t } from "@jfrader/tokens/vars";
+//#region src/styling/trigger-style.ts
+var n = e({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	border: `1px solid ${t.color.borderControl}`,
+	borderRadius: t.radius.md,
+	backgroundColor: t.color.surfaceRaised,
+	minBlockSize: "40px",
+	paddingBlock: t.space[2],
+	paddingInline: t.space[4],
+	font: "inherit",
+	fontSize: t.textSize.sm,
+	fontWeight: t.fontWeight.medium,
+	color: t.color.text,
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: t.motion.duration.fast,
+	transitionTimingFunction: t.motion.easeStandard,
+	"&:hover:not(:disabled)": { backgroundColor: t.color.surfaceHover },
+	"&:focus-visible": {
+		outline: `2px solid ${t.color.focusRing}`,
+		outlineOffset: "2px"
+	},
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"@media (prefers-reduced-motion: reduce)": { transitionDuration: "0s" }
+});
+//#endregion
+export { n as t };

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

@@ -0,0 +1,33 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+export type AccordionType = 'single' | 'multiple';
+export type AccordionValue = string | string[];
+interface AccordionBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Allow closing the last open panel. */
+    collapsible?: boolean;
+}
+export interface AccordionSingleProps extends AccordionBaseProps {
+    type?: 'single';
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface AccordionMultipleProps extends AccordionBaseProps {
+    /** Allow several panels open at once. */
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    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 {};

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

@@ -0,0 +1,2 @@
+export { Accordion } from './accordion';
+export type { AccordionItemProps, AccordionMultipleProps, AccordionPanelProps, AccordionProps, AccordionSingleProps, AccordionTriggerProps, AccordionType, AccordionValue, } from './accordion';

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

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type 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'> {
+    tone?: AlertTone;
+    /** Announced tone word. Put visible meaning in the title text. */
+    toneLabel?: string;
+    title?: ReactNode;
+    children?: ReactNode;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    slotProps?: {
+        root?: AlertPartProps;
+        title?: AlertPartProps;
+        body?: AlertPartProps;
+        dismiss?: AlertPartProps;
+    };
+}
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { Alert } from './alert';
+export type { AlertProps, AlertPartProps, AlertTone } from './alert';

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

@@ -0,0 +1,23 @@
+import { type HTMLAttributes } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+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'> {
+    /** Used for the accessible name and the initials fallback. */
+    name: string;
+    src?: string;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    /** Spoken status word; defaults to the `status` value. Pass a translated word for other locales. */
+    statusLabel?: string;
+    slotProps?: {
+        image?: AvatarPartProps;
+        fallback?: AvatarPartProps;
+        status?: AvatarPartProps;
+    };
+}
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,2 @@
+export { Avatar } from './avatar';
+export type { AvatarPartProps, AvatarProps, AvatarSize, AvatarStatus } from './avatar';

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

@@ -0,0 +1,36 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+export type BadgeVariant = 'standard' | 'dot';
+export type BadgeTone = 'accent' | 'danger' | 'neutral';
+export type BadgeOverlap = 'rectangular' | 'circular';
+export type BadgeAnchor = {
+    vertical?: 'top' | 'bottom';
+    horizontal?: 'start' | 'end';
+};
+export interface BadgePartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    badgeContent?: ReactNode;
+    /** Numbers above `max` render as `max+`. */
+    max?: number;
+    /** Shows the marker when `badgeContent` is 0. */
+    showZero?: boolean;
+    invisible?: boolean;
+    variant?: BadgeVariant;
+    tone?: BadgeTone;
+    anchor?: BadgeAnchor;
+    overlap?: BadgeOverlap;
+    slotProps?: {
+        root?: BadgePartProps;
+        badge?: BadgePartProps;
+    };
+}
+/**
+ * The marker text never joins the wrapped control's accessible name.
+ * - 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>>;

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

@@ -0,0 +1,2 @@
+export { Badge } from './badge';
+export type { BadgeAnchor, BadgeOverlap, BadgePartProps, BadgeProps, BadgeTone, BadgeVariant } from './badge';