43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
}
|