@moontra/moonui 2.1.9 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "2.1.9",
+  "version": "2.2.1",
   "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 && node scripts/postbuild.js",
     "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

@@ -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(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("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("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/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

@@ -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";
@@ -26,9 +28,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 +51,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 +63,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 +99,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

@@ -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",
@@ -162,7 +164,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}
     >
@@ -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";
@@ -9,9 +11,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 +60,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 +116,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 +124,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 +145,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 +160,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 +175,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.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" />