@nxgt/material 3.48.0 → 3.50.0

package/dist/{icon-button-CN9r5TNE.js → icon-button-DSC2-IAG.js}

@@ -1,21 +1,21 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./use-shape-morph-BKA_R5P5.js";
-import { n, t as r } from "./dist-DVRQkaTK.js";
-import { o as i, t as a } from "./tooltip-CkttDIab.js";
-import { t as o } from "./is-production-GLw59WU8.js";
-import { a as s, i as c, n as l, r as u, t as d } from "./button-tones-BwuVvAmd.js";
-import { t as f } from "./button-group-context-CaP0X5p_.js";
-import { shapeOutline as p, toSvgPath as m } from "@nxgt/material-core/shapes";
-import { useContext as h, useEffect as g, useRef as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { t } from "./is-production-GLw59WU8.js";
+import { n } from "./use-shape-morph-BKA_R5P5.js";
+import { n as r, t as i } from "./dist-DVRQkaTK.js";
+import { n as a, r as o, t as s } from "./spinner-BpVwI1ps.js";
+import { a as c, i as l, n as u, o as d, r as f, s as p, t as m } from "./use-click-lock-BZYtTmVt.js";
+import { t as h } from "./button-group-context-CaP0X5p_.js";
+import { shapeOutline as g, toSvgPath as _ } from "@nxgt/material-core/shapes";
+import { useContext as v, useEffect as y, useRef as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region lib/components/ui/display/count-badge/format-count.ts
-function b(e, t = 99) {
+function C(e, t = 99) {
 	let n = Math.max(0, Math.round(e));
 	return n > t ? `${t}+` : String(n);
 }
 //#endregion
 //#region lib/components/ui/actions/icon-button/icon-button.compound-variants.ts
-var x = [
+var w = [
 	{
 		variant: "filled",
 		color: "primary",
@@ -54,37 +54,37 @@ var x = [
 	{
 		variant: "tonal",
 		color: "primary",
-		class: `${u.primary} ${d.primary} ${l.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${l.primary} ${u.primary} ${f.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "tonal",
 		color: "secondary",
-		class: `${u.secondary} ${d.secondary} ${l.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${l.secondary} ${u.secondary} ${f.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "tonal",
 		color: "success",
-		class: `${u.success} ${d.success} ${l.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${l.success} ${u.success} ${f.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "tonal",
 		color: "info",
-		class: `${u.info} ${d.info} ${l.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${l.info} ${u.info} ${f.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "tonal",
 		color: "warning",
-		class: `${u.warning} ${d.warning} ${l.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${l.warning} ${u.warning} ${f.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "tonal",
 		color: "error",
-		class: `${u.error} ${d.error} ${l.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${l.error} ${u.error} ${f.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "tonal",
 		color: "default",
-		class: `${u.default} ${d.default} ${l.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
+		class: `${l.default} ${u.default} ${f.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
 	},
 	{
 		variant: "ghost",
@@ -99,99 +99,99 @@ var x = [
 	{
 		variant: "ghost",
 		color: "secondary",
-		class: `${u.secondary} ${d.secondary} ${l.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${l.secondary} ${u.secondary} ${f.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "ghost",
 		color: "success",
-		class: `${u.success} ${d.success} ${l.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${l.success} ${u.success} ${f.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "ghost",
 		color: "info",
-		class: `${u.info} ${d.info} ${l.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${l.info} ${u.info} ${f.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "ghost",
 		color: "warning",
-		class: `${u.warning} ${d.warning} ${l.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${l.warning} ${u.warning} ${f.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "ghost",
 		color: "error",
-		class: `${u.error} ${d.error} ${l.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${l.error} ${u.error} ${f.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "outlined",
 		color: "primary",
-		class: `${u.primary} ${d.primary} ${l.primary} focus:bg-primary/10 hover:bg-primary/10`
+		class: `${l.primary} ${u.primary} ${f.primary} focus:bg-primary/10 hover:bg-primary/10`
 	},
 	{
 		variant: "outlined",
 		color: "secondary",
-		class: `${u.secondary} ${d.secondary} ${l.secondary} focus:bg-secondary/10 hover:bg-secondary/10`
+		class: `${l.secondary} ${u.secondary} ${f.secondary} focus:bg-secondary/10 hover:bg-secondary/10`
 	},
 	{
 		variant: "outlined",
 		color: "success",
-		class: `${u.success} ${d.success} ${l.success} focus:bg-success/10 hover:bg-success/10`
+		class: `${l.success} ${u.success} ${f.success} focus:bg-success/10 hover:bg-success/10`
 	},
 	{
 		variant: "outlined",
 		color: "info",
-		class: `${u.info} ${d.info} ${l.info} focus:bg-info/10 hover:bg-info/10`
+		class: `${l.info} ${u.info} ${f.info} focus:bg-info/10 hover:bg-info/10`
 	},
 	{
 		variant: "outlined",
 		color: "warning",
-		class: `${u.warning} ${d.warning} ${l.warning} focus:bg-warning/10 hover:bg-warning/10`
+		class: `${l.warning} ${u.warning} ${f.warning} focus:bg-warning/10 hover:bg-warning/10`
 	},
 	{
 		variant: "outlined",
 		color: "error",
-		class: `${u.error} ${d.error} ${l.error} focus:bg-error/10 hover:bg-error/10`
+		class: `${l.error} ${u.error} ${f.error} focus:bg-error/10 hover:bg-error/10`
 	},
 	{
 		variant: "outlined",
 		color: "default",
-		class: `${u.default} ${d.default} ${l.default} focus:bg-foreground/10 hover:bg-foreground/10`
+		class: `${l.default} ${u.default} ${f.default} focus:bg-foreground/10 hover:bg-foreground/10`
 	},
 	{
 		variant: "link",
 		color: "primary",
-		class: `${u.primary} ${d.primary} ${l.primary} underline-offset-4 hover:underline hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${l.primary} ${u.primary} ${f.primary} underline-offset-4 hover:underline hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "link",
 		color: "secondary",
-		class: `${u.secondary} ${d.secondary} ${l.secondary} underline-offset-4 hover:underline hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${l.secondary} ${u.secondary} ${f.secondary} underline-offset-4 hover:underline hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "link",
 		color: "success",
-		class: `${u.success} ${d.success} ${l.success} underline-offset-4 hover:underline hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${l.success} ${u.success} ${f.success} underline-offset-4 hover:underline hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "link",
 		color: "info",
-		class: `${u.info} ${d.info} ${l.info} underline-offset-4 hover:underline hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${l.info} ${u.info} ${f.info} underline-offset-4 hover:underline hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "link",
 		color: "warning",
-		class: `${u.warning} ${d.warning} ${l.warning} underline-offset-4 hover:underline hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${l.warning} ${u.warning} ${f.warning} underline-offset-4 hover:underline hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "link",
 		color: "error",
-		class: `${u.error} ${d.error} ${l.error} underline-offset-4 hover:underline hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${l.error} ${u.error} ${f.error} underline-offset-4 hover:underline hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "link",
 		color: "default",
-		class: `${u.default} ${d.default} ${l.default} underline-offset-4 hover:underline hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
+		class: `${l.default} ${u.default} ${f.default} underline-offset-4 hover:underline hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
 	}
-], S = i("inline-flex center gap-2 cursor-pointer whitespace-nowrap text-sm font-medium disabled:pointer-events-none [&_svg]:bg-transparent [&_svg]:text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--btn-ic,1rem) shrink-0 [&_svg]:shrink-0", {
+], T = a("inline-flex center gap-2 cursor-pointer whitespace-nowrap text-sm font-medium disabled:pointer-events-none [&_svg]:bg-transparent [&_svg]:text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--btn-ic,1rem) shrink-0 [&_svg]:shrink-0", {
 	variants: {
 		look: {
 			btn: "nxgt-btn nxgt-morph-fill aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)]",
@@ -226,22 +226,45 @@ var x = [
 		size: "legacy",
 		width: "default"
 	},
-	compoundVariants: [...x, {
+	compoundVariants: [...w, {
 		look: "btn",
 		size: "legacy",
 		width: "default",
 		class: "[--btn-round:50%]"
 	}]
 });
-function C(e) {
-	return (t) => S({
+function E(e) {
+	return (t) => T({
 		...t,
 		look: e,
 		size: t?.size ?? "legacy",
 		color: t?.variant === "ghost" && t.color == null ? "default" : t?.color
 	});
 }
-var w = C("btn"), T = C("shaped"), E = {
+var D = E("btn"), O = E("shaped");
+//#endregion
+//#region lib/components/ui/actions/icon-button/icon-button-busy.tsx
+function k(e, t) {
+	let n = m(!1, e);
+	return {
+		busyClassName: e ? "relative [&_[data-slot=icon]]:invisible" : void 0,
+		hostProps: {
+			"aria-disabled": e || t["aria-disabled"],
+			"aria-busy": e || t["aria-busy"],
+			onClickCapture: d(e, n, t.onClickCapture)
+		}
+	};
+}
+function A({ variant: e, color: t }) {
+	return /* @__PURE__ */ x(s, {
+		variant: "2",
+		color: e === "filled" ? "light" : t ?? (e === "ghost" ? "default" : "primary"),
+		className: "absolute inset-0 m-auto size-(--btn-ic,1rem)"
+	});
+}
+//#endregion
+//#region lib/components/ui/actions/icon-button/icon-button-surface.ts
+var j = {
 	filled: {
 		primary: "fill-primary",
 		secondary: "fill-secondary dark:fill-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))]",
@@ -288,87 +311,96 @@ var w = C("btn"), T = C("shaped"), E = {
 		default: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50"
 	}
 };
-function D({ shape: n, variant: r, color: i }) {
-	let a = p(n), o = _(null);
-	return t(o, a, !0), /* @__PURE__ */ v("svg", {
+function M({ shape: t, variant: r, color: i }) {
+	let a = g(t), o = b(null);
+	return n(o, a, !0), /* @__PURE__ */ x("svg", {
 		"data-slot": "icon-button-shape",
 		viewBox: "0 0 100 100",
 		"aria-hidden": "true",
 		focusable: "false",
 		className: e("-z-10 pointer-events-none absolute inset-0 size-full overflow-visible transition-[filter]", r === "filled" && "group-hover/icon-button:brightness-90 group-active/icon-button:brightness-80"),
-		children: /* @__PURE__ */ v("path", {
+		children: /* @__PURE__ */ x("path", {
 			ref: o,
-			d: m(a),
+			d: _(a),
 			vectorEffect: "non-scaling-stroke",
 			paintOrder: "stroke",
-			className: e("stroke-transparent stroke-1 transition-[fill]", E[r][i], "group-focus-visible/icon-button:stroke-ring/50 group-focus-visible/icon-button:stroke-[6px]", "forced-colors:fill-none forced-colors:stroke-[ButtonText] forced-colors:group-focus-visible/icon-button:stroke-[Highlight]")
+			className: e("stroke-transparent stroke-1 transition-[fill]", j[r][i], "group-focus-visible/icon-button:stroke-ring/50 group-focus-visible/icon-button:stroke-[6px]", "forced-colors:fill-none forced-colors:stroke-[ButtonText] forced-colors:group-focus-visible/icon-button:stroke-[Highlight]")
 		})
 	});
 }
+function N(e, n) {
+	let r = !!e && n != null && n !== "default";
+	y(() => {
+		r && !t() && console.warn("IconButton: `width` is ignored with `shape`; a shaped button is as wide as it is high.");
+	}, [r]);
+}
 //#endregion
 //#region lib/components/ui/actions/icon-button/icon-button.tsx
-function O(e) {
-	return e === void 0 || !Number.isFinite(e) || e < .5 ? null : b(e);
+function P(e) {
+	return e === void 0 || !Number.isFinite(e) || e < .5 ? null : C(e);
 }
-function k({ variant: t, color: i, size: a, width: c, className: l, asChild: u, type: d = "button", shape: p, morph: m = "pill", badge: _, badgeTone: b = "primary", children: x, ...S }) {
-	let C = u ? r : "button", E = h(f), k = a ?? E, A = !!(S["aria-label"] || S["aria-labelledby"]), j = !!p && c != null && c !== "default";
-	g(() => {
-		j && !o() && console.warn("IconButton: `width` is ignored with `shape`; a shaped button is as wide as it is high.");
-	}, [j]);
-	let M = !p && m !== "none" && S["aria-pressed"] !== void 0, N = O(_), P = S["aria-pressed"] === !0 || S["aria-pressed"] === "true";
-	return /* @__PURE__ */ v(s, {
-		value: A,
-		children: /* @__PURE__ */ y(C, {
+function F({ variant: t, color: n, size: a, width: o, className: s, asChild: c, type: l = "button", shape: u, morph: d = "pill", badge: f, badgeTone: m = "primary", loading: g = !1, children: _, ...y }) {
+	let b = c ? i : "button", C = v(h), w = a ?? C, T = !!(y["aria-label"] || y["aria-labelledby"]);
+	N(u, o);
+	let E = !u && d !== "none" && y["aria-pressed"] != null, j = P(f), F = String(y["aria-pressed"]) === "true", I = k(g, y);
+	return /* @__PURE__ */ x(p, {
+		value: T,
+		children: /* @__PURE__ */ S(b, {
 			"data-slot": "icon-button",
 			"data-icon-button": "",
 			"data-variant": t ?? "filled",
-			"data-color": i,
-			type: u ? void 0 : d,
-			"data-size": k,
-			"data-shape": p,
-			"data-morph": M ? m : void 0,
-			"data-selected": M && P ? "true" : void 0,
-			className: e(p ? T({
+			"data-color": n,
+			type: c ? void 0 : l,
+			"data-size": w,
+			"data-shape": u,
+			"data-morph": E ? d : void 0,
+			"data-selected": E && F ? "true" : void 0,
+			className: e(u ? O({
 				variant: t,
-				color: i,
-				size: k
-			}) : w({
+				color: n,
+				size: w
+			}) : D({
 				variant: t,
-				color: i,
-				size: k,
-				width: c
-			}), p && "group/icon-button nxgt-touch-target relative isolate bg-transparent! border-0! shadow-none! ring-0! focus-visible:ring-0! aria-invalid:ring-0! forced-colors:[&_svg]:stroke-[ButtonText] forced-colors:[&_svg]:text-[ButtonText]", l),
-			...S,
+				color: n,
+				size: w,
+				width: o
+			}), u && "group/icon-button nxgt-touch-target relative isolate bg-transparent! border-0! shadow-none! ring-0! focus-visible:ring-0! aria-invalid:ring-0! forced-colors:[&_svg]:stroke-[ButtonText] forced-colors:[&_svg]:text-[ButtonText]", I.busyClassName, s),
+			...y,
+			...I.hostProps,
 			children: [
-				p ? /* @__PURE__ */ v(D, {
-					shape: p,
+				u ? /* @__PURE__ */ x(M, {
+					shape: u,
 					variant: t ?? "filled",
-					color: i ?? (t === "ghost" ? "default" : "primary")
+					color: n ?? (t === "ghost" ? "default" : "primary")
 				}) : null,
-				/* @__PURE__ */ v(n, { children: x }),
-				N === null ? null : /* @__PURE__ */ v("span", {
+				/* @__PURE__ */ x(r, { children: _ }),
+				g && /* @__PURE__ */ x(A, {
+					variant: t ?? "filled",
+					color: n
+				}),
+				j === null ? null : /* @__PURE__ */ x("span", {
 					"data-slot": "icon-button-badge",
 					"aria-hidden": "true",
-					"data-tone": b,
+					"data-tone": m,
 					className: "nxgt-icon-button-badge",
-					children: N
+					children: j
 				})
 			]
 		})
 	});
 }
-function A({ tooltip: e, "aria-label": t, ...n }) {
+function I({ tooltip: e, "aria-label": t, ...n }) {
 	let r = t ?? (typeof e == "string" ? e : void 0);
-	return e ? /* @__PURE__ */ v(a, {
+	return e ? /* @__PURE__ */ x(o, {
 		content: e,
-		children: /* @__PURE__ */ v(k, {
+		children: /* @__PURE__ */ x(F, {
 			"aria-label": r,
 			...n
 		})
-	}) : /* @__PURE__ */ v(k, {
+	}) : /* @__PURE__ */ x(F, {
 		"aria-label": r,
 		...n
 	});
 }
 //#endregion
-export { w as n, b as r, A as t };
+export { D as n, C as r, I as t };

package/dist/lib/components/ui/actions/action-card/action-card-semantics.d.ts

@@ -8,16 +8,33 @@ type Div = ComponentProps<'div'>;
  * the tag of the title (a button's children are presentational: a heading only
  * where the card is plain).
  */
-export declare function actionCardSemantics({ active, disabled, hasIcon, role, tabIndex, onClick, onKeyDown, onKeyUp, }: {
+export declare function actionCardSemantics({ hasAction, active, disabled, hasIcon, role, ariaChecked, tabIndex, onClick, onKeyDown, onKeyUp, }: {
+    /** The card has an `action`: the title becomes its one button and the root stays plain. */
+    hasAction?: boolean;
     active: boolean | undefined;
     disabled: boolean;
     hasIcon: boolean;
+    /** The caller's `aria-checked`: it follows a `role` other than `button` onto the title button. */
+    ariaChecked?: Div['aria-checked'];
 } & Pick<Div, 'role' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onKeyUp'>): {
-    Title: "span" | "h3";
+    Title: "span";
+    button: Pick<ComponentProps<"button">, "role" | "aria-checked" | "aria-pressed" | "disabled" | "onClick" | "onKeyDown" | "onKeyUp">;
+    attributes: {
+        'data-slot': string;
+        'data-icon': string | undefined;
+        'data-has-action': string;
+        'data-disabled': string | undefined;
+        'data-active': string | undefined;
+        'data-interactive': string;
+    };
+} | {
+    Title: "h3" | "span";
+    button: undefined;
     attributes: {
         onClick: (event: import('react').MouseEvent<HTMLDivElement>) => void;
         onKeyDown: (event: import('react').KeyboardEvent<HTMLDivElement>) => void;
         onKeyUp: (event: import('react').KeyboardEvent<HTMLDivElement>) => void;
+        'data-has-action': string | undefined;
         'data-slot': string;
         'data-icon': string | undefined;
         role: import('react').AriaRole | undefined;
@@ -29,4 +46,10 @@ export declare function actionCardSemantics({ active, disabled, hasIcon, role, t
         'data-interactive': string | undefined;
     };
 };
+/**
+ * The props that stay on the root: with a title button it owns the role, the
+ * state and the name, so the caller's `aria-checked` and `aria-label` are not
+ * applied to the plain `div`.
+ */
+export declare function actionCardRootProps<P extends Div>(props: P, hasButton: boolean): P;
 export {};

package/dist/lib/components/ui/actions/action-card/action-card.d.ts

@@ -2,9 +2,25 @@ import { ComponentProps, ReactNode } from 'react';
 export type ActionCardProps = {
     active?: boolean;
     icon?: ReactNode;
-    variant?: 'sm' | 'md';
+    /** `tile` is a compact grid cell: no minimum width, no indicator unless `withIndicator`. */
+    variant?: 'sm' | 'md' | 'tile';
     title?: ReactNode;
     description?: ReactNode;
+    /** A line under the title: a string or number becomes a soft `Badge`, a node is shown as given (pass a toned `Badge`). */
+    status?: ReactNode;
+    /** A secondary line, one line with an ellipsis; a tooltip shows it whole only while it is clipped. */
+    meta?: ReactNode;
+    /**
+     * A trailing control (a `RowMenu`, an `IconButton`) in its own area, outside
+     * the card's press surface. With it, a card that chooses or reacts is a
+     * plain `div` whose title is the one button, named after the title, the
+     * status and the meta and described by the `description`; the action is its
+     * second tab stop. `title` is required then. A `role` (`switch`, `checkbox`,
+     * `radio`) and its `aria-checked` move to the button; `aria-label` is not
+     * applied. The card's `disabled` does not reach the action: disable its
+     * control too. Without it, nothing changes.
+     */
+    action?: ReactNode;
     withIndicator?: boolean;
     /**
      * Out of reach: `aria-disabled`, off the Tab order, no click and no key.
@@ -12,4 +28,4 @@ export type ActionCardProps = {
      */
     disabled?: boolean;
 } & Omit<ComponentProps<'div'>, 'title'>;
-export declare function ActionCard({ icon, active, className, title, description, variant, tabIndex, withIndicator, disabled, role, onClick, onKeyDown, onKeyUp, ...props }: ActionCardProps): import("react").JSX.Element;
+export declare function ActionCard({ icon, active, className, title, description, status, meta, action, variant, tabIndex, withIndicator, disabled, role, onClick, onKeyDown, onKeyUp, ...props }: ActionCardProps): import("react").JSX.Element;

package/dist/lib/components/ui/actions/action-card/partials/action-card-icon.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/** The card's leading icon in a circle that morphs to a filled cookie when chosen. */
+export declare function ActionCardIcon({ active, children, }: {
+    active: boolean | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/actions/action-card/partials/action-card-meta.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+/**
+ * The card's secondary line: one line with an ellipsis, the full text always
+ * in the DOM. Its tooltip shows the whole text only while the line is clipped
+ * and the card's pressable element is `revealed` (hovered or focused), and it
+ * takes no tab stop of its own. The pointer crossing the line or leaving the
+ * tooltip changes nothing (the card owns hover and focus): only Escape
+ * dismisses it.
+ */
+export declare function ActionCardMeta({ id, revealed, onDismiss, children, }: {
+    id: string;
+    revealed: boolean;
+    onDismiss: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/actions/action-card/partials/action-card-status.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/** The line under the title: text becomes a soft badge, a node is shown as given. */
+export declare function ActionCardStatus({ id, children, }: {
+    id: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/actions/action-card/partials/action-card-text.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps, ElementType, ReactNode } from 'react';
+import { useActionCardNames } from '../use-action-card-names.js';
+import { useReveal } from '../use-reveal.js';
+import { ActionCardTitleButton } from './action-card-title-button.js';
+/**
+ * The card's text block: the title (the card's one button when it has an
+ * `action`, else a heading or a span), the description, the status and the
+ * meta line. With an `action` the button is always there, named after the
+ * status and the meta when there is no title.
+ */
+export declare function ActionCardText({ title, description, status, meta, Title, button, names, reveal, }: {
+    title: ReactNode;
+    description: ReactNode;
+    status: ReactNode;
+    meta: ReactNode;
+    Title: ElementType;
+    button: Omit<ComponentProps<typeof ActionCardTitleButton>, 'id' | 'labelledBy' | 'describedBy' | 'children'> | undefined;
+    names: ReturnType<typeof useActionCardNames>;
+    reveal: ReturnType<typeof useReveal>;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/actions/action-card/partials/action-card-title-button.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * The title of a card that has an `action`: the card's one button. Its
+ * `::after` is stretched over the card (action-card-tile.css), so the whole
+ * card presses it, and the action sits above it as a sibling, never inside.
+ * Named after the title, the status and the meta line together, and described
+ * by the card's description.
+ */
+export declare function ActionCardTitleButton({ id, labelledBy, describedBy, children, ...props }: {
+    id: string;
+    labelledBy: string | undefined;
+    describedBy: string | undefined;
+    children?: ReactNode;
+} & Omit<ComponentProps<'button'>, 'children' | 'id'>): import("react").JSX.Element;

package/dist/lib/components/ui/actions/action-card/partials/action-card-trail.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/** The card's trailing parts: its `action` in its own area, then the indicator. */
+export declare function ActionCardTrail({ action, withIndicator, }: {
+    action: ReactNode;
+    withIndicator: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/actions/action-card/use-action-card-names.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The ids a card's parts carry, and what the button of a card with an
+ * `action` is named and described after: the title, then the status, then the
+ * meta line for its name (only those the card shows; undefined when none is,
+ * as an empty string would give the button no name at all), and the
+ * description for its description.
+ */
+export declare function useActionCardNames(has: {
+    title: boolean;
+    description: boolean;
+    status: boolean;
+    meta: boolean;
+}): {
+    ids: {
+        title: string;
+        description: string;
+        status: string;
+        meta: string;
+    };
+    labelledBy: string | undefined;
+    describedBy: string | undefined;
+};

package/dist/lib/components/ui/actions/action-card/use-reveal.d.ts

@@ -0,0 +1,23 @@
+import { FocusEvent, PointerEvent } from 'react';
+type Own = {
+    onPointerEnter?: (event: PointerEvent<never>) => void;
+    onPointerLeave?: (event: PointerEvent<never>) => void;
+    onFocus?: (event: FocusEvent<never>) => void;
+    onBlur?: (event: FocusEvent<never>) => void;
+};
+/**
+ * Whether a card's meta line is revealed: its pressable element is hovered by
+ * a mouse or a pen (a tap leaves no hover) or has focus. `bind(own)` returns
+ * the four handlers, calling the caller's own first. `dismiss` clears both.
+ */
+export declare function useReveal(): {
+    revealed: boolean;
+    dismiss: () => void;
+    bind: (own?: Own) => {
+        onPointerEnter: (event: PointerEvent<never>) => void;
+        onPointerLeave: (event: PointerEvent<never>) => void;
+        onFocus: (event: FocusEvent<never>) => void;
+        onBlur: (event: FocusEvent<never>) => void;
+    };
+};
+export {};

package/dist/lib/components/ui/actions/button/button.variants.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 declare const buttonVariantsByColor: (props?: ({
-    variant?: "tonal" | "filled" | "link" | "ghost" | "outlined" | null | undefined;
+    variant?: "link" | "tonal" | "filled" | "ghost" | "outlined" | null | undefined;
     color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | null | undefined;
     size?: "lg" | "sm" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "xs" | "xl" | "2xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/ui/actions/icon-button/icon-button-busy.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+type Props = ComponentProps<'button'>;
+/**
+ * What `loading` adds to an `IconButton`'s host, as `Button`'s: `aria-busy`
+ * and `aria-disabled` (which win over the caller's while busy, and stand when
+ * idle), every click blocked, and the classes that hide the icon and anchor the
+ * spinner. Spread it after the caller's props.
+ */
+export declare function useBusyProps(loading: boolean, props: Props): {
+    busyClassName: string | undefined;
+    hostProps: {
+        'aria-disabled': (boolean | "false" | "true") | undefined;
+        'aria-busy': (boolean | "false" | "true") | undefined;
+        onClickCapture: (event: import('react').MouseEvent<HTMLButtonElement>) => void;
+    };
+};
+/** The busy spinner, over the icon's place; the icon keeps its room, hidden. */
+export declare function IconButtonSpinner({ variant, color, }: {
+    variant: string;
+    color: string | null | undefined;
+}): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/actions/icon-button/icon-button-shape.d.ts

@@ -22,3 +22,5 @@ export declare function IconButtonShape({ shape, variant, color, }: {
     variant: IconButtonVariant;
     color: IconButtonColor;
 }): import("react").JSX.Element;
+/** A `width` other than the default is ignored with a `shape`: a warning in development. */
+export declare function useIgnoredWidthWarning(shape: ShapeName | undefined, width: string | null | undefined): void;