@particle-network/connectkit
Version:
8 lines (7 loc) • 4.92 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/components/button/styles.ts", "../../src/components/button/index.tsx"],
"sourcesContent": ["import { motion } from 'framer-motion';\nimport { css, styled } from 'styled-components';\n\ninterface ButtonContainerProps {\n $disabled?: boolean;\n $loading?: boolean;\n $color: 'primary' | 'secondary';\n}\nexport const ButtonContainer = styled.button<ButtonContainerProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 1;\n cursor: pointer;\n width: 100%;\n\n border-radius: var(--pcm-rounded-lg);\n font-weight: var(--pcm-button-font-weight);\n height: 47px;\n border: none;\n\n ${({ $color }) => {\n if ($color === 'primary') {\n return css`\n background: var(--pcm-primary-button-bankground);\n color: var(--pcm-primary-button-color);\n &:hover {\n background: var(--pcm-primary-button-hover-background);\n }\n `;\n } else if ($color === 'secondary') {\n return css`\n background: var(--pcm-secondary-button-bankground);\n color: var(--pcm-secondary-button-color);\n &:hover {\n background: var(--pcm-secondary-button-hover-background);\n }\n `;\n }\n return undefined;\n }}\n\n ${({ $disabled, $loading }) =>\n ($disabled || $loading) &&\n css`\n cursor: not-allowed;\n pointer-events: none;\n opacity: 0.5;\n div {\n opacity: 0.5;\n }\n `}\n\n &:hover {\n box-shadow: var(--pcm-button-hover-shadow);\n }\n`;\n\nexport const InlineBox = styled.div`\n display: inline-block;\n margin-right: 8px;\n`;\n\nexport const IconContainer = styled(motion.div)<{ $rounded?: boolean }>`\n position: relative;\n display: inline-block;\n vertical-align: middle;\n max-width: 20px;\n max-height: 20px;\n margin: 0 10px;\n &:first-child {\n margin-left: 0;\n }\n &:last-child {\n margin-right: 0;\n }\n ${(props) => {\n return (\n props.$rounded &&\n css`\n overflow: hidden;\n border-radius: var(--pcm-rounded-sm);\n `\n );\n }}\n svg {\n display: block;\n position: relative;\n max-width: 100%;\n height: auto;\n }\n`;\n", "import { type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react';\nimport ButtonLoadingIcon from '../../assets/icons/ButtonLoadingIcon';\nimport { FlexCenter } from '../modal/styles';\nimport { ButtonContainer, IconContainer } from './styles';\n\ninterface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'formAction'> {\n children: ReactNode;\n style?: CSSProperties;\n loading?: boolean;\n icon?: React.ReactNode;\n roundedIcon?: boolean;\n disabled?: boolean;\n color?: 'primary' | 'secondary';\n}\n\nconst Button = ({\n children,\n style,\n loading = false,\n disabled = false,\n color = 'primary',\n roundedIcon,\n onClick,\n icon,\n ...rest\n}: ButtonProps) => {\n return (\n <ButtonContainer\n style={style}\n onClick={(event) => {\n if (!disabled && !loading && onClick) onClick(event);\n }}\n $loading={Boolean(loading)}\n $disabled={disabled}\n $color={color}\n {...rest}\n >\n {loading && <ButtonLoadingIcon style={{ width: '20px', marginRight: '6px' }} />}\n <FlexCenter gap={6}>\n {icon && <IconContainer $rounded={roundedIcon}>{icon}</IconContainer>}\n {children}\n </FlexCenter>\n </ButtonContainer>\n );\n};\n\nexport default Button;\n"],
"mappings": ";;;;;;;;;;;;;;AAAA,SAAS,cAAc;AACvB,SAAS,KAAK,cAAc;AAD5B,IAQa,iBAkDA,WAKA;AA/Db,IAAAA,eAAA;AAAA;AAAA;AAQO,IAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAalC,CAAC,EAAE,OAAO,MAAM;AAChB,UAAI,WAAW,WAAW;AACxB,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOT,WAAW,WAAW,aAAa;AACjC,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOT;AACA,aAAO;AAAA,IACT;AAAA;AAAA,IAEE,CAAC,EAAE,WAAW,SAAS,OACtB,aAAa,aACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcG,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAKzB,IAAM,gBAAgB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,UAAU;AACX,aACE,MAAM,YACN;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AC/CgB,cACZ,YADY;AArClB,IAeM,QA+BC;AA9CP;AAAA;AAAA;AACA;AACA;AACA,IAAAC;AAYA,IAAM,SAAS,CAAC;AAAA,MACd;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA,IACL,MAAmB;AACjB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS,CAAC,UAAU;AAClB,gBAAI,CAAC,YAAY,CAAC,WAAW;AAAS,sBAAQ,KAAK;AAAA,UACrD;AAAA,UACA,UAAU,QAAQ,OAAO;AAAA,UACzB,WAAW;AAAA,UACX,QAAQ;AAAA,UACP,GAAG;AAAA,UAEH;AAAA,uBAAW,oBAAC,6BAAkB,OAAO,EAAE,OAAO,QAAQ,aAAa,MAAM,GAAG;AAAA,YAC7E,qBAAC,cAAW,KAAK,GACd;AAAA,sBAAQ,oBAAC,iBAAc,UAAU,aAAc,gBAAK;AAAA,cACpD;AAAA,eACH;AAAA;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,IAAO,iBAAQ;AAAA;AAAA;",
"names": ["init_styles", "init_styles"]
}