chore(ButtonGroup): added vertical prop

src/ButtonGroup/ButtonGroup.stories.tsx

@@ -3,20 +3,25 @@ import { Story, Meta } from '@storybook/react'
 
 import ButtonGroup, { ButtonGroupProps } from '.'
 import Button from '../Button'
+import Radio from '../Radio'
 
 export default {
   title: 'Layout/ButtonGroup',
   component: ButtonGroup,
 } as Meta
 
-export const Default: Story<ButtonGroupProps> = (args) => {
+const Template: Story<ButtonGroupProps> = (args) => {
   return (
     <ButtonGroup {...args}>
-      <Button>1</Button>
-      <Button>2</Button>
-      <Button>3</Button>
-      <Button>4</Button>
+      <Button active>Button</Button>
+      <Button>Button</Button>
+      <Button>Button</Button>
     </ButtonGroup>
   )
 }
-Default.args = {}
+
+export const Default = Template.bind({})
+Default.args = { }
+
+export const Vertical = Template.bind({})
+Vertical.args = { vertical: true }

src/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react'
+import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 import { IComponentBaseProps } from '../types'
@@ -7,12 +8,15 @@ import { ButtonProps } from '../Button'
 
 export type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> &
   IComponentBaseProps & {
+    vertical?: boolean
     children: ReactElement<ButtonProps>[]
   }
 
 const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ children, dataTheme, className, ...props }, ref): JSX.Element => {
-    const classes = twMerge('btn-group', className)
+  ({ vertical, children, dataTheme, className, ...props }, ref): JSX.Element => {
+    const classes = twMerge('btn-group', className, clsx({
+      'btn-group-vertical': vertical
+    }))
 
     return (
       <div