@nsail/ui 0.1.709 → 0.1.721

package/dist/field.js

@@ -27,6 +27,11 @@ export function NsField({ name, multiline = false, autoFocus, label }) {
         const raw = event.target.value;
         set(raw === "" ? (field.nullable ? null : undefined) : Number(raw));
     }
+    // An emptied exact number is absent, as a number is: "" is no long the server reads.
+    function exact(event) {
+        const raw = event.target.value;
+        set(raw === "" ? (field.nullable ? null : undefined) : raw);
+    }
     const common = {
         id,
         name,
@@ -40,6 +45,11 @@ export function NsField({ name, multiline = false, autoFocus, label }) {
         case "boolean":
             control = _jsx("input", { ...common, type: "checkbox", checked: value === true, onChange: (e) => set(e.target.checked) });
             break;
+        case "bigint":
+        case "decimal":
+            // The value stays the text the user typed: a Number would round it.
+            control = (_jsx("input", { ...common, type: "text", inputMode: field.kind === "bigint" ? "numeric" : "decimal", value: value === null || value === undefined ? "" : String(value), onChange: exact }));
+            break;
         case "integer":
         case "number":
             control = (_jsx("input", { ...common, type: "number", min: field.min, max: field.max, step: field.kind === "integer" ? 1 : "any", value: value === null || value === undefined ? "" : String(value), onChange: number }));

package/dist/format.js

@@ -1,5 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2026 Leonardo Porro and Emmanuel Arias. https://github.com/nsail-ar/nsail-stack
+const whole = /^-?\d+$/;
+const fixed = /^-?\d*(\.\d+)?$/;
 /** A wire value as a person reads it: the member's kind decides, the language formats. */
 export function display(strings, field, value) {
     if (value === null || value === undefined || value === "") {
@@ -17,6 +19,11 @@ export function display(strings, field, value) {
         }
         case "datetime":
             return new Date(String(value)).toLocaleString(strings.language, { dateStyle: "short", timeStyle: "short" });
+        // A value that is not the wire's text (a Number a product still writes) shows as a figure.
+        case "bigint":
+            return whole.test(String(value)) ? BigInt(String(value)).toLocaleString(strings.language) : Number(value).toLocaleString(strings.language);
+        case "decimal":
+            return fixed.test(String(value)) ? decimal(strings.language, String(value)) : Number(value).toLocaleString(strings.language);
         case "integer":
         case "number":
             return Number(value).toLocaleString(strings.language);
@@ -24,3 +31,14 @@ export function display(strings, field, value) {
             return String(value);
     }
 }
+// A decimal carries up to 28 fraction digits and Intl stops at 20 (and reads a string as a
+// Number before Intl V3): the whole part is grouped as a BigInt and the fraction kept as sent.
+function decimal(language, text) {
+    const negative = text.startsWith("-");
+    const [whole, fraction] = (negative ? text.slice(1) : text).split(".");
+    const parts = new Intl.NumberFormat(language).formatToParts(-0.5);
+    const point = parts.find((part) => part.type === "decimal")?.value ?? ".";
+    const minus = parts.find((part) => part.type === "minusSign")?.value ?? "-";
+    const grouped = BigInt(whole === "" ? "0" : whole).toLocaleString(language);
+    return `${negative ? minus : ""}${grouped}${fraction ? `${point}${fraction}` : ""}`;
+}

package/dist/ns.css

@@ -197,7 +197,9 @@ body {
 }
 
 .ns-table .ns-col-integer,
-.ns-table .ns-col-number {
+.ns-table .ns-col-number,
+.ns-table .ns-col-bigint,
+.ns-table .ns-col-decimal {
   text-align: right;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsail/ui",
-  "version": "0.1.709",
+  "version": "0.1.721",
   "description": "The Ns* components for a React client, drawn from the descriptors an Sdk generates.",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
     "react-dom": ">=19"
   },
   "dependencies": {
-    "@nsail/stack": "0.1.709"
+    "@nsail/stack": "0.1.721"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node -e \"require('fs').copyFileSync('src/ns.css', 'dist/ns.css')\"",