@morze/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,3161 @@
+"use client";
+import { clsx } from 'clsx';
+import * as React39 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';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+var ThemeContext = React39.createContext(null);
+function readStored(key) {
+  if (!key || typeof window === "undefined") return null;
+  try {
+    const stored = window.localStorage.getItem(key);
+    return stored === "dark" || stored === "light" || stored === "system" ? stored : null;
+  } catch {
+    return null;
+  }
+}
+function writeStored(key, theme) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, theme);
+  } catch {
+  }
+}
+function systemTheme() {
+  if (typeof window === "undefined" || !window.matchMedia) return "dark";
+  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+function MorzeThemeProvider({
+  children,
+  defaultTheme = "dark",
+  storageKey = "morze-ui-theme",
+  target = "html",
+  className
+}) {
+  const [theme, setThemeState] = React39.useState(defaultTheme);
+  const [resolved, setResolved] = React39.useState(
+    defaultTheme === "system" ? "dark" : defaultTheme
+  );
+  React39.useEffect(() => {
+    const stored = readStored(storageKey);
+    if (stored) setThemeState(stored);
+  }, [storageKey]);
+  React39.useEffect(() => {
+    if (theme !== "system") {
+      setResolved(theme);
+      return;
+    }
+    setResolved(systemTheme());
+    const mql = window.matchMedia("(prefers-color-scheme: light)");
+    const onChange = () => setResolved(systemTheme());
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [theme]);
+  React39.useEffect(() => {
+    if (target !== "html" || typeof document === "undefined") return;
+    document.documentElement.setAttribute("data-mz-theme", resolved);
+  }, [resolved, target]);
+  const setTheme = React39.useCallback(
+    (next) => {
+      setThemeState(next);
+      writeStored(storageKey, next);
+    },
+    [storageKey]
+  );
+  const value = React39.useMemo(
+    () => ({ theme, resolvedTheme: resolved, setTheme }),
+    [theme, resolved, setTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "morze-root",
+      "data-mz-theme": target === "element" ? resolved : void 0,
+      className: ["mz-root", className].filter(Boolean).join(" "),
+      children
+    }
+  ) });
+}
+function useMorzeTheme() {
+  const context = React39.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useMorzeTheme must be used inside <MorzeThemeProvider>");
+  }
+  return context;
+}
+function icon(path, extra) {
+  return function Icon(props) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        ...extra,
+        ...props,
+        children: path
+      }
+    );
+  };
+}
+var CheckIcon = icon(/* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }));
+var MinusIcon = icon(/* @__PURE__ */ jsx("path", { d: "M5 12h14" }));
+var XIcon = icon(/* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }));
+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 SpinnerIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", opacity: "0.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9" })
+  ] })
+);
+var ChevronLeftIcon = icon(/* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }));
+var ChevronsLeftIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "m11 17-5-5 5-5" }),
+    /* @__PURE__ */ jsx("path", { d: "m18 17-5-5 5-5" })
+  ] })
+);
+var ChevronsRightIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "m13 17 5-5-5-5" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 17 5-5-5-5" })
+  ] })
+);
+var ArrowUpIcon = icon(/* @__PURE__ */ jsx("path", { d: "M12 19V5m-7 7 7-7 7 7" }));
+var ArrowDownIcon = icon(/* @__PURE__ */ jsx("path", { d: "M12 5v14m7-7-7 7-7-7" }));
+var SortIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "m7 15 3 3 3-3", opacity: "0.9" }),
+    /* @__PURE__ */ jsx("path", { d: "m7 9 3-3 3 3", opacity: "0.9" })
+  ] })
+);
+var FilterIcon = icon(/* @__PURE__ */ jsx("path", { d: "M4 5h16l-6.5 7.5V19l-3 2v-8.5L4 5Z" }));
+var ColumnsIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 4v16M15 4v16" })
+  ] })
+);
+var GripIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "1.4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1.4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "17", r: "1.4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "7", r: "1.4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1.4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "17", r: "1.4", fill: "currentColor" })
+  ] })
+);
+var PinIcon = icon(/* @__PURE__ */ jsx("path", { d: "M15 3 21 9l-4 1-4 4-1 5-6-6 5-1 4-4 1-4Z" }));
+var EyeIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] })
+);
+var EyeOffIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10.6 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3 3.9M6.2 6.2A17 17 0 0 0 2 12s3.5 7 10 7c1.9 0 3.5-.6 4.9-1.4" }),
+    /* @__PURE__ */ jsx("path", { d: "m3 3 18 18" })
+  ] })
+);
+var InboxIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12h5l2 3h4l2-3h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M5.5 5h13l2.5 7v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5l2.5-7Z" })
+  ] })
+);
+var AlertIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.3 3.9 2.6 17a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" })
+  ] })
+);
+var buttonVariants = cva("mz-btn mz-focusable", {
+  variants: {
+    variant: {
+      primary: "mz-btn--primary",
+      secondary: "mz-btn--secondary",
+      outline: "mz-btn--outline",
+      ghost: "mz-btn--ghost",
+      destructive: "mz-btn--destructive",
+      link: "mz-btn--link"
+    },
+    size: {
+      xs: "mz-btn--xs",
+      sm: "mz-btn--sm",
+      md: "mz-btn--md",
+      lg: "mz-btn--lg",
+      "icon-xs": "mz-btn--icon-xs",
+      "icon-sm": "mz-btn--icon-sm",
+      icon: "mz-btn--icon",
+      "icon-lg": "mz-btn--icon-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+function Button({
+  className,
+  variant = "primary",
+  size = "md",
+  asChild = false,
+  tone,
+  loading = false,
+  dot = false,
+  disabled,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  const isDisabled = disabled || loading;
+  const decorate = (label) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    dot ? /* @__PURE__ */ jsx("span", { className: "mz-btn__dot", "aria-hidden": "true" }) : null,
+    label,
+    loading ? /* @__PURE__ */ jsx("span", { className: "mz-btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SpinnerIcon, {}) }) : null
+  ] });
+  let content;
+  if (asChild) {
+    const child = React39.Children.only(children);
+    content = React39.cloneElement(child, void 0, decorate(child.props.children));
+  } else {
+    content = decorate(children);
+  }
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      "data-tone": tone,
+      "data-loading": loading || void 0,
+      className: cn(buttonVariants({ variant, size }), className),
+      disabled: asChild ? void 0 : isDisabled,
+      "aria-disabled": asChild && isDisabled ? true : void 0,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: content
+    }
+  );
+}
+var badgeVariants = cva("mz-badge", {
+  variants: {
+    variant: {
+      solid: "mz-badge--solid",
+      soft: "mz-badge--soft",
+      outline: "mz-badge--outline"
+    }
+  },
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+function Badge({
+  className,
+  variant = "solid",
+  tone,
+  dot = false,
+  asChild = false,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      "data-tone": tone,
+      className: cn(badgeVariants({ variant }), className),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        dot ? /* @__PURE__ */ jsx("span", { className: "mz-badge__dot", "aria-hidden": "true" }) : null,
+        children
+      ] })
+    }
+  );
+}
+var toggleVariants = cva("mz-toggle", {
+  variants: {
+    variant: {
+      default: "",
+      outline: "mz-toggle--outline"
+    },
+    size: {
+      sm: "mz-toggle--sm",
+      md: "mz-toggle--md",
+      lg: "mz-toggle--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+function Toggle({
+  className,
+  variant = "default",
+  size = "md",
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toggle$1.Root,
+    {
+      "data-slot": "toggle",
+      "data-variant": variant,
+      "data-size": size,
+      "data-tone": tone,
+      className: cn(toggleVariants({ variant, size }), "mz-focusable", className),
+      ...props
+    }
+  );
+}
+var ToggleGroupContext = React39.createContext({
+  size: "md",
+  variant: "default"
+});
+function ToggleGroup({
+  className,
+  variant = "default",
+  size = "md",
+  tone,
+  appearance = "segmented",
+  style,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroup$1.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-tone": tone,
+      "data-appearance": appearance,
+      className: cn(
+        "mz-toggle-group",
+        appearance === "segmented" && "mz-toggle-group--segmented",
+        appearance === "joined" && "mz-toggle-group--joined",
+        className
+      ),
+      style: appearance === "spaced" ? { "--mz-toggle-group-gap": "8px", ...style } : style,
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size, tone }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React39.useContext(ToggleGroupContext);
+  const resolvedVariant = variant ?? context.variant;
+  const resolvedSize = size ?? context.size;
+  return /* @__PURE__ */ jsx(
+    ToggleGroup$1.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": resolvedVariant,
+      "data-size": resolvedSize,
+      "data-tone": context.tone,
+      className: cn(
+        toggleVariants({ variant: resolvedVariant, size: resolvedSize }),
+        "mz-focusable",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function Checkbox({ className, size = "md", tone, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Checkbox$1.Root,
+    {
+      "data-slot": "checkbox",
+      "data-size": size,
+      "data-tone": tone,
+      className: cn(
+        "mz-checkbox mz-focusable",
+        size === "sm" && "mz-checkbox--sm",
+        size === "lg" && "mz-checkbox--lg",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, { "data-slot": "checkbox-indicator", className: "mz-checkbox__indicator", children: [
+        /* @__PURE__ */ jsx(CheckIcon, { className: "mz-checkbox__check" }),
+        /* @__PURE__ */ jsx(MinusIcon, { className: "mz-checkbox__dash" })
+      ] })
+    }
+  );
+}
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("mz-radio-group", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1.Item,
+    {
+      "data-slot": "radio-group-item",
+      "data-tone": tone,
+      className: cn("mz-radio mz-focusable", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadioGroup$1.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "mz-radio__indicator"
+        }
+      )
+    }
+  );
+}
+function Switch({ className, size = "md", tone, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Switch$1.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      "data-tone": tone,
+      className: cn(
+        "mz-switch mz-focusable",
+        size === "sm" && "mz-switch--sm",
+        size === "lg" && "mz-switch--lg",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Switch$1.Thumb, { "data-slot": "switch-thumb", className: "mz-switch__thumb" })
+    }
+  );
+}
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  tone,
+  ...props
+}) {
+  const values = React39.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min],
+    [value, defaultValue, min]
+  );
+  return /* @__PURE__ */ jsxs(
+    Slider$1.Root,
+    {
+      "data-slot": "slider",
+      "data-tone": tone,
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn("mz-slider", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Slider$1.Track, { "data-slot": "slider-track", className: "mz-slider__track", children: /* @__PURE__ */ jsx(Slider$1.Range, { "data-slot": "slider-range", className: "mz-slider__range" }) }),
+        Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ jsx(
+          Slider$1.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "mz-slider__thumb mz-focusable"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+function Input({ className, type, inputSize = "md", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      "data-size": inputSize,
+      className: cn(
+        "mz-input",
+        inputSize === "sm" && "mz-input--sm",
+        inputSize === "lg" && "mz-input--lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx("textarea", { "data-slot": "textarea", className: cn("mz-textarea", className), ...props });
+}
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Label$1.Root, { "data-slot": "label", className: cn("mz-label", className), ...props });
+}
+function Field({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "field", className: cn("mz-field", className), ...props });
+}
+function FieldHint({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { "data-slot": "field-hint", className: cn("mz-field__hint", className), ...props });
+}
+function FieldError({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "field-error",
+      role: "alert",
+      className: cn("mz-field__error", className),
+      ...props
+    }
+  );
+}
+function Select({ ...props }) {
+  return /* @__PURE__ */ jsx(Select$1.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(Select$1.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+  return /* @__PURE__ */ jsx(Select$1.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "md",
+  tone,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      "data-tone": tone,
+      className: cn(
+        "mz-select-trigger mz-focusable",
+        size === "sm" && "mz-select-trigger--sm",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "mz-select-trigger__icon" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Select$1.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "mz-panel mz-select-content",
+        position === "popper" && "mz-select-content--popper",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          Select$1.Viewport,
+          {
+            className: cn(
+              "mz-select-viewport",
+              position === "popper" && "mz-select-viewport--popper"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Label,
+    {
+      "data-slot": "select-label",
+      className: cn("mz-menu-label", className),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Select$1.Item, { "data-slot": "select-item", className: cn("mz-item", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
+    /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+  ] });
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("mz-menu-separator", className),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn("mz-select-scroll-button", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { width: 16, height: 16 })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn("mz-select-scroll-button", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { width: 16, height: 16 })
+    }
+  );
+}
+function Tabs({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Tabs$1.Root, { "data-slot": "tabs", className: cn("mz-tabs", className), ...props });
+}
+function TabsList({
+  className,
+  variant = "default",
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      "data-tone": tone,
+      className: cn("mz-tabs-list", variant === "line" && "mz-tabs-list--line", className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn("mz-tabs-trigger mz-focusable", className),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("mz-tabs-content", className),
+      ...props
+    }
+  );
+}
+function Card({
+  className,
+  interactive = false,
+  onClick,
+  onKeyDown,
+  ...props
+}) {
+  const clickable = interactive && Boolean(onClick);
+  const handleKeyDown = clickable ? (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  } : onKeyDown;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      role: clickable ? "button" : void 0,
+      tabIndex: clickable ? 0 : void 0,
+      className: cn(
+        "mz-card",
+        interactive && "mz-card--interactive",
+        clickable && "mz-focusable",
+        className
+      ),
+      onClick,
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-header", className: cn("mz-card-header", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-title", className: cn("mz-card-title", className), ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-description", className: cn("mz-card-description", className), ...props });
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-action", className: cn("mz-card-action", className), ...props });
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-content", className: cn("mz-card-content", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-footer", className: cn("mz-card-footer", className), ...props });
+}
+function Alert({
+  className,
+  tone = "primary",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      "data-tone": tone,
+      role: "alert",
+      className: cn("mz-alert", className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "alert-title", className: cn("mz-alert-title", className), ...props });
+}
+function AlertDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn("mz-alert-description", className),
+      ...props
+    }
+  );
+}
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Root,
+    {
+      "data-slot": "accordion",
+      className: cn("mz-accordion", className),
+      ...props
+    }
+  );
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("mz-accordion-item", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "mz-accordion-header", children: /* @__PURE__ */ jsxs(
+    Accordion$1.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn("mz-accordion-trigger mz-focusable", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("span", { className: "mz-accordion-trigger__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Content,
+    {
+      "data-slot": "accordion-content",
+      className: cn("mz-accordion-content", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "mz-accordion-content__inner", children })
+    }
+  );
+}
+function Progress({
+  className,
+  value,
+  max = 100,
+  tone,
+  ...props
+}) {
+  const percent = max > 0 ? Math.min(Math.max(value ?? 0, 0), max) / max * 100 : 0;
+  return /* @__PURE__ */ jsx(
+    Progress$1.Root,
+    {
+      "data-slot": "progress",
+      "data-tone": tone,
+      value,
+      max,
+      className: cn("mz-progress", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Progress$1.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "mz-progress__indicator",
+          style: { transform: `translateX(-${100 - percent}%)` }
+        }
+      )
+    }
+  );
+}
+function Avatar({
+  className,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "mz-avatar",
+        size === "sm" && "mz-avatar--sm",
+        size === "lg" && "mz-avatar--lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("mz-avatar__image", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn("mz-avatar__fallback", className),
+      ...props
+    }
+  );
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator$1.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn("mz-separator", className),
+      ...props
+    }
+  );
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "skeleton", className: cn("mz-skeleton", className), ...props });
+}
+function Spinner({ className, label = "Loading", children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "spinner",
+      role: label === null ? void 0 : "status",
+      "aria-hidden": label === null ? true : void 0,
+      className: cn("mz-spinner", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SpinnerIcon, {}),
+        label === null ? null : /* @__PURE__ */ jsx("span", { className: "mz-sr-only", children: label }),
+        children
+      ]
+    }
+  );
+}
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn("mz-dialog-overlay", className),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  closeLabel = "Close",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn("mz-panel mz-dialog-content", className),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsxs(Dialog$1.Close, { "data-slot": "dialog-close", className: "mz-dialog-close mz-focusable", children: [
+            /* @__PURE__ */ jsx(XIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "mz-sr-only", children: closeLabel })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "dialog-header", className: cn("mz-dialog-header", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "dialog-footer", className: cn("mz-dialog-footer", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("mz-dialog-title", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("mz-dialog-description", className),
+      ...props
+    }
+  );
+}
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 6,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn("mz-panel mz-popover-content", className),
+      ...props
+    }
+  ) });
+}
+function PopoverHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "popover-header", className: cn("mz-popover-header", className), ...props });
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("h2", { "data-slot": "popover-title", className: cn("mz-popover-title", className), ...props });
+}
+function PopoverDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "popover-description",
+      className: cn("mz-popover-description", 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({
+  ...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
+    }
+  );
+}
+var TooltipProviderPresence = React39.createContext(false);
+function TooltipProvider({
+  delayDuration = 200,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProviderPresence.Provider, { value: true, children: /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props,
+      children
+    }
+  ) });
+}
+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 TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 6,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn("mz-tooltip-content", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "mz-tooltip-arrow", width: 10, height: 5 })
+      ]
+    }
+  ) });
+}
+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("mz-dialog-overlay", className),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  closeLabel = "Close",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn("mz-sheet", className),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsxs(Dialog$1.Close, { "data-slot": "sheet-close", className: "mz-dialog-close mz-focusable", children: [
+            /* @__PURE__ */ jsx(XIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "mz-sr-only", children: closeLabel })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sheet-header", className: cn("mz-sheet__header", className), ...props });
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sheet-footer", className: cn("mz-sheet__footer", className), ...props });
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("mz-dialog-title", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("mz-dialog-description", className),
+      ...props
+    }
+  );
+}
+function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = React39.useState(false);
+  React39.useEffect(() => {
+    const query = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const update = () => setIsMobile(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, [breakpoint]);
+  return isMobile;
+}
+var STORAGE_KEY = "morze-ui-sidebar";
+var SHORTCUT = "b";
+var SidebarContext = React39.createContext(null);
+function useSidebar() {
+  const context = React39.useContext(SidebarContext);
+  if (!context) throw new Error("useSidebar must be used inside <SidebarProvider>");
+  return context;
+}
+function readStored2(key) {
+  if (!key || typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw === null ? null : raw === "true";
+  } catch {
+    return null;
+  }
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  storageKey = STORAGE_KEY,
+  mobileBreakpoint = 768,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile(mobileBreakpoint);
+  const [openMobile, setOpenMobile] = React39.useState(false);
+  const [internalOpen, setInternalOpen] = React39.useState(defaultOpen);
+  React39.useEffect(() => {
+    const stored = readStored2(storageKey);
+    if (stored !== null) setInternalOpen(stored);
+  }, [storageKey]);
+  const open = openProp ?? internalOpen;
+  const setOpen = React39.useCallback(
+    (next) => {
+      if (openProp === void 0) setInternalOpen(next);
+      onOpenChange?.(next);
+      if (!storageKey || typeof window === "undefined") return;
+      try {
+        window.localStorage.setItem(storageKey, String(next));
+      } catch {
+      }
+    },
+    [openProp, onOpenChange, storageKey]
+  );
+  const toggleSidebar = React39.useCallback(() => {
+    if (isMobile) setOpenMobile((current) => !current);
+    else setOpen(!open);
+  }, [isMobile, open, setOpen]);
+  React39.useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key.toLowerCase() !== SHORTCUT || !(event.metaKey || event.ctrlKey)) return;
+      event.preventDefault();
+      toggleSidebar();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [toggleSidebar]);
+  const value = React39.useMemo(
+    () => ({
+      state: open ? "expanded" : "collapsed",
+      open,
+      setOpen,
+      openMobile,
+      setOpenMobile,
+      isMobile,
+      toggleSidebar
+    }),
+    [open, setOpen, openMobile, isMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      "data-state": value.state,
+      className: cn("mz-sidebar-layout", className),
+      style,
+      ...props,
+      children
+    }
+  ) });
+}
+function Sidebar({
+  side = "left",
+  variant = "inset",
+  collapsible = "icon",
+  mobileTitle = "Navigation",
+  mobileDescription = "Application sections",
+  className,
+  children,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (isMobile && collapsible !== "none") {
+    return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        side,
+        showCloseButton: false,
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        className: cn("mz-sidebar--mobile", className),
+        children: [
+          /* @__PURE__ */ jsxs(SheetHeader, { className: "mz-sr-only", children: [
+            /* @__PURE__ */ jsx(SheetTitle, { children: mobileTitle }),
+            /* @__PURE__ */ jsx(SheetDescription, { children: mobileDescription })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mz-sidebar__inner", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar",
+      "data-state": state,
+      "data-side": side,
+      "data-variant": variant,
+      "data-collapsible": collapsible === "none" ? void 0 : collapsible,
+      className: cn("mz-sidebar", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "mz-sidebar__inner", children })
+    }
+  );
+}
+function SidebarTrigger({
+  className,
+  onClick,
+  label = "Toggle sidebar",
+  ...props
+}) {
+  const { toggleSidebar, state } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "sidebar-trigger",
+      "data-state": state,
+      "aria-label": label,
+      title: label,
+      className: cn("mz-sidebar__trigger mz-focusable", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggleSidebar();
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+    }
+  );
+}
+function SidebarRail({
+  className,
+  label = "Toggle sidebar",
+  ...props
+}) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "sidebar-rail",
+      "aria-label": label,
+      tabIndex: -1,
+      className: cn("mz-sidebar__rail", className),
+      onClick: toggleSidebar,
+      ...props
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx("main", { "data-slot": "sidebar-inset", className: cn("mz-sidebar-inset", className), ...props });
+}
+function SidebarPanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sidebar-panel", className: cn("mz-sidebar-panel", className), ...props });
+}
+function SidebarInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Input, { "data-slot": "sidebar-input", inputSize: "sm", className: cn("mz-sidebar__input", className), ...props });
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sidebar-header", className: cn("mz-sidebar__header", className), ...props });
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sidebar-footer", className: cn("mz-sidebar__footer", className), ...props });
+}
+function SidebarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "sidebar-separator",
+      className: cn("mz-sidebar__separator", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sidebar-content", className: cn("mz-sidebar__content", className), ...props });
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sidebar-group", className: cn("mz-sidebar__group", className), ...props });
+}
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "sidebar-group-label", className: cn("mz-sidebar__group-label", className), ...props });
+}
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-action",
+      className: cn("mz-sidebar__group-action mz-focusable", className),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sidebar-group-content", className: cn("mz-sidebar__group-content", className), ...props });
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { "data-slot": "sidebar-menu", className: cn("mz-sidebar__menu", className), ...props });
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "sidebar-menu-item", className: cn("mz-sidebar__menu-item", className), ...props });
+}
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  size = "md",
+  tooltip,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  const { isMobile, state } = useSidebar();
+  const button = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-size": size,
+      "data-active": isActive || void 0,
+      className: cn("mz-sidebar__menu-button mz-focusable", className),
+      ...props
+    }
+  );
+  if (!tooltip || state !== "collapsed" || isMobile) return button;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", children: 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-hover-only": showOnHover || void 0,
+      className: cn("mz-sidebar__menu-action mz-focusable", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "sidebar-menu-badge", className: cn("mz-sidebar__menu-badge", className), ...props });
+}
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const width = React39.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-menu-skeleton",
+      className: cn("mz-sidebar__menu-skeleton", className),
+      ...props,
+      children: [
+        showIcon ? /* @__PURE__ */ jsx(Skeleton, { className: "mz-sidebar__menu-skeleton-icon" }) : null,
+        /* @__PURE__ */ jsx(Skeleton, { className: "mz-sidebar__menu-skeleton-text", style: { width } })
+      ]
+    }
+  );
+}
+function SidebarMenuSub({ className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { "data-slot": "sidebar-menu-sub", className: cn("mz-sidebar__menu-sub", className), ...props });
+}
+function SidebarMenuSubItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "sidebar-menu-sub-item", className: cn("mz-sidebar__menu-sub-item", className), ...props });
+}
+function SidebarMenuSubButton({
+  asChild = false,
+  isActive = false,
+  size = "md",
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-sub-button",
+      "data-size": size,
+      "data-active": isActive || void 0,
+      className: cn("mz-sidebar__menu-sub-button mz-focusable", className),
+      ...props
+    }
+  );
+}
+function CellEditor({
+  row,
+  def,
+  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 commit = async () => {
+    if (value === initial) return onDone();
+    setSaving(true);
+    try {
+      await def.onSave(row, value);
+      onDone();
+    } catch (cause) {
+      setValue(initial);
+      setError(cause instanceof Error ? cause.message : "Could not save");
+      setSaving(false);
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      void commit();
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onDone();
+    }
+  };
+  if (def.type === "select") {
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        open: true,
+        value,
+        onValueChange: async (next) => {
+          setValue(next);
+          setSaving(true);
+          try {
+            await def.onSave(row, next);
+            onDone();
+          } catch {
+            setValue(initial);
+            setSaving(false);
+          }
+        },
+        onOpenChange: (open) => !open && onDone(),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "mz-dt__editor", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: (def.options ?? []).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      autoFocus: true,
+      inputSize: "sm",
+      type: def.type === "number" ? "number" : "text",
+      className: "mz-dt__editor",
+      value,
+      disabled: saving,
+      "aria-invalid": error ? true : void 0,
+      title: error ?? void 0,
+      onChange: (event) => setValue(event.target.value),
+      onKeyDown,
+      onBlur: () => void commit()
+    }
+  );
+}
+
+// src/components/data-table/labels.ts
+var defaultDataTableLabels = {
+  filter: "Filter",
+  filterFor: (column) => `Filter: ${column}`,
+  filterActive: "active",
+  contains: "Contains\u2026",
+  apply: "Apply",
+  reset: "Reset",
+  resetAll: "Reset all",
+  resetFilters: "Reset filters",
+  clearFilter: "Clear filter",
+  rangeFrom: "from",
+  rangeTo: "to",
+  dateFrom: "From",
+  dateTo: "To",
+  yes: "Yes",
+  no: "No",
+  columns: "Columns",
+  moveUp: (column) => `Move \u201C${column}\u201D up`,
+  moveDown: (column) => `Move \u201C${column}\u201D down`,
+  pinning: (column, side) => `Pinning for \u201C${column}\u201D: ${side}`,
+  pinnedLeft: "Left",
+  pinnedRight: "Right",
+  notPinned: "Not pinned",
+  show: (column) => `Show \u201C${column}\u201D`,
+  hide: (column) => `Hide \u201C${column}\u201D`,
+  sortBy: (column) => `Sort by \u201C${column}\u201D (Shift to add to the sort)`,
+  columnWidth: (column) => `Width of column \u201C${column}\u201D`,
+  selectPage: "Select page",
+  selectRow: "Select row",
+  expandRow: "Expand",
+  collapseRow: "Collapse",
+  details: "Details",
+  empty: "Nothing found",
+  retry: "Retry",
+  rowsPerPage: "Rows per page",
+  nothingFound: "Nothing found",
+  of: "of",
+  firstPage: "First page",
+  previousPage: "Previous page",
+  nextPage: "Next page",
+  lastPage: "Last page",
+  selectedCount: (count) => `Selected: ${count}`,
+  allMatchingSuffix: " (all matching)",
+  selectAllMatching: (total) => `Select all ${total}`,
+  clearSelection: "Clear selection",
+  bulkActions: "Actions for the selected rows"
+};
+function resolveLabels(labels) {
+  return labels ? { ...defaultDataTableLabels, ...labels } : defaultDataTableLabels;
+}
+
+// src/components/data-table/utils.ts
+function isFilterActive(value) {
+  if (!value) return false;
+  switch (value.type) {
+    case "text":
+      return value.value.trim().length > 0;
+    case "select":
+      return value.value.length > 0;
+    case "number-range":
+      return value.min !== void 0 || value.max !== void 0;
+    case "date-range":
+      return Boolean(value.from || value.to);
+    case "boolean":
+      return true;
+  }
+}
+function activeFilters(filters) {
+  return Object.entries(filters).filter(([, value]) => isFilterActive(value));
+}
+function setFilter(query, id, value) {
+  const filters = { ...query.filters };
+  if (isFilterActive(value)) filters[id] = value;
+  else delete filters[id];
+  return { ...query, filters, page: 1 };
+}
+function toggleSort(query, id, additive = false) {
+  const existing = query.sort.find((s) => s.id === id);
+  const next = additive ? query.sort.filter((s) => s.id !== id) : [];
+  if (!existing) next.push({ id, dir: "asc" });
+  else if (existing.dir === "asc") next.push({ id, dir: "desc" });
+  return { ...query, sort: next, page: 1 };
+}
+function sortStateOf(query, id) {
+  const index = query.sort.findIndex((s) => s.id === id);
+  if (index < 0) return { dir: void 0, index: void 0 };
+  return { dir: query.sort[index].dir, index: query.sort.length > 1 ? index + 1 : void 0 };
+}
+function pageCount(total, pageSize) {
+  if (!total || pageSize <= 0) return 1;
+  return Math.max(1, Math.ceil(total / pageSize));
+}
+function serializeSort(sort) {
+  return sort.map((s) => s.dir === "desc" ? `-${s.id}` : s.id).join(",");
+}
+function parseSort(raw) {
+  if (!raw) return [];
+  return raw.split(",").filter(Boolean).map(
+    (token) => token.startsWith("-") ? { id: token.slice(1), dir: "desc" } : { id: token, dir: "asc" }
+  );
+}
+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(() => {
+    if (open) setDraft(value);
+  }, [open, value]);
+  const active = isFilterActive(value);
+  const commit = (next) => {
+    onApply(isFilterActive(next) ? next : void 0);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "data-table-filter-trigger",
+        "data-active": active || void 0,
+        className: "mz-dt__filter mz-focusable",
+        "aria-label": `${labels.filterFor(columnLabel)}${active ? ` (${labels.filterActive})` : ""}`,
+        title: labels.filterFor(columnLabel),
+        children: /* @__PURE__ */ jsx(FilterIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "mz-dt__filter-panel", children: [
+      /* @__PURE__ */ jsx("div", { className: "mz-dt__filter-head", children: columnLabel }),
+      /* @__PURE__ */ jsx(
+        FilterBody,
+        {
+          def,
+          draft,
+          setDraft,
+          labels,
+          onSubmit: () => commit(draft)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mz-dt__filter-actions", children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => commit(void 0), children: labels.reset }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => commit(draft), children: labels.apply })
+      ] })
+    ] })
+  ] });
+}
+function FilterBody({
+  def,
+  draft,
+  setDraft,
+  labels,
+  onSubmit
+}) {
+  const submitOnEnter = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onSubmit();
+    }
+  };
+  if (def.type === "text") {
+    const current2 = draft?.type === "text" ? draft.value : "";
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        autoFocus: true,
+        inputSize: "sm",
+        placeholder: def.placeholder ?? labels.contains,
+        value: current2,
+        onKeyDown: submitOnEnter,
+        onChange: (e) => setDraft({ type: "text", value: e.target.value })
+      }
+    );
+  }
+  if (def.type === "select") {
+    const current2 = draft?.type === "select" ? draft.value : [];
+    const toggle = (option) => {
+      if (def.multiple === false) {
+        setDraft({ type: "select", value: current2.includes(option) ? [] : [option] });
+        return;
+      }
+      setDraft({
+        type: "select",
+        value: current2.includes(option) ? current2.filter((v) => v !== option) : [...current2, option]
+      });
+    };
+    return /* @__PURE__ */ jsx("div", { className: "mz-dt__filter-options", role: "group", children: def.options.map((option) => /* @__PURE__ */ jsxs("label", { className: "mz-dt__filter-option", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "sm",
+          checked: current2.includes(option.value),
+          onCheckedChange: () => toggle(option.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: option.label })
+    ] }, option.value)) });
+  }
+  if (def.type === "number-range") {
+    const current2 = draft?.type === "number-range" ? draft : { };
+    const patch = (part) => setDraft({ type: "number-range", min: current2.min, max: current2.max, ...part });
+    return /* @__PURE__ */ jsxs("div", { className: "mz-dt__filter-range", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          inputSize: "sm",
+          type: "number",
+          step: def.step,
+          placeholder: labels.rangeFrom,
+          value: current2.min ?? "",
+          onKeyDown: submitOnEnter,
+          onChange: (e) => patch({ min: e.target.value === "" ? void 0 : Number(e.target.value) })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "mz-dt__filter-dash", children: "\u2014" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          inputSize: "sm",
+          type: "number",
+          step: def.step,
+          placeholder: labels.rangeTo,
+          value: current2.max ?? "",
+          onKeyDown: submitOnEnter,
+          onChange: (e) => patch({ max: e.target.value === "" ? void 0 : Number(e.target.value) })
+        }
+      )
+    ] });
+  }
+  if (def.type === "date-range") {
+    const current2 = draft?.type === "date-range" ? draft : { };
+    const patch = (part) => setDraft({ type: "date-range", from: current2.from, to: current2.to, ...part });
+    return /* @__PURE__ */ jsxs("div", { className: "mz-dt__filter-range mz-dt__filter-range--stacked", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "mz-dt-from", children: labels.dateFrom }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "mz-dt-from",
+          inputSize: "sm",
+          type: "date",
+          value: current2.from ?? "",
+          onKeyDown: submitOnEnter,
+          onChange: (e) => patch({ from: e.target.value || void 0 })
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "mz-dt-to", children: labels.dateTo }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "mz-dt-to",
+          inputSize: "sm",
+          type: "date",
+          value: current2.to ?? "",
+          onKeyDown: submitOnEnter,
+          onChange: (e) => patch({ to: e.target.value || void 0 })
+        }
+      )
+    ] });
+  }
+  const current = draft?.type === "boolean" ? draft.value : void 0;
+  return /* @__PURE__ */ jsx("div", { className: "mz-dt__filter-options", role: "radiogroup", children: [
+    { value: true, label: def.trueLabel ?? labels.yes },
+    { value: false, label: def.falseLabel ?? labels.no }
+  ].map((option) => /* @__PURE__ */ jsxs("label", { className: "mz-dt__filter-option", children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        size: "sm",
+        checked: current === option.value,
+        onCheckedChange: (checked) => setDraft(checked ? { type: "boolean", value: option.value } : void 0)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: option.label })
+  ] }, String(option.value))) });
+}
+function FilterChip({
+  label,
+  onClear,
+  clearLabel = defaultDataTableLabels.clearFilter,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("mz-dt__chip", className), children: [
+    label,
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: onClear, "aria-label": clearLabel, className: "mz-focusable", children: "\xD7" })
+  ] });
+}
+function ColumnManager({
+  columns,
+  layout,
+  onToggleHidden,
+  onSetPinned,
+  onMove,
+  onMoveTo,
+  onReset,
+  labels: labelsProp
+}) {
+  const labels = resolveLabels(labelsProp);
+  const [dragging, setDragging] = React39.useState(null);
+  const byId = React39.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
+  const ordered = layout.order.map((id) => byId.get(id)).filter((c) => Boolean(c));
+  const hiddenCount = layout.hidden.length;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", children: [
+      /* @__PURE__ */ jsx(ColumnsIcon, {}),
+      labels.columns,
+      hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: "mz-dt__count", children: ordered.length - hiddenCount }) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "mz-dt__columns", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mz-dt__columns-head", children: [
+        /* @__PURE__ */ jsx("span", { children: labels.columns }),
+        /* @__PURE__ */ jsx(Button, { variant: "link", size: "xs", onClick: onReset, children: labels.reset })
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx("ul", { className: "mz-dt__columns-list", children: ordered.map((column, index) => {
+        const hidden = layout.hidden.includes(column.id);
+        const pinned = layout.pinned[column.id];
+        const label = column.label ?? (typeof column.header === "string" ? column.header : column.id);
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "mz-dt__columns-item",
+            "data-dragging": dragging === column.id || void 0,
+            draggable: true,
+            onDragStart: () => setDragging(column.id),
+            onDragEnd: () => setDragging(null),
+            onDragOver: (event) => event.preventDefault(),
+            onDrop: () => {
+              if (dragging && dragging !== column.id) onMoveTo(dragging, column.id);
+              setDragging(null);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "mz-dt__columns-grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GripIcon, {}) }),
+              /* @__PURE__ */ jsx("span", { className: "mz-dt__columns-label", children: label }),
+              /* @__PURE__ */ jsxs("div", { className: "mz-dt__columns-controls", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "mz-dt__icon-btn mz-focusable",
+                    disabled: index === 0,
+                    onClick: () => onMove(column.id, -1),
+                    "aria-label": labels.moveUp(label),
+                    children: "\u2191"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "mz-dt__icon-btn mz-focusable",
+                    disabled: index === ordered.length - 1,
+                    onClick: () => onMove(column.id, 1),
+                    "aria-label": labels.moveDown(label),
+                    children: "\u2193"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "mz-dt__icon-btn mz-focusable",
+                    "data-active": pinned ? true : void 0,
+                    onClick: () => onSetPinned(column.id, pinned === "left" ? "right" : pinned === "right" ? void 0 : "left"),
+                    "aria-label": labels.pinning(
+                      label,
+                      pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned
+                    ),
+                    title: pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned,
+                    children: /* @__PURE__ */ jsx(PinIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "mz-dt__icon-btn mz-focusable",
+                    disabled: column.hideable === false,
+                    onClick: () => onToggleHidden(column.id),
+                    "aria-label": hidden ? labels.show(label) : labels.hide(label),
+                    children: hidden ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+                  }
+                )
+              ] })
+            ]
+          },
+          column.id
+        );
+      }) })
+    ] })
+  ] });
+}
+function DataTablePagination({
+  query,
+  total,
+  rowsOnPage,
+  pageSizeOptions = [10, 25, 50, 100],
+  labels: labelsProp,
+  locale,
+  onQueryChange
+}) {
+  const labels = resolveLabels(labelsProp);
+  const pages = pageCount(total, query.pageSize);
+  const from = total === 0 ? 0 : (query.page - 1) * query.pageSize + 1;
+  const to = total === void 0 ? from + rowsOnPage - 1 : Math.min(query.page * query.pageSize, total);
+  const go = (page) => onQueryChange({ ...query, page: Math.min(Math.max(page, 1), pages) });
+  return /* @__PURE__ */ jsxs("div", { className: "mz-dt__pagination", "data-slot": "data-table-pagination", children: [
+    /* @__PURE__ */ jsx("div", { className: "mz-dt__pagination-info", children: total === 0 ? labels.nothingFound : /* @__PURE__ */ jsxs(Fragment, { children: [
+      from,
+      "\u2013",
+      to,
+      total !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        labels.of,
+        " ",
+        total.toLocaleString(locale)
+      ] }) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mz-dt__pagination-size", children: [
+      /* @__PURE__ */ jsx("span", { children: labels.rowsPerPage }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: String(query.pageSize),
+          onValueChange: (value) => onQueryChange({ ...query, pageSize: Number(value), page: 1 }),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "mz-dt__pagination-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mz-dt__pagination-nav", children: [
+      /* @__PURE__ */ jsxs("span", { className: "mz-dt__pagination-page", children: [
+        query.page,
+        " / ",
+        pages
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          size: "icon-sm",
+          disabled: query.page <= 1,
+          onClick: () => go(1),
+          "aria-label": labels.firstPage,
+          children: /* @__PURE__ */ jsx(ChevronsLeftIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          size: "icon-sm",
+          disabled: query.page <= 1,
+          onClick: () => go(query.page - 1),
+          "aria-label": labels.previousPage,
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          size: "icon-sm",
+          disabled: query.page >= pages,
+          onClick: () => go(query.page + 1),
+          "aria-label": labels.nextPage,
+          children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          size: "icon-sm",
+          disabled: query.page >= pages,
+          onClick: () => go(pages),
+          "aria-label": labels.lastPage,
+          children: /* @__PURE__ */ jsx(ChevronsRightIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+function useColumnResize(options) {
+  const { rootRef, widthOf, minWidthOf, onCommit } = options;
+  const [resizing, setResizing] = React39.useState(null);
+  const varName = (id) => `--mz-dt-w-${cssSafe(id)}`;
+  const start = React39.useCallback(
+    (event, id) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const root = rootRef.current;
+      if (!root) return;
+      const handle = event.currentTarget;
+      const startX = event.clientX;
+      const startWidth = widthOf(id);
+      const min = minWidthOf(id);
+      let width = startWidth;
+      handle.setPointerCapture(event.pointerId);
+      setResizing(id);
+      const onMove = (moveEvent) => {
+        width = Math.max(min, Math.round(startWidth + moveEvent.clientX - startX));
+        root.style.setProperty(varName(id), `${width}px`);
+      };
+      const finish = () => {
+        handle.releasePointerCapture?.(event.pointerId);
+        handle.removeEventListener("pointermove", onMove);
+        handle.removeEventListener("pointerup", finish);
+        handle.removeEventListener("pointercancel", finish);
+        setResizing(null);
+        if (width !== startWidth) onCommit(id, width);
+      };
+      handle.addEventListener("pointermove", onMove);
+      handle.addEventListener("pointerup", finish);
+      handle.addEventListener("pointercancel", finish);
+    },
+    [rootRef, widthOf, minWidthOf, onCommit]
+  );
+  const autoFit = React39.useCallback(
+    (id) => {
+      const root = rootRef.current;
+      if (!root) return;
+      const cells = root.querySelectorAll(`[data-col="${CSS.escape(id)}"]`);
+      let widest = minWidthOf(id);
+      cells.forEach((cell) => {
+        const content = cell.firstElementChild;
+        const padding = 26;
+        widest = Math.max(widest, (content?.scrollWidth ?? cell.scrollWidth) + padding);
+      });
+      const width = Math.min(widest, 640);
+      root.style.setProperty(varName(id), `${width}px`);
+      onCommit(id, width);
+    },
+    [rootRef, minWidthOf, onCommit]
+  );
+  const onKeyDown = React39.useCallback(
+    (event, id) => {
+      const step = event.shiftKey ? 32 : 8;
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+      event.preventDefault();
+      const next = Math.max(
+        minWidthOf(id),
+        widthOf(id) + (event.key === "ArrowRight" ? step : -step)
+      );
+      rootRef.current?.style.setProperty(varName(id), `${next}px`);
+      onCommit(id, next);
+    },
+    [rootRef, widthOf, minWidthOf, onCommit]
+  );
+  return { start, autoFit, onKeyDown, resizing, varName };
+}
+function cssSafe(id) {
+  return id.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+var DEFAULT_WIDTH = 168;
+var DEFAULT_MIN = 72;
+function readStored3(key) {
+  if (!key || typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function writeStored2(key, layout) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(layout));
+  } catch {
+  }
+}
+function useColumnLayout({
+  columns,
+  persistKey = null,
+  layout: controlled,
+  onLayoutChange
+}) {
+  const baseline = React39.useMemo(
+    () => ({
+      order: columns.map((c) => c.id),
+      hidden: [],
+      widths: Object.fromEntries(
+        columns.map((c) => [c.id, c.width ?? DEFAULT_WIDTH])
+      ),
+      pinned: Object.fromEntries(columns.map((c) => [c.id, c.pinned])),
+      sized: []
+    }),
+    [columns]
+  );
+  const [internal, setInternal] = React39.useState(baseline);
+  React39.useEffect(() => {
+    const stored = readStored3(persistKey);
+    if (stored) setInternal((current) => merge(current, stored, baseline));
+  }, [persistKey]);
+  React39.useEffect(() => {
+    setInternal((current) => merge(baseline, current, baseline));
+  }, [baseline]);
+  const layout = React39.useMemo(
+    () => controlled ? merge(baseline, controlled, baseline) : internal,
+    [controlled, internal, baseline]
+  );
+  const update = React39.useCallback(
+    (patch, options) => {
+      setInternal((current) => {
+        const base = controlled ? merge(baseline, controlled, baseline) : current;
+        const next = patch(base);
+        if (next === base) return current;
+        if (options?.persist !== false) {
+          writeStored2(persistKey, next);
+          onLayoutChange?.(next);
+        }
+        return next;
+      });
+    },
+    [controlled, baseline, persistKey, onLayoutChange]
+  );
+  const byId = React39.useMemo(
+    () => new Map(columns.map((c) => [c.id, c])),
+    [columns]
+  );
+  const visible = React39.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 [
+      ...ordered.filter((c) => side(c.id) === "left"),
+      ...ordered.filter((c) => !side(c.id)),
+      ...ordered.filter((c) => side(c.id) === "right")
+    ];
+  }, [layout, byId]);
+  const widthOf = React39.useCallback(
+    (id) => layout.widths[id] ?? byId.get(id)?.width ?? DEFAULT_WIDTH,
+    [layout.widths, byId]
+  );
+  const minWidthOf = React39.useCallback(
+    (id) => byId.get(id)?.minWidth ?? DEFAULT_MIN,
+    [byId]
+  );
+  const fitTo = React39.useCallback(
+    (available) => update(
+      (current) => {
+        const shown = current.order.map((id) => byId.get(id)).filter((c) => Boolean(c) && !current.hidden.includes(c.id));
+        if (!shown.length || available <= 0) return current;
+        const baseOf = (c) => c.width ?? DEFAULT_WIDTH;
+        const isFlexible = (c) => c.flex !== false && !current.sized.includes(c.id);
+        const flexible = shown.filter(isFlexible);
+        if (!flexible.length) return current;
+        const fixedTotal = shown.filter((c) => !isFlexible(c)).reduce((sum, c) => sum + (current.widths[c.id] ?? baseOf(c)), 0);
+        const flexBaseTotal = flexible.reduce((sum, c) => sum + baseOf(c), 0);
+        const target = available - fixedTotal;
+        const next = { ...current.widths };
+        if (target <= flexBaseTotal) {
+          for (const column of flexible) {
+            next[column.id] = Math.max(baseOf(column), column.minWidth ?? DEFAULT_MIN);
+          }
+        } else {
+          let remaining = target;
+          let pool = flexBaseTotal;
+          const growing = [...flexible];
+          for (let pass = 0; pass < 3 && growing.length; pass += 1) {
+            const scale = remaining / pool;
+            const clamped = [];
+            for (const column of growing) {
+              const min = column.minWidth ?? DEFAULT_MIN;
+              const max = column.maxWidth ?? Infinity;
+              const scaled = baseOf(column) * scale;
+              const bounded = Math.min(Math.max(scaled, min), max);
+              if (bounded !== scaled) {
+                next[column.id] = Math.round(bounded);
+                remaining -= bounded;
+                pool -= baseOf(column);
+                clamped.push(column);
+              }
+            }
+            if (!clamped.length) break;
+            growing.splice(0, growing.length, ...growing.filter((c) => !clamped.includes(c)));
+          }
+          if (growing.length) {
+            const scale = remaining / pool;
+            let used = 0;
+            growing.forEach((column, index) => {
+              if (index === growing.length - 1) {
+                next[column.id] = Math.round(remaining - used);
+              } else {
+                const width = Math.round(baseOf(column) * scale);
+                next[column.id] = width;
+                used += width;
+              }
+            });
+          }
+        }
+        const changed = shown.some(
+          (c) => Math.abs((next[c.id] ?? 0) - (current.widths[c.id] ?? baseOf(c))) > 0.5
+        );
+        return changed ? { ...current, widths: next } : current;
+      },
+      { persist: false }
+    ),
+    [update, byId]
+  );
+  return {
+    layout,
+    visible,
+    widthOf,
+    minWidthOf,
+    setWidth: (id, width) => update((c) => ({
+      ...c,
+      widths: { ...c.widths, [id]: width },
+      sized: c.sized.includes(id) ? c.sized : [...c.sized, id]
+    })),
+    fitTo,
+    toggleHidden: (id) => update((c) => ({
+      ...c,
+      hidden: c.hidden.includes(id) ? c.hidden.filter((h) => h !== id) : [...c.hidden, id]
+    })),
+    setPinned: (id, side) => update((c) => ({ ...c, pinned: { ...c.pinned, [id]: side } })),
+    move: (id, delta) => update((c) => {
+      const order = [...c.order];
+      const from = order.indexOf(id);
+      const to = Math.min(Math.max(from + delta, 0), order.length - 1);
+      if (from < 0 || from === to) return c;
+      order.splice(to, 0, ...order.splice(from, 1));
+      return { ...c, order };
+    }),
+    moveTo: (id, targetId) => update((c) => {
+      const order = [...c.order];
+      const from = order.indexOf(id);
+      const to = order.indexOf(targetId);
+      if (from < 0 || to < 0 || from === to) return c;
+      order.splice(to, 0, ...order.splice(from, 1));
+      return { ...c, order };
+    }),
+    reset: () => update(() => baseline)
+  };
+}
+function merge(base, patch, fallback) {
+  const known = new Set(fallback.order);
+  const order = [
+    ...(patch.order ?? base.order).filter((id) => known.has(id)),
+    ...fallback.order.filter((id) => !(patch.order ?? base.order).includes(id))
+  ];
+  return {
+    order,
+    hidden: (patch.hidden ?? base.hidden).filter((id) => known.has(id)),
+    widths: { ...fallback.widths, ...base.widths, ...patch.widths },
+    pinned: { ...fallback.pinned, ...base.pinned, ...patch.pinned },
+    sized: (patch.sized ?? base.sized ?? []).filter((id) => known.has(id))
+  };
+}
+function useRowSelection(options) {
+  const { value, onChange, pageKeys } = options;
+  const anchor = React39.useRef(null);
+  const selected = React39.useMemo(() => new Set(value.keys), [value.keys]);
+  const setKeys = (keys, allMatching = false) => onChange({ keys, allMatching });
+  const toggle = (key, event) => {
+    if (event?.shiftKey && anchor.current) {
+      const from = pageKeys.indexOf(anchor.current);
+      const to = pageKeys.indexOf(key);
+      if (from >= 0 && to >= 0) {
+        const range = pageKeys.slice(Math.min(from, to), Math.max(from, to) + 1);
+        const next2 = new Set(selected);
+        const turningOn = !selected.has(key);
+        range.forEach((id) => turningOn ? next2.add(id) : next2.delete(id));
+        setKeys([...next2]);
+        return;
+      }
+    }
+    anchor.current = key;
+    const next = new Set(selected);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    setKeys([...next]);
+  };
+  const pageSelected = pageKeys.length > 0 && pageKeys.every((key) => selected.has(key));
+  const pagePartial = !pageSelected && pageKeys.some((key) => selected.has(key));
+  const togglePage = () => {
+    const next = new Set(selected);
+    if (pageSelected) pageKeys.forEach((key) => next.delete(key));
+    else pageKeys.forEach((key) => next.add(key));
+    setKeys([...next]);
+  };
+  return {
+    selected,
+    count: value.allMatching ? void 0 : value.keys.length,
+    allMatching: value.allMatching,
+    pageSelected,
+    pagePartial,
+    toggle,
+    togglePage,
+    /** Escalates from "this page" to "everything the filter matches". */
+    selectAllMatching: () => onChange({ keys: value.keys, allMatching: true }),
+    clear: () => {
+      anchor.current = null;
+      onChange({ keys: [], allMatching: false });
+    }
+  };
+}
+var SELECT_WIDTH = 44;
+var EXPAND_WIDTH = 40;
+function DataTable({
+  columns,
+  data,
+  rowKey,
+  total,
+  loading = false,
+  error,
+  onRetry,
+  query,
+  onQueryChange,
+  selection,
+  onSelectionChange,
+  bulkActions,
+  renderExpanded,
+  onRowClick,
+  layout: controlledLayout,
+  onLayoutChange,
+  persistKey = null,
+  toolbar,
+  autoFit = true,
+  density = "normal",
+  stickyHeader = true,
+  emptyState,
+  pageSizeOptions,
+  labels: labelsProp,
+  locale,
+  caption,
+  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 {
+    layout,
+    visible,
+    widthOf,
+    minWidthOf,
+    setWidth,
+    toggleHidden,
+    setPinned,
+    move,
+    moveTo,
+    reset,
+    fitTo
+  } = 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 rows = useRowSelection({
+    value: selection ?? { keys: [], allMatching: false },
+    onChange: onSelectionChange ?? (() => {
+    }),
+    pageKeys
+  });
+  const lastFitWidth = React39.useRef(0);
+  React39.useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller || !autoFit) return;
+    const controls = (selectable ? SELECT_WIDTH : 0) + (renderExpanded ? EXPAND_WIDTH : 0);
+    const run = () => {
+      const available = scroller.clientWidth - controls - 2;
+      if (Math.abs(available - lastFitWidth.current) < 1) return;
+      lastFitWidth.current = available;
+      fitTo(available);
+    };
+    run();
+    const observer = new ResizeObserver(run);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [autoFit, fitTo, selectable, renderExpanded, layout.hidden, layout.order]);
+  React39.useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const update = () => {
+      const max = scroller.scrollWidth - scroller.clientWidth;
+      setScrolled({ left: scroller.scrollLeft > 1, right: scroller.scrollLeft < max - 1 });
+    };
+    update();
+    scroller.addEventListener("scroll", update, { passive: true });
+    const observer = new ResizeObserver(update);
+    observer.observe(scroller);
+    return () => {
+      scroller.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, [visible.length, data.length]);
+  const offsets = React39.useMemo(() => {
+    const result = /* @__PURE__ */ new Map();
+    let leftParts = selectable ? [`${SELECT_WIDTH}px`] : [];
+    if (renderExpanded) leftParts = [...leftParts, `${EXPAND_WIDTH}px`];
+    for (const column of visible) {
+      if (layout.pinned[column.id] !== "left") continue;
+      result.set(column.id, leftParts.length ? `calc(${leftParts.join(" + ")})` : "0px");
+      leftParts.push(`var(--mz-dt-w-${cssSafe(column.id)}, ${widthOf(column.id)}px)`);
+    }
+    const rightParts = [];
+    for (const column of [...visible].reverse()) {
+      if (layout.pinned[column.id] !== "right") continue;
+      result.set(column.id, rightParts.length ? `calc(${rightParts.join(" + ")})` : "0px");
+      rightParts.push(`var(--mz-dt-w-${cssSafe(column.id)}, ${widthOf(column.id)}px)`);
+    }
+    return result;
+  }, [visible, layout.pinned, widthOf, selectable, renderExpanded]);
+  const widthVars = React39.useMemo(() => {
+    const style = {};
+    for (const column of visible) {
+      style[`--mz-dt-w-${cssSafe(column.id)}`] = `${widthOf(column.id)}px`;
+    }
+    return style;
+  }, [visible, widthOf]);
+  const leftPinned = visible.filter((c) => layout.pinned[c.id] === "left");
+  const rightPinned = visible.filter((c) => layout.pinned[c.id] === "right");
+  const lastLeftPinned = leftPinned[leftPinned.length - 1]?.id;
+  const firstRightPinned = rightPinned[0]?.id;
+  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 labelOf = (id) => {
+    const column = columnById.get(id);
+    return column?.label ?? (typeof column?.header === "string" ? column.header : id);
+  };
+  const toggleExpanded = (key) => setExpanded((current) => {
+    const next = new Set(current);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    return next;
+  });
+  const fillerIndex = visible.length - rightPinned.length;
+  const colSpan = visible.length + 1 + (selectable ? 1 : 0) + (renderExpanded ? 1 : 0);
+  const selectionCount = rows.allMatching ? total : rows.count;
+  const renderHeaderCells = (list) => list.map((column) => {
+    const { dir, index } = sortStateOf(query, column.id);
+    const pinned = layout.pinned[column.id];
+    const label = labelOf(column.id);
+    return /* @__PURE__ */ jsxs(
+      "th",
+      {
+        "data-col": column.id,
+        "data-pinned": pinned,
+        "data-pin-edge": pinEdgeOf(column.id),
+        "data-align": column.align,
+        "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : "none",
+        className: "mz-dt__th",
+        style: pinned ? { [pinned]: offsets.get(column.id) } : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mz-dt__th-inner", children: [
+            column.sortable ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "mz-dt__sort mz-focusable",
+                title: labels.sortBy(label),
+                onClick: (event) => onQueryChange(toggleSort(query, column.id, event.shiftKey)),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "mz-dt__th-label", children: column.header }),
+                  /* @__PURE__ */ jsxs("span", { className: "mz-dt__sort-icon", "data-active": dir ? true : void 0, children: [
+                    dir === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : dir === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : /* @__PURE__ */ jsx(SortIcon, {}),
+                    index ? /* @__PURE__ */ jsx("b", { children: index }) : null
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "mz-dt__th-label", title: column.headerTitle, children: column.header }),
+            column.filter ? /* @__PURE__ */ jsx(
+              ColumnFilter,
+              {
+                columnLabel: label,
+                def: column.filter,
+                value: query.filters[column.id],
+                onApply: (value) => onQueryChange(setFilter(query, column.id, value))
+              }
+            ) : null
+          ] }),
+          column.resizable === false ? null : /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "separator",
+              "aria-orientation": "vertical",
+              "aria-label": labels.columnWidth(label),
+              tabIndex: 0,
+              className: "mz-dt__resizer mz-focusable",
+              "data-resizing": resize.resizing === column.id || void 0,
+              onPointerDown: (event) => resize.start(event, column.id),
+              onDoubleClick: () => resize.autoFit(column.id),
+              onKeyDown: (event) => resize.onKeyDown(event, column.id)
+            }
+          )
+        ]
+      },
+      column.id
+    );
+  });
+  const renderBodyCells = (row, rowIndex, list) => {
+    const key = rowKey(row);
+    return list.map((column) => {
+      const pinned = layout.pinned[column.id];
+      const isEditing = editing?.key === key && editing.col === column.id;
+      return /* @__PURE__ */ jsx(
+        "td",
+        {
+          "data-col": column.id,
+          "data-pinned": pinned,
+          "data-pin-edge": pinEdgeOf(column.id),
+          "data-align": column.align,
+          "data-editable": column.editable ? true : void 0,
+          className: "mz-dt__td",
+          style: pinned ? { [pinned]: offsets.get(column.id) } : void 0,
+          onDoubleClick: column.editable ? (event) => {
+            event.stopPropagation();
+            setEditing({ key, col: column.id });
+          } : void 0,
+          children: isEditing && column.editable ? /* @__PURE__ */ jsx(
+            CellEditor,
+            {
+              row,
+              def: column.editable,
+              onDone: () => setEditing(null)
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "mz-dt__cell", children: column.cell ? column.cell(row, { rowIndex }) : column.accessor?.(row) })
+        },
+        column.id
+      );
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "data-table",
+      "data-density": density,
+      className: cn("mz-dt", className),
+      style: widthVars,
+      children: [
+        (toolbar || chips.length > 0 || columns.some((c) => c.hideable !== false)) && /* @__PURE__ */ jsxs("div", { className: "mz-dt__toolbar", children: [
+          /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-main", children: toolbar }),
+          /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-side", children: /* @__PURE__ */ jsx(
+            ColumnManager,
+            {
+              columns,
+              layout,
+              labels: labelsProp,
+              onToggleHidden: toggleHidden,
+              onSetPinned: setPinned,
+              onMove: move,
+              onMoveTo: moveTo,
+              onReset: reset
+            }
+          ) })
+        ] }),
+        chips.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mz-dt__chips", children: [
+          chips.map(([id, value]) => /* @__PURE__ */ jsx(
+            FilterChip,
+            {
+              label: /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("b", { children: labelOf(id) }),
+                describeFilter(value, columnById.get(id)?.filter, labels)
+              ] }),
+              clearLabel: labels.clearFilter,
+              onClear: () => onQueryChange(setFilter(query, id, void 0))
+            },
+            id
+          )),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "link",
+              size: "xs",
+              onClick: () => onQueryChange({ ...query, filters: {}, page: 1 }),
+              children: labels.resetAll
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: scrollerRef,
+            className: "mz-dt__scroller",
+            "data-scrolled-left": scrolled.left || void 0,
+            "data-scrolled-right": scrolled.right || void 0,
+            children: [
+              /* @__PURE__ */ jsxs("table", { className: "mz-dt__table", "data-sticky": stickyHeader || void 0, children: [
+                caption ? /* @__PURE__ */ jsx("caption", { className: "mz-sr-only", children: caption }) : null,
+                /* @__PURE__ */ jsxs("colgroup", { children: [
+                  selectable ? /* @__PURE__ */ jsx("col", { style: { width: SELECT_WIDTH } }) : null,
+                  renderExpanded ? /* @__PURE__ */ jsx("col", { style: { width: EXPAND_WIDTH } }) : null,
+                  visible.slice(0, fillerIndex).map((column) => /* @__PURE__ */ jsx(
+                    "col",
+                    {
+                      style: { width: `var(--mz-dt-w-${cssSafe(column.id)}, ${widthOf(column.id)}px)` }
+                    },
+                    column.id
+                  )),
+                  /* @__PURE__ */ jsx("col", { className: "mz-dt__col-filler" }),
+                  visible.slice(fillerIndex).map((column) => /* @__PURE__ */ jsx(
+                    "col",
+                    {
+                      style: { width: `var(--mz-dt-w-${cssSafe(column.id)}, ${widthOf(column.id)}px)` }
+                    },
+                    column.id
+                  ))
+                ] }),
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  selectable ? /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      className: "mz-dt__th mz-dt__th--control",
+                      "data-pinned": "left",
+                      "data-pin-edge": renderExpanded ? void 0 : controlPinEdge,
+                      style: { left: 0 },
+                      children: /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          size: "sm",
+                          "aria-label": labels.selectPage,
+                          checked: rows.pageSelected ? true : rows.pagePartial ? "indeterminate" : false,
+                          onCheckedChange: rows.togglePage
+                        }
+                      )
+                    }
+                  ) : null,
+                  renderExpanded ? /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      className: "mz-dt__th mz-dt__th--control",
+                      "data-pinned": "left",
+                      "data-pin-edge": controlPinEdge,
+                      style: { left: selectable ? SELECT_WIDTH : 0 },
+                      children: /* @__PURE__ */ jsx("span", { className: "mz-sr-only", children: labels.details })
+                    }
+                  ) : null,
+                  renderHeaderCells(visible.slice(0, fillerIndex)),
+                  /* @__PURE__ */ jsx("th", { className: "mz-dt__th mz-dt__th--filler", "aria-hidden": "true" }),
+                  renderHeaderCells(visible.slice(fillerIndex))
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: loading && data.length === 0 ? Array.from({ length: Math.min(query.pageSize, 8) }, (_, index) => /* @__PURE__ */ jsx("tr", { className: "mz-dt__row", children: /* @__PURE__ */ jsx("td", { className: "mz-dt__td", colSpan, children: /* @__PURE__ */ jsx(Skeleton, { style: { height: 14, width: `${60 + index * 13 % 35}%` } }) }) }, `skeleton-${index}`)) : data.map((row, rowIndex) => {
+                  const key = rowKey(row);
+                  const isOpen = expanded.has(key);
+                  return /* @__PURE__ */ jsxs(React39.Fragment, { children: [
+                    /* @__PURE__ */ jsxs(
+                      "tr",
+                      {
+                        className: "mz-dt__row",
+                        "data-selected": rows.selected.has(key) || rows.allMatching || void 0,
+                        "data-clickable": onRowClick ? true : void 0,
+                        onClick: onRowClick ? () => onRowClick(row) : void 0,
+                        children: [
+                          selectable ? /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              className: "mz-dt__td mz-dt__td--control",
+                              "data-pinned": "left",
+                              "data-pin-edge": renderExpanded ? void 0 : controlPinEdge,
+                              style: { left: 0 },
+                              onClick: (event) => event.stopPropagation(),
+                              children: /* @__PURE__ */ jsx(
+                                Checkbox,
+                                {
+                                  size: "sm",
+                                  "aria-label": labels.selectRow,
+                                  checked: rows.selected.has(key) || rows.allMatching,
+                                  onClick: (event) => rows.toggle(key, { shiftKey: event.shiftKey })
+                                }
+                              )
+                            }
+                          ) : null,
+                          renderExpanded ? /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              className: "mz-dt__td mz-dt__td--control",
+                              "data-pinned": "left",
+                              "data-pin-edge": controlPinEdge,
+                              style: { left: selectable ? SELECT_WIDTH : 0 },
+                              onClick: (event) => event.stopPropagation(),
+                              children: /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "mz-dt__expand mz-focusable",
+                                  "data-open": isOpen || void 0,
+                                  "aria-expanded": isOpen,
+                                  "aria-label": isOpen ? labels.collapseRow : labels.expandRow,
+                                  onClick: () => toggleExpanded(key),
+                                  children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+                                }
+                              )
+                            }
+                          ) : null,
+                          renderBodyCells(row, rowIndex, visible.slice(0, fillerIndex)),
+                          /* @__PURE__ */ jsx("td", { className: "mz-dt__td mz-dt__td--filler", "aria-hidden": "true" }),
+                          renderBodyCells(row, rowIndex, visible.slice(fillerIndex))
+                        ]
+                      }
+                    ),
+                    isOpen && renderExpanded ? /* @__PURE__ */ jsx("tr", { className: "mz-dt__row mz-dt__row--expanded", children: /* @__PURE__ */ jsx("td", { className: "mz-dt__td mz-dt__td--expanded", colSpan, children: renderExpanded(row) }) }) : null
+                  ] }, key);
+                }) })
+              ] }),
+              !loading && !error && data.length === 0 ? /* @__PURE__ */ jsx("div", { className: "mz-dt__state", children: emptyState ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(InboxIcon, {}),
+                /* @__PURE__ */ jsx("p", { children: labels.empty }),
+                chips.length > 0 ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: "secondary",
+                    onClick: () => onQueryChange({ ...query, filters: {}, page: 1 }),
+                    children: labels.resetFilters
+                  }
+                ) : null
+              ] }) }) : null,
+              error ? /* @__PURE__ */ jsxs("div", { className: "mz-dt__state", "data-tone": "danger", children: [
+                /* @__PURE__ */ jsx(AlertIcon, {}),
+                /* @__PURE__ */ jsx("p", { children: error }),
+                onRetry ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onRetry, children: labels.retry }) : null
+              ] }) : null,
+              loading && data.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mz-dt__loading-bar", "aria-hidden": "true" }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DataTablePagination,
+          {
+            query,
+            total,
+            rowsOnPage: data.length,
+            pageSizeOptions,
+            labels: labelsProp,
+            locale,
+            onQueryChange
+          }
+        ),
+        selectable && (rows.count ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "mz-dt__bulkbar", role: "region", "aria-label": labels.bulkActions, children: [
+          /* @__PURE__ */ jsxs("span", { className: "mz-dt__bulkbar-count", children: [
+            labels.selectedCount(
+              selectionCount?.toLocaleString(locale) ?? String(rows.count ?? 0)
+            ),
+            rows.allMatching ? labels.allMatchingSuffix : null
+          ] }),
+          !rows.allMatching && total !== void 0 && rows.pageSelected && total > data.length ? /* @__PURE__ */ jsx(Button, { variant: "link", size: "xs", onClick: rows.selectAllMatching, children: labels.selectAllMatching(total.toLocaleString(locale)) }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "mz-dt__bulkbar-actions", children: [
+            bulkActions?.(selection ?? { keys: [], allMatching: false }),
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: rows.clear, children: labels.clearSelection })
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+function describeFilter(value, def, labels) {
+  switch (value.type) {
+    case "text":
+      return `: \u201C${value.value}\u201D`;
+    case "select": {
+      const options = def?.type === "select" ? def.options : [];
+      const labels2 = value.value.map(
+        (v) => options.find((option) => option.value === v)?.label ?? v
+      );
+      return `: ${labels2.join(", ")}`;
+    }
+    case "number-range":
+      return `: ${value.min ?? "\u2026"}\u2013${value.max ?? "\u2026"}`;
+    case "date-range":
+      return `: ${value.from ?? "\u2026"} \u2013 ${value.to ?? "\u2026"}`;
+    case "boolean":
+      return `: ${value.value ? labels.yes.toLowerCase() : labels.no.toLowerCase()}`;
+  }
+}
+
+// src/components/data-table/types.ts
+var emptyQuery = {
+  sort: [],
+  filters: {},
+  page: 1,
+  pageSize: 25
+};
+
+// src/components/data-table/use-table-query.ts
+function encode(query, prefix) {
+  const params = new URLSearchParams(window.location.search);
+  const set = (key, value) => {
+    if (value) params.set(prefix + key, value);
+    else params.delete(prefix + key);
+  };
+  set("sort", serializeSort(query.sort) || void 0);
+  set("page", query.page > 1 ? String(query.page) : void 0);
+  set("size", String(query.pageSize));
+  set("f", Object.keys(query.filters).length ? JSON.stringify(query.filters) : void 0);
+  return params;
+}
+function decode(prefix, fallback) {
+  const params = new URLSearchParams(window.location.search);
+  const get = (key) => params.get(prefix + key);
+  let filters = fallback.filters;
+  const rawFilters = get("f");
+  if (rawFilters) {
+    try {
+      filters = JSON.parse(rawFilters);
+    } catch {
+      filters = {};
+    }
+  }
+  return {
+    sort: get("sort") ? parseSort(get("sort")) : fallback.sort,
+    filters,
+    page: Number(get("page") ?? fallback.page) || 1,
+    pageSize: Number(get("size") ?? fallback.pageSize) || fallback.pageSize
+  };
+}
+function useTableQuery({
+  initial,
+  urlKey = null,
+  history = "replace"
+} = {}) {
+  const base = React39.useMemo(() => ({ ...emptyQuery, ...initial }), [initial]);
+  const [query, setQuery] = React39.useState(base);
+  React39.useEffect(() => {
+    if (urlKey === null || typeof window === "undefined") return;
+    setQuery(decode(urlKey, base));
+  }, [urlKey]);
+  React39.useEffect(() => {
+    if (urlKey === null || typeof window === "undefined") return;
+    const params = encode(query, urlKey);
+    const search = params.toString();
+    const next = `${window.location.pathname}${search ? `?${search}` : ""}${window.location.hash}`;
+    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(() => {
+    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]);
+  return { query, setQuery, reset };
+}
+function useSavedViews({
+  storageKey = null,
+  views: controlled,
+  onViewsChange
+} = {}) {
+  const [internal, setInternal] = React39.useState([]);
+  React39.useEffect(() => {
+    if (!storageKey || typeof window === "undefined") return;
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      if (raw) setInternal(JSON.parse(raw));
+    } catch {
+    }
+  }, [storageKey]);
+  const views = controlled ?? internal;
+  const persist = React39.useCallback(
+    (next) => {
+      setInternal(next);
+      onViewsChange?.(next);
+      if (!storageKey || typeof window === "undefined") return;
+      try {
+        window.localStorage.setItem(storageKey, JSON.stringify(next));
+      } catch {
+      }
+    },
+    [storageKey, onViewsChange]
+  );
+  return {
+    views,
+    save: (view) => persist([...views.filter((v) => v.id !== view.id), view]),
+    remove: (id) => persist(views.filter((v) => v.id !== id))
+  };
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, 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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map