reactive-bulma 2.14.0 → 2.16.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/Footer/index.d.ts

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

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,5 @@ 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';
+export { default as Footer } from './Footer';

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

@@ -2,3 +2,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';
+export { default as TileGroup } from './TileGroup';

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

@@ -1,8 +1,7 @@
 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 { ChildrenType } from '../types/componentEnums';
+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?: ChildrenType;
@@ -278,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 @@
 import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
+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 { PanelBlockItemType } from '../types/domTypes';
-import { ChildrenType, SingleChildType } from '../types/componentEnums';
+import { ChildrenType, SingleChildType, PanelBlockItemType } from '../types/domTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -174,4 +173,12 @@ export interface LevelItemProps extends ElementProps {
     /** `Styling` Centers item's content horizontally */
     isCentered?: boolean;
 }
+export interface TileBoxProps extends TileProps {
+}
+export interface FooterProps extends ComposedElementProps {
+    /** `Attribute` `Required` Reffers to the component, list of components or string content that will be shown inside the footer */
+    content: ChildrenType;
+    /** `Styling` Centers footer¿s content horizontally */
+    isContentCentered?: boolean;
+}
 export {};

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

@@ -1,7 +1,8 @@
 import { ElementProps } from './commonProps';
 import { InputControlProps, LevelItemProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
 import { BasicColorType, SizeWithoutNormalType } from '../types/styleTypes';
-import { ChildrenType } from '../types/componentEnums';
+import { ChildrenType } from '../types/domTypes';
+import { TileProps } from './atomProps';
 export interface FormFieldHelperProps {
     text?: string;
     color?: BasicColorType;
@@ -29,11 +30,11 @@ export interface PanelProps extends ElementProps {
     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;
@@ -50,3 +51,7 @@ export interface HeroProps extends ElementProps {
     /** `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,6 +1,8 @@
-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 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';

package/dist/index.d.ts

@@ -24,9 +24,11 @@ interface ClickeableProps {
     onClick?: () => void;
 }
 
-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';
-type TitleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
+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';
+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';
+type ColumnSizeType = CommonSizeType | AbstractSizeType;
 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';
+type TitleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
 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';
 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';
 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';
@@ -43,9 +45,9 @@ type TabsFormatType = 'is-boxed' | 'is-toggle';
 type InputType = 'text' | 'password' | 'email' | 'tel';
 type DropdownItemType = 'item' | 'link' | 'divider';
 type PanelBlockItemType = 'icon' | 'control' | 'button';
-
 type ChildrenType = string | React$1.ReactElement | React$1.ReactElement[];
 type SingleChildType = Exclude<ChildrenType, React$1.ReactElement[]>;
+type TileContextType = 'is-child' | 'is-parent' | 'is-ancestor';
 
 interface ColumnProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
@@ -322,6 +324,18 @@ interface LevelHeaderProps extends ElementProps {
     /** `Attribute` `Required` Main value (numeric or text) to be shown in a bigger scale below `header` */
     value: string | number;
 }
+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;
+}
 
 declare const Button: React$1.FC<ButtonProps>;
 
@@ -369,6 +383,8 @@ declare const TabItem: React$1.FC<TabItemProps>;
 
 declare const LevelHeader: React$1.FC<LevelHeaderProps>;
 
+declare const Tile: React$1.FC<TileProps>;
+
 interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -540,6 +556,14 @@ interface LevelItemProps extends ElementProps {
     /** `Styling` Centers item's content horizontally */
     isCentered?: boolean;
 }
+interface TileBoxProps extends TileProps {
+}
+interface FooterProps extends ComposedElementProps {
+    /** `Attribute` `Required` Reffers to the component, list of components or string content that will be shown inside the footer */
+    content: ChildrenType;
+    /** `Styling` Centers footer¿s content horizontally */
+    isContentCentered?: boolean;
+}
 
 declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
 
@@ -571,6 +595,10 @@ declare const PanelTabs: React$1.FC<PanelTabsProps>;
 
 declare const LevelItem: React$1.FC<LevelItemProps>;
 
+declare const TileBox: React$1.FC<TileBoxProps>;
+
+declare const Footer: React$1.FC<FooterProps>;
+
 interface FormFieldHelperProps {
     text?: string;
     color?: BasicColorType;
@@ -598,11 +626,11 @@ interface PanelProps extends ElementProps {
     color?: BasicColorType;
 }
 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;
@@ -619,6 +647,10 @@ interface HeroProps extends ElementProps {
     /** `Styling` Color based on bulma's text color tokens */
     color?: BasicColorType;
 }
+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[];
+}
 
 declare const FormField: React$1.FC<FormFieldProps>;
 
@@ -628,4 +660,6 @@ declare const Level: React$1.FC<LevelProps>;
 
 declare const Hero: React$1.FC<HeroProps>;
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Hero, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
+declare const TileGroup: React$1.FC<TileGroupProps>;
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Footer, FormField, Hero, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Tile, TileBox, TileGroup, Title };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-bulma",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "description": "A component library based on React, Bulma, Typescript and Rollup",
   "keywords": [
     "typescript",
@@ -76,13 +76,13 @@
     "@storybook/react": "^7.6.10",
     "@storybook/react-webpack5": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/jest-dom": "^6.2.1",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.48",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "bulma": "^0.9.4",
@@ -99,7 +99,7 @@
     "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.9.5",
+    "rollup": "^4.9.6",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^23.0.0",

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

@@ -1,8 +0,0 @@
-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/componentEnums.d.ts

@@ -1,8 +0,0 @@
-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[]>;