@chayns-components/core 5.0.12 → 5.0.13
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.
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.js +2 -1
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.js.map +1 -1
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js +4 -2
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
- package/lib/esm/components/multi-action-button/action-button/ActionButton.js +2 -1
- package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map +1 -1
- package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js +4 -2
- package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
- package/lib/types/components/multi-action-button/action-button/ActionButton.styles.d.ts +1 -0
- package/package.json +2 -2
|
@@ -45,7 +45,8 @@ const ActionButton = ({
|
|
|
45
45
|
const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;
|
|
46
46
|
const iconSize = height - 24;
|
|
47
47
|
const actionContent = /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionContent, null, /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledIconSlot, {
|
|
48
|
-
$height: height
|
|
48
|
+
$height: height,
|
|
49
|
+
$isDisabled: isActionDisabled
|
|
49
50
|
}, typeof action.icon === 'string' ? /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
50
51
|
icons: [action.icon],
|
|
51
52
|
color: actionColor,
|
|
@@ -1 +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","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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,QAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAQA,IAAAM,MAAA,GAAAN,OAAA;AAAsD,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtD,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,qBAAA,EAAAC,cAAA,EAAAC,eAAA;EACF,MAAMC,SAAS,GAAGjB,UAAU,KAAK,SAAS;EAC1C,MAAMkB,WAAW,GAAGlB,UAAU,KAAK,WAAW;EAC9C,MAAMmB,WAAW,GAAGpB,MAAM,CAACqB,KAAK,IAAI,SAAS;EAC7C,MAAMC,gBAAgB,GAAGlB,UAAU,IAAImB,OAAO,CAACvB,MAAM,CAACI,UAAU,CAAC;EACjE,MAAMoB,cAAc,IAAAT,qBAAA,GAAGf,MAAM,CAACwB,cAAc,cAAAT,qBAAA,uBAArBA,qBAAA,CAAuBU,IAAI,CAAC,CAAC;EACpD,MAAMC,wBAAwB,GAAGH,OAAO,CAACC,cAAc,CAAC,IAAIF,gBAAgB;EAC5E,MAAMK,QAAQ,GAAGb,MAAM,GAAG,EAAE;EAE5B,MAAMc,aAAa,gBACfzC,OAAA,CAAAQ,OAAA,CAAAkC,aAAA,CAACtC,aAAA,CAAAuC,mBAAmB,qBAChB3C,OAAA,CAAAQ,OAAA,CAAAkC,aAAA,CAACtC,aAAA,CAAAwC,cAAc;IAACC,OAAO,EAAElB;
|
|
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","iconSize","actionContent","createElement","StyledActionContent","StyledIconSlot","$height","$isDisabled","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} $isDisabled={isActionDisabled}>\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":[]}
|
|
@@ -143,7 +143,6 @@ const StyledActionButton = exports.StyledActionButton = _styledComponents.defaul
|
|
|
143
143
|
$isInteractionDisabled
|
|
144
144
|
}) => $isInteractionDisabled && (0, _styledComponents.css)`
|
|
145
145
|
cursor: default;
|
|
146
|
-
opacity: 0.5;
|
|
147
146
|
`}
|
|
148
147
|
|
|
149
148
|
/* Optional pulse overlay used by status. */
|
|
@@ -166,7 +165,6 @@ const StyledActionButton = exports.StyledActionButton = _styledComponents.defaul
|
|
|
166
165
|
|
|
167
166
|
&:disabled {
|
|
168
167
|
cursor: default;
|
|
169
|
-
opacity: 0.5;
|
|
170
168
|
}
|
|
171
169
|
|
|
172
170
|
${({
|
|
@@ -196,6 +194,10 @@ const StyledIconSlot = exports.StyledIconSlot = _styledComponents.default.span`
|
|
|
196
194
|
$height
|
|
197
195
|
}) => $height}px;
|
|
198
196
|
justify-content: center;
|
|
197
|
+
opacity: ${({
|
|
198
|
+
$isDisabled
|
|
199
|
+
}) => $isDisabled ? 0.5 : 1};
|
|
200
|
+
transition: opacity 0.2s ease;
|
|
199
201
|
width: ${({
|
|
200
202
|
$height
|
|
201
203
|
}) => $height}px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor || theme?.primary || '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. */\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n /* Expanded secondary button when width is not content-driven. */\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Collapsed state clamps to a fixed icon size. */\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Primary action stretches unless content-driven. */\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Shrink the primary action to icon size when secondary is expanded. */\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Keep secondary icon-only when collapsed and not expanded. */\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Fully hide the secondary action when the whole control is collapsed. */\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n /* Joining both buttons into a pill shape. */\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n opacity: 0.5;\n `}\n\n /* Optional pulse overlay used by status. */\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n /* The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,kBAAA,GAAAH,OAAA;AAAyE,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAkBzE,MAAMkB,KAAK,GAAGA,CAACC,MAAc,EAAEC,MAAc,KAAK,IAAAC,2BAAS;AAC3D;AACA,sBAAsBF,MAAM;AAC5B;AACA;AACA,sBAAsBC,MAAM;AAC5B;AACA;AACA,sBAAsBD,MAAM;AAC5B;AACA,CAAC;AAEM,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,MAA+B;AACxE;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD;AACA;AACA;AACA,cAAc,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,kBAAkB,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,gBAAgB;EAAEC;AAAM,CAAC,KAC5CD,gBAAgB,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,OAAO,KAAI,MAAM;AACpD;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAuB,CAAC,KACzBA,sBAAsB,IACtB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,WAAW;EAAEF;AAAuB,CAAC,KACtCE,WAAW,IACX,CAACF,sBAAsB,IACvB,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOE,KAAK,IACJA,KAAK,CAACC,YAAY,IAClB,IAAAH,qBAAG;AACX;AACA;AACA,qBAAqBE,KAAK,CAACP,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAES,UAAU;EAAED,YAAY;EAAEJ;AAAuB,CAAC,KACnDK,UAAU,IACV,CAACD,YAAY,IACb,CAACJ,sBAAsB,IACvB,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAOE,KAAK,IACJA,KAAK,CAACG,SAAS,IACf,CAACH,KAAK,CAACH,sBAAsB,IAC7B,IAAAC,qBAAG;AACX;AACA;AACA,qBAAqBE,KAAK,CAACP,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAOO,KAAK,IACJA,KAAK,CAACI,YAAY,IAClB,CAACJ,KAAK,CAACD,WAAW,IAClB,CAACC,KAAK,CAACH,sBAAsB,IAC7B,IAAAC,qBAAG;AACX;AACA;AACA,qBAAqBE,KAAK,CAACP,OAAO;AAClC,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEY;AAAU,CAAC,KACZA,SAAS,IACT,IAAAP,qBAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEI;AAAW,CAAC,KACbA,UAAU,IACV,IAAAJ,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOE,KAAK,IACJA,KAAK,CAACE,UAAU,IAChBF,KAAK,CAACC,YAAY,IAClB,IAAAH,qBAAG;AACX,0CAA0CE,KAAK,CAACP,OAAO,GAAG,CAAC;AAC3D,uCAAuCO,KAAK,CAACP,OAAO,GAAG,CAAC;AACxD,SAAS;AACT;AACA,MAAM,CAAC;EAAEW;AAAa,CAAC,KACfA,YAAY,IACZ,IAAAN,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAOE,KAAK,IACJA,KAAK,CAACM,OAAO,IACb,IAAAR,qBAAG;AACX,6BAA6BE,KAAK,CAACP,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA,MAAOO,KAAK,IACJA,KAAK,CAACC,YAAY,IAClB,IAAAH,qBAAG;AACX,6BAA6BE,KAAK,CAACP,OAAO,GAAG,CAAC;AAC9C,SAAS;AACT;AACA,MAAM,CAAC;EAAEc;AAAuB,CAAC,KACzBA,sBAAsB,IACtB,IAAAT,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEU,WAAW;EAAEC;AAAa,CAAC,KAC5BD,WAAW,KAAKE,8CAA2B,CAACC,KAAK,IACjD,IAAAb,qBAAG;AACX;AACA;AACA;AACA,6BAA6Bb,KAAK,CAAC,CAAAwB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC,CAAC,KAAI,SAAS,EAAE,CAAAA,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC,CAAC,KAAI,SAAS,CAAC;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEF,sBAAsB;EAAEb,gBAAgB;EAAEC;AAAM,CAAC,KAClD,CAACY,sBAAsB,IACvB,IAAAT,qBAAG;AACX;AACA,oCAAoC,sBAAsBJ,gBAAgB,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,OAAO,KAAI,MAAM,cAAc;AACpH;AACA,SAAS;AACT,CAAC;AAEM,MAAMgB,mBAAmB,GAAAtB,OAAA,CAAAsB,mBAAA,GAAGrB,yBAAM,CAACsB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,cAAc,GAAAxB,OAAA,CAAAwB,cAAA,GAAGvB,yBAAM,CAACsB,IAAyB;AAC9D;AACA;AACA;AACA,cAAc,CAAC;EAAEpB;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAEM,MAAMsB,kBAAkB,GAAAzB,OAAA,CAAAyB,kBAAA,GAAG,IAAAxB,yBAAM,EAACyB,aAAM,CAACH,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMI,oBAAoB,GAAA3B,OAAA,CAAA2B,oBAAA,GAAG1B,yBAAM,CAACsB,IAAI;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor || theme?.primary || '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. */\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n /* Expanded secondary button when width is not content-driven. */\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Collapsed state clamps to a fixed icon size. */\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Primary action stretches unless content-driven. */\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Shrink the primary action to icon size when secondary is expanded. */\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Keep secondary icon-only when collapsed and not expanded. */\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Fully hide the secondary action when the whole control is collapsed. */\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n /* Joining both buttons into a pill shape. */\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n `}\n\n /* Optional pulse overlay used by status. */\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n /* The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -37,7 +37,8 @@ const ActionButton = ({
|
|
|
37
37
|
const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;
|
|
38
38
|
const iconSize = height - 24;
|
|
39
39
|
const actionContent = /*#__PURE__*/React.createElement(StyledActionContent, null, /*#__PURE__*/React.createElement(StyledIconSlot, {
|
|
40
|
-
$height: height
|
|
40
|
+
$height: height,
|
|
41
|
+
$isDisabled: isActionDisabled
|
|
41
42
|
}, typeof action.icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
|
|
42
43
|
icons: [action.icon],
|
|
43
44
|
color: actionColor,
|
|
@@ -1 +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","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;
|
|
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","iconSize","actionContent","createElement","$height","$isDisabled","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} $isDisabled={isActionDisabled}>\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":[]}
|
|
@@ -136,7 +136,6 @@ export const StyledActionButton = styled.button`
|
|
|
136
136
|
$isInteractionDisabled
|
|
137
137
|
}) => $isInteractionDisabled && css`
|
|
138
138
|
cursor: default;
|
|
139
|
-
opacity: 0.5;
|
|
140
139
|
`}
|
|
141
140
|
|
|
142
141
|
/* Optional pulse overlay used by status. */
|
|
@@ -159,7 +158,6 @@ export const StyledActionButton = styled.button`
|
|
|
159
158
|
|
|
160
159
|
&:disabled {
|
|
161
160
|
cursor: default;
|
|
162
|
-
opacity: 0.5;
|
|
163
161
|
}
|
|
164
162
|
|
|
165
163
|
${({
|
|
@@ -189,6 +187,10 @@ export const StyledIconSlot = styled.span`
|
|
|
189
187
|
$height
|
|
190
188
|
}) => $height}px;
|
|
191
189
|
justify-content: center;
|
|
190
|
+
opacity: ${({
|
|
191
|
+
$isDisabled
|
|
192
|
+
}) => $isDisabled ? 0.5 : 1};
|
|
193
|
+
transition: opacity 0.2s ease;
|
|
192
194
|
width: ${({
|
|
193
195
|
$height
|
|
194
196
|
}) => $height}px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor || theme?.primary || '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. */\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n /* Expanded secondary button when width is not content-driven. */\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Collapsed state clamps to a fixed icon size. */\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Primary action stretches unless content-driven. */\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Shrink the primary action to icon size when secondary is expanded. */\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Keep secondary icon-only when collapsed and not expanded. */\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Fully hide the secondary action when the whole control is collapsed. */\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n /* Joining both buttons into a pill shape. */\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n opacity: 0.5;\n `}\n\n /* Optional pulse overlay used by status. */\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n /* The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$isInteractionDisabled","$statusType","$pulseColors","Pulse","StyledActionContent","span","StyledIconSlot","$isDisabled","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n $backgroundColor?: string;\n $isCollapsed?: boolean;\n $isExpanded?: boolean;\n $isHidden?: boolean;\n $isPrimary?: boolean;\n $isSecondary?: boolean;\n $isShrunk?: boolean;\n $isSolo?: boolean;\n $pulseColors?: [string, string];\n $isInteractionDisabled?: boolean;\n $height: number;\n $statusType?: MultiActionButtonStatusType;\n $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n 0% {\n background: ${color1};\n }\n 50% {\n background: ${color2};\n }\n 100% {\n background: ${color1};\n }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n align-items: center;\n border: none;\n border-radius: ${({ $height }) => $height / 2}px;\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n height: ${({ $height }) => $height}px;\n line-height: 22px;\n min-height: ${({ $height }) => $height}px;\n overflow: hidden;\n padding: 0;\n position: relative;\n transition:\n background-color 0.2s ease,\n border-radius 0.2s ease,\n color 0.2s ease,\n flex-grow 0.2s ease,\n opacity 0.2s ease,\n padding 0.2s ease,\n width 0.2s ease;\n user-select: none;\n white-space: nowrap;\n\n background-color: ${({ $backgroundColor, theme }) =>\n $backgroundColor || theme?.primary || '#000'};\n color: #fff;\n\n /* When width is content-driven, avoid flex stretching. */\n ${({ $shouldUseContentWidth }) =>\n $shouldUseContentWidth &&\n css`\n flex: 0 1 auto;\n `}\n\n /* Expanded secondary button when width is not content-driven. */\n ${({ $isExpanded, $shouldUseContentWidth }) =>\n $isExpanded &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Collapsed state clamps to a fixed icon size. */\n ${(props) =>\n props.$isCollapsed &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Primary action stretches unless content-driven. */\n ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n $isPrimary &&\n !$isCollapsed &&\n !$shouldUseContentWidth &&\n css`\n flex: 1 1 auto;\n min-width: 0;\n `}\n\n /* Shrink the primary action to icon size when secondary is expanded. */\n ${(props) =>\n props.$isShrunk &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Keep secondary icon-only when collapsed and not expanded. */\n ${(props) =>\n props.$isSecondary &&\n !props.$isExpanded &&\n !props.$shouldUseContentWidth &&\n css`\n flex: 0 0 auto;\n padding: 0;\n width: ${props.$height}px;\n `}\n\n /* Fully hide the secondary action when the whole control is collapsed. */\n ${({ $isHidden }) =>\n $isHidden &&\n css`\n opacity: 0;\n pointer-events: none;\n width: 0;\n `}\n\n /* Joining both buttons into a pill shape. */\n ${({ $isPrimary }) =>\n $isPrimary &&\n css`\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n `}\n\n ${(props) =>\n props.$isPrimary &&\n props.$isCollapsed &&\n css`\n border-bottom-right-radius: ${props.$height / 2}px;\n border-top-right-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isSecondary }) =>\n $isSecondary &&\n css`\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n `}\n\n ${(props) =>\n props.$isSolo &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${(props) =>\n props.$isCollapsed &&\n css`\n border-radius: ${props.$height / 2}px;\n `}\n\n ${({ $isInteractionDisabled }) =>\n $isInteractionDisabled &&\n css`\n cursor: default;\n `}\n\n /* Optional pulse overlay used by status. */\n ${({ $statusType, $pulseColors }) =>\n $statusType === MultiActionButtonStatusType.Pulse &&\n css`\n overflow: hidden;\n\n &::before {\n animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n 1.6s ease-in-out infinite;\n border-radius: 3px;\n content: '';\n inset: 0;\n pointer-events: none;\n position: absolute;\n }\n `}\n\n &:disabled {\n cursor: default;\n }\n\n ${({ $isInteractionDisabled, $backgroundColor, theme }) =>\n !$isInteractionDisabled &&\n css`\n &:hover:not(:disabled) {\n background-color: ${`color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n }\n `}\n`;\n\nexport const StyledActionContent = styled.span`\n align-items: center;\n display: inline-flex;\n flex: 1 1 auto;\n gap: 0;\n min-width: 0;\n position: relative;\n z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n height: ${({ $height }) => $height}px;\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n /* The wrapper animates width/margin to avoid layout jumps. */\n display: inline-flex;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n padding-right: 18px;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -19,6 +19,7 @@ export declare const StyledActionButton: import("styled-components/dist/types").
|
|
|
19
19
|
export declare const StyledActionContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
20
20
|
export declare const StyledIconSlot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
|
|
21
21
|
$height: number;
|
|
22
|
+
$isDisabled?: boolean;
|
|
22
23
|
}>> & string;
|
|
23
24
|
export declare const StyledLabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & {
|
|
24
25
|
ref?: ((instance: HTMLSpanElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLSpanElement> | null | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.13",
|
|
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": "
|
|
89
|
+
"gitHead": "0fbbaf109933654d639a8e68f5ee34183b7aafd9"
|
|
90
90
|
}
|