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

package/lib/css/input.css

@@ -1,408 +0,0 @@
-/* @utility nui-input */
-
-@utility nui-input-wrapper {
-  @apply relative;
-
-  .nui-input-label, .nui-input-label-float-label {
-    @apply nui-label;
-  }
-
-  &:not(.nui-input-loading) {
-    .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-      @apply text-muted-300 dark:text-muted-600;
-    }
-  }
-
-  &:not(.nui-input-has-icon).nui-input-sm {
-    .nui-input {
-      @apply h-8 py-1 text-xs leading-4 px-2;
-    }
-  }
-
-  &.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-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-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];
-    }
-  }
-}
-@utility nui-input-label-float-label {
-  @apply h-5 absolute inline-flex items-center select-none pointer-events-none;
-  @apply font-sans text-primary-500 leading-none;
-  @apply transition-all duration-300;
-}
-@utility nui-input-outer {
-  @apply relative;
-}
-@utility nui-input-icon {
-  @apply absolute start-0 top-0 z-10 flex items-center justify-center;
-  @apply text-muted-400 dark:text-muted-400;
-  @apply transition-colors duration-300;
-}
-@utility nui-input {
-  @apply nui-focus w-full font-sans disabled:cursor-not-allowed disabled:opacity-75;
-  @apply transition-all duration-300 text-ellipsis;
-
-  &:focus-visible ~ .nui-input-label-float-label {
-    @apply !text-primary-500 dark:!text-primary-500;
-  }
-
-  &:focus-visible ~ .nui-input-icon {
-    @apply !text-primary-500 dark:!text-primary-500;
-  }
-
-  &:disabled ~ .nui-input-icon {
-    @apply cursor-not-allowed opacity-75;
-  }
-}
-@utility nui-input-placeload-wrapper {
-  @apply absolute start-0 top-0 flex w-full items-center px-4;
-
-  .nui-input-placeload {
-    @apply h-3 w-full max-w-[75%] rounded;
-  }
-}
-@utility nui-input-action {
-  @apply absolute end-0 top-0 flex items-center justify-center;
-  @apply text-muted-400 dark:text-muted-400;
-  @apply transition-colors duration-300;
-}
-@utility nui-input-rounded-sm {
-  .nui-input {
-    @apply rounded-md;
-  }
-}
-@utility nui-input-rounded-md {
-  .nui-input {
-    @apply rounded-lg;
-  }
-}
-@utility nui-input-rounded-lg {
-  .nui-input {
-    @apply rounded-xl;
-  }
-}
-@utility nui-input-rounded-full {
-  .nui-input {
-    @apply rounded-full;
-  }
-}
-@utility nui-input-sm {
-  .nui-input-label {
-    @apply pb-1 text-xs;
-  }
-
-  .nui-input-label-float-label {
-    @apply top-1.5;
-  }
-
-  .nui-input-icon, .nui-input-action {
-    @apply h-8 w-8;
-
-    .nui-input-icon-inner, .nui-input-action-inner {
-      @apply h-4 w-4;
-    }
-  }
-
-  .nui-input-placeload-wrapper {
-    @apply h-8;
-  }
-}
-@utility nui-input-md {
-  .nui-input-label {
-    @apply pb-1 text-[0.825rem];
-  }
-
-  .nui-input-label-float-label {
-    @apply top-2.5;
-  }
-
-  .nui-input-icon, .nui-input-action {
-    @apply h-10 w-10;
-
-    .nui-input-icon-inner, .nui-input-action-inner {
-      @apply h-[1.15rem] w-[1.15rem];
-    }
-  }
-
-  .nui-input-placeload-wrapper {
-    @apply h-10;
-  }
-}
-@utility nui-input-lg {
-  .nui-input-label {
-    @apply pb-1 text-sm;
-  }
-
-  .nui-input-label-float-label {
-    @apply top-3.5;
-  }
-
-  .nui-input-icon, .nui-input-action {
-    @apply h-12 w-12;
-
-    .nui-input-icon-inner, .nui-input-action-inner {
-      @apply h-5 w-5;
-    }
-  }
-
-  .nui-input-placeload-wrapper {
-    @apply h-12;
-  }
-}
-@utility nui-input-xl {
-  .nui-input-label {
-    @apply pb-1 text-sm;
-  }
-
-  .nui-input-label-float-label {
-    @apply top-[1.1rem];
-  }
-
-  .nui-input-icon, .nui-input-action {
-    @apply h-14 w-14;
-
-    .nui-input-icon-inner, .nui-input-action-inner {
-      @apply h-5 w-5;
-    }
-  }
-
-  .nui-input-placeload-wrapper {
-    @apply h-14;
-  }
-}
-@utility nui-input-default {
-  .nui-input {
-    @apply text-muted-600 dark:text-muted-200;
-    @apply placeholder:text-muted-300 dark:placeholder:text-muted-500;
-    @apply bg-white dark:bg-muted-900;
-    @apply border border-muted-300 dark:border-muted-700;
-    @apply hover:border-muted-300 dark:hover:border-muted-700;
-  }
-}
-@utility nui-input-default-contrast {
-  .nui-input {
-    @apply text-muted-600 dark:text-muted-200;
-    @apply placeholder:text-muted-300 dark:placeholder:text-muted-600;
-    @apply bg-white dark:bg-muted-950;
-    @apply border border-muted-300 dark:border-muted-800;
-    @apply hover:border-muted-300 dark:hover:border-muted-800;
-  }
-}
-@utility nui-input-muted {
-  .nui-input {
-    @apply text-muted-600 dark:text-muted-200;
-    @apply placeholder:text-muted-300 dark:placeholder:text-muted-500;
-    @apply bg-muted-100 dark:bg-muted-900;
-    @apply border border-muted-100 dark:border-muted-700;
-    @apply hover:border-muted-100 dark:hover:border-muted-700;
-  }
-}
-@utility nui-input-muted-contrast {
-  .nui-input {
-    @apply text-muted-600 dark:text-muted-200;
-    @apply placeholder:text-muted-300 dark:placeholder:text-muted-600;
-    @apply bg-muted-100 dark:bg-muted-950;
-    @apply border border-muted-100 dark:border-muted-800;
-    @apply hover:border-muted-100 dark:hover:border-muted-800;
-  }
-}
-@utility nui-input-focus {
-  .nui-input {
-    @apply focus:!border-primary-500 dark:focus:!border-primary-500;
-    @apply focus:hover:!border-primary-500 dark:focus:hover:!border-primary-500;
-  }
-}
-@utility nui-input-loading {
-  .nui-input {
-    @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
-  }
-
-  .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-    @apply text-transparent;
-  }
-
-  .nui-input-icon {
-    @apply opacity-0;
-  }
-}
-@utility nui-input-label-float {
-  .nui-input {
-    @apply placeholder:text-transparent dark:placeholder:text-transparent;
-  }
-}
-@utility nui-input-error {
-  .nui-input {
-    @apply !border-danger-500 dark:!border-danger-500;
-  }
-
-  .nui-input-icon {
-    @apply !text-danger-500 dark:!text-danger-500;
-  }
-}
-@utility nui-input-has-action {
-  &.nui-input-sm {
-    .nui-input {
-      @apply pe-8!;
-    }
-  }
-  &.nui-input-md {
-    .nui-input {
-      @apply pe-10!;
-    }
-  }
-  &.nui-input-lg {
-    .nui-input {
-      @apply pe-12!;
-    }
-  }
-  &.nui-input-xl {
-    .nui-input {
-      @apply pe-14!;
-    }
-  }
-}
-@utility nui-input-label-float {
-  &.nui-input-has-icon.nui-input-sm {
-    .nui-input-label-float-label {
-      @apply start-8 -ms-8 -mt-6 text-xs;
-    }
-
-    .nui-input:focus-visible ~ .nui-input-label-float-label {
-      @apply !-ms-8 !-mt-6;
-    }
-
-    .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-      @apply ms-0 mt-1;
-    }
-  }
-  &.nui-input-has-icon.nui-input-md {
-    .nui-input-label-float-label {
-      @apply start-10 -ms-10 -mt-7 text-xs;
-    }
-
-    .nui-input:focus-visible ~ .nui-input-label-float-label {
-      @apply !-ms-10 !-mt-7 !text-xs;
-    }
-
-    .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-      @apply ms-0 mt-1 text-[0.825rem];
-    }
-  }
-  &.nui-input-has-icon.nui-input-lg {
-    .nui-input-label-float-label {
-      @apply start-11 -ms-9 -mt-8 text-xs;
-    }
-
-    .nui-input:focus-visible ~ .nui-input-label-float-label {
-      @apply !-ms-11 !-mt-8 !text-xs;
-    }
-
-    .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-      @apply ms-0 mt-1 text-[0.825rem];
-    }
-  }
-  &.nui-input-has-icon.nui-input-xl {
-    .nui-input-label-float-label {
-      @apply start-[3.25rem] ms-[-3.25rem] -mt-9 text-xs;
-    }
-
-    .nui-input:focus-visible ~ .nui-input-label-float-label {
-      @apply !ms-[-3.25rem] !-mt-9 !text-xs;
-    }
-
-    .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-      @apply ms-0 mt-1 text-[0.825rem];
-    }
-  }
-
-  
-
-  &:not(.nui-input-has-icon).nui-input-sm {
-    .nui-input-label-float-label {
-      @apply start-3 -ms-3 -mt-6 text-xs;
-    }
-
-    .nui-input:focus-visible ~ .nui-input-label-float-label {
-      @apply !-ms-3 !-mt-6;
-    }
-
-    .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-      @apply ms-0 mt-1;
-    }
-  }
-
-  &:not(.nui-input-has-icon).nui-input-md {
-    .nui-input-label-float-label {
-      @apply start-3 -ms-3 -mt-7 text-xs;
-    }
-
-    .nui-input:focus-visible ~ .nui-input-label-float-label {
-      @apply !-ms-3 !-mt-7 !text-xs;
-    }
-
-    .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-      @apply ms-0 mt-1 text-[0.825rem];
-    }
-  }
-
-  &:not(.nui-input-has-icon).nui-input-lg {
-    .nui-input-label-float-label {
-      @apply start-3 -ms-3 -mt-8 text-xs;
-    }
-
-    .nui-input:focus-visible ~ .nui-input-label-float-label {
-      @apply !-ms-3 !-mt-8 !text-xs;
-    }
-
-    .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-      @apply ms-0 mt-1 text-[0.825rem];
-    }
-  }
-
-  &:not(.nui-input-has-icon).nui-input-xl {
-    .nui-input-label-float-label {
-      @apply start-3 -ms-3 -mt-9 text-xs;
-    }
-
-    .nui-input:focus-visible ~ .nui-input-label-float-label {
-      @apply !-ms-3 !-mt-9 !text-xs;
-    }
-
-    .nui-input:placeholder-shown ~ .nui-input-label-float-label {
-      @apply ms-0 mt-1 text-[0.825rem];
-    }
-  }
-}

package/lib/css/kbd.css

@@ -1,93 +0,0 @@
-/* @utility nui-kbd */
-
-@utility nui-kbd {
-  @apply inline-flex items-center justify-center;
-  @apply font-mono leading-none text-muted-700 dark:text-muted-200;
-}
-@utility nui-kbd-icon-outer {
-  @apply inline-flex items-center justify-center;
-}
-@utility nui-kbd-icon {
-  @apply shrink-0;
-}
-@utility nui-kbd-rounded-sm {
-  @apply rounded-xs;
-}
-@utility nui-kbd-rounded-md {
-  @apply rounded-md;
-}
-@utility nui-kbd-rounded-lg {
-  @apply rounded-lg;
-}
-@utility nui-kbd-rounded-full {
-  @apply rounded-full;
-}
-@utility nui-kbd-xs {
-  @apply font-medium;
-  @apply min-h-[1.2em] min-w-[1.2em];
-  @apply px-1 py-0.5;
-  @apply leading-4 text-xs;
-
-  .nui-kbd-icon-outer {
-    @apply w-4 h-4;
-  }
-
-  .nui-kbd-icon-inner {
-    @apply w-3.5 h-3.5;
-  }
-}
-@utility nui-kbd-sm {
-  @apply min-h-[1.6em] min-w-[1.6em];
-  @apply px-1 py-0.5;
-  @apply leading-5 text-sm;
-
-  .nui-kbd-icon-outer {
-    @apply w-5 h-5;
-  }
-
-  .nui-kbd-icon-inner {
-    @apply w-3.5 h-3.5;
-  }
-}
-@utility nui-kbd-md {
-  @apply min-h-[2.2em] min-w-[2.2em];
-  @apply px-2 py-1;
-  @apply leading-6 text-base;
-
-  .nui-kbd-icon-outer {
-    @apply w-5 h-5;
-  }
-
-  .nui-kbd-icon-inner {
-    @apply w-4 h-4;
-  }
-}
-@utility nui-kbd-lg {
-  @apply min-h-[2.5em] min-w-[2.5em];
-  @apply px-4 py-1;
-  @apply leading-7 text-lg;
-
-  .nui-kbd-icon-outer {
-    @apply w-6 h-6;
-  }
-
-  .nui-kbd-icon-inner {
-    @apply w-5 h-5;
-  }
-}
-@utility nui-kbd-default {
-  @apply bg-white dark:bg-muted-800 border border-b-2;
-  @apply border-muted-500/20 dark:border-muted-300/20;
-}
-@utility nui-kbd-default-contrast {
-  @apply bg-white dark:bg-muted-950 border border-b-2;
-  @apply border-muted-500/20 dark:border-muted-400/20;
-}
-@utility nui-kbd-muted {
-  @apply bg-muted-50 dark:bg-muted-800 border border-b-2;
-  @apply border-muted-600/20 dark:border-muted-300/20;
-}
-@utility nui-kbd-muted-contrast {
-  @apply bg-muted-50 dark:bg-muted-950 border border-b-2;
-  @apply border-muted-600/20 dark:border-muted-400/20;
-}

package/lib/css/label.css

@@ -1,5 +0,0 @@
-/* @utility nui-label */
-
-@utility nui-label {
-  @apply inline-block font-sans leading-none text-muted-400 dark:text-muted-400/80;
-}

package/lib/css/link.css

@@ -1,7 +0,0 @@
-/* @utility nui-link */
-
-@utility nui-link {
-  @apply font-sans underline-offset-4 hover:underline focus:underline;
-  @apply hover:text-primary-500 dark:hover:text-primary-400;
-  @apply focus:text-primary-500 dark:focus:text-primary-400;
-}

package/lib/css/list.css

@@ -1,23 +0,0 @@
-/* @utility nui-list */
-
-@utility nui-list {
-  @apply relative;
-}
-@utility nui-list-ul {
-  @apply list-disc;
-}
-@utility nui-list-ol {
-  @apply list-decimal;
-}
-@utility nui-list-base {
-  @apply space-y-1 font-sans;
-  @apply text-muted-700 dark:text-muted-300;
-  @apply marker:text-muted-500 dark:marker:text-muted-400;
-}
-@utility nui-list-media {
-  @apply space-y-4 marker:text-muted-500 dark:marker:text-muted-400;
-
-  .nui-list-item {
-    @apply flex gap-2;
-  }
-}