@kala-ui/react-app 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/components/charts/chart.types.d.ts

@@ -2,6 +2,7 @@
  * Chart Component Types
  * Type definitions for ApexCharts-based chart components
  */
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
 import type { ApexOptions } from "apexcharts";
 /**
  * Base chart props shared across all chart types
@@ -27,6 +28,8 @@ export interface BaseChartProps {
     isLoading?: boolean;
     /** Message shown when data is empty (default: "No data available") */
     emptyMessage?: string;
+    /** Per-part overrides: root, empty, emptyIcon, emptyText, titleBlock, title, subtitle. */
+    slotStyles?: SlotStyles;
 }
 /**
  * Series data point for single value charts

package/dist/components/charts/donut-chart.d.ts

@@ -3,5 +3,5 @@
  * Circular charts for showing proportions and percentages
  */
 import type { DonutChartProps } from "./chart.types";
-export declare function DonutChart({ series, labels, colors, height, width, className, title, subtitle, animations, donut, donutSize, dataLabels, legend, isLoading, emptyMessage, options: customOptions, }: DonutChartProps): import("react").JSX.Element;
+export declare function DonutChart({ series, labels, colors, height, width, className, title, subtitle, animations, donut, donutSize, dataLabels, legend, slotStyles, isLoading, emptyMessage, options: customOptions, }: DonutChartProps): import("react").JSX.Element;
 export declare function PieChart(props: DonutChartProps): import("react").JSX.Element;

package/dist/components/charts/donut-chart.js

@@ -7,10 +7,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@kala-ui/react/lib/utils";
 import { useMemo } from "react";
+import { chartStyles } from "../../config/charts.js";
 import { Chart, getTooltipTheme } from "./chart.js";
 import { useThemeAwareChart } from "./use-theme-aware-chart.js";
-import { getDefaultChartOptions } from "./utils.js";
-export function DonutChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, donut = true, donutSize = 65, dataLabels = true, legend = true, isLoading, emptyMessage, options: customOptions, }) {
+import { getDefaultChartOptions } from "./chart-utils.js";
+export function DonutChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, donut = true, donutSize = 65, dataLabels = true, legend = true, slotStyles, isLoading, emptyMessage, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const isEmpty = !isLoading && (series.length === 0 || labels.length === 0);
     const chartOptions = useMemo(() => {
@@ -138,7 +139,7 @@ export function DonutChart({ series, labels, colors, height = 350, width = "100%
         subtitle,
         customOptions,
     ]);
-    return (_jsx(Chart, { "data-kala-component": "charts-donut-chart", className: cn("w-full", className), options: chartOptions, series: series, type: donut ? "donut" : "pie", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+    return (_jsx(Chart, { "data-kala-component": "charts-donut-chart", className: cn(chartStyles.root, className), slotStyles: slotStyles, options: chartOptions, series: series, type: donut ? "donut" : "pie", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
 }
 // Convenience alias for Pie charts
 export function PieChart(props) {

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

@@ -11,4 +11,4 @@ export { LineChart } from "./line-chart";
 export { RadialBarChart } from "./radial-bar-chart";
 export * from "./theme-utils";
 export { useThemeAwareChart } from "./use-theme-aware-chart";
-export * from "./utils";
+export * from "./chart-utils";

package/dist/components/charts/index.js

@@ -12,4 +12,4 @@ export { LineChart } from "./line-chart.js";
 export { RadialBarChart } from "./radial-bar-chart.js";
 export * from "./theme-utils.js";
 export { useThemeAwareChart } from "./use-theme-aware-chart.js";
-export * from "./utils.js";
+export * from "./chart-utils.js";

package/dist/components/charts/line-chart.d.ts

@@ -3,4 +3,4 @@
  * Clean line charts for trends and time series data
  */
 import type { LineChartProps } from "./chart.types";
-export declare function LineChart({ series, categories, colors, height, width, className, title, subtitle, toolbar, animations, curve, strokeWidth, markers, yAxisLabel, isLoading, emptyMessage, options: customOptions, }: LineChartProps): import("react").JSX.Element;
+export declare function LineChart({ series, categories, colors, height, width, className, title, subtitle, toolbar, animations, curve, strokeWidth, markers, yAxisLabel, slotStyles, isLoading, emptyMessage, options: customOptions, }: LineChartProps): import("react").JSX.Element;

package/dist/components/charts/line-chart.js

@@ -7,9 +7,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@kala-ui/react/lib/utils";
 import { useMemo } from "react";
+import { chartStyles } from "../../config/charts.js";
 import { Chart, getTooltipTheme } from "./chart.js";
 import { useThemeAwareChart } from "./use-theme-aware-chart.js";
-import { getDefaultChartOptions } from "./utils.js";
+import { getDefaultChartOptions } from "./chart-utils.js";
 /**
  * Check if series data is empty (no series or all series have empty data arrays)
  */
@@ -18,7 +19,7 @@ function isSeriesEmpty(series) {
         return true;
     return series.every((s) => !s.data || (Array.isArray(s.data) && s.data.length === 0));
 }
-export function LineChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, curve = "smooth", strokeWidth = 2, markers = true, yAxisLabel, isLoading, emptyMessage, options: customOptions, }) {
+export function LineChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, curve = "smooth", strokeWidth = 2, markers = true, yAxisLabel, slotStyles, isLoading, emptyMessage, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const isEmpty = !isLoading && isSeriesEmpty(series);
     const chartOptions = useMemo(() => {
@@ -154,5 +155,5 @@ export function LineChart({ series, categories, colors, height = 350, width = "1
         subtitle,
         customOptions,
     ]);
-    return (_jsx(Chart, { "data-kala-component": "charts-line-chart", className: cn("w-full", className), options: chartOptions, series: series, type: "line", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+    return (_jsx(Chart, { "data-kala-component": "charts-line-chart", className: cn(chartStyles.root, className), slotStyles: slotStyles, options: chartOptions, series: series, type: "line", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
 }

package/dist/components/charts/radial-bar-chart.d.ts

@@ -3,4 +3,4 @@
  * Circular progress bars for showing percentages and completion rates
  */
 import type { RadialBarChartProps } from "./chart.types";
-export declare function RadialBarChart({ series, labels, colors, height, width, className, title, subtitle, animations, dataLabels, hollowSize, isLoading, emptyMessage, options: customOptions, }: RadialBarChartProps): import("react").JSX.Element;
+export declare function RadialBarChart({ series, labels, colors, height, width, className, title, subtitle, animations, dataLabels, hollowSize, slotStyles, isLoading, emptyMessage, options: customOptions, }: RadialBarChartProps): import("react").JSX.Element;

package/dist/components/charts/radial-bar-chart.js

@@ -7,10 +7,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@kala-ui/react/lib/utils";
 import { useMemo } from "react";
+import { chartStyles } from "../../config/charts.js";
 import { Chart, getTooltipTheme } from "./chart.js";
 import { useThemeAwareChart } from "./use-theme-aware-chart.js";
-import { getDefaultChartOptions } from "./utils.js";
-export function RadialBarChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, dataLabels = true, hollowSize = "50%", isLoading, emptyMessage, options: customOptions, }) {
+import { getDefaultChartOptions } from "./chart-utils.js";
+export function RadialBarChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, dataLabels = true, hollowSize = "50%", slotStyles, isLoading, emptyMessage, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const isEmpty = !isLoading && (series.length === 0 || labels.length === 0);
     const chartOptions = useMemo(() => {
@@ -111,5 +112,5 @@ export function RadialBarChart({ series, labels, colors, height = 350, width = "
         subtitle,
         customOptions,
     ]);
-    return (_jsx(Chart, { "data-kala-component": "charts-radial-bar-chart", className: cn("w-full", className), options: chartOptions, series: series, type: "radialBar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+    return (_jsx(Chart, { "data-kala-component": "charts-radial-bar-chart", className: cn(chartStyles.root, className), slotStyles: slotStyles, options: chartOptions, series: series, type: "radialBar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
 }

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

@@ -37,7 +37,7 @@ import { DataTableHeaderRow } from "./data-table-header-row.js";
 import { DataTableSkeleton } from "./data-table-skeleton.js";
 import { DataTableToolbar } from "./data-table-toolbar.js";
 import { PaginationNav } from "./pagination-nav.js";
-import { useTableState } from "./useTableState.js";
+import { useTableState } from "./use-table-state.js";
 /**
  * DataTable Component
  */

package/dist/components/data-table/index.d.ts

@@ -3,4 +3,4 @@
  */
 export { DataTable, DataTableSkeleton } from "./data-table";
 export type { BulkAction, ColumnDef, DataTableProps, DataTableSkeletonConfig, EmptyStateConfig, FilterableColumn, FilterConfig, FilterOperator, LoadingConfig, PaginationConfig, SearchConfig, SelectionConfig, SortConfig, SortDirection, TableState, } from "./data-table.types";
-export { useTableState } from "./useTableState";
+export { useTableState } from "./use-table-state";

package/dist/components/data-table/index.js

@@ -3,4 +3,4 @@
  * DataTable Component Exports
  */
 export { DataTable, DataTableSkeleton } from "./data-table.js";
-export { useTableState } from "./useTableState.js";
+export { useTableState } from "./use-table-state.js";

package/dist/components/data-table/use-table-state.d.ts

@@ -0,0 +1,29 @@
+/**
+ * useTableState Hook
+ * Manages table state including sorting, filtering, pagination, and search
+ */
+import type { ColumnDef, FilterConfig, SearchConfig, SortConfig, TableState } from "./data-table.types";
+interface UseTableStateOptions<TData> {
+    data: TData[];
+    columns: ColumnDef<TData>[];
+    defaultSort?: SortConfig<TData>;
+    defaultFilters?: FilterConfig<TData>[];
+    searchConfig?: SearchConfig<TData> | boolean;
+    pageSize?: number;
+    total?: number;
+    /** Controlled page number (1-indexed); omitted = uncontrolled */
+    page?: number;
+    /** Callback when sort changes */
+    onSortChange?: (sort: SortConfig<TData> | null) => void;
+    /** Callback when filters change */
+    onFilterChange?: (filters: FilterConfig<TData>[]) => void;
+    /** Callback when search query changes */
+    onSearchChange?: (query: string) => void;
+    /** Callback when pagination changes */
+    onPaginationChange?: (page: number, pageSize: number) => void;
+}
+/**
+ * Hook to manage table state (sorting, filtering, search, pagination)
+ */
+export declare function useTableState<TData>({ data, columns, defaultSort, defaultFilters, searchConfig, pageSize: initialPageSize, total: manualTotal, page, onSortChange, onFilterChange, onSearchChange, onPaginationChange, }: UseTableStateOptions<TData>): TableState<TData>;
+export {};

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, };