@janovix/blocks 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/index.js

@@ -1,11 +1,15 @@
 import { useTheme } from 'next-themes';
-import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages } from 'lucide-react';
+import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, X, XIcon, User, Pencil, Check, Loader2 } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import * as React32 from 'react';
-import React32__default, { useLayoutEffect, useState, useCallback, useEffect } from 'react';
+import React32__default, { useLayoutEffect, useState, useCallback, useEffect, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Drawer as Drawer$1 } from 'vaul';
 
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -9507,7 +9511,1086 @@ function LanguageSwitcher({
     }
   );
 }
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min: min2 = 0,
+  max: max2 = 100,
+  ...props
+}) {
+  const _values = React32.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min2, max2],
+    [value, defaultValue, min2, max2]
+  );
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min: min2,
+      max: max2,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index2) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index2
+        ))
+      ]
+    }
+  );
+}
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant,
+  size: size4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size: size4, className })),
+      ...props
+    }
+  );
+}
+function AvatarEditor({
+  value,
+  onChange,
+  size: size4 = 280,
+  showGrid: initialShowGrid = false,
+  outputSize = 256,
+  outputFormat = "png",
+  outputQuality = 0.92,
+  className,
+  controlSize = "default",
+  defaultImage,
+  initials: _initials
+}) {
+  const canvasRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const containerRef = useRef(null);
+  const imageSource = value ?? defaultImage;
+  const [image, setImage] = useState(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [showGrid, setShowGrid] = useState(initialShowGrid);
+  useEffect(() => {
+    if (imageSource && !imageSource.startsWith("data:")) {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        setImage(img);
+        setImageLoaded(true);
+        setZoom(1);
+        setRotation(0);
+        setPosition({ x: 0, y: 0 });
+      };
+      img.src = imageSource;
+    }
+  }, [imageSource]);
+  const generateOutput = useCallback(() => {
+    if (!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.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 / size4;
+    const scaledPosX = position.x * positionScale;
+    const scaledPosY = position.y * positionScale;
+    ctx.drawImage(
+      image,
+      -drawWidth / 2 + scaledPosX,
+      -drawHeight / 2 + scaledPosY,
+      drawWidth,
+      drawHeight
+    );
+    ctx.restore();
+    const mimeType = `image/${outputFormat}`;
+    return outputCanvas.toDataURL(mimeType, outputQuality);
+  }, [
+    image,
+    outputSize,
+    outputFormat,
+    outputQuality,
+    zoom,
+    rotation,
+    position,
+    size4
+  ]);
+  useEffect(() => {
+    if (!canvasRef.current || !image || !imageLoaded) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const displaySize = size4;
+    canvas.width = displaySize;
+    canvas.height = displaySize;
+    ctx.clearRect(0, 0, displaySize, displaySize);
+    ctx.fillStyle = "#1a1a2e";
+    ctx.fillRect(0, 0, displaySize, displaySize);
+    ctx.save();
+    ctx.translate(displaySize / 2, displaySize / 2);
+    ctx.rotate(rotation * Math.PI / 180);
+    const scale = zoom;
+    const imgAspect = image.width / image.height;
+    let drawWidth, drawHeight;
+    if (imgAspect > 1) {
+      drawHeight = displaySize * scale;
+      drawWidth = drawHeight * imgAspect;
+    } else {
+      drawWidth = displaySize * scale;
+      drawHeight = drawWidth / imgAspect;
+    }
+    ctx.drawImage(
+      image,
+      -drawWidth / 2 + position.x,
+      -drawHeight / 2 + position.y,
+      drawWidth,
+      drawHeight
+    );
+    ctx.restore();
+    ctx.globalCompositeOperation = "destination-in";
+    ctx.beginPath();
+    ctx.arc(
+      displaySize / 2,
+      displaySize / 2,
+      displaySize / 2 - 4,
+      0,
+      Math.PI * 2
+    );
+    ctx.fill();
+    ctx.globalCompositeOperation = "source-over";
+    ctx.strokeStyle = "hsl(var(--primary))";
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.arc(
+      displaySize / 2,
+      displaySize / 2,
+      displaySize / 2 - 2,
+      0,
+      Math.PI * 2
+    );
+    ctx.stroke();
+    const dataUrl = generateOutput();
+    if (dataUrl) {
+      onChange?.(dataUrl);
+    }
+  }, [
+    image,
+    imageLoaded,
+    zoom,
+    rotation,
+    position,
+    size4,
+    generateOutput,
+    onChange
+  ]);
+  const resetTransforms = useCallback(() => {
+    setZoom(1);
+    setRotation(0);
+    setPosition({ x: 0, y: 0 });
+  }, []);
+  const handleFileSelect = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => {
+          setImage(img);
+          setImageLoaded(true);
+          resetTransforms();
+        };
+        img.src = event.target?.result;
+      };
+      reader.readAsDataURL(file);
+    },
+    [resetTransforms]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (!imageLoaded) return;
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    },
+    [imageLoaded, position]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      setPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      });
+    },
+    [isDragging, dragStart]
+  );
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (!imageLoaded) return;
+      const touch = e.touches[0];
+      setIsDragging(true);
+      setDragStart({
+        x: touch.clientX - position.x,
+        y: touch.clientY - position.y
+      });
+    },
+    [imageLoaded, position]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      const touch = e.touches[0];
+      setPosition({
+        x: touch.clientX - dragStart.x,
+        y: touch.clientY - dragStart.y
+      });
+    },
+    [isDragging, dragStart]
+  );
+  const handleDiscard = useCallback(() => {
+    setImage(null);
+    setImageLoaded(false);
+    resetTransforms();
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    onChange?.(null);
+  }, [resetTransforms, onChange]);
+  const handleZoomIn = () => setZoom((z) => Math.min(z + 0.1, 3));
+  const handleZoomOut = () => setZoom((z) => Math.max(z - 0.1, 0.5));
+  const handleRotateLeft = () => setRotation((r2) => r2 - 15);
+  const handleRotateRight = () => setRotation((r2) => r2 + 15);
+  const isLarge = controlSize === "large";
+  const buttonSize = isLarge ? "h-12 w-12" : "h-8 w-8";
+  const iconSize = isLarge ? "w-6 h-6" : "w-4 h-4";
+  const smallIconSize = isLarge ? "w-5 h-5" : "w-3 h-3";
+  const textSize = isLarge ? "text-sm" : "text-xs";
+  const uploadIconSize = isLarge ? "w-12 h-12" : "w-8 h-8";
+  const uploadContainerSize = isLarge ? "w-24 h-24" : "w-16 h-16";
+  const gapSize = isLarge ? "gap-6" : "gap-4";
+  const controlGap = isLarge ? "gap-3" : "gap-2";
+  const sliderHeight = isLarge ? "[&_[role=slider]]:h-6 [&_[role=slider]]:w-6" : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col", gapSize, className),
+      style: { width: size4 },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative bg-muted rounded-2xl overflow-hidden",
+            style: { width: size4, height: size4 },
+            children: [
+              !imageLoaded && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => fileInputRef.current?.click(),
+                  className: cn(
+                    "absolute inset-0 z-10 flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/80 transition-colors cursor-pointer",
+                    isLarge ? "gap-4" : "gap-3"
+                  ),
+                  "aria-label": "Upload image",
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "rounded-full bg-primary/10 flex items-center justify-center",
+                          uploadContainerSize
+                        ),
+                        children: /* @__PURE__ */ jsx(Upload, { className: cn("text-primary", uploadIconSize) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn("font-medium", isLarge ? "text-base" : "text-sm"),
+                        children: "Click to upload"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", textSize), children: "PNG, JPG up to 10MB" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "canvas",
+                {
+                  ref: canvasRef,
+                  className: cn(
+                    "absolute inset-0",
+                    imageLoaded ? "cursor-move" : "pointer-events-none opacity-0"
+                  ),
+                  style: { width: size4, height: size4 },
+                  onMouseDown: handleMouseDown,
+                  onMouseMove: handleMouseMove,
+                  onMouseUp: handleMouseUp,
+                  onMouseLeave: handleMouseUp,
+                  onTouchStart: handleTouchStart,
+                  onTouchMove: handleTouchMove,
+                  onTouchEnd: handleMouseUp
+                }
+              ),
+              showGrid && imageLoaded && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 pointer-events-none",
+                  style: { width: size4, height: size4 },
+                  children: /* @__PURE__ */ jsxs("svg", { width: size4, height: size4, className: "opacity-30", children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: size4 / 3,
+                        y1: 0,
+                        x2: size4 / 3,
+                        y2: size4,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: size4 * 2 / 3,
+                        y1: 0,
+                        x2: size4 * 2 / 3,
+                        y2: size4,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: 0,
+                        y1: size4 / 3,
+                        x2: size4,
+                        y2: size4 / 3,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: 0,
+                        y1: size4 * 2 / 3,
+                        x2: size4,
+                        y2: size4 * 2 / 3,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: size4 / 2 - 10,
+                        y1: size4 / 2,
+                        x2: size4 / 2 + 10,
+                        y2: size4 / 2,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: size4 / 2,
+                        y1: size4 / 2 - 10,
+                        x2: size4 / 2,
+                        y2: size4 / 2 + 10,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    )
+                  ] })
+                }
+              ),
+              imageLoaded && isDragging && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "absolute top-2 left-1/2 -translate-x-1/2 bg-black/60 rounded text-white flex items-center",
+                    isLarge ? "px-3 py-2 text-sm gap-2" : "px-2 py-1 text-xs gap-1"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Move, { className: smallIconSize }),
+                    "Dragging"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        imageLoaded && /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", isLarge && "space-y-5"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", controlGap), children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(buttonSize, "shrink-0"),
+                onClick: handleZoomOut,
+                "aria-label": "Zoom out",
+                type: "button",
+                children: /* @__PURE__ */ jsx(ZoomOut, { className: iconSize })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Slider,
+              {
+                value: [zoom],
+                onValueChange: ([v]) => setZoom(v),
+                min: 0.5,
+                max: 3,
+                step: 0.01,
+                className: cn("flex-1", sliderHeight),
+                "aria-label": "Zoom level"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(buttonSize, "shrink-0"),
+                onClick: handleZoomIn,
+                "aria-label": "Zoom in",
+                type: "button",
+                children: /* @__PURE__ */ jsx(ZoomIn, { className: iconSize })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", controlGap), children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn("flex items-center", isLarge ? "gap-2" : "gap-1"),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: handleRotateLeft,
+                      "aria-label": "Rotate left 15 degrees",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(RotateCcw, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "text-muted-foreground text-center tabular-nums",
+                        textSize,
+                        isLarge ? "w-16" : "w-12"
+                      ),
+                      children: [
+                        rotation,
+                        "\xB0"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: handleRotateRight,
+                      "aria-label": "Rotate right 15 degrees",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(RotateCw, { className: iconSize })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn("flex items-center", isLarge ? "gap-2" : "gap-1"),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Toggle,
+                    {
+                      pressed: showGrid,
+                      onPressedChange: setShowGrid,
+                      size: "sm",
+                      className: cn(buttonSize, "p-0"),
+                      "aria-label": "Toggle grid overlay",
+                      children: /* @__PURE__ */ jsx(Grid3X3, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: resetTransforms,
+                      "aria-label": "Reset all transforms",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(RefreshCw, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: () => fileInputRef.current?.click(),
+                      "aria-label": "Upload new image",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(Upload, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: cn(
+                        buttonSize,
+                        "text-destructive hover:text-destructive hover:bg-destructive/10"
+                      ),
+                      onClick: handleDiscard,
+                      "aria-label": "Discard image",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(X, { className: iconSize })
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            onChange: handleFileSelect,
+            className: "hidden",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Drawer$1.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [matches, query]);
+  return matches;
+}
+function AvatarEditorDialog({
+  value,
+  onChange,
+  onSave,
+  displaySize = 120,
+  editorSize = 280,
+  outputSize = 256,
+  placeholder: _placeholder = "Add Photo",
+  editLabel = "Edit avatar",
+  dialogTitle = "Edit Avatar",
+  acceptText = "Accept",
+  cancelText = "Cancel",
+  successMessage = "Avatar saved successfully!",
+  errorMessage = "Failed to save avatar. Please try again.",
+  className
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [editedValue, setEditedValue] = useState(value ?? null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [feedback, setFeedback] = useState(null);
+  const isMobile = useMediaQuery("(max-width: 640px)");
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (open) {
+        setEditedValue(value ?? null);
+        setFeedback(null);
+      }
+      setIsOpen(open);
+    },
+    [value]
+  );
+  const handleAccept = useCallback(async () => {
+    if (!editedValue) return;
+    setIsSaving(true);
+    setFeedback(null);
+    try {
+      if (onSave) {
+        const result = await onSave(editedValue);
+        if (result) {
+          setFeedback({ type: "success", message: successMessage });
+          setTimeout(() => {
+            setIsOpen(false);
+            setFeedback(null);
+          }, 1500);
+        } else {
+          setFeedback({ type: "error", message: errorMessage });
+        }
+      } else {
+        onChange?.(editedValue);
+        setFeedback({ type: "success", message: successMessage });
+        setTimeout(() => {
+          setIsOpen(false);
+          setFeedback(null);
+        }, 1500);
+      }
+    } catch {
+      setFeedback({ type: "error", message: errorMessage });
+    } finally {
+      setIsSaving(false);
+    }
+  }, [editedValue, onChange, onSave, successMessage, errorMessage]);
+  const AvatarDisplay = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative group", className),
+      style: { width: displaySize, height: displaySize },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-full h-full rounded-full overflow-hidden bg-muted border-2 border-border flex items-center justify-center",
+            style: { width: displaySize, height: displaySize },
+            children: value ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: value || "/placeholder.svg",
+                alt: "Avatar",
+                className: "w-full h-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(User, { className: "w-10 h-10" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleOpenChange(true),
+            className: "absolute bottom-0 right-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+            "aria-label": editLabel,
+            type: "button",
+            children: /* @__PURE__ */ jsx(Pencil, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+  const mobileEditorSize = isMobile ? Math.min(editorSize + 40, window.innerWidth - 48) : editorSize;
+  const EditorContent = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsx(
+      AvatarEditor,
+      {
+        value: editedValue,
+        onChange: setEditedValue,
+        size: mobileEditorSize,
+        outputSize,
+        controlSize: isMobile ? "large" : "default"
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: feedback && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: -10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        className: cn(
+          "flex items-center gap-2 rounded-lg font-medium",
+          isMobile ? "px-5 py-3 text-base" : "px-4 py-2 text-sm",
+          feedback.type === "success" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
+        ),
+        children: [
+          feedback.type === "success" ? /* @__PURE__ */ jsx(Check, { className: isMobile ? "w-5 h-5" : "w-4 h-4" }) : /* @__PURE__ */ jsx(X, { className: isMobile ? "w-5 h-5" : "w-4 h-4" }),
+          feedback.message
+        ]
+      }
+    ) })
+  ] });
+  const FooterButtons = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isMobile ? /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        disabled: isSaving,
+        size: "lg",
+        className: "flex-1 bg-transparent",
+        children: cancelText
+      }
+    ) }) : /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: isSaving, children: cancelText }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleAccept,
+        disabled: !editedValue || isSaving || feedback?.type === "success",
+        size: isMobile ? "lg" : "default",
+        className: isMobile ? "flex-1" : "",
+        children: isSaving ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Loader2,
+            {
+              className: cn(
+                "mr-2 animate-spin",
+                isMobile ? "w-5 h-5" : "w-4 h-4"
+              )
+            }
+          ),
+          "Saving..."
+        ] }) : feedback?.type === "success" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Check, { className: cn("mr-2", isMobile ? "w-5 h-5" : "w-4 h-4") }),
+          "Saved!"
+        ] }) : acceptText
+      }
+    )
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      AvatarDisplay,
+      /* @__PURE__ */ jsx(Drawer, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DrawerContent, { className: "max-h-[96vh]", children: [
+        /* @__PURE__ */ jsx(DrawerHeader, { className: "text-center", children: /* @__PURE__ */ jsx(DrawerTitle, { className: "text-xl", children: dialogTitle }) }),
+        /* @__PURE__ */ jsx("div", { className: "px-6 pb-6 overflow-y-auto", children: EditorContent }),
+        /* @__PURE__ */ jsx(DrawerFooter, { className: "flex-row gap-3 px-6 pb-8", children: FooterButtons })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    AvatarDisplay,
+    /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialogTitle }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: EditorContent }),
+      /* @__PURE__ */ jsx(DialogFooter, { className: "gap-2 sm:gap-0", children: FooterButtons })
+    ] }) })
+  ] });
+}
 
-export { Button, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuPortal2 as DropdownMenuPortal, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, LanguageSwitcher, ThemeSwitcher, Tooltip2 as Tooltip, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, buttonVariants, cn };
+export { AvatarEditor, AvatarEditorDialog, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuPortal2 as DropdownMenuPortal, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, LanguageSwitcher, Slider, ThemeSwitcher, Toggle, Tooltip2 as Tooltip, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map