@xaui/native 0.0.23 → 0.0.24

package/dist/{components/carousel/carousel.type.d.mts → carousel/index.d.cts}

@@ -1,6 +1,7 @@
-import type { ReactNode } from 'react';
-import type { ViewStyle } from 'react-native';
-import type { Radius } from '../../types';
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { R as Radius } from '../index-BOw6tbkc.cjs';
+
 /**
  * Carousel layout variants
  * - multi-browse: Shows multiple items with the main item centered
@@ -8,11 +9,11 @@ import type { Radius } from '../../types';
  * - hero: Single large item display
  * - full-screen: Items take the full width of the screen
  */
-export type CarouselLayout = 'multi-browse' | 'uncontained' | 'hero' | 'full-screen';
+type CarouselLayout = 'multi-browse' | 'uncontained' | 'hero' | 'full-screen';
 /**
  * Custom appearance styles for carousel components
  */
-export type CarouselCustomAppearance = {
+type CarouselCustomAppearance = {
     /**
      * Custom style for the carousel container
      */
@@ -34,7 +35,7 @@ export type CarouselCustomAppearance = {
      */
     activeIndicator?: ViewStyle;
 };
-export type CarouselProps<T> = {
+type CarouselProps<T> = {
     /**
      * Array of data items to be displayed in the carousel
      */
@@ -110,7 +111,7 @@ export type CarouselProps<T> = {
 /**
  * Props for individual carousel item wrapper
  */
-export type CarouselItemProps = {
+type CarouselItemProps = {
     /**
      * Content to be displayed inside the carousel item
      */
@@ -140,46 +141,7 @@ export type CarouselItemProps = {
      */
     customStyle?: ViewStyle;
 };
-/**
- * Configuration object for carousel layout calculations
- */
-export type CarouselLayoutConfig = {
-    /**
-     * The layout variant of the carousel
-     */
-    layout: CarouselLayout;
-    /**
-     * Total width of the carousel container in pixels
-     */
-    containerWidth: number;
-    /**
-     * Preferred width for carousel items in pixels
-     */
-    preferredItemWidth: number;
-    /**
-     * Spacing between items in pixels
-     */
-    itemSpacing: number;
-    /**
-     * Padding around the content in pixels
-     */
-    contentPadding: number;
-};
-/**
- * Result of carousel layout calculations
- */
-export type CarouselLayoutResult = {
-    /**
-     * Computed width for each carousel item in pixels
-     */
-    computedItemWidth: number;
-    /**
-     * Snap interval for scrolling in pixels
-     */
-    snapInterval: number;
-    /**
-     * Whether paging is enabled for the ScrollView
-     */
-    pagingEnabled: boolean;
-};
-//# sourceMappingURL=carousel.type.d.ts.map
+
+declare function Carousel<T>({ data, renderItem, keyExtractor, layout, itemWidth, itemHeight, itemSpacing, contentPadding, radius, showIndicator, autoPlay, autoPlayInterval, initialIndex, onActiveItemChange, customAppearance, }: CarouselProps<T>): React.JSX.Element;
+
+export { Carousel, type CarouselCustomAppearance, type CarouselItemProps, type CarouselLayout, type CarouselProps };

package/dist/carousel/index.d.ts

@@ -1,3 +1,147 @@
-export { Carousel } from './carousel';
-export type { CarouselProps, CarouselLayout, CarouselCustomAppearance, CarouselItemProps, } from './carousel.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { R as Radius } from '../index-BOw6tbkc.js';
+
+/**
+ * Carousel layout variants
+ * - multi-browse: Shows multiple items with the main item centered
+ * - uncontained: Items can be scrolled freely without constraints
+ * - hero: Single large item display
+ * - full-screen: Items take the full width of the screen
+ */
+type CarouselLayout = 'multi-browse' | 'uncontained' | 'hero' | 'full-screen';
+/**
+ * Custom appearance styles for carousel components
+ */
+type CarouselCustomAppearance = {
+    /**
+     * Custom style for the carousel container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom style for each carousel item
+     */
+    item?: ViewStyle;
+    /**
+     * Custom style for the indicator container
+     */
+    indicatorContainer?: ViewStyle;
+    /**
+     * Custom style for inactive indicators
+     */
+    indicator?: ViewStyle;
+    /**
+     * Custom style for the active indicator
+     */
+    activeIndicator?: ViewStyle;
+};
+type CarouselProps<T> = {
+    /**
+     * Array of data items to be displayed in the carousel
+     */
+    data: T[];
+    /**
+     * Function to render each carousel item
+     */
+    renderItem: (info: {
+        item: T;
+        index: number;
+    }) => ReactNode;
+    /**
+     * Function to extract unique keys for each item
+     */
+    keyExtractor?: (item: T, index: number) => string;
+    /**
+     * The layout variant of the carousel
+     * @default 'multi-browse'
+     */
+    layout?: CarouselLayout;
+    /**
+     * Width of each carousel item in pixels
+     */
+    itemWidth?: number;
+    /**
+     * Height of each carousel item in pixels
+     */
+    itemHeight?: number;
+    /**
+     * Spacing between carousel items in pixels
+     * @default 4 for 'multi-browse', 8 for other layouts
+     */
+    itemSpacing?: number;
+    /**
+     * Padding around the carousel content in pixels
+     * @default 16
+     */
+    contentPadding?: number;
+    /**
+     * Border radius of carousel items
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Whether to show the indicator dots below the carousel
+     * @default true
+     */
+    showIndicator?: boolean;
+    /**
+     * Whether to enable auto-play functionality
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * Interval in milliseconds between auto-play transitions
+     * @default 3000
+     */
+    autoPlayInterval?: number;
+    /**
+     * Initial index to display when the carousel mounts
+     * @default 0
+     */
+    initialIndex?: number;
+    /**
+     * Callback fired when the active item changes
+     */
+    onActiveItemChange?: (index: number) => void;
+    /**
+     * Custom appearance styles for carousel components
+     */
+    customAppearance?: CarouselCustomAppearance;
+};
+/**
+ * Props for individual carousel item wrapper
+ */
+type CarouselItemProps = {
+    /**
+     * Content to be displayed inside the carousel item
+     */
+    children: ReactNode;
+    /**
+     * Width of the carousel item in pixels
+     */
+    width: number;
+    /**
+     * Height of the carousel item in pixels
+     */
+    height: number;
+    /**
+     * Border radius of the carousel item in pixels
+     */
+    radius: number;
+    /**
+     * Spacing to apply after the item (margin right)
+     */
+    spacing: number;
+    /**
+     * Whether this is the last item in the carousel
+     */
+    isLast: boolean;
+    /**
+     * Custom style to be applied to the item container
+     */
+    customStyle?: ViewStyle;
+};
+
+declare function Carousel<T>({ data, renderItem, keyExtractor, layout, itemWidth, itemHeight, itemSpacing, contentPadding, radius, showIndicator, autoPlay, autoPlayInterval, initialIndex, onActiveItemChange, customAppearance, }: CarouselProps<T>): React.JSX.Element;
+
+export { Carousel, type CarouselCustomAppearance, type CarouselItemProps, type CarouselLayout, type CarouselProps };

package/dist/carousel/index.js

@@ -1,6 +1,6 @@
 import {
   useBorderRadiusStyles
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-I4V5Y5GD.js";
 
 // src/components/carousel/carousel.tsx
 import React3, { useState, useRef, useCallback, useEffect } from "react";

package/dist/chart/index.cjs

@@ -844,7 +844,15 @@ var LineChartCard = ({
       const y = graphHeight - ratio * graphHeight;
       return { x, y };
     });
-  }, [chartWidth, dataRange, graphHeight, minValue, normalizedData, paddingX, rightPadding]);
+  }, [
+    chartWidth,
+    dataRange,
+    graphHeight,
+    minValue,
+    normalizedData,
+    paddingX,
+    rightPadding
+  ]);
   const linePath = lineMode === "smooth" ? buildSmoothPath(points) : buildDirectPath(points);
   const areaPath = points.length ? `${linePath} L ${points[points.length - 1].x} ${graphHeight} L ${points[0].x} ${graphHeight} Z` : "";
   const PathElement = SvgElements2.Path;
@@ -859,31 +867,44 @@ var LineChartCard = ({
       ]
     },
     title !== void 0 && /* @__PURE__ */ import_react4.default.createElement(import_react_native5.Text, { style: [styles.barTitle, { color: textColor }] }, title),
-    /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: styles.barChartRow }, showAxes && /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: styles.yAxis }, /* @__PURE__ */ import_react4.default.createElement(import_react_native5.Text, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(maxValue)), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.Text, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(meanValue)), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.Text, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(minValue))), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: styles.chartAndLabels }, /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: [styles.lineChartArea, { width: chartWidth, height: chartHeight }] }, showAxes && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: [styles.lineChartGrid, { top: 0 }] }), /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: styles.barChartRow }, showAxes && /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: styles.yAxis }, /* @__PURE__ */ import_react4.default.createElement(import_react_native5.Text, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(maxValue)), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.Text, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(meanValue)), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.Text, { style: [styles.yAxisLabel, { color: textColor }] }, formatAxisValue(minValue))), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: styles.chartAndLabels }, /* @__PURE__ */ import_react4.default.createElement(
       import_react_native5.View,
       {
-        style: [styles.lineChartGrid, { top: Math.round(chartHeight / 2) }]
-      }
-    ), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: [styles.lineChartGrid, { top: chartHeight - 1 }] })), /* @__PURE__ */ import_react4.default.createElement(import_react_native_svg3.default, { width: chartWidth, height: chartHeight }, !!areaPath && (PathElement ? /* @__PURE__ */ import_react4.default.createElement(PathElement, { d: areaPath, fill: areaColor }) : null), !!linePath && (PathElement ? /* @__PURE__ */ import_react4.default.createElement(
-      PathElement,
-      {
-        d: linePath,
-        fill: "none",
-        stroke: lineColor,
-        strokeWidth: 2.5,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ) : null), showPoints && points.map((point, index) => /* @__PURE__ */ import_react4.default.createElement(
-      import_react_native_svg3.Circle,
-      {
-        key: `line-point-${index}`,
-        cx: point.x,
-        cy: point.y,
-        r: 3.8,
-        fill: lineColor
-      }
-    )))), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: [styles.xAxisRow, { width: chartWidth }] }, normalizedData.map((item, index) => /* @__PURE__ */ import_react4.default.createElement(
+        style: [
+          styles.lineChartArea,
+          { width: chartWidth, height: chartHeight }
+        ]
+      },
+      showAxes && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: [styles.lineChartGrid, { top: 0 }] }), /* @__PURE__ */ import_react4.default.createElement(
+        import_react_native5.View,
+        {
+          style: [
+            styles.lineChartGrid,
+            { top: Math.round(chartHeight / 2) }
+          ]
+        }
+      ), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: [styles.lineChartGrid, { top: chartHeight - 1 }] })),
+      /* @__PURE__ */ import_react4.default.createElement(import_react_native_svg3.default, { width: chartWidth, height: chartHeight }, !!areaPath && (PathElement ? /* @__PURE__ */ import_react4.default.createElement(PathElement, { d: areaPath, fill: areaColor }) : null), !!linePath && (PathElement ? /* @__PURE__ */ import_react4.default.createElement(
+        PathElement,
+        {
+          d: linePath,
+          fill: "none",
+          stroke: lineColor,
+          strokeWidth: 2.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) : null), showPoints && points.map((point, index) => /* @__PURE__ */ import_react4.default.createElement(
+        import_react_native_svg3.Circle,
+        {
+          key: `line-point-${index}`,
+          cx: point.x,
+          cy: point.y,
+          r: 3.8,
+          fill: lineColor
+        }
+      )))
+    ), /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: [styles.xAxisRow, { width: chartWidth }] }, normalizedData.map((item, index) => /* @__PURE__ */ import_react4.default.createElement(
       import_react_native5.View,
       {
         key: `${item.label}-${index}-line-x`,

package/dist/{components/chart/chart.type.d.ts → chart/index.d.cts}

@@ -1,9 +1,12 @@
-import type { ViewStyle } from 'react-native';
-import type { ElevationLevel } from '../button/button.type';
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type ElevationLevel = 0 | 1 | 2 | 3 | 4;
+
 /**
  * Data item for a donut chart segment
  */
-export type DonutChartDataItem = {
+type DonutChartDataItem = {
     /** Label text for the segment */
     label: string;
     /** Numeric value of the segment */
@@ -16,11 +19,11 @@ export type DonutChartDataItem = {
 /**
  * Position of the legend relative to the chart
  */
-export type DonutChartLegendPosition = 'top' | 'left' | 'right' | 'bottom';
+type DonutChartLegendPosition = 'top' | 'left' | 'right' | 'bottom';
 /**
  * Props for DonutChartCard component
  */
-export type DonutChartCardProps = {
+type DonutChartCardProps = {
     /** Array of data items to display */
     data: DonutChartDataItem[];
     /** Whether to show the legend. Default: true */
@@ -47,7 +50,7 @@ export type DonutChartCardProps = {
 /**
  * Data item for a vertical bar chart
  */
-export type VerticalBarChartDataItem = {
+type VerticalBarChartDataItem = {
     /** Label for the bar (X-axis) */
     label: string;
     /** Numeric value (height) of the bar */
@@ -58,7 +61,7 @@ export type VerticalBarChartDataItem = {
 /**
  * Props for VerticalBarChartCard component
  */
-export type VerticalBarChartCardProps = {
+type VerticalBarChartCardProps = {
     /** Array of data items to display */
     data: VerticalBarChartDataItem[];
     /** Chart title displayed at the top */
@@ -87,7 +90,7 @@ export type VerticalBarChartCardProps = {
 /**
  * Data item for a pie chart segment
  */
-export type PieChartDataItem = {
+type PieChartDataItem = {
     /** Label text for the segment */
     label: string;
     /** Numeric value of the segment */
@@ -100,7 +103,7 @@ export type PieChartDataItem = {
 /**
  * Props for PieChartCard component
  */
-export type PieChartCardProps = {
+type PieChartCardProps = {
     /** Array of data items to display */
     data: PieChartDataItem[];
     /** Chart title displayed at the top */
@@ -125,7 +128,7 @@ export type PieChartCardProps = {
 /**
  * Data item for a line chart point
  */
-export type LineChartDataItem = {
+type LineChartDataItem = {
     /** Label for the data point (X-axis) */
     label: string;
     /** Numeric value (Y-axis) */
@@ -134,11 +137,11 @@ export type LineChartDataItem = {
 /**
  * Line rendering mode
  */
-export type LineChartMode = 'smooth' | 'direct';
+type LineChartMode = 'smooth' | 'direct';
 /**
  * Props for LineChartCard component
  */
-export type LineChartCardProps = {
+type LineChartCardProps = {
     /** Array of data points to display */
     data: LineChartDataItem[];
     /** Chart title displayed at the top */
@@ -171,7 +174,7 @@ export type LineChartCardProps = {
 /**
  * Props for HeatmapChartCard component
  */
-export type HeatmapChartCardProps = {
+type HeatmapChartCardProps = {
     /** 2D array of numeric values to display. Each inner array is a row. */
     data: number[][];
     /** Chart title displayed at the top */
@@ -201,4 +204,15 @@ export type HeatmapChartCardProps = {
     /** Additional styles for the card container */
     style?: ViewStyle;
 };
-//# sourceMappingURL=chart.type.d.ts.map
+
+declare const DonutChartCard: React.FC<DonutChartCardProps>;
+
+declare const VerticalBarChartCard: React.FC<VerticalBarChartCardProps>;
+
+declare const PieChartCard: React.FC<PieChartCardProps>;
+
+declare const LineChartCard: React.FC<LineChartCardProps>;
+
+declare const HeatmapChartCard: React.FC<HeatmapChartCardProps>;
+
+export { DonutChartCard, type DonutChartCardProps, type DonutChartDataItem, type DonutChartLegendPosition, HeatmapChartCard, type HeatmapChartCardProps, LineChartCard, type LineChartCardProps, type LineChartDataItem, type LineChartMode, PieChartCard, type PieChartCardProps, type PieChartDataItem, VerticalBarChartCard, type VerticalBarChartCardProps, type VerticalBarChartDataItem };

package/dist/chart/index.d.ts

@@ -1,7 +1,218 @@
-export { DonutChartCard } from './donut-chart-card';
-export { VerticalBarChartCard } from './vertical-bar-chart-card';
-export { PieChartCard } from './pie-chart-card';
-export { LineChartCard } from './line-chart-card';
-export { HeatmapChartCard } from './heatmap-chart-card';
-export type { DonutChartCardProps, DonutChartDataItem, DonutChartLegendPosition, VerticalBarChartCardProps, VerticalBarChartDataItem, PieChartCardProps, PieChartDataItem, LineChartCardProps, LineChartDataItem, LineChartMode, HeatmapChartCardProps, } from './chart.type';
-//# sourceMappingURL=index.d.ts.map
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type ElevationLevel = 0 | 1 | 2 | 3 | 4;
+
+/**
+ * Data item for a donut chart segment
+ */
+type DonutChartDataItem = {
+    /** Label text for the segment */
+    label: string;
+    /** Numeric value of the segment */
+    value: number;
+    /** Hex color for the segment */
+    color: string;
+    /** Optional custom color for the label text */
+    labelColor?: string;
+};
+/**
+ * Position of the legend relative to the chart
+ */
+type DonutChartLegendPosition = 'top' | 'left' | 'right' | 'bottom';
+/**
+ * Props for DonutChartCard component
+ */
+type DonutChartCardProps = {
+    /** Array of data items to display */
+    data: DonutChartDataItem[];
+    /** Whether to show the legend. Default: true */
+    showLegend?: boolean;
+    /** Position of the legend. Default: 'bottom' */
+    legendPosition?: DonutChartLegendPosition;
+    /** Total value to display in the center */
+    total?: string | number;
+    /** Chart title displayed at the top */
+    title?: string;
+    /** Elevation level for shadow effect. Default: 0 */
+    elevation?: ElevationLevel;
+    /** Background color of the card. Default: '#6a6a6a30' */
+    backgroundColor?: string;
+    /** Text color for labels and values. Default: '#ffffff' */
+    textColor?: string;
+    /** Diameter of the chart in pixels. Default: 220 */
+    size?: number;
+    /** Width of the donut ring in pixels. Default: 24 */
+    strokeWidth?: number;
+    /** Additional styles for the card container */
+    style?: ViewStyle;
+};
+/**
+ * Data item for a vertical bar chart
+ */
+type VerticalBarChartDataItem = {
+    /** Label for the bar (X-axis) */
+    label: string;
+    /** Numeric value (height) of the bar */
+    value: number;
+    /** Optional custom color for the bar */
+    color?: string;
+};
+/**
+ * Props for VerticalBarChartCard component
+ */
+type VerticalBarChartCardProps = {
+    /** Array of data items to display */
+    data: VerticalBarChartDataItem[];
+    /** Chart title displayed at the top */
+    title?: string;
+    /** Elevation level for shadow effect. Default: 0 */
+    elevation?: ElevationLevel;
+    /** Background color of the card. Default: '#6a6a6a30' */
+    backgroundColor?: string;
+    /** Text color for labels and values. Default: '#ffffff' */
+    textColor?: string;
+    /** Height of the chart area in pixels. Default: 280 */
+    size?: number;
+    /** Whether to show X and Y axes. Default: false */
+    showAxes?: boolean;
+    /** Whether to abbreviate X-axis labels. Default: false */
+    abbreviateXAxisLabels?: boolean;
+    /** Max length for abbreviated labels. Default: 3 */
+    xAxisAbbreviationLength?: number;
+    /** Whether to show full legend below chart. Default: false */
+    showFullLegendBelow?: boolean;
+    /** Whether to space bars evenly. Default: false */
+    justifyBars?: boolean;
+    /** Additional styles for the card container */
+    style?: ViewStyle;
+};
+/**
+ * Data item for a pie chart segment
+ */
+type PieChartDataItem = {
+    /** Label text for the segment */
+    label: string;
+    /** Numeric value of the segment */
+    value: number;
+    /** Hex color for the segment */
+    color: string;
+    /** Optional custom color for the label text */
+    labelColor?: string;
+};
+/**
+ * Props for PieChartCard component
+ */
+type PieChartCardProps = {
+    /** Array of data items to display */
+    data: PieChartDataItem[];
+    /** Chart title displayed at the top */
+    title?: string;
+    /** Total value to display in header */
+    total?: string | number;
+    /** Whether to show the legend. Default: true */
+    showLegend?: boolean;
+    /** Position of the legend. Default: 'bottom' */
+    legendPosition?: DonutChartLegendPosition;
+    /** Elevation level for shadow effect. Default: 0 */
+    elevation?: ElevationLevel;
+    /** Background color of the card. Default: '#6a6a6a30' */
+    backgroundColor?: string;
+    /** Text color for labels and values. Default: '#ffffff' */
+    textColor?: string;
+    /** Diameter of the chart in pixels. Default: 220 */
+    size?: number;
+    /** Additional styles for the card container */
+    style?: ViewStyle;
+};
+/**
+ * Data item for a line chart point
+ */
+type LineChartDataItem = {
+    /** Label for the data point (X-axis) */
+    label: string;
+    /** Numeric value (Y-axis) */
+    value: number;
+};
+/**
+ * Line rendering mode
+ */
+type LineChartMode = 'smooth' | 'direct';
+/**
+ * Props for LineChartCard component
+ */
+type LineChartCardProps = {
+    /** Array of data points to display */
+    data: LineChartDataItem[];
+    /** Chart title displayed at the top */
+    title?: string;
+    /** Elevation level for shadow effect. Default: 0 */
+    elevation?: ElevationLevel;
+    /** Background color of the card. Default: '#6a6a6a30' */
+    backgroundColor?: string;
+    /** Text color for labels and values. Default: '#ffffff' */
+    textColor?: string;
+    /** Height of the chart area in pixels. Default: 300 */
+    size?: number;
+    /** Whether to show X and Y axes. Default: false */
+    showAxes?: boolean;
+    /** Whether to show points at data values. Default: false */
+    showPoints?: boolean;
+    /** Line rendering mode. Default: 'smooth' */
+    lineMode?: LineChartMode;
+    /** Color of the line. Default: '#57C9ED' */
+    lineColor?: string;
+    /** Color of the area under the line. Default: transparent */
+    areaColor?: string;
+    /** Whether to abbreviate X-axis labels. Default: false */
+    abbreviateXAxisLabels?: boolean;
+    /** Max length for abbreviated labels. Default: 3 */
+    xAxisAbbreviationLength?: number;
+    /** Additional styles for the card container */
+    style?: ViewStyle;
+};
+/**
+ * Props for HeatmapChartCard component
+ */
+type HeatmapChartCardProps = {
+    /** 2D array of numeric values to display. Each inner array is a row. */
+    data: number[][];
+    /** Chart title displayed at the top */
+    title?: string;
+    /** Labels for columns (X-axis) */
+    xLabels?: string[];
+    /** Labels for rows (Y-axis) */
+    yLabels?: string[];
+    /** Whether to show numeric values inside cells. Default: false */
+    showValues?: boolean;
+    /** Whether to show color scale legend. Default: true */
+    showLegend?: boolean;
+    /** Start color for gradient (low values). Default: '#3B82F6' (blue) */
+    startColor?: string;
+    /** End color for gradient (high values). Default: '#EF4444' (red) */
+    endColor?: string;
+    /** Elevation level for shadow effect. Default: 0 */
+    elevation?: ElevationLevel;
+    /** Background color of the card. Default: '#6a6a6a30' */
+    backgroundColor?: string;
+    /** Text color for labels. Default: '#ffffff' */
+    textColor?: string;
+    /** Size of each cell in pixels. Default: 32 */
+    cellSize?: number;
+    /** Gap between cells in pixels. Default: 4 */
+    cellGap?: number;
+    /** Additional styles for the card container */
+    style?: ViewStyle;
+};
+
+declare const DonutChartCard: React.FC<DonutChartCardProps>;
+
+declare const VerticalBarChartCard: React.FC<VerticalBarChartCardProps>;
+
+declare const PieChartCard: React.FC<PieChartCardProps>;
+
+declare const LineChartCard: React.FC<LineChartCardProps>;
+
+declare const HeatmapChartCard: React.FC<HeatmapChartCardProps>;
+
+export { DonutChartCard, type DonutChartCardProps, type DonutChartDataItem, type DonutChartLegendPosition, HeatmapChartCard, type HeatmapChartCardProps, LineChartCard, type LineChartCardProps, type LineChartDataItem, type LineChartMode, PieChartCard, type PieChartCardProps, type PieChartDataItem, VerticalBarChartCard, type VerticalBarChartCardProps, type VerticalBarChartDataItem };