reactive-bulma 1.20.0 → 1.21.0

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { CheckboxProps } from '../../../interfaces/atomProps';
-declare const Checkbox: React.FC<CheckboxProps>;
-export default Checkbox;
+import { CheckBoxProps } from '../../../interfaces/atomProps';
+declare const CheckBox: React.FC<CheckBoxProps>;
+export default CheckBox;

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

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

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

@@ -11,3 +11,5 @@ export { default as TextArea } from './TextArea';
 export { default as Delete } from './Delete';
 export { default as Select } from './Select';
 export { default as File } from './File';
+export { default as Checkbox } from './Checkbox';
+export { default as RadioButton } from './RadioButton';

package/dist/esm/types/functions/parsers.d.ts

@@ -1,14 +1,14 @@
 import { ParseTestIdProps } from '../interfaces/functionProps';
 /**
- * @param { Array<string | null> } _classes Required. Array of classNames on `string` (or `null`) values
+ * @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
  * @returns { string } A single string product of merge all classNames, separated by spaces
  */
-export declare const parseClasses: (_classes: Array<string | null>) => string;
+export declare const parseClasses: (_classes: Array<string | null | undefined>) => string;
 /**
  * @param { ParseTestIdProps } config Configuration object
- * @param { string } config.tag Required. Component tag used between to build the final testId string.
- * @param { string } config.parsedClasses Required. A single string of previously parsed classes what will be joined with `tag` property.
- * @param { { usedRegExp?: RegExp, regExpReplacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
+ * @param { string } config.tag `Required`. Component tag used between to build the final testId string.
+ * @param { string } config.parsedClasses `Required`. A single string of previously parsed classes what will be joined with `tag` property.
+ * @param { { regExp?: RegExp, replacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
  * @returns A single string product of merge all classNames, separated by `separator` value
  */
 export declare const parseTestId: (config: ParseTestIdProps) => string;

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

@@ -2,96 +2,169 @@ import React from 'react';
 import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
 import { inputTypes } from '../types/domTypes';
 interface BasicProps {
+    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
     testId?: string;
+    /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
+    containerTestId?: string;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+    /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
+    containerCssClasses?: string;
+    /** `Attribute` Custom styling applicable for specific scenarios */
     style?: React.CSSProperties;
+    /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
+    containerStyle?: React.CSSProperties;
 }
 export interface ColumnProps extends BasicProps, 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[];
+    /** `Styling` Set column's size */
     size?: columnSizeType;
+    /** `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 BasicProps, React.ComponentPropsWithoutRef<'button'> {
+    /** `Attribute` The text will be shown in the `Button` */
     text?: string;
-    style?: React.CSSProperties;
+    /** `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;
+    /** `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 */
     isOutlined?: boolean;
+    /** `Styling` Will add round borders to button's shape */
     isRounded?: boolean;
+    /** `Styling` Will change `text` for a animated spinner, but will remain clickeable */
     isLoading?: boolean;
-    isDisabled?: boolean;
+    /** `Styling` Similar to `isDisabled`, but will remove any color style */
     isStatic?: boolean;
+    /** `Styling` Set button's size on bulma's size tokens */
     size?: basicSizeType;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
 export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
+    /** `Attribute` Sets colored bar at the level against `max` value (`100` by default) */
     value?: number;
+    /** `Attribute` Sets the entire bar length comparing with current `value` */
     max?: number;
-    style?: React.CSSProperties;
+    /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
+    /** `Styling` Set progress bar's size */
     size?: basicSizeType;
+    /** `Styling` Will change `value` for a animated loading */
     isLoading?: boolean;
 }
 export interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
-    testId?: string;
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
+    children?: string | React.ReactElement | React.ReactElement[];
 }
 export interface TagProps extends BasicProps, 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;
+    /** `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?: Exclude<basicSizeType, 'is-normal'>;
-    withDelete?: boolean;
-    withAddon?: boolean;
-    addonText?: string;
+    /** `Styling` Color on tag's addon based on bulma's color tokens */
     addonColor?: basicColorType;
+    /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
 export interface ImageProps extends BasicProps, React.ComponentPropsWithoutRef<'figure'> {
+    /** `Attribute` `Required` The image source that will be shown */
     src: string;
+    /** `Styling` Will add round borders to image's shape */
     fixedSize?: fixedImageSizeType;
+    /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
     isRounded?: boolean;
 }
 export interface BoxProps extends BasicProps, 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[];
 }
 export interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
+    /** `Attribute` Sets the text you want to show */
     text: string;
+    /** `Styling` Set text size */
     size?: titleSizeType;
-    prop: 'title' | 'subtitle';
+    /** `Styling` Set type of title (`title` at top, `subtitle` at below) */
+    type: 'title' | 'subtitle';
+    /** `Styling` Set text spacing at default or maximun length */
     isSpaced?: boolean;
 }
 export interface TitleProps {
+    /** `Attribute` Main title configuration object */
     main?: TitleSectionProps;
+    /** `Attribute` Subtitle title configuration object */
     secondary?: TitleSectionProps;
 }
 export interface IconProps extends BasicProps {
+    /** `Attribute` `Required` Sets the icon key work based on [Material Design icon list](https://pictogrammers.com/library/mdi/) */
     iconLabel: string;
+    /** `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;
+    /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
+    /** `Styling` Special usage in case you want to set as dark or light mode */
     colorMode?: iconColorModeType;
+    /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
 }
 export interface InputProps extends BasicProps {
+    /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
+    /** `Attribute` The value that will be shown on the input */
     text?: string;
+    /** `Attribute` Will disable the input */
     isDisabled?: boolean;
+    /** `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;
+    /** `Styling` Set input's size */
     size?: basicSizeType;
+    /** `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 */
     isHovered?: boolean;
+    /** `Styling` Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
+    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
+    /** `Function` Reffers to each time the user press a key. Alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
 export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
+    /** `Attribute` Text area's columns value that sets its width */
     cols?: number;
+    /** `Attribute` Text area's rows value that sets its height */
     rows?: number;
+    /** `Styling` Will disable characteristic sizable property by removing its control on bottom-right corner */
     isFixedSize?: boolean;
 }
 export interface DeleteProps extends BasicProps {
+    /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
+    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
 export interface SelectOption {
@@ -100,30 +173,71 @@ export interface SelectOption {
     selected?: boolean;
 }
 export interface SelectProps extends BasicProps {
+    /** `Attribute` Indicates the options contained on the select */
     options?: SelectOption[];
+    /** `Attribute` Indicates how many options will be shown at first glance (before looking for the whole list */
     showOptions?: number;
+    /** `Attribute` Will allow multiple selection */
     isMultiple?: boolean;
+    /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
+    /** `Styling` Set select's size */
     size?: basicSizeType;
+    /** `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 */
     isHovered?: boolean;
+    /** `Styling`Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
+    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
 export interface FileProps extends BasicProps {
+    /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
+    /** `Attribute` The icon displayed in file's button" */
     uploadIcon?: IconProps;
+    /** `Attribute` The text displayed in file's button */
     uploadText?: string;
+    /** `Styling` Changes button's position to its right */
     buttonOnRight?: boolean;
+    /** `Styling` The whole container (button and file name) will occupy its parent container width */
     isFullWidth?: boolean;
+    /** `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;
+    /** `Styling` Set button's size */
     size?: basicSizeType;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-export interface CheckboxProps extends BasicProps {
+export interface CheckBoxProps extends BasicProps {
+    /** `Attribute` Sets checkbox's text that will be shown next to its control */
     content?: string | React.ReactElement;
+    /** `Attribute` Will disable the checkbox */
+    isDisabled?: boolean;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onChange?: () => void;
+}
+export interface RadioButtonItemProps extends Pick<BasicProps, 'testId' | 'style'> {
+    /** `Attribute` `Required` Sets checkbox's text*/
+    label: string;
+    /** `Attribute` Sets the name that will relate this checkbox with the others */
+    name?: string;
+    /** `Attribute` Shows the checkbox as checked or unchecked */
+    isChecked?: boolean;
+    /** `Attribute` Will disable the checkbox */
     isDisabled?: boolean;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onChange?: () => void;
+}
+export interface RadioButtonProps extends BasicProps {
+    /** `Attribute` `Required` Indicates the options contained to be selected */
+    options: RadioButtonItemProps[];
+    /** `Attribute` `Required` Sets the name that will relate this checkbox with the others */
+    name: string;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
 export {};

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

@@ -1,6 +1,6 @@
 interface RegExpRule {
-    usedRegExp?: RegExp;
-    regExpReplacer?: string;
+    regExp?: RegExp;
+    replacer?: string;
 }
 export interface ParseTestIdProps {
     tag: string;

package/dist/index.d.ts

@@ -11,91 +11,161 @@ type iconColorModeType = 'light' | 'dark';
 type inputTypes = 'text' | 'password' | 'email' | 'tel';
 
 interface BasicProps {
+    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
     testId?: string;
+    /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
+    containerTestId?: string;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+    /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
+    containerCssClasses?: string;
+    /** `Attribute` Custom styling applicable for specific scenarios */
     style?: React.CSSProperties;
+    /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
+    containerStyle?: React.CSSProperties;
 }
 interface ColumnProps extends BasicProps, 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[];
+    /** `Styling` Set column's size */
     size?: columnSizeType;
+    /** `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;
 }
 interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<'button'> {
+    /** `Attribute` The text will be shown in the `Button` */
     text?: string;
-    style?: React.CSSProperties;
+    /** `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;
+    /** `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 */
     isOutlined?: boolean;
+    /** `Styling` Will add round borders to button's shape */
     isRounded?: boolean;
+    /** `Styling` Will change `text` for a animated spinner, but will remain clickeable */
     isLoading?: boolean;
-    isDisabled?: boolean;
+    /** `Styling` Similar to `isDisabled`, but will remove any color style */
     isStatic?: boolean;
+    /** `Styling` Set button's size on bulma's size tokens */
     size?: basicSizeType;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
 interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
+    /** `Attribute` Sets colored bar at the level against `max` value (`100` by default) */
     value?: number;
+    /** `Attribute` Sets the entire bar length comparing with current `value` */
     max?: number;
-    style?: React.CSSProperties;
+    /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
+    /** `Styling` Set progress bar's size */
     size?: basicSizeType;
+    /** `Styling` Will change `value` for a animated loading */
     isLoading?: boolean;
 }
 interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
-    testId?: string;
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
+    children?: string | React.ReactElement | React.ReactElement[];
 }
 interface TagProps extends BasicProps, 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;
+    /** `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?: Exclude<basicSizeType, 'is-normal'>;
-    withDelete?: boolean;
-    withAddon?: boolean;
-    addonText?: string;
+    /** `Styling` Color on tag's addon based on bulma's color tokens */
     addonColor?: basicColorType;
+    /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
 interface BoxProps extends BasicProps, 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[];
 }
 interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
+    /** `Attribute` Sets the text you want to show */
     text: string;
+    /** `Styling` Set text size */
     size?: titleSizeType;
-    prop: 'title' | 'subtitle';
+    /** `Styling` Set type of title (`title` at top, `subtitle` at below) */
+    type: 'title' | 'subtitle';
+    /** `Styling` Set text spacing at default or maximun length */
     isSpaced?: boolean;
 }
 interface TitleProps {
+    /** `Attribute` Main title configuration object */
     main?: TitleSectionProps;
+    /** `Attribute` Subtitle title configuration object */
     secondary?: TitleSectionProps;
 }
 interface IconProps extends BasicProps {
+    /** `Attribute` `Required` Sets the icon key work based on [Material Design icon list](https://pictogrammers.com/library/mdi/) */
     iconLabel: string;
+    /** `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;
+    /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
+    /** `Styling` Special usage in case you want to set as dark or light mode */
     colorMode?: iconColorModeType;
+    /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
 }
 interface InputProps extends BasicProps {
+    /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
+    /** `Attribute` The value that will be shown on the input */
     text?: string;
+    /** `Attribute` Will disable the input */
     isDisabled?: boolean;
+    /** `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;
+    /** `Styling` Set input's size */
     size?: basicSizeType;
+    /** `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 */
     isHovered?: boolean;
+    /** `Styling` Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
+    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
+    /** `Function` Reffers to each time the user press a key. Alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
 interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
+    /** `Attribute` Text area's columns value that sets its width */
     cols?: number;
+    /** `Attribute` Text area's rows value that sets its height */
     rows?: number;
+    /** `Styling` Will disable characteristic sizable property by removing its control on bottom-right corner */
     isFixedSize?: boolean;
 }
 interface DeleteProps extends BasicProps {
+    /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
+    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
 interface SelectOption {
@@ -104,27 +174,73 @@ interface SelectOption {
     selected?: boolean;
 }
 interface SelectProps extends BasicProps {
+    /** `Attribute` Indicates the options contained on the select */
     options?: SelectOption[];
+    /** `Attribute` Indicates how many options will be shown at first glance (before looking for the whole list */
     showOptions?: number;
+    /** `Attribute` Will allow multiple selection */
     isMultiple?: boolean;
+    /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
+    /** `Styling` Set select's size */
     size?: basicSizeType;
+    /** `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 */
     isHovered?: boolean;
+    /** `Styling`Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
+    /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
 interface FileProps extends BasicProps {
+    /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
+    /** `Attribute` The icon displayed in file's button" */
     uploadIcon?: IconProps;
+    /** `Attribute` The text displayed in file's button */
     uploadText?: string;
+    /** `Styling` Changes button's position to its right */
     buttonOnRight?: boolean;
+    /** `Styling` The whole container (button and file name) will occupy its parent container width */
     isFullWidth?: boolean;
+    /** `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;
+    /** `Styling` Set button's size */
     size?: basicSizeType;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
+interface CheckBoxProps extends BasicProps {
+    /** `Attribute` Sets checkbox's text that will be shown next to its control */
+    content?: string | React.ReactElement;
+    /** `Attribute` Will disable the checkbox */
+    isDisabled?: boolean;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onChange?: () => void;
+}
+interface RadioButtonItemProps extends Pick<BasicProps, 'testId' | 'style'> {
+    /** `Attribute` `Required` Sets checkbox's text*/
+    label: string;
+    /** `Attribute` Sets the name that will relate this checkbox with the others */
+    name?: string;
+    /** `Attribute` Shows the checkbox as checked or unchecked */
+    isChecked?: boolean;
+    /** `Attribute` Will disable the checkbox */
+    isDisabled?: boolean;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onChange?: () => void;
+}
+interface RadioButtonProps extends BasicProps {
+    /** `Attribute` `Required` Indicates the options contained to be selected */
+    options: RadioButtonItemProps[];
+    /** `Attribute` `Required` Sets the name that will relate this checkbox with the others */
+    name: string;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onChange?: () => void;
+}
 
 declare const Button: React.FC<ButtonProps>;
 
@@ -152,4 +268,8 @@ declare const Select: React.FC<SelectProps>;
 
 declare const File: React.FC<FileProps>;
 
-export { Block, Box, Button, Column, Delete, File, Icon, Input, ProgressBar, Select, Tag, TextArea, Title };
+declare const CheckBox: React.FC<CheckBoxProps>;
+
+declare const RadioButton: React.FC<RadioButtonProps>;
+
+export { Block, Box, Button, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactive-bulma",
-  "version": "1.20.0",
-  "description": "A typescript-react-based component library based on bulma",
+  "version": "1.21.0",
+  "description": "A component library based on React, Bulma, Typescript and Rollup",
   "keywords": [
     "typescript",
     "react",
@@ -16,7 +16,7 @@
   ],
   "author": "Nicolás Omar González Passerino",
   "license": "MIT",
-  "homepage": "https://github.com/NicolasOmar/reactive-bulma#readme",
+  "homepage": "https://reactivebulma.netlify.app",
   "repository": {
     "type": "git",
     "url": "https://github.com/NicolasOmar/reactive-bulma.git"
@@ -45,55 +45,55 @@
     "semantic-release": "semantic-release"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.8",
-    "@babel/preset-env": "^7.22.7",
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@mdi/font": "^7.2.96",
-    "@rollup/plugin-commonjs": "^25.0.2",
+    "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^10.0.1",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.0.3",
+    "@semantic-release/github": "^9.0.4",
     "@semantic-release/npm": "^10.0.4",
     "@semantic-release/release-notes-generator": "^11.0.4",
-    "@storybook/addon-actions": "^7.0.26",
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/addon-interactions": "^7.0.26",
-    "@storybook/addon-links": "^7.0.26",
-    "@storybook/addon-mdx-gfm": "^7.0.26",
-    "@storybook/cli": "^7.0.26",
-    "@storybook/react": "^7.0.26",
-    "@storybook/react-webpack5": "^7.0.26",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/addon-mdx-gfm": "^7.1.0",
+    "@storybook/cli": "^7.1.0",
+    "@storybook/react": "^7.1.0",
+    "@storybook/react-webpack5": "^7.1.0",
     "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@types/jest": "^29.5.3",
+    "@types/react": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "babel-jest": "^29.6.1",
     "babel-loader": "^9.1.3",
     "bulma": "^0.9.4",
-    "eslint": "^8.44.0",
+    "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.0",
     "husky": "^8.0.3",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "lint-staged": "^13.2.3",
-    "postcss": "^8.4.25",
+    "postcss": "^8.4.26",
     "prettier": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.26.2",
+    "rollup": "^3.26.3",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^21.0.7",
-    "storybook": "^7.0.26",
+    "storybook": "^7.1.0",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6"
   },