nexa-ui-kit 0.11.8 → 0.11.9

package/dist/components/NButton.js

@@ -197,6 +197,23 @@ const __style = `.n-btn[data-v-6c6a1bc6]{
 }
 .n-btn-info[data-v-6c6a1bc6]:focus-visible{ box-shadow: var(--n-ring-info); }
 
+/* Ghost */
+.n-btn-ghost[data-v-6c6a1bc6]{
+  background-color: transparent;
+  color: var(--n-color-text);
+  border-color: transparent;
+}
+.n-btn-ghost[data-v-6c6a1bc6]:hover:not(:disabled){
+  background-color: var(--n-color-surface-hover);
+  color: var(--n-color-text);
+}
+.n-btn-ghost[data-v-6c6a1bc6]:active:not(:disabled), .is-pressed.n-btn-ghost[data-v-6c6a1bc6]{
+  background-color: var(--n-color-border);
+}
+.n-btn-ghost[data-v-6c6a1bc6]:focus-visible{
+  box-shadow: var(--n-ring-surface);
+}
+
 /* Outlined variants */
 .is-outlined[data-v-6c6a1bc6]{
   background-color: transparent !important;

package/dist/components/NButton.nexa

@@ -187,6 +187,23 @@ const handleClick = (e) => {
 }
 .n-btn-info:focus-visible { box-shadow: var(--n-ring-info); }
 
+/* Ghost */
+.n-btn-ghost {
+  background-color: transparent;
+  color: var(--n-color-text);
+  border-color: transparent;
+}
+.n-btn-ghost:hover:not(:disabled) {
+  background-color: var(--n-color-surface-hover);
+  color: var(--n-color-text);
+}
+.n-btn-ghost:active:not(:disabled), .is-pressed.n-btn-ghost {
+  background-color: var(--n-color-border);
+}
+.n-btn-ghost:focus-visible {
+  box-shadow: var(--n-ring-surface);
+}
+
 /* Outlined variants */
 .is-outlined {
   background-color: transparent !important;

package/dist/components/NCheckbox.js

@@ -63,7 +63,7 @@ const __style = `.n-checkbox[data-v-e798c5c]{
   user-select: none;
   padding: 0.5rem 0.75rem;
   border-radius: var(--n-radius-md);
-  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
 }
 .n-checkbox[data-v-e798c5c]:hover:not(.is-disabled){
   background: rgba(99, 102, 241, 0.08);

package/dist/components/NCheckbox.nexa

@@ -48,7 +48,7 @@ const handleToggle = () => {
   user-select: none;
   padding: 0.5rem 0.75rem;
   border-radius: var(--n-radius-md);
-  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
 }
 .n-checkbox:hover:not(.is-disabled) {
   background: rgba(99, 102, 241, 0.08);

package/dist/components/NDataTable.js

@@ -2,7 +2,7 @@ import { signal, computed, effect, h, hText, defineComponent, registerComponent,
 import NPaginator from './NPaginator.js'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-5a84a658',
+  __scopeId: 'data-v-4403e88d',
   __hmrId: 'NDataTable_nexa',
   props: { value: { type: Array, default: () => [] }, columns: { type: Array, default: () => [] }, stripedRows: { type: Boolean, default: false }, hoverRows: { type: Boolean, default: true }, size: { type: String, default: 'md' }, scrollable: { type: Boolean, default: true }, paginator: { type: Boolean, default: true }, rows: { type: Number, default: 10 }, first: { type: Number, default: 0 }, rowsPerPageOptions: { type: Array, default: () => [10, 20, 50] }, selectionMode: { type: String, default: '' }, selection: { type: null, default: null }, dataKey: { type: String, default: '' }, sortField: { type: String, default: '' }, sortOrder: { type: Number, default: 1 }, resizableColumns: { type: Boolean, default: true }, columnResizeMode: { type: String, default: 'fit' }, filterDisplay: { type: String, default: 'row' }, globalFilter: { type: String, default: '' }, globalFilterFields: { type: Array, default: null }, filters: { type: null, default: null }, lazy: { type: Boolean, default: false }, totalRecords: { type: Number, default: 0 }, emptyMessage: { type: String, default: 'No records found' }, showGridlines: { type: Boolean, default: false }, searchPlaceholder: { type: String, default: 'Search...' }, filterPlaceholder: { type: String, default: 'Filter' }, loading: { type: Boolean, default: false } },
   emits: ['update:first', 'update:rows', 'update:selection', 'update:sortField', 'update:sortOrder', 'update:globalFilter', 'update:filters', 'updateFirst', 'updateRows', 'updateSelection', 'updateSortField', 'updateSortOrder', 'updateGlobalFilter', 'updateFilters', 'page', 'rowSelect', 'rowUnselect', 'sort', 'filter'],
@@ -167,97 +167,97 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { internalFirst, internalRows, internalSortField, internalSortOrder, internalFilters, effectiveFilters, columnWidths, resizing, internalSelection, lastPropGlobal, lastPropSelection, normalizeColumns, getRowKey, effectiveSelection, isRowSelected, toggleRowSelection, allVisibleSelected, toggleAllVisible, getHeaderContent, getRawValue, getCellContent, matchFilter, filteredRows, sortedRows, totalRecords, visibleRows, setSort, onSortClick, setGlobal, setColumnFilter, onColumnFilterInput, onPage, getWidth, startResize, NPaginator: _ntc_NPaginator, $slots, emit, value, columns, stripedRows, hoverRows, size, scrollable, paginator, rows, first, rowsPerPageOptions, selectionMode, selection, dataKey, sortField, sortOrder, resizableColumns, columnResizeMode, filterDisplay, globalFilter, globalFilterFields, filters, lazy, emptyMessage, showGridlines, searchPlaceholder, filterPlaceholder, loading, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: ["n-dt", [`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']], "aria-busy": loading ? 'true' : undefined, "data-v-5a84a658": "" }, [
+    return h('div', { class: ["n-dt", [`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']], "aria-busy": loading ? 'true' : undefined, "data-v-4403e88d": "" }, [
         "\n    ",
-        h('div', { class: "n-dt-toolbar", "data-v-5a84a658": "" }, [
+        h('div', { class: "n-dt-toolbar", "data-v-4403e88d": "" }, [
         "\r\n      ",
-        h('div', { class: "n-dt-global", "data-v-5a84a658": "" }, [
+        h('div', { class: "n-dt-global", "data-v-4403e88d": "" }, [
         "\r\n        ",
-        h('svg', { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-5a84a658": "" }, [
-        h('circle', { cx: "11", cy: "11", r: "8", "data-v-5a84a658": "" }),
-        h('line', { x1: "21", y1: "21", x2: "16.65", y2: "16.65", "data-v-5a84a658": "" })
+        h('svg', { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4403e88d": "" }, [
+        h('circle', { cx: "11", cy: "11", r: "8", "data-v-4403e88d": "" }),
+        h('line', { x1: "21", y1: "21", x2: "16.65", y2: "16.65", "data-v-4403e88d": "" })
       ]),
         "\r\n        ",
-        h('input', { class: "n-dt-global-input", value: effectiveFilters.value.__global || '', placeholder: searchPlaceholder, onInput: setGlobal, "data-v-5a84a658": "" }),
+        h('input', { class: "n-dt-global-input", value: effectiveFilters.value.__global || '', placeholder: searchPlaceholder, onInput: setGlobal, "data-v-4403e88d": "" }),
         "\r\n      "
       ]),
         "\r\n    "
       ]),
         "\r\n    ",
-        h('div', { class: "n-dt-wrapper", "data-v-5a84a658": "" }, [
+        h('div', { class: "n-dt-wrapper", "data-v-4403e88d": "" }, [
         "\r\n      ",
-        h('table', { class: ["n-dt-table", { 'is-striped': stripedRows, 'is-hover': hoverRows }], "data-v-5a84a658": "" }, [
+        h('table', { class: ["n-dt-table", { 'is-striped': stripedRows, 'is-hover': hoverRows }], "data-v-4403e88d": "" }, [
         "\r\n        ",
-        h('thead', { class: "n-dt-thead", "data-v-5a84a658": "" }, [
+        h('thead', { class: "n-dt-thead", "data-v-4403e88d": "" }, [
         "\r\n          ",
-        h('tr', { class: "n-dt-head-row", "data-v-5a84a658": "" }, [
+        h('tr', { class: "n-dt-head-row", "data-v-4403e88d": "" }, [
         "\r\n            ",
-        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-5a84a658": "" }, [
+        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-4403e88d": "" }, [
         "\r\n              ",
-        (selectionMode === 'multiple') ? h('button', { class: ["n-dt-selectbox", { 'is-checked': allVisibleSelected.value }], type: "button", onClick: ($event) => { $event.stopPropagation(); (toggleAllVisible)($event) }, "aria-label": allVisibleSelected.value ? 'Deselect all' : 'Select all', "data-v-5a84a658": "" }, [
+        (selectionMode === 'multiple') ? h('button', { class: ["n-dt-selectbox", { 'is-checked': allVisibleSelected.value }], type: "button", onClick: ($event) => { $event.stopPropagation(); (toggleAllVisible)($event) }, "aria-label": allVisibleSelected.value ? 'Deselect all' : 'Select all', "data-v-4403e88d": "" }, [
         "\r\n                ",
-        (allVisibleSelected.value) ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-5a84a658": "" }, [
-        h('path', { d: "M20 6L9 17l-5-5", "data-v-5a84a658": "" })
+        (allVisibleSelected.value) ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4403e88d": "" }, [
+        h('path', { d: "M20 6L9 17l-5-5", "data-v-4403e88d": "" })
       ]) : null
       ]) : null
       ]) : null,
         (normalizeColumns.value).map((col, index) =>
-        h('th', { class: ["n-dt-th", [`is-${col.align}`, col.sortable ? 'is-sortable' : '']], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-field": col.field, onClick: onSortClick, "data-v-5a84a658": "" }, [
+        h('th', { class: ["n-dt-th", [`is-${col.align}`, col.sortable ? 'is-sortable' : '']], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-field": col.field, onClick: onSortClick, "data-v-4403e88d": "" }, [
         "\r\n              ",
-        h('div', { class: "n-dt-th-content", "data-v-5a84a658": "" }, [
+        h('div', { class: "n-dt-th-content", "data-v-4403e88d": "" }, [
         "\r\n                ",
-        h('span', { class: "n-dt-th-text", "data-v-5a84a658": "" }, [
+        h('span', { class: "n-dt-th-text", "data-v-4403e88d": "" }, [
         $slots.value && $slots.value[`header-${col.field}`] ? $slots[`header-${col.field}`]({ column: col }) : getHeaderContent(col)
       ]),
         "\r\n                ",
-        (col.sortable) ? h('span', { class: ["n-dt-sort", { 'is-active': internalSortField.value === col.field }], "data-v-5a84a658": "" }, [
+        (col.sortable) ? h('span', { class: ["n-dt-sort", { 'is-active': internalSortField.value === col.field }], "data-v-4403e88d": "" }, [
         "\r\n                  ",
-        h('svg', { class: ["n-dt-sort-arrow n-dt-sort-arrow-up", { 'is-on': internalSortField.value === col.field && internalSortOrder.value === 1 }], viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-5a84a658": "" }, [
-        h('path', { d: "M12 19V5M5 12l7-7 7 7", "data-v-5a84a658": "" })
+        h('svg', { class: ["n-dt-sort-arrow n-dt-sort-arrow-up", { 'is-on': internalSortField.value === col.field && internalSortOrder.value === 1 }], viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4403e88d": "" }, [
+        h('path', { d: "M12 19V5M5 12l7-7 7 7", "data-v-4403e88d": "" })
       ]),
         "\r\n                  ",
-        h('svg', { class: ["n-dt-sort-arrow n-dt-sort-arrow-down", { 'is-on': internalSortField.value === col.field && internalSortOrder.value === -1 }], viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-5a84a658": "" }, [
-        h('path', { d: "M12 5v14M19 12l-7 7-7-7", "data-v-5a84a658": "" })
+        h('svg', { class: ["n-dt-sort-arrow n-dt-sort-arrow-down", { 'is-on': internalSortField.value === col.field && internalSortOrder.value === -1 }], viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4403e88d": "" }, [
+        h('path', { d: "M12 5v14M19 12l-7 7-7-7", "data-v-4403e88d": "" })
       ]),
         "\r\n                "
       ]) : null
       ]),
         "\r\n              ",
-        (resizableColumns) ? h('span', { class: "n-dt-resizer", "data-field": col.field, onMousedown: startResize, "data-v-5a84a658": "" }) : null
+        (resizableColumns) ? h('span', { class: "n-dt-resizer", "data-field": col.field, onMousedown: startResize, "data-v-4403e88d": "" }) : null
       ])
       ),
         "\r\n          "
       ]),
         "\r\n          ",
-        (filterDisplay === 'row') ? h('tr', { class: "n-dt-filter-row", "data-v-5a84a658": "" }, [
+        (filterDisplay === 'row') ? h('tr', { class: "n-dt-filter-row", "data-v-4403e88d": "" }, [
         "\r\n            ",
-        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-5a84a658": "" }) : null,
+        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-4403e88d": "" }) : null,
         (normalizeColumns.value).map((col, index) =>
-        h('th', { class: ["n-dt-th", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-5a84a658": "" }, [
+        h('th', { class: ["n-dt-th", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-4403e88d": "" }, [
         "\r\n              ",
-        (col.filterable) ? h('input', { class: "n-dt-filter", "data-field": col.field, value: (effectiveFilters.value[col.field]?.value) || '', placeholder: filterPlaceholder, onInput: onColumnFilterInput, "data-v-5a84a658": "" }) : null
+        (col.filterable) ? h('input', { class: "n-dt-filter", "data-field": col.field, value: (effectiveFilters.value[col.field]?.value) || '', placeholder: filterPlaceholder, onInput: onColumnFilterInput, "data-v-4403e88d": "" }) : null
       ])
       ),
         "\r\n          "
       ]) : null
       ]),
         "\r\n        ",
-        h('tbody', { class: "n-dt-tbody", "data-v-5a84a658": "" }, [
+        h('tbody', { class: "n-dt-tbody", "data-v-4403e88d": "" }, [
         "\r\n          ",
         (visibleRows.value).map((row, i) =>
-        h('tr', { class: ["n-dt-row", { 'is-selected': isRowSelected(row, i + internalFirst.value) }], key: getRowKey(row, i + internalFirst.value), onClick: ($event) => { toggleRowSelection(row, i + internalFirst.value) }, "data-v-5a84a658": "" }, [
+        h('tr', { class: ["n-dt-row", { 'is-selected': isRowSelected(row, i + internalFirst.value) }], key: getRowKey(row, i + internalFirst.value), onClick: ($event) => { toggleRowSelection(row, i + internalFirst.value) }, "data-v-4403e88d": "" }, [
         "\r\n            ",
-        (selectionMode) ? h('td', { class: "n-dt-td is-selection", "data-v-5a84a658": "" }, [
+        (selectionMode) ? h('td', { class: "n-dt-td is-selection", "data-v-4403e88d": "" }, [
         "\r\n              ",
-        (selectionMode === 'multiple') ? h('button', { class: ["n-dt-selectbox", { 'is-checked': isRowSelected(row, i + internalFirst.value) }], type: "button", onClick: ($event) => { $event.stopPropagation(); (($event) => { toggleRowSelection(row, i + internalFirst.value) })($event) }, "aria-label": isRowSelected(row, i + internalFirst.value) ? 'Deselect row' : 'Select row', "data-v-5a84a658": "" }, [
+        (selectionMode === 'multiple') ? h('button', { class: ["n-dt-selectbox", { 'is-checked': isRowSelected(row, i + internalFirst.value) }], type: "button", onClick: ($event) => { $event.stopPropagation(); (($event) => { toggleRowSelection(row, i + internalFirst.value) })($event) }, "aria-label": isRowSelected(row, i + internalFirst.value) ? 'Deselect row' : 'Select row', "data-v-4403e88d": "" }, [
         "\r\n                ",
-        (isRowSelected(row, i + internalFirst.value)) ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-5a84a658": "" }, [
-        h('path', { d: "M20 6L9 17l-5-5", "data-v-5a84a658": "" })
+        (isRowSelected(row, i + internalFirst.value)) ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4403e88d": "" }, [
+        h('path', { d: "M20 6L9 17l-5-5", "data-v-4403e88d": "" })
       ]) : null
       ]) : null
       ]) : null,
         (normalizeColumns.value).map((col, index) =>
-        h('td', { class: ["n-dt-td", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-5a84a658": "" }, [
+        h('td', { class: ["n-dt-td", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-4403e88d": "" }, [
         "\r\n              ",
         $slots.value && $slots.value[`body-${col.field}`] ? $slots[`body-${col.field}`]({ data: row, column: col, index: i + internalFirst.value }) : getCellContent(row, col, i + internalFirst.value),
         "\r\n            "
@@ -267,8 +267,8 @@ _sfc_main.render = function(ctx) {
       ])
       ),
         "\r\n          ",
-        (visibleRows.value.length === 0) ? h('tr', { class: "n-dt-empty-row", "data-v-5a84a658": "" }, [
-        h('td', { class: "n-dt-empty", colspan: normalizeColumns.value.length + (selectionMode ? 1 : 0), "data-v-5a84a658": "" }, [
+        (visibleRows.value.length === 0) ? h('tr', { class: "n-dt-empty-row", "data-v-4403e88d": "" }, [
+        h('td', { class: "n-dt-empty", colspan: normalizeColumns.value.length + (selectionMode ? 1 : 0), "data-v-4403e88d": "" }, [
         emptyMessage
       ])
       ]) : null
@@ -278,17 +278,273 @@ _sfc_main.render = function(ctx) {
         "\r\n    "
       ]),
         "\r\n    ",
-        (paginator) ? h('div', { class: "n-dt-paginator-wrap", "data-v-5a84a658": "" }, [
-        "\r\n      ",
-        h(_ntc_NPaginator, { first: internalFirst.value, rows: internalRows.value, totalRecords: totalRecords.value, rowsPerPageOptions: rowsPerPageOptions, onPage: onPage, "data-v-5a84a658": "" }),
-        "\r\n    "
+        (paginator) ? h('div', { class: "n-dt-paginator-wrap", "data-v-4403e88d": "" }, [
+        "\n      ",
+        h(_ntc_NPaginator, { first: internalFirst.value, rows: internalRows.value, totalRecords: totalRecords.value, rowsPerPageOptions: rowsPerPageOptions, onPage: onPage, "data-v-4403e88d": "" }),
+        "\n    "
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-5a84a658'
+_sfc_main.__scopeId = 'data-v-4403e88d'
 _sfc_main.__hmrId = 'NDataTable_nexa'
 
 export default _sfc_main
 
-const __style = `.n-dt[data-v-5a84a658]{
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius-lg);
  background: var(--n-color-surface);
  overflow: hidden;
  font-family: var(--n-font-sans);
  border-color: var(--n-color-border);
  border: 1px solid var(--n-color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--n-color-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--n-color-text-muted);
  width: 260px;
  max-width: 100%;
  background: transparent;
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius-md);
  padding: 0.45rem 0.75rem;
  color: var(--n-color-text);
  font-size: var(--n-text-sm);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  border-color: var(--n-color-primary);
  width: 100%;
  overflow: auto;
  border-radius: inherit;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: var(--n-color-surface);) 0%, var(--n-color-surface) 100%);
  position: relative;
  padding: 0.65rem 0.85rem;
  border-bottom: 2px solid var(--n-color-border);
  color: var(--n-color-text-secondary);
  font-size: var(--n-text-sm);
  font-weight: var(--n-weight-semibold);
  user-select: none;
  vertical-align: middle;
  text-align: left;
  background: var(--n-color-surface);
  transition: background 0.15s ease;
  cursor: pointer;
  background: var(--n-color-glass);
  text-align: right;
  text-align: center;
  width: 3rem;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
  display: block;
  color: var(--n-color-border);
  transition: color 0.15s ease;
  margin: -3px 0;
  color: var(--n-color-primary);
  color: var(--n-color-primary);
  color: var(--n-color-text-muted);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
  background: var(--n-color-primary);
  opacity: 0.4;
  border-bottom: 1px solid var(--n-color-border);
  padding: 0.5rem 0.6rem;
  background: var(--n-color-surface);
  width: 100%;
  max-width: 100%;
  display: block;
  background: var(--n-color-bg);
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius-sm);
  padding: 0.3rem 0.45rem;
  color: var(--n-color-text);
  font-size: var(--n-text-xs);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  border-color: var(--n-color-primary);
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
  background: var(--n-color-primary-light);
  outline: none;
  background: var(--n-color-primary-light);
  filter: brightness(0.96);
  background: color-mix(in srgb, var(--n-color-glass) 50%, var(--n-color-surface));
  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
  background: var(--n-color-primary-light);
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--n-color-border);
  color: var(--n-color-text);
  font-size: var(--n-text-sm);
  vertical-align: middle;
  text-align: left;
  text-align: right;
  text-align: center;
  width: 3rem;
  text-align: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--n-color-border);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
  color: transparent;
  background: var(--n-color-primary);
  border-color: var(--n-color-primary);
  color: white;
  border-color: var(--n-color-primary);
  animation: n-dt-check-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  0% { transform: scale(0); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
  padding: 2rem 1rem;
  text-align: center;
  color: var(--n-color-text-muted);
  font-size: var(--n-text-sm);
  padding: 0.4rem 0.6rem;
  font-size: var(--n-text-xs);
  padding: 0.85rem 1rem;
  font-size: var(--n-text-base);
  border-top: 1px solid var(--n-color-border);
  background: var(--n-color-surface-alt, var(--n-color-surface));
  border-top: none;
  background: transparent;
-injectStyle('data-v-5a84a658', __style)
+const __style = `.n-dt[data-v-4403e88d]{
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-lg);
+  background: var(--n-color-surface);
+  overflow: hidden;
+  font-family: var(--n-font-sans);
+}
+.n-dt.is-grid[data-v-4403e88d]{
+  border-color: var(--n-color-border);
+}
+.n-dt.is-grid .n-dt-th[data-v-4403e88d], 
+.n-dt.is-grid .n-dt-td[data-v-4403e88d]{
+  border: 1px solid var(--n-color-border);
+}
+.n-dt-toolbar[data-v-4403e88d]{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--n-color-border);
+}
+.n-dt-global[data-v-4403e88d]{
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--n-color-text-muted);
+}
+.n-dt-global-input[data-v-4403e88d]{
+  width: 260px;
+  max-width: 100%;
+  background: transparent;
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-md);
+  padding: 0.45rem 0.75rem;
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
+}
+.n-dt-global-input[data-v-4403e88d]:focus{
+  border-color: var(--n-color-primary);
+  box-shadow: var(--n-ring-primary);
+}
+.n-dt-wrapper[data-v-4403e88d]{
+  width: 100%;
+  overflow: auto;
+  border-radius: inherit;
+}
+.n-dt-table[data-v-4403e88d]{
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.n-dt-thead[data-v-4403e88d]{
+  background-color: var(--n-color-surface-alt);
+}
+.n-dt-th[data-v-4403e88d]{
+  position: relative;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  font-weight: 600;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  background: var(--n-color-surface-alt);
+  transition: background-color var(--n-transition-fast);
+}
+.n-dt-th.is-sortable[data-v-4403e88d]{
+  cursor: pointer;
+}
+.n-dt-th.is-sortable[data-v-4403e88d]:hover{
+  background-color: var(--n-color-surface-hover);
+}
+.n-dt-th.is-right[data-v-4403e88d]{
+  text-align: right;
+}
+.n-dt-th.is-center[data-v-4403e88d]{
+  text-align: center;
+}
+.n-dt-th.is-selection[data-v-4403e88d]{
+  width: 3rem;
+  text-align: center;
+}
+.n-dt-th-content[data-v-4403e88d]{
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.n-dt-th.is-right .n-dt-th-content[data-v-4403e88d]{
+  justify-content: flex-end;
+}
+.n-dt-th.is-center .n-dt-th-content[data-v-4403e88d]{
+  justify-content: center;
+}
+.n-dt-th-text[data-v-4403e88d]{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: normal;
+}
+.n-dt-sort[data-v-4403e88d]{
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  line-height: 1;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.n-dt-sort-arrow[data-v-4403e88d]{
+  display: block;
+  color: var(--n-color-text-muted);
+  transition: color var(--n-transition-fast);
+  margin: -3px 0;
+}
+.n-dt-sort-arrow-up.is-on[data-v-4403e88d], 
+.n-dt-sort-arrow-down.is-on[data-v-4403e88d]{
+  color: var(--n-color-primary);
+}
+.n-dt-th.is-sortable[data-v-4403e88d]:hover .n-dt-sort-arrow:not(.is-on){
+  color: var(--n-color-text);
+}
+.n-dt-resizer[data-v-4403e88d]{
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  transition: background-color var(--n-transition-fast);
+}
+.n-dt-resizer[data-v-4403e88d]:hover{
+  background-color: var(--n-color-primary);
+}
+.n-dt-filter-row .n-dt-th[data-v-4403e88d]{
+  border-bottom: 1px solid var(--n-color-border);
+  padding: 0.5rem 1rem;
+  background-color: var(--n-color-surface-alt);
+}
+.n-dt-filter[data-v-4403e88d]{
+  width: 100%;
+  max-width: 100%;
+  display: block;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  padding: 0.375rem 0.5rem;
+  color: var(--n-color-text);
+  font-size: var(--n-text-xs);
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
+}
+.n-dt-filter[data-v-4403e88d]:focus{
+  border-color: var(--n-color-primary);
+  box-shadow: var(--n-ring-primary);
+}
+.n-dt-tbody .n-dt-row{
+  background-color: var(--n-color-surface);
+  transition: background-color var(--n-transition-fast), color var(--n-transition-fast);
+}
+.n-dt-tbody .n-dt-row.is-hover:hover{
+  background-color: var(--n-color-surface-hover);
+}
+.n-dt-tbody .n-dt-row.is-selected{
+  background-color: var(--n-color-primary-light);
+  color: var(--n-color-primary-text);
+}
+.n-dt-tbody .n-dt-row.is-selected .n-dt-td{
+  color: var(--n-color-primary-active);
+}
+.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even){
+  background-color: var(--n-color-surface-alt);
+}
+.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even).is-hover:hover{
+  background-color: var(--n-color-surface-hover);
+}
+.n-dt-td[data-v-4403e88d]{
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  vertical-align: middle;
+  text-align: left;
+}
+.n-dt-td.is-right[data-v-4403e88d]{
+  text-align: right;
+}
+.n-dt-td.is-center[data-v-4403e88d]{
+  text-align: center;
+}
+.n-dt-td.is-selection[data-v-4403e88d]{
+  width: 3rem;
+  text-align: center;
+}
+.n-dt-selectbox[data-v-4403e88d]{
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
+  color: transparent;
+}
+.n-dt-selectbox.is-checked[data-v-4403e88d]{
+  background-color: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+  color: #fff;
+}
+.n-dt-selectbox[data-v-4403e88d]:hover:not(.is-checked){
+  border-color: var(--n-color-primary);
+}
+.n-dt-selectbox[data-v-4403e88d]:focus-visible{
+  outline: none;
+  box-shadow: var(--n-ring-primary);
+}
+.n-dt-selectbox.is-checked svg[data-v-4403e88d]{
+  animation: n-dt-check-pop 0.2s ease-out;
+}
+@keyframes n-dt-check-pop {
+0%[data-v-4403e88d]{ transform: scale(0.5); }
+50%[data-v-4403e88d]{ transform: scale(1.2); }
+100%[data-v-4403e88d]{ transform: scale(1); }
+}
+.n-dt-empty-row .n-dt-empty[data-v-4403e88d]{
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-sm);
+}
+.n-dt-sm .n-dt-th[data-v-4403e88d], 
+.n-dt-sm .n-dt-td[data-v-4403e88d]{
+  padding: 0.5rem 0.75rem;
+  font-size: var(--n-text-xs);
+}
+.n-dt-lg .n-dt-th[data-v-4403e88d], 
+.n-dt-lg .n-dt-td[data-v-4403e88d]{
+  padding: 1rem 1.25rem;
+  font-size: var(--n-text-base);
+}
+.n-dt-paginator-wrap[data-v-4403e88d]{
+  border-top: 1px solid var(--n-color-border);
+  background: var(--n-color-surface-alt);
+}
+.n-dt-paginator-wrap [data-v-4403e88d]:deep(.n-paginator){
+  border-top: none;
+  background: transparent;
+}`
+injectStyle('data-v-4403e88d', __style)