@salesmind-ai/design-system 0.2.1 → 0.3.0

package/dist/charts/index.d.ts

@@ -0,0 +1,453 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { g as ChartIntent, j as ChartTypeId, M as MBTIType } from '../chart-types-BGVVO-zl.js';
+
+interface ChartContainerProps<T = Record<string, unknown>> {
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle/description */
+    subtitle?: string;
+    /** Chart height */
+    height?: number;
+    /** Chart data for validation */
+    data?: T[];
+    /** Required fields for data validation */
+    requiredFields?: string[];
+    /** Minimum sample size */
+    minSampleSize?: number;
+    /** Show data coverage badge */
+    showCoverage?: boolean;
+    /** Date range for coverage badge */
+    dateRange?: {
+        start: string;
+        end: string;
+    };
+    /** Loading state */
+    loading?: boolean;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Chart children (Recharts components) */
+    children: React__default.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * ChartContainer wraps charts with responsive sizing, theming, and data state handling.
+ * It enforces data contracts and shows appropriate states when data is invalid.
+ */
+declare function ChartContainer<T extends Record<string, unknown>>({ title, subtitle, height, data, requiredFields, minSampleSize, showCoverage, dateRange, loading, emptyMessage, children, className, ...props }: ChartContainerProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace ChartContainer {
+    var displayName: string;
+}
+
+interface LineConfig {
+    /** Data key for the line */
+    key: string;
+    /** Display name */
+    name?: string;
+    /** Line color (CSS variable or hex) */
+    color?: string;
+    /** Dashed line */
+    dashed?: boolean;
+    /** Show dots on data points */
+    dot?: boolean;
+}
+interface LineChartProps<T = Record<string, unknown>> {
+    /** Chart data */
+    data: T[];
+    /** X-axis data key */
+    xKey: string;
+    /** Line configurations */
+    lines: LineConfig[];
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Chart height */
+    height?: number;
+    /** Show grid lines */
+    grid?: boolean;
+    /** Show legend */
+    legend?: boolean;
+    /** Curve type */
+    curve?: 'linear' | 'monotone' | 'step';
+    /** Custom tooltip formatter */
+    tooltipFormatter?: (value: number, name: string) => string;
+    /** Minimum sample size */
+    minSampleSize?: number;
+    /** Date range */
+    dateRange?: {
+        start: string;
+        end: string;
+    };
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * LineChart displays time-series or trend data.
+ * Requires minimum 7 data points for meaningful visualization.
+ */
+declare function LineChart<T extends Record<string, unknown>>({ data, xKey, lines, title, subtitle, height, grid, legend: showLegend, curve, minSampleSize, dateRange, className, }: LineChartProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace LineChart {
+    var displayName: string;
+}
+
+interface BarConfig {
+    /** Data key for the bar */
+    key: string;
+    /** Display name */
+    name?: string;
+    /** Bar color (CSS variable or hex) */
+    color?: string;
+    /** Stack ID for stacked bars */
+    stackId?: string;
+}
+interface BarChartProps<T = Record<string, unknown>> {
+    /** Chart data */
+    data: T[];
+    /** X-axis data key (category key) */
+    xKey: string;
+    /** Bar configurations */
+    bars: BarConfig[];
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Chart height */
+    height?: number;
+    /** Layout direction */
+    layout?: 'horizontal' | 'vertical';
+    /** Show grid lines */
+    grid?: boolean;
+    /** Show legend */
+    legend?: boolean;
+    /** Bar corner radius */
+    radius?: number;
+    /** Show value labels on bars */
+    showLabels?: boolean;
+    /** Custom tooltip formatter */
+    tooltipFormatter?: (value: number, name: string) => string;
+    /** Minimum sample size */
+    minSampleSize?: number;
+    /** Use category colors (different color per bar in single series) */
+    categoryColors?: string[];
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * BarChart displays comparisons and distributions.
+ * Requires minimum 5 categories for meaningful visualization.
+ */
+declare function BarChart<T extends Record<string, unknown>>({ data, xKey, bars, title, subtitle, height, layout, grid, legend: showLegend, radius, showLabels, minSampleSize, categoryColors, className, }: BarChartProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace BarChart {
+    var displayName: string;
+}
+
+interface PieChartDataItem {
+    name: string;
+    value: number;
+    color?: string;
+}
+interface PieChartProps {
+    /** Chart data */
+    data: PieChartDataItem[];
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Chart height */
+    height?: number;
+    /** Inner radius for donut effect (0 = pie, >0 = donut) */
+    innerRadius?: number;
+    /** Outer radius */
+    outerRadius?: number;
+    /** Show labels */
+    showLabels?: boolean;
+    /** Label type */
+    labelType?: 'percent' | 'value' | 'name';
+    /** Show legend */
+    legend?: boolean;
+    /** Custom tooltip formatter */
+    tooltipFormatter?: (value: number, name: string) => string;
+    /** Minimum sample size (total of all values) */
+    minSampleSize?: number;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * PieChart displays proportions and compositions.
+ * Requires minimum 3 segments and n > 30 for meaningful visualization.
+ */
+declare function PieChart({ data, title, subtitle, height, innerRadius, outerRadius, showLabels, labelType, legend: showLegend, minSampleSize, className, }: PieChartProps): react_jsx_runtime.JSX.Element;
+declare namespace PieChart {
+    var displayName: string;
+}
+
+interface FunnelStage {
+    /** Stage name */
+    name: string;
+    /** Value/count at this stage */
+    value: number;
+    /** Optional color override */
+    color?: string;
+}
+interface FunnelChartProps {
+    /** Funnel stages (min 3 required) */
+    stages: FunnelStage[];
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Show conversion rates between stages */
+    showConversionRates?: boolean;
+    /** Show drop-off percentages */
+    showDropOff?: boolean;
+    /** Show value labels */
+    showValues?: boolean;
+    /** Height in pixels */
+    height?: number;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * FunnelChart visualizes conversion funnels and drop-off rates.
+ * Requires minimum 3 stages for meaningful visualization.
+ */
+declare function FunnelChart({ stages, title, subtitle, showConversionRates, showDropOff, showValues, height, className, }: FunnelChartProps): react_jsx_runtime.JSX.Element;
+declare namespace FunnelChart {
+    var displayName: string;
+}
+
+interface HeatmapCell {
+    /** X-axis value (column) */
+    x: string;
+    /** Y-axis value (row) */
+    y: string;
+    /** Cell value */
+    value: number;
+}
+interface HeatmapChartProps {
+    /** Heatmap data */
+    data: HeatmapCell[];
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** X-axis label */
+    xLabel?: string;
+    /** Y-axis label */
+    yLabel?: string;
+    /** Color scale (low to high) */
+    colorScale?: [string, string];
+    /** Show cell values */
+    showValues?: boolean;
+    /** Value formatter */
+    valueFormatter?: (value: number) => string;
+    /** Minimum cells required */
+    minCells?: number;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * HeatmapChart visualizes density and correlation data.
+ * Requires minimum 25 cells for meaningful visualization.
+ */
+declare function HeatmapChart({ data, title, subtitle, xLabel, yLabel, colorScale, showValues, valueFormatter, minCells, className, }: HeatmapChartProps): react_jsx_runtime.JSX.Element;
+declare namespace HeatmapChart {
+    var displayName: string;
+}
+
+interface ChartDimension {
+    /** Field key in data */
+    key: string;
+    /** Display label */
+    label?: string;
+    /** Is this a time dimension */
+    isTime?: boolean;
+}
+interface ChartMeasure {
+    /** Field key in data */
+    key: string;
+    /** Display label */
+    label?: string;
+    /** Color (CSS variable or hex) */
+    color?: string;
+    /** Stack group ID */
+    stackId?: string;
+}
+interface ChartProps<T = Record<string, unknown>> {
+    /** Semantic intent of the visualization */
+    intent: ChartIntent;
+    /** Chart data */
+    data: T[];
+    /** Dimension fields (categories, time axis) */
+    dimensions: ChartDimension[];
+    /** Measure fields (values to visualize) */
+    measures: ChartMeasure[];
+    /** Default chart type */
+    defaultType?: ChartTypeId;
+    /** Allowed chart types for switching (defaults to all MVP types in family) */
+    allowedTypes?: ChartTypeId[];
+    /** Controlled chart type */
+    chartType?: ChartTypeId;
+    /** Callback when chart type changes */
+    onChartTypeChange?: (type: ChartTypeId) => void;
+    /** Allow user to switch chart types */
+    allowSwitching?: boolean;
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Chart height */
+    height?: number;
+    /** Show legend */
+    legend?: boolean;
+    /** Show grid */
+    grid?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Chart is the unified abstraction layer for all visualizations.
+ *
+ * It provides:
+ * - Intent-based chart selection
+ * - Data contract validation
+ * - Governed chart switching within semantic families
+ * - Consistent theming and accessibility
+ *
+ * @example
+ * ```tsx
+ * <Chart
+ *   intent="trend"
+ *   data={timeSeriesData}
+ *   dimensions={[{ key: 'date', isTime: true }]}
+ *   measures={[{ key: 'revenue', label: 'Revenue' }]}
+ *   defaultType="line"
+ *   allowSwitching
+ * />
+ * ```
+ */
+declare function Chart<T extends Record<string, unknown>>({ intent, data, dimensions, measures, defaultType, allowedTypes, chartType: controlledType, onChartTypeChange, allowSwitching, title, subtitle, height, legend: showLegend, grid, className, }: ChartProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace Chart {
+    var displayName: string;
+}
+
+interface ChartSwitchControlProps {
+    /** Currently selected chart type */
+    currentType: ChartTypeId;
+    /** Allowed chart types for switching */
+    allowedTypes: ChartTypeId[];
+    /** Callback when type changes */
+    onTypeChange: (type: ChartTypeId) => void;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * ChartSwitchControl allows users to switch between allowed chart types
+ * within the same semantic family.
+ */
+declare function ChartSwitchControl({ currentType, allowedTypes, onTypeChange, size, className, }: ChartSwitchControlProps): react_jsx_runtime.JSX.Element | null;
+declare namespace ChartSwitchControl {
+    var displayName: string;
+}
+
+/**
+ * MBTI dimension scores representing preference strengths.
+ * Values should be 0-100 where 50 is neutral.
+ */
+interface MBTIDimensions {
+    /** Extraversion (0) vs Introversion (100) */
+    EI: number;
+    /** Sensing (0) vs Intuition (100) */
+    SN: number;
+    /** Thinking (0) vs Feeling (100) */
+    TF: number;
+    /** Judging (0) vs Perceiving (100) */
+    JP: number;
+}
+interface MBTIRadarProps {
+    /** MBTI dimension scores */
+    dimensions: MBTIDimensions;
+    /** Sample size for confidence calculation */
+    sampleSize: number;
+    /** Optional comparison dimensions (e.g., benchmark) */
+    comparison?: MBTIDimensions;
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Chart size */
+    size?: number;
+    /** Show dimension labels */
+    showLabels?: boolean;
+    /** Show values on hover */
+    showValues?: boolean;
+    /** Minimum sample size (default: 20) */
+    minSampleSize?: number;
+    /** Confidence score (0-100) */
+    confidence?: number;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * MBTIRadar visualizes personality dimension scores as a radar chart.
+ * Requires minimum 20 samples for meaningful visualization.
+ *
+ * Each dimension is scored 0-100:
+ * - EI: 0 = Extraversion, 100 = Introversion
+ * - SN: 0 = Sensing, 100 = Intuition
+ * - TF: 0 = Thinking, 100 = Feeling
+ * - JP: 0 = Judging, 100 = Perceiving
+ */
+declare function MBTIRadar({ dimensions, sampleSize, comparison, title, subtitle, size, showLabels, showValues, minSampleSize, confidence, className, }: MBTIRadarProps): react_jsx_runtime.JSX.Element;
+declare namespace MBTIRadar {
+    var displayName: string;
+}
+
+interface MBTITypeCount {
+    /** MBTI type */
+    type: MBTIType;
+    /** Count of individuals with this type */
+    count: number;
+    /** Optional response rate for this type */
+    responseRate?: number;
+}
+interface MBTITypeGridProps {
+    /** Distribution of MBTI types */
+    data: MBTITypeCount[];
+    /** Total sample size (sum of all counts) */
+    sampleSize?: number;
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Show percentage labels */
+    showPercentages?: boolean;
+    /** Show count labels */
+    showCounts?: boolean;
+    /** Highlight types above this threshold (percentage) */
+    highlightThreshold?: number;
+    /** Minimum sample size (default: 50) */
+    minSampleSize?: number;
+    /** Confidence score (0-100) */
+    confidence?: number;
+    /** Click handler for type selection */
+    onTypeClick?: (type: MBTIType) => void;
+    /** Currently selected type */
+    selectedType?: MBTIType;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * MBTITypeGrid displays the distribution of all 16 MBTI types in a 4x4 grid.
+ * Requires minimum 50 samples for meaningful visualization.
+ */
+declare function MBTITypeGrid({ data, sampleSize: propSampleSize, title, subtitle, showPercentages, showCounts, highlightThreshold, minSampleSize, confidence, onTypeClick, selectedType, className, }: MBTITypeGridProps): react_jsx_runtime.JSX.Element;
+declare namespace MBTITypeGrid {
+    var displayName: string;
+}
+
+export { BarChart, type BarChartProps, type BarConfig, Chart, ChartContainer, type ChartContainerProps, type ChartDimension, type ChartMeasure, type ChartProps, ChartSwitchControl, type ChartSwitchControlProps, FunnelChart, type FunnelChartProps, type FunnelStage, type HeatmapCell, HeatmapChart, type HeatmapChartProps, LineChart, type LineChartProps, type LineConfig, type MBTIDimensions, MBTIRadar, type MBTIRadarProps, type MBTITypeCount, MBTITypeGrid, type MBTITypeGridProps, PieChart, type PieChartDataItem, type PieChartProps };