funuicss 3.9.10 → 3.9.12

package/css/fun.css

@@ -2082,70 +2082,72 @@ border-radius: var(--borderRadius);
 }
 
 
-
 /* Dropdown Container */
 .dropdown-container {
   position: relative;
   width: fit-content;
+  display: inline-block;
 }
 
-/* Dropdown Menu */
+/* Dropdown Menu - Base Styles */
 .dropdown-menu {
-  position: absolute;
-z-index: 9999 !important;
   background-color: var(--page-bg);
   border: var(--border);
   border-radius: 0.5rem;
   box-shadow: var(--card);
   overflow: auto;
-  animation: dropdownFadeIn 0.15s ease-out;
+  z-index: 9999;
+  animation: fadeIn 0.15s ease-out;
 }
 
-/* Position Variants - Vertical (Top/Bottom) */
-.dropdown-menu.bottom-left {
+/* For non-portal mode (absolute positioning within container) */
+.dropdown-container .dropdown-menu:not([style*="position: fixed"]) {
+  position: absolute;
+}
+
+/* Position Variants - For non-portal mode */
+.dropdown-container .dropdown-menu.bottom-left:not([style*="position: fixed"]) {
   top: calc(100% + 8px);
   left: 0;
 }
 
-.dropdown-menu.bottom-right {
+.dropdown-container .dropdown-menu.bottom-right:not([style*="position: fixed"]) {
   top: calc(100% + 8px);
   right: 0;
 }
 
-.dropdown-menu.bottom {
+.dropdown-container .dropdown-menu.bottom:not([style*="position: fixed"]) {
   top: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
 }
 
-.dropdown-menu.top-left {
+.dropdown-container .dropdown-menu.top-left:not([style*="position: fixed"]) {
   bottom: calc(100% + 8px);
   left: 0;
 }
 
-.dropdown-menu.top-right {
+.dropdown-container .dropdown-menu.top-right:not([style*="position: fixed"]) {
   bottom: calc(100% + 8px);
   right: 0;
 }
 
-.dropdown-menu.top {
+.dropdown-container .dropdown-menu.top:not([style*="position: fixed"]) {
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
 }
 
-/* Position Variants - Horizontal (Left/Right) */
-.dropdown-menu.left {
+.dropdown-container .dropdown-menu.left:not([style*="position: fixed"]) {
   right: calc(100% + 8px);
   top: 0;
 }
 
-.dropdown-menu.right {
+.dropdown-container .dropdown-menu.right:not([style*="position: fixed"]) {
   left: calc(100% + 8px);
   top: 0;
 }
 
-
 /* Dropdown Item */
 .dropdown-item {
   padding: 0.4rem 0.8rem;
@@ -2157,6 +2159,7 @@ z-index: 9999 !important;
   flex-wrap: nowrap;
   font-size: var(--smallFont);
   transition: background-color 0.15s ease;
+  white-space: nowrap;
 }
 
 .dropdown-item:hover {
@@ -2169,8 +2172,8 @@ z-index: 9999 !important;
   pointer-events: none;
 }
 
-.dropdown-item.no-hover:hover {
-  background-color: transparent;
+.dropdown-item:last-child {
+  border-bottom: none;
 }
 
 /* Dropdown Item Icons */
@@ -2182,106 +2185,24 @@ z-index: 9999 !important;
 
 .dropdown-item-label {
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Dropdown Divider */
 .dropdown-divider {
   height: 1px;
-  background-color: var(--border);
+  background-color: var(--border-color, #e5e7eb);
   margin: 0.25rem 0;
 }
 
-/* Animations */
-@keyframes dropdownFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Animation for centered positions */
-.dropdown-menu.top,
-.dropdown-menu.bottom {
-  animation: dropdownFadeInCentered 0.15s ease-out;
-}
-
-@keyframes dropdownFadeInCentered {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-/* Animation for top positions */
-.dropdown-menu.top-left,
-.dropdown-menu.top-right,
-.dropdown-menu.top {
-  animation: dropdownFadeInTop 0.15s ease-out;
-}
-
-@keyframes dropdownFadeInTop {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Animation for top centered */
-.dropdown-menu.top {
-  animation: dropdownFadeInTopCentered 0.15s ease-out;
-}
-
-@keyframes dropdownFadeInTopCentered {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-/* Animation for horizontal positions */
-.dropdown-menu.left {
-  animation: dropdownFadeInLeft 0.15s ease-out;
-}
-
-@keyframes dropdownFadeInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.dropdown-menu.right {
-  animation: dropdownFadeInRight 0.15s ease-out;
-}
-
-@keyframes dropdownFadeInRight {
+/* Simple fade-in animation only */
+@keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateX(-4px);
   }
   to {
     opacity: 1;
-    transform: translateX(0);
   }
 }
 
@@ -3992,6 +3913,8 @@ padding-right: 2.5rem;
   cursor: pointer;
 }
 
+
+
 /* Empty State */
 .table-empty {
   display: flex;
@@ -6899,6 +6822,7 @@ color: var(--primary) !important;
 .h-100-p , .h-full { height: 100% !important; }
 
 
+
 .height-10-p {
   height: 10%;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.10",
+  "version": "3.9.12",
   "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/calendar/Calendar.js

@@ -175,7 +175,7 @@ var Calendar = function (_a) {
                             var year = (0, dayjs_1.default)().year() - 10 + i;
                             return { value: year.toString(), text: year.toString() };
                         }), borderless: true, funcss: "round-edge" })),
-                react_1.default.createElement(Dropdown_1.default, { position: "bottom", openOnHover: false, button: react_1.default.createElement(Avatar_1.default, null,
+                react_1.default.createElement(Dropdown_1.default, { position: "bottom", button: react_1.default.createElement(Avatar_1.default, null,
                         react_1.default.createElement(hi_1.HiOutlineDotsVertical, null)), items: [
                         {
                             label: react_1.default.createElement("span", { className: "text-sm" }, "Today"),

package/ui/carousel/Carousel.d.ts

@@ -14,6 +14,7 @@ interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     infiniteScrollDirection?: 'left' | 'right' | 'alternate';
     overflowCss?: string;
     overflowPadding?: string;
+    justify?: string;
 }
 declare const Carousel: React.FC<CarouselProps>;
 export default Carousel;

package/ui/carousel/Carousel.js

@@ -89,15 +89,15 @@ var RowFlex = function (_a) {
         } }, children));
 };
 var Carousel = function (_a) {
-    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '' : _g, children = _a.children, _h = _a.controlerSize, controlerSize = _h === void 0 ? 2.5 : _h, _j = _a.controlerIconSize, controlerIconSize = _j === void 0 ? 20 : _j, _k = _a.infiniteScroll, infiniteScroll = _k === void 0 ? false : _k, _l = _a.infiniteScrollSpeed, infiniteScrollSpeed = _l === void 0 ? 50 : _l, _m = _a.infiniteScrollDirection, infiniteScrollDirection = _m === void 0 ? 'left' : _m, _o = _a.overflowPadding, overflowPadding = _o === void 0 ? '' : _o, _p = _a.overflowCss, overflowCss = _p === void 0 ? '' : _p, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children", "controlerSize", "controlerIconSize", "infiniteScroll", "infiniteScrollSpeed", "infiniteScrollDirection", "overflowPadding", "overflowCss"]);
+    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '' : _g, _h = _a.justify, justify = _h === void 0 ? '' : _h, children = _a.children, _j = _a.controlerSize, controlerSize = _j === void 0 ? 2.5 : _j, _k = _a.controlerIconSize, controlerIconSize = _k === void 0 ? 20 : _k, _l = _a.infiniteScroll, infiniteScroll = _l === void 0 ? false : _l, _m = _a.infiniteScrollSpeed, infiniteScrollSpeed = _m === void 0 ? 50 : _m, _o = _a.infiniteScrollDirection, infiniteScrollDirection = _o === void 0 ? 'left' : _o, _p = _a.overflowPadding, overflowPadding = _p === void 0 ? '' : _p, _q = _a.overflowCss, overflowCss = _q === void 0 ? '' : _q, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "justify", "children", "controlerSize", "controlerIconSize", "infiniteScroll", "infiniteScrollSpeed", "infiniteScrollDirection", "overflowPadding", "overflowCss"]);
     var scrollRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
-    var _q = (0, react_1.useState)('start'), scrollPosition = _q[0], setScrollPosition = _q[1];
-    var _r = (0, react_1.useState)(false), isPhone = _r[0], setIsPhone = _r[1];
-    var _s = (0, react_1.useState)(false), isScrollable = _s[0], setIsScrollable = _s[1];
-    var _t = (0, react_1.useState)(infiniteScrollDirection === 'right' ? 'right' : 'left'), autoScrollDirection = _t[0], setAutoScrollDirection = _t[1];
-    var _u = (0, react_1.useState)(false), isPaused = _u[0], setIsPaused = _u[1];
-    var _v = (0, react_1.useState)(false), isReady = _v[0], setIsReady = _v[1];
+    var _r = (0, react_1.useState)('start'), scrollPosition = _r[0], setScrollPosition = _r[1];
+    var _s = (0, react_1.useState)(false), isPhone = _s[0], setIsPhone = _s[1];
+    var _t = (0, react_1.useState)(false), isScrollable = _t[0], setIsScrollable = _t[1];
+    var _u = (0, react_1.useState)(infiniteScrollDirection === 'right' ? 'right' : 'left'), autoScrollDirection = _u[0], setAutoScrollDirection = _u[1];
+    var _v = (0, react_1.useState)(false), isPaused = _v[0], setIsPaused = _v[1];
+    var _w = (0, react_1.useState)(false), isReady = _w[0], setIsReady = _w[1];
     var animationFrameRef = (0, react_1.useRef)(null);
     var lastTimestampRef = (0, react_1.useRef)(0);
     var startDelayRef = (0, react_1.useRef)(false);
@@ -255,7 +255,7 @@ var Carousel = function (_a) {
             setIsPaused(false);
         }, 1000);
     };
-    return (react_1.default.createElement("div", __assign({ ref: containerRef, className: "carousel-wrapper", onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd }, rest),
+    return (react_1.default.createElement("div", __assign({ ref: containerRef, className: "carousel-wrapper", onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, style: { padding: (isScrollable && overflowPadding) ? overflowPadding : itemPadding } }, rest),
         react_1.default.createElement(react_1.default.Fragment, null,
             !isPhone && isScrollable && !infiniteScroll && (react_1.default.createElement("div", { className: 'carouselLeft' },
                 react_1.default.createElement(Circle, { bordered: true, size: controlerSize, onClick: function () { return scroll('left'); } },
@@ -266,10 +266,9 @@ var Carousel = function (_a) {
                     overflowX: 'auto',
                     overflowY: 'visible',
                     display: 'flex',
-                    justifyItems: (isScrollable || isPhone) ? 'flex-start' : 'center',
+                    justifyContent: justify ? justify : (isScrollable || isPhone) ? 'flex-start' : 'center',
                     scrollSnapType: infiniteScroll ? 'none' : 'x mandatory',
                     scrollBehavior: 'smooth',
-                    padding: (isScrollable && overflowPadding) ? overflowPadding : itemPadding,
                     cursor: infiniteScroll ? 'grab' : 'default'
                 }, onScroll: handleScroll }, infiniteScroll ? cloneChildren() : (react_1.default.Children.map(children, function (child, index) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 }, onMouseEnter: function () { return !infiniteScroll && setIsPaused(true); }, onMouseLeave: function () { return !infiniteScroll && setIsPaused(false); } },
                 react_1.default.createElement("div", { className: "carousel-card" }, child))); }))),

package/ui/drop/Dropdown.d.ts

@@ -12,8 +12,6 @@ interface DropdownProps {
     position?: Position;
     button: React.ReactNode;
     items: DropdownItem[];
-    hoverable?: boolean;
-    openOnHover?: boolean;
     closableOnlyOutside?: boolean;
     className?: string;
     menuClassName?: string;