@nova-design-system/nova-react 3.19.0 → 3.20.0

package/README.md

@@ -2,26 +2,6 @@
 
 **Nova Components React** provides an easy way to use [Nova’s native Web Components](https://www.npmjs.com/package/@nova-design-system/nova-webcomponents) within your React applications.
 
-- [Nova Components React](#nova-components-react)
-  - [Key Features](#key-features)
-  - [Installation](#installation)
-  - [Setting up Tailwind](#setting-up-tailwind)
-    - [About Tailwind and the Nova Plugin](#about-tailwind-and-the-nova-plugin)
-    - [1. Install Tailwind CSS and the Vite Plugin](#1-install-tailwind-css-and-the-vite-plugin)
-    - [2. Configure the Vite Plugin](#2-configure-the-vite-plugin)
-    - [3. Create `tailwind.config.ts`](#3-create-tailwindconfigts)
-    - [4. Configure Tailwind and Nova Plugin in `index.css`](#4-configure-tailwind-and-nova-plugin-in-indexcss)
-    - [5. Include the Nova Tokens (Spark or Ocean)](#5-include-the-nova-tokens-spark-or-ocean)
-    - [6. Use Nova Components with Tailwind Utilities](#6-use-nova-components-with-tailwind-utilities)
-    - [7. Setup the Nova Font](#7-setup-the-nova-font)
-    - [Creating Your Own Style Components with Tailwind](#creating-your-own-style-components-with-tailwind)
-  - [Nova Font Pro Integration](#nova-font-pro-integration)
-    - [Option 1: Import in Global CSS (Recommended)](#option-1-import-in-global-css-recommended)
-    - [Option 2: HTML Integration](#option-2-html-integration)
-
-
----
-
 ## Key Features
 
 - **Lightweight Integration**: Leverage Nova Web Components with minimal configuration in React.
@@ -35,6 +15,9 @@
 
 Install the necessary packages using the package manager of your choice:
 
+> [!IMPORTANT]
+> If you want to set it up in NextJS, please refer to the [NextJS Integration Guide](/docs/guides-next-js-integration--docs).
+
 ```bash
 npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-react
 ```

package/dist/cjs/{index-C12eD0Qt.js → index-BObVnP12.js}

@@ -22755,7 +22755,15 @@ const NvFieldnumber$2 = /*@__PURE__*/ proxyCustomElement(class NvFieldnumber ext
         //#region METHODS
         this.handleInput = (event) => {
             const input = event.target;
-            this.value = input.valueAsNumber;
+            if (input.value === '') {
+                this.value = null;
+                return;
+            }
+            const nextValue = input.valueAsNumber;
+            if (Number.isNaN(nextValue)) {
+                return;
+            }
+            this.value = nextValue;
         };
         this.handleInputContainerClick = () => {
             this.inputElement.focus();
@@ -22773,17 +22781,26 @@ const NvFieldnumber$2 = /*@__PURE__*/ proxyCustomElement(class NvFieldnumber ext
             event.preventDefault();
         };
         this.isMinValueReached = () => {
-            return this.min !== undefined && this.value <= this.min;
+            return (this.min !== undefined &&
+                typeof this.value === 'number' &&
+                this.value <= this.min);
         };
         this.isMaxValueReached = () => {
-            return this.max !== undefined && this.value >= this.max;
+            return (this.max !== undefined &&
+                typeof this.value === 'number' &&
+                this.value >= this.max);
         };
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
     watchValueHandler(newValue) {
-        this.valueChanged.emit(newValue);
+        const normalized = typeof newValue === 'number' && !Number.isNaN(newValue) ? newValue : null;
+        if (this.lastEmittedValue === normalized) {
+            return;
+        }
+        this.lastEmittedValue = normalized;
+        this.valueChanged.emit(normalized);
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -22801,9 +22818,9 @@ const NvFieldnumber$2 = /*@__PURE__*/ proxyCustomElement(class NvFieldnumber ext
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h$1(Host$1, { key: '8af003bd5859bda13679a60e1dca6bda4864a42e' }, (this.label || this.el.querySelector('[slot="label"]')) && (h$1("label", { key: '318ed968b1592803bd98bd001f57a6fd3d9ad940', htmlFor: this.inputId }, h$1("slot", { key: '3a52e9893368fed769434f5d4bdb1a2a4c28fed0', name: "label" }, this.label))), h$1("div", { key: 'c083c54d2413abdc30a12ac3942e3f74ace125b4', class: "input-wrapper" }, h$1("slot", { key: 'ad64782525a07406bb4d4e4de4a5476ee83be7b5', name: "before-input" }), h$1("div", { key: '19aec28c18ef9f69bbb9ed871ea87719c53264db', class: "input-container", onClick: this.handleInputContainerClick }, h$1("slot", { key: '0d6f7e36d692ece52fa3317a5238a423707287e3', name: "leading-input" }), h$1("input", { key: '6ddffc0a0e4d8891cabf4d6fee984fea5e6007bd', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), h$1("slot", { key: '7fef4752d5d3e398c0913771e4569343b564d2ec', name: "trailing-input" }), this.error && (h$1("nv-icon", { key: '4b29cf3399dad597687398f26d0f574050755b69', name: "alert-circle", class: "validation", size: "md" })), this.success && (h$1("nv-icon", { key: '8f4ea2180a0a9de4a66bfd7549fd4b02b488f4a0', name: "circle-check", class: "validation", size: "md" })), h$1("div", { key: '8a310ae5350d964ac4cdab7e870ba5e1cea8cdeb', class: "stepper" }, h$1("nv-iconbutton", { key: '3dadc6fd876495cac99e4bf3f903ab2dd2dc4b38', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h$1("nv-iconbutton", { key: '770ada753ca07a45410ab60e3392ac4e8de102a3', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h$1("slot", { key: '8f6221422dffca14130ad05ed6648a7a5e11ee09', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h$1("div", { key: '5a3faaab4b40d04b7de8030762039170368425c1', class: "description" }, h$1("slot", { key: '3627fdb29ebd949fb7642c8052489576c8b5c027', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h$1("div", { key: '57534c82cc621135a2d44d0ff7cda2efffe6dd83', hidden: !this.error, class: "error-description" }, h$1("slot", { key: '5f253705bb28cc938dfddaacf3d327bfc053dcf9', name: "error-description" }, this.errorDescription)))));
+        return (h$1(Host$1, { key: '9b3239f09e6aace03f79f07399723fdbf557f070' }, (this.label || this.el.querySelector('[slot="label"]')) && (h$1("label", { key: '322478abbaf477a33debcd828387402299ce6762', htmlFor: this.inputId }, h$1("slot", { key: '75b791ca0fb7eec55faaf966a32733e37b87fb90', name: "label" }, this.label))), h$1("div", { key: '5ce6c27db2b6b0ba8618ed2eac1f61abf8177793', class: "input-wrapper" }, h$1("slot", { key: '3a4a86e358d575fc312d27ee5ffba68474904bd4', name: "before-input" }), h$1("div", { key: '8e07c3c37ea4869aa309fba913663e1d225e21fd', class: "input-container", onClick: this.handleInputContainerClick }, h$1("slot", { key: '91e7c82e46d3268493669e6dd121f643be86a6be', name: "leading-input" }), h$1("input", { key: '3dcbd9d10e4425ebb29b16b1157845ea4ee7bdef', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), h$1("slot", { key: '7d0d4a77d121433f4feb8aa2139be8e94f8e57a5', name: "trailing-input" }), this.error && (h$1("nv-icon", { key: '2a3969e56de0fc3911901c9540e300caf2b6d681', name: "alert-circle", class: "validation", size: "md" })), this.success && (h$1("nv-icon", { key: '8964d7ffaa2cc2a70caf781a37e66383234c6895', name: "circle-check", class: "validation", size: "md" })), h$1("div", { key: '1ca2fd7095afbc12a1a54c8b09551f28fe5a3579', class: "stepper" }, h$1("nv-iconbutton", { key: '1c3f9200c5409bc05fab9061dff3847a92298d45', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h$1("nv-iconbutton", { key: 'eb65687b3c31d2ac8bdb534f5ca300a1ada9cd64', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h$1("slot", { key: '01006c0c2487bce4f908104d263acb0231cdb701', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h$1("div", { key: '9db93a8aa6bb002a3286763909118e9c7a1661c0', class: "description" }, h$1("slot", { key: '13b0f797bace74e641cdd658bb798bccbfec70dc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h$1("div", { key: '4ca240bc22fb83a283637e60384e59d687d67e9e', hidden: !this.error, class: "error-description" }, h$1("slot", { key: '145b68572a38e91559431ff51ec38a64027d4978', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -23801,7 +23818,9 @@ const FieldInput = props => {
     const handleValueChanged = (event) => {
         event.stopPropagation();
         const newValue = event.detail;
-        if (isNaN(newValue)) {
+        // Accept null as a valid value (when field is cleared)
+        // Only reject NaN numbers
+        if (typeof newValue === 'number' && Number.isNaN(newValue)) {
             return;
         }
         onInput({
@@ -28229,179 +28248,179 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                 case 'nv-accordion':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-accordion.entry-D8jaknF9.js'); }).then(processMod, consoleError);
+                      './nv-accordion.entry-CvvtdLIz.js'); }).then(processMod, consoleError);
                 case 'nv-alert':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-alert.entry-D_uvQxc9.js'); }).then(processMod, consoleError);
+                      './nv-alert.entry-w5XeFsrC.js'); }).then(processMod, consoleError);
                 case 'nv-avatar':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-avatar.entry-B2zfDM3w.js'); }).then(processMod, consoleError);
+                      './nv-avatar.entry-BxUZg-8h.js'); }).then(processMod, consoleError);
                 case 'nv-breadcrumb':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-breadcrumb.entry-CEN2iYUQ.js'); }).then(processMod, consoleError);
+                      './nv-breadcrumb.entry-CmbqGw3C.js'); }).then(processMod, consoleError);
                 case 'nv-breadcrumbs':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-breadcrumbs.entry-Bq8qINNk.js'); }).then(processMod, consoleError);
+                      './nv-breadcrumbs.entry-DFHxtPKv.js'); }).then(processMod, consoleError);
                 case 'nv-buttongroup':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-buttongroup.entry-CbTXVSWL.js'); }).then(processMod, consoleError);
+                      './nv-buttongroup.entry-wn9zFd_M.js'); }).then(processMod, consoleError);
                 case 'nv-col':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-col.entry-Dlrdqper.js'); }).then(processMod, consoleError);
+                      './nv-col.entry-DnG79KM1.js'); }).then(processMod, consoleError);
                 case 'nv-datagrid':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-datagrid.entry-Z5GHfOvp.js'); }).then(processMod, consoleError);
+                      './nv-datagrid.entry-C2ML-e47.js'); }).then(processMod, consoleError);
                 case 'nv-datagridcolumn':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-datagridcolumn.entry-DvSFVguN.js'); }).then(processMod, consoleError);
+                      './nv-datagridcolumn.entry-DcMPUtQS.js'); }).then(processMod, consoleError);
                 case 'nv-dialog':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-dialog.entry-BV6QBtx2.js'); }).then(processMod, consoleError);
+                      './nv-dialog.entry-C0Vx7dQc.js'); }).then(processMod, consoleError);
                 case 'nv-fielddate':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fielddate.entry-C06n2Hri.js'); }).then(processMod, consoleError);
+                      './nv-fielddate.entry-Byt5cmQi.js'); }).then(processMod, consoleError);
                 case 'nv-fielddaterange':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fielddaterange.entry-DFlaA4gv.js'); }).then(processMod, consoleError);
+                      './nv-fielddaterange.entry-CCFeFP2q.js'); }).then(processMod, consoleError);
                 case 'nv-fielddropdown':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fielddropdown.entry-ONwdJHOm.js'); }).then(processMod, consoleError);
+                      './nv-fielddropdown.entry-BFp_2vBC.js'); }).then(processMod, consoleError);
                 case 'nv-fieldmultiselect':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldmultiselect.entry-BHJC59Mw.js'); }).then(processMod, consoleError);
+                      './nv-fieldmultiselect.entry-BaUD7Dcr.js'); }).then(processMod, consoleError);
                 case 'nv-fieldpassword':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldpassword.entry-Bqbf_LJJ.js'); }).then(processMod, consoleError);
+                      './nv-fieldpassword.entry-hogiPC5z.js'); }).then(processMod, consoleError);
                 case 'nv-fieldradio':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldradio.entry-RzSCysif.js'); }).then(processMod, consoleError);
+                      './nv-fieldradio.entry-CKbyWpIK.js'); }).then(processMod, consoleError);
                 case 'nv-fieldselect':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldselect.entry-COTE8Ntn.js'); }).then(processMod, consoleError);
+                      './nv-fieldselect.entry-tpURNUEP.js'); }).then(processMod, consoleError);
                 case 'nv-fieldslider':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldslider.entry-BVfmpUhc.js'); }).then(processMod, consoleError);
+                      './nv-fieldslider.entry-v0d92XEY.js'); }).then(processMod, consoleError);
                 case 'nv-fieldtextarea':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldtextarea.entry-CzVq8gjw.js'); }).then(processMod, consoleError);
+                      './nv-fieldtextarea.entry-cRsjPwwR.js'); }).then(processMod, consoleError);
                 case 'nv-fieldtime':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldtime.entry-CRNYbeMY.js'); }).then(processMod, consoleError);
+                      './nv-fieldtime.entry-BpGBUfKr.js'); }).then(processMod, consoleError);
                 case 'nv-notification':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-notification.entry-BYHTrzUz.js'); }).then(processMod, consoleError);
+                      './nv-notification.entry-DxAj-mc7.js'); }).then(processMod, consoleError);
                 case 'nv-notificationcontainer':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-notificationcontainer.entry-BBjrL7gt.js'); }).then(processMod, consoleError);
+                      './nv-notificationcontainer.entry-CUnTicXF.js'); }).then(processMod, consoleError);
                 case 'nv-row':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-row.entry-CmOypCPp.js'); }).then(processMod, consoleError);
+                      './nv-row.entry-iLk2UglX.js'); }).then(processMod, consoleError);
                 case 'nv-split':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-split.entry-BqBytQZn.js'); }).then(processMod, consoleError);
+                      './nv-split.entry-BrMHK6TS.js'); }).then(processMod, consoleError);
                 case 'nv-stack':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-stack.entry-BKPf62wy.js'); }).then(processMod, consoleError);
+                      './nv-stack.entry-C8jLJ5Ki.js'); }).then(processMod, consoleError);
                 case 'nv-table':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-table.entry-DSL_jd5Y.js'); }).then(processMod, consoleError);
+                      './nv-table.entry-D6o4g9Vo.js'); }).then(processMod, consoleError);
                 case 'nv-toggle':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-toggle.entry-DbQQdp5m.js'); }).then(processMod, consoleError);
+                      './nv-toggle.entry-9iwmu7qi.js'); }).then(processMod, consoleError);
                 case 'nv-togglebutton':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-togglebutton.entry-DNG6SFTU.js'); }).then(processMod, consoleError);
+                      './nv-togglebutton.entry-N7_CSvzS.js'); }).then(processMod, consoleError);
                 case 'nv-togglebuttongroup':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-togglebuttongroup.entry-Bl43CVZN.js'); }).then(processMod, consoleError);
+                      './nv-togglebuttongroup.entry-DWCytOhV.js'); }).then(processMod, consoleError);
                 case 'nv-accordion-item':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-accordion-item.entry-99OJUl7m.js'); }).then(processMod, consoleError);
+                      './nv-accordion-item.entry-BBAGkmLI.js'); }).then(processMod, consoleError);
                 case 'nv-badge_2':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-badge_2.entry-Fnq2K2Ul.js'); }).then(processMod, consoleError);
+                      './nv-badge_2.entry-DdSIFlJf.js'); }).then(processMod, consoleError);
                 case 'nv-dialogfooter_2':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-dialogfooter_2.entry-Ci1C_E-2.js'); }).then(processMod, consoleError);
+                      './nv-dialogfooter_2.entry-BGq8Jiib.js'); }).then(processMod, consoleError);
                 case 'nv-fielddropdownitem':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fielddropdownitem.entry-CDKQtEra.js'); }).then(processMod, consoleError);
+                      './nv-fielddropdownitem.entry-D_4KdBY1.js'); }).then(processMod, consoleError);
                 case 'nv-fieldnumber':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldnumber.entry-CmL1LPom.js'); }).then(processMod, consoleError);
+                      './nv-fieldnumber.entry-DOmhBrDv.js'); }).then(processMod, consoleError);
                 case 'nv-fieldtext':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldtext.entry-DO0lmw9C.js'); }).then(processMod, consoleError);
+                      './nv-fieldtext.entry-DNYrOAhj.js'); }).then(processMod, consoleError);
                 case 'nv-menu':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-menu.entry-BjXa70qP.js'); }).then(processMod, consoleError);
+                      './nv-menu.entry-C2L8F-nG.js'); }).then(processMod, consoleError);
                 case 'nv-menuitem':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-menuitem.entry-CSPwpUWz.js'); }).then(processMod, consoleError);
+                      './nv-menuitem.entry-DuDZTlJ1.js'); }).then(processMod, consoleError);
                 case 'nv-tooltip':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-tooltip.entry-CV841nfI.js'); }).then(processMod, consoleError);
+                      './nv-tooltip.entry-BMxnZVYA.js'); }).then(processMod, consoleError);
                 case 'nv-button':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-button.entry-CmpagMPP.js'); }).then(processMod, consoleError);
+                      './nv-button.entry-Dyks6_mF.js'); }).then(processMod, consoleError);
                 case 'nv-calendar':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-calendar.entry-DNkXS4ll.js'); }).then(processMod, consoleError);
+                      './nv-calendar.entry-Dldsa6dz.js'); }).then(processMod, consoleError);
                 case 'nv-fieldcheckbox':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-fieldcheckbox.entry-BD9ETFVV.js'); }).then(processMod, consoleError);
+                      './nv-fieldcheckbox.entry-CAPwYnSU.js'); }).then(processMod, consoleError);
                 case 'nv-popover':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-popover.entry-J_M8_rLL.js'); }).then(processMod, consoleError);
+                      './nv-popover.entry-DVwa4DvW.js'); }).then(processMod, consoleError);
                 case 'nv-iconbutton_2':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-iconbutton_2.entry-0lnnCk0B.js'); }).then(processMod, consoleError);
+                      './nv-iconbutton_2.entry-DOv1RrkS.js'); }).then(processMod, consoleError);
                 case 'nv-icon':
                     return Promise.resolve().then(function () { return require(
                       /* webpackMode: "lazy" */
-                      './nv-icon.entry-FoRJzCHm.js'); }).then(processMod, consoleError);
+                      './nv-icon.entry-BfmyacWA.js'); }).then(processMod, consoleError);
           }
       }
   return import(
@@ -33773,7 +33792,7 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
-const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }) => {
+function NvDatatable({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }) {
     const [paginationState, setPaginationState] = React.useState({
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
@@ -33783,6 +33802,16 @@ const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader
         .filter((col) => !col.hidden)
         .map((col) => ({
         accessorKey: col.field,
+        accessorFn: col.valueFormatter
+            ? (row) => {
+                const rawValue = row[col.field];
+                return col.valueFormatter({
+                    value: rawValue,
+                    row,
+                    field: col.field,
+                });
+            }
+            : undefined,
         header: col.headerName || String(col.field),
         size: col.width,
         enableResizing: col.resizable ?? true,
@@ -33915,8 +33944,13 @@ const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader
                     return (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${row.id}`, ref: isLastRow ? lastRowRef : undefined }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.id}` }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
                 })))),
         paginationAPI && renderPagination && renderPagination(paginationAPI)));
-};
+}
 NvDatatable.displayName = 'NvDatatable';
+function makeColumn() {
+    return function define(col) {
+        return col;
+    };
+}
 
 exports.CUSTOM_DAY_NAMES = CUSTOM_DAY_NAMES;
 exports.CUSTOM_MONTH_NAMES = CUSTOM_MONTH_NAMES;
@@ -33978,5 +34012,6 @@ exports.forceUpdate = forceUpdate;
 exports.getElement = getElement;
 exports.getRenderingRef = getRenderingRef;
 exports.h = h;
+exports.makeColumn = makeColumn;
 exports.registerInstance = registerInstance;
 exports.useNotifications = useNotifications;

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 
@@ -127,4 +127,5 @@ Object.defineProperty(exports, "ToggleButtonSize", {
 });
 exports.WEEK_ABBREVIATIONS = index.WEEK_ABBREVIATIONS;
 exports.defineCustomElements = index.defineCustomElements;
+exports.makeColumn = index.makeColumn;
 exports.useNotifications = index.useNotifications;

package/dist/cjs/{nv-accordion-item.entry-99OJUl7m.js → nv-accordion-item.entry-BBAGkmLI.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
 require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
 require('react');

package/dist/cjs/{nv-accordion.entry-D8jaknF9.js → nv-accordion.entry-CvvtdLIz.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-alert.entry-D_uvQxc9.js → nv-alert.entry-w5XeFsrC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');

package/dist/cjs/{nv-avatar.entry-B2zfDM3w.js → nv-avatar.entry-BxUZg-8h.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 require('react');

package/dist/cjs/{nv-badge_2.entry-Fnq2K2Ul.js → nv-badge_2.entry-DdSIFlJf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');

package/dist/cjs/{nv-breadcrumb.entry-CEN2iYUQ.js → nv-breadcrumb.entry-CmbqGw3C.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-breadcrumbs.entry-Bq8qINNk.js → nv-breadcrumbs.entry-DFHxtPKv.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-button.entry-CmpagMPP.js → nv-button.entry-Dyks6_mF.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-buttongroup.entry-CbTXVSWL.js → nv-buttongroup.entry-wn9zFd_M.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-calendar.entry-DNkXS4ll.js → nv-calendar.entry-Dldsa6dz.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var _commonjsHelpers1789f0cf = require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
 require('react');

package/dist/cjs/{nv-col.entry-Dlrdqper.js → nv-col.entry-DnG79KM1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-datagrid.entry-Z5GHfOvp.js → nv-datagrid.entry-C2ML-e47.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-datagridcolumn.entry-DvSFVguN.js → nv-datagridcolumn.entry-DcMPUtQS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-dialog.entry-BV6QBtx2.js → nv-dialog.entry-C0Vx7dQc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');

package/dist/cjs/{nv-dialogfooter_2.entry-Ci1C_E-2.js → nv-dialogfooter_2.entry-BGq8Jiib.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-fieldcheckbox.entry-BD9ETFVV.js → nv-fieldcheckbox.entry-CAPwYnSU.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/{nv-fielddate.entry-C06n2Hri.js → nv-fielddate.entry-Byt5cmQi.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/{nv-fielddaterange.entry-DFlaA4gv.js → nv-fielddaterange.entry-CCFeFP2q.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/{nv-fielddropdown.entry-ONwdJHOm.js → nv-fielddropdown.entry-BFp_2vBC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-fielddropdownitem.entry-CDKQtEra.js → nv-fielddropdownitem.entry-D_4KdBY1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-fieldmultiselect.entry-BHJC59Mw.js → nv-fieldmultiselect.entry-BaUD7Dcr.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-fieldnumber.entry-CmL1LPom.js → nv-fieldnumber.entry-DOmhBrDv.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 require('react-dom');
@@ -70,7 +70,15 @@ const NvFieldnumber = class {
         //#region METHODS
         this.handleInput = (event) => {
             const input = event.target;
-            this.value = input.valueAsNumber;
+            if (input.value === '') {
+                this.value = null;
+                return;
+            }
+            const nextValue = input.valueAsNumber;
+            if (Number.isNaN(nextValue)) {
+                return;
+            }
+            this.value = nextValue;
         };
         this.handleInputContainerClick = () => {
             this.inputElement.focus();
@@ -88,17 +96,26 @@ const NvFieldnumber = class {
             event.preventDefault();
         };
         this.isMinValueReached = () => {
-            return this.min !== undefined && this.value <= this.min;
+            return (this.min !== undefined &&
+                typeof this.value === 'number' &&
+                this.value <= this.min);
         };
         this.isMaxValueReached = () => {
-            return this.max !== undefined && this.value >= this.max;
+            return (this.max !== undefined &&
+                typeof this.value === 'number' &&
+                this.value >= this.max);
         };
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
     watchValueHandler(newValue) {
-        this.valueChanged.emit(newValue);
+        const normalized = typeof newValue === 'number' && !Number.isNaN(newValue) ? newValue : null;
+        if (this.lastEmittedValue === normalized) {
+            return;
+        }
+        this.lastEmittedValue = normalized;
+        this.valueChanged.emit(normalized);
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -116,9 +133,9 @@ const NvFieldnumber = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8af003bd5859bda13679a60e1dca6bda4864a42e' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '318ed968b1592803bd98bd001f57a6fd3d9ad940', htmlFor: this.inputId }, index.h("slot", { key: '3a52e9893368fed769434f5d4bdb1a2a4c28fed0', name: "label" }, this.label))), index.h("div", { key: 'c083c54d2413abdc30a12ac3942e3f74ace125b4', class: "input-wrapper" }, index.h("slot", { key: 'ad64782525a07406bb4d4e4de4a5476ee83be7b5', name: "before-input" }), index.h("div", { key: '19aec28c18ef9f69bbb9ed871ea87719c53264db', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '0d6f7e36d692ece52fa3317a5238a423707287e3', name: "leading-input" }), index.h("input", { key: '6ddffc0a0e4d8891cabf4d6fee984fea5e6007bd', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: '7fef4752d5d3e398c0913771e4569343b564d2ec', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '4b29cf3399dad597687398f26d0f574050755b69', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '8f4ea2180a0a9de4a66bfd7549fd4b02b488f4a0', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '8a310ae5350d964ac4cdab7e870ba5e1cea8cdeb', class: "stepper" }, index.h("nv-iconbutton", { key: '3dadc6fd876495cac99e4bf3f903ab2dd2dc4b38', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '770ada753ca07a45410ab60e3392ac4e8de102a3', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: '8f6221422dffca14130ad05ed6648a7a5e11ee09', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5a3faaab4b40d04b7de8030762039170368425c1', class: "description" }, index.h("slot", { key: '3627fdb29ebd949fb7642c8052489576c8b5c027', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '57534c82cc621135a2d44d0ff7cda2efffe6dd83', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '5f253705bb28cc938dfddaacf3d327bfc053dcf9', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '9b3239f09e6aace03f79f07399723fdbf557f070' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '322478abbaf477a33debcd828387402299ce6762', htmlFor: this.inputId }, index.h("slot", { key: '75b791ca0fb7eec55faaf966a32733e37b87fb90', name: "label" }, this.label))), index.h("div", { key: '5ce6c27db2b6b0ba8618ed2eac1f61abf8177793', class: "input-wrapper" }, index.h("slot", { key: '3a4a86e358d575fc312d27ee5ffba68474904bd4', name: "before-input" }), index.h("div", { key: '8e07c3c37ea4869aa309fba913663e1d225e21fd', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '91e7c82e46d3268493669e6dd121f643be86a6be', name: "leading-input" }), index.h("input", { key: '3dcbd9d10e4425ebb29b16b1157845ea4ee7bdef', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: '7d0d4a77d121433f4feb8aa2139be8e94f8e57a5', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '2a3969e56de0fc3911901c9540e300caf2b6d681', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '8964d7ffaa2cc2a70caf781a37e66383234c6895', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '1ca2fd7095afbc12a1a54c8b09551f28fe5a3579', class: "stepper" }, index.h("nv-iconbutton", { key: '1c3f9200c5409bc05fab9061dff3847a92298d45', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: 'eb65687b3c31d2ac8bdb534f5ca300a1ada9cd64', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: '01006c0c2487bce4f908104d263acb0231cdb701', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '9db93a8aa6bb002a3286763909118e9c7a1661c0', class: "description" }, index.h("slot", { key: '13b0f797bace74e641cdd658bb798bccbfec70dc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '4ca240bc22fb83a283637e60384e59d687d67e9e', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '145b68572a38e91559431ff51ec38a64027d4978', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-fieldpassword.entry-Bqbf_LJJ.js → nv-fieldpassword.entry-hogiPC5z.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-fieldradio.entry-RzSCysif.js → nv-fieldradio.entry-CKbyWpIK.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/{nv-fieldselect.entry-COTE8Ntn.js → nv-fieldselect.entry-tpURNUEP.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-fieldslider.entry-BVfmpUhc.js → nv-fieldslider.entry-v0d92XEY.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -231,7 +231,9 @@ const FieldInput = props => {
     const handleValueChanged = (event) => {
         event.stopPropagation();
         const newValue = event.detail;
-        if (isNaN(newValue)) {
+        // Accept null as a valid value (when field is cleared)
+        // Only reject NaN numbers
+        if (typeof newValue === 'number' && Number.isNaN(newValue)) {
             return;
         }
         onInput({

package/dist/cjs/{nv-fieldtext.entry-DO0lmw9C.js → nv-fieldtext.entry-DNYrOAhj.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-fieldtextarea.entry-CzVq8gjw.js → nv-fieldtextarea.entry-cRsjPwwR.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/{nv-fieldtime.entry-CRNYbeMY.js → nv-fieldtime.entry-BpGBUfKr.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/{nv-icon.entry-FoRJzCHm.js → nv-icon.entry-BfmyacWA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 require('react');

package/dist/cjs/{nv-iconbutton_2.entry-0lnnCk0B.js → nv-iconbutton_2.entry-DOv1RrkS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-menu.entry-BjXa70qP.js → nv-menu.entry-C2L8F-nG.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-menuitem.entry-CSPwpUWz.js → nv-menuitem.entry-DuDZTlJ1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-notification.entry-BYHTrzUz.js → nv-notification.entry-DxAj-mc7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');

package/dist/cjs/{nv-notificationcontainer.entry-BBjrL7gt.js → nv-notificationcontainer.entry-CUnTicXF.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-popover.entry-J_M8_rLL.js → nv-popover.entry-DVwa4DvW.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
 var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');

package/dist/cjs/{nv-row.entry-CmOypCPp.js → nv-row.entry-iLk2UglX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-split.entry-BqBytQZn.js → nv-split.entry-BrMHK6TS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-stack.entry-BKPf62wy.js → nv-stack.entry-C8jLJ5Ki.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-table.entry-DSL_jd5Y.js → nv-table.entry-D6o4g9Vo.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-toggle.entry-DbQQdp5m.js → nv-toggle.entry-9iwmu7qi.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/{nv-togglebutton.entry-DNG6SFTU.js → nv-togglebutton.entry-N7_CSvzS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-togglebuttongroup.entry-Bl43CVZN.js → nv-togglebuttongroup.entry-DWCytOhV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-tooltip.entry-CV841nfI.js → nv-tooltip.entry-BMxnZVYA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 

package/dist/components/NvDatatable.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect, useRef, } from 'react';
 import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable, } from '@tanstack/react-table';
 import { NvTable } from '../generated/components';
-const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }) => {
+function NvDatatable({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }) {
     const [paginationState, setPaginationState] = useState({
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
@@ -11,6 +11,16 @@ const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader
         .filter((col) => !col.hidden)
         .map((col) => ({
         accessorKey: col.field,
+        accessorFn: col.valueFormatter
+            ? (row) => {
+                const rawValue = row[col.field];
+                return col.valueFormatter({
+                    value: rawValue,
+                    row,
+                    field: col.field,
+                });
+            }
+            : undefined,
         header: col.headerName || String(col.field),
         size: col.width,
         enableResizing: col.resizable ?? true,
@@ -143,6 +153,11 @@ const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader
                     return (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${row.id}`, ref: isLastRow ? lastRowRef : undefined }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.id}` }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
                 })))),
         paginationAPI && renderPagination && renderPagination(paginationAPI)));
-};
+}
 NvDatatable.displayName = 'NvDatatable';
 export { NvDatatable };
+export function makeColumn() {
+    return function define(col) {
+        return col;
+    };
+}

package/dist/types/components/NvDatatable.d.ts

@@ -1,9 +1,11 @@
 import React, { type ComponentProps } from 'react';
-declare const NvDatatable: {
-    <T extends NvDatatableRow = NvDatatableRow>({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
-    displayName: string;
-};
+import { type NoInfer } from '@tanstack/react-table';
+declare function NvDatatable<T>({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+declare namespace NvDatatable {
+    var displayName: string;
+}
 export { NvDatatable };
+export declare function makeColumn<Row>(): <K extends keyof Row, F = Row[K]>(col: NvDatatableColumn<Row, K, F>) => NvDatatableColumn<Row, keyof Row, Row[keyof Row]>;
 export type NvDatatableProps<T> = {
     columns: Array<NvDatatableColumn<T>>;
     rows: Array<T>;
@@ -11,6 +13,26 @@ export type NvDatatableProps<T> = {
     renderPagination?: (api: NvDatatableRenderPaginationAPI) => React.ReactNode;
     stickyHeader?: boolean;
 } & Pick<ComponentProps<'div'>, 'className' | 'style'>;
+export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row[K]> {
+    field: K;
+    headerName?: string;
+    width?: number;
+    resizable?: boolean;
+    hidden?: boolean;
+    valueFormatter?: (params: NvTableValueFormatterParams<Row, Row[K], K>) => F;
+    renderCell?: (params: NvTableRenderCellParams<Row, F, K>) => React.ReactNode;
+}
+export interface NvTableRenderCellParams<Row, Value, Field> {
+    value: Value | NoInfer<Value>;
+    row: Row;
+    field: Field;
+    rowIndex: number;
+}
+export interface NvTableValueFormatterParams<Row, Value, Field> {
+    value: Value;
+    row: Row;
+    field: Field;
+}
 export interface NvDatatablePaginationConfig {
     mode: 'client' | 'server' | 'infinite';
     initialPageSize?: number;
@@ -42,18 +64,3 @@ export interface NvDatatableRenderPaginationAPI {
     isLoading?: boolean;
     hasMore?: boolean;
 }
-export interface NvDatatableColumn<T> {
-    field: keyof T;
-    headerName?: string;
-    width?: number;
-    resizable?: boolean;
-    hidden?: boolean;
-    renderCell?: (params: NvTableRenderCellParams<T, T[keyof T]>) => React.ReactNode;
-}
-export type NvDatatableRow = Record<string, string | number | boolean | null | undefined | typeof Date>;
-export interface NvTableRenderCellParams<T, V> {
-    value: V;
-    row: T;
-    field: keyof T;
-    rowIndex: number;
-}

package/dist/types/generated/components.d.ts

@@ -159,7 +159,7 @@ export type NvFieldmultiselectEvents = {
 };
 export declare const NvFieldmultiselect: StencilReactComponent<NvFieldmultiselectElement, NvFieldmultiselectEvents>;
 export type NvFieldnumberEvents = {
-    onValueChanged: EventName<CustomEvent<number>>;
+    onValueChanged: EventName<CustomEvent<number | null>>;
 };
 export declare const NvFieldnumber: StencilReactComponent<NvFieldnumberElement, NvFieldnumberEvents>;
 export type NvFieldpasswordEvents = {

package/dist/types/generated/components.server.d.ts

@@ -161,7 +161,7 @@ export type NvFieldmultiselectEvents = {
 };
 export declare const NvFieldmultiselect: StencilReactComponent<NvFieldmultiselectElement, NvFieldmultiselectEvents>;
 export type NvFieldnumberEvents = {
-    onValueChanged: EventName<CustomEvent<number>>;
+    onValueChanged: EventName<CustomEvent<number | null>>;
 };
 export declare const NvFieldnumber: StencilReactComponent<NvFieldnumberElement, NvFieldnumberEvents>;
 export type NvFieldpasswordEvents = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.19.0",
+  "version": "3.20.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",