{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { Ripple, RippleProps, useRipple } from '@raikou/ripple';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n getFontSize,\n getRadius,\n getSize,\n polymorphicFactory,\n PolymorphicFactory,\n RaikouColor,\n RaikouGradient,\n RaikouRadius,\n RaikouSize,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { RaikouTransition, Transition } from '../Transition';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { ButtonGroup } from './ButtonGroup/ButtonGroup';\nimport { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';\nimport {\n ButtonInnerStyle,\n ButtonLabelStyle,\n ButtonLoaderStyle,\n ButtonRootStyle,\n ButtonSectionStyle,\n} from './Button.css';\n\nexport type ButtonStylesNames = 'root' | 'inner' | 'loader' | 'section' | 'label';\nexport type ButtonVariant =\n | 'filled'\n | 'light'\n | 'outline'\n | 'transparent'\n | 'white'\n | 'subtle'\n | 'default'\n | 'gradient';\n\nexport type ButtonCssVariables = {\n root:\n | '--button-justify'\n | '--button-height'\n | '--button-padding-x'\n | '--button-fz'\n | '--button-radius'\n | '--button-bg'\n | '--button-hover'\n | '--button-hover-color'\n | '--button-color'\n | '--button-bd';\n};\n\nexport interface ButtonProps\n extends BoxProps,\n StylesApiProps,\n Pick, 'onClick'> {\n 'data-disabled'?: boolean;\n\n /** Controls button `height`, `font-size` and horizontal `padding`, `'sm'` by default */\n size?: RaikouSize | `compact-${RaikouSize}` | (string & {});\n\n /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */\n color?: RaikouColor;\n\n /** Sets `justify-content` of `inner` element, can be used to change distribution of sections and label, `'center'` by default */\n justify?: React.CSSProperties['justifyContent'];\n\n /** Content displayed on the left side of the button label */\n leftSection?: React.ReactNode;\n\n /** Content displayed on the right side of the button label */\n rightSection?: React.ReactNode;\n\n /** Determines whether button should take 100% width of its parent container, `false` by default */\n fullWidth?: boolean;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */\n radius?: RaikouRadius;\n\n /** Gradient configuration used when `variant=\"gradient\"`, default value is `theme.defaultGradient` */\n gradient?: RaikouGradient;\n\n /** Indicates disabled state */\n disabled?: boolean;\n\n /** Button content */\n children?: React.ReactNode;\n\n /** Indicate loading state */\n loading?: boolean;\n\n /** Props added to the `Loader` component (only visible when `loading` prop is set) */\n loaderProps?: LoaderProps;\n\n /** Loader position relative to button label */\n loaderPosition?: 'left' | 'right' | 'center';\n\n /** Determines whether button text color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */\n autoContrast?: boolean;\n\n /**\n * Whether the button should display a ripple effect on press.\n * @default false\n */\n enableRipple?: boolean;\n}\n\nexport type ButtonFactory = PolymorphicFactory<{\n props: ButtonProps;\n defaultRef: HTMLButtonElement;\n defaultComponent: 'button';\n stylesNames: ButtonStylesNames;\n vars: ButtonCssVariables;\n variant: ButtonVariant;\n staticComponents: {\n Group: typeof ButtonGroup;\n GroupSection: typeof ButtonGroupSection;\n };\n}>;\n\nconst loaderTransition: RaikouTransition = {\n in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n common: { transformOrigin: 'center' },\n transitionProperty: 'transform, opacity',\n};\n\nconst defaultProps: Partial = {\n enableRipple: false,\n loaderPosition: 'center',\n};\n\nconst varsResolver = createVarsResolver(\n (theme, { radius, color, gradient, variant, size, justify, autoContrast }) => {\n const colors = theme.variantColorResolver({\n color: color || theme.primaryColor,\n theme,\n gradient,\n variant: variant || 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--button-justify': justify,\n '--button-height': getSize(size, 'button-height'),\n '--button-padding-x': getSize(size, 'button-padding-x'),\n '--button-fz': size?.includes('compact')\n ? getFontSize(size.replace('compact-', ''))\n : getFontSize(size),\n '--button-radius': radius === undefined ? undefined : getRadius(radius),\n '--button-bg': color || variant ? colors.background : undefined,\n '--button-hover': color || variant ? colors.hover : undefined,\n '--button-color': colors.color,\n '--button-bd': color || variant ? colors.border : undefined,\n '--button-hover-color': color || variant ? colors.hoverColor : undefined,\n },\n };\n }\n);\n\nexport const Button = polymorphicFactory((_props, ref) => {\n const props = useProps('Button', defaultProps, _props);\n const {\n style,\n vars,\n className,\n color,\n disabled,\n enableRipple,\n children,\n leftSection,\n rightSection,\n fullWidth,\n variant,\n radius,\n loading,\n loaderProps,\n loaderPosition,\n gradient,\n classNames,\n styles,\n unstyled,\n 'data-disabled': dataDisabled,\n autoContrast,\n mod,\n onClick,\n ...others\n } = props;\n\n const { onClick: onRippleClickHandler, onClear: onClearRipple, ripples } = useRipple();\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n if (!enableRipple || disabled) {\n return;\n }\n\n onRippleClickHandler(e);\n },\n [enableRipple, disabled, onRippleClickHandler]\n );\n\n const getRippleProps = useCallback<() => RippleProps>(\n () => ({ ripples, onClear: onClearRipple }),\n [ripples, onClearRipple]\n );\n\n const getStyles = useStyles({\n name: 'Button',\n props,\n classes: {\n root: ButtonRootStyle,\n inner: ButtonInnerStyle,\n loader: ButtonLoaderStyle,\n section: ButtonSectionStyle,\n label: ButtonLabelStyle,\n },\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n\n const hasLeftSection = !!leftSection;\n const hasRightSection = !!rightSection;\n\n return (\n {\n onClick?.(event);\n handleClick(event);\n }}\n mod={[\n {\n disabled: disabled || dataDisabled,\n loading,\n block: fullWidth,\n 'with-left-section': hasLeftSection,\n 'with-right-section': hasRightSection,\n 'data-loader-position': loaderPosition,\n },\n mod,\n ]}\n {...others}\n >\n {loaderPosition === 'center' && (\n \n {(transitionStyles) => (\n \n \n \n )}\n \n )}\n\n \n {!loading && leftSection && (\n \n {leftSection}\n \n )}\n\n {loading && loaderPosition === 'left' && (\n \n {loading && (\n \n )}\n \n )}\n\n \n {children}\n \n\n {!loading && rightSection && (\n \n {rightSection}\n \n )}\n\n {loading && loaderPosition === 'right' && (\n \n {loading && (\n \n )}\n \n )}\n \n\n {enableRipple && }\n \n );\n});\n\nButton.displayName = '@raikou/core/Button';\nButton.Group = ButtonGroup;\nButton.GroupSection = ButtonGroupSection;\n"],"names":["rem","createVarsResolver","getSize","getFontSize","getRadius","polymorphicFactory","useProps","useRipple","useCallback","useStyles","ButtonRootStyle","ButtonInnerStyle","ButtonLoaderStyle","ButtonSectionStyle","ButtonLabelStyle","jsxs","UnstyledButton","jsx","Transition","Box","Loader","Ripple","ButtonGroup","ButtonGroupSection"],"mappings":"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"}