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

package/lib/css/textarea.css

@@ -1,26 +1,25 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-textarea */
 
 @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;
@@ -31,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;
   }
 
@@ -40,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 {
@@ -127,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;
   }
 }
@@ -147,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;
   }
@@ -188,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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-theme-switch */
 
 @utility nui-theme-switch {
@@ -9,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;
   }
 
@@ -44,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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-theme-toggle */
 
 @utility nui-theme-toggle {
@@ -7,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;
     }
@@ -41,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;
@@ -56,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;
   }
 }

package/lib/css/toast.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-toast */
 
 @utility nui-toast {
@@ -8,7 +7,7 @@
   @apply flex items-center grow gap-2 px-4 py-3;
 }
 @utility nui-toast-title {
-  @apply nui-heading nui-heading-sm nui-weight-medium;
+  @apply nui-heading nui-heading-sm nui-heading-weight-medium;
   @apply text-muted-800 dark:text-muted-100;
 }
 @utility nui-toast-subtitle {

package/lib/css/tooltip.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-tooltip */
 
 [data-nui-tooltip] {

package/lib/index.css

@@ -58,3 +58,7 @@
 @import './css/theme-toggle.css';
 @import './css/toast.css';
 @import './css/tooltip.css';
+
+.dark {
+  color-scheme: dark;
+}

package/lib/theme.css

@@ -1,8 +1,8 @@
 @theme {
-  /* --font-family-sans: 'Titillium Web', sans-serif; */
-  /* --font-family-mono: 'Titillium Web', sans-serif; */
-  --font-family-alt: var(--font-family-sans);
-  --font-family-heading: var(--font-family-sans);
+  /* --font-sans: 'Titillium Web', sans-serif; */
+  /* --font-mono: 'Titillium Web', sans-serif; */
+  --font-alt: var(--font-sans);
+  --font-heading: var(--font-sans);
   
   /** Colors */
   --color-muted-50: var(--color-gray-50);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.6",
   "license": "MIT",
   "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
   "repository": {
@@ -35,6 +35,6 @@
   ],
   "dependencies": {
     "@tailwindcss/typography": "^0.5.15",
-    "tailwindcss": "4.0.0-beta.2"
+    "tailwindcss": "4.0.0-beta.6"
   }
 }