@blueshift-gg/ui-components 0.1.0

package/dist/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Dropdown.tsx"],"names":["useState","useRef","useCallback","useEffect","jsx","AnimatePresence","motion","swift","classNames","jsxs","Checkbox","Divider","useOnClickOutside","Button","CrosshairCorners","Icon"],"mappings":"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","file":"Dropdown.js","sourcesContent":["import { IconName } from \"./icons\";\nimport { Button, ButtonProps } from \"./Button\";\nimport { useRef, useState, useEffect, useCallback } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { crisp, glide, swift } from \"./utils/easings\";\nimport { Checkbox } from \"./Checkbox\";\nimport { Divider } from \"./Divider\";\nimport { Icon, type IconProps } from \"./Icon\";\nimport { useOnClickOutside } from \"usehooks-ts\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type DropdownProps = {\n  className?: string;\n  items: {\n    label: string;\n    icon?: IconProps;\n    value: string;\n    disabled?: boolean;\n  }[];\n  selectedItem?: string | string[] | undefined;\n  handleChange: (item: string | string[] | undefined) => void;\n  multiple?: boolean;\n  disabled?: boolean;\n  label: string;\n  multiSelectLabel?: string;\n  buttonClassName?: string;\n  menuClassName?: string;\n  menuIcon?: IconProps;\n  size?: \"sm\" | \"md\" | \"lg\";\n  isScrollable?: boolean;\n  animationOrigin?: \"top-left\" | \"top-center\" | \"top-right\";\n  search?: string;\n  onClearSearch?: () => void;\n};\n\nexport type DropdownButtonProps = {\n  label: string;\n  multiSelectLabel?: string;\n  disabled?: boolean;\n  className?: string;\n  onClick: () => void;\n  buttonClassName?: string;\n  selectedItems?: DropdownProps[\"items\"];\n  multiple?: boolean;\n  count?: number;\n  menuIcon?: IconProps;\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\nexport type DropdownItemProps = {\n  label: string;\n  icon?: IconProps;\n  onClick: () => void;\n  disabled?: boolean;\n  isSelected?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\nexport type DropdownMenuProps = {\n  items: {\n    label: string;\n    icon?: IconProps;\n    value: string;\n    disabled?: boolean;\n  }[];\n  selectedItem?: string | string[] | undefined;\n  handleChange: (item: string | string[] | undefined) => void;\n  multiple?: boolean;\n  menuClassName?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  isOpen: boolean;\n  onItemClick?: (value: string) => void;\n  isScrollable?: boolean;\n  animationOrigin?: \"top-left\" | \"top-center\" | \"top-right\";\n  search?: string;\n  onClearSearch?: () => void;\n};\n\nexport const DropdownMenu = ({\n  items,\n  selectedItem,\n  handleChange,\n  multiple = false,\n  menuClassName,\n  size = \"md\",\n  isOpen,\n  onItemClick,\n  isScrollable = false,\n  animationOrigin = \"top-left\",\n  search,\n  onClearSearch,\n}: DropdownMenuProps) => {\n  const [isAtBottom, setIsAtBottom] = useState(false);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n  // Filter items based on search term\n  const filteredItems = (() => {\n    // If search is provided, filter based on search\n    if (search) {\n      return items.filter((item) =>\n        item.label.toLowerCase().includes(search.toLowerCase())\n      );\n    }\n\n    // Default: show all items\n    return items;\n  })();\n\n  // Handle scroll detection\n  const handleScroll = useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const { scrollTop, scrollHeight, clientHeight } = container;\n    const threshold = 5; // Small threshold to account for rounding\n    const isNearBottom = scrollTop + clientHeight >= scrollHeight - threshold;\n\n    setIsAtBottom(isNearBottom);\n  }, []);\n\n  // Reset scroll state when items change or menu opens\n  useEffect(() => {\n    if (isOpen) {\n      setIsAtBottom(false);\n    }\n  }, [isOpen, filteredItems.length]);\n\n  // Check if content is actually scrollable\n  useEffect(() => {\n    const container = scrollContainerRef.current;\n    if (!container || !isOpen) return;\n\n    const { scrollHeight, clientHeight } = container;\n    const hasScrollbar = scrollHeight > clientHeight;\n\n    // If no scrollbar (content fits), consider it \"at bottom\"\n    if (!hasScrollbar) {\n      setIsAtBottom(true);\n    }\n  }, [isOpen, filteredItems.length]);\n\n  // Helper to check if an item is selected\n  const isItemSelected = (value: string) => {\n    if (multiple) {\n      return (\n        Array.isArray(selectedItem) &&\n        selectedItem.length > 0 &&\n        selectedItem.includes(value)\n      );\n    }\n    return !!selectedItem && selectedItem === value;\n  };\n\n  // Handle item selection\n  const handleItemClick = (value: string) => {\n    if (multiple) {\n      const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];\n\n      // If all items are selected, clicking any item should deselect all others\n      if (isAllSelected()) {\n        handleChange([value]);\n      } else if (currentSelection.includes(value)) {\n        // Remove from selection\n        handleChange(currentSelection.filter((item) => item !== value));\n      } else {\n        // Add to selection\n        handleChange([...currentSelection, value]);\n      }\n    } else {\n      // Single select - if clicking the already selected item, deselect it\n      if (selectedItem === value) {\n        handleChange(undefined);\n      } else {\n        // Otherwise, select the new item\n        handleChange(value);\n      }\n      // Call the optional callback for single select\n      onItemClick?.(value);\n    }\n  };\n\n  // Handle select all\n  const handleSelectAll = () => {\n    const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];\n    const allValues = filteredItems\n      .filter((item) => !item.disabled)\n      .map((item) => item.value);\n\n    if (currentSelection.length === allValues.length) {\n      // Deselect all\n      handleChange([]);\n    } else {\n      // Select all\n      handleChange(allValues);\n    }\n  };\n\n  // Check if all items are selected\n  const isAllSelected = () => {\n    if (!Array.isArray(selectedItem) || selectedItem.length === 0) return false;\n    const selectableItems = filteredItems.filter((item) => !item.disabled);\n    return (\n      selectableItems.length > 0 &&\n      selectedItem.length === selectableItems.length &&\n      selectableItems.every((item) => selectedItem.includes(item.value))\n    );\n  };\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <motion.div\n          initial={{ opacity: 0, scale: 0.8, y: -15 }}\n          animate={{ opacity: 1, scale: 1, y: 0 }}\n          transition={{ duration: 0.1, ease: swift }}\n          exit={{ opacity: 0, scale: 0.8, y: -5 }}\n          className={classNames(\n            \"absolute top-[calc(100%+6px)] p-1 bg-card-foreground gradient-border before:bg-card-border\",\n            (size === \"lg\" || size === \"md\") && \"min-w-[200px]\",\n            animationOrigin === \"top-left\" && \"origin-top-left\",\n            animationOrigin === \"top-center\" && \"origin-top-center\",\n            animationOrigin === \"top-right\" && \"origin-top-right\",\n            menuClassName\n          )}\n        >\n          <div\n            ref={scrollContainerRef}\n            onScroll={handleScroll}\n            className={classNames(\n              \"flex flex-col gap-y-1\",\n              isScrollable && [\n                \"max-h-[250px] overflow-y-auto\",\n                !isAtBottom &&\n                  \"[mask-image:linear-gradient(180deg,black,black_85%,transparent_100%)]\",\n              ]\n            )}\n          >\n            {multiple && (\n              <div className=\"group flex flex-col gap-y-1\">\n                <button\n                  onClick={handleSelectAll}\n                  className={classNames(\n                    \"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\"\n                  )}\n                >\n                  <Checkbox checked={isAllSelected()} />\n                  <span className=\"text-sm text-shade-primary font-medium\">\n                    Select All\n                  </span>\n                </button>\n                <Divider direction=\"horizontal\" />\n              </div>\n            )}\n            {filteredItems.length > 0 ? (\n              filteredItems.map((item) => (\n                <DropdownItem\n                  key={item.value}\n                  label={item.label}\n                  icon={\n                    item.icon?.name\n                      ? {\n                          name: item.icon.name,\n                          className: item.icon.className,\n                          size: item.icon.size,\n                          difficulties: item.icon.difficulties,\n                        }\n                      : undefined\n                  }\n                  onClick={() => handleItemClick(item.value)}\n                  disabled={item.disabled}\n                  isSelected={isItemSelected(item.value)}\n                  size={size}\n                />\n              ))\n            ) : (\n              <button\n                onClick={() => {\n                  // Clear search by calling the onClearSearch callback\n                  if (onClearSearch) {\n                    onClearSearch();\n                  }\n                }}\n                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\"\n              >\n                No options found\n              </button>\n            )}\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport const Dropdown = ({\n  className,\n  items,\n  selectedItem,\n  handleChange,\n  label = \"View All\",\n  multiSelectLabel,\n  disabled,\n  buttonClassName,\n  menuClassName,\n  multiple = false,\n  menuIcon,\n  size = \"md\",\n  isScrollable = false,\n  search,\n  onClearSearch,\n}: DropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  // Handle item selection for single select (closes menu)\n  const handleItemClick = (value: string) => {\n    if (!multiple) {\n      // Single select - if clicking the already selected item, deselect it\n      if (selectedItem === value) {\n        handleChange(undefined);\n      } else {\n        // Otherwise, select the new item\n        handleChange(value);\n      }\n      setIsOpen(false);\n    }\n  };\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = () => {\n    setIsOpen(false);\n  };\n\n  // Cast ref to RefObject<HTMLElement> to satisfy useOnClickOutside's expected type\n  useOnClickOutside(ref as React.RefObject<HTMLElement>, handleClickOutside);\n\n  // Get selected items for display in button\n  const getSelectedItems = () => {\n    if (multiple) {\n      const selectedValues = Array.isArray(selectedItem) ? selectedItem : [];\n      return items.filter((item) => selectedValues.includes(item.value));\n    } else {\n      const selected = items.find((item) => item.value === selectedItem);\n      return selected ? [selected] : [];\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={classNames(\n        \"relative flex flex-col gap-y-1.5 items-start\",\n        className\n      )}\n    >\n      <DropdownButton\n        label={label}\n        multiSelectLabel={multiSelectLabel}\n        disabled={disabled}\n        className={buttonClassName}\n        onClick={() => setIsOpen(!isOpen)}\n        selectedItems={getSelectedItems()}\n        multiple={multiple}\n        count={getSelectedItems().length}\n        menuIcon={menuIcon}\n        size={size}\n      />\n\n      <DropdownMenu\n        items={items}\n        selectedItem={selectedItem}\n        handleChange={handleChange}\n        multiple={multiple}\n        menuClassName={menuClassName}\n        size={size}\n        isOpen={isOpen}\n        onItemClick={handleItemClick}\n        isScrollable={isScrollable}\n        search={search}\n        onClearSearch={onClearSearch}\n      />\n    </div>\n  );\n};\n\nexport const DropdownButton = ({\n  label,\n  multiSelectLabel,\n  disabled,\n  className,\n  onClick,\n  selectedItems = [],\n  multiple = false,\n  count = 0,\n  menuIcon,\n  size,\n}: DropdownButtonProps) => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  // Determine what to display\n  const hasSelection = selectedItems.length > 0;\n  const isSingleSelection = selectedItems.length === 1;\n  const isMultipleSelection = selectedItems.length > 1;\n\n  // Compute icon and label based on selection state\n  let buttonIcon: ButtonProps[\"icon\"] | undefined;\n  let buttonLabel: string;\n\n  if (hasSelection && isSingleSelection) {\n    // Single selection: show selected item's icon and label\n    const selectedItem = selectedItems[0];\n    buttonIcon = selectedItem.icon\n      ? {\n          name: selectedItem.icon.name,\n          className: selectedItem.icon.className || \"\",\n          size: selectedItem.icon.size || 18,\n          difficulties: selectedItem.icon.difficulties,\n        }\n      : menuIcon;\n    buttonLabel = selectedItem.label;\n  } else if (isMultipleSelection && multiple && multiSelectLabel) {\n    // Multiple selections: show count and multiSelectLabel\n    // Collect all difficulties from selected items\n    const combinedDifficulties = selectedItems\n      .filter((item) => item.icon?.difficulties)\n      .flatMap((item) => item.icon!.difficulties!)\n      .filter((value, index, self) => self.indexOf(value) === index) // Remove duplicates\n      .sort((a, b) => a - b); // Sort in ascending order\n\n    buttonIcon = menuIcon\n      ? {\n          name: menuIcon.name,\n          className: menuIcon.className || \"\",\n          size: menuIcon.size || 18,\n          difficulties:\n            combinedDifficulties.length > 0\n              ? combinedDifficulties\n              : menuIcon.difficulties,\n        }\n      : undefined;\n    buttonLabel = `${count} ${multiSelectLabel}`;\n  } else {\n    // Default: no selection\n    buttonIcon = menuIcon;\n    buttonLabel = label;\n  }\n\n  return (\n    <Button\n      icon={buttonIcon}\n      label={buttonLabel}\n      disabled={disabled}\n      size={size}\n      variant=\"secondary\"\n      className={classNames(\n        \"!origin-bottom-left !justify-start w-full\",\n        (size === \"md\" || size === \"lg\") && \"!pr-[18px] !pl-[12px]\",\n        size === \"sm\" && \"!pr-4 !pl-3\",\n        className\n      )}\n      useHoverEffect={false}\n      crosshairProps={{\n        variant: \"corners\",\n        corners: [\"bottom-right\"],\n        spacingX: !isHovered ? -6 : -4,\n        spacingY: !isHovered ? -6 : -4,\n        animationDuration: 0.5,\n        animationDelay: 0,\n        className: \"text-shade-mute group-hover:text-shade-primary\",\n      }}\n      onClick={onClick}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    />\n  );\n};\n\nexport const DropdownItem = ({\n  label,\n  icon,\n  onClick,\n  disabled,\n  isSelected = false,\n  size,\n}: DropdownItemProps) => {\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      className={classNames(\n        \"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\",\n        size === \"lg\" && \"py-4 pl-3 pr-3 text-base\",\n        size === \"md\" && \"py-3 pl-2.5 pr-3 text-sm\",\n        size === \"sm\" && \"py-2 pl-2.5 pr-3 h-[36px] text-sm\",\n        isSelected && \"bg-background/50\"\n      )}\n    >\n      <div className=\"opacity-0 group-hover/item:!opacity-100 absolute inset-0.5\">\n        <CrosshairCorners\n          size={6}\n          variant=\"corners\"\n          corners={[\"bottom-right\"]}\n          className=\"text-shade-mute\"\n          animationDelay={0}\n          animationDuration={0.5}\n        />\n      </div>\n\n      {icon && (\n        <Icon\n          name={icon.name}\n          className={classNames(\"flex-shrink-0\", icon.className)}\n          size={icon.size || 18}\n          difficulties={icon.difficulties}\n        />\n      )}\n      <span\n        className={classNames(\" text-shade-primary font-medium leading-[100%]\")}\n      >\n        {label}\n      </span>\n    </button>\n  );\n};\n"]}

package/dist/Dropdown.mjs

@@ -0,0 +1,387 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from './Button';
+import { useState, useRef, useCallback, useEffect } 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';
+
+const DropdownMenu = ({
+  items,
+  selectedItem,
+  handleChange,
+  multiple = false,
+  menuClassName,
+  size = "md",
+  isOpen,
+  onItemClick,
+  isScrollable = false,
+  animationOrigin = "top-left",
+  search,
+  onClearSearch
+}) => {
+  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 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__ */ 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(
+        "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__ */ 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 && /* @__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) => /* @__PURE__ */ 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__ */ 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] = 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 = () => {
+    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__ */ 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
+          }
+        ),
+        /* @__PURE__ */ 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] = 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__ */ jsx(
+    Button,
+    {
+      icon: buttonIcon,
+      label: buttonLabel,
+      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",
+        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__ */ 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(
+          Icon,
+          {
+            name: icon.name,
+            className: classNames("flex-shrink-0", icon.className),
+            size: icon.size || 18,
+            difficulties: icon.difficulties
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(" text-shade-primary font-medium leading-[100%]"),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Dropdown, DropdownButton, DropdownItem, DropdownMenu };
+//# sourceMappingURL=Dropdown.mjs.map
+//# sourceMappingURL=Dropdown.mjs.map

package/dist/Dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Dropdown.tsx"],"names":[],"mappings":"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","file":"Dropdown.mjs","sourcesContent":["import { IconName } from \"./icons\";\nimport { Button, ButtonProps } from \"./Button\";\nimport { useRef, useState, useEffect, useCallback } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { crisp, glide, swift } from \"./utils/easings\";\nimport { Checkbox } from \"./Checkbox\";\nimport { Divider } from \"./Divider\";\nimport { Icon, type IconProps } from \"./Icon\";\nimport { useOnClickOutside } from \"usehooks-ts\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type DropdownProps = {\n  className?: string;\n  items: {\n    label: string;\n    icon?: IconProps;\n    value: string;\n    disabled?: boolean;\n  }[];\n  selectedItem?: string | string[] | undefined;\n  handleChange: (item: string | string[] | undefined) => void;\n  multiple?: boolean;\n  disabled?: boolean;\n  label: string;\n  multiSelectLabel?: string;\n  buttonClassName?: string;\n  menuClassName?: string;\n  menuIcon?: IconProps;\n  size?: \"sm\" | \"md\" | \"lg\";\n  isScrollable?: boolean;\n  animationOrigin?: \"top-left\" | \"top-center\" | \"top-right\";\n  search?: string;\n  onClearSearch?: () => void;\n};\n\nexport type DropdownButtonProps = {\n  label: string;\n  multiSelectLabel?: string;\n  disabled?: boolean;\n  className?: string;\n  onClick: () => void;\n  buttonClassName?: string;\n  selectedItems?: DropdownProps[\"items\"];\n  multiple?: boolean;\n  count?: number;\n  menuIcon?: IconProps;\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\nexport type DropdownItemProps = {\n  label: string;\n  icon?: IconProps;\n  onClick: () => void;\n  disabled?: boolean;\n  isSelected?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\nexport type DropdownMenuProps = {\n  items: {\n    label: string;\n    icon?: IconProps;\n    value: string;\n    disabled?: boolean;\n  }[];\n  selectedItem?: string | string[] | undefined;\n  handleChange: (item: string | string[] | undefined) => void;\n  multiple?: boolean;\n  menuClassName?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  isOpen: boolean;\n  onItemClick?: (value: string) => void;\n  isScrollable?: boolean;\n  animationOrigin?: \"top-left\" | \"top-center\" | \"top-right\";\n  search?: string;\n  onClearSearch?: () => void;\n};\n\nexport const DropdownMenu = ({\n  items,\n  selectedItem,\n  handleChange,\n  multiple = false,\n  menuClassName,\n  size = \"md\",\n  isOpen,\n  onItemClick,\n  isScrollable = false,\n  animationOrigin = \"top-left\",\n  search,\n  onClearSearch,\n}: DropdownMenuProps) => {\n  const [isAtBottom, setIsAtBottom] = useState(false);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n  // Filter items based on search term\n  const filteredItems = (() => {\n    // If search is provided, filter based on search\n    if (search) {\n      return items.filter((item) =>\n        item.label.toLowerCase().includes(search.toLowerCase())\n      );\n    }\n\n    // Default: show all items\n    return items;\n  })();\n\n  // Handle scroll detection\n  const handleScroll = useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const { scrollTop, scrollHeight, clientHeight } = container;\n    const threshold = 5; // Small threshold to account for rounding\n    const isNearBottom = scrollTop + clientHeight >= scrollHeight - threshold;\n\n    setIsAtBottom(isNearBottom);\n  }, []);\n\n  // Reset scroll state when items change or menu opens\n  useEffect(() => {\n    if (isOpen) {\n      setIsAtBottom(false);\n    }\n  }, [isOpen, filteredItems.length]);\n\n  // Check if content is actually scrollable\n  useEffect(() => {\n    const container = scrollContainerRef.current;\n    if (!container || !isOpen) return;\n\n    const { scrollHeight, clientHeight } = container;\n    const hasScrollbar = scrollHeight > clientHeight;\n\n    // If no scrollbar (content fits), consider it \"at bottom\"\n    if (!hasScrollbar) {\n      setIsAtBottom(true);\n    }\n  }, [isOpen, filteredItems.length]);\n\n  // Helper to check if an item is selected\n  const isItemSelected = (value: string) => {\n    if (multiple) {\n      return (\n        Array.isArray(selectedItem) &&\n        selectedItem.length > 0 &&\n        selectedItem.includes(value)\n      );\n    }\n    return !!selectedItem && selectedItem === value;\n  };\n\n  // Handle item selection\n  const handleItemClick = (value: string) => {\n    if (multiple) {\n      const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];\n\n      // If all items are selected, clicking any item should deselect all others\n      if (isAllSelected()) {\n        handleChange([value]);\n      } else if (currentSelection.includes(value)) {\n        // Remove from selection\n        handleChange(currentSelection.filter((item) => item !== value));\n      } else {\n        // Add to selection\n        handleChange([...currentSelection, value]);\n      }\n    } else {\n      // Single select - if clicking the already selected item, deselect it\n      if (selectedItem === value) {\n        handleChange(undefined);\n      } else {\n        // Otherwise, select the new item\n        handleChange(value);\n      }\n      // Call the optional callback for single select\n      onItemClick?.(value);\n    }\n  };\n\n  // Handle select all\n  const handleSelectAll = () => {\n    const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];\n    const allValues = filteredItems\n      .filter((item) => !item.disabled)\n      .map((item) => item.value);\n\n    if (currentSelection.length === allValues.length) {\n      // Deselect all\n      handleChange([]);\n    } else {\n      // Select all\n      handleChange(allValues);\n    }\n  };\n\n  // Check if all items are selected\n  const isAllSelected = () => {\n    if (!Array.isArray(selectedItem) || selectedItem.length === 0) return false;\n    const selectableItems = filteredItems.filter((item) => !item.disabled);\n    return (\n      selectableItems.length > 0 &&\n      selectedItem.length === selectableItems.length &&\n      selectableItems.every((item) => selectedItem.includes(item.value))\n    );\n  };\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <motion.div\n          initial={{ opacity: 0, scale: 0.8, y: -15 }}\n          animate={{ opacity: 1, scale: 1, y: 0 }}\n          transition={{ duration: 0.1, ease: swift }}\n          exit={{ opacity: 0, scale: 0.8, y: -5 }}\n          className={classNames(\n            \"absolute top-[calc(100%+6px)] p-1 bg-card-foreground gradient-border before:bg-card-border\",\n            (size === \"lg\" || size === \"md\") && \"min-w-[200px]\",\n            animationOrigin === \"top-left\" && \"origin-top-left\",\n            animationOrigin === \"top-center\" && \"origin-top-center\",\n            animationOrigin === \"top-right\" && \"origin-top-right\",\n            menuClassName\n          )}\n        >\n          <div\n            ref={scrollContainerRef}\n            onScroll={handleScroll}\n            className={classNames(\n              \"flex flex-col gap-y-1\",\n              isScrollable && [\n                \"max-h-[250px] overflow-y-auto\",\n                !isAtBottom &&\n                  \"[mask-image:linear-gradient(180deg,black,black_85%,transparent_100%)]\",\n              ]\n            )}\n          >\n            {multiple && (\n              <div className=\"group flex flex-col gap-y-1\">\n                <button\n                  onClick={handleSelectAll}\n                  className={classNames(\n                    \"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\"\n                  )}\n                >\n                  <Checkbox checked={isAllSelected()} />\n                  <span className=\"text-sm text-shade-primary font-medium\">\n                    Select All\n                  </span>\n                </button>\n                <Divider direction=\"horizontal\" />\n              </div>\n            )}\n            {filteredItems.length > 0 ? (\n              filteredItems.map((item) => (\n                <DropdownItem\n                  key={item.value}\n                  label={item.label}\n                  icon={\n                    item.icon?.name\n                      ? {\n                          name: item.icon.name,\n                          className: item.icon.className,\n                          size: item.icon.size,\n                          difficulties: item.icon.difficulties,\n                        }\n                      : undefined\n                  }\n                  onClick={() => handleItemClick(item.value)}\n                  disabled={item.disabled}\n                  isSelected={isItemSelected(item.value)}\n                  size={size}\n                />\n              ))\n            ) : (\n              <button\n                onClick={() => {\n                  // Clear search by calling the onClearSearch callback\n                  if (onClearSearch) {\n                    onClearSearch();\n                  }\n                }}\n                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\"\n              >\n                No options found\n              </button>\n            )}\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport const Dropdown = ({\n  className,\n  items,\n  selectedItem,\n  handleChange,\n  label = \"View All\",\n  multiSelectLabel,\n  disabled,\n  buttonClassName,\n  menuClassName,\n  multiple = false,\n  menuIcon,\n  size = \"md\",\n  isScrollable = false,\n  search,\n  onClearSearch,\n}: DropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  // Handle item selection for single select (closes menu)\n  const handleItemClick = (value: string) => {\n    if (!multiple) {\n      // Single select - if clicking the already selected item, deselect it\n      if (selectedItem === value) {\n        handleChange(undefined);\n      } else {\n        // Otherwise, select the new item\n        handleChange(value);\n      }\n      setIsOpen(false);\n    }\n  };\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = () => {\n    setIsOpen(false);\n  };\n\n  // Cast ref to RefObject<HTMLElement> to satisfy useOnClickOutside's expected type\n  useOnClickOutside(ref as React.RefObject<HTMLElement>, handleClickOutside);\n\n  // Get selected items for display in button\n  const getSelectedItems = () => {\n    if (multiple) {\n      const selectedValues = Array.isArray(selectedItem) ? selectedItem : [];\n      return items.filter((item) => selectedValues.includes(item.value));\n    } else {\n      const selected = items.find((item) => item.value === selectedItem);\n      return selected ? [selected] : [];\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={classNames(\n        \"relative flex flex-col gap-y-1.5 items-start\",\n        className\n      )}\n    >\n      <DropdownButton\n        label={label}\n        multiSelectLabel={multiSelectLabel}\n        disabled={disabled}\n        className={buttonClassName}\n        onClick={() => setIsOpen(!isOpen)}\n        selectedItems={getSelectedItems()}\n        multiple={multiple}\n        count={getSelectedItems().length}\n        menuIcon={menuIcon}\n        size={size}\n      />\n\n      <DropdownMenu\n        items={items}\n        selectedItem={selectedItem}\n        handleChange={handleChange}\n        multiple={multiple}\n        menuClassName={menuClassName}\n        size={size}\n        isOpen={isOpen}\n        onItemClick={handleItemClick}\n        isScrollable={isScrollable}\n        search={search}\n        onClearSearch={onClearSearch}\n      />\n    </div>\n  );\n};\n\nexport const DropdownButton = ({\n  label,\n  multiSelectLabel,\n  disabled,\n  className,\n  onClick,\n  selectedItems = [],\n  multiple = false,\n  count = 0,\n  menuIcon,\n  size,\n}: DropdownButtonProps) => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  // Determine what to display\n  const hasSelection = selectedItems.length > 0;\n  const isSingleSelection = selectedItems.length === 1;\n  const isMultipleSelection = selectedItems.length > 1;\n\n  // Compute icon and label based on selection state\n  let buttonIcon: ButtonProps[\"icon\"] | undefined;\n  let buttonLabel: string;\n\n  if (hasSelection && isSingleSelection) {\n    // Single selection: show selected item's icon and label\n    const selectedItem = selectedItems[0];\n    buttonIcon = selectedItem.icon\n      ? {\n          name: selectedItem.icon.name,\n          className: selectedItem.icon.className || \"\",\n          size: selectedItem.icon.size || 18,\n          difficulties: selectedItem.icon.difficulties,\n        }\n      : menuIcon;\n    buttonLabel = selectedItem.label;\n  } else if (isMultipleSelection && multiple && multiSelectLabel) {\n    // Multiple selections: show count and multiSelectLabel\n    // Collect all difficulties from selected items\n    const combinedDifficulties = selectedItems\n      .filter((item) => item.icon?.difficulties)\n      .flatMap((item) => item.icon!.difficulties!)\n      .filter((value, index, self) => self.indexOf(value) === index) // Remove duplicates\n      .sort((a, b) => a - b); // Sort in ascending order\n\n    buttonIcon = menuIcon\n      ? {\n          name: menuIcon.name,\n          className: menuIcon.className || \"\",\n          size: menuIcon.size || 18,\n          difficulties:\n            combinedDifficulties.length > 0\n              ? combinedDifficulties\n              : menuIcon.difficulties,\n        }\n      : undefined;\n    buttonLabel = `${count} ${multiSelectLabel}`;\n  } else {\n    // Default: no selection\n    buttonIcon = menuIcon;\n    buttonLabel = label;\n  }\n\n  return (\n    <Button\n      icon={buttonIcon}\n      label={buttonLabel}\n      disabled={disabled}\n      size={size}\n      variant=\"secondary\"\n      className={classNames(\n        \"!origin-bottom-left !justify-start w-full\",\n        (size === \"md\" || size === \"lg\") && \"!pr-[18px] !pl-[12px]\",\n        size === \"sm\" && \"!pr-4 !pl-3\",\n        className\n      )}\n      useHoverEffect={false}\n      crosshairProps={{\n        variant: \"corners\",\n        corners: [\"bottom-right\"],\n        spacingX: !isHovered ? -6 : -4,\n        spacingY: !isHovered ? -6 : -4,\n        animationDuration: 0.5,\n        animationDelay: 0,\n        className: \"text-shade-mute group-hover:text-shade-primary\",\n      }}\n      onClick={onClick}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    />\n  );\n};\n\nexport const DropdownItem = ({\n  label,\n  icon,\n  onClick,\n  disabled,\n  isSelected = false,\n  size,\n}: DropdownItemProps) => {\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      className={classNames(\n        \"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\",\n        size === \"lg\" && \"py-4 pl-3 pr-3 text-base\",\n        size === \"md\" && \"py-3 pl-2.5 pr-3 text-sm\",\n        size === \"sm\" && \"py-2 pl-2.5 pr-3 h-[36px] text-sm\",\n        isSelected && \"bg-background/50\"\n      )}\n    >\n      <div className=\"opacity-0 group-hover/item:!opacity-100 absolute inset-0.5\">\n        <CrosshairCorners\n          size={6}\n          variant=\"corners\"\n          corners={[\"bottom-right\"]}\n          className=\"text-shade-mute\"\n          animationDelay={0}\n          animationDuration={0.5}\n        />\n      </div>\n\n      {icon && (\n        <Icon\n          name={icon.name}\n          className={classNames(\"flex-shrink-0\", icon.className)}\n          size={icon.size || 18}\n          difficulties={icon.difficulties}\n        />\n      )}\n      <span\n        className={classNames(\" text-shade-primary font-medium leading-[100%]\")}\n      >\n        {label}\n      </span>\n    </button>\n  );\n};\n"]}

package/dist/GridLines.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type GridLinesProps = {
+    className?: string;
+    animateLines?: boolean;
+    gap?: number;
+    lines?: ("top" | "bottom" | "left" | "right")[];
+};
+declare const GridLines: ({ gap, animateLines, lines, className, }: GridLinesProps) => react_jsx_runtime.JSX.Element;
+
+export { GridLines, type GridLinesProps };

package/dist/GridLines.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type GridLinesProps = {
+    className?: string;
+    animateLines?: boolean;
+    gap?: number;
+    lines?: ("top" | "bottom" | "left" | "right")[];
+};
+declare const GridLines: ({ gap, animateLines, lines, className, }: GridLinesProps) => react_jsx_runtime.JSX.Element;
+
+export { GridLines, type GridLinesProps };

package/dist/GridLines.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+var easings = require('./utils/easings');
+var classNames = require('classnames');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const GridLines = ({
+  gap = 8,
+  animateLines = true,
+  lines = ["top", "bottom", "left", "right"],
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames__default.default("absolute", className),
+      style: { inset: `${-gap}px` },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: {
+              clipPath: animateLines ? "inset(0 0 100% 0)" : "inset(0 0 0 0)"
+            },
+            animate: { clipPath: "inset(0 0 0 0)" },
+            transition: { duration: 0.25, ease: easings.glide },
+            className: classNames__default.default(
+              !lines.includes("left") && "hidden",
+              "absolute w-px bg-border-light left-0 top-1/2 -translate-y-1/2"
+            ),
+            style: { height: "100dvh" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: {
+              clipPath: animateLines ? "inset(100% 0 0 0)" : "inset(0 0 0 0)"
+            },
+            animate: { clipPath: "inset(0 0 0 0)" },
+            transition: { duration: 0.25, ease: easings.glide, delay: 0.05 },
+            className: classNames__default.default(
+              !lines.includes("right") && "hidden",
+              "absolute w-px bg-border-light right-0 top-1/2 -translate-y-1/2"
+            ),
+            style: { height: "100dvh" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: {
+              clipPath: animateLines ? "inset(0 100% 0 0)" : "inset(0 0 0 0)"
+            },
+            animate: { clipPath: "inset(0 0 0 0)" },
+            transition: { duration: 0.25, ease: easings.glide, delay: 0.1 },
+            className: classNames__default.default(
+              !lines.includes("top") && "hidden",
+              "absolute h-px bg-border-light top-0 left-1/2 -translate-x-1/2"
+            ),
+            style: { width: "100dvw" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: {
+              clipPath: animateLines ? "inset(0 0 0 100%)" : "inset(0 0 0 0)"
+            },
+            animate: { clipPath: "inset(0 0 0 0)" },
+            transition: { duration: 0.25, ease: easings.glide, delay: 0.15 },
+            className: classNames__default.default(
+              !lines.includes("bottom") && "hidden",
+              "absolute h-px bg-border-light bottom-0 left-1/2 -translate-x-1/2"
+            ),
+            style: { width: "100dvw" }
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.GridLines = GridLines;
+//# sourceMappingURL=GridLines.js.map
+//# sourceMappingURL=GridLines.js.map

package/dist/GridLines.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/GridLines.tsx"],"names":["jsxs","classNames","jsx","motion","glide"],"mappings":";;;;;;;;;;;AAWO,MAAM,YAAY,CAAC;AAAA,EACxB,GAAA,GAAM,CAAA;AAAA,EACN,YAAA,GAAe,IAAA;AAAA,EACf,KAAA,GAAQ,CAAC,KAAA,EAAO,QAAA,EAAU,QAAQ,OAAO,CAAA;AAAA,EACzC;AACF,CAAA,KAAsB;AACpB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,2BAAA,CAAW,UAAA,EAAY,SAAS,CAAA;AAAA,MAC3C,OAAO,EAAE,KAAA,EAAO,CAAA,EAAG,CAAC,GAAG,CAAA,EAAA,CAAA,EAAK;AAAA,MAE5B,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACC,YAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,UAAA,EAAY,EAAE,QAAA,EAAU,IAAA,EAAM,MAAMC,aAAA,EAAM;AAAA,YAC1C,SAAA,EAAWH,2BAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,MAAM,CAAA,IAAK,QAAA;AAAA,cAC3B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,MAAA,EAAQ,QAAA;AAAS;AAAA,SAC5B;AAAA,wBACAC,cAAA;AAAA,UAACC,YAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAMC,aAAA,EAAO,OAAO,IAAA,EAAK;AAAA,YACvD,SAAA,EAAWH,2BAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,OAAO,CAAA,IAAK,QAAA;AAAA,cAC5B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,MAAA,EAAQ,QAAA;AAAS;AAAA,SAC5B;AAAA,wBACAC,cAAA;AAAA,UAACC,YAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAMC,aAAA,EAAO,OAAO,GAAA,EAAI;AAAA,YACtD,SAAA,EAAWH,2BAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,KAAK,CAAA,IAAK,QAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA;AAAS;AAAA,SAC3B;AAAA,wBACAC,cAAA;AAAA,UAACC,YAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAMC,aAAA,EAAO,OAAO,IAAA,EAAK;AAAA,YACvD,SAAA,EAAWH,2BAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,QAAQ,CAAA,IAAK,QAAA;AAAA,cAC7B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA;AAAS;AAAA;AAC3B;AAAA;AAAA,GACF;AAEJ","file":"GridLines.js","sourcesContent":["import { motion } from \"motion/react\";\nimport { breeze, glide } from \"./utils/easings\";\nimport classNames from \"classnames\";\n\nexport type GridLinesProps = {\n  className?: string;\n  animateLines?: boolean;\n  gap?: number;\n  lines?: (\"top\" | \"bottom\" | \"left\" | \"right\")[];\n};\n\nexport const GridLines = ({\n  gap = 8,\n  animateLines = true,\n  lines = [\"top\", \"bottom\", \"left\", \"right\"],\n  className,\n}: GridLinesProps) => {\n  return (\n    <div\n      className={classNames(\"absolute\", className)}\n      style={{ inset: `${-gap}px` }}\n    >\n      <motion.div\n        initial={{\n          clipPath: animateLines ? \"inset(0 0 100% 0)\" : \"inset(0 0 0 0)\",\n        }}\n        animate={{ clipPath: \"inset(0 0 0 0)\" }}\n        transition={{ duration: 0.25, ease: glide }}\n        className={classNames(\n          !lines.includes(\"left\") && \"hidden\",\n          \"absolute w-px bg-border-light left-0 top-1/2 -translate-y-1/2\"\n        )}\n        style={{ height: \"100dvh\" }}\n      />\n      <motion.div\n        initial={{\n          clipPath: animateLines ? \"inset(100% 0 0 0)\" : \"inset(0 0 0 0)\",\n        }}\n        animate={{ clipPath: \"inset(0 0 0 0)\" }}\n        transition={{ duration: 0.25, ease: glide, delay: 0.05 }}\n        className={classNames(\n          !lines.includes(\"right\") && \"hidden\",\n          \"absolute w-px bg-border-light right-0 top-1/2 -translate-y-1/2\"\n        )}\n        style={{ height: \"100dvh\" }}\n      />\n      <motion.div\n        initial={{\n          clipPath: animateLines ? \"inset(0 100% 0 0)\" : \"inset(0 0 0 0)\",\n        }}\n        animate={{ clipPath: \"inset(0 0 0 0)\" }}\n        transition={{ duration: 0.25, ease: glide, delay: 0.1 }}\n        className={classNames(\n          !lines.includes(\"top\") && \"hidden\",\n          \"absolute h-px bg-border-light top-0 left-1/2 -translate-x-1/2\"\n        )}\n        style={{ width: \"100dvw\" }}\n      />\n      <motion.div\n        initial={{\n          clipPath: animateLines ? \"inset(0 0 0 100%)\" : \"inset(0 0 0 0)\",\n        }}\n        animate={{ clipPath: \"inset(0 0 0 0)\" }}\n        transition={{ duration: 0.25, ease: glide, delay: 0.15 }}\n        className={classNames(\n          !lines.includes(\"bottom\") && \"hidden\",\n          \"absolute h-px bg-border-light bottom-0 left-1/2 -translate-x-1/2\"\n        )}\n        style={{ width: \"100dvw\" }}\n      />\n    </div>\n  );\n};\n"]}