<script lang="ts">
  import Root from 'bits-ui';
  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';

  type Props = WithoutChildren<Root.Separator.RootProps> & {
    class?: string;
  };

  let {
    ref = $bindable(null),
    class: className,
    orientation = 'horizontal',
    decorative = true,
    ...restProps
  }: Props = $props();
</script>

<Root.Separator.Root
  bind:ref
  data-slot="separator"
  {orientation}
  {decorative}
  class={cn(
    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
    className
  )}
  {...restProps}
/>