@morze/ui 0.2.12 → 0.3.1

package/dist/index.js

@@ -1,15 +1,15 @@
 "use client";
 import { clsx } from 'clsx';
-import * as React39 from 'react';
+import * as React48 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { Slot, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Slider as Slider$1, Label as Label$1, Select as Select$1, Tabs as Tabs$1, Accordion as Accordion$1, Progress as Progress$1, Avatar as Avatar$1, Separator as Separator$1, Dialog as Dialog$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1 } from 'radix-ui';
+import { Slot, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Slider as Slider$1, Label as Label$1, Select as Select$1, DropdownMenu as DropdownMenu$1, Tabs as Tabs$1, Accordion as Accordion$1, Progress as Progress$1, Avatar as Avatar$1, Separator as Separator$1, Dialog as Dialog$1, Popover as Popover$1, Tooltip as Tooltip$1, AlertDialog as AlertDialog$1, ScrollArea as ScrollArea$1, Menubar as Menubar$1, NavigationMenu as NavigationMenu$1, Toast as Toast$1 } from 'radix-ui';
 
 // src/lib/utils.ts
 function cn(...inputs) {
   return clsx(inputs);
 }
-var ThemeContext = React39.createContext(null);
+var ThemeContext = React48.createContext(null);
 function readStored(key) {
   if (!key || typeof window === "undefined") return null;
   try {
@@ -37,15 +37,15 @@ function MorzeThemeProvider({
   target = "html",
   className
 }) {
-  const [theme, setThemeState] = React39.useState(defaultTheme);
-  const [resolved, setResolved] = React39.useState(
+  const [theme, setThemeState] = React48.useState(defaultTheme);
+  const [resolved, setResolved] = React48.useState(
     defaultTheme === "system" ? "dark" : defaultTheme
   );
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     const stored = readStored(storageKey);
     if (stored) setThemeState(stored);
   }, [storageKey]);
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     if (theme !== "system") {
       setResolved(theme);
       return;
@@ -56,18 +56,18 @@ function MorzeThemeProvider({
     mql.addEventListener("change", onChange);
     return () => mql.removeEventListener("change", onChange);
   }, [theme]);
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     if (target !== "html" || typeof document === "undefined") return;
     document.documentElement.setAttribute("data-mz-theme", resolved);
   }, [resolved, target]);
-  const setTheme = React39.useCallback(
+  const setTheme = React48.useCallback(
     (next) => {
       setThemeState(next);
       writeStored(storageKey, next);
     },
     [storageKey]
   );
-  const value = React39.useMemo(
+  const value = React48.useMemo(
     () => ({ theme, resolvedTheme: resolved, setTheme }),
     [theme, resolved, setTheme]
   );
@@ -82,7 +82,7 @@ function MorzeThemeProvider({
   ) });
 }
 function useMorzeTheme() {
-  const context = React39.useContext(ThemeContext);
+  const context = React48.useContext(ThemeContext);
   if (!context) {
     throw new Error("useMorzeTheme must be used inside <MorzeThemeProvider>");
   }
@@ -115,6 +115,13 @@ var ChevronDownIcon = icon(/* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }));
 var ChevronUpIcon = icon(/* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }));
 var ChevronRightIcon = icon(/* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }));
 var DotIcon = icon(/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor" }));
+var EllipsisIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1.5", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1.5", fill: "currentColor", stroke: "none" })
+  ] })
+);
 var SpinnerIcon = icon(
   /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", opacity: "0.25" }),
@@ -235,8 +242,8 @@ function Button({
   ] });
   let content;
   if (asChild) {
-    const child = React39.Children.only(children);
-    content = React39.cloneElement(child, void 0, decorate(child.props.children));
+    const child = React48.Children.only(children);
+    content = React48.cloneElement(child, void 0, decorate(child.props.children));
   } else {
     content = decorate(children);
   }
@@ -326,7 +333,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React39.createContext({
+var ToggleGroupContext = React48.createContext({
   size: "md",
   variant: "default"
 });
@@ -367,7 +374,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React39.useContext(ToggleGroupContext);
+  const context = React48.useContext(ToggleGroupContext);
   const resolvedVariant = variant ?? context.variant;
   const resolvedSize = size ?? context.size;
   return /* @__PURE__ */ jsx(
@@ -470,7 +477,7 @@ function Slider({
   tone,
   ...props
 }) {
-  const values = React39.useMemo(
+  const values = React48.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min],
     [value, defaultValue, min]
   );
@@ -669,13 +676,192 @@ function SelectScrollDownButton({
     }
   );
 }
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 6,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenu$1.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn("mz-panel mz-menu-content", className),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "mz-item",
+        inset ? "mz-item--inset" : "mz-item--plain",
+        variant === "destructive" && "mz-item--destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu$1.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn("mz-item", className),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu$1.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn("mz-item", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon, {}) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn("mz-menu-label", inset && "mz-menu-label--inset", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("mz-menu-separator", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn("mz-menu-shortcut", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu$1.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "mz-item mz-menu-sub-trigger",
+        inset ? "mz-item--inset" : "mz-item--plain",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "mz-menu-sub-trigger__icon" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn("mz-panel mz-menu-content", className),
+      ...props
+    }
+  );
+}
 function Tabs({ className, ...props }) {
   return /* @__PURE__ */ jsx(Tabs$1.Root, { "data-slot": "tabs", className: cn("mz-tabs", className), ...props });
 }
-function TabsList({
+function TabsList({ overflow = "wrap", overflowLabel, ...props }) {
+  if (overflow === "menu") {
+    return /* @__PURE__ */ jsx(TabsListWithMenu, { overflowLabel, ...props });
+  }
+  return /* @__PURE__ */ jsx(PlainTabsList, { overflow, ...props });
+}
+function PlainTabsList({
   className,
   variant = "default",
   tone,
+  overflow = "wrap",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
@@ -684,11 +870,146 @@ function TabsList({
       "data-slot": "tabs-list",
       "data-variant": variant,
       "data-tone": tone,
-      className: cn("mz-tabs-list", variant === "line" && "mz-tabs-list--line", className),
+      "data-overflow": overflow,
+      className: cn(
+        "mz-tabs-list",
+        variant === "line" && "mz-tabs-list--line",
+        overflow === "scroll" && "mz-tabs-list--scroll",
+        className
+      ),
       ...props
     }
   );
 }
+function TabsListWithMenu({
+  className,
+  variant = "default",
+  tone,
+  overflowLabel = "More",
+  children,
+  ...props
+}) {
+  const items = React48.useMemo(
+    () => React48.Children.toArray(children).filter(React48.isValidElement),
+    [children]
+  );
+  const containerRef = React48.useRef(null);
+  const triggerRefs = React48.useRef([]);
+  const mirrorRefs = React48.useRef([]);
+  const [containerWidth, setContainerWidth] = React48.useState(0);
+  const [widths, setWidths] = React48.useState([]);
+  React48.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setContainerWidth(el.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setContainerWidth(entry.contentRect.width);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  React48.useLayoutEffect(() => {
+    const measured = mirrorRefs.current.map((el) => el ? Math.ceil(el.getBoundingClientRect().width) : 0);
+    setWidths(
+      (prev) => prev.length === measured.length && prev.every((w, i) => w === measured[i]) ? prev : measured
+    );
+  }, [items]);
+  const visibleCount = React48.useMemo(() => {
+    if (!containerWidth || widths.length !== items.length) return items.length;
+    const total = widths.reduce((sum, w) => sum + w, 0);
+    if (total <= containerWidth) return items.length;
+    let used = 0;
+    let count = 0;
+    for (const width of widths) {
+      if (used + width + OVERFLOW_BUTTON_WIDTH > containerWidth) break;
+      used += width;
+      count++;
+    }
+    return count;
+  }, [containerWidth, widths, items.length]);
+  const hidden = items.slice(visibleCount);
+  const activeIsHidden = hidden.some(
+    (_, i) => triggerRefs.current[visibleCount + i]?.dataset.state === "active"
+  );
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "mz-tabs-list-wrap", children: [
+    /* @__PURE__ */ jsx("div", { className: "mz-tabs-list__mirror", "aria-hidden": "true", children: items.map((item, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "mz-tabs-trigger",
+        ref: (el) => {
+          mirrorRefs.current[i] = el;
+        },
+        children: item.props.children
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxs(
+      Tabs$1.List,
+      {
+        "data-slot": "tabs-list",
+        "data-variant": variant,
+        "data-tone": tone,
+        "data-overflow": "menu",
+        className: cn(
+          "mz-tabs-list mz-tabs-list--menu",
+          variant === "line" && "mz-tabs-list--line",
+          className
+        ),
+        ...props,
+        children: [
+          items.map(
+            (item, i) => React48.cloneElement(item, {
+              key: i,
+              ref: (el) => {
+                triggerRefs.current[i] = el;
+              },
+              style: {
+                ...item.props.style ?? {},
+                ...i >= visibleCount ? { display: "none" } : null
+              }
+            })
+          ),
+          hidden.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "data-slot": "tabs-overflow-trigger",
+                "data-active": activeIsHidden || void 0,
+                className: "mz-tabs-trigger mz-tabs-overflow mz-focusable",
+                "aria-label": `${overflowLabel} (${hidden.length})`,
+                children: [
+                  /* @__PURE__ */ jsx(EllipsisIcon, { className: "mz-tabs-overflow__icon" }),
+                  /* @__PURE__ */ jsxs("span", { className: "mz-tabs-overflow__label", children: [
+                    overflowLabel,
+                    " (",
+                    hidden.length,
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "mz-tabs-overflow__caret" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: hidden.map((item, i) => /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                onSelect: () => {
+                  triggerRefs.current[visibleCount + i]?.dispatchEvent(
+                    new MouseEvent("mousedown", { bubbles: true, cancelable: true, button: 0 })
+                  );
+                },
+                children: item.props.children
+              },
+              i
+            )) })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+var OVERFLOW_BUTTON_WIDTH = 116;
 function TabsTrigger({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     Tabs$1.Trigger,
@@ -1079,45 +1400,393 @@ function PopoverDescription({ className, ...props }) {
     }
   );
 }
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { "data-slot": "dropdown-menu-portal", ...props });
-}
-function DropdownMenuTrigger({
+var TooltipProviderPresence = React48.createContext(false);
+function TooltipProvider({
+  delayDuration = 200,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+  return /* @__PURE__ */ jsx(TooltipProviderPresence.Provider, { value: true, children: /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props,
+      children
+    }
+  ) });
 }
-function DropdownMenuContent({
+function Tooltip({ ...props }) {
+  const hasProvider = React48.useContext(TooltipProviderPresence);
+  const root = /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+  return hasProvider ? root : /* @__PURE__ */ jsx(TooltipProvider, { children: root });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
   className,
   sideOffset = 6,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
-    DropdownMenu$1.Content,
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
     {
-      "data-slot": "dropdown-menu-content",
+      "data-slot": "tooltip-content",
       sideOffset,
-      className: cn("mz-panel mz-menu-content", className),
-      ...props
-    }
-  ) });
-}
-function DropdownMenuGroup({ ...props }) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.Group, { "data-slot": "dropdown-menu-group", ...props });
+      className: cn("mz-tooltip-content", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "mz-tooltip-arrow", width: 10, height: 5 })
+      ]
+    }
+  ) });
 }
-function DropdownMenuItem({
+function AlertDialog({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn("mz-dialog-overlay", className),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        className: cn("mz-panel mz-dialog-content mz-alert-dialog-content", className),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-header", className: cn("mz-dialog-header", className), ...props });
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-footer", className: cn("mz-dialog-footer", className), ...props });
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("mz-dialog-title", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("mz-dialog-description", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  variant = "primary",
+  size = "md",
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Action,
+    {
+      "data-slot": "alert-dialog-action",
+      "data-variant": variant,
+      "data-size": size,
+      "data-tone": tone,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "md",
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Cancel,
+    {
+      "data-slot": "alert-dialog-cancel",
+      "data-variant": variant,
+      "data-size": size,
+      "data-tone": tone,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+}
+function Breadcrumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "breadcrumb",
+      "aria-label": "breadcrumb",
+      className: cn("mz-breadcrumb", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx("ol", { "data-slot": "breadcrumb-list", className: cn("mz-breadcrumb__list", className), ...props });
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "breadcrumb-item", className: cn("mz-breadcrumb__item", className), ...props });
+}
+function BreadcrumbLink({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "breadcrumb-link",
+      className: cn("mz-breadcrumb__link mz-focusable", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("mz-breadcrumb__page", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("mz-breadcrumb__separator", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+    }
+  );
+}
+function BreadcrumbEllipsis({
+  className,
+  label = "More",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      className: cn("mz-breadcrumb__ellipsis", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(EllipsisIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "mz-sr-only", children: label })
+      ]
+    }
+  );
+}
+function Table({
+  className,
+  containerClassName,
+  containerRef,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      "data-slot": "table-container",
+      className: cn("mz-table-wrap", containerClassName),
+      children: /* @__PURE__ */ jsx("table", { "data-slot": "table", className: cn("mz-table", className), ...props })
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("thead", { "data-slot": "table-header", className: cn("mz-table__head", className), ...props });
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx("tbody", { "data-slot": "table-body", className: cn("mz-table__body", className), ...props });
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("tfoot", { "data-slot": "table-footer", className: cn("mz-table__foot", className), ...props });
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx("tr", { "data-slot": "table-row", className: cn("mz-table__row", className), ...props });
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx("th", { "data-slot": "table-head", className: cn("mz-table__th", className), ...props });
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("mz-table__td", className), ...props });
+}
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: cn("mz-table__caption", className), ...props });
+}
+function ScrollArea({
+  className,
+  children,
+  viewportClassName,
+  viewportRef,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollArea$1.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("mz-scroll-area", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollArea$1.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            ref: viewportRef,
+            className: cn("mz-scroll-area__viewport mz-focusable", viewportClassName),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollArea$1.Corner, { className: "mz-scroll-area__corner" })
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "mz-scrollbar",
+        orientation === "horizontal" && "mz-scrollbar--horizontal",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollArea$1.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "mz-scrollbar__thumb"
+        }
+      )
+    }
+  );
+}
+function Menubar({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Menubar$1.Root,
+    {
+      "data-slot": "menubar",
+      className: cn("mz-menubar", className),
+      ...props
+    }
+  );
+}
+function MenubarMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(Menubar$1.Menu, { "data-slot": "menubar-menu", ...props });
+}
+function MenubarGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(Menubar$1.Group, { "data-slot": "menubar-group", ...props });
+}
+function MenubarPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Menubar$1.Portal, { "data-slot": "menubar-portal", ...props });
+}
+function MenubarRadioGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(Menubar$1.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
+}
+function MenubarTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menubar$1.Trigger,
+    {
+      "data-slot": "menubar-trigger",
+      className: cn("mz-menubar__trigger mz-focusable", className),
+      ...props
+    }
+  );
+}
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenubarPortal, { children: /* @__PURE__ */ jsx(
+    Menubar$1.Content,
+    {
+      "data-slot": "menubar-content",
+      align,
+      alignOffset,
+      sideOffset,
+      className: cn("mz-panel mz-menu-content", className),
+      ...props
+    }
+  ) });
+}
+function MenubarItem({
   className,
   inset,
   variant = "default",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DropdownMenu$1.Item,
+    Menubar$1.Item,
     {
-      "data-slot": "dropdown-menu-item",
+      "data-slot": "menubar-item",
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
@@ -1130,100 +1799,88 @@ function DropdownMenuItem({
     }
   );
 }
-function DropdownMenuCheckboxItem({
+function MenubarCheckboxItem({
   className,
   children,
   checked,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
-    DropdownMenu$1.CheckboxItem,
+    Menubar$1.CheckboxItem,
     {
-      "data-slot": "dropdown-menu-checkbox-item",
+      "data-slot": "menubar-checkbox-item",
       className: cn("mz-item", className),
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
+        /* @__PURE__ */ jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
         children
       ]
     }
   );
 }
-function DropdownMenuRadioGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
-}
-function DropdownMenuRadioItem({
+function MenubarRadioItem({
   className,
   children,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
-    DropdownMenu$1.RadioItem,
+    Menubar$1.RadioItem,
     {
-      "data-slot": "dropdown-menu-radio-item",
+      "data-slot": "menubar-radio-item",
       className: cn("mz-item", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon, {}) }) }),
+        /* @__PURE__ */ jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon, {}) }) }),
         children
       ]
     }
   );
 }
-function DropdownMenuLabel({
+function MenubarLabel({
   className,
   inset,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DropdownMenu$1.Label,
+    Menubar$1.Label,
     {
-      "data-slot": "dropdown-menu-label",
+      "data-slot": "menubar-label",
       "data-inset": inset,
       className: cn("mz-menu-label", inset && "mz-menu-label--inset", className),
       ...props
     }
   );
 }
-function DropdownMenuSeparator({
+function MenubarSeparator({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DropdownMenu$1.Separator,
+    Menubar$1.Separator,
     {
-      "data-slot": "dropdown-menu-separator",
+      "data-slot": "menubar-separator",
       className: cn("mz-menu-separator", className),
       ...props
     }
   );
 }
-function DropdownMenuShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "dropdown-menu-shortcut",
-      className: cn("mz-menu-shortcut", className),
-      ...props
-    }
-  );
+function MenubarShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-slot": "menubar-shortcut", className: cn("mz-menu-shortcut", className), ...props });
 }
-function DropdownMenuSub({ ...props }) {
-  return /* @__PURE__ */ jsx(DropdownMenu$1.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+function MenubarSub({ ...props }) {
+  return /* @__PURE__ */ jsx(Menubar$1.Sub, { "data-slot": "menubar-sub", ...props });
 }
-function DropdownMenuSubTrigger({
+function MenubarSubTrigger({
   className,
   inset,
   children,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
-    DropdownMenu$1.SubTrigger,
+    Menubar$1.SubTrigger,
     {
-      "data-slot": "dropdown-menu-sub-trigger",
+      "data-slot": "menubar-sub-trigger",
       "data-inset": inset,
       className: cn(
         "mz-item mz-menu-sub-trigger",
@@ -1238,63 +1895,820 @@ function DropdownMenuSubTrigger({
     }
   );
 }
-function DropdownMenuSubContent({
+function MenubarSubContent({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DropdownMenu$1.SubContent,
+    Menubar$1.SubContent,
     {
-      "data-slot": "dropdown-menu-sub-content",
+      "data-slot": "menubar-sub-content",
       className: cn("mz-panel mz-menu-content", className),
       ...props
     }
   );
 }
-var TooltipProviderPresence = React39.createContext(false);
-function TooltipProvider({
-  delayDuration = 200,
+function NavigationMenu({
+  className,
   children,
+  viewport = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(TooltipProviderPresence.Provider, { value: true, children: /* @__PURE__ */ jsx(
-    Tooltip$1.Provider,
+  return /* @__PURE__ */ jsxs(
+    NavigationMenu$1.Root,
     {
-      "data-slot": "tooltip-provider",
-      delayDuration,
+      "data-slot": "navigation-menu",
+      "data-viewport": viewport,
+      className: cn("mz-navmenu", className),
       ...props,
-      children
+      children: [
+        children,
+        viewport ? /* @__PURE__ */ jsx(NavigationMenuViewport, {}) : null
+      ]
     }
-  ) });
+  );
 }
-function Tooltip({ ...props }) {
-  const hasProvider = React39.useContext(TooltipProviderPresence);
-  const root = /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
-  return hasProvider ? root : /* @__PURE__ */ jsx(TooltipProvider, { children: root });
+function NavigationMenuList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.List,
+    {
+      "data-slot": "navigation-menu-list",
+      className: cn("mz-navmenu__list", className),
+      ...props
+    }
+  );
 }
-function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+function NavigationMenuItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Item,
+    {
+      "data-slot": "navigation-menu-item",
+      className: cn("mz-navmenu__item", className),
+      ...props
+    }
+  );
 }
-function TooltipContent({
+var navigationMenuTriggerStyle = cva("mz-navmenu__trigger mz-focusable");
+function NavigationMenuTrigger({
   className,
-  sideOffset = 6,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
-    Tooltip$1.Content,
+  return /* @__PURE__ */ jsxs(
+    NavigationMenu$1.Trigger,
     {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn("mz-tooltip-content", className),
+      "data-slot": "navigation-menu-trigger",
+      className: cn(navigationMenuTriggerStyle(), className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "mz-tooltip-arrow", width: 10, height: 5 })
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "mz-navmenu__trigger-icon", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+function NavigationMenuContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Content,
+    {
+      "data-slot": "navigation-menu-content",
+      className: cn("mz-navmenu__content", className),
+      ...props
+    }
+  );
+}
+function NavigationMenuViewport({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "mz-navmenu__viewport-wrap", children: /* @__PURE__ */ jsx(
+    NavigationMenu$1.Viewport,
+    {
+      "data-slot": "navigation-menu-viewport",
+      className: cn("mz-panel mz-navmenu__viewport", className),
+      ...props
+    }
+  ) });
+}
+function NavigationMenuLink({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Link,
+    {
+      "data-slot": "navigation-menu-link",
+      className: cn("mz-navmenu__link mz-focusable", className),
+      ...props
+    }
+  );
+}
+function NavigationMenuIndicator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Indicator,
+    {
+      "data-slot": "navigation-menu-indicator",
+      className: cn("mz-navmenu__indicator", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "mz-navmenu__arrow" })
+    }
+  );
+}
+var queue = [];
+var listeners = /* @__PURE__ */ new Set();
+var counter = 0;
+function emit() {
+  for (const listener of listeners) listener();
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+var getSnapshot = () => queue;
+var emptyQueue = [];
+var getServerSnapshot = () => emptyQueue;
+function dismissToast(id) {
+  const next = queue.filter((t) => t.id !== id);
+  if (next.length === queue.length) return;
+  queue = next;
+  emit();
+}
+function toast(options) {
+  const id = `mz-toast-${++counter}`;
+  queue = [...queue, { ...options, id }].slice(-3);
+  emit();
+  return {
+    id,
+    dismiss: () => dismissToast(id),
+    update: (next) => {
+      queue = queue.map((t) => t.id === id ? { ...t, ...next, id } : t);
+      emit();
+    }
+  };
+}
+function dismiss(id) {
+  if (id) return dismissToast(id);
+  if (queue.length === 0) return;
+  queue = [];
+  emit();
+}
+function useToast() {
+  const toasts = React48.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return { toasts, toast, dismiss };
+}
+function ToastProvider({ ...props }) {
+  return /* @__PURE__ */ jsx(Toast$1.Provider, { ...props });
+}
+function ToastViewport({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toast$1.Viewport,
+    {
+      "data-slot": "toast-viewport",
+      className: cn("mz-toast-viewport", className),
+      ...props
+    }
+  );
+}
+function Toast({
+  className,
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toast$1.Root,
+    {
+      "data-slot": "toast",
+      "data-tone": tone,
+      className: cn("mz-panel mz-toast", className),
+      ...props
+    }
+  );
+}
+function ToastTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Toast$1.Title,
+    {
+      "data-slot": "toast-title",
+      className: cn("mz-toast__title", className),
+      ...props
+    }
+  );
+}
+function ToastDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toast$1.Description,
+    {
+      "data-slot": "toast-description",
+      className: cn("mz-toast__description", className),
+      ...props
+    }
+  );
+}
+function ToastAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Toast$1.Action,
+    {
+      "data-slot": "toast-action",
+      className: cn("mz-toast__action mz-focusable", className),
+      ...props
+    }
+  );
+}
+function ToastClose({
+  className,
+  label = "Close",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Toast$1.Close,
+    {
+      "data-slot": "toast-close",
+      className: cn("mz-toast__close mz-focusable", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(XIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "mz-sr-only", children: label })
+      ]
+    }
+  );
+}
+function Toaster({
+  duration = 5e3,
+  position = "bottom-right",
+  closeLabel = "Close",
+  hotkey,
+  className
+}) {
+  const toasts = React48.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return /* @__PURE__ */ jsxs(ToastProvider, { duration, swipeDirection: "right", ...hotkey ? { hotkey } : {}, children: [
+    toasts.map(({ id, title, description, tone, action, duration: own, onOpenChange }) => /* @__PURE__ */ jsxs(
+      Toast,
+      {
+        tone,
+        duration: own === Infinity ? 1e3 * 60 * 60 * 24 : own,
+        onOpenChange: (open) => {
+          onOpenChange?.(open);
+          if (!open) dismissToast(id);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mz-toast__body", children: [
+            title ? /* @__PURE__ */ jsx(ToastTitle, { children: title }) : null,
+            description ? /* @__PURE__ */ jsx(ToastDescription, { children: description }) : null
+          ] }),
+          action,
+          /* @__PURE__ */ jsx(ToastClose, { label: closeLabel })
+        ]
+      },
+      id
+    )),
+    /* @__PURE__ */ jsx(ToastViewport, { className: cn(`mz-toast-viewport--${position}`, className) })
+  ] });
+}
+
+// src/lib/date.ts
+function startOfDay(date) {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addDays(date, amount) {
+  const d = new Date(date);
+  d.setDate(d.getDate() + amount);
+  return d;
+}
+function addMonths(date, amount) {
+  const target = new Date(date.getFullYear(), date.getMonth() + amount, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  target.setDate(Math.min(date.getDate(), lastDay));
+  return target;
+}
+function differenceInMonths(a, b) {
+  return (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth());
+}
+function isBefore(a, b) {
+  return startOfDay(a).getTime() < startOfDay(b).getTime();
+}
+function isAfter(a, b) {
+  return startOfDay(a).getTime() > startOfDay(b).getTime();
+}
+function isWithin(date, from, to) {
+  const t = startOfDay(date).getTime();
+  return t >= startOfDay(from).getTime() && t <= startOfDay(to).getTime();
+}
+var SUNDAY_FIRST = /^(en-US|en-CA|en-AU|en-PH|en-ZA|ja|ko|zh|he|ar|pt-BR)\b/i;
+function localeWeekStart(locale) {
+  if (!locale) return 1;
+  try {
+    const info = new Intl.Locale(locale).getWeekInfo?.();
+    if (info) return info.firstDay % 7;
+  } catch {
+  }
+  return SUNDAY_FIRST.test(locale) ? 0 : 1;
+}
+function monthGrid(month, weekStartsOn) {
+  const first = startOfMonth(month);
+  const lead = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = addDays(first, -lead);
+  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+}
+function isoWeek(date) {
+  const d = startOfDay(date);
+  d.setDate(d.getDate() + 3 - (d.getDay() + 6) % 7);
+  const firstThursday = new Date(d.getFullYear(), 0, 4);
+  firstThursday.setDate(firstThursday.getDate() + 3 - (firstThursday.getDay() + 6) % 7);
+  return 1 + Math.round((d.getTime() - firstThursday.getTime()) / (7 * 864e5));
+}
+var defaultLabels = {
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  month: "Month",
+  year: "Year",
+  weekNumber: "Week"
+};
+function matches(date, matcher) {
+  if (!matcher) return false;
+  if (typeof matcher === "function") return matcher(date);
+  if (matcher instanceof Date) return isSameDay(date, matcher);
+  if (Array.isArray(matcher)) return matcher.some((d) => isSameDay(date, d));
+  if ("from" in matcher && matcher.from && matcher.to) return isWithin(date, matcher.from, matcher.to);
+  const bounds = matcher;
+  if (bounds.before && isBefore(date, bounds.before)) return true;
+  if (bounds.after && isAfter(date, bounds.after)) return true;
+  return false;
+}
+function Calendar({
+  month: monthProp,
+  defaultMonth,
+  onMonthChange,
+  numberOfMonths = 1,
+  locale,
+  weekStartsOn,
+  disabled,
+  fromDate,
+  toDate,
+  showOutsideDays = true,
+  showWeekNumbers = false,
+  captionLayout = "label",
+  fromYear,
+  toYear,
+  today: todayProp,
+  labels: labelsProp,
+  className,
+  id,
+  ...selection
+}) {
+  const labels = { ...defaultLabels, ...labelsProp };
+  const today = React48.useMemo(() => startOfDay(todayProp ?? /* @__PURE__ */ new Date()), [todayProp]);
+  const firstDayOfWeek = weekStartsOn ?? localeWeekStart(locale);
+  const initialMonth = React48.useMemo(
+    () => startOfMonth(monthProp ?? defaultMonth ?? selectedAnchor(selection) ?? today),
+    // Only the mount value matters; afterwards the month is state or a prop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const [monthState, setMonthState] = React48.useState(initialMonth);
+  const month = monthProp ? startOfMonth(monthProp) : monthState;
+  const goToMonth = React48.useCallback(
+    (next) => {
+      const clamped = clampMonth(next, fromDate, toDate);
+      if (!monthProp) setMonthState(clamped);
+      onMonthChange?.(clamped);
+    },
+    [fromDate, toDate, monthProp, onMonthChange]
+  );
+  const monthCount = Math.max(1, numberOfMonths);
+  const months = React48.useMemo(
+    () => Array.from({ length: monthCount }, (_, i) => addMonths(month, i)),
+    [month, monthCount]
+  );
+  const leadMonth = month;
+  const lastMonth = addMonths(month, monthCount - 1);
+  const canGoBack = !fromDate || differenceInMonths(month, startOfMonth(fromDate)) > 0;
+  const canGoForward = !toDate || differenceInMonths(startOfMonth(toDate), lastMonth) > 0;
+  const isDisabled = React48.useCallback(
+    (date) => {
+      if (fromDate && isBefore(date, fromDate)) return true;
+      if (toDate && isAfter(date, toDate)) return true;
+      return matches(date, disabled);
+    },
+    [disabled, fromDate, toDate]
+  );
+  const [previewDay, setPreviewDay] = React48.useState();
+  const handleSelect = (date) => {
+    if (isDisabled(date)) return;
+    if (selection.mode === "multiple") {
+      const current = selection.selected ?? [];
+      const next = current.some((d) => isSameDay(d, date)) ? current.filter((d) => !isSameDay(d, date)) : [...current, date];
+      selection.onSelect?.(next);
+      return;
+    }
+    if (selection.mode === "range") {
+      const current = selection.selected;
+      if (current?.from && !current.to) {
+        const [from, to] = isBefore(date, current.from) ? [date, current.from] : [current.from, date];
+        selection.onSelect?.({ from, to });
+        setPreviewDay(void 0);
+      } else {
+        selection.onSelect?.({ from: date, to: void 0 });
+      }
+      return;
+    }
+    const single = selection;
+    const isSame = isSameDay(single.selected, date);
+    single.onSelect?.(isSame && !single.required ? void 0 : date);
+  };
+  const selectionStateOf = (date) => {
+    if (selection.mode === "multiple") {
+      return { selected: (selection.selected ?? []).some((d) => isSameDay(d, date)) };
+    }
+    if (selection.mode === "range") {
+      const { from, to } = selection.selected ?? {};
+      const tentative = Boolean(from && !to && previewDay);
+      const other = to ?? (tentative ? previewDay : void 0);
+      const [start, end] = from && other && isBefore(other, from) ? [other, from] : [from, other];
+      const isStart = isSameDay(date, start);
+      const isEnd = Boolean(end) && isSameDay(date, end);
+      const inside = Boolean(start && end) && !isStart && !isEnd && isWithin(date, start, end);
+      return {
+        // Only a committed end reads as selected; the hovered one is a preview.
+        selected: isSameDay(date, from) || isSameDay(date, to),
+        rangeStart: isStart,
+        rangeEnd: isEnd,
+        rangeMiddle: inside,
+        preview: tentative && (inside || (isStart || isEnd) && !isSameDay(date, from))
+      };
+    }
+    return { selected: isSameDay(selection.selected, date) };
+  };
+  const rootRef = React48.useRef(null);
+  const [focusedDay, setFocusedDay] = React48.useState();
+  const tabbableDay = React48.useMemo(() => {
+    const candidates = [focusedDay, selectedAnchor(selection), today].filter(Boolean);
+    const visible = candidates.find((d) => months.some((m) => isSameMonth(m, d)));
+    return visible ?? startOfMonth(leadMonth);
+  }, [focusedDay, selection, today, months, leadMonth]);
+  React48.useEffect(() => {
+    if (!focusedDay || !rootRef.current) return;
+    if (!rootRef.current.contains(document.activeElement)) return;
+    const target = rootRef.current.querySelector(
+      `[data-day="${dayKey(focusedDay)}"]`
+    );
+    target?.focus();
+  }, [focusedDay, month]);
+  const moveFocus = (from, delta) => {
+    const next = addDays(from, delta);
+    setFocusedDay(next);
+    if (!months.some((m) => isSameMonth(m, next))) {
+      goToMonth(isBefore(next, leadMonth) ? next : addMonths(next, -(monthCount - 1)));
+    }
+  };
+  const onKeyDown = (event, date) => {
+    const step = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7
+    };
+    const delta = step[event.key];
+    if (delta !== void 0) {
+      event.preventDefault();
+      moveFocus(date, delta);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const offset = (date.getDay() - firstDayOfWeek + 7) % 7;
+      moveFocus(date, event.key === "Home" ? -offset : 6 - offset);
+      return;
+    }
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      const next = addMonths(date, event.key === "PageUp" ? -1 : 1);
+      setFocusedDay(next);
+      goToMonth(next);
+    }
+  };
+  const fmt = React48.useMemo(
+    () => ({
+      caption: new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
+      monthName: new Intl.DateTimeFormat(locale, { month: "long" }),
+      weekday: new Intl.DateTimeFormat(locale, { weekday: "short" }),
+      weekdayLong: new Intl.DateTimeFormat(locale, { weekday: "long" }),
+      day: new Intl.DateTimeFormat(locale, {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        year: "numeric"
+      })
+    }),
+    [locale]
+  );
+  const weekdays = React48.useMemo(() => {
+    const sunday = new Date(2021, 7, 1);
+    return Array.from({ length: 7 }, (_, i) => addDays(sunday, (firstDayOfWeek + i) % 7));
+  }, [firstDayOfWeek]);
+  const years = React48.useMemo(() => {
+    const start = fromYear ?? (fromDate ? fromDate.getFullYear() : today.getFullYear() - 10);
+    const end = toYear ?? (toDate ? toDate.getFullYear() : today.getFullYear() + 10);
+    return Array.from({ length: Math.max(1, end - start + 1) }, (_, i) => start + i);
+  }, [fromYear, toYear, fromDate, toDate, today]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      id,
+      "data-slot": "calendar",
+      className: cn("mz-calendar", className),
+      onMouseLeave: () => setPreviewDay(void 0),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mz-calendar__nav", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "calendar-previous",
+              className: "mz-calendar__nav-button mz-focusable",
+              "aria-label": labels.previousMonth,
+              disabled: !canGoBack,
+              onClick: () => goToMonth(addMonths(month, -1)),
+              children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "calendar-next",
+              className: "mz-calendar__nav-button mz-focusable",
+              "aria-label": labels.nextMonth,
+              disabled: !canGoForward,
+              onClick: () => goToMonth(addMonths(month, 1)),
+              children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mz-calendar__months", children: months.map((displayed, index) => /* @__PURE__ */ jsxs("div", { className: "mz-calendar__month", children: [
+          captionLayout === "dropdown" && index === 0 ? /* @__PURE__ */ jsxs("div", { className: "mz-calendar__caption mz-calendar__caption--dropdown", children: [
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "mz-calendar__dropdown mz-focusable",
+                "aria-label": labels.month,
+                value: displayed.getMonth(),
+                onChange: (e) => goToMonth(new Date(displayed.getFullYear(), Number(e.target.value), 1)),
+                children: Array.from({ length: 12 }, (_, m) => /* @__PURE__ */ jsx("option", { value: m, children: fmt.monthName.format(new Date(2021, m, 1)) }, m))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "mz-calendar__dropdown mz-focusable",
+                "aria-label": labels.year,
+                value: displayed.getFullYear(),
+                onChange: (e) => goToMonth(new Date(Number(e.target.value), displayed.getMonth(), 1)),
+                children: years.map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("div", { className: "mz-calendar__caption", "aria-live": "polite", children: fmt.caption.format(displayed) }),
+          /* @__PURE__ */ jsxs("table", { className: "mz-calendar__grid", role: "grid", children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "mz-calendar__weekdays", children: [
+              showWeekNumbers ? /* @__PURE__ */ jsx("th", { scope: "col", className: "mz-calendar__weeknum-head", children: /* @__PURE__ */ jsx("span", { className: "mz-sr-only", children: labels.weekNumber }) }) : null,
+              weekdays.map((d) => /* @__PURE__ */ jsxs("th", { scope: "col", className: "mz-calendar__weekday", children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: fmt.weekday.format(d) }),
+                /* @__PURE__ */ jsx("span", { className: "mz-sr-only", children: fmt.weekdayLong.format(d) })
+              ] }, d.getDay()))
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: chunk(monthGrid(displayed, firstDayOfWeek), 7).map((week, weekIndex) => {
+              const weekStart = week[0];
+              return /* @__PURE__ */ jsxs("tr", { className: "mz-calendar__week", children: [
+                showWeekNumbers && weekStart ? /* @__PURE__ */ jsx("td", { className: "mz-calendar__weeknum", children: isoWeek(weekStart) }) : null,
+                week.map((date) => {
+                  const outside = !isSameMonth(date, displayed);
+                  const state = selectionStateOf(date);
+                  const dayDisabled = isDisabled(date);
+                  if (outside && !showOutsideDays) {
+                    return /* @__PURE__ */ jsx("td", { className: "mz-calendar__cell" }, date.getTime());
+                  }
+                  return /* @__PURE__ */ jsx("td", { className: "mz-calendar__cell", role: "gridcell", children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-slot": "calendar-day",
+                      "data-day": dayKey(date),
+                      "data-outside": outside || void 0,
+                      "data-today": isSameDay(date, today) || void 0,
+                      "data-selected": state.selected || void 0,
+                      "data-range-start": state.rangeStart || void 0,
+                      "data-range-end": state.rangeEnd || void 0,
+                      "data-range-middle": state.rangeMiddle || void 0,
+                      "data-preview": state.preview || void 0,
+                      className: "mz-calendar__day mz-focusable",
+                      tabIndex: isSameDay(date, tabbableDay) ? 0 : -1,
+                      "aria-selected": state.selected || void 0,
+                      "aria-label": fmt.day.format(date),
+                      disabled: dayDisabled,
+                      onClick: () => handleSelect(date),
+                      onFocus: () => setFocusedDay(date),
+                      onMouseEnter: () => setPreviewDay(date),
+                      onKeyDown: (e) => onKeyDown(e, date),
+                      children: date.getDate()
+                    }
+                  ) }, date.getTime());
+                })
+              ] }, weekStart ? weekStart.getTime() : weekIndex);
+            }) })
+          ] })
+        ] }, displayed.getTime())) })
+      ]
+    }
+  );
+}
+function dayKey(date) {
+  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+}
+function chunk(items, size) {
+  const out = [];
+  for (let i = 0; i < items.length; i += size) out.push(items.slice(i, i + size));
+  return out;
+}
+function selectedAnchor(selection) {
+  if (selection.mode === "multiple") return selection.selected?.[0];
+  if (selection.mode === "range") return selection.selected?.from;
+  return selection.selected;
+}
+function clampMonth(month, fromDate, toDate) {
+  const m = startOfMonth(month);
+  if (fromDate && differenceInMonths(m, startOfMonth(fromDate)) < 0) return startOfMonth(fromDate);
+  if (toDate && differenceInMonths(m, startOfMonth(toDate)) > 0) return startOfMonth(toDate);
+  return m;
+}
+var ChartContext = React48.createContext(null);
+function useChart() {
+  const context = React48.useContext(ChartContext);
+  if (!context) throw new Error("useChart must be used inside a <ChartContainer>");
+  return context;
+}
+function ChartStyle({ id, config }) {
+  const entries = Object.entries(config).filter(([, item]) => item.theme || item.color);
+  if (entries.length === 0) return null;
+  const block = (theme) => entries.map(([key, item]) => {
+    const color = item.theme ? item.theme[theme] : item.color;
+    return color && isSafeColor(color) ? `  --color-${cssIdent(key)}: ${color};` : null;
+  }).filter(Boolean).join("\n");
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: [
+          `[data-chart='${id}'] {
+${block("light")}
+}`,
+          `[data-mz-theme='dark'] [data-chart='${id}'],`,
+          `.mz-theme-dark [data-chart='${id}'],`,
+          `.dark [data-chart='${id}'] {
+${block("dark")}
+}`
+        ].join("\n")
+      }
+    }
+  );
+}
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}) {
+  const uid = React48.useId();
+  const chartId = `mz-chart-${(id ?? uid).replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn("mz-chart", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        children
       ]
     }
   ) });
 }
+function configKeyOf(item, explicitKey, fallback) {
+  if (!explicitKey) return fallback;
+  const fromItem = item[explicitKey];
+  if (typeof fromItem === "string") return fromItem;
+  const fromDatum = item.payload?.[explicitKey];
+  if (typeof fromDatum === "string") return fromDatum;
+  return explicitKey;
+}
+function ChartTooltipContent({
+  active,
+  payload = [],
+  label,
+  labelFormatter,
+  formatter,
+  hideLabel = false,
+  hideIndicator = false,
+  indicator = "dot",
+  nameKey,
+  labelKey,
+  className
+}) {
+  const { config } = useChart();
+  if (!active || payload.length === 0) return null;
+  const first = payload[0];
+  const labelled = labelKey && first ? config[configKeyOf(first, labelKey, labelKey)]?.label : void 0;
+  const rawLabel = labelled ?? (typeof label === "string" ? config[label]?.label ?? label : label);
+  const heading = labelFormatter ? labelFormatter(rawLabel, payload) : rawLabel;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "chart-tooltip", className: cn("mz-panel mz-chart__tooltip", className), children: [
+    !hideLabel && heading != null ? /* @__PURE__ */ jsx("div", { className: "mz-chart__tooltip-label", children: heading }) : null,
+    /* @__PURE__ */ jsx("div", { className: "mz-chart__tooltip-items", children: payload.map((item, index) => {
+      const key = configKeyOf(item, nameKey, String(item.dataKey ?? item.name ?? index));
+      const series = config[key];
+      const color = item.color ?? item.fill ?? `var(--color-${cssIdent(key)})`;
+      const name = series?.label ?? item.name ?? key;
+      return /* @__PURE__ */ jsxs("div", { className: "mz-chart__tooltip-item", children: [
+        !hideIndicator ? series?.icon ? /* @__PURE__ */ jsx(series.icon, { className: "mz-chart__tooltip-icon" }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("mz-chart__swatch", `mz-chart__swatch--${indicator}`),
+            style: { "--mz-chart-color": color }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { className: "mz-chart__tooltip-name", children: name }),
+        /* @__PURE__ */ jsx("span", { className: "mz-chart__tooltip-value", children: formatter ? formatter(item.value, name, item) : item.value })
+      ] }, key + index);
+    }) })
+  ] });
+}
+function ChartLegendContent({
+  payload = [],
+  hideIcon = false,
+  nameKey,
+  className
+}) {
+  const { config } = useChart();
+  if (payload.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "chart-legend", className: cn("mz-chart__legend", className), children: payload.map((item, index) => {
+    const key = configKeyOf(item, nameKey, String(item.dataKey ?? item.name ?? index));
+    const series = config[key];
+    const color = item.color ?? item.fill ?? `var(--color-${cssIdent(key)})`;
+    return /* @__PURE__ */ jsxs("div", { className: "mz-chart__legend-item", children: [
+      !hideIcon ? series?.icon ? /* @__PURE__ */ jsx(series.icon, { className: "mz-chart__tooltip-icon" }) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "mz-chart__swatch mz-chart__swatch--dot",
+          style: { "--mz-chart-color": color }
+        }
+      ) : null,
+      series?.label ?? item.name ?? key
+    ] }, key + index);
+  }) });
+}
+function cssIdent(key) {
+  return key.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function isSafeColor(value) {
+  if (value.length > 128) return false;
+  if (/[;{}<>\\]/.test(value)) return false;
+  if (/url\s*\(|expression\s*\(|@import/i.test(value)) return false;
+  return /^(#[0-9a-f]{3,8}|(rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|color|color-mix|var)\s*\(.*\)|[a-z-]+)$/i.test(
+    value.trim()
+  );
+}
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "sheet", ...props });
 }
@@ -1375,8 +2789,8 @@ function SheetDescription({
   );
 }
 function useIsMobile(breakpoint = 768) {
-  const [isMobile, setIsMobile] = React39.useState(false);
-  React39.useEffect(() => {
+  const [isMobile, setIsMobile] = React48.useState(false);
+  React48.useEffect(() => {
     const query = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
     const update = () => setIsMobile(query.matches);
     update();
@@ -1387,9 +2801,9 @@ function useIsMobile(breakpoint = 768) {
 }
 var STORAGE_KEY = "morze-ui-sidebar";
 var SHORTCUT = "b";
-var SidebarContext = React39.createContext(null);
+var SidebarContext = React48.createContext(null);
 function useSidebar() {
-  const context = React39.useContext(SidebarContext);
+  const context = React48.useContext(SidebarContext);
   if (!context) throw new Error("useSidebar must be used inside <SidebarProvider>");
   return context;
 }
@@ -1414,14 +2828,14 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile(mobileBreakpoint);
-  const [openMobile, setOpenMobile] = React39.useState(false);
-  const [internalOpen, setInternalOpen] = React39.useState(defaultOpen);
-  React39.useEffect(() => {
+  const [openMobile, setOpenMobile] = React48.useState(false);
+  const [internalOpen, setInternalOpen] = React48.useState(defaultOpen);
+  React48.useEffect(() => {
     const stored = readStored2(storageKey);
     if (stored !== null) setInternalOpen(stored);
   }, [storageKey]);
   const open = openProp ?? internalOpen;
-  const setOpen = React39.useCallback(
+  const setOpen = React48.useCallback(
     (next) => {
       if (openProp === void 0) setInternalOpen(next);
       onOpenChange?.(next);
@@ -1433,11 +2847,11 @@ function SidebarProvider({
     },
     [openProp, onOpenChange, storageKey]
   );
-  const toggleSidebar = React39.useCallback(() => {
+  const toggleSidebar = React48.useCallback(() => {
     if (isMobile) setOpenMobile((current) => !current);
     else setOpen(!open);
   }, [isMobile, open, setOpen]);
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     const onKeyDown = (event) => {
       if (event.key.toLowerCase() !== SHORTCUT || !(event.metaKey || event.ctrlKey)) return;
       event.preventDefault();
@@ -1446,7 +2860,7 @@ function SidebarProvider({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [toggleSidebar]);
-  const value = React39.useMemo(
+  const value = React48.useMemo(
     () => ({
       state: open ? "expanded" : "collapsed",
       open,
@@ -1672,7 +3086,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React39.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+  const width = React48.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1717,9 +3131,9 @@ function CellEditor({
   onDone
 }) {
   const initial = def.value(row);
-  const [value, setValue] = React39.useState(initial);
-  const [saving, setSaving] = React39.useState(false);
-  const [error, setError] = React39.useState(null);
+  const [value, setValue] = React48.useState(initial);
+  const [saving, setSaving] = React48.useState(false);
+  const [error, setError] = React48.useState(null);
   const commit = async () => {
     if (value === initial) return onDone();
     setSaving(true);
@@ -1893,9 +3307,9 @@ function parseSort(raw) {
 }
 function ColumnFilter({ columnLabel, def, value, onApply, labels: labelsProp }) {
   const labels = resolveLabels(labelsProp);
-  const [open, setOpen] = React39.useState(false);
-  const [draft, setDraft] = React39.useState(value);
-  React39.useEffect(() => {
+  const [open, setOpen] = React48.useState(false);
+  const [draft, setDraft] = React48.useState(value);
+  React48.useEffect(() => {
     if (open) setDraft(value);
   }, [open, value]);
   const active = isFilterActive(value);
@@ -2103,9 +3517,9 @@ function ColumnManager({
   labels: labelsProp
 }) {
   const labels = resolveLabels(labelsProp);
-  const [dragging, setDragging] = React39.useState(null);
-  const [dropTarget, setDropTarget] = React39.useState(null);
-  const entries = React39.useMemo(() => {
+  const [dragging, setDragging] = React48.useState(null);
+  const [dropTarget, setDropTarget] = React48.useState(null);
+  const entries = React48.useMemo(() => {
     const byId = new Map(columns.map((c, index) => [c.id, { column: c, declaredIndex: index }]));
     const ordered = layout.order.map((id) => byId.get(id)).filter((e) => Boolean(e));
     const side = (id) => layout.pinned[id];
@@ -2339,9 +3753,9 @@ function DataTablePagination({
 }
 function useColumnResize(options) {
   const { rootRef, widthOf, minWidthOf, onCommit } = options;
-  const [resizing, setResizing] = React39.useState(null);
+  const [resizing, setResizing] = React48.useState(null);
   const varName = (id) => `--mz-dt-w-${cssSafe(id)}`;
-  const start = React39.useCallback(
+  const start = React48.useCallback(
     (event, id) => {
       if (event.button !== 0) return;
       event.preventDefault();
@@ -2373,7 +3787,7 @@ function useColumnResize(options) {
     },
     [rootRef, widthOf, minWidthOf, onCommit]
   );
-  const autoFit = React39.useCallback(
+  const autoFit = React48.useCallback(
     (id) => {
       const root = rootRef.current;
       if (!root) return;
@@ -2390,7 +3804,7 @@ function useColumnResize(options) {
     },
     [rootRef, minWidthOf, onCommit]
   );
-  const onKeyDown = React39.useCallback(
+  const onKeyDown = React48.useCallback(
     (event, id) => {
       const step = event.shiftKey ? 32 : 8;
       if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
@@ -2433,7 +3847,7 @@ function useColumnLayout({
   layout: controlled,
   onLayoutChange
 }) {
-  const baseline = React39.useMemo(
+  const baseline = React48.useMemo(
     () => ({
       order: columns.map((c) => c.id),
       hidden: [],
@@ -2445,27 +3859,27 @@ function useColumnLayout({
     }),
     [columns]
   );
-  const [internal, setInternal] = React39.useState(baseline);
-  React39.useEffect(() => {
+  const [internal, setInternal] = React48.useState(baseline);
+  React48.useEffect(() => {
     const stored = readStored3(persistKey);
     if (stored) setInternal((current) => merge(current, stored, baseline));
   }, [persistKey]);
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     setInternal((current) => merge(baseline, current, baseline));
   }, [baseline]);
-  const layout = React39.useMemo(
+  const layout = React48.useMemo(
     () => controlled ? merge(baseline, controlled, baseline) : internal,
     [controlled, internal, baseline]
   );
-  const onLayoutChangeRef = React39.useRef(onLayoutChange);
-  React39.useEffect(() => {
+  const onLayoutChangeRef = React48.useRef(onLayoutChange);
+  React48.useEffect(() => {
     onLayoutChangeRef.current = onLayoutChange;
   });
-  const internalRef = React39.useRef(internal);
-  React39.useEffect(() => {
+  const internalRef = React48.useRef(internal);
+  React48.useEffect(() => {
     internalRef.current = internal;
   }, [internal]);
-  const update = React39.useCallback(
+  const update = React48.useCallback(
     (patch, options) => {
       const base = controlled ? merge(baseline, controlled, baseline) : internalRef.current;
       const next = patch(base);
@@ -2479,11 +3893,11 @@ function useColumnLayout({
     },
     [controlled, baseline, persistKey]
   );
-  const byId = React39.useMemo(
+  const byId = React48.useMemo(
     () => new Map(columns.map((c) => [c.id, c])),
     [columns]
   );
-  const visible = React39.useMemo(() => {
+  const visible = React48.useMemo(() => {
     const ordered = layout.order.map((id) => byId.get(id)).filter((c) => Boolean(c) && !layout.hidden.includes(c.id));
     const side = (id) => layout.pinned[id];
     return [
@@ -2492,15 +3906,15 @@ function useColumnLayout({
       ...ordered.filter((c) => side(c.id) === "right")
     ];
   }, [layout, byId]);
-  const widthOf = React39.useCallback(
+  const widthOf = React48.useCallback(
     (id) => layout.widths[id] ?? byId.get(id)?.width ?? DEFAULT_WIDTH,
     [layout.widths, byId]
   );
-  const minWidthOf = React39.useCallback(
+  const minWidthOf = React48.useCallback(
     (id) => byId.get(id)?.minWidth ?? DEFAULT_MIN,
     [byId]
   );
-  const fitTo = React39.useCallback(
+  const fitTo = React48.useCallback(
     (available) => update(
       (current) => {
         const shown = current.order.map((id) => byId.get(id)).filter((c) => Boolean(c) && !current.hidden.includes(c.id));
@@ -2613,8 +4027,8 @@ function merge(base, patch, fallback) {
 }
 function useRowSelection(options) {
   const { value, onChange, pageKeys } = options;
-  const anchor = React39.useRef(null);
-  const selected = React39.useMemo(() => new Set(value.keys), [value.keys]);
+  const anchor = React48.useRef(null);
+  const selected = React48.useMemo(() => new Set(value.keys), [value.keys]);
   const setKeys = (keys, allMatching = false) => onChange({ keys, allMatching });
   const toggle = (key, event) => {
     if (event?.shiftKey && anchor.current) {
@@ -2699,11 +4113,11 @@ function DataTable({
   className
 }) {
   const labels = resolveLabels(labelsProp);
-  const rootRef = React39.useRef(null);
-  const scrollerRef = React39.useRef(null);
-  const [scrolled, setScrolled] = React39.useState({ left: false, right: false });
-  const [expanded, setExpanded] = React39.useState(/* @__PURE__ */ new Set());
-  const [editing, setEditing] = React39.useState(null);
+  const rootRef = React48.useRef(null);
+  const scrollerRef = React48.useRef(null);
+  const [scrolled, setScrolled] = React48.useState({ left: false, right: false });
+  const [expanded, setExpanded] = React48.useState(/* @__PURE__ */ new Set());
+  const [editing, setEditing] = React48.useState(null);
   const {
     layout,
     visible,
@@ -2718,17 +4132,17 @@ function DataTable({
   } = useColumnLayout({ columns, persistKey, layout: controlledLayout, onLayoutChange });
   const resize = useColumnResize({ rootRef, widthOf, minWidthOf, onCommit: setWidth });
   const selectable = Boolean(selection && onSelectionChange);
-  const pageKeys = React39.useMemo(() => data.map(rowKey), [data, rowKey]);
+  const pageKeys = React48.useMemo(() => data.map(rowKey), [data, rowKey]);
   const rows = useRowSelection({
     value: selection ?? { keys: [], allMatching: false },
     onChange: onSelectionChange ?? (() => {
     }),
     pageKeys
   });
-  const recentFits = React39.useRef([]);
+  const recentFits = React48.useRef([]);
   const hiddenKey = layout.hidden.join("\0");
   const orderKey = layout.order.join("\0");
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller || !autoFit) return;
     const controls = (selectable ? SELECT_WIDTH : 0) + (renderExpanded ? EXPAND_WIDTH : 0);
@@ -2747,7 +4161,7 @@ function DataTable({
     observer.observe(scroller);
     return () => observer.disconnect();
   }, [autoFit, fitTo, selectable, renderExpanded, hiddenKey, orderKey]);
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
     const update = () => {
@@ -2767,12 +4181,12 @@ function DataTable({
       observer.disconnect();
     };
   }, [visible.length, data.length]);
-  const moreRef = React39.useRef(null);
-  const onLoadMoreRef = React39.useRef(onLoadMore);
-  React39.useEffect(() => {
+  const moreRef = React48.useRef(null);
+  const onLoadMoreRef = React48.useRef(onLoadMore);
+  React48.useEffect(() => {
     onLoadMoreRef.current = onLoadMore;
   });
-  const askedAt = React39.useRef(-1);
+  const askedAt = React48.useRef(-1);
   const canLoadMore = Boolean(onLoadMore) && (hasMore ?? (total === void 0 || data.length < total));
   const showLoadMore = canLoadMore && !error && data.length > 0;
   const showPager = pagination ?? !onLoadMore;
@@ -2781,7 +4195,7 @@ function DataTable({
     askedAt.current = data.length;
     onLoadMoreRef.current?.();
   };
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     const sentinel = moreRef.current;
     const scroller = scrollerRef.current;
     if (!sentinel || !scroller || !showLoadMore || !autoLoadMore || loading) return;
@@ -2795,7 +4209,7 @@ function DataTable({
     observer.observe(sentinel);
     return () => observer.disconnect();
   }, [showLoadMore, autoLoadMore, loading, data.length]);
-  const offsets = React39.useMemo(() => {
+  const offsets = React48.useMemo(() => {
     const result = /* @__PURE__ */ new Map();
     let leftParts = selectable ? [`${SELECT_WIDTH}px`] : [];
     if (renderExpanded) leftParts = [...leftParts, `${EXPAND_WIDTH}px`];
@@ -2812,7 +4226,7 @@ function DataTable({
     }
     return result;
   }, [visible, layout.pinned, widthOf, selectable, renderExpanded]);
-  const widthVars = React39.useMemo(() => {
+  const widthVars = React48.useMemo(() => {
     const style = {};
     for (const column of visible) {
       style[`--mz-dt-w-${cssSafe(column.id)}`] = `${widthOf(column.id)}px`;
@@ -2826,7 +4240,7 @@ function DataTable({
   const pinEdgeOf = (id) => id === lastLeftPinned ? "left" : id === firstRightPinned ? "right" : void 0;
   const controlPinEdge = leftPinned.length === 0 ? "left" : void 0;
   const chips = activeFilters(query.filters);
-  const columnById = React39.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
+  const columnById = React48.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
   const labelOf = (id) => {
     const column = columnById.get(id);
     return column?.label ?? (typeof column?.header === "string" ? column.header : id);
@@ -3053,7 +4467,7 @@ function DataTable({
                   const context = { rowIndex };
                   const hostClass = rowClassName?.(row, context);
                   const hostProps = rowProps?.(row, context);
-                  return /* @__PURE__ */ jsxs(React39.Fragment, { children: [
+                  return /* @__PURE__ */ jsxs(React48.Fragment, { children: [
                     /* @__PURE__ */ jsxs(
                       "tr",
                       {
@@ -3242,13 +4656,13 @@ function useTableQuery({
   urlKey = null,
   history = "replace"
 } = {}) {
-  const base = React39.useMemo(() => ({ ...emptyQuery, ...initial }), [initial]);
-  const [query, setQuery] = React39.useState(base);
-  React39.useEffect(() => {
+  const base = React48.useMemo(() => ({ ...emptyQuery, ...initial }), [initial]);
+  const [query, setQuery] = React48.useState(base);
+  React48.useEffect(() => {
     if (urlKey === null || typeof window === "undefined") return;
     setQuery(decode(urlKey, base));
   }, [urlKey]);
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     if (urlKey === null || typeof window === "undefined") return;
     const params = encode(query, urlKey);
     const search = params.toString();
@@ -3256,13 +4670,13 @@ function useTableQuery({
     if (next === `${window.location.pathname}${window.location.search}${window.location.hash}`) return;
     window.history[history === "push" ? "pushState" : "replaceState"](null, "", next);
   }, [query, urlKey, history]);
-  React39.useEffect(() => {
+  React48.useEffect(() => {
     if (urlKey === null || typeof window === "undefined") return;
     const onPop = () => setQuery(decode(urlKey, base));
     window.addEventListener("popstate", onPop);
     return () => window.removeEventListener("popstate", onPop);
   }, [urlKey, base]);
-  const reset = React39.useCallback(() => setQuery(base), [base]);
+  const reset = React48.useCallback(() => setQuery(base), [base]);
   return { query, setQuery, reset };
 }
 function useSavedViews({
@@ -3270,8 +4684,8 @@ function useSavedViews({
   views: controlled,
   onViewsChange
 } = {}) {
-  const [internal, setInternal] = React39.useState([]);
-  React39.useEffect(() => {
+  const [internal, setInternal] = React48.useState([]);
+  React48.useEffect(() => {
     if (!storageKey || typeof window === "undefined") return;
     try {
       const raw = window.localStorage.getItem(storageKey);
@@ -3280,7 +4694,7 @@ function useSavedViews({
     }
   }, [storageKey]);
   const views = controlled ?? internal;
-  const persist = React39.useCallback(
+  const persist = React48.useCallback(
     (next) => {
       setInternal(next);
       onViewsChange?.(next);
@@ -3299,6 +4713,6 @@ function useSavedViews({
   };
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColumnFilter, ColumnManager, DataTable, DataTablePagination, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldError, FieldHint, FilterChip, Input, Label, MorzeThemeProvider, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, activeFilters, badgeVariants, buttonVariants, cn, defaultDataTableLabels, emptyQuery, isFilterActive, pageCount, parseSort, resolveLabels, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegendContent, ChartStyle, ChartTooltipContent, Checkbox, ColumnFilter, ColumnManager, DataTable, DataTablePagination, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldError, FieldHint, FilterChip, Input, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MorzeThemeProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, activeFilters, badgeVariants, buttonVariants, cn, defaultDataTableLabels, dismiss, emptyQuery, isFilterActive, navigationMenuTriggerStyle, pageCount, parseSort, resolveLabels, serializeSort, setFilter, sortStateOf, toast, toggleSort, toggleVariants, useChart, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map