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

package/lib/css/breadcrumb.css

@@ -1,62 +0,0 @@
-/* @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-breadcrumb-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-breadcrumb-item-icon {
-      @apply flex items-center justify-center h-4 w-4 shrink-0;
-
-      &.nui-has-dot {
-        @apply text-xl;
-      }
-    }
-
-    .nui-breadcrumb-item-text {
-      @apply text-muted-500 dark:text-muted-400 px-2;
-    }
-  }
-}
-@utility nui-breadcrumb-primary {
-  .nui-breadcrumb-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-breadcrumb-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-breadcrumb-item-inner {
-    &.nui-has-link {
-      @apply hover:text-black focus:text-black;
-      @apply dark:hover:text-white dark:focus:text-white;
-    }
-  }
-}

package/lib/css/button-action.css

@@ -1,107 +0,0 @@
-/* @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/lib/css/button-close.css

@@ -1,116 +0,0 @@
-/* @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-sm;
-}
-@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/lib/css/button-group.css

@@ -1,235 +0,0 @@
-/* @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/lib/css/button-icon.css

@@ -1,96 +0,0 @@
-/* @utility nui-button-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;
-}
-@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-sm;
-}
-@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;
-}