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

package/{src → lib}/css/accordion.css

@@ -2,20 +2,24 @@
 /* @utility nui-accordion */
 
 @utility nui-accordion {
-  &:not(:last-child) {
-    @apply border-b-0;
-  }
   @apply w-full block overflow-hidden;
   @apply bg-white dark:bg-muted-800;
   @apply hover:bg-muted-50/60 dark:hover:bg-muted-800/60;
   @apply border border-muted-300 dark:border-muted-700;
   @apply transition-colors duration-300;
 
+  &:not(:last-child) {
+    @apply border-b-0;
+  }
+  + .nui-accordion {
+    @apply !border-t-0;
+  }
+
   .nui-accordion-detail[open]:not(:first-child) {
     @apply border-t border-muted-300 dark:border-muted-700;
   }
 
-  .nui-accordion-detail .nui-accordion-dot {
+  .nui-accordion-detail .nui-accordion-dot-icon {
     @apply bg-muted-200 dark:bg-muted-700;
   }
 
@@ -24,11 +28,8 @@
       @apply px-4 py-3;
     }
   }
-
-  + .nui-accordion {
-    @apply !border-t-0;
-  }
 }
+
 @utility nui-accordion-summary {
   @apply cursor-pointer list-none outline-none;
 }
@@ -39,22 +40,22 @@
     @apply text-muted-800 dark:text-white;
   }
 }
-@utility nui-accordion-dot {
+@utility nui-accordion-dot-icon {
   @apply ms-2 h-3 w-3 rounded-full;
   @apply transition-colors duration-300;
 }
-@utility nui-icon-outer {
+@utility nui-accordion-icon-outer {
   @apply ms-2 flex items-center justify-center;
   @apply h-8 w-8 rounded-full;
   @apply border border-transparent dark:border-transparent;
   @apply bg-white dark:bg-muted-700/60;
   @apply transition-all duration-300;
 }
-@utility nui-chevron-icon {
+@utility nui-accordion-chevron-icon {
   @apply text-muted-400 h-4 w-4;
   @apply transition-transform duration-300;
 }
-@utility nui-plus-icon {
+@utility nui-accordion-plus-icon {
   @apply text-muted-400 h-4 w-4;
   @apply transition-transform duration-300;
 }
@@ -82,42 +83,42 @@
   @apply hover:bg-muted-100/60 dark:hover:bg-muted-950/60;
   @apply border border-muted-200 dark:border-muted-800;
 }
-@utility nui-dot-default {
+@utility nui-accordion-dot-default {
   .nui-accordion-detail[open] .nui-accordion-dot {
     @apply bg-muted-400 dark:bg-muted-700;
   }
 }
-@utility nui-dot-primary {
+@utility nui-accordion-dot-primary {
   .nui-accordion-detail[open] .nui-accordion-dot {
     @apply bg-primary-500 dark:bg-primary-500;
   }
 }
-@utility nui-dot-info {
+@utility nui-accordion-dot-info {
   .nui-accordion-detail[open] .nui-accordion-dot {
     @apply bg-info-500 dark:bg-info-500;
   }
 }
-@utility nui-dot-success {
+@utility nui-accordion-dot-success {
   .nui-accordion-detail[open] .nui-accordion-dot {
     @apply bg-success-500 dark:bg-success-500;
   }
 }
-@utility nui-dot-warning {
+@utility nui-accordion-dot-warning {
   .nui-accordion-detail[open] .nui-accordion-dot {
     @apply bg-warning-500 dark:bg-warning-500;
   }
 }
-@utility nui-dot-danger {
+@utility nui-accordion-dot-danger {
   .nui-accordion-detail[open] .nui-accordion-dot {
     @apply bg-danger-500 dark:bg-danger-500;
   }
 }
-@utility nui-dot-dark {
+@utility nui-accordion-dot-dark {
   .nui-accordion-detail[open] .nui-accordion-dot {
     @apply bg-muted-900 dark:bg-muted-100;
   }
 }
-@utility nui-dot-black {
+@utility nui-accordion-dot-black {
   .nui-accordion-detail[open] .nui-accordion-dot {
     @apply bg-black dark:bg-white;
   }

package/{src → lib}/css/avatar.css

@@ -25,7 +25,7 @@
 @utility nui-avatar-img {
   @apply object-cover;
   @apply h-full max-h-full w-full max-w-full;
-  @apply shadow-sm;
+  @apply shadow-xs;
 }
 @utility nui-avatar-text {
   @apply font-sans font-medium text-center uppercase;
@@ -132,10 +132,10 @@
   }
 
   &.nui-avatar-rounded-sm {
-    @apply rounded-sm;
+    @apply rounded-xs;
 
     .nui-avatar-inner {
-      @apply rounded-sm;
+      @apply rounded-xs;
     }
 
     .nui-avatar-dot {
@@ -144,10 +144,10 @@
   }
 
   &.nui-avatar-rounded-md {
-    @apply rounded;
+    @apply rounded-sm;
 
     .nui-avatar-inner {
-      @apply rounded;
+      @apply rounded-sm;
     }
 
     .nui-avatar-dot {
@@ -201,10 +201,10 @@
   }
 
   &.nui-avatar-rounded-sm {
-    @apply rounded-sm;
+    @apply rounded-xs;
 
     .nui-avatar-inner {
-      @apply rounded-sm;
+      @apply rounded-xs;
     }
 
     .nui-avatar-dot {
@@ -213,10 +213,10 @@
   }
 
   &.nui-avatar-rounded-md {
-    @apply rounded;
+    @apply rounded-sm;
 
     .nui-avatar-inner {
-      @apply rounded;
+      @apply rounded-sm;
     }
 
     .nui-avatar-dot {

package/{src → lib}/css/button-close.css

@@ -41,7 +41,7 @@
   }
 }
 @utility nui-button-close-rounded-sm {
-  @apply rounded;
+  @apply rounded-sm;
 }
 @utility nui-button-close-rounded-md {
   @apply rounded-md;

package/{src → lib}/css/button-icon.css

@@ -1,7 +1,7 @@
 /* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-button-icon */
 
-@utility nui-button-icon-icon {
+@utility nui-button-icon {
   @apply nui-focus relative inline-flex items-center justify-center space-x-1 leading-5 no-underline disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none;
   @apply font-sans text-sm font-normal;
   @apply transition-all duration-300;
@@ -19,7 +19,7 @@
   @apply h-14 w-14 p-4;
 }
 @utility nui-button-icon-rounded-sm {
-  @apply rounded;
+  @apply rounded-sm;
 }
 @utility nui-button-icon-rounded-md {
   @apply rounded-md;

package/{src → lib}/css/checkbox.css

@@ -5,7 +5,7 @@
   @apply relative inline-flex items-start gap-1;
 
   &.nui-checkbox-rounded-sm .nui-checkbox-outer, &.nui-checkbox-rounded-sm .nui-checkbox-inner {
-    @apply rounded;
+    @apply rounded-sm;
   }
 
   &.nui-checkbox-rounded-md .nui-checkbox-outer, &.nui-checkbox-rounded-md .nui-checkbox-inner {

package/{src → lib}/css/fullscreen-dropfile.css

@@ -5,7 +5,7 @@
   @apply block;
 }
 @utility nui-fullscreen-dropfile-outer {
-  @apply bg-muted-100/50 dark:bg-muted-800/20 fixed inset-0 z-40 backdrop-blur-sm transition-all hover:backdrop-blur-none;
+  @apply bg-muted-100/50 dark:bg-muted-800/20 fixed inset-0 z-40 backdrop-blur-xs transition-all hover:backdrop-blur-none;
 }
 @utility nui-fullscreen-dropfile-inner {
   @apply fixed inset-0 z-50;
@@ -14,7 +14,7 @@
     @apply flex h-full flex-1 items-center justify-center;
 
     .nui-fullscreen-dropfile-content {
-      @apply h-[230px] w-[500px] mx-auto flex flex-col items-center justify-center gap-6 drop-shadow-sm;
+      @apply h-[230px] w-[500px] mx-auto flex flex-col items-center justify-center gap-6 drop-shadow-xs;
       @apply bg-muted-100 dark:bg-muted-800;
       @apply rounded-md border-2 border-dashed border-muted-200 dark:border-muted-700;
 

package/{src → lib}/css/icon-box.css

@@ -12,7 +12,7 @@
   @apply h-8 w-8;
 
   &.nui-box-rounded-sm {
-    @apply rounded;
+    @apply rounded-sm;
   }
 
   &.nui-box-rounded-md {
@@ -27,7 +27,7 @@
   @apply h-10 w-10;
 
   &.nui-box-rounded-sm {
-    @apply rounded;
+    @apply rounded-sm;
   }
 
   &.nui-box-rounded-md {

package/{src → lib}/css/input.css

@@ -14,31 +14,31 @@
     }
   }
 
-  &:not(.nui-has-icon).nui-input-sm {
+  &:not(.nui-input-has-icon).nui-input-sm {
     .nui-input {
       @apply h-8 py-1 text-xs leading-4 px-2;
     }
   }
 
-  &:not(.nui-has-icon).nui-input-md {
+  &:not(.nui-input-has-icon).nui-input-md {
     .nui-input {
       @apply h-10 py-2 text-sm leading-5 px-3;
     }
   }
 
-  &:not(.nui-has-icon).nui-input-lg {
+  &:not(.nui-input-has-icon).nui-input-lg {
     .nui-input {
       @apply h-12 py-2 text-sm leading-5 px-4;
     }
   }
 
-  &:not(.nui-has-icon).nui-input-xl {
+  &:not(.nui-input-has-icon).nui-input-xl {
     .nui-input {
       @apply h-14 py-2 text-base leading-5 px-4;
     }
   }
 
-  &.nui-input-label-float:not(.nui-has-icon).nui-input-sm {
+  &.nui-input-label-float:not(.nui-input-has-icon).nui-input-sm {
     .nui-label-float {
       @apply start-3 -ms-3 -mt-7 text-xs;
     }
@@ -52,7 +52,7 @@
     }
   }
 
-  &.nui-input-label-float:not(.nui-has-icon).nui-input-md {
+  &.nui-input-label-float:not(.nui-input-has-icon).nui-input-md {
     .nui-label-float {
       @apply start-3 -ms-3 -mt-8 text-xs;
     }
@@ -66,7 +66,7 @@
     }
   }
 
-  &.nui-input-label-float:not(.nui-has-icon).nui-input-lg {
+  &.nui-input-label-float:not(.nui-input-has-icon).nui-input-lg {
     .nui-label-float {
       @apply start-3 -ms-3 -mt-9 text-xs;
     }
@@ -80,7 +80,7 @@
     }
   }
 
-  &.nui-input-label-float:not(.nui-has-icon).nui-input-xl {
+  &.nui-input-label-float:not(.nui-input-has-icon).nui-input-xl {
     .nui-label-float {
       @apply start-3 -ms-3 -mt-10 text-xs;
     }
@@ -308,42 +308,42 @@
     @apply !text-danger-500 dark:!text-danger-500;
   }
 }
-@utility nui-has-icon {
+@utility nui-input-has-icon {
   .nui-input {
     @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
   }
 }
-@utility nui-has-icon {
+@utility nui-input-has-icon {
   .nui-input {
     @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
   }
 }
-@utility nui-has-icon {
+@utility nui-input-has-icon {
   .nui-input {
     @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
   }
 }
-@utility nui-has-icon {
+@utility nui-input-has-icon {
   .nui-input {
     @apply h-14 py-2 text-base leading-5 pe-4 ps-[3.25rem];
   }
 }
-@utility nui-has-action {
+@utility nui-input-has-action {
   .nui-input {
     @apply pe-8;
   }
 }
-@utility nui-has-action {
+@utility nui-input-has-action {
   .nui-input {
     @apply pe-10;
   }
 }
-@utility nui-has-action {
+@utility nui-input-has-action {
   .nui-input {
     @apply pe-12;
   }
 }
-@utility nui-has-action {
+@utility nui-input-has-action {
   .nui-input {
     @apply pe-14;
   }

package/{src → lib}/css/kbd.css

@@ -12,7 +12,7 @@
   @apply shrink-0;
 }
 @utility nui-kbd-rounded-sm {
-  @apply rounded-sm;
+  @apply rounded-xs;
 }
 @utility nui-kbd-rounded-md {
   @apply rounded-md;

package/{src → lib}/css/list.css

@@ -2,6 +2,7 @@
 /* @utility nui-list */
 
 @utility nui-list {
+  @apply relative;
 }
 @utility nui-list-ul {
   @apply list-disc;

package/{src → lib}/css/message.css

@@ -24,15 +24,14 @@
   @apply nui-focus flex cursor-pointer items-center justify-center shrink-0 h-6 w-6 rounded-full;
   @apply text-muted-800 dark:text-muted-800;
   @apply transition-colors duration-200;
-
-  .nui-close-icon {
-    @apply h-4 w-4;
-  }
 }
-@utility nui-has-text {
+@utility nui-message-close-icon {
+  @apply h-4 w-4;
+}
+@utility nui-message-has-text {
   @apply py-2 ps-2 pe-6;
 }
-@utility nui-has-icon {
+@utility nui-message-has-icon {
   @apply py-1 ps-1 pe-6;
 }
 @utility nui-message-rounded-sm {

package/{src → lib}/css/pagination.css

@@ -65,7 +65,7 @@
     @apply text-primary-invert dark:text-primary-invert;
     @apply bg-primary-500 dark:bg-primary-500;
     @apply border-primary-500 dark:border-primary-500;
-    @apply shadow-sm shadow-primary-500/50 dark:shadow-primary-500/20;
+    @apply shadow-xs shadow-primary-500/50 dark:shadow-primary-500/20;
   }
 }
 @utility nui-pagination-dark {
@@ -73,7 +73,7 @@
     @apply text-muted-100 dark:text-muted-900;
     @apply bg-muted-900 dark:bg-muted-100;
     @apply border-muted-900 dark:border-muted-100;
-    @apply shadow-sm shadow-muted-300/30 dark:shadow-muted-800/20;
+    @apply shadow-xs shadow-muted-300/30 dark:shadow-muted-800/20;
   }
 }
 @utility nui-pagination-black {
@@ -81,7 +81,7 @@
     @apply text-white dark:text-black;
     @apply bg-black dark:bg-white;
     @apply border-black dark:border-white;
-    @apply shadow-sm shadow-muted-300/30 dark:shadow-muted-800/20;
+    @apply shadow-xs shadow-muted-300/30 dark:shadow-muted-800/20;
   }
 }
 @utility nui-pagination-ellipsis {

package/lib/css/placeload.css

@@ -0,0 +1,12 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-placeload */
+
+@utility nui-placeload {
+  position: relative;
+  background-position: 0 0;
+  background-image: linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%);
+  background-size: 1200px 104px;
+}
+.dark .nui-placeload {
+  background-image: linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%);
+}

package/{src → lib}/css/progress-circle.css

@@ -1,7 +1,7 @@
 /* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-progress-circle */
 
-@utility nui-progress-circle {
+/* @utility nui-progress-circle {
   @apply relative inline-flex items-center justify-center;
 
   circle:nth-child(2) {
@@ -15,4 +15,4 @@
   &.nui-progress-contrast circle:first-child {
     @apply text-muted-200 dark:text-muted-200 stroke-current;
   }
-}
+} */

package/{src → lib}/css/progress.css

@@ -5,7 +5,7 @@
   @apply relative w-full overflow-hidden;
 
   &.nui-progress-rounded-sm, &.nui-progress-rounded-sm .nui-progress-bar {
-    @apply rounded;
+    @apply rounded-sm;
   }
 
   &.nui-progress-rounded-md, &.nui-progress-rounded-md .nui-progress-bar {

package/{src → lib}/css/prose.css

@@ -2,7 +2,8 @@
 /* @utility nui-prose */
 
 @utility nui-prose {
-  @apply prose prose-primary prose-muted dark:prose-invert;
+  @apply prose dark:prose-invert;
+  /* @apply prose-primary prose-muted; */
   @apply prose-table:bg-white dark:prose-table:bg-muted-800;
   @apply prose-table:border-separate prose-table:border-spacing-0 prose-table:border prose-table:border-muted-200 dark:prose-table:border-muted-700;
   @apply prose-th:p-4 prose-td:p-4;

package/{src → lib}/css/tabs.css

@@ -17,42 +17,42 @@
   @apply text-sm;
   @apply transition-all duration-300;
 
-  &.nui-has-icon {
+  &.nui-tab-has-icon {
     @apply flex items-center gap-1;
   }
 }
-@utility nui-pill-item {
+@utility nui-tab-pill-item {
   @apply flex flex-col rounded-xl px-5 cursor-pointer;
   @apply text-center;
   @apply transition-all duration-300;
 
-  &:not(.nui-has-icon) {
+  &:not(.nui-tab-has-icon) {
     @apply flex items-center gap-1 py-2;
   }
 
-  &.nui-has-icon {
+  &.nui-tab-has-icon {
     @apply flex items-center gap-1 py-3;
   }
 }
 @utility nui-tabs-default {
   .nui-tab-item {
-    &:not(.nui-active) {
+    &:not(.nui-tab-active) {
       @apply border-transparent;
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
+    &.nui-tab-active {
       @apply border-muted-500 dark:border-muted-100;
       @apply text-muted-800 dark:text-muted-100;
     }
   }
 
-  .nui-pill-item {
-    &:not(.nui-active) {
+  .nui-tab-pill-item {
+    &:not(.nui-tab-active) {
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
+    &.nui-tab-active {
       @apply text-muted-800 dark:text-muted-100;
       @apply bg-white dark:bg-muted-800;
       @apply border border-muted-200 dark:border-muted-700;
@@ -62,23 +62,22 @@
 }
 @utility nui-tabs-primary {
   .nui-tab-item {
-    &:not(.nui-active) {
+    &:not(.nui-tab-active) {
       @apply border-transparent;
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
-      @apply border-primary-500 dark:border-primary-500;
-      @apply text-muted-800 dark:text-muted-100;
+    &.nui-tab-active {
+      @apply text-muted-800 dark:text-muted-100 border-primary-500 dark:border-primary-500;
     }
   }
 
-  .nui-pill-item {
-    &:not(.nui-active) {
+  .nui-tab-pill-item {
+    &:not(.nui-tab-active) {
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
+    &.nui-tab-active {
       @apply text-primary-invert dark:text-primary-invert;
       @apply !bg-primary-600 dark:!bg-primary-600;
       @apply shadow-lg bg-primary-500/50 dark:bg-primary-500/50;
@@ -86,24 +85,24 @@
   }
 }
 @utility nui-tabs-light {
-  .nui-tab-item {
+  .nui-tab-tab-item {
     &:not(.nui-active) {
       @apply border-transparent;
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
+    &.nui-tab-active {
       @apply border-muted-600 dark:border-muted-100;
       @apply text-muted-600 dark:text-muted-100;
     }
   }
 
-  .nui-pill-item {
-    &:not(.nui-active) {
+  .nui-tab-pill-item {
+    &:not(.nui-tab-active) {
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
+    &.nui-tab-active {
       @apply text-muted-700 dark:text-muted-100;
       @apply !bg-muted-100 dark:!bg-muted-800;
       @apply shadow-lg shadow-muted-500/30 dark:shadow-muted-800/50;
@@ -112,23 +111,23 @@
 }
 @utility nui-tabs-dark {
   .nui-tab-item {
-    &:not(.nui-active) {
+    &:not(.nui-tab-active) {
       @apply border-transparent;
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
+    &.nui-tab-active {
       @apply border-muted-900 dark:border-muted-100;
       @apply text-muted-900 dark:text-muted-100;
     }
   }
 
-  .nui-pill-item {
-    &:not(.nui-active) {
+  .nui-tab-pill-item {
+    &:not(.nui-tab-active) {
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
+    &.nui-tab-active {
       @apply text-muted-100 dark:text-muted-900;
       @apply !bg-muted-900 dark:!bg-muted-100;
       @apply shadow-lg shadow-muted-500/30 dark:shadow-muted-800/50;
@@ -137,23 +136,23 @@
 }
 @utility nui-tabs-black {
   .nui-tab-item {
-    &:not(.nui-active) {
+    &:not(.nui-tab-active) {
       @apply border-transparent;
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
+    &.nui-tab-active {
       @apply border-black dark:border-white;
       @apply text-black dark:text-white;
     }
   }
 
-  .nui-pill-item {
-    &:not(.nui-active) {
+  .nui-tab-pill-item {
+    &:not(.nui-tab-active) {
       @apply text-muted-400 dark:text-muted-400;
     }
 
-    &.nui-active {
+    &.nui-tab-active {
       @apply text-white dark:text-black;
       @apply !bg-black dark:!bg-white;
       @apply shadow-lg shadow-muted-500/30 dark:shadow-muted-800/50;

package/{src → lib}/css/tag.css

@@ -13,7 +13,7 @@
   @apply text-xs;
 }
 @utility nui-tag-rounded-sm {
-  @apply rounded;
+  @apply rounded-sm;
 }
 @utility nui-tag-rounded-md {
   @apply rounded-md;

package/{src → lib}/css/toast.css

@@ -21,7 +21,7 @@
 @utility nui-toast-icon-block {
   @apply h-16 w-16 flex items-center justify-center;
 }
-@utility nui-button-close {
+@utility nui-toast-button-close {
   @apply ms-auto;
 }
 @utility nui-toast-low-contrast {

package/{src → lib}/css/tooltip.css

@@ -97,23 +97,3 @@
 [data-nui-tooltip][data-nui-tooltip-position^='left']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='left']:hover::after,[data-nui-tooltip][data-nui-tooltip-position^='right']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='right']:hover::after,[data-nui-tooltip][data-nui-tooltip-position^='start']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='start']:hover::after,[data-nui-tooltip][data-nui-tooltip-position^='end']:hover::before,[data-nui-tooltip][data-nui-tooltip-position^='end']:hover::after,[data-nui-tooltip][data-nui-tooltip-position^='left']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='left']:focus-visible::after,[data-nui-tooltip][data-nui-tooltip-position^='right']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='right']:focus-visible::after,[data-nui-tooltip][data-nui-tooltip-position^='start']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='start']:focus-visible::after,[data-nui-tooltip][data-nui-tooltip-position^='end']:focus-visible::before,[data-nui-tooltip][data-nui-tooltip-position^='end']:focus-visible::after {
   @apply animate-nui-tooltip-y;
 }
-
-@utility animate-nui-tooltip-x {
-  animation: nui-tooltip-x 300ms ease-out forwards;
-}
-@utility animate-nui-tooltip-y {
-  animation: nui-tooltip-y 300ms ease-out forwards;
-}
-
-@keyframes nui-tooltip-x {
-  to {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-}
-@keyframes nui-tooltip-y {
-  to {
-    opacity: 1;
-    transform: translate(0, -50%);
-  }
-}

package/{src → lib}/index.css

@@ -4,43 +4,45 @@
 
 @import './css/accordion.css';
 @import './css/autocomplete.css';
-@import './css/avatar.css';
 @import './css/avatar-group.css';
+@import './css/avatar.css';
 @import './css/breadcrumb.css';
-@import './css/button.css';
 @import './css/button-action.css';
 @import './css/button-close.css';
 @import './css/button-group.css';
 @import './css/button-icon.css';
+@import './css/button.css';
 @import './css/card.css';
 @import './css/checkbox.css';
-@import './css/dropdown.css';
 @import './css/dropdown-divider.css';
 @import './css/dropdown-item.css';
+@import './css/dropdown.css';
 @import './css/focus.css';
 @import './css/fullscreen-dropfile.css';
 @import './css/heading.css';
 @import './css/icon-box.css';
-@import './css/input.css';
-@import './css/input-file.css';
 @import './css/input-file-regular.css';
+@import './css/input-file.css';
 @import './css/input-help-text.css';
 @import './css/input-number.css';
+@import './css/input.css';
 @import './css/kbd.css';
 @import './css/label.css';
 @import './css/link.css';
+@import './css/list.css';
 @import './css/listbox.css';
 @import './css/mark.css';
 @import './css/mask.css';
-@import './css/message.css';
 @import './css/message-text.css';
+@import './css/message.css';
 @import './css/modal.css';
 @import './css/pagination.css';
 @import './css/paragraph.css';
 @import './css/placeholder-page.css';
-@import './css/progress.css';
+@import './css/placeload.css';
 @import './css/progress-circle.css';
-/* @import './css/prose.css'; */
+@import './css/progress.css';
+@import './css/prose.css';
 @import './css/radio.css';
 @import './css/select.css';
 @import './css/slimscroll.css';
@@ -55,4 +57,4 @@
 @import './css/theme-switch.css';
 @import './css/theme-toggle.css';
 @import './css/toast.css';
-/* @import './css/tooltip.css'; */
+@import './css/tooltip.css';

package/{src → lib}/theme.css

@@ -77,4 +77,41 @@
   --color-danger-800: var(--color-rose-800);
   --color-danger-900: var(--color-rose-900);
   --color-danger-950: var(--color-rose-950);
+
+  --animate-nui-placeload: nui-placeload 1s linear infinite forwards;
+  --animate-nui-progress-indeterminate: nui-progress-indeterminate 3s linear infinite forwards;
+  --animate-nui-tooltip-x: nui-tooltip-x 300ms ease-out forwards;
+  --animate-nui-tooltip-y: nui-tooltip-y 300ms ease-out forwards;
+  
+  @keyframes nui-placeload {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+  @keyframes nui-progress-indeterminate {
+    0% {
+      margin-left: -100%;
+    }
+    60% {
+      margin-left: 100%;
+    }
+    100% {
+      margin-left: -100%;
+    }
+  }
+  @keyframes nui-tooltip-x {
+    to {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+  }
+  @keyframes nui-tooltip-y {
+    to {
+      opacity: 1;
+      transform: translate(0, -50%);
+    }
+  }
 }

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.4",
   "license": "MIT",
   "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
-  "repository": "shuriken-ui/tailwind",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shuriken-ui/shuriken-ui.git",
+    "directory": "packages/tailwind"
+  },
   "bugs": "https://github.com/shuriken-ui/tailwind/issues",
   "homepage": "https://github.com/shuriken-ui/tailwind",
   "keywords": [
@@ -19,62 +23,18 @@
     "module"
   ],
   "type": "module",
-  "main": "./src/index.css",
   "exports": {
-    ".": "./src/index.css",
-    "./theme.css": "./src/theme.css",
-    "./*.css": "./src/css/*.css"
+    ".": "./lib/index.css",
+    "./theme.css": "./lib/theme.css",
+    "./*.css": "./lib/css/*.css"
   },
   "files": [
-    "src/index.css",
-    "src/theme.css",
-    "src/css"
+    "lib/index.css",
+    "lib/theme.css",
+    "lib/css"
   ],
   "dependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.15",
-    "tailwindcss": "^4.0.0 || 4.0.0-alpha.31"
-  },
-  "devDependencies": {
-    "@open-wc/lit-helpers": "0.7.0",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-themes": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/web-components": "^8.4.2",
-    "@storybook/web-components-vite": "^8.4.2",
-    "@types/node": "22.9.0",
-    "@typescript-eslint/eslint-plugin": "^8.13.0",
-    "@vitest/coverage-v8": "^2.1.4",
-    "@vitest/ui": "^2.1.4",
-    "chromatic": "^11.16.5",
-    "defu": "^6.1.4",
-    "glob": "^11.0.0",
-    "jiti": "^2.4.0",
-    "jsdom": "^25.0.1",
-    "lit": "^3.2.1",
-    "npm-run-all": "^4.1.5",
-    "standard-version": "^9.5.0",
-    "storybook": "^8.4.2",
-    "typescript": "^5.6.3",
-    "unbuild": "^2.0.0",
-    "vitest": "^2.1.4",
-    "vitest-axe": "1.0.0-pre.2"
-  },
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "unbuild",
-    "build-storybook": "storybook build",
-    "lint": "run-s lint:eslint:fix lint:prettier:fix",
-    "lint:prettier": "prettier --check \"./**/*.(ts|css|scss|md)\"",
-    "lint:prettier:fix": "prettier --write \"./**/*.(ts|css|scss|md)\"",
-    "lint:eslint": "eslint -c .eslintrc.cjs --ext .ts .",
-    "lint:eslint:fix": "eslint -c .eslintrc.cjs --fix  --ext .ts .",
-    "test": "run-s lint:eslint lint:prettier test:vitest",
-    "test:vitest": "vitest",
-    "coverage": "vitest run --coverage",
-    "release": "run-s test release:*",
-    "release:standard-version": "standard-version",
-    "release:publish": "git push --follow-tags origin main && npm publish"
+    "tailwindcss": "4.0.0-beta.2"
   }
 }

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Css Ninja
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,109 +0,0 @@
-<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 
-
-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
-
-```bash
-pnpm install -D @shuriken-ui/tailwind
-```
-
-## Usage
-
-The simplest way to register Shuriken UI is to use `withShurikenUI` helper function.
-
-```ts
-// tailwind.config.ts
-import { withShurikenUI } from '@shuriken-ui/tailwind'
-
-export default withShurikenUI({
-  // your tailwind config
-  content: [],
-})
-```
-
-
-You can also direcly import the preset and use it in your config.
-
-```ts
-// tailwind.config.ts
-import type { Config } from 'tailwindcss'
-import preset from '@shuriken-ui/tailwind/preset'
-
-export default {
-  // your tailwind config, with the preset
-  content: [],
-  presets: [preset],
-} satisfies Config
-```
-
-
-Also, you can import only the components and utils you needs.
-
-```ts
-// tailwind.config.ts
-import type { Config } from 'tailwindcss'
-import { fontFamily } from 'tailwindcss/defaultTheme'
-import colors from 'tailwindcss/colors'
-
-import { input, button } from '@shuriken-ui/tailwind/plugins'
-
-export default {
-  // your tailwind config, with only the components you need
-  plugins: [input, button],
-  theme: {
-    fontFamily: {
-      sans: fontFamily.sans,
-      heading: fontFamily.sans,
-      alt: fontFamily.sans,
-      mono: fontFamily.mono,
-    },
-    extend: {
-      colors: {
-        primary: colors.violet,
-        'primary-invert': colors.white,
-        muted: colors.slate,
-        info: colors.sky,
-        success: colors.teal,
-        warning: colors.amber,
-        danger: colors.rose,
-      },
-    },
-  },
-} satisfies Config
-```
-
-## Customization
-
-Shuriken UI is fully customizable. You can override components by using the `theme` option.
-
-```ts
-export default withShurikenUI({
-  theme: {
-    extend: {
-      nui: {
-        // your customizations
-      },
-    },
-  },
-})
-```
-
-> note: Documentation is coming soon!

package/src/css/placeload.css

@@ -1,13 +0,0 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
-/* @utility nui-placeload */
-
-@utility nui-placeload {
-  position: relative;
-  background: linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%);
-  background-size: 1200px 104px;
-}
-.dark .nui-placeload {
-  position: relative;
-  background: linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%);
-  background-size: 1200px 104px;
-}