funuicss 3.8.17 → 3.9.0

package/css/fun.css

@@ -2147,12 +2147,14 @@ z-index: 9999 !important;
 
 /* 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;
 }
 
@@ -11806,12 +11808,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 +11824,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 +11836,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 +11850,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 +11950,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 +11983,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 +12014,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 +12030,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 +12065,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 +12097,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 +12157,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 +12184,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 +12252,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.0",
   "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

@@ -177,7 +177,7 @@ function SideBar(_a) {
                                 else {
                                     window.location.href = link.uri;
                                 }
-                            }, key: link.uri, className: 'hover-scale' },
+                            }, key: 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

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;