@bizapps/design-system-testing 1.0.6 → 1.0.8

package/dist/main.js

@@ -1,11 +1,11 @@
 "use client";
-import { SearchIcon, BellIcon, CircleHelpIcon, Menu, ChevronDownIcon, LoaderCircle, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, ChevronUpIcon, X, ArrowLeft, ArrowRight, 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, 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 { 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, 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 { isSameDay, isToday, format, addDays } from 'date-fns';
 import useEmblaCarousel from 'embla-carousel-react';
@@ -399,7 +399,7 @@ var buttonVariants = cva(
         primary: "cursor-pointer bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30",
         secondary: "cursor-pointer bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30",
         cancel: "cursor-pointer bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30",
-        outline: " border-2 border-foreground/50 bg-transparent text-muted-foreground hover:bg-foreground/50 hover:text-white",
+        outline: "border border-foreground/50 bg-transparent text-muted-foreground hover:bg-foreground/50 hover:text-white",
         ghost: "cursor-pointer bg-transparent text-muted-foreground hover:bg-foreground/10 hover:text-primary focus-visible:ring-ring/30 border-none",
         cancelGhost: "cursor-pointer bg-destructive/10 text-red-600 hover:bg-destructive/15 hover:text-red-600 focus-visible:ring-ring/30"
       },
@@ -999,7 +999,7 @@ function CarouselPrevious({
       variant,
       size,
       className: cn(
-        "absolute touch-manipulation",
+        "cursor-pointer hover:bg-foreground/5 hover:text-foreground font-border border-solid border-foreground/10 absolute touch-manipulation",
         orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -1008,7 +1008,7 @@ function CarouselPrevious({
       "aria-label": "Previous slide",
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
@@ -1028,7 +1028,7 @@ function CarouselNext({
       variant,
       size,
       className: cn(
-        "absolute touch-manipulation",
+        "cursor-pointer hover:bg-foreground/5 hover:text-foreground border border-solid border-foreground/10 absolute touch-manipulation",
         orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -1037,7 +1037,7 @@ function CarouselNext({
       "aria-label": "Next slide",
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ArrowRight, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
       ]
     }
@@ -3067,7 +3067,7 @@ var DropzoneContext = createContext(void 0);
 var dropzoneVariants = cva("", {
   variants: {
     border: {
-      default: "border-solid",
+      default: "border border-solid border-foreground/15",
       dashed: "border-dashed border-foreground/50"
     }
   },
@@ -3117,14 +3117,14 @@ var Dropzone = ({
           "data-slot": "dropzone",
           "data-border": border ?? "default",
           className: cn(
-            "relative h-auto w-full flex-col overflow-hidden p-8",
+            "cursor-auto relative h-auto w-full flex-col overflow-hidden p-8",
             dropzoneVariants({ border }),
-            isDragActive && "bg-muted outline-none",
+            isDragActive && "bg-foreground/10 outline-none",
             className
           ),
           disabled,
           type: "button",
-          variant: "outline",
+          variant: "ghost",
           ...getRootProps(),
           children: [
             /* @__PURE__ */ jsx("input", { ...getInputProps(), disabled }),
@@ -4728,65 +4728,228 @@ 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);
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(void 0);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
 }
-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",
+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: (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),
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "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" })
+          ] }) })
+        ]
       }
-    ) });
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-6", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-6", 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.");
   }
-);
-SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = forwardRef(
-  ({ collapsible = "offcanvas", className, children, ...props }, ref) => {
-    const { open } = useSidebar();
+  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 Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
     return /* @__PURE__ */ jsx(
       "div",
       {
-        ref,
-        "data-state": open ? "expanded" : "collapsed",
+        "data-slot": "sidebar",
         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",
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
           className
         ),
         ...props,
@@ -4794,154 +4957,455 @@ var Sidebar = forwardRef(
       }
     );
   }
-);
-Sidebar.displayName = "Sidebar";
-var SidebarTrigger = forwardRef(({ className, onClick, ...props }, ref) => {
-  const { open, setOpen } = useSidebar();
+  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__ */ jsx(
+          "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
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+  const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs(
     Button,
     {
-      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-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",
+    {
+      "data-slot": "sidebar-footer",
+      "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-auto [--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
     }
   );
-});
-SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarHeader = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+}
+function SidebarMenuBadge({ 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": "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
     }
-  )
-);
-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
-  }
-));
-SidebarContent.displayName = "SidebarContent";
-var SidebarFooter = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  );
+}
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const [width] = useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  });
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
-      "data-slot": "sidebar-footer",
-      className: cn("flex shrink-0 flex-col gap-2 p-3", className),
-      ...props
+      "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
+            }
+          }
+        )
+      ]
     }
-  )
-);
-SidebarFooter.displayName = "SidebarFooter";
-var SidebarGroup = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
+  );
+}
+function SidebarMenuSub({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
     {
-      ref,
-      "data-slot": "sidebar-group",
-      className: cn("flex flex-col gap-1", className),
+      "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
     }
-  )
-);
-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(
+  );
+}
+function SidebarMenuSubItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
     "li",
     {
-      ref,
-      "data-slot": "sidebar-menu-item",
-      className: cn("relative", className),
+      "data-slot": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      className: cn("group/menu-sub-item relative", 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";
+  );
+}
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "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
+    }
+  );
+}
 var defaultItems = [
   { label: "Home", icon: /* @__PURE__ */ jsx(House, {}) },
   { label: "Vacations", icon: /* @__PURE__ */ jsx(Plane, {}) },
@@ -4949,11 +5413,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 +5435,64 @@ function AppShell({
   onItemClick,
   brandName = "Total Portal",
   showHeader = true,
+  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, { 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: [
+          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(
@@ -5061,11 +5550,14 @@ var eventCalendarStyles = `
     align-items: center;
 }
 
+.sx__calendar-header-content {
+    padding-right: 14px;
+}
+
 /* Range title \u2014 "June 2026" */
 .sx-tcce .sx__range-heading {
     font-size: 15px;
     font-weight: 700;
-    letter-spacing: -0.02em;
     color: var(--color-foreground);
     font-family: var(--font-heading, inherit);
 }
@@ -5081,21 +5573,37 @@ var eventCalendarStyles = `
     background: var(--color-primary);
     color: var(--color-primary-foreground);
     cursor: pointer;
-    transition: opacity 150ms;
+    transition: opacity 150ms, background 150ms, outline 150ms;
+}
+.sx-tcce .sx__today-button:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--ring) 50%, transparent);
+    outline-offset: -1px;
 }
 .sx-tcce .sx__today-button:hover {
     opacity: 0.88;
+    background: var(--color-primary);
 }
 .sx-tcce .sx__today-button:active {
     opacity: 0.72;
+    background: var(--color-primary);
+}
+.sx-tcce .sx__today-button:focus {
+    background: var(--color-primary);
 }
 
 /* Prev / Next arrow buttons */
+.sx__forward-backward-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+}
 .sx-tcce .sx__chevron-wrapper {
-    width: 32px;
+    width: 30px;
     height: 32px;
-    min-width: 32px;
-    border-radius: var(--border-radius-secondary-button, 0.625rem);
+    min-width: 30px !important;
+    min-height: 32px !important;
+    border-radius: var(--border-radius-secondary-button, 0.625rem);=
     border: 1px solid var(--color-border);
     background: var(--color-background);
     transition: background 150ms;
@@ -5103,6 +5611,9 @@ var eventCalendarStyles = `
 .sx-tcce .sx__chevron-wrapper:hover {
     background: var(--color-muted);
 }
+.sx__chevron-wrapper {
+  min-height: 30px !important;
+}
 
 /* \u2500\u2500 View selector \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 */
 /* Hide the "View" text label (kept in DOM for a11y) */
@@ -5129,12 +5640,18 @@ var eventCalendarStyles = `
     align-items: center;
     gap: 4px;
     cursor: pointer;
-    transition: opacity 150ms;
+    transition: opacity 150ms, background 150ms, color 150ms;
 }
 .sx-tcce .sx__view-selection-selected-item:hover,
 .sx-tcce .sx__view-selection-selected-item:focus,
 .sx-tcce .sx__view-selection-selected-item:active {
     opacity: 0.85;
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
+}
+.sx-tcce .sx__view-selection-selected-item:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--ring) 50%, transparent);
+    outline-offset: -1px;
 }
 
 /* Chevron image inside the view button */
@@ -5162,7 +5679,8 @@ var eventCalendarStyles = `
     transition: background 100ms;
 }
 .sx-tcce .sx__view-selection-item:hover {
-    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
 }
 
 /* \u2500\u2500 Date input (top-right "6/5/2026 \u25BC") \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 */
@@ -5175,44 +5693,68 @@ var eventCalendarStyles = `
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
 }
-
 .sx-tcce .sx__date-input-wrapper {
     display: inline-flex;
     align-items: center;
-    gap: 2px;
+    gap: 0.5rem;
+    flex-shrink: 0;
+    
     height: 32px;
-    padding: 0 8px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-secondary-button, 0.625rem);
-    background: var(--color-background);
+    padding: 0 1rem;
+    min-width: 120px;
+    
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+    background-color: var(--color-primary);
+    
     cursor: pointer;
-    transition: border-color 150ms;
+    outline: none;
+    user-select: none;
+    transition: all 150ms ease;
+    
     overflow: hidden;
+    justify-content: flex-start;
+    color: var(--color-primary-foreground) !important;
 }
 .sx-tcce .sx__date-input-wrapper:focus-within {
-    border-color: var(--color-primary);
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px rgba(var(--ring-rgb), 0.3);
+}
+.sx-tcce .sx__date-input-wrapper:hover {
+    background-color: var(--color-primary);
+    opacity: 0.8;
 }
-
 .sx-tcce .sx__date-input {
-    font-size: 12px;
-    font-weight: 500;
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: #ffffff;
+    font-family: inherit;
+    
     background: transparent;
     border: none;
     outline: none;
-    width: 80px;
-    cursor: pointer;
-    color: var(--color-foreground);
     padding: 0;
-    font-family: inherit;
+    
+    min-width: 100px;
+    flex: 1;
+    
+    cursor: pointer;
+}
+
+.sx-tcce .sx__date-input::placeholder {
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .sx-tcce .sx__date-input-chevron-wrapper {
-    padding: 0;
-    width: 16px;
-    height: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
+    
+    width: 1rem;
+    height: 1rem;
+    padding: 0;
+    
     background: transparent;
     border: none;
     outline: none;
@@ -5220,52 +5762,199 @@ var eventCalendarStyles = `
     appearance: none;
 }
 .sx-tcce .sx__date-input-chevron {
-    width: 12px;
-    height: 12px;
-    opacity: 0.45;
+    width: 1rem;
+    height: 1rem;
+    opacity: 1;
+    color: #ffffff;
 }
 
 /* Date picker popup (the calendar that drops when clicking the date input) */
 .sx-tcce .sx__date-picker-popup {
-    border-radius: var(--border-radius-article, 0.875rem);
+      border-radius: 0.5rem;
     border: 1px solid var(--color-border);
+    background-color: var(--color-background);
+    
+    padding: 0.75rem;
+    font-size: 0.75rem;
     overflow: hidden;
-    font-size: 12px;
-    background: var(--color-background);
+    
+    animation: popoverSlideIn 150ms ease-out;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+@keyframes popoverSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 .sx-tcce .sx__date-picker__month-view-header {
-    padding: 10px 12px 6px;
+   padding: 0.75rem 0.75rem 0.375rem;
 }
 .sx-tcce .sx__date-picker__month-view-header__month-year {
-    font-size: 13px;
-    font-weight: 700;
+      font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--color-foreground);
+    text-align: center;
 }
 .sx-tcce .sx__date-picker__day-names {
-    padding: 0 4px;
+   display: flex;
+    gap: 0.25rem;
+    padding: 0.5rem 0.25rem;
 }
 .sx-tcce .sx__date-picker__day-name {
-    width: 32px;
-    font-size: 10px;
+      display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    
+    width: 2rem;
+    height: 2rem;
+    min-height: 2rem;
+    
+    font-size: 0.625rem;
     font-weight: 600;
     color: var(--color-muted-foreground);
     text-transform: uppercase;
     letter-spacing: 0.04em;
+    
+    user-select: none;
+}
+/* Week */
+.sx-tcce .sx__date-picker__week {
+    display: flex;
+    gap: 0.25rem;
+    margin-top: 0.5rem;
 }
 .sx-tcce .sx__date-picker__day {
-    width: 32px;
-    height: 32px;
-    font-size: 12px;
-    border-radius: 6px;
-    transition: background 100ms;
+    /* Layout */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    
+    width: 2rem;
+    height: 2rem;
+    min-height: 2rem;
+    aspect-ratio: 1;
+    
+    border-radius: 0.375rem;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--color-foreground);
+    
+    transition: all 100ms ease;
+    outline: none;
+    user-select: none;
+}
+.sx-tcce .sx__date-picker__day:hover:not(:disabled) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+}
+.sx-tcce .sx__date-picker__day:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--color-primary);
+    border-radius: 0.375rem;
 }
 .sx-tcce .sx__date-picker__day--today {
-    font-weight: 700;
+     font-weight: 600;
+    color: var(--color-primary);
+    background-color: var(--color-accent);
+}
+.sx-tcce .sx__date-picker__day--today:hover {
+    background-color: var(--color-accent);
     color: var(--color-primary);
 }
 .sx-tcce .sx__date-picker__day--selected {
     background: var(--color-primary) !important;
     color: var(--color-primary-foreground) !important;
-    border-radius: 50% !important;
+}
+/* Selected day */
+.sx-tcce .sx__date-picker__day--selected {
+    background-color: var(--color-primary) !important;
+    color: var(--color-primary-foreground) !important;
+    border-radius: 0.375rem;
+    font-weight: 500;
+}
+
+.sx-tcce .sx__date-picker__day--selected:hover {
+    opacity: 0.9;
+}
+
+/* Outside days (prev/next month) */
+.sx-tcce .sx__date-picker__day--outside {
+    color: var(--color-muted-foreground);
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Disabled days */
+.sx-tcce .sx__date-picker__day:disabled {
+    color: var(--color-muted-foreground);
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.sx-tcce .sx__date-picker__day--range-start {
+    background-color: var(--color-primary) !important;
+    color: var(--color-primary-foreground) !important;
+    border-radius: 0.375rem 0 0 0.375rem;
+}
+
+.sx-tcce .sx__date-picker__day--range-middle {
+    background-color: var(--color-primary);
+    opacity: 0.2;
+    border-radius: 0;
+}
+
+.sx-tcce .sx__date-picker__day--range-end {
+    background-color: var(--color-primary) !important;
+    color: var(--color-primary-foreground) !important;
+    border-radius: 0 0.375rem 0.375rem 0;
+}
+
+/* Navigation buttons (previous/next month) */
+.sx-tcce .sx__date-picker__nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    
+    background: transparent;
+    border: none;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: all 150ms ease;
+    outline: none;
+}
+
+.sx-tcce .sx__date-picker__nav-button:hover:not(:disabled) {
+    opacity: 1;
+    background-color: var(--color-accent);
+}
+
+.sx-tcce .sx__date-picker__nav-button:focus-visible {
+    box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.sx-tcce .sx__date-picker__nav-button:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.sx-tcce .sx__date-picker__nav-button svg {
+    width: 1rem;
+    height: 1rem;
 }
 
 /* \u2500\u2500 Month grid \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 */
@@ -5673,7 +6362,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "text-foreground h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        "text-foreground has([role=checkbox])]:pr-0 h-12 px-3 text-left align-middle font-medium whitespace-nowrap",
         className
       ),
       ...props
@@ -5686,7 +6375,7 @@ function TableCell({ className, ...props }) {
     {
       "data-slot": "table-cell",
       className: cn(
-        "p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        "has([role=checkbox])]:pr-0 p-3 align-middle whitespace-nowrap",
         className
       ),
       ...props
@@ -6686,7 +7375,7 @@ function useTablePersistence({
   };
 }
 var cellSizeClass = {
-  sm: "px-4 py-2 text-xs",
+  sm: "px-1 py-0 text-xs",
   md: "px-5 py-2.5 text-sm",
   lg: "px-6 py-3 text-sm"
 };
@@ -7514,6 +8203,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, 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, 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