react-kd-grid 5.0.8 → 5.0.9

package/dist/components/ui/Badge.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type BadgeVariant = "default" | "primary" | "success" | "warning" | "destructive" | "outline";
+interface BadgeProps {
+    children: React.ReactNode;
+    variant?: BadgeVariant;
+    className?: string;
+}
+/**
+ * Badge Component
+ *
+ * A pill-shaped label for status markers and indicators.
+ */
+export declare const Badge: ({ children, variant, className, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Dropdown.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface DropdownItem {
+    label: string;
+    onClick: () => void;
+    icon?: React.ReactNode;
+    variant?: "default" | "destructive";
+    disabled?: boolean;
+}
+interface DropdownProps {
+    trigger: React.ReactNode;
+    items: DropdownItem[];
+    align?: "left" | "right";
+    className?: string;
+}
+/**
+ * Dropdown Component
+ *
+ * A flexible menu component for actions and options, with theme-aware styling.
+ */
+export declare const Dropdown: ({ trigger, items, align, className, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Modal.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    showCloseButton?: boolean;
+}
+/**
+ * Modal Component
+ *
+ * A premium, theme-aware dialog component with blurred backdrop and smooth transitions.
+ */
+export declare const Modal: ({ isOpen, onClose, title, children, footer, size, showCloseButton, }: ModalProps) => React.ReactPortal;
+export {};

package/dist/components/ui/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    position?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+}
+/**
+ * Tooltip Component
+ *
+ * A lightweight, portal-rendered hover overlay for contextual information.
+ */
+export declare const Tooltip: ({ content, children, position, delay, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/grid/components/Shared/PaginationControls.d.ts

@@ -12,7 +12,7 @@ interface PaginationControlsProps {
     showNoDataMessage?: boolean;
 }
 export declare const PaginationControls: import("react").MemoExoticComponent<{
-    ({ paginationConfig, currentPage, isServerLoading, selectedRowsCount, totalDataLength, filteredDataLength, paginationMode, onPageChange, onPageSizeChange, }: PaginationControlsProps): import("react/jsx-runtime").JSX.Element;
+    ({ paginationConfig, currentPage, isServerLoading, selectedRowsCount, totalDataLength, paginationMode, onPageChange, onPageSizeChange, }: PaginationControlsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }>;
 export {};

package/dist/grid/hooks/useGridServerData.d.ts

@@ -0,0 +1,89 @@
+import { GridRow, ActiveFilters, ServerFilterChangePayload, SortDirection, PaginationOptions } from "../types";
+/**
+ * Internal state representation for server-side requests.
+ */
+export interface GridServerParams {
+    page: number;
+    pageSize: number;
+    sortField: string | null;
+    sortOrder: SortDirection;
+    globalFilter: string;
+    columnFilters: ActiveFilters;
+}
+/**
+ * Options for the useGridServerData hook.
+ */
+export interface UseGridServerDataOptions<T> {
+    /** The base API endpoint URL. */
+    url: string;
+    /** Initial number of rows per page. Default: 25. */
+    initialPageSize?: number;
+    /** Initial sorting configuration. */
+    initialSort?: {
+        key: string | null;
+        direction: SortDirection;
+    };
+    /** Debounce delay for search and filter changes in ms. Default: 300ms. */
+    debounceMs?: number;
+    /**
+     * Custom mapping from internal grid state to API query parameters.
+     * If not provided, standard query params are used.
+     */
+    mapParams?: (params: GridServerParams) => Record<string, any>;
+    /**
+     * Post-process the API response.
+     * Expected to return the row data and total count.
+     */
+    mapResponse?: (response: any) => {
+        data: T[];
+        total: number;
+    };
+    /** Additional static headers for the fetch request. */
+    headers?: Record<string, string>;
+    /** Optional static params to always include in every request. */
+    staticParams?: Record<string, any>;
+    /** Custom fetch implementation. Defaults to window.fetch. */
+    fetcher?: (url: string, init?: RequestInit) => Promise<Response>;
+}
+/**
+ * Standardized hook for orchestrating server-side data fetching for KDGrid.
+ *
+ * Handles:
+ * - Pagination (mode: server)
+ * - Sorting
+ * - Filtering (Global & Column)
+ * - Debouncing
+ * - Loading & Error States
+ */
+export declare const useGridServerData: <T extends GridRow>({ url, initialPageSize, initialSort, debounceMs, mapParams, mapResponse, headers, staticParams, fetcher, }: UseGridServerDataOptions<T>) => {
+    data: T[];
+    loading: boolean;
+    error: Error;
+    totalCount: number;
+    gridProps: {
+        data: T[];
+        loading: boolean;
+        pagination: PaginationOptions;
+        onSort: (key: string, direction: SortDirection) => void;
+        onFilterChange: (payload: ServerFilterChangePayload) => void;
+    };
+    params: {
+        page: number;
+        pageSize: number;
+        sortConfig: {
+            key: string | null;
+            direction: SortDirection;
+        };
+        globalFilter: string;
+        columnFilters: ActiveFilters;
+    };
+    refresh: () => Promise<void>;
+    setPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setSortConfig: import("react").Dispatch<import("react").SetStateAction<{
+        key: string | null;
+        direction: SortDirection;
+    }>>;
+    setGlobalFilter: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setColumnFilters: import("react").Dispatch<import("react").SetStateAction<ActiveFilters>>;
+};

package/dist/grid/hooks/usePagination.d.ts

@@ -15,8 +15,9 @@ interface UsePaginationProps {
             totalRows: number;
         };
     };
+    isLoading?: boolean;
 }
-export declare const usePagination: ({ data, pagination }: UsePaginationProps) => {
+export declare const usePagination: ({ data, pagination, isLoading }: UsePaginationProps) => {
     currentPage: number;
     resetPage: () => void;
     paginationConfig: PaginationConfig;

package/dist/grid/theme/KDGridProvider.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { KDGridTheme, ThemeContextValue, ThemeMode } from "./types";
+/**
+ * Hook to access the current grid theme and mode.
+ */
+export declare const useKDGridTheme: () => ThemeContextValue;
+interface KDGridProviderProps {
+    theme?: KDGridTheme;
+    defaultMode?: ThemeMode;
+    children: React.ReactNode;
+}
+/**
+ * Centralize theming provider for the Data Grid ecosystem.
+ * Injects CSS variables and manages light/dark mode logic.
+ */
+export declare const KDGridProvider: React.FC<KDGridProviderProps>;
+export {};

package/dist/grid/theme/defaultTheme.d.ts

@@ -0,0 +1,6 @@
+import { KDGridTheme } from "./types";
+/**
+ * Standard enterprise theme for KDGrid.
+ * Provides a clean Slate/Blue aesthetic out of the box.
+ */
+export declare const defaultTheme: KDGridTheme;

package/dist/grid/theme/types.d.ts

@@ -0,0 +1,28 @@
+export type ThemeMode = "light" | "dark" | "system";
+export interface KDGridColors {
+    primary: string;
+    primaryForeground: string;
+    accent: string;
+    accentForeground: string;
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    ring: string;
+}
+export interface KDGridTheme {
+    name: string;
+    colors: {
+        light: KDGridColors;
+        dark: KDGridColors;
+    };
+    radius: string;
+    shadow: string;
+}
+export interface ThemeContextValue {
+    theme: KDGridTheme;
+    mode: ThemeMode;
+    resolvedMode: "light" | "dark";
+    setMode: (mode: ThemeMode) => void;
+}

package/dist/grid/theme/utils.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { KDGridColors } from "./types";
+/**
+ * Generates an object of CSS variables from theme colors.
+ * These are injected into the root container to allow child components
+ * to use theme-based colors without explicit context lookups in CSS.
+ */
+export declare const generateCssVars: (colors: KDGridColors, radius: string) => React.CSSProperties;

package/dist/grid/types.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, MouseEvent, ReactNode } from "react";
+import { KDGridTheme, ThemeMode } from "./theme/types";
 /** Used internally by useVirtualization and GridRows. Not part of the public API. */
 export interface VirtualizedRange {
     startIndex: number;
@@ -533,6 +534,10 @@ export interface KDGridProps {
      * Pair with `onCellEdit` to receive the committed values.
      */
     editable?: boolean;
+    /** Custom theme configuration. Falls back to default blue theme. */
+    theme?: KDGridTheme;
+    /** Theme mode: "light", "dark", or "system". Default "system". */
+    themeMode?: ThemeMode;
 }
 export interface KDGridRef {
     /** Replace the entire ordered grouping key list. */

package/dist/icons/index.d.ts

@@ -44,6 +44,13 @@ export declare const FileText: (p: IconProps) => import("react/jsx-runtime").JSX
 export declare const Table: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Columns: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Users: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const User: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Plus: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LogOut: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Info: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckCircle2: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AlertTriangle: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const XCircle: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const LocateFixed: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Loader2: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 /**

package/dist/index.d.ts

@@ -1,11 +1,21 @@
 export { KDGrid } from "./grid/core/DataGrid";
 export { default } from "./grid/core/DataGrid";
+export { KDGridProvider, useKDGridTheme } from "./grid/theme/KDGridProvider";
+export { useGridServerData } from "./grid/hooks/useGridServerData";
+export type { UseGridServerDataOptions, GridServerParams, } from "./grid/hooks/useGridServerData";
+export { defaultTheme } from "./grid/theme/defaultTheme";
+export type { KDGridTheme, ThemeMode, KDGridColors } from "./grid/theme/types";
 export { Button } from "./components/ui/Button";
 export { TextField } from "./components/ui/TextField";
 export { Checkbox } from "./components/ui/Checkbox";
 export { Popover } from "./components/ui/Popover";
 export { CustomSelect } from "./components/ui/CustomSelect";
 export { DatePicker } from "./components/ui/DatePicker";
+export { Modal } from "./components/ui/Modal";
+export { Badge } from "./components/ui/Badge";
+export { Tooltip } from "./components/ui/Tooltip";
+export { Dropdown } from "./components/ui/Dropdown";
+export type { DropdownItem } from "./components/ui/Dropdown";
 export type { KDGridProps, KDGridRef, GridColumn, GridRow, Density, SortConfig, SortDirection, PaginationConfig, PaginationOptions, ExportOptions, PerformanceConfig, InfiniteScrollOptions, GroupConfig, ActiveFilters, ColumnFilterValue, ColumnFilter, FilterType, ColumnConfig, ContextMenuItem, BulkActionOption, SavedFilter, SearchMode, ExportFormat, RowEventParams, CellClickParams, CellContextMenuParams, CellFocusParams, CellEditParams, CellSelectionPayload, CopyCellsPayload, } from "./grid/types";
 export { usePagination } from "./grid/hooks/usePagination";
 export { useVirtualization } from "./grid/hooks/useVirtualization";