@rovula/ui 0.1.34 → 0.1.35

package/dist/esm/types/patterns/form-dialog/FormDialog.d.ts

@@ -31,6 +31,11 @@ export type FormDialogProps = {
     extraAction?: FormDialogAction;
     scrollable?: boolean;
     className?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
     /**
      * When provided, the confirm button becomes type="submit" and is linked to this form id.
      * Use together with a <Form id={formId} .../> inside children.

package/dist/esm/types/patterns/form-dialog/FormDialog.stories.d.ts

@@ -20,6 +20,11 @@ declare const meta: {
         extraAction?: import("./FormDialog").FormDialogAction | undefined;
         scrollable?: boolean | undefined;
         className?: string | undefined;
+        headerClassName?: string | undefined;
+        titleClassName?: string | undefined;
+        descriptionClassName?: string | undefined;
+        bodyClassName?: string | undefined;
+        footerClassName?: string | undefined;
         formId?: string | undefined;
         testId?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/index.d.ts

@@ -1728,6 +1728,11 @@ type FormDialogProps = {
     extraAction?: FormDialogAction;
     scrollable?: boolean;
     className?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
     /**
      * When provided, the confirm button becomes type="submit" and is linked to this form id.
      * Use together with a <Form id={formId} .../> inside children.

package/dist/patterns/form-dialog/FormDialog.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogTrigger, } from "@/components/Dialog/Dialog";
 import Button from "@/components/Button/Button";
-export const FormDialog = ({ open, onOpenChange, title, description, children, trigger, confirmAction, cancelAction, extraAction, scrollable = false, className, formId, testId, }) => {
+import { cn } from "@/utils/cn";
+export const FormDialog = ({ open, onOpenChange, title, description, children, trigger, confirmAction, cancelAction, extraAction, scrollable = false, className, headerClassName, titleClassName, descriptionClassName, bodyClassName, footerClassName, formId, testId, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasFooter = confirmAction || cancelAction || extraAction;
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: className, "data-testid": testId, children: [_jsxs(DialogHeader, { children: [title && (_jsx(DialogTitle, { "data-testid": testId && `${testId}-title`, children: title })), description && (_jsx(DialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), children && (_jsx(DialogBody, { scrollable: scrollable, children: children })), hasFooter && (_jsxs(DialogFooter, { className: extraAction ? "justify-between" : undefined, children: [extraAction && (_jsx(Button, { type: (_a = extraAction.type) !== null && _a !== void 0 ? _a : "button", variant: (_b = extraAction.variant) !== null && _b !== void 0 ? _b : "outline", color: (_c = extraAction.color) !== null && _c !== void 0 ? _c : "secondary", fullwidth: false, disabled: extraAction.disabled, isLoading: extraAction.isLoading, onClick: extraAction.onClick, className: extraAction.className, "data-testid": testId && `${testId}-extra-button`, children: extraAction.label })), _jsxs("div", { className: "flex items-center gap-4", children: [cancelAction && (_jsx(Button, { type: (_d = cancelAction.type) !== null && _d !== void 0 ? _d : "button", variant: (_e = cancelAction.variant) !== null && _e !== void 0 ? _e : "outline", color: (_f = cancelAction.color) !== null && _f !== void 0 ? _f : "primary", fullwidth: false, disabled: cancelAction.disabled, isLoading: cancelAction.isLoading, onClick: cancelAction.onClick, className: cancelAction.className, "data-testid": testId && `${testId}-cancel-button`, children: cancelAction.label })), confirmAction && (_jsx(Button, { type: formId ? "submit" : (_g = confirmAction.type) !== null && _g !== void 0 ? _g : "button", form: formId, variant: (_h = confirmAction.variant) !== null && _h !== void 0 ? _h : "solid", color: (_j = confirmAction.color) !== null && _j !== void 0 ? _j : "primary", fullwidth: false, disabled: confirmAction.disabled, isLoading: confirmAction.isLoading, onClick: confirmAction.onClick, className: confirmAction.className, "data-testid": testId && `${testId}-confirm-button`, children: confirmAction.label }))] })] }))] })] }));
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: className, "data-testid": testId, children: [_jsxs(DialogHeader, { className: headerClassName, children: [title && (_jsx(DialogTitle, { className: titleClassName, "data-testid": testId && `${testId}-title`, children: title })), description && (_jsx(DialogDescription, { className: descriptionClassName, "data-testid": testId && `${testId}-description`, children: description }))] }), children && (_jsx(DialogBody, { className: bodyClassName, scrollable: scrollable, children: children })), hasFooter && (_jsxs(DialogFooter, { className: cn(extraAction && "justify-between", footerClassName), children: [extraAction && (_jsx(Button, { type: (_a = extraAction.type) !== null && _a !== void 0 ? _a : "button", variant: (_b = extraAction.variant) !== null && _b !== void 0 ? _b : "outline", color: (_c = extraAction.color) !== null && _c !== void 0 ? _c : "secondary", fullwidth: false, disabled: extraAction.disabled, isLoading: extraAction.isLoading, onClick: extraAction.onClick, className: extraAction.className, "data-testid": testId && `${testId}-extra-button`, children: extraAction.label })), _jsxs("div", { className: "flex items-center gap-4", children: [cancelAction && (_jsx(Button, { type: (_d = cancelAction.type) !== null && _d !== void 0 ? _d : "button", variant: (_e = cancelAction.variant) !== null && _e !== void 0 ? _e : "outline", color: (_f = cancelAction.color) !== null && _f !== void 0 ? _f : "primary", fullwidth: false, disabled: cancelAction.disabled, isLoading: cancelAction.isLoading, onClick: cancelAction.onClick, className: cancelAction.className, "data-testid": testId && `${testId}-cancel-button`, children: cancelAction.label })), confirmAction && (_jsx(Button, { type: formId ? "submit" : (_g = confirmAction.type) !== null && _g !== void 0 ? _g : "button", form: formId, variant: (_h = confirmAction.variant) !== null && _h !== void 0 ? _h : "solid", color: (_j = confirmAction.color) !== null && _j !== void 0 ? _j : "primary", fullwidth: false, disabled: confirmAction.disabled, isLoading: confirmAction.isLoading, onClick: confirmAction.onClick, className: confirmAction.className, "data-testid": testId && `${testId}-confirm-button`, children: confirmAction.label }))] })] }))] })] }));
 };
 FormDialog.displayName = "FormDialog";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/patterns/form-dialog/FormDialog.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/Dialog/Dialog";
 import Button from "@/components/Button/Button";
 import Loading from "@/components/Loading/Loading";
+import { cn } from "@/utils/cn";
 
 export type FormDialogAction = {
   label: string;
@@ -46,6 +47,11 @@ export type FormDialogProps = {
   extraAction?: FormDialogAction;
   scrollable?: boolean;
   className?: string;
+  headerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
   /**
    * When provided, the confirm button becomes type="submit" and is linked to this form id.
    * Use together with a <Form id={formId} .../> inside children.
@@ -66,6 +72,11 @@ export const FormDialog: React.FC<FormDialogProps> = ({
   extraAction,
   scrollable = false,
   className,
+  headerClassName,
+  titleClassName,
+  descriptionClassName,
+  bodyClassName,
+  footerClassName,
   formId,
   testId,
 }) => {
@@ -75,25 +86,25 @@ export const FormDialog: React.FC<FormDialogProps> = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
       <DialogContent className={className} data-testid={testId}>
-        <DialogHeader>
+        <DialogHeader className={headerClassName}>
           {title && (
-            <DialogTitle data-testid={testId && `${testId}-title`}>
+            <DialogTitle className={titleClassName} data-testid={testId && `${testId}-title`}>
               {title}
             </DialogTitle>
           )}
           {description && (
-            <DialogDescription data-testid={testId && `${testId}-description`}>
+            <DialogDescription className={descriptionClassName} data-testid={testId && `${testId}-description`}>
               {description}
             </DialogDescription>
           )}
         </DialogHeader>
 
         {children && (
-          <DialogBody scrollable={scrollable}>{children}</DialogBody>
+          <DialogBody className={bodyClassName} scrollable={scrollable}>{children}</DialogBody>
         )}
 
         {hasFooter && (
-          <DialogFooter className={extraAction ? "justify-between" : undefined}>
+          <DialogFooter className={cn(extraAction && "justify-between", footerClassName)}>
             {extraAction && (
               <Button
                 type={extraAction.type ?? "button"}