@moontra/moonui-pro 2.5.14 → 2.6.1

package/src/components/sidebar/index.tsx

@@ -9,6 +9,8 @@ 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 { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
 import {
   Menu,
   X,
@@ -151,6 +153,13 @@ export interface SidebarConfig {
   collapsible?: boolean
   defaultCollapsed?: boolean
   floatingActionButton?: boolean
+  floatingActionButtonPosition?: {
+    bottom?: string
+    left?: string
+    right?: string
+    top?: string
+  }
+  floatingActionButtonClassName?: string
   glassmorphism?: boolean
   animatedBackground?: boolean
   keyboardShortcuts?: boolean
@@ -194,6 +203,8 @@ export function Sidebar({
   collapsible = true,
   defaultCollapsed = false,
   floatingActionButton = true,
+  floatingActionButtonPosition = { bottom: '1rem', left: '1rem' },
+  floatingActionButtonClassName,
   glassmorphism = false,
   animatedBackground = false,
   keyboardShortcuts = true,
@@ -376,11 +387,136 @@ export function Sidebar({
     })).filter(section => section.filteredItems.length > 0)
   }, [sections, currentSearchQuery, filterItems])
 
+  // Collapsed menü için hover content renderer
+  const renderCollapsedHoverContent = useCallback((item: SidebarItem) => {
+    const hasChildren = item.items && item.items.length > 0
+    
+    if (!hasChildren && !item.title) return null
+    
+    return (
+      <div className={cn(
+        "min-w-[200px] p-2",
+        glassmorphism && "bg-background/95 backdrop-blur-sm"
+      )}>
+        <div className="font-medium px-2 py-1 text-sm">{item.title}</div>
+        {hasChildren && (
+          <div className="mt-1 space-y-0.5">
+            {item.items?.map(childItem => {
+              const isChildActive = childItem.href === activePath
+              const hasGrandChildren = childItem.items && childItem.items.length > 0
+              
+              return (
+                <div key={childItem.id} className="relative">
+                  {hasGrandChildren ? (
+                    <HoverCard openDelay={200} closeDelay={100}>
+                      <HoverCardTrigger asChild>
+                        <button
+                          onClick={() => handleItemClick(childItem)}
+                          disabled={childItem.disabled}
+                          className={cn(
+                            "w-full flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+                            "hover:bg-accent hover:text-accent-foreground",
+                            isChildActive && "bg-primary/10 text-primary font-medium",
+                            childItem.disabled && "opacity-50 cursor-not-allowed"
+                          )}
+                        >
+                          <div className="flex items-center gap-2">
+                            {childItem.icon && (
+                              <span className="flex-shrink-0">
+                                {childItem.icon}
+                              </span>
+                            )}
+                            <span className="truncate">{childItem.title}</span>
+                          </div>
+                          <ChevronRight className="h-3 w-3 flex-shrink-0" />
+                        </button>
+                      </HoverCardTrigger>
+                      <HoverCardContent 
+                        side="right" 
+                        align="start"
+                        sideOffset={10}
+                        className={cn(
+                          "p-2",
+                          glassmorphism && "bg-background/95 backdrop-blur-sm"
+                        )}
+                      >
+                        <div className="space-y-0.5">
+                          {childItem.items?.map(grandChild => {
+                            const isGrandChildActive = grandChild.href === activePath
+                            return (
+                              <button
+                                key={grandChild.id}
+                                onClick={() => handleItemClick(grandChild)}
+                                disabled={grandChild.disabled}
+                                className={cn(
+                                  "w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+                                  "hover:bg-accent hover:text-accent-foreground",
+                                  isGrandChildActive && "bg-primary/10 text-primary font-medium",
+                                  grandChild.disabled && "opacity-50 cursor-not-allowed"
+                                )}
+                              >
+                                {grandChild.icon && (
+                                  <span className="flex-shrink-0">
+                                    {grandChild.icon}
+                                  </span>
+                                )}
+                                <span className="truncate">{grandChild.title}</span>
+                                {grandChild.badge && (
+                                  <Badge 
+                                    variant={grandChild.badgeVariant || 'secondary'} 
+                                    className="ml-auto flex-shrink-0"
+                                  >
+                                    {grandChild.badge}
+                                  </Badge>
+                                )}
+                              </button>
+                            )
+                          })}
+                        </div>
+                      </HoverCardContent>
+                    </HoverCard>
+                  ) : (
+                    <button
+                      onClick={() => handleItemClick(childItem)}
+                      disabled={childItem.disabled}
+                      className={cn(
+                        "w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+                        "hover:bg-accent hover:text-accent-foreground",
+                        isChildActive && "bg-primary/10 text-primary font-medium",
+                        childItem.disabled && "opacity-50 cursor-not-allowed"
+                      )}
+                    >
+                      {childItem.icon && (
+                        <span className="flex-shrink-0">
+                          {childItem.icon}
+                        </span>
+                      )}
+                      <span className="truncate">{childItem.title}</span>
+                      {childItem.badge && (
+                        <Badge 
+                          variant={childItem.badgeVariant || 'secondary'} 
+                          className="ml-auto flex-shrink-0"
+                        >
+                          {childItem.badge}
+                        </Badge>
+                      )}
+                    </button>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    )
+  }, [activePath, glassmorphism, handleItemClick])
+
   const renderItem = useCallback((item: SidebarItem, depth = 0, filteredChildren?: SidebarItem[]) => {
     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 shouldShowHoverMenu = collapsed && !isMobile && depth === 0 && (hasChildren || item.title)
 
     const ItemWrapper = item.tooltip && !collapsed ? TooltipTrigger : React.Fragment
 
@@ -443,6 +579,38 @@ export function Sidebar({
       </button>
     )
 
+    // Collapsed durumda hover menü göster
+    if (shouldShowHoverMenu) {
+      return (
+        <div key={item.id}>
+          <HoverCard openDelay={200} closeDelay={100}>
+            <HoverCardTrigger asChild>
+              {itemContent}
+            </HoverCardTrigger>
+            <HoverCardContent 
+              side="right" 
+              align="start"
+              sideOffset={10}
+              className={cn(
+                "p-0 w-auto",
+                glassmorphism && "bg-background/95 backdrop-blur-sm",
+                "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+              )}
+            >
+              <motion.div
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -10 }}
+                transition={{ duration: 0.15 }}
+              >
+                {renderCollapsedHoverContent(item)}
+              </motion.div>
+            </HoverCardContent>
+          </HoverCard>
+        </div>
+      )
+    }
+
     return (
       <div key={item.id}>
         {item.tooltip && !collapsed ? (
@@ -481,7 +649,7 @@ export function Sidebar({
         )}
       </div>
     )
-  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection])
+  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection, isMobile, glassmorphism, renderCollapsedHoverContent])
 
 
   
@@ -644,8 +812,17 @@ export function Sidebar({
         {floatingActionButton && (
           <Button
             onClick={() => setIsOpen(true)}
-            className="fixed bottom-4 left-4 z-40 h-12 w-12 rounded-full shadow-lg md:hidden"
+            className={cn(
+              "fixed z-40 h-12 w-12 rounded-full shadow-lg md:hidden",
+              floatingActionButtonClassName
+            )}
             size="icon"
+            style={{
+              bottom: floatingActionButtonPosition?.bottom,
+              left: floatingActionButtonPosition?.left,
+              right: floatingActionButtonPosition?.right,
+              top: floatingActionButtonPosition?.top
+            }}
           >
             <Menu className="h-5 w-5" />
           </Button>

package/src/components/ui/calendar.tsx

@@ -1,65 +1,387 @@
-"use client"
+"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"
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
+import { 
+  format, 
+  startOfMonth, 
+  endOfMonth, 
+  eachDayOfInterval, 
+  getDay, 
+  isSameMonth, 
+  isSameDay,
+  isToday,
+  addMonths,
+  subMonths,
+  startOfWeek,
+  endOfWeek
+} from "date-fns";
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export interface CalendarProps {
+  mode?: "single" | "range" | "multiple";
+  selected?: Date | Date[] | { from?: Date; to?: Date } | undefined;
+  onSelect?: (date: Date | Date[] | { from?: Date; to?: Date } | undefined) => void;
+  disabled?: (date: Date) => boolean;
+  showOutsideDays?: boolean;
+  className?: string;
+  classNames?: Record<string, string>;
+  numberOfMonths?: number;
+  defaultMonth?: Date;
+  initialFocus?: boolean;
+}
 
 function Calendar({
+  mode = "single",
+  selected,
+  onSelect,
+  disabled,
+  showOutsideDays = false,
   className,
   classNames,
-  showOutsideDays = true,
+  numberOfMonths = 1,
+  defaultMonth,
   ...props
 }: CalendarProps) {
+  const getInitialMonth = () => {
+    if (defaultMonth) return defaultMonth;
+    if (mode === "range" && selected) {
+      const range = selected as { from?: Date; to?: Date };
+      if (range.from && range.from instanceof Date) return range.from;
+    }
+    if (selected && selected instanceof Date) return selected;
+    return new Date();
+  };
+
+  const [currentMonth, setCurrentMonth] = React.useState(getInitialMonth());
+
+  const weekDays = [
+    { short: "S", full: "Sunday" },
+    { short: "M", full: "Monday" },
+    { short: "T", full: "Tuesday" },
+    { short: "W", full: "Wednesday" },
+    { short: "T", full: "Thursday" },
+    { short: "F", full: "Friday" },
+    { short: "S", full: "Saturday" }
+  ];
+
+  const handlePreviousMonth = () => {
+    setCurrentMonth(subMonths(currentMonth, 1));
+  };
+
+  const handleNextMonth = () => {
+    setCurrentMonth(addMonths(currentMonth, 1));
+  };
+
+  const handleDateClick = (date: Date) => {
+    if (disabled?.(date)) return;
+
+    if (mode === "single") {
+      onSelect?.(date);
+    } else if (mode === "range") {
+      const currentSelection = selected as { from?: Date; to?: Date } | undefined;
+      if (!currentSelection?.from || (currentSelection.from && currentSelection.to)) {
+        onSelect?.({ from: date, to: undefined });
+      } else {
+        if (date < currentSelection.from) {
+          onSelect?.({ from: date, to: currentSelection.from });
+        } else {
+          onSelect?.({ from: currentSelection.from, to: date });
+        }
+      }
+    }
+  };
+
+  const isDateSelected = (date: Date) => {
+    if (!selected) return false;
+    
+    if (mode === "single") {
+      return isSameDay(date, selected as Date);
+    } else if (mode === "range") {
+      const range = selected as { from?: Date; to?: Date };
+      if (range.from && range.to) {
+        return date >= range.from && date <= range.to;
+      }
+      return range.from ? isSameDay(date, range.from) : false;
+    }
+    return false;
+  };
+
+  const isRangeStart = (date: Date) => {
+    if (mode !== "range" || !selected) return false;
+    const range = selected as { from?: Date; to?: Date };
+    return range.from ? isSameDay(date, range.from) : false;
+  };
+
+  const isRangeEnd = (date: Date) => {
+    if (mode !== "range" || !selected) return false;
+    const range = selected as { from?: Date; to?: Date };
+    return range.to ? isSameDay(date, range.to) : false;
+  };
+
+  const isRangeMiddle = (date: Date) => {
+    if (mode !== "range" || !selected) return false;
+    const range = selected as { from?: Date; to?: Date };
+    if (!range.from || !range.to) return false;
+    return date > range.from && date < range.to;
+  };
+
+  const getDaysInMonth = () => {
+    const start = startOfMonth(currentMonth);
+    const end = endOfMonth(currentMonth);
+    const days = eachDayOfInterval({ start, end });
+    
+    // Get days from previous month to fill the first week
+    const firstDayOfWeek = getDay(start);
+    const previousMonthDays = [];
+    if (firstDayOfWeek > 0 && showOutsideDays) {
+      const previousMonthStart = startOfWeek(start);
+      const previousMonthEnd = new Date(start);
+      previousMonthEnd.setDate(previousMonthEnd.getDate() - 1);
+      previousMonthDays.push(...eachDayOfInterval({ 
+        start: previousMonthStart, 
+        end: previousMonthEnd 
+      }));
+    }
+    
+    // Get days from next month to fill the last week
+    const lastDayOfWeek = getDay(end);
+    const nextMonthDays = [];
+    if (lastDayOfWeek < 6 && showOutsideDays) {
+      const nextMonthStart = new Date(end);
+      nextMonthStart.setDate(nextMonthStart.getDate() + 1);
+      const nextMonthEnd = endOfWeek(end);
+      nextMonthDays.push(...eachDayOfInterval({ 
+        start: nextMonthStart, 
+        end: nextMonthEnd 
+      }));
+    }
+    
+    // Add empty cells for the first week if not showing outside days
+    const emptyCells = [];
+    if (!showOutsideDays && firstDayOfWeek > 0) {
+      for (let i = 0; i < firstDayOfWeek; i++) {
+        emptyCells.push(null);
+      }
+    }
+    
+    return [...previousMonthDays, ...emptyCells, ...days, ...nextMonthDays];
+  };
+
+  const renderCalendar = (monthOffset: number = 0) => {
+    const displayMonth = addMonths(currentMonth, monthOffset);
+    const start = startOfMonth(displayMonth);
+    const end = endOfMonth(displayMonth);
+    const days = eachDayOfInterval({ start, end });
+    
+    // Get days from previous month to fill the first week
+    const firstDayOfWeek = getDay(start);
+    const previousMonthDays = [];
+    if (firstDayOfWeek > 0 && showOutsideDays) {
+      const previousMonthStart = startOfWeek(start);
+      const previousMonthEnd = new Date(start);
+      previousMonthEnd.setDate(previousMonthEnd.getDate() - 1);
+      previousMonthDays.push(...eachDayOfInterval({ 
+        start: previousMonthStart, 
+        end: previousMonthEnd 
+      }));
+    }
+    
+    // Get days from next month to fill the last week
+    const lastDayOfWeek = getDay(end);
+    const nextMonthDays = [];
+    if (lastDayOfWeek < 6 && showOutsideDays) {
+      const nextMonthStart = new Date(end);
+      nextMonthStart.setDate(nextMonthStart.getDate() + 1);
+      const nextMonthEnd = endOfWeek(end);
+      nextMonthDays.push(...eachDayOfInterval({ 
+        start: nextMonthStart, 
+        end: nextMonthEnd 
+      }));
+    }
+    
+    // Add empty cells for the first week if not showing outside days
+    const emptyCells = [];
+    if (!showOutsideDays && firstDayOfWeek > 0) {
+      for (let i = 0; i < firstDayOfWeek; i++) {
+        emptyCells.push(null);
+      }
+    }
+    
+    const allDays = [...previousMonthDays, ...emptyCells, ...days, ...nextMonthDays];
+
+    return (
+      <div className="moonui-calendar-month flex-1 min-w-0">
+        {/* Month header for multi-month display */}
+        {numberOfMonths > 1 && (
+          <div className="flex items-center justify-center pb-2">
+            <h3 className="text-xs sm:text-sm font-medium">
+              {displayMonth instanceof Date && !isNaN(displayMonth.getTime()) 
+                ? format(displayMonth, "MMMM yyyy")
+                : ""}
+            </h3>
+          </div>
+        )}
+
+        {/* Week days header for each month */}
+        <div className="grid grid-cols-7 gap-0 mb-1">
+          {weekDays.map((day, index) => (
+            <div
+              key={`weekday-${monthOffset}-${index}`}
+              className="text-muted-foreground text-[0.65rem] sm:text-[0.75rem] font-normal h-6 sm:h-7 w-full flex items-center justify-center"
+              title={day.full}
+            >
+              {day.short}
+            </div>
+          ))}
+        </div>
+
+        {/* Days grid */}
+        <div className="grid grid-cols-7 gap-0">
+          {allDays.map((date, index) => {
+            if (!date) {
+              return <div key={`empty-${monthOffset}-${index}`} className="h-8 sm:h-9 w-full" />;
+            }
+
+            const isOutsideMonth = !isSameMonth(date, displayMonth);
+            const isDisabled = disabled?.(date) || false;
+            const isSelected = isDateSelected(date);
+            const isTodayDate = isToday(date);
+            const rangeStart = isRangeStart(date);
+            const rangeEnd = isRangeEnd(date);
+            const rangeMiddle = isRangeMiddle(date);
+
+            return (
+              <button
+                key={date.toISOString()}
+                onClick={() => handleDateClick(date)}
+                disabled={isDisabled}
+                className={cn(
+                  "h-8 sm:h-9 w-full p-0 font-normal",
+                  "inline-flex items-center justify-center rounded-md",
+                  "hover:bg-muted transition-colors text-xs sm:text-sm",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  isOutsideMonth && "text-muted-foreground/50",
+                  isDisabled && "text-muted-foreground/30 cursor-not-allowed hover:bg-transparent",
+                  isSelected && !rangeMiddle && "bg-primary text-primary-foreground font-medium hover:bg-primary hover:text-primary-foreground",
+                  isTodayDate && !isSelected && "bg-accent text-accent-foreground",
+                  rangeMiddle && "bg-accent rounded-none",
+                  rangeStart && "rounded-r-none",
+                  rangeEnd && "rounded-l-none"
+                )}
+                type="button"
+              >
+                {date instanceof Date && !isNaN(date.getTime()) 
+                  ? format(date, "d")
+                  : ""}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
   return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("moonui-calendar 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 w-full",
-        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}
-    />
-  )
+    <div className={cn("moonui-calendar p-2 sm:p-3", className)}>
+      {/* Header - only show for single month */}
+      {numberOfMonths === 1 && (
+        <div className="flex items-center justify-between px-1 pb-3">
+        <button
+          onClick={handlePreviousMonth}
+          className={cn(
+            buttonVariants({ variant: "outline" }),
+            "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          )}
+          type="button"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+        
+        <h2 className="text-sm font-medium">
+          {currentMonth instanceof Date && !isNaN(currentMonth.getTime()) 
+            ? format(currentMonth, "MMMM yyyy")
+            : ""
+          }
+        </h2>
+        
+        <button
+          onClick={handleNextMonth}
+          className={cn(
+            buttonVariants({ variant: "outline" }),
+            "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          )}
+          type="button"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+        </div>
+      )}
+
+      {/* Navigation for multiple months */}
+      {numberOfMonths > 1 && (
+        <div className="flex items-center justify-between px-1 pb-3">
+          <button
+            onClick={handlePreviousMonth}
+            className={cn(
+              buttonVariants({ variant: "outline" }),
+              "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+            )}
+            type="button"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          
+          <h2 className="text-xs sm:text-sm font-medium text-center">
+            {currentMonth instanceof Date && !isNaN(currentMonth.getTime()) 
+              ? `${format(currentMonth, "MMM yyyy")} - ${format(addMonths(currentMonth, numberOfMonths - 1), "MMM yyyy")}`
+              : ""
+            }
+          </h2>
+          
+          <button
+            onClick={handleNextMonth}
+            className={cn(
+              buttonVariants({ variant: "outline" }),
+              "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+            )}
+            type="button"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      {/* Week days header for single month */}
+      {numberOfMonths === 1 && (
+        <div className="grid grid-cols-7 gap-0 mb-1">
+          {weekDays.map((day, index) => (
+            <div
+              key={`weekday-${index}`}
+              className="text-muted-foreground text-[0.65rem] sm:text-[0.75rem] font-normal h-6 sm:h-7 w-full flex items-center justify-center"
+              title={day.full}
+            >
+              {day.short}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Calendar(s) */}
+      <div className={cn(
+        numberOfMonths > 1 && "flex flex-col sm:flex-row gap-2 sm:gap-4"
+      )}>
+        {Array.from({ length: numberOfMonths }).map((_, i) => (
+          <div key={i} className="flex-1">
+            {renderCalendar(i)}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 }
-Calendar.displayName = "Calendar"
 
-export { Calendar }
+Calendar.displayName = "Calendar";
+
+export { Calendar };