@pk-design/react-tailwind 1.2.0 → 1.4.0

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

@@ -1,2 +1,5 @@
 import type { DataTableProps } from './DataTable.types';
-export declare const DataTable: React.FC<DataTableProps>;
+export declare function DataTable<T extends Record<string, any> = Record<string, any>>({ items, columns, sorting, onSort, loading, pagination, setPagination, emptyMessage, containerClass, wrapperClass, tableClass, headClass, footerRow, rowKey, onRowClick, rowClass, density, striped, layout, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+}

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

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import type { TPagination } from '../Pagination';
 /**
- * Allowed column value data types
- * Used only to influence sorting logic
+ * Allowed column value data types.
+ * Used only to influence sorting logic.
  */
 export type DataValueType = 'string' | 'number' | 'date';
 /**
@@ -13,9 +13,15 @@ export type Sorting = 'asc' | 'desc' | '1' | '-1';
 export type SortIconKey = Extract<Sorting, 'asc' | 'desc' | '1' | '-1'>;
 export type SortQuery = Record<string, Sorting>;
 /**
- * Column definition for DataTable
+ * Cell padding preset.
+ * @default 'default'
  */
-export interface DataTableColumn {
+export type DataTableDensity = 'compact' | 'default' | 'spacious';
+/**
+ * Column definition for DataTable.
+ * @template T Shape of each data row
+ */
+export interface DataTableColumn<T = any> {
     /** Unique key used to extract column data (supports nested paths) */
     name: string;
     /** Display label for the header */
@@ -25,39 +31,85 @@ export interface DataTableColumn {
     /** Text alignment for body cells */
     align?: 'left' | 'center' | 'right';
     /** Custom cell renderer (highest priority) */
-    render?: (item: any) => ReactNode;
+    render?: (item: T) => ReactNode;
     /** Optional fixed width (px, %, rem) */
     width?: string | number;
     /** Enables sorting when true */
     sortable?: boolean;
-    /** Type of cell value helps sorting logic */
+    /** Type of cell value — influences sort logic */
     type?: DataValueType;
-    /** Sticks cell to right side */
+    /** Sticks cell to the given side on horizontal scroll */
     sticky?: 'left' | 'right';
+    /** Extra classes applied to the header cell (`<th>`) for this column */
+    headerClass?: string;
+    /**
+     * Extra classes applied to each body cell (`<td>`) for this column.
+     * Pass a function to vary styles per row value.
+     * @example cellClass={(item) => item.status === 'error' ? 'text-red-600' : ''}
+     */
+    cellClass?: string | ((item: T) => string);
 }
 /**
  * DataTable props
+ * @template T Shape of each data row
  */
-export interface DataTableProps {
+export interface DataTableProps<T = any> {
     /** Array of data items */
-    items: any[];
+    items: T[];
     /** Column definitions */
-    columns: DataTableColumn[];
+    columns: DataTableColumn<T>[];
     /** Sorting state, keyed by column name */
     sorting?: Record<string, Sorting>;
-    /** Loading state (shows skeleton rows) */
+    /** Loading state — shows skeleton rows instead of data */
     loading?: boolean;
     /** Pagination config */
     pagination?: TPagination;
-    /** Empty message to show when no results */
+    /** Message or node shown when the items array is empty */
     emptyMessage?: ReactNode;
-    /** External sorting handler */
-    onSort?: (column: DataTableColumn) => void;
+    /** External sorting handler. When omitted, DataTable auto-sorts internally. */
+    onSort?: (column: DataTableColumn<T>) => void;
     /** Pagination setter */
     setPagination?: (pagination: Partial<TPagination>) => void;
-    /** Layout of table cells */
+    /** Table layout algorithm */
     layout?: 'fixed' | 'auto';
-    /** Optional wrapper styles */
+    /**
+     * Determines the stable React key for each row.
+     * Pass a field name string or a function returning a unique value.
+     * @default 'id'
+     */
+    rowKey?: string | ((item: T) => string | number);
+    /**
+     * Callback fired when a row is clicked.
+     * Rows become visually interactive (pointer cursor) when this is set.
+     */
+    onRowClick?: (item: T, index: number) => void;
+    /**
+     * Extra class(es) applied to each `<tr>` in the body.
+     * Pass a function to vary classes per row.
+     * @example rowClass={(item, i) => item.active ? 'font-semibold' : ''}
+     */
+    rowClass?: string | ((item: T, index: number) => string);
+    /**
+     * Cell padding preset.
+     * @default 'default'
+     */
+    density?: DataTableDensity;
+    /**
+     * Applies an alternating background to odd-indexed rows.
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Node(s) rendered inside `<tfoot><tr>` as a summary or totals row.
+     * Should be a set of `<td>` elements matching the column count.
+     */
+    footerRow?: ReactNode;
+    /** Optional classes applied to the outer container div */
     containerClass?: string;
+    /** Optional classes applied to the scroll wrapper div */
     wrapperClass?: string;
+    /** Optional classes applied directly to the `<table>` element */
+    tableClass?: string;
+    /** Optional classes applied to the `<thead>` element */
+    headClass?: string;
 }

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

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import type { HTMLAttributes, ReactNode, TdHTMLAttributes } from 'react';
 /**
  * Root <Table /> props.
  */
@@ -11,6 +11,8 @@ export interface TableProps {
     className?: string;
     /** Table content (Head + Body + Foot) */
     children: ReactNode;
+    /** Accessible caption rendered as a <caption> element above the header */
+    caption?: ReactNode;
 }
 /**
  * <TableHead /> — table header section
@@ -29,8 +31,8 @@ export interface TableBodyProps {
     className?: string;
     /** Show loading shimmer (overrides children) */
     loading?: boolean;
-    /** Number of columns — needed for shimmer loader layout */
-    colSize: number;
+    /** Number of columns — needed for shimmer loader layout. Defaults to 1 when not provided. */
+    colSize?: number;
     /** Number of shimmer rows to show when loading */
     rowSize?: number;
     /** Actual table rows */
@@ -67,7 +69,7 @@ export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
 /**
  * <TableRow /> — regular row
  */
-export interface TableRowProps extends ThHTMLAttributes<HTMLTableRowElement> {
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     /** Whether the row highlights on hover */
     hoverable?: boolean;
 }

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

@@ -7,42 +7,48 @@ export type TabsItem = {
     label: ReactNode;
     /** Content rendered inside the TabPanel for this tab */
     content: ReactNode;
-    /** Optional icon (ReactNode) shown before the label */
+    /** Optional icon rendered before the label */
     icon?: ReactNode;
-    /** optional id or key; if missing index will be used */
+    /** Unique key for this tab; falls back to index when omitted */
     id?: string | number;
+    /** Prevents this tab from being selected */
+    disabled?: boolean;
+    /** Extra classes applied to this specific tab button */
+    tabClass?: string;
+    /** Override the default panel className for this specific tab */
+    panelClass?: string;
 };
 /**
  * Tabs component props
  */
 export interface TabsProps {
-    /**
-     * Tabs data (label + panel). Order defines visual order.
-     */
+    /** Tab data array. Order defines visual order. */
     tabs: TabsItem[];
     /**
-     * Variant for the tab list's appearance.
-     * Only supported values: "underline" | "segmented" | "solid"
-     *
-     * - "underline" (default): modern underline indicator under active tab
-     * - "segmented": segmented pill style where selected tab looks like a pill
-     * - "solid": solid nav tabs (selected tab has solid background)
+     * Visual style of the tab list.
+     * - "underline" (default): active tab shows a bottom indicator line
+     * - "segmented": active tab renders as a filled pill
+     * - "solid": active tab renders with a solid block background
      */
     variant?: 'underline' | 'segmented' | 'solid';
-    /**
-     * Starting tab index (controlled by TabGroup defaultIndex)
-     */
+    /** Initial selected index (uncontrolled) */
     defaultIndex?: number;
+    /** Controlled selected index — pair with onChange */
+    selectedIndex?: number;
+    /** Called with the new index whenever the selected tab changes */
+    onChange?: (index: number) => void;
     /**
-     * Extra classes for the outer group container
+     * Layout direction of the tab list.
+     * - "horizontal" (default): tabs sit in a row above the panel
+     * - "vertical": tabs sit in a column to the left of the panel
      */
+    orientation?: 'horizontal' | 'vertical';
+    /** Stretch tabs to fill equal width across the tab list (horizontal only) */
+    stretch?: boolean;
+    /** Extra classes for the outer TabGroup container */
     className?: string;
-    /**
-     * Extra classes to apply to the TabList wrapper
-     */
+    /** Extra classes for the TabList wrapper */
     listClass?: string;
-    /**
-     * Extra classes to apply to individual TabPanel wrapper
-     */
-    panelClass?: string;
+    /** Extra classes for the TabPanels wrapper */
+    panelsClass?: string;
 }

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

@@ -1,3 +1,2 @@
-import React from 'react';
-import { VirtualizedDataTableProps } from './VirtualizedDataTable.types';
-export declare const VirtualizedDataTable: React.FC<VirtualizedDataTableProps>;
+import type { VirtualizedDataTableProps } from './VirtualizedDataTable.types';
+export declare function VirtualizedDataTable<T extends Record<string, any> = Record<string, any>>({ items, columns, sorting, onSort, loading, emptyMessage, containerClass, wrapperClass, onRowClick, rowClass, density, striped, rowHeight, maxHeight, overscanCount, }: VirtualizedDataTableProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,42 @@
-import { DataTableColumn, DataTableProps } from '../DataTable';
+import type { DataTableColumn, DataTableDensity, DataTableProps } from '../DataTable';
 /**
- * Props for VirtualizedDataTable
+ * Props shared with DataTable but not applicable to virtualized tables are omitted:
+ * pagination, setPagination, layout, footerRow, rowKey, tableClass, headClass.
  */
-export interface VirtualizedDataTableProps extends DataTableProps {
-    /** Height of each row in pixels (required for virtualization) */
+type VirtualizedBase<T = any> = Omit<DataTableProps<T>, 'pagination' | 'setPagination' | 'layout' | 'footerRow' | 'rowKey' | 'tableClass' | 'headClass'>;
+/**
+ * Props for VirtualizedDataTable.
+ * @template T Shape of each data row
+ */
+export interface VirtualizedDataTableProps<T = any> extends VirtualizedBase<T> {
+    /** Height of each row in pixels. Required for react-window's fixed-size virtualization.
+     * @default 48
+     */
     rowHeight?: number;
-    /** Max height (px) the table body can take. AutoSizer will size to available space. */
+    /** Maximum height of the scrollable body in pixels.
+     * @default 400
+     */
     maxHeight?: number;
+    /**
+     * Number of extra rows rendered outside the visible area.
+     * Higher values reduce blank flicker during fast scrolling at the cost of more DOM nodes.
+     * Maps directly to react-window's overscanCount.
+     * @default 3
+     */
+    overscanCount?: number;
 }
 /**
- * Row props passed to the custom rowComponent API of react-window.
- * react-window will also pass index, style, and aria attributes.
+ * Data object passed to each virtualized row via react-window's itemData.
+ * Items and columns use any internally because react-window's generic inference
+ * does not flow through to ComponentType children.
  */
 export type VirtualizedRowProps = {
     items: any[];
     columns: DataTableColumn[];
+    gridTemplate: string;
+    onRowClick?: (item: any, index: number) => void;
+    rowClass?: string | ((item: any, index: number) => string);
+    density?: DataTableDensity;
+    striped?: boolean;
 };
+export {};

package/dist/types/components/VirtualizedDataTable/VirtualizedRow.d.ts

@@ -1,7 +1,3 @@
 import { ListChildComponentProps } from 'react-window';
-import { VirtualizedRowProps } from './VirtualizedDataTable.types';
-interface RowData extends VirtualizedRowProps {
-    gridTemplate: string;
-}
-export declare const VirtualizedRow: ({ index, style, data }: ListChildComponentProps<RowData>) => import("react/jsx-runtime").JSX.Element;
-export {};
+import type { VirtualizedRowProps } from './VirtualizedDataTable.types';
+export declare const VirtualizedRow: ({ index, style, data, }: ListChildComponentProps<VirtualizedRowProps>) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pk-design/react-tailwind",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "main": "dist/react-tailwind.cjs.js",
   "module": "dist/react-tailwind.es.js",
   "types": "dist/types/index.d.ts",