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

package/src/css/radio.css

@@ -0,0 +1,73 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-radio */
+
+@utility nui-radio {
+  @apply relative inline-flex items-start gap-1;
+}
+@utility nui-radio-outer {
+  @apply nui-focus relative flex items-center justify-center shrink-0 cursor-pointer overflow-hidden rounded-full;
+  @apply h-5 w-5;
+}
+@utility nui-radio-inner {
+  @apply absolute start-0 top-0 z-0 rounded-full;
+  @apply h-full w-full;
+  @apply bg-white dark:bg-muted-700;
+  @apply border-2 border-muted-400 dark:border-muted-600;
+}
+@utility nui-radio-dot {
+  @apply pointer-events-none z-10 block scale-0 rounded-full;
+  @apply h-1 w-1;
+  @apply bg-current dark:bg-current;
+  @apply transition-all duration-300;
+}
+@utility nui-radio-input {
+  @apply absolute z-20 h-5 w-5 cursor-pointer opacity-0;
+
+  &:checked ~ .nui-radio-inner {
+    @apply border-current;
+  }
+
+  &:checked ~ .nui-radio-dot {
+    @apply scale-100;
+  }
+}
+@utility nui-radio-label-wrapper {
+  @apply inline-flex flex-col;
+}
+@utility nui-radio-label-text {
+  @apply ms-1 cursor-pointer select-none;
+  @apply font-sans text-sm text-muted-400 dark:text-muted-400;
+}
+@utility nui-radio-error {
+  @apply ms-1 inline-block;
+}
+@utility nui-radio-default {
+  @apply text-muted-600 dark:text-muted-200;
+}
+@utility nui-radio-muted {
+  @apply text-muted-400 dark:text-muted-400;
+}
+@utility nui-radio-light {
+  @apply text-muted-100 dark:text-muted-100;
+}
+@utility nui-radio-dark {
+  @apply text-muted-900 dark:text-muted-100;
+}
+@utility nui-radio-black {
+  @apply text-black dark:text-white;
+}
+@utility nui-radio-primary {
+  @apply text-primary-500 dark:text-primary-500;
+}
+@utility nui-radio-info {
+  @apply text-info-500 dark:text-info-500;
+}
+@utility nui-radio-success {
+  @apply text-success-500 dark:text-muted-200;
+}
+@utility nui-radio-warning {
+  @apply text-warning-500 dark:text-warning-500;
+}
+@utility nui-radio-danger {
+  @apply text-danger-500 dark:text-danger-500;
+}

package/src/css/select.css

@@ -0,0 +1,404 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-select */
+
+@utility nui-select-wrapper {
+  @apply relative;
+
+  .nui-select-label, .nui-label-float {
+    @apply nui-label;
+  }
+
+  &:not(.nui-select-loading) {
+    .nui-select ~ .nui-label-float {
+      @apply text-transparent;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-select-sm {
+    .nui-select {
+      @apply h-8 py-1 text-xs leading-4 ps-2 pe-7;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-select-md {
+    .nui-select {
+      @apply h-10 py-2 text-sm leading-5 ps-3 pe-8;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-select-lg {
+    .nui-select {
+      @apply h-12 py-2 text-sm leading-5 ps-4 pe-9;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-select-xl {
+    .nui-select {
+      @apply h-14 py-2 text-base leading-5 ps-4 pe-9;
+    }
+  }
+
+  &.nui-select-label-float:not(.nui-has-icon).nui-select-sm {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-7 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-label-float {
+      @apply !-ms-3 !-mt-7;
+    }
+
+    .nui-select ~ .nui-label-float {
+      @apply ms-0 mt-0;
+    }
+  }
+
+  &.nui-select-label-float:not(.nui-has-icon).nui-select-md {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-8 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-label-float {
+      @apply !-ms-3 !-mt-8 !text-xs;
+    }
+
+    .nui-select ~ .nui-label-float {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
+  }
+
+  &.nui-select-label-float:not(.nui-has-icon).nui-select-lg {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-9 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-label-float {
+      @apply !-ms-3 !-mt-9 !text-xs;
+    }
+
+    .nui-select ~ .nui-label-float {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
+  }
+
+  &.nui-select-label-float:not(.nui-has-icon).nui-select-xl {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-10 text-xs;
+    }
+
+    .nui-select:focus-visible ~ .nui-label-float {
+      @apply !-ms-3 !-mt-10 !text-xs;
+    }
+
+    .nui-select ~ .nui-label-float {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
+  }
+}
+@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-select-outer {
+  @apply relative;
+}
+@utility nui-select-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-select {
+  @apply nui-focus appearance-none w-full font-sans disabled:cursor-not-allowed disabled:opacity-75;
+  @apply transition-all duration-300;
+
+  &:focus-visible ~ .nui-label-float {
+    @apply !text-primary-500 dark:!text-primary-500;
+  }
+
+  &:focus-visible ~ .nui-select-icon {
+    @apply !text-primary-500 dark:!text-primary-500;
+  }
+
+  &:focus-visible ~ .nui-select-chevron {
+    @apply rotate-180;
+  }
+
+  &:disabled ~ .nui-select-icon {
+    @apply cursor-not-allowed opacity-75;
+  }
+}
+@utility nui-select-placeload {
+  @apply absolute start-0 top-0 flex w-full items-center px-4;
+
+  .nui-placeload {
+    @apply h-3 w-full max-w-[75%] rounded;
+  }
+}
+@utility nui-select-chevron {
+  @apply pointer-events-none;
+  @apply absolute end-0 top-0 z-10 flex items-center justify-center;
+  @apply text-muted-400 dark:text-muted-400;
+  @apply transition-transform duration-300;
+}
+@utility nui-select-multiple {
+  .nui-select {
+    @apply p-2 h-32;
+  }
+}
+@utility nui-select-rounded-sm {
+  .nui-select {
+    @apply rounded-md;
+  }
+}
+@utility nui-select-rounded-md {
+  .nui-select {
+    @apply rounded-lg;
+  }
+}
+@utility nui-select-rounded-lg {
+  .nui-select {
+    @apply rounded-xl;
+  }
+}
+@utility nui-select-rounded-full {
+  .nui-select {
+    @apply rounded-full;
+  }
+}
+@utility nui-select-sm {
+  .nui-select {
+    @apply pe-8;
+  }
+
+  .nui-select-label {
+    @apply pb-1 text-xs;
+  }
+
+  .nui-label-float {
+    @apply top-1.5;
+  }
+
+  .nui-select-icon, .nui-select-chevron {
+    @apply h-8 w-8;
+
+    .nui-select-icon-inner, .nui-select-chevron-inner {
+      @apply h-4 w-4;
+    }
+  }
+
+  .nui-select-placeload {
+    @apply h-8;
+  }
+}
+@utility nui-select-md {
+  .nui-select {
+    @apply pe-10;
+  }
+
+  .nui-select-label {
+    @apply pb-1 text-[0.825rem];
+  }
+
+  .nui-label-float {
+    @apply top-2.5;
+  }
+
+  .nui-select-icon, .nui-select-chevron {
+    @apply h-10 w-10;
+
+    .nui-select-icon-inner, .nui-select-chevron-inner {
+      @apply h-[1.15rem] w-[1.15rem];
+    }
+  }
+
+  .nui-select-placeload {
+    @apply h-10;
+  }
+}
+@utility nui-select-lg {
+  .nui-select {
+    @apply pe-12;
+  }
+
+  .nui-select-label {
+    @apply pb-1 text-sm;
+  }
+
+  .nui-label-float {
+    @apply top-3.5;
+  }
+
+  .nui-select-icon, .nui-select-chevron {
+    @apply h-12 w-12;
+
+    .nui-select-icon-inner, .nui-select-chevron-inner {
+      @apply h-5 w-5;
+    }
+  }
+
+  .nui-select-placeload {
+    @apply h-12;
+  }
+}
+@utility nui-select-xl {
+  .nui-select {
+    @apply pe-14;
+  }
+
+  .nui-select-label {
+    @apply pb-1 text-sm;
+  }
+
+  .nui-label-float {
+    @apply top-[1.1rem];
+  }
+
+  .nui-select-icon, .nui-select-chevron {
+    @apply h-14 w-14;
+
+    .nui-select-icon-inner, .nui-select-chevron-inner {
+      @apply h-5 w-5;
+    }
+  }
+
+  .nui-select-placeload {
+    @apply h-14;
+  }
+}
+@utility nui-select-default {
+  .nui-select {
+    @apply text-muted-600 dark:text-muted-200;
+    @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-select-default-contrast {
+  .nui-select {
+    @apply text-muted-600 dark:text-muted-200;
+    @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-select-muted {
+  .nui-select {
+    @apply text-muted-600 dark:text-muted-200;
+    @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-select-muted-contrast {
+  .nui-select {
+    @apply text-muted-600 dark:text-muted-200;
+    @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-select-focus {
+  .nui-select {
+    @apply focus:!border-primary-500 dark:focus:!border-primary-500;
+    @apply focus:hover:!border-primary-500 dark:focus:hover:!border-primary-500;
+  }
+}
+@utility nui-select-loading {
+  .nui-select {
+    @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
+  }
+
+  .nui-select ~ .nui-label-float {
+    @apply text-transparent;
+  }
+
+  .nui-select-icon {
+    @apply opacity-0;
+  }
+}
+@utility nui-select-label-float {
+  .nui-select {
+    @apply placeholder:text-transparent dark:placeholder:text-transparent;
+  }
+}
+@utility nui-select-error {
+  .nui-select {
+    @apply !border-danger-500 dark:!border-danger-500;
+  }
+
+  .nui-select-icon {
+    @apply !text-danger-500 dark:!text-danger-500;
+  }
+}
+@utility nui-has-icon {
+  .nui-select {
+    @apply h-8 py-1 text-xs leading-4 pe-7 ps-8;
+  }
+}
+@utility nui-has-icon {
+  .nui-select {
+    @apply h-10 py-2 text-sm leading-5 pe-8 ps-10;
+  }
+}
+@utility nui-has-icon {
+  .nui-select {
+    @apply h-12 py-2 text-sm leading-5 pe-9 ps-11;
+  }
+}
+@utility nui-has-icon {
+  .nui-select {
+    @apply h-14 py-2 text-base leading-5 pe-9 ps-12;
+  }
+}
+@utility nui-select-label-float {
+  .nui-label-float {
+    @apply start-8 -ms-8 -mt-7 text-xs;
+  }
+
+  .nui-select:focus-visible ~ .nui-label-float {
+    @apply !-ms-8 !-mt-7;
+  }
+
+  .nui-select ~ .nui-label-float {
+    @apply ms-0 mt-0;
+  }
+}
+@utility nui-select-label-float {
+  .nui-label-float {
+    @apply start-10 -ms-10 -mt-8 text-xs;
+  }
+
+  .nui-select:focus-visible ~ .nui-label-float {
+    @apply !-ms-10 !-mt-8 !text-xs;
+  }
+
+  .nui-select ~ .nui-label-float {
+    @apply ms-0 mt-0 text-[0.825rem];
+  }
+}
+@utility nui-select-label-float {
+  .nui-label-float {
+    @apply start-11 -ms-10 -mt-9 text-xs;
+  }
+
+  .nui-select:focus-visible ~ .nui-label-float {
+    @apply !-ms-10 !-mt-9 !text-xs;
+  }
+
+  .nui-select ~ .nui-label-float {
+    @apply ms-0 mt-0 text-[0.825rem];
+  }
+}
+@utility nui-select-label-float {
+  .nui-label-float {
+    @apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-xs;
+  }
+
+  .nui-select:focus-visible ~ .nui-label-float {
+    @apply !-ms-[3.25rem] !-mt-10 !text-xs;
+  }
+
+  .nui-select ~ .nui-label-float {
+    @apply ms-0 mt-0 text-[0.825rem];
+  }
+}

package/src/css/slimscroll.css

@@ -0,0 +1,32 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-slimscroll */
+
+@utility nui-slimscroll {
+  &::-webkit-scrollbar {
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable;
+    @apply w-[6px] h-[6px];
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-lg bg-black/5 dark:bg-white/5 duration-300 transition-all;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    @apply bg-black/20 dark:bg-white/20;
+  }
+}
+@utility nui-slimscroll-opaque {
+  &::-webkit-scrollbar {
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable;
+    @apply w-[6px] h-[6px];
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    @apply bg-black/20 dark:bg-white/20;
+  }
+}
+@utility undefined {
+  @apply rounded-lg bg-transparent duration-300 transition-all;
+}

package/src/css/snack.css

@@ -0,0 +1,101 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-snack */
+
+@utility nui-snack {
+  @apply inline-flex items-center gap-1 rounded-full outline-transparent;
+}
+@utility nui-snack-icon {
+  @apply -ms-0.5 flex items-center justify-center rounded-full;
+  @apply bg-white dark:bg-muted-950;
+  @apply border border-muted-200 dark:border-muted-700;
+}
+@utility nui-snack-image {
+  @apply -ms-0.5 flex items-center justify-center rounded-full shrink-0;
+}
+@utility nui-snack-image-inner {
+  @apply rounded-full;
+}
+@utility nui-snack-text {
+  @apply font-sans;
+  @apply text-muted-600 dark:text-muted-300;
+}
+@utility nui-snack-xs {
+  &:not(.nui-has-media) {
+    @apply !ps-2;
+  }
+
+  .nui-snack-text {
+    @apply text-xs;
+  }
+  @apply h-6;
+
+  .nui-snack-icon {
+    @apply w-6 h-6;
+  }
+
+  .nui-snack-icon-inner {
+    @apply h-3 w-3;
+  }
+
+  .nui-snack-image, .nui-snack-image-inner {
+    @apply w-6 h-6;
+  }
+}
+@utility nui-snack-sm {
+  &:not(.nui-has-media) {
+    @apply !ps-3;
+  }
+
+  .nui-snack-text {
+    @apply text-sm;
+  }
+  @apply h-8;
+
+  .nui-snack-icon {
+    @apply w-8 h-8;
+  }
+
+  .nui-snack-icon-inner {
+    @apply h-4 w-4;
+  }
+
+  .nui-snack-image, .nui-snack-image-inner {
+    @apply w-8 h-8;
+  }
+}
+@utility nui-snack-md {
+  &:not(.nui-has-media) {
+    @apply !ps-4;
+  }
+
+  .nui-snack-text {
+    @apply text-sm;
+  }
+  @apply h-10;
+
+  .nui-snack-icon {
+    @apply w-10 h-10;
+  }
+
+  .nui-snack-icon-inner {
+    @apply h-5 w-5;
+  }
+
+  .nui-snack-image, .nui-snack-image-inner {
+    @apply w-10 h-10;
+  }
+}
+@utility nui-snack-default {
+  @apply bg-white dark:bg-muted-700;
+  @apply border border-muted-300 dark:border-muted-600;
+}
+@utility nui-snack-default-contrast {
+  @apply bg-white dark:bg-muted-950;
+  @apply border border-muted-300 dark:border-muted-800;
+}
+@utility nui-snack-muted {
+  @apply bg-muted-200 dark:bg-muted-700;
+}
+@utility nui-snack-muted-contrast {
+  @apply bg-muted-200 dark:bg-muted-950;
+}

package/src/css/switch-ball.css

@@ -0,0 +1,94 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-switch-ball */
+
+@utility nui-switch-ball {
+  @apply flex cursor-pointer items-center;
+
+  &.nui-switch-ball-primary .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
+    @apply bg-primary-400 dark:bg-primary-400;
+  }
+
+  &.nui-switch-ball-info .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
+    @apply bg-info-400 dark:bg-info-400;
+  }
+
+  &.nui-switch-ball-success .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
+    @apply bg-success-400 dark:bg-success-400;
+  }
+
+  &.nui-switch-ball-warning .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
+    @apply bg-warning-400 dark:bg-warning-400;
+  }
+
+  &.nui-switch-ball-danger .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
+    @apply bg-danger-400 dark:bg-danger-400;
+  }
+
+  &.nui-switch-ball-dark .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
+    @apply bg-muted-900 dark:bg-muted-100;
+  }
+
+  &.nui-switch-ball-dark .nui-switch-ball-icon {
+    @apply text-muted-100 dark:text-muted-900;
+  }
+
+  &.nui-switch-ball-black .nui-switch-ball-input:checked ~ .nui-switch-ball-track {
+    @apply bg-black dark:bg-white;
+  }
+
+  &.nui-switch-ball-black .nui-switch-ball-icon {
+    @apply text-white dark:text-black;
+  }
+}
+@utility nui-switch-ball-outer {
+  @apply nui-focus relative block rounded-full;
+}
+@utility nui-switch-ball-handle {
+  @apply absolute start-0.5 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-full shadow focus:w-6;
+  @apply h-5 w-5;
+  @apply bg-white dark:bg-muted-700;
+  @apply border border-muted-300 dark:border-muted-600;
+  @apply transition-all duration-300;
+}
+@utility nui-switch-ball-track {
+  @apply block h-6 w-11 rounded-full;
+  @apply bg-muted-300 dark:bg-muted-600;
+  @apply transition-all duration-300;
+}
+@utility nui-switch-ball-icon {
+  @apply pointer-events-none absolute start-2 top-1/2 z-10 translate-y-0 fill-current opacity-0;
+  @apply text-white dark:text-white;
+  @apply h-2.5 w-2.5;
+  @apply transition-all duration-300;
+}
+@utility nui-switch-ball-single-label {
+  @apply relative ms-3 cursor-pointer select-none;
+  @apply font-sans text-sm;
+  @apply text-muted-400 dark:text-muted-400;
+}
+@utility nui-switch-ball-dual-label {
+  @apply ms-3;
+
+  .nui-switch-ball-label {
+    @apply block;
+    @apply font-sans text-sm;
+    @apply text-muted-800 dark:text-white;
+  }
+
+  .nui-switch-ball-sublabel {
+    @apply block;
+    @apply font-sans text-xs;
+    @apply text-muted-400 dark:text-muted-400;
+  }
+}
+@utility nui-switch-ball-input {
+  @apply absolute z-0 h-full w-full cursor-pointer opacity-0;
+
+  &:checked ~ .nui-switch-ball-handle {
+    @apply -translate-y-1/2 translate-x-full rtl:-translate-x-full;
+  }
+
+  &:checked ~ .nui-switch-ball-icon {
+    @apply -translate-y-1/2 opacity-100;
+  }
+}