File size: 1,456 Bytes
0bfe2e3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
'use client';

import { cn } from '../core/styling';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import { cva } from 'class-variance-authority';
import * as React from 'react';

/* -------------------------------------------------------------------------------------------------
 * Anatomy
 * -----------------------------------------------------------------------------------------------*/

export const SeparatorAnatomy = {
  root: cva(['UI-Separator__root', 'shrink-0 bg-[--border]'], {
    variants: {
      orientation: {
        horizontal: 'w-full h-[1px]',
        vertical: 'h-full w-[1px]',
      },
    },
  }),
};

/* -------------------------------------------------------------------------------------------------
 * Separator
 * -----------------------------------------------------------------------------------------------*/

export type SeparatorProps = React.ComponentPropsWithoutRef<
  typeof SeparatorPrimitive.Root
>;

export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
  (props, ref) => {
    const {
      className,
      orientation = 'horizontal',
      decorative = true,
      ...rest
    } = props;

    return (
      <SeparatorPrimitive.Root
        ref={ref}
        decorative={decorative}
        orientation={orientation}
        className={cn(SeparatorAnatomy.root({ orientation }), className)}
        {...rest}
      />
    );
  }
);

Separator.displayName = 'Separator';