funuicss 2.7.9 → 2.7.11

package/ui/calendar/Calendar.tsx

@@ -1,24 +1,31 @@
 'use client';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-import { PiCaretLeft, PiCaretRight, PiPlus, PiCircle, PiChecks } from 'react-icons/pi';
+import { PiCaretLeft, PiCaretRight, PiPlus, PiCircle, PiChecks, PiEmpty } from 'react-icons/pi';
 import Avatar from '../avatar/Avatar';
 import Circle from '../specials/Circle';
 import RowFlex from '../specials/RowFlex';
 import Input from '../input/Input';
 import Button from '../button/Button';
 import Text from '../text/Text';
+import ActivityCard from './ActivityCard';
+import View from '../view/View';
+import Dropdown from '../drop/Dropdown';
+import { HiOutlineDotsVertical } from "react-icons/hi";
 
 dayjs.extend(isSameOrAfter);
 dayjs.extend(isSameOrBefore);
 
-interface Activity {
+export type Activity  = {
   id: string;
   title: string;
   date: Date;
   color?: string;
+  funcss?: string;
+  data?: any;
+  footer?: React.ReactNode;
 }
 
 interface CalendarProps {
@@ -27,7 +34,7 @@ interface CalendarProps {
   onActivityClick?: (activity: Activity) => void;
   onDateClick?: (date: Date) => void;
   funcss?: string;
-  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6; // 0=Sunday, 1=Monday, etc.
+  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   renderActivity?: (activity: Activity) => React.ReactNode;
   showAdjacentMonths?: boolean;
   minDate?: Date;
@@ -49,62 +56,74 @@ const Calendar: React.FC<CalendarProps> = ({
   const [currentMonth, setCurrentMonth] = useState<Dayjs>(dayjs());
   const [hoveredDate, setHoveredDate] = useState<string | null>(null);
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+  const [showMoreActivities, setShowMoreActivities] = useState(false);
+
+  // ✅ NEW: View mode state
+  const [viewMode, setViewMode] = useState<'month' | 'week'>('month');
+
+  const startOfWeek = currentMonth.startOf('week').add(weekStart, 'day');
 
-  // Memoized calculations
   const { days, monthActivities } = useMemo(() => {
-    const startOfMonth = currentMonth.startOf('month');
-    const endOfMonth = currentMonth.endOf('month');
-    
-    // Calculate days grid
-    const firstDay = startOfMonth.day();
-    const daysBefore = (firstDay - weekStart + 7) % 7;
-    const daysInMonth = currentMonth.daysInMonth();
-    const totalDays = Math.ceil((daysBefore + daysInMonth) / 7) * 7;
-    
-    const days: (Dayjs | null)[] = [];
-    
-    // Previous month days
-    for (let i = daysBefore - 1; i >= 0; i--) {
-      const date = startOfMonth.subtract(i + 1, 'day');
-      days.push(showAdjacentMonths ? date : null);
-    }
-    
-    // Current month days
-    for (let i = 0; i < daysInMonth; i++) {
-      days.push(startOfMonth.add(i, 'day'));
-    }
-    
-    // Next month days
-    const remaining = totalDays - days.length;
-    for (let i = 0; i < remaining; i++) {
-      const date = endOfMonth.add(i + 1, 'day');
-      days.push(showAdjacentMonths ? date : null);
+    let days: (Dayjs | null)[] = [];
+
+    if (viewMode === 'month') {
+      const startOfMonth = currentMonth.startOf('month');
+      const endOfMonth = currentMonth.endOf('month');
+      const firstDay = startOfMonth.day();
+      const daysBefore = (firstDay - weekStart + 7) % 7;
+      const daysInMonth = currentMonth.daysInMonth();
+      const totalDays = Math.ceil((daysBefore + daysInMonth) / 7) * 7;
+
+      for (let i = daysBefore - 1; i >= 0; i--) {
+        const date = startOfMonth.subtract(i + 1, 'day');
+        days.push(showAdjacentMonths ? date : null);
+      }
+      for (let i = 0; i < daysInMonth; i++) {
+        days.push(startOfMonth.add(i, 'day'));
+      }
+      const remaining = totalDays - days.length;
+      for (let i = 0; i < remaining; i++) {
+        const date = endOfMonth.add(i + 1, 'day');
+        days.push(showAdjacentMonths ? date : null);
+      }
+    } else {
+      // ✅ Week View: only 7 days
+      for (let i = 0; i < 7; i++) {
+        days.push(startOfWeek.add(i, 'day'));
+      }
     }
-    
-    // Group activities by date
+
     const monthActivities: Record<string, Activity[]> = {};
     activities.forEach(activity => {
       const date = dayjs(activity.date);
-      if (date.isSame(currentMonth, 'month') || 
-          (showAdjacentMonths && (date.isBefore(endOfMonth) && date.isAfter(startOfMonth)))) {
-        const key = date.format('YYYY-MM-DD');
+      const 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, monthActivities };
-  }, [currentMonth, activities, weekStart, showAdjacentMonths]);
+  }, [currentMonth, activities, viewMode, weekStart, showAdjacentMonths]);
 
-  // Navigation handlers
-  const prevMonth = () => setCurrentMonth(currentMonth.subtract(1, 'month'));
-  const nextMonth = () => setCurrentMonth(currentMonth.add(1, 'month'));
+  const prevPeriod = () =>
+    setCurrentMonth(currentMonth.subtract(1, viewMode === 'month' ? 'month' : 'week'));
+  const nextPeriod = () =>
+    setCurrentMonth(currentMonth.add(1, viewMode === 'month' ? 'month' : 'week'));
   const goToToday = () => setCurrentMonth(dayjs());
-  
-  // Date handlers
+
   const handleDateClick = (date: Dayjs) => {
     if (isDateDisabled(date)) return;
-    
     setSelectedDate(date.toDate());
     onDateClick?.(date.toDate());
   };
@@ -115,19 +134,13 @@ const Calendar: React.FC<CalendarProps> = ({
     onAdd?.(date.toDate());
   };
 
-  // Utility functions
-  const isDateDisabled = (date: Dayjs) => {
-    return (
-      (minDate && date.isBefore(dayjs(minDate), 'day')) ||
-      (maxDate && date.isAfter(dayjs(maxDate), 'day'))
-    );
-  };
+  const isDateDisabled = (date: Dayjs) =>
+    (minDate && date.isBefore(dayjs(minDate), 'day')) ||
+    (maxDate && date.isAfter(dayjs(maxDate), 'day'));
 
   const isToday = (date: Dayjs) => date.isSame(dayjs(), 'day');
   const isSelected = (date: Dayjs) => selectedDate && date.isSame(selectedDate, 'day');
-  const isCurrentMonth = (date: Dayjs) => date.isSame(currentMonth, 'month');
 
-  // Weekday headers
   const weekdays = useMemo(() => {
     const days = [];
     for (let i = 0; i < 7; i++) {
@@ -137,157 +150,194 @@ const Calendar: React.FC<CalendarProps> = ({
     return days;
   }, [weekStart]);
 
+
+  const [isMobile, setIsMobile] = useState(false);
+
+useEffect(() => {
+  const updateViewMode = () => {
+    const small = window.innerWidth < 768;
+    setIsMobile(small);
+    setViewMode(small ? 'week' : 'month');
+  };
+
+  updateViewMode(); // initial check
+  window.addEventListener('resize', updateViewMode);
+  return () => window.removeEventListener('resize', updateViewMode);
+}, []);
+
+
+
   return (
     <div className={`calendar ${funcss}`}>
       <div className="calendar-header">
-        <Avatar funcss='border' onClick={prevMonth} aria-label="Previous month">
+        <Avatar funcss="border" onClick={prevPeriod}>
           <PiCaretLeft />
         </Avatar>
-        
+
         <div className="calendar-title">
+          <RowFlex gap={1} align="center">
+            <Input
+              type="text"
+              select
+              value={currentMonth.month().toString()}
+              onChange={(e) =>
+                setCurrentMonth(currentMonth.month(parseInt(e.target.value)))
+              }
+              options={Array.from({ length: 12 }, (_, i) => ({
+                value: i.toString(),
+                text: dayjs().month(i).format('MMMM'),
+              }))}
+              borderless
+              funcss="round-edge"
+            />
+
+            <Input
+              type="text"
+              select
+              value={currentMonth.year().toString()}
+              onChange={(e) =>
+                setCurrentMonth(currentMonth.year(parseInt(e.target.value)))
+              }
+              options={Array.from({ length: 21 }, (_, i) => {
+                const year = dayjs().year() - 10 + i;
+                return { value: year.toString(), text: year.toString() };
+              })}
+              borderless
+              funcss="round-edge"
+            />
+            
+            <Dropdown
+      direction="dropdown"
+      position='right'
+      openOnHover={false}
+      button={
+        <Avatar>
+          <HiOutlineDotsVertical />
+        </Avatar>
+      }
+      items={[
+        {
+          label: <span className="text-sm">Today</span>,
+          onClick: () => goToToday(),
+        },
+        {
+          label: <div className="text-sm" onClick={() =>
+            setViewMode(viewMode === 'month' ? 'week' : 'month')
+          }>
+                {viewMode === 'month' ? 'Switch to Week' : 'Switch to Month'}
+          </div>,
+        },
+      ]}
+    />
+           
+            
+          </RowFlex>
+        </div>
 
-  <Input 
-    value={currentMonth.month()}
-    onChange={(e) => {
-      const newMonth = currentMonth.month(parseInt(e.target.value));
-      setCurrentMonth(newMonth);
-    }}
-    type="text" 
-    label="Select Month" 
-    borderless
-    fullWidth
-    funcss='round-edge'
-    select
-    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" }
-    ]}
-  />
-<Input 
-  type="text" 
-  label="Select Year" 
-   funcss='round-edge'
-  fullWidth
-  borderless
-  select
-  value={currentMonth.year().toString()}
-  onChange={(e) => {
-    const newYear = currentMonth.year(parseInt(e.target.value));
-    setCurrentMonth(newYear);
-  }}
-  options={Array.from({ length: 21 }, (_, i) => {
-    const year = dayjs().year() - 10 + i;
-    return {
-      value: year.toString(),
-      text: year.toString(),
-    };
-  })}
-/>
-
-
-  <Button bg='lighter border' onClick={goToToday}>Today</Button>
-</div>
-
-        
-        <Avatar funcss='border' onClick={nextMonth} aria-label="Next month">
+        <Avatar funcss="border" onClick={nextPeriod}>
           <PiCaretRight />
         </Avatar>
       </div>
 
       <div className="calendar-weekdays">
         {weekdays.map((d, i) => (
-          <div key={i} className="weekday-header">{d}</div>
+          <div key={i} className="weekday-header">
+            {d}
+          </div>
         ))}
       </div>
 
       <div className="calendar-grid">
         {days.map((date, index) => {
-          if (!date) return <div key={index} className="calendar-cell empty" />;
-          
+          if (!date || (viewMode === 'month' && !date.isSame(currentMonth, 'month'))) {
+            return <div key={index} className="calendar-cell empty" />;
+          }
+
           const key = date.format('YYYY-MM-DD');
           const activitiesToday = monthActivities[key] || [];
           const disabled = isDateDisabled(date);
           const today = isToday(date);
           const selected = isSelected(date);
-          const currentMonth = isCurrentMonth(date);
-          
+
           return (
             <div
               key={key}
-              className={`calendar-cell ${
-                !currentMonth ? 'adjacent-month' : ''} ${
-                disabled ? 'disabled' : ''} ${
-                today ? 'today' : ''} ${
-                selected ? 'selected' : ''}`
-              }
+              className={`calendar-cell hoverable ${disabled ? 'disabled' : ''} ${today ? 'today' : ''} ${selected ? 'selected' : ''}`}
               onClick={() => handleDateClick(date)}
               onMouseEnter={() => setHoveredDate(key)}
               onMouseLeave={() => setHoveredDate(null)}
-              aria-disabled={disabled}
-              aria-label={date.format('MMMM D, YYYY')}
-              role="button"
-              tabIndex={0}
             >
-              <div className="day-number">
-               <RowFlex justify='space-between' align='center' gap={0.5}>
-              <Text 
-              text= {date.date()}
-              color={today ? 'primary' : ''} 
-              size='xl'
-              />
-               {today && <PiChecks className="text-success" />}
-               </RowFlex>
+              <div className={`day-number ${today ? 'today' : ''}`}>
+              {date.date()} 
               </div>
 
-              <div className="activities">
-                {activitiesToday.slice(0, 2).map(activity => (
-                  <div
-                    key={activity.id}
-                    className="activity-tag"
-                    style={{ backgroundColor: activity.color || '#e0e0e0' }}
-                    onClick={e => {
-                      e.stopPropagation();
-                      onActivityClick?.(activity);
-                    }}
-                  >
-                    {renderActivity ? renderActivity(activity) : activity.title}
-                  </div>
+             {
+              !isMobile && (
+                <div className="activities ">
+                {activitiesToday.slice(0, showMoreActivities ? activitiesToday.length : 3).map((activity) => (
+                  <ActivityCard activity={activity}  onClick={(e) => {
+                    onActivityClick?.(activity);
+                  }}/>
                 ))}
-                {activitiesToday.length > 2 && (
-                  <div className="activity-more">
-                    +{activitiesToday.length - 2} more
-                  </div>
+                {activitiesToday.length > 3 && (
+                  <Button smaller funcss='p-0' color="primary" onClick={() => setShowMoreActivities(!showMoreActivities)}>
+                    {showMoreActivities ? 'Show Less' : <>+{activitiesToday.length - 3} more</>}
+                  </Button>
                 )}
               </div>
+              )
+             }
 
               {hoveredDate === key && !disabled && (
-                <div 
-                  className="add-icon" 
-                  onClick={e => handleAdd(e, date)}
-                  aria-label={`Add event on ${date.format('MMMM D')}`}
-                >
-                 <Circle hoverable funcss='card bg'>
-                 <PiPlus />
-                 </Circle>
+                <div className="add-icon hide-small" onClick={(e) => handleAdd(e, date)}>
+                  <Circle bg='primary'>
+                    <PiPlus />
+                  </Circle>
                 </div>
               )}
             </div>
           );
         })}
       </div>
+
+      {isMobile && selectedDate && (
+  <div className="calendar-activities-mobile p-1">
+  <RowFlex gap={0.5} justify="space-between" align="center" className="mt-3 mb-2">
+  <Text
+      text={dayjs(selectedDate).format('dddd, MMMM D')}
+      weight={600}
+      funcss="mb-2"
+    />
+
+
+        <div  onClick={(e) => handleAdd(e, dayjs(selectedDate))}>
+        <Circle bg="primary">
+        <PiPlus />
+        </Circle>
+        </div>
+
+  </RowFlex>
+    {(monthActivities[dayjs(selectedDate).format('YYYY-MM-DD')] || []).map((activity) => (
+  <ActivityCard activity={activity} onClick={(e) => {
+    onActivityClick?.(activity);
+  }}/>
+    ))}
+    {(monthActivities[dayjs(selectedDate).format('YYYY-MM-DD')] || []).length === 0 && (
+     <View funcss='mt-2 text-center'>
+     <div> <PiEmpty size={30}/></div>
+       <Text text="No activities for this day." size="sm" opacity={2} />
+       <div className="mt-2">
+        <span onClick={(e) => handleAdd(e, dayjs(selectedDate))}>
+        <Button  small bg='lighter' startIcon={<PiPlus />}>Add Activity</Button>
+        </span>
+       </div>
+     </View>
+    )}
+  </div>
+)}
+
     </div>
   );
 };
 
-export default Calendar;
+export default Calendar;

package/ui/datepicker/DatePicker.js

@@ -115,15 +115,16 @@ var DatePicker = function (_a) {
                     "Selected: ",
                     formatDate(selected))),
                 mode === 'interval' && Array.isArray(selected) && (react_1.default.createElement("div", { className: 'text-sm' }, selected[1]
-                    ? "From ".concat(formatDate(selected[0]), " to ").concat(formatDate(selected[1]))
-                    : "Start: ".concat(formatDate(selected[0]), " - Select end date")))),
+                    ? "".concat(formatDate(selected[0]), " to ").concat(formatDate(selected[1]))
+                    : " ".concat(formatDate(selected[0]), " - End date")))),
             react_1.default.createElement("div", { style: { lineHeight: "0" } },
                 react_1.default.createElement(pi_1.PiX, { className: "clear-icon", onClick: handleClear, style: { cursor: 'pointer' } })))),
         react_1.default.createElement("div", { className: "datepicker-weekdays" }, ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(function (d) { return (react_1.default.createElement("div", { key: d }, d)); })),
         react_1.default.createElement("div", { className: "datepicker-grid" }, days.map(function (date, idx) {
             var isSelectedClass = date && isSelected(date) ? 'selected' : '';
             var isInRangeClass = date && isSelected(date) && Array.isArray(selected) ? 'in-range' : '';
-            return (react_1.default.createElement("div", { key: idx, onClick: function () { return date && handleSelect(date); }, className: "datepicker-day ".concat(!date ? 'empty' : '', " ").concat(isSelectedClass, " ").concat(isInRangeClass) }, date ? (0, dayjs_1.default)(date).date() : ''));
+            return (react_1.default.createElement("div", { key: idx, onClick: function () { return date && handleSelect(date); } }, date &&
+                react_1.default.createElement(Avatar_1.default, { funcss: "borderless datepicker-day ".concat(!date ? 'empty' : '', " ").concat(isSelectedClass, " ").concat(isInRangeClass) }, date ? (0, dayjs_1.default)(date).date() : '')));
         }))));
 };
 exports.default = DatePicker;

package/ui/datepicker/DatePicker.tsx

@@ -103,8 +103,8 @@ const DatePicker: React.FC<DatePickerProps> = ({
             {mode === 'interval' && Array.isArray(selected) && (
               <div className='text-sm'>
                 {selected[1]
-                  ? `From ${formatDate(selected[0])} to ${formatDate(selected[1])}`
-                  : `Start: ${formatDate(selected[0])} - Select end date`}
+                  ? `${formatDate(selected[0])} to ${formatDate(selected[1])}`
+                  : ` ${formatDate(selected[0])} - End date`}
               </div>
             )}
           </span>
@@ -129,9 +129,14 @@ const DatePicker: React.FC<DatePickerProps> = ({
             <div
               key={idx}
               onClick={() => date && handleSelect(date)}
-              className={`datepicker-day ${!date ? 'empty' : ''} ${isSelectedClass} ${isInRangeClass}`}
+          
             >
+             {
+              date && 
+              <Avatar funcss={`borderless datepicker-day ${!date ? 'empty' : ''} ${isSelectedClass} ${isInRangeClass}`}>
               {date ? dayjs(date).date() : ''}
+              </Avatar>
+             }
             </div>
           );
         })}

package/ui/drop/Dropdown.js

@@ -40,7 +40,7 @@ var Dropdown = function (_a) {
     var containerRef = (0, react_1.useRef)(null);
     var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
     var containerClass = "".concat(direction, " ").concat(position, " ").concat(className).trim();
-    var menuClass = "drop-menu".concat(hoverable ? ' item-hoverable' : '');
+    var menuClass = "drop-menu ".concat(hoverable ? ' item-hoverable' : '');
     (0, react_1.useEffect)(function () {
         if (openOnHover)
             return;
@@ -55,21 +55,21 @@ var Dropdown = function (_a) {
     var showMenu = openOnHover || open;
     return (react_1.default.createElement("div", { ref: containerRef, className: containerClass, onMouseEnter: function () { return openOnHover && setOpen(true); }, onMouseLeave: function () { return openOnHover && setOpen(false); } },
         react_1.default.createElement("div", { className: "drop-button", onClick: function () { return !openOnHover && setOpen(!open); }, style: { cursor: !openOnHover ? 'pointer' : undefined } }, button),
-        react_1.default.createElement("div", { className: menuClass, style: {
-                display: showMenu ? 'block' : 'none',
-                width: width,
-                minWidth: minWidth,
-                maxWidth: maxWidth,
-                height: height,
-                minHeight: minHeight,
-                maxHeight: maxHeight,
-            } }, items.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "drop-item hoverable", onClick: function () {
-                var _a;
-                if (!closableOnlyOutside) {
-                    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-                    if (!openOnHover)
-                        setOpen(false);
-                }
-            } }, item.label)); }))));
+        showMenu &&
+            react_1.default.createElement("div", { className: menuClass, style: {
+                    width: width,
+                    minWidth: minWidth,
+                    maxWidth: maxWidth,
+                    height: height,
+                    minHeight: minHeight,
+                    maxHeight: maxHeight,
+                } }, items.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "drop-item hoverable", onClick: function () {
+                    var _a;
+                    if (!closableOnlyOutside) {
+                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                        if (!openOnHover)
+                            setOpen(false);
+                    }
+                } }, item.label)); }))));
 };
 exports.default = Dropdown;

package/ui/drop/Dropdown.tsx

@@ -47,7 +47,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   const [open, setOpen] = useState(false);
 
   const containerClass = `${direction} ${position} ${className}`.trim();
-  const menuClass = `drop-menu${hoverable ? ' item-hoverable' : ''}`;
+  const menuClass = `drop-menu ${hoverable ? ' item-hoverable' : ''}`;
 
   useEffect(() => {
     if (openOnHover) return;
@@ -78,35 +78,37 @@ const Dropdown: React.FC<DropdownProps> = ({
       >
         {button}
       </div>
-
+      {
+        showMenu && 
+        
       <div
-        className={menuClass}
-        style={{
-          display: showMenu ? 'block' : 'none',
-          width,
-          minWidth,
-          maxWidth,
-          height,
-          minHeight,
-          maxHeight,
-        }}
-      >
-        {items.map((item, index) => (
-          <div
-            key={index}
-            className="drop-item hoverable"
-            onClick={() => {
-          if(!closableOnlyOutside){
-         item.onClick?.();
-              if (!openOnHover) setOpen(false);
-          }
-     
-            }}
-          >
-            {item.label}
-          </div>
-        ))}
-      </div>
+      className={menuClass}
+      style={{
+        width,
+        minWidth,
+        maxWidth,
+        height,
+        minHeight,
+        maxHeight,
+      }}
+    >
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className="drop-item hoverable"
+          onClick={() => {
+        if(!closableOnlyOutside){
+       item.onClick?.();
+            if (!openOnHover) setOpen(false);
+        }
+   
+          }}
+        >
+          {item.label}
+        </div>
+      ))}
+    </div>
+      }
     </div>
   );
 };