@mdigital_ui/ui 0.2.5 → 0.2.6

package/dist/index.js

@@ -1,63 +1,642 @@
-export { tooltip_default as Tooltip } from './chunk-D3JWPGCA.js';
-export { Transfer } from './chunk-FCMVKFVV.js';
-export { tree_select_default as TreeSelect } from './chunk-ASW7TEAN.js';
-export { tree_default as Tree } from './chunk-SAVE5ACL.js';
-export { upload_default as Upload } from './chunk-I5ANSIDK.js';
-export { slider_default as Slider } from './chunk-NNSS366W.js';
-export { stepper_default as Stepper } from './chunk-MLDX3Z67.js';
-export { switch_default as Switch } from './chunk-YZ6V6BQ7.js';
-export { table_default as Table } from './chunk-ZNJ7M5QK.js';
-export { toggle_group_default as ToggleGroup } from './chunk-SK5ECBBK.js';
-export { tabs_default as Tabs } from './chunk-OW5A5IIF.js';
-export { textarea_default as Textarea } from './chunk-FPOXTCYV.js';
-export { toggle_default as Toggle } from './chunk-DPOSWW22.js';
-export { progress_default as Progress } from './chunk-JLTDJ3VZ.js';
-export { radio_default as Radio } from './chunk-GEWR5ROK.js';
-export { radio_group_default as RadioGroup } from './chunk-DOKTHDG3.js';
-export { rating_default as Rating } from './chunk-FYHQDFKE.js';
-export { ribbon_default as Ribbon } from './chunk-C7SXY3ZV.js';
-export { select_default as Select } from './chunk-UAMFKX6L.js';
-export { skeleton_default as Skeleton } from './chunk-75XESYGN.js';
-export { input_group_default as InputGroup } from './chunk-KBCBVH7B.js';
-export { input_otp_default as InputOTP } from './chunk-R225A5II.js';
-export { input_password_default as InputPassword } from './chunk-6V5I5HJ2.js';
-export { kbd_default as Kbd } from './chunk-OQANRZPV.js';
-export { multi_select_default as MultiSelect } from './chunk-267WNY3E.js';
-export { notification_default as Notification } from './chunk-YZVSDRJD.js';
-export { pagination_default as Pagination } from './chunk-FGWSUPVW.js';
-export { descriptions_default as Descriptions } from './chunk-S5XJXU52.js';
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-AWPKZYHT.js';
-export { grid_default as Grid } from './chunk-7PKVBUGL.js';
-export { image_default as Image } from './chunk-XMAH5PDW.js';
-export { empty_default as Empty } from './chunk-ROR4E6IE.js';
-export { fetching_overlay_default as FetchingOverlay } from './chunk-BNILRB4T.js';
-export { input_default as Input } from './chunk-XMKNYG7I.js';
-export { cascader_default as Cascader } from './chunk-G6TAVRTJ.js';
-export { AreaChart, BarChart, ComposedChart, LineChart, PieChart } from './chunk-BP434VYV.js';
-export { checkbox_default as Checkbox } from './chunk-OALOWWO7.js';
-export { checkbox_group_default as CheckboxGroup } from './chunk-RPAQAZTI.js';
-export { clipboard_default as Clipboard } from './chunk-RMGIO27V.js';
-export { collapse_default as Collapse } from './chunk-SOV4PE3P.js';
-export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut } from './chunk-LEKLQR4I.js';
-export { modal_default as Modal } from './chunk-Y5A26EGR.js';
-export { DatePicker, RangePickerComponent as RangePicker, TimePickerComponent as TimePicker } from './chunk-QPJL66S7.js';
-export { accordion_default as Accordion } from './chunk-2EKAF6EJ.js';
-export { badge_default as Badge } from './chunk-BFO3ARVJ.js';
-export { breadcrumbs_default as Breadcrumbs } from './chunk-HUVXKOJC.js';
-export { dropdown_default as Dropdown } from './chunk-KNQ7UQ2W.js';
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-3PFA3YG6.js';
-export { button_default as Button } from './chunk-KTAIRCOL.js';
-export { spinner_default as Spinner } from './chunk-J3G5WWGR.js';
-export { buttonColors, commonSpacing, componentColors, componentSizeVariants, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createLinkColorVariants, createOutlineColorVariants, createSoftColorVariants, createSolidColorVariants, extendedComponentSizeVariants, getAccordionColorClass, getCheckboxColorClass, getIconColorClass, iconColorClasses, textColorVariants } from './chunk-5UEWVFF6.js';
-export { button_group_default as ButtonGroup } from './chunk-56IXGP5C.js';
-export { card_default as Card } from './chunk-OOS3B7YZ.js';
-import { cn } from './chunk-YNNAOXU5.js';
-export { cn, getValidationStatus, iconSizes } from './chunk-YNNAOXU5.js';
-export { carousel_default as Carousel } from './chunk-C3MX5EXL.js';
+export { toggle_default as Toggle } from './chunk-XG3KLPPS.js';
+export { tooltip_default as Tooltip } from './chunk-DV5J5NLI.js';
+export { Transfer } from './chunk-HBEJ4S2Y.js';
+export { tree_select_default as TreeSelect } from './chunk-R2FZO7AM.js';
+export { tree_default as Tree } from './chunk-HWSLJGT7.js';
+export { upload_default as Upload } from './chunk-INH7KYCK.js';
+export { slider_default as Slider } from './chunk-BYWYC7RC.js';
+export { stepper_default as Stepper } from './chunk-IUUEYOMN.js';
+export { switch_default as Switch } from './chunk-JFGLDCAK.js';
+export { tabs_default as Tabs } from './chunk-GFQXGLFD.js';
+export { table_default as Table } from './chunk-7TN4PGYF.js';
+export { textarea_default as Textarea } from './chunk-SOIF4SHB.js';
+export { toggle_group_default as ToggleGroup } from './chunk-GGREAJO5.js';
+export { progress_default as Progress } from './chunk-TIMRHEKH.js';
+export { radio_default as Radio } from './chunk-23BPDLT4.js';
+export { radio_group_default as RadioGroup } from './chunk-SMVVCZNM.js';
+export { rating_default as Rating } from './chunk-6IPISGTP.js';
+export { ribbon_default as Ribbon } from './chunk-JGQOEAWL.js';
+export { select_default as Select } from './chunk-QVCGNOBE.js';
+export { skeleton_default as Skeleton } from './chunk-L6EVOPWH.js';
+export { input_group_default as InputGroup } from './chunk-DP6AWUH5.js';
+export { input_otp_default as InputOTP } from './chunk-C2MZL644.js';
+export { input_password_default as InputPassword } from './chunk-6PFBSVLK.js';
+export { kbd_default as Kbd } from './chunk-555KXZRK.js';
+export { multi_select_default as MultiSelect } from './chunk-77YTCM7G.js';
+export { notification_default as Notification } from './chunk-NZA526GC.js';
+export { pagination_default as Pagination } from './chunk-O2VJ6KP4.js';
+export { descriptions_default as Descriptions } from './chunk-GH3CNX5N.js';
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-6MYKJE6A.js';
+export { empty_default as Empty } from './chunk-YII4K64U.js';
+export { fetching_overlay_default as FetchingOverlay } from './chunk-IHKPZOE5.js';
+export { grid_default as Grid } from './chunk-CPPFXCNB.js';
+export { image_default as Image } from './chunk-7BUNJYZO.js';
+export { input_default as Input } from './chunk-LSQLUYTD.js';
+export { cascader_default as Cascader } from './chunk-3WVJE5MF.js';
+export { AreaChart, BarChart, ComposedChart, LineChart, PieChart } from './chunk-Y2CXG3PT.js';
+export { checkbox_default as Checkbox } from './chunk-PQZB43VJ.js';
+export { checkbox_group_default as CheckboxGroup } from './chunk-7YPX6NJK.js';
+export { clipboard_default as Clipboard } from './chunk-SYDNDYZJ.js';
+export { collapse_default as Collapse } from './chunk-35K7N4JT.js';
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut } from './chunk-ARK3EROZ.js';
+export { modal_default as Modal } from './chunk-IRNJZ754.js';
+export { DatePicker, RangePickerComponent as RangePicker, TimePickerComponent as TimePicker } from './chunk-MDY3HCRC.js';
+export { accordion_default as Accordion } from './chunk-22FIGRGO.js';
+export { badge_default as Badge } from './chunk-AVPPV5OM.js';
+export { breadcrumbs_default as Breadcrumbs } from './chunk-SGMIDNPI.js';
+export { dropdown_default as Dropdown } from './chunk-TWZ5LXLL.js';
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-EFMKUCGX.js';
+export { button_default as Button } from './chunk-MLNIKNLI.js';
+export { spinner_default as Spinner } from './chunk-NQB4V5P7.js';
+import { createAllColorVariants, componentColors } from './chunk-TUTOU4X6.js';
+export { bgColorClasses, bgSkeletonColorClasses, bgSoftColorClasses, borderColorClasses, buttonColors, checkboxBorderColorClasses, checkedColorClasses, commonSpacing, componentColors, componentSizeVariants, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createKbdColorVariants, createKbdOutlineColorVariants, createKbdSoftColorVariants, createKbdSolidColorVariants, createLinkColorVariants, createNotificationColorVariants, createNotificationOutlinedColorVariants, createNotificationSoftColorVariants, createNotificationSolidColorVariants, createOutlineColorVariants, createPopoverColorVariants, createPopoverDefaultColorVariants, createPopoverSoftColorVariants, createPopoverSolidColorVariants, createSoftColorVariants, createSolidColorVariants, createTooltipSoftColorVariants, focusRingColorClasses, getAccordionColorClass, getCheckboxColorClass, getIconColorClass, iconColorClasses, radioCheckedColorClasses, switchTrackColorClasses, textColorClasses, textColorVariants, textForegroundColorClasses, tooltipSolidColorClasses } from './chunk-TUTOU4X6.js';
+export { button_group_default as ButtonGroup } from './chunk-7ODPSHIQ.js';
+export { card_default as Card } from './chunk-TG2AECIN.js';
+export { carousel_default as Carousel } from './chunk-3QKPSJTV.js';
+import { cn } from './chunk-2OGZENFC.js';
+export { cn, getValidationStatus, iconSizes } from './chunk-2OGZENFC.js';
 import { cva } from 'class-variance-authority';
-import React from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { X, ChevronRight } from 'lucide-react';
 
+var avatarVariants = cva(
+  "relative inline-flex items-center justify-center font-medium select-none shrink-0",
+  {
+    variants: {
+      size: {
+        xs: "size-6 text-xs",
+        sm: "size-8 text-sm",
+        md: "size-10 text-base",
+        lg: "size-12 text-lg"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-lg"
+      },
+      color: {
+        default: "bg-surface text-text-primary",
+        primary: "bg-primary/10 text-primary",
+        secondary: "bg-secondary/10 text-secondary",
+        accent: "bg-accent/10 text-accent",
+        success: "bg-success/10 text-success",
+        error: "bg-error/10 text-error",
+        warning: "bg-warning/10 text-warning",
+        info: "bg-info/10 text-info"
+      },
+      bordered: {
+        true: "ring-2 ring-background",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle",
+      color: "default",
+      bordered: false,
+      disabled: false
+    }
+  }
+);
+var statusSizeClasses = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3"
+};
+var statusColorClasses = {
+  online: "bg-success",
+  offline: "bg-border",
+  away: "bg-warning",
+  busy: "bg-error"
+};
+var badgeSizeClasses = {
+  xs: "min-w-3 h-3 text-[8px]",
+  sm: "min-w-4 h-4 text-[10px]",
+  md: "min-w-5 h-5 text-xs",
+  lg: "min-w-6 h-6 text-xs"
+};
+var overlapClasses = {
+  xs: "-space-x-1",
+  sm: "-space-x-1.5",
+  md: "-space-x-2",
+  lg: "-space-x-2.5"
+};
+function getInitialsFromName(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "";
+  const firstWord = words[0];
+  if (words.length === 1 && firstWord) {
+    return firstWord.slice(0, 2).toUpperCase();
+  }
+  const lastWord = words[words.length - 1];
+  const firstInitial = firstWord?.[0] ?? "";
+  const lastInitial = lastWord?.[0] ?? "";
+  return (firstInitial + lastInitial).toUpperCase();
+}
+var DefaultUserIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "size-[60%] text-text-secondary",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    role: "img",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+  }
+);
+var Avatar = React.memo(
+  ({
+    src,
+    alt = "",
+    fallback,
+    name,
+    size = "md",
+    shape = "circle",
+    status,
+    color = "default",
+    bordered = false,
+    icon,
+    badge,
+    disabled = false,
+    className,
+    onError,
+    ref,
+    ...props
+  }) => {
+    const [imageError, setImageError] = useState(false);
+    useEffect(() => {
+      setImageError(false);
+    }, [src]);
+    const handleImageError = (e) => {
+      setImageError(true);
+      onError?.(e);
+    };
+    const getInitials = () => {
+      if (fallback) return fallback.slice(0, 2).toUpperCase();
+      if (name) return getInitialsFromName(name);
+      return "";
+    };
+    const showImage = src && !imageError;
+    const initials = getInitials();
+    const showFallback = !showImage && (initials || icon);
+    const showDefaultIcon = !showImage && !showFallback;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          avatarVariants({
+            size,
+            shape,
+            color: showImage ? "default" : color,
+            bordered,
+            disabled
+          }),
+          // Apply overflow-hidden only when no badge/status to prevent clipping
+          !badge && !status && "overflow-hidden",
+          className
+        ),
+        "aria-disabled": disabled || void 0,
+        ...props,
+        children: [
+          showImage && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: alt || name || "User avatar",
+              onError: handleImageError,
+              className: cn(
+                "size-full object-cover",
+                shape === "circle" ? "rounded-full" : "rounded-lg"
+              ),
+              loading: "lazy"
+            }
+          ),
+          showFallback && (icon ? /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center size-[60%]", children: icon }) : /* @__PURE__ */ jsx("span", { "aria-label": `Avatar for ${name || initials}`, children: initials })),
+          showDefaultIcon && /* @__PURE__ */ jsx(DefaultUserIcon, {}),
+          status && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
+                statusSizeClasses[size],
+                statusColorClasses[status]
+              ),
+              "aria-label": `Status: ${status}`
+            }
+          ),
+          badge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute -top-1 -right-1 flex items-center justify-center rounded-full bg-error text-white font-medium px-1",
+                badgeSizeClasses[size]
+              ),
+              "aria-label": typeof badge === "number" ? `${badge} notifications` : void 0,
+              role: typeof badge === "number" ? "status" : void 0,
+              children: badge
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarGroup = React.memo(
+  ({
+    children,
+    max,
+    size = "md",
+    shape = "circle",
+    showTotal = false,
+    renderSurplus,
+    bordered = false,
+    className,
+    ref,
+    ...props
+  }) => {
+    const childrenArray = React.Children.toArray(children);
+    const total = childrenArray.length;
+    const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
+    const remainingCount = max && total > max ? total - max : 0;
+    const surplusDisplay = showTotal ? total : remainingCount;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center", overlapClasses[size], className),
+        role: "group",
+        "aria-label": `Avatar group with ${total} members`,
+        ...props,
+        children: [
+          visibleChildren.map((child, index) => {
+            if (React.isValidElement(child)) {
+              return React.cloneElement(child, {
+                key: index,
+                size: child.props.size ?? size,
+                shape: child.props.shape ?? shape,
+                bordered: child.props.bordered ?? bordered ?? true,
+                className: cn(child.props.className)
+              });
+            }
+            return child;
+          }),
+          remainingCount > 0 && (renderSurplus ? renderSurplus(surplusDisplay) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                avatarVariants({
+                  size,
+                  shape,
+                  color: "default",
+                  bordered: true
+                }),
+                "bg-surface/80 backdrop-blur-sm overflow-hidden"
+              ),
+              "aria-label": showTotal ? `${total} total members` : `${remainingCount} more members`,
+              children: /* @__PURE__ */ jsx("span", { className: "text-text-secondary font-medium", children: showTotal ? total : `+${remainingCount}` })
+            }
+          ))
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+var ContextMenuSubMenu = ({ item, onClose, level }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const hoverTimeoutRef = useRef(void 0);
+  const leaveTimeoutRef = useRef(void 0);
+  const handleMouseEnter = useCallback(() => {
+    if (item.disabled) return;
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+    }
+    hoverTimeoutRef.current = setTimeout(() => {
+      setIsOpen(true);
+    }, 200);
+  }, [item.disabled]);
+  const handleMouseLeave = useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    leaveTimeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 300);
+  }, []);
+  const handleClick = useCallback(
+    (e) => {
+      if (!item.disabled && !item.children) {
+        e.stopPropagation();
+        item.onClick?.();
+        onClose();
+      }
+    },
+    [item, onClose]
+  );
+  useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      if (leaveTimeoutRef.current) {
+        clearTimeout(leaveTimeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        role: "menuitem",
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        "aria-disabled": item.disabled,
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-3 px-3 py-2 text-sm cursor-pointer rounded-sm transition-colors mx-1",
+              item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface focus:bg-surface focus:outline-none"
+            ),
+            onClick: handleClick,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-4 h-4", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { children: item.label })
+              ] }),
+              item.children && /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-text-secondary shrink-0" }),
+              item.shortcut && /* @__PURE__ */ jsx("span", { className: "text-xs text-text-secondary shrink-0", children: item.shortcut })
+            ]
+          }
+        )
+      }
+    ) }),
+    item.children && /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        side: "right",
+        align: "start",
+        sideOffset: 8,
+        alignOffset: -8,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className: cn(
+          "min-w-[180px] rounded-md border border-border bg-background shadow-lg py-1",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2",
+          "data-[side=top]:slide-in-from-bottom-2",
+          "z-[var(--z-popover)]"
+        ),
+        children: /* @__PURE__ */ jsx(ContextMenuContent, { items: item.children, onClose, level: level + 1 })
+      }
+    ) })
+  ] });
+};
+ContextMenuSubMenu.displayName = "ContextMenuSubMenu";
+var ContextMenuContent = ({
+  items,
+  onClose,
+  level = 0,
+  className,
+  style,
+  setKeyUpHandlers,
+  ...props
+}) => {
+  const menuRef = useRef(null);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const validItems = items.filter((item) => !item.separator && !item.disabled);
+  const validItemsRef = useRef(validItems);
+  const onCloseRef = useRef(onClose);
+  validItemsRef.current = validItems;
+  onCloseRef.current = onClose;
+  const keyHandlers = useCallback(() => ({
+    ArrowDown: () => {
+      setFocusedIndex((prev) => {
+        const nextIndex = prev + 1;
+        return nextIndex >= validItemsRef.current.length ? 0 : nextIndex;
+      });
+    },
+    ArrowUp: () => {
+      setFocusedIndex((prev) => {
+        const nextIndex = prev - 1;
+        return nextIndex < 0 ? validItemsRef.current.length - 1 : nextIndex;
+      });
+    },
+    Enter: () => {
+      setFocusedIndex((currentIndex) => {
+        if (currentIndex >= 0 && currentIndex < validItemsRef.current.length) {
+          const item = validItemsRef.current[currentIndex];
+          if (!item?.disabled && !item?.children) {
+            item?.onClick?.();
+            onCloseRef.current();
+          }
+        }
+        return currentIndex;
+      });
+    },
+    " ": () => {
+      setFocusedIndex((currentIndex) => {
+        if (currentIndex >= 0 && currentIndex < validItemsRef.current.length) {
+          const item = validItemsRef.current[currentIndex];
+          if (!item?.disabled && !item?.children) {
+            item?.onClick?.();
+            onCloseRef.current();
+          }
+        }
+        return currentIndex;
+      });
+    },
+    Escape: () => {
+      onCloseRef.current();
+    },
+    ArrowLeft: () => {
+      if (level > 0) {
+        onCloseRef.current();
+      }
+    }
+  }), [level]);
+  useEffect(() => {
+    if (setKeyUpHandlers) {
+      setKeyUpHandlers(keyHandlers());
+    }
+  }, [setKeyUpHandlers, keyHandlers]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menuRef,
+      className: cn(
+        "min-w-[180px] rounded-md border border-border bg-background shadow-lg py-1",
+        level === 0 && "animate-in fade-in-0 zoom-in-95",
+        className
+      ),
+      style,
+      role: "menu",
+      "aria-orientation": "vertical",
+      tabIndex: -1,
+      ...props,
+      children: items.map((item, index) => {
+        if (item.separator) {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-px bg-border my-1",
+              role: "separator",
+              "aria-orientation": "horizontal"
+            },
+            `separator-${index}`
+          );
+        }
+        if (item.children) {
+          return /* @__PURE__ */ jsx(ContextMenuSubMenu, { item, onClose, level }, item.key);
+        }
+        const validItemIndex = validItems.findIndex((vi) => vi.key === item.key);
+        const isFocused = validItemIndex === focusedIndex;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-3 px-3 py-2 text-sm cursor-pointer rounded-sm transition-colors mx-1",
+              item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface focus:bg-surface focus:outline-none",
+              isFocused && !item.disabled && "bg-surface"
+            ),
+            onClick: () => {
+              if (!item.disabled) {
+                item.onClick?.();
+                onClose();
+              }
+            },
+            role: "menuitem",
+            tabIndex: -1,
+            "aria-disabled": item.disabled,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-4 h-4", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { children: item.label })
+              ] }),
+              item.shortcut && /* @__PURE__ */ jsx("span", { className: "text-xs text-text-secondary shrink-0", children: item.shortcut })
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+};
+ContextMenuContent.displayName = "ContextMenuContent";
+var ContextMenu = ({
+  children,
+  items,
+  className,
+  disabled = false,
+  onOpenChange,
+  open: controlledOpen
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [keyUpHandlers, setKeyUpHandlers] = useState({});
+  const [position, setPosition] = useState(null);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback(
+    (open) => {
+      if (!isControlled) {
+        setInternalOpen(open);
+      }
+      onOpenChange?.(open);
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleContextMenu = useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setPosition({
+        width: 0,
+        height: 0,
+        x: e.clientX,
+        y: e.clientY,
+        top: e.clientY,
+        left: e.clientX,
+        right: e.clientX,
+        bottom: e.clientY,
+        toJSON: () => {
+        }
+      });
+      setOpen(true);
+    },
+    [disabled, setOpen]
+  );
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      const handler = keyUpHandlers[e.key];
+      if (handler) {
+        e.preventDefault();
+        handler();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, keyUpHandlers]);
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isOpen, onOpenChange: setOpen, children: [
+    position && /* @__PURE__ */ jsx(
+      PopoverPrimitive.Anchor,
+      {
+        virtualRef: {
+          current: {
+            getBoundingClientRect: () => position
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onContextMenu: handleContextMenu,
+        className: cn("inline-block", className),
+        role: "presentation",
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        side: "bottom",
+        align: "start",
+        sideOffset: 0,
+        alignOffset: 0,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        onEscapeKeyDown: handleClose,
+        onPointerDownOutside: handleClose,
+        onInteractOutside: handleClose,
+        className: "z-[var(--z-popover)]",
+        children: /* @__PURE__ */ jsx(ContextMenuContent, { setKeyUpHandlers, items, onClose: handleClose })
+      }
+    ) })
+  ] });
+};
+ContextMenu.displayName = "ContextMenu";
+var context_menu_default = ContextMenu;
 var dividerVariants = cva("", {
   variants: {
     orientation: {
@@ -88,16 +667,16 @@ var dividerVariants = cva("", {
 });
 var textAlignClasses = {
   left: {
-    before: "w-[var(--divider-left-before-width)]",
-    after: "w-[var(--divider-left-after-width)]"
+    before: "w-(--divider-left-before-width)",
+    after: "w-(--divider-left-after-width)"
   },
   center: {
-    before: "w-[var(--divider-center-before-width)]",
-    after: "w-[var(--divider-center-after-width)]"
+    before: "w-(--divider-center-before-width)",
+    after: "w-(--divider-center-after-width)"
   },
   right: {
-    before: "w-[var(--divider-right-before-width)]",
-    after: "w-[var(--divider-right-after-width)]"
+    before: "w-(--divider-right-before-width)",
+    after: "w-(--divider-right-after-width)"
   }
 };
 var Divider = React.memo(
@@ -120,7 +699,7 @@ var Divider = React.memo(
             role: "separator",
             "aria-orientation": "horizontal",
             className: cn(
-              "flex items-center gap-[var(--divider-gap)] text-sm text-text-secondary",
+              "flex items-center gap-(--divider-gap) text-sm text-text-secondary",
               className
             ),
             style: spacing ? { margin: spacing } : void 0,
@@ -184,7 +763,125 @@ var Divider = React.memo(
 );
 Divider.displayName = "Divider";
 var divider_default = Divider;
+var tagVariants = cva("inline-flex items-center gap-1.5 whitespace-nowrap rounded font-medium transition-colors", {
+  variants: {
+    variant: {
+      default: "border",
+      solid: "",
+      outline: "border",
+      soft: ""
+    },
+    color: {
+      default: "",
+      primary: "",
+      secondary: "",
+      accent: "",
+      success: "",
+      error: "",
+      warning: "",
+      info: ""
+    },
+    size: {
+      xs: "text-[10px] px-1.5 py-0.5",
+      sm: "text-xs px-2 py-1",
+      md: "text-sm px-2.5 py-1",
+      lg: "text-base px-3 py-1.5"
+    }
+  },
+  compoundVariants: createAllColorVariants(componentColors, ["default", "solid", "outline", "soft"]),
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "sm"
+  }
+});
+var iconSizeClasses = {
+  xs: "size-2.5",
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4"
+};
+var Tag = React.memo(
+  ({
+    children,
+    color = "primary",
+    variant = "solid",
+    size = "sm",
+    closable = false,
+    onClose,
+    icon,
+    className,
+    onClick,
+    disableKeyboardRemoval = false,
+    ...props
+  }) => {
+    const handleClose = (e) => {
+      e.stopPropagation();
+      onClose?.(e);
+    };
+    const handleCloseKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose?.(e);
+      }
+    };
+    const handleTagKeyDown = (e) => {
+      if (!disableKeyboardRemoval && closable && (e.key === "Delete" || e.key === "Backspace")) {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose?.(e);
+        return;
+      }
+      if (onClick && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick(e);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          tagVariants({ variant, color, size }),
+          (onClick || closable) && "cursor-pointer",
+          (onClick || !disableKeyboardRemoval && closable) && "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary",
+          className
+        ),
+        onClick,
+        onKeyDown: onClick || !disableKeyboardRemoval && closable ? handleTagKeyDown : void 0,
+        role: onClick || !disableKeyboardRemoval && closable ? "button" : void 0,
+        tabIndex: onClick || !disableKeyboardRemoval && closable ? 0 : void 0,
+        "aria-label": (onClick || !disableKeyboardRemoval && closable) && typeof children === "string" ? children : void 0,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0", iconSizeClasses[size]), children: React.isValidElement(icon) ? React.cloneElement(icon, {
+            className: cn("w-full h-full", icon.props.className)
+          }) : icon }),
+          /* @__PURE__ */ jsx("span", { children }),
+          closable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClose,
+              onKeyDown: handleCloseKeyDown,
+              className: cn(
+                "inline-flex items-center justify-center flex-shrink-0 cursor-pointer rounded-sm opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-1",
+                iconSizeClasses[size]
+              ),
+              "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove tag",
+              tabIndex: disableKeyboardRemoval ? 0 : -1,
+              children: /* @__PURE__ */ jsx(X, { className: "w-full h-full" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+var tag_default = Tag;
 
-export { divider_default as Divider };
+export { Avatar, AvatarGroup, context_menu_default as ContextMenu, divider_default as Divider, tag_default as Tag };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map