@j3m-quantum/ui 0.9.1 → 1.3.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import * as React7 from 'react';
+import * as React14 from 'react';
 import { useMemo } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon, ArrowLeft, ArrowRight, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, XIcon, SearchIcon, GripVerticalIcon, PanelLeftIcon } from 'lucide-react';
+import { SearchIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronRightIcon, ChevronLeftIcon, ArrowLeft, ArrowRight, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, XIcon, GripVerticalIcon, PanelLeftIcon, FolderIcon, ShareIcon, TrashIcon, ChevronsUpDownIcon, SparklesIcon, BadgeCheckIcon, CreditCardIcon, BellIcon, LogOutIcon, User, Calendar as Calendar$1, Clock, CalendarX2, ChevronLeft, List, Columns, Grid2x2, Grid3x3, CalendarRange, Plus, Info, Moon, Settings } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -17,6 +17,7 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
@@ -29,7 +30,6 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { Toaster as Toaster$1 } from 'sonner';
 import { Command as Command$1 } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
@@ -39,12 +39,14 @@ import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ResizablePrimitive from 'react-resizable-panels';
+import { subMonths, subYears, subWeeks, subDays, addMonths, addYears, addWeeks, addDays, format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfYear, endOfYear, isSameMonth, isSameWeek, isSameDay, isSameYear, isWithinInterval, parseISO, differenceInMinutes, eachDayOfInterval, differenceInDays, startOfDay, setMinutes, setHours, eachHourOfInterval, endOfDay, getHours, getMinutes, addMinutes, isToday, areIntervalsOverlapping } from 'date-fns';
+export { areIntervalsOverlapping, format, getDay, isSameDay, isSameMonth, isToday, parseISO } from 'date-fns';
 
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React7.useState(void 0);
-  React7.useEffect(() => {
+  const [isMobile, setIsMobile] = React14.useState(void 0);
+  React14.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -63,10 +65,10 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground border border-input hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
@@ -85,7 +87,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React7.forwardRef(
+var Button = React14.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -449,7 +451,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React7.useMemo(
+  const _values = React14.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -485,7 +487,7 @@ function Slider({
             )
           }
         ),
-        Array.from({ length: _values.length }, (_2, index) => /* @__PURE__ */ jsx(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -735,7 +737,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React7.createContext({
+var ToggleGroupContext = React14.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -772,7 +774,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React7.useContext(ToggleGroupContext);
+  const context = React14.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -803,7 +805,7 @@ function ToolBarCanvas({
     {
       "data-slot": "toolbar-canvas",
       className: cn(
-        "inline-flex items-center gap-1 rounded-full bg-sidebar border border-sidebar-border p-1.5",
+        "inline-flex items-center gap-1 rounded-full bg-background border border-input p-1.5",
         className
       ),
       ...props
@@ -898,7 +900,7 @@ function PlayerCanvasControls({
     {
       "data-slot": "player-canvas-controls",
       className: cn(
-        "flex items-center gap-2 px-1.5 py-1.5 rounded-full bg-sidebar border border-sidebar-border",
+        "flex items-center gap-2 px-1.5 py-1.5 rounded-full bg-background border border-input",
         className
       ),
       ...props
@@ -939,7 +941,7 @@ function PlayerCanvasPlayButton({
         className
       ),
       style: {
-        backgroundColor: "var(--j3m-primary-250)",
+        backgroundColor: "var(--j3m-orange-8)",
         ...style
       },
       ...props,
@@ -1079,7 +1081,7 @@ function PlayerCanvasProgress({
           className: "absolute inset-y-0 left-0 rounded-full transition-all duration-200",
           style: {
             width: `${percentage}%`,
-            backgroundColor: "var(--j3m-primary-250)"
+            backgroundColor: "var(--j3m-orange-8)"
           }
         }
       )
@@ -1103,7 +1105,7 @@ function Label2({
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React7.createContext(
+var FormFieldContext = React14.createContext(
   {}
 );
 var FormField = ({
@@ -1112,8 +1114,8 @@ var FormField = ({
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React7.useContext(FormFieldContext);
-  const itemContext = React7.useContext(FormItemContext);
+  const fieldContext = React14.useContext(FormFieldContext);
+  const itemContext = React14.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1130,11 +1132,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React7.createContext(
+var FormItemContext = React14.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React7.useId();
+  const id = React14.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -1418,7 +1420,7 @@ var cardVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-card border shadow",
+        default: "bg-card border",
         glass: [
           "glass-context",
           // Enables glass semantic token overrides for children
@@ -1673,6 +1675,298 @@ function AvatarFallback({
     }
   );
 }
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function UserAvatarsDropdown({
+  users,
+  selectedUserId,
+  onSelect,
+  maxVisible = 2,
+  label = "All",
+  className
+}) {
+  const visibleUsers = users.slice(0, maxVisible);
+  const overflowCount = Math.max(0, users.length - maxVisible);
+  const getInitials = (name) => {
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  };
+  const selectedUser = users.find((u) => u.id === selectedUserId);
+  const displayLabel = selectedUserId ? selectedUser?.name || "User" : label;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex items-center gap-2 rounded border border-border bg-background px-3 py-1.5 text-sm transition-colors",
+          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex -space-x-2", children: [
+            visibleUsers.map((user) => /* @__PURE__ */ jsxs(
+              Avatar,
+              {
+                className: "size-6 border-2 border-background",
+                children: [
+                  /* @__PURE__ */ jsx(AvatarImage, { src: user.image, alt: user.name }),
+                  /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px]", children: getInitials(user.name) })
+                ]
+              },
+              user.id
+            )),
+            overflowCount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex size-6 items-center justify-center rounded-full border-2 border-background bg-muted text-[10px] font-medium", children: [
+              "+",
+              overflowCount
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: displayLabel }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => onSelect(null),
+          className: "flex items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: "All users" }),
+            selectedUserId === null && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      users.map((user) => /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => onSelect(user.id),
+          className: "flex items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs(Avatar, { className: "size-5", children: [
+                /* @__PURE__ */ jsx(AvatarImage, { src: user.image, alt: user.name }),
+                /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[8px]", children: getInitials(user.name) })
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: user.name })
+            ] }),
+            selectedUserId === user.id && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+          ]
+        },
+        user.id
+      ))
+    ] })
+  ] });
+}
 function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -1759,7 +2053,7 @@ function TabsList({
     {
       "data-slot": "tabs-list",
       className: cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] dark:bg-[#1a1a1a]",
         className
       ),
       ...props
@@ -1775,7 +2069,7 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-input data-[state=inactive]:hover:bg-accent data-[state=inactive]:hover:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1944,8 +2238,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React7.useRef(null);
-  React7.useEffect(() => {
+  const ref = React14.useRef(null);
+  React14.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -1966,9 +2260,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React7.createContext(null);
+var CarouselContext = React14.createContext(null);
 function useCarousel() {
-  const context = React7.useContext(CarouselContext);
+  const context = React14.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -1990,20 +2284,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React7.useState(false);
-  const [canScrollNext, setCanScrollNext] = React7.useState(false);
-  const onSelect = React7.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React14.useState(false);
+  const [canScrollNext, setCanScrollNext] = React14.useState(false);
+  const onSelect = React14.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React7.useCallback(() => {
+  const scrollPrev = React14.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React7.useCallback(() => {
+  const scrollNext = React14.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React7.useCallback(
+  const handleKeyDown = React14.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2015,11 +2309,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React7.useEffect(() => {
+  React14.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React7.useEffect(() => {
+  React14.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2152,9 +2446,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React7.createContext(null);
+var ChartContext = React14.createContext(null);
 function useChart() {
-  const context = React7.useContext(ChartContext);
+  const context = React14.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2167,7 +2461,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React7.useId();
+  const uniqueId = React14.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -2228,7 +2522,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React7.useMemo(() => {
+  const tooltipLabel = React14.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -2522,7 +2816,7 @@ var itemVariants = cva(
     }
   }
 );
-function Item5({
+function Item6({
   className,
   variant = "default",
   size = "default",
@@ -2930,40 +3224,27 @@ function TooltipContent({
     }
   ) });
 }
-var M = (e, i, s, u, m, a, l, h) => {
-  let d = document.documentElement, w = ["light", "dark"];
-  function p(n) {
-    (Array.isArray(e) ? e : [e]).forEach((y) => {
-      let k = y === "class", S = k && a ? m.map((f) => a[f] || f) : m;
-      k ? (d.classList.remove(...S), d.classList.add(a && a[n] ? a[n] : n)) : d.setAttribute(y, n);
-    }), R(n);
-  }
-  function R(n) {
-    h && w.includes(n) && (d.style.colorScheme = n);
-  }
-  function c() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
-  if (u) p(u);
-  else try {
-    let n = localStorage.getItem(i) || s, y = l && n === "system" ? c() : n;
-    p(y);
-  } catch (n) {
-  }
-};
-var x = React7.createContext(void 0);
-var U = { setTheme: (e) => {
-}, themes: [] };
-var z = () => {
-  var e;
-  return (e = React7.useContext(x)) != null ? e : U;
-};
-React7.memo(({ forcedTheme: e, storageKey: i, attribute: s, enableSystem: u, enableColorScheme: m, defaultTheme: a, value: l, themes: h, nonce: d, scriptProps: w }) => {
-  let p = JSON.stringify([s, i, a, e, h, l, u, m]).slice(1, -1);
-  return React7.createElement("script", { ...w, suppressHydrationWarning: true, nonce: typeof window == "undefined" ? d : "", dangerouslySetInnerHTML: { __html: `(${M.toString()})(${p})` } });
-});
-var Toaster = ({ ...props }) => {
-  const { theme = "system" } = z();
+function useDetectTheme() {
+  const [theme, setTheme] = React14.useState("light");
+  React14.useEffect(() => {
+    const isDark = document.documentElement.classList.contains("dark");
+    setTheme(isDark ? "dark" : "light");
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === "class") {
+          const isDark2 = document.documentElement.classList.contains("dark");
+          setTheme(isDark2 ? "dark" : "light");
+        }
+      });
+    });
+    observer.observe(document.documentElement, { attributes: true });
+    return () => observer.disconnect();
+  }, []);
+  return theme;
+}
+var Toaster = ({ theme: themeProp, ...props }) => {
+  const detectedTheme = useDetectTheme();
+  const theme = themeProp ?? detectedTheme;
   return /* @__PURE__ */ jsx(
     Toaster$1,
     {
@@ -3466,215 +3747,52 @@ function CommandShortcut({
     }
   );
 }
-function DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...props
-    }
-  );
-}
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.Content,
-    {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-function DropdownMenuGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    DropdownMenuPrimitive.CheckboxItem,
-    {
-      "data-slot": "dropdown-menu-checkbox-item",
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      checked,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
-        children
-      ]
-    }
-  );
-}
-function DropdownMenuRadioGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.RadioGroup,
-    {
-      "data-slot": "dropdown-menu-radio-group",
-      ...props
-    }
-  );
-}
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    DropdownMenuPrimitive.RadioItem,
-    {
-      "data-slot": "dropdown-menu-radio-item",
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
-        children
-      ]
-    }
-  );
-}
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.Label,
-    {
-      "data-slot": "dropdown-menu-label",
-      "data-inset": inset,
-      className: cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DropdownMenuSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.Separator,
-    {
-      "data-slot": "dropdown-menu-separator",
-      className: cn("bg-border -mx-1 my-1 h-px", className),
-      ...props
-    }
-  );
-}
-function DropdownMenuShortcut({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "dropdown-menu-shortcut",
-      className: cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DropdownMenuSub({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
-}
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    DropdownMenuPrimitive.SubTrigger,
-    {
-      "data-slot": "dropdown-menu-sub-trigger",
-      "data-inset": inset,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
-      ]
-    }
-  );
-}
-function DropdownMenuSubContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.SubContent,
-    {
-      "data-slot": "dropdown-menu-sub-content",
-      className: cn(
-        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      ),
-      ...props
-    }
-  );
+var SearchTrigger = React14.forwardRef(
+  ({
+    className,
+    placeholder = "Search...",
+    showShortcut = true,
+    shortcutKey = "K",
+    shortcutModifier = "\u2318",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant: "outline",
+        "data-slot": "search-trigger",
+        className: cn(
+          "relative h-9 w-full justify-start rounded-full bg-background text-sm text-muted-foreground",
+          "sm:w-64 sm:max-w-[280px]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SearchIcon, { className: "mr-2 h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "hidden truncate sm:inline-flex", children: placeholder }),
+          /* @__PURE__ */ jsx("span", { className: "truncate sm:hidden", children: "Search" }),
+          showShortcut && /* @__PURE__ */ jsxs(Kbd, { className: "pointer-events-none absolute right-2 hidden h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium sm:flex", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs", children: shortcutModifier }),
+            shortcutKey
+          ] })
+        ]
+      }
+    );
+  }
+);
+SearchTrigger.displayName = "SearchTrigger";
+function useSearchShortcut(onOpen, key = "k") {
+  React14.useEffect(() => {
+    const down = (e) => {
+      if (e.key.toLowerCase() === key.toLowerCase() && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        onOpen();
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, [onOpen, key]);
 }
 function Menubar({
   className,
@@ -4693,9 +4811,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React7.createContext(null);
+var SidebarContext = React14.createContext(null);
 function useSidebar() {
-  const context = React7.useContext(SidebarContext);
+  const context = React14.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4711,10 +4829,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React7.useState(false);
-  const [_open, _setOpen] = React7.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React14.useState(false);
+  const [_open, _setOpen] = React14.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React7.useCallback(
+  const setOpen = React14.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4726,10 +4844,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React7.useCallback(() => {
+  const toggleSidebar = React14.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React7.useEffect(() => {
+  React14.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4740,7 +4858,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React7.useMemo(
+  const contextValue = React14.useMemo(
     () => ({
       state,
       open,
@@ -5198,7 +5316,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React7.useMemo(() => {
+  const width = React14.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -5296,8 +5414,7 @@ var sectionVariants = cva(
         default: [
           "bg-[var(--color-bg-surface)]",
           "border border-[var(--color-border-subtle)]",
-          "text-[var(--color-text-main)]",
-          "shadow-sm"
+          "text-[var(--color-text-main)]"
         ].join(" "),
         // Glass Light - frosted glass for dark or image backgrounds
         "glass-light": [
@@ -5342,7 +5459,7 @@ var sectionVariants = cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React7.forwardRef(
+var Section = React14.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
     "section",
     {
@@ -5354,7 +5471,7 @@ var Section = React7.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React7.forwardRef(
+var SectionHeader = React14.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5369,7 +5486,7 @@ var SectionHeader = React7.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React7.forwardRef(
+var SectionTitle = React14.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "h2",
     {
@@ -5383,7 +5500,7 @@ var SectionTitle = React7.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React7.forwardRef(
+var SectionDescription = React14.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "p",
     {
@@ -5397,7 +5514,7 @@ var SectionDescription = React7.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React7.forwardRef(
+var SectionContent = React14.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5411,7 +5528,7 @@ var SectionContent = React7.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React7.forwardRef(
+var SectionFooter = React14.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5427,7 +5544,3182 @@ var SectionFooter = React7.forwardRef(
   )
 );
 SectionFooter.displayName = "SectionFooter";
+function SearchForm({ ...props }) {
+  return /* @__PURE__ */ jsx("form", { ...props, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(Label2, { htmlFor: "search", className: "sr-only", children: "Search" }),
+    /* @__PURE__ */ jsx(
+      SidebarInput,
+      {
+        id: "search",
+        placeholder: "Type to search...",
+        className: "h-8 pl-7"
+      }
+    ),
+    /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" })
+  ] }) });
+}
+function SiteHeader({
+  trigger,
+  breadcrumbs = [
+    { label: "Building Your Application", href: "#" },
+    { label: "Data Fetching" }
+  ],
+  showSearch = true,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      "data-slot": "site-header",
+      className: cn(
+        "bg-sidebar text-sidebar-foreground sticky top-0 z-50 flex w-full items-center border-b border-sidebar-border",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-[var(--header-height,3.5rem)] w-full items-center gap-[var(--j3m-spacing-s)] px-[var(--j3m-spacing-m)]", children: [
+        trigger,
+        trigger && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mr-[var(--j3m-spacing-s)] h-4" }),
+        /* @__PURE__ */ jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxs(React14.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+          /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsx(BreadcrumbLink, { href: item.href, children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) })
+        ] }, index)) }) }),
+        showSearch && /* @__PURE__ */ jsx(SearchForm, { className: "w-full sm:ml-auto sm:w-auto" }),
+        children
+      ] })
+    }
+  );
+}
+function NavMain({ items, label = "Platform" }) {
+  return /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+    /* @__PURE__ */ jsx(SidebarGroupLabel, { children: label }),
+    /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsx(Collapsible, { asChild: true, defaultOpen: item.isActive, children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+      /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, children: /* @__PURE__ */ jsxs("a", { href: item.url, children: [
+        item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+        /* @__PURE__ */ jsx("span", { children: item.title })
+      ] }) }),
+      item.items?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(SidebarMenuAction, { className: "data-[state=open]:rotate-90", children: [
+          /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle" })
+        ] }) }),
+        /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: subItem.url, children: /* @__PURE__ */ jsx("span", { children: subItem.title }) }) }) }, subItem.title)) }) })
+      ] }) : null
+    ] }) }, item.title)) })
+  ] });
+}
+function NavProjects({ projects, label = "Projects" }) {
+  return /* @__PURE__ */ jsxs(SidebarGroup, { className: "group-data-[collapsible=icon]:hidden", children: [
+    /* @__PURE__ */ jsx(SidebarGroupLabel, { children: label }),
+    /* @__PURE__ */ jsxs(SidebarMenu, { children: [
+      projects.map((item) => /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+        /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, children: /* @__PURE__ */ jsxs("a", { href: item.url, children: [
+          /* @__PURE__ */ jsx(item.icon, {}),
+          /* @__PURE__ */ jsx("span", { children: item.name })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(SidebarMenuAction, { showOnHover: true, children: [
+            /* @__PURE__ */ jsx(MoreHorizontalIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuContent,
+            {
+              className: "w-48 rounded-[var(--j3m-radius-m)]",
+              side: "right",
+              align: "start",
+              sideOffset: 8,
+              children: [
+                /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+                  /* @__PURE__ */ jsx(FolderIcon, { className: "text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { children: "View Project" })
+                ] }),
+                /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+                  /* @__PURE__ */ jsx(ShareIcon, { className: "text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { children: "Share Project" })
+                ] }),
+                /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+                  /* @__PURE__ */ jsx(TrashIcon, { className: "text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { children: "Delete Project" })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] }, item.name)),
+      /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { className: "text-sidebar-foreground/70", children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "text-sidebar-foreground/70" }),
+        /* @__PURE__ */ jsx("span", { children: "More" })
+      ] }) })
+    ] })
+  ] });
+}
+function NavSecondary({ items, ...props }) {
+  return /* @__PURE__ */ jsx(SidebarGroup, { ...props, children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, size: "sm", children: /* @__PURE__ */ jsxs("a", { href: item.url, children: [
+    /* @__PURE__ */ jsx(item.icon, {}),
+    /* @__PURE__ */ jsx("span", { children: item.title })
+  ] }) }) }, item.title)) }) }) });
+}
+function NavUser({ user }) {
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        size: "lg",
+        className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+            /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: user.name.slice(0, 2).toUpperCase() })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: user.name }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: user.email })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ml-auto size-4" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-[var(--j3m-radius-m)]",
+        side: "right",
+        align: "end",
+        sideOffset: 8,
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
+            /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+              /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg", children: user.name.slice(0, 2).toUpperCase() })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: user.name }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: user.email })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+            /* @__PURE__ */ jsx(SparklesIcon, {}),
+            "Upgrade to Pro"
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+              /* @__PURE__ */ jsx(BadgeCheckIcon, {}),
+              "Account"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+              /* @__PURE__ */ jsx(CreditCardIcon, {}),
+              "Billing"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+              /* @__PURE__ */ jsx(BellIcon, {}),
+              "Notifications"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+            /* @__PURE__ */ jsx(LogOutIcon, {}),
+            "Log out"
+          ] })
+        ]
+      }
+    )
+  ] }) }) });
+}
+
+// src/components/event-calendar/types.ts
+var DEFAULT_WORKING_HOURS = {
+  0: { from: 0, to: 0 },
+  // Sunday - closed
+  1: { from: 9, to: 17 },
+  // Monday
+  2: { from: 9, to: 17 },
+  // Tuesday
+  3: { from: 9, to: 17 },
+  // Wednesday
+  4: { from: 9, to: 17 },
+  // Thursday
+  5: { from: 9, to: 17 },
+  // Friday
+  6: { from: 0, to: 0 }
+  // Saturday - closed
+};
+var DEFAULT_VISIBLE_HOURS = { from: 0, to: 24 };
+var EVENT_COLORS = {
+  blue: {
+    bg: "bg-blue-500/20",
+    text: "text-blue-700 dark:text-blue-300",
+    border: "border-blue-500"
+  },
+  green: {
+    bg: "bg-green-500/20",
+    text: "text-green-700 dark:text-green-300",
+    border: "border-green-500"
+  },
+  red: {
+    bg: "bg-red-500/20",
+    text: "text-red-700 dark:text-red-300",
+    border: "border-red-500"
+  },
+  yellow: {
+    bg: "bg-yellow-500/20",
+    text: "text-yellow-700 dark:text-yellow-300",
+    border: "border-yellow-500"
+  },
+  purple: {
+    bg: "bg-purple-500/20",
+    text: "text-purple-700 dark:text-purple-300",
+    border: "border-purple-500"
+  },
+  orange: {
+    bg: "bg-primary/20",
+    text: "text-primary dark:text-orange-300",
+    border: "border-primary"
+  }
+};
+var VIEW_LABELS = {
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  year: "Year",
+  agenda: "Agenda"
+};
+var BADGE_VARIANT_LABELS = {
+  dot: "Dot",
+  colored: "Colored",
+  mixed: "Mixed"
+};
+var CalendarContext = React14.createContext(null);
+function EventCalendarProvider({
+  children,
+  events: initialEvents = [],
+  users: initialUsers = [],
+  defaultDate = /* @__PURE__ */ new Date(),
+  defaultView = "month",
+  defaultBadgeVariant = "colored",
+  defaultUserId = null,
+  defaultWorkingHours = DEFAULT_WORKING_HOURS,
+  defaultVisibleHours = DEFAULT_VISIBLE_HOURS,
+  onEventAdd,
+  onEventUpdate,
+  onEventDelete
+}) {
+  const [selectedDate, setSelectedDate] = React14.useState(defaultDate);
+  const [selectedUserId, setSelectedUserId] = React14.useState(defaultUserId);
+  const [events, setEventsState] = React14.useState(initialEvents);
+  const [users] = React14.useState(initialUsers);
+  const [badgeVariant, setBadgeVariant] = React14.useState(defaultBadgeVariant);
+  const [view, setView] = React14.useState(defaultView);
+  const [workingHours, setWorkingHours] = React14.useState(defaultWorkingHours);
+  const [visibleHours, setVisibleHours] = React14.useState(defaultVisibleHours);
+  React14.useEffect(() => {
+    setEventsState(initialEvents);
+  }, [initialEvents]);
+  const setEvents = React14.useCallback((newEvents) => {
+    setEventsState(newEvents);
+  }, []);
+  const addEvent = React14.useCallback((event) => {
+    setEventsState((prev) => [...prev, event]);
+    onEventAdd?.(event);
+  }, [onEventAdd]);
+  const updateEvent = React14.useCallback((event) => {
+    setEventsState(
+      (prev) => prev.map((e) => e.id === event.id ? event : e)
+    );
+    onEventUpdate?.(event);
+  }, [onEventUpdate]);
+  const deleteEvent = React14.useCallback((eventId) => {
+    setEventsState((prev) => prev.filter((e) => e.id !== eventId));
+    onEventDelete?.(eventId);
+  }, [onEventDelete]);
+  const goToToday = React14.useCallback(() => {
+    setSelectedDate(/* @__PURE__ */ new Date());
+  }, []);
+  const goToPrevious = React14.useCallback(() => {
+    setSelectedDate((current) => {
+      switch (view) {
+        case "day":
+          return subDays(current, 1);
+        case "week":
+          return subWeeks(current, 1);
+        case "month":
+          return subMonths(current, 1);
+        case "year":
+          return subYears(current, 1);
+        case "agenda":
+          return subMonths(current, 1);
+        default:
+          return current;
+      }
+    });
+  }, [view]);
+  const goToNext = React14.useCallback(() => {
+    setSelectedDate((current) => {
+      switch (view) {
+        case "day":
+          return addDays(current, 1);
+        case "week":
+          return addWeeks(current, 1);
+        case "month":
+          return addMonths(current, 1);
+        case "year":
+          return addYears(current, 1);
+        case "agenda":
+          return addMonths(current, 1);
+        default:
+          return current;
+      }
+    });
+  }, [view]);
+  const contextValue = React14.useMemo(
+    () => ({
+      // State
+      selectedDate,
+      selectedUserId,
+      events,
+      users,
+      badgeVariant,
+      view,
+      workingHours,
+      visibleHours,
+      // Actions
+      setSelectedDate,
+      setSelectedUserId,
+      setEvents,
+      addEvent,
+      updateEvent,
+      deleteEvent,
+      setBadgeVariant,
+      setView,
+      setWorkingHours,
+      setVisibleHours,
+      goToToday,
+      goToPrevious,
+      goToNext
+    }),
+    [
+      selectedDate,
+      selectedUserId,
+      events,
+      users,
+      badgeVariant,
+      view,
+      workingHours,
+      visibleHours,
+      setEvents,
+      addEvent,
+      updateEvent,
+      deleteEvent,
+      goToToday,
+      goToPrevious,
+      goToNext
+    ]
+  );
+  return /* @__PURE__ */ jsx(CalendarContext.Provider, { value: contextValue, children });
+}
+function useEventCalendar() {
+  const context = React14.useContext(CalendarContext);
+  if (!context) {
+    throw new Error("useEventCalendar must be used within an EventCalendarProvider");
+  }
+  return context;
+}
+function useFilteredEvents() {
+  const { events, selectedUserId } = useEventCalendar();
+  return React14.useMemo(() => {
+    if (!selectedUserId) return events;
+    return events.filter((event) => event.user.id === selectedUserId);
+  }, [events, selectedUserId]);
+}
+function useEventsInRange(startDate, endDate) {
+  const filteredEvents = useFilteredEvents();
+  return React14.useMemo(() => {
+    return filteredEvents.filter((event) => {
+      const eventStart = new Date(event.startDate);
+      const eventEnd = new Date(event.endDate);
+      return eventStart <= endDate && eventEnd >= startDate;
+    });
+  }, [filteredEvents, startDate, endDate]);
+}
+function rangeText(view, date) {
+  const formatString = "MMM d, yyyy";
+  let start;
+  let end;
+  switch (view) {
+    case "agenda":
+      start = startOfMonth(date);
+      end = endOfMonth(date);
+      break;
+    case "year":
+      start = startOfYear(date);
+      end = endOfYear(date);
+      break;
+    case "month":
+      start = startOfMonth(date);
+      end = endOfMonth(date);
+      break;
+    case "week":
+      start = startOfWeek(date);
+      end = endOfWeek(date);
+      break;
+    case "day":
+      return format(date, formatString);
+    default:
+      return "Error while formatting";
+  }
+  return `${format(start, formatString)} - ${format(end, formatString)}`;
+}
+function navigateDate(date, view, direction) {
+  const operations = {
+    agenda: direction === "next" ? addMonths : subMonths,
+    year: direction === "next" ? addYears : subYears,
+    month: direction === "next" ? addMonths : subMonths,
+    week: direction === "next" ? addWeeks : subWeeks,
+    day: direction === "next" ? addDays : subDays
+  };
+  return operations[view](date, 1);
+}
+function getEventsCount(events, date, view) {
+  const compareFns = {
+    agenda: isSameMonth,
+    year: isSameYear,
+    day: isSameDay,
+    week: isSameWeek,
+    month: isSameMonth
+  };
+  return events.filter(
+    (event) => compareFns[view](new Date(event.startDate), date)
+  ).length;
+}
+function getCurrentEvents(events) {
+  const now = /* @__PURE__ */ new Date();
+  return events.filter(
+    (event) => isWithinInterval(now, {
+      start: parseISO(event.startDate),
+      end: parseISO(event.endDate)
+    })
+  ) || [];
+}
+function groupEvents(dayEvents) {
+  const sortedEvents = dayEvents.sort(
+    (a, b) => parseISO(a.startDate).getTime() - parseISO(b.startDate).getTime()
+  );
+  const groups = [];
+  for (const event of sortedEvents) {
+    const eventStart = parseISO(event.startDate);
+    let placed = false;
+    for (const group of groups) {
+      const lastEventInGroup = group[group.length - 1];
+      const lastEventEnd = parseISO(lastEventInGroup.endDate);
+      if (eventStart >= lastEventEnd) {
+        group.push(event);
+        placed = true;
+        break;
+      }
+    }
+    if (!placed) groups.push([event]);
+  }
+  return groups;
+}
+function getEventBlockStyle(event, day, groupIndex, groupSize, visibleHoursRange, hourHeight = 96) {
+  const startDate = parseISO(event.startDate);
+  const endDate = parseISO(event.endDate);
+  const dayStart = new Date(day);
+  dayStart.setHours(0, 0, 0, 0);
+  const eventStart = startDate < dayStart ? dayStart : startDate;
+  const startMinutes = differenceInMinutes(eventStart, dayStart);
+  const durationMinutes = differenceInMinutes(endDate, eventStart);
+  const visibleStartMinutes = (visibleHoursRange?.from ?? 0) * 60;
+  const topMinutes = startMinutes - visibleStartMinutes;
+  const topPx = topMinutes / 60 * hourHeight;
+  const heightPx = Math.max(durationMinutes / 60 * hourHeight, hourHeight / 4);
+  const width = 100 / groupSize;
+  const left = groupIndex * width;
+  return {
+    top: `${topPx}px`,
+    height: `${heightPx}px`,
+    width: `${width}%`,
+    left: `${left}%`
+  };
+}
+function isWorkingHour(day, hour, workingHours) {
+  const dayIndex = day.getDay();
+  const dayHours = workingHours[dayIndex];
+  return hour >= dayHours.from && hour < dayHours.to;
+}
+function getVisibleHours(visibleHours, singleDayEvents) {
+  let earliestEventHour = visibleHours.from;
+  let latestEventHour = visibleHours.to;
+  singleDayEvents.forEach((event) => {
+    const startHour = parseISO(event.startDate).getHours();
+    const endTime = parseISO(event.endDate);
+    const endHour = endTime.getHours() + (endTime.getMinutes() > 0 ? 1 : 0);
+    if (startHour < earliestEventHour) earliestEventHour = startHour;
+    if (endHour > latestEventHour) latestEventHour = endHour;
+  });
+  latestEventHour = Math.min(latestEventHour, 24);
+  const hours = Array.from(
+    { length: latestEventHour - earliestEventHour },
+    (_, i) => i + earliestEventHour
+  );
+  return { hours, earliestEventHour, latestEventHour };
+}
+function getCalendarCells(selectedDate) {
+  const currentYear = selectedDate.getFullYear();
+  const currentMonth = selectedDate.getMonth();
+  const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+  const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
+  const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+  const firstDayOfMonth = getFirstDayOfMonth(currentYear, currentMonth);
+  const daysInPrevMonth = getDaysInMonth(currentYear, currentMonth - 1);
+  const totalDays = firstDayOfMonth + daysInMonth;
+  const prevMonthCells = Array.from({ length: firstDayOfMonth }, (_, i) => ({
+    day: daysInPrevMonth - firstDayOfMonth + i + 1,
+    currentMonth: false,
+    date: new Date(
+      currentYear,
+      currentMonth - 1,
+      daysInPrevMonth - firstDayOfMonth + i + 1
+    )
+  }));
+  const currentMonthCells = Array.from({ length: daysInMonth }, (_, i) => ({
+    day: i + 1,
+    currentMonth: true,
+    date: new Date(currentYear, currentMonth, i + 1)
+  }));
+  const nextMonthCells = Array.from(
+    { length: (7 - totalDays % 7) % 7 },
+    (_, i) => ({
+      day: i + 1,
+      currentMonth: false,
+      date: new Date(currentYear, currentMonth + 1, i + 1)
+    })
+  );
+  return [...prevMonthCells, ...currentMonthCells, ...nextMonthCells];
+}
+function calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate) {
+  const monthStart = startOfMonth(selectedDate);
+  const monthEnd = endOfMonth(selectedDate);
+  const eventPositions = {};
+  const occupiedPositions = {};
+  eachDayOfInterval({ start: monthStart, end: monthEnd }).forEach((day) => {
+    occupiedPositions[day.toISOString()] = [false, false, false];
+  });
+  const sortedEvents = [
+    ...multiDayEvents.sort((a, b) => {
+      const aDuration = differenceInDays(
+        parseISO(a.endDate),
+        parseISO(a.startDate)
+      );
+      const bDuration = differenceInDays(
+        parseISO(b.endDate),
+        parseISO(b.startDate)
+      );
+      return bDuration - aDuration || parseISO(a.startDate).getTime() - parseISO(b.startDate).getTime();
+    }),
+    ...singleDayEvents.sort(
+      (a, b) => parseISO(a.startDate).getTime() - parseISO(b.startDate).getTime()
+    )
+  ];
+  sortedEvents.forEach((event) => {
+    const eventStart = parseISO(event.startDate);
+    const eventEnd = parseISO(event.endDate);
+    const eventDays = eachDayOfInterval({
+      start: eventStart < monthStart ? monthStart : eventStart,
+      end: eventEnd > monthEnd ? monthEnd : eventEnd
+    });
+    let position = -1;
+    for (let i = 0; i < 3; i++) {
+      if (eventDays.every((day) => {
+        const dayPositions = occupiedPositions[startOfDay(day).toISOString()];
+        return dayPositions && !dayPositions[i];
+      })) {
+        position = i;
+        break;
+      }
+    }
+    if (position !== -1) {
+      eventDays.forEach((day) => {
+        const dayKey = startOfDay(day).toISOString();
+        occupiedPositions[dayKey][position] = true;
+      });
+      eventPositions[event.id] = position;
+    }
+  });
+  return eventPositions;
+}
+function getMonthCellEvents(date, events, eventPositions) {
+  const eventsForDate = events.filter((event) => {
+    const eventStart = parseISO(event.startDate);
+    const eventEnd = parseISO(event.endDate);
+    return date >= eventStart && date <= eventEnd || isSameDay(date, eventStart) || isSameDay(date, eventEnd);
+  });
+  return eventsForDate.map((event) => ({
+    ...event,
+    position: eventPositions[event.id] ?? -1,
+    isMultiDay: event.startDate !== event.endDate
+  })).sort((a, b) => {
+    if (a.isMultiDay && !b.isMultiDay) return -1;
+    if (!a.isMultiDay && b.isMultiDay) return 1;
+    return a.position - b.position;
+  });
+}
+function getMonthDays(date, weekStartsOn = 0) {
+  const start = startOfWeek(startOfMonth(date), { weekStartsOn });
+  const end = endOfWeek(endOfMonth(date), { weekStartsOn });
+  return eachDayOfInterval({ start, end });
+}
+function getWeekDays(date, weekStartsOn = 0) {
+  const start = startOfWeek(date, { weekStartsOn });
+  const end = endOfWeek(date, { weekStartsOn });
+  return eachDayOfInterval({ start, end });
+}
+function getDayHours(date, start = 0, end = 24) {
+  const dayStart = setMinutes(setHours(date, start), 0);
+  const dayEnd = setMinutes(setHours(date, end - 1), 59);
+  return eachHourOfInterval({ start: dayStart, end: dayEnd });
+}
+function getYearMonths(date) {
+  const start = startOfYear(date);
+  const months = [];
+  for (let i = 0; i < 12; i++) {
+    months.push(new Date(start.getFullYear(), i, 1));
+  }
+  return months;
+}
+function getEventsForDate(events, date) {
+  return events.filter((event) => {
+    const eventStart = parseISO(event.startDate);
+    const eventEnd = parseISO(event.endDate);
+    return isWithinInterval(date, {
+      start: startOfDay(eventStart),
+      end: endOfDay(eventEnd)
+    }) || isSameDay(eventStart, date) || isSameDay(eventEnd, date);
+  });
+}
+function getEventsInRange(events, start, end) {
+  return events.filter((event) => {
+    const eventStart = parseISO(event.startDate);
+    const eventEnd = parseISO(event.endDate);
+    return eventStart >= start && eventStart <= end || eventEnd >= start && eventEnd <= end || eventStart <= start && eventEnd >= end;
+  });
+}
+function splitEventsByDuration(events) {
+  const singleDayEvents = [];
+  const multiDayEvents = [];
+  events.forEach((event) => {
+    const start = parseISO(event.startDate);
+    const end = parseISO(event.endDate);
+    if (isSameDay(start, end)) {
+      singleDayEvents.push(event);
+    } else {
+      multiDayEvents.push(event);
+    }
+  });
+  return { singleDayEvents, multiDayEvents };
+}
+function isMultiDayEvent(event) {
+  const start = parseISO(event.startDate);
+  const end = parseISO(event.endDate);
+  return !isSameDay(start, end);
+}
+function getEventDuration(event) {
+  const start = parseISO(event.startDate);
+  const end = parseISO(event.endDate);
+  return differenceInDays(end, start) + 1;
+}
+function getEventDurationMinutes(event) {
+  const start = parseISO(event.startDate);
+  const end = parseISO(event.endDate);
+  return differenceInMinutes(end, start);
+}
+function sortEvents(events) {
+  return [...events].sort((a, b) => {
+    const startDiff = parseISO(a.startDate).getTime() - parseISO(b.startDate).getTime();
+    if (startDiff !== 0) return startDiff;
+    return getEventDuration(b) - getEventDuration(a);
+  });
+}
+function getTimePosition(event, visibleHoursRange) {
+  const start = parseISO(event.startDate);
+  const hours = getHours(start);
+  const minutes = getMinutes(start);
+  const startHour = visibleHoursRange?.from ?? 0;
+  const totalMinutes = (hours - startHour) * 60 + minutes;
+  const totalDayMinutes = ((visibleHoursRange?.to ?? 24) - startHour) * 60;
+  return totalMinutes / totalDayMinutes * 100;
+}
+function getTimeHeight(event, visibleHoursRange) {
+  const duration = getEventDurationMinutes(event);
+  const totalDayMinutes = ((visibleHoursRange?.to ?? 24) - (visibleHoursRange?.from ?? 0)) * 60;
+  return Math.min(duration / totalDayMinutes * 100, 100);
+}
+function formatTime(date, use24h = false) {
+  return format(date, use24h ? "HH:mm" : "h:mm a");
+}
+function getWeekDayNames(weekStartsOn = 0, shortNames = true) {
+  const days = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ];
+  const rotated = [...days.slice(weekStartsOn), ...days.slice(0, weekStartsOn)];
+  return shortNames ? rotated.map((d) => d.slice(0, 3)) : rotated;
+}
+function getHeaderLabel(date, view) {
+  switch (view) {
+    case "day":
+      return format(date, "EEEE, MMMM d, yyyy");
+    case "week":
+      const weekStart = startOfWeek(date);
+      const weekEnd = endOfWeek(date);
+      if (weekStart.getMonth() === weekEnd.getMonth()) {
+        return format(weekStart, "MMMM d") + " - " + format(weekEnd, "d, yyyy");
+      }
+      return format(weekStart, "MMM d") + " - " + format(weekEnd, "MMM d, yyyy");
+    case "month":
+      return format(date, "MMMM yyyy");
+    case "year":
+      return format(date, "yyyy");
+    case "agenda":
+      return format(date, "MMMM yyyy");
+    default:
+      return format(date, "MMMM yyyy");
+  }
+}
+function getViewDateRange(date, view) {
+  switch (view) {
+    case "day":
+      return { start: startOfDay(date), end: endOfDay(date) };
+    case "week":
+      return { start: startOfWeek(date), end: endOfWeek(date) };
+    case "month":
+      return { start: startOfMonth(date), end: endOfMonth(date) };
+    case "year":
+      return { start: startOfYear(date), end: endOfYear(date) };
+    case "agenda":
+      return { start: startOfMonth(date), end: endOfMonth(date) };
+    default:
+      return { start: startOfMonth(date), end: endOfMonth(date) };
+  }
+}
+function formatDateRange(start, end) {
+  if (isSameDay(start, end)) {
+    return format(start, "MMM d, yyyy");
+  }
+  if (start.getFullYear() === end.getFullYear()) {
+    if (start.getMonth() === end.getMonth()) {
+      return format(start, "MMM d") + " - " + format(end, "d, yyyy");
+    }
+    return format(start, "MMM d") + " - " + format(end, "MMM d, yyyy");
+  }
+  return format(start, "MMM d, yyyy") + " - " + format(end, "MMM d, yyyy");
+}
+function createDefaultEvent(startDate, duration = 60) {
+  return {
+    title: "",
+    description: "",
+    startDate: startDate.toISOString(),
+    endDate: addMinutes(startDate, duration).toISOString(),
+    color: "blue",
+    user: {
+      id: "",
+      name: ""
+    }
+  };
+}
+function generateEventId() {
+  return `event_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+function calculateDropDates(event, newStartDate) {
+  const originalStart = parseISO(event.startDate);
+  const originalEnd = parseISO(event.endDate);
+  const duration = differenceInMinutes(originalEnd, originalStart);
+  const newStart = newStartDate;
+  const newEnd = addMinutes(newStart, duration);
+  return {
+    startDate: newStart.toISOString(),
+    endDate: newEnd.toISOString()
+  };
+}
+function snapToInterval(date, intervalMinutes = 15) {
+  const minutes = getMinutes(date);
+  const snappedMinutes = Math.round(minutes / intervalMinutes) * intervalMinutes;
+  return setMinutes(date, snappedMinutes);
+}
+var colorClasses = {
+  blue: {
+    dot: "bg-blue-500",
+    bg: "bg-blue-50 dark:bg-blue-950/50",
+    text: "text-blue-600 dark:text-blue-400",
+    border: "border-l-blue-500",
+    solid: "bg-blue-500"
+  },
+  green: {
+    dot: "bg-green-500",
+    bg: "bg-green-50 dark:bg-green-950/50",
+    text: "text-green-600 dark:text-green-400",
+    border: "border-l-green-500",
+    solid: "bg-green-500"
+  },
+  red: {
+    dot: "bg-red-500",
+    bg: "bg-red-50 dark:bg-red-950/50",
+    text: "text-red-600 dark:text-red-400",
+    border: "border-l-red-500",
+    solid: "bg-red-500"
+  },
+  yellow: {
+    dot: "bg-yellow-500",
+    bg: "bg-yellow-50 dark:bg-yellow-950/50",
+    text: "text-yellow-600 dark:text-yellow-400",
+    border: "border-l-yellow-500",
+    solid: "bg-yellow-500"
+  },
+  purple: {
+    dot: "bg-purple-500",
+    bg: "bg-purple-50 dark:bg-purple-950/50",
+    text: "text-purple-600 dark:text-purple-400",
+    border: "border-l-purple-500",
+    solid: "bg-purple-500"
+  },
+  orange: {
+    dot: "bg-primary",
+    bg: "bg-orange-50 dark:bg-orange-950/50",
+    text: "text-primary dark:text-orange-400",
+    border: "border-l-primary",
+    solid: "bg-primary"
+  }
+};
+function EventBadge({
+  event,
+  variant = "colored",
+  className,
+  showTime = false,
+  compact = false,
+  isDragging = false,
+  onClick
+}) {
+  const colors = colorClasses[event.color];
+  const startTime = format(parseISO(event.startDate), "h:mm a");
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onClick?.(event, e);
+  };
+  if (variant === "dot") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        className: cn(
+          "flex items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-left text-xs transition-colors",
+          "hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isDragging && "opacity-50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("size-2 shrink-0 rounded-full", colors.dot) }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: event.title }),
+          showTime && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: startTime })
+        ]
+      }
+    );
+  }
+  if (variant === "mixed") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        className: cn(
+          "flex items-center gap-1.5 rounded-sm border-l-2 px-1.5 py-0.5 text-left text-xs transition-colors",
+          "hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          colors.border,
+          isDragging && "opacity-50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: event.title }),
+          showTime && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: startTime })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className: cn(
+        "flex flex-col items-start rounded-sm border-l-[3px] text-left text-xs transition-colors",
+        "hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        colors.border,
+        colors.bg,
+        colors.text,
+        compact ? "px-1.5 py-0.5" : "px-2 py-1",
+        isDragging && "opacity-50 shadow-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium max-w-full", children: event.title }),
+        showTime && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: startTime })
+      ]
+    }
+  );
+}
+function MoreEvents({ count, onClick, className }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "w-full rounded-sm px-2 py-0.5 text-left text-xs text-muted-foreground transition-colors",
+        "hover:bg-muted hover:text-foreground",
+        className
+      ),
+      children: [
+        count,
+        " more..."
+      ]
+    }
+  );
+}
+function TimeIndicator({ className }) {
+  const [now, setNow] = React14.useState(/* @__PURE__ */ new Date());
+  React14.useEffect(() => {
+    const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
+    return () => clearInterval(interval);
+  }, []);
+  const hours = now.getHours();
+  const minutes = now.getMinutes();
+  const topPercent = (hours * 60 + minutes) / (24 * 60) * 100;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute left-0 right-0 z-20 flex items-center",
+        className
+      ),
+      style: { top: `${topPercent}%` },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "size-2.5 -translate-x-1/2 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "h-0.5 flex-1 bg-red-500" })
+      ]
+    }
+  );
+}
+function DateBadge({ date, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col w-14 overflow-hidden border border-border rounded-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-foreground text-background text-[10px] font-bold text-center py-1.5 uppercase tracking-wider", children: format(date, "MMM") }),
+        /* @__PURE__ */ jsx("div", { className: "bg-background text-foreground text-2xl font-bold text-center py-2.5", children: format(date, "d") })
+      ]
+    }
+  );
+}
+var DragContext = React14.createContext(null);
+function DragProvider({
+  children,
+  snapMinutes = 15,
+  onDragStart,
+  onDragEnd
+}) {
+  const [draggedEvent, setDraggedEventState] = React14.useState(null);
+  const [isDragging, setIsDragging] = React14.useState(false);
+  const { updateEvent } = useEventCalendar();
+  const setDraggedEvent = React14.useCallback((event) => {
+    setDraggedEventState(event);
+    setIsDragging(!!event);
+    if (event) {
+      onDragStart?.(event);
+    }
+  }, [onDragStart]);
+  const handleDrop = React14.useCallback((newStartDate) => {
+    if (!draggedEvent) return;
+    const snappedDate = snapToInterval(newStartDate, snapMinutes);
+    const { startDate, endDate } = calculateDropDates(draggedEvent, snappedDate);
+    const updatedEvent = {
+      ...draggedEvent,
+      startDate,
+      endDate
+    };
+    updateEvent(updatedEvent);
+    onDragEnd?.(updatedEvent, new Date(startDate), new Date(endDate));
+    setDraggedEvent(null);
+  }, [draggedEvent, snapMinutes, updateEvent, onDragEnd, setDraggedEvent]);
+  const contextValue = React14.useMemo(
+    () => ({
+      draggedEvent,
+      setDraggedEvent,
+      isDragging
+    }),
+    [draggedEvent, setDraggedEvent, isDragging]
+  );
+  return /* @__PURE__ */ jsx(DragContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(DragDropHandler, { onDrop: handleDrop, children }) });
+}
+function useDrag() {
+  const context = React14.useContext(DragContext);
+  if (!context) {
+    throw new Error("useDrag must be used within a DragProvider");
+  }
+  return context;
+}
+function DragDropHandler({ children, onDrop }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function DraggableEvent({
+  event,
+  children,
+  disabled = false
+}) {
+  const { setDraggedEvent, isDragging, draggedEvent } = useDrag();
+  const isDragged = draggedEvent?.id === event.id;
+  const handleDragStart = (e) => {
+    if (disabled) return;
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", event.id);
+    setDraggedEvent(event);
+  };
+  const handleDragEnd = () => {
+    setDraggedEvent(null);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      draggable: !disabled,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      className: isDragged ? "opacity-50" : "",
+      style: { cursor: disabled ? "default" : "grab" },
+      children
+    }
+  );
+}
+function DroppableZone({
+  date,
+  children,
+  onDrop,
+  className
+}) {
+  const { draggedEvent, setDraggedEvent } = useDrag();
+  const { updateEvent } = useEventCalendar();
+  const [isOver, setIsOver] = React14.useState(false);
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setIsOver(true);
+  };
+  const handleDragLeave = () => {
+    setIsOver(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsOver(false);
+    if (!draggedEvent) return;
+    const { startDate, endDate } = calculateDropDates(draggedEvent, date);
+    const updatedEvent = {
+      ...draggedEvent,
+      startDate,
+      endDate
+    };
+    updateEvent(updatedEvent);
+    onDrop?.(updatedEvent, date);
+    setDraggedEvent(null);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      className,
+      "data-drag-over": isOver,
+      children
+    }
+  );
+}
+function useDroppable({ date, hour, minute = 0, onDrop }) {
+  const { draggedEvent, setDraggedEvent } = useDrag();
+  const { updateEvent } = useEventCalendar();
+  const [isOver, setIsOver] = React14.useState(false);
+  const dropTargetDate = React14.useMemo(() => {
+    const targetDate = new Date(date);
+    if (hour !== void 0) {
+      targetDate.setHours(hour, minute, 0, 0);
+    }
+    return targetDate;
+  }, [date, hour, minute]);
+  const handleDragOver = React14.useCallback((e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (!isOver) setIsOver(true);
+  }, [isOver]);
+  const handleDragLeave = React14.useCallback(() => {
+    setIsOver(false);
+  }, []);
+  const handleDrop = React14.useCallback((e) => {
+    e.preventDefault();
+    setIsOver(false);
+    if (!draggedEvent) return;
+    const { startDate, endDate } = calculateDropDates(draggedEvent, dropTargetDate);
+    const updatedEvent = {
+      ...draggedEvent,
+      startDate,
+      endDate
+    };
+    updateEvent(updatedEvent);
+    onDrop?.(updatedEvent, dropTargetDate);
+    setDraggedEvent(null);
+  }, [draggedEvent, dropTargetDate, updateEvent, onDrop, setDraggedEvent]);
+  return {
+    isOver,
+    dropProps: {
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      "data-drag-over": isOver
+    }
+  };
+}
+function useDraggable(event, disabled = false) {
+  const { setDraggedEvent, draggedEvent } = useDrag();
+  const isDragged = draggedEvent?.id === event.id;
+  const handleDragStart = React14.useCallback((e) => {
+    if (disabled) return;
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", event.id);
+    setDraggedEvent(event);
+  }, [disabled, event, setDraggedEvent]);
+  const handleDragEnd = React14.useCallback(() => {
+    setDraggedEvent(null);
+  }, [setDraggedEvent]);
+  return {
+    isDragged,
+    dragProps: {
+      draggable: !disabled,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      style: { cursor: disabled ? "default" : "grab" }
+    }
+  };
+}
+var WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function DraggableEventWrapper({
+  event,
+  children
+}) {
+  const { isDragged, dragProps } = useDraggable(event);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...dragProps,
+      className: cn(
+        "transition-opacity",
+        isDragged && "opacity-50"
+      ),
+      children
+    }
+  );
+}
+function MonthView({
+  className,
+  maxEventsPerDay = 3,
+  weekStartsOn = 0,
+  onEventClick,
+  onDateClick,
+  onMoreClick
+}) {
+  const { selectedDate, badgeVariant, setSelectedDate, setView } = useEventCalendar();
+  const filteredEvents = useFilteredEvents();
+  const { singleDayEvents, multiDayEvents } = React14.useMemo(
+    () => splitEventsByDuration(filteredEvents),
+    [filteredEvents]
+  );
+  const cells = React14.useMemo(
+    () => getCalendarCells(selectedDate),
+    [selectedDate]
+  );
+  const eventPositions = React14.useMemo(
+    () => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate),
+    [multiDayEvents, singleDayEvents, selectedDate]
+  );
+  const allEvents = [...multiDayEvents, ...singleDayEvents];
+  const handleDateClick = (date) => {
+    setSelectedDate(date);
+    setView("day");
+    onDateClick?.(date);
+  };
+  const handleMoreClick = (date, events) => {
+    setSelectedDate(date);
+    setView("day");
+    onMoreClick?.(date, events);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 divide-x divide-border/50", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-center justify-center py-2",
+        children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: day })
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 overflow-hidden", children: cells.map((cell) => /* @__PURE__ */ jsx(
+      DayCell,
+      {
+        cell,
+        events: allEvents,
+        eventPositions,
+        selectedDate,
+        badgeVariant,
+        maxEvents: maxEventsPerDay,
+        onDateClick: handleDateClick,
+        onEventClick,
+        onMoreClick: handleMoreClick
+      },
+      cell.date.toISOString()
+    )) })
+  ] });
+}
+function DayCell({
+  cell,
+  events,
+  eventPositions,
+  selectedDate,
+  badgeVariant,
+  maxEvents,
+  onDateClick,
+  onEventClick,
+  onMoreClick
+}) {
+  const { date, currentMonth } = cell;
+  const isCurrentDay = isToday(date);
+  const isSelectedDay = isSameDay(date, selectedDate);
+  const { isOver, dropProps } = useDroppable({ date });
+  const cellEvents = getMonthCellEvents(date, events, eventPositions);
+  const positionedEvents = cellEvents.filter((e) => e.position !== -1);
+  const hiddenEvents = cellEvents.filter((e) => e.position === -1);
+  const slots = [null, null, null];
+  positionedEvents.forEach((event) => {
+    if (event.position >= 0 && event.position < 3) {
+      slots[event.position] = event;
+    }
+  });
+  const hiddenCount = hiddenEvents.length + positionedEvents.filter((e) => e.position >= 3).length;
+  const isEventStart = (event) => isSameDay(parseISO(event.startDate), date);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...dropProps,
+      className: cn(
+        "relative min-h-[120px] border-b border-r border-border/50 p-1 transition-colors",
+        !currentMonth && "bg-muted/30",
+        isOver && "bg-primary/10 ring-2 ring-primary/50 ring-inset"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onDateClick(date),
+            className: cn(
+              "mb-1 flex size-7 items-center justify-center text-sm transition-colors",
+              "hover:bg-muted rounded-sm",
+              isCurrentDay && "bg-primary text-primary-foreground hover:bg-primary/90 rounded-sm",
+              isSelectedDay && !isCurrentDay && "bg-muted font-semibold rounded-sm",
+              !currentMonth && "text-muted-foreground"
+            ),
+            children: cell.day
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+          slots.map((event, index) => {
+            if (!event) {
+              return /* @__PURE__ */ jsx("div", { className: "h-5" }, `empty-${index}`);
+            }
+            const showTitle = isEventStart(event) || startOfDay(date).getDay() === 0;
+            return /* @__PURE__ */ jsx(DraggableEventWrapper, { event, children: /* @__PURE__ */ jsx(
+              EventBadge,
+              {
+                event,
+                variant: badgeVariant,
+                compact: true,
+                showTime: showTitle,
+                onClick: (e) => onEventClick?.(e),
+                className: cn(
+                  "w-full",
+                  // If not showing title, make it appear as a continuation
+                  !showTitle && "rounded-l-none border-l-0"
+                )
+              }
+            ) }, event.id);
+          }),
+          hiddenCount > 0 && /* @__PURE__ */ jsx(
+            MoreEvents,
+            {
+              count: hiddenCount,
+              onClick: () => onMoreClick(date, cellEvents)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function DraggableEventWrapper2({
+  event,
+  children,
+  className,
+  style
+}) {
+  const { isDragged, dragProps } = useDraggable(event);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...dragProps,
+      className: cn(
+        className,
+        "transition-opacity",
+        isDragged && "opacity-50"
+      ),
+      style,
+      children
+    }
+  );
+}
+function DroppableTimeSlot({
+  date,
+  hour,
+  minute,
+  className,
+  onClick
+}) {
+  const { isOver, dropProps } = useDroppable({ date, hour, minute });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...dropProps,
+      onClick,
+      className: cn(
+        className,
+        "cursor-pointer transition-colors hover:bg-accent",
+        isOver && "bg-primary/20"
+      )
+    }
+  );
+}
+function WeekView({
+  className,
+  weekStartsOn = 0,
+  onEventClick,
+  onDateClick,
+  onTimeClick
+}) {
+  const {
+    selectedDate,
+    badgeVariant,
+    workingHours,
+    visibleHours
+  } = useEventCalendar();
+  const filteredEvents = useFilteredEvents();
+  const { singleDayEvents, multiDayEvents } = React14.useMemo(
+    () => splitEventsByDuration(filteredEvents),
+    [filteredEvents]
+  );
+  const { hours, earliestEventHour, latestEventHour } = getVisibleHours(
+    visibleHours,
+    singleDayEvents
+  );
+  const weekStart = startOfWeek(selectedDate, { weekStartsOn });
+  const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center border-b py-4 text-sm text-muted-foreground sm:hidden", children: [
+      /* @__PURE__ */ jsx("p", { children: "Weekly view is not available on smaller devices." }),
+      /* @__PURE__ */ jsx("p", { children: "Please switch to daily or monthly view." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("hidden flex-col sm:flex", className), children: [
+      /* @__PURE__ */ jsx(
+        WeekViewMultiDayEventsRow,
+        {
+          selectedDate,
+          multiDayEvents
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex border-b border-border/50", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-18" }),
+        /* @__PURE__ */ jsx("div", { className: "grid flex-1 grid-cols-7 divide-x divide-border/50 border-l border-border/50", children: weekDays.map((day, index) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "py-2 text-center text-xs font-medium text-muted-foreground",
+            children: [
+              format(day, "EE"),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "ml-1 font-semibold text-foreground", children: format(day, "d") })
+            ]
+          },
+          index
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "h-[736px]", type: "always", children: /* @__PURE__ */ jsxs("div", { className: "flex overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative w-18", children: hours.map((hour, index) => /* @__PURE__ */ jsx("div", { className: "relative", style: { height: "96px" }, children: /* @__PURE__ */ jsx("div", { className: "absolute -top-3 right-2 flex h-6 items-center", children: index !== 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: format((/* @__PURE__ */ new Date()).setHours(hour, 0, 0, 0), "hh a") }) }) }, hour)) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 border-l border-border/50", children: [
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 divide-x divide-border/50", children: weekDays.map((day, dayIndex) => {
+            const dayEvents = singleDayEvents.filter(
+              (event) => isSameDay(parseISO(event.startDate), day) || isSameDay(parseISO(event.endDate), day)
+            );
+            const groupedEvents = groupEvents(dayEvents);
+            return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              hours.map((hour, index) => {
+                const isDisabled = !isWorkingHour(day, hour, workingHours);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "relative",
+                      isDisabled && "bg-[repeating-linear-gradient(45deg,transparent,transparent_5px,rgba(0,0,0,0.04)_5px,rgba(0,0,0,0.04)_10px)] dark:bg-[repeating-linear-gradient(45deg,transparent,transparent_5px,rgba(255,255,255,0.04)_5px,rgba(255,255,255,0.04)_10px)]"
+                    ),
+                    style: { height: "96px" },
+                    children: [
+                      index !== 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 border-b border-border/40" }),
+                      /* @__PURE__ */ jsx(
+                        DroppableTimeSlot,
+                        {
+                          date: day,
+                          hour,
+                          minute: 0,
+                          className: "absolute inset-x-0 top-0 h-[24px]",
+                          onClick: () => onTimeClick?.(day, hour, 0)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        DroppableTimeSlot,
+                        {
+                          date: day,
+                          hour,
+                          minute: 15,
+                          className: "absolute inset-x-0 top-[24px] h-[24px]",
+                          onClick: () => onTimeClick?.(day, hour, 15)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 border-b border-dashed border-border/30" }),
+                      /* @__PURE__ */ jsx(
+                        DroppableTimeSlot,
+                        {
+                          date: day,
+                          hour,
+                          minute: 30,
+                          className: "absolute inset-x-0 top-[48px] h-[24px]",
+                          onClick: () => onTimeClick?.(day, hour, 30)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        DroppableTimeSlot,
+                        {
+                          date: day,
+                          hour,
+                          minute: 45,
+                          className: "absolute inset-x-0 top-[72px] h-[24px]",
+                          onClick: () => onTimeClick?.(day, hour, 45)
+                        }
+                      )
+                    ]
+                  },
+                  hour
+                );
+              }),
+              groupedEvents.map(
+                (group, groupIndex) => group.map((event) => {
+                  let style = getEventBlockStyle(
+                    event,
+                    day,
+                    groupIndex,
+                    groupedEvents.length,
+                    { from: earliestEventHour}
+                  );
+                  const hasOverlap = groupedEvents.some(
+                    (otherGroup, otherIndex) => otherIndex !== groupIndex && otherGroup.some(
+                      (otherEvent) => areIntervalsOverlapping(
+                        {
+                          start: parseISO(event.startDate),
+                          end: parseISO(event.endDate)
+                        },
+                        {
+                          start: parseISO(otherEvent.startDate),
+                          end: parseISO(otherEvent.endDate)
+                        }
+                      )
+                    )
+                  );
+                  if (!hasOverlap) {
+                    style = { ...style, width: "100%", left: "0%" };
+                  }
+                  return /* @__PURE__ */ jsx(
+                    DraggableEventWrapper2,
+                    {
+                      event,
+                      className: "absolute px-0.5 py-0.5",
+                      style,
+                      children: /* @__PURE__ */ jsx(
+                        EventBadge,
+                        {
+                          event,
+                          variant: badgeVariant,
+                          showTime: true,
+                          onClick: (e) => onEventClick?.(e),
+                          className: "h-full w-full"
+                        }
+                      )
+                    },
+                    event.id
+                  );
+                })
+              )
+            ] }, dayIndex);
+          }) }),
+          weekDays.some((day) => isToday(day)) && /* @__PURE__ */ jsx(
+            CalendarTimeline,
+            {
+              firstVisibleHour: earliestEventHour,
+              lastVisibleHour: latestEventHour
+            }
+          )
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+function WeekViewMultiDayEventsRow({
+  selectedDate,
+  multiDayEvents
+}) {
+  const { badgeVariant } = useEventCalendar();
+  if (multiDayEvents.length === 0) return null;
+  const weekStart = startOfWeek(selectedDate);
+  const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
+  return /* @__PURE__ */ jsxs("div", { className: "hidden border-b sm:flex", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-18 shrink-0" }),
+    /* @__PURE__ */ jsx("div", { className: "grid flex-1 grid-cols-7 divide-x border-l", children: weekDays.map((day, index) => {
+      const dayMultiEvents = multiDayEvents.filter((event) => {
+        const start = parseISO(event.startDate);
+        const end = parseISO(event.endDate);
+        return day >= start && day <= end;
+      });
+      return /* @__PURE__ */ jsxs("div", { className: "min-h-[32px] space-y-1 p-1", children: [
+        dayMultiEvents.slice(0, 2).map((event) => /* @__PURE__ */ jsx(
+          EventBadge,
+          {
+            event,
+            variant: badgeVariant,
+            compact: true,
+            className: "w-full"
+          },
+          event.id
+        )),
+        dayMultiEvents.length > 2 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground text-center", children: [
+          "+",
+          dayMultiEvents.length - 2,
+          " more"
+        ] })
+      ] }, index);
+    }) })
+  ] });
+}
+function CalendarTimeline({
+  firstVisibleHour,
+  lastVisibleHour
+}) {
+  const [currentTime, setCurrentTime] = React14.useState(/* @__PURE__ */ new Date());
+  React14.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(/* @__PURE__ */ new Date());
+    }, 6e4);
+    return () => clearInterval(interval);
+  }, []);
+  const currentHour = currentTime.getHours();
+  const currentMinute = currentTime.getMinutes();
+  if (currentHour < firstVisibleHour || currentHour >= lastVisibleHour) {
+    return null;
+  }
+  const minutesSinceStart = (currentHour - firstVisibleHour) * 60 + currentMinute;
+  const totalMinutes = (lastVisibleHour - firstVisibleHour) * 60;
+  const topPercent = minutesSinceStart / totalMinutes * 100;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "pointer-events-none absolute inset-x-0 z-30 flex items-center",
+      style: { top: `${topPercent}%` },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "size-3 -translate-x-1/2 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "h-0.5 flex-1 bg-red-500" })
+      ]
+    }
+  );
+}
+function DraggableEventWrapper3({
+  event,
+  children,
+  className,
+  style
+}) {
+  const { isDragged, dragProps } = useDraggable(event);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...dragProps,
+      className: cn(
+        className,
+        "transition-opacity",
+        isDragged && "opacity-50"
+      ),
+      style,
+      children
+    }
+  );
+}
+function DroppableTimeSlot2({
+  date,
+  hour,
+  minute,
+  className,
+  onClick
+}) {
+  const { isOver, dropProps } = useDroppable({ date, hour, minute });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...dropProps,
+      onClick,
+      className: cn(
+        className,
+        "cursor-pointer transition-colors hover:bg-accent",
+        isOver && "bg-primary/20"
+      )
+    }
+  );
+}
+function DayView({
+  className,
+  showSidebar = true,
+  onEventClick,
+  onTimeClick
+}) {
+  const {
+    selectedDate,
+    setSelectedDate,
+    badgeVariant,
+    users,
+    workingHours,
+    visibleHours
+  } = useEventCalendar();
+  const filteredEvents = useFilteredEvents();
+  const { singleDayEvents, multiDayEvents } = React14.useMemo(
+    () => splitEventsByDuration(filteredEvents),
+    [filteredEvents]
+  );
+  const { hours, earliestEventHour, latestEventHour } = getVisibleHours(
+    visibleHours,
+    singleDayEvents
+  );
+  const currentEvents = React14.useMemo(() => {
+    if (!isToday(selectedDate)) return [];
+    return getCurrentEvents(singleDayEvents);
+  }, [singleDayEvents, selectedDate]);
+  const dayEvents = singleDayEvents.filter((event) => {
+    const eventDate = parseISO(event.startDate);
+    return eventDate.getDate() === selectedDate.getDate() && eventDate.getMonth() === selectedDate.getMonth() && eventDate.getFullYear() === selectedDate.getFullYear();
+  });
+  const groupedEvents = groupEvents(dayEvents);
+  const handleDateSelect = (date) => {
+    if (date) {
+      setSelectedDate(date);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
+      multiDayEvents.length > 0 && /* @__PURE__ */ jsx(
+        DayViewMultiDayEventsRow,
+        {
+          selectedDate,
+          multiDayEvents
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex border-b border-border/50", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-18" }),
+        /* @__PURE__ */ jsxs("span", { className: "flex-1 border-l border-border/50 py-2 text-center text-xs font-medium text-muted-foreground", children: [
+          format(selectedDate, "EE"),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: format(selectedDate, "d") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "h-[800px]", type: "always", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative w-18", children: hours.map((hour, index) => /* @__PURE__ */ jsx("div", { className: "relative", style: { height: "96px" }, children: /* @__PURE__ */ jsx("div", { className: "absolute -top-3 right-2 flex h-6 items-center", children: index !== 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: format((/* @__PURE__ */ new Date()).setHours(hour, 0, 0, 0), "hh a") }) }) }, hour)) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 border-l border-border/50", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            hours.map((hour, index) => {
+              const isDisabled = !isWorkingHour(selectedDate, hour, workingHours);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative",
+                    isDisabled && "bg-[repeating-linear-gradient(45deg,transparent,transparent_5px,rgba(0,0,0,0.04)_5px,rgba(0,0,0,0.04)_10px)] dark:bg-[repeating-linear-gradient(45deg,transparent,transparent_5px,rgba(255,255,255,0.04)_5px,rgba(255,255,255,0.04)_10px)]"
+                  ),
+                  style: { height: "96px" },
+                  children: [
+                    index !== 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 border-b border-border/40" }),
+                    /* @__PURE__ */ jsx(
+                      DroppableTimeSlot2,
+                      {
+                        date: selectedDate,
+                        hour,
+                        minute: 0,
+                        className: "absolute inset-x-0 top-0 h-[24px]",
+                        onClick: () => onTimeClick?.(selectedDate, hour, 0)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      DroppableTimeSlot2,
+                      {
+                        date: selectedDate,
+                        hour,
+                        minute: 15,
+                        className: "absolute inset-x-0 top-[24px] h-[24px]",
+                        onClick: () => onTimeClick?.(selectedDate, hour, 15)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 border-b border-dashed border-border/30" }),
+                    /* @__PURE__ */ jsx(
+                      DroppableTimeSlot2,
+                      {
+                        date: selectedDate,
+                        hour,
+                        minute: 30,
+                        className: "absolute inset-x-0 top-[48px] h-[24px]",
+                        onClick: () => onTimeClick?.(selectedDate, hour, 30)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      DroppableTimeSlot2,
+                      {
+                        date: selectedDate,
+                        hour,
+                        minute: 45,
+                        className: "absolute inset-x-0 top-[72px] h-[24px]",
+                        onClick: () => onTimeClick?.(selectedDate, hour, 45)
+                      }
+                    )
+                  ]
+                },
+                hour
+              );
+            }),
+            groupedEvents.map(
+              (group, groupIndex) => group.map((event) => {
+                let style = getEventBlockStyle(
+                  event,
+                  selectedDate,
+                  groupIndex,
+                  groupedEvents.length,
+                  { from: earliestEventHour}
+                );
+                const hasOverlap = groupedEvents.some(
+                  (otherGroup, otherIndex) => otherIndex !== groupIndex && otherGroup.some(
+                    (otherEvent) => areIntervalsOverlapping(
+                      {
+                        start: parseISO(event.startDate),
+                        end: parseISO(event.endDate)
+                      },
+                      {
+                        start: parseISO(otherEvent.startDate),
+                        end: parseISO(otherEvent.endDate)
+                      }
+                    )
+                  )
+                );
+                if (!hasOverlap) {
+                  style = { ...style, width: "100%", left: "0%" };
+                }
+                return /* @__PURE__ */ jsx(
+                  DraggableEventWrapper3,
+                  {
+                    event,
+                    className: "absolute px-1 py-0.5",
+                    style,
+                    children: /* @__PURE__ */ jsx(
+                      EventBadge,
+                      {
+                        event,
+                        variant: badgeVariant,
+                        showTime: true,
+                        onClick: (e) => onEventClick?.(e),
+                        className: "h-full w-full"
+                      }
+                    )
+                  },
+                  event.id
+                );
+              })
+            )
+          ] }),
+          isToday(selectedDate) && /* @__PURE__ */ jsx(
+            CalendarTimeline2,
+            {
+              firstVisibleHour: earliestEventHour,
+              lastVisibleHour: latestEventHour
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    showSidebar && /* @__PURE__ */ jsxs("div", { className: "hidden w-64 divide-y border-l md:block", children: [
+      /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          className: "mx-auto w-fit",
+          mode: "single",
+          selected: selectedDate,
+          onSelect: handleDateSelect
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3", children: [
+        currentEvents.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 px-4 pt-4", children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative mt-[5px] flex size-2.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75" }),
+            /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-2.5 rounded-full bg-green-600" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Happening now" })
+        ] }) : /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm italic text-muted-foreground", children: "No appointments or consultations at the moment" }),
+        currentEvents.length > 0 && /* @__PURE__ */ jsx(ScrollArea, { className: "h-[422px] px-4", type: "always", children: /* @__PURE__ */ jsx("div", { className: "space-y-6 pb-4", children: currentEvents.map((event) => {
+          const user = users.find((u) => u.id === event.user.id);
+          return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm font-semibold", children: event.title }),
+            user && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(User, { className: "size-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: user.name })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Calendar$1, { className: "size-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: format(/* @__PURE__ */ new Date(), "MMM d, yyyy") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "size-3.5" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+                format(parseISO(event.startDate), "h:mm a"),
+                " -",
+                " ",
+                format(parseISO(event.endDate), "h:mm a")
+              ] })
+            ] })
+          ] }, event.id);
+        }) }) })
+      ] })
+    ] })
+  ] });
+}
+function DayViewMultiDayEventsRow({
+  selectedDate,
+  multiDayEvents
+}) {
+  const { badgeVariant } = useEventCalendar();
+  const relevantEvents = multiDayEvents.filter((event) => {
+    const start = parseISO(event.startDate);
+    const end = parseISO(event.endDate);
+    return selectedDate >= start && selectedDate <= end;
+  });
+  if (relevantEvents.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex border-b", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-18 shrink-0" }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-1 border-l p-2", children: relevantEvents.map((event) => /* @__PURE__ */ jsx(
+      EventBadge,
+      {
+        event,
+        variant: badgeVariant,
+        className: "w-full"
+      },
+      event.id
+    )) })
+  ] });
+}
+function CalendarTimeline2({
+  firstVisibleHour,
+  lastVisibleHour
+}) {
+  const [currentTime, setCurrentTime] = React14.useState(/* @__PURE__ */ new Date());
+  React14.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(/* @__PURE__ */ new Date());
+    }, 6e4);
+    return () => clearInterval(interval);
+  }, []);
+  const currentHour = currentTime.getHours();
+  const currentMinute = currentTime.getMinutes();
+  if (currentHour < firstVisibleHour || currentHour >= lastVisibleHour) {
+    return null;
+  }
+  const minutesSinceStart = (currentHour - firstVisibleHour) * 60 + currentMinute;
+  const totalMinutes = (lastVisibleHour - firstVisibleHour) * 60;
+  const topPercent = minutesSinceStart / totalMinutes * 100;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "pointer-events-none absolute inset-x-0 z-30 flex items-center",
+      style: { top: `${topPercent}%` },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "size-3 -translate-x-1/2 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "h-0.5 flex-1 bg-red-500" })
+      ]
+    }
+  );
+}
+function YearView({
+  className,
+  weekStartsOn = 0,
+  onMonthClick,
+  onDateClick
+}) {
+  const { selectedDate, setSelectedDate, setView } = useEventCalendar();
+  const filteredEvents = useFilteredEvents();
+  const months = React14.useMemo(() => {
+    const yearStart = startOfYear(selectedDate);
+    return Array.from({ length: 12 }, (_, i) => addMonths(yearStart, i));
+  }, [selectedDate]);
+  const handleMonthClick = (date) => {
+    setSelectedDate(date);
+    setView("month");
+    onMonthClick?.(date);
+  };
+  const handleDateClick = (date) => {
+    setSelectedDate(date);
+    setView("day");
+    onDateClick?.(date);
+  };
+  return /* @__PURE__ */ jsx(ScrollArea, { className: cn("h-full", className), type: "always", children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: months.map((month) => /* @__PURE__ */ jsx(
+    YearViewMonth,
+    {
+      month,
+      events: filteredEvents,
+      onMonthClick: () => handleMonthClick(month),
+      onDateClick: handleDateClick
+    },
+    month.toString()
+  )) }) }) });
+}
+function YearViewMonth({
+  month,
+  events,
+  onMonthClick,
+  onDateClick
+}) {
+  const cells = getCalendarCells(month);
+  const monthEvents = events.filter((event) => {
+    const eventStart = parseISO(event.startDate);
+    return isSameMonth(eventStart, month);
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-border/50 bg-card p-3", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onMonthClick,
+        className: "mb-2 w-full text-left text-sm font-semibold transition-colors hover:text-primary",
+        children: [
+          format(month, "MMMM"),
+          monthEvents.length > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs font-normal text-muted-foreground", children: [
+            "(",
+            monthEvents.length,
+            ")"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mb-1 grid grid-cols-7", children: ["S", "M", "T", "W", "T", "F", "S"].map((day, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-center text-[10px] font-medium text-muted-foreground",
+        children: day
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: cells.map((cell) => /* @__PURE__ */ jsx(
+      YearViewDayCell,
+      {
+        cell,
+        month,
+        events,
+        onDateClick
+      },
+      cell.date.toISOString()
+    )) })
+  ] });
+}
+function YearViewDayCell({
+  cell,
+  month,
+  events,
+  onDateClick
+}) {
+  const { date, currentMonth } = cell;
+  const isCurrentDay = isToday(date);
+  const dayEvents = events.filter((event) => {
+    const eventStart = parseISO(event.startDate);
+    const eventEnd = parseISO(event.endDate);
+    return date >= eventStart && date <= eventEnd || isSameDay(eventStart, date) || isSameDay(eventEnd, date);
+  });
+  const hasEvents = dayEvents.length > 0;
+  if (!currentMonth) {
+    return /* @__PURE__ */ jsx("div", { className: "aspect-square" });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onDateClick(date),
+      className: cn(
+        "relative flex aspect-square items-center justify-center text-[11px] transition-colors",
+        "hover:bg-muted rounded-sm",
+        isCurrentDay && "bg-primary text-primary-foreground rounded-sm hover:bg-primary/90"
+      ),
+      children: [
+        cell.day,
+        hasEvents && !isCurrentDay && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0.5 left-1/2 size-1 -translate-x-1/2 rounded-full bg-primary" })
+      ]
+    }
+  );
+}
+var colorClasses2 = {
+  blue: { border: "border-l-blue-500", bg: "bg-blue-50 dark:bg-blue-950/20" },
+  green: { border: "border-l-green-500", bg: "bg-green-50 dark:bg-green-950/20" },
+  red: { border: "border-l-red-500", bg: "bg-red-50 dark:bg-red-950/20" },
+  yellow: { border: "border-l-yellow-500", bg: "bg-yellow-50 dark:bg-yellow-950/20" },
+  purple: { border: "border-l-purple-500", bg: "bg-purple-50 dark:bg-purple-950/20" },
+  orange: { border: "border-l-primary", bg: "bg-orange-50 dark:bg-orange-950/20" }
+};
+function AgendaView({
+  className,
+  emptyMessage = "No events scheduled for the selected month",
+  onEventClick,
+  onDateClick
+}) {
+  const { selectedDate, setSelectedDate, setView } = useEventCalendar();
+  const filteredEvents = useFilteredEvents();
+  const { singleDayEvents, multiDayEvents } = React14.useMemo(
+    () => splitEventsByDuration(filteredEvents),
+    [filteredEvents]
+  );
+  const eventsByDay = React14.useMemo(() => {
+    const allDates = /* @__PURE__ */ new Map();
+    singleDayEvents.forEach((event) => {
+      const eventDate = parseISO(event.startDate);
+      if (!isSameMonth(eventDate, selectedDate)) return;
+      const dateKey = format(eventDate, "yyyy-MM-dd");
+      if (!allDates.has(dateKey)) {
+        allDates.set(dateKey, {
+          date: startOfDay(eventDate),
+          events: [],
+          multiDayEvents: []
+        });
+      }
+      allDates.get(dateKey)?.events.push(event);
+    });
+    multiDayEvents.forEach((event) => {
+      const eventStart = parseISO(event.startDate);
+      const eventEnd = parseISO(event.endDate);
+      let currentDate = startOfDay(eventStart);
+      const lastDate = endOfDay(eventEnd);
+      while (currentDate <= lastDate) {
+        if (isSameMonth(currentDate, selectedDate)) {
+          const dateKey = format(currentDate, "yyyy-MM-dd");
+          if (!allDates.has(dateKey)) {
+            allDates.set(dateKey, {
+              date: new Date(currentDate),
+              events: [],
+              multiDayEvents: []
+            });
+          }
+          allDates.get(dateKey)?.multiDayEvents.push(event);
+        }
+        currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1));
+      }
+    });
+    return Array.from(allDates.values()).sort(
+      (a, b) => a.date.getTime() - b.date.getTime()
+    );
+  }, [singleDayEvents, multiDayEvents, selectedDate]);
+  const hasAnyEvents = singleDayEvents.length > 0 || multiDayEvents.length > 0;
+  const handleDateClick = (date) => {
+    setSelectedDate(date);
+    setView("day");
+    onDateClick?.(date);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("h-[800px]", className), children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", type: "always", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 p-4", children: [
+    eventsByDay.map((dayGroup) => /* @__PURE__ */ jsx(
+      AgendaDayGroup,
+      {
+        date: dayGroup.date,
+        events: dayGroup.events,
+        multiDayEvents: dayGroup.multiDayEvents,
+        onDateClick: handleDateClick,
+        onEventClick
+      },
+      format(dayGroup.date, "yyyy-MM-dd")
+    )),
+    !hasAnyEvents && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-20 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(CalendarX2, { className: "size-10" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm md:text-base", children: emptyMessage })
+    ] })
+  ] }) }) });
+}
+function AgendaDayGroup({
+  date,
+  events,
+  multiDayEvents,
+  onDateClick,
+  onEventClick
+}) {
+  const isCurrentDay = isToday(date);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onDateClick(date),
+        className: cn(
+          "mb-3 flex items-center gap-2 text-left transition-colors hover:text-primary",
+          isCurrentDay && "text-primary"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex size-8 items-center justify-center rounded-full text-sm font-bold",
+                isCurrentDay && "bg-primary text-primary-foreground"
+              ),
+              children: format(date, "d")
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: format(date, "EEEE") }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2 text-muted-foreground", children: format(date, "MMMM d, yyyy") })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 pl-10", children: [
+      multiDayEvents.map((event) => /* @__PURE__ */ jsx(
+        AgendaEventCard,
+        {
+          event,
+          isMultiDay: true,
+          onClick: () => onEventClick?.(event)
+        },
+        `multi-${event.id}`
+      )),
+      events.map((event) => /* @__PURE__ */ jsx(
+        AgendaEventCard,
+        {
+          event,
+          onClick: () => onEventClick?.(event)
+        },
+        event.id
+      ))
+    ] })
+  ] });
+}
+function AgendaEventCard({ event, isMultiDay, onClick }) {
+  const colors = colorClasses2[event.color];
+  const startTime = format(parseISO(event.startDate), "h:mm a");
+  const endTime = format(parseISO(event.endDate), "h:mm a");
+  const getInitials = (name) => {
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex w-full items-start gap-3 rounded-lg border-l-4 p-3 text-left transition-colors",
+        "hover:opacity-90",
+        colors.border,
+        colors.bg
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "size-10 shrink-0", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: event.user.picturePath, alt: event.user.name }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(event.user.name) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          isMultiDay && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Multi-day event" }),
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold truncate", children: event.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: event.user.name }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+            startTime,
+            " - ",
+            endTime
+          ] }),
+          event.description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground line-clamp-2", children: event.description })
+        ] })
+      ]
+    }
+  );
+}
+var VIEW_CONFIG = [
+  { view: "day", icon: List, label: "View by day" },
+  { view: "week", icon: Columns, label: "View by week" },
+  { view: "month", icon: Grid2x2, label: "View by month" },
+  { view: "year", icon: Grid3x3, label: "View by year" },
+  { view: "agenda", icon: CalendarRange, label: "View by agenda" }
+];
+function CalendarHeader({
+  className,
+  showViewSwitcher = true,
+  showUserFilter = true,
+  showBadgeVariant = false,
+  // Hidden by default, controlled via settings
+  showToday = true,
+  showAddButton = true,
+  onAddClick
+}) {
+  const {
+    selectedDate,
+    view,
+    setView,
+    setSelectedDate,
+    selectedUserId,
+    setSelectedUserId,
+    users,
+    badgeVariant,
+    setBadgeVariant,
+    goToPrevious,
+    goToNext
+  } = useEventCalendar();
+  const filteredEvents = useFilteredEvents();
+  const eventCount = filteredEvents.length;
+  const { start: rangeStart, end: rangeEnd } = getViewDateRange(selectedDate, view);
+  const dateRangeLabel = formatDateRange(rangeStart, rangeEnd);
+  const getInitials = (name) => {
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  };
+  const handleTodayClick = () => {
+    setSelectedDate(/* @__PURE__ */ new Date());
+  };
+  const today = /* @__PURE__ */ new Date();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4 border-b border-border p-4 lg:flex-row lg:items-center lg:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleTodayClick,
+              className: "flex size-14 flex-col items-start overflow-hidden rounded-lg border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "flex h-6 w-full items-center justify-center bg-primary text-center text-xs font-semibold text-primary-foreground", children: format(today, "MMM").toUpperCase() }),
+                /* @__PURE__ */ jsx("p", { className: "flex w-full flex-1 items-center justify-center text-lg font-bold", children: today.getDate() })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-lg font-semibold", children: [
+                format(selectedDate, "MMMM"),
+                " ",
+                selectedDate.getFullYear()
+              ] }),
+              /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "px-1.5", children: [
+                eventCount,
+                " event",
+                eventCount !== 1 ? "s" : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  className: "size-7 [&_svg]:size-4",
+                  onClick: goToPrevious,
+                  children: [
+                    /* @__PURE__ */ jsx(ChevronLeft, {}),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: dateRangeLabel }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  className: "size-7 [&_svg]:size-4",
+                  onClick: goToNext,
+                  children: [
+                    /* @__PURE__ */ jsx(ChevronRight, {}),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next" })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1.5 sm:flex-row sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1.5", children: [
+            showViewSwitcher && /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-1 rounded-full border border-border px-1 py-1", children: VIEW_CONFIG.map((config, index) => {
+              const Icon2 = config.icon;
+              const isFirst = index === 0;
+              const isLast = index === VIEW_CONFIG.length - 1;
+              const isActive = view === config.view;
+              return /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": config.label,
+                  size: "icon",
+                  variant: isActive ? "default" : "ghost",
+                  className: cn(
+                    "size-8 border-0 [&_svg]:size-4",
+                    isFirst && "rounded-l-full rounded-r-sm",
+                    isLast && "rounded-r-full rounded-l-sm",
+                    !isFirst && !isLast && "rounded-sm"
+                  ),
+                  onClick: () => setView(config.view),
+                  children: /* @__PURE__ */ jsx(Icon2, { strokeWidth: 1.8 })
+                },
+                config.view
+              );
+            }) }),
+            showUserFilter && users.length > 0 && /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: selectedUserId || "all",
+                onValueChange: (value) => setSelectedUserId(value === "all" ? null : value),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "flex-1 md:w-48", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxs(SelectContent, { align: "end", children: [
+                    /* @__PURE__ */ jsx(SelectItem, { value: "all", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex -space-x-2", children: [
+                        users.slice(0, 2).map((user) => /* @__PURE__ */ jsxs(Avatar, { className: "size-6 border-2 border-background", children: [
+                          /* @__PURE__ */ jsx(AvatarImage, { src: user.picturePath, alt: user.name }),
+                          /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px]", children: getInitials(user.name) })
+                        ] }, user.id)),
+                        users.length > 2 && /* @__PURE__ */ jsxs("div", { className: "flex size-6 items-center justify-center rounded-full border-2 border-background bg-muted text-[10px] font-medium", children: [
+                          "+",
+                          users.length - 2
+                        ] })
+                      ] }),
+                      "All"
+                    ] }) }),
+                    users.map((user) => /* @__PURE__ */ jsx(SelectItem, { value: user.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxs(Avatar, { className: "size-6", children: [
+                        /* @__PURE__ */ jsx(AvatarImage, { src: user.picturePath, alt: user.name }),
+                        /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px]", children: getInitials(user.name) })
+                      ] }),
+                      /* @__PURE__ */ jsx("p", { className: "truncate", children: user.name })
+                    ] }) }, user.id))
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          showAddButton && /* @__PURE__ */ jsxs(Button, { onClick: onAddClick, className: "w-full sm:w-auto", children: [
+            /* @__PURE__ */ jsx(Plus, {}),
+            "Add Event"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CalendarHeaderCompact({
+  className,
+  showAddButton = true,
+  onAddClick
+}) {
+  const {
+    selectedDate,
+    setSelectedDate,
+    view,
+    setView,
+    goToPrevious,
+    goToNext
+  } = useEventCalendar();
+  const filteredEvents = useFilteredEvents();
+  const eventCount = filteredEvents.length;
+  const today = /* @__PURE__ */ new Date();
+  const handleTodayClick = () => {
+    setSelectedDate(/* @__PURE__ */ new Date());
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between border-b border-border p-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleTodayClick,
+              className: "flex size-10 flex-col items-start overflow-hidden rounded border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "flex h-4 w-full items-center justify-center bg-primary text-center text-[8px] font-semibold text-primary-foreground", children: format(today, "MMM").toUpperCase() }),
+                /* @__PURE__ */ jsx("p", { className: "flex w-full flex-1 items-center justify-center text-sm font-bold", children: today.getDate() })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: format(selectedDate, "MMM yyyy") }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              eventCount,
+              " events"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-8", onClick: goToPrevious, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }) }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-8", onClick: goToNext, children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-2 inline-flex items-center gap-0.5 rounded-full border border-border px-0.5 py-0.5", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "icon",
+                variant: view === "day" ? "default" : "ghost",
+                className: "size-6 rounded-l-full rounded-r-sm border-0 [&_svg]:size-3",
+                onClick: () => setView("day"),
+                children: /* @__PURE__ */ jsx(List, { strokeWidth: 1.8 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "icon",
+                variant: view === "week" ? "default" : "ghost",
+                className: "size-6 rounded-sm border-0 [&_svg]:size-3",
+                onClick: () => setView("week"),
+                children: /* @__PURE__ */ jsx(Columns, { strokeWidth: 1.8 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "icon",
+                variant: view === "month" ? "default" : "ghost",
+                className: "size-6 rounded-r-full rounded-l-sm border-0 [&_svg]:size-3",
+                onClick: () => setView("month"),
+                children: /* @__PURE__ */ jsx(Grid2x2, { strokeWidth: 1.8 })
+              }
+            )
+          ] }),
+          showAddButton && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onAddClick, className: "ml-2 size-8 p-0", children: /* @__PURE__ */ jsx(Plus, { className: "size-4" }) })
+        ] })
+      ]
+    }
+  );
+}
+var EVENT_COLORS2 = [
+  { value: "blue", label: "Blue", className: "bg-blue-500" },
+  { value: "green", label: "Green", className: "bg-green-500" },
+  { value: "red", label: "Red", className: "bg-red-500" },
+  { value: "yellow", label: "Yellow", className: "bg-yellow-500" },
+  { value: "purple", label: "Purple", className: "bg-purple-500" },
+  { value: "orange", label: "Orange", className: "bg-primary" }
+];
+function EventDialog({
+  open,
+  onOpenChange,
+  mode = "add",
+  event,
+  defaultDate = /* @__PURE__ */ new Date(),
+  defaultUserId
+}) {
+  const { addEvent, updateEvent, deleteEvent, users } = useEventCalendar();
+  const [title, setTitle] = React14.useState("");
+  const [description, setDescription] = React14.useState("");
+  const [startDate, setStartDate] = React14.useState("");
+  const [startTime, setStartTime] = React14.useState("");
+  const [endDate, setEndDate] = React14.useState("");
+  const [endTime, setEndTime] = React14.useState("");
+  const [color, setColor] = React14.useState("blue");
+  const [userId, setUserId] = React14.useState("");
+  const [isSubmitting, setIsSubmitting] = React14.useState(false);
+  React14.useEffect(() => {
+    if (open) {
+      if (mode === "edit" && event) {
+        const start = parseISO(event.startDate);
+        const end = parseISO(event.endDate);
+        setTitle(event.title);
+        setDescription(event.description || "");
+        setStartDate(format(start, "yyyy-MM-dd"));
+        setStartTime(format(start, "HH:mm"));
+        setEndDate(format(end, "yyyy-MM-dd"));
+        setEndTime(format(end, "HH:mm"));
+        setColor(event.color);
+        setUserId(event.user.id);
+      } else {
+        const start = defaultDate;
+        const end = setMinutes(setHours(defaultDate, defaultDate.getHours() + 1), 0);
+        setTitle("");
+        setDescription("");
+        setStartDate(format(start, "yyyy-MM-dd"));
+        setStartTime(format(start, "HH:mm"));
+        setEndDate(format(end, "yyyy-MM-dd"));
+        setEndTime(format(end, "HH:mm"));
+        setColor("blue");
+        setUserId(defaultUserId || users[0]?.id || "");
+      }
+    }
+  }, [open, mode, event, defaultDate, defaultUserId, users]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    try {
+      const [startYear, startMonth, startDay] = startDate.split("-").map(Number);
+      const [startHour, startMinute] = startTime.split(":").map(Number);
+      const [endYear, endMonth, endDay] = endDate.split("-").map(Number);
+      const [endHour, endMinute] = endTime.split(":").map(Number);
+      const startDateTime = new Date(startYear, startMonth - 1, startDay, startHour, startMinute);
+      const endDateTime = new Date(endYear, endMonth - 1, endDay, endHour, endMinute);
+      const selectedUser = users.find((u) => u.id === userId);
+      if (mode === "edit" && event) {
+        const updatedEvent = {
+          ...event,
+          title,
+          description,
+          startDate: startDateTime.toISOString(),
+          endDate: endDateTime.toISOString(),
+          color,
+          user: {
+            id: userId,
+            name: selectedUser?.name || "Unknown"
+          }
+        };
+        updateEvent(updatedEvent);
+      } else {
+        const newEvent = {
+          id: generateEventId(),
+          title,
+          description,
+          startDate: startDateTime.toISOString(),
+          endDate: endDateTime.toISOString(),
+          color,
+          user: {
+            id: userId,
+            name: selectedUser?.name || "Unknown"
+          }
+        };
+        addEvent(newEvent);
+      }
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Failed to save event:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleDelete = () => {
+    if (event) {
+      deleteEvent(event.id);
+      onOpenChange(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-[500px]", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: mode === "edit" ? "Edit Event" : "Add Event" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: mode === "edit" ? "Make changes to your event below." : "Fill in the details for your new event." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx(Label2, { htmlFor: "title", children: "Title" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "title",
+            value: title,
+            onChange: (e) => setTitle(e.target.value),
+            placeholder: "Event title",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx(Label2, { htmlFor: "description", children: "Description" }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: "description",
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: "Event description (optional)",
+            rows: 3
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "startDate", children: "Start Date" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "startDate",
+              type: "date",
+              value: startDate,
+              onChange: (e) => setStartDate(e.target.value),
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "startTime", children: "Start Time" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "startTime",
+              type: "time",
+              value: startTime,
+              onChange: (e) => setStartTime(e.target.value),
+              required: true
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "endDate", children: "End Date" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "endDate",
+              type: "date",
+              value: endDate,
+              onChange: (e) => setEndDate(e.target.value),
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "endTime", children: "End Time" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "endTime",
+              type: "time",
+              value: endTime,
+              onChange: (e) => setEndTime(e.target.value),
+              required: true
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { children: "Color" }),
+          /* @__PURE__ */ jsxs(Select, { value: color, onValueChange: (v) => setColor(v), children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "size-3 rounded-full",
+                    EVENT_COLORS2.find((c) => c.value === color)?.className
+                  )
+                }
+              ),
+              EVENT_COLORS2.find((c) => c.value === color)?.label
+            ] }) }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: EVENT_COLORS2.map((c) => /* @__PURE__ */ jsx(SelectItem, { value: c.value, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("size-3 rounded-full", c.className) }),
+              c.label
+            ] }) }, c.value)) })
+          ] })
+        ] }),
+        users.length > 0 && /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { children: "Assignee" }),
+          /* @__PURE__ */ jsxs(Select, { value: userId, onValueChange: setUserId, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select user" }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: users.map((user) => /* @__PURE__ */ jsx(SelectItem, { value: user.id, children: user.name }, user.id)) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row justify-between gap-2", children: [
+      mode === "edit" ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "destructive",
+          onClick: handleDelete,
+          disabled: isSubmitting,
+          children: "Delete"
+        }
+      ) : /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting || !title.trim(), children: isSubmitting ? "Saving..." : mode === "edit" ? "Save Changes" : "Add Event" })
+      ] })
+    ] })
+  ] }) }) });
+}
+function QuickAddEvent({
+  date,
+  onAdd,
+  onOpenDialog,
+  onClose
+}) {
+  const [title, setTitle] = React14.useState("");
+  const { users } = useEventCalendar();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    const end = setMinutes(setHours(date, date.getHours() + 1), 0);
+    onAdd({
+      title,
+      description: "",
+      startDate: date.toISOString(),
+      endDate: end.toISOString(),
+      color: "blue",
+      user: {
+        id: users[0]?.id || "",
+        name: users[0]?.name || "Unknown"
+      }
+    });
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-2 p-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: format(date, "EEE, MMM d, h:mm a") }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: title,
+        onChange: (e) => setTitle(e.target.value),
+        placeholder: "Add title",
+        className: "h-8",
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: !title.trim(), children: "Add" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onOpenDialog, children: "More options" })
+    ] })
+  ] });
+}
+function ChangeBadgeVariantInput() {
+  const { badgeVariant, setBadgeVariant } = useEventCalendar();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Change badge variant" }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: badgeVariant,
+        onValueChange: (value) => setBadgeVariant(value),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-48", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "dot", children: "Dot" }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "colored", children: "Colored" }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "mixed", children: "Mixed" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var HOUR_OPTIONS = Array.from({ length: 25 }, (_, i) => {
+  if (i === 0) return { value: "0", label: "12 AM" };
+  if (i === 12) return { value: "12", label: "12 PM" };
+  if (i === 24) return { value: "24", label: "12 AM (next)" };
+  if (i < 12) return { value: String(i), label: `${i} AM` };
+  return { value: String(i), label: `${i - 12} PM` };
+});
+function ChangeVisibleHoursInput() {
+  const { visibleHours, setVisibleHours } = useEventCalendar();
+  const [from, setFrom] = React14.useState(visibleHours.from);
+  const [to, setTo] = React14.useState(visibleHours.to);
+  const handleApply = () => {
+    const toHour = to === 0 ? 24 : to;
+    setVisibleHours({ from, to: toHour });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Change visible hours" }),
+      /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 100, children: /* @__PURE__ */ jsxs(Tooltip2, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Info, { className: "size-3" }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-80 text-center", children: /* @__PURE__ */ jsx("p", { children: "If an event falls outside the specified visible hours, the visible hours will automatically adjust to include that event." }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx("p", { children: "From" }),
+      /* @__PURE__ */ jsxs(Select, { value: String(from), onValueChange: (v) => setFrom(Number(v)), children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-28", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: HOUR_OPTIONS.slice(0, 24).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "To" }),
+      /* @__PURE__ */ jsxs(Select, { value: String(to), onValueChange: (v) => setTo(Number(v)), children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-28", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: HOUR_OPTIONS.slice(1).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { className: "mt-4 w-fit", onClick: handleApply, children: "Apply" })
+  ] });
+}
+var DAYS_OF_WEEK = [
+  { index: 0, name: "Sunday" },
+  { index: 1, name: "Monday" },
+  { index: 2, name: "Tuesday" },
+  { index: 3, name: "Wednesday" },
+  { index: 4, name: "Thursday" },
+  { index: 5, name: "Friday" },
+  { index: 6, name: "Saturday" }
+];
+var HOUR_OPTIONS2 = Array.from({ length: 25 }, (_, i) => {
+  if (i === 0) return { value: "0", label: "12 AM" };
+  if (i === 12) return { value: "12", label: "12 PM" };
+  if (i === 24) return { value: "24", label: "12 AM (next)" };
+  if (i < 12) return { value: String(i), label: `${i} AM` };
+  return { value: String(i), label: `${i - 12} PM` };
+});
+function ChangeWorkingHoursInput() {
+  const { workingHours, setWorkingHours } = useEventCalendar();
+  const [localWorkingHours, setLocalWorkingHours] = React14.useState({
+    ...workingHours
+  });
+  const handleToggleDay = (dayId) => {
+    setLocalWorkingHours((prev) => ({
+      ...prev,
+      [dayId]: prev[dayId].from > 0 || prev[dayId].to > 0 ? { from: 0, to: 0 } : { from: 9, to: 17 }
+    }));
+  };
+  const handleTimeChange = (dayId, timeType, value) => {
+    const hour = Number(value);
+    setLocalWorkingHours((prev) => {
+      const updatedDay = { ...prev[dayId], [timeType]: hour };
+      if (timeType === "to" && hour === 0 && updatedDay.from === 0) {
+        updatedDay.to = 24;
+      }
+      return { ...prev, [dayId]: updatedDay };
+    });
+  };
+  const handleSave = () => {
+    const updatedWorkingHours = { ...localWorkingHours };
+    for (const dayId in updatedWorkingHours) {
+      const day = updatedWorkingHours[parseInt(dayId)];
+      const isDayActive = localWorkingHours[parseInt(dayId)].from > 0 || localWorkingHours[parseInt(dayId)].to > 0;
+      if (isDayActive) {
+        if (day.from === 0 && day.to === 0) {
+          updatedWorkingHours[dayId] = { from: 0, to: 24 };
+        } else if (day.to === 0 && day.from > 0) {
+          updatedWorkingHours[dayId] = { ...day, to: 24 };
+        }
+      } else {
+        updatedWorkingHours[dayId] = { from: 0, to: 0 };
+      }
+    }
+    setWorkingHours(updatedWorkingHours);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Change working hours" }),
+      /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 100, children: /* @__PURE__ */ jsxs(Tooltip2, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Info, { className: "size-3" }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-80 text-center", children: /* @__PURE__ */ jsx("p", { children: "This will apply a dashed background to the hour cells that fall outside the working hours \u2014 only for week and day views." }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: DAYS_OF_WEEK.map((day) => {
+      const isDayActive = localWorkingHours[day.index].from > 0 || localWorkingHours[day.index].to > 0;
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-32 items-center gap-2 sm:w-36", children: [
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: isDayActive,
+              onCheckedChange: () => handleToggleDay(day.index)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: day.name.slice(0, 3) })
+        ] }),
+        isDayActive ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm", children: "From" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: String(localWorkingHours[day.index].from),
+                onValueChange: (v) => handleTimeChange(day.index, "from", v),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-24", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: HOUR_OPTIONS2.slice(0, 24).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm", children: "To" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: String(localWorkingHours[day.index].to),
+                onValueChange: (v) => handleTimeChange(day.index, "to", v),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "w-24", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: HOUR_OPTIONS2.slice(1).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                ]
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Moon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Closed" })
+        ] })
+      ] }, day.index);
+    }) }),
+    /* @__PURE__ */ jsx(Button, { className: "mt-4 w-fit", onClick: handleSave, children: "Apply" })
+  ] });
+}
+function CalendarSettingsPanel({
+  className,
+  showBadgeVariant = true,
+  showVisibleHours = true,
+  showWorkingHours = true
+}) {
+  return /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: cn("relative z-10 bg-background", className), children: /* @__PURE__ */ jsxs(AccordionItem, { value: "settings", className: "border-none", children: [
+    /* @__PURE__ */ jsx(AccordionTrigger, { className: "flex-none gap-2 py-0 hover:no-underline", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Settings, { className: "size-4" }),
+      /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: "Calendar settings" })
+    ] }) }),
+    /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col gap-6", children: [
+      showBadgeVariant && /* @__PURE__ */ jsx(ChangeBadgeVariantInput, {}),
+      showVisibleHours && /* @__PURE__ */ jsx(ChangeVisibleHoursInput, {}),
+      showWorkingHours && /* @__PURE__ */ jsx(ChangeWorkingHoursInput, {})
+    ] }) })
+  ] }) });
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = React14.useState(false);
+  React14.useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+    const listener = (event) => {
+      setMatches(event.matches);
+    };
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+}
+function BigCalendar({
+  className,
+  compact = "auto",
+  bordered = true,
+  showHeader = true,
+  showAddButton = true,
+  showSettings = true,
+  enableDragDrop = true,
+  weekStartsOn = 0,
+  maxEventsPerDay = 3,
+  config,
+  ...providerProps
+}) {
+  return /* @__PURE__ */ jsx(EventCalendarProvider, { ...providerProps, children: /* @__PURE__ */ jsx(DragProvider, { children: /* @__PURE__ */ jsx(
+    BigCalendarInner,
+    {
+      className,
+      compact,
+      bordered,
+      showHeader,
+      showAddButton,
+      showSettings,
+      enableDragDrop,
+      weekStartsOn,
+      maxEventsPerDay,
+      config
+    }
+  ) }) });
+}
+function BigCalendarInner({
+  className,
+  compact,
+  bordered,
+  showHeader,
+  showAddButton,
+  showSettings,
+  enableDragDrop,
+  weekStartsOn,
+  maxEventsPerDay
+}) {
+  const { view, setView } = useEventCalendar();
+  const [dialogOpen, setDialogOpen] = React14.useState(false);
+  const [selectedEvent, setSelectedEvent] = React14.useState(null);
+  const [dialogMode, setDialogMode] = React14.useState("add");
+  const [defaultDate, setDefaultDate] = React14.useState(/* @__PURE__ */ new Date());
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const isCompact = compact === "auto" ? isMobile : compact;
+  const handleAddClick = () => {
+    setSelectedEvent(null);
+    setDialogMode("add");
+    setDefaultDate(/* @__PURE__ */ new Date());
+    setDialogOpen(true);
+  };
+  const handleEventClick = (event) => {
+    setSelectedEvent(event);
+    setDialogMode("edit");
+    setDialogOpen(true);
+  };
+  const handleDateClick = (date) => {
+    setDefaultDate(date);
+  };
+  const handleMoreClick = (date, events) => {
+    setDefaultDate(date);
+    setView("day");
+  };
+  const handleTimeClick = (date, hour, minute) => {
+    setSelectedEvent(null);
+    setDialogMode("add");
+    const clickedDate = new Date(date);
+    clickedDate.setHours(hour, minute, 0, 0);
+    setDefaultDate(clickedDate);
+    setDialogOpen(true);
+  };
+  const Wrapper = bordered ? Card : "div";
+  const Content14 = bordered ? CardContent : "div";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 relative", className), children: [
+      /* @__PURE__ */ jsxs(
+        Wrapper,
+        {
+          className: cn(
+            "flex min-h-[600px] flex-col overflow-hidden rounded-sm",
+            !bordered && "border border-border bg-card"
+          ),
+          children: [
+            showHeader && (isCompact ? /* @__PURE__ */ jsx(
+              CalendarHeaderCompact,
+              {
+                showAddButton,
+                onAddClick: handleAddClick
+              }
+            ) : /* @__PURE__ */ jsx(
+              CalendarHeader,
+              {
+                showAddButton,
+                onAddClick: handleAddClick
+              }
+            )),
+            /* @__PURE__ */ jsx(Content14, { className: cn("flex-1 overflow-hidden", bordered ? "p-0" : ""), children: /* @__PURE__ */ jsx(
+              CalendarView,
+              {
+                view,
+                weekStartsOn,
+                maxEventsPerDay,
+                onEventClick: handleEventClick,
+                onDateClick: handleDateClick,
+                onMoreClick: handleMoreClick,
+                onTimeClick: handleTimeClick
+              }
+            ) })
+          ]
+        }
+      ),
+      showSettings && /* @__PURE__ */ jsx(CalendarSettingsPanel, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      EventDialog,
+      {
+        open: dialogOpen,
+        onOpenChange: setDialogOpen,
+        mode: dialogMode,
+        event: selectedEvent,
+        defaultDate
+      }
+    )
+  ] });
+}
+function CalendarView({
+  view,
+  weekStartsOn,
+  maxEventsPerDay,
+  onEventClick,
+  onDateClick,
+  onMoreClick,
+  onTimeClick
+}) {
+  switch (view) {
+    case "month":
+      return /* @__PURE__ */ jsx(
+        MonthView,
+        {
+          className: "h-full",
+          weekStartsOn,
+          maxEventsPerDay,
+          onEventClick,
+          onDateClick,
+          onMoreClick
+        }
+      );
+    case "week":
+      return /* @__PURE__ */ jsx(
+        WeekView,
+        {
+          className: "h-full",
+          weekStartsOn,
+          onEventClick,
+          onDateClick,
+          onTimeClick
+        }
+      );
+    case "day":
+      return /* @__PURE__ */ jsx(
+        DayView,
+        {
+          className: "h-full",
+          onEventClick,
+          onTimeClick
+        }
+      );
+    case "year":
+      return /* @__PURE__ */ jsx(
+        YearView,
+        {
+          className: "h-full",
+          weekStartsOn,
+          onDateClick
+        }
+      );
+    case "agenda":
+      return /* @__PURE__ */ jsx(
+        AgendaView,
+        {
+          className: "h-full",
+          onEventClick,
+          onDateClick
+        }
+      );
+    default:
+      return null;
+  }
+}
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item5 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label2 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, sectionVariants, toggleVariants, toolBarCanvasButtonVariants, useFormField, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgendaView, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BADGE_VARIANT_LABELS, Badge, BigCalendar, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarContext, CalendarDayButton, CalendarHeader, CalendarHeaderCompact, CalendarSettingsPanel, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChangeBadgeVariantInput, ChangeVisibleHoursInput, ChangeWorkingHoursInput, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_VISIBLE_HOURS, DEFAULT_WORKING_HOURS, DateBadge, DayView, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragContext, DragProvider, DraggableEvent, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DroppableZone, EVENT_COLORS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventBadge, EventCalendarProvider, EventDialog, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item6 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label2 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthView, MoreEvents, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavMain, NavProjects, NavSecondary, NavUser, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, QuickAddEvent, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchForm, SearchTrigger, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteHeader, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TimeIndicator, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatarsDropdown, VIEW_LABELS, WeekView, YearView, badgeVariants, buttonGroupVariants, buttonVariants, calculateDropDates, calculateMonthEventPositions, cardVariants, createDefaultEvent, formatDateRange, formatTime, generateEventId, getCalendarCells, getCurrentEvents, getDayHours, getEventBlockStyle, getEventDuration, getEventDurationMinutes, getEventsCount, getEventsForDate, getEventsInRange, getHeaderLabel, getMonthCellEvents, getMonthDays, getTimeHeight, getTimePosition, getViewDateRange, getVisibleHours, getWeekDayNames, getWeekDays, getYearMonths, groupEvents, isMultiDayEvent, isWorkingHour, navigateDate, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, rangeText, sectionVariants, snapToInterval, sortEvents, splitEventsByDuration, toggleVariants, toolBarCanvasButtonVariants, useDrag, useDraggable, useDroppable, useEventCalendar, useEventsInRange, useFilteredEvents, useFormField, useIsMobile, useSearchShortcut, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map