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

package/src/css/avatar.css

@@ -0,0 +1,738 @@
+/* generated using "pnpm jiti scripts/generate-utilities.ts" */
+/* @utility nui-avatar */
+
+@utility nui-avatar {
+  @apply relative inline-flex shrink-0 items-center justify-center outline-none;
+
+  &.nui-avatar-mask:not(.nui-avatar-rounded):not(.nui-avatar-rounded-md):not(.nui-avatar-rounded-lg):not(.nui-avatar-rounded-full) {
+    @apply nui-mask;
+  }
+}
+@utility nui-avatar-inner {
+  @apply flex items-center justify-center overflow-hidden text-center;
+  @apply h-full w-full;
+  @apply transition-all duration-300;
+}
+@utility nui-avatar-badge {
+  @apply absolute z-10 block overflow-hidden rounded-full;
+  @apply bg-white dark:bg-muted-800;
+
+  .nui-badge-img {
+    @apply relative scale-90 object-cover;
+    @apply h-full w-full rounded-full;
+  }
+}
+@utility nui-avatar-img {
+  @apply object-cover;
+  @apply h-full max-h-full w-full max-w-full;
+  @apply shadow-sm;
+}
+@utility nui-avatar-text {
+  @apply font-sans font-medium text-center uppercase;
+}
+@utility nui-avatar-dot {
+  @apply absolute block;
+  @apply border border-white dark:border-muted-800 rounded-full;
+
+  &.nui-dot-primary {
+    @apply bg-primary-500;
+  }
+
+  &.nui-dot-info {
+    @apply bg-info-500;
+  }
+
+  &.nui-dot-success {
+    @apply bg-success-500;
+  }
+
+  &.nui-dot-warning {
+    @apply bg-warning-500;
+  }
+
+  &.nui-dot-danger {
+    @apply bg-danger-500;
+  }
+
+  &.nui-dot-yellow {
+    @apply bg-yellow-400;
+  }
+
+  &.nui-dot-pink {
+    @apply bg-pink-500;
+  }
+
+  &.nui-dot-indigo {
+    @apply bg-indigo-500;
+  }
+}
+@utility nui-avatar-ring {
+  &.nui-avatar-rounded-full {
+    @apply ring-2;
+    @apply ring-offset-2 ring-offset-white dark:ring-offset-muted-800;
+  }
+
+  &.nui-ring-primary {
+    @apply bg-primary-500;
+  }
+
+  &.nui-ring-info {
+    @apply bg-info-500;
+  }
+
+  &.nui-ring-success {
+    @apply bg-success-500;
+  }
+
+  &.nui-ring-warning {
+    @apply bg-warning-500;
+  }
+
+  &.nui-ring-danger {
+    @apply bg-danger-500;
+  }
+
+  &.nui-ring-yellow {
+    @apply bg-yellow-400;
+  }
+
+  &.nui-ring-pink {
+    @apply bg-pink-500;
+  }
+
+  &.nui-ring-indigo {
+    @apply bg-indigo-500;
+  }
+}
+@utility nui-avatar-xxs {
+  @apply h-6 w-6;
+
+  .nui-avatar-badge {
+    @apply h-3 w-3 -bottom-1 -end-1;
+  }
+
+  .nui-avatar-dot {
+    @apply h-1.5 w-1.5;
+  }
+
+  .nui-avatar-text {
+    @apply text-xs;
+  }
+
+  &.nui-avatar-rounded-none {
+    @apply rounded-none;
+
+    .nui-avatar-inner {
+      @apply rounded-none;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-sm {
+    @apply rounded-sm;
+
+    .nui-avatar-inner {
+      @apply rounded-sm;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-md {
+    @apply rounded;
+
+    .nui-avatar-inner {
+      @apply rounded;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-lg {
+    @apply rounded-md;
+
+    .nui-avatar-inner {
+      @apply rounded-md;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-full {
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+}
+@utility nui-avatar-xs {
+  @apply h-8 w-8;
+
+  .nui-avatar-badge {
+    @apply h-4 w-4 -bottom-1 -end-1;
+  }
+
+  .nui-avatar-dot {
+    @apply h-2 w-2;
+  }
+
+  .nui-avatar-text {
+    @apply text-sm;
+  }
+
+  &.nui-avatar-rounded-none {
+    @apply rounded-none;
+
+    .nui-avatar-inner {
+      @apply rounded-none;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-sm {
+    @apply rounded-sm;
+
+    .nui-avatar-inner {
+      @apply rounded-sm;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-md {
+    @apply rounded;
+
+    .nui-avatar-inner {
+      @apply rounded;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-lg {
+    @apply rounded-lg;
+
+    .nui-avatar-inner {
+      @apply rounded-lg;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-full {
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+}
+@utility nui-avatar-sm {
+  @apply h-10 w-10;
+
+  .nui-avatar-badge {
+    @apply h-5 w-5 -bottom-1 -end-1;
+  }
+
+  .nui-avatar-dot {
+    @apply h-2 w-2;
+  }
+
+  .nui-avatar-text {
+    @apply text-sm;
+  }
+
+  &.nui-avatar-rounded-none {
+    @apply rounded-none;
+
+    .nui-avatar-inner {
+      @apply rounded-none;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-sm {
+    @apply rounded-md;
+
+    .nui-avatar-inner {
+      @apply rounded-md;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-md {
+    @apply rounded-lg;
+
+    .nui-avatar-inner {
+      @apply rounded-lg;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-lg {
+    @apply rounded-xl;
+
+    .nui-avatar-inner {
+      @apply rounded-xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-full {
+    .nui-avatar-dot {
+      @apply end-0.5 top-0.5;
+    }
+  }
+}
+@utility nui-avatar-md {
+  @apply h-12 w-12;
+
+  .nui-avatar-badge {
+    @apply h-5 w-5 -bottom-1 -end-1;
+  }
+
+  .nui-avatar-dot {
+    @apply h-3 w-3;
+  }
+
+  .nui-avatar-text {
+    @apply text-sm;
+  }
+
+  &.nui-avatar-rounded-none {
+    @apply rounded-none;
+
+    .nui-avatar-inner {
+      @apply rounded-none;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-sm {
+    @apply rounded-lg;
+
+    .nui-avatar-inner {
+      @apply rounded-lg;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-md {
+    @apply rounded-xl;
+
+    .nui-avatar-inner {
+      @apply rounded-xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-lg {
+    @apply rounded-2xl;
+
+    .nui-avatar-inner {
+      @apply rounded-2xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-full {
+    .nui-avatar-dot {
+      @apply end-0.5 top-0.5;
+    }
+  }
+}
+@utility nui-avatar-lg {
+  @apply h-16 w-16;
+
+  .nui-avatar-badge {
+    @apply h-6 w-6 -bottom-1 -end-1;
+  }
+
+  .nui-avatar-dot {
+    @apply h-3 w-3;
+  }
+
+  .nui-avatar-text {
+    @apply text-sm;
+  }
+
+  &.nui-avatar-rounded-none {
+    @apply rounded-none;
+
+    .nui-avatar-inner {
+      @apply rounded-none;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-sm {
+    @apply rounded-lg;
+
+    .nui-avatar-inner {
+      @apply rounded-lg;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-md {
+    @apply rounded-xl;
+
+    .nui-avatar-inner {
+      @apply rounded-xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-lg {
+    @apply rounded-2xl;
+
+    .nui-avatar-inner {
+      @apply rounded-2xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-full {
+    .nui-avatar-dot {
+      @apply end-1 top-1;
+    }
+  }
+}
+@utility nui-avatar-xl {
+  @apply h-20 w-20;
+
+  .nui-avatar-badge {
+    @apply h-8 w-8 -bottom-1 -end-1;
+  }
+
+  .nui-avatar-dot {
+    @apply h-4 w-4;
+  }
+
+  .nui-avatar-text {
+    @apply text-base;
+  }
+
+  &.nui-avatar-rounded-none {
+    @apply rounded-none;
+
+    .nui-avatar-inner {
+      @apply rounded-none;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-sm {
+    @apply rounded-xl;
+
+    .nui-avatar-inner {
+      @apply rounded-xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-md {
+    @apply rounded-2xl;
+
+    .nui-avatar-inner {
+      @apply rounded-2xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-lg {
+    @apply rounded-3xl;
+
+    .nui-avatar-inner {
+      @apply rounded-3xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-full {
+    .nui-avatar-dot {
+      @apply end-1 top-1;
+    }
+  }
+}
+@utility nui-avatar-2xl {
+  @apply h-24 w-24;
+
+  .nui-avatar-badge {
+    @apply h-10 w-10 -bottom-1.5 -end-1.5;
+  }
+
+  .nui-avatar-dot {
+    @apply h-4 w-4;
+  }
+
+  .nui-avatar-text {
+    @apply text-xl;
+  }
+
+  &.nui-avatar-rounded-none {
+    @apply rounded-none;
+
+    .nui-avatar-inner {
+      @apply rounded-none;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-sm {
+    @apply rounded-xl;
+
+    .nui-avatar-inner {
+      @apply rounded-xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-md {
+    @apply rounded-2xl;
+
+    .nui-avatar-inner {
+      @apply rounded-2xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-lg {
+    @apply rounded-3xl;
+
+    .nui-avatar-inner {
+      @apply rounded-3xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-full {
+    .nui-avatar-dot {
+      @apply end-1.5 top-1.5;
+    }
+  }
+}
+@utility nui-avatar-3xl {
+  @apply h-28 w-28;
+
+  .nui-avatar-badge {
+    @apply h-10 w-10 -bottom-1.5 -end-1.5;
+  }
+
+  .nui-avatar-dot {
+    @apply h-4 w-4;
+  }
+
+  .nui-avatar-text {
+    @apply text-2xl;
+  }
+
+  &.nui-avatar-rounded-none {
+    @apply rounded-none;
+
+    .nui-avatar-inner {
+      @apply rounded-none;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-sm {
+    @apply rounded-xl;
+
+    .nui-avatar-inner {
+      @apply rounded-xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-md {
+    @apply rounded-2xl;
+
+    .nui-avatar-inner {
+      @apply rounded-2xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-lg {
+    @apply rounded-3xl;
+
+    .nui-avatar-inner {
+      @apply rounded-3xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-full {
+    .nui-avatar-dot {
+      @apply end-2 top-2;
+    }
+  }
+}
+@utility nui-avatar-4xl {
+  @apply h-32 w-32;
+
+  .nui-avatar-badge {
+    @apply h-12 w-12 -bottom-2 -end-2;
+  }
+
+  .nui-avatar-dot {
+    @apply h-4 w-4;
+  }
+
+  .nui-avatar-text {
+    @apply text-3xl;
+  }
+
+  &.nui-avatar-rounded-none {
+    @apply rounded-none;
+
+    .nui-avatar-inner {
+      @apply rounded-none;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-sm {
+    @apply rounded-xl;
+
+    .nui-avatar-inner {
+      @apply rounded-xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-md {
+    @apply rounded-2xl;
+
+    .nui-avatar-inner {
+      @apply rounded-2xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-lg {
+    @apply rounded-3xl;
+
+    .nui-avatar-inner {
+      @apply rounded-3xl;
+    }
+
+    .nui-avatar-dot {
+      @apply end-0 top-0;
+    }
+  }
+
+  &.nui-avatar-rounded-full {
+    .nui-avatar-dot {
+      @apply end-2.5 top-2.5;
+    }
+  }
+}
+@utility nui-avatar-rounded-full {
+  @apply rounded-full;
+
+  .nui-avatar-inner {
+    @apply rounded-full;
+  }
+
+  .nui-avatar-badge {
+    @apply -bottom-0 -end-0;
+  }
+}