@moontra/moonui 2.1.9 → 2.2.0

package/dist/index.mjs

@@ -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,7 +811,7 @@ var Button = t.forwardRef(
   }
 );
 Button.displayName = "Button";
-var microInteractionVariants = cva("", {
+cva("", {
   variants: {
     hover: {
       lift: [
@@ -946,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: {
@@ -1005,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
         }
@@ -1015,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
       }
     );
@@ -1026,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
   }
 ));
@@ -1035,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
   }
 ));
@@ -1044,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
   }
 ));
@@ -1119,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,
@@ -1704,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
@@ -1715,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,
@@ -1751,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 })
   }
@@ -1851,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",
@@ -2012,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
   }
 );
@@ -2020,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
   }
 );
@@ -2028,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
   }
 );
@@ -2037,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
   }
@@ -2072,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
   }
 ));
@@ -2126,6 +2149,7 @@ var TabsTrigger = t.forwardRef(({
   {
     ref,
     className: cn(
+      "moonui-theme",
       tabsTriggerVariants({ variant, size, orientation, fullWidth }),
       fadeTabs && "data-[state=inactive]:opacity-60",
       className
@@ -2145,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
@@ -2335,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(
@@ -2915,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(
@@ -2940,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",
       {
@@ -3460,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
   }
 ));
@@ -3656,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
   }
 ));
@@ -3686,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
   }
 ));
@@ -3723,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
   }
 ));
@@ -3732,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
   }
 ));
@@ -3753,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
   }
 ));
@@ -6886,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;
@@ -6894,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 }) }) }) })
     }
@@ -6905,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
   }
 ));
@@ -7007,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
   }
 ));
@@ -7016,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
   }
 ));
@@ -7134,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
   }
 ));
@@ -7170,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
   }
 ));
@@ -7286,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
   }
 ));
@@ -7298,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
     }
   );
@@ -7354,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(
@@ -7363,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
           }
         );
@@ -7378,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,
@@ -7396,6 +7430,7 @@ var Skeleton = t.forwardRef(
       {
         ref,
         className: cn(
+          "moonui-theme",
           skeletonVariants({ variant, size, shape, animation }),
           "relative isolate",
           className
@@ -7406,7 +7441,7 @@ var Skeleton = t.forwardRef(
           ...style
         },
         ...useMotion ? skeletonAnimation : {},
-        ...props
+        ...filteredProps
       }
     );
   }
@@ -7428,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) => {
@@ -7468,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
@@ -7660,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 })
@@ -8025,7 +8060,7 @@ function Calendar({
     return [...previousMonthDays, ...emptyCells, ...days2, ...nextMonthDays];
   };
   const days = getDaysInMonth();
-  return /* @__PURE__ */ jsxs("div", { className: cn("p-0", className), children: [
+  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",
@@ -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
   }
 ));