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

package/src/css/listbox.css

@@ -0,0 +1,511 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-listbox */
+
+@utility nui-listbox {
+  @apply relative w-full;
+
+  .nui-listbox-label, .nui-label-float {
+    @apply nui-label;
+  }
+
+  &:not(.nui-listbox-loading) {
+    .nui-listbox-button ~ .nui-label-float {
+      @apply text-muted-300 dark:text-muted-600;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-listbox-sm {
+    .nui-listbox-button {
+      @apply h-8 py-1 text-xs leading-4 px-2;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-listbox-md {
+    .nui-listbox-button {
+      @apply h-10 py-2 text-sm leading-5 px-3;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-listbox-lg {
+    .nui-listbox-button {
+      @apply h-12 py-2 text-sm leading-5 px-4;
+    }
+  }
+
+  &:not(.nui-has-icon).nui-listbox-xl {
+    .nui-listbox-button {
+      @apply h-14 py-2 text-base leading-5 px-4;
+    }
+  }
+
+  &.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-sm {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-7 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
+      @apply !-ms-3 !-mt-7 !text-primary-500;
+    }
+
+    .nui-listbox-button ~ .nui-label-float {
+      @apply ms-0 mt-0;
+    }
+  }
+
+  &.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-md {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-8 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
+      @apply !-ms-3 !-mt-8 !text-xs !text-primary-500;
+    }
+
+    .nui-listbox-button ~ .nui-label-float {
+      @apply ms-0 mt-0 text-xs;
+    }
+  }
+
+  &.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-lg {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-9 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
+      @apply !-ms-3 !-mt-9 !text-xs !text-primary-500;
+    }
+
+    .nui-listbox-button ~ .nui-label-float {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
+  }
+
+  &.nui-listbox-label-float:not(.nui-has-icon).nui-listbox-xl {
+    .nui-label-float {
+      @apply start-3 -ms-3 -mt-10 text-xs text-transparent;
+    }
+
+    .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
+      @apply !-ms-3 !-mt-10 !text-xs !text-primary-500;
+    }
+
+    .nui-listbox-button ~ .nui-label-float {
+      @apply ms-0 mt-0 text-[0.825rem];
+    }
+  }
+}
+@utility nui-label-float {
+  @apply pointer-events-none absolute inline-flex select-none items-center leading-none;
+  @apply text-primary-500 h-5;
+  @apply transition-all duration-300;
+}
+@utility nui-listbox-outer {
+  @apply relative;
+}
+@utility nui-listbox-button {
+  @apply nui-focus relative w-full flex items-center gap-2 pe-12 ps-4 border leading-5 disabled:cursor-not-allowed disabled:opacity-75;
+  @apply font-sans text-sm text-start;
+
+  .nui-listbox-button-inner {
+    @apply flex w-full items-center;
+
+    .nui-icon-box {
+      @apply !h-6 !w-6;
+      @apply -ms-2 me-2;
+
+      .nui-icon-box-inner {
+        @apply h-4 w-4;
+      }
+    }
+
+    .nui-listbox-placeholder {
+      @apply text-muted-300 dark:text-muted-500 truncate text-start;
+    }
+  }
+
+  &:focus-visible ~ .nui-listbox-chevron .nui-listbox-chevron-inner, &:focus ~ .nui-listbox-chevron .nui-listbox-chevron-inner {
+    @apply !rotate-180;
+  }
+}
+@utility nui-listbox-icon {
+  @apply text-muted-400 dark:text-muted-400;
+  @apply transition-colors duration-300;
+  @apply absolute start-0 top-0 z-10 flex items-center justify-center;
+}
+@utility nui-listbox-chevron {
+  @apply pointer-events-none absolute top-0 end-0 flex items-center justify-center border-s;
+
+  .nui-listbox-chevron-inner {
+    @apply transition-transform duration-300;
+    @apply h-4 w-4;
+    @apply text-muted-400 dark:text-muted-400;
+  }
+}
+@utility nui-listbox-options {
+  @apply nui-slimscroll absolute z-10 mt-1 max-h-60 w-full overflow-auto p-2;
+  @apply text-base sm:text-sm;
+  @apply focus:ring-primary-500/50 dark:focus:ring-primary-500/50 focus:outline-none focus:ring-1;
+  @apply shadow-lg shadow-muted-300/30 dark:shadow-muted-800/20;
+}
+@utility nui-listbox-option {
+  @apply relative flex gap-2 cursor-pointer select-none items-center px-3 py-2;
+  @apply transition-colors duration-300;
+
+  .nui-icon-box {
+    @apply text-muted-200 dark:text-muted-400 -ms-2 me-1;
+
+    .nui-icon-box-inner {
+      @apply h-5 w-5;
+    }
+  }
+
+  .nui-listbox-selected-icon {
+    @apply text-primary-600 dark:text-primary-600 ms-auto flex items-center;
+  }
+
+  .nui-listbox-selected-icon-inner {
+    @apply h-4 w-4;
+  }
+
+  .nui-listbox-option-inner {
+    .nui-listbox-heading {
+      @apply block truncate;
+      @apply text-muted-800 dark:text-muted-100;
+    }
+
+    .nui-listbox-text {
+      @apply text-muted-400 dark:text-muted-400;
+    }
+  }
+
+  &:not(.nui-active), &:not(:hover) {
+    @apply text-muted-600 dark:text-muted-200;
+  }
+
+  &.nui-active, &:hover {
+    @apply text-primary-600 dark:text-primary-600;
+    @apply bg-primary-500/10 dark:bg-primary-500/10;
+  }
+}
+@utility nui-listbox-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-listbox-sm {
+  .nui-listbox-label {
+    @apply pb-1 text-xs;
+  }
+
+  .nui-label-float {
+    @apply top-1.5;
+  }
+
+  .nui-listbox-icon {
+    @apply h-8 w-8;
+
+    .nui-listbox-icon-inner {
+      @apply h-4 w-4;
+    }
+  }
+
+  .nui-listbox-placeload {
+    @apply h-8;
+  }
+
+  .nui-listbox-chevron {
+    @apply h-8 w-8;
+
+    .nui-listbox-chevron-inner {
+      @apply h-3 w-3;
+    }
+  }
+}
+@utility nui-listbox-md {
+  .nui-listbox-label {
+    @apply pb-1 text-[0.825rem];
+  }
+
+  .nui-label-float {
+    @apply top-2.5;
+  }
+}
+@utility nui-listbox-icon {
+  @apply h-10 w-10;
+
+  .nui-listbox-icon-inner {
+    @apply h-[1.15rem] w-[1.15rem];
+  }
+}
+@utility nui-listbox-placeload {
+  @apply h-10;
+}
+@utility nui-listbox-chevron {
+  @apply h-10 w-10;
+
+  .nui-listbox-chevron-inner {
+    @apply h-4 w-4;
+  }
+}
+@utility nui-listbox-lg {
+  .nui-listbox-label {
+    @apply pb-1 text-sm;
+  }
+
+  .nui-label-float {
+    @apply top-3.5;
+  }
+
+  .nui-listbox-icon {
+    @apply h-12 w-12;
+
+    .nui-listbox-icon-inner {
+      @apply h-5 w-5;
+    }
+  }
+
+  .nui-listbox-placeload {
+    @apply h-12;
+  }
+
+  .nui-listbox-chevron {
+    @apply h-12 w-12;
+
+    .nui-listbox-chevron-inner {
+      @apply h-5 w-5;
+    }
+  }
+}
+@utility nui-listbox-xl {
+  .nui-listbox-label {
+    @apply pb-1 text-sm;
+  }
+
+  .nui-label-float {
+    @apply top-[1.1rem];
+  }
+
+  .nui-listbox-icon {
+    @apply h-14 w-14;
+
+    .nui-listbox-icon-inner {
+      @apply h-5 w-5;
+    }
+  }
+
+  .nui-listbox-placeload {
+    @apply h-14;
+  }
+
+  .nui-listbox-chevron {
+    @apply h-14 w-14;
+
+    .nui-listbox-chevron-inner {
+      @apply h-5 w-5;
+    }
+  }
+}
+@utility nui-listbox-rounded-sm {
+  .nui-listbox-button, .nui-listbox-options, .nui-listbox-option {
+    @apply rounded-md;
+  }
+}
+@utility nui-listbox-rounded-md {
+  .nui-listbox-button, .nui-listbox-options, .nui-listbox-option {
+    @apply rounded-lg;
+  }
+}
+@utility nui-listbox-rounded-lg {
+  .nui-listbox-button, .nui-listbox-options, .nui-listbox-option {
+    @apply rounded-xl;
+  }
+}
+@utility nui-listbox-rounded-full {
+  .nui-listbox-button {
+    @apply rounded-full;
+  }
+
+  .nui-listbox-option, .nui-listbox-options {
+    @apply rounded-xl;
+  }
+}
+@utility nui-listbox-default {
+  .nui-listbox-button {
+    @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 placeholder-muted-300 dark:placeholder-muted-500;
+    @apply focus:shadow-lg focus:shadow-muted-300/30 dark:focus:shadow-muted-800/20;
+  }
+
+  .nui-listbox-chevron {
+    @apply border-muted-200 dark:border-muted-700;
+  }
+
+  .nui-listbox-options {
+    @apply bg-white dark:bg-muted-700;
+    @apply border border-muted-200 dark:border-muted-600;
+  }
+}
+@utility nui-listbox-default-contrast {
+  .nui-listbox-button {
+    @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-muted-300 dark:placeholder-muted-600;
+    @apply focus:shadow-lg focus:shadow-muted-300/30 dark:focus:shadow-muted-800/20;
+  }
+
+  .nui-listbox-chevron {
+    @apply border-muted-300 dark:border-muted-800;
+  }
+
+  .nui-listbox-options {
+    @apply bg-white dark:bg-muted-950;
+    @apply border border-muted-200 dark:border-muted-800;
+  }
+}
+@utility nui-listbox-muted {
+  .nui-listbox-button {
+    @apply text-muted-600 dark:text-muted-200;
+    @apply bg-muted-100 dark:bg-muted-900;
+    @apply border border-muted-200 dark:border-muted-700;
+    @apply placeholder-muted-300 dark:placeholder-muted-500;
+    @apply focus:shadow-lg focus:shadow-muted-300/30 dark:focus:shadow-muted-800/20;
+  }
+
+  .nui-listbox-chevron {
+    @apply border-muted-200 dark:border-muted-700;
+  }
+
+  .nui-listbox-options {
+    @apply bg-white dark:bg-muted-700;
+    @apply border border-muted-200 dark:border-muted-600;
+  }
+}
+@utility nui-listbox-muted-contrast {
+  .nui-listbox-button {
+    @apply text-muted-600 dark:text-muted-200;
+    @apply bg-muted-100 dark:bg-muted-950;
+    @apply border border-muted-200 dark:border-muted-800;
+    @apply placeholder-muted-300 dark:placeholder-muted-600;
+    @apply focus:shadow-lg focus:shadow-muted-300/30 dark:focus:shadow-muted-800/20;
+  }
+
+  .nui-listbox-chevron {
+    @apply border-muted-300 dark:border-muted-800;
+  }
+
+  .nui-listbox-options {
+    @apply bg-white dark:bg-muted-950;
+    @apply border border-muted-200 dark:border-muted-800;
+  }
+}
+@utility nui-listbox-focus {
+  .nui-listbox-button {
+    @apply transition-colors duration-300;
+    @apply focus:!border-primary-500 dark:focus:!border-primary-500;
+    @apply focus:hover:!border-primary-500 dark:focus:hover:!border-primary-500;
+  }
+}
+@utility nui-listbox-loading {
+  .nui-listbox-button {
+    @apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent pointer-events-none;
+  }
+
+  .nui-listbox-button ~ .nui-label-float {
+    @apply text-transparent;
+  }
+
+  .nui-listbox-icon {
+    @apply opacity-0;
+  }
+}
+@utility nui-listbox-label-float {
+  .nui-listbox-button {
+    @apply placeholder:text-transparent dark:placeholder:text-transparent;
+  }
+}
+@utility nui-listbox-error {
+  .nui-listbox-button {
+    @apply !border-danger-500 dark:!border-danger-500;
+  }
+
+  .nui-listbox-icon {
+    @apply !text-danger-500 dark:!text-danger-500;
+  }
+}
+@utility nui-has-icon {
+  .nui-listbox-button {
+    @apply h-8 py-1 text-xs leading-4 pe-3 ps-8;
+  }
+}
+@utility nui-has-icon {
+  .nui-listbox-button {
+    @apply h-10 py-2 text-sm leading-5 pe-4 ps-10;
+  }
+}
+@utility nui-has-icon {
+  .nui-listbox-button {
+    @apply h-12 py-2 text-sm leading-5 pe-4 ps-11;
+  }
+}
+@utility nui-has-icon {
+  .nui-listbox-button {
+    @apply h-14 py-2 text-base leading-5 pe-4 ps-12;
+  }
+}
+@utility nui-listbox-label-float {
+  .nui-label-float {
+    @apply start-8 -ms-8 -mt-7 text-xs text-transparent;
+  }
+
+  .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
+    @apply !-ms-8 !-mt-7 !text-primary-500;
+  }
+
+  .nui-listbox-button ~ .nui-label-float {
+    @apply ms-0 mt-0;
+  }
+}
+@utility nui-listbox-label-float {
+  .nui-label-float {
+    @apply start-10 -ms-10 -mt-8 text-xs text-transparent;
+  }
+
+  .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
+    @apply !-ms-10 !-mt-8 !text-xs !text-primary-500;
+  }
+
+  .nui-listbox-button ~ .nui-label-float {
+    @apply ms-0 mt-0 text-[0.825rem];
+  }
+}
+@utility nui-listbox-label-float {
+  .nui-label-float {
+    @apply start-11 -ms-10 -mt-9 text-xs text-transparent;
+  }
+
+  .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
+    @apply !-ms-10 !-mt-9 !text-xs !text-primary-500;
+  }
+
+  .nui-listbox-button ~ .nui-label-float {
+    @apply ms-0 mt-0 text-[0.825rem];
+  }
+}
+@utility nui-listbox-label-float {
+  .nui-label-float {
+    @apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-xs text-transparent;
+  }
+
+  .nui-listbox-button:focus-visible ~ .nui-label-float, .nui-listbox-button:focus ~ .nui-label-float, .nui-label-float-active {
+    @apply !-ms-[3.25rem] !-mt-10 !text-xs !text-primary-500;
+  }
+
+  .nui-listbox-button ~ .nui-label-float {
+    @apply ms-0 mt-0 text-[0.825rem];
+  }
+}

package/src/css/mark.css

@@ -0,0 +1,7 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-mark */
+
+@utility nui-mark {
+  @apply bg-primary-100 dark:bg-primary-800;
+  @apply text-primary-800 dark:text-primary-200;
+}

package/src/css/mask.css

@@ -0,0 +1,23 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-mask */
+
+@utility nui-mask {
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+@utility nui-mask-hex {
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+');
+}
+@utility nui-mask-hexed {
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=');
+}
+@utility nui-mask-deca {
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=');
+}
+@utility nui-mask-blob {
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==');
+}
+@utility nui-mask-diamond {
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
+}

package/src/css/message-text.css

@@ -0,0 +1,72 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-message-text */
+
+@utility nui-message-text {
+  @apply relative p-5;
+}
+@utility nui-message-head {
+  @apply flex items-center gap-2 mb-3;
+}
+@utility nui-message-dot {
+  @apply inline-block h-2 w-2 rounded-full;
+}
+@utility nui-message-close {
+  @apply absolute top-2 end-2;
+}
+@utility nui-message-rounded-sm {
+  @apply rounded-md;
+}
+@utility nui-message-rounded-md {
+  @apply rounded-lg;
+}
+@utility nui-message-rounded-lg {
+  @apply rounded-xl;
+}
+@utility nui-message-low-contrast {
+  @apply bg-white dark:bg-muted-800;
+  @apply border border-muted-300 dark:border-muted-700;
+}
+@utility nui-message-high-contrast {
+  @apply bg-white dark:bg-muted-950;
+  @apply border border-muted-300 dark:border-muted-800;
+}
+@utility nui-message-default {
+  .nui-message-dot {
+    @apply bg-muted-300 dark:bg-muted-700;
+  }
+}
+@utility nui-message-primary {
+  .nui-message-dot {
+    @apply bg-primary-500 dark:bg-primary-500;
+  }
+}
+@utility nui-message-info {
+  .nui-message-dot {
+    @apply bg-info-500 dark:bg-info-500;
+  }
+}
+@utility nui-message-success {
+  .nui-message-dot {
+    @apply bg-success-500 dark:bg-success-500;
+  }
+}
+@utility nui-message-warning {
+  .nui-message-dot {
+    @apply bg-warning-500 dark:bg-warning-500;
+  }
+}
+@utility nui-message-danger {
+  .nui-message-dot {
+    @apply bg-danger-500 dark:bg-danger-500;
+  }
+}
+@utility nui-message-dark {
+  .nui-message-dot {
+    @apply bg-muted-900 dark:bg-muted-100;
+  }
+}
+@utility nui-message-black {
+  .nui-message-dot {
+    @apply bg-black dark:bg-white;
+  }
+}