reactive-bulma 4.1.5 → 4.2.0

package/dist/components/molecules/InputControl/index.js

@@ -2,25 +2,26 @@ import { jsxs as x, jsx as a } from "react/jsx-runtime";
 import { parseClasses as h, parseTestId as v } from "../../../functions/parsers.js";
 import I from "../../atoms/Icon/index.js";
 import j from "../../atoms/Input/index.js";
-const n = (l) => l ? /* @__PURE__ */ a(I, { ...l }) : null, y = ({
+import "react";
+const n = (l) => l ? /* @__PURE__ */ a(I, { ...l }) : null, z = ({
   testId: l = null,
-  cssClasses: u = null,
-  style: d = null,
+  cssClasses: p = null,
+  style: u = null,
   inputConfig: s,
-  leftIcon: e = null,
-  rightIcon: r = null,
+  leftIcon: r = null,
+  rightIcon: e = null,
   size: o = null,
-  isLoading: p = null,
+  isLoading: d = null,
   isExpanded: i = null
 }) => {
   const t = h([
     "control",
     o,
-    e ? "has-icons-left" : null,
-    r ? "has-icons-right" : null,
-    p ? "is-loading" : null,
+    r ? "has-icons-left" : null,
+    e ? "has-icons-right" : null,
+    d ? "is-loading" : null,
     i ? "is-expanded" : null,
-    u
+    p
   ]), c = l ?? v({
     tag: "control",
     parsedClasses: t,
@@ -43,17 +44,17 @@ const n = (l) => l ? /* @__PURE__ */ a(I, { ...l }) : null, y = ({
     {
       "data-testid": c,
       className: t,
-      style: d ?? void 0,
+      style: u ?? void 0,
       children: [
         /* @__PURE__ */ a(j, { ...m }),
-        n(e ? { ...e, position: "is-left" } : void 0),
+        n(r ? { ...r, position: "is-left" } : void 0),
         n(
-          r ? { ...r, position: "is-right" } : void 0
+          e ? { ...e, position: "is-right" } : void 0
         )
       ]
     }
   );
 };
 export {
-  y as default
+  z as default
 };

package/dist/components/molecules/MenuList/index.js

@@ -1,21 +1,22 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-import { parseClasses as p, parseTestId as b } from "../../../functions/parsers.js";
+import { jsx as s, jsxs as p } from "react/jsx-runtime";
+import { parseClasses as d, parseTestId as b } from "../../../functions/parsers.js";
+import "react";
 import t from "../../atoms/MenuItem/index.js";
 import { generateKey as l } from "../../../functions/generators.js";
-const T = ({
+const h = ({
   testId: u = null,
-  cssClasses: n = null,
-  style: r = null,
+  cssClasses: r = null,
+  style: n = null,
   itemList: m
 }) => {
-  const i = p(["menu-list", n]), a = u ?? b({ tag: "menu-list", parsedClasses: i });
+  const i = d(["menu-list", r]), a = u ?? b({ tag: "menu-list", parsedClasses: i });
   return /* @__PURE__ */ s(
     "ul",
     {
       "data-testid": a,
       className: i,
-      style: r ?? void 0,
-      children: m.map((e) => "subListTitle" in e ? /* @__PURE__ */ d("li", { children: [
+      style: n ?? void 0,
+      children: m.map((e) => "subListTitle" in e ? /* @__PURE__ */ p("li", { children: [
         /* @__PURE__ */ s(t, { ...e.subListTitle }),
         /* @__PURE__ */ s("ul", { children: e.subItems.map((o) => /* @__PURE__ */ s(
           t,
@@ -35,5 +36,5 @@ const T = ({
   );
 };
 export {
-  T as default
+  h as default
 };

package/dist/components/molecules/Message/index.js

@@ -1,7 +1,8 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { parseClasses as u, parseTestId as g } from "../../../functions/parsers.js";
-import p from "../../atoms/Delete/index.js";
-const C = ({
+import { parseClasses as p, parseTestId as u } from "../../../functions/parsers.js";
+import g from "../../atoms/Delete/index.js";
+import "react";
+const N = ({
   testId: d = null,
   cssClasses: n = null,
   style: m = null,
@@ -11,7 +12,7 @@ const C = ({
   color: o = null,
   size: c = null
 }) => {
-  const t = u(["message", o, c, n]), s = d ?? g({ tag: "message", parsedClasses: t });
+  const t = p(["message", o, c, n]), s = d ?? u({ tag: "message", parsedClasses: t });
   return /* @__PURE__ */ r(
     "article",
     {
@@ -26,7 +27,7 @@ const C = ({
             className: "message-header",
             children: [
               /* @__PURE__ */ e("p", { children: a }),
-              l ? /* @__PURE__ */ e(p, { ...l }) : null
+              l ? /* @__PURE__ */ e(g, { ...l }) : null
             ]
           }
         ),
@@ -43,5 +44,5 @@ const C = ({
   );
 };
 export {
-  C as default
+  N as default
 };

package/dist/components/molecules/NavBarBrand/index.js

@@ -1,25 +1,26 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import { parseClasses as n, parseTestId as t } from "../../../functions/parsers.js";
+import "react";
 import b from "../../atoms/Image/index.js";
 import B from "../../atoms/NavBarItem/index.js";
-const I = ({
+const x = ({
   testId: d = null,
   cssClasses: l = null,
   style: i = null,
   brandConfig: o,
-  isBurgerActive: u = !1
+  isBurgerActive: m = !1
 }) => {
-  const r = n(["navbar-brand", l]), c = d ?? t({ tag: "navbar-brand", parsedClasses: r }), e = n([
+  const r = n(["navbar-brand", l]), u = d ?? t({ tag: "navbar-brand", parsedClasses: r }), e = n([
     "navbar-burger",
-    u ? "is-active" : null
-  ]), m = t({
+    m ? "is-active" : null
+  ]), c = t({
     tag: "navbar-burger",
     parsedClasses: e
   }), { children: p, ...v } = o;
   return /* @__PURE__ */ s(
     "section",
     {
-      "data-testid": c,
+      "data-testid": u,
       className: r,
       style: i ?? void 0,
       children: [
@@ -28,7 +29,7 @@ const I = ({
           "a",
           {
             role: "button",
-            "data-testid": m,
+            "data-testid": c,
             className: e,
             "aria-label": "menu",
             "aria-expanded": "false",
@@ -44,5 +45,5 @@ const I = ({
   );
 };
 export {
-  I as default
+  x as default
 };

package/dist/components/molecules/NavBarDropdown/index.js

@@ -1,5 +1,6 @@
 import { jsxs as B, jsx as r } from "react/jsx-runtime";
 import { parseClasses as n, parseTestId as o } from "../../../functions/parsers.js";
+import "react";
 import C from "../../atoms/NavBarItem/index.js";
 import { generateKey as l } from "../../../functions/generators.js";
 const D = (a) => a === "divider" ? /* @__PURE__ */ r(
@@ -14,15 +15,15 @@ const D = (a) => a === "divider" ? /* @__PURE__ */ r(
     ...a
   },
   `navbar-dropdown-item-${l()}`
-), j = ({
+), E = ({
   testId: a = null,
   containerTestId: d = null,
   cssClasses: t = null,
   containerCssClasses: i = null,
   style: p = null,
   containerStyle: v = null,
-  text: c,
-  items: m,
+  text: m,
+  items: c,
   position: u = null,
   isActive: w = !1,
   isHoverable: b = !1,
@@ -64,7 +65,7 @@ const D = (a) => a === "divider" ? /* @__PURE__ */ r(
           {
             className: "navbar-link",
             "aria-hidden": "true",
-            children: c
+            children: m
           }
         ),
         /* @__PURE__ */ r(
@@ -73,7 +74,7 @@ const D = (a) => a === "divider" ? /* @__PURE__ */ r(
             "data-testid": x,
             className: s,
             style: p ?? void 0,
-            children: m.map(D)
+            children: c.map(D)
           }
         )
       ]
@@ -81,5 +82,5 @@ const D = (a) => a === "divider" ? /* @__PURE__ */ r(
   );
 };
 export {
-  j as default
+  E as default
 };

package/dist/components/molecules/Notification/index.js

@@ -1,8 +1,9 @@
 import { jsxs as c, jsx as u } from "react/jsx-runtime";
-import { parseClasses as f, parseTestId as d } from "../../../functions/parsers.js";
-import m from "../../atoms/Delete/index.js";
-const g = ({
-  testId: t = null,
+import { parseClasses as f, parseTestId as m } from "../../../functions/parsers.js";
+import p from "../../atoms/Delete/index.js";
+import "react";
+const h = ({
+  testId: l = null,
   cssClasses: i = null,
   style: n = null,
   children: o = null,
@@ -10,28 +11,28 @@ const g = ({
   color: a = null,
   isLightColor: e = null
 }) => {
-  const l = f([
+  const t = f([
     "notification",
     a,
     e ? "is-light" : null,
     i
-  ]), r = t ?? d({
+  ]), r = l ?? m({
     tag: "notification",
-    parsedClasses: l
+    parsedClasses: t
   });
   return /* @__PURE__ */ c(
     "section",
     {
       "data-testid": r,
-      className: l,
+      className: t,
       style: n ?? void 0,
       children: [
-        s ? /* @__PURE__ */ u(m, { ...s }) : null,
+        s ? /* @__PURE__ */ u(p, { ...s }) : null,
         o
       ]
     }
   );
 };
 export {
-  g as default
+  h as default
 };

package/dist/components/molecules/TableRow/index.js

@@ -1,9 +1,10 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
 import { parseClasses as u, parseTestId as b } from "../../../functions/parsers.js";
+import "react";
 import c from "../../atoms/TableHeadCell/index.js";
 import f from "../../atoms/TableCell/index.js";
 import { generateKey as w } from "../../../functions/generators.js";
-const j = ({
+const v = ({
   testId: t = null,
   cssClasses: a = null,
   style: o = null,
@@ -16,7 +17,7 @@ const j = ({
     n ? "is-selected" : null,
     a
   ]), i = t ?? b({ tag: "table-row", parsedClasses: e });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(
     "tr",
     {
       "data-testid": i,
@@ -25,10 +26,10 @@ const j = ({
       onClick: m ?? void 0,
       children: [
         l ? /* @__PURE__ */ s(c, { ...l }) : null,
-        r.map((d) => /* @__PURE__ */ s(
+        r.map((p) => /* @__PURE__ */ s(
           f,
           {
-            ...d
+            ...p
           },
           `table-row-${w()}`
         ))
@@ -37,5 +38,5 @@ const j = ({
   );
 };
 export {
-  j as default
+  v as default
 };

package/dist/components/molecules/Tabs/index.js

@@ -1,13 +1,14 @@
 import { jsx as l } from "react/jsx-runtime";
 import { parseClasses as p, parseTestId as b } from "../../../functions/parsers.js";
+import "react";
 import f from "../../atoms/TabItem/index.js";
 import { generateKey as h } from "../../../functions/generators.js";
-const x = ({
-  testId: t = null,
+const y = ({
+  testId: e = null,
   cssClasses: a = null,
   style: i = null,
-  tabs: n,
-  alignment: r = null,
+  tabs: r,
+  alignment: n = null,
   size: o = null,
   format: u = null,
   isRounded: d = null,
@@ -15,24 +16,24 @@ const x = ({
 }) => {
   const s = p([
     "tabs",
-    r,
+    n,
     o,
     u,
     d ? "is-toggle-rounded" : null,
     m ? "is-fullwidth" : null,
     a
-  ]), c = t ?? b({ tag: "tabs", parsedClasses: s });
+  ]), c = e ?? b({ tag: "tabs", parsedClasses: s });
   return /* @__PURE__ */ l(
     "section",
     {
       "data-testid": c,
       className: s,
       style: i ?? void 0,
-      children: /* @__PURE__ */ l("ul", { children: n.map((e) => /* @__PURE__ */ l(
+      children: /* @__PURE__ */ l("ul", { children: r.map((t) => /* @__PURE__ */ l(
         "li",
         {
-          className: e.isActive ? "is-active" : void 0,
-          children: /* @__PURE__ */ l(f, { ...e })
+          className: t.isActive ? "is-active" : void 0,
+          children: /* @__PURE__ */ l(f, { ...t })
         },
         `tab-item-${h()}`
       )) })
@@ -40,5 +41,5 @@ const x = ({
   );
 };
 export {
-  x as default
+  y as default
 };

package/dist/components/molecules/TileBox/index.js

@@ -1,7 +1,8 @@
 import { jsx as x } from "react/jsx-runtime";
 import { parseClasses as d, parseTestId as m } from "../../../functions/parsers.js";
+import "react";
 import u from "../../atoms/Tile/index.js";
-const g = ({
+const T = ({
   testId: r = null,
   cssClasses: l = "box",
   style: s = null,
@@ -47,5 +48,5 @@ const g = ({
   );
 };
 export {
-  g as default
+  T as default
 };

package/dist/components/organisms/Card/index.js

@@ -1,23 +1,24 @@
 import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { parseClasses as p, parseTestId as N } from "../../../functions/parsers.js";
+import { parseClasses as u, parseTestId as N } from "../../../functions/parsers.js";
+import "react";
 import $ from "../../atoms/Image/index.js";
 import { generateKey as o } from "../../../functions/generators.js";
-const x = ({
+const I = ({
   testId: m = null,
   cssClasses: h = null,
-  style: u = null,
+  style: p = null,
   headerText: c = null,
   image: d = null,
   content: s,
   footerLinks: l = null
 }) => {
-  const n = p(["card", h]), e = m ?? N({ tag: "card", parsedClasses: n });
+  const n = u(["card", h]), e = m ?? N({ tag: "card", parsedClasses: n });
   return /* @__PURE__ */ i(
     "section",
     {
       "data-testid": e,
       className: n,
-      style: u ?? void 0,
+      style: p ?? void 0,
       children: [
         c ? /* @__PURE__ */ i(
           "header",
@@ -83,5 +84,5 @@ const x = ({
   );
 };
 export {
-  x as default
+  I as default
 };

package/dist/components/organisms/Level/index.js

@@ -1,7 +1,7 @@
 import { jsxs as u, jsx as t } from "react/jsx-runtime";
 import { parseClasses as v, parseTestId as p } from "../../../functions/parsers.js";
-import { generateKey as d } from "../../../functions/generators.js";
 import "react";
+import { generateKey as d } from "../../../functions/generators.js";
 import f from "../../molecules/LevelItem/index.js";
 const s = (l) => l.map((e) => /* @__PURE__ */ t(
   f,

package/dist/components/organisms/NavBar/index.js

@@ -1,8 +1,8 @@
 import { jsxs as d, jsx as s } from "react/jsx-runtime";
 import { parseClasses as h, parseTestId as B } from "../../../functions/parsers.js";
+import "react";
 import $ from "../../atoms/NavBarItem/index.js";
 import { generateKey as o } from "../../../functions/generators.js";
-import "react";
 import f from "../../molecules/NavBarBrand/index.js";
 import x from "../../molecules/NavBarDropdown/index.js";
 const p = (l, a, e) => l ? /* @__PURE__ */ s(

package/dist/components/organisms/Panel/index.js

@@ -1,7 +1,7 @@
 import { jsxs as c, jsx as l } from "react/jsx-runtime";
 import { parseClasses as d, parseTestId as u } from "../../../functions/parsers.js";
-import { generateKey as f } from "../../../functions/generators.js";
 import "react";
+import { generateKey as f } from "../../../functions/generators.js";
 import g from "../../molecules/PanelBlock/index.js";
 import h from "../../molecules/PanelTabs/index.js";
 const x = (e) => /* @__PURE__ */ l("p", { className: "panel-heading", children: e }), N = ({

package/dist/components/organisms/Table/index.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as y } from "react/jsx-runtime";
 import { parseClasses as C, parseTestId as w } from "../../../functions/parsers.js";
+import "react";
 import x from "../../atoms/TableHeadCell/index.js";
 import { generateKey as i } from "../../../functions/generators.js";
-import "react";
 import g from "../../molecules/TableRow/index.js";
 const n = (t, a) => /* @__PURE__ */ e("tr", { children: a.map((s) => /* @__PURE__ */ e(
   x,

package/dist/components/organisms/TileGroup/index.js

@@ -1,8 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
 import { parseClasses as d, parseTestId as c } from "../../../functions/parsers.js";
+import "react";
 import o from "../../atoms/Tile/index.js";
 import { generateKey as f } from "../../../functions/generators.js";
-const T = ({
+const C = ({
   testId: i = null,
   cssClasses: e = null,
   style: p = null,
@@ -11,15 +12,15 @@ const T = ({
   isVertical: s = !1,
   groupConfig: a
 }) => {
-  const u = d([
+  const m = d([
     "tileGroup",
     r,
     l,
     s ? "is-vertical" : null,
     e
-  ]), m = i ?? c({
+  ]), u = i ?? c({
     tag: "tileGroup",
-    parsedClasses: u,
+    parsedClasses: m,
     rules: [
       {
         regExp: /tileGroup/gm,
@@ -34,7 +35,7 @@ const T = ({
   return /* @__PURE__ */ t(
     o,
     {
-      testId: m,
+      testId: u,
       cssClasses: e ?? void 0,
       style: p ?? void 0,
       context: r,
@@ -51,5 +52,5 @@ const T = ({
   );
 };
 export {
-  T as default
+  C as default
 };

package/dist/interfaces/atomProps.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
+import { ElementProps, ComposedElementProps, ClickeableProps, NamedInputProps, InteractiveProps, InteractiveOnChangeProps } from './commonProps';
 import { BasicColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, IconColorModeType, ElementSizeType, SizeWithoutNormalType, TextColorType, TitleSizeType, RightLeftAlignType, CommonSizeType } from '../types/styleTypes';
 import { DropdownItemType, InputType, ChildrenType, TileContextType, SingleChildType } from '../types/domTypes';
 export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
@@ -122,11 +122,11 @@ export interface IconProps extends ComposedElementProps {
     /** `Styling` Used for `InputControl` styling purpose only. Will move the Icon itself to control's Input side */
     position?: RightLeftAlignType;
 }
-export interface InputProps extends ElementProps, ClickeableProps {
+export interface InputProps extends ElementProps, InteractiveProps, NamedInputProps {
     /** `Attribute` `Required` What type of input will be used */
     type: InputType;
     /** `Attribute` The value that will be shown on the input */
-    text?: string;
+    value?: string;
     /** `Attribute` The text that will be shown if the user does not type any value */
     placeholder?: string;
     /** `Attribute` Will disable the input */
@@ -143,8 +143,6 @@ export interface InputProps extends ElementProps, ClickeableProps {
     isHovered?: boolean;
     /** `Styling` Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
-    /** `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 */
@@ -163,7 +161,7 @@ export interface SelectOption {
     name: string;
     selected?: boolean;
 }
-export interface SelectProps extends ComposedElementProps, ClickeableProps {
+export interface SelectProps extends ComposedElementProps, InteractiveProps, NamedInputProps {
     /** `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 */
@@ -181,7 +179,7 @@ export interface SelectProps extends ComposedElementProps, ClickeableProps {
     /** `Styling`Will add a specific border when the input is focused by the user */
     isFocused?: boolean;
 }
-export interface FileProps extends ComposedElementProps, ClickeableProps {
+export interface FileProps extends ComposedElementProps, InteractiveProps, NamedInputProps {
     /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
     /** `Attribute` The icon displayed in file's button" */
@@ -199,33 +197,25 @@ export interface FileProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Set button's size */
     size?: ElementSizeType;
 }
-export interface CheckBoxProps extends ComposedElementProps {
+export interface CheckBoxProps extends ComposedElementProps, InteractiveOnChangeProps, NamedInputProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
     content?: ChildrenType;
     /** `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<ElementProps, 'testId' | 'style'> {
+export interface RadioButtonItemProps extends Pick<ElementProps, 'testId' | 'style'>, InteractiveOnChangeProps, NamedInputProps {
     /** `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 ComposedElementProps {
+export interface RadioButtonProps extends ComposedElementProps, InteractiveOnChangeProps {
     /** `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 interface BreadcrumbItemProps extends ComposedElementProps, ClickeableProps {
     /** `Attribute` `Required` Indicates item text that will be shown */

package/dist/interfaces/commonProps.d.ts

@@ -17,9 +17,27 @@ export interface ElementProps {
 export interface ComposedElementProps extends ElementProps, ContainerProps {
 }
 export interface ClickeableProps {
-    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    /** `Function` Reffers to each time the user click the element. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
+export interface ChangeableProps {
+    /** `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 BlureableProps {
+    /** `Function` Reffers to each time the user focus out the element. Alone does not nothing, but can be reused for other components */
+    onBlur?: () => void;
+}
+export interface InteractiveProps extends ClickeableProps, ChangeableProps, BlureableProps {
+}
+export interface InteractiveOnChangeProps extends Omit<InteractiveProps, 'onChange'> {
+    /** `Function` Reffers to each time the user click the element (I recommend using this one rather than the `onClick` method). Alone does not nothing, but can be reused for other components */
+    onChange?: () => void;
+}
+export interface NamedInputProps {
+    /** `Attribute` Used to reference the input in a form */
+    name?: string;
+}
 export interface GenericObjectProps {
     [key: string]: string | number | boolean | object;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-bulma",
-  "version": "4.1.5",
+  "version": "4.2.0",
   "type": "module",
   "description": "A component library based on React, Bulma, Typescript and Vite",
   "keywords": [