@janovix/blocks 1.2.0-rc.22 → 1.2.0-rc.23

package/dist/index.cjs

@@ -3,7 +3,7 @@
 var React2 = require('react');
 var nextThemes = require('next-themes');
 var lucideReact = require('lucide-react');
-var react = require('motion/react');
+var framerMotion = require('framer-motion');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
@@ -3551,8 +3551,8 @@ function ThemeSwitcher({
             onClick: () => handleThemeClick(key),
             type: "button",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
-                react.motion.div,
+              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.div,
                 {
                   className: cn("absolute inset-0 bg-secondary", shapeClass),
                   layoutId: "activeTheme",
@@ -3702,8 +3702,8 @@ function LanguageSwitcher({
               onClick: () => onLanguageChange?.(key),
               type: "button",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
-                  react.motion.div,
+                /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.div,
                   {
                     className: cn("absolute inset-0 bg-secondary", shapeClass),
                     layoutId: "activeLanguage",
@@ -3824,7 +3824,7 @@ function Toggle({
   );
 }
 function AvatarEditor({
-  value,
+  value: _value,
   onChange,
   size = 280,
   showGrid: initialShowGrid = false,
@@ -3832,14 +3832,11 @@ function AvatarEditor({
   outputFormat = "png",
   outputQuality = 0.92,
   className,
-  controlSize = "default",
-  defaultImage,
-  initials: _initials
+  controlSize = "default"
 }) {
   const canvasRef = React2.useRef(null);
   const fileInputRef = React2.useRef(null);
   const containerRef = React2.useRef(null);
-  const imageSource = value ?? defaultImage;
   const [image, setImage] = React2.useState(null);
   const [imageLoaded, setImageLoaded] = React2.useState(false);
   const [zoom, setZoom] = React2.useState(1);
@@ -3848,83 +3845,17 @@ function AvatarEditor({
   const [isDragging, setIsDragging] = React2.useState(false);
   const [dragStart, setDragStart] = React2.useState({ x: 0, y: 0 });
   const [showGrid, setShowGrid] = React2.useState(initialShowGrid);
-  React2.useEffect(() => {
-    if (imageSource) {
-      const img = new Image();
-      if (!imageSource.startsWith("data:")) {
-        img.crossOrigin = "anonymous";
-      }
-      img.onload = () => {
-        setImage(img);
-        setImageLoaded(true);
-        setZoom(1);
-        setRotation(0);
-        setPosition({ x: 0, y: 0 });
-      };
-      img.src = imageSource;
-    } else {
-      setImage(null);
-      setImageLoaded(false);
-      setZoom(1);
-      setRotation(0);
-      setPosition({ x: 0, y: 0 });
-    }
-  }, [imageSource]);
   const generateOutput = React2.useCallback(() => {
-    if (!image) return null;
+    if (!canvasRef.current || !image) return null;
     const outputCanvas = document.createElement("canvas");
     outputCanvas.width = outputSize;
     outputCanvas.height = outputSize;
     const ctx = outputCanvas.getContext("2d");
     if (!ctx) return null;
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = "high";
-    if (outputFormat === "jpeg") {
-      ctx.fillStyle = "#ffffff";
-      ctx.fillRect(0, 0, outputSize, outputSize);
-    }
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = "high";
-    ctx.save();
-    ctx.translate(outputSize / 2, outputSize / 2);
-    ctx.rotate(rotation * Math.PI / 180);
-    const scale = zoom;
-    const imgAspect = image.width / image.height;
-    let drawWidth, drawHeight;
-    if (imgAspect > 1) {
-      drawHeight = outputSize * scale;
-      drawWidth = drawHeight * imgAspect;
-    } else {
-      drawWidth = outputSize * scale;
-      drawHeight = drawWidth / imgAspect;
-    }
-    const positionScale = outputSize / size;
-    const scaledPosX = position.x * positionScale;
-    const scaledPosY = position.y * positionScale;
-    ctx.drawImage(
-      image,
-      -drawWidth / 2 + scaledPosX,
-      -drawHeight / 2 + scaledPosY,
-      drawWidth,
-      drawHeight
-    );
-    ctx.restore();
-    ctx.globalCompositeOperation = "destination-in";
-    ctx.beginPath();
-    ctx.arc(outputSize / 2, outputSize / 2, outputSize / 2, 0, Math.PI * 2);
-    ctx.fill();
+    ctx.drawImage(canvasRef.current, 0, 0, outputSize, outputSize);
     const mimeType = `image/${outputFormat}`;
     return outputCanvas.toDataURL(mimeType, outputQuality);
-  }, [
-    image,
-    outputSize,
-    outputFormat,
-    outputQuality,
-    zoom,
-    rotation,
-    position,
-    size
-  ]);
+  }, [image, outputSize, outputFormat, outputQuality]);
   React2.useEffect(() => {
     if (!canvasRef.current || !image || !imageLoaded) return;
     const canvas = canvasRef.current;
@@ -3934,8 +3865,8 @@ function AvatarEditor({
     canvas.width = displaySize;
     canvas.height = displaySize;
     ctx.clearRect(0, 0, displaySize, displaySize);
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = "high";
+    ctx.fillStyle = "#1a1a2e";
+    ctx.fillRect(0, 0, displaySize, displaySize);
     ctx.save();
     ctx.translate(displaySize / 2, displaySize / 2);
     ctx.rotate(rotation * Math.PI / 180);
@@ -4053,7 +3984,6 @@ function AvatarEditor({
   const handleTouchMove = React2.useCallback(
     (e) => {
       if (!isDragging) return;
-      e.preventDefault();
       const touch = e.touches[0];
       setPosition({
         x: touch.clientX - dragStart.x,
@@ -4636,13 +4566,14 @@ function DrawerDescription({
 function useMediaQuery(query) {
   const [matches, setMatches] = React2.useState(false);
   React2.useEffect(() => {
-    if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
-    setMatches(media.matches);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
     const listener = () => setMatches(media.matches);
     media.addEventListener("change", listener);
     return () => media.removeEventListener("change", listener);
-  }, [query]);
+  }, [matches, query]);
   return matches;
 }
 function AvatarEditorDialog({
@@ -4652,7 +4583,7 @@ function AvatarEditorDialog({
   displaySize = 120,
   editorSize = 280,
   outputSize = 256,
-  placeholder: _placeholder = "Add Photo",
+  placeholder = "Add Photo",
   editLabel = "Edit avatar",
   dialogTitle = "Edit Avatar",
   acceptText = "Accept",
@@ -4665,15 +4596,7 @@ function AvatarEditorDialog({
   const [editedValue, setEditedValue] = React2.useState(value ?? null);
   const [isSaving, setIsSaving] = React2.useState(false);
   const [feedback, setFeedback] = React2.useState(null);
-  const [mobileEditorSize, setMobileEditorSize] = React2.useState(editorSize);
   const isMobile = useMediaQuery("(max-width: 640px)");
-  React2.useEffect(() => {
-    if (typeof window !== "undefined" && isMobile) {
-      setMobileEditorSize(Math.min(editorSize + 40, window.innerWidth - 48));
-    } else {
-      setMobileEditorSize(editorSize);
-    }
-  }, [isMobile, editorSize]);
   const handleOpenChange = React2.useCallback(
     (open) => {
       if (open) {
@@ -4692,6 +4615,7 @@ function AvatarEditorDialog({
       if (onSave) {
         const result = await onSave(editedValue);
         if (result) {
+          onChange?.(editedValue);
           setFeedback({ type: "success", message: successMessage });
           setTimeout(() => {
             setIsOpen(false);
@@ -4732,7 +4656,10 @@ function AvatarEditorDialog({
                 alt: "Avatar",
                 className: "w-full h-full object-cover"
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-10 h-10" }) })
+            ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center text-muted-foreground gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-1/3 h-1/3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: placeholder })
+            ] })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4748,6 +4675,7 @@ function AvatarEditorDialog({
       ]
     }
   );
+  const mobileEditorSize = isMobile ? Math.min(editorSize + 40, window.innerWidth - 48) : editorSize;
   const EditorContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       AvatarEditor,
@@ -4759,8 +4687,8 @@ function AvatarEditorDialog({
         controlSize: isMobile ? "large" : "default"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: feedback && /* @__PURE__ */ jsxRuntime.jsxs(
-      react.motion.div,
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: feedback && /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
       {
         initial: { opacity: 0, y: -10 },
         animate: { opacity: 1, y: 0 },
@@ -5203,7 +5131,7 @@ function NotificationsWidget({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      react.motion.button,
+      framerMotion.motion.button,
       {
         className: cn(
           "relative inline-flex items-center justify-center rounded-lg",
@@ -5215,8 +5143,8 @@ function NotificationsWidget({
         "aria-label": `Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: cn(styles.icon, "text-muted-foreground") }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            react.motion.div,
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
             {
               initial: { scale: 0, opacity: 0 },
               animate: { scale: 1, opacity: 1 },
@@ -5228,8 +5156,8 @@ function NotificationsWidget({
               )
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: unreadCount > 0 && showPulse && pulseStyle !== "none" && /* @__PURE__ */ jsxRuntime.jsx(
-            react.motion.div,
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: unreadCount > 0 && showPulse && pulseStyle !== "none" && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
             {
               initial: { scale: 1, opacity: 0.5 },
               animate: pulseVariants[pulseStyle].animate,
@@ -5295,7 +5223,7 @@ function NotificationsWidget({
                       handleNotificationClick(notification);
                     }
                   };
-                  const MotionElement = hasLink ? react.motion.button : react.motion.div;
+                  const MotionElement = hasLink ? framerMotion.motion.button : framerMotion.motion.div;
                   const interactionProps = hasLink ? {
                     role: "button",
                     tabIndex: 0,