@moontra/moonui 2.2.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",
@@ -45,7 +45,7 @@
   ],
   "scripts": {
     "dev": "tsup src/index.tsx --format esm,cjs --dts --watch --sourcemap",
-    "build": "npm run build:js && npm run build:dts",
+    "build": "npm run build:js && npm run build:dts && node scripts/postbuild.js",
     "build:js": "tsup src/index.tsx --format esm,cjs",
     "build:dts": "tsup src/index.tsx --format esm,cjs --dts-only",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",

package/src/components/ui/alert.tsx

@@ -14,116 +14,146 @@ import { cn } from "../../lib/utils";
  */
 
 const alertVariants = cva(
-  "relative w-full flex items-center gap-3 p-4 border text-foreground [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground border-border",
-        primary: "bg-primary/10 text-primary border-primary/30",
-        success: "bg-success/10 text-success border-success/30",
-        warning: "bg-warning/10 text-warning border-warning/30",
-        error: "bg-destructive/10 text-destructive border-destructive/30",
-        info: "bg-blue-500/10 text-blue-500 border-blue-500/30",
-      },
-      size: {
-        sm: "py-2 text-xs",
-        default: "py-3 text-sm",
-        lg: "py-4 text-base",
-      },
-      radius: {
-        none: "rounded-none",
-        sm: "rounded-sm",
-        default: "rounded-md",
-        lg: "rounded-lg",
-        full: "rounded-full",
-      },
-      withClose: {
-        true: "pr-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      radius: "default",
-      withClose: false,
-    },
-  }
+    "relative w-full flex items-center gap-3 p-4 border text-foreground [&>svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default: "bg-background text-foreground border-border",
+                primary: "bg-primary/10 text-primary border-primary/30",
+                success: "bg-success/10 text-success border-success/30",
+                warning: "bg-warning/10 text-warning border-warning/30",
+                error: "bg-destructive/10 text-destructive border-destructive/30",
+                info: "bg-blue-500/10 text-blue-500 border-blue-500/30",
+            },
+            size: {
+                sm: "py-2 text-xs",
+                default: "py-3 text-sm",
+                lg: "py-4 text-base",
+            },
+            radius: {
+                none: "rounded-none",
+                sm: "rounded-sm",
+                default: "rounded-md",
+                lg: "rounded-lg",
+                full: "rounded-full",
+            },
+            withClose: {
+                true: "pr-10",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+            radius: "default",
+            withClose: false,
+        },
+    }
 );
 
 export interface AlertProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof alertVariants> {
-  /** Alert ikonunu gizler */
-  hideIcon?: boolean;
-  /** Kapatma butonu ekler */
-  closable?: boolean;
-  /** Kapatma butonu tıklandığında çalışacak fonksiyon */
-  onClose?: () => void;
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof alertVariants> {
+    /** Alert ikonunu gizler */
+    hideIcon?: boolean;
+    /** Kapatma butonu ekler */
+    closable?: boolean;
+    /** Kapatma butonu tıklandığında çalışacak fonksiyon */
+    onClose?: () => void;
 }
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant = "default", size, radius, hideIcon = false, closable = false, onClose, children, ...props }, ref) => {
-    // Alert türüne göre ikon belirleme
-    const Icon = React.useMemo(() => {
-      switch (variant) {
-        case "success":
-          return Check;
-        case "warning":
-          return AlertTriangle;
-        case "error":
-          return AlertCircle;
-        case "info":
-          return Info;
-        default:
-          return Info;
-      }
-    }, [variant]);
+    (
+        {
+            className,
+            variant = "default",
+            size,
+            radius,
+            hideIcon = false,
+            closable = false,
+            onClose,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        // Alert türüne göre ikon belirleme
+        const Icon = React.useMemo(() => {
+            switch (variant) {
+                case "success":
+                    return Check;
+                case "warning":
+                    return AlertTriangle;
+                case "error":
+                    return AlertCircle;
+                case "info":
+                    return Info;
+                default:
+                    return Info;
+            }
+        }, [variant]);
 
-    return (
-      <div
-        ref={ref}
-        role="alert"
-        className={cn("moonui-theme", alertVariants({ variant, size, radius, withClose: closable }), className)}
-        {...props}
-      >
-        {!hideIcon && <Icon className="h-5 w-5" />}
-        <div className="flex-1">{children}</div>
-        {closable && onClose && (
-          <button
-            onClick={onClose}
-            className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100"
-            aria-label="Kapat"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-    );
-  }
+        return (
+            <div
+                ref={ref}
+                role="alert"
+                className={cn(
+                    "moonui-theme",
+                    alertVariants({
+                        variant,
+                        size,
+                        radius,
+                        withClose: closable,
+                    }),
+                    className
+                )}
+                {...props}
+            >
+                {!hideIcon && <Icon className="h-5 w-5" />}
+                <div className="flex-1">{children}</div>
+                {closable && onClose && (
+                    <button
+                        onClick={onClose}
+                        className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100"
+                        aria-label="Kapat"
+                    >
+                        <X className="h-4 w-4" />
+                    </button>
+                )}
+            </div>
+        );
+    }
 );
 Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("moonui-theme", "font-semibold leading-tight tracking-tight mb-1", className)}
-    {...props}
-  />
+    <h5
+        ref={ref}
+        className={cn(
+            "moonui-theme",
+            "font-semibold leading-tight tracking-tight mb-1",
+            className
+        )}
+        {...props}
+    />
 ));
 AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("moonui-theme", "text-sm leading-5 text-muted-foreground", className)}
-    {...props}
-  />
+    <div
+        ref={ref}
+        className={cn(
+            "moonui-theme",
+            "text-sm leading-5 text-muted-foreground",
+            className
+        )}
+        {...props}
+    />
 ));
 AlertDescription.displayName = "AlertDescription";
 

package/src/components/ui/avatar.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cva, type VariantProps } from "class-variance-authority";

package/src/components/ui/badge.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -10,7 +12,7 @@ import { cn } from "../../lib/utils";
  */
 
 const badgeVariants = cva(
-  ["inline-flex items-center gap-1.5", 
+  ["inline-flex items-center justify-center gap-1.5", 
   "font-medium transition-colors duration-200", 
   "border focus:outline-none",
   "focus-visible:ring-2 focus-visible:ring-offset-1"],
@@ -18,23 +20,23 @@ const badgeVariants = cva(
     variants: {
       variant: {
         primary: [
-          "border-transparent bg-primary text-primary-foreground",
-          "hover:bg-primary-hover dark:hover:bg-primary/90",
-          "focus-visible:ring-primary/30 dark:focus-visible:ring-primary/40",
-          "dark:bg-primary/90 dark:text-white dark:shadow-inner dark:shadow-primary/10",
+          "border-transparent bg-gray-900 text-white",
+          "hover:bg-gray-800 dark:hover:bg-gray-700",
+          "focus-visible:ring-gray-500/30 dark:focus-visible:ring-gray-400/40",
+          "dark:bg-gray-700 dark:text-gray-50 dark:shadow-inner dark:shadow-gray-950/10",
         ],
         secondary: [
           "border-transparent bg-secondary text-secondary-foreground",
-          "hover:bg-gray-200 dark:hover:bg-gray-700/90",
+          "hover:bg-gray-200 dark:hover:bg-gray-600",
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:bg-gray-800 dark:text-gray-100 dark:shadow-inner dark:shadow-gray-950/10",
+          "dark:bg-gray-700/50 dark:text-gray-50 dark:shadow-inner dark:shadow-gray-950/10",
         ],
         outline: [
-          "border-gray-200 dark:border-gray-700",
+          "border-gray-200 dark:border-gray-600",
           "bg-transparent text-foreground",
-          "hover:border-gray-300 dark:hover:border-gray-600",
+          "hover:border-gray-300 dark:hover:border-gray-500",
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200 dark:bg-transparent dark:backdrop-blur-sm",
+          "dark:text-gray-100 dark:bg-transparent dark:backdrop-blur-sm",
         ],
         destructive: [
           "border-transparent bg-error text-white",
@@ -55,11 +57,11 @@ const badgeVariants = cva(
           "dark:bg-warning/90 dark:text-gray-900 dark:shadow-inner dark:shadow-warning/10",
         ],
         ghost: [
-          "border-transparent bg-transparent text-foreground",
-          "hover:bg-gray-100 dark:hover:bg-gray-800/80",
+          "border border-gray-200 bg-gray-50/50 text-gray-700",
+          "hover:bg-gray-100 dark:hover:bg-gray-800/60",
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200 dark:backdrop-blur-sm",
-          "transition-colors duration-200",
+          "dark:border-gray-700 dark:bg-gray-800/30 dark:text-gray-300",
+          "transition-all duration-200",
         ],
         pro: [
           "border-transparent bg-gradient-to-r from-purple-600 to-pink-600 text-white",
@@ -185,13 +187,13 @@ function Badge({
         />
       )}
       {autoLeftIcon && (
-        <span className="inline-flex shrink-0">
+        <span className="inline-flex shrink-0 items-center">
           {autoLeftIcon}
         </span>
       )}
-      <span className="truncate">{autoChildren}</span>
+      <span className="inline-flex items-center">{autoChildren}</span>
       {rightIcon && (
-        <span className="inline-flex shrink-0">
+        <span className="inline-flex shrink-0 items-center">
           {rightIcon}
         </span>
       )}

package/src/components/ui/breadcrumb.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";

package/src/components/ui/button.stories.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './button';
 import { Mail, Plus, Loader2 } from 'lucide-react';
@@ -135,7 +137,7 @@ export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
       <div className="flex flex-wrap gap-2">
-        <Button variant="default">Default</Button>
+        <Button variant="primary">Default</Button>
         <Button variant="secondary">Secondary</Button>
         <Button variant="destructive">Destructive</Button>
         <Button variant="outline">Outline</Button>
@@ -144,7 +146,7 @@ export const AllVariants: Story = {
       </div>
       <div className="flex flex-wrap gap-2">
         <Button size="sm">Small</Button>
-        <Button size="default">Default</Button>
+        <Button size="md">Default</Button>
         <Button size="lg">Large</Button>
         <Button size="icon">
           <Plus className="h-4 w-4" />

package/src/components/ui/button.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -29,11 +31,11 @@ const buttonVariants = cva(
           "transition-all duration-200",
         ],
         secondary: [
-          "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",
+          "bg-gray-100 text-gray-900",
+          "dark:bg-gray-800 dark:text-gray-100",
+          "hover:bg-gray-200 dark:hover:bg-gray-700",
+          "active:bg-gray-300 dark:active:bg-gray-600",
+          "border border-gray-200 dark:border-gray-700",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "shadow-sm hover:shadow-md",
         ],
@@ -47,10 +49,10 @@ const buttonVariants = cva(
           "transition-all duration-200",
         ],
         ghost: [
-          "text-foreground",
-          "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",
+          "text-gray-700",
+          "dark:text-gray-300",
+          "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100",
+          "active:bg-gray-200 dark:active:bg-gray-700",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",
         ],
@@ -80,19 +82,21 @@ const buttonVariants = cva(
           "transition-colors duration-200",
         ],
         gradient: [
-          "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
-          "hover:from-blue-700 hover:to-purple-700",
-          "active:from-blue-800 active:to-purple-800",
-          "shadow-lg shadow-purple-500/25",
+          "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
+          "hover:from-purple-600 hover:to-pink-600",
+          "active:from-purple-700 active:to-pink-700",
+          "shadow-xl shadow-purple-500/40",
+          "hover:shadow-2xl hover:shadow-purple-500/50",
           "focus-visible:ring-purple-500/50",
           "transition-all duration-300",
         ],
         glow: [
-          "bg-primary text-primary-foreground",
-          "shadow-lg shadow-primary/50",
-          "hover:shadow-xl hover:shadow-primary/60",
-          "active:shadow-md active:shadow-primary/40",
-          "focus-visible:ring-primary/50",
+          "bg-blue-500 text-white",
+          "shadow-[0_0_30px_rgba(59,130,246,0.5)]",
+          "hover:shadow-[0_0_40px_rgba(59,130,246,0.7)]",
+          "active:shadow-[0_0_20px_rgba(59,130,246,0.4)]",
+          "hover:bg-blue-600",
+          "focus-visible:ring-blue-500/50",
           "transition-all duration-300",
         ],
         soft: [
@@ -116,29 +120,31 @@ const buttonVariants = cva(
           "transition-all duration-200",
         ],
         neon: [
-          "bg-transparent text-primary",
-          "border-2 border-primary",
-          "hover:bg-primary hover:text-primary-foreground",
-          "hover:shadow-[0_0_20px_rgba(var(--primary),0.5)]",
-          "active:shadow-[0_0_10px_rgba(var(--primary),0.3)]",
-          "focus-visible:ring-primary/50",
+          "bg-transparent text-green-400",
+          "border-2 border-green-400",
+          "hover:bg-green-400 hover:text-gray-900",
+          "hover:shadow-[0_0_30px_rgba(74,222,128,0.6)]",
+          "active:shadow-[0_0_15px_rgba(74,222,128,0.4)]",
+          "focus-visible:ring-green-400/50",
           "transition-all duration-300",
         ],
       },
       size: {
-        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-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",
+        xs: "h-7 px-2.5 text-xs",
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg",
+        xl: "h-14 px-8 text-xl",
+        icon: "h-10 w-10 p-2",
+        "icon-sm": "h-8 w-8 p-1.5",
+        "icon-lg": "h-12 w-12 p-3",
       },
       rounded: {
-        default: "",
+        default: "rounded-xl",
         full: "rounded-full",
         none: "rounded-none",
+        sm: "rounded-lg",
+        lg: "rounded-2xl",
       },
       fullWidth: {
         true: "w-full",

package/src/components/ui/calendar.tsx

@@ -166,7 +166,7 @@ function Calendar({
   return (
     <div className={cn("moonui-theme", "p-0", className)}>
       {/* Header */}
-      <div className="flex items-center justify-between px-6 py-4">
+      <div className="flex items-center justify-between px-6 py-4 border-b border-border/50 dark:border-gray-700/50">
         <button
           onClick={handlePreviousMonth}
           className={cn(