@moontra/moonui-pro 2.4.6 → 2.5.0

package/src/components/dashboard/widgets/metric-card.tsx

@@ -0,0 +1,343 @@
+"use client"
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import { Card } from '../../ui/card'
+import { cn } from '../../../lib/utils'
+import { 
+  TrendingUp, 
+  TrendingDown, 
+  Minus,
+  ArrowUpRight,
+  ArrowDownRight,
+  MoreVertical,
+  Maximize2,
+  Download,
+  Share2
+} from 'lucide-react'
+import { MetricData } from '../types'
+import { Button } from '../../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../ui/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip'
+
+interface MetricCardProps {
+  data: MetricData
+  onClick?: () => void
+  onAction?: (action: string) => void
+  className?: string
+  showSparkline?: boolean
+  showForecast?: boolean
+  interactive?: boolean
+  glassmorphism?: boolean
+}
+
+export function MetricCard({
+  data,
+  onClick,
+  onAction,
+  className,
+  showSparkline = true,
+  showForecast = false,
+  interactive = true,
+  glassmorphism = false
+}: MetricCardProps) {
+  const [isHovered, setIsHovered] = React.useState(false)
+
+  // Renk sınıfları
+  const colorClasses = {
+    primary: 'text-blue-600 dark:text-blue-400',
+    success: 'text-green-600 dark:text-green-400',
+    warning: 'text-yellow-600 dark:text-yellow-400',
+    danger: 'text-red-600 dark:text-red-400',
+    info: 'text-purple-600 dark:text-purple-400'
+  }
+
+  // Değişim renkleri
+  const getChangeColor = (type: 'increase' | 'decrease' | 'neutral') => {
+    switch (type) {
+      case 'increase':
+        return 'text-green-600 dark:text-green-400'
+      case 'decrease':
+        return 'text-red-600 dark:text-red-400'
+      default:
+        return 'text-gray-600 dark:text-gray-400'
+    }
+  }
+
+  // Değişim ikonu
+  const getChangeIcon = (type: 'increase' | 'decrease' | 'neutral') => {
+    switch (type) {
+      case 'increase':
+        return <ArrowUpRight className="h-4 w-4" />
+      case 'decrease':
+        return <ArrowDownRight className="h-4 w-4" />
+      default:
+        return <Minus className="h-4 w-4" />
+    }
+  }
+
+  // Sparkline çizimi
+  const renderSparkline = () => {
+    if (!data.sparkline || data.sparkline.length < 2) return null
+
+    const max = Math.max(...data.sparkline)
+    const min = Math.min(...data.sparkline)
+    const range = max - min || 1
+
+    const points = data.sparkline
+      .map((value, index) => {
+        const x = (index / (data.sparkline!.length - 1)) * 100
+        const y = 100 - ((value - min) / range) * 100
+        return `${x},${y}`
+      })
+      .join(' ')
+
+    const gradientId = `gradient-${data.id}`
+
+    return (
+      <motion.div 
+        className="absolute bottom-0 left-0 right-0 h-16 overflow-hidden rounded-b-lg opacity-20"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: isHovered ? 0.3 : 0.2 }}
+        transition={{ duration: 0.2 }}
+      >
+        <svg
+          className="w-full h-full"
+          viewBox="0 0 100 100"
+          preserveAspectRatio="none"
+        >
+          <defs>
+            <linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor="currentColor" stopOpacity="0.3" />
+              <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+          <polyline
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            points={points}
+            className={colorClasses[data.color || 'primary']}
+          />
+          <polygon
+            fill={`url(#${gradientId})`}
+            points={`0,100 ${points} 100,100`}
+            className={colorClasses[data.color || 'primary']}
+          />
+        </svg>
+      </motion.div>
+    )
+  }
+
+  // İlerleme barı (hedef varsa)
+  const renderProgress = () => {
+    if (!data.target) return null
+
+    const currentValue = typeof data.value === 'number' ? data.value : parseFloat(data.value as string)
+    const progress = (currentValue / data.target) * 100
+
+    return (
+      <motion.div 
+        className="mt-3"
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="flex justify-between text-xs text-muted-foreground mb-1">
+          <span>Progress to target</span>
+          <span>{progress.toFixed(1)}%</span>
+        </div>
+        <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+          <motion.div
+            className={cn(
+              "h-full rounded-full",
+              progress >= 100 ? 'bg-green-500' : 'bg-primary'
+            )}
+            initial={{ width: 0 }}
+            animate={{ width: `${Math.min(progress, 100)}%` }}
+            transition={{ duration: 0.5, ease: "easeOut" }}
+          />
+        </div>
+        <div className="flex justify-between text-xs text-muted-foreground mt-1">
+          <span>{currentValue} {data.unit}</span>
+          <span>Target: {data.target} {data.unit}</span>
+        </div>
+      </motion.div>
+    )
+  }
+
+  // Değer formatı
+  const formatValue = (value: string | number): string => {
+    if (typeof value === 'number') {
+      if (value >= 1000000) {
+        return (value / 1000000).toFixed(1) + 'M'
+      } else if (value >= 1000) {
+        return (value / 1000).toFixed(1) + 'K'
+      }
+      return value.toLocaleString()
+    }
+    return value.toString()
+  }
+
+  // Card variants
+  const cardVariants = {
+    initial: { opacity: 0, y: 20 },
+    animate: { 
+      opacity: 1, 
+      y: 0,
+      transition: { duration: 0.3, ease: "easeOut" }
+    },
+    hover: interactive ? {
+      y: -2,
+      transition: { duration: 0.2 }
+    } : {}
+  }
+
+  return (
+    <motion.div
+      variants={cardVariants}
+      initial="initial"
+      animate="animate"
+      whileHover="hover"
+      onHoverStart={() => setIsHovered(true)}
+      onHoverEnd={() => setIsHovered(false)}
+    >
+      <Card 
+        className={cn(
+          "relative overflow-hidden cursor-pointer transition-all duration-300",
+          interactive && "hover:shadow-lg hover:shadow-primary/5",
+          glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
+          className
+        )}
+        onClick={onClick}
+      >
+        {/* Açık arka plan efekti */}
+        {glassmorphism && (
+          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent" />
+        )}
+
+        {/* Üst bar */}
+        <div className="flex items-center justify-between p-4 pb-2">
+          <div className="flex items-center gap-3">
+            <motion.div 
+              className={cn(
+                "p-2 rounded-lg",
+                glassmorphism ? "bg-white/10 backdrop-blur" : "bg-muted"
+              )}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <div className={cn("h-5 w-5", colorClasses[data.color || 'primary'])}>
+                {data.icon}
+              </div>
+            </motion.div>
+            <div>
+              <h3 className="text-sm font-medium text-muted-foreground">{data.title}</h3>
+            </div>
+          </div>
+
+          {/* Aksiyonlar */}
+          {interactive && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  className="h-8 w-8 p-0"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => onAction?.('fullscreen')}>
+                  <Maximize2 className="mr-2 h-4 w-4" />
+                  Fullscreen
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onAction?.('export')}>
+                  <Download className="mr-2 h-4 w-4" />
+                  Export Data
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onAction?.('share')}>
+                  <Share2 className="mr-2 h-4 w-4" />
+                  Share
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+
+        {/* Ana değer */}
+        <div className="px-4 pb-4">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <motion.div 
+                  className="text-3xl font-bold tracking-tight"
+                  animate={{ 
+                    scale: isHovered ? 1.02 : 1,
+                  }}
+                  transition={{ duration: 0.2 }}
+                >
+                  {formatValue(data.value)}
+                  {data.unit && <span className="text-lg ml-1 text-muted-foreground">{data.unit}</span>}
+                </motion.div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Exact value: {data.value} {data.unit}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          {/* Değişim göstergesi */}
+          {data.change && (
+            <motion.div 
+              className={cn(
+                "flex items-center gap-1 text-sm mt-2",
+                getChangeColor(data.change.type)
+              )}
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.1 }}
+            >
+              {getChangeIcon(data.change.type)}
+              <span className="font-medium">
+                {data.change.type === 'neutral' ? '' : data.change.type === 'increase' ? '+' : '-'}
+                {Math.abs(data.change.value)}%
+              </span>
+              <span className="text-muted-foreground">
+                from {data.change.period}
+              </span>
+            </motion.div>
+          )}
+
+          {/* Tahmin */}
+          {showForecast && data.forecast && (
+            <motion.div 
+              className="flex items-center gap-1 text-xs text-muted-foreground mt-1"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2 }}
+            >
+              <TrendingUp className="h-3 w-3" />
+              <span>Forecast: {formatValue(data.forecast)} {data.unit}</span>
+            </motion.div>
+          )}
+
+          {/* İlerleme barı */}
+          {renderProgress()}
+        </div>
+
+        {/* Sparkline */}
+        {showSparkline && renderSparkline()}
+      </Card>
+    </motion.div>
+  )
+}
+
+export default MetricCard

package/src/components/index.ts

@@ -24,8 +24,8 @@ export * from "./pinch-zoom"
 // Spotlight Card
 export * from "./spotlight-card"
 
-// Calendar
-export * from "./calendar"
+// Calendar component (Advanced version with events)
+export { Calendar as AdvancedCalendar } from "./calendar"
 
 // Kanban
 export * from "./kanban"

package/src/components/ui/calendar.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+import { cn } from "../../lib/utils"
+import { buttonVariants } from "./button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        // IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        // IconRight: () => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

package/src/components/ui/index.ts

@@ -34,6 +34,10 @@ export {
   Button, buttonVariants
 } from './button';
 
+export {
+  Calendar
+} from './calendar';
+
 export { 
   MoonUICardPro, MoonUICardHeaderPro, MoonUICardFooterPro, MoonUICardTitlePro, MoonUICardDescriptionPro, MoonUICardContentPro,
   Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent
@@ -99,6 +103,10 @@ export {
   radioGroupItemVariants, RadioGroupContext, RadioGroup, RadioGroupItem, RadioLabel, RadioItemWithLabel
 } from './radio-group';
 
+export {
+  ScrollArea, ScrollBar
+} from './scroll-area';
+
 export { 
   MoonUISelectPro, MoonUISelectTriggerPro, MoonUISelectContentPro, MoonUISelectItemPro, MoonUISelectValuePro, MoonUISelectGroupPro, MoonUISelectLabelPro, MoonUISelectSeparatorPro,
   Select, SelectTrigger, SelectContent, SelectItem, SelectValue, SelectGroup, SelectLabel, SelectSeparator
@@ -109,6 +117,10 @@ export {
   Separator, separatorVariants
 } from './separator';
 
+export {
+  Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose, SheetPortal, SheetOverlay
+} from './sheet';
+
 export { 
   MoonUISkeletonPro,
   Skeleton

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import { cn } from "../../lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}