@moontra/moonui 2.0.8 → 2.0.9

package/src/components/ui/locked-component.tsx

@@ -0,0 +1,215 @@
+// Locked Component UI
+// Pro componentlerin locked state'ini gösteren wrapper component
+
+import React, { useState } from 'react'
+import { cn } from '../../lib/utils'
+import { Button } from './button'
+import { Badge } from './badge'
+import { Lock, Crown, Zap } from 'lucide-react'
+import Link from 'next/link'
+import { useComponentAccess } from '../../use-pro-access'
+
+interface LockedComponentProps {
+  children: React.ReactNode
+  componentName: string
+  className?: string
+  showPreview?: boolean
+  previewDuration?: number // ms
+}
+
+export function LockedComponent({
+  children,
+  componentName,
+  className,
+  showPreview = true,
+  previewDuration = 2000
+}: LockedComponentProps) {
+  const [isPreviewActive, setIsPreviewActive] = useState(false)
+  const [previewTimeout, setPreviewTimeout] = useState<NodeJS.Timeout | null>(null)
+
+  const handleMouseEnter = () => {
+    if (!showPreview) return
+    
+    setIsPreviewActive(true)
+    
+    // Clear existing timeout
+    if (previewTimeout) {
+      clearTimeout(previewTimeout)
+    }
+    
+    // Set new timeout
+    const timeout = setTimeout(() => {
+      setIsPreviewActive(false)
+    }, previewDuration)
+    
+    setPreviewTimeout(timeout)
+  }
+
+  const handleMouseLeave = () => {
+    if (previewTimeout) {
+      clearTimeout(previewTimeout)
+      setPreviewTimeout(null)
+    }
+    setIsPreviewActive(false)
+  }
+
+  return (
+    <div 
+      className={cn(
+        "relative group cursor-pointer transition-all duration-300",
+        className
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Component Content */}
+      <div 
+        className={cn(
+          "transition-all duration-300",
+          !isPreviewActive && "blur-sm grayscale-[0.3] opacity-60"
+        )}
+      >
+        {children}
+      </div>
+
+      {/* Overlay */}
+      <div 
+        className={cn(
+          "absolute inset-0 bg-gradient-to-br from-amber-500/10 via-transparent to-purple-500/10",
+          "border-2 border-dashed border-amber-400/30 rounded-lg",
+          "flex items-center justify-center",
+          "transition-all duration-300",
+          isPreviewActive ? "opacity-0" : "opacity-100"
+        )}
+      >
+        <div className="text-center space-y-3 p-6">
+          {/* Pro Badge */}
+          <div className="flex justify-center">
+            <Badge 
+              variant="secondary" 
+              className="bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 px-3 py-1"
+            >
+              <Crown className="w-3 h-3 mr-1" />
+              PRO ONLY
+            </Badge>
+          </div>
+
+          {/* Lock Icon */}
+          <div className="flex justify-center">
+            <div className="p-3 rounded-full bg-amber-100 dark:bg-amber-900/30">
+              <Lock className="w-6 h-6 text-amber-600 dark:text-amber-400" />
+            </div>
+          </div>
+
+          {/* Component Name */}
+          <h3 className="font-semibold text-gray-900 dark:text-gray-100">
+            {componentName}
+          </h3>
+
+          {/* Description */}
+          <p className="text-sm text-gray-600 dark:text-gray-400 max-w-xs">
+            This premium component is available with Pro subscription
+          </p>
+
+          {/* Upgrade Button */}
+          <Link href="/pricing">
+            <Button 
+              size="sm" 
+              className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 border-0"
+            >
+              <Zap className="w-4 h-4 mr-2" />
+              Upgrade to Pro
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      {/* Preview Hint */}
+      {showPreview && !isPreviewActive && (
+        <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+          <div className="bg-black/80 text-white text-xs px-2 py-1 rounded">
+            Hover to preview
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Pro Component Wrapper - Otomatik erişim kontrolü ile
+interface ProComponentWrapperProps {
+  children: React.ReactNode
+  componentId: string
+  componentName?: string
+  className?: string
+  fallback?: React.ReactNode
+}
+
+export function ProComponentWrapper({
+  children,
+  componentId,
+  componentName,
+  className,
+  fallback
+}: ProComponentWrapperProps) {
+  const { canUse, isLocked, isLoading } = useComponentAccess(componentId)
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className={cn("animate-pulse bg-gray-200 dark:bg-gray-800 rounded-lg h-32", className)}>
+        <div className="flex items-center justify-center h-full">
+          <div className="text-sm text-gray-500">Loading...</div>
+        </div>
+      </div>
+    )
+  }
+
+  // Unlocked - show actual component
+  if (canUse) {
+    return <div className={className}>{children}</div>
+  }
+
+  // Locked - show locked state
+  if (isLocked) {
+    return (
+      <LockedComponent
+        componentName={componentName || componentId}
+        className={className}
+      >
+        {fallback || children}
+      </LockedComponent>
+    )
+  }
+
+  // Default fallback
+  return <div className={className}>{children}</div>
+}
+
+// Pro Badge Component
+export function ProBadge({ className }: { className?: string }) {
+  return (
+    <Badge 
+      variant="secondary"
+      className={cn(
+        "bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 text-xs",
+        className
+      )}
+    >
+      <Crown className="w-3 h-3 mr-1" />
+      PRO
+    </Badge>
+  )
+}
+
+// Free Badge Component  
+export function FreeBadge({ className }: { className?: string }) {
+  return (
+    <Badge 
+      variant="outline"
+      className={cn("border-green-500 text-green-600 dark:text-green-400 text-xs", className)}
+    >
+      FREE
+    </Badge>
+  )
+}

package/src/components/ui/moon-logo.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface MoonLogoProps extends React.SVGProps<SVGSVGElement> {
+  variant?: "default" | "monochrome" | "gradient"
+  showText?: boolean
+}
+
+export function MoonLogo({ 
+  className, 
+  variant = "default",
+  showText = true,
+  ...props 
+}: MoonLogoProps) {
+  const logoId = React.useId()
+  const gradientId = `moon-gradient-${logoId}`
+  
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      {/* Moon Icon */}
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="flex-shrink-0"
+        {...props}
+      >
+        {variant === "gradient" && (
+          <defs>
+            <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#3B82F6" />
+              <stop offset="50%" stopColor="#8B5CF6" />
+              <stop offset="100%" stopColor="#EC4899" />
+            </linearGradient>
+          </defs>
+        )}
+        
+        {/* Moon Circle */}
+        <circle
+          cx="16"
+          cy="16"
+          r="14"
+          fill={variant === "gradient" ? `url(#${gradientId})` : "currentColor"}
+          className={variant === "default" ? "fill-primary" : ""}
+        />
+        
+        {/* Crescent cutout */}
+        <circle
+          cx="22"
+          cy="10"
+          r="10"
+          fill="white"
+          className="dark:fill-background"
+        />
+      </svg>
+      
+      {/* Text */}
+      {showText && (
+        <span className="text-xl font-bold">
+          <span className="text-foreground">Moon</span>
+          <span className="text-primary">UI</span>
+        </span>
+      )}
+    </div>
+  )
+}
+
+export function MoonLogoIcon({ 
+  className, 
+  variant = "default",
+  ...props 
+}: Omit<MoonLogoProps, "showText">) {
+  return <MoonLogo showText={false} className={className} variant={variant} {...props} />
+}
+
+export function MoonLogoAnimated({ 
+  className, 
+  variant = "default",
+  showText = true,
+  ...props 
+}: MoonLogoProps) {
+  return (
+    <MoonLogo 
+      className={cn(
+        "transition-all duration-300 hover:scale-105",
+        className
+      )} 
+      variant={variant}
+      showText={showText}
+      {...props}
+    />
+  )
+}

package/src/components/ui/pagination.tsx

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { ButtonProps, buttonVariants } from "./button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

package/src/components/ui/popover.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Popover Bileşeni
+ * 
+ * Tıklanabilir bir öğeden açılan, tema sistemiyle tam entegre bir içerik bileşeni.
+ * Filtreler, ayarlar ve diğer içerikler için kullanışlı ve erişilebilir bir arayüz sağlar.
+ */
+
+const popoverContentVariants = cva(
+  "z-50 w-72 rounded-md border border-border bg-background p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  {
+    variants: {
+      variant: {
+        default: "",
+        destructive: "border-destructive bg-destructive/5",
+        outline: "border-border bg-transparent",
+        subtle: "border-transparent bg-muted/50",
+      },
+      size: {
+        sm: "w-48 p-3",
+        default: "w-72 p-4",
+        lg: "w-96 p-5",
+      },
+      side: {
+        top: "data-[side=top]:slide-in-from-bottom-2",
+        right: "data-[side=right]:slide-in-from-left-2",
+        bottom: "data-[side=bottom]:slide-in-from-top-2",
+        left: "data-[side=left]:slide-in-from-right-2",
+      },
+      position: {
+        pointerEventsNone: "pointer-events-none",
+        default: "",
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        full: "rounded-full",
+      },
+      shadow: {
+        none: "shadow-none",
+        sm: "shadow-sm",
+        default: "shadow-md",
+        md: "shadow-md",
+        lg: "shadow-lg",
+        xl: "shadow-xl",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      shadow: "default",
+    },
+  }
+);
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export interface PopoverContentProps 
+  extends Omit<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, 'side'>,
+    VariantProps<typeof popoverContentVariants> {
+  /**
+   * Popover'ın arka plan bulanıklığı etkin mi
+   */
+  backdrop?: boolean;
+  /**
+   * Popover'a tıklandığında kapanıp kapanmayacağı
+   */
+  closeOnInteractOutside?: boolean;
+  /**
+   * Popover açıkken arka planın karartılması
+   */
+  overlayBackdrop?: boolean;
+}
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(({
+  className,
+  variant,
+  size,
+  side,
+  position,
+  radius,
+  shadow,
+  backdrop = false,
+  closeOnInteractOutside = true,
+  overlayBackdrop = false,
+  sideOffset = 4,
+  ...props
+}, ref) => (
+  <>
+    {overlayBackdrop && (
+      <div className="fixed inset-0 z-40 bg-overlay opacity-30" />
+    )}
+    <PopoverPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      collisionPadding={8}
+      onInteractOutside={(e) => {
+        if (!closeOnInteractOutside) {
+          e.preventDefault();
+        }
+      }}
+      className={cn(
+        popoverContentVariants({ 
+          variant, 
+          size, 
+          side, 
+          position,
+          radius,
+          shadow
+        }),
+        backdrop && "backdrop-blur-md bg-opacity-80",
+        className
+      )}
+      {...props}
+    />
+  </>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+/**
+ * PopoverClose bileşeni
+ */
+const PopoverClose = PopoverPrimitive.Close;
+
+/**
+ * Popover için bölüm ayırıcı
+ */
+const PopoverSeparator = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("my-2 h-px bg-border", className)}
+    {...props}
+  />
+);
+PopoverSeparator.displayName = "PopoverSeparator";
+
+/**
+ * Popover başlık bileşeni
+ */
+const PopoverHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("-mx-4 -mt-4 mb-3 px-4 pt-4 pb-3 border-b border-border", className)}
+    {...props}
+  />
+);
+PopoverHeader.displayName = "PopoverHeader";
+
+/**
+ * Popover footer bileşeni
+ */
+const PopoverFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("-mx-4 -mb-4 mt-3 px-4 pt-3 pb-4 border-t border-border", className)}
+    {...props}
+  />
+);
+PopoverFooter.displayName = "PopoverFooter";
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverSeparator,
+  PopoverHeader,
+  PopoverFooter,
+  popoverContentVariants,
+};