Separator

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

'use client';

import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
import type * as React from 'react';
import { cn } from '@/lib/utils';

/**
 * A separator element accessible to screen readers.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Separator](https://caprice-ui.com/docs/components/separator)
 *
 * API Reference: [Base UI Separator](https://base-ui.com/react/components/separator)
 */
export namespace Separator {
  export type State = SeparatorPrimitive.State;
  export type Props = React.ComponentProps<typeof SeparatorPrimitive>;
}

export function Separator({ className, orientation = 'horizontal', ...props }: Separator.Props) {
  return (
    <SeparatorPrimitive
      className={cn(
        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
        className
      )}
      data-slot="separator"
      orientation={orientation}
      {...props}
    />
  );
}