Section

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7 
8export interface SectionProps extends useRender.ComponentProps<"section"> {
9  /** Optional card surface. Plain remains structural only. */
10  variant?: "plain" | "card";
11  /** Draw separators between direct children. */
12  dividers?: boolean;
13}
14 
15/** Structural surface with optional header, content, and footer slots. */
16export function Section({
17  className,
18  variant = "plain",
19  dividers = false,
20  render,
21  ...props
22}: SectionProps): React.ReactElement {
23  const defaultProps = {
24    className: cn(
25      "flex flex-col text-ink",
26      variant === "card" && "rounded-[var(--radius-12)] bg-layer-1",
27      dividers && "[&>*+*]:border-t [&>*+*]:border-hairline-soft",
28      className,
29    ),
30    "data-slot": "section",
31  };
32 
33  return useRender({
34    defaultTagName: "section",
35    props: mergeProps<"section">(defaultProps, props),
36    render,
37  });
38}
39 
40export function SectionHeader({
41  className,
42  render,
43  ...props
44}: useRender.ComponentProps<"div">): React.ReactElement {
45  const defaultProps = {
46    className,
47    "data-slot": "section-header",
48  };
49 
50  return useRender({
51    defaultTagName: "div",
52    props: mergeProps<"div">(defaultProps, props),
53    render,
54  });
55}
56 
57export function SectionTitle({
58  className,
59  render,
60  ...props
61}: useRender.ComponentProps<"h3">): React.ReactElement {
62  const defaultProps = {
63    className: cn("text-title3 text-ink", className),
64    "data-slot": "section-title",
65  };
66 
67  return useRender({
68    defaultTagName: "h3",
69    props: mergeProps<"h3">(defaultProps, props),
70    render,
71  });
72}
73 
74export function SectionSubtitle({
75  className,
76  render,
77  ...props
78}: useRender.ComponentProps<"p">): React.ReactElement {
79  const defaultProps = {
80    className: cn("text-small text-ink-muted", className),
81    "data-slot": "section-subtitle",
82  };
83 
84  return useRender({
85    defaultTagName: "p",
86    props: mergeProps<"p">(defaultProps, props),
87    render,
88  });
89}
90 
91export function SectionContent({
92  className,
93  render,
94  ...props
95}: useRender.ComponentProps<"div">): React.ReactElement {
96  const defaultProps = {
97    className,
98    "data-slot": "section-content",
99  };
100 
101  return useRender({
102    defaultTagName: "div",
103    props: mergeProps<"div">(defaultProps, props),
104    render,
105  });
106}
107 
108// … truncated