@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 2.95 kB
Source Map (JSON)
{"version":3,"file":"ButtonGroup.cjs","names":["createVarsResolver","rem","factory","useProps","Box","useStyles","classes"],"sources":["../../../../src/components/Button/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n factory,\n Factory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport classes from '../Button.module.css';\n\nexport type ButtonGroupStylesNames = 'group';\nexport type ButtonGroupCssVariables = {\n group: '--button-border-width';\n};\n\nexport interface ButtonGroupProps extends BoxProps, StylesApiProps<ButtonGroupFactory> {\n /** `Button` components */\n children?: React.ReactNode;\n\n /** Orientation of the group @default horizontal */\n orientation?: 'horizontal' | 'vertical';\n\n /** `border-width` of the child `Button` components. Numbers are converted to rem. @default 1 */\n borderWidth?: number | string;\n}\n\nexport type ButtonGroupFactory = Factory<{\n props: ButtonGroupProps;\n ref: HTMLDivElement;\n stylesNames: ButtonGroupStylesNames;\n vars: ButtonGroupCssVariables;\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n} satisfies Partial<ButtonGroupProps>;\n\nconst varsResolver = createVarsResolver<ButtonGroupFactory>((_, { borderWidth }) => ({\n group: { '--button-border-width': rem(borderWidth) },\n}));\n\nexport const ButtonGroup = factory<ButtonGroupFactory>((_props) => {\n const props = useProps('ButtonGroup', defaultProps, _props);\n const {\n className,\n style,\n classNames,\n styles,\n unstyled,\n orientation,\n vars,\n borderWidth,\n mod,\n attributes,\n ...others\n } = useProps('ButtonGroup', defaultProps, _props);\n\n const getStyles = useStyles<ButtonGroupFactory>({\n name: 'ButtonGroup',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'group',\n });\n\n return (\n <Box\n {...getStyles('group')}\n mod={[{ 'data-orientation': orientation }, mod]}\n role=\"group\"\n {...others}\n />\n );\n});\n\nButtonGroup.classes = classes;\nButtonGroup.varsResolver = varsResolver;\nButtonGroup.displayName = '@mantine/core/ButtonGroup';\n"],"mappings":";;;;;;;;;;;AAoCA,MAAM,eAAe,EACnB,aAAa,cACd;AAED,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,mBAAmB,EACnF,OAAO,EAAE,yBAAyBC,YAAAA,IAAI,YAAY,EAAE,EACrD,EAAE;AAEH,MAAa,cAAcC,gBAAAA,SAA6B,WAAW;CACjE,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,aACA,MACA,aACA,KACA,YACA,GAAG,WACDA,kBAAAA,SAAS,eAAe,cAAc,OAAO;AAiBjD,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAjBcC,mBAAAA,UAA8B;GAC9C,MAAM;GACN;GACA,SAAA,sBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;GACf,CAAC,CAIgB,QAAQ;EACtB,KAAK,CAAC,EAAE,oBAAoB,aAAa,EAAE,IAAI;EAC/C,MAAK;EACL,GAAI;EACJ,CAAA;EAEJ;AAEF,YAAY,UAAUC,sBAAAA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}