reactive-bulma 2.13.0 → 2.15.0

package/dist/esm/types/components/atoms/Tile/index.d.ts

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

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

@@ -21,3 +21,4 @@ export { default as Image } from './Image';
 export { default as PaginationItem } from './PaginationItem';
 export { default as TabItem } from './TabItem';
 export { default as LevelHeader } from './LevelHeader';
+export { default as Tile } from './Tile';

package/dist/esm/types/components/molecules/TileBox/index.d.ts

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

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

@@ -13,3 +13,4 @@ export { default as InputControl } from './InputControl';
 export { default as PanelBlock } from './PanelBlock';
 export { default as PanelTabs } from './PanelTabs';
 export { default as LevelItem } from '../molecules/LevelItem';
+export { default as TileBox } from './TileBox';

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/TileGroup/index.d.ts

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

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

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

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

@@ -1,14 +1,14 @@
 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 { DropdownItemType, InputType } from '../types/domTypes';
+import { BasicColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, IconColorModeType, ElementSizeType, SizeWithoutNormalType, TextColorType, TitleSizeType, RightLeftAlignType, CommonSizeType } from '../types/styleTypes';
+import { DropdownItemType, InputType, ChildrenType, TileContextType } from '../types/domTypes';
 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 +18,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 +34,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 +44,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 +64,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 +82,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 +112,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 +134,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 +156,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 +171,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 +195,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 */
@@ -277,3 +277,15 @@ export interface LevelHeaderProps extends ElementProps {
     /** `Attribute` `Required` Main value (numeric or text) to be shown in a bigger scale below `header` */
     value: string | number;
 }
+export interface TileProps extends ElementProps {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the tile */
+    children?: ChildrenType;
+    /** `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 */
+    context?: TileContextType;
+    /** `Styling` Set tile's size */
+    size?: CommonSizeType;
+    /** `Styling` Color based on bulma's color tokens */
+    color?: BasicColorType;
+    /** `Styling` Used for hierarchy level as ancestor or parent. It selects its children in a vertical format (like a column) */
+    isVertical?: boolean;
+}

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

@@ -1,8 +1,7 @@
-/// <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 { PanelBlockItemType } from '../types/domTypes';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps, TileProps } from './atomProps';
+import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType } from '../types/styleTypes';
+import { ChildrenType, SingleChildType, PanelBlockItemType } from '../types/domTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -23,15 +22,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 +38,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 +60,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 +105,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 +119,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 +137,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,8 +169,10 @@ 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;
 }
+export interface TileBoxProps extends TileProps {
+}
 export {};

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

@@ -1,9 +1,11 @@
 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/domTypes';
+import { TileProps } from './atomProps';
 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,15 +27,31 @@ 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 */
+    /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's left side */
     leftSide?: LevelItemProps[];
-    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's center */
+    /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's center */
     centerSide?: LevelItemProps[];
-    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's right side */
+    /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's right side */
     rightSide?: LevelItemProps[];
     /** `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;
+}
+export interface TileGroupProps extends ElementProps, Pick<TileProps, 'context' | 'isVertical' | 'size'> {
+    /** `Attribute` `Required` A list of `Title` configurations that will be displayed in a grid mode on the screen */
+    groupConfig: TileProps[];
+}

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

@@ -1,4 +1,13 @@
+import React from 'react';
 export type ButtonType = 'submit' | 'reset' | 'button';
 export type InputType = 'text' | 'password' | 'email' | 'tel';
 export type DropdownItemType = 'item' | 'link' | 'divider';
 export type PanelBlockItemType = 'icon' | 'control' | 'button';
+export type ChildrenType = string | React.ReactElement | React.ReactElement[];
+export type SingleChildType = Exclude<ChildrenType, React.ReactElement[]>;
+export declare enum IconSizeEnum {
+    'is-small' = 24,
+    'is-medium' = 36,
+    'is-large' = 48
+}
+export type TileContextType = 'is-child' | 'is-parent' | 'is-ancestor';

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

@@ -1,15 +1,17 @@
-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 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';
+export 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';
+export type ColumnSizeType = CommonSizeType | AbstractSizeType;
+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 TitleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
+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';