diff --git a/src/admin/components.css b/src/admin/components.css index bd9fa6d..ca5f505 100644 --- a/src/admin/components.css +++ b/src/admin/components.css @@ -255,12 +255,23 @@ gap: 12px; } +.admin-modal-heading { + min-width: 0; +} + .admin-modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); } +.admin-modal-subtitle { + margin: 2px 0 0; + font-size: 12.5px; + font-weight: 500; + color: var(--text-secondary); +} + .admin-modal-close { flex-shrink: 0; display: inline-flex; diff --git a/src/admin/components/FormModal.tsx b/src/admin/components/FormModal.tsx index 8431c25..4c0d8df 100644 --- a/src/admin/components/FormModal.tsx +++ b/src/admin/components/FormModal.tsx @@ -15,10 +15,15 @@ export interface FormModalProps { onClose: () => void; onSubmit?: () => void; // called when user clicks primary button (only if provided) title: string; + /** Optional muted line shown under the title in the header. */ + subtitle?: ReactNode; children: ReactNode; // modal body (form fields) submitLabel?: string; // primary button text cancelLabel?: string; // cancel button text loading?: boolean; + /** Disable the primary (submit) button — e.g. until the form is valid. + * Keeps the button visibly greyed out instead of clickable-but-inert. */ + submitDisabled?: boolean; hideFooter?: boolean; // for "view-only" modals size?: "sm" | "md" | "lg"; // optional closeOnBackdrop?: boolean; // default true @@ -35,10 +40,12 @@ export default function FormModal({ onClose, onSubmit, title, + subtitle, children, submitLabel = "Uložit", cancelLabel = "Zrušit", loading = false, + submitDisabled = false, hideFooter = false, size = "md", closeOnBackdrop = true, @@ -107,9 +114,12 @@ export default function FormModal({ transition={{ duration, ease }} >
-

- {title} -

+
+

+ {title} +

+ {subtitle &&

{subtitle}

} +
{!hideCloseButton && (