@aic-kits/react 0.30.0 → 0.31.0

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

@@ -1,6 +1,7 @@
 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;
@@ -13,15 +14,25 @@ export interface BarChartProps extends Omit<BoxProps, 'size'> {
      */
     data: BarData[];
     /**
-     * Width of the chart in pixels
+     * 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?: number;
+    width?: WithResponsiveValue<number | string>;
     /**
-     * Height of the chart in pixels
+     * 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?: number;
+    height?: WithResponsiveValue<number | string>;
     /**
      * Chart margins around the content
      * @default { top: 20, right: 20, bottom: 40, left: 40 }

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

@@ -1,4 +1,5 @@
 import { Color } from '../../theme/common';
+import { WithResponsiveValue } from '../../utils/responsiveness';
 interface StyledBarProps {
     $colorKey: Color;
     $animationDuration: number;
@@ -12,13 +13,17 @@ interface StyledAxisLabelProps {
 interface StyledGridLineProps {
     $colorKey: Color | string;
 }
-export declare const StyledBarChartContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').BoxProps & {
+export declare const StyledBarChartContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
     ref?: import('react').ForwardedRef<HTMLDivElement>;
-}, never>> & string & Omit<(props: import('..').BoxProps & {
+}, {
+    $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;
+    $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;

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

@@ -1,7 +1,8 @@
-import { default as React } from 'react';
 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;
@@ -14,6 +15,7 @@ export interface LineSeries {
     showDots?: boolean;
     showArea?: boolean;
     strokeDasharray?: string;
+    strokeWidth?: number;
 }
 export interface LineChartProps extends Omit<BoxProps, 'size'> {
     /**
@@ -21,15 +23,35 @@ export interface LineChartProps extends Omit<BoxProps, 'size'> {
      */
     series: LineSeries[];
     /**
-     * Width of the chart in pixels
+     * 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?: number;
+    width?: WithResponsiveValue<number | string>;
     /**
-     * Height of the chart in pixels
+     * 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?: number;
+    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 }

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

@@ -1,4 +1,5 @@
 import { Color } from '../../theme/common';
+import { WithResponsiveValue } from '../../utils/responsiveness';
 interface StyledLineProps {
     $colorKey: Color;
     $strokeWidth: number;
@@ -39,13 +40,20 @@ interface StyledLegendTextProps {
     $fontSize: number;
     $colorKey: Color | string;
 }
-export declare const StyledLineChartContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').BoxProps & {
+export declare const StyledLineChartContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
     ref?: import('react').ForwardedRef<HTMLDivElement>;
-}, never>> & string & Omit<(props: import('..').BoxProps & {
+}, {
+    $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;
+    $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;

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

@@ -1,6 +1,7 @@
 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;
@@ -13,15 +14,34 @@ export interface PieChartProps extends Omit<BoxProps, 'size'> {
      */
     data: PieData[];
     /**
-     * Width of the chart in pixels
+     * 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?: number;
+    width?: WithResponsiveValue<number | string>;
     /**
-     * Height of the chart in pixels
+     * Height of the chart in pixels or string
      * @default 400
      */
-    height?: number;
+    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

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

@@ -1,4 +1,5 @@
 import { Color } from '../../theme/common';
+import { WithResponsiveValue } from '../../utils/responsiveness';
 interface StyledPieSliceProps {
     $colorKey: Color;
     $strokeWidth: number;
@@ -29,6 +30,12 @@ interface StyledLegendTextProps {
 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>;
@@ -36,7 +43,7 @@ export declare const StyledPieChartContainer: import('styled-components/dist/typ
     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;
+    $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;