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

package/lib/css/input-number.css

@@ -3,7 +3,7 @@
 @utility nui-input-number-wrapper {
   @apply relative;
 
-  .nui-input-number-label, .nui-label-float {
+  .nui-input-number-label, .nui-input-number-label-float-label {
     @apply nui-label;
   }
 
@@ -26,92 +26,36 @@
   }
 
   &:not(.nui-input-number-loading) {
-    .nui-input-number:placeholder-shown ~ .nui-label-float {
+    .nui-input-number:placeholder-shown ~ .nui-input-number-label-float {
       @apply text-muted-300 dark:text-muted-600;
     }
   }
 
-  &:not(.nui-has-icon).nui-input-number-sm {
+  &:not(.nui-input-number-has-icon).nui-input-number-sm {
     .nui-input-number {
       @apply h-8 py-1 text-xs leading-4 ps-2 pe-[3.75rem];
     }
   }
 
-  &:not(.nui-has-icon).nui-input-number-md {
+  &:not(.nui-input-number-has-icon).nui-input-number-md {
     .nui-input-number {
       @apply h-10 py-2 text-sm leading-5 ps-3 pe-[4.75rem];
     }
   }
 
-  &:not(.nui-has-icon).nui-input-number-lg {
+  &:not(.nui-input-number-has-icon).nui-input-number-lg {
     .nui-input-number {
       @apply h-12 py-2 text-sm leading-5 ps-4 pe-24;
     }
   }
 
-  &:not(.nui-has-icon).nui-input-number-xl {
+  &:not(.nui-input-number-has-icon).nui-input-number-xl {
     .nui-input-number {
       @apply h-14 py-2 text-base leading-5 ps-4 pe-24;
     }
   }
-
-  &.nui-input-number-label-float:not(.nui-has-icon).nui-input-number-sm {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-7 text-xs;
-    }
-
-    .nui-input-number:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-7;
-    }
-
-    .nui-input-number:placeholder-shown ~ .nui-label-float {
-      @apply ms-0 mt-0;
-    }
-  }
-
-  &.nui-input-number-label-float:not(.nui-has-icon).nui-input-number-md {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-8 text-xs;
-    }
-
-    .nui-input-number:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-8 !text-xs;
-    }
-
-    .nui-input-number:placeholder-shown ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
-
-  &.nui-input-number-label-float:not(.nui-has-icon).nui-input-number-lg {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-9 text-xs;
-    }
-
-    .nui-input-number:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-9 !text-xs;
-    }
-
-    .nui-input-number:placeholder-shown ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
-
-  &.nui-input-number-label-float:not(.nui-has-icon).nui-input-number-xl {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-10 text-xs;
-    }
-
-    .nui-input-number:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-10 !text-xs;
-    }
-
-    .nui-input-number:placeholder-shown ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
 }
-@utility nui-label-float {
+@utility nui-input-number-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;
@@ -129,9 +73,9 @@
 }
 @utility nui-input-number {
   @apply nui-focus w-full font-sans disabled:cursor-not-allowed disabled:opacity-75;
-  @apply transition-all duration-300;
+  @apply transition-all duration-300 text-ellipsis;
 
-  &:focus-visible ~ .nui-label-float {
+  &:focus-visible ~ .nui-input-number-label-float-label {
     @apply !text-primary-500 dark:!text-primary-500;
   }
 
@@ -143,10 +87,10 @@
     @apply cursor-not-allowed opacity-75;
   }
 }
-@utility nui-input-number-placeload {
+@utility nui-input-number-placeload-wrapper {
   @apply absolute start-0 top-0 flex w-full items-center px-4;
 
-  .nui-placeload {
+  .nui-input-number-placeload {
     @apply h-3 w-full max-w-[50%] rounded;
   }
 }
@@ -200,7 +144,7 @@
     @apply pb-1 text-xs;
   }
 
-  .nui-label-float {
+  .nui-input-number-label-float-label {
     @apply top-1.5;
   }
 
@@ -212,7 +156,7 @@
     }
   }
 
-  .nui-input-number-placeload {
+  .nui-input-number-placeload-wrapper {
     @apply h-8;
   }
 
@@ -225,7 +169,7 @@
     @apply pb-1 text-[0.825rem];
   }
 
-  .nui-label-float {
+  .nui-input-number-label-float-label {
     @apply top-2.5;
   }
 
@@ -237,7 +181,7 @@
     }
   }
 
-  .nui-input-number-placeload {
+  .nui-input-number-placeload-wrapper {
     @apply h-10;
   }
 
@@ -250,7 +194,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-label-float {
+  .nui-input-number-label-float-label {
     @apply top-3.5;
   }
 
@@ -262,7 +206,7 @@
     }
   }
 
-  .nui-input-number-placeload {
+  .nui-input-number-placeload-wrapper {
     @apply h-12;
   }
 
@@ -275,7 +219,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-label-float {
+  .nui-input-number-label-float-label {
     @apply top-[1.1rem];
   }
 
@@ -287,7 +231,7 @@
     }
   }
 
-  .nui-input-number-placeload {
+  .nui-input-number-placeload-wrapper {
     @apply h-14;
   }
 
@@ -357,7 +301,7 @@
     @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
   }
 
-  .nui-input-number:placeholder-shown ~ .nui-label-float {
+  .nui-input-number:placeholder-shown ~ .nui-input-number-label-float-label {
     @apply text-transparent;
   }
 
@@ -379,90 +323,157 @@
     @apply !text-danger-500 dark:!text-danger-500;
   }
 }
-@utility nui-has-icon {
-  .nui-input-number {
-    @apply h-8 py-1 text-xs leading-4 ps-8 pe-[3.75rem];
+@utility nui-input-number-has-icon {
+  &.nui-input-number-sm {
+    .nui-input-number {
+      @apply h-8 py-1 text-xs leading-4 ps-8 pe-[3.75rem];
+    }
   }
-}
-@utility nui-has-icon {
-  .nui-input-number {
-    @apply h-10 py-2 text-sm leading-5 ps-10 pe-[4.75rem];
+  &.nui-input-number-md {
+    .nui-input-number {
+      @apply h-10 py-2 text-sm leading-5 ps-10 pe-[4.75rem];
+    }
   }
-}
-@utility nui-has-icon {
-  .nui-input-number {
-    @apply h-12 py-2 text-sm leading-5 ps-11 pe-24;
+  &.nui-input-number-lg {
+    .nui-input-number {
+      @apply h-12 py-2 text-sm leading-5 ps-11 pe-24;
+    }
   }
-}
-@utility nui-has-icon {
-  .nui-input-number {
-    @apply h-14 py-2 text-base leading-5 ps-[3.25rem] pe-24;
+  &.nui-input-number-xl {
+    .nui-input-number {
+      @apply h-14 py-2 text-base leading-5 ps-[3.25rem] pe-24;
+    }
   }
 }
-@utility nui-has-action {
-  .nui-input-number {
-    @apply pe-8;
+@utility nui-input-number-has-action {
+  &.nui-input-number-sm {
+    .nui-input-number {
+      @apply pe-8;
+    }
   }
-}
-@utility nui-has-action {
-  .nui-input-number {
-    @apply pe-10;
+  &.nui-input-number-md {
+    .nui-input-number {
+      @apply pe-10;
+    }
   }
-}
-@utility nui-has-action {
-  .nui-input-number {
-    @apply pe-12;
+  &.nui-input-number-lg {
+    .nui-input-number {
+      @apply pe-12;
+    }
+  }
+  &.nui-input-number-xl {
+    .nui-input-number {
+      @apply pe-14;
+    }
   }
 }
 @utility nui-input-number-label-float {
-  .nui-label-float {
-    @apply start-8 -ms-8 -mt-7 text-xs;
-  }
+  &.nui-input-number-has-icon.nui-input-number-sm {
+    .nui-input-number-label-float-label {
+      @apply start-8 -ms-8 -mt-6 text-xs;
+    }
 
-  .nui-input-number:focus-visible ~ .nui-label-float {
-    @apply !-ms-8 !-mt-7;
-  }
+    .nui-input-number:focus-visible ~ .nui-input-number-label-float-label {
+      @apply !-ms-8 !-mt-6;
+    }
 
-  .nui-input-number:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-0;
-  }
-}
-@utility nui-input-number-label-float {
-  .nui-label-float {
-    @apply start-10 -ms-10 -mt-8 text-xs;
+    .nui-input-number:placeholder-shown ~ .nui-input-number-label-float-label {
+      @apply ms-0 mt-1;
+    }
   }
+  &.nui-input-number-has-icon.nui-input-number-md {
+    .nui-input-number-label-float-label {
+      @apply start-10 -ms-10 -mt-7 text-xs;
+    }
 
-  .nui-input-number:focus-visible ~ .nui-label-float {
-    @apply !-ms-10 !-mt-8 !text-xs;
-  }
+    .nui-input-number:focus-visible ~ .nui-input-number-label-float-label {
+      @apply !-ms-10 !-mt-7 !text-xs;
+    }
 
-  .nui-input-number:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+    .nui-input-number:placeholder-shown ~ .nui-input-number-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
-}
-@utility nui-input-number-label-float {
-  .nui-label-float {
-    @apply start-11 -ms-10 -mt-9 text-xs;
+  &.nui-input-number-has-icon.nui-input-number-lg {
+    .nui-input-number-label-float-label {
+      @apply start-11 -ms-10 -mt-8 text-xs;
+    }
+
+    .nui-input-number:focus-visible ~ .nui-input-number-label-float-label {
+      @apply !-ms-10 !-mt-8 !text-xs;
+    }
+
+    .nui-input-number:placeholder-shown ~ .nui-input-number-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
+  &.nui-input-number-has-icon.nui-input-number-xl {
+    .nui-input-number-label-float-label {
+      @apply start-[3.25rem] -ms-[3.25rem] -mt-9 text-xs;
+    }
 
-  .nui-input-number:focus-visible ~ .nui-label-float {
-    @apply !-ms-10 !-mt-9 !text-xs;
+    .nui-input-number:focus-visible ~ .nui-input-number-label-float-label {
+      @apply !-ms-[3.25rem] !-mt-9 !text-xs;
+    }
+
+    .nui-input-number:placeholder-shown ~ .nui-input-number-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
+  
+  &:not(.nui-input-number-has-icon).nui-input-number-sm {
+    .nui-input-number-label-float-label {
+      @apply start-3 -ms-3 -mt-67 text-xs;
+    }
+
+    .nui-input-number:focus-visible ~ .nui-input-number-label-float-label {
+      @apply !-ms-3 !-mt-6;
+    }
 
-  .nui-input-number:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+    .nui-input-number:placeholder-shown ~ .nui-input-number-label-float-label {
+      @apply ms-0 mt-1;
+    }
   }
-}
-@utility nui-input-number-label-float {
-  .nui-label-float {
-    @apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-xs;
+
+  &:not(.nui-input-number-has-icon).nui-input-number-md {
+    .nui-input-number-label-float-label {
+      @apply start-3 -ms-3 -mt-7 text-xs;
+    }
+
+    .nui-input-number:focus-visible ~ .nui-input-number-label-float-label {
+      @apply !-ms-3 !-mt-7 !text-xs;
+    }
+
+    .nui-input-number:placeholder-shown ~ .nui-input-number-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 
-  .nui-input-number:focus-visible ~ .nui-label-float {
-    @apply !-ms-[3.25rem] !-mt-10 !text-xs;
+  &:not(.nui-input-number-has-icon).nui-input-number-lg {
+    .nui-input-number-label-float-label {
+      @apply start-3 -ms-3 -mt-8 text-xs;
+    }
+
+    .nui-input-number:focus-visible ~ .nui-input-number-label-float-label {
+      @apply !-ms-3 !-mt-8 !text-xs;
+    }
+
+    .nui-input-number:placeholder-shown ~ .nui-input-number-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 
-  .nui-input-number:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+  &:not(.nui-input-number-has-icon).nui-input-number-xl {
+    .nui-input-number-label-float-label {
+      @apply start-3 -ms-3 -mt-9 text-xs;
+    }
+
+    .nui-input-number:focus-visible ~ .nui-input-number-label-float-label {
+      @apply !-ms-3 !-mt-9 !text-xs;
+    }
+
+    .nui-input-number:placeholder-shown ~ .nui-input-number-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 }