@moontra/moonui-pro 2.4.6 → 2.5.1

package/src/components/sidebar/index.tsx

@@ -0,0 +1,579 @@
+"use client"
+
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { motion, AnimatePresence, useMotionValue, useSpring } from 'framer-motion'
+import { cn } from '../../lib/utils'
+import { Button } from '../ui/button'
+import { ScrollArea } from '../ui/scroll-area'
+import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'
+import { Badge } from '../ui/badge'
+import { Separator } from '../ui/separator'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
+import {
+  Menu,
+  X,
+  ChevronRight,
+  ChevronLeft,
+  ChevronDown,
+  Home,
+  Search,
+  Settings,
+  HelpCircle,
+  Moon,
+  Sun,
+  Monitor,
+  MoreHorizontal,
+  Pin,
+  PinOff,
+  Sparkles,
+  Command
+} from 'lucide-react'
+import { Input } from '../ui/input'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+
+export interface SidebarItem {
+  id: string
+  title: string
+  href?: string
+  icon?: React.ReactNode
+  badge?: string | number
+  badgeVariant?: 'secondary' | 'destructive' | 'outline'
+  disabled?: boolean
+  items?: SidebarItem[]
+  action?: () => void
+  tooltip?: string
+}
+
+export interface SidebarSection {
+  id: string
+  title?: string
+  items: SidebarItem[]
+  collapsible?: boolean
+  defaultExpanded?: boolean
+  showDivider?: boolean
+}
+
+export interface SidebarConfig {
+  sections: SidebarSection[]
+  footer?: SidebarSection
+  showSearch?: boolean
+  searchPlaceholder?: string
+  onSearchChange?: (value: string) => void
+  showThemeToggle?: boolean
+  theme?: 'light' | 'dark' | 'system'
+  onThemeChange?: (theme: 'light' | 'dark' | 'system') => void
+  branding?: {
+    logo?: React.ReactNode
+    title?: string
+    href?: string
+  }
+  collapsible?: boolean
+  defaultCollapsed?: boolean
+  floatingActionButton?: boolean
+  glassmorphism?: boolean
+  animatedBackground?: boolean
+  keyboardShortcuts?: boolean
+  persistState?: boolean
+  onStateChange?: (state: SidebarState) => void
+  customStyles?: {
+    background?: string
+    border?: string
+    text?: string
+    hover?: string
+    active?: string
+  }
+}
+
+export interface SidebarState {
+  collapsed: boolean
+  expandedSections: string[]
+  searchQuery: string
+  pinnedItems: string[]
+  recentItems: string[]
+}
+
+interface SidebarProps extends SidebarConfig {
+  className?: string
+  activePath?: string
+  onNavigate?: (href: string) => void
+}
+
+export function Sidebar({
+  sections,
+  footer,
+  showSearch = true,
+  searchPlaceholder = "Search...",
+  onSearchChange,
+  showThemeToggle = false,
+  theme = 'system',
+  onThemeChange,
+  branding,
+  collapsible = true,
+  defaultCollapsed = false,
+  floatingActionButton = true,
+  glassmorphism = false,
+  animatedBackground = false,
+  keyboardShortcuts = true,
+  persistState = true,
+  onStateChange,
+  customStyles,
+  className,
+  activePath,
+  onNavigate
+}: SidebarProps) {
+  const [isMobile, setIsMobile] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+  const [collapsed, setCollapsed] = useState(defaultCollapsed)
+  const [expandedSections, setExpandedSections] = useState<string[]>([])
+  const [searchQuery, setSearchQuery] = useState('')
+  const [pinnedItems, setPinnedItems] = useState<string[]>([])
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const mouseX = useMotionValue(0)
+  const mouseY = useMotionValue(0)
+  const springX = useSpring(mouseX, { stiffness: 300, damping: 30 })
+  const springY = useSpring(mouseY, { stiffness: 300, damping: 30 })
+
+  // Load persisted state
+  useEffect(() => {
+    if (persistState && typeof window !== 'undefined') {
+      const savedState = localStorage.getItem('moonui-sidebar-state')
+      if (savedState) {
+        const state = JSON.parse(savedState) as SidebarState
+        setCollapsed(state.collapsed)
+        setExpandedSections(state.expandedSections)
+        setPinnedItems(state.pinnedItems || [])
+      }
+    }
+  }, [persistState])
+
+  // Save state changes
+  useEffect(() => {
+    if (persistState && typeof window !== 'undefined') {
+      const state: SidebarState = {
+        collapsed,
+        expandedSections,
+        searchQuery,
+        pinnedItems,
+        recentItems: []
+      }
+      localStorage.setItem('moonui-sidebar-state', JSON.stringify(state))
+      onStateChange?.(state)
+    }
+  }, [collapsed, expandedSections, searchQuery, pinnedItems, persistState, onStateChange])
+
+  // Check mobile
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+    
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+
+  // Initialize expanded sections
+  useEffect(() => {
+    const sectionsToExpand = sections
+      .filter(section => section.defaultExpanded !== false)
+      .map(section => section.id)
+    setExpandedSections(sectionsToExpand)
+  }, [sections])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    if (!keyboardShortcuts) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Cmd/Ctrl + K for search
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        searchInputRef.current?.focus()
+      }
+      
+      // Cmd/Ctrl + B to toggle sidebar
+      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+        e.preventDefault()
+        if (isMobile) {
+          setIsOpen(!isOpen)
+        } else {
+          setCollapsed(!collapsed)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [keyboardShortcuts, isMobile, isOpen, collapsed])
+
+  // Mouse tracking for animated background
+  useEffect(() => {
+    if (!animatedBackground) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = document.querySelector('.sidebar-container')?.getBoundingClientRect()
+      if (rect) {
+        mouseX.set(e.clientX - rect.left)
+        mouseY.set(e.clientY - rect.top)
+      }
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    return () => document.removeEventListener('mousemove', handleMouseMove)
+  }, [animatedBackground, mouseX, mouseY])
+
+  const toggleSection = (sectionId: string) => {
+    setExpandedSections(prev =>
+      prev.includes(sectionId)
+        ? prev.filter(id => id !== sectionId)
+        : [...prev, sectionId]
+    )
+  }
+
+  const togglePinItem = (itemId: string) => {
+    setPinnedItems(prev =>
+      prev.includes(itemId)
+        ? prev.filter(id => id !== itemId)
+        : [...prev, itemId]
+    )
+  }
+
+  const handleItemClick = (item: SidebarItem) => {
+    if (item.action) {
+      item.action()
+    } else if (item.href && onNavigate) {
+      onNavigate(item.href)
+      if (isMobile) {
+        setIsOpen(false)
+      }
+    }
+  }
+
+  const filterItems = (items: SidebarItem[], query: string): SidebarItem[] => {
+    if (!query) return items
+    
+    return items.filter(item => {
+      const matchesTitle = item.title.toLowerCase().includes(query.toLowerCase())
+      const hasMatchingChildren = item.items?.some(child =>
+        child.title.toLowerCase().includes(query.toLowerCase())
+      )
+      return matchesTitle || hasMatchingChildren
+    })
+  }
+
+  const renderItem = (item: SidebarItem, depth = 0) => {
+    const isActive = item.href === activePath
+    const isPinned = pinnedItems.includes(item.id)
+    const hasChildren = item.items && item.items.length > 0
+    const isExpanded = expandedSections.includes(item.id)
+
+    const ItemWrapper = item.tooltip && !collapsed ? TooltipTrigger : React.Fragment
+
+    const itemContent = (
+      <button
+        onClick={() => {
+          if (hasChildren) {
+            toggleSection(item.id)
+          } else {
+            handleItemClick(item)
+          }
+        }}
+        className={cn(
+          "w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all",
+          "hover:bg-accent hover:text-accent-foreground",
+          isActive && "bg-primary/10 text-primary font-medium",
+          item.disabled && "opacity-50 cursor-not-allowed",
+          depth > 0 && "ml-6 text-xs",
+          collapsed && depth === 0 && "justify-center px-2",
+          customStyles?.hover
+        )}
+        disabled={item.disabled}
+      >
+        {item.icon && (
+          <span className={cn(
+            "flex-shrink-0",
+            collapsed && depth === 0 && "mx-auto"
+          )}>
+            {item.icon}
+          </span>
+        )}
+        
+        {(!collapsed || depth > 0) && (
+          <>
+            <span className="flex-1 text-left truncate">{item.title}</span>
+            
+            {item.badge && (
+              <Badge 
+                variant={item.badgeVariant || 'secondary'} 
+                className="ml-auto flex-shrink-0"
+              >
+                {item.badge}
+              </Badge>
+            )}
+            
+            {hasChildren && depth === 0 && (
+              <ChevronDown
+                className={cn(
+                  "h-4 w-4 flex-shrink-0 transition-transform",
+                  isExpanded && "rotate-180"
+                )}
+              />
+            )}
+            
+            {isPinned && (
+              <Pin className="h-3 w-3 flex-shrink-0" />
+            )}
+          </>
+        )}
+      </button>
+    )
+
+    return (
+      <div key={item.id}>
+        {item.tooltip && !collapsed ? (
+          <TooltipProvider>
+            <Tooltip>
+              <ItemWrapper>
+                {itemContent}
+              </ItemWrapper>
+              <TooltipContent side="right">
+                <p>{item.tooltip}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        ) : (
+          itemContent
+        )}
+        
+        {hasChildren && !collapsed && (
+          <AnimatePresence>
+            {isExpanded && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="overflow-hidden"
+              >
+                <div className="pt-1 space-y-1">
+                  {filterItems(item.items!, searchQuery).map(child =>
+                    renderItem(child, depth + 1)
+                  )}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        )}
+      </div>
+    )
+  }
+
+  const SidebarContent = () => (
+    <>
+      {/* Header */}
+      <div className={cn(
+        "flex items-center gap-3 p-4 border-b",
+        collapsed && !isMobile && "justify-center px-2"
+      )}>
+        {branding && (
+          <>
+            {branding.logo}
+            {(!collapsed || isMobile) && branding.title && (
+              <span className="font-semibold text-lg">{branding.title}</span>
+            )}
+          </>
+        )}
+        
+        {isMobile && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="ml-auto h-8 w-8 p-0"
+            onClick={() => setIsOpen(false)}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+        
+        {!isMobile && collapsible && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              "h-8 w-8 p-0",
+              !collapsed && "ml-auto"
+            )}
+            onClick={() => setCollapsed(!collapsed)}
+          >
+            {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+          </Button>
+        )}
+      </div>
+
+      {/* Search */}
+      {showSearch && (!collapsed || isMobile) && (
+        <div className="p-4 border-b">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              ref={searchInputRef}
+              type="search"
+              placeholder={searchPlaceholder}
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value)
+                onSearchChange?.(e.target.value)
+              }}
+              className="pl-9 pr-9"
+            />
+            {keyboardShortcuts && (
+              <kbd className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex">
+                <span className="text-xs">⌘</span>K
+              </kbd>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Pinned Items */}
+      {pinnedItems.length > 0 && (!collapsed || isMobile) && (
+        <div className="p-4 border-b">
+          <h4 className="text-xs font-medium text-muted-foreground mb-2">Pinned</h4>
+          <div className="space-y-1">
+            {sections.flatMap(section =>
+              section.items.filter(item => pinnedItems.includes(item.id))
+            ).map(item => renderItem(item))}
+          </div>
+        </div>
+      )}
+
+      {/* Main Content */}
+      <ScrollArea className="flex-1">
+        <div className="p-4 space-y-6">
+          {sections.map((section, index) => {
+            const filteredItems = filterItems(section.items, searchQuery)
+            if (filteredItems.length === 0) return null
+
+            return (
+              <div key={section.id}>
+                {section.title && (!collapsed || isMobile) && (
+                  <h4 className="text-xs font-medium text-muted-foreground mb-2">
+                    {section.title}
+                  </h4>
+                )}
+                <div className="space-y-1">
+                  {filteredItems.map(item => renderItem(item))}
+                </div>
+                {section.showDivider && index < sections.length - 1 && (
+                  <Separator className="mt-4" />
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </ScrollArea>
+
+      {/* Footer */}
+      {footer && (
+        <div className="border-t p-4">
+          <div className="space-y-1">
+            {footer.items.map(item => renderItem(item))}
+          </div>
+          
+          {showThemeToggle && (!collapsed || isMobile) && (
+            <div className="mt-3 flex items-center justify-between">
+              <span className="text-xs text-muted-foreground">Theme</span>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-7 px-2">
+                    {theme === 'light' && <Sun className="h-3 w-3" />}
+                    {theme === 'dark' && <Moon className="h-3 w-3" />}
+                    {theme === 'system' && <Monitor className="h-3 w-3" />}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => onThemeChange?.('light')}>
+                    <Sun className="mr-2 h-4 w-4" />
+                    Light
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => onThemeChange?.('dark')}>
+                    <Moon className="mr-2 h-4 w-4" />
+                    Dark
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => onThemeChange?.('system')}>
+                    <Monitor className="mr-2 h-4 w-4" />
+                    System
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  )
+
+  const sidebarClasses = cn(
+    "flex h-screen flex-col bg-background border-r sticky top-0",
+    glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
+    collapsed && !isMobile && "w-16",
+    !collapsed && !isMobile && "w-64",
+    customStyles?.background,
+    customStyles?.border,
+    className
+  )
+
+  if (isMobile) {
+    return (
+      <>
+        {floatingActionButton && (
+          <Button
+            onClick={() => setIsOpen(true)}
+            className="fixed bottom-4 left-4 z-40 h-12 w-12 rounded-full shadow-lg md:hidden"
+            size="icon"
+          >
+            <Menu className="h-5 w-5" />
+          </Button>
+        )}
+        
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetContent side="left" className="w-80 p-0">
+            <div className={cn(sidebarClasses, "sidebar-container")}>
+              {animatedBackground && (
+                <motion.div
+                  className="absolute inset-0 opacity-30"
+                  style={{
+                    background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`,
+                  }}
+                />
+              )}
+              <SidebarContent />
+            </div>
+          </SheetContent>
+        </Sheet>
+      </>
+    )
+  }
+
+  return (
+    <aside className={cn(sidebarClasses, "sidebar-container hidden md:flex")}>
+      {animatedBackground && (
+        <motion.div
+          className="absolute inset-0 opacity-30"
+          style={{
+            background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`,
+          }}
+        />
+      )}
+      <SidebarContent />
+    </aside>
+  )
+}
+
+export default Sidebar

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",
+        head_row: "grid grid-cols-7",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 h-9 font-normal text-[0.8rem] flex items-center justify-center",
+        row: "grid grid-cols-7 gap-1 mt-1",
+        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