@spark-ui/hooks 17.2.1-beta.0 → 17.2.1

package/dist/use-sortable-list/index.js

@@ -1,37 +1,12 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/use-sortable-list/index.ts
-var use_sortable_list_exports = {};
-__export(use_sortable_list_exports, {
-  useSortableList: () => useSortableList
-});
-module.exports = __toCommonJS(use_sortable_list_exports);
-
-// src/use-sortable-list/useSortableList.tsx
-var import_react = require("react");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
 function useSortableList({
   items,
   onReorder,
   getItemKey
 }) {
-  const itemRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const itemRefs = react.useRef(/* @__PURE__ */ new Map());
   const handleDragStart = (e, index) => {
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", index.toString());
@@ -53,7 +28,6 @@ function useSortableList({
     }
   };
   const handleDragEnd = (e) => {
-    ;
     e.currentTarget.style.opacity = "";
     e.currentTarget.removeAttribute("data-drag-over");
   };
@@ -86,13 +60,12 @@ function useSortableList({
     const currentItem = newItems[index];
     const targetItem = newItems[targetIndex];
     if (currentItem && targetItem) {
-      ;
       [newItems[index], newItems[targetIndex]] = [targetItem, currentItem];
       onReorder(newItems);
       requestAnimationFrame(() => {
         const itemKey = getItemKey(currentItem);
         const element = itemRefs.current.get(itemKey);
-        element?.focus();
+        element == null ? void 0 : element.focus();
       });
     }
   };
@@ -121,8 +94,5 @@ function useSortableList({
     getItemProps
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useSortableList
-});
-//# sourceMappingURL=index.js.map
+exports.useSortableList = useSortableList;
+//# sourceMappingURL=index.js.map

package/dist/use-sortable-list/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/use-sortable-list/index.ts","../../src/use-sortable-list/useSortableList.tsx"],"sourcesContent":["export { useSortableList } from './useSortableList'\nexport type {\n  UseSortableListOptions,\n  UseSortableListReturn,\n  SortableItemProps,\n} from './useSortableList'\n","/* eslint-disable max-lines-per-function */\nimport { Ref, useRef } from 'react'\n\nexport interface UseSortableListOptions<T> {\n  /**\n   * The list of items to be sortable\n   */\n  items: T[]\n  /**\n   * Callback called when items are reordered\n   * @param newItems - The reordered items array\n   */\n  onReorder: (newItems: T[]) => void\n  /**\n   * Function to generate a unique key for each item\n   * @param item - The item to generate a key for\n   * @returns A unique string key for the item\n   */\n  getItemKey: (item: T) => string\n}\n\nexport interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {\n  /**\n   * Whether the item is draggable\n   */\n  draggable: boolean\n  /**\n   * Handler for drag start event\n   */\n  onDragStart: (e: React.DragEvent) => void\n  /**\n   * Handler for drag enter event\n   */\n  onDragEnter: (e: React.DragEvent) => void\n  /**\n   * Handler for drag over event\n   */\n  onDragOver: (e: React.DragEvent) => void\n  /**\n   * Handler for drag leave event\n   */\n  onDragLeave: (e: React.DragEvent) => void\n  /**\n   * Handler for drag end event\n   */\n  onDragEnd: (e: React.DragEvent) => void\n  /**\n   * Handler for drop event\n   */\n  onDrop: (e: React.DragEvent) => void\n  /**\n   * Handler for keyboard navigation\n   */\n  onKeyDown: (e: React.KeyboardEvent) => void\n  /**\n   * Tab index for keyboard navigation\n   */\n  tabIndex: number\n  /**\n   * Ref callback to attach to the item element\n   */\n  ref: Ref<TElement>\n}\n\nexport interface UseSortableListReturn<T> {\n  /**\n   * Get props to spread on a sortable item element (includes ref)\n   * @param item - The item to get props for\n   * @param index - The current index of the item in the list\n   * @returns Props object to spread on the element\n   */\n  getItemProps: <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ) => SortableItemProps<TElement>\n}\n\n/**\n * Hook to make a list of items sortable via drag and drop and keyboard navigation\n *\n * @example\n * ```tsx\n * const { getItemProps } = useSortableList({\n *   items: myItems,\n *   onReorder: setMyItems,\n *   getItemKey: (item) => item.id\n * })\n *\n * return (\n *   <ul>\n *     {myItems.map((item, index) => (\n *       <li\n *         key={getItemKey(item)}\n *         {...getItemProps(item, index)}\n *       >\n *         {item.name}\n *       </li>\n *     ))}\n *   </ul>\n * )\n * ```\n */\nexport function useSortableList<T>({\n  items,\n  onReorder,\n  getItemKey,\n}: UseSortableListOptions<T>): UseSortableListReturn<T> {\n  // Refs to maintain focus after keyboard reordering\n  // Uses a key based on the item rather than index\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const handleDragStart = (e: React.DragEvent, index: number) => {\n    e.dataTransfer.effectAllowed = 'move'\n    e.dataTransfer.setData('text/plain', index.toString())\n    // Apply inline style for opacity during drag\n    ;(e.currentTarget as HTMLElement).style.opacity = 'var(--opacity-dim-3)'\n  }\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.currentTarget.setAttribute('data-drag-over', 'true')\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.dataTransfer.dropEffect = 'move'\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    // Only remove the attribute if we're actually leaving the element\n    // (not just moving to a child element)\n    const relatedTarget = e.relatedTarget as Node | null\n    const currentTarget = e.currentTarget as Node\n\n    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {\n      e.currentTarget.removeAttribute('data-drag-over')\n    }\n  }\n\n  const handleDragEnd = (e: React.DragEvent) => {\n    // Remove inline style for opacity\n    ;(e.currentTarget as HTMLElement).style.opacity = ''\n    e.currentTarget.removeAttribute('data-drag-over')\n  }\n\n  const handleDrop = (e: React.DragEvent, dropIndex: number) => {\n    e.preventDefault()\n    e.currentTarget.removeAttribute('data-drag-over')\n\n    const dragIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)\n\n    if (\n      !isNaN(dragIndex) &&\n      dragIndex !== dropIndex &&\n      dragIndex >= 0 &&\n      dragIndex < items.length\n    ) {\n      const newItems = [...items]\n      const [removed] = newItems.splice(dragIndex, 1)\n      if (removed) {\n        newItems.splice(dropIndex, 0, removed)\n        onReorder(newItems)\n      }\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent, _item: T, index: number) => {\n    // Determine direction\n    let direction = 0\n    if (e.key === 'ArrowUp') {\n      direction = -1\n    } else if (e.key === 'ArrowDown') {\n      direction = 1\n    } else {\n      return\n    }\n\n    const targetIndex = index + direction\n\n    // Validate move is within bounds\n    if (targetIndex < 0 || targetIndex >= items.length) return\n\n    e.preventDefault()\n\n    // Create new array and swap items\n    const newItems = [...items]\n    const currentItem = newItems[index]\n    const targetItem = newItems[targetIndex]\n\n    if (currentItem && targetItem) {\n      ;[newItems[index], newItems[targetIndex]] = [targetItem, currentItem]\n      onReorder(newItems)\n\n      // Maintain focus on the moved item\n      requestAnimationFrame(() => {\n        const itemKey = getItemKey(currentItem)\n        const element = itemRefs.current.get(itemKey)\n        element?.focus()\n      })\n    }\n  }\n\n  const getItemProps = <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ): SortableItemProps<TElement> => {\n    const itemKey = getItemKey(item)\n\n    return {\n      draggable: true,\n      onDragStart: e => handleDragStart(e, index),\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: e => handleDrop(e, index),\n      onKeyDown: e => handleKeyDown(e, item, index),\n      tabIndex: 0,\n      ref: (node: TElement | null) => {\n        if (node) {\n          itemRefs.current.set(itemKey, node as HTMLElement)\n        } else {\n          itemRefs.current.delete(itemKey)\n        }\n      },\n    }\n  }\n\n  return {\n    getItemProps,\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"file":"index.js","sources":["../../src/use-sortable-list/useSortableList.tsx"],"sourcesContent":["/* eslint-disable max-lines-per-function */\nimport { Ref, useRef } from 'react'\n\nexport interface UseSortableListOptions<T> {\n  /**\n   * The list of items to be sortable\n   */\n  items: T[]\n  /**\n   * Callback called when items are reordered\n   * @param newItems - The reordered items array\n   */\n  onReorder: (newItems: T[]) => void\n  /**\n   * Function to generate a unique key for each item\n   * @param item - The item to generate a key for\n   * @returns A unique string key for the item\n   */\n  getItemKey: (item: T) => string\n}\n\nexport interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {\n  /**\n   * Whether the item is draggable\n   */\n  draggable: boolean\n  /**\n   * Handler for drag start event\n   */\n  onDragStart: (e: React.DragEvent) => void\n  /**\n   * Handler for drag enter event\n   */\n  onDragEnter: (e: React.DragEvent) => void\n  /**\n   * Handler for drag over event\n   */\n  onDragOver: (e: React.DragEvent) => void\n  /**\n   * Handler for drag leave event\n   */\n  onDragLeave: (e: React.DragEvent) => void\n  /**\n   * Handler for drag end event\n   */\n  onDragEnd: (e: React.DragEvent) => void\n  /**\n   * Handler for drop event\n   */\n  onDrop: (e: React.DragEvent) => void\n  /**\n   * Handler for keyboard navigation\n   */\n  onKeyDown: (e: React.KeyboardEvent) => void\n  /**\n   * Tab index for keyboard navigation\n   */\n  tabIndex: number\n  /**\n   * Ref callback to attach to the item element\n   */\n  ref: Ref<TElement>\n}\n\nexport interface UseSortableListReturn<T> {\n  /**\n   * Get props to spread on a sortable item element (includes ref)\n   * @param item - The item to get props for\n   * @param index - The current index of the item in the list\n   * @returns Props object to spread on the element\n   */\n  getItemProps: <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ) => SortableItemProps<TElement>\n}\n\n/**\n * Hook to make a list of items sortable via drag and drop and keyboard navigation\n *\n * @example\n * ```tsx\n * const { getItemProps } = useSortableList({\n *   items: myItems,\n *   onReorder: setMyItems,\n *   getItemKey: (item) => item.id\n * })\n *\n * return (\n *   <ul>\n *     {myItems.map((item, index) => (\n *       <li\n *         key={getItemKey(item)}\n *         {...getItemProps(item, index)}\n *       >\n *         {item.name}\n *       </li>\n *     ))}\n *   </ul>\n * )\n * ```\n */\nexport function useSortableList<T>({\n  items,\n  onReorder,\n  getItemKey,\n}: UseSortableListOptions<T>): UseSortableListReturn<T> {\n  // Refs to maintain focus after keyboard reordering\n  // Uses a key based on the item rather than index\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const handleDragStart = (e: React.DragEvent, index: number) => {\n    e.dataTransfer.effectAllowed = 'move'\n    e.dataTransfer.setData('text/plain', index.toString())\n    // Apply inline style for opacity during drag\n    ;(e.currentTarget as HTMLElement).style.opacity = 'var(--opacity-dim-3)'\n  }\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.currentTarget.setAttribute('data-drag-over', 'true')\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.dataTransfer.dropEffect = 'move'\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    // Only remove the attribute if we're actually leaving the element\n    // (not just moving to a child element)\n    const relatedTarget = e.relatedTarget as Node | null\n    const currentTarget = e.currentTarget as Node\n\n    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {\n      e.currentTarget.removeAttribute('data-drag-over')\n    }\n  }\n\n  const handleDragEnd = (e: React.DragEvent) => {\n    // Remove inline style for opacity\n    ;(e.currentTarget as HTMLElement).style.opacity = ''\n    e.currentTarget.removeAttribute('data-drag-over')\n  }\n\n  const handleDrop = (e: React.DragEvent, dropIndex: number) => {\n    e.preventDefault()\n    e.currentTarget.removeAttribute('data-drag-over')\n\n    const dragIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)\n\n    if (\n      !isNaN(dragIndex) &&\n      dragIndex !== dropIndex &&\n      dragIndex >= 0 &&\n      dragIndex < items.length\n    ) {\n      const newItems = [...items]\n      const [removed] = newItems.splice(dragIndex, 1)\n      if (removed) {\n        newItems.splice(dropIndex, 0, removed)\n        onReorder(newItems)\n      }\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent, _item: T, index: number) => {\n    // Determine direction\n    let direction = 0\n    if (e.key === 'ArrowUp') {\n      direction = -1\n    } else if (e.key === 'ArrowDown') {\n      direction = 1\n    } else {\n      return\n    }\n\n    const targetIndex = index + direction\n\n    // Validate move is within bounds\n    if (targetIndex < 0 || targetIndex >= items.length) return\n\n    e.preventDefault()\n\n    // Create new array and swap items\n    const newItems = [...items]\n    const currentItem = newItems[index]\n    const targetItem = newItems[targetIndex]\n\n    if (currentItem && targetItem) {\n      ;[newItems[index], newItems[targetIndex]] = [targetItem, currentItem]\n      onReorder(newItems)\n\n      // Maintain focus on the moved item\n      requestAnimationFrame(() => {\n        const itemKey = getItemKey(currentItem)\n        const element = itemRefs.current.get(itemKey)\n        element?.focus()\n      })\n    }\n  }\n\n  const getItemProps = <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ): SortableItemProps<TElement> => {\n    const itemKey = getItemKey(item)\n\n    return {\n      draggable: true,\n      onDragStart: e => handleDragStart(e, index),\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: e => handleDrop(e, index),\n      onKeyDown: e => handleKeyDown(e, item, index),\n      tabIndex: 0,\n      ref: (node: TElement | null) => {\n        if (node) {\n          itemRefs.current.set(itemKey, node as HTMLElement)\n        } else {\n          itemRefs.current.delete(itemKey)\n        }\n      },\n    }\n  }\n\n  return {\n    getItemProps,\n  }\n}\n"],"names":["useRef"],"mappings":"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"}

package/dist/use-sortable-list/index.mjs

@@ -1,4 +1,3 @@
-// src/use-sortable-list/useSortableList.tsx
 import { useRef } from "react";
 function useSortableList({
   items,
@@ -27,7 +26,6 @@ function useSortableList({
     }
   };
   const handleDragEnd = (e) => {
-    ;
     e.currentTarget.style.opacity = "";
     e.currentTarget.removeAttribute("data-drag-over");
   };
@@ -60,13 +58,12 @@ function useSortableList({
     const currentItem = newItems[index];
     const targetItem = newItems[targetIndex];
     if (currentItem && targetItem) {
-      ;
       [newItems[index], newItems[targetIndex]] = [targetItem, currentItem];
       onReorder(newItems);
       requestAnimationFrame(() => {
         const itemKey = getItemKey(currentItem);
         const element = itemRefs.current.get(itemKey);
-        element?.focus();
+        element == null ? void 0 : element.focus();
       });
     }
   };
@@ -98,4 +95,4 @@ function useSortableList({
 export {
   useSortableList
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/use-sortable-list/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/use-sortable-list/useSortableList.tsx"],"sourcesContent":["/* eslint-disable max-lines-per-function */\nimport { Ref, useRef } from 'react'\n\nexport interface UseSortableListOptions<T> {\n  /**\n   * The list of items to be sortable\n   */\n  items: T[]\n  /**\n   * Callback called when items are reordered\n   * @param newItems - The reordered items array\n   */\n  onReorder: (newItems: T[]) => void\n  /**\n   * Function to generate a unique key for each item\n   * @param item - The item to generate a key for\n   * @returns A unique string key for the item\n   */\n  getItemKey: (item: T) => string\n}\n\nexport interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {\n  /**\n   * Whether the item is draggable\n   */\n  draggable: boolean\n  /**\n   * Handler for drag start event\n   */\n  onDragStart: (e: React.DragEvent) => void\n  /**\n   * Handler for drag enter event\n   */\n  onDragEnter: (e: React.DragEvent) => void\n  /**\n   * Handler for drag over event\n   */\n  onDragOver: (e: React.DragEvent) => void\n  /**\n   * Handler for drag leave event\n   */\n  onDragLeave: (e: React.DragEvent) => void\n  /**\n   * Handler for drag end event\n   */\n  onDragEnd: (e: React.DragEvent) => void\n  /**\n   * Handler for drop event\n   */\n  onDrop: (e: React.DragEvent) => void\n  /**\n   * Handler for keyboard navigation\n   */\n  onKeyDown: (e: React.KeyboardEvent) => void\n  /**\n   * Tab index for keyboard navigation\n   */\n  tabIndex: number\n  /**\n   * Ref callback to attach to the item element\n   */\n  ref: Ref<TElement>\n}\n\nexport interface UseSortableListReturn<T> {\n  /**\n   * Get props to spread on a sortable item element (includes ref)\n   * @param item - The item to get props for\n   * @param index - The current index of the item in the list\n   * @returns Props object to spread on the element\n   */\n  getItemProps: <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ) => SortableItemProps<TElement>\n}\n\n/**\n * Hook to make a list of items sortable via drag and drop and keyboard navigation\n *\n * @example\n * ```tsx\n * const { getItemProps } = useSortableList({\n *   items: myItems,\n *   onReorder: setMyItems,\n *   getItemKey: (item) => item.id\n * })\n *\n * return (\n *   <ul>\n *     {myItems.map((item, index) => (\n *       <li\n *         key={getItemKey(item)}\n *         {...getItemProps(item, index)}\n *       >\n *         {item.name}\n *       </li>\n *     ))}\n *   </ul>\n * )\n * ```\n */\nexport function useSortableList<T>({\n  items,\n  onReorder,\n  getItemKey,\n}: UseSortableListOptions<T>): UseSortableListReturn<T> {\n  // Refs to maintain focus after keyboard reordering\n  // Uses a key based on the item rather than index\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const handleDragStart = (e: React.DragEvent, index: number) => {\n    e.dataTransfer.effectAllowed = 'move'\n    e.dataTransfer.setData('text/plain', index.toString())\n    // Apply inline style for opacity during drag\n    ;(e.currentTarget as HTMLElement).style.opacity = 'var(--opacity-dim-3)'\n  }\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.currentTarget.setAttribute('data-drag-over', 'true')\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.dataTransfer.dropEffect = 'move'\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    // Only remove the attribute if we're actually leaving the element\n    // (not just moving to a child element)\n    const relatedTarget = e.relatedTarget as Node | null\n    const currentTarget = e.currentTarget as Node\n\n    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {\n      e.currentTarget.removeAttribute('data-drag-over')\n    }\n  }\n\n  const handleDragEnd = (e: React.DragEvent) => {\n    // Remove inline style for opacity\n    ;(e.currentTarget as HTMLElement).style.opacity = ''\n    e.currentTarget.removeAttribute('data-drag-over')\n  }\n\n  const handleDrop = (e: React.DragEvent, dropIndex: number) => {\n    e.preventDefault()\n    e.currentTarget.removeAttribute('data-drag-over')\n\n    const dragIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)\n\n    if (\n      !isNaN(dragIndex) &&\n      dragIndex !== dropIndex &&\n      dragIndex >= 0 &&\n      dragIndex < items.length\n    ) {\n      const newItems = [...items]\n      const [removed] = newItems.splice(dragIndex, 1)\n      if (removed) {\n        newItems.splice(dropIndex, 0, removed)\n        onReorder(newItems)\n      }\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent, _item: T, index: number) => {\n    // Determine direction\n    let direction = 0\n    if (e.key === 'ArrowUp') {\n      direction = -1\n    } else if (e.key === 'ArrowDown') {\n      direction = 1\n    } else {\n      return\n    }\n\n    const targetIndex = index + direction\n\n    // Validate move is within bounds\n    if (targetIndex < 0 || targetIndex >= items.length) return\n\n    e.preventDefault()\n\n    // Create new array and swap items\n    const newItems = [...items]\n    const currentItem = newItems[index]\n    const targetItem = newItems[targetIndex]\n\n    if (currentItem && targetItem) {\n      ;[newItems[index], newItems[targetIndex]] = [targetItem, currentItem]\n      onReorder(newItems)\n\n      // Maintain focus on the moved item\n      requestAnimationFrame(() => {\n        const itemKey = getItemKey(currentItem)\n        const element = itemRefs.current.get(itemKey)\n        element?.focus()\n      })\n    }\n  }\n\n  const getItemProps = <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ): SortableItemProps<TElement> => {\n    const itemKey = getItemKey(item)\n\n    return {\n      draggable: true,\n      onDragStart: e => handleDragStart(e, index),\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: e => handleDrop(e, index),\n      onKeyDown: e => handleKeyDown(e, item, index),\n      tabIndex: 0,\n      ref: (node: TElement | null) => {\n        if (node) {\n          itemRefs.current.set(itemKey, node as HTMLElement)\n        } else {\n          itemRefs.current.delete(itemKey)\n        }\n      },\n    }\n  }\n\n  return {\n    getItemProps,\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"file":"index.mjs","sources":["../../src/use-sortable-list/useSortableList.tsx"],"sourcesContent":["/* eslint-disable max-lines-per-function */\nimport { Ref, useRef } from 'react'\n\nexport interface UseSortableListOptions<T> {\n  /**\n   * The list of items to be sortable\n   */\n  items: T[]\n  /**\n   * Callback called when items are reordered\n   * @param newItems - The reordered items array\n   */\n  onReorder: (newItems: T[]) => void\n  /**\n   * Function to generate a unique key for each item\n   * @param item - The item to generate a key for\n   * @returns A unique string key for the item\n   */\n  getItemKey: (item: T) => string\n}\n\nexport interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {\n  /**\n   * Whether the item is draggable\n   */\n  draggable: boolean\n  /**\n   * Handler for drag start event\n   */\n  onDragStart: (e: React.DragEvent) => void\n  /**\n   * Handler for drag enter event\n   */\n  onDragEnter: (e: React.DragEvent) => void\n  /**\n   * Handler for drag over event\n   */\n  onDragOver: (e: React.DragEvent) => void\n  /**\n   * Handler for drag leave event\n   */\n  onDragLeave: (e: React.DragEvent) => void\n  /**\n   * Handler for drag end event\n   */\n  onDragEnd: (e: React.DragEvent) => void\n  /**\n   * Handler for drop event\n   */\n  onDrop: (e: React.DragEvent) => void\n  /**\n   * Handler for keyboard navigation\n   */\n  onKeyDown: (e: React.KeyboardEvent) => void\n  /**\n   * Tab index for keyboard navigation\n   */\n  tabIndex: number\n  /**\n   * Ref callback to attach to the item element\n   */\n  ref: Ref<TElement>\n}\n\nexport interface UseSortableListReturn<T> {\n  /**\n   * Get props to spread on a sortable item element (includes ref)\n   * @param item - The item to get props for\n   * @param index - The current index of the item in the list\n   * @returns Props object to spread on the element\n   */\n  getItemProps: <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ) => SortableItemProps<TElement>\n}\n\n/**\n * Hook to make a list of items sortable via drag and drop and keyboard navigation\n *\n * @example\n * ```tsx\n * const { getItemProps } = useSortableList({\n *   items: myItems,\n *   onReorder: setMyItems,\n *   getItemKey: (item) => item.id\n * })\n *\n * return (\n *   <ul>\n *     {myItems.map((item, index) => (\n *       <li\n *         key={getItemKey(item)}\n *         {...getItemProps(item, index)}\n *       >\n *         {item.name}\n *       </li>\n *     ))}\n *   </ul>\n * )\n * ```\n */\nexport function useSortableList<T>({\n  items,\n  onReorder,\n  getItemKey,\n}: UseSortableListOptions<T>): UseSortableListReturn<T> {\n  // Refs to maintain focus after keyboard reordering\n  // Uses a key based on the item rather than index\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const handleDragStart = (e: React.DragEvent, index: number) => {\n    e.dataTransfer.effectAllowed = 'move'\n    e.dataTransfer.setData('text/plain', index.toString())\n    // Apply inline style for opacity during drag\n    ;(e.currentTarget as HTMLElement).style.opacity = 'var(--opacity-dim-3)'\n  }\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.currentTarget.setAttribute('data-drag-over', 'true')\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.dataTransfer.dropEffect = 'move'\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    // Only remove the attribute if we're actually leaving the element\n    // (not just moving to a child element)\n    const relatedTarget = e.relatedTarget as Node | null\n    const currentTarget = e.currentTarget as Node\n\n    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {\n      e.currentTarget.removeAttribute('data-drag-over')\n    }\n  }\n\n  const handleDragEnd = (e: React.DragEvent) => {\n    // Remove inline style for opacity\n    ;(e.currentTarget as HTMLElement).style.opacity = ''\n    e.currentTarget.removeAttribute('data-drag-over')\n  }\n\n  const handleDrop = (e: React.DragEvent, dropIndex: number) => {\n    e.preventDefault()\n    e.currentTarget.removeAttribute('data-drag-over')\n\n    const dragIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)\n\n    if (\n      !isNaN(dragIndex) &&\n      dragIndex !== dropIndex &&\n      dragIndex >= 0 &&\n      dragIndex < items.length\n    ) {\n      const newItems = [...items]\n      const [removed] = newItems.splice(dragIndex, 1)\n      if (removed) {\n        newItems.splice(dropIndex, 0, removed)\n        onReorder(newItems)\n      }\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent, _item: T, index: number) => {\n    // Determine direction\n    let direction = 0\n    if (e.key === 'ArrowUp') {\n      direction = -1\n    } else if (e.key === 'ArrowDown') {\n      direction = 1\n    } else {\n      return\n    }\n\n    const targetIndex = index + direction\n\n    // Validate move is within bounds\n    if (targetIndex < 0 || targetIndex >= items.length) return\n\n    e.preventDefault()\n\n    // Create new array and swap items\n    const newItems = [...items]\n    const currentItem = newItems[index]\n    const targetItem = newItems[targetIndex]\n\n    if (currentItem && targetItem) {\n      ;[newItems[index], newItems[targetIndex]] = [targetItem, currentItem]\n      onReorder(newItems)\n\n      // Maintain focus on the moved item\n      requestAnimationFrame(() => {\n        const itemKey = getItemKey(currentItem)\n        const element = itemRefs.current.get(itemKey)\n        element?.focus()\n      })\n    }\n  }\n\n  const getItemProps = <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ): SortableItemProps<TElement> => {\n    const itemKey = getItemKey(item)\n\n    return {\n      draggable: true,\n      onDragStart: e => handleDragStart(e, index),\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: e => handleDrop(e, index),\n      onKeyDown: e => handleKeyDown(e, item, index),\n      tabIndex: 0,\n      ref: (node: TElement | null) => {\n        if (node) {\n          itemRefs.current.set(itemKey, node as HTMLElement)\n        } else {\n          itemRefs.current.delete(itemKey)\n        }\n      },\n    }\n  }\n\n  return {\n    getItemProps,\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/hooks",
-  "version": "17.2.1-beta.0",
+  "version": "17.2.1",
   "description": "Common hooks for Spark UI",
   "exports": {
     "./*": {
@@ -25,7 +25,7 @@
     "hook"
   ],
   "scripts": {
-    "build": "tsup"
+    "build": "vite build"
   },
   "dependencies": {
     "@types/lodash.isequal": "4.5.8",

package/vite.config.ts

@@ -0,0 +1,43 @@
+import { readdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+const srcDir = join(__dirname, 'src')
+const hookDirectories = readdirSync(srcDir, { withFileTypes: true })
+  .filter(entry => entry.isDirectory())
+  .map(entry => entry.name)
+
+const input = Object.fromEntries(
+  hookDirectories.map(directory => [directory, join(srcDir, directory, 'index.ts')])
+)
+
+export default defineConfig({
+  build: {
+    sourcemap: true,
+    minify: false,
+    emptyOutDir: true,
+    lib: {
+      entry: input,
+      formats: ['es', 'cjs'],
+      fileName: (format, entryName) => `${entryName}/index.${format === 'es' ? 'mjs' : 'js'}`,
+    },
+    rollupOptions: {
+      external: ['react'],
+      output: {
+        exports: 'named',
+      },
+    },
+  },
+  plugins: [
+    dts({
+      include: ['src/*/index.ts'],
+      entryRoot: 'src',
+      outDir: 'dist',
+      rollupTypes: false,
+      insertTypesEntry: false,
+      copyDtsFiles: false,
+    }),
+  ],
+})

package/.turbo/turbo-build.log

@@ -1,35 +0,0 @@
-
-
-> @spark-ui/hooks@10.6.1 build
-> tsup
-
-CLI Building entry: src/use-combined-state/index.ts, src/use-merge-refs/index.ts, src/use-mounted-state/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.0
-CLI Using tsup config: /Users/julien.bonnin/projects/personal/spark/packages/hooks/tsup.config.ts
-CLI Target: esnext
-CJS Build start
-ESM Build start
-CJS dist/use-combined-state/index.js     2.73 KB
-CJS dist/use-merge-refs/index.js         1.73 KB
-CJS dist/use-mounted-state/index.js      1.51 KB
-CJS dist/use-combined-state/index.js.map 2.18 KB
-CJS dist/use-mounted-state/index.js.map  833.00 B
-CJS dist/use-merge-refs/index.js.map     1.41 KB
-CJS ⚡️ Build success in 24ms
-ESM dist/use-combined-state/index.mjs     1.00 KB
-ESM dist/use-mounted-state/index.mjs      424.00 B
-ESM dist/use-merge-refs/index.mjs         618.00 B
-ESM dist/use-combined-state/index.mjs.map 2.03 KB
-ESM dist/use-mounted-state/index.mjs.map  701.00 B
-ESM dist/use-merge-refs/index.mjs.map     1.25 KB
-ESM ⚡️ Build success in 25ms
-DTS Build start
-DTS ⚡️ Build success in 3151ms
-DTS dist/use-combined-state/index.d.ts  454.00 B
-DTS dist/use-merge-refs/index.d.ts      333.00 B
-DTS dist/use-mounted-state/index.d.ts   80.00 B
-DTS dist/use-combined-state/index.d.mts 454.00 B
-DTS dist/use-merge-refs/index.d.mts     333.00 B
-DTS dist/use-mounted-state/index.d.mts  80.00 B
-⠙