@chayns-components/core 5.0.35 → 5.0.36
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.
|
@@ -98,10 +98,14 @@ const Button = ({
|
|
|
98
98
|
transition: {
|
|
99
99
|
visibility: {
|
|
100
100
|
duration: 0
|
|
101
|
-
}
|
|
101
|
+
},
|
|
102
|
+
duration: 0.5
|
|
102
103
|
},
|
|
103
104
|
whileTap: isDisabled ? {} : {
|
|
104
|
-
...tapStyles
|
|
105
|
+
...tapStyles,
|
|
106
|
+
transition: {
|
|
107
|
+
duration: 0
|
|
108
|
+
}
|
|
105
109
|
},
|
|
106
110
|
whileHover: isDisabled ? {} : {
|
|
107
111
|
...hoverStyles
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["_clsx","_interopRequireDefault","require","_react","_react2","_interopRequireWildcard","_styledComponents","_Icon","_Button","_WaitCursor","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","handleClick","event","stopPropagation","buttonClasses","clsx","theme","useTheme","effectiveButtonDesign","iconColor","useMemo","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","StyledMotionButton","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","whileTap","whileHover","AnimatePresence","StyledIconWrapper","icons","StyledMotionWaitCursorWrapper","width","exit","key","overflow","shouldHideBackground","StyledMotionChildrenWrapper","displayName","_default","exports"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledIconWrapper,\n StyledMotionButton,\n StyledMotionChildrenWrapper,\n StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n children,\n className,\n icon,\n isDisabled,\n isSecondary,\n onClick,\n shouldShowWaitCursor,\n shouldStopPropagation,\n shouldShowAsSelectButton = false,\n shouldShowTextAsRobotoMedium = true,\n buttonDesign,\n}) => {\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n onClick(event);\n };\n\n const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n const theme = useTheme() as Theme;\n\n const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n const iconColor = useMemo(() => {\n if (isSecondary) {\n return theme.text;\n }\n\n return effectiveButtonDesign === 2\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white');\n }, [\n isSecondary,\n theme.buttonBackgroundColor,\n theme.buttonColor,\n effectiveButtonDesign,\n theme.text,\n ]);\n\n const backgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary || shouldShowAsSelectButton) {\n color = theme['202'];\n } else {\n color = theme.buttonBackgroundColor ?? theme['408'];\n }\n\n if (effectiveButtonDesign === 2) {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n const tapStyles = useMemo(() => {\n if (effectiveButtonDesign === 2) {\n return {\n backgroundColor:\n isSecondary || shouldShowAsSelectButton\n ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n : `${theme.buttonBackgroundColor ?? ''}40`,\n };\n }\n\n return { opacity: 0.6 };\n }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n const hoverStyles = useMemo(() => {\n if (effectiveButtonDesign === 2) {\n return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n }\n\n return { opacity: 1 };\n }, [theme, effectiveButtonDesign]);\n\n return (\n <StyledMotionButton\n $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n $shouldShowAsSelectButton={shouldShowAsSelectButton}\n $shouldShowWaitCursor={shouldShowWaitCursor}\n className={buttonClasses}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $hasChildren={!!children}\n $hasIcon={typeof icon === 'string' && icon !== ''}\n $isSecondary={isSecondary}\n $effectiveButtonDesign={effectiveButtonDesign}\n onClick={handleClick}\n style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n initial={{ opacity: 0.5 }}\n animate={{\n opacity: isDisabled ? 0.5 : 1,\n }}\n transition={{ visibility: { duration: 0 } }}\n whileTap={isDisabled ? {} : { ...tapStyles }}\n whileHover={isDisabled ? {} : { ...hoverStyles }}\n >\n <AnimatePresence initial={false}>\n {icon && (\n <StyledIconWrapper>\n <Icon color={iconColor} icons={[icon]} />\n </StyledIconWrapper>\n )}\n {shouldShowWaitCursor && (\n <StyledMotionWaitCursorWrapper\n animate={{ opacity: 1, width: 40 }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"wait-cursor\"\n style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n </StyledMotionWaitCursorWrapper>\n )}\n {!shouldShowWaitCursor && children && (\n <StyledMotionChildrenWrapper\n animate={{ opacity: 1, width: 'auto' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"children\"\n // style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionChildrenWrapper>\n )}\n </AnimatePresence>\n </StyledMotionButton>\n );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Button.js","names":["_clsx","_interopRequireDefault","require","_react","_react2","_interopRequireWildcard","_styledComponents","_Icon","_Button","_WaitCursor","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","handleClick","event","stopPropagation","buttonClasses","clsx","theme","useTheme","effectiveButtonDesign","iconColor","useMemo","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","StyledMotionButton","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","whileTap","whileHover","AnimatePresence","StyledIconWrapper","icons","StyledMotionWaitCursorWrapper","width","exit","key","overflow","shouldHideBackground","StyledMotionChildrenWrapper","displayName","_default","exports"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledIconWrapper,\n StyledMotionButton,\n StyledMotionChildrenWrapper,\n StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n children,\n className,\n icon,\n isDisabled,\n isSecondary,\n onClick,\n shouldShowWaitCursor,\n shouldStopPropagation,\n shouldShowAsSelectButton = false,\n shouldShowTextAsRobotoMedium = true,\n buttonDesign,\n}) => {\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n onClick(event);\n };\n\n const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n const theme = useTheme() as Theme;\n\n const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n const iconColor = useMemo(() => {\n if (isSecondary) {\n return theme.text;\n }\n\n return effectiveButtonDesign === 2\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white');\n }, [\n isSecondary,\n theme.buttonBackgroundColor,\n theme.buttonColor,\n effectiveButtonDesign,\n theme.text,\n ]);\n\n const backgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary || shouldShowAsSelectButton) {\n color = theme['202'];\n } else {\n color = theme.buttonBackgroundColor ?? theme['408'];\n }\n\n if (effectiveButtonDesign === 2) {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n const tapStyles = useMemo(() => {\n if (effectiveButtonDesign === 2) {\n return {\n backgroundColor:\n isSecondary || shouldShowAsSelectButton\n ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n : `${theme.buttonBackgroundColor ?? ''}40`,\n };\n }\n\n return { opacity: 0.6 };\n }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n const hoverStyles = useMemo(() => {\n if (effectiveButtonDesign === 2) {\n return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n }\n\n return { opacity: 1 };\n }, [theme, effectiveButtonDesign]);\n\n return (\n <StyledMotionButton\n $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n $shouldShowAsSelectButton={shouldShowAsSelectButton}\n $shouldShowWaitCursor={shouldShowWaitCursor}\n className={buttonClasses}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $hasChildren={!!children}\n $hasIcon={typeof icon === 'string' && icon !== ''}\n $isSecondary={isSecondary}\n $effectiveButtonDesign={effectiveButtonDesign}\n onClick={handleClick}\n style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n initial={{ opacity: 0.5 }}\n animate={{\n opacity: isDisabled ? 0.5 : 1,\n }}\n transition={{ visibility: { duration: 0 }, duration: 0.5 }}\n whileTap={isDisabled ? {} : { ...tapStyles, transition: { duration: 0 } }}\n whileHover={isDisabled ? {} : { ...hoverStyles }}\n >\n <AnimatePresence initial={false}>\n {icon && (\n <StyledIconWrapper>\n <Icon color={iconColor} icons={[icon]} />\n </StyledIconWrapper>\n )}\n {shouldShowWaitCursor && (\n <StyledMotionWaitCursorWrapper\n animate={{ opacity: 1, width: 40 }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"wait-cursor\"\n style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n </StyledMotionWaitCursorWrapper>\n )}\n {!shouldShowWaitCursor && children && (\n <StyledMotionChildrenWrapper\n animate={{ opacity: 1, width: 'auto' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"children\"\n // style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionChildrenWrapper>\n )}\n </AnimatePresence>\n </StyledMotionButton>\n );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -90,10 +90,14 @@ const Button = ({
|
|
|
90
90
|
transition: {
|
|
91
91
|
visibility: {
|
|
92
92
|
duration: 0
|
|
93
|
-
}
|
|
93
|
+
},
|
|
94
|
+
duration: 0.5
|
|
94
95
|
},
|
|
95
96
|
whileTap: isDisabled ? {} : {
|
|
96
|
-
...tapStyles
|
|
97
|
+
...tapStyles,
|
|
98
|
+
transition: {
|
|
99
|
+
duration: 0
|
|
100
|
+
}
|
|
97
101
|
},
|
|
98
102
|
whileHover: isDisabled ? {} : {
|
|
99
103
|
...hoverStyles
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useMemo","useTheme","Icon","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","WaitCursor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","handleClick","event","stopPropagation","buttonClasses","theme","effectiveButtonDesign","iconColor","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","whileTap","whileHover","icons","width","exit","key","overflow","shouldHideBackground","displayName"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledIconWrapper,\n StyledMotionButton,\n StyledMotionChildrenWrapper,\n StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n children,\n className,\n icon,\n isDisabled,\n isSecondary,\n onClick,\n shouldShowWaitCursor,\n shouldStopPropagation,\n shouldShowAsSelectButton = false,\n shouldShowTextAsRobotoMedium = true,\n buttonDesign,\n}) => {\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n onClick(event);\n };\n\n const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n const theme = useTheme() as Theme;\n\n const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n const iconColor = useMemo(() => {\n if (isSecondary) {\n return theme.text;\n }\n\n return effectiveButtonDesign === 2\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white');\n }, [\n isSecondary,\n theme.buttonBackgroundColor,\n theme.buttonColor,\n effectiveButtonDesign,\n theme.text,\n ]);\n\n const backgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary || shouldShowAsSelectButton) {\n color = theme['202'];\n } else {\n color = theme.buttonBackgroundColor ?? theme['408'];\n }\n\n if (effectiveButtonDesign === 2) {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n const tapStyles = useMemo(() => {\n if (effectiveButtonDesign === 2) {\n return {\n backgroundColor:\n isSecondary || shouldShowAsSelectButton\n ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n : `${theme.buttonBackgroundColor ?? ''}40`,\n };\n }\n\n return { opacity: 0.6 };\n }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n const hoverStyles = useMemo(() => {\n if (effectiveButtonDesign === 2) {\n return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n }\n\n return { opacity: 1 };\n }, [theme, effectiveButtonDesign]);\n\n return (\n <StyledMotionButton\n $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n $shouldShowAsSelectButton={shouldShowAsSelectButton}\n $shouldShowWaitCursor={shouldShowWaitCursor}\n className={buttonClasses}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $hasChildren={!!children}\n $hasIcon={typeof icon === 'string' && icon !== ''}\n $isSecondary={isSecondary}\n $effectiveButtonDesign={effectiveButtonDesign}\n onClick={handleClick}\n style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n initial={{ opacity: 0.5 }}\n animate={{\n opacity: isDisabled ? 0.5 : 1,\n }}\n transition={{ visibility: { duration: 0 } }}\n whileTap={isDisabled ? {} : { ...tapStyles }}\n whileHover={isDisabled ? {} : { ...hoverStyles }}\n >\n <AnimatePresence initial={false}>\n {icon && (\n <StyledIconWrapper>\n <Icon color={iconColor} icons={[icon]} />\n </StyledIconWrapper>\n )}\n {shouldShowWaitCursor && (\n <StyledMotionWaitCursorWrapper\n animate={{ opacity: 1, width: 40 }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"wait-cursor\"\n style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n </StyledMotionWaitCursorWrapper>\n )}\n {!shouldShowWaitCursor && children && (\n <StyledMotionChildrenWrapper\n animate={{ opacity: 1, width: 'auto' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"children\"\n // style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionChildrenWrapper>\n )}\n </AnimatePresence>\n </StyledMotionButton>\n );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,SAASC,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAA2BC,OAAO,QAAQ,OAAO;AAC7D,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,iBAAiB,EACjBC,kBAAkB,EAClBC,2BAA2B,EAC3BC,6BAA6B,QAC1B,iBAAiB;AAExB,OAAOC,UAAU,MAAM,0BAA0B;AAEjD,MAAMC,MAAuB,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,UAAU;EACVC,WAAW;EACXC,OAAO;EACPC,oBAAoB;EACpBC,qBAAqB;EACrBC,wBAAwB,GAAG,KAAK;EAChCC,4BAA4B,GAAG,IAAI;EACnCC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAiD,GAAIC,KAAK,IAAK;IACjE,IAAIL,qBAAqB,EAAE;MACvBK,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEAR,OAAO,CAACO,KAAK,CAAC;EAClB,CAAC;EAED,MAAME,aAAa,GAAG1B,IAAI,CAAC,6BAA6B,EAAEa,SAAS,CAAC;EAEpE,MAAMc,KAAK,GAAGvB,QAAQ,CAAC,CAAU;EAEjC,MAAMwB,qBAAqB,GAAIN,YAAY,IAAIK,KAAK,CAACL,YAAuB;EAE5E,MAAMO,SAAS,GAAG1B,OAAO,CAAC,MAAM;IAC5B,IAAIa,WAAW,EAAE;MACb,OAAOW,KAAK,CAACG,IAAI;IACrB;IAEA,OAAOF,qBAAqB,KAAK,CAAC,GAC3BD,KAAK,CAACI,WAAW,IAAIJ,KAAK,CAACK,qBAAqB,IAAI,OAAO,GAC3DL,KAAK,CAACI,WAAW,IAAI,OAAQ;EACxC,CAAC,EAAE,CACCf,WAAW,EACXW,KAAK,CAACK,qBAAqB,EAC3BL,KAAK,CAACI,WAAW,EACjBH,qBAAqB,EACrBD,KAAK,CAACG,IAAI,CACb,CAAC;EAEF,MAAMG,eAAe,GAAG9B,OAAO,CAAC,MAAM;IAClC,IAAI+B,KAAK;IAET,IAAIlB,WAAW,IAAII,wBAAwB,EAAE;MACzCc,KAAK,GAAGP,KAAK,CAAC,KAAK,CAAC;IACxB,CAAC,MAAM;MACHO,KAAK,GAAGP,KAAK,CAACK,qBAAqB,IAAIL,KAAK,CAAC,KAAK,CAAC;IACvD;IAEA,IAAIC,qBAAqB,KAAK,CAAC,EAAE;MAC7BM,KAAK,GAAG,QAAQP,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM;IAChD;IAEA,OAAOO,KAAK;EAChB,CAAC,EAAE,CAAClB,WAAW,EAAEI,wBAAwB,EAAEO,KAAK,EAAEC,qBAAqB,CAAC,CAAC;EAEzE,MAAMO,SAAS,GAAGhC,OAAO,CAAC,MAAM;IAC5B,IAAIyB,qBAAqB,KAAK,CAAC,EAAE;MAC7B,OAAO;QACHK,eAAe,EACXjB,WAAW,IAAII,wBAAwB,GACjC,QAAQO,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,GACtC,GAAGA,KAAK,CAACK,qBAAqB,IAAI,EAAE;MAClD,CAAC;IACL;IAEA,OAAO;MAAEI,OAAO,EAAE;IAAI,CAAC;EAC3B,CAAC,EAAE,CAACpB,WAAW,EAAEI,wBAAwB,EAAEO,KAAK,EAAEC,qBAAqB,CAAC,CAAC;EAEzE,MAAMS,WAAW,GAAGlC,OAAO,CAAC,MAAM;IAC9B,IAAIyB,qBAAqB,KAAK,CAAC,EAAE;MAC7B,OAAO;QAAEK,eAAe,EAAE,QAAQN,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE;MAAS,CAAC;IACtE;IAEA,OAAO;MAAES,OAAO,EAAE;IAAE,CAAC;EACzB,CAAC,EAAE,CAACT,KAAK,EAAEC,qBAAqB,CAAC,CAAC;EAElC,oBACI1B,KAAA,CAAAoC,aAAA,CAAC/B,kBAAkB;IACfgC,6BAA6B,EAAElB,4BAA6B;IAC5DmB,yBAAyB,EAAEpB,wBAAyB;IACpDqB,qBAAqB,EAAEvB,oBAAqB;IAC5CL,SAAS,EAAEa,aAAc;IACzBgB,QAAQ,EAAE3B,UAAW;IACrB4B,WAAW,EAAE5B,UAAW;IACxB6B,YAAY,EAAE,CAAC,CAAChC,QAAS;IACzBiC,QAAQ,EAAE,OAAO/B,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,EAAG;IAClDgC,YAAY,EAAE9B,WAAY;IAC1B+B,sBAAsB,EAAEnB,qBAAsB;IAC9CX,OAAO,EAAEM,WAAY;IACrByB,KAAK,EAAE;MAAEC,UAAU,EAAE,CAAChB,eAAe,GAAG,QAAQ,GAAG,SAAS;MAAEA;IAAgB,CAAE;IAChFiB,OAAO,EAAE;MAAEd,OAAO,EAAE;IAAI,CAAE;IAC1Be,OAAO,EAAE;MACLf,OAAO,EAAErB,UAAU,GAAG,GAAG,GAAG;IAChC,CAAE;IACFqC,UAAU,EAAE;MAAEH,UAAU,EAAE;QAAEI,QAAQ,EAAE;MAAE;IAAE,CAAE;IAC5CC,QAAQ,EAAEvC,UAAU,GAAG,CAAC,CAAC,GAAG;MAAE,GAAGoB;IAAU,CAAE;IAC7CoB,UAAU,EAAExC,UAAU,GAAG,CAAC,CAAC,GAAG;MAAE,GAAGsB;IAAY;EAAE,gBAEjDnC,KAAA,CAAAoC,aAAA,CAACrC,eAAe;IAACiD,OAAO,EAAE;EAAM,GAC3BpC,IAAI,iBACDZ,KAAA,CAAAoC,aAAA,CAAChC,iBAAiB,qBACdJ,KAAA,CAAAoC,aAAA,CAACjC,IAAI;IAAC6B,KAAK,EAAEL,SAAU;IAAC2B,KAAK,EAAE,CAAC1C,IAAI;EAAE,CAAE,CACzB,CACtB,EACAI,oBAAoB,iBACjBhB,KAAA,CAAAoC,aAAA,CAAC7B,6BAA6B;IAC1B0C,OAAO,EAAE;MAAEf,OAAO,EAAE,CAAC;MAAEqB,KAAK,EAAE;IAAG,CAAE;IACnCC,IAAI,EAAE;MAAEtB,OAAO,EAAE,CAAC;MAAEqB,KAAK,EAAE;IAAE,CAAE;IAC/BP,OAAO,EAAE;MAAEd,OAAO,EAAE,CAAC;MAAEqB,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC,aAAa;IACjBX,KAAK,EAAE;MAAEY,QAAQ,EAAE;IAAS,CAAE;IAC9BR,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAE9BnD,KAAA,CAAAoC,aAAA,CAAC5B,UAAU;IAACwB,KAAK,EAAEL,SAAS,IAAI,OAAQ;IAACgC,oBAAoB;EAAA,CAAE,CACpC,CAClC,EACA,CAAC3C,oBAAoB,IAAIN,QAAQ,iBAC9BV,KAAA,CAAAoC,aAAA,CAAC9B,2BAA2B;IACxB2C,OAAO,EAAE;MAAEf,OAAO,EAAE,CAAC;MAAEqB,KAAK,EAAE;IAAO,CAAE;IACvCC,IAAI,EAAE;MAAEtB,OAAO,EAAE,CAAC;MAAEqB,KAAK,EAAE;IAAE,CAAE;IAC/BP,OAAO,EAAE;MAAEd,OAAO,EAAE,CAAC;MAAEqB,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC;IACJ;IAAA;IACAP,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BzC,QACwB,CAEpB,CACD,CAAC;AAE7B,CAAC;AAEDD,MAAM,CAACmD,WAAW,GAAG,QAAQ;AAE7B,eAAenD,MAAM","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useMemo","useTheme","Icon","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","WaitCursor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","handleClick","event","stopPropagation","buttonClasses","theme","effectiveButtonDesign","iconColor","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","whileTap","whileHover","icons","width","exit","key","overflow","shouldHideBackground","displayName"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledIconWrapper,\n StyledMotionButton,\n StyledMotionChildrenWrapper,\n StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n children,\n className,\n icon,\n isDisabled,\n isSecondary,\n onClick,\n shouldShowWaitCursor,\n shouldStopPropagation,\n shouldShowAsSelectButton = false,\n shouldShowTextAsRobotoMedium = true,\n buttonDesign,\n}) => {\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n onClick(event);\n };\n\n const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n const theme = useTheme() as Theme;\n\n const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n const iconColor = useMemo(() => {\n if (isSecondary) {\n return theme.text;\n }\n\n return effectiveButtonDesign === 2\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white');\n }, [\n isSecondary,\n theme.buttonBackgroundColor,\n theme.buttonColor,\n effectiveButtonDesign,\n theme.text,\n ]);\n\n const backgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary || shouldShowAsSelectButton) {\n color = theme['202'];\n } else {\n color = theme.buttonBackgroundColor ?? theme['408'];\n }\n\n if (effectiveButtonDesign === 2) {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n const tapStyles = useMemo(() => {\n if (effectiveButtonDesign === 2) {\n return {\n backgroundColor:\n isSecondary || shouldShowAsSelectButton\n ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n : `${theme.buttonBackgroundColor ?? ''}40`,\n };\n }\n\n return { opacity: 0.6 };\n }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n const hoverStyles = useMemo(() => {\n if (effectiveButtonDesign === 2) {\n return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n }\n\n return { opacity: 1 };\n }, [theme, effectiveButtonDesign]);\n\n return (\n <StyledMotionButton\n $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n $shouldShowAsSelectButton={shouldShowAsSelectButton}\n $shouldShowWaitCursor={shouldShowWaitCursor}\n className={buttonClasses}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $hasChildren={!!children}\n $hasIcon={typeof icon === 'string' && icon !== ''}\n $isSecondary={isSecondary}\n $effectiveButtonDesign={effectiveButtonDesign}\n onClick={handleClick}\n style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n initial={{ opacity: 0.5 }}\n animate={{\n opacity: isDisabled ? 0.5 : 1,\n }}\n transition={{ visibility: { duration: 0 }, duration: 0.5 }}\n whileTap={isDisabled ? {} : { ...tapStyles, transition: { duration: 0 } }}\n whileHover={isDisabled ? {} : { ...hoverStyles }}\n >\n <AnimatePresence initial={false}>\n {icon && (\n <StyledIconWrapper>\n <Icon color={iconColor} icons={[icon]} />\n </StyledIconWrapper>\n )}\n {shouldShowWaitCursor && (\n <StyledMotionWaitCursorWrapper\n animate={{ opacity: 1, width: 40 }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"wait-cursor\"\n style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n </StyledMotionWaitCursorWrapper>\n )}\n {!shouldShowWaitCursor && children && (\n <StyledMotionChildrenWrapper\n animate={{ opacity: 1, width: 'auto' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"children\"\n // style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionChildrenWrapper>\n )}\n </AnimatePresence>\n </StyledMotionButton>\n );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\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.
|
|
3
|
+
"version": "5.0.36",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "9c66e5f8085e1ed2d91992413e4113cc0a16923d"
|
|
91
91
|
}
|