reactive-bulma 2.13.0 → 2.14.0

package/dist/esm/types/components/organisms/Hero/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HeroProps } from '../../../interfaces/organismProps';
+declare const Hero: React.FC<HeroProps>;
+export default Hero;

package/dist/esm/types/components/organisms/index.d.ts

@@ -1,3 +1,4 @@
 export { default as FormField } from './FormField';
 export { default as Panel } from './Panel';
 export { default as Level } from './Level';
+export { default as Hero } from './Hero';

package/dist/esm/types/interfaces/atomProps.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
-import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, elementSizeType, sizeWithoutNormalType, textColorType, titleSizeType, rightLeftAlignType } from '../types/styleTypes';
+import { BasicColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, IconColorModeType, ElementSizeType, SizeWithoutNormalType, TextColorType, TitleSizeType, RightLeftAlignType } from '../types/styleTypes';
 import { DropdownItemType, InputType } from '../types/domTypes';
+import { ChildrenType } from '../types/componentEnums';
 export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: ChildrenType;
     /** `Styling` Set column's size */
-    size?: columnSizeType;
+    size?: ColumnSizeType;
     /** `Styling` Set column's offset (moving it as you set its size */
-    offset?: columnOffsetType;
+    offset?: ColumnOffsetType;
     /** `Styling` Set if the column only will take the space it needs */
     isNarrow?: boolean;
 }
@@ -18,7 +19,7 @@ export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRe
     /** `Attribute` Will disable the button */
     isDisabled?: boolean;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Will adjust the selected color with a ligther style */
     isLightColor?: boolean;
     /** `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
     /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
     isSelected?: boolean;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: elementSizeType;
+    size?: ElementSizeType;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
@@ -44,15 +45,15 @@ export interface ProgressBarProps extends ElementProps, React.ComponentPropsWith
     /** `Attribute` Sets the entire bar length comparing with current `value` */
     max?: number;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set progress bar's size */
-    size?: elementSizeType;
+    size?: ElementSizeType;
     /** `Styling` Will change `value` for an animated loading */
     isLoading?: boolean;
 }
 export interface BlockProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: ChildrenType;
 }
 export interface TagProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'span'> {
     /** `Attribute` `Required` The text will be shown in the `Tag` */
@@ -64,15 +65,15 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
     /** `Attribute` The text will be shown in the tag's addon */
     addonText?: string;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Will adjust the selected color with a ligther style */
     isLight?: boolean;
     /** `Styling` Will add round borders to tag's shape */
     isRounded?: boolean;
     /** `Styling` Set tag's size */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Color on tag's addon based on bulma's color tokens */
-    addonColor?: basicColorType;
+    addonColor?: BasicColorType;
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
@@ -82,19 +83,19 @@ export interface ImageProps extends ComposedElementProps, React.ComponentPropsWi
     /** `Attribute` A description text for the image, useful for accessibility purposes */
     alt?: string;
     /** `Styling` Will add round borders to image's shape */
-    fixedSize?: fixedImageSizeType;
+    fixedSize?: FixedImageSizeType;
     /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
     isRounded?: boolean;
 }
 export interface BoxProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: ChildrenType;
 }
 export interface TitleSectionProps extends ElementProps, React.ComponentPropsWithoutRef<'p'> {
     /** `Attribute` Sets the text you want to show */
     text: string;
     /** `Styling` Set text size */
-    size?: titleSizeType;
+    size?: TitleSizeType;
     /** `Styling` Set type of title (`title` at top, `subtitle` at below) */
     type: 'title' | 'subtitle';
     /** `Styling` Set text spacing at default or maximun length */
@@ -112,15 +113,15 @@ export interface IconProps extends ComposedElementProps {
     /** `Attribute` Sets the text you want to show next to the icon */
     text?: string;
     /** `Styling` Color based on bulma's text color tokens */
-    color?: textColorType;
+    color?: TextColorType;
     /** `Styling` Set icons's size */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Special usage in case you want to set as dark or light mode */
-    colorMode?: iconColorModeType;
+    colorMode?: IconColorModeType;
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
     /** `Styling` Used for `InputControl` styling purpose only. Will move the Icon itself to control's Input side */
-    position?: rightLeftAlignType;
+    position?: RightLeftAlignType;
 }
 export interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` `Required` What type of input will be used */
@@ -134,9 +135,9 @@ export interface InputProps extends ElementProps, ClickeableProps {
     /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */
     isReadonly?: boolean;
     /** `Styling` Color based on bulma's text color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set input's size */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Will add round borders to input's shape */
     isRounded?: boolean;
     /** `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'> {
 }
 export interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
 }
 export interface SelectOption {
     id: string | number;
@@ -171,9 +172,9 @@ export interface SelectProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` Will allow multiple selection */
     isMultiple?: boolean;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set select's size */
-    size?: elementSizeType;
+    size?: ElementSizeType;
     /** `Styling`Will add round borders to input's shape */
     isRounded?: boolean;
     /** `Styling`Will add a specific border when the input is hovered by the user */
@@ -195,13 +196,13 @@ export interface FileProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Changes styling to a box style, making the button bigger and file name's position below the button */
     isBoxed?: boolean;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set button's size */
-    size?: elementSizeType;
+    size?: ElementSizeType;
 }
 export interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
-    content?: string | React.ReactElement | React.ReactElement[];
+    content?: ChildrenType;
     /** `Attribute` Will disable the checkbox */
     isDisabled?: boolean;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */

package/dist/esm/types/interfaces/moleculeProps.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
 import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
-import { basicColorType, rightCenteredAlignType, breadcrumbSeparatorType, columnGapType, sizeWithoutNormalType, tabsFormatType } from '../types/styleTypes';
+import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType } from '../types/styleTypes';
 import { PanelBlockItemType } from '../types/domTypes';
+import { ChildrenType, SingleChildType } from '../types/componentEnums';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -23,15 +23,15 @@ export interface ColumnGroupProps extends ElementProps {
     /** `Styling` Will center the list of columns horizontally */
     isHorizontallyCentered?: boolean;
     /** `Styling` Will adjust the space between the columns. In case to set null, it will remove those gaps */
-    gap?: columnGapType | null;
+    gap?: ColumnGapType | null;
 }
 export interface NotificationProps extends ElementProps {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
-    children?: string | React.ReactElement | React.ReactElement[];
+    children?: ChildrenType;
     /** `Atribute` Includes a `Delete` config object that will be shown */
     deleteButton?: DeleteProps;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Will adjust the selected color with a ligther style */
     isLightColor?: boolean;
 }
@@ -39,11 +39,11 @@ export interface BreadcrumbsProps extends ComposedElementProps {
     /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
     items: BreadcrumbItemProps[];
     /** `Styling` Will adjust element position on screen */
-    alignment?: rightCenteredAlignType | null;
+    alignment?: RightCenteredAlignType | null;
     /** `Styling` Will adjust element position on screen */
-    separator?: breadcrumbSeparatorType | null;
+    separator?: BreadcrumbSeparatorType | null;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
 }
 export interface DropdownProps extends ElementProps {
     /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -61,9 +61,9 @@ export interface MessageProps extends ElementProps {
     /** `Atribute` Includes a `Delete` config object that will be shown */
     deleteButton?: DeleteProps;
     /** `Styling` Color based on bulma's color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
 }
 interface MenuSubListProps {
     subListTitle: MenuItemProps;
@@ -106,13 +106,13 @@ export interface PaginationProps extends ComposedElementProps {
     /** `Styling` Will add round borders to each page's shape */
     isRounded?: boolean;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Will adjust the pages position on screen */
-    alignment?: rightCenteredAlignType | null;
+    alignment?: RightCenteredAlignType | null;
 }
 export interface ModalProps extends ComposedElementProps {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
-    children?: string | React.ReactElement | React.ReactElement[] | null;
+    children?: ChildrenType | null;
     /** `Function` Custom function related to the modal's close button to inject custom code if needed */
     onCloseClick?: () => void;
 }
@@ -120,11 +120,11 @@ export interface TabsProps extends ElementProps {
     /** `Attribute` `Required` List of tabs that will be shown in order */
     tabs: TabItemProps[];
     /** `Styling` Will adjust the tabs position on screen */
-    alignment?: rightCenteredAlignType;
+    alignment?: RightCenteredAlignType;
     /** `Styling` Set tab's size on bulma's size tokens */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Set tab's size on bulma's size tokens */
-    format?: tabsFormatType;
+    format?: TabsFormatType;
     /** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
     isRounded?: boolean;
     /** `Styling` The whole container will occupy its parent container width */
@@ -138,7 +138,7 @@ export interface InputControlProps extends ElementProps {
     /** `Attribute` `Icon` configuration that will be shown in Input's right side */
     rightIcon?: IconProps;
     /** `Styling` Set control and its input size on bulma's size tokens */
-    size?: sizeWithoutNormalType;
+    size?: SizeWithoutNormalType;
     /** `Styling` Will add an animated spinner on input's right side */
     isLoading?: boolean;
     /** `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 {
 }
 export interface LevelItemProps extends ElementProps {
     /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the level */
-    content: string | React.ReactElement;
+    content: SingleChildType;
     /** `Styling` Centers item's content horizontally */
     isCentered?: boolean;
 }

package/dist/esm/types/interfaces/organismProps.d.ts

@@ -1,9 +1,10 @@
 import { ElementProps } from './commonProps';
 import { InputControlProps, LevelItemProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
-import { basicColorType } from '../types/styleTypes';
+import { BasicColorType, SizeWithoutNormalType } from '../types/styleTypes';
+import { ChildrenType } from '../types/componentEnums';
 export interface FormFieldHelperProps {
     text?: string;
-    color?: basicColorType;
+    color?: BasicColorType;
 }
 export interface FormFieldProps extends ElementProps {
     /** `Attribute` `Required` Single or multiple `InputControlProps` config objects which will be wrapped around the `FormField` */
@@ -25,7 +26,7 @@ export interface PanelProps extends ElementProps {
     /** `Attribute` `Required` A list of configuration objects that will render a list of block with different components, based on `PanelBlockList` component */
     blockList: PanelBlockProps[];
     /** `Styling` Color based on bulma's text color tokens */
-    color?: basicColorType;
+    color?: BasicColorType;
 }
 export interface LevelProps extends ElementProps {
     /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's left side */
@@ -37,3 +38,15 @@ export interface LevelProps extends ElementProps {
     /** `Styling` Will adjust the navigator on horizontal on mobile as well */
     isMobile?: boolean;
 }
+export interface HeroProps extends ElementProps {
+    /** `Attribute` Designated section for hero's header, it will be visible only if container's `size` is setted to `is-fullheight` */
+    header?: ChildrenType;
+    /** `Attribute` `Required` Designated section for hero's body */
+    body: ChildrenType;
+    /** `Attribute` Designated section for hero's footer, it will be visible only if container's `size` is setted to `is-fullheight` */
+    footer?: ChildrenType;
+    /** `Styling` Set hero's size */
+    size?: SizeWithoutNormalType | 'is-halfheight' | 'is-fullheight';
+    /** `Styling` Color based on bulma's text color tokens */
+    color?: BasicColorType;
+}

package/dist/esm/types/types/componentEnums.d.ts

@@ -1,5 +1,8 @@
+import React from 'react';
 export declare enum IconSizeEnum {
     'is-small' = 24,
     'is-medium' = 36,
     'is-large' = 48
 }
+export type ChildrenType = string | React.ReactElement | React.ReactElement[];
+export type SingleChildType = Exclude<ChildrenType, React.ReactElement[]>;

package/dist/esm/types/types/styleTypes.d.ts

@@ -1,15 +1,15 @@
-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';
-export type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
-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';
-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';
-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';
-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';
-export type elementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
-export type sizeWithoutNormalType = Exclude<elementSizeType, 'is-normal'>;
-export type iconColorModeType = 'light' | 'dark';
-export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
-export type elementAlignType = 'is-centered' | 'is-right' | 'is-left';
-export type rightCenteredAlignType = Exclude<elementAlignType, 'is-left'>;
-export type rightLeftAlignType = Exclude<elementAlignType, 'is-centered'>;
-export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
-export type tabsFormatType = 'is-boxed' | 'is-toggle';
+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';
+export type TitleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
+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';
+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';
+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';
+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';
+export type ElementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
+export type SizeWithoutNormalType = Exclude<ElementSizeType, 'is-normal'>;
+export type IconColorModeType = 'light' | 'dark';
+export type ColumnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
+export type ElementAlignType = 'is-centered' | 'is-right' | 'is-left';
+export type RightCenteredAlignType = Exclude<ElementAlignType, 'is-left'>;
+export type RightLeftAlignType = Exclude<ElementAlignType, 'is-centered'>;
+export type BreadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
+export type TabsFormatType = 'is-boxed' | 'is-toggle';