funuicss 3.8.17 → 3.9.1

package/css/fun.css

@@ -2145,14 +2145,17 @@ z-index: 9999 !important;
   top: 0;
 }
 
+
 /* Dropdown Item */
 .dropdown-item {
-  padding: 0.6rem 0.8rem;
+  padding: 0.4rem 0.8rem;
   cursor: pointer;
   display: flex;
   align-items: center;
+  border-bottom: var(--border);
   gap: 0.5rem;
   flex-wrap: nowrap;
+  font-size: var(--smallFont);
   transition: background-color 0.15s ease;
 }
 
@@ -4525,101 +4528,62 @@ filter: brightness(90%);
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip .tip {
-  display: block;
-  background-color: var(--dark);
-  backdrop-filter: var(--raiseBackdrop);
-  color: var(--white);
-  text-align: center;
-  border-radius: var(--radius);
-  padding: 0.2rem 0.5rem !important;
-  font-weight: 500 !important;
-  position: absolute;
-  z-index: 10;
- transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+/* Portal tooltip specific styles */
+.tip[style*="position: fixed"] {
+  position: fixed !important;
+  z-index: 9999 !important;
+  background-color: var(--dark) !important;
+  color: var(--white) !important;
+  padding: 0.4rem 0.75rem !important;
+  border-radius: var(--radius) !important;
+  box-shadow: var(--raised) !important;
   font-size: var(--smallFont) !important;
-  line-height: normal !important;
-  box-shadow: var(--raised);
-  width: max-content;
-  white-space: nowrap; /* prevents line breaks */
-  opacity: 0;
-  pointer-events: none;
+  max-width: 200px !important;
+  white-space: nowrap !important;
+  pointer-events: none !important;
 }
 
-
-/* Show on hover */
-.tooltip:hover .tip {
- opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
+/* Arrow for portal tooltips */
+.tip[style*="position: fixed"]::after {
+  content: "" !important;
+  position: absolute !important;
+  border-style: solid !important;
 }
 
-/* Arrow base */
-.tooltip .tip::after {
-  content: "";
-  position: absolute;
-  border-style: solid;
-}
-
-/* Top Tooltip */
-.tooltip .tip-top {
-  bottom: 125%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.tooltip .tip-top::after {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 6px 6px 0 6px;
-  border-color: var(--dark) transparent transparent transparent;
+/* Top arrow */
+.tip-top[style*="position: fixed"]::after {
+  bottom: -6px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  border-width: 6px 6px 0 6px !important;
+  border-color: var(--dark) transparent transparent transparent !important;
 }
 
-/* Bottom Tooltip */
-.tooltip .tip-bottom {
-  top: 125%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.tooltip .tip-bottom::after {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 0 6px 6px 6px;
-  border-color: transparent transparent var(--dark) transparent;
+/* Bottom arrow */
+.tip-bottom[style*="position: fixed"]::after {
+  top: -6px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  border-width: 0 6px 6px 6px !important;
+  border-color: transparent transparent var(--dark) transparent !important;
 }
 
-/* Right Tooltip */
-.tooltip .tip-right {
-  top: 50%;
-  left: 105%;
-  transform: translateY(-50%);
-}
-.tooltip .tip-right::after {
-  top: 50%;
-  left: -6px;
-  transform: translateY(-50%);
-  border-width: 6px 6px 6px 0;
-  border-color: transparent var(--dark) transparent transparent;
+/* Left arrow */
+.tip-left[style*="position: fixed"]::after {
+  right: -6px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  border-width: 6px 0 6px 6px !important;
+  border-color: transparent transparent transparent var(--dark) !important;
 }
 
-/* Left Tooltip */
-.tooltip .tip-left {
-  top: 50%;
-  right: 105%;
-  transform: translateY(-50%);
-}
-.tooltip .tip-left::after {
-  top: 50%;
-  right: -6px;
-  transform: translateY(-50%);
-  border-width: 6px 0 6px 6px;
-  border-color: transparent transparent transparent var(--dark);
+/* Right arrow */
+.tip-right[style*="position: fixed"]::after {
+  left: -6px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  border-width: 6px 6px 6px 0 !important;
+  border-color: transparent var(--dark) transparent transparent !important;
 }
 
 .snackbar {
@@ -11806,12 +11770,15 @@ z-index: 10;
 .fade-in-down { animation: fadeInDown 0.8s ease-out !important; }
 .fade-in-left { animation: fadeInLeft 0.8s ease-out !important; }
 .fade-in-right { animation: fadeInRight 0.8s ease-out !important; }
+.fade-in-scale { animation: fadeInScale 0.8s ease-out !important; }
+.fade-in-blur { animation: fadeInBlur 0.8s ease-out !important; }
 
 /* Slide In */
 .slide-in-up { animation: slideInUp 0.8s ease-out !important; }
 .slide-in-down { animation: slideInDown 0.8s ease-out !important; }
 .slide-in-left { animation: slideInLeft 0.8s ease-out !important; }
 .slide-in-right { animation: slideInRight 0.8s ease-out !important; }
+.slide-in-diagonal { animation: slideInDiagonal 0.8s ease-out !important; }
 
 /* Zoom In */
 .zoom-in { animation: zoomIn 0.6s ease-out !important; }
@@ -11819,6 +11786,7 @@ z-index: 10;
 .zoom-in-down { animation: zoomInDown 0.8s ease-out !important; }
 .zoom-in-left { animation: zoomInLeft 0.8s ease-out !important; }
 .zoom-in-right { animation: zoomInRight 0.8s ease-out !important; }
+.zoom-in-rotate { animation: zoomInRotate 0.8s ease-out !important; }
 
 /* Bounce In */
 .bounce-in { animation: bounceIn 0.8s ease-out !important; }
@@ -11830,11 +11798,13 @@ z-index: 10;
 /* Flip In */
 .flip-in-x { animation: flipInX 0.8s ease-out !important; }
 .flip-in-y { animation: flipInY 0.8s ease-out !important; }
+.flip-in-diagonal { animation: flipInDiagonal 0.8s ease-out !important; }
 
 /* Rotate In */
 .rotate-in { animation: rotateIn 0.8s ease-out !important; }
 .rotate-in-up { animation: rotateInUp 0.8s ease-out !important; }
 .rotate-in-down { animation: rotateInDown 0.8s ease-out !important; }
+.rotate-in-scale { animation: rotateInScale 0.8s ease-out !important; }
 
 /* Special Entrance */
 .roll-in { animation: rollIn 0.8s ease-out !important; }
@@ -11842,42 +11812,99 @@ z-index: 10;
 .swing-in { animation: swingIn 0.8s ease-out !important; }
 .wobble-in { animation: wobbleIn 0.8s ease-out !important; }
 .pulse-in { animation: pulseIn 0.8s ease-out !important; }
+.unfold-in { animation: unfoldIn 0.8s ease-out !important; }
+.spiral-in { animation: spiralIn 0.8s ease-out !important; }
 
 /* ===== HOVER ANIMATIONS ===== */
 /* Scale Hover */
-.hover-scale { transition: transform 0.3s ease !important; }
+.hover-scale { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
 .hover-scale:hover { transform: scale(1.05) !important; }
-.hover-scale-lg { transition: transform 0.3s ease !important; }
+.hover-scale-lg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
 .hover-scale-lg:hover { transform: scale(1.1) !important; }
-.hover-scale-sm { transition: transform 0.3s ease !important; }
+.hover-scale-sm { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
 .hover-scale-sm:hover { transform: scale(1.02) !important; }
 
+/* Scale & Rotate Combined */
+.hover-scale-rotate { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.hover-scale-rotate:hover { transform: scale(1.05) rotate(3deg) !important; }
+.hover-scale-rotate-rev { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.hover-scale-rotate-rev:hover { transform: scale(1.05) rotate(-3deg) !important; }
+
 /* Lift Hover */
-.hover-lift { transition: all 0.3s ease !important; }
-.hover-lift:hover { transform: translateY(-0.5rem) !important; box-shadow: var(--card) !important; }
-.hover-lift-lg { transition: all 0.3s ease !important; }
-.hover-lift-lg:hover { transform: translateY(-1rem) !important; box-shadow: var(--card) !important; }
+.hover-lift { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.hover-lift:hover { transform: translateY(-0.5rem) !important; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15) !important; }
+.hover-lift-lg { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.hover-lift-lg:hover { transform: translateY(-1rem) !important; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2) !important; }
+
+/* Lift & Rotate Combined */
+.hover-lift-rotate { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.hover-lift-rotate:hover { transform: translateY(-0.5rem) rotate(2deg) !important; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15) !important; }
+
+/* Tilt Hover */
+.hover-tilt-left { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.hover-tilt-left:hover { transform: perspective(1000px) rotateY(-10deg) !important; }
+.hover-tilt-right { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.hover-tilt-right:hover { transform: perspective(1000px) rotateY(10deg) !important; }
+.hover-tilt-up { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.hover-tilt-up:hover { transform: perspective(1000px) rotateX(10deg) !important; }
+
+/* Skew Hover */
+.hover-skew { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.hover-skew:hover { transform: skewX(-5deg) scale(1.02) !important; }
 
 /* Glow Hover */
 .hover-glow { transition: all 0.3s ease !important; }
-.hover-glow:hover { box-shadow: 0 0 2rem rgba(var(--primary-rgb), 0.4) !important; transform: translateY(-0.25rem) !important; }
+.hover-glow:hover { box-shadow: 0 0 2rem rgba(59, 130, 246, 0.5) !important; transform: translateY(-0.25rem) !important; }
+.hover-glow-intense { transition: all 0.3s ease !important; }
+.hover-glow-intense:hover { box-shadow: 0 0 3rem rgba(59, 130, 246, 0.8), 0 0 1rem rgba(59, 130, 246, 0.4) inset !important; transform: scale(1.05) !important; }
+
+/* Bounce & Scale */
+.hover-bounce-scale:hover { animation: bounceScale 0.6s ease !important; }
 
-/* Shake Hover */
+/* Shake & Wobble */
 .hover-shake:hover { animation: shake 0.5s ease-in-out !important; }
 .hover-wobble:hover { animation: wobble 0.5s ease-in-out !important; }
 .hover-bounce:hover { animation: bounce 0.5s ease-in-out !important; }
+.hover-jello:hover { animation: jello 0.6s ease-in-out !important; }
+.hover-rubber:hover { animation: rubberBand 0.6s ease-in-out !important; }
 
 /* Border Hover */
 .hover-border-grow { transition: all 0.3s ease !important; border: 2px solid transparent !important; }
-.hover-border-grow:hover { border-color: var(--gradient) !important; transform: scale(1.02) !important; }
+.hover-border-grow:hover { border-color: rgb(59, 130, 246) !important; transform: scale(1.02) !important; }
+.hover-border-glow { transition: all 0.3s ease !important; }
+.hover-border-glow:hover { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important; }
+
+/* Shadow Hover */
+.hover-shadow-soft { transition: box-shadow 0.3s ease !important; }
+.hover-shadow-soft:hover { box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important; }
+.hover-shadow-hard { transition: box-shadow 0.3s ease !important; }
+.hover-shadow-hard:hover { box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2) !important; }
+.hover-shadow-neon { transition: all 0.3s ease !important; }
+.hover-shadow-neon:hover { box-shadow: 0 0 1rem rgba(59, 130, 246, 0.6), 0 0 2rem rgba(59, 130, 246, 0.4) !important; }
 
 /* Text Hover */
-.hover-text-glow:hover { text-shadow: 0 0 1rem currentColor !important; }
-.hover-text-lift:hover { transform: translateY(-0.125rem) !important; text-shadow: var(--card) !important; }
+.hover-text-glow:hover { text-shadow: 0 0 1rem currentColor !important; transition: text-shadow 0.3s ease !important; }
+.hover-text-lift { transition: all 0.3s ease !important; }
+.hover-text-lift:hover { transform: translateY(-0.125rem) !important; text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2) !important; }
+.hover-text-scale { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; display: inline-block !important; }
+.hover-text-scale:hover { transform: scale(1.1) !important; }
+
+/* Flip Hover */
+.hover-flip-x { transition: transform 0.6s ease !important; transform-style: preserve-3d !important; }
+.hover-flip-x:hover { transform: rotateX(360deg) !important; }
+.hover-flip-y { transition: transform 0.6s ease !important; transform-style: preserve-3d !important; }
+.hover-flip-y:hover { transform: rotateY(360deg) !important; }
+
+/* Swing Hover */
+.hover-swing:hover { animation: swing 0.8s ease !important; transform-origin: top center !important; }
+
+/* Pulse Hover */
+.hover-pulse:hover { animation: pulseHover 0.6s ease !important; }
+.hover-heartbeat:hover { animation: heartbeat 0.8s ease-in-out !important; }
 
 /* ===== CONTINUOUS ANIMATIONS ===== */
 .animate-float { animation: float 3s ease-in-out infinite !important; }
-.animate-pulse-slow { animation: pulse 3s ease-in-out infinite !important; }
+.animate-float-slow { animation: float 5s ease-in-out infinite !important; }
 .animate-bounce-slow { animation: bounce 2s ease-in-out infinite !important; }
 .animate-spin-slow { animation: spin 3s linear infinite !important; }
 .animate-ping-slow { animation: ping 3s ease-out infinite !important; }
@@ -11885,8 +11912,14 @@ z-index: 10;
 .animate-breath { animation: breath 4s ease-in-out infinite !important; }
 .animate-wave { animation: wave 2s ease-in-out infinite !important; }
 .animate-glow { animation: glow 2s ease-in-out infinite !important; }
+.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite !important; }
+.animate-drift { animation: drift 6s ease-in-out infinite !important; }
+.animate-sway { animation: sway 3s ease-in-out infinite !important; }
+.animate-rotate-slow { animation: rotateSlow 20s linear infinite !important; }
+.animate-bob { animation: bob 2s ease-in-out infinite !important; }
 
 /* ===== ANIMATION KEYFRAMES ===== */
+/* Fade Animations */
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
@@ -11912,6 +11945,17 @@ z-index: 10;
   to { opacity: 1; transform: translateX(0); }
 }
 
+@keyframes fadeInScale {
+  from { opacity: 0; transform: scale(0.8); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes fadeInBlur {
+  from { opacity: 0; filter: blur(10px); }
+  to { opacity: 1; filter: blur(0); }
+}
+
+/* Slide Animations */
 @keyframes slideInUp {
   from { transform: translateY(100%); }
   to { transform: translateY(0); }
@@ -11932,6 +11976,12 @@ z-index: 10;
   to { transform: translateX(0); }
 }
 
+@keyframes slideInDiagonal {
+  from { transform: translate(-100%, -100%); opacity: 0; }
+  to { transform: translate(0, 0); opacity: 1; }
+}
+
+/* Zoom Animations */
 @keyframes zoomIn {
   from { opacity: 0; transform: scale(0.5); }
   to { opacity: 1; transform: scale(1); }
@@ -11942,6 +11992,27 @@ z-index: 10;
   to { opacity: 1; transform: scale(1) translateY(0); }
 }
 
+@keyframes zoomInDown {
+  from { opacity: 0; transform: scale(0.5) translateY(-2rem); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes zoomInLeft {
+  from { opacity: 0; transform: scale(0.5) translateX(-2rem); }
+  to { opacity: 1; transform: scale(1) translateX(0); }
+}
+
+@keyframes zoomInRight {
+  from { opacity: 0; transform: scale(0.5) translateX(2rem); }
+  to { opacity: 1; transform: scale(1) translateX(0); }
+}
+
+@keyframes zoomInRotate {
+  from { opacity: 0; transform: scale(0.5) rotate(-45deg); }
+  to { opacity: 1; transform: scale(1) rotate(0); }
+}
+
+/* Bounce Animations */
 @keyframes bounceIn {
   0% { opacity: 0; transform: scale(0.3); }
   50% { opacity: 1; transform: scale(1.05); }
@@ -11956,6 +12027,28 @@ z-index: 10;
   100% { opacity: 1; transform: translateY(0) scale(1); }
 }
 
+@keyframes bounceInDown {
+  0% { opacity: 0; transform: translateY(-2rem) scale(0.3); }
+  50% { opacity: 1; transform: translateY(1rem) scale(1.05); }
+  70% { transform: translateY(-0.5rem) scale(0.9); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes bounceInLeft {
+  0% { opacity: 0; transform: translateX(-2rem) scale(0.3); }
+  50% { opacity: 1; transform: translateX(1rem) scale(1.05); }
+  70% { transform: translateX(-0.5rem) scale(0.9); }
+  100% { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@keyframes bounceInRight {
+  0% { opacity: 0; transform: translateX(2rem) scale(0.3); }
+  50% { opacity: 1; transform: translateX(-1rem) scale(1.05); }
+  70% { transform: translateX(0.5rem) scale(0.9); }
+  100% { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+/* Flip Animations */
 @keyframes flipInX {
   from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
   to { transform: perspective(400px) rotateX(0deg); opacity: 1; }
@@ -11966,11 +12059,33 @@ z-index: 10;
   to { transform: perspective(400px) rotateY(0deg); opacity: 1; }
 }
 
+@keyframes flipInDiagonal {
+  from { transform: perspective(400px) rotate3d(1, 1, 0, 90deg); opacity: 0; }
+  to { transform: perspective(400px) rotate3d(1, 1, 0, 0deg); opacity: 1; }
+}
+
+/* Rotate Animations */
 @keyframes rotateIn {
   from { transform: rotate(-180deg); opacity: 0; }
   to { transform: rotate(0deg); opacity: 1; }
 }
 
+@keyframes rotateInUp {
+  from { transform: rotate(-180deg) translateY(2rem); opacity: 0; }
+  to { transform: rotate(0deg) translateY(0); opacity: 1; }
+}
+
+@keyframes rotateInDown {
+  from { transform: rotate(180deg) translateY(-2rem); opacity: 0; }
+  to { transform: rotate(0deg) translateY(0); opacity: 1; }
+}
+
+@keyframes rotateInScale {
+  from { transform: rotate(-180deg) scale(0.5); opacity: 0; }
+  to { transform: rotate(0deg) scale(1); opacity: 1; }
+}
+
+/* Special Entrance Animations */
 @keyframes rollIn {
   from { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
   to { opacity: 1; transform: translateX(0px) rotate(0deg); }
@@ -12004,7 +12119,18 @@ z-index: 10;
   100% { opacity: 1; transform: scale(1); }
 }
 
-/* Hover Keyframes */
+@keyframes unfoldIn {
+  0% { transform: scaleY(0.005) scaleX(0); opacity: 0; }
+  50% { transform: scaleY(0.005) scaleX(1); opacity: 0.5; }
+  100% { transform: scaleY(1) scaleX(1); opacity: 1; }
+}
+
+@keyframes spiralIn {
+  0% { transform: rotate(960deg) scale(0); opacity: 0; }
+  100% { transform: rotate(0deg) scale(1); opacity: 1; }
+}
+
+/* Hover Effect Keyframes */
 @keyframes shake {
   0%, 100% { transform: translateX(0); }
   20%, 60% { transform: translateX(-0.5rem); }
@@ -12020,6 +12146,57 @@ z-index: 10;
   75% { transform: translateX(-5%) rotate(-1deg); }
 }
 
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-1rem); }
+}
+
+@keyframes jello {
+  0%, 100% { transform: skewX(0deg) skewY(0deg); }
+  30% { transform: skewX(25deg) skewY(25deg); }
+  40% { transform: skewX(-15deg) skewY(-15deg); }
+  50% { transform: skewX(15deg) skewY(15deg); }
+  65% { transform: skewX(-5deg) skewY(-5deg); }
+  75% { transform: skewX(5deg) skewY(5deg); }
+}
+
+@keyframes rubberBand {
+  0% { transform: scale(1); }
+  30% { transform: scale(1.25, 0.75); }
+  40% { transform: scale(0.75, 1.25); }
+  50% { transform: scale(1.15, 0.85); }
+  65% { transform: scale(0.95, 1.05); }
+  75% { transform: scale(1.05, 0.95); }
+  100% { transform: scale(1); }
+}
+
+@keyframes bounceScale {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.15); }
+}
+
+@keyframes swing {
+  20% { transform: rotate(15deg); }
+  40% { transform: rotate(-10deg); }
+  60% { transform: rotate(5deg); }
+  80% { transform: rotate(-5deg); }
+  100% { transform: rotate(0deg); }
+}
+
+@keyframes pulseHover {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.08); }
+  100% { transform: scale(1); }
+}
+
+@keyframes heartbeat {
+  0%, 100% { transform: scale(1); }
+  14% { transform: scale(1.15); }
+  28% { transform: scale(1); }
+  42% { transform: scale(1.15); }
+  70% { transform: scale(1); }
+}
+
 /* Continuous Animations */
 @keyframes float {
   0%, 100% { transform: translateY(0px); }
@@ -12037,15 +12214,63 @@ z-index: 10;
 }
 
 @keyframes glow {
-  0%, 100% { box-shadow: 0 0 0.5rem rgba(var(--primary-rgb), 0.5); }
-  50% { box-shadow: 0 0 2rem rgba(var(--primary-rgb), 0.8); }
+  0%, 100% { box-shadow: 0 0 0.5rem rgba(59, 130, 246, 0.5); }
+  50% { box-shadow: 0 0 2rem rgba(59, 130, 246, 0.8); }
+}
+
+@keyframes pulseGlow {
+  0%, 100% { box-shadow: 0 0 1rem rgba(59, 130, 246, 0.4); transform: scale(1); }
+  50% { box-shadow: 0 0 2rem rgba(59, 130, 246, 0.8); transform: scale(1.02); }
 }
 
 @keyframes ping {
   75%, 100% { transform: scale(2); opacity: 0; }
 }
 
+@keyframes drift {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(0.5rem, -0.5rem); }
+  50% { transform: translate(0, -1rem); }
+  75% { transform: translate(-0.5rem, -0.5rem); }
+}
+
+@keyframes sway {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(5deg); }
+}
+
+@keyframes rotateSlow {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes bob {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-0.5rem); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+
+
+/* ===== UTILITY CLASSES ===== */
+.delay-100 { animation-delay: 0.1s !important; }
+.delay-200 { animation-delay: 0.2s !important; }
+.delay-300 { animation-delay: 0.3s !important; }
+.delay-500 { animation-delay: 0.5s !important; }
+.delay-700 { animation-delay: 0.7s !important; }
+.delay-1000 { animation-delay: 1s !important; }
+
+.duration-fast { animation-duration: 0.3s !important; }
+.duration-normal { animation-duration: 0.6s !important; }
+.duration-slow { animation-duration: 1s !important; }
+.duration-slower { animation-duration: 1.5s !important; }
 
+.ease-smooth { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
+.ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; }
 
 /* Make all scrollbars thin */
 * {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.8.17",
+  "version": "3.9.1",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/drop/Dropdown.d.ts

@@ -23,6 +23,7 @@ interface DropdownProps {
     height?: string;
     minHeight?: string;
     maxHeight?: string;
+    usePortal?: boolean;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/ui/drop/Dropdown.js

@@ -35,44 +35,226 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
 var Dropdown = function (_a) {
-    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, button = _a.button, items = _a.items, _c = _a.hoverable, hoverable = _c === void 0 ? true : _c, _d = _a.openOnHover, openOnHover = _d === void 0 ? true : _d, _e = _a.closableOnlyOutside, closableOnlyOutside = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.menuClassName, menuClassName = _g === void 0 ? '' : _g, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight;
+    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, button = _a.button, items = _a.items, _c = _a.hoverable, hoverable = _c === void 0 ? true : _c, _d = _a.openOnHover, openOnHover = _d === void 0 ? true : _d, _e = _a.closableOnlyOutside, closableOnlyOutside = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.menuClassName, menuClassName = _g === void 0 ? '' : _g, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, _h = _a.usePortal, usePortal = _h === void 0 ? true : _h;
     var containerRef = (0, react_1.useRef)(null);
-    var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
+    var triggerRef = (0, react_1.useRef)(null);
+    var _j = (0, react_1.useState)(false), open = _j[0], setOpen = _j[1];
+    var _k = (0, react_1.useState)(null), menuPosition = _k[0], setMenuPosition = _k[1];
+    // Calculate menu position
+    var calculatePosition = function () {
+        if (!triggerRef.current)
+            return;
+        var rect = triggerRef.current.getBoundingClientRect();
+        var scrollY = window.scrollY;
+        var scrollX = window.scrollX;
+        var menuWidth = width ? (width.includes('px') ? parseInt(width) : 200) : 200;
+        var top = rect.bottom + scrollY;
+        var left = rect.left + scrollX;
+        setMenuPosition({
+            top: top,
+            left: left,
+            width: rect.width
+        });
+    };
+    // Handle clicks outside - SIMPLIFIED
     (0, react_1.useEffect)(function () {
         if (openOnHover)
             return;
-        var handleClickOutside = function (event) {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setOpen(false);
+        var handleDocumentClick = function (event) {
+            var _a;
+            // If click is inside the trigger, do nothing (it will be handled by trigger click)
+            if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+                return;
             }
+            // Close dropdown if click is outside
+            setOpen(false);
+            setMenuPosition(null);
         };
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
-    }, [openOnHover]);
-    var showMenu = openOnHover || open;
+        // Add event listener with a delay to avoid immediate trigger
+        var timer = setTimeout(function () {
+            document.addEventListener('click', handleDocumentClick);
+        }, 10);
+        return function () {
+            clearTimeout(timer);
+            document.removeEventListener('click', handleDocumentClick);
+        };
+    }, [openOnHover, open]);
+    // Calculate position when opening
+    (0, react_1.useEffect)(function () {
+        if (open && usePortal) {
+            calculatePosition();
+        }
+        else {
+            setMenuPosition(null);
+        }
+    }, [open, usePortal, position]);
+    var showMenu = (openOnHover || open) && (usePortal ? menuPosition !== null : true);
     var menuStyle = {
-        width: width,
-        minWidth: minWidth,
+        width: width || ((menuPosition === null || menuPosition === void 0 ? void 0 : menuPosition.width) ? "".concat(menuPosition.width, "px") : 'auto'),
+        minWidth: minWidth || '200px',
         maxWidth: maxWidth,
         height: height,
         minHeight: minHeight,
         maxHeight: maxHeight,
+        position: usePortal ? 'fixed' : 'absolute',
+        top: usePortal && menuPosition ? menuPosition.top : undefined,
+        left: usePortal && menuPosition ? menuPosition.left : undefined,
+        zIndex: 9999,
+    };
+    var handleItemClick = function (item) {
+        var _a;
+        if (item.disabled)
+            return;
+        // Execute click handler
+        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+        // Close dropdown unless closableOnlyOutside is true
+        if (!closableOnlyOutside) {
+            setOpen(false);
+            setMenuPosition(null);
+        }
+    };
+    var renderMenu = function () { return (react_1.default.createElement("div", { className: "dropdown-menu ".concat(position, " ").concat(menuClassName), style: menuStyle, 
+        // Prevent clicks inside from closing immediately
+        onClick: function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+        } }, items.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index }, item.divider ? (react_1.default.createElement("div", { className: "dropdown-divider" })) : (react_1.default.createElement("div", { className: "dropdown-item ".concat(item.disabled ? 'disabled' : '', " ").concat(!hoverable ? 'no-hover' : 'hover-lighter'), onClick: function () { return handleItemClick(item); } },
+        item.startIcon && (react_1.default.createElement("span", { className: "dropdown-item-icon" }, item.startIcon)),
+        react_1.default.createElement("span", { className: "dropdown-item-label" }, item.label),
+        item.endIcon && (react_1.default.createElement("span", { className: "dropdown-item-icon" }, item.endIcon)))))); }))); };
+    var handleTriggerClick = function () {
+        if (!openOnHover) {
+            // Toggle open state
+            var newOpenState = !open;
+            setOpen(newOpenState);
+            // If closing, clear position immediately
+            if (!newOpenState) {
+                setMenuPosition(null);
+            }
+        }
     };
     return (react_1.default.createElement("div", { ref: containerRef, className: "dropdown-container ".concat(className), onMouseEnter: function () { return openOnHover && setOpen(true); }, onMouseLeave: function () { return openOnHover && setOpen(false); } },
-        react_1.default.createElement("div", { onClick: function () { return !openOnHover && setOpen(!open); }, style: { cursor: !openOnHover ? 'pointer' : undefined } }, button),
-        showMenu && (react_1.default.createElement("div", { className: "dropdown-menu ".concat(position, " ").concat(menuClassName), style: menuStyle }, items.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index }, item.divider ? (react_1.default.createElement("div", { className: "dropdown-divider" })) : (react_1.default.createElement("div", { className: "dropdown-item ".concat(item.disabled ? 'disabled' : '', " ").concat(!hoverable ? 'no-hover' : ''), onClick: function () {
-                var _a;
-                if (item.disabled)
-                    return;
-                if (!closableOnlyOutside) {
-                    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-                    if (!openOnHover)
-                        setOpen(false);
-                }
-            } },
-            item.startIcon && (react_1.default.createElement("span", { className: "dropdown-item-icon" }, item.startIcon)),
-            react_1.default.createElement("span", { className: "dropdown-item-label" }, item.label),
-            item.endIcon && (react_1.default.createElement("span", { className: "dropdown-item-icon" }, item.endIcon)))))); })))));
+        react_1.default.createElement("div", { ref: triggerRef, onClick: handleTriggerClick, style: { cursor: !openOnHover ? 'pointer' : undefined } }, button),
+        showMenu && (react_1.default.createElement(react_1.default.Fragment, null, usePortal ? ((0, react_dom_1.createPortal)(renderMenu(), document.body)) : (renderMenu())))));
 };
 exports.default = Dropdown;
+// 'use client'; 
+// import React, { useState, useRef, useEffect } from 'react';
+// type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+// interface DropdownItem {
+//   label: React.ReactNode;
+//   onClick?: () => void;
+//   startIcon?: React.ReactNode;
+//   endIcon?: React.ReactNode;
+//   disabled?: boolean;
+//   divider?: boolean;
+// }
+// interface DropdownProps {
+//   position?: Position;
+//   button: React.ReactNode;
+//   items: DropdownItem[];
+//   hoverable?: boolean;
+//   openOnHover?: boolean;
+//   closableOnlyOutside?: boolean;
+//   className?: string;
+//   menuClassName?: string;
+//   width?: string;
+//   minWidth?: string;
+//   maxWidth?: string;
+//   height?: string;
+//   minHeight?: string;
+//   maxHeight?: string;
+// }
+// const Dropdown: React.FC<DropdownProps> = ({
+//   position = 'bottom',
+//   button,
+//   items,
+//   hoverable = true,
+//   openOnHover = true,
+//   closableOnlyOutside = false,
+//   className = '',
+//   menuClassName = '',
+//   width,
+//   minWidth,
+//   maxWidth,
+//   height,
+//   minHeight,
+//   maxHeight,
+// }) => {
+//   const containerRef = useRef<HTMLDivElement>(null);
+//   const [open, setOpen] = useState(false);
+//   useEffect(() => {
+//     if (openOnHover) return;
+//     const handleClickOutside = (event: MouseEvent) => {
+//       if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+//         setOpen(false);
+//       }
+//     };
+//     document.addEventListener('mousedown', handleClickOutside);
+//     return () => document.removeEventListener('mousedown', handleClickOutside);
+//   }, [openOnHover]);
+//   const showMenu = openOnHover || open;
+//   const menuStyle: React.CSSProperties = {
+//     width,
+//     minWidth,
+//     maxWidth,
+//     height,
+//     minHeight,
+//     maxHeight,
+//   };
+//   return (
+//     <div
+//       ref={containerRef}
+//       className={`dropdown-container ${className}`}
+//       onMouseEnter={() => openOnHover && setOpen(true)}
+//       onMouseLeave={() => openOnHover && setOpen(false)}
+//     >
+//       <div
+//         onClick={() => !openOnHover && setOpen(!open)}
+//         style={{ cursor: !openOnHover ? 'pointer' : undefined }}
+//       >
+//         {button}
+//       </div>
+//       {showMenu && (
+//         <div
+//           className={`dropdown-menu ${position} ${menuClassName}`}
+//           style={menuStyle}
+//         >
+//           {items.map((item, index) => (
+//             <React.Fragment key={index}>
+//               {item.divider ? (
+//                 <div className="dropdown-divider" />
+//               ) : (
+//                 <div
+//                   className={`dropdown-item ${item.disabled ? 'disabled' : ''} ${!hoverable ? 'no-hover' : ''}`}
+//                   onClick={() => {
+//                     if (item.disabled) return;
+//                     if (!closableOnlyOutside) {
+//                       item.onClick?.();
+//                       if (!openOnHover) setOpen(false);
+//                     }
+//                   }}
+//                 >
+//                   {item.startIcon && (
+//                     <span className="dropdown-item-icon">
+//                       {item.startIcon}
+//                     </span>
+//                   )}
+//                   <span className="dropdown-item-label">{item.label}</span>
+//                   {item.endIcon && (
+//                     <span className="dropdown-item-icon">
+//                       {item.endIcon}
+//                     </span>
+//                   )}
+//                 </div>
+//               )}
+//             </React.Fragment>
+//           ))}
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+// export default Dropdown;

package/ui/form/Form.js

@@ -326,8 +326,6 @@ var Form = function (props) {
     var submitBg = submitBgProp !== undefined ? submitBgProp : mergedProps.submitBg;
     var submitPrefix = submitPrefixProp !== undefined ? submitPrefixProp : mergedProps.submitPrefix;
     var submitSuffix = submitSuffixProp !== undefined ? submitSuffixProp : mergedProps.submitSuffix;
-    var resetText = resetTextProp !== undefined ? resetTextProp : mergedProps.resetText;
-    var showReset = showResetProp !== undefined ? showResetProp : mergedProps.showReset;
     var isLoading = isLoadingProp !== undefined ? isLoadingProp : mergedProps.isLoading;
     var className = classNameProp !== undefined ? classNameProp : mergedProps.className;
     var layout = layoutProp !== undefined ? layoutProp : mergedProps.layout;

package/ui/sidebar/SideBar.js

@@ -46,6 +46,7 @@ var Button_1 = __importDefault(require("../button/Button"));
 var Accordion_1 = __importDefault(require("../accordion/Accordion"));
 var bs_1 = require("react-icons/bs");
 var Flex_1 = __importDefault(require("../flex/Flex"));
+var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
 function SideBar(_a) {
     var _b, _c;
     var _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.position, position = _e === void 0 ? 'left' : _e, _f = _a.open, open = _f === void 0 ? false : _f, header = _a.header, content = _a.content, footer = _a.footer, _g = _a.top, top = _g === void 0 ? 0 : _g, _h = _a.sidebarWidth, sidebarWidth = _h === void 0 ? 250 : _h, _j = _a.iconCSS, iconCSS = _j === void 0 ? '' : _j, _k = _a.sidebarCss, sidebarCss = _k === void 0 ? '' : _k, activeCss = _a.activeCss, _l = _a.bodyCss, bodyCss = _l === void 0 ? '' : _l, _m = _a.popIcon, popIcon = _m === void 0 ? false : _m, _o = _a.dividers, dividers = _o === void 0 ? false : _o, accordionItemCss = _a.accordionItemCss, _p = _a.links, links = _p === void 0 ? [] : _p, children = _a.children, onClose = _a.onClose, togglePrefix = _a.togglePrefix, _q = _a.isAccordion, isAccordion = _q === void 0 ? false : _q, _r = _a.isCollapsed, isCollapsed = _r === void 0 ? true : _r, // Default to true as requested
@@ -166,23 +167,24 @@ function SideBar(_a) {
                         var isActive = link.onClick
                             ? selectedOption === "".concat(section, "-").concat(index)
                             : pathname === link.uri;
-                        return (react_1.default.createElement("div", { onClick: function () {
-                                if (isMobile) {
-                                    handleClose();
-                                }
-                                if (link === null || link === void 0 ? void 0 : link.onClick) {
-                                    link.onClick();
-                                    setselectedOption("".concat(section, "-").concat(index));
-                                }
-                                else {
-                                    window.location.href = link.uri;
-                                }
-                            }, key: link.uri, className: 'hover-scale' },
-                            react_1.default.createElement("span", { className: " pointer ".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
-                                    ? "p-1 ".concat(isActive ? 'text-primary' : 'bg  border', " central")
-                                    : variant === 'minimal' && !isActive
-                                        ? 'p-1 central bg'
-                                        : ''), style: { lineHeight: 0, borderRadius: '0.4rem', fontSize: collapseIconSize } }, link.icon)));
+                        return (react_1.default.createElement(ToolTip_1.default, { key: link.uri, message: link.text, tip: 'right' },
+                            react_1.default.createElement("div", { onClick: function () {
+                                    if (isMobile) {
+                                        handleClose();
+                                    }
+                                    if (link === null || link === void 0 ? void 0 : link.onClick) {
+                                        link.onClick();
+                                        setselectedOption("".concat(section, "-").concat(index));
+                                    }
+                                    else {
+                                        window.location.href = link.uri;
+                                    }
+                                }, className: 'hover-scale-rotate hover-text-primary' },
+                                react_1.default.createElement("span", { className: " pointer ".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
+                                        ? "p-1 ".concat(isActive ? 'text-primary' : 'bg  border', " central")
+                                        : variant === 'minimal' && !isActive
+                                            ? 'p-1 central bg'
+                                            : ''), style: { lineHeight: 0, borderRadius: '0.4rem', fontSize: collapseIconSize } }, link.icon))));
                     }),
                     sectionIndex < Object.keys(groupedLinks).length - 1 && (react_1.default.createElement("div", { className: "mt-1 mb-1 bt fit" }))));
             })))))),

package/ui/table/Table.js

@@ -354,7 +354,8 @@ function Table(_a) {
                             var shouldSlice = !searchQuery || results.length > 10;
                             return (shouldSlice ? results.slice(startIndex, endIndex) : results).map(function (mdoc, index) { return (React.createElement("div", { className: "table-row animated slide-up ".concat(trCss), key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined, style: {
                                     // Match the grid template columns
-                                    gridTemplateColumns: gridTemplateColumns
+                                    gridTemplateColumns: gridTemplateColumns,
+                                    position: 'relative', zIndex: ((shouldSlice ? results.slice(startIndex, endIndex) : results).length + 2) - (index)
                                 } },
                                 data.fields.map(function (fdoc, findex) {
                                     var _a, _b;

package/ui/tooltip/ToolTip.d.ts

@@ -2,6 +2,12 @@ import * as React from 'react';
 interface ToolTipProps {
     funcss?: string;
     children?: React.ReactNode;
+    content?: React.ReactNode;
+    message?: React.ReactNode;
+    animation?: string;
+    duration?: number;
+    tip?: 'top' | 'bottom' | 'left' | 'right';
+    usePortal?: boolean;
 }
-export default function ToolTip({ funcss, children, ...rest }: ToolTipProps): React.JSX.Element;
+export default function ToolTip({ funcss, children, content, message, animation, duration, tip, usePortal, ...rest }: ToolTipProps): React.JSX.Element;
 export {};

package/ui/tooltip/ToolTip.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -57,7 +58,73 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ToolTip;
 var React = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
 function ToolTip(_a) {
-    var funcss = _a.funcss, children = _a.children, rest = __rest(_a, ["funcss", "children"]);
-    return (React.createElement("span", __assign({ className: "tooltip ".concat(funcss !== null && funcss !== void 0 ? funcss : '') }, rest), children));
+    var funcss = _a.funcss, children = _a.children, content = _a.content, message = _a.message, animation = _a.animation, duration = _a.duration, _b = _a.tip, tip = _b === void 0 ? 'top' : _b, _c = _a.usePortal, usePortal = _c === void 0 ? true : _c, rest = __rest(_a, ["funcss", "children", "content", "message", "animation", "duration", "tip", "usePortal"]);
+    var _d = React.useState(false), isVisible = _d[0], setIsVisible = _d[1];
+    var _e = React.useState({ x: 0, y: 0 }), coords = _e[0], setCoords = _e[1];
+    var triggerRef = React.useRef(null);
+    var text = message || content || children;
+    var handleMouseEnter = function (e) {
+        if (triggerRef.current) {
+            var rect = triggerRef.current.getBoundingClientRect();
+            var x = rect.left + (rect.width / 2);
+            var y = rect.top;
+            if (tip === 'bottom') {
+                y = rect.bottom;
+            }
+            else if (tip === 'left') {
+                x = rect.left;
+                y = rect.top + (rect.height / 2);
+            }
+            else if (tip === 'right') {
+                x = rect.right;
+                y = rect.top + (rect.height / 2);
+            }
+            setCoords({ x: x, y: y });
+            setIsVisible(true);
+        }
+    };
+    var handleMouseLeave = function () {
+        setIsVisible(false);
+    };
+    var tooltipStyle = {
+        position: 'fixed',
+        top: coords.y + window.scrollY,
+        left: coords.x + window.scrollX,
+        zIndex: 9999,
+        opacity: isVisible ? 1 : 0,
+        transition: 'opacity 0.2s ease',
+        pointerEvents: 'none',
+        transform: tip === 'top' ? 'translate(-50%, -100%)' :
+            tip === 'bottom' ? 'translate(-50%, 0)' :
+                tip === 'left' ? 'translate(-100%, -50%)' :
+                    'translate(0, -50%)',
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", __assign({ ref: triggerRef, className: "tooltip ".concat(funcss), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, rest),
+            !usePortal && text && (React.createElement("div", { className: "tip tip-".concat(tip) }, text)),
+            children && children !== text ? children : null),
+        usePortal && text && isVisible && (0, react_dom_1.createPortal)(React.createElement("div", { className: "tip tip-".concat(tip), style: tooltipStyle }, text), document.body)));
 }
+// import * as React from 'react';
+// import Tip from './Tip';
+// interface ToolTipProps {
+//   funcss?: string;
+//   children?: React.ReactNode;
+//   content?: React.ReactNode;
+//   message?: React.ReactNode;
+//   animation?: string;
+//   duration?: number;
+// }
+// export default function ToolTip({ funcss, children, content, message, animation, duration, ...rest }: ToolTipProps) {
+//   const text = message || content || children;
+//   return (
+//     <span
+//       className={`tooltip ${funcss}`}
+//       {...rest}
+//     >
+//       {text && <Tip tip="top" content={text} animation={animation} duration={duration} />}
+//     </span>
+//   );
+// }