reactive-bulma 5.0.2 → 5.0.4

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Nicolás Omar González Passerino
+Copyright (c) 2025 Nicolás Omar González Passerino
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/components/atoms/Checkbox/index.js

@@ -1,67 +1,77 @@
-import { jsxs as C, jsx as l } from "react/jsx-runtime";
-import { useMemo as t } from "react";
-import { parseClasses as g, parseTestId as n } from "../../../functions/parsers.js";
-const a = (s) => s ? "-with-component" : "", I = ({
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import { useMemo as o } from "react";
+import { parseClasses as v, parseTestId as a } from "../../../functions/parsers.js";
+const d = (s) => s ? "-with-component" : "", N = ({
   testId: s = null,
-  containerTestId: o = null,
-  cssClasses: d = null,
-  containerCssClasses: c = null,
-  style: i = null,
-  containerStyle: r = null,
+  containerTestId: c = null,
+  cssClasses: i = null,
+  containerCssClasses: l = null,
+  style: r = null,
+  containerStyle: h = null,
   label: e = null,
   isChecked: p,
-  name: h,
-  isDisabled: x = !1,
-  onClick: k,
-  onChange: u,
-  onBlur: m
+  name: t,
+  value: x,
+  isDisabled: k = !1,
+  onClick: u,
+  onChange: m,
+  onBlur: b
 }) => {
-  const b = t(
-    () => g(["checkbox", c]),
-    [c]
-  ), f = t(
-    () => o ?? n({
+  const f = o(
+    () => v(["checkbox", l]),
+    [l]
+  ), y = o(
+    () => c ?? a({
       tag: "checkbox-container",
-      parsedClasses: a(e)
+      parsedClasses: d(e)
     }),
-    [o, e]
-  ), y = t(
-    () => s ?? n({
+    [c, e]
+  ), C = o(
+    () => s ?? a({
       tag: "checkbox",
-      parsedClasses: a(e)
+      parsedClasses: d(e)
     }),
     [s, e]
   );
-  return /* @__PURE__ */ C(
-    "label",
+  return /* @__PURE__ */ g(
+    "section",
     {
-      "data-testid": f,
-      className: b,
-      style: r ?? void 0,
+      "data-testid": y,
+      className: f,
+      style: h ?? void 0,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ n(
           "input",
           {
-            "data-testid": y,
+            id: t,
+            "data-testid": C,
             type: "checkbox",
-            name: h,
-            className: d ?? void 0,
-            style: i ?? void 0,
+            name: t,
+            value: x,
+            className: i ?? void 0,
+            style: r ?? void 0,
             defaultChecked: p,
-            disabled: x,
-            onClick: k,
-            onChange: u,
-            onBlur: m
+            disabled: k,
+            onClick: u,
+            onChange: m,
+            onBlur: b
           }
         ),
-        /* @__PURE__ */ l("p", { style: {
-          display: "inline-block",
-          marginLeft: "5px"
-        }, children: e })
+        /* @__PURE__ */ n(
+          "label",
+          {
+            style: {
+              display: "inline-block",
+              marginLeft: "5px"
+            },
+            htmlFor: t,
+            children: e
+          }
+        )
       ]
     }
   );
 };
 export {
-  I as default
+  N as default
 };

package/dist/components/atoms/RadioButton/index.js

@@ -1,21 +1,21 @@
 import { jsxs as B, jsx as e } from "react/jsx-runtime";
 import { useMemo as h } from "react";
-import { parseClasses as x, parseTestId as I } from "../../../functions/parsers.js";
-import { generateKey as f } from "../../../functions/generators.js";
+import { parseClasses as v, parseTestId as x } from "../../../functions/parsers.js";
+import { generateKey as I } from "../../../functions/generators.js";
 const N = ({
   containerTestId: o = null,
   containerCssClasses: n = null,
-  containerStyle: c = null,
+  containerStyle: u = null,
   options: s,
   name: a,
   onClick: r,
   onChange: d,
   onBlur: l
 }) => {
-  const i = x([
+  const i = v([
     "control",
     n
-  ]), u = o ?? I({
+  ]), c = o ?? x({
     tag: "container-",
     parsedClasses: i
   }), m = h(
@@ -36,6 +36,7 @@ const N = ({
                 type: "radio",
                 style: t.style ?? void 0,
                 name: a,
+                value: t.value,
                 defaultChecked: t.isChecked,
                 disabled: t.isDisabled,
                 onClick: r,
@@ -46,7 +47,7 @@ const N = ({
             /* @__PURE__ */ e("p", { style: b, children: t.label })
           ]
         },
-        `radio-button-item-${f()}`
+        `radio-button-item-${I()}`
       );
     }),
     [s, a, r, d, l]
@@ -54,9 +55,9 @@ const N = ({
   return /* @__PURE__ */ e(
     "section",
     {
-      "data-testid": u,
+      "data-testid": c,
       className: i,
-      style: c ?? void 0,
+      style: u ?? void 0,
       children: m
     }
   );

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

@@ -1,92 +1,114 @@
-import { jsxs as u, Fragment as p, jsx as r } from "react/jsx-runtime";
-import { useMemo as s } from "react";
+import { jsxs as i, Fragment as p, jsx as t } from "react/jsx-runtime";
+import { useMemo as l } from "react";
 import d from "../../atoms/Button/index.js";
 import T from "../../atoms/TextArea/index.js";
 import h from "../../atoms/Select/index.js";
-import g from "../../atoms/Checkbox/index.js";
-import N from "../../atoms/RadioButton/index.js";
-import x from "../InputControl/index.js";
-import { FormFieldType as t } from "../../../interfaces/moleculeProps.js";
-const m = ({ testId: c, element: o, isHorizontal: i }) => {
+import N from "../../atoms/Checkbox/index.js";
+import g from "../../atoms/RadioButton/index.js";
+import b from "../InputControl/index.js";
+import { FormFieldType as n } from "../../../interfaces/moleculeProps.js";
+const a = ({ testId: c, element: o, isHorizontal: s }) => {
   if (o === null) return null;
-  const n = {
+  const e = {
     testId: o.config?.testId ?? c ?? `test-form-field-${o.type}`,
     containerTestId: c ?? `test-form-field-container-${o.type}`
-  };
+  }, r = o.fieldLabel ? /* @__PURE__ */ t(
+    "label",
+    {
+      "data-testid": `test-form-field-${o.type}-label`,
+      className: "label",
+      children: o.fieldLabel
+    }
+  ) : null;
   switch (o.type) {
-    case t.INPUT:
-      return /* @__PURE__ */ r(
-        x,
+    case n.INPUT:
+      return /* @__PURE__ */ t(
+        b,
         {
           ...o.config,
-          ...n,
-          isHorizontal: i
+          ...e,
+          isHorizontal: s
         }
       );
-    case t.SELECT:
-      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
-        h,
-        {
-          ...o.config,
-          ...n
-        }
-      ) });
-    case t.CHECKBOX:
-      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
-        g,
-        {
-          ...o.config,
-          ...n
-        }
-      ) });
-    case t.RADIOBUTTON:
-      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
-        N,
-        {
-          ...o.config,
-          ...n
-        }
-      ) });
-    case t.TEXTAREA:
-      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
-        T,
-        {
-          ...o.config,
-          ...n
-        }
-      ) });
-    case t.BUTTON:
-      return /* @__PURE__ */ r("section", { className: "control", children: /* @__PURE__ */ r(
-        d,
-        {
-          ...o.config,
-          ...n
-        }
-      ) });
+    case n.SELECT:
+      return /* @__PURE__ */ i("section", { className: "control", children: [
+        r,
+        /* @__PURE__ */ t(
+          h,
+          {
+            ...o.config,
+            ...e
+          }
+        )
+      ] });
+    case n.CHECKBOX:
+      return /* @__PURE__ */ i("section", { className: "control", children: [
+        r,
+        /* @__PURE__ */ t(
+          N,
+          {
+            ...o.config,
+            ...e
+          }
+        )
+      ] });
+    case n.RADIOBUTTON:
+      return /* @__PURE__ */ i("section", { className: "control", children: [
+        r,
+        /* @__PURE__ */ t(
+          g,
+          {
+            ...o.config,
+            ...e
+          }
+        )
+      ] });
+    case n.TEXTAREA:
+      return /* @__PURE__ */ i("section", { className: "control", children: [
+        r,
+        /* @__PURE__ */ t(
+          T,
+          {
+            ...o.config,
+            ...e
+          }
+        )
+      ] });
+    case n.BUTTON:
+      return /* @__PURE__ */ i("section", { className: "control", children: [
+        r,
+        /* @__PURE__ */ t(
+          d,
+          {
+            ...o.config,
+            ...e
+          }
+        )
+      ] });
   }
-}, j = ({
+}, R = ({
   testId: c,
   mainInput: o,
-  leftInput: i = null,
-  rightInput: n = null,
-  isHorizontal: e = !1
+  leftInput: s = null,
+  rightInput: e = null,
+  isHorizontal: r = !1
 }) => {
-  const f = s(
-    () => m({ testId: c, element: o, isHorizontal: e }),
-    [c, o, e]
-  ), a = s(
-    () => m({ testId: c, element: i, isHorizontal: e }),
-    [c, i, e]
-  ), l = s(
-    () => m({ testId: c, element: n, isHorizontal: e }),
-    [c, n, e]
+  const f = l(
+    () => a({ testId: c, element: o, isHorizontal: r }),
+    [c, o, r]
+  ), m = l(
+    () => a({ testId: c, element: s, isHorizontal: r }),
+    [c, s, r]
+  ), u = l(
+    () => a({ testId: c, element: e, isHorizontal: r }),
+    [c, e, r]
   );
-  return /* @__PURE__ */ u(p, { children: [
-    a,
+  return /* @__PURE__ */ i(p, { children: [
+    m,
     f,
-    l
+    u
   ] });
 };
 export {
-  j as default
+  R as default
 };

package/dist/components/molecules/FormFieldInput/index.stories.d.ts

@@ -5,7 +5,11 @@ declare const _default: Meta<typeof FormFieldInput>;
 export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
 export declare const SelectCase: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
+export declare const SelectWithLabel: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
 export declare const CheckboxCase: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
+export declare const CheckboxWithLabel: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
 export declare const RadiobuttonCase: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
+export declare const RadiobuttonWithLabel: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
 export declare const TextareaCase: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
+export declare const TextareaWithLabel: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;
 export declare const LeftAddonSelect: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormFieldInputProps>;

package/dist/interfaces/atomProps.d.ts

@@ -211,6 +211,8 @@ export interface FileProps extends ComposedElementProps, InteractiveProps, Named
     size?: SizeWithNormalType;
 }
 export interface CheckBoxProps extends ComposedElementProps, InteractiveOnChangeProps, NamedInputProps {
+    /** `Attribute` `Required` Sets checkbox's value */
+    value: string | number;
     /** `Attribute` Shows the checkbox as checked or unchecked */
     isChecked?: boolean;
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
@@ -219,8 +221,10 @@ export interface CheckBoxProps extends ComposedElementProps, InteractiveOnChange
     isDisabled?: boolean;
 }
 export interface RadioButtonItemProps extends Pick<ElementProps, 'testId' | 'style'>, InteractiveOnChangeProps, NamedInputProps {
-    /** `Attribute` `Required` Sets radiobutton's text*/
+    /** `Attribute` `Required` Sets radiobutton's text */
     label: string;
+    /** `Attribute` `Required` Sets radiobutton's value */
+    value: string | number;
     /** `Attribute` Shows the radiobutton as checked or unchecked */
     isChecked?: boolean;
     /** `Attribute` Will disable the checkbox */

package/dist/interfaces/moleculeProps.d.ts

@@ -255,6 +255,7 @@ export declare enum FormFieldType {
 export type FormFieldConfig = InputControlProps | SelectProps | CheckBoxProps | RadioButtonProps | TextAreaProps | ButtonProps;
 export interface FormFieldElement {
     type: FormFieldType;
+    fieldLabel?: string;
     config: FormFieldConfig;
 }
 export interface FormFieldInputProps extends ElementProps {

package/package.json

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