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

package/dist/components/data-table/useTableState.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/useTableState.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

@@ -0,0 +1,118 @@
+/**
+ * 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 { 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 * 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;
+};
+export declare const modifiers: {
+    readonly restrictToHorizontalAxis: Modifier;
+    readonly restrictToVerticalAxis: Modifier;
+    readonly restrictToWindowEdges: Modifier;
+    readonly restrictToParentElement: Modifier;
+    readonly restrictToFirstScrollableAncestor: Modifier;
+};
+export declare const sortingStrategies: {
+    readonly vertical: SortingStrategy;
+    readonly horizontal: SortingStrategy;
+    readonly rect: SortingStrategy;
+    readonly rectSwapping: 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 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

@@ -0,0 +1,128 @@
+"use client";
+/**
+ * DnD Component - Drag and Drop primitives for @dnd-kit
+ * Provides consistent wrappers with animations, sortable support, and drag overlays
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { closestCenter, closestCorners, DndContext as DndKitContext, DragOverlay, KeyboardSensor, PointerSensor, pointerWithin, rectIntersection, TouchSensor, useDraggable, useDroppable, useSensor, useSensors, } from "@dnd-kit/core";
+import { restrictToFirstScrollableAncestor, restrictToHorizontalAxis, restrictToParentElement, restrictToVerticalAxis, restrictToWindowEdges, } from "@dnd-kit/modifiers";
+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 { useMergedRef } from "@kala-ui/react-hooks";
+import * as React from "react";
+// ============================================================================
+// Collision Detection Algorithms
+// ============================================================================
+export const collisionDetectionAlgorithms = {
+    closestCenter,
+    closestCorners,
+    rectIntersection,
+    pointerWithin,
+};
+// ============================================================================
+// Modifiers
+// ============================================================================
+export const modifiers = {
+    restrictToHorizontalAxis,
+    restrictToVerticalAxis,
+    restrictToWindowEdges,
+    restrictToParentElement,
+    restrictToFirstScrollableAncestor,
+};
+// ============================================================================
+// Sorting Strategies
+// ============================================================================
+export const sortingStrategies = {
+    vertical: verticalListSortingStrategy,
+    horizontal: horizontalListSortingStrategy,
+    rect: rectSortingStrategy,
+    rectSwapping: rectSwappingStrategy,
+};
+function createDragDropSensors(options = {}) {
+    const { activationConstraint, keyboardCoordinateGetter = sortableKeyboardCoordinates, } = options;
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint,
+    }), useSensor(TouchSensor, {
+        activationConstraint,
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: keyboardCoordinateGetter,
+    }));
+    return sensors;
+}
+function DragDropContext({ children, sensors: sensorsProp, useSensors: useSensorsOptions, ...props }) {
+    const defaultSensors = createDragDropSensors(useSensorsOptions);
+    const sensors = sensorsProp ?? defaultSensors;
+    return (_jsx(DndKitContext, { sensors: sensors, ...props, children: children }));
+}
+function Droppable({ ref, children, className, id, disabled = false, ...props }) {
+    const { isOver, setNodeRef } = useDroppable({
+        id,
+        disabled,
+    });
+    const content = typeof children === "function"
+        ? children({ isOver, setNodeRef })
+        : children;
+    return (_jsx("div", { ref: useMergedRef(ref, setNodeRef), className: cn(className), ...props, children: content }));
+}
+function Draggable({ ref, children, className, id, disabled = false, ...props }) {
+    const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+        id,
+        disabled,
+    });
+    const content = typeof children === "function"
+        ? children({ attributes, listeners, setNodeRef, transform, isDragging })
+        : children;
+    const style = transform
+        ? {
+            transform: CSS.Translate.toString(transform),
+        }
+        : undefined;
+    return (_jsx("div", { ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...listeners, ...props, children: content }));
+}
+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 }));
+}
+const SortableHandleContext = React.createContext(null);
+function SortableItem({ ref, children, className, id, disabled = false, handle = false, ...props }) {
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isSorting, isOver, } = useSortable({
+        id,
+        disabled,
+    });
+    const content = typeof children === "function"
+        ? children({
+            attributes,
+            listeners,
+            setNodeRef,
+            transform,
+            transition,
+            isDragging,
+            isSorting,
+            isOver,
+        })
+        : children;
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        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 }) }));
+}
+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 }));
+}
+function DragOverlayComponent({ children, className, dropAnimation, ...props }) {
+    return (_jsx(DragOverlay, { dropAnimation: dropAnimation, ...props, children: children ? _jsx("div", { className: cn(className), children: children }) : null }));
+}
+export { createDragDropSensors as useDragDropSensors, DragDropContext, Draggable, DragOverlayComponent, Droppable, 
+// Re-export sensors
+KeyboardSensor, PointerSensor, SortableContext, SortableHandle, SortableItem, sortableKeyboardCoordinates, TouchSensor, 
+// Re-export useful hooks
+useDraggable, useDroppable, useSensor, useSensors, useSortable, };

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

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

package/dist/components/dnd/index.js

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

package/dist/components/footer/footer.d.ts

@@ -0,0 +1,37 @@
+import type * as React from "react";
+export interface FooterLink {
+    label: string;
+    href: string;
+}
+export interface FooterLinkSection {
+    title: string;
+    links: FooterLink[];
+}
+export interface SocialLink {
+    name: string;
+    href: string;
+    icon: React.ReactNode;
+}
+export interface FooterProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    /**
+     * Sections of links to display in columns
+     */
+    linkSections?: FooterLinkSection[];
+    /**
+     * Social media links with icons
+     */
+    socialLinks?: SocialLink[];
+    /**
+     * Copyright text
+     */
+    copyright?: string;
+    /**
+     * Additional content to display in footer (e.g., newsletter signup)
+     */
+    children?: React.ReactNode;
+    /**
+     * Center align all content
+     */
+    centered?: boolean;
+}
+export declare function Footer({ ref, className, linkSections, socialLinks, copyright, children, centered, ...props }: FooterProps): React.JSX.Element;

package/dist/components/footer/footer.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@kala-ui/react/lib/utils";
+export function Footer({ ref, className, linkSections = [], socialLinks = [], copyright, children, centered = false, ...props }) {
+    const currentYear = new Date().getFullYear();
+    const copyrightText = copyright || `© ${currentYear} All rights reserved.`;
+    return (_jsx("footer", { ref: ref, "data-comp": "footer", className: cn("w-full bg-muted text-muted-foreground border-t", className), ...props, children: _jsxs("div", { className: "container mx-auto px-4 py-8 md:py-12", children: [centered && children && (_jsx("div", { className: "mb-12 flex flex-col items-center text-center", children: children })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8", children: [linkSections.map((section) => (_jsxs("nav", { "aria-label": `${section.title} links`, children: [_jsx("h3", { className: "text-foreground font-semibold text-sm uppercase tracking-wider mb-4", children: section.title }), _jsx("ul", { className: "space-y-2", children: section.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, className: "text-muted-foreground hover:text-primary transition-colors text-sm", children: link.label }) }, `${link.href}-${link.label}`))) })] }, section.title))), !centered && children && (_jsx("div", { className: "md:col-span-2 lg:col-span-1", children: children }))] }), _jsxs("div", { className: cn("border-t pt-8 flex flex-col gap-4", !centered && "md:flex-row md:justify-between md:items-center", centered && "items-center"), children: [_jsx("div", { className: "text-sm text-muted-foreground order-2 md:order-1", children: copyrightText }), socialLinks.length > 0 && (_jsx("div", { className: "flex items-center gap-4 order-1 md:order-2", children: socialLinks.map((social) => (_jsx("a", { href: social.href, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-primary transition-colors", "aria-label": social.name, children: social.icon }, social.href))) }))] })] }) }));
+}

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

@@ -0,0 +1,2 @@
+export type { FooterLink, FooterLinkSection, FooterProps, SocialLink, } from "./footer";
+export { Footer } from "./footer";

package/dist/components/footer/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Footer } from "./footer.js";