@mantine/core/cjs/components/Button/Button.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Button.cjs","names":["rem","createVarsResolver","getSize","getFontSize","getRadius","polymorphicFactory","useProps","useStyles","UnstyledButton","Transition","Box","Loader","classes","ButtonGroup","ButtonGroupSection"],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { MantineTransition, Transition } from '../Transition';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { ButtonGroup } from './ButtonGroup/ButtonGroup';\nimport { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';\nimport classes from './Button.module.css';\n\nexport type ButtonSize = MantineSize | `compact-${MantineSize}` | (string & {});\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 extends BoxProps, StylesApiProps<ButtonFactory> {\n  'data-disabled'?: boolean;\n\n  /** Controls button `height`, `font-size` and horizontal `padding` @default 'sm' */\n  size?: ButtonSize;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Sets `justify-content` of `inner` element, can be used to change distribution of sections and label @default 'center' */\n  justify?: React.CSSProperties['justifyContent'];\n\n  /** Content on the left side of the button label */\n  leftSection?: React.ReactNode;\n\n  /** Content on the right side of the button label */\n  rightSection?: React.ReactNode;\n\n  /** Sets `width: 100%` @default false */\n  fullWidth?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Gradient configuration used for `variant=\"gradient\"` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Sets `disabled` attribute, applies disabled styles */\n  disabled?: boolean;\n\n  /** Button content */\n  children?: React.ReactNode;\n\n  /** If set, the `Loader` component is displayed over the button */\n  loading?: boolean;\n\n  /** Props added to the `Loader` component (only visible when `loading` prop is set) */\n  loaderProps?: LoaderProps;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: 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: MantineTransition = {\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 varsResolver = createVarsResolver<ButtonFactory>(\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<ButtonFactory>((_props) => {\n  const props = useProps('Button', null, _props);\n  const {\n    style,\n    vars,\n    className,\n    color,\n    disabled,\n    children,\n    leftSection,\n    rightSection,\n    fullWidth,\n    variant,\n    radius,\n    loading,\n    loaderProps,\n    gradient,\n    classNames,\n    styles,\n    unstyled,\n    'data-disabled': dataDisabled,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ButtonFactory>({\n    name: 'Button',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const hasLeftSection = !!leftSection;\n  const hasRightSection = !!rightSection;\n\n  return (\n    <UnstyledButton\n      {...getStyles('root', { active: !disabled && !loading && !dataDisabled })}\n      unstyled={unstyled}\n      variant={variant}\n      disabled={disabled || loading}\n      mod={[\n        {\n          disabled: disabled || dataDisabled,\n          loading,\n          block: fullWidth,\n          'with-left-section': hasLeftSection,\n          'with-right-section': hasRightSection,\n        },\n        mod,\n      ]}\n      {...others}\n    >\n      {typeof loading === 'boolean' && (\n        <Transition mounted={loading} transition={loaderTransition} duration={150}>\n          {(transitionStyles) => (\n            <Box component=\"span\" {...getStyles('loader', { style: transitionStyles })} aria-hidden>\n              <Loader\n                color=\"var(--button-color)\"\n                size=\"calc(var(--button-height) / 1.8)\"\n                {...loaderProps}\n              />\n            </Box>\n          )}\n        </Transition>\n      )}\n\n      <span {...getStyles('inner')}>\n        {leftSection && (\n          <Box component=\"span\" {...getStyles('section')} mod={{ position: 'left' }}>\n            {leftSection}\n          </Box>\n        )}\n\n        <Box component=\"span\" mod={{ loading }} {...getStyles('label')}>\n          {children}\n        </Box>\n\n        {rightSection && (\n          <Box component=\"span\" {...getStyles('section')} mod={{ position: 'right' }}>\n            {rightSection}\n          </Box>\n        )}\n      </span>\n    </UnstyledButton>\n  );\n});\n\nButton.classes = classes;\nButton.varsResolver = varsResolver;\nButton.displayName = '@mantine/core/Button';\nButton.Group = ButtonGroup;\nButton.GroupSection = ButtonGroupSection;\n"],"mappings":"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"}