@campxdev/react-blueprint 3.0.0-alpha.5 → 3.0.0-alpha.7

package/dist/cjs/types/src/components/Charts/PieChart/PieChart.d.ts

@@ -1,5 +1,25 @@
 import { type ChartConfig } from '@/shadcn-components/Charts/Chart';
 import { LegendProps, MarginProps, SubTitleProps, TitleProps } from '../types/types';
+/**
+ * Props for the PieChart component
+ * @typedef {Object} PieChartProps
+ * @property {string} [title='Pie Chart'] - Chart title text
+ * @property {boolean} [showSubtitle=false] - Whether to display subtitle
+ * @property {string} [subTitle=''] - Chart subtitle text
+ * @property {TitleProps} [titleProps={variant: 'large'}] - Title styling props
+ * @property {SubTitleProps} [subTitleProps={variant: 'small'}] - Subtitle styling props
+ * @property {MarginProps} [margin] - Chart margins
+ * @property {number} [width=500] - Chart width in pixels
+ * @property {number} [height=500] - Chart height in pixels
+ * @property {PieProps} pie1 - Configuration for the primary pie (required)
+ * @property {PieProps} [pie2] - Configuration for the secondary pie (optional, for donut charts)
+ * @property {string} [className] - CSS class for the container
+ * @property {boolean} [showLegend=true] - Whether to display the legend
+ * @property {LegendProps} [legendSx] - Legend styling props
+ * @property {boolean} [showToolTip=true] - Whether to show tooltip on hover
+ * @property {ChartConfig} config - Chart configuration with color mappings
+ * @property {boolean} [hideTooltipLabel=false] - Whether to hide the label in tooltip
+ */
 export type PieChartProps = {
     title?: string;
     showSubtitle?: boolean;
@@ -18,6 +38,22 @@ export type PieChartProps = {
     config: ChartConfig;
     hideTooltipLabel?: boolean;
 };
+/**
+ * Configuration for a single pie in the PieChart
+ * @typedef {Object} PieProps
+ * @property {any[]} data - Array of data objects for the pie slices
+ * @property {string} dataKey - The key in data objects to use for slice values
+ * @property {string} [nameKey] - The key in data objects to use for slice labels
+ * @property {number} [innerRadius] - Inner radius for donut charts (creates hollow center)
+ * @property {number} [outerRadius] - Outer radius of the pie
+ * @property {string} [fill] - Default fill color for pie slices
+ * @property {boolean} [label] - Whether to show labels on pie slices
+ * @property {string} [cx='50%'] - X-coordinate of pie center (percentage or pixels)
+ * @property {string} [cy='50%'] - Y-coordinate of pie center (percentage or pixels)
+ * @property {number} [startAngle] - Starting angle of the pie in degrees
+ * @property {number} [endAngle] - Ending angle of the pie in degrees
+ * @property {string[]} [colors] - Array of colors for pie slices (cycles if fewer than slices)
+ */
 type PieProps = {
     data: any[];
     dataKey: string;
@@ -32,5 +68,55 @@ type PieProps = {
     endAngle?: number;
     colors?: string[];
 };
+/**
+ * PieChart Component
+ * Displays data as one or two pie/donut charts with customizable colors, labels, and legend.
+ * Supports single pie, donut, or dual-pie layouts.
+ *
+ * @component
+ * @param {PieChartProps} props - The component props
+ * @param {string} [props.title] - Chart title
+ * @param {boolean} [props.showSubtitle] - Show/hide subtitle
+ * @param {string} [props.subTitle] - Chart subtitle
+ * @param {TitleProps} [props.titleProps] - Title styling
+ * @param {SubTitleProps} [props.subTitleProps] - Subtitle styling
+ * @param {MarginProps} [props.margin] - Chart margins
+ * @param {number} [props.width] - Chart width in pixels
+ * @param {number} [props.height] - Chart height in pixels
+ * @param {PieProps} props.pie1 - Primary pie configuration
+ * @param {PieProps} [props.pie2] - Secondary pie configuration (creates dual-pie)
+ * @param {string} [props.className] - Container CSS class
+ * @param {boolean} [props.showLegend] - Show/hide legend
+ * @param {LegendProps} [props.legendSx] - Legend styling
+ * @param {boolean} [props.showToolTip] - Show/hide tooltip
+ * @param {ChartConfig} props.config - Chart color configuration
+ * @param {boolean} [props.hideTooltipLabel] - Hide tooltip label
+ * @returns {React.ReactElement} Rendered pie chart
+ *
+ * @example
+ * const data = [
+ *   { name: 'Slice A', value: 400 },
+ *   { name: 'Slice B', value: 300 },
+ *   { name: 'Slice C', value: 300 }
+ * ];
+ * const config = {
+ *   name: { label: 'Category', color: '#3b82f6' },
+ *   value: { label: 'Value', color: '#10b981' }
+ * };
+ *
+ * return (
+ *   <PieChart
+ *     pie1={{
+ *       data: data,
+ *       dataKey: 'value',
+ *       nameKey: 'name',
+ *       colors: ['#3b82f6', '#10b981', '#f59e0b']
+ *     }}
+ *     config={config}
+ *     title="Sales Distribution"
+ *     showLegend={true}
+ *   />
+ * );
+ */
 export declare const PieChart: ({ title, showSubtitle, subTitle, subTitleProps, titleProps, margin, width, height, showToolTip, showLegend, legendSx, pie1, pie2, className, config, hideTooltipLabel, }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/Charts/TreeMap/TreeMap.d.ts

@@ -2,6 +2,29 @@ import { type ChartConfig } from '@/shadcn-components/Charts/Chart';
 import React from 'react';
 import { AnimationTiming } from 'recharts/types/util/types';
 import { MarginProps, SubTitleProps, TitleProps } from '../types/types';
+/**
+ * Props for the TreeMap component
+ * @typedef {Object} TreeMapProps
+ * @property {any} data - Hierarchical data structure for the treemap (should have children property for nested data)
+ * @property {string|number} dataKey - The key to use for treemap cell sizing
+ * @property {ChartConfig} config - Chart configuration with color mappings
+ * @property {string} [title='Tree Map'] - Chart title text
+ * @property {boolean} [showSubtitle=false] - Whether to display subtitle
+ * @property {string} [subTitle=''] - Chart subtitle text
+ * @property {TitleProps} [titleProps={variant: 'large'}] - Title styling props
+ * @property {SubTitleProps} [subTitleProps={variant: 'small'}] - Subtitle styling props
+ * @property {number} [width=400] - Chart width in pixels
+ * @property {number} [height=200] - Chart height in pixels
+ * @property {MarginProps} [margin] - Chart margins
+ * @property {number} [aspectRatio] - Aspect ratio of treemap cells
+ * @property {string} [fill='#F8C12D'] - Default fill color for cells
+ * @property {string} [stroke='#fff'] - Border color for cells
+ * @property {string[]} [colors] - Array of colors for cells (overrides fill if provided)
+ * @property {string} [className] - CSS class for the container
+ * @property {boolean} [showToolTip=true] - Whether to show tooltip on hover
+ * @property {boolean} [isAnimationActive=false] - Whether to animate cells
+ * @property {AnimationTiming} [animationEasing='linear'] - Animation easing function
+ */
 export interface TreeMapProps {
     data: any;
     dataKey: string | number;
@@ -23,5 +46,56 @@ export interface TreeMapProps {
     isAnimationActive?: boolean;
     animationEasing?: AnimationTiming;
 }
+/**
+ * TreeMap Component
+ * Displays hierarchical data as a treemap visualization where cell sizes represent values.
+ * Each cell can be colored based on configured colors or a single fill color.
+ *
+ * @component
+ * @param {TreeMapProps} props - The component props
+ * @param {any} props.data - Hierarchical data structure with nested children
+ * @param {string|number} props.dataKey - Key for cell sizing calculation
+ * @param {ChartConfig} props.config - Chart color configuration
+ * @param {string} [props.title] - Chart title
+ * @param {boolean} [props.showSubtitle] - Show/hide subtitle
+ * @param {string} [props.subTitle] - Chart subtitle
+ * @param {TitleProps} [props.titleProps] - Title styling
+ * @param {SubTitleProps} [props.subTitleProps] - Subtitle styling
+ * @param {number} [props.width] - Chart width in pixels
+ * @param {number} [props.height] - Chart height in pixels
+ * @param {MarginProps} [props.margin] - Chart margins
+ * @param {number} [props.aspectRatio] - Cell aspect ratio
+ * @param {string} [props.fill] - Default cell fill color
+ * @param {string} [props.stroke] - Cell border color
+ * @param {string[]} [props.colors] - Array of colors for cells
+ * @param {string} [props.className] - Container CSS class
+ * @param {boolean} [props.showToolTip] - Show/hide tooltip
+ * @param {boolean} [props.isAnimationActive] - Enable/disable animations
+ * @param {AnimationTiming} [props.animationEasing] - Animation easing function
+ * @returns {React.ReactElement} Rendered treemap chart
+ *
+ * @example
+ * const data = {
+ *   name: 'Root',
+ *   children: [
+ *     { name: 'Category A', value: 400 },
+ *     { name: 'Category B', value: 300 },
+ *     { name: 'Category C', value: 200 }
+ *   ]
+ * };
+ * const config = {
+ *   value: { label: 'Value', color: '#3b82f6' }
+ * };
+ *
+ * return (
+ *   <TreeMap
+ *     data={data}
+ *     dataKey="value"
+ *     config={config}
+ *     title="Market Share"
+ *     colors={['#3b82f6', '#10b981', '#f59e0b']}
+ *   />
+ * );
+ */
 declare const TreeMap: React.FC<TreeMapProps>;
 export default TreeMap;

package/dist/cjs/types/src/components/DataDisplay/Accordion/Accordion.d.ts

@@ -1,4 +1,14 @@
 import { ReactNode } from 'react';
+/**
+ * Props for individual accordion items
+ * @typedef {Object} AccordionItemProps
+ * @property {ReactNode} title - The title/header content of the accordion item
+ * @property {ReactNode} content - The main content displayed when item is expanded
+ * @property {ReactNode} [actions] - Optional action buttons or elements displayed in the header
+ * @property {string[]} [errorKeys] - Array of error field keys associated with this item
+ * @property {string} [className] - Optional CSS class for the accordion item container
+ * @property {string} [contentClassName] - Optional CSS class for the content section
+ */
 export type AccordionItemProps = {
     title: ReactNode;
     content: ReactNode;
@@ -7,11 +17,55 @@ export type AccordionItemProps = {
     className?: string;
     contentClassName?: string;
 };
+/**
+ * Props for the Accordion component
+ * @typedef {Object} AccordionProps
+ * @property {AccordionItemProps[]} data - Array of accordion items to display
+ * @property {string} [className] - Optional CSS class for the accordion container
+ * @property {number} [defaultExpandedIndex] - Index of item to expand by default
+ * @property {string} [errorField] - Error field name to auto-expand item containing this error
+ */
 type AccordionProps = {
     data: AccordionItemProps[];
     className?: string;
     defaultExpandedIndex?: number;
     errorField?: string;
 };
+/**
+ * Accordion component for displaying collapsible sections
+ * Auto-expands section containing error field, supports custom actions per item
+ *
+ * @component
+ * @param {AccordionProps} props - Accordion configuration
+ * @param {AccordionItemProps[]} props.data - Array of accordion items with title, content, and optional actions
+ * @param {string} [props.className] - Additional CSS class for the accordion wrapper
+ * @param {number} [props.defaultExpandedIndex] - Index of the item to expand on initial render (0-based)
+ * @param {string} [props.errorField] - Field name containing error; matching item will auto-expand
+ * @returns {JSX.Element} Accordion component with collapsible sections
+ *
+ * @example
+ * // Basic accordion
+ * <Accordion
+ *   data={[
+ *     { title: "Section 1", content: "Content 1" },
+ *     { title: "Section 2", content: "Content 2" }
+ *   ]}
+ *   defaultExpandedIndex={0}
+ * />
+ *
+ * @example
+ * // With actions and error handling
+ * <Accordion
+ *   data={[
+ *     {
+ *       title: "Personal Info",
+ *       content: <PersonForm />,
+ *       actions: <Button>Edit</Button>,
+ *       errorKeys: ["firstName", "lastName"]
+ *     }
+ *   ]}
+ *   errorField="firstName"
+ * />
+ */
 export declare const Accordion: ({ data, className, defaultExpandedIndex, errorField, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/DataDisplay/ActivityLogView/ActivityLogFilter.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Props for ActivityLogFilter component
+ * @typedef {Object} ActivityLogFilterProps
+ * @property {Date | null} fromDate - Current filter start date
+ * @property {Date | null} toDate - Current filter end date
+ * @property {(date: Date | null) => void} setFromDate - Update start date
+ * @property {(date: Date | null) => void} setToDate - Update end date
+ * @property {() => void} fetchNextPage - Callback to apply filters
+ * @property {boolean} isLoading - Whether data is loading
+ */
 interface ActivityLogFilterProps {
     fromDate: Date | null;
     toDate: Date | null;
@@ -6,5 +16,30 @@ interface ActivityLogFilterProps {
     fetchNextPage: () => void;
     isLoading: boolean;
 }
+/**
+ * ActivityLogFilter component for date range filtering
+ * Provides popover with date pickers and apply/clear buttons
+ *
+ * @component
+ * @param {ActivityLogFilterProps} props - Filter configuration
+ * @param {Date | null} props.fromDate - Start date filter
+ * @param {Date | null} props.toDate - End date filter
+ * @param {(date: Date | null) => void} props.setFromDate - Handler for start date change
+ * @param {(date: Date | null) => void} props.setToDate - Handler for end date change
+ * @param {() => void} props.fetchNextPage - Handler to apply filters
+ * @param {boolean} props.isLoading - Disable controls while loading
+ * @returns {JSX.Element} Filter button with date picker popover
+ *
+ * @example
+ * // Activity filter with date range
+ * <ActivityLogFilter
+ *   fromDate={startDate}
+ *   toDate={endDate}
+ *   setFromDate={setStart}
+ *   setToDate={setEnd}
+ *   fetchNextPage={() => applyFilters()}
+ *   isLoading={false}
+ * />
+ */
 export declare const ActivityLogFilter: ({ fromDate, toDate, setFromDate, setToDate, fetchNextPage, isLoading, }: ActivityLogFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/DataDisplay/ActivityLogView/ActivityLogView.d.ts

@@ -1,10 +1,38 @@
+/**
+ * Type for activity action
+ * @typedef {'create' | 'update' | 'delete'} ActivityAction
+ */
 export type ActivityAction = 'create' | 'update' | 'delete';
+/**
+ * Interface for a single activity entry
+ * @typedef {Object} Activity
+ * @property {string} [userName] - Name of user who performed the action
+ * @property {ActivityAction} [action] - Type of action performed
+ * @property {string} message - Description or details of the activity
+ * @property {string} timestamp - ISO timestamp of when activity occurred
+ */
 export interface Activity {
     userName?: string;
     action?: ActivityAction;
     message: string;
     timestamp: string;
 }
+/**
+ * Props for ActivityLogView component
+ * @typedef {Object} ActivityLogProps
+ * @property {Activity[]} activitiesData - Array of activities to display
+ * @property {boolean} isFetchingNextPage - Whether next page is being fetched
+ * @property {() => void} fetchNextPage - Callback to fetch next page
+ * @property {boolean | undefined} hasNextPage - Whether more activities exist
+ * @property {Date | null} fromDate - Filter start date
+ * @property {Date | null} toDate - Filter end date
+ * @property {(date: Date | null) => void} setFromDate - Update filter start date
+ * @property {(date: Date | null) => void} setToDate - Update filter end date
+ * @property {boolean} isLoading - Whether data is loading
+ * @property {boolean} [hideLogFilter] - Hide the date filter controls
+ * @property {string} [className] - CSS class for container
+ * @property {string} [title] - Title to display above activities
+ */
 interface ActivityLogProps {
     activitiesData: Activity[];
     isFetchingNextPage: boolean;
@@ -19,5 +47,55 @@ interface ActivityLogProps {
     className?: string;
     title?: string;
 }
+/**
+ * ActivityLogView component for displaying chronological activity feed
+ * Groups activities by date, supports filtering and infinite scroll
+ *
+ * @component
+ * @param {ActivityLogProps} props - Activity log configuration
+ * @param {Activity[]} props.activitiesData - Array of activity entries to display
+ * @param {boolean} props.isFetchingNextPage - Whether next page is loading
+ * @param {() => void} props.fetchNextPage - Callback to load more activities
+ * @param {boolean | undefined} props.hasNextPage - Whether more activities available
+ * @param {Date | null} props.fromDate - Filter start date (null = no limit)
+ * @param {Date | null} props.toDate - Filter end date (null = no limit)
+ * @param {(date: Date | null) => void} props.setFromDate - Update filter start date
+ * @param {(date: Date | null) => void} props.setToDate - Update filter end date
+ * @param {boolean} props.isLoading - Initial load state
+ * @param {boolean} [props.hideLogFilter=false] - Hide filter controls
+ * @param {string} [props.className] - CSS class for container
+ * @param {string} [props.title] - Title to display above log
+ * @returns {JSX.Element} Activity log with timeline, filtering, and infinite scroll
+ *
+ * @example
+ * // Activity log with filtering
+ * <ActivityLogView
+ *   activitiesData={activities}
+ *   isFetchingNextPage={loading}
+ *   fetchNextPage={() => loadMore()}
+ *   hasNextPage={true}
+ *   fromDate={startDate}
+ *   toDate={endDate}
+ *   setFromDate={setStartDate}
+ *   setToDate={setEndDate}
+ *   isLoading={false}
+ *   title="Activity Feed"
+ * />
+ *
+ * @example
+ * // Activity log without filter
+ * <ActivityLogView
+ *   activitiesData={activities}
+ *   isFetchingNextPage={loading}
+ *   fetchNextPage={() => loadMore()}
+ *   hasNextPage={true}
+ *   fromDate={null}
+ *   toDate={null}
+ *   setFromDate={() => {}}
+ *   setToDate={() => {}}
+ *   isLoading={false}
+ *   hideLogFilter
+ * />
+ */
 export declare const ActivityLogView: ({ activitiesData, isFetchingNextPage, fetchNextPage, hasNextPage, fromDate, toDate, setFromDate, setToDate, isLoading, hideLogFilter, className, title, }: ActivityLogProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/DataDisplay/Avatar/Avatar.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Props for CircularAvatar component
+ * @typedef {Object} CircularAvatarProps
+ * @property {string} text - Text to display as fallback initials (e.g., "John Doe" -> "JD")
+ * @property {string} [src] - Optional image source URL for the avatar
+ * @property {string} [alt] - Optional alt text for the avatar image
+ * @property {string} [className] - Optional CSS class for the avatar container
+ * @property {string} [fallbackClassName] - Optional CSS class for the fallback text
+ * @property {(e: React.MouseEvent<HTMLDivElement>) => void} [onClick] - Optional click handler
+ */
 export type CircularAvatarProps = {
     text: string;
     src?: string;
@@ -6,4 +16,34 @@ export type CircularAvatarProps = {
     fallbackClassName?: string;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
+/**
+ * Circular avatar component with image and fallback initials
+ * Extracts first letter from each word to create initials fallback
+ *
+ * @component
+ * @param {CircularAvatarProps} props - Avatar configuration
+ * @param {string} props.text - Text to extract initials from for fallback display
+ * @param {string} [props.src] - Image URL to display; falls back to initials if not provided
+ * @param {string} [props.alt] - Alternative text for image accessibility
+ * @param {string} [props.className] - Additional CSS classes for avatar wrapper
+ * @param {string} [props.fallbackClassName] - Additional CSS classes for fallback text display
+ * @param {(e: React.MouseEvent<HTMLDivElement>) => void} [props.onClick] - Handler called when avatar is clicked
+ * @returns {JSX.Element} Circular avatar with image or initials
+ *
+ * @example
+ * // Avatar with image
+ * <CircularAvatar
+ *   text="John Doe"
+ *   src="/path/to/avatar.jpg"
+ *   alt="John's avatar"
+ * />
+ *
+ * @example
+ * // Avatar with fallback initials and click handler
+ * <CircularAvatar
+ *   text="Jane Smith"
+ *   onClick={(e) => openUserMenu(e)}
+ *   className="border-2 border-blue-500"
+ * />
+ */
 export declare const CircularAvatar: ({ text, src, alt, className, fallbackClassName, onClick, }: CircularAvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/DataDisplay/Chip/Chip.d.ts

@@ -1,7 +1,35 @@
 import { Badge } from '@/shadcn-components/DataDisplay/Badge/Badge';
 import * as React from 'react';
+/**
+ * Props for Chip component
+ * @typedef {Object} ChipProps
+ * @property {string} label - The text content displayed in the chip
+ * @extends {React.ComponentPropsWithoutRef<typeof Badge>}
+ */
 export interface ChipProps extends React.ComponentPropsWithoutRef<typeof Badge> {
     label: string;
 }
+/**
+ * Chip component for displaying compact, labeled badges
+ * Wrapper around shadcn Badge component with simpler API
+ *
+ * @component
+ * @param {ChipProps} props - Chip configuration
+ * @param {string} props.label - Text to display in the chip
+ * @param {...React.ComponentPropsWithoutRef<typeof Badge>} [props] - Additional Badge props (variant, className, etc.)
+ * @returns {JSX.Element} Chip badge element
+ *
+ * @example
+ * // Basic chip
+ * <Chip label="JavaScript" />
+ *
+ * @example
+ * // Chip with custom variant
+ * <Chip
+ *   label="Active"
+ *   variant="default"
+ *   className="bg-green-500"
+ * />
+ */
 export declare const Chip: ({ label, ...rest }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default Chip;

package/dist/cjs/types/src/components/DataDisplay/Chips/Chips.d.ts

@@ -1,4 +1,20 @@
 import { ReactNode } from 'react';
+/**
+ * Props for individual chip item
+ * @typedef {Object} ChipItem
+ * @property {string | ReactNode} label - Display label for the chip
+ * @property {string | number} value - Unique value identifier for the chip
+ */
+/**
+ * Props for Chips component (multi/single selection)
+ * @typedef {Object} ChipsProps
+ * @property {{ label: string | ReactNode; value: string | number }[]} list - Array of chip items
+ * @property {string[] | string | number} selected - Currently selected value(s)
+ * @property {(selected: string[] | string | number) => void} onSelected - Callback when selection changes
+ * @property {'row' | 'column'} [direction='row'] - Layout direction for chips
+ * @property {boolean} [singleSelection=true] - Enable single or multiple selection
+ * @property {boolean} [toggle=false] - Allow toggling selection off
+ */
 interface ChipsProps {
     list: {
         label: string | ReactNode;
@@ -10,5 +26,44 @@ interface ChipsProps {
     singleSelection?: boolean;
     toggle?: boolean;
 }
+/**
+ * Chips component for single or multi-select chip groups
+ * Renders interactive chips with toggle/selection capabilities
+ *
+ * @component
+ * @param {ChipsProps} props - Chips configuration
+ * @param {{ label: string | ReactNode; value: string | number }[]} props.list - Array of chip options
+ * @param {string[] | string | number} props.selected - Current selected value(s)
+ * @param {(selected: string[] | string | number) => void} props.onSelected - Callback fired when selection changes
+ * @param {'row' | 'column'} [props.direction='row'] - Flex direction for chip layout
+ * @param {boolean} [props.singleSelection=true] - If true, only one chip can be selected at a time
+ * @param {boolean} [props.toggle=false] - If true, clicking selected chip deselects it (only in singleSelection mode)
+ * @returns {JSX.Element} Interactive chip group
+ *
+ * @example
+ * // Single selection chips
+ * <Chips
+ *   list={[
+ *     { label: "Option 1", value: "opt1" },
+ *     { label: "Option 2", value: "opt2" }
+ *   ]}
+ *   selected="opt1"
+ *   onSelected={(value) => setSelected(value)}
+ * />
+ *
+ * @example
+ * // Multi-selection chips with column layout
+ * <Chips
+ *   list={[
+ *     { label: "JavaScript", value: "js" },
+ *     { label: "TypeScript", value: "ts" },
+ *     { label: "Python", value: "py" }
+ *   ]}
+ *   selected={["js", "ts"]}
+ *   onSelected={(values) => setTags(values)}
+ *   singleSelection={false}
+ *   direction="column"
+ * />
+ */
 export declare const Chips: ({ list, selected: _selected, onSelected, direction, singleSelection, toggle, }: ChipsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/DataDisplay/DataTable/DataTable.d.ts

@@ -2,6 +2,39 @@ import { ColumnDef, Row, SortingState } from '@tanstack/react-table';
 import { Axios } from 'axios';
 import React from 'react';
 import { TablePagination, type PaginationProps } from './components/TablePagination';
+/**
+ * Props for the DataTable component
+ * @typedef {Object} DataTableProps
+ * @template TData - Type of data in table rows
+ *
+ * @property {number} [limit] - Number of rows per page for pagination
+ * @property {number} [offset] - Current page offset for pagination
+ * @property {number} [totalCount] - Total number of records in dataset
+ * @property {(page: number) => void} [onPageChange] - Callback when page changes
+ * @property {(limit: number) => void} [onLimitChange] - Callback when page limit changes
+ * @property {ColumnDef<TData, any>[]} columns - Column definitions for the table
+ * @property {TData[]} rows - Array of data rows to display
+ * @property {'standard' | 'compact' | 'comfortable'} [density='standard'] - Row height density
+ * @property {{ [x: string]: boolean }} [columnVisibilityModel] - Column visibility state
+ * @property {boolean} [isLoading=false] - Whether table is loading
+ * @property {boolean} [checkboxSelection=false] - Enable row checkboxes
+ * @property {Record<string, boolean>} [rowSelectionModel={}] - Selected rows state
+ * @property {(newRowSelectionModel: Record<string, boolean>) => void} [onRowSelectionModelChange] - Selection change callback
+ * @property {React.ReactNode[]} [selectionActions] - Actions to show when rows selected
+ * @property {(params: { row: Row<TData> }) => void} [onRowClick] - Row click handler
+ * @property {boolean} [enableSorting=false] - Enable column sorting
+ * @property {SortingState} [sortingState] - Current sorting state
+ * @property {(newSortingState: SortingState) => void} [onSortingChange] - Sorting change callback
+ * @property {boolean} [hideTableActionHeader] - Hide the action header
+ * @property {Object} [tableActionProps] - Table action header configuration
+ * @property {(row: TData, index: number) => React.ReactNode} [card] - Render function for card layout items
+ * @property {string} [className] - CSS class for wrapper
+ * @property {string} [tableClassName] - CSS class for table element
+ * @property {string} [headerClassName] - CSS class for header row
+ * @property {string | ((row: Row<TData>) => string)} [rowClassName] - CSS class for data rows
+ * @property {string} [cellClassName] - CSS class for cells
+ * @property {string} [cardContainerClassName] - CSS class for card container
+ */
 type DataTableProps<TData = any> = {
     limit?: number;
     offset?: number;
@@ -33,7 +66,7 @@ type DataTableProps<TData = any> = {
             axios: Axios;
         };
     };
-    cards: React.ReactNode[];
+    card?: (row: TData, index: number) => React.ReactNode;
     className?: string;
     tableClassName?: string;
     headerClassName?: string;
@@ -41,5 +74,67 @@ type DataTableProps<TData = any> = {
     cellClassName?: string;
     cardContainerClassName?: string;
 };
+/**
+ * DataTable component for displaying tabular data with advanced features
+ * Supports sorting, filtering, pagination, row selection, and card view layout
+ *
+ * @component
+ * @template TData - Type of data in table rows
+ * @param {DataTableProps<TData>} props - DataTable configuration
+ * @param {ColumnDef<TData, any>[]} props.columns - TanStack table column definitions
+ * @param {TData[]} props.rows - Array of data rows
+ * @param {number} [props.limit] - Rows per page (enables pagination)
+ * @param {number} [props.offset] - Page offset
+ * @param {number} [props.totalCount] - Total row count for pagination
+ * @param {(page: number) => void} [props.onPageChange] - Page change handler
+ * @param {(limit: number) => void} [props.onLimitChange] - Page limit change handler
+ * @param {'standard' | 'compact' | 'comfortable'} [props.density='standard'] - Row height
+ * @param {boolean} [props.checkboxSelection] - Show row selection checkboxes
+ * @param {Record<string, boolean>} [props.rowSelectionModel] - Selected rows
+ * @param {(newRowSelectionModel: Record<string, boolean>) => void} [props.onRowSelectionModelChange] - Selection changed callback
+ * @param {React.ReactNode[]} [props.selectionActions] - Actions when rows selected
+ * @param {(params: { row: Row<TData> }) => void} [props.onRowClick] - Row clicked callback
+ * @param {boolean} [props.enableSorting] - Enable column sorting
+ * @param {SortingState} [props.sortingState] - Current sort state
+ * @param {(newSortingState: SortingState) => void} [props.onSortingChange] - Sort changed callback
+ * @param {boolean} [props.isLoading] - Show loading skeletons
+ * @param {boolean} [props.hideTableActionHeader] - Hide action header
+ * @param {Object} [props.tableActionProps] - Table action configuration
+ * @param {(row: TData, index: number) => React.ReactNode} [props.card] - Card render function
+ * @param {string} [props.className] - Wrapper CSS class
+ * @param {string} [props.tableClassName] - Table CSS class
+ * @param {string} [props.headerClassName] - Header CSS class
+ * @param {string | ((row: Row<TData>) => string)} [props.rowClassName] - Row CSS class
+ * @param {string} [props.cellClassName] - Cell CSS class
+ * @param {string} [props.cardContainerClassName] - Card container CSS class
+ * @returns {JSX.Element} Data table with optional pagination, sorting, and selection
+ *
+ * @example
+ * // Basic table
+ * <DataTable
+ *   columns={columns}
+ *   rows={data}
+ *   limit={10}
+ *   offset={0}
+ *   totalCount={100}
+ * />
+ *
+ * @example
+ * // Table with selection and sorting
+ * <DataTable
+ *   columns={columns}
+ *   rows={data}
+ *   checkboxSelection
+ *   rowSelectionModel={selected}
+ *   onRowSelectionModelChange={setSelected}
+ *   enableSorting
+ *   sortingState={sorting}
+ *   onSortingChange={setSorting}
+ *   limit={20}
+ *   offset={page * 20}
+ *   totalCount={total}
+ *   onPageChange={(offset) => setPage(offset / 20)}
+ * />
+ */
 declare const DataTable: <TData extends Record<string, any> = any>(props: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
 export { DataTable, TablePagination, type ColumnDef, type DataTableProps, type PaginationProps, };