@wellingtonhlc/shared-ui 0.26.13 → 0.27.0

package/dist/styles.css

@@ -637,6 +637,7 @@ h2.react-datepicker__current-month {
     --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -953,6 +954,12 @@ h2.react-datepicker__current-month {
   .z-\[110\] {
     z-index: 110;
   }
+  .z-\[200\] {
+    z-index: 200;
+  }
+  .z-\[999\] {
+    z-index: 999;
+  }
   .order-3 {
     order: 3;
   }
@@ -983,6 +990,9 @@ h2.react-datepicker__current-month {
   .m-3 {
     margin: calc(var(--spacing) * 3);
   }
+  .m-auto {
+    margin: auto;
+  }
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
@@ -1196,6 +1206,9 @@ h2.react-datepicker__current-month {
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
@@ -1292,6 +1305,9 @@ h2.react-datepicker__current-month {
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-32 {
+    min-height: calc(var(--spacing) * 32);
+  }
   .min-h-\[2\.5rem\] {
     min-height: 2.5rem;
   }
@@ -1376,6 +1392,9 @@ h2.react-datepicker__current-month {
   .w-36 {
     width: calc(var(--spacing) * 36);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -1400,9 +1419,6 @@ h2.react-datepicker__current-month {
   .w-\[44rem\] {
     width: 44rem;
   }
-  .w-\[46rem\] {
-    width: 46rem;
-  }
   .w-\[52rem\] {
     width: 52rem;
   }
@@ -1532,9 +1548,6 @@ h2.react-datepicker__current-month {
   .min-w-\[18rem\] {
     min-width: 18rem;
   }
-  .min-w-\[48rem\] {
-    min-width: 48rem;
-  }
   .flex-1 {
     flex: 1;
   }
@@ -1595,6 +1608,9 @@ h2.react-datepicker__current-month {
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1607,12 +1623,18 @@ h2.react-datepicker__current-month {
   .touch-none {
     touch-action: none;
   }
+  .resize-none {
+    resize: none;
+  }
   .list-disc {
     list-style-type: disc;
   }
   .appearance-none {
     appearance: none;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1855,6 +1877,30 @@ h2.react-datepicker__current-month {
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-\[color-mix\(in_srgb\,\#34d399_45\%\,var\(--app-border\)\)\] {
+    border-color: #34d399;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,#34d399 45%,var(--app-border));
+    }
+  }
+  .border-\[color-mix\(in_srgb\,\#60a5fa_45\%\,var\(--app-border\)\)\] {
+    border-color: #60a5fa;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,#60a5fa 45%,var(--app-border));
+    }
+  }
+  .border-\[color-mix\(in_srgb\,\#f87171_52\%\,var\(--app-border\)\)\] {
+    border-color: #f87171;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,#f87171 52%,var(--app-border));
+    }
+  }
+  .border-\[color-mix\(in_srgb\,\#fbbf24_52\%\,var\(--app-border\)\)\] {
+    border-color: #fbbf24;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,#fbbf24 52%,var(--app-border));
+    }
+  }
   .border-\[color-mix\(in_srgb\,var\(--brand\)_34\%\,var\(--app-border\)\)\] {
     border-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1930,6 +1976,30 @@ h2.react-datepicker__current-month {
   .\!bg-transparent {
     background-color: transparent !important;
   }
+  .bg-\[color-mix\(in_srgb\,\#3b82f6_16\%\,var\(--background-secondary\)\)\] {
+    background-color: #3b82f6;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,#3b82f6 16%,var(--background-secondary));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,\#10b981_16\%\,var\(--background-secondary\)\)\] {
+    background-color: #10b981;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,#10b981 16%,var(--background-secondary));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,\#ef4444_16\%\,var\(--background-secondary\)\)\] {
+    background-color: #ef4444;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,#ef4444 16%,var(--background-secondary));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,\#f59e0b_16\%\,var\(--background-secondary\)\)\] {
+    background-color: #f59e0b;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,#f59e0b 16%,var(--background-secondary));
+    }
+  }
   .bg-\[color-mix\(in_srgb\,var\(--brand\)_5\%\,var\(--surface\)\)\] {
     background-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2038,6 +2108,12 @@ h2.react-datepicker__current-month {
   .bg-background-secondary {
     background-color: var(--color-background-secondary);
   }
+  .bg-background\/40 {
+    background-color: var(--color-background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-background) 40%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2509,18 +2585,30 @@ h2.react-datepicker__current-month {
   .text-\[var\(--primary-foreground\,\#ffffff\)\] {
     color: var(--primary-foreground,#ffffff);
   }
+  .text-\[var\(--status-danger-text\)\] {
+    color: var(--status-danger-text);
+  }
   .text-\[var\(--status-danger-text\,\#7f1d1d\)\] {
     color: var(--status-danger-text,#7f1d1d);
   }
   .text-\[var\(--status-danger-text\,\#b91c1c\)\] {
     color: var(--status-danger-text,#b91c1c);
   }
+  .text-\[var\(--status-info-text\)\] {
+    color: var(--status-info-text);
+  }
   .text-\[var\(--status-info-text\,\#1d4ed8\)\] {
     color: var(--status-info-text,#1d4ed8);
   }
+  .text-\[var\(--status-success-text\)\] {
+    color: var(--status-success-text);
+  }
   .text-\[var\(--status-success-text\,\#15803d\)\] {
     color: var(--status-success-text,#15803d);
   }
+  .text-\[var\(--status-warning-text\)\] {
+    color: var(--status-warning-text);
+  }
   .text-\[var\(--status-warning-text\,\#92400e\)\] {
     color: var(--status-warning-text,#92400e);
   }
@@ -3203,6 +3291,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-black\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-destructive {
     &:hover {
       @media (hover: hover) {
@@ -4040,6 +4138,18 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .dark\:hover\:bg-white\/10 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, #fff 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+          }
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-white\/\[0\.06\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -4127,6 +4237,57 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .\[\&_\[data-slot\=filter-footer\]\]\:\!px-3 {
+    & [data-slot=filter-footer] {
+      padding-inline: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .\[\&_\[data-slot\=filter-footer\]\]\:\!py-2 {
+    & [data-slot=filter-footer] {
+      padding-block: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .\[\&_\[data-slot\=filter-footer\]_button\]\:\!h-8 {
+    & [data-slot=filter-footer] button {
+      height: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .\[\&_\[data-slot\=filter-footer\]_button\]\:\!min-h-8 {
+    & [data-slot=filter-footer] button {
+      min-height: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .\[\&_\[data-slot\=filter-footer\]_button\]\:\!px-2\.5 {
+    & [data-slot=filter-footer] button {
+      padding-inline: calc(var(--spacing) * 2.5) !important;
+    }
+  }
+  .\[\&_\[data-slot\=filter-footer\]_button\]\:\!py-0 {
+    & [data-slot=filter-footer] button {
+      padding-block: calc(var(--spacing) * 0) !important;
+    }
+  }
+  .\[\&_\[data-slot\=filter-footer\]_button\]\:\!text-xs {
+    & [data-slot=filter-footer] button {
+      font-size: var(--text-xs) !important;
+      line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
+    }
+  }
+  .\[\&_\[data-slot\=filter-header\]\]\:\!h-10 {
+    & [data-slot=filter-header] {
+      height: calc(var(--spacing) * 10) !important;
+    }
+  }
+  .\[\&_\[data-slot\=filter-header\]\]\:\!rounded-none {
+    & [data-slot=filter-header] {
+      border-radius: 0 !important;
+    }
+  }
+  .\[\&_\[data-slot\=filter-header\]\]\:\!bg-background-secondary {
+    & [data-slot=filter-header] {
+      background-color: var(--color-background-secondary) !important;
+    }
+  }
   .\[\&_\[data-slot\=filter-root\]\]\:rounded-none {
     & [data-slot=filter-root] {
       border-radius: 0;
@@ -4173,15 +4334,31 @@ h2.react-datepicker__current-month {
       line-height: var(--tw-leading, var(--text-lg--line-height));
     }
   }
-  .\[\&_\[data-slot\=table-root\]\]\:rounded-none {
+  .\[\&_\[data-slot\=table-pagination\]\]\:\!px-3 {
+    & [data-slot=table-pagination] {
+      padding-inline: calc(var(--spacing) * 3) !important;
+    }
+  }
+  .\[\&_\[data-slot\=table-pagination\]\]\:\!py-2 {
+    & [data-slot=table-pagination] {
+      padding-block: calc(var(--spacing) * 2) !important;
+    }
+  }
+  .\[\&_\[data-slot\=table-root\]\]\:\!rounded-none {
     & [data-slot=table-root] {
-      border-radius: 0;
+      border-radius: 0 !important;
     }
   }
-  .\[\&_\[data-slot\=table-root\]\]\:border-0 {
+  .\[\&_\[data-slot\=table-root\]\]\:\!border-0 {
     & [data-slot=table-root] {
-      border-style: var(--tw-border-style);
-      border-width: 0px;
+      border-style: var(--tw-border-style) !important;
+      border-width: 0px !important;
+    }
+  }
+  .\[\&_\[data-slot\=table-root\]\]\:\!shadow-none {
+    & [data-slot=table-root] {
+      --tw-shadow: 0 0 #0000 !important;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
     }
   }
   .\[\&_svg\]\:size-3\.5 {
@@ -4476,15 +4653,15 @@ h2.react-datepicker__current-month {
   border-color: var(--status-danger-border);
   background-color: var(--status-danger-bg);
 }
-.app-stat-card__label--default,
-.app-stat-card__description--default,
+.app-stat-card__label--default,
+.app-stat-card__description--default,
 .app-stat-card__icon--default {
   color: var(--foreground-muted);
 }
 .app-stat-card__value--default {
   color: var(--foreground);
 }
-.app-stat-card__label--info,
+.app-stat-card__label--info,
 .app-stat-card__description--info {
   color: var(--status-info-text);
 }
@@ -4494,7 +4671,7 @@ h2.react-datepicker__current-month {
 .app-stat-card__icon--info {
   color: var(--status-info-icon);
 }
-.app-stat-card__label--success,
+.app-stat-card__label--success,
 .app-stat-card__description--success {
   color: var(--status-success-text);
 }
@@ -4504,7 +4681,7 @@ h2.react-datepicker__current-month {
 .app-stat-card__icon--success {
   color: var(--status-success-icon);
 }
-.app-stat-card__label--warning,
+.app-stat-card__label--warning,
 .app-stat-card__description--warning {
   color: var(--status-warning-text);
 }
@@ -4514,7 +4691,7 @@ h2.react-datepicker__current-month {
 .app-stat-card__icon--warning {
   color: var(--status-warning-icon);
 }
-.app-stat-card__label--danger,
+.app-stat-card__label--danger,
 .app-stat-card__description--danger {
   color: var(--status-danger-text);
 }
@@ -4539,14 +4716,14 @@ h2.react-datepicker__current-month {
   background-color: var(--background-secondary) !important;
   border-bottom-color: var(--app-border) !important;
 }
-.react-datepicker__current-month,
+.react-datepicker__current-month,
 .react-datepicker-time__header {
   color: var(--foreground) !important;
   font-size: 0.8125rem !important;
   font-weight: 600 !important;
 }
-.react-datepicker__day-name,
-.react-datepicker__day,
+.react-datepicker__day-name,
+.react-datepicker__day,
 .react-datepicker__time-name {
   width: 2rem;
   line-height: 2rem;
@@ -4567,21 +4744,21 @@ h2.react-datepicker__current-month {
   color: var(--foreground) !important;
   transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
 }
-.react-datepicker__day:hover,
+.react-datepicker__day:hover,
 .react-datepicker__day--keyboard-selected {
   background-color: var(--background) !important;
   color: var(--foreground) !important;
 }
-.react-datepicker__day--disabled,
+.react-datepicker__day--disabled,
 .react-datepicker__day--disabled:hover {
   background-color: transparent !important;
   color: var(--foreground-muted) !important;
   opacity: 0.4;
   cursor: not-allowed;
 }
-.react-datepicker__day--selected,
-.react-datepicker__day--selected:hover,
-.react-datepicker__day--in-selecting-range,
+.react-datepicker__day--selected,
+.react-datepicker__day--selected:hover,
+.react-datepicker__day--in-selecting-range,
 .react-datepicker__day--in-range {
   background-color: var(--brand) !important;
   color: #ffffff !important;
@@ -4621,8 +4798,8 @@ h2.react-datepicker__current-month {
   float: none !important;
   border-left: 1px solid var(--app-border) !important;
 }
-.react-datepicker__time-container .react-datepicker__header--time,
-.react-datepicker__time-container .react-datepicker__time,
+.react-datepicker__time-container .react-datepicker__header--time,
+.react-datepicker__time-container .react-datepicker__time,
 .react-datepicker__time-container .react-datepicker__time-box {
   background-color: var(--background-secondary) !important;
   border-bottom-color: var(--app-border) !important;
@@ -4640,13 +4817,13 @@ h2.react-datepicker__current-month {
   background-color: var(--background) !important;
   color: var(--foreground) !important;
 }
-.react-datepicker__time-list-item--selected,
+.react-datepicker__time-list-item--selected,
 .react-datepicker__time-list-item--selected:hover {
   background-color: var(--brand) !important;
   color: #ffffff !important;
   font-weight: 600 !important;
 }
-.react-datepicker__time-list-item--disabled,
+.react-datepicker__time-list-item--disabled,
 .react-datepicker__time-list-item--disabled:hover {
   color: var(--foreground-muted) !important;
   opacity: 0.4;
@@ -4662,18 +4839,18 @@ h2.react-datepicker__current-month {
 .field-select:focus {
   background-color: var(--input-bg) !important;
 }
-.field-select option,
+.field-select option,
 .field-select optgroup {
   background-color: var(--background-secondary) !important;
   color: var(--foreground) !important;
 }
-.field-select option:checked,
-.field-select option:hover,
+.field-select option:checked,
+.field-select option:hover,
 .field-select option:focus {
   background-color: var(--brand) !important;
   color: #ffffff !important;
 }
-.dark .field-select,
+.dark .field-select,
 [data-theme='dark'] .field-select {
   color-scheme: dark;
 }
@@ -4948,6 +5125,11 @@ h2.react-datepicker__current-month {
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -5013,4 +5195,4 @@ h2.react-datepicker__current-month {
       --tw-ease: initial;
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.26.13",
+    "version": "0.27.0",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",