@mantine/core/cjs/components/Pill/PillGroup/PillGroup.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"PillGroup.cjs","names":["createVarsResolver","getSize","factory","useProps","PillsInputContext","useStyles","Box","classes"],"sources":["../../../../src/components/Pill/PillGroup/PillGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { PillsInputContext } from '../../PillsInput/PillsInput.context';\nimport classes from '../Pill.module.css';\n\nexport interface PillGroupContextValue {\n  size: MantineSize | (string & {}) | undefined;\n  disabled: boolean | undefined;\n}\n\nexport const PillGroupContext = createContext<PillGroupContextValue | null>(null);\n\nexport type PillGroupStylesNames = 'group';\nexport type PillGroupCssVariables = {\n  group: '--pg-gap';\n};\n\nexport interface PillGroupProps\n  extends BoxProps, StylesApiProps<PillGroupFactory>, ElementProps<'div'> {\n  /** Controls spacing between pills, by default controlled by `size` */\n  gap?: MantineSize | (string & {}) | number;\n\n  /** Controls size of the child `Pill` components and gap between them @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** If set, adds disabled to all child `Pill` components */\n  disabled?: boolean;\n}\n\nexport type PillGroupFactory = Factory<{\n  props: PillGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: PillGroupStylesNames;\n  vars: PillGroupCssVariables;\n  ctx: { size: MantineSize | (string & {}) | undefined };\n}>;\n\nconst varsResolver = createVarsResolver<PillGroupFactory>((_, { gap }, { size }) => ({\n  group: {\n    '--pg-gap': gap !== undefined ? getSize(gap) : getSize(size, 'pg-gap'),\n  },\n}));\n\nexport const PillGroup = factory<PillGroupFactory>((_props) => {\n  const props = useProps('PillGroup', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n  const pillsInputCtx = use(PillsInputContext);\n  const _size = pillsInputCtx?.size || size || undefined;\n\n  const getStyles = useStyles<PillGroupFactory>({\n    name: 'PillGroup',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    stylesCtx: { size: _size },\n    rootSelector: 'group',\n  });\n\n  return (\n    <PillGroupContext value={{ size: _size, disabled }}>\n      <Box size={_size} {...getStyles('group')} {...others} />\n    </PillGroupContext>\n  );\n});\n\nPillGroup.classes = classes;\nPillGroup.varsResolver = varsResolver;\nPillGroup.displayName = '@mantine/core/PillGroup';\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,oBAAA,GAAA,MAAA,eAA+D,KAAK;AA2BjF,MAAM,eAAeA,6BAAAA,oBAAsC,GAAG,EAAE,OAAO,EAAE,YAAY,EACnF,OAAO,EACL,YAAY,QAAQ,KAAA,IAAYC,iBAAAA,QAAQ,IAAI,GAAGA,iBAAAA,QAAQ,MAAM,SAAS,EACvE,EACF,EAAE;AAEH,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,MAAM,OAAO;CACjD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,SAAA,GAAA,MAAA,KADoBC,2BAAAA,kBAAkB,EACf,QAAQ,QAAQ,KAAA;CAE7C,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,EAAE,MAAM,OAAO;EAC1B,cAAc;EACf,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,OAAO;GAAE,MAAM;GAAO;GAAU;YAChD,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GAAK,MAAM;GAAO,GAAI,UAAU,QAAQ;GAAE,GAAI;GAAU,CAAA;EACvC,CAAA;EAErB;AAEF,UAAU,UAAUC,oBAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}