@eric-emg/symphiq-components 1.2.402 → 1.2.405

package/src/styles.css

@@ -1,328 +1,333 @@
-@import 'tailwindcss';
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0 !important;
-}
-
-/* Custom text size smaller than text-xs */
-.text-2xs {
-  font-size: 0.625rem;
-  line-height: 0.875rem;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes progressBar {
-  from {
-    width: 0%;
-  }
-}
-
-@keyframes pulseGlow {
-  0%, 100% {
-    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
-  }
-}
-
-@keyframes valueGlow {
-  0% {
-    text-shadow: 0 0 8px rgba(59, 130, 246, 0);
-  }
-  50% {
-    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.3);
-  }
-  100% {
-    text-shadow: 0 0 8px rgba(59, 130, 246, 0);
-  }
-}
-
-@keyframes slideUpFade {
-  from {
-    opacity: 0;
-    transform: translateY(30px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes pulseSubtle {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-    box-shadow: inherit;
-  }
-  50% {
-    opacity: 0.9;
-    transform: scale(1.05);
-    filter: brightness(1.1);
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes contentChange {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.3;
-    transform: scale(0.98);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.animate-fade-in-up {
-  opacity: 0;
-  animation: fadeInUp 0.6s ease-out forwards;
-}
-
-.animate-fade-in {
-  animation: fadeIn 0.3s ease-out forwards;
-}
-
-.animate-fade-out {
-  animation: fadeOut 0.2s ease-out forwards;
-}
-
-.animate-slide-up-fade {
-  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.animate-progress-bar {
-  animation: progressBar 1.2s ease-out forwards;
-}
-
-.animate-pulse-glow {
-  animation: pulseGlow 2s ease-in-out infinite;
-}
-
-.animate-pulse-subtle {
-  animation: pulseSubtle 2s ease-in-out infinite;
-}
-
-.animate-value-glow.value-changed {
-  animation: valueGlow 1.5s ease-out;
-}
-
-.animate-scale-in {
-  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.animate-content-change {
-  animation: contentChange 0.4s ease-in-out;
-}
-
-.transition-opacity-fast {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.transition-opacity-slow {
-  transition: opacity 0.4s ease-in-out;
-}
-
-@keyframes searchHighlight {
-  0%, 100% {
-    background-color: transparent;
-    box-shadow: none;
-  }
-  50% {
-    background-color: rgba(59, 130, 246, 0.15);
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
-  }
-}
-
-.search-highlight {
-  animation: searchHighlight 1.5s ease-in-out 2;
-  border-radius: 12px;
-  scroll-margin-top: 100px;
-}
-
-@keyframes pulseBorder {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
-  }
-  50% {
-    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
-  }
-}
-
-.animate-pulse-border {
-  animation: pulseBorder 1s ease-out 3;
-}
-
-/* Radial gradient utility */
-.bg-gradient-radial {
-  background: radial-gradient(circle, var(--tw-gradient-stops));
-}
-
-/* CSS-only animated bubbles - optimized for performance */
-@keyframes bubbleFloat1 {
-  0%, 100% {
-    background-position: 0% 0%, 100% 100%, 50% 50%, 20% 80%, 80% 20%;
-  }
-  33% {
-    background-position: 15% 10%, 85% 90%, 60% 40%, 30% 70%, 70% 30%;
-  }
-  66% {
-    background-position: 10% 20%, 90% 80%, 45% 55%, 25% 75%, 75% 25%;
-  }
-}
-
-@keyframes bubbleFloat2 {
-  0%, 100% {
-    background-position: 100% 0%, 0% 100%, 80% 20%, 30% 70%, 60% 50%;
-  }
-  33% {
-    background-position: 90% 15%, 10% 85%, 70% 30%, 40% 60%, 50% 40%;
-  }
-  66% {
-    background-position: 85% 10%, 15% 90%, 75% 25%, 35% 65%, 55% 45%;
-  }
-}
-
-.animated-bubbles {
-  background-image:
-    radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
-    radial-gradient(circle, rgba(147, 51, 234, 0.12) 0%, transparent 50%),
-    radial-gradient(circle, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
-    radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
-    radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 55%);
-  background-size: 300px 300px, 400px 400px, 350px 350px, 280px 280px, 320px 320px;
-  background-repeat: no-repeat;
-  animation: bubbleFloat1 35s ease-in-out infinite;
-  will-change: background-position;
-  backface-visibility: hidden;
-  pointer-events: none;
-}
-
-.animated-bubbles.light-mode {
-  background-image:
-    radial-gradient(circle, rgba(59, 130, 246, 0.20) 0%, transparent 50%),
-    radial-gradient(circle, rgba(147, 51, 234, 0.16) 0%, transparent 50%),
-    radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, transparent 60%),
-    radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 45%),
-    radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 55%);
-  animation: bubbleFloat2 40s ease-in-out infinite;
-}
-
-/* Expanded item animations */
-@keyframes bounceScale {
-  0% {
-    transform: scale(1);
-  }
-  25% {
-    transform: scale(1.15);
-  }
-  50% {
-    transform: scale(1.08);
-  }
-  75% {
-    transform: scale(1.12);
-  }
-  100% {
-    transform: scale(1.1);
-  }
-}
-
-@keyframes iconGlow {
-  0% {
-    filter: brightness(1) saturate(1);
-  }
-  100% {
-    filter: brightness(1.2) saturate(1.3);
-  }
-}
-
-@keyframes textGrow {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.02);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
-
-@keyframes badgePulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.08);
-    opacity: 0.95;
-  }
-}
-
-.expanded-icon-bounce {
-  animation: bounceScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
-             iconGlow 0.3s ease-out 0.2s forwards;
-}
-
-.expanded-title-grow {
-  animation: textGrow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
-}
-
-.expanded-badge-pulse {
-  animation: badgePulse 0.6s ease-in-out 0.3s 2;
-}
-
-/* Smooth transitions for expanded state */
-.expand-transition {
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .expanded-icon-bounce,
-  .expanded-title-grow,
-  .expanded-badge-pulse {
-    animation: none;
-    transform: scale(1.1);
-  }
-}
+@import 'tailwindcss';
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0 !important;
+}
+
+/* Custom text size smaller than text-xs */
+.text-2xs {
+  font-size: 0.625rem;
+  line-height: 0.875rem;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes progressBar {
+  from {
+    width: 0%;
+  }
+}
+
+@keyframes pulseGlow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
+  }
+}
+
+@keyframes valueGlow {
+  0% {
+    text-shadow: 0 0 8px rgba(59, 130, 246, 0);
+  }
+  50% {
+    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.3);
+  }
+  100% {
+    text-shadow: 0 0 8px rgba(59, 130, 246, 0);
+  }
+}
+
+@keyframes slideUpFade {
+  from {
+    opacity: 0;
+    transform: translateY(30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes pulseSubtle {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+    box-shadow: inherit;
+  }
+  50% {
+    opacity: 0.9;
+    transform: scale(1.05);
+    filter: brightness(1.1);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes contentChange {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+    transform: scale(0.98);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-fade-in-up {
+  opacity: 0;
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.animate-fade-out {
+  animation: fadeOut 0.2s ease-out forwards;
+}
+
+.animate-slide-up-fade {
+  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-progress-bar {
+  animation: progressBar 1.2s ease-out forwards;
+}
+
+.animate-pulse-glow {
+  animation: pulseGlow 2s ease-in-out infinite;
+}
+
+.animate-pulse-subtle {
+  animation: pulseSubtle 2s ease-in-out infinite;
+}
+
+.animate-value-glow.value-changed {
+  animation: valueGlow 1.5s ease-out;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-content-change {
+  animation: contentChange 0.4s ease-in-out;
+}
+
+.transition-opacity-fast {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.transition-opacity-slow {
+  transition: opacity 0.4s ease-in-out;
+}
+
+@keyframes searchHighlight {
+  0%, 100% {
+    background-color: transparent;
+    box-shadow: none;
+  }
+  50% {
+    background-color: rgba(59, 130, 246, 0.15);
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+  }
+}
+
+.search-highlight {
+  animation: searchHighlight 1.5s ease-in-out 2;
+  border-radius: 12px;
+  scroll-margin-top: 100px;
+}
+
+@keyframes pulseBorder {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
+  }
+}
+
+.animate-pulse-border {
+  animation: pulseBorder 1s ease-out 3;
+}
+
+/* Radial gradient utility */
+.bg-gradient-radial {
+  background: radial-gradient(circle, var(--tw-gradient-stops));
+}
+
+/* CSS-only animated bubbles - optimized for performance */
+@keyframes bubbleFloat1 {
+  0%, 100% {
+    background-position: 0% 0%, 100% 100%, 50% 50%, 20% 80%, 80% 20%;
+  }
+  33% {
+    background-position: 15% 10%, 85% 90%, 60% 40%, 30% 70%, 70% 30%;
+  }
+  66% {
+    background-position: 10% 20%, 90% 80%, 45% 55%, 25% 75%, 75% 25%;
+  }
+}
+
+@keyframes bubbleFloat2 {
+  0%, 100% {
+    background-position: 100% 0%, 0% 100%, 80% 20%, 30% 70%, 60% 50%;
+  }
+  33% {
+    background-position: 90% 15%, 10% 85%, 70% 30%, 40% 60%, 50% 40%;
+  }
+  66% {
+    background-position: 85% 10%, 15% 90%, 75% 25%, 35% 65%, 55% 45%;
+  }
+}
+
+.animated-bubbles {
+  background-image:
+    radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
+    radial-gradient(circle, rgba(147, 51, 234, 0.12) 0%, transparent 50%),
+    radial-gradient(circle, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
+    radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
+    radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 55%);
+  background-size: 300px 300px, 400px 400px, 350px 350px, 280px 280px, 320px 320px;
+  background-repeat: no-repeat;
+  animation: bubbleFloat1 35s ease-in-out infinite;
+  will-change: background-position;
+  backface-visibility: hidden;
+  pointer-events: none;
+}
+
+.animated-bubbles.light-mode {
+  background-image:
+    radial-gradient(circle, rgba(59, 130, 246, 0.20) 0%, transparent 50%),
+    radial-gradient(circle, rgba(147, 51, 234, 0.16) 0%, transparent 50%),
+    radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, transparent 60%),
+    radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 45%),
+    radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 55%);
+  animation: bubbleFloat2 40s ease-in-out infinite;
+}
+
+/* Expanded item animations */
+@keyframes bounceScale {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.15);
+  }
+  50% {
+    transform: scale(1.08);
+  }
+  75% {
+    transform: scale(1.12);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes iconGlow {
+  0% {
+    filter: brightness(1) saturate(1);
+  }
+  100% {
+    filter: brightness(1.2) saturate(1.3);
+  }
+}
+
+@keyframes textGrow {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1.05);
+  }
+}
+
+@keyframes badgePulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 0.95;
+  }
+}
+
+.expanded-icon-bounce {
+  animation: bounceScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+             iconGlow 0.3s ease-out 0.2s forwards;
+}
+
+.expanded-title-grow {
+  animation: textGrow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
+  transform-origin: left center;
+}
+
+.expanded-badge-pulse {
+  animation: badgePulse 0.6s ease-in-out 0.3s 2;
+}
+
+/* Smooth transitions for expanded state */
+.expand-transition {
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .expanded-icon-bounce,
+  .expanded-title-grow,
+  .expanded-badge-pulse {
+    animation: none;
+    transform: scale(1.1);
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}