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

package/dist/cjs/types/src/components/Assets/ErrorPages/ComingSoon.d.ts

@@ -3,5 +3,29 @@ interface NoItemFoundProps {
     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."
+ * />
+ */
 export declare const ComingSoon: ({ title, description, }: NoItemFoundProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/Assets/ErrorPages/InternalServerError.d.ts

@@ -1 +1,21 @@
+/**
+ * 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} />
+ */
 export declare const InternalServerError: ({ resetBoundary }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Assets/ErrorPages/NoInternetConnection.d.ts

@@ -1 +1,21 @@
+/**
+ * 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()} />
+ */
 export declare const NoInterneConnection: ({ resetBoundary }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Assets/ErrorPages/NoItemFound.d.ts

@@ -5,5 +5,33 @@ 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}
+ * />
+ */
 export declare const NoItemFound: ({ title, description, height, width, }: NoItemFoundProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/src/components/Assets/ErrorPages/PageNotFound.d.ts

@@ -1 +1,22 @@
+/**
+ * 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>
+ */
 export declare const PageNotFound: () => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Assets/ErrorPages/ResourceNotFound.d.ts

@@ -1 +1,22 @@
+/**
+ * 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>}
+ * />
+ */
 export declare const ResourceNotFound: (message: any) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Assets/ErrorPages/UnAuthorized.d.ts

@@ -1,4 +1,35 @@
 import { ReactNode } from 'react';
+/**
+ * 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>
+ *   }
+ * />
+ */
 export declare const UnAuthorized: ({ component }: {
     component?: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Assets/Icons/Icons.d.ts

@@ -1,4 +1,18 @@
 import { FC, MouseEvent } from 'react';
+/**
+ * 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
+ */
 export interface IconProps {
     size?: number;
     color?: string;
@@ -7,9 +21,49 @@ export interface IconProps {
     backgroundColor?: string;
     onClick?: (event: MouseEvent<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
+ */
 export 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
+ */
 export 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>
+ *   );
+ * };
+ */
 export declare const Icons: IconsType;

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

@@ -3,10 +3,48 @@ import HorizontalBarChart, { type HorizontalBarChartData, type HorizontalBarChar
 import VerticalBarChart, { type VerticalBarChartData, type VerticalBarChartProps } from './VerticalBarChart';
 export type BarChartVariant = 'vertical' | 'horizontal';
 export 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')
+ */
 export interface BarChartProps extends Omit<VerticalBarChartProps, 'data'>, Omit<HorizontalBarChartProps, 'data' | keyof VerticalBarChartProps> {
     data: BarChartData[];
     variant?: BarChartVariant;
 }
+/**
+ * BarChart Component
+ * A flexible bar chart component that supports both vertical and horizontal orientations.
+ * Delegates rendering to either VerticalBarChart or HorizontalBarChart based on the variant prop.
+ *
+ * @component
+ * @param {BarChartProps} props - The props object
+ * @param {BarChartData[]} props.data - Array of data objects containing chart values
+ * @param {BarChartVariant} [props.variant='vertical'] - Chart orientation: 'vertical' for vertical bars or 'horizontal' for horizontal bars
+ * @returns {React.ReactElement} Rendered bar chart component
+ *
+ * @example
+ * const data = [
+ *   { month: 'January', sales: 400, revenue: 2400 },
+ *   { month: 'February', sales: 300, revenue: 1398 }
+ * ];
+ * const config = {
+ *   sales: { label: 'Sales', color: '#2563eb' },
+ *   revenue: { label: 'Revenue', color: '#7c3aed' }
+ * };
+ *
+ * return (
+ *   <BarChart
+ *     data={data}
+ *     variant="vertical"
+ *     dataKeys={['sales', 'revenue']}
+ *     xAxisKey="month"
+ *     config={config}
+ *   />
+ * );
+ */
 declare const BarChart: React.FC<BarChartProps>;
 export default BarChart;
 export { HorizontalBarChart, VerticalBarChart };

package/dist/cjs/types/src/components/Charts/BarChart/HorizontalBarChart.d.ts

@@ -1,9 +1,46 @@
 import { type ChartConfig } from '@/shadcn-components/Charts/Chart';
 import React from 'react';
 import type { LegendProps, MarginProps, SubTitleProps, TitleProps } from '../types/types';
+/**
+ * Data object for HorizontalBarChart
+ * @typedef {Object} HorizontalBarChartData
+ * @property {string|number} [key] - Dynamic data properties
+ */
 export 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
+ */
 export interface HorizontalBarChartProps {
     data: HorizontalBarChartData[];
     dataKeys: string[];
@@ -34,5 +71,61 @@ export 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.FC<HorizontalBarChartProps>;
 export default HorizontalBarChart;

package/dist/cjs/types/src/components/Charts/BarChart/VerticalBarChart.d.ts

@@ -1,9 +1,53 @@
 import { type ChartConfig } from '@/shadcn-components/Charts/Chart';
 import React from 'react';
 import type { LegendProps, MarginProps, SubTitleProps, TitleProps } from '../types/types';
+/**
+ * Data object for VerticalBarChart
+ * @typedef {Object} VerticalBarChartData
+ * @property {string|number} [key] - Dynamic data properties
+ */
 export 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
+ */
 export interface VerticalBarChartProps {
     data: VerticalBarChartData[];
     dataKeys: string[];
@@ -41,5 +85,71 @@ export 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.FC<VerticalBarChartProps>;
 export default VerticalBarChart;

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

@@ -1,6 +1,32 @@
 import { type ChartConfig } from '@/shadcn-components/Charts/Chart';
 import { CurveType } from 'recharts/types/shape/Curve';
 import { AxisLabelProps, BaseAxisProps, CartesianGridProps, LegendProps, MarginProps, SubTitleProps, TitleProps } from '../types/types';
+/**
+ * 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
+ */
 export type LineChartProps = {
     title?: string;
     showSubtitle?: boolean;
@@ -25,11 +51,74 @@ export 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"
+ *   />
+ * );
+ */
 export 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) => import("react/jsx-runtime").JSX.Element;
 export {};