@apple-pie/slice 0.1.60 → 0.2.0

package/dist/esm/chunks/AvatarGroup-Cn33-JkE.mjs

@@ -0,0 +1,78 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import React, { useMemo } from "react";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { A as Avatar, a as AvatarGroupContext, b as AvatarOverflow } from "./Avatar-C4JzdLTW.mjs";
+
+var css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
+
+function flattenChildren(children, parentKey = "") {
+    return React.Children.toArray(children).flatMap(child => {
+        if (!React.isValidElement(child)) return [ child ];
+        const key = `${parentKey}/${child.key}`;
+        return child.type === React.Fragment ? flattenChildren(child.props.children, key) : [ React.cloneElement(child, {
+            key: key
+        }) ];
+    });
+}
+
+const AvatarGroup = React.memo(rawProps => {
+    const props = resolveColorProps(rawProps), {avatars: avatars = [], children: children, limit: limit, onMore: onMore, size: size = 40, lazyLoad: lazyLoad = !1, textSize: textSize = "m", borderWidth: borderWidth, backgroundColor: backgroundColor, overlap: overlap = 8, gap: gap = 0, groupName: groupName, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderWidth: outerBorderWidth = 3, outerBorderColor: outerBorderColor = "var(--core-surface-primary)", margin: margin = 0, onToolTip: onToolTip} = props, divAttributes = __rest(props, [ "avatars", "children", "limit", "onMore", "size", "lazyLoad", "textSize", "borderWidth", "backgroundColor", "overlap", "gap", "groupName", "borderColor", "borderColorHover", "outerBorderWidth", "outerBorderColor", "margin", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), accessibleName = (null == groupName ? void 0 : groupName.trim()) || "people", nativeAttributes = Object.fromEntries(Object.entries(rest).filter(([key]) => "role" !== key && !key.startsWith("aria-"))), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", cssVars = useMemo(() => ({
+        "--ag-gap": `${null != gap ? gap : 0}px`,
+        "--ag-margin": `${null != margin ? margin : 0}px`,
+        "--ag-overlap": (overlap > 0 ? -overlap : 0) + "px"
+    }), [ overlap, gap, margin ]), context = useMemo(() => ({
+        itemClassName: css_avatar,
+        avatarProps: {
+            backgroundColor: backgroundColor,
+            size: size,
+            lazyLoad: lazyLoad,
+            textSize: textSize,
+            borderWidth: borderWidth,
+            borderColor: borderColor,
+            borderColorHover: borderColorHover,
+            outerBorderWidth: outerBorderWidth,
+            outerBorderColor: outerBorderColor,
+            onToolTip: onToolTip
+        }
+    }), [ backgroundColor, size, lazyLoad, textSize, borderWidth, borderColor, borderColorHover, outerBorderWidth, outerBorderColor, onToolTip ]), allChildren = useMemo(() => flattenChildren(children), [ children ]), allAvatars = null != avatars ? avatars : [], itemCount = void 0 !== children ? allChildren.length : allAvatars.length, visibleCount = void 0 !== limit && Number.isFinite(limit) ? Math.max(0, Math.floor(limit)) : itemCount, overflowCount = Math.max(0, itemCount - visibleCount), renderedAvatars = void 0 !== children ? allChildren.slice(0, visibleCount) : allAvatars.slice(0, visibleCount).map((avatar, index) => {
+        var _a;
+        return jsx(Avatar, {
+            name: [ avatar.first, avatar.last ].filter(Boolean).join(" "),
+            email: avatar.email,
+            image: avatar.image,
+            textColor: avatar.textColor,
+            backgroundColor: avatar.backgroundColor
+        }, void 0 !== avatar.id ? `id:${avatar.id}` : `fallback:${null !== (_a = avatar.email) && void 0 !== _a ? _a : ""}:${index}`);
+    }), classNames = useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
+    return jsx("div", Object.assign({
+        id: divId,
+        className: classNames,
+        style: Object.assign(Object.assign({}, divStyle), cssVars)
+    }, nativeAttributes, {
+        role: "group",
+        "aria-label": accessibleName,
+        children: jsxs(AvatarGroupContext.Provider, {
+            value: context,
+            children: [ renderedAvatars, overflowCount > 0 && jsx(AvatarOverflow, {
+                count: overflowCount,
+                onClick: onMore ? () => onMore(void 0 !== children ? {
+                    source: "children",
+                    more: allChildren.slice(visibleCount),
+                    all: [ ...allChildren ]
+                } : {
+                    source: "avatars",
+                    more: allAvatars.slice(visibleCount),
+                    all: [ ...allAvatars ]
+                }) : void 0
+            }) ]
+        })
+    }));
+});
+
+export { AvatarGroup as A };

package/dist/esm/chunks/Badge-DpnuS-Ey.mjs

@@ -0,0 +1,32 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import React from "react";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+var css_badge = "Badge-module_badge__RsuMz flexBox-module_row__z24tF type-module_body-xs-medium__s3KvF";
+
+const Badge = React.memo(rawProps => {
+    const props = resolveColorProps(rawProps), {count: count, variant: variant = "dark", hideZero: hideZero = !0, backgroundColor: backgroundColor, textColor: textColor, className: className, style: style} = props, divAttributes = __rest(props, [ "count", "variant", "hideZero", "backgroundColor", "textColor", "className", "style" ]);
+    if (null == count) return null;
+    if ("number" == typeof count && (!Number.isFinite(count) || hideZero && 0 === count)) return null;
+    if ("string" == typeof count && !count.trim()) return null;
+    const displayCount = "number" == typeof count && count > 99 ? "99+" : String(count), cssVars = {
+        "--badge-color": null != textColor ? textColor : "light" === variant ? "var(--core-text-primary)" : "var(--core-text-light)",
+        "--badge-bg": null != backgroundColor ? backgroundColor : "light" === variant ? "var(--core-badge-secondary)" : "var(--core-badge-primary)"
+    };
+    return jsx("div", Object.assign({
+        className: `${css_badge}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true"
+    }, divAttributes, {
+        children: displayCount
+    }));
+});
+
+export { Badge as B };

package/dist/esm/chunks/Button-BwTo8mSI.mjs

@@ -0,0 +1,315 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import { motion } from "motion/react";
+
+import React, { forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle, useMemo } from "react";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { corners } from "../theme/corners.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { B as Badge } from "./Badge-DpnuS-Ey.mjs";
+
+import { D as Dot } from "./Dot-CG395pS6.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+import { P as ProgressIndicator } from "./ProgressIndicator-CR3pA1Me.mjs";
+
+import { b as buttonStyleDefaults, T as ToolTipType } from "./sharedTypes-DYXO7VNa.mjs";
+
+var css = {
+    button: "Button-module_button__2ZuB7 flexBox-module_row__z24tF",
+    label: "Button-module_label__UJ3Zt",
+    children: "Button-module_children__7Eljd",
+    count: "Button-module_count__DFxVB flexBox-module_row__z24tF",
+    icon: "Button-module_icon__-43u5 flexBox-module_row__z24tF",
+    xs: "Button-module_xs__cF6m0 type-module_body-xs-regular__ZAFft",
+    m: "Button-module_m__DR-gs type-module_body-m-regular__LuQBA",
+    l: "Button-module_l__0E0yI type-module_body-l-regular__lOYbg",
+    xl: "Button-module_xl__nx4V0 type-module_body-xl-regular__pF2kC",
+    s: "Button-module_s__dSKOL type-module_body-s-regular__vRHSP",
+    labelHidden: "Button-module_labelHidden__JlWR-",
+    centerProgress: "Button-module_centerProgress__IduwZ"
+};
+
+const ButtonComponent = forwardRef((rawProps, buttonRef) => {
+    const props = resolveColorProps(rawProps), {children: children, disabled: disabled = !1, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, buttonSize: buttonSize = "m", gap: gap = buttonStyleDefaults.gap, padding: padding, paddingTop: paddingTop, paddingBottom: paddingBottom, variant: variant = "outline", label: label, textSize: textSize = "m", iconRight: iconRight, iconLeft: iconLeft, iconFill: iconFill = !1, count: count = (void 0 === props.count ? void 0 : Number(props.count)), showDot: showDot, tooltip: tooltip, round: round = !1, state: state = "normal", fill: fill = !1, iconSize: iconSize = (void 0 === props.iconSize ? 20 : Number(props.iconSize)), width: width = "min-content", underline: underline = !1, borderRadius: borderRadius, borderWidth: borderWidth, borderColor: borderColor, iconColor: iconColor, backgroundColor: backgroundColor, backgroundColorDisabled: backgroundColorDisabled, textColor: textColor, transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, paddingRight: paddingRight, paddingLeft: paddingLeft, progress: progress = !1, working: working = !1, duration: duration, trigger: trigger = !1, destructive: destructive = !1, link: link, target: target = "_self", onClick: onClick, onToolTip: onToolTip} = props, divAttributes = __rest(props, [ "children", "disabled", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "buttonSize", "gap", "padding", "paddingTop", "paddingBottom", "variant", "label", "textSize", "iconRight", "iconLeft", "iconFill", "count", "showDot", "tooltip", "round", "state", "fill", "iconSize", "width", "underline", "borderRadius", "borderWidth", "borderColor", "iconColor", "backgroundColor", "backgroundColorDisabled", "textColor", "transition", "variants", "initial", "animate", "exit", "paddingRight", "paddingLeft", "progress", "working", "duration", "trigger", "destructive", "link", "target", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorDisabled = backgroundColorDisabled, [hovered, setHovered] = useState(!1), hoveredRef = useRef(!1), focusedRef = useRef(!1), isDisabled = disabled || "disabled" === state, btnState = isDisabled ? "disabled" : hovered || "hover" === state ? "hover" : "normal", [lockedWidth, setLockedWidth] = useState(void 0), [timedWorking, setTimedWorking] = useState(!1), playing = working || timedWorking, timer = useRef(null), inFlight = useRef(!1), wasTriggered = useRef(!1), replayTimedTrigger = useRef(!1), latestAction = useRef({
+        onClick: onClick,
+        isDisabled: isDisabled,
+        working: working
+    });
+    useEffect(() => {
+        latestAction.current = {
+            onClick: onClick,
+            isDisabled: isDisabled,
+            working: working
+        };
+    }, [ onClick, isDisabled, working ]);
+    const ref = useRef(null), lockCurrentWidth = useCallback(() => {
+        ref.current && setLockedWidth(ref.current.offsetWidth);
+    }, []);
+    useEffect(() => {
+        (isDisabled || working) && null !== timer.current && (clearTimeout(timer.current), 
+        timer.current = null, inFlight.current = !1, setTimedWorking(!1));
+    }, [ isDisabled, working ]), useEffect(() => () => {
+        replayTimedTrigger.current = null !== timer.current && wasTriggered.current, null !== timer.current && clearTimeout(timer.current), 
+        timer.current = null, inFlight.current = !1;
+    }, []);
+    const handleClick = useCallback(event => {
+        if (!(isDisabled || working || inFlight.current)) {
+            if (null == onToolTip || onToolTip(null), progress && void 0 !== duration && Number.isFinite(duration) && duration > 0) return null == event || event.preventDefault(), 
+            lockCurrentWidth(), inFlight.current = !0, setTimedWorking(!0), void (timer.current = setTimeout(() => {
+                var _a, _b;
+                timer.current = null, inFlight.current = !1, setTimedWorking(!1), latestAction.current.isDisabled || latestAction.current.working || null === (_b = (_a = latestAction.current).onClick) || void 0 === _b || _b.call(_a, void 0);
+            }, 1e3 * duration));
+            null == onClick || onClick(event), link && !(null == event ? void 0 : event.defaultPrevented) && void 0 !== globalThis.window && globalThis.window.open(link, target);
+        }
+    }, [ isDisabled, working, onToolTip, progress, duration, lockCurrentWidth, onClick, link, target ]);
+    useEffect(() => {
+        working && lockCurrentWidth();
+    }, [ working, lockCurrentWidth ]), useEffect(() => {
+        playing || setLockedWidth(void 0);
+    }, [ playing ]), useImperativeHandle(buttonRef, () => ({
+        triggerClick: () => handleClick(void 0)
+    }), [ handleClick ]), useEffect(() => {
+        !trigger || wasTriggered.current && !replayTimedTrigger.current ? trigger || (wasTriggered.current = !1) : (wasTriggered.current = !0, 
+        replayTimedTrigger.current = !1, handleClick(void 0));
+    }, [ trigger, handleClick ]);
+    const destructiveColor = useCallback(icon => {
+        if (icon) {
+            if ("disabled" === btnState) return "var(--core-text-disabled)";
+            if ("solid" === variant) return "var(--core-text-light)";
+        }
+        return destructive ? "var(--feedback-warning)" : "var(--core-text-primary)";
+    }, [ destructive, variant, btnState ]), solid = useMemo(() => ({
+        border: "0px",
+        iconColor: {
+            normal: iconColor || destructiveColor(!0),
+            hover: iconColor || destructiveColor(!0),
+            disabled: iconColor || destructiveColor(!0)
+        },
+        background: {
+            normal: resolvedBackgroundColor || (destructive ? "var(--feedback-warning)" : "var(--core-button-primary)"),
+            hover: resolvedBackgroundColor || (destructive ? "var(--feedback-warning)" : "var(--core-button-primary)"),
+            disabled: resolvedBackgroundColorDisabled || "var(--core-button-disabled)"
+        },
+        borderColor: {
+            normal: "transparent",
+            hover: "transparent",
+            disabled: "transparent"
+        },
+        color: {
+            normal: textColor || (destructive ? "white" : "var(--core-text-light)"),
+            hover: textColor || (destructive ? "white" : "var(--core-text-light)"),
+            disabled: "var(--core-text-disabled)"
+        }
+    }), [ textColor, destructive, destructiveColor, resolvedBackgroundColor, resolvedBackgroundColorDisabled, iconColor ]), outline = useMemo(() => ({
+        border: "1px",
+        iconColor: {
+            normal: iconColor || destructiveColor(!0),
+            hover: iconColor || destructiveColor(!0),
+            disabled: iconColor || destructiveColor(!0)
+        },
+        background: {
+            normal: resolvedBackgroundColor || "var(--core-surface-primary)",
+            hover: resolvedBackgroundColor || "var(--core-surface-primary)",
+            disabled: resolvedBackgroundColorDisabled || "var(--core-surface-primary)"
+        },
+        borderColor: {
+            normal: destructive ? "var(--feedback-warning)" : "var(--core-outline-primary)",
+            hover: destructive ? "var(--feedback-warning)" : "var(--core-outline-primary)",
+            disabled: "var(--core-outline-primary)"
+        },
+        color: {
+            normal: textColor || (destructive ? "var(--feedback-warning)" : "var(--core-text-primary)"),
+            hover: textColor || (destructive ? "var(--feedback-warning)" : "var(--core-text-special)"),
+            disabled: "var(--core-text-disabled)"
+        }
+    }), [ textColor, destructive, destructiveColor, resolvedBackgroundColor, resolvedBackgroundColorDisabled, iconColor ]), text = useMemo(() => ({
+        border: "1px",
+        iconColor: {
+            normal: iconColor || destructiveColor(!0),
+            hover: iconColor || destructiveColor(!0),
+            disabled: iconColor || "var(--core-text-disabled)"
+        },
+        background: {
+            normal: resolvedBackgroundColor || "transparent",
+            hover: resolvedBackgroundColor || "transparent",
+            disabled: resolvedBackgroundColorDisabled || "transparent"
+        },
+        borderColor: {
+            normal: "transparent",
+            hover: "transparent",
+            disabled: "transparent"
+        },
+        color: {
+            normal: textColor || destructiveColor(!1),
+            hover: textColor || destructiveColor(!1),
+            disabled: "var(--core-text-disabled)"
+        }
+    }), [ destructiveColor, textColor, iconColor, resolvedBackgroundColor, resolvedBackgroundColorDisabled ]), colorStyles = useMemo(() => ({
+        solid: solid,
+        outline: outline,
+        text: text
+    }), [ solid, outline, text ]), resolvedBorderWidth = setStyle(borderWidth, colorStyles[variant].border), resolvedBorderColor = null != borderColor ? borderColor : colorStyles[variant].borderColor[btnState], autoSize = "auto" === buttonSize, height = autoSize ? "auto" : "number" == typeof buttonSize ? Number.isFinite(buttonSize) && buttonSize > 0 ? buttonSize : buttonStyleDefaults.sizes.m : null !== (_a = buttonStyleDefaults.sizes[buttonSize]) && void 0 !== _a ? _a : buttonStyleDefaults.sizes.m;
+    var _a;
+    const resolvedGap = Number.isFinite(gap) ? Math.max(0, gap) : buttonStyleDefaults.gap, hasChildren = null != children, verticalPadding = hasChildren || autoSize ? buttonStyleDefaults.padding.childrenTop : 0, bottomPadding = hasChildren || autoSize ? buttonStyleDefaults.padding.childrenBottom : 0, getSidePadding = side => {
+        if (void 0 !== padding) return;
+        if (round) return 0;
+        const base = "text" === variant ? "var(--spacing-xs)" : buttonStyleDefaults.padding.horizontal;
+        return ("left" === side ? iconLeft : iconRight) ? `calc(${base} - var(--spacing-xs))` : base;
+    }, roundWidth = autoSize ? `calc(${iconSize + verticalPadding + bottomPadding}px + 2 * ${resolvedBorderWidth})` : height, handleMouseEnter = useCallback(event => {
+        null == onMouseEnter || onMouseEnter(event), isDisabled || (hoveredRef.current = !0, 
+        setHovered(!0), tooltip && (null == onToolTip || onToolTip({
+            type: ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            event: event,
+            ref: ref
+        })));
+    }, [ onMouseEnter, isDisabled, tooltip, onToolTip ]), handleMouseLeave = useCallback(event => {
+        null == onMouseLeave || onMouseLeave(event), hoveredRef.current = !1, setHovered(!1), 
+        tooltip && !focusedRef.current && (null == onToolTip || onToolTip(null));
+    }, [ onMouseLeave, tooltip, onToolTip ]), handleFocus = useCallback(event => {
+        null == onFocus || onFocus(event), focusedRef.current = !0, tooltip && !isDisabled && (null == onToolTip || onToolTip({
+            type: ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            ref: ref
+        }));
+    }, [ onFocus, tooltip, isDisabled, onToolTip ]), handleBlur = useCallback(event => {
+        null == onBlur || onBlur(event), focusedRef.current = !1, tooltip && !hoveredRef.current && (null == onToolTip || onToolTip(null));
+    }, [ onBlur, tooltip, onToolTip ]), buttonContent = null != children ? children : label, hasContent = null != buttonContent && !1 !== buttonContent && "" !== buttonContent, setStyle$1 = useCallback(value => void 0 === value ? "unset" : "number" == typeof value ? `${value}px` : value, []), setWidth = useMemo(() => playing && lockedWidth && "min-content" === width ? setStyle$1(lockedWidth) : "fill" === width ? "100%" : width && "fill" !== width ? setStyle$1(width) : "min-content", [ playing, lockedWidth, width, setStyle$1 ]), resolvedPaddingRight = null != paddingRight ? paddingRight : getSidePadding("right"), resolvedPaddingLeft = null != paddingLeft ? paddingLeft : getSidePadding("left"), buttonStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+        color: colorStyles[variant].color[btnState],
+        backgroundColor: fill && !isDisabled ? "var(--core-surface-primary)" : colorStyles[variant].background[btnState],
+        backgroundClip: "padding-box"
+    }, void 0 === resolvedPaddingRight ? {} : {
+        paddingRight: resolvedPaddingRight
+    }), void 0 === resolvedPaddingLeft ? {} : {
+        paddingLeft: resolvedPaddingLeft
+    }), void 0 === paddingTop ? {} : {
+        paddingTop: paddingTop
+    }), void 0 === paddingBottom ? {} : {
+        paddingBottom: paddingBottom
+    }), {
+        borderRadius: null != borderRadius ? borderRadius : corners["corner-round"],
+        height: height,
+        maxHeight: autoSize ? "unset" : height,
+        minHeight: autoSize ? 0 : height,
+        flex: "fill" === width ? 1 : "unset",
+        width: round && "min-content" === width ? roundWidth : setWidth,
+        maxWidth: round && "min-content" === width ? "unset" : setWidth,
+        minWidth: 0,
+        gap: resolvedGap,
+        borderWidth: resolvedBorderWidth,
+        borderStyle: "solid",
+        borderColor: resolvedBorderColor,
+        cursor: isDisabled || playing ? "default" : "pointer",
+        transition: "all var(--motion-water-duration) var(--motion-water) 0s"
+    }), progressColor = useMemo(() => destructive ? "var(--feedback-warning)" : colorStyles[variant].color[btnState], [ destructive, colorStyles, variant, btnState ]), iconDivSize = useMemo(() => round || iconSize ? setStyle$1(iconSize) : "unset", [ round, iconSize, setStyle$1 ]), cssVars = useMemo(() => ({
+        "--ui-button-decoration": underline ? "underline" : "unset",
+        "--ui-button-icon-size": iconDivSize,
+        "--ui-button-gap": `${resolvedGap}px`,
+        "--ui-button-padding": "number" == typeof padding ? `${padding}px` : void 0 !== padding ? padding : round && !autoSize ? "0px" : `${verticalPadding}px 0 ${bottomPadding}px`
+    }), [ underline, iconDivSize, resolvedGap, padding, round, autoSize, verticalPadding, bottomPadding ]);
+    return jsxs(motion.button, Object.assign({
+        id: divId,
+        type: "button",
+        className: `${css.button}  ${css[textSize]}${divClass}`,
+        ref: ref,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: Object.assign(Object.assign(Object.assign({}, divStyle), buttonStyle), cssVars),
+        transition: transition,
+        variants: variants,
+        initial: initial,
+        animate: animate,
+        exit: exit,
+        onClick: e => handleClick(e)
+    }, rest, {
+        disabled: isDisabled || playing,
+        "aria-disabled": isDisabled || playing,
+        "aria-busy": playing,
+        children: [ !playing && iconLeft && jsx("div", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsx(Icon, {
+                name: iconLeft,
+                size: iconSize,
+                strokeColor: colorStyles[variant].iconColor[btnState],
+                pointer: !1,
+                tabIndex: -1,
+                fill: iconFill
+            })
+        }), playing && iconLeft && jsx("div", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsx(ProgressIndicator, {
+                decorative: !0,
+                show: playing,
+                size: iconSize,
+                color: progressColor,
+                inline: !0
+            })
+        }), playing && !iconLeft && !iconRight && jsx("div", {
+            className: css.centerProgress,
+            "aria-hidden": "true",
+            children: jsx(ProgressIndicator, {
+                decorative: !0,
+                show: playing,
+                size: iconSize,
+                color: progressColor,
+                inline: !1
+            })
+        }), hasContent && jsx("div", {
+            className: `${css.label}${hasChildren ? ` ${css.children}` : ""}${!playing || iconLeft || iconRight ? "" : ` ${css.labelHidden}`}`,
+            children: buttonContent
+        }), playing && iconRight && jsx("div", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsx(ProgressIndicator, {
+                decorative: !0,
+                show: playing,
+                size: iconSize,
+                color: progressColor,
+                inline: !0
+            })
+        }), !playing && iconRight && jsx("div", {
+            className: css.icon,
+            "aria-hidden": "true",
+            children: jsx(Icon, {
+                name: iconRight,
+                size: iconSize,
+                strokeColor: colorStyles[variant].iconColor[btnState],
+                pointer: !1,
+                tabIndex: -1,
+                fill: iconFill
+            })
+        }), jsx(Dot, {
+            show: !playing && showDot
+        }), !playing && void 0 !== count && 0 !== count && jsx("div", {
+            className: css.count,
+            children: jsx(Badge, {
+                variant: "light",
+                count: count,
+                "aria-live": "off"
+            })
+        }) ]
+    }));
+});
+
+ButtonComponent.displayName = "Button";
+
+const Button = React.memo(ButtonComponent);
+
+export { Button as B };

package/dist/esm/chunks/ButtonBar-BwHxexlC.mjs

@@ -0,0 +1,111 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import React, { useState, useRef } from "react";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { corners } from "../theme/corners.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+import { T as ToolTipType, b as buttonStyleDefaults } from "./sharedTypes-DYXO7VNa.mjs";
+
+var css_wrapper = "ButtonBar-module_wrapper__FYZ3s", css_button = "ButtonBar-module_button__bMR3h", css_icon = "ButtonBar-module_icon__xEaGM";
+
+const sizes = buttonStyleDefaults.sizes, ButtonBar = React.memo(function(rawProps) {
+    const props = resolveColorProps(rawProps), {buttons: buttons = [], selectedIndex: selectedIndex, defaultSelectedIndex: defaultSelectedIndex = null, toggle: toggle = !1, buttonSize: buttonSize = "m", buttonGap: buttonGap = -2, padding: padding, selectionRadius: selectionRadius = "50%", iconSize: iconSize = 20, borderWidth: borderWidth = 0, borderRadius: borderRadius = corners["corner-round"], borderColor: borderColor = "var(--core-outline-primary)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-outline-primary)", backgroundColorSelected: backgroundColorSelected = "var(--core-outline-primary)", onClick: onClick, onChange: onChange, onToolTip: onToolTip} = props, divAttributes = __rest(props, [ "buttons", "selectedIndex", "defaultSelectedIndex", "toggle", "buttonSize", "buttonGap", "padding", "selectionRadius", "iconSize", "borderWidth", "borderRadius", "borderColor", "backgroundColor", "backgroundColorHover", "backgroundColorSelected", "onClick", "onChange", "onToolTip" ]), {className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "className", "style" ]), [localSelected, setLocalSelected] = useState(defaultSelectedIndex), controlled = void 0 !== selectedIndex, candidate = controlled ? selectedIndex : localSelected, activeIndex = "number" == typeof candidate && Number.isInteger(candidate) && candidate >= 0 && candidate < buttons.length ? candidate : null, cssVars = {
+        "--bb-border-width": `${borderWidth}px`,
+        "--bb-border-radius": setStyle(borderRadius),
+        "--bb-border-color": borderColor,
+        "--bb-bg-color": backgroundColor,
+        "--bb-bg-color-hover": backgroundColorHover,
+        "--bb-bg-color-selected": backgroundColorSelected,
+        "--bb-button-size": (() => {
+            var _a;
+            if ("number" == typeof buttonSize && Number.isFinite(buttonSize) && buttonSize > 0) return `${buttonSize}px`;
+            return `max(0px, calc(${null !== (_a = sizes[buttonSize]) && void 0 !== _a ? _a : sizes.m}px - 2 * var(--spacing-xs) - 2 * var(--bb-border-width)))`;
+        })(),
+        "--bb-icon-size": `${iconSize}px`,
+        "--bb-button-gap": `${buttonGap}px`,
+        "--bb-padding": void 0 === padding ? "var(--spacing-xs)" : setStyle(padding),
+        "--bb-selection-radius": setStyle(selectionRadius)
+    };
+    return jsx("div", Object.assign({
+        role: "group",
+        "aria-label": "Actions",
+        className: `${css_wrapper}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, cssVars), style)
+    }, rest, {
+        children: buttons.map((button, index) => {
+            var _a;
+            return jsx(BarButton, {
+                icon: button.icon,
+                iconSize: iconSize,
+                toolTip: button.tip,
+                pressed: toggle ? activeIndex === index : void 0,
+                onToolTip: onToolTip,
+                onClick: () => {
+                    toggle && activeIndex !== index ? (controlled || setLocalSelected(index), null == onClick || onClick(button), 
+                    null == onChange || onChange(button)) : null == onClick || onClick(button);
+                }
+            }, `button-bar-${null !== (_a = button.action) && void 0 !== _a ? _a : button.icon}-${index}`);
+        })
+    }));
+}), BarButton = React.memo(function({icon: icon, iconSize: iconSize, toolTip: toolTip, pressed: pressed, onClick: onClick, onToolTip: onToolTip}) {
+    const ref = useRef(null), hovered = useRef(!1), focused = useRef(!1), name = toolTip || "Button", showTooltip = event => {
+        null == onToolTip || onToolTip({
+            type: ToolTipType.button,
+            payload: {
+                label: name
+            },
+            ref: ref,
+            event: event
+        });
+    };
+    return jsx("button", {
+        ref: ref,
+        type: "button",
+        className: css_button,
+        "aria-label": name,
+        "aria-pressed": pressed,
+        onMouseEnter: event => {
+            hovered.current = !0, showTooltip(event);
+        },
+        onMouseLeave: () => {
+            hovered.current = !1, focused.current || null == onToolTip || onToolTip(null);
+        },
+        onFocus: () => {
+            focused.current = !0, showTooltip();
+        },
+        onBlur: () => {
+            focused.current = !1, hovered.current || null == onToolTip || onToolTip(null);
+        },
+        onClick: () => {
+            null == onClick || onClick(), null == onToolTip || onToolTip(null);
+        },
+        children: jsx("span", {
+            "aria-hidden": "true",
+            className: css_icon,
+            children: jsx(Icon, {
+                name: icon,
+                size: iconSize,
+                strokeColor: "currentColor",
+                pointer: !1,
+                tabIndex: -1
+            })
+        })
+    });
+});
+
+export { ButtonBar as B };