@chayns-components/core 5.0.0-beta.1390 → 5.0.0-beta.1394

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.
@@ -1 +1 @@
1
- {"version":3,"file":"AmountControl.js","names":["_react","require","_react2","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","useState","inputValue","setInputValue","toString","displayState","setDisplayState","useMemo","Number","isSafeInteger","inputRef","useRef","useEffect","hasFocus","checkForValidAmount","handleAmountAdd","useCallback","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","createElement","StyledAmountControl","onClick","$isDisabled","AnimatePresence","initial","includes","StyledMotionAmountControlButton","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","StyledInputWrapper","StyledAmountControlPseudoInput","$shouldShowWideInput","$shouldShowRightIcon","StyledAmountControlInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","$color","undefined","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledInputWrapper,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'normal' | 'maxAmount' | 'minAmount';\n\nexport type AmountControlProps = {\n /**\n * The amount that should be displayed.\n */\n amount?: number;\n /**\n * The icon that should be displayed if no amount is selected.\n */\n icon?: string;\n /**\n * The color of the icon.\n */\n iconColor?: string;\n /**\n * Whether the control should be disabled\n */\n isDisabled?: boolean;\n /**\n * A Text that should be displayed if no amount is selected;\n */\n label?: string;\n /**\n * The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n */\n maxAmount?: number;\n /**\n * The minimum allowed amount.\n */\n minAmount?: number;\n /**\n * A Function that is executed when the amount is changed\n */\n onChange?: (amount: number) => void;\n /**\n * Whether the label should be displayed even if an amount is selected.\n */\n shouldForceLabel?: boolean;\n /**\n * Whether the \"add\"-icon should be displayed if the minAmount is reached.\n */\n shouldShowAddIconOnMinAmount?: boolean;\n /**\n * Whether the icon should be displayed if no amount is selected\n */\n shouldShowIcon?: boolean;\n /**\n * Whether the input should be wider\n */\n shouldShowWideInput?: boolean;\n /**\n * Defines the amount that will change when adjusted\n */\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n iconColor,\n isDisabled = false,\n label,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldForceLabel = false,\n shouldShowAddIconOnMinAmount = false,\n shouldShowIcon = true,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /**\n * This function controls the displayState\n */\n useEffect(() => {\n switch (true) {\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n setDisplayState('minAmount');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /**\n * Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (typeof amount !== 'number') {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, minAmount, onChange, step]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) * step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n let inputLabel = inputValue;\n\n if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {\n inputLabel = label;\n }\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n <AnimatePresence initial={false}>\n {['normal'].includes(displayState) && (\n <StyledMotionAmountControlButton\n key=\"left_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledInputWrapper>\n {displayState === 'maxAmount' ||\n inputValue === '0' ||\n (shouldForceLabel && typeof label === 'string') ||\n inputLabel === label ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n >\n {inputLabel}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={inputLabel}\n />\n )}\n </StyledInputWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n onClick={\n displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n }\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon\n icons={\n !['normal'].includes(displayState) && icon\n ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n }\n size={14}\n color={iconColor ?? 'white'}\n />\n </StyledMotionAmountControlButton>\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n icon,\n iconColor,\n inputLabel,\n inputValue,\n isDisabled,\n label,\n maxAmount,\n minAmount,\n shouldForceLabel,\n shouldShowIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"AmountControl.js","names":["_react","require","_react2","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","useState","inputValue","setInputValue","toString","displayState","setDisplayState","useMemo","Number","isSafeInteger","inputRef","useRef","useEffect","hasFocus","checkForValidAmount","handleAmountAdd","useCallback","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","createElement","StyledAmountControl","onClick","$isDisabled","AnimatePresence","initial","includes","StyledMotionAmountControlButton","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","StyledInputWrapper","StyledAmountControlPseudoInput","$shouldShowWideInput","$shouldShowRightIcon","StyledAmountControlInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","$color","undefined","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEvent,\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledInputWrapper,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'normal' | 'maxAmount' | 'minAmount';\n\nexport type AmountControlProps = {\n /**\n * The amount that should be displayed.\n */\n amount?: number;\n /**\n * The icon that should be displayed if no amount is selected.\n */\n icon?: string;\n /**\n * The color of the icon.\n */\n iconColor?: string;\n /**\n * Whether the control should be disabled\n */\n isDisabled?: boolean;\n /**\n * A Text that should be displayed if no amount is selected;\n */\n label?: string;\n /**\n * The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n */\n maxAmount?: number;\n /**\n * The minimum allowed amount.\n */\n minAmount?: number;\n /**\n * A Function that is executed when the amount is changed\n */\n onChange?: (amount: number) => void;\n /**\n * Whether the label should be displayed even if an amount is selected.\n */\n shouldForceLabel?: boolean;\n /**\n * Whether the \"add\"-icon should be displayed if the minAmount is reached.\n */\n shouldShowAddIconOnMinAmount?: boolean;\n /**\n * Whether the icon should be displayed if no amount is selected\n */\n shouldShowIcon?: boolean;\n /**\n * Whether the input should be wider\n */\n shouldShowWideInput?: boolean;\n /**\n * Defines the amount that will change when adjusted\n */\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n iconColor,\n isDisabled = false,\n label,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldForceLabel = false,\n shouldShowAddIconOnMinAmount = false,\n shouldShowIcon = true,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /**\n * This function controls the displayState\n */\n useEffect(() => {\n switch (true) {\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n setDisplayState('minAmount');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /**\n * Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (typeof amount !== 'number') {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, minAmount, onChange, step]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) * step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n let inputLabel = inputValue;\n\n if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {\n inputLabel = label;\n }\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n <AnimatePresence initial={false}>\n {['normal'].includes(displayState) && (\n <StyledMotionAmountControlButton\n key=\"left_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledInputWrapper>\n {displayState === 'maxAmount' ||\n inputValue === '0' ||\n (shouldForceLabel && typeof label === 'string') ||\n inputLabel === label ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n >\n {inputLabel}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={inputLabel}\n />\n )}\n </StyledInputWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n onClick={\n displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n }\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon\n icons={\n !['normal'].includes(displayState) && icon\n ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n }\n size={14}\n color={iconColor ?? 'white'}\n />\n </StyledMotionAmountControlButton>\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n icon,\n iconColor,\n inputLabel,\n inputValue,\n isDisabled,\n label,\n maxAmount,\n minAmount,\n shouldForceLabel,\n shouldShowIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
@@ -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, ReactNode, 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 WaitCursor from './wait-cursor/WaitCursor';\n\nexport type ButtonProps = {\n /**\n * The label of the button\n */\n children?: ReactNode;\n /**\n * Additional class names for the button element\n */\n className?: string;\n /**\n * An icon that is displayed on the left-hand side of the button text\n */\n icon?: string;\n /**\n * Whether the button is disabled and cannot be clicked anymore.\n */\n isDisabled?: boolean;\n /**\n * Displays the button in the secondary style\n */\n isSecondary?: boolean;\n /**\n * Function to be executed when the button is clicked\n */\n onClick: MouseEventHandler<HTMLButtonElement>;\n /**\n * Whether the button should be displayed as a selectButton.\n */\n shouldShowAsSelectButton?: boolean;\n /**\n * Whether the text should be 'Roboto Medium'\n */\n shouldShowTextAsRobotoMedium?: boolean;\n /**\n * Shows a wait cursor instead of button text\n */\n shouldShowWaitCursor?: boolean;\n /**\n * Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n /**\n * Optional button design override\n */\n buttonDesign?: number;\n};\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 } }}\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":[]}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ //# sourceMappingURL=Button.types.js.map
@@ -0,0 +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 +1 @@
1
- {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledInputWrapper","StyledMotionAmountControlButton","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","createElement","onClick","$isDisabled","initial","includes","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","$shouldShowWideInput","$shouldShowRightIcon","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","$color","undefined","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledInputWrapper,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'normal' | 'maxAmount' | 'minAmount';\n\nexport type AmountControlProps = {\n /**\n * The amount that should be displayed.\n */\n amount?: number;\n /**\n * The icon that should be displayed if no amount is selected.\n */\n icon?: string;\n /**\n * The color of the icon.\n */\n iconColor?: string;\n /**\n * Whether the control should be disabled\n */\n isDisabled?: boolean;\n /**\n * A Text that should be displayed if no amount is selected;\n */\n label?: string;\n /**\n * The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n */\n maxAmount?: number;\n /**\n * The minimum allowed amount.\n */\n minAmount?: number;\n /**\n * A Function that is executed when the amount is changed\n */\n onChange?: (amount: number) => void;\n /**\n * Whether the label should be displayed even if an amount is selected.\n */\n shouldForceLabel?: boolean;\n /**\n * Whether the \"add\"-icon should be displayed if the minAmount is reached.\n */\n shouldShowAddIconOnMinAmount?: boolean;\n /**\n * Whether the icon should be displayed if no amount is selected\n */\n shouldShowIcon?: boolean;\n /**\n * Whether the input should be wider\n */\n shouldShowWideInput?: boolean;\n /**\n * Defines the amount that will change when adjusted\n */\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n iconColor,\n isDisabled = false,\n label,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldForceLabel = false,\n shouldShowAddIconOnMinAmount = false,\n shouldShowIcon = true,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /**\n * This function controls the displayState\n */\n useEffect(() => {\n switch (true) {\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n setDisplayState('minAmount');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /**\n * Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (typeof amount !== 'number') {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, minAmount, onChange, step]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) * step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n let inputLabel = inputValue;\n\n if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {\n inputLabel = label;\n }\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n <AnimatePresence initial={false}>\n {['normal'].includes(displayState) && (\n <StyledMotionAmountControlButton\n key=\"left_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledInputWrapper>\n {displayState === 'maxAmount' ||\n inputValue === '0' ||\n (shouldForceLabel && typeof label === 'string') ||\n inputLabel === label ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n >\n {inputLabel}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={inputLabel}\n />\n )}\n </StyledInputWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n onClick={\n displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n }\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon\n icons={\n !['normal'].includes(displayState) && icon\n ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n }\n size={14}\n color={iconColor ?? 'white'}\n />\n </StyledMotionAmountControlButton>\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n icon,\n iconColor,\n inputLabel,\n inputValue,\n isDisabled,\n label,\n maxAmount,\n minAmount,\n shouldForceLabel,\n shouldShowIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledInputWrapper","StyledMotionAmountControlButton","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","createElement","onClick","$isDisabled","initial","includes","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","$shouldShowWideInput","$shouldShowRightIcon","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","$color","undefined","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEvent,\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledInputWrapper,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'normal' | 'maxAmount' | 'minAmount';\n\nexport type AmountControlProps = {\n /**\n * The amount that should be displayed.\n */\n amount?: number;\n /**\n * The icon that should be displayed if no amount is selected.\n */\n icon?: string;\n /**\n * The color of the icon.\n */\n iconColor?: string;\n /**\n * Whether the control should be disabled\n */\n isDisabled?: boolean;\n /**\n * A Text that should be displayed if no amount is selected;\n */\n label?: string;\n /**\n * The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n */\n maxAmount?: number;\n /**\n * The minimum allowed amount.\n */\n minAmount?: number;\n /**\n * A Function that is executed when the amount is changed\n */\n onChange?: (amount: number) => void;\n /**\n * Whether the label should be displayed even if an amount is selected.\n */\n shouldForceLabel?: boolean;\n /**\n * Whether the \"add\"-icon should be displayed if the minAmount is reached.\n */\n shouldShowAddIconOnMinAmount?: boolean;\n /**\n * Whether the icon should be displayed if no amount is selected\n */\n shouldShowIcon?: boolean;\n /**\n * Whether the input should be wider\n */\n shouldShowWideInput?: boolean;\n /**\n * Defines the amount that will change when adjusted\n */\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n iconColor,\n isDisabled = false,\n label,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldForceLabel = false,\n shouldShowAddIconOnMinAmount = false,\n shouldShowIcon = true,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /**\n * This function controls the displayState\n */\n useEffect(() => {\n switch (true) {\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n setDisplayState('minAmount');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /**\n * Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (typeof amount !== 'number') {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, minAmount, onChange, step]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) * step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n let inputLabel = inputValue;\n\n if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {\n inputLabel = label;\n }\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n <AnimatePresence initial={false}>\n {['normal'].includes(displayState) && (\n <StyledMotionAmountControlButton\n key=\"left_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledInputWrapper>\n {displayState === 'maxAmount' ||\n inputValue === '0' ||\n (shouldForceLabel && typeof label === 'string') ||\n inputLabel === label ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n >\n {inputLabel}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={inputLabel}\n />\n )}\n </StyledInputWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n onClick={\n displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n }\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon\n icons={\n !['normal'].includes(displayState) && icon\n ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n }\n size={14}\n color={iconColor ?? 'white'}\n />\n </StyledMotionAmountControlButton>\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n icon,\n iconColor,\n inputLabel,\n inputValue,\n isDisabled,\n label,\n maxAmount,\n minAmount,\n shouldForceLabel,\n shouldShowIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAGRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,mBAAmB,EACnBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,kBAAkB,EAClBC,+BAA+B,QAC5B,wBAAwB;AA2D/B,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,MAAM;EACNC,IAAI;EACJC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,SAAS;EACTC,SAAS,GAAG,CAAC;EACbC,QAAQ;EACRC,gBAAgB,GAAG,KAAK;EACxBC,4BAA4B,GAAG,KAAK;EACpCC,cAAc,GAAG,IAAI;EACrBC,mBAAmB,GAAG,KAAK;EAC3BC,IAAI,EAAEC,QAAQ,GAAG;AACrB,CAAC,KAAK;EACF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGxB,QAAQ,CAACe,SAAS,CAAC;EACzD,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAG1B,QAAQ,CAACe,SAAS,CAACY,QAAQ,CAAC,CAAC,CAAC;EAClE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG7B,QAAQ,CAAe,SAAS,CAAC;EAEzE,MAAMqB,IAAI,GAAGvB,OAAO,CAChB,MAAOgC,MAAM,CAACC,aAAa,CAACT,QAAQ,CAAC,IAAIA,QAAQ,IAAI,CAAC,GAAGA,QAAQ,GAAG,CAAE,EACtE,CAACA,QAAQ,CACb,CAAC;EAED,MAAMU,QAAQ,GAAGjC,MAAM,CAAmB,IAAI,CAAC;;EAE/C;AACJ;AACA;EACIF,SAAS,CAAC,MAAM;IACZ,QAAQ,IAAI;MACR,KAAKiB,SAAS,IAAIS,WAAW,IAAIT,SAAS;QACtCe,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ,KAAKN,WAAW,GAAGR,SAAS;QACxBc,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ,KAAKN,WAAW,KAAKR,SAAS,IAAIQ,WAAW,IAAI,CAAC,IAAIL,4BAA4B;QAC9EW,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ;QACIA,eAAe,CAAC,SAAS,CAAC;IAClC;EACJ,CAAC,EAAE,CAACN,WAAW,EAAET,SAAS,EAAEC,SAAS,EAAEG,4BAA4B,CAAC,CAAC;EAErE,MAAMe,QAAQ,GAAGnC,OAAO,CAAC,MAAM8B,YAAY,KAAK,SAAS,EAAE,CAACA,YAAY,CAAC,CAAC;;EAE1E;AACJ;AACA;EACI/B,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOY,MAAM,KAAK,QAAQ,EAAE;MAC5B;IACJ;IAEAe,cAAc,CAACvB,mBAAmB,CAAC;MAAEQ,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAAC;IACrEW,aAAa,CAACzB,mBAAmB,CAAC;MAAEQ,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAACY,QAAQ,CAAC,CAAC,CAAC;EACnF,CAAC,EAAE,CAAClB,MAAM,EAAEK,SAAS,EAAEC,SAAS,CAAC,CAAC;EAElC,MAAMmB,eAAe,GAAGtC,WAAW,CAAC,MAAM;IACtC4B,cAAc,CAAEW,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAGnC,mBAAmB,CAAC;QAClCQ,MAAM,EAAE0B,SAAS,GAAGd,IAAI;QACxBN,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACoB,SAAS,CAAC;MACvB;MAEA,OAAO,OAAO3B,MAAM,KAAK,QAAQ,GAAG0B,SAAS,GAAGC,SAAS;IAC7D,CAAC,CAAC;IACFV,aAAa,CAAES,SAAS,IACpBlC,mBAAmB,CAAC;MAChBQ,MAAM,EAAEqB,MAAM,CAACK,SAAS,CAAC,GAAGd,IAAI;MAChCN,SAAS;MACTD;IACJ,CAAC,CAAC,CAACa,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAAClB,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEK,IAAI,CAAC,CAAC;EAElD,MAAMgB,kBAAkB,GAAGzC,WAAW,CAAC,MAAM;IACzC,IAAIgC,YAAY,KAAK,SAAS,EAAE;MAC5B;IACJ;IAEAJ,cAAc,CAAEW,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAGnC,mBAAmB,CAAC;QAClCQ,MAAM,EAAE0B,SAAS,GAAGd,IAAI;QACxBN,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACoB,SAAS,CAAC;MACvB;MAEA,OAAOA,SAAS;IACpB,CAAC,CAAC;IACFV,aAAa,CAAES,SAAS,IACpBlC,mBAAmB,CAAC;MAChBQ,MAAM,EAAEqB,MAAM,CAACK,SAAS,CAAC,GAAGd,IAAI;MAChCN,SAAS;MACTD;IACJ,CAAC,CAAC,CAACa,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAACC,YAAY,EAAEd,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEK,IAAI,CAAC,CAAC;EAExD,MAAMiB,iBAAiB,GAAG1C,WAAW,CAAC,MAAM;IACxC,IAAI2B,WAAW,KAAKR,SAAS,EAAE;MAC3B;IACJ;IAEA,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACD,SAAS,GAAGM,IAAI,CAAC;IAC9B;IAEAG,cAAc,CAACT,SAAS,GAAGM,IAAI,CAAC;IAChCK,aAAa,CAAC,CAACX,SAAS,GAAGM,IAAI,EAAEM,QAAQ,CAAC,CAAC,CAAC;EAChD,CAAC,EAAE,CAACJ,WAAW,EAAER,SAAS,EAAEC,QAAQ,EAAEK,IAAI,CAAC,CAAC;EAE5C,MAAMkB,qBAAqB,GAAG3C,WAAW,CAAC,MAAM;IAC5C,IAAI6B,UAAU,KAAK,GAAG,EAAE;MACpBe,MAAM,CAACC,UAAU,CAAC,MAAM;QACpBT,QAAQ,CAACU,OAAO,EAAEC,KAAK,CAAC,CAAC;MAC7B,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,MAAM;MACHN,kBAAkB,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACA,kBAAkB,EAAEZ,UAAU,CAAC,CAAC;EAEpC,MAAMmB,eAAe,GAAGhD,WAAW,CAAC,MAAM;IACtC,MAAMiD,YAAY,GAAG5C,mBAAmB,CAAC;MACrCc,SAAS;MACTD,SAAS;MACTL,MAAM,EAAEqC,IAAI,CAACC,KAAK,CAACjB,MAAM,CAACL,UAAU,CAAC,GAAGJ,IAAI,CAAC,GAAGA;IACpD,CAAC,CAAC;IAEFG,cAAc,CAACqB,YAAY,CAAC;IAC5BnB,aAAa,CAACmB,YAAY,CAAClB,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAI,OAAOX,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC6B,YAAY,CAAC;IAC1B;IAEA,IAAIpB,UAAU,KAAK,EAAE,EAAE;MACnBC,aAAa,CAACX,SAAS,CAACY,QAAQ,CAAC,CAAC,CAAC;IACvC;EACJ,CAAC,EAAE,CAACF,UAAU,EAAEX,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEK,IAAI,CAAC,CAAC;EAEtD,MAAM2B,iBAAiB,GAAGpD,WAAW,CAChCqD,KAAoC,IAAK;IACtC,MAAM;MAAEC;IAAM,CAAC,GAAGD,KAAK,CAACE,MAAM;IAE9B,MAAMC,WAAW,GAAGtB,MAAM,CAACoB,KAAK,CAACG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAEpD,IAAID,WAAW,GAAGrC,SAAS,IAAIA,SAAS,KAAK,CAAC,EAAE;MAC5CW,aAAa,CAAC,GAAG,CAAC;MAElB;IACJ;IAEAA,aAAa,CAAC0B,WAAW,KAAK,CAAC,GAAG,EAAE,GAAGA,WAAW,CAACzB,QAAQ,CAAC,CAAC,CAAC;EAClE,CAAC,EACD,CAACZ,SAAS,CACd,CAAC;EAED,IAAIuC,UAAU,GAAG7B,UAAU;EAE3B,IAAI,OAAOZ,KAAK,KAAK,QAAQ,KAAKe,YAAY,KAAK,SAAS,IAAIX,gBAAgB,CAAC,EAAE;IAC/EqC,UAAU,GAAGzC,KAAK;EACtB;EAEA,OAAOf,OAAO,CACV,mBACIH,KAAA,CAAA4D,aAAA,CAACpD,mBAAmB;IAACqD,OAAO,EAAElB,iBAAkB;IAACmB,WAAW,EAAE7C;EAAW,gBACrEjB,KAAA,CAAA4D,aAAA,CAAC7D,eAAe;IAACgE,OAAO,EAAE;EAAM,GAC3B,CAAC,QAAQ,CAAC,CAACC,QAAQ,CAAC/B,YAAY,CAAC,iBAC9BjC,KAAA,CAAA4D,aAAA,CAAChD,+BAA+B;IAC5BqD,GAAG,EAAC,aAAa;IACjBF,OAAO,EAAE;MAAEG,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7CZ,OAAO,EAAEnB,kBAAmB;IAC5BgC,QAAQ,EAAE9C,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIR,SAAU;IACxD0C,WAAW,EAAElC,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIR;EAAU,gBAE3DpB,KAAA,CAAA4D,aAAA,CAACrD,IAAI;IAACoE,KAAK,EAAE,CAAC,aAAa,CAAE;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAC;EAAO,CAAE,CAC1B,CAExB,CAAC,eAClB7E,KAAA,CAAA4D,aAAA,CAACjD,kBAAkB,QACdsB,YAAY,KAAK,WAAW,IAC7BH,UAAU,KAAK,GAAG,IACjBR,gBAAgB,IAAI,OAAOJ,KAAK,KAAK,QAAS,IAC/CyC,UAAU,KAAKzC,KAAK,gBAChBlB,KAAA,CAAA4D,aAAA,CAAClD,8BAA8B;IAC3BmD,OAAO,EAAEjB,qBAAsB;IAC/BkC,oBAAoB,EAAErD,mBAAoB;IAC1CsD,oBAAoB,EAAE,CAAC,CAAC,WAAW,CAAC,CAACf,QAAQ,CAAC/B,YAAY;EAAE,GAE3D0B,UAC2B,CAAC,gBAEjC3D,KAAA,CAAA4D,aAAA,CAACnD,wBAAwB;IACrBuE,GAAG,EAAE3C,QAAS;IACd4C,aAAa,EAAEhD,YAAa;IAC5BiD,eAAe,EAAE1D,cAAe;IAChCsD,oBAAoB,EAAErD,mBAAoB;IAC1C0D,SAAS,EAAE7C,QAAS;IACpB8C,MAAM,EAAEnC,eAAgB;IACxB5B,QAAQ,EAAEgC,iBAAkB;IAC5BE,KAAK,EAAEI;EAAW,CACrB,CAEW,CAAC,eACrB3D,KAAA,CAAA4D,aAAA,CAAC7D,eAAe;IAACgE,OAAO,EAAE;EAAM,gBAC5B/D,KAAA,CAAA4D,aAAA,CAAChD,+BAA+B;IAC5BqD,GAAG,EAAC,cAAc;IAClBF,OAAO,EAAE;MAAEG,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7CY,MAAM,EAAEpD,YAAY,KAAK,WAAW,GAAG,kBAAkB,GAAGqD,SAAU;IACtEzB,OAAO,EACH5B,YAAY,KAAK,WAAW,GAAGS,kBAAkB,GAAGH,eACvD;IACDmC,QAAQ,EAAEvD,SAAS,GAAGS,WAAW,IAAIT,SAAS,GAAG,KAAM;IACvD2C,WAAW,EAAE3C,SAAS,GAAGS,WAAW,IAAIT,SAAS,GAAG;EAAM,gBAE1DnB,KAAA,CAAA4D,aAAA,CAACrD,IAAI;IACDoE,KAAK,EACD,CAAC,CAAC,QAAQ,CAAC,CAACX,QAAQ,CAAC/B,YAAY,CAAC,IAAIlB,IAAI,GACpC,CAACkB,YAAY,KAAK,WAAW,GAAG,aAAa,GAAGlB,IAAI,CAAC,GACrD,CAACkB,YAAY,KAAK,WAAW,GAAG,aAAa,GAAG,YAAY,CACrE;IACD2C,IAAI,EAAE,EAAG;IACTC,KAAK,EAAE7D,SAAS,IAAI;EAAQ,CAC/B,CAC4B,CACpB,CACA,CACxB,EACD,CACIY,WAAW,EACXK,YAAY,EACZM,eAAe,EACfG,kBAAkB,EAClBE,qBAAqB,EACrBD,iBAAiB,EACjBM,eAAe,EACfI,iBAAiB,EACjBf,QAAQ,EACRvB,IAAI,EACJC,SAAS,EACT2C,UAAU,EACV7B,UAAU,EACVb,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTE,gBAAgB,EAChBE,cAAc,EACdC,mBAAmB,CAE3B,CAAC;AACL,CAAC;AAEDZ,aAAa,CAAC0E,WAAW,GAAG,eAAe;AAE3C,eAAe1E,aAAa","ignoreList":[]}
@@ -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, ReactNode, 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 WaitCursor from './wait-cursor/WaitCursor';\n\nexport type ButtonProps = {\n /**\n * The label of the button\n */\n children?: ReactNode;\n /**\n * Additional class names for the button element\n */\n className?: string;\n /**\n * An icon that is displayed on the left-hand side of the button text\n */\n icon?: string;\n /**\n * Whether the button is disabled and cannot be clicked anymore.\n */\n isDisabled?: boolean;\n /**\n * Displays the button in the secondary style\n */\n isSecondary?: boolean;\n /**\n * Function to be executed when the button is clicked\n */\n onClick: MouseEventHandler<HTMLButtonElement>;\n /**\n * Whether the button should be displayed as a selectButton.\n */\n shouldShowAsSelectButton?: boolean;\n /**\n * Whether the text should be 'Roboto Medium'\n */\n shouldShowTextAsRobotoMedium?: boolean;\n /**\n * Shows a wait cursor instead of button text\n */\n shouldShowWaitCursor?: boolean;\n /**\n * Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n /**\n * Optional button design override\n */\n buttonDesign?: number;\n};\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","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":"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","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Button.types.js.map
@@ -0,0 +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,49 +1,4 @@
1
- import { FC, MouseEventHandler, ReactNode } from 'react';
2
- export type ButtonProps = {
3
- /**
4
- * The label of the button
5
- */
6
- children?: ReactNode;
7
- /**
8
- * Additional class names for the button element
9
- */
10
- className?: string;
11
- /**
12
- * An icon that is displayed on the left-hand side of the button text
13
- */
14
- icon?: string;
15
- /**
16
- * Whether the button is disabled and cannot be clicked anymore.
17
- */
18
- isDisabled?: boolean;
19
- /**
20
- * Displays the button in the secondary style
21
- */
22
- isSecondary?: boolean;
23
- /**
24
- * Function to be executed when the button is clicked
25
- */
26
- onClick: MouseEventHandler<HTMLButtonElement>;
27
- /**
28
- * Whether the button should be displayed as a selectButton.
29
- */
30
- shouldShowAsSelectButton?: boolean;
31
- /**
32
- * Whether the text should be 'Roboto Medium'
33
- */
34
- shouldShowTextAsRobotoMedium?: boolean;
35
- /**
36
- * Shows a wait cursor instead of button text
37
- */
38
- shouldShowWaitCursor?: boolean;
39
- /**
40
- * Stops event propagation on click
41
- */
42
- shouldStopPropagation?: boolean;
43
- /**
44
- * Optional button design override
45
- */
46
- buttonDesign?: number;
47
- };
1
+ import { FC } from 'react';
2
+ import type { ButtonProps } from './Button.types';
48
3
  declare const Button: FC<ButtonProps>;
49
4
  export default Button;
@@ -0,0 +1,92 @@
1
+ import type { MouseEventHandler, ReactNode } from 'react';
2
+ export type ButtonProps = {
3
+ /**
4
+ * The label of the button.
5
+ * @description
6
+ * The content to be displayed inside the button. This can be text, icons, or any React node.
7
+ * It serves as the primary label for the button's action.
8
+ * @optional
9
+ */
10
+ children?: ReactNode;
11
+ /**
12
+ * Additional class names for the button element.
13
+ * @description
14
+ * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.
15
+ * Multiple classes can be provided as a space-separated string.
16
+ * @optional
17
+ */
18
+ className?: string;
19
+ /**
20
+ * An icon that is displayed on the left-hand side of the button text.
21
+ * @description
22
+ * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.
23
+ * This enhances the visual representation of the button's function.
24
+ * @optional
25
+ */
26
+ icon?: string;
27
+ /**
28
+ * Whether the button is disabled and cannot be clicked anymore.
29
+ * @description
30
+ * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.
31
+ * This is useful for scenarios where the action is temporarily unavailable.
32
+ * @optional
33
+ */
34
+ isDisabled?: boolean;
35
+ /**
36
+ * Displays the button in the secondary style.
37
+ * @description
38
+ * Applies a secondary visual style to the button, typically with a different background color or border.
39
+ * This is used to differentiate less prominent actions from primary ones.
40
+ * @optional
41
+ */
42
+ isSecondary?: boolean;
43
+ /**
44
+ * Function to be executed when the button is clicked.
45
+ * @description
46
+ * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,
47
+ * such as submitting forms, navigating to pages, or performing any custom action.
48
+ */
49
+ onClick: MouseEventHandler<HTMLButtonElement>;
50
+ /**
51
+ * Whether the button should be displayed as a selectButton.
52
+ * @description
53
+ * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.
54
+ * This changes the styling to indicate a selection state.
55
+ * @optional
56
+ * @default false
57
+ */
58
+ shouldShowAsSelectButton?: boolean;
59
+ /**
60
+ * Whether the text should be 'Roboto Medium'.
61
+ * @description
62
+ * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.
63
+ * This can improve readability or match design guidelines.
64
+ * @optional
65
+ * @default true
66
+ */
67
+ shouldShowTextAsRobotoMedium?: boolean;
68
+ /**
69
+ * Shows a wait cursor instead of button text.
70
+ * @description
71
+ * Replaces the button content with a wait cursor animation, indicating that an action is in progress.
72
+ * This provides visual feedback during loading or processing states.
73
+ * @optional
74
+ */
75
+ shouldShowWaitCursor?: boolean;
76
+ /**
77
+ * Stops event propagation on click.
78
+ * @description
79
+ * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.
80
+ * Useful in complex UI structures where event handling needs to be contained.
81
+ * @optional
82
+ */
83
+ shouldStopPropagation?: boolean;
84
+ /**
85
+ * Optional button design override.
86
+ * @description
87
+ * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.
88
+ * This provides flexibility for custom theming.
89
+ * @optional
90
+ */
91
+ buttonDesign?: number;
92
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.1390",
3
+ "version": "5.0.0-beta.1394",
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": "528bcbf9d5c2b77104dd64e4f9b8f3d60328b10b"
89
+ "gitHead": "7e87cb437f1c4e9bd93884d9cbc9df1351758a57"
90
90
  }