@chayns-components/core 5.0.0 → 5.0.1

package/lib/cjs/components/multi-action-button/MultiActionButton.js

@@ -18,13 +18,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const MultiActionButton = ({
   backgroundColor,
   className,
-  extendedTimeoutMs = 2000,
+  extendedTimeoutMs = 3000,
+  height = _MultiActionButton2.MultiActionButtonHeight.Medium,
   isCollapsed = false,
   isDisabled = false,
   primaryAction,
   secondaryAction,
   shouldUseFullWidth,
-  height = _MultiActionButton2.MultiActionButtonHeight.Medium,
   width
 }) => {
   const [isExtendedByClick, setIsExtendedByClick] = (0, _react.useState)(false);

package/lib/cjs/components/multi-action-button/MultiActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_environment","_ActionButton","_MultiActionButton","_MultiActionButton2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MultiActionButton","backgroundColor","className","extendedTimeoutMs","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","height","MultiActionButtonHeight","Medium","width","isExtendedByClick","setIsExtendedByClick","useState","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","useRef","isTouch","useIsTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","useCallback","current","window","clearTimeout","setTimeout","expandSecondaryByClick","useEffect","handlePrimaryClick","event","_primaryAction$onClic","payload","action","isExtended","onClick","handleSecondaryClick","_secondaryAction$onCl","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","StyledMultiActionButton","clsx","style","maxWidth","actionType","isShrunk","isSolo","showLabel","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName","_default","exports"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 2000,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    shouldUseFullWidth,\n    height = MultiActionButtonHeight.Medium,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryAction = Boolean(secondaryAction);\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const resolvedWidth = isCollapsed\n        ? height\n        : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            if (autoCollapseTimeoutRef.current) {\n                window.clearTimeout(autoCollapseTimeoutRef.current);\n            }\n        },\n        [],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }\n    }, [isCollapsed]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            secondaryAction.onClick?.(payload);\n            expandSecondaryByClick();\n        },\n        [\n            expandSecondaryByClick,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            secondaryAction,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isCollapsed ||\n            isTouch ||\n            isDisabled ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !isCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [isCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ maxWidth: '100%', width: resolvedWidth }}\n        >\n            <ActionButton\n                action={primaryAction}\n                actionType=\"primary\"\n                backgroundColor={backgroundColor}\n                isCollapsed={isCollapsed}\n                isDisabled={isDisabled}\n                isShrunk={hasSecondaryAction && isSecondaryExpanded}\n                isSolo={!hasSecondaryAction && !isCollapsed}\n                onClick={handlePrimaryClick}\n                showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n                shouldUseContentWidth={shouldUseContentWidth}\n                height={height}\n            />\n            {secondaryAction && (\n                <ActionButton\n                    action={secondaryAction}\n                    actionType=\"secondary\"\n                    backgroundColor={backgroundColor}\n                    isCollapsed={isCollapsed}\n                    isDisabled={isDisabled}\n                    isExpanded={isSecondaryExpanded}\n                    isHidden={isCollapsed}\n                    onClick={handleSecondaryClick}\n                    onMouseEnter={handleSecondaryMouseEnter}\n                    onMouseLeave={handleSecondaryMouseLeave}\n                    showLabel={isSecondaryLabelVisible}\n                    shouldUseContentWidth={shouldUseContentWidth}\n                    height={height}\n                />\n            )}\n        </StyledMultiActionButton>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_environment","_ActionButton","_MultiActionButton","_MultiActionButton2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MultiActionButton","backgroundColor","className","extendedTimeoutMs","height","MultiActionButtonHeight","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","useState","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","useRef","isTouch","useIsTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","useCallback","current","window","clearTimeout","setTimeout","expandSecondaryByClick","useEffect","handlePrimaryClick","event","_primaryAction$onClic","payload","action","isExtended","onClick","handleSecondaryClick","_secondaryAction$onCl","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","StyledMultiActionButton","clsx","style","maxWidth","actionType","isShrunk","isSolo","showLabel","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName","_default","exports"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 3000,\n    height = MultiActionButtonHeight.Medium,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    shouldUseFullWidth,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryAction = Boolean(secondaryAction);\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const resolvedWidth = isCollapsed\n        ? height\n        : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            if (autoCollapseTimeoutRef.current) {\n                window.clearTimeout(autoCollapseTimeoutRef.current);\n            }\n        },\n        [],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }\n    }, [isCollapsed]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            secondaryAction.onClick?.(payload);\n            expandSecondaryByClick();\n        },\n        [\n            expandSecondaryByClick,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            secondaryAction,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isCollapsed ||\n            isTouch ||\n            isDisabled ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !isCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [isCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ maxWidth: '100%', width: resolvedWidth }}\n        >\n            <ActionButton\n                action={primaryAction}\n                actionType=\"primary\"\n                backgroundColor={backgroundColor}\n                isCollapsed={isCollapsed}\n                isDisabled={isDisabled}\n                isShrunk={hasSecondaryAction && isSecondaryExpanded}\n                isSolo={!hasSecondaryAction && !isCollapsed}\n                onClick={handlePrimaryClick}\n                showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n                shouldUseContentWidth={shouldUseContentWidth}\n                height={height}\n            />\n            {secondaryAction && (\n                <ActionButton\n                    action={secondaryAction}\n                    actionType=\"secondary\"\n                    backgroundColor={backgroundColor}\n                    isCollapsed={isCollapsed}\n                    isDisabled={isDisabled}\n                    isExpanded={isSecondaryExpanded}\n                    isHidden={isCollapsed}\n                    onClick={handleSecondaryClick}\n                    onMouseEnter={handleSecondaryMouseEnter}\n                    onMouseLeave={handleSecondaryMouseLeave}\n                    showLabel={isSecondaryLabelVisible}\n                    shouldUseContentWidth={shouldUseContentWidth}\n                    height={height}\n                />\n            )}\n        </StyledMultiActionButton>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/multi-action-button/MultiActionButton.types.js

@@ -25,9 +25,9 @@ let MultiActionButtonHeight = exports.MultiActionButtonHeight = /*#__PURE__*/fun
    */
   MultiActionButtonHeight[MultiActionButtonHeight["Medium"] = 42] = "Medium";
   /**
-   * Large height (52px).
+   * Large height (48px).
    */
-  MultiActionButtonHeight[MultiActionButtonHeight["Large"] = 52] = "Large";
+  MultiActionButtonHeight[MultiActionButtonHeight["Large"] = 48] = "Large";
   return MultiActionButtonHeight;
 }({});
 /**

package/lib/cjs/components/multi-action-button/MultiActionButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (52px).\n     */\n    Large = 52,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactNode;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons.\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Auto-reset timeout for the extended state (ms).\n     * @description Applies only when the secondary action is clicked (not when hovered). After the timeout,\n     * the secondary action collapses automatically.\n     * @default 2000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default 42\n     * @optional\n     */\n    height?: number;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":";;;;;;AAGA;AACA;AACA;AAFA,IAGYA,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AASvC;AACA;AACA;AAFA,IAGYE,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;AAWnC;AACA;AACA;AAiBA;AACA;AACA;AA0BA;AACA;AACA;AA0CA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (48px).\n     */\n    Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactNode;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons. This is useful\n     * when the button is used on different backgrounds or when a specific brand color is needed.\n     * If omitted, the primary color from the theme is used.\n     * @default theme.primary\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Auto-reset timeout for the extended state (ms).\n     * @description Applies only when the secondary action is clicked (not when hovered). After the timeout,\n     * the secondary action collapses automatically.\n     * @default 3000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default MultiActionButtonHeight.Medium\n     * @optional\n     */\n    height?: number;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @default false\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @default false\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":";;;;;;AAGA;AACA;AACA;AAFA,IAGYA,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AASvC;AACA;AACA;AAFA,IAGYE,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;AAWnC;AACA;AACA;AAiBA;AACA;AACA;AA0BA;AACA;AACA;AA0CA;AACA;AACA","ignoreList":[]}

package/lib/cjs/components/multi-action-button/action-button/ActionButton.js

@@ -8,7 +8,6 @@ var _react = require("motion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _Icon = _interopRequireDefault(require("../../icon/Icon"));
 var _ActionButton = require("./ActionButton.styles");
-var _styledComponents = require("styled-components");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const LABEL_GAP = 6;
 const LABEL_TRANSITION = {
@@ -36,10 +35,9 @@ const ActionButton = ({
   height
 }) => {
   var _action$status, _action$status2;
-  const theme = (0, _styledComponents.useTheme)();
   const isPrimary = actionType === 'primary';
   const isSecondary = actionType === 'secondary';
-  const actionColor = action.color ?? theme.text;
+  const actionColor = action.color ?? '#FFFFFF';
   return /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionButton, {
     disabled: isDisabled || action.isDisabled,
     $backgroundColor: backgroundColor,
@@ -63,7 +61,7 @@ const ActionButton = ({
   }, typeof action.icon === 'string' ? /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     icons: [action.icon],
     color: actionColor,
-    size: 18
+    size: height - 24
   }) : action.icon), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, showLabel && /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledLabelWrapper, {

package/lib/cjs/components/multi-action-button/action-button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_ActionButton","_styledComponents","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$status","_action$status2","theme","useTheme","isPrimary","isSecondary","actionColor","color","text","createElement","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","StyledActionContent","StyledIconSlot","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const theme = useTheme() as Theme;\n\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? theme.text;\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={18} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false}>\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_ActionButton","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","createElement","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","StyledActionContent","StyledIconSlot","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false}>\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js

@@ -106,7 +106,7 @@ const StyledActionButton = exports.StyledActionButton = _styledComponents.defaul
     ${({
   $isSecondary
 }) => $isSecondary && (0, _styledComponents.css)`
-            margin-left: 2px;
+            margin-left: 1px;
         `}
 
     /* Fully hide the secondary action when the whole control is collapsed. */

package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        margin-left 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            margin-left: 2px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            margin-left: 0;\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n        opacity: 0.5;\n    }\n\n    &:hover:not(:disabled) {\n        background-color: ${({ $backgroundColor, theme }) =>\n            `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,kBAAA,GAAAH,OAAA;AAAyE,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAiBzE,MAAMkB,KAAK,GAAGA,CAACC,MAAc,EAAEC,MAAc,KAAK,IAAAC,2BAAS;AAC3D;AACA,sBAAsBF,MAAM;AAC5B;AACA;AACA,sBAAsBC,MAAM;AAC5B;AACA;AACA,sBAAsBD,MAAM;AAC5B;AACA,CAAC;AAEM,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,MAA+B;AACxE;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD;AACA;AACA;AACA,cAAc,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,kBAAkB,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,gBAAgB;EAAEC;AAAM,CAAC,KAC5CD,gBAAgB,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,OAAO,KAAI,MAAM;AACpD;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAuB,CAAC,KACzBA,sBAAsB,IACtB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,WAAW;EAAEF;AAAuB,CAAC,KACtCE,WAAW,IACX,CAACF,sBAAsB,IACvB,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOE,KAAK,IACJA,KAAK,CAACC,YAAY,IAClB,IAAAH,qBAAG;AACX;AACA;AACA,qBAAqBE,KAAK,CAACP,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAES,UAAU;EAAED,YAAY;EAAEJ;AAAuB,CAAC,KACnDK,UAAU,IACV,CAACD,YAAY,IACb,CAACJ,sBAAsB,IACvB,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOE,KAAK,IACJA,KAAK,CAACG,SAAS,IACf,CAACH,KAAK,CAACH,sBAAsB,IAC7B,IAAAC,qBAAG;AACX;AACA;AACA,qBAAqBE,KAAK,CAACP,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAOO,KAAK,IACJA,KAAK,CAACI,YAAY,IAClB,CAACJ,KAAK,CAACD,WAAW,IAClB,CAACC,KAAK,CAACH,sBAAsB,IAC7B,IAAAC,qBAAG;AACX;AACA;AACA,qBAAqBE,KAAK,CAACP,OAAO;AAClC,SAAS;AACT;AACA,MAAM,CAAC;EAAEW;AAAa,CAAC,KACfA,YAAY,IACZ,IAAAN,qBAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEO;AAAU,CAAC,KACZA,SAAS,IACT,IAAAP,qBAAG;AACX;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEI;AAAW,CAAC,KACbA,UAAU,IACV,IAAAJ,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOE,KAAK,IACJA,KAAK,CAACE,UAAU,IAChBF,KAAK,CAACC,YAAY,IAClB,IAAAH,qBAAG;AACX,0CAA0CE,KAAK,CAACP,OAAO,GAAG,CAAC;AAC3D,uCAAuCO,KAAK,CAACP,OAAO,GAAG,CAAC;AACxD,SAAS;AACT;AACA,MAAM,CAAC;EAAEW;AAAa,CAAC,KACfA,YAAY,IACZ,IAAAN,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOE,KAAK,IACJA,KAAK,CAACM,OAAO,IACb,IAAAR,qBAAG;AACX,6BAA6BE,KAAK,CAACP,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA,MAAOO,KAAK,IACJA,KAAK,CAACC,YAAY,IAClB,IAAAH,qBAAG;AACX,6BAA6BE,KAAK,CAACP,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEc,WAAW;EAAEC;AAAa,CAAC,KAC5BD,WAAW,KAAKE,8CAA2B,CAACC,KAAK,IACjD,IAAAZ,qBAAG;AACX;AACA;AACA;AACA,6BAA6Bb,KAAK,CAAC,CAAAuB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC,CAAC,KAAI,SAAS,EAAE,CAAAA,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC,CAAC,KAAI,SAAS,CAAC;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EAAEd,gBAAgB;EAAEC;AAAM,CAAC,KAC5C,sBAAsBD,gBAAgB,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,OAAO,KAAI,MAAM,cAAc;AAC5F;AACA,CAAC;AAEM,MAAMe,mBAAmB,GAAArB,OAAA,CAAAqB,mBAAA,GAAGpB,yBAAM,CAACqB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,cAAc,GAAAvB,OAAA,CAAAuB,cAAA,GAAGtB,yBAAM,CAACqB,IAAyB;AAC9D;AACA;AACA;AACA,cAAc,CAAC;EAAEnB;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAEM,MAAMqB,kBAAkB,GAAAxB,OAAA,CAAAwB,kBAAA,GAAG,IAAAvB,yBAAM,EAACwB,aAAM,CAACH,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMI,oBAAoB,GAAA1B,OAAA,CAAA0B,oBAAA,GAAGzB,yBAAM,CAACqB,IAAI;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        margin-left 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            margin-left: 1px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            margin-left: 0;\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n        opacity: 0.5;\n    }\n\n    &:hover:not(:disabled) {\n        background-color: ${({ $backgroundColor, theme }) =>\n            `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/multi-action-button/MultiActionButton.js

@@ -10,13 +10,13 @@ import { MultiActionButtonHeight } from './MultiActionButton.types';
 const MultiActionButton = ({
   backgroundColor,
   className,
-  extendedTimeoutMs = 2000,
+  extendedTimeoutMs = 3000,
+  height = MultiActionButtonHeight.Medium,
   isCollapsed = false,
   isDisabled = false,
   primaryAction,
   secondaryAction,
   shouldUseFullWidth,
-  height = MultiActionButtonHeight.Medium,
   width
 }) => {
   const [isExtendedByClick, setIsExtendedByClick] = useState(false);

package/lib/esm/components/multi-action-button/MultiActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.js","names":["clsx","React","useCallback","useEffect","useRef","useState","useIsTouch","ActionButton","StyledMultiActionButton","MultiActionButtonHeight","MultiActionButton","backgroundColor","className","extendedTimeoutMs","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","height","Medium","width","isExtendedByClick","setIsExtendedByClick","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","isTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","current","window","clearTimeout","setTimeout","expandSecondaryByClick","handlePrimaryClick","event","payload","action","isExtended","onClick","handleSecondaryClick","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","style","maxWidth","actionType","isShrunk","isSolo","showLabel","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 2000,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    shouldUseFullWidth,\n    height = MultiActionButtonHeight.Medium,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryAction = Boolean(secondaryAction);\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const resolvedWidth = isCollapsed\n        ? height\n        : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            if (autoCollapseTimeoutRef.current) {\n                window.clearTimeout(autoCollapseTimeoutRef.current);\n            }\n        },\n        [],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }\n    }, [isCollapsed]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            secondaryAction.onClick?.(payload);\n            expandSecondaryByClick();\n        },\n        [\n            expandSecondaryByClick,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            secondaryAction,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isCollapsed ||\n            isTouch ||\n            isDisabled ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !isCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [isCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ maxWidth: '100%', width: resolvedWidth }}\n        >\n            <ActionButton\n                action={primaryAction}\n                actionType=\"primary\"\n                backgroundColor={backgroundColor}\n                isCollapsed={isCollapsed}\n                isDisabled={isDisabled}\n                isShrunk={hasSecondaryAction && isSecondaryExpanded}\n                isSolo={!hasSecondaryAction && !isCollapsed}\n                onClick={handlePrimaryClick}\n                showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n                shouldUseContentWidth={shouldUseContentWidth}\n                height={height}\n            />\n            {secondaryAction && (\n                <ActionButton\n                    action={secondaryAction}\n                    actionType=\"secondary\"\n                    backgroundColor={backgroundColor}\n                    isCollapsed={isCollapsed}\n                    isDisabled={isDisabled}\n                    isExpanded={isSecondaryExpanded}\n                    isHidden={isCollapsed}\n                    onClick={handleSecondaryClick}\n                    onMouseEnter={handleSecondaryMouseEnter}\n                    onMouseLeave={handleSecondaryMouseLeave}\n                    showLabel={isSecondaryLabelVisible}\n                    shouldUseContentWidth={shouldUseContentWidth}\n                    height={height}\n                />\n            )}\n        </StyledMultiActionButton>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.js","names":["clsx","React","useCallback","useEffect","useRef","useState","useIsTouch","ActionButton","StyledMultiActionButton","MultiActionButtonHeight","MultiActionButton","backgroundColor","className","extendedTimeoutMs","height","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","isTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","current","window","clearTimeout","setTimeout","expandSecondaryByClick","handlePrimaryClick","event","payload","action","isExtended","onClick","handleSecondaryClick","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","style","maxWidth","actionType","isShrunk","isSolo","showLabel","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 3000,\n    height = MultiActionButtonHeight.Medium,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    shouldUseFullWidth,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryAction = Boolean(secondaryAction);\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const resolvedWidth = isCollapsed\n        ? height\n        : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            if (autoCollapseTimeoutRef.current) {\n                window.clearTimeout(autoCollapseTimeoutRef.current);\n            }\n        },\n        [],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }\n    }, [isCollapsed]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            secondaryAction.onClick?.(payload);\n            expandSecondaryByClick();\n        },\n        [\n            expandSecondaryByClick,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            secondaryAction,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isCollapsed ||\n            isTouch ||\n            isDisabled ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !isCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [isCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ maxWidth: '100%', width: resolvedWidth }}\n        >\n            <ActionButton\n                action={primaryAction}\n                actionType=\"primary\"\n                backgroundColor={backgroundColor}\n                isCollapsed={isCollapsed}\n                isDisabled={isDisabled}\n                isShrunk={hasSecondaryAction && isSecondaryExpanded}\n                isSolo={!hasSecondaryAction && !isCollapsed}\n                onClick={handlePrimaryClick}\n                showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n                shouldUseContentWidth={shouldUseContentWidth}\n                height={height}\n            />\n            {secondaryAction && (\n                <ActionButton\n                    action={secondaryAction}\n                    actionType=\"secondary\"\n                    backgroundColor={backgroundColor}\n                    isCollapsed={isCollapsed}\n                    isDisabled={isDisabled}\n                    isExpanded={isSecondaryExpanded}\n                    isHidden={isCollapsed}\n                    onClick={handleSecondaryClick}\n                    onMouseEnter={handleSecondaryMouseEnter}\n                    onMouseLeave={handleSecondaryMouseLeave}\n                    showLabel={isSecondaryLabelVisible}\n                    shouldUseContentWidth={shouldUseContentWidth}\n                    height={height}\n                />\n            )}\n        </StyledMultiActionButton>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/multi-action-button/MultiActionButton.types.js

@@ -20,9 +20,9 @@ export let MultiActionButtonHeight = /*#__PURE__*/function (MultiActionButtonHei
    */
   MultiActionButtonHeight[MultiActionButtonHeight["Medium"] = 42] = "Medium";
   /**
-   * Large height (52px).
+   * Large height (48px).
    */
-  MultiActionButtonHeight[MultiActionButtonHeight["Large"] = 52] = "Large";
+  MultiActionButtonHeight[MultiActionButtonHeight["Large"] = 48] = "Large";
   return MultiActionButtonHeight;
 }({});
 

package/lib/esm/components/multi-action-button/MultiActionButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (52px).\n     */\n    Large = 52,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactNode;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons.\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Auto-reset timeout for the extended state (ms).\n     * @description Applies only when the secondary action is clicked (not when hovered). After the timeout,\n     * the secondary action collapses automatically.\n     * @default 2000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default 42\n     * @optional\n     */\n    height?: number;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":"AAGA;AACA;AACA;AACA,WAAYA,2BAA2B,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;;AASvC;AACA;AACA;AACA,WAAYC,uBAAuB,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;;AAWnC;AACA;AACA;;AAiBA;AACA;AACA;;AA0BA;AACA;AACA;;AA0CA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (48px).\n     */\n    Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactNode;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons. This is useful\n     * when the button is used on different backgrounds or when a specific brand color is needed.\n     * If omitted, the primary color from the theme is used.\n     * @default theme.primary\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Auto-reset timeout for the extended state (ms).\n     * @description Applies only when the secondary action is clicked (not when hovered). After the timeout,\n     * the secondary action collapses automatically.\n     * @default 3000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default MultiActionButtonHeight.Medium\n     * @optional\n     */\n    height?: number;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @default false\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @default false\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":"AAGA;AACA;AACA;AACA,WAAYA,2BAA2B,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;;AASvC;AACA;AACA;AACA,WAAYC,uBAAuB,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;;AAWnC;AACA;AACA;;AAiBA;AACA;AACA;;AA0BA;AACA;AACA;;AA0CA;AACA;AACA","ignoreList":[]}

package/lib/esm/components/multi-action-button/action-button/ActionButton.js

@@ -2,7 +2,6 @@ import { AnimatePresence } from 'motion/react';
 import React from 'react';
 import Icon from '../../icon/Icon';
 import { StyledActionButton, StyledActionContent, StyledIconSlot, StyledLabelWrapper, StyledSecondaryLabel } from './ActionButton.styles';
-import { useTheme } from 'styled-components';
 const LABEL_GAP = 6;
 const LABEL_TRANSITION = {
   duration: 0.3
@@ -28,10 +27,9 @@ const ActionButton = ({
   shouldUseContentWidth,
   height
 }) => {
-  const theme = useTheme();
   const isPrimary = actionType === 'primary';
   const isSecondary = actionType === 'secondary';
-  const actionColor = action.color ?? theme.text;
+  const actionColor = action.color ?? '#FFFFFF';
   return /*#__PURE__*/React.createElement(StyledActionButton, {
     disabled: isDisabled || action.isDisabled,
     $backgroundColor: backgroundColor,
@@ -55,7 +53,7 @@ const ActionButton = ({
   }, typeof action.icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icons: [action.icon],
     color: actionColor,
-    size: 18
+    size: height - 24
   }) : action.icon), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, showLabel && /*#__PURE__*/React.createElement(StyledLabelWrapper, {

package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","useTheme","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","theme","isPrimary","isSecondary","actionColor","color","text","createElement","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const theme = useTheme() as Theme;\n\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? theme.text;\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={18} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false}>\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","createElement","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false}>\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js

@@ -99,7 +99,7 @@ export const StyledActionButton = styled.button`
     ${({
   $isSecondary
 }) => $isSecondary && css`
-            margin-left: 2px;
+            margin-left: 1px;
         `}
 
     /* Fully hide the secondary action when the whole control is collapsed. */

package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColors","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        margin-left 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            margin-left: 2px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            margin-left: 0;\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n        opacity: 0.5;\n    }\n\n    &:hover:not(:disabled) {\n        background-color: ${({ $backgroundColor, theme }) =>\n            `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColors","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        margin-left 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            margin-left: 1px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            margin-left: 0;\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n        opacity: 0.5;\n    }\n\n    &:hover:not(:disabled) {\n        background-color: ${({ $backgroundColor, theme }) =>\n            `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/multi-action-button/MultiActionButton.types.d.ts

@@ -20,9 +20,9 @@ export declare enum MultiActionButtonHeight {
      */
     Medium = 42,
     /**
-     * Large height (52px).
+     * Large height (48px).
      */
-    Large = 52
+    Large = 48
 }
 /**
  * Minimal status configuration for an action.
@@ -118,7 +118,10 @@ export type MultiActionButtonAction = {
 export type MultiActionButtonProps = {
     /**
      * Optional background color for both actions.
-     * @description Overrides the default background color for the action buttons.
+     * @description Overrides the default background color for the action buttons. This is useful
+     * when the button is used on different backgrounds or when a specific brand color is needed.
+     * If omitted, the primary color from the theme is used.
+     * @default theme.primary
      * @optional
      */
     backgroundColor?: string;
@@ -132,20 +135,29 @@ export type MultiActionButtonProps = {
      * Auto-reset timeout for the extended state (ms).
      * @description Applies only when the secondary action is clicked (not when hovered). After the timeout,
      * the secondary action collapses automatically.
-     * @default 2000
+     * @default 3000
      * @optional
      */
     extendedTimeoutMs?: number;
+    /**
+     * Height of the button.
+     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.
+     * @default MultiActionButtonHeight.Medium
+     * @optional
+     */
+    height?: number;
     /**
      * Whether the button is collapsed to a single icon.
      * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.
      * Use this to provide compact states or toolbar modes.
+     * @default false
      * @optional
      */
     isCollapsed?: boolean;
     /**
      * Whether the whole control is disabled.
      * @description Disables interactions for both actions, including hover expansion and clicks.
+     * @default false
      * @optional
      */
     isDisabled?: boolean;
@@ -160,13 +172,6 @@ export type MultiActionButtonProps = {
      * @optional
      */
     secondaryAction?: MultiActionButtonAction;
-    /**
-     * Height of the button.
-     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.
-     * @default 42
-     * @optional
-     */
-    height?: number;
     /**
      * Whether the button should take the full width of its parent.
      * @description When true, the control stretches to 100% width unless `width` is provided.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0",
+    "version": "5.0.1",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3d554c67b058b3b25e2666a34ee543fea2cad6e2"
+    "gitHead": "836fc172829209cb3ad26c1f1ed42d9af11425df"
 }