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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Switch.cjs","names":["createVarsResolver","getRadius","getSize","getThemeColor","factory","useProps","SwitchGroupContext","useStyles","extractStyleProps","InlineInput","Box","classes","InlineInputClasses","SwitchGroup"],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { SwitchGroup, SwitchGroupContext } from './SwitchGroup/SwitchGroup';\nimport classes from './Switch.module.css';\n\nexport type SwitchStylesNames =\n  | 'root'\n  | 'track'\n  | 'trackLabel'\n  | 'thumb'\n  | 'input'\n  | InlineInputStylesNames;\n\nexport type SwitchCssVariables = {\n  root:\n    | '--switch-radius'\n    | '--switch-height'\n    | '--switch-width'\n    | '--switch-thumb-size'\n    | '--switch-label-font-size'\n    | '--switch-track-label-padding'\n    | '--switch-color';\n};\n\nexport interface SwitchProps\n  extends BoxProps, StylesApiProps<SwitchFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Id used to bind input and label, if not passed, unique id will be generated instead */\n  id?: string;\n\n  /** Content of the label associated with the switch */\n  label?: React.ReactNode;\n\n  /** Inner label when the `Switch` is in unchecked state */\n  offLabel?: React.ReactNode;\n\n  /** Inner label when the `Switch` is in checked state */\n  onLabel?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of all elements */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Icon inside the thumb of the switch */\n  thumbIcon?: React.ReactNode;\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  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** If set, displays a colored dot inside the thumb that matches the track background color @default true */\n  withThumbIndicator?: boolean;\n}\n\nexport type SwitchFactory = Factory<{\n  props: SwitchProps;\n  ref: HTMLInputElement;\n  stylesNames: SwitchStylesNames;\n  vars: SwitchCssVariables;\n  staticComponents: {\n    Group: typeof SwitchGroup;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withThumbIndicator: true,\n} satisfies Partial<SwitchProps>;\n\nconst varsResolver = createVarsResolver<SwitchFactory>((theme, { radius, color, size }) => ({\n  root: {\n    '--switch-radius': radius === undefined ? undefined : getRadius(radius),\n    '--switch-height': getSize(size, 'switch-height'),\n    '--switch-width': getSize(size, 'switch-width'),\n    '--switch-thumb-size': getSize(size, 'switch-thumb-size'),\n    '--switch-label-font-size': getSize(size, 'switch-label-font-size'),\n    '--switch-track-label-padding': getSize(size, 'switch-track-label-padding'),\n    '--switch-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const Switch = factory<SwitchFactory>((_props) => {\n  const props = useProps('Switch', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    offLabel,\n    onLabel,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    thumbIcon,\n    checked,\n    defaultChecked,\n    onChange,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    rootRef,\n    mod,\n    withThumbIndicator,\n    attributes,\n    ...others\n  } = props;\n\n  const ctx = use(SwitchGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<SwitchFactory>({\n    name: 'Switch',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const _disabled = disabled || ctx?.isDisabled?.(rest.value as string);\n\n  const [_checked, handleChange] = useUncontrolled({\n    value: withContextProps.checked ?? checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n  });\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Switch\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={_disabled}\n      bodyElement=\"label\"\n      labelElement=\"span\"\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <input\n        {...rest}\n        {...withContextProps}\n        disabled={_disabled}\n        checked={_checked}\n        data-checked={withContextProps.checked}\n        onChange={(event) => {\n          withContextProps.onChange?.(event);\n          handleChange(event.currentTarget.checked);\n        }}\n        id={uuid}\n        type=\"checkbox\"\n        role=\"switch\"\n        inert={rest.inert}\n        {...getStyles('input')}\n      />\n\n      <Box\n        aria-hidden=\"true\"\n        component=\"span\"\n        mod={{ error, 'label-position': labelPosition, 'without-labels': !onLabel && !offLabel }}\n        {...getStyles('track')}\n      >\n        <Box\n          component=\"span\"\n          mod={{ 'reduce-motion': true, 'with-thumb-indicator': withThumbIndicator && !thumbIcon }}\n          {...getStyles('thumb')}\n        >\n          {thumbIcon}\n        </Box>\n        <span {...getStyles('trackLabel')}>{_checked ? onLabel : offLabel}</span>\n      </Box>\n    </InlineInput>\n  );\n});\n\nSwitch.classes = { ...classes, ...InlineInputClasses };\nSwitch.varsResolver = varsResolver;\nSwitch.displayName = '@mantine/core/Switch';\nSwitch.Group = SwitchGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmGA,MAAM,eAAe;CACnB,eAAe;CACf,oBAAoB;CACrB;AAED,MAAM,eAAeA,6BAAAA,oBAAmC,OAAO,EAAE,QAAQ,OAAO,YAAY,EAC1F,MAAM;CACJ,mBAAmB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CACvE,mBAAmBC,iBAAAA,QAAQ,MAAM,gBAAgB;CACjD,kBAAkBA,iBAAAA,QAAQ,MAAM,eAAe;CAC/C,uBAAuBA,iBAAAA,QAAQ,MAAM,oBAAoB;CACzD,4BAA4BA,iBAAAA,QAAQ,MAAM,yBAAyB;CACnE,gCAAgCA,iBAAAA,QAAQ,MAAM,6BAA6B;CAC3E,kBAAkB,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;CACzD,EACF,EAAE;AAEH,MAAa,SAASC,gBAAAA,SAAwB,WAAW;CACvD,MAAM,QAAQC,kBAAAA,SAAS,UAAU,cAAc,OAAO;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,UACA,SACA,IACA,MACA,QACA,cACA,WACA,SACA,gBACA,UACA,eACA,aACA,OACA,UACA,SACA,SACA,KACA,oBACA,YACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,MAAA,KAAUC,oBAAAA,mBAAmB;CACnC,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN;EACA,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,OAAO;CACtD,MAAM,QAAA,GAAA,eAAA,OAAa,GAAG;CAEtB,MAAM,mBAAmB;EACvB,SAAS,KAAK,MAAM,SAAS,KAAK,MAAgB,IAAI;EACtD,WAAW,UAA+C;AACxD,QAAK,SAAS,MAAM;AACpB,cAAW,MAAM;;EAEpB;CAED,MAAM,YAAY,YAAY,KAAK,aAAa,KAAK,MAAgB;CAErE,MAAM,CAAC,UAAU,iBAAA,GAAA,eAAA,iBAAgC;EAC/C,OAAO,iBAAiB,WAAW;EACnC,cAAc;EACd,YAAY;EACb,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,oBAAAA,aAAD;EACE,GAAI,UAAU,OAAO;EACrB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU;EACV,aAAY;EACZ,cAAa;EACD;EACJ;EACE;EACV,gBAAc,iBAAiB;EACtB;EACT,KAAK;EACA;EACO;EACZ,OAAO,KAAK;EACZ,GAAI;EACJ,GAAI;YAvBN,CAyBE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GACE,GAAI;GACJ,GAAI;GACJ,UAAU;GACV,SAAS;GACT,gBAAc,iBAAiB;GAC/B,WAAW,UAAU;AACnB,qBAAiB,WAAW,MAAM;AAClC,iBAAa,MAAM,cAAc,QAAQ;;GAE3C,IAAI;GACJ,MAAK;GACL,MAAK;GACL,OAAO,KAAK;GACZ,GAAI,UAAU,QAAQ;GACtB,CAAA,EAEF,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;GACE,eAAY;GACZ,WAAU;GACV,KAAK;IAAE;IAAO,kBAAkB;IAAe,kBAAkB,CAAC,WAAW,CAAC;IAAU;GACxF,GAAI,UAAU,QAAQ;aAJxB,CAME,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;IACE,WAAU;IACV,KAAK;KAAE,iBAAiB;KAAM,wBAAwB,sBAAsB,CAAC;KAAW;IACxF,GAAI,UAAU,QAAQ;cAErB;IACG,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,aAAa;cAAG,WAAW,UAAU;IAAgB,CAAA,CACrE;KACM;;EAEhB;AAEF,OAAO,UAAU;CAAE,GAAGC,sBAAAA;CAAS,GAAGC,oBAAAA;CAAoB;AACtD,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,QAAQC,oBAAAA"}