@clickhouse/click-ui 0.0.168 → 0.0.170

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.
@@ -1,8 +1,11 @@
1
1
  import { ReactNode } from 'react';
2
2
  import * as RadixCheckbox from "@radix-ui/react-checkbox";
3
+ type CheckboxVariants = "default" | "var1" | "var2" | "var3" | "var4" | "var5" | "var6";
3
4
  export interface CheckboxProps extends RadixCheckbox.CheckboxProps {
4
5
  label?: ReactNode;
5
6
  orientation?: "vertical" | "horizontal";
7
+ variant?: CheckboxVariants;
6
8
  dir?: "start" | "end";
7
9
  }
8
- export declare const Checkbox: ({ id, label, disabled, orientation, dir, ...delegated }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
10
+ export declare const Checkbox: ({ id, label, variant, disabled, orientation, dir, ...delegated }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
11
+ export {};
@@ -0,0 +1,8 @@
1
+ export interface DatePickerProps {
2
+ date?: Date;
3
+ disabled?: boolean;
4
+ futureDatesDisabled?: boolean;
5
+ onSelectDate: (selectedDate: Date) => void;
6
+ placeholder?: string;
7
+ }
8
+ export declare const DatePicker: ({ date, disabled, futureDatesDisabled, onSelectDate, placeholder, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,7 @@
1
1
  import { ReactNode } from 'react';
2
2
 
3
3
  export interface WrapperProps {
4
+ className?: string;
4
5
  id: string;
5
6
  label?: ReactNode;
6
7
  labelColor?: string;
@@ -11,7 +12,7 @@ export interface WrapperProps {
11
12
  dir?: "start" | "end";
12
13
  resize?: "none" | "vertical" | "horizontal" | "both";
13
14
  }
14
- export declare const InputWrapper: ({ id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const InputWrapper: ({ className, id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
15
16
  export declare const InputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
16
17
  export declare const NumberInputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>, "ref"> & {
17
18
  ref?: ((instance: HTMLInputElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLInputElement> | null | undefined;
@@ -19,7 +20,7 @@ export declare const NumberInputElement: import('styled-components/dist/types').
19
20
  $hideControls?: boolean;
20
21
  }>> & string;
21
22
  export declare const TextAreaElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
22
- export declare const TextAreaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<WrapperProps, never>> & string & Omit<({ id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
23
+ export declare const TextAreaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<WrapperProps, never>> & string & Omit<({ className, id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
23
24
  export declare const IconButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
24
25
  $show?: boolean;
25
26
  }>> & string;
@@ -19,6 +19,7 @@ export { CardPromotion } from './CardPromotion/CardPromotion';
19
19
  export { Checkbox } from './Checkbox/Checkbox';
20
20
  export { CodeBlock } from './CodeBlock/CodeBlock';
21
21
  export { Container } from './Container/Container';
22
+ export { DatePicker } from './DatePicker/DatePicker';
22
23
  export { Dialog } from './Dialog/Dialog';
23
24
  export { ConfirmationDialog } from './ConfirmationDialog/ConfirmationDialog';
24
25
  export { EllipsisContent } from './EllipsisContent/EllipsisContent';
@@ -1056,6 +1056,154 @@ export interface Theme {
1056
1056
  };
1057
1057
  };
1058
1058
  "color": {
1059
+ "variations": {
1060
+ "default": {
1061
+ "background": {
1062
+ "default": string;
1063
+ "hover": string;
1064
+ "active": string;
1065
+ "disabled": string;
1066
+ };
1067
+ "stroke": {
1068
+ "default": string;
1069
+ "hover": string;
1070
+ "active": string;
1071
+ "disabled": string;
1072
+ };
1073
+ "check": {
1074
+ "default": string;
1075
+ "hover": string;
1076
+ "active": string;
1077
+ "disabled": string;
1078
+ };
1079
+ "label": {
1080
+ "default": string;
1081
+ "hover": string;
1082
+ "active": string;
1083
+ "disabled": string;
1084
+ };
1085
+ };
1086
+ "var1": {
1087
+ "background": {
1088
+ "default": string;
1089
+ "hover": string;
1090
+ "active": string;
1091
+ "disabled": string;
1092
+ };
1093
+ "stroke": {
1094
+ "default": string;
1095
+ "hover": string;
1096
+ "active": string;
1097
+ "disabled": string;
1098
+ };
1099
+ "check": {
1100
+ "default": string;
1101
+ "hover": string;
1102
+ "active": string;
1103
+ "disabled": string;
1104
+ };
1105
+ };
1106
+ "var2": {
1107
+ "background": {
1108
+ "default": string;
1109
+ "hover": string;
1110
+ "active": string;
1111
+ "disabled": string;
1112
+ };
1113
+ "stroke": {
1114
+ "default": string;
1115
+ "hover": string;
1116
+ "active": string;
1117
+ "disabled": string;
1118
+ };
1119
+ "check": {
1120
+ "default": string;
1121
+ "hover": string;
1122
+ "active": string;
1123
+ "disabled": string;
1124
+ };
1125
+ };
1126
+ "var3": {
1127
+ "background": {
1128
+ "default": string;
1129
+ "hover": string;
1130
+ "active": string;
1131
+ "disabled": string;
1132
+ };
1133
+ "stroke": {
1134
+ "default": string;
1135
+ "hover": string;
1136
+ "active": string;
1137
+ "disabled": string;
1138
+ };
1139
+ "check": {
1140
+ "default": string;
1141
+ "hover": string;
1142
+ "active": string;
1143
+ "disabled": string;
1144
+ };
1145
+ };
1146
+ "var4": {
1147
+ "background": {
1148
+ "default": string;
1149
+ "hover": string;
1150
+ "active": string;
1151
+ "disabled": string;
1152
+ };
1153
+ "stroke": {
1154
+ "default": string;
1155
+ "hover": string;
1156
+ "active": string;
1157
+ "disabled": string;
1158
+ };
1159
+ "check": {
1160
+ "default": string;
1161
+ "hover": string;
1162
+ "active": string;
1163
+ "disabled": string;
1164
+ };
1165
+ };
1166
+ "var5": {
1167
+ "background": {
1168
+ "default": string;
1169
+ "hover": string;
1170
+ "active": string;
1171
+ "disabled": string;
1172
+ };
1173
+ "stroke": {
1174
+ "default": string;
1175
+ "hover": string;
1176
+ "active": string;
1177
+ "disabled": string;
1178
+ };
1179
+ "check": {
1180
+ "default": string;
1181
+ "hover": string;
1182
+ "active": string;
1183
+ "disabled": string;
1184
+ };
1185
+ };
1186
+ "var6": {
1187
+ "background": {
1188
+ "default": string;
1189
+ "hover": string;
1190
+ "active": string;
1191
+ "disabled": string;
1192
+ };
1193
+ "stroke": {
1194
+ "default": string;
1195
+ "hover": string;
1196
+ "active": string;
1197
+ "disabled": string;
1198
+ };
1199
+ "check": {
1200
+ "default": string;
1201
+ "hover": string;
1202
+ "active": string;
1203
+ "disabled": string;
1204
+ };
1205
+ };
1206
+ };
1059
1207
  "background": {
1060
1208
  "default": string;
1061
1209
  "hover": string;
@@ -2497,6 +2645,10 @@ export interface Theme {
2497
2645
  "width": string;
2498
2646
  "height": string;
2499
2647
  };
2648
+ "widest": {
2649
+ "width": string;
2650
+ "height": string;
2651
+ };
2500
2652
  };
2501
2653
  "typography": {
2502
2654
  "default": {
@@ -2699,6 +2851,73 @@ export interface Theme {
2699
2851
  };
2700
2852
  };
2701
2853
  };
2854
+ "datePicker": {
2855
+ "dateOption": {
2856
+ "space": {
2857
+ "gap": string;
2858
+ };
2859
+ "radii": {
2860
+ "default": string;
2861
+ "range": string;
2862
+ };
2863
+ "stroke": string;
2864
+ "size": {
2865
+ "height": string;
2866
+ "width": string;
2867
+ };
2868
+ "typography": {
2869
+ "label": {
2870
+ "default": string;
2871
+ "hover": string;
2872
+ "active": string;
2873
+ "disabled": string;
2874
+ "range": string;
2875
+ };
2876
+ };
2877
+ "color": {
2878
+ "label": {
2879
+ "default": string;
2880
+ "hover": string;
2881
+ "active": string;
2882
+ "disabled": string;
2883
+ "range": string;
2884
+ };
2885
+ "background": {
2886
+ "default": string;
2887
+ "hover": string;
2888
+ "active": string;
2889
+ "disabled": string;
2890
+ "range": string;
2891
+ };
2892
+ "stroke": {
2893
+ "default": string;
2894
+ "hover": string;
2895
+ "active": string;
2896
+ "disabled": string;
2897
+ "range": string;
2898
+ };
2899
+ };
2900
+ };
2901
+ "space": {
2902
+ "gap": string;
2903
+ };
2904
+ "typography": {
2905
+ "daytitle": {
2906
+ "default": string;
2907
+ };
2908
+ "title": {
2909
+ "default": string;
2910
+ };
2911
+ };
2912
+ "color": {
2913
+ "title": {
2914
+ "default": string;
2915
+ };
2916
+ "daytitle": {
2917
+ "default": string;
2918
+ };
2919
+ };
2920
+ };
2702
2921
  "global": {
2703
2922
  "color": {
2704
2923
  "background": {
@@ -2890,6 +3109,10 @@ export interface Theme {
2890
3109
  "icon": {
2891
3110
  "background": string;
2892
3111
  };
3112
+ "gradients": {
3113
+ "yellowToBlack": string;
3114
+ "whiteToBlack": string;
3115
+ };
2893
3116
  };
2894
3117
  };
2895
3118
  "palette": {
@@ -774,6 +774,41 @@ declare const _default: {
774
774
  }
775
775
  }
776
776
  },
777
+ "datePicker": {
778
+ "dateOption": {
779
+ "color": {
780
+ "label": {
781
+ "default": "#161517",
782
+ "hover": "#161517",
783
+ "active": "#ffffff",
784
+ "disabled": "#a0a0a0",
785
+ "range": "#161517"
786
+ },
787
+ "background": {
788
+ "default": "#ffffff",
789
+ "hover": "#ffffff",
790
+ "active": "#151515",
791
+ "disabled": "#ffffff",
792
+ "range": "#e6e7e9"
793
+ },
794
+ "stroke": {
795
+ "default": "#ffffff",
796
+ "hover": "#151515",
797
+ "active": "#151515",
798
+ "disabled": "#ffffff",
799
+ "range": "#e6e7e9"
800
+ }
801
+ }
802
+ },
803
+ "color": {
804
+ "title": {
805
+ "default": "lch(10.2 1.39 305)"
806
+ },
807
+ "daytitle": {
808
+ "default": "#696e79"
809
+ }
810
+ }
811
+ },
777
812
  "global": {
778
813
  "color": {
779
814
  "text": {
@@ -583,6 +583,154 @@ declare const _default: {
583
583
  },
584
584
  "checkbox": {
585
585
  "color": {
586
+ "variations": {
587
+ "default": {
588
+ "background": {
589
+ "default": "rgb(17.8% 17.8% 17.8%)",
590
+ "hover": "rgb(17.8% 17.8% 17.8%)",
591
+ "active": "#FAFF69",
592
+ "disabled": "#414141"
593
+ },
594
+ "stroke": {
595
+ "default": "#414141",
596
+ "hover": "#414141",
597
+ "active": "#FAFF69",
598
+ "disabled": "#606060"
599
+ },
600
+ "check": {
601
+ "default": "#ffffff",
602
+ "hover": "#ffffff",
603
+ "active": "#151515",
604
+ "disabled": "#808080"
605
+ },
606
+ "label": {
607
+ "default": "#ffffff",
608
+ "hover": "#ffffff",
609
+ "active": "#ffffff",
610
+ "disabled": "#606060"
611
+ }
612
+ },
613
+ "var1": {
614
+ "background": {
615
+ "default": "rgb(17.8% 17.8% 17.8%)",
616
+ "hover": "rgb(17.8% 17.8% 17.8%)",
617
+ "active": "#66FF73",
618
+ "disabled": "rgb(17.8% 17.8% 17.8%)"
619
+ },
620
+ "stroke": {
621
+ "default": "#00CC11",
622
+ "hover": "#66FF73",
623
+ "active": "#66FF73",
624
+ "disabled": "#606060"
625
+ },
626
+ "check": {
627
+ "default": "#ffffff",
628
+ "hover": "#ffffff",
629
+ "active": "#ffffff",
630
+ "disabled": "#a0a0a0"
631
+ }
632
+ },
633
+ "var2": {
634
+ "background": {
635
+ "default": "rgb(17.8% 17.8% 17.8%)",
636
+ "hover": "rgb(17.8% 17.8% 17.8%)",
637
+ "active": "#6c9af3",
638
+ "disabled": "rgb(17.8% 17.8% 17.8%)"
639
+ },
640
+ "stroke": {
641
+ "default": "#6c9af3",
642
+ "hover": "#91b3f6",
643
+ "active": "#91b3f6",
644
+ "disabled": "#606060"
645
+ },
646
+ "check": {
647
+ "default": "#ffffff",
648
+ "hover": "#ffffff",
649
+ "active": "#ffffff",
650
+ "disabled": "#a0a0a0"
651
+ }
652
+ },
653
+ "var3": {
654
+ "background": {
655
+ "default": "rgb(17.8% 17.8% 17.8%)",
656
+ "hover": "rgb(17.8% 17.8% 17.8%)",
657
+ "active": "#FB64D6",
658
+ "disabled": "rgb(17.8% 17.8% 17.8%)"
659
+ },
660
+ "stroke": {
661
+ "default": "#FB64D6",
662
+ "hover": "#FB64D6",
663
+ "active": "#FB64D6",
664
+ "disabled": "#606060"
665
+ },
666
+ "check": {
667
+ "default": "#ffffff",
668
+ "hover": "#ffffff",
669
+ "active": "#ffffff",
670
+ "disabled": "#a0a0a0"
671
+ }
672
+ },
673
+ "var4": {
674
+ "background": {
675
+ "default": "rgb(17.8% 17.8% 17.8%)",
676
+ "hover": "rgb(17.8% 17.8% 17.8%)",
677
+ "active": "#FAFF69",
678
+ "disabled": "rgb(17.8% 17.8% 17.8%)"
679
+ },
680
+ "stroke": {
681
+ "default": "#FAFF69",
682
+ "hover": "#fdffa3",
683
+ "active": "#fdffa3",
684
+ "disabled": "#606060"
685
+ },
686
+ "check": {
687
+ "default": "#ffffff",
688
+ "hover": "#ffffff",
689
+ "active": "#ffffff",
690
+ "disabled": "#a0a0a0"
691
+ }
692
+ },
693
+ "var5": {
694
+ "background": {
695
+ "default": "rgb(17.8% 17.8% 17.8%)",
696
+ "hover": "rgb(17.8% 17.8% 17.8%)",
697
+ "active": "#66FFE5",
698
+ "disabled": "rgb(17.8% 17.8% 17.8%)"
699
+ },
700
+ "stroke": {
701
+ "default": "#66FFE5",
702
+ "hover": "#99FFEE",
703
+ "active": "#99FFEE",
704
+ "disabled": "#606060"
705
+ },
706
+ "check": {
707
+ "default": "#ffffff",
708
+ "hover": "#ffffff",
709
+ "active": "#ffffff",
710
+ "disabled": "#a0a0a0"
711
+ }
712
+ },
713
+ "var6": {
714
+ "background": {
715
+ "default": "rgb(17.8% 17.8% 17.8%)",
716
+ "hover": "rgb(17.8% 17.8% 17.8%)",
717
+ "active": "#BB33FF",
718
+ "disabled": "rgb(17.8% 17.8% 17.8%)"
719
+ },
720
+ "stroke": {
721
+ "default": "#CC66FF",
722
+ "hover": "#CC66FF",
723
+ "active": "#CC66FF",
724
+ "disabled": "#606060"
725
+ },
726
+ "check": {
727
+ "default": "#ffffff",
728
+ "hover": "#ffffff",
729
+ "active": "#ffffff",
730
+ "disabled": "#a0a0a0"
731
+ }
732
+ }
733
+ },
586
734
  "background": {
587
735
  "default": "rgb(17.8% 17.8% 17.8%)",
588
736
  "hover": "rgb(17.8% 17.8% 17.8%)",
@@ -1338,6 +1486,41 @@ declare const _default: {
1338
1486
  }
1339
1487
  }
1340
1488
  },
1489
+ "datePicker": {
1490
+ "dateOption": {
1491
+ "color": {
1492
+ "label": {
1493
+ "default": "#ffffff",
1494
+ "hover": "#ffffff",
1495
+ "active": "#1F1F1C",
1496
+ "disabled": "#a0a0a0",
1497
+ "range": "#ffffff"
1498
+ },
1499
+ "background": {
1500
+ "default": "#1F1F1C",
1501
+ "hover": "#1F1F1C",
1502
+ "active": "#FAFF69",
1503
+ "disabled": "#1F1F1C",
1504
+ "range": "#323232"
1505
+ },
1506
+ "stroke": {
1507
+ "default": "#1F1F1C",
1508
+ "hover": "#FAFF69",
1509
+ "active": "#FAFF69",
1510
+ "disabled": "#1F1F1C",
1511
+ "range": "#323232"
1512
+ }
1513
+ }
1514
+ },
1515
+ "color": {
1516
+ "title": {
1517
+ "default": "rgb(97.5% 97.5% 97.5%)"
1518
+ },
1519
+ "daytitle": {
1520
+ "default": "#b3b6bd"
1521
+ }
1522
+ }
1523
+ },
1341
1524
  "global": {
1342
1525
  "color": {
1343
1526
  "background": {
@@ -1488,7 +1671,7 @@ declare const _default: {
1488
1671
  }
1489
1672
  },
1490
1673
  "icon": {
1491
- "background": "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);"
1674
+ "background": "linear-gradient(132deg, #FAFF69 8%, #292929 30%);"
1492
1675
  }
1493
1676
  }
1494
1677
  }