reactive-bulma 5.0.7 → 5.1.0

package/dist/index.js

@@ -11,11 +11,11 @@ import { default as g } from "./components/atoms/TextArea/index.js";
 import { default as v } from "./components/atoms/Delete/index.js";
 import { default as G } from "./components/atoms/Select/index.js";
 import { default as P } from "./components/atoms/File/index.js";
-import { default as D } from "./components/atoms/Checkbox/index.js";
-import { default as N } from "./components/atoms/RadioButton/index.js";
+import { default as w } from "./components/atoms/Checkbox/index.js";
+import { default as L } from "./components/atoms/RadioButton/index.js";
 import { default as h } from "./components/atoms/BreadcrumbItem/index.js";
-import { default as A } from "./components/atoms/DropdownTrigger/index.js";
-import { default as S } from "./components/atoms/DropdownItem/index.js";
+import { default as S } from "./components/atoms/DropdownTrigger/index.js";
+import { default as R } from "./components/atoms/DropdownItem/index.js";
 import { default as j } from "./components/atoms/MenuItem/index.js";
 import { default as y } from "./components/atoms/Image/index.js";
 import { default as E } from "./components/atoms/PaginationItem/index.js";
@@ -27,102 +27,104 @@ import { default as _ } from "./components/atoms/TableHeadCell/index.js";
 import { default as ee } from "./components/atoms/TableCell/index.js";
 import { default as ae } from "./components/atoms/GridCell/index.js";
 import { default as te } from "./components/atoms/TagWithAddon/index.js";
-import { default as le } from "./components/molecules/ButtonGroup/index.js";
-import { default as ue } from "./components/molecules/ColumnGroup/index.js";
-import { default as pe } from "./components/molecules/Notification/index.js";
-import { default as xe } from "./components/molecules/Breadcrumbs/index.js";
-import { default as ie } from "./components/molecules/Dropdown/index.js";
-import { default as Be } from "./components/molecules/Message/index.js";
-import { default as be } from "./components/molecules/Menu/index.js";
-import { default as ge } from "./components/molecules/MenuList/index.js";
-import { default as ve } from "./components/molecules/Pagination/index.js";
-import { default as Ge } from "./components/molecules/Modal/index.js";
-import { default as Pe } from "./components/molecules/Tabs/index.js";
-import { default as De } from "./components/molecules/InputControl/index.js";
-import { default as Ne } from "./components/molecules/PanelBlock/index.js";
-import { default as he } from "./components/molecules/PanelTabs/index.js";
-import { default as Ae } from "./components/molecules/LevelItem/index.js";
-import { default as Se } from "./components/molecules/TileBox/index.js";
-import { default as je } from "./components/molecules/Footer/index.js";
-import { default as ye } from "./components/molecules/Media/index.js";
-import { default as Ee } from "./components/molecules/Section/index.js";
-import { default as Ke } from "./components/molecules/NavBarBrand/index.js";
-import { default as Qe } from "./components/molecules/NavBarDropdown/index.js";
-import { default as Ve } from "./components/molecules/TableRow/index.js";
-import { default as Ye } from "./components/molecules/FormFieldInput/index.js";
-import { default as _e } from "./components/molecules/TagList/index.js";
-import { default as eo } from "./components/molecules/CheckboxGroup/index.js";
-import { default as ao } from "./components/molecules/Grid/index.js";
-import { default as to } from "./components/organisms/FormField/index.js";
-import { default as lo } from "./components/organisms/Panel/index.js";
-import { default as mo } from "./components/organisms/Level/index.js";
-import { default as so } from "./components/organisms/Hero/index.js";
-import { default as no } from "./components/organisms/TileGroup/index.js";
-import { default as To } from "./components/organisms/NavBar/index.js";
-import { default as Io } from "./components/organisms/Card/index.js";
-import { default as co } from "./components/organisms/Table/index.js";
+import { default as le } from "./components/atoms/Skeleton/index.js";
+import { default as ue } from "./components/molecules/ButtonGroup/index.js";
+import { default as pe } from "./components/molecules/ColumnGroup/index.js";
+import { default as xe } from "./components/molecules/Notification/index.js";
+import { default as ie } from "./components/molecules/Breadcrumbs/index.js";
+import { default as Be } from "./components/molecules/Dropdown/index.js";
+import { default as be } from "./components/molecules/Message/index.js";
+import { default as ge } from "./components/molecules/Menu/index.js";
+import { default as ve } from "./components/molecules/MenuList/index.js";
+import { default as Ge } from "./components/molecules/Pagination/index.js";
+import { default as Pe } from "./components/molecules/Modal/index.js";
+import { default as we } from "./components/molecules/Tabs/index.js";
+import { default as Le } from "./components/molecules/InputControl/index.js";
+import { default as he } from "./components/molecules/PanelBlock/index.js";
+import { default as Se } from "./components/molecules/PanelTabs/index.js";
+import { default as Re } from "./components/molecules/LevelItem/index.js";
+import { default as je } from "./components/molecules/TileBox/index.js";
+import { default as ye } from "./components/molecules/Footer/index.js";
+import { default as Ee } from "./components/molecules/Media/index.js";
+import { default as Ke } from "./components/molecules/Section/index.js";
+import { default as Qe } from "./components/molecules/NavBarBrand/index.js";
+import { default as Ve } from "./components/molecules/NavBarDropdown/index.js";
+import { default as Ye } from "./components/molecules/TableRow/index.js";
+import { default as _e } from "./components/molecules/FormFieldInput/index.js";
+import { default as eo } from "./components/molecules/TagList/index.js";
+import { default as ao } from "./components/molecules/CheckboxGroup/index.js";
+import { default as to } from "./components/molecules/Grid/index.js";
+import { default as lo } from "./components/organisms/FormField/index.js";
+import { default as mo } from "./components/organisms/Panel/index.js";
+import { default as so } from "./components/organisms/Level/index.js";
+import { default as no } from "./components/organisms/Hero/index.js";
+import { default as To } from "./components/organisms/TileGroup/index.js";
+import { default as Io } from "./components/organisms/NavBar/index.js";
+import { default as co } from "./components/organisms/Card/index.js";
+import { default as Co } from "./components/organisms/Table/index.js";
 export {
   u as Block,
   x as Box,
   h as BreadcrumbItem,
-  xe as Breadcrumbs,
+  ie as Breadcrumbs,
   a as Button,
-  le as ButtonGroup,
-  Io as Card,
-  D as Checkbox,
-  eo as CheckboxGroup,
+  ue as ButtonGroup,
+  co as Card,
+  w as Checkbox,
+  ao as CheckboxGroup,
   t as Column,
-  ue as ColumnGroup,
+  pe as ColumnGroup,
   v as Delete,
-  ie as Dropdown,
-  S as DropdownItem,
-  A as DropdownTrigger,
+  Be as Dropdown,
+  R as DropdownItem,
+  S as DropdownTrigger,
   P as File,
-  je as Footer,
-  to as FormField,
-  Ye as FormFieldInput,
-  ao as Grid,
+  ye as Footer,
+  lo as FormField,
+  _e as FormFieldInput,
+  to as Grid,
   ae as GridCell,
-  so as Hero,
+  no as Hero,
   B as Icon,
   y as Image,
   b as Input,
-  De as InputControl,
-  mo as Level,
+  Le as InputControl,
+  so as Level,
   Q as LevelHeader,
-  Ae as LevelItem,
-  ye as Media,
-  be as Menu,
+  Re as LevelItem,
+  Ee as Media,
+  ge as Menu,
   j as MenuItem,
-  ge as MenuList,
-  Be as Message,
-  Ge as Modal,
-  To as NavBar,
-  Ke as NavBarBrand,
-  Qe as NavBarDropdown,
+  ve as MenuList,
+  be as Message,
+  Pe as Modal,
+  Io as NavBar,
+  Qe as NavBarBrand,
+  Ve as NavBarDropdown,
   Y as NavBarItem,
-  pe as Notification,
-  ve as Pagination,
+  xe as Notification,
+  Ge as Pagination,
   E as PaginationItem,
-  lo as Panel,
-  Ne as PanelBlock,
-  he as PanelTabs,
+  mo as Panel,
+  he as PanelBlock,
+  Se as PanelTabs,
   l as ProgressBar,
-  N as RadioButton,
-  Ee as Section,
+  L as RadioButton,
+  Ke as Section,
   G as Select,
+  le as Skeleton,
   K as TabItem,
-  co as Table,
+  Co as Table,
   ee as TableCell,
   _ as TableHeadCell,
-  Ve as TableRow,
-  Pe as Tabs,
+  Ye as TableRow,
+  we as Tabs,
   p as Tag,
-  _e as TagList,
+  eo as TagList,
   te as TagWithAddon,
   g as TextArea,
   V as Tile,
-  Se as TileBox,
-  no as TileGroup,
+  je as TileBox,
+  To as TileGroup,
   i as Title
 };

package/dist/interfaces/atomProps.d.ts

@@ -33,6 +33,8 @@ export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRe
     isRounded?: boolean;
     /** `Styling` Will change `text` for an animated spinner, but will remain clickeable */
     isLoading?: boolean;
+    /** `Styling` Will change `text` and its input for an animated background occupating the input, and it but will not remain clickeable */
+    isSkeleton?: boolean;
     /** `Styling` Similar to `isDisabled`, but will remove any color style */
     isStatic?: boolean;
     /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
@@ -75,6 +77,8 @@ interface BaseTagProps extends React.ComponentPropsWithoutRef<'span'> {
     isRounded?: boolean;
     /** `Styling` Set tag's size */
     size?: BaseSizeType;
+    /** `Styling` Will change the tag for an animated background occupating its size, and it but will not remain clickeable */
+    isSkeleton?: boolean;
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
@@ -93,6 +97,8 @@ export interface ImageProps extends ComposedElementProps, React.ComponentPropsWi
     alt?: string;
     /** `Styling` Will add round borders to image's shape */
     fixedSize?: FixedImageSizeType;
+    /** `Styling` Will change the image for an animated background occupating its size, and it but will not remain clickeable */
+    isSkeleton?: boolean;
     /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
     isRounded?: boolean;
 }
@@ -115,6 +121,8 @@ export interface TitleProps {
     main?: TitleSectionProps;
     /** `Attribute` Subtitle title configuration object */
     secondary?: TitleSectionProps;
+    /** `Styling` Will change both titles for an animated background occupating its size, and it but will not remain clickeable */
+    isSkeleton?: boolean;
 }
 export interface IconProps extends ComposedElementProps {
     /** `Attribute` `Required` Sets the icon key work based on [Material Design icon list](https://pictogrammers.com/library/mdi/) */
@@ -129,6 +137,8 @@ export interface IconProps extends ComposedElementProps {
     colorMode?: ColorModeType;
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
+    /** `Styling` Will change the icon for an animated background occupating the input, and it but will not remain clickable */
+    isSkeleton?: boolean;
     /** `Styling` Used for `InputControl` styling purpose only. Will move the Icon itself to control's Input side */
     position?: RightLeftAlignType;
 }
@@ -143,6 +153,8 @@ export interface InputProps extends ElementProps, InteractiveProps, NamedInputPr
     isDisabled?: boolean;
     /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */
     isReadonly?: boolean;
+    /** `Styling` Will change the input for an animated background occupating it entirely, and it but will not remain clickable */
+    isSkeleton?: boolean;
     /** `Styling` Color based on bulma's text color tokens */
     color?: ColorType;
     /** `Styling` Set input's size */
@@ -332,4 +344,10 @@ export interface GridCellProps extends ElementProps, React.ComponentPropsWithout
     /** `Styling` Change how many rows a cell spans */
     rowSpan?: number;
 }
+export interface SkeletonProps extends ElementProps {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
+    children?: ChildrenType;
+    /** Styling: How the Skeleton's children will be shown. Will be `block` by default */
+    displayType?: 'block' | 'lines';
+}
 export {};

package/package.json

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