@a2v2ai/uikit 0.0.30 → 0.0.31

package/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-export interface DataTableColumn<T> {
+interface DataTableColumn<T> {
     key: string;
     title: string;
     titleRender?: () => ReactNode;
@@ -8,14 +8,28 @@ export interface DataTableColumn<T> {
     render?: (value: unknown, record: T, index: number) => ReactNode;
     className?: string;
 }
-export interface DataTableProps<T extends object> {
+interface DataTablePagination {
+    current: number;
+    pageSize: number;
+    total: number;
+    onChange: (page: number) => void;
+}
+interface DataTableScroll {
+    y?: number | string;
+}
+interface DataTableProps<T extends object> {
     columns: DataTableColumn<T>[];
     dataSource: T[];
     rowKey: keyof T | ((record: T) => string);
     className?: string;
+    pagination?: DataTablePagination;
+    scroll?: DataTableScroll;
+    loading?: boolean;
+    loadingRows?: number;
 }
 declare const DataTable: {
-    <T extends object>({ columns, dataSource, rowKey, className, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends object>({ columns, dataSource, rowKey, className, pagination, scroll, loading, loadingRows, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { DataTable };
+export type { DataTableColumn, DataTableProps, DataTablePagination, DataTableScroll };

package/DataTable/DataTable.js

@@ -1,6 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../Table/Table";
-const DataTable = ({ columns, dataSource, rowKey, className, }) => {
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "../Pagination/Pagination";
+import { Skeleton } from "../Skeleton/Skeleton";
+const getPageNumbers = (current, totalPages) => {
+    const pages = [];
+    if (totalPages <= 7) {
+        for (let i = 1; i <= totalPages; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
+    // Always show first page
+    pages.push(1);
+    if (current <= 3) {
+        // Near the start
+        pages.push(2, 3, 4, "ellipsis", totalPages);
+    }
+    else if (current >= totalPages - 2) {
+        // Near the end
+        pages.push("ellipsis", totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
+    }
+    else {
+        // In the middle
+        pages.push("ellipsis", current - 1, current, current + 1, "ellipsis", totalPages);
+    }
+    return pages;
+};
+const DataTable = ({ columns, dataSource, rowKey, className, pagination, scroll, loading, loadingRows = 5, }) => {
     const getRowKey = (record) => {
         if (typeof rowKey === "function") {
             return rowKey(record);
@@ -14,7 +40,12 @@ const DataTable = ({ columns, dataSource, rowKey, className, }) => {
         }
         return value;
     };
-    return (_jsxs(Table, { className: className, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => (_jsx(TableHead, { className: column.className, style: { width: column.width }, children: column.titleRender ? column.titleRender() : column.title }, column.key))) }) }), _jsx(TableBody, { children: dataSource.map((record, index) => (_jsx(TableRow, { children: columns.map((column) => (_jsx(TableCell, { children: getCellValue(record, column, index) }, column.key))) }, getRowKey(record)))) })] }));
+    const totalPages = pagination ? Math.ceil(pagination.total / pagination.pageSize) : 0;
+    const pageNumbers = pagination ? getPageNumbers(pagination.current, totalPages) : [];
+    const tableContent = (_jsxs(Table, { className: className, children: [_jsx(TableHeader, { className: scroll?.y ? "sticky top-0 z-10" : undefined, children: _jsx(TableRow, { children: columns.map((column) => (_jsx(TableHead, { className: column.className, style: { width: column.width }, children: column.titleRender ? column.titleRender() : column.title }, column.key))) }) }), _jsx(TableBody, { children: loading
+                    ? Array.from({ length: loadingRows }).map((_, rowIndex) => (_jsx(TableRow, { children: columns.map((column) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-full" }) }, column.key))) }, `skeleton-${rowIndex}`)))
+                    : dataSource.map((record, index) => (_jsx(TableRow, { children: columns.map((column) => (_jsx(TableCell, { children: getCellValue(record, column, index) }, column.key))) }, getRowKey(record)))) })] }));
+    return (_jsxs("div", { className: "w-full", children: [scroll?.y ? (_jsx("div", { className: "relative w-full overflow-auto", style: { maxHeight: scroll.y }, children: tableContent })) : (tableContent), pagination && totalPages > 1 && (_jsx("div", { className: "mt-4", children: _jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { disabled: pagination.current === 1, onClick: () => pagination.onChange(pagination.current - 1) }) }), pageNumbers.map((page, index) => (_jsx(PaginationItem, { children: page === "ellipsis" ? (_jsx(PaginationEllipsis, {})) : (_jsx(PaginationLink, { isActive: page === pagination.current, onClick: () => pagination.onChange(page), children: page })) }, index))), _jsx(PaginationItem, { children: _jsx(PaginationNext, { disabled: pagination.current === totalPages, onClick: () => pagination.onChange(pagination.current + 1) }) })] }) }) }))] }));
 };
 DataTable.displayName = "DataTable";
 export { DataTable };

package/Pagination/Pagination.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+declare namespace Pagination {
+    var displayName: string;
+}
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationContent {
+    var displayName: string;
+}
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationItem {
+    var displayName: string;
+}
+type PaginationLinkProps = {
+    isActive?: boolean;
+    disabled?: boolean;
+} & React.ComponentProps<"button">;
+declare function PaginationLink({ className, isActive, disabled, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationLink {
+    var displayName: string;
+}
+declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationPrevious {
+    var displayName: string;
+}
+declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationNext {
+    var displayName: string;
+}
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationEllipsis {
+    var displayName: string;
+}
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };
+export type { PaginationLinkProps };

package/Pagination/Pagination.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "../Button/Button";
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { role: "navigation", "aria-label": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+}
+Pagination.displayName = "Pagination";
+function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { className: cn("flex flex-row items-center gap-1", className), ...props }));
+}
+PaginationContent.displayName = "PaginationContent";
+function PaginationItem({ ...props }) {
+    return _jsx("li", { ...props });
+}
+PaginationItem.displayName = "PaginationItem";
+function PaginationLink({ className, isActive, disabled, ...props }) {
+    return (_jsx("button", { type: "button", "aria-current": isActive ? "page" : undefined, disabled: disabled, className: cn(buttonVariants({
+            variant: isActive ? "outline" : "ghost",
+            size: "small",
+        }), "size-9", disabled && "pointer-events-none opacity-50", className), ...props }));
+}
+PaginationLink.displayName = "PaginationLink";
+function PaginationPrevious({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", className: cn("gap-1 pl-2.5 pr-4 w-auto", className), ...props, children: [_jsx(ChevronLeft, { className: "size-4" }), _jsx("span", { className: "hidden sm:block", children: "Previous" })] }));
+}
+PaginationPrevious.displayName = "PaginationPrevious";
+function PaginationNext({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", className: cn("gap-1 pl-4 pr-2.5 w-auto", className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: "Next" }), _jsx(ChevronRight, { className: "size-4" })] }));
+}
+PaginationNext.displayName = "PaginationNext";
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": true, className: cn("flex size-9 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontal, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+PaginationEllipsis.displayName = "PaginationEllipsis";
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

package/index.d.ts

@@ -20,6 +20,7 @@ export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, inputOTPVaria
 export { Label, labelVariants, type LabelProps } from "./Label/Label";
 export { Loader, loaderVariants, type LoaderProps, type LoaderSize, type LoaderColor } from "./Loader/Loader";
 export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from "./Menubar/Menubar";
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, type PaginationLinkProps, } from "./Pagination/Pagination";
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./Popover/Popover";
 export { Progress, progressVariants, progressIndicatorVariants, type ProgressProps, type ProgressSize, type ProgressVariant } from "./Progress/Progress";
 export { RadioGroup, RadioGroupItem, radioGroupItemVariants, type RadioGroupItemProps, type RadioGroupItemSize } from "./RadioGroup/RadioGroup";
@@ -32,7 +33,7 @@ export { Slider, type SliderProps } from "./Slider/Slider";
 export { Spinner, spinnerVariants, type SpinnerProps, type SpinnerSize, type SpinnerVariant } from "./Spinner/Spinner";
 export { Switch, switchVariants, type SwitchProps, type SwitchSize } from "./Switch/Switch";
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./Table/Table";
-export { DataTable, type DataTableColumn, type DataTableProps } from "./DataTable/DataTable";
+export { DataTable, type DataTableColumn, type DataTableProps, type DataTablePagination, type DataTableScroll } from "./DataTable/DataTable";
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, type TabsListProps, type TabsListVariant } from "./Tabs/Tabs";
 export { Textarea, textareaVariants, type TextareaProps, type TextareaVariant, type TextareaResize } from "./Textarea/Textarea";
 export { Toaster, toast, type ToastProps, type ToastTheme } from "./Toast/Toast";

package/index.js

@@ -22,6 +22,7 @@ export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, inputOTPVaria
 export { Label, labelVariants } from "./Label/Label";
 export { Loader, loaderVariants } from "./Loader/Loader";
 export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from "./Menubar/Menubar";
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./Pagination/Pagination";
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./Popover/Popover";
 export { Progress, progressVariants, progressIndicatorVariants } from "./Progress/Progress";
 export { RadioGroup, RadioGroupItem, radioGroupItemVariants } from "./RadioGroup/RadioGroup";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2v2ai/uikit",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "type": "module",
   "author": "Arulraj V & abofficial1997@gmail.com",
   "description": "A React UI component library built with shadcn/ui and Tailwind CSS",