funuicss 3.5.2 → 3.5.4

package/css/fun.css

@@ -3519,8 +3519,14 @@ background-color: rgba(var(--borderRgb), 0.3);
 
 }
 
-
-.custom-select {position: relative; width: 100%; border-radius: var(--InputButtonBorderRadius); }
+.custom-select {
+  position: relative; 
+  width: 100%; 
+  border-radius: var(--InputButtonBorderRadius);
+  /* FIX: Create a new stacking context and ensure proper layering */
+  z-index: 999;
+  isolation: isolate;
+}
 
 .custom-select.fullWidth {max-width: none;}
 
@@ -3635,7 +3641,8 @@ visibility: hidden;
 transform: translateY(-10px);
 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: var(--card);
-z-index: 1000 !important;
+/* FIX: Increased z-index and ensure it's above the parent's stacking context */
+z-index: 1001 !important;
 }
 
 .select-dropdown.open {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.2",
+  "version": "3.5.4",
   "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/ActivityCard.js

@@ -12,7 +12,7 @@ var ActivityCard = function (_a) {
             e.stopPropagation();
             onClick === null || onClick === void 0 ? void 0 : onClick(activity);
         } },
-        react_1.default.createElement(Text_1.default, { text: activity.title, size: "xs", block: true, truncate: 2 }),
+        react_1.default.createElement(Text_1.default, { text: activity.title, size: "sm", block: true, truncate: 2 }),
         activity.footer && react_1.default.createElement("div", null, activity.footer)));
 };
 exports.default = ActivityCard;

package/ui/calendar/Calendar.js

@@ -45,13 +45,14 @@ var pi_1 = require("react-icons/pi");
 var Avatar_1 = __importDefault(require("../avatar/Avatar"));
 var Circle_1 = __importDefault(require("../specials/Circle"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
-var Input_1 = __importDefault(require("../input/Input"));
 var Button_1 = __importDefault(require("../button/Button"));
 var Text_1 = __importDefault(require("../text/Text"));
 var ActivityCard_1 = __importDefault(require("./ActivityCard"));
 var View_1 = __importDefault(require("../view/View"));
 var Dropdown_1 = __importDefault(require("../drop/Dropdown"));
 var hi_1 = require("react-icons/hi");
+var Flex_1 = __importDefault(require("../flex/Flex"));
+var Select_1 = __importDefault(require("../select/Select"));
 dayjs_1.default.extend(isSameOrAfter_1.default);
 dayjs_1.default.extend(isSameOrBefore_1.default);
 var Calendar = function (_a) {
@@ -159,15 +160,15 @@ var Calendar = function (_a) {
             react_1.default.createElement(Avatar_1.default, { funcss: "border", onClick: prevPeriod },
                 react_1.default.createElement(pi_1.PiCaretLeft, null)),
             react_1.default.createElement("div", { className: "calendar-title" },
-                react_1.default.createElement(RowFlex_1.default, { gap: 1, align: "center" },
-                    react_1.default.createElement(Input_1.default, { type: "text", select: true, value: currentMonth.month().toString(), onChange: function (e) {
-                            return setCurrentMonth(currentMonth.month(parseInt(e.target.value)));
+                react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1, alignItems: "center" },
+                    react_1.default.createElement(Select_1.default, { value: currentMonth.month().toString(), onChange: function (e) {
+                            return setCurrentMonth(currentMonth.month(parseInt(e)));
                         }, options: Array.from({ length: 12 }, function (_, i) { return ({
                             value: i.toString(),
                             text: (0, dayjs_1.default)().month(i).format('MMMM'),
                         }); }), borderless: true, funcss: "round-edge" }),
-                    react_1.default.createElement(Input_1.default, { type: "text", select: true, value: currentMonth.year().toString(), onChange: function (e) {
-                            return setCurrentMonth(currentMonth.year(parseInt(e.target.value)));
+                    react_1.default.createElement(Select_1.default, { value: currentMonth.year().toString(), onChange: function (e) {
+                            return setCurrentMonth(currentMonth.year(parseInt(e)));
                         }, options: Array.from({ length: 21 }, function (_, i) {
                             var year = (0, dayjs_1.default)().year() - 10 + i;
                             return { value: year.toString(), text: year.toString() };