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

package/src/css/checkbox.css

@@ -0,0 +1,99 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-checkbox */
+
+@utility nui-checkbox {
+  @apply relative inline-flex items-start gap-1;
+
+  &.nui-checkbox-rounded-sm .nui-checkbox-outer, &.nui-checkbox-rounded-sm .nui-checkbox-inner {
+    @apply rounded;
+  }
+
+  &.nui-checkbox-rounded-md .nui-checkbox-outer, &.nui-checkbox-rounded-md .nui-checkbox-inner {
+    @apply rounded-md;
+  }
+
+  &.nui-checkbox-rounded-lg .nui-checkbox-outer, &.nui-checkbox-rounded-lg .nui-checkbox-inner {
+    @apply rounded-lg;
+  }
+
+  &.nui-checkbox-rounded-full .nui-checkbox-outer, &.nui-checkbox-rounded-full .nui-checkbox-inner {
+    @apply rounded-full;
+  }
+}
+@utility nui-checkbox-outer {
+  @apply nui-focus relative flex items-center justify-center h-5 w-5 shrink-0 cursor-pointer disabled:cursor-not-allowed overflow-hidden;
+}
+@utility nui-checkbox-inner {
+  @apply absolute start-0 top-0 z-0 h-full w-full;
+  @apply bg-white dark:bg-muted-700;
+  @apply border-2 border-muted-400 dark:border-muted-700;
+}
+@utility nui-icon-check {
+  @apply pointer-events-none absolute z-10 fill-current translate-y-6 opacity-0;
+  @apply h-2.5 w-2.5;
+  @apply transition-all duration-300;
+}
+@utility nui-icon-indeterminate {
+  @apply pointer-events-none absolute z-10 fill-current translate-y-6 opacity-0;
+  @apply h-2.5 w-2.5;
+  @apply transition-all duration-300;
+}
+@utility nui-checkbox-input {
+  @apply absolute z-20 h-5 w-5 cursor-pointer disabled:cursor-not-allowed opacity-0;
+
+  &:checked ~ .nui-checkbox-inner, &:indeterminate ~ .nui-checkbox-inner {
+    @apply border-current dark:border-current;
+  }
+
+  &:checked ~ .nui-icon-check {
+    @apply translate-y-0 opacity-100;
+  }
+
+  &:indeterminate ~ .nui-icon-check {
+    @apply !translate-y-6;
+  }
+
+  &:indeterminate ~ .nui-icon-indeterminate {
+    @apply !translate-y-0 !opacity-100;
+  }
+}
+@utility nui-checkbox-label-wrapper {
+  @apply inline-flex flex-col;
+}
+@utility nui-checkbox-label-text {
+  @apply font-sans text-sm ms-1 cursor-pointer select-none;
+  @apply text-muted-400 dark:text-muted-400;
+}
+@utility nui-checkbox-error {
+  @apply ms-1 inline-block;
+}
+@utility nui-checkbox-default {
+  @apply text-muted-600 dark:text-muted-200;
+}
+@utility nui-checkbox-muted {
+  @apply text-muted-400 dark:text-muted-400;
+}
+@utility nui-checkbox-light {
+  @apply text-white dark:text-white;
+}
+@utility nui-checkbox-dark {
+  @apply text-muted-900 dark:text-muted-100;
+}
+@utility nui-checkbox-black {
+  @apply text-black dark:text-white;
+}
+@utility nui-checkbox-primary {
+  @apply text-primary-500 dark:text-primary-500;
+}
+@utility nui-checkbox-info {
+  @apply text-info-500 dark:text-info-500;
+}
+@utility nui-checkbox-success {
+  @apply text-success-500 dark:text-success-500;
+}
+@utility nui-checkbox-warning {
+  @apply text-warning-500 dark:text-warning-500;
+}
+@utility nui-checkbox-danger {
+  @apply text-danger-500 dark:text-danger-500;
+}

package/src/css/dropdown-divider.css

@@ -0,0 +1,6 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-dropdown-divider */
+
+@utility nui-dropdown-divider {
+  @apply my-2 block h-px w-full border-t border-muted-200 dark:border-muted-700;
+}

package/src/css/dropdown-item.css

@@ -0,0 +1,62 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-dropdown-item */
+
+@utility nui-dropdown-item {
+  @apply nui-focus flex w-full items-center justify-start gap-2 px-3 py-2 cursor-pointer;
+  @apply text-start font-sans text-sm;
+  @apply transition-colors duration-300;
+
+  &:not(.nui-active) {
+    @apply text-muted-500 dark:text-muted-500;
+  }
+}
+@utility nui-item-content {
+  @apply grow;
+}
+@utility nui-item-disabled {
+  @apply opacity-50 pointer-events-none;
+}
+@utility nui-item-default {
+  @apply hover:bg-muted-100 dark:hover:bg-muted-700;
+
+  &.nui-active {
+    @apply bg-muted-100 dark:bg-muted-700;
+  }
+}
+@utility nui-item-contrast {
+  @apply hover:bg-muted-100 dark:hover:bg-muted-900;
+
+  &.nui-active {
+    @apply bg-muted-100 dark:bg-muted-900;
+  }
+}
+@utility nui-item-primary {
+  @apply hover:text-primary-500 dark:hover:text-primary-500;
+}
+@utility nui-item-info {
+  @apply hover:text-info-500 dark:hover:text-info-500;
+}
+@utility nui-item-success {
+  @apply hover:text-success-500 dark:hover:text-success-500;
+}
+@utility nui-item-warning {
+  @apply hover:text-info-500 dark:hover:text-info-500;
+}
+@utility nui-item-danger {
+  @apply hover:text-info-500 dark:hover:text-info-500;
+}
+@utility nui-item-dark {
+  @apply hover:text-muted-900 dark:hover:text-muted-100;
+}
+@utility nui-item-black {
+  @apply hover:text-black dark:hover:text-white;
+}
+@utility nui-item-rounded-sm {
+  @apply rounded-md;
+}
+@utility nui-item-rounded-md {
+  @apply rounded-lg;
+}
+@utility nui-item-rounded-lg {
+  @apply rounded-xl;
+}

package/src/css/dropdown.css

@@ -0,0 +1,102 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-dropdown */
+
+@utility nui-dropdown {
+  @apply text-start;
+
+  &:hover {
+    .nui-context-button {
+      @apply ring-offset-4 ring-muted-200 dark:ring-muted-700;
+    }
+  }
+}
+@utility nui-dropdown-menu {
+  @apply absolute z-50 mt-2 focus:outline-none;
+  @apply shadow-lg shadow-muted-300/30 dark:shadow-muted-800/20;
+}
+@utility nui-menu {
+  @apply relative inline-block;
+}
+@utility nui-menu-content {
+  @apply p-2;
+}
+@utility nui-context-button {
+  @apply inline-flex items-center justify-center rounded-full;
+  @apply h-9 w-9;
+  @apply ring-1 ring-transparent ring-offset-white dark:ring-offset-muted-900;
+  @apply transition-all duration-300;
+
+  .nui-context-button-inner {
+    @apply flex items-center justify-center rounded-full;
+    @apply h-9 w-9;
+    @apply bg-white dark:bg-muted-800;
+    @apply border border-muted-200 dark:border-muted-700;
+  }
+
+  .nui-context-icon {
+    @apply h-5 w-5;
+    @apply text-muted-400 dark:text-muted-400;
+    @apply transition-all duration-300;
+  }
+}
+@utility nui-text-button {
+  @apply flex items-center space-x-1;
+}
+@utility nui-chevron {
+  @apply h-4 w-4;
+  @apply transition-transform duration-300;
+}
+@utility nui-dropdown-start {
+  .nui-dropdown-menu {
+    @apply start-0 origin-top-left;
+  }
+}
+@utility nui-dropdown-end {
+  .nui-dropdown-menu {
+    @apply end-0 origin-top-right;
+  }
+}
+@utility nui-menu-header {
+  @apply px-4 pt-5;
+}
+@utility nui-menu-header-inner {
+  @apply relative flex items-center justify-between;
+}
+@utility nui-menu-header-title {
+  @apply font-sans font-medium text-xs uppercase;
+  @apply text-muted-500 dark:text-muted-200;
+}
+@utility nui-menu-content {
+  @apply p-2 space-y-1;
+}
+@utility nui-menu-md {
+  @apply w-56;
+}
+@utility nui-menu-lg {
+  @apply w-72;
+}
+@utility nui-menu-rounded-sm {
+  @apply rounded-md;
+}
+@utility nui-menu-rounded-md {
+  @apply rounded-lg;
+}
+@utility nui-menu-rounded-lg {
+  @apply rounded-xl;
+}
+@utility nui-menu-default {
+  @apply border border-muted-200 dark:border-muted-700;
+  @apply bg-white dark:bg-muted-800;
+}
+@utility nui-menu-default-contrast {
+  @apply border border-muted-200 dark:border-muted-800;
+  @apply bg-white dark:bg-muted-950;
+}
+@utility nui-menu-muted {
+  @apply border border-muted-200 dark:border-muted-700;
+  @apply bg-white dark:bg-muted-800;
+}
+@utility nui-menu-muted-contrast {
+  @apply border border-muted-200 dark:border-muted-800;
+  @apply bg-white dark:bg-muted-950;
+}

package/src/css/focus.css

@@ -0,0 +1,12 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-focus */
+
+@utility nui-focus {
+  @apply outline-2 outline-dashed outline-offset-2;
+  @apply outline-transparent;
+
+  &:focus-within {
+    @apply outline-muted-300 dark:outline-muted-600;
+    @apply outline-dashed ring-0;
+  }
+}

package/src/css/fullscreen-dropfile.css

@@ -0,0 +1,63 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-fullscreen-dropfile */
+
+@utility nui-fullscreen-dropfile {
+  @apply block;
+}
+@utility nui-fullscreen-dropfile-outer {
+  @apply bg-muted-100/50 dark:bg-muted-800/20 fixed inset-0 z-40 backdrop-blur-sm transition-all hover:backdrop-blur-none;
+}
+@utility nui-fullscreen-dropfile-inner {
+  @apply fixed inset-0 z-50;
+
+  .nui-fullscreen-dropfile-container {
+    @apply flex h-full flex-1 items-center justify-center;
+
+    .nui-fullscreen-dropfile-content {
+      @apply h-[230px] w-[500px] mx-auto flex flex-col items-center justify-center gap-6 drop-shadow-sm;
+      @apply bg-muted-100 dark:bg-muted-800;
+      @apply rounded-md border-2 border-dashed border-muted-200 dark:border-muted-700;
+
+      .nui-fullscreen-dropfile-icon {
+        @apply h-10 w-10;
+      }
+
+      .nui-fullscreen-dropfile-label {
+        @apply text-base text-muted-500 dark:text-muted-400;
+      }
+    }
+  }
+}
+@utility nui-dropfile-primary {
+  .nui-fullscreen-dropfile-inner {
+    .nui-fullscreen-dropfile-container {
+      .nui-fullscreen-dropfile-content {
+        .nui-fullscreen-dropfile-icon {
+          @apply text-primary-500 dark:text-primary-500;
+        }
+      }
+    }
+  }
+}
+@utility nui-dropfile-dark {
+  .nui-fullscreen-dropfile-inner {
+    .nui-fullscreen-dropfile-container {
+      .nui-fullscreen-dropfile-content {
+        .nui-fullscreen-dropfile-icon {
+          @apply text-muted-900 dark:text-muted-100;
+        }
+      }
+    }
+  }
+}
+@utility nui-dropfile-black {
+  .nui-fullscreen-dropfile-inner {
+    .nui-fullscreen-dropfile-container {
+      .nui-fullscreen-dropfile-content {
+        .nui-fullscreen-dropfile-icon {
+          @apply text-black dark:text-white;
+        }
+      }
+    }
+  }
+}

package/src/css/heading.css

@@ -0,0 +1,78 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-heading */
+
+@utility nui-heading {
+  @apply font-sans;
+}
+@utility nui-heading-xs {
+  @apply text-xs;
+}
+@utility nui-heading-sm {
+  @apply text-sm;
+}
+@utility nui-heading-md {
+  @apply text-base;
+}
+@utility nui-heading-lg {
+  @apply text-lg;
+}
+@utility nui-heading-xl {
+  @apply text-xl;
+}
+@utility nui-heading-2xl {
+  @apply text-2xl;
+}
+@utility nui-heading-3xl {
+  @apply text-3xl;
+}
+@utility nui-heading-4xl {
+  @apply text-4xl;
+}
+@utility nui-heading-5xl {
+  @apply text-5xl;
+}
+@utility nui-heading-6xl {
+  @apply text-6xl;
+}
+@utility nui-heading-7xl {
+  @apply text-7xl;
+}
+@utility nui-heading-8xl {
+  @apply text-8xl;
+}
+@utility nui-heading-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;
+}