@chayns-components/core 5.0.11 → 5.0.12

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 (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     * Optional reason shown in a tooltip when the action is disabled.\n     * @description Use this to explain why the action is currently unavailable.\n     * @optional\n     */\n    disabledReason?: string;\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     * Timeout in ms before the secondary action collapses after a click.\n     * @description Set to 0 to keep the secondary action extended until the user collapses it.\n     * @example\n     * <MultiActionButton\n     *   primaryAction={primaryAction}\n     *   secondaryAction={secondaryAction}\n     *   extendedTimeoutMs={0}\n     * />\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     * Optional color for the 1px separator line between actions.\n     * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n     * @optional\n     */\n    gapColor?: string;\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;AAgDA;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, ReactElement, 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 React element.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactElement;\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     * Optional reason shown in a tooltip when the action is disabled.\n     * @description Use this to explain why the action is currently unavailable.\n     * @optional\n     */\n    disabledReason?: string;\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     * Timeout in ms before the secondary action collapses after a click.\n     * @description Set to 0 to keep the secondary action extended until the user collapses it.\n     * @example\n     * <MultiActionButton\n     *   primaryAction={primaryAction}\n     *   secondaryAction={secondaryAction}\n     *   extendedTimeoutMs={0}\n     * />\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     * Optional color for the 1px separator line between actions.\n     * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n     * @optional\n     */\n    gapColor?: string;\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;AAgDA;AACA;AACA","ignoreList":[]}

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

@@ -43,12 +43,13 @@ const ActionButton = ({
   const isActionDisabled = isDisabled || Boolean(action.isDisabled);
   const disabledReason = (_action$disabledReaso = action.disabledReason) === null || _action$disabledReaso === void 0 ? void 0 : _action$disabledReaso.trim();
   const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;
+  const iconSize = height - 24;
   const actionContent = /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionContent, null, /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledIconSlot, {
     $height: height
   }, typeof action.icon === 'string' ? /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     icons: [action.icon],
     color: actionColor,
-    size: height - 24
+    size: iconSize
   }) : 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","_Tooltip","_ActionButton","_popup","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$disabledReaso","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","actionContent","createElement","StyledActionContent","StyledIconSlot","$height","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","PopupAlignment","BottomRight","item","text","maxItemWidth","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 Tooltip from '../../tooltip/Tooltip';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\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    const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n    const disabledReason = action.disabledReason?.trim();\n    const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n\n    const actionContent = (\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    );\n\n    return (\n        <StyledActionButton\n            aria-disabled={isActionDisabled}\n            disabled={isActionDisabled && !shouldShowDisabledReason}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isInteractionDisabled={isActionDisabled}\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            {shouldShowDisabledReason && disabledReason ? (\n                <Tooltip\n                    alignment={PopupAlignment.BottomRight}\n                    item={{ text: disabledReason }}\n                    maxItemWidth={400}\n                >\n                    {actionContent}\n                </Tooltip>\n            ) : (\n                actionContent\n            )}\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","_Tooltip","_ActionButton","_popup","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$disabledReaso","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","actionContent","createElement","StyledActionContent","StyledIconSlot","$height","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","PopupAlignment","BottomRight","item","text","maxItemWidth","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 Tooltip from '../../tooltip/Tooltip';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\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    const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n    const disabledReason = action.disabledReason?.trim();\n    const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n    const iconSize = height - 24;\n\n    const actionContent = (\n        <StyledActionContent>\n            <StyledIconSlot $height={height}>\n                {typeof action.icon === 'string' ? (\n                    <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\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    );\n\n    return (\n        <StyledActionButton\n            aria-disabled={isActionDisabled}\n            disabled={isActionDisabled && !shouldShowDisabledReason}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isInteractionDisabled={isActionDisabled}\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            {shouldShowDisabledReason && disabledReason ? (\n                <Tooltip\n                    alignment={PopupAlignment.BottomRight}\n                    item={{ text: disabledReason }}\n                    maxItemWidth={400}\n                >\n                    {actionContent}\n                </Tooltip>\n            ) : (\n                actionContent\n            )}\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/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 (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     * Optional reason shown in a tooltip when the action is disabled.\n     * @description Use this to explain why the action is currently unavailable.\n     * @optional\n     */\n    disabledReason?: string;\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     * Timeout in ms before the secondary action collapses after a click.\n     * @description Set to 0 to keep the secondary action extended until the user collapses it.\n     * @example\n     * <MultiActionButton\n     *   primaryAction={primaryAction}\n     *   secondaryAction={secondaryAction}\n     *   extendedTimeoutMs={0}\n     * />\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     * Optional color for the 1px separator line between actions.\n     * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n     * @optional\n     */\n    gapColor?: string;\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;;AAgDA;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, ReactElement, 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 React element.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactElement;\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     * Optional reason shown in a tooltip when the action is disabled.\n     * @description Use this to explain why the action is currently unavailable.\n     * @optional\n     */\n    disabledReason?: string;\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     * Timeout in ms before the secondary action collapses after a click.\n     * @description Set to 0 to keep the secondary action extended until the user collapses it.\n     * @example\n     * <MultiActionButton\n     *   primaryAction={primaryAction}\n     *   secondaryAction={secondaryAction}\n     *   extendedTimeoutMs={0}\n     * />\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     * Optional color for the 1px separator line between actions.\n     * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n     * @optional\n     */\n    gapColor?: string;\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;;AAgDA;AACA;AACA","ignoreList":[]}

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

@@ -35,12 +35,13 @@ const ActionButton = ({
   const isActionDisabled = isDisabled || Boolean(action.isDisabled);
   const disabledReason = action.disabledReason?.trim();
   const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;
+  const iconSize = height - 24;
   const actionContent = /*#__PURE__*/React.createElement(StyledActionContent, null, /*#__PURE__*/React.createElement(StyledIconSlot, {
     $height: height
   }, typeof action.icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icons: [action.icon],
     color: actionColor,
-    size: height - 24
+    size: iconSize
   }) : 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","Tooltip","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","PopupAlignment","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","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","actionContent","createElement","$height","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","BottomRight","item","text","maxItemWidth","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 Tooltip from '../../tooltip/Tooltip';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\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    const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n    const disabledReason = action.disabledReason?.trim();\n    const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n\n    const actionContent = (\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    );\n\n    return (\n        <StyledActionButton\n            aria-disabled={isActionDisabled}\n            disabled={isActionDisabled && !shouldShowDisabledReason}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isInteractionDisabled={isActionDisabled}\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            {shouldShowDisabledReason && disabledReason ? (\n                <Tooltip\n                    alignment={PopupAlignment.BottomRight}\n                    item={{ text: disabledReason }}\n                    maxItemWidth={400}\n                >\n                    {actionContent}\n                </Tooltip>\n            ) : (\n                actionContent\n            )}\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","Tooltip","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","PopupAlignment","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","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","actionContent","createElement","$height","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","BottomRight","item","text","maxItemWidth","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 Tooltip from '../../tooltip/Tooltip';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\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    const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n    const disabledReason = action.disabledReason?.trim();\n    const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n    const iconSize = height - 24;\n\n    const actionContent = (\n        <StyledActionContent>\n            <StyledIconSlot $height={height}>\n                {typeof action.icon === 'string' ? (\n                    <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\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    );\n\n    return (\n        <StyledActionButton\n            aria-disabled={isActionDisabled}\n            disabled={isActionDisabled && !shouldShowDisabledReason}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isInteractionDisabled={isActionDisabled}\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            {shouldShowDisabledReason && disabledReason ? (\n                <Tooltip\n                    alignment={PopupAlignment.BottomRight}\n                    item={{ text: disabledReason }}\n                    maxItemWidth={400}\n                >\n                    {actionContent}\n                </Tooltip>\n            ) : (\n                actionContent\n            )}\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,MAA0B,OAAO;AAC7C,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,OAAO,MAAM,uBAAuB;AAC3C,SACIC,kBAAkB,EAClBC,mBAAmB,EACnBC,cAAc,EACdC,kBAAkB,EAClBC,oBAAoB,QACjB,uBAAuB;AAE9B,SAASC,cAAc,QAAQ,sBAAsB;AAErD,MAAMC,SAAS,GAAG,CAAC;AACnB,MAAMC,gBAAgB,GAAG;EAAEC,QAAQ,EAAE;AAAI,CAAC;AAoB1C;AACA;AACA;AACA;AACA,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,MAAM;EACNC,UAAU;EACVC,eAAe;EACfC,WAAW;EACXC,UAAU;EACVC,UAAU;EACVC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,YAAY;EACZC,YAAY;EACZC,SAAS;EACTC,qBAAqB;EACrBC;AACJ,CAAC,KAAK;EACF,MAAMC,SAAS,GAAGd,UAAU,KAAK,SAAS;EAC1C,MAAMe,WAAW,GAAGf,UAAU,KAAK,WAAW;EAC9C,MAAMgB,WAAW,GAAGjB,MAAM,CAACkB,KAAK,IAAI,SAAS;EAC7C,MAAMC,gBAAgB,GAAGf,UAAU,IAAIgB,OAAO,CAACpB,MAAM,CAACI,UAAU,CAAC;EACjE,MAAMiB,cAAc,GAAGrB,MAAM,CAACqB,cAAc,EAAEC,IAAI,CAAC,CAAC;EACpD,MAAMC,wBAAwB,GAAGH,OAAO,CAACC,cAAc,CAAC,IAAIF,gBAAgB;EAC5E,MAAMK,QAAQ,GAAGV,MAAM,GAAG,EAAE;EAE5B,MAAMW,aAAa,gBACftC,KAAA,CAAAuC,aAAA,CAACnC,mBAAmB,qBAChBJ,KAAA,CAAAuC,aAAA,CAAClC,cAAc;IAACmC,OAAO,EAAEb;EAAO,GAC3B,OAAOd,MAAM,CAAC4B,IAAI,KAAK,QAAQ,gBAC5BzC,KAAA,CAAAuC,aAAA,CAACtC,IAAI;IAACyC,KAAK,EAAE,CAAC7B,MAAM,CAAC4B,IAAI,CAAE;IAACV,KAAK,EAAED,WAAY;IAACa,IAAI,EAAEN;EAAS,CAAE,CAAC,GAElExB,MAAM,CAAC4B,IAEC,CAAC,eACjBzC,KAAA,CAAAuC,aAAA,CAACxC,eAAe;IAAC6C,OAAO,EAAE;EAAM,GAE3BnB,SAAS,iBACNzB,KAAA,CAAAuC,aAAA,CAACjC,kBAAkB;IACfuC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE,MAAM;MAAEC,UAAU,EAAEvC;IAAU,CAAE;IAC9DwC,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAE,CAAE;IAC9CJ,OAAO,EAAE;MAAEE,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAE,CAAE;IACjDE,UAAU,EAAExC;EAAiB,gBAE7BV,KAAA,CAAAuC,aAAA,CAAChC,oBAAoB;IAAC4C,KAAK,EAAE;MAAEpB,KAAK,EAAED;IAAY;EAAE,GAC/CjB,MAAM,CAACuC,KACU,CACN,CAEX,CACA,CACxB;EAED,oBACIpD,KAAA,CAAAuC,aAAA,CAACpC,kBAAkB;IACf,iBAAe6B,gBAAiB;IAChCqB,QAAQ,EAAErB,gBAAgB,IAAI,CAACI,wBAAyB;IACxDkB,gBAAgB,EAAEvC,eAAgB;IAClCwC,YAAY,EAAEvC,WAAY;IAC1BwC,WAAW,EAAE3B,WAAW,GAAGX,UAAU,GAAGuC,SAAU;IAClDC,sBAAsB,EAAE1B,gBAAiB;IACzC2B,SAAS,EAAE9B,WAAW,GAAGV,QAAQ,GAAGsC,SAAU;IAC9CG,UAAU,EAAEhC,SAAU;IACtBiC,YAAY,EAAEhC,WAAY;IAC1BiC,SAAS,EAAElC,SAAS,GAAGR,QAAQ,GAAGqC,SAAU;IAC5CM,OAAO,EAAEnC,SAAS,GAAGP,MAAM,GAAGoC,SAAU;IACxCO,YAAY,EAAEnD,MAAM,CAACoD,MAAM,EAAEC,WAAY;IACzC1B,OAAO,EAAEb,MAAO;IAChBwC,WAAW,EAAEtD,MAAM,CAACoD,MAAM,EAAEG,IAAK;IACjCC,sBAAsB,EAAE3C,qBAAsB;IAC9CJ,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA,YAAa;IAC3B4C,IAAI,EAAC;EAAQ,GAEZhC,wBAAwB,IAAIF,cAAc,gBACvClC,KAAA,CAAAuC,aAAA,CAACrC,OAAO;IACJoE,SAAS,EAAE9D,cAAc,CAAC+D,WAAY;IACtCC,IAAI,EAAE;MAAEC,IAAI,EAAEvC;IAAe,CAAE;IAC/BwC,YAAY,EAAE;EAAI,GAEjBpC,aACI,CAAC,GAEVA,aAEY,CAAC;AAE7B,CAAC;AAED1B,YAAY,CAAC+D,WAAW,GAAG,cAAc;AAEzC,eAAe/D,YAAY","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { MouseEvent, ReactElement, ReactNode } from 'react';
 import type { MotionValue } from 'motion/react';
 /**
  * Supported status types for the multi action button.
@@ -81,10 +81,10 @@ export type MultiActionButtonAction = {
     color?: string;
     /**
      * The icon for the action.
-     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.
+     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.
      * The icon is always rendered inside a fixed-size slot to keep alignment stable.
      */
-    icon: string | ReactNode;
+    icon: string | ReactElement;
     /**
      * Whether the action is disabled.
      * @description Disabled actions do not respond to hover or click and are visually dimmed.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.11",
+    "version": "5.0.12",
     "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": "d605c7a868969b8199004f67ba6284a8827e6dd5"
+    "gitHead": "bd5ba339e33023882c8cfb46b94b553674fdb0be"
 }