@allxsmith/bestax-bulma 5.3.0 → 5.4.2

package/dist/index.esm.js

@@ -705,6 +705,213 @@ 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 [prevSrc, setPrevSrc] = useState(src);
+    if (src !== prevSrc) {
+        setPrevSrc(src);
+        setErroredSrc(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);
+                } }, src)), showInitials && (jsx("span", { className: initialsClass, children: resolvedInitials })), showIcon && icon, showDefaultIcon && jsx(DefaultAvatarIcon, {})] }));
+};
+Avatar.displayName = 'Avatar';
+
+function flattenChildren(children, keyPrefix = '') {
+    return React.Children.toArray(children).flatMap(child => {
+        if (!React.isValidElement(child))
+            return [];
+        if (child.type === React.Fragment) {
+            return flattenChildren(child.props.children, keyPrefix + child.key);
+        }
+        const el = child;
+        return [
+            keyPrefix ? React.cloneElement(el, { key: keyPrefix + el.key }) : el,
+        ];
+    });
+}
+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 = flattenChildren(children);
+    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',
@@ -8204,5 +8411,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, 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 };
+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