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

package/lib/css/select.css

@@ -3,97 +3,41 @@
 @utility nui-select-wrapper {
   @apply relative;
 
-  .nui-select-label, .nui-label-float {
+  .nui-select-label, .nui-select-label-float-label {
     @apply nui-label;
   }
 
   &:not(.nui-select-loading) {
-    .nui-select ~ .nui-label-float {
+    .nui-select ~ .nui-select-label-float-label {
       @apply text-transparent;
     }
   }
 
-  &:not(.nui-has-icon).nui-select-sm {
+  &:not(.nui-select-has-icon).nui-select-sm {
     .nui-select {
       @apply h-8 py-1 text-xs leading-4 ps-2 pe-7;
     }
   }
 
-  &:not(.nui-has-icon).nui-select-md {
+  &:not(.nui-select-has-icon).nui-select-md {
     .nui-select {
       @apply h-10 py-2 text-sm leading-5 ps-3 pe-8;
     }
   }
 
-  &:not(.nui-has-icon).nui-select-lg {
+  &:not(.nui-select-has-icon).nui-select-lg {
     .nui-select {
       @apply h-12 py-2 text-sm leading-5 ps-4 pe-9;
     }
   }
 
-  &:not(.nui-has-icon).nui-select-xl {
+  &:not(.nui-select-has-icon).nui-select-xl {
     .nui-select {
       @apply h-14 py-2 text-base leading-5 ps-4 pe-9;
     }
   }
-
-  &.nui-select-label-float:not(.nui-has-icon).nui-select-sm {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-7 text-xs;
-    }
-
-    .nui-select:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-7;
-    }
-
-    .nui-select ~ .nui-label-float {
-      @apply ms-0 mt-0;
-    }
-  }
-
-  &.nui-select-label-float:not(.nui-has-icon).nui-select-md {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-8 text-xs;
-    }
-
-    .nui-select:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-8 !text-xs;
-    }
-
-    .nui-select ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
-
-  &.nui-select-label-float:not(.nui-has-icon).nui-select-lg {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-9 text-xs;
-    }
-
-    .nui-select:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-9 !text-xs;
-    }
-
-    .nui-select ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
-
-  &.nui-select-label-float:not(.nui-has-icon).nui-select-xl {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-10 text-xs;
-    }
-
-    .nui-select:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-10 !text-xs;
-    }
-
-    .nui-select ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
 }
-@utility nui-label-float {
+@utility nui-select-label-float-label {
   @apply h-5 absolute inline-flex items-center select-none pointer-events-none;
   @apply font-sans text-primary-500 leading-none;
   @apply transition-all duration-300;
@@ -110,7 +54,7 @@
   @apply nui-focus appearance-none w-full font-sans disabled:cursor-not-allowed disabled:opacity-75;
   @apply transition-all duration-300;
 
-  &:focus-visible ~ .nui-label-float {
+  &:focus-visible ~ .nui-select-label-float-label {
     @apply !text-primary-500 dark:!text-primary-500;
   }
 
@@ -126,10 +70,10 @@
     @apply cursor-not-allowed opacity-75;
   }
 }
-@utility nui-select-placeload {
+@utility nui-select-placeload-wrapper {
   @apply absolute start-0 top-0 flex w-full items-center px-4;
 
-  .nui-placeload {
+  .nui-select-placeload {
     @apply h-3 w-full max-w-[75%] rounded;
   }
 }
@@ -173,7 +117,7 @@
     @apply pb-1 text-xs;
   }
 
-  .nui-label-float {
+  .nui-select-label-float-label {
     @apply top-1.5;
   }
 
@@ -185,7 +129,7 @@
     }
   }
 
-  .nui-select-placeload {
+  .nui-select-placeload-wrapper {
     @apply h-8;
   }
 }
@@ -198,7 +142,7 @@
     @apply pb-1 text-[0.825rem];
   }
 
-  .nui-label-float {
+  .nui-select-label-float-label {
     @apply top-2.5;
   }
 
@@ -210,7 +154,7 @@
     }
   }
 
-  .nui-select-placeload {
+  .nui-select-placeload-wrapper {
     @apply h-10;
   }
 }
@@ -223,7 +167,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-label-float {
+  .nui-select-label-float-label {
     @apply top-3.5;
   }
 
@@ -235,7 +179,7 @@
     }
   }
 
-  .nui-select-placeload {
+  .nui-select-placeload-wrapper {
     @apply h-12;
   }
 }
@@ -248,7 +192,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-label-float {
+  .nui-select-label-float-label {
     @apply top-[1.1rem];
   }
 
@@ -260,7 +204,7 @@
     }
   }
 
-  .nui-select-placeload {
+  .nui-select-placeload-wrapper {
     @apply h-14;
   }
 }
@@ -307,7 +251,7 @@
     @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
   }
 
-  .nui-select ~ .nui-label-float {
+  .nui-select ~ .nui-select-label-float-label {
     @apply text-transparent;
   }
 
@@ -329,75 +273,135 @@
     @apply !text-danger-500 dark:!text-danger-500;
   }
 }
-@utility nui-has-icon {
-  .nui-select {
-    @apply h-8 py-1 text-xs leading-4 pe-7 ps-8;
+@utility nui-select-has-icon {
+  &.nui-select-sm {
+    .nui-select {
+      @apply h-8 py-1 text-xs leading-4 pe-7 ps-8;
+    }
   }
-}
-@utility nui-has-icon {
-  .nui-select {
-    @apply h-10 py-2 text-sm leading-5 pe-8 ps-10;
+  &.nui-select-md {
+    .nui-select {
+      @apply h-10 py-2 text-sm leading-5 pe-8 ps-10;
+    }
   }
-}
-@utility nui-has-icon {
-  .nui-select {
-    @apply h-12 py-2 text-sm leading-5 pe-9 ps-11;
+  &.nui-select-lg {
+    .nui-select {
+      @apply h-12 py-2 text-sm leading-5 pe-9 ps-11;
+    }
   }
-}
-@utility nui-has-icon {
-  .nui-select {
-    @apply h-14 py-2 text-base leading-5 pe-9 ps-12;
+  &.nui-select-xl {
+    .nui-select {
+      @apply h-14 py-2 text-base leading-5 pe-9 ps-12;
+    }
   }
 }
 @utility nui-select-label-float {
-  .nui-label-float {
-    @apply start-8 -ms-8 -mt-7 text-xs;
-  }
+  &.nui-select-has-icon.nui-select-sm {
+    .nui-select-label-float-label {
+      @apply start-8 -ms-8 -mt-6 text-xs;
+    }
 
-  .nui-select:focus-visible ~ .nui-label-float {
-    @apply !-ms-8 !-mt-7;
-  }
+    .nui-select:focus-visible ~ .nui-select-label-float-label {
+      @apply !-ms-8 !-mt-6;
+    }
 
-  .nui-select ~ .nui-label-float {
-    @apply ms-0 mt-0;
-  }
-}
-@utility nui-select-label-float {
-  .nui-label-float {
-    @apply start-10 -ms-10 -mt-8 text-xs;
+    .nui-select ~ .nui-select-label-float-label {
+      @apply ms-0 mt-1;
+    }
   }
+  &.nui-select-has-icon.nui-select-md {
+    .nui-select-label-float-label {
+      @apply start-10 -ms-10 -mt-7 text-xs;
+    }
 
-  .nui-select:focus-visible ~ .nui-label-float {
-    @apply !-ms-10 !-mt-8 !text-xs;
-  }
+    .nui-select:focus-visible ~ .nui-select-label-float-label {
+      @apply !-ms-10 !-mt-7 !text-xs;
+    }
 
-  .nui-select ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+    .nui-select ~ .nui-select-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
-}
-@utility nui-select-label-float {
-  .nui-label-float {
-    @apply start-11 -ms-10 -mt-9 text-xs;
+  &.nui-select-has-icon.nui-select-lg {
+    .nui-select-label-float-label {
+      @apply start-11 -ms-10 -mt-8 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-select-label-float-label {
+      @apply !-ms-10 !-mt-8 !text-xs;
+    }
+
+    .nui-select ~ .nui-select-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
+  &.nui-select-has-icon.nui-select-xl {
+    .nui-select-label-float-label {
+      @apply start-[3.25rem] -ms-[3.25rem] -mt-9 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-select-label-float-label {
+      @apply !-ms-[3.25rem] !-mt-9 !text-xs;
+    }
 
-  .nui-select:focus-visible ~ .nui-label-float {
-    @apply !-ms-10 !-mt-9 !text-xs;
+    .nui-select ~ .nui-select-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 
-  .nui-select ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+  &:not(.nui-select-has-icon).nui-select-sm {
+    .nui-select-label-float-label {
+      @apply start-3 -ms-3 -mt-6 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-select-label-float-label {
+      @apply !-ms-3 !-mt-6;
+    }
+
+    .nui-select ~ .nui-select-label-float-label {
+      @apply ms-0 mt-1;
+    }
   }
-}
-@utility nui-select-label-float {
-  .nui-label-float {
-    @apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-xs;
+
+  &:not(.nui-select-has-icon).nui-select-md {
+    .nui-select-label-float-label {
+      @apply start-3 -ms-3 -mt-7 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-select-label-float-label {
+      @apply !-ms-3 !-mt-7 !text-xs;
+    }
+
+    .nui-select ~ .nui-select-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 
-  .nui-select:focus-visible ~ .nui-label-float {
-    @apply !-ms-[3.25rem] !-mt-10 !text-xs;
+  &:not(.nui-select-has-icon).nui-select-lg {
+    .nui-select-label-float-label {
+      @apply start-3 -ms-3 -mt-8 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-select-label-float-label {
+      @apply !-ms-3 !-mt-8 !text-xs;
+    }
+
+    .nui-select ~ .nui-select-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 
-  .nui-select ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+  &:not(.nui-select-has-icon).nui-select-xl {
+    .nui-select-label-float-label {
+      @apply start-3 -ms-3 -mt-9 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-select-label-float-label {
+      @apply !-ms-3 !-mt-9 !text-xs;
+    }
+
+    .nui-select ~ .nui-select-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 }

package/lib/css/slimscroll.css

@@ -22,10 +22,11 @@
     @apply w-[6px] h-[6px];
   }
 
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-lg bg-transparent duration-300 transition-all;
+  }
+
   &:hover::-webkit-scrollbar-thumb {
     @apply bg-black/20 dark:bg-white/20;
   }
 }
-@utility undefined {
-  @apply rounded-lg bg-transparent duration-300 transition-all;
-}

package/lib/css/snack.css

@@ -19,7 +19,7 @@
   @apply text-muted-600 dark:text-muted-300;
 }
 @utility nui-snack-xs {
-  &:not(.nui-has-media) {
+  &:not(.nui-snack-has-media) {
     @apply !ps-2;
   }
 
@@ -41,7 +41,7 @@
   }
 }
 @utility nui-snack-sm {
-  &:not(.nui-has-media) {
+  &:not(.nui-snack-has-media) {
     @apply !ps-3;
   }
 
@@ -63,7 +63,7 @@
   }
 }
 @utility nui-snack-md {
-  &:not(.nui-has-media) {
+  &:not(.nui-snack-has-media) {
     @apply !ps-4;
   }
 

package/lib/css/textarea.css

@@ -3,23 +3,23 @@
 @utility nui-textarea-wrapper {
   @apply relative;
 
-  .nui-textarea-label, .nui-label-float {
+  .nui-textarea-label, .nui-textarea-label-float-label {
     @apply nui-label;
   }
 
   &:not(.nui-textarea-loading) {
-    .nui-textarea:placeholder-shown ~ .nui-label-float {
+    .nui-textarea:placeholder-shown ~ .nui-textarea-label-float-label {
       @apply text-muted-300 dark:text-muted-600;
     }
   }
 
-  &:not(.nui-has-addon) {
+  &:not(.nui-textarea-has-addon) {
     .nui-textarea {
       @apply p-2;
     }
   }
 }
-@utility nui-label-float {
+@utility nui-textarea-label-float-label {
   @apply h-5 absolute inline-flex items-center select-none pointer-events-none;
   @apply font-sans text-primary-500 leading-none;
   @apply transition-all duration-300;
@@ -30,7 +30,7 @@
 @utility nui-textarea {
   @apply nui-focus w-full enabled:cursor-text cursor-not-allowed;
 
-  &:focus-visible ~ .nui-label-float {
+  &:focus-visible ~ .nui-textarea-label-float-label {
     @apply !text-primary-500 dark:!text-primary-500;
   }
 
@@ -39,10 +39,10 @@
     @apply transition-colors duration-300;
   }
 }
-@utility nui-textarea-placeload {
+@utility nui-textarea-placeload-wrapper {
   @apply absolute start-0 top-4 flex h-full w-full flex-col space-y-2 px-3;
 
-  .nui-placeload {
+  .nui-textarea-placeload {
     @apply h-3 w-full rounded;
 
     &:first-child {
@@ -126,7 +126,7 @@
     @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
   }
 
-  .nui-textarea:placeholder-shown ~ .nui-label-float {
+  .nui-textarea:placeholder-shown ~ .nui-textarea-label-float {
     @apply text-transparent;
   }
 }
@@ -146,27 +146,33 @@
   }
 }
 @utility nui-textarea-sm {
-  @apply min-h-[2rem] text-xs;
+  .nui-textarea {
+    @apply min-h-[2rem] text-xs;
+  }
 
-  .nui-textarea-label {
+  .nui-textarea-label, .nui-textarea-label-float-label {
     @apply pb-1 text-xs;
   }
 }
 @utility nui-textarea-md {
-  @apply min-h-[2.5rem] text-sm;
+  .nui-textarea {
+    @apply min-h-[2.5rem] text-sm;
+  }
 
-  .nui-textarea-label {
+  .nui-textarea-label, .nui-textarea-label-float-label {
     @apply pb-1 text-sm;
   }
 }
 @utility nui-textarea-lg {
-  @apply min-h-[3rem] text-sm;
+  .nui-textarea {
+    @apply min-h-[3rem] text-base;
+  }
 
-  .nui-textarea-label {
-    @apply pb-1 text-sm;
+  .nui-textarea-label, .nui-textarea-label-float-label {
+    @apply pb-1 text-base;
   }
 }
-@utility nui-has-addon {
+@utility nui-textarea-has-addon {
   .nui-textarea {
     @apply px-2 pb-14 pt-2;
   }
@@ -187,41 +193,47 @@
   }
 }
 @utility nui-textarea-label-float {
-  .nui-label-float {
-    @apply start-3 -ms-3 -mt-7 text-xs;
-  }
+  &.nui-textarea-sm {
+    .nui-textarea-label-float-label {
+      @apply start-3 -ms-3 -mt-5 text-xs;
+    }
 
-  .nui-textarea:focus-visible ~ .nui-label-float {
-    @apply !-ms-3 !-mt-6;
-  }
+    .nui-textarea:focus-visible ~ .nui-textarea-label-float-label {
+      @apply !-ms-3 !-mt-5;
+    }
 
-  .nui-textarea:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-[0.35rem];
+    .nui-textarea:placeholder-shown ~ .nui-textarea-label-float-label {
+      @apply ms-0 mt-2;
+    }
   }
 }
 @utility nui-textarea-label-float {
-  .nui-label-float {
-    @apply start-3 -ms-3 -mt-8 text-xs;
-  }
+  &.nui-textarea-md {
+    .nui-textarea-label-float-label {
+      @apply start-3 -ms-3 -mt-5 text-xs;
+    }
 
-  .nui-textarea:focus-visible ~ .nui-label-float {
-    @apply !-ms-3 !-mt-7 !text-xs;
-  }
+    .nui-textarea:focus-visible ~ .nui-textarea-label-float-label {
+      @apply !-ms-3 !-mt-5 !text-xs;
+    }
 
-  .nui-textarea:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-2.5 text-[0.825rem];
+    .nui-textarea:placeholder-shown ~ .nui-textarea-label-float-label {
+      @apply ms-0 mt-2.5 text-[0.825rem];
+    }
   }
 }
 @utility nui-textarea-label-float {
-  .nui-label-float {
-    @apply start-3 -ms-3 -mt-8 text-xs;
-  }
+  &.nui-textarea-lg {
+    .nui-textarea-label-float-label {
+      @apply start-3 -ms-3 -mt-5 text-xs;
+    }
 
-  .nui-textarea:focus-visible ~ .nui-label-float {
-    @apply !-ms-3 !-mt-7 !text-xs;
-  }
+    .nui-textarea:focus-visible ~ .nui-textarea-label-float-label {
+      @apply !-ms-3 !-mt-5 !text-xs;
+    }
 
-  .nui-textarea:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-3 text-[0.825rem];
+    .nui-textarea:placeholder-shown ~ .nui-textarea-label-float-label {
+      @apply ms-0 mt-3 text-[0.825rem];
+    }
   }
 }

package/lib/css/theme-switch.css

@@ -8,19 +8,19 @@
     @apply ms-[45%] rotate-[360deg];
   }
 
-  .nui-theme-switch-input:not(:checked) ~ .nui-theme-switch-inner .nui-sun {
+  .nui-theme-switch-input:not(:checked) ~ .nui-theme-switch-inner .nui-theme-switch-sun {
     @apply block;
   }
 
-  .nui-theme-switch-input:checked ~ .nui-theme-switch-inner .nui-sun {
+  .nui-theme-switch-input:checked ~ .nui-theme-switch-inner .nui-theme-switch-sun {
     @apply hidden;
   }
 
-  .nui-theme-switch-input:not(:checked) ~ .nui-theme-switch-inner .nui-moon {
+  .nui-theme-switch-input:not(:checked) ~ .nui-theme-switch-inner .nui-theme-switch-moon {
     @apply hidden;
   }
 
-  .nui-theme-switch-input:checked ~ .nui-theme-switch-inner .nui-moon {
+  .nui-theme-switch-input:checked ~ .nui-theme-switch-inner .nui-theme-switch-moon {
     @apply block;
   }
 
@@ -43,13 +43,13 @@
   @apply border border-muted-200 dark:border-muted-800;
   @apply transition-all duration-300;
 }
-@utility nui-sun {
+@utility nui-theme-switch-sun {
   @apply pointer-events-none;
   @apply text-yellow-400 dark:text-yellow-400;
   @apply h-6 w-6;
   @apply transition-all duration-300;
 }
-@utility nui-moon {
+@utility nui-theme-switch-moon {
   @apply pointer-events-none;
   @apply text-yellow-400 dark:text-yellow-400;
   @apply h-6 w-6;

package/lib/css/theme-toggle.css

@@ -6,26 +6,26 @@
   @apply focus-visible:outline-2 ring-2 ring-transparent ring-offset-muted-200 dark:ring-offset-muted-900;
   @apply transition-all duration-300;
 
-  .nui-theme-toggle-input:not(:checked) ~ .nui-theme-toggle-inner .nui-sun {
+  .nui-theme-toggle-input:not(:checked) ~ .nui-theme-toggle-inner .nui-theme-toggle-sun {
     @apply -translate-y-1/2 opacity-100;
   }
 
-  .nui-theme-toggle-input:checked ~ .nui-theme-toggle-inner .nui-sun {
+  .nui-theme-toggle-input:checked ~ .nui-theme-toggle-inner .nui-theme-toggle-sun {
     @apply translate-y-[-150%] opacity-0;
   }
 
-  .nui-theme-toggle-input:not(:checked) ~ .nui-theme-toggle-inner .nui-moon {
+  .nui-theme-toggle-input:not(:checked) ~ .nui-theme-toggle-inner .nui-theme-toggle-moon {
     @apply translate-y-[-150%] opacity-0;
   }
 
-  .nui-theme-toggle-input:checked ~ .nui-theme-toggle-inner .nui-moon {
+  .nui-theme-toggle-input:checked ~ .nui-theme-toggle-inner .nui-theme-toggle-moon {
     @apply -translate-y-1/2 opacity-100;
   }
 
   &:not(nui-theme-toggle-inverted) {
     @apply ring-offset-muted-500 dark:ring-offset-muted-900;
 
-    .nui-toggle-inner {
+    .nui-theme-toggle-inner {
       @apply border border-white dark:border-muted-800;
       @apply bg-white dark:bg-muted-800;
     }
@@ -40,13 +40,13 @@
 @utility nui-theme-toggle-input {
   @apply absolute start-0 top-0 z-[2] h-full w-full cursor-pointer opacity-0;
 }
-@utility nui-sun {
+@utility nui-theme-toggle-sun {
   @apply pointer-events-none absolute start-1/2 top-1/2 block -translate-y-1/2 translate-x-[-50%] rtl:translate-x-[50%];
   @apply h-5 w-5;
   @apply text-yellow-400 dark:text-yellow-400;
   @apply transition-all duration-300;
 }
-@utility nui-moon {
+@utility nui-theme-toggle-moon {
   @apply pointer-events-none absolute start-1/2 top-1/2 block translate-x-[-50%] rtl:translate-x-[45%];
   @apply h-5 w-5;
   @apply text-yellow-400 dark:text-yellow-400;
@@ -55,7 +55,7 @@
 @utility nui-theme-toggle-inverted {
   @apply ring-offset-muted-500 dark:ring-offset-muted-400;
 
-  .nui-toggle-inner {
+  .nui-theme-toggle-inner {
     @apply !bg-primary-700 dark:!bg-primary-700;
   }
 }