@shuriken-ui/tailwind 3.1.3 → 4.0.0-alpha.2

package/src/css/breadcrumb.css

@@ -0,0 +1,63 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-breadcrumb */
+
+@utility nui-breadcrumb {
+  @apply block;
+}
+@utility nui-breadcrumb-list {
+  @apply mb-6 flex items-center font-sans text-[0.85rem];
+
+  .nui-breadcrumb-item-mobile {
+    @apply me-3 sm:hidden;
+  }
+
+  .nui-breadcrumb-item:not(:last-child) {
+    @apply hidden sm:flex;
+  }
+
+  .nui-breadcrumb-item:last-child {
+    @apply flex text-muted-500 dark:text-muted-400;
+  }
+
+  .nui-item-inner {
+    @apply text-[0.85rem] flex items-center gap-x-1;
+    @apply text-muted-500 dark:text-muted-400;
+    @apply transition-colors duration-300;
+
+    .nui-item-icon {
+      @apply flex items-center justify-center h-4 w-4 shrink-0;
+
+      &.nui-has-dot {
+        @apply text-xl;
+      }
+    }
+
+    .nui-item-text {
+      @apply text-muted-500 dark:text-muted-400 px-2;
+    }
+  }
+}
+@utility nui-breadcrumb-primary {
+  .nui-item-inner {
+    &.nui-has-link {
+      @apply hover:text-primary-500 focus:text-primary-500;
+      @apply dark:hover:text-primary-500 dark:focus:text-primary-500;
+    }
+  }
+}
+@utility nui-breadcrumb-dark {
+  .nui-item-inner {
+    &.nui-has-link {
+      @apply hover:text-muted-900 focus:text-muted-900;
+      @apply dark:hover:text-muted-100 dark:focus:text-muted-100;
+    }
+  }
+}
+@utility nui-breadcrumb-black {
+  .nui-item-inner {
+    &.nui-has-link {
+      @apply hover:text-black focus:text-black;
+      @apply dark:hover:text-white dark:focus:text-white;
+    }
+  }
+}

package/src/css/button-action.css

@@ -0,0 +1,108 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-button-action */
+
+@utility nui-button-action {
+  @apply nui-focus relative inline-flex items-center justify-center border leading-5 no-underline h-8 px-3 py-2 space-x-1;
+  @apply font-sans font-normal text-sm;
+  @apply disabled:opacity-60 disabled:cursor-not-allowed hover:enabled:shadow-none;
+  @apply transition-all duration-300;
+}
+@utility nui-button-action-rounded-sm {
+  @apply rounded-md;
+}
+@utility nui-button-action-rounded-md {
+  @apply rounded-lg;
+}
+@utility nui-button-action-rounded-lg {
+  @apply rounded-xl;
+}
+@utility nui-button-action-rounded-full {
+  @apply rounded-full;
+}
+@utility nui-button-action-loading {
+  @apply !text-transparent;
+}
+@utility nui-button-action-default {
+  @apply text-muted-700 dark:text-muted-100;
+  @apply bg-white dark:bg-muted-700;
+  @apply hover:enabled:bg-muted-50 dark:hover:enabled:bg-muted-600;
+  @apply active:enabled:bg-muted-100 dark:active:enabled:bg-muted-700;
+  @apply border-muted-300 dark:border-muted-600;
+}
+@utility nui-button-action-default-contrast {
+  @apply text-muted-700 dark:text-muted-100;
+  @apply bg-white dark:bg-muted-950;
+  @apply hover:enabled:bg-muted-50 dark:hover:enabled:bg-muted-900;
+  @apply active:enabled:bg-muted-100 dark:active:enabled:bg-muted-950;
+  @apply border-muted-300 dark:border-muted-800;
+}
+@utility nui-button-action-muted {
+  @apply text-muted-500 dark:text-muted-100;
+  @apply bg-muted-200 dark:bg-muted-700/40;
+  @apply hover:enabled:bg-muted-100 dark:hover:enabled:bg-muted-700/60;
+  @apply active:enabled:bg-muted-200/50 dark:active:enabled:bg-muted-800;
+  @apply border-muted-200 dark:border-muted-700/40;
+}
+@utility nui-button-action-muted-contrast {
+  @apply text-muted-500 dark:text-muted-100;
+  @apply bg-muted-200 dark:bg-muted-950;
+  @apply hover:enabled:bg-muted-100 dark:hover:enabled:bg-muted-900;
+  @apply active:enabled:bg-muted-200/50 dark:active:enabled:bg-muted-950;
+  @apply border-muted-200 dark:border-muted-800;
+}
+@utility nui-button-action-light {
+  @apply text-muted-500 dark:text-muted-100;
+  @apply bg-muted-200 dark:bg-muted-700;
+  @apply hover:enabled:bg-muted-100 dark:hover:enabled:bg-muted-600;
+  @apply active:enabled:bg-muted-200 dark:active:enabled:bg-muted-700;
+  @apply border-muted-200 dark:border-muted-700;
+}
+@utility nui-button-action-dark {
+  @apply text-muted-100 dark:text-muted-900;
+  @apply bg-muted-900 dark:bg-muted-100;
+  @apply hover:enabled:bg-muted-800 dark:hover:enabled:bg-muted-50;
+  @apply active:enabled:bg-muted-900 dark:active:enabled:bg-muted-100;
+  @apply border-muted-900 dark:border-muted-100;
+}
+@utility nui-button-action-black {
+  @apply text-white dark:text-black;
+  @apply bg-black dark:bg-white;
+  @apply hover:enabled:bg-muted-800 dark:hover:enabled:bg-white/90;
+  @apply active:enabled:bg-black dark:active:enabled:bg-white;
+  @apply border-black dark:border-white;
+}
+@utility nui-button-action-primary {
+  @apply text-white dark:text-white;
+  @apply bg-primary-500 dark:bg-primary-500;
+  @apply hover:enabled:bg-primary-400 dark:hover:enabled:bg-primary-400;
+  @apply active:enabled:bg-primary-500 dark:active:enabled:bg-primary-500;
+  @apply border-primary-500 dark:border-primary-500;
+}
+@utility nui-button-action-info {
+  @apply text-white dark:text-white;
+  @apply bg-info-500 dark:bg-info-500;
+  @apply hover:enabled:bg-info-400 dark:hover:enabled:bg-info-400;
+  @apply active:enabled:bg-info-500 dark:active:enabled:bg-info-500;
+  @apply border-info-500 dark:border-info-500;
+}
+@utility nui-button-action-success {
+  @apply text-white dark:text-white;
+  @apply bg-success-500 dark:bg-success-500;
+  @apply hover:enabled:bg-success-400 dark:hover:enabled:bg-success-400;
+  @apply active:enabled:bg-success-500 dark:active:enabled:bg-success-500;
+  @apply border-success-500 dark:border-success-500;
+}
+@utility nui-button-action-warning {
+  @apply text-white dark:text-white;
+  @apply bg-warning-500 dark:bg-warning-500;
+  @apply hover:enabled:bg-warning-400 dark:hover:enabled:bg-warning-400;
+  @apply active:enabled:bg-warning-500 dark:active:enabled:bg-warning-500;
+  @apply border-warning-500 dark:border-warning-500;
+}
+@utility nui-button-action-danger {
+  @apply text-white dark:text-white;
+  @apply bg-danger-500 dark:bg-danger-500;
+  @apply hover:enabled:bg-danger-400 dark:hover:enabled:bg-danger-400;
+  @apply active:enabled:bg-danger-500 dark:active:enabled:bg-danger-500;
+  @apply border-danger-500 dark:border-danger-500;
+}

package/src/css/button-close.css

@@ -0,0 +1,117 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-button-close */
+
+@utility nui-button-close {
+  @apply nui-focus flex items-center justify-center disabled:opacity-30 cursor-pointer;
+  @apply transition-colors duration-300;
+}
+@utility nui-button-close-xs {
+  @apply h-6 w-6;
+
+  .nui-button-close-icon {
+    @apply h-3 w-3 fill-current;
+  }
+}
+@utility nui-button-close-sm {
+  @apply h-8 w-8;
+
+  .nui-button-close-icon {
+    @apply h-4 w-4 fill-current;
+  }
+}
+@utility nui-button-close-md {
+  @apply h-10 w-10;
+
+  .nui-button-close-icon {
+    @apply h-4 w-4 fill-current;
+  }
+}
+@utility nui-button-close-lg {
+  @apply h-12 w-12;
+
+  .nui-button-close-icon {
+    @apply h-5 w-5 fill-current;
+  }
+}
+@utility nui-button-close-xl {
+  @apply h-14 w-14;
+
+  .nui-button-close-icon {
+    @apply h-6 w-6 fill-current;
+  }
+}
+@utility nui-button-close-rounded-sm {
+  @apply rounded;
+}
+@utility nui-button-close-rounded-md {
+  @apply rounded-md;
+}
+@utility nui-button-close-rounded-lg {
+  @apply rounded-lg;
+}
+@utility nui-button-close-rounded-full {
+  @apply rounded-full;
+}
+@utility nui-button-close-default {
+  @apply text-muted-700 dark:text-muted-50;
+  @apply bg-transparent dark:bg-transparent;
+  @apply hover:bg-muted-100 dark:hover:bg-muted-700;
+  @apply focus-visible:bg-muted-100 dark:focus-visible:bg-muted-700;
+  @apply active:enabled:bg-transparent dark:active:enabled:bg-transparent;
+}
+@utility nui-button-close-default-contrast {
+  @apply text-muted-700 dark:text-muted-50;
+  @apply bg-transparent dark:bg-transparent;
+  @apply hover:bg-muted-100 dark:hover:bg-muted-900;
+  @apply focus-visible:bg-muted-100 dark:focus-visible:bg-muted-900;
+  @apply active:enabled:bg-transparent dark:active:enabled:bg-transparent;
+}
+@utility nui-button-close-muted {
+  @apply text-muted-700 dark:text-muted-50;
+  @apply bg-muted-100 dark:bg-muted-700;
+  @apply hover:bg-muted-50 dark:hover:bg-muted-600;
+  @apply focus-visible:bg-muted-50 dark:focus-visible:bg-muted-600;
+  @apply active:enabled:bg-muted-100 dark:active:enabled:bg-muted-700;
+}
+@utility nui-button-close-muted-contrast {
+  @apply text-muted-700 dark:text-muted-50;
+  @apply bg-muted-100 dark:bg-muted-950;
+  @apply hover:bg-muted-50 dark:hover:bg-muted-900;
+  @apply focus-visible:bg-muted-50 dark:focus-visible:bg-muted-900;
+  @apply active:enabled:bg-muted-100 dark:active:enabled:bg-muted-950;
+}
+@utility nui-button-close-primary {
+  @apply text-primary-500 dark:text-primary-500;
+  @apply bg-primary-500/10 dark:bg-primary-500/10;
+  @apply hover:bg-primary-500/20 dark:hover:bg-primary-500/20;
+  @apply focus-visible:bg-primary-500/20 dark:focus-visible:bg-primary-500/20;
+  @apply active:enabled:bg-primary-500/10 dark:active:enabled:bg-primary-500/10;
+}
+@utility nui-button-close-info {
+  @apply text-info-500 dark:text-info-500;
+  @apply bg-info-500/10 dark:bg-info-500/10;
+  @apply hover:bg-info-500/20 dark:hover:bg-info-500/20;
+  @apply focus-visible:bg-info-500/20 dark:focus-visible:bg-info-500/20;
+  @apply active:enabled:bg-info-500/10 dark:active:enabled:bg-info-500/10;
+}
+@utility nui-button-close-success {
+  @apply text-success-500 dark:text-success-500;
+  @apply bg-success-500/10 dark:bg-success-500/10;
+  @apply hover:bg-success-500/20 dark:hover:bg-success-500/20;
+  @apply focus-visible:bg-success-500/20 dark:focus-visible:bg-success-500/20;
+  @apply active:enabled:bg-success-500/10 dark:active:enabled:bg-success-500/10;
+}
+@utility nui-button-close-warning {
+  @apply text-warning-500 dark:text-warning-500;
+  @apply bg-warning-500/10 dark:bg-warning-500/10;
+  @apply hover:bg-warning-500/20 dark:hover:bg-warning-500/20;
+  @apply focus-visible:bg-warning-500/20 dark:focus-visible:bg-warning-500/20;
+  @apply active:enabled:bg-warning-500/10 dark:active:enabled:bg-warning-500/10;
+}
+@utility nui-button-close-danger {
+  @apply text-danger-500 dark:text-danger-500;
+  @apply bg-danger-500/10 dark:bg-danger-500/10;
+  @apply hover:bg-danger-500/20 dark:hover:bg-danger-500/20;
+  @apply focus-visible:bg-danger-500/20 dark:focus-visible:bg-danger-500/20;
+  @apply active:enabled:bg-danger-500/10 dark:active:enabled:bg-danger-500/10;
+}

package/src/css/button-group.css

@@ -0,0 +1,236 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-button-group */
+
+@utility nui-button-group {
+  @apply flex;
+
+  > .nui-button:not(:only-child), > .nui-button-action:not(:only-child), > .nui-button-icon:not(:only-child) {
+    @apply !border-e-0;
+
+    &:focus {
+      @apply !z-10 relative;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      @apply !rounded-none;
+    }
+
+    &:first-child {
+      @apply !rounded-e-none;
+    }
+
+    &:last-child {
+      @apply !border-e !rounded-s-none;
+    }
+  }
+
+  .nui-input-wrapper:not(:first-child):not(:last-child) {
+    .nui-input {
+      @apply !border-e-0 !rounded-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-input-wrapper:first-child:not(:last-child) {
+    .nui-input {
+      @apply !border-e-0 !rounded-e-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-input-wrapper:last-child:not(:first-child) {
+    .nui-input {
+      @apply !border-e !rounded-s-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-input-number-wrapper:not(:first-child):not(:last-child) {
+    .nui-input-number {
+      @apply !border-e-0 !rounded-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-input-number-wrapper:first-child:not(:last-child) {
+    .nui-input-number {
+      @apply !border-e-0 !rounded-e-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-input-number-wrapper:last-child:not(:first-child) {
+    .nui-input-number {
+      @apply !border-e !rounded-s-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-input-file-regular:not(:first-child):not(:last-child) {
+    .nui-input-file-inner {
+      @apply !border-e-0 !rounded-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-input-file-regular:first-child:not(:last-child) {
+    .nui-input-file-inner {
+      @apply !border-e-0 !rounded-e-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-input-file-regular:last-child:not(:first-child) {
+    .nui-input-file-inner {
+      @apply !border-e !rounded-s-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-select-wrapper:not(:first-child):not(:last-child) {
+    .nui-select {
+      @apply !border-e-0 !rounded-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-select-wrapper:first-child:not(:last-child) {
+    .nui-select {
+      @apply !border-e-0 !rounded-e-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-select-wrapper:last-child:not(:first-child) {
+    .nui-select {
+      @apply !border-e !rounded-s-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-autocomplete:not(:first-child):not(:last-child) {
+    .nui-autocomplete-input {
+      @apply !border-e-0 !rounded-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-autocomplete:first-child:not(:last-child) {
+    .nui-autocomplete-input {
+      @apply !border-e-0 !rounded-e-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-autocomplete:last-child:not(:first-child) {
+    .nui-autocomplete-input {
+      @apply !border-e !rounded-s-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-dropdown:not(:first-child):not(:last-child) {
+    .nui-button {
+      @apply !border-e-0 !rounded-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-dropdown:first-child:not(:last-child) {
+    .nui-button {
+      @apply !border-e-0 !rounded-e-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-dropdown:last-child:not(:first-child) {
+    .nui-button {
+      @apply !border-e !rounded-s-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-listbox:not(:first-child):not(:last-child) {
+    .nui-listbox-button {
+      @apply !border-e-0 !rounded-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-listbox:first-child:not(:last-child) {
+    .nui-listbox-button {
+      @apply !border-e-0 !rounded-e-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+
+  .nui-listbox:last-child:not(:first-child) {
+    .nui-listbox-button {
+      @apply !border-e !rounded-s-none;
+
+      &:focus {
+        @apply !z-10 relative;
+      }
+    }
+  }
+}

package/src/css/button-icon.css

@@ -0,0 +1,97 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-button-icon */
+
+@utility nui-button-icon-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;
+}
+@utility nui-button-icon-sm {
+  @apply h-8 w-8 p-1;
+}
+@utility nui-button-icon-md {
+  @apply h-10 w-10 p-2;
+}
+@utility nui-button-icon-lg {
+  @apply h-12 w-12 p-3;
+}
+@utility nui-button-icon-xl {
+  @apply h-14 w-14 p-4;
+}
+@utility nui-button-icon-rounded-sm {
+  @apply rounded;
+}
+@utility nui-button-icon-rounded-md {
+  @apply rounded-md;
+}
+@utility nui-button-icon-rounded-lg {
+  @apply rounded-lg;
+}
+@utility nui-button-icon-rounded-full {
+  @apply rounded-full;
+}
+@utility nui-button-icon-loading {
+  @apply !text-transparent;
+}
+@utility nui-button-icon-default {
+  @apply text-muted-700 dark:text-muted-100;
+  @apply bg-white dark:bg-muted-700;
+  @apply hover:bg-muted-50 dark:hover:bg-muted-600;
+  @apply border border-muted-200 dark:border-muted-600;
+}
+@utility nui-button-icon-default-contrast {
+  @apply text-muted-700 dark:text-muted-100;
+  @apply bg-white dark:bg-muted-950;
+  @apply hover:bg-muted-50 dark:hover:bg-muted-900;
+  @apply border border-muted-300 dark:border-muted-800;
+}
+@utility nui-button-icon-muted {
+  @apply text-muted-500 dark:text-muted-100;
+  @apply bg-muted-200 dark:bg-muted-700;
+  @apply hover:bg-muted-100 dark:hover:bg-muted-600;
+}
+@utility nui-button-icon-muted-contrast {
+  @apply text-muted-500 dark:text-muted-100;
+  @apply bg-muted-200 dark:bg-muted-950;
+  @apply hover:bg-muted-100 dark:hover:bg-muted-900;
+}
+@utility nui-button-icon-light {
+  @apply text-muted-500 dark:text-muted-100;
+  @apply bg-muted-200 dark:bg-muted-700;
+  @apply hover:bg-muted-100 dark:hover:bg-muted-600;
+}
+@utility nui-button-icon-dark {
+  @apply text-muted-100 dark:text-muted-900;
+  @apply bg-muted-900 dark:bg-muted-100;
+  @apply hover:bg-muted-800 dark:hover:bg-muted-50;
+}
+@utility nui-button-icon-black {
+  @apply text-white dark:text-black;
+  @apply bg-black dark:bg-white;
+  @apply hover:bg-black/90 dark:hover:bg-white/90;
+}
+@utility nui-button-icon-primary {
+  @apply text-primary-500 dark:text-primary-500;
+  @apply bg-primary-500/20 dark:bg-primary-500/20;
+  @apply hover:bg-primary-500/10 dark:hover:bg-primary-500/10;
+}
+@utility nui-button-icon-info {
+  @apply text-info-500 dark:text-info-500;
+  @apply bg-info-500/20 dark:bg-info-500/20;
+  @apply hover:bg-info-500/10 dark:hover:bg-info-500/10;
+}
+@utility nui-button-icon-success {
+  @apply text-success-500 dark:text-success-500;
+  @apply bg-success-500/20 dark:bg-success-500/20;
+  @apply hover:bg-success-500/10 dark:hover:bg-success-500/10;
+}
+@utility nui-button-icon-warning {
+  @apply text-warning-500 dark:text-warning-500;
+  @apply bg-warning-500/20 dark:bg-warning-500/20;
+  @apply hover:bg-warning-500/10 dark:hover:bg-warning-500/10;
+}
+@utility nui-button-icon-danger {
+  @apply text-danger-500 dark:text-danger-500;
+  @apply bg-danger-500/20 dark:bg-danger-500/20;
+  @apply hover:bg-danger-500/10 dark:hover:bg-danger-500/10;
+}