@j3m-quantum/ui 1.3.1 → 1.4.0

package/dist/index.cjs

@@ -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');
@@ -83,12 +83,12 @@ 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);
 
@@ -2222,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
@@ -3762,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
@@ -3831,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
@@ -4848,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
 }) {
@@ -7961,7 +7961,9 @@ function CalendarHeader({
   // Hidden by default, controlled via settings
   showToday = true,
   showAddButton = true,
-  onAddClick
+  showSettings = true,
+  onAddClick,
+  onSettingsClick
 }) {
   const {
     selectedDate,
@@ -8110,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"
+            ] })
           ] })
         ] })
       ]
@@ -8122,7 +8137,9 @@ function CalendarHeader({
 function CalendarHeaderCompact({
   className,
   showAddButton = true,
-  onAddClick
+  showSettings = true,
+  onAddClick,
+  onSettingsClick
 }) {
   const {
     selectedDate,
@@ -8202,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" }) })
         ] })
       ]
     }
@@ -8666,24 +8694,59 @@ 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] = React15__namespace.useState(false);
   React15__namespace.useEffect(() => {
@@ -8739,6 +8802,7 @@ function BigCalendarInner({
 }) {
   const { view, setView } = useEventCalendar();
   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());
@@ -8750,6 +8814,9 @@ function BigCalendarInner({
     setDefaultDate(/* @__PURE__ */ new Date());
     setDialogOpen(true);
   };
+  const handleSettingsClick = () => {
+    setSettingsDialogOpen(true);
+  };
   const handleEventClick = (event) => {
     setSelectedEvent(event);
     setDialogMode("edit");
@@ -8773,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,
       {
@@ -8821,6 +8889,13 @@ function BigCalendarInner({
         event: selectedEvent,
         defaultDate
       }
+    ),
+    showSettings && /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarSettingsDialog,
+      {
+        open: settingsDialogOpen,
+        onOpenChange: setSettingsDialogOpen
+      }
     )
   ] });
 }
@@ -8959,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;