@marcoschwartz/lite-ui 0.19.0 → 0.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +601 -26
- package/dist/index.d.ts +601 -26
- package/dist/index.js +3451 -1385
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3442 -1387
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +2 -2
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -406,6 +406,7 @@ interface StepperProps {
|
|
|
406
406
|
currentStep: number;
|
|
407
407
|
orientation?: 'horizontal' | 'vertical';
|
|
408
408
|
className?: string;
|
|
409
|
+
compact?: boolean;
|
|
409
410
|
}
|
|
410
411
|
declare const Stepper: React.FC<StepperProps>;
|
|
411
412
|
|
|
@@ -485,97 +486,298 @@ interface VideoPlayerProps {
|
|
|
485
486
|
}
|
|
486
487
|
declare const VideoPlayer: React.FC<VideoPlayerProps>;
|
|
487
488
|
|
|
489
|
+
interface TooltipPayloadItem {
|
|
490
|
+
name: string;
|
|
491
|
+
value: number | string;
|
|
492
|
+
color?: string;
|
|
493
|
+
dataKey?: string;
|
|
494
|
+
payload?: Record<string, unknown>;
|
|
495
|
+
}
|
|
496
|
+
interface TooltipProps {
|
|
497
|
+
/** Whether the tooltip is currently active/visible */
|
|
498
|
+
active?: boolean;
|
|
499
|
+
/** The label for the tooltip (usually x-axis value) */
|
|
500
|
+
label?: string | number;
|
|
501
|
+
/** Array of data items to display */
|
|
502
|
+
payload?: TooltipPayloadItem[];
|
|
503
|
+
/** Custom content renderer */
|
|
504
|
+
content?: React.FC<TooltipProps> | React.ReactElement;
|
|
505
|
+
/** X position in pixels */
|
|
506
|
+
x?: number;
|
|
507
|
+
/** Y position in pixels */
|
|
508
|
+
y?: number;
|
|
509
|
+
/** Offset from cursor position */
|
|
510
|
+
offset?: number;
|
|
511
|
+
/** Custom formatter for values */
|
|
512
|
+
formatter?: (value: number | string, name: string, payload: TooltipPayloadItem) => string;
|
|
513
|
+
/** Custom formatter for labels */
|
|
514
|
+
labelFormatter?: (label: string | number) => string;
|
|
515
|
+
/** Custom CSS class */
|
|
516
|
+
className?: string;
|
|
517
|
+
/** Container bounds for positioning */
|
|
518
|
+
containerBounds?: {
|
|
519
|
+
width: number;
|
|
520
|
+
height: number;
|
|
521
|
+
};
|
|
522
|
+
/** Animation duration in ms (0 to disable) */
|
|
523
|
+
animationDuration?: number;
|
|
524
|
+
}
|
|
525
|
+
declare const ChartTooltip: React.FC<TooltipProps>;
|
|
526
|
+
interface UseTooltipReturn {
|
|
527
|
+
tooltipData: {
|
|
528
|
+
active: boolean;
|
|
529
|
+
x: number;
|
|
530
|
+
y: number;
|
|
531
|
+
label?: string | number;
|
|
532
|
+
payload?: TooltipPayloadItem[];
|
|
533
|
+
};
|
|
534
|
+
showTooltip: (data: {
|
|
535
|
+
x: number;
|
|
536
|
+
y: number;
|
|
537
|
+
label?: string | number;
|
|
538
|
+
payload?: TooltipPayloadItem[];
|
|
539
|
+
}) => void;
|
|
540
|
+
hideTooltip: () => void;
|
|
541
|
+
updatePosition: (x: number, y: number) => void;
|
|
542
|
+
}
|
|
543
|
+
declare function useTooltip(): UseTooltipReturn;
|
|
544
|
+
|
|
488
545
|
interface LineChartDataPoint {
|
|
489
|
-
x: string | number;
|
|
546
|
+
x: string | number | Date;
|
|
490
547
|
y: number;
|
|
548
|
+
[key: string]: unknown;
|
|
491
549
|
}
|
|
492
550
|
interface LineChartSeries {
|
|
493
551
|
name: string;
|
|
494
552
|
data: LineChartDataPoint[];
|
|
495
553
|
color?: string;
|
|
554
|
+
strokeWidth?: number;
|
|
555
|
+
type?: 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
|
|
556
|
+
dot?: boolean;
|
|
557
|
+
activeDot?: boolean;
|
|
558
|
+
connectNulls?: boolean;
|
|
496
559
|
}
|
|
497
560
|
interface LineChartProps {
|
|
561
|
+
/** Chart data - array of series */
|
|
498
562
|
data: LineChartSeries[];
|
|
563
|
+
/** Chart width in pixels (or use ResponsiveContainer) */
|
|
499
564
|
width?: number;
|
|
565
|
+
/** Chart height in pixels (or use ResponsiveContainer) */
|
|
500
566
|
height?: number;
|
|
501
|
-
|
|
502
|
-
|
|
567
|
+
/** Padding inside the chart */
|
|
568
|
+
padding?: {
|
|
569
|
+
top?: number;
|
|
570
|
+
right?: number;
|
|
571
|
+
bottom?: number;
|
|
572
|
+
left?: number;
|
|
573
|
+
};
|
|
574
|
+
/** Show grid lines */
|
|
503
575
|
showGrid?: boolean;
|
|
576
|
+
/** Show X axis */
|
|
504
577
|
showXAxis?: boolean;
|
|
578
|
+
/** Show Y axis */
|
|
505
579
|
showYAxis?: boolean;
|
|
580
|
+
/** Show legend */
|
|
506
581
|
showLegend?: boolean;
|
|
582
|
+
/** Show tooltip on hover */
|
|
507
583
|
showTooltip?: boolean;
|
|
584
|
+
/** Show dots on data points */
|
|
508
585
|
showDots?: boolean;
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
586
|
+
/** Animate on load and data change */
|
|
587
|
+
animate?: boolean;
|
|
588
|
+
/** Animation duration in ms */
|
|
589
|
+
animationDuration?: number;
|
|
590
|
+
/** X axis label */
|
|
512
591
|
xAxisLabel?: string;
|
|
592
|
+
/** Y axis label */
|
|
513
593
|
yAxisLabel?: string;
|
|
514
|
-
|
|
594
|
+
/** Number of Y axis ticks */
|
|
595
|
+
yAxisTickCount?: number;
|
|
596
|
+
/** Custom Y axis domain [min, max] */
|
|
597
|
+
yDomain?: [number, number];
|
|
598
|
+
/** Custom X axis formatter */
|
|
599
|
+
formatXValue?: (value: string | number | Date) => string;
|
|
600
|
+
/** Custom Y axis formatter */
|
|
601
|
+
formatYValue?: (value: number) => string;
|
|
602
|
+
/** Custom tooltip formatter */
|
|
603
|
+
tooltipFormatter?: (value: number | string, name: string, payload: TooltipPayloadItem) => string;
|
|
604
|
+
/** Custom tooltip label formatter */
|
|
605
|
+
tooltipLabelFormatter?: (label: string | number) => string;
|
|
606
|
+
/** Custom tooltip content component */
|
|
607
|
+
tooltipContent?: React.FC<any>;
|
|
608
|
+
/** Click handler for data points */
|
|
609
|
+
onPointClick?: (data: LineChartDataPoint, seriesIndex: number, pointIndex: number) => void;
|
|
610
|
+
/** Hover handler for data points */
|
|
611
|
+
onPointHover?: (data: LineChartDataPoint | null, seriesIndex: number, pointIndex: number) => void;
|
|
612
|
+
/** Show crosshair on hover */
|
|
613
|
+
showCrosshair?: boolean;
|
|
614
|
+
/** Show value labels at end of lines */
|
|
615
|
+
showValueLabels?: boolean;
|
|
616
|
+
/** Custom CSS class */
|
|
617
|
+
className?: string;
|
|
618
|
+
/** Chart children (ReferenceLine, ReferenceArea, etc.) */
|
|
619
|
+
children?: React.ReactNode;
|
|
620
|
+
/** Custom colors array */
|
|
621
|
+
colors?: string[];
|
|
622
|
+
/** ARIA label for accessibility */
|
|
623
|
+
ariaLabel?: string;
|
|
515
624
|
}
|
|
516
625
|
declare const LineChart: React.FC<LineChartProps>;
|
|
517
626
|
|
|
518
627
|
interface BarChartDataPoint {
|
|
519
628
|
x: string | number;
|
|
520
629
|
y: number;
|
|
630
|
+
[key: string]: unknown;
|
|
521
631
|
}
|
|
522
632
|
interface BarChartSeries {
|
|
523
633
|
name: string;
|
|
524
634
|
data: BarChartDataPoint[];
|
|
525
635
|
color?: string;
|
|
636
|
+
radius?: number;
|
|
526
637
|
}
|
|
527
638
|
interface BarChartProps {
|
|
639
|
+
/** Chart data - array of series */
|
|
528
640
|
data: BarChartSeries[];
|
|
641
|
+
/** Chart width in pixels */
|
|
529
642
|
width?: number;
|
|
643
|
+
/** Chart height in pixels */
|
|
530
644
|
height?: number;
|
|
531
|
-
|
|
532
|
-
|
|
645
|
+
/** Padding inside the chart */
|
|
646
|
+
padding?: {
|
|
647
|
+
top?: number;
|
|
648
|
+
right?: number;
|
|
649
|
+
bottom?: number;
|
|
650
|
+
left?: number;
|
|
651
|
+
};
|
|
652
|
+
/** Show grid lines */
|
|
533
653
|
showGrid?: boolean;
|
|
654
|
+
/** Show X axis */
|
|
534
655
|
showXAxis?: boolean;
|
|
656
|
+
/** Show Y axis */
|
|
535
657
|
showYAxis?: boolean;
|
|
658
|
+
/** Show legend */
|
|
536
659
|
showLegend?: boolean;
|
|
660
|
+
/** Show tooltip on hover */
|
|
537
661
|
showTooltip?: boolean;
|
|
662
|
+
/** Show values on top of bars */
|
|
538
663
|
showValues?: boolean;
|
|
664
|
+
/** Stack bars on top of each other */
|
|
539
665
|
stacked?: boolean;
|
|
666
|
+
/** Horizontal bar orientation */
|
|
540
667
|
horizontal?: boolean;
|
|
541
|
-
|
|
542
|
-
|
|
668
|
+
/** Bar corner radius */
|
|
669
|
+
barRadius?: number;
|
|
670
|
+
/** Gap between bar groups (0-1) */
|
|
671
|
+
barGap?: number;
|
|
672
|
+
/** Gap between bars in a group (0-1) */
|
|
673
|
+
barCategoryGap?: number;
|
|
674
|
+
/** Animate on load */
|
|
675
|
+
animate?: boolean;
|
|
676
|
+
/** Animation duration in ms */
|
|
677
|
+
animationDuration?: number;
|
|
678
|
+
/** X axis label */
|
|
543
679
|
xAxisLabel?: string;
|
|
680
|
+
/** Y axis label */
|
|
544
681
|
yAxisLabel?: string;
|
|
545
|
-
|
|
682
|
+
/** Number of Y axis ticks */
|
|
683
|
+
yAxisTickCount?: number;
|
|
684
|
+
/** Custom Y axis domain */
|
|
685
|
+
yDomain?: [number, number];
|
|
686
|
+
/** Custom Y axis formatter */
|
|
687
|
+
formatYValue?: (value: number) => string;
|
|
688
|
+
/** Custom tooltip formatter */
|
|
689
|
+
tooltipFormatter?: (value: number | string, name: string, payload: TooltipPayloadItem) => string;
|
|
690
|
+
/** Click handler for bars */
|
|
691
|
+
onBarClick?: (data: BarChartDataPoint, seriesIndex: number, barIndex: number) => void;
|
|
692
|
+
/** Hover handler for bars */
|
|
693
|
+
onBarHover?: (data: BarChartDataPoint | null, seriesIndex: number, barIndex: number) => void;
|
|
694
|
+
/** Custom CSS class */
|
|
695
|
+
className?: string;
|
|
696
|
+
/** Chart children (ReferenceLine, etc.) */
|
|
697
|
+
children?: React.ReactNode;
|
|
698
|
+
/** Custom colors array */
|
|
546
699
|
colors?: string[];
|
|
700
|
+
/** ARIA label for accessibility */
|
|
701
|
+
ariaLabel?: string;
|
|
547
702
|
}
|
|
548
703
|
declare const BarChart: React.FC<BarChartProps>;
|
|
549
704
|
|
|
550
705
|
interface AreaChartDataPoint {
|
|
551
|
-
x: string | number;
|
|
706
|
+
x: string | number | Date;
|
|
552
707
|
y: number;
|
|
708
|
+
[key: string]: unknown;
|
|
553
709
|
}
|
|
554
710
|
interface AreaChartSeries {
|
|
555
711
|
name: string;
|
|
556
712
|
data: AreaChartDataPoint[];
|
|
557
713
|
color?: string;
|
|
714
|
+
fillOpacity?: number;
|
|
715
|
+
strokeWidth?: number;
|
|
716
|
+
type?: 'linear' | 'monotone';
|
|
717
|
+
dot?: boolean;
|
|
558
718
|
}
|
|
559
719
|
interface AreaChartProps {
|
|
720
|
+
/** Chart data - array of series */
|
|
560
721
|
data: AreaChartSeries[];
|
|
722
|
+
/** Chart width in pixels */
|
|
561
723
|
width?: number;
|
|
724
|
+
/** Chart height in pixels */
|
|
562
725
|
height?: number;
|
|
563
|
-
|
|
564
|
-
|
|
726
|
+
/** Padding inside the chart */
|
|
727
|
+
padding?: {
|
|
728
|
+
top?: number;
|
|
729
|
+
right?: number;
|
|
730
|
+
bottom?: number;
|
|
731
|
+
left?: number;
|
|
732
|
+
};
|
|
733
|
+
/** Show grid lines */
|
|
565
734
|
showGrid?: boolean;
|
|
735
|
+
/** Show X axis */
|
|
566
736
|
showXAxis?: boolean;
|
|
737
|
+
/** Show Y axis */
|
|
567
738
|
showYAxis?: boolean;
|
|
739
|
+
/** Show legend */
|
|
568
740
|
showLegend?: boolean;
|
|
741
|
+
/** Show tooltip on hover */
|
|
569
742
|
showTooltip?: boolean;
|
|
743
|
+
/** Show dots on data points */
|
|
570
744
|
showDots?: boolean;
|
|
571
|
-
|
|
745
|
+
/** Stack areas on top of each other */
|
|
572
746
|
stacked?: boolean;
|
|
747
|
+
/** Default fill opacity for areas */
|
|
573
748
|
fillOpacity?: number;
|
|
574
|
-
|
|
575
|
-
|
|
749
|
+
/** Use curved/smooth lines (shorthand for all series) */
|
|
750
|
+
curved?: boolean;
|
|
751
|
+
/** Animate on load */
|
|
752
|
+
animate?: boolean;
|
|
753
|
+
/** Animation duration in ms */
|
|
754
|
+
animationDuration?: number;
|
|
755
|
+
/** X axis label */
|
|
576
756
|
xAxisLabel?: string;
|
|
757
|
+
/** Y axis label */
|
|
577
758
|
yAxisLabel?: string;
|
|
578
|
-
|
|
759
|
+
/** Number of Y axis ticks */
|
|
760
|
+
yAxisTickCount?: number;
|
|
761
|
+
/** Custom Y axis domain */
|
|
762
|
+
yDomain?: [number, number];
|
|
763
|
+
/** Custom X axis formatter */
|
|
764
|
+
formatXValue?: (value: string | number | Date) => string;
|
|
765
|
+
/** Custom Y axis formatter */
|
|
766
|
+
formatYValue?: (value: number) => string;
|
|
767
|
+
/** Custom tooltip formatter */
|
|
768
|
+
tooltipFormatter?: (value: number | string, name: string, payload: TooltipPayloadItem) => string;
|
|
769
|
+
/** Click handler for data points */
|
|
770
|
+
onPointClick?: (data: AreaChartDataPoint, seriesIndex: number, pointIndex: number) => void;
|
|
771
|
+
/** Hover handler for data points */
|
|
772
|
+
onPointHover?: (data: AreaChartDataPoint | null, seriesIndex: number, pointIndex: number) => void;
|
|
773
|
+
/** Custom CSS class */
|
|
774
|
+
className?: string;
|
|
775
|
+
/** Chart children (ReferenceLine, etc.) */
|
|
776
|
+
children?: React.ReactNode;
|
|
777
|
+
/** Custom colors array */
|
|
778
|
+
colors?: string[];
|
|
779
|
+
/** ARIA label for accessibility */
|
|
780
|
+
ariaLabel?: string;
|
|
579
781
|
}
|
|
580
782
|
declare const AreaChart: React.FC<AreaChartProps>;
|
|
581
783
|
|
|
@@ -583,24 +785,397 @@ interface PieChartDataPoint {
|
|
|
583
785
|
label: string;
|
|
584
786
|
value: number;
|
|
585
787
|
color?: string;
|
|
788
|
+
[key: string]: unknown;
|
|
586
789
|
}
|
|
587
790
|
interface PieChartProps {
|
|
791
|
+
/** Chart data - array of slices */
|
|
588
792
|
data: PieChartDataPoint[];
|
|
793
|
+
/** Chart width in pixels */
|
|
589
794
|
width?: number;
|
|
795
|
+
/** Chart height in pixels */
|
|
590
796
|
height?: number;
|
|
591
|
-
|
|
592
|
-
|
|
797
|
+
/** Inner radius for donut chart (0 for pie) */
|
|
798
|
+
innerRadius?: number;
|
|
799
|
+
/** Outer radius */
|
|
800
|
+
outerRadius?: number;
|
|
801
|
+
/** Enable donut mode (sets default inner radius) */
|
|
802
|
+
donut?: boolean;
|
|
803
|
+
/** Padding angle between slices (degrees) */
|
|
804
|
+
paddingAngle?: number;
|
|
805
|
+
/** Start angle (degrees, 0 = top) */
|
|
806
|
+
startAngle?: number;
|
|
807
|
+
/** End angle (degrees) */
|
|
808
|
+
endAngle?: number;
|
|
809
|
+
/** Show legend */
|
|
593
810
|
showLegend?: boolean;
|
|
811
|
+
/** Show tooltip on hover */
|
|
812
|
+
showTooltip?: boolean;
|
|
813
|
+
/** Show labels on slices */
|
|
594
814
|
showLabels?: boolean;
|
|
595
|
-
|
|
815
|
+
/** Label type */
|
|
816
|
+
labelType?: 'percent' | 'value' | 'name' | 'custom';
|
|
817
|
+
/** Custom label formatter */
|
|
818
|
+
labelFormatter?: (data: PieChartDataPoint, percent: number) => string;
|
|
819
|
+
/** Show percentages in labels */
|
|
596
820
|
showPercentages?: boolean;
|
|
597
|
-
|
|
598
|
-
|
|
821
|
+
/** Minimum percentage to show label */
|
|
822
|
+
minLabelPercent?: number;
|
|
823
|
+
/** Animate on load */
|
|
824
|
+
animate?: boolean;
|
|
825
|
+
/** Animation duration in ms */
|
|
826
|
+
animationDuration?: number;
|
|
827
|
+
/** Center label (for donut charts) */
|
|
828
|
+
centerLabel?: string | React.ReactNode;
|
|
829
|
+
/** Center value (for donut charts) */
|
|
830
|
+
centerValue?: string | number;
|
|
831
|
+
/** Custom tooltip formatter */
|
|
832
|
+
tooltipFormatter?: (value: number | string, name: string, payload: TooltipPayloadItem) => string;
|
|
833
|
+
/** Click handler for slices */
|
|
834
|
+
onSliceClick?: (data: PieChartDataPoint, index: number) => void;
|
|
835
|
+
/** Hover handler for slices */
|
|
836
|
+
onSliceHover?: (data: PieChartDataPoint | null, index: number) => void;
|
|
837
|
+
/** Custom CSS class */
|
|
599
838
|
className?: string;
|
|
600
|
-
|
|
839
|
+
/** Custom colors array */
|
|
840
|
+
colors?: string[];
|
|
841
|
+
/** ARIA label for accessibility */
|
|
842
|
+
ariaLabel?: string;
|
|
601
843
|
}
|
|
602
844
|
declare const PieChart: React.FC<PieChartProps>;
|
|
603
845
|
|
|
846
|
+
interface ScatterChartDataPoint {
|
|
847
|
+
x: number;
|
|
848
|
+
y: number;
|
|
849
|
+
z?: number;
|
|
850
|
+
label?: string;
|
|
851
|
+
[key: string]: unknown;
|
|
852
|
+
}
|
|
853
|
+
interface ScatterChartSeries {
|
|
854
|
+
name: string;
|
|
855
|
+
data: ScatterChartDataPoint[];
|
|
856
|
+
color?: string;
|
|
857
|
+
shape?: 'circle' | 'square' | 'triangle' | 'diamond';
|
|
858
|
+
size?: number;
|
|
859
|
+
}
|
|
860
|
+
interface ScatterChartProps {
|
|
861
|
+
/** Chart data - array of series */
|
|
862
|
+
data: ScatterChartSeries[];
|
|
863
|
+
/** Chart width in pixels */
|
|
864
|
+
width?: number;
|
|
865
|
+
/** Chart height in pixels */
|
|
866
|
+
height?: number;
|
|
867
|
+
/** Padding inside the chart */
|
|
868
|
+
padding?: {
|
|
869
|
+
top?: number;
|
|
870
|
+
right?: number;
|
|
871
|
+
bottom?: number;
|
|
872
|
+
left?: number;
|
|
873
|
+
};
|
|
874
|
+
/** Show grid lines */
|
|
875
|
+
showGrid?: boolean;
|
|
876
|
+
/** Show X axis */
|
|
877
|
+
showXAxis?: boolean;
|
|
878
|
+
/** Show Y axis */
|
|
879
|
+
showYAxis?: boolean;
|
|
880
|
+
/** Show legend */
|
|
881
|
+
showLegend?: boolean;
|
|
882
|
+
/** Show tooltip on hover */
|
|
883
|
+
showTooltip?: boolean;
|
|
884
|
+
/** Enable bubble mode (size based on z value) */
|
|
885
|
+
bubble?: boolean;
|
|
886
|
+
/** Min bubble size */
|
|
887
|
+
minBubbleSize?: number;
|
|
888
|
+
/** Max bubble size */
|
|
889
|
+
maxBubbleSize?: number;
|
|
890
|
+
/** Default point size */
|
|
891
|
+
pointSize?: number;
|
|
892
|
+
/** Animate on load */
|
|
893
|
+
animate?: boolean;
|
|
894
|
+
/** Animation duration in ms */
|
|
895
|
+
animationDuration?: number;
|
|
896
|
+
/** X axis label */
|
|
897
|
+
xAxisLabel?: string;
|
|
898
|
+
/** Y axis label */
|
|
899
|
+
yAxisLabel?: string;
|
|
900
|
+
/** Number of X axis ticks */
|
|
901
|
+
xAxisTickCount?: number;
|
|
902
|
+
/** Number of Y axis ticks */
|
|
903
|
+
yAxisTickCount?: number;
|
|
904
|
+
/** Custom X axis domain */
|
|
905
|
+
xDomain?: [number, number];
|
|
906
|
+
/** Custom Y axis domain */
|
|
907
|
+
yDomain?: [number, number];
|
|
908
|
+
/** Custom X axis formatter */
|
|
909
|
+
formatXValue?: (value: number) => string;
|
|
910
|
+
/** Custom Y axis formatter */
|
|
911
|
+
formatYValue?: (value: number) => string;
|
|
912
|
+
/** Custom tooltip formatter */
|
|
913
|
+
tooltipFormatter?: (value: number | string, name: string, payload: TooltipPayloadItem) => string;
|
|
914
|
+
/** Click handler for points */
|
|
915
|
+
onPointClick?: (data: ScatterChartDataPoint, seriesIndex: number, pointIndex: number) => void;
|
|
916
|
+
/** Hover handler for points */
|
|
917
|
+
onPointHover?: (data: ScatterChartDataPoint | null, seriesIndex: number, pointIndex: number) => void;
|
|
918
|
+
/** Show trend line */
|
|
919
|
+
showTrendLine?: boolean;
|
|
920
|
+
/** Custom CSS class */
|
|
921
|
+
className?: string;
|
|
922
|
+
/** Chart children (ReferenceLine, etc.) */
|
|
923
|
+
children?: React.ReactNode;
|
|
924
|
+
/** Custom colors array */
|
|
925
|
+
colors?: string[];
|
|
926
|
+
/** ARIA label for accessibility */
|
|
927
|
+
ariaLabel?: string;
|
|
928
|
+
}
|
|
929
|
+
declare const ScatterChart: React.FC<ScatterChartProps>;
|
|
930
|
+
|
|
931
|
+
interface ResponsiveContainerProps {
|
|
932
|
+
/** Width of the container. Can be number (px) or string (%, auto) */
|
|
933
|
+
width?: number | string;
|
|
934
|
+
/** Height of the container. Can be number (px) or string (%, auto) */
|
|
935
|
+
height?: number | string;
|
|
936
|
+
/** Aspect ratio (width/height) - used when height is not specified */
|
|
937
|
+
aspect?: number;
|
|
938
|
+
/** Minimum width in pixels */
|
|
939
|
+
minWidth?: number;
|
|
940
|
+
/** Minimum height in pixels */
|
|
941
|
+
minHeight?: number;
|
|
942
|
+
/** Maximum width in pixels */
|
|
943
|
+
maxWidth?: number;
|
|
944
|
+
/** Maximum height in pixels */
|
|
945
|
+
maxHeight?: number;
|
|
946
|
+
/** Debounce resize events (ms) */
|
|
947
|
+
debounce?: number;
|
|
948
|
+
/** Additional CSS class */
|
|
949
|
+
className?: string;
|
|
950
|
+
/** Children - should be a single chart element */
|
|
951
|
+
children: React.ReactElement;
|
|
952
|
+
/** Callback when dimensions change */
|
|
953
|
+
onResize?: (width: number, height: number) => void;
|
|
954
|
+
}
|
|
955
|
+
declare const ResponsiveContainer: React.FC<ResponsiveContainerProps>;
|
|
956
|
+
|
|
957
|
+
interface LegendItem {
|
|
958
|
+
name: string;
|
|
959
|
+
color: string;
|
|
960
|
+
type?: 'line' | 'square' | 'circle' | 'rect';
|
|
961
|
+
inactive?: boolean;
|
|
962
|
+
}
|
|
963
|
+
interface LegendProps {
|
|
964
|
+
/** Legend items to display */
|
|
965
|
+
items?: LegendItem[];
|
|
966
|
+
/** Legend layout direction */
|
|
967
|
+
layout?: 'horizontal' | 'vertical';
|
|
968
|
+
/** Alignment */
|
|
969
|
+
align?: 'left' | 'center' | 'right';
|
|
970
|
+
/** Vertical alignment */
|
|
971
|
+
verticalAlign?: 'top' | 'middle' | 'bottom';
|
|
972
|
+
/** Icon size */
|
|
973
|
+
iconSize?: number;
|
|
974
|
+
/** Custom formatter for legend text */
|
|
975
|
+
formatter?: (value: string, entry: LegendItem, index: number) => React.ReactNode;
|
|
976
|
+
/** Click handler */
|
|
977
|
+
onClick?: (item: LegendItem, index: number) => void;
|
|
978
|
+
/** Mouse enter handler */
|
|
979
|
+
onMouseEnter?: (item: LegendItem, index: number) => void;
|
|
980
|
+
/** Mouse leave handler */
|
|
981
|
+
onMouseLeave?: () => void;
|
|
982
|
+
/** Custom CSS class */
|
|
983
|
+
className?: string;
|
|
984
|
+
/** Wrapper style */
|
|
985
|
+
wrapperStyle?: React.CSSProperties;
|
|
986
|
+
}
|
|
987
|
+
declare const Legend: React.FC<LegendProps>;
|
|
988
|
+
|
|
989
|
+
interface ReferenceLineProps {
|
|
990
|
+
/** X-axis value for vertical line */
|
|
991
|
+
x?: number | string | Date;
|
|
992
|
+
/** Y-axis value for horizontal line */
|
|
993
|
+
y?: number;
|
|
994
|
+
/** Line stroke color */
|
|
995
|
+
stroke?: string;
|
|
996
|
+
/** Line stroke width */
|
|
997
|
+
strokeWidth?: number;
|
|
998
|
+
/** Line dash pattern (e.g., "5 5") */
|
|
999
|
+
strokeDasharray?: string;
|
|
1000
|
+
/** Label text */
|
|
1001
|
+
label?: string | React.ReactNode;
|
|
1002
|
+
/** Label position */
|
|
1003
|
+
labelPosition?: 'start' | 'middle' | 'end' | 'insideStart' | 'insideEnd';
|
|
1004
|
+
/** Custom CSS class for the line */
|
|
1005
|
+
className?: string;
|
|
1006
|
+
/** If true, the line extends to the edge of the chart */
|
|
1007
|
+
ifOverflow?: 'hidden' | 'visible' | 'extendDomain';
|
|
1008
|
+
/** Internal - chart dimensions (injected by parent) */
|
|
1009
|
+
_chartDimensions?: {
|
|
1010
|
+
width: number;
|
|
1011
|
+
height: number;
|
|
1012
|
+
padding: {
|
|
1013
|
+
top: number;
|
|
1014
|
+
right: number;
|
|
1015
|
+
bottom: number;
|
|
1016
|
+
left: number;
|
|
1017
|
+
};
|
|
1018
|
+
};
|
|
1019
|
+
/** Internal - scale functions (injected by parent) */
|
|
1020
|
+
_scales?: {
|
|
1021
|
+
xScale: (value: number | string | Date) => number;
|
|
1022
|
+
yScale: (value: number) => number;
|
|
1023
|
+
};
|
|
1024
|
+
}
|
|
1025
|
+
declare const ReferenceLine: React.FC<ReferenceLineProps>;
|
|
1026
|
+
|
|
1027
|
+
interface ReferenceAreaProps {
|
|
1028
|
+
/** Start X value (for vertical bands) */
|
|
1029
|
+
x1?: number | string | Date;
|
|
1030
|
+
/** End X value (for vertical bands) */
|
|
1031
|
+
x2?: number | string | Date;
|
|
1032
|
+
/** Start Y value (for horizontal bands) */
|
|
1033
|
+
y1?: number;
|
|
1034
|
+
/** End Y value (for horizontal bands) */
|
|
1035
|
+
y2?: number;
|
|
1036
|
+
/** Fill color */
|
|
1037
|
+
fill?: string;
|
|
1038
|
+
/** Fill opacity (0-1) */
|
|
1039
|
+
fillOpacity?: number;
|
|
1040
|
+
/** Stroke color */
|
|
1041
|
+
stroke?: string;
|
|
1042
|
+
/** Stroke width */
|
|
1043
|
+
strokeWidth?: number;
|
|
1044
|
+
/** Label text */
|
|
1045
|
+
label?: string | React.ReactNode;
|
|
1046
|
+
/** Label position */
|
|
1047
|
+
labelPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'insideTop' | 'insideBottom';
|
|
1048
|
+
/** Custom CSS class */
|
|
1049
|
+
className?: string;
|
|
1050
|
+
/** If true, area clips to chart bounds */
|
|
1051
|
+
ifOverflow?: 'hidden' | 'visible';
|
|
1052
|
+
/** Internal - chart dimensions (injected by parent) */
|
|
1053
|
+
_chartDimensions?: {
|
|
1054
|
+
width: number;
|
|
1055
|
+
height: number;
|
|
1056
|
+
padding: {
|
|
1057
|
+
top: number;
|
|
1058
|
+
right: number;
|
|
1059
|
+
bottom: number;
|
|
1060
|
+
left: number;
|
|
1061
|
+
};
|
|
1062
|
+
};
|
|
1063
|
+
/** Internal - scale functions (injected by parent) */
|
|
1064
|
+
_scales?: {
|
|
1065
|
+
xScale: (value: number | string | Date) => number;
|
|
1066
|
+
yScale: (value: number) => number;
|
|
1067
|
+
};
|
|
1068
|
+
}
|
|
1069
|
+
declare const ReferenceArea: React.FC<ReferenceAreaProps>;
|
|
1070
|
+
|
|
1071
|
+
interface CartesianGridProps {
|
|
1072
|
+
/** Show horizontal grid lines */
|
|
1073
|
+
horizontal?: boolean;
|
|
1074
|
+
/** Show vertical grid lines */
|
|
1075
|
+
vertical?: boolean;
|
|
1076
|
+
/** Stroke color */
|
|
1077
|
+
stroke?: string;
|
|
1078
|
+
/** Stroke dash array (e.g., "3 3") */
|
|
1079
|
+
strokeDasharray?: string;
|
|
1080
|
+
/** Stroke width */
|
|
1081
|
+
strokeWidth?: number;
|
|
1082
|
+
/** Stroke opacity */
|
|
1083
|
+
strokeOpacity?: number;
|
|
1084
|
+
/** Custom horizontal line positions */
|
|
1085
|
+
horizontalPoints?: number[];
|
|
1086
|
+
/** Custom vertical line positions */
|
|
1087
|
+
verticalPoints?: number[];
|
|
1088
|
+
/** Custom CSS class */
|
|
1089
|
+
className?: string;
|
|
1090
|
+
/** Internal - chart dimensions (injected by parent) */
|
|
1091
|
+
_chartDimensions?: {
|
|
1092
|
+
width: number;
|
|
1093
|
+
height: number;
|
|
1094
|
+
};
|
|
1095
|
+
}
|
|
1096
|
+
declare const CartesianGrid: React.FC<CartesianGridProps>;
|
|
1097
|
+
|
|
1098
|
+
declare const CHART_DEFAULTS: {
|
|
1099
|
+
readonly viewBox: {
|
|
1100
|
+
readonly width: 1000;
|
|
1101
|
+
readonly height: 600;
|
|
1102
|
+
readonly pieSize: 600;
|
|
1103
|
+
};
|
|
1104
|
+
readonly padding: {
|
|
1105
|
+
readonly top: 40;
|
|
1106
|
+
readonly right: 40;
|
|
1107
|
+
readonly bottom: 60;
|
|
1108
|
+
readonly left: 60;
|
|
1109
|
+
};
|
|
1110
|
+
readonly fontSize: {
|
|
1111
|
+
readonly gridLabel: 12;
|
|
1112
|
+
readonly axisLabel: 14;
|
|
1113
|
+
readonly title: 16;
|
|
1114
|
+
readonly tooltip: 12;
|
|
1115
|
+
};
|
|
1116
|
+
readonly colors: readonly ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#06b6d4", "#f97316", "#84cc16", "#6366f1"];
|
|
1117
|
+
readonly animation: {
|
|
1118
|
+
readonly duration: 300;
|
|
1119
|
+
readonly easing: "ease-out";
|
|
1120
|
+
};
|
|
1121
|
+
readonly grid: {
|
|
1122
|
+
readonly strokeDasharray: "3 3";
|
|
1123
|
+
readonly strokeWidth: 1;
|
|
1124
|
+
};
|
|
1125
|
+
readonly line: {
|
|
1126
|
+
readonly strokeWidth: 2;
|
|
1127
|
+
readonly dotRadius: 4;
|
|
1128
|
+
readonly activeDotRadius: 6;
|
|
1129
|
+
};
|
|
1130
|
+
readonly bar: {
|
|
1131
|
+
readonly radius: 4;
|
|
1132
|
+
readonly gap: 0.1;
|
|
1133
|
+
};
|
|
1134
|
+
readonly tooltip: {
|
|
1135
|
+
readonly offset: 10;
|
|
1136
|
+
};
|
|
1137
|
+
};
|
|
1138
|
+
|
|
1139
|
+
interface HeatmapDataPoint {
|
|
1140
|
+
x: string | number;
|
|
1141
|
+
y: string | number;
|
|
1142
|
+
value: number;
|
|
1143
|
+
}
|
|
1144
|
+
interface HeatmapProps {
|
|
1145
|
+
data: HeatmapDataPoint[];
|
|
1146
|
+
xLabels?: string[];
|
|
1147
|
+
yLabels?: string[];
|
|
1148
|
+
colorScale?: 'blue' | 'green' | 'red' | 'purple' | 'orange' | 'gray';
|
|
1149
|
+
minValue?: number;
|
|
1150
|
+
maxValue?: number;
|
|
1151
|
+
showValues?: boolean;
|
|
1152
|
+
showTooltip?: boolean;
|
|
1153
|
+
cellSize?: number;
|
|
1154
|
+
cellGap?: number;
|
|
1155
|
+
className?: string;
|
|
1156
|
+
onCellClick?: (point: HeatmapDataPoint) => void;
|
|
1157
|
+
formatValue?: (value: number) => string;
|
|
1158
|
+
formatTooltip?: (point: HeatmapDataPoint) => string;
|
|
1159
|
+
}
|
|
1160
|
+
declare const Heatmap: React.FC<HeatmapProps>;
|
|
1161
|
+
interface CalendarHeatmapProps {
|
|
1162
|
+
data: {
|
|
1163
|
+
date: Date | string;
|
|
1164
|
+
value: number;
|
|
1165
|
+
}[];
|
|
1166
|
+
startDate?: Date;
|
|
1167
|
+
endDate?: Date;
|
|
1168
|
+
colorScale?: 'blue' | 'green' | 'red' | 'purple' | 'orange' | 'gray';
|
|
1169
|
+
showMonthLabels?: boolean;
|
|
1170
|
+
showDayLabels?: boolean;
|
|
1171
|
+
cellSize?: number;
|
|
1172
|
+
cellGap?: number;
|
|
1173
|
+
className?: string;
|
|
1174
|
+
onCellClick?: (date: Date, value: number) => void;
|
|
1175
|
+
formatTooltip?: (date: Date, value: number) => string;
|
|
1176
|
+
}
|
|
1177
|
+
declare const CalendarHeatmap: React.FC<CalendarHeatmapProps>;
|
|
1178
|
+
|
|
604
1179
|
type ThemeName = 'default' | 'minimalistic';
|
|
605
1180
|
interface ButtonTheme {
|
|
606
1181
|
primary: string;
|
|
@@ -810,4 +1385,4 @@ declare const YouTubeIcon: IconComponent;
|
|
|
810
1385
|
|
|
811
1386
|
declare const SlackIcon: IconComponent;
|
|
812
1387
|
|
|
813
|
-
export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Alert, AlertCircleIcon, type AlertProps, AppShell, type AppShellProps, AppleIcon, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BeakerIcon, BellIcon, BookIcon, BrainIcon, Button, type ButtonProps, type ButtonTheme, Calendar, CalendarIcon, type CalendarProps, CameraIcon, Card, type CardProps, type Chapter, ChatIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CloudIcon, CodeIcon, type ColorMode, type Column, CopyIcon, DatabaseIcon, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FileIcon, FileUpload, type FileUploadProps, FolderIcon, FullscreenExitIcon, FullscreenIcon, GitHubIcon, GlobeIcon, GoogleIcon, HeartIcon, HomeIcon, type IconComponent, type IconProps, ImageIcon, InfoCircleIcon, KeyIcon, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, LinkedInIcon, LockIcon, MailIcon, MenuIcon, Modal, type ModalProps, Navbar, type NavbarProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PauseIcon, PieChart, type PieChartDataPoint, type PieChartProps, PlayIcon, PlugIcon, PlusIcon, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, RefreshIcon, RichTextEditor, type RichTextEditorProps, SaveIcon, SearchIcon, Select, type SelectOption, type SelectProps, type SelectTheme, SettingsIcon, ShieldIcon, Sidebar, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SkipBackIcon, SkipForwardIcon, SlackIcon, Slider, type SliderProps, SparklesIcon, Spinner, type SpinnerProps, StarIcon, type Step, Stepper, type StepperProps, StopIcon, type Tab, Table, type TableProps, Tabs, type TabsProps, TerminalIcon, TextInput, type TextInputProps, Textarea, type TextareaProps, type Theme, type ThemeName, ThemeProvider, TimePicker, type TimePickerProps, type Toast, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, TrashIcon, TwitterIcon, UploadIcon, UserIcon, VideoPlayer, type VideoPlayerProps, VolumeOffIcon, VolumeUpIcon, YouTubeIcon, getThemeScript, themeScript, themes, toast, useSidebar, useTheme, useToast };
|
|
1388
|
+
export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Alert, AlertCircleIcon, type AlertProps, AppShell, type AppShellProps, AppleIcon, AreaChart, type AreaChartDataPoint, type AreaChartProps, type AreaChartSeries, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDataPoint, type BarChartProps, type BarChartSeries, BeakerIcon, BellIcon, BookIcon, BrainIcon, Button, type ButtonProps, type ButtonTheme, CHART_DEFAULTS, Calendar, CalendarHeatmap, type CalendarHeatmapProps, CalendarIcon, type CalendarProps, CameraIcon, Card, type CardProps, CartesianGrid, type CartesianGridProps, type Chapter, ChartTooltip, ChatIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CloudIcon, CodeIcon, type ColorMode, type Column, CopyIcon, DatabaseIcon, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FileIcon, FileUpload, type FileUploadProps, FolderIcon, FullscreenExitIcon, FullscreenIcon, GitHubIcon, GlobeIcon, GoogleIcon, HeartIcon, Heatmap, type HeatmapDataPoint, type HeatmapProps, HomeIcon, type IconComponent, type IconProps, ImageIcon, InfoCircleIcon, KeyIcon, Legend, type LegendItem, type LegendProps, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries, LinkedInIcon, LockIcon, MailIcon, MenuIcon, Modal, type ModalProps, Navbar, type NavbarProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PauseIcon, PieChart, type PieChartDataPoint, type PieChartProps, PlayIcon, PlugIcon, PlusIcon, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ReferenceArea, type ReferenceAreaProps, ReferenceLine, type ReferenceLineProps, RefreshIcon, ResponsiveContainer, type ResponsiveContainerProps, RichTextEditor, type RichTextEditorProps, SaveIcon, ScatterChart, type ScatterChartDataPoint, type ScatterChartProps, type ScatterChartSeries, SearchIcon, Select, type SelectOption, type SelectProps, type SelectTheme, SettingsIcon, ShieldIcon, Sidebar, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, SkipBackIcon, SkipForwardIcon, SlackIcon, Slider, type SliderProps, SparklesIcon, Spinner, type SpinnerProps, StarIcon, type Step, Stepper, type StepperProps, StopIcon, type Tab, Table, type TableProps, Tabs, type TabsProps, TerminalIcon, TextInput, type TextInputProps, Textarea, type TextareaProps, type Theme, type ThemeName, ThemeProvider, TimePicker, type TimePickerProps, type Toast, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, type TooltipPayloadItem, type TooltipProps, TrashIcon, TwitterIcon, UploadIcon, UserIcon, VideoPlayer, type VideoPlayerProps, VolumeOffIcon, VolumeUpIcon, YouTubeIcon, getThemeScript, themeScript, themes, toast, useSidebar, useTheme, useToast, useTooltip };
|