Separator

1import { cva, type VariantProps } from "class-variance-authority";
2import { View } from "react-native";
3 
4// Components
5export const Separator = ({
6  className,
7  orientation,
8  thickness,
9  ...props
10}: React.ComponentProps<typeof View> &
11  VariantProps<typeof separatorVariants>) => {
12  return (
13    <View
14      className={separatorVariants({ className, orientation, thickness })}
15      data-slot="separator"
16      {...props}
17    />
18  );
19};
20 
21// Styles
22const separatorVariants = cva("h-10 bg-border", {
23  compoundVariants: [
24    {
25      class: "h-hairline",
26      orientation: "horizontal",
27      thickness: "thin",
28    },
29    {
30      class: "h-1",
31      orientation: "horizontal",
32      thickness: "thick",
33    },
34    {
35      class: "w-hairline",
36      orientation: "vertical",
37      thickness: "thin",
38    },
39    {
40      class: "w-1",
41      orientation: "vertical",
42      thickness: "thick",
43    },
44  ],
45  defaultVariants: {
46    orientation: "horizontal",
47    thickness: "thin",
48  },
49  variants: {
50    orientation: {
51      horizontal: "w-full",
52      vertical: "h-full",
53    },
54    thickness: {
55      thick: "",
56      thin: "",
57    },
58  },
59});