kui-basic 1.0.2 → 1.0.3

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.ts CHANGED
@@ -1,174 +1,227 @@
1
1
  import * as React$1 from 'react';
2
2
  import { HTMLInputTypeAttribute, SyntheticEvent } from 'react';
3
+ import { Palette as Palette$1, GreyColors as GreyColors$1, BrandColors as BrandColors$1, ColorOption as ColorOption$1, BackgroundColors as BackgroundColors$1 } from 'kui-complex/src/theme/types';
4
+
5
+ interface BrandColors {
6
+ main: string
7
+ pressed: string
8
+ hover: string
9
+ light: string
10
+ background: string
11
+ }
12
+ interface ColorOption {
13
+ fiftyP: string
14
+ seventy: string
15
+ sixty: string
16
+ ten: string
17
+ five: string
18
+ }
19
+ interface GreyColors {
20
+ seventy: string
21
+ sixty: string
22
+ fiftyP: string
23
+ fourty: string
24
+ thirty: string
25
+ fifteenB: string
26
+ zero: string
27
+ }
28
+ interface BackgroundColors {
29
+ light1: string
30
+ light2: string
31
+ light3: string
32
+ light4: string
33
+ }
34
+
35
+ type PrimaryColorsType = {
36
+ main: string
37
+ pressed: string
38
+ hover: string
39
+ light: string
40
+ light2: string
41
+ }
42
+
43
+ type SecondaryColorsType = {
44
+ main: string
45
+ gray60: string
46
+ gray50: string
47
+ gray40: string
48
+ gray30: string
49
+ gray15: string
50
+ white: string
51
+ light: string
52
+ disabled: string
53
+ }
54
+
55
+ type BackgroundColorsType = {
56
+ main: string
57
+ light2: string
58
+ light3: string
59
+ }
60
+
61
+ type SuccessColorsType = {
62
+ green70: string
63
+ green60: string
64
+ main: string
65
+ green10: string
66
+ green5: string
67
+ }
68
+
69
+ type ErrorColorsType = {
70
+ red70: string
71
+ red60: string
72
+ main: string
73
+ red10: string
74
+ red5: string
75
+ }
76
+
77
+ type InfoColorsType = {
78
+ blue70: string
79
+ blue60: string
80
+ main: string
81
+ blue10: string
82
+ blue5: string
83
+ }
84
+
85
+ type PurpleColorsType = {
86
+ purple70: string
87
+ purple60: string
88
+ main: string
89
+ purple10: string
90
+ purple5: string
91
+ }
92
+
93
+ type ColorsType = {
94
+ primary: PrimaryColorsType
95
+ secondary: SecondaryColorsType
96
+ background: BackgroundColorsType
97
+ success: SuccessColorsType
98
+ error: ErrorColorsType
99
+ info: InfoColorsType
100
+ purple: PurpleColorsType
101
+ }
102
+
103
+ type ShadowsType = {
104
+ shadow1: string
105
+ shadow2: string
106
+ shadow3: string
107
+ shadow4: string
108
+ }
109
+
110
+ type BreakpointsType = {
111
+ xxs: number
112
+ xs: number
113
+ sm: number
114
+ md: number
115
+ lg: number
116
+ xl: number
117
+ }
118
+
119
+ type SettingsType = {
120
+ spacing: number
121
+ columns: number
122
+ }
123
+
124
+ type ThemeType = {
125
+ palette: ColorsType
126
+ shadows: ShadowsType
127
+ breakpoints: BreakpointsType
128
+ settings: SettingsType
129
+ }
130
+
131
+ type Palette = {
132
+ brand: BrandColors
133
+ green: ColorOption
134
+ red: ColorOption
135
+ blue: ColorOption
136
+ purple: ColorOption
137
+ grey: GreyColors
138
+ background: BackgroundColors
139
+ }
140
+
141
+ type ThemeInterface = {
142
+ palette: Palette
143
+ shadows: ShadowsType
144
+ breakpoints: BreakpointsType
145
+ settings: SettingsType
146
+ }
147
+
148
+ declare const themeOld: ThemeType
149
+ declare const theme: ThemeInterface
150
+
151
+ type CaptionSizes = "xs" | "sm" | "s" | "m" | "l"
152
+
153
+ type CaptionWeight = 400 | 500 | 600 | 700
154
+
155
+ type CaptionAlign = "center" | "right" | "left"
156
+
157
+ type CaptionColorGroups = keyof Palette$1
158
+
159
+ type CaptionColors =
160
+ | keyof GreyColors$1
161
+ | keyof BrandColors$1
162
+ | keyof ColorOption$1
163
+ | keyof BackgroundColors$1
164
+
165
+ interface CaptionProps
166
+ extends React$1.DetailedHTMLProps<
167
+ React$1.HTMLAttributes<HTMLParagraphElement>,
168
+ HTMLParagraphElement
169
+ >,
170
+ React$1.AriaAttributes {
171
+ size?: CaptionSizes
172
+ weight?: CaptionWeight
173
+ color?: CaptionColors
174
+ disableUserSelect?: boolean
175
+ align?: CaptionAlign
176
+ colorGroup?: CaptionColorGroups
177
+ }
178
+
179
+ type CaptionType = (props: CaptionProps) => React$1.ReactElement
3
180
 
4
- type PrimaryColorsType = {
5
- main: string
6
- pressed: string
7
- hover: string
8
- light: string
9
- light2: string
10
- }
11
-
12
- type SecondaryColorsType = {
13
- main: string
14
- gray60: string
15
- gray50: string
16
- gray40: string
17
- gray30: string
18
- gray15: string
19
- white: string
20
- light: string
21
- disabled: string
22
- }
23
-
24
- type BackgroundColorsType = {
25
- main: string
26
- light2: string
27
- light3: string
28
- }
29
-
30
- type SuccessColorsType = {
31
- green70: string
32
- green60: string
33
- main: string
34
- green10: string
35
- green5: string
36
- }
37
-
38
- type ErrorColorsType = {
39
- red70: string
40
- red60: string
41
- main: string
42
- red10: string
43
- red5: string
44
- }
45
-
46
- type InfoColorsType = {
47
- blue70: string
48
- blue60: string
49
- main: string
50
- blue10: string
51
- blue5: string
52
- }
53
-
54
- type PurpleColorsType = {
55
- purple70: string
56
- purple60: string
57
- main: string
58
- purple10: string
59
- purple5: string
60
- }
61
-
62
- type ColorsType = {
63
- primary: PrimaryColorsType
64
- secondary: SecondaryColorsType
65
- background: BackgroundColorsType
66
- success: SuccessColorsType
67
- error: ErrorColorsType
68
- info: InfoColorsType
69
- purple: PurpleColorsType
70
- }
71
-
72
- type ShadowsType = {
73
- shadow1: string
74
- shadow2: string
75
- shadow3: string
76
- shadow4: string
77
- }
78
-
79
- type BreakpointsType = {
80
- xxs: number
81
- xs: number
82
- sm: number
83
- md: number
84
- lg: number
85
- xl: number
86
- }
87
-
88
- type SettingsType = {
89
- spacing: number
90
- columns: number
91
- }
92
-
93
- type ThemeType = {
94
- palette: ColorsType
95
- shadows: ShadowsType
96
- breakpoints: BreakpointsType
97
- settings: SettingsType
98
- }
99
-
100
- declare const theme: ThemeType
101
-
102
- type CaptionSizes = "xs" | "sm" | "s" | "m" | "l"
103
-
104
- type CaptionWeight = 400 | 500 | 600
105
-
106
- type CaptionColors =
107
- | "main"
108
- | "gray60"
109
- | "gray50"
110
- | "gray40"
111
- | "white"
112
- | "brand"
113
-
114
- interface CaptionProps
115
- extends React$1.DetailedHTMLProps<
116
- React$1.HTMLAttributes<HTMLParagraphElement>,
117
- HTMLParagraphElement
118
- >,
119
- React$1.AriaAttributes {
120
- size?: CaptionSizes
121
- weight?: CaptionWeight
122
- color?: CaptionColors
123
- disableUserSelect?: boolean
124
- align?: "center" | "right" | "left"
125
- }
126
-
127
- type CaptionType = (props: CaptionProps) => React$1.ReactElement
128
-
129
181
  declare const Caption: CaptionType
130
182
 
131
- type ButtonThemes =
132
- | "primary"
133
- | "orange"
134
- | "white"
135
- | "whiteWithOrangeHover"
136
- | "whiteWithBrand"
137
- | "blur"
138
- | "whiteWithGray"
139
- | "grayLightWithBorder"
140
- | "grayLight"
141
- | "green"
142
- | "red"
143
- | "transparent"
144
-
145
- type ButtonSizes = "xs" | "s" | "m" | "l"
146
-
147
- type ButtonTypes = "button" | "submit"
148
-
149
- type ButtonBorder = "brand" | "lightGray" | "lightOrange"
150
-
151
- interface ButtonProps
152
- extends React$1.DetailedHTMLProps<
153
- React$1.ButtonHTMLAttributes<HTMLButtonElement>,
154
- HTMLButtonElement
155
- >,
156
- React$1.AriaAttributes {
157
- variant?: ButtonThemes
158
- size?: ButtonSizes
159
- type?: ButtonTypes
160
- fullWidth?: boolean
161
- endIcon?: React$1.ReactElement
162
- startIcon?: React$1.ReactElement
163
- disabled?: boolean
164
- isCircle?: boolean
165
- captionSize?: CaptionSizes
166
- disabledStyle?: string
167
- border?: ButtonBorder
168
- }
169
-
170
- type ButtonType = (props: ButtonProps) => React$1.ReactElement
171
-
183
+ type ButtonThemes =
184
+ | "primary"
185
+ | "orange"
186
+ | "white"
187
+ | "whiteWithOrangeHover"
188
+ | "whiteWithBrand"
189
+ | "blur"
190
+ | "whiteWithGray"
191
+ | "grayLightWithBorder"
192
+ | "grayLight"
193
+ | "green"
194
+ | "red"
195
+ | "transparent"
196
+
197
+ type ButtonSizes = "xs" | "s" | "m" | "l"
198
+
199
+ type ButtonTypes = "button" | "submit"
200
+
201
+ type ButtonBorder = "brand" | "lightGray" | "lightOrange"
202
+
203
+ interface ButtonProps
204
+ extends React$1.DetailedHTMLProps<
205
+ React$1.ButtonHTMLAttributes<HTMLButtonElement>,
206
+ HTMLButtonElement
207
+ >,
208
+ React$1.AriaAttributes {
209
+ variant?: ButtonThemes
210
+ size?: ButtonSizes
211
+ type?: ButtonTypes
212
+ fullWidth?: boolean
213
+ endIcon?: React$1.ReactElement
214
+ startIcon?: React$1.ReactElement
215
+ disabled?: boolean
216
+ isCircle?: boolean
217
+ captionSize?: CaptionSizes
218
+ captionWeight?: CaptionWeight
219
+ disabledStyle?: string
220
+ border?: ButtonBorder
221
+ }
222
+
223
+ type ButtonType = (props: ButtonProps) => React$1.ReactElement
224
+
172
225
  declare const Button: ButtonType
173
226
 
174
227
  interface CheckboxProps
@@ -197,32 +250,29 @@ type DividerType = (props: DividerProps) => React$1.ReactElement
197
250
 
198
251
  declare const Divider: DividerType
199
252
 
200
- type HeadingSizes = "hero" | "h1" | "h2" | "h3" | "h4"
201
-
202
- type HeadingColors =
203
- | "main"
204
- | "gray60"
205
- | "gray50"
206
- | "gray40"
207
- | "white"
208
- | "brand"
209
-
210
- interface HeadingProps
211
- extends React$1.DetailedHTMLProps<
212
- React$1.HTMLAttributes<HTMLElement>,
213
- HTMLElement
214
- >,
215
- React$1.AriaAttributes {
216
- size?: HeadingSizes
217
- uppercase?: boolean
218
- disableUserSelect?: boolean
219
- color?: HeadingColors
220
- weight?: number
221
- align?: "center" | "right" | "left"
222
- }
223
-
224
- type HeadingType = (props: HeadingProps) => React$1.ReactElement
225
-
253
+ type HeadingSizes = "hero" | "h1" | "h2" | "h3" | "h4"
254
+
255
+ type HeadingColors = CaptionColors
256
+
257
+ type HeadingColorGroups = CaptionColorGroups
258
+
259
+ interface HeadingProps
260
+ extends React$1.DetailedHTMLProps<
261
+ React$1.HTMLAttributes<HTMLElement>,
262
+ HTMLElement
263
+ >,
264
+ React$1.AriaAttributes {
265
+ size?: HeadingSizes
266
+ uppercase?: boolean
267
+ disableUserSelect?: boolean
268
+ color?: HeadingColors
269
+ colorGroup?: HeadingColorGroups
270
+ weight?: number
271
+ align?: "center" | "right" | "left"
272
+ }
273
+
274
+ type HeadingType = (props: HeadingProps) => React$1.ReactElement
275
+
226
276
  declare const Heading: HeadingType
227
277
 
228
278
  interface InputProps
@@ -414,36 +464,36 @@ type ContainerType = (
414
464
 
415
465
  declare const Container: ContainerType
416
466
 
417
- type GridJustify = "center" | "flex-start" | "flex-end" | "space-between"
418
-
419
- type GridAlignItems = "center" | "flex-start" | "flex-end"
420
-
421
- type GridDirections = "column" | "row"
422
-
423
- type GridSizing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
424
-
425
- interface GridProps
426
- extends React$1.DetailedHTMLProps<
427
- React$1.HTMLAttributes<HTMLDivElement>,
428
- HTMLDivElement
429
- >,
430
- React$1.AriaAttributes {
431
- spacing?: GridSizing
432
- item?: boolean
433
- container?: boolean
434
- justify?: GridJustify
435
- alignItems?: GridAlignItems
436
- alignContent?: GridAlignItems
437
- direction?: GridDirections
438
- xs?: GridSizing
439
- sm?: GridSizing
440
- md?: GridSizing
441
- lg?: GridSizing
442
- xl?: GridSizing
443
- }
444
-
445
- type GridType = (props: GridProps) => React$1.ReactElement
446
-
467
+ type GridJustify = "center" | "flex-start" | "flex-end" | "space-between"
468
+
469
+ type GridAlignItems = "center" | "flex-start" | "flex-end"
470
+
471
+ type GridDirections = "column" | "row"
472
+
473
+ type GridSizing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto"
474
+
475
+ interface GridProps
476
+ extends React$1.DetailedHTMLProps<
477
+ React$1.HTMLAttributes<HTMLDivElement>,
478
+ HTMLDivElement
479
+ >,
480
+ React$1.AriaAttributes {
481
+ spacing?: GridSizing
482
+ item?: boolean
483
+ container?: boolean
484
+ justify?: GridJustify
485
+ alignItems?: GridAlignItems
486
+ alignContent?: GridAlignItems
487
+ direction?: GridDirections
488
+ xs?: GridSizing
489
+ sm?: GridSizing
490
+ md?: GridSizing
491
+ lg?: GridSizing
492
+ xl?: GridSizing
493
+ }
494
+
495
+ type GridType = (props: GridProps) => React$1.ReactElement
496
+
447
497
  declare const Grid: GridType
448
498
 
449
499
  type BoxSizing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
@@ -662,4 +712,4 @@ type IconButtonType = (props: IconButtonProps) => React$1.ReactElement
662
712
 
663
713
  declare const IconButton: IconButtonType
664
714
 
665
- export { Accordion, AccordionDetails, AccordionDetailsType, AccordionSummary, AccordionSummaryProps, AccordionSummaryType, AccordionType, AppBar, AppBarProps, AppBarType, BackgroundColorsType, Box, BoxProps, BoxSizing, BoxType, BreakpointsType, Button, ButtonBorder, ButtonProps, ButtonSizes, ButtonThemes, ButtonType, ButtonTypes, Caption, CaptionColors, CaptionProps, CaptionSizes, CaptionType, CaptionWeight, Checkbox, CheckboxProps, CheckboxType, CircularProgress, CircularProgressType, ColorsType, Container, ContainerType, CountryItem, Divider, DividerProps, DividerType, ErrorColorsType, Grid, GridAlignItems, GridDirections, GridJustify, GridProps, GridSizing, GridType, Heading, HeadingColors, HeadingProps, HeadingSizes, HeadingType, IconButton, IconButtonProps, IconButtonType, InfoColorsType, Input, InputFile, InputFileProps, InputFileType, InputMessage, InputMessageProps, InputMessageType, InputMessageVariant, InputProps, InputType, InputWithAdornments, InputWithAdornmentsProps, InputWithAdornmentsType, InputWithCountryDropdown, InputWithCountryDropdownProps, InputWithCountryDropdownType, InputWithMask, InputWithMaskProps, InputWithMaskType, LinearProgress, LinearProgressType, MenuPanel, MenuPanelProps, MenuPanelType, Modal, ModalProps, ModalSizes, ModalType, PrimaryColorsType, PurpleColorsType, Radio, RadioProps, RadioType, SecondaryColorsType, SettingsType, ShadowsType, Skeleton, SkeletonType, SuccessColorsType, Switch, SwitchProps, SwitchSizes, SwitchType, Tab, TabChangeHandlerType, TabProps, TabType, Tabs, TabsIndicatorPositions, TabsPanel, TabsPanelProps, TabsPanelType, TabsProps, TabsType, Text, TextColors, TextProps, TextSizes, TextType, TextWeight, ThemeType, ToolBar, ToolBarType, theme };
715
+ export { Accordion, AccordionDetails, AccordionDetailsType, AccordionSummary, AccordionSummaryProps, AccordionSummaryType, AccordionType, AppBar, AppBarProps, AppBarType, BackgroundColorsType, Box, BoxProps, BoxSizing, BoxType, BrandColors, BreakpointsType, Button, ButtonBorder, ButtonProps, ButtonSizes, ButtonThemes, ButtonType, ButtonTypes, Caption, CaptionAlign, CaptionColorGroups, CaptionColors, CaptionProps, CaptionSizes, CaptionType, CaptionWeight, Checkbox, CheckboxProps, CheckboxType, CircularProgress, CircularProgressType, ColorOption, ColorsType, Container, ContainerType, CountryItem, Divider, DividerProps, DividerType, ErrorColorsType, GreyColors, Grid, GridAlignItems, GridDirections, GridJustify, GridProps, GridSizing, GridType, Heading, HeadingColorGroups, HeadingColors, HeadingProps, HeadingSizes, HeadingType, IconButton, IconButtonProps, IconButtonType, InfoColorsType, Input, InputFile, InputFileProps, InputFileType, InputMessage, InputMessageProps, InputMessageType, InputMessageVariant, InputProps, InputType, InputWithAdornments, InputWithAdornmentsProps, InputWithAdornmentsType, InputWithCountryDropdown, InputWithCountryDropdownProps, InputWithCountryDropdownType, InputWithMask, InputWithMaskProps, InputWithMaskType, LinearProgress, LinearProgressType, MenuPanel, MenuPanelProps, MenuPanelType, Modal, ModalProps, ModalSizes, ModalType, Palette, PrimaryColorsType, PurpleColorsType, Radio, RadioProps, RadioType, SecondaryColorsType, SettingsType, ShadowsType, Skeleton, SkeletonType, SuccessColorsType, Switch, SwitchProps, SwitchSizes, SwitchType, Tab, TabChangeHandlerType, TabProps, TabType, Tabs, TabsIndicatorPositions, TabsPanel, TabsPanelProps, TabsPanelType, TabsProps, TabsType, Text, TextColors, TextProps, TextSizes, TextType, TextWeight, ThemeInterface, ThemeType, ToolBar, ToolBarType, theme, themeOld };