@chayns-components/core 5.0.51 → 5.0.52

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.
@@ -50,20 +50,14 @@ const StyledMotionAccordion = exports.StyledMotionAccordion = (0, _styledCompone
50
50
  $bottomBorderColor
51
51
  }) => {
52
52
  if ($shouldForceBackground || $shouldHideBottomLine) return undefined;
53
- if ($bottomBorderColor) return (0, _styledComponents.css)`
53
+ const shouldShowBottomBorder = theme.accordionLines && $shouldShowLines && ($isWrapped || !$isOpen);
54
+ if ($bottomBorderColor && shouldShowBottomBorder) return (0, _styledComponents.css)`
54
55
  border-bottom-color: ${$bottomBorderColor};
55
56
  `;
56
- if (theme.accordionLines) {
57
- if ($isWrapped && $shouldShowLines) {
58
- return (0, _styledComponents.css)`
59
- border-bottom-color: rgba(${theme['headline-rgb']}, 1);
60
- `;
61
- }
62
- if (!$isOpen && $shouldShowLines) {
63
- return (0, _styledComponents.css)`
64
- border-bottom-color: rgba(${theme['headline-rgb']}, 1);
65
- `;
66
- }
57
+ if (shouldShowBottomBorder) {
58
+ return (0, _styledComponents.css)`
59
+ border-bottom-color: rgba(${theme['headline-rgb']}, 1);
60
+ `;
67
61
  }
68
62
  return undefined;
69
63
  }}
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordion","exports","styled","motion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","css","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldShowLines","$shouldHideBottomLine","$bottomBorderColor","undefined","$isParentWrapped"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped?: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n $shouldHideBottomLine: boolean;\n $bottomBorderColor?: string;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n\n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n margin-top: 10px;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n $shouldHideBottomLine,\n theme,\n $bottomBorderColor,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground || $shouldHideBottomLine) return undefined;\n\n if ($bottomBorderColor)\n return css`\n border-bottom-color: ${$bottomBorderColor};\n `;\n if (theme.accordionLines) {\n if ($isWrapped && $shouldShowLines) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n `;\n }\n\n if (!$isOpen && $shouldShowLines) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n `;\n }\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped\n ? css`\n margin-top: 5px;\n `\n : css`\n margin: 0;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover,\n &:focus-visible {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Accordion.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordion","exports","styled","motion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","css","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldShowLines","$shouldHideBottomLine","$bottomBorderColor","undefined","shouldShowBottomBorder","$isParentWrapped"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped?: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n $shouldHideBottomLine: boolean;\n $bottomBorderColor?: string;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n\n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n margin-top: 10px;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n $shouldHideBottomLine,\n theme,\n $bottomBorderColor,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground || $shouldHideBottomLine) return undefined;\n const shouldShowBottomBorder =\n theme.accordionLines && $shouldShowLines && ($isWrapped || !$isOpen);\n\n if ($bottomBorderColor && shouldShowBottomBorder)\n return css`\n border-bottom-color: ${$bottomBorderColor};\n `;\n\n if (shouldShowBottomBorder) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n `;\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped\n ? css`\n margin-top: 5px;\n `\n : css`\n margin: 0;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover,\n &:focus-visible {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"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","ignoreList":[]}
@@ -24,7 +24,8 @@ const Button = ({
24
24
  shouldStopPropagation,
25
25
  shouldShowAsSelectButton = false,
26
26
  shouldShowTextAsRobotoMedium = true,
27
- buttonDesign
27
+ buttonDesign,
28
+ tapDuration = 0.5
28
29
  }) => {
29
30
  const handleClick = event => {
30
31
  if (shouldStopPropagation) {
@@ -99,7 +100,9 @@ const Button = ({
99
100
  visibility: {
100
101
  duration: 0
101
102
  },
102
- duration: 0.5
103
+ duration: tapDuration,
104
+ ease: 'easeIn',
105
+ type: 'tween'
103
106
  },
104
107
  whileTap: isDisabled ? {} : {
105
108
  ...tapStyles,
@@ -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 }, 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":";;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAEA,IAAAK,KAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAOA,IAAAO,WAAA,GAAAR,sBAAA,CAAAC,OAAA;AAAkD,SAAAG,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,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;AAAA,SAAAV,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAElD,MAAMmB,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,GAAG,IAAAC,aAAI,EAAC,6BAA6B,EAAEd,SAAS,CAAC;EAEpE,MAAMe,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAU;EAEjC,MAAMC,qBAAqB,GAAIR,YAAY,IAAIM,KAAK,CAACN,YAAuB;EAE5E,MAAMS,SAAS,GAAG,IAAAC,eAAO,EAAC,MAAM;IAC5B,IAAIhB,WAAW,EAAE;MACb,OAAOY,KAAK,CAACK,IAAI;IACrB;IAEA,OAAOH,qBAAqB,KAAK,CAAC,GAC3BF,KAAK,CAACM,WAAW,IAAIN,KAAK,CAACO,qBAAqB,IAAI,OAAO,GAC3DP,KAAK,CAACM,WAAW,IAAI,OAAQ;EACxC,CAAC,EAAE,CACClB,WAAW,EACXY,KAAK,CAACO,qBAAqB,EAC3BP,KAAK,CAACM,WAAW,EACjBJ,qBAAqB,EACrBF,KAAK,CAACK,IAAI,CACb,CAAC;EAEF,MAAMG,eAAe,GAAG,IAAAJ,eAAO,EAAC,MAAM;IAClC,IAAIK,KAAK;IAET,IAAIrB,WAAW,IAAII,wBAAwB,EAAE;MACzCiB,KAAK,GAAGT,KAAK,CAAC,KAAK,CAAC;IACxB,CAAC,MAAM;MACHS,KAAK,GAAGT,KAAK,CAACO,qBAAqB,IAAIP,KAAK,CAAC,KAAK,CAAC;IACvD;IAEA,IAAIE,qBAAqB,KAAK,CAAC,EAAE;MAC7BO,KAAK,GAAG,QAAQT,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM;IAChD;IAEA,OAAOS,KAAK;EAChB,CAAC,EAAE,CAACrB,WAAW,EAAEI,wBAAwB,EAAEQ,KAAK,EAAEE,qBAAqB,CAAC,CAAC;EAEzE,MAAMQ,SAAS,GAAG,IAAAN,eAAO,EAAC,MAAM;IAC5B,IAAIF,qBAAqB,KAAK,CAAC,EAAE;MAC7B,OAAO;QACHM,eAAe,EACXpB,WAAW,IAAII,wBAAwB,GACjC,QAAQQ,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,GACtC,GAAGA,KAAK,CAACO,qBAAqB,IAAI,EAAE;MAClD,CAAC;IACL;IAEA,OAAO;MAAEI,OAAO,EAAE;IAAI,CAAC;EAC3B,CAAC,EAAE,CAACvB,WAAW,EAAEI,wBAAwB,EAAEQ,KAAK,EAAEE,qBAAqB,CAAC,CAAC;EAEzE,MAAMU,WAAW,GAAG,IAAAR,eAAO,EAAC,MAAM;IAC9B,IAAIF,qBAAqB,KAAK,CAAC,EAAE;MAC7B,OAAO;QAAEM,eAAe,EAAE,QAAQR,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE;MAAS,CAAC;IACtE;IAEA,OAAO;MAAEW,OAAO,EAAE;IAAE,CAAC;EACzB,CAAC,EAAE,CAACX,KAAK,EAAEE,qBAAqB,CAAC,CAAC;EAElC,oBACI5C,OAAA,CAAAgB,OAAA,CAAAuC,aAAA,CAACnD,OAAA,CAAAoD,kBAAkB;IACfC,6BAA6B,EAAEtB,4BAA6B;IAC5DuB,yBAAyB,EAAExB,wBAAyB;IACpDyB,qBAAqB,EAAE3B,oBAAqB;IAC5CL,SAAS,EAAEa,aAAc;IACzBoB,QAAQ,EAAE/B,UAAW;IACrBgC,WAAW,EAAEhC,UAAW;IACxBiC,YAAY,EAAE,CAAC,CAACpC,QAAS;IACzBqC,QAAQ,EAAE,OAAOnC,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,EAAG;IAClDoC,YAAY,EAAElC,WAAY;IAC1BmC,sBAAsB,EAAErB,qBAAsB;IAC9Cb,OAAO,EAAEM,WAAY;IACrB6B,KAAK,EAAE;MAAEC,UAAU,EAAE,CAACjB,eAAe,GAAG,QAAQ,GAAG,SAAS;MAAEA;IAAgB,CAAE;IAChFkB,OAAO,EAAE;MAAEf,OAAO,EAAE;IAAI,CAAE;IAC1BgB,OAAO,EAAE;MACLhB,OAAO,EAAExB,UAAU,GAAG,GAAG,GAAG;IAChC,CAAE;IACFyC,UAAU,EAAE;MAAEH,UAAU,EAAE;QAAEI,QAAQ,EAAE;MAAE,CAAC;MAAEA,QAAQ,EAAE;IAAI,CAAE;IAC3DC,QAAQ,EAAE3C,UAAU,GAAG,CAAC,CAAC,GAAG;MAAE,GAAGuB,SAAS;MAAEkB,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAE;IAAE,CAAE;IAC1EE,UAAU,EAAE5C,UAAU,GAAG,CAAC,CAAC,GAAG;MAAE,GAAGyB;IAAY;EAAE,gBAEjDtD,OAAA,CAAAgB,OAAA,CAAAuC,aAAA,CAACxD,MAAA,CAAA2E,eAAe;IAACN,OAAO,EAAE;EAAM,GAC3BxC,IAAI,iBACD5B,OAAA,CAAAgB,OAAA,CAAAuC,aAAA,CAACnD,OAAA,CAAAuE,iBAAiB,qBACd3E,OAAA,CAAAgB,OAAA,CAAAuC,aAAA,CAACpD,KAAA,CAAAa,OAAI;IAACmC,KAAK,EAAEN,SAAU;IAAC+B,KAAK,EAAE,CAAChD,IAAI;EAAE,CAAE,CACzB,CACtB,EACAI,oBAAoB,iBACjBhC,OAAA,CAAAgB,OAAA,CAAAuC,aAAA,CAACnD,OAAA,CAAAyE,6BAA6B;IAC1BR,OAAO,EAAE;MAAEhB,OAAO,EAAE,CAAC;MAAEyB,KAAK,EAAE;IAAG,CAAE;IACnCC,IAAI,EAAE;MAAE1B,OAAO,EAAE,CAAC;MAAEyB,KAAK,EAAE;IAAE,CAAE;IAC/BV,OAAO,EAAE;MAAEf,OAAO,EAAE,CAAC;MAAEyB,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC,aAAa;IACjBd,KAAK,EAAE;MAAEe,QAAQ,EAAE;IAAS,CAAE;IAC9BX,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAE9BvE,OAAA,CAAAgB,OAAA,CAAAuC,aAAA,CAAClD,WAAA,CAAAW,OAAU;IAACmC,KAAK,EAAEN,SAAS,IAAI,OAAQ;IAACqC,oBAAoB;EAAA,CAAE,CACpC,CAClC,EACA,CAAClD,oBAAoB,IAAIN,QAAQ,iBAC9B1B,OAAA,CAAAgB,OAAA,CAAAuC,aAAA,CAACnD,OAAA,CAAA+E,2BAA2B;IACxBd,OAAO,EAAE;MAAEhB,OAAO,EAAE,CAAC;MAAEyB,KAAK,EAAE;IAAO,CAAE;IACvCC,IAAI,EAAE;MAAE1B,OAAO,EAAE,CAAC;MAAEyB,KAAK,EAAE;IAAE,CAAE;IAC/BV,OAAO,EAAE;MAAEf,OAAO,EAAE,CAAC;MAAEyB,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC;IACJ;IAAA;IACAV,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7B7C,QACwB,CAEpB,CACD,CAAC;AAE7B,CAAC;AAEDD,MAAM,CAAC2D,WAAW,GAAG,QAAQ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtE,OAAA,GAEfS,MAAM","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","tapDuration","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","ease","type","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 tapDuration = 0.5,\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={{\n visibility: { duration: 0 },\n duration: tapDuration,\n ease: 'easeIn',\n type: 'tween',\n }}\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":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.types.js","names":[],"sources":["../../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\n\nexport type ButtonProps = {\n /**\n * The label of the button.\n * @description\n * The content to be displayed inside the button. This can be text, icons, or any React node.\n * It serves as the primary label for the button's action.\n * @optional\n */\n children?: ReactNode;\n /**\n * Additional class names for the button element.\n * @description\n * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.\n * Multiple classes can be provided as a space-separated string.\n * @optional\n */\n className?: string;\n /**\n * An icon that is displayed on the left-hand side of the button text.\n * @description\n * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.\n * This enhances the visual representation of the button's function.\n * @optional\n */\n icon?: string;\n /**\n * Whether the button is disabled and cannot be clicked anymore.\n * @description\n * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.\n * This is useful for scenarios where the action is temporarily unavailable.\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Displays the button in the secondary style.\n * @description\n * Applies a secondary visual style to the button, typically with a different background color or border.\n * This is used to differentiate less prominent actions from primary ones.\n * @optional\n */\n isSecondary?: boolean;\n /**\n * Function to be executed when the button is clicked.\n * @description\n * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,\n * such as submitting forms, navigating to pages, or performing any custom action.\n */\n onClick: MouseEventHandler<HTMLButtonElement>;\n /**\n * Whether the button should be displayed as a selectButton.\n * @description\n * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.\n * This changes the styling to indicate a selection state.\n * @optional\n * @default false\n */\n shouldShowAsSelectButton?: boolean;\n /**\n * Whether the text should be 'Roboto Medium'.\n * @description\n * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.\n * This can improve readability or match design guidelines.\n * @optional\n * @default true\n */\n shouldShowTextAsRobotoMedium?: boolean;\n /**\n * Shows a wait cursor instead of button text.\n * @description\n * Replaces the button content with a wait cursor animation, indicating that an action is in progress.\n * This provides visual feedback during loading or processing states.\n * @optional\n */\n shouldShowWaitCursor?: boolean;\n /**\n * Stops event propagation on click.\n * @description\n * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.\n * Useful in complex UI structures where event handling needs to be contained.\n * @optional\n */\n shouldStopPropagation?: boolean;\n /**\n * Optional button design override.\n * @description\n * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.\n * This provides flexibility for custom theming.\n * @optional\n */\n buttonDesign?: number;\n};\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"Button.types.js","names":[],"sources":["../../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\n\nexport type ButtonProps = {\n /**\n * The label of the button.\n * @description\n * The content to be displayed inside the button. This can be text, icons, or any React node.\n * It serves as the primary label for the button's action.\n * @optional\n */\n children?: ReactNode;\n /**\n * Additional class names for the button element.\n * @description\n * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.\n * Multiple classes can be provided as a space-separated string.\n * @optional\n */\n className?: string;\n /**\n * An icon that is displayed on the left-hand side of the button text.\n * @description\n * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.\n * This enhances the visual representation of the button's function.\n * @optional\n */\n icon?: string;\n /**\n * Whether the button is disabled and cannot be clicked anymore.\n * @description\n * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.\n * This is useful for scenarios where the action is temporarily unavailable.\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Displays the button in the secondary style.\n * @description\n * Applies a secondary visual style to the button, typically with a different background color or border.\n * This is used to differentiate less prominent actions from primary ones.\n * @optional\n */\n isSecondary?: boolean;\n /**\n * Function to be executed when the button is clicked.\n * @description\n * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,\n * such as submitting forms, navigating to pages, or performing any custom action.\n */\n onClick: MouseEventHandler<HTMLButtonElement>;\n /**\n * Whether the button should be displayed as a selectButton.\n * @description\n * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.\n * This changes the styling to indicate a selection state.\n * @optional\n * @default false\n */\n shouldShowAsSelectButton?: boolean;\n /**\n * Whether the text should be 'Roboto Medium'.\n * @description\n * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.\n * This can improve readability or match design guidelines.\n * @optional\n * @default true\n */\n shouldShowTextAsRobotoMedium?: boolean;\n /**\n * Shows a wait cursor instead of button text.\n * @description\n * Replaces the button content with a wait cursor animation, indicating that an action is in progress.\n * This provides visual feedback during loading or processing states.\n * @optional\n */\n shouldShowWaitCursor?: boolean;\n /**\n * Stops event propagation on click.\n * @description\n * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.\n * Useful in complex UI structures where event handling needs to be contained.\n * @optional\n */\n shouldStopPropagation?: boolean;\n /**\n * Optional button design override.\n * @description\n * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.\n * This provides flexibility for custom theming.\n * @optional\n */\n buttonDesign?: number;\n /**\n * Duration in seconds for the tap animation.\n * @description\n * Overrides how long the pressed state animation should take when the button is tapped.\n * Set this to `0` for an immediate press effect.\n * @optional\n */\n tapDuration?: number;\n};\n"],"mappings":"","ignoreList":[]}
@@ -43,20 +43,14 @@ export const StyledMotionAccordion = styled(motion.div)`
43
43
  $bottomBorderColor
44
44
  }) => {
45
45
  if ($shouldForceBackground || $shouldHideBottomLine) return undefined;
46
- if ($bottomBorderColor) return css`
46
+ const shouldShowBottomBorder = theme.accordionLines && $shouldShowLines && ($isWrapped || !$isOpen);
47
+ if ($bottomBorderColor && shouldShowBottomBorder) return css`
47
48
  border-bottom-color: ${$bottomBorderColor};
48
49
  `;
49
- if (theme.accordionLines) {
50
- if ($isWrapped && $shouldShowLines) {
51
- return css`
52
- border-bottom-color: rgba(${theme['headline-rgb']}, 1);
53
- `;
54
- }
55
- if (!$isOpen && $shouldShowLines) {
56
- return css`
57
- border-bottom-color: rgba(${theme['headline-rgb']}, 1);
58
- `;
59
- }
50
+ if (shouldShowBottomBorder) {
51
+ return css`
52
+ border-bottom-color: rgba(${theme['headline-rgb']}, 1);
53
+ `;
60
54
  }
61
55
  return undefined;
62
56
  }}
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","StyledMotionAccordion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldShowLines","$shouldHideBottomLine","$bottomBorderColor","undefined","$isParentWrapped"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped?: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n $shouldHideBottomLine: boolean;\n $bottomBorderColor?: string;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n\n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n margin-top: 10px;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n $shouldHideBottomLine,\n theme,\n $bottomBorderColor,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground || $shouldHideBottomLine) return undefined;\n\n if ($bottomBorderColor)\n return css`\n border-bottom-color: ${$bottomBorderColor};\n `;\n if (theme.accordionLines) {\n if ($isWrapped && $shouldShowLines) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n `;\n }\n\n if (!$isOpen && $shouldShowLines) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n `;\n }\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped\n ? css`\n margin-top: 5px;\n `\n : css`\n margin: 0;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover,\n &:focus-visible {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAc/C,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACnF,MAAM,CAAC;EACCC,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBC,qBAAqB;EACrBC;AACwB,CAAC,KACzB,CAACJ,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBN,GAAG;AACX,qCAAqCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,6BAA6BD,KAAK,CAACE,gBAAgB;AACnD,oDAAoDF,KAAK,CAACG,UAAU;AACpE,SAAS;AACT;AACA,MAAM,CAAC;EAAEH;AAAkC,CAAC,KACpCA,KAAK,CAACI,cAAc,IACpBX,GAAG;AACX;AACA,SAAS;AACT;AACA,qBAAqB,CAAC;EAAEG,OAAO;EAAEC;AAAuC,CAAC,KACjED,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EACCD,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBO,gBAAgB;EAChBC,qBAAqB;EACrBN,KAAK;EACLO;AACwB,CAAC,KAAK;EAC9B,IAAIT,sBAAsB,IAAIQ,qBAAqB,EAAE,OAAOE,SAAS;EAErE,IAAID,kBAAkB,EAClB,OAAOd,GAAG;AACtB,uCAAuCc,kBAAkB;AACzD,aAAa;EACL,IAAIP,KAAK,CAACI,cAAc,EAAE;IACtB,IAAIP,UAAU,IAAIQ,gBAAgB,EAAE;MAChC,OAAOZ,GAAG;AAC1B,gDAAgDO,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;IAEA,IAAI,CAACJ,OAAO,IAAIS,gBAAgB,EAAE;MAC9B,OAAOZ,GAAG;AAC1B,gDAAgDO,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;EACJ;EAEA,OAAOQ,SAAS;AACpB,CAAC;AACL,MAAM,CAAC;EAAEC;AAA6C,CAAC,KAC/CA,gBAAgB,IAChBhB,GAAG;AACX;AACA,SAAS;AACT,MAAM,CAAC;EAAEI;AAAuC,CAAC,KACzC,CAACA,UAAU,GACLJ,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,MAAM,CAAC;EAAEI,UAAU;EAAEE,qBAAqB;EAAEC;AAAkC,CAAC,KACvE,CAACH,UAAU,IACX,CAACE,qBAAqB,IACtBN,GAAG;AACX;AACA;AACA,yCAAyCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","StyledMotionAccordion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldShowLines","$shouldHideBottomLine","$bottomBorderColor","undefined","shouldShowBottomBorder","$isParentWrapped"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped?: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n $shouldHideBottomLine: boolean;\n $bottomBorderColor?: string;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen || $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n\n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n margin-top: 10px;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldShowLines,\n $shouldHideBottomLine,\n theme,\n $bottomBorderColor,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBackground || $shouldHideBottomLine) return undefined;\n const shouldShowBottomBorder =\n theme.accordionLines && $shouldShowLines && ($isWrapped || !$isOpen);\n\n if ($bottomBorderColor && shouldShowBottomBorder)\n return css`\n border-bottom-color: ${$bottomBorderColor};\n `;\n\n if (shouldShowBottomBorder) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n `;\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped\n ? css`\n margin-top: 5px;\n `\n : css`\n margin: 0;\n `}\n ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover,\n &:focus-visible {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAc/C,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACnF,MAAM,CAAC;EACCC,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBC,qBAAqB;EACrBC;AACwB,CAAC,KACzB,CAACJ,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBN,GAAG;AACX,qCAAqCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,6BAA6BD,KAAK,CAACE,gBAAgB;AACnD,oDAAoDF,KAAK,CAACG,UAAU;AACpE,SAAS;AACT;AACA,MAAM,CAAC;EAAEH;AAAkC,CAAC,KACpCA,KAAK,CAACI,cAAc,IACpBX,GAAG;AACX;AACA,SAAS;AACT;AACA,qBAAqB,CAAC;EAAEG,OAAO;EAAEC;AAAuC,CAAC,KACjED,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EACCD,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBO,gBAAgB;EAChBC,qBAAqB;EACrBN,KAAK;EACLO;AACwB,CAAC,KAAK;EAC9B,IAAIT,sBAAsB,IAAIQ,qBAAqB,EAAE,OAAOE,SAAS;EACrE,MAAMC,sBAAsB,GACxBT,KAAK,CAACI,cAAc,IAAIC,gBAAgB,KAAKR,UAAU,IAAI,CAACD,OAAO,CAAC;EAExE,IAAIW,kBAAkB,IAAIE,sBAAsB,EAC5C,OAAOhB,GAAG;AACtB,uCAAuCc,kBAAkB;AACzD,aAAa;EAEL,IAAIE,sBAAsB,EAAE;IACxB,OAAOhB,GAAG;AACtB,4CAA4CO,KAAK,CAAC,cAAc,CAAC;AACjE,aAAa;EACL;EAEA,OAAOQ,SAAS;AACpB,CAAC;AACL,MAAM,CAAC;EAAEE;AAA6C,CAAC,KAC/CA,gBAAgB,IAChBjB,GAAG;AACX;AACA,SAAS;AACT,MAAM,CAAC;EAAEI;AAAuC,CAAC,KACzC,CAACA,UAAU,GACLJ,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,MAAM,CAAC;EAAEI,UAAU;EAAEE,qBAAqB;EAAEC;AAAkC,CAAC,KACvE,CAACH,UAAU,IACX,CAACE,qBAAqB,IACtBN,GAAG;AACX;AACA;AACA,yCAAyCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AACT,CAAC","ignoreList":[]}
@@ -16,7 +16,8 @@ const Button = ({
16
16
  shouldStopPropagation,
17
17
  shouldShowAsSelectButton = false,
18
18
  shouldShowTextAsRobotoMedium = true,
19
- buttonDesign
19
+ buttonDesign,
20
+ tapDuration = 0.5
20
21
  }) => {
21
22
  const handleClick = event => {
22
23
  if (shouldStopPropagation) {
@@ -91,7 +92,9 @@ const Button = ({
91
92
  visibility: {
92
93
  duration: 0
93
94
  },
94
- duration: 0.5
95
+ duration: tapDuration,
96
+ ease: 'easeIn',
97
+ type: 'tween'
95
98
  },
96
99
  whileTap: isDisabled ? {} : {
97
100
  ...tapStyles,
@@ -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 }, 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":[]}
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","tapDuration","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","ease","type","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 tapDuration = 0.5,\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={{\n visibility: { duration: 0 },\n duration: tapDuration,\n ease: 'easeIn',\n type: 'tween',\n }}\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":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.types.js","names":[],"sources":["../../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\n\nexport type ButtonProps = {\n /**\n * The label of the button.\n * @description\n * The content to be displayed inside the button. This can be text, icons, or any React node.\n * It serves as the primary label for the button's action.\n * @optional\n */\n children?: ReactNode;\n /**\n * Additional class names for the button element.\n * @description\n * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.\n * Multiple classes can be provided as a space-separated string.\n * @optional\n */\n className?: string;\n /**\n * An icon that is displayed on the left-hand side of the button text.\n * @description\n * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.\n * This enhances the visual representation of the button's function.\n * @optional\n */\n icon?: string;\n /**\n * Whether the button is disabled and cannot be clicked anymore.\n * @description\n * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.\n * This is useful for scenarios where the action is temporarily unavailable.\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Displays the button in the secondary style.\n * @description\n * Applies a secondary visual style to the button, typically with a different background color or border.\n * This is used to differentiate less prominent actions from primary ones.\n * @optional\n */\n isSecondary?: boolean;\n /**\n * Function to be executed when the button is clicked.\n * @description\n * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,\n * such as submitting forms, navigating to pages, or performing any custom action.\n */\n onClick: MouseEventHandler<HTMLButtonElement>;\n /**\n * Whether the button should be displayed as a selectButton.\n * @description\n * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.\n * This changes the styling to indicate a selection state.\n * @optional\n * @default false\n */\n shouldShowAsSelectButton?: boolean;\n /**\n * Whether the text should be 'Roboto Medium'.\n * @description\n * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.\n * This can improve readability or match design guidelines.\n * @optional\n * @default true\n */\n shouldShowTextAsRobotoMedium?: boolean;\n /**\n * Shows a wait cursor instead of button text.\n * @description\n * Replaces the button content with a wait cursor animation, indicating that an action is in progress.\n * This provides visual feedback during loading or processing states.\n * @optional\n */\n shouldShowWaitCursor?: boolean;\n /**\n * Stops event propagation on click.\n * @description\n * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.\n * Useful in complex UI structures where event handling needs to be contained.\n * @optional\n */\n shouldStopPropagation?: boolean;\n /**\n * Optional button design override.\n * @description\n * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.\n * This provides flexibility for custom theming.\n * @optional\n */\n buttonDesign?: number;\n};\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"Button.types.js","names":[],"sources":["../../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\n\nexport type ButtonProps = {\n /**\n * The label of the button.\n * @description\n * The content to be displayed inside the button. This can be text, icons, or any React node.\n * It serves as the primary label for the button's action.\n * @optional\n */\n children?: ReactNode;\n /**\n * Additional class names for the button element.\n * @description\n * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.\n * Multiple classes can be provided as a space-separated string.\n * @optional\n */\n className?: string;\n /**\n * An icon that is displayed on the left-hand side of the button text.\n * @description\n * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.\n * This enhances the visual representation of the button's function.\n * @optional\n */\n icon?: string;\n /**\n * Whether the button is disabled and cannot be clicked anymore.\n * @description\n * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.\n * This is useful for scenarios where the action is temporarily unavailable.\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Displays the button in the secondary style.\n * @description\n * Applies a secondary visual style to the button, typically with a different background color or border.\n * This is used to differentiate less prominent actions from primary ones.\n * @optional\n */\n isSecondary?: boolean;\n /**\n * Function to be executed when the button is clicked.\n * @description\n * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,\n * such as submitting forms, navigating to pages, or performing any custom action.\n */\n onClick: MouseEventHandler<HTMLButtonElement>;\n /**\n * Whether the button should be displayed as a selectButton.\n * @description\n * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.\n * This changes the styling to indicate a selection state.\n * @optional\n * @default false\n */\n shouldShowAsSelectButton?: boolean;\n /**\n * Whether the text should be 'Roboto Medium'.\n * @description\n * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.\n * This can improve readability or match design guidelines.\n * @optional\n * @default true\n */\n shouldShowTextAsRobotoMedium?: boolean;\n /**\n * Shows a wait cursor instead of button text.\n * @description\n * Replaces the button content with a wait cursor animation, indicating that an action is in progress.\n * This provides visual feedback during loading or processing states.\n * @optional\n */\n shouldShowWaitCursor?: boolean;\n /**\n * Stops event propagation on click.\n * @description\n * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.\n * Useful in complex UI structures where event handling needs to be contained.\n * @optional\n */\n shouldStopPropagation?: boolean;\n /**\n * Optional button design override.\n * @description\n * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.\n * This provides flexibility for custom theming.\n * @optional\n */\n buttonDesign?: number;\n /**\n * Duration in seconds for the tap animation.\n * @description\n * Overrides how long the pressed state animation should take when the button is tapped.\n * Set this to `0` for an immediate press effect.\n * @optional\n */\n tapDuration?: number;\n};\n"],"mappings":"","ignoreList":[]}
@@ -89,4 +89,12 @@ export type ButtonProps = {
89
89
  * @optional
90
90
  */
91
91
  buttonDesign?: number;
92
+ /**
93
+ * Duration in seconds for the tap animation.
94
+ * @description
95
+ * Overrides how long the pressed state animation should take when the button is tapped.
96
+ * Set this to `0` for an immediate press effect.
97
+ * @optional
98
+ */
99
+ tapDuration?: number;
92
100
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.51",
3
+ "version": "5.0.52",
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": "43084aa83c88c5ac1eaa7846a53a6f07e328f266"
90
+ "gitHead": "3a3e55778a44dd7ecac7aa4d8acb6ab4eebea1c0"
91
91
  }