Add shared WebUI layout primitives

2026-08-18 10:42:55 +02:00
parent dd7ad4d9c7
commit 6814a41ae4
22 changed files with 574 additions and 111 deletions
@@ -0,0 +1,42 @@
+import type { FormHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+export type DialogActionAlignment = "start" | "between" | "end";
+
+export type DialogActionsProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  align?: DialogActionAlignment;
+};
+
+export function DialogActions({ children, align = "end", className = "", ...props }: DialogActionsProps) {
+  return (
+    <div {...props} className={["dialog-actions", `dialog-actions-${align}`, className].filter(Boolean).join(" ")}>
+      {children}
+    </div>
+  );
+}
+
+export type DialogFormProps = FormHTMLAttributes<HTMLFormElement> & {
+  children: ReactNode;
+  spacing?: "compact" | "default" | "loose";
+};
+
+export function DialogForm({ children, spacing = "default", className = "", ...props }: DialogFormProps) {
+  return (
+    <form {...props} className={["dialog-form-layout", `dialog-form-spacing-${spacing}`, className].filter(Boolean).join(" ")}>
+      {children}
+    </form>
+  );
+}
+
+export type DialogSectionProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  variant?: "plain" | "separated" | "inset";
+};
+
+export function DialogSection({ children, variant = "plain", className = "", ...props }: DialogSectionProps) {
+  return (
+    <div {...props} className={["dialog-section-layout", `dialog-section-${variant}`, className].filter(Boolean).join(" ")}>
+      {children}
+    </div>
+  );
+}