@kala-ui/react-app 0.1.0-beta.0 → 0.1.0-beta.10

package/dist/components/data-table/use-table-state.js

@@ -0,0 +1,312 @@
+"use client";
+/**
+ * useTableState Hook
+ * Manages table state including sorting, filtering, pagination, and search
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+/**
+ * Hook to manage table state (sorting, filtering, search, pagination)
+ */
+export function useTableState({ data, columns, defaultSort, defaultFilters = [], searchConfig, pageSize: initialPageSize = 10, total: manualTotal, page, onSortChange, onFilterChange, onSearchChange, onPaginationChange, }) {
+    // State
+    const [sortConfig, setSortConfig] = useState(defaultSort ?? null);
+    const [filterConfigs, setFilterConfigs] = useState(defaultFilters);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    // Controlled page: mirror prop changes into internal state during render
+    // (adjust-state-on-prop-change). The hook keeps working uncontrolled when
+    // no `page` is supplied.
+    const prevControlledPageRef = useRef(undefined);
+    if (page !== undefined &&
+        page !== prevControlledPageRef.current &&
+        page !== currentPage) {
+        prevControlledPageRef.current = page;
+        setCurrentPage(page);
+    }
+    else {
+        prevControlledPageRef.current = page;
+    }
+    // Sync pageSize when initialPageSize changes (e.g. data loads and pagination is false)
+    useEffect(() => {
+        setPageSize(initialPageSize);
+    }, [initialPageSize]);
+    // Get search keys
+    const searchKeys = useMemo(() => {
+        if (!searchConfig)
+            return [];
+        const defaultKeys = columns
+            .filter((col) => col.accessorKey)
+            .map((col) => col.accessorKey);
+        if (typeof searchConfig === "boolean") {
+            return defaultKeys;
+        }
+        return searchConfig.searchKeys ?? defaultKeys;
+    }, [searchConfig, columns]);
+    // Filter data based on search query
+    // When onSearchChange is provided, data is already server-filtered — skip client-side filtering
+    const searchedData = useMemo(() => {
+        if (onSearchChange)
+            return data;
+        if (!searchQuery.trim() || searchKeys.length === 0)
+            return data;
+        const query = searchQuery.toLowerCase();
+        return data.filter((row) => {
+            return searchKeys.some((key) => {
+                const value = row[key];
+                if (value === null || value === undefined)
+                    return false;
+                return String(value).toLowerCase().includes(query);
+            });
+        });
+    }, [data, searchQuery, searchKeys, onSearchChange]);
+    // Apply filters
+    const filteredData = useMemo(() => {
+        if (filterConfigs.length === 0)
+            return searchedData;
+        return searchedData.filter((row) => {
+            return filterConfigs.every((filter) => {
+                const value = row[filter.key];
+                const filterValue = filter.value;
+                switch (filter.operator) {
+                    case "equals":
+                        if (typeof value === "boolean") {
+                            return value === (filterValue === "true" || filterValue === true);
+                        }
+                        return value === filterValue;
+                    case "contains":
+                        return String(value)
+                            .toLowerCase()
+                            .includes(String(filterValue).toLowerCase());
+                    case "startsWith":
+                        return String(value)
+                            .toLowerCase()
+                            .startsWith(String(filterValue).toLowerCase());
+                    case "endsWith":
+                        return String(value)
+                            .toLowerCase()
+                            .endsWith(String(filterValue).toLowerCase());
+                    case "in":
+                        if (typeof value === "boolean") {
+                            const strVal = String(value);
+                            return (Array.isArray(filterValue) &&
+                                filterValue.some((v) => v === strVal || v === value));
+                        }
+                        return Array.isArray(filterValue) && filterValue.includes(value);
+                    default:
+                        return true;
+                }
+            });
+        });
+    }, [searchedData, filterConfigs]);
+    // Apply sorting
+    const sortedData = useMemo(() => {
+        if (!sortConfig)
+            return filteredData;
+        const { key, direction } = sortConfig;
+        const column = columns.find((col) => col.accessorKey === key);
+        return [...filteredData].sort((a, b) => {
+            // Use custom sort function if provided
+            if (column?.sortFn) {
+                return column.sortFn(a, b, direction);
+            }
+            // Default sort
+            const aValue = a[key];
+            const bValue = b[key];
+            if (aValue === bValue)
+                return 0;
+            if (aValue === null || aValue === undefined)
+                return 1;
+            if (bValue === null || bValue === undefined)
+                return -1;
+            // Handle different types
+            if (typeof aValue === "string" && typeof bValue === "string") {
+                const result = aValue.localeCompare(bValue);
+                return direction === "asc" ? result : -result;
+            }
+            if (typeof aValue === "number" && typeof bValue === "number") {
+                return direction === "asc" ? aValue - bValue : bValue - aValue;
+            }
+            if (aValue instanceof Date && bValue instanceof Date) {
+                return direction === "asc"
+                    ? aValue.getTime() - bValue.getTime()
+                    : bValue.getTime() - aValue.getTime();
+            }
+            // Fallback to string comparison
+            const result = String(aValue).localeCompare(String(bValue));
+            return direction === "asc" ? result : -result;
+        });
+    }, [filteredData, sortConfig, columns]);
+    // Pagination
+    const totalPages = Math.ceil((manualTotal ?? sortedData.length) / pageSize);
+    const hasNextPage = currentPage < totalPages;
+    const hasPreviousPage = currentPage > 1;
+    const pageData = useMemo(() => {
+        // If manualTotal AND onPaginationChange are provided, assume server-side pagination
+        // Otherwise, do client-side pagination
+        if (manualTotal !== undefined && onPaginationChange !== undefined) {
+            return sortedData;
+        }
+        const startIndex = (currentPage - 1) * pageSize;
+        const endIndex = startIndex + pageSize;
+        return sortedData.slice(startIndex, endIndex);
+    }, [sortedData, currentPage, pageSize, manualTotal, onPaginationChange]);
+    // Toggle sort
+    const toggleSort = useCallback((key) => {
+        setSortConfig((prev) => {
+            let newSort;
+            if (!prev || prev.key !== key) {
+                newSort = { key, direction: "asc" };
+            }
+            else if (prev.direction === "asc") {
+                newSort = { key, direction: "desc" };
+            }
+            else {
+                newSort = null; // Clear sort
+            }
+            return newSort;
+        });
+        setCurrentPage(1); // Reset to first page when sorting changes
+    }, []);
+    // Notify parent of sort changes after render. Calling the callback directly
+    // inside useEffect is safe — the setState that triggered this effect has
+    // already committed; the callback runs in the passive-effect phase, not
+    // during render. (The prior queueMicrotask deferral broke act() in tests:
+    // the microtask fired outside act()'s flush window, so sync assertions saw
+    // zero calls.)
+    const prevSortRef = useRef(defaultSort ?? null);
+    useEffect(() => {
+        if (sortConfig !== prevSortRef.current) {
+            prevSortRef.current = sortConfig;
+            onSortChange?.(sortConfig);
+        }
+    });
+    // Notify parent of filter changes after render.
+    const prevFilterRef = useRef(defaultFilters);
+    useEffect(() => {
+        if (filterConfigs !== prevFilterRef.current) {
+            prevFilterRef.current = filterConfigs;
+            onFilterChange?.(filterConfigs);
+        }
+    });
+    // Extract debounce ms from searchConfig
+    const debounceMs = useMemo(() => {
+        if (!searchConfig || typeof searchConfig === "boolean")
+            return 0;
+        return searchConfig.debounce ?? 0;
+    }, [searchConfig]);
+    // Notify parent of search changes after render. When a debounce is
+    // configured, the parent (server-side search) is notified only after the
+    // debounce window elapses — firing on every keystroke would hammer the
+    // server. The local searchQuery state updates immediately so the local
+    // (client-side) filtering stays responsive; only the parent callback waits.
+    // The effect depends on [searchQuery] only: re-running it on unrelated
+    // re-renders would clear the pending timer and silently swallow the
+    // callback, so the latest callback is read through a ref instead.
+    const prevSearchRef = useRef("");
+    const onSearchChangeRef = useRef(onSearchChange);
+    useEffect(() => {
+        onSearchChangeRef.current = onSearchChange;
+    });
+    useEffect(() => {
+        if (searchQuery === prevSearchRef.current)
+            return;
+        prevSearchRef.current = searchQuery;
+        const callback = onSearchChangeRef.current;
+        if (!callback)
+            return;
+        if (debounceMs <= 0) {
+            callback(searchQuery);
+            return;
+        }
+        const timer = setTimeout(() => callback(searchQuery), debounceMs);
+        return () => clearTimeout(timer);
+    }, [searchQuery, debounceMs]);
+    // Notify parent of pagination changes after render.
+    const prevPaginationRef = useRef({ page: 1, pageSize: initialPageSize });
+    useEffect(() => {
+        const prev = prevPaginationRef.current;
+        if (currentPage !== prev.page || pageSize !== prev.pageSize) {
+            prevPaginationRef.current = { page: currentPage, pageSize };
+            onPaginationChange?.(currentPage, pageSize);
+        }
+    });
+    // Filter management
+    const setFilter = useCallback((filter) => {
+        setFilterConfigs((prev) => {
+            const filtered = prev.filter((f) => f.key !== filter.key);
+            return [...filtered, filter];
+        });
+        setCurrentPage(1);
+    }, []);
+    const removeFilter = useCallback((key) => {
+        setFilterConfigs((prev) => prev.filter((f) => f.key !== key));
+        setCurrentPage(1);
+    }, []);
+    const clearFilters = useCallback(() => {
+        setFilterConfigs([]);
+        setCurrentPage(1);
+    }, []);
+    const searchDebounceRef = useRef(null);
+    // Search management
+    const handleSetSearchQuery = useCallback((query) => {
+        setSearchQuery(query);
+        if (searchDebounceRef.current)
+            clearTimeout(searchDebounceRef.current);
+        if (debounceMs > 0) {
+            searchDebounceRef.current = setTimeout(() => {
+                setCurrentPage(1);
+            }, debounceMs);
+        }
+        else {
+            setCurrentPage(1);
+        }
+    }, [debounceMs]);
+    // Set current page and notify server-side listener
+    const handleSetCurrentPage = useCallback((pageOrUpdater) => {
+        setCurrentPage((prev) => {
+            const newPage = typeof pageOrUpdater === "function"
+                ? pageOrUpdater(prev)
+                : pageOrUpdater;
+            return newPage;
+        });
+    }, []);
+    // Pagination navigation
+    const nextPage = useCallback(() => {
+        if (hasNextPage) {
+            handleSetCurrentPage((prev) => prev + 1);
+        }
+    }, [hasNextPage, handleSetCurrentPage]);
+    const previousPage = useCallback(() => {
+        if (hasPreviousPage) {
+            handleSetCurrentPage((prev) => prev - 1);
+        }
+    }, [hasPreviousPage, handleSetCurrentPage]);
+    // Page size change — reset page without direct callback
+    const handleSetPageSize = useCallback((size) => {
+        setPageSize(size);
+        setCurrentPage(1);
+    }, []);
+    return {
+        processedData: sortedData,
+        pageData,
+        sortConfig,
+        setSortConfig,
+        toggleSort,
+        filterConfigs,
+        setFilter,
+        removeFilter,
+        clearFilters,
+        searchQuery,
+        setSearchQuery: handleSetSearchQuery,
+        currentPage,
+        setCurrentPage: handleSetCurrentPage,
+        pageSize,
+        setPageSize: handleSetPageSize,
+        totalPages,
+        hasNextPage,
+        hasPreviousPage,
+        nextPage,
+        previousPage,
+    };
+}

package/dist/components/dnd/dnd.d.ts

@@ -2,117 +2,35 @@
  * DnD Component - Drag and Drop primitives for @dnd-kit
  * Provides consistent wrappers with animations, sortable support, and drag overlays
  */
-import type { Active, Collision, CollisionDetection, DndContextProps as DndKitContextProps, DragEndEvent, DraggableAttributes, DraggableSyntheticListeners, DragOverEvent, DragStartEvent, Modifier, Over, PointerActivationConstraint, UniqueIdentifier } from "@dnd-kit/core";
+import type { DragDropContextProps, DragOverlayComponentProps, DraggableProps, DroppableProps, SortableContextProps, SortableHandleProps, SortableItemProps, UseDragDropSensorsOptions } from "./dnd.types";
 import { KeyboardSensor, PointerSensor, TouchSensor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
-import { type SortingStrategy, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
-import type { Transform } from "@dnd-kit/utilities";
+import { sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
 import * as React from "react";
-type SyntheticListenerMap = DraggableSyntheticListeners;
-export type DragDropModifier = Modifier;
-export type DragDropCollisionDetection = CollisionDetection;
-export type DragDropSortingStrategy = SortingStrategy;
-export type DragDropPointerConstraint = PointerActivationConstraint;
 export declare const collisionDetectionAlgorithms: {
-    readonly closestCenter: CollisionDetection;
-    readonly closestCorners: CollisionDetection;
-    readonly rectIntersection: CollisionDetection;
-    readonly pointerWithin: CollisionDetection;
+    readonly closestCenter: import("@dnd-kit/core").CollisionDetection;
+    readonly closestCorners: import("@dnd-kit/core").CollisionDetection;
+    readonly rectIntersection: import("@dnd-kit/core").CollisionDetection;
+    readonly pointerWithin: import("@dnd-kit/core").CollisionDetection;
 };
 export declare const modifiers: {
-    readonly restrictToHorizontalAxis: Modifier;
-    readonly restrictToVerticalAxis: Modifier;
-    readonly restrictToWindowEdges: Modifier;
-    readonly restrictToParentElement: Modifier;
-    readonly restrictToFirstScrollableAncestor: Modifier;
+    readonly restrictToHorizontalAxis: import("@dnd-kit/core").Modifier;
+    readonly restrictToVerticalAxis: import("@dnd-kit/core").Modifier;
+    readonly restrictToWindowEdges: import("@dnd-kit/core").Modifier;
+    readonly restrictToParentElement: import("@dnd-kit/core").Modifier;
+    readonly restrictToFirstScrollableAncestor: import("@dnd-kit/core").Modifier;
 };
 export declare const sortingStrategies: {
-    readonly vertical: SortingStrategy;
-    readonly horizontal: SortingStrategy;
-    readonly rect: SortingStrategy;
-    readonly rectSwapping: SortingStrategy;
+    readonly vertical: import("@dnd-kit/sortable").SortingStrategy;
+    readonly horizontal: import("@dnd-kit/sortable").SortingStrategy;
+    readonly rect: import("@dnd-kit/sortable").SortingStrategy;
+    readonly rectSwapping: import("@dnd-kit/sortable").SortingStrategy;
 };
-export interface UseDragDropSensorsOptions {
-    activationConstraint?: PointerActivationConstraint;
-    keyboardCoordinateGetter?: typeof sortableKeyboardCoordinates;
-}
 declare function createDragDropSensors(options?: UseDragDropSensorsOptions): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
-export interface DragDropContextProps extends Omit<DndKitContextProps, "sensors"> {
-    children: React.ReactNode;
-    sensors?: ReturnType<typeof createDragDropSensors>;
-    useSensors?: UseDragDropSensorsOptions;
-}
 declare function DragDropContext({ children, sensors: sensorsProp, useSensors: useSensorsOptions, ...props }: DragDropContextProps): React.JSX.Element;
-export interface DroppableProps {
-    ref?: React.Ref<HTMLDivElement>;
-    id: UniqueIdentifier;
-    children: React.ReactNode | ((args: {
-        isOver: boolean;
-        setNodeRef: (node: HTMLElement | null) => void;
-    }) => React.ReactNode);
-    className?: string;
-    disabled?: boolean;
-}
 declare function Droppable({ ref, children, className, id, disabled, ...props }: DroppableProps): React.JSX.Element;
-export interface DraggableProps {
-    ref?: React.Ref<HTMLDivElement>;
-    id: UniqueIdentifier;
-    children: React.ReactNode | ((args: {
-        attributes: DraggableAttributes;
-        listeners: SyntheticListenerMap | undefined;
-        setNodeRef: (node: HTMLElement | null) => void;
-        transform: {
-            x: number;
-            y: number;
-            scaleX: number;
-            scaleY: number;
-        } | null;
-        isDragging: boolean;
-    }) => React.ReactNode);
-    className?: string;
-    disabled?: boolean;
-}
 declare function Draggable({ ref, children, className, id, disabled, ...props }: DraggableProps): React.JSX.Element;
-export interface SortableContextProps {
-    id?: UniqueIdentifier;
-    items: UniqueIdentifier[] | {
-        id: UniqueIdentifier;
-    }[];
-    strategy?: SortingStrategy;
-    children: React.ReactNode;
-}
 declare function SortableContext({ children, items, strategy, }: SortableContextProps): React.JSX.Element;
-export interface SortableItemProps {
-    ref?: React.Ref<HTMLDivElement>;
-    id: UniqueIdentifier;
-    children: React.ReactNode | ((args: {
-        attributes: DraggableAttributes;
-        listeners: SyntheticListenerMap | undefined;
-        setNodeRef: (node: HTMLElement | null) => void;
-        transform: Transform | null;
-        transition: string | undefined;
-        isDragging: boolean;
-        isSorting: boolean;
-        isOver: boolean;
-    }) => React.ReactNode);
-    className?: string;
-    disabled?: boolean;
-    handle?: boolean;
-}
-declare function SortableItem({ ref, children, className, id, disabled, handle, ...props }: SortableItemProps): React.JSX.Element;
-export interface SortableHandleProps {
-    ref?: React.Ref<HTMLDivElement>;
-    children: React.ReactNode | ((listeners: SyntheticListenerMap | undefined) => React.ReactNode);
-    className?: string;
-}
+declare function SortableItem({ ref, children, className, id, disabled, handle, slotStyles: slotStylesRaw, ...props }: SortableItemProps): React.JSX.Element;
 declare function SortableHandle({ ref, children, className, ...props }: SortableHandleProps): React.JSX.Element;
-export interface DragOverlayComponentProps {
-    children: React.ReactNode;
-    className?: string;
-    dropAnimation?: {
-        duration?: number;
-        easing?: string;
-    } | null;
-}
 declare function DragOverlayComponent({ children, className, dropAnimation, ...props }: DragOverlayComponentProps): React.JSX.Element;
-export type { Active, Collision, DragEndEvent as DropResult, DraggableAttributes, DraggableSyntheticListeners, DragOverEvent as DragUpdate, DragOverEvent, DragStartEvent as DragStart, Over, SortingStrategy, Transform, UniqueIdentifier, };
 export { createDragDropSensors as useDragDropSensors, DragDropContext, Draggable, DragOverlayComponent, Droppable, KeyboardSensor, PointerSensor, SortableContext, SortableHandle, SortableItem, sortableKeyboardCoordinates, TouchSensor, useDraggable, useDroppable, useSensor, useSensors, useSortable, };

package/dist/components/dnd/dnd.js

@@ -10,6 +10,8 @@ import { restrictToFirstScrollableAncestor, restrictToHorizontalAxis, restrictTo
 import { horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, SortableContext as SortableContextKit, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { cn } from "@kala-ui/react/lib/utils";
+import { useSlotStyles } from "@kala-ui/react/kala-provider";
+import { applySlot } from "@kala-ui/react/lib/slot-styles";
 import { useMergedRef } from "@kala-ui/react-hooks";
 import * as React from "react";
 // ============================================================================
@@ -40,6 +42,9 @@ export const sortingStrategies = {
     rect: rectSortingStrategy,
     rectSwapping: rectSwappingStrategy,
 };
+// ============================================================================
+// Sensors Hook
+// ============================================================================
 function createDragDropSensors(options = {}) {
     const { activationConstraint, keyboardCoordinateGetter = sortableKeyboardCoordinates, } = options;
     const sensors = useSensors(useSensor(PointerSensor, {
@@ -51,11 +56,17 @@ function createDragDropSensors(options = {}) {
     }));
     return sensors;
 }
+// ============================================================================
+// DndContext
+// ============================================================================
 function DragDropContext({ children, sensors: sensorsProp, useSensors: useSensorsOptions, ...props }) {
     const defaultSensors = createDragDropSensors(useSensorsOptions);
     const sensors = sensorsProp ?? defaultSensors;
-    return (_jsx(DndKitContext, { sensors: sensors, ...props, children: children }));
+    return (_jsx(DndKitContext, { "data-kala-component": "dnd-drag-drop-context", sensors: sensors, ...props, children: children }));
 }
+// ============================================================================
+// Droppable
+// ============================================================================
 function Droppable({ ref, children, className, id, disabled = false, ...props }) {
     const { isOver, setNodeRef } = useDroppable({
         id,
@@ -64,8 +75,11 @@ function Droppable({ ref, children, className, id, disabled = false, ...props })
     const content = typeof children === "function"
         ? children({ isOver, setNodeRef })
         : children;
-    return (_jsx("div", { ref: useMergedRef(ref, setNodeRef), className: cn(className), ...props, children: content }));
+    return (_jsx("div", { "data-kala-component": "dnd-droppable", ref: useMergedRef(ref, setNodeRef), className: cn(className), ...props, children: content }));
 }
+// ============================================================================
+// Draggable
+// ============================================================================
 function Draggable({ ref, children, className, id, disabled = false, ...props }) {
     const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
         id,
@@ -79,14 +93,19 @@ function Draggable({ ref, children, className, id, disabled = false, ...props })
             transform: CSS.Translate.toString(transform),
         }
         : undefined;
-    return (_jsx("div", { ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...listeners, ...props, children: content }));
+    return (_jsx("div", { "data-kala-component": "dnd-draggable", ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...listeners, ...props, children: content }));
 }
+// ============================================================================
+// Sortable Context
+// ============================================================================
 function SortableContext({ children, items, strategy = verticalListSortingStrategy, }) {
     const itemIds = React.useMemo(() => items.map((item) => typeof item === "object" && "id" in item ? item.id : item), [items]);
-    return (_jsx(SortableContextKit, { items: itemIds, strategy: strategy, children: children }));
+    return (_jsx(SortableContextKit, { "data-kala-component": "dnd-sortable-context", items: itemIds, strategy: strategy, children: children }));
 }
 const SortableHandleContext = React.createContext(null);
-function SortableItem({ ref, children, className, id, disabled = false, handle = false, ...props }) {
+function SortableItem({ ref, children, className, id, disabled = false, handle = false, slotStyles: slotStylesRaw, ...props }) {
+    const slotStyles = useSlotStyles("dnd", slotStylesRaw);
+    const itemRoot = applySlot(cn(className), slotStyles?.root);
     const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isSorting, isOver, } = useSortable({
         id,
         disabled,
@@ -108,19 +127,28 @@ function SortableItem({ ref, children, className, id, disabled = false, handle =
         transition,
         zIndex: isDragging ? 9999 : undefined,
     };
-    return (_jsx(SortableHandleContext.Provider, { value: { attributes, listeners, setActivatorNodeRef }, children: _jsx("div", { ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...(handle ? {} : listeners), ...props, children: content }) }));
+    return (_jsx(SortableHandleContext.Provider, { value: { attributes, listeners, setActivatorNodeRef }, children: _jsx("div", { "data-kala-component": "dnd-sortable-item", ref: useMergedRef(ref, setNodeRef), style: style, className: itemRoot.className, ...attributes, ...(handle ? {} : listeners), ...props, children: content }) }));
 }
+// ============================================================================
+// Sortable Handle
+// ============================================================================
 function SortableHandle({ ref, children, className, ...props }) {
     const sortable = React.useContext(SortableHandleContext);
     if (!sortable && process.env.NODE_ENV !== "production") {
         console.warn("SortableHandle must be rendered inside a SortableItem to receive drag listeners.");
     }
     const content = typeof children === "function" ? children(sortable?.listeners) : children;
-    return (_jsx("div", { ref: useMergedRef(ref, sortable?.setActivatorNodeRef), className: cn("cursor-grab active:cursor-grabbing", className), ...(sortable?.attributes ?? {}), ...(sortable?.listeners ?? {}), ...props, children: content }));
+    return (_jsx("div", { "data-kala-component": "dnd-sortable-handle", ref: useMergedRef(ref, sortable?.setActivatorNodeRef), className: cn("cursor-grab active:cursor-grabbing", className), ...(sortable?.attributes ?? {}), ...(sortable?.listeners ?? {}), ...props, children: content }));
 }
+// ============================================================================
+// Drag Overlay Component
+// ============================================================================
 function DragOverlayComponent({ children, className, dropAnimation, ...props }) {
-    return (_jsx(DragOverlay, { dropAnimation: dropAnimation, ...props, children: children ? _jsx("div", { className: cn(className), children: children }) : null }));
+    return (_jsx(DragOverlay, { "data-kala-component": "dnd-drag-overlay-component", dropAnimation: dropAnimation, ...props, children: children ? _jsx("div", { className: cn(className), children: children }) : null }));
 }
+// ============================================================================
+// Exports
+// ============================================================================
 export { createDragDropSensors as useDragDropSensors, DragDropContext, Draggable, DragOverlayComponent, Droppable, 
 // Re-export sensors
 KeyboardSensor, PointerSensor, SortableContext, SortableHandle, SortableItem, sortableKeyboardCoordinates, TouchSensor, 

package/dist/components/dnd/dnd.types.d.ts

@@ -0,0 +1,92 @@
+/**
+ * DnD family types — the Kala-named surface over @dnd-kit plus the wrapper
+ * component prop shapes. Kept free of runtime code so it doubles as the
+ * @dnd-kit type re-export point for the family barrel.
+ */
+import type { Active, Collision, CollisionDetection, DndContextProps as DndKitContextProps, DragEndEvent, DraggableAttributes, DraggableSyntheticListeners, DragOverEvent, DragStartEvent, Modifier, Over, PointerActivationConstraint, UniqueIdentifier, useSensors } from "@dnd-kit/core";
+import type { sortableKeyboardCoordinates, SortingStrategy } from "@dnd-kit/sortable";
+import type { Transform } from "@dnd-kit/utilities";
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
+import type * as React from "react";
+export type SyntheticListenerMap = DraggableSyntheticListeners;
+export type DragDropModifier = Modifier;
+export type DragDropCollisionDetection = CollisionDetection;
+export type DragDropSortingStrategy = SortingStrategy;
+export type DragDropPointerConstraint = PointerActivationConstraint;
+export interface UseDragDropSensorsOptions {
+    activationConstraint?: PointerActivationConstraint;
+    keyboardCoordinateGetter?: typeof sortableKeyboardCoordinates;
+}
+export interface DragDropContextProps extends Omit<DndKitContextProps, "sensors"> {
+    children: React.ReactNode;
+    sensors?: ReturnType<typeof useSensors>;
+    useSensors?: UseDragDropSensorsOptions;
+}
+export interface DroppableProps {
+    ref?: React.Ref<HTMLDivElement>;
+    id: UniqueIdentifier;
+    children: React.ReactNode | ((args: {
+        isOver: boolean;
+        setNodeRef: (node: HTMLElement | null) => void;
+    }) => React.ReactNode);
+    className?: string;
+    disabled?: boolean;
+}
+export interface DraggableProps {
+    ref?: React.Ref<HTMLDivElement>;
+    id: UniqueIdentifier;
+    children: React.ReactNode | ((args: {
+        attributes: DraggableAttributes;
+        listeners: SyntheticListenerMap | undefined;
+        setNodeRef: (node: HTMLElement | null) => void;
+        transform: {
+            x: number;
+            y: number;
+            scaleX: number;
+            scaleY: number;
+        } | null;
+        isDragging: boolean;
+    }) => React.ReactNode);
+    className?: string;
+    disabled?: boolean;
+}
+export interface SortableContextProps {
+    id?: UniqueIdentifier;
+    items: UniqueIdentifier[] | {
+        id: UniqueIdentifier;
+    }[];
+    strategy?: SortingStrategy;
+    children: React.ReactNode;
+}
+export interface SortableItemProps {
+    ref?: React.Ref<HTMLDivElement>;
+    id: UniqueIdentifier;
+    children: React.ReactNode | ((args: {
+        attributes: DraggableAttributes;
+        listeners: SyntheticListenerMap | undefined;
+        setNodeRef: (node: HTMLElement | null) => void;
+        transform: Transform | null;
+        transition: string | undefined;
+        isDragging: boolean;
+        isSorting: boolean;
+        isOver: boolean;
+    }) => React.ReactNode);
+    className?: string;
+    disabled?: boolean;
+    handle?: boolean;
+    slotStyles?: SlotStyles;
+}
+export interface SortableHandleProps {
+    ref?: React.Ref<HTMLDivElement>;
+    children: React.ReactNode | ((listeners: SyntheticListenerMap | undefined) => React.ReactNode);
+    className?: string;
+}
+export interface DragOverlayComponentProps {
+    children: React.ReactNode;
+    className?: string;
+    dropAnimation?: {
+        duration?: number;
+        easing?: string;
+    } | null;
+}
+export type { Active, Collision, DragEndEvent as DropResult, DraggableAttributes, DraggableSyntheticListeners, DragOverEvent as DragUpdate, DragOverEvent, DragStartEvent as DragStart, Over, SortingStrategy, Transform, UniqueIdentifier, };

package/dist/components/dnd/dnd.types.js

@@ -0,0 +1,7 @@
+"use client";
+/**
+ * DnD family types — the Kala-named surface over @dnd-kit plus the wrapper
+ * component prop shapes. Kept free of runtime code so it doubles as the
+ * @dnd-kit type re-export point for the family barrel.
+ */
+export {};

package/dist/components/dnd/index.d.ts

@@ -1 +1,2 @@
-export { DragDropContext, type DragDropContextProps, Draggable, type DraggableAttributes, type DraggableProps, type DragStart, type DragUpdate, Droppable, type DroppableProps, type DropResult, type UniqueIdentifier, } from "./dnd";
+export { DragDropContext, Draggable, Droppable } from "./dnd";
+export type { DragDropContextProps, DraggableAttributes, DraggableProps, DragStart, DragUpdate, DroppableProps, DropResult, UniqueIdentifier, } from "./dnd.types";

package/dist/components/dnd/index.js

@@ -1,2 +1,2 @@
 "use client";
-export { DragDropContext, Draggable, Droppable, } from "./dnd.js";
+export { DragDropContext, Draggable, Droppable } from "./dnd.js";