react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/types/components/lib/charts/DumbbellChart.d.ts

@@ -0,0 +1,31 @@
+/**
+ * DumbbellChart — Two values per row connected by a bar, showing the gap between
+ * a "before" and "after" (or two groups) for each item.
+ *
+ * @param {Array<{label: string, a: number, b: number}>} items - Pairs to compare.
+ * @param {string} aLabel - Name of the first value.
+ * @param {string} bLabel - Name of the second value.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface DumbbellChartProps {
+    title?: string;
+    subtitle?: string;
+    items?: Array<{
+        label: string;
+        a: number;
+        b: number;
+    }>;
+    aLabel?: string;
+    bLabel?: string;
+    prefix?: string;
+    suffix?: string;
+    colors?: string[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function DumbbellChart({ title, subtitle, items, aLabel, bLabel, prefix, suffix, colors, variant, size, className, }: DumbbellChartProps): import("react").JSX.Element;
+export default DumbbellChart;

package/dist/types/components/lib/charts/ForecastLineChart.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ForecastLineChart — Actuals as a solid line, projection as a dashed line with
+ * a widening confidence cone and a "today" divider.
+ *
+ * @param {string[]} categories - X-axis labels covering actual + forecast periods.
+ * @param {number[]} actual - Observed values (first N periods).
+ * @param {number[]} forecast - Projected values for the remaining periods.
+ * @param {number} confidence - Relative spread of the cone (0.1 = ±10% at the end).
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface ForecastLineChartProps {
+    title?: string;
+    subtitle?: string;
+    categories?: string[];
+    actual?: number[];
+    forecast?: number[];
+    confidence?: number;
+    prefix?: string;
+    suffix?: string;
+    height?: number;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function ForecastLineChart({ title, subtitle, categories, actual, forecast, confidence, prefix, suffix, height, color, variant, size, className, }: ForecastLineChartProps): import("react").JSX.Element;
+export default ForecastLineChart;

package/dist/types/components/lib/charts/FunnelChart.d.ts

@@ -0,0 +1,24 @@
+import './FunnelChart.css';
+/**
+ * FunnelChart — Conversion funnel with tapered stages, stage-to-stage drop-off
+ * and overall conversion. Uses an ordinal single-hue ramp (stages are ordered).
+ *
+ * @param {Array<{label: string, value: number}>} stages - Ordered stages, widest first.
+ * @param {string} color - Base hue for the ordinal ramp.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface FunnelChartProps {
+    title?: string;
+    subtitle?: string;
+    stages?: Array<{
+        label: string;
+        value: number;
+    }>;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function FunnelChart({ title, subtitle, stages, color, variant, size, className, }: FunnelChartProps): import("react").JSX.Element;
+export default FunnelChart;

package/dist/types/components/lib/charts/GaugeChart.d.ts

@@ -0,0 +1,29 @@
+import './GaugeChart.css';
+/**
+ * GaugeChart — Semicircular progress gauge for a single KPI against a goal,
+ * with the number and % of goal always shown as text.
+ *
+ * @param {number} value - Current value.
+ * @param {number} max - Goal / maximum.
+ * @param {string} label - Caption under the number.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Arc color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface GaugeChartProps {
+    title?: string;
+    subtitle?: string;
+    value?: number;
+    max?: number;
+    label?: string;
+    prefix?: string;
+    suffix?: string;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function GaugeChart({ title, subtitle, value, max, label, prefix, suffix, color, variant, size, className, }: GaugeChartProps): import("react").JSX.Element;
+export default GaugeChart;

package/dist/types/components/lib/charts/GoalProgressChart.d.ts

@@ -0,0 +1,29 @@
+/**
+ * GoalProgressChart — Cumulative progress toward a goal over a period, versus
+ * the ideal linear pace, with an "ahead/behind pace" readout.
+ *
+ * @param {string[]} periods - X-axis labels for the whole period.
+ * @param {number[]} values - Per-period amounts achieved so far (may be shorter than periods).
+ * @param {number} goal - Target for the end of the period.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Progress color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface GoalProgressChartProps {
+    title?: string;
+    subtitle?: string;
+    periods?: string[];
+    values?: number[];
+    goal?: number;
+    prefix?: string;
+    suffix?: string;
+    height?: number;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function GoalProgressChart({ title, subtitle, periods, values, goal, prefix, suffix, height, color, variant, size, className, }: GoalProgressChartProps): import("react").JSX.Element;
+export default GoalProgressChart;

package/dist/types/components/lib/charts/GroupedBarChart.d.ts

@@ -0,0 +1,32 @@
+import './GroupedBarChart.css';
+/**
+ * GroupedBarChart — Side-by-side vertical bars for comparing several series
+ * across categories. Bars have rounded data-ends anchored to the baseline.
+ *
+ * @param {string[]} categories - X-axis groups.
+ * @param {Array<{name: string, data: number[]}>} series - Series per group (max 8).
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {number} height - SVG height in viewBox units (width is 640).
+ * @param {string[]} colors - Optional per-series colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface GroupedBarChartProps {
+    title?: string;
+    subtitle?: string;
+    categories?: string[];
+    series?: Array<{
+        name: string;
+        data: number[];
+    }>;
+    prefix?: string;
+    suffix?: string;
+    height?: number;
+    colors?: string[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function GroupedBarChart({ title, subtitle, categories, series, prefix, suffix, height, colors, variant, size, className, }: GroupedBarChartProps): import("react").JSX.Element;
+export default GroupedBarChart;

package/dist/types/components/lib/charts/HeatmapChart.d.ts

@@ -0,0 +1,29 @@
+import './HeatmapChart.css';
+/**
+ * HeatmapChart — Matrix of cells colored on a single-hue sequential ramp
+ * (light = low, saturated = high), with a scale legend.
+ *
+ * @param {string[]} rows - Row labels.
+ * @param {string[]} columns - Column labels.
+ * @param {number[][]} values - values[row][col].
+ * @param {boolean} showValues - Print values inside cells.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Ramp hue.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface HeatmapChartProps {
+    title?: string;
+    subtitle?: string;
+    rows?: string[];
+    columns?: string[];
+    values?: number[][];
+    showValues?: boolean;
+    suffix?: string;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function HeatmapChart({ title, subtitle, rows, columns, values, showValues, suffix, color, variant, size, className, }: HeatmapChartProps): import("react").JSX.Element;
+export default HeatmapChart;

package/dist/types/components/lib/charts/HistogramChart.d.ts

@@ -0,0 +1,27 @@
+/**
+ * HistogramChart — Bins raw values into equal-width buckets and draws the
+ * distribution, with optional mean and median markers.
+ *
+ * @param {number[]} values - Raw observations.
+ * @param {number} bins - Number of buckets.
+ * @param {boolean} showStats - Draw mean & median reference lines.
+ * @param {string} unit - Unit suffix for bucket edges.
+ * @param {string} color - Bar color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface HistogramChartProps {
+    title?: string;
+    subtitle?: string;
+    values?: number[];
+    bins?: number;
+    showStats?: boolean;
+    unit?: string;
+    height?: number;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function HistogramChart({ title, subtitle, values, bins, showStats, unit, height, color, variant, size, className, }: HistogramChartProps): import("react").JSX.Element;
+export default HistogramChart;

package/dist/types/components/lib/charts/HorizontalBarChart.d.ts

@@ -0,0 +1,32 @@
+import './HorizontalBarChart.css';
+/**
+ * HorizontalBarChart — Ranked horizontal bars with labels on the left and values
+ * on the right. One series → one color; optionally highlight a single bar.
+ *
+ * @param {Array<{label: string, value: number}>} items - Bars to draw.
+ * @param {boolean} sort - Sort descending by value.
+ * @param {string} highlight - Label to emphasise; other bars recede.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Bar color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface HorizontalBarChartProps {
+    title?: string;
+    subtitle?: string;
+    items?: Array<{
+        label: string;
+        value: number;
+    }>;
+    sort?: boolean;
+    highlight?: string;
+    prefix?: string;
+    suffix?: string;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function HorizontalBarChart({ title, subtitle, items, sort, highlight, prefix, suffix, color, variant, size, className, }: HorizontalBarChartProps): import("react").JSX.Element;
+export default HorizontalBarChart;

package/dist/types/components/lib/charts/KpiStatTile.d.ts

@@ -0,0 +1,28 @@
+import './KpiStatTile.css';
+/**
+ * KpiStatTile — Hero-number statistic tile: label, big value, change vs previous
+ * period (icon + text, never color alone) and an optional sparkline.
+ *
+ * @param {string} label - Metric name.
+ * @param {string} value - Formatted value.
+ * @param {number} change - Percentage change vs comparison period.
+ * @param {string} period - Comparison period label (e.g. 'vs last month').
+ * @param {boolean} invert - Treat a decrease as good (e.g. churn, latency).
+ * @param {number[]} trend - Optional sparkline data.
+ * @param {string} variant - Visual style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+export interface KpiStatTileProps {
+    label?: string;
+    value?: string;
+    change?: number;
+    period?: string;
+    invert?: boolean;
+    trend?: number[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function KpiStatTile({ label, value, change, period, invert, trend, variant, size, className, }: KpiStatTileProps): import("react").JSX.Element;
+export default KpiStatTile;

package/dist/types/components/lib/charts/KpiTrendGrid.d.ts

@@ -0,0 +1,27 @@
+import './KpiTrendGrid.css';
+/**
+ * KpiTrendGrid — Responsive grid of KPI stat tiles with sparklines; the classic
+ * top row of an analytics dashboard.
+ *
+ * @param {Array<{label: string, value: string, change: number, trend?: number[], invert?: boolean}>} metrics - Tiles.
+ * @param {string} period - Shared comparison label.
+ * @param {string} variant - Tile style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+export interface KpiTrendGridProps {
+    title?: string;
+    metrics?: Array<{
+        label: string;
+        value: string;
+        change: number;
+        trend?: number[];
+        invert?: boolean;
+    }>;
+    period?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function KpiTrendGrid({ title, metrics, period, variant, size, className, }: KpiTrendGridProps): import("react").JSX.Element;
+export default KpiTrendGrid;

package/dist/types/components/lib/charts/LineChart.d.ts

@@ -0,0 +1,38 @@
+import './LineChart.css';
+/**
+ * LineChart — Zero-dependency SVG line chart with smooth, linear or step curves,
+ * optional area fill, crosshair tooltip and a data-table fallback.
+ *
+ * @param {string[]} categories - X-axis labels.
+ * @param {Array<{name: string, data: number[]}>} series - One or more series (max 8).
+ * @param {string} curve - Interpolation (smooth|linear|step).
+ * @param {boolean} area - Fill a soft gradient under each line.
+ * @param {boolean} dots - Draw point markers.
+ * @param {string} prefix - Value prefix (e.g. '$').
+ * @param {string} suffix - Value suffix (e.g. '%').
+ * @param {number} height - SVG height in viewBox units (width is 640).
+ * @param {string[]} colors - Optional color overrides per series.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface LineChartProps {
+    title?: string;
+    subtitle?: string;
+    categories?: string[];
+    series?: Array<{
+        name: string;
+        data: number[];
+    }>;
+    curve?: 'smooth' | 'linear' | 'step';
+    area?: boolean;
+    dots?: boolean;
+    prefix?: string;
+    suffix?: string;
+    height?: number;
+    colors?: string[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function LineChart({ title, subtitle, categories, series, curve, area, dots, prefix, suffix, height, colors, variant, size, className, }: LineChartProps): import("react").JSX.Element;
+export default LineChart;

package/dist/types/components/lib/charts/LinearProgressGauge.d.ts

@@ -0,0 +1,19 @@
+import './LinearProgressGauge.css';
+/**
+ * LinearProgressGauge — Multi-segmented horizontal memory or budget progress bar with breakdown legend.
+ *
+ * @param {string} title - Gauge header label. Default is 'Resource Allocation'.
+ * @param {Array<{label: string, value: number, color: string}>} segments - Proportion breakdown chunks.
+ * @param {string} total - Formatted total capacity string (e.g. '16 GB', '100%'). Default is '100%'.
+ */
+export interface LinearProgressGaugeProps {
+    title?: string;
+    segments?: Array<{
+        label: string;
+        value: number;
+        color: string;
+    }>;
+    total?: string;
+}
+export declare function LinearProgressGauge({ title, segments, total, }: LinearProgressGaugeProps): import("react").JSX.Element;
+export default LinearProgressGauge;

package/dist/types/components/lib/charts/LollipopChart.d.ts

@@ -0,0 +1,32 @@
+/**
+ * LollipopChart — Lightweight alternative to a bar chart: a thin stem with a dot
+ * at the value. Optionally draws a target/benchmark line.
+ *
+ * @param {Array<{label: string, value: number}>} items - Values to plot.
+ * @param {number} target - Optional benchmark value.
+ * @param {string} targetLabel - Label for the benchmark line.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Stem/dot color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface LollipopChartProps {
+    title?: string;
+    subtitle?: string;
+    items?: Array<{
+        label: string;
+        value: number;
+    }>;
+    target?: number;
+    targetLabel?: string;
+    prefix?: string;
+    suffix?: string;
+    height?: number;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function LollipopChart({ title, subtitle, items, target, targetLabel, prefix, suffix, height, color, variant, size, className, }: LollipopChartProps): import("react").JSX.Element;
+export default LollipopChart;

package/dist/types/components/lib/charts/MeterGauge.d.ts

@@ -0,0 +1,32 @@
+import './MeterGauge.css';
+interface Zone {
+    to: number;
+    label: string;
+    tone: 'good' | 'warn' | 'bad';
+}
+/**
+ * MeterGauge — Speedometer-style dial with labelled threshold zones and a
+ * needle. Zones use status colors and every zone is named in text.
+ *
+ * @param {number} value - Current reading.
+ * @param {number} min - Scale minimum.
+ * @param {number} max - Scale maximum.
+ * @param {Array<{to: number, label: string, tone: 'good'|'warn'|'bad'}>} zones - Ascending zones.
+ * @param {string} unit - Unit label.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface MeterGaugeProps {
+    title?: string;
+    subtitle?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    zones?: Zone[];
+    unit?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function MeterGauge({ title, subtitle, value, min, max, zones, unit, variant, size, className, }: MeterGaugeProps): import("react").JSX.Element;
+export default MeterGauge;

package/dist/types/components/lib/charts/MetricDeltaTable.d.ts

@@ -0,0 +1,36 @@
+import './MetricDeltaTable.css';
+interface Row {
+    label: string;
+    current: number;
+    previous: number;
+    invert?: boolean;
+    trend?: number[];
+}
+/**
+ * MetricDeltaTable — Comparison table with inline bars, current vs previous
+ * values and signed deltas with direction icons. A "table + chart" hybrid.
+ *
+ * @param {Array<{label: string, current: number, previous: number, invert?: boolean}>} rows - Metrics.
+ * @param {string} currentLabel - Header for current values.
+ * @param {string} previousLabel - Header for previous values.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Inline bar color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface MetricDeltaTableProps {
+    title?: string;
+    subtitle?: string;
+    rows?: Row[];
+    currentLabel?: string;
+    previousLabel?: string;
+    prefix?: string;
+    suffix?: string;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function MetricDeltaTable({ title, subtitle, rows, currentLabel, previousLabel, prefix, suffix, color, variant, size, className, }: MetricDeltaTableProps): import("react").JSX.Element;
+export default MetricDeltaTable;

package/dist/types/components/lib/charts/PieChart.d.ts

@@ -0,0 +1,32 @@
+import './PieChart.css';
+/**
+ * PieChart — Pure SVG pie or donut with a 2px surface gap between slices,
+ * centre total, and a side breakdown with values. Best for ≤ 6 slices.
+ *
+ * @param {Array<{label: string, value: number}>} slices - Parts of the whole.
+ * @param {boolean} donut - Render as a donut with centre label.
+ * @param {string} centerLabel - Caption under the centre total.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string[]} colors - Optional per-slice colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface PieChartProps {
+    title?: string;
+    subtitle?: string;
+    slices?: Array<{
+        label: string;
+        value: number;
+    }>;
+    donut?: boolean;
+    centerLabel?: string;
+    prefix?: string;
+    suffix?: string;
+    colors?: string[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function PieChart({ title, subtitle, slices, donut, centerLabel, prefix, suffix, colors, variant, size, className, }: PieChartProps): import("react").JSX.Element;
+export default PieChart;

package/dist/types/components/lib/charts/PolarAreaChart.d.ts

@@ -0,0 +1,27 @@
+import './PolarAreaChart.css';
+/**
+ * PolarAreaChart — Equal-angle wedges whose radius encodes value (area-correct
+ * via square-root scaling). Good for cyclical categories like months or hours.
+ *
+ * @param {Array<{label: string, value: number}>} items - Wedges (max 12).
+ * @param {string} color - Wedge hue (single series).
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface PolarAreaChartProps {
+    title?: string;
+    subtitle?: string;
+    items?: Array<{
+        label: string;
+        value: number;
+    }>;
+    color?: string;
+    prefix?: string;
+    suffix?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function PolarAreaChart({ title, subtitle, items, color, prefix, suffix, variant, size, className, }: PolarAreaChartProps): import("react").JSX.Element;
+export default PolarAreaChart;

package/dist/types/components/lib/charts/PopulationPyramid.d.ts

@@ -0,0 +1,31 @@
+import './PopulationPyramid.css';
+/**
+ * PopulationPyramid — Back-to-back horizontal bars comparing two groups across
+ * ordered bands (age groups, tiers, price brackets).
+ *
+ * @param {string[]} bands - Row labels, top to bottom.
+ * @param {number[]} left - Values for the left group.
+ * @param {number[]} right - Values for the right group.
+ * @param {string} leftLabel - Left group name.
+ * @param {string} rightLabel - Right group name.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface PopulationPyramidProps {
+    title?: string;
+    subtitle?: string;
+    bands?: string[];
+    left?: number[];
+    right?: number[];
+    leftLabel?: string;
+    rightLabel?: string;
+    prefix?: string;
+    suffix?: string;
+    colors?: string[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function PopulationPyramid({ title, subtitle, bands, left, right, leftLabel, rightLabel, prefix, suffix, colors, variant, size, className, }: PopulationPyramidProps): import("react").JSX.Element;
+export default PopulationPyramid;

package/dist/types/components/lib/charts/PunchCardChart.d.ts

@@ -0,0 +1,26 @@
+/**
+ * PunchCardChart — Day × hour dot matrix where dot area encodes volume.
+ * Classic "when are people active" view.
+ *
+ * @param {string[]} days - Row labels.
+ * @param {number[]} hours - Column hours (0–23).
+ * @param {number[][]} values - values[day][hourIndex].
+ * @param {string} unit - Unit noun for tooltips (e.g. 'commits').
+ * @param {string} color - Dot color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface PunchCardChartProps {
+    title?: string;
+    subtitle?: string;
+    days?: string[];
+    hours?: number[];
+    values?: number[][];
+    unit?: string;
+    color?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function PunchCardChart({ title, subtitle, days, hours, values, unit, color, variant, size, className, }: PunchCardChartProps): import("react").JSX.Element;
+export default PunchCardChart;

package/dist/types/components/lib/charts/RadarChart.d.ts

@@ -0,0 +1,28 @@
+import './RadarChart.css';
+/**
+ * RadarChart — Pure SVG spider chart comparing up to 3 entities across 5–8
+ * axes on a shared 0–max scale, with value tooltips on every vertex.
+ *
+ * @param {string[]} axes - Attribute names (5–8 recommended).
+ * @param {Array<{name: string, data: number[]}>} series - Entities (max 3).
+ * @param {number} max - Scale maximum.
+ * @param {string[]} colors - Optional per-series colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+export interface RadarChartProps {
+    title?: string;
+    subtitle?: string;
+    axes?: string[];
+    series?: Array<{
+        name: string;
+        data: number[];
+    }>;
+    max?: number;
+    colors?: string[];
+    variant?: 'glass' | 'solid' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function RadarChart({ title, subtitle, axes, series, max, colors, variant, size, className, }: RadarChartProps): import("react").JSX.Element;
+export default RadarChart;

package/dist/types/components/lib/charts/RadarMetricChart.d.ts

@@ -0,0 +1,20 @@
+import './RadarMetricChart.css';
+/**
+ * RadarMetricChart — Pure SVG radar / spider chart for multi-axis skill and performance visualization.
+ *
+ * @param {string} title - Chart title. Default is 'Performance Metrics'.
+ * @param {Array<{axis: string, value: number}>} data - 5 or 6 axis points (values 0 to 100).
+ * @param {string} color - Primary chart fill & stroke color. Default is '#d4a017'.
+ * @param {number} size - Pixel width/height of the radar. Default is 320.
+ */
+export interface RadarMetricChartProps {
+    title?: string;
+    data?: Array<{
+        axis: string;
+        value: number;
+    }>;
+    color?: string;
+    size?: number;
+}
+export declare function RadarMetricChart({ title, data, color, size, }: RadarMetricChartProps): import("react").JSX.Element;
+export default RadarMetricChart;