@shuriken-ui/tailwind 4.0.0-alpha.5 → 4.0.0-alpha.6

package/lib/css/listbox.css

@@ -3,97 +3,41 @@
 @utility nui-listbox {
   @apply relative w-full;
 
-  .nui-listbox-label, .nui-label-float {
+  .nui-listbox-label, .nui-listbox-label-float {
     @apply nui-label;
   }
 
   &:not(.nui-listbox-loading) {
-    .nui-listbox-button ~ .nui-label-float {
+    .nui-listbox-button ~ .nui-listbox-label-float {
       @apply text-muted-300 dark:text-muted-600;
     }
   }
 
-  &:not(.nui-has-icon).nui-listbox-sm {
+  &:not(.nui-listbox-has-icon).nui-listbox-sm {
     .nui-listbox-button {
       @apply h-8 py-1 text-xs leading-4 px-2;
     }
   }
 
-  &:not(.nui-has-icon).nui-listbox-md {
+  &:not(.nui-listbox-has-icon).nui-listbox-md {
     .nui-listbox-button {
       @apply h-10 py-2 text-sm leading-5 px-3;
     }
   }
 
-  &:not(.nui-has-icon).nui-listbox-lg {
+  &:not(.nui-listbox-has-icon).nui-listbox-lg {
     .nui-listbox-button {
       @apply h-12 py-2 text-sm leading-5 px-4;
     }
   }
 
-  &:not(.nui-has-icon).nui-listbox-xl {
+  &:not(.nui-listbox-has-icon).nui-listbox-xl {
     .nui-listbox-button {
       @apply h-14 py-2 text-base leading-5 px-4;
     }
   }
-
-  &.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-sm {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-7 text-xs text-transparent;
-    }
-
-    .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
-      @apply !-ms-3 !-mt-7 !text-primary-500;
-    }
-
-    .nui-listbox-button ~ .nui-label-float {
-      @apply ms-0 mt-0;
-    }
-  }
-
-  &.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-md {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-8 text-xs text-transparent;
-    }
-
-    .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
-      @apply !-ms-3 !-mt-8 !text-xs !text-primary-500;
-    }
-
-    .nui-listbox-button ~ .nui-label-float {
-      @apply ms-0 mt-0 text-xs;
-    }
-  }
-
-  &.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-lg {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-9 text-xs text-transparent;
-    }
-
-    .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
-      @apply !-ms-3 !-mt-9 !text-xs !text-primary-500;
-    }
-
-    .nui-listbox-button ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
-
-  &.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-xl {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-10 text-xs text-transparent;
-    }
-
-    .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
-      @apply !-ms-3 !-mt-10 !text-xs !text-primary-500;
-    }
-
-    .nui-listbox-button ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
 }
-@utility nui-label-float {
+@utility nui-listbox-label-float-label {
   @apply pointer-events-none absolute inline-flex select-none items-center leading-none;
   @apply text-primary-500 h-5;
   @apply transition-all duration-300;
@@ -108,11 +52,11 @@
   .nui-listbox-button-inner {
     @apply flex w-full items-center;
 
-    .nui-icon-box {
+    .nui-listbox-icon-box {
       @apply !h-6 !w-6;
       @apply -ms-2 me-2;
 
-      .nui-icon-box-inner {
+      .nui-listbox-icon-box-inner {
         @apply h-4 w-4;
       }
     }
@@ -141,7 +85,7 @@
   }
 }
 @utility nui-listbox-options {
-  @apply nui-slimscroll absolute z-10 mt-1 max-h-60 w-full overflow-auto p-2;
+  @apply nui-slimscroll z-10 max-h-60 w-full overflow-auto p-2;
   @apply text-base sm:text-sm;
   @apply focus:ring-primary-500/50 dark:focus:ring-primary-500/50 focus:outline-none focus:ring-1;
   @apply shadow-lg shadow-muted-300/30 dark:shadow-muted-800/20;
@@ -150,10 +94,10 @@
   @apply relative flex gap-2 cursor-pointer select-none items-center px-3 py-2;
   @apply transition-colors duration-300;
 
-  .nui-icon-box {
+  .nui-listbox-icon-box {
     @apply text-muted-200 dark:text-muted-400 -ms-2 me-1;
 
-    .nui-icon-box-inner {
+    .nui-listbox-icon-box-inner {
       @apply h-5 w-5;
     }
   }
@@ -177,19 +121,20 @@
     }
   }
 
-  &:not(.nui-active), &:not(:hover) {
+  &:not(.nui-listbox-active), &:not(:hover) {
     @apply text-muted-600 dark:text-muted-200;
   }
 
-  &.nui-active, &:hover {
+  &.nui-listbox-active, &:hover {
     @apply text-primary-600 dark:text-primary-600;
     @apply bg-primary-500/10 dark:bg-primary-500/10;
   }
 }
-@utility nui-listbox-placeload {
-  @apply absolute start-0 top-0 flex w-full items-center px-4;
+@utility nui-listbox-placeload-wrapper {
+  @apply absolute start-0 top-0 flex w-full items-center px-4; 
+  @apply h-10;
 
-  .nui-placeload {
+  .nui-listbox-placeload {
     @apply h-3 w-full max-w-[75%] rounded;
   }
 }
@@ -198,7 +143,7 @@
     @apply pb-1 text-xs;
   }
 
-  .nui-label-float {
+  .nui-listbox-label-float-label {
     @apply top-1.5;
   }
 
@@ -210,7 +155,7 @@
     }
   }
 
-  .nui-listbox-placeload {
+  .nui-listbox-placeload-wrapper {
     @apply h-8;
   }
 
@@ -227,7 +172,7 @@
     @apply pb-1 text-[0.825rem];
   }
 
-  .nui-label-float {
+  .nui-listbox-label-float-label {
     @apply top-2.5;
   }
 }
@@ -238,9 +183,6 @@
     @apply h-[1.15rem] w-[1.15rem];
   }
 }
-@utility nui-listbox-placeload {
-  @apply h-10;
-}
 @utility nui-listbox-chevron {
   @apply h-10 w-10;
 
@@ -253,7 +195,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-label-float {
+  .nui-listbox-label-float-label {
     @apply top-3.5;
   }
 
@@ -265,7 +207,7 @@
     }
   }
 
-  .nui-listbox-placeload {
+  .nui-listbox-placeload-wrapper {
     @apply h-12;
   }
 
@@ -282,7 +224,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-label-float {
+  .nui-listbox-label-float-label {
     @apply top-[1.1rem];
   }
 
@@ -294,7 +236,7 @@
     }
   }
 
-  .nui-listbox-placeload {
+  .nui-listbox-placeload-wrapper {
     @apply h-14;
   }
 
@@ -414,7 +356,7 @@
     @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent pointer-events-none;
   }
 
-  .nui-listbox-button ~ .nui-label-float {
+  .nui-listbox-button ~ .nui-listbox-label-float {
     @apply text-transparent;
   }
 
@@ -422,11 +364,6 @@
     @apply opacity-0;
   }
 }
-@utility nui-listbox-label-float {
-  .nui-listbox-button {
-    @apply placeholder:text-transparent dark:placeholder:text-transparent;
-  }
-}
 @utility nui-listbox-error {
   .nui-listbox-button {
     @apply !border-danger-500 dark:!border-danger-500;
@@ -436,75 +373,156 @@
     @apply !text-danger-500 dark:!text-danger-500;
   }
 }
-@utility nui-has-icon {
-  .nui-listbox-button {
-    @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
+@utility nui-listbox-has-icon {
+  &.nui-listbox-sm {
+    .nui-listbox-button {
+      @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
+    }
   }
-}
-@utility nui-has-icon {
-  .nui-listbox-button {
-    @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
+  &.nui-listbox-md {
+    .nui-listbox-button {
+      @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
+    }
   }
-}
-@utility nui-has-icon {
-  .nui-listbox-button {
-    @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
+  &.nui-listbox-lg {
+    .nui-listbox-button {
+      @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
+    }
   }
-}
-@utility nui-has-icon {
-  .nui-listbox-button {
-    @apply h-14 py-2 text-base leading-5 pe-4 ps-12;
+  &.nui-listbox-xl {
+    .nui-listbox-button {
+      @apply h-14 py-2 text-base leading-5 pe-4 ps-12;
+    }
   }
 }
 @utility nui-listbox-label-float {
-  .nui-label-float {
-    @apply start-8 -ms-8 -mt-7 text-xs text-transparent;
+  .nui-listbox-button {
+    @apply placeholder:text-transparent dark:placeholder:text-transparent;
   }
 
-  .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
-    @apply !-ms-8 !-mt-7 !text-primary-500;
-  }
+  &.nui-listbox-has-icon.nui-listbox-sm {
+    .nui-listbox-label-float-label {
+      @apply start-8 -ms-8 -mt-7 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-listbox-label-float-label, 
+    .nui-listbox-button:focus ~ .nui-listbox-label-float-label,
+    .nui-listbox-label-float-active {
+      @apply !-ms-8 !-mt-7 !text-primary-500;
+    }
 
-  .nui-listbox-button ~ .nui-label-float {
-    @apply ms-0 mt-0;
+    .nui-listbox-button ~ .nui-listbox-label-float-label {
+      @apply ms-0 mt-0;
+    }
   }
-}
-@utility nui-listbox-label-float {
-  .nui-label-float {
-    @apply start-10 -ms-10 -mt-8 text-xs text-transparent;
+  &.nui-listbox-has-icon.nui-listbox-md {
+    .nui-listbox-label-float-label {
+      @apply start-10 -ms-10 -mt-8 text-xs text-transparent;
+    }
+  
+    .nui-listbox-button:focus-visible ~ .nui-listbox-label-float-label,
+    .nui-listbox-button:focus ~ .nui-listbox-label-float-label,
+    .nui-listbox-label-float-active {
+      @apply !-ms-10 !-mt-8 !text-xs !text-primary-500;
+    }
+  
+    .nui-listbox-button ~ .nui-listbox-label-float-label {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
   }
+  &.nui-listbox-has-icon.nui-listbox-lg {
+    .nui-listbox-label-float-label {
+      @apply start-11 -ms-10 -mt-9 text-xs text-transparent;
+    }
 
-  .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
-    @apply !-ms-10 !-mt-8 !text-xs !text-primary-500;
-  }
+    .nui-listbox-button:focus-visible ~ .nui-listbox-label-float-label,
+    .nui-listbox-button:focus ~ .nui-listbox-label-float-label,
+    .nui-listbox-label-float-active {
+      @apply !-ms-10 !-mt-9 !text-xs !text-primary-500;
+    }
 
-  .nui-listbox-button ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
-  }
-}
-@utility nui-listbox-label-float {
-  .nui-label-float {
-    @apply start-11 -ms-10 -mt-9 text-xs text-transparent;
+    .nui-listbox-button ~ .nui-listbox-label-float-label {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
   }
+  &.nui-listbox-has-icon.nui-listbox-xl {
+    .nui-listbox-label-float-label {
+      @apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-listbox-label-float-label,
+    .nui-listbox-button:focus ~ .nui-listbox-label-float-label,
+    .nui-listbox-label-float-active {
+      @apply !-ms-[3.25rem] !-mt-10 !text-xs !text-primary-500;
+    }
 
-  .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
-    @apply !-ms-10 !-mt-9 !text-xs !text-primary-500;
+    .nui-listbox-button ~ .nui-listbox-label-float-label {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
   }
 
-  .nui-listbox-button ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+  
+  &:not(.nui-listbox-has-icon).nui-listbox-sm {
+    .nui-listbox-label-float-label {
+      @apply start-3 -ms-3 -mt-7 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-listbox-label-float-label,
+    .nui-listbox-button:focus ~ .nui-listbox-label-float-label,
+    .nui-listbox-label-float-active {
+      @apply !-ms-3 !-mt-7 !text-primary-500;
+    }
+
+    .nui-listbox-button ~ .nui-listbox-label-float-label {
+      @apply ms-0 mt-0;
+    }
   }
-}
-@utility nui-listbox-label-float {
-  .nui-label-float {
-    @apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-xs text-transparent;
+
+  &:not(.nui-listbox-has-icon).nui-listbox-md {
+    .nui-listbox-label-float-label {
+      @apply start-3 -ms-3 -mt-8 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-listbox-label-float-label,
+    .nui-listbox-button:focus ~ .nui-listbox-label-float-label,
+    .nui-listbox-label-float-active {
+      @apply !-ms-3 !-mt-8 !text-xs !text-primary-500;
+    }
+
+    .nui-listbox-button ~ .nui-listbox-label-float-label {
+      @apply ms-0 mt-0 text-xs;
+    }
   }
 
-  .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
-    @apply !-ms-[3.25rem] !-mt-10 !text-xs !text-primary-500;
+  &:not(.nui-listbox-has-icon).nui-listbox-lg {
+    .nui-listbox-label-float-label {
+      @apply start-3 -ms-3 -mt-9 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-listbox-label-float-label,
+    .nui-listbox-button:focus ~ .nui-listbox-label-float-label,
+    .nui-listbox-label-float-active {
+      @apply !-ms-3 !-mt-9 !text-xs !text-primary-500;
+    }
+
+    .nui-listbox-button ~ .nui-listbox-label-float-label {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
   }
 
-  .nui-listbox-button ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+  &:not(.nui-listbox-has-icon).nui-listbox-xl {
+    .nui-listbox-label-float-label {
+      @apply start-3 -ms-3 -mt-10 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-listbox-label-float-label,
+    .nui-listbox-button:focus ~ .nui-label-float-label,
+    .nui-label-float-active {
+      @apply !-ms-3 !-mt-10 !text-xs !text-primary-500;
+    }
+
+    .nui-listbox-button ~ .nui-listbox-label-float-label {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
   }
 }

package/lib/css/message-text.css

@@ -3,69 +3,69 @@
 @utility nui-message-text {
   @apply relative p-5;
 }
-@utility nui-message-head {
+@utility nui-message-text-head {
   @apply flex items-center gap-2 mb-3;
 }
-@utility nui-message-dot {
+@utility nui-message-text-dot {
   @apply inline-block h-2 w-2 rounded-full;
 }
-@utility nui-message-close {
+@utility nui-message-text-close {
   @apply absolute top-2 end-2;
 }
-@utility nui-message-rounded-sm {
+@utility nui-message-text-rounded-sm {
   @apply rounded-md;
 }
-@utility nui-message-rounded-md {
+@utility nui-message-text-rounded-md {
   @apply rounded-lg;
 }
-@utility nui-message-rounded-lg {
+@utility nui-message-text-rounded-lg {
   @apply rounded-xl;
 }
-@utility nui-message-low-contrast {
+@utility nui-message-text-low-contrast {
   @apply bg-white dark:bg-muted-800;
   @apply border border-muted-300 dark:border-muted-700;
 }
-@utility nui-message-high-contrast {
+@utility nui-message-text-high-contrast {
   @apply bg-white dark:bg-muted-950;
   @apply border border-muted-300 dark:border-muted-800;
 }
-@utility nui-message-default {
-  .nui-message-dot {
+@utility nui-message-text-default {
+  .nui-message-text-dot {
     @apply bg-muted-300 dark:bg-muted-700;
   }
 }
-@utility nui-message-primary {
-  .nui-message-dot {
+@utility nui-message-text-primary {
+  .nui-message-text-dot {
     @apply bg-primary-500 dark:bg-primary-500;
   }
 }
-@utility nui-message-info {
-  .nui-message-dot {
+@utility nui-message-text-info {
+  .nui-message-text-dot {
     @apply bg-info-500 dark:bg-info-500;
   }
 }
-@utility nui-message-success {
-  .nui-message-dot {
+@utility nui-message-text-success {
+  .nui-message-text-dot {
     @apply bg-success-500 dark:bg-success-500;
   }
 }
-@utility nui-message-warning {
-  .nui-message-dot {
+@utility nui-message-text-warning {
+  .nui-message-text-dot {
     @apply bg-warning-500 dark:bg-warning-500;
   }
 }
-@utility nui-message-danger {
-  .nui-message-dot {
+@utility nui-message-text-danger {
+  .nui-message-text-dot {
     @apply bg-danger-500 dark:bg-danger-500;
   }
 }
-@utility nui-message-dark {
-  .nui-message-dot {
+@utility nui-message-text-dark {
+  .nui-message-text-dot {
     @apply bg-muted-900 dark:bg-muted-100;
   }
 }
-@utility nui-message-black {
-  .nui-message-dot {
+@utility nui-message-text-black {
+  .nui-message-text-dot {
     @apply bg-black dark:bg-white;
   }
 }

package/lib/css/pagination.css

@@ -51,7 +51,7 @@
   @apply bg-muted-100 dark:bg-muted-700;
   @apply border border-muted-200 dark:border-muted-600;
 
-  &:not(.nui-active) {
+  &:not(.nui-pagination-active) {
     @apply text-muted-500 dark:text-muted-400;
     @apply hover:text-muted-700 dark:hover:text-muted-400;
     @apply bg-white dark:bg-muted-800;
@@ -60,7 +60,7 @@
   }
 }
 @utility nui-pagination-primary {
-  .nui-pagination-link.nui-active {
+  .nui-pagination-link.nui-pagination-active {
     @apply text-primary-invert dark:text-primary-invert;
     @apply bg-primary-500 dark:bg-primary-500;
     @apply border-primary-500 dark:border-primary-500;
@@ -68,7 +68,7 @@
   }
 }
 @utility nui-pagination-dark {
-  .nui-pagination-link.nui-active {
+  .nui-pagination-link.nui-pagination-active {
     @apply text-muted-100 dark:text-muted-900;
     @apply bg-muted-900 dark:bg-muted-100;
     @apply border-muted-900 dark:border-muted-100;
@@ -76,7 +76,7 @@
   }
 }
 @utility nui-pagination-black {
-  .nui-pagination-link.nui-active {
+  .nui-pagination-link.nui-pagination-active {
     @apply text-white dark:text-black;
     @apply bg-black dark:bg-white;
     @apply border-black dark:border-white;

package/lib/css/progress.css

@@ -87,19 +87,3 @@
     @apply bg-black dark:bg-white;
   }
 }
-
-@utility animate-nui-progress-indeterminate {
-  animation: nui-progress-indeterminate 3s linear infinite forwards;
-}
-
-@keyframes nui-progress-indeterminate {
-  0% {
-    margin-left: -100%;
-  }
-  60% {
-    margin-left: 100%;
-  }
-  100% {
-    margin-left: -100%;
-  }
-}