hazo_auth 1.2.0 → 1.4.0

package/dist/components/layouts/my_settings/components/editable_field.d.ts

@@ -0,0 +1,19 @@
+export type EditableFieldProps = {
+    label: string;
+    value: string;
+    type?: "text" | "email" | "tel" | "url";
+    placeholder?: string;
+    onSave: (value: string) => Promise<void>;
+    onCancel?: () => void;
+    validation?: (value: string) => string | null;
+    disabled?: boolean;
+    ariaLabel?: string;
+};
+/**
+ * Editable field component with pencil icon for edit mode
+ * Shows check (green) and cancel (red) icons when in edit mode
+ * @param props - Component props including label, value, onSave callback, etc.
+ * @returns Editable field component
+ */
+export declare function EditableField({ label, value, type, placeholder, onSave, onCancel, validation, disabled, ariaLabel, }: EditableFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editable_field.d.ts.map

package/dist/components/layouts/my_settings/components/editable_field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable_field.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/components/editable_field.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAGF;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,IAAa,EACb,WAAW,EACX,MAAM,EACN,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,SAAS,GACV,EAAE,kBAAkB,2CAsIpB"}

package/dist/components/layouts/my_settings/components/editable_field.js

@@ -0,0 +1,73 @@
+// file_description: reusable component for editable fields with pencil/edit/check/cancel icons
+// section: client_directive
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// section: imports
+import { useState } from "react";
+import { Input } from "hazo_auth/components/ui/input";
+import { Label } from "hazo_auth/components/ui/label";
+import { Button } from "hazo_auth/components/ui/button";
+import { Pencil, CheckCircle2, XCircle } from "lucide-react";
+// section: component
+/**
+ * Editable field component with pencil icon for edit mode
+ * Shows check (green) and cancel (red) icons when in edit mode
+ * @param props - Component props including label, value, onSave callback, etc.
+ * @returns Editable field component
+ */
+export function EditableField({ label, value, type = "text", placeholder, onSave, onCancel, validation, disabled = false, ariaLabel, }) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [editValue, setEditValue] = useState(value);
+    const [error, setError] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const handleEdit = () => {
+        if (disabled)
+            return;
+        setIsEditing(true);
+        setEditValue(value);
+        setError(null);
+    };
+    const handleCancel = () => {
+        setIsEditing(false);
+        setEditValue(value);
+        setError(null);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    const handleSave = async () => {
+        // Validate if validation function provided
+        if (validation) {
+            const validationError = validation(editValue);
+            if (validationError) {
+                setError(validationError);
+                return;
+            }
+        }
+        // Check if value changed
+        if (editValue === value) {
+            setIsEditing(false);
+            return;
+        }
+        setIsSaving(true);
+        setError(null);
+        try {
+            await onSave(editValue);
+            setIsEditing(false);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to save";
+            setError(errorMessage);
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            void handleSave();
+        }
+        else if (e.key === "Escape") {
+            handleCancel();
+        }
+    };
+    return (_jsxs("div", { className: "cls_editable_field flex flex-col gap-2", children: [_jsx(Label, { htmlFor: `editable-field-${label}`, className: "cls_editable_field_label text-sm font-medium text-slate-700", children: label }), _jsx("div", { className: "cls_editable_field_input_container flex items-center gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx(Input, { id: `editable-field-${label}`, type: type, value: editValue, onChange: (e) => setEditValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isSaving, "aria-label": ariaLabel || label, className: "cls_editable_field_input flex-1" }), _jsx(Button, { type: "button", onClick: handleSave, disabled: isSaving, variant: "ghost", size: "icon", className: "cls_editable_field_save_button text-green-600 hover:text-green-700 hover:bg-green-50", "aria-label": "Save changes", children: _jsx(CheckCircle2, { className: "h-5 w-5", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", onClick: handleCancel, disabled: isSaving, variant: "ghost", size: "icon", className: "cls_editable_field_cancel_button text-red-600 hover:text-red-700 hover:bg-red-50", "aria-label": "Cancel editing", children: _jsx(XCircle, { className: "h-5 w-5", "aria-hidden": "true" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Input, { id: `editable-field-${label}`, type: type, value: value || "", readOnly: true, disabled: true, placeholder: value ? undefined : placeholder || "Not set", "aria-label": ariaLabel || label, className: "cls_editable_field_display flex-1 bg-slate-50 cursor-not-allowed" }), !disabled && (_jsx(Button, { type: "button", onClick: handleEdit, variant: "ghost", size: "icon", className: "cls_editable_field_edit_button text-slate-600 hover:text-slate-700 hover:bg-slate-50", "aria-label": `Edit ${label}`, children: _jsx(Pencil, { className: "h-5 w-5", "aria-hidden": "true" }) }))] })) }), error && (_jsx("p", { className: "cls_editable_field_error text-sm text-red-600", role: "alert", children: error }))] }));
+}

package/dist/components/layouts/my_settings/components/password_change_dialog.d.ts

@@ -0,0 +1,28 @@
+import type { PasswordRequirementOptions } from "hazo_auth/components/layouts/shared/config/layout_customization";
+export type ButtonPalette = {
+    submitBackground: string;
+    submitText: string;
+    cancelBorder: string;
+    cancelText: string;
+};
+export type PasswordChangeDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSave: (currentPassword: string, newPassword: string) => Promise<void>;
+    passwordRequirements: PasswordRequirementOptions;
+    buttonPalette?: ButtonPalette;
+    currentPasswordLabel?: string;
+    newPasswordLabel?: string;
+    confirmPasswordLabel?: string;
+    saveButtonLabel?: string;
+    cancelButtonLabel?: string;
+};
+/**
+ * Dialog component for changing password
+ * Shows current password, new password, and confirm password fields
+ * Validates password requirements and ensures passwords match
+ * @param props - Component props including open state, onSave callback, password requirements
+ * @returns Password change dialog component
+ */
+export declare function PasswordChangeDialog({ open, onOpenChange, onSave, passwordRequirements, buttonPalette, currentPasswordLabel, newPasswordLabel, confirmPasswordLabel, saveButtonLabel, cancelButtonLabel, }: PasswordChangeDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=password_change_dialog.d.ts.map

package/dist/components/layouts/my_settings/components/password_change_dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password_change_dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/components/password_change_dialog.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iEAAiE,CAAC;AAGlH,MAAM,MAAM,aAAa,GAAG;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,oBAAoB,EAAE,0BAA0B,CAAC;IACjD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAGF;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,oBAAoB,EACpB,aAAa,EACb,oBAAyC,EACzC,gBAAiC,EACjC,oBAA6C,EAC7C,eAAwB,EACxB,iBAA4B,GAC7B,EAAE,yBAAyB,2CAiP3B"}

package/dist/components/layouts/my_settings/components/password_change_dialog.js

@@ -0,0 +1,138 @@
+// file_description: dialog component for changing password with current/new/confirm password fields
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// section: imports
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "hazo_auth/components/ui/dialog";
+import { Button } from "hazo_auth/components/ui/button";
+import { PasswordField } from "hazo_auth/components/layouts/shared/components/password_field";
+import { FormFieldWrapper } from "hazo_auth/components/layouts/shared/components/form_field_wrapper";
+// section: component
+/**
+ * Dialog component for changing password
+ * Shows current password, new password, and confirm password fields
+ * Validates password requirements and ensures passwords match
+ * @param props - Component props including open state, onSave callback, password requirements
+ * @returns Password change dialog component
+ */
+export function PasswordChangeDialog({ open, onOpenChange, onSave, passwordRequirements, buttonPalette, currentPasswordLabel = "Current password", newPasswordLabel = "New password", confirmPasswordLabel = "Confirm new password", saveButtonLabel = "Save", cancelButtonLabel = "Cancel", }) {
+    const [currentPassword, setCurrentPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [currentPasswordVisible, setCurrentPasswordVisible] = useState(false);
+    const [newPasswordVisible, setNewPasswordVisible] = useState(false);
+    const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);
+    const [errors, setErrors] = useState({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const validatePassword = (password) => {
+        if (!password || password.length < passwordRequirements.minimum_length) {
+            return `Password must be at least ${passwordRequirements.minimum_length} characters long`;
+        }
+        const errors = [];
+        if (passwordRequirements.require_uppercase && !/[A-Z]/.test(password)) {
+            errors.push("uppercase letter");
+        }
+        if (passwordRequirements.require_lowercase && !/[a-z]/.test(password)) {
+            errors.push("lowercase letter");
+        }
+        if (passwordRequirements.require_number && !/[0-9]/.test(password)) {
+            errors.push("number");
+        }
+        if (passwordRequirements.require_special && !/[^A-Za-z0-9]/.test(password)) {
+            errors.push("special character");
+        }
+        if (errors.length > 0) {
+            return `Password must contain at least one: ${errors.join(", ")}`;
+        }
+        return null;
+    };
+    const validateForm = () => {
+        const newErrors = {};
+        if (!currentPassword) {
+            newErrors.currentPassword = "Current password is required";
+        }
+        const newPasswordError = validatePassword(newPassword);
+        if (newPasswordError) {
+            newErrors.newPassword = newPasswordError;
+        }
+        if (!confirmPassword) {
+            newErrors.confirmPassword = "Please confirm your new password";
+        }
+        else if (newPassword !== confirmPassword) {
+            newErrors.confirmPassword = "Passwords do not match";
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+    const handleSave = async () => {
+        if (!validateForm()) {
+            return;
+        }
+        setIsSubmitting(true);
+        setErrors({});
+        try {
+            await onSave(currentPassword, newPassword);
+            // Reset form on success
+            setCurrentPassword("");
+            setNewPassword("");
+            setConfirmPassword("");
+            onOpenChange(false);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to change password";
+            setErrors({ currentPassword: errorMessage });
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleCancel = () => {
+        setCurrentPassword("");
+        setNewPassword("");
+        setConfirmPassword("");
+        setErrors({});
+        onOpenChange(false);
+    };
+    // Format password requirements for display
+    const getPasswordRequirements = () => {
+        const requirements = [];
+        requirements.push(`At least ${passwordRequirements.minimum_length} characters`);
+        if (passwordRequirements.require_uppercase) {
+            requirements.push("One uppercase letter");
+        }
+        if (passwordRequirements.require_lowercase) {
+            requirements.push("One lowercase letter");
+        }
+        if (passwordRequirements.require_number) {
+            requirements.push("One number");
+        }
+        if (passwordRequirements.require_special) {
+            requirements.push("One special character");
+        }
+        return requirements;
+    };
+    const passwordRequirementsList = getPasswordRequirements();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "cls_password_change_dialog max-w-md", children: [_jsxs(DialogHeader, { className: "cls_password_change_dialog_header", children: [_jsx(DialogTitle, { className: "cls_password_change_dialog_title", children: "Change Password" }), _jsx(DialogDescription, { className: "cls_password_change_dialog_description", children: "Enter your current password and choose a new password." })] }), _jsxs("div", { className: "cls_password_change_dialog_content flex flex-col gap-4 py-4", children: [_jsx(FormFieldWrapper, { fieldId: "current-password", label: currentPasswordLabel, input: _jsx(PasswordField, { inputId: "current-password", ariaLabel: currentPasswordLabel, value: currentPassword, placeholder: "Enter your current password", autoComplete: "current-password", isVisible: currentPasswordVisible, onChange: (value) => {
+                                    setCurrentPassword(value);
+                                    if (errors.currentPassword) {
+                                        setErrors(Object.assign(Object.assign({}, errors), { currentPassword: undefined }));
+                                    }
+                                }, onToggleVisibility: () => setCurrentPasswordVisible(!currentPasswordVisible), errorMessage: errors.currentPassword }) }), _jsx(FormFieldWrapper, { fieldId: "new-password", label: newPasswordLabel, input: _jsx(PasswordField, { inputId: "new-password", ariaLabel: newPasswordLabel, value: newPassword, placeholder: "Enter your new password", autoComplete: "new-password", isVisible: newPasswordVisible, onChange: (value) => {
+                                    setNewPassword(value);
+                                    if (errors.newPassword) {
+                                        setErrors(Object.assign(Object.assign({}, errors), { newPassword: undefined }));
+                                    }
+                                }, onToggleVisibility: () => setNewPasswordVisible(!newPasswordVisible), errorMessage: errors.newPassword }) }), passwordRequirementsList.length > 0 && (_jsxs("div", { className: "cls_password_change_dialog_requirements text-xs text-slate-600", children: [_jsx("p", { className: "cls_password_change_dialog_requirements_label font-medium mb-1", children: "Password requirements:" }), _jsx("ul", { className: "cls_password_change_dialog_requirements_list list-disc list-inside space-y-0.5", children: passwordRequirementsList.map((req, index) => (_jsx("li", { children: req }, index))) })] })), _jsx(FormFieldWrapper, { fieldId: "confirm-password", label: confirmPasswordLabel, input: _jsx(PasswordField, { inputId: "confirm-password", ariaLabel: confirmPasswordLabel, value: confirmPassword, placeholder: "Confirm your new password", autoComplete: "new-password", isVisible: confirmPasswordVisible, onChange: (value) => {
+                                    setConfirmPassword(value);
+                                    if (errors.confirmPassword) {
+                                        setErrors(Object.assign(Object.assign({}, errors), { confirmPassword: undefined }));
+                                    }
+                                }, onToggleVisibility: () => setConfirmPasswordVisible(!confirmPasswordVisible), errorMessage: errors.confirmPassword }) })] }), _jsxs("div", { className: "cls_password_change_dialog_actions flex justify-end gap-3 pt-4 border-t", children: [_jsx(Button, { type: "button", onClick: handleSave, disabled: isSubmitting, className: "cls_password_change_dialog_save_button", style: buttonPalette ? {
+                                backgroundColor: buttonPalette.submitBackground,
+                                color: buttonPalette.submitText,
+                            } : undefined, "aria-label": saveButtonLabel, children: saveButtonLabel }), _jsx(Button, { type: "button", onClick: handleCancel, disabled: isSubmitting, variant: "outline", className: "cls_password_change_dialog_cancel_button", style: buttonPalette ? {
+                                borderColor: buttonPalette.cancelBorder,
+                                color: buttonPalette.cancelText,
+                            } : undefined, "aria-label": cancelButtonLabel, children: cancelButtonLabel })] })] }) }));
+}

package/dist/components/layouts/my_settings/components/profile_picture_dialog.d.ts

@@ -0,0 +1,42 @@
+export type ProfilePictureDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSave: (profilePictureUrl: string, profileSource: "upload" | "library" | "gravatar") => Promise<void>;
+    email: string;
+    allowPhotoUpload: boolean;
+    maxPhotoSize: number;
+    libraryPhotoPath: string;
+    currentProfilePictureUrl?: string;
+    currentProfileSource?: "upload" | "library" | "gravatar" | "custom";
+    saveButtonLabel?: string;
+    cancelButtonLabel?: string;
+    disabled?: boolean;
+    messages: {
+        photo_upload_disabled_message: string;
+        gravatar_setup_message: string;
+        gravatar_no_account_message: string;
+        library_tooltip_message: string;
+    };
+    uiSizes: {
+        gravatar_size: number;
+        profile_picture_size: number;
+        tooltip_icon_size_default: number;
+        tooltip_icon_size_small: number;
+        library_photo_grid_columns: number;
+        library_photo_preview_size: number;
+        image_compression_max_dimension: number;
+        upload_file_hard_limit_bytes: number;
+    };
+    fileTypes: {
+        allowed_image_extensions: string[];
+        allowed_image_mime_types: string[];
+    };
+};
+/**
+ * Profile picture dialog component with tabs for Upload, Library, and Gravatar
+ * Only one switch can be active at a time
+ * @param props - Component props including open state, save handler, and configuration
+ * @returns Profile picture dialog component
+ */
+export declare function ProfilePictureDialog({ open, onOpenChange, onSave, email, allowPhotoUpload, maxPhotoSize, libraryPhotoPath, currentProfilePictureUrl, currentProfileSource, saveButtonLabel, cancelButtonLabel, disabled, messages, uiSizes, fileTypes, }: ProfilePictureDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=profile_picture_dialog.d.ts.map

package/dist/components/layouts/my_settings/components/profile_picture_dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile_picture_dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/components/profile_picture_dialog.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,CAAC,iBAAiB,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvG,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,oBAAoB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IACpE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE;QACR,6BAA6B,EAAE,MAAM,CAAC;QACtC,sBAAsB,EAAE,MAAM,CAAC;QAC/B,2BAA2B,EAAE,MAAM,CAAC;QACpC,uBAAuB,EAAE,MAAM,CAAC;KACjC,CAAC;IACF,OAAO,EAAE;QACP,aAAa,EAAE,MAAM,CAAC;QACtB,oBAAoB,EAAE,MAAM,CAAC;QAC7B,yBAAyB,EAAE,MAAM,CAAC;QAClC,uBAAuB,EAAE,MAAM,CAAC;QAChC,0BAA0B,EAAE,MAAM,CAAC;QACnC,0BAA0B,EAAE,MAAM,CAAC;QACnC,+BAA+B,EAAE,MAAM,CAAC;QACxC,4BAA4B,EAAE,MAAM,CAAC;KACtC,CAAC;IACF,SAAS,EAAE;QACT,wBAAwB,EAAE,MAAM,EAAE,CAAC;QACnC,wBAAwB,EAAE,MAAM,EAAE,CAAC;KACpC,CAAC;CACH,CAAC;AAGF;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,wBAAwB,EACxB,oBAAoB,EACpB,eAAwB,EACxB,iBAA4B,EAC5B,QAAgB,EAChB,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,yBAAyB,2CA+S3B"}

package/dist/components/layouts/my_settings/components/profile_picture_dialog.js

@@ -0,0 +1,198 @@
+// file_description: profile picture dialog component with tabs for Upload, Library, and Gravatar
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// section: imports
+import { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "hazo_auth/components/ui/dialog";
+import { Button } from "hazo_auth/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "hazo_auth/components/ui/tabs";
+import { ProfilePictureUploadTab } from "hazo_auth/components/layouts/my_settings/components/profile_picture_upload_tab";
+import { ProfilePictureLibraryTab } from "hazo_auth/components/layouts/my_settings/components/profile_picture_library_tab";
+import { ProfilePictureGravatarTab } from "hazo_auth/components/layouts/my_settings/components/profile_picture_gravatar_tab";
+import { toast } from "sonner";
+import { cn } from "hazo_auth/lib/utils";
+// section: component
+/**
+ * Profile picture dialog component with tabs for Upload, Library, and Gravatar
+ * Only one switch can be active at a time
+ * @param props - Component props including open state, save handler, and configuration
+ * @returns Profile picture dialog component
+ */
+export function ProfilePictureDialog({ open, onOpenChange, onSave, email, allowPhotoUpload, maxPhotoSize, libraryPhotoPath, currentProfilePictureUrl, currentProfileSource, saveButtonLabel = "Save", cancelButtonLabel = "Cancel", disabled = false, messages, uiSizes, fileTypes, }) {
+    const [useUpload, setUseUpload] = useState(false);
+    const [useLibrary, setUseLibrary] = useState(false);
+    const [useGravatar, setUseGravatar] = useState(false);
+    const [selectedPhotoUrl, setSelectedPhotoUrl] = useState(null);
+    const [selectedSource, setSelectedSource] = useState(null);
+    const [uploadedFile, setUploadedFile] = useState(null);
+    const [uploading, setUploading] = useState(false);
+    const [activeTab, setActiveTab] = useState(allowPhotoUpload ? "upload" : "library");
+    // Initialize state based on current profile picture
+    useEffect(() => {
+        if (open) {
+            // Determine default active tab (skip upload if not enabled)
+            const defaultTab = allowPhotoUpload ? "upload" : "library";
+            // Handle current profile source (may be "upload", "library", "gravatar", or "custom")
+            // "custom" should be treated as "upload" for backwards compatibility
+            const normalizedSource = currentProfileSource === "custom" ? "upload" : currentProfileSource;
+            if (normalizedSource === "upload" && allowPhotoUpload) {
+                setUseUpload(true);
+                setUseLibrary(false);
+                setUseGravatar(false);
+                setSelectedSource("upload");
+                setSelectedPhotoUrl(currentProfilePictureUrl || null); // Set current image for upload tab
+                setActiveTab("upload");
+            }
+            else if (normalizedSource === "library") {
+                setUseUpload(false);
+                setUseLibrary(true);
+                setUseGravatar(false);
+                setSelectedSource("library");
+                setSelectedPhotoUrl(currentProfilePictureUrl || null);
+                setActiveTab("library");
+            }
+            else if (normalizedSource === "gravatar") {
+                setUseUpload(false);
+                setUseLibrary(false);
+                setUseGravatar(true);
+                setSelectedSource("gravatar");
+                setActiveTab("gravatar");
+            }
+            else {
+                // Reset to defaults
+                setUseUpload(false);
+                setUseLibrary(false);
+                setUseGravatar(false);
+                setSelectedSource(null);
+                setSelectedPhotoUrl(null);
+                setUploadedFile(null);
+                setActiveTab(defaultTab);
+            }
+        }
+    }, [open, currentProfileSource, currentProfilePictureUrl, allowPhotoUpload]);
+    const handleUseUploadChange = (use) => {
+        if (!allowPhotoUpload) {
+            return; // Prevent changes if upload is not enabled
+        }
+        setUseUpload(use);
+        if (use) {
+            setUseLibrary(false);
+            setUseGravatar(false);
+            setSelectedPhotoUrl(null); // Clear library photo URL when upload is selected
+            setSelectedSource("upload");
+        }
+        else {
+            setSelectedSource(null);
+            setUploadedFile(null);
+            setSelectedPhotoUrl(null);
+        }
+    };
+    const handleUseLibraryChange = (use) => {
+        setUseLibrary(use);
+        if (use) {
+            if (allowPhotoUpload) {
+                setUseUpload(false);
+                setUploadedFile(null);
+            }
+            setUseGravatar(false);
+            setSelectedSource("library");
+            // Note: selectedPhotoUrl should already be set when a photo is selected
+            // If no photo is selected yet, the first photo in the category will be auto-selected
+        }
+        else {
+            setSelectedSource(null);
+            setSelectedPhotoUrl(null);
+        }
+    };
+    const handleUseGravatarChange = (use) => {
+        setUseGravatar(use);
+        if (use) {
+            if (allowPhotoUpload) {
+                setUseUpload(false);
+                setUploadedFile(null);
+            }
+            setUseLibrary(false);
+            setSelectedPhotoUrl(null); // Clear library photo URL when Gravatar is selected
+            setSelectedSource("gravatar");
+        }
+        else {
+            setSelectedSource(null);
+        }
+    };
+    const handleFileSelect = async (file) => {
+        setUploadedFile(file);
+        setUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append("file", file);
+            const response = await fetch("/api/hazo_auth/upload_profile_picture", {
+                method: "POST",
+                credentials: "include",
+                body: formData,
+            });
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                const errorMessage = data.error || "Failed to upload photo";
+                toast.error(errorMessage);
+                setUploadedFile(null);
+                return;
+            }
+            setSelectedPhotoUrl(data.profile_picture_url);
+            toast.success("Photo uploaded successfully");
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to upload photo";
+            toast.error(errorMessage);
+            setUploadedFile(null);
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const handlePhotoSelect = (photoUrl) => {
+        setSelectedPhotoUrl(photoUrl);
+        // Automatically enable library photo when a photo is selected
+        if (!useLibrary) {
+            handleUseLibraryChange(true);
+        }
+    };
+    const handleSave = async () => {
+        if (!selectedSource) {
+            toast.error("Please select a profile picture source");
+            return;
+        }
+        if (selectedSource === "upload" && !selectedPhotoUrl) {
+            toast.error("Please upload a photo first");
+            return;
+        }
+        if (selectedSource === "library" && !selectedPhotoUrl) {
+            toast.error("Please select a photo from the library");
+            return;
+        }
+        if (selectedSource === "gravatar") {
+            // For Gravatar, generate the URL client-side using gravatar-url
+            // The onSave handler will use this URL directly
+            const gravatarUrlModule = await import("gravatar-url");
+            const gravatarUrl = gravatarUrlModule.default(email, {
+                size: 200,
+                default: "identicon",
+            });
+            await onSave(gravatarUrl, "gravatar");
+            return;
+        }
+        if (selectedPhotoUrl) {
+            await onSave(selectedPhotoUrl, selectedSource);
+        }
+    };
+    const handleCancel = () => {
+        setUseUpload(false);
+        setUseLibrary(false);
+        setUseGravatar(false);
+        setSelectedPhotoUrl(null);
+        setSelectedSource(null);
+        setUploadedFile(null);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "cls_profile_picture_dialog max-w-4xl max-h-[90vh] overflow-y-auto", children: [_jsxs(DialogHeader, { className: "cls_profile_picture_dialog_header", children: [_jsx(DialogTitle, { className: "cls_profile_picture_dialog_title", children: "Change Profile Picture" }), _jsx(DialogDescription, { className: "cls_profile_picture_dialog_description", children: "Choose how you want to set your profile picture" })] }), _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "cls_profile_picture_dialog_tabs", children: [_jsxs(TabsList, { className: "cls_profile_picture_dialog_tabs_list", children: [allowPhotoUpload && (_jsx(TabsTrigger, { value: "upload", className: cn("cls_profile_picture_dialog_tabs_trigger", useUpload && "!text-blue-600 font-semibold data-[state=active]:!text-blue-600"), children: "Upload" })), _jsx(TabsTrigger, { value: "library", className: cn("cls_profile_picture_dialog_tabs_trigger", useLibrary && "!text-blue-600 font-semibold data-[state=active]:!text-blue-600"), children: "Library" }), _jsx(TabsTrigger, { value: "gravatar", className: cn("cls_profile_picture_dialog_tabs_trigger", useGravatar && "!text-blue-600 font-semibold data-[state=active]:!text-blue-600"), children: "Gravatar" })] }), allowPhotoUpload && (_jsx(TabsContent, { value: "upload", className: "cls_profile_picture_dialog_tabs_content", children: _jsx(ProfilePictureUploadTab, { useUpload: useUpload, onUseUploadChange: handleUseUploadChange, onFileSelect: handleFileSelect, maxSize: maxPhotoSize, uploadEnabled: allowPhotoUpload, disabled: disabled || uploading, currentPreview: currentProfilePictureUrl || selectedPhotoUrl || undefined, photoUploadDisabledMessage: messages.photo_upload_disabled_message, imageCompressionMaxDimension: uiSizes.image_compression_max_dimension, uploadFileHardLimitBytes: uiSizes.upload_file_hard_limit_bytes, allowedImageMimeTypes: fileTypes.allowed_image_mime_types }) })), _jsx(TabsContent, { value: "library", className: "cls_profile_picture_dialog_tabs_content", children: _jsx(ProfilePictureLibraryTab, { useLibrary: useLibrary, onUseLibraryChange: handleUseLibraryChange, onPhotoSelect: handlePhotoSelect, disabled: disabled, libraryPhotoPath: libraryPhotoPath, currentPhotoUrl: selectedPhotoUrl || undefined, libraryTooltipMessage: messages.library_tooltip_message, tooltipIconSizeSmall: uiSizes.tooltip_icon_size_small, libraryPhotoGridColumns: uiSizes.library_photo_grid_columns, libraryPhotoPreviewSize: uiSizes.library_photo_preview_size }) }), _jsx(TabsContent, { value: "gravatar", className: "cls_profile_picture_dialog_tabs_content", children: _jsx(ProfilePictureGravatarTab, { email: email, useGravatar: useGravatar, onUseGravatarChange: handleUseGravatarChange, disabled: disabled, gravatarSetupMessage: messages.gravatar_setup_message, gravatarNoAccountMessage: messages.gravatar_no_account_message, gravatarSize: uiSizes.gravatar_size }) })] }), _jsxs("div", { className: "cls_profile_picture_dialog_actions flex justify-end gap-3 pt-4 border-t", children: [_jsx(Button, { type: "button", onClick: handleSave, disabled: disabled || uploading || !selectedSource, className: "cls_profile_picture_dialog_save_button", "aria-label": saveButtonLabel, children: saveButtonLabel }), _jsx(Button, { type: "button", onClick: handleCancel, disabled: disabled || uploading, variant: "outline", className: "cls_profile_picture_dialog_cancel_button", "aria-label": cancelButtonLabel, children: cancelButtonLabel })] })] }) }));
+}

package/dist/components/layouts/my_settings/components/profile_picture_display.d.ts

@@ -0,0 +1,16 @@
+export type ProfilePictureDisplayProps = {
+    profilePictureUrl?: string;
+    name?: string;
+    email?: string;
+    onEdit?: () => void;
+    disabled?: boolean;
+};
+/**
+ * Profile picture display component
+ * Shows profile picture with fallback to initials or default icon
+ * Displays pencil icon for editing (functionality to be implemented later)
+ * @param props - Component props including profile picture URL, name, email, onEdit callback
+ * @returns Profile picture display component
+ */
+export declare function ProfilePictureDisplay({ profilePictureUrl, name, email, onEdit, disabled, }: ProfilePictureDisplayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=profile_picture_display.d.ts.map

package/dist/components/layouts/my_settings/components/profile_picture_display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile_picture_display.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/components/profile_picture_display.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,0BAA0B,GAAG;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAGF;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,iBAAiB,EACjB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAgB,GACjB,EAAE,0BAA0B,2CAgC5B"}

package/dist/components/layouts/my_settings/components/profile_picture_display.js

@@ -0,0 +1,33 @@
+// file_description: component for displaying and editing profile picture (edit functionality to be implemented later)
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// section: imports
+import { Avatar, AvatarImage, AvatarFallback } from "hazo_auth/components/ui/avatar";
+// section: component
+/**
+ * Profile picture display component
+ * Shows profile picture with fallback to initials or default icon
+ * Displays pencil icon for editing (functionality to be implemented later)
+ * @param props - Component props including profile picture URL, name, email, onEdit callback
+ * @returns Profile picture display component
+ */
+export function ProfilePictureDisplay({ profilePictureUrl, name, email, onEdit, disabled = false, }) {
+    // Get initials from name or email
+    const getInitials = () => {
+        var _a, _b;
+        if (name) {
+            const parts = name.trim().split(" ");
+            if (parts.length >= 2) {
+                return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+            }
+            return ((_a = name[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || "";
+        }
+        if (email) {
+            return ((_b = email[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) || "";
+        }
+        return "?";
+    };
+    const initials = getInitials();
+    return (_jsx("div", { className: "cls_profile_picture_display", children: _jsxs(Avatar, { className: "cls_profile_picture_display_avatar h-32 w-32", children: [_jsx(AvatarImage, { src: profilePictureUrl, alt: name ? `Profile picture of ${name}` : "Profile picture", className: "cls_profile_picture_display_image" }), _jsx(AvatarFallback, { className: "cls_profile_picture_display_fallback bg-slate-200 text-slate-600 text-3xl", children: initials })] }) }));
+}

package/dist/components/layouts/my_settings/components/profile_picture_gravatar_tab.d.ts

@@ -0,0 +1,17 @@
+export type ProfilePictureGravatarTabProps = {
+    email: string;
+    useGravatar: boolean;
+    onUseGravatarChange: (use: boolean) => void;
+    disabled?: boolean;
+    gravatarSetupMessage: string;
+    gravatarNoAccountMessage: string;
+    gravatarSize: number;
+};
+/**
+ * Gravatar tab component for profile picture dialog
+ * Shows Gravatar preview and setup instructions
+ * @param props - Component props including email, useGravatar state, and change handler
+ * @returns Gravatar tab component
+ */
+export declare function ProfilePictureGravatarTab({ email, useGravatar, onUseGravatarChange, disabled, gravatarSetupMessage, gravatarNoAccountMessage, gravatarSize, }: ProfilePictureGravatarTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=profile_picture_gravatar_tab.d.ts.map

package/dist/components/layouts/my_settings/components/profile_picture_gravatar_tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile_picture_gravatar_tab.d.ts","sourceRoot":"","sources":["../../../../../src/components/layouts/my_settings/components/profile_picture_gravatar_tab.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,wBAAwB,EAAE,MAAM,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAGF;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,QAAgB,EAChB,oBAAoB,EACpB,wBAAwB,EACxB,YAAY,GACb,EAAE,8BAA8B,2CAuGhC"}