{"version":3,"file":"ButtonGroup.cjs","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 { ButtonGroupStyle } from '../Button.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, `horizontal` by default */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** `border-width` of the child `Button` components. Numbers are converted to rem. Default value in `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: Partial<ButtonGroupProps> = {\n  orientation: 'horizontal',\n};\n\nconst varsResolver = createVarsResolver<ButtonGroupFactory>((_, { borderWidth }) => ({\n  group: { '--button-border-width': rem(borderWidth) },\n}));\n\nexport const ButtonGroup = factory<ButtonGroupFactory>((_props, ref) => {\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    variant,\n    mod,\n    ...others\n  } = useProps('ButtonGroup', defaultProps, _props);\n\n  const getStyles = useStyles<ButtonGroupFactory>({\n    name: 'ButtonGroup',\n    props,\n    classes: {\n      group: ButtonGroupStyle,\n    },\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    rootSelector: 'group',\n  });\n\n  return (\n    <Box\n      {...getStyles('group')}\n      ref={ref}\n      variant={variant}\n      mod={[{ 'data-orientation': orientation }, mod]}\n      role=\"group\"\n      {...others}\n    />\n  );\n});\n\nButtonGroup.displayName = '@raikou/core/ButtonGroup';\n"],"names":["createVarsResolver","rem","factory","useProps","useStyles","ButtonGroupStyle","jsx","Box"],"mappings":";;;;;;;;;;;;;;;AAoCA,MAAM,YAA0C,GAAA;AAAA,EAC9C,WAAa,EAAA;AACf,CAAA;AAEA,MAAM,eAAeA,qCAAuC,CAAA,CAAC,CAAG,EAAA,EAAE,aAAmB,MAAA;AAAA,EACnF,KAAO,EAAA,EAAE,uBAAyB,EAAAC,OAAA,CAAI,WAAW,CAAE;AACrD,CAAE,CAAA,CAAA;AAEK,MAAM,WAAc,GAAAC,eAAA,CAA4B,CAAC,MAAA,EAAQ,GAAQ,KAAA;AACtE,EAAA,MAAM,KAAQ,GAAAC,iBAAA,CAAS,aAAe,EAAA,YAAA,EAAc,MAAM,CAAA;AAC1D,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAAA,iBAAA,CAAS,aAAe,EAAA,YAAA,EAAc,MAAM,CAAA;AAEhD,EAAA,MAAM,YAAYC,mBAA8B,CAAA;AAAA,IAC9C,IAAM,EAAA,aAAA;AAAA,IACN,KAAA;AAAA,IACA,OAAS,EAAA;AAAA,MACP,KAAO,EAAAC;AAAA,KACT;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAc,EAAA;AAAA,GACf,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAU,OAAO,CAAA;AAAA,MACrB,GAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAK,CAAC,EAAE,kBAAoB,EAAA,WAAA,IAAe,GAAG,CAAA;AAAA,MAC9C,IAAK,EAAA,OAAA;AAAA,MACJ,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AAED,WAAA,CAAY,WAAc,GAAA,0BAAA;;;;"}