@nxgt/material 3.48.0 → 3.50.0

package/lib/components/ui/actions/action-card/action-card-tile.css

@@ -0,0 +1,141 @@
+/* biome-ignore-all lint/style/noDescendingSpecificity: states are grouped by meaning, not by specificity */
+/* ActionCard status, meta, action and the tile variant. Loaded after
+ * action-card.css and the indicator. With an `action` the title is the card's
+ * one button: its ::after covers the card, and the action sits above it. */
+@layer components {
+	.nxgt-action-card-status {
+		display: flex;
+		margin-top: 4px;
+		min-width: 0;
+	}
+	.nxgt-action-card-meta {
+		display: block;
+		margin-top: 2px;
+		min-width: 0;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		color: color-mix(in oklab, var(--card-foreground) 70%, var(--card));
+	}
+
+	/* The title button: the card's press surface. */
+	.nxgt-action-card-button {
+		display: inline;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		letter-spacing: inherit;
+		text-align: start;
+		cursor: pointer;
+		outline: none;
+	}
+	.nxgt-action-card-button::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		z-index: 0;
+	}
+	.nxgt-action-card-button:disabled {
+		cursor: not-allowed;
+	}
+	.nxgt-action-card:has(.nxgt-action-card-button:focus-visible) {
+		outline: 3px solid var(--ac-ring);
+		outline-offset: -3px;
+	}
+
+	/* The action: its own grid area, above the stretched button. */
+	.nxgt-action-card-action {
+		grid-area: act;
+		position: relative;
+		z-index: 1;
+		justify-self: end;
+		display: inline-flex;
+		margin-inline-end: -8px;
+	}
+	.nxgt-action-card[data-has-action] {
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		grid-template-areas: "icon text act ind";
+	}
+	.nxgt-action-card[data-has-action][data-size="md"] {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-areas: "icon act ind" "text text text";
+	}
+	.nxgt-action-card[data-has-action][data-size="md"]:not([data-icon]) {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+		grid-template-areas: "text act ind";
+	}
+
+	/* Tile: a compact grid cell, title and action on the first row, then the
+	 * status, the description and the meta line, each full width. The text
+	 * wrapper dissolves so its children take the areas. */
+	.nxgt-action-card[data-size="tile"] {
+		grid-template-columns: minmax(0, 1fr) auto;
+		grid-template-areas: "title act" "status status" "desc desc" "meta meta";
+		align-items: start;
+		/* A taller neighbour stretches the card: keep the rows at the top. */
+		align-content: start;
+		row-gap: 0;
+		column-gap: 8px;
+		min-height: 0;
+		min-width: 0;
+		padding-block: 12px;
+		padding-inline: 16px 12px;
+	}
+	.nxgt-action-card[data-size="tile"][data-icon] {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-areas:
+			"icon title act"
+			". status status"
+			". desc desc"
+			". meta meta";
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-icon {
+		width: 36px;
+		height: 36px;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-text {
+		display: contents;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-title {
+		grid-area: title;
+		align-self: center;
+		min-height: 36px;
+		display: flex;
+		align-items: center;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-description {
+		grid-area: desc;
+		margin-top: 2px;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-status {
+		grid-area: status;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-meta {
+		grid-area: meta;
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action]
+		.nxgt-action-card-action {
+		align-self: start;
+	}
+
+	@media (forced-colors: active) {
+		.nxgt-action-card:has(.nxgt-action-card-button:focus-visible) {
+			outline: 3px solid CanvasText;
+			outline-offset: -5px;
+		}
+		.nxgt-action-card-meta {
+			color: CanvasText;
+		}
+		/* a chosen tile's border is 2px here: the content keeps its place */
+		.nxgt-action-card[data-size="tile"][data-active] {
+			padding-block: 11px;
+			padding-inline: 15px 11px;
+		}
+	}
+}

package/lib/components/ui/actions/action-card/action-card.css

@@ -125,13 +125,43 @@
 	.nxgt-action-card[data-interactive]:not([data-disabled]) {
 		cursor: pointer;
 	}
-	.nxgt-action-card[data-interactive]:not([data-disabled]):hover {
+	.nxgt-action-card[data-interactive]:not(
+		[data-has-action],
+		[data-disabled]
+	):hover {
 		--ac-tint: 11%;
 	}
-	.nxgt-action-card[data-interactive][data-active]:not([data-disabled]):hover {
+	.nxgt-action-card[data-interactive][data-active]:not(
+		[data-has-action],
+		[data-disabled]
+	):hover {
 		--ac-tint: 21%;
 	}
-	.nxgt-action-card[data-interactive]:not([data-disabled]):active {
+	.nxgt-action-card[data-interactive]:not(
+		[data-has-action],
+		[data-disabled]
+	):active {
+		--ac-tint: 15%;
+		--ac-r: 16px;
+		scale: 0.97;
+	}
+
+	/* With an action, only the title button answers hover and press (its
+	 * stretched ::after covers the card, padding included); the action does
+	 * not. The rules above leave these cards to the ones below. */
+	.nxgt-action-card[data-has-action][data-interactive]:not([data-disabled]):has(
+		.nxgt-action-card-button:hover
+	) {
+		--ac-tint: 11%;
+	}
+	.nxgt-action-card[data-has-action][data-interactive][data-active]:not(
+		[data-disabled]
+	):has(.nxgt-action-card-button:hover) {
+		--ac-tint: 21%;
+	}
+	.nxgt-action-card[data-has-action][data-interactive]:not([data-disabled]):has(
+		.nxgt-action-card-button:active
+	) {
 		--ac-tint: 15%;
 		--ac-r: 16px;
 		scale: 0.97;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.48.0",
+	"version": "3.50.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"

package/dist/nxgt-theme-ZS945iMP.js

@@ -1,37 +0,0 @@
-import { t as e } from "./dist-DVRQkaTK.js";
-import { t } from "./is-production-GLw59WU8.js";
-import { n, r, t as i } from "./theme-context-Cofk6vgs.js";
-import { t as a } from "./warn-once-C_e47JM8.js";
-import { useContext as o, useMemo as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-//#region lib/themes/theme-value.ts
-function l(e, t, n) {
-	return {
-		name: e,
-		theme: t,
-		background: t?.background === !1 ? !1 : t?.background ?? i,
-		defaultMode: n
-	};
-}
-//#endregion
-//#region lib/themes/nxgt-theme.tsx
-function u({ theme: i, mode: u, asChild: d = !1, children: f, ...p }) {
-	let m = o(r), h = typeof i == "string" ? m?.find((e) => e.name === i) : i, g = typeof i == "string" ? i : i.name;
-	!t() && m && !h && a(`theme "${g}" is not in the provider's themes; its background is the default.`, "NxgtTheme");
-	let _ = o(n)?.defaultMode, v = s(() => l(g, h, _), [
-		g,
-		h,
-		_
-	]), y = d ? e : "div";
-	return /* @__PURE__ */ c(n.Provider, {
-		value: v,
-		children: /* @__PURE__ */ c(y, {
-			...p,
-			"data-nxgt-theme": g,
-			...u ? { "data-theme": u } : {},
-			children: f
-		})
-	});
-}
-//#endregion
-export { l as n, u as t };

package/dist/spinner-C4CgDEYm.js

@@ -1,229 +0,0 @@
-import { t as e } from "./utils-BLfntITJ.js";
-import { o as t } from "./tooltip-CkttDIab.js";
-import { t as n } from "./use-material-translation-DOkTaWK_.js";
-import { jsx as r } from "react/jsx-runtime";
-//#region lib/components/ui/feedback/spinner/spinner.tsx
-var i = t("transition-all duration-500", {
-	variants: {
-		variant: {
-			1: "",
-			2: "",
-			3: "",
-			4: ""
-		},
-		color: {
-			primary: null,
-			secondary: null,
-			info: null,
-			warning: null,
-			default: null,
-			error: null,
-			success: null,
-			light: null
-		}
-	},
-	defaultVariants: {
-		variant: "1",
-		color: "primary"
-	},
-	compoundVariants: [
-		{
-			variant: "1",
-			color: "primary",
-			className: "border-primary/10 border-t-primary-indicator"
-		},
-		{
-			variant: "1",
-			color: "secondary",
-			className: "border-secondary/10 border-t-secondary"
-		},
-		{
-			variant: "1",
-			color: "success",
-			className: "border-success/10 border-t-success"
-		},
-		{
-			variant: "1",
-			color: "info",
-			className: "border-info/10 border-t-info"
-		},
-		{
-			variant: "1",
-			color: "warning",
-			className: "border-warning/10 border-t-warning"
-		},
-		{
-			variant: "1",
-			color: "error",
-			className: "border-error/10 border-t-error"
-		},
-		{
-			variant: "1",
-			color: "default",
-			className: "border-foreground/10 border-t-foreground"
-		},
-		{
-			variant: "1",
-			color: "light",
-			className: "border-white/10 border-t-white"
-		},
-		{
-			variant: "2",
-			color: "primary",
-			className: "border-primary/10 border-b-primary-indicator border-t-primary-indicator"
-		},
-		{
-			variant: "2",
-			color: "secondary",
-			className: "border-secondary/10 border-b-secondary border-t-secondary"
-		},
-		{
-			variant: "2",
-			color: "success",
-			className: "border-success/10 border-b-success border-t-success"
-		},
-		{
-			variant: "2",
-			color: "info",
-			className: "border-info/10 border-b-info border-t-info"
-		},
-		{
-			variant: "2",
-			color: "warning",
-			className: "border-warning/10 border-b-warning border-t-warning"
-		},
-		{
-			variant: "2",
-			color: "error",
-			className: "border-error/10 border-b-error border-t-error"
-		},
-		{
-			variant: "2",
-			color: "default",
-			className: "border-foreground/10 border-b-foreground border-t-foreground"
-		},
-		{
-			variant: "2",
-			color: "light",
-			className: "border-white/10 border-b-white border-t-white"
-		},
-		{
-			variant: "3",
-			color: "primary",
-			className: "border-primary/10 border-b-primary-indicator border-t-primary-indicator border-r-primary-indicator"
-		},
-		{
-			variant: "3",
-			color: "secondary",
-			className: "border-secondary/10 border-b-secondary border-t-secondary border-r-secondary"
-		},
-		{
-			variant: "3",
-			color: "success",
-			className: "border-success/10 border-b-success border-t-success border-r-success"
-		},
-		{
-			variant: "3",
-			color: "info",
-			className: "border-info/10 border-b-info border-t-info border-r-info"
-		},
-		{
-			variant: "3",
-			color: "warning",
-			className: "border-warning/10 border-b-warning border-t-warning border-r-warning"
-		},
-		{
-			variant: "3",
-			color: "error",
-			className: "border-error/10 border-b-error border-t-error border-r-error"
-		},
-		{
-			variant: "3",
-			color: "default",
-			className: "border-foreground/10 border-b-foreground border-t-foreground border-r-foreground"
-		},
-		{
-			variant: "3",
-			color: "light",
-			className: "border-white/10 border-b-white border-t-white border-r-white"
-		},
-		{
-			variant: "4",
-			color: "primary",
-			className: "stroke-primary-indicator"
-		},
-		{
-			variant: "4",
-			color: "secondary",
-			className: "stroke-secondary"
-		},
-		{
-			variant: "4",
-			color: "success",
-			className: "stroke-success"
-		},
-		{
-			variant: "4",
-			color: "info",
-			className: "stroke-info"
-		},
-		{
-			variant: "4",
-			color: "warning",
-			className: "stroke-warning"
-		},
-		{
-			variant: "4",
-			color: "error",
-			className: "stroke-error"
-		},
-		{
-			variant: "4",
-			color: "default",
-			className: "stroke-foreground"
-		},
-		{
-			variant: "4",
-			color: "light",
-			className: "stroke-white"
-		}
-	]
-});
-function a({ variant: t = "1", color: a, className: o, ...s }) {
-	let { t: c } = n();
-	return t === "4" ? /* @__PURE__ */ r("svg", {
-		viewBox: "0 0 800 800",
-		"data-slot": "spinner",
-		"data-variant": t,
-		"data-color": a,
-		className: e("size-14", o),
-		xmlns: "http://www.w3.org/2000/svg",
-		role: "img",
-		"aria-label": s["aria-label"] ?? c("material.spinner.loading", "Loading..."),
-		children: /* @__PURE__ */ r("circle", {
-			className: e("spin2", i({
-				variant: t,
-				color: a
-			})),
-			cx: "400",
-			cy: "400",
-			fill: "none",
-			r: "200",
-			strokeWidth: "50",
-			strokeDasharray: "700 1400",
-			strokeLinecap: "round"
-		})
-	}) : /* @__PURE__ */ r("div", {
-		"data-slot": "spinner",
-		"data-variant": t,
-		"data-color": a,
-		className: e("size-12 border-[2px] rounded-full animate-spin", i({
-			variant: t,
-			color: a,
-			className: o
-		})),
-		...s
-	});
-}
-//#endregion
-export { a as t };