Open History to see the last commit
1import type { ComponentProps } from "react";
2
3import { cn } from "../../lib/utils";
4
5export function SettingsGroup({
6 variant = "grouped",
7 divided = true,
8 className,
9 ...props
10}: ComponentProps<"div"> & {
11 variant?: "grouped" | "plain";
12 divided?: boolean;
13}) {
14 return (
15 <div
16 data-slot="settings-group"
17 {...props}
18 className={cn(
19 "relative overflow-visible text-foreground",
20 variant === "grouped" ? "rounded-card surface-card-settings" : "space-y-1",
21 // Middle rows stay square; the first and last follow the card's corners, so a
22 // search pulse ring on them stays concentric with the card.
23 variant === "grouped" &&
24 divided &&
25 "[&>*+*]:border-t [&>*+*]:border-divider [&>[data-slot=settings-row]]:rounded-none [&>[data-slot=settings-row]:first-child]:rounded-t-card [&>[data-slot=settings-row]:last-child]:rounded-b-card",
26 className,
27 )}
28 />
29 );
30}