@chayns-components/core 5.0.1 → 5.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -38,6 +38,7 @@ const ActionButton = ({
38
38
  const isPrimary = actionType === 'primary';
39
39
  const isSecondary = actionType === 'secondary';
40
40
  const actionColor = action.color ?? '#FFFFFF';
41
+ const labelKey = typeof action.label === 'string' || typeof action.label === 'number' ? action.label : actionType;
41
42
  return /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionButton, {
42
43
  disabled: isDisabled || action.isDisabled,
43
44
  $backgroundColor: backgroundColor,
@@ -63,8 +64,10 @@ const ActionButton = ({
63
64
  color: actionColor,
64
65
  size: height - 24
65
66
  }) : action.icon), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
66
- initial: false
67
+ initial: false,
68
+ mode: "wait"
67
69
  }, showLabel && /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledLabelWrapper, {
70
+ key: labelKey,
68
71
  animate: {
69
72
  opacity: 1,
70
73
  width: 'auto',
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_ActionButton","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","createElement","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","StyledActionContent","StyledIconSlot","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n\n return (\n <StyledActionButton\n disabled={isDisabled || action.isDisabled}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false}>\n {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_ActionButton","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","labelKey","label","createElement","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","StyledActionContent","StyledIconSlot","icon","icons","size","AnimatePresence","initial","mode","StyledLabelWrapper","key","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n \n const labelKey =\n typeof action.label === 'string' || typeof action.label === 'number'\n ? action.label\n : actionType;\n\n return (\n <StyledActionButton\n disabled={isDisabled || action.isDisabled}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false} mode=\"wait\">\n {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n key={labelKey}\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAM+B,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAG/B,MAAMG,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;EAAA,IAAAC,cAAA,EAAAC,eAAA;EACF,MAAMC,SAAS,GAAGhB,UAAU,KAAK,SAAS;EAC1C,MAAMiB,WAAW,GAAGjB,UAAU,KAAK,WAAW;EAC9C,MAAMkB,WAAW,GAAGnB,MAAM,CAACoB,KAAK,IAAI,SAAS;EAE7C,MAAMC,QAAQ,GACV,OAAOrB,MAAM,CAACsB,KAAK,KAAK,QAAQ,IAAI,OAAOtB,MAAM,CAACsB,KAAK,KAAK,QAAQ,GAC9DtB,MAAM,CAACsB,KAAK,GACZrB,UAAU;EAEpB,oBACIZ,OAAA,CAAAM,OAAA,CAAA4B,aAAA,CAAC/B,aAAA,CAAAgC,kBAAkB;IACfC,QAAQ,EAAErB,UAAU,IAAIJ,MAAM,CAACI,UAAW;IAC1CsB,gBAAgB,EAAExB,eAAgB;IAClCyB,YAAY,EAAExB,WAAY;IAC1ByB,WAAW,EAAEV,WAAW,GAAGb,UAAU,GAAGwB,SAAU;IAClDC,SAAS,EAAEZ,WAAW,GAAGZ,QAAQ,GAAGuB,SAAU;IAC9CE,UAAU,EAAEd,SAAU;IACtBe,YAAY,EAAEd,WAAY;IAC1Be,SAAS,EAAEhB,SAAS,GAAGV,QAAQ,GAAGsB,SAAU;IAC5CK,OAAO,EAAEjB,SAAS,GAAGT,MAAM,GAAGqB,SAAU;IACxCM,YAAY,GAAApB,cAAA,GAAEf,MAAM,CAACoC,MAAM,cAAArB,cAAA,uBAAbA,cAAA,CAAesB,WAAY;IACzCC,OAAO,EAAExB,MAAO;IAChByB,WAAW,GAAAvB,eAAA,GAAEhB,MAAM,CAACoC,MAAM,cAAApB,eAAA,uBAAbA,eAAA,CAAewB,IAAK;IACjCC,sBAAsB,EAAE5B,qBAAsB;IAC9CJ,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA,YAAa;IAC3B6B,IAAI,EAAC;EAAQ,gBAEbnD,OAAA,CAAAM,OAAA,CAAA4B,aAAA,CAAC/B,aAAA,CAAAkD,mBAAmB,qBAChBrD,OAAA,CAAAM,OAAA,CAAA4B,aAAA,CAAC/B,aAAA,CAAAmD,cAAc;IAACL,OAAO,EAAExB;EAAO,GAC3B,OAAOd,MAAM,CAAC4C,IAAI,KAAK,QAAQ,gBAC5BvD,OAAA,CAAAM,OAAA,CAAA4B,aAAA,CAAChC,KAAA,CAAAI,OAAI;IAACkD,KAAK,EAAE,CAAC7C,MAAM,CAAC4C,IAAI,CAAE;IAACxB,KAAK,EAAED,WAAY;IAAC2B,IAAI,EAAEhC,MAAM,GAAG;EAAG,CAAE,CAAC,GAErEd,MAAM,CAAC4C,IAEC,CAAC,eACjBvD,OAAA,CAAAM,OAAA,CAAA4B,aAAA,CAACpC,MAAA,CAAA4D,eAAe;IAACC,OAAO,EAAE,KAAM;IAACC,IAAI,EAAC;EAAM,GAEvCrC,SAAS,iBACNvB,OAAA,CAAAM,OAAA,CAAA4B,aAAA,CAAC/B,aAAA,CAAA0D,kBAAkB;IACfC,GAAG,EAAE9B,QAAS;IACd+B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE,MAAM;MAAEC,UAAU,EAAE3D;IAAU,CAAE;IAC9D4D,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAE,CAAE;IAC9CP,OAAO,EAAE;MAAEK,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAE,CAAE;IACjDE,UAAU,EAAE5D;EAAiB,gBAE7BR,OAAA,CAAAM,OAAA,CAAA4B,aAAA,CAAC/B,aAAA,CAAAkE,oBAAoB;IAACC,KAAK,EAAE;MAAEvC,KAAK,EAAED;IAAY;EAAE,GAC/CnB,MAAM,CAACsB,KACU,CACN,CAEX,CACA,CACL,CAAC;AAE7B,CAAC;AAEDvB,YAAY,CAAC6D,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnE,OAAA,GAE3BI,YAAY","ignoreList":[]}
@@ -30,6 +30,7 @@ const ActionButton = ({
30
30
  const isPrimary = actionType === 'primary';
31
31
  const isSecondary = actionType === 'secondary';
32
32
  const actionColor = action.color ?? '#FFFFFF';
33
+ const labelKey = typeof action.label === 'string' || typeof action.label === 'number' ? action.label : actionType;
33
34
  return /*#__PURE__*/React.createElement(StyledActionButton, {
34
35
  disabled: isDisabled || action.isDisabled,
35
36
  $backgroundColor: backgroundColor,
@@ -55,8 +56,10 @@ const ActionButton = ({
55
56
  color: actionColor,
56
57
  size: height - 24
57
58
  }) : action.icon), /*#__PURE__*/React.createElement(AnimatePresence, {
58
- initial: false
59
+ initial: false,
60
+ mode: "wait"
59
61
  }, showLabel && /*#__PURE__*/React.createElement(StyledLabelWrapper, {
62
+ key: labelKey,
60
63
  animate: {
61
64
  opacity: 1,
62
65
  width: 'auto',
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","createElement","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n\n return (\n <StyledActionButton\n disabled={isDisabled || action.isDisabled}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false}>\n {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","labelKey","label","createElement","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","icon","icons","size","initial","mode","key","animate","opacity","width","marginLeft","exit","transition","style","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n \n const labelKey =\n typeof action.label === 'string' || typeof action.label === 'number'\n ? action.label\n : actionType;\n\n return (\n <StyledActionButton\n disabled={isDisabled || action.isDisabled}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false} mode=\"wait\">\n {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n key={labelKey}\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.1",
3
+ "version": "5.0.2",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -86,5 +86,5 @@
86
86
  "publishConfig": {
87
87
  "access": "public"
88
88
  },
89
- "gitHead": "836fc172829209cb3ad26c1f1ed42d9af11425df"
89
+ "gitHead": "871adcebe1361aea7ce6d0583dc915c013e28451"
90
90
  }