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

package/dist/index.cjs

@@ -6,6 +6,10 @@ var react = require('motion/react');
 var React32 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
+var SliderPrimitive = require('@radix-ui/react-slider');
+var TogglePrimitive = require('@radix-ui/react-toggle');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var vaul = require('vaul');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -27,6 +31,9 @@ function _interopNamespace(e) {
 
 var React32__namespace = /*#__PURE__*/_interopNamespace(React32);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -9528,8 +9535,1109 @@ function LanguageSwitcher({
     }
   );
 }
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min: min2 = 0,
+  max: max2 = 100,
+  ...props
+}) {
+  const _values = React32__namespace.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min2, max2],
+    [value, defaultValue, min2, max2]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SliderPrimitive__namespace.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__ */ jsxRuntime.jsx(
+          SliderPrimitive__namespace.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__ */ jsxRuntime.jsx(
+              SliderPrimitive__namespace.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__ */ jsxRuntime.jsx(
+          SliderPrimitive__namespace.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__ */ jsxRuntime.jsx(
+    TogglePrimitive__namespace.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 = React32.useRef(null);
+  const fileInputRef = React32.useRef(null);
+  const containerRef = React32.useRef(null);
+  const imageSource = value ?? defaultImage;
+  const [image, setImage] = React32.useState(null);
+  const [imageLoaded, setImageLoaded] = React32.useState(false);
+  const [zoom, setZoom] = React32.useState(1);
+  const [rotation, setRotation] = React32.useState(0);
+  const [position, setPosition] = React32.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React32.useState(false);
+  const [dragStart, setDragStart] = React32.useState({ x: 0, y: 0 });
+  const [showGrid, setShowGrid] = React32.useState(initialShowGrid);
+  React32.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 = React32.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
+  ]);
+  React32.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 = React32.useCallback(() => {
+    setZoom(1);
+    setRotation(0);
+    setPosition({ x: 0, y: 0 });
+  }, []);
+  const handleFileSelect = React32.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 = React32.useCallback(
+    (e) => {
+      if (!imageLoaded) return;
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    },
+    [imageLoaded, position]
+  );
+  const handleMouseMove = React32.useCallback(
+    (e) => {
+      if (!isDragging) return;
+      setPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      });
+    },
+    [isDragging, dragStart]
+  );
+  const handleMouseUp = React32.useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const handleTouchStart = React32.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 = React32.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 = React32.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex flex-col", gapSize, className),
+      style: { width: size4 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative bg-muted rounded-2xl overflow-hidden",
+            style: { width: size4, height: size4 },
+            children: [
+              !imageLoaded && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "rounded-full bg-primary/10 flex items-center justify-center",
+                          uploadContainerSize
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: cn("text-primary", uploadIconSize) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn("font-medium", isLarge ? "text-base" : "text-sm"),
+                        children: "Click to upload"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", textSize), children: "PNG, JPG up to 10MB" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 pointer-events-none",
+                  style: { width: size4, height: size4 },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size4, height: size4, className: "opacity-30", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
+                      {
+                        x1: size4 / 3,
+                        y1: 0,
+                        x2: size4 / 3,
+                        y2: size4,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
+                      {
+                        x1: size4 * 2 / 3,
+                        y1: 0,
+                        x2: size4 * 2 / 3,
+                        y2: size4,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
+                      {
+                        x1: 0,
+                        y1: size4 / 3,
+                        x2: size4,
+                        y2: size4 / 3,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
+                      {
+                        x1: 0,
+                        y1: size4 * 2 / 3,
+                        x2: size4,
+                        y2: size4 * 2 / 3,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
+                      {
+                        x1: size4 / 2 - 10,
+                        y1: size4 / 2,
+                        x2: size4 / 2 + 10,
+                        y2: size4 / 2,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
+                      {
+                        x1: size4 / 2,
+                        y1: size4 / 2 - 10,
+                        x2: size4 / 2,
+                        y2: size4 / 2 + 10,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    )
+                  ] })
+                }
+              ),
+              imageLoaded && isDragging && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Move, { className: smallIconSize }),
+                    "Dragging"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        imageLoaded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", isLarge && "space-y-5"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center", controlGap), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(buttonSize, "shrink-0"),
+                onClick: handleZoomOut,
+                "aria-label": "Zoom out",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomOut, { className: iconSize })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(buttonSize, "shrink-0"),
+                onClick: handleZoomIn,
+                "aria-label": "Zoom in",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { className: iconSize })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between", controlGap), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn("flex items-center", isLarge ? "gap-2" : "gap-1"),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: handleRotateLeft,
+                      "aria-label": "Rotate left 15 degrees",
+                      type: "button",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "text-muted-foreground text-center tabular-nums",
+                        textSize,
+                        isLarge ? "w-16" : "w-12"
+                      ),
+                      children: [
+                        rotation,
+                        "\xB0"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: handleRotateRight,
+                      "aria-label": "Rotate right 15 degrees",
+                      type: "button",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCw, { className: iconSize })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn("flex items-center", isLarge ? "gap-2" : "gap-1"),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Toggle,
+                    {
+                      pressed: showGrid,
+                      onPressedChange: setShowGrid,
+                      size: "sm",
+                      className: cn(buttonSize, "p-0"),
+                      "aria-label": "Toggle grid overlay",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid3X3, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: resetTransforms,
+                      "aria-label": "Reset all transforms",
+                      type: "button",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: () => fileInputRef.current?.click(),
+                      "aria-label": "Upload new image",
+                      type: "button",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: iconSize })
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            onChange: handleFileSelect,
+            className: "hidden",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(
+            DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.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__ */ jsxRuntime.jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      vaul.Drawer.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    vaul.Drawer.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = React32.useState(false);
+  React32.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] = React32.useState(false);
+  const [editedValue, setEditedValue] = React32.useState(value ?? null);
+  const [isSaving, setIsSaving] = React32.useState(false);
+  const [feedback, setFeedback] = React32.useState(null);
+  const isMobile = useMediaQuery("(max-width: 640px)");
+  const handleOpenChange = React32.useCallback(
+    (open) => {
+      if (open) {
+        setEditedValue(value ?? null);
+        setFeedback(null);
+      }
+      setIsOpen(open);
+    },
+    [value]
+  );
+  const handleAccept = React32.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("relative group", className),
+      style: { width: displaySize, height: displaySize },
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: value || "/placeholder.svg",
+                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.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__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+  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,
+      {
+        value: editedValue,
+        onChange: setEditedValue,
+        size: mobileEditorSize,
+        outputSize,
+        controlSize: isMobile ? "large" : "default"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: feedback && /* @__PURE__ */ jsxRuntime.jsxs(
+      react.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__ */ jsxRuntime.jsx(lucideReact.Check, { className: isMobile ? "w-5 h-5" : "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: isMobile ? "w-5 h-5" : "w-4 h-4" }),
+          feedback.message
+        ]
+      }
+    ) })
+  ] });
+  const FooterButtons = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isMobile ? /* @__PURE__ */ jsxRuntime.jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "outline",
+        disabled: isSaving,
+        size: "lg",
+        className: "flex-1 bg-transparent",
+        children: cancelText
+      }
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", disabled: isSaving, children: cancelText }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        onClick: handleAccept,
+        disabled: !editedValue || isSaving || feedback?.type === "success",
+        size: isMobile ? "lg" : "default",
+        className: isMobile ? "flex-1" : "",
+        children: isSaving ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              className: cn(
+                "mr-2 animate-spin",
+                isMobile ? "w-5 h-5" : "w-4 h-4"
+              )
+            }
+          ),
+          "Saving..."
+        ] }) : feedback?.type === "success" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("mr-2", isMobile ? "w-5 h-5" : "w-4 h-4") }),
+          "Saved!"
+        ] }) : acceptText
+      }
+    )
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      AvatarDisplay,
+      /* @__PURE__ */ jsxRuntime.jsx(Drawer, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { className: "max-h-[96vh]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "text-xl", children: dialogTitle }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 pb-6 overflow-y-auto", children: EditorContent }),
+        /* @__PURE__ */ jsxRuntime.jsx(DrawerFooter, { className: "flex-row gap-3 px-6 pb-8", children: FooterButtons })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    AvatarDisplay,
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: dialogTitle }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-4", children: EditorContent }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { className: "gap-2 sm:gap-0", children: FooterButtons })
+    ] }) })
+  ] });
+}
 
+exports.AvatarEditor = AvatarEditor;
+exports.AvatarEditorDialog = AvatarEditorDialog;
 exports.Button = Button;
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.Drawer = Drawer;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
 exports.DropdownMenu = DropdownMenu2;
 exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem2;
 exports.DropdownMenuContent = DropdownMenuContent2;
@@ -9546,12 +10654,15 @@ exports.DropdownMenuSubContent = DropdownMenuSubContent2;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger2;
 exports.DropdownMenuTrigger = DropdownMenuTrigger2;
 exports.LanguageSwitcher = LanguageSwitcher;
+exports.Slider = Slider;
 exports.ThemeSwitcher = ThemeSwitcher;
+exports.Toggle = Toggle;
 exports.Tooltip = Tooltip2;
 exports.TooltipContent = TooltipContent2;
 exports.TooltipProvider = TooltipProvider2;
 exports.TooltipTrigger = TooltipTrigger2;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
+exports.toggleVariants = toggleVariants;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map