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

package/README.md

@@ -0,0 +1,55 @@
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/shuriken-ui/.github/assets/86636408/278e3026-1997-4e01-9457-20772adbce31">
+    <source media="(prefers-color-scheme: light)" srcset="https://github.com/shuriken-ui/.github/assets/86636408/06f9d8e2-38aa-45b2-b91e-1c891a20e271">
+    <img alt="Shuriken UI logo" src="https://github.com/shuriken-ui/.github/assets/86636408/06f9d8e2-38aa-45b2-b91e-1c891a20e271">
+  </picture>
+</p>
+
+
+<p align="center">
+  <a href="https://cssninja.io" title="Our official website">by <strong>cssninja.io</strong></a>
+</p>
+
+---
+
+## Shuriken UI - Tailwind CSS v4
+
+Shuriken UI is a free and open-source Tailwind CSS UI Kit. It is a collection of components and templates that you can use to build your next Tailwind CSS project.
+
+This package contains the Tailwind CSS preset, components, and shared utils like custom colors used in Shuriken UI.
+
+## Installation
+
+Install dependencies:
+
+```bash
+pnpm install -D @shuriken-ui/tailwind@next tailwindcss@next @tailwindcss/vite@next
+```
+
+Add tailwind plugin to your `vite.config.ts`:
+
+```ts
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [tailwindcss()],
+});
+```
+
+Reference Shuriken UI in your `tailwind.css` file:
+
+```css
+@import 'tailwindcss';
+@import '@shuriken-ui/tailwind';
+
+/* Register the dark mode variant (with .dark class) */
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Customize your theme here */
+}
+```
+
+> See the [theme.css](https://github.com/shuriken-ui/shuriken-ui/blob/main/packages/tailwind/lib/theme.css) file for a complete list of available variables you can customize.

package/lib/css/accordion.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-accordion */
 
 @utility nui-accordion {
@@ -84,42 +83,42 @@
   @apply border border-muted-200 dark:border-muted-800;
 }
 @utility nui-accordion-dot-default {
-  .nui-accordion-detail[open] .nui-accordion-dot {
+  .nui-accordion-detail[open] .nui-accordion-dot-icon {
     @apply bg-muted-400 dark:bg-muted-700;
   }
 }
 @utility nui-accordion-dot-primary {
-  .nui-accordion-detail[open] .nui-accordion-dot {
+  .nui-accordion-detail[open] .nui-accordion-dot-icon {
     @apply bg-primary-500 dark:bg-primary-500;
   }
 }
 @utility nui-accordion-dot-info {
-  .nui-accordion-detail[open] .nui-accordion-dot {
+  .nui-accordion-detail[open] .nui-accordion-dot-icon {
     @apply bg-info-500 dark:bg-info-500;
   }
 }
 @utility nui-accordion-dot-success {
-  .nui-accordion-detail[open] .nui-accordion-dot {
+  .nui-accordion-detail[open] .nui-accordion-dot-icon {
     @apply bg-success-500 dark:bg-success-500;
   }
 }
 @utility nui-accordion-dot-warning {
-  .nui-accordion-detail[open] .nui-accordion-dot {
+  .nui-accordion-detail[open] .nui-accordion-dot-icon {
     @apply bg-warning-500 dark:bg-warning-500;
   }
 }
 @utility nui-accordion-dot-danger {
-  .nui-accordion-detail[open] .nui-accordion-dot {
+  .nui-accordion-detail[open] .nui-accordion-dot-icon {
     @apply bg-danger-500 dark:bg-danger-500;
   }
 }
 @utility nui-accordion-dot-dark {
-  .nui-accordion-detail[open] .nui-accordion-dot {
+  .nui-accordion-detail[open] .nui-accordion-dot-icon {
     @apply bg-muted-900 dark:bg-muted-100;
   }
 }
 @utility nui-accordion-dot-black {
-  .nui-accordion-detail[open] .nui-accordion-dot {
+  .nui-accordion-detail[open] .nui-accordion-dot-icon {
     @apply bg-black dark:bg-white;
   }
 }

package/lib/css/autocomplete.css

@@ -1,100 +1,43 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-autocomplete */
 
 @utility nui-autocomplete {
   @apply w-full relative;
 
-  .nui-autocomplete-label, .nui-label-float {
+  .nui-autocomplete-label, .nui-autocomplete-label-float-label {
     @apply nui-label;
   }
 
   &:not(.nui-autocomplete-loading) {
-    .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
       @apply text-muted-300 dark:text-muted-600;
     }
   }
 
-  &:not(.nui-has-icon).nui-autocomplete-sm {
+  &:not(.nui-autocomplete-has-icon).nui-autocomplete-sm {
     .nui-autocomplete-input {
       @apply h-8 py-1 text-xs leading-4 px-2;
     }
   }
 
-  &:not(.nui-has-icon).nui-autocomplete-md {
+  &:not(.nui-autocomplete-has-icon).nui-autocomplete-md {
     .nui-autocomplete-input {
       @apply h-10 py-2 text-sm leading-5 px-3;
     }
   }
 
-  &:not(.nui-has-icon).nui-autocomplete-lg {
+  &:not(.nui-autocomplete-has-icon).nui-autocomplete-lg {
     .nui-autocomplete-input {
       @apply h-12 py-2 text-sm leading-5 px-4;
     }
   }
 
-  &:not(.nui-has-icon).nui-autocomplete-xl {
+  &:not(.nui-autocomplete-has-icon).nui-autocomplete-xl {
     .nui-autocomplete-input {
       @apply h-14 py-2 text-base leading-5 px-4;
     }
   }
-
-  &.nui-autocomplete-label-float:not(.nui-has-icon).nui-autocomplete-sm {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-7 text-xs;
-    }
-
-    .nui-autocomplete-input:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-7;
-    }
-
-    .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
-      @apply ms-0 mt-0;
-    }
-  }
-
-  &.nui-autocomplete-label-float:not(.nui-has-icon).nui-autocomplete-md {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-8 text-xs;
-    }
-
-    .nui-autocomplete-input:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-8 !text-xs;
-    }
-
-    .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
-
-  &.nui-autocomplete-label-float:not(.nui-has-icon).nui-autocomplete-lg {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-9 text-xs;
-    }
-
-    .nui-autocomplete-input:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-9 !text-xs;
-    }
-
-    .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
-
-  &.nui-autocomplete-label-float:not(.nui-has-icon).nui-autocomplete-xl {
-    .nui-label-float {
-      @apply start-3 -ms-3 -mt-10 text-xs;
-    }
-
-    .nui-autocomplete-input:focus-visible ~ .nui-label-float {
-      @apply !-ms-3 !-mt-10 !text-xs;
-    }
-
-    .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
 }
-@utility nui-label-float {
+@utility nui-autocomplete-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;
@@ -128,9 +71,9 @@
 @utility nui-autocomplete-input {
   @apply nui-focus w-full font-sans;
   @apply 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-autocomplete-label-float-label {
     @apply !text-primary-500 dark:!text-primary-500;
   }
 
@@ -152,10 +95,10 @@
     @apply w-4 h-4;
   }
 }
-@utility nui-autocomplete-placeload {
+@utility nui-autocomplete-placeload-wrapper {
   @apply absolute start-0 top-0 flex w-full items-center px-4;
 
-  .nui-placeload {
+  .nui-autocomplete-placeload {
     @apply h-3 w-full max-w-[75%] rounded;
   }
 }
@@ -185,7 +128,7 @@
     @apply h-4 w-4;
   }
 
-  &.nui-has-media {
+  &.nui-autocomplete-has-media {
     .nui-autocomplete-results-item-selected {
       @apply h-8 w-8;
     }
@@ -236,7 +179,7 @@
     @apply pb-1 text-xs;
   }
 
-  .nui-label-float {
+  .nui-autocomplete-label-float-label {
     @apply top-1.5;
   }
 
@@ -248,7 +191,7 @@
     }
   }
 
-  .nui-autocomplete-placeload {
+  .nui-autocomplete-placeload-wrapper {
     @apply h-8;
   }
 
@@ -261,7 +204,7 @@
     @apply pb-1 text-[0.825rem];
   }
 
-  .nui-label-float {
+  .nui-autocomplete-label-float-label {
     @apply top-2.5;
   }
 
@@ -273,7 +216,7 @@
     }
   }
 
-  .nui-autocomplete-placeload {
+  .nui-autocomplete-placeload-wrapper {
     @apply h-10;
   }
 
@@ -286,7 +229,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-label-float {
+  .nui-autocomplete-label-float-label {
     @apply top-3.5;
   }
 
@@ -298,7 +241,7 @@
     }
   }
 
-  .nui-autocomplete-placeload {
+  .nui-autocomplete-placeload-wrapper {
     @apply h-12;
   }
 
@@ -311,7 +254,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-label-float {
+  .nui-autocomplete-label-float-label {
     @apply top-[1.1rem];
   }
 
@@ -323,7 +266,7 @@
     }
   }
 
-  .nui-autocomplete-placeload {
+  .nui-autocomplete-placeload-wrapper {
     @apply h-14;
   }
 
@@ -411,7 +354,7 @@
     @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
   }
 
-  .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
+  .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
     @apply text-transparent;
   }
 
@@ -419,15 +362,6 @@
     @apply opacity-50;
   }
 }
-@utility nui-autocomplete-label-float {
-  .nui-autocomplete-input {
-    @apply placeholder:text-transparent dark:placeholder:text-transparent;
-  }
-
-  .nui-autocomplete-multiple .nui-autocomplete-multiple-list {
-    @apply mb-6;
-  }
-}
 @utility nui-autocomplete-error {
   .nui-autocomplete-input {
     @apply !border-danger-500 dark:!border-danger-500;
@@ -437,75 +371,150 @@
     @apply !text-danger-500 dark:!text-danger-500;
   }
 }
-@utility nui-has-icon {
-  .nui-autocomplete-input {
-    @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
+@utility nui-autocomplete-has-icon {
+  &.nui-autocomplete-sm {
+    .nui-autocomplete-input {
+      @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
+    }
   }
 }
-@utility nui-has-icon {
-  .nui-autocomplete-input {
-    @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
+@utility nui-autocomplete-has-icon {
+  &.nui-autocomplete-md {
+    .nui-autocomplete-input {
+      @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
+    }
   }
 }
-@utility nui-has-icon {
-  .nui-autocomplete-input {
-    @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
+@utility nui-autocomplete-has-icon {
+  &.nui-autocomplete-lg {
+    .nui-autocomplete-input {
+      @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
+    }
   }
 }
-@utility nui-has-icon {
-  .nui-autocomplete-input {
-    @apply h-14 py-2 text-base leading-5 pe-4 ps-12;
+@utility nui-autocomplete-has-icon {
+  &.nui-autocomplete-xl {
+    .nui-autocomplete-input {
+      @apply h-14 py-2 text-base leading-5 pe-4 ps-12;
+    }
   }
 }
 @utility nui-autocomplete-label-float {
-  .nui-label-float {
-    @apply start-8 -ms-8 -mt-7 text-xs;
+  .nui-autocomplete-input {
+    @apply placeholder:text-transparent! dark:placeholder:text-transparent!;
   }
 
-  .nui-autocomplete-input:focus-visible ~ .nui-label-float {
-    @apply !-ms-8 !-mt-7;
+  .nui-autocomplete-multiple .nui-autocomplete-multiple-list {
+    @apply mb-6;
   }
 
-  .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-0;
-  }
-}
-@utility nui-autocomplete-label-float {
-  .nui-label-float {
-    @apply start-10 -ms-10 -mt-8 text-xs;
-  }
 
-  .nui-autocomplete-input:focus-visible ~ .nui-label-float {
-    @apply !-ms-10 !-mt-8 !text-xs;
-  }
+  &:not(.nui-autocomplete-has-icon).nui-autocomplete-sm {
+    .nui-autocomplete-label-float-label {
+      @apply start-3 -ms-3 -mt-6 text-xs;
+    }
 
-  .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
-  }
-}
-@utility nui-autocomplete-label-float {
-  .nui-label-float {
-    @apply start-11 -ms-10 -mt-9 text-xs;
-  }
+    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float-label {
+      @apply !-ms-3 !-mt-6;
+    }
 
-  .nui-autocomplete-input:focus-visible ~ .nui-label-float {
-    @apply !-ms-10 !-mt-9 !text-xs;
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
+      @apply ms-0 mt-1;
+    }
   }
 
-  .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+  &:not(.nui-autocomplete-has-icon).nui-autocomplete-md {
+    .nui-autocomplete-label-float-label {
+      @apply start-3 -ms-3 -mt-7 text-xs;
+    }
+
+    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float-label {
+      @apply !-ms-3 !-mt-7 !text-xs;
+    }
+
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
-}
-@utility nui-autocomplete-label-float {
-  .nui-label-float {
-    @apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-xs;
+
+  &:not(.nui-autocomplete-has-icon).nui-autocomplete-lg {
+    .nui-autocomplete-label-float-label {
+      @apply start-3 -ms-3 -mt-8 text-xs;
+    }
+
+    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float-label {
+      @apply !-ms-3 !-mt-8 !text-xs;
+    }
+
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 
-  .nui-autocomplete-input:focus-visible ~ .nui-label-float {
-    @apply !-ms-[3.25rem] !-mt-10 !text-xs;
+  &:not(.nui-autocomplete-has-icon).nui-autocomplete-xl {
+    .nui-autocomplete-label-float-label {
+      @apply start-3 -ms-3 -mt-9 text-xs;
+    }
+
+    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float-label {
+      @apply !-ms-3 !-mt-9 !text-xs;
+    }
+
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 
-  .nui-autocomplete-input:placeholder-shown ~ .nui-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
+  &.nui-autocomplete-has-icon.nui-autocomplete-sm {
+    .nui-autocomplete-label-float-label {
+      @apply start-8 -ms-8 -mt-6 text-xs;
+    }
+  
+    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float-label {
+      @apply !-ms-8 !-mt-6;
+    }
+  
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
+      @apply ms-0 mt-1;
+    }
+  } 
+  &.nui-autocomplete-has-icon.nui-autocomplete-md {
+    .nui-autocomplete-label-float-label {
+      @apply start-10 -ms-10 -mt-7 text-xs;
+    }
+
+    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float-label {
+      @apply !-ms-10 !-mt-7 !text-xs;
+    }
+
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
+  } 
+  &.nui-autocomplete-has-icon.nui-autocomplete-lg {
+    .nui-autocomplete-label-float-label {
+      @apply start-11 -ms-10 -mt-8 text-xs;
+    }
+
+    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float-label {
+      @apply !-ms-10 !-mt-8 !text-xs;
+    }
+
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
+  } 
+  &.nui-autocomplete-has-icon.nui-autocomplete-xl {
+    .nui-autocomplete-label-float-label {
+      @apply start-[3.25rem] -ms-[3.25rem] -mt-9 text-xs;
+    }
+
+    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float-label {
+      @apply !-ms-[3.25rem] !-mt-9 !text-xs;
+    }
+
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
+      @apply ms-0 mt-1 text-[0.825rem];
+    }
   }
 }

package/lib/css/avatar-group.css

@@ -1,10 +1,9 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-avatar-group */
 
 @utility nui-avatar-group {
   @apply flex;
 }
-@utility nui-avatar-outer {
+@utility nui-avatar-group-outer {
   @apply relative flex shrink-0 items-center justify-center rounded-full;
   @apply bg-white dark:bg-muted-800;
   @apply transition-all duration-100 ease-in;
@@ -13,26 +12,26 @@
     @apply bg-primary-500/20 text-primary-500/20 !scale-90;
   }
 }
-@utility nui-avatar-count {
+@utility nui-avatar-group-count {
   @apply relative shrink-0 rounded-full;
   @apply bg-white dark:bg-muted-800;
   @apply transition-all duration-100 ease-in;
 
-  .nui-avatar-count-inner {
+  .nui-avatar-group-count-inner {
     @apply relative scale-90 inline-flex items-center justify-center rounded-full;
     @apply h-full w-full;
     @apply bg-muted-200 dark:bg-muted-700;
     @apply border border-white dark:border-muted-800;
   }
 
-  .nui-avatar-count-text {
+  .nui-avatar-group-count-text {
     @apply -ms-1 uppercase;
     @apply font-sans font-medium;
     @apply text-muted-500 dark:text-muted-300;
   }
 }
 @utility nui-avatar-group-xxs {
-  .nui-avatar-outer {
+  .nui-avatar-group-outer {
     @apply h-6 w-6;
 
     &:first-child {
@@ -44,16 +43,16 @@
     }
   }
 
-  .nui-avatar-count {
+  .nui-avatar-group-count {
     @apply -ms-2 h-6 w-6;
 
-    .nui-avatar-count-text {
+    .nui-avatar-group-count-text {
       @apply text-xs;
     }
   }
 }
 @utility nui-avatar-group-xs {
-  .nui-avatar-outer {
+  .nui-avatar-group-outer {
     @apply h-8 w-8;
 
     &:first-child {
@@ -65,16 +64,16 @@
     }
   }
 
-  .nui-avatar-count {
+  .nui-avatar-group-count {
     @apply -ms-2 h-8 w-8;
 
-    .nui-avatar-count-text {
+    .nui-avatar-group-count-text {
       @apply text-sm;
     }
   }
 }
 @utility nui-avatar-group-sm {
-  .nui-avatar-outer {
+  .nui-avatar-group-outer {
     @apply h-10 w-10;
 
     &:first-child {
@@ -86,16 +85,16 @@
     }
   }
 
-  .nui-avatar-count {
+  .nui-avatar-group-count {
     @apply -ms-3 h-10 w-10;
 
-    .nui-avatar-count-text {
+    .nui-avatar-group-count-text {
       @apply text-sm;
     }
   }
 }
 @utility nui-avatar-group-md {
-  .nui-avatar-outer {
+  .nui-avatar-group-outer {
     @apply h-12 w-12;
 
     &:first-child {
@@ -107,16 +106,16 @@
     }
   }
 
-  .nui-avatar-count {
+  .nui-avatar-group-count {
     @apply -ms-4 h-12 w-12;
 
-    .nui-avatar-count-text {
+    .nui-avatar-group-count-text {
       @apply text-lg;
     }
   }
 }
 @utility nui-avatar-group-lg {
-  .nui-avatar-outer {
+  .nui-avatar-group-outer {
     @apply h-16 w-16;
 
     &:first-child {
@@ -128,10 +127,10 @@
     }
   }
 
-  .nui-avatar-count {
+  .nui-avatar-group-count {
     @apply -ms-5 h-16 w-16;
 
-    .nui-avatar-count-text {
+    .nui-avatar-group-count-text {
       @apply text-xl;
     }
   }