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

package/dist/index.d.ts

@@ -44,10 +44,74 @@ interface NoItemFoundProps$1 {
     title?: string;
     description: ReactNode;
 }
+/**
+ * ComingSoon component displays a "Coming Soon" placeholder page.
+ *
+ * This component renders a centered container with an SVG illustration,
+ * a title, and a description message to inform users that a feature or page
+ * is not yet available.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {string} [props.title='Coming Soon'] - The title text to display. Defaults to "Coming Soon"
+ * @param {ReactNode} props.description - The description or message to display below the title
+ * @returns {React.ReactElement} A centered layout with SVG, title, and description
+ *
+ * @example
+ * // Basic usage
+ * <ComingSoon description="This feature will be available soon!" />
+ *
+ * @example
+ * // With custom title
+ * <ComingSoon
+ *   title="New Dashboard"
+ *   description="We're working hard to bring you an improved dashboard experience."
+ * />
+ */
 declare const ComingSoon: ({ title, description, }: NoItemFoundProps$1) => react_jsx_runtime.JSX.Element;
 
+/**
+ * InternalServerError component displays a 500 server error page.
+ *
+ * This component renders a centered error page with an SVG illustration,
+ * error message, and a "Try Again" button that triggers the error boundary reset.
+ * Typically used within an error boundary to handle unexpected server errors.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {Function} props.resetBoundary - Callback function to reset the error boundary and retry the operation
+ * @returns {React.ReactElement} A centered error page with icon, message, and retry button
+ *
+ * @example
+ * // Usage within an error boundary
+ * <InternalServerError resetBoundary={() => window.location.reload()} />
+ *
+ * @example
+ * // Usage with custom reset logic
+ * <InternalServerError resetBoundary={handleRetry} />
+ */
 declare const InternalServerError: ({ resetBoundary }: any) => react_jsx_runtime.JSX.Element;
 
+/**
+ * NoInterneConnection component displays a "No Internet Connection" error page.
+ *
+ * This component renders a centered error page with an SVG illustration,
+ * a message informing the user of a lost internet connection, and a "Try Again" button.
+ * Useful for displaying when the application detects no network connectivity.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {Function} props.resetBoundary - Callback function to retry the connection or operation
+ * @returns {React.ReactElement} A centered offline error page with icon, message, and retry button
+ *
+ * @example
+ * // Display when network connection is lost
+ * <NoInterneConnection resetBoundary={handleRetry} />
+ *
+ * @example
+ * // With navigation reset
+ * <NoInterneConnection resetBoundary={() => window.location.reload()} />
+ */
 declare const NoInterneConnection: ({ resetBoundary }: any) => react_jsx_runtime.JSX.Element;
 
 interface NoItemFoundProps {
@@ -56,16 +120,131 @@ interface NoItemFoundProps {
     height?: string | number;
     width?: string | number;
 }
+/**
+ * NoItemFound component displays a "No Items Found" placeholder page.
+ *
+ * This component renders a centered container with an empty state SVG illustration,
+ * a title, and a description. The SVG size can be customized with height and width props.
+ * Commonly used to indicate when a list, search results, or data collection is empty.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {string} [props.title='No Items Found'] - The title text to display. Defaults to "No Items Found"
+ * @param {ReactNode} props.description - The description or message to display below the title
+ * @param {string | number} [props.height] - The height of the SVG illustration
+ * @param {string | number} [props.width] - The width of the SVG illustration
+ * @returns {React.ReactElement} A centered layout with SVG, title, and description
+ *
+ * @example
+ * // Basic usage
+ * <NoItemFound description="Try adjusting your search criteria." />
+ *
+ * @example
+ * // With custom title and SVG dimensions
+ * <NoItemFound
+ *   title="No Results"
+ *   description="Your search didn't return any results."
+ *   width={200}
+ *   height={200}
+ * />
+ */
 declare const NoItemFound: ({ title, description, height, width, }: NoItemFoundProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * PageNotFound component displays a 404 "Page Not Found" error page.
+ *
+ * This component renders a centered error page with an SVG illustration
+ * and informative messages to indicate that the requested page does not exist.
+ * Typically used as a fallback for invalid or missing routes.
+ *
+ * @component
+ * @returns {React.ReactElement} A centered 404 error page with icon and messages
+ *
+ * @example
+ * // Basic usage in routing
+ * <Route path="*" element={<PageNotFound />} />
+ *
+ * @example
+ * // As a fallback route
+ * <Routes>
+ *   <Route path="/" element={<Home />} />
+ *   <Route path="*" element={<PageNotFound />} />
+ * </Routes>
+ */
 declare const PageNotFound: () => react_jsx_runtime.JSX.Element;
 
+/**
+ * ResourceNotFound component displays a "Resource Not Found" error page.
+ *
+ * This component renders a centered error page with an SVG illustration
+ * and a custom message. Typically used when a specific resource (e.g., user, post, item)
+ * cannot be found in the system.
+ *
+ * @component
+ * @param {any} message - The error message or description to display. Can be any ReactNode type
+ * @returns {React.ReactElement} A centered error page with icon and custom message
+ *
+ * @example
+ * // Basic usage
+ * <ResourceNotFound message="The user profile you're looking for does not exist." />
+ *
+ * @example
+ * // With JSX message
+ * <ResourceNotFound
+ *   message={<span>The requested <strong>item</strong> was not found in the database.</span>}
+ * />
+ */
 declare const ResourceNotFound: (message: any) => react_jsx_runtime.JSX.Element;
 
+/**
+ * UnAuthorized component displays an "Unauthorized Access" error page.
+ *
+ * This component renders a centered error page with an SVG illustration,
+ * a message indicating the user must be logged in, and an optional login component.
+ * Typically used to protect routes that require authentication.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {ReactNode} [props.component] - Optional React element to render below the messages (e.g., a login form or button)
+ * @returns {React.ReactElement} A centered authorization error page with icon, messages, and optional component
+ *
+ * @example
+ * // Basic usage without additional component
+ * <UnAuthorized />
+ *
+ * @example
+ * // With a login button
+ * <UnAuthorized component={<LoginButton />} />
+ *
+ * @example
+ * // With a full login form
+ * <UnAuthorized
+ *   component={
+ *     <form>
+ *       <input type="email" placeholder="Email" />
+ *       <button>Sign In</button>
+ *     </form>
+ *   }
+ * />
+ */
 declare const UnAuthorized: ({ component }: {
     component?: ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 
+/**
+ * IconProps interface defines common properties for icon components.
+ *
+ * Provides a standardized set of props for customizing icon appearance
+ * and behavior across the application.
+ *
+ * @interface IconProps
+ * @property {number} [size] - The size of the icon in pixels
+ * @property {string} [color] - The color of the icon (CSS color value)
+ * @property {boolean} [disabled] - Whether the icon is in a disabled state
+ * @property {string} [hoverColor] - The color of the icon on hover (CSS color value)
+ * @property {string} [backgroundColor] - The background color behind the icon (CSS color value)
+ * @property {Function} [onClick] - Callback function triggered when the icon is clicked
+ */
 interface IconProps {
     size?: number;
     color?: string;
@@ -74,11 +253,51 @@ interface IconProps {
     backgroundColor?: string;
     onClick?: (event: MouseEvent$1<Element>) => void;
 }
+/**
+ * IconComponent type represents a React functional component that accepts IconProps.
+ *
+ * Used as the base type for icon components throughout the application.
+ *
+ * @typedef {FC<IconProps>} IconComponent
+ */
 type IconComponent = FC<IconProps>;
+/**
+ * IconsType interface defines the shape of the Icons object.
+ *
+ * Maps icon names to their corresponding component implementations.
+ *
+ * @interface IconsType
+ * @property {IconComponent} CampxFullLogoIcon - The full Campx logo with text icon component
+ * @property {IconComponent} CampxIcon - The Campx logo mark icon component
+ */
 type IconsType = {
     CampxFullLogoIcon: IconComponent;
     CampxIcon: IconComponent;
 };
+/**
+ * Icons object exports all available icon components.
+ *
+ * Provides a centralized registry of all icon components used throughout the application.
+ * Each icon can be accessed as a property of this object and used as a React component.
+ *
+ * @constant
+ * @type {IconsType}
+ *
+ * @example
+ * // Use individual icons
+ * <Icons.CampxIcon size={24} />
+ * <Icons.CampxFullLogoIcon />
+ *
+ * @example
+ * // Use in a component
+ * const MyComponent = () => {
+ *   return (
+ *     <div>
+ *       <Icons.CampxIcon size={32} color="#E43341" />
+ *     </div>
+ *   );
+ * };
+ */
 declare const Icons: IconsType;
 
 declare const THEMES: {
@@ -148,9 +367,46 @@ type LegendProps = {
     className?: string;
 };
 
+/**
+ * Data object for HorizontalBarChart
+ * @typedef {Object} HorizontalBarChartData
+ * @property {string|number} [key] - Dynamic data properties
+ */
 interface HorizontalBarChartData {
     [key: string]: string | number;
 }
+/**
+ * Props for the HorizontalBarChart component
+ * @typedef {Object} HorizontalBarChartProps
+ * @property {HorizontalBarChartData[]} data - Array of data objects to display
+ * @property {string[]} dataKeys - Array of keys from data objects to visualize as bars
+ * @property {string} xAxisKey - The key to use for Y-axis (category) labels
+ * @property {ChartConfig} config - Chart configuration with color mappings for data keys
+ * @property {number} [height] - Chart height in pixels (auto-calculated if not provided)
+ * @property {MarginProps} [margin={top: 20, right: 30, bottom: 20, left: -20}] - Chart margins
+ * @property {number} [barSize=32] - Height of each bar in pixels
+ * @property {number|number[]} [radius=5] - Border radius for bars (single value or [top-left, top-right, bottom-right, bottom-left])
+ * @property {string} [stackId] - ID for stacking multiple bars together
+ * @property {boolean} [hideXAxis=false] - Whether to hide the X-axis
+ * @property {number} [yAxisWidth=100] - Width allocated for Y-axis labels
+ * @property {Function} [yAxisTickFormatter] - Function to format Y-axis tick labels
+ * @property {Function} [xAxisTickFormatter] - Function to format X-axis tick labels
+ * @property {boolean} [showTooltip=true] - Whether to show tooltip on hover
+ * @property {boolean|object} [tooltipCursor=false] - Tooltip cursor appearance
+ * @property {boolean} [hideTooltipLabel=true] - Whether to hide the label in tooltip
+ * @property {'line'|'dot'|'dashed'} [tooltipIndicator='line'] - Tooltip indicator style
+ * @property {LegendProps} [legend] - Legend configuration props
+ * @property {boolean} [showLegend=false] - Whether to display the legend
+ * @property {string} [title] - Chart title text
+ * @property {TitleProps} [titleProps={variant: 'h3', className: ''}] - Title styling props
+ * @property {string} [subtitle] - Chart subtitle text
+ * @property {SubTitleProps} [subtitleProps={variant: 'muted', className: ''}] - Subtitle styling props
+ * @property {string} [className] - CSS class for the container
+ * @property {Function} [onBarClick] - Callback function when a bar is clicked
+ * @property {number} [animationDuration=750] - Duration of animations in milliseconds
+ * @property {'ease'|'ease-in'|'ease-out'|'ease-in-out'|'linear'} [animationEasing='ease-in-out'] - Easing function for animations
+ * @property {boolean} [accessibilityLayer=true] - Enable accessibility features
+ */
 interface HorizontalBarChartProps {
     data: HorizontalBarChartData[];
     dataKeys: string[];
@@ -181,11 +437,111 @@ interface HorizontalBarChartProps {
     animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
     accessibilityLayer?: boolean;
 }
+/**
+ * HorizontalBarChart Component
+ * Displays data as horizontal bars with full customization support for axes, tooltips, legends, and animations.
+ * The chart dynamically calculates height based on data length if height is not provided.
+ *
+ * @component
+ * @param {HorizontalBarChartProps} props - The component props
+ * @param {HorizontalBarChartData[]} props.data - Array of data objects to display
+ * @param {string[]} props.dataKeys - Keys from data objects to visualize
+ * @param {string} props.xAxisKey - The key for Y-axis category labels
+ * @param {ChartConfig} props.config - Chart color and display configuration
+ * @param {number} [props.height] - Chart height; auto-calculated if not provided
+ * @param {MarginProps} [props.margin] - Chart margin spacing
+ * @param {number} [props.barSize] - Height of each bar in pixels
+ * @param {number|number[]} [props.radius] - Border radius for bar corners
+ * @param {string} [props.stackId] - ID for stacked bars
+ * @param {boolean} [props.hideXAxis] - Hide/show the X-axis
+ * @param {number} [props.yAxisWidth] - Width of Y-axis label area
+ * @param {Function} [props.yAxisTickFormatter] - Custom Y-axis label formatter
+ * @param {Function} [props.xAxisTickFormatter] - Custom X-axis label formatter
+ * @param {boolean} [props.showTooltip] - Show/hide tooltip
+ * @param {boolean|object} [props.tooltipCursor] - Tooltip cursor style
+ * @param {boolean} [props.hideTooltipLabel] - Hide/show tooltip label
+ * @param {'line'|'dot'|'dashed'} [props.tooltipIndicator] - Tooltip indicator style
+ * @param {LegendProps} [props.legend] - Legend configuration
+ * @param {boolean} [props.showLegend] - Show/hide legend
+ * @param {string} [props.title] - Chart title
+ * @param {TitleProps} [props.titleProps] - Title styling
+ * @param {string} [props.subtitle] - Chart subtitle
+ * @param {SubTitleProps} [props.subtitleProps] - Subtitle styling
+ * @param {string} [props.className] - Container CSS class
+ * @param {Function} [props.onBarClick] - Click handler callback
+ * @param {number} [props.animationDuration] - Animation duration in ms
+ * @param {'ease'|'ease-in'|'ease-out'|'ease-in-out'|'linear'} [props.animationEasing] - Animation easing
+ * @param {boolean} [props.accessibilityLayer] - Enable accessibility features
+ * @returns {React.ReactElement} Rendered horizontal bar chart
+ *
+ * @example
+ * const data = [
+ *   { category: 'Category A', value: 120 },
+ *   { category: 'Category B', value: 200 }
+ * ];
+ * const config = {
+ *   value: { label: 'Value', color: '#3b82f6' }
+ * };
+ *
+ * return (
+ *   <HorizontalBarChart
+ *     data={data}
+ *     dataKeys={['value']}
+ *     xAxisKey="category"
+ *     config={config}
+ *     title="Sales by Category"
+ *   />
+ * );
+ */
 declare const HorizontalBarChart: React__default.FC<HorizontalBarChartProps>;
 
+/**
+ * Data object for VerticalBarChart
+ * @typedef {Object} VerticalBarChartData
+ * @property {string|number} [key] - Dynamic data properties
+ */
 interface VerticalBarChartData {
     [key: string]: string | number;
 }
+/**
+ * Props for the VerticalBarChart component
+ * @typedef {Object} VerticalBarChartProps
+ * @property {VerticalBarChartData[]} data - Array of data objects to display
+ * @property {string[]} dataKeys - Array of keys from data objects to visualize as bars
+ * @property {string} xAxisKey - The key to use for X-axis (category) labels
+ * @property {ChartConfig} config - Chart configuration with color mappings for data keys
+ * @property {number} [height=400] - Chart height in pixels
+ * @property {MarginProps} [margin={top: 20, right: 30, bottom: 20, left: 30}] - Chart margins
+ * @property {number} [barSize] - Width of each bar in pixels
+ * @property {number} [barGap=4] - Gap between bars in pixels
+ * @property {number|string} [barCategoryGap='10%'] - Gap between bar groups (pixels or percentage)
+ * @property {number|number[]} [radius=4] - Border radius for bars (single value or [top-left, top-right, bottom-right, bottom-left])
+ * @property {string} [stackId] - ID for stacking multiple bars together
+ * @property {boolean} [showGrid=true] - Whether to show the cartesian grid
+ * @property {string|number} [gridStrokeDasharray='3 3'] - Grid line dash pattern
+ * @property {Function} [xAxisTickFormatter] - Function to format X-axis tick labels
+ * @property {Function} [yAxisTickFormatter] - Function to format Y-axis tick labels
+ * @property {boolean} [showLabels=false] - Whether to show value labels on bars
+ * @property {'top'|'bottom'|'left'|'right'|'inside'|'outside'|'insideLeft'|'insideRight'|'insideTop'|'insideBottom'|'center'} [labelPosition='top'] - Position of bar labels
+ * @property {Function} [labelFormatter] - Function to format label values
+ * @property {boolean} [showTooltip=true] - Whether to show tooltip on hover
+ * @property {boolean|object} [tooltipCursor=false] - Tooltip cursor appearance
+ * @property {boolean} [hideTooltipLabel=false] - Whether to hide the label in tooltip
+ * @property {'line'|'dot'|'dashed'} [tooltipIndicator='dashed'] - Tooltip indicator style
+ * @property {LegendProps} [legend] - Legend configuration props
+ * @property {boolean} [showLegend=false] - Whether to display the legend
+ * @property {string} [title] - Chart title text
+ * @property {TitleProps} [titleProps={variant: 'h3', className: ''}] - Title styling props
+ * @property {string} [subtitle] - Chart subtitle text
+ * @property {SubTitleProps} [subtitleProps={variant: 'muted', className: ''}] - Subtitle styling props
+ * @property {string} [className] - CSS class for the container
+ * @property {boolean} [activeBar=false] - Enable/disable active bar highlighting
+ * @property {number} [activeBarIndex] - Index of the initially active bar
+ * @property {Function} [onBarClick] - Callback function when a bar is clicked
+ * @property {number} [animationDuration=750] - Duration of animations in milliseconds
+ * @property {'ease'|'ease-in'|'ease-out'|'ease-in-out'|'linear'} [animationEasing='ease-in-out'] - Easing function for animations
+ * @property {boolean} [accessibilityLayer=true] - Enable accessibility features
+ */
 interface VerticalBarChartProps {
     data: VerticalBarChartData[];
     dataKeys: string[];
@@ -223,15 +579,114 @@ interface VerticalBarChartProps {
     animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
     accessibilityLayer?: boolean;
 }
+/**
+ * VerticalBarChart Component
+ * Displays data as vertical bars with comprehensive customization for grid, labels, tooltips, legends, and animations.
+ * Supports active bar highlighting with state management for user interaction.
+ *
+ * @component
+ * @param {VerticalBarChartProps} props - The component props
+ * @param {VerticalBarChartData[]} props.data - Array of data objects to display
+ * @param {string[]} props.dataKeys - Keys from data objects to visualize as bars
+ * @param {string} props.xAxisKey - The key for X-axis category labels
+ * @param {ChartConfig} props.config - Chart color and display configuration
+ * @param {number} [props.height] - Chart height in pixels
+ * @param {MarginProps} [props.margin] - Chart margin spacing
+ * @param {number} [props.barSize] - Width of each bar in pixels
+ * @param {number} [props.barGap] - Spacing between adjacent bars
+ * @param {number|string} [props.barCategoryGap] - Spacing between bar groups
+ * @param {number|number[]} [props.radius] - Border radius for bar corners
+ * @param {string} [props.stackId] - ID for stacked bars
+ * @param {boolean} [props.showGrid] - Show/hide background grid
+ * @param {string|number} [props.gridStrokeDasharray] - Grid line dash pattern
+ * @param {Function} [props.xAxisTickFormatter] - Custom X-axis label formatter
+ * @param {Function} [props.yAxisTickFormatter] - Custom Y-axis label formatter
+ * @param {boolean} [props.showLabels] - Show/hide value labels on bars
+ * @param {string} [props.labelPosition] - Label position relative to bars
+ * @param {Function} [props.labelFormatter] - Custom label value formatter
+ * @param {boolean} [props.showTooltip] - Show/hide tooltip
+ * @param {boolean|object} [props.tooltipCursor] - Tooltip cursor style
+ * @param {boolean} [props.hideTooltipLabel] - Hide/show tooltip label
+ * @param {'line'|'dot'|'dashed'} [props.tooltipIndicator] - Tooltip indicator style
+ * @param {LegendProps} [props.legend] - Legend configuration
+ * @param {boolean} [props.showLegend] - Show/hide legend
+ * @param {string} [props.title] - Chart title
+ * @param {TitleProps} [props.titleProps] - Title styling
+ * @param {string} [props.subtitle] - Chart subtitle
+ * @param {SubTitleProps} [props.subtitleProps] - Subtitle styling
+ * @param {string} [props.className] - Container CSS class
+ * @param {boolean} [props.activeBar] - Enable active bar highlighting
+ * @param {number} [props.activeBarIndex] - Initial active bar index
+ * @param {Function} [props.onBarClick] - Click handler callback
+ * @param {number} [props.animationDuration] - Animation duration in ms
+ * @param {'ease'|'ease-in'|'ease-out'|'ease-in-out'|'linear'} [props.animationEasing] - Animation easing
+ * @param {boolean} [props.accessibilityLayer] - Enable accessibility features
+ * @returns {React.ReactElement} Rendered vertical bar chart
+ *
+ * @example
+ * const data = [
+ *   { month: 'Jan', sales: 400, revenue: 2400 },
+ *   { month: 'Feb', sales: 300, revenue: 1398 }
+ * ];
+ * const config = {
+ *   sales: { label: 'Sales', color: '#3b82f6' },
+ *   revenue: { label: 'Revenue', color: '#10b981' }
+ * };
+ *
+ * return (
+ *   <VerticalBarChart
+ *     data={data}
+ *     dataKeys={['sales', 'revenue']}
+ *     xAxisKey="month"
+ *     config={config}
+ *     title="Monthly Sales & Revenue"
+ *     showLabels={true}
+ *     activeBar={true}
+ *   />
+ * );
+ */
 declare const VerticalBarChart: React__default.FC<VerticalBarChartProps>;
 
 type BarChartVariant = 'vertical' | 'horizontal';
 type BarChartData = HorizontalBarChartData | VerticalBarChartData;
+/**
+ * Props for the BarChart component
+ * Combines props from both VerticalBarChart and HorizontalBarChart
+ * @typedef {Object} BarChartProps
+ * @property {BarChartData[]} data - Array of data objects to display in the chart
+ * @property {BarChartVariant} [variant='vertical'] - Orientation of the bars ('vertical' or 'horizontal')
+ */
 interface BarChartProps extends Omit<VerticalBarChartProps, 'data'>, Omit<HorizontalBarChartProps, 'data' | keyof VerticalBarChartProps> {
     data: BarChartData[];
     variant?: BarChartVariant;
 }
 
+/**
+ * Props for the LineChart component
+ * @typedef {Object} LineChartProps
+ * @property {string} [title='Line 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 {ChartConfig} config - Chart configuration with color mappings for data keys
+ * @property {number} [width=700] - Chart width in pixels
+ * @property {number} [height=500] - Chart height in pixels
+ * @property {string} dataKey - The key in data objects to use for X-axis values
+ * @property {any[]} data - Array of data objects to display
+ * @property {LineItem[]} lines - Array of line configurations with curve types and colors
+ * @property {boolean} [showToolTip=true] - Whether to show tooltip on hover
+ * @property {boolean} [showLegend=true] - Whether to display the legend
+ * @property {CartesianGridProps} [cartesianGrid={showCartesianGrid: false}] - Grid configuration
+ * @property {AxisLabelProps} [axisLabelProps] - X and Y axis label configuration
+ * @property {BaseAxisProps} [baseAxisProps] - Base axis customization props
+ * @property {LegendProps} [legendSx] - Legend styling props
+ * @property {string} [className] - CSS class for the container
+ * @property {MarginProps} [margin={top: 20, right: 30, bottom: 20, left: 30}] - Chart margins
+ * @property {boolean} [hideTooltipLabel=false] - Whether to hide the label in tooltip
+ * @property {'line'|'dot'|'dashed'} [tooltipIndicator='line'] - Tooltip indicator style
+ * @property {boolean} [accessibilityLayer=true] - Enable accessibility features
+ */
 type LineChartProps = {
     title?: string;
     showSubtitle?: boolean;
@@ -256,14 +711,97 @@ type LineChartProps = {
     tooltipIndicator?: 'line' | 'dot' | 'dashed';
     accessibilityLayer?: boolean;
 };
+/**
+ * Configuration for a single line in the LineChart
+ * @typedef {Object} LineItem
+ * @property {CurveType} type - Curve type for the line ('linear', 'monotone', 'natural', 'step', 'stepBefore', 'stepAfter', 'basisOpen', 'basis', 'basisClosed')
+ * @property {string} dataKey - The key in data objects to use for Y-axis values
+ * @property {string} stroke - Line color (CSS color value)
+ * @property {any} [activeDot] - Configuration for the active dot on hover
+ */
 type LineItem = {
     type: CurveType;
     dataKey: string;
     stroke: string;
     activeDot?: any;
 };
+/**
+ * LineChart Component
+ * Displays one or more lines with customizable curve types, colors, and interactive features.
+ * Supports grid, tooltips, legends, and labeled axes.
+ *
+ * @component
+ * @param {LineChartProps} 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 {ChartConfig} props.config - Chart color configuration
+ * @param {number} [props.width] - Chart width in pixels
+ * @param {number} [props.height] - Chart height in pixels
+ * @param {string} props.dataKey - X-axis data key
+ * @param {any[]} props.data - Chart data array
+ * @param {LineItem[]} props.lines - Line configurations
+ * @param {boolean} [props.showToolTip] - Show/hide tooltip
+ * @param {boolean} [props.showLegend] - Show/hide legend
+ * @param {CartesianGridProps} [props.cartesianGrid] - Grid settings
+ * @param {AxisLabelProps} [props.axisLabelProps] - Axis labels
+ * @param {BaseAxisProps} [props.baseAxisProps] - Axis customization
+ * @param {LegendProps} [props.legendSx] - Legend styling
+ * @param {string} [props.className] - Container CSS class
+ * @param {MarginProps} [props.margin] - Chart margins
+ * @param {boolean} [props.hideTooltipLabel] - Hide tooltip label
+ * @param {'line'|'dot'|'dashed'} [props.tooltipIndicator] - Tooltip indicator style
+ * @param {boolean} [props.accessibilityLayer] - Enable accessibility features
+ * @returns {React.ReactElement} Rendered line chart
+ *
+ * @example
+ * const data = [
+ *   { month: 'Jan', sales: 400, revenue: 2400 },
+ *   { month: 'Feb', sales: 300, revenue: 1398 }
+ * ];
+ * const config = {
+ *   sales: { label: 'Sales', color: '#3b82f6' },
+ *   revenue: { label: 'Revenue', color: '#10b981' }
+ * };
+ * const lines = [
+ *   { dataKey: 'sales', stroke: '#3b82f6', type: 'monotone' },
+ *   { dataKey: 'revenue', stroke: '#10b981', type: 'monotone' }
+ * ];
+ *
+ * return (
+ *   <LineChart
+ *     data={data}
+ *     dataKey="month"
+ *     lines={lines}
+ *     config={config}
+ *     title="Sales & Revenue Trend"
+ *   />
+ * );
+ */
 declare const LineChart: ({ title, showSubtitle, subTitle, subTitleProps, titleProps, config, width, height, margin, dataKey, data, lines, showToolTip, showLegend, cartesianGrid, axisLabelProps, baseAxisProps, legendSx, className, hideTooltipLabel, tooltipIndicator, accessibilityLayer, }: LineChartProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * 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
+ */
 type PieChartProps = {
     title?: string;
     showSubtitle?: boolean;
@@ -282,6 +820,22 @@ 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;
@@ -296,8 +850,81 @@ 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}
+ *   />
+ * );
+ */
 declare const PieChart: ({ title, showSubtitle, subTitle, subTitleProps, titleProps, margin, width, height, showToolTip, showLegend, legendSx, pie1, pie2, className, config, hideTooltipLabel, }: PieChartProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * 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
+ */
 interface TreeMapProps {
     data: any;
     dataKey: string | number;
@@ -320,6 +947,16 @@ interface TreeMapProps {
     animationEasing?: AnimationTiming;
 }
 
+/**
+ * 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
+ */
 type AccordionItemProps = {
     title: ReactNode;
     content: ReactNode;
@@ -328,21 +965,93 @@ 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"
+ * />
+ */
 declare const Accordion: ({ data, className, defaultExpandedIndex, errorField, }: AccordionProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Type for activity action
+ * @typedef {'create' | 'update' | 'delete'} ActivityAction
+ */
 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
+ */
 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;
@@ -357,8 +1066,68 @@ 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
+ * />
+ */
 declare const ActivityLogView: ({ activitiesData, isFetchingNextPage, fetchNextPage, hasNextPage, fromDate, toDate, setFromDate, setToDate, isLoading, hideLogFilter, className, title, }: ActivityLogProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * 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
+ */
 type CircularAvatarProps = {
     text: string;
     src?: string;
@@ -367,6 +1136,36 @@ 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"
+ * />
+ */
 declare const CircularAvatar: ({ text, src, alt, className, fallbackClassName, onClick, }: CircularAvatarProps) => react_jsx_runtime.JSX.Element;
 
 declare function Card$1({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
@@ -443,11 +1242,55 @@ declare function Badge({ className, variant, asChild, ...props }: React$1.Compon
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for Chip component
+ * @typedef {Object} ChipProps
+ * @property {string} label - The text content displayed in the chip
+ * @extends {React.ComponentPropsWithoutRef<typeof Badge>}
+ */
 interface ChipProps extends React$1.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"
+ * />
+ */
 declare const Chip: ({ label, ...rest }: ChipProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * 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;
@@ -459,8 +1302,57 @@ 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"
+ * />
+ */
 declare const Chips: ({ list, selected: _selected, onSelected, direction, singleSelection, toggle, }: ChipsProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for TablePagination component
+ * @typedef {Object} PaginationProps
+ * @property {number} limit - Number of rows per page
+ * @property {number} offset - Current page offset (0-indexed)
+ * @property {number} totalCount - Total number of records
+ * @property {(offset: number) => void} onPageChange - Callback when page changes
+ * @property {(limit: number) => void} onLimitChange - Callback when page limit changes
+ * @property {number} rowCount - Number of rows in current page
+ */
 type PaginationProps = {
     limit: number;
     offset: number;
@@ -469,8 +1361,66 @@ type PaginationProps = {
     onLimitChange: (limit: number) => void;
     rowCount: number;
 };
+/**
+ * TablePagination component for controlling data table pagination
+ * Displays page numbers, navigation arrows, row count, and page limit selector
+ *
+ * @component
+ * @param {PaginationProps} props - Pagination configuration
+ * @param {number} props.limit - Rows per page
+ * @param {number} props.offset - Current page offset
+ * @param {number} props.totalCount - Total records in dataset
+ * @param {(offset: number) => void} props.onPageChange - Handler for page navigation
+ * @param {(limit: number) => void} props.onLimitChange - Handler for limit changes
+ * @param {number} props.rowCount - Current page row count
+ * @returns {JSX.Element} Pagination controls with page selector and limit dropdown
+ *
+ * @example
+ * // Pagination with 20 rows per page
+ * <TablePagination
+ *   limit={20}
+ *   offset={0}
+ *   totalCount={150}
+ *   rowCount={20}
+ *   onPageChange={(offset) => setOffset(offset)}
+ *   onLimitChange={(limit) => setLimit(limit)}
+ * />
+ */
 declare const TablePagination: (props: PaginationProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * 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 {React.ReactNode[]} cards - Card view items for card layout
+ * @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;
@@ -510,24 +1460,155 @@ 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 {React.ReactNode[]} props.cards - Card view items
+ * @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>) => react_jsx_runtime.JSX.Element;
 
 declare const typographyVariants: (props?: ({
-    variant?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "p" | "small" | "list" | "muted" | "inlineCode" | "lead" | "large" | null | undefined;
+    variant?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "p" | "small" | "list" | "inlineCode" | "lead" | "large" | "muted" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React$1.ElementType;
     children?: React$1.ReactNode;
 }
 
+/**
+ * Typography component wrapper around shadcn Typography
+ * Provides semantic text rendering with predefined variants
+ *
+ * @component
+ * @param {TypographyProps} props - Typography configuration
+ * @param {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'blockquote' | 'code' | 'lead' | 'large' | 'small' | 'muted'} [props.variant='p'] - Predefined typography variant
+ * @param {React.ReactNode} props.children - Content to render with typography styling
+ * @param {...TypographyProps} [props] - Additional typography props (className, etc.)
+ * @returns {JSX.Element} Styled typography element
+ *
+ * @example
+ * // Heading
+ * <Typography variant="h1">Page Title</Typography>
+ *
+ * @example
+ * // Paragraph with custom class
+ * <Typography variant="p" className="text-gray-600">
+ *   This is a paragraph with custom styling
+ * </Typography>
+ *
+ * @example
+ * // Small text
+ * <Typography variant="small">Small disclaimer text</Typography>
+ */
 declare const Typography: ({ variant, children, ...props }: TypographyProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for EmptyIllustration component
+ * @typedef {Object} EmptyIllustrationProps
+ * @property {string} message - Text message displayed below the empty illustration
+ * @property {TypographyProps} [messageProps] - Typography props for styling the message text
+ * @property {string} [containerClassName] - CSS class for the container div
+ */
+/**
+ * EmptyIllustration component for displaying empty state messaging
+ * Shows decorative empty state icon with customizable message
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.message - Text message to display below illustration
+ * @param {TypographyProps} [props.messageProps] - Typography styling props (variant, className, etc.)
+ * @param {string} [props.containerClassName] - Additional CSS classes for the container
+ * @returns {JSX.Element} Empty state illustration with message
+ *
+ * @example
+ * // Basic empty state
+ * <EmptyIllustration message="No data found" />
+ *
+ * @example
+ * // With custom styling
+ * <EmptyIllustration
+ *   message="No search results match your criteria"
+ *   messageProps={{ variant: "p", className: "text-gray-600" }}
+ *   containerClassName="py-12"
+ * />
+ */
 declare const EmptyIllustration: ({ message, messageProps, containerClassName, }: {
     message: string;
     messageProps?: TypographyProps;
     containerClassName?: string;
 }) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Configuration for individual tour step
+ * @typedef {Object} JoyrideStep
+ * @property {string} target - CSS selector for the element to highlight
+ * @property {string | ReactNode} content - Description or content for the step
+ * @property {string} [title] - Title text for the step tooltip
+ * @property {'top' | 'bottom' | 'left' | 'right' | 'center' | 'auto'} [placement='auto'] - Tooltip placement relative to target
+ * @property {boolean} [disableBeacon] - Hide the beacon pulse animation
+ * @property {boolean} [hideCloseButton] - Hide close button in tooltip
+ * @property {boolean} [showProgress] - Display progress indicator
+ * @property {boolean} [showSkipButton] - Show skip button in tooltip
+ * @property {boolean} [spotlightClicks] - Allow clicking inside spotlight area
+ * @property {Record<string, any>} [styles] - Custom styles for tooltip
+ */
 interface JoyrideStep {
     target: string;
     content: string | ReactNode;
@@ -540,6 +1621,56 @@ interface JoyrideStep {
     spotlightClicks?: boolean;
     styles?: Record<string, any>;
 }
+/**
+ * ReactJoyride component for interactive product tours
+ * Provides guided walkthrough of UI elements with customizable steps
+ *
+ * @component
+ * @param {Object} props - Tour configuration
+ * @param {JoyrideStep[]} props.steps - Array of tour steps with targets, content, and placement
+ * @param {ReactNode} [props.children] - Application content to overlay tour on
+ * @param {string} props.tourName - Unique identifier for the tour (for state management)
+ * @returns {JSX.Element} Tour overlay component with tour trigger button
+ *
+ * @example
+ * // Basic product tour
+ * <ReactJoyRide
+ *   tourName="dashboard-tour"
+ *   steps={[
+ *     {
+ *       target: ".logo",
+ *       title: "Welcome",
+ *       content: "Welcome to our dashboard!",
+ *       placement: "bottom"
+ *     },
+ *     {
+ *       target: ".user-menu",
+ *       title: "Profile",
+ *       content: "Access your profile and settings here",
+ *       placement: "left"
+ *     }
+ *   ]}
+ * >
+ *   <Dashboard />
+ * </ReactJoyRide>
+ *
+ * @example
+ * // Advanced tour with custom placement and styling
+ * <ReactJoyRide
+ *   tourName="feature-tour"
+ *   steps={[
+ *     {
+ *       target: ".new-feature",
+ *       title: "New Feature",
+ *       content: "Check out this exciting new feature",
+ *       placement: "right",
+ *       disableBeacon: false
+ *     }
+ *   ]}
+ * >
+ *   <App />
+ * </ReactJoyRide>
+ */
 declare const ReactJoyRide: ({ steps, children, tourName, }: {
     steps: JoyrideStep[];
     children?: ReactNode;
@@ -548,48 +1679,223 @@ declare const ReactJoyRide: ({ steps, children, tourName, }: {
 
 declare function Separator$1({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for Separator component
+ * @typedef {Object} SeparatorProps
+ * @property {'horizontal' | 'vertical'} [orientation='horizontal'] - Direction of the separator
+ * @property {boolean} [decorative=true] - If true, renders as non-semantic element for styling
+ * @property {string} [className] - Optional CSS class for custom styling
+ * @extends {React.ComponentPropsWithoutRef<typeof ShadcnSaperator>}
+ */
 interface SeparatorProps extends React$1.ComponentPropsWithoutRef<typeof Separator$1> {
     orientation?: 'horizontal' | 'vertical';
     decorative?: boolean;
     className?: string;
 }
+/**
+ * Separator component for dividing content sections
+ * Renders semantic or decorative separator line
+ *
+ * @component
+ * @param {SeparatorProps} props - Separator configuration
+ * @param {'horizontal' | 'vertical'} [props.orientation='horizontal'] - Direction of the dividing line
+ * @param {boolean} [props.decorative=true] - Whether separator is decorative (non-semantic)
+ * @param {string} [props.className] - Additional CSS classes for styling
+ * @param {...React.ComponentPropsWithoutRef<typeof ShadcnSaperator>} [props] - Additional separator props
+ * @returns {JSX.Element} Separator line element
+ * @example
+ * // Horizontal separator
+ * <Separator />
+ *
+ * @example
+ * // Vertical separator with custom styling
+ * <Separator
+ *   orientation="vertical"
+ *   className="h-12"
+ * />
+ */
 declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for StatusCard component
+ * @typedef {Object} StatusCardProps
+ * @property {'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink'} color - Color theme for the status card
+ * @property {string} text - Text content to display in the status card
+ * @property {string} [className] - Optional additional CSS classes
+ * @property {TypographyProps['variant']} [typographyVariant='small'] - Typography variant for text styling
+ */
 type StatusCardProps = {
     color: 'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink';
     text: string;
     className?: string;
     typographyVariant?: TypographyProps['variant'];
 };
+/**
+ * StatusCard component for displaying colored status badges
+ * Renders status indicators with color-coded backgrounds and text
+ *
+ * @component
+ * @param {StatusCardProps} props - StatusCard configuration
+ * @param {'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink'} props.color - Status color (determines styling)
+ * @param {string} props.text - Status text to display
+ * @param {string} [props.className] - Additional CSS classes for custom styling
+ * @param {TypographyProps['variant']} [props.typographyVariant='small'] - Typography variant (h1-h6, p, small, etc.)
+ * @returns {JSX.Element} Colored status badge
+ *
+ * @example
+ * // Active status
+ * <StatusCard
+ *   color="green"
+ *   text="Active"
+ * />
+ *
+ * @example
+ * // Error status with custom styling
+ * <StatusCard
+ *   color="red"
+ *   text="Error"
+ *   typographyVariant="p"
+ *   className="font-bold"
+ * />
+ */
 declare const StatusCard: ({ color, text, className, typographyVariant, }: StatusCardProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for individual timeline item
+ * @typedef {Object} TimelineItems
+ * @property {ReactNode} timelineContent - Main content of the timeline item
+ * @property {ReactNode} [timelineOppositeContent] - Optional opposite-side content (for alternate layouts)
+ * @property {'info' | 'success' | 'error' | 'warning'} [variant='info'] - Icon variant for the timeline marker
+ */
 type TimelineItems = {
     timelineContent: ReactNode;
     timelineOppositeContent?: ReactNode;
     variant?: 'info' | 'success' | 'error' | 'warning';
 };
+/**
+ * Props for Timeline component
+ * @typedef {Object} TimelineProps
+ * @property {TimelineItems[]} timelineItems - Array of timeline items to display
+ * @property {'left' | 'right' | 'alternate' | 'alternate-reverse'} [position='right'] - Timeline layout position
+ * @property {string} [className] - Optional CSS class for the timeline container
+ */
 type TimelineProps = {
     timelineItems: TimelineItems[];
     position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
     className?: string;
 };
+/**
+ * Timeline component for displaying chronological events or steps
+ * Supports multiple layout positions and icon variants per item
+ *
+ * @component
+ * @param {TimelineProps} props - Timeline configuration
+ * @param {TimelineItems[]} props.timelineItems - Array of timeline events with content and optional opposite content
+ * @param {'left' | 'right' | 'alternate' | 'alternate-reverse'} [props.position='right'] - Position of timeline connector
+ *   - 'left': All content on left side
+ *   - 'right': All content on right side
+ *   - 'alternate': Content alternates left/right starting with left
+ *   - 'alternate-reverse': Content alternates left/right starting with right
+ * @param {string} [props.className] - Additional CSS classes for the timeline wrapper
+ * @returns {JSX.Element} Timeline visualization with ordered events
+ *
+ * @example
+ * // Basic timeline (content on right)
+ * <Timeline
+ *   position="right"
+ *   timelineItems={[
+ *     { timelineContent: "Project started", variant: "success" },
+ *     { timelineContent: "First milestone", variant: "info" },
+ *     { timelineContent: "Completed", variant: "success" }
+ *   ]}
+ * />
+ *
+ * @example
+ * // Alternating timeline with opposite content
+ * <Timeline
+ *   position="alternate"
+ *   timelineItems={[
+ *     {
+ *       timelineContent: "Development",
+ *       timelineOppositeContent: "Jan 2024",
+ *       variant: "info"
+ *     },
+ *     {
+ *       timelineContent: "Testing",
+ *       timelineOppositeContent: "Feb 2024",
+ *       variant: "warning"
+ *     }
+ *   ]}
+ * />
+ */
 declare const Timeline: ({ timelineItems, position, className, }: TimelineProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the Alert component.
+ * @typedef {Object} AlertProps
+ * @property {string | ReactNode} message - The message content to display in the alert
+ * @property {'success' | 'error' | 'info' | 'warning'} [severity] - The severity level of the alert that determines the icon displayed
+ * @property {'default' | 'destructive'} [variant] - The visual variant of the alert. Defaults to 'destructive' if severity is 'error'
+ * @property {string} [className] - Additional CSS classes to apply to the alert component
+ */
 type AlertProps = {
     message: string | ReactNode;
     severity?: 'success' | 'error' | 'info' | 'warning';
     variant?: 'default' | 'destructive';
     className?: string;
 };
+/**
+ * Alert component that displays a message with an optional severity-based icon.
+ * Renders a styled alert box with appropriate visual indicators based on severity level.
+ *
+ * @param {AlertProps} props - The component props
+ * @param {string | ReactNode} props.message - The message content to display
+ * @param {'success' | 'error' | 'info' | 'warning'} [props.severity] - The severity level determining icon and styling
+ * @param {'default' | 'destructive'} [props.variant] - The visual variant. Overrides default variant selection
+ * @param {string} [props.className] - Additional CSS classes to apply to the alert
+ * @returns {JSX.Element} The rendered alert component
+ *
+ * @example
+ * // Display a success alert
+ * <Alert message="Operation completed successfully" severity="success" />
+ *
+ * @example
+ * // Display an error alert with custom styling
+ * <Alert
+ *   message="An error occurred"
+ *   severity="error"
+ *   className="mt-4"
+ * />
+ */
 declare const Alert: ({ severity, message, variant, className, }: AlertProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Severity levels for snackbar alerts.
+ * @typedef {'success' | 'info' | 'warning' | 'error'} Severity
+ */
 type Severity = 'success' | 'info' | 'warning' | 'error';
+/**
+ * Position configuration for snackbar placement on screen.
+ * @typedef {Object} SnackbarPosition
+ * @property {'top' | 'bottom'} vertical - Vertical alignment of the snackbar
+ * @property {'left' | 'center' | 'right'} horizontal - Horizontal alignment of the snackbar
+ */
 type SnackbarPosition = {
     vertical: 'top' | 'bottom';
     horizontal: 'left' | 'center' | 'right';
 };
+/**
+ * Props for the Snackbar component.
+ * @typedef {Object} SnackbarProps
+ * @property {Severity} severity - The severity level of the snackbar (success, info, warning, error)
+ * @property {string} message - The message text to display in the snackbar
+ * @property {boolean} open - Whether the snackbar is visible
+ * @property {Function} [onClose] - Callback function when snackbar is closed. Called with reason ('timeout' or 'clickaway')
+ * @property {SnackbarPosition} [anchorOrigin] - Position configuration for the snackbar placement. Defaults to {vertical: 'top', horizontal: 'center'}
+ * @property {number} [autoHideDuration] - Duration in milliseconds after which the snackbar auto-closes. If not provided, snackbar stays open until manually closed
+ */
 type SnackbarProps = {
     severity: Severity;
     message: string;
@@ -598,10 +1904,71 @@ type SnackbarProps = {
     anchorOrigin?: SnackbarPosition;
     autoHideDuration?: number;
 };
+/**
+ * Snackbar component for displaying temporary notification messages.
+ * Displays a dismissible notification box with icon and message based on severity.
+ * Auto-hides after specified duration or when close button is clicked.
+ *
+ * @param {SnackbarProps} props - The component props
+ * @param {Severity} props.severity - The severity level of the notification
+ * @param {string} props.message - The message text to display
+ * @param {boolean} props.open - Whether the snackbar is visible
+ * @param {Function} [props.onClose] - Callback when snackbar is closed. Receives close reason as parameter
+ * @param {SnackbarPosition} [props.anchorOrigin] - Position configuration for placement (defaults to top center)
+ * @param {number} [props.autoHideDuration] - Duration in milliseconds before auto-closing (undefined = no auto-close)
+ * @returns {JSX.Element | null} The rendered snackbar component or null if not open
+ *
+ * @example
+ * // Display a success message that auto-hides after 3 seconds
+ * <Snackbar
+ *   severity="success"
+ *   message="Changes saved successfully"
+ *   open={true}
+ *   autoHideDuration={3000}
+ *   onClose={(reason) => console.log('Closed:', reason)}
+ * />
+ *
+ * @example
+ * // Position snackbar at bottom-right
+ * <Snackbar
+ *   severity="info"
+ *   message="New updates available"
+ *   open={isOpen}
+ *   anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+ *   onClose={() => setIsOpen(false)}
+ * />
+ */
 declare const Snackbar: ({ severity, message, open, onClose, anchorOrigin, autoHideDuration, }: SnackbarProps) => react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Spinner component that displays an animated loading indicator.
+ * Renders a dual-colored rotating spinner with smooth continuous animation.
+ * No props required - it's a simple stateless component.
+ *
+ * @returns {JSX.Element} The rendered spinner component
+ *
+ * @example
+ * // Display a loading spinner
+ * <Spinner />
+ *
+ * @example
+ * // Use in a loading state
+ * {isLoading ? <Spinner /> : <div>Content loaded</div>}
+ */
 declare const Spinner: () => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the Tooltip component.
+ * @typedef {Object} TooltipProps
+ * @property {ReactNode} children - The element that triggers the tooltip on hover
+ * @property {ReactNode} title - The tooltip content to display
+ * @property {'top' | 'right' | 'bottom' | 'left'} [placement] - The direction to place the tooltip relative to the trigger element. Defaults to 'right'
+ * @property {boolean} [arrow] - Whether to display an arrow pointing to the trigger element. Currently not implemented in UI
+ * @property {boolean} [open] - Controlled open state of the tooltip
+ * @property {boolean} [defaultOpen] - Initial open state if tooltip is uncontrolled
+ * @property {Function} [onOpenChange] - Callback fired when tooltip open state changes
+ * @property {number} [delayDuration] - Delay in milliseconds before tooltip appears on hover
+ */
 type TooltipProps = {
     children: ReactNode;
     title: ReactNode;
@@ -612,6 +1979,48 @@ type TooltipProps = {
     onOpenChange?: (open: boolean) => void;
     delayDuration?: number;
 };
+/**
+ * Tooltip component that displays contextual information on hover.
+ * Wraps the shadcn tooltip component with enhanced positioning and configuration options.
+ * Supports both controlled and uncontrolled modes for tooltip visibility.
+ *
+ * @param {TooltipProps} props - The component props
+ * @param {ReactNode} props.children - The element that triggers the tooltip
+ * @param {ReactNode} props.title - The tooltip content to display
+ * @param {'top' | 'right' | 'bottom' | 'left'} [props.placement] - Tooltip placement direction (defaults to 'right')
+ * @param {boolean} [props.arrow] - Arrow display option (not currently implemented)
+ * @param {boolean} [props.open] - Controlled open state
+ * @param {boolean} [props.defaultOpen] - Initial open state for uncontrolled mode
+ * @param {Function} [props.onOpenChange] - Callback when open state changes
+ * @param {number} [props.delayDuration] - Delay before showing tooltip in milliseconds
+ * @returns {JSX.Element} The rendered tooltip component
+ *
+ * @example
+ * // Basic tooltip with default placement
+ * <Tooltip title="This is a helpful tip">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // Tooltip positioned at bottom with delay
+ * <Tooltip
+ *   title="Additional information"
+ *   placement="bottom"
+ *   delayDuration={500}
+ * >
+ *   <span>Information icon</span>
+ * </Tooltip>
+ *
+ * @example
+ * // Controlled tooltip state
+ * <Tooltip
+ *   title="Controlled tooltip"
+ *   open={isTooltipOpen}
+ *   onOpenChange={setIsTooltipOpen}
+ * >
+ *   <button>Toggle</button>
+ * </Tooltip>
+ */
 declare const Tooltip: ({ children, title, placement, open, defaultOpen, onOpenChange, delayDuration, }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
@@ -626,6 +2035,32 @@ type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVa
     endIcon?: ReactNode;
     fullWidth?: boolean;
 };
+/**
+ * Button component with enhanced features
+ *
+ * A customizable button component that wraps the shadcn Button with additional
+ * functionality including loading states, icons, and full width options.
+ *
+ * @component
+ * @param {ButtonProps} props - The button properties
+ * @param {boolean} [props.loading=false] - Whether the button is in a loading state
+ * @param {ReactNode} [props.startIcon] - Icon to display at the start of the button
+ * @param {ReactNode} [props.endIcon] - Icon to display at the end of the button
+ * @param {boolean} [props.fullWidth=false] - Whether the button should take full width
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @param {ReactNode} [props.children] - The button content/label
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @param {string} [props.variant] - Button style variant from buttonVariants
+ * @param {string} [props.size] - Button size variant from buttonVariants
+ * @returns {React.ReactElement} The rendered button element
+ *
+ * @example
+ * ```tsx
+ * <Button loading={isLoading} startIcon={<SendIcon />} variant="default">
+ *   Submit
+ * </Button>
+ * ```
+ */
 declare const Button: ({ loading, disabled, children, startIcon, endIcon, fullWidth, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 type DateFormat = 'yyyy' | 'MMMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy';
@@ -661,6 +2096,47 @@ type DatePickerProps = {
     type?: 'input' | 'filter';
     [key: string]: any;
 };
+/**
+ * DatePicker component for date selection
+ *
+ * A flexible date picker component that supports both input and filter modes,
+ * with customizable date formats, restrictions, and shortcuts.
+ *
+ * @component
+ * @param {DatePickerProps} props - The date picker properties
+ * @param {React.ReactNode | string} [props.label] - Label for the date picker
+ * @param {string} [props.name] - Name attribute for the input
+ * @param {Date} [props.value] - Currently selected date
+ * @param {(date: Date | undefined) => void} [props.onChange] - Callback fired when date changes
+ * @param {DateFormat} [props.format='dd/MM/yyyy'] - Date format for display
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {string} [props.helperText] - Helper text below the input
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the picker is disabled
+ * @param {Date} [props.minDate] - Minimum selectable date
+ * @param {Date} [props.maxDate] - Maximum selectable date
+ * @param {boolean} [props.disablePast] - Whether past dates are disabled
+ * @param {boolean} [props.disableFuture] - Whether future dates are disabled
+ * @param {(date: Date) => boolean} [props.shouldDisableDate] - Custom date disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableMonth] - Custom month disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableYear] - Custom year disable logic
+ * @param {boolean} [props.fullWidth] - Whether the picker takes full width
+ * @param {'input' | 'filter'} [props.type='input'] - Display type of the picker
+ * @param {() => void} [props.onOpen] - Callback when picker opens
+ * @param {() => void} [props.onClose] - Callback when picker closes
+ * @returns {React.ReactElement} The rendered date picker component
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   label="Select Date"
+ *   value={date}
+ *   onChange={setDate}
+ *   format="dd/MM/yyyy"
+ *   required
+ * />
+ * ```
+ */
 declare const DatePicker: ({ type, ...props }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 type DateTimePickerViews = 'year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds';
@@ -698,6 +2174,48 @@ type DateTimePickerProps = {
     type?: 'input' | 'filter';
     [key: string]: any;
 };
+/**
+ * DateTimePicker component for date and time selection
+ *
+ * A comprehensive date and time picker component supporting both input and filter modes,
+ * with flexible date/time formats, time unit selection, and date restrictions.
+ *
+ * @component
+ * @param {DateTimePickerProps} props - The date time picker properties
+ * @param {React.ReactNode | string} [props.label] - Label for the picker
+ * @param {string} [props.name] - Name attribute for the input
+ * @param {Date} [props.value] - Currently selected date and time
+ * @param {(date: Date | undefined) => void} [props.onChange] - Callback fired when date/time changes
+ * @param {DateTimeFormat} [props.format] - Date and time format for display
+ * @param {DateTimePickerViews[]} [props.views] - Which time units to display (year, month, day, hours, minutes, seconds)
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {string} [props.helperText] - Helper text below the input
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the picker is disabled
+ * @param {Date} [props.minDate] - Minimum selectable date/time
+ * @param {Date} [props.maxDate] - Maximum selectable date/time
+ * @param {boolean} [props.disablePast] - Whether past dates/times are disabled
+ * @param {boolean} [props.disableFuture] - Whether future dates/times are disabled
+ * @param {(date: Date) => boolean} [props.shouldDisableDate] - Custom date disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableMonth] - Custom month disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableYear] - Custom year disable logic
+ * @param {boolean} [props.fullWidth] - Whether the picker takes full width
+ * @param {'input' | 'filter'} [props.type='input'] - Display type of the picker
+ * @param {() => void} [props.onOpen] - Callback when picker opens
+ * @param {() => void} [props.onClose] - Callback when picker closes
+ * @returns {React.ReactElement} The rendered date time picker component
+ *
+ * @example
+ * ```tsx
+ * <DateTimePicker
+ *   label="Select Date & Time"
+ *   value={dateTime}
+ *   onChange={setDateTime}
+ *   format="dd/MM/yyyy hh:mm a"
+ *   views={['year', 'month', 'day', 'hours', 'minutes']}
+ * />
+ * ```
+ */
 declare const DateTimePicker: ({ type, ...props }: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
 
 type FileUploadProps = {
@@ -720,6 +2238,47 @@ type FileUploadProps = {
     previewClassName?: string;
     required?: boolean;
 };
+/**
+ * FileUpload component for file selection and management
+ *
+ * A comprehensive file upload component with drag-and-drop support, file validation,
+ * preview capabilities, and file management features.
+ *
+ * @component
+ * @param {FileUploadProps} props - The file upload properties
+ * @param {string} props.label - Label text for the upload field
+ * @param {string} props.name - Name attribute for the input element
+ * @param {File[]} [props.files=[]] - Array of currently selected files
+ * @param {(files: File[]) => void} [props.onChange] - Callback fired when files are selected
+ * @param {(index: number) => void} [props.handleRemove] - Callback to remove a file by index
+ * @param {'image/*' | '.pdf' | '.docx' | '.txt' | '*'} [props.accept='*'] - File type filter
+ * @param {(file: File) => void} [props.onInvalidFile] - Callback fired when an invalid file is selected
+ * @param {string} [props.inputText] - Custom text for the upload prompt
+ * @param {boolean} [props.multiple=true] - Whether multiple files can be selected
+ * @param {boolean} [props.disabled=false] - Whether the upload is disabled
+ * @param {boolean} [props.hideDeleteButton=false] - Whether to hide delete buttons on files
+ * @param {boolean} [props.hideInput=false] - Whether to hide the file input area
+ * @param {string} [props.errorText] - Error message to display
+ * @param {string} [props.className] - Additional CSS classes for the upload area
+ * @param {string} [props.containerClassName] - Additional CSS classes for the container
+ * @param {boolean} [props.showImage] - Whether to show image previews instead of file list
+ * @param {string} [props.previewClassName] - Additional CSS classes for previews
+ * @param {boolean} [props.required] - Whether the field is required
+ * @returns {React.ReactElement} The rendered file upload component
+ *
+ * @example
+ * ```tsx
+ * <FileUpload
+ *   label="Upload Documents"
+ *   name="documents"
+ *   files={files}
+ *   onChange={setFiles}
+ *   accept=".pdf,.docx"
+ *   multiple
+ *   required
+ * />
+ * ```
+ */
 declare const FileUpload: ({ label, name, disabled, onChange, handleRemove, files, accept, inputText, onInvalidFile, hideDeleteButton, hideInput, multiple, errorText, showImage, previewClassName, className, containerClassName, required, }: FileUploadProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonConfig extends ButtonProps {
@@ -733,6 +2292,43 @@ interface FormActionsProps {
     className?: string;
     showTopBorder?: boolean;
 }
+/**
+ * FormActions component for form submission and cancellation
+ *
+ * A component that renders submit and cancel buttons with customizable configurations
+ * and visibility options. Typically used at the bottom of forms.
+ *
+ * @component
+ * @param {FormActionsProps} props - The form actions properties
+ * @param {ButtonConfig} [props.submitButtonProps] - Configuration for the submit button
+ * @param {ButtonConfig} [props.submitButtonProps.show=true] - Whether to show the submit button
+ * @param {string} [props.submitButtonProps.title='Submit'] - Submit button label
+ * @param {() => void} [props.submitButtonProps.onClick] - Callback when submit is clicked
+ * @param {ButtonConfig} [props.cancelButtonProps] - Configuration for the cancel button
+ * @param {ButtonConfig} [props.cancelButtonProps.show=true] - Whether to show the cancel button
+ * @param {string} [props.cancelButtonProps.title='Cancel'] - Cancel button label
+ * @param {() => void} [props.cancelButtonProps.onClick] - Callback when cancel is clicked
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @param {boolean} [props.showTopBorder=false] - Whether to show a top border
+ * @returns {React.ReactElement} The rendered form actions component
+ *
+ * @example
+ * ```tsx
+ * <FormActions
+ *   submitButtonProps={{
+ *     title: 'Save Changes',
+ *     onClick: handleSubmit,
+ *     variant: 'default'
+ *   }}
+ *   cancelButtonProps={{
+ *     title: 'Discard',
+ *     onClick: handleCancel,
+ *     variant: 'ghost'
+ *   }}
+ *   showTopBorder
+ * />
+ * ```
+ */
 declare const FormActions: ({ submitButtonProps, cancelButtonProps, className, showTopBorder, }: FormActionsProps) => react_jsx_runtime.JSX.Element;
 
 interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
@@ -742,22 +2338,155 @@ interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
     formActionProps?: FormActionsProps;
     disabled?: boolean;
 }
+/**
+ * FormControlWrapper component for react-hook-form integration
+ *
+ * A wrapper component that integrates react-hook-form's Controller with form elements,
+ * automatically handling field registration, validation, and error display.
+ *
+ * @component
+ * @template T - The form values type from react-hook-form
+ * @param {FormControlWrapperProps<T>} props - The wrapper properties
+ * @param {Control<T>} props.control - React Hook Form control instance from useForm()
+ * @param {ReactNode} props.children - Child form elements to be controlled
+ * @param {string} [props.containerClassName] - Additional CSS classes for the container
+ * @param {FormActionsProps} [props.formActionProps] - Properties for form submit/cancel buttons
+ * @param {boolean} [props.disabled=false] - Whether all controlled fields are disabled
+ * @returns {React.ReactElement} The rendered wrapper with controlled form elements
+ *
+ * @example
+ * ```tsx
+ * const { control, handleSubmit } = useForm();
+ *
+ * <FormControlWrapper
+ *   control={control}
+ *   formActionProps={{
+ *     submitButtonProps: { onClick: handleSubmit(onSubmit) }
+ *   }}
+ * >
+ *   <TextField name="email" label="Email" />
+ *   <PasswordField name="password" label="Password" />
+ * </FormControlWrapper>
+ * ```
+ */
 declare function FormControlWrapper<T extends FieldValues = FieldValues>({ control, children, containerClassName, formActionProps, disabled, }: FormControlWrapperProps<T>): react_jsx_runtime.JSX.Element;
 
 type FormWrapperProps = {
     children: ReactNode;
     className?: string;
 };
+/**
+ * FormWrapper component for layout styling
+ *
+ * A simple wrapper component that provides default styling and spacing for form elements.
+ * Used to maintain consistent form layout and spacing throughout the application.
+ *
+ * @component
+ * @param {FormWrapperProps} props - The wrapper properties
+ * @param {ReactNode} props.children - Child form elements
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @returns {React.ReactElement} The styled form wrapper container
+ *
+ * @example
+ * ```tsx
+ * <FormWrapper>
+ *   <TextField label="Name" name="name" />
+ *   <TextField label="Email" name="email" />
+ * </FormWrapper>
+ * ```
+ */
 declare const FormWrapper: ({ children, className }: FormWrapperProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * DeleteButton component for delete actions
+ *
+ * An icon button with a trash icon for triggering delete/remove actions.
+ * Minimal styling suitable for use in tables and lists.
+ *
+ * @component
+ * @param {ButtonProps} props - Button properties
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The rendered delete button
+ *
+ * @example
+ * ```tsx
+ * <DeleteButton onClick={handleDelete} />
+ * ```
+ */
 declare function DeleteButton({ disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * EditButton component for edit actions
+ *
+ * An icon button with a pencil icon for triggering edit/modify actions.
+ * Minimal styling suitable for use in tables and lists.
+ *
+ * @component
+ * @param {ButtonProps} props - Button properties
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The rendered edit button
+ *
+ * @example
+ * ```tsx
+ * <EditButton onClick={handleEdit} />
+ * ```
+ */
 declare function EditButton({ disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * RedirectButton component for navigation/external link actions
+ *
+ * An icon button with an external link arrow icon for redirecting users
+ * to other pages or external URLs. Minimal styling suitable for use in tables and lists.
+ *
+ * @component
+ * @param {ButtonProps} props - Button properties
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The rendered redirect button
+ *
+ * @example
+ * ```tsx
+ * <RedirectButton onClick={() => window.open(url)} />
+ * ```
+ */
 declare function RedirectButton({ disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * ViewButton component for view/preview actions
+ *
+ * An icon button with an eye icon for triggering view/preview actions.
+ * Minimal styling suitable for use in tables and lists.
+ *
+ * @component
+ * @param {ButtonProps} props - Button properties
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {React.ReactElement} The rendered view button
+ *
+ * @example
+ * ```tsx
+ * <ViewButton onClick={handleView} />
+ * ```
+ */
 declare function ViewButton({ disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * IconButtons object namespace
+ *
+ * A collection of common action icon buttons for use in tables and lists.
+ * All buttons are minimal icon-only buttons with consistent styling.
+ *
+ * @namespace IconButtons
+ * @property {typeof DeleteButton} DeleteButton - Button with trash icon for delete actions
+ * @property {typeof EditButton} EditButton - Button with pencil icon for edit actions
+ * @property {typeof ViewButton} ViewButton - Button with eye icon for view/preview actions
+ * @property {typeof RedirectButton} RedirectButton - Button with external link icon for navigation
+ *
+ * @example
+ * ```tsx
+ * <IconButtons.DeleteButton onClick={handleDelete} />
+ * <IconButtons.EditButton onClick={handleEdit} />
+ * ```
+ */
 declare const IconButtons: {
     DeleteButton: typeof DeleteButton;
     EditButton: typeof EditButton;
@@ -772,6 +2501,32 @@ interface LabelWrapperProps {
     children: ReactNode;
     containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
+/**
+ * LabelWrapper component for form field labeling
+ *
+ * A wrapper component that provides consistent label styling and required field indicators.
+ * Automatically handles string labels and custom label elements.
+ *
+ * @component
+ * @param {LabelWrapperProps} props - The wrapper properties
+ * @param {boolean} props.required - Whether the field is required (adds asterisk indicator)
+ * @param {string} [props.name] - Name attribute for the associated label
+ * @param {ReactNode | string} [props.label] - The label text or element
+ * @param {ReactNode} props.children - The form element to be labeled
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Additional container attributes
+ * @returns {React.ReactElement} The label and children wrapped in a container
+ *
+ * @example
+ * ```tsx
+ * <LabelWrapper
+ *   label="Email Address"
+ *   name="email"
+ *   required
+ * >
+ *   <Input type="email" />
+ * </LabelWrapper>
+ * ```
+ */
 declare const LabelWrapper: ({ required, name, children, containerProps, label, }: LabelWrapperProps) => react_jsx_runtime.JSX.Element;
 
 type MultiCheckboxProps = {
@@ -788,6 +2543,40 @@ type MultiCheckboxProps = {
     name: string;
     className?: string;
 };
+/**
+ * MultiCheckBox component for multi-value checkbox selection
+ *
+ * A component that renders multiple checkboxes in a row or column layout,
+ * allowing users to select multiple values from a set of options.
+ *
+ * @component
+ * @param {MultiCheckboxProps} props - The checkbox group properties
+ * @param {string} props.label - Group label text
+ * @param {Array<{label: ReactNode, value: any}>} props.options - Available checkbox options
+ * @param {any[]} props.values - Currently selected values
+ * @param {(values: any[]) => void} props.onChange - Callback when selection changes
+ * @param {string} props.name - Name attribute for the checkbox group
+ * @param {boolean} props.required - Whether the field is required
+ * @param {'row' | 'column'} [props.direction='column'] - Layout direction for checkboxes
+ * @param {string} [props.className] - Additional CSS classes for the options container
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Additional container attributes
+ * @returns {React.ReactElement} The rendered checkbox group
+ *
+ * @example
+ * ```tsx
+ * <MultiCheckBox
+ *   label="Select Features"
+ *   name="features"
+ *   values={selectedFeatures}
+ *   onChange={setSelectedFeatures}
+ *   required
+ *   options={[
+ *     { label: 'Feature A', value: 'a' },
+ *     { label: 'Feature B', value: 'b' }
+ *   ]}
+ * />
+ * ```
+ */
 declare const MultiCheckBox: ({ name, options, required, containerProps, label, direction, values, onChange, className, ...rest }: MultiCheckboxProps) => react_jsx_runtime.JSX.Element;
 
 type MultiSelectProps = {
@@ -828,6 +2617,46 @@ type MultiSelectProps = {
     disabled?: boolean;
     loading?: boolean;
 };
+/**
+ * MultiSelect component for multi-value selection
+ *
+ * A feature-rich multi-select component supporting both local and API-driven options,
+ * with search, pagination, filtering, and flexible display modes.
+ *
+ * @component
+ * @param {MultiSelectProps} props - The select properties
+ * @param {Array<{label: string, subLabel?: string, value: any, icon?: ReactNode}>} [props.options] - Static options array
+ * @param {string} [props.optionsApiEndPoint] - API endpoint for dynamic options loading
+ * @param {any} [props.optionsApiEndpointParams] - Additional parameters for API requests
+ * @param {AxiosInstance} [props.externalAxios] - Custom axios instance for API calls
+ * @param {any[]} [props.value] - Currently selected values
+ * @param {(values: any[]) => void} [props.onChange] - Callback fired when selection changes
+ * @param {(option: any) => any} [props.getValue] - Function to extract value from option object
+ * @param {{valueKey: string, isObjectId?: boolean, isInt?: boolean, isFloat?: boolean}} [props.dbValueProps] - Database value mapping properties
+ * @param {{labelKey: string, subLabelKey?: string, useLabelStartCase?: boolean, useSubLabelStartCase?: boolean}} [props.dbLabelProps] - Database label mapping properties
+ * @param {string} [props.label] - Label for the select
+ * @param {string} [props.name] - Name attribute
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the select is disabled
+ * @param {boolean} [props.loading] - Whether options are loading
+ * @param {boolean} [props.disableClear] - Whether to hide the clear button
+ * @param {boolean} [props.fullWidth] - Whether the select takes full width
+ * @param {'input' | 'filter'} [props.type='input'] - Display type
+ * @param {(event: SyntheticEvent) => void} [props.onOpen] - Callback when menu opens
+ * @param {(event: SyntheticEvent, reason: string) => void} [props.onClose] - Callback when menu closes
+ * @returns {React.ReactElement} The rendered multi-select component
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   label="Select Users"
+ *   value={selectedUsers}
+ *   onChange={setSelectedUsers}
+ *   options={users}
+ *   required
+ * />
+ * ```
+ */
 declare const MultiSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: MultiSelectProps) => react_jsx_runtime.JSX.Element;
 
 interface OtpInputProps {
@@ -841,6 +2670,35 @@ interface OtpInputProps {
     error?: boolean;
     helperText?: string;
 }
+/**
+ * OtpInput component for one-time password entry
+ *
+ * A component that renders a sequence of single-digit input fields for OTP entry,
+ * with auto-focus, paste support, and keyboard navigation.
+ *
+ * @component
+ * @param {OtpInputProps} props - The OTP input properties
+ * @param {number} props.length - Number of OTP digits
+ * @param {(otp: string) => void} props.onChangeOtp - Callback fired when OTP changes
+ * @param {string} [props.label] - Optional label for the OTP input group
+ * @param {string} [props.name] - Name attribute for the inputs
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.error=false] - Whether there's a validation error
+ * @param {string} [props.helperText] - Helper or error text to display
+ * @param {string} [props.containerClassName] - Additional CSS classes for the input container
+ * @param {string} [props.inputClassName] - Additional CSS classes for individual inputs
+ * @returns {React.ReactElement} The rendered OTP input component
+ *
+ * @example
+ * ```tsx
+ * <OtpInput
+ *   length={6}
+ *   onChangeOtp={setOtp}
+ *   label="Enter Verification Code"
+ *   required
+ * />
+ * ```
+ */
 declare const OtpInput: ({ length, onChangeOtp, containerClassName, inputClassName, label, name, required, error, helperText, }: OtpInputProps) => react_jsx_runtime.JSX.Element;
 
 type PasswordFieldProps = {
@@ -858,6 +2716,40 @@ type PasswordFieldProps = {
     className?: string;
     fullWidth?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+/**
+ * PasswordField component for password input
+ *
+ * A text input field specialized for password entry with visibility toggle,
+ * error states, and helper text support.
+ *
+ * @component
+ * @param {PasswordFieldProps} props - The password field properties
+ * @param {string} [props.label] - Label for the field
+ * @param {string} [props.name] - Name attribute for the input
+ * @param {string} [props.value] - Current input value
+ * @param {(e: React.ChangeEvent<HTMLInputElement>) => void} [props.onChange] - Callback when value changes
+ * @param {string} [props.placeholder='Enter password'] - Placeholder text
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the field is disabled
+ * @param {boolean} [props.error] - Whether there's a validation error
+ * @param {string} [props.helperText] - Helper or error text
+ * @param {string} [props.description] - Additional description text
+ * @param {boolean} [props.fullWidth] - Whether the field takes full width
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Container attributes
+ * @returns {React.ReactElement} The rendered password field component
+ *
+ * @example
+ * ```tsx
+ * <PasswordField
+ *   label="Password"
+ *   name="password"
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ *   required
+ * />
+ * ```
+ */
 declare const PasswordField: ({ name, label, value, onChange, required, containerProps, description, placeholder, disabled, error, helperText, className, fullWidth, ...rest }: PasswordFieldProps) => react_jsx_runtime.JSX.Element;
 
 type RadioGroupProps = {
@@ -880,6 +2772,44 @@ type RadioGroupProps = {
     error?: boolean;
     helperText?: ReactNode;
 };
+/**
+ * RadioGroup component for exclusive single-value selection
+ *
+ * A component that renders a group of radio buttons allowing users to select
+ * exactly one value from a set of options, with row or column layout.
+ *
+ * @component
+ * @param {RadioGroupProps} props - The radio group properties
+ * @param {string} props.name - Name attribute for the radio group
+ * @param {Array<{label: ReactNode, value: any, disabled?: boolean}>} props.options - Available radio options
+ * @param {string} [props.label] - Group label text
+ * @param {any} [props.value] - Currently selected value (controlled)
+ * @param {any} [props.defaultValue] - Default selected value (uncontrolled)
+ * @param {(value: any) => void} [props.onChange] - Callback when selection changes
+ * @param {(value: string) => void} [props.onValueChange] - Alternative callback when selection changes
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether all options are disabled
+ * @param {'row' | 'column'} [props.direction='column'] - Layout direction for radio buttons
+ * @param {boolean} [props.error] - Whether there's a validation error
+ * @param {ReactNode} [props.helperText] - Helper or error text
+ * @param {string} [props.className] - Additional CSS classes for the radio container
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Container attributes
+ * @returns {React.ReactElement} The rendered radio group component
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   name="status"
+ *   label="Select Status"
+ *   value={status}
+ *   onChange={setStatus}
+ *   options={[
+ *     { label: 'Active', value: 'active' },
+ *     { label: 'Inactive', value: 'inactive' }
+ *   ]}
+ * />
+ * ```
+ */
 declare const RadioGroup: ({ label, required, options, name, containerProps, disabled, onChange, onValueChange, direction, className, error, helperText, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
 
 type SearchBarProps = {
@@ -891,6 +2821,32 @@ type SearchBarProps = {
     containerClassName?: string;
     inputClassName?: string;
 } & Omit<React.ComponentProps<'input'>, 'onChange' | 'value'>;
+/**
+ * SearchBar component for search input
+ *
+ * A search input component with built-in debouncing for efficient search operations,
+ * featuring a search icon and customizable styling.
+ *
+ * @component
+ * @param {SearchBarProps} props - The search bar properties
+ * @param {string} [props.placeholder='Search by Name'] - Placeholder text
+ * @param {string | ReactNode} [props.label] - Optional label above the search input
+ * @param {string} [props.value=''] - Current search value
+ * @param {(value: string) => void} [props.onSearch] - Callback fired when search value changes (debounced)
+ * @param {string} [props.className] - Additional CSS classes for the input wrapper
+ * @param {string} [props.containerClassName] - Additional CSS classes for the container
+ * @param {string} [props.inputClassName] - Additional CSS classes for the input element
+ * @returns {React.ReactElement} The rendered search bar component
+ *
+ * @example
+ * ```tsx
+ * <SearchBar
+ *   label="Search Users"
+ *   placeholder="Enter username..."
+ *   onSearch={handleSearch}
+ * />
+ * ```
+ */
 declare const SearchBar: ({ placeholder, label, value, onSearch, className, containerClassName, inputClassName, ...rest }: SearchBarProps) => react_jsx_runtime.JSX.Element;
 
 type SelectProps = {
@@ -908,6 +2864,38 @@ type SelectProps = {
     fullWidth?: boolean;
     loading?: boolean;
 };
+/**
+ * Select component for single-value selection
+ *
+ * A select dropdown component with support for colors, loading states, and flexible sizing.
+ * Built on shadcn's Select component with additional enhancements.
+ *
+ * @component
+ * @param {SelectProps} props - The select properties
+ * @param {Array<{label: React.ReactNode, value: string | number, color?: string}>} props.options - Available select options
+ * @param {(value: string) => void} [props.onChange] - Callback fired when selection changes
+ * @param {string | number} [props.value] - Currently selected value (controlled)
+ * @param {string | number} [props.defaultValue] - Default selected value (uncontrolled)
+ * @param {string} [props.placeholder='Select an option...'] - Placeholder text when no value selected
+ * @param {boolean} [props.disabled] - Whether the select is disabled
+ * @param {boolean} [props.loading] - Whether options are loading
+ * @param {boolean} [props.fullWidth] - Whether the select takes full width
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {React.ReactElement} The rendered select component
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[
+ *     { label: 'Option 1', value: 'opt1', color: 'blue' },
+ *     { label: 'Option 2', value: 'opt2', color: 'green' }
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Choose an option"
+ * />
+ * ```
+ */
 declare const Select: ({ options, onChange, value, placeholder, className, defaultValue, disabled, fullWidth, loading, }: SelectProps) => react_jsx_runtime.JSX.Element;
 
 type CheckboxProps = {
@@ -921,6 +2909,35 @@ type CheckboxProps = {
     disabled?: boolean;
     name?: string;
 } & Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'checked' | 'onChange' | 'onCheckedChange'>;
+/**
+ * SingleCheckBox component for single checkbox selection
+ *
+ * A checkbox component with label support, validation states, and required field indicators.
+ * Built on Radix UI's checkbox primitive.
+ *
+ * @component
+ * @param {CheckboxProps} props - The checkbox properties
+ * @param {ReactNode} props.label - Label text for the checkbox
+ * @param {boolean} [props.checked] - Whether the checkbox is checked (controlled)
+ * @param {(checked: boolean) => void} [props.onChange] - Callback when checked state changes
+ * @param {string} [props.name] - Name attribute for the checkbox
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the checkbox is disabled
+ * @param {string} [props.className] - Additional CSS classes for the checkbox
+ * @param {string} [props.labelClassName] - Additional CSS classes for the label
+ * @param {string} [props.containerClassName='flex items-center space-x-2'] - Additional CSS classes for the container
+ * @returns {React.ReactElement} The rendered checkbox component
+ *
+ * @example
+ * ```tsx
+ * <SingleCheckBox
+ *   label="I agree to the terms"
+ *   checked={agreed}
+ *   onChange={setAgreed}
+ *   required
+ * />
+ * ```
+ */
 declare const SingleCheckBox: ({ checked, label, onChange, required, className, labelClassName, containerClassName, disabled, name, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
 
 type SingleSelectProps = {
@@ -961,6 +2978,46 @@ type SingleSelectProps = {
     disabled?: boolean;
     loading?: boolean;
 };
+/**
+ * SingleSelect component for single-value selection
+ *
+ * A feature-rich single-select component supporting both local and API-driven options,
+ * with search, pagination, filtering, and flexible display modes.
+ *
+ * @component
+ * @param {SingleSelectProps} props - The select properties
+ * @param {Array<{label: string, subLabel?: string, value: any, icon?: ReactNode}>} [props.options] - Static options array
+ * @param {string} [props.optionsApiEndPoint] - API endpoint for dynamic options loading
+ * @param {any} [props.optionsApiEndpointParams] - Additional parameters for API requests
+ * @param {AxiosInstance} [props.externalAxios] - Custom axios instance for API calls
+ * @param {any} [props.value] - Currently selected value
+ * @param {(value: any) => void} [props.onChange] - Callback fired when selection changes
+ * @param {(option: any) => any} [props.getValue] - Function to extract value from option object
+ * @param {{valueKey: string, isObjectId?: boolean, isInt?: boolean, isFloat?: boolean}} [props.dbValueProps] - Database value mapping properties
+ * @param {{labelKey: string, subLabelKey?: string, useLabelStartCase?: boolean, useSubLabelStartCase?: boolean}} [props.dbLabelProps] - Database label mapping properties
+ * @param {string} [props.label] - Label for the select
+ * @param {string} [props.name] - Name attribute
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the select is disabled
+ * @param {boolean} [props.loading] - Whether options are loading
+ * @param {boolean} [props.disableClear] - Whether to hide the clear button
+ * @param {boolean} [props.fullWidth] - Whether the select takes full width
+ * @param {'input' | 'filter'} [props.type='input'] - Display type
+ * @param {(event: SyntheticEvent) => void} [props.onOpen] - Callback when menu opens
+ * @param {(event: SyntheticEvent, reason: string) => void} [props.onClose] - Callback when menu closes
+ * @returns {React.ReactElement} The rendered single-select component
+ *
+ * @example
+ * ```tsx
+ * <SingleSelect
+ *   label="Select User"
+ *   value={selectedUser}
+ *   onChange={setSelectedUser}
+ *   options={users}
+ *   required
+ * />
+ * ```
+ */
 declare const SingleSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: SingleSelectProps) => react_jsx_runtime.JSX.Element;
 
 declare function Switch$1({ className, ...props }: React$1.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime.JSX.Element;
@@ -968,6 +3025,29 @@ declare function Switch$1({ className, ...props }: React$1.ComponentProps<typeof
 interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof Switch$1> {
     label?: string;
 }
+/**
+ * Switch component for boolean toggle input
+ *
+ * A toggle switch component with optional label support, built on shadcn's Switch.
+ * Renders a label beside the switch if provided.
+ *
+ * @component
+ * @param {SwitchProps} props - The switch properties
+ * @param {string} [props.label] - Optional label text to display next to the switch
+ * @param {boolean} [props.checked] - Whether the switch is checked
+ * @param {(checked: boolean) => void} [props.onCheckedChange] - Callback when switch state changes
+ * @param {boolean} [props.disabled] - Whether the switch is disabled
+ * @returns {React.ReactElement} The rendered switch component
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   label="Enable notifications"
+ *   checked={enabled}
+ *   onCheckedChange={setEnabled}
+ * />
+ * ```
+ */
 declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare function Textarea$1({ className, ...props }: React$1.ComponentProps<'textarea'>): react_jsx_runtime.JSX.Element;
@@ -981,6 +3061,42 @@ type TextareaProps = {
     error?: boolean;
     helperText?: React$1.ReactNode;
 } & React$1.ComponentProps<typeof Textarea$1>;
+/**
+ * Textarea component for multi-line text input
+ *
+ * A multi-line text input field with label support, validation states,
+ * helper/error text, and optional description.
+ *
+ * @component
+ * @param {TextareaProps} props - The textarea properties
+ * @param {React.ReactNode | string} [props.label] - Label for the field
+ * @param {string} [props.name] - Name attribute for the textarea
+ * @param {string} [props.value] - Current input value
+ * @param {(e: React.ChangeEvent<HTMLTextAreaElement>) => void} [props.onChange] - Callback when value changes
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {number} [props.rows] - Number of visible rows
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the field is disabled
+ * @param {boolean} [props.error] - Whether there's a validation error
+ * @param {React.ReactNode} [props.helperText] - Helper or error text
+ * @param {string} [props.description] - Additional description text
+ * @param {boolean} [props.fullWidth] - Whether the field takes full width
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Container attributes
+ * @returns {React.ReactElement} The rendered textarea component
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   label="Comments"
+ *   name="comments"
+ *   value={comments}
+ *   onChange={(e) => setComments(e.target.value)}
+ *   placeholder="Enter your comments..."
+ *   rows={4}
+ * />
+ * ```
+ */
 declare const Textarea: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, helperText, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
 
 declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
@@ -994,6 +3110,41 @@ type TextFieldProps = {
     error?: boolean;
     helperText?: React$1.ReactNode;
 } & React$1.ComponentProps<typeof Input>;
+/**
+ * TextField component for text input
+ *
+ * A general-purpose text input field with label support, validation states,
+ * helper/error text, and optional description.
+ *
+ * @component
+ * @param {TextFieldProps} props - The text field properties
+ * @param {React.ReactNode | string} [props.label] - Label for the field
+ * @param {string} [props.name] - Name attribute for the input
+ * @param {string} [props.value] - Current input value
+ * @param {(e: React.ChangeEvent<HTMLInputElement>) => void} [props.onChange] - Callback when value changes
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the field is disabled
+ * @param {boolean} [props.error] - Whether there's a validation error
+ * @param {React.ReactNode} [props.helperText] - Helper or error text
+ * @param {string} [props.description] - Additional description text
+ * @param {boolean} [props.fullWidth] - Whether the field takes full width
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Container attributes
+ * @returns {React.ReactElement} The rendered text field component
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Username"
+ *   name="username"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ *   placeholder="Enter your username"
+ *   required
+ * />
+ * ```
+ */
 declare const TextField: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, helperText, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
 
 interface SideMenuItemProps {
@@ -1077,6 +3228,40 @@ interface UserProfilePopupProps {
     /**Persistant Side bar collapsed - boolean */
     collapsed?: boolean;
 }
+/**
+ * UserProfilePopup Component
+ *
+ * User profile dropdown menu component displayed in the sidebar footer. Shows user avatar/initials,
+ * and provides a menu with Account section, optional Active Devices, custom profile actions, and Logout.
+ * Automatically adapts layout when sidebar is collapsed (centered alignment, avatar only).
+ *
+ * @param {string} userFullName - User's full name (required, used for avatar text and display)
+ * @param {string} [email=''] - User's email address (shown in account section)
+ * @param {React.ReactNode[]} [profileActions=[]] - Custom menu items to include in the dropdown
+ * @param {() => void} [onLogout] - Callback handler when user clicks logout
+ * @param {string} [profileUrl] - URL to user's profile image (uses initials fallback if not provided)
+ * @param {string} [avatarClassName=''] - Additional CSS classes for the avatar component
+ * @param {boolean} [showActiveDevices=false] - Whether to show the "Active Devices" menu item
+ * @param {() => void} [onActiveDevicesClick] - Callback handler when user clicks active devices
+ * @param {() => void} [onAccountClick] - Callback handler when user clicks the account section
+ * @param {boolean} [collapsed] - Whether the sidebar is in collapsed state (affects layout)
+ *
+ * @returns {React.ReactElement} A dropdown menu anchored to user avatar with profile options
+ *
+ * @example
+ * ```tsx
+ * <UserProfilePopup
+ *   userFullName="Jane Smith"
+ *   email="jane@example.com"
+ *   profileUrl="/avatar.jpg"
+ *   showActiveDevices={true}
+ *   onLogout={handleLogout}
+ *   onAccountClick={navigateToSettings}
+ *   onActiveDevicesClick={showDevices}
+ *   collapsed={false}
+ * />
+ * ```
+ */
 declare const UserProfilePopup: React__default.FC<UserProfilePopupProps>;
 
 interface HelpDocsAction {
@@ -1095,7 +3280,7 @@ interface AppLayoutProps {
     /** Navigation menu items */
     menu: SideMenuItemProps[];
     /**User profile parameters */
-    userProfileParams: UserProfilePopupProps;
+    userProfileParams?: UserProfilePopupProps;
     /** Switchers section customization - receives collapsed state */
     actions?: ReactNode | ((params: {
         collapsed: boolean;
@@ -1110,6 +3295,38 @@ interface AppLayoutProps {
     initialCollapsed?: boolean;
 }
 
+/**
+ * AppLayout Component
+ *
+ * Main layout component that provides a persistent sidebar navigation structure with responsive behavior.
+ * Automatically collapses on small screens and wraps content in a SidebarProvider for state management.
+ * Includes a floating help docs button in the bottom-right corner.
+ *
+ * @param {React.ReactNode} children - Main content to render inside the layout
+ * @param {SideMenuItemProps[]} menu - Navigation menu items for the sidebar
+ * @param {ReactNode | ((params: { collapsed: boolean }) => ReactNode)} [actions] - Optional action elements or function that receives collapsed state
+ * @param {string} [mainContainerClassName=''] - Additional CSS classes for the main content container
+ * @param {HelpDocsConfig} [helpDocsConfig] - Configuration for context-based help documentation
+ * @param {boolean} [initialCollapsed] - Initial state of sidebar collapse (auto-determined on small screens)
+ * @param {UserProfilePopupProps} [userProfileParams] - Configuration for user profile popup/menu
+ *
+ * @returns {React.ReactElement} The complete app layout with sidebar and main content area
+ *
+ * @example
+ * ```tsx
+ * <AppLayout
+ *   menu={menuItems}
+ *   userProfileParams={{
+ *     userFullName: "John Doe",
+ *     email: "john@example.com",
+ *     onLogout: handleLogout
+ *   }}
+ *   actions={<ActionButtons />}
+ * >
+ *   <YourContent />
+ * </AppLayout>
+ * ```
+ */
 declare const AppLayout: React__default.FC<AppLayoutProps>;
 
 interface SidebarContextType {
@@ -1121,13 +3338,77 @@ interface SidebarProviderProps {
     children: React__default.ReactNode;
     initialCollapsed?: boolean;
 }
+/**
+ * SidebarProvider Component
+ *
+ * React Context provider that manages global sidebar collapse state and provides methods
+ * to toggle and set the collapse state. Wraps the application or specific layout sections
+ * to enable sidebar state management across the component tree.
+ *
+ * @param {React.ReactNode} children - Child components that will have access to sidebar context
+ * @param {boolean} [initialCollapsed=false] - Initial collapsed state of the sidebar
+ *
+ * @returns {React.ReactElement} Context provider wrapping children with sidebar state
+ *
+ * @example
+ * ```tsx
+ * <SidebarProvider initialCollapsed={isMobile}>
+ *   <AppLayout>
+ *     <Content />
+ *   </AppLayout>
+ * </SidebarProvider>
+ * ```
+ */
 declare const SidebarProvider: React__default.FC<SidebarProviderProps>;
+/**
+ * useSidebar Hook
+ *
+ * Custom React hook to access the sidebar context state and methods.
+ * Must be used within a SidebarProvider component, otherwise it throws an error.
+ *
+ * @returns {{
+ *   collapsed: boolean;
+ *   toggleSidebar: () => void;
+ *   setCollapsed: (collapsed: boolean) => void;
+ * }} Object containing sidebar state and methods to control it
+ *
+ * @throws {Error} If used outside of SidebarProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { collapsed, toggleSidebar, setCollapsed } = useSidebar();
+ *
+ *   return (
+ *     <button onClick={toggleSidebar}>
+ *       {collapsed ? 'Expand' : 'Collapse'}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
 declare const useSidebar: () => SidebarContextType;
 
 interface MenuToggleButtonProps {
     /** Custom className */
     className?: string;
 }
+/**
+ * MenuToggleButton Component
+ *
+ * Mobile-only button that toggles the sidebar visibility. This button is hidden on desktop screens
+ * (above 768px width) using the Tailwind media query. Useful for including in page headers
+ * on mobile devices to control sidebar drawer visibility.
+ *
+ * @param {string} [className=''] - Additional CSS classes to apply to the button
+ *
+ * @returns {React.ReactElement} A menu toggle button (empty fragment on desktop)
+ *
+ * @example
+ * ```tsx
+ * <MenuToggleButton className="ml-4" />
+ * ```
+ */
 declare const MenuToggleButton: React__default.FC<MenuToggleButtonProps>;
 
 declare function Sheet({ ...props }: React$1.ComponentProps<typeof SheetPrimitive.Root>): react_jsx_runtime.JSX.Element;
@@ -1145,6 +3426,25 @@ interface PageContentProps {
     children: ReactNode;
     className?: string;
 }
+/**
+ * PageContent Component
+ *
+ * Main content area wrapper that provides responsive padding, scrolling behavior, and custom scrollbar styling.
+ * Automatically adjusts height based on screen size to account for page header and other UI elements.
+ * Includes thin scrollbar styling using Tailwind's scrollbar utilities.
+ *
+ * @param {React.ReactNode} children - Content to render inside the page content area
+ * @param {string} [className=''] - Additional CSS classes to apply to the container
+ *
+ * @returns {React.ReactElement} A scrollable content container with responsive height and styling
+ *
+ * @example
+ * ```tsx
+ * <PageContent className="bg-white">
+ *   <YourPageContent />
+ * </PageContent>
+ * ```
+ */
 declare const PageContent: ({ children, className }: PageContentProps) => react_jsx_runtime.JSX.Element;
 
 interface PageHeaderProps {
@@ -1167,13 +3467,92 @@ interface PageHeaderProps {
         }) => ReactNode[]);
     };
 }
+/**
+ * PageHeader Component
+ *
+ * Header component for page content that displays breadcrumbs and action bar with search,
+ * filter, add button, and custom action menus. Supports Redux integration for maintaining
+ * search and filter state across re-renders. Responsive design with mobile optimization.
+ *
+ * @param {string} [uniqueId] - Optional unique identifier for Redux state management of this header
+ * @param {number} pathTrimCount - Number of path segments to trim from breadcrumb
+ * @param {React.ReactElement} [breadcrumbAction] - Optional element to display next to breadcrumbs
+ * @param {SearchBarProps & { uniqueId?: string; searchText?: string }} [searchBarProps] - Configuration for search bar including placeholder
+ * @param {{
+ *   label?: string;
+ *   startIcon?: React.ReactNode;
+ *   components: React.ReactElement[];
+ * }} [filterButtonProps] - Configuration for filter dropdown with filter components
+ * @param {{
+ *   label?: string;
+ *   onClick: () => void;
+ * }} [addButtonProps] - Configuration for add/create button
+ * @param {{
+ *   menu: React.ReactNode[] | ((props: { close: () => void }) => React.ReactNode[]);
+ * }} [actionProps] - Configuration for additional action menu
+ *
+ * @returns {React.ReactElement} A responsive header with breadcrumbs and action controls
+ *
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   uniqueId="users-list"
+ *   pathTrimCount={1}
+ *   searchBarProps={{
+ *     placeholder: "Search users...",
+ *     uniqueId: "users-list"
+ *   }}
+ *   filterButtonProps={{
+ *     label: "Filters",
+ *     components: [<StatusFilter />, <RoleFilter />]
+ *   }}
+ *   addButtonProps={{
+ *     label: "Add User",
+ *     onClick: handleAddUser
+ *   }}
+ * />
+ * ```
+ */
 declare const PageHeader: ({ uniqueId, pathTrimCount, breadcrumbAction, searchBarProps, filterButtonProps, addButtonProps, actionProps, }: PageHeaderProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the Breadcrumbs component
+ */
 type BreadcrumbsProps = {
+    /** Number of path segments to trim from the beginning of the current URL path */
     pathTrimCount: number;
+    /** Optional CSS class names for the container element */
     containerClassName?: string;
+    /** Optional React element to render as an action button/component on the right side */
     action?: ReactElement;
 };
+/**
+ * Breadcrumbs component that displays a navigation breadcrumb trail based on the current URL path.
+ *
+ * Automatically generates breadcrumb items from the URL pathname and displays them with navigation links.
+ * When there are more than 2 breadcrumb items, it shows the first item, a dropdown menu with middle items,
+ * and the last item to save space.
+ *
+ * @component
+ * @param {BreadcrumbsProps} props - The component props
+ * @param {number} props.pathTrimCount - Number of path segments to trim from the beginning of the URL path
+ * @param {string} [props.containerClassName] - Optional CSS class names to apply to the container div
+ * @param {ReactElement} [props.action] - Optional React element displayed on the right side of the breadcrumb
+ *
+ * @returns {React.ReactElement} A div containing the breadcrumb navigation component with a menu toggle button and breadcrumb list
+ *
+ * @example
+ * // Basic usage
+ * <Breadcrumbs pathTrimCount={1} />
+ *
+ * @example
+ * // With custom action button
+ * <Breadcrumbs
+ *   pathTrimCount={2}
+ *   action={<button>Export</button>}
+ *   containerClassName="bg-gray-50 border-b"
+ * />
+ */
 declare const Breadcrumbs: ({ pathTrimCount, containerClassName, action, }: BreadcrumbsProps) => react_jsx_runtime.JSX.Element;
 
 interface CalendarEvent {
@@ -1265,6 +3644,69 @@ interface CalendarProps {
     selectConstraint?: any;
 }
 
+/**
+ * Calendar component that provides a fully-featured calendar interface with FullCalendar integration.
+ *
+ * This component displays an interactive calendar with support for events, drag-and-drop,
+ * resizing, and various view modes (month, week, day). It offers extensive customization options
+ * for appearance, behavior, and event handling.
+ *
+ * @component
+ * @param {CalendarProps} props - The component props
+ * @param {CalendarEvent[]} [props.events] - Array of calendar events to display. Defaults to empty array
+ * @param {(eventInfo: CalendarEventClickInfo) => void} [props.onEventClick] - Callback fired when an event is clicked
+ * @param {(dropInfo: CalendarEventDropInfo) => void} [props.onEventDrop] - Callback fired when an event is drag-dropped
+ * @param {(resizeInfo: CalendarEventResizeInfo) => void} [props.onEventResize] - Callback fired when an event is resized
+ * @param {(dateInfo: CalendarDateClickInfo) => void} [props.onDateClick] - Callback fired when a date is clicked
+ * @param {(selectInfo: CalendarDateSelectInfo) => void} [props.onDateSelect] - Callback fired when a date range is selected
+ * @param {(events: EventApi[]) => void} [props.onEventsSet] - Callback fired when the list of events changes
+ * @param {CalendarView} [props.initialView='dayGridMonth'] - Initial view mode to display (dayGridMonth, timeGridWeek, timeGridDay, listWeek)
+ * @param {CalendarView[]} [props.views] - Array of available view modes to show in view switcher
+ * @param {CalendarHeaderToolbar | boolean} [props.headerToolbar] - Header toolbar configuration object or false to hide it
+ * @param {boolean} [props.editable=false] - Whether events can be dragged/resized to modify dates
+ * @param {boolean} [props.selectable=false] - Whether users can select date ranges by clicking and dragging
+ * @param {boolean} [props.selectMirror=true] - Whether to show a visual mirror while selecting date ranges
+ * @param {boolean} [props.eventResizable=false] - Whether events can be resized by dragging their edges
+ * @param {boolean} [props.eventDraggable=false] - Whether events can be dragged to change their dates
+ * @param {boolean | number} [props.dayMaxEvents=true] - Maximum number of events to show per day (true for auto, false for unlimited)
+ * @param {string | number} [props.height='auto'] - Height of the calendar (CSS string or number in pixels)
+ * @param {number} [props.aspectRatio] - Aspect ratio for the calendar dimensions
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Additional HTML attributes for the container div
+ * @param {string} [props.locale='en'] - Locale/language code for calendar text (e.g., 'en', 'es', 'fr')
+ * @param {string} [props.timezone='local'] - Timezone for displaying dates ('local' or standard timezone identifier)
+ * @param {0 | 1 | 2 | 3 | 4 | 5 | 6} [props.firstDayOfWeek=0] - First day of the week (0=Sunday, 1=Monday, etc.)
+ * @param {(eventInfo: any) => React.ReactNode} [props.eventContent] - Custom render function for event content
+ * @param {(dayInfo: any) => React.ReactNode} [props.dayCellContent] - Custom render function for day cell content
+ * @param {boolean} [props.showNavigationButtons=true] - Whether to show previous/next navigation buttons
+ * @param {boolean} [props.showViewSwitcher=true] - Whether to show view mode selector buttons
+ * @param {boolean} [props.showToday=true] - Whether to show the "today" button
+ * @param {boolean} [props.weekends=true] - Whether to display weekend days
+ * @param {any} [props.businessHours] - Business hours configuration
+ * @param {any} [props.eventConstraint] - Constraint rules for event dragging
+ * @param {any} [props.selectConstraint] - Constraint rules for date selection
+ *
+ * @returns {React.ReactElement} A div container with the FullCalendar component
+ *
+ * @example
+ * // Basic calendar with events
+ * <Calendar
+ *   events={[
+ *     { id: '1', title: 'Meeting', start: '2024-01-15' }
+ *   ]}
+ *   onEventClick={(info) => console.log(info.event.title)}
+ * />
+ *
+ * @example
+ * // Editable calendar with custom height
+ * <Calendar
+ *   events={events}
+ *   editable={true}
+ *   eventDraggable={true}
+ *   eventResizable={true}
+ *   height={600}
+ *   onEventDrop={(info) => updateEventDate(info)}
+ * />
+ */
 declare const Calendar: React__default.FC<CalendarProps>;
 
 /**
@@ -1322,50 +3764,233 @@ declare const validateEvent: (event: Partial<CalendarEvent>) => {
     errors: string[];
 };
 
+/**
+ * Type definition for the kind of confirmation dialog
+ */
 type ConfirmDialogType = 'confirm' | 'delete';
+/**
+ * Available max-width sizes for the dialog
+ */
 type MaxWidthSize$2 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Props for the ConfirmDialog component
+ */
 type ConfirmDialogProps = {
+    /** Whether the dialog is open and visible */
     isOpen: boolean;
+    /** Title text displayed in the dialog header */
     title: string;
+    /** Message/description text displayed in the dialog */
     message: string;
+    /** Callback function triggered when the user confirms the action */
     onConfirm: () => void;
+    /** Callback function triggered when the user cancels the dialog */
     onCancel: () => void;
+    /** Type of confirmation dialog - 'confirm' for general confirmations, 'delete' for destructive actions */
     type: ConfirmDialogType;
+    /** Custom text for the confirm button. Defaults to 'Confirm Delete' for delete type, 'Confirm' otherwise */
     confirmButtonText?: string;
+    /** Custom text for the cancel button. Defaults to 'Cancel' */
     cancelButtonText?: string;
+    /** Max-width size class of the dialog. Defaults to 'xl' */
     maxWidth?: MaxWidthSize$2;
 };
+/**
+ * ConfirmDialog component that displays a modal confirmation dialog with custom title, message, and action buttons.
+ *
+ * This component provides a user-friendly confirmation interface with support for two types:
+ * 'confirm' for general confirmations and 'delete' for destructive operations. The dialog
+ * includes an animated GIF icon that changes based on the dialog type.
+ *
+ * @component
+ * @param {ConfirmDialogProps} props - The component props
+ * @param {boolean} props.isOpen - Whether the dialog is currently open
+ * @param {string} props.title - Dialog title text
+ * @param {string} props.message - Dialog message/body text
+ * @param {() => void} props.onConfirm - Callback fired when the confirm button is clicked
+ * @param {() => void} props.onCancel - Callback fired when the cancel button is clicked or dialog is closed
+ * @param {ConfirmDialogType} props.type - Dialog type ('confirm' or 'delete') which affects styling and default text
+ * @param {string} [props.confirmButtonText] - Custom text for confirm button
+ * @param {string} [props.cancelButtonText] - Custom text for cancel button
+ * @param {MaxWidthSize} [props.maxWidth='xl'] - Maximum width of the dialog
+ *
+ * @returns {React.ReactElement} A Dialog component with header, message, and action buttons
+ *
+ * @example
+ * // Basic confirmation dialog
+ * <ConfirmDialog
+ *   isOpen={isOpen}
+ *   type="confirm"
+ *   title="Confirm Action"
+ *   message="Are you sure you want to proceed?"
+ *   onConfirm={() => handleAction()}
+ *   onCancel={() => setIsOpen(false)}
+ * />
+ *
+ * @example
+ * // Delete confirmation dialog with custom buttons
+ * <ConfirmDialog
+ *   isOpen={deleteOpen}
+ *   type="delete"
+ *   title="Delete Item"
+ *   message="This action cannot be undone. All data will be permanently deleted."
+ *   confirmButtonText="Yes, Delete"
+ *   cancelButtonText="Keep Item"
+ *   onConfirm={() => deleteItem()}
+ *   onCancel={() => setDeleteOpen(false)}
+ *   maxWidth="md"
+ * />
+ */
 declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
 
+/**
+ * Available max-width sizes for the dialog
+ */
 type MaxWidthSize$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Props for the Dialog component
+ */
 type DialogProps = {
+    /** Function that renders the dialog content. Receives close callback to allow closing from within content */
     content: (props: {
         close: () => void;
     }) => ReactNode;
+    /** Optional title displayed in the dialog header */
     title?: string | undefined;
+    /** Callback function triggered when the dialog is closed */
     onClose: () => void;
+    /** Whether the dialog is open and visible */
     open: boolean;
+    /** Optional CSS class names for the dialog content element */
     className?: string;
+    /** Whether to show the close button in the dialog header. Defaults to true */
     showCloseButton?: boolean;
+    /** Max-width size class of the dialog. Defaults to 'lg' */
     maxWidth?: MaxWidthSize$1;
 };
+/**
+ * Dialog component that wraps shadcn/ui Dialog with additional features and sensible defaults.
+ *
+ * This component provides a controlled dialog with optional header, configurable width,
+ * and flexible content rendering with a close callback for self-closing from within the content.
+ *
+ * @component
+ * @param {DialogProps} props - The component props
+ * @param {(props: { close: () => void }) => ReactNode} props.content - Render function for dialog content
+ * @param {() => void} props.onClose - Callback fired when the dialog is closed
+ * @param {boolean} props.open - Whether the dialog is currently open
+ * @param {string} [props.title] - Optional dialog title
+ * @param {string} [props.className] - Optional CSS classes for the dialog content
+ * @param {boolean} [props.showCloseButton=true] - Whether to show the close button
+ * @param {MaxWidthSize} [props.maxWidth='lg'] - Maximum width of the dialog
+ *
+ * @returns {React.ReactElement} A Dialog component with optional header and flexible content
+ *
+ * @example
+ * // Simple dialog with title
+ * <Dialog
+ *   open={isOpen}
+ *   title="Delete Item"
+ *   onClose={() => setIsOpen(false)}
+ *   content={({ close }) => (
+ *     <div>
+ *       <p>Are you sure?</p>
+ *       <button onClick={close}>Cancel</button>
+ *     </div>
+ *   )}
+ * />
+ *
+ * @example
+ * // Dialog without title and custom width
+ * <Dialog
+ *   open={showDialog}
+ *   onClose={handleClose}
+ *   maxWidth="sm"
+ *   showCloseButton={false}
+ *   content={({ close }) => <FormComponent onSubmit={close} />}
+ * />
+ */
 declare const Dialog: ({ onClose, title, content, open, className, showCloseButton, maxWidth, }: DialogProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Available max-width sizes for the dialog
+ */
 type MaxWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Props for the DialogButton component
+ */
 type DialogButtonProps = {
+    /** Function that renders the dialog trigger element. Receives open callback to open the dialog */
     anchor: (props: {
         open: () => void;
     }) => ReactNode;
+    /** Optional callback fired when the dialog opens */
     onDialogOpen?: () => void;
+    /** Optional callback fired when the dialog closes */
     onDialogClose?: () => void;
+    /** Function that renders the dialog content. Receives close callback to close the dialog */
     content: (props: {
         close: () => void;
     }) => ReactNode;
+    /** Optional title displayed in the dialog header */
     title?: string | undefined;
+    /** Optional CSS class names for the dialog content element */
     className?: string;
+    /** Whether to show the close button in the dialog header. Defaults to true */
     showCloseButton?: boolean;
+    /** Max-width size class of the dialog. Defaults to 'lg' */
     maxWidth?: MaxWidthSize;
 };
+/**
+ * DialogButton component that combines a trigger element and a dialog in a single component.
+ *
+ * This is a convenient wrapper that manages its own open/close state and provides
+ * a clean API for rendering both the trigger (anchor) and the dialog content.
+ * It's useful when you want to bind a button or other trigger element with a dialog
+ * without managing state at the parent level.
+ *
+ * @component
+ * @param {DialogButtonProps} props - The component props
+ * @param {(props: { open: () => void }) => ReactNode} props.anchor - Render function for the trigger element
+ * @param {(props: { close: () => void }) => ReactNode} props.content - Render function for dialog content
+ * @param {string} [props.title] - Optional dialog title
+ * @param {() => void} [props.onDialogOpen] - Optional callback fired when the dialog opens
+ * @param {() => void} [props.onDialogClose] - Optional callback fired when the dialog closes
+ * @param {string} [props.className] - Optional CSS classes for the dialog content
+ * @param {boolean} [props.showCloseButton=true] - Whether to show the close button
+ * @param {MaxWidthSize} [props.maxWidth='lg'] - Maximum width of the dialog
+ *
+ * @returns {React.ReactElement} A fragment containing the anchor element and the Dialog
+ *
+ * @example
+ * // Button that opens a dialog with a form
+ * <DialogButton
+ *   anchor={({ open }) => <button onClick={open}>Edit Profile</button>}
+ *   title="Edit Profile"
+ *   content={({ close }) => (
+ *     <form onSubmit={(e) => { handleSubmit(e); close(); }}>
+ *       <input type="text" placeholder="Name" />
+ *       <button type="submit">Save</button>
+ *     </form>
+ *   )}
+ * />
+ *
+ * @example
+ * // With callbacks and custom styling
+ * <DialogButton
+ *   anchor={({ open }) => <IconButton icon={<EditIcon />} onClick={open} />}
+ *   title="Delete Item"
+ *   maxWidth="sm"
+ *   onDialogOpen={() => console.log('Dialog opened')}
+ *   onDialogClose={() => console.log('Dialog closed')}
+ *   content={({ close }) => (
+ *     <div>
+ *       <p>Are you sure?</p>
+ *       <button onClick={close}>Cancel</button>
+ *     </div>
+ *   )}
+ * />
+ */
 declare const DialogButton: ({ onDialogClose, onDialogOpen, anchor, content, title, className, showCloseButton, maxWidth, }: DialogButtonProps) => react_jsx_runtime.JSX.Element;
 
 declare const DropDownButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
@@ -1379,25 +4004,98 @@ declare const DropDownIcon: ({ icon, handleClick, }: {
     handleClick: any;
 }) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the DropdownMenu component
+ */
 type DropdownMenuProps = {
+    /** Function that renders the dropdown trigger element. Receives open callback to open the dropdown */
     anchor: (props: {
         open: (e: any) => void;
     }) => ReactNode;
+    /** Array of menu items or a function that returns menu items. Can be static or dynamic */
     menu?: ReactNode[] | ((props: {
         close: () => void;
     }) => ReactNode[]);
+    /** Custom slot for rendering the entire menu content. Takes precedence over menu when useMenuSlot is true */
     menuSlot?: (props: {
         close: () => void;
     }) => ReactNode;
+    /** Whether to use menuSlot instead of menu items. Defaults to false */
     useMenuSlot?: boolean;
+    /** Optional CSS class names for the menu content container */
     menuContentClassName?: string;
+    /** Optional CSS class names for the menu list wrapper div */
     menuListClassName?: string;
+    /** Optional React element or component to render above the menu items */
     menuHeader?: ReactNode;
+    /** Optional React element or component to render below the menu items */
     menuFooter?: ReactNode;
+    /** Optional async callback fired when the menu is scrolled, useful for infinite scroll */
     handleMenuScroll?: (event: any) => Promise<void>;
+    /** Horizontal alignment of the dropdown menu relative to the trigger. Defaults to 'end' */
     align?: 'start' | 'center' | 'end';
+    /** Vertical placement of the dropdown menu relative to the trigger. Defaults to 'bottom' */
     side?: 'top' | 'right' | 'bottom' | 'left';
 };
+/**
+ * DropdownMenu component that provides a flexible dropdown menu with trigger element and menu content.
+ *
+ * This component wraps shadcn/ui's DropdownMenu and adds support for dynamic menu items,
+ * header/footer sections, and custom scroll handling. It manages its own open/close state
+ * and provides a convenient API for both static and dynamic menu items.
+ *
+ * @component
+ * @param {DropdownMenuProps} props - The component props
+ * @param {(props: { open: (e: any) => void }) => ReactNode} props.anchor - Render function for the trigger element
+ * @param {ReactNode[] | ((props: { close: () => void }) => ReactNode[])} [props.menu] - Menu items array or function
+ * @param {(props: { close: () => void }) => ReactNode} [props.menuSlot] - Custom menu content renderer
+ * @param {boolean} [props.useMenuSlot=false] - Whether to use menuSlot instead of menu items
+ * @param {string} [props.menuContentClassName] - CSS classes for the menu content container
+ * @param {string} [props.menuListClassName] - CSS classes for the menu list wrapper
+ * @param {ReactNode} [props.menuHeader] - Content to display above the menu items
+ * @param {ReactNode} [props.menuFooter] - Content to display below the menu items
+ * @param {(event: any) => Promise<void>} [props.handleMenuScroll] - Async callback for scroll events
+ * @param {'start' | 'center' | 'end'} [props.align='end'] - Horizontal alignment of the menu
+ * @param {'top' | 'right' | 'bottom' | 'left'} [props.side='bottom'] - Vertical placement of the menu
+ *
+ * @returns {React.ReactElement} A dropdown menu component with trigger and content
+ *
+ * @example
+ * // Simple dropdown with static menu items
+ * <DropdownMenu
+ *   anchor={({ open }) => <button onClick={open}>Actions</button>}
+ *   menu={[
+ *     <button key="1">Edit</button>,
+ *     <button key="2">Delete</button>,
+ *   ]}
+ * />
+ *
+ * @example
+ * // Dropdown with dynamic menu items and header
+ * <DropdownMenu
+ *   anchor={({ open }) => <IconButton icon={<MoreIcon />} onClick={open} />}
+ *   menu={({ close }) => items.map(item => (
+ *     <button key={item.id} onClick={() => { selectItem(item); close(); }}>
+ *       {item.name}
+ *     </button>
+ *   ))}
+ *   menuHeader={<span className="px-2 py-1 text-sm font-semibold">Options</span>}
+ *   align="start"
+ * />
+ *
+ * @example
+ * // Dropdown with infinite scroll
+ * <DropdownMenu
+ *   anchor={({ open }) => <button onClick={open}>Load More</button>}
+ *   menu={filteredItems}
+ *   menuFooter={<span className="text-xs text-muted">Showing {items.length} items</span>}
+ *   handleMenuScroll={async (e) => {
+ *     if (isNearBottom(e)) {
+ *       await loadMoreItems();
+ *     }
+ *   }}
+ * />
+ */
 declare const DropdownMenu: ({ menu, menuSlot, useMenuSlot, menuHeader, menuFooter, menuContentClassName, menuListClassName, anchor, handleMenuScroll, align, side, }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
 
 type DropdownMenuItemProps = {
@@ -1410,14 +4108,68 @@ type DropdownMenuItemProps = {
 };
 declare const DropdownMenuItem: ({ icon, label, onClick, className, disabled, variant, }: DropdownMenuItemProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the PreviewFiles component
+ */
 type PreviewFilesProps = {
+    /** Array of files or single file to display. Can be File objects or string URLs. Accepts null for empty state */
     files: File[] | File | string[] | string | null;
+    /** Optional label text displayed above the file list */
     label?: string;
+    /** Optional callback fired when files are deleted. Receives remaining files array and deleted file */
     onChange?: (newFiles: File[], deletedFile: File) => void;
+    /** Whether to show download button for each file. Defaults to false */
     showDownload?: boolean;
+    /** Whether to hide the delete button for each file. Defaults to false */
     hideDelete?: boolean;
+    /** Optional CSS class names for the container element */
     className?: string;
 };
+/**
+ * PreviewFiles component that displays a list of files with preview, download, and delete functionality.
+ *
+ * This component renders file items in a grid/list format with icons, sizes, and action buttons.
+ * It supports both File objects and URL strings, automatically fetching file information for remote files.
+ * Users can preview files by clicking on them, download them, and delete them from the list.
+ *
+ * @component
+ * @param {PreviewFilesProps} props - The component props
+ * @param {File[] | File | string[] | string | null} props.files - Files to display (File objects or URLs)
+ * @param {string} [props.label] - Optional label text displayed above the file list
+ * @param {(newFiles: File[], deletedFile: File) => void} [props.onChange] - Callback when files are deleted
+ * @param {boolean} [props.showDownload=false] - Whether to show download button
+ * @param {boolean} [props.hideDelete=false] - Whether to hide delete button
+ * @param {string} [props.className] - Optional CSS classes for the container
+ *
+ * @returns {React.ReactElement | null} A div containing the file list, or null if no files
+ *
+ * @example
+ * // Display File objects with delete capability
+ * <PreviewFiles
+ *   files={uploadedFiles}
+ *   label="Uploaded Files"
+ *   onChange={(newFiles, deleted) => setFiles(newFiles)}
+ * />
+ *
+ * @example
+ * // Display remote files with download button
+ * <PreviewFiles
+ *   files={['https://example.com/file1.pdf', 'https://example.com/file2.docx']}
+ *   label="Documents"
+ *   showDownload={true}
+ *   hideDelete={true}
+ * />
+ *
+ * @example
+ * // Mixed files with custom styling
+ * <PreviewFiles
+ *   files={[file1, 'https://example.com/file.pdf']}
+ *   label="Files"
+ *   showDownload={true}
+ *   onChange={handleFileDelete}
+ *   className="bg-gray-50 p-4 rounded-lg"
+ * />
+ */
 declare const PreviewFiles: ({ files, label, onChange, showDownload, hideDelete, className, }: PreviewFilesProps) => react_jsx_runtime.JSX.Element;
 
 declare const HorizontalStepper: React__default.FC<StepperVariantProps>;
@@ -1425,69 +4177,258 @@ declare const HorizontalStepper: React__default.FC<StepperVariantProps>;
 declare const VerticalStepper: React__default.FC<StepperVariantProps>;
 
 /**
- * Interface for individual step items
+ * Interface for individual step items in the stepper
  */
 interface StepItem {
-    /** The label text for the step */
+    /** The label text displayed for this step */
     label: string;
-    /** Optional description text shown below the label */
+    /** Optional description text shown below the label for additional context */
     description?: string;
 }
 /**
- * Props for the Stepper Variant components
+ * Props for the Stepper variant components (HorizontalStepper and VerticalStepper)
  */
 interface StepperVariantProps {
-    /** Current active step index (0-based) */
+    /** Current active step index (0-based). Determines which step is highlighted */
     activeStep: number;
     /** Array of step items with labels and optional descriptions */
     steps: StepItem[];
-    /** Additional className for the container */
+    /** Additional CSS class names for the stepper container element */
     containerClassName?: string;
-    /** Callback function called when a step is clicked. Receives the step index as parameter */
+    /** Callback function fired when a step is clicked. Receives the step index (0-based) as parameter */
     onStepClick?: (stepIndex: number) => void;
-    /** Whether to allow navigation by clicking on steps. Defaults to true */
+    /** Whether to allow users to navigate by clicking on steps. Defaults to true */
     allowNavigation?: boolean;
 }
+/**
+ * Props for the Stepper component
+ */
 type StepperProps = StepperVariantProps & {
-    /** Orientation of the stepper - horizontal or vertical */
+    /** Orientation of the stepper layout - 'horizontal' displays steps left-to-right, 'vertical' displays top-to-bottom. Defaults to 'horizontal' */
     orientation?: 'vertical' | 'horizontal';
 };
 /**
- * Main Stepper component that handles both horizontal and vertical orientations
+ * Stepper component that displays a progress indicator with multiple steps.
+ *
+ * This is a wrapper component that renders either HorizontalStepper or VerticalStepper
+ * based on the orientation prop. It provides a visual representation of progress through
+ * a sequence of steps, with optional click handlers for step navigation.
+ *
+ * @component
+ * @param {StepperProps} props - The component props
+ * @param {number} props.activeStep - Index of the currently active step (0-based)
+ * @param {StepItem[]} props.steps - Array of steps with label and optional description
+ * @param {'horizontal' | 'vertical'} [props.orientation='horizontal'] - Layout orientation
+ * @param {string} [props.containerClassName] - Optional CSS classes for the container
+ * @param {(stepIndex: number) => void} [props.onStepClick] - Callback when a step is clicked
+ * @param {boolean} [props.allowNavigation=true] - Whether clicking on steps navigates between them
+ *
+ * @returns {React.ReactElement} A HorizontalStepper or VerticalStepper component
+ *
+ * @example
+ * // Horizontal stepper (default)
+ * <Stepper
+ *   activeStep={1}
+ *   steps={[
+ *     { label: 'Step 1', description: 'Enter details' },
+ *     { label: 'Step 2', description: 'Confirm' },
+ *     { label: 'Step 3', description: 'Complete' }
+ *   ]}
+ *   onStepClick={(index) => setActiveStep(index)}
+ * />
+ *
+ * @example
+ * // Vertical stepper with custom styling
+ * <Stepper
+ *   orientation="vertical"
+ *   activeStep={2}
+ *   steps={[
+ *     { label: 'Personal Info' },
+ *     { label: 'Address' },
+ *     { label: 'Payment' },
+ *     { label: 'Review' }
+ *   ]}
+ *   containerClassName="bg-gray-50 p-6 rounded"
+ *   allowNavigation={false}
+ * />
  */
 declare const Stepper: React__default.FC<StepperProps>;
 
+/**
+ * Configuration for an individual tab in TabsContainer
+ */
 interface CustomTabProps {
+    /** Unique identifier for the tab. Can be string or number */
     key: string | number;
+    /** Display label or React element for the tab trigger */
     label: React.ReactNode;
+    /** React component or element to render when this tab is active */
     component: React.ReactNode;
+    /** Whether to show a highlight indicator (dot) on the tab trigger. Defaults to false */
     highlight?: boolean;
+    /** Whether the tab is disabled and cannot be selected. Defaults to false */
     disabled?: boolean;
+    /** Optional icon or React element to display before the label */
     icon?: React.ReactNode;
 }
+/**
+ * Props for the TabsContainer component
+ */
 interface TabsContainerProps {
+    /** Array of tab configurations with labels, content, and optional metadata */
     tabs: CustomTabProps[];
+    /** Optional callback fired when a tab is selected. Receives the tab key as parameter */
     onTabChange?: (tabKey: string) => void;
+    /** Index of the tab to show initially. Defaults to 0 (first tab) */
     currentTabIndex?: number;
+    /** Optional CSS class names for the Tabs root element */
     className?: string;
+    /** Optional CSS class names for the TabsList container */
     tabsListClassName?: string;
+    /** Optional CSS class names for each TabsTrigger element */
     tabsTriggerClassName?: string;
+    /** Layout variant - 'fixed' uses viewport height, 'dynamic' uses content height. Defaults to 'fixed' */
     variant?: 'fixed' | 'dynamic';
 }
+/**
+ * TabsContainer component that displays tabbed content with a tab list and content area.
+ *
+ * This component provides a responsive tab interface with support for icons, highlights,
+ * disabled states, and two layout modes (fixed height for viewport or dynamic height for content).
+ * It manages tab selection state and provides callbacks for external state management.
+ *
+ * @component
+ * @param {TabsContainerProps} props - The component props
+ * @param {CustomTabProps[]} props.tabs - Array of tab configurations
+ * @param {(tabKey: string) => void} [props.onTabChange] - Callback when a tab is selected
+ * @param {number} [props.currentTabIndex=0] - Initially active tab index
+ * @param {string} [props.className] - CSS classes for the Tabs root
+ * @param {string} [props.tabsListClassName] - CSS classes for the TabsList
+ * @param {string} [props.tabsTriggerClassName] - CSS classes for TabsTrigger elements
+ * @param {'fixed' | 'dynamic'} [props.variant='fixed'] - Layout mode for tab content
+ *
+ * @returns {React.ReactElement} A Tabs component with tab list and content area
+ *
+ * @example
+ * // Basic tabs
+ * <TabsContainer
+ *   tabs={[
+ *     { key: 'tab1', label: 'Overview', component: <OverviewPanel /> },
+ *     { key: 'tab2', label: 'Details', component: <DetailsPanel /> },
+ *   ]}
+ *   onTabChange={(key) => console.log('Selected:', key)}
+ * />
+ *
+ * @example
+ * // Tabs with icons and highlights
+ * <TabsContainer
+ *   tabs={[
+ *     {
+ *       key: 'notifications',
+ *       label: 'Notifications',
+ *       icon: <BellIcon />,
+ *       component: <NotificationsList />,
+ *       highlight: unreadCount > 0
+ *     },
+ *     {
+ *       key: 'settings',
+ *       label: 'Settings',
+ *       icon: <SettingsIcon />,
+ *       component: <SettingsPanel />
+ *     },
+ *   ]}
+ *   variant="dynamic"
+ *   className="min-h-screen"
+ * />
+ *
+ * @example
+ * // Tabs with disabled state
+ * <TabsContainer
+ *   tabs={[
+ *     { key: 'basic', label: 'Basic Info', component: <BasicForm /> },
+ *     { key: 'advanced', label: 'Advanced', component: <AdvancedForm />, disabled: !basicComplete },
+ *   ]}
+ *   currentTabIndex={0}
+ * />
+ */
 declare const TabsContainer: ({ tabs, onTabChange, currentTabIndex, className, tabsListClassName, tabsTriggerClassName, variant, }: TabsContainerProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Props for the UploadDialog component
+ */
 type UploadDialogProps = {
+    /** Function that renders the dialog trigger element. Receives open callback to open the dialog */
     anchor: (props: {
         open: () => void;
     }) => ReactNode;
+    /** Optional callback fired when the dialog opens */
     onDialogOpen?: () => void;
+    /** Optional callback fired when the dialog closes */
     onDialogClose?: () => void;
+    /** Title displayed in the dialog header. Defaults to 'Upload File' */
     title?: string;
+    /** Optional URL to a sample file for download */
     sampleFileUrl?: string;
+    /** Callback function fired when the Upload Now button is clicked. Receives single File or File[] */
     onUpload: (file: File | File[]) => void;
+    /** HTML accept attribute value for the file input (e.g., '.pdf,.doc', 'image/*'). Defaults to all files */
     acceptFileType?: string;
+    /** Whether the upload is currently in progress. Defaults to false */
     loading?: boolean;
 };
+/**
+ * UploadDialog component that provides a file upload interface with preview and download sample options.
+ *
+ * This component manages file selection, displays selected file previews with delete capability,
+ * and provides options to download sample files. It supports loading states and file type filtering.
+ * The upload is triggered via an anchor element (trigger) that's configurable.
+ *
+ * @component
+ * @param {UploadDialogProps} props - The component props
+ * @param {(props: { open: () => void }) => ReactNode} props.anchor - Render function for the trigger element
+ * @param {(file: File | File[]) => void} props.onUpload - Callback when upload button is clicked
+ * @param {string} [props.title='Upload File'] - Dialog header title
+ * @param {string} [props.sampleFileUrl] - URL to download a sample file
+ * @param {string} [props.acceptFileType] - File type filter for the input (e.g., '.pdf', 'image/*')
+ * @param {boolean} [props.loading=false] - Whether upload is in progress
+ * @param {() => void} [props.onDialogOpen] - Callback when dialog opens
+ * @param {() => void} [props.onDialogClose] - Callback when dialog closes
+ *
+ * @returns {React.ReactElement} A fragment with the anchor element and Upload Dialog
+ *
+ * @example
+ * // Basic file upload
+ * <UploadDialog
+ *   anchor={({ open }) => <button onClick={open}>Upload</button>}
+ *   title="Upload Document"
+ *   onUpload={(file) => uploadToServer(file)}
+ * />
+ *
+ * @example
+ * // Upload with sample file and type restriction
+ * <UploadDialog
+ *   anchor={({ open }) => <IconButton icon={<UploadIcon />} onClick={open} />}
+ *   title="Upload CSV File"
+ *   acceptFileType=".csv"
+ *   sampleFileUrl="https://example.com/sample.csv"
+ *   onUpload={async (file) => {
+ *     await uploadFile(file);
+ *     setUploadComplete(true);
+ *   }}
+ *   loading={isUploading}
+ *   onDialogClose={() => setIsUploading(false)}
+ * />
+ *
+ * @example
+ * // Image upload with loading state
+ * <UploadDialog
+ *   anchor={({ open }) => <button onClick={open}>Choose Avatar</button>}
+ *   title="Select Avatar"
+ *   acceptFileType="image/*"
+ *   onUpload={(file) => updateAvatar(file)}
+ *   loading={uploadInProgress}
+ * />
+ */
 declare const UploadDialog: ({ onUpload, sampleFileUrl, acceptFileType, loading, title, anchor, onDialogClose, onDialogOpen, }: UploadDialogProps) => react_jsx_runtime.JSX.Element;
 
 /**