@moontra/moonui-pro 2.5.14 → 2.6.1

package/src/components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "../../lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/src/components/ui/index.ts

@@ -166,4 +166,8 @@ export {
   Tooltip, TooltipTrigger, TooltipContent, TooltipProvider
 } from './tooltip';
 
+export {
+  HoverCard, HoverCardTrigger, HoverCardContent
+} from './hover-card';
+
 // Note: Micro-interaction components are exported from their individual directories

package/src/styles/calendar.css

@@ -1,99 +1,35 @@
-/* Calendar Component Styles */
+/* Calendar Component Styles - Custom Implementation */
 .moonui-calendar {
-  --calendar-cell-size: 2.25rem; /* 36px */
-  --calendar-cell-size-sm: 2rem; /* 32px on mobile */
+  width: 100%;
 }
 
-/* Mobile responsive calendar */
+/* Mobile adjustments */
 @media (max-width: 640px) {
   .moonui-calendar {
-    --calendar-cell-size: var(--calendar-cell-size-sm);
-  }
-  
-  /* Stack months vertically on mobile */
-  .moonui-calendar .months {
-    flex-direction: column !important;
+    font-size: 0.875rem;
   }
   
-  /* Adjust cell sizes for mobile */
-  .moonui-calendar .rdp-cell,
-  .moonui-calendar .rdp-day {
-    width: var(--calendar-cell-size) !important;
-    height: var(--calendar-cell-size) !important;
+  .moonui-calendar button {
+    font-size: 0.8125rem;
   }
 }
 
-/* Fix day names alignment */
-.moonui-calendar .rdp-head_cell {
-  width: var(--calendar-cell-size);
-  height: var(--calendar-cell-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: var(--muted-foreground);
-}
-
-/* Fix calendar grid */
-.moonui-calendar .rdp-tbody {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.moonui-calendar .rdp-row {
-  display: flex;
-  gap: 0.25rem;
-  margin: 0;
-}
-
-.moonui-calendar .rdp-cell {
-  width: var(--calendar-cell-size);
-  height: var(--calendar-cell-size);
-  padding: 0;
-  text-align: center;
-}
-
-.moonui-calendar .rdp-day {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-/* Range selection styles */
-.moonui-calendar .rdp-day_range_middle {
-  border-radius: 0 !important;
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
-
-.moonui-calendar .rdp-day_range_start {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.moonui-calendar .rdp-day_range_end {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
 /* Popover responsive */
 @media (max-width: 640px) {
   .time-range-popover {
     max-width: calc(100vw - 2rem) !important;
+    margin: 0 auto;
   }
   
-  .time-range-popover .preset-column {
-    border-right: none !important;
-    border-bottom: 1px solid var(--border) !important;
-    min-width: 100% !important;
+  /* Make calendar months stack vertically on mobile */
+  .moonui-calendar .grid-cols-7 {
+    font-size: 0.75rem;
+  }
+}
+
+/* Ensure proper layout on desktop */
+@media (min-width: 641px) {
+  .time-range-popover {
+    min-width: 640px;
   }
 }