@aic-kits/react 0.29.12 → 0.31.0

package/dist/components/BarChart/BarChart.d.ts

@@ -0,0 +1,90 @@
+import { default as React } from 'react';
+import { Color } from '../../theme/common';
+import { BarChartSize as ThemeBarChartSize, BarChartVariant as ThemeBarChartVariant } from '../../theme/components/barChart';
+import { WithResponsiveValue } from '../../utils/responsiveness';
+import { BoxProps } from '../Box';
+export interface BarData {
+    label: string;
+    value: number;
+    color?: Color;
+}
+export interface BarChartProps extends Omit<BoxProps, 'size'> {
+    /**
+     * Array of data points for the bar chart
+     */
+    data: BarData[];
+    /**
+     * Width of the chart - can be a number (pixels), string ('100px', 'auto', '100%'), or responsive values
+     * When set, acts as maxWidth for responsive behavior
+     * @default 400
+     */
+    width?: WithResponsiveValue<number | string>;
+    /**
+     * Minimum width of the chart
+     * @default 200
+     */
+    minWidth?: WithResponsiveValue<number | string>;
+    /**
+     * Maximum width of the chart (if not set, width prop is used as maxWidth)
+     */
+    maxWidth?: WithResponsiveValue<number | string>;
+    /**
+     * Height of the chart in pixels or string
+     * @default 300
+     */
+    height?: WithResponsiveValue<number | string>;
+    /**
+     * Chart margins around the content
+     * @default { top: 20, right: 20, bottom: 40, left: 40 }
+     */
+    chartMargin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * The default color for bars. Can be overridden per bar in data
+     */
+    color?: Color;
+    /**
+     * The size preset for the chart
+     * @default 'md'
+     */
+    size?: ThemeBarChartSize;
+    /**
+     * The visual variant of the bar chart
+     * @default 'default'
+     */
+    variant?: ThemeBarChartVariant;
+    /**
+     * Show grid lines
+     * @default true
+     */
+    showGrid?: boolean;
+    /**
+     * Show X axis
+     * @default true
+     */
+    showXAxis?: boolean;
+    /**
+     * Show Y axis
+     * @default true
+     */
+    showYAxis?: boolean;
+    /**
+     * Orientation of the chart
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Animation duration in milliseconds
+     * @default 300
+     */
+    animationDuration?: number;
+    /**
+     * Test ID for automation
+     */
+    testID?: string;
+}
+export declare const BarChart: React.FC<BarChartProps>;

package/dist/components/BarChart/StyledBarChart.d.ts

@@ -0,0 +1,33 @@
+import { Color } from '../../theme/common';
+import { WithResponsiveValue } from '../../utils/responsiveness';
+interface StyledBarProps {
+    $colorKey: Color;
+    $animationDuration: number;
+}
+interface StyledAxisLineProps {
+    $colorKey: Color | string;
+}
+interface StyledAxisLabelProps {
+    $colorKey: Color | string;
+}
+interface StyledGridLineProps {
+    $colorKey: Color | string;
+}
+export declare const StyledBarChartContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, {
+    $width?: WithResponsiveValue<number | string>;
+    $minWidth?: WithResponsiveValue<number | string>;
+    $maxWidth?: WithResponsiveValue<number | string>;
+}>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledBarChartSvg: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, {
+    $width?: number | string;
+    $height?: number;
+}>> & string;
+export declare const StyledBar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGRectElement>, StyledBarProps>> & string;
+export declare const StyledAxisLine: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGLineElementAttributes<SVGLineElement>, StyledAxisLineProps>> & string;
+export declare const StyledAxisLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGTextElementAttributes<SVGTextElement>, StyledAxisLabelProps>> & string;
+export declare const StyledGridLine: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGLineElementAttributes<SVGLineElement>, StyledGridLineProps>> & string;
+export {};

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

@@ -0,0 +1 @@
+export * from './BarChart';

package/dist/components/LineChart/LineChart.d.ts

@@ -0,0 +1,123 @@
+import { Color } from '../../theme/common';
+import { LineChartSize as ThemeLineChartSize, LineChartVariant as ThemeLineChartVariant, LineChartCurve } from '../../theme/components/lineChart';
+import { WithResponsiveValue } from '../../utils/responsiveness';
+import { BoxProps } from '../Box';
+import * as React from 'react';
+export interface LineDataPoint {
+    x: number | string;
+    y: number;
+}
+export interface LineSeries {
+    id: string;
+    label: string;
+    data: LineDataPoint[];
+    color?: Color;
+    showDots?: boolean;
+    showArea?: boolean;
+    strokeDasharray?: string;
+    strokeWidth?: number;
+}
+export interface LineChartProps extends Omit<BoxProps, 'size'> {
+    /**
+     * Array of line series to display
+     */
+    series: LineSeries[];
+    /**
+     * Width of the chart - can be a number (pixels), string ('100px', 'auto', '100%'), or responsive values
+     * When set, acts as maxWidth for responsive behavior
+     * @default 600
+     */
+    width?: WithResponsiveValue<number | string>;
+    /**
+     * Minimum width of the chart
+     * @default 300
+     */
+    minWidth?: WithResponsiveValue<number | string>;
+    /**
+     * Maximum width of the chart (if not set, width prop is used as maxWidth)
+     */
+    maxWidth?: WithResponsiveValue<number | string>;
+    /**
+     * Height of the chart - can be a number (pixels), string ('100px', 'auto', '100%'), or responsive values
+     * When set, acts as maxHeight for responsive behavior
+     * @default 400
+     */
+    height?: WithResponsiveValue<number | string>;
+    /**
+     * Minimum height of the chart
+     * @default 300
+     */
+    minHeight?: WithResponsiveValue<number | string>;
+    /**
+     * Maximum height of the chart (if not set, height prop is used as maxHeight)
+     */
+    maxHeight?: WithResponsiveValue<number | string>;
+    /**
+     * Chart margins around the content
+     * @default { top: 20, right: 20, bottom: 40, left: 50 }
+     */
+    chartMargin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * The size preset for the chart
+     * @default 'md'
+     */
+    size?: ThemeLineChartSize;
+    /**
+     * The visual variant of the line chart
+     * @default 'default'
+     */
+    variant?: ThemeLineChartVariant;
+    /**
+     * Show grid lines
+     * @default true
+     */
+    showGrid?: boolean;
+    /**
+     * Show X axis
+     * @default true
+     */
+    showXAxis?: boolean;
+    /**
+     * Show Y axis
+     * @default true
+     */
+    showYAxis?: boolean;
+    /**
+     * Show legend
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Legend position
+     * @default 'top'
+     */
+    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Curve type for lines
+     * @default 'linear'
+     */
+    curve?: LineChartCurve;
+    /**
+     * Animation duration in milliseconds
+     * @default 500
+     */
+    animationDuration?: number;
+    /**
+     * X axis labels (optional, will use data x values if not provided)
+     */
+    xAxisLabels?: string[];
+    /**
+     * Y axis domain [min, max] (optional, will auto-calculate if not provided)
+     */
+    yDomain?: [number, number];
+    /**
+     * Test ID for automation
+     */
+    testID?: string;
+}
+export declare const LineChart: React.FC<LineChartProps>;

package/dist/components/LineChart/StyledLineChart.d.ts

@@ -0,0 +1,91 @@
+import { Color } from '../../theme/common';
+import { WithResponsiveValue } from '../../utils/responsiveness';
+interface StyledLineProps {
+    $colorKey: Color;
+    $strokeWidth: number;
+    $strokeDasharray?: string;
+    $animationDuration: number;
+}
+interface StyledAreaProps {
+    $colorKey: Color;
+    $animationDuration: number;
+}
+interface StyledDotProps {
+    $colorKey: Color;
+    $animationDuration: number;
+}
+interface StyledAxisLineProps {
+    $colorKey: Color | string;
+}
+interface StyledAxisLabelProps {
+    $colorKey: Color | string;
+    $fontSize: number;
+}
+interface StyledGridLineProps {
+    $colorKey: Color | string;
+}
+interface StyledLegendContainerProps {
+    $position: 'top' | 'right' | 'bottom' | 'left';
+    $spacing: number;
+}
+interface StyledLegendItemProps {
+    $spacing: number;
+}
+interface StyledLegendLineProps {
+    $colorKey: Color;
+    $strokeWidth: number;
+    $strokeDasharray?: string;
+}
+interface StyledLegendTextProps {
+    $fontSize: number;
+    $colorKey: Color | string;
+}
+export declare const StyledLineChartContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, {
+    $width?: WithResponsiveValue<number | string>;
+    $minWidth?: WithResponsiveValue<number | string>;
+    $maxWidth?: WithResponsiveValue<number | string>;
+    $height?: WithResponsiveValue<number | string>;
+    $minHeight?: WithResponsiveValue<number | string>;
+    $maxHeight?: WithResponsiveValue<number | string>;
+}>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledLineChartSvg: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, {
+    $width?: number | string;
+    $height?: number;
+}>> & string;
+export declare const StyledLine: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGPathElement>, StyledLineProps>> & string;
+export declare const StyledArea: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGPathElement>, StyledAreaProps>> & string;
+export declare const StyledDot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGCircleElement>, StyledDotProps>> & string;
+export declare const StyledAxisLine: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGLineElementAttributes<SVGLineElement>, StyledAxisLineProps>> & string;
+export declare const StyledAxisLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGTextElementAttributes<SVGTextElement>, StyledAxisLabelProps>> & string;
+export declare const StyledGridLine: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGLineElementAttributes<SVGLineElement>, StyledGridLineProps>> & string;
+export declare const StyledLegendContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledLegendContainerProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledLegendItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledLegendItemProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledLegendLine: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledLegendLineProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledLegendText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledLegendTextProps>> & string;
+export declare const StyledTooltip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, never>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTooltipContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, never>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export {};

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

@@ -0,0 +1 @@
+export * from './LineChart';

package/dist/components/PieChart/PieChart.d.ts

@@ -0,0 +1,105 @@
+import { default as React } from 'react';
+import { Color } from '../../theme/common';
+import { PieChartSize as ThemePieChartSize, PieChartVariant as ThemePieChartVariant } from '../../theme/components/pieChart';
+import { WithResponsiveValue } from '../../utils/responsiveness';
+import { BoxProps } from '../Box';
+export interface PieData {
+    label: string;
+    value: number;
+    color?: Color;
+}
+export interface PieChartProps extends Omit<BoxProps, 'size'> {
+    /**
+     * Array of data points for the pie chart
+     */
+    data: PieData[];
+    /**
+     * Width of the chart - can be a number (pixels), string ('100px', 'auto', '100%'), or responsive values
+     * When set, acts as maxWidth for responsive behavior
+     * @default 400
+     */
+    width?: WithResponsiveValue<number | string>;
+    /**
+     * Height of the chart in pixels or string
+     * @default 400
+     */
+    height?: WithResponsiveValue<number | string>;
+    /**
+     * Minimum width of the chart
+     * @default 200
+     */
+    minWidth?: WithResponsiveValue<number | string>;
+    /**
+     * Maximum width of the chart (if not set, width prop is used as maxWidth)
+     */
+    maxWidth?: WithResponsiveValue<number | string>;
+    /**
+     * Minimum height of the chart
+     * @default 200
+     */
+    minHeight?: WithResponsiveValue<number | string>;
+    /**
+     * Maximum height of the chart (if not set, height prop is used as maxHeight)
+     */
+    maxHeight?: WithResponsiveValue<number | string>;
+    /**
+     * Inner radius for donut chart (0-1 as percentage of radius)
+     * @default 0
+     */
+    innerRadius?: number;
+    /**
+     * Outer radius in pixels
+     * @default calculated from width/height
+     */
+    outerRadius?: number;
+    /**
+     * Padding angle between slices in degrees
+     * @default 0
+     */
+    padAngle?: number;
+    /**
+     * Corner radius for slices
+     * @default 0
+     */
+    cornerRadius?: number;
+    /**
+     * The size preset for the chart
+     * @default 'md'
+     */
+    size?: ThemePieChartSize;
+    /**
+     * The visual variant of the pie chart
+     * @default 'default'
+     */
+    variant?: ThemePieChartVariant;
+    /**
+     * Show labels on slices
+     * @default false
+     */
+    showLabels?: boolean;
+    /**
+     * Show legend
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Legend position
+     * @default 'right'
+     */
+    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Animation duration in milliseconds
+     * @default 300
+     */
+    animationDuration?: number;
+    /**
+     * Start angle in degrees
+     * @default -90
+     */
+    startAngle?: number;
+    /**
+     * Test ID for automation
+     */
+    testID?: string;
+}
+export declare const PieChart: React.FC<PieChartProps>;

package/dist/components/PieChart/StyledPieChart.d.ts

@@ -0,0 +1,67 @@
+import { Color } from '../../theme/common';
+import { WithResponsiveValue } from '../../utils/responsiveness';
+interface StyledPieSliceProps {
+    $colorKey: Color;
+    $strokeWidth: number;
+    $strokeColorKey: Color | string;
+    $animationDuration: number;
+    $startAngle: number;
+    $endAngle: number;
+}
+interface StyledPieLabelProps {
+    $colorKey: Color | string;
+    $fontSize: number;
+}
+interface StyledLegendContainerProps {
+    $position: 'top' | 'right' | 'bottom' | 'left';
+    $spacing: number;
+}
+interface StyledLegendItemProps {
+    $spacing: number;
+}
+interface StyledLegendColorProps {
+    $colorKey: Color;
+    $size: number;
+}
+interface StyledLegendTextProps {
+    $fontSize: number;
+    $colorKey: Color | string;
+}
+interface StyledPieChartContainerProps {
+    $legendPosition: 'top' | 'right' | 'bottom' | 'left';
+    $showLegend: boolean;
+    $width?: WithResponsiveValue<number | string>;
+    $height?: WithResponsiveValue<number | string>;
+    $minWidth?: WithResponsiveValue<number | string>;
+    $maxWidth?: WithResponsiveValue<number | string>;
+    $minHeight?: WithResponsiveValue<number | string>;
+    $maxHeight?: WithResponsiveValue<number | string>;
+}
+export declare const StyledPieChartContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledPieChartContainerProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledPieChartSvg: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, {
+    $width?: number | string;
+    $height?: number;
+}>> & string;
+export declare const StyledPieSlice: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGPathElement>, StyledPieSliceProps>> & string;
+export declare const StyledPieLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGTextElementAttributes<SVGTextElement>, StyledPieLabelProps>> & string;
+export declare const StyledLegendContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledLegendContainerProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledLegendItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledLegendItemProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledLegendColor: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledLegendColorProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledLegendText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledLegendTextProps>> & string;
+export {};

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

@@ -0,0 +1 @@
+export * from './PieChart';

package/dist/components/index.d.ts

@@ -22,3 +22,6 @@ export * from './Pagination';
 export * from './Progress';
 export * from './Modal';
 export * from './Tooltip';
+export * from './BarChart';
+export * from './PieChart';
+export * from './LineChart';