tailuicss 1.0.2

package/ui/styles/ui.file-input.css

@@ -0,0 +1,74 @@
+@layer components {
+  /* Base */
+  .ui-file-input {
+    @apply relative flex items-center justify-center w-full border-2 border-dashed border-gray-300 rounded-xl bg-gray-50 cursor-pointer transition-all duration-200 hover:border-blue-400 hover:bg-blue-50/30;
+    min-height: 8rem;
+  }
+
+  .ui-file-input input[type="file"] {
+    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
+  }
+
+  /* Content */
+  .ui-file-input .ui-placeholder {
+    @apply flex flex-col items-center gap-2 text-center pointer-events-none;
+  }
+
+  .ui-file-input .ui-icon {
+    @apply text-gray-400 text-3xl;
+  }
+
+  .ui-file-input .ui-text {
+    @apply text-sm text-gray-500;
+  }
+
+  .ui-file-input .ui-hint {
+    @apply text-xs text-gray-400;
+  }
+
+  /* Drag active */
+  .ui-file-input.ui-dragover {
+    @apply border-blue-500 bg-blue-50;
+  }
+
+  /* Compact */
+  .ui-file-input.ui-compact {
+    @apply flex-row gap-3 px-4;
+    min-height: 3rem;
+  }
+
+  .ui-file-input.ui-compact .ui-placeholder {
+    @apply flex-row;
+  }
+
+  /* Error */
+  .ui-file-input.ui-error {
+    @apply border-red-300 bg-red-50/30 hover:border-red-400;
+  }
+
+  /* Disabled */
+  .ui-file-input.ui-disabled {
+    @apply opacity-50 cursor-not-allowed hover:border-gray-300 hover:bg-gray-50;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-file-input {
+    @apply border-gray-600 bg-gray-800/50 hover:border-blue-500 hover:bg-blue-900/20;
+  }
+
+  [data-theme="dark"] .ui-file-input .ui-icon {
+    @apply text-gray-500;
+  }
+
+  [data-theme="dark"] .ui-file-input .ui-text {
+    @apply text-gray-400;
+  }
+
+  [data-theme="dark"] .ui-file-input .ui-hint {
+    @apply text-gray-500;
+  }
+
+  [data-theme="dark"] .ui-file-input.ui-dragover {
+    @apply border-blue-400 bg-blue-900/30;
+  }
+}

package/ui/styles/ui.input.css

@@ -0,0 +1,85 @@
+@layer components {
+  /* Base */
+  .ui-input {
+    @apply w-full px-4 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-900 text-sm transition-all duration-200 outline-none;
+    @style {
+      --ui-input-ring: theme('colors.blue.500');
+    }
+  }
+
+  .ui-input:focus {
+    @apply border-blue-500 ring-2 ring-blue-500/20;
+  }
+
+  .ui-input::placeholder {
+    @apply text-gray-400;
+  }
+
+  /* Error */
+  .ui-input.ui-error {
+    @apply border-red-500 text-red-900;
+  }
+
+  .ui-input.ui-error:focus {
+    @apply ring-red-500/20 border-red-500;
+  }
+
+  /* Success */
+  .ui-input.ui-success {
+    @apply border-green-500;
+  }
+
+  .ui-input.ui-success:focus {
+    @apply ring-green-500/20 border-green-500;
+  }
+
+  /* Disabled */
+  .ui-input.ui-disabled {
+    @apply bg-gray-100 text-gray-400 cursor-not-allowed;
+  }
+
+  /* Sizes */
+  .ui-input.ui-sm {
+    @apply text-xs px-3 py-1.5;
+  }
+
+  .ui-input.ui-lg {
+    @apply text-base px-5 py-3;
+  }
+
+  /* Label */
+  .ui-label {
+    @apply block text-sm font-medium text-gray-700 mb-1.5;
+  }
+
+  /* Helper text */
+  .ui-helper {
+    @apply text-xs text-gray-500 mt-1;
+  }
+
+  .ui-helper.ui-error {
+    @apply text-red-500;
+  }
+
+  /* Input group */
+  .ui-input-group {
+    @apply flex flex-col gap-1;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-input {
+    @apply bg-gray-800 border-gray-600 text-white;
+  }
+
+  [data-theme="dark"] .ui-input::placeholder {
+    @apply text-gray-500;
+  }
+
+  [data-theme="dark"] .ui-label {
+    @apply text-gray-300;
+  }
+
+  [data-theme="dark"] .ui-helper {
+    @apply text-gray-400;
+  }
+}

package/ui/styles/ui.list.css

@@ -0,0 +1,81 @@
+@layer components {
+  /* Base */
+  .ui-list {
+    @apply flex flex-col divide-y divide-gray-200 border border-gray-200 rounded-xl overflow-hidden;
+  }
+
+  /* Item */
+  .ui-list-item {
+    @apply flex items-center gap-3 px-4 py-3 bg-white text-sm text-gray-800;
+  }
+
+  /* Interactive */
+  .ui-list.ui-interactive .ui-list-item {
+    @apply cursor-pointer transition-colors duration-150 hover:bg-gray-50;
+  }
+
+  .ui-list.ui-interactive .ui-list-item:active {
+    @apply bg-gray-100;
+  }
+
+  /* Selected */
+  .ui-list-item.ui-selected {
+    @apply bg-blue-50 text-blue-700;
+  }
+
+  /* Slots */
+  .ui-list-item .ui-leading {
+    @apply shrink-0;
+  }
+
+  .ui-list-item .ui-content {
+    @apply flex-1 min-w-0;
+  }
+
+  .ui-list-item .ui-trailing {
+    @apply shrink-0 text-gray-400;
+  }
+
+  .ui-list-item .ui-title {
+    @apply font-medium truncate;
+  }
+
+  .ui-list-item .ui-subtitle {
+    @apply text-xs text-gray-500 truncate;
+  }
+
+  /* Flush (no border) */
+  .ui-list.ui-flush {
+    @apply border-none rounded-none;
+  }
+
+  /* Compact */
+  .ui-list.ui-compact .ui-list-item {
+    @apply px-3 py-2 text-xs;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-list {
+    @apply border-gray-700 divide-gray-700;
+  }
+
+  [data-theme="dark"] .ui-list-item {
+    @apply bg-gray-900 text-gray-200;
+  }
+
+  [data-theme="dark"] .ui-list.ui-interactive .ui-list-item:hover {
+    @apply bg-gray-800;
+  }
+
+  [data-theme="dark"] .ui-list-item.ui-selected {
+    @apply bg-blue-900/30 text-blue-300;
+  }
+
+  [data-theme="dark"] .ui-list-item .ui-subtitle {
+    @apply text-gray-500;
+  }
+
+  [data-theme="dark"] .ui-list-item .ui-trailing {
+    @apply text-gray-600;
+  }
+}

package/ui/styles/ui.modal.css

@@ -0,0 +1,65 @@
+@layer components {
+  /* Overlay */
+  .ui-overlay {
+    @apply fixed inset-0 bg-black/50 z-40 flex items-center justify-center;
+    @style {
+      backdrop-filter: blur(var(--ui-overlay-blur, 4px));
+    }
+  }
+
+  /* Modal base */
+  .ui-modal {
+    @apply bg-white rounded-2xl shadow-2xl z-50 w-full max-w-lg mx-4 overflow-hidden;
+    @style {
+      max-height: var(--ui-modal-max-height, 85vh);
+    }
+  }
+
+  /* Sizes */
+  .ui-modal.ui-sm {
+    @apply max-w-sm;
+  }
+
+  .ui-modal.ui-lg {
+    @apply max-w-2xl;
+  }
+
+  .ui-modal.ui-xl {
+    @apply max-w-4xl;
+  }
+
+  .ui-modal.ui-full {
+    @apply max-w-none mx-0 rounded-none h-screen;
+  }
+
+  /* Modal slots (reuses card slots) */
+  .ui-modal .ui-header {
+    @apply px-6 py-4 border-b border-gray-100 font-semibold text-lg;
+  }
+
+  .ui-modal .ui-body {
+    @apply p-6 overflow-y-auto;
+  }
+
+  .ui-modal .ui-footer {
+    @apply px-6 py-4 border-t border-gray-100 flex justify-end gap-3;
+  }
+
+  /* Centered variant */
+  .ui-modal.ui-centered .ui-body {
+    @apply text-center;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-modal {
+    @apply bg-gray-900 text-white;
+  }
+
+  [data-theme="dark"] .ui-modal .ui-header {
+    @apply border-gray-700;
+  }
+
+  [data-theme="dark"] .ui-modal .ui-footer {
+    @apply border-gray-700;
+  }
+}

package/ui/styles/ui.progress.css

@@ -0,0 +1,84 @@
+@layer components {
+  /* Base */
+  .ui-progress {
+    @apply w-full bg-gray-200 rounded-full overflow-hidden;
+    height: 0.5rem;
+  }
+
+  .ui-progress .ui-bar {
+    @apply h-full rounded-full transition-all duration-500 ease-out;
+    @style {
+      width: var(--ui-progress-value, 0%);
+    }
+  }
+
+  /* Colors */
+  .ui-progress .ui-bar {
+    @apply bg-blue-600;
+  }
+
+  .ui-progress.ui-success .ui-bar {
+    @apply bg-green-500;
+  }
+
+  .ui-progress.ui-warning .ui-bar {
+    @apply bg-yellow-500;
+  }
+
+  .ui-progress.ui-danger .ui-bar {
+    @apply bg-red-500;
+  }
+
+  /* Sizes */
+  .ui-progress.ui-sm {
+    height: 0.25rem;
+  }
+
+  .ui-progress.ui-lg {
+    height: 0.75rem;
+  }
+
+  .ui-progress.ui-xl {
+    height: 1rem;
+  }
+
+  /* Striped */
+  .ui-progress.ui-striped .ui-bar {
+    background-image: linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 1rem 1rem;
+  }
+
+  /* Animated */
+  .ui-progress.ui-animated .ui-bar {
+    animation: ui-progress-stripes 1s linear infinite;
+  }
+
+  @keyframes ui-progress-stripes {
+    from { background-position: 1rem 0; }
+    to { background-position: 0 0; }
+  }
+
+  /* Label */
+  .ui-progress.ui-labeled {
+    @apply relative;
+    height: 1.25rem;
+  }
+
+  .ui-progress.ui-labeled .ui-bar {
+    @apply flex items-center justify-center text-xs font-medium text-white;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-progress {
+    @apply bg-gray-700;
+  }
+}

package/ui/styles/ui.radio.css

@@ -0,0 +1,68 @@
+@layer components {
+  /* Radio group */
+  .ui-radio-group {
+    @apply flex flex-col gap-2;
+  }
+
+  .ui-radio-group.ui-horizontal {
+    @apply flex-row gap-4;
+  }
+
+  /* Radio item */
+  .ui-radio {
+    @apply inline-flex items-center gap-2 cursor-pointer text-sm text-gray-700;
+  }
+
+  .ui-radio input[type="radio"] {
+    @apply w-4 h-4 border-2 border-gray-300 rounded-full appearance-none cursor-pointer transition-all duration-150;
+  }
+
+  .ui-radio input[type="radio"]:checked {
+    @apply border-blue-600;
+    box-shadow: inset 0 0 0 3px white, inset 0 0 0 6px currentColor;
+    color: theme('colors.blue.600');
+  }
+
+  .ui-radio input[type="radio"]:focus-visible {
+    @apply ring-2 ring-blue-500/20 ring-offset-1;
+  }
+
+  /* Disabled */
+  .ui-radio.ui-disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .ui-radio.ui-disabled input[type="radio"] {
+    @apply cursor-not-allowed;
+  }
+
+  /* Sizes */
+  .ui-radio.ui-sm {
+    @apply text-xs;
+  }
+
+  .ui-radio.ui-sm input[type="radio"] {
+    @apply w-3.5 h-3.5;
+  }
+
+  .ui-radio.ui-lg {
+    @apply text-base;
+  }
+
+  .ui-radio.ui-lg input[type="radio"] {
+    @apply w-5 h-5;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-radio {
+    @apply text-gray-300;
+  }
+
+  [data-theme="dark"] .ui-radio input[type="radio"] {
+    @apply border-gray-600;
+  }
+
+  [data-theme="dark"] .ui-radio input[type="radio"]:checked {
+    box-shadow: inset 0 0 0 3px theme('colors.gray.900'), inset 0 0 0 6px currentColor;
+  }
+}

package/ui/styles/ui.rate.css

@@ -0,0 +1,76 @@
+@layer components {
+  /* Base */
+  .ui-rate {
+    @apply inline-flex items-center gap-1;
+  }
+
+  /* Star */
+  .ui-rate .ui-star {
+    @apply cursor-pointer transition-colors duration-150 text-gray-300;
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+
+  .ui-rate .ui-star::before {
+    content: '\2605';
+  }
+
+  .ui-rate .ui-star.ui-active {
+    @apply text-yellow-400;
+  }
+
+  .ui-rate .ui-star:hover {
+    @apply text-yellow-300;
+  }
+
+  /* Readonly */
+  .ui-rate.ui-readonly .ui-star {
+    @apply cursor-default;
+  }
+
+  .ui-rate.ui-readonly .ui-star:hover {
+    @apply text-gray-300;
+  }
+
+  .ui-rate.ui-readonly .ui-star.ui-active:hover {
+    @apply text-yellow-400;
+  }
+
+  /* Sizes */
+  .ui-rate.ui-sm .ui-star {
+    font-size: 1rem;
+  }
+
+  .ui-rate.ui-lg .ui-star {
+    font-size: 2rem;
+  }
+
+  /* Half star support */
+  .ui-rate .ui-star.ui-half {
+    @apply relative text-gray-300;
+  }
+
+  .ui-rate .ui-star.ui-half::after {
+    content: '\2605';
+    @apply absolute inset-0 text-yellow-400 overflow-hidden;
+    width: 50%;
+  }
+
+  /* Disabled */
+  .ui-rate.ui-disabled {
+    @apply opacity-50 pointer-events-none;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-rate .ui-star {
+    @apply text-gray-600;
+  }
+
+  [data-theme="dark"] .ui-rate .ui-star.ui-active {
+    @apply text-yellow-400;
+  }
+
+  [data-theme="dark"] .ui-rate .ui-star:hover {
+    @apply text-yellow-300;
+  }
+}

package/ui/styles/ui.select.css

@@ -0,0 +1,125 @@
+@layer components {
+  /* Base */
+  .ui-select {
+    @apply relative w-full;
+  }
+
+  /* Trigger */
+  .ui-select .ui-select-trigger {
+    @apply w-full flex items-center justify-between px-4 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-900 text-sm cursor-pointer transition-all duration-200;
+  }
+
+  .ui-select .ui-select-trigger:focus,
+  .ui-select.ui-open .ui-select-trigger {
+    @apply border-blue-500 ring-2 ring-blue-500/20;
+  }
+
+  .ui-select .ui-select-trigger .ui-placeholder {
+    @apply text-gray-400;
+  }
+
+  .ui-select .ui-select-trigger::after {
+    content: '';
+    @apply w-2 h-2 border-r-2 border-b-2 border-gray-400 rotate-45 transition-transform duration-200 shrink-0 ml-2;
+  }
+
+  .ui-select.ui-open .ui-select-trigger::after {
+    @apply -rotate-[135deg];
+  }
+
+  /* Dropdown */
+  .ui-select .ui-select-menu {
+    @apply absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg py-1 max-h-60 overflow-y-auto opacity-0 invisible transition-all duration-150;
+  }
+
+  .ui-select.ui-open .ui-select-menu {
+    @apply opacity-100 visible;
+  }
+
+  /* Option */
+  .ui-select .ui-option {
+    @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-select .ui-option.ui-selected {
+    @apply bg-blue-50 text-blue-700 font-medium;
+  }
+
+  .ui-select .ui-option.ui-disabled {
+    @apply opacity-50 cursor-not-allowed hover:bg-transparent;
+  }
+
+  /* Group */
+  .ui-select .ui-option-group {
+    @apply px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider;
+  }
+
+  /* States */
+  .ui-select.ui-error .ui-select-trigger {
+    @apply border-red-500;
+  }
+
+  .ui-select.ui-disabled .ui-select-trigger {
+    @apply bg-gray-100 text-gray-400 cursor-not-allowed;
+  }
+
+  /* Sizes */
+  .ui-select.ui-sm .ui-select-trigger {
+    @apply text-xs px-3 py-1.5;
+  }
+
+  .ui-select.ui-lg .ui-select-trigger {
+    @apply text-base px-5 py-3;
+  }
+
+  /* Search variant */
+  .ui-select .ui-search-input {
+    @apply w-full px-4 py-2 border-b border-gray-100 text-sm outline-none bg-transparent;
+  }
+
+  .ui-select .ui-search-input::placeholder {
+    @apply text-gray-400;
+  }
+
+  .ui-select .ui-no-results {
+    @apply px-4 py-3 text-sm text-gray-400 text-center;
+  }
+
+  /* Multi-select */
+  .ui-select.ui-multi .ui-select-trigger {
+    @apply flex-wrap gap-1;
+  }
+
+  .ui-select .ui-tag {
+    @apply inline-flex items-center gap-1 px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-md;
+  }
+
+  .ui-select .ui-tag .ui-remove {
+    @apply cursor-pointer opacity-60 hover:opacity-100;
+  }
+
+  /* Dark mode */
+  [data-theme="dark"] .ui-select .ui-select-trigger {
+    @apply bg-gray-800 border-gray-600 text-white;
+  }
+
+  [data-theme="dark"] .ui-select .ui-select-menu {
+    @apply bg-gray-800 border-gray-700;
+  }
+
+  [data-theme="dark"] .ui-select .ui-option {
+    @apply text-gray-300 hover:bg-gray-700;
+  }
+
+  [data-theme="dark"] .ui-select .ui-option.ui-selected {
+    @apply bg-blue-900/30 text-blue-300;
+  }
+
+  [data-theme="dark"] .ui-select .ui-search-input {
+    @apply border-gray-700 text-white;
+  }
+
+  [data-theme="dark"] .ui-select .ui-tag {
+    @apply bg-blue-900/50 text-blue-300;
+  }
+}