@moontra/moonui-pro 2.19.0 → 2.20.0

package/src/components/pinch-zoom/index.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import React, { useRef, useState, useCallback } from "react"
-import { motion, useMotionValue, useTransform, animate } from "framer-motion"
+import React, { useRef, useState, useCallback, useEffect } from "react"
+import { motion, useMotionValue, useTransform, animate, AnimatePresence } from "framer-motion"
 import { cn } from "../../lib/utils"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
-import { Lock, Sparkles } from "lucide-react"
+import { Lock, Sparkles, ZoomIn, ZoomOut, Maximize2, RotateCw, Minimize2 } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
 interface PinchZoomProps {
@@ -16,6 +16,14 @@ interface PinchZoomProps {
   className?: string
   contentClassName?: string
   onZoomChange?: (zoom: number) => void
+  showControls?: boolean
+  showIndicator?: boolean
+  doubleTapBehavior?: 'zoom' | 'reset'
+  wheelScaling?: boolean
+  dragEnabled?: boolean
+  zoomStep?: number
+  smoothZoom?: boolean
+  boundaryConstraints?: boolean
 }
 
 const PinchZoomInternal = React.forwardRef<HTMLDivElement, PinchZoomProps>(
@@ -27,10 +35,23 @@ const PinchZoomInternal = React.forwardRef<HTMLDivElement, PinchZoomProps>(
     className,
     contentClassName,
     onZoomChange,
+    showControls = true,
+    showIndicator = true,
+    doubleTapBehavior = 'zoom',
+    wheelScaling = true,
+    dragEnabled = true,
+    zoomStep = 0.5,
+    smoothZoom = true,
+    boundaryConstraints = true,
     ...props
   }, ref) => {
     const containerRef = useRef<HTMLDivElement>(null)
+    const contentRef = useRef<HTMLDivElement>(null)
     const [isDragging, setIsDragging] = useState(false)
+    const [showZoomIndicator, setShowZoomIndicator] = useState(false)
+    const [lastTap, setLastTap] = useState(0)
+    const [isHovered, setIsHovered] = useState(false)
+    const [isFullscreen, setIsFullscreen] = useState(false)
     
     const scale = useMotionValue(initialZoom)
     const x = useMotionValue(0)
@@ -40,22 +61,135 @@ const PinchZoomInternal = React.forwardRef<HTMLDivElement, PinchZoomProps>(
       return Math.min(Math.max(value, minZoom), maxZoom)
     })
     
+    // Zoom yüzdesi için transform
+    const zoomPercentage = useTransform(scale, (value) => {
+      return Math.round(value * 100)
+    })
+    
+    // Sınırları hesapla
+    const calculateConstraints = useCallback(() => {
+      if (!containerRef.current || !contentRef.current || !boundaryConstraints) return { left: 0, right: 0, top: 0, bottom: 0 }
+      
+      const containerRect = containerRef.current.getBoundingClientRect()
+      const currentScale = scale.get()
+      
+      const scaledWidth = containerRect.width * currentScale
+      const scaledHeight = containerRect.height * currentScale
+      
+      const maxX = Math.max(0, (scaledWidth - containerRect.width) / 2)
+      const maxY = Math.max(0, (scaledHeight - containerRect.height) / 2)
+      
+      return {
+        left: -maxX,
+        right: maxX,
+        top: -maxY,
+        bottom: maxY
+      }
+    }, [scale, boundaryConstraints])
+    
+    // Browser zoom'unu engelle (sadece Ctrl/Cmd basılıyken)
+    useEffect(() => {
+      if (!containerRef.current || !wheelScaling) return
+      
+      const container = containerRef.current
+      const handleWheelPrevent = (e: WheelEvent) => {
+        // Sadece component üzerinde ve Ctrl/Cmd basılıyken preventDefault yap
+        if (isHovered && wheelScaling && (e.ctrlKey || e.metaKey)) {
+          e.preventDefault()
+        }
+      }
+      
+      // Passive: false ile event listener ekle
+      container.addEventListener('wheel', handleWheelPrevent, { passive: false })
+      
+      return () => {
+        container.removeEventListener('wheel', handleWheelPrevent)
+      }
+    }, [isHovered, wheelScaling])
+    
     const handleWheel = useCallback((event: React.WheelEvent) => {
+      if (!wheelScaling) return
+      
+      // Ctrl (veya Mac'te Cmd) basılı değilse zoom yapma
+      if (!event.ctrlKey && !event.metaKey) return
+      
       event.preventDefault()
       
       const delta = -event.deltaY / 1000
       const currentScale = scale.get()
       const newScale = Math.min(Math.max(currentScale + delta, minZoom), maxZoom)
       
-      animate(scale, newScale, { duration: 0.2 })
+      // Zoom noktasını hesapla (mouse pozisyonuna göre)
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect()
+        const centerX = (event.clientX - rect.left) / rect.width - 0.5
+        const centerY = (event.clientY - rect.top) / rect.height - 0.5
+        
+        const scaleDiff = newScale - currentScale
+        const currentX = x.get()
+        const currentY = y.get()
+        
+        // Zoom noktasına göre pozisyonu ayarla
+        const newX = currentX - centerX * rect.width * scaleDiff
+        const newY = currentY - centerY * rect.height * scaleDiff
+        
+        if (smoothZoom) {
+          animate(x, newX, { duration: 0.2 })
+          animate(y, newY, { duration: 0.2 })
+        } else {
+          x.set(newX)
+          y.set(newY)
+        }
+      }
+      
+      if (smoothZoom) {
+        animate(scale, newScale, { duration: 0.2 })
+      } else {
+        scale.set(newScale)
+      }
+      
       onZoomChange?.(newScale)
-    }, [scale, minZoom, maxZoom, onZoomChange])
+      
+      // Zoom göstergesini göster
+      if (showIndicator) {
+        setShowZoomIndicator(true)
+        setTimeout(() => setShowZoomIndicator(false), 1500)
+      }
+    }, [scale, x, y, minZoom, maxZoom, onZoomChange, wheelScaling, smoothZoom, showIndicator])
     
     const handleDoubleClick = useCallback((event: React.MouseEvent) => {
       event.preventDefault()
       
       const currentScale = scale.get()
-      const newScale = currentScale > 1 ? 1 : 2
+      let newScale: number
+      
+      if (doubleTapBehavior === 'reset') {
+        newScale = initialZoom
+      } else {
+        // Zoom to point functionality
+        newScale = currentScale > 1 ? 1 : 2
+        
+        if (newScale > 1 && containerRef.current) {
+          const rect = containerRef.current.getBoundingClientRect()
+          const centerX = (event.clientX - rect.left) / rect.width - 0.5
+          const centerY = (event.clientY - rect.top) / rect.height - 0.5
+          
+          // Tıklanan noktaya zoom yap
+          const targetX = -centerX * rect.width * (newScale - 1)
+          const targetY = -centerY * rect.height * (newScale - 1)
+          
+          animate(x, targetX, { 
+            duration: 0.3,
+            type: "spring",
+            stiffness: 300
+          })
+          animate(y, targetY, { 
+            duration: 0.3,
+            type: "spring",
+            stiffness: 300
+          })
+        }
+      }
       
       animate(scale, Math.min(Math.max(newScale, minZoom), maxZoom), { 
         duration: 0.3,
@@ -63,65 +197,327 @@ const PinchZoomInternal = React.forwardRef<HTMLDivElement, PinchZoomProps>(
         stiffness: 300
       })
       
-      if (newScale === 1) {
+      if (newScale === 1 || doubleTapBehavior === 'reset') {
         animate(x, 0, { duration: 0.3 })
         animate(y, 0, { duration: 0.3 })
       }
       
       onZoomChange?.(newScale)
-    }, [scale, x, y, minZoom, maxZoom, onZoomChange])
+      
+      if (showIndicator) {
+        setShowZoomIndicator(true)
+        setTimeout(() => setShowZoomIndicator(false), 1500)
+      }
+    }, [scale, x, y, minZoom, maxZoom, initialZoom, onZoomChange, doubleTapBehavior, showIndicator])
+    
+    // Touch gestures için çift dokunma
+    const handleTouchEnd = useCallback((event: React.TouchEvent) => {
+      const now = Date.now()
+      const timeSinceLastTap = now - lastTap
+      
+      if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
+        // Çift dokunma algılandı
+        const touch = event.changedTouches[0]
+        const fakeMouseEvent = {
+          clientX: touch.clientX,
+          clientY: touch.clientY,
+          preventDefault: () => {}
+        } as React.MouseEvent
+        
+        handleDoubleClick(fakeMouseEvent)
+      }
+      
+      setLastTap(now)
+    }, [lastTap, handleDoubleClick])
     
     const resetZoom = useCallback(() => {
-      animate(scale, initialZoom, { duration: 0.3 })
-      animate(x, 0, { duration: 0.3 })
-      animate(y, 0, { duration: 0.3 })
+      animate(scale, initialZoom, { 
+        duration: 0.3,
+        type: "spring",
+        stiffness: 300
+      })
+      animate(x, 0, { 
+        duration: 0.3,
+        type: "spring",
+        stiffness: 300
+      })
+      animate(y, 0, { 
+        duration: 0.3,
+        type: "spring",
+        stiffness: 300
+      })
       onZoomChange?.(initialZoom)
     }, [scale, x, y, initialZoom, onZoomChange])
     
+    // Programmatik zoom kontrolleri
+    const zoomIn = useCallback(() => {
+      const currentScale = scale.get()
+      const newScale = Math.min(currentScale + zoomStep, maxZoom)
+      
+      animate(scale, newScale, { 
+        duration: 0.3,
+        type: "spring",
+        stiffness: 300
+      })
+      
+      onZoomChange?.(newScale)
+      
+      if (showIndicator) {
+        setShowZoomIndicator(true)
+        setTimeout(() => setShowZoomIndicator(false), 1500)
+      }
+    }, [scale, maxZoom, zoomStep, onZoomChange, showIndicator])
+    
+    const zoomOut = useCallback(() => {
+      const currentScale = scale.get()
+      const newScale = Math.max(currentScale - zoomStep, minZoom)
+      
+      animate(scale, newScale, { 
+        duration: 0.3,
+        type: "spring",
+        stiffness: 300
+      })
+      
+      // Zoom out yapınca sınırları kontrol et
+      if (newScale < scale.get()) {
+        const constraints = calculateConstraints()
+        const currentX = x.get()
+        const currentY = y.get()
+        
+        if (currentX < constraints.left || currentX > constraints.right) {
+          animate(x, 0, { duration: 0.3 })
+        }
+        if (currentY < constraints.top || currentY > constraints.bottom) {
+          animate(y, 0, { duration: 0.3 })
+        }
+      }
+      
+      onZoomChange?.(newScale)
+      
+      if (showIndicator) {
+        setShowZoomIndicator(true)
+        setTimeout(() => setShowZoomIndicator(false), 1500)
+      }
+    }, [scale, minZoom, zoomStep, x, y, calculateConstraints, onZoomChange, showIndicator])
+    
+    const fitToScreen = useCallback(() => {
+      resetZoom()
+    }, [resetZoom])
+    
+    // Fullscreen toggle
+    const toggleFullscreen = useCallback(() => {
+      if (!containerRef.current) return
+      
+      if (!document.fullscreenElement) {
+        // Fullscreen'e gir
+        const element = containerRef.current.parentElement || containerRef.current
+        element.requestFullscreen().then(() => {
+          setIsFullscreen(true)
+        }).catch((err) => {
+          console.error("Fullscreen error:", err)
+        })
+      } else {
+        // Fullscreen'den çık
+        document.exitFullscreen().then(() => {
+          setIsFullscreen(false)
+        }).catch((err) => {
+          console.error("Exit fullscreen error:", err)
+        })
+      }
+    }, [])
+    
+    // Fullscreen değişikliklerini dinle
+    useEffect(() => {
+      const handleFullscreenChange = () => {
+        setIsFullscreen(!!document.fullscreenElement)
+      }
+      
+      document.addEventListener('fullscreenchange', handleFullscreenChange)
+      document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+      document.addEventListener('mozfullscreenchange', handleFullscreenChange)
+      document.addEventListener('MSFullscreenChange', handleFullscreenChange)
+      
+      return () => {
+        document.removeEventListener('fullscreenchange', handleFullscreenChange)
+        document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+        document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
+        document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
+      }
+    }, [])
+    
+    // Keyboard zoom shortcuts (Ctrl/Cmd + ve -)
+    useEffect(() => {
+      if (!isHovered || !wheelScaling) return
+      
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (!e.ctrlKey && !e.metaKey) return
+        
+        if (e.key === '+' || e.key === '=') {
+          e.preventDefault()
+          zoomIn()
+        } else if (e.key === '-' || e.key === '_') {
+          e.preventDefault()
+          zoomOut()
+        } else if (e.key === '0') {
+          e.preventDefault()
+          resetZoom()
+        }
+      }
+      
+      document.addEventListener('keydown', handleKeyDown)
+      
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown)
+      }
+    }, [isHovered, wheelScaling, zoomIn, zoomOut, resetZoom])
+    
+    // Drag sınırlarını güncelle
+    useEffect(() => {
+      const unsubscribe = scale.onChange(() => {
+        const constraints = calculateConstraints()
+        const currentX = x.get()
+        const currentY = y.get()
+        
+        // Sınırlar dışında mı kontrol et
+        if (boundaryConstraints) {
+          if (currentX < constraints.left || currentX > constraints.right) {
+            animate(x, Math.max(constraints.left, Math.min(constraints.right, currentX)), { duration: 0.2 })
+          }
+          if (currentY < constraints.top || currentY > constraints.bottom) {
+            animate(y, Math.max(constraints.top, Math.min(constraints.bottom, currentY)), { duration: 0.2 })
+          }
+        }
+      })
+      
+      return unsubscribe
+    }, [scale, x, y, calculateConstraints, boundaryConstraints])
+    
     return (
       <div
         ref={ref}
         className={cn(
           "relative overflow-hidden touch-none select-none",
-          "cursor-grab active:cursor-grabbing",
+          dragEnabled && "cursor-grab active:cursor-grabbing",
+          isFullscreen && "fixed inset-0 z-50 bg-background",
           className
         )}
         onWheel={handleWheel}
         onDoubleClick={handleDoubleClick}
+        onTouchEnd={handleTouchEnd}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
         {...props}
       >
-        <motion.div
-          ref={containerRef}
-          drag
-          dragElastic={0}
-          dragMomentum={false}
-          onDragStart={() => setIsDragging(true)}
-          onDragEnd={() => setIsDragging(false)}
-          style={{
-            scale: constrainedScale,
-            x,
-            y,
-          }}
-          className={cn(
-            "w-full h-full flex items-center justify-center",
-            isDragging && "cursor-grabbing",
-            contentClassName
-          )}
-        >
-          {children}
-        </motion.div>
+        <div ref={containerRef} className="w-full h-full">
+          <motion.div
+            ref={contentRef}
+            drag={dragEnabled}
+            dragElastic={0.1}
+            dragMomentum={false}
+            dragConstraints={boundaryConstraints ? calculateConstraints() : false}
+            onDragStart={() => setIsDragging(true)}
+            onDragEnd={() => setIsDragging(false)}
+            style={{
+              scale: constrainedScale,
+              x,
+              y,
+            }}
+            className={cn(
+              "w-full h-full flex items-center justify-center",
+              isDragging && "cursor-grabbing",
+              contentClassName
+            )}
+          >
+            {children}
+          </motion.div>
+        </div>
         
-        {/* Reset Button */}
-        <button
-          onClick={resetZoom}
-          className={cn(
-            "absolute bottom-4 right-4 px-3 py-1 bg-background/80 backdrop-blur-sm",
-            "border rounded-md text-sm hover:bg-background/90 transition-colors",
-            "opacity-0 hover:opacity-100 focus:opacity-100"
+        {/* Zoom Indicator */}
+        <AnimatePresence>
+          {showIndicator && showZoomIndicator && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.8 }}
+              transition={{ duration: 0.2 }}
+              className="absolute top-4 left-1/2 -translate-x-1/2 px-3 py-1.5 bg-black/80 dark:bg-white/80 text-white dark:text-black rounded-full text-sm font-medium pointer-events-none"
+            >
+              {zoomPercentage.get()}%
+            </motion.div>
           )}
-        >
-          Reset
-        </button>
+        </AnimatePresence>
+        
+        {/* Control Buttons */}
+        {showControls && (
+          <div className="absolute bottom-4 right-4 flex gap-2">
+            <button
+              onClick={zoomOut}
+              disabled={scale.get() <= minZoom}
+              className={cn(
+                "p-2 bg-background/80 backdrop-blur-sm border rounded-md",
+                "hover:bg-background/90 transition-all duration-200",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                "shadow-sm hover:shadow-md"
+              )}
+              aria-label="Zoom out"
+            >
+              <ZoomOut className="w-4 h-4" />
+            </button>
+            <button
+              onClick={zoomIn}
+              disabled={scale.get() >= maxZoom}
+              className={cn(
+                "p-2 bg-background/80 backdrop-blur-sm border rounded-md",
+                "hover:bg-background/90 transition-all duration-200",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                "shadow-sm hover:shadow-md"
+              )}
+              aria-label="Zoom in"
+            >
+              <ZoomIn className="w-4 h-4" />
+            </button>
+            <button
+              onClick={resetZoom}
+              className={cn(
+                "p-2 bg-background/80 backdrop-blur-sm border rounded-md",
+                "hover:bg-background/90 transition-all duration-200",
+                "shadow-sm hover:shadow-md"
+              )}
+              aria-label="Reset zoom"
+            >
+              <RotateCw className="w-4 h-4" />
+            </button>
+            <button
+              onClick={toggleFullscreen}
+              className={cn(
+                "p-2 bg-background/80 backdrop-blur-sm border rounded-md",
+                "hover:bg-background/90 transition-all duration-200",
+                "shadow-sm hover:shadow-md"
+              )}
+              aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+            >
+              {isFullscreen ? (
+                <Minimize2 className="w-4 h-4" />
+              ) : (
+                <Maximize2 className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+        )}
+        
+        {/* Zoom Level Info */}
+        {showControls && (
+          <div className="absolute bottom-4 left-4 px-3 py-1.5 bg-background/80 backdrop-blur-sm border rounded-md text-sm">
+            <div className="flex items-center gap-2">
+              <span>{Math.round(scale.get() * 100)}%</span>
+              {wheelScaling && !showZoomIndicator && (
+                <span className="text-xs text-muted-foreground">
+                  (Ctrl+Scroll to zoom)
+                </span>
+              )}
+            </div>
+          </div>
+        )}
       </div>
     )
   }

package/src/components/rich-text-editor/index.tsx

@@ -307,8 +307,8 @@ const ToolbarButton = ({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
-        active && "bg-gray-100 dark:bg-gray-800",
+        "p-2 rounded hover:bg-accent transition-colors",
+        active && "bg-accent",
         disabled && "opacity-50 cursor-not-allowed"
       )}
     >
@@ -767,11 +767,11 @@ export function RichTextEditor({
           '[&_li]:mb-1',
           // Table styles
           '[&_table]:border-collapse-collapse [&_table]:w-full [&_table]:mb-4',
-          '[&_table_td]:border [&_table_td]:border-gray-300 [&_table_td]:p-2',
-          '[&_table_th]:border [&_table_th]:border-gray-300 [&_table_th]:p-2 [&_table_th]:bg-gray-50 [&_table_th]:font-semibold',
+          '[&_table_td]:border [&_table_td]:border-border [&_table_td]:p-2',
+          '[&_table_th]:border [&_table_th]:border-border [&_table_th]:p-2 [&_table_th]:bg-muted [&_table_th]:font-semibold',
           // Other styles
-          '[&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-4 [&_blockquote]:italic',
-          '[&_pre]:bg-gray-100 [&_pre]:dark:bg-gray-800 [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto'
+          '[&_blockquote]:border-l-4 [&_blockquote]:border-muted-foreground/30 [&_blockquote]:pl-4 [&_blockquote]:italic',
+          '[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto'
         ),
       },
     },
@@ -1053,10 +1053,10 @@ export function RichTextEditor({
   }
 
   return (
-    <div className={cn("border rounded-lg overflow-hidden bg-white dark:bg-gray-950", className)}>
+    <div className={cn("border rounded-lg overflow-hidden bg-background", className)}>
       {/* Toolbar */}
       <TooltipProvider>
-        <div className="border-b bg-gray-50 dark:bg-gray-900 p-3">
+        <div className="border-b bg-muted/50 p-3">
           <div className="flex items-center flex-wrap gap-1">
             {/* Format Group */}
             {(features.bold || features.italic || features.underline || features.strike || features.code) && (
@@ -1469,7 +1469,7 @@ export function RichTextEditor({
                           type="checkbox"
                           id="headerRow"
                           defaultChecked
-                          className="rounded border-gray-300"
+                          className="rounded border-input"
                         />
                         <Label htmlFor="headerRow" className="text-sm font-normal">
                           Include header row
@@ -2046,7 +2046,7 @@ export function RichTextEditor({
             {/* Preview */}
             <div className="grid gap-3">
               <Label>Preview</Label>
-              <div className="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
+              <div className="p-4 bg-muted rounded-lg">
                 <table 
                   className="w-full text-sm"
                   style={{
@@ -2220,7 +2220,7 @@ export function RichTextEditor({
           <textarea
             value={sourceContent}
             onChange={(e) => setSourceContent(e.target.value)}
-            className="w-full h-full p-4 font-mono text-sm resize-none focus:outline-none bg-gray-50 dark:bg-gray-900"
+            className="w-full h-full p-4 font-mono text-sm resize-none focus:outline-none bg-muted"
             placeholder="HTML source code..."
           />
         ) : (
@@ -2277,7 +2277,7 @@ export function RichTextEditor({
       </div>
       
       {/* Statistics Bar */}
-      <div className="border-t bg-gray-50 dark:bg-gray-900 px-4 py-2">
+      <div className="border-t bg-muted/50 px-4 py-2">
         <div className="flex items-center justify-between text-xs text-muted-foreground">
           <div className="flex items-center gap-6">
             <div className="flex items-center gap-1">

package/src/components/timeline/index.tsx

@@ -207,7 +207,7 @@ const DEFAULT_COLORS: Record<TimelineEventType, string> = {
   warning: 'bg-yellow-500 border-yellow-500',
   error: 'bg-red-500 border-red-500',
   info: 'bg-blue-500 border-blue-500',
-  pending: 'bg-gray-400 border-gray-400',
+  pending: 'bg-muted-foreground/40 border-muted-foreground/40',
   milestone: 'bg-purple-500 border-purple-500',
   custom: 'bg-slate-500 border-slate-500'
 }
@@ -227,7 +227,7 @@ const TEXT_COLORS: Record<TimelineEventType, string> = {
   warning: 'text-yellow-700 dark:text-yellow-400',
   error: 'text-red-700 dark:text-red-400',
   info: 'text-blue-700 dark:text-blue-400',
-  pending: 'text-gray-700 dark:text-gray-400',
+  pending: 'text-muted-foreground',
   milestone: 'text-purple-700 dark:text-purple-400',
   custom: 'text-slate-700 dark:text-slate-400'
 }