@blueshift-gg/ui-components 0.1.0

package/dist/Divider.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Divider = ({
+  className,
+  direction = "horizontal"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames__default.default(
+        "flex",
+        direction === "horizontal" && "flex-col w-full",
+        direction === "vertical" && "flex-row h-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: classNames__default.default(
+              "bg-background",
+              direction === "horizontal" && "w-full h-px",
+              direction === "vertical" && "h-full w-px"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: classNames__default.default(
+              "bg-border-light",
+              direction === "horizontal" && "w-full h-px",
+              direction === "vertical" && "h-full w-px"
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.Divider = Divider;
+//# sourceMappingURL=Divider.js.map
+//# sourceMappingURL=Divider.js.map

package/dist/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Divider.tsx"],"names":["jsxs","classNames","jsx"],"mappings":";;;;;;;;;AAQO,MAAM,UAAU,CAAC;AAAA,EACtB,SAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAAoB;AAClB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,2BAAA;AAAA,QACT,MAAA;AAAA,QACA,cAAc,YAAA,IAAgB,iBAAA;AAAA,QAC9B,cAAc,UAAA,IAAc,iBAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,2BAAA;AAAA,cACT,eAAA;AAAA,cACA,cAAc,YAAA,IAAgB,aAAA;AAAA,cAC9B,cAAc,UAAA,IAAc;AAAA;AAC9B;AAAA,SACF;AAAA,wBACAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,2BAAA;AAAA,cACT,iBAAA;AAAA,cACA,cAAc,YAAA,IAAgB,aAAA;AAAA,cAC9B,cAAc,UAAA,IAAc;AAAA;AAC9B;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"Divider.js","sourcesContent":["import classNames from \"classnames\";\nimport { GridLines } from \"./GridLines\";\n\nexport type DividerProps = {\n  className?: string;\n  direction?: \"horizontal\" | \"vertical\";\n};\n\nexport const Divider = ({\n  className,\n  direction = \"horizontal\",\n}: DividerProps) => {\n  return (\n    <div\n      className={classNames(\n        \"flex\",\n        direction === \"horizontal\" && \"flex-col w-full\",\n        direction === \"vertical\" && \"flex-row h-full\",\n        className\n      )}\n    >\n      <div\n        className={classNames(\n          \"bg-background\",\n          direction === \"horizontal\" && \"w-full h-px\",\n          direction === \"vertical\" && \"h-full w-px\"\n        )}\n      />\n      <div\n        className={classNames(\n          \"bg-border-light\",\n          direction === \"horizontal\" && \"w-full h-px\",\n          direction === \"vertical\" && \"h-full w-px\"\n        )}\n      />\n    </div>\n  );\n};\n"]}

package/dist/Divider.mjs

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
+const Divider = ({
+  className,
+  direction = "horizontal"
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "flex",
+        direction === "horizontal" && "flex-col w-full",
+        direction === "vertical" && "flex-row h-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              "bg-background",
+              direction === "horizontal" && "w-full h-px",
+              direction === "vertical" && "h-full w-px"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              "bg-border-light",
+              direction === "horizontal" && "w-full h-px",
+              direction === "vertical" && "h-full w-px"
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Divider };
+//# sourceMappingURL=Divider.mjs.map
+//# sourceMappingURL=Divider.mjs.map

package/dist/Divider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Divider.tsx"],"names":[],"mappings":";;;AAQO,MAAM,UAAU,CAAC;AAAA,EACtB,SAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,MAAA;AAAA,QACA,cAAc,YAAA,IAAgB,iBAAA;AAAA,QAC9B,cAAc,UAAA,IAAc,iBAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,eAAA;AAAA,cACA,cAAc,YAAA,IAAgB,aAAA;AAAA,cAC9B,cAAc,UAAA,IAAc;AAAA;AAC9B;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,iBAAA;AAAA,cACA,cAAc,YAAA,IAAgB,aAAA;AAAA,cAC9B,cAAc,UAAA,IAAc;AAAA;AAC9B;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"Divider.mjs","sourcesContent":["import classNames from \"classnames\";\nimport { GridLines } from \"./GridLines\";\n\nexport type DividerProps = {\n  className?: string;\n  direction?: \"horizontal\" | \"vertical\";\n};\n\nexport const Divider = ({\n  className,\n  direction = \"horizontal\",\n}: DividerProps) => {\n  return (\n    <div\n      className={classNames(\n        \"flex\",\n        direction === \"horizontal\" && \"flex-col w-full\",\n        direction === \"vertical\" && \"flex-row h-full\",\n        className\n      )}\n    >\n      <div\n        className={classNames(\n          \"bg-background\",\n          direction === \"horizontal\" && \"w-full h-px\",\n          direction === \"vertical\" && \"h-full w-px\"\n        )}\n      />\n      <div\n        className={classNames(\n          \"bg-border-light\",\n          direction === \"horizontal\" && \"w-full h-px\",\n          direction === \"vertical\" && \"h-full w-px\"\n        )}\n      />\n    </div>\n  );\n};\n"]}

package/dist/Dropdown.d.mts

@@ -0,0 +1,73 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as IconProps } from './index-DWGhkMUQ.mjs';
+import './utils/colours.mjs';
+
+type DropdownProps = {
+    className?: string;
+    items: {
+        label: string;
+        icon?: IconProps;
+        value: string;
+        disabled?: boolean;
+    }[];
+    selectedItem?: string | string[] | undefined;
+    handleChange: (item: string | string[] | undefined) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    label: string;
+    multiSelectLabel?: string;
+    buttonClassName?: string;
+    menuClassName?: string;
+    menuIcon?: IconProps;
+    size?: "sm" | "md" | "lg";
+    isScrollable?: boolean;
+    animationOrigin?: "top-left" | "top-center" | "top-right";
+    search?: string;
+    onClearSearch?: () => void;
+};
+type DropdownButtonProps = {
+    label: string;
+    multiSelectLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    onClick: () => void;
+    buttonClassName?: string;
+    selectedItems?: DropdownProps["items"];
+    multiple?: boolean;
+    count?: number;
+    menuIcon?: IconProps;
+    size?: "sm" | "md" | "lg";
+};
+type DropdownItemProps = {
+    label: string;
+    icon?: IconProps;
+    onClick: () => void;
+    disabled?: boolean;
+    isSelected?: boolean;
+    size?: "sm" | "md" | "lg";
+};
+type DropdownMenuProps = {
+    items: {
+        label: string;
+        icon?: IconProps;
+        value: string;
+        disabled?: boolean;
+    }[];
+    selectedItem?: string | string[] | undefined;
+    handleChange: (item: string | string[] | undefined) => void;
+    multiple?: boolean;
+    menuClassName?: string;
+    size?: "sm" | "md" | "lg";
+    isOpen: boolean;
+    onItemClick?: (value: string) => void;
+    isScrollable?: boolean;
+    animationOrigin?: "top-left" | "top-center" | "top-right";
+    search?: string;
+    onClearSearch?: () => void;
+};
+declare const DropdownMenu: ({ items, selectedItem, handleChange, multiple, menuClassName, size, isOpen, onItemClick, isScrollable, animationOrigin, search, onClearSearch, }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
+declare const Dropdown: ({ className, items, selectedItem, handleChange, label, multiSelectLabel, disabled, buttonClassName, menuClassName, multiple, menuIcon, size, isScrollable, search, onClearSearch, }: DropdownProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownButton: ({ label, multiSelectLabel, disabled, className, onClick, selectedItems, multiple, count, menuIcon, size, }: DropdownButtonProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownItem: ({ label, icon, onClick, disabled, isSelected, size, }: DropdownItemProps) => react_jsx_runtime.JSX.Element;
+
+export { Dropdown, DropdownButton, type DropdownButtonProps, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps };

package/dist/Dropdown.d.ts

@@ -0,0 +1,73 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as IconProps } from './index-ekBNDG0H.js';
+import './utils/colours.js';
+
+type DropdownProps = {
+    className?: string;
+    items: {
+        label: string;
+        icon?: IconProps;
+        value: string;
+        disabled?: boolean;
+    }[];
+    selectedItem?: string | string[] | undefined;
+    handleChange: (item: string | string[] | undefined) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    label: string;
+    multiSelectLabel?: string;
+    buttonClassName?: string;
+    menuClassName?: string;
+    menuIcon?: IconProps;
+    size?: "sm" | "md" | "lg";
+    isScrollable?: boolean;
+    animationOrigin?: "top-left" | "top-center" | "top-right";
+    search?: string;
+    onClearSearch?: () => void;
+};
+type DropdownButtonProps = {
+    label: string;
+    multiSelectLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    onClick: () => void;
+    buttonClassName?: string;
+    selectedItems?: DropdownProps["items"];
+    multiple?: boolean;
+    count?: number;
+    menuIcon?: IconProps;
+    size?: "sm" | "md" | "lg";
+};
+type DropdownItemProps = {
+    label: string;
+    icon?: IconProps;
+    onClick: () => void;
+    disabled?: boolean;
+    isSelected?: boolean;
+    size?: "sm" | "md" | "lg";
+};
+type DropdownMenuProps = {
+    items: {
+        label: string;
+        icon?: IconProps;
+        value: string;
+        disabled?: boolean;
+    }[];
+    selectedItem?: string | string[] | undefined;
+    handleChange: (item: string | string[] | undefined) => void;
+    multiple?: boolean;
+    menuClassName?: string;
+    size?: "sm" | "md" | "lg";
+    isOpen: boolean;
+    onItemClick?: (value: string) => void;
+    isScrollable?: boolean;
+    animationOrigin?: "top-left" | "top-center" | "top-right";
+    search?: string;
+    onClearSearch?: () => void;
+};
+declare const DropdownMenu: ({ items, selectedItem, handleChange, multiple, menuClassName, size, isOpen, onItemClick, isScrollable, animationOrigin, search, onClearSearch, }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
+declare const Dropdown: ({ className, items, selectedItem, handleChange, label, multiSelectLabel, disabled, buttonClassName, menuClassName, multiple, menuIcon, size, isScrollable, search, onClearSearch, }: DropdownProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownButton: ({ label, multiSelectLabel, disabled, className, onClick, selectedItems, multiple, count, menuIcon, size, }: DropdownButtonProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownItem: ({ label, icon, onClick, disabled, isSelected, size, }: DropdownItemProps) => react_jsx_runtime.JSX.Element;
+
+export { Dropdown, DropdownButton, type DropdownButtonProps, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps };

package/dist/Dropdown.js

@@ -0,0 +1,396 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('./Button');
+var react = require('react');
+var react$1 = require('motion/react');
+var classNames = require('classnames');
+var easings = require('./utils/easings');
+var Checkbox = require('./Checkbox');
+var Divider = require('./Divider');
+var Icon = require('./Icon');
+var usehooksTs = require('usehooks-ts');
+var CrossHair = require('./CrossHair');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const DropdownMenu = ({
+  items,
+  selectedItem,
+  handleChange,
+  multiple = false,
+  menuClassName,
+  size = "md",
+  isOpen,
+  onItemClick,
+  isScrollable = false,
+  animationOrigin = "top-left",
+  search,
+  onClearSearch
+}) => {
+  const [isAtBottom, setIsAtBottom] = react.useState(false);
+  const scrollContainerRef = react.useRef(null);
+  const filteredItems = (() => {
+    if (search) {
+      return items.filter(
+        (item) => item.label.toLowerCase().includes(search.toLowerCase())
+      );
+    }
+    return items;
+  })();
+  const handleScroll = react.useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const threshold = 5;
+    const isNearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
+    setIsAtBottom(isNearBottom);
+  }, []);
+  react.useEffect(() => {
+    if (isOpen) {
+      setIsAtBottom(false);
+    }
+  }, [isOpen, filteredItems.length]);
+  react.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 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 = 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 = filteredItems.filter((item) => !item.disabled);
+    return selectableItems.length > 0 && selectedItem.length === selectableItems.length && selectableItems.every((item) => selectedItem.includes(item.value));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      initial: { opacity: 0, scale: 0.8, y: -15 },
+      animate: { opacity: 1, scale: 1, y: 0 },
+      transition: { duration: 0.1, ease: easings.swift },
+      exit: { opacity: 0, scale: 0.8, y: -5 },
+      className: classNames__default.default(
+        "absolute top-[calc(100%+6px)] p-1 bg-card-foreground gradient-border before:bg-card-border",
+        (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__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: scrollContainerRef,
+          onScroll: handleScroll,
+          className: classNames__default.default(
+            "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 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group flex flex-col gap-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: handleSelectAll,
+                  className: classNames__default.default(
+                    "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__ */ jsxRuntime.jsx(Checkbox.Checkbox, { checked: isAllSelected() }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-shade-primary font-medium", children: "Select All" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { direction: "horizontal" })
+            ] }),
+            filteredItems.length > 0 ? filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownItem,
+              {
+                label: item.label,
+                icon: item.icon?.name ? {
+                  name: item.icon.name,
+                  className: item.icon.className,
+                  size: item.icon.size,
+                  difficulties: item.icon.difficulties
+                } : void 0,
+                onClick: () => handleItemClick(item.value),
+                disabled: item.disabled,
+                isSelected: isItemSelected(item.value),
+                size
+              },
+              item.value
+            )) : /* @__PURE__ */ jsxRuntime.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
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const handleItemClick = (value) => {
+    if (!multiple) {
+      if (selectedItem === value) {
+        handleChange(void 0);
+      } else {
+        handleChange(value);
+      }
+      setIsOpen(false);
+    }
+  };
+  const ref = react.useRef(null);
+  const handleClickOutside = () => {
+    setIsOpen(false);
+  };
+  usehooksTs.useOnClickOutside(ref, handleClickOutside);
+  const getSelectedItems = () => {
+    if (multiple) {
+      const selectedValues = Array.isArray(selectedItem) ? selectedItem : [];
+      return items.filter((item) => selectedValues.includes(item.value));
+    } else {
+      const selected = items.find((item) => item.value === selectedItem);
+      return selected ? [selected] : [];
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: classNames__default.default(
+        "relative flex flex-col gap-y-1.5 items-start",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownButton,
+          {
+            label,
+            multiSelectLabel,
+            disabled,
+            className: buttonClassName,
+            onClick: () => setIsOpen(!isOpen),
+            selectedItems: getSelectedItems(),
+            multiple,
+            count: getSelectedItems().length,
+            menuIcon,
+            size
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenu,
+          {
+            items,
+            selectedItem,
+            handleChange,
+            multiple,
+            menuClassName,
+            size,
+            isOpen,
+            onItemClick: handleItemClick,
+            isScrollable,
+            search,
+            onClearSearch
+          }
+        )
+      ]
+    }
+  );
+};
+const DropdownButton = ({
+  label,
+  multiSelectLabel,
+  disabled,
+  className,
+  onClick,
+  selectedItems = [],
+  multiple = false,
+  count = 0,
+  menuIcon,
+  size
+}) => {
+  const [isHovered, setIsHovered] = react.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 ? {
+      name: selectedItem.icon.name,
+      className: selectedItem.icon.className || "",
+      size: selectedItem.icon.size || 18,
+      difficulties: selectedItem.icon.difficulties
+    } : menuIcon;
+    buttonLabel = selectedItem.label;
+  } else if (isMultipleSelection && multiple && multiSelectLabel) {
+    const combinedDifficulties = selectedItems.filter((item) => item.icon?.difficulties).flatMap((item) => item.icon.difficulties).filter((value, index, self) => self.indexOf(value) === index).sort((a, b) => a - b);
+    buttonIcon = menuIcon ? {
+      name: menuIcon.name,
+      className: menuIcon.className || "",
+      size: menuIcon.size || 18,
+      difficulties: combinedDifficulties.length > 0 ? combinedDifficulties : menuIcon.difficulties
+    } : void 0;
+    buttonLabel = `${count} ${multiSelectLabel}`;
+  } else {
+    buttonIcon = menuIcon;
+    buttonLabel = label;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      icon: buttonIcon,
+      label: buttonLabel,
+      disabled,
+      size,
+      variant: "secondary",
+      className: classNames__default.default(
+        "!origin-bottom-left !justify-start w-full",
+        (size === "md" || size === "lg") && "!pr-[18px] !pl-[12px]",
+        size === "sm" && "!pr-4 !pl-3",
+        className
+      ),
+      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)
+    }
+  );
+};
+const DropdownItem = ({
+  label,
+  icon,
+  onClick,
+  disabled,
+  isSelected = false,
+  size
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: classNames__default.default(
+        "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__ */ jsxRuntime.jsx("div", { className: "opacity-0 group-hover/item:!opacity-100 absolute inset-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+          CrossHair.CrosshairCorners,
+          {
+            size: 6,
+            variant: "corners",
+            corners: ["bottom-right"],
+            className: "text-shade-mute",
+            animationDelay: 0,
+            animationDuration: 0.5
+          }
+        ) }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: icon.name,
+            className: classNames__default.default("flex-shrink-0", icon.className),
+            size: icon.size || 18,
+            difficulties: icon.difficulties
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: classNames__default.default(" text-shade-primary font-medium leading-[100%]"),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.Dropdown = Dropdown;
+exports.DropdownButton = DropdownButton;
+exports.DropdownItem = DropdownItem;
+exports.DropdownMenu = DropdownMenu;
+//# sourceMappingURL=Dropdown.js.map
+//# sourceMappingURL=Dropdown.js.map