@moontra/moonui 2.4.0 → 2.4.1

package/dist/index.js

@@ -11,6 +11,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var framerMotion = require('framer-motion');
+var dateFns = require('date-fns');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 require('react-dom');
 var reactSlot = require('@radix-ui/react-slot');
@@ -18,7 +19,6 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var DialogPrimitive = require('@radix-ui/react-dialog');
-var dateFns = require('date-fns');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var SelectPrimitive = require('@radix-ui/react-select');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
@@ -1128,6 +1128,202 @@ var CardFooter = t__namespace.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardFooter.displayName = "CardFooter";
+function Calendar({
+  mode = "single",
+  selected,
+  onSelect,
+  disabled,
+  showOutsideDays = false,
+  className,
+  classNames,
+  numberOfMonths = 1,
+  defaultMonth,
+  ...props
+}) {
+  const [currentMonth, setCurrentMonth] = t__namespace.useState(
+    defaultMonth || selected && selected || /* @__PURE__ */ new Date()
+  );
+  const weekDays = [
+    { short: "S", full: "Sunday" },
+    { short: "M", full: "Monday" },
+    { short: "T", full: "Tuesday" },
+    { short: "W", full: "Wednesday" },
+    { short: "T", full: "Thursday" },
+    { short: "F", full: "Friday" },
+    { short: "S", full: "Saturday" }
+  ];
+  const handlePreviousMonth = () => {
+    setCurrentMonth(dateFns.subMonths(currentMonth, 1));
+  };
+  const handleNextMonth = () => {
+    setCurrentMonth(dateFns.addMonths(currentMonth, 1));
+  };
+  const handleDateClick = (date) => {
+    if (disabled?.(date))
+      return;
+    if (mode === "single") {
+      onSelect?.(date);
+    } else if (mode === "range") {
+      const currentSelection = selected;
+      if (!currentSelection?.from || currentSelection.from && currentSelection.to) {
+        onSelect?.({ from: date, to: void 0 });
+      } else {
+        if (date < currentSelection.from) {
+          onSelect?.({ from: date, to: currentSelection.from });
+        } else {
+          onSelect?.({ from: currentSelection.from, to: date });
+        }
+      }
+    }
+  };
+  const isDateSelected = (date) => {
+    if (!selected)
+      return false;
+    if (mode === "single") {
+      return dateFns.isSameDay(date, selected);
+    } else if (mode === "range") {
+      const range = selected;
+      if (range.from && range.to) {
+        return date >= range.from && date <= range.to;
+      }
+      return range.from ? dateFns.isSameDay(date, range.from) : false;
+    }
+    return false;
+  };
+  const isRangeStart = (date) => {
+    if (mode !== "range" || !selected)
+      return false;
+    const range = selected;
+    return range.from ? dateFns.isSameDay(date, range.from) : false;
+  };
+  const isRangeEnd = (date) => {
+    if (mode !== "range" || !selected)
+      return false;
+    const range = selected;
+    return range.to ? dateFns.isSameDay(date, range.to) : false;
+  };
+  const isRangeMiddle = (date) => {
+    if (mode !== "range" || !selected)
+      return false;
+    const range = selected;
+    if (!range.from || !range.to)
+      return false;
+    return date > range.from && date < range.to;
+  };
+  const getDaysInMonth = () => {
+    const start = dateFns.startOfMonth(currentMonth);
+    const end = dateFns.endOfMonth(currentMonth);
+    const days2 = dateFns.eachDayOfInterval({ start, end });
+    const firstDayOfWeek = dateFns.getDay(start);
+    const previousMonthDays = [];
+    if (firstDayOfWeek > 0 && showOutsideDays) {
+      const previousMonthStart = dateFns.startOfWeek(start);
+      const previousMonthEnd = new Date(start);
+      previousMonthEnd.setDate(previousMonthEnd.getDate() - 1);
+      previousMonthDays.push(...dateFns.eachDayOfInterval({
+        start: previousMonthStart,
+        end: previousMonthEnd
+      }));
+    }
+    const lastDayOfWeek = dateFns.getDay(end);
+    const nextMonthDays = [];
+    if (lastDayOfWeek < 6 && showOutsideDays) {
+      const nextMonthStart = new Date(end);
+      nextMonthStart.setDate(nextMonthStart.getDate() + 1);
+      const nextMonthEnd = dateFns.endOfWeek(end);
+      nextMonthDays.push(...dateFns.eachDayOfInterval({
+        start: nextMonthStart,
+        end: nextMonthEnd
+      }));
+    }
+    const emptyCells = [];
+    if (!showOutsideDays && firstDayOfWeek > 0) {
+      for (let i = 0; i < firstDayOfWeek; i++) {
+        emptyCells.push(null);
+      }
+    }
+    return [...previousMonthDays, ...emptyCells, ...days2, ...nextMonthDays];
+  };
+  const days = getDaysInMonth();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("moonui-theme", "p-0", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border/50 dark:border-gray-700/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handlePreviousMonth,
+          className: cn(
+            "h-10 w-10 bg-transparent p-0 rounded-lg",
+            "hover:bg-muted transition-colors",
+            "inline-flex items-center justify-center"
+          ),
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-medium", children: dateFns.format(currentMonth, "MMMM yyyy") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleNextMonth,
+          className: cn(
+            "h-10 w-10 bg-transparent p-0 rounded-lg",
+            "hover:bg-muted transition-colors",
+            "inline-flex items-center justify-center"
+          ),
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-5 w-5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 mb-2", children: weekDays.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "text-muted-foreground text-xs font-medium h-10 flex items-center justify-center",
+          title: day.full,
+          children: day.short
+        },
+        `weekday-${index}`
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => {
+        if (!date) {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10" }, `empty-${index}`);
+        }
+        const isOutsideMonth = !dateFns.isSameMonth(date, currentMonth);
+        const isDisabled = disabled?.(date) || false;
+        const isSelected = isDateSelected(date);
+        const isTodayDate = dateFns.isToday(date);
+        const rangeStart = isRangeStart(date);
+        const rangeEnd = isRangeEnd(date);
+        const rangeMiddle = isRangeMiddle(date);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleDateClick(date),
+            disabled: isDisabled,
+            className: cn(
+              "h-10 w-10 p-0 font-normal",
+              "inline-flex items-center justify-center rounded-lg",
+              "hover:bg-muted transition-colors text-sm",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              isOutsideMonth && "text-muted-foreground/50",
+              isDisabled && "text-muted-foreground/30 cursor-not-allowed hover:bg-transparent",
+              isSelected && !rangeMiddle && "bg-primary text-primary-foreground font-medium hover:bg-primary hover:text-primary-foreground",
+              isTodayDate && "font-semibold relative after:absolute after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:h-1 after:w-1 after:rounded-full after:bg-primary",
+              rangeMiddle && "bg-accent/30 text-accent-foreground rounded-none",
+              rangeStart && "rounded-r-none",
+              rangeEnd && "rounded-l-none"
+            ),
+            type: "button",
+            children: dateFns.format(date, "d")
+          },
+          date.toISOString()
+        );
+      }) })
+    ] })
+  ] });
+}
+Calendar.displayName = "Calendar";
 var getCardType = (number) => {
   const patterns = {
     visa: /^4/,
@@ -7438,202 +7634,6 @@ function createSortableHeader(label) {
     }
   );
 }
-function Calendar({
-  mode = "single",
-  selected,
-  onSelect,
-  disabled,
-  showOutsideDays = false,
-  className,
-  classNames,
-  numberOfMonths = 1,
-  defaultMonth,
-  ...props
-}) {
-  const [currentMonth, setCurrentMonth] = t__namespace.useState(
-    defaultMonth || selected && selected || /* @__PURE__ */ new Date()
-  );
-  const weekDays = [
-    { short: "S", full: "Sunday" },
-    { short: "M", full: "Monday" },
-    { short: "T", full: "Tuesday" },
-    { short: "W", full: "Wednesday" },
-    { short: "T", full: "Thursday" },
-    { short: "F", full: "Friday" },
-    { short: "S", full: "Saturday" }
-  ];
-  const handlePreviousMonth = () => {
-    setCurrentMonth(dateFns.subMonths(currentMonth, 1));
-  };
-  const handleNextMonth = () => {
-    setCurrentMonth(dateFns.addMonths(currentMonth, 1));
-  };
-  const handleDateClick = (date) => {
-    if (disabled?.(date))
-      return;
-    if (mode === "single") {
-      onSelect?.(date);
-    } else if (mode === "range") {
-      const currentSelection = selected;
-      if (!currentSelection?.from || currentSelection.from && currentSelection.to) {
-        onSelect?.({ from: date, to: void 0 });
-      } else {
-        if (date < currentSelection.from) {
-          onSelect?.({ from: date, to: currentSelection.from });
-        } else {
-          onSelect?.({ from: currentSelection.from, to: date });
-        }
-      }
-    }
-  };
-  const isDateSelected = (date) => {
-    if (!selected)
-      return false;
-    if (mode === "single") {
-      return dateFns.isSameDay(date, selected);
-    } else if (mode === "range") {
-      const range = selected;
-      if (range.from && range.to) {
-        return date >= range.from && date <= range.to;
-      }
-      return range.from ? dateFns.isSameDay(date, range.from) : false;
-    }
-    return false;
-  };
-  const isRangeStart = (date) => {
-    if (mode !== "range" || !selected)
-      return false;
-    const range = selected;
-    return range.from ? dateFns.isSameDay(date, range.from) : false;
-  };
-  const isRangeEnd = (date) => {
-    if (mode !== "range" || !selected)
-      return false;
-    const range = selected;
-    return range.to ? dateFns.isSameDay(date, range.to) : false;
-  };
-  const isRangeMiddle = (date) => {
-    if (mode !== "range" || !selected)
-      return false;
-    const range = selected;
-    if (!range.from || !range.to)
-      return false;
-    return date > range.from && date < range.to;
-  };
-  const getDaysInMonth = () => {
-    const start = dateFns.startOfMonth(currentMonth);
-    const end = dateFns.endOfMonth(currentMonth);
-    const days2 = dateFns.eachDayOfInterval({ start, end });
-    const firstDayOfWeek = dateFns.getDay(start);
-    const previousMonthDays = [];
-    if (firstDayOfWeek > 0 && showOutsideDays) {
-      const previousMonthStart = dateFns.startOfWeek(start);
-      const previousMonthEnd = new Date(start);
-      previousMonthEnd.setDate(previousMonthEnd.getDate() - 1);
-      previousMonthDays.push(...dateFns.eachDayOfInterval({
-        start: previousMonthStart,
-        end: previousMonthEnd
-      }));
-    }
-    const lastDayOfWeek = dateFns.getDay(end);
-    const nextMonthDays = [];
-    if (lastDayOfWeek < 6 && showOutsideDays) {
-      const nextMonthStart = new Date(end);
-      nextMonthStart.setDate(nextMonthStart.getDate() + 1);
-      const nextMonthEnd = dateFns.endOfWeek(end);
-      nextMonthDays.push(...dateFns.eachDayOfInterval({
-        start: nextMonthStart,
-        end: nextMonthEnd
-      }));
-    }
-    const emptyCells = [];
-    if (!showOutsideDays && firstDayOfWeek > 0) {
-      for (let i = 0; i < firstDayOfWeek; i++) {
-        emptyCells.push(null);
-      }
-    }
-    return [...previousMonthDays, ...emptyCells, ...days2, ...nextMonthDays];
-  };
-  const days = getDaysInMonth();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("moonui-theme", "p-0", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border/50 dark:border-gray-700/50", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: handlePreviousMonth,
-          className: cn(
-            "h-10 w-10 bg-transparent p-0 rounded-lg",
-            "hover:bg-muted transition-colors",
-            "inline-flex items-center justify-center"
-          ),
-          type: "button",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-5 w-5" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-medium", children: dateFns.format(currentMonth, "MMMM yyyy") }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: handleNextMonth,
-          className: cn(
-            "h-10 w-10 bg-transparent p-0 rounded-lg",
-            "hover:bg-muted transition-colors",
-            "inline-flex items-center justify-center"
-          ),
-          type: "button",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-5 w-5" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 mb-2", children: weekDays.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "text-muted-foreground text-xs font-medium h-10 flex items-center justify-center",
-          title: day.full,
-          children: day.short
-        },
-        `weekday-${index}`
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => {
-        if (!date) {
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10" }, `empty-${index}`);
-        }
-        const isOutsideMonth = !dateFns.isSameMonth(date, currentMonth);
-        const isDisabled = disabled?.(date) || false;
-        const isSelected = isDateSelected(date);
-        const isTodayDate = dateFns.isToday(date);
-        const rangeStart = isRangeStart(date);
-        const rangeEnd = isRangeEnd(date);
-        const rangeMiddle = isRangeMiddle(date);
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => handleDateClick(date),
-            disabled: isDisabled,
-            className: cn(
-              "h-10 w-10 p-0 font-normal",
-              "inline-flex items-center justify-center rounded-lg",
-              "hover:bg-muted transition-colors text-sm",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              isOutsideMonth && "text-muted-foreground/50",
-              isDisabled && "text-muted-foreground/30 cursor-not-allowed hover:bg-transparent",
-              isSelected && !rangeMiddle && "bg-primary text-primary-foreground font-medium hover:bg-primary hover:text-primary-foreground",
-              isTodayDate && "font-semibold relative after:absolute after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:h-1 after:w-1 after:rounded-full after:bg-primary",
-              rangeMiddle && "bg-accent/30 text-accent-foreground rounded-none",
-              rangeStart && "rounded-r-none",
-              rangeEnd && "rounded-l-none"
-            ),
-            type: "button",
-            children: dateFns.format(date, "d")
-          },
-          date.toISOString()
-        );
-      }) })
-    ] })
-  ] });
-}
-Calendar.displayName = "Calendar";
 var pageTransitions2 = {
   initial: { opacity: 0, x: 20 },
   animate: { opacity: 1, x: 0 },
@@ -9249,7 +9249,8 @@ function MoonLogo({
 }) {
   const logoId = t__namespace.useId();
   const gradientId = `moon-gradient-${logoId}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("moonui-theme", "flex items-center gap-2", className), children: [
+  const maskId = `moon-mask-${logoId}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
       {
@@ -9261,11 +9262,17 @@ function MoonLogo({
         className: "flex-shrink-0",
         ...props,
         children: [
-          variant === "gradient" && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#3B82F6" }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "#8B5CF6" }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#EC4899" })
-          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+            variant === "gradient" && /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#3B82F6" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "#8B5CF6" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#EC4899" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: maskId, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "32", height: "32", fill: "white" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "22", cy: "10", r: "10", fill: "black" })
+            ] })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "circle",
             {
@@ -9273,17 +9280,8 @@ function MoonLogo({
               cy: "16",
               r: "14",
               fill: variant === "gradient" ? `url(#${gradientId})` : "currentColor",
-              className: variant === "default" ? "fill-primary" : ""
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "circle",
-            {
-              cx: "22",
-              cy: "10",
-              r: "10",
-              fill: "white",
-              className: "dark:fill-background"
+              className: variant === "default" ? "fill-primary" : "",
+              mask: `url(#${maskId})`
             }
           )
         ]
@@ -12902,6 +12900,7 @@ exports.MoonUIBreadcrumbList = BreadcrumbList;
 exports.MoonUIBreadcrumbPage = BreadcrumbPage;
 exports.MoonUIBreadcrumbSeparator = BreadcrumbSeparator;
 exports.MoonUIButton = Button;
+exports.MoonUICalendar = Calendar;
 exports.MoonUICard = Card;
 exports.MoonUICardCVCInput = CardCVCInput;
 exports.MoonUICardContent = CardContent;