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

package/src/css/message.css

@@ -0,0 +1,245 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-message */
+
+@utility nui-message {
+  @apply relative flex gap-2 border;
+}
+@utility nui-message-icon-outer {
+  @apply flex h-10 w-10 shrink-0 items-center justify-center;
+
+  .nui-message-icon {
+    @apply h-5 w-5;
+    @apply text-white dark:text-white;
+  }
+}
+@utility nui-message-inner-text {
+  @apply inline-flex items-center leading-normal;
+  @apply font-sans text-sm;
+  @apply text-muted-800 dark:text-muted-200;
+}
+@utility nui-message-close-wrapper {
+  @apply absolute top-[-0.5rem] end-[-0.5rem] flex items-center justify-center bg-white dark:bg-muted-950 border border-muted-200 dark:border-muted-800 rounded-full h-8 w-8;
+}
+@utility nui-message-close {
+  @apply nui-focus flex cursor-pointer items-center justify-center shrink-0 h-6 w-6 rounded-full;
+  @apply text-muted-800 dark:text-muted-800;
+  @apply transition-colors duration-200;
+
+  .nui-close-icon {
+    @apply h-4 w-4;
+  }
+}
+@utility nui-has-text {
+  @apply py-2 ps-2 pe-6;
+}
+@utility nui-has-icon {
+  @apply py-1 ps-1 pe-6;
+}
+@utility nui-message-rounded-sm {
+  @apply rounded-md;
+
+  .nui-message-icon-outer {
+    @apply rounded-md;
+  }
+}
+@utility nui-message-rounded-md {
+  @apply rounded-lg;
+
+  .nui-message-icon-outer {
+    @apply rounded-lg;
+  }
+}
+@utility nui-message-rounded-lg {
+  @apply rounded-xl;
+
+  .nui-message-icon-outer {
+    @apply rounded-xl;
+  }
+}
+@utility nui-message-rounded-full {
+  @apply rounded-full;
+
+  .nui-message-icon-outer {
+    @apply rounded-full;
+  }
+}
+@utility nui-message-default {
+  @apply border-muted-200 dark:border-muted-700;
+  @apply bg-white dark:bg-muted-800;
+
+  .nui-message-icon-outer {
+    @apply text-white dark:text-white;
+    @apply bg-muted-600 dark:bg-muted-900;
+  }
+
+  .nui-message-inner-text {
+    @apply text-muted-500 dark:text-muted-400;
+  }
+
+  .nui-message-close {
+    @apply text-muted-500 dark:text-muted-500;
+    @apply hover:enabled:bg-muted-300/50 dark:hover:enabled:bg-muted-500/30;
+    @apply focus-visible:bg-muted-300/50 dark:focus-visible:bg-muted-500/30;
+    @apply active:enabled:bg-muted-300/20 dark:active:enabled:bg-muted-500/20;
+  }
+}
+@utility nui-message-default-contrast {
+  @apply border-muted-200 dark:border-muted-800;
+  @apply bg-white dark:bg-muted-950;
+
+  .nui-message-icon-outer {
+    @apply text-white dark:text-white;
+    @apply bg-muted-600 dark:bg-muted-900;
+  }
+
+  .nui-message-inner-text {
+    @apply text-muted-500 dark:text-muted-400;
+  }
+
+  .nui-message-close {
+    @apply text-muted-500 dark:text-muted-500;
+    @apply hover:enabled:bg-muted-300/50 dark:hover:enabled:bg-muted-500/30;
+    @apply focus-visible:bg-muted-300/50 dark:focus-visible:bg-muted-500/30;
+    @apply active:enabled:bg-muted-300/20 dark:active:enabled:bg-muted-500/20;
+  }
+}
+@utility nui-message-muted {
+  @apply border-muted-200 dark:border-muted-700;
+  @apply bg-muted-100 dark:bg-muted-500/10;
+
+  .nui-message-icon-outer {
+    @apply text-white dark:text-white;
+    @apply bg-muted-400 dark:bg-muted-900;
+  }
+
+  .nui-message-inner-text {
+    @apply text-muted-500 dark:text-muted-500;
+  }
+
+  .nui-message-close {
+    @apply text-muted-500 dark:text-muted-500;
+    @apply hover:enabled:bg-muted-300/50 dark:hover:enabled:bg-muted-500/30;
+    @apply focus-visible:bg-muted-300/50 dark:focus-visible:bg-muted-500/30;
+    @apply active:enabled:bg-muted-300/20 dark:active:enabled:bg-muted-500/20;
+  }
+}
+@utility nui-message-muted-contrast {
+  @apply border-muted-200 dark:border-muted-800;
+  @apply bg-muted-100 dark:bg-muted-950;
+
+  .nui-message-icon-outer {
+    @apply text-white dark:text-white;
+    @apply bg-muted-400 dark:bg-muted-900;
+  }
+
+  .nui-message-inner-text {
+    @apply text-muted-500 dark:text-muted-500;
+  }
+
+  .nui-message-close {
+    @apply text-muted-500 dark:text-muted-500;
+    @apply hover:enabled:bg-muted-300/50 dark:hover:enabled:bg-muted-500/30;
+    @apply focus-visible:bg-muted-300/50 dark:focus-visible:bg-muted-500/30;
+    @apply active:enabled:bg-muted-300/20 dark:active:enabled:bg-muted-500/20;
+  }
+}
+@utility nui-message-primary {
+  @apply border-primary-200 dark:border-primary-700;
+  @apply bg-primary-100 dark:bg-primary-500/10;
+
+  .nui-message-icon-outer {
+    @apply text-white dark:text-white;
+    @apply bg-primary-500 dark:bg-primary-500;
+  }
+
+  .nui-message-inner-text {
+    @apply text-primary-500 dark:text-primary-500;
+  }
+
+  .nui-message-close {
+    @apply text-primary-500 dark:text-primary-500;
+    @apply hover:enabled:bg-primary-300/50 dark:hover:enabled:bg-primary-500/30;
+    @apply focus-visible:bg-primary-300/50 dark:focus-visible:bg-primary-500/30;
+    @apply active:enabled:bg-primary-300/20 dark:active:enabled:bg-primary-500/20;
+  }
+}
+@utility nui-message-info {
+  @apply border-info-200 dark:border-info-700;
+  @apply bg-info-100 dark:bg-info-500/10;
+
+  .nui-message-icon-outer {
+    @apply text-white dark:text-white;
+    @apply bg-info-500 dark:bg-info-500;
+  }
+
+  .nui-message-inner-text {
+    @apply text-info-500 dark:text-info-500;
+  }
+
+  .nui-message-close {
+    @apply text-info-500 dark:text-info-500;
+    @apply hover:enabled:bg-info-300/50 dark:hover:enabled:bg-info-500/30;
+    @apply focus-visible:bg-info-300/50 dark:focus-visible:bg-info-500/30;
+    @apply active:enabled:bg-info-300/20 dark:active:enabled:bg-info-500/20;
+  }
+}
+@utility nui-message-success {
+  @apply border-success-200 dark:border-success-700;
+  @apply bg-success-100 dark:bg-success-500/10;
+
+  .nui-message-icon-outer {
+    @apply text-white dark:text-white;
+    @apply bg-success-500 dark:bg-success-500;
+  }
+
+  .nui-message-inner-text {
+    @apply text-success-500 dark:text-success-500;
+  }
+
+  .nui-message-close {
+    @apply text-success-500 dark:text-success-500;
+    @apply hover:enabled:bg-success-300/50 dark:hover:enabled:bg-success-500/30;
+    @apply focus-visible:bg-success-300/50 dark:focus-visible:bg-success-500/30;
+    @apply active:enabled:bg-success-300/20 dark:active:enabled:bg-success-500/20;
+  }
+}
+@utility nui-message-warning {
+  @apply border-warning-200 dark:border-warning-700;
+  @apply bg-warning-100 dark:bg-warning-500/10;
+
+  .nui-message-icon-outer {
+    @apply text-white dark:text-white;
+    @apply bg-warning-500 dark:bg-warning-500;
+  }
+
+  .nui-message-inner-text {
+    @apply text-warning-500 dark:text-warning-500;
+  }
+
+  .nui-message-close {
+    @apply text-warning-500 dark:text-warning-500;
+    @apply hover:enabled:bg-warning-300/50 dark:hover:enabled:bg-warning-500/30;
+    @apply focus-visible:bg-warning-300/50 dark:focus-visible:bg-warning-500/30;
+    @apply active:enabled:bg-warning-300/20 dark:active:enabled:bg-warning-500/20;
+  }
+}
+@utility nui-message-danger {
+  @apply border-danger-200 dark:border-danger-700;
+  @apply bg-danger-100 dark:bg-danger-500/10;
+
+  .nui-message-icon-outer {
+    @apply text-white dark:text-white;
+    @apply bg-danger-500 dark:bg-danger-500;
+  }
+
+  .nui-message-inner-text {
+    @apply text-danger-500 dark:text-danger-500;
+  }
+
+  .nui-message-close {
+    @apply text-danger-500 dark:text-danger-500;
+    @apply hover:enabled:bg-danger-300/50 dark:hover:enabled:bg-danger-500/30;
+    @apply focus-visible:bg-danger-300/50 dark:focus-visible:bg-danger-500/30;
+    @apply active:enabled:bg-danger-300/20 dark:active:enabled:bg-danger-500/20;
+  }
+}

package/src/css/modal.css

@@ -0,0 +1,51 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-modal */
+
+@utility nui-modal {
+  @apply fixed inset-0 z-[9999] flex items-center justify-center;
+}
+@utility nui-modal-inner {
+  @apply relative z-[9999];
+}
+@utility nui-modal-backdrop {
+  @apply bg-muted-800/70 dark:bg-muted-900/80 fixed inset-0;
+}
+@utility nui-modal-content {
+  @apply fixed inset-0;
+}
+@utility nui-modal-content-inner {
+  @apply flex w-full min-h-full items-center justify-center p-4 text-center;
+}
+@utility nui-modal-content-panel {
+  @apply w-full text-start align-middle transition-all;
+}
+@utility nui-modal-sm {
+  .nui-modal-content-panel {
+    @apply max-w-sm;
+  }
+}
+@utility nui-modal-md {
+  .nui-modal-content-panel {
+    @apply max-w-md;
+  }
+}
+@utility nui-modal-lg {
+  .nui-modal-content-panel {
+    @apply max-w-xl;
+  }
+}
+@utility nui-modal-xl {
+  .nui-modal-content-panel {
+    @apply max-w-2xl;
+  }
+}
+@utility nui-modal-2xl {
+  .nui-modal-content-panel {
+    @apply max-w-3xl;
+  }
+}
+@utility nui-modal-3xl {
+  .nui-modal-content-panel {
+    @apply max-w-5xl;
+  }
+}

package/src/css/pagination.css

@@ -0,0 +1,93 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-pagination */
+
+@utility nui-pagination {
+  @apply inline-flex w-full flex-col md:flex-row md:justify-between;
+
+  &.nui-pagination-rounded-sm .nui-pagination-list, &.nui-pagination-rounded-sm .nui-pagination-buttons, &.nui-pagination-rounded-sm .nui-pagination-buttons .nui-pagination-button,  &.nui-pagination-rounded-sm .nui-pagination-link, &.nui-pagination-rounded-sm .nui-pagination-ellipsis {
+    @apply rounded-md;
+  }
+
+  &.nui-pagination-rounded-md .nui-pagination-list, &.nui-pagination-rounded-md .nui-pagination-buttons, &.nui-pagination-rounded-md .nui-pagination-buttons .nui-pagination-button,  &.nui-pagination-rounded-md .nui-pagination-link, &.nui-pagination-rounded-md .nui-pagination-ellipsis {
+    @apply rounded-lg;
+  }
+
+  &.nui-pagination-rounded-lg .nui-pagination-list, &.nui-pagination-rounded-lg .nui-pagination-buttons, &.nui-pagination-rounded-lg .nui-pagination-buttons .nui-pagination-button,  &.nui-pagination-rounded-lg .nui-pagination-link, &.nui-pagination-rounded-lg .nui-pagination-ellipsis {
+    @apply rounded-xl;
+  }
+
+  &.nui-pagination-rounded-full .nui-pagination-list, &.nui-pagination-rounded-full .nui-pagination-buttons, &.nui-pagination-rounded-full .nui-pagination-buttons .nui-pagination-button,  &.nui-pagination-rounded-full .nui-pagination-link, &.nui-pagination-rounded-full .nui-pagination-ellipsis {
+    @apply rounded-full;
+  }
+}
+@utility nui-pagination-list {
+  @apply inline-flex flex-wrap gap-2 md:gap-1 p-1 mb-4 md:mb-0;
+  @apply bg-muted-100 dark:bg-muted-700;
+  @apply border border-muted-200 dark:border-muted-600;
+}
+@utility nui-pagination-buttons {
+  @apply flex items-center justify-end gap-1 border p-1;
+  @apply bg-muted-100 dark:bg-muted-700;
+  @apply border-muted-200 dark:border-muted-600;
+
+  .nui-pagination-button {
+    @apply nui-focus flex h-10 w-full items-center justify-center md:w-10;
+    @apply font-sans text-sm;
+    @apply text-muted-500 dark:text-muted-400;
+    @apply hover:text-muted-700 dark:hover:text-muted-400;
+    @apply bg-white dark:bg-muted-800;
+    @apply hover:bg-muted-100 dark:hover:bg-muted-900;
+    @apply border-muted-200 dark:border-muted-700;
+    @apply transition-all duration-300;
+
+    .nui-pagination-button-icon {
+      @apply block h-4 w-4;
+    }
+  }
+}
+@utility nui-pagination-link {
+  @apply nui-focus flex items-center justify-center mb-0 inline-flex flex-wrap gap-2 md:gap-1;
+  @apply h-10 px-4;
+  @apply font-sans text-sm;
+  @apply bg-muted-100 dark:bg-muted-700;
+  @apply border border-muted-200 dark:border-muted-600;
+
+  &:not(.nui-active) {
+    @apply text-muted-500 dark:text-muted-400;
+    @apply hover:text-muted-700 dark:hover:text-muted-400;
+    @apply bg-white dark:bg-muted-800;
+    @apply hover:bg-muted-100 dark:hover:bg-muted-900;
+    @apply border-muted-200 dark:border-muted-700;
+  }
+}
+@utility nui-pagination-primary {
+  .nui-pagination-link.nui-active {
+    @apply text-primary-invert dark:text-primary-invert;
+    @apply bg-primary-500 dark:bg-primary-500;
+    @apply border-primary-500 dark:border-primary-500;
+    @apply shadow-sm shadow-primary-500/50 dark:shadow-primary-500/20;
+  }
+}
+@utility nui-pagination-dark {
+  .nui-pagination-link.nui-active {
+    @apply text-muted-100 dark:text-muted-900;
+    @apply bg-muted-900 dark:bg-muted-100;
+    @apply border-muted-900 dark:border-muted-100;
+    @apply shadow-sm shadow-muted-300/30 dark:shadow-muted-800/20;
+  }
+}
+@utility nui-pagination-black {
+  .nui-pagination-link.nui-active {
+    @apply text-white dark:text-black;
+    @apply bg-black dark:bg-white;
+    @apply border-black dark:border-white;
+    @apply shadow-sm shadow-muted-300/30 dark:shadow-muted-800/20;
+  }
+}
+@utility nui-pagination-ellipsis {
+  @apply select-none flex h-10 w-10 items-center justify-center;
+  @apply font-sans text-sm;
+  @apply text-muted-500 dark:text-muted-400;
+  @apply bg-white dark:bg-muted-800;
+  @apply border-muted-200 dark:border-muted-700;
+}

package/src/css/paragraph.css

@@ -0,0 +1,78 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-paragraph */
+
+@utility nui-paragraph {
+  @apply font-sans;
+}
+@utility nui-paragraph-xs {
+  @apply text-xs;
+}
+@utility nui-paragraph-sm {
+  @apply text-sm;
+}
+@utility nui-paragraph-md {
+  @apply text-base;
+}
+@utility nui-paragraph-lg {
+  @apply text-lg;
+}
+@utility nui-paragraph-xl {
+  @apply text-xl;
+}
+@utility nui-paragraph-2xl {
+  @apply text-2xl;
+}
+@utility nui-paragraph-3xl {
+  @apply text-3xl;
+}
+@utility nui-paragraph-4xl {
+  @apply text-4xl;
+}
+@utility nui-paragraph-5xl {
+  @apply text-5xl;
+}
+@utility nui-paragraph-6xl {
+  @apply text-6xl;
+}
+@utility nui-paragraph-7xl {
+  @apply text-7xl;
+}
+@utility nui-paragraph-8xl {
+  @apply text-8xl;
+}
+@utility nui-paragraph-9xl {
+  @apply text-9xl;
+}
+@utility nui-weight-light {
+  @apply font-light;
+}
+@utility nui-weight-normal {
+  @apply font-normal;
+}
+@utility nui-weight-medium {
+  @apply font-medium;
+}
+@utility nui-weight-semibold {
+  @apply font-semibold;
+}
+@utility nui-weight-bold {
+  @apply font-bold;
+}
+@utility nui-weight-extrabold {
+  @apply font-extrabold;
+}
+@utility nui-lead-none {
+  @apply leading-none;
+}
+@utility nui-lead-normal {
+  @apply leading-normal;
+}
+@utility nui-lead-tight {
+  @apply leading-tight;
+}
+@utility nui-lead-snug {
+  @apply leading-snug;
+}
+@utility nui-lead-loose {
+  @apply leading-loose;
+}

package/src/css/placeholder-page.css

@@ -0,0 +1,44 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-placeholder-page */
+
+@utility nui-placeholder-page {
+  @apply flex min-h-[400px] items-center justify-center;
+
+  &.nui-placeholder-xs .nui-placeholder-page-img {
+    @apply max-w-xs;
+  }
+
+  &.nui-placeholder-sm .nui-placeholder-page-img {
+    @apply max-w-sm;
+  }
+
+  &.nui-placeholder-md .nui-placeholder-page-img {
+    @apply max-w-md;
+  }
+
+  &.nui-placeholder-lg .nui-placeholder-page-img {
+    @apply max-w-lg;
+  }
+
+  &.nui-placeholder-xl .nui-placeholder-page-img {
+    @apply max-w-xl;
+  }
+}
+@utility nui-placeholder-page-inner {
+  @apply mx-auto w-full text-center;
+}
+@utility nui-placeholder-page-img {
+  @apply mx-auto block;
+}
+@utility nui-placeholder-page-content {
+  @apply mx-auto max-w-sm;
+}
+@utility nui-placeholder-page-actions {
+  @apply mt-4 flex justify-center gap-2;
+}
+@utility nui-placeholder-page-title {
+  @apply text-muted-800 dark:text-white mb-1 mt-4;
+}
+@utility nui-placeholder-page-subtitle {
+  @apply text-muted-400 dark:text-muted-400;
+}

package/src/css/placeload.css

@@ -0,0 +1,13 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-placeload */
+
+@utility nui-placeload {
+  position: relative;
+  background: linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%);
+  background-size: 1200px 104px;
+}
+.dark .nui-placeload {
+  position: relative;
+  background: linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%);
+  background-size: 1200px 104px;
+}

package/src/css/progress-circle.css

@@ -0,0 +1,18 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-progress-circle */
+
+@utility nui-progress-circle {
+  @apply relative inline-flex items-center justify-center;
+
+  circle:nth-child(2) {
+    @apply stroke-current transition-all duration-500;
+  }
+
+  &.nui-progress-default circle:first-child {
+    @apply text-muted-200 dark:text-muted-700 stroke-current;
+  }
+
+  &.nui-progress-contrast circle:first-child {
+    @apply text-muted-200 dark:text-muted-200 stroke-current;
+  }
+}

package/src/css/progress.css

@@ -0,0 +1,90 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-progress */
+
+@utility nui-progress {
+  @apply relative w-full overflow-hidden;
+
+  &.nui-progress-rounded-sm, &.nui-progress-rounded-sm .nui-progress-bar {
+    @apply rounded;
+  }
+
+  &.nui-progress-rounded-md, &.nui-progress-rounded-md .nui-progress-bar {
+    @apply rounded-md;
+  }
+
+  &.nui-progress-rounded-lg, &.nui-progress-rounded-lg .nui-progress-bar {
+    @apply rounded-lg;
+  }
+
+  &.nui-progress-rounded-full, &.nui-progress-rounded-full .nui-progress-bar {
+    @apply rounded-full;
+  }
+
+  &.nui-progress-indeterminate .nui-progress-bar {
+    @apply w-full;
+  }
+}
+@utility nui-progress-bar {
+  @apply absolute start-0 top-0 h-full transition-all duration-300;
+}
+@utility nui-progress-default {
+  @apply bg-muted-200 dark:bg-muted-700;
+}
+@utility nui-progress-contrast {
+  @apply bg-muted-200 dark:bg-muted-900;
+}
+@utility nui-progress-xs {
+  @apply h-1;
+}
+@utility nui-progress-sm {
+  @apply h-2;
+}
+@utility nui-progress-md {
+  @apply h-3;
+}
+@utility nui-progress-lg {
+  @apply h-3;
+}
+@utility nui-progress-xl {
+  @apply h-5;
+}
+@utility nui-progress-primary {
+  .nui-progress-bar {
+    @apply bg-primary-500;
+  }
+}
+@utility nui-progress-info {
+  .nui-progress-bar {
+    @apply bg-info-500;
+  }
+}
+@utility nui-progress-success {
+  .nui-progress-bar {
+    @apply bg-success-500;
+  }
+}
+@utility nui-progress-warning {
+  .nui-progress-bar {
+    @apply bg-warning-500;
+  }
+}
+@utility nui-progress-danger {
+  .nui-progress-bar {
+    @apply bg-danger-500;
+  }
+}
+@utility nui-progress-light {
+  .nui-progress-bar {
+    @apply bg-muted-500 dark:bg-muted-400;
+  }
+}
+@utility nui-progress-dark {
+  .nui-progress-bar {
+    @apply bg-muted-900 dark:bg-muted-100;
+  }
+}
+@utility nui-progress-black {
+  .nui-progress-bar {
+    @apply bg-black dark:bg-white;
+  }
+}

package/src/css/prose.css

@@ -0,0 +1,22 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-prose */
+
+@utility nui-prose {
+  @apply prose prose-primary prose-muted dark:prose-invert;
+  @apply prose-table:bg-white dark:prose-table:bg-muted-800;
+  @apply prose-table:border-separate prose-table:border-spacing-0 prose-table:border prose-table:border-muted-200 dark:prose-table:border-muted-700;
+  @apply prose-th:p-4 prose-td:p-4;
+  @apply prose-td:border-t prose-td:border-muted-200 dark:prose-td:border-muted-700;
+}
+@utility nui-prose-rounded-none {
+  @apply prose-img:rounded-none prose-pre:rounded-none prose-table:rounded-none;
+}
+@utility nui-prose-rounded-sm {
+  @apply prose-img:rounded prose-pre:rounded prose-table:rounded;
+}
+@utility nui-prose-rounded-md {
+  @apply prose-img:rounded-md prose-pre:rounded-md prose-table:rounded-md;
+}
+@utility nui-prose-rounded-lg {
+  @apply prose-img:rounded-lg prose-pre:rounded-lg prose-table:rounded-lg;
+}