reactive-bulma 4.3.27 → 4.4.0

package/dist/interfaces/organismProps.d.ts

@@ -1,15 +1,17 @@
 import { ClickeableProps, ElementProps } from './commonProps';
 import { FormFieldInputProps, LevelItemProps, NavBarBrandProps, NavBarDropdownProps, PanelBlockProps, PanelTabsProps, TableRowProps } from './moleculeProps';
 import { ImageProps, NavBarItemProps, TableHeadCellProps, TileProps } from './atomProps';
-import { BasicColorType, SizeWithHeightType } from '../types/styleTypes';
+import { ColorType, SizeWithHeightType } from '../types/styleTypes';
 import { ChildrenType, NavBarFixedPositionType } from '../types/domTypes';
 export interface FormFieldProps extends ElementProps {
     /** `Attribute` `Required` Single or multiple `FormFieldConfig` config objects which will be wrapped around the `FormField` */
-    config: FormFieldInputProps | FormFieldInputProps[];
+    inputsConfig: FormFieldInputProps | FormFieldInputProps[];
     /** `Styling` Will adjust field's sections (label, input/s and helper) in horizontal position */
     isHorizontal?: boolean;
     /** `Styling` Will group the list of inputs in a same wrapper (useful for several inputs with same usage, as a complex address) */
     isGrouped?: boolean;
+    /** `Attribute` Will add one or tow new controls to be working next to the main one */
+    withAddons?: boolean;
 }
 export interface PanelProps extends ElementProps {
     /** `Attribute` `Required` Will display Panel's header text */
@@ -19,7 +21,7 @@ export interface PanelProps extends ElementProps {
     /** `Attribute` `Required` A list of configuration objects that will render a list of block with different components, based on `PanelBlockList` component */
     blockList: PanelBlockProps[];
     /** `Styling` Color based on bulma's text color tokens */
-    color?: BasicColorType;
+    color?: ColorType;
 }
 export interface LevelProps extends ElementProps {
     /** `Attribute` A list of `LevelItem` configurations that will br displayed in Level's left side */
@@ -41,7 +43,7 @@ export interface HeroProps extends ElementProps {
     /** `Styling` Set hero's size */
     size?: SizeWithHeightType;
     /** `Styling` Color based on bulma's text color tokens */
-    color?: BasicColorType;
+    color?: ColorType;
 }
 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 */
@@ -61,7 +63,7 @@ export interface NavBarProps extends ElementProps {
     /** `Styling` Sets navbar's position at screen's top or bottom */
     fixedPosition?: NavBarFixedPositionType;
     /** `Styling` Color based on bulma's text color tokens */
-    color?: BasicColorType;
+    color?: ColorType;
     /** `Styling` Sets navbar's color as transparent */
     isTransparent?: boolean;
     /** `Styling` Adds a small padding around the navbar */
@@ -102,3 +104,31 @@ export interface TableProps extends ElementProps {
     /** `Styling` Will create a container around the table in order to make it scrollable */
     isContained?: boolean;
 }
+export interface TableElementProps {
+    tableTestId: string;
+    tableClasses: string;
+    style: React.CSSProperties | null;
+    head: TableHeadCellProps[];
+    body: TableProps['body'];
+    foot: TableHeadCellProps[] | null;
+}
+export interface TableProps extends ElementProps {
+    /** `Attribute` `Required` Configuration object that will display table's head */
+    head: TableHeadCellProps[];
+    /** `Attribute` `Required` Configuration object that will display table's body */
+    body: TableRowProps[];
+    /** `Attribute` Configuration object that will display table's foot */
+    foot?: TableHeadCellProps[];
+    /** `Styling` It will add a Bordered styling to the table. It can be combined with other mentioned styling properties. */
+    isBordered?: boolean;
+    /** `Styling` It will add a Striped styling to the table. It can be combined with other mentioned styling properties. */
+    isStriped?: boolean;
+    /** `Styling` It will add a Narrow styling to the table. It can be combined with other mentioned styling properties. */
+    isNarrow?: boolean;
+    /** `Styling` It will add a Hoverable styling to the table. It can be combined with other mentioned styling properties. */
+    isHoverable?: boolean;
+    /** `Styling` It will add a Fullwidth styling to the table. It can be combined with other mentioned styling properties. */
+    isFullwidth?: boolean;
+    /** `Styling` Will create a container around the table in order to make it scrollable */
+    isContained?: boolean;
+}

package/dist/types/domTypes.d.ts

@@ -4,11 +4,12 @@ export type InputType = 'text' | 'password' | 'email' | 'tel' | 'number' | 'date
 export type DropdownItemType = 'item' | 'link' | 'divider';
 export type PanelBlockItemType = 'icon' | 'control' | 'button';
 export type ChildrenType = string | React.ReactElement | React.ReactElement[];
+/** Reffers to the component or string that will be shown inside the item */
 export type SingleChildType = Exclude<ChildrenType, React.ReactElement[]>;
 export declare enum IconSizeEnum {
-    'is-small' = 24,
-    'is-medium' = 36,
-    'is-large' = 48
+    'small' = 24,
+    'medium' = 36,
+    'large' = 48
 }
 export type TileContextType = 'is-child' | 'is-parent' | 'is-ancestor';
 export type HeroContentType = 'head' | 'body' | 'foot';

package/dist/types/domTypes.js

@@ -1,4 +1,4 @@
-var l = /* @__PURE__ */ ((s) => (s[s["is-small"] = 24] = "is-small", s[s["is-medium"] = 36] = "is-medium", s[s["is-large"] = 48] = "is-large", s))(l || {});
+var r = /* @__PURE__ */ ((l) => (l[l.small = 24] = "small", l[l.medium = 36] = "medium", l[l.large = 48] = "large", l))(r || {});
 export {
-  l as IconSizeEnum
+  r as IconSizeEnum
 };

package/dist/types/styleTypes.d.ts

@@ -1,19 +1,29 @@
-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';
+type ZeroSizesType = '0';
+type SixSizesTypes = '1' | '2' | '3' | '4' | '5' | '6';
+type EightSizesTypes = SixSizesTypes | '7' | '8';
+type TwelveSizesTypes = EightSizesTypes | '9' | '10' | '11' | '12';
+export type CommonSizeType = TwelveSizesTypes;
+export type AbstractSizeType = 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'full' | 'four-fifths' | 'three-fifths' | 'two-fifths' | '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';
-export type ElementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
-export type SizeWithoutNormalType = Exclude<ElementSizeType, 'is-normal'>;
-export type SizeWithHeightType = SizeWithoutNormalType | 'is-halfheight' | 'is-fullheight';
-export type MediumAndLargeSizeType = Exclude<SizeWithoutNormalType, 'is-small'>;
-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 ElementAlignType = 'is-centered' | 'is-right' | 'is-left';
-export type RightCenteredAlignType = Exclude<ElementAlignType, 'is-left'>;
-export type RightLeftAlignType = Exclude<ElementAlignType, 'is-centered'>;
-export type BreadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
-export type TabsFormatType = 'is-boxed' | 'is-toggle';
+export type ColumnOffsetType = TwelveSizesTypes;
+export type TitleSizeType = SixSizesTypes;
+export type ColorType = 'white' | 'light' | 'dark' | 'black' | 'text' | 'ghost' | 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+export type ColorModeType = 'light' | 'dark';
+export type FixedImageSizeType = '16x16' | '24x24' | '32x32' | '48x48' | '64x64' | '96x96' | '128x128' | 'square' | '1by1' | '5by4' | '4by3' | '3by2' | '5by3' | '16by9' | '2by1' | '3by1' | '4by5' | '3by4' | '2by3' | '3by5' | '9by16' | '1by2' | '1by3' | 'fullwidth';
+export type BaseSizeType = 'small' | 'medium' | 'large';
+export type SizeWithNormalType = BaseSizeType | 'normal';
+export type SizeWithHeightType = BaseSizeType | 'halfheight' | 'fullheight';
+export type MediumAndLargeSizeType = Exclude<BaseSizeType, 'small'>;
+export type ColumnGapType = EightSizesTypes;
+export type ElementAlignType = 'centered' | 'right' | 'left';
+export type RightCenteredAlignType = Exclude<ElementAlignType, 'left'>;
+export type RightLeftAlignType = Exclude<ElementAlignType, 'centered'>;
+export type BreadcrumbSeparatorType = 'arrow' | 'bullet' | 'dot' | 'succeeds';
+export type TabsFormatType = 'boxed' | 'toggle';
+export type GridGapType = ZeroSizesType | EightSizesTypes;
+export type GridColumnGapType = ZeroSizesType | EightSizesTypes;
+export type GridRowGapType = ZeroSizesType | EightSizesTypes;
+export type GridCellMinWidthType = TwelveSizesTypes | '13' | '14' | '15' | '16' | '17' | '18' | '19' | '20' | '21' | '22' | '23' | '24' | '25' | '26' | '27' | '28' | '29' | '30' | '31' | '32';
+export type FixedGridColumnsType = ZeroSizesType | TwelveSizesTypes;
+export type GridCellPositionType = 'col-start' | 'col-from-end' | 'col-span' | 'row-start' | 'row-from-end' | 'row-span';
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-bulma",
-  "version": "4.3.27",
+  "version": "4.4.0",
   "type": "module",
   "description": "A component library based on React, Bulma, Typescript and Vite",
   "keywords": [
@@ -62,7 +62,7 @@
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@eslint/compat": "^1.4.1",
+    "@eslint/compat": "^2.0.0",
     "@eslint/js": "^9.39.1",
     "@mdi/font": "^7.4.47",
     "@semantic-release/changelog": "^6.0.3",
@@ -70,49 +70,50 @@
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.2",
-    "@semantic-release/npm": "^13.1.1",
+    "@semantic-release/npm": "^13.1.2",
     "@semantic-release/release-notes-generator": "^14.1.0",
-    "@storybook/addon-docs": "^10.0.6",
-    "@storybook/addon-links": "^10.0.6",
-    "@storybook/addon-onboarding": "^10.0.6",
-    "@storybook/react-vite": "^10.0.6",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/addon-onboarding": "^10.0.8",
+    "@storybook/addon-themes": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/css-modules": "^1.0.5",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.10.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@typescript-eslint/eslint-plugin": "^8.46.3",
-    "@typescript-eslint/parser": "^8.46.3",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@vitejs/plugin-react": "^5.1.1",
     "babel-jest": "^30.2.0",
     "babel-loader": "^10.0.0",
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.4",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^10.0.6",
-    "glob": "^11.0.3",
+    "eslint-plugin-storybook": "^10.0.8",
+    "glob": "^13.0.0",
     "globals": "^16.5.0",
     "husky": "^9.1.7",
     "hygen": "^6.2.11",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
-    "lint-staged": "^16.2.6",
+    "lint-staged": "^16.2.7",
     "npm-check-updates": "^19.1.2",
     "prettier": "^3.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "semantic-release": "^25.0.2",
-    "storybook": "^10.0.6",
+    "storybook": "^10.0.8",
     "tslib": "^2.8.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.3",
-    "vite": "^7.2.2",
+    "typescript-eslint": "^8.47.0",
+    "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4"
   },
   "lint-staged": {