funuicss 2.7.7 → 2.7.9

package/ui/calendar/Calendar.tsx

@@ -0,0 +1,293 @@
+'use client';
+import React, { 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 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';
+
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+
+interface Activity {
+  id: string;
+  title: string;
+  date: Date;
+  color?: string;
+}
+
+interface CalendarProps {
+  activities: Activity[];
+  onAdd?: (date: Date) => void;
+  onActivityClick?: (activity: Activity) => void;
+  onDateClick?: (date: Date) => void;
+  funcss?: string;
+  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6; // 0=Sunday, 1=Monday, etc.
+  renderActivity?: (activity: Activity) => React.ReactNode;
+  showAdjacentMonths?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+const Calendar: React.FC<CalendarProps> = ({
+  activities,
+  onAdd,
+  onActivityClick,
+  onDateClick,
+  funcss = '',
+  weekStart = 0,
+  renderActivity,
+  showAdjacentMonths = true,
+  minDate,
+  maxDate,
+}) => {
+  const [currentMonth, setCurrentMonth] = useState<Dayjs>(dayjs());
+  const [hoveredDate, setHoveredDate] = useState<string | null>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  // 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);
+    }
+    
+    // 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');
+        if (!monthActivities[key]) monthActivities[key] = [];
+        monthActivities[key].push(activity);
+      }
+    });
+    
+    return { days, monthActivities };
+  }, [currentMonth, activities, weekStart, showAdjacentMonths]);
+
+  // Navigation handlers
+  const prevMonth = () => setCurrentMonth(currentMonth.subtract(1, 'month'));
+  const nextMonth = () => setCurrentMonth(currentMonth.add(1, 'month'));
+  const goToToday = () => setCurrentMonth(dayjs());
+  
+  // Date handlers
+  const handleDateClick = (date: Dayjs) => {
+    if (isDateDisabled(date)) return;
+    
+    setSelectedDate(date.toDate());
+    onDateClick?.(date.toDate());
+  };
+
+  const handleAdd = (e: React.MouseEvent, date: Dayjs) => {
+    e.stopPropagation();
+    if (isDateDisabled(date)) return;
+    onAdd?.(date.toDate());
+  };
+
+  // Utility functions
+  const isDateDisabled = (date: Dayjs) => {
+    return (
+      (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++) {
+      const day = dayjs().day((weekStart + i) % 7);
+      days.push(day.format('dd'));
+    }
+    return days;
+  }, [weekStart]);
+
+  return (
+    <div className={`calendar ${funcss}`}>
+      <div className="calendar-header">
+        <Avatar funcss='border' onClick={prevMonth} aria-label="Previous month">
+          <PiCaretLeft />
+        </Avatar>
+        
+        <div className="calendar-title">
+
+  <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">
+          <PiCaretRight />
+        </Avatar>
+      </div>
+
+      <div className="calendar-weekdays">
+        {weekdays.map((d, i) => (
+          <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" />;
+          
+          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' : ''}`
+              }
+              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>
+
+              <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>
+                ))}
+                {activitiesToday.length > 2 && (
+                  <div className="activity-more">
+                    +{activitiesToday.length - 2} more
+                  </div>
+                )}
+              </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>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;

package/ui/datepicker/DatePicker.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface DatePickerProps {
+    mode?: 'single' | 'interval';
+    funcss?: string;
+    onSelect?: (value: Date | [Date, Date]) => void;
+    value?: Date | [Date, Date];
+    className?: string;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+export default DatePicker;

package/ui/datepicker/DatePicker.js

@@ -0,0 +1,129 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var Avatar_1 = __importDefault(require("../avatar/Avatar"));
+var pi_1 = require("react-icons/pi");
+var DatePicker = function (_a) {
+    var _b = _a.mode, mode = _b === void 0 ? 'single' : _b, onSelect = _a.onSelect, value = _a.value, funcss = _a.funcss, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var _d = (0, react_1.useState)((0, dayjs_1.default)()), currentMonth = _d[0], setCurrentMonth = _d[1];
+    var _e = (0, react_1.useState)(value || null), selected = _e[0], setSelected = _e[1];
+    var daysInMonth = currentMonth.daysInMonth();
+    var firstDay = currentMonth.startOf('month').day(); // 0 = Sunday
+    var days = [];
+    for (var i = 0; i < firstDay; i++) {
+        days.push(null); // padding
+    }
+    for (var i = 1; i <= daysInMonth; i++) {
+        days.push(currentMonth.date(i).toDate());
+    }
+    var handleSelect = function (date) {
+        if (mode === 'single') {
+            setSelected(date);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(date);
+        }
+        else if (mode === 'interval') {
+            if (!selected || !Array.isArray(selected)) {
+                setSelected([date, null]);
+            }
+            else {
+                var start = selected[0], end = selected[1];
+                if (!end) {
+                    var range = (0, dayjs_1.default)(date).isBefore((0, dayjs_1.default)(start)) ? [date, start] : [start, date];
+                    setSelected(range);
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(range);
+                }
+                else {
+                    setSelected([date, null]); // restart
+                }
+            }
+        }
+    };
+    var isSelected = function (date) {
+        if (!selected)
+            return false;
+        if (mode === 'single' && selected instanceof Date) {
+            return (0, dayjs_1.default)(selected).isSame(date, 'day');
+        }
+        if (Array.isArray(selected)) {
+            var start = selected[0], end = selected[1];
+            if (start && end) {
+                return ((0, dayjs_1.default)(date).isSame(start, 'day') ||
+                    (0, dayjs_1.default)(date).isSame(end, 'day') ||
+                    ((0, dayjs_1.default)(date).isAfter(start) && (0, dayjs_1.default)(date).isBefore(end)));
+            }
+            return (0, dayjs_1.default)(date).isSame(start, 'day');
+        }
+        return false;
+    };
+    var nextMonth = function () { return setCurrentMonth(currentMonth.add(1, 'month')); };
+    var prevMonth = function () { return setCurrentMonth(currentMonth.subtract(1, 'month')); };
+    var handleClear = function () {
+        setSelected(null);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(mode === 'single' ? null : null);
+    };
+    var formatDate = function (date) {
+        return date ? (0, dayjs_1.default)(date).format('MMM D, YYYY') : '...';
+    };
+    return (react_1.default.createElement("div", { className: "datepicker ".concat(funcss, " ").concat(className) },
+        react_1.default.createElement("div", { className: "datepicker-header" },
+            react_1.default.createElement(Avatar_1.default, { onClick: prevMonth },
+                react_1.default.createElement(pi_1.PiCaretLeft, null)),
+            react_1.default.createElement("span", null, currentMonth.format('MMMM YYYY')),
+            react_1.default.createElement(Avatar_1.default, { onClick: nextMonth },
+                react_1.default.createElement(pi_1.PiCaretRight, null))),
+        selected && (react_1.default.createElement("div", { className: "datepicker-selected" },
+            react_1.default.createElement("span", { className: "interval-display" },
+                mode === 'single' && selected instanceof Date && (react_1.default.createElement(react_1.default.Fragment, null,
+                    "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")))),
+            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() : ''));
+        }))));
+};
+exports.default = DatePicker;

package/ui/datepicker/DatePicker.tsx

@@ -0,0 +1,143 @@
+'use client';
+import React, { useState } from 'react';
+import dayjs from 'dayjs';
+import Avatar from '../avatar/Avatar';
+import { PiCaretLeft, PiCaretRight, PiX, PiXCircle } from 'react-icons/pi';
+
+interface DatePickerProps {
+  mode?: 'single' | 'interval';
+  funcss?: string;
+  onSelect?: (value: Date | [Date, Date]) => void;
+  value?: Date | [Date, Date];
+  className?: string;
+}
+
+type Selection = Date | [Date, Date | null] | null;
+
+const DatePicker: React.FC<DatePickerProps> = ({
+  mode = 'single',
+  onSelect,
+  value,
+  funcss,
+  className = '',
+}) => {
+  const [currentMonth, setCurrentMonth] = useState(dayjs());
+  const [selected, setSelected] = useState<Selection>(value || null);
+
+  const daysInMonth = currentMonth.daysInMonth();
+  const firstDay = currentMonth.startOf('month').day(); // 0 = Sunday
+
+  const days: (Date | null)[] = [];
+  for (let i = 0; i < firstDay; i++) {
+    days.push(null); // padding
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push(currentMonth.date(i).toDate());
+  }
+
+  const handleSelect = (date: Date) => {
+    if (mode === 'single') {
+      setSelected(date);
+      onSelect?.(date);
+    } else if (mode === 'interval') {
+      if (!selected || !Array.isArray(selected)) {
+        setSelected([date, null]);
+      } else {
+        const [start, end] = selected;
+        if (!end) {
+          const range: [Date, Date] =
+            dayjs(date).isBefore(dayjs(start)) ? [date, start] : [start, date];
+          setSelected(range);
+          onSelect?.(range);
+        } else {
+          setSelected([date, null]); // restart
+        }
+      }
+    }
+  };
+
+  const isSelected = (date: Date) => {
+    if (!selected) return false;
+    if (mode === 'single' && selected instanceof Date) {
+      return dayjs(selected).isSame(date, 'day');
+    }
+    if (Array.isArray(selected)) {
+      const [start, end] = selected;
+      if (start && end) {
+        return (
+          dayjs(date).isSame(start, 'day') ||
+          dayjs(date).isSame(end, 'day') ||
+          (dayjs(date).isAfter(start) && dayjs(date).isBefore(end))
+        );
+      }
+      return dayjs(date).isSame(start, 'day');
+    }
+    return false;
+  };
+
+  const nextMonth = () => setCurrentMonth(currentMonth.add(1, 'month'));
+  const prevMonth = () => setCurrentMonth(currentMonth.subtract(1, 'month'));
+
+  const handleClear = () => {
+    setSelected(null);
+    onSelect?.(mode === 'single' ? null as unknown as Date : null as unknown as [Date, Date]);
+  };
+
+  const formatDate = (date: Date | null | undefined) =>
+    date ? dayjs(date).format('MMM D, YYYY') : '...';
+
+  return (
+    <div className={`datepicker ${funcss} ${className}`}>
+      <div className="datepicker-header">
+        <Avatar onClick={prevMonth}><PiCaretLeft /></Avatar>
+        <span>{currentMonth.format('MMMM YYYY')}</span>
+        <Avatar onClick={nextMonth}><PiCaretRight /></Avatar>
+      </div>
+
+      {selected && (
+        <div className="datepicker-selected">
+          <span className="interval-display">
+            {mode === 'single' && selected instanceof Date && (
+              <>Selected: {formatDate(selected)}</>
+            )}
+            {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`}
+              </div>
+            )}
+          </span>
+          <div style={{lineHeight:"0"}}>
+          <PiX className="clear-icon" onClick={handleClear} style={{ cursor: 'pointer' }} />
+          </div>
+        </div>
+      )}
+
+      <div className="datepicker-weekdays">
+        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d) => (
+          <div key={d}>{d}</div>
+        ))}
+      </div>
+
+      <div className="datepicker-grid">
+        {days.map((date, idx) => {
+          const isSelectedClass = date && isSelected(date) ? 'selected' : '';
+          const isInRangeClass =
+            date && isSelected(date) && Array.isArray(selected) ? 'in-range' : '';
+          return (
+            <div
+              key={idx}
+              onClick={() => date && handleSelect(date)}
+              className={`datepicker-day ${!date ? 'empty' : ''} ${isSelectedClass} ${isInRangeClass}`}
+            >
+              {date ? dayjs(date).date() : ''}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default DatePicker;

package/ui/input/Input.d.ts

@@ -21,7 +21,7 @@ interface InputProps {
     type?: string;
     label?: string;
     name?: string;
-    value?: string;
+    value?: any;
     defaultValue?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
     options?: {

package/ui/input/Input.tsx

@@ -25,7 +25,7 @@ interface InputProps {
   type?: string;
   label?: string;
   name?: string;
-  value?: string;
+  value?: any;
   defaultValue?: string;
   onChange?: (
     event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>