reactive-bulma 2.14.0 → 2.15.0

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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,6 @@ export interface LevelItemProps extends ElementProps {
     /** `Styling` Centers item's content horizontally */
     isCentered?: boolean;
 }
+export interface TileBoxProps extends TileProps {
+}
 export {};

package/dist/cjs/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/cjs/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/cjs/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/esm/index.js

@@ -3243,7 +3243,7 @@ const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActi
     return (React.createElement("a", { "data-testid": menuItemTestId, className: menuItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
 };
 
-const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, alt = null, fixedSize = 'is-1by1', isRounded = false }) => {
+const Image = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, src, alt = null, fixedSize = null, isRounded = false }) => {
     const imageContainerClasses = parseClasses([
         'image',
         fixedSize,
@@ -3291,6 +3291,32 @@ const LevelHeader = ({ testId = null, cssClasses = null, style = null, header, v
         React.createElement("p", { className: 'title' }, value)));
 };
 
+const Tile = ({ testId = null, cssClasses = null, style = null, children, context = null, size = null, color = null, isVertical = false }) => {
+    const tileClasses = parseClasses([
+        'tile',
+        context,
+        size,
+        color ? `notification ${color}` : null,
+        isVertical ? 'is-vertical' : null,
+        cssClasses
+    ]);
+    const tileTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'tile',
+        parsedClasses: tileClasses,
+        rules: [
+            {
+                regExp: /notification |tile/gm,
+                replacer: ''
+            },
+            {
+                regExp: /is-/gm,
+                replacer: '-'
+            }
+        ]
+    });
+    return (React.createElement("section", { "data-testid": tileTestId, className: tileClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
+};
+
 const generateKey = (max = 5000, min = 1) => {
     max = Math.floor(max);
     min = Math.ceil(min);
@@ -3639,6 +3665,32 @@ const LevelItem = ({ testId = null, cssClasses = null, style = null, content, is
     return (React.createElement("section", { "data-testid": levelItemTestId, className: levelItemClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
 };
 
+const TileBox = ({ testId = null, cssClasses = 'box', style = null, children = null, context = 'is-child', size, color, isVertical }) => {
+    const tileBoxClasses = parseClasses([
+        'tileBox',
+        context,
+        size,
+        color ? `notification ${color}` : null,
+        isVertical ? 'is-vertical' : null,
+        cssClasses
+    ]);
+    const tileBoxTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'tileBox',
+        parsedClasses: tileBoxClasses,
+        rules: [
+            {
+                regExp: /notification |tileBox/gm,
+                replacer: ''
+            },
+            {
+                regExp: /is-/gm,
+                replacer: '-'
+            }
+        ]
+    });
+    return (React.createElement(Tile, { testId: tileBoxTestId, cssClasses: cssClasses, style: style !== null && style !== void 0 ? style : undefined, isVertical: isVertical, context: context, size: size, color: color }, children !== null && children !== void 0 ? children : undefined));
+};
+
 const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
 const renderFieldBody = (inputControlConfig, isGrouped) => {
     if (isGrouped) {
@@ -3715,5 +3767,30 @@ const Hero = ({ testId = null, cssClasses = null, style = null, header = null, b
         size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${heroTestId}-foot`, className: 'hero-foot' }, footer)) : null));
 };
 
-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 };
+const TileGroup = ({ testId = null, cssClasses = null, style = null, context = 'is-ancestor', size = null, isVertical = false, groupConfig }) => {
+    const tileGroupClasses = parseClasses([
+        'tileGroup',
+        context,
+        size,
+        isVertical ? 'is-vertical' : null,
+        cssClasses
+    ]);
+    const tileBoxTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'tileGroup',
+        parsedClasses: tileGroupClasses,
+        rules: [
+            {
+                regExp: /tileGroup/gm,
+                replacer: ''
+            },
+            {
+                regExp: /is-/gm,
+                replacer: '-'
+            }
+        ]
+    });
+    return (React.createElement(Tile, { testId: tileBoxTestId, cssClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, context: context, size: size !== null && size !== void 0 ? size : undefined, isVertical: isVertical }, groupConfig.map(tileConfig => (React.createElement(Tile, Object.assign({ key: `tile-item-${generateKey()}` }, tileConfig))))));
+};
+
+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, Tile, TileBox, TileGroup, Title };
 //# sourceMappingURL=index.js.map