reactive-bulma 2.13.0 → 2.15.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. package/dist/cjs/index.js +91 -1
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/atoms/Tile/index.d.ts +4 -0
  4. package/dist/cjs/types/components/atoms/index.d.ts +1 -0
  5. package/dist/cjs/types/components/molecules/TileBox/index.d.ts +4 -0
  6. package/dist/cjs/types/components/molecules/index.d.ts +1 -0
  7. package/dist/cjs/types/components/organisms/Hero/index.d.ts +4 -0
  8. package/dist/cjs/types/components/organisms/TileGroup/index.d.ts +4 -0
  9. package/dist/cjs/types/components/organisms/index.d.ts +2 -0
  10. package/dist/cjs/types/interfaces/atomProps.d.ts +40 -28
  11. package/dist/cjs/types/interfaces/moleculeProps.d.ts +21 -20
  12. package/dist/cjs/types/interfaces/organismProps.d.ts +24 -6
  13. package/dist/cjs/types/types/domTypes.d.ts +9 -0
  14. package/dist/cjs/types/types/styleTypes.d.ts +17 -15
  15. package/dist/esm/index.js +88 -2
  16. package/dist/esm/index.js.map +1 -1
  17. package/dist/esm/types/components/atoms/Tile/index.d.ts +4 -0
  18. package/dist/esm/types/components/atoms/index.d.ts +1 -0
  19. package/dist/esm/types/components/molecules/TileBox/index.d.ts +4 -0
  20. package/dist/esm/types/components/molecules/index.d.ts +1 -0
  21. package/dist/esm/types/components/organisms/Hero/index.d.ts +4 -0
  22. package/dist/esm/types/components/organisms/TileGroup/index.d.ts +4 -0
  23. package/dist/esm/types/components/organisms/index.d.ts +2 -0
  24. package/dist/esm/types/interfaces/atomProps.d.ts +40 -28
  25. package/dist/esm/types/interfaces/moleculeProps.d.ts +21 -20
  26. package/dist/esm/types/interfaces/organismProps.d.ts +24 -6
  27. package/dist/esm/types/types/domTypes.d.ts +9 -0
  28. package/dist/esm/types/types/styleTypes.d.ts +17 -15
  29. package/dist/index.d.ts +106 -63
  30. package/package.json +1 -1
  31. package/dist/cjs/types/types/componentEnums.d.ts +0 -5
  32. package/dist/esm/types/types/componentEnums.d.ts +0 -5
package/dist/index.d.ts CHANGED
@@ -24,33 +24,38 @@ interface ClickeableProps {
24
24
  onClick?: () => void;
25
25
  }
26
26
 
27
- type columnSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
28
- type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
29
- type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
30
- type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
31
- type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
32
- type fixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
33
- type elementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
34
- type sizeWithoutNormalType = Exclude<elementSizeType, 'is-normal'>;
35
- type iconColorModeType = 'light' | 'dark';
36
- type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
37
- type elementAlignType = 'is-centered' | 'is-right' | 'is-left';
38
- type rightCenteredAlignType = Exclude<elementAlignType, 'is-left'>;
39
- type rightLeftAlignType = Exclude<elementAlignType, 'is-centered'>;
40
- type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
41
- type tabsFormatType = 'is-boxed' | 'is-toggle';
27
+ type CommonSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
28
+ type AbstractSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth';
29
+ type ColumnSizeType = CommonSizeType | AbstractSizeType;
30
+ type ColumnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
31
+ type TitleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
32
+ type BasicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
33
+ type TextColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
34
+ type FixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
35
+ type ElementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
36
+ type SizeWithoutNormalType = Exclude<ElementSizeType, 'is-normal'>;
37
+ type IconColorModeType = 'light' | 'dark';
38
+ type ColumnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
39
+ type ElementAlignType = 'is-centered' | 'is-right' | 'is-left';
40
+ type RightCenteredAlignType = Exclude<ElementAlignType, 'is-left'>;
41
+ type RightLeftAlignType = Exclude<ElementAlignType, 'is-centered'>;
42
+ type BreadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
43
+ type TabsFormatType = 'is-boxed' | 'is-toggle';
42
44
 
43
45
  type InputType = 'text' | 'password' | 'email' | 'tel';
44
46
  type DropdownItemType = 'item' | 'link' | 'divider';
45
47
  type PanelBlockItemType = 'icon' | 'control' | 'button';
48
+ type ChildrenType = string | React$1.ReactElement | React$1.ReactElement[];
49
+ type SingleChildType = Exclude<ChildrenType, React$1.ReactElement[]>;
50
+ type TileContextType = 'is-child' | 'is-parent' | 'is-ancestor';
46
51
 
47
52
  interface ColumnProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
48
53
  /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
49
- children?: string | React$1.ReactElement | React$1.ReactElement[];
54
+ children?: ChildrenType;
50
55
  /** `Styling` Set column's size */
51
- size?: columnSizeType;
56
+ size?: ColumnSizeType;
52
57
  /** `Styling` Set column's offset (moving it as you set its size */
53
- offset?: columnOffsetType;
58
+ offset?: ColumnOffsetType;
54
59
  /** `Styling` Set if the column only will take the space it needs */
55
60
  isNarrow?: boolean;
56
61
  }
@@ -60,7 +65,7 @@ interface ButtonProps extends ElementProps, React$1.ComponentPropsWithoutRef<'bu
60
65
  /** `Attribute` Will disable the button */
61
66
  isDisabled?: boolean;
62
67
  /** `Styling` Color based on bulma's color tokens */
63
- color?: basicColorType;
68
+ color?: BasicColorType;
64
69
  /** `Styling` Will adjust the selected color with a ligther style */
65
70
  isLightColor?: boolean;
66
71
  /** `Styling` Will invert button's colors (typography in color and background in white or black) */
@@ -76,7 +81,7 @@ interface ButtonProps extends ElementProps, React$1.ComponentPropsWithoutRef<'bu
76
81
  /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
77
82
  isSelected?: boolean;
78
83
  /** `Styling` Set button's size on bulma's size tokens */
79
- size?: elementSizeType;
84
+ size?: ElementSizeType;
80
85
  /** `Function` Click function, alone does not nothing, but can be reused for other components */
81
86
  onClick?: () => void;
82
87
  }
@@ -86,15 +91,15 @@ interface ProgressBarProps extends ElementProps, React$1.ComponentPropsWithoutRe
86
91
  /** `Attribute` Sets the entire bar length comparing with current `value` */
87
92
  max?: number;
88
93
  /** `Styling` Color based on bulma's color tokens */
89
- color?: basicColorType;
94
+ color?: BasicColorType;
90
95
  /** `Styling` Set progress bar's size */
91
- size?: elementSizeType;
96
+ size?: ElementSizeType;
92
97
  /** `Styling` Will change `value` for an animated loading */
93
98
  isLoading?: boolean;
94
99
  }
95
100
  interface BlockProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
96
101
  /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
97
- children?: string | React$1.ReactElement | React$1.ReactElement[];
102
+ children?: ChildrenType;
98
103
  }
99
104
  interface TagProps extends ComposedElementProps, React$1.ComponentPropsWithoutRef<'span'> {
100
105
  /** `Attribute` `Required` The text will be shown in the `Tag` */
@@ -106,15 +111,15 @@ interface TagProps extends ComposedElementProps, React$1.ComponentPropsWithoutRe
106
111
  /** `Attribute` The text will be shown in the tag's addon */
107
112
  addonText?: string;
108
113
  /** `Styling` Color based on bulma's color tokens */
109
- color?: basicColorType;
114
+ color?: BasicColorType;
110
115
  /** `Styling` Will adjust the selected color with a ligther style */
111
116
  isLight?: boolean;
112
117
  /** `Styling` Will add round borders to tag's shape */
113
118
  isRounded?: boolean;
114
119
  /** `Styling` Set tag's size */
115
- size?: sizeWithoutNormalType;
120
+ size?: SizeWithoutNormalType;
116
121
  /** `Styling` Color on tag's addon based on bulma's color tokens */
117
- addonColor?: basicColorType;
122
+ addonColor?: BasicColorType;
118
123
  /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
119
124
  onDeleteClick?: () => void;
120
125
  }
@@ -124,19 +129,19 @@ interface ImageProps extends ComposedElementProps, React$1.ComponentPropsWithout
124
129
  /** `Attribute` A description text for the image, useful for accessibility purposes */
125
130
  alt?: string;
126
131
  /** `Styling` Will add round borders to image's shape */
127
- fixedSize?: fixedImageSizeType;
132
+ fixedSize?: FixedImageSizeType;
128
133
  /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
129
134
  isRounded?: boolean;
130
135
  }
131
136
  interface BoxProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
132
137
  /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
133
- children?: string | React$1.ReactElement | React$1.ReactElement[];
138
+ children?: ChildrenType;
134
139
  }
135
140
  interface TitleSectionProps extends ElementProps, React$1.ComponentPropsWithoutRef<'p'> {
136
141
  /** `Attribute` Sets the text you want to show */
137
142
  text: string;
138
143
  /** `Styling` Set text size */
139
- size?: titleSizeType;
144
+ size?: TitleSizeType;
140
145
  /** `Styling` Set type of title (`title` at top, `subtitle` at below) */
141
146
  type: 'title' | 'subtitle';
142
147
  /** `Styling` Set text spacing at default or maximun length */
@@ -154,15 +159,15 @@ interface IconProps extends ComposedElementProps {
154
159
  /** `Attribute` Sets the text you want to show next to the icon */
155
160
  text?: string;
156
161
  /** `Styling` Color based on bulma's text color tokens */
157
- color?: textColorType;
162
+ color?: TextColorType;
158
163
  /** `Styling` Set icons's size */
159
- size?: sizeWithoutNormalType;
164
+ size?: SizeWithoutNormalType;
160
165
  /** `Styling` Special usage in case you want to set as dark or light mode */
161
- colorMode?: iconColorModeType;
166
+ colorMode?: IconColorModeType;
162
167
  /** `Styling` Animates the icon spinning 360° */
163
168
  isSpinning?: boolean;
164
169
  /** `Styling` Used for `InputControl` styling purpose only. Will move the Icon itself to control's Input side */
165
- position?: rightLeftAlignType;
170
+ position?: RightLeftAlignType;
166
171
  }
167
172
  interface InputProps extends ElementProps, ClickeableProps {
168
173
  /** `Attribute` `Required` What type of input will be used */
@@ -176,9 +181,9 @@ interface InputProps extends ElementProps, ClickeableProps {
176
181
  /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */
177
182
  isReadonly?: boolean;
178
183
  /** `Styling` Color based on bulma's text color tokens */
179
- color?: basicColorType;
184
+ color?: BasicColorType;
180
185
  /** `Styling` Set input's size */
181
- size?: sizeWithoutNormalType;
186
+ size?: SizeWithoutNormalType;
182
187
  /** `Styling` Will add round borders to input's shape */
183
188
  isRounded?: boolean;
184
189
  /** `Styling` Will add a specific border when the input is hovered by the user */
@@ -198,7 +203,7 @@ interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
198
203
  }
199
204
  interface DeleteProps extends ElementProps, ClickeableProps {
200
205
  /** `Styling` Set icons's size */
201
- size?: sizeWithoutNormalType;
206
+ size?: SizeWithoutNormalType;
202
207
  }
203
208
  interface SelectOption {
204
209
  id: string | number;
@@ -213,9 +218,9 @@ interface SelectProps extends ComposedElementProps, ClickeableProps {
213
218
  /** `Attribute` Will allow multiple selection */
214
219
  isMultiple?: boolean;
215
220
  /** `Styling` Color based on bulma's color tokens */
216
- color?: basicColorType;
221
+ color?: BasicColorType;
217
222
  /** `Styling` Set select's size */
218
- size?: elementSizeType;
223
+ size?: ElementSizeType;
219
224
  /** `Styling`Will add round borders to input's shape */
220
225
  isRounded?: boolean;
221
226
  /** `Styling`Will add a specific border when the input is hovered by the user */
@@ -237,13 +242,13 @@ interface FileProps extends ComposedElementProps, ClickeableProps {
237
242
  /** `Styling` Changes styling to a box style, making the button bigger and file name's position below the button */
238
243
  isBoxed?: boolean;
239
244
  /** `Styling` Color based on bulma's color tokens */
240
- color?: basicColorType;
245
+ color?: BasicColorType;
241
246
  /** `Styling` Set button's size */
242
- size?: elementSizeType;
247
+ size?: ElementSizeType;
243
248
  }
244
249
  interface CheckBoxProps extends ComposedElementProps {
245
250
  /** `Attribute` Sets checkbox's text that will be shown next to its control */
246
- content?: string | React$1.ReactElement | React$1.ReactElement[];
251
+ content?: ChildrenType;
247
252
  /** `Attribute` Will disable the checkbox */
248
253
  isDisabled?: boolean;
249
254
  /** `Function` Click function, alone does not nothing, but can be reused for other components */
@@ -319,6 +324,18 @@ interface LevelHeaderProps extends ElementProps {
319
324
  /** `Attribute` `Required` Main value (numeric or text) to be shown in a bigger scale below `header` */
320
325
  value: string | number;
321
326
  }
327
+ interface TileProps extends ElementProps {
328
+ /** `Attribute` Reffers to the component or array of components that will be shown inside the tile */
329
+ children?: ChildrenType;
330
+ /** `Attribute` Indicates its hierarchy level based on [Bulma documantation](https://bulma.io/documentation/layout/tiles/#nesting-requirements). Selection any level besides `is-child` will invalidate any `color` you select */
331
+ context?: TileContextType;
332
+ /** `Styling` Set tile's size */
333
+ size?: CommonSizeType;
334
+ /** `Styling` Color based on bulma's color tokens */
335
+ color?: BasicColorType;
336
+ /** `Styling` Used for hierarchy level as ancestor or parent. It selects its children in a vertical format (like a column) */
337
+ isVertical?: boolean;
338
+ }
322
339
 
323
340
  declare const Button: React$1.FC<ButtonProps>;
324
341
 
@@ -366,6 +383,8 @@ declare const TabItem: React$1.FC<TabItemProps>;
366
383
 
367
384
  declare const LevelHeader: React$1.FC<LevelHeaderProps>;
368
385
 
386
+ declare const Tile: React$1.FC<TileProps>;
387
+
369
388
  interface ButtonGroupProps extends ElementProps {
370
389
  /** `Atribute` `Required` Array of `Button` objects that will be shown */
371
390
  buttonList: ButtonProps[];
@@ -386,15 +405,15 @@ interface ColumnGroupProps extends ElementProps {
386
405
  /** `Styling` Will center the list of columns horizontally */
387
406
  isHorizontallyCentered?: boolean;
388
407
  /** `Styling` Will adjust the space between the columns. In case to set null, it will remove those gaps */
389
- gap?: columnGapType | null;
408
+ gap?: ColumnGapType | null;
390
409
  }
391
410
  interface NotificationProps extends ElementProps {
392
411
  /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
393
- children?: string | React.ReactElement | React.ReactElement[];
412
+ children?: ChildrenType;
394
413
  /** `Atribute` Includes a `Delete` config object that will be shown */
395
414
  deleteButton?: DeleteProps;
396
415
  /** `Styling` Color based on bulma's color tokens */
397
- color?: basicColorType;
416
+ color?: BasicColorType;
398
417
  /** `Styling` Will adjust the selected color with a ligther style */
399
418
  isLightColor?: boolean;
400
419
  }
@@ -402,11 +421,11 @@ interface BreadcrumbsProps extends ComposedElementProps {
402
421
  /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
403
422
  items: BreadcrumbItemProps[];
404
423
  /** `Styling` Will adjust element position on screen */
405
- alignment?: rightCenteredAlignType | null;
424
+ alignment?: RightCenteredAlignType | null;
406
425
  /** `Styling` Will adjust element position on screen */
407
- separator?: breadcrumbSeparatorType | null;
426
+ separator?: BreadcrumbSeparatorType | null;
408
427
  /** `Styling` Set button's size on bulma's size tokens */
409
- size?: sizeWithoutNormalType;
428
+ size?: SizeWithoutNormalType;
410
429
  }
411
430
  interface DropdownProps extends ElementProps {
412
431
  /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -424,9 +443,9 @@ interface MessageProps extends ElementProps {
424
443
  /** `Atribute` Includes a `Delete` config object that will be shown */
425
444
  deleteButton?: DeleteProps;
426
445
  /** `Styling` Color based on bulma's color tokens */
427
- color?: basicColorType;
446
+ color?: BasicColorType;
428
447
  /** `Styling` Set button's size on bulma's size tokens */
429
- size?: sizeWithoutNormalType;
448
+ size?: SizeWithoutNormalType;
430
449
  }
431
450
  interface MenuSubListProps {
432
451
  subListTitle: MenuItemProps;
@@ -469,13 +488,13 @@ interface PaginationProps extends ComposedElementProps {
469
488
  /** `Styling` Will add round borders to each page's shape */
470
489
  isRounded?: boolean;
471
490
  /** `Styling` Set button's size on bulma's size tokens */
472
- size?: sizeWithoutNormalType;
491
+ size?: SizeWithoutNormalType;
473
492
  /** `Styling` Will adjust the pages position on screen */
474
- alignment?: rightCenteredAlignType | null;
493
+ alignment?: RightCenteredAlignType | null;
475
494
  }
476
495
  interface ModalProps extends ComposedElementProps {
477
496
  /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
478
- children?: string | React.ReactElement | React.ReactElement[] | null;
497
+ children?: ChildrenType | null;
479
498
  /** `Function` Custom function related to the modal's close button to inject custom code if needed */
480
499
  onCloseClick?: () => void;
481
500
  }
@@ -483,11 +502,11 @@ interface TabsProps extends ElementProps {
483
502
  /** `Attribute` `Required` List of tabs that will be shown in order */
484
503
  tabs: TabItemProps[];
485
504
  /** `Styling` Will adjust the tabs position on screen */
486
- alignment?: rightCenteredAlignType;
505
+ alignment?: RightCenteredAlignType;
487
506
  /** `Styling` Set tab's size on bulma's size tokens */
488
- size?: sizeWithoutNormalType;
507
+ size?: SizeWithoutNormalType;
489
508
  /** `Styling` Set tab's size on bulma's size tokens */
490
- format?: tabsFormatType;
509
+ format?: TabsFormatType;
491
510
  /** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
492
511
  isRounded?: boolean;
493
512
  /** `Styling` The whole container will occupy its parent container width */
@@ -501,7 +520,7 @@ interface InputControlProps extends ElementProps {
501
520
  /** `Attribute` `Icon` configuration that will be shown in Input's right side */
502
521
  rightIcon?: IconProps;
503
522
  /** `Styling` Set control and its input size on bulma's size tokens */
504
- size?: sizeWithoutNormalType;
523
+ size?: SizeWithoutNormalType;
505
524
  /** `Styling` Will add an animated spinner on input's right side */
506
525
  isLoading?: boolean;
507
526
  /** `Styling` Used for `FormField` styling purpose only. Will strech the input and its container in full-width */
@@ -533,10 +552,12 @@ interface PanelTabsProps extends ElementProps {
533
552
  }
534
553
  interface LevelItemProps extends ElementProps {
535
554
  /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the level */
536
- content: string | React.ReactElement;
555
+ content: SingleChildType;
537
556
  /** `Styling` Centers item's content horizontally */
538
557
  isCentered?: boolean;
539
558
  }
559
+ interface TileBoxProps extends TileProps {
560
+ }
540
561
 
541
562
  declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
542
563
 
@@ -568,9 +589,11 @@ declare const PanelTabs: React$1.FC<PanelTabsProps>;
568
589
 
569
590
  declare const LevelItem: React$1.FC<LevelItemProps>;
570
591
 
592
+ declare const TileBox: React$1.FC<TileBoxProps>;
593
+
571
594
  interface FormFieldHelperProps {
572
595
  text?: string;
573
- color?: basicColorType;
596
+ color?: BasicColorType;
574
597
  }
575
598
  interface FormFieldProps extends ElementProps {
576
599
  /** `Attribute` `Required` Single or multiple `InputControlProps` config objects which will be wrapped around the `FormField` */
@@ -592,18 +615,34 @@ interface PanelProps extends ElementProps {
592
615
  /** `Attribute` `Required` A list of configuration objects that will render a list of block with different components, based on `PanelBlockList` component */
593
616
  blockList: PanelBlockProps[];
594
617
  /** `Styling` Color based on bulma's text color tokens */
595
- color?: basicColorType;
618
+ color?: BasicColorType;
596
619
  }
597
620
  interface LevelProps extends ElementProps {
598
- /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's left side */
621
+ /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's left side */
599
622
  leftSide?: LevelItemProps[];
600
- /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's center */
623
+ /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's center */
601
624
  centerSide?: LevelItemProps[];
602
- /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's right side */
625
+ /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's right side */
603
626
  rightSide?: LevelItemProps[];
604
627
  /** `Styling` Will adjust the navigator on horizontal on mobile as well */
605
628
  isMobile?: boolean;
606
629
  }
630
+ interface HeroProps extends ElementProps {
631
+ /** `Attribute` Designated section for hero's header, it will be visible only if container's `size` is setted to `is-fullheight` */
632
+ header?: ChildrenType;
633
+ /** `Attribute` `Required` Designated section for hero's body */
634
+ body: ChildrenType;
635
+ /** `Attribute` Designated section for hero's footer, it will be visible only if container's `size` is setted to `is-fullheight` */
636
+ footer?: ChildrenType;
637
+ /** `Styling` Set hero's size */
638
+ size?: SizeWithoutNormalType | 'is-halfheight' | 'is-fullheight';
639
+ /** `Styling` Color based on bulma's text color tokens */
640
+ color?: BasicColorType;
641
+ }
642
+ interface TileGroupProps extends ElementProps, Pick<TileProps, 'context' | 'isVertical' | 'size'> {
643
+ /** `Attribute` `Required` A list of `Title` configurations that will be displayed in a grid mode on the screen */
644
+ groupConfig: TileProps[];
645
+ }
607
646
 
608
647
  declare const FormField: React$1.FC<FormFieldProps>;
609
648
 
@@ -611,4 +650,8 @@ declare const Panel: React$1.FC<PanelProps>;
611
650
 
612
651
  declare const Level: React$1.FC<LevelProps>;
613
652
 
614
- export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
653
+ declare const Hero: React$1.FC<HeroProps>;
654
+
655
+ declare const TileGroup: React$1.FC<TileGroupProps>;
656
+
657
+ export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Hero, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Tile, TileBox, TileGroup, Title };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "reactive-bulma",
3
- "version": "2.13.0",
3
+ "version": "2.15.0",
4
4
  "description": "A component library based on React, Bulma, Typescript and Rollup",
5
5
  "keywords": [
6
6
  "typescript",
@@ -1,5 +0,0 @@
1
- export declare enum IconSizeEnum {
2
- 'is-small' = 24,
3
- 'is-medium' = 36,
4
- 'is-large' = 48
5
- }
@@ -1,5 +0,0 @@
1
- export declare enum IconSizeEnum {
2
- 'is-small' = 24,
3
- 'is-medium' = 36,
4
- 'is-large' = 48
5
- }