@allxsmith/bestax-bulma 1.0.13 → 1.1.1

package/dist/index.cjs.js

@@ -594,7 +594,7 @@ const validViewports = [
     'fullhd',
 ];
 const useBulmaClasses = (props) => {
-    const { color, backgroundColor, colorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, radius, shadow, responsive, viewport, ...rest } = props;
+    const { color, backgroundColor, colorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, radius, shadow, responsive, viewport, skeleton, ...rest } = props;
     const bulmaHelperClasses = React.useMemo(() => {
         const classes = [];
         const addClass = (prefix, value, validValues) => {
@@ -681,6 +681,9 @@ const useBulmaClasses = (props) => {
         if (responsive) {
             addClass('is', responsive, ['mobile', 'narrow']);
         }
+        if (skeleton) {
+            classes.push('is-skeleton');
+        }
         return classNames(classes);
     }, [
         color,
@@ -723,6 +726,7 @@ const useBulmaClasses = (props) => {
         shadow,
         responsive,
         viewport,
+        skeleton,
     ]);
     return { bulmaHelperClasses, rest };
 };
@@ -1408,6 +1412,13 @@ const Progress = ({ className, color, size, value, max, children, ...props }) =>
     return (jsxRuntimeExports.jsx("progress", { className: progressClasses, value: value, max: max, ...rest, children: children }));
 };
 
+const Skeleton = ({ className, variant = 'block', lines = 3, children, ...props }) => {
+    if (variant === 'lines') {
+        return (jsxRuntimeExports.jsx("div", { className: classNames('skeleton-lines', className), ...props, children: Array.from({ length: lines }).map((_, i) => (jsxRuntimeExports.jsx("div", {}, i))) }));
+    }
+    return (jsxRuntimeExports.jsx("div", { className: classNames('skeleton-block', className), ...props, children: children }));
+};
+
 const validSubTitleSizes = ['1', '2', '3', '4', '5', '6'];
 const validSubTitleElements = [
     'h1',
@@ -1418,12 +1429,13 @@ const validSubTitleElements = [
     'h6',
     'p',
 ];
-const SubTitle = ({ className, size, as = 'h1', children, ...props }) => {
+const SubTitle = ({ className, size, as = 'h1', hasSkeleton, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const element = validSubTitleElements.includes(as) ? as : 'h1';
     const validSize = size && validSubTitleSizes.includes(size) ? size : undefined;
     const subTitleClasses = classNames('subtitle', className, bulmaHelperClasses, {
         [`is-${validSize}`]: validSize,
+        'has-skeleton': hasSkeleton,
     });
     const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
     return (jsxRuntimeExports.jsx(Tag, { className: subTitleClasses, ...rest, children: children }));
@@ -1531,13 +1543,14 @@ const Thead = ({ className, children, ...props }) => {
 
 const validTitleSizes = ['1', '2', '3', '4', '5', '6'];
 const validTitleElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
-const Title = ({ className, size, isSpaced, as = 'h1', children, ...props }) => {
+const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const element = validTitleElements.includes(as) ? as : 'h1';
     const validSize = size && validTitleSizes.includes(size) ? size : undefined;
     const titleClasses = classNames('title', className, bulmaHelperClasses, {
         [`is-${validSize}`]: validSize,
         'is-spaced': isSpaced,
+        'has-skeleton': hasSkeleton,
     });
     const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
     return (jsxRuntimeExports.jsx(Tag, { className: titleClasses, ...rest, children: children }));
@@ -2071,6 +2084,7 @@ exports.Radio = Radio;
 exports.Radios = Radios;
 exports.Section = Section;
 exports.Select = Select;
+exports.Skeleton = Skeleton;
 exports.SubTitle = SubTitle;
 exports.TabItem = TabItem;
 exports.TabList = TabList;