@chayns-components/core 5.0.0-beta.1408 → 5.0.0-beta.1409

package/lib/cjs/components/icon/Icon.styles.js

@@ -67,7 +67,6 @@ const StyledUnicodeIcon = exports.StyledUnicodeIcon = _styledComponents.default.
         content: ${({
   $icon
 }) => `"\\${$icon}"`};
-        font-family: 'Font Awesome 6 Pro', Fontawesome !important;
     }
 `;
 //# sourceMappingURL=Icon.styles.js.map

package/lib/cjs/components/icon/Icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","css","StyledUnicodeIcon","headline","$icon"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,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;AAUzC,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASM,MAAMC,UAAU,GAAAN,OAAA,CAAAM,UAAA,GAAGL,yBAAM,CAACd,CAAkB;AACnD,aAAa,CAAC;EAAEoB,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAER;AAAM,CAAC,KACnBQ,SAAS,KAAKR,KAAK,IACnB,IAAAS,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,iBAAiB,GAAAf,OAAA,CAAAe,iBAAA,GAAGd,yBAAM,CAACd,CAAyB;AACjE;AACA;AACA;AACA,aAAa,CAAC;EAAEqB;AAA8B,CAAC,KAAKA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACQ,QAAQ;AACrF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,GAAG;AAChD;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","css","StyledUnicodeIcon","headline","$icon"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,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;AAUzC,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASM,MAAMC,UAAU,GAAAN,OAAA,CAAAM,UAAA,GAAGL,yBAAM,CAACd,CAAkB;AACnD,aAAa,CAAC;EAAEoB,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAER;AAAM,CAAC,KACnBQ,SAAS,KAAKR,KAAK,IACnB,IAAAS,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,iBAAiB,GAAAf,OAAA,CAAAe,iBAAA,GAAGd,yBAAM,CAACd,CAAyB;AACjE;AACA;AACA;AACA,aAAa,CAAC;EAAEqB;AAA8B,CAAC,KAAKA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACQ,QAAQ;AACrF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,GAAG;AAChD;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _environment = require("../../utils/environment");
+var _MultiActionButton = require("./MultiActionButton.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MultiActionButton = ({
+  className,
+  isDisabled,
+  primaryAction,
+  secondaryAction,
+  extendedTimeoutMs = 2000,
+  width,
+  isCollapsed = false
+}) => {
+  var _primaryAction$status, _primaryAction$status2, _secondaryAction$stat, _secondaryAction$stat2;
+  const [isSecondaryExtended, setIsSecondaryExtended] = (0, _react2.useState)(false);
+  const [isSecondaryHovered, setIsSecondaryHovered] = (0, _react2.useState)(false);
+  const [isExtendedFromClick, setIsExtendedFromClick] = (0, _react2.useState)(false);
+  const timeoutRef = (0, _react2.useRef)(null);
+  const isTouch = (0, _environment.useIsTouch)();
+  const hasSecondaryAction = Boolean(secondaryAction);
+  const theme = (0, _styledComponents.useTheme)();
+  const defaultColor = (theme === null || theme === void 0 ? void 0 : theme.text) ?? '#fff';
+
+  // Ensure the extended state resets after the timeout window (click-only).
+  // Reset the auto-collapse timeout after click-based extension.
+  const resetTimeout = (0, _react2.useCallback)(() => {
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = window.setTimeout(() => {
+      setIsSecondaryExtended(false);
+      setIsExtendedFromClick(false);
+    }, extendedTimeoutMs);
+  }, [extendedTimeoutMs]);
+
+  // Extend the secondary action due to a click.
+  const extendSecondaryByClick = (0, _react2.useCallback)(() => {
+    setIsSecondaryExtended(true);
+    setIsExtendedFromClick(true);
+    resetTimeout();
+  }, [resetTimeout]);
+
+  // Cleanup timers on unmount.
+  (0, _react2.useEffect)(() => () => {
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+    }
+  }, []);
+
+  // Collapsing the whole button should also clear any secondary expansion.
+  (0, _react2.useEffect)(() => {
+    if (isCollapsed) {
+      setIsSecondaryExtended(false);
+      setIsExtendedFromClick(false);
+    }
+  }, [isCollapsed]);
+
+  // Primary action click handler.
+  // Primary action click handler.
+  const handlePrimaryClick = (0, _react2.useCallback)(event => {
+    var _primaryAction$onClic;
+    if (isDisabled || primaryAction.isDisabled) {
+      return;
+    }
+    const payload = {
+      action: 'primary',
+      isExtended: isSecondaryExtended,
+      isTouch,
+      event
+    };
+    (_primaryAction$onClic = primaryAction.onClick) === null || _primaryAction$onClic === void 0 || _primaryAction$onClic.call(primaryAction, payload);
+  }, [isDisabled, primaryAction, isSecondaryExtended, isTouch]);
+
+  // Secondary action click handler.
+  const handleSecondaryClick = (0, _react2.useCallback)(event => {
+    var _secondaryAction$onCl;
+    if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {
+      return;
+    }
+    const payload = {
+      action: 'secondary',
+      isExtended: isSecondaryExtended,
+      isTouch,
+      event
+    };
+    (_secondaryAction$onCl = secondaryAction.onClick) === null || _secondaryAction$onCl === void 0 || _secondaryAction$onCl.call(secondaryAction, payload);
+    extendSecondaryByClick();
+  }, [extendSecondaryByClick, isCollapsed, isDisabled, isSecondaryExtended, isTouch, secondaryAction]);
+
+  // Hovering the secondary action should extend it immediately on desktop.
+  const handleSecondaryMouseEnter = (0, _react2.useCallback)(() => {
+    if (!secondaryAction || isCollapsed || isTouch || isDisabled || secondaryAction.isDisabled) {
+      return;
+    }
+    setIsSecondaryHovered(true);
+    if (!isExtendedFromClick) {
+      setIsSecondaryExtended(true);
+    }
+  }, [isCollapsed, isDisabled, isExtendedFromClick, isTouch, secondaryAction]);
+
+  // Leaving the secondary action should collapse it immediately on desktop.
+  const handleSecondaryMouseLeave = (0, _react2.useCallback)(() => {
+    if (isTouch) {
+      return;
+    }
+    setIsSecondaryHovered(false);
+    if (!isExtendedFromClick && !isCollapsed) {
+      setIsSecondaryExtended(false);
+    }
+  }, [isCollapsed, isExtendedFromClick, isTouch]);
+
+  // Secondary label is shown whenever the button is extended or hovered on desktop.
+  const shouldShowSecondaryLabel = isSecondaryExtended || !isTouch && isSecondaryHovered;
+  return /*#__PURE__*/_react2.default.createElement(_MultiActionButton.StyledMultiActionButton, {
+    className: (0, _clsx.default)('beta-chayns-multi-action', className),
+    style: {
+      width: isCollapsed ? 42 : width ?? '100%'
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_MultiActionButton.StyledActionButton, {
+    disabled: isDisabled || primaryAction.isDisabled,
+    $isPrimary: hasSecondaryAction,
+    $isCollapsed: isCollapsed,
+    $isShrunk: hasSecondaryAction && isSecondaryExtended,
+    $isSolo: !hasSecondaryAction && !isCollapsed,
+    $statusType: (_primaryAction$status = primaryAction.status) === null || _primaryAction$status === void 0 ? void 0 : _primaryAction$status.type,
+    $pulseColor: (_primaryAction$status2 = primaryAction.status) === null || _primaryAction$status2 === void 0 ? void 0 : _primaryAction$status2.pulseColor,
+    onClick: handlePrimaryClick,
+    type: "button"
+  }, /*#__PURE__*/_react2.default.createElement(_MultiActionButton.StyledActionContent, null, /*#__PURE__*/_react2.default.createElement(_MultiActionButton.StyledIconSlot, null, typeof primaryAction.icon === 'string' ? /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+    icons: [primaryAction.icon],
+    color: primaryAction.color ?? defaultColor,
+    size: 18
+  }) : primaryAction.icon), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    initial: false
+  }, (!hasSecondaryAction || !isSecondaryExtended) && !isCollapsed && /*#__PURE__*/_react2.default.createElement(_react.motion.span, {
+    animate: {
+      opacity: 1,
+      width: 'auto'
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "primary-label",
+    style: {
+      flex: '1 1 auto',
+      minWidth: 0,
+      overflow: 'hidden',
+      textAlign: 'left'
+    },
+    transition: {
+      duration: 0.3
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_MultiActionButton.StyledPrimaryLabel, {
+    style: {
+      color: primaryAction.color ?? defaultColor
+    }
+  }, primaryAction.label))))), secondaryAction && /*#__PURE__*/_react2.default.createElement(_MultiActionButton.StyledActionButton, {
+    disabled: isDisabled || secondaryAction.isDisabled,
+    $isSecondary: true,
+    $isExpanded: isSecondaryExtended,
+    $isHidden: isCollapsed,
+    $statusType: (_secondaryAction$stat = secondaryAction.status) === null || _secondaryAction$stat === void 0 ? void 0 : _secondaryAction$stat.type,
+    $pulseColor: (_secondaryAction$stat2 = secondaryAction.status) === null || _secondaryAction$stat2 === void 0 ? void 0 : _secondaryAction$stat2.pulseColor,
+    onClick: handleSecondaryClick,
+    onMouseEnter: handleSecondaryMouseEnter,
+    onMouseLeave: handleSecondaryMouseLeave,
+    type: "button"
+  }, /*#__PURE__*/_react2.default.createElement(_MultiActionButton.StyledActionContent, null, /*#__PURE__*/_react2.default.createElement(_MultiActionButton.StyledIconSlot, null, typeof secondaryAction.icon === 'string' ? /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+    icons: [secondaryAction.icon],
+    color: secondaryAction.color ?? defaultColor,
+    size: 18
+  }) : secondaryAction.icon), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    initial: false
+  }, shouldShowSecondaryLabel && secondaryAction.label && /*#__PURE__*/_react2.default.createElement(_react.motion.span, {
+    animate: {
+      opacity: 1,
+      width: 'auto'
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "secondary-label",
+    style: {
+      flex: '1 1 auto',
+      minWidth: 0,
+      overflow: 'hidden',
+      textAlign: 'left'
+    },
+    transition: {
+      duration: 0.3
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_MultiActionButton.StyledSecondaryLabel, {
+    style: {
+      color: secondaryAction.color ?? defaultColor
+    }
+  }, secondaryAction.label))))));
+};
+MultiActionButton.displayName = 'MultiActionButton';
+var _default = exports.default = MultiActionButton;
+//# sourceMappingURL=MultiActionButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiActionButton.js","names":["_clsx","_interopRequireDefault","require","_react","_react2","_interopRequireWildcard","_styledComponents","_Icon","_environment","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MultiActionButton","className","isDisabled","primaryAction","secondaryAction","extendedTimeoutMs","width","isCollapsed","_primaryAction$status","_primaryAction$status2","_secondaryAction$stat","_secondaryAction$stat2","isSecondaryExtended","setIsSecondaryExtended","useState","isSecondaryHovered","setIsSecondaryHovered","isExtendedFromClick","setIsExtendedFromClick","timeoutRef","useRef","isTouch","useIsTouch","hasSecondaryAction","Boolean","theme","useTheme","defaultColor","text","resetTimeout","useCallback","current","window","clearTimeout","setTimeout","extendSecondaryByClick","useEffect","handlePrimaryClick","event","_primaryAction$onClic","payload","action","isExtended","onClick","handleSecondaryClick","_secondaryAction$onCl","handleSecondaryMouseEnter","handleSecondaryMouseLeave","shouldShowSecondaryLabel","createElement","StyledMultiActionButton","clsx","style","StyledActionButton","disabled","$isPrimary","$isCollapsed","$isShrunk","$isSolo","$statusType","status","type","$pulseColor","pulseColor","StyledActionContent","StyledIconSlot","icon","icons","color","size","AnimatePresence","initial","motion","span","animate","opacity","exit","key","flex","minWidth","overflow","textAlign","transition","duration","StyledPrimaryLabel","label","$isSecondary","$isExpanded","$isHidden","onMouseEnter","onMouseLeave","StyledSecondaryLabel","displayName","_default","exports"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport { useIsTouch } from '../../utils/environment';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledMultiActionButton,\n    StyledPrimaryLabel,\n    StyledSecondaryLabel,\n} from './MultiActionButton.styles';\nimport type {\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    className,\n    isDisabled,\n    primaryAction,\n    secondaryAction,\n    extendedTimeoutMs = 2000,\n    width,\n    isCollapsed = false,\n}) => {\n    const [isSecondaryExtended, setIsSecondaryExtended] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n    const [isExtendedFromClick, setIsExtendedFromClick] = useState(false);\n\n    const timeoutRef = useRef<number | null>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryAction = Boolean(secondaryAction);\n\n    const theme = useTheme() as Theme;\n\n    const defaultColor = theme?.text ?? '#fff';\n\n    // Ensure the extended state resets after the timeout window (click-only).\n    // Reset the auto-collapse timeout after click-based extension.\n    const resetTimeout = useCallback(() => {\n        if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current);\n        }\n\n        timeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExtended(false);\n            setIsExtendedFromClick(false);\n        }, extendedTimeoutMs);\n    }, [extendedTimeoutMs]);\n\n    // Extend the secondary action due to a click.\n    const extendSecondaryByClick = useCallback(() => {\n        setIsSecondaryExtended(true);\n        setIsExtendedFromClick(true);\n        resetTimeout();\n    }, [resetTimeout]);\n\n    // Cleanup timers on unmount.\n    useEffect(\n        () => () => {\n            if (timeoutRef.current) {\n                window.clearTimeout(timeoutRef.current);\n            }\n        },\n        [],\n    );\n\n    // Collapsing the whole button should also clear any secondary expansion.\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExtended(false);\n            setIsExtendedFromClick(false);\n        }\n    }, [isCollapsed]);\n\n    // Primary action click handler.\n    // Primary action click handler.\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                isExtended: isSecondaryExtended,\n                isTouch,\n                event,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, primaryAction, isSecondaryExtended, isTouch],\n    );\n\n    // Secondary action click handler.\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                isExtended: isSecondaryExtended,\n                isTouch,\n                event,\n            };\n\n            secondaryAction.onClick?.(payload);\n\n            extendSecondaryByClick();\n        },\n        [\n            extendSecondaryByClick,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExtended,\n            isTouch,\n            secondaryAction,\n        ],\n    );\n\n    // Hovering the secondary action should extend it immediately on desktop.\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 (!isExtendedFromClick) {\n            setIsSecondaryExtended(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedFromClick, isTouch, secondaryAction]);\n\n    // Leaving the secondary action should collapse it immediately on desktop.\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedFromClick && !isCollapsed) {\n            setIsSecondaryExtended(false);\n        }\n    }, [isCollapsed, isExtendedFromClick, isTouch]);\n\n    // Secondary label is shown whenever the button is extended or hovered on desktop.\n    const shouldShowSecondaryLabel = isSecondaryExtended || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ width: isCollapsed ? 42 : (width ?? '100%') }}\n        >\n            <StyledActionButton\n                disabled={isDisabled || primaryAction.isDisabled}\n                $isPrimary={hasSecondaryAction}\n                $isCollapsed={isCollapsed}\n                $isShrunk={hasSecondaryAction && isSecondaryExtended}\n                $isSolo={!hasSecondaryAction && !isCollapsed}\n                $statusType={primaryAction.status?.type}\n                $pulseColor={primaryAction.status?.pulseColor}\n                onClick={handlePrimaryClick}\n                type=\"button\"\n            >\n                <StyledActionContent>\n                    <StyledIconSlot>\n                        {typeof primaryAction.icon === 'string' ? (\n                            <Icon\n                                icons={[primaryAction.icon]}\n                                color={primaryAction.color ?? defaultColor}\n                                size={18}\n                            />\n                        ) : (\n                            primaryAction.icon\n                        )}\n                    </StyledIconSlot>\n                    <AnimatePresence initial={false}>\n                        {(!hasSecondaryAction || !isSecondaryExtended) && !isCollapsed && (\n                            <motion.span\n                                animate={{ opacity: 1, width: 'auto' }}\n                                exit={{ opacity: 0, width: 0 }}\n                                initial={{ opacity: 0, width: 0 }}\n                                key=\"primary-label\"\n                                style={{\n                                    flex: '1 1 auto',\n                                    minWidth: 0,\n                                    overflow: 'hidden',\n                                    textAlign: 'left',\n                                }}\n                                transition={{ duration: 0.3 }}\n                            >\n                                <StyledPrimaryLabel\n                                    style={{ color: primaryAction.color ?? defaultColor }}\n                                >\n                                    {primaryAction.label}\n                                </StyledPrimaryLabel>\n                            </motion.span>\n                        )}\n                    </AnimatePresence>\n                </StyledActionContent>\n            </StyledActionButton>\n            {secondaryAction && (\n                <StyledActionButton\n                    disabled={isDisabled || secondaryAction.isDisabled}\n                    $isSecondary\n                    $isExpanded={isSecondaryExtended}\n                    $isHidden={isCollapsed}\n                    $statusType={secondaryAction.status?.type}\n                    $pulseColor={secondaryAction.status?.pulseColor}\n                    onClick={handleSecondaryClick}\n                    onMouseEnter={handleSecondaryMouseEnter}\n                    onMouseLeave={handleSecondaryMouseLeave}\n                    type=\"button\"\n                >\n                    <StyledActionContent>\n                        <StyledIconSlot>\n                            {typeof secondaryAction.icon === 'string' ? (\n                                <Icon\n                                    icons={[secondaryAction.icon]}\n                                    color={secondaryAction.color ?? defaultColor}\n                                    size={18}\n                                />\n                            ) : (\n                                secondaryAction.icon\n                            )}\n                        </StyledIconSlot>\n                        <AnimatePresence initial={false}>\n                            {shouldShowSecondaryLabel && secondaryAction.label && (\n                                <motion.span\n                                    animate={{ opacity: 1, width: 'auto' }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"secondary-label\"\n                                    style={{\n                                        flex: '1 1 auto',\n                                        minWidth: 0,\n                                        overflow: 'hidden',\n                                        textAlign: 'left',\n                                    }}\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <StyledSecondaryLabel\n                                        style={{ color: secondaryAction.color ?? defaultColor }}\n                                    >\n                                        {secondaryAction.label}\n                                    </StyledSecondaryLabel>\n                                </motion.span>\n                            )}\n                        </AnimatePresence>\n                    </StyledActionContent>\n                </StyledActionButton>\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.styles.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSecondaryLabel = exports.StyledPrimaryLabel = exports.StyledMultiActionButton = exports.StyledIconSlot = exports.StyledActionContent = exports.StyledActionButton = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("motion/react");
+var _MultiActionButton = require("./MultiActionButton.types");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const pulse = (0, _styledComponents.keyframes)`
+    0% {
+        opacity: 0.25;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 0.25;
+    }
+`;
+const StyledMultiActionButton = exports.StyledMultiActionButton = (0, _styledComponents.default)(_react.motion.div)`
+    align-items: stretch;
+    background: transparent;
+    display: inline-flex;
+    position: relative;
+    transition: width 0.2s ease;
+    width: 100%;
+`;
+const StyledActionButton = exports.StyledActionButton = _styledComponents.default.button`
+    align-items: center;
+    border: none;
+    border-radius: 21px;
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: 42px;
+    line-height: 22px;
+    min-height: 42px;
+    padding: 0;
+    position: relative;
+    overflow: hidden;
+    transition:
+        background-color 0.2s ease,
+        border-radius 0.2s ease,
+        color 0.2s ease,
+        flex-grow 0.2s ease,
+        opacity 0.2s ease,
+        width 0.2s ease,
+        margin-left 0.2s ease,
+        padding 0.2s ease;
+    user-select: none;
+    white-space: nowrap;
+
+    background-color: rgba(0, 0, 0, 0.25);
+    color: #fff;
+
+    ${({
+  $isExpanded
+}) => $isExpanded && (0, _styledComponents.css)`
+            flex: 1 1 auto;
+            min-width: 0;
+        `}
+
+    ${({
+  $isCollapsed
+}) => $isCollapsed && (0, _styledComponents.css)`
+            flex: 0 0 auto;
+            padding: 0;
+            width: 42px;
+        `}
+
+    ${({
+  $isPrimary,
+  $isCollapsed
+}) => $isPrimary && !$isCollapsed && (0, _styledComponents.css)`
+            flex: 1 1 auto;
+            min-width: 0;
+        `}
+
+    ${({
+  $isShrunk
+}) => $isShrunk && (0, _styledComponents.css)`
+            flex: 0 0 auto;
+            padding: 0;
+            width: 42px;
+        `}
+
+    ${({
+  $isSecondary,
+  $isExpanded
+}) => $isSecondary && !$isExpanded && (0, _styledComponents.css)`
+            flex: 0 0 auto;
+            padding: 0;
+            width: 42px;
+        `}
+
+    ${({
+  $isSecondary
+}) => $isSecondary && (0, _styledComponents.css)`
+            margin-left: 2px;
+        `}
+
+    ${({
+  $isHidden
+}) => $isHidden && (0, _styledComponents.css)`
+            margin-left: 0;
+            opacity: 0;
+            pointer-events: none;
+            width: 0;
+        `}
+
+    ${({
+  $isPrimary
+}) => $isPrimary && (0, _styledComponents.css)`
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        `}
+
+    ${({
+  $isPrimary,
+  $isCollapsed
+}) => $isPrimary && $isCollapsed && (0, _styledComponents.css)`
+            border-bottom-right-radius: 21px;
+            border-top-right-radius: 21px;
+        `}
+
+    ${({
+  $isSecondary
+}) => $isSecondary && (0, _styledComponents.css)`
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        `}
+
+    ${({
+  $isSolo
+}) => $isSolo && (0, _styledComponents.css)`
+            border-radius: 21px;
+        `}
+
+    ${({
+  $isCollapsed
+}) => $isCollapsed && (0, _styledComponents.css)`
+            border-radius: 21px;
+        `}
+
+    ${({
+  $statusType,
+  $pulseColor
+}) => $statusType === _MultiActionButton.MultiActionButtonStatusType.Pulse && (0, _styledComponents.css)`
+            overflow: hidden;
+
+            &::before {
+                animation: ${pulse} 1.6s ease-in-out infinite;
+                background: ${$pulseColor || 'rgba(255, 0, 0, 0.85)'};
+                border-radius: 3px;
+                content: '';
+                inset: 0;
+                opacity: 0.1;
+                pointer-events: none;
+                position: absolute;
+            }
+        `}
+
+    &:disabled {
+        cursor: default;
+        opacity: 0.5;
+    }
+
+    &:hover:not(:disabled) {
+        filter: brightness(1.05);
+    }
+`;
+const StyledActionContent = exports.StyledActionContent = _styledComponents.default.span`
+    align-items: center;
+    display: inline-flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    position: relative;
+    z-index: 1;
+`;
+const StyledIconSlot = exports.StyledIconSlot = _styledComponents.default.span`
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: 42px;
+    justify-content: center;
+    width: 42px;
+`;
+const StyledSecondaryLabel = exports.StyledSecondaryLabel = _styledComponents.default.span`
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    padding-right: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const StyledPrimaryLabel = exports.StyledPrimaryLabel = (0, _styledComponents.default)(StyledSecondaryLabel)``;
+//# sourceMappingURL=MultiActionButton.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiActionButton.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","keyframes","StyledMultiActionButton","exports","styled","motion","div","StyledActionButton","button","$isExpanded","css","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColor","MultiActionButtonStatusType","Pulse","StyledActionContent","span","StyledIconSlot","StyledSecondaryLabel","StyledPrimaryLabel"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { motion } from 'motion/react';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from './MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $isExpanded?: boolean;\n    $isCollapsed?: boolean;\n    $isShrunk?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isSolo?: boolean;\n    $isHidden?: boolean;\n    $statusType?: MultiActionButtonStatusType;\n    $pulseColor?: string;\n}>;\n\nconst pulse = keyframes`\n    0% {\n        opacity: 0.25;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        opacity: 0.25;\n    }\n`;\n\nexport const StyledMultiActionButton = styled(motion.div)`\n    align-items: stretch;\n    background: transparent;\n    display: inline-flex;\n    position: relative;\n    transition: width 0.2s ease;\n    width: 100%;\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: 21px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: 42px;\n    line-height: 22px;\n    min-height: 42px;\n    padding: 0;\n    position: relative;\n    overflow: hidden;\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        opacity 0.2s ease,\n        width 0.2s ease,\n        margin-left 0.2s ease,\n        padding 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: rgba(0, 0, 0, 0.25);\n    color: #fff;\n\n    ${({ $isExpanded }) =>\n        $isExpanded &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    ${({ $isCollapsed }) =>\n        $isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: 42px;\n        `}\n\n    ${({ $isPrimary, $isCollapsed }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    ${({ $isShrunk }) =>\n        $isShrunk &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: 42px;\n        `}\n\n    ${({ $isSecondary, $isExpanded }) =>\n        $isSecondary &&\n        !$isExpanded &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: 42px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            margin-left: 2px;\n        `}\n\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            margin-left: 0;\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${({ $isPrimary, $isCollapsed }) =>\n        $isPrimary &&\n        $isCollapsed &&\n        css`\n            border-bottom-right-radius: 21px;\n            border-top-right-radius: 21px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${({ $isSolo }) =>\n        $isSolo &&\n        css`\n            border-radius: 21px;\n        `}\n\n    ${({ $isCollapsed }) =>\n        $isCollapsed &&\n        css`\n            border-radius: 21px;\n        `}\n\n    ${({ $statusType, $pulseColor }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse} 1.6s ease-in-out infinite;\n                background: ${$pulseColor || 'rgba(255, 0, 0, 0.85)'};\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                opacity: 0.1;\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        filter: brightness(1.05);\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: 42px;\n    justify-content: center;\n    width: 42px;\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: 12px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledPrimaryLabel = styled(StyledSecondaryLabel)``;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiActionButtonStatusType = void 0;
+/**
+ * Supported status types for the multi action button.
+ */
+let MultiActionButtonStatusType = exports.MultiActionButtonStatusType = /*#__PURE__*/function (MultiActionButtonStatusType) {
+  /**
+   * Pulsing background effect.
+   * @description Applies a subtle animated overlay on the action background to draw attention.
+   * This is intended for temporary states like recording or live activity indicators.
+   */
+  MultiActionButtonStatusType["Pulse"] = "pulse";
+  return MultiActionButtonStatusType;
+}({});
+/**
+ * Minimal status configuration for an action.
+ */
+/**
+ * Event payload emitted on action click.
+ */
+/**
+ * Configuration for a single action.
+ */
+/**
+ * Props for the MultiActionButton component.
+ */
+//# sourceMappingURL=MultiActionButton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports"],"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 * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\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     * Optional pulse color override.\n     * @description Controls the overlay color used by the pulse animation. Provide a semi-transparent\n     * color to avoid overpowering the action content.\n     * @optional\n     */\n    pulseColor?: string;\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     * 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     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\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     * 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     * 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     * 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     * 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     * 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     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\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 & { label: ReactNode };\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     * 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     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the button stretches to the full width of its parent.\n     * @optional\n     */\n    width?: number | MotionValue<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"],"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;AAkBA;AACA;AACA;AA0BA;AACA;AACA;AA0CA;AACA;AACA","ignoreList":[]}

package/lib/cjs/index.js

@@ -33,12 +33,6 @@ Object.defineProperty(exports, "AccordionItem", {
     return _AccordionItem.default;
   }
 });
-Object.defineProperty(exports, "ActionMenuButton", {
-  enumerable: true,
-  get: function () {
-    return _ActionMenuButton.default;
-  }
-});
 Object.defineProperty(exports, "AmountControl", {
   enumerable: true,
   get: function () {
@@ -273,6 +267,12 @@ Object.defineProperty(exports, "MentionFinderPopupAlignment", {
     return _mentionFinder.MentionFinderPopupAlignment;
   }
 });
+Object.defineProperty(exports, "MultiActionButton", {
+  enumerable: true,
+  get: function () {
+    return _MultiActionButton.default;
+  }
+});
 Object.defineProperty(exports, "NumberInput", {
   enumerable: true,
   get: function () {
@@ -524,7 +524,6 @@ var _AccordionContent = _interopRequireDefault(require("./components/accordion/a
 var _AccordionGroup = _interopRequireDefault(require("./components/accordion/accordion-group/AccordionGroup"));
 var _AccordionIntro = _interopRequireDefault(require("./components/accordion/accordion-intro/AccordionIntro"));
 var _AccordionItem = _interopRequireDefault(require("./components/accordion/accordion-item/AccordionItem"));
-var _ActionMenuButton = _interopRequireDefault(require("./components/action-menu-button/ActionMenuButton"));
 var _AmountControl = _interopRequireDefault(require("./components/amount-control/AmountControl"));
 var _VerificationBadge = _interopRequireDefault(require("./components/verification-badge/VerificationBadge"));
 var _AreaContextProvider = _interopRequireWildcard(require("./components/area-provider/AreaContextProvider"));
@@ -559,6 +558,7 @@ var _List = _interopRequireDefault(require("./components/list/List"));
 var _ListItemContent = _interopRequireDefault(require("./components/list/list-item/list-item-content/ListItemContent"));
 var _ListItem = _interopRequireDefault(require("./components/list/list-item/ListItem"));
 var _MentionFinder = _interopRequireDefault(require("./components/mention-finder/MentionFinder"));
+var _MultiActionButton = _interopRequireDefault(require("./components/multi-action-button/MultiActionButton"));
 var _NumberInput = _interopRequireDefault(require("./components/number-input/NumberInput"));
 var _PageProvider = _interopRequireDefault(require("./components/page-provider/PageProvider"));
 var _Popup = _interopRequireDefault(require("./components/popup/Popup"));