nexa-ui-kit 0.11.5 → 0.11.8

package/dist/components/NDataTable.nexa

@@ -218,318 +218,6 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
   </div>
 </template>
 
-<style scoped>
-.n-dt {
-  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 {
-  border-color: var(--n-color-border);
-}
-
-.n-dt.is-grid .n-dt-th,
-.n-dt.is-grid .n-dt-td {
-  border: 1px solid var(--n-color-border);
-}
-
-.n-dt-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--n-color-border);
-}
-
-.n-dt-global {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--n-color-text-muted);
-}
-
-.n-dt-global-input {
-  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;
-}
-
-.n-dt-global-input:focus {
-  border-color: var(--n-color-primary);
-}
-
-.n-dt-wrapper {
-  width: 100%;
-  overflow: auto;
-  border-radius: inherit;
-}
-
-.n-dt-table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-.n-dt-thead {
-  background: linear-gradient(180deg, var(--n-color-surface-alt, var(--n-color-surface)) 0%, var(--n-color-surface) 100%);
-}
-
-.n-dt-th {
-  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;
-}
-
-.n-dt-th.is-sortable {
-  cursor: pointer;
-}
-
-.n-dt-th.is-sortable:hover {
-  background: var(--n-color-glass);
-}
-
-.n-dt-th.is-right {
-  text-align: right;
-}
-
-.n-dt-th.is-center {
-  text-align: center;
-}
-
-.n-dt-th.is-selection {
-  width: 3rem;
-  text-align: center;
-}
-
-.n-dt-th-content {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-}
-
-.n-dt-th.is-right .n-dt-th-content {
-  justify-content: flex-end;
-}
-
-.n-dt-th.is-center .n-dt-th-content {
-  justify-content: center;
-}
-
-.n-dt-th-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  font-size: 0.6875rem;
-}
-
-.n-dt-sort {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0;
-  line-height: 1;
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.n-dt-sort-arrow {
-  display: block;
-  color: var(--n-color-border);
-  transition: color 0.15s ease;
-  margin: -3px 0;
-}
-
-.n-dt-sort-arrow-up.is-on {
-  color: var(--n-color-primary);
-}
-
-.n-dt-sort-arrow-down.is-on {
-  color: var(--n-color-primary);
-}
-
-.n-dt-th.is-sortable:hover .n-dt-sort-arrow {
-  color: var(--n-color-text-muted);
-}
-
-.n-dt-resizer {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 6px;
-  cursor: col-resize;
-  background: transparent;
-  transition: background 0.15s ease;
-}
-
-.n-dt-resizer:hover {
-  background: var(--n-color-primary);
-  opacity: 0.4;
-}
-
-.n-dt-filter-row .n-dt-th {
-  border-bottom: 1px solid var(--n-color-border);
-  padding: 0.5rem 0.6rem;
-  background: var(--n-color-surface);
-}
-
-.n-dt-filter {
-  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;
-}
-
-.n-dt-filter:focus {
-  border-color: var(--n-color-primary);
-}
-
-.n-dt-tbody .n-dt-row {
-  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.n-dt-tbody .n-dt-row.is-hover:hover {
-  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
-}
-
-.n-dt-tbody .n-dt-row.is-selected {
-  background: var(--n-color-primary-light);
-  outline: none;
-}
-
-.n-dt-tbody .n-dt-row.is-selected td:first-child {
-  box-shadow: inset 3px 0 0 0 var(--n-color-primary);
-}
-
-.n-dt-tbody .n-dt-row.is-hover.is-selected:hover {
-  background: var(--n-color-primary-light);
-  filter: brightness(0.96);
-}
-
-.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even) {
-  background: color-mix(in srgb, var(--n-color-glass) 50%, var(--n-color-surface));
-}
-
-.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even).is-hover:hover {
-  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
-}
-
-.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even).is-selected {
-  background: var(--n-color-primary-light);
-}
-
-.n-dt-td {
-  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;
-}
-
-.n-dt-td.is-right {
-  text-align: right;
-}
-
-.n-dt-td.is-center {
-  text-align: center;
-}
-
-.n-dt-td.is-selection {
-  width: 3rem;
-  text-align: center;
-}
-
-.n-dt-selectbox {
-  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: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  color: transparent;
-}
-
-.n-dt-selectbox.is-checked {
-  background: var(--n-color-primary);
-  border-color: var(--n-color-primary);
-  color: white;
-}
-
-.n-dt-selectbox:hover:not(.is-checked) {
-  border-color: var(--n-color-primary);
-}
-
-.n-dt-selectbox.is-checked svg {
-  animation: n-dt-check-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes n-dt-check-pop {
-  0% { transform: scale(0); }
-  50% { transform: scale(1.15); }
-  100% { transform: scale(1); }
-}
-
-.n-dt-empty-row .n-dt-empty {
-  padding: 2rem 1rem;
-  text-align: center;
-  color: var(--n-color-text-muted);
-  font-size: var(--n-text-sm);
-}
-
-.n-dt-sm .n-dt-th,
-.n-dt-sm .n-dt-td {
-  padding: 0.4rem 0.6rem;
-  font-size: var(--n-text-xs);
-}
-
-.n-dt-lg .n-dt-th,
-.n-dt-lg .n-dt-td {
-  padding: 0.85rem 1rem;
-  font-size: var(--n-text-base);
-}
-
-.n-dt-paginator-wrap {
-  border-top: 1px solid var(--n-color-border);
-  background: var(--n-color-surface-alt, var(--n-color-surface));
-}
-
-.n-dt-paginator-wrap :deep(.n-paginator) {
-  border-top: none;
-  background: transparent;
-}
+<style scoped>
+.n-dt {
  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;
 </style>

package/dist/components/NDatepicker.js

@@ -254,25 +254,20 @@ const __style = `.n-datepicker[data-v-7501a13d]{
   display: inline-block;
   font-family: var(--n-font-sans);
 }
-
 .n-datepicker-input[data-v-7501a13d]{
   position: relative;
   cursor: pointer;
 }
-
 .n-datepicker-input .n-input[data-v-7501a13d]{
   cursor: pointer;
 }
-
 .n-datepicker-icon[data-v-7501a13d]{
   position: absolute;
   right: 0.75rem;
   top: 50%;
-  transform: translateY(-50%);
   font-size: 1rem;
   pointer-events: none;
 }
-
 .n-datepicker-dropdown[data-v-7501a13d]{
   position: absolute;
   top: calc(100% + 4px);
@@ -286,34 +281,28 @@ const __style = `.n-datepicker[data-v-7501a13d]{
   width: 280px;
   animation: fade-in 0.15s ease;
 }
-
 @keyframes fade-in {
-from[data-v-7501a13d]{ opacity: 0; transform: translateY(-4px); }
-to[data-v-7501a13d]{ opacity: 1; transform: translateY(0); }
+from[data-v-7501a13d]{ opacity: 0;  }
+to[data-v-7501a13d]{ opacity: 1;  }
 }
-
 .n-datepicker-dropdown.is-top[data-v-7501a13d]{
   animation: fade-in-top 0.15s ease;
 }
-
 @keyframes fade-in-top {
-from[data-v-7501a13d]{ opacity: 0; transform: translateY(4px); }
-to[data-v-7501a13d]{ opacity: 1; transform: translateY(0); }
+from[data-v-7501a13d]{ opacity: 0;  }
+to[data-v-7501a13d]{ opacity: 1;  }
 }
-
 .n-datepicker-header[data-v-7501a13d]{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.75rem;
 }
-
 .n-datepicker-title[data-v-7501a13d]{
   font-weight: var(--n-weight-semibold);
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
 }
-
 .n-datepicker-nav[data-v-7501a13d]{
   background: none;
   border: 1px solid var(--n-color-border);
@@ -328,18 +317,15 @@ to[data-v-7501a13d]{ opacity: 1; transform: translateY(0); }
   justify-content: center;
   transition: all var(--n-transition-fast);
 }
-
 .n-datepicker-nav[data-v-7501a13d]:hover{
   background: var(--n-color-surface-hover);
   color: var(--n-color-text);
 }
-
 .n-datepicker-grid[data-v-7501a13d]{
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
 }
-
 .n-datepicker-day-header[data-v-7501a13d]{
   text-align: center;
   font-size: var(--n-text-xs);
@@ -347,7 +333,6 @@ to[data-v-7501a13d]{ opacity: 1; transform: translateY(0); }
   font-weight: var(--n-weight-semibold);
   padding: 0.35rem 0;
 }
-
 .n-datepicker-day[data-v-7501a13d]{
   text-align: center;
   padding: 0.4rem 0;
@@ -357,29 +342,23 @@ to[data-v-7501a13d]{ opacity: 1; transform: translateY(0); }
   cursor: pointer;
   transition: all var(--n-transition-fast);
 }
-
 .n-datepicker-day[data-v-7501a13d]:hover:not(.is-empty){
   background: var(--n-color-primary-light);
 }
-
 .n-datepicker-day.is-empty[data-v-7501a13d]{
   cursor: default;
 }
-
 .n-datepicker-day.is-disabled[data-v-7501a13d]{
   opacity: 0.4;
   cursor: not-allowed;
 }
-
 .n-datepicker-day.is-disabled[data-v-7501a13d]:hover{
   background: transparent;
 }
-
 .n-datepicker-day.is-today[data-v-7501a13d]{
   font-weight: var(--n-weight-bold);
   color: var(--n-color-primary);
 }
-
 .n-datepicker-day.is-selected[data-v-7501a13d]{
   background: var(--n-color-primary);
   color: white;

package/dist/components/NDatepicker.nexa

@@ -233,25 +233,20 @@ onBeforeUnmount(() => {
   display: inline-block;
   font-family: var(--n-font-sans);
 }
-
 .n-datepicker-input {
   position: relative;
   cursor: pointer;
 }
-
 .n-datepicker-input .n-input {
   cursor: pointer;
 }
-
 .n-datepicker-icon {
   position: absolute;
   right: 0.75rem;
   top: 50%;
-  transform: translateY(-50%);
   font-size: 1rem;
   pointer-events: none;
 }
-
 .n-datepicker-dropdown {
   position: absolute;
   top: calc(100% + 4px);
@@ -265,34 +260,28 @@ onBeforeUnmount(() => {
   width: 280px;
   animation: fade-in 0.15s ease;
 }
-
 @keyframes fade-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0;  }
+  to { opacity: 1;  }
 }
-
 .n-datepicker-dropdown.is-top {
   animation: fade-in-top 0.15s ease;
 }
-
 @keyframes fade-in-top {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0;  }
+  to { opacity: 1;  }
 }
-
 .n-datepicker-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.75rem;
 }
-
 .n-datepicker-title {
   font-weight: var(--n-weight-semibold);
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
 }
-
 .n-datepicker-nav {
   background: none;
   border: 1px solid var(--n-color-border);
@@ -307,18 +296,15 @@ onBeforeUnmount(() => {
   justify-content: center;
   transition: all var(--n-transition-fast);
 }
-
 .n-datepicker-nav:hover {
   background: var(--n-color-surface-hover);
   color: var(--n-color-text);
 }
-
 .n-datepicker-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
 }
-
 .n-datepicker-day-header {
   text-align: center;
   font-size: var(--n-text-xs);
@@ -326,7 +312,6 @@ onBeforeUnmount(() => {
   font-weight: var(--n-weight-semibold);
   padding: 0.35rem 0;
 }
-
 .n-datepicker-day {
   text-align: center;
   padding: 0.4rem 0;
@@ -336,32 +321,27 @@ onBeforeUnmount(() => {
   cursor: pointer;
   transition: all var(--n-transition-fast);
 }
-
 .n-datepicker-day:hover:not(.is-empty) {
   background: var(--n-color-primary-light);
 }
-
 .n-datepicker-day.is-empty {
   cursor: default;
 }
-
 .n-datepicker-day.is-disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
-
 .n-datepicker-day.is-disabled:hover {
   background: transparent;
 }
-
 .n-datepicker-day.is-today {
   font-weight: var(--n-weight-bold);
   color: var(--n-color-primary);
 }
-
 .n-datepicker-day.is-selected {
   background: var(--n-color-primary);
   color: white;
   font-weight: var(--n-weight-semibold);
 }
+
 </style>

package/dist/components/NForm.nexa

@@ -130,4 +130,5 @@ provide('nexa-ui:form', {
   gap: var(--n-space-4);
   width: 100%;
 }
+
 </style>