@j3m-quantum/ui 1.3.0 → 1.4.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import * as React14 from 'react';
+import * as React15 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 { 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 { 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, Settings, Plus, Info, Moon } 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';
@@ -30,13 +30,13 @@ 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 ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 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';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 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';
@@ -45,8 +45,8 @@ export { areIntervalsOverlapping, format, getDay, isSameDay, isSameMonth, isToda
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React14.useState(void 0);
-  React14.useEffect(() => {
+  const [isMobile, setIsMobile] = React15.useState(void 0);
+  React15.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -87,7 +87,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React14.forwardRef(
+var Button = React15.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -195,7 +195,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-4 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
@@ -451,7 +451,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React14.useMemo(
+  const _values = React15.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -737,7 +737,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React14.createContext({
+var ToggleGroupContext = React15.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -774,7 +774,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React14.useContext(ToggleGroupContext);
+  const context = React15.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -796,6 +796,125 @@ function ToggleGroupItem({
     }
   );
 }
+function ThemeSwitch({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  className,
+  size = "default"
+}) {
+  const [isChecked, setIsChecked] = React15.useState(defaultChecked);
+  const isControlled = checked !== void 0;
+  const currentChecked = isControlled ? checked : isChecked;
+  const handleClick = () => {
+    if (disabled) return;
+    const newValue = !currentChecked;
+    if (!isControlled) {
+      setIsChecked(newValue);
+    }
+    onCheckedChange?.(newValue);
+  };
+  const sizeClasses = {
+    sm: {
+      track: "h-5 w-9",
+      thumb: "size-4",
+      icon: "h-2.5 w-2.5",
+      translate: "data-[state=checked]:translate-x-4"
+    },
+    default: {
+      track: "h-6 w-11",
+      thumb: "size-5",
+      icon: "h-3 w-3",
+      translate: "data-[state=checked]:translate-x-5"
+    },
+    lg: {
+      track: "h-7 w-14",
+      thumb: "size-6",
+      icon: "h-3.5 w-3.5",
+      translate: "data-[state=checked]:translate-x-7"
+    }
+  };
+  const sizes = sizeClasses[size];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": currentChecked,
+      "aria-label": currentChecked ? "Switch to light mode" : "Switch to dark mode",
+      "data-slot": "theme-switch",
+      "data-state": currentChecked ? "checked" : "unchecked",
+      disabled,
+      onClick: handleClick,
+      className: cn(
+        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full",
+        "border border-transparent shadow-xs transition-all outline-none",
+        "focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "bg-input data-[state=checked]:bg-primary",
+        sizes.track,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-state": currentChecked ? "checked" : "unchecked",
+          className: cn(
+            "pointer-events-none flex items-center justify-center rounded-full",
+            "bg-white shadow-lg ring-0 transition-transform",
+            "data-[state=unchecked]:translate-x-0.5",
+            sizes.thumb,
+            sizes.translate
+          ),
+          children: currentChecked ? /* @__PURE__ */ jsx(MoonIcon, { className: cn(sizes.icon, "text-primary") }) : /* @__PURE__ */ jsx(SunIcon, { className: cn(sizes.icon, "text-muted-foreground") })
+        }
+      )
+    }
+  );
+}
+function SunIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 2v2" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 20v2" }),
+        /* @__PURE__ */ jsx("path", { d: "m4.93 4.93 1.41 1.41" }),
+        /* @__PURE__ */ jsx("path", { d: "m17.66 17.66 1.41 1.41" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 12h2" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 12h2" }),
+        /* @__PURE__ */ jsx("path", { d: "m6.34 17.66-1.41 1.41" }),
+        /* @__PURE__ */ jsx("path", { d: "m19.07 4.93-1.41 1.41" })
+      ]
+    }
+  );
+}
+function MoonIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+    }
+  );
+}
 function ToolBarCanvas({
   className,
   ...props
@@ -1105,7 +1224,7 @@ function Label2({
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React14.createContext(
+var FormFieldContext = React15.createContext(
   {}
 );
 var FormField = ({
@@ -1114,8 +1233,8 @@ var FormField = ({
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React14.useContext(FormFieldContext);
-  const itemContext = React14.useContext(FormItemContext);
+  const fieldContext = React15.useContext(FormFieldContext);
+  const itemContext = React15.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1132,11 +1251,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React14.createContext(
+var FormItemContext = React15.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React14.useId();
+  const id = React15.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -2053,7 +2172,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] dark:bg-[#1a1a1a]",
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
         className
       ),
       ...props
@@ -2238,8 +2357,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React14.useRef(null);
-  React14.useEffect(() => {
+  const ref = React15.useRef(null);
+  React15.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -2260,9 +2379,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React14.createContext(null);
+var CarouselContext = React15.createContext(null);
 function useCarousel() {
-  const context = React14.useContext(CarouselContext);
+  const context = React15.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -2284,20 +2403,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React14.useState(false);
-  const [canScrollNext, setCanScrollNext] = React14.useState(false);
-  const onSelect = React14.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React15.useState(false);
+  const [canScrollNext, setCanScrollNext] = React15.useState(false);
+  const onSelect = React15.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React14.useCallback(() => {
+  const scrollPrev = React15.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React14.useCallback(() => {
+  const scrollNext = React15.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React14.useCallback(
+  const handleKeyDown = React15.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2309,11 +2428,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2446,9 +2565,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React14.createContext(null);
+var ChartContext = React15.createContext(null);
 function useChart() {
-  const context = React14.useContext(ChartContext);
+  const context = React15.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2461,7 +2580,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React14.useId();
+  const uniqueId = React15.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -2522,7 +2641,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React14.useMemo(() => {
+  const tooltipLabel = React15.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3225,8 +3344,8 @@ function TooltipContent({
   ) });
 }
 function useDetectTheme() {
-  const [theme, setTheme] = React14.useState("light");
-  React14.useEffect(() => {
+  const [theme, setTheme] = React15.useState("light");
+  React15.useEffect(() => {
     const isDark = document.documentElement.classList.contains("dark");
     setTheme(isDark ? "dark" : "light");
     const observer = new MutationObserver((mutations) => {
@@ -3593,6 +3712,59 @@ function DialogDescription({
     }
   );
 }
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
 function Command({
   className,
   ...props
@@ -3662,17 +3834,17 @@ function CommandList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[300px]", children: /* @__PURE__ */ jsx(
     Command$1.List,
     {
       "data-slot": "command-list",
       className: cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        "scroll-py-1",
         className
       ),
       ...props
     }
-  );
+  ) });
 }
 function CommandEmpty({
   ...props
@@ -3747,7 +3919,7 @@ function CommandShortcut({
     }
   );
 }
-var SearchTrigger = React14.forwardRef(
+var SearchTrigger = React15.forwardRef(
   ({
     className,
     placeholder = "Search...",
@@ -3783,7 +3955,7 @@ var SearchTrigger = React14.forwardRef(
 );
 SearchTrigger.displayName = "SearchTrigger";
 function useSearchShortcut(onOpen, key = "k") {
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     const down = (e) => {
       if (e.key.toLowerCase() === key.toLowerCase() && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -4679,59 +4851,6 @@ function HoverCardContent({
     }
   ) });
 }
-function ScrollArea({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    ScrollAreaPrimitive.Root,
-    {
-      "data-slot": "scroll-area",
-      className: cn("relative", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          ScrollAreaPrimitive.Viewport,
-          {
-            "data-slot": "scroll-area-viewport",
-            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(ScrollBar, {}),
-        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-      ]
-    }
-  );
-}
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ScrollAreaPrimitive.ScrollAreaScrollbar,
-    {
-      "data-slot": "scroll-area-scrollbar",
-      orientation,
-      className: cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        ScrollAreaPrimitive.ScrollAreaThumb,
-        {
-          "data-slot": "scroll-area-thumb",
-          className: "bg-border relative flex-1 rounded-full"
-        }
-      )
-    }
-  );
-}
 function Collapsible({
   ...props
 }) {
@@ -4811,9 +4930,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React14.createContext(null);
+var SidebarContext = React15.createContext(null);
 function useSidebar() {
-  const context = React14.useContext(SidebarContext);
+  const context = React15.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4829,10 +4948,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React14.useState(false);
-  const [_open, _setOpen] = React14.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React15.useState(false);
+  const [_open, _setOpen] = React15.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React14.useCallback(
+  const setOpen = React15.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4844,10 +4963,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React14.useCallback(() => {
+  const toggleSidebar = React15.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4858,7 +4977,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React14.useMemo(
+  const contextValue = React15.useMemo(
     () => ({
       state,
       open,
@@ -5316,7 +5435,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React14.useMemo(() => {
+  const width = React15.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -5459,7 +5578,7 @@ var sectionVariants = cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React14.forwardRef(
+var Section = React15.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
     "section",
     {
@@ -5471,7 +5590,7 @@ var Section = React14.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React14.forwardRef(
+var SectionHeader = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5486,7 +5605,7 @@ var SectionHeader = React14.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React14.forwardRef(
+var SectionTitle = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "h2",
     {
@@ -5500,7 +5619,7 @@ var SectionTitle = React14.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React14.forwardRef(
+var SectionDescription = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "p",
     {
@@ -5514,7 +5633,7 @@ var SectionDescription = React14.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React14.forwardRef(
+var SectionContent = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5528,7 +5647,7 @@ var SectionContent = React14.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React14.forwardRef(
+var SectionFooter = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5579,7 +5698,7 @@ function SiteHeader({
       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: [
+        /* @__PURE__ */ jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxs(React15.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)) }) }),
@@ -5791,7 +5910,7 @@ var BADGE_VARIANT_LABELS = {
   colored: "Colored",
   mixed: "Mixed"
 };
-var CalendarContext = React14.createContext(null);
+var CalendarContext = React15.createContext(null);
 function EventCalendarProvider({
   children,
   events: initialEvents = [],
@@ -5806,38 +5925,38 @@ function EventCalendarProvider({
   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(() => {
+  const [selectedDate, setSelectedDate] = React15.useState(defaultDate);
+  const [selectedUserId, setSelectedUserId] = React15.useState(defaultUserId);
+  const [events, setEventsState] = React15.useState(initialEvents);
+  const [users] = React15.useState(initialUsers);
+  const [badgeVariant, setBadgeVariant] = React15.useState(defaultBadgeVariant);
+  const [view, setView] = React15.useState(defaultView);
+  const [workingHours, setWorkingHours] = React15.useState(defaultWorkingHours);
+  const [visibleHours, setVisibleHours] = React15.useState(defaultVisibleHours);
+  React15.useEffect(() => {
     setEventsState(initialEvents);
   }, [initialEvents]);
-  const setEvents = React14.useCallback((newEvents) => {
+  const setEvents = React15.useCallback((newEvents) => {
     setEventsState(newEvents);
   }, []);
-  const addEvent = React14.useCallback((event) => {
+  const addEvent = React15.useCallback((event) => {
     setEventsState((prev) => [...prev, event]);
     onEventAdd?.(event);
   }, [onEventAdd]);
-  const updateEvent = React14.useCallback((event) => {
+  const updateEvent = React15.useCallback((event) => {
     setEventsState(
       (prev) => prev.map((e) => e.id === event.id ? event : e)
     );
     onEventUpdate?.(event);
   }, [onEventUpdate]);
-  const deleteEvent = React14.useCallback((eventId) => {
+  const deleteEvent = React15.useCallback((eventId) => {
     setEventsState((prev) => prev.filter((e) => e.id !== eventId));
     onEventDelete?.(eventId);
   }, [onEventDelete]);
-  const goToToday = React14.useCallback(() => {
+  const goToToday = React15.useCallback(() => {
     setSelectedDate(/* @__PURE__ */ new Date());
   }, []);
-  const goToPrevious = React14.useCallback(() => {
+  const goToPrevious = React15.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -5855,7 +5974,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const goToNext = React14.useCallback(() => {
+  const goToNext = React15.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -5873,7 +5992,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const contextValue = React14.useMemo(
+  const contextValue = React15.useMemo(
     () => ({
       // State
       selectedDate,
@@ -5920,7 +6039,7 @@ function EventCalendarProvider({
   return /* @__PURE__ */ jsx(CalendarContext.Provider, { value: contextValue, children });
 }
 function useEventCalendar() {
-  const context = React14.useContext(CalendarContext);
+  const context = React15.useContext(CalendarContext);
   if (!context) {
     throw new Error("useEventCalendar must be used within an EventCalendarProvider");
   }
@@ -5928,14 +6047,14 @@ function useEventCalendar() {
 }
 function useFilteredEvents() {
   const { events, selectedUserId } = useEventCalendar();
-  return React14.useMemo(() => {
+  return React15.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 React15.useMemo(() => {
     return filteredEvents.filter((event) => {
       const eventStart = new Date(event.startDate);
       const eventEnd = new Date(event.endDate);
@@ -6493,8 +6612,8 @@ function MoreEvents({ count, onClick, className }) {
   );
 }
 function TimeIndicator({ className }) {
-  const [now, setNow] = React14.useState(/* @__PURE__ */ new Date());
-  React14.useEffect(() => {
+  const [now, setNow] = React15.useState(/* @__PURE__ */ new Date());
+  React15.useEffect(() => {
     const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
     return () => clearInterval(interval);
   }, []);
@@ -6531,24 +6650,24 @@ function DateBadge({ date, className }) {
     }
   );
 }
-var DragContext = React14.createContext(null);
+var DragContext = React15.createContext(null);
 function DragProvider({
   children,
   snapMinutes = 15,
   onDragStart,
   onDragEnd
 }) {
-  const [draggedEvent, setDraggedEventState] = React14.useState(null);
-  const [isDragging, setIsDragging] = React14.useState(false);
+  const [draggedEvent, setDraggedEventState] = React15.useState(null);
+  const [isDragging, setIsDragging] = React15.useState(false);
   const { updateEvent } = useEventCalendar();
-  const setDraggedEvent = React14.useCallback((event) => {
+  const setDraggedEvent = React15.useCallback((event) => {
     setDraggedEventState(event);
     setIsDragging(!!event);
     if (event) {
       onDragStart?.(event);
     }
   }, [onDragStart]);
-  const handleDrop = React14.useCallback((newStartDate) => {
+  const handleDrop = React15.useCallback((newStartDate) => {
     if (!draggedEvent) return;
     const snappedDate = snapToInterval(newStartDate, snapMinutes);
     const { startDate, endDate } = calculateDropDates(draggedEvent, snappedDate);
@@ -6561,7 +6680,7 @@ function DragProvider({
     onDragEnd?.(updatedEvent, new Date(startDate), new Date(endDate));
     setDraggedEvent(null);
   }, [draggedEvent, snapMinutes, updateEvent, onDragEnd, setDraggedEvent]);
-  const contextValue = React14.useMemo(
+  const contextValue = React15.useMemo(
     () => ({
       draggedEvent,
       setDraggedEvent,
@@ -6572,7 +6691,7 @@ function DragProvider({
   return /* @__PURE__ */ jsx(DragContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(DragDropHandler, { onDrop: handleDrop, children }) });
 }
 function useDrag() {
-  const context = React14.useContext(DragContext);
+  const context = React15.useContext(DragContext);
   if (!context) {
     throw new Error("useDrag must be used within a DragProvider");
   }
@@ -6617,7 +6736,7 @@ function DroppableZone({
 }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React14.useState(false);
+  const [isOver, setIsOver] = React15.useState(false);
   const handleDragOver = (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
@@ -6655,23 +6774,23 @@ function DroppableZone({
 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 [isOver, setIsOver] = React15.useState(false);
+  const dropTargetDate = React15.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) => {
+  const handleDragOver = React15.useCallback((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     if (!isOver) setIsOver(true);
   }, [isOver]);
-  const handleDragLeave = React14.useCallback(() => {
+  const handleDragLeave = React15.useCallback(() => {
     setIsOver(false);
   }, []);
-  const handleDrop = React14.useCallback((e) => {
+  const handleDrop = React15.useCallback((e) => {
     e.preventDefault();
     setIsOver(false);
     if (!draggedEvent) return;
@@ -6698,13 +6817,13 @@ function useDroppable({ date, hour, minute = 0, onDrop }) {
 function useDraggable(event, disabled = false) {
   const { setDraggedEvent, draggedEvent } = useDrag();
   const isDragged = draggedEvent?.id === event.id;
-  const handleDragStart = React14.useCallback((e) => {
+  const handleDragStart = React15.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(() => {
+  const handleDragEnd = React15.useCallback(() => {
     setDraggedEvent(null);
   }, [setDraggedEvent]);
   return {
@@ -6745,15 +6864,15 @@ function MonthView({
 }) {
   const { selectedDate, badgeVariant, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React14.useMemo(
+  const { singleDayEvents, multiDayEvents } = React15.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const cells = React14.useMemo(
+  const cells = React15.useMemo(
     () => getCalendarCells(selectedDate),
     [selectedDate]
   );
-  const eventPositions = React14.useMemo(
+  const eventPositions = React15.useMemo(
     () => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate),
     [multiDayEvents, singleDayEvents, selectedDate]
   );
@@ -6935,7 +7054,7 @@ function WeekView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React14.useMemo(
+  const { singleDayEvents, multiDayEvents } = React15.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -7141,8 +7260,8 @@ function CalendarTimeline({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React14.useState(/* @__PURE__ */ new Date());
-  React14.useEffect(() => {
+  const [currentTime, setCurrentTime] = React15.useState(/* @__PURE__ */ new Date());
+  React15.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -7225,7 +7344,7 @@ function DayView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React14.useMemo(
+  const { singleDayEvents, multiDayEvents } = React15.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -7233,7 +7352,7 @@ function DayView({
     visibleHours,
     singleDayEvents
   );
-  const currentEvents = React14.useMemo(() => {
+  const currentEvents = React15.useMemo(() => {
     if (!isToday(selectedDate)) return [];
     return getCurrentEvents(singleDayEvents);
   }, [singleDayEvents, selectedDate]);
@@ -7457,8 +7576,8 @@ function CalendarTimeline2({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React14.useState(/* @__PURE__ */ new Date());
-  React14.useEffect(() => {
+  const [currentTime, setCurrentTime] = React15.useState(/* @__PURE__ */ new Date());
+  React15.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -7492,7 +7611,7 @@ function YearView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const months = React14.useMemo(() => {
+  const months = React15.useMemo(() => {
     const yearStart = startOfYear(selectedDate);
     return Array.from({ length: 12 }, (_, i) => addMonths(yearStart, i));
   }, [selectedDate]);
@@ -7615,11 +7734,11 @@ function AgendaView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React14.useMemo(
+  const { singleDayEvents, multiDayEvents } = React15.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const eventsByDay = React14.useMemo(() => {
+  const eventsByDay = React15.useMemo(() => {
     const allDates = /* @__PURE__ */ new Map();
     singleDayEvents.forEach((event) => {
       const eventDate = parseISO(event.startDate);
@@ -7792,7 +7911,9 @@ function CalendarHeader({
   // Hidden by default, controlled via settings
   showToday = true,
   showAddButton = true,
-  onAddClick
+  showSettings = true,
+  onAddClick,
+  onSettingsClick
 }) {
   const {
     selectedDate,
@@ -7941,9 +8062,22 @@ function CalendarHeader({
               }
             )
           ] }),
-          showAddButton && /* @__PURE__ */ jsxs(Button, { onClick: onAddClick, className: "w-full sm:w-auto", children: [
-            /* @__PURE__ */ jsx(Plus, {}),
-            "Add Event"
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            showSettings && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                onClick: onSettingsClick,
+                className: "shrink-0",
+                "aria-label": "Calendar settings",
+                children: /* @__PURE__ */ jsx(Settings, { className: "size-4" })
+              }
+            ),
+            showAddButton && /* @__PURE__ */ jsxs(Button, { onClick: onAddClick, className: "w-full sm:w-auto", children: [
+              /* @__PURE__ */ jsx(Plus, {}),
+              "Add Event"
+            ] })
           ] })
         ] })
       ]
@@ -7953,7 +8087,9 @@ function CalendarHeader({
 function CalendarHeaderCompact({
   className,
   showAddButton = true,
-  onAddClick
+  showSettings = true,
+  onAddClick,
+  onSettingsClick
 }) {
   const {
     selectedDate,
@@ -8033,7 +8169,18 @@ function CalendarHeaderCompact({
               }
             )
           ] }),
-          showAddButton && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onAddClick, className: "ml-2 size-8 p-0", children: /* @__PURE__ */ jsx(Plus, { className: "size-4" }) })
+          showSettings && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              onClick: onSettingsClick,
+              className: "ml-2 size-8",
+              "aria-label": "Calendar settings",
+              children: /* @__PURE__ */ jsx(Settings, { className: "size-4" })
+            }
+          ),
+          showAddButton && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onAddClick, className: "size-8 p-0", children: /* @__PURE__ */ jsx(Plus, { className: "size-4" }) })
         ] })
       ]
     }
@@ -8056,16 +8203,16 @@ function EventDialog({
   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(() => {
+  const [title, setTitle] = React15.useState("");
+  const [description, setDescription] = React15.useState("");
+  const [startDate, setStartDate] = React15.useState("");
+  const [startTime, setStartTime] = React15.useState("");
+  const [endDate, setEndDate] = React15.useState("");
+  const [endTime, setEndTime] = React15.useState("");
+  const [color, setColor] = React15.useState("blue");
+  const [userId, setUserId] = React15.useState("");
+  const [isSubmitting, setIsSubmitting] = React15.useState(false);
+  React15.useEffect(() => {
     if (open) {
       if (mode === "edit" && event) {
         const start = parseISO(event.startDate);
@@ -8288,7 +8435,7 @@ function QuickAddEvent({
   onOpenDialog,
   onClose
 }) {
-  const [title, setTitle] = React14.useState("");
+  const [title, setTitle] = React15.useState("");
   const { users } = useEventCalendar();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -8355,8 +8502,8 @@ var HOUR_OPTIONS = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeVisibleHoursInput() {
   const { visibleHours, setVisibleHours } = useEventCalendar();
-  const [from, setFrom] = React14.useState(visibleHours.from);
-  const [to, setTo] = React14.useState(visibleHours.to);
+  const [from, setFrom] = React15.useState(visibleHours.from);
+  const [to, setTo] = React15.useState(visibleHours.to);
   const handleApply = () => {
     const toHour = to === 0 ? 24 : to;
     setVisibleHours({ from, to: toHour });
@@ -8402,7 +8549,7 @@ var HOUR_OPTIONS2 = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeWorkingHoursInput() {
   const { workingHours, setWorkingHours } = useEventCalendar();
-  const [localWorkingHours, setLocalWorkingHours] = React14.useState({
+  const [localWorkingHours, setLocalWorkingHours] = React15.useState({
     ...workingHours
   });
   const handleToggleDay = (dayId) => {
@@ -8497,27 +8644,62 @@ function ChangeWorkingHoursInput() {
     /* @__PURE__ */ jsx(Button, { className: "mt-4 w-fit", onClick: handleSave, children: "Apply" })
   ] });
 }
-function CalendarSettingsPanel({
+function CalendarSettingsContent({
   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, {})
-    ] }) })
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), children: [
+    showBadgeVariant && /* @__PURE__ */ jsx(ChangeBadgeVariantInput, {}),
+    showVisibleHours && /* @__PURE__ */ jsx(ChangeVisibleHoursInput, {}),
+    showWorkingHours && /* @__PURE__ */ jsx(ChangeWorkingHoursInput, {})
+  ] });
+}
+function CalendarSettingsDialog({
+  open,
+  onOpenChange,
+  showBadgeVariant = true,
+  showVisibleHours = true,
+  showWorkingHours = true
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Settings, { className: "size-5" }),
+        "Calendar Settings"
+      ] }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Customize your calendar view and preferences." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      CalendarSettingsContent,
+      {
+        showBadgeVariant,
+        showVisibleHours,
+        showWorkingHours
+      }
+    )
   ] }) });
 }
+function CalendarSettingsButton({
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "icon",
+      onClick,
+      className: cn("shrink-0", className),
+      "aria-label": "Calendar settings",
+      children: /* @__PURE__ */ jsx(Settings, { className: "size-4" })
+    }
+  );
+}
 function useMediaQuery(query) {
-  const [matches, setMatches] = React14.useState(false);
-  React14.useEffect(() => {
+  const [matches, setMatches] = React15.useState(false);
+  React15.useEffect(() => {
     const media = window.matchMedia(query);
     setMatches(media.matches);
     const listener = (event) => {
@@ -8569,10 +8751,11 @@ function BigCalendarInner({
   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 [dialogOpen, setDialogOpen] = React15.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React15.useState(false);
+  const [selectedEvent, setSelectedEvent] = React15.useState(null);
+  const [dialogMode, setDialogMode] = React15.useState("add");
+  const [defaultDate, setDefaultDate] = React15.useState(/* @__PURE__ */ new Date());
   const isMobile = useMediaQuery("(max-width: 768px)");
   const isCompact = compact === "auto" ? isMobile : compact;
   const handleAddClick = () => {
@@ -8581,6 +8764,9 @@ function BigCalendarInner({
     setDefaultDate(/* @__PURE__ */ new Date());
     setDialogOpen(true);
   };
+  const handleSettingsClick = () => {
+    setSettingsDialogOpen(true);
+  };
   const handleEventClick = (event) => {
     setSelectedEvent(event);
     setDialogMode("edit");
@@ -8604,45 +8790,46 @@ function BigCalendarInner({
   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("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,
+              showSettings,
+              onAddClick: handleAddClick,
+              onSettingsClick: handleSettingsClick
+            }
+          ) : /* @__PURE__ */ jsx(
+            CalendarHeader,
+            {
+              showAddButton,
+              showSettings,
+              onAddClick: handleAddClick,
+              onSettingsClick: handleSettingsClick
+            }
+          )),
+          /* @__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
+            }
+          ) })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       EventDialog,
       {
@@ -8652,6 +8839,13 @@ function BigCalendarInner({
         event: selectedEvent,
         defaultDate
       }
+    ),
+    showSettings && /* @__PURE__ */ jsx(
+      CalendarSettingsDialog,
+      {
+        open: settingsDialogOpen,
+        onOpenChange: setSettingsDialogOpen
+      }
     )
   ] });
 }
@@ -8720,6 +8914,6 @@ function CalendarView({
   }
 }
 
-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 };
+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, CalendarSettingsButton, CalendarSettingsContent, CalendarSettingsDialog, 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, ThemeSwitch, 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