funuicss 2.7.7 → 2.7.8

package/ui/ScrollInView/ScrollInView.js

@@ -38,12 +38,12 @@ var react_1 = __importStar(require("react"));
 var framer_motion_1 = require("framer-motion");
 var react_intersection_observer_1 = require("react-intersection-observer");
 var animationVariants = {
-    'fade-up': { hidden: { opacity: 0, y: 40 }, visible: { opacity: 1, y: 0 } },
-    'fade-down': { hidden: { opacity: 0, y: -40 }, visible: { opacity: 1, y: 0 } },
+    'fade-up': { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } },
+    'fade-down': { hidden: { opacity: 0, y: -20 }, visible: { opacity: 1, y: 0 } },
     'fade-in': { hidden: { opacity: 0 }, visible: { opacity: 1 } },
-    'zoom-in': { hidden: { scale: 0.9, opacity: 0 }, visible: { scale: 1, opacity: 1 } },
-    'slide-left': { hidden: { x: 40, opacity: 0 }, visible: { x: 0, opacity: 1 } },
-    'slide-right': { hidden: { x: -40, opacity: 0 }, visible: { x: 0, opacity: 1 } },
+    'zoom-in': { hidden: { scale: 0.95, opacity: 0 }, visible: { scale: 1, opacity: 1 } },
+    'slide-left': { hidden: { x: 20, opacity: 0 }, visible: { x: 0, opacity: 1 } },
+    '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;
@@ -64,7 +64,7 @@ var ScrollInView = function (_a) {
     return (react_1.default.createElement(framer_motion_1.motion.div, { ref: ref, variants: variants, initial: "hidden", animate: controls, transition: {
             delay: delay,
             duration: duration,
-            ease: [0.25, 1, 0.5, 1], // Natural cubic bezier
+            ease: 'linear', // SMOOTH and STRAIGHT
         }, className: className }, children));
 };
 exports.default = ScrollInView;

package/ui/ScrollInView/ScrollInView.tsx

@@ -5,12 +5,12 @@ import { motion, useAnimation } from 'framer-motion';
 import { useInView } from 'react-intersection-observer';
 
 const animationVariants = {
-  'fade-up': { hidden: { opacity: 0, y: 40 }, visible: { opacity: 1, y: 0 } },
-  'fade-down': { hidden: { opacity: 0, y: -40 }, visible: { opacity: 1, y: 0 } },
+  'fade-up': { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } },
+  'fade-down': { hidden: { opacity: 0, y: -20 }, visible: { opacity: 1, y: 0 } },
   'fade-in': { hidden: { opacity: 0 }, visible: { opacity: 1 } },
-  'zoom-in': { hidden: { scale: 0.9, opacity: 0 }, visible: { scale: 1, opacity: 1 } },
-  'slide-left': { hidden: { x: 40, opacity: 0 }, visible: { x: 0, opacity: 1 } },
-  'slide-right': { hidden: { x: -40, opacity: 0 }, visible: { x: 0, opacity: 1 } },
+  'zoom-in': { hidden: { scale: 0.95, opacity: 0 }, visible: { scale: 1, opacity: 1 } },
+  'slide-left': { hidden: { x: 20, opacity: 0 }, visible: { x: 0, opacity: 1 } },
+  'slide-right': { hidden: { x: -20, opacity: 0 }, visible: { x: 0, opacity: 1 } },
 };
 
 interface ScrollInViewProps {
@@ -57,7 +57,7 @@ const ScrollInView: React.FC<ScrollInViewProps> = ({
       transition={{
         delay,
         duration,
-        ease: [0.25, 1, 0.5, 1], // Natural cubic bezier
+        ease: 'linear', // SMOOTH and STRAIGHT
       }}
       className={className}
     >

package/ui/avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, MouseEventHandler } from 'react';
 import * as React from 'react';
 interface AvatarProps {
     funcss?: string;
@@ -8,6 +8,7 @@ interface AvatarProps {
     bordered?: boolean;
     color?: string;
     content?: ReactNode;
+    onClick?: MouseEventHandler<HTMLDivElement>;
 }
-export default function Avatar({ funcss, children, size, bordered, bg, content, color }: AvatarProps): React.JSX.Element;
+export default function Avatar({ funcss, children, size, bordered, bg, content, color, onClick, ...rest }: AvatarProps): React.JSX.Element;
 export {};

package/ui/avatar/Avatar.js

@@ -1,5 +1,16 @@
 "use strict";
 'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -33,14 +44,24 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 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;
-    return (React.createElement("div", { className: "\n        animated \n        fade-in \n        avatar \n        ".concat(funcss || '', " \n        ").concat(bg || 'lighter', " \n        ").concat(bordered ? 'border' : '', "\n      ").concat("text-".concat(color), "\n      "), style: {
+    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"),
-        } },
-        React.createElement(React.Fragment, null, content || children)));
+        }, onClick: onClick }, rest), content || children));
 }

package/ui/avatar/Avatar.tsx

@@ -1,14 +1,17 @@
-'use client'; 
-import  { ReactNode } from 'react';
-import * as React from 'react'
+'use client';
+
+import { ReactNode, MouseEventHandler } from 'react';
+import * as React from 'react';
+
 interface AvatarProps {
   funcss?: string;
   children?: ReactNode;
   size?: number;
   bg?: string;
-  bordered?:boolean ,
-  color?: string,
+  bordered?: boolean;
+  color?: string;
   content?: ReactNode;
+  onClick?: MouseEventHandler<HTMLDivElement>;
 }
 
 export default function Avatar({
@@ -18,25 +21,30 @@ export default function Avatar({
   bordered = true,
   bg,
   content,
-  color 
+  color,
+  onClick,
+  ...rest
 }: AvatarProps) {
   return (
     <div
       className={`
         animated 
+        pointer
         fade-in 
         avatar 
         ${funcss || ''} 
         ${bg || 'lighter'} 
         ${bordered ? 'border' : ''}
-      ${`text-${color}`}
+        ${color ? `text-${color}` : ''}
       `}
       style={{
         width: `${size}rem`,
         height: `${size}rem`,
       }}
+      onClick={onClick}
+      {...rest}
     >
-      <>{content || children}</>
+      {content || children}
     </div>
   );
 }

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;