@cytario/design 7.0.0 → 7.1.0

package/dist/index.js

@@ -736,6 +736,7 @@ function IconButtonBase({
   isLoading = false,
   isDisabled,
   className,
+  ref,
   ...props
 }) {
   const cx = twMerge4(
@@ -751,6 +752,7 @@ function IconButtonBase({
     Component,
     {
       ...props,
+      ref,
       "aria-label": label,
       isDisabled: isDisabled || isLoading,
       className: cx,
@@ -1935,14 +1937,19 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
+import { twMerge as twMerge10 } from "tailwind-merge";
+
+// src/components/Menu/menuStyles.ts
+var popoverStyles = `
+  bg-background rounded-md shadow-lg
+  border border-border
+  py-1 min-w-48
+  entering:animate-in entering:fade-in entering:zoom-in-95
+  exiting:animate-out exiting:fade-out exiting:zoom-out-95
+`;
+
+// src/components/Menu/Menu.tsx
 import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
-var popoverStyles = [
-  "bg-background rounded-md",
-  "shadow-lg border border-border",
-  "py-1 min-w-48",
-  "entering:animate-in entering:fade-in entering:zoom-in-95",
-  "exiting:animate-out exiting:fade-out exiting:zoom-out-95"
-].join(" ");
 function Menu({
   items,
   content,
@@ -1957,61 +1964,161 @@ function Menu({
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
   return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx24(
-      Popover2,
+    /* @__PURE__ */ jsx24(Popover2, { className: twMerge10(popoverStyles, className), children: items ? /* @__PURE__ */ jsx24(
+      AriaMenu,
       {
-        className: [popoverStyles, className].filter(Boolean).join(" "),
-        children: items ? /* @__PURE__ */ jsx24(
-          AriaMenu,
+        items,
+        onAction: (key) => {
+          const item = items.find((i) => i.id === key);
+          item?.onAction?.();
+          onAction?.(key);
+        },
+        ...selectionProps,
+        className: "outline-none",
+        children: (item) => /* @__PURE__ */ jsxs18(
+          AriaMenuItem,
           {
-            items,
-            onAction: (key) => {
-              const item = items.find((i) => i.id === key);
-              item?.onAction?.();
-              onAction?.(key);
-            },
-            ...selectionProps,
-            className: "outline-none",
-            children: (item) => /* @__PURE__ */ jsxs18(
-              AriaMenuItem,
+            id: item.id,
+            href: item.href,
+            target: item.target,
+            isDisabled: item.isDisabled,
+            className: [
+              "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
+              "transition-colors",
+              "focus:bg-muted",
+              "hover:bg-muted",
+              "disabled:opacity-50 disabled:pointer-events-none",
+              item.isDanger ? "text-destructive" : "text-foreground"
+            ].filter(Boolean).join(" "),
+            children: [
+              item.icon && /* @__PURE__ */ jsx24(Icon, { icon: item.icon, size: "sm" }),
+              /* @__PURE__ */ jsx24("span", { className: "flex-1", children: item.label }),
+              item.endContent && /* @__PURE__ */ jsx24("span", { className: "ml-auto flex items-center", children: item.endContent })
+            ]
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx24(
+      AriaMenu,
+      {
+        onAction: (key) => onAction?.(key),
+        ...selectionProps,
+        className: "outline-none",
+        children: content
+      }
+    ) })
+  ] });
+}
+
+// src/components/Menu/useContextMenu.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect3,
+  useRef as useRef5,
+  useState as useState7
+} from "react";
+import {
+  Menu as AriaMenu2,
+  MenuTrigger as MenuTrigger2,
+  Popover as Popover3,
+  Pressable
+} from "react-aria-components";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+function useContextMenu({
+  content,
+  onAction,
+  className
+}) {
+  const [anchor, setAnchor] = useState7(null);
+  const anchorRef = useRef5(null);
+  const popoverRef = useRef5(null);
+  const isOpen = anchor !== null;
+  const close = useCallback3(() => setAnchor(null), []);
+  const onContextMenu = useCallback3((event) => {
+    event.preventDefault();
+    setAnchor({ x: event.clientX, y: event.clientY });
+  }, []);
+  const onPress = useCallback3((event) => {
+    const rect = event.target.getBoundingClientRect();
+    setAnchor({ x: rect.left, y: rect.bottom });
+  }, []);
+  useEffect3(() => {
+    if (!isOpen) return;
+    const isInside = (target) => popoverRef.current?.contains(target) ?? false;
+    const onPointerDown = (event) => {
+      if (!isInside(event.target)) close();
+    };
+    const onOutsideContextMenu = (event) => {
+      if (isInside(event.target)) return;
+      event.preventDefault();
+      close();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("contextmenu", onOutsideContextMenu, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("contextmenu", onOutsideContextMenu, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [isOpen, close]);
+  const menu = /* @__PURE__ */ jsxs19(
+    MenuTrigger2,
+    {
+      isOpen,
+      onOpenChange: (open) => {
+        if (!open) close();
+      },
+      children: [
+        /* @__PURE__ */ jsx25(Pressable, { children: /* @__PURE__ */ jsx25(
+          "span",
+          {
+            ref: anchorRef,
+            "aria-hidden": true,
+            className: "pointer-events-none fixed h-0 w-0",
+            style: { left: anchor?.x ?? 0, top: anchor?.y ?? 0 }
+          }
+        ) }),
+        /* @__PURE__ */ jsx25(
+          Popover3,
+          {
+            isNonModal: true,
+            placement: "bottom start",
+            ref: popoverRef,
+            className: twMerge11(popoverStyles, className),
+            children: /* @__PURE__ */ jsx25(
+              AriaMenu2,
               {
-                id: item.id,
-                href: item.href,
-                target: item.target,
-                isDisabled: item.isDisabled,
-                className: [
-                  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
-                  "transition-colors",
-                  "focus:bg-muted",
-                  "hover:bg-muted",
-                  "disabled:opacity-50 disabled:pointer-events-none",
-                  item.isDanger ? "text-destructive" : "text-foreground"
-                ].filter(Boolean).join(" "),
-                children: [
-                  item.icon && /* @__PURE__ */ jsx24(Icon, { icon: item.icon, size: "sm" }),
-                  /* @__PURE__ */ jsx24("span", { className: "flex-1", children: item.label }),
-                  item.endContent && /* @__PURE__ */ jsx24("span", { className: "ml-auto flex items-center", children: item.endContent })
-                ]
+                autoFocus: "first",
+                onAction: (key) => {
+                  onAction?.(String(key));
+                  close();
+                },
+                className: "outline-none",
+                children: content
               }
             )
           }
-        ) : /* @__PURE__ */ jsx24(
-          AriaMenu,
-          {
-            onAction: (key) => onAction?.(key),
-            ...selectionProps,
-            className: "outline-none",
-            children: content
-          }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
+  return {
+    targetProps: { onContextMenu },
+    triggerProps: { onPress },
+    menu,
+    isOpen,
+    close
+  };
 }
 
 // src/components/Menu/MenuItem.tsx
 import { MenuItem as AriaMenuItem2 } from "react-aria-components";
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function MenuItem({
   id,
   children,
@@ -2025,7 +2132,7 @@ function MenuItem({
   textValue,
   className
 }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     AriaMenuItem2,
     {
       id,
@@ -2044,9 +2151,9 @@ function MenuItem({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx25(Icon, { icon, size: "sm" }),
-        /* @__PURE__ */ jsx25("span", { className: "flex-1", children }),
-        endContent && /* @__PURE__ */ jsx25("span", { className: "ml-auto flex items-center", children: endContent })
+        icon && /* @__PURE__ */ jsx26(Icon, { icon, size: "sm" }),
+        /* @__PURE__ */ jsx26("span", { className: "flex-1", children }),
+        endContent && /* @__PURE__ */ jsx26("span", { className: "ml-auto flex items-center", children: endContent })
       ]
     }
   );
@@ -2055,7 +2162,7 @@ function MenuItem({
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
 import { Check as Check4 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
   children,
@@ -2063,7 +2170,7 @@ function MenuCheckboxItem({
   isDisabled,
   className
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     AriaMenuItem3,
     {
       id,
@@ -2079,9 +2186,9 @@ function MenuCheckboxItem({
         isSelected ? "font-medium" : "",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
-        /* @__PURE__ */ jsx26("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx26(Check4, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx26("span", { className: "flex-1", children })
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs21(Fragment7, { children: [
+        /* @__PURE__ */ jsx27("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx27(Check4, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx27("span", { className: "flex-1", children })
       ] })
     }
   );
@@ -2092,15 +2199,15 @@ import {
   MenuSection as AriaMenuSection,
   Header
 } from "react-aria-components";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function MenuSection({
   header,
   children,
   "aria-label": ariaLabel,
   className
 }) {
-  return /* @__PURE__ */ jsxs21(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
-    header && /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs22(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
+    header && /* @__PURE__ */ jsx28(
       Header,
       {
         className: [
@@ -2119,16 +2226,16 @@ function MenuSection({
 
 // src/components/Menu/MenuHeader.tsx
 import { Header as Header2 } from "react-aria-components";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function MenuHeader({ children, className }) {
-  return /* @__PURE__ */ jsx28(Header2, { className, children });
+  return /* @__PURE__ */ jsx29(Header2, { className, children });
 }
 
 // src/components/Menu/MenuSeparator.tsx
 import { Separator } from "react-aria-components";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     Separator,
     {
       className: [
@@ -2145,17 +2252,17 @@ import {
   Popover as AriaPopover,
   Button as AriaButton3
 } from "react-aria-components";
-import { twMerge as twMerge10 } from "tailwind-merge";
-import { jsx as jsx30 } from "react/jsx-runtime";
-function Popover3({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx30(DialogTrigger, { isOpen, onOpenChange, children });
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function Popover4({ children, isOpen, onOpenChange }) {
+  return /* @__PURE__ */ jsx31(DialogTrigger, { isOpen, onOpenChange, children });
 }
 function PopoverTrigger({ children, className }) {
   const cx = `
     inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
     focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm
   `;
-  return /* @__PURE__ */ jsx30(AriaButton3, { className: twMerge10(cx, className), children });
+  return /* @__PURE__ */ jsx31(AriaButton3, { className: twMerge12(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
@@ -2176,13 +2283,13 @@ function PopoverContent({
     entering:placement-left:slide-in-from-right-1
     entering:placement-right:slide-in-from-left-1
   `;
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     AriaPopover,
     {
       ...rest,
       placement,
       offset: offsetPx,
-      className: twMerge10(cx, className),
+      className: twMerge12(cx, className),
       children
     }
   );
@@ -2190,14 +2297,14 @@ function PopoverContent({
 
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { twMerge as twMerge11 } from "tailwind-merge";
+import { twMerge as twMerge13 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
   Tab as AriaTab,
   TabPanel as AriaTabPanel
 } from "react-aria-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var TabsContext = createContext2({
   variant: "underline",
   size: "md"
@@ -2215,12 +2322,12 @@ function Tabs({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx32(
     AriaTabs,
     {
       ...props,
       orientation,
-      className: twMerge11(
+      className: twMerge13(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -2235,11 +2342,11 @@ function TabList({
   const { variant } = useContext2(TabsContext);
   const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-border" : "inline-flex items-center bg-muted rounded-lg p-1 gap-1";
   const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-border" : "flex-col";
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge11(
+      className: ({ orientation }) => twMerge13(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2249,20 +2356,20 @@ function TabList({
 }
 function Tab({ className, ...props }) {
   const { variant, size } = useContext2(TabsContext);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     AriaTab,
     {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge11(
+          return twMerge13(
             "cursor-pointer outline-none",
             "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
         }
-        return twMerge11(
+        return twMerge13(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2306,11 +2413,11 @@ function getTabVariantStyles(variant, state) {
 }
 function TabPanel({ className, ...props }) {
   const { variant } = useContext2(TabsContext);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     AriaTabPanel,
     {
       ...props,
-      className: twMerge11(
+      className: twMerge13(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2328,12 +2435,12 @@ import {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge12 } from "tailwind-merge";
+import { twMerge as twMerge14 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton3
 } from "react-aria-components";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var SegmentedControlContext = createContext3({
   size: "md"
 });
@@ -2353,7 +2460,7 @@ function SegmentedControl({
   ...props
 }) {
   const isNoneMode = selectionMode === "none";
-  return /* @__PURE__ */ jsx32(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx33(
     AriaToggleButtonGroup,
     {
       ...props,
@@ -2361,7 +2468,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge12(
+      className: twMerge14(
         "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
         className
       ),
@@ -2374,11 +2481,11 @@ function SegmentedControlItem({
   ...props
 }) {
   const { size } = useContext3(SegmentedControlContext);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     AriaToggleButton3,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge12(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge14(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2399,8 +2506,8 @@ function SegmentedControlItem({
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge13 } from "tailwind-merge";
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var variantStyles4 = {
   neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
   purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
@@ -2421,18 +2528,18 @@ function Badge({
   icon,
   className
 }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "span",
     {
-      className: twMerge13(
+      className: twMerge15(
         "inline-flex items-center gap-1 rounded-full",
-        "text-xs font-medium leading-tight",
+        "text-xs font-medium leading-tight tracking-wider tabular-nums",
         variantStyles4[variant],
         sizeStyles6[size],
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx33(Icon, { icon, size: "xs" }),
+        icon && /* @__PURE__ */ jsx34(Icon, { icon, size: "xs" }),
         children
       ]
     }
@@ -2440,9 +2547,9 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
-import { useCallback as useCallback3 } from "react";
-import { twMerge as twMerge14 } from "tailwind-merge";
-import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useCallback as useCallback4 } from "react";
+import { twMerge as twMerge16 } from "tailwind-merge";
+import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2460,13 +2567,13 @@ function Card({
   className
 }) {
   const isInteractive = interactive || !!href || !!onPress;
-  const containerClass = twMerge14(
+  const containerClass = twMerge16(
     "bg-background border border-border rounded-lg overflow-hidden shadow-sm",
     isInteractive && "transition-all hover:shadow-md hover:border-ring cursor-pointer",
     (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
     className
   );
-  const handleKeyDown = useCallback3(
+  const handleKeyDown = useCallback4(
     (e) => {
       if (onPress && (e.key === "Enter" || e.key === " ")) {
         e.preventDefault();
@@ -2475,22 +2582,22 @@ function Card({
     },
     [onPress]
   );
-  const content = /* @__PURE__ */ jsxs23(Fragment8, { children: [
-    header && /* @__PURE__ */ jsx34(
+  const content = /* @__PURE__ */ jsxs24(Fragment8, { children: [
+    header && /* @__PURE__ */ jsx35(
       "div",
       {
-        className: twMerge14(
+        className: twMerge16(
           "border-b border-border",
           paddingStyles[padding]
         ),
         children: header
       }
     ),
-    /* @__PURE__ */ jsx34("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx35(
       "div",
       {
-        className: twMerge14(
+        className: twMerge16(
           "border-t border-border",
           paddingStyles[padding]
         ),
@@ -2499,10 +2606,10 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx34("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx35("a", { href, className: containerClass, children: content });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(
       "div",
       {
         role: "button",
@@ -2514,13 +2621,13 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsx34("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx35("div", { className: containerClass, children: content });
 }
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp as ArrowUp2, ArrowDown as ArrowDown2, Minus as Minus2 } from "lucide-react";
-import { twMerge as twMerge15 } from "tailwind-merge";
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2573,16 +2680,16 @@ function DeltaIndicator({
   className
 }) {
   if (unavailable) {
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs25(
       "span",
       {
-        className: twMerge15(
+        className: twMerge17(
           "inline-flex items-center gap-1 font-medium",
           "text-muted-foreground",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx35("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+          label && /* @__PURE__ */ jsx36("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2612,10 +2719,10 @@ function DeltaIndicator({
     }
   }
   const isPill = mode === "pill";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "span",
     {
-      className: twMerge15(
+      className: twMerge17(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2626,8 +2733,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx35("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
-        /* @__PURE__ */ jsx35(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx36("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+        /* @__PURE__ */ jsx36(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2635,8 +2742,8 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge16 } from "tailwind-merge";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-(--color-progress-fill)",
   success: "bg-(--color-progress-fill-success)",
@@ -2659,12 +2766,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs25("div", { className: twMerge16("w-full", className), children: [
-    (label || description || showValue) && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx36("span", { className: "text-sm font-medium text-foreground", children: label }),
-      /* @__PURE__ */ jsx36("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
+  return /* @__PURE__ */ jsxs26("div", { className: twMerge18("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx37("span", { className: "text-sm font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsx37("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         role: "progressbar",
@@ -2672,14 +2779,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge16(
+        className: twMerge18(
           "w-full rounded-full bg-(--color-progress-track)",
           sizeStyles7[size]
         ),
-        children: /* @__PURE__ */ jsx36(
+        children: /* @__PURE__ */ jsx37(
           "div",
           {
-            className: twMerge16(
+            className: twMerge18(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2692,15 +2799,15 @@ function ProgressBar({
 }
 
 // src/components/Banner/Banner.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import {
   Info as Info3,
   AlertTriangle as AlertTriangle2,
   AlertCircle as AlertCircle2,
   CheckCircle2 as CheckCircle22
 } from "lucide-react";
-import { twMerge as twMerge17 } from "tailwind-merge";
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge19 } from "tailwind-merge";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info3,
@@ -2736,7 +2843,7 @@ function Banner({
   onDismiss,
   className
 }) {
-  const [dismissed, setDismissed] = useState7(false);
+  const [dismissed, setDismissed] = useState8(false);
   if (dismissed) return null;
   const config = variantConfig2[variant];
   const resolvedIcon = icon ?? config.icon;
@@ -2744,40 +2851,40 @@ function Banner({
     setDismissed(true);
     onDismiss?.();
   };
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       role: config.role,
-      className: twMerge17(
+      className: twMerge19(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           Icon,
           {
             icon: resolvedIcon,
             size: "md",
-            className: twMerge17("mt-0.5", config.iconClass)
+            className: twMerge19("mt-0.5", config.iconClass)
           }
         ),
-        /* @__PURE__ */ jsxs26("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs26("span", { className: "font-medium", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs27("span", { className: "font-medium", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx37(
+        dismissible && /* @__PURE__ */ jsx38(
           "button",
           {
             type: "button",
             onClick: handleDismiss,
             className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx37(Icon, { icon: "X", size: "sm" })
+            children: /* @__PURE__ */ jsx38(Icon, { icon: "X", size: "sm" })
           }
         )
       ]
@@ -2786,8 +2893,8 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge18 } from "tailwind-merge";
-import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge20 } from "tailwind-merge";
+import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -2809,58 +2916,58 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge18(
+  const containerClass = twMerge20(
     "bg-background border border-border rounded-lg shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs27(Fragment9, { children: [
-    /* @__PURE__ */ jsx38("div", { className: twMerge18(config.labelClass, "text-muted-foreground"), children: label }),
-    /* @__PURE__ */ jsx38(
+  const content = /* @__PURE__ */ jsxs28(Fragment9, { children: [
+    /* @__PURE__ */ jsx39("div", { className: twMerge20(config.labelClass, "text-muted-foreground"), children: label }),
+    /* @__PURE__ */ jsx39(
       "div",
       {
-        className: twMerge18(
+        className: twMerge20(
           config.valueClass,
           "font-semibold text-foreground mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx38("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx39("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx38("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx39("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx38("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx39("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
-import { twMerge as twMerge19 } from "tailwind-merge";
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { twMerge as twMerge21 } from "tailwind-merge";
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
-      className: twMerge19(
+      className: twMerge21(
         "flex flex-wrap items-center gap-3 py-4",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx39(H2, { children: title }),
-        children && /* @__PURE__ */ jsx39("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
+        /* @__PURE__ */ jsx40(H2, { children: title }),
+        children && /* @__PURE__ */ jsx40("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
       ]
     }
   );
 }
 
 // src/components/Pill/Pill.tsx
-import { twMerge as twMerge20 } from "tailwind-merge";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { twMerge as twMerge22 } from "tailwind-merge";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var hashColors = {
   purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text) border-(--color-badge-purple-text)/20",
   teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text) border-(--color-badge-teal-text)/20",
@@ -2886,7 +2993,7 @@ function Pill({
   className,
   ...rest
 }) {
-  const cx = twMerge20(
+  const cx = twMerge22(
     `
     inline-flex items-center
     rounded-full
@@ -2898,12 +3005,12 @@ function Pill({
     colorStyles[color],
     className
   );
-  return /* @__PURE__ */ jsx40("span", { className: cx, ...rest, children });
+  return /* @__PURE__ */ jsx41("span", { className: cx, ...rest, children });
 }
 
 // src/components/Pill/PathPill.tsx
-import { twMerge as twMerge21 } from "tailwind-merge";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { twMerge as twMerge23 } from "tailwind-merge";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function PathPill({
   children,
   visibleCount,
@@ -2915,17 +3022,17 @@ function PathPill({
   const effectiveVisible = visibleCount ?? segments.length;
   const dotCount = Math.max(0, segments.length - effectiveVisible);
   const fullPath = segments.join(" / ");
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
-      className: twMerge21("relative flex", className),
+      className: twMerge23("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge21(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const cx = twMerge23(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
-        return /* @__PURE__ */ jsx41(
+        return /* @__PURE__ */ jsx42(
           Pill,
           {
             className: cx,
@@ -2941,8 +3048,8 @@ function PathPill({
 }
 
 // src/components/FormWizard/FormWizard.tsx
-import { createContext as createContext4, useContext as useContext4, useCallback as useCallback4, useMemo } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { createContext as createContext4, useContext as useContext4, useCallback as useCallback5, useMemo } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var FormWizardContext = createContext4({
   currentStep: 0,
   totalSteps: 1,
@@ -2962,7 +3069,7 @@ function FormWizard({
 }) {
   const canGoBack = currentStep > 0;
   const isLastStep = currentStep >= totalSteps - 1;
-  const goBack = useCallback4(() => {
+  const goBack = useCallback5(() => {
     if (currentStep > 0) {
       onStepChange(currentStep - 1);
     }
@@ -2977,13 +3084,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx42(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx43(FormWizardContext.Provider, { value, children });
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 function CheckIcon() {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "svg",
     {
       "aria-hidden": "true",
@@ -2994,24 +3101,24 @@ function CheckIcon() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx43("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx44("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx43("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx43("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx44("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx44("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       "li",
       {
         className: "flex flex-1 flex-col items-center",
         "aria-current": isCurrent ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsxs30("div", { className: "flex w-full items-center", children: [
+            index > 0 ? /* @__PURE__ */ jsx44(
               "div",
               {
                 "aria-hidden": "true",
@@ -3020,8 +3127,8 @@ function FormWizardProgress({ labels }) {
                   index <= currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx43("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx43(
+            ) : /* @__PURE__ */ jsx44("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx44(
               "div",
               {
                 className: [
@@ -3033,10 +3140,10 @@ function FormWizardProgress({ labels }) {
                   isFuture ? "border-2 border-border bg-background text-muted-foreground" : ""
                 ].join(" "),
                 "aria-hidden": "true",
-                children: isCompleted ? /* @__PURE__ */ jsx43(CheckIcon, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx44(CheckIcon, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx43(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx44(
               "div",
               {
                 "aria-hidden": "true",
@@ -3045,9 +3152,9 @@ function FormWizardProgress({ labels }) {
                   index < currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx43("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx44("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx44(
             "span",
             {
               className: [
@@ -3065,15 +3172,15 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-end gap-3", children: [
-    canGoBack && /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-end gap-3", children: [
+    canGoBack && /* @__PURE__ */ jsx45(
       Button,
       {
         variant: "secondary",
@@ -3083,7 +3190,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45(
       Button,
       {
         variant: "primary",
@@ -3513,7 +3620,7 @@ export {
   MetricCard,
   PathPill,
   Pill,
-  Popover3 as Popover,
+  Popover4 as Popover,
   PopoverContent,
   PopoverTrigger,
   ProgressBar,
@@ -3554,6 +3661,7 @@ export {
   createToastBridge,
   iconRegistry,
   pillColorFromName,
+  useContextMenu,
   useFormWizard,
   useToast
 };