feat: create button-group plugin component (#42)

src/plugins/components/button-group.ts

@@ -0,0 +1,46 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption, defaultPluginOptions } from '../options'
+
+const defaultButtonGroupConfig = {}
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
+    return function ({ addComponents, theme }) {
+      const config = theme(
+        'shurikenUi.buttonGroup'
+      ) satisfies typeof defaultButtonGroupConfig
+
+      addComponents({
+        [`.${prefix}-button-group`]: {
+          [`@apply flex`]: {},
+
+          [`.${prefix}-button, .${prefix}-button-action, .${prefix}-button-icon`]:
+            {
+              [`@apply !border-e-0`]: {},
+              [`&:not(:first-child):not(:last-child)`]: {
+                [`@apply !rounded-none`]: {},
+              },
+              [`&:first-child`]: {
+                [`@apply !rounded-e-none`]: {},
+              },
+              [`&:last-child`]: {
+                [`@apply !border-e !rounded-s-none`]: {},
+              },
+            },
+        },
+      })
+    }
+  },
+  function () {
+    return {
+      theme: {
+        shurikenUi: {
+          buttonGroup: defaultButtonGroupConfig,
+        },
+      },
+    }
+  }
+)

src/plugins/components/index.ts

@@ -1,6 +1,7 @@
 import plugin from 'tailwindcss/plugin'
 import { defu } from 'defu'
 import { type PluginOption } from '../options'
+import buttonGroup from './button-group'
 import dropdown from './dropdown'
 import focus from './focus'
 import label from './label'
@@ -11,6 +12,7 @@ import slimscroll from './slimscroll'
 import tooltip from './tooltip'
 
 const components = [
+  buttonGroup,
   dropdown,
   focus,
   label,