@blueshift-gg/ui-components 0.1.49 → 0.1.51

package/dist/Dropdown.mjs

@@ -1,604 +1,399 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button } from './Button';
-import { useState, useRef, useCallback, useEffect, isValidElement } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import classNames from 'classnames';
-import { swift } from './utils/easings';
-import { Checkbox } from './Checkbox';
-import { Divider } from './Divider';
-import { Icon } from './Icon';
-import { useOnClickOutside } from 'usehooks-ts';
-import { CrosshairCorners } from './CrossHair';
+"use client";
 
+import { Icon } from "./Icon.mjs";
+import { CrosshairCorners } from "./CrossHair.mjs";
+import { swift } from "./utils/easings.mjs";
+import { Button } from "./Button.mjs";
+import { Checkbox } from "./Checkbox.mjs";
+import { Divider } from "./Divider.mjs";
+import { AnimatePresence, motion } from "motion/react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { useOnClickOutside } from "usehooks-ts";
+
+//#region src/Dropdown.tsx
 const useMousePosition = () => {
-  const [mousePosition, setMousePosition] = useState([0, 0]);
-  const updateMousePosition = useCallback((ev) => {
-    setMousePosition([ev.clientX, ev.clientY]);
-  }, []);
-  useEffect(() => {
-    const throttledUpdate = (ev) => {
-      requestAnimationFrame(() => updateMousePosition(ev));
-    };
-    window.addEventListener("mousemove", throttledUpdate);
-    return () => window.removeEventListener("mousemove", throttledUpdate);
-  }, [updateMousePosition]);
-  return mousePosition;
+	const [mousePosition, setMousePosition] = useState([0, 0]);
+	const updateMousePosition = useCallback((ev) => {
+		setMousePosition([ev.clientX, ev.clientY]);
+	}, []);
+	useEffect(() => {
+		const throttledUpdate = (ev) => {
+			requestAnimationFrame(() => updateMousePosition(ev));
+		};
+		window.addEventListener("mousemove", throttledUpdate);
+		return () => window.removeEventListener("mousemove", throttledUpdate);
+	}, [updateMousePosition]);
+	return mousePosition;
 };
-const MouseSafeArea = ({
-  parentRef,
-  submenuRef,
-  onEnter,
-  onLeave,
-  debug = false
-}) => {
-  const {
-    x = 0,
-    y = 0,
-    height: h = 0,
-    width: w = 0
-  } = submenuRef.current?.getBoundingClientRect() || {};
-  const [mouseX, mouseY] = useMousePosition();
-  const positions = { x, y, h, w, mouseX, mouseY };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        left: getLeft(positions),
-        right: getRight(positions),
-        top: 0,
-        width: getWidth(positions),
-        height: h,
-        clipPath: getClipPath(positions),
-        pointerEvents: "auto",
-        zIndex: 9999,
-        backgroundColor: debug ? "rgba(0, 179, 179, 0.25)" : "transparent"
-      },
-      onMouseEnter: onEnter,
-      onMouseLeave: onLeave
-    }
-  );
+const MouseSafeArea = ({ parentRef, submenuRef, onEnter, onLeave, debug = false }) => {
+	const { x = 0, y = 0, height: h = 0, width: w = 0 } = submenuRef.current?.getBoundingClientRect() || {};
+	const [mouseX, mouseY] = useMousePosition();
+	const positions = {
+		x,
+		y,
+		h,
+		w,
+		mouseX,
+		mouseY
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			left: getLeft(positions),
+			right: getRight(positions),
+			top: 0,
+			width: getWidth(positions),
+			height: h,
+			clipPath: getClipPath(positions),
+			pointerEvents: "auto",
+			zIndex: 9999,
+			backgroundColor: debug ? "rgba(0, 179, 179, 0.25)" : "transparent"
+		},
+		onMouseEnter: onEnter,
+		onMouseLeave: onLeave
+	});
 };
 const getLeft = ({ x, mouseX }) => mouseX > x ? void 0 : -Math.max(x - mouseX, 10) + "px";
 const getRight = ({ x, w, mouseX }) => mouseX > x ? -Math.max(mouseX - (x + w), 10) + "px" : void 0;
 const getWidth = ({ x, w, mouseX }) => mouseX > x ? Math.max(mouseX - (x + w), 10) + "px" : Math.max(x - mouseX, 10) + "px";
 const getClipPath = ({ x, y, h, mouseX, mouseY }) => mouseX < x ? `polygon(100% 0%, 0% ${100 * (mouseY - y) / h}%, 100% 100%)` : `polygon(0% 0%, 0% 100%, 100% ${100 * (mouseY - y) / h}%)`;
-const DropdownMenu = ({
-  items,
-  selectedItem,
-  handleChange,
-  multiple = false,
-  menuClassName,
-  size = "md",
-  isOpen,
-  onItemClick,
-  isScrollable = false,
-  animationOrigin = "top-left",
-  search,
-  onClearSearch,
-  showSelectAll = true,
-  showSafeTriangle = false,
-  subMenuClassName
-}) => {
-  const [isAtBottom, setIsAtBottom] = useState(false);
-  const scrollContainerRef = useRef(null);
-  const filteredItems = (() => {
-    if (search) {
-      return items.filter(
-        (item) => item.label.toLowerCase().includes(search.toLowerCase())
-      );
-    }
-    return items;
-  })();
-  const handleScroll = useCallback(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-    const { scrollTop, scrollHeight, clientHeight } = container;
-    const threshold = 5;
-    const isNearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
-    setIsAtBottom(isNearBottom);
-  }, []);
-  useEffect(() => {
-    if (isOpen) {
-      setIsAtBottom(false);
-    }
-  }, [isOpen, filteredItems.length]);
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container || !isOpen) return;
-    const { scrollHeight, clientHeight } = container;
-    const hasScrollbar = scrollHeight > clientHeight;
-    if (!hasScrollbar) {
-      setIsAtBottom(true);
-    }
-  }, [isOpen, filteredItems.length]);
-  const isItemSelected = (value) => {
-    if (multiple) {
-      return Array.isArray(selectedItem) && selectedItem.length > 0 && selectedItem.includes(value);
-    }
-    return !!selectedItem && selectedItem === value;
-  };
-  const flattenSelectable = (options) => {
-    const out = [];
-    const walk = (nodes) => {
-      nodes.forEach((n) => {
-        if (n.children && n.children.length > 0) {
-          walk(n.children);
-        } else {
-          out.push(n);
-        }
-      });
-    };
-    walk(options);
-    return out;
-  };
-  const handleItemClick = (value) => {
-    if (multiple) {
-      const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];
-      if (isAllSelected()) {
-        handleChange([value]);
-      } else if (currentSelection.includes(value)) {
-        handleChange(currentSelection.filter((item) => item !== value));
-      } else {
-        handleChange([...currentSelection, value]);
-      }
-    } else {
-      if (selectedItem === value) {
-        handleChange(void 0);
-      } else {
-        handleChange(value);
-      }
-      onItemClick?.(value);
-    }
-  };
-  const handleSelectAll = () => {
-    const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];
-    const allValues = flattenSelectable(filteredItems).filter((item) => !item.disabled).map((item) => item.value);
-    if (currentSelection.length === allValues.length) {
-      handleChange([]);
-    } else {
-      handleChange(allValues);
-    }
-  };
-  const isAllSelected = () => {
-    if (!Array.isArray(selectedItem) || selectedItem.length === 0) return false;
-    const selectableItems = flattenSelectable(filteredItems).filter(
-      (item) => !item.disabled
-    );
-    return selectableItems.length > 0 && selectedItem.length === selectableItems.length && selectableItems.every((item) => selectedItem.includes(item.value));
-  };
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: { opacity: 0, scale: 0.8, y: -15 },
-      animate: { opacity: 1, scale: 1, y: 0 },
-      transition: { duration: 0.1, ease: swift },
-      exit: { opacity: 0, scale: 0.8, y: -5 },
-      className: classNames(
-        "z-50 absolute top-[calc(100%+6px)] p-1 bg-card-foreground border border-border-light",
-        (size === "lg" || size === "md") && "min-w-[200px]",
-        animationOrigin === "top-left" && "origin-top-left",
-        animationOrigin === "top-center" && "origin-top-center",
-        animationOrigin === "top-right" && "origin-top-right",
-        menuClassName
-      ),
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: scrollContainerRef,
-          onScroll: handleScroll,
-          className: classNames(
-            "flex flex-col gap-y-1",
-            isScrollable && [
-              "max-h-[250px] overflow-y-auto",
-              !isAtBottom && "[mask-image:linear-gradient(180deg,black,black_85%,transparent_100%)]"
-            ]
-          ),
-          children: [
-            multiple && showSelectAll && /* @__PURE__ */ jsxs("div", { className: "group flex flex-col gap-y-1", children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: handleSelectAll,
-                  className: classNames(
-                    "py-3 pl-2.5 pr-3 flex items-center gap-x-2.5 outline-none bg-transparent transition-colors duration-100 ease-crisp hover:bg-border-light/50"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(Checkbox, { checked: isAllSelected() }),
-                    /* @__PURE__ */ jsx("span", { className: "text-sm text-shade-primary font-medium", children: "Select All" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(Divider, { direction: "horizontal" })
-            ] }),
-            filteredItems.length > 0 ? filteredItems.map(
-              (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(
-                DropdownSubmenuItem,
-                {
-                  item,
-                  size,
-                  onLeafClick: handleItemClick,
-                  isLeafSelected: isItemSelected
-                },
-                item.value
-              ) : /* @__PURE__ */ jsx(
-                DropdownItem,
-                {
-                  label: item.label,
-                  icon: item.icon,
-                  onClick: () => handleItemClick(item.value),
-                  disabled: item.disabled,
-                  isSelected: isItemSelected(item.value),
-                  size
-                },
-                item.value
-              )
-            ) : /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => {
-                  if (onClearSearch) {
-                    onClearSearch();
-                  }
-                },
-                className: "py-3 pl-2.5 pr-3 text-sm font-mono text-shade-tertiary hover:bg-border-light/50 transition-colors duration-100 ease-crisp w-full text-center",
-                children: "No options found"
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) });
+const DropdownMenu = ({ items, selectedItem, handleChange, multiple = false, menuClassName, size = "md", isOpen, onItemClick, isScrollable = false, animationOrigin = "top-left", search, onClearSearch, showSelectAll = true, showSafeTriangle = false, subMenuClassName }) => {
+	const [isAtBottom, setIsAtBottom] = useState(false);
+	const scrollContainerRef = useRef(null);
+	const filteredItems = (() => {
+		if (search) return items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));
+		return items;
+	})();
+	const handleScroll = useCallback(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const { scrollTop, scrollHeight, clientHeight } = container;
+		setIsAtBottom(scrollTop + clientHeight >= scrollHeight - 5);
+	}, []);
+	useEffect(() => {
+		if (isOpen) setIsAtBottom(false);
+	}, [isOpen, filteredItems.length]);
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container || !isOpen) return;
+		const { scrollHeight, clientHeight } = container;
+		if (!(scrollHeight > clientHeight)) setIsAtBottom(true);
+	}, [isOpen, filteredItems.length]);
+	const isItemSelected = (value) => {
+		if (multiple) return Array.isArray(selectedItem) && selectedItem.length > 0 && selectedItem.includes(value);
+		return !!selectedItem && selectedItem === value;
+	};
+	const flattenSelectable = (options) => {
+		const out = [];
+		const walk = (nodes) => {
+			nodes.forEach((n) => {
+				if (n.children && n.children.length > 0) walk(n.children);
+				else out.push(n);
+			});
+		};
+		walk(options);
+		return out;
+	};
+	const handleItemClick = (value) => {
+		if (multiple) {
+			const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];
+			if (isAllSelected()) handleChange([value]);
+			else if (currentSelection.includes(value)) handleChange(currentSelection.filter((item) => item !== value));
+			else handleChange([...currentSelection, value]);
+		} else {
+			if (selectedItem === value) handleChange(void 0);
+			else handleChange(value);
+			onItemClick?.(value);
+		}
+	};
+	const handleSelectAll = () => {
+		const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];
+		const allValues = flattenSelectable(filteredItems).filter((item) => !item.disabled).map((item) => item.value);
+		if (currentSelection.length === allValues.length) handleChange([]);
+		else handleChange(allValues);
+	};
+	const isAllSelected = () => {
+		if (!Array.isArray(selectedItem) || selectedItem.length === 0) return false;
+		const selectableItems = flattenSelectable(filteredItems).filter((item) => !item.disabled);
+		return selectableItems.length > 0 && selectedItem.length === selectableItems.length && selectableItems.every((item) => selectedItem.includes(item.value));
+	};
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(motion.div, {
+		initial: {
+			opacity: 0,
+			scale: .8,
+			y: -15
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		transition: {
+			duration: .1,
+			ease: swift
+		},
+		exit: {
+			opacity: 0,
+			scale: .8,
+			y: -5
+		},
+		className: classNames("z-50 absolute top-[calc(100%+6px)] p-1 bg-card-foreground border border-border-light", (size === "lg" || size === "md") && "min-w-[200px]", animationOrigin === "top-left" && "origin-top-left", animationOrigin === "top-center" && "origin-top-center", animationOrigin === "top-right" && "origin-top-right", menuClassName),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: scrollContainerRef,
+			onScroll: handleScroll,
+			className: classNames("flex flex-col gap-y-1", isScrollable && ["max-h-[250px] overflow-y-auto", !isAtBottom && "[mask-image:linear-gradient(180deg,black,black_85%,transparent_100%)]"]),
+			children: [multiple && showSelectAll && /* @__PURE__ */ jsxs("div", {
+				className: "group flex flex-col gap-y-1",
+				children: [/* @__PURE__ */ jsxs("button", {
+					onClick: handleSelectAll,
+					className: classNames("py-3 pl-2.5 pr-3 flex items-center gap-x-2.5 outline-none bg-transparent transition-colors duration-100 ease-crisp hover:bg-border-light/50"),
+					children: [/* @__PURE__ */ jsx(Checkbox, { checked: isAllSelected() }), /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-shade-primary font-medium",
+						children: "Select All"
+					})]
+				}), /* @__PURE__ */ jsx(Divider, { direction: "horizontal" })]
+			}), filteredItems.length > 0 ? filteredItems.map((item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(DropdownSubmenuItem, {
+				item,
+				size,
+				onLeafClick: handleItemClick,
+				isLeafSelected: isItemSelected
+			}, item.value) : /* @__PURE__ */ jsx(DropdownItem, {
+				label: item.label,
+				icon: item.icon,
+				onClick: () => handleItemClick(item.value),
+				disabled: item.disabled,
+				isSelected: isItemSelected(item.value),
+				size
+			}, item.value)) : /* @__PURE__ */ jsx("button", {
+				onClick: () => {
+					if (onClearSearch) onClearSearch();
+				},
+				className: "py-3 pl-2.5 pr-3 text-sm font-mono text-shade-tertiary hover:bg-border-light/50 transition-colors duration-100 ease-crisp w-full text-center",
+				children: "No options found"
+			})]
+		})
+	}) });
 };
-const Dropdown = ({
-  className,
-  items,
-  selectedItem,
-  handleChange,
-  label = "View All",
-  multiSelectLabel,
-  disabled,
-  buttonClassName,
-  menuClassName,
-  multiple = false,
-  menuIcon,
-  size = "md",
-  isScrollable = false,
-  search,
-  onClearSearch,
-  showSelectAll,
-  showClear = true,
-  subMenuClassName,
-  showSelectedItem = true
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const handleItemClick = (value) => {
-    if (!multiple) {
-      if (selectedItem === value) {
-        handleChange(void 0);
-      } else {
-        handleChange(value);
-      }
-      setIsOpen(false);
-    }
-  };
-  const ref = useRef(null);
-  const handleClickOutside = () => {
-    setIsOpen(false);
-  };
-  useOnClickOutside(ref, handleClickOutside);
-  const getSelectedItems = () => {
-    const flatten = (options) => {
-      const out = [];
-      const walk = (nodes) => {
-        nodes.forEach((n) => {
-          if (n.children && n.children.length > 0) {
-            walk(n.children);
-          } else {
-            out.push(n);
-          }
-        });
-      };
-      walk(options);
-      return out;
-    };
-    const leaves = flatten(items);
-    if (multiple) {
-      const selectedValues = Array.isArray(selectedItem) ? selectedItem : [];
-      return leaves.filter((item) => selectedValues.includes(item.value));
-    }
-    const selected = leaves.find((item) => item.value === selectedItem);
-    return selected ? [selected] : [];
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: classNames(
-        "relative flex flex-col gap-y-1.5 items-start",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          DropdownButton,
-          {
-            label,
-            multiSelectLabel,
-            disabled,
-            className: buttonClassName,
-            onClick: () => setIsOpen(!isOpen),
-            selectedItems: getSelectedItems(),
-            multiple,
-            count: getSelectedItems().length,
-            menuIcon,
-            size,
-            onClear: () => handleChange(multiple ? [] : void 0),
-            showClear,
-            showSelectedItem
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          DropdownMenu,
-          {
-            items,
-            selectedItem,
-            handleChange,
-            multiple,
-            menuClassName,
-            size,
-            isOpen,
-            onItemClick: handleItemClick,
-            isScrollable,
-            search,
-            onClearSearch,
-            showSelectAll,
-            subMenuClassName
-          }
-        )
-      ]
-    }
-  );
+const Dropdown = ({ className, items, selectedItem, handleChange, label = "View All", multiSelectLabel, disabled, buttonClassName, menuClassName, multiple = false, menuIcon, size = "md", isScrollable = false, search, onClearSearch, showSelectAll, showClear = true, subMenuClassName, showSelectedItem = true }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const handleItemClick = (value) => {
+		if (!multiple) {
+			if (selectedItem === value) handleChange(void 0);
+			else handleChange(value);
+			setIsOpen(false);
+		}
+	};
+	const ref = useRef(null);
+	const handleClickOutside = () => {
+		setIsOpen(false);
+	};
+	useOnClickOutside(ref, handleClickOutside);
+	const getSelectedItems = () => {
+		const flatten = (options) => {
+			const out = [];
+			const walk = (nodes) => {
+				nodes.forEach((n) => {
+					if (n.children && n.children.length > 0) walk(n.children);
+					else out.push(n);
+				});
+			};
+			walk(options);
+			return out;
+		};
+		const leaves = flatten(items);
+		if (multiple) {
+			const selectedValues = Array.isArray(selectedItem) ? selectedItem : [];
+			return leaves.filter((item) => selectedValues.includes(item.value));
+		}
+		const selected = leaves.find((item) => item.value === selectedItem);
+		return selected ? [selected] : [];
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classNames("relative flex flex-col gap-y-1.5 items-start", className),
+		children: [/* @__PURE__ */ jsx(DropdownButton, {
+			label,
+			multiSelectLabel,
+			disabled,
+			className: buttonClassName,
+			onClick: () => setIsOpen(!isOpen),
+			selectedItems: getSelectedItems(),
+			multiple,
+			count: getSelectedItems().length,
+			menuIcon,
+			size,
+			onClear: () => handleChange(multiple ? [] : void 0),
+			showClear,
+			showSelectedItem
+		}), /* @__PURE__ */ jsx(DropdownMenu, {
+			items,
+			selectedItem,
+			handleChange,
+			multiple,
+			menuClassName,
+			size,
+			isOpen,
+			onItemClick: handleItemClick,
+			isScrollable,
+			search,
+			onClearSearch,
+			showSelectAll,
+			subMenuClassName
+		})]
+	});
 };
-const DropdownButton = ({
-  label,
-  multiSelectLabel,
-  disabled,
-  className,
-  onClick,
-  selectedItems = [],
-  multiple = false,
-  count = 0,
-  menuIcon,
-  size,
-  onClear,
-  showClear,
-  showSelectedItem
-}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const hasSelection = selectedItems.length > 0;
-  const isSingleSelection = selectedItems.length === 1;
-  const isMultipleSelection = selectedItems.length > 1;
-  let buttonIcon;
-  let buttonLabel;
-  if (hasSelection && isSingleSelection) {
-    const selectedItem = selectedItems[0];
-    buttonIcon = selectedItem.icon ? isValidElement(selectedItem.icon) ? selectedItem.icon : {
-      name: selectedItem.icon.name,
-      className: selectedItem.icon.className || "",
-      size: selectedItem.icon.size || 18
-    } : menuIcon;
-    buttonLabel = typeof label === "function" ? label(selectedItem.label) : selectedItem.label;
-  } else if (isMultipleSelection && multiple && multiSelectLabel) {
-    buttonIcon = menuIcon ? isValidElement(menuIcon) ? menuIcon : {
-      name: menuIcon.name,
-      className: menuIcon.className || "",
-      size: menuIcon.size || 18
-    } : void 0;
-    buttonLabel = `${count} ${multiSelectLabel}`;
-  } else {
-    buttonIcon = menuIcon;
-    buttonLabel = typeof label === "function" ? label("") : label;
-  }
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      icon: buttonIcon,
-      label: showSelectedItem ? buttonLabel : void 0,
-      disabled,
-      size,
-      variant: "secondary",
-      className: classNames(
-        "!origin-bottom-left !justify-start w-full",
-        (size === "md" || size === "lg") && "!pr-[18px] !pl-[12px]",
-        size === "sm" && "!pr-4 !pl-3",
-        showClear && "!pr-[48px]",
-        className
-      ),
-      useDecryptAnimation: false,
-      useHoverEffect: false,
-      crosshairProps: {
-        variant: "corners",
-        corners: ["bottom-right"],
-        spacingX: !isHovered ? -6 : -4,
-        spacingY: !isHovered ? -6 : -4,
-        animationDuration: 0.5,
-        animationDelay: 0,
-        className: "text-shade-mute group-hover:text-shade-primary"
-      },
-      onClick,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: hasSelection && showClear && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "order-last top-1/2 -translate-y-1/2 right-2 absolute h-[24px] w-[24px] flex items-center justify-center hover:bg-background/40 transition duration-100 ease-crisp cursor-pointer",
-          onClick: (e) => {
-            e.stopPropagation();
-            onClear?.();
-          },
-          children: /* @__PURE__ */ jsx(Icon, { name: "Close", size: 12 })
-        }
-      )
-    }
-  );
+const DropdownButton = ({ label, multiSelectLabel, disabled, className, onClick, selectedItems = [], multiple = false, count = 0, menuIcon, size, onClear, showClear, showSelectedItem }) => {
+	const [isHovered, setIsHovered] = useState(false);
+	const hasSelection = selectedItems.length > 0;
+	const isSingleSelection = selectedItems.length === 1;
+	const isMultipleSelection = selectedItems.length > 1;
+	let buttonIcon;
+	let buttonLabel;
+	if (hasSelection && isSingleSelection) {
+		const selectedItem = selectedItems[0];
+		buttonIcon = selectedItem.icon ? isValidElement(selectedItem.icon) ? selectedItem.icon : {
+			name: selectedItem.icon.name,
+			className: selectedItem.icon.className || "",
+			size: selectedItem.icon.size || 18
+		} : menuIcon;
+		buttonLabel = typeof label === "function" ? label(selectedItem.label) : selectedItem.label;
+	} else if (isMultipleSelection && multiple && multiSelectLabel) {
+		buttonIcon = menuIcon ? isValidElement(menuIcon) ? menuIcon : {
+			name: menuIcon.name,
+			className: menuIcon.className || "",
+			size: menuIcon.size || 18
+		} : void 0;
+		buttonLabel = `${count} ${multiSelectLabel}`;
+	} else {
+		buttonIcon = menuIcon;
+		buttonLabel = typeof label === "function" ? label("") : label;
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		icon: buttonIcon,
+		label: showSelectedItem ? buttonLabel : void 0,
+		disabled,
+		size,
+		variant: "secondary",
+		className: classNames("!origin-bottom-left !justify-start w-full", (size === "md" || size === "lg") && "!pr-[18px] !pl-[12px]", size === "sm" && "!pr-4 !pl-3", showClear && "!pr-[48px]", className),
+		useDecryptAnimation: false,
+		useHoverEffect: false,
+		crosshairProps: {
+			variant: "corners",
+			corners: ["bottom-right"],
+			spacingX: !isHovered ? -6 : -4,
+			spacingY: !isHovered ? -6 : -4,
+			animationDuration: .5,
+			animationDelay: 0,
+			className: "text-shade-mute group-hover:text-shade-primary"
+		},
+		onClick,
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		children: hasSelection && showClear && /* @__PURE__ */ jsx("div", {
+			className: "order-last top-1/2 -translate-y-1/2 right-2 absolute h-[24px] w-[24px] flex items-center justify-center hover:bg-background/40 transition duration-100 ease-crisp cursor-pointer",
+			onClick: (e) => {
+				e.stopPropagation();
+				onClear?.();
+			},
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "Close",
+				size: 12
+			})
+		})
+	});
 };
-const DropdownItem = ({
-  label,
-  icon,
-  onClick,
-  disabled,
-  isSelected = false,
-  size
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick,
-      disabled,
-      className: classNames(
-        "hover:bg-border-light/50 relative group/item disabled:opacity-40 flex items-center gap-x-2.5 outline-none transition-colors duration-100 ease-crisp",
-        size === "lg" && "py-4 pl-3 pr-3 text-base",
-        size === "md" && "py-3 pl-2.5 pr-3 text-sm",
-        size === "sm" && "py-2 pl-2.5 pr-3 h-[36px] text-sm",
-        isSelected && "bg-background/50"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "opacity-0 group-hover/item:!opacity-100 absolute inset-0.5", children: /* @__PURE__ */ jsx(
-          CrosshairCorners,
-          {
-            size: 6,
-            variant: "corners",
-            corners: ["bottom-right"],
-            className: "text-shade-mute",
-            animationDelay: 0,
-            animationDuration: 0.5
-          }
-        ) }),
-        icon && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(
-          Icon,
-          {
-            name: icon.name,
-            className: classNames(
-              "flex-shrink-0",
-              icon.className
-            ),
-            size: icon.size || 18
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: classNames(" text-shade-primary font-medium leading-[100%]"),
-            children: label
-          }
-        )
-      ]
-    }
-  );
+const DropdownItem = ({ label, icon, onClick, disabled, isSelected = false, size }) => {
+	return /* @__PURE__ */ jsxs("button", {
+		onClick,
+		disabled,
+		className: classNames("hover:bg-border-light/50 relative group/item disabled:opacity-40 flex items-center gap-x-2.5 outline-none transition-colors duration-100 ease-crisp", size === "lg" && "py-4 pl-3 pr-3 text-base", size === "md" && "py-3 pl-2.5 pr-3 text-sm", size === "sm" && "py-2 pl-2.5 pr-3 h-[36px] text-sm", isSelected && "bg-background/50"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "opacity-0 group-hover/item:!opacity-100 absolute inset-0.5",
+				children: /* @__PURE__ */ jsx(CrosshairCorners, {
+					size: 6,
+					variant: "corners",
+					corners: ["bottom-right"],
+					className: "text-shade-mute",
+					animationDelay: 0,
+					animationDuration: .5
+				})
+			}),
+			icon && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, {
+				name: icon.name,
+				className: classNames("flex-shrink-0", icon.className),
+				size: icon.size || 18
+			}) }),
+			/* @__PURE__ */ jsx("span", {
+				className: classNames(" text-shade-primary font-medium leading-[100%]"),
+				children: label
+			})
+		]
+	});
 };
-const DropdownSubmenuItem = ({
-  item,
-  size = "md",
-  subMenuClassName,
-  onLeafClick,
-  isLeafSelected
-}) => {
-  const parentRef = useRef(null);
-  const submenuRef = useRef(null);
-  const [hoverParent, setHoverParent] = useState(false);
-  const [hoverSubmenu, setHoverSubmenu] = useState(false);
-  const [hoverSafe, setHoverSafe] = useState(false);
-  const open = hoverParent || hoverSubmenu || hoverSafe;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: parentRef,
-      className: classNames("relative", subMenuClassName),
-      onMouseEnter: () => setHoverParent(true),
-      onMouseLeave: () => setHoverParent(false),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: classNames(
-              "hover:bg-border-light/50 relative h-max group/item disabled:opacity-40 flex items-center justify-between gap-x-2.5 w-full outline-none transition-colors duration-100 ease-crisp",
-              size === "lg" && "py-4 pl-3 pr-3 text-base",
-              size === "md" && "py-3 pl-2.5 pr-3 text-sm",
-              size === "sm" && "py-2 pl-2.5 pr-3 !h-[36px] text-sm",
-              open && "bg-border-light/50"
-            ),
-            disabled: item.disabled,
-            children: [
-              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2.5", children: [
-                item.icon && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(item.icon) ? item.icon : /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    name: item.icon.name,
-                    className: classNames(
-                      "flex-shrink-0",
-                      item.icon.className
-                    ),
-                    size: item.icon.size || 18
-                  }
-                ) }),
-                /* @__PURE__ */ jsx("span", { className: "text-shade-primary font-medium leading-[100%]", children: item.label })
-              ] }),
-              /* @__PURE__ */ jsx(Icon, { name: "ChevronRight", size: 12, className: "text-shade-tertiary" })
-            ]
-          }
-        ),
-        open && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: submenuRef,
-            onMouseEnter: () => setHoverSubmenu(true),
-            onMouseLeave: () => setHoverSubmenu(false),
-            className: classNames(
-              "z-[60] !absolute top-0 left-[calc(100%+6px)] p-1 bg-card-foreground gradient-border before:bg-card-border min-w-[180px]"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                MouseSafeArea,
-                {
-                  parentRef,
-                  submenuRef,
-                  onEnter: () => setHoverSafe(true),
-                  onLeave: () => setHoverSafe(false)
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: (item.children || []).map(
-                (child) => child.children && child.children.length > 0 ? /* @__PURE__ */ jsx(
-                  DropdownSubmenuItem,
-                  {
-                    item: child,
-                    size,
-                    onLeafClick,
-                    isLeafSelected
-                  },
-                  child.value
-                ) : /* @__PURE__ */ jsx(
-                  DropdownItem,
-                  {
-                    label: child.label,
-                    icon: child.icon,
-                    onClick: () => onLeafClick(child.value),
-                    disabled: child.disabled,
-                    isSelected: isLeafSelected(child.value),
-                    size
-                  },
-                  child.value
-                )
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
+const DropdownSubmenuItem = ({ item, size = "md", subMenuClassName, onLeafClick, isLeafSelected }) => {
+	const parentRef = useRef(null);
+	const submenuRef = useRef(null);
+	const [hoverParent, setHoverParent] = useState(false);
+	const [hoverSubmenu, setHoverSubmenu] = useState(false);
+	const [hoverSafe, setHoverSafe] = useState(false);
+	const open = hoverParent || hoverSubmenu || hoverSafe;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: parentRef,
+		className: classNames("relative", subMenuClassName),
+		onMouseEnter: () => setHoverParent(true),
+		onMouseLeave: () => setHoverParent(false),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: classNames("hover:bg-border-light/50 relative h-max group/item disabled:opacity-40 flex items-center justify-between gap-x-2.5 w-full outline-none transition-colors duration-100 ease-crisp", size === "lg" && "py-4 pl-3 pr-3 text-base", size === "md" && "py-3 pl-2.5 pr-3 text-sm", size === "sm" && "py-2 pl-2.5 pr-3 !h-[36px] text-sm", open && "bg-border-light/50"),
+			disabled: item.disabled,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-x-2.5",
+				children: [item.icon && /* @__PURE__ */ jsx(Fragment, { children: isValidElement(item.icon) ? item.icon : /* @__PURE__ */ jsx(Icon, {
+					name: item.icon.name,
+					className: classNames("flex-shrink-0", item.icon.className),
+					size: item.icon.size || 18
+				}) }), /* @__PURE__ */ jsx("span", {
+					className: "text-shade-primary font-medium leading-[100%]",
+					children: item.label
+				})]
+			}), /* @__PURE__ */ jsx(Icon, {
+				name: "ChevronRight",
+				size: 12,
+				className: "text-shade-tertiary"
+			})]
+		}), open && /* @__PURE__ */ jsxs("div", {
+			ref: submenuRef,
+			onMouseEnter: () => setHoverSubmenu(true),
+			onMouseLeave: () => setHoverSubmenu(false),
+			className: classNames("z-[60] !absolute top-0 left-[calc(100%+6px)] p-1 bg-card-foreground gradient-border before:bg-card-border min-w-[180px]"),
+			children: [/* @__PURE__ */ jsx(MouseSafeArea, {
+				parentRef,
+				submenuRef,
+				onEnter: () => setHoverSafe(true),
+				onLeave: () => setHoverSafe(false)
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-y-1",
+				children: (item.children || []).map((child) => child.children && child.children.length > 0 ? /* @__PURE__ */ jsx(DropdownSubmenuItem, {
+					item: child,
+					size,
+					onLeafClick,
+					isLeafSelected
+				}, child.value) : /* @__PURE__ */ jsx(DropdownItem, {
+					label: child.label,
+					icon: child.icon,
+					onClick: () => onLeafClick(child.value),
+					disabled: child.disabled,
+					isSelected: isLeafSelected(child.value),
+					size
+				}, child.value))
+			})]
+		})]
+	});
 };
 
+//#endregion
 export { Dropdown, DropdownButton, DropdownItem, DropdownMenu };
-//# sourceMappingURL=Dropdown.mjs.map
 //# sourceMappingURL=Dropdown.mjs.map