Centralize shared WebUI structural primitives

2026-08-18 13:17:31 +02:00
parent ee5c881df9
commit 7685a103e8
26 changed files with 767 additions and 81 deletions
@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type ContentSectionProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+  as?: "section" | "article";
+  children: ReactNode;
+  density?: "none" | "compact" | "default";
+  layout?: "flow" | "stack";
+  spacing?: "none" | "block";
+  surface?: "panel" | "subtle";
+};
+
+export default function ContentSection({
+  as: Component = "section",
+  children,
+  density = "none",
+  layout = "flow",
+  spacing = "block",
+  surface = "panel",
+  className = "",
+  ...props
+}: ContentSectionProps) {
+  return (
+    <Component
+      {...props}
+      className={[
+        "content-section",
+        `content-section-density-${density}`,
+        `content-section-layout-${layout}`,
+        `content-section-spacing-${spacing}`,
+        `content-section-surface-${surface}`,
+        className
+      ].filter(Boolean).join(" ")}
+    >
+      {children}
+    </Component>
+  );
+}