@shuriken-ui/tailwind 3.1.2 → 4.0.0-alpha.1

package/src/css/tag.css

@@ -0,0 +1,312 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-tag */
+
+@utility nui-tag {
+  @apply inline-block px-3 font-sans transition-all duration-300;
+}
+@utility nui-tag-sm {
+  @apply py-1;
+  @apply text-[0.65rem];
+}
+@utility nui-tag-md {
+  @apply py-1.5;
+  @apply text-xs;
+}
+@utility nui-tag-rounded-sm {
+  @apply rounded;
+}
+@utility nui-tag-rounded-md {
+  @apply rounded-md;
+}
+@utility nui-tag-rounded-lg {
+  @apply rounded-lg;
+}
+@utility nui-tag-rounded-full {
+  @apply rounded-full;
+}
+@utility nui-tag-solid {
+  &.nui-tag-default {
+    @apply text-muted-600 dark:text-muted-300;
+    @apply bg-white dark:bg-muted-800;
+    @apply border border-muted-300 dark:border-muted-700;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl;
+    }
+  }
+
+  &.nui-tag-default-contrast {
+    @apply text-muted-600 dark:text-muted-100;
+    @apply bg-white dark:bg-muted-950;
+    @apply border border-muted-300 dark:border-muted-800;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl;
+    }
+  }
+
+  &.nui-tag-muted {
+    @apply text-muted-500 dark:text-muted-200;
+    @apply bg-muted-100 dark:bg-muted-800;
+    @apply border border-muted-100 dark:border-muted-800;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl;
+    }
+  }
+
+  &.nui-tag-muted-contrast {
+    @apply text-muted-500 dark:text-muted-200;
+    @apply bg-muted-100 dark:bg-muted-950;
+    @apply border border-muted-100 dark:border-muted-950;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl;
+    }
+  }
+
+  &.nui-tag-light {
+    @apply text-muted-500 dark:text-muted-100;
+    @apply bg-muted-200 dark:bg-muted-700;
+    @apply border border-muted-200 dark:border-muted-700;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl;
+    }
+  }
+
+  &.nui-tag-dark {
+    @apply text-muted-100 dark:text-muted-900;
+    @apply bg-muted-900 dark:bg-muted-100;
+    @apply border border-muted-900 dark:border-muted-100;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl;
+    }
+  }
+
+  &.nui-tag-black {
+    @apply text-white dark:text-black;
+    @apply bg-black dark:bg-white;
+    @apply border border-black dark:border-white;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl;
+    }
+  }
+
+  &.nui-tag-primary {
+    @apply text-white dark:text-white;
+    @apply bg-primary-500 dark:bg-primary-500;
+    @apply border border-primary-500 dark:border-primary-500;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl shadow-primary-500/30 shadow-primary-500/20;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl hover:shadow-primary-500/30 hover:shadow-primary-500/20;
+    }
+  }
+
+  &.nui-tag-info {
+    @apply text-white dark:text-white;
+    @apply bg-info-500 dark:bg-info-500;
+    @apply border border-info-500 dark:border-info-500;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl shadow-info-500/30 shadow-info-500/20;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl hover:shadow-info-500/30 hover:shadow-info-500/20;
+    }
+  }
+
+  &.nui-tag-success {
+    @apply text-white dark:text-white;
+    @apply bg-success-500 dark:bg-success-500;
+    @apply border border-success-500 dark:border-success-500;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl shadow-success-500/30 shadow-success-500/20;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl hover:shadow-success-500/30 hover:shadow-success-500/20;
+    }
+  }
+
+  &.nui-tag-warning {
+    @apply text-white dark:text-white;
+    @apply bg-warning-500 dark:bg-warning-500;
+    @apply border border-warning-500 dark:border-warning-500;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl shadow-warning-500/30 shadow-warning-500/20;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl hover:shadow-warning-500/30 hover:shadow-warning-500/20;
+    }
+  }
+
+  &.nui-tag-danger {
+    @apply text-white dark:text-white;
+    @apply bg-danger-500 dark:bg-danger-500;
+    @apply border border-danger-500 dark:border-danger-500;
+
+    &.nui-tag-shadow {
+      @apply shadow-xl shadow-danger-500/30 shadow-danger-500/20;
+    }
+
+    &.nui-tag-shadow-hover {
+      @apply hover:shadow-xl hover:shadow-danger-500/30 hover:shadow-danger-500/20;
+    }
+  }
+}
+@utility nui-tag-pastel {
+  &.nui-tag-default, &.nui-tag-default-contrast {
+    @apply text-muted-500 dark:text-muted-100;
+    @apply bg-muted-100 dark:bg-muted-100/10;
+    @apply border border-muted-100 dark:border-muted-100/10;
+  }
+
+  &.nui-tag-muted, &.nui-tag-muted-contrast {
+    @apply text-muted-500 dark:text-muted-200;
+    @apply bg-muted-100 dark:bg-muted-800;
+    @apply border border-muted-100 dark:border-muted-800;
+  }
+
+  &.nui-tag-light {
+    @apply text-muted-800 dark:text-muted-100;
+    @apply bg-white/30 dark:bg-white/20;
+    @apply border border-white/30 dark:border-white/20;
+  }
+
+  &.nui-tag-dark {
+    @apply text-muted-100 dark:text-muted-900;
+    @apply bg-muted-900 dark:bg-muted-100;
+    @apply border border-muted-900 dark:border-muted-100;
+  }
+
+  &.nui-tag-black {
+    @apply text-white dark:text-black;
+    @apply bg-black dark:bg-white;
+    @apply border border-black dark:border-white;
+  }
+
+  &.nui-tag-primary {
+    @apply text-primary-500 dark:text-primary-500;
+    @apply bg-primary-500/20 dark:bg-primary-500/10;
+    @apply border border-primary-500/20 dark:border-primary-500/10;
+  }
+
+  &.nui-tag-info {
+    @apply text-info-500 dark:text-info-500;
+    @apply bg-info-500/20 dark:bg-info-500/10;
+    @apply border border-info-500/20 dark:border-info-500/10;
+  }
+
+  &.nui-tag-success {
+    @apply text-success-500 dark:text-success-500;
+    @apply bg-success-500/20 dark:bg-success-500/10;
+    @apply border border-success-500/20 dark:border-success-500/10;
+  }
+
+  &.nui-tag-warning {
+    @apply text-warning-500 dark:text-warning-500;
+    @apply bg-warning-500/20 dark:bg-warning-500/10;
+    @apply border border-warning-500/20 dark:border-warning-500/10;
+  }
+
+  &.nui-tag-danger {
+    @apply text-danger-500 dark:text-danger-500;
+    @apply bg-danger-500/20 dark:bg-danger-500/10;
+    @apply border border-danger-500/20 dark:border-danger-500/10;
+  }
+}
+@utility nui-tag-outline {
+  &.nui-tag-default, &.nui-tag-default-contrast {
+    @apply text-muted-500 dark:text-muted-100;
+    @apply border border-muted-500 dark:border-muted-100;
+  }
+
+  &.nui-tag-muted, &.nui-tag-muted-contrast {
+    @apply text-muted-400 dark:text-muted-100;
+    @apply border border-muted-400 dark:border-muted-100;
+  }
+
+  &.nui-tag-light {
+    @apply text-muted-100 dark:text-muted-100;
+    @apply border border-muted-100 dark:border-muted-100;
+  }
+
+  &.nui-tag-dark {
+    @apply text-muted-900 dark:text-muted-100;
+    @apply border border-muted-900 dark:border-muted-100;
+  }
+
+  &.nui-tag-black {
+    @apply text-black dark:text-white;
+    @apply border border-black dark:border-white;
+  }
+
+  &.nui-tag-primary {
+    @apply text-primary-500 dark:text-primary-500;
+    @apply border border-primary-500 dark:border-primary-500;
+    @apply bg-transparent dark:bg-transparent;
+  }
+
+  &.nui-tag-info {
+    @apply text-info-500 dark:text-info-500;
+    @apply border border-info-500 dark:border-info-500;
+    @apply bg-transparent dark:bg-transparent;
+  }
+
+  &.nui-tag-success {
+    @apply text-success-500 dark:text-success-500;
+    @apply border border-success-500 dark:border-success-500;
+    @apply bg-transparent dark:bg-transparent;
+  }
+
+  &.nui-tag-warning {
+    @apply text-warning-500 dark:text-warning-500;
+    @apply border border-warning-500 dark:border-warning-500;
+    @apply bg-transparent dark:bg-transparent;
+  }
+
+  &.nui-tag-danger {
+    @apply text-danger-500 dark:text-danger-500;
+    @apply border border-danger-500 dark:border-danger-500;
+    @apply bg-transparent dark:bg-transparent;
+  }
+}

package/src/css/text.css

@@ -0,0 +1,78 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-text */
+
+@utility nui-text {
+  @apply font-sans;
+}
+@utility nui-content-xs {
+  @apply text-xs;
+}
+@utility nui-content-sm {
+  @apply text-sm;
+}
+@utility nui-content-md {
+  @apply text-base;
+}
+@utility nui-content-lg {
+  @apply text-lg;
+}
+@utility nui-content-xl {
+  @apply text-xl;
+}
+@utility nui-content-2xl {
+  @apply text-2xl;
+}
+@utility nui-content-3xl {
+  @apply text-3xl;
+}
+@utility nui-content-4xl {
+  @apply text-4xl;
+}
+@utility nui-content-5xl {
+  @apply text-5xl;
+}
+@utility nui-content-6xl {
+  @apply text-6xl;
+}
+@utility nui-content-7xl {
+  @apply text-7xl;
+}
+@utility nui-content-8xl {
+  @apply text-8xl;
+}
+@utility nui-content-9xl {
+  @apply text-9xl;
+}
+@utility nui-weight-light {
+  @apply font-light;
+}
+@utility nui-weight-normal {
+  @apply font-normal;
+}
+@utility nui-weight-medium {
+  @apply font-medium;
+}
+@utility nui-weight-semibold {
+  @apply font-semibold;
+}
+@utility nui-weight-bold {
+  @apply font-bold;
+}
+@utility nui-weight-extrabold {
+  @apply font-extrabold;
+}
+@utility nui-lead-none {
+  @apply leading-none;
+}
+@utility nui-lead-normal {
+  @apply leading-normal;
+}
+@utility nui-lead-tight {
+  @apply leading-tight;
+}
+@utility nui-lead-snug {
+  @apply leading-snug;
+}
+@utility nui-lead-loose {
+  @apply leading-loose;
+}

package/src/css/textarea.css

@@ -0,0 +1,228 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-textarea */
+
+@utility nui-textarea-wrapper {
+  @apply relative;
+
+  .nui-textarea-label, .nui-label-float {
+    @apply nui-label;
+  }
+
+  &:not(.nui-textarea-loading) {
+    .nui-textarea:placeholder-shown ~ .nui-label-float {
+      @apply text-muted-300 dark:text-muted-600;
+    }
+  }
+
+  &:not(.nui-has-addon) {
+    .nui-textarea {
+      @apply p-2;
+    }
+  }
+}
+@utility nui-label-float {
+  @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-textarea-outer {
+  @apply relative flex flex-col;
+}
+@utility nui-textarea {
+  @apply nui-focus w-full enabled:cursor-text cursor-not-allowed;
+
+  &:focus-visible ~ .nui-label-float {
+    @apply !text-primary-500 dark:!text-primary-500;
+  }
+
+  &.nui-textarea-focus {
+    @apply focus:!border-primary-500 dark:focus:!border-primary-500;
+    @apply transition-colors duration-300;
+  }
+}
+@utility nui-textarea-placeload {
+  @apply absolute start-0 top-4 flex h-full w-full flex-col space-y-2 px-3;
+
+  .nui-placeload {
+    @apply h-3 w-full rounded;
+
+    &:first-child {
+      @apply max-w-[85%];
+    }
+
+    &:nth-child(2) {
+      @apply max-w-[65%];
+    }
+
+    &:nth-child(3) {
+      @apply max-w-[35%];
+    }
+  }
+}
+@utility nui-textarea-rounded-sm {
+  .nui-textarea {
+    @apply rounded-md;
+  }
+
+  .nui-textarea-addon {
+    @apply rounded-b-md;
+  }
+}
+@utility nui-textarea-rounded-md {
+  .nui-textarea {
+    @apply rounded-lg;
+  }
+
+  .nui-textarea-addon {
+    @apply rounded-b-lg;
+  }
+}
+@utility nui-textarea-rounded-lg {
+  .nui-textarea {
+    @apply rounded-xl;
+  }
+
+  .nui-textarea-addon {
+    @apply rounded-b-xl;
+  }
+}
+@utility nui-textarea-default {
+  .nui-textarea {
+    @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-textarea-default-contrast {
+  .nui-textarea {
+    @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-textarea-muted {
+  .nui-textarea {
+    @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-textarea-muted-contrast {
+  .nui-textarea {
+    @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-textarea-loading {
+  .nui-textarea {
+    @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
+  }
+
+  .nui-textarea:placeholder-shown ~ .nui-label-float {
+    @apply text-transparent;
+  }
+}
+@utility nui-textarea-label-float {
+  .nui-textarea {
+    @apply placeholder:text-transparent dark:placeholder:text-transparent;
+  }
+}
+@utility nui-textarea-error {
+  .nui-textarea {
+    @apply !border-danger-500 dark:!border-danger-500;
+  }
+}
+@utility nui-textarea-no-resize {
+  .nui-textarea {
+    @apply resize-none;
+  }
+}
+@utility nui-textarea-sm {
+  @apply min-h-[2rem] text-xs;
+
+  .nui-textarea-label {
+    @apply pb-1 text-xs;
+  }
+}
+@utility nui-textarea-md {
+  @apply min-h-[2.5rem] text-sm;
+
+  .nui-textarea-label {
+    @apply pb-1 text-sm;
+  }
+}
+@utility nui-textarea-lg {
+  @apply min-h-[3rem] text-sm;
+
+  .nui-textarea-label {
+    @apply pb-1 text-sm;
+  }
+}
+@utility nui-has-addon {
+  .nui-textarea {
+    @apply px-2 pb-14 pt-2;
+  }
+
+  .nui-textarea-addon {
+    @apply absolute bottom-0 start-0 flex items-center justify-between;
+    @apply w-full h-12 p-2;
+    @apply bg-muted-50 dark:bg-muted-900/50;
+    @apply border border-muted-300 dark:border-muted-700;
+  }
+
+  .nui-textarea-addon-start {
+    @apply flex items-center gap-2;
+  }
+
+  .nui-textarea-addon-end {
+    @apply flex items-center justify-end gap-2;
+  }
+}
+@utility nui-textarea-label-float {
+  .nui-label-float {
+    @apply start-3 -ms-3 -mt-7 text-xs;
+  }
+
+  .nui-textarea:focus-visible ~ .nui-label-float {
+    @apply !-ms-3 !-mt-6;
+  }
+
+  .nui-textarea:placeholder-shown ~ .nui-label-float {
+    @apply ms-0 mt-[0.35rem];
+  }
+}
+@utility nui-textarea-label-float {
+  .nui-label-float {
+    @apply start-3 -ms-3 -mt-8 text-xs;
+  }
+
+  .nui-textarea:focus-visible ~ .nui-label-float {
+    @apply !-ms-3 !-mt-7 !text-xs;
+  }
+
+  .nui-textarea:placeholder-shown ~ .nui-label-float {
+    @apply ms-0 mt-2.5 text-[0.825rem];
+  }
+}
+@utility nui-textarea-label-float {
+  .nui-label-float {
+    @apply start-3 -ms-3 -mt-8 text-xs;
+  }
+
+  .nui-textarea:focus-visible ~ .nui-label-float {
+    @apply !-ms-3 !-mt-7 !text-xs;
+  }
+
+  .nui-textarea:placeholder-shown ~ .nui-label-float {
+    @apply ms-0 mt-3 text-[0.825rem];
+  }
+}

package/src/css/theme-switch.css

@@ -0,0 +1,65 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-theme-switch */
+
+@utility nui-theme-switch {
+  @apply relative block h-6 w-14 scale-[0.8] rounded-full;
+  @apply bg-muted-200 dark:bg-muted-700;
+
+  .nui-theme-switch-input:checked ~ .nui-theme-switch-inner {
+    @apply ms-[45%] rotate-[360deg];
+  }
+
+  .nui-theme-switch-input:not(:checked) ~ .nui-theme-switch-inner .nui-sun {
+    @apply block;
+  }
+
+  .nui-theme-switch-input:checked ~ .nui-theme-switch-inner .nui-sun {
+    @apply hidden;
+  }
+
+  .nui-theme-switch-input:not(:checked) ~ .nui-theme-switch-inner .nui-moon {
+    @apply hidden;
+  }
+
+  .nui-theme-switch-input:checked ~ .nui-theme-switch-inner .nui-moon {
+    @apply block;
+  }
+
+  &:not(nui-theme-switch-inverted) {
+    @apply ring-offset-muted-500 dark:ring-offset-muted-900;
+
+    .nui-theme-switch-inner {
+      @apply border border-muted-300 dark:border-muted-700;
+      @apply bg-white dark:bg-muted-800;
+    }
+  }
+}
+@utility nui-theme-switch-input {
+  @apply absolute start-0 top-0 z-10 h-full w-full cursor-pointer opacity-0;
+}
+@utility nui-theme-switch-inner {
+  @apply absolute -start-1 -top-2 -ms-1 flex items-center justify-center peer-checked:ms-[45%] peer-checked:rotate-[360deg];
+  @apply h-10 w-10 rounded-full;
+  @apply bg-white dark:bg-muted-900;
+  @apply border border-muted-200 dark:border-muted-800;
+  @apply transition-all duration-300;
+}
+@utility nui-sun {
+  @apply pointer-events-none;
+  @apply text-yellow-400 dark:text-yellow-400;
+  @apply h-6 w-6;
+  @apply transition-all duration-300;
+}
+@utility nui-moon {
+  @apply pointer-events-none;
+  @apply text-yellow-400 dark:text-yellow-400;
+  @apply h-6 w-6;
+  @apply transition-all duration-300;
+}
+@utility nui-theme-switch-inverted {
+  @apply ring-offset-muted-500 dark:ring-offset-muted-400;
+
+  .nui-theme-switch-inner {
+    @apply bg-primary-700 dark:bg-primary-700;
+  }
+}