@rovula/ui 0.1.16 → 0.1.20

package/dist/esm/types/patterns/confirm-dialog/ConfirmDialog.d.ts

@@ -4,6 +4,7 @@ export type ConfirmDialogProps = {
     onOpenChange?: (open: boolean) => void;
     title: string;
     description?: string;
+    children?: React.ReactNode;
     confirmLabel?: string;
     cancelLabel?: string;
     onConfirm?: () => void;
@@ -21,5 +22,7 @@ export type ConfirmDialogProps = {
      */
     hideCancelButton?: boolean;
     testId?: string;
+    cancelClassName?: string;
+    confirmClassName?: string;
 };
 export declare const ConfirmDialog: React.FC<ConfirmDialogProps>;

package/dist/esm/types/patterns/confirm-dialog/ConfirmDialog.stories.d.ts

@@ -13,6 +13,7 @@ declare const meta: {
         onOpenChange?: ((open: boolean) => void) | undefined;
         title: string;
         description?: string | undefined;
+        children?: React.ReactNode;
         confirmLabel?: string | undefined;
         cancelLabel?: string | undefined;
         onConfirm?: (() => void) | undefined;
@@ -22,6 +23,8 @@ declare const meta: {
         typeToConfirm?: string | undefined;
         hideCancelButton?: boolean | undefined;
         testId?: string | undefined;
+        cancelClassName?: string | undefined;
+        confirmClassName?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     argTypes: {
         open: {

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

@@ -8,6 +8,7 @@ export type FormDialogAction = {
     disabled?: boolean;
     isLoading?: boolean;
     type?: "button" | "submit" | "reset";
+    className?: string;
 };
 export type FormDialogProps = {
     open?: boolean;

package/dist/index.d.ts

@@ -1287,6 +1287,7 @@ type ConfirmDialogProps = {
     onOpenChange?: (open: boolean) => void;
     title: string;
     description?: string;
+    children?: React.ReactNode;
     confirmLabel?: string;
     cancelLabel?: string;
     onConfirm?: () => void;
@@ -1304,6 +1305,8 @@ type ConfirmDialogProps = {
      */
     hideCancelButton?: boolean;
     testId?: string;
+    cancelClassName?: string;
+    confirmClassName?: string;
 };
 declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
 
@@ -1315,6 +1318,7 @@ type FormDialogAction = {
     disabled?: boolean;
     isLoading?: boolean;
     type?: "button" | "submit" | "reset";
+    className?: string;
 };
 type FormDialogProps = {
     open?: boolean;

package/dist/patterns/confirm-dialog/ConfirmDialog.js

@@ -5,7 +5,7 @@ import * as yup from "yup";
 import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, AlertDialogTrigger, } from "@/components/AlertDialog/AlertDialog";
 import { useControlledForm, Field } from "@/components/Form";
 import { TextInput } from "@/components/TextInput/TextInput";
-export const ConfirmDialog = ({ open, onOpenChange, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, testId, }) => {
+export const ConfirmDialog = ({ open, onOpenChange, title, description, children, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, testId, cancelClassName, confirmClassName, }) => {
     const formId = React.useId();
     const requiresInput = !!typeToConfirm;
     const validationSchema = React.useMemo(() => yup.object({
@@ -33,13 +33,13 @@ export const ConfirmDialog = ({ open, onOpenChange, title, description, confirmL
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { "data-testid": testId, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(AlertDialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), requiresInput && (_jsxs(FormRoot, { id: formId, className: "flex flex-col gap-4 w-full", onSubmit: () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { "data-testid": testId, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(AlertDialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), children, requiresInput && (_jsxs(FormRoot, { id: formId, className: "flex flex-col gap-4 w-full", onSubmit: () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
                                     label: "Type to confirm",
                                     required: true,
                                     hasClearIcon: true,
                                     keepFooterSpace: true,
                                     fullwidth: true,
                                     testId: testId && `${testId}-type-to-confirm-input`,
-                                } })] })), _jsxs(AlertDialogFooter, { children: [!hideCancelButton && (_jsx(AlertDialogCancel, { "data-testid": testId && `${testId}-cancel-button`, onClick: handleCancel, children: cancelLabel })), _jsx(AlertDialogAction, { type: "submit", form: requiresInput ? formId : undefined, disabled: requiresInput && !isFormValid, onClick: requiresInput ? undefined : () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), "data-testid": testId && `${testId}-confirm-button`, children: confirmLabel })] })] })] }));
+                                } })] })), _jsxs(AlertDialogFooter, { children: [!hideCancelButton && (_jsx(AlertDialogCancel, { className: cancelClassName, "data-testid": testId && `${testId}-cancel-button`, onClick: handleCancel, children: cancelLabel })), _jsx(AlertDialogAction, { type: "submit", form: requiresInput ? formId : undefined, disabled: requiresInput && !isFormValid, onClick: requiresInput ? undefined : () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), className: confirmClassName, "data-testid": testId && `${testId}-confirm-button`, children: confirmLabel })] })] })] }));
 };
 ConfirmDialog.displayName = "ConfirmDialog";

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

@@ -5,6 +5,6 @@ import Button from "@/components/Button/Button";
 export const FormDialog = ({ open, onOpenChange, title, description, children, trigger, confirmAction, cancelAction, extraAction, scrollable = false, className, 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: [_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, "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, "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, "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, { 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 }))] })] }))] })] }));
 };
 FormDialog.displayName = "FormDialog";

package/dist/src/theme/global.css

@@ -4259,6 +4259,10 @@ input[type=number] {
   min-width: 18rem;
 }
 
+.min-w-\[100px\] {
+  min-width: 100px;
+}
+
 .min-w-\[154px\] {
   min-width: 154px;
 }
@@ -4641,6 +4645,10 @@ input[type=number] {
   white-space: nowrap;
 }
 
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
 .break-all {
   word-break: break-all;
 }

package/package.json

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

package/src/components/AlertDialog/AlertDialog.tsx

@@ -101,7 +101,7 @@ const AlertDialogAction = React.forwardRef<
     ref={ref}
     className={cn(
       buttonVariants({ fullwidth: false }),
-      "w-[100px] justify-center",
+      "min-w-[100px] justify-center",
       className,
     )}
     {...props}
@@ -117,7 +117,7 @@ const AlertDialogCancel = React.forwardRef<
     ref={ref}
     className={cn(
       buttonVariants({ fullwidth: false, variant: "outline" }),
-      "w-[100px] justify-center",
+      "min-w-[100px] justify-center whitespace-pre-line",
       className,
     )}
     {...props}

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -21,6 +21,7 @@ export type ConfirmDialogProps = {
   onOpenChange?: (open: boolean) => void;
   title: string;
   description?: string;
+  children?: React.ReactNode;
   confirmLabel?: string;
   cancelLabel?: string;
   onConfirm?: () => void;
@@ -38,6 +39,8 @@ export type ConfirmDialogProps = {
    */
   hideCancelButton?: boolean;
   testId?: string;
+  cancelClassName?: string;
+  confirmClassName?: string;
 };
 
 type ConfirmFormValues = { confirmInput: string };
@@ -47,6 +50,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   onOpenChange,
   title,
   description,
+  children,
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   onConfirm,
@@ -56,6 +60,8 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   typeToConfirm,
   hideCancelButton = false,
   testId,
+  cancelClassName,
+  confirmClassName,
 }) => {
   const formId = React.useId();
   const requiresInput = !!typeToConfirm;
@@ -113,6 +119,8 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
           )}
         </AlertDialogHeader>
 
+        {children}
+
         {requiresInput && (
           <FormRoot
             id={formId}
@@ -140,6 +148,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
         <AlertDialogFooter>
           {!hideCancelButton && (
             <AlertDialogCancel
+              className={cancelClassName}
               data-testid={testId && `${testId}-cancel-button`}
               onClick={handleCancel}
             >
@@ -151,6 +160,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
             form={requiresInput ? formId : undefined}
             disabled={requiresInput && !isFormValid}
             onClick={requiresInput ? undefined : () => onConfirm?.()}
+            className={confirmClassName}
             data-testid={testId && `${testId}-confirm-button`}
           >
             {confirmLabel}

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

@@ -22,6 +22,7 @@ export type FormDialogAction = {
   disabled?: boolean;
   isLoading?: boolean;
   type?: "button" | "submit" | "reset";
+  className?: string;
 };
 
 export type FormDialogProps = {
@@ -75,7 +76,11 @@ export const FormDialog: React.FC<FormDialogProps> = ({
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
       <DialogContent className={className} data-testid={testId}>
         <DialogHeader>
-          <DialogTitle data-testid={testId && `${testId}-title`}>{title}</DialogTitle>
+          {title && (
+            <DialogTitle data-testid={testId && `${testId}-title`}>
+              {title}
+            </DialogTitle>
+          )}
           {description && (
             <DialogDescription data-testid={testId && `${testId}-description`}>
               {description}
@@ -98,6 +103,7 @@ export const FormDialog: React.FC<FormDialogProps> = ({
                 disabled={extraAction.disabled}
                 isLoading={extraAction.isLoading}
                 onClick={extraAction.onClick}
+                className={extraAction.className}
                 data-testid={testId && `${testId}-extra-button`}
               >
                 {extraAction.label}
@@ -113,6 +119,7 @@ export const FormDialog: React.FC<FormDialogProps> = ({
                   disabled={cancelAction.disabled}
                   isLoading={cancelAction.isLoading}
                   onClick={cancelAction.onClick}
+                  className={cancelAction.className}
                   data-testid={testId && `${testId}-cancel-button`}
                 >
                   {cancelAction.label}
@@ -128,6 +135,7 @@ export const FormDialog: React.FC<FormDialogProps> = ({
                   disabled={confirmAction.disabled}
                   isLoading={confirmAction.isLoading}
                   onClick={confirmAction.onClick}
+                  className={confirmAction.className}
                   data-testid={testId && `${testId}-confirm-button`}
                 >
                   {confirmAction.label}