<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>
