@nxgt/material 3.75.0 → 3.76.0

package/lib/components/ui/widgets/calculator/variants/programmer/programmer.css

@@ -0,0 +1,162 @@
+/* The Programmer variant: the four-base readouts, the word controls and the
+ * bit pad. Widths are container queries on `.nxgt-calc`; no inline style. */
+.nxgt-prog-toolbar {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+.nxgt-prog-bases {
+	display: grid;
+	gap: 2px;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+.nxgt-prog-base {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	min-height: 2.75rem;
+	padding: 0.25rem 0.875rem;
+	border-radius: 0.875rem;
+	background: var(--muted);
+	cursor: pointer;
+}
+.nxgt-prog-base:has(:checked) {
+	background: var(--secondary-container);
+}
+.nxgt-prog-base:has(:checked)::before {
+	content: "";
+	position: absolute;
+	inset-block: 0.5rem;
+	inset-inline-start: 0.25rem;
+	inline-size: 0.1875rem;
+	border-radius: 9999px;
+	background: var(--primary);
+}
+.nxgt-prog-base:has(:focus-visible) {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+.nxgt-prog-base-name {
+	flex: none;
+	inline-size: 2.25rem;
+	font-size: 0.75rem;
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	color: var(--muted-foreground);
+}
+.nxgt-prog-base-value {
+	flex: 1 1 auto;
+	min-width: 0;
+	font-size: 0.9375rem;
+	font-variant-numeric: tabular-nums;
+	overflow-wrap: anywhere;
+	text-align: end;
+}
+.nxgt-prog-bits-toggle {
+	min-height: 2.75rem;
+	padding-inline: 1rem;
+	border: 0;
+	border-radius: 9999px;
+	background: var(--muted);
+	color: var(--foreground);
+	font: inherit;
+	font-size: 0.875rem;
+	cursor: pointer;
+}
+.nxgt-prog-bits-toggle[aria-expanded="true"] {
+	background: var(--secondary-container);
+}
+.nxgt-prog-bits-toggle:focus-visible,
+.nxgt-prog-bit:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+.nxgt-prog-bitpad {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.5rem;
+}
+.nxgt-prog-bits {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 0.5rem;
+	justify-items: center;
+	inline-size: 100%;
+}
+.nxgt-prog-bits[hidden] {
+	display: none;
+}
+.nxgt-prog-nibble {
+	display: grid;
+	grid-template-columns: repeat(4, 2.75rem);
+	gap: 2px;
+}
+.nxgt-prog-bit {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-width: 2.75rem;
+	min-height: 2.75rem;
+	padding: 0;
+	border: 0;
+	border-radius: 0.75rem;
+	background: var(--muted);
+	color: var(--foreground);
+	font: inherit;
+	font-variant-numeric: tabular-nums;
+	line-height: 1.1;
+	cursor: pointer;
+}
+.nxgt-prog-bit small {
+	font-size: 0.625rem;
+	opacity: 0.7;
+}
+.nxgt-prog-bit[aria-pressed="true"] {
+	background: var(--primary);
+	color: var(--primary-foreground);
+}
+/* A digit the base does not have: kept in the tab order, drawn faint. */
+.nxgt-calc-key[aria-disabled="true"] {
+	opacity: 0.38;
+	cursor: not-allowed;
+	filter: none;
+}
+.nxgt-calc-key[aria-disabled="true"]:active {
+	transform: none;
+	border-radius: inherit;
+}
+/* The pad while the expression does not calculate. */
+.nxgt-prog-bit[aria-disabled="true"] {
+	opacity: 0.38;
+	cursor: not-allowed;
+}
+/* Two nibbles a row from 400, four from 760. */
+@container nxgt-calc (min-width: 400px) {
+	.nxgt-prog-bits {
+		grid-template-columns: repeat(2, minmax(0, max-content));
+		justify-content: center;
+	}
+}
+@container nxgt-calc (min-width: 760px) {
+	.nxgt-prog-bits {
+		grid-template-columns: repeat(4, minmax(0, max-content));
+	}
+}
+@media (forced-colors: active) {
+	.nxgt-prog-base:has(:checked),
+	.nxgt-prog-bit[aria-pressed="true"] {
+		background: Highlight;
+		color: HighlightText;
+	}
+	.nxgt-prog-base,
+	.nxgt-prog-bit,
+	.nxgt-prog-bits-toggle {
+		border: 1px solid ButtonText;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.75.0",
+	"version": "3.76.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -80,6 +80,16 @@
 			"types": "./dist/lib/barcode/index.d.ts",
 			"require": "./dist/barcode.js"
 		},
+		"./calculator": {
+			"import": "./dist/calculator.js",
+			"types": "./dist/lib/calculator/index.d.ts",
+			"require": "./dist/calculator.js"
+		},
+		"./calculator-field": {
+			"import": "./dist/calculator-field.js",
+			"types": "./dist/lib/calculator-field/index.d.ts",
+			"require": "./dist/calculator-field.js"
+		},
 		"./draw/animate": {
 			"import": "./dist/draw-animate.js",
 			"types": "./dist/lib/draw-animate/index.d.ts",
@@ -211,6 +221,10 @@
 			"style": "./lib/map/map.css",
 			"default": "./lib/map/map.css"
 		},
+		"./calculator.css": {
+			"style": "./lib/components/ui/widgets/calculator/calculator.css",
+			"default": "./lib/components/ui/widgets/calculator/calculator.css"
+		},
 		"./galleries.css": {
 			"style": "./lib/galleries/galleries.css",
 			"default": "./lib/galleries/galleries.css"
@@ -376,7 +390,7 @@
 		"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.48.0",
+		"@nxgt/material-core": "^0.49.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
@@ -463,7 +477,7 @@
 		"@fontsource-variable/inter": "^5",
 		"@fortawesome/fontawesome-free": "7.3.1",
 		"@nxgt/material-testing": "0.0.0",
-		"@nxgt/playwright": "^0.11.0",
+		"@nxgt/playwright": "^0.12.0",
 		"@react-leaflet/core": "^3.0.0",
 		"@react-pdf/renderer": "^4.9.0",
 		"@storybook/addon-a11y": "10.6.0",

package/dist/dialog-AGsB3bv4.js

@@ -1,219 +0,0 @@
-import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./spinner-B2MubVWb.js";
-import { r as n, t as r } from "./in-dialog-Vwkyp-M5.js";
-import { a as i, c as a, i as o, l as s, n as c, o as l, r as u, s as d, t as f, u as p } from "./use-return-focus-DNQtADAR.js";
-import { t as m } from "./use-material-translation-CIS2n3RB.js";
-import { n as h } from "./icon-button-Cr-DyDGg.js";
-import { i as g } from "./escape-owner-DpaP0lm1.js";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { X as y } from "lucide-react";
-//#region lib/components/ui/primitives/field-box/field-box.ts
-var b = "nxgt-field-box", x = "nxgt-field-list", S = (e) => e ? "" : void 0;
-function C(e) {
-	return {
-		"data-size": e.size,
-		"data-filled": S(e.filled),
-		"data-open": S(e.list?.open),
-		"data-list-side": e.list?.open ? e.list.side : void 0,
-		"data-focused": S(e.focused),
-		"data-invalid": S(e.invalid),
-		"data-disabled": S(e.disabled),
-		"data-readonly": S(e.readOnly)
-	};
-}
-var w = /* @__PURE__ */ new Set([
-	"checkbox",
-	"radio",
-	"file",
-	"range",
-	"color",
-	"hidden",
-	"button",
-	"submit",
-	"reset",
-	"image"
-]);
-function T(e, t = "text") {
-	return e || (w.has(t) ? void 0 : " ");
-}
-//#endregion
-//#region lib/components/ui/primitives/input/input-box.ts
-var E = "selection:bg-primary selection:text-primary-foreground", D = [
-	"inline-flex gap-2 items-center h-11 max-h-full w-full min-w-0",
-	"px-2 py-1 text-base md:text-sm outline-none",
-	"placeholder:text-muted-foreground",
-	"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-muted-foreground",
-	"disabled:pointer-events-none"
-], O = [
-	...D,
-	E,
-	b
-], k = [...D, b], A = O;
-function j({ className: t, type: n = "text", ...r }) {
-	return /* @__PURE__ */ _("input", {
-		type: n,
-		"data-slot": "input",
-		className: e(A, t),
-		"data-pw": r.name ?? "input",
-		...r,
-		placeholder: T(r.placeholder, n)
-	});
-}
-//#endregion
-//#region lib/components/ui/overlays/dialog/dialog-outside.ts
-function M(e) {
-	let t = e.target;
-	t instanceof Element && t.closest("[data-slot=\"combobox-content\"]") && e.preventDefault();
-}
-function N(e) {
-	return (t) => {
-		M(t), e?.(t);
-	};
-}
-function P(e) {
-	return {
-		...e,
-		onPointerDownOutside: N(e.onPointerDownOutside),
-		onFocusOutside: N(e.onFocusOutside),
-		onInteractOutside: N(e.onInteractOutside)
-	};
-}
-//#endregion
-//#region lib/components/ui/overlays/dialog/dialog-variants.ts
-var F = t("nxgt-dialog fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 p-6 [--dialog-px:1.5rem] max-h-[calc(100dvh-2rem)] supports-[not(height:100dvh)]:max-h-[calc(100vh-2rem)] overflow-y-auto has-[>[data-slot=dialog-body]]:flex has-[>[data-slot=dialog-body]]:flex-col has-[>[data-slot=dialog-body]]:overflow-hidden", {
-	variants: {
-		size: {
-			sm: "sm:max-w-sm",
-			md: "sm:max-w-lg",
-			lg: "sm:max-w-2xl",
-			xl: "sm:max-w-4xl",
-			full: "sm:max-w-[calc(100%-4rem)]"
-		},
-		mobilePresentation: {
-			dialog: "",
-			"bottom-sheet": "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:max-h-[calc(100dvh-1.5rem)] max-sm:pb-[max(1.5rem,env(safe-area-inset-bottom))]",
-			top: "max-sm:top-3 max-sm:translate-y-0 max-sm:max-h-[calc(100dvh-1.5rem)]",
-			fullscreen: "max-sm:inset-0 max-sm:h-dvh max-sm:max-h-none max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:content-start max-sm:pt-[max(1.5rem,env(safe-area-inset-top))]"
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		mobilePresentation: "dialog"
-	}
-});
-//#endregion
-//#region lib/components/ui/overlays/dialog/dialog-parts.tsx
-function I({ className: t, ...n }) {
-	return /* @__PURE__ */ _("div", {
-		"data-slot": "dialog-header",
-		className: e("flex flex-col gap-2 text-center sm:text-left", t),
-		...n
-	});
-}
-function L({ className: t, stackOnPhone: n = !0, ...r }) {
-	return /* @__PURE__ */ _("div", {
-		"data-slot": "dialog-footer",
-		className: e("flex gap-2 pt-2", n ? "flex-col-reverse max-sm:*:w-full sm:flex-row sm:justify-end" : "flex-row justify-end max-sm:justify-between", t),
-		...r
-	});
-}
-function R({ className: t, ...n }) {
-	return /* @__PURE__ */ _(s, {
-		"data-slot": "dialog-title",
-		className: e("text-2xl/8 font-medium tracking-tight text-foreground", t),
-		...n
-	});
-}
-function z({ className: t, ...n }) {
-	return /* @__PURE__ */ _(l, {
-		"data-slot": "dialog-description",
-		className: e("text-muted-foreground text-sm/6", t),
-		...n
-	});
-}
-//#endregion
-//#region lib/components/ui/overlays/dialog/dialog.tsx
-function B({ ...e }) {
-	return /* @__PURE__ */ _(n, {
-		value: e.modal ?? !0,
-		children: /* @__PURE__ */ _(u, {
-			"data-slot": "dialog",
-			...e
-		})
-	});
-}
-function V({ asChild: e = !0, ...t }) {
-	return /* @__PURE__ */ _(p, {
-		"data-slot": "dialog-trigger",
-		...t,
-		asChild: e
-	});
-}
-function H({ ...e }) {
-	return /* @__PURE__ */ _(a, {
-		"data-slot": "dialog-portal",
-		...e
-	});
-}
-function U({ className: t, color: n, children: r, type: i = "button", variant: a = "ghost", ...s }) {
-	let { t: c } = m();
-	return /* @__PURE__ */ _(o, {
-		"aria-label": r ? void 0 : c("material.buttons.close", "Close"),
-		...s,
-		type: i,
-		className: e("absolute top-4 right-4", h({
-			variant: a,
-			color: n,
-			className: t
-		})),
-		"data-slot": "dialog-close",
-		children: r || /* @__PURE__ */ _(y, { className: "size-4" })
-	});
-}
-function W({ className: t, scrim: n = "dim", ...r }) {
-	return /* @__PURE__ */ _(d, {
-		"data-slot": "dialog-overlay",
-		"data-scrim": n,
-		className: e("nxgt-scrim fixed inset-0 z-50", t),
-		...r
-	});
-}
-function G({ className: t, children: n, onInteractOutside: a, onPointerDownOutside: o, onFocusOutside: s, onOpenAutoFocus: l, onCloseAutoFocus: u, onEscapeKeyDown: d, size: p, mobilePresentation: m, scrim: h, container: y, ref: b, ...x }) {
-	let S = f({
-		onOpenAutoFocus: l,
-		onCloseAutoFocus: u
-	}), C = c(P({
-		ref: b,
-		onEscapeKeyDown: d,
-		onInteractOutside: a,
-		onPointerDownOutside: o,
-		onFocusOutside: s
-	}));
-	return /* @__PURE__ */ _(g, { children: /* @__PURE__ */ _(r, {
-		value: !0,
-		children: /* @__PURE__ */ v(H, {
-			"data-slot": "dialog-portal",
-			container: y,
-			children: [/* @__PURE__ */ _(W, {
-				ref: C.overlayRef,
-				scrim: h
-			}), /* @__PURE__ */ _(i, {
-				ref: C.ref,
-				"data-slot": "dialog-content",
-				"data-presentation": m ?? void 0,
-				className: e(F({
-					size: p,
-					mobilePresentation: m
-				}), t),
-				onOpenAutoFocus: S.onOpenAutoFocus,
-				onCloseAutoFocus: S.onCloseAutoFocus,
-				onEscapeKeyDown: C.onEscapeKeyDown,
-				...x,
-				...C.outside,
-				children: n
-			})]
-		})
-	}) });
-}
-//#endregion
-export { b as _, H as a, L as c, P as d, j as f, T as g, k as h, W as i, I as l, O as m, U as n, V as o, A as p, G as r, z as s, B as t, R as u, x as v, C as y };

package/dist/dist-B7RjY7SL.js

@@ -1,158 +0,0 @@
-import { a as e, c as t, l as n, s as r } from "./dist-lmHmz_bu.js";
-import { i, n as a, r as o, t as s } from "./dist-C4wtXCjf.js";
-import * as c from "react";
-import { jsx as l } from "react/jsx-runtime";
-//#region ../../node_modules/@radix-ui/react-separator/dist/index.mjs
-var u = Object.defineProperty, d = (e, t) => u(e, "name", {
-	value: t,
-	configurable: !0
-}), f = "horizontal", p = ["horizontal", "vertical"], m = /* @__PURE__ */ c.forwardRef(/* @__PURE__ */ d(function(e, t) {
-	let { decorative: r, orientation: i = f, ...a } = e, o = h(i) ? i : f, s = r ? { role: "none" } : {
-		"aria-orientation": o === "vertical" ? o : void 0,
-		role: "separator"
-	};
-	return /* @__PURE__ */ l(n.div, {
-		"data-orientation": o,
-		...s,
-		...a,
-		ref: t
-	});
-}, "Separator"));
-function h(e) {
-	return p.includes(e);
-}
-d(h, "isValidOrientation");
-var g = m, _ = Object.defineProperty, v = (e, t) => _(e, "name", {
-	value: t,
-	configurable: !0
-}), y = "Toggle", b = /* @__PURE__ */ c.forwardRef(/* @__PURE__ */ v(function(t, i) {
-	let { pressed: a, defaultPressed: o, onPressedChange: s, ...c } = t, [u, d] = e({
-		prop: a,
-		onChange: s,
-		defaultProp: o ?? !1,
-		caller: y
-	});
-	return /* @__PURE__ */ l(n.button, {
-		type: "button",
-		"aria-pressed": u,
-		"data-state": u ? "on" : "off",
-		"data-disabled": t.disabled ? "" : void 0,
-		...c,
-		ref: i,
-		onClick: r(t.onClick, () => {
-			t.disabled || d(!u);
-		})
-	});
-}, "Toggle")), x = b, S = Object.defineProperty, C = (e, t) => S(e, "name", {
-	value: t,
-	configurable: !0
-}), w = "ToggleGroup", [T, E] = t(w, [o]), D = o(), O = /* @__PURE__ */ c.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let { type: n, ...r } = e;
-	if (n === "single") return /* @__PURE__ */ l(j, {
-		role: "radiogroup",
-		...r,
-		ref: t
-	});
-	if (n === "multiple") return /* @__PURE__ */ l(M, {
-		role: "toolbar",
-		...r,
-		ref: t
-	});
-	throw Error(`Missing prop \`type\` expected on \`${w}\``);
-}, "ToggleGroup")), [k, A] = T(w), j = /* @__PURE__ */ c.forwardRef(/* @__PURE__ */ C(function(t, n) {
-	let { value: r, defaultValue: i, onValueChange: a = /* @__PURE__ */ C(() => {}, "onValueChange"), ...o } = t, [s, u] = e({
-		prop: r,
-		defaultProp: i ?? "",
-		onChange: a,
-		caller: w
-	});
-	return /* @__PURE__ */ l(k, {
-		scope: t.__scopeToggleGroup,
-		type: "single",
-		value: c.useMemo(() => s ? [s] : [], [s]),
-		onItemActivate: u,
-		onItemDeactivate: c.useCallback(() => u(""), [u]),
-		children: /* @__PURE__ */ l(F, {
-			...o,
-			ref: n
-		})
-	});
-}, "ToggleGroupImplSingle")), M = /* @__PURE__ */ c.forwardRef(/* @__PURE__ */ C(function(t, n) {
-	let { value: r, defaultValue: i, onValueChange: a = /* @__PURE__ */ C(() => {}, "onValueChange"), ...o } = t, [s, u] = e({
-		prop: r,
-		defaultProp: i ?? [],
-		onChange: a,
-		caller: w
-	}), d = c.useCallback((e) => u((t = []) => [...t, e]), [u]), f = c.useCallback((e) => u((t = []) => t.filter((t) => t !== e)), [u]);
-	return /* @__PURE__ */ l(k, {
-		scope: t.__scopeToggleGroup,
-		type: "multiple",
-		value: s,
-		onItemActivate: d,
-		onItemDeactivate: f,
-		children: /* @__PURE__ */ l(F, {
-			...o,
-			ref: n
-		})
-	});
-}, "ToggleGroupImplMultiple")), [N, P] = T(w), F = /* @__PURE__ */ c.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let { __scopeToggleGroup: r, disabled: o = !1, rovingFocus: s = !0, orientation: c, dir: u, loop: d = !0, ...f } = e, p = D(r), m = i(u), h = {
-		dir: m,
-		...f
-	};
-	return /* @__PURE__ */ l(N, {
-		scope: r,
-		rovingFocus: s,
-		disabled: o,
-		children: s ? /* @__PURE__ */ l(a, {
-			asChild: !0,
-			...p,
-			orientation: c,
-			dir: m,
-			loop: d,
-			children: /* @__PURE__ */ l(n.div, {
-				...h,
-				ref: t
-			})
-		}) : /* @__PURE__ */ l(n.div, {
-			...h,
-			ref: t
-		})
-	});
-}, "ToggleGroupImpl")), I = "ToggleGroupItem", L = /* @__PURE__ */ c.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let n = A(I, e.__scopeToggleGroup), r = P(I, e.__scopeToggleGroup), i = D(e.__scopeToggleGroup), a = n.value.includes(e.value), o = r.disabled || e.disabled, u = {
-		...e,
-		pressed: a,
-		disabled: o
-	}, d = c.useRef(null);
-	return r.rovingFocus ? /* @__PURE__ */ l(s, {
-		asChild: !0,
-		...i,
-		focusable: !o,
-		active: a,
-		ref: d,
-		children: /* @__PURE__ */ l(R, {
-			...u,
-			ref: t
-		})
-	}) : /* @__PURE__ */ l(R, {
-		...u,
-		ref: t
-	});
-}, "ToggleGroupItem")), R = /* @__PURE__ */ c.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let { __scopeToggleGroup: n, value: r, ...i } = e, a = A(I, n), o = {
-		role: "radio",
-		"aria-checked": e.pressed,
-		"aria-pressed": void 0
-	};
-	return /* @__PURE__ */ l(b, {
-		...a.type === "single" ? o : void 0,
-		...i,
-		ref: t,
-		onPressedChange: (e) => {
-			e ? a.onItemActivate(r) : a.onItemDeactivate(r);
-		}
-	});
-}, "ToggleGroupItemImpl"));
-//#endregion
-export { g as a, x as i, L as n, E as r, O as t };