File size: 1,574 Bytes
5f40163 | 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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "#/utils/utils";
/** 12px slot (4px + 1px line + 4px at default rem) inside `px-1` menus/popovers. */
export const MENU_DIVIDER_VERTICAL_CLASS = "h-3";
const dividerVariants = cva(
"shrink-0 self-stretch min-w-full bg-[var(--oh-border)]",
{
variants: {
orientation: {
horizontal: "h-[1px]",
},
color: {
light: "bg-[var(--oh-border)]",
},
size: {
thin: "h-[1px]",
},
inset: {
none: "",
menu: "",
},
},
defaultVariants: {
orientation: "horizontal",
color: "light",
size: "thin",
inset: "none",
},
},
);
interface DividerProps extends VariantProps<typeof dividerVariants> {
className?: string;
testId?: string;
}
export function Divider({
orientation,
color,
size,
inset,
className,
testId,
}: DividerProps) {
if (inset === "menu") {
return (
<div
data-testid={testId}
role="separator"
className={cn(
"relative min-w-full shrink-0 self-stretch",
MENU_DIVIDER_VERTICAL_CLASS,
className,
)}
>
<div
aria-hidden
className="absolute top-1/2 -left-1 -right-1 h-px -translate-y-1/2 bg-[var(--oh-border)]"
/>
</div>
);
}
return (
<div
data-testid={testId}
role="separator"
className={cn(
dividerVariants({ orientation, color, size, inset }),
className,
)}
/>
);
}
|