funuicss 2.7.9 → 2.7.11

package/ui/ScrollInView/ScrollInView.js

@@ -46,7 +46,7 @@ var animationVariants = {
     'slide-right': { hidden: { x: -20, opacity: 0 }, visible: { x: 0, opacity: 1 } },
 };
 var ScrollInView = function (_a) {
-    var children = _a.children, _b = _a.animationType, animationType = _b === void 0 ? 'fade-up' : _b, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.duration, duration = _d === void 0 ? 0.6 : _d, _e = _a.threshold, threshold = _e === void 0 ? 0.2 : _e, _f = _a.once, once = _f === void 0 ? false : _f, _g = _a.className, className = _g === void 0 ? '' : _g;
+    var children = _a.children, _b = _a.animationType, animationType = _b === void 0 ? 'fade-up' : _b, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.duration, duration = _d === void 0 ? 0.6 : _d, _e = _a.threshold, threshold = _e === void 0 ? 0.2 : _e, _f = _a.once, once = _f === void 0 ? true : _f, _g = _a.className, className = _g === void 0 ? '' : _g;
     var controls = (0, framer_motion_1.useAnimation)();
     var _h = (0, react_intersection_observer_1.useInView)({
         threshold: threshold,

package/ui/ScrollInView/ScrollInView.tsx

@@ -29,7 +29,7 @@ const ScrollInView: React.FC<ScrollInViewProps> = ({
   delay = 0,
   duration = 0.6,
   threshold = 0.2,
-  once = false,
+  once = true,
   className = '',
 }) => {
   const controls = useAnimation();

package/ui/accordion/Accordion.d.ts

@@ -1,5 +1,19 @@
 import React from 'react';
-interface AccordionProps {
+export type AccordionItemProps = {
+    title: string;
+    content: React.ReactNode;
+    isOpen?: boolean;
+    onToggle?: () => void;
+    index?: number;
+    icon?: React.ReactNode;
+    itemClass?: string;
+    titleClass?: string;
+    iconClass?: string;
+    contentClass?: string;
+    activeClass?: string;
+};
+export declare const AccordionItem: React.FC<AccordionItemProps>;
+export type AccordionProps = {
     items: {
         title: string;
         content: React.ReactNode;
@@ -12,6 +26,6 @@ interface AccordionProps {
     iconClass?: string;
     contentClass?: string;
     activeClass?: string;
-}
+};
 declare const Accordion: React.FC<AccordionProps>;
 export default Accordion;

package/ui/accordion/Accordion.js

@@ -46,26 +46,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItem = void 0;
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var AccordionItem = function (_a) {
     var icon = _a.icon, title = _a.title, content = _a.content, isOpen = _a.isOpen, onToggle = _a.onToggle, _b = _a.itemClass, itemClass = _b === void 0 ? '' : _b, _c = _a.titleClass, titleClass = _c === void 0 ? '' : _c, _d = _a.iconClass, iconClass = _d === void 0 ? '' : _d, _e = _a.contentClass, contentClass = _e === void 0 ? '' : _e, _f = _a.activeClass, activeClass = _f === void 0 ? '' : _f;
     return (react_1.default.createElement("div", { className: "accordion-item ".concat(itemClass, " ").concat(isOpen ? activeClass : '') },
-        react_1.default.createElement("div", { className: "accordion-header ".concat(titleClass), onClick: onToggle },
-            react_1.default.createElement(RowFlex_1.default, { alignItems: 'center', gap: 0.6 },
+        react_1.default.createElement("div", { className: "accordion-header ".concat(titleClass), onClick: onToggle, role: "button", "aria-expanded": isOpen },
+            react_1.default.createElement(RowFlex_1.default, { alignItems: "center", gap: 0.6 },
                 icon && react_1.default.createElement("div", { style: { lineHeight: 0 } }, icon),
-                react_1.default.createElement("div", { className: 'col fit' }, title)),
-            react_1.default.createElement("div", { style: { lineHeight: 0 }, className: "".concat(iconClass, " ").concat(isOpen ? "accordion-rotated" : "") },
+                react_1.default.createElement("div", { className: "col fit" }, title)),
+            react_1.default.createElement("div", { style: { lineHeight: 0 }, className: "".concat(iconClass, " ").concat(isOpen ? 'accordion-rotated' : '') },
                 react_1.default.createElement(pi_1.PiCaretDown, null))),
         react_1.default.createElement("div", { className: "accordion-content ".concat(contentClass, " ").concat(isOpen ? 'open' : '') },
             react_1.default.createElement("div", { className: "accordion-inner" }, content))));
 };
+exports.AccordionItem = AccordionItem;
 var Accordion = function (_a) {
     var _b;
-    var items = _a.items, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? false : _c, // ❗ default is only one open
-    _d = _a.defaultOpenIndexes, // ❗ default is only one open
-    defaultOpenIndexes = _d === void 0 ? [] : _d, itemClass = _a.itemClass, titleClass = _a.titleClass, iconClass = _a.iconClass, contentClass = _a.contentClass, activeClass = _a.activeClass;
+    var items = _a.items, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? false : _c, _d = _a.defaultOpenIndexes, defaultOpenIndexes = _d === void 0 ? [] : _d, itemClass = _a.itemClass, titleClass = _a.titleClass, iconClass = _a.iconClass, contentClass = _a.contentClass, activeClass = _a.activeClass;
     var _e = (0, react_1.useState)(allowMultiple ? defaultOpenIndexes : [(_b = defaultOpenIndexes[0]) !== null && _b !== void 0 ? _b : -1]), openIndexes = _e[0], setOpenIndexes = _e[1];
     var toggleIndex = function (index) {
         if (allowMultiple) {
@@ -80,6 +80,6 @@ var Accordion = function (_a) {
             setOpenIndexes(openIndexes.includes(index) ? [] : [index]);
         }
     };
-    return (react_1.default.createElement("div", { className: "accordion" }, items.map(function (item, index) { return (react_1.default.createElement(AccordionItem, { key: index, index: index, icon: item.icon, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
+    return (react_1.default.createElement("div", { className: "accordion" }, items.map(function (item, index) { return (react_1.default.createElement(exports.AccordionItem, { key: index, index: index, icon: item.icon, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
 };
 exports.default = Accordion;

package/ui/accordion/Accordion.tsx

@@ -1,24 +1,25 @@
 'use client';
 import React, { useState } from 'react';
-import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
+import { PiCaretDown } from 'react-icons/pi';
 import RowFlex from '../specials/RowFlex';
 
-interface AccordionItemProps {
+export type AccordionItemProps = {
   title: string;
   content: React.ReactNode;
   isOpen?: boolean;
   onToggle?: () => void;
   index?: number;
   icon?: React.ReactNode;
+
   // Customization
   itemClass?: string;
   titleClass?: string;
   iconClass?: string;
   contentClass?: string;
   activeClass?: string;
-}
+};
 
-const AccordionItem: React.FC<AccordionItemProps> = ({
+export const AccordionItem: React.FC<AccordionItemProps> = ({
   icon,
   title,
   content,
@@ -32,14 +33,20 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 }) => {
   return (
     <div className={`accordion-item ${itemClass} ${isOpen ? activeClass : ''}`}>
-      <div className={`accordion-header ${titleClass}`} onClick={onToggle}>
-       <RowFlex alignItems='center' gap={0.6}>
-        {
-          icon && <div style={{lineHeight:0}}>{icon}</div>
-        }
-       <div className='col fit'>{title}</div>
-       </RowFlex>
-        <div style={{lineHeight:0}} className={`${iconClass} ${isOpen ? "accordion-rotated" : ""}`}>
+      <div
+        className={`accordion-header ${titleClass}`}
+        onClick={onToggle}
+        role="button"
+        aria-expanded={isOpen}
+      >
+        <RowFlex alignItems="center" gap={0.6}>
+          {icon && <div style={{ lineHeight: 0 }}>{icon}</div>}
+          <div className="col fit">{title}</div>
+        </RowFlex>
+        <div
+          style={{ lineHeight: 0 }}
+          className={`${iconClass} ${isOpen ? 'accordion-rotated' : ''}`}
+        >
           <PiCaretDown />
         </div>
       </div>
@@ -50,14 +57,14 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   );
 };
 
-interface AccordionProps {
+export type AccordionProps = {
   items: {
     title: string;
     content: React.ReactNode;
     icon?: React.ReactNode;
   }[];
-  allowMultiple?: boolean; // ✅ NEW
-  defaultOpenIndexes?: number[]; // optional
+  allowMultiple?: boolean;
+  defaultOpenIndexes?: number[];
 
   // Custom styles
   itemClass?: string;
@@ -65,11 +72,11 @@ interface AccordionProps {
   iconClass?: string;
   contentClass?: string;
   activeClass?: string;
-}
+};
 
 const Accordion: React.FC<AccordionProps> = ({
   items,
-  allowMultiple = false, // ❗ default is only one open
+  allowMultiple = false,
   defaultOpenIndexes = [],
   itemClass,
   titleClass,

package/ui/avatar/Avatar.js

@@ -60,8 +60,9 @@ exports.default = Avatar;
 var React = __importStar(require("react"));
 function Avatar(_a) {
     var funcss = _a.funcss, children = _a.children, _b = _a.size, size = _b === void 0 ? 2 : _b, _c = _a.bordered, bordered = _c === void 0 ? true : _c, bg = _a.bg, content = _a.content, color = _a.color, onClick = _a.onClick, rest = __rest(_a, ["funcss", "children", "size", "bordered", "bg", "content", "color", "onClick"]);
-    return (React.createElement("div", __assign({ className: "\n        animated \n        pointer\n        fade-in \n        avatar \n        ".concat(funcss || '', " \n        ").concat(bg || 'lighter', " \n        ").concat(bordered ? 'border' : '', "\n        ").concat(color ? "text-".concat(color) : '', "\n      "), style: {
-            width: "".concat(size, "rem"),
-            height: "".concat(size, "rem"),
-        }, onClick: onClick }, rest), content || children));
+    return (React.createElement("div", null,
+        React.createElement("div", __assign({ className: "\n        animated \n        pointer\n        fade-in \n        avatar \n        ".concat(funcss || '', " \n        ").concat(bg || 'lighter', " \n        ").concat(bordered ? 'border' : '', "\n        ").concat(color ? "text-".concat(color) : '', "\n      "), style: {
+                width: "".concat(size, "rem"),
+                height: "".concat(size, "rem"),
+            }, onClick: onClick }, rest), content || children)));
 }

package/ui/avatar/Avatar.tsx

@@ -26,7 +26,8 @@ export default function Avatar({
   ...rest
 }: AvatarProps) {
   return (
-    <div
+   <div>
+     <div
       className={`
         animated 
         pointer
@@ -46,5 +47,6 @@ export default function Avatar({
     >
       {content || children}
     </div>
+   </div>
   );
 }

package/ui/button/Button.d.ts

@@ -33,7 +33,7 @@ interface ButtonProps {
     status?: 'success' | 'warning' | 'info' | 'danger';
     children?: React.ReactNode;
     style?: React.CSSProperties;
-    onClick?: () => void;
+    onClick?: (...args: unknown[]) => void;
 }
 export default function Button({ color, bg, funcss, startIcon, endIcon, text, rounded, raised, height, width, float, hoverUp, fullWidth, outlined, small, hoverless, smaller, big, bigger, jumbo, flat, hoverNone, fillAnimation, fillDirection, fillTextColor, outlineSize, isLoading, status, children, bold, style, onClick, ...rest }: ButtonProps): React.JSX.Element;
 export {};

package/ui/button/Button.js

@@ -75,7 +75,7 @@ function Button(_a) {
     }
     var classNames = [
         'button',
-        "text-".concat(bg ? color ? color : !hasNumber(bg) && !outlined ? "white" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) : 'base'),
+        "text-".concat(bg ? color ? color : !hasNumber(bg) && !outlined ? "white" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) : color),
         funcss || '',
         rounded ? 'roundBtn' : '',
         hoverless ? 'hoverless' : '',

package/ui/button/Button.tsx

@@ -37,7 +37,8 @@ interface ButtonProps {
   status?: 'success' | 'warning' | 'info' | 'danger' 
   children?:React.ReactNode, 
   style?:React.CSSProperties ,
-  onClick?: () => void
+  onClick?: (...args: unknown[]) => void;
+
 }
 
 export default function Button({
@@ -91,7 +92,7 @@ function hasNumber(text:any) {
 
   const classNames = [
     'button',
-    `text-${bg ? color ? color : !hasNumber(bg) && !outlined ? "white" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) : 'base'}`,
+    `text-${bg ? color ? color : !hasNumber(bg) && !outlined ? "white" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) : color}`,
     funcss || '',
     rounded ? 'roundBtn' : '',
     hoverless ? 'hoverless' : '',

package/ui/calendar/ActivityCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Activity } from './Calendar';
+type ActivityCardProps = {
+    activity: Activity;
+    onClick?: (activity: Activity) => void;
+};
+declare const ActivityCard: React.FC<ActivityCardProps>;
+export default ActivityCard;

package/ui/calendar/ActivityCard.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Text_1 = __importDefault(require("../text/Text"));
+var ActivityCard = function (_a) {
+    var activity = _a.activity, onClick = _a.onClick;
+    return (react_1.default.createElement("div", { className: "activity-tag animated slide-up ".concat(activity.funcss || ''), style: { backgroundColor: activity.color || '' }, onClick: function (e) {
+            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 }),
+        activity.footer && react_1.default.createElement("div", null, activity.footer)));
+};
+exports.default = ActivityCard;

package/ui/calendar/ActivityCard.tsx

@@ -0,0 +1,27 @@
+'use client';
+import React from 'react';
+import { Activity } from './Calendar';
+import Text from '../text/Text';
+
+type ActivityCardProps = {
+  activity: Activity;
+  onClick?: (activity: Activity) => void;
+};
+
+const ActivityCard: React.FC<ActivityCardProps> = ({ activity, onClick }) => {
+  return (
+    <div
+      className={`activity-tag animated slide-up ${activity.funcss || ''}`}
+      style={{ backgroundColor: activity.color || '' }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick?.(activity);
+      }}
+    >
+      <Text text={activity.title} size="xs" block truncate={2} />
+      {activity.footer && <div>{activity.footer}</div>}
+    </div>
+  );
+};
+
+export default ActivityCard;

package/ui/calendar/Calendar.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
-interface Activity {
+export type Activity = {
     id: string;
     title: string;
     date: Date;
     color?: string;
-}
+    funcss?: string;
+    data?: any;
+    footer?: React.ReactNode;
+};
 interface CalendarProps {
     activities: Activity[];
     onAdd?: (date: Date) => void;

package/ui/calendar/Calendar.js

@@ -48,6 +48,10 @@ 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");
 dayjs_1.default.extend(isSameOrAfter_1.default);
 dayjs_1.default.extend(isSameOrBefore_1.default);
 var Calendar = function (_a) {
@@ -55,50 +59,64 @@ var Calendar = function (_a) {
     var _e = (0, react_1.useState)((0, dayjs_1.default)()), currentMonth = _e[0], setCurrentMonth = _e[1];
     var _f = (0, react_1.useState)(null), hoveredDate = _f[0], setHoveredDate = _f[1];
     var _g = (0, react_1.useState)(null), selectedDate = _g[0], setSelectedDate = _g[1];
-    // Memoized calculations
-    var _h = (0, react_1.useMemo)(function () {
-        var startOfMonth = currentMonth.startOf('month');
-        var endOfMonth = currentMonth.endOf('month');
-        // Calculate days grid
-        var firstDay = startOfMonth.day();
-        var daysBefore = (firstDay - weekStart + 7) % 7;
-        var daysInMonth = currentMonth.daysInMonth();
-        var totalDays = Math.ceil((daysBefore + daysInMonth) / 7) * 7;
+    var _h = (0, react_1.useState)(false), showMoreActivities = _h[0], setShowMoreActivities = _h[1];
+    // ✅ NEW: View mode state
+    var _j = (0, react_1.useState)('month'), viewMode = _j[0], setViewMode = _j[1];
+    var startOfWeek = currentMonth.startOf('week').add(weekStart, 'day');
+    var _k = (0, react_1.useMemo)(function () {
         var days = [];
-        // Previous month days
-        for (var i = daysBefore - 1; i >= 0; i--) {
-            var date = startOfMonth.subtract(i + 1, 'day');
-            days.push(showAdjacentMonths ? date : null);
-        }
-        // Current month days
-        for (var i = 0; i < daysInMonth; i++) {
-            days.push(startOfMonth.add(i, 'day'));
+        if (viewMode === 'month') {
+            var startOfMonth = currentMonth.startOf('month');
+            var endOfMonth = currentMonth.endOf('month');
+            var firstDay = startOfMonth.day();
+            var daysBefore = (firstDay - weekStart + 7) % 7;
+            var daysInMonth = currentMonth.daysInMonth();
+            var totalDays = Math.ceil((daysBefore + daysInMonth) / 7) * 7;
+            for (var i = daysBefore - 1; i >= 0; i--) {
+                var date = startOfMonth.subtract(i + 1, 'day');
+                days.push(showAdjacentMonths ? date : null);
+            }
+            for (var i = 0; i < daysInMonth; i++) {
+                days.push(startOfMonth.add(i, 'day'));
+            }
+            var remaining = totalDays - days.length;
+            for (var i = 0; i < remaining; i++) {
+                var date = endOfMonth.add(i + 1, 'day');
+                days.push(showAdjacentMonths ? date : null);
+            }
         }
-        // Next month days
-        var remaining = totalDays - days.length;
-        for (var i = 0; i < remaining; i++) {
-            var date = endOfMonth.add(i + 1, 'day');
-            days.push(showAdjacentMonths ? date : null);
+        else {
+            // ✅ Week View: only 7 days
+            for (var i = 0; i < 7; i++) {
+                days.push(startOfWeek.add(i, 'day'));
+            }
         }
-        // Group activities by date
         var monthActivities = {};
         activities.forEach(function (activity) {
             var date = (0, dayjs_1.default)(activity.date);
-            if (date.isSame(currentMonth, 'month') ||
-                (showAdjacentMonths && (date.isBefore(endOfMonth) && date.isAfter(startOfMonth)))) {
-                var key = date.format('YYYY-MM-DD');
+            var key = date.format('YYYY-MM-DD');
+            if (viewMode === 'month' &&
+                (date.isSame(currentMonth, 'month') || (showAdjacentMonths &&
+                    (date.isBefore(currentMonth.endOf('month')) && date.isAfter(currentMonth.startOf('month')))))) {
+                if (!monthActivities[key])
+                    monthActivities[key] = [];
+                monthActivities[key].push(activity);
+            }
+            if (viewMode === 'week' && date.isSame(startOfWeek, 'week')) {
                 if (!monthActivities[key])
                     monthActivities[key] = [];
                 monthActivities[key].push(activity);
             }
         });
         return { days: days, monthActivities: monthActivities };
-    }, [currentMonth, activities, weekStart, showAdjacentMonths]), days = _h.days, monthActivities = _h.monthActivities;
-    // Navigation handlers
-    var prevMonth = function () { return setCurrentMonth(currentMonth.subtract(1, 'month')); };
-    var nextMonth = function () { return setCurrentMonth(currentMonth.add(1, 'month')); };
+    }, [currentMonth, activities, viewMode, weekStart, showAdjacentMonths]), days = _k.days, monthActivities = _k.monthActivities;
+    var prevPeriod = function () {
+        return setCurrentMonth(currentMonth.subtract(1, viewMode === 'month' ? 'month' : 'week'));
+    };
+    var nextPeriod = function () {
+        return setCurrentMonth(currentMonth.add(1, viewMode === 'month' ? 'month' : 'week'));
+    };
     var goToToday = function () { return setCurrentMonth((0, dayjs_1.default)()); };
-    // Date handlers
     var handleDateClick = function (date) {
         if (isDateDisabled(date))
             return;
@@ -111,15 +129,12 @@ var Calendar = function (_a) {
             return;
         onAdd === null || onAdd === void 0 ? void 0 : onAdd(date.toDate());
     };
-    // Utility functions
     var isDateDisabled = function (date) {
-        return ((minDate && date.isBefore((0, dayjs_1.default)(minDate), 'day')) ||
-            (maxDate && date.isAfter((0, dayjs_1.default)(maxDate), 'day')));
+        return (minDate && date.isBefore((0, dayjs_1.default)(minDate), 'day')) ||
+            (maxDate && date.isAfter((0, dayjs_1.default)(maxDate), 'day'));
     };
     var isToday = function (date) { return date.isSame((0, dayjs_1.default)(), 'day'); };
     var isSelected = function (date) { return selectedDate && date.isSame(selectedDate, 'day'); };
-    var isCurrentMonth = function (date) { return date.isSame(currentMonth, 'month'); };
-    // Weekday headers
     var weekdays = (0, react_1.useMemo)(function () {
         var days = [];
         for (var i = 0; i < 7; i++) {
@@ -128,69 +143,89 @@ var Calendar = function (_a) {
         }
         return days;
     }, [weekStart]);
+    var _l = (0, react_1.useState)(false), isMobile = _l[0], setIsMobile = _l[1];
+    (0, react_1.useEffect)(function () {
+        var updateViewMode = function () {
+            var small = window.innerWidth < 768;
+            setIsMobile(small);
+            setViewMode(small ? 'week' : 'month');
+        };
+        updateViewMode(); // initial check
+        window.addEventListener('resize', updateViewMode);
+        return function () { return window.removeEventListener('resize', updateViewMode); };
+    }, []);
     return (react_1.default.createElement("div", { className: "calendar ".concat(funcss) },
         react_1.default.createElement("div", { className: "calendar-header" },
-            react_1.default.createElement(Avatar_1.default, { funcss: 'border', onClick: prevMonth, "aria-label": "Previous month" },
+            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(Input_1.default, { value: currentMonth.month(), onChange: function (e) {
-                        var newMonth = currentMonth.month(parseInt(e.target.value));
-                        setCurrentMonth(newMonth);
-                    }, type: "text", label: "Select Month", borderless: true, fullWidth: true, funcss: 'round-edge', select: true, options: [
-                        { value: "", text: "-- Select month --" },
-                        { value: "0", text: "January" },
-                        { value: "1", text: "February" },
-                        { value: "2", text: "March" },
-                        { value: "3", text: "April" },
-                        { value: "4", text: "May" },
-                        { value: "5", text: "June" },
-                        { value: "6", text: "July" },
-                        { value: "7", text: "August" },
-                        { value: "8", text: "September" },
-                        { value: "9", text: "October" },
-                        { value: "10", text: "November" },
-                        { value: "11", text: "December" }
-                    ] }),
-                react_1.default.createElement(Input_1.default, { type: "text", label: "Select Year", funcss: 'round-edge', fullWidth: true, borderless: true, select: true, value: currentMonth.year().toString(), onChange: function (e) {
-                        var newYear = currentMonth.year(parseInt(e.target.value));
-                        setCurrentMonth(newYear);
-                    }, options: Array.from({ length: 21 }, function (_, i) {
-                        var year = (0, dayjs_1.default)().year() - 10 + i;
-                        return {
-                            value: year.toString(),
-                            text: year.toString(),
-                        };
-                    }) }),
-                react_1.default.createElement(Button_1.default, { bg: 'lighter border', onClick: goToToday }, "Today")),
-            react_1.default.createElement(Avatar_1.default, { funcss: 'border', onClick: nextMonth, "aria-label": "Next month" },
+                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)));
+                        }, 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)));
+                        }, options: Array.from({ length: 21 }, function (_, i) {
+                            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, { direction: "dropdown", position: 'right', openOnHover: false, 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"),
+                                onClick: function () { return goToToday(); },
+                            },
+                            {
+                                label: react_1.default.createElement("div", { className: "text-sm", onClick: function () {
+                                        return setViewMode(viewMode === 'month' ? 'week' : 'month');
+                                    } }, viewMode === 'month' ? 'Switch to Week' : 'Switch to Month'),
+                            },
+                        ] }))),
+            react_1.default.createElement(Avatar_1.default, { funcss: "border", onClick: nextPeriod },
                 react_1.default.createElement(pi_1.PiCaretRight, null))),
         react_1.default.createElement("div", { className: "calendar-weekdays" }, weekdays.map(function (d, i) { return (react_1.default.createElement("div", { key: i, className: "weekday-header" }, d)); })),
         react_1.default.createElement("div", { className: "calendar-grid" }, days.map(function (date, index) {
-            if (!date)
+            if (!date || (viewMode === 'month' && !date.isSame(currentMonth, 'month'))) {
                 return react_1.default.createElement("div", { key: index, className: "calendar-cell empty" });
+            }
             var key = date.format('YYYY-MM-DD');
             var activitiesToday = monthActivities[key] || [];
             var disabled = isDateDisabled(date);
             var today = isToday(date);
             var selected = isSelected(date);
-            var currentMonth = isCurrentMonth(date);
-            return (react_1.default.createElement("div", { key: key, className: "calendar-cell ".concat(!currentMonth ? 'adjacent-month' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(today ? 'today' : '', " ").concat(selected ? 'selected' : ''), onClick: function () { return handleDateClick(date); }, onMouseEnter: function () { return setHoveredDate(key); }, onMouseLeave: function () { return setHoveredDate(null); }, "aria-disabled": disabled, "aria-label": date.format('MMMM D, YYYY'), role: "button", tabIndex: 0 },
-                react_1.default.createElement("div", { className: "day-number" },
-                    react_1.default.createElement(RowFlex_1.default, { justify: 'space-between', align: 'center', gap: 0.5 },
-                        react_1.default.createElement(Text_1.default, { text: date.date(), color: today ? 'primary' : '', size: 'xl' }),
-                        today && react_1.default.createElement(pi_1.PiChecks, { className: "text-success" }))),
-                react_1.default.createElement("div", { className: "activities" },
-                    activitiesToday.slice(0, 2).map(function (activity) { return (react_1.default.createElement("div", { key: activity.id, className: "activity-tag", style: { backgroundColor: activity.color || '#e0e0e0' }, onClick: function (e) {
-                            e.stopPropagation();
+            return (react_1.default.createElement("div", { key: key, className: "calendar-cell hoverable ".concat(disabled ? 'disabled' : '', " ").concat(today ? 'today' : '', " ").concat(selected ? 'selected' : ''), onClick: function () { return handleDateClick(date); }, onMouseEnter: function () { return setHoveredDate(key); }, onMouseLeave: function () { return setHoveredDate(null); } },
+                react_1.default.createElement("div", { className: "day-number ".concat(today ? 'today' : '') }, date.date()),
+                !isMobile && (react_1.default.createElement("div", { className: "activities " },
+                    activitiesToday.slice(0, showMoreActivities ? activitiesToday.length : 3).map(function (activity) { return (react_1.default.createElement(ActivityCard_1.default, { activity: activity, onClick: function (e) {
                             onActivityClick === null || onActivityClick === void 0 ? void 0 : onActivityClick(activity);
-                        } }, renderActivity ? renderActivity(activity) : activity.title)); }),
-                    activitiesToday.length > 2 && (react_1.default.createElement("div", { className: "activity-more" },
+                        } })); }),
+                    activitiesToday.length > 3 && (react_1.default.createElement(Button_1.default, { smaller: true, funcss: 'p-0', color: "primary", onClick: function () { return setShowMoreActivities(!showMoreActivities); } }, showMoreActivities ? 'Show Less' : react_1.default.createElement(react_1.default.Fragment, null,
                         "+",
-                        activitiesToday.length - 2,
-                        " more"))),
-                hoveredDate === key && !disabled && (react_1.default.createElement("div", { className: "add-icon", onClick: function (e) { return handleAdd(e, date); }, "aria-label": "Add event on ".concat(date.format('MMMM D')) },
-                    react_1.default.createElement(Circle_1.default, { hoverable: true, funcss: 'card bg' },
+                        activitiesToday.length - 3,
+                        " more"))))),
+                hoveredDate === key && !disabled && (react_1.default.createElement("div", { className: "add-icon hide-small", onClick: function (e) { return handleAdd(e, date); } },
+                    react_1.default.createElement(Circle_1.default, { bg: 'primary' },
                         react_1.default.createElement(pi_1.PiPlus, null))))));
-        }))));
+        })),
+        isMobile && selectedDate && (react_1.default.createElement("div", { className: "calendar-activities-mobile p-1" },
+            react_1.default.createElement(RowFlex_1.default, { gap: 0.5, justify: "space-between", align: "center", className: "mt-3 mb-2" },
+                react_1.default.createElement(Text_1.default, { text: (0, dayjs_1.default)(selectedDate).format('dddd, MMMM D'), weight: 600, funcss: "mb-2" }),
+                react_1.default.createElement("div", { onClick: function (e) { return handleAdd(e, (0, dayjs_1.default)(selectedDate)); } },
+                    react_1.default.createElement(Circle_1.default, { bg: "primary" },
+                        react_1.default.createElement(pi_1.PiPlus, null)))),
+            (monthActivities[(0, dayjs_1.default)(selectedDate).format('YYYY-MM-DD')] || []).map(function (activity) { return (react_1.default.createElement(ActivityCard_1.default, { activity: activity, onClick: function (e) {
+                    onActivityClick === null || onActivityClick === void 0 ? void 0 : onActivityClick(activity);
+                } })); }),
+            (monthActivities[(0, dayjs_1.default)(selectedDate).format('YYYY-MM-DD')] || []).length === 0 && (react_1.default.createElement(View_1.default, { funcss: 'mt-2 text-center' },
+                react_1.default.createElement("div", null,
+                    " ",
+                    react_1.default.createElement(pi_1.PiEmpty, { size: 30 })),
+                react_1.default.createElement(Text_1.default, { text: "No activities for this day.", size: "sm", opacity: 2 }),
+                react_1.default.createElement("div", { className: "mt-2" },
+                    react_1.default.createElement("span", { onClick: function (e) { return handleAdd(e, (0, dayjs_1.default)(selectedDate)); } },
+                        react_1.default.createElement(Button_1.default, { small: true, bg: 'lighter', startIcon: react_1.default.createElement(pi_1.PiPlus, null) }, "Add Activity")))))))));
 };
 exports.default = Calendar;