reactive-bulma 5.0.6 → 5.1.0

package/dist/components/atoms/Skeleton/index.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { default as Skeleton } from '.';
+declare const _default: Meta<typeof Skeleton>;
+export default _default;
+export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').SkeletonProps>;
+export declare const BlockWithSeveralChildren: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').SkeletonProps>;
+export declare const LinesWithSeveralChildren: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').SkeletonProps>;

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

@@ -1,8 +1,8 @@
-import { jsxs as C, jsx as I } from "react/jsx-runtime";
+import { jsxs as E, jsx as T } from "react/jsx-runtime";
 import { COMMON_CLASSES as l } from "../../../constants/classes.js";
 import { TEST_ID_REGEXP as n } from "../../../constants/regExp.js";
-import { parseClasses as T, parseTestId as E } from "../../../functions/parsers.js";
-const N = ({
+import { parseClasses as I, parseTestId as S } from "../../../functions/parsers.js";
+const O = ({
   testId: r = null,
   cssClasses: u = null,
   style: o = null,
@@ -12,24 +12,26 @@ const N = ({
   isLight: g = null,
   isRounded: c = null,
   size: e = null,
-  onDeleteClick: m = null
+  isSkeleton: m = !1,
+  onDeleteClick: i = null
 }) => {
-  const a = T([
+  const a = I([
     "tag",
     s ? `${l.IS}${s}` : null,
     g ? l.LIGHT : null,
     c ? l.ROUNDED : null,
     e ? `${l.IS}${e}` : null,
+    m ? l.SKELETON : null,
     u
-  ]), t = r ?? E({
+  ]), t = r ?? S({
     tag: "tag",
     parsedClasses: a,
     rules: [
       { regExp: n.TAG, replacer: "" },
       { regExp: n.IS, replacer: "-" }
     ]
-  }), i = `${t}-delete`;
-  return /* @__PURE__ */ C(
+  }), C = `${t}-delete`;
+  return /* @__PURE__ */ E(
     "span",
     {
       "data-testid": t,
@@ -37,12 +39,12 @@ const N = ({
       className: a,
       children: [
         d,
-        p ? /* @__PURE__ */ I(
+        p ? /* @__PURE__ */ T(
           "button",
           {
-            "data-testid": i,
+            "data-testid": C,
             className: "delete",
-            onClick: m ?? void 0
+            onClick: i ?? void 0
           }
         ) : null
       ]
@@ -50,5 +52,5 @@ const N = ({
   );
 };
 export {
-  N as default
+  O as default
 };

package/dist/components/atoms/Tag/index.stories.d.ts

@@ -7,4 +7,5 @@ export declare const Colored: import('storybook/internal/csf').AnnotatedStoryFn<
 export declare const Rounded: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').TagProps>;
 export declare const LightColor: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').TagProps>;
 export declare const LargeSize: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').TagProps>;
+export declare const Skeleton: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').TagProps>;
 export declare const WithDeleteButton: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').TagProps>;

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

@@ -1,32 +1,35 @@
-import { jsx as C } from "react/jsx-runtime";
-import { parseClasses as h, parseTestId as A } from "../../../functions/parsers.js";
-const E = ({
-  testId: l = null,
+import { jsx as O } from "react/jsx-runtime";
+import { parseClasses as S, parseTestId as A } from "../../../functions/parsers.js";
+import { COMMON_CLASSES as l } from "../../../constants/classes.js";
+const y = ({
+  testId: a = null,
   cssClasses: s = null,
-  style: a = null,
-  value: t = null,
-  name: r,
-  cols: n = null,
-  rows: o = null,
-  isDisabled: u = !1,
-  isReadonly: d = !1,
-  isFixedSize: i = !1,
-  color: x = null,
-  size: p = null,
+  style: t = null,
+  value: r = null,
+  name: n,
+  cols: o = null,
+  rows: u = null,
+  isDisabled: d = !1,
+  isReadonly: i = !1,
+  isSkeleton: x = !1,
+  isFixedSize: p = !1,
+  color: f = null,
+  size: m = null,
   isHovered: c = null,
-  isFocused: f = null,
-  onClick: v = null,
-  onChange: m = null
+  isFocused: C = null,
+  onClick: E = null,
+  onChange: v = null
 }) => {
-  const e = h([
+  const e = S([
     "textarea",
-    x,
-    p,
-    c ? "is-hovered" : null,
-    f ? "is-focused" : null,
-    i ? "has-fixed-size" : null,
+    f,
+    m,
+    c ? l.HOVERED : null,
+    C ? l.FOCUSED : null,
+    p ? "has-fixed-size" : null,
+    x ? l.SKELETON : null,
     s
-  ]), g = l ?? A({
+  ]), g = a ?? A({
     tag: "textarea",
     parsedClasses: e,
     rules: [
@@ -40,23 +43,23 @@ const E = ({
       }
     ]
   });
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ O(
     "textarea",
     {
       "data-testid": g,
-      value: t ?? void 0,
-      name: r,
-      cols: n ?? void 0,
-      rows: o ?? void 0,
-      disabled: u,
-      readOnly: d,
+      value: r ?? void 0,
+      name: n,
+      cols: o ?? void 0,
+      rows: u ?? void 0,
+      disabled: d,
+      readOnly: i,
       className: e,
-      style: a ?? void 0,
-      onClick: v ?? void 0,
-      onChange: m ?? void 0
+      style: t ?? void 0,
+      onClick: E ?? void 0,
+      onChange: v ?? void 0
     }
   );
 };
 export {
-  E as default
+  y as default
 };

package/dist/components/atoms/TextArea/index.stories.d.ts

@@ -7,6 +7,7 @@ export declare const BasicExample: import('storybook/internal/csf').AnnotatedSto
 export declare const WithText: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;
 export declare const Colored: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;
 export declare const WithBigSize: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;
+export declare const Skeleton: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;
 export declare const Hovered: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;
 export declare const Focused: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;
 export declare const Disabled: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;

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

@@ -1,37 +1,38 @@
-import { jsxs as m, Fragment as a, jsx as c } from "react/jsx-runtime";
-import { useMemo as l } from "react";
-import { COMMON_CLASSES as p } from "../../../constants/classes.js";
+import { jsxs as c, Fragment as p, jsx as u } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { COMMON_CLASSES as o } from "../../../constants/classes.js";
 import { parseClasses as S } from "../../../functions/parsers.js";
-const o = (t) => {
+const n = (t, s) => {
   if (t === void 0) return null;
-  const { type: e, size: s, isSpaced: i, cssClasses: r } = t, n = S([
+  const { type: e, size: l, isSpaced: r, cssClasses: d } = t, m = S([
     e,
-    s ? `${p.IS}${s}` : null,
-    e === "title" && i ? "is-spaced" : null,
-    r
-  ]), d = t?.testId ?? `test-${t?.type}`;
-  return /* @__PURE__ */ c(
+    l ? `${o.IS}${l}` : null,
+    e === "title" && r ? "is-spaced" : null,
+    s ? o.SKELETON : null,
+    d
+  ]), a = t?.testId ?? `test-${t?.type}`;
+  return /* @__PURE__ */ u(
     "p",
     {
-      "data-testid": d,
-      className: n,
+      "data-testid": a,
+      className: m,
       style: t?.style ?? void 0,
       children: t?.text
     }
   );
-}, x = ({ main: t, secondary: e }) => {
-  const s = l(
-    () => o(t),
-    [t]
-  ), i = l(
-    () => o(e),
-    [e]
+}, y = ({ main: t, secondary: s, isSkeleton: e }) => {
+  const l = i(
+    () => n(t, e),
+    [t, e]
+  ), r = i(
+    () => n(s, e),
+    [s, e]
   );
-  return /* @__PURE__ */ m(a, { children: [
-    s,
-    i
+  return /* @__PURE__ */ c(p, { children: [
+    l,
+    r
   ] });
 };
 export {
-  x as default
+  y as default
 };

package/dist/components/atoms/Title/index.stories.d.ts

@@ -7,4 +7,5 @@ export declare const BasicExample: import('storybook/internal/csf').AnnotatedSto
 export declare const WithBigSize: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TitleProps>;
 export declare const WithSubtitles: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TitleProps>;
 export declare const WithBiggerSubtitles: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TitleProps>;
+export declare const Skeleton: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TitleProps>;
 export declare const SpicedTitle: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TitleProps>;

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

@@ -27,3 +27,4 @@ export { default as TableHeadCell } from './TableHeadCell';
 export { default as TableCell } from './TableCell';
 export { default as GridCell } from './GridCell';
 export { default as TagWithAddon } from './TagWithAddon';
+export { default as Skeleton } from './Skeleton';

package/dist/components/atoms/index.js

@@ -8,14 +8,14 @@ import { default as i } from "./Title/index.js";
 import { default as T } from "./Icon/index.js";
 import { default as B } from "./Input/index.js";
 import { default as c } from "./TextArea/index.js";
-import { default as D } from "./Delete/index.js";
-import { default as k } from "./Select/index.js";
+import { default as k } from "./Delete/index.js";
+import { default as h } from "./Select/index.js";
 import { default as w } from "./File/index.js";
 import { default as H } from "./Checkbox/index.js";
-import { default as F } from "./RadioButton/index.js";
-import { default as L } from "./BreadcrumbItem/index.js";
-import { default as N } from "./DropdownTrigger/index.js";
-import { default as S } from "./DropdownItem/index.js";
+import { default as S } from "./RadioButton/index.js";
+import { default as G } from "./BreadcrumbItem/index.js";
+import { default as M } from "./DropdownTrigger/index.js";
+import { default as R } from "./DropdownItem/index.js";
 import { default as j } from "./MenuItem/index.js";
 import { default as y } from "./Image/index.js";
 import { default as E } from "./PaginationItem/index.js";
@@ -27,16 +27,17 @@ import { default as _ } from "./TableHeadCell/index.js";
 import { default as ee } from "./TableCell/index.js";
 import { default as ae } from "./GridCell/index.js";
 import { default as re } from "./TagWithAddon/index.js";
+import { default as le } from "./Skeleton/index.js";
 export {
   m as Block,
   s as Box,
-  L as BreadcrumbItem,
+  G as BreadcrumbItem,
   a as Button,
   H as Checkbox,
   r as Column,
-  D as Delete,
-  S as DropdownItem,
-  N as DropdownTrigger,
+  k as Delete,
+  R as DropdownItem,
+  M as DropdownTrigger,
   w as File,
   ae as GridCell,
   T as Icon,
@@ -47,8 +48,9 @@ export {
   Y as NavBarItem,
   E as PaginationItem,
   l as ProgressBar,
-  F as RadioButton,
-  k as Select,
+  S as RadioButton,
+  h as Select,
+  le as Skeleton,
   K as TabItem,
   ee as TableCell,
   _ as TableHeadCell,

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

@@ -1,7 +1,7 @@
 import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import "react";
 import { COMMON_CLASSES as o } from "../../../constants/classes.js";
 import { parseClasses as $, parseTestId as g } from "../../../functions/parsers.js";
+import "react";
 import C from "../../atoms/Delete/index.js";
 const y = ({
   testId: i = null,

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

@@ -1,6 +1,6 @@
 import { jsxs as e, jsx as a } from "react/jsx-runtime";
-import "react";
 import { parseClasses as n, parseTestId as t } from "../../../functions/parsers.js";
+import "react";
 import b from "../../atoms/NavBarItem/index.js";
 const C = ({
   testId: d = null,

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

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as m } from "react/jsx-runtime";
-import "react";
 import { COMMON_CLASSES as i } from "../../../constants/classes.js";
 import { parseClasses as p, parseTestId as d } from "../../../functions/parsers.js";
+import "react";
 import C from "../../atoms/Delete/index.js";
 const j = ({
   testId: o = null,

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

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import "react";
 import { parseClasses as m, parseTestId as n } from "../../../functions/parsers.js";
 import p from "../../atoms/Tag/index.js";
+import "react";
 import { generateKey as g } from "../../../functions/generators.js";
 const C = ({
   testId: a = null,

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

@@ -1,6 +1,6 @@
 import { jsx as x } from "react/jsx-runtime";
-import "react";
 import { parseClasses as d, parseTestId as m } from "../../../functions/parsers.js";
+import "react";
 import u from "../../atoms/Tile/index.js";
 const T = ({
   testId: r = null,

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

@@ -2,56 +2,58 @@ import { jsx as t } from "react/jsx-runtime";
 import { useMemo as F } from "react";
 import s from "../../molecules/FormFieldInput/index.js";
 import { parseClasses as I, parseTestId as h } from "../../../functions/parsers.js";
-import { generateKey as n } from "../../../functions/generators.js";
+import { generateKey as m } from "../../../functions/generators.js";
 const K = ({
-  testId: c = null,
-  cssClasses: u = null,
-  style: i = null,
+  testId: n = null,
+  cssClasses: c = null,
+  style: u = null,
   inputsConfig: e,
-  isHorizontal: l = !1,
+  isHorizontal: r = !1,
   isGrouped: o = !1,
-  withAddons: y = !1
+  withAddons: i = !1
 }) => {
   const a = I([
     "field",
-    l ? "is-horizontal" : null,
+    r ? "is-horizontal" : null,
     o ? "is-grouped" : null,
-    y ? "has-addons" : null,
-    u
-  ]), p = c ?? h({ tag: "field", parsedClasses: a }), d = F(() => {
-    const m = o ? `grouped-input-control-body-${n()}` : `input-control-body-${n()}`;
+    i ? "has-addons" : null,
+    c
+  ]), p = n ?? h({ tag: "field", parsedClasses: a }), d = F(() => {
     if (o)
-      return Array.isArray(e) ? e.map((r, f) => /* @__PURE__ */ t(
-        s,
-        {
-          ...r,
-          isHorizontal: r.isHorizontal ?? l,
-          testId: r.testId ?? `test-grouped-input-control-${f}`
-        },
-        m
-      )) : /* @__PURE__ */ t(
+      return Array.isArray(e) ? e.map((l, y) => {
+        const f = `grouped-input-control-body-${m()}`;
+        return /* @__PURE__ */ t(
+          s,
+          {
+            ...l,
+            isHorizontal: l.isHorizontal ?? r,
+            testId: l.testId ?? `test-grouped-input-control-${y}`
+          },
+          f
+        );
+      }) : /* @__PURE__ */ t(
         s,
         {
           ...e,
-          isHorizontal: e.isHorizontal ?? l
+          isHorizontal: e.isHorizontal ?? r
         },
-        m
+        `input-control-body-${m()}`
       );
     {
-      const r = Array.isArray(e) ? null : {
+      const l = Array.isArray(e) ? null : {
         ...e,
-        isHorizontal: e.isHorizontal ?? l
+        isHorizontal: e.isHorizontal ?? r
       };
-      return r !== null ? /* @__PURE__ */ t(s, { ...r }) : null;
+      return l !== null ? /* @__PURE__ */ t(s, { ...l }) : null;
     }
-  }, [e, o, l]);
+  }, [e, o, r]);
   return /* @__PURE__ */ t(
     "section",
     {
       "data-testid": p,
       className: a,
-      style: i ?? void 0,
-      children: l ? /* @__PURE__ */ t("section", { className: "field-body", children: d }) : d
+      style: u ?? void 0,
+      children: r ? /* @__PURE__ */ t("section", { className: "field-body", children: d }) : d
     }
   );
 };

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

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as C } from "react/jsx-runtime";
-import "react";
 import { parseClasses as T, parseTestId as w } from "../../../functions/parsers.js";
+import "react";
 import { generateKey as b } from "../../../functions/generators.js";
 import x from "../../atoms/TableHeadCell/index.js";
 import y from "../../molecules/TableRow/index.js";

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

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import "react";
 import { parseClasses as f, parseTestId as T } from "../../../functions/parsers.js";
 import { TEST_ID_REGEXP as i } from "../../../constants/regExp.js";
+import "react";
 import { generateKey as E } from "../../../functions/generators.js";
 import p from "../../atoms/Tile/index.js";
 const _ = ({

package/dist/constants/classes.d.ts

@@ -14,6 +14,9 @@ export declare const COMMON_CLASSES: {
     ROUNDED: string;
     TOGGLE_ROUNDED: string;
     LOADING: string;
+    HOVERED: string;
+    FOCUSED: string;
+    SKELETON: string;
     EXPANDED: string;
     ACTIVE: string;
     ICON_LEFT: string;
@@ -22,6 +25,7 @@ export declare const COMMON_CLASSES: {
     OUTLINED: string;
     STATIC: string;
     SELECTED: string;
+    MULTIPLE: string;
     FULL_WIDTH: string;
     RESPONSIVE: string;
     DISABLED: string;

package/dist/constants/classes.js

@@ -14,6 +14,9 @@ const s = {
   ROUNDED: "is-rounded",
   TOGGLE_ROUNDED: "is-toggle-rounded",
   LOADING: "is-loading",
+  HOVERED: "is-hovered",
+  FOCUSED: "is-focused",
+  SKELETON: "is-skeleton",
   EXPANDED: "is-expanded",
   ACTIVE: "is-active",
   ICON_LEFT: "has-icons-left",
@@ -22,6 +25,7 @@ const s = {
   OUTLINED: "is-outlined",
   STATIC: "is-static",
   SELECTED: "is-selected",
+  MULTIPLE: "is-multiple",
   FULL_WIDTH: "is-fullwidth",
   RESPONSIVE: "is-responsive",
   DISABLED: "is-disabled",