@bizapps/ui 1.0.0 → 1.2.2

package/dist/main.js

@@ -1,18 +1,18 @@
 "use client";
-import { SearchIcon, BellIcon, CircleHelpIcon, Menu, ChevronDownIcon, LoaderCircle, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, XIcon, ChevronsUpDownIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, House, Plane, Wallet, LayoutDashboardIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon } from 'lucide-react';
+import { SearchIcon, BellIcon, CircleHelpIcon, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, LoaderCircle, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, XIcon, ChevronsUpDownIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, MenuIcon, Pencil, Clock, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, House, Plane, Wallet, LayoutDashboardIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect, forwardRef, Fragment, Children, isValidElement, cloneElement, useId, useContext, useLayoutEffect } from 'react';
-import { Slot, Avatar as Avatar$1, Checkbox as Checkbox$1, Select as Select$1, Toggle as Toggle$1, ToggleGroup, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Popover as Popover$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1 } from 'radix-ui';
-import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect, forwardRef, Fragment, useId, useContext, useLayoutEffect } from 'react';
+import { Avatar as Avatar$1, Checkbox as Checkbox$1, Slot, Select as Select$1, Label as Label$1, Toggle as Toggle$1, ToggleGroup, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Popover as Popover$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1 } from 'radix-ui';
 import { isSameDay, isToday, format, addDays } from 'date-fns';
 import useEmblaCarousel from 'embla-carousel-react';
 import { motion, AnimatePresence } from 'motion/react';
 import { Command } from 'cmdk';
 import { useDropzone } from 'react-dropzone';
 import Color from 'color';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import { ScheduleXCalendar } from '@schedule-x/react';
 import { createCalendar, viewMonthGrid, viewWeek, viewDay, viewMonthAgenda } from '@schedule-x/calendar';
 import { createEventsServicePlugin } from '@schedule-x/events-service';
@@ -452,174 +452,6 @@ function Button({
     }
   );
 }
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "dropdown",
-  buttonVariant = "ghost",
-  locale,
-  formatters,
-  components,
-  fromYear,
-  toYear,
-  ...props
-}) {
-  const defaultClassNames = getDefaultClassNames();
-  return /* @__PURE__ */ jsx(
-    DayPicker,
-    {
-      showOutsideDays,
-      className: cn(
-        "group/calendar bg-background p-3 font-sans [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      ),
-      captionLayout,
-      startMonth: new Date(fromYear ?? 1900, 0),
-      endMonth: new Date(toYear ?? 2100, 11),
-      locale,
-      formatters: {
-        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
-        ...formatters
-      },
-      classNames: {
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn("relative flex flex-col gap-3 md:flex-row", defaultClassNames.months),
-        month: cn("flex w-full flex-col gap-3", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-2",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-7 p-0 select-none opacity-50 aria-disabled:opacity-30 transition-opacity duration-150 hover:opacity-100",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-7 p-0 select-none opacity-50 aria-disabled:opacity-30 transition-opacity duration-150 hover:opacity-100",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size) tracking-tight",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-semibold",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative rounded-(--cell-radius)",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
-        caption_label: cn(
-          "font-semibold select-none",
-          captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
-          defaultClassNames.caption_label
-        ),
-        weekdays: cn("flex gap-1", defaultClassNames.weekdays),
-        weekday: cn(
-          "flex-1 rounded-(--cell-radius) text-[0.75rem] font-semibold text-muted-foreground/70 select-none tracking-wide",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full gap-1", defaultClassNames.week),
-        week_number_header: cn(
-          "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.75rem] text-muted-foreground/50 select-none",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
-          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "relative isolate z-0 rounded-l-md bg-primary/8 after:absolute after:inset-y-0 after:right-0 after:w-3 after:bg-primary/8",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none bg-primary/8", defaultClassNames.range_middle),
-        range_end: cn(
-          "relative isolate z-0 rounded-r-md bg-primary/8 after:absolute after:inset-y-0 after:left-0 after:w-3 after:bg-primary/8",
-          defaultClassNames.range_end
-        ),
-        today: cn("rounded-md bg-accent text-accent-foreground", defaultClassNames.today),
-        outside: cn(
-          "text-muted-foreground/50 aria-selected:text-muted-foreground/50",
-          defaultClassNames.outside
-        ),
-        disabled: cn("text-muted-foreground/40 opacity-50", defaultClassNames.disabled),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames
-      },
-      components: {
-        Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
-          if (orientation === "left") {
-            return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
-          }
-          if (orientation === "right") {
-            return /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4", className2), ...props2 });
-          }
-          return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
-        },
-        DayButton: ({ ...props2 }) => /* @__PURE__ */ jsx(CalendarDayButton, { locale, ...props2 }),
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
-        },
-        ...components
-      },
-      ...props
-    }
-  );
-}
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  locale,
-  ...props
-}) {
-  const defaultClassNames = getDefaultClassNames();
-  const ref = useRef(null);
-  useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ref,
-      variant: "ghost",
-      size: "icon-sm",
-      "data-day": day.date.toLocaleDateString(locale?.code),
-      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
-      "data-range-start": modifiers.range_start,
-      "data-range-end": modifiers.range_end,
-      "data-range-middle": modifiers.range_middle,
-      className: cn(
-        "group-data-[focused=true]/day:ring-primary/40 data-[range-end=true]:!bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:!bg-primary/8 data-[range-middle=true]:text-foreground data-[range-start=true]:!bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:!bg-primary data-[selected-single=true]:text-primary-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 !rounded-md border-0 !bg-transparent leading-none font-normal transition-colors duration-150 group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:rounded-md group-data-[focused=true]/day:ring-[2px] hover:!bg-transparent data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[selected-single=true]:rounded-md [&>span]:text-xs [&>span]:font-medium [&>span]:opacity-75",
-        defaultClassNames.day,
-        className
-      ),
-      ...props
-    }
-  );
-}
 function useControllableState({
   prop,
   defaultProp,
@@ -1105,6 +937,22 @@ function Input({ className, type, ...props }) {
     }
   );
 }
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Label$1.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "text-foreground text-sm leading-6 font-medium transition-colors select-none",
+        "group-has-disabled/field:cursor-not-allowed group-has-disabled/field:opacity-50",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "aria-invalid:text-destructive dark:aria-invalid:text-destructive/90",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/utils/urlSecurity.ts
 var SAFE_HREF_PROTOCOLS = /* @__PURE__ */ new Set(["https:", "http:", "mailto:", "tel:"]);
@@ -1580,7 +1428,7 @@ var progressVariants = cva("relative flex w-full items-center overflow-x-hidden
     size: "md"
   }
 });
-var progressIndicatorVariants = cva("size-full flex-1 transition-all", {
+var progressIndicatorVariants = cva("size-full flex-1 transition-all rounded-[5px]", {
   variants: {
     variant: {
       default: "bg-[var(--color-main-blue-primary)]",
@@ -4139,49 +3987,217 @@ var ColorPickerPresets = ({ colors, className, ...props }) => {
   }) });
 };
 ColorPickerPresets.displayName = "ColorPickerPresets";
-function DatePicker({
-  mode = "single",
-  selected,
-  onSelect,
-  placeholder = "Pick a date",
-  disabled = false,
+function Calendar({
   className,
-  fromDate,
-  toDate
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "dropdown",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  fromYear,
+  toYear,
+  ...props
 }) {
-  const [open, setOpen] = useState(false);
-  const label = useMemo(() => {
-    if (mode === "range") {
-      const range = selected;
-      if (range?.from && range?.to)
-        return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
-      if (range?.from) return `${format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
-      return placeholder;
-    }
-    const date = selected;
-    return date ? format(date, "MMM d, yyyy") : placeholder;
-  }, [mode, selected, placeholder]);
-  const hasValue = mode === "range" ? !!selected?.from : !!selected;
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        "data-slot": "date-picker-trigger",
-        variant: "primary",
-        disabled,
-        className: cn(
-          "w-60 justify-start gap-2 font-normal",
-          !hasValue && "text-white",
-          className
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn(
+        "group/calendar bg-background p-3 font-sans [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      startMonth: new Date(fromYear ?? 1900, 0),
+      endMonth: new Date(toYear ?? 2100, 11),
+      locale,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-3 md:flex-row", defaultClassNames.months),
+        month: cn("flex w-full flex-col gap-3", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-2",
+          defaultClassNames.nav
         ),
-        children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { "data-slot": "date-picker-content", className: "w-auto p-0", align: "start", children: mode === "range" ? /* @__PURE__ */ jsx(
-      Calendar,
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-7 p-0 select-none opacity-50 aria-disabled:opacity-30 transition-opacity duration-150 hover:opacity-100",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-7 p-0 select-none opacity-50 aria-disabled:opacity-30 transition-opacity duration-150 hover:opacity-100",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size) tracking-tight",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-semibold",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "font-semibold select-none",
+          captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        weekdays: cn("flex gap-1", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.75rem] font-semibold text-muted-foreground/70 select-none tracking-wide",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full gap-1", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.75rem] text-muted-foreground/50 select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-md bg-primary/8 after:absolute after:inset-y-0 after:right-0 after:w-3 after:bg-primary/8",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none bg-primary/8", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-md bg-primary/8 after:absolute after:inset-y-0 after:left-0 after:w-3 after:bg-primary/8",
+          defaultClassNames.range_end
+        ),
+        today: cn("rounded-md bg-accent text-accent-foreground", defaultClassNames.today),
+        outside: cn(
+          "text-muted-foreground/50 aria-selected:text-muted-foreground/50",
+          defaultClassNames.outside
+        ),
+        disabled: cn("text-muted-foreground/40 opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: cn(className2),
+              ...props2
+            }
+          );
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4", className2), ...props2 });
+          }
+          return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+        },
+        DayButton: ({ ...props2 }) => /* @__PURE__ */ jsx(CalendarDayButton, { locale, ...props2 }),
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = useRef(null);
+  useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon-sm",
+      "data-day": day.date.toLocaleDateString(locale?.code),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        "group-data-[focused=true]/day:ring-primary/40 data-[range-end=true]:!bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:!bg-primary/8 data-[range-middle=true]:text-foreground data-[range-start=true]:!bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:!bg-primary data-[selected-single=true]:text-primary-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 !rounded-md border-0 !bg-transparent leading-none font-normal transition-colors duration-150 group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:rounded-md group-data-[focused=true]/day:ring-[2px] hover:!bg-transparent data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[selected-single=true]:rounded-md [&>span]:text-xs [&>span]:font-medium [&>span]:opacity-75",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DatePicker({
+  mode = "single",
+  selected,
+  onSelect,
+  placeholder = "Pick a date",
+  disabled = false,
+  className,
+  fromDate,
+  toDate
+}) {
+  const [open, setOpen] = useState(false);
+  const label = useMemo(() => {
+    if (mode === "range") {
+      const range = selected;
+      if (range?.from && range?.to)
+        return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
+      if (range?.from) return `${format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
+      return placeholder;
+    }
+    const date = selected;
+    return date ? format(date, "MMM d, yyyy") : placeholder;
+  }, [mode, selected, placeholder]);
+  const hasValue = mode === "range" ? !!selected?.from : !!selected;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "data-slot": "date-picker-trigger",
+        variant: "primary",
+        disabled,
+        className: cn(
+          "w-60 justify-start gap-2 font-normal",
+          !hasValue && "text-white",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { "data-slot": "date-picker-content", className: "w-auto p-0", align: "start", children: mode === "range" ? /* @__PURE__ */ jsx(
+      Calendar,
       {
         ...{
           mode: "range",
@@ -4334,6 +4350,7 @@ var Navbar = forwardRef(
     notifications,
     avatarSrc,
     avatarFallback,
+    showUtilityBar = true,
     onNavLinkClick,
     onSearchClick,
     onHelpClick,
@@ -4405,7 +4422,7 @@ var Navbar = forwardRef(
             ] }),
             /* @__PURE__ */ jsx("nav", { className: "ml-auto flex h-full items-center", children: navigationLinks.map((link, i) => /* @__PURE__ */ jsx(NavLinkItem, { link, onNavLinkClick }, i)) })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "bg-background border-border border-b px-4 md:px-6", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-9 max-w-screen-2xl items-center justify-between", children: [
+          showUtilityBar && /* @__PURE__ */ jsx("div", { className: "bg-background border-border border-b px-4 md:px-6", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-9 max-w-screen-2xl items-center justify-between", children: [
             /* @__PURE__ */ jsx("nav", { className: "flex items-center", children: utilityLinks.map((link, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx("span", { className: "text-border mx-3 select-none", children: "|" }),
               /* @__PURE__ */ jsx(
@@ -4728,220 +4745,723 @@ function CanNot({ permission, mode = "any", fallback = null, children }) {
   return /* @__PURE__ */ jsx(Can, { permission, mode, negate: true, fallback, children });
 }
 CanNot.displayName = "CanNot";
-var SidebarContext = createContext({
-  open: true,
-  setOpen: () => {
-  },
-  isMobile: false
-});
-function useSidebar() {
-  return useContext(SidebarContext);
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
 }
-var SidebarProvider = forwardRef(
-  ({ defaultOpen = true, open: controlledOpen, onOpenChange, className, children, ...props }, ref) => {
-    const [internalOpen, setInternalOpen] = useState(defaultOpen);
-    const [isMobile, setIsMobile] = useState(false);
-    const containerRef = useRef(null);
-    const open = controlledOpen ?? internalOpen;
-    const setOpen = useCallback(
-      (value) => {
-        setInternalOpen(value);
-        onOpenChange?.(value);
-      },
-      [onOpenChange]
-    );
-    useEffect(() => {
-      const check = () => {
-        const el = containerRef.current;
-        if (el) setIsMobile(el.offsetWidth < 768);
-      };
-      check();
-      const ro = new ResizeObserver(check);
-      if (containerRef.current) ro.observe(containerRef.current);
-      return () => ro.disconnect();
-    }, []);
-    return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { open, setOpen, isMobile }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: (node) => {
-          containerRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
-        className: cn("flex h-full w-full overflow-hidden", className),
-        ...props,
-        children
-      }
-    ) });
-  }
-);
-SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = forwardRef(
-  ({ collapsible = "offcanvas", className, children, ...props }, ref) => {
-    const { open } = useSidebar();
-    return /* @__PURE__ */ jsx(
-      "div",
+
+// src/hooks/use-mobile.ts
+function useIsMobile() {
+  return useMediaQuery("(max-width: 767px)");
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
       {
-        ref,
-        "data-state": open ? "expanded" : "collapsed",
+        "data-slot": "sheet-content",
+        "data-side": side,
         className: cn(
-          "bg-sidebar text-sidebar-foreground border-sidebar-border relative flex h-full shrink-0 flex-col border-r transition-all duration-300 ease-in-out",
-          open ? "w-64" : collapsible === "icon" ? "w-12" : "w-0 overflow-hidden",
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-xl transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
           className
         ),
         ...props,
-        children
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "absolute top-4 right-4 bg-secondary", size: "icon-sm", children: [
+            /* @__PURE__ */ jsx(XIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] }) })
+        ]
       }
-    );
-  }
-);
-Sidebar.displayName = "Sidebar";
-var SidebarTrigger = forwardRef(({ className, onClick, ...props }, ref) => {
-  const { open, setOpen } = useSidebar();
-  return /* @__PURE__ */ jsxs(
-    Button,
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      ref,
-      variant: "ghost",
-      size: "md",
-      className: cn("shrink-0", className),
-      onClick: (e) => {
-        onClick?.(e);
-        setOpen(!open);
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Menu, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle sidebar" })
-      ]
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-6", className),
+      ...props
     }
   );
-});
-SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarHeader = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
-      "data-slot": "sidebar-header",
-      className: cn("flex shrink-0 flex-col gap-2 p-3", className),
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-6", className),
       ...props
     }
-  )
-);
-SidebarHeader.displayName = "SidebarHeader";
-var SidebarContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    "data-slot": "sidebar-content",
-    className: cn(
-      "flex flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto p-2",
-      className
-    ),
-    ...props
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-base font-medium text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var SidebarContext = createContext(null);
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
   }
-));
-SidebarContent.displayName = "SidebarContent";
-var SidebarFooter = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  return context;
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = useState(false);
+  const [_open, _setOpen] = useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = useCallback(
+    (value) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}; SameSite=Lax; Secure`;
+    },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = useCallback(() => {
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [isMobile, setOpen, setOpenMobile]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        const target = event.target;
+        if (target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") {
+          return;
+        }
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
+      },
+      className: cn(
+        "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-dvh w-full",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function SidebarResizeHandle() {
+  const dragRef = useRef(null);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-resize-handle",
+      className: "absolute inset-y-0 right-0 w-1 cursor-col-resize opacity-0 transition-opacity hover:opacity-100 hover:bg-sidebar-border group-data-[state=collapsed]:hidden",
+      onPointerDown: (e) => {
+        e.preventDefault();
+        const wrapper = e.currentTarget.closest('[data-slot="sidebar-wrapper"]');
+        if (!wrapper) return;
+        const container = e.currentTarget.closest('[data-slot="sidebar-container"]');
+        const gap = container?.parentElement?.querySelector('[data-slot="sidebar-gap"]') ?? null;
+        const currentWidth = container ? parseFloat(getComputedStyle(container).width) : 256;
+        if (container) container.style.transition = "none";
+        if (gap) gap.style.transition = "none";
+        dragRef.current = { startX: e.clientX, startWidth: currentWidth, wrapper, container: container ?? null, gap };
+        e.currentTarget.setPointerCapture(e.pointerId);
+      },
+      onPointerMove: (e) => {
+        if (!dragRef.current) return;
+        const { startX, startWidth, wrapper } = dragRef.current;
+        const newWidth = Math.max(160, Math.min(480, startWidth + (e.clientX - startX)));
+        wrapper.style.setProperty("--sidebar-width", `${newWidth}px`);
+      },
+      onPointerUp: () => {
+        if (dragRef.current?.container) dragRef.current.container.style.transition = "";
+        if (dragRef.current?.gap) dragRef.current.gap.style.transition = "";
+        dragRef.current = null;
+      }
+    }
+  );
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "sidebar",
+        className: cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        dir,
+        "data-sidebar": "sidebar",
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        showCloseButton: false,
+        className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0",
+        style: {
+          "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+        },
+        side,
+        children: [
+          /* @__PURE__ */ jsxs(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "group peer text-sidebar-foreground hidden md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            "data-side": side,
+            className: cn(
+              "fixed inset-y-0 z-10 hidden h-dvh w-(--sidebar-width) overflow-hidden transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              // Adjust the padding for floating and inset variants.
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              className
+            ),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-sidebar": "sidebar",
+                  "data-slot": "sidebar-inner",
+                  className: "bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1",
+                  children
+                }
+              ),
+              /* @__PURE__ */ jsx(SidebarResizeHandle, {})
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-sidebar": "trigger",
+      "data-slot": "sidebar-trigger",
+      variant: "ghost",
+      size: "icon-sm",
+      className: cn(className),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MenuIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Toggle Sidebar",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle Sidebar",
+      className: cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "sidebar-input",
+      "data-sidebar": "input",
+      className: cn("bg-input/50 h-8 w-full shadow-none", className),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn("flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]", className),
+      ...props
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
       "data-slot": "sidebar-footer",
-      className: cn("flex shrink-0 flex-col gap-2 p-3", className),
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "sidebar-separator",
+      "data-sidebar": "separator",
+      className: cn("bg-sidebar-border mx-2 w-auto", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden [--radius:var(--radius-xl)] group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-xl px-3 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-action",
+      "data-sidebar": "group-action",
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-xl p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-0.5", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-xl px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
+      },
+      size: {
+        default: "h-9 text-sm",
+        sm: "h-8 text-xs",
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  const { isMobile, state } = useSidebar();
+  const button = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        side: "right",
+        align: "center",
+        hidden: state !== "collapsed" || isMobile,
+        ...tooltip
+      }
+    )
+  ] });
+}
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-action",
+      "data-sidebar": "menu-action",
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-xl p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        showOnHover && "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-xl px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const [width] = useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-xl px-2", className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded-xl", "data-sidebar": "menu-skeleton-icon" }),
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "h-4 max-w-(--skeleton-width) flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": width
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarMenuSub({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
+      className: cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      ),
       ...props
     }
-  )
-);
-SidebarFooter.displayName = "SidebarFooter";
-var SidebarGroup = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
+  );
+}
+function SidebarMenuSubItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
     {
-      ref,
-      "data-slot": "sidebar-group",
-      className: cn("flex flex-col gap-1", className),
+      "data-slot": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      className: cn("group/menu-sub-item relative", className),
       ...props
     }
-  )
-);
-SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn(
-      "text-sidebar-foreground/50 px-2 py-1 text-xs font-medium tracking-wider uppercase",
-      className
-    ),
-    ...props
-  }
-));
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    "data-slot": "sidebar-group-content",
-    className: cn("flex flex-col gap-0.5", className),
-    ...props
-  }
-));
-SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "ul",
-  {
-    ref,
-    "data-slot": "sidebar-menu",
-    className: cn("m-0 flex list-none flex-col gap-0.5 p-0", className),
-    ...props
-  }
-));
-SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "li",
+  );
+}
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
     {
-      ref,
-      "data-slot": "sidebar-menu-item",
-      className: cn("relative", className),
+      "data-slot": "sidebar-menu-sub-button",
+      "data-sidebar": "menu-sub-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-xl px-3 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      ),
       ...props
     }
-  )
-);
-SidebarMenuItem.displayName = "SidebarMenuItem";
-var SidebarMenuButton = forwardRef(
-  ({ asChild, isActive, className, children, ...props }, ref) => {
-    const { open } = useSidebar();
-    const Comp = asChild ? Slot.Root : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        "data-active": isActive || void 0,
-        className: cn(
-          "flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm font-normal transition-colors outline-none",
-          "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-          "data-[active]:bg-sidebar-primary/10 data-[active]:text-sidebar-primary data-[active]:font-normal",
-          !open && "justify-center px-2",
-          className
-        ),
-        ...props,
-        children: Children.map(children, (child, i) => {
-          if (i === 0 && isValidElement(child)) {
-            return cloneElement(child, {
-              className: cn("size-4 shrink-0", child.props.className)
-            });
-          }
-          if (i > 0 && !open) return null;
-          return child;
-        })
-      }
-    );
-  }
-);
-SidebarMenuButton.displayName = "SidebarMenuButton";
+  );
+}
 var defaultItems = [
   { label: "Home", icon: /* @__PURE__ */ jsx(House, {}) },
   { label: "Vacations", icon: /* @__PURE__ */ jsx(Plane, {}) },
@@ -4949,11 +5469,20 @@ var defaultItems = [
   { label: "Apps", icon: /* @__PURE__ */ jsx(LayoutDashboardIcon, {}) }
 ];
 function SidebarBrand({ brandName }) {
-  const { open } = useSidebar();
-  if (!open) return null;
+  const { state } = useSidebar();
+  const collapsed = state === "collapsed";
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center rounded-md text-xs font-bold", children: brandName.charAt(0) }),
-    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold", children: brandName })
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "truncate text-sm font-semibold transition-opacity duration-200",
+          collapsed ? "opacity-0 pointer-events-none w-0 overflow-hidden" : "opacity-100"
+        ),
+        children: brandName
+      }
+    )
   ] });
 }
 function AppShell({
@@ -4962,48 +5491,65 @@ function AppShell({
   onItemClick,
   brandName = "Total Portal",
   showHeader = true,
+  header,
+  open,
+  onOpenChange,
+  defaultOpen,
   className,
   mainClassName,
   children
 }) {
-  return /* @__PURE__ */ jsxs(SidebarProvider, { className: cn("min-h-0", className), children: [
-    /* @__PURE__ */ jsxs(Sidebar, { collapsible: "icon", children: [
-      /* @__PURE__ */ jsxs(SidebarHeader, { className: "flex flex-row items-center gap-2 p-2", children: [
-        /* @__PURE__ */ jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0" }),
-        /* @__PURE__ */ jsx(SidebarBrand, { brandName })
-      ] }),
-      /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => {
-        const menuItem = /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
-          SidebarMenuButton,
-          {
-            isActive: activeItem === item.label || item.active,
-            onClick: () => {
-              item.onClick?.();
-              onItemClick?.(item.label);
-            },
-            children: [
-              item.icon,
-              /* @__PURE__ */ jsx("span", { children: item.label })
-            ]
-          }
-        ) }, item.label);
-        if (!item.permission) return menuItem;
-        return /* @__PURE__ */ jsx(
-          Can,
-          {
-            permission: item.permission,
-            mode: item.permissionMode,
-            children: menuItem
-          },
-          item.label
-        );
-      }) }) }) }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
-      showHeader && /* @__PURE__ */ jsx("header", { className: "flex h-14 items-center justify-between border-b px-4", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: brandName }) }),
-      /* @__PURE__ */ jsx("main", { className: cn("overflow-y-auto flex-1 p-6", mainClassName), children })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    SidebarProvider,
+    {
+      className: cn("h-dvh overflow-hidden", className),
+      open,
+      onOpenChange,
+      defaultOpen,
+      children: [
+        /* @__PURE__ */ jsxs(Sidebar, { collapsible: "icon", children: [
+          /* @__PURE__ */ jsxs(SidebarHeader, { className: "flex flex-row items-center gap-2 p-2", children: [
+            /* @__PURE__ */ jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0" }),
+            /* @__PURE__ */ jsx(SidebarBrand, { brandName })
+          ] }),
+          /* @__PURE__ */ jsx(SidebarContent, { className: "overflow-x:hidden", children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => {
+            const menuItem = /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                tooltip: item.label,
+                isActive: activeItem === item.label || item.active,
+                onClick: () => {
+                  item.onClick?.();
+                  onItemClick?.(item.label);
+                },
+                children: [
+                  item.icon,
+                  /* @__PURE__ */ jsx("span", { children: item.label })
+                ]
+              }
+            ) }, item.label);
+            if (!item.permission) return menuItem;
+            return /* @__PURE__ */ jsx(
+              Can,
+              {
+                permission: item.permission,
+                mode: item.permissionMode,
+                children: menuItem
+              },
+              item.label
+            );
+          }) }) }) }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+          header ? header : showHeader ? /* @__PURE__ */ jsxs("header", { className: "flex h-14 items-center gap-2 border-b px-4", children: [
+            /* @__PURE__ */ jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0 md:hidden" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: brandName })
+          ] }) : /* @__PURE__ */ jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0 md:hidden" }),
+          /* @__PURE__ */ jsx("main", { className: cn("overflow-y-auto flex-1 p-6", mainClassName), children })
+        ] })
+      ]
+    }
+  );
 }
 function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -5609,14 +6155,9 @@ var eventCalendarStyles = `
     font-weight: 600;
 }
 
-/* \u2500\u2500 Event modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2500\u2500 Event modal \u2014 hidden; replaced by TCCE Popover in event-calendar.tsx \u2500\u2500 */
 .sx-tcce .sx__event-modal {
-    border-radius: var(--border-radius-article, 0.875rem);
-    border: 1px solid var(--color-border);
-    font-size: 13px;
-    min-width: 220px;
-    max-width: 300px;
-    background: var(--color-background);
+    display: none !important;
 }
 .sx-tcce .sx__event-modal__title {
     font-size: 14px;
@@ -5761,8 +6302,43 @@ function useEventCalendar({
     return () => unsubscribe?.();
   }, []);
   return {
-    calendarApp: calendarApp.current
+    calendarApp: calendarApp.current,
+    eventModal: eventModal.current
+  };
+}
+var EVENT_COLOR = {
+  default: "#22205f",
+  primary: "#22205f",
+  success: "#00a824",
+  warning: "#c8a23b",
+  danger: "#ea3a3d"
+};
+function getFixedAnchorRect(el) {
+  const rect = el.getBoundingClientRect();
+  let ancestor = el.parentElement;
+  while (ancestor && ancestor !== document.documentElement) {
+    if (window.getComputedStyle(ancestor).transform !== "none") {
+      const cb = ancestor.getBoundingClientRect();
+      return new DOMRect(rect.left - cb.left, rect.top - cb.top, rect.width, rect.height);
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return rect;
+}
+function formatEventTime(start, end) {
+  const isAllDay = start.length === 10;
+  if (isAllDay) {
+    const date = /* @__PURE__ */ new Date(`${start}T00:00:00`);
+    return date.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
+  }
+  const fmt = (s) => {
+    const [, time] = s.split(" ");
+    const [h, m] = time.split(":").map(Number);
+    const ampm = h >= 12 ? "PM" : "AM";
+    const hour = h % 12 || 12;
+    return `${hour}:${m.toString().padStart(2, "0")} ${ampm}`;
   };
+  return `${fmt(start)} \u2013 ${fmt(end)}`;
 }
 function EventCalendar({
   events,
@@ -5775,6 +6351,9 @@ function EventCalendar({
   className
 }) {
   const [currentView, setCurrentView] = useState(defaultView);
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [anchorRect, setAnchorRect] = useState(null);
+  const clickedEventElRef = useRef(false);
   const handleViewChange = useCallback(
     (view) => {
       setCurrentView(view);
@@ -5782,19 +6361,106 @@ function EventCalendar({
     },
     [onViewChange]
   );
-  const { calendarApp } = useEventCalendar({
+  const handleEventClick = useCallback(
+    (event) => {
+      setSelectedEvent(event);
+      onEventClick?.(event);
+    },
+    [onEventClick]
+  );
+  const { calendarApp, eventModal } = useEventCalendar({
     events,
     defaultView,
     defaultDate,
     locale,
-    onEventClick,
+    onEventClick: handleEventClick,
     onEventCreate,
     onViewChange: handleViewChange
   });
+  useEffect(() => {
+    const unsub = eventModal.calendarEventElement.subscribe((el) => {
+      if (!el) {
+        if (clickedEventElRef.current) {
+          clickedEventElRef.current = false;
+        } else {
+          setSelectedEvent(null);
+          setAnchorRect(null);
+        }
+      } else {
+        setAnchorRect(getFixedAnchorRect(el));
+      }
+    });
+    return unsub;
+  }, [eventModal]);
+  const handlePopoverOpenChange = useCallback(
+    (open) => {
+      if (!open) {
+        eventModal.close();
+        setSelectedEvent(null);
+        setAnchorRect(null);
+      }
+    },
+    [eventModal]
+  );
   const contextValue = useMemo(() => ({ currentView }), [currentView]);
   return /* @__PURE__ */ jsxs(EventCalendarContext.Provider, { value: contextValue, children: [
     /* @__PURE__ */ jsx("style", { href: "tcce-event-calendar", precedence: "default", children: eventCalendarStyles }),
-    /* @__PURE__ */ jsx("div", { "data-slot": "event-calendar", className: cn("sx-tcce w-full", className), children: /* @__PURE__ */ jsx(ScheduleXCalendar, { calendarApp: calendarApp ?? null }) })
+    /* @__PURE__ */ jsxs(Popover, { open: !!selectedEvent && !!anchorRect, onOpenChange: handlePopoverOpenChange, children: [
+      /* @__PURE__ */ jsx("div", { "data-slot": "event-calendar", className: cn("sx-tcce w-full", className), children: /* @__PURE__ */ jsx(ScheduleXCalendar, { calendarApp: calendarApp ?? null }) }),
+      anchorRect && /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "fixed",
+            top: anchorRect.top,
+            left: anchorRect.left,
+            width: anchorRect.width,
+            height: anchorRect.height,
+            pointerEvents: "none"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          side: "right",
+          align: "start",
+          className: "w-65 gap-2",
+          onPointerDownOutside: (e) => {
+            const target = e.target;
+            const isEventEl = target.closest(
+              ".sx__month-grid-event, .sx__time-grid-event, .sx__month-agenda-event"
+            );
+            if (isEventEl) {
+              e.preventDefault();
+              clickedEventElRef.current = true;
+            }
+          },
+          children: selectedEvent && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "size-2 shrink-0 rounded-full",
+                    style: {
+                      backgroundColor: EVENT_COLOR[selectedEvent.color ?? "default"]
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "font-heading text-sm font-semibold leading-tight", children: selectedEvent.title })
+              ] }),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Edit event", children: /* @__PURE__ */ jsx(Pencil, { size: 14 }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Clock, { size: 13, className: "shrink-0" }),
+              /* @__PURE__ */ jsx("span", { children: formatEventTime(selectedEvent.start, selectedEvent.end) })
+            ] }),
+            selectedEvent.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: selectedEvent.description })
+          ] })
+        }
+      )
+    ] })
   ] });
 }
 function useAppForm(schema, options) {
@@ -6136,18 +6802,6 @@ function TablePaginationBase({
   );
 }
 var TablePagination = memo(TablePaginationBase);
-function useMediaQuery(query) {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mql = window.matchMedia(query);
-    setMatches(mql.matches);
-    const handler = (e) => setMatches(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, [query]);
-  return matches;
-}
 var TableContext = createContext(null);
 function useTableContext() {
   const ctx = useContext(TableContext);
@@ -7705,6 +8359,228 @@ function DataTableSearch({
     )
   ] });
 }
+var DrawerContext = createContext(false);
+function Drawer({ children, open, onOpenChange, ...props }) {
+  const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
+  const isOpen = open !== void 0 ? open : internalOpen;
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: isOpen, children: /* @__PURE__ */ jsx(
+    Dialog$1.Root,
+    {
+      "data-slot": "drawer",
+      ...props,
+      open: isOpen,
+      onOpenChange: (v) => {
+        setInternalOpen(v);
+        onOpenChange?.(v);
+      },
+      children
+    }
+  ) });
+}
+function DrawerTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerClose({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerPortal({ children, ...props }) {
+  const isOpen = useContext(DrawerContext);
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { forceMount: true, ...props, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpen && children }) });
+}
+function DrawerOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Overlay, { "data-slot": "drawer-overlay", asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: cn(
+        "fixed inset-0 isolate z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-sm",
+        className
+      ),
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: duration.normal, ease: ease.smooth }
+    }
+  ) });
+}
+var sizeClasses = {
+  sm: "w-64",
+  md: "w-80",
+  lg: "w-96",
+  xl: "w-[30rem]",
+  full: "w-screen"
+};
+function DrawerContent({
+  className,
+  children,
+  side = "right",
+  size = "md",
+  showCloseButton = true,
+  resizable = false,
+  ...props
+}) {
+  const isHorizontal = side === "left" || side === "right";
+  const xInitial = side === "right" ? "100%" : side === "left" ? "-100%" : 0;
+  const yInitial = side === "bottom" ? "100%" : side === "top" ? "-100%" : 0;
+  const dragRef = useRef(null);
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsx(
+      Dialog$1.Content,
+      {
+        "data-slot": "drawer-content",
+        "data-side": side,
+        asChild: true,
+        forceMount: true,
+        className: cn(
+          "fixed z-50 flex flex-col bg-popover text-popover-foreground shadow-xl outline-none",
+          side === "left" && "inset-y-0 left-0",
+          side === "right" && "inset-y-0 right-0",
+          side === "top" && "inset-x-0 top-0",
+          side === "bottom" && "inset-x-0 bottom-0",
+          isHorizontal && sizeClasses[size],
+          !isHorizontal && "h-auto min-h-40",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: cn("flex flex-col", isHorizontal && "h-full"),
+            initial: { x: xInitial, y: yInitial, opacity: 0 },
+            animate: { x: 0, y: 0, opacity: 1 },
+            exit: { x: xInitial, y: yInitial, opacity: 0 },
+            transition: transition.sidebar,
+            children: [
+              children,
+              showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "drawer-close", asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-4 right-4",
+                  size: "icon-sm",
+                  children: [
+                    /* @__PURE__ */ jsx(XIcon, {}),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                  ]
+                }
+              ) }),
+              resizable && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "drawer-resize-handle",
+                  className: cn(
+                    "absolute opacity-0 transition-opacity hover:opacity-100 hover:bg-border",
+                    side === "right" && "inset-y-0 left-0 w-1 cursor-col-resize",
+                    side === "left" && "inset-y-0 right-0 w-1 cursor-col-resize",
+                    side === "top" && "inset-x-0 bottom-0 h-1 cursor-row-resize",
+                    side === "bottom" && "inset-x-0 top-0 h-1 cursor-row-resize"
+                  ),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    const content = e.currentTarget.parentElement;
+                    if (!content) return;
+                    const startSize = isHorizontal ? parseFloat(getComputedStyle(content).width) : parseFloat(getComputedStyle(content).height);
+                    content.style.transition = "none";
+                    dragRef.current = {
+                      startPos: isHorizontal ? e.clientX : e.clientY,
+                      startSize,
+                      content
+                    };
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                  },
+                  onPointerMove: (e) => {
+                    if (!dragRef.current) return;
+                    const { startPos, startSize, content } = dragRef.current;
+                    const delta = (isHorizontal ? e.clientX : e.clientY) - startPos;
+                    let newSize;
+                    if (side === "right") {
+                      newSize = Math.max(160, Math.min(window.innerWidth * 0.9, startSize - delta));
+                    } else if (side === "left") {
+                      newSize = Math.max(160, Math.min(window.innerWidth * 0.9, startSize + delta));
+                    } else if (side === "bottom") {
+                      newSize = Math.max(80, Math.min(window.innerHeight * 0.9, startSize - delta));
+                    } else {
+                      newSize = Math.max(80, Math.min(window.innerHeight * 0.9, startSize + delta));
+                    }
+                    content.style[isHorizontal ? "width" : "height"] = `${newSize}px`;
+                  },
+                  onPointerUp: () => {
+                    if (dragRef.current?.content) {
+                      dragRef.current.content.style.transition = "";
+                    }
+                    dragRef.current = null;
+                  },
+                  onPointerCancel: () => {
+                    if (dragRef.current?.content) {
+                      dragRef.current.content.style.transition = "";
+                    }
+                    dragRef.current = null;
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn("flex shrink-0 flex-col gap-1.5 p-6", className),
+      ...props
+    }
+  );
+}
+function DrawerBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-body",
+      className: cn("flex-1 overflow-y-auto px-6 pb-6", className),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn(
+        "border-border mt-auto flex shrink-0 flex-wrap items-center justify-end gap-2 border-t px-6 py-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("font-heading text-base leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
 function TCCEProvider({
   children,
   permissions,
@@ -7714,6 +8590,6 @@ function TCCEProvider({
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: tooltipDelayDuration, children: /* @__PURE__ */ jsx(AbilityProvider, { permissions, children: /* @__PURE__ */ jsx(Toaster, { position: toasterPosition, children }) }) });
 }
 
-export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SidebarProvider, SidebarTrigger, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };
+export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };
 //# sourceMappingURL=main.js.map
 //# sourceMappingURL=main.js.map