genseki/packages/ui/src/components/primitives/separator.tsx at dd44cd0e33a04c5689b1deaec41c52cae08442d2 · softnetics/genseki · GitHub

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
'use client'
import React from 'react'

import * as SeparatorPrimitive from '@radix-ui/react-separator'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '../../utils/cn'

/**
 * Shadcn component
 */

const separator = cva('shrink-0', {
  variants: {
    variant: {
      solid:
        'bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
      dashed: `bg-size-[12px_12px] bg-repeat
        data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=horizontal]:bg-[linear-gradient(to_right,var(--color-border-primary)_50%,transparent_50%)]
        data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px data-[orientation=vertical]:bg-[linear-gradient(to_bottom,var(--color-border-primary)_50%,transparent_50%)]
        `,
    },
  },
  defaultVariants: {
    variant: 'solid',
  },
})

type SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive.Root> &
  VariantProps<typeof separator>

function Separator({
  className,
  orientation = 'horizontal',
  variant,
  decorative = true,
  ...props
}: SeparatorProps) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(separator({ variant }), className)}
      {...props}
    />
  )
}

export { Separator }