@moontra/moonui 2.1.8 → 2.2.0

package/dist/index.mjs

@@ -3,13 +3,11 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useCallback, useEffect } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronUp, ChevronRight, Circle, Upload, Bold, Italic, Underline, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code, Link, Image, Palette, Undo, Redo, Edit, Eye, ChevronLeft, Copy, Download, RefreshCw, Columns, ArrowDown, ArrowUp, ArrowUpDown, ChevronsLeft, ChevronsRight, Calendar as Calendar$1, Clock, CheckCircle, Star, GitFork, ExternalLink, Video, Music, FileText, File } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronUp, ChevronRight, Circle, Upload, Bold, Italic, Underline, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code, Link, Image, Palette, Undo, Redo, Edit, Eye, Copy, Download, RefreshCw, Columns, ArrowDown, ArrowUp, ArrowUpDown, ChevronsLeft, ChevronLeft, ChevronsRight, Calendar as Calendar$1, Clock, CheckCircle, Star, GitFork, ExternalLink, Video, Music, FileText, File } from 'lucide-react';
 export { Palette, Pipette } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { format, isSameMonth, isToday, isValid, subMonths, addMonths, isSameDay, startOfMonth, endOfMonth, eachDayOfInterval, getDay, startOfWeek, endOfWeek } from 'date-fns';
-export { format } from 'date-fns';
 import { motion, AnimatePresence, useMotionValue, useTransform, animate } from 'framer-motion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import 'react-dom';
@@ -20,6 +18,8 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { isValid, format, isSameMonth, isToday, subMonths, addMonths, isSameDay, startOfMonth, endOfMonth, eachDayOfInterval, getDay, startOfWeek, endOfWeek } from 'date-fns';
+export { format } from 'date-fns';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -35,7 +35,7 @@ var AccordionItem = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   AccordionPrimitive.Item,
   {
     ref,
-    className: cn("border-b border-gray-200 dark:border-gray-800", className),
+    className: cn("moonui-theme", "border-b border-gray-200 dark:border-gray-800", className),
     ...props
   }
 ));
@@ -129,7 +129,7 @@ var Alert = t.forwardRef(
       {
         ref,
         role: "alert",
-        className: cn(alertVariants({ variant, size, radius, withClose: closable }), className),
+        className: cn("moonui-theme", alertVariants({ variant, size, radius, withClose: closable }), className),
         ...props,
         children: [
           !hideIcon && /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5" }),
@@ -153,7 +153,7 @@ var AlertTitle = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   "h5",
   {
     ref,
-    className: cn("font-semibold leading-tight tracking-tight mb-1", className),
+    className: cn("moonui-theme", "font-semibold leading-tight tracking-tight mb-1", className),
     ...props
   }
 ));
@@ -162,7 +162,7 @@ var AlertDescription = t.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "div",
   {
     ref,
-    className: cn("text-sm leading-5 text-muted-foreground", className),
+    className: cn("moonui-theme", "text-sm leading-5 text-muted-foreground", className),
     ...props
   }
 ));
@@ -194,7 +194,7 @@ var AspectRatio = t.forwardRef(({ className, variant, radius, ratio = 16 / 9, st
   "div",
   {
     ref,
-    className: cn(aspectRatioVariants({ variant, radius }), className),
+    className: cn("moonui-theme", aspectRatioVariants({ variant, radius }), className),
     style: {
       position: "relative",
       paddingBottom: `${1 / ratio * 100}%`,
@@ -227,9 +227,9 @@ var avatarVariants = cva(
       },
       variant: {
         default: "",
-        ring: "ring-2 ring-gray-300 dark:ring-gray-600",
-        ringOffset: "ring-2 ring-gray-300 dark:ring-gray-600 ring-offset-2 ring-offset-background dark:ring-offset-gray-950",
-        border: "border-2 border-gray-200 dark:border-gray-800"
+        ring: "ring-2 ring-border",
+        ringOffset: "ring-2 ring-border ring-offset-2 ring-offset-background",
+        border: "border-2 border-border"
       }
     },
     defaultVariants: {
@@ -243,7 +243,7 @@ var Avatar = t.forwardRef(({ className, size, radius, variant, ...props }, ref)
   AvatarPrimitive.Root,
   {
     ref,
-    className: cn(avatarVariants({ size, radius, variant }), className),
+    className: cn("moonui-theme", avatarVariants({ size, radius, variant }), className),
     ...props
   }
 ));
@@ -252,7 +252,7 @@ var AvatarImage = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   AvatarPrimitive.Image,
   {
     ref,
-    className: cn("aspect-square h-full w-full", className),
+    className: cn("moonui-theme", "aspect-square h-full w-full", className),
     ...props
   }
 ));
@@ -277,7 +277,7 @@ var AvatarGroup = t.forwardRef(
       "div",
       {
         ref,
-        className: cn("flex items-center", className),
+        className: cn("moonui-theme", "flex items-center", className),
         ...props,
         children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
           visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsx(
@@ -426,7 +426,7 @@ function Badge({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(badgeVariants({ variant, size, radius }), className),
+      className: cn("moonui-theme", badgeVariants({ variant, size, radius }), className),
       "data-removable": removable ? "" : void 0,
       ...props,
       children: [
@@ -477,9 +477,9 @@ var breadcrumbVariants = cva(
   {
     variants: {
       variant: {
-        default: "dark:text-gray-100 transition-colors",
-        muted: "text-muted-foreground dark:text-gray-400 transition-colors",
-        ghost: "text-foreground/60 dark:text-gray-300/60 transition-colors"
+        default: "text-foreground transition-colors",
+        muted: "text-muted-foreground transition-colors",
+        ghost: "text-foreground/60 transition-colors"
       },
       size: {
         default: "text-sm",
@@ -498,7 +498,7 @@ var Breadcrumb = t.forwardRef(
     "nav",
     {
       ref,
-      className: cn(breadcrumbVariants({ variant, size }), className),
+      className: cn("moonui-theme", breadcrumbVariants({ variant, size }), className),
       "aria-label": "breadcrumb",
       ...props
     }
@@ -551,7 +551,7 @@ var BreadcrumbItem = t.forwardRef(
       "li",
       {
         ref,
-        className: cn("inline-flex items-center gap-1.5", className),
+        className: cn("moonui-theme", "inline-flex items-center gap-1.5", className),
         "aria-current": isCurrent ? "page" : void 0,
         ...props,
         children: /* @__PURE__ */ jsx(
@@ -559,7 +559,7 @@ var BreadcrumbItem = t.forwardRef(
           {
             className: cn(
               "transition-colors duration-200 hover:text-foreground",
-              isCurrent ? "font-medium text-foreground dark:text-white dark:text-opacity-95" : "text-muted-foreground hover:text-foreground dark:text-gray-400 dark:hover:text-gray-200 dark:hover:text-opacity-95 hover:underline hover:underline-offset-4 hover:decoration-gray-300/30"
+              isCurrent ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground hover:underline hover:underline-offset-4 hover:decoration-muted-foreground/30"
             ),
             ...itemProps,
             children: props.children
@@ -579,7 +579,7 @@ var BreadcrumbSeparator = ({
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: cn("text-muted-foreground dark:text-gray-500 opacity-70", className),
+    className: cn("moonui-theme", "text-muted-foreground opacity-70", className),
     ...props,
     children: children || /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
   }
@@ -593,7 +593,7 @@ var BreadcrumbEllipsis = ({
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: cn("flex items-center text-muted-foreground dark:text-gray-500 dark:hover:text-gray-400 transition-colors duration-200", className),
+    className: cn("moonui-theme", "flex items-center text-muted-foreground hover:text-foreground/80 transition-colors duration-200", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
@@ -609,7 +609,7 @@ var BreadcrumbLink = t.forwardRef(
       ref,
       href,
       className: cn(
-        "transition-colors duration-200 hover:text-foreground text-muted-foreground hover:underline hover:underline-offset-4 hover:decoration-gray-300/30 dark:text-gray-400 dark:hover:text-gray-200",
+        "transition-colors duration-200 hover:text-foreground text-muted-foreground hover:underline hover:underline-offset-4 hover:decoration-muted-foreground/30",
         className
       ),
       ...props
@@ -636,75 +636,71 @@ var buttonVariants = cva(
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "font-medium relative",
     "transition-all duration-200 ease-out",
-    "premium-hover",
-    /* Standart premium hover efekti */
+    "transform active:scale-[0.98]",
     "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-    "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+    "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none disabled:transform-none"
   ],
   {
     variants: {
       variant: {
         primary: [
           "bg-primary text-primary-foreground",
-          "hover:bg-primary-hover dark:hover:bg-primary/90",
-          "active:bg-primary-active dark:active:bg-primary/80",
-          "shadow-sm dark:shadow-primary/20 dark:shadow-md",
-          "focus-visible:ring-primary/50 dark:focus-visible:ring-primary/30",
-          "dark:bg-primary dark:text-white",
+          "dark:bg-primary dark:text-primary-foreground",
+          "hover:bg-primary/90 dark:hover:bg-primary/90",
+          "active:bg-primary/80 dark:active:bg-primary/80",
+          "shadow-sm hover:shadow-md",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200"
         ],
         secondary: [
-          "bg-secondary text-secondary-foreground",
-          "hover:bg-gray-200 dark:hover:bg-gray-700/90",
-          "active:bg-gray-300 dark:active:bg-gray-600/90",
-          "border border-transparent dark:border-gray-700",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:bg-gray-800 dark:text-gray-100",
-          "dark:shadow-sm dark:shadow-gray-900/20"
+          "bg-muted text-muted-foreground",
+          "dark:bg-muted dark:text-muted-foreground",
+          "hover:bg-muted/80 dark:hover:bg-muted/80",
+          "active:bg-muted/70 dark:active:bg-muted/70",
+          "border border-input dark:border-input",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "shadow-sm hover:shadow-md"
         ],
         outline: [
           "bg-background text-foreground",
-          "border border-gray-300 dark:border-gray-700",
-          "hover:border-gray-400 dark:hover:border-gray-500",
-          "hover:bg-gray-50 dark:hover:bg-gray-800/80",
-          "active:bg-gray-100 dark:active:bg-gray-800/90",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200 dark:bg-gray-900/50",
-          "dark:shadow-sm dark:shadow-gray-950/10"
+          "dark:bg-background dark:text-foreground",
+          "border border-input dark:border-input",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground",
+          "active:bg-accent/80 dark:active:bg-accent/80",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200"
         ],
         ghost: [
           "text-foreground",
-          "hover:bg-gray-100 dark:hover:bg-gray-800/90",
-          "active:bg-gray-200 dark:active:bg-gray-700/90",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200",
-          "transition-colors duration-200"
+          "dark:text-foreground",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground",
+          "active:bg-accent/80 dark:active:bg-accent/80",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200"
         ],
         destructive: [
-          "bg-error text-white",
-          "hover:bg-error/90 dark:hover:bg-error/80",
-          "active:bg-error/80 dark:active:bg-error/70",
-          "shadow-sm dark:shadow-error/10 dark:shadow-md",
-          "focus-visible:ring-error/50 dark:focus-visible:ring-error/30",
-          "dark:text-white dark:border-error/20",
-          "transition-colors duration-200"
+          "bg-destructive text-destructive-foreground",
+          "dark:bg-destructive dark:text-destructive-foreground",
+          "hover:bg-destructive/90 dark:hover:bg-destructive/90",
+          "active:bg-destructive/80 dark:active:bg-destructive/80",
+          "shadow-sm hover:shadow-md",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200"
         ],
         success: [
-          "bg-success text-white",
-          "hover:bg-success/90 dark:hover:bg-success/80",
-          "active:bg-success/80 dark:active:bg-success/70",
-          "shadow-sm dark:shadow-success/10 dark:shadow-md",
-          "focus-visible:ring-success/50 dark:focus-visible:ring-success/30",
-          "dark:text-white dark:border-success/20",
-          "transition-colors duration-200"
+          "bg-success text-success-foreground",
+          "dark:bg-success dark:text-success-foreground",
+          "hover:bg-success/90 dark:hover:bg-success/90",
+          "active:bg-success/80 dark:active:bg-success/80",
+          "shadow-sm hover:shadow-md",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200"
         ],
         link: [
           "text-primary bg-transparent",
           "underline-offset-4 hover:underline",
-          "hover:text-primary-hover active:text-primary-active",
+          "hover:text-primary/80 active:text-primary/70",
           "p-0 h-auto",
-          "dark:text-blue-400 dark:hover:text-blue-300",
-          "dark:active:text-blue-500",
           "transition-colors duration-200"
         ],
         gradient: [
@@ -754,14 +750,14 @@ var buttonVariants = cva(
         ]
       },
       size: {
-        xs: "h-7 px-2.5 text-xs rounded",
-        sm: "h-8 px-3 text-sm rounded",
-        md: "h-10 px-4 text-base rounded-md",
+        xs: "h-7 px-2.5 text-xs rounded-md",
+        sm: "h-8 px-3 text-sm rounded-md",
+        md: "h-10 px-4 text-base rounded-lg",
         lg: "h-12 px-6 text-lg rounded-lg",
-        xl: "h-14 px-8 text-xl rounded-lg",
-        icon: "h-10 w-10 p-2 rounded-md",
-        "icon-sm": "h-8 w-8 p-1.5 rounded",
-        "icon-lg": "h-12 w-12 p-3 rounded-lg"
+        xl: "h-14 px-8 text-xl rounded-xl",
+        icon: "h-10 w-10 p-2 rounded-lg",
+        "icon-sm": "h-8 w-8 p-1.5 rounded-md",
+        "icon-lg": "h-12 w-12 p-3 rounded-xl"
       },
       rounded: {
         default: "",
@@ -799,7 +795,7 @@ var Button = t.forwardRef(
     return /* @__PURE__ */ jsxs(
       Comp,
       {
-        className: cn(buttonVariants({ variant, size, rounded, fullWidth, className })),
+        className: cn("moonui-theme", buttonVariants({ variant, size, rounded, fullWidth, className })),
         ref,
         disabled: disabled || loading,
         "data-loading": loading ? "" : void 0,
@@ -815,203 +811,7 @@ var Button = t.forwardRef(
   }
 );
 Button.displayName = "Button";
-function Calendar({
-  mode = "single",
-  selected,
-  onSelect,
-  disabled,
-  showOutsideDays = false,
-  className,
-  classNames,
-  numberOfMonths = 1,
-  defaultMonth,
-  ...props
-}) {
-  const [currentMonth, setCurrentMonth] = t.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(subMonths(currentMonth, 1));
-  };
-  const handleNextMonth = () => {
-    setCurrentMonth(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 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 ? isSameDay(date, range.from) : false;
-    }
-    return false;
-  };
-  const isRangeStart = (date) => {
-    if (mode !== "range" || !selected)
-      return false;
-    const range = selected;
-    return range.from ? isSameDay(date, range.from) : false;
-  };
-  const isRangeEnd = (date) => {
-    if (mode !== "range" || !selected)
-      return false;
-    const range = selected;
-    return range.to ? 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 = startOfMonth(currentMonth);
-    const end = endOfMonth(currentMonth);
-    const days2 = eachDayOfInterval({ start, end });
-    const firstDayOfWeek = getDay(start);
-    const previousMonthDays = [];
-    if (firstDayOfWeek > 0 && showOutsideDays) {
-      const previousMonthStart = startOfWeek(start);
-      const previousMonthEnd = new Date(start);
-      previousMonthEnd.setDate(previousMonthEnd.getDate() - 1);
-      previousMonthDays.push(...eachDayOfInterval({
-        start: previousMonthStart,
-        end: previousMonthEnd
-      }));
-    }
-    const lastDayOfWeek = getDay(end);
-    const nextMonthDays = [];
-    if (lastDayOfWeek < 6 && showOutsideDays) {
-      const nextMonthStart = new Date(end);
-      nextMonthStart.setDate(nextMonthStart.getDate() + 1);
-      const nextMonthEnd = endOfWeek(end);
-      nextMonthDays.push(...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__ */ jsxs("div", { className: cn("p-0", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ 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__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
-        }
-      ),
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-medium", children: format(currentMonth, "MMMM yyyy") }),
-      /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "h-5 w-5" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "px-6 pb-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-2", children: weekDays.map((day, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => {
-        if (!date) {
-          return /* @__PURE__ */ jsx("div", { className: "h-10 w-10" }, `empty-${index}`);
-        }
-        const isOutsideMonth = !isSameMonth(date, currentMonth);
-        const isDisabled = disabled?.(date) || false;
-        const isSelected = isDateSelected(date);
-        const isTodayDate = isToday(date);
-        const rangeStart = isRangeStart(date);
-        const rangeEnd = isRangeEnd(date);
-        const rangeMiddle = isRangeMiddle(date);
-        return /* @__PURE__ */ 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: format(date, "d")
-          },
-          date.toISOString()
-        );
-      }) })
-    ] })
-  ] });
-}
-Calendar.displayName = "Calendar";
-var microInteractionVariants = cva("", {
+cva("", {
   variants: {
     hover: {
       lift: [
@@ -1142,6 +942,32 @@ var tapAnimations = {
     transition: { duration: 0.1 }
   }
 };
+var pageTransitions = {
+  fadeIn: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.3 }
+  },
+  slideUp: {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -20 },
+    transition: springAnimations.smooth
+  },
+  slideRight: {
+    initial: { opacity: 0, x: -20 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 20 },
+    transition: springAnimations.smooth
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 1.05 },
+    transition: springAnimations.smooth
+  }
+};
 var skeletonAnimation = {
   initial: { opacity: 0.5 },
   animate: {
@@ -1201,7 +1027,7 @@ var Card = t.forwardRef(
         motion.div,
         {
           ref,
-          className: cn(cardVariants({ variant, size, radius, interactive, className })),
+          className: cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className })),
           ...interactionProps,
           ...props
         }
@@ -1211,7 +1037,7 @@ var Card = t.forwardRef(
       "div",
       {
         ref,
-        className: cn(cardVariants({ variant, size, radius, interactive, className })),
+        className: cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className })),
         ...props
       }
     );
@@ -1222,7 +1048,7 @@ var CardHeader = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   "div",
   {
     ref,
-    className: cn("flex flex-col space-y-1.5", className),
+    className: cn("moonui-theme", "flex flex-col space-y-1.5", className),
     ...props
   }
 ));
@@ -1231,7 +1057,7 @@ var CardTitle = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   "h3",
   {
     ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    className: cn("moonui-theme", "text-lg font-semibold leading-none tracking-tight", className),
     ...props
   }
 ));
@@ -1240,18 +1066,18 @@ var CardDescription = t.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "p",
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("moonui-theme", "text-sm text-muted-foreground", className),
     ...props
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("pt-0", className), ...props }));
+var CardContent = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("moonui-theme", "pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardFooter = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
-    className: cn("flex items-center pt-4", className),
+    className: cn("moonui-theme", "flex items-center pt-4", className),
     ...props
   }
 ));
@@ -1315,7 +1141,7 @@ var Checkbox = t.forwardRef(({
     {
       ref,
       checked: effectiveChecked,
-      className: cn(checkboxVariants({ variant, size, radius, animation }), className),
+      className: cn("moonui-theme", checkboxVariants({ variant, size, radius, animation }), className),
       ...props,
       children: /* @__PURE__ */ jsx(
         CheckboxPrimitive.Indicator,
@@ -1900,7 +1726,7 @@ var CollapsibleTrigger2 = t.forwardRef(({ className, children, variant, size, as
       Trigger2,
       {
         ref,
-        className: cn(collapsibleTriggerVariants({ variant, size }), className),
+        className: cn("moonui-theme", collapsibleTriggerVariants({ variant, size }), className),
         asChild,
         ...props,
         children
@@ -1911,7 +1737,7 @@ var CollapsibleTrigger2 = t.forwardRef(({ className, children, variant, size, as
     Trigger2,
     {
       ref,
-      className: cn(collapsibleTriggerVariants({ variant, size }), className),
+      className: cn("moonui-theme", collapsibleTriggerVariants({ variant, size }), className),
       ...props,
       children: [
         children,
@@ -1947,7 +1773,7 @@ var CollapsibleContent2 = t.forwardRef(({ className, children, variant, size, ..
   Content2,
   {
     ref,
-    className: cn(collapsibleContentVariants({ variant, size }), className),
+    className: cn("moonui-theme", collapsibleContentVariants({ variant, size }), className),
     ...props,
     children: /* @__PURE__ */ jsx("div", { className: "p-4", children })
   }
@@ -2047,7 +1873,7 @@ var Input = t.forwardRef(
     const showMessage = alwaysShowMessage || error || success;
     const messageType = error ? "error" : success ? "success" : "normal";
     return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 w-full", children: [
-      /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size }), wrapperClassName), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("moonui-theme", inputWrapperVariants({ size }), wrapperClassName), children: [
         leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 text-gray-500 flex items-center justify-center pointer-events-none", children: loading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : leftIcon }),
         /* @__PURE__ */ jsx(
           "input",
@@ -2208,7 +2034,7 @@ var PopoverClose = PopoverPrimitive.Close;
 var PopoverSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn("my-2 h-px bg-border", className),
+    className: cn("moonui-theme", "my-2 h-px bg-border", className),
     ...props
   }
 );
@@ -2216,7 +2042,7 @@ PopoverSeparator.displayName = "PopoverSeparator";
 var PopoverHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn("-mx-4 -mt-4 mb-3 px-4 pt-4 pb-3 border-b border-border", className),
+    className: cn("moonui-theme", "-mx-4 -mt-4 mb-3 px-4 pt-4 pb-3 border-b border-border", className),
     ...props
   }
 );
@@ -2224,7 +2050,7 @@ PopoverHeader.displayName = "PopoverHeader";
 var PopoverFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn("-mx-4 -mb-4 mt-3 px-4 pt-3 pb-4 border-t border-border", className),
+    className: cn("moonui-theme", "-mx-4 -mb-4 mt-3 px-4 pt-3 pb-4 border-t border-border", className),
     ...props
   }
 );
@@ -2233,6 +2059,7 @@ var Tabs = t.forwardRef(({ vertical = false, ...props }, ref) => /* @__PURE__ */
   TabsPrimitive.Root,
   {
     ref,
+    className: cn("moonui-theme", props.className),
     orientation: vertical ? "vertical" : "horizontal",
     ...props
   }
@@ -2268,7 +2095,7 @@ var TabsList = t.forwardRef(({ className, variant, orientation, fullWidth, ...pr
   TabsPrimitive.List,
   {
     ref,
-    className: cn(tabsListVariants({ variant, orientation, fullWidth, className })),
+    className: cn("moonui-theme", tabsListVariants({ variant, orientation, fullWidth, className })),
     ...props
   }
 ));
@@ -2322,6 +2149,7 @@ var TabsTrigger = t.forwardRef(({
   {
     ref,
     className: cn(
+      "moonui-theme",
       tabsTriggerVariants({ variant, size, orientation, fullWidth }),
       fadeTabs && "data-[state=inactive]:opacity-60",
       className
@@ -2341,6 +2169,7 @@ var TabsContent = t.forwardRef(({ className, animated = false, ...props }, ref)
   {
     ref,
     className: cn(
+      "moonui-theme",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       animated && "data-[state=active]:animate-fadeIn data-[state=inactive]:animate-fadeOut",
       className
@@ -2531,7 +2360,7 @@ var Slider = t.forwardRef(({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn(sliderVariants({ size }), className),
+        className: cn("moonui-theme", sliderVariants({ size }), className),
         "data-disabled": disabled ? true : void 0,
         children: [
           /* @__PURE__ */ jsx(
@@ -3111,7 +2940,7 @@ function SimpleColorPicker({
     default: "h-8 w-8",
     lg: "h-10 w-10"
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", className), children: colors.map((color) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cn("moonui-theme", "flex flex-wrap gap-2", className), children: colors.map((color) => /* @__PURE__ */ jsx(
     "button",
     {
       className: cn(
@@ -3136,7 +2965,7 @@ function GradientPicker({
     setGradient(newGradient);
     onChange?.(newGradient);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-theme", "space-y-4", className), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -3656,7 +3485,7 @@ var DialogOverlay = t.forwardRef(({ className, variant, animation, ...props }, r
   DialogPrimitive.Overlay,
   {
     ref,
-    className: cn(overlayVariants({ variant, animation }), className),
+    className: cn("moonui-theme", overlayVariants({ variant, animation }), className),
     ...props
   }
 ));
@@ -3852,7 +3681,7 @@ var DialogForm = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   "form",
   {
     ref,
-    className: cn("flex flex-col gap-4", className),
+    className: cn("moonui-theme", "flex flex-col gap-4", className),
     ...props
   }
 ));
@@ -3882,7 +3711,7 @@ var Command = t.forwardRef(({ className, variant, size, ...props }, ref) => /* @
   _e,
   {
     ref,
-    className: cn(commandVariants({ variant, size }), className),
+    className: cn("moonui-theme", commandVariants({ variant, size }), className),
     ...props
   }
 ));
@@ -3919,7 +3748,7 @@ var CommandList = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   _e.List,
   {
     ref,
-    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    className: cn("moonui-theme", "max-h-[300px] overflow-y-auto overflow-x-hidden", className),
     ...props
   }
 ));
@@ -3928,7 +3757,7 @@ var CommandEmpty = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   _e.Empty,
   {
     ref,
-    className: cn("py-6 text-center text-sm text-muted-foreground", className),
+    className: cn("moonui-theme", "py-6 text-center text-sm text-muted-foreground", className),
     ...props
   }
 ));
@@ -3949,7 +3778,7 @@ var CommandSeparator = t.forwardRef(({ className, ...props }, ref) => /* @__PURE
   _e.Separator,
   {
     ref,
-    className: cn("-mx-1 h-px bg-border", className),
+    className: cn("moonui-theme", "-mx-1 h-px bg-border", className),
     ...props
   }
 ));
@@ -7082,7 +6911,7 @@ var Table = t.forwardRef(({
   ] });
 });
 Table.displayName = "Table";
-var TableHeader = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("moonui-theme", "[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
 var TableBody = t.forwardRef(({ className, emptyContent, emptyMessage = "No data available", children, ...props }, ref) => {
   const hasChildren = t.Children.count(children) > 0;
@@ -7090,7 +6919,7 @@ var TableBody = t.forwardRef(({ className, emptyContent, emptyMessage = "No data
     "tbody",
     {
       ref,
-      className: cn("[&_tr:last-child]:border-0", className),
+      className: cn("moonui-theme", "[&_tr:last-child]:border-0", className),
       ...props,
       children: hasChildren ? children : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 100, className: "h-24 text-center", children: emptyContent || /* @__PURE__ */ jsx("div", { className: "py-6 text-muted-foreground", children: /* @__PURE__ */ jsx("div", { className: "text-sm", children: emptyMessage }) }) }) })
     }
@@ -7101,7 +6930,7 @@ var TableFooter = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   "tfoot",
   {
     ref,
-    className: cn("bg-primary text-primary-foreground font-medium", className),
+    className: cn("moonui-theme", "bg-primary text-primary-foreground font-medium", className),
     ...props
   }
 ));
@@ -7203,7 +7032,7 @@ var TableCell = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   "td",
   {
     ref,
-    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    className: cn("moonui-theme", "p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
     ...props
   }
 ));
@@ -7212,7 +7041,7 @@ var TableCaption = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   "caption",
   {
     ref,
-    className: cn("mt-4 text-sm text-muted-foreground", className),
+    className: cn("moonui-theme", "mt-4 text-sm text-muted-foreground", className),
     ...props
   }
 ));
@@ -7330,7 +7159,7 @@ var SelectLabel = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    className: cn("moonui-theme", "py-1.5 pl-8 pr-2 text-sm font-semibold", className),
     ...props
   }
 ));
@@ -7366,7 +7195,7 @@ var SelectSeparator = t.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted dark:bg-gray-700", className),
+    className: cn("moonui-theme", "-mx-1 my-1 h-px bg-muted dark:bg-gray-700", className),
     ...props
   }
 ));
@@ -7482,7 +7311,7 @@ var DropdownMenuSeparator = t.forwardRef(({ className, ...props }, ref) => /* @_
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("moonui-theme", "-mx-1 my-1 h-px bg-muted", className),
     ...props
   }
 ));
@@ -7494,7 +7323,7 @@ var DropdownMenuShortcut = ({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      className: cn("moonui-theme", "ml-auto text-xs tracking-widest opacity-60", className),
       ...props
     }
   );
@@ -7550,6 +7379,15 @@ var Skeleton = t.forwardRef(
     style,
     ...props
   }, ref) => {
+    const {
+      onDrag,
+      onDragEnd,
+      onDragStart,
+      onAnimationStart,
+      onAnimationEnd,
+      onAnimationIteration,
+      ...filteredProps
+    } = props;
     if (isLoaded && children) {
       if (useMotion) {
         return /* @__PURE__ */ jsx(
@@ -7559,13 +7397,13 @@ var Skeleton = t.forwardRef(
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             transition: { duration: fadeInDuration / 1e3 },
-            className,
+            className: cn("moonui-theme", className),
             style: {
               height,
               width,
               ...style
             },
-            ...props,
+            ...filteredProps,
             children
           }
         );
@@ -7574,7 +7412,7 @@ var Skeleton = t.forwardRef(
         "div",
         {
           ref,
-          className: cn("animate-fade-in", className),
+          className: cn("moonui-theme", "animate-fade-in", className),
           style: {
             animationDuration: `${fadeInDuration}ms`,
             height,
@@ -7592,6 +7430,7 @@ var Skeleton = t.forwardRef(
       {
         ref,
         className: cn(
+          "moonui-theme",
           skeletonVariants({ variant, size, shape, animation }),
           "relative isolate",
           className
@@ -7602,7 +7441,7 @@ var Skeleton = t.forwardRef(
           ...style
         },
         ...useMotion ? skeletonAnimation : {},
-        ...props
+        ...filteredProps
       }
     );
   }
@@ -7624,7 +7463,7 @@ var SkeletonText = t.forwardRef(
       "div",
       {
         ref,
-        className: cn("flex flex-col", className),
+        className: cn("moonui-theme", "flex flex-col", className),
         style: { gap: spacing },
         ...props,
         children: Array.from({ length: lines }).map((_, i) => {
@@ -7664,7 +7503,7 @@ var SkeletonAvatar = t.forwardRef(
         variant,
         animation,
         shape: "circle",
-        className: cn("shrink-0", className),
+        className: cn("moonui-theme", "shrink-0", className),
         style: {
           height: size,
           width: size
@@ -7856,7 +7695,7 @@ function DataTable({
     return /* @__PURE__ */ jsx(DataTableLoading, {});
   }
   const selectedRows = table.getFilteredSelectedRowModel().rows;
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-theme", "space-y-4", className), children: [
     (title || description) && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
       title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
       description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
@@ -8104,6 +7943,202 @@ function createFilterableColumn(accessorKey, header, filterFn) {
     filterFn
   };
 }
+function Calendar({
+  mode = "single",
+  selected,
+  onSelect,
+  disabled,
+  showOutsideDays = false,
+  className,
+  classNames,
+  numberOfMonths = 1,
+  defaultMonth,
+  ...props
+}) {
+  const [currentMonth, setCurrentMonth] = t.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(subMonths(currentMonth, 1));
+  };
+  const handleNextMonth = () => {
+    setCurrentMonth(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 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 ? isSameDay(date, range.from) : false;
+    }
+    return false;
+  };
+  const isRangeStart = (date) => {
+    if (mode !== "range" || !selected)
+      return false;
+    const range = selected;
+    return range.from ? isSameDay(date, range.from) : false;
+  };
+  const isRangeEnd = (date) => {
+    if (mode !== "range" || !selected)
+      return false;
+    const range = selected;
+    return range.to ? 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 = startOfMonth(currentMonth);
+    const end = endOfMonth(currentMonth);
+    const days2 = eachDayOfInterval({ start, end });
+    const firstDayOfWeek = getDay(start);
+    const previousMonthDays = [];
+    if (firstDayOfWeek > 0 && showOutsideDays) {
+      const previousMonthStart = startOfWeek(start);
+      const previousMonthEnd = new Date(start);
+      previousMonthEnd.setDate(previousMonthEnd.getDate() - 1);
+      previousMonthDays.push(...eachDayOfInterval({
+        start: previousMonthStart,
+        end: previousMonthEnd
+      }));
+    }
+    const lastDayOfWeek = getDay(end);
+    const nextMonthDays = [];
+    if (lastDayOfWeek < 6 && showOutsideDays) {
+      const nextMonthStart = new Date(end);
+      nextMonthStart.setDate(nextMonthStart.getDate() + 1);
+      const nextMonthEnd = endOfWeek(end);
+      nextMonthDays.push(...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__ */ jsxs("div", { className: cn("moonui-theme", "p-0", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ 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__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-medium", children: format(currentMonth, "MMMM yyyy") }),
+      /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "px-6 pb-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-2", children: weekDays.map((day, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => {
+        if (!date) {
+          return /* @__PURE__ */ jsx("div", { className: "h-10 w-10" }, `empty-${index}`);
+        }
+        const isOutsideMonth = !isSameMonth(date, currentMonth);
+        const isDisabled = disabled?.(date) || false;
+        const isSelected = isDateSelected(date);
+        const isTodayDate = isToday(date);
+        const rangeStart = isRangeStart(date);
+        const rangeEnd = isRangeEnd(date);
+        const rangeMiddle = isRangeMiddle(date);
+        return /* @__PURE__ */ 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: format(date, "d")
+          },
+          date.toISOString()
+        );
+      }) })
+    ] })
+  ] });
+}
+Calendar.displayName = "Calendar";
 var datePickerVariants = cva(
   "w-full justify-start text-left font-normal",
   {
@@ -8111,8 +8146,7 @@ var datePickerVariants = cva(
       variant: {
         default: "",
         outline: "border-2",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        minimal: "h-auto p-0 border-0 shadow-none"
+        ghost: "hover:bg-accent hover:text-accent-foreground"
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -8190,11 +8224,11 @@ function DatePicker({
   };
   const displayValue = internalDate && isValid(internalDate) ? format(internalDate, formatString) : null;
   const iconElement = icon || /* @__PURE__ */ jsx(Calendar$1, { className: "h-4 w-4" });
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsx("div", { className: "moonui-theme", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
-        variant: variant === "minimal" ? "ghost" : variant || "outline",
+        variant: variant === "ghost" ? "ghost" : "outline",
         className: cn(
           datePickerVariants({ variant, size, state }),
           !displayValue && "text-muted-foreground",
@@ -8273,7 +8307,7 @@ function DatePicker({
         children: /* @__PURE__ */ jsxs(
           motion.div,
           {
-            ...microInteractionVariants.fadeIn,
+            ...pageTransitions.fadeIn,
             className: "rounded-2xl bg-background overflow-hidden",
             children: [
               /* @__PURE__ */ jsx(
@@ -8303,7 +8337,7 @@ function DatePicker({
         )
       }
     )
-  ] });
+  ] }) });
 }
 function DateRangePicker({
   className,
@@ -8341,7 +8375,7 @@ function DateRangePicker({
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
-        variant: props.variant === "minimal" ? "ghost" : props.variant || "outline",
+        variant: props.variant === "ghost" ? "ghost" : "outline",
         className: cn(
           datePickerVariants({
             variant: props.variant,
@@ -8499,7 +8533,7 @@ function MonthPicker({
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
-        variant: props.variant || "outline",
+        variant: props.variant === "default" ? "outline" : props.variant || "outline",
         className: cn(
           datePickerVariants({
             variant: props.variant,
@@ -8541,7 +8575,7 @@ function MonthPicker({
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: months.map((month, index) => /* @__PURE__ */ jsx(
         Button,
         {
-          variant: value && value.getMonth() === index ? "default" : "outline",
+          variant: value && value.getMonth() === index ? "primary" : "outline",
           size: "sm",
           onClick: () => handleMonthSelect(index),
           className: "h-8 text-xs",
@@ -8587,7 +8621,7 @@ function DraggableList({
   const handleDragEnd = () => {
     setDraggedIndex(null);
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: items.map((item, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cn("moonui-theme", "space-y-2", className), children: items.map((item, index) => /* @__PURE__ */ jsx(
     "div",
     {
       draggable: !disabled,
@@ -8706,7 +8740,7 @@ var Progress = t.forwardRef(({
       "div",
       {
         ref,
-        className: cn(progressVariants({ variant, size, radius, animation }), className),
+        className: cn("moonui-theme", progressVariants({ variant, size, radius, animation }), className),
         role: "progressbar",
         "aria-valuemin": 0,
         "aria-valuemax": max2,
@@ -8787,7 +8821,7 @@ var FileItem = ({
               /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 mr-1 animate-spin" }),
               "Uploading"
             ] }),
-            status === "success" && /* @__PURE__ */ jsxs(Badge, { variant: "default", className: "h-5 bg-green-500", children: [
+            status === "success" && /* @__PURE__ */ jsxs(Badge, { variant: "success", className: "h-5", children: [
               /* @__PURE__ */ jsx(CheckCircle, { className: "h-3 w-3 mr-1" }),
               "Done"
             ] }),
@@ -8936,7 +8970,7 @@ var FileUpload = t__default.forwardRef(
         onRemove(fileId);
       }
     }, [onRemove]);
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-4", className), ...props, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("moonui-theme", "space-y-4", className), ...props, children: [
       /* @__PURE__ */ jsxs(
         motion.div,
         {
@@ -9275,7 +9309,7 @@ function GitHubStarButton({
     {
       variant: "outline",
       size,
-      className: cn("group", className),
+      className: cn("moonui-theme", "group", className),
       asChild: true,
       children: /* @__PURE__ */ jsxs(
         "a",
@@ -9303,7 +9337,7 @@ function MoonLogo({
 }) {
   const logoId = t.useId();
   const gradientId = `moon-gradient-${logoId}`;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-theme", "flex items-center gap-2", className), children: [
     /* @__PURE__ */ jsxs(
       "svg",
       {
@@ -9380,7 +9414,7 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
   {
     role: "navigation",
     "aria-label": "pagination",
-    className: cn("mx-auto flex w-full justify-center", className),
+    className: cn("moonui-theme", "mx-auto flex w-full justify-center", className),
     ...props
   }
 );
@@ -9389,12 +9423,12 @@ var PaginationContent = t.forwardRef(({ className, ...props }, ref) => /* @__PUR
   "ul",
   {
     ref,
-    className: cn("flex flex-row items-center gap-1", className),
+    className: cn("moonui-theme", "flex flex-row items-center gap-1", className),
     ...props
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
+var PaginationItem = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("moonui-theme", "", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = ({
   className,
@@ -9423,8 +9457,8 @@ var PaginationPrevious = ({
   PaginationLink,
   {
     "aria-label": "Go to previous page",
-    size: "default",
-    className: cn("gap-1 pl-2.5", className),
+    size: "md",
+    className: cn("moonui-theme", "gap-1 pl-2.5", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
@@ -9440,8 +9474,8 @@ var PaginationNext = ({
   PaginationLink,
   {
     "aria-label": "Go to next page",
-    size: "default",
-    className: cn("gap-1 pr-2.5", className),
+    size: "md",
+    className: cn("moonui-theme", "gap-1 pr-2.5", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx("span", { children: "Next" }),
@@ -9457,7 +9491,7 @@ var PaginationEllipsis = ({
   "span",
   {
     "aria-hidden": true,
-    className: cn("flex h-9 w-9 items-center justify-center", className),
+    className: cn("moonui-theme", "flex h-9 w-9 items-center justify-center", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
@@ -9496,7 +9530,7 @@ var RadioGroup2 = t.forwardRef(
       {
         ref,
         role: "radiogroup",
-        className: cn("grid gap-2", className),
+        className: cn("moonui-theme", "grid gap-2", className),
         ...props
       }
     ) });
@@ -9901,7 +9935,7 @@ var Toggle2 = t.forwardRef(({ className, variant, size, ...props }, ref) => /* @
   Root13,
   {
     ref,
-    className: cn(toggleVariants({ variant, size, className })),
+    className: cn("moonui-theme", toggleVariants({ variant, size, className })),
     ...props
   }
 ));
@@ -9937,7 +9971,7 @@ var TooltipArrow = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   TooltipPrimitive.Arrow,
   {
     ref,
-    className: cn("fill-current", className),
+    className: cn("moonui-theme", "fill-current", className),
     ...props
   }
 ));
@@ -9947,7 +9981,7 @@ var TooltipContent = t.forwardRef(({ className, variant, size, showArrow = false
   {
     ref,
     sideOffset,
-    className: cn(tooltipVariants({ variant, size }), className),
+    className: cn("moonui-theme", tooltipVariants({ variant, size }), className),
     ...props,
     children: [
       props.children,
@@ -9965,7 +9999,6 @@ var SimpleTooltip = t.forwardRef(
     side = "top",
     align = "center",
     delayDuration = 400,
-    skipDelayDuration = 300,
     sideOffset = 4,
     showArrow = false,
     className,
@@ -9981,7 +10014,6 @@ var SimpleTooltip = t.forwardRef(
         defaultOpen,
         onOpenChange,
         delayDuration,
-        skipDelayDuration,
         children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
           /* @__PURE__ */ jsx(
@@ -10619,7 +10651,7 @@ var SwipeableCard = t.forwardRef(
   }
 );
 SwipeableCard.displayName = "SwipeableCard";
-var Switch = t.forwardRef(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
+var Switch = t.forwardRef(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "moonui-theme inline-flex items-center gap-2", children: [
   leftIcon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: leftIcon }),
   /* @__PURE__ */ jsxs(
     SwitchPrimitives.Root,
@@ -10684,6 +10716,7 @@ var Textarea = t.forwardRef(
       "textarea",
       {
         className: cn(
+          "moonui-theme",
           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
@@ -10729,7 +10762,7 @@ var Toast = t.forwardRef(({ className, variant, ...props }, ref) => {
     ToastPrimitives.Root,
     {
       ref,
-      className: cn(toastVariants({ variant }), className),
+      className: cn("moonui-theme", toastVariants({ variant }), className),
       ...props
     }
   );
@@ -10765,7 +10798,7 @@ var ToastTitle = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   ToastPrimitives.Title,
   {
     ref,
-    className: cn("text-sm font-semibold [&+div]:text-xs", className),
+    className: cn("moonui-theme", "text-sm font-semibold [&+div]:text-xs", className),
     ...props
   }
 ));
@@ -10774,7 +10807,7 @@ var ToastDescription = t.forwardRef(({ className, ...props }, ref) => /* @__PURE
   ToastPrimitives.Description,
   {
     ref,
-    className: cn("text-sm opacity-90", className),
+    className: cn("moonui-theme", "text-sm opacity-90", className),
     ...props
   }
 ));
@@ -10935,6 +10968,6 @@ function Toaster() {
      *)
 */
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CheckboxLabel, CheckboxWithLabel, Collapsible2 as Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DateRangePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogForm, DialogHeader, DialogTitle, DialogTrigger, DraggableList, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, GestureDrawer, GitHubStarButton, GitHubStars, GradientPicker, Input, Label, MonthPicker, MoonLogo, MoonLogoAnimated, MoonLogoIcon, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverFooter, PopoverHeader, PopoverSeparator, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, RadioItemWithLabel, RadioLabel, RichTextEditor, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, SimpleColorPicker, SimpleEditor, SimpleTooltip, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, SwipeableCard, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle2 as Toggle, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, aspectRatioVariants, badgeVariants, buttonVariants, cn, collapsibleContentVariants, collapsibleTriggerVariants, createFilterableColumn, createSortableHeader, popoverContentVariants, progressVariants, separatorVariants, skeletonVariants, toast, toggleVariants, tooltipVariants, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CheckboxLabel, CheckboxWithLabel, Collapsible2 as Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DateRangePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogForm, DialogHeader, DialogTitle, DialogTrigger, DraggableList, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, GestureDrawer, GitHubStarButton, GitHubStars, GradientPicker, Input, Label, MonthPicker, MoonLogo, MoonLogoAnimated, MoonLogoIcon, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverFooter, PopoverHeader, PopoverSeparator, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, RadioItemWithLabel, RadioLabel, RichTextEditor, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, SimpleColorPicker, SimpleEditor, SimpleTooltip, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, SwipeableCard, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle2 as Toggle, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, aspectRatioVariants, badgeVariants, buttonVariants, cn, collapsibleContentVariants, collapsibleTriggerVariants, createFilterableColumn, createSortableHeader, popoverContentVariants, progressVariants, separatorVariants, skeletonVariants, toast, toggleVariants, tooltipVariants, useToast };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map