@janovix/blocks 1.0.0-rc.5 → 1.0.0-rc.7

package/README.md

@@ -162,17 +162,18 @@ interface Language {
 
 ### AvatarEditor
 
-An interactive avatar editor with zoom, rotation, and flip controls.
+An interactive avatar editor with zoom, rotation, and drag controls.
 
 **Features:**
 
-- Image zoom (0.1x - 3x)
-- Image rotation (0° - 360°)
-- Horizontal/vertical flip
-- Real-time preview
-- Customizable size
-- Mouse wheel zoom support
-- Drag to reposition
+- Image zoom via UI buttons and slider (0.5x - 3x)
+- Image rotation in 15° increments (0° - 360°)
+- Drag to reposition image
+- Real-time preview with circular crop
+- Customizable editor size
+- Optional grid overlay for alignment
+- Reset all transforms
+- Touch-optimized controls for mobile
 
 **Usage:**
 
@@ -231,31 +232,49 @@ interface AvatarEditorProps {
 
 ### AvatarEditorDialog
 
-A dialog wrapper for the AvatarEditor component with upload functionality.
+A complete avatar editing experience with preview display and edit dialog.
 
 **Features:**
 
-- File upload with drag & drop
-- Image preview
-- Integrated AvatarEditor
-- Cancel/Save actions
-- File type validation (image/\*)
+- Large avatar display with edit button
+- Opens fullscreen drawer on mobile, modal on desktop
+- Integrated AvatarEditor with all controls
+- Controlled component (value/onChange)
+- Optional async save handler with feedback
+- Success/error feedback messages
+- Customizable sizes and labels
+- Accessibility optimized
 
 **Usage:**
 
 ```tsx
 import { AvatarEditorDialog } from "@janovix/blocks";
 
+// Basic usage with value/onChange
+<AvatarEditorDialog value={avatar} onChange={setAvatar} />;
+
+// With async save handler
 <AvatarEditorDialog
-	isOpen={isOpen}
-	onOpenChange={setIsOpen}
-	onSave={(editedImage) => {
-		console.log("Saving image:", editedImage);
+	value={avatar}
+	onChange={setAvatar}
+	onSave={async (dataUrl) => {
+		const result = await uploadAvatar(dataUrl);
+		return result.success;
 	}}
-	title="Edit Avatar"
-	uploadLabel="Upload Image"
-	cancelLabel="Cancel"
-	saveLabel="Save"
+	dialogTitle="Edit Profile Picture"
+	acceptText="Save"
+	cancelText="Cancel"
+	successMessage="Avatar saved successfully!"
+	errorMessage="Failed to save avatar"
+/>;
+
+// With custom sizes
+<AvatarEditorDialog
+	value={avatar}
+	onChange={setAvatar}
+	displaySize={120}
+	editorSize={280}
+	outputSize={512}
 />;
 ```
 
@@ -263,13 +282,20 @@ import { AvatarEditorDialog } from "@janovix/blocks";
 
 ```typescript
 interface AvatarEditorDialogProps {
-	isOpen: boolean;
-	onOpenChange: (open: boolean) => void;
-	onSave: (editedImage: string) => void;
-	title?: string;
-	uploadLabel?: string;
-	cancelLabel?: string;
-	saveLabel?: string;
+	value?: string | null;
+	onChange?: (dataUrl: string | null) => void;
+	onSave?: (dataUrl: string) => Promise<boolean> | boolean;
+	displaySize?: number;
+	editorSize?: number;
+	outputSize?: number;
+	placeholder?: string;
+	editLabel?: string;
+	dialogTitle?: string;
+	acceptText?: string;
+	cancelText?: string;
+	successMessage?: string;
+	errorMessage?: string;
+	className?: string;
 }
 ```