reactive-bulma 2.13.0 → 2.14.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { HeroProps } from '../../../interfaces/organismProps';
3
+ declare const Hero: React.FC<HeroProps>;
4
+ export default Hero;
@@ -1,3 +1,4 @@
1
1
  export { default as FormField } from './FormField';
2
2
  export { default as Panel } from './Panel';
3
3
  export { default as Level } from './Level';
4
+ export { default as Hero } from './Hero';
@@ -1,14 +1,15 @@
1
1
  import React from 'react';
2
2
  import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
3
- import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, elementSizeType, sizeWithoutNormalType, textColorType, titleSizeType, rightLeftAlignType } from '../types/styleTypes';
3
+ import { BasicColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, IconColorModeType, ElementSizeType, SizeWithoutNormalType, TextColorType, TitleSizeType, RightLeftAlignType } from '../types/styleTypes';
4
4
  import { DropdownItemType, InputType } from '../types/domTypes';
5
+ import { ChildrenType } from '../types/componentEnums';
5
6
  export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
6
7
  /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
7
- children?: string | React.ReactElement | React.ReactElement[];
8
+ children?: ChildrenType;
8
9
  /** `Styling` Set column's size */
9
- size?: columnSizeType;
10
+ size?: ColumnSizeType;
10
11
  /** `Styling` Set column's offset (moving it as you set its size */
11
- offset?: columnOffsetType;
12
+ offset?: ColumnOffsetType;
12
13
  /** `Styling` Set if the column only will take the space it needs */
13
14
  isNarrow?: boolean;
14
15
  }
@@ -18,7 +19,7 @@ export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRe
18
19
  /** `Attribute` Will disable the button */
19
20
  isDisabled?: boolean;
20
21
  /** `Styling` Color based on bulma's color tokens */
21
- color?: basicColorType;
22
+ color?: BasicColorType;
22
23
  /** `Styling` Will adjust the selected color with a ligther style */
23
24
  isLightColor?: boolean;
24
25
  /** `Styling` Will invert button's colors (typography in color and background in white or black) */
@@ -34,7 +35,7 @@ export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRe
34
35
  /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
35
36
  isSelected?: boolean;
36
37
  /** `Styling` Set button's size on bulma's size tokens */
37
- size?: elementSizeType;
38
+ size?: ElementSizeType;
38
39
  /** `Function` Click function, alone does not nothing, but can be reused for other components */
39
40
  onClick?: () => void;
40
41
  }
@@ -44,15 +45,15 @@ export interface ProgressBarProps extends ElementProps, React.ComponentPropsWith
44
45
  /** `Attribute` Sets the entire bar length comparing with current `value` */
45
46
  max?: number;
46
47
  /** `Styling` Color based on bulma's color tokens */
47
- color?: basicColorType;
48
+ color?: BasicColorType;
48
49
  /** `Styling` Set progress bar's size */
49
- size?: elementSizeType;
50
+ size?: ElementSizeType;
50
51
  /** `Styling` Will change `value` for an animated loading */
51
52
  isLoading?: boolean;
52
53
  }
53
54
  export interface BlockProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
54
55
  /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
55
- children?: string | React.ReactElement | React.ReactElement[];
56
+ children?: ChildrenType;
56
57
  }
57
58
  export interface TagProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'span'> {
58
59
  /** `Attribute` `Required` The text will be shown in the `Tag` */
@@ -64,15 +65,15 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
64
65
  /** `Attribute` The text will be shown in the tag's addon */
65
66
  addonText?: string;
66
67
  /** `Styling` Color based on bulma's color tokens */
67
- color?: basicColorType;
68
+ color?: BasicColorType;
68
69
  /** `Styling` Will adjust the selected color with a ligther style */
69
70
  isLight?: boolean;
70
71
  /** `Styling` Will add round borders to tag's shape */
71
72
  isRounded?: boolean;
72
73
  /** `Styling` Set tag's size */
73
- size?: sizeWithoutNormalType;
74
+ size?: SizeWithoutNormalType;
74
75
  /** `Styling` Color on tag's addon based on bulma's color tokens */
75
- addonColor?: basicColorType;
76
+ addonColor?: BasicColorType;
76
77
  /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
77
78
  onDeleteClick?: () => void;
78
79
  }
@@ -82,19 +83,19 @@ export interface ImageProps extends ComposedElementProps, React.ComponentPropsWi
82
83
  /** `Attribute` A description text for the image, useful for accessibility purposes */
83
84
  alt?: string;
84
85
  /** `Styling` Will add round borders to image's shape */
85
- fixedSize?: fixedImageSizeType;
86
+ fixedSize?: FixedImageSizeType;
86
87
  /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
87
88
  isRounded?: boolean;
88
89
  }
89
90
  export interface BoxProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
90
91
  /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
91
- children?: string | React.ReactElement | React.ReactElement[];
92
+ children?: ChildrenType;
92
93
  }
93
94
  export interface TitleSectionProps extends ElementProps, React.ComponentPropsWithoutRef<'p'> {
94
95
  /** `Attribute` Sets the text you want to show */
95
96
  text: string;
96
97
  /** `Styling` Set text size */
97
- size?: titleSizeType;
98
+ size?: TitleSizeType;
98
99
  /** `Styling` Set type of title (`title` at top, `subtitle` at below) */
99
100
  type: 'title' | 'subtitle';
100
101
  /** `Styling` Set text spacing at default or maximun length */
@@ -112,15 +113,15 @@ export interface IconProps extends ComposedElementProps {
112
113
  /** `Attribute` Sets the text you want to show next to the icon */
113
114
  text?: string;
114
115
  /** `Styling` Color based on bulma's text color tokens */
115
- color?: textColorType;
116
+ color?: TextColorType;
116
117
  /** `Styling` Set icons's size */
117
- size?: sizeWithoutNormalType;
118
+ size?: SizeWithoutNormalType;
118
119
  /** `Styling` Special usage in case you want to set as dark or light mode */
119
- colorMode?: iconColorModeType;
120
+ colorMode?: IconColorModeType;
120
121
  /** `Styling` Animates the icon spinning 360° */
121
122
  isSpinning?: boolean;
122
123
  /** `Styling` Used for `InputControl` styling purpose only. Will move the Icon itself to control's Input side */
123
- position?: rightLeftAlignType;
124
+ position?: RightLeftAlignType;
124
125
  }
125
126
  export interface InputProps extends ElementProps, ClickeableProps {
126
127
  /** `Attribute` `Required` What type of input will be used */
@@ -134,9 +135,9 @@ export interface InputProps extends ElementProps, ClickeableProps {
134
135
  /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */
135
136
  isReadonly?: boolean;
136
137
  /** `Styling` Color based on bulma's text color tokens */
137
- color?: basicColorType;
138
+ color?: BasicColorType;
138
139
  /** `Styling` Set input's size */
139
- size?: sizeWithoutNormalType;
140
+ size?: SizeWithoutNormalType;
140
141
  /** `Styling` Will add round borders to input's shape */
141
142
  isRounded?: boolean;
142
143
  /** `Styling` Will add a specific border when the input is hovered by the user */
@@ -156,7 +157,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
156
157
  }
157
158
  export interface DeleteProps extends ElementProps, ClickeableProps {
158
159
  /** `Styling` Set icons's size */
159
- size?: sizeWithoutNormalType;
160
+ size?: SizeWithoutNormalType;
160
161
  }
161
162
  export interface SelectOption {
162
163
  id: string | number;
@@ -171,9 +172,9 @@ export interface SelectProps extends ComposedElementProps, ClickeableProps {
171
172
  /** `Attribute` Will allow multiple selection */
172
173
  isMultiple?: boolean;
173
174
  /** `Styling` Color based on bulma's color tokens */
174
- color?: basicColorType;
175
+ color?: BasicColorType;
175
176
  /** `Styling` Set select's size */
176
- size?: elementSizeType;
177
+ size?: ElementSizeType;
177
178
  /** `Styling`Will add round borders to input's shape */
178
179
  isRounded?: boolean;
179
180
  /** `Styling`Will add a specific border when the input is hovered by the user */
@@ -195,13 +196,13 @@ export interface FileProps extends ComposedElementProps, ClickeableProps {
195
196
  /** `Styling` Changes styling to a box style, making the button bigger and file name's position below the button */
196
197
  isBoxed?: boolean;
197
198
  /** `Styling` Color based on bulma's color tokens */
198
- color?: basicColorType;
199
+ color?: BasicColorType;
199
200
  /** `Styling` Set button's size */
200
- size?: elementSizeType;
201
+ size?: ElementSizeType;
201
202
  }
202
203
  export interface CheckBoxProps extends ComposedElementProps {
203
204
  /** `Attribute` Sets checkbox's text that will be shown next to its control */
204
- content?: string | React.ReactElement | React.ReactElement[];
205
+ content?: ChildrenType;
205
206
  /** `Attribute` Will disable the checkbox */
206
207
  isDisabled?: boolean;
207
208
  /** `Function` Click function, alone does not nothing, but can be reused for other components */
@@ -1,8 +1,8 @@
1
- /// <reference types="react" />
2
1
  import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
3
2
  import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
4
- import { basicColorType, rightCenteredAlignType, breadcrumbSeparatorType, columnGapType, sizeWithoutNormalType, tabsFormatType } from '../types/styleTypes';
3
+ import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType } from '../types/styleTypes';
5
4
  import { PanelBlockItemType } from '../types/domTypes';
5
+ import { ChildrenType, SingleChildType } from '../types/componentEnums';
6
6
  export interface ButtonGroupProps extends ElementProps {
7
7
  /** `Atribute` `Required` Array of `Button` objects that will be shown */
8
8
  buttonList: ButtonProps[];
@@ -23,15 +23,15 @@ export interface ColumnGroupProps extends ElementProps {
23
23
  /** `Styling` Will center the list of columns horizontally */
24
24
  isHorizontallyCentered?: boolean;
25
25
  /** `Styling` Will adjust the space between the columns. In case to set null, it will remove those gaps */
26
- gap?: columnGapType | null;
26
+ gap?: ColumnGapType | null;
27
27
  }
28
28
  export interface NotificationProps extends ElementProps {
29
29
  /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
30
- children?: string | React.ReactElement | React.ReactElement[];
30
+ children?: ChildrenType;
31
31
  /** `Atribute` Includes a `Delete` config object that will be shown */
32
32
  deleteButton?: DeleteProps;
33
33
  /** `Styling` Color based on bulma's color tokens */
34
- color?: basicColorType;
34
+ color?: BasicColorType;
35
35
  /** `Styling` Will adjust the selected color with a ligther style */
36
36
  isLightColor?: boolean;
37
37
  }
@@ -39,11 +39,11 @@ export interface BreadcrumbsProps extends ComposedElementProps {
39
39
  /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
40
40
  items: BreadcrumbItemProps[];
41
41
  /** `Styling` Will adjust element position on screen */
42
- alignment?: rightCenteredAlignType | null;
42
+ alignment?: RightCenteredAlignType | null;
43
43
  /** `Styling` Will adjust element position on screen */
44
- separator?: breadcrumbSeparatorType | null;
44
+ separator?: BreadcrumbSeparatorType | null;
45
45
  /** `Styling` Set button's size on bulma's size tokens */
46
- size?: sizeWithoutNormalType;
46
+ size?: SizeWithoutNormalType;
47
47
  }
48
48
  export interface DropdownProps extends ElementProps {
49
49
  /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -61,9 +61,9 @@ export interface MessageProps extends ElementProps {
61
61
  /** `Atribute` Includes a `Delete` config object that will be shown */
62
62
  deleteButton?: DeleteProps;
63
63
  /** `Styling` Color based on bulma's color tokens */
64
- color?: basicColorType;
64
+ color?: BasicColorType;
65
65
  /** `Styling` Set button's size on bulma's size tokens */
66
- size?: sizeWithoutNormalType;
66
+ size?: SizeWithoutNormalType;
67
67
  }
68
68
  interface MenuSubListProps {
69
69
  subListTitle: MenuItemProps;
@@ -106,13 +106,13 @@ export interface PaginationProps extends ComposedElementProps {
106
106
  /** `Styling` Will add round borders to each page's shape */
107
107
  isRounded?: boolean;
108
108
  /** `Styling` Set button's size on bulma's size tokens */
109
- size?: sizeWithoutNormalType;
109
+ size?: SizeWithoutNormalType;
110
110
  /** `Styling` Will adjust the pages position on screen */
111
- alignment?: rightCenteredAlignType | null;
111
+ alignment?: RightCenteredAlignType | null;
112
112
  }
113
113
  export interface ModalProps extends ComposedElementProps {
114
114
  /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
115
- children?: string | React.ReactElement | React.ReactElement[] | null;
115
+ children?: ChildrenType | null;
116
116
  /** `Function` Custom function related to the modal's close button to inject custom code if needed */
117
117
  onCloseClick?: () => void;
118
118
  }
@@ -120,11 +120,11 @@ export interface TabsProps extends ElementProps {
120
120
  /** `Attribute` `Required` List of tabs that will be shown in order */
121
121
  tabs: TabItemProps[];
122
122
  /** `Styling` Will adjust the tabs position on screen */
123
- alignment?: rightCenteredAlignType;
123
+ alignment?: RightCenteredAlignType;
124
124
  /** `Styling` Set tab's size on bulma's size tokens */
125
- size?: sizeWithoutNormalType;
125
+ size?: SizeWithoutNormalType;
126
126
  /** `Styling` Set tab's size on bulma's size tokens */
127
- format?: tabsFormatType;
127
+ format?: TabsFormatType;
128
128
  /** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
129
129
  isRounded?: boolean;
130
130
  /** `Styling` The whole container will occupy its parent container width */
@@ -138,7 +138,7 @@ export interface InputControlProps extends ElementProps {
138
138
  /** `Attribute` `Icon` configuration that will be shown in Input's right side */
139
139
  rightIcon?: IconProps;
140
140
  /** `Styling` Set control and its input size on bulma's size tokens */
141
- size?: sizeWithoutNormalType;
141
+ size?: SizeWithoutNormalType;
142
142
  /** `Styling` Will add an animated spinner on input's right side */
143
143
  isLoading?: boolean;
144
144
  /** `Styling` Used for `FormField` styling purpose only. Will strech the input and its container in full-width */
@@ -170,7 +170,7 @@ export interface PanelTabsProps extends ElementProps {
170
170
  }
171
171
  export interface LevelItemProps extends ElementProps {
172
172
  /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the level */
173
- content: string | React.ReactElement;
173
+ content: SingleChildType;
174
174
  /** `Styling` Centers item's content horizontally */
175
175
  isCentered?: boolean;
176
176
  }
@@ -1,9 +1,10 @@
1
1
  import { ElementProps } from './commonProps';
2
2
  import { InputControlProps, LevelItemProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
3
- import { basicColorType } from '../types/styleTypes';
3
+ import { BasicColorType, SizeWithoutNormalType } from '../types/styleTypes';
4
+ import { ChildrenType } from '../types/componentEnums';
4
5
  export interface FormFieldHelperProps {
5
6
  text?: string;
6
- color?: basicColorType;
7
+ color?: BasicColorType;
7
8
  }
8
9
  export interface FormFieldProps extends ElementProps {
9
10
  /** `Attribute` `Required` Single or multiple `InputControlProps` config objects which will be wrapped around the `FormField` */
@@ -25,7 +26,7 @@ export interface PanelProps extends ElementProps {
25
26
  /** `Attribute` `Required` A list of configuration objects that will render a list of block with different components, based on `PanelBlockList` component */
26
27
  blockList: PanelBlockProps[];
27
28
  /** `Styling` Color based on bulma's text color tokens */
28
- color?: basicColorType;
29
+ color?: BasicColorType;
29
30
  }
30
31
  export interface LevelProps extends ElementProps {
31
32
  /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's left side */
@@ -37,3 +38,15 @@ export interface LevelProps extends ElementProps {
37
38
  /** `Styling` Will adjust the navigator on horizontal on mobile as well */
38
39
  isMobile?: boolean;
39
40
  }
41
+ export interface HeroProps extends ElementProps {
42
+ /** `Attribute` Designated section for hero's header, it will be visible only if container's `size` is setted to `is-fullheight` */
43
+ header?: ChildrenType;
44
+ /** `Attribute` `Required` Designated section for hero's body */
45
+ body: ChildrenType;
46
+ /** `Attribute` Designated section for hero's footer, it will be visible only if container's `size` is setted to `is-fullheight` */
47
+ footer?: ChildrenType;
48
+ /** `Styling` Set hero's size */
49
+ size?: SizeWithoutNormalType | 'is-halfheight' | 'is-fullheight';
50
+ /** `Styling` Color based on bulma's text color tokens */
51
+ color?: BasicColorType;
52
+ }
@@ -1,5 +1,8 @@
1
+ import React from 'react';
1
2
  export declare enum IconSizeEnum {
2
3
  'is-small' = 24,
3
4
  'is-medium' = 36,
4
5
  'is-large' = 48
5
6
  }
7
+ export type ChildrenType = string | React.ReactElement | React.ReactElement[];
8
+ export type SingleChildType = Exclude<ChildrenType, React.ReactElement[]>;
@@ -1,15 +1,15 @@
1
- export 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';
2
- export type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
3
- export 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';
4
- export 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';
5
- export 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';
6
- export 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';
7
- export type elementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
8
- export type sizeWithoutNormalType = Exclude<elementSizeType, 'is-normal'>;
9
- export type iconColorModeType = 'light' | 'dark';
10
- export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
11
- export type elementAlignType = 'is-centered' | 'is-right' | 'is-left';
12
- export type rightCenteredAlignType = Exclude<elementAlignType, 'is-left'>;
13
- export type rightLeftAlignType = Exclude<elementAlignType, 'is-centered'>;
14
- export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
15
- export type tabsFormatType = 'is-boxed' | 'is-toggle';
1
+ export 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';
2
+ export type TitleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
3
+ export 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';
4
+ export 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';
5
+ export 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';
6
+ export 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';
7
+ export type ElementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
8
+ export type SizeWithoutNormalType = Exclude<ElementSizeType, 'is-normal'>;
9
+ export type IconColorModeType = 'light' | 'dark';
10
+ export type ColumnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
11
+ export type ElementAlignType = 'is-centered' | 'is-right' | 'is-left';
12
+ export type RightCenteredAlignType = Exclude<ElementAlignType, 'is-left'>;
13
+ export type RightLeftAlignType = Exclude<ElementAlignType, 'is-centered'>;
14
+ export type BreadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
15
+ export type TabsFormatType = 'is-boxed' | 'is-toggle';
package/dist/esm/index.js CHANGED
@@ -3706,5 +3706,14 @@ const Level = ({ testId = null, cssClasses = null, style = null, leftSide = null
3706
3706
  rightSide ? (React.createElement("section", { className: 'level-right' }, renderLevelSection(rightSide))) : null));
3707
3707
  };
3708
3708
 
3709
- 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 };
3709
+ const Hero = ({ testId = null, cssClasses = null, style = null, header = null, body, footer = null, color = null, size = null }) => {
3710
+ const heroClasses = parseClasses(['hero', color, size, cssClasses]);
3711
+ const heroTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'hero', parsedClasses: heroClasses });
3712
+ return (React.createElement("section", { "data-testid": heroTestId, className: heroClasses, style: style !== null && style !== void 0 ? style : undefined },
3713
+ size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${heroTestId}-head`, className: 'hero-head' }, header)) : null,
3714
+ React.createElement("section", { "data-testid": `${heroTestId}-body`, className: 'hero-body' }, body),
3715
+ size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${heroTestId}-foot`, className: 'hero-foot' }, footer)) : null));
3716
+ };
3717
+
3718
+ 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, Title };
3710
3719
  //# sourceMappingURL=index.js.map