@allxsmith/bestax-bulma 5.2.1 → 5.4.1

package/dist/index.esm.js

@@ -705,6 +705,195 @@ const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered
     return (jsx("div", { className: columnsClasses, ...rest, children: children }));
 };
 
+const avatarColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'black',
+    'dark',
+    'light',
+    'white',
+];
+const autoAvatarColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+const avatarSizes = [
+    '16x16',
+    '24x24',
+    '32x32',
+    '48x48',
+    '64x64',
+    '96x96',
+    '128x128',
+];
+function getInitialsFromName(name) {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return '';
+    if (words.length === 1) {
+        return Array.from(words[0]).slice(0, 2).join('').toUpperCase();
+    }
+    const first = Array.from(words[0])[0];
+    const last = Array.from(words[words.length - 1])[0];
+    return (first + last).toUpperCase();
+}
+function getAutoColor(name) {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        hash = (hash << 5) - hash + name.charCodeAt(i);
+        hash |= 0;
+    }
+    const index = Math.abs(hash) % autoAvatarColors.length;
+    return autoAvatarColors[index];
+}
+function DefaultAvatarIcon() {
+    return (jsx("svg", { viewBox: "0 0 24 24", width: "60%", height: "60%", "aria-hidden": "true", children: jsx("path", { fill: "currentColor", d: "M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-9 2.24-9 5v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2c0-2.76-4.58-5-9-5Z" }) }));
+}
+const Avatar = ({ className, src, alt, name, initials, icon, size, shape = 'circle', color, as, href, target, rel, imageProps, style, ...props }) => {
+    const [erroredSrc, setErroredSrc] = useState(undefined);
+    const imgRef = useRef(null);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const showImage = !!src && src !== erroredSrc;
+    useEffect(() => {
+        const img = imgRef.current;
+        if (img && img.complete && img.naturalWidth === 0) {
+            setErroredSrc(src);
+        }
+    }, [src]);
+    const resolvedInitials = initials
+        ? initials.toUpperCase()
+        : name
+            ? getInitialsFromName(name)
+            : '';
+    const showInitials = !showImage && !!resolvedInitials;
+    const showIcon = !showImage && !showInitials && !!icon;
+    const showDefaultIcon = !showImage && !showInitials && !showIcon;
+    const resolvedColor = color ?? (name ? getAutoColor(name) : undefined);
+    const isPresetSize = typeof size === 'string' && avatarSizes.includes(size);
+    const sizeStyle = typeof size === 'number'
+        ? { width: size, height: size, fontSize: size / 2.5 }
+        : undefined;
+    const avatarClasses = usePrefixedClassNames('avatar', {
+        [`is-${size}`]: isPresetSize,
+        [`is-${shape}`]: shape,
+        [`is-${resolvedColor}`]: resolvedColor && !showImage && avatarColors.includes(resolvedColor),
+    });
+    const combinedClasses = classNames(avatarClasses, bulmaHelperClasses, className);
+    const initialsClass = usePrefixedClassNames('avatar-initials');
+    const Tag = as ?? (href ? 'a' : 'figure');
+    const isInteractive = Tag === 'a' || Tag === 'button';
+    const isLinkLike = Tag === 'a' || typeof Tag !== 'string';
+    const linkProps = isLinkLike ? { href, target, rel } : {};
+    const a11yProps = showImage
+        ? {}
+        : {
+            ...(isInteractive ? {} : { role: 'img' }),
+            'aria-label': alt || name || 'Avatar',
+        };
+    return (jsxs(Tag, { className: combinedClasses, style: { ...sizeStyle, ...style }, ...linkProps, ...a11yProps, ...rest, children: [showImage && (jsx("img", { ...imageProps, ref: imgRef, src: src, alt: alt || name || '', onError: e => {
+                    imageProps?.onError?.(e);
+                    setErroredSrc(src);
+                } })), showInitials && (jsx("span", { className: initialsClass, children: resolvedInitials })), showIcon && icon, showDefaultIcon && jsx(DefaultAvatarIcon, {})] }));
+};
+Avatar.displayName = 'Avatar';
+
+const Avatars = ({ className, max, size, shape, spacing = 'md', spaced = false, style, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const isPresetSpacing = typeof spacing === 'string';
+    const avatarsClasses = usePrefixedClassNames('avatars', {
+        [`is-spacing-${spacing}`]: isPresetSpacing,
+        'is-spaced': spaced,
+    });
+    const spacingStyle = typeof spacing === 'number'
+        ? { '--bulma-avatars-spacing': `${spacing}px` }
+        : undefined;
+    const surplusClass = usePrefixedClassNames('is-surplus');
+    const combinedClasses = classNames(avatarsClasses, bulmaHelperClasses, className);
+    const childArray = React.Children.toArray(children).filter(React.isValidElement);
+    const maxCount = typeof max === 'number' && Number.isInteger(max) && max >= 0
+        ? max
+        : undefined;
+    const overshoot = maxCount !== undefined ? childArray.length - maxCount : 0;
+    const clamp = maxCount !== undefined && overshoot >= 2;
+    const visibleChildren = clamp ? childArray.slice(0, maxCount) : childArray;
+    const overflowCount = clamp ? overshoot : 0;
+    return (jsxs("div", { className: combinedClasses, style: { ...spacingStyle, ...style }, ...rest, children: [visibleChildren.map(child => React.cloneElement(child, {
+                ...(size !== undefined ? { size } : {}),
+                ...(shape !== undefined ? { shape } : {}),
+            })), overflowCount > 0 && (jsx(Avatar, { initials: `+${overflowCount}`, alt: `${overflowCount} more`, size: size, shape: shape, className: surplusClass }))] }));
+};
+Avatars.displayName = 'Avatars';
+Avatars.Avatar = Avatar;
+
+const badgeColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'black',
+    'dark',
+    'light',
+    'white',
+];
+const Badge = ({ className, badgeClassName, content, max = 99, dot = false, showZero = false, color = 'danger', position = 'top-right', overlap = 'square', pulse = false, invisible = false, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const hasChildren = children != null && children !== false;
+    const isZero = typeof content === 'number' && content === 0;
+    const hasContent = content != null &&
+        content !== false &&
+        content !== true &&
+        content !== '' &&
+        (!isZero || showZero);
+    const shouldRender = dot || hasContent || invisible;
+    const sanitizedMax = Number.isInteger(max) && max >= 0 ? max : 99;
+    const displayValue = useMemo(() => {
+        if (dot || !hasContent)
+            return undefined;
+        if (typeof content === 'number') {
+            return content > sanitizedMax ? `${sanitizedMax}+` : String(content);
+        }
+        return content;
+    }, [dot, hasContent, content, sanitizedMax]);
+    const ariaLabel = typeof displayValue === 'string' || typeof displayValue === 'number'
+        ? String(displayValue)
+        : undefined;
+    const wrapperClass = usePrefixedClassNames('badge-wrapper');
+    const badgeClasses = usePrefixedClassNames('badge', {
+        [`is-${color}`]: !!color && badgeColors.includes(color),
+        [`is-${position}`]: !!position && hasChildren,
+        [`is-overlap-${overlap}`]: !!overlap && hasChildren,
+        'is-standalone': !hasChildren,
+        'is-dot': dot,
+        'is-pulse': pulse,
+        'is-invisible': invisible,
+    });
+    const pillClass = hasChildren
+        ? classNames(badgeClasses, badgeClassName)
+        : classNames(badgeClasses, badgeClassName, bulmaHelperClasses, className);
+    const a11yProps = dot
+        ? { 'aria-hidden': true }
+        : {
+            role: 'status',
+            ...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {}),
+        };
+    const indicator = shouldRender ? (jsx("span", { className: pillClass, ...a11yProps, ...(hasChildren ? {} : rest), children: !dot && displayValue })) : null;
+    if (!hasChildren) {
+        return indicator;
+    }
+    return (jsxs("span", { className: classNames(wrapperClass, bulmaHelperClasses, className), ...rest, children: [children, indicator] }));
+};
+Badge.displayName = 'Badge';
+
 const validBreadcrumbAlignments = ['centered', 'right'];
 const validBreadcrumbSeparators = [
     'arrow',
@@ -2522,6 +2711,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 +8393,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, Avatar, Avatars, Badge, 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