<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cn, omitClass } from '@/lib/utils';
import { Separator } from '@/components/core/separator';

defineOptions({ inheritAttrs: false });

const attrs = useAttrs();
const passthroughAttrs = computed(() =>
  omitClass(attrs as Record<string, unknown>),
);
const attrClass = computed(() => (attrs.class as string | undefined) ?? '');
</script>

<template>
  <Separator
    v-bind="passthroughAttrs"
    data-slot="sidebar-separator"
    data-sidebar="separator"
    :class="
      cn(
        'bg-sidebar-border mx-2 w-auto group-data-[collapsible=icon]:hidden',
        attrClass,
      )
    "
  >
    <slot />
  </Separator>
</template>
