@maayan-albert/moab-sdk 1.0.0

package/dist/components.mjs

@@ -0,0 +1,665 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { Trash2, X } from 'lucide-react';
+import html2canvas from 'html2canvas';
+
+// src/components/Button.tsx
+var Button = ({
+  children,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  onClick,
+  className = "",
+  ...props
+}) => {
+  const baseStyles = "font-semibold rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+  const variantStyles = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+    secondary: "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",
+    outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500"
+  };
+  const sizeStyles = {
+    small: "px-3 py-1.5 text-sm",
+    medium: "px-4 py-2 text-base",
+    large: "px-6 py-3 text-lg"
+  };
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${disabledStyles} ${className}`,
+      disabled,
+      onClick,
+      ...props,
+      children
+    }
+  );
+};
+var Button_default = Button;
+var Card = ({
+  children,
+  title,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bg-white rounded-lg shadow-md p-6 border border-gray-200 ${className}`,
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold mb-4 text-gray-800", children: title }),
+        children
+      ]
+    }
+  );
+};
+var Card_default = Card;
+var Input = ({
+  label,
+  type = "text",
+  placeholder,
+  value,
+  onChange,
+  required = false,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+    label && /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        placeholder,
+        value,
+        onChange,
+        required,
+        className: `w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${className}`,
+        ...props
+      }
+    )
+  ] });
+};
+var Input_default = Input;
+var DrawingTool = ({
+  width,
+  height,
+  className = "",
+  overlay = true,
+  ...props
+}) => {
+  const canvasRef = useRef(null);
+  const toolbarRef = useRef(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const brushColor = "#EF4444";
+  const brushSize = 5;
+  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+  const [enabled, setEnabled] = useState(false);
+  const [hasContent, setHasContent] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [corner, setCorner] = useState("bottom-right");
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [showClearTooltip, setShowClearTooltip] = useState(false);
+  useEffect(() => {
+    if (overlay) {
+      const updateSize = () => {
+        setCanvasSize({
+          width: window.innerWidth,
+          height: window.innerHeight
+        });
+      };
+      updateSize();
+      window.addEventListener("resize", updateSize);
+      return () => window.removeEventListener("resize", updateSize);
+    } else {
+      setCanvasSize({
+        width: width || 800,
+        height: height || 600
+      });
+    }
+  }, [overlay, width, height]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || canvasSize.width === 0 || canvasSize.height === 0) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
+    ctx.strokeStyle = brushColor;
+    ctx.lineWidth = brushSize;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    setHasContent(false);
+  }, [canvasSize, brushColor, brushSize]);
+  const getCoordinates = useCallback(
+    (e) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return { x: 0, y: 0 };
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+      if ("touches" in e) {
+        return {
+          x: (e.touches[0].clientX - rect.left) * scaleX,
+          y: (e.touches[0].clientY - rect.top) * scaleY
+        };
+      } else {
+        return {
+          x: (e.clientX - rect.left) * scaleX,
+          y: (e.clientY - rect.top) * scaleY
+        };
+      }
+    },
+    []
+  );
+  const startDrawing = useCallback(
+    (e) => {
+      if (!enabled) return;
+      e.preventDefault();
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      if (!canvas || !ctx) return;
+      const { x, y } = getCoordinates(e);
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      setIsDrawing(true);
+    },
+    [enabled, getCoordinates]
+  );
+  const draw = useCallback(
+    (e) => {
+      if (!isDrawing) return;
+      e.preventDefault();
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      if (!canvas || !ctx) return;
+      const { x, y } = getCoordinates(e);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+      setHasContent(true);
+    },
+    [isDrawing, getCoordinates]
+  );
+  const stopDrawing = useCallback(() => {
+    setIsDrawing(false);
+  }, []);
+  const clearCanvas = useCallback(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    setHasContent(false);
+  }, []);
+  const takeScreenshot = useCallback(async () => {
+    try {
+      const toolbar = toolbarRef.current;
+      if (toolbar) {
+        toolbar.style.opacity = "0";
+      }
+      const canvas = await html2canvas(document.body, {
+        useCORS: true,
+        logging: false,
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight
+      });
+      if (toolbar) {
+        toolbar.style.opacity = "";
+      }
+      canvas.toBlob(async (blob) => {
+        if (!blob) return;
+        try {
+          await navigator.clipboard.write([
+            new ClipboardItem({
+              "image/png": blob
+            })
+          ]);
+        } catch (err) {
+          console.error("Failed to copy to clipboard:", err);
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = "screenshot.png";
+          a.click();
+          URL.revokeObjectURL(url);
+        }
+      }, "image/png");
+    } catch (error) {
+      console.error("Failed to take screenshot:", error);
+    }
+  }, []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!ctx) return;
+    ctx.strokeStyle = brushColor;
+    ctx.lineWidth = brushSize;
+  }, [brushColor, brushSize]);
+  const getTargetCorner = useCallback(
+    (startX, startY, currentX, currentY) => {
+      const deltaX = currentX - startX;
+      const deltaY = currentY - startY;
+      const threshold = 50;
+      if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) {
+        return null;
+      }
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const horizontal = currentX < viewportWidth / 2 ? "left" : "right";
+      const vertical = currentY < viewportHeight / 2 ? "top" : "bottom";
+      if (vertical === "top" && horizontal === "left") return "top-left";
+      if (vertical === "top" && horizontal === "right") return "top-right";
+      if (vertical === "bottom" && horizontal === "left") return "bottom-left";
+      if (vertical === "bottom" && horizontal === "right")
+        return "bottom-right";
+      return null;
+    },
+    []
+  );
+  const handleMouseDown = useCallback((e) => {
+    if (e.target.closest("button")) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    setDragStart({
+      x: e.clientX,
+      y: e.clientY
+    });
+  }, []);
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const targetCorner = getTargetCorner(
+        dragStart.x,
+        dragStart.y,
+        e.clientX,
+        e.clientY
+      );
+      if (targetCorner) {
+        setCorner(targetCorner);
+      } else {
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const horizontal = e.clientX < viewportWidth / 2 ? "left" : "right";
+        const vertical = e.clientY < viewportHeight / 2 ? "top" : "bottom";
+        if (vertical === "top" && horizontal === "left") setCorner("top-left");
+        else if (vertical === "top" && horizontal === "right")
+          setCorner("top-right");
+        else if (vertical === "bottom" && horizontal === "left")
+          setCorner("bottom-left");
+        else setCorner("bottom-right");
+      }
+    };
+    const handleMouseUp = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+    };
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove, {
+        passive: false
+      });
+      document.addEventListener("mouseup", handleMouseUp, { passive: false });
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, dragStart, getTargetCorner]);
+  if (overlay) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          onMouseDown: startDrawing,
+          onMouseMove: draw,
+          onMouseUp: stopDrawing,
+          onMouseLeave: stopDrawing,
+          onTouchStart: startDrawing,
+          onTouchMove: draw,
+          onTouchEnd: stopDrawing,
+          className: `fixed top-0 left-0 touch-none z-50 transition-opacity ${enabled && !isDragging ? "cursor-crosshair pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
+          style: {
+            width: `${canvasSize.width}px`,
+            height: `${canvasSize.height}px`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: toolbarRef,
+          className: `fixed flex flex-row items-center px-2 py-1.5 bg-neutral-800 rounded-full shadow-lg z-[60] ${isDragging ? "cursor-grabbing" : "cursor-grab"} ${className}`,
+          style: {
+            gap: enabled ? "8px" : "0px",
+            transition: "gap 300ms ease-in-out",
+            ...corner === "top-left" ? { top: "16px", left: "16px", bottom: "auto", right: "auto" } : corner === "top-right" ? { top: "16px", right: "16px", bottom: "auto", left: "auto" } : corner === "bottom-left" ? { bottom: "16px", left: "16px", top: "auto", right: "auto" } : { bottom: "16px", right: "16px", top: "auto", left: "auto" }
+          },
+          onMouseDown: handleMouseDown,
+          ...props,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "overflow-hidden flex-shrink-0",
+                style: {
+                  maxWidth: enabled ? "100px" : "0px",
+                  opacity: enabled ? 1 : 0,
+                  transition: "max-width 300ms ease-in-out, opacity 300ms ease-in-out"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      takeScreenshot();
+                    },
+                    className: "p-2 text-white hover:bg-neutral-600/30 rounded-full transition-colors focus:outline-none whitespace-nowrap",
+                    "aria-label": "Take screenshot",
+                    children: /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "18",
+                        height: "18",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "lucide lucide-camera",
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" }),
+                          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "3" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "overflow-hidden flex-shrink-0 relative",
+                style: {
+                  maxWidth: enabled ? "100px" : "0px",
+                  opacity: enabled ? 1 : 0,
+                  transition: "max-width 300ms ease-in-out, opacity 300ms ease-in-out"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        clearCanvas();
+                        setShowClearTooltip(false);
+                      },
+                      onMouseEnter: () => {
+                        if (hasContent) {
+                          setShowClearTooltip(true);
+                        }
+                      },
+                      onMouseLeave: () => setShowClearTooltip(false),
+                      disabled: !hasContent,
+                      className: "p-2 text-white rounded-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed relative group",
+                      "aria-label": "Clear canvas",
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-red-600/30 opacity-0 group-hover:opacity-100 transition-opacity disabled:group-hover:opacity-0" }),
+                        /* @__PURE__ */ jsx(
+                          Trash2,
+                          {
+                            size: 18,
+                            strokeWidth: 2,
+                            className: "relative z-10 group-hover:text-red-600 transition-colors"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  showClearTooltip && hasContent && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-neutral-800 rounded-full shadow-lg whitespace-nowrap z-[70]", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-white text-sm", children: "Clear all" }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setShowClearTooltip(false);
+                          },
+                          onMouseDown: (e) => e.stopPropagation(),
+                          className: "text-white hover:text-neutral-300 transition-colors rounded-full",
+                          "aria-label": "Dismiss tooltip",
+                          children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 2 })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 -mt-1", children: /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-neutral-800 rotate-45" }) })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setEnabled(!enabled);
+                  },
+                  className: "p-1.5 text-white hover:bg-neutral-600/30 rounded-full transition-all focus:outline-none",
+                  style: {
+                    opacity: enabled ? 0 : 1,
+                    pointerEvents: enabled ? "none" : "auto",
+                    transition: "opacity 300ms ease-in-out"
+                  },
+                  "aria-label": "Turn on drawing",
+                  children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "18",
+                      height: "18",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "lucide lucide-brush",
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "m11 10 3 3" }),
+                        /* @__PURE__ */ jsx("path", { d: "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z" }),
+                        /* @__PURE__ */ jsx("path", { d: "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setEnabled(false);
+                  },
+                  className: "absolute inset-0 p-1.5 text-white hover:bg-neutral-600/30 rounded-full transition-all focus:outline-none",
+                  style: {
+                    opacity: enabled ? 1 : 0,
+                    pointerEvents: enabled ? "auto" : "none",
+                    transition: "opacity 300ms ease-in-out"
+                  },
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ jsx(X, { size: 18, strokeWidth: 2.5 })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-col items-center gap-4 p-6 bg-white rounded-full shadow-lg border border-gray-200 ${className}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-row items-center w-full justify-center transition-all duration-300 ease-in-out",
+            style: {
+              gap: enabled ? "12px" : "0px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setEnabled(!enabled),
+                  className: `p-3 rounded-xl transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 ${enabled ? "bg-emerald-500 text-white hover:bg-emerald-600 active:bg-emerald-700" : "bg-slate-500 text-white hover:bg-slate-600 active:bg-slate-700"}`,
+                  "aria-label": enabled ? "Turn off drawing" : "Turn on drawing",
+                  children: enabled ? /* @__PURE__ */ jsx(X, { size: 20, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "lucide lucide-brush",
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "m11 10 3 3" }),
+                        /* @__PURE__ */ jsx("path", { d: "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z" }),
+                        /* @__PURE__ */ jsx("path", { d: "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "transition-all duration-300 ease-in-out overflow-hidden flex-shrink-0",
+                  style: {
+                    width: enabled ? "52px" : "0px",
+                    minWidth: enabled ? "52px" : "0px",
+                    opacity: enabled ? 1 : 0
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: clearCanvas,
+                      disabled: !hasContent,
+                      className: "p-3 bg-red-500 text-white hover:text-red-200 rounded-xl hover:bg-red-600 active:bg-red-700 transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-500 disabled:hover:shadow-md disabled:active:scale-100 whitespace-nowrap",
+                      "aria-label": "Clear canvas",
+                      children: /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "20",
+                          height: "20",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          className: "lucide lucide-brush-cleaning",
+                          children: [
+                            /* @__PURE__ */ jsx("path", { d: "m16 22-1-4" }),
+                            /* @__PURE__ */ jsx("path", { d: "M19 14a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2h-3a1 1 0 0 1-1-1V4a2 2 0 0 0-4 0v5a1 1 0 0 1-1 1H6a2 2 0 0 0-2 2v1a1 1 0 0 0 1 1" }),
+                            /* @__PURE__ */ jsx("path", { d: "M19 14H5l-1.973 6.767A1 1 0 0 0 4 22h16a1 1 0 0 0 .973-1.233z" }),
+                            /* @__PURE__ */ jsx("path", { d: "m8 22 1-4" })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "transition-all duration-300 ease-in-out overflow-hidden flex-shrink-0",
+                  style: {
+                    width: enabled ? "52px" : "0px",
+                    minWidth: enabled ? "52px" : "0px",
+                    opacity: enabled ? 1 : 0
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: takeScreenshot,
+                      className: "p-3 bg-neutral-500 text-white rounded-xl hover:bg-neutral-600 active:bg-neutral-700 transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 whitespace-nowrap",
+                      "aria-label": "Take screenshot",
+                      children: /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "20",
+                          height: "20",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          className: "lucide lucide-camera",
+                          children: [
+                            /* @__PURE__ */ jsx("path", { d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" }),
+                            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "3" })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            onMouseDown: startDrawing,
+            onMouseMove: draw,
+            onMouseUp: stopDrawing,
+            onMouseLeave: stopDrawing,
+            onTouchStart: startDrawing,
+            onTouchMove: draw,
+            onTouchEnd: stopDrawing,
+            className: `border border-gray-300 rounded touch-none transition-opacity ${enabled ? "cursor-crosshair pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
+            style: {
+              width: `${canvasSize.width}px`,
+              height: `${canvasSize.height}px`,
+              maxWidth: "100%"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var DrawingTool_default = DrawingTool;
+
+export { Button, Button_default as ButtonDefault, Card, Card_default as CardDefault, DrawingTool, DrawingTool_default as DrawingToolDefault, Input, Input_default as InputDefault };
+//# sourceMappingURL=components.mjs.map
+//# sourceMappingURL=components.mjs.map