@allxsmith/bestax-bulma 1.0.13 → 1.1.1

package/dist/index.esm.js

@@ -592,7 +592,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 = useMemo(() => {
         const classes = [];
         const addClass = (prefix, value, validValues) => {
@@ -679,6 +679,9 @@ const useBulmaClasses = (props) => {
         if (responsive) {
             addClass('is', responsive, ['mobile', 'narrow']);
         }
+        if (skeleton) {
+            classes.push('is-skeleton');
+        }
         return classNames(classes);
     }, [
         color,
@@ -721,6 +724,7 @@ const useBulmaClasses = (props) => {
         shadow,
         responsive,
         viewport,
+        skeleton,
     ]);
     return { bulmaHelperClasses, rest };
 };
@@ -1406,6 +1410,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',
@@ -1416,12 +1427,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 }));
@@ -1529,13 +1541,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 }));
@@ -1993,5 +2006,5 @@ const Section = ({ size, className, children, ...props }) => {
     return (jsxRuntimeExports.jsx("section", { className: sectionClasses, ...rest, children: children }));
 };
 
-export { Block, Box, Breadcrumb, Button, Buttons, Card, Cell, Checkbox, Checkboxes, Column, Columns, Container, Content, Control, Delete, Dropdown, DropdownDivider, DropdownItem, Field, FieldBody, FieldLabel, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, Level, LevelItem, LevelLeft, LevelRight, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarMenu, NavbarStart, Notification, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Progress, Radio, Radios, Section, Select, SubTitle, TabItem, TabList, Table, Tabs, Tag, Tags, Tbody, Td, TextArea, Tfoot, Th, Thead, Title, Tr, __test_exports__, classNames, isBrowser, useBulmaClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFontFamilies, validJustifyContents, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Block, Box, Breadcrumb, Button, Buttons, Card, Cell, Checkbox, Checkboxes, Column, Columns, Container, Content, Control, Delete, Dropdown, DropdownDivider, DropdownItem, Field, FieldBody, FieldLabel, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, Level, LevelItem, LevelLeft, LevelRight, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarMenu, NavbarStart, Notification, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Progress, Radio, Radios, Section, Select, Skeleton, SubTitle, TabItem, TabList, Table, Tabs, Tag, Tags, Tbody, Td, TextArea, Tfoot, Th, Thead, Title, Tr, __test_exports__, classNames, isBrowser, useBulmaClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFontFamilies, validJustifyContents, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map