@rovula/ui 0.1.33 → 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.33",
+  "version": "0.1.35",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Popover/Popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-72 rounded-md border bg-modal-surface border-bg-stroke3 overflow-hidden p-0 text-text-g-contrast-medium shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-72 rounded-md border bg-modal-surface border-bg-stroke3 overflow-hidden p-0 text-text-contrast-max shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}

package/src/components/TextInput/TextInput.stories.tsx

@@ -55,8 +55,9 @@ export const NonFloatingLabel = {
     <div className="flex w-full max-w-4xl flex-col gap-8">
       <div className="flex flex-col gap-3">
         <h4 className="typography-subtitle4 text-text-g-contrast-medium">
-          Placeholder only — empty <code className="typography-small2">label</code>{" "}
-          (no floating label, no label node)
+          Placeholder only — empty{" "}
+          <code className="typography-small2">label</code> (no floating label,
+          no label node)
         </h4>
         <p className="typography-small2 text-text-g-contrast-low max-w-2xl">
           Tab order follows DOM, like native inputs in a row.
@@ -495,8 +496,8 @@ const TrimOnCommitDemo = () => {
     <div className="flex flex-col gap-6 w-full max-w-md">
       <p className="text-sm text-text-g-contrast-low">
         <code>trimOnCommit</code> trims leading and trailing whitespace when the
-        user blurs the input or presses Enter. Try typing{" "}
-        <code>"hello   "</code> then click outside or press Enter.
+        user blurs the input or presses Enter. Try typing <code>"hello "</code>{" "}
+        then click outside or press Enter.
       </p>
       <TextInput
         id="trim-commit-demo"

package/src/components/TextInput/TextInput.tsx

@@ -116,11 +116,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     const hasRightSectionIcon = !!endIcon || !!renderEndIcon;
     const feedbackStatus =
       status ||
-      (error || !!errorMessage
-        ? "error"
-        : warning || !!warningMessage
-        ? "warning"
-        : "default");
+      (error ? "error" : warning || !!warningMessage ? "warning" : "default");
     const isError = feedbackStatus === "error";
     const isWarning = feedbackStatus === "warning";
     const feedbackMessage =

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"}