tailuicss 1.0.2

package/ui/styles/index.css

@@ -0,0 +1,21 @@
+/* TailUI — Component Styles Entry Point */
+@import "./ui.accordion.css";
+@import "./ui.alert.css";
+@import "./ui.avatar.css";
+@import "./ui.badge.css";
+@import "./ui.button.css";
+@import "./ui.card.css";
+@import "./ui.carousel.css";
+@import "./ui.dropdown.css";
+@import "./ui.file-input.css";
+@import "./ui.input.css";
+@import "./ui.list.css";
+@import "./ui.modal.css";
+@import "./ui.progress.css";
+@import "./ui.radio.css";
+@import "./ui.rate.css";
+@import "./ui.select.css";
+@import "./ui.textarea.css";
+@import "./ui.toast.css";
+@import "./ui.toggle.css";
+@import "./ui.tooltip.css";

package/ui/styles/ui.accordion.css

@@ -0,0 +1,70 @@
+@layer components {
+  /* Container */
+  .ui-accordion {
+    @apply border border-gray-200 rounded-xl overflow-hidden divide-y divide-gray-200;
+  }
+
+  /* Item */
+  .ui-accordion-item {
+    @apply bg-white;
+  }
+
+  /* Trigger */
+  .ui-accordion-trigger {
+    @apply w-full flex items-center justify-between px-5 py-4 text-left text-sm font-medium text-gray-800 cursor-pointer transition-colors duration-150 hover:bg-gray-50;
+  }
+
+  .ui-accordion-trigger::after {
+    content: '';
+    @apply w-2 h-2 border-r-2 border-b-2 border-current rotate-45 transition-transform duration-200 shrink-0 ml-4;
+  }
+
+  /* Open state */
+  .ui-accordion-item.ui-open .ui-accordion-trigger {
+    @apply font-semibold;
+  }
+
+  .ui-accordion-item.ui-open .ui-accordion-trigger::after {
+    @apply -rotate-[135deg];
+  }
+
+  /* Content */
+  .ui-accordion-content {
+    @apply px-5 pb-4 text-sm text-gray-600 leading-relaxed;
+  }
+
+  /* Flush (no border) */
+  .ui-accordion.ui-flush {
+    @apply border-none rounded-none;
+  }
+
+  /* Separated */
+  .ui-accordion.ui-separated {
+    @apply border-none divide-y-0 space-y-2;
+  }
+
+  .ui-accordion.ui-separated .ui-accordion-item {
+    @apply border border-gray-200 rounded-lg overflow-hidden;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-accordion {
+    @apply border-gray-700 divide-gray-700;
+  }
+
+  [data-theme="dark"] .ui-accordion-item {
+    @apply bg-gray-900;
+  }
+
+  [data-theme="dark"] .ui-accordion-trigger {
+    @apply text-white hover:bg-gray-800;
+  }
+
+  [data-theme="dark"] .ui-accordion-content {
+    @apply text-gray-400;
+  }
+
+  [data-theme="dark"] .ui-accordion.ui-separated .ui-accordion-item {
+    @apply border-gray-700;
+  }
+}

package/ui/styles/ui.alert.css

@@ -0,0 +1,75 @@
+@layer components {
+  /* Base */
+  .ui-alert {
+    @apply flex items-start gap-3 px-4 py-3 rounded-xl border text-sm;
+  }
+
+  /* Variants */
+  .ui-alert.ui-info {
+    @apply bg-blue-50 border-blue-200 text-blue-800;
+  }
+
+  .ui-alert.ui-success {
+    @apply bg-green-50 border-green-200 text-green-800;
+  }
+
+  .ui-alert.ui-warning {
+    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
+  }
+
+  .ui-alert.ui-danger {
+    @apply bg-red-50 border-red-200 text-red-800;
+  }
+
+  /* Slots */
+  .ui-alert .ui-title {
+    @apply font-semibold;
+  }
+
+  .ui-alert .ui-message {
+    @apply opacity-80;
+  }
+
+  .ui-alert .ui-close {
+    @apply ml-auto cursor-pointer opacity-50 hover:opacity-100 transition-opacity;
+  }
+
+  /* Outlined variant */
+  .ui-alert.ui-outlined {
+    @apply bg-transparent;
+  }
+
+  /* Filled variant */
+  .ui-alert.ui-filled.ui-info {
+    @apply bg-blue-600 text-white border-blue-600;
+  }
+
+  .ui-alert.ui-filled.ui-success {
+    @apply bg-green-600 text-white border-green-600;
+  }
+
+  .ui-alert.ui-filled.ui-warning {
+    @apply bg-yellow-500 text-white border-yellow-500;
+  }
+
+  .ui-alert.ui-filled.ui-danger {
+    @apply bg-red-600 text-white border-red-600;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-alert.ui-info {
+    @apply bg-blue-900/30 border-blue-800 text-blue-300;
+  }
+
+  [data-theme="dark"] .ui-alert.ui-success {
+    @apply bg-green-900/30 border-green-800 text-green-300;
+  }
+
+  [data-theme="dark"] .ui-alert.ui-warning {
+    @apply bg-yellow-900/30 border-yellow-800 text-yellow-300;
+  }
+
+  [data-theme="dark"] .ui-alert.ui-danger {
+    @apply bg-red-900/30 border-red-800 text-red-300;
+  }
+}

package/ui/styles/ui.avatar.css

@@ -0,0 +1,100 @@
+@layer components {
+  /* Base */
+  .ui-avatar {
+    @apply inline-flex items-center justify-center rounded-full bg-gray-200 text-gray-600 font-medium overflow-hidden shrink-0;
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 0.875rem;
+  }
+
+  .ui-avatar img {
+    @apply w-full h-full object-cover;
+  }
+
+  /* Sizes */
+  .ui-avatar.ui-xs {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 0.625rem;
+  }
+
+  .ui-avatar.ui-sm {
+    width: 2rem;
+    height: 2rem;
+    font-size: 0.75rem;
+  }
+
+  .ui-avatar.ui-lg {
+    width: 3.5rem;
+    height: 3.5rem;
+    font-size: 1.125rem;
+  }
+
+  .ui-avatar.ui-xl {
+    width: 5rem;
+    height: 5rem;
+    font-size: 1.5rem;
+  }
+
+  /* Square */
+  .ui-avatar.ui-square {
+    @apply rounded-lg;
+  }
+
+  /* Ring / border */
+  .ui-avatar.ui-ring {
+    @apply ring-2 ring-white;
+  }
+
+  /* Status indicator */
+  .ui-avatar-status {
+    @apply relative inline-flex;
+  }
+
+  .ui-avatar-status::after {
+    content: '';
+    @apply absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-white bg-gray-400;
+  }
+
+  .ui-avatar-status.ui-online::after {
+    @apply bg-green-500;
+  }
+
+  .ui-avatar-status.ui-offline::after {
+    @apply bg-gray-400;
+  }
+
+  .ui-avatar-status.ui-busy::after {
+    @apply bg-red-500;
+  }
+
+  .ui-avatar-status.ui-away::after {
+    @apply bg-yellow-500;
+  }
+
+  /* Group */
+  .ui-avatar-group {
+    @apply flex -space-x-2;
+  }
+
+  .ui-avatar-group .ui-avatar {
+    @apply ring-2 ring-white;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-avatar {
+    @apply bg-gray-700 text-gray-300;
+  }
+
+  [data-theme="dark"] .ui-avatar.ui-ring {
+    @apply ring-gray-900;
+  }
+
+  [data-theme="dark"] .ui-avatar-status::after {
+    @apply border-gray-900;
+  }
+
+  [data-theme="dark"] .ui-avatar-group .ui-avatar {
+    @apply ring-gray-900;
+  }
+}

package/ui/styles/ui.badge.css

@@ -0,0 +1,60 @@
+@layer components {
+  /* Base */
+  .ui-badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  /* Variants */
+  .ui-badge.ui-primary {
+    @apply bg-blue-100 text-blue-800;
+  }
+
+  .ui-badge.ui-secondary {
+    @apply bg-gray-100 text-gray-800;
+  }
+
+  .ui-badge.ui-success {
+    @apply bg-green-100 text-green-800;
+  }
+
+  .ui-badge.ui-danger {
+    @apply bg-red-100 text-red-800;
+  }
+
+  .ui-badge.ui-warning {
+    @apply bg-yellow-100 text-yellow-800;
+  }
+
+  /* Dot indicator */
+  .ui-badge.ui-dot::before {
+    @apply w-1.5 h-1.5 rounded-full mr-1.5 inline-block;
+    content: '';
+    background-color: currentColor;
+  }
+
+  /* Pill shape (default is already rounded-full) */
+  .ui-badge.ui-square {
+    @apply rounded-md;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-badge.ui-primary {
+    @apply bg-blue-900/50 text-blue-300;
+  }
+
+  [data-theme="dark"] .ui-badge.ui-secondary {
+    @apply bg-gray-700 text-gray-300;
+  }
+
+  [data-theme="dark"] .ui-badge.ui-success {
+    @apply bg-green-900/50 text-green-300;
+  }
+
+  [data-theme="dark"] .ui-badge.ui-danger {
+    @apply bg-red-900/50 text-red-300;
+  }
+
+  [data-theme="dark"] .ui-badge.ui-warning {
+    @apply bg-yellow-900/50 text-yellow-300;
+  }
+}

package/ui/styles/ui.button.css

@@ -0,0 +1,72 @@
+@layer components {
+  /* Base */
+  .ui-button {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 cursor-pointer inline-flex items-center justify-center gap-2 text-sm;
+  }
+
+  /* Primary */
+  .ui-button.ui-primary {
+    @apply bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 shadow-sm hover:shadow-md;
+  }
+
+  /* Secondary */
+  .ui-button.ui-secondary {
+    @apply bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 border border-gray-200;
+  }
+
+  /* Danger */
+  .ui-button.ui-danger {
+    @apply bg-red-600 text-white hover:bg-red-700 active:bg-red-800 shadow-sm;
+  }
+
+  /* Ghost */
+  .ui-button.ui-ghost {
+    @apply bg-transparent text-gray-600 hover:bg-gray-100 hover:text-gray-900;
+  }
+
+  /* Outline */
+  .ui-button.ui-outline {
+    @apply bg-transparent border-2 border-current hover:bg-gray-50;
+  }
+
+  /* Sizes */
+  .ui-button.ui-sm {
+    @apply text-xs px-3 py-1.5;
+  }
+
+  .ui-button.ui-lg {
+    @apply text-base px-6 py-3;
+  }
+
+  .ui-button.ui-xl {
+    @apply text-lg px-8 py-4;
+  }
+
+  /* States */
+  .ui-button.ui-disabled {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  }
+
+  .ui-button.ui-loading {
+    @apply opacity-70 cursor-wait;
+  }
+
+  /* Full width */
+  .ui-button.ui-full {
+    @apply w-full;
+  }
+
+  /* Icon only */
+  .ui-button.ui-icon {
+    @apply p-2 aspect-square;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-button.ui-secondary {
+    @apply bg-gray-800 text-gray-100 hover:bg-gray-700 border-gray-700;
+  }
+
+  [data-theme="dark"] .ui-button.ui-ghost {
+    @apply text-gray-400 hover:bg-gray-800 hover:text-gray-100;
+  }
+}

package/ui/styles/ui.card.css

@@ -0,0 +1,96 @@
+@layer components {
+  /* Base */
+  .ui-card {
+    @apply rounded-xl border border-gray-200 bg-white text-gray-800 overflow-hidden;
+  }
+
+  /* Elevated */
+  .ui-card.ui-elevated {
+    @apply shadow-lg;
+  }
+
+  /* Outlined */
+  .ui-card.ui-outlined {
+    @apply border-2 border-gray-300 shadow-none;
+  }
+
+  /* Flat */
+  .ui-card.ui-flat {
+    @apply border-none shadow-none bg-gray-50;
+  }
+
+  /* Hoverable */
+  .ui-hoverable {
+    @apply transition-all duration-200;
+  }
+
+  .ui-card.ui-hoverable:hover {
+    @apply shadow-2xl -translate-y-1;
+  }
+
+  /* Interactive (clickable) */
+  .ui-card.ui-interactive {
+    @apply cursor-pointer transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:shadow-md;
+  }
+
+  /* Slots */
+  .ui-header {
+    @apply flex items-center justify-between px-5 py-4 border-b border-gray-100 font-semibold;
+  }
+
+  .ui-body {
+    @apply p-5;
+  }
+
+  .ui-footer {
+    @apply px-5 py-4 border-t border-gray-100 flex justify-end gap-3;
+  }
+
+  /* Sticky header */
+  .ui-sticky {
+    @apply sticky top-0 bg-inherit z-10;
+  }
+
+  /* Card hover → header color change */
+  .ui-card.ui-hoverable:hover .ui-header,
+  .ui-card.ui-interactive:hover .ui-header {
+    @apply text-blue-600;
+  }
+
+  /* Compact variant */
+  .ui-card.ui-compact .ui-header {
+    @apply px-4 py-2 text-sm;
+  }
+
+  .ui-card.ui-compact .ui-body {
+    @apply p-4;
+  }
+
+  .ui-card.ui-compact .ui-footer {
+    @apply px-4 py-2;
+  }
+
+  /* Responsive footer */
+  @media (max-width: 640px) {
+    .ui-footer {
+      @apply flex-col;
+    }
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-card {
+    @apply bg-gray-900 text-white border-gray-700;
+  }
+
+  [data-theme="dark"] .ui-header {
+    @apply border-gray-700;
+  }
+
+  [data-theme="dark"] .ui-footer {
+    @apply border-gray-700;
+  }
+
+  [data-theme="dark"] .ui-card.ui-flat {
+    @apply bg-gray-800;
+  }
+}

package/ui/styles/ui.carousel.css

@@ -0,0 +1,70 @@
+@layer components {
+  /* Container */
+  .ui-carousel {
+    @apply relative overflow-hidden rounded-xl;
+  }
+
+  /* Track */
+  .ui-carousel .ui-track {
+    @apply flex transition-transform duration-500 ease-out;
+  }
+
+  /* Slide */
+  .ui-carousel .ui-slide {
+    @apply w-full shrink-0;
+  }
+
+  /* Navigation arrows */
+  .ui-carousel .ui-prev,
+  .ui-carousel .ui-next {
+    @apply absolute top-1/2 -translate-y-1/2 z-10 w-10 h-10 flex items-center justify-center rounded-full bg-white/80 text-gray-800 shadow-md cursor-pointer transition-all duration-200 hover:bg-white hover:shadow-lg;
+  }
+
+  .ui-carousel .ui-prev {
+    @apply left-3;
+  }
+
+  .ui-carousel .ui-next {
+    @apply right-3;
+  }
+
+  /* Dots / indicators */
+  .ui-carousel .ui-dots {
+    @apply absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2 z-10;
+  }
+
+  .ui-carousel .ui-dot {
+    @apply w-2 h-2 rounded-full bg-white/50 cursor-pointer transition-all duration-200;
+  }
+
+  .ui-carousel .ui-dot.ui-active {
+    @apply bg-white w-6;
+  }
+
+  /* Fade variant */
+  .ui-carousel.ui-fade .ui-track {
+    @apply relative;
+  }
+
+  .ui-carousel.ui-fade .ui-slide {
+    @apply absolute inset-0 opacity-0 transition-opacity duration-500;
+  }
+
+  .ui-carousel.ui-fade .ui-slide.ui-active {
+    @apply opacity-100 relative;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-carousel .ui-prev,
+  [data-theme="dark"] .ui-carousel .ui-next {
+    @apply bg-gray-800/80 text-white hover:bg-gray-800;
+  }
+
+  [data-theme="dark"] .ui-carousel .ui-dot {
+    @apply bg-gray-600;
+  }
+
+  [data-theme="dark"] .ui-carousel .ui-dot.ui-active {
+    @apply bg-white;
+  }
+}

package/ui/styles/ui.dropdown.css

@@ -0,0 +1,77 @@
+@layer components {
+  /* Wrapper */
+  .ui-dropdown {
+    @apply relative inline-block;
+  }
+
+  /* Trigger */
+  .ui-dropdown .ui-trigger {
+    @apply cursor-pointer;
+  }
+
+  /* Menu */
+  .ui-dropdown .ui-menu {
+    @apply absolute z-50 mt-1 min-w-[12rem] bg-white border border-gray-200 rounded-xl shadow-lg py-1 opacity-0 invisible transition-all duration-150 origin-top scale-95;
+  }
+
+  .ui-dropdown.ui-open .ui-menu {
+    @apply opacity-100 visible scale-100;
+  }
+
+  /* Position */
+  .ui-dropdown.ui-right .ui-menu {
+    @apply right-0;
+  }
+
+  .ui-dropdown.ui-up .ui-menu {
+    @apply bottom-full top-auto mb-1 mt-0 origin-bottom;
+  }
+
+  /* Item */
+  .ui-dropdown .ui-menu-item {
+    @apply flex items-center gap-2 px-4 py-2 text-sm text-gray-700 cursor-pointer transition-colors duration-100 hover:bg-gray-50;
+  }
+
+  .ui-dropdown .ui-menu-item.ui-active {
+    @apply bg-blue-50 text-blue-700;
+  }
+
+  .ui-dropdown .ui-menu-item.ui-disabled {
+    @apply opacity-50 cursor-not-allowed hover:bg-transparent;
+  }
+
+  .ui-dropdown .ui-menu-item.ui-danger {
+    @apply text-red-600 hover:bg-red-50;
+  }
+
+  /* Divider */
+  .ui-dropdown .ui-divider {
+    @apply my-1 border-t border-gray-100;
+  }
+
+  /* Header */
+  .ui-dropdown .ui-menu-header {
+    @apply px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-dropdown .ui-menu {
+    @apply bg-gray-800 border-gray-700;
+  }
+
+  [data-theme="dark"] .ui-dropdown .ui-menu-item {
+    @apply text-gray-300 hover:bg-gray-700;
+  }
+
+  [data-theme="dark"] .ui-dropdown .ui-menu-item.ui-active {
+    @apply bg-blue-900/30 text-blue-300;
+  }
+
+  [data-theme="dark"] .ui-dropdown .ui-divider {
+    @apply border-gray-700;
+  }
+
+  [data-theme="dark"] .ui-dropdown .ui-menu-header {
+    @apply text-gray-500;
+  }
+}