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

package/{src → lib}/css/input-help-text.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-input-help-text */
 
 @utility nui-input-help-text {

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-input-number */
 
 @utility nui-input-number-wrapper {

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-input */
 
 @utility nui-input-wrapper {
@@ -14,31 +13,52 @@
     }
   }
 
-  &: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 {
+  &.nui-input-has-icon.nui-input-sm {
+    .nui-input {
+      @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
+    }
+  }
+
+  &:not(.nui-input-has-icon).nui-input-md {
     .nui-input {
       @apply h-10 py-2 text-sm leading-5 px-3;
     }
   }
+  &.nui-input-has-icon.nui-input-md {
+    .nui-input {
+      @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
+    }
+  }
 
-  &: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;
     }
   }
+  &.nui-input-has-icon.nui-input-lg {
+    .nui-input {
+      @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
+    }
+  }
 
-  &: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-has-icon.nui-input-xl {
+    .nui-input {
+      @apply h-14 py-2 text-base leading-5 pe-4 ps-[3.25rem];
+    }
+  }
 
-  &.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 +72,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 +86,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 +100,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 +328,22 @@
     @apply !text-danger-500 dark:!text-danger-500;
   }
 }
-@utility nui-has-icon {
-  .nui-input {
-    @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
-  }
-}
-@utility nui-has-icon {
-  .nui-input {
-    @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
-  }
-}
-@utility nui-has-icon {
-  .nui-input {
-    @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
-  }
-}
-@utility nui-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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-kbd */
 
 @utility nui-kbd {
@@ -12,7 +11,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/label.css

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

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

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

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

@@ -1,7 +1,7 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-list */
 
 @utility nui-list {
+  @apply relative;
 }
 @utility nui-list-ul {
   @apply list-disc;

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

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

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

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

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

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

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-message-text */
 
 @utility nui-message-text {

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-message */
 
 @utility nui-message {
@@ -24,15 +23,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/modal.css

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

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-pagination */
 
 @utility nui-pagination {
@@ -65,7 +64,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 +72,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 +80,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/{src → lib}/css/paragraph.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-paragraph */
 
 @utility nui-paragraph {
@@ -43,36 +42,36 @@
 @utility nui-paragraph-9xl {
   @apply text-9xl;
 }
-@utility nui-weight-light {
+@utility nui-paragraph-weight-light {
   @apply font-light;
 }
-@utility nui-weight-normal {
+@utility nui-paragraph-weight-normal {
   @apply font-normal;
 }
-@utility nui-weight-medium {
+@utility nui-paragraph-weight-medium {
   @apply font-medium;
 }
-@utility nui-weight-semibold {
+@utility nui-paragraph-weight-semibold {
   @apply font-semibold;
 }
-@utility nui-weight-bold {
+@utility nui-paragraph-weight-bold {
   @apply font-bold;
 }
-@utility nui-weight-extrabold {
+@utility nui-paragraph-weight-extrabold {
   @apply font-extrabold;
 }
-@utility nui-lead-none {
+@utility nui-paragraph-lead-none {
   @apply leading-none;
 }
-@utility nui-lead-normal {
+@utility nui-paragraph-lead-normal {
   @apply leading-normal;
 }
-@utility nui-lead-tight {
+@utility nui-paragraph-lead-tight {
   @apply leading-tight;
 }
-@utility nui-lead-snug {
+@utility nui-paragraph-lead-snug {
   @apply leading-snug;
 }
-@utility nui-lead-loose {
+@utility nui-paragraph-lead-loose {
   @apply leading-loose;
 }

package/{src → lib}/css/placeholder-page.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-placeholder-page */
 
 @utility nui-placeholder-page {

package/lib/css/placeload.css

@@ -0,0 +1,11 @@
+/* @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,6 @@
-/* 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 +14,4 @@
   &.nui-progress-contrast circle:first-child {
     @apply text-muted-200 dark:text-muted-200 stroke-current;
   }
-}
+} */

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

@@ -1,11 +1,10 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-progress */
 
 @utility nui-progress {
   @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

@@ -1,8 +1,8 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @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/radio.css

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

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-select */
 
 @utility nui-select-wrapper {

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

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

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

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

package/{src → lib}/css/switch-ball.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-switch-ball */
 
 @utility nui-switch-ball {

package/{src → lib}/css/switch-thin.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-switch-thin */
 
 @utility nui-switch-thin {

package/{src → lib}/css/tab-slider.css

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-tab-slider */
 
 @utility nui-tab-slider {

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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-tabs */
 
 @utility nui-tabs {
@@ -17,42 +16,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 +61,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 +84,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 +110,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 +135,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

@@ -1,4 +1,3 @@
-/* generated using "pnpm jiti scripts/generate-utilities.ts" */
 /* @utility nui-tag */
 
 @utility nui-tag {
@@ -13,7 +12,7 @@
   @apply text-xs;
 }
 @utility nui-tag-rounded-sm {
-  @apply rounded;
+  @apply rounded-sm;
 }
 @utility nui-tag-rounded-md {
   @apply rounded-md;