@mesob/ui 0.5.3 → 0.5.5

package/dist/components.js

@@ -248,7 +248,7 @@ function AppBreadcrumbs({
   className
 }) {
   const mesob = useMesob();
-  const Link2 = linkProp ?? mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const Link2 = linkProp ?? mesob?.navigation?.Link;
   const locale = mesob?.locale;
   const { items } = useBreadcrumbs2(void 0);
   if (items.length === 0) {
@@ -1457,7 +1457,7 @@ import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var DROPDOWN_MENU_POSITIONER_CN = "isolate z-50 outline-none";
 var DROPDOWN_MENU_CONTENT_CN = cn(
   "cn-dropdown-menu-content cn-dropdown-menu-content-logical cn-menu-target",
-  "z-50 max-h-(--available-height) w-(--anchor-width)",
+  "z-50 max-h-[min(100dvh,var(--available-height,100dvh))] w-[var(--anchor-width,auto)]",
   "origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none",
   "data-closed:overflow-hidden"
 );
@@ -1749,12 +1749,12 @@ function AppHeaderActions({
   accountMenuFooter
 }) {
   const mesob = useMesob2();
-  const LinkComponent = mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const LinkComponent = mesob?.navigation?.Link;
   const locale = mesob?.locale;
   const hasHrefItems = topMenuItems.some((i) => i.href) || menuItems.some((i) => i.href);
   if (hasHrefItems && !LinkComponent) {
     throw new Error(
-      "[AppHeaderActions] MesobProvider with routing is required for menu items with href"
+      "[AppHeaderActions] MesobProvider is required for menu items with href"
     );
   }
   const initials = user?.fullName?.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) || "U";
@@ -1876,7 +1876,6 @@ import { grant } from "@mesob/common/permission";
 import { useMesob as useMesob3 } from "@mesob/ui/providers";
 import { IconChevronDown } from "@tabler/icons-react";
 import { useEffect as useEffect8, useRef as useRef2, useState as useState5 } from "react";
-import { useToggle } from "react-use";
 
 // src/components/ui/sidebar.tsx
 import { useRender as useRender3 } from "@base-ui/react/use-render";
@@ -2077,8 +2076,27 @@ function TooltipProvider({
     }
   );
 }
-function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsx19(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+function Tooltip({
+  label,
+  contentProps,
+  triggerProps,
+  children,
+  ...props
+}) {
+  if (label !== void 0) {
+    return /* @__PURE__ */ jsxs12(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children: [
+      /* @__PURE__ */ jsx19(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx19("span", { className: "inline-block" }),
+          ...triggerProps,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx19(TooltipContent, { ...contentProps, children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsx19(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children });
 }
 function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ jsx19(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
@@ -2807,6 +2825,20 @@ function RowContent({
     )
   ] });
 }
+function useNavBranchOpen(activeBranch) {
+  const [open, setOpen] = useState5(activeBranch);
+  useEffect8(() => {
+    if (activeBranch) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }, [activeBranch]);
+  const toggle = () => {
+    setOpen((o) => !o);
+  };
+  return { open, toggle };
+}
 function NavItemRow({
   item,
   level,
@@ -2815,11 +2847,12 @@ function NavItemRow({
   onNavClick
 }) {
   const mesob = useMesob3();
-  const Link2 = mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const Link2 = mesob?.navigation?.Link;
   const locale = mesob?.locale;
-  const [open, toggle] = useToggle(hasActiveDescendant(item, pathname));
+  const activeBranch = hasActiveDescendant(item, pathname);
+  const { open, toggle } = useNavBranchOpen(activeBranch);
   const hasChildren = (item.children?.length ?? 0) > 0;
-  const showChildren = (open || hasActiveDescendant(item, pathname)) && hasChildren;
+  const showChildren = open && hasChildren;
   const pathMatch = item.pathMatch ?? "prefix";
   const isActive = isLinkActive(pathname, item.href, pathMatch);
   const lineLeft = 28 + 20 * level;
@@ -3496,7 +3529,7 @@ function NoDataAvailable({
   icon
 }) {
   const mesob = useMesob4();
-  const Link2 = mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const Link2 = mesob?.navigation?.Link;
   const locale = mesob?.locale;
   const iconMap = {
     certificate: IconCertificateOff,
@@ -4121,7 +4154,7 @@ import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown3, IconChevr
 import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SELECT_TRIGGER_BASE_CN = "flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0";
-var SELECT_CONTENT_BASE_CN = "cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none";
+var SELECT_CONTENT_BASE_CN = "cn-menu-target relative isolate z-50 max-h-[min(100dvh,var(--available-height,100dvh))] w-[var(--anchor-width,auto)] origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none";
 var SELECT_ITEM_BASE_CN = "relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 function SelectGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx36(
@@ -4170,7 +4203,7 @@ function SelectContent({
   sideOffset = 4,
   align = "center",
   alignOffset = 0,
-  alignItemWithTrigger = true,
+  alignItemWithTrigger = false,
   ...props
 }) {
   return /* @__PURE__ */ jsx36(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx36(
@@ -4295,11 +4328,10 @@ function EntityDetailHeader({
   className
 }) {
   const mesob = useMesob5();
-  const LinkComponent = mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const LinkComponent = mesob?.navigation?.Link;
   const pathname = mesob?.pathname ?? "";
   const locale = mesob?.locale;
-  const goBack = mesob?.goBack ?? (() => window.history.back());
-  const resolvedBackButton = showBack ? /* @__PURE__ */ jsx37(PageGoBack, { onBack: goBack, label: "Go back" }) : void 0;
+  const resolvedBackButton = showBack && mesob?.goBack ? /* @__PURE__ */ jsx37(PageGoBack, { onBack: mesob.goBack, label: "Go back" }) : void 0;
   const hrefBasedActiveTab = useMemo3(() => {
     const hasPathname = Boolean(pathname);
     const allHaveHref = tabs.every((t) => t.href);
@@ -7968,7 +8000,6 @@ import { useState as useState22 } from "react";
 import { Controller as Controller2 } from "react-hook-form";
 
 // src/provider/mesob-provider.tsx
-import { createNavigation } from "next-intl/navigation";
 import { createContext as createContext3, useContext as useContext3, useMemo as useMemo10 } from "react";
 import { z as z2 } from "zod";
 
@@ -15399,7 +15430,7 @@ function Anchor({
   ...props
 }) {
   const mesob = useMesob7();
-  const Link2 = mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const Link2 = mesob?.navigation?.Link;
   const locale = mesob?.locale;
   const useLink = href && !isExternal2(href) && Link2;
   const Comp = useLink ? Link2 : "a";
@@ -15601,7 +15632,7 @@ function AnimatedTabs({
   linkComponent: linkProp
 }) {
   const mesob = useMesob8();
-  const LinkComponent = linkProp ?? mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const LinkComponent = linkProp ?? mesob?.navigation?.Link;
   const locale = mesob?.locale;
   const [internalActiveTab, setInternalActiveTab] = useState36(
     defaultTab ?? tabs[0]?.value ?? ""
@@ -17891,7 +17922,7 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
 import { IconCheck as IconCheck4, IconChevronDown as IconChevronDown9 } from "@tabler/icons-react";
 import { useMemo as useMemo13, useState as useState40 } from "react";
 import { jsx as jsx142, jsxs as jsxs85 } from "react/jsx-runtime";
-var COMBOBOX_CONTENT_BASE_CN = "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)";
+var COMBOBOX_CONTENT_BASE_CN = "cn-menu-target group/combobox-content relative max-h-[min(100dvh,var(--available-height,100dvh))] w-[var(--anchor-width,auto)] max-w-[min(100vw,var(--available-width,100vw))] min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-[var(--anchor-width,auto)]";
 var COMBOBOX_ITEM_BASE_CN = "relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 function Combobox({
   options,
@@ -18084,7 +18115,7 @@ import { jsx as jsx144, jsxs as jsxs86 } from "react/jsx-runtime";
 var CONTEXT_MENU_POSITIONER_CN = "isolate z-50 outline-none";
 var CONTEXT_MENU_CONTENT_CN = cn(
   "cn-context-menu-content cn-context-menu-content-logical cn-menu-target",
-  "z-50 max-h-(--available-height)",
+  "z-50 max-h-[min(100dvh,var(--available-height,100dvh))]",
   "origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none",
   "data-closed:overflow-hidden"
 );
@@ -18189,7 +18220,7 @@ function ContextMenuSubContent({
           "data-slot": "context-menu-sub-content",
           className: cn(
             "cn-context-menu-sub-content cn-context-menu-content-logical cn-context-menu-subcontent",
-            "z-50 max-h-(--available-height) w-auto origin-(--transform-origin)",
+            "z-50 max-h-[min(100dvh,var(--available-height,100dvh))] w-auto origin-(--transform-origin)",
             "overflow-x-hidden overflow-y-auto outline-none",
             className
           ),
@@ -18849,6 +18880,7 @@ function DropdownButton({
   mainButtonClassName,
   triggerClassName,
   contentClassName,
+  align = "end",
   positionerProps,
   contentProps,
   className,
@@ -18879,7 +18911,7 @@ function DropdownButton({
           children
         }
       ),
-      /* @__PURE__ */ jsx151(DropdownMenuPositioner, { ...positionerProps, children: /* @__PURE__ */ jsx151(
+      /* @__PURE__ */ jsx151(DropdownMenuPositioner, { align, ...positionerProps, children: /* @__PURE__ */ jsx151(
         DropdownMenuContent,
         {
           ...contentProps,
@@ -18933,7 +18965,7 @@ function DropdownButton({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx151(DropdownMenuPositioner, { ...positionerProps, children: /* @__PURE__ */ jsx151(
+    /* @__PURE__ */ jsx151(DropdownMenuPositioner, { align, ...positionerProps, children: /* @__PURE__ */ jsx151(
       DropdownMenuContent,
       {
         ...contentProps,
@@ -20684,7 +20716,7 @@ import { jsx as jsx169, jsxs as jsxs97 } from "react/jsx-runtime";
 var MENUBAR_POSITIONER_CN = "isolate z-50 outline-none";
 var MENUBAR_CONTENT_CN = cn(
   "cn-menubar-content cn-menubar-content-logical cn-menu-target",
-  "z-50 max-h-(--available-height)",
+  "z-50 max-h-[min(100dvh,var(--available-height,100dvh))]",
   "origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none",
   "data-closed:overflow-hidden"
 );
@@ -20936,7 +20968,7 @@ function MenubarSubContent({
           "data-slot": "menubar-sub-content",
           className: cn(
             "cn-menubar-sub-content cn-menubar-content-logical",
-            "z-50 max-h-(--available-height) w-auto origin-(--transform-origin)",
+            "z-50 max-h-[min(100dvh,var(--available-height,100dvh))] w-auto origin-(--transform-origin)",
             "overflow-x-hidden overflow-y-auto outline-none",
             className
           ),
@@ -21354,7 +21386,7 @@ function NavLink({
   ...props
 }) {
   const mesob = useMesob9();
-  const Link2 = mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const Link2 = mesob?.navigation?.Link;
   const locale = mesob?.locale;
   const useLink = href && !isExternal3(href) && Link2;
   const Comp = useLink ? Link2 : "a";
@@ -22983,10 +23015,165 @@ function Stack({
   );
 }
 
+// src/components/ui/status-dropdown-button.tsx
+import { useCallback as useCallback25, useMemo as useMemo16, useState as useState53 } from "react";
+import { Fragment as Fragment30, jsx as jsx192, jsxs as jsxs110 } from "react/jsx-runtime";
+var STATUS_MENU_SEPARATOR = "separator";
+function resolveConfirmConfig(target, entityLabel) {
+  if (!target.confirm) {
+    return null;
+  }
+  const baseVariant = target.variant === "destructive" ? "destructive" : "default";
+  if (target.confirm === true) {
+    return {
+      title: "Confirm status change",
+      description: entityLabel !== void 0 ? `This will update this ${entityLabel}.` : "You can change it again later.",
+      cancelLabel: "Cancel",
+      confirmLabel: "Continue",
+      confirmVariant: baseVariant
+    };
+  }
+  return {
+    cancelLabel: "Cancel",
+    confirmLabel: "Continue",
+    confirmVariant: baseVariant,
+    ...target.confirm
+  };
+}
+function buildItems(value, states, transitions, groupLabel, onPick) {
+  const row = transitions !== void 0 && value in transitions ? transitions[value] ?? [] : states.filter((s) => s.value !== value).map((s) => s.value);
+  const items = [];
+  if (groupLabel !== null) {
+    items.push({
+      type: "label",
+      key: "status-group",
+      label: groupLabel === void 0 ? "Change status" : groupLabel
+    });
+  }
+  for (let i = 0; i < row.length; i++) {
+    const slot = row[i];
+    if (slot === STATUS_MENU_SEPARATOR) {
+      items.push({
+        type: "separator",
+        key: `status-sep-${value}-${i}`
+      });
+      continue;
+    }
+    const def = states.find((s) => s.value === slot);
+    if (!def) {
+      continue;
+    }
+    items.push({
+      key: `status-${slot}`,
+      label: def.label,
+      icon: def.icon,
+      variant: def.variant,
+      disabled: def.disabled,
+      inset: def.inset,
+      onSelect: () => onPick(slot)
+    });
+  }
+  return items;
+}
+function StatusDropdownButton({
+  value,
+  onStatusChange,
+  states,
+  transitions,
+  groupLabel,
+  labelPrefix,
+  buttonClassName,
+  entityLabel,
+  className,
+  variant,
+  ...dropdownProps
+}) {
+  const [pending, setPending] = useState53(null);
+  const onPick = useCallback25(
+    (next) => {
+      const target = states.find((s) => s.value === next);
+      if (!target) {
+        onStatusChange(next);
+        return;
+      }
+      const cfg = resolveConfirmConfig(target, entityLabel);
+      if (cfg) {
+        setPending({ next, config: cfg });
+      } else {
+        onStatusChange(next);
+      }
+    },
+    [states, entityLabel, onStatusChange]
+  );
+  const items = useMemo16(
+    () => buildItems(value, states, transitions, groupLabel, onPick),
+    [value, states, transitions, groupLabel, onPick]
+  );
+  const current = states.find((s) => s.value === value);
+  return /* @__PURE__ */ jsxs110(Fragment30, { children: [
+    /* @__PURE__ */ jsx192(
+      DropdownButton,
+      {
+        ...dropdownProps,
+        className,
+        items,
+        variant,
+        children: /* @__PURE__ */ jsxs110(
+          "span",
+          {
+            className: cn(
+              "inline-flex min-w-0 items-center gap-2",
+              buttonClassName
+            ),
+            children: [
+              labelPrefix ? /* @__PURE__ */ jsx192("span", { className: "text-muted-foreground shrink-0", children: labelPrefix }) : null,
+              current?.icon ? /* @__PURE__ */ jsx192("span", { className: "inline-flex shrink-0", children: current.icon }) : null,
+              /* @__PURE__ */ jsx192("span", { className: "min-w-0 truncate", children: current?.label ?? value })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx192(
+      AlertDialog,
+      {
+        open: pending !== null,
+        onOpenChange: (open) => {
+          if (!open) {
+            setPending(null);
+          }
+        },
+        children: /* @__PURE__ */ jsxs110(AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxs110(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsx192(AlertDialogTitle, { children: pending?.config.title ?? "Confirm?" }),
+            pending?.config.description != null ? /* @__PURE__ */ jsx192(AlertDialogDescription, { children: pending.config.description }) : null
+          ] }),
+          /* @__PURE__ */ jsxs110(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx192(AlertDialogCancel, { children: pending?.config.cancelLabel ?? "Cancel" }),
+            /* @__PURE__ */ jsx192(
+              AlertDialogAction,
+              {
+                variant: pending?.config.confirmVariant ?? "default",
+                onClick: () => {
+                  if (pending) {
+                    onStatusChange(pending.next);
+                    setPending(null);
+                  }
+                },
+                children: pending?.config.confirmLabel ?? "Continue"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
 // src/components/ui/stepper.tsx
 import { IconCheck as IconCheck9 } from "@tabler/icons-react";
 import { createContext as createContext8, useContext as useContext9 } from "react";
-import { jsx as jsx192, jsxs as jsxs110 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs111 } from "react/jsx-runtime";
 var StepperContext = createContext8({
   activeStep: 0,
   orientation: "horizontal"
@@ -22999,7 +23186,7 @@ function Stepper({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx192(StepperContext.Provider, { value: { activeStep, orientation }, children: /* @__PURE__ */ jsx192(
+  return /* @__PURE__ */ jsx193(StepperContext.Provider, { value: { activeStep, orientation }, children: /* @__PURE__ */ jsx193(
     "div",
     {
       "data-slot": "stepper",
@@ -23031,7 +23218,7 @@ function Step({
   } else if (isActive) {
     state2 = "active";
   }
-  return /* @__PURE__ */ jsxs110(
+  return /* @__PURE__ */ jsxs111(
     "div",
     {
       "data-slot": "step",
@@ -23043,7 +23230,7 @@ function Step({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs110(
+        /* @__PURE__ */ jsxs111(
           "div",
           {
             className: cn(
@@ -23051,16 +23238,16 @@ function Step({
               orientation === "horizontal" && "flex-col gap-2"
             ),
             children: [
-              /* @__PURE__ */ jsx192(
+              /* @__PURE__ */ jsx193(
                 "div",
                 {
                   "data-slot": "step-indicator",
                   "data-state": state2,
                   className: cn("cn-step-indicator"),
-                  children: isCompleted ? /* @__PURE__ */ jsx192(IconCheck9, { className: "size-5" }) : /* @__PURE__ */ jsx192("span", { children: index + 1 })
+                  children: isCompleted ? /* @__PURE__ */ jsx193(IconCheck9, { className: "size-5" }) : /* @__PURE__ */ jsx193("span", { children: index + 1 })
                 }
               ),
-              (label || description) && /* @__PURE__ */ jsxs110(
+              (label || description) && /* @__PURE__ */ jsxs111(
                 "div",
                 {
                   className: cn(
@@ -23068,15 +23255,15 @@ function Step({
                     orientation === "vertical" && "text-left"
                   ),
                   children: [
-                    label && /* @__PURE__ */ jsx192("div", { className: cn("cn-step-label"), children: label }),
-                    description && /* @__PURE__ */ jsx192("div", { className: "cn-step-description", children: description })
+                    label && /* @__PURE__ */ jsx193("div", { className: cn("cn-step-label"), children: label }),
+                    description && /* @__PURE__ */ jsx193("div", { className: "cn-step-description", children: description })
                   ]
                 }
               )
             ]
           }
         ),
-        orientation === "horizontal" && !isLast && /* @__PURE__ */ jsx192(
+        orientation === "horizontal" && !isLast && /* @__PURE__ */ jsx193(
           "div",
           {
             "data-slot": "step-connector",
@@ -23084,7 +23271,7 @@ function Step({
             className: cn("cn-step-connector")
           }
         ),
-        orientation === "vertical" && /* @__PURE__ */ jsx192("div", { className: "flex flex-1 flex-col gap-2", children })
+        orientation === "vertical" && /* @__PURE__ */ jsx193("div", { className: "flex flex-1 flex-col gap-2", children })
       ]
     }
   );
@@ -23092,7 +23279,7 @@ function Step({
 
 // src/components/ui/switch.tsx
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
-import { jsx as jsx193 } from "react/jsx-runtime";
+import { jsx as jsx194 } from "react/jsx-runtime";
 function mapSwitchSize(size) {
   return size === "xs" || size === "sm" ? "sm" : "default";
 }
@@ -23103,7 +23290,7 @@ function Switch({
   ...props
 }) {
   const mappedSize = mapSwitchSize(size);
-  return /* @__PURE__ */ jsx193(
+  return /* @__PURE__ */ jsx194(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -23115,7 +23302,7 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx193(
+      children: /* @__PURE__ */ jsx194(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
@@ -23127,7 +23314,7 @@ function Switch({
 }
 
 // src/components/ui/table-of-contents.tsx
-import { jsx as jsx194 } from "react/jsx-runtime";
+import { jsx as jsx195 } from "react/jsx-runtime";
 function TableOfContents({
   className,
   items,
@@ -23138,7 +23325,7 @@ function TableOfContents({
   minDepth = 1,
   ...props
 }) {
-  return /* @__PURE__ */ jsx194(
+  return /* @__PURE__ */ jsx195(
     "nav",
     {
       "data-slot": "table-of-contents",
@@ -23149,7 +23336,7 @@ function TableOfContents({
         const depth = item.depth ?? 1;
         const paddingLeft = Math.max(0, depth - minDepth) * depthOffset;
         const isActive = activeId === item.id;
-        return /* @__PURE__ */ jsx194(
+        return /* @__PURE__ */ jsx195(
           UnstyledButton,
           {
             type: "button",
@@ -23171,8 +23358,8 @@ function TableOfContents({
 
 // src/components/ui/tags-input.tsx
 import { IconX as IconX14 } from "@tabler/icons-react";
-import { useState as useState53 } from "react";
-import { jsx as jsx195, jsxs as jsxs111 } from "react/jsx-runtime";
+import { useState as useState54 } from "react";
+import { jsx as jsx196, jsxs as jsxs112 } from "react/jsx-runtime";
 function TagsInput({
   className,
   value,
@@ -23185,8 +23372,8 @@ function TagsInput({
   disabled = false,
   ...props
 }) {
-  const [internalValue, setInternalValue] = useState53(defaultValue);
-  const [inputValue, setInputValue] = useState53("");
+  const [internalValue, setInternalValue] = useState54(defaultValue);
+  const [inputValue, setInputValue] = useState54("");
   const tags = value ?? internalValue;
   const addTag = (tag) => {
     const trimmed = tag.trim();
@@ -23230,21 +23417,21 @@ function TagsInput({
     }
     setInputValue(newValue);
   };
-  return /* @__PURE__ */ jsxs111(
+  return /* @__PURE__ */ jsxs112(
     "div",
     {
       "data-slot": "tags-input",
       className: cn("cn-tags-input cn-combobox-chips", className),
       ...props,
       children: [
-        tags.map((tag, index) => /* @__PURE__ */ jsxs111(
+        tags.map((tag, index) => /* @__PURE__ */ jsxs112(
           "span",
           {
             "data-slot": "tags-input-tag",
             className: "cn-combobox-chip",
             children: [
               tag,
-              /* @__PURE__ */ jsxs111(
+              /* @__PURE__ */ jsxs112(
                 "button",
                 {
                   type: "button",
@@ -23253,8 +23440,8 @@ function TagsInput({
                   disabled,
                   className: "cn-combobox-chip-remove",
                   children: [
-                    /* @__PURE__ */ jsx195("span", { className: "sr-only", children: "Remove" }),
-                    /* @__PURE__ */ jsx195(IconX14, { className: "size-3" })
+                    /* @__PURE__ */ jsx196("span", { className: "sr-only", children: "Remove" }),
+                    /* @__PURE__ */ jsx196(IconX14, { className: "size-3" })
                   ]
                 }
               )
@@ -23262,7 +23449,7 @@ function TagsInput({
           },
           allowDuplicates ? `${tag}-${index}` : tag
         )),
-        /* @__PURE__ */ jsx195(
+        /* @__PURE__ */ jsx196(
           "input",
           {
             type: "text",
@@ -23281,7 +23468,7 @@ function TagsInput({
 
 // src/components/ui/text-input.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx196, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx197, jsxs as jsxs113 } from "react/jsx-runtime";
 var TextInput = forwardRef16(
   ({
     label,
@@ -23310,14 +23497,14 @@ var TextInput = forwardRef16(
       xl: "h-12"
     };
     const hasWrapper = label || description || error || required || withAsterisk;
-    const inputElement = /* @__PURE__ */ jsxs112(
+    const inputElement = /* @__PURE__ */ jsxs113(
       InputGroup,
       {
         disabled,
         className: cn(size && groupSizeClasses[size]),
         children: [
-          leftSection && /* @__PURE__ */ jsx196(InputGroupAddon, { align: "inline-start", className: "pointer-events-none", children: leftSection }),
-          /* @__PURE__ */ jsx196(
+          leftSection && /* @__PURE__ */ jsx197(InputGroupAddon, { align: "inline-start", className: "pointer-events-none", children: leftSection }),
+          /* @__PURE__ */ jsx197(
             InputGroupInput,
             {
               ref,
@@ -23328,7 +23515,7 @@ var TextInput = forwardRef16(
               ...inputProps
             }
           ),
-          rightSection && /* @__PURE__ */ jsx196(
+          rightSection && /* @__PURE__ */ jsx197(
             InputGroupAddon,
             {
               align: "inline-end",
@@ -23344,7 +23531,7 @@ var TextInput = forwardRef16(
     if (!hasWrapper) {
       return inputElement;
     }
-    return /* @__PURE__ */ jsx196(
+    return /* @__PURE__ */ jsx197(
       InputWrapper,
       {
         label,
@@ -23367,7 +23554,7 @@ TextInput.displayName = "TextInput";
 
 // src/components/ui/theme-icon.tsx
 import { cva as cva25 } from "class-variance-authority";
-import { jsx as jsx197 } from "react/jsx-runtime";
+import { jsx as jsx198 } from "react/jsx-runtime";
 var themeIconVariants = cva25(
   "cn-theme-icon inline-flex items-center justify-center shrink-0 transition-colors",
   {
@@ -23500,7 +23687,7 @@ function ThemeIcon({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx197(
+  return /* @__PURE__ */ jsx198(
     "div",
     {
       "data-slot": "theme-icon",
@@ -23515,9 +23702,9 @@ function ThemeIcon({
 }
 
 // src/components/ui/timeline.tsx
-import { jsx as jsx198 } from "react/jsx-runtime";
+import { jsx as jsx199 } from "react/jsx-runtime";
 function Timeline({ className, ...props }) {
-  return /* @__PURE__ */ jsx198(
+  return /* @__PURE__ */ jsx199(
     "ol",
     {
       "data-slot": "timeline",
@@ -23527,7 +23714,7 @@ function Timeline({ className, ...props }) {
   );
 }
 function TimelineItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx198(
+  return /* @__PURE__ */ jsx199(
     "li",
     {
       "data-slot": "timeline-item",
@@ -23541,7 +23728,7 @@ function TimelineDot({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx198(
+  return /* @__PURE__ */ jsx199(
     "div",
     {
       "data-slot": "timeline-dot",
@@ -23552,7 +23739,7 @@ function TimelineDot({
   );
 }
 function TimelineContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx198(
+  return /* @__PURE__ */ jsx199(
     "div",
     {
       "data-slot": "timeline-content",
@@ -23566,13 +23753,13 @@ function TimelineTitle({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx198(
+  return /* @__PURE__ */ jsx199(
     "h3",
     {
       "data-slot": "timeline-title",
       className: cn("cn-timeline-title", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx198("span", { className: "sr-only", children: "Timeline item" })
+      children: children ?? /* @__PURE__ */ jsx199("span", { className: "sr-only", children: "Timeline item" })
     }
   );
 }
@@ -23580,7 +23767,7 @@ function TimelineDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx198(
+  return /* @__PURE__ */ jsx199(
     "p",
     {
       "data-slot": "timeline-description",
@@ -23590,7 +23777,7 @@ function TimelineDescription({
   );
 }
 function TimelineTime({ className, ...props }) {
-  return /* @__PURE__ */ jsx198(
+  return /* @__PURE__ */ jsx199(
     "time",
     {
       "data-slot": "timeline-time",
@@ -23602,7 +23789,7 @@ function TimelineTime({ className, ...props }) {
 
 // src/components/ui/title.tsx
 import { cva as cva26 } from "class-variance-authority";
-import { jsx as jsx199 } from "react/jsx-runtime";
+import { jsx as jsx200 } from "react/jsx-runtime";
 var titleVariants = cva26("font-semibold tracking-tight text-pretty", {
   variants: {
     order: {
@@ -23653,7 +23840,7 @@ function Title({
   ...props
 }) {
   const Component = `h${order}`;
-  return /* @__PURE__ */ jsx199(
+  return /* @__PURE__ */ jsx200(
     Component,
     {
       "data-slot": "title",
@@ -23670,7 +23857,7 @@ function Title({
 // src/components/ui/toggle.tsx
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { cva as cva27 } from "class-variance-authority";
-import { jsx as jsx200 } from "react/jsx-runtime";
+import { jsx as jsx201 } from "react/jsx-runtime";
 var toggleVariants = cva27(
   'cn-toggle inline-flex items-center justify-center gap-2 whitespace-nowrap border border-transparent outline-none transition-colors [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
   {
@@ -23697,7 +23884,7 @@ function Toggle({
   size,
   ...props
 }) {
-  return /* @__PURE__ */ jsx200(
+  return /* @__PURE__ */ jsx201(
     TogglePrimitive,
     {
       "data-slot": "toggle",
@@ -23711,7 +23898,7 @@ function Toggle({
 import { Toggle as TogglePrimitive2 } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
 import * as React16 from "react";
-import { jsx as jsx201 } from "react/jsx-runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
 var ToggleGroupContext = React16.createContext({
   size: "default",
   variant: "default",
@@ -23725,7 +23912,7 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx201(
+  return /* @__PURE__ */ jsx202(
     ToggleGroupPrimitive,
     {
       "data-slot": "toggle-group",
@@ -23738,7 +23925,7 @@ function ToggleGroup({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx201(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
+      children: /* @__PURE__ */ jsx202(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
     }
   );
 }
@@ -23750,7 +23937,7 @@ function ToggleGroupItem({
   ...props
 }) {
   const context = React16.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx201(
+  return /* @__PURE__ */ jsx202(
     TogglePrimitive2,
     {
       "data-slot": "toggle-group-item",
@@ -23772,8 +23959,8 @@ function ToggleGroupItem({
 }
 
 // src/components/ui/transition.tsx
-import { useEffect as useEffect31, useState as useState54 } from "react";
-import { Fragment as Fragment30, jsx as jsx202 } from "react/jsx-runtime";
+import { useEffect as useEffect31, useState as useState55 } from "react";
+import { Fragment as Fragment31, jsx as jsx203 } from "react/jsx-runtime";
 var TRANSITIONS = {
   fade: {
     in: { opacity: 1 },
@@ -23827,10 +24014,10 @@ var TRANSITIONS = {
   }
 };
 function useTransitionState(mounted, duration, exitDuration, timingFunction, onEnter, onEntered, onExit, onExited, enterDelay, exitDelay) {
-  const [status, setStatus] = useState54(
+  const [status, setStatus] = useState55(
     mounted ? "entered" : "exited"
   );
-  const [displayDuration, setDisplayDuration] = useState54(duration);
+  const [displayDuration, setDisplayDuration] = useState55(duration);
   useEffect31(() => {
     if (mounted) {
       setDisplayDuration(duration);
@@ -23913,7 +24100,7 @@ function Transition({
   const t = TRANSITIONS[transition];
   if (!t) {
     if (mounted) {
-      return /* @__PURE__ */ jsx202(Fragment30, { children: children({}) });
+      return /* @__PURE__ */ jsx203(Fragment31, { children: children({}) });
     }
     if (keepMounted) {
       return children({ display: "none" });
@@ -23939,13 +24126,13 @@ function Transition({
     transitionDuration: `${d}ms`,
     transitionTimingFunction: tf
   };
-  return /* @__PURE__ */ jsx202(Fragment30, { children: children(styles) });
+  return /* @__PURE__ */ jsx203(Fragment31, { children: children(styles) });
 }
 
 // src/components/ui/tree.tsx
 import { IconChevronRight as IconChevronRight11 } from "@tabler/icons-react";
-import { useState as useState55 } from "react";
-import { jsx as jsx203, jsxs as jsxs113 } from "react/jsx-runtime";
+import { useState as useState56 } from "react";
+import { jsx as jsx204, jsxs as jsxs114 } from "react/jsx-runtime";
 function Tree({
   className,
   data,
@@ -23959,7 +24146,7 @@ function Tree({
   renderNode,
   ...props
 }) {
-  const [internalExpanded, setInternalExpanded] = useState55(
+  const [internalExpanded, setInternalExpanded] = useState56(
     /* @__PURE__ */ new Set()
   );
   const expanded = expandedProp !== void 0 ? expandedProp : internalExpanded;
@@ -23981,14 +24168,14 @@ function Tree({
       onSelectedValueChange?.(node.value);
     }
   };
-  return /* @__PURE__ */ jsx203(
+  return /* @__PURE__ */ jsx204(
     "div",
     {
       "data-slot": "tree",
       role: "tree",
       className: cn("cn-tree", className),
       ...props,
-      children: data.map((node) => /* @__PURE__ */ jsx203(
+      children: data.map((node) => /* @__PURE__ */ jsx204(
         TreeNode,
         {
           node,
@@ -24026,14 +24213,14 @@ function TreeNode({
     hasChildren,
     selected
   }) ?? node.label;
-  return /* @__PURE__ */ jsxs113(
+  return /* @__PURE__ */ jsxs114(
     "div",
     {
       role: "treeitem",
       tabIndex: 0,
       "aria-expanded": hasChildren ? expanded : void 0,
       children: [
-        /* @__PURE__ */ jsxs113(
+        /* @__PURE__ */ jsxs114(
           UnstyledButton,
           {
             type: "button",
@@ -24042,21 +24229,21 @@ function TreeNode({
             style: { paddingLeft: `${level * levelOffset + 4}px` },
             onClick: () => handleNodeClick(node, hasChildren),
             children: [
-              hasChildren ? /* @__PURE__ */ jsx203(
+              hasChildren ? /* @__PURE__ */ jsx204(
                 "span",
                 {
                   className: cn(
                     "cn-tree-node-chevron text-muted-foreground flex shrink-0 transition-transform",
                     expanded && "rotate-90"
                   ),
-                  children: /* @__PURE__ */ jsx203(IconChevronRight11, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx204(IconChevronRight11, { className: "size-4" })
                 }
-              ) : /* @__PURE__ */ jsx203("span", { "aria-hidden": true, className: "cn-tree-node-spacer w-4 shrink-0" }),
-              /* @__PURE__ */ jsx203("span", { className: "cn-tree-node-label min-w-0 flex-1 truncate", children: label })
+              ) : /* @__PURE__ */ jsx204("span", { "aria-hidden": true, className: "cn-tree-node-spacer w-4 shrink-0" }),
+              /* @__PURE__ */ jsx204("span", { className: "cn-tree-node-label min-w-0 flex-1 truncate", children: label })
             ]
           }
         ),
-        hasChildren && expanded && node.children && /* @__PURE__ */ jsx203("fieldset", { className: "cn-tree-node-children list-none border-0 p-0 m-0 min-w-0", children: node.children.map((child) => /* @__PURE__ */ jsx203(
+        hasChildren && expanded && node.children && /* @__PURE__ */ jsx204("fieldset", { className: "cn-tree-node-children list-none border-0 p-0 m-0 min-w-0", children: node.children.map((child) => /* @__PURE__ */ jsx204(
           TreeNode,
           {
             node: child,
@@ -24430,6 +24617,7 @@ export {
   RichTextEditorToolbar,
   RichTextInput,
   RingProgress,
+  STATUS_MENU_SEPARATOR,
   ScrollArea,
   ScrollBar,
   DisplayTableScrollContainer as ScrollContainer,
@@ -24487,6 +24675,7 @@ export {
   Spoiler,
   SpotlightSearch,
   Stack,
+  StatusDropdownButton,
   Step,
   Stepper,
   Switch,