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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Radio.cjs","names":["createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","RadioIcon","useStyles","RadioGroupContext","extractStyleProps","InlineInput","Box","classes","RadioGroup","RadioCard","RadioIndicator"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  RadioCard,\n  type RadioCardProps,\n  type RadioCardStylesNames,\n  type RadioCardFactory,\n  type RadioCardCssVariables,\n  type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n  RadioGroup,\n  RadioGroupContext,\n  type RadioGroupProps,\n  type RadioGroupStylesNames,\n  type RadioGroupFactory,\n  type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n  RadioIndicator,\n  type RadioIndicatorProps,\n  type RadioIndicatorStylesNames,\n  type RadioIndicatorFactory,\n  type RadioIndicatorCssVariables,\n  type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\nexport type RadioVariant = 'filled' | 'outline';\nexport type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';\nexport type RadioCssVariables = {\n  root:\n    | '--radio-size'\n    | '--radio-radius'\n    | '--radio-color'\n    | '--radio-icon-color'\n    | '--radio-icon-size';\n};\n\nexport interface RadioProps\n  extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Content of the `label` associated with the radio */\n  label?: React.ReactNode;\n\n  /** Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** A component that replaces the default radio icon (centered dot) */\n  icon?: React.FC<RadioIconProps>;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description displayed below the label */\n  description?: React.ReactNode;\n\n  /** Error displayed below the label */\n  error?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the radio when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n  props: RadioProps;\n  ref: HTMLInputElement;\n  stylesNames: RadioStylesNames;\n  vars: RadioCssVariables;\n  variant: RadioVariant;\n  staticComponents: {\n    Group: typeof RadioGroup;\n    Card: typeof RadioCard;\n    Indicator: typeof RadioIndicator;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n  (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--radio-size': getSize(size, 'radio-size'),\n        '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n        '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--radio-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n        '--radio-icon-size': getSize(size, 'radio-icon-size'),\n      },\n    };\n  }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n  const props = useProps('Radio', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    size,\n    label,\n    labelPosition,\n    description,\n    error,\n    radius,\n    color,\n    variant,\n    disabled,\n    wrapperProps,\n    icon: Icon = RadioIcon,\n    rootRef,\n    iconColor,\n    onChange,\n    mod,\n    attributes,\n    withErrorStyles,\n    checked,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioFactory>({\n    name: 'Radio',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(RadioGroupContext);\n\n  const contextSize = ctx?.size ?? size;\n  const componentSize = props.size ? size : contextSize;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n  const descriptionId = description ? `${uuid}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n  const describedBy =\n    [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n  const withContextProps = {\n    checked: contextChecked ?? checked,\n    name: rest.name ?? ctx?.name,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n    disabled: ctx?.disabled ?? disabled,\n  };\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Radio\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={componentSize}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={withContextProps.disabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={(contextChecked ?? checked) || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n        <Box\n          {...getStyles('radio', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          component=\"input\"\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          id={uuid}\n          type=\"radio\"\n          aria-describedby={describedBy}\n        />\n        <Icon {...getStyles('icon')} aria-hidden />\n      </Box>\n    </InlineInput>\n  );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n  export type Props = RadioProps;\n  export type StylesNames = RadioStylesNames;\n  export type Factory = RadioFactory;\n  export type Variant = RadioVariant;\n\n  export namespace Group {\n    export type Props = RadioGroupProps;\n    export type StylesNames = RadioGroupStylesNames;\n    export type Factory = RadioGroupFactory;\n    export type ContextValue = RadioGroupContextValue;\n  }\n\n  export namespace Card {\n    export type Props = RadioCardProps;\n    export type StylesNames = RadioCardStylesNames;\n    export type Factory = RadioCardFactory;\n    export type CssVariables = RadioCardCssVariables;\n    export type ContextValue = RadioCardContextValue;\n  }\n\n  export namespace Indicator {\n    export type Props = RadioIndicatorProps;\n    export type StylesNames = RadioIndicatorStylesNames;\n    export type Factory = RadioIndicatorFactory;\n    export type CssVariables = RadioIndicatorCssVariables;\n    export type Variant = RadioIndicatorVariant;\n  }\n}\n"],"mappings":"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"}