@nxgt/material 3.8.1 → 3.9.0

package/lib/theme-picker/theme-tile-textures-night.css

@@ -1,5 +1,6 @@
 /* ThemePicker's mini background, the night textures: the stars of `night-sky`
- * and the moon, a disc over the stars (see theme-tile-textures.css). */
+ * the moon, a disc over the stars, and the four celestial presets: an eclipse,
+ * meteors, a ringed planet and the lights (see theme-tile-textures.css). */
 @layer components {
 	[data-slot="theme-tile-background"][data-preset="night-sky"] {
 		--mini-pattern:
@@ -60,4 +61,109 @@
 			);
 		--mini-size: 100% 100%;
 	}
+	[data-slot="theme-tile-background"][data-preset="eclipse"] {
+		--mini-pattern:
+			radial-gradient(
+				circle at 71% 40%,
+				var(--background) 0.62rem,
+				transparent 0.64rem
+			),
+			radial-gradient(
+				circle at 77% 40%,
+				color-mix(in oklab, var(--mini-c) 75%, var(--foreground)) 0.7rem,
+				transparent 0.72rem
+			),
+			radial-gradient(
+				circle at 77% 40%,
+				transparent 0.78rem,
+				color-mix(in oklab, var(--mini-a) 50%, transparent) 0.8rem,
+				transparent 1rem
+			),
+			radial-gradient(
+				1px 1px at 16% 30%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 98%,
+				transparent
+			),
+			radial-gradient(
+				1.5px 1.5px at 42% 68%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 98%,
+				transparent
+			);
+		--mini-size: 100% 100%;
+	}
+	[data-slot="theme-tile-background"][data-preset="meteor-shower"] {
+		--mini-pattern:
+			linear-gradient(
+				to bottom right,
+				transparent 46%,
+				color-mix(in oklab, var(--mini-c) 60%, transparent) 49% 51%,
+				transparent 54%
+			),
+			linear-gradient(
+				to bottom right,
+				transparent 46%,
+				color-mix(in oklab, var(--mini-b) 50%, transparent) 49% 51%,
+				transparent 54%
+			),
+			linear-gradient(
+				to bottom right,
+				transparent 46%,
+				color-mix(in oklab, var(--mini-c) 45%, transparent) 49% 51%,
+				transparent 54%
+			),
+			radial-gradient(
+				1px 1px at 20% 62%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 98%,
+				transparent
+			);
+		--mini-size: 26% 62%, 20% 48%, 22% 52%, 100% 100%;
+		--mini-pos: 66% 4%, 34% 34%, 94% 58%, 0 0;
+		background-repeat: no-repeat;
+	}
+	[data-slot="theme-tile-background"][data-preset="ringed-planet"] {
+		--mini-pattern:
+			radial-gradient(
+				circle at 76% 42%,
+				color-mix(in oklab, var(--mini-c) 70%, var(--background)) 0.5rem,
+				transparent 0.52rem
+			),
+			radial-gradient(
+				ellipse 1.3rem 0.38rem at 76% 42%,
+				transparent 88%,
+				color-mix(in oklab, var(--mini-a) 70%, transparent) 94%,
+				transparent 100%
+			),
+			radial-gradient(
+				1px 1px at 18% 30%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 98%,
+				transparent
+			),
+			radial-gradient(
+				1.5px 1.5px at 40% 70%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 98%,
+				transparent
+			);
+		--mini-size: 100% 100%;
+	}
+	[data-slot="theme-tile-background"][data-preset="northern-lights"] {
+		--mini-pattern:
+			linear-gradient(
+				180deg,
+				transparent 0,
+				color-mix(in oklab, var(--mini-c) 40%, transparent) 22%,
+				transparent 52%
+			),
+			linear-gradient(
+				180deg,
+				transparent 12%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 36%,
+				transparent 70%
+			),
+			radial-gradient(
+				1px 1px at 22% 78%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 98%,
+				transparent
+			);
+		--mini-size: 100% 100%;
+	}
 }

package/lib/themes/teal.css

@@ -4,7 +4,6 @@
  * chroma-lowered: primary: chroma 0.105 to 0.088 (lowered to fit sRGB or AA).
  * lightness-moved: secondary: lightness 0.520 to 0.507 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.090 (lowered to fit sRGB or AA).
- * hue-near-status: The primary's hue 185 is 0° from success (184.704): they may read alike. Keep an icon and a word with every status.
  */
 [data-nxgt-theme="teal"] {
 	--radius: 0.5rem;
@@ -34,7 +33,7 @@
 	--error: oklch(0.56 0.245 27.33);
 	--error-foreground: oklch(0.984 0.003 190);
 	--error-text: color-mix(in oklab, var(--error) 92%, black);
-	--success: oklch(0.46 0.118 184.7);
+	--success: oklch(0.46 0.118 145);
 	--success-foreground: oklch(0.984 0.003 190);
 	--info: oklch(0.48 0.165 254.62);
 	--info-foreground: oklch(0.984 0.003 190);
@@ -101,7 +100,7 @@
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 190);
 	--error-text: color-mix(in oklab, var(--error) 76%, white);
-	--success: oklch(0.6 0.118 184.7);
+	--success: oklch(0.6 0.118 145);
 	--success-foreground: oklch(0.995 0.002 190);
 	--info: oklch(0.707 0.165 254.62);
 	--info-foreground: oklch(0.995 0.002 190);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.8.1",
+	"version": "3.9.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -84,6 +84,21 @@
 			"types": "./dist/lib/draw-png/index.d.ts",
 			"require": "./dist/draw-png.js"
 		},
+		"./illustrations": {
+			"import": "./dist/illustrations.js",
+			"types": "./dist/lib/illustrations/index.d.ts",
+			"require": "./dist/illustrations.js"
+		},
+		"./illustrations/health": {
+			"import": "./dist/illustrations-health.js",
+			"types": "./dist/lib/illustrations-health/index.d.ts",
+			"require": "./dist/illustrations-health.js"
+		},
+		"./illustrations/education": {
+			"import": "./dist/illustrations-education.js",
+			"types": "./dist/lib/illustrations-education/index.d.ts",
+			"require": "./dist/illustrations-education.js"
+		},
 		"./themes": {
 			"import": "./dist/themes.js",
 			"types": "./dist/lib/themes/index.d.ts",
@@ -293,10 +308,18 @@
 			"style": "./lib/backgrounds/css-react/sport.css",
 			"default": "./lib/backgrounds/css-react/sport.css"
 		},
+		"./backgrounds/celestial.css": {
+			"style": "./lib/backgrounds/css-react/celestial.css",
+			"default": "./lib/backgrounds/css-react/celestial.css"
+		},
 		"./backgrounds/moon.css": {
 			"style": "./lib/backgrounds/css-react/moon.css",
 			"default": "./lib/backgrounds/css-react/moon.css"
 		},
+		"./backgrounds/icons.css": {
+			"style": "./lib/backgrounds/css-react/icons.css",
+			"default": "./lib/backgrounds/css-react/icons.css"
+		},
 		"./backgrounds/illustrated.css": {
 			"style": "./lib/backgrounds/css-react/illustrated.css",
 			"default": "./lib/backgrounds/css-react/illustrated.css"
@@ -313,7 +336,7 @@
 		"postbuild": "bun ../../scripts/copy-styles.ts && bun ../../scripts/katex-fonts.ts && bun ../../scripts/dts-dist.ts dist && bun run verify:ssr && bun scripts/verify-ssr-hls.ts && bun run verify:dts",
 		"prepack": "bun run verify:dts",
 		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
+		"build-storybook": "storybook build && bun run ../../scripts/verify-no-pro-icons.ts --storybook storybook-static",
 		"test": "vitest run --project unit",
 		"test:scripts": "bun test ./scripts/",
 		"shadcn:add": "bunx --bun shadcn@latest add",
@@ -327,10 +350,10 @@
 		"test:stories": "vitest run --project storybook --project storybook-touch",
 		"test:stories:firefox": "vitest run --project storybook-firefox",
 		"test:stories:touch": "vitest run --project storybook-touch",
-		"docs:previews": "vitest run --project previews"
+		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.28.0",
+		"@nxgt/material-core": "^0.29.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
@@ -415,6 +438,7 @@
 		"@adamscybot/react-leaflet-component-marker": "^2.0.3",
 		"@chromatic-com/storybook": "^5.3.1",
 		"@fontsource-variable/inter": "^5",
+		"@fortawesome/fontawesome-free": "7.3.1",
 		"@nxgt/material-testing": "0.0.0",
 		"@nxgt/playwright": "^0.9.6",
 		"@react-leaflet/core": "^3.0.0",

package/dist/background--Bf_EbFR.js

@@ -1,159 +0,0 @@
-import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
-import { t } from "./is-production-GLw59WU8.js";
-import { a as n, t as r } from "./theme-context-BagPvRcz.js";
-import { t as i } from "./compose-refs-DZ0iIVF-.js";
-import { t as a } from "./use-background-activity-KxQgelFF.js";
-import { createElement as o, memo as s, useId as c, useMemo as l, useRef as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { SCENE_LAYER as m, buildBackgroundScene as h, presetLayers as g, resolveBackgroundPreset as _, svgIdPrefix as v } from "@nxgt/material-core/backgrounds";
-//#region lib/backgrounds/background/available.ts
-var y = [
-	"gradient",
-	"grain",
-	"mesh",
-	"aurora",
-	"spotlight",
-	"bokeh",
-	"rays",
-	"halo",
-	"plasma",
-	"glass",
-	"ripples",
-	"blobs",
-	"paper",
-	"linen",
-	"concrete",
-	"marble"
-], b = [
-	"isometric",
-	"blueprint",
-	"dots",
-	"stripes",
-	"low-poly",
-	"topography",
-	"waves",
-	"hexagons",
-	"circuit",
-	"graph-paper",
-	"checker",
-	"diagonal-checker",
-	"chevrons"
-], x = [
-	"shapes",
-	"confetti-grid",
-	"constellation",
-	"halftone",
-	"truchet",
-	"floating",
-	"scatter-icons",
-	"school",
-	"night-sky",
-	"bubbles",
-	"leaves",
-	"science",
-	"music",
-	"travel",
-	"sport",
-	"moon"
-], S = [
-	...y,
-	...b,
-	...x
-], C = /^(aria|data)-/, w = (e) => e === "class" ? "className" : C.test(e) ? e : e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), T = s(function e({ node: t }) {
-	let n = Object.fromEntries(Object.entries(t.attrs).map(([e, t]) => [w(e), t]));
-	return o(t.tag, n, ...(t.children ?? []).map((t, n) => /* @__PURE__ */ f(e, { node: t }, n)));
-}), E = s(function({ preset: e, scene: t, grain: n }) {
-	return /* @__PURE__ */ p(d, { children: [g(e).map((e) => e === m ? t && /* @__PURE__ */ f("div", {
-		"data-scene": "",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ f(T, { node: t })
-	}, e) : /* @__PURE__ */ f("div", {
-		"data-layer": e,
-		"aria-hidden": "true"
-	}, e)), n && /* @__PURE__ */ f("div", {
-		"data-overlay": "grain",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ f(T, { node: n })
-	})] });
-}), D = /* @__PURE__ */ e({ Background: () => P }), O = (e) => console.warn(e), k = Object.keys({
-	shapes: 1,
-	density: 1,
-	size: 1,
-	rotate: 1,
-	shapeFill: 1,
-	opacitySpread: 1
-}).filter((e) => e !== "shapes");
-function A(e) {
-	return k.map((t) => e?.[t]);
-}
-function j(e, t, n, r, i, a) {
-	if (e === "grain") return null;
-	let o = JSON.parse(i), s = {
-		...Object.fromEntries(k.map((e, t) => [e, o[t] ?? void 0])),
-		shapes: r === void 0 ? void 0 : r.split(",").filter(Boolean)
-	}, [c, l, u, d] = JSON.parse(a);
-	return h(e, {
-		idPrefix: t,
-		seed: n,
-		motif: s,
-		moon: {
-			...c == null || l == null ? {} : { position: {
-				x: c,
-				y: l
-			} },
-			...u == null ? {} : { phase: u },
-			...d == null ? {} : { halo: d }
-		}
-	});
-}
-function M(e) {
-	return [
-		e?.position?.x,
-		e?.position?.y,
-		e?.phase,
-		e?.halo
-	].map((e) => e ?? null);
-}
-function N(e, t) {
-	return h("grain", {
-		idPrefix: `${e}-grain`,
-		seed: t
-	});
-}
-function P({ children: e, ref: o, preset: s, tone: d, intensity: m, animated: h, grain: g, seed: y, motif: b, moon: x, fill: C = "viewport", ...w }) {
-	let T = n()?.background || r, D = s ?? T.preset, k = d ?? T.tone ?? r.tone, P = m ?? T.intensity ?? r.intensity, F = h ?? T.animated ?? !1, I = g ?? T.grain ?? !1, L = y ?? T.seed ?? 0, R = b ?? T.motif, z = x ?? T.moon, B = u(null), V = l(() => i(B, o), [o]), H = a(B, F), U = v(c()), W = _(D, S, t() ? void 0 : O), G = I || W === "grain", K = R?.shapes ? [...new Set(R.shapes)].sort().join(",") : void 0, q = JSON.stringify(A(R)), J = JSON.stringify(M(z)), Y = l(() => j(W, U, L, K, q, J), [
-		W,
-		U,
-		L,
-		K,
-		q,
-		J
-	]), X = l(() => G ? N(U, L) : null, [
-		G,
-		U,
-		L
-	]);
-	return /* @__PURE__ */ p("div", {
-		"data-slot": "background",
-		...w,
-		ref: V,
-		"data-background": W === "grain" ? "gradient" : W,
-		"data-preset": W,
-		"data-tone": k,
-		"data-intensity": P,
-		"data-fill": C === "container" ? C : void 0,
-		"data-animated": F ? "" : void 0,
-		"data-grain": G ? "" : void 0,
-		"data-paused": F && H ? "" : void 0,
-		children: [/* @__PURE__ */ f(E, {
-			preset: W,
-			scene: Y,
-			grain: X
-		}), /* @__PURE__ */ f("div", {
-			"data-slot": "background-content",
-			children: e
-		})]
-	});
-}
-//#endregion
-export { D as n, S as r, P as t };

package/dist/empty-state-s2CSjKXJ.js

@@ -1,126 +0,0 @@
-import { t as e } from "./utils-Bcd2Z3ea.js";
-import { t } from "./use-material-translation-DkxcLbLM.js";
-import { i as n } from "./escape-owner-CripBce_.js";
-import { AlertCircle as r, Construction as i, FileQuestion as a, PackageOpen as o, Search as s, ShieldAlert as c, WifiOff as l } from "lucide-react";
-import { createElement as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { STATE_ACCENT as p, STATE_ICON as m, STATE_ILLUSTRATIONS as h, stateCopy as g } from "@nxgt/material-core/states";
-//#region lib/components/ui/feedback/state-frame/state-icon.tsx
-var _ = {
-	"package-open": o,
-	search: s,
-	"file-question": a,
-	"shield-alert": c,
-	"alert-circle": r,
-	"wifi-off": l,
-	construction: i
-};
-function v({ kind: e }) {
-	let t = _[m[e]];
-	return /* @__PURE__ */ d(t, { "aria-hidden": "true" });
-}
-//#endregion
-//#region lib/components/ui/feedback/state-frame/state-tones.ts
-var y = "[stroke-linecap:round] [stroke-linejoin:round]", b = {
-	primary: "fill-primary",
-	error: "fill-error",
-	warning: "fill-warning",
-	info: "fill-info",
-	neutral: "fill-muted-foreground"
-}, x = {
-	primary: "fill-primary/15",
-	error: "fill-error/15",
-	warning: "fill-warning/15",
-	info: "fill-info/15",
-	neutral: "fill-muted-foreground/15"
-}, S = {
-	primary: "bg-primary/10 text-primary-text",
-	error: "bg-error/10 text-error",
-	warning: "bg-warning/10 text-warning",
-	info: "bg-info/10 text-info",
-	neutral: "border border-border bg-background text-foreground"
-};
-function C(e, t) {
-	switch (e) {
-		case "surface": return "fill-muted stroke-none";
-		case "outline": return `fill-none stroke-muted-foreground/60 stroke-2 ${y}`;
-		case "accent": return `${b[t]} stroke-none`;
-		case "accent-soft": return `${x[t]} stroke-none`;
-		case "muted": return "fill-muted-foreground/15 stroke-none";
-	}
-}
-//#endregion
-//#region lib/components/ui/feedback/state-frame/state-illustration.tsx
-function w({ kind: t, className: n, ...r }) {
-	let { viewBox: i, shapes: a } = h[t], o = p[t];
-	return /* @__PURE__ */ d("svg", {
-		"data-slot": "state-illustration",
-		viewBox: i,
-		"aria-hidden": "true",
-		focusable: "false",
-		className: e("h-auto w-40 shrink-0", n),
-		...r,
-		children: a.map((e, t) => u(e.el, {
-			key: t,
-			className: C(e.tone, o),
-			...e.attrs
-		}))
-	});
-}
-//#endregion
-//#region lib/components/ui/feedback/state-frame/state-frame.tsx
-function T({ kind: t, size: r = "default", illustration: i, icon: a, title: o, headingLevel: s, description: c, actions: l, className: u, children: m, ...h }) {
-	let g = r === "inline", _ = r === "compact" || g, y = e("flex shrink-0 items-center justify-center rounded", S[p[t]], g ? "size-8 rounded-full [&_svg]:size-4" : _ ? "size-10 [&_svg]:size-5" : "size-16 [&_svg]:size-7"), b = null;
-	return b = i === !1 ? null : i ?? (a == null ? _ ? /* @__PURE__ */ d("div", {
-		className: y,
-		children: /* @__PURE__ */ d(v, { kind: t })
-	}) : /* @__PURE__ */ d(w, { kind: t }) : /* @__PURE__ */ d("div", {
-		className: y,
-		children: a
-	})), /* @__PURE__ */ f("div", {
-		"data-kind": t,
-		"data-size": r,
-		className: e("flex text-foreground", g ? "flex-row items-center gap-3 px-3 py-2.5 text-start" : "flex-col items-center justify-center text-center", !g && (_ ? "gap-3 px-4 py-6" : "min-h-[22rem] gap-5 p-8"), u),
-		...h,
-		children: [
-			b,
-			(o != null || c != null) && /* @__PURE__ */ f("div", {
-				className: e("flex flex-col", g ? "min-w-0 flex-1 gap-0.5" : "max-w-sm gap-2"),
-				children: [o != null && /* @__PURE__ */ d(n, {
-					as: s ? `h${s}` : void 0,
-					variant: g ? "normal" : _ ? "title-medium" : "headline-small",
-					className: e("tracking-tight text-balance", g && "font-medium"),
-					children: o
-				}), c != null && /* @__PURE__ */ d(n, {
-					variant: g ? "body-small" : "body-medium",
-					className: "text-pretty",
-					children: c
-				})]
-			}),
-			m,
-			l != null && /* @__PURE__ */ d("div", {
-				className: e("flex flex-wrap items-center gap-2", g ? "shrink-0" : "mt-1 justify-center"),
-				children: l
-			})
-		]
-	});
-}
-//#endregion
-//#region lib/components/ui/feedback/empty-state/empty-state.tsx
-function E({ kind: e = "empty", size: n = "default", illustration: r, icon: i, title: a, description: o, action: s, ...c }) {
-	let l = g(e, "empty-state"), { t: u } = t(), f = o ?? (a == null ? u(l.descriptionKey, l.description) : void 0);
-	return /* @__PURE__ */ d(T, {
-		"data-slot": "empty-state",
-		"data-variant": e,
-		kind: e,
-		size: n,
-		illustration: r,
-		icon: i,
-		title: a ?? u(l.titleKey, l.title),
-		description: f,
-		actions: s,
-		...c
-	});
-}
-//#endregion
-export { T as n, E as t };