reactive-bulma 2.7.0 → 2.9.0

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

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

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

@@ -17,3 +17,5 @@ export { default as BreadcrumbItem } from './BreadcrumbItem';
 export { default as DropdownTrigger } from './DropdownTrigger';
 export { default as DropdownItem } from './DropdownItem';
 export { default as MenuItem } from './MenuItem';
+export { default as Image } from './Image';
+export { default as PaginationItem } from './PaginationItem';

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

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

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

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

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

@@ -6,3 +6,5 @@ export { default as Dropdown } from './Dropdown';
 export { default as Message } from './Message';
 export { default as Menu } from './Menu';
 export { default as MenuList } from './MenuList';
+export { default as Pagination } from './Pagination';
+export { default as Modal } from './Modal';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
-import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
+import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType, reducedSizeType } from '../types/styleTypes';
 import { DropdownItemType, inputTypes } 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 */
@@ -70,7 +70,7 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
     /** `Styling` Will add round borders to tag's shape */
     isRounded?: boolean;
     /** `Styling` Set tag's size */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
     /** `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 */
@@ -112,7 +112,7 @@ export interface IconProps extends ComposedElementProps {
     /** `Styling` Color based on bulma's text color tokens */
     color?: textColorType;
     /** `Styling` Set icons's size */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
     /** `Styling` Special usage in case you want to set as dark or light mode */
     colorMode?: iconColorModeType;
     /** `Styling` Animates the icon spinning 360° */
@@ -150,7 +150,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
 }
 export interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
 }
 export interface SelectOption {
     id: string | number;
@@ -247,3 +247,13 @@ export interface MenuItemProps extends ElementProps, ClickeableProps {
     /** `Styling` Generates a blue background to mark the item as the active one in the `MenuList` */
     isActive?: boolean;
 }
+export interface PaginationItemProps extends ElementProps, ClickeableProps {
+    /** `Attribute` `Required` Sets the number string that will be shown in the item and in its title when user hovers it */
+    text: string | number;
+    /** `Attribute` Sets the custom text before the `text` when user hovers the item */
+    labelText?: string;
+    /** `Attribute` Sets the custom text before the `text` when user hovers the item if is the current one */
+    currentLabelText?: string;
+    /** `Styling` Makes the item the selected one, changing its background to blue */
+    isSelected?: boolean;
+}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps } from './atomProps';
-import { basicColorType, basicSizeType, breadcrumbAlignType, breadcrumbSeparatorType, columnGapType } from '../types/styleTypes';
+import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps } from './atomProps';
+import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType } from '../types/styleTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -38,11 +38,11 @@ export interface BreadcrumbsProps extends ComposedElementProps {
     /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
     items: BreadcrumbItemProps[];
     /** `Styling` Will adjust element position on screen */
-    alignment?: breadcrumbAlignType | null;
+    alignment?: elementAlignType | null;
     /** `Styling` Will adjust element position on screen */
     separator?: breadcrumbSeparatorType | null;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
 }
 export interface DropdownProps extends ElementProps {
     /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -62,7 +62,7 @@ export interface MessageProps extends ElementProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
 }
 interface MenuSubListProps {
     subListTitle: MenuItemProps;
@@ -83,4 +83,36 @@ export interface MenuProps extends ElementProps {
     /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
     menuSections: MenuSectionProps[];
 }
+export interface PaginationNavigationButtonProps extends ClickeableProps {
+    /** `Attribute` `Required` Text that will be shown on the button */
+    text: string;
+    /** `Attribute` Will disable the button */
+    isDisabled?: boolean;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+}
+export interface PaginationProps extends ComposedElementProps {
+    /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
+    pages: PaginationItemProps[];
+    /** `Attribute` Adds a couple of ellipsis between the first and last item */
+    hasEllipsis?: boolean;
+    /** `Attribute` Number of items that will be hidden if `hasEllipsis` is `true` */
+    ellipsisItems?: number;
+    /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
+    showPreviousPageButton?: PaginationNavigationButtonProps | null;
+    /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
+    showNextPageButton?: PaginationNavigationButtonProps | null;
+    /** `Styling` Will add round borders to each page's shape */
+    isRounded?: boolean;
+    /** `Styling` Set button's size on bulma's size tokens */
+    size?: reducedSizeType;
+    /** `Styling` Will adjust the pages position on screen */
+    alignment?: elementAlignType | null;
+}
+export interface ModalProps extends ComposedElementProps {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
+    children?: string | React.ReactElement | React.ReactElement[] | null;
+    /** `Function` Custom function related to the modal's close button to inject custom code if needed */
+    onCloseClick?: () => void;
+}
 export {};

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

@@ -5,7 +5,8 @@ export type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' |
 export type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
 export type fixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
 export type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
+export type reducedSizeType = Exclude<basicSizeType, 'is-normal'>;
 export type iconColorModeType = 'light' | 'dark';
 export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
-export type breadcrumbAlignType = 'is-centered' | 'is-right';
+export type elementAlignType = 'is-centered' | 'is-right';
 export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';

package/dist/index.d.ts

@@ -29,10 +29,12 @@ type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
 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 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';
 type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
+type reducedSizeType = Exclude<basicSizeType, 'is-normal'>;
 type iconColorModeType = 'light' | 'dark';
 type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
-type breadcrumbAlignType = 'is-centered' | 'is-right';
+type elementAlignType = 'is-centered' | 'is-right';
 type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
 
 type inputTypes = 'text' | 'password' | 'email' | 'tel';
@@ -106,12 +108,20 @@ interface TagProps extends ComposedElementProps, React$1.ComponentPropsWithoutRe
     /** `Styling` Will add round borders to tag's shape */
     isRounded?: boolean;
     /** `Styling` Set tag's size */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
     /** `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 ImageProps extends ComposedElementProps, React$1.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;
+}
 interface BoxProps extends ElementProps, React$1.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
     children?: string | React$1.ReactElement | React$1.ReactElement[];
@@ -140,7 +150,7 @@ interface IconProps extends ComposedElementProps {
     /** `Styling` Color based on bulma's text color tokens */
     color?: textColorType;
     /** `Styling` Set icons's size */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
     /** `Styling` Special usage in case you want to set as dark or light mode */
     colorMode?: iconColorModeType;
     /** `Styling` Animates the icon spinning 360° */
@@ -178,7 +188,7 @@ interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
 }
 interface DeleteProps extends ElementProps, ClickeableProps {
     /** `Styling` Set icons's size */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
 }
 interface SelectOption {
     id: string | number;
@@ -275,6 +285,16 @@ interface MenuItemProps extends ElementProps, ClickeableProps {
     /** `Styling` Generates a blue background to mark the item as the active one in the `MenuList` */
     isActive?: boolean;
 }
+interface PaginationItemProps extends ElementProps, ClickeableProps {
+    /** `Attribute` `Required` Sets the number string that will be shown in the item and in its title when user hovers it */
+    text: string | number;
+    /** `Attribute` Sets the custom text before the `text` when user hovers the item */
+    labelText?: string;
+    /** `Attribute` Sets the custom text before the `text` when user hovers the item if is the current one */
+    currentLabelText?: string;
+    /** `Styling` Makes the item the selected one, changing its background to blue */
+    isSelected?: boolean;
+}
 
 declare const Button: React$1.FC<ButtonProps>;
 
@@ -314,6 +334,10 @@ declare const DropdownItem: React$1.FC<DropdownItemProps>;
 
 declare const MenuItem: React$1.FC<MenuItemProps>;
 
+declare const Image: React$1.FC<ImageProps>;
+
+declare const PaginationItem: React$1.FC<PaginationItemProps>;
+
 interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -350,11 +374,11 @@ interface BreadcrumbsProps extends ComposedElementProps {
     /** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
     items: BreadcrumbItemProps[];
     /** `Styling` Will adjust element position on screen */
-    alignment?: breadcrumbAlignType | null;
+    alignment?: elementAlignType | null;
     /** `Styling` Will adjust element position on screen */
     separator?: breadcrumbSeparatorType | null;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
 }
 interface DropdownProps extends ElementProps {
     /** `Atribute` `Required` Sets the name will be shown on the dropdown input */
@@ -374,7 +398,7 @@ interface MessageProps extends ElementProps {
     /** `Styling` Color based on bulma's color tokens */
     color?: basicColorType;
     /** `Styling` Set button's size on bulma's size tokens */
-    size?: Exclude<basicSizeType, 'is-normal'>;
+    size?: reducedSizeType;
 }
 interface MenuSubListProps {
     subListTitle: MenuItemProps;
@@ -395,6 +419,38 @@ interface MenuProps extends ElementProps {
     /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
     menuSections: MenuSectionProps[];
 }
+interface PaginationNavigationButtonProps extends ClickeableProps {
+    /** `Attribute` `Required` Text that will be shown on the button */
+    text: string;
+    /** `Attribute` Will disable the button */
+    isDisabled?: boolean;
+    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
+    cssClasses?: string;
+}
+interface PaginationProps extends ComposedElementProps {
+    /** `Attribute` `Required` List of sections that can be single or second level MenuItems */
+    pages: PaginationItemProps[];
+    /** `Attribute` Adds a couple of ellipsis between the first and last item */
+    hasEllipsis?: boolean;
+    /** `Attribute` Number of items that will be hidden if `hasEllipsis` is `true` */
+    ellipsisItems?: number;
+    /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
+    showPreviousPageButton?: PaginationNavigationButtonProps | null;
+    /** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
+    showNextPageButton?: PaginationNavigationButtonProps | null;
+    /** `Styling` Will add round borders to each page's shape */
+    isRounded?: boolean;
+    /** `Styling` Set button's size on bulma's size tokens */
+    size?: reducedSizeType;
+    /** `Styling` Will adjust the pages position on screen */
+    alignment?: elementAlignType | null;
+}
+interface ModalProps extends ComposedElementProps {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
+    children?: string | React.ReactElement | React.ReactElement[] | null;
+    /** `Function` Custom function related to the modal's close button to inject custom code if needed */
+    onCloseClick?: () => void;
+}
 
 declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
 
@@ -412,4 +468,8 @@ declare const Menu: React$1.FC<MenuProps>;
 
 declare const MenuList: React$1.FC<MenuListProps>;
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Input, Menu, MenuItem, MenuList, Message, Notification, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+declare const Pagination: React$1.FC<PaginationProps>;
+
+declare const Modal: React$1.FC<ModalProps>;
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Image, Input, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, Tag, TextArea, Title };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-bulma",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "description": "A component library based on React, Bulma, Typescript and Rollup",
   "keywords": [
     "typescript",
@@ -52,8 +52,8 @@
     "update:doctor": "npm run lint && npm run test && npm run build"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@mdi/font": "^7.3.67",
@@ -64,48 +64,48 @@
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.2.3",
-    "@semantic-release/npm": "^11.0.1",
+    "@semantic-release/github": "^9.2.5",
+    "@semantic-release/npm": "^11.0.2",
     "@semantic-release/release-notes-generator": "^12.1.0",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-mdx-gfm": "^7.5.3",
-    "@storybook/cli": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-mdx-gfm": "^7.6.4",
+    "@storybook/cli": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-webpack5": "^7.6.4",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.8",
-    "@types/react": "^18.2.37",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.43",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "bulma": "^0.9.4",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.33.2",
     "husky": "^8.0.3",
     "hygen": "^6.2.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.1.0",
-    "npm-check-updates": "^16.14.6",
-    "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
+    "lint-staged": "^15.2.0",
+    "npm-check-updates": "^16.14.11",
+    "postcss": "^8.4.32",
+    "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.3.1",
+    "rollup": "^4.7.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "semantic-release": "^22.0.7",
-    "storybook": "^7.5.3",
+    "semantic-release": "^22.0.10",
+    "storybook": "^7.6.4",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "lint-staged": {
     "src/**/*.(ts|tsx)": [