@allxsmith/bestax-bulma 5.2.1 → 5.3.0

package/dist/index.esm.js

@@ -2522,6 +2522,99 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
 });
 Carousel.displayName = 'Carousel';
 
+function usePrefersReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined' || !window.matchMedia)
+            return undefined;
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        setPrefersReducedMotion(mediaQuery.matches);
+        const handleChange = (event) => {
+            setPrefersReducedMotion(event.matches);
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+    return prefersReducedMotion;
+}
+const Reveal = ({ animation = 'fade-up', delay = 0, duration = 600, threshold = 0.15, once = true, as: Component = 'div', cascade = false, cascadeInterval = 80, className, style, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const classPrefix = useClassPrefix();
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const [node, setNode] = useState(null);
+    const [isMounted, setIsMounted] = useState(false);
+    const [isRevealed, setIsRevealed] = useState(false);
+    const observerThreshold = Number.isFinite(threshold)
+        ? Math.min(Math.max(threshold, 0), 1)
+        : 0.15;
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    useEffect(() => {
+        if (prefersReducedMotion) {
+            setIsRevealed(true);
+            return undefined;
+        }
+        if (typeof IntersectionObserver === 'undefined') {
+            setIsRevealed(true);
+            return undefined;
+        }
+        if (!node)
+            return undefined;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setIsRevealed(true);
+                if (once)
+                    observer.unobserve(node);
+            }
+            else if (!once) {
+                setIsRevealed(false);
+            }
+        }, { threshold: observerThreshold });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [node, prefersReducedMotion, once, observerThreshold]);
+    const isAnimated = isMounted && !prefersReducedMotion;
+    const revealed = !isAnimated || isRevealed;
+    const itemAnimationClasses = prefixedClassNames(classPrefix, {
+        [`reveal-${animation}`]: isAnimated,
+        'is-revealed': revealed,
+    });
+    const combinedClasses = classNames(usePrefixedClassNames('reveal', { 'is-cascade': cascade }), !cascade && itemAnimationClasses, bulmaHelperClasses, className);
+    const wrapperStyle = cascade
+        ? { ...style }
+        : {
+            ...style,
+            transitionDelay: `${delay}ms`,
+            transitionDuration: `${duration}ms`,
+        };
+    const content = cascade
+        ? Children.toArray(children).map((child, index) => {
+            const itemStyle = {
+                transitionDelay: `${delay + index * cascadeInterval}ms`,
+                transitionDuration: `${duration}ms`,
+            };
+            if (isValidElement(child)) {
+                return cloneElement(child, {
+                    key: child.key,
+                    className: classNames(itemAnimationClasses, child.props.className),
+                    style: { ...itemStyle, ...child.props.style },
+                });
+            }
+            return (jsx("span", { className: itemAnimationClasses, style: itemStyle, children: child }, index));
+        })
+        : children;
+    if (typeof Component === 'string') {
+        return React.createElement(Component, {
+            ...rest,
+            ref: setNode,
+            className: combinedClasses,
+            style: wrapperStyle,
+        }, content);
+    }
+    return (jsx("div", { ref: setNode, className: combinedClasses, style: wrapperStyle, children: jsx(Component, { ...rest, children: content }) }));
+};
+
 const Block = ({ className, textColor, bgColor, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
@@ -8111,5 +8204,5 @@ const Section = ({ size, className, children, color, bgColor, textColor, ...prop
     return (jsx("section", { className: sectionClasses, ...rest, children: children }));
 };
 
-export { Autocomplete, Block, Box, Breadcrumb, Button, Buttons, CardWithSubComponents as Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, MessageWithSubComponents as Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, __test_exports__, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, 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 { Autocomplete, Block, Box, Breadcrumb, Button, Buttons, CardWithSubComponents as Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, MessageWithSubComponents as Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, __test_exports__, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, 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