@nova-design-system/nova-react 3.15.0 → 3.16.0

package/dist/cjs/nv-toggle.entry-ChpqtQtn.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var index = require('./index-7K7BV1CP.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+require('react-dom');
+
+const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-toggle-border-default);background:var(--components-toggle-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default-checked);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const NvToggleStyle0 = nvToggleCss;
+
+const NvToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the radio button’s input element and the for attribute of
+         * the associated label. If no ID is provided, a random one will be
+         * automatically generated to ensure unique identification, facilitating
+         * proper label association and accessibility.
+         */
+        this.inputId = v4A79185f4.v4();
+        /**
+         * Hides the label visually while still keeping it available for screen
+         * readers.
+         */
+        this.hideLabel = false;
+        /** Indicates whether the toggle is checked or not. */
+        this.checked = false;
+        /** Disables the toggle, preventing user interaction. */
+        this.disabled = false;
+        /**
+         * Sets the toggle to read-only, preventing user changes but still allowing
+         * focus and selection of text.
+         */
+        this.readonly = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the toggle input element and updates the checked state.
+     * the checked state of the host elements.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.type === 'checkbox' && target.id === this.inputId) {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '65222149af4edb9f8fd2da7efe9a01e15dec4722', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '7edd5587281b5610269f1ac09826ce379abfae24', class: "input-container" }, index.h("input", { key: '30d3db3cbdc263259a5ba1bf8e637225c4db3b4a', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'a8a6d3c2774560b7d43cda75882d90cc564f4c54', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fe980a07df4901081fda42df758236da0b8a11d0', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '723cec5914c6c0bed7e14e61e2f64e83c8e8b7b8', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f811065ed06f0816d8f0f1f65d4c659cbde3f683', class: "description" }, index.h("slot", { key: '541946e3f33a315bf667999c30a44fd93fc5f07f', name: "description" }, this.description))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvToggle.style = NvToggleStyle0;
+
+exports.nv_toggle = NvToggle;

package/dist/cjs/{nv-togglebutton.entry-ZpltTrQe.js → nv-togglebutton.entry-DE7CKmeN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BK1_MpRZ.js');
+var index = require('./index-7K7BV1CP.js');
 require('react');
 require('react-dom');
 
@@ -48,7 +48,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b9e37fc1cb34272bca476c7b61db173ab2a9d238', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'cf9cf3445fd93873def1f9fa9cbec46c35600025' })));
+        return (index.h(index.Host, { key: 'c4b698b1fb80f0dcca5d7a77bc20d22db1cbf538', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '605385f07f32b989685983cfd1a082525741fba4' })));
     }
 };
 NvTogglebutton.style = NvTogglebuttonStyle0;

package/dist/cjs/{nv-togglebuttongroup.entry-Bu0C6Iq3.js → nv-togglebuttongroup.entry-BJPjdmHD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BK1_MpRZ.js');
+var index = require('./index-7K7BV1CP.js');
 require('react');
 require('react-dom');
 
@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'edb5b3bb7651b482cd02625038e36cdb35743453' }, index.h("slot", { key: '2b0bc4891b885ecf7febdce7062fc02b120ec939' })));
+        return (index.h(index.Host, { key: 'ab91ff1817e3388508ed1da7a9ed57a79cf8c4bc' }, index.h("slot", { key: '4a3280db78c1f0cd120a0cb32d95eabaf69995a6' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tooltip.entry-DR4aj5qF.js → nv-tooltip.entry-D9-Fga6C.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BK1_MpRZ.js');
+var index = require('./index-7K7BV1CP.js');
 require('react');
 require('react-dom');
 
@@ -46,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, index.h("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), index.h("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), index.h("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
+        return (index.h(index.Host, { key: 'c2fdcd47be909554e31a3a7d77cd94dcb07c0d6e' }, index.h("slot", { key: '2305f6b7175d0ba84819351f60f2a4d76d117df9' }), index.h("nv-popover", { key: 'e388730b5858671d08981c6bbf72588a5084edbf', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '73f548a1c822f7c6d5a97bb4ef8da0d335cf049e', slot: "content" }, this.message), index.h("slot", { key: 'abb7a2dfa6a327122732802a867c5d4057fd1616', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/components/NvDatatable.js

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
+import { NvTable } from '../generated/components';
+const NvDatatable = ({ columns, rows, ...htmlProps }) => {
+    const tableColumns = useMemo(() => columns
+        .filter((col) => !col.hidden)
+        .map((col) => ({
+        accessorKey: col.field,
+        header: col.headerName || String(col.field),
+        size: col.width,
+        enableResizing: col.resizable ?? true,
+        cell: (context) => {
+            const value = context.getValue();
+            const row = context.row.original;
+            const rowIndex = context.row.index;
+            if (col.renderCell) {
+                return col.renderCell({
+                    value,
+                    row,
+                    field: col.field,
+                    rowIndex,
+                });
+            }
+            return value;
+        },
+    })), [columns]);
+    const table = useReactTable({
+        data: rows,
+        columns: tableColumns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return (React.createElement(NvTable, { ...htmlProps },
+        React.createElement("table", null,
+            React.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => (React.createElement("th", { key: header.id, "data-testid": `datatable-header-${header.id}`, style: {
+                    width: header.column.columnDef.size + 'px',
+                }, "data-no-resize": header.column.columnDef.enableResizing ? null : true }, header.isPlaceholder
+                ? null
+                : flexRender(header.column.columnDef.header, header.getContext())))))))),
+            React.createElement("tbody", null, table.getRowModel().rows.map((row) => (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${row.id}` }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.id}`, style: {
+                    padding: '8px',
+                    borderBottom: '1px solid #eee',
+                } }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
+};
+NvDatatable.displayName = 'NvDatatable';
+export { NvDatatable };

package/dist/generated/components.js

@@ -41,7 +41,6 @@ import { NvPopover as NvPopoverElement, defineCustomElement as defineNvPopover }
 import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement, defineCustomElement as defineNvStack } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement, defineCustomElement as defineNvTable } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
-import { NvTablecolumn as NvTablecolumnElement, defineCustomElement as defineNvTablecolumn } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablecolumn.js";
 import { NvToggle as NvToggleElement, defineCustomElement as defineNvToggle } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement, defineCustomElement as defineNvTogglebutton } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement, defineCustomElement as defineNvTogglebuttongroup } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
@@ -52,7 +51,7 @@ export const NvAccordion = createComponent({
     tagName: 'nv-accordion',
     elementClass: NvAccordionElement,
     react: React,
-    events: { onOpenChanged: 'openChanged' },
+    events: { onOpenIndexesChanged: 'openIndexesChanged' },
     defineCustomElement: defineNvAccordion
 });
 export const NvAccordionItem = createComponent({
@@ -367,15 +366,8 @@ export const NvTable = createComponent({
     tagName: 'nv-table',
     elementClass: NvTableElement,
     react: React,
-    events: { onAction: 'action' },
-    defineCustomElement: defineNvTable
-});
-export const NvTablecolumn = createComponent({
-    tagName: 'nv-tablecolumn',
-    elementClass: NvTablecolumnElement,
-    react: React,
     events: {},
-    defineCustomElement: defineNvTablecolumn
+    defineCustomElement: defineNvTable
 });
 export const NvToggle = createComponent({
     tagName: 'nv-toggle',

package/dist/generated/components.server.js

@@ -708,22 +708,7 @@ export const NvStack = createComponent({
 });
 export const NvTable = createComponent({
     tagName: 'nv-table',
-    properties: {
-        dataJson: 'data-json',
-        columnsConfigJson: 'columns-config-json',
-        fallbackValue: 'fallback-value',
-        noDataMessage: 'no-data-message',
-        noColumnsNoDataMessage: 'no-columns-no-data-message'
-    },
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvTablecolumn = createComponent({
-    tagName: 'nv-tablecolumn',
-    properties: {
-        name: 'name',
-        header: 'header'
-    },
+    properties: {},
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });

package/dist/index.js

@@ -2,3 +2,4 @@ export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
 export { useNotifications, NotificationProvider, } from './providers/NotificationProvider';
+export * from './components/NvDatatable';

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

@@ -0,0 +1,25 @@
+import React, { type ComponentProps } from 'react';
+declare const NvDatatable: {
+    <T extends NvDatatableRow = NvDatatableRow>({ columns, rows, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+    displayName: string;
+};
+export { NvDatatable };
+export type NvDatatableProps<T> = {
+    columns: Array<NvDatatableColumn<T>>;
+    rows: Array<T>;
+} & Pick<ComponentProps<'div'>, 'className' | 'style'>;
+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

@@ -41,16 +41,13 @@ import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcompo
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
-import { NvTablecolumn as NvTablecolumnElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablecolumn.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
 import { NvTooltip as NvTooltipElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 export type NvAccordionEvents = {
-    onOpenChanged: EventName<CustomEvent<{
-        openIndexes: number[];
-    }>>;
+    onOpenIndexesChanged: EventName<CustomEvent<number[]>>;
 };
 export declare const NvAccordion: StencilReactComponent<NvAccordionElement, NvAccordionEvents>;
 export type NvAccordionItemEvents = {
@@ -221,15 +218,8 @@ export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
 export type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
-export type NvTableEvents = {
-    onAction: EventName<CustomEvent<{
-        keyAction: string;
-        details: any;
-    }>>;
-};
+export type NvTableEvents = NonNullable<unknown>;
 export declare const NvTable: StencilReactComponent<NvTableElement, NvTableEvents>;
-export type NvTablecolumnEvents = NonNullable<unknown>;
-export declare const NvTablecolumn: StencilReactComponent<NvTablecolumnElement, NvTablecolumnEvents>;
 export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };

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

@@ -41,7 +41,6 @@ import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcompo
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
-import { NvTablecolumn as NvTablecolumnElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablecolumn.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
@@ -50,9 +49,7 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
 import { type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
 export declare const serializeShadowRoot: SerializeShadowRootOptions;
 export type NvAccordionEvents = {
-    onOpenChanged: EventName<CustomEvent<{
-        openIndexes: number[];
-    }>>;
+    onOpenIndexesChanged: EventName<CustomEvent<number[]>>;
 };
 export declare const NvAccordion: StencilReactComponent<NvAccordionElement, NvAccordionEvents>;
 export type NvAccordionItemEvents = {
@@ -223,15 +220,8 @@ export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
 export type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
-export type NvTableEvents = {
-    onAction: EventName<CustomEvent<{
-        keyAction: string;
-        details: any;
-    }>>;
-};
+export type NvTableEvents = NonNullable<unknown>;
 export declare const NvTable: StencilReactComponent<NvTableElement, NvTableEvents>;
-export type NvTablecolumnEvents = NonNullable<unknown>;
-export declare const NvTablecolumn: StencilReactComponent<NvTablecolumnElement, NvTablecolumnEvents>;
 export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };

package/dist/types/index.d.ts

@@ -2,3 +2,4 @@ export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
 export { useNotifications, NotificationProvider, type NotificationOptions, type NotificationContextValue, type NotificationProviderProps, type Notification, } from './providers/NotificationProvider';
+export * from './components/NvDatatable';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.15.0",
+  "version": "3.16.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",
@@ -33,11 +33,12 @@
     "tsc:watch": "tsc -p . --outDir ./dist --declarationDir ./dist/types --declaration true --watch",
     "storybook": "storybook dev -p 6006",
     "storybook.build": "storybook build -o ../../storybook-static/react",
-    "clean": "rimraf dist lib/generated",
+    "clean": "rimraf dist lib/generated lib/stories/generated",
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "dependencies": {
-    "@nova-design-system/nova-webcomponents": "*"
+    "@nova-design-system/nova-webcomponents": "*",
+    "@tanstack/react-table": "8.21.3"
   },
   "devDependencies": {
     "react": "^18.3.1",

package/dist/cjs/dom.utils-ac71e0ef-CmIwRr6O.js

@@ -1,168 +0,0 @@
-'use strict';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * All properties that should be excluded from the deep copy of an HTML element.
- */
-const excludedProps = new Set([
-    // Text and content-related properties
-    'textContent',
-    'innerText',
-    'outerText',
-    'innerHTML',
-    'outerHTML',
-    'text',
-    // Form element properties
-    'value',
-    'defaultValue',
-    'checked',
-    'defaultChecked',
-    'selectionStart',
-    'selectionEnd',
-    'selectionDirection',
-    'form',
-    'willValidate',
-    'validity',
-    'validationMessage',
-    'labels',
-    'list',
-    'maxLength',
-    'minLength',
-    'valueAsDate',
-    'valueAsNumber',
-    // Editability and namespaces
-    'contentEditable',
-    'isContentEditable',
-    'namespaceURI',
-    // Child-related properties (handled recursively)
-    'attributes',
-    'children',
-    'childNodes',
-    'firstChild',
-    'lastChild',
-    // Blazor-related properties
-    'origin',
-    'dataset',
-    'attributeStyleMap',
-    'prefix',
-    'localName',
-    'tagName',
-    'shadowRoot',
-    'assignedSlot',
-    'scrollWidth',
-    'scrollHeight',
-    'clientTop',
-    'clientLeft',
-    'clientWidth',
-    'clientHeight',
-    'firstElementChild',
-    'lastElementChild',
-    'childElementCount',
-    'previousElementSibling',
-    'nextElementSibling',
-    'currentCSSZoom',
-    'nodeType',
-    'nodeName',
-    'baseURI',
-    'isConnected',
-    'ownerDocument',
-    'parentNode',
-    'parentElement',
-    'previousSibling',
-    'nextSibling',
-    'ELEMENT_NODE',
-    'ATTRIBUTE_NODE',
-    'TEXT_NODE',
-    'CDATA_SECTION_NODE',
-    'ENTITY_REFERENCE_NODE',
-    'ENTITY_NODE',
-    'PROCESSING_INSTRUCTION_NODE',
-    'COMMENT_NODE',
-    'DOCUMENT_NODE',
-    'DOCUMENT_TYPE_NODE',
-    'DOCUMENT_FRAGMENT_NODE',
-    'NOTATION_NODE',
-    'DOCUMENT_POSITION_DISCONNECTED',
-    'DOCUMENT_POSITION_PRECEDING',
-    'DOCUMENT_POSITION_FOLLOWING',
-    'DOCUMENT_POSITION_CONTAINS',
-    'DOCUMENT_POSITION_CONTAINED_BY',
-    'DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC',
-]);
-/**
- * Deep copy an HTML element with all its attributes, properties, and child nodes.
- * This method is useful for creating a clone of an element that can be safely modified without affecting the original.
- * @param {HTMLElement} element - The HTML element to copy.
- * @returns {HTMLElement} - A deep copy of the HTML element.
- * @example const copy = deepCopyElement(document.getElementById('myElement'));
- */
-function deepCopyElement(element) {
-    const copy = document.createElement(element.tagName);
-    // ✅ Copy attributes
-    Array.from(element.attributes).forEach(attr => {
-        copy.setAttribute(attr.name, attr.value);
-    });
-    // ✅ Dynamically extract relevant properties
-    const properties = new Set();
-    // Collect only own enumerable properties
-    Object.keys(element).forEach(key => properties.add(key));
-    // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
-    let proto = Object.getPrototypeOf(element);
-    while (proto && proto !== HTMLElement.prototype) {
-        Object.keys(proto).forEach(key => properties.add(key));
-        proto = Object.getPrototypeOf(proto);
-    }
-    // ✅ Filter and copy only non-function properties (methods are excluded) and non-event listeners
-    properties.forEach(prop => {
-        if (typeof element[prop] !== 'function' && // Ignore methods
-            !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-            !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
-        ) {
-            try {
-                copy[prop] = element[prop];
-            }
-            catch (error) {
-                console.warn(`Could not copy property ${prop}:`, error.message);
-            }
-        }
-    });
-    // ✅ Copy dataset separately
-    Object.assign(copy.dataset, element.dataset);
-    // ✅ Handle form elements specifically
-    if (element instanceof HTMLInputElement) {
-        copy.value = element.value;
-        copy.checked = element.checked;
-        copy.defaultValue = element.defaultValue;
-        copy.defaultChecked = element.defaultChecked;
-        copy.selectionStart = element.selectionStart;
-        copy.selectionEnd = element.selectionEnd;
-        copy.selectionDirection = element.selectionDirection;
-    }
-    else if (element instanceof HTMLTextAreaElement) {
-        copy.value = element.value;
-        copy.defaultValue = element.defaultValue;
-        copy.selectionStart = element.selectionStart;
-        copy.selectionEnd = element.selectionEnd;
-        copy.selectionDirection =
-            element.selectionDirection;
-    }
-    else if (element instanceof HTMLSelectElement) {
-        copy.value = element.value;
-        copy.selectedIndex = element.selectedIndex;
-    }
-    // ✅ Recursively copy child nodes (prevent duplicates)
-    element.childNodes.forEach(child => {
-        let childCopy;
-        if (child.nodeType === Node.ELEMENT_NODE) {
-            childCopy = deepCopyElement(child);
-        }
-        else {
-            childCopy = child.cloneNode(true);
-        }
-        copy.appendChild(childCopy);
-    });
-    return copy;
-}
-
-exports.deepCopyElement = deepCopyElement;
-exports.excludedProps = excludedProps;

package/dist/cjs/nv-avatar.entry-BTmGyeGF.js

@@ -1,68 +0,0 @@
-'use strict';
-
-var index = require('./index-BK1_MpRZ.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
-require('react');
-require('react-dom');
-
-const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
-const NvAvatarStyle0 = nvAvatarCss;
-
-const NvAvatar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Define the size of the avatar. You can use t-shirt sizes.
-         */
-        this.size = 'md';
-        /**
-         * You can apply different colors on the Avatar.
-         * Use a string number between 1 and 10.
-         */
-        this.color = '1';
-    }
-    componentWillRender() {
-        if (this.xsmall) {
-            this.size = constants69bafca2.SemanticSizes.ExtraSmall;
-        }
-        if (this.small) {
-            this.size = constants69bafca2.SemanticSizes.Small;
-        }
-        if (this.medium) {
-            this.size = constants69bafca2.SemanticSizes.Medium;
-        }
-        if (this.large) {
-            this.size = constants69bafca2.SemanticSizes.Large;
-        }
-        if (this.xlarge) {
-            this.size = constants69bafca2.SemanticSizes.ExtraLarge;
-        }
-        if (this.text) {
-            this.initials = this.text;
-        }
-        if (this.url) {
-            this.src = this.url;
-        }
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Makes sure the initials are trimmed to 2 letters.
-     * @param {string} initials - The initials to be trimmed.
-     * @returns {string} The trimmed initials.
-     */
-    trimInitials(initials) {
-        return initials.trim().substring(0, 2);
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '127d470eb9121f611f9e18f029ab9ef15a4a49df', class: clsx297c1ffe.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
-    }
-};
-NvAvatar.style = NvAvatarStyle0;
-
-exports.nv_avatar = NvAvatar;