@apcrda/ui 0.5.7 → 0.5.8

package/README.md

@@ -1,20 +1,20 @@
 # APCRDA UI
 
-APCRDA UI is a production-ready React 19 component library for APCRDA applications. It is published as a single npm package:
+Production-ready React 19 component library for APCRDA applications. 49 components covering forms, data display, navigation, feedback, and layout — all built on Tailwind CSS v4 with full dark-mode and theming support.
 
 ```bash
 npm install @apcrda/ui
 ```
 
-## Usage
+## Quick Start
 
-Import the global stylesheet once in your application entrypoint:
+Import the global stylesheet once in your application entry point:
 
 ```tsx
 import '@apcrda/ui/styles.css'
 ```
 
-Use components from the package root:
+Wrap your app with `ThemeProvider` and start using components:
 
 ```tsx
 import { Button, Card, CardContent, Input, ThemeProvider } from '@apcrda/ui'
@@ -33,61 +33,196 @@ export default function App() {
 }
 ```
 
-## Scripts
-
-```bash
-npm run dev
-npm run test -- --run
-npm run typecheck
-npm run build
-npm run build:storybook
-```
+## Requirements
+
+| Peer dependency | Version  |
+| --------------- | -------- |
+| react           | ^19.0.0  |
+| react-dom       | ^19.0.0  |
+
+## Components
+
+### Form & Input
+| Component | Description |
+| --- | --- |
+| `Input` | Text input with size variants, icons, loading state |
+| `Textarea` | Multi-line input with auto character count |
+| `PasswordInput` | Password field with show/hide toggle |
+| `NumberInput` | Numeric stepper with min/max/step |
+| `FileUpload` | File picker — button or drag-and-drop dropzone |
+| `Checkbox` | Accessible checkbox with indeterminate state |
+| `RadioGroup` | Controlled radio group |
+| `Switch` | Toggle switch |
+| `Select` | Native-style single select |
+| `MultiSelect` | Multi-value select with chip display |
+| `Combobox` | Searchable single-select dropdown |
+| `Autocomplete` | Free-text input with suggestions |
+| `DatePicker` | Single-date calendar picker |
+| `DateRangePicker` | Date range calendar picker |
+| `FormField` | Label + input + hint + error wrapper |
+| `Label` | Accessible form label |
+
+### Data Display
+| Component | Description |
+| --- | --- |
+| `DataTable` | Full-featured table — sort, filter, paginate, pin, resize, reorder, virtual scroll, export |
+| `StatCard` | KPI metric card with trend indicator |
+| `Calendar` | Standalone calendar for date display |
+| `Timeline` | Vertical event timeline |
+| `ScrollArea` | Styled scrollable container |
+| `Progress` | Linear and indeterminate progress bar |
+| `Skeleton` | Content placeholder while loading |
+
+### Navigation
+| Component | Description |
+| --- | --- |
+| `Navbar` | Top application bar |
+| `Sidebar` | Collapsible side navigation |
+| `Breadcrumb` | Page hierarchy trail |
+| `Tabs` | Horizontal tab panels |
+| `Pagination` | Page navigation controls |
+| `Stepper` | Multi-step workflow indicator |
+| `Accordion` | Expand/collapse sections |
+
+### Feedback & Overlay
+| Component | Description |
+| --- | --- |
+| `Alert` | Inline status message |
+| `AlertDialog` | Confirmation modal |
+| `Dialog` | Generic modal dialog |
+| `Drawer` | Slide-in side panel |
+| `Toast` | Ephemeral notification |
+| `Tooltip` | Hover contextual hint |
+| `Popover` | Anchored floating panel |
+| `NotificationCenter` | Notification feed with read/unread state |
+| `EmptyState` | Zero-data placeholder |
+
+### Layout & Display
+| Component | Description |
+| --- | --- |
+| `Card` | Elevated surface container |
+| `Divider` | Horizontal or vertical separator |
+| `Typography` | Heading and text variants |
+| `Avatar` | User avatar with fallback initials |
+| `Badge` | Status and count indicator |
+| `Tag` | Removable label chip |
+| `Spinner` | Loading indicator |
+| `Skeleton` | Placeholder shimmer |
+| `Kbd` | Keyboard shortcut key display |
+
+### Utility
+| Component | Description |
+| --- | --- |
+| `CommandPalette` | `⌘K` command search overlay |
+| `ContextMenu` | Right-click context menu |
 
 ## Theming
 
-APCRDA UI uses CSS variables and `data-theme` attributes:
+APCRDA UI uses CSS custom properties and a `data-theme` attribute. Supported values are `"light"` and `"dark"`:
 
 ```html
-<html data-theme="light"></html>
-<html data-theme="dark"></html>
+<html data-theme="light">…</html>
+<html data-theme="dark">…</html>
+```
+
+`ThemeProvider` manages the attribute automatically and persists the user's preference to `localStorage`.
+
+### Tailwind plugin
+
+If you use Tailwind CSS in your consuming app, add the APCRDA design tokens as a plugin so your own classes can reference the same variables:
+
+```ts
+// tailwind.config.ts
+import apcrdaPlugin from '@apcrda/ui/plugin.css'
+
+export default {
+  plugins: [apcrdaPlugin],
+}
+```
+
+### Custom tokens
+
+Override any design token by redefining the CSS variable after importing the stylesheet:
+
+```css
+@import '@apcrda/ui/styles.css';
+
+:root {
+  --apcrda-color-primary: #0052cc;
+  --apcrda-radius-md: 0.25rem;
+}
 ```
 
-`ThemeProvider` manages the attribute and persists the selected theme by default.
+## FormField integration
+
+`Input`, `Textarea`, and other form controls connect to `FormField` automatically via context — no manual prop threading needed:
+
+```tsx
+import { FormField, Input, Button } from '@apcrda/ui'
+
+<FormField label="Aadhaar Number" hint="12-digit number" required>
+  <Input placeholder="XXXX XXXX XXXX" />
+</FormField>
+```
+
+Error messages and ARIA attributes are wired up for you.
+
+## DataTable
+
+```tsx
+import { DataTable } from '@apcrda/ui'
+import type { ColumnDef } from '@apcrda/ui'
+
+const columns: ColumnDef<Application>[] = [
+  { accessorKey: 'id',   header: 'Application ID' },
+  { accessorKey: 'name', header: 'Applicant Name' },
+]
+
+<DataTable
+  data={applications}
+  columns={columns}
+  pagination
+  selectable
+  exportCsv
+  stickyHeader
+/>
+```
+
+Key capabilities: multi-column sort, global search, per-column filters (text / select / range / date), column visibility, pinning, resize, reorder, row grouping, row expand, virtual scroll (1 000+ rows), CSV / Excel / print export, bulk actions, row actions menu, density toggle.
+
+## Scripts
+
+```bash
+npm run dev              # Storybook dev server on :6006
+npm run build            # Library build (ESM + type declarations)
+npm run build:storybook  # Static Storybook build
+npm run test -- --run    # Run unit tests once
+npm run typecheck        # TypeScript check without emit
+npm run lint             # ESLint
+```
 
 ## Publishing
 
-Build before publishing:
+Build the library before publishing:
 
 ```bash
 npm run build
 npm publish
 ```
 
-For GitLab Package Registry in CI:
+### GitLab Package Registry (CI)
 
 ```bash
 npm run publish:gitlab
 ```
 
-Use an `.npmrc` similar to:
+Configure `.npmrc`:
 
 ```ini
 @apcrda:registry=https://gitlab.com/api/v4/projects/<project_id>/packages/npm/
 //gitlab.com/api/v4/projects/<project_id>/packages/npm/:_authToken=${NPM_TOKEN}
 ```
 
-## Phase 1 Components
-
-- Button
-- Input
-- Textarea
-- Checkbox
-- RadioGroup
-- Switch
-- Badge
-- Avatar
-- Card
-- Divider
-- Label
-
-Advanced application components such as DataTable, DatePicker, Modal, Drawer, Charts, GIS components, and dashboard widgets are intentionally out of scope for Phase 1.
+## License
+
+MIT — © APCRDA

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,5 +1,24 @@
-import type { AlertDialogProps } from './AlertDialog.types';
-export declare function AlertDialog({ open, defaultOpen, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, variant, loading, children, }: AlertDialogProps): import("react").JSX.Element;
-export declare namespace AlertDialog {
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import type { AlertDialogFooterProps, AlertDialogHeaderProps } from './AlertDialog.types';
+export declare const AlertDialog: import("react").FC<AlertDialogPrimitive.AlertDialogProps>;
+export declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogPortal: import("react").FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+export declare const AlertDialogOverlay: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogContent: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    readonly closeOnOverlayClick?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): import("react").JSX.Element;
+export declare namespace AlertDialogHeader {
     var displayName: string;
 }
+export declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): import("react").JSX.Element;
+export declare namespace AlertDialogFooter {
+    var displayName: string;
+}
+export declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const AlertDialogAction: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    readonly variant?: import("./AlertDialog.types").AlertDialogVariant;
+    readonly loading?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,15 +1,17 @@
-export type AlertDialogVariant = 'destructive' | 'warning' | 'info';
-export type AlertDialogProps = {
-    readonly open?: boolean;
-    readonly defaultOpen?: boolean;
-    readonly onOpenChange?: (open: boolean) => void;
-    readonly title: string;
-    readonly description: string;
-    readonly confirmLabel?: string;
-    readonly cancelLabel?: string;
-    readonly onConfirm?: () => void;
-    readonly onCancel?: () => void;
+import type * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import type { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import type { ButtonVariant } from '../Button/Button.types';
+export type AlertDialogVariant = Extract<ButtonVariant, 'destructive' | 'primary' | 'success'>;
+export type AlertDialogOverlayProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>;
+export type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
+export type AlertDialogDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
+export type AlertDialogHeaderProps = HTMLAttributes<HTMLDivElement>;
+export type AlertDialogFooterProps = HTMLAttributes<HTMLDivElement>;
+export type AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+    readonly closeOnOverlayClick?: boolean;
+};
+export type AlertDialogActionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
     readonly variant?: AlertDialogVariant;
     readonly loading?: boolean;
-    readonly children?: React.ReactNode;
 };
+export type AlertDialogCancelProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;

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

@@ -1,2 +1,2 @@
-export { AlertDialog } from './AlertDialog';
-export type { AlertDialogProps, AlertDialogVariant } from './AlertDialog.types';
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from './AlertDialog';
+export type { AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogOverlayProps, AlertDialogTitleProps, AlertDialogVariant, } from './AlertDialog.types';

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 export declare const buttonVariants: (props?: ({
-    variant?: "success" | "destructive" | "primary" | "secondary" | "outline" | "ghost" | null | undefined;
+    variant?: "success" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
     size?: "icon" | "sm" | "md" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Card/Card.d.ts

@@ -1,4 +1,4 @@
-import type { CardDescriptionProps, CardSectionProps, CardTitleProps } from './Card.types';
+import type { CardDescriptionProps, CardSectionProps } from './Card.types';
 export declare const cardVariants: (props?: ({
     variant?: "elevated" | "outlined" | "filled" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -7,7 +7,9 @@ export declare const Card: import("react").ForwardRefExoticComponent<import("rea
     readonly loading?: boolean;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const CardHeader: import("react").ForwardRefExoticComponent<CardSectionProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const CardTitle: import("react").ForwardRefExoticComponent<CardTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const CardTitle: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLHeadingElement> & {
+    readonly as?: import("./Card.types").CardTitleLevel;
+} & import("react").RefAttributes<HTMLHeadingElement>>;
 export declare const CardDescription: import("react").ForwardRefExoticComponent<CardDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
 export declare const CardContent: import("react").ForwardRefExoticComponent<CardSectionProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const CardFooter: import("react").ForwardRefExoticComponent<CardSectionProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,9 +1,12 @@
 import type { HTMLAttributes } from 'react';
 export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export type CardTitleLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type CardProps = HTMLAttributes<HTMLDivElement> & {
     readonly variant?: CardVariant;
     readonly loading?: boolean;
 };
 export type CardSectionProps = HTMLAttributes<HTMLDivElement>;
-export type CardTitleProps = HTMLAttributes<HTMLHeadingElement>;
+export type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & {
+    readonly as?: CardTitleLevel;
+};
 export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;

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

@@ -1,2 +1,2 @@
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants, } from './Card';
-export type { CardDescriptionProps, CardProps, CardSectionProps, CardTitleProps, CardVariant } from './Card.types';
+export type { CardDescriptionProps, CardProps, CardSectionProps, CardTitleLevel, CardTitleProps, CardVariant } from './Card.types';

package/dist/components/FormField/FormField.d.ts

@@ -1,5 +1,5 @@
 import type { FormFieldProps } from './FormField.types';
-export declare function FormField({ label, htmlFor, required, hint, error, className, children, ...props }: FormFieldProps): import("react").JSX.Element;
+export declare function FormField({ id: idProp, label, htmlFor, required, hint, error, className, children, ...props }: FormFieldProps): import("react").JSX.Element;
 export declare namespace FormField {
     var displayName: string;
 }

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

@@ -1,7 +1,10 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 export interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
-    readonly label?: string;
+    /** Shared id used for label `htmlFor`, input `id`, and `aria-describedby` wiring. */
+    readonly id?: string;
+    /** Explicit label-for override. Defaults to `id` when omitted. */
     readonly htmlFor?: string;
+    readonly label?: string;
     readonly required?: boolean;
     readonly hint?: string;
     readonly error?: string;

package/dist/components/FormField/FormFieldContext.d.ts

@@ -0,0 +1,9 @@
+export interface FormFieldContextValue {
+    readonly id: string | undefined;
+    readonly errorId: string | undefined;
+    readonly hintId: string | undefined;
+    readonly error: string | undefined;
+    readonly required: boolean;
+}
+export declare const FormFieldContext: import("react").Context<FormFieldContextValue>;
+export declare function useFormField(): FormFieldContextValue;

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

@@ -1,2 +1,4 @@
 export { FormField } from './FormField';
+export { useFormField } from './FormFieldContext';
+export type { FormFieldContextValue } from './FormFieldContext';
 export type { FormFieldProps } from './FormField.types';

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,5 @@
+import type { NavbarActionsProps, NavbarBrandProps, NavbarContentProps, NavbarProps } from './Navbar.types';
+export declare const Navbar: import("react").ForwardRefExoticComponent<NavbarProps & import("react").RefAttributes<HTMLElement>>;
+export declare const NavbarBrand: import("react").ForwardRefExoticComponent<NavbarBrandProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const NavbarContent: import("react").ForwardRefExoticComponent<NavbarContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const NavbarActions: import("react").ForwardRefExoticComponent<NavbarActionsProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+export interface NavbarProps extends HTMLAttributes<HTMLElement> {
+    /** Stick to top of viewport. Defaults to true. */
+    readonly sticky?: boolean;
+    /** Add a bottom border. Defaults to true. */
+    readonly bordered?: boolean;
+}
+export type NavbarBrandProps = HTMLAttributes<HTMLDivElement>;
+export type NavbarContentProps = HTMLAttributes<HTMLDivElement>;
+export type NavbarActionsProps = HTMLAttributes<HTMLDivElement>;

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

@@ -0,0 +1,2 @@
+export { Navbar, NavbarActions, NavbarBrand, NavbarContent } from './Navbar';
+export type { NavbarActionsProps, NavbarBrandProps, NavbarContentProps, NavbarProps } from './Navbar.types';

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,2 @@
+import type { SpinnerProps } from './Spinner.types';
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SpinnerVariant = 'default' | 'muted' | 'white' | 'current';
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    readonly size?: SpinnerSize;
+    readonly variant?: SpinnerVariant;
+    /** Accessible label announced to screen readers. Set to empty string when spinner is decorative. */
+    readonly label?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize, SpinnerVariant } from './Spinner.types';

package/dist/components/Stepper/Stepper.d.ts

@@ -1,5 +1,5 @@
 import type { StepperProps } from './Stepper.types';
-export declare function Stepper({ steps, activeStep, orientation, completedSteps, errorSteps, className, ...props }: StepperProps): import("react").JSX.Element;
+export declare function Stepper({ steps, activeStep, orientation, completedSteps, errorSteps, onStepClick, className, ...props }: StepperProps): import("react").JSX.Element;
 export declare namespace Stepper {
     var displayName: string;
 }

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

@@ -11,4 +11,5 @@ export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
     readonly orientation?: 'horizontal' | 'vertical';
     readonly completedSteps?: number[];
     readonly errorSteps?: number[];
+    readonly onStepClick?: (index: number) => void;
 }

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

@@ -1,5 +1,5 @@
 import type { DataTableProps } from './DataTable.types';
-export declare function DataTable<TData>({ data, columns, loading, loadingRows, emptyMessage, emptyDescription, pageSize: initialPageSize, pageSizeOptions, pagination, selectable, columnVisibility: enableColumnVisibility, exportCsv, exportFilename, getRowCanExpand, renderSubRow, onSelectionChange, onRowClick, className, }: DataTableProps<TData>): import("react").JSX.Element;
+export declare function DataTable<TData>({ data, columns, loading, loadingRows, emptyMessage, emptyDescription, pageSize: initialPageSize, pageSizeOptions, pagination, serverPagination, infiniteScroll, multiSort, columnFilters: enableColumnFilters, columnVisibility: enableColumnVisibility, columnResize, columnPinning: enableColumnPinning, columnReorder, selectable, onSelectionChange, getRowCanExpand, renderSubRow, getSubRows, grouping: enableGrouping, defaultGrouping, density: enableDensity, defaultDensity, stickyHeader, striped, virtualize, estimatedRowHeight, rowActions, bulkActions, exportCsv, exportExcel, exportFilename, print: enablePrint, copy: enableCopy, showFooter, onRowClick, className, }: DataTableProps<TData>): import("react").JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

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

@@ -1,23 +1,79 @@
 import type { ColumnDef, Row } from '@tanstack/react-table';
 import type { ReactNode } from 'react';
 export type { ColumnDef };
+export type DataTableDensity = 'compact' | 'normal' | 'spacious';
+export type DataTableFilterType = 'text' | 'select' | 'range' | 'date';
+export interface DataTableRowAction<TData> {
+    readonly label: string;
+    readonly icon?: ReactNode;
+    readonly onClick: (row: TData) => void;
+    readonly variant?: 'default' | 'destructive';
+    readonly disabled?: (row: TData) => boolean;
+}
+export interface DataTableBulkAction<TData> {
+    readonly label: string;
+    readonly icon?: ReactNode;
+    readonly onClick: (rows: TData[]) => void;
+    readonly variant?: 'default' | 'destructive';
+}
+export interface DataTableServerPagination {
+    readonly total: number;
+    readonly onPaginationChange: (pageIndex: number, pageSize: number) => void;
+}
+export interface DataTableInfiniteScroll {
+    readonly onLoadMore: () => void;
+    readonly hasMore: boolean;
+    readonly isLoadingMore?: boolean;
+}
 export interface DataTableProps<TData> {
     data: TData[];
     columns: ColumnDef<TData, any>[];
+    className?: string;
     loading?: boolean;
     loadingRows?: number;
     emptyMessage?: string;
     emptyDescription?: string;
+    pagination?: boolean;
     pageSize?: number;
     pageSizeOptions?: number[];
-    pagination?: boolean;
-    selectable?: boolean;
+    serverPagination?: DataTableServerPagination;
+    infiniteScroll?: DataTableInfiniteScroll;
+    multiSort?: boolean;
+    columnFilters?: boolean;
     columnVisibility?: boolean;
-    exportCsv?: boolean;
-    exportFilename?: string;
+    columnResize?: boolean;
+    columnPinning?: boolean;
+    columnReorder?: boolean;
+    selectable?: boolean;
+    onSelectionChange?: (rows: TData[]) => void;
     getRowCanExpand?: (row: Row<TData>) => boolean;
     renderSubRow?: (row: Row<TData>) => ReactNode;
-    onSelectionChange?: (rows: TData[]) => void;
+    getSubRows?: (row: TData) => TData[] | undefined;
+    grouping?: boolean;
+    defaultGrouping?: string[];
+    density?: boolean;
+    defaultDensity?: DataTableDensity;
+    stickyHeader?: boolean;
+    striped?: boolean;
+    virtualize?: boolean;
+    estimatedRowHeight?: number;
+    rowActions?: DataTableRowAction<TData>[];
+    bulkActions?: DataTableBulkAction<TData>[];
+    exportCsv?: boolean;
+    exportExcel?: boolean;
+    exportFilename?: string;
+    print?: boolean;
+    copy?: boolean;
+    showFooter?: boolean;
     onRowClick?: (row: TData) => void;
-    className?: string;
+}
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData extends unknown | object | any[], TValue> {
+        filterType?: DataTableFilterType;
+        filterOptions?: {
+            label: string;
+            value: string;
+        }[];
+        align?: 'left' | 'center' | 'right';
+    }
 }

package/dist/components/Table/DataTable.utils.d.ts

@@ -0,0 +1,7 @@
+import type { FilterFn, Table } from '@tanstack/react-table';
+export declare const numberRangeFilterFn: FilterFn<any>;
+export declare const dateRangeFilterFn: FilterFn<any>;
+export declare function exportToCsv<TData>(filename: string, table: Table<TData>): void;
+export declare function exportToExcel<TData>(filename: string, table: Table<TData>): Promise<void>;
+export declare function printTable<TData>(filename: string, table: Table<TData>): void;
+export declare function copyToClipboard<TData>(table: Table<TData>, selectedOnly?: boolean): void;

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

@@ -1,3 +1,3 @@
 export { DataTable } from './DataTable';
-export type { ColumnDef, DataTableProps } from './DataTable.types';
+export type { ColumnDef, DataTableBulkAction, DataTableDensity, DataTableFilterType, DataTableInfiniteScroll, DataTableProps, DataTableRowAction, DataTableServerPagination, } from './DataTable.types';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './Table';

package/dist/components/Textarea/Textarea.d.ts

@@ -6,4 +6,5 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<import(
     readonly textareaSize?: import("./Textarea.types").TextareaSize;
     readonly error?: boolean;
     readonly loading?: boolean;
+    readonly showCount?: boolean;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -4,4 +4,5 @@ export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     readonly textareaSize?: TextareaSize;
     readonly error?: boolean;
     readonly loading?: boolean;
+    readonly showCount?: boolean;
 };

package/dist/components/index.d.ts

@@ -24,6 +24,7 @@ export * from './Input';
 export * from './Kbd';
 export * from './Label';
 export * from './MultiSelect';
+export * from './Navbar';
 export * from './NotificationCenter';
 export * from './NumberInput';
 export * from './Pagination';
@@ -34,6 +35,7 @@ export * from './RadioGroup';
 export * from './ScrollArea';
 export * from './Select';
 export * from './Sidebar';
+export * from './Spinner';
 export * from './Skeleton';
 export * from './StatCard';
 export * from './Stepper';