adminium 1.0.7 → 1.0.8

package/dist/styles/adminium.css

@@ -9,6 +9,8 @@
       "Courier New", monospace;
     --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-100: oklch(93.6% 0.032 17.717);
+    --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
@@ -20,9 +22,11 @@
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-yellow-700: oklch(55.4% 0.135 66.442);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-yellow-900: oklch(42.1% 0.095 57.708);
     --color-yellow-950: oklch(28.6% 0.066 53.813);
     --color-green-50: oklch(98.2% 0.018 155.826);
@@ -53,6 +57,7 @@
     --color-indigo-500: oklch(58.5% 0.233 277.117);
     --color-violet-50: oklch(96.9% 0.016 293.756);
     --color-violet-100: oklch(94.3% 0.029 294.588);
+    --color-violet-200: oklch(89.4% 0.057 293.283);
     --color-violet-400: oklch(70.2% 0.183 293.541);
     --color-violet-500: oklch(60.6% 0.25 292.717);
     --color-violet-600: oklch(54.1% 0.281 293.009);
@@ -672,6 +677,15 @@
   .table {
     display: table;
   }
+  .table-caption {
+    display: table-caption;
+  }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-row {
+    display: table-row;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -1008,6 +1022,9 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-25 {
+    width: calc(var(--spacing) * 25);
+  }
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
@@ -1062,6 +1079,9 @@
   .w-175 {
     width: calc(var(--spacing) * 175);
   }
+  .w-200 {
+    width: calc(var(--spacing) * 200);
+  }
   .w-225 {
     width: calc(var(--spacing) * 225);
   }
@@ -1224,6 +1244,9 @@
   .caption-bottom {
     caption-side: bottom;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .border-separate {
     border-collapse: separate;
   }
@@ -1741,6 +1764,9 @@
       border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
     }
   }
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
   .border-input {
     border-color: var(--input);
   }
@@ -1759,15 +1785,24 @@
       border-color: color-mix(in oklab, var(--primary) 30%, transparent);
     }
   }
+  .border-red-500 {
+    border-color: var(--color-red-500);
+  }
   .border-transparent {
     border-color: transparent;
   }
+  .border-violet-500 {
+    border-color: var(--color-violet-500);
+  }
   .border-white\/20 {
     border-color: color-mix(in srgb, #fff 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
     }
   }
+  .border-yellow-500 {
+    border-color: var(--color-yellow-500);
+  }
   .border-s-input {
     border-inline-start-color: var(--input);
   }
@@ -1987,6 +2022,9 @@
   .bg-purple-500 {
     background-color: var(--color-purple-500);
   }
+  .bg-red-100 {
+    background-color: var(--color-red-100);
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -1999,6 +2037,12 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-violet-100 {
+    background-color: var(--color-violet-100);
+  }
+  .bg-violet-600 {
+    background-color: var(--color-violet-600);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -2008,6 +2052,12 @@
       background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
     }
   }
+  .bg-yellow-100 {
+    background-color: var(--color-yellow-100);
+  }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
   .bg-yellow-600 {
     background-color: var(--color-yellow-600);
   }
@@ -2650,6 +2700,12 @@
   .text-sky-500 {
     color: var(--color-sky-500);
   }
+  .text-violet-500 {
+    color: var(--color-violet-500);
+  }
+  .text-violet-600 {
+    color: var(--color-violet-600);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -2659,6 +2715,12 @@
       color: color-mix(in oklab, var(--color-white) 70%, transparent);
     }
   }
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
+  .text-yellow-800 {
+    color: var(--color-yellow-800);
+  }
   .text-zinc-100 {
     color: var(--color-zinc-100);
   }
@@ -3430,6 +3492,23 @@
       }
     }
   }
+  .hover\:bg-green-100\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(96.2% 0.044 156.743) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-green-100) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-green-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-green-200);
+      }
+    }
+  }
   .hover\:bg-muted-foreground\/50 {
     &:hover {
       @media (hover: hover) {
@@ -3450,6 +3529,16 @@
       }
     }
   }
+  .hover\:bg-muted\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-primary\/5 {
     &:hover {
       @media (hover: hover) {
@@ -3470,6 +3559,23 @@
       }
     }
   }
+  .hover\:bg-red-100\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(93.6% 0.032 17.717) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-red-100) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-red-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-200);
+      }
+    }
+  }
   .hover\:bg-secondary {
     &:hover {
       @media (hover: hover) {
@@ -3494,6 +3600,74 @@
       }
     }
   }
+  .hover\:bg-violet-100\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(94.3% 0.029 294.588) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-violet-100) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-violet-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-violet-200);
+      }
+    }
+  }
+  .hover\:bg-violet-500\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-violet-500) 5%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-violet-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-violet-700);
+      }
+    }
+  }
+  .hover\:bg-yellow-100\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(97.3% 0.071 103.193) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-yellow-100) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-yellow-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-yellow-200);
+      }
+    }
+  }
+  .hover\:bg-yellow-500\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-yellow-500) 5%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-yellow-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-yellow-600);
+      }
+    }
+  }
   .hover\:bg-zinc-950\/90 {
     &:hover {
       @media (hover: hover) {
@@ -4437,6 +4611,19 @@
       background-color: var(--color-emerald-600);
     }
   }
+  .data-\[state\=open\]\:bg-green-100\/50 {
+    &[data-state="open"] {
+      background-color: color-mix(in srgb, oklch(96.2% 0.044 156.743) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-100) 50%, transparent);
+      }
+    }
+  }
+  .data-\[state\=open\]\:bg-green-200 {
+    &[data-state="open"] {
+      background-color: var(--color-green-200);
+    }
+  }
   .data-\[state\=open\]\:bg-primary\/5 {
     &[data-state="open"] {
       background-color: var(--primary);
@@ -4453,6 +4640,19 @@
       }
     }
   }
+  .data-\[state\=open\]\:bg-red-100\/50 {
+    &[data-state="open"] {
+      background-color: color-mix(in srgb, oklch(93.6% 0.032 17.717) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-red-100) 50%, transparent);
+      }
+    }
+  }
+  .data-\[state\=open\]\:bg-red-200 {
+    &[data-state="open"] {
+      background-color: var(--color-red-200);
+    }
+  }
   .data-\[state\=open\]\:bg-secondary {
     &[data-state="open"] {
       background-color: var(--secondary);
@@ -4471,6 +4671,58 @@
       background-color: transparent;
     }
   }
+  .data-\[state\=open\]\:bg-violet-100\/50 {
+    &[data-state="open"] {
+      background-color: color-mix(in srgb, oklch(94.3% 0.029 294.588) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-violet-100) 50%, transparent);
+      }
+    }
+  }
+  .data-\[state\=open\]\:bg-violet-200 {
+    &[data-state="open"] {
+      background-color: var(--color-violet-200);
+    }
+  }
+  .data-\[state\=open\]\:bg-violet-500\/5 {
+    &[data-state="open"] {
+      background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-violet-500) 5%, transparent);
+      }
+    }
+  }
+  .data-\[state\=open\]\:bg-violet-700 {
+    &[data-state="open"] {
+      background-color: var(--color-violet-700);
+    }
+  }
+  .data-\[state\=open\]\:bg-yellow-100\/50 {
+    &[data-state="open"] {
+      background-color: color-mix(in srgb, oklch(97.3% 0.071 103.193) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-yellow-100) 50%, transparent);
+      }
+    }
+  }
+  .data-\[state\=open\]\:bg-yellow-200 {
+    &[data-state="open"] {
+      background-color: var(--color-yellow-200);
+    }
+  }
+  .data-\[state\=open\]\:bg-yellow-500\/5 {
+    &[data-state="open"] {
+      background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-yellow-500) 5%, transparent);
+      }
+    }
+  }
+  .data-\[state\=open\]\:bg-yellow-600 {
+    &[data-state="open"] {
+      background-color: var(--color-yellow-600);
+    }
+  }
   .data-\[state\=open\]\:bg-zinc-950\/90 {
     &[data-state="open"] {
       background-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 90%, transparent);
@@ -4525,6 +4777,11 @@
       }
     }
   }
+  .data-\[state\=selected\]\:bg-muted {
+    &[data-state="selected"] {
+      background-color: var(--muted);
+    }
+  }
   .data-\[state\=selected\]\:bg-muted\/50 {
     &[data-state="selected"] {
       background-color: var(--muted);
@@ -4826,6 +5083,26 @@
       border-color: var(--color-warning-soft,var(--color-yellow-900));
     }
   }
+  .dark\:border-green-500 {
+    &:is(.dark *) {
+      border-color: var(--color-green-500);
+    }
+  }
+  .dark\:border-red-500 {
+    &:is(.dark *) {
+      border-color: var(--color-red-500);
+    }
+  }
+  .dark\:border-violet-500 {
+    &:is(.dark *) {
+      border-color: var(--color-violet-500);
+    }
+  }
+  .dark\:border-yellow-500 {
+    &:is(.dark *) {
+      border-color: var(--color-yellow-500);
+    }
+  }
   .dark\:bg-\[var\(--color-destructive-soft\,var\(--color-red-950\)\)\] {
     &:is(.dark *) {
       background-color: var(--color-destructive-soft,var(--color-red-950));
@@ -4864,6 +5141,11 @@
       }
     }
   }
+  .dark\:bg-red-950 {
+    &:is(.dark *) {
+      background-color: var(--color-red-950);
+    }
+  }
   .dark\:bg-secondary\/50 {
     &:is(.dark *) {
       background-color: var(--secondary);
@@ -4877,6 +5159,16 @@
       background-color: var(--color-slate-800);
     }
   }
+  .dark\:bg-violet-950 {
+    &:is(.dark *) {
+      background-color: var(--color-violet-950);
+    }
+  }
+  .dark\:bg-yellow-950 {
+    &:is(.dark *) {
+      background-color: var(--color-yellow-950);
+    }
+  }
   .dark\:bg-zinc-300 {
     &:is(.dark *) {
       background-color: var(--color-zinc-300);
@@ -4931,6 +5223,26 @@
       color: var(--color-green-300);
     }
   }
+  .dark\:text-green-400 {
+    &:is(.dark *) {
+      color: var(--color-green-400);
+    }
+  }
+  .dark\:text-red-400 {
+    &:is(.dark *) {
+      color: var(--color-red-400);
+    }
+  }
+  .dark\:text-violet-400 {
+    &:is(.dark *) {
+      color: var(--color-violet-400);
+    }
+  }
+  .dark\:text-yellow-400 {
+    &:is(.dark *) {
+      color: var(--color-yellow-400);
+    }
+  }
   .dark\:ring-ring\/20 {
     &:is(.dark *) {
       --tw-ring-color: var(--ring);
@@ -4947,6 +5259,90 @@
       }
     }
   }
+  .dark\:hover\:bg-green-900 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-green-900);
+        }
+      }
+    }
+  }
+  .dark\:hover\:bg-green-950\/50 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 50%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-green-950) 50%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .dark\:hover\:bg-red-900 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-red-900);
+        }
+      }
+    }
+  }
+  .dark\:hover\:bg-red-950\/50 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 50%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-red-950) 50%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .dark\:hover\:bg-violet-900 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-violet-900);
+        }
+      }
+    }
+  }
+  .dark\:hover\:bg-violet-950\/50 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(28.3% 0.141 291.089) 50%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-violet-950) 50%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .dark\:hover\:bg-yellow-900 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-yellow-900);
+        }
+      }
+    }
+  }
+  .dark\:hover\:bg-yellow-950\/50 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 50%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-yellow-950) 50%, transparent);
+          }
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-zinc-300\/90 {
     &:is(.dark *) {
       &:hover {
@@ -5027,6 +5423,74 @@
       }
     }
   }
+  .dark\:data-\[state\=open\]\:bg-green-900 {
+    &:is(.dark *) {
+      &[data-state="open"] {
+        background-color: var(--color-green-900);
+      }
+    }
+  }
+  .dark\:data-\[state\=open\]\:bg-green-950\/50 {
+    &:is(.dark *) {
+      &[data-state="open"] {
+        background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-green-950) 50%, transparent);
+        }
+      }
+    }
+  }
+  .dark\:data-\[state\=open\]\:bg-red-900 {
+    &:is(.dark *) {
+      &[data-state="open"] {
+        background-color: var(--color-red-900);
+      }
+    }
+  }
+  .dark\:data-\[state\=open\]\:bg-red-950\/50 {
+    &:is(.dark *) {
+      &[data-state="open"] {
+        background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-red-950) 50%, transparent);
+        }
+      }
+    }
+  }
+  .dark\:data-\[state\=open\]\:bg-violet-900 {
+    &:is(.dark *) {
+      &[data-state="open"] {
+        background-color: var(--color-violet-900);
+      }
+    }
+  }
+  .dark\:data-\[state\=open\]\:bg-violet-950\/50 {
+    &:is(.dark *) {
+      &[data-state="open"] {
+        background-color: color-mix(in srgb, oklch(28.3% 0.141 291.089) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-violet-950) 50%, transparent);
+        }
+      }
+    }
+  }
+  .dark\:data-\[state\=open\]\:bg-yellow-900 {
+    &:is(.dark *) {
+      &[data-state="open"] {
+        background-color: var(--color-yellow-900);
+      }
+    }
+  }
+  .dark\:data-\[state\=open\]\:bg-yellow-950\/50 {
+    &:is(.dark *) {
+      &[data-state="open"] {
+        background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-yellow-950) 50%, transparent);
+        }
+      }
+    }
+  }
   .dark\:data-\[state\=open\]\:bg-zinc-300\/90 {
     &:is(.dark *) {
       &[data-state="open"] {
@@ -5605,6 +6069,12 @@
       border-end-end-radius: var(--radius);
     }
   }
+  .\[\&_tr\]\:border-b {
+    & tr {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
   .\[\&_tr\:last-child\]\:border-0 {
     & tr:last-child {
       border-style: var(--tw-border-style);
@@ -5621,6 +6091,14 @@
       color: var(--primary);
     }
   }
+  .\*\:\[\[role\=checkbox\]\]\:translate-y-0\.5 {
+    :is(& > *) {
+      &:is([role=checkbox]) {
+        --tw-translate-y: calc(var(--spacing) * 0.5);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .\[\&\:last-child\]\:rounded-b-xl {
     &:last-child {
       border-bottom-right-radius: calc(var(--radius) + 4px);
@@ -5817,6 +6295,14 @@
       border-bottom-width: 1px;
     }
   }
+  .\[\&\>tr\]\:last\:border-b-0 {
+    &>tr {
+      &:last-child {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0px;
+      }
+    }
+  }
   .\[\&\[data-disabled\]\>\*\]\:after\:bg-foreground\/30 {
     &[data-disabled]>* {
       &::after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminium",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Metronic UI Component Library - A beautiful, reusable React component library built with Tailwind CSS",
   "author": "linkedunion",
   "license": "MIT",