replace el-button-group with ButtonGroup

src/components/ui/button-group/ButtonGroup.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    import { buttonGroupVariants } from '.';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        orientation: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        role="group"
+        data-slot="button-group"
+        :data-orientation="props.orientation"
+        :class="cn(buttonGroupVariants({ orientation: props.orientation }), props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/button-group/ButtonGroupSeparator.vue

@@ -0,0 +1,22 @@
+<script setup>
+    import { Separator } from '@/components/ui/separator';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        orientation: { type: String, required: false, default: 'vertical' },
+        decorative: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <Separator
+        data-slot="button-group-separator"
+        v-bind="delegatedProps"
+        :orientation="props.orientation"
+        :class="cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', props.class)" />
+</template>

src/components/ui/button-group/ButtonGroupText.vue

@@ -0,0 +1,28 @@
+<script setup>
+    import { Primitive } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        orientation: { type: null, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false, default: 'div' }
+    });
+</script>
+
+<template>
+    <Primitive
+        role="group"
+        data-slot="button-group"
+        :data-orientation="props.orientation"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                'bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        ">
+        <slot />
+    </Primitive>
+</template>

src/components/ui/button-group/index.js

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as ButtonGroupSeparator } from './ButtonGroupSeparator.vue';
+export { default as ButtonGroupText } from './ButtonGroupText.vue';
+
+export const buttonGroupVariants = cva(
+    "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+    {
+        variants: {
+            orientation: {
+                horizontal:
+                    '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+                vertical:
+                    'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none'
+            }
+        },
+        defaultVariants: {
+            orientation: 'horizontal'
+        }
+    }
+);