feat(ButtonGroup): new component (#88)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/theme/button-group.ts

@@ -0,0 +1,32 @@
+export const buttonGroupVariant = {
+  buttonGroup: {
+    horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',
+    vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'
+  }
+}
+
+export const buttonGroupVariantWithRoot = {
+  buttonGroup: {
+    horizontal: {
+      root: 'group',
+      base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
+    },
+    vertical: {
+      root: 'group',
+      base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
+    }
+  }
+}
+
+export default {
+  slots: {
+    base: 'relative'
+  },
+
+  variants: {
+    orientation: {
+      horizontal: 'inline-flex -space-x-px',
+      vertical: 'flex flex-col -space-y-px'
+    }
+  }
+}

src/theme/button.ts

@@ -1,3 +1,5 @@
+import { buttonGroupVariant } from './button-group'
+
 export default (config: { colors: string[] }) => ({
   slots: {
     base: 'rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
@@ -7,6 +9,7 @@ export default (config: { colors: string[] }) => ({
     trailingIcon: 'shrink-0'
   },
   variants: {
+    ...buttonGroupVariant,
     color: {
       ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
       white: '',

src/theme/index.ts

@@ -5,6 +5,7 @@ export { default as avatarGroup } from './avatar-group'
 export { default as badge } from './badge'
 export { default as breadcrumb } from './breadcrumb'
 export { default as button } from './button'
+export { default as buttonGroup } from './button-group'
 export { default as card } from './card'
 export { default as checkbox } from './checkbox'
 export { default as chip } from './chip'

src/theme/input.ts

@@ -1,3 +1,5 @@
+import { buttonGroupVariantWithRoot } from './button-group'
+
 export default (config: { colors: string[] }) => {
   return {
     slots: {
@@ -10,6 +12,7 @@ export default (config: { colors: string[] }) => {
       trailingIcon: 'shrink-0 text-gray-400 dark:text-gray-500'
     },
     variants: {
+      ...buttonGroupVariantWithRoot,
       size: {
         xs: {
           base: 'px-2 py-1 text-xs',