reactive-bulma 4.3.28 → 4.4.0

package/dist/index.js

@@ -1,118 +1,128 @@
 import { default as a } from "./components/atoms/Button/index.js";
 import { default as t } from "./components/atoms/Column/index.js";
 import { default as l } from "./components/atoms/ProgressBar/index.js";
-import { default as d } from "./components/atoms/Block/index.js";
+import { default as u } from "./components/atoms/Block/index.js";
 import { default as p } from "./components/atoms/Tag/index.js";
 import { default as x } from "./components/atoms/Box/index.js";
 import { default as i } from "./components/atoms/Title/index.js";
-import { default as T } from "./components/atoms/Icon/index.js";
+import { default as B } from "./components/atoms/Icon/index.js";
 import { default as b } from "./components/atoms/Input/index.js";
 import { default as g } from "./components/atoms/TextArea/index.js";
-import { default as C } from "./components/atoms/Delete/index.js";
-import { default as M } from "./components/atoms/Select/index.js";
-import { default as w } from "./components/atoms/File/index.js";
-import { default as N } from "./components/atoms/Checkbox/index.js";
-import { default as k } from "./components/atoms/RadioButton/index.js";
-import { default as H } from "./components/atoms/BreadcrumbItem/index.js";
-import { default as S } from "./components/atoms/DropdownTrigger/index.js";
-import { default as A } from "./components/atoms/DropdownItem/index.js";
-import { default as q } from "./components/atoms/MenuItem/index.js";
-import { default as z } from "./components/atoms/Image/index.js";
-import { default as J } from "./components/atoms/PaginationItem/index.js";
-import { default as O } from "./components/atoms/TabItem/index.js";
-import { default as U } from "./components/atoms/LevelHeader/index.js";
-import { default as W } from "./components/atoms/Tile/index.js";
+import { default as v } from "./components/atoms/Delete/index.js";
+import { default as G } from "./components/atoms/Select/index.js";
+import { default as P } from "./components/atoms/File/index.js";
+import { default as D } from "./components/atoms/Checkbox/index.js";
+import { default as N } from "./components/atoms/RadioButton/index.js";
+import { default as h } from "./components/atoms/BreadcrumbItem/index.js";
+import { default as A } from "./components/atoms/DropdownTrigger/index.js";
+import { default as S } from "./components/atoms/DropdownItem/index.js";
+import { default as j } from "./components/atoms/MenuItem/index.js";
+import { default as y } from "./components/atoms/Image/index.js";
+import { default as E } from "./components/atoms/PaginationItem/index.js";
+import { default as K } from "./components/atoms/TabItem/index.js";
+import { default as Q } from "./components/atoms/LevelHeader/index.js";
+import { default as V } from "./components/atoms/Tile/index.js";
 import { default as Y } from "./components/atoms/NavBarItem/index.js";
 import { default as _ } from "./components/atoms/TableHeadCell/index.js";
 import { default as ee } from "./components/atoms/TableCell/index.js";
-import { default as ae } from "./components/molecules/ButtonGroup/index.js";
-import { default as te } from "./components/molecules/ColumnGroup/index.js";
-import { default as le } from "./components/molecules/Notification/index.js";
-import { default as de } from "./components/molecules/Breadcrumbs/index.js";
-import { default as pe } from "./components/molecules/Dropdown/index.js";
-import { default as xe } from "./components/molecules/Message/index.js";
-import { default as ie } from "./components/molecules/Menu/index.js";
-import { default as Te } from "./components/molecules/MenuList/index.js";
-import { default as be } from "./components/molecules/Pagination/index.js";
-import { default as ge } from "./components/molecules/Modal/index.js";
-import { default as Ce } from "./components/molecules/Tabs/index.js";
-import { default as Me } from "./components/molecules/InputControl/index.js";
-import { default as we } from "./components/molecules/PanelBlock/index.js";
-import { default as Ne } from "./components/molecules/PanelTabs/index.js";
-import { default as ke } from "./components/molecules/LevelItem/index.js";
-import { default as He } from "./components/molecules/TileBox/index.js";
-import { default as Se } from "./components/molecules/Footer/index.js";
-import { default as Ae } from "./components/molecules/Media/index.js";
-import { default as qe } from "./components/molecules/Section/index.js";
-import { default as ze } from "./components/molecules/NavBarBrand/index.js";
-import { default as Je } from "./components/molecules/NavBarDropdown/index.js";
-import { default as Oe } from "./components/molecules/TableRow/index.js";
-import { default as Ue } from "./components/molecules/FormFieldInput/index.js";
-import { default as We } from "./components/organisms/FormField/index.js";
-import { default as Ye } from "./components/organisms/Panel/index.js";
-import { default as _e } from "./components/organisms/Level/index.js";
-import { default as eo } from "./components/organisms/Hero/index.js";
-import { default as ao } from "./components/organisms/TileGroup/index.js";
-import { default as to } from "./components/organisms/NavBar/index.js";
-import { default as lo } from "./components/organisms/Card/index.js";
-import { default as mo } from "./components/organisms/Table/index.js";
+import { default as ae } from "./components/atoms/GridCell/index.js";
+import { default as te } from "./components/atoms/TagWithAddon/index.js";
+import { default as le } from "./components/molecules/ButtonGroup/index.js";
+import { default as ue } from "./components/molecules/ColumnGroup/index.js";
+import { default as pe } from "./components/molecules/Notification/index.js";
+import { default as xe } from "./components/molecules/Breadcrumbs/index.js";
+import { default as ie } from "./components/molecules/Dropdown/index.js";
+import { default as Be } from "./components/molecules/Message/index.js";
+import { default as be } from "./components/molecules/Menu/index.js";
+import { default as ge } from "./components/molecules/MenuList/index.js";
+import { default as ve } from "./components/molecules/Pagination/index.js";
+import { default as Ge } from "./components/molecules/Modal/index.js";
+import { default as Pe } from "./components/molecules/Tabs/index.js";
+import { default as De } from "./components/molecules/InputControl/index.js";
+import { default as Ne } from "./components/molecules/PanelBlock/index.js";
+import { default as he } from "./components/molecules/PanelTabs/index.js";
+import { default as Ae } from "./components/molecules/LevelItem/index.js";
+import { default as Se } from "./components/molecules/TileBox/index.js";
+import { default as je } from "./components/molecules/Footer/index.js";
+import { default as ye } from "./components/molecules/Media/index.js";
+import { default as Ee } from "./components/molecules/Section/index.js";
+import { default as Ke } from "./components/molecules/NavBarBrand/index.js";
+import { default as Qe } from "./components/molecules/NavBarDropdown/index.js";
+import { default as Ve } from "./components/molecules/TableRow/index.js";
+import { default as Ye } from "./components/molecules/FormFieldInput/index.js";
+import { default as _e } from "./components/molecules/TagList/index.js";
+import { default as eo } from "./components/molecules/CheckboxGroup/index.js";
+import { default as ao } from "./components/molecules/Grid/index.js";
+import { default as to } from "./components/organisms/FormField/index.js";
+import { default as lo } from "./components/organisms/Panel/index.js";
+import { default as mo } from "./components/organisms/Level/index.js";
+import { default as so } from "./components/organisms/Hero/index.js";
+import { default as no } from "./components/organisms/TileGroup/index.js";
+import { default as To } from "./components/organisms/NavBar/index.js";
+import { default as Io } from "./components/organisms/Card/index.js";
+import { default as co } from "./components/organisms/Table/index.js";
 export {
-  d as Block,
+  u as Block,
   x as Box,
-  H as BreadcrumbItem,
-  de as Breadcrumbs,
+  h as BreadcrumbItem,
+  xe as Breadcrumbs,
   a as Button,
-  ae as ButtonGroup,
-  lo as Card,
-  N as Checkbox,
+  le as ButtonGroup,
+  Io as Card,
+  D as Checkbox,
+  eo as CheckboxGroup,
   t as Column,
-  te as ColumnGroup,
-  C as Delete,
-  pe as Dropdown,
-  A as DropdownItem,
-  S as DropdownTrigger,
-  w as File,
-  Se as Footer,
-  We as FormField,
-  Ue as FormFieldInput,
-  eo as Hero,
-  T as Icon,
-  z as Image,
+  ue as ColumnGroup,
+  v as Delete,
+  ie as Dropdown,
+  S as DropdownItem,
+  A as DropdownTrigger,
+  P as File,
+  je as Footer,
+  to as FormField,
+  Ye as FormFieldInput,
+  ao as Grid,
+  ae as GridCell,
+  so as Hero,
+  B as Icon,
+  y as Image,
   b as Input,
-  Me as InputControl,
-  _e as Level,
-  U as LevelHeader,
-  ke as LevelItem,
-  Ae as Media,
-  ie as Menu,
-  q as MenuItem,
-  Te as MenuList,
-  xe as Message,
-  ge as Modal,
-  to as NavBar,
-  ze as NavBarBrand,
-  Je as NavBarDropdown,
+  De as InputControl,
+  mo as Level,
+  Q as LevelHeader,
+  Ae as LevelItem,
+  ye as Media,
+  be as Menu,
+  j as MenuItem,
+  ge as MenuList,
+  Be as Message,
+  Ge as Modal,
+  To as NavBar,
+  Ke as NavBarBrand,
+  Qe as NavBarDropdown,
   Y as NavBarItem,
-  le as Notification,
-  be as Pagination,
-  J as PaginationItem,
-  Ye as Panel,
-  we as PanelBlock,
-  Ne as PanelTabs,
+  pe as Notification,
+  ve as Pagination,
+  E as PaginationItem,
+  lo as Panel,
+  Ne as PanelBlock,
+  he as PanelTabs,
   l as ProgressBar,
-  k as RadioButton,
-  qe as Section,
-  M as Select,
-  O as TabItem,
-  mo as Table,
+  N as RadioButton,
+  Ee as Section,
+  G as Select,
+  K as TabItem,
+  co as Table,
   ee as TableCell,
   _ as TableHeadCell,
-  Oe as TableRow,
-  Ce as Tabs,
+  Ve as TableRow,
+  Pe as Tabs,
   p as Tag,
+  _e as TagList,
+  te as TagWithAddon,
   g as TextArea,
-  W as Tile,
-  He as TileBox,
-  ao as TileGroup,
+  V as Tile,
+  Se as TileBox,
+  no as TileGroup,
   i as Title
 };

package/dist/interfaces/atomProps.d.ts

@@ -1,26 +1,30 @@
 import { default as React } from 'react';
-import { ElementProps, ComposedElementProps, ClickeableProps, NamedInputProps, InteractiveProps, InteractiveOnChangeProps } from './commonProps';
-import { BasicColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, IconColorModeType, ElementSizeType, SizeWithoutNormalType, TextColorType, TitleSizeType, RightLeftAlignType, CommonSizeType } from '../types/styleTypes';
+import { ElementProps, ComposedElementProps, ClickeableProps, NamedInputProps, InteractiveProps, InteractiveOnChangeProps, ColoredProps } from './commonProps';
+import { ColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, SizeWithNormalType, BaseSizeType, TitleSizeType, RightLeftAlignType, CommonSizeType, ColorModeType, GridCellPositionType } from '../types/styleTypes';
 import { DropdownItemType, InputType, ChildrenType, TileContextType, SingleChildType } 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?: ChildrenType;
     /** `Styling` Set column's size */
     size?: ColumnSizeType;
-    /** `Styling` Set column's offset (moving it as you set its size */
+    /** `Styling` Set column's offset (moving it as you set its `size`) */
     offset?: ColumnOffsetType;
     /** `Styling` Set if the column only will take the space it needs */
     isNarrow?: boolean;
 }
 export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRef<'button'> {
+    /** `Attribute` The component will be rendered as an anchor instead a button */
+    isAnAnchor?: boolean;
+    /** `Attribute` In case the component has `isAnAnchor` as `true`, it will include an url to be reffered */
+    anchorHref?: string;
     /** `Attribute` The text will be shown in the `Button` */
     text?: string;
     /** `Attribute` Will disable the button */
     isDisabled?: boolean;
     /** `Styling` Color based on bulma's color tokens */
-    color?: BasicColorType;
-    /** `Styling` Will adjust the selected color with a ligther style */
-    isLightColor?: boolean;
+    color?: ColorType;
+    /** `Styling` Will adjust the selected color with a ligther or darker style */
+    colorMode?: ColorModeType;
     /** `Styling` Will invert button's colors (typography in color and background in white or black) */
     isInvertedColor?: boolean;
     /** `Styling` Similar to `isInvertedColor`, but button's border will be colored */
@@ -33,8 +37,12 @@ export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRe
     isStatic?: boolean;
     /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
     isSelected?: boolean;
+    /** `Styling` Will adjust button's width to its container fullest */
+    isFullWidth?: boolean;
+    /** `Styling` Will adjust button's size for a responsive design, adjustable to its size */
+    isResponsive?: boolean;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: ElementSizeType;
+    size?: SizeWithNormalType;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
@@ -44,9 +52,9 @@ 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?: ColorType;
     /** `Styling` Set progress bar's size */
-    size?: ElementSizeType;
+    size?: SizeWithNormalType;
     /** `Styling` Will change `value` for an animated loading */
     isLoading?: boolean;
 }
@@ -54,28 +62,30 @@ export interface BlockProps extends ElementProps, React.ComponentPropsWithoutRef
     /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
     children?: ChildrenType;
 }
-export interface TagProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'span'> {
+interface BaseTagProps extends React.ComponentPropsWithoutRef<'span'> {
     /** `Attribute` `Required` The text will be shown in the `Tag` */
     text: string;
     /** `Attribute` Will add a delete button (for both single or addon cases) */
     withDelete?: boolean;
-    /** `Attribute` Will add a second tag element (that could have its own text, color and delete) */
-    withAddon?: boolean;
-    /** `Attribute` The text will be shown in the tag's addon */
-    addonText?: string;
     /** `Styling` Color based on bulma's color tokens */
-    color?: BasicColorType;
+    color?: ColorType;
     /** `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;
-    /** `Styling` Color on tag's addon based on bulma's color tokens */
-    addonColor?: BasicColorType;
+    size?: BaseSizeType;
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
+export interface TagProps extends ElementProps, BaseTagProps {
+}
+export interface TagWithAddonProps extends ComposedElementProps, BaseTagProps {
+    /** `Attribute` `Required` The text will be shown in the tag's addon */
+    addonText: string;
+    /** `Styling` Color on tag's addon based on bulma's color tokens */
+    addonColor?: ColorType;
+}
 export interface ImageProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'figure'> {
     /** `Attribute` `Required` The image source that will be shown */
     src: string;
@@ -112,11 +122,11 @@ 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?: ColorType;
     /** `Styling` Set icons's size */
-    size?: SizeWithoutNormalType;
+    size?: BaseSizeType;
     /** `Styling` Special usage in case you want to set as dark or light mode */
-    colorMode?: IconColorModeType;
+    colorMode?: ColorModeType;
     /** `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 */
@@ -134,9 +144,9 @@ export interface InputProps extends ElementProps, InteractiveProps, NamedInputPr
     /** `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?: ColorType;
     /** `Styling` Set input's size */
-    size?: SizeWithoutNormalType;
+    size?: BaseSizeType;
     /** `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 */
@@ -154,7 +164,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
 }
 export interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
-    size?: SizeWithoutNormalType;
+    size?: BaseSizeType;
 }
 export interface SelectOption {
     id: string | number;
@@ -172,9 +182,9 @@ export interface SelectProps extends ComposedElementProps, InteractiveOnChangePr
     /** `Attribute` Will allow multiple selection */
     isMultiple?: boolean;
     /** `Styling` Color based on bulma's color tokens */
-    color?: BasicColorType;
+    color?: ColorType;
     /** `Styling` Set select's size */
-    size?: ElementSizeType;
+    size?: SizeWithNormalType;
     /** `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 */
@@ -196,9 +206,9 @@ export interface FileProps extends ComposedElementProps, InteractiveProps, Named
     /** `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?: ColorType;
     /** `Styling` Set button's size */
-    size?: ElementSizeType;
+    size?: SizeWithNormalType;
 }
 export interface CheckBoxProps extends ComposedElementProps, InteractiveOnChangeProps, NamedInputProps {
     /** `Attribute` Shows the checkbox as checked or unchecked */
@@ -225,6 +235,8 @@ export interface RadioButtonProps extends ComposedElementProps, InteractiveOnCha
 export interface BreadcrumbItemProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` `Required` Indicates item text that will be shown */
     text: string;
+    /** `Attribute` Adds an `Icon` component before the text */
+    icon?: IconProps;
     /** `Styling` Marks the item as the one where user is located (based on breadcrumb hierarchy) */
     isActiveItem?: boolean;
 }
@@ -280,7 +292,7 @@ export interface TileProps extends ElementProps {
     /** `Styling` Set tile's size */
     size?: CommonSizeType;
     /** `Styling` Color based on bulma's color tokens */
-    color?: BasicColorType;
+    color?: ColorType;
     /** `Styling` Used for hierarchy level as ancestor or parent. It selects its children in a vertical format (like a column) */
     isVertical?: boolean;
 }
@@ -290,11 +302,30 @@ export interface NavBarItemProps extends ElementProps, ClickeableProps {
     /** `Styling` Used for `NavBarDropdown` styling purpose only. Will mark the item as the one selected among its group */
     isActive?: boolean;
 }
-export interface TableHeadCellProps extends ElementProps, ClickeableProps {
+export interface TableHeadCellProps extends ElementProps, ColoredProps, ClickeableProps {
     /** `Attribute` `Required` It will display cell's content, which could be text, an html tag or a custom component */
     content: SingleChildType;
 }
-export interface TableCellProps extends ElementProps, ClickeableProps {
+export interface TableCellProps extends ElementProps, ColoredProps, ClickeableProps {
     /** `Attribute` `Required` It will display cell's content, which could be text, an html tag or a custom component */
     content: SingleChildType;
 }
+export interface GridCellProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the cell */
+    children?: ChildrenType;
+    /** `Styling` Will adjust cell's position in the grid in specific points. If you want to set a specific position, work with wny of the other col/row `Start` or `StartFromEnd` properties */
+    position?: GridCellPositionType;
+    /** `Styling` Change which column a cell starts at */
+    colStart?: number;
+    /** `Styling` Change which row a cell starts at */
+    rowStart?: number;
+    /** `Styling` Change which column a cell ends at, counting from the end */
+    colStartFromEnd?: number;
+    /** `Styling` Change which row a cell ends at, counting from the end */
+    rowStartFromEnd?: number;
+    /** `Styling` Change how many columns a cell spans */
+    colSpan?: number;
+    /** `Styling` Change how many rows a cell spans */
+    rowSpan?: number;
+}
+export {};

package/dist/interfaces/commonProps.d.ts

@@ -1,3 +1,4 @@
+import { ColorType } from '../types/styleTypes';
 export interface ContainerProps {
     /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
     containerTestId?: string;
@@ -34,6 +35,10 @@ export interface InteractiveOnChangeProps extends Omit<InteractiveProps, 'onChan
     /** `Function` Reffers to each time the user click the element (I recommend using this one rather than the `onClick` method). Alone does not nothing, but can be reused for other components */
     onChange?: (event: React.ChangeEvent | React.FormEvent) => void;
 }
+export interface ColoredProps {
+    /** `Styling` Color based on bulma's color tokens */
+    color?: ColorType;
+}
 export interface NamedInputProps {
     /** `Attribute` Used to reference the input in a form */
     name?: string;

package/dist/interfaces/moleculeProps.d.ts

@@ -1,6 +1,6 @@
-import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, CheckBoxProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, NavBarItemProps, PaginationItemProps, RadioButtonProps, SelectProps, TabItemProps, TableCellProps, TableHeadCellProps, TextAreaProps } from './atomProps';
-import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType, MediumAndLargeSizeType, RightLeftAlignType } from '../types/styleTypes';
+import { ClickeableProps, ColoredProps, ComposedElementProps, ElementProps } from './commonProps';
+import { BreadcrumbItemProps, ButtonProps, CheckBoxProps, ColumnProps, DeleteProps, DropdownItemProps, GridCellProps, IconProps, InputProps, MenuItemProps, NavBarItemProps, PaginationItemProps, RadioButtonProps, SelectProps, TabItemProps, TableCellProps, TableHeadCellProps, TagProps, TextAreaProps } from './atomProps';
+import { ColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, BaseSizeType, TabsFormatType, MediumAndLargeSizeType, RightLeftAlignType, GridGapType, GridColumnGapType, GridRowGapType, GridCellMinWidthType, FixedGridColumnsType } 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 */
@@ -30,7 +30,7 @@ export interface NotificationProps 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?: ColorType;
     /** `Styling` Will adjust the selected color with a ligther style */
     isLightColor?: boolean;
 }
@@ -42,9 +42,15 @@ export interface BreadcrumbsProps extends ComposedElementProps {
     /** `Styling` Will adjust element position on screen */
     separator?: BreadcrumbSeparatorType | null;
     /** `Styling` Set breadcrumb's size on bulma's size tokens */
-    size?: SizeWithoutNormalType;
+    size?: BaseSizeType;
 }
 export interface DropdownProps extends ElementProps {
+    /** `Styling` Will display dropdown content when the user hovers the mouse on the input */
+    isHoverable?: boolean;
+    /** `Styling` Will align dropdown's content to the right */
+    isRightAligned?: boolean;
+    /** `Styling` Will set dropdown's menu above its input */
+    isContentUp?: boolean;
     /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
     inputText: string;
     /** `Attribute` Sets a relationship between dropdown trigger's button and dropdown's menu to toggle display */
@@ -60,9 +66,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?: ColorType;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: SizeWithoutNormalType;
+    size?: BaseSizeType;
 }
 interface MenuSubListProps {
     subListTitle: MenuItemProps;
@@ -105,7 +111,7 @@ 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?: BaseSizeType;
     /** `Styling` Will adjust the pages position on screen */
     alignment?: RightCenteredAlignType | null;
 }
@@ -121,7 +127,7 @@ export interface TabsProps extends ElementProps {
     /** `Styling` Will adjust the tabs position on screen */
     alignment?: RightCenteredAlignType;
     /** `Styling` Set tab's size on bulma's size tokens */
-    size?: SizeWithoutNormalType;
+    size?: BaseSizeType;
     /** `Styling` Set tab's size on bulma's size tokens */
     format?: TabsFormatType;
     /** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
@@ -129,19 +135,29 @@ export interface TabsProps extends ElementProps {
     /** `Styling` The whole container will occupy its parent container width */
     isFullWidth?: boolean;
 }
+export interface HelperProps {
+    text?: string;
+    color?: ColorType;
+}
 export interface InputControlProps extends ElementProps {
+    /** `Attribute` Sets a custom label above the Input to indicate its usage */
+    labelText?: string;
     /** `Attribute` `Required` control's input configuration which will be wrapped */
     inputConfig: InputProps;
+    /** `Attribute` Sets a custom text below the input to show a message */
+    helper?: HelperProps;
     /** `Attribute` `Icon` configuration that will be shown in Input's left side */
     leftIcon?: IconProps;
     /** `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?: BaseSizeType;
     /** `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 */
     isExpanded?: boolean;
+    /** `Styling` Will adjust field's sections (label, input/s and helper) in horizontal position */
+    isHorizontal?: boolean;
 }
 export interface PanelBlockItemProps {
     /** `Attribute` `Required` Indicates to component's parser which type of component will be rendered based on its option */
@@ -208,6 +224,8 @@ export interface NavBarDropdownProps extends ComposedElementProps {
     hasDropdownUp?: boolean;
     /** `Styling` Sets dropdown's menu design like a box, also adds some animation when its diplayed */
     hasBoxedMenu?: boolean;
+    /** `Styling` Removes dropdown's indicating arrow */
+    isArrowLess?: boolean;
 }
 interface BrandConfigProps extends Omit<NavBarItemProps, 'children'> {
     children: SingleChildType;
@@ -218,7 +236,7 @@ export interface NavBarBrandProps extends ElementProps {
     /** `Styling` It sets brand's burger button as active (changing looks from a burger to a cross) */
     isBurgerActive?: boolean;
 }
-export interface TableRowProps extends ElementProps, ClickeableProps {
+export interface TableRowProps extends ElementProps, ColoredProps, ClickeableProps {
     /** `Attribute` Configuration object to inject a `TableHeaderCell` as row's head */
     headCell?: TableHeadCellProps;
     /** `Attribute` `Required` List of `TableCell` that will be rendered on the table */
@@ -231,21 +249,48 @@ export declare enum FormFieldType {
     SELECT = "select",
     CHECKBOX = "checkbox",
     RADIOBUTTON = "radiobutton",
-    TEXTAREA = "textarea"
+    TEXTAREA = "textarea",
+    BUTTON = "button"
 }
-export type FormFieldConfig = InputControlProps | SelectProps | CheckBoxProps | RadioButtonProps | TextAreaProps;
-export interface FormFieldHelper {
-    text?: string;
-    color?: BasicColorType;
+export type FormFieldConfig = InputControlProps | SelectProps | CheckBoxProps | RadioButtonProps | TextAreaProps | ButtonProps;
+export interface FormFieldElement {
+    type: FormFieldType;
+    config: FormFieldConfig;
 }
 export interface FormFieldInputProps extends ElementProps {
-    /** `Attribute` Sets a custom text before the wrapped input to indicate its usage */
-    labelText?: string;
-    type: FormFieldType;
-    input: FormFieldConfig;
-    /** `Attribute` Sets a custom text below the input to show a message */
-    helper?: FormFieldHelper;
+    /** `Attribute` `Required` Main input that will use the provided label and helper */
+    mainInput: FormFieldElement;
+    /** `Attribute` Input that will be included at main's left (will work only if `withAddons` is in `true`) */
+    leftInput?: FormFieldElement;
+    /** `Attribute` Input that will be included at main's right (will work only if `withAddons` is in `true`) */
+    rightInput?: FormFieldElement;
     /** `Styling` Will adjust field's sections (label, input/s and helper) in horizontal position */
     isHorizontal?: boolean;
 }
+export interface TagListProps extends ElementProps {
+    /** `Attribute` List of tags to fix their space evenly */
+    listOfTags: TagProps[];
+}
+export interface CheckboxGroupProps extends ElementProps {
+    /** `Attribute` `Required` A list of Checkbox config objetcs to be rendered in the same space */
+    listOfCheckboxes: CheckBoxProps[];
+}
+export interface GridProps extends ComposedElementProps {
+    /** `Attribute` `Required` `GridCell` A list of Cell config objetcs to be rendered as part of the grid */
+    listOfCells: GridCellProps[];
+    /** `Styling` Will change the space between columns and rows at the same level. This value will be nullify if `isFixed` is true */
+    gap?: GridGapType;
+    /** `Styling` Will change the space between columns. This value will be nullify if `gap` has a value or if `isFixed` is true */
+    columnGap?: GridColumnGapType;
+    /** `Styling` Will change the space between rows. This value will be nullify if `gap` has a value or if `isFixed` is true */
+    rowGap?: GridRowGapType;
+    /** `Styling` Will change the minimum column width by increments of `1.5rem` */
+    cellMinWidth?: GridCellMinWidthType;
+    /** `Styling` Will set a fixed amount of columns per row. If is not set at `fixedColumnsCount`, it will be set at 2 columns */
+    isFixed?: boolean;
+    /** `Styling` Will change the amount of columns shown per row */
+    fixedColumnsCount?: FixedGridColumnsType;
+    /** `Styling` Will set grid's columns automatically, changing its count for each breakpoint */
+    isAutoColumns?: boolean;
+}
 export {};

package/dist/interfaces/moleculeProps.js

@@ -1,4 +1,4 @@
-var E = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.SELECT = "select", t.CHECKBOX = "checkbox", t.RADIOBUTTON = "radiobutton", t.TEXTAREA = "textarea", t))(E || {});
+var E = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.SELECT = "select", t.CHECKBOX = "checkbox", t.RADIOBUTTON = "radiobutton", t.TEXTAREA = "textarea", t.BUTTON = "button", t))(E || {});
 export {
   E as FormFieldType
 };