@rovula/ui 0.1.26 → 0.1.28

package/dist/esm/types/components/Avatar/Avatar.d.ts

@@ -22,7 +22,7 @@ type AvatarImageProps = {
     type: "image";
 } & BaseAvatarProps;
 type AvatarIconProps = {
-    icon: string;
+    icon: React.ReactNode;
     type: "icon";
 } & BaseAvatarProps;
 export type AvatarProps = AvatarTextProps | AvatarImageProps | AvatarIconProps;

package/dist/esm/types/components/Avatar/Avatar.stories.d.ts

@@ -34,7 +34,7 @@ declare const meta: {
         fallbackClassName?: string | undefined;
         style?: React.CSSProperties | undefined;
     } | {
-        icon: string & React.ReactNode;
+        icon: React.ReactNode;
         type: "icon";
         imageUrl?: string | undefined;
         text?: string | undefined;

package/dist/esm/types/components/Avatar/Avatar.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const avatarVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xxs" | "xs" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;
+    hasImage?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -21,6 +21,8 @@ export type ConfirmDialogProps = {
      * When true, hides the cancel button — useful for info/error alerts that only need one action.
      */
     hideCancelButton?: boolean;
+    /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
+    isLoading?: boolean;
     testId?: string;
     cancelClassName?: string;
     confirmClassName?: string;

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

@@ -22,6 +22,7 @@ declare const meta: {
         trigger?: React.ReactNode;
         typeToConfirm?: string | undefined;
         hideCancelButton?: boolean | undefined;
+        isLoading?: boolean | undefined;
         testId?: string | undefined;
         cancelClassName?: string | undefined;
         confirmClassName?: string | undefined;
@@ -55,3 +56,5 @@ export declare const WithoutCancelButton: Story;
 export declare const RequireConfirmText: Story;
 export declare const FigmaDefaultOpen: Story;
 export declare const FigmaRequirePasswordDefaultOpen: Story;
+export declare const WithLoading: Story;
+export declare const WithLoadingAndTypeToConfirm: Story;

package/dist/index.d.ts

@@ -542,7 +542,7 @@ type AvatarImageProps = {
     type: "image";
 } & BaseAvatarProps;
 type AvatarIconProps = {
-    icon: string;
+    icon: React.ReactNode;
     type: "icon";
 } & BaseAvatarProps;
 type AvatarProps = AvatarTextProps | AvatarImageProps | AvatarIconProps;
@@ -1318,6 +1318,8 @@ type ConfirmDialogProps = {
      * When true, hides the cancel button — useful for info/error alerts that only need one action.
      */
     hideCancelButton?: boolean;
+    /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
+    isLoading?: boolean;
     testId?: string;
     cancelClassName?: string;
     confirmClassName?: string;

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

@@ -5,7 +5,8 @@ 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, children, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, testId, cancelClassName, confirmClassName, }) => {
+import Loading from "@/components/Loading/Loading";
+export const ConfirmDialog = ({ open, onOpenChange, title, description, children, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, isLoading = false, testId, cancelClassName, confirmClassName, }) => {
     const requiresInput = !!typeToConfirm;
     const validationSchema = React.useMemo(() => yup.object({
         confirmInput: yup
@@ -20,20 +21,24 @@ export const ConfirmDialog = ({ open, onOpenChange, title, description, children
         reValidateMode: "onChange",
     });
     const isFormValid = methods.formState.isValid;
+    React.useEffect(() => {
+        if (!open) {
+            methods.reset();
+        }
+    }, [open]);
     const handleOpenChange = (nextOpen) => {
+        if (isLoading)
+            return;
         if (!nextOpen) {
-            methods.reset();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
     };
     const handleCancel = () => {
-        methods.reset();
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
     const handleSubmit = () => {
-        methods.reset();
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
     };
     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, { className: "flex flex-col gap-4 w-full", onSubmit: handleSubmit, children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
@@ -43,8 +48,14 @@ export const ConfirmDialog = ({ open, onOpenChange, title, description, children
                                     keepFooterSpace: true,
                                     fullwidth: true,
                                     testId: testId && `${testId}-type-to-confirm-input`,
-                                } })] })), _jsxs(AlertDialogFooter, { children: [!hideCancelButton && (_jsx(AlertDialogCancel, { className: cancelClassName, "data-testid": testId && `${testId}-cancel-button`, onClick: handleCancel, children: cancelLabel })), _jsx(AlertDialogAction, { type: "button", disabled: requiresInput && !isFormValid, onClick: requiresInput
-                                    ? () => methods.handleSubmit(handleSubmit)()
-                                    : () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), className: confirmClassName, "data-testid": testId && `${testId}-confirm-button`, children: confirmLabel })] })] })] }));
+                                }, disabled: isLoading })] })), _jsxs(AlertDialogFooter, { children: [!hideCancelButton && (_jsx(AlertDialogCancel, { className: cancelClassName, "data-testid": testId && `${testId}-cancel-button`, onClick: handleCancel, disabled: isLoading, children: cancelLabel })), _jsxs(AlertDialogAction, { type: "button", disabled: isLoading || (requiresInput && !isFormValid), onClick: (e) => {
+                                    e.preventDefault();
+                                    if (requiresInput) {
+                                        methods.handleSubmit(handleSubmit)();
+                                    }
+                                    else {
+                                        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                                    }
+                                }, className: confirmClassName, "data-testid": testId && `${testId}-confirm-button`, children: [isLoading && _jsx(Loading, {}), confirmLabel] })] })] })] }));
 };
 ConfirmDialog.displayName = "ConfirmDialog";

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

@@ -101,3 +101,36 @@ export const FigmaRequirePasswordDefaultOpen = {
         return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => updateArgs({ open: false }), onCancel: () => updateArgs({ open: false }) })));
     },
 };
+export const WithLoading = {
+    args: {
+        open: false,
+        title: "Delete project?",
+        description: "This action cannot be undone.",
+        confirmLabel: "Delete",
+        cancelLabel: "Cancel",
+    },
+    render: (args) => {
+        const [{ open, isLoading }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, isLoading: isLoading, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => {
+                updateArgs({ isLoading: true });
+                setTimeout(() => updateArgs({ isLoading: false, open: false }), 2000);
+            }, onCancel: () => updateArgs({ open: false }), trigger: _jsx(Button, { fullwidth: false, color: "error", onClick: () => updateArgs({ open: true, isLoading: false }), children: "Delete" }) })));
+    },
+};
+export const WithLoadingAndTypeToConfirm = {
+    args: {
+        open: false,
+        title: "Delete project?",
+        description: "This action cannot be undone.",
+        confirmLabel: "Delete",
+        cancelLabel: "Cancel",
+        typeToConfirm: "delete",
+    },
+    render: (args) => {
+        const [{ open, isLoading }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, isLoading: isLoading, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => {
+                updateArgs({ isLoading: true });
+                setTimeout(() => updateArgs({ isLoading: false, open: false }), 5000);
+            }, onCancel: () => updateArgs({ open: false }), trigger: _jsx(Button, { fullwidth: false, color: "error", onClick: () => updateArgs({ open: true, isLoading: false }), children: "Delete (type to confirm)" }) })));
+    },
+};

package/dist/src/theme/global.css

@@ -7055,6 +7055,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--transparent-warning-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
 .bg-white-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--transparent-white-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -7325,6 +7330,16 @@ input[type=number] {
   stroke: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.object-top {
+  -o-object-position: top;
+     object-position: top;
+}
+
 .\!p-0 {
   padding: 0px !important;
 }

package/package.json

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

package/src/components/Avatar/Avatar.styles.ts

@@ -18,11 +18,14 @@ export const avatarVariants = cva(
         full: "rounded-full",
         none: "rounded-none",
       },
+      hasImage: {
+        true: "bg-white",
+      },
     },
 
     defaultVariants: {
       size: "md",
       rounded: "normal",
     },
-  }
+  },
 );

package/src/components/Avatar/Avatar.tsx

@@ -31,7 +31,7 @@ type AvatarImageProps = {
 } & BaseAvatarProps;
 
 type AvatarIconProps = {
-  icon: string;
+  icon: React.ReactNode;
   type: "icon";
 } & BaseAvatarProps;
 
@@ -61,7 +61,8 @@ const Avatar: React.FC<AvatarProps> = ({
   children,
   style,
 }) => {
-  const avatarClassname = avatarVariants({ size, rounded });
+  const hasImage = !!imageUrl;
+  const avatarClassname = avatarVariants({ size, rounded, hasImage });
 
   return (
     <AvatarBase className={cn(avatarClassname, className)} style={style}>

package/src/components/Avatar/AvatarBase.tsx

@@ -13,7 +13,7 @@ const AvatarBase = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      className,
     )}
     {...props}
   />
@@ -26,7 +26,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn("object-cover object-top h-full w-full", className)}
     {...props}
   />
 ));
@@ -40,7 +40,7 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-inherit text-inherit",
-      className
+      className,
     )}
     {...props}
   />

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

@@ -191,3 +191,74 @@ export const FigmaRequirePasswordDefaultOpen: Story = {
     );
   },
 };
+
+export const WithLoading: Story = {
+  args: {
+    open: false,
+    title: "Delete project?",
+    description: "This action cannot be undone.",
+    confirmLabel: "Delete",
+    cancelLabel: "Cancel",
+  },
+  render: (args) => {
+    const [{ open, isLoading }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        isLoading={isLoading}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => {
+          updateArgs({ isLoading: true });
+          setTimeout(() => updateArgs({ isLoading: false, open: false }), 2000);
+        }}
+        onCancel={() => updateArgs({ open: false })}
+        trigger={
+          <Button
+            fullwidth={false}
+            color="error"
+            onClick={() => updateArgs({ open: true, isLoading: false })}
+          >
+            Delete
+          </Button>
+        }
+      />
+    );
+  },
+};
+
+export const WithLoadingAndTypeToConfirm: Story = {
+  args: {
+    open: false,
+    title: "Delete project?",
+    description: "This action cannot be undone.",
+    confirmLabel: "Delete",
+    cancelLabel: "Cancel",
+    typeToConfirm: "delete",
+  },
+  render: (args) => {
+    const [{ open, isLoading }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        isLoading={isLoading}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => {
+          updateArgs({ isLoading: true });
+          setTimeout(() => updateArgs({ isLoading: false, open: false }), 5000);
+        }}
+        onCancel={() => updateArgs({ open: false })}
+        trigger={
+          <Button
+            fullwidth={false}
+            color="error"
+            onClick={() => updateArgs({ open: true, isLoading: false })}
+          >
+            Delete (type to confirm)
+          </Button>
+        }
+      />
+    );
+  },
+};

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

@@ -15,6 +15,7 @@ import {
 } from "@/components/AlertDialog/AlertDialog";
 import { useControlledForm, Field } from "@/components/Form";
 import { TextInput } from "@/components/TextInput/TextInput";
+import Loading from "@/components/Loading/Loading";
 
 export type ConfirmDialogProps = {
   open?: boolean;
@@ -38,6 +39,8 @@ export type ConfirmDialogProps = {
    * When true, hides the cancel button — useful for info/error alerts that only need one action.
    */
   hideCancelButton?: boolean;
+  /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
+  isLoading?: boolean;
   testId?: string;
   cancelClassName?: string;
   confirmClassName?: string;
@@ -59,6 +62,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   trigger,
   typeToConfirm,
   hideCancelButton = false,
+  isLoading = false,
   testId,
   cancelClassName,
   confirmClassName,
@@ -89,22 +93,26 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
 
   const isFormValid = methods.formState.isValid;
 
+  React.useEffect(() => {
+    if (!open) {
+      methods.reset();
+    }
+  }, [open]);
+
   const handleOpenChange = (nextOpen: boolean) => {
+    if (isLoading) return;
     if (!nextOpen) {
-      methods.reset();
       onClose?.();
     }
     onOpenChange?.(nextOpen);
   };
 
   const handleCancel = () => {
-    methods.reset();
     onCancel?.();
     onClose?.();
   };
 
   const handleSubmit = () => {
-    methods.reset();
     onConfirm?.();
   };
 
@@ -146,6 +154,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                 fullwidth: true,
                 testId: testId && `${testId}-type-to-confirm-input`,
               }}
+              disabled={isLoading}
             />
           </FormRoot>
         )}
@@ -156,21 +165,27 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
               className={cancelClassName}
               data-testid={testId && `${testId}-cancel-button`}
               onClick={handleCancel}
+              disabled={isLoading}
             >
               {cancelLabel}
             </AlertDialogCancel>
           )}
           <AlertDialogAction
             type="button"
-            disabled={requiresInput && !isFormValid}
-            onClick={
-              requiresInput
-                ? () => methods.handleSubmit(handleSubmit)()
-                : () => onConfirm?.()
-            }
+            disabled={isLoading || (requiresInput && !isFormValid)}
+            onClick={(e) => {
+              e.preventDefault();
+
+              if (requiresInput) {
+                methods.handleSubmit(handleSubmit)();
+              } else {
+                onConfirm?.();
+              }
+            }}
             className={confirmClassName}
             data-testid={testId && `${testId}-confirm-button`}
           >
+            {isLoading && <Loading />}
             {confirmLabel}
           </AlertDialogAction>
         </AlertDialogFooter>