@moontra/moonui 2.2.0 → 2.2.2

package/src/components/ui/index.ts

@@ -1,44 +1,357 @@
-// Core UI Components Export
-// Premium components with advanced features
-
-export * from "./accordion"
-export * from "./alert"
-export * from "./aspect-ratio"
-export * from "./avatar"
-export * from "./badge"
-export * from "./breadcrumb"
-export * from "./button"
-export * from "./card"
-export * from "./checkbox"
-export * from "./collapsible"
-export * from "./color-picker"
-export * from "./command"
-export * from "./data-table"
-export * from "./date-picker"
-export * from "./dialog"
-export * from "./draggable-list"
-export * from "./dropdown-menu"
-export * from "./file-upload"
-export * from "./gesture-drawer"
-export * from "./github-stars"
-export * from "./input"
-export * from "./label"
-export * from "./moon-logo"
-export * from "./pagination"
-export * from "./popover"
-export * from "./progress"
-export * from "./radio-group"
-export * from "./rich-text-editor"
-export * from "./select"
-export * from "./separator"
-export * from "./simple-editor"
-export * from "./skeleton"
-export * from "./slider"
-export * from "./swipeable-card"
-export * from "./switch"
-export * from "./table"
-export * from "./tabs"
-export * from "./textarea"
-export * from "./toast"
-export * from "./toggle"
-export * from "./tooltip"
+// Free Components Export - Local Files
+// This is the index for packages/moonui/src/components/ui/
+// All exports use MoonUI prefix for consistency
+
+// Accordion
+export {
+    Accordion as MoonUIAccordion,
+    AccordionItem as MoonUIAccordionItem,
+    AccordionTrigger as MoonUIAccordionTrigger,
+    AccordionContent as MoonUIAccordionContent,
+} from "./accordion";
+
+// Alert
+export {
+    Alert as MoonUIAlert,
+    AlertTitle as MoonUIAlertTitle,
+    AlertDescription as MoonUIAlertDescription,
+} from "./alert";
+
+// AspectRatio
+export { AspectRatio as MoonUIAspectRatio } from "./aspect-ratio";
+
+// Avatar
+export {
+    Avatar as MoonUIAvatar,
+    AvatarImage as MoonUIAvatarImage,
+    AvatarFallback as MoonUIAvatarFallback,
+    AvatarGroup as MoonUIAvatarGroup,
+} from "./avatar";
+
+// Badge
+export {
+    Badge as MoonUIBadge,
+    badgeVariants as moonUIBadgeVariants,
+} from "./badge";
+
+// Breadcrumb
+export {
+    Breadcrumb as MoonUIBreadcrumb,
+    BreadcrumbList as MoonUIBreadcrumbList,
+    BreadcrumbItem as MoonUIBreadcrumbItem,
+    BreadcrumbLink as MoonUIBreadcrumbLink,
+    BreadcrumbPage as MoonUIBreadcrumbPage,
+    BreadcrumbSeparator as MoonUIBreadcrumbSeparator,
+    BreadcrumbEllipsis as MoonUIBreadcrumbEllipsis,
+} from "./breadcrumb";
+
+// Button
+export {
+    Button as MoonUIButton,
+    buttonVariants as moonUIButtonVariants,
+} from "./button";
+
+// Card
+export {
+    Card as MoonUICard,
+    CardHeader as MoonUICardHeader,
+    CardFooter as MoonUICardFooter,
+    CardTitle as MoonUICardTitle,
+    CardDescription as MoonUICardDescription,
+    CardContent as MoonUICardContent,
+} from "./card";
+
+// Card Input
+export {
+    CardNumberInput as MoonUICardNumberInput,
+    CardExpiryInput as MoonUICardExpiryInput,
+    CardCVCInput as MoonUICardCVCInput,
+    CardZipInput as MoonUICardZipInput,
+} from "./card-input";
+
+// Checkbox
+export {
+    Checkbox as MoonUICheckbox,
+    CheckboxWithLabel as MoonUICheckboxWithLabel,
+    CheckboxGroup as MoonUICheckboxGroup,
+    CheckboxLabel as MoonUICheckboxLabel,
+} from "./checkbox";
+
+// Collapsible
+export {
+    Collapsible as MoonUICollapsible,
+    CollapsibleTrigger as MoonUICollapsibleTrigger,
+    CollapsibleContent as MoonUICollapsibleContent,
+} from "./collapsible";
+
+// ColorPicker
+export {
+    ColorPicker as MoonUIColorPicker,
+    SimpleColorPicker as MoonUISimpleColorPicker,
+    GradientPicker as MoonUIGradientPicker,
+} from "./color-picker";
+
+// Command
+export {
+    Command as MoonUICommand,
+    CommandDialog as MoonUICommandDialog,
+    CommandInput as MoonUICommandInput,
+    CommandList as MoonUICommandList,
+    CommandEmpty as MoonUICommandEmpty,
+    CommandGroup as MoonUICommandGroup,
+    CommandItem as MoonUICommandItem,
+    CommandShortcut as MoonUICommandShortcut,
+    CommandSeparator as MoonUICommandSeparator,
+} from "./command";
+
+// DataTable
+export { DataTable as MoonUIDataTable } from "./data-table";
+
+// DatePicker
+export {
+    DatePicker as MoonUIDatePicker,
+    DateRangePicker as MoonUIDateRangePicker,
+    DateTimePicker as MoonUIDateTimePicker,
+    MonthPicker as MoonUIMonthPicker,
+} from "./date-picker";
+
+// Dialog
+export {
+    Dialog as MoonUIDialog,
+    DialogClose as MoonUIDialogClose,
+    DialogTrigger as MoonUIDialogTrigger,
+    DialogContent as MoonUIDialogContent,
+    DialogHeader as MoonUIDialogHeader,
+    DialogFooter as MoonUIDialogFooter,
+    DialogTitle as MoonUIDialogTitle,
+    DialogDescription as MoonUIDialogDescription,
+} from "./dialog";
+
+// DraggableList
+export { DraggableList as MoonUIDraggableList } from "./draggable-list";
+
+// DropdownMenu
+export {
+    DropdownMenu as MoonUIDropdownMenu,
+    DropdownMenuTrigger as MoonUIDropdownMenuTrigger,
+    DropdownMenuContent as MoonUIDropdownMenuContent,
+    DropdownMenuItem as MoonUIDropdownMenuItem,
+    DropdownMenuCheckboxItem as MoonUIDropdownMenuCheckboxItem,
+    DropdownMenuRadioItem as MoonUIDropdownMenuRadioItem,
+    DropdownMenuLabel as MoonUIDropdownMenuLabel,
+    DropdownMenuSeparator as MoonUIDropdownMenuSeparator,
+    DropdownMenuShortcut as MoonUIDropdownMenuShortcut,
+    DropdownMenuGroup as MoonUIDropdownMenuGroup,
+    DropdownMenuPortal as MoonUIDropdownMenuPortal,
+    DropdownMenuSub as MoonUIDropdownMenuSub,
+    DropdownMenuSubContent as MoonUIDropdownMenuSubContent,
+    DropdownMenuSubTrigger as MoonUIDropdownMenuSubTrigger,
+    DropdownMenuRadioGroup as MoonUIDropdownMenuRadioGroup,
+} from "./dropdown-menu";
+
+// FileUpload
+export { FileUpload as MoonUIFileUpload } from "./file-upload";
+
+// GestureDrawer
+export { GestureDrawer as MoonUIGestureDrawer } from "./gesture-drawer";
+
+// GitHubStars
+export { GitHubStars as MoonUIGitHubStars } from "./github-stars";
+
+// Input
+export { Input as MoonUIInput } from "./input";
+
+// Label
+export { Label as MoonUILabel } from "./label";
+
+// LockedComponent
+export {
+    LockedComponent as MoonUILockedComponent,
+    ProComponentWrapper as MoonUIProComponentWrapper,
+    ProBadge as MoonUIProBadge,
+    FreeBadge as MoonUIFreeBadge,
+} from "./locked-component";
+
+// MoonLogo
+export { MoonLogo as MoonUIMoonLogo } from "./moon-logo";
+
+// Pagination
+export {
+    Pagination as MoonUIPagination,
+    PaginationContent as MoonUIPaginationContent,
+    PaginationEllipsis as MoonUIPaginationEllipsis,
+    PaginationItem as MoonUIPaginationItem,
+    PaginationLink as MoonUIPaginationLink,
+    PaginationNext as MoonUIPaginationNext,
+    PaginationPrevious as MoonUIPaginationPrevious,
+} from "./pagination";
+
+// PhoneInput
+export { PhoneInput as MoonUIPhoneInput } from "./phone-input";
+
+// Popover
+export {
+    Popover as MoonUIPopover,
+    PopoverTrigger as MoonUIPopoverTrigger,
+    PopoverContent as MoonUIPopoverContent,
+} from "./popover";
+
+// Progress
+export { Progress as MoonUIProgress } from "./progress";
+
+// RadioGroup
+export {
+    RadioGroup as MoonUIRadioGroup,
+    RadioGroupItem as MoonUIRadioGroupItem,
+    RadioLabel as MoonUIRadioLabel,
+    RadioItemWithLabel as MoonUIRadioItemWithLabel,
+} from "./radio-group";
+
+// RichTextEditor
+export { RichTextEditor as MoonUIRichTextEditor } from "./rich-text-editor";
+
+// ScrollArea
+export {
+    ScrollArea as MoonUIScrollArea,
+    ScrollBar as MoonUIScrollBar,
+} from "./scroll-area";
+
+// Select
+export {
+    Select as MoonUISelect,
+    SelectGroup as MoonUISelectGroup,
+    SelectValue as MoonUISelectValue,
+    SelectTrigger as MoonUISelectTrigger,
+    SelectContent as MoonUISelectContent,
+    SelectLabel as MoonUISelectLabel,
+    SelectItem as MoonUISelectItem,
+    SelectSeparator as MoonUISelectSeparator,
+    SelectScrollUpButton as MoonUISelectScrollUpButton,
+    SelectScrollDownButton as MoonUISelectScrollDownButton,
+} from "./select";
+
+// Separator
+export { Separator as MoonUISeparator } from "./separator";
+
+// SimpleEditor
+export { SimpleEditor as MoonUISimpleEditor } from "./simple-editor";
+
+// Skeleton
+export {
+    Skeleton as MoonUISkeleton,
+    SkeletonText as MoonUISkeletonText,
+    SkeletonAvatar as MoonUISkeletonAvatar,
+    SkeletonCard as MoonUISkeletonCard,
+    skeletonVariants as moonUISkeletonVariants,
+} from "./skeleton";
+
+// Slider
+export { Slider as MoonUISlider } from "./slider";
+
+// SwipeableCard
+export { SwipeableCard as MoonUISwipeableCard } from "./swipeable-card";
+
+// Switch
+export { Switch as MoonUISwitch } from "./switch";
+
+// Table
+export {
+    Table as MoonUITable,
+    TableHeader as MoonUITableHeader,
+    TableBody as MoonUITableBody,
+    TableFooter as MoonUITableFooter,
+    TableHead as MoonUITableHead,
+    TableRow as MoonUITableRow,
+    TableCell as MoonUITableCell,
+    TableCaption as MoonUITableCaption,
+} from "./table";
+
+// Tabs
+export {
+    Tabs as MoonUITabs,
+    TabsList as MoonUITabsList,
+    TabsTrigger as MoonUITabsTrigger,
+    TabsContent as MoonUITabsContent,
+} from "./tabs";
+
+// TagsInput
+export { TagsInput as MoonUITagsInput } from "./tags-input";
+
+// Textarea
+export { Textarea as MoonUITextarea } from "./textarea";
+
+// Toast
+export {
+    Toast as MoonUIToast,
+    ToastAction as MoonUIToastAction,
+    ToastClose as MoonUIToastClose,
+    ToastDescription as MoonUIToastDescription,
+    ToastProvider as MoonUIToastProvider,
+    ToastTitle as MoonUIToastTitle,
+    ToastViewport as MoonUIToastViewport,
+    Toaster as MoonUIToaster,
+    toast,
+    useToast,
+} from "./toast";
+
+// Toggle
+export {
+    Toggle as MoonUIToggle,
+    toggleVariants as moonUIToggleVariants,
+} from "./toggle";
+
+// Tooltip
+export {
+    Tooltip as MoonUITooltip,
+    TooltipTrigger as MoonUITooltipTrigger,
+    TooltipContent as MoonUITooltipContent,
+    TooltipProvider as MoonUITooltipProvider,
+} from "./tooltip";
+
+// Also export without MoonUI prefix for backward compatibility
+export * from "./accordion";
+export * from "./alert";
+export * from "./aspect-ratio";
+export * from "./avatar";
+export * from "./badge";
+export * from "./breadcrumb";
+export * from "./button";
+export * from "./card";
+export * from "./card-input";
+export * from "./checkbox";
+export * from "./collapsible";
+export * from "./color-picker";
+export * from "./command";
+export * from "./data-table";
+export * from "./date-picker";
+export * from "./dialog";
+export * from "./draggable-list";
+export * from "./dropdown-menu";
+export * from "./file-upload";
+export * from "./gesture-drawer";
+export * from "./github-stars";
+export * from "./input";
+export * from "./label";
+export * from "./locked-component";
+export * from "./moon-logo";
+export * from "./pagination";
+export * from "./phone-input";
+export * from "./popover";
+export * from "./progress";
+export * from "./radio-group";
+export * from "./rich-text-editor";
+export * from "./scroll-area";
+export * from "./select";
+export * from "./separator";
+export * from "./simple-editor";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./swipeable-card";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./tags-input";
+export * from "./textarea";
+export * from "./toast";
+export * from "./toggle";
+export * from "./tooltip";

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

@@ -1,3 +1,5 @@
+"use client"
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { Input } from './input';
 import { Label } from './label';

package/src/components/ui/input.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";

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

@@ -0,0 +1,222 @@
+"use client"
+
+// 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'
+
+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 */}
+          <Button 
+            size="sm" 
+            className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 border-0"
+            onClick={() => {
+              if (typeof window !== 'undefined') {
+                window.location.href = '/pricing'
+              }
+            }}
+          >
+            <Zap className="w-4 h-4 mr-2" />
+            Upgrade to Pro
+          </Button>
+        </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) {
+  // For now, always show the component (no access control)
+  // This can be updated later when proper access control is implemented
+  const canUse = true
+  const isLocked = false
+  const isLoading = false
+
+  // 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/pagination.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 import { cn } from "../../lib/utils"