@moontra/moonui-pro 2.17.1 → 2.17.3

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { startOfDay, endOfDay, addDays, startOfYear, endOfYear, startOfMonth, endOfMonth, startOfWeek, endOfWeek, isWithinInterval, isBefore, isAfter, subYears, addYears, subMonths, addMonths, subWeeks, addWeeks, subDays, addHours, differenceInMinutes, addMinutes, format, isSameDay, setHours, isToday, eachDayOfInterval, isSameMonth, eachMonthOfInterval, getDay, getDaysInMonth, formatDistanceToNow } from 'date-fns';
+import { startOfDay, endOfDay, addDays, startOfYear, endOfYear, startOfMonth, endOfMonth, startOfWeek, endOfWeek, isWithinInterval, isBefore, isAfter, subYears, addYears, subMonths, addMonths, subWeeks, addWeeks, subDays, addHours, differenceInMinutes, addMinutes, format, isSameDay, setHours, setMinutes, isToday, eachDayOfInterval, isSameMonth, eachMonthOfInterval, getDay, getDaysInMonth, formatDistanceToNow } from 'date-fns';
 import { motion, AnimatePresence, useMotionValue, useSpring, useTransform, animate, LayoutGroup, Reorder, useDragControls } from 'framer-motion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as ReactDOM from 'react-dom';
@@ -11487,7 +11487,7 @@ var CalendarPro = t.forwardRef(({
   categories = defaultCategories,
   views = defaultViews,
   defaultView,
-  height = "100%",
+  height = "100vh",
   className,
   sidebarCollapsed: controlledSidebarCollapsed,
   onSidebarToggle,
@@ -11756,40 +11756,64 @@ END:VCALENDAR`;
       ] }),
       /* @__PURE__ */ jsx("div", { className: "relative", children: hours.map((hour) => /* @__PURE__ */ jsxs("div", { className: "flex border-b", style: { height: "60px" }, children: [
         /* @__PURE__ */ jsx("div", { className: "w-16 p-2 text-xs text-muted-foreground text-right", children: format(setHours(/* @__PURE__ */ new Date(), hour), timeFormat === "12h" ? "h a" : "HH:00") }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 relative border-l", children: dayEvents.filter((event) => {
-          if (event.allDay)
-            return false;
-          const eventHour = new Date(event.start).getHours();
-          return eventHour === hour;
-        }).map((event) => {
-          const startMinutes = new Date(event.start).getMinutes();
-          const duration = differenceInMinutes(new Date(event.end), new Date(event.start));
-          const height2 = duration / 60 * 60;
-          const top = startMinutes / 60 * 60;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden",
-              style: {
-                top: `${top}px`,
-                height: `${height2}px`,
-                backgroundColor: event.color || eventColors[event.category || ""] || "#3b82f6",
-                color: "#ffffff",
-                zIndex: 10
-              },
-              onClick: (e) => handleEventClick(event, e),
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "font-medium", children: event.title }),
-                /* @__PURE__ */ jsxs("div", { className: "text-xs opacity-80", children: [
-                  format(new Date(event.start), "HH:mm"),
-                  " - ",
-                  format(new Date(event.end), "HH:mm")
-                ] })
-              ]
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex-1 relative border-l cursor-pointer hover:bg-muted/20",
+            onClick: () => {
+              if (allowEventCreation) {
+                const clickedTime = setHours(setMinutes(currentDate, 0), hour);
+                setNewEventStart(clickedTime);
+                setNewEventEnd(addHours(clickedTime, 1));
+                setEditingEvent({
+                  title: "",
+                  start: clickedTime,
+                  end: addHours(clickedTime, 1),
+                  allDay: false
+                });
+                setIsCreating(true);
+                setIsEventDialogOpen(true);
+              }
             },
-            event.id
-          );
-        }) })
+            children: dayEvents.filter((event) => {
+              if (event.allDay)
+                return false;
+              const eventHour = new Date(event.start).getHours();
+              return eventHour === hour;
+            }).map((event) => {
+              const startMinutes = new Date(event.start).getMinutes();
+              const duration = differenceInMinutes(new Date(event.end), new Date(event.start));
+              const height2 = duration / 60 * 60;
+              const top = startMinutes / 60 * 60;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden",
+                  style: {
+                    top: `${top}px`,
+                    height: `${height2}px`,
+                    backgroundColor: event.color || eventColors[event.category || ""] || "#3b82f6",
+                    color: "#ffffff",
+                    zIndex: 10
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleEventClick(event, e);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "font-medium", children: event.title }),
+                    /* @__PURE__ */ jsxs("div", { className: "text-xs opacity-80", children: [
+                      format(new Date(event.start), "HH:mm"),
+                      " - ",
+                      format(new Date(event.end), "HH:mm")
+                    ] })
+                  ]
+                },
+                event.id
+              );
+            })
+          }
+        )
       ] }, hour)) })
     ] }) }) });
   };
@@ -11828,9 +11852,24 @@ END:VCALENDAR`;
             "div",
             {
               className: cn(
-                "flex-1 relative border-l border-b",
+                "flex-1 relative border-l border-b cursor-pointer hover:bg-muted/20",
                 isToday(day) && "bg-primary/5"
               ),
+              onClick: () => {
+                if (allowEventCreation) {
+                  const clickedTime = setHours(setMinutes(day, 0), hour);
+                  setNewEventStart(clickedTime);
+                  setNewEventEnd(addHours(clickedTime, 1));
+                  setEditingEvent({
+                    title: "",
+                    start: clickedTime,
+                    end: addHours(clickedTime, 1),
+                    allDay: false
+                  });
+                  setIsCreating(true);
+                  setIsEventDialogOpen(true);
+                }
+              },
               children: dayEvents.filter((event) => {
                 const eventHour = new Date(event.start).getHours();
                 return eventHour === hour;
@@ -11850,7 +11889,10 @@ END:VCALENDAR`;
                       color: "#ffffff",
                       zIndex: 10
                     },
-                    onClick: (e) => handleEventClick(event, e),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleEventClick(event, e);
+                    },
                     children: event.title
                   },
                   event.id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.17.1",
+  "version": "2.17.3",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/calendar-pro/index.tsx

@@ -410,7 +410,7 @@ export const CalendarPro = React.forwardRef<HTMLDivElement, CalendarProProps>(({
   categories = defaultCategories,
   views = defaultViews,
   defaultView,
-  height = '100%',
+  height = '100vh',
   className,
   sidebarCollapsed: controlledSidebarCollapsed,
   onSidebarToggle,
@@ -749,7 +749,24 @@ END:VCALENDAR`
                   <div className="w-16 p-2 text-xs text-muted-foreground text-right">
                     {format(setHours(new Date(), hour), timeFormat === '12h' ? 'h a' : 'HH:00')}
                   </div>
-                  <div className="flex-1 relative border-l">
+                  <div 
+                    className="flex-1 relative border-l cursor-pointer hover:bg-muted/20"
+                    onClick={() => {
+                      if (allowEventCreation) {
+                        const clickedTime = setHours(setMinutes(currentDate, 0), hour)
+                        setNewEventStart(clickedTime)
+                        setNewEventEnd(addHours(clickedTime, 1))
+                        setEditingEvent({
+                          title: '',
+                          start: clickedTime,
+                          end: addHours(clickedTime, 1),
+                          allDay: false
+                        })
+                        setIsCreating(true)
+                        setIsEventDialogOpen(true)
+                      }
+                    }}
+                  >
                     {/* Events in this hour */}
                     {dayEvents
                       .filter(event => {
@@ -774,7 +791,10 @@ END:VCALENDAR`
                               color: '#ffffff',
                               zIndex: 10
                             }}
-                            onClick={(e) => handleEventClick(event, e)}
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              handleEventClick(event, e)
+                            }}
                           >
                             <div className="font-medium">{event.title}</div>
                             <div className="text-xs opacity-80">
@@ -845,9 +865,24 @@ END:VCALENDAR`
                       <div 
                         key={day.toISOString()} 
                         className={cn(
-                          "flex-1 relative border-l border-b",
+                          "flex-1 relative border-l border-b cursor-pointer hover:bg-muted/20",
                           isToday(day) && "bg-primary/5"
                         )}
+                        onClick={() => {
+                          if (allowEventCreation) {
+                            const clickedTime = setHours(setMinutes(day, 0), hour)
+                            setNewEventStart(clickedTime)
+                            setNewEventEnd(addHours(clickedTime, 1))
+                            setEditingEvent({
+                              title: '',
+                              start: clickedTime,
+                              end: addHours(clickedTime, 1),
+                              allDay: false
+                            })
+                            setIsCreating(true)
+                            setIsEventDialogOpen(true)
+                          }
+                        }}
                       >
                         {dayEvents
                           .filter(event => {
@@ -871,7 +906,10 @@ END:VCALENDAR`
                                   color: '#ffffff',
                                   zIndex: 10
                                 }}
-                                onClick={(e) => handleEventClick(event, e)}
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  handleEventClick(event, e)
+                                }}
                               >
                                 {event.title}
                               </div>