@j3m-quantum/ui 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React14 = require('react');
+var React15 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -31,13 +31,13 @@ var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var sonner = require('sonner');
 var cmdk = require('cmdk');
 var DialogPrimitive = require('@radix-ui/react-dialog');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var MenubarPrimitive = require('@radix-ui/react-menubar');
 var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var vaul = require('vaul');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
-var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var ResizablePrimitive = require('react-resizable-panels');
 var dateFns = require('date-fns');
@@ -62,7 +62,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React14__namespace = /*#__PURE__*/_interopNamespace(React14);
+var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -83,20 +83,20 @@ var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialog
 var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var MenubarPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenubarPrimitive);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
-var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrimitive);
 
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React14__namespace.useState(void 0);
-  React14__namespace.useEffect(() => {
+  const [isMobile, setIsMobile] = React15__namespace.useState(void 0);
+  React15__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -137,7 +137,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React14__namespace.forwardRef(
+var Button = React15__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -245,7 +245,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
@@ -501,7 +501,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React14__namespace.useMemo(
+  const _values = React15__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -787,7 +787,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React14__namespace.createContext({
+var ToggleGroupContext = React15__namespace.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -824,7 +824,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React14__namespace.useContext(ToggleGroupContext);
+  const context = React15__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -846,6 +846,125 @@ function ToggleGroupItem({
     }
   );
 }
+function ThemeSwitch({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  className,
+  size = "default"
+}) {
+  const [isChecked, setIsChecked] = React15__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MoonIcon, { className: cn(sizes.icon, "text-primary") }) : /* @__PURE__ */ jsxRuntime.jsx(SunIcon, { className: cn(sizes.icon, "text-muted-foreground") })
+        }
+      )
+    }
+  );
+}
+function SunIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 20v2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4.93 4.93 1.41 1.41" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m17.66 17.66 1.41 1.41" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 12h2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6.34 17.66-1.41 1.41" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m19.07 4.93-1.41 1.41" })
+      ]
+    }
+  );
+}
+function MoonIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+    }
+  );
+}
 function ToolBarCanvas({
   className,
   ...props
@@ -1155,7 +1274,7 @@ function Label2({
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React14__namespace.createContext(
+var FormFieldContext = React15__namespace.createContext(
   {}
 );
 var FormField = ({
@@ -1164,8 +1283,8 @@ var FormField = ({
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React14__namespace.useContext(FormFieldContext);
-  const itemContext = React14__namespace.useContext(FormItemContext);
+  const fieldContext = React15__namespace.useContext(FormFieldContext);
+  const itemContext = React15__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1182,11 +1301,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React14__namespace.createContext(
+var FormItemContext = React15__namespace.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React14__namespace.useId();
+  const id = React15__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1434,7 +1553,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = React14.useMemo(() => {
+  const content = React15.useMemo(() => {
     if (children) {
       return children;
     }
@@ -2103,7 +2222,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
@@ -2288,8 +2407,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React14__namespace.useRef(null);
-  React14__namespace.useEffect(() => {
+  const ref = React15__namespace.useRef(null);
+  React15__namespace.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2310,9 +2429,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React14__namespace.createContext(null);
+var CarouselContext = React15__namespace.createContext(null);
 function useCarousel() {
-  const context = React14__namespace.useContext(CarouselContext);
+  const context = React15__namespace.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -2334,20 +2453,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React14__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React14__namespace.useState(false);
-  const onSelect = React14__namespace.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React15__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React15__namespace.useState(false);
+  const onSelect = React15__namespace.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React14__namespace.useCallback(() => {
+  const scrollPrev = React15__namespace.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React14__namespace.useCallback(() => {
+  const scrollNext = React15__namespace.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React14__namespace.useCallback(
+  const handleKeyDown = React15__namespace.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2359,11 +2478,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React14__namespace.useEffect(() => {
+  React15__namespace.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React14__namespace.useEffect(() => {
+  React15__namespace.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2496,9 +2615,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React14__namespace.createContext(null);
+var ChartContext = React15__namespace.createContext(null);
 function useChart() {
-  const context = React14__namespace.useContext(ChartContext);
+  const context = React15__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2511,7 +2630,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React14__namespace.useId();
+  const uniqueId = React15__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2572,7 +2691,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React14__namespace.useMemo(() => {
+  const tooltipLabel = React15__namespace.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3275,8 +3394,8 @@ function TooltipContent({
   ) });
 }
 function useDetectTheme() {
-  const [theme, setTheme] = React14__namespace.useState("light");
-  React14__namespace.useEffect(() => {
+  const [theme, setTheme] = React15__namespace.useState("light");
+  React15__namespace.useEffect(() => {
     const isDark = document.documentElement.classList.contains("dark");
     setTheme(isDark ? "dark" : "light");
     const observer = new MutationObserver((mutations) => {
@@ -3643,6 +3762,59 @@ function DialogDescription({
     }
   );
 }
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScrollAreaPrimitive__namespace.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollAreaPrimitive__namespace.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__ */ jsxRuntime.jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollAreaPrimitive__namespace.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__ */ jsxRuntime.jsx(
+        ScrollAreaPrimitive__namespace.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
 function Command({
   className,
   ...props
@@ -3712,17 +3884,17 @@ function CommandList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "max-h-[300px]", children: /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.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
@@ -3797,7 +3969,7 @@ function CommandShortcut({
     }
   );
 }
-var SearchTrigger = React14__namespace.forwardRef(
+var SearchTrigger = React15__namespace.forwardRef(
   ({
     className,
     placeholder = "Search...",
@@ -3833,7 +4005,7 @@ var SearchTrigger = React14__namespace.forwardRef(
 );
 SearchTrigger.displayName = "SearchTrigger";
 function useSearchShortcut(onOpen, key = "k") {
-  React14__namespace.useEffect(() => {
+  React15__namespace.useEffect(() => {
     const down = (e) => {
       if (e.key.toLowerCase() === key.toLowerCase() && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -4729,59 +4901,6 @@ function HoverCardContent({
     }
   ) });
 }
-function ScrollArea({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ScrollAreaPrimitive__namespace.Root,
-    {
-      "data-slot": "scroll-area",
-      className: cn("relative", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ScrollAreaPrimitive__namespace.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__ */ jsxRuntime.jsx(ScrollBar, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
-      ]
-    }
-  );
-}
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ScrollAreaPrimitive__namespace.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__ */ jsxRuntime.jsx(
-        ScrollAreaPrimitive__namespace.ScrollAreaThumb,
-        {
-          "data-slot": "scroll-area-thumb",
-          className: "bg-border relative flex-1 rounded-full"
-        }
-      )
-    }
-  );
-}
 function Collapsible({
   ...props
 }) {
@@ -4861,9 +4980,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React14__namespace.createContext(null);
+var SidebarContext = React15__namespace.createContext(null);
 function useSidebar() {
-  const context = React14__namespace.useContext(SidebarContext);
+  const context = React15__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4879,10 +4998,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React14__namespace.useState(false);
-  const [_open, _setOpen] = React14__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React15__namespace.useState(false);
+  const [_open, _setOpen] = React15__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React14__namespace.useCallback(
+  const setOpen = React15__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4894,10 +5013,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React14__namespace.useCallback(() => {
+  const toggleSidebar = React15__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React14__namespace.useEffect(() => {
+  React15__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4908,7 +5027,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React14__namespace.useMemo(
+  const contextValue = React15__namespace.useMemo(
     () => ({
       state,
       open,
@@ -5366,7 +5485,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React14__namespace.useMemo(() => {
+  const width = React15__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5509,7 +5628,7 @@ var sectionVariants = classVarianceAuthority.cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React14__namespace.forwardRef(
+var Section = React15__namespace.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
@@ -5521,7 +5640,7 @@ var Section = React14__namespace.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React14__namespace.forwardRef(
+var SectionHeader = React15__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5536,7 +5655,7 @@ var SectionHeader = React14__namespace.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React14__namespace.forwardRef(
+var SectionTitle = React15__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "h2",
     {
@@ -5550,7 +5669,7 @@ var SectionTitle = React14__namespace.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React14__namespace.forwardRef(
+var SectionDescription = React15__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
@@ -5564,7 +5683,7 @@ var SectionDescription = React14__namespace.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React14__namespace.forwardRef(
+var SectionContent = React15__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5578,7 +5697,7 @@ var SectionContent = React14__namespace.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React14__namespace.forwardRef(
+var SectionFooter = React15__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5629,7 +5748,7 @@ function SiteHeader({
       children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "mr-[var(--j3m-spacing-s)] h-4" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React14__namespace.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React15__namespace.Fragment, { children: [
           index > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
           /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { href: item.href, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) })
         ] }, index)) }) }),
@@ -5841,7 +5960,7 @@ var BADGE_VARIANT_LABELS = {
   colored: "Colored",
   mixed: "Mixed"
 };
-var CalendarContext = React14__namespace.createContext(null);
+var CalendarContext = React15__namespace.createContext(null);
 function EventCalendarProvider({
   children,
   events: initialEvents = [],
@@ -5856,38 +5975,38 @@ function EventCalendarProvider({
   onEventUpdate,
   onEventDelete
 }) {
-  const [selectedDate, setSelectedDate] = React14__namespace.useState(defaultDate);
-  const [selectedUserId, setSelectedUserId] = React14__namespace.useState(defaultUserId);
-  const [events, setEventsState] = React14__namespace.useState(initialEvents);
-  const [users] = React14__namespace.useState(initialUsers);
-  const [badgeVariant, setBadgeVariant] = React14__namespace.useState(defaultBadgeVariant);
-  const [view, setView] = React14__namespace.useState(defaultView);
-  const [workingHours, setWorkingHours] = React14__namespace.useState(defaultWorkingHours);
-  const [visibleHours, setVisibleHours] = React14__namespace.useState(defaultVisibleHours);
-  React14__namespace.useEffect(() => {
+  const [selectedDate, setSelectedDate] = React15__namespace.useState(defaultDate);
+  const [selectedUserId, setSelectedUserId] = React15__namespace.useState(defaultUserId);
+  const [events, setEventsState] = React15__namespace.useState(initialEvents);
+  const [users] = React15__namespace.useState(initialUsers);
+  const [badgeVariant, setBadgeVariant] = React15__namespace.useState(defaultBadgeVariant);
+  const [view, setView] = React15__namespace.useState(defaultView);
+  const [workingHours, setWorkingHours] = React15__namespace.useState(defaultWorkingHours);
+  const [visibleHours, setVisibleHours] = React15__namespace.useState(defaultVisibleHours);
+  React15__namespace.useEffect(() => {
     setEventsState(initialEvents);
   }, [initialEvents]);
-  const setEvents = React14__namespace.useCallback((newEvents) => {
+  const setEvents = React15__namespace.useCallback((newEvents) => {
     setEventsState(newEvents);
   }, []);
-  const addEvent = React14__namespace.useCallback((event) => {
+  const addEvent = React15__namespace.useCallback((event) => {
     setEventsState((prev) => [...prev, event]);
     onEventAdd?.(event);
   }, [onEventAdd]);
-  const updateEvent = React14__namespace.useCallback((event) => {
+  const updateEvent = React15__namespace.useCallback((event) => {
     setEventsState(
       (prev) => prev.map((e) => e.id === event.id ? event : e)
     );
     onEventUpdate?.(event);
   }, [onEventUpdate]);
-  const deleteEvent = React14__namespace.useCallback((eventId) => {
+  const deleteEvent = React15__namespace.useCallback((eventId) => {
     setEventsState((prev) => prev.filter((e) => e.id !== eventId));
     onEventDelete?.(eventId);
   }, [onEventDelete]);
-  const goToToday = React14__namespace.useCallback(() => {
+  const goToToday = React15__namespace.useCallback(() => {
     setSelectedDate(/* @__PURE__ */ new Date());
   }, []);
-  const goToPrevious = React14__namespace.useCallback(() => {
+  const goToPrevious = React15__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -5905,7 +6024,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const goToNext = React14__namespace.useCallback(() => {
+  const goToNext = React15__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -5923,7 +6042,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const contextValue = React14__namespace.useMemo(
+  const contextValue = React15__namespace.useMemo(
     () => ({
       // State
       selectedDate,
@@ -5970,7 +6089,7 @@ function EventCalendarProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(CalendarContext.Provider, { value: contextValue, children });
 }
 function useEventCalendar() {
-  const context = React14__namespace.useContext(CalendarContext);
+  const context = React15__namespace.useContext(CalendarContext);
   if (!context) {
     throw new Error("useEventCalendar must be used within an EventCalendarProvider");
   }
@@ -5978,14 +6097,14 @@ function useEventCalendar() {
 }
 function useFilteredEvents() {
   const { events, selectedUserId } = useEventCalendar();
-  return React14__namespace.useMemo(() => {
+  return React15__namespace.useMemo(() => {
     if (!selectedUserId) return events;
     return events.filter((event) => event.user.id === selectedUserId);
   }, [events, selectedUserId]);
 }
 function useEventsInRange(startDate, endDate) {
   const filteredEvents = useFilteredEvents();
-  return React14__namespace.useMemo(() => {
+  return React15__namespace.useMemo(() => {
     return filteredEvents.filter((event) => {
       const eventStart = new Date(event.startDate);
       const eventEnd = new Date(event.endDate);
@@ -6543,8 +6662,8 @@ function MoreEvents({ count, onClick, className }) {
   );
 }
 function TimeIndicator({ className }) {
-  const [now, setNow] = React14__namespace.useState(/* @__PURE__ */ new Date());
-  React14__namespace.useEffect(() => {
+  const [now, setNow] = React15__namespace.useState(/* @__PURE__ */ new Date());
+  React15__namespace.useEffect(() => {
     const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
     return () => clearInterval(interval);
   }, []);
@@ -6581,24 +6700,24 @@ function DateBadge({ date, className }) {
     }
   );
 }
-var DragContext = React14__namespace.createContext(null);
+var DragContext = React15__namespace.createContext(null);
 function DragProvider({
   children,
   snapMinutes = 15,
   onDragStart,
   onDragEnd
 }) {
-  const [draggedEvent, setDraggedEventState] = React14__namespace.useState(null);
-  const [isDragging, setIsDragging] = React14__namespace.useState(false);
+  const [draggedEvent, setDraggedEventState] = React15__namespace.useState(null);
+  const [isDragging, setIsDragging] = React15__namespace.useState(false);
   const { updateEvent } = useEventCalendar();
-  const setDraggedEvent = React14__namespace.useCallback((event) => {
+  const setDraggedEvent = React15__namespace.useCallback((event) => {
     setDraggedEventState(event);
     setIsDragging(!!event);
     if (event) {
       onDragStart?.(event);
     }
   }, [onDragStart]);
-  const handleDrop = React14__namespace.useCallback((newStartDate) => {
+  const handleDrop = React15__namespace.useCallback((newStartDate) => {
     if (!draggedEvent) return;
     const snappedDate = snapToInterval(newStartDate, snapMinutes);
     const { startDate, endDate } = calculateDropDates(draggedEvent, snappedDate);
@@ -6611,7 +6730,7 @@ function DragProvider({
     onDragEnd?.(updatedEvent, new Date(startDate), new Date(endDate));
     setDraggedEvent(null);
   }, [draggedEvent, snapMinutes, updateEvent, onDragEnd, setDraggedEvent]);
-  const contextValue = React14__namespace.useMemo(
+  const contextValue = React15__namespace.useMemo(
     () => ({
       draggedEvent,
       setDraggedEvent,
@@ -6622,7 +6741,7 @@ function DragProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(DragContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DragDropHandler, { onDrop: handleDrop, children }) });
 }
 function useDrag() {
-  const context = React14__namespace.useContext(DragContext);
+  const context = React15__namespace.useContext(DragContext);
   if (!context) {
     throw new Error("useDrag must be used within a DragProvider");
   }
@@ -6667,7 +6786,7 @@ function DroppableZone({
 }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React14__namespace.useState(false);
+  const [isOver, setIsOver] = React15__namespace.useState(false);
   const handleDragOver = (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
@@ -6705,23 +6824,23 @@ function DroppableZone({
 function useDroppable({ date, hour, minute = 0, onDrop }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React14__namespace.useState(false);
-  const dropTargetDate = React14__namespace.useMemo(() => {
+  const [isOver, setIsOver] = React15__namespace.useState(false);
+  const dropTargetDate = React15__namespace.useMemo(() => {
     const targetDate = new Date(date);
     if (hour !== void 0) {
       targetDate.setHours(hour, minute, 0, 0);
     }
     return targetDate;
   }, [date, hour, minute]);
-  const handleDragOver = React14__namespace.useCallback((e) => {
+  const handleDragOver = React15__namespace.useCallback((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     if (!isOver) setIsOver(true);
   }, [isOver]);
-  const handleDragLeave = React14__namespace.useCallback(() => {
+  const handleDragLeave = React15__namespace.useCallback(() => {
     setIsOver(false);
   }, []);
-  const handleDrop = React14__namespace.useCallback((e) => {
+  const handleDrop = React15__namespace.useCallback((e) => {
     e.preventDefault();
     setIsOver(false);
     if (!draggedEvent) return;
@@ -6748,13 +6867,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__namespace.useCallback((e) => {
+  const handleDragStart = React15__namespace.useCallback((e) => {
     if (disabled) return;
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", event.id);
     setDraggedEvent(event);
   }, [disabled, event, setDraggedEvent]);
-  const handleDragEnd = React14__namespace.useCallback(() => {
+  const handleDragEnd = React15__namespace.useCallback(() => {
     setDraggedEvent(null);
   }, [setDraggedEvent]);
   return {
@@ -6795,15 +6914,15 @@ function MonthView({
 }) {
   const { selectedDate, badgeVariant, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React14__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React15__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const cells = React14__namespace.useMemo(
+  const cells = React15__namespace.useMemo(
     () => getCalendarCells(selectedDate),
     [selectedDate]
   );
-  const eventPositions = React14__namespace.useMemo(
+  const eventPositions = React15__namespace.useMemo(
     () => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate),
     [multiDayEvents, singleDayEvents, selectedDate]
   );
@@ -6985,7 +7104,7 @@ function WeekView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React14__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React15__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -7191,8 +7310,8 @@ function CalendarTimeline({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React14__namespace.useState(/* @__PURE__ */ new Date());
-  React14__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React15__namespace.useState(/* @__PURE__ */ new Date());
+  React15__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -7275,7 +7394,7 @@ function DayView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React14__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React15__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -7283,7 +7402,7 @@ function DayView({
     visibleHours,
     singleDayEvents
   );
-  const currentEvents = React14__namespace.useMemo(() => {
+  const currentEvents = React15__namespace.useMemo(() => {
     if (!dateFns.isToday(selectedDate)) return [];
     return getCurrentEvents(singleDayEvents);
   }, [singleDayEvents, selectedDate]);
@@ -7507,8 +7626,8 @@ function CalendarTimeline2({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React14__namespace.useState(/* @__PURE__ */ new Date());
-  React14__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React15__namespace.useState(/* @__PURE__ */ new Date());
+  React15__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -7542,7 +7661,7 @@ function YearView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const months = React14__namespace.useMemo(() => {
+  const months = React15__namespace.useMemo(() => {
     const yearStart = dateFns.startOfYear(selectedDate);
     return Array.from({ length: 12 }, (_, i) => dateFns.addMonths(yearStart, i));
   }, [selectedDate]);
@@ -7665,11 +7784,11 @@ function AgendaView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React14__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React15__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const eventsByDay = React14__namespace.useMemo(() => {
+  const eventsByDay = React15__namespace.useMemo(() => {
     const allDates = /* @__PURE__ */ new Map();
     singleDayEvents.forEach((event) => {
       const eventDate = dateFns.parseISO(event.startDate);
@@ -7842,7 +7961,9 @@ function CalendarHeader({
   // Hidden by default, controlled via settings
   showToday = true,
   showAddButton = true,
-  onAddClick
+  showSettings = true,
+  onAddClick,
+  onSettingsClick
 }) {
   const {
     selectedDate,
@@ -7991,9 +8112,22 @@ function CalendarHeader({
               }
             )
           ] }),
-          showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onAddClick, className: "w-full sm:w-auto", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}),
-            "Add Event"
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            showSettings && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                onClick: onSettingsClick,
+                className: "shrink-0",
+                "aria-label": "Calendar settings",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" })
+              }
+            ),
+            showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onAddClick, className: "w-full sm:w-auto", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}),
+              "Add Event"
+            ] })
           ] })
         ] })
       ]
@@ -8003,7 +8137,9 @@ function CalendarHeader({
 function CalendarHeaderCompact({
   className,
   showAddButton = true,
-  onAddClick
+  showSettings = true,
+  onAddClick,
+  onSettingsClick
 }) {
   const {
     selectedDate,
@@ -8083,7 +8219,18 @@ function CalendarHeaderCompact({
               }
             )
           ] }),
-          showAddButton && /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: onAddClick, className: "ml-2 size-8 p-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }) })
+          showSettings && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              onClick: onSettingsClick,
+              className: "ml-2 size-8",
+              "aria-label": "Calendar settings",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" })
+            }
+          ),
+          showAddButton && /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: onAddClick, className: "size-8 p-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" }) })
         ] })
       ]
     }
@@ -8106,16 +8253,16 @@ function EventDialog({
   defaultUserId
 }) {
   const { addEvent, updateEvent, deleteEvent, users } = useEventCalendar();
-  const [title, setTitle] = React14__namespace.useState("");
-  const [description, setDescription] = React14__namespace.useState("");
-  const [startDate, setStartDate] = React14__namespace.useState("");
-  const [startTime, setStartTime] = React14__namespace.useState("");
-  const [endDate, setEndDate] = React14__namespace.useState("");
-  const [endTime, setEndTime] = React14__namespace.useState("");
-  const [color, setColor] = React14__namespace.useState("blue");
-  const [userId, setUserId] = React14__namespace.useState("");
-  const [isSubmitting, setIsSubmitting] = React14__namespace.useState(false);
-  React14__namespace.useEffect(() => {
+  const [title, setTitle] = React15__namespace.useState("");
+  const [description, setDescription] = React15__namespace.useState("");
+  const [startDate, setStartDate] = React15__namespace.useState("");
+  const [startTime, setStartTime] = React15__namespace.useState("");
+  const [endDate, setEndDate] = React15__namespace.useState("");
+  const [endTime, setEndTime] = React15__namespace.useState("");
+  const [color, setColor] = React15__namespace.useState("blue");
+  const [userId, setUserId] = React15__namespace.useState("");
+  const [isSubmitting, setIsSubmitting] = React15__namespace.useState(false);
+  React15__namespace.useEffect(() => {
     if (open) {
       if (mode === "edit" && event) {
         const start = dateFns.parseISO(event.startDate);
@@ -8338,7 +8485,7 @@ function QuickAddEvent({
   onOpenDialog,
   onClose
 }) {
-  const [title, setTitle] = React14__namespace.useState("");
+  const [title, setTitle] = React15__namespace.useState("");
   const { users } = useEventCalendar();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -8405,8 +8552,8 @@ var HOUR_OPTIONS = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeVisibleHoursInput() {
   const { visibleHours, setVisibleHours } = useEventCalendar();
-  const [from, setFrom] = React14__namespace.useState(visibleHours.from);
-  const [to, setTo] = React14__namespace.useState(visibleHours.to);
+  const [from, setFrom] = React15__namespace.useState(visibleHours.from);
+  const [to, setTo] = React15__namespace.useState(visibleHours.to);
   const handleApply = () => {
     const toHour = to === 0 ? 24 : to;
     setVisibleHours({ from, to: toHour });
@@ -8452,7 +8599,7 @@ var HOUR_OPTIONS2 = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeWorkingHoursInput() {
   const { workingHours, setWorkingHours } = useEventCalendar();
-  const [localWorkingHours, setLocalWorkingHours] = React14__namespace.useState({
+  const [localWorkingHours, setLocalWorkingHours] = React15__namespace.useState({
     ...workingHours
   });
   const handleToggleDay = (dayId) => {
@@ -8547,27 +8694,62 @@ function ChangeWorkingHoursInput() {
     /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "mt-4 w-fit", onClick: handleSave, children: "Apply" })
   ] });
 }
-function CalendarSettingsPanel({
+function CalendarSettingsContent({
   className,
   showBadgeVariant = true,
   showVisibleHours = true,
   showWorkingHours = true
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: cn("relative z-10 bg-background", className), children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "settings", className: "border-none", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "flex-none gap-2 py-0 hover:no-underline", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold", children: "Calendar settings" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-col gap-6", children: [
-      showBadgeVariant && /* @__PURE__ */ jsxRuntime.jsx(ChangeBadgeVariantInput, {}),
-      showVisibleHours && /* @__PURE__ */ jsxRuntime.jsx(ChangeVisibleHoursInput, {}),
-      showWorkingHours && /* @__PURE__ */ jsxRuntime.jsx(ChangeWorkingHoursInput, {})
-    ] }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6", className), children: [
+    showBadgeVariant && /* @__PURE__ */ jsxRuntime.jsx(ChangeBadgeVariantInput, {}),
+    showVisibleHours && /* @__PURE__ */ jsxRuntime.jsx(ChangeVisibleHoursInput, {}),
+    showWorkingHours && /* @__PURE__ */ jsxRuntime.jsx(ChangeWorkingHoursInput, {})
+  ] });
+}
+function CalendarSettingsDialog({
+  open,
+  onOpenChange,
+  showBadgeVariant = true,
+  showVisibleHours = true,
+  showWorkingHours = true
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-5" }),
+        "Calendar Settings"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Customize your calendar view and preferences." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarSettingsContent,
+      {
+        showBadgeVariant,
+        showVisibleHours,
+        showWorkingHours
+      }
+    )
   ] }) });
 }
+function CalendarSettingsButton({
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "icon",
+      onClick,
+      className: cn("shrink-0", className),
+      "aria-label": "Calendar settings",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" })
+    }
+  );
+}
 function useMediaQuery(query) {
-  const [matches, setMatches] = React14__namespace.useState(false);
-  React14__namespace.useEffect(() => {
+  const [matches, setMatches] = React15__namespace.useState(false);
+  React15__namespace.useEffect(() => {
     const media = window.matchMedia(query);
     setMatches(media.matches);
     const listener = (event) => {
@@ -8619,10 +8801,11 @@ function BigCalendarInner({
   maxEventsPerDay
 }) {
   const { view, setView } = useEventCalendar();
-  const [dialogOpen, setDialogOpen] = React14__namespace.useState(false);
-  const [selectedEvent, setSelectedEvent] = React14__namespace.useState(null);
-  const [dialogMode, setDialogMode] = React14__namespace.useState("add");
-  const [defaultDate, setDefaultDate] = React14__namespace.useState(/* @__PURE__ */ new Date());
+  const [dialogOpen, setDialogOpen] = React15__namespace.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React15__namespace.useState(false);
+  const [selectedEvent, setSelectedEvent] = React15__namespace.useState(null);
+  const [dialogMode, setDialogMode] = React15__namespace.useState("add");
+  const [defaultDate, setDefaultDate] = React15__namespace.useState(/* @__PURE__ */ new Date());
   const isMobile = useMediaQuery("(max-width: 768px)");
   const isCompact = compact === "auto" ? isMobile : compact;
   const handleAddClick = () => {
@@ -8631,6 +8814,9 @@ function BigCalendarInner({
     setDefaultDate(/* @__PURE__ */ new Date());
     setDialogOpen(true);
   };
+  const handleSettingsClick = () => {
+    setSettingsDialogOpen(true);
+  };
   const handleEventClick = (event) => {
     setSelectedEvent(event);
     setDialogMode("edit");
@@ -8654,45 +8840,46 @@ function BigCalendarInner({
   const Wrapper = bordered ? Card : "div";
   const Content14 = bordered ? CardContent : "div";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4 relative", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Wrapper,
-        {
-          className: cn(
-            "flex min-h-[600px] flex-col overflow-hidden rounded-sm",
-            !bordered && "border border-border bg-card"
-          ),
-          children: [
-            showHeader && (isCompact ? /* @__PURE__ */ jsxRuntime.jsx(
-              CalendarHeaderCompact,
-              {
-                showAddButton,
-                onAddClick: handleAddClick
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              CalendarHeader,
-              {
-                showAddButton,
-                onAddClick: handleAddClick
-              }
-            )),
-            /* @__PURE__ */ jsxRuntime.jsx(Content14, { className: cn("flex-1 overflow-hidden", bordered ? "p-0" : ""), children: /* @__PURE__ */ jsxRuntime.jsx(
-              CalendarView,
-              {
-                view,
-                weekStartsOn,
-                maxEventsPerDay,
-                onEventClick: handleEventClick,
-                onDateClick: handleDateClick,
-                onMoreClick: handleMoreClick,
-                onTimeClick: handleTimeClick
-              }
-            ) })
-          ]
-        }
-      ),
-      showSettings && /* @__PURE__ */ jsxRuntime.jsx(CalendarSettingsPanel, {})
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4 relative", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Wrapper,
+      {
+        className: cn(
+          "flex min-h-[600px] flex-col overflow-hidden rounded-sm",
+          !bordered && "border border-border bg-card"
+        ),
+        children: [
+          showHeader && (isCompact ? /* @__PURE__ */ jsxRuntime.jsx(
+            CalendarHeaderCompact,
+            {
+              showAddButton,
+              showSettings,
+              onAddClick: handleAddClick,
+              onSettingsClick: handleSettingsClick
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            CalendarHeader,
+            {
+              showAddButton,
+              showSettings,
+              onAddClick: handleAddClick,
+              onSettingsClick: handleSettingsClick
+            }
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx(Content14, { className: cn("flex-1 overflow-hidden", bordered ? "p-0" : ""), children: /* @__PURE__ */ jsxRuntime.jsx(
+            CalendarView,
+            {
+              view,
+              weekStartsOn,
+              maxEventsPerDay,
+              onEventClick: handleEventClick,
+              onDateClick: handleDateClick,
+              onMoreClick: handleMoreClick,
+              onTimeClick: handleTimeClick
+            }
+          ) })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       EventDialog,
       {
@@ -8702,6 +8889,13 @@ function BigCalendarInner({
         event: selectedEvent,
         defaultDate
       }
+    ),
+    showSettings && /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarSettingsDialog,
+      {
+        open: settingsDialogOpen,
+        onOpenChange: setSettingsDialogOpen
+      }
     )
   ] });
 }
@@ -8840,7 +9034,9 @@ exports.CalendarContext = CalendarContext;
 exports.CalendarDayButton = CalendarDayButton;
 exports.CalendarHeader = CalendarHeader;
 exports.CalendarHeaderCompact = CalendarHeaderCompact;
-exports.CalendarSettingsPanel = CalendarSettingsPanel;
+exports.CalendarSettingsButton = CalendarSettingsButton;
+exports.CalendarSettingsContent = CalendarSettingsContent;
+exports.CalendarSettingsDialog = CalendarSettingsDialog;
 exports.Card = Card;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
@@ -9114,6 +9310,7 @@ exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
+exports.ThemeSwitch = ThemeSwitch;
 exports.TimeIndicator = TimeIndicator;
 exports.Toaster = Toaster;
 exports.Toggle = Toggle;