@wellingtonhlc/shared-ui 0.26.12 → 0.26.14

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,9 @@ h2.react-datepicker__current-month {
   .z-\[110\] {
     z-index: 110;
   }
+  .z-\[999\] {
+    z-index: 999;
+  }
   .order-3 {
     order: 3;
   }
@@ -983,6 +987,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,12 +1203,12 @@ 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);
   }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
   .h-72 {
     height: calc(var(--spacing) * 72);
   }
@@ -1292,6 +1299,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 +1386,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 +1413,6 @@ h2.react-datepicker__current-month {
   .w-\[44rem\] {
     width: 44rem;
   }
-  .w-\[46rem\] {
-    width: 46rem;
-  }
   .w-\[52rem\] {
     width: 52rem;
   }
@@ -1574,6 +1584,10 @@ h2.react-datepicker__current-month {
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-2 {
+    --tw-translate-x: calc(var(--spacing) * 2);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-\[calc\(100\%\+0\.25rem\)\] {
     --tw-translate-x: calc(100% + 0.25rem);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1591,6 +1605,9 @@ h2.react-datepicker__current-month {
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1851,6 +1868,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)) {
@@ -1926,6 +1967,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)) {
@@ -2034,6 +2099,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)) {
@@ -2505,18 +2576,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);
   }
@@ -2798,6 +2881,11 @@ h2.react-datepicker__current-month {
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[opacity\,transform\] {
+    transition-property: opacity,transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[width\,background-color\,color\] {
     transition-property: width,background-color,color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3194,6 +3282,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) {
@@ -4031,6 +4129,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 {
@@ -4467,15 +4577,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);
 }
@@ -4485,7 +4595,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);
 }
@@ -4495,7 +4605,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);
 }
@@ -4505,7 +4615,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);
 }
@@ -4530,14 +4640,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;
@@ -4558,21 +4668,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;
@@ -4612,8 +4722,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;
@@ -4631,13 +4741,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;
@@ -4653,18 +4763,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;
 }
@@ -4939,6 +5049,11 @@ h2.react-datepicker__current-month {
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -5004,4 +5119,4 @@ h2.react-datepicker__current-month {
       --tw-ease: initial;
     }
   }
-}
+}

package/package.json

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