@shuriken-ui/tailwind 4.0.0-alpha.5 → 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

@@ -83,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

@@ -3,12 +3,12 @@
 @utility nui-autocomplete {
   @apply w-full relative;
 
-  .nui-autocomplete-label, .nui-autocomplete-label-float {
+  .nui-autocomplete-label, .nui-autocomplete-label-float-label {
     @apply nui-label;
   }
 
   &:not(.nui-autocomplete-loading) {
-    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float {
+    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
       @apply text-muted-300 dark:text-muted-600;
     }
   }
@@ -36,64 +36,8 @@
       @apply h-14 py-2 text-base leading-5 px-4;
     }
   }
-
-  &.nui-autocomplete-label-float:not(.nui-autocomplete-has-icon).nui-autocomplete-sm {
-    .nui-autocomplete-label-float {
-      @apply start-3 -ms-3 -mt-7 text-xs;
-    }
-
-    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float {
-      @apply !-ms-3 !-mt-7;
-    }
-
-    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float {
-      @apply ms-0 mt-0;
-    }
-  }
-
-  &.nui-autocomplete-label-float:not(.nui-autocomplete-has-icon).nui-autocomplete-md {
-    .nui-autocomplete-label-float {
-      @apply start-3 -ms-3 -mt-8 text-xs;
-    }
-
-    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float {
-      @apply !-ms-3 !-mt-8 !text-xs;
-    }
-
-    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
-
-  &.nui-autocomplete-label-float:not(.nui-autocomplete-has-icon).nui-autocomplete-lg {
-    .nui-autocomplete-label-float {
-      @apply start-3 -ms-3 -mt-9 text-xs;
-    }
-
-    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float {
-      @apply !-ms-3 !-mt-9 !text-xs;
-    }
-
-    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
-
-  &.nui-autocomplete-label-float:not(.nui-autocomplete-has-icon).nui-autocomplete-xl {
-    .nui-autocomplete-label-float {
-      @apply start-3 -ms-3 -mt-10 text-xs;
-    }
-
-    .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-label-float {
-      @apply !-ms-3 !-mt-10 !text-xs;
-    }
-
-    .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float {
-      @apply ms-0 mt-0 text-[0.825rem];
-    }
-  }
 }
-@utility nui-autocomplete-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;
@@ -127,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-autocomplete-label-float {
+  &:focus-visible ~ .nui-autocomplete-label-float-label {
     @apply !text-primary-500 dark:!text-primary-500;
   }
 
@@ -151,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;
   }
 }
@@ -235,7 +179,7 @@
     @apply pb-1 text-xs;
   }
 
-  .nui-autocomplete-label-float {
+  .nui-autocomplete-label-float-label {
     @apply top-1.5;
   }
 
@@ -247,7 +191,7 @@
     }
   }
 
-  .nui-autocomplete-placeload {
+  .nui-autocomplete-placeload-wrapper {
     @apply h-8;
   }
 
@@ -260,7 +204,7 @@
     @apply pb-1 text-[0.825rem];
   }
 
-  .nui-autocomplete-label-float {
+  .nui-autocomplete-label-float-label {
     @apply top-2.5;
   }
 
@@ -272,7 +216,7 @@
     }
   }
 
-  .nui-autocomplete-placeload {
+  .nui-autocomplete-placeload-wrapper {
     @apply h-10;
   }
 
@@ -285,7 +229,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-autocomplete-label-float {
+  .nui-autocomplete-label-float-label {
     @apply top-3.5;
   }
 
@@ -297,7 +241,7 @@
     }
   }
 
-  .nui-autocomplete-placeload {
+  .nui-autocomplete-placeload-wrapper {
     @apply h-12;
   }
 
@@ -310,7 +254,7 @@
     @apply pb-1 text-sm;
   }
 
-  .nui-autocomplete-label-float {
+  .nui-autocomplete-label-float-label {
     @apply top-[1.1rem];
   }
 
@@ -322,7 +266,7 @@
     }
   }
 
-  .nui-autocomplete-placeload {
+  .nui-autocomplete-placeload-wrapper {
     @apply h-14;
   }
 
@@ -410,7 +354,7 @@
     @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
   }
 
-  .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float {
+  .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float-label {
     @apply text-transparent;
   }
 
@@ -418,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,74 +372,149 @@
   }
 }
 @utility nui-autocomplete-has-icon {
-  .nui-autocomplete-input {
-    @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
+  &.nui-autocomplete-sm {
+    .nui-autocomplete-input {
+      @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
+    }
   }
 }
 @utility nui-autocomplete-has-icon {
-  .nui-autocomplete-input {
-    @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
+  &.nui-autocomplete-md {
+    .nui-autocomplete-input {
+      @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
+    }
   }
 }
 @utility nui-autocomplete-has-icon {
-  .nui-autocomplete-input {
-    @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
+  &.nui-autocomplete-lg {
+    .nui-autocomplete-input {
+      @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
+    }
   }
 }
 @utility nui-autocomplete-has-icon {
-  .nui-autocomplete-input {
-    @apply h-14 py-2 text-base leading-5 pe-4 ps-12;
+  &.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-autocomplete-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-autocomplete-label-float {
-    @apply !-ms-8 !-mt-7;
+  .nui-autocomplete-multiple .nui-autocomplete-multiple-list {
+    @apply mb-6;
   }
 
-  .nui-autocomplete-input:placeholder-shown ~ .nui-autocomplete-label-float {
-    @apply ms-0 mt-0;
-  }
-}
-@utility nui-autocomplete-label-float {
-  .nui-autocomplete-label-float {
-    @apply start-10 -ms-10 -mt-8 text-xs;
-  }
 
-  .nui-autocomplete-input:focus-visible ~ .nui-autocomplete-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-autocomplete-label-float {
-    @apply ms-0 mt-0 text-[0.825rem];
-  }
-}
-@utility nui-autocomplete-label-float {
-  .nui-autocomplete-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-autocomplete-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-autocomplete-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-autocomplete-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-autocomplete-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-autocomplete-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/breadcrumb.css

@@ -26,7 +26,7 @@
     .nui-breadcrumb-item-icon {
       @apply flex items-center justify-center h-4 w-4 shrink-0;
 
-      &.nui-has-dot {
+      &.nui-breadcrumb-has-dot {
         @apply text-xl;
       }
     }
@@ -38,7 +38,7 @@
 }
 @utility nui-breadcrumb-primary {
   .nui-breadcrumb-item-inner {
-    &.nui-has-link {
+    &.nui-breadcrumb-has-link {
       @apply hover:text-primary-500 focus:text-primary-500;
       @apply dark:hover:text-primary-500 dark:focus:text-primary-500;
     }
@@ -46,7 +46,7 @@
 }
 @utility nui-breadcrumb-dark {
   .nui-breadcrumb-item-inner {
-    &.nui-has-link {
+    &.nui-breadcrumb-has-link {
       @apply hover:text-muted-900 focus:text-muted-900;
       @apply dark:hover:text-muted-100 dark:focus:text-muted-100;
     }
@@ -54,7 +54,7 @@
 }
 @utility nui-breadcrumb-black {
   .nui-breadcrumb-item-inner {
-    &.nui-has-link {
+    &.nui-breadcrumb-has-link {
       @apply hover:text-black focus:text-black;
       @apply dark:hover:text-white dark:focus:text-white;
     }

package/lib/css/input-file-regular.css

@@ -14,7 +14,7 @@
       @apply h-8 px-2;
     }
 
-    .nui-input-file-regular-placeload {
+    .nui-input-file-regular-placeload-wrapper {
       @apply top-2.5;
     }
   }
@@ -30,7 +30,7 @@
       @apply h-10 px-3;
     }
 
-    .nui-input-file-regular-placeload {
+    .nui-input-file-regular-placeload-wrapper {
       @apply top-3.5;
     }
   }
@@ -46,7 +46,7 @@
       @apply h-12 px-4;
     }
 
-    .nui-input-file-regular-placeload {
+    .nui-input-file-regular-placeload-wrapper {
       @apply top-[1.2rem];
     }
   }
@@ -62,7 +62,7 @@
       @apply h-14 px-5;
     }
 
-    .nui-input-file-regular-placeload {
+    .nui-input-file-regular-placeload-wrapper {
       @apply top-[1.4rem];
     }
   }
@@ -106,10 +106,10 @@
 @utility nui-input-file-regular-text {
   @apply ms-2 inline-flex truncate text-muted-400 dark:text-muted-400;
 }
-@utility nui-input-file-regular-placeload {
-  @apply absolute -end-8 flex w-[70%] items-center;
+@utility nui-input-file-regular-placeload-wrapper {
+  @apply absolute start-2 flex w-[70%] items-center;
 
-  .nui-placeload {
+  .nui-input-file-regular-placeload {
     @apply h-3 w-full max-w-[75%] rounded;
   }
 }
@@ -191,7 +191,7 @@
     @apply w-3 h-3;
   }
 
-  .nui-input-file-regular-placeload {
+  .nui-input-file-regular-placeload-wrapper {
     @apply top-2.5;
   }
 }
@@ -210,7 +210,7 @@
     @apply w-4 h-4;
   }
 
-  .nui-input-file-regular-placeload {
+  .nui-input-file-regular-placeload-wrapper {
     @apply top-3.5;
   }
 }
@@ -229,7 +229,7 @@
     @apply w-5 h-5;
   }
 
-  .nui-input-file-regular-placeload {
+  .nui-input-file-regular-placeload-wrapper {
     @apply top-[1.2rem];
   }
 }
@@ -248,7 +248,7 @@
     @apply w-6 h-6;
   }
 
-  .nui-input-file-regular-placeload {
+  .nui-input-file-regular-placeload-wrapper {
     @apply top-[1.4rem];
   }
 }