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

package/src/css/icon-box.css

@@ -0,0 +1,305 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-icon-box */
+
+@utility nui-icon-box {
+  @apply relative inline-flex shrink-0 items-center justify-center;
+
+  &.nui-box-mask:not(.nui-box-rounded-sm):not(.nui-box-rounded-lg):not(.nui-box-rounded-full):not(.nui-box-outline):not(.nui-box-bordered) {
+    @apply nui-mask;
+  }
+}
+@utility nui-box-xs {
+  @apply h-8 w-8;
+
+  &.nui-box-rounded-sm {
+    @apply rounded;
+  }
+
+  &.nui-box-rounded-md {
+    @apply rounded-md;
+  }
+
+  &.nui-box-rounded-lg {
+    @apply rounded-lg;
+  }
+}
+@utility nui-box-sm {
+  @apply h-10 w-10;
+
+  &.nui-box-rounded-sm {
+    @apply rounded;
+  }
+
+  &.nui-box-rounded-md {
+    @apply rounded-md;
+  }
+
+  &.nui-box-rounded-lg {
+    @apply rounded-xl;
+  }
+}
+@utility nui-box-md {
+  @apply h-12 w-12;
+
+  &.nui-box-rounded-sm {
+    @apply rounded-md;
+  }
+
+  &.nui-box-rounded-md {
+    @apply rounded-lg;
+  }
+
+  &.nui-box-rounded-lg {
+    @apply rounded-xl;
+  }
+}
+@utility nui-box-lg {
+  @apply h-16 w-16;
+
+  &.nui-box-rounded-sm {
+    @apply rounded-md;
+  }
+
+  &.nui-box-rounded-md {
+    @apply rounded-lg;
+  }
+
+  &.nui-box-rounded-lg {
+    @apply rounded-2xl;
+  }
+}
+@utility nui-box-xl {
+  @apply h-20 w-20;
+
+  &.nui-box-rounded-sm {
+    @apply rounded-lg;
+  }
+
+  &.nui-box-rounded-md {
+    @apply rounded-xl;
+  }
+
+  &.nui-box-rounded-lg {
+    @apply rounded-2xl;
+  }
+}
+@utility nui-box-2xl {
+  @apply h-24 w-24;
+
+  &.nui-box-rounded-sm {
+    @apply rounded-lg;
+  }
+
+  &.nui-box-rounded-md {
+    @apply rounded-xl;
+  }
+
+  &.nui-box-rounded-lg {
+    @apply rounded-3xl;
+  }
+}
+@utility nui-box-rounded-full {
+  @apply rounded-full;
+}
+@utility nui-box-default {
+  @apply text-muted-600 dark:text-muted-200;
+  @apply bg-muted-100 dark:bg-muted-700;
+}
+@utility nui-box-solid {
+  &.nui-box-default {
+    @apply text-muted-600 dark:text-muted-200;
+    @apply bg-muted-100 dark:bg-muted-700;
+  }
+
+  &.nui-box-default-contrast {
+    @apply text-muted-600 dark:text-muted-100;
+    @apply bg-muted-100 dark:bg-muted-950;
+  }
+
+  &.nui-box-muted {
+    @apply text-muted-700 dark:text-muted-200;
+    @apply bg-muted-200 dark:bg-muted-700;
+  }
+
+  &.nui-box-muted-contrast {
+    @apply text-muted-700 dark:text-muted-100;
+    @apply bg-muted-200 dark:bg-muted-950;
+  }
+
+  &.nui-box-light {
+    @apply text-muted-800 dark:text-muted-100;
+    @apply bg-white dark:bg-muted-700;
+  }
+
+  &.nui-box-dark {
+    @apply text-muted-100 dark:text-muted-900;
+    @apply bg-muted-900 dark:bg-muted-100;
+  }
+
+  &.nui-box-black {
+    @apply text-white dark:text-black;
+    @apply bg-black dark:bg-white;
+  }
+
+  &.nui-box-primary {
+    @apply text-primary-invert dark:text-primary-invert;
+    @apply bg-primary-500 dark:bg-primary-500;
+  }
+
+  &.nui-box-info {
+    @apply text-white dark:text-white;
+    @apply bg-info-500 dark:bg-info-500;
+  }
+
+  &.nui-box-success {
+    @apply text-white dark:text-white;
+    @apply bg-success-500 dark:bg-success-500;
+  }
+
+  &.nui-box-warning {
+    @apply text-white dark:text-white;
+    @apply bg-warning-500 dark:bg-warning-500;
+  }
+
+  &.nui-box-danger {
+    @apply text-white dark:text-white;
+    @apply bg-danger-500 dark:bg-danger-500;
+  }
+}
+@utility nui-box-pastel {
+  &.nui-box-default {
+    @apply text-muted-500 dark:text-muted-200;
+    @apply bg-muted-500/10 dark:bg-muted-700/10;
+  }
+
+  &.nui-box-default-contrast {
+    @apply text-muted-500 dark:text-muted-100;
+    @apply bg-muted-500/10 dark:bg-muted-950/10;
+  }
+
+  &.nui-box-muted {
+    @apply text-muted-700 dark:text-muted-200;
+    @apply bg-muted-600/10 dark:bg-muted-700/10;
+  }
+
+  &.nui-box-muted-contrast {
+    @apply text-muted-700 dark:text-muted-100;
+    @apply bg-muted-600/10 dark:bg-muted-950/10;
+  }
+
+  &.nui-box-light {
+    @apply text-muted-800 dark:text-muted-300;
+    @apply bg-white/10 dark:bg-white/10;
+  }
+
+  &.nui-box-dark {
+    @apply text-muted-800 dark:text-muted-100;
+    @apply bg-muted-900/10 dark:bg-muted-100/10;
+  }
+
+  &.nui-box-black {
+    @apply text-black dark:text-white;
+    @apply bg-black/10 dark:bg-white/10;
+  }
+
+  &.nui-box-primary {
+    @apply text-primary-500 dark:text-primary-500;
+    @apply bg-primary-500/10 dark:bg-primary-500/10;
+  }
+
+  &.nui-box-info {
+    @apply text-info-500 dark:text-info-500;
+    @apply bg-info-500/10 dark:bg-info-500/10;
+  }
+
+  &.nui-box-success {
+    @apply text-success-500 dark:text-success-500;
+    @apply bg-success-500/10 dark:bg-success-500/10;
+  }
+
+  &.nui-box-warning {
+    @apply text-warning-500 dark:text-warning-500;
+    @apply bg-warning-500/10 dark:bg-warning-500/10;
+  }
+
+  &.nui-box-danger {
+    @apply text-danger-500 dark:text-danger-500;
+    @apply bg-danger-500/10 dark:bg-danger-500/10;
+  }
+}
+@utility nui-box-outline {
+  &.nui-box-default {
+    @apply text-muted-500 dark:text-muted-200;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-default-contrast {
+    @apply text-muted-500 dark:text-muted-100;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-muted {
+    @apply text-muted-700 dark:text-muted-200;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-muted-contrast {
+    @apply text-muted-700 dark:text-muted-100;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-light {
+    @apply text-muted-800 dark:text-muted-400;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-dark {
+    @apply text-muted-800 dark:text-muted-100;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-black {
+    @apply text-black dark:text-white;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-primary {
+    @apply text-primary-500 dark:text-primary-500;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-info {
+    @apply text-info-500 dark:text-info-500;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-success {
+    @apply text-success-500 dark:text-success-500;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-warning {
+    @apply text-warning-500 dark:text-warning-500;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+
+  &.nui-box-danger {
+    @apply text-danger-500 dark:text-danger-500;
+    @apply bg-transparent  bg-transparent;
+    @apply border-2 border-current dark:border-current;
+  }
+}
+@utility nui-box-bordered {
+  @apply border-2 border-current;
+}

package/src/css/input-file-regular.css

@@ -0,0 +1,255 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-input-file-regular */
+
+@utility nui-input-file-regular {
+  @apply relative w-full;
+
+  &.nui-input-sm:not(.nui-has-icon) {
+    @apply text-xs leading-4;
+
+    .nui-input-file-inner {
+      @apply h-8 py-2 gap-1;
+    }
+
+    .nui-input-file-addon {
+      @apply h-8 px-2;
+    }
+
+    .nui-input-file-placeload {
+      @apply top-2.5;
+    }
+  }
+
+  &.nui-input-md:not(.nui-has-icon) {
+    @apply text-[0.825rem] leading-5;
+
+    .nui-input-file-inner {
+      @apply h-10 gap-2;
+    }
+
+    .nui-input-file-addon {
+      @apply h-10 px-3;
+    }
+
+    .nui-input-file-placeload {
+      @apply top-3.5;
+    }
+  }
+
+  &.nui-input-lg:not(.nui-has-icon) {
+    @apply text-sm leading-5;
+
+    .nui-input-file-inner {
+      @apply h-12 gap-2;
+    }
+
+    .nui-input-file-addon {
+      @apply h-12 px-4;
+    }
+
+    .nui-input-file-placeload {
+      @apply top-[1.2rem];
+    }
+  }
+
+  &.nui-input-xl:not(.nui-has-icon) {
+    @apply text-sm leading-5;
+
+    .nui-input-file-inner {
+      @apply h-14 gap-2;
+    }
+
+    .nui-input-file-addon {
+      @apply h-14 px-5;
+    }
+
+    .nui-input-file-placeload {
+      @apply top-[1.4rem];
+    }
+  }
+
+  &:hover {
+    .nui-input-file-addon {
+      @apply text-primary-500 dark:text-primary-500;
+    }
+  }
+
+  &:disabled {
+    .nui-input-file-addon {
+      @apply cursor-not-allowed opacity-75;
+    }
+  }
+
+  &:focus-within {
+    .nui-input-file-addon {
+      @apply text-primary-500 dark:text-primary-500;
+    }
+  }
+}
+@utility nui-input-file-label {
+  @apply nui-label w-full;
+}
+@utility nui-input-file-outer {
+  @apply relative;
+}
+@utility nui-input-file-inner {
+  @apply relative nui-focus w-full flex cursor-pointer items-center overflow-hidden disabled:cursor-not-allowed disabled:opacity-75;
+  @apply font-sans;
+  @apply transition-colors duration-300;
+}
+@utility nui-input-file-addon {
+  @apply pointer-events-none flex shrink-0 items-center justify-center gap-1 transition-colors duration-100;
+}
+@utility nui-input-file-placeholder {
+  @apply font-sans text-xs;
+  @apply text-muted-400 dark:text-muted-400;
+}
+@utility nui-input-file-text {
+  @apply ms-2 inline-flex truncate text-muted-400 dark:text-muted-400;
+}
+@utility nui-input-file-placeload {
+  @apply absolute -end-8 flex w-[70%] items-center;
+
+  .nui-placeload {
+    @apply h-3 w-full max-w-[75%] rounded;
+  }
+}
+@utility nui-input-default {
+  .nui-input-file-inner {
+    @apply text-muted-600 dark:text-muted-200;
+    @apply bg-white dark:bg-muted-800;
+    @apply border border-muted-300 dark:border-muted-700;
+    @apply placeholder:text-muted-300 dark:placeholder:text-muted-500;
+  }
+
+  .nui-input-file-addon {
+    @apply bg-muted-50 dark:bg-muted-800;
+    @apply text-muted-400 dark:text-muted-400;
+    @apply border-e border-muted-300 dark:border-muted-700;
+  }
+}
+@utility nui-input-default-contrast {
+  .nui-input-file-inner {
+    @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 placeholder:text-muted-300 dark:placeholder:text-muted-600;
+  }
+
+  .nui-input-file-addon {
+    @apply bg-muted-50 dark:bg-muted-950;
+    @apply text-muted-400 dark:text-muted-400;
+    @apply border-e border border-muted-300 dark:border-muted-800;
+  }
+}
+@utility nui-input-file-color-focus {
+  .nui-input-file-inner:focus {
+    @apply !border-primary-500 dark:!border-primary-500;
+  }
+}
+@utility nui-input-file-loading {
+  .nui-input-file-inner {
+    @apply text-transparent placeholder:text-transparent;
+  }
+}
+@utility nui-input-file-error {
+  .nui-input-file-inner {
+    @apply border-danger-500 dark:border-danger-500;
+  }
+}
+@utility nui-input-rounded-sm {
+  .nui-input-file-inner {
+    @apply rounded-md;
+  }
+}
+@utility nui-input-rounded-md {
+  .nui-input-file-inner {
+    @apply rounded-lg;
+  }
+}
+@utility nui-input-rounded-lg {
+  .nui-input-file-inner {
+    @apply rounded-xl;
+  }
+}
+@utility nui-input-rounded-full {
+  .nui-input-file-inner {
+    @apply rounded-full;
+  }
+}
+@utility nui-input-sm {
+  @apply text-xs leading-4;
+
+  .nui-input-file-inner {
+    @apply h-8 py-2 pe-3;
+  }
+
+  .nui-input-file-addon {
+    @apply h-8 px-2;
+  }
+
+  .nui-input-file-icon {
+    @apply w-3 h-3;
+  }
+
+  .nui-input-file-placeload {
+    @apply top-2.5;
+  }
+}
+@utility nui-input-md {
+  @apply text-[0.825rem] leading-5;
+
+  .nui-input-file-inner {
+    @apply h-10 pe-4;
+  }
+
+  .nui-input-file-addon {
+    @apply h-10 px-3;
+  }
+
+  .nui-input-file-icon {
+    @apply w-4 h-4;
+  }
+
+  .nui-input-file-placeload {
+    @apply top-3.5;
+  }
+}
+@utility nui-input-lg {
+  @apply text-sm leading-5;
+
+  .nui-input-file-inner {
+    @apply h-12 pe-4;
+  }
+
+  .nui-input-file-addon {
+    @apply h-12 px-4;
+  }
+
+  .nui-input-file-icon {
+    @apply w-5 h-5;
+  }
+
+  .nui-input-file-placeload {
+    @apply top-[1.2rem];
+  }
+}
+@utility nui-input-xl {
+  @apply text-sm leading-5;
+
+  .nui-input-file-inner {
+    @apply h-14 pe-4;
+  }
+
+  .nui-input-file-addon {
+    @apply h-14 px-5;
+  }
+
+  .nui-input-file-icon {
+    @apply w-6 h-6;
+  }
+
+  .nui-input-file-placeload {
+    @apply top-[1.4rem];
+  }
+}