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

package/src/css/switch-thin.css

@@ -0,0 +1,76 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-switch-thin */
+
+@utility nui-switch-thin {
+  @apply flex cursor-pointer items-center;
+
+  &.nui-switch-thin-primary .nui-switch-thin-input:checked ~ .nui-switch-thin-track {
+    @apply bg-primary-400 dark:bg-primary-400;
+  }
+
+  &.nui-switch-thin-info .nui-switch-thin-input:checked ~ .nui-switch-thin-track {
+    @apply bg-info-400 dark:bg-info-400;
+  }
+
+  &.nui-switch-thin-success .nui-switch-thin-input:checked ~ .nui-switch-thin-track {
+    @apply bg-success-400 dark:bg-success-400;
+  }
+
+  &.nui-switch-thin-warning .nui-switch-thin-input:checked ~ .nui-switch-thin-track {
+    @apply bg-warning-400 dark:bg-warning-400;
+  }
+
+  &.nui-switch-thin-danger .nui-switch-thin-input:checked ~ .nui-switch-thin-track {
+    @apply bg-danger-400 dark:bg-danger-400;
+  }
+
+  &.nui-switch-thin-dark .nui-switch-thin-input:checked ~ .nui-switch-thin-track {
+    @apply bg-muted-900 dark:bg-muted-100;
+  }
+
+  &.nui-switch-thin-black .nui-switch-thin-input:checked ~ .nui-switch-thin-track {
+    @apply bg-black dark:bg-white;
+  }
+}
+@utility nui-switch-thin-outer {
+  @apply nui-focus relative block h-4 rounded-full;
+}
+@utility nui-switch-thin-handle {
+  @apply absolute -start-1 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full;
+  @apply h-6 w-6;
+  @apply bg-white dark:bg-muted-700;
+  @apply border border-muted-300 dark:border-muted-600;
+  @apply transition-all duration-300;
+}
+@utility nui-switch-thin-track {
+  @apply block h-4 w-10 rounded-full;
+  @apply bg-muted-300 dark:bg-muted-600;
+  @apply transition-all duration-300;
+}
+@utility nui-switch-thin-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-thin-dual-label {
+  @apply ms-3;
+
+  .nui-switch-thin-label {
+    @apply block;
+    @apply font-sans text-sm;
+    @apply text-muted-800 dark:text-white;
+  }
+
+  .nui-switch-thin-sublabel {
+    @apply block;
+    @apply font-sans text-xs;
+    @apply text-muted-400 dark:text-muted-400;
+  }
+}
+@utility nui-switch-thin-input {
+  @apply absolute z-20 h-full w-full cursor-pointer opacity-0;
+
+  &:checked ~ .nui-switch-thin-handle {
+    @apply -translate-y-1/2 translate-x-full rtl:-translate-x-full;
+  }
+}

package/src/css/tab-slider.css

@@ -0,0 +1,190 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-tab-slider */
+
+@utility nui-tab-slider {
+  @apply relative;
+}
+@utility nui-tab-slider-inner {
+  @apply mb-6 flex;
+}
+@utility nui-tab-slider-track {
+  @apply relative relative flex w-full items-center font-sans;
+  @apply bg-muted-100 dark:bg-muted-700;
+}
+@utility nui-tab-slider-item {
+  @apply relative z-20 h-full flex flex-1 items-center justify-center;
+  @apply text-sm font-sans;
+}
+@utility nui-tab-slider-naver {
+  @apply absolute start-0 top-0 z-10 h-full;
+  @apply transition-all duration-300;
+}
+@utility nui-tab-content {
+  @apply relative block;
+}
+@utility nui-tabs-centered {
+  .nui-tab-slider-inner {
+    @apply justify-center;
+  }
+}
+@utility nui-tabs-end {
+  .nui-tab-slider-inner {
+    @apply justify-end;
+  }
+}
+@utility nui-tabs-default {
+  .nui-tab-slider-item:not(.nui-active) {
+    @apply text-muted-400 dark:text-muted-400;
+  }
+
+  .nui-tab-slider-item.nui-active {
+    @apply text-muted-800 dark:text-white;
+  }
+
+  .nui-tab-slider-naver {
+    @apply bg-white dark:bg-muted-800;
+    @apply border border-muted-300 dark:border-muted-600;
+  }
+}
+@utility nui-tabs-default-contrast {
+  .nui-tab-slider-item:not(.nui-active) {
+    @apply text-muted-400 dark:text-muted-400;
+  }
+
+  .nui-tab-slider-item.nui-active {
+    @apply text-muted-900 dark:text-white;
+  }
+
+  .nui-tab-slider-naver {
+    @apply bg-white dark:bg-muted-950;
+    @apply border border-muted-300 dark:border-muted-800;
+  }
+}
+@utility nui-tabs-primary {
+  .nui-tab-slider-item:not(.nui-active) {
+    @apply text-muted-400 dark:text-muted-400;
+  }
+
+  .nui-tab-slider-item.nui-active {
+    @apply text-white dark:text-white;
+  }
+
+  .nui-tab-slider-naver {
+    @apply bg-primary-500 dark:bg-primary-500;
+  }
+}
+@utility nui-tabs-light {
+  .nui-tab-slider-item:not(.nui-active) {
+    @apply text-muted-400 dark:text-muted-400;
+  }
+
+  .nui-tab-slider-item.nui-active {
+    @apply text-white dark:text-white;
+  }
+
+  .nui-tab-slider-naver {
+    @apply bg-muted-500 dark:bg-muted-400;
+  }
+}
+@utility nui-tabs-dark {
+  .nui-tab-slider-item:not(.nui-active) {
+    @apply text-muted-400 dark:text-muted-400;
+  }
+
+  .nui-tab-slider-item.nui-active {
+    @apply text-white dark:text-muted-900;
+  }
+
+  .nui-tab-slider-naver {
+    @apply bg-muted-900 dark:bg-muted-100;
+  }
+}
+@utility nui-tabs-black {
+  .nui-tab-slider-item:not(.nui-active) {
+    @apply text-muted-400 dark:text-muted-400;
+  }
+
+  .nui-tab-slider-item.nui-active {
+    @apply text-white dark:text-black;
+  }
+
+  .nui-tab-slider-naver {
+    @apply bg-black dark:bg-white;
+  }
+}
+@utility nui-tabs-rounded-sm {
+  .nui-tab-slider-track, .nui-tab-slider-naver {
+    @apply rounded-md;
+  }
+}
+@utility nui-tabs-rounded-md {
+  .nui-tab-slider-track, .nui-tab-slider-naver {
+    @apply rounded-lg;
+  }
+}
+@utility nui-tabs-rounded-lg {
+  .nui-tab-slider-track, .nui-tab-slider-naver {
+    @apply rounded-xl;
+  }
+}
+@utility nui-tabs-rounded-full {
+  .nui-tab-slider-track, .nui-tab-slider-naver {
+    @apply rounded-full;
+  }
+}
+@utility nui-tabs-sm {
+  &.nui-tabs-two-slots .nui-tab-slider-track {
+    @apply max-w-[140px];
+  }
+
+  &.nui-tabs-three-slots .nui-tab-slider-track {
+    @apply max-w-[210px];
+  }
+
+  .nui-tab-slider-track {
+    @apply h-8;
+  }
+}
+@utility nui-tabs-md {
+  &.nui-tabs-two-slots .nui-tab-slider-track {
+    @apply max-w-[250px];
+  }
+
+  &.nui-tabs-three-slots .nui-tab-slider-track {
+    @apply max-w-[320px];
+  }
+
+  .nui-tab-slider-track {
+    @apply h-10;
+  }
+}
+@utility nui-tabs-two-slots {
+  .nui-tab-slider-naver, .nui-tab-slider-item {
+    @apply w-1/2;
+  }
+
+  .nui-tab-slider-item:first-child.nui-active ~ .nui-tab-slider-naver {
+    @apply ms-0;
+  }
+
+  .nui-tab-slider-item:nth-child(2).nui-active ~ .nui-tab-slider-naver {
+    @apply ms-[50%];
+  }
+}
+@utility nui-tabs-three-slots {
+  .nui-tab-slider-naver, .nui-tab-slider-item {
+    @apply w-1/3;
+  }
+
+  .nui-tab-slider-item:first-child.nui-active ~ .nui-tab-slider-naver {
+    @apply ms-0;
+  }
+
+  .nui-tab-slider-item:nth-child(2).nui-active ~ .nui-tab-slider-naver {
+    @apply ms-[33.3%];
+  }
+
+  .nui-tab-slider-item:nth-child(3).nui-active ~ .nui-tab-slider-naver {
+    @apply ms-[66.6%];
+  }
+}

package/src/css/tabs.css

@@ -0,0 +1,175 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-tabs */
+
+@utility nui-tabs {
+  @apply relative;
+}
+@utility nui-tabs-inner {
+  @apply font-sans mb-6 flex;
+}
+@utility nui-tabs-bordered {
+  .nui-tabs-inner {
+    @apply border-b border-muted-200 dark:border-muted-800;
+  }
+}
+@utility nui-tab-item {
+  @apply cursor-pointer border-b-2 px-4 py-3;
+  @apply text-sm;
+  @apply transition-all duration-300;
+
+  &.nui-has-icon {
+    @apply flex items-center gap-1;
+  }
+}
+@utility nui-pill-item {
+  @apply flex flex-col rounded-xl px-5 cursor-pointer;
+  @apply text-center;
+  @apply transition-all duration-300;
+
+  &:not(.nui-has-icon) {
+    @apply flex items-center gap-1 py-2;
+  }
+
+  &.nui-has-icon {
+    @apply flex items-center gap-1 py-3;
+  }
+}
+@utility nui-tabs-default {
+  .nui-tab-item {
+    &:not(.nui-active) {
+      @apply border-transparent;
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply border-muted-500 dark:border-muted-100;
+      @apply text-muted-800 dark:text-muted-100;
+    }
+  }
+
+  .nui-pill-item {
+    &:not(.nui-active) {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply text-muted-800 dark:text-muted-100;
+      @apply bg-white dark:bg-muted-800;
+      @apply border border-muted-200 dark:border-muted-700;
+      @apply shadow-lg shadow-muted-500/30 dark:shadow-muted-800/50;
+    }
+  }
+}
+@utility nui-tabs-primary {
+  .nui-tab-item {
+    &:not(.nui-active) {
+      @apply border-transparent;
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply border-primary-500 dark:border-primary-500;
+      @apply text-muted-800 dark:text-muted-100;
+    }
+  }
+
+  .nui-pill-item {
+    &:not(.nui-active) {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply text-primary-invert dark:text-primary-invert;
+      @apply !bg-primary-600 dark:!bg-primary-600;
+      @apply shadow-lg bg-primary-500/50 dark:bg-primary-500/50;
+    }
+  }
+}
+@utility nui-tabs-light {
+  .nui-tab-item {
+    &:not(.nui-active) {
+      @apply border-transparent;
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply border-muted-600 dark:border-muted-100;
+      @apply text-muted-600 dark:text-muted-100;
+    }
+  }
+
+  .nui-pill-item {
+    &:not(.nui-active) {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply text-muted-700 dark:text-muted-100;
+      @apply !bg-muted-100 dark:!bg-muted-800;
+      @apply shadow-lg shadow-muted-500/30 dark:shadow-muted-800/50;
+    }
+  }
+}
+@utility nui-tabs-dark {
+  .nui-tab-item {
+    &:not(.nui-active) {
+      @apply border-transparent;
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply border-muted-900 dark:border-muted-100;
+      @apply text-muted-900 dark:text-muted-100;
+    }
+  }
+
+  .nui-pill-item {
+    &:not(.nui-active) {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply text-muted-100 dark:text-muted-900;
+      @apply !bg-muted-900 dark:!bg-muted-100;
+      @apply shadow-lg shadow-muted-500/30 dark:shadow-muted-800/50;
+    }
+  }
+}
+@utility nui-tabs-black {
+  .nui-tab-item {
+    &:not(.nui-active) {
+      @apply border-transparent;
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply border-black dark:border-white;
+      @apply text-black dark:text-white;
+    }
+  }
+
+  .nui-pill-item {
+    &:not(.nui-active) {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &.nui-active {
+      @apply text-white dark:text-black;
+      @apply !bg-black dark:!bg-white;
+      @apply shadow-lg shadow-muted-500/30 dark:shadow-muted-800/50;
+    }
+  }
+}
+@utility nui-tab-content {
+  @apply relative block;
+}
+@utility nui-tabs-centered {
+  .nui-tabs-inner {
+    @apply justify-center;
+  }
+}
+@utility nui-tabs-end {
+  .nui-tabs-inner {
+    @apply justify-end;
+  }
+}