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

package/src/css/input-file.css

@@ -0,0 +1,224 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-input-file */
+
+@utility nui-input-file {
+  @apply relative block nui-focus;
+}
+@utility nui-input-file-drop {
+  @apply relative h-64 flex justify-center items-center;
+  @apply bg-white dark:bg-muted-700;
+  @apply border-2 border-dashed border-muted-200 dark:border-muted-200;
+  @apply hover:border-muted-400 dark:hover:border-muted-400;
+  @apply transition-colors duration-300;
+
+  .nui-drop-area-inner {
+    @apply absolute z-10;
+  }
+
+  .nui-drop-zone {
+    @apply flex flex-col items-center font-sans text-sm;
+  }
+
+  .nui-drop-zone-icon {
+    @apply w-10 h-10 mb-2;
+    @apply transition-colors duration-300;
+  }
+
+  .nui-drop-zone-text {
+    @apply block font-sans font-normal;
+  }
+
+  .nui-drop-zone-separator {
+    @apply block font-sans font-semibold leading-none py-1;
+  }
+
+  .nui-drop-zone-input {
+    @apply absolute top-0 left-0 h-full w-full opacity-0 file:cursor-pointer z-20;
+  }
+
+  &.nui-input-file-primary {
+    .nui-drop-zone-icon {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    .nui-drop-zone-text {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    .nui-drop-zone-separator {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &:hover {
+      .nui-drop-zone-icon {
+        @apply text-primary-500 dark:text-primary-500;
+      }
+    }
+  }
+
+  &.nui-input-file-dark {
+    .nui-drop-zone-icon {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    .nui-drop-zone-text {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    .nui-drop-zone-separator {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &:hover {
+      .nui-drop-zone-icon {
+        @apply text-muted-900 dark:text-muted-100;
+      }
+    }
+  }
+
+  &.nui-input-file-black {
+    .nui-drop-zone-icon {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    .nui-drop-zone-text {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    .nui-drop-zone-separator {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+
+    &:hover {
+      .nui-drop-zone-icon {
+        @apply text-black dark:text-white;
+      }
+    }
+  }
+}
+@utility nui-input-file-button {
+  @apply w-64 max-w-full flex flex-col items-center px-4 py-8 tracking-wide cursor-pointer;
+  @apply bg-white dark:bg-muted-700;
+  @apply transition-colors duration-300;
+
+  .nui-upload-button-icon {
+    @apply w-8 h-8;
+  }
+
+  .nui-upload-button-label {
+    @apply block mt-2 leading-normal;
+    @apply font-sans text-sm;
+  }
+
+  &.nui-input-file-primary {
+    @apply text-muted-400 dark:text-muted-400;
+    @apply hover:text-primary-500 dark:hover:text-primary-500;
+    @apply border-2 border-muted-200 dark:border-muted-600;
+    @apply hover:border-primary-500 dark:hover:border-primary-500;
+  }
+
+  &.nui-input-file-dark {
+    @apply text-muted-400 dark:text-muted-400;
+    @apply hover:text-muted-900 dark:hover:text-muted-100;
+    @apply border-2 border-muted-200 dark:border-muted-600;
+    @apply hover:border-muted-900 dark:hover:border-muted-100;
+  }
+
+  &.nui-input-file-black {
+    @apply text-muted-400 dark:text-muted-400;
+    @apply hover:text-black dark:hover:text-white;
+    @apply border-2 border-muted-200 dark:border-muted-600;
+    @apply hover:border-black dark:hover:border-white;
+  }
+}
+@utility nui-input-file-combo {
+  @apply block font-sans p-1;
+  @apply bg-white dark:bg-muted-700;
+  @apply border border-muted-200 dark:border-muted-600;
+
+  .nui-combo-label-text {
+    @apply font-sans sr-only text-sm;
+  }
+
+  .nui-combo-input {
+    @apply outline-none block w-full file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:transition-colors file:duration-300;
+    @apply text-sm text-muted-500 dark:text-muted-400;
+    @apply file:text-sm;
+  }
+
+  &.nui-input-file-primary {
+    .nui-combo-input {
+      @apply file:bg-primary-500/10 dark:file:bg-primary-500/10;
+      @apply file:hover:bg-primary-500/20 dark:file:hover:bg-primary-500/20;
+      @apply file:text-primary-700 dark:file:text-primary-700;
+    }
+  }
+
+  &.nui-input-file-dark {
+    .nui-combo-input {
+      @apply file:bg-muted-900/10 dark:file:bg-muted-100/10;
+      @apply file:hover:bg-muted-900/20 dark:file:hover:bg-muted-100/20;
+      @apply file:text-muted-900 dark:file:text-muted-100;
+    }
+  }
+
+  &.nui-input-file-black {
+    .nui-combo-input {
+      @apply file:bg-black/10 dark:file:bg-white/10;
+      @apply file:hover:bg-black/20 dark:file:hover:bg-white/20;
+      @apply file:text-black dark:file:text-white;
+    }
+  }
+}
+@utility nui-input-file-rounded-sm {
+  &.nui-input-file-drop, &.nui-input-file-button {
+    @apply rounded-md;
+  }
+
+  &.nui-input-file-combo {
+    @apply rounded-md;
+  }
+
+  &.nui-input-file-combo .nui-combo-input {
+    @apply file:rounded-md;
+  }
+}
+@utility nui-input-file-rounded-md {
+  &.nui-input-file-drop, &.nui-input-file-button {
+    @apply rounded-lg;
+  }
+
+  &.nui-input-file-combo {
+    @apply rounded-lg;
+  }
+
+  &.nui-input-file-combo .nui-combo-input {
+    @apply file:rounded-lg;
+  }
+}
+@utility nui-input-file-rounded-lg {
+  &.nui-input-file-drop, &.nui-input-file-button {
+    @apply rounded-xl;
+  }
+
+  &.nui-input-file-combo {
+    @apply rounded-xl;
+  }
+
+  &.nui-input-file-combo .nui-combo-input {
+    @apply file:rounded-xl;
+  }
+}
+@utility nui-input-file-rounded-full {
+  &.nui-input-file-drop, &.nui-input-file-button {
+    @apply rounded-full;
+  }
+
+  &.nui-input-file-combo {
+    @apply rounded-full;
+  }
+
+  &.nui-input-file-combo .nui-combo-input {
+    @apply file:rounded-full;
+  }
+}

package/src/css/input-help-text.css

@@ -0,0 +1,7 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-input-help-text */
+
+@utility nui-input-help-text {
+  @apply mt-1 block;
+  @apply font-sans text-[0.65rem] font-medium leading-none;
+}

package/src/css/input-number.css

@@ -0,0 +1,469 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-input-number */
+
+@utility nui-input-number-wrapper {
+  @apply relative;
+
+  .nui-input-number-label, .nui-label-float {
+    @apply nui-label;
+  }
+
+  .nui-input-number-buttons > button {
+    @apply outline-none flex items-center justify-center;
+    @apply last:border-s-0;
+    @apply text-muted-400 enabled:hover:text-muted-600 dark:enabled:hover:text-muted-100;
+    @apply enabled:focus:text-muted-600 dark:enabled:focus:text-muted-100;
+    @apply transition-colors duration-300;
+    @apply disabled:cursor-not-allowed;
+  }
+
+  .nui-input-number-buttons svg {
+    @apply h-4 w-4;
+  }
+
+  .nui-input-number-buttons button {
+    @apply bg-white dark:bg-muted-800 enabled:hover:bg-white dark:enabled:hover:bg-muted-900;
+    @apply border border-muted-200 dark:border-muted-700 enabled:focus:bg-white dark:enabled:focus:bg-muted-900;
+  }
+
+  &:not(.nui-input-number-loading) {
+    .nui-input-number:placeholder-shown ~ .nui-label-float {
+      @apply text-muted-300 dark:text-muted-600;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-input-number-sm {
+    .nui-input-number {
+      @apply h-8 py-1 text-xs leading-4 ps-2 pe-[3.75rem];
+    }
+  }
+
+  &:not(.nui-has-icon).nui-input-number-md {
+    .nui-input-number {
+      @apply h-10 py-2 text-sm leading-5 ps-3 pe-[4.75rem];
+    }
+  }
+
+  &:not(.nui-has-icon).nui-input-number-lg {
+    .nui-input-number {
+      @apply h-12 py-2 text-sm leading-5 ps-4 pe-24;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-input-number-xl {
+    .nui-input-number {
+      @apply h-14 py-2 text-base leading-5 ps-4 pe-24;
+    }
+  }
+
+  &.nui-input-number-label-float:not(.nui-has-icon).nui-input-number-sm {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-7 text-xs;
+    }
+
+    .nui-input-number:focus-visible ~ .nui-label-float {
+      @apply !-ms-3 !-mt-7;
+    }
+
+    .nui-input-number:placeholder-shown ~ .nui-label-float {
+      @apply ms-0 mt-0;
+    }
+  }
+
+  &.nui-input-number-label-float:not(.nui-has-icon).nui-input-number-md {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-8 text-xs;
+    }
+
+    .nui-input-number:focus-visible ~ .nui-label-float {
+      @apply !-ms-3 !-mt-8 !text-xs;
+    }
+
+    .nui-input-number:placeholder-shown ~ .nui-label-float {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
+  }
+
+  &.nui-input-number-label-float:not(.nui-has-icon).nui-input-number-lg {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-9 text-xs;
+    }
+
+    .nui-input-number:focus-visible ~ .nui-label-float {
+      @apply !-ms-3 !-mt-9 !text-xs;
+    }
+
+    .nui-input-number:placeholder-shown ~ .nui-label-float {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
+  }
+
+  &.nui-input-number-label-float:not(.nui-has-icon).nui-input-number-xl {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-10 text-xs;
+    }
+
+    .nui-input-number:focus-visible ~ .nui-label-float {
+      @apply !-ms-3 !-mt-10 !text-xs;
+    }
+
+    .nui-input-number:placeholder-shown ~ .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-input-number-outer {
+  @apply nui-focus relative;
+}
+@utility nui-input-number-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-number-buttons {
+  @apply absolute top-1 end-1 flex z-10;
+}
+@utility nui-input-number {
+  @apply nui-focus 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-input-number-icon {
+    @apply !text-primary-500 dark:!text-primary-500;
+  }
+
+  &:disabled ~ .nui-input-number-icon {
+    @apply cursor-not-allowed opacity-75;
+  }
+}
+@utility nui-input-number-placeload {
+  @apply absolute start-0 top-0 flex w-full items-center px-4;
+
+  .nui-placeload {
+    @apply h-3 w-full max-w-[50%] rounded;
+  }
+}
+@utility nui-input-number-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-number-rounded-sm {
+  .nui-input-number, .nui-input-number-outer {
+    @apply rounded-md;
+  }
+
+  .nui-input-number-buttons button {
+    @apply first:rounded-s-md;
+    @apply last:rounded-e-md;
+  }
+}
+@utility nui-input-number-rounded-md {
+  .nui-input-number, .nui-input-number-outer {
+    @apply rounded-lg;
+  }
+
+  .nui-input-number-buttons button {
+    @apply first:rounded-s-lg;
+    @apply last:rounded-e-lg;
+  }
+}
+@utility nui-input-number-rounded-lg {
+  .nui-input-number, .nui-input-number-outer {
+    @apply rounded-xl;
+  }
+
+  .nui-input-number-buttons button {
+    @apply first:rounded-s-xl;
+    @apply last:rounded-e-xl;
+  }
+}
+@utility nui-input-number-rounded-full {
+  .nui-input-number, .nui-input-number-outer {
+    @apply rounded-full;
+  }
+
+  .nui-input-number-buttons button {
+    @apply first:rounded-s-full;
+    @apply last:rounded-e-full;
+  }
+}
+@utility nui-input-number-sm {
+  .nui-input-number-label {
+    @apply pb-1 text-xs;
+  }
+
+  .nui-label-float {
+    @apply top-1.5;
+  }
+
+  .nui-input-number-icon, .nui-input-number-action {
+    @apply h-8 w-8;
+
+    .nui-input-number-icon-inner, .nui-input-number-action-inner {
+      @apply h-4 w-4;
+    }
+  }
+
+  .nui-input-number-placeload {
+    @apply h-8;
+  }
+
+  .nui-input-number-buttons button {
+    @apply h-6 w-6;
+  }
+}
+@utility nui-input-number-md {
+  .nui-input-number-label {
+    @apply pb-1 text-[0.825rem];
+  }
+
+  .nui-label-float {
+    @apply top-2.5;
+  }
+
+  .nui-input-number-icon, .nui-input-number-action {
+    @apply h-10 w-10;
+
+    .nui-input-number-icon-inner, .nui-input-number-action-inner {
+      @apply h-[1.15rem] w-[1.15rem];
+    }
+  }
+
+  .nui-input-number-placeload {
+    @apply h-10;
+  }
+
+  .nui-input-number-buttons button {
+    @apply  h-8 w-8;
+  }
+}
+@utility nui-input-number-lg {
+  .nui-input-number-label {
+    @apply pb-1 text-sm;
+  }
+
+  .nui-label-float {
+    @apply top-3.5;
+  }
+
+  .nui-input-number-icon, .nui-input-number-action {
+    @apply h-12 w-12;
+
+    .nui-input-number-icon-inner, .nui-input-number-action-inner {
+      @apply h-5 w-5;
+    }
+  }
+
+  .nui-input-number-placeload {
+    @apply h-12;
+  }
+
+  .nui-input-number-buttons button {
+    @apply h-10 w-10;
+  }
+}
+@utility nui-input-number-xl {
+  .nui-input-number-label {
+    @apply pb-1 text-sm;
+  }
+
+  .nui-label-float {
+    @apply top-[1.1rem];
+  }
+
+  .nui-input-number-icon, .nui-input-number-action {
+    @apply h-14 w-14;
+
+    .nui-input-number-icon-inner, .nui-input-number-action-inner {
+      @apply h-5 w-5;
+    }
+  }
+
+  .nui-input-number-placeload {
+    @apply h-14;
+  }
+
+  .nui-input-number-buttons button {
+    @apply h-12 w-12;
+  }
+}
+@utility nui-input-number-default {
+  .nui-input-number {
+    @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;
+  }
+
+  .nui-input-number-buttons button {
+    @apply bg-white dark:bg-muted-800 enabled:hover:bg-muted-100 dark:enabled:hover:bg-muted-700;
+    @apply border border-muted-200 dark:border-muted-700 enabled:focus:bg-muted-100 dark:enabled:focus:bg-muted-800;
+  }
+}
+@utility nui-input-number-default-contrast {
+  .nui-input-number {
+    @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;
+  }
+
+  .nui-input-number-buttons button {
+    @apply bg-white dark:bg-muted-800 enabled:hover:bg-white dark:enabled:hover:bg-muted-900;
+    @apply border border-muted-200 dark:border-muted-700 enabled:focus:bg-white dark:enabled:focus:bg-muted-900;
+  }
+}
+@utility nui-input-number-muted {
+  .nui-input-number {
+    @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;
+  }
+
+  .nui-input-number-buttons button {
+    @apply bg-white dark:bg-muted-800 enabled:hover:bg-white dark:enabled:hover:bg-muted-800;
+    @apply border border-muted-200 dark:border-muted-700 enabled:focus:bg-white dark:enabled:focus:bg-muted-800;
+  }
+}
+@utility nui-input-number-muted-contrast {
+  .nui-input-number {
+    @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-number-focus {
+  .nui-input-number {
+    @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-number-loading {
+  .nui-input-number {
+    @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent;
+  }
+
+  .nui-input-number:placeholder-shown ~ .nui-label-float {
+    @apply text-transparent;
+  }
+
+  .nui-input-number-icon {
+    @apply opacity-0;
+  }
+}
+@utility nui-input-number-label-float {
+  .nui-input-number {
+    @apply placeholder:text-transparent dark:placeholder:text-transparent;
+  }
+}
+@utility nui-input-number-error {
+  .nui-input-number {
+    @apply !border-danger-500 dark:!border-danger-500;
+  }
+
+  .nui-input-number-icon {
+    @apply !text-danger-500 dark:!text-danger-500;
+  }
+}
+@utility nui-has-icon {
+  .nui-input-number {
+    @apply h-8 py-1 text-xs leading-4 ps-8 pe-[3.75rem];
+  }
+}
+@utility nui-has-icon {
+  .nui-input-number {
+    @apply h-10 py-2 text-sm leading-5 ps-10 pe-[4.75rem];
+  }
+}
+@utility nui-has-icon {
+  .nui-input-number {
+    @apply h-12 py-2 text-sm leading-5 ps-11 pe-24;
+  }
+}
+@utility nui-has-icon {
+  .nui-input-number {
+    @apply h-14 py-2 text-base leading-5 ps-[3.25rem] pe-24;
+  }
+}
+@utility nui-has-action {
+  .nui-input-number {
+    @apply pe-8;
+  }
+}
+@utility nui-has-action {
+  .nui-input-number {
+    @apply pe-10;
+  }
+}
+@utility nui-has-action {
+  .nui-input-number {
+    @apply pe-12;
+  }
+}
+@utility nui-input-number-label-float {
+  .nui-label-float {
+    @apply start-8 -ms-8 -mt-7 text-xs;
+  }
+
+  .nui-input-number:focus-visible ~ .nui-label-float {
+    @apply !-ms-8 !-mt-7;
+  }
+
+  .nui-input-number:placeholder-shown ~ .nui-label-float {
+    @apply ms-0 mt-0;
+  }
+}
+@utility nui-input-number-label-float {
+  .nui-label-float {
+    @apply start-10 -ms-10 -mt-8 text-xs;
+  }
+
+  .nui-input-number:focus-visible ~ .nui-label-float {
+    @apply !-ms-10 !-mt-8 !text-xs;
+  }
+
+  .nui-input-number:placeholder-shown ~ .nui-label-float {
+    @apply ms-0 mt-0 text-[0.825rem];
+  }
+}
+@utility nui-input-number-label-float {
+  .nui-label-float {
+    @apply start-11 -ms-10 -mt-9 text-xs;
+  }
+
+  .nui-input-number:focus-visible ~ .nui-label-float {
+    @apply !-ms-10 !-mt-9 !text-xs;
+  }
+
+  .nui-input-number:placeholder-shown ~ .nui-label-float {
+    @apply ms-0 mt-0 text-[0.825rem];
+  }
+}
+@utility nui-input-number-label-float {
+  .nui-label-float {
+    @apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-xs;
+  }
+
+  .nui-input-number:focus-visible ~ .nui-label-float {
+    @apply !-ms-[3.25rem] !-mt-10 !text-xs;
+  }
+
+  .nui-input-number:placeholder-shown ~ .nui-label-float {
+    @apply ms-0 mt-0 text-[0.825rem];
+  }
+}