@moontra/moonui 2.1.9 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "2.1.9",
+  "version": "2.2.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",
@@ -44,10 +44,10 @@
     "radix-ui"
   ],
   "scripts": {
-    "dev": "tsup src/index.tsx --format esm,cjs --dts --watch",
-    "build": "npm run build:js",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --watch --sourcemap",
+    "build": "npm run build:js && npm run build:dts",
     "build:js": "tsup src/index.tsx --format esm,cjs",
-    "build:dts": "tsup src/index.tsx --format esm,cjs --dts",
+    "build:dts": "tsup src/index.tsx --format esm,cjs --dts-only",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run clean && npm run build",

package/src/components/ui/accordion.tsx

@@ -14,7 +14,7 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={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}
   />
 ))

package/src/components/ui/alert.tsx

@@ -83,7 +83,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       <div
         ref={ref}
         role="alert"
-        className={cn(alertVariants({ variant, size, radius, withClose: closable }), className)}
+        className={cn("moonui-theme", alertVariants({ variant, size, radius, withClose: closable }), className)}
         {...props}
       >
         {!hideIcon && <Icon className="h-5 w-5" />}
@@ -109,7 +109,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={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}
   />
 ));
@@ -121,7 +121,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm leading-5 text-muted-foreground", className)}
+    className={cn("moonui-theme", "text-sm leading-5 text-muted-foreground", className)}
     {...props}
   />
 ));

package/src/components/ui/aspect-ratio.tsx

@@ -53,7 +53,7 @@ const AspectRatio = React.forwardRef<
 >(({ className, variant, radius, ratio = 16 / 9, style, children, ...props }, ref) => (
   <div
     ref={ref} 
-    className={cn(aspectRatioVariants({ variant, radius }), className)}
+    className={cn("moonui-theme", aspectRatioVariants({ variant, radius }), className)}
     style={{
       position: "relative",
       paddingBottom: `${(1 / ratio) * 100}%`,

package/src/components/ui/avatar.tsx

@@ -26,9 +26,9 @@ const 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: {
@@ -49,7 +49,7 @@ const Avatar = React.forwardRef<
 >(({ className, size, radius, variant, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(avatarVariants({ size, radius, variant }), className)}
+    className={cn("moonui-theme", avatarVariants({ size, radius, variant }), className)}
     {...props}
   />
 ));
@@ -61,7 +61,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn("moonui-theme", "aspect-square h-full w-full", className)}
     {...props}
   />
 ));
@@ -97,7 +97,7 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
     return (
       <div
         ref={ref}
-        className={cn("flex items-center", className)}
+        className={cn("moonui-theme", "flex items-center", className)}
         {...props}
       >
         <div className="flex">

package/src/components/ui/badge.tsx

@@ -162,7 +162,7 @@ function Badge({
 
   return (
     <div 
-      className={cn(badgeVariants({ variant, size, radius }), className)} 
+      className={cn("moonui-theme", badgeVariants({ variant, size, radius }), className)} 
       data-removable={removable ? "" : undefined}
       {...props}
     >

package/src/components/ui/breadcrumb.tsx

@@ -9,9 +9,9 @@ const 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",
@@ -58,7 +58,7 @@ const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
   ({ className, variant, size, ...props }, ref) => (
     <nav
       ref={ref}
-      className={cn(breadcrumbVariants({ variant, size }), className)}
+      className={cn("moonui-theme", breadcrumbVariants({ variant, size }), className)}
       aria-label="breadcrumb"
       {...props}
     />
@@ -114,7 +114,7 @@ const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
     return (
       <li
         ref={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" : undefined}
         {...props}
       >
@@ -122,8 +122,8 @@ const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
           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"
+              ? "font-medium text-foreground" 
+              : "text-muted-foreground hover:text-foreground hover:underline hover:underline-offset-4 hover:decoration-muted-foreground/30"
           )}
           {...itemProps}
         >
@@ -143,7 +143,7 @@ const BreadcrumbSeparator = ({
   <span
     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 || <ChevronRight className="h-3.5 w-3.5" />}
@@ -158,7 +158,7 @@ const BreadcrumbEllipsis = ({
   <span
     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}
   >
     <MoreHorizontal className="h-4 w-4" />
@@ -173,7 +173,7 @@ const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttri
       ref={ref}
       href={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}

package/src/components/ui/button.tsx

@@ -13,73 +13,70 @@ const 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: [
@@ -129,14 +126,14 @@ const 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: "",
@@ -199,7 +196,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, rounded, fullWidth, className }))}
+        className={cn("moonui-theme", buttonVariants({ variant, size, rounded, fullWidth, className }))}
         ref={ref}
         disabled={disabled || loading}
         data-loading={loading ? "" : undefined}

package/src/components/ui/calendar.tsx

@@ -164,7 +164,7 @@ function Calendar({
   const days = getDaysInMonth();
 
   return (
-    <div className={cn("p-0", className)}>
+    <div className={cn("moonui-theme", "p-0", className)}>
       {/* Header */}
       <div className="flex items-center justify-between px-6 py-4">
         <button

package/src/components/ui/card.tsx

@@ -63,7 +63,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
       return (
         <motion.div
           ref={ref}
-          className={cn(cardVariants({ variant, size, radius, interactive, className }))}
+          className={cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className }))}
           {...interactionProps}
           {...(props as any)}
         />
@@ -74,7 +74,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     return (
       <div
         ref={ref}
-        className={cn(cardVariants({ variant, size, radius, interactive, className }))}
+        className={cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className }))}
         {...props}
       />
     );
@@ -88,7 +88,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5", className)}
+    className={cn("moonui-theme", "flex flex-col space-y-1.5", className)}
     {...props}
   />
 ));
@@ -100,7 +100,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={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}
   />
 ));
@@ -112,7 +112,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("moonui-theme", "text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
@@ -122,7 +122,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("pt-0", className)} {...props} />
+  <div ref={ref} className={cn("moonui-theme", "pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
@@ -132,7 +132,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center pt-4", className)}
+    className={cn("moonui-theme", "flex items-center pt-4", className)}
     {...props}
   />
 ));

package/src/components/ui/checkbox.tsx

@@ -94,7 +94,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       checked={effectiveChecked}
-      className={cn(checkboxVariants({ variant, size, radius, animation }), className)}
+      className={cn("moonui-theme", checkboxVariants({ variant, size, radius, animation }), className)}
       {...props}
     >
       <CheckboxPrimitive.Indicator

package/src/components/ui/collapsible.tsx

@@ -52,7 +52,7 @@ const CollapsibleTrigger = React.forwardRef<
     return (
       <CollapsiblePrimitive.Trigger
         ref={ref}
-        className={cn(collapsibleTriggerVariants({ variant, size }), className)}
+        className={cn("moonui-theme", collapsibleTriggerVariants({ variant, size }), className)}
         asChild={asChild}
         {...props}
       >
@@ -64,7 +64,7 @@ const CollapsibleTrigger = React.forwardRef<
   return (
     <CollapsiblePrimitive.Trigger
       ref={ref}
-      className={cn(collapsibleTriggerVariants({ variant, size }), className)}
+      className={cn("moonui-theme", collapsibleTriggerVariants({ variant, size }), className)}
       {...props}
     >
       {children}
@@ -107,7 +107,7 @@ const CollapsibleContent = React.forwardRef<
 >(({ className, children, variant, size, ...props }, ref) => (
   <CollapsiblePrimitive.Content
     ref={ref}
-    className={cn(collapsibleContentVariants({ variant, size }), className)}
+    className={cn("moonui-theme", collapsibleContentVariants({ variant, size }), className)}
     {...props}
   >
     <div className="p-4">{children}</div>

package/src/components/ui/color-picker.tsx

@@ -574,7 +574,7 @@ export function SimpleColorPicker({
   };
 
   return (
-    <div className={cn("flex flex-wrap gap-2", className)}>
+    <div className={cn("moonui-theme", "flex flex-wrap gap-2", className)}>
       {colors.map((color) => (
         <button
           key={color}
@@ -617,7 +617,7 @@ export function GradientPicker({
   };
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("moonui-theme", "space-y-4", className)}>
       <div
         className="h-20 rounded-lg border-2"
         style={{

package/src/components/ui/command.tsx

@@ -48,7 +48,7 @@ const Command = React.forwardRef<
 >(({ className, variant, size, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
-    className={cn(commandVariants({ variant, size }), className)}
+    className={cn("moonui-theme", commandVariants({ variant, size }), className)}
     {...props}
   />
 ))
@@ -112,7 +112,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={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}
   />
 ))
@@ -128,7 +128,7 @@ const CommandEmpty = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Empty
     ref={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}
   />
 ))
@@ -163,7 +163,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn("moonui-theme", "-mx-1 h-px bg-border", className)}
     {...props}
   />
 ))

package/src/components/ui/data-table.tsx

@@ -292,7 +292,7 @@ export function DataTable<TData, TValue>({
   const selectedRows = table.getFilteredSelectedRowModel().rows;
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("moonui-theme", "space-y-4", className)}>
       {/* Header */}
       {(title || description) && (
         <div className="space-y-1">

package/src/components/ui/date-picker.tsx

@@ -13,7 +13,7 @@ import {
 } from "./popover";
 import { cva, type VariantProps } from "class-variance-authority";
 import { motion, AnimatePresence } from "framer-motion";
-import { microInteractionVariants } from "@/lib/micro-interactions";
+import { pageTransitions } from "@/lib/micro-interactions";
 
 /**
  * DatePicker Component
@@ -29,7 +29,6 @@ const datePickerVariants = cva(
         default: "",
         outline: "border-2",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        minimal: "h-auto p-0 border-0 shadow-none",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -180,10 +179,11 @@ export function DatePicker({
   const iconElement = icon || <CalendarIcon className="h-4 w-4" />;
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <div className="moonui-theme">
+      <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          variant={variant === "minimal" ? "ghost" : variant || "outline"}
+          variant={variant === "ghost" ? "ghost" : "outline"}
           className={cn(
             datePickerVariants({ variant, size, state }),
             !displayValue && "text-muted-foreground",
@@ -251,7 +251,7 @@ export function DatePicker({
         sideOffset={12}
       >
         <motion.div
-          {...microInteractionVariants.fadeIn}
+          {...pageTransitions.fadeIn}
           className="rounded-2xl bg-background overflow-hidden"
         >
           <Calendar
@@ -278,6 +278,7 @@ export function DatePicker({
         </motion.div>
       </PopoverContent>
     </Popover>
+    </div>
   );
 }
 
@@ -342,7 +343,7 @@ export function DateRangePicker({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          variant={props.variant === "minimal" ? "ghost" : props.variant || "outline"}
+          variant={props.variant === "ghost" ? "ghost" : "outline"}
           className={cn(
             datePickerVariants({ 
               variant: props.variant, 
@@ -540,7 +541,7 @@ export function MonthPicker({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          variant={props.variant || "outline"}
+          variant={props.variant === "default" ? "outline" : (props.variant || "outline")}
           className={cn(
             datePickerVariants({ 
               variant: props.variant, 
@@ -581,7 +582,7 @@ export function MonthPicker({
             {months.map((month, index) => (
               <Button
                 key={month}
-                variant={value && value.getMonth() === index ? "default" : "outline"}
+                variant={value && value.getMonth() === index ? "primary" : "outline"}
                 size="sm"
                 onClick={() => handleMonthSelect(index)}
                 className="h-8 text-xs"

package/src/components/ui/dialog.tsx

@@ -53,7 +53,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, variant, animation, ...props }, ref) => (
     <DialogPrimitive.Overlay
         ref={ref}
-        className={cn(overlayVariants({ variant, animation }), className)}
+        className={cn("moonui-theme", overlayVariants({ variant, animation }), className)}
         {...props}
     />
 ));
@@ -313,7 +313,7 @@ const DialogForm = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <form
         ref={ref}
-        className={cn("flex flex-col gap-4", className)}
+        className={cn("moonui-theme", "flex flex-col gap-4", className)}
         {...props}
     />
 ));

package/src/components/ui/draggable-list.tsx

@@ -57,7 +57,7 @@ export function DraggableList<T>({
   }
 
   return (
-    <div className={cn("space-y-2", className)}>
+    <div className={cn("moonui-theme", "space-y-2", className)}>
       {items.map((item, index) => (
         <div
           key={keyExtractor(item)}

package/src/components/ui/dropdown-menu.tsx

@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={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}
   />
 ))
@@ -174,7 +174,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <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}
     />
   )

package/src/components/ui/file-upload.tsx

@@ -111,7 +111,7 @@ const FileItem = ({
             </Badge>
           )}
           {status === 'success' && (
-            <Badge variant="default" className="h-5 bg-green-500">
+            <Badge variant="success" className="h-5">
               <CheckCircle className="h-3 w-3 mr-1" />
               Done
             </Badge>
@@ -302,7 +302,7 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
     }, [onRemove])
 
     return (
-      <div ref={ref} className={cn("space-y-4", className)} {...props}>
+      <div ref={ref} className={cn("moonui-theme", "space-y-4", className)} {...props}>
         {/* Upload Area */}
         <motion.div
           className={cn(