uiplex 1.0.0

package/dist/index.css

@@ -0,0 +1,2339 @@
+.ui-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 0.2s ease-in-out;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  text-decoration: none;
+  outline: none;
+  position: relative;
+}
+
+.ui-button:focus-visible {
+  outline: 2px solid var(--accent-primary, #bb00ed);
+  outline-offset: 2px;
+}
+
+.ui-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ui-button--loading {
+  cursor: wait;
+}
+
+.ui-button__spinner {
+  width: 1em;
+  height: 1em;
+  animation: spin 1s linear infinite;
+}
+
+.ui-button__left-icon,
+.ui-button__right-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-button__content {
+  display: flex;
+  align-items: center;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Variants */
+.ui-button--primary {
+  background-color: var(--accent-primary, #bb00ed);
+  color: white;
+}
+
+.ui-button--primary:hover:not(:disabled) {
+  background-color: var(--accent-secondary, #bb00ed);
+}
+
+.ui-button--secondary {
+  background-color: var(--bg-secondary, #f3f4f6);
+  color: var(--text-primary, #111827);
+}
+
+.ui-button--secondary:hover:not(:disabled) {
+  background-color: var(--bg-tertiary, #e5e7eb);
+}
+
+.ui-button--outline {
+  background-color: transparent;
+  border: 1px solid var(--border-secondary, #d1d5db);
+  color: var(--text-secondary, #374151);
+}
+
+.ui-button--outline:hover:not(:disabled) {
+  background-color: var(--bg-secondary, #f9fafb);
+}
+
+.ui-button--link {
+  background-color: transparent;
+  color: var(--accent-primary, #bb00ed);
+  padding: 0;
+  text-decoration: underline;
+}
+
+.ui-button--link:hover:not(:disabled) {
+  color: var(--accent-secondary, #bb00ed);
+  text-decoration: none;
+}
+
+/* Sizes */
+.ui-button--xs {
+  height: 1.5rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  gap: 0.25rem;
+}
+
+.ui-button--xs .ui-button__spinner {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.ui-button--sm {
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+  gap: 0.375rem;
+}
+
+.ui-button--md {
+  height: 2.5rem;
+  padding: 0.5rem 1rem;
+  gap: 0.5rem;
+}
+
+.ui-button--lg {
+  height: 3rem;
+  padding: 0 1.5rem;
+  font-size: 1.125rem;
+  gap: 0.625rem;
+}
+
+/* Color Schemes */
+.ui-button--blue.ui-button--primary {
+  background-color: #2563eb;
+  color: white;
+}
+
+.ui-button--blue.ui-button--primary:hover:not(:disabled) {
+  background-color: #1d4ed8;
+}
+
+.ui-button--blue.ui-button--outline {
+  border-color: #2563eb;
+  color: #2563eb;
+}
+
+.ui-button--blue.ui-button--outline:hover:not(:disabled) {
+  background-color: #eff6ff;
+}
+
+.ui-button--blue.ui-button--link {
+  color: #2563eb;
+}
+
+.ui-button--blue.ui-button--link:hover:not(:disabled) {
+  color: #1d4ed8;
+}
+
+.ui-button--green.ui-button--primary {
+  background-color: #059669;
+  color: white;
+}
+
+.ui-button--green.ui-button--primary:hover:not(:disabled) {
+  background-color: #047857;
+}
+
+.ui-button--green.ui-button--outline {
+  border-color: #059669;
+  color: #059669;
+}
+
+.ui-button--green.ui-button--outline:hover:not(:disabled) {
+  background-color: #ecfdf5;
+}
+
+.ui-button--green.ui-button--link {
+  color: #059669;
+}
+
+.ui-button--green.ui-button--link:hover:not(:disabled) {
+  color: #047857;
+}
+
+.ui-button--red.ui-button--primary {
+  background-color: #dc2626;
+  color: white;
+}
+
+.ui-button--red.ui-button--primary:hover:not(:disabled) {
+  background-color: #b91c1c;
+}
+
+.ui-button--red.ui-button--outline {
+  border-color: #dc2626;
+  color: #dc2626;
+}
+
+.ui-button--red.ui-button--outline:hover:not(:disabled) {
+  background-color: #fef2f2;
+}
+
+.ui-button--red.ui-button--link {
+  color: #dc2626;
+}
+
+.ui-button--red.ui-button--link:hover:not(:disabled) {
+  color: #b91c1c;
+}
+
+.ui-button--yellow.ui-button--primary {
+  background-color: #d97706;
+  color: white;
+}
+
+.ui-button--yellow.ui-button--primary:hover:not(:disabled) {
+  background-color: #b45309;
+}
+
+.ui-button--yellow.ui-button--outline {
+  border-color: #d97706;
+  color: #d97706;
+}
+
+.ui-button--yellow.ui-button--outline:hover:not(:disabled) {
+  background-color: #fffbeb;
+}
+
+.ui-button--yellow.ui-button--link {
+  color: #d97706;
+}
+
+.ui-button--yellow.ui-button--link:hover:not(:disabled) {
+  color: #b45309;
+}
+
+.ui-button--purple.ui-button--primary {
+  background-color: #7c3aed;
+  color: white;
+}
+
+.ui-button--purple.ui-button--primary:hover:not(:disabled) {
+  background-color: #6d28d9;
+}
+
+.ui-button--purple.ui-button--outline {
+  border-color: #7c3aed;
+  color: #7c3aed;
+}
+
+.ui-button--purple.ui-button--outline:hover:not(:disabled) {
+  background-color: #faf5ff;
+}
+
+.ui-button--purple.ui-button--link {
+  color: #7c3aed;
+}
+
+.ui-button--purple.ui-button--link:hover:not(:disabled) {
+  color: #6d28d9;
+}
+
+.ui-button--gray.ui-button--primary {
+  background-color: #6b7280;
+  color: white;
+}
+
+.ui-button--gray.ui-button--primary:hover:not(:disabled) {
+  background-color: #4b5563;
+}
+
+.ui-button--gray.ui-button--outline {
+  border-color: #6b7280;
+  color: #6b7280;
+}
+
+.ui-button--gray.ui-button--outline:hover:not(:disabled) {
+  background-color: #f9fafb;
+}
+
+.ui-button--gray.ui-button--link {
+  color: #6b7280;
+}
+
+.ui-button--gray.ui-button--link:hover:not(:disabled) {
+  color: #4b5563;
+}
+
+/* Base Loader Styles */
+.ui-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--accent-primary, #fbbf24); /* Vibrant yellow color */
+}
+
+/* Enhanced neon yellow for better visibility */
+.ui-loader--spinner .ui-loader__spinner {
+  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
+}
+
+.ui-loader--centered {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 1000;
+}
+
+/* Size Variants */
+.ui-loader--xs {
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.ui-loader--sm {
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.ui-loader--md {
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.ui-loader--lg {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+/* Spinner Variant */
+.ui-loader--spinner .ui-loader__spinner {
+  animation: ui-loader-rotation 1s linear infinite;
+  stroke: var(--accent-primary, #fbbf24); /* Vibrant yellow color */
+  stroke-width: 3;
+  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
+}
+
+@keyframes ui-loader-rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Dots Variant */
+.ui-loader--dots .ui-loader__dots {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.ui-loader--dots .ui-loader__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--accent-primary, #fbbf24); /* Vibrant yellow color */
+  animation: ui-loader-dots 1.4s ease-in-out infinite both;
+  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.6));
+}
+
+.ui-loader--dots .ui-loader__dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.ui-loader--dots .ui-loader__dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+.ui-loader--dots .ui-loader__dot:nth-child(3) {
+  animation-delay: 0s;
+}
+
+@keyframes ui-loader-dots {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Pulse Variant */
+.ui-loader--pulse .ui-loader__pulse {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--accent-primary, #fbbf24); /* Vibrant yellow color */
+  animation: ui-loader-pulse 1.2s ease-in-out infinite;
+  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
+}
+
+@keyframes ui-loader-pulse {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+}
+
+/* Size-specific adjustments for dots */
+.ui-loader--xs .ui-loader__dot {
+  width: 4px;
+  height: 4px;
+}
+
+.ui-loader--sm .ui-loader__dot {
+  width: 6px;
+  height: 6px;
+}
+
+.ui-loader--md .ui-loader__dot {
+  width: 8px;
+  height: 8px;
+}
+
+.ui-loader--lg .ui-loader__dot {
+  width: 10px;
+  height: 10px;
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .ui-loader--centered {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+}
+
+/* Theme-aware background for centered loader */
+[data-theme="dark"] .ui-loader--centered {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+[data-theme="light"] .ui-loader--centered {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+/* Radio Component Styles */
+.ui-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.ui-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ui-radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.ui-radio__checkmark {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-secondary, #d1d5db);
+  border-radius: 50%;
+  background-color: var(--bg-primary, white);
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  margin-top: 1px;
+}
+
+.ui-radio__checkmark::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: white;
+  transition: transform 0.2s ease;
+}
+
+/* Hover state */
+.ui-radio:hover .ui-radio__checkmark {
+  border-color: var(--text-tertiary, #9ca3af);
+}
+
+/* Checked state */
+.ui-radio__input:checked + .ui-radio__checkmark {
+  border-color: var(--accent-primary, #3b82f6);
+  background-color: var(--accent-primary, #3b82f6);
+}
+
+.ui-radio__input:checked + .ui-radio__checkmark::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* Focus state */
+.ui-radio__input:focus + .ui-radio__checkmark {
+  outline: 2px solid var(--accent-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+/* Disabled state */
+.ui-radio--disabled .ui-radio__checkmark {
+  border-color: var(--border-primary, #e5e7eb);
+  background-color: var(--bg-secondary, #f9fafb);
+}
+
+.ui-radio--disabled .ui-radio__input:checked + .ui-radio__checkmark {
+  border-color: var(--border-secondary, #d1d5db);
+  background-color: var(--border-secondary, #d1d5db);
+}
+
+/* Content styling */
+.ui-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  justify-content: center;
+}
+
+.ui-radio__label {
+  font-weight: 500;
+  color: var(--text-primary, #111827);
+  line-height: 1.4;
+}
+
+.ui-radio__description {
+  font-size: 0.875rem;
+  color: var(--text-secondary, #6b7280);
+  line-height: 1.4;
+}
+
+/* Size variants */
+.ui-radio--sm .ui-radio__checkmark {
+  width: 14px;
+  height: 14px;
+  border-width: 1.5px;
+}
+
+.ui-radio--sm .ui-radio__checkmark::after {
+  width: 5px;
+  height: 5px;
+}
+
+.ui-radio--sm .ui-radio__label {
+  font-size: 0.875rem;
+}
+
+.ui-radio--sm .ui-radio__description {
+  font-size: 0.75rem;
+}
+
+.ui-radio--lg .ui-radio__checkmark {
+  width: 20px;
+  height: 20px;
+  border-width: 2.5px;
+}
+
+.ui-radio--lg .ui-radio__checkmark::after {
+  width: 8px;
+  height: 8px;
+}
+
+.ui-radio--lg .ui-radio__label {
+  font-size: 1.125rem;
+}
+
+.ui-radio--lg .ui-radio__description {
+  font-size: 1rem;
+}
+
+/* Color schemes */
+.ui-radio--blue .ui-radio__input:checked + .ui-radio__checkmark {
+  border-color: #3b82f6;
+  background-color: #3b82f6;
+}
+
+.ui-radio--blue .ui-radio__input:focus + .ui-radio__checkmark {
+  outline-color: #3b82f6;
+}
+
+.ui-radio--green .ui-radio__input:checked + .ui-radio__checkmark {
+  border-color: #10b981;
+  background-color: #10b981;
+}
+
+.ui-radio--green .ui-radio__input:focus + .ui-radio__checkmark {
+  outline-color: #10b981;
+}
+
+.ui-radio--red .ui-radio__input:checked + .ui-radio__checkmark {
+  border-color: #ef4444;
+  background-color: #ef4444;
+}
+
+.ui-radio--red .ui-radio__input:focus + .ui-radio__checkmark {
+  outline-color: #ef4444;
+}
+
+.ui-radio--yellow .ui-radio__input:checked + .ui-radio__checkmark {
+  border-color: #f59e0b;
+  background-color: #f59e0b;
+}
+
+.ui-radio--yellow .ui-radio__input:focus + .ui-radio__checkmark {
+  outline-color: #f59e0b;
+}
+
+.ui-radio--purple .ui-radio__input:checked + .ui-radio__checkmark {
+  border-color: #8b5cf6;
+  background-color: #8b5cf6;
+}
+
+.ui-radio--purple .ui-radio__input:focus + .ui-radio__checkmark {
+  outline-color: #8b5cf6;
+}
+
+.ui-radio--gray .ui-radio__input:checked + .ui-radio__checkmark {
+  border-color: #6b7280;
+  background-color: #6b7280;
+}
+
+.ui-radio--gray .ui-radio__input:focus + .ui-radio__checkmark {
+  outline-color: #6b7280;
+}
+
+/* Radio Group Styles */
+.ui-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ui-radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+
+.ui-text {
+  margin: 0;
+  color: var(--text-primary, #111827);
+  font-family: inherit;
+  line-height: 1.6;
+}
+
+/* Sizes */
+.ui-text--sm {
+  font-size: 0.875rem;
+}
+
+.ui-text--md {
+  font-size: 1rem;
+}
+
+.ui-text--lg {
+  font-size: 1.125rem;
+}
+
+.ui-text--xl {
+  font-size: 1.25rem;
+}
+
+/* Weights */
+.ui-text--regular {
+  font-weight: 400;
+}
+
+.ui-text--medium {
+  font-weight: 500;
+}
+
+.ui-text--semibold {
+  font-weight: 600;
+}
+
+.ui-text--bold {
+  font-weight: 700;
+}
+
+/* Colors */
+.ui-text--primary {
+  color: var(--text-primary, #111827);
+}
+
+.ui-text--secondary {
+  color: var(--text-secondary, #374151);
+}
+
+.ui-text--muted {
+  color: var(--text-muted, #6b7280);
+}
+
+.ui-text--danger {
+  color: #dc2626;
+}
+
+.ui-text--success {
+  color: #16a34a;
+}
+
+.ui-text--warning {
+  color: #d97706;
+}
+
+/* Alignment */
+.ui-text--align-left {
+  text-align: left;
+}
+
+.ui-text--align-center {
+  text-align: center;
+}
+
+.ui-text--align-right {
+  text-align: right;
+}
+
+
+.ui-box {
+  box-sizing: border-box;
+}
+
+
+.ui-flex {
+  display: flex;
+  box-sizing: border-box;
+}
+
+/* Direction */
+.ui-flex--row {
+  flex-direction: row;
+}
+
+.ui-flex--column {
+  flex-direction: column;
+}
+
+.ui-flex--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.ui-flex--column-reverse {
+  flex-direction: column-reverse;
+}
+
+/* Alignment */
+.ui-flex--align-start {
+  align-items: flex-start;
+}
+
+.ui-flex--align-end {
+  align-items: flex-end;
+}
+
+.ui-flex--align-center {
+  align-items: center;
+}
+
+.ui-flex--align-stretch {
+  align-items: stretch;
+}
+
+.ui-flex--align-baseline {
+  align-items: baseline;
+}
+
+/* Justify */
+.ui-flex--justify-start {
+  justify-content: flex-start;
+}
+
+.ui-flex--justify-end {
+  justify-content: flex-end;
+}
+
+.ui-flex--justify-center {
+  justify-content: center;
+}
+
+.ui-flex--justify-between {
+  justify-content: space-between;
+}
+
+.ui-flex--justify-around {
+  justify-content: space-around;
+}
+
+.ui-flex--justify-evenly {
+  justify-content: space-evenly;
+}
+
+/* Wrap */
+.ui-flex--wrap-nowrap {
+  flex-wrap: nowrap;
+}
+
+.ui-flex--wrap-wrap {
+  flex-wrap: wrap;
+}
+
+.ui-flex--wrap-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+
+.ui-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  animation: fadeIn 0.2s ease-out;
+}
+
+.ui-modal-content {
+  position: relative;
+  background-color: var(--bg-primary, #ffffff);
+  border-radius: 0.5rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.3s ease-out;
+  z-index: 1001;
+  width: 100%;
+  margin: 1rem;
+}
+
+.ui-modal-content--centered {
+  margin: auto;
+}
+
+.ui-modal-content--sm {
+  max-width: 24rem;
+}
+
+.ui-modal-content--md {
+  max-width: 32rem;
+}
+
+.ui-modal-content--lg {
+  max-width: 48rem;
+}
+
+.ui-modal-content--xl {
+  max-width: 64rem;
+}
+
+.ui-modal-content--full {
+  max-width: 90vw;
+  max-height: 90vh;
+}
+
+.ui-modal-header {
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.ui-modal-header h2,
+.ui-modal-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary, #111827);
+}
+
+.ui-modal-body {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+  color: var(--text-secondary, #6b7280);
+}
+
+.ui-modal-footer {
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+.ui-modal-close-button {
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+  color: var(--text-secondary, #6b7280);
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+  margin-left: auto;
+}
+
+.ui-modal-close-button:hover {
+  background-color: var(--bg-secondary, #f3f4f6);
+  color: var(--text-primary, #111827);
+}
+
+.ui-modal-close-button:focus {
+  outline: 2px solid var(--accent-primary, #bb00ed);
+  outline-offset: 2px;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ui-modal-content {
+    background-color: var(--bg-primary, #1f2937);
+  }
+
+  .ui-modal-close-button:hover {
+    background-color: var(--bg-secondary, #374151);
+  }
+}
+
+
+.ui-form-control {
+  width: 100%;
+  position: relative;
+}
+
+.ui-form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #111827);
+  margin-bottom: 0.5rem;
+}
+
+.ui-form-label__required {
+  color: var(--danger, #dc2626);
+  margin-left: 0.25rem;
+}
+
+.ui-form-error-message {
+  display: flex;
+  align-items: center;
+  color: var(--danger, #dc2626);
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+
+
+.ui-input {
+  width: 100%;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--text-primary, #111827);
+  background-color: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-primary, #d1d5db);
+  border-radius: 0.375rem;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.ui-input:focus {
+  border-color: var(--accent-primary, #bb00ed);
+  box-shadow: 0 0 0 3px rgba(187, 0, 237, 0.1);
+}
+
+.ui-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-input--readonly {
+  cursor: default;
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-input--invalid {
+  border-color: var(--danger, #dc2626);
+}
+
+.ui-input--invalid:focus {
+  border-color: var(--danger, #dc2626);
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+/* Sizes */
+.ui-input--sm {
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+}
+
+.ui-input--md {
+  height: 2.5rem;
+  padding: 0 1rem;
+  font-size: 1rem;
+}
+
+.ui-input--lg {
+  height: 3rem;
+  padding: 0 1.25rem;
+  font-size: 1.125rem;
+}
+
+/* Variants */
+.ui-input--outline {
+  border: 1px solid var(--border-primary, #d1d5db);
+  background-color: var(--bg-primary, #ffffff);
+}
+
+.ui-input--filled {
+  border: none;
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-input--filled:focus {
+  background-color: var(--bg-primary, #ffffff);
+  border: 1px solid var(--accent-primary, #bb00ed);
+}
+
+.ui-input--unstyled {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .ui-input {
+    background-color: var(--bg-primary, #1f2937);
+    border-color: var(--border-primary, #374151);
+    color: var(--text-primary, #f9fafb);
+  }
+
+  .ui-input--filled {
+    background-color: var(--bg-secondary, #374151);
+  }
+
+  .ui-input--filled:focus {
+    background-color: var(--bg-primary, #1f2937);
+  }
+}
+
+
+.ui-textarea {
+  width: 100%;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--text-primary, #111827);
+  background-color: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-primary, #d1d5db);
+  border-radius: 0.375rem;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+.ui-textarea:focus {
+  border-color: var(--accent-primary, #bb00ed);
+  box-shadow: 0 0 0 3px rgba(187, 0, 237, 0.1);
+}
+
+.ui-textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-textarea--readonly {
+  cursor: default;
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-textarea--invalid {
+  border-color: var(--danger, #dc2626);
+}
+
+.ui-textarea--invalid:focus {
+  border-color: var(--danger, #dc2626);
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+/* Sizes */
+.ui-textarea--sm {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  min-height: 4rem;
+}
+
+.ui-textarea--md {
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  min-height: 5rem;
+}
+
+.ui-textarea--lg {
+  padding: 1rem 1.25rem;
+  font-size: 1.125rem;
+  min-height: 6rem;
+}
+
+/* Variants */
+.ui-textarea--outline {
+  border: 1px solid var(--border-primary, #d1d5db);
+  background-color: var(--bg-primary, #ffffff);
+}
+
+.ui-textarea--filled {
+  border: none;
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-textarea--filled:focus {
+  background-color: var(--bg-primary, #ffffff);
+  border: 1px solid var(--accent-primary, #bb00ed);
+}
+
+.ui-textarea--unstyled {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Resize */
+.ui-textarea--resize-none {
+  resize: none;
+}
+
+.ui-textarea--resize-both {
+  resize: both;
+}
+
+.ui-textarea--resize-horizontal {
+  resize: horizontal;
+}
+
+.ui-textarea--resize-vertical {
+  resize: vertical;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .ui-textarea {
+    background-color: var(--bg-primary, #1f2937);
+    border-color: var(--border-primary, #374151);
+    color: var(--text-primary, #f9fafb);
+  }
+
+  .ui-textarea--filled {
+    background-color: var(--bg-secondary, #374151);
+  }
+
+  .ui-textarea--filled:focus {
+    background-color: var(--bg-primary, #1f2937);
+  }
+}
+
+
+.ui-link {
+  color: var(--accent-primary, #bb00ed);
+  text-decoration: none;
+  transition: color 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.ui-link:hover {
+  color: var(--accent-secondary, #9d00c7);
+}
+
+.ui-link:focus {
+  outline: 2px solid var(--accent-primary, #bb00ed);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Variants */
+.ui-link--link {
+  text-decoration: underline;
+}
+
+.ui-link--link:hover {
+  text-decoration: none;
+}
+
+.ui-link--underline {
+  text-decoration: underline;
+}
+
+.ui-link--underline:hover {
+  text-decoration: underline;
+}
+
+.ui-link--none {
+  text-decoration: none;
+}
+
+/* Colors */
+.ui-link--primary {
+  color: var(--accent-primary, #bb00ed);
+}
+
+.ui-link--primary:hover {
+  color: var(--accent-secondary, #9d00c7);
+}
+
+.ui-link--secondary {
+  color: var(--text-secondary, #6b7280);
+}
+
+.ui-link--secondary:hover {
+  color: var(--text-primary, #111827);
+}
+
+.ui-link--accent {
+  color: var(--accent-primary, #bb00ed);
+}
+
+.ui-link--accent:hover {
+  color: var(--accent-secondary, #9d00c7);
+}
+
+
+.ui-grid {
+  display: grid;
+  box-sizing: border-box;
+}
+
+
+.ui-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+  background: transparent;
+  color: var(--text-primary, #111827);
+}
+
+.ui-icon-button:focus-visible {
+  outline: 2px solid var(--accent-primary, #bb00ed);
+  outline-offset: 2px;
+}
+
+.ui-icon-button:disabled,
+.ui-icon-button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Sizes */
+.ui-icon-button--xs {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.75rem;
+}
+
+.ui-icon-button--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.875rem;
+}
+
+.ui-icon-button--md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1rem;
+}
+
+.ui-icon-button--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.125rem;
+}
+
+/* Variants */
+.ui-icon-button--ghost {
+  background: transparent;
+}
+
+.ui-icon-button--ghost:hover:not(:disabled) {
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-icon-button--outline {
+  border: 1px solid var(--border-primary, #d1d5db);
+  background: transparent;
+}
+
+.ui-icon-button--outline:hover:not(:disabled) {
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-icon-button--solid {
+  background-color: var(--accent-primary, #bb00ed);
+  color: white;
+}
+
+.ui-icon-button--solid:hover:not(:disabled) {
+  background-color: var(--accent-secondary, #9d00c7);
+}
+
+/* Round */
+.ui-icon-button--round {
+  border-radius: 50%;
+}
+
+.ui-icon-button:not(.ui-icon-button--round) {
+  border-radius: 0.375rem;
+}
+
+/* Color Schemes */
+.ui-icon-button--blue.ui-icon-button--solid {
+  background-color: #2563eb;
+  color: white;
+}
+
+.ui-icon-button--blue.ui-icon-button--solid:hover:not(:disabled) {
+  background-color: #1d4ed8;
+}
+
+.ui-icon-button--green.ui-icon-button--solid {
+  background-color: #059669;
+  color: white;
+}
+
+.ui-icon-button--green.ui-icon-button--solid:hover:not(:disabled) {
+  background-color: #047857;
+}
+
+.ui-icon-button--red.ui-icon-button--solid {
+  background-color: #dc2626;
+  color: white;
+}
+
+.ui-icon-button--red.ui-icon-button--solid:hover:not(:disabled) {
+  background-color: #b91c1c;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .ui-icon-button--ghost:hover:not(:disabled) {
+    background-color: var(--bg-secondary, #374151);
+  }
+
+  .ui-icon-button--outline {
+    border-color: var(--border-primary, #374151);
+  }
+
+  .ui-icon-button--outline:hover:not(:disabled) {
+    background-color: var(--bg-secondary, #374151);
+  }
+}
+
+
+.ui-circular-progress {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-circular-progress__svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-circular-progress__track {
+  opacity: 0.2;
+}
+
+.ui-circular-progress__indicator {
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.ui-circular-progress__indicator--indeterminate {
+  animation: circular-progress-spin 1.4s ease-in-out infinite;
+  stroke-dasharray: var(--dash-array-1, 1px), var(--circumference, 200px);
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  transform-origin: center;
+}
+
+.ui-circular-progress__label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #111827);
+}
+
+.ui-circular-progress-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #111827);
+}
+
+@keyframes circular-progress-spin {
+  0% {
+    stroke-dasharray: var(--dash-array-1, 1px), var(--circumference, 200px);
+    stroke-dashoffset: 0;
+    transform: rotate(-90deg);
+  }
+  50% {
+    stroke-dasharray: var(--dash-array-2, 89px), var(--circumference, 200px);
+    stroke-dashoffset: var(--dash-offset-1, -35px);
+    transform: rotate(-90deg);
+  }
+  100% {
+    stroke-dasharray: var(--dash-array-2, 89px), var(--circumference, 200px);
+    stroke-dashoffset: var(--dash-offset-2, -124px);
+    transform: rotate(270deg);
+  }
+}
+
+
+.ui-tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.ui-tooltip {
+  position: absolute;
+  z-index: 1000;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.9);
+  border-radius: 0.375rem;
+  white-space: nowrap;
+  pointer-events: none;
+  animation: tooltip-fade-in 0.15s ease-out;
+}
+
+.ui-tooltip--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+}
+
+.ui-tooltip--top::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.9);
+}
+
+.ui-tooltip--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+}
+
+.ui-tooltip--bottom::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.9);
+}
+
+.ui-tooltip--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 0.5rem;
+}
+
+.ui-tooltip--left::after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 4px solid transparent;
+  border-left-color: rgba(0, 0, 0, 0.9);
+}
+
+.ui-tooltip--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+}
+
+.ui-tooltip--right::after {
+  content: "";
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 4px solid transparent;
+  border-right-color: rgba(0, 0, 0, 0.9);
+}
+
+@keyframes tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+
+.ui-toast-container {
+  position: fixed;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  pointer-events: none;
+  max-width: 420px;
+  width: 100%;
+  padding: 1rem;
+}
+
+.ui-toast-container--top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.ui-toast-container--top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.ui-toast-container--top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.ui-toast-container--bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.ui-toast-container--bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.ui-toast-container--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.ui-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  background-color: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-primary, #e2e8f0);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  min-width: 300px;
+  max-width: 420px;
+  pointer-events: auto;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.ui-toast--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.ui-toast--exiting {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.ui-toast--success {
+  border-left: 4px solid #10b981;
+  background-color: #f0fdf4;
+  border-color: #10b981;
+}
+
+.ui-toast--success .ui-toast__title {
+  color: #065f46;
+}
+
+.ui-toast--success .ui-toast__description {
+  color: #047857;
+}
+
+.ui-toast--error {
+  border-left: 4px solid #ef4444;
+  background-color: #fef2f2;
+  border-color: #ef4444;
+}
+
+.ui-toast--error .ui-toast__title {
+  color: #991b1b;
+}
+
+.ui-toast--error .ui-toast__description {
+  color: #b91c1c;
+}
+
+.ui-toast--warning {
+  border-left: 4px solid #f59e0b;
+  background-color: #fffbeb;
+  border-color: #f59e0b;
+}
+
+.ui-toast--warning .ui-toast__title {
+  color: #92400e;
+}
+
+.ui-toast--warning .ui-toast__description {
+  color: #b45309;
+}
+
+.ui-toast--info {
+  border-left: 4px solid #3b82f6;
+  background-color: #eff6ff;
+  border-color: #3b82f6;
+}
+
+.ui-toast--info .ui-toast__title {
+  color: #1e40af;
+}
+
+.ui-toast--info .ui-toast__description {
+  color: #2563eb;
+}
+
+.ui-toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-toast__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a202c);
+  margin-bottom: 0.25rem;
+  line-height: 1.4;
+}
+
+.ui-toast__description {
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #4a5568);
+  line-height: 1.5;
+}
+
+.ui-toast__close {
+  background: none;
+  border: none;
+  color: var(--text-secondary, #718096);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease-in-out;
+}
+
+.ui-toast__close:hover {
+  background-color: var(--bg-secondary, #f7fafc);
+  color: var(--text-primary, #1a202c);
+}
+
+.ui-toast__close:active {
+  background-color: var(--bg-tertiary, #edf2f7);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ui-toast {
+    border-color: var(--border-primary, #2d3748);
+  }
+
+  .ui-toast--success {
+    background-color: #064e3b;
+    border-color: #10b981;
+  }
+
+  .ui-toast--success .ui-toast__title {
+    color: #6ee7b7;
+  }
+
+  .ui-toast--success .ui-toast__description {
+    color: #34d399;
+  }
+
+  .ui-toast--error {
+    background-color: #7f1d1d;
+    border-color: #ef4444;
+  }
+
+  .ui-toast--error .ui-toast__title {
+    color: #fca5a5;
+  }
+
+  .ui-toast--error .ui-toast__description {
+    color: #f87171;
+  }
+
+  .ui-toast--warning {
+    background-color: #78350f;
+    border-color: #f59e0b;
+  }
+
+  .ui-toast--warning .ui-toast__title {
+    color: #fcd34d;
+  }
+
+  .ui-toast--warning .ui-toast__description {
+    color: #fbbf24;
+  }
+
+  .ui-toast--info {
+    background-color: #1e3a8a;
+    border-color: #3b82f6;
+  }
+
+  .ui-toast--info .ui-toast__title {
+    color: #93c5fd;
+  }
+
+  .ui-toast--info .ui-toast__description {
+    color: #60a5fa;
+  }
+
+  .ui-toast__close {
+    color: var(--text-secondary, #718096);
+  }
+
+  .ui-toast__close:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--text-primary, #f7fafc);
+  }
+
+  .ui-toast__close:active {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
+
+.ui-popover-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.ui-popover {
+  position: absolute;
+  z-index: 1000;
+  background-color: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-primary, #e2e8f0);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  min-width: 200px;
+  max-width: 320px;
+  padding: 0;
+  animation: ui-popover-fade-in 0.15s ease-out;
+}
+
+/* Positioning */
+.ui-popover--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+.ui-popover--top-start {
+  bottom: 100%;
+  left: 0;
+  transform: none;
+  margin-bottom: 8px;
+}
+
+.ui-popover--top-end {
+  bottom: 100%;
+  right: 0;
+  left: auto;
+  transform: none;
+  margin-bottom: 8px;
+}
+
+.ui-popover--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+.ui-popover--bottom-start {
+  top: 100%;
+  left: 0;
+  transform: none;
+  margin-top: 8px;
+}
+
+.ui-popover--bottom-end {
+  top: 100%;
+  right: 0;
+  left: auto;
+  transform: none;
+  margin-top: 8px;
+}
+
+.ui-popover--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 8px;
+}
+
+.ui-popover--left-start {
+  right: 100%;
+  top: 0;
+  transform: none;
+  margin-right: 8px;
+}
+
+.ui-popover--left-end {
+  right: 100%;
+  bottom: 0;
+  top: auto;
+  transform: none;
+  margin-right: 8px;
+}
+
+.ui-popover--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+
+.ui-popover--right-start {
+  left: 100%;
+  top: 0;
+  transform: none;
+  margin-left: 8px;
+}
+
+.ui-popover--right-end {
+  left: 100%;
+  bottom: 0;
+  top: auto;
+  transform: none;
+  margin-left: 8px;
+}
+
+@keyframes ui-popover-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.ui-popover--with-arrow::before,
+.ui-popover--with-arrow::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* Top arrow - border (::after) */
+.ui-popover--top.ui-popover--with-arrow::after,
+.ui-popover--top-start.ui-popover--with-arrow::after,
+.ui-popover--top-end.ui-popover--with-arrow::after {
+  bottom: -9px;
+  left: var(--arrow-left, 50%);
+  transform: translateX(-50%);
+  border-width: 9px 9px 0 9px;
+  border-color: var(--border-primary, #e2e8f0) transparent transparent transparent;
+  z-index: -1;
+}
+
+/* Top arrow - fill (::before) */
+.ui-popover--top.ui-popover--with-arrow::before,
+.ui-popover--top-start.ui-popover--with-arrow::before,
+.ui-popover--top-end.ui-popover--with-arrow::before {
+  bottom: -8px;
+  left: var(--arrow-left, 50%);
+  transform: translateX(-50%);
+  border-width: 8px 8px 0 8px;
+  border-color: var(--bg-primary, #ffffff) transparent transparent transparent;
+}
+
+.ui-popover--top-start.ui-popover--with-arrow::after {
+  left: var(--arrow-left, 16px);
+  transform: none;
+}
+
+.ui-popover--top-start.ui-popover--with-arrow::before {
+  left: var(--arrow-left, 16px);
+  transform: none;
+}
+
+.ui-popover--top-end.ui-popover--with-arrow::after {
+  left: auto;
+  right: calc(100% - var(--arrow-left, 16px));
+  transform: none;
+}
+
+.ui-popover--top-end.ui-popover--with-arrow::before {
+  left: auto;
+  right: calc(100% - var(--arrow-left, 16px));
+  transform: none;
+}
+
+/* Bottom arrow - border (::after) */
+.ui-popover--bottom.ui-popover--with-arrow::after,
+.ui-popover--bottom-start.ui-popover--with-arrow::after,
+.ui-popover--bottom-end.ui-popover--with-arrow::after {
+  top: -9px;
+  left: var(--arrow-left, 50%);
+  transform: translateX(-50%);
+  border-width: 0 9px 9px 9px;
+  border-color: transparent transparent var(--border-primary, #e2e8f0) transparent;
+  z-index: -1;
+}
+
+/* Bottom arrow - fill (::before) */
+.ui-popover--bottom.ui-popover--with-arrow::before,
+.ui-popover--bottom-start.ui-popover--with-arrow::before,
+.ui-popover--bottom-end.ui-popover--with-arrow::before {
+  top: -8px;
+  left: var(--arrow-left, 50%);
+  transform: translateX(-50%);
+  border-width: 0 8px 8px 8px;
+  border-color: transparent transparent var(--bg-primary, #ffffff) transparent;
+}
+
+.ui-popover--bottom-start.ui-popover--with-arrow::after {
+  left: var(--arrow-left, 16px);
+  transform: none;
+}
+
+.ui-popover--bottom-start.ui-popover--with-arrow::before {
+  left: var(--arrow-left, 16px);
+  transform: none;
+}
+
+.ui-popover--bottom-end.ui-popover--with-arrow::after {
+  left: auto;
+  right: calc(100% - var(--arrow-left, 16px));
+  transform: none;
+}
+
+.ui-popover--bottom-end.ui-popover--with-arrow::before {
+  left: auto;
+  right: calc(100% - var(--arrow-left, 16px));
+  transform: none;
+}
+
+/* Left arrow - border (::after) */
+.ui-popover--left.ui-popover--with-arrow::after,
+.ui-popover--left-start.ui-popover--with-arrow::after,
+.ui-popover--left-end.ui-popover--with-arrow::after {
+  right: -9px;
+  top: var(--arrow-top, 50%);
+  transform: translateY(-50%);
+  border-width: 9px 0 9px 9px;
+  border-color: transparent transparent transparent var(--border-primary, #e2e8f0);
+  z-index: -1;
+}
+
+/* Left arrow - fill (::before) */
+.ui-popover--left.ui-popover--with-arrow::before,
+.ui-popover--left-start.ui-popover--with-arrow::before,
+.ui-popover--left-end.ui-popover--with-arrow::before {
+  right: -8px;
+  top: var(--arrow-top, 50%);
+  transform: translateY(-50%);
+  border-width: 8px 0 8px 8px;
+  border-color: transparent transparent transparent var(--bg-primary, #ffffff);
+}
+
+.ui-popover--left-start.ui-popover--with-arrow::after {
+  top: var(--arrow-top, 16px);
+  transform: none;
+}
+
+.ui-popover--left-start.ui-popover--with-arrow::before {
+  top: var(--arrow-top, 16px);
+  transform: none;
+}
+
+.ui-popover--left-end.ui-popover--with-arrow::after {
+  top: auto;
+  bottom: calc(100% - var(--arrow-top, 16px));
+  transform: none;
+}
+
+.ui-popover--left-end.ui-popover--with-arrow::before {
+  top: auto;
+  bottom: calc(100% - var(--arrow-top, 16px));
+  transform: none;
+}
+
+/* Right arrow - border (::after) */
+.ui-popover--right.ui-popover--with-arrow::after,
+.ui-popover--right-start.ui-popover--with-arrow::after,
+.ui-popover--right-end.ui-popover--with-arrow::after {
+  left: -9px;
+  top: var(--arrow-top, 50%);
+  transform: translateY(-50%);
+  border-width: 9px 9px 9px 0;
+  border-color: transparent var(--border-primary, #e2e8f0) transparent transparent;
+  z-index: -1;
+}
+
+/* Right arrow - fill (::before) */
+.ui-popover--right.ui-popover--with-arrow::before,
+.ui-popover--right-start.ui-popover--with-arrow::before,
+.ui-popover--right-end.ui-popover--with-arrow::before {
+  left: -8px;
+  top: var(--arrow-top, 50%);
+  transform: translateY(-50%);
+  border-width: 8px 8px 8px 0;
+  border-color: transparent var(--bg-primary, #ffffff) transparent transparent;
+}
+
+.ui-popover--right-start.ui-popover--with-arrow::after {
+  top: var(--arrow-top, 16px);
+  transform: none;
+}
+
+.ui-popover--right-start.ui-popover--with-arrow::before {
+  top: var(--arrow-top, 16px);
+  transform: none;
+}
+
+.ui-popover--right-end.ui-popover--with-arrow::after {
+  top: auto;
+  bottom: calc(100% - var(--arrow-top, 16px));
+  transform: none;
+}
+
+.ui-popover--right-end.ui-popover--with-arrow::before {
+  top: auto;
+  bottom: calc(100% - var(--arrow-top, 16px));
+  transform: none;
+}
+
+.ui-popover__content {
+  padding: 0;
+}
+
+.ui-popover__header {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-primary, #e2e8f0);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a202c);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ui-popover__header:has(.ui-popover__close) {
+  padding-right: 0.5rem;
+}
+
+.ui-popover__body {
+  padding: 1rem;
+  color: var(--text-secondary, #4a5568);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.ui-popover__footer {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border-primary, #e2e8f0);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.ui-popover__close {
+  background: none;
+  border: none;
+  color: var(--text-secondary, #718096);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
+}
+
+.ui-popover__close:hover {
+  background-color: var(--bg-secondary, #f7fafc);
+  color: var(--text-primary, #1a202c);
+}
+
+.ui-popover__close:active {
+  background-color: var(--bg-tertiary, #edf2f7);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ui-popover {
+    background-color: var(--bg-primary, #1a202c);
+    border-color: var(--border-primary, #2d3748);
+  }
+
+  .ui-popover__header {
+    color: var(--text-primary, #f7fafc);
+    border-bottom-color: var(--border-primary, #2d3748);
+  }
+
+  .ui-popover__body {
+    color: var(--text-secondary, #a0aec0);
+  }
+
+  .ui-popover__footer {
+    border-top-color: var(--border-primary, #2d3748);
+  }
+
+  .ui-popover__close {
+    color: var(--text-secondary, #718096);
+  }
+
+  .ui-popover__close:hover {
+    background-color: var(--bg-secondary, #2d3748);
+    color: var(--text-primary, #f7fafc);
+  }
+
+  .ui-popover__close:active {
+    background-color: var(--bg-tertiary, #4a5568);
+  }
+
+  /* Dark mode - Top arrow border */
+  .ui-popover--top.ui-popover--with-arrow::after,
+  .ui-popover--top-start.ui-popover--with-arrow::after,
+  .ui-popover--top-end.ui-popover--with-arrow::after {
+    border-color: var(--border-primary, #2d3748) transparent transparent transparent;
+  }
+
+  /* Dark mode - Top arrow fill */
+  .ui-popover--top.ui-popover--with-arrow::before,
+  .ui-popover--top-start.ui-popover--with-arrow::before,
+  .ui-popover--top-end.ui-popover--with-arrow::before {
+    border-color: var(--bg-primary, #1a202c) transparent transparent transparent;
+  }
+
+  /* Dark mode - Bottom arrow border */
+  .ui-popover--bottom.ui-popover--with-arrow::after,
+  .ui-popover--bottom-start.ui-popover--with-arrow::after,
+  .ui-popover--bottom-end.ui-popover--with-arrow::after {
+    border-color: transparent transparent var(--border-primary, #2d3748) transparent;
+  }
+
+  /* Dark mode - Bottom arrow fill */
+  .ui-popover--bottom.ui-popover--with-arrow::before,
+  .ui-popover--bottom-start.ui-popover--with-arrow::before,
+  .ui-popover--bottom-end.ui-popover--with-arrow::before {
+    border-color: transparent transparent var(--bg-primary, #1a202c) transparent;
+  }
+
+  /* Dark mode - Left arrow border */
+  .ui-popover--left.ui-popover--with-arrow::after,
+  .ui-popover--left-start.ui-popover--with-arrow::after,
+  .ui-popover--left-end.ui-popover--with-arrow::after {
+    border-color: transparent transparent transparent var(--border-primary, #2d3748);
+  }
+
+  /* Dark mode - Left arrow fill */
+  .ui-popover--left.ui-popover--with-arrow::before,
+  .ui-popover--left-start.ui-popover--with-arrow::before,
+  .ui-popover--left-end.ui-popover--with-arrow::before {
+    border-color: transparent transparent transparent var(--bg-primary, #1a202c);
+  }
+
+  /* Dark mode - Right arrow border */
+  .ui-popover--right.ui-popover--with-arrow::after,
+  .ui-popover--right-start.ui-popover--with-arrow::after,
+  .ui-popover--right-end.ui-popover--with-arrow::after {
+    border-color: transparent var(--border-primary, #2d3748) transparent transparent;
+  }
+
+  /* Dark mode - Right arrow fill */
+  .ui-popover--right.ui-popover--with-arrow::before,
+  .ui-popover--right-start.ui-popover--with-arrow::before,
+  .ui-popover--right-end.ui-popover--with-arrow::before {
+    border-color: transparent var(--bg-primary, #1a202c) transparent transparent;
+  }
+}
+
+
+/* Uilab Theme Variables */
+
+:root {
+  /* Light theme variables */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9fafb;
+  --bg-tertiary: #f3f4f6;
+  --text-primary: #111827;
+  --text-secondary: #6b7280;
+  --text-tertiary: #9ca3af;
+  --border-primary: #e5e7eb;
+  --border-secondary: #d1d5db;
+  --accent-primary: #3b82f6;
+  --accent-secondary: #1d4ed8;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+[data-theme="dark"] {
+  /* Dark theme variables */
+  --bg-primary: #111827;
+  --bg-secondary: #1f2937;
+  --bg-tertiary: #374151;
+  --text-primary: #f9fafb;
+  --text-secondary: #d1d5db;
+  --text-tertiary: #9ca3af;
+  --border-primary: #374151;
+  --border-secondary: #4b5563;
+  --accent-primary: #60a5fa;
+  --accent-secondary: #3b82f6;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+}
+
+/* Theme transition for all elements */
+* {
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Body theme styles */
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}