@nxgt/material 3.101.0 → 3.104.0

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

@@ -95,3 +95,121 @@
 		animation: none;
 	}
 }
+
+/* Keypad (`@nxgt/material/keypad`): the same keys and bands as the Calculator,
+ * on its own root. There is no keypad stylesheet; `.nxgt-calc` gives the root
+ * the container the bands read. A keypad is a column, never wider than a
+ * phone's keypad, and `large` is a till's. */
+.nxgt-keypad {
+	max-width: 24rem;
+}
+.nxgt-keypad-body {
+	padding-block-start: 0;
+}
+.nxgt-keypad[data-size="large"] .nxgt-calc-body {
+	--calc-key: 4.5rem;
+	--calc-gap: 0.625rem;
+}
+.nxgt-keypad-display {
+	display: block;
+	min-width: 0;
+	padding: 1rem 1.25rem;
+	border-radius: var(--calc-radius);
+	font-size: var(--calc-result);
+	font-weight: 500;
+	line-height: 1.1;
+	letter-spacing: -0.02em;
+	font-variant-numeric: tabular-nums;
+	text-align: right;
+	direction: ltr;
+	overflow-wrap: anywhere;
+}
+.nxgt-keypad-display[data-kind="error"] {
+	color: var(--destructive);
+}
+.nxgt-keypad[data-disabled] .nxgt-calc-key {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Keypad, cash variant: the total and change above the keys, the bill
+ * shortcuts under them. */
+.nxgt-keypad-cash {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin: 0;
+	font-variant-numeric: tabular-nums;
+}
+.nxgt-keypad-cash > div {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 0.5rem;
+	padding-inline: 1.25rem;
+}
+.nxgt-keypad-cash dt {
+	color: var(--muted-foreground);
+}
+.nxgt-keypad-cash dd {
+	margin: 0;
+	font-size: 1.25rem;
+	font-weight: 600;
+}
+/* The settlement row is the figure the cashier acts on: success while there
+ * is change to give back, warning while an amount is still due. The figure
+ * takes the tone's AA text colour on its own tinted band. */
+.nxgt-keypad-cash [data-status] {
+	align-items: baseline;
+	padding-block: 0.375rem;
+	border-radius: 1rem;
+}
+.nxgt-keypad-cash [data-status] dd {
+	font-size: 1.625rem;
+	font-weight: 700;
+}
+.nxgt-keypad-cash [data-status="paid"] {
+	background: color-mix(in oklab, var(--success) 20%, var(--background));
+}
+.nxgt-keypad-cash [data-status="paid"] dt,
+.nxgt-keypad-cash [data-status="paid"] dd {
+	color: var(--success-text);
+}
+.nxgt-keypad-cash [data-status="short"] {
+	background: color-mix(in oklab, var(--warning) 22%, var(--background));
+}
+.nxgt-keypad-cash [data-status="short"] dt,
+.nxgt-keypad-cash [data-status="short"] dd {
+	color: var(--warning-text);
+}
+.nxgt-keypad-shortcuts {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--calc-gap);
+}
+.nxgt-keypad-shortcuts button {
+	min-width: 0;
+	padding-inline: 0.875rem;
+	white-space: nowrap;
+	min-height: max(calc(var(--calc-key) * 0.8), 2.75rem);
+	border: 0;
+	border-radius: 9999px;
+	background: color-mix(
+		in oklab,
+		var(--primary) 16%,
+		color-mix(in oklab, var(--foreground) 3%, var(--background))
+	);
+	color: var(--foreground);
+	font: inherit;
+	font-weight: 500;
+	font-variant-numeric: tabular-nums;
+	cursor: pointer;
+	touch-action: manipulation;
+}
+.nxgt-keypad-shortcuts button:last-child:nth-child(odd) {
+	grid-column: 1 / -1;
+}
+.nxgt-keypad-shortcuts button:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.101.0",
+	"version": "3.104.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -85,6 +85,11 @@
 			"types": "./dist/lib/calculator/index.d.ts",
 			"require": "./dist/calculator.js"
 		},
+		"./keypad": {
+			"import": "./dist/keypad.js",
+			"types": "./dist/lib/keypad/index.d.ts",
+			"require": "./dist/keypad.js"
+		},
 		"./calculator-field": {
 			"import": "./dist/calculator-field.js",
 			"types": "./dist/lib/calculator-field/index.d.ts",
@@ -390,7 +395,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.57.0",
+		"@nxgt/material-core": "^0.58.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",

package/dist/field-blur-context-BLGgf_3z.js

@@ -1,73 +0,0 @@
-import { t as e } from "./utils-BLfntITJ.js";
-import { i as t } from "./dist-DWZXlCZR.js";
-import { t as n } from "./typography-CYEquVeb.js";
-import * as r from "react";
-import { createContext as i, use as a, useMemo as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region ../../node_modules/@radix-ui/react-label/dist/index.mjs
-var l = Object.defineProperty, u = /* @__PURE__ */ r.forwardRef(/* @__PURE__ */ ((e, t) => l(e, "name", {
-	value: t,
-	configurable: !0
-}))(function(e, n) {
-	return /* @__PURE__ */ s(t.label, {
-		...e,
-		ref: n,
-		onMouseDown: (t) => {
-			t.target.closest("button, input, select, textarea") || (e.onMouseDown?.(t), !t.defaultPrevented && t.detail > 1 && t.preventDefault());
-		}
-	});
-}, "Label"));
-//#endregion
-//#region lib/components/ui/primitives/helper-text/helper-text.tsx
-function d({ error: t, className: r, ...i }) {
-	return /* @__PURE__ */ s(n, {
-		"data-slot": "helper-text",
-		variant: "caption",
-		className: e("flex ps-0.5 truncate text-wrap", { "text-error-text": t }, r),
-		...i
-	});
-}
-//#endregion
-//#region lib/components/ui/primitives/label/label.tsx
-function f() {
-	return /* @__PURE__ */ s("svg", {
-		"data-slot": "label-required-mark",
-		"aria-hidden": "true",
-		focusable: "false",
-		viewBox: "0 0 10 10",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.75",
-		strokeLinecap: "round",
-		children: /* @__PURE__ */ s("path", { d: "M5 1v8M1.5 3l7 4M8.5 3l-7 4" })
-	});
-}
-function p({ className: t, withAsterisk: n, ...r }) {
-	return /* @__PURE__ */ s(u, {
-		"data-slot": "label",
-		className: e("flex items-center ps-0.5 gap-2 text-sm leading-5 -my-[3px] empty:my-0 font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", t),
-		...r,
-		children: n ? /* @__PURE__ */ c("span", {
-			"data-slot": "label-text",
-			"data-required": "",
-			className: "inline-flex",
-			children: [r.children, /* @__PURE__ */ s(f, {})]
-		}) : r.children
-	});
-}
-//#endregion
-//#region lib/components/ui/forms/field-blur-context.ts
-var m = i(null);
-function h(e, t) {
-	return o(() => e ? t ? (n) => {
-		let r = e(n), i = typeof t == "function" ? t(n) : void 0;
-		return typeof t != "function" && (t.current = n), () => {
-			r?.(), typeof i == "function" ? i() : typeof t == "function" ? t(null) : t.current = null;
-		};
-	} : e : t, [e, t]);
-}
-function g(e) {
-	return h(a(m), e);
-}
-//#endregion
-export { d as a, p as i, g as n, h as r, m as t };

package/dist/key-layout-cR79xfGE.js

@@ -1,38 +0,0 @@
-//#region lib/components/ui/widgets/calculator/variants/key-layout.ts
-var e = (e, t) => ({
-	key: `material.calculator.keys.${e}`,
-	fallback: t
-}), t = (t, n, r, i, a, o, s) => ({
-	id: t,
-	key: n,
-	glyph: r,
-	role: i,
-	name: e(a, o),
-	span: s
-}), n = [
-	"zero",
-	"one",
-	"two",
-	"three",
-	"four",
-	"five",
-	"six",
-	"seven",
-	"eight",
-	"nine"
-], r = (e, r) => t(`d${e}`, String(e), String(e), "digit", n[e] ?? "zero", String(e), r), i = [
-	t("open", "(", "(", "bracket", "open-paren", "Open parenthesis", 2),
-	t("close", ")", ")", "bracket", "close-paren", "Close parenthesis", 2),
-	t("mc", "mc", "MC", "memory", "memory-clear", "Memory clear", 2),
-	t("mr", "mr", "MR", "memory", "memory-recall", "Memory recall", 2),
-	t("m+", "m+", "M+", "memory", "memory-add", "Add to memory", 2),
-	t("m-", "m-", "M−", "memory", "memory-subtract", "Subtract from memory", 2)
-], a = (e) => e.map((e) => ({
-	...e,
-	span: (e.span ?? 1) * 3
-})), o = (e, t) => t && e.alt ? {
-	...e,
-	...e.alt
-} : e, s = (e) => e.sequence ?? [e.key];
-//#endregion
-export { s as a, t as i, r as n, e as o, o as r, a as s, i as t };

package/dist/standard-layout-BuSRr3TY.js

@@ -1,40 +0,0 @@
-import { i as e, n as t, s as n, t as r } from "./key-layout-cR79xfGE.js";
-//#region lib/components/ui/widgets/calculator/variants/standard/standard-layout.ts
-var i = {
-	columns: 12,
-	rows: [
-		r,
-		n([
-			e("clear", "C", "C", "utility", "clear", "Clear all"),
-			e("sign", "±", "±", "utility", "sign", "Change sign"),
-			e("percent", "%", "%", "utility", "percent", "Percent"),
-			e("divide", "/", "÷", "operator", "divide", "Divided by")
-		]),
-		n([
-			t(7),
-			t(8),
-			t(9),
-			e("multiply", "*", "×", "operator", "multiply", "Times")
-		]),
-		n([
-			t(4),
-			t(5),
-			t(6),
-			e("subtract", "-", "−", "operator", "subtract", "Minus")
-		]),
-		n([
-			t(1),
-			t(2),
-			t(3),
-			e("add", "+", "+", "operator", "add", "Plus")
-		]),
-		n([
-			t(0),
-			e("decimal", ".", ".", "digit", "decimal", "Decimal separator"),
-			e("backspace", "backspace", "⌫", "utility", "backspace", "Delete last character"),
-			e("equals", "=", "=", "equals", "equals", "Equals")
-		])
-	]
-};
-//#endregion
-export { i as t };