@spark-ui/hooks 17.2.3-beta.0 → 17.2.3-beta.1

package/dist/use-combined-state/index.d.ts

@@ -0,0 +1 @@
+export { useCombinedState } from './useCombinedState';

package/dist/use-combined-state/useCombinedState.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This hook must be used when a component has both a controlled and uncontrolled mode.
+ * It will take care of updating the state value when a controlled mode (prop) is updated.
+ */
+export declare function useCombinedState<T>(controlledValue?: T, defaultValue?: T, onChange?: (nextValue: T) => void): [
+    T | undefined,
+    (newValue: T, forceFlag?: (prev: T, next: T) => boolean) => void,
+    boolean,
+    T | undefined
+];

package/dist/use-merge-refs/index.d.ts

@@ -0,0 +1 @@
+export { useMergeRefs, assignRef, mergeRefs } from './useMergeRefs';

package/dist/use-merge-refs/useMergeRefs.d.ts

@@ -0,0 +1,4 @@
+import { Ref, RefCallback } from 'react';
+export declare function assignRef<T>(ref: Ref<T> | null | undefined, value: T): void;
+export declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;
+export declare function useMergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;

package/dist/use-mounted-state/index.d.ts

@@ -0,0 +1 @@
+export { useMountedState } from './useMountedState';

package/dist/use-mounted-state/useMountedState.d.ts

@@ -0,0 +1 @@
+export declare function useMountedState(): () => boolean;

package/dist/use-scroll-overflow/index.d.ts

@@ -0,0 +1,2 @@
+export { useScrollOverflow } from './useScrollOverflow';
+export type { ScrollOverflow, UseScrollOverflowReturn } from './useScrollOverflow';

package/dist/use-scroll-overflow/useScrollOverflow.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from 'react';
+export interface ScrollOverflow {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface UseScrollOverflowReturn {
+    overflow: ScrollOverflow;
+    refresh: () => void;
+}
+export declare function useScrollOverflow(scrollRef: RefObject<HTMLElement | null>, 
+/**
+ * Tolerance threshold for floating-point precision issues.
+ * Values below this threshold are considered as "no overflow" to handle sub-pixel rendering artifacts.
+ */
+{ precisionTreshold }?: {
+    precisionTreshold?: number;
+}): UseScrollOverflowReturn;

package/dist/use-sortable-list/index.d.ts

@@ -0,0 +1,2 @@
+export { useSortableList } from './useSortableList';
+export type { UseSortableListOptions, UseSortableListReturn, SortableItemProps, } from './useSortableList';

package/dist/use-sortable-list/useSortableList.d.ts

@@ -0,0 +1,95 @@
+import { Ref } from 'react';
+export interface UseSortableListOptions<T> {
+    /**
+     * The list of items to be sortable
+     */
+    items: T[];
+    /**
+     * Callback called when items are reordered
+     * @param newItems - The reordered items array
+     */
+    onReorder: (newItems: T[]) => void;
+    /**
+     * Function to generate a unique key for each item
+     * @param item - The item to generate a key for
+     * @returns A unique string key for the item
+     */
+    getItemKey: (item: T) => string;
+}
+export interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {
+    /**
+     * Whether the item is draggable
+     */
+    draggable: boolean;
+    /**
+     * Handler for drag start event
+     */
+    onDragStart: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag enter event
+     */
+    onDragEnter: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag over event
+     */
+    onDragOver: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag leave event
+     */
+    onDragLeave: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag end event
+     */
+    onDragEnd: (e: React.DragEvent) => void;
+    /**
+     * Handler for drop event
+     */
+    onDrop: (e: React.DragEvent) => void;
+    /**
+     * Handler for keyboard navigation
+     */
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    /**
+     * Tab index for keyboard navigation
+     */
+    tabIndex: number;
+    /**
+     * Ref callback to attach to the item element
+     */
+    ref: Ref<TElement>;
+}
+export interface UseSortableListReturn<T> {
+    /**
+     * Get props to spread on a sortable item element (includes ref)
+     * @param item - The item to get props for
+     * @param index - The current index of the item in the list
+     * @returns Props object to spread on the element
+     */
+    getItemProps: <TElement extends HTMLElement = HTMLElement>(item: T, index: number) => SortableItemProps<TElement>;
+}
+/**
+ * Hook to make a list of items sortable via drag and drop and keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * const { getItemProps } = useSortableList({
+ *   items: myItems,
+ *   onReorder: setMyItems,
+ *   getItemKey: (item) => item.id
+ * })
+ *
+ * return (
+ *   <ul>
+ *     {myItems.map((item, index) => (
+ *       <li
+ *         key={getItemKey(item)}
+ *         {...getItemProps(item, index)}
+ *       >
+ *         {item.name}
+ *       </li>
+ *     ))}
+ *   </ul>
+ * )
+ * ```
+ */
+export declare function useSortableList<T>({ items, onReorder, getItemKey, }: UseSortableListOptions<T>): UseSortableListReturn<T>;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@spark-ui/hooks",
-  "version": "17.2.3-beta.0",
+  "version": "17.2.3-beta.1",
   "description": "Common hooks for Spark UI",
   "exports": {
     "./*": {
-      "types": "./dist/src/*/index.d.ts",
+      "types": "./dist/*/index.d.ts",
       "import": "./dist/*/index.mjs",
       "require": "./dist/*/index.js"
     }
@@ -12,7 +12,7 @@
   "typesVersions": {
     "*": {
       "*": [
-        "./dist/src/*/index.d.ts"
+        "./dist/*/index.d.ts"
       ]
     }
   },

package/vite.config.ts

@@ -1,4 +1,4 @@
-import { readdirSync } from 'node:fs'
+import { cpSync, existsSync, readdirSync, rmSync } from 'node:fs'
 import { join } from 'node:path'
 
 import { defineConfig } from 'vite'
@@ -39,6 +39,25 @@ export default defineConfig({
       rollupTypes: false,
       insertTypesEntry: false,
       copyDtsFiles: false,
+      afterBuild: () => {
+        const distSrc = join(__dirname, 'dist/src')
+        if (!existsSync(distSrc)) return
+
+        for (const entry of readdirSync(distSrc, { withFileTypes: true })) {
+          if (!entry.isDirectory()) continue
+
+          const fromDir = join(distSrc, entry.name)
+          const toDir = join(__dirname, 'dist', entry.name)
+
+          for (const file of readdirSync(fromDir)) {
+            if (file.endsWith('.d.ts')) {
+              cpSync(join(fromDir, file), join(toDir, file), { force: true })
+            }
+          }
+        }
+
+        rmSync(distSrc, { recursive: true })
+      },
     }),
   ],
 })