gd-ui-library 1.0.21 → 1.0.22

package/dist/index.js

@@ -67,6 +67,8 @@ __export(index_exports, {
   GanttChart: () => GanttChart,
   Grid: () => Grid,
   Hero: () => Hero,
+  IconSelect: () => IconSelect,
+  ImageCrop: () => ImageCrop,
   InfiniteScroll: () => InfiniteScroll,
   Input: () => Input,
   InputGroup: () => InputGroup,
@@ -5338,6 +5340,556 @@ var GanttChart = (0, import_react70.forwardRef)(
 );
 GanttChart.displayName = "GanttChart";
 
+// src/components/IconSelect/IconSelect.tsx
+var import_react71 = require("react");
+var Lucide = __toESM(require("lucide-react"));
+var import_lucide_react33 = require("lucide-react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var BATCH_SIZE = 50;
+var EXCLUDED = /* @__PURE__ */ new Set(["createLucideIcon", "LucideIcon", "default"]);
+var IconSelect = (0, import_react71.forwardRef)(
+  ({
+    value,
+    onChange,
+    placeholder = "Select an icon...",
+    label,
+    error,
+    description,
+    disabled = false,
+    className
+  }, ref) => {
+    const [open, setOpen] = (0, import_react71.useState)(false);
+    const [search, setSearch] = (0, import_react71.useState)("");
+    const [visibleCount, setVisibleCount] = (0, import_react71.useState)(BATCH_SIZE);
+    const containerRef = (0, import_react71.useRef)(null);
+    const listRef = (0, import_react71.useRef)(null);
+    const searchRef = (0, import_react71.useRef)(null);
+    const iconList = (0, import_react71.useMemo)(() => {
+      return Object.entries(Lucide).filter(([name, item]) => {
+        if (EXCLUDED.has(name) || name.endsWith("Icon")) return false;
+        return typeof item === "function" || typeof item === "object" && item !== null;
+      }).map(([name]) => name).sort((a, b) => a.localeCompare(b));
+    }, []);
+    const filtered = (0, import_react71.useMemo)(() => {
+      if (!search.trim()) return iconList;
+      const q = search.toLowerCase();
+      return iconList.filter((n) => n.toLowerCase().includes(q));
+    }, [search, iconList]);
+    const visible = filtered.slice(0, visibleCount);
+    const handleListScroll = () => {
+      const el = listRef.current;
+      if (!el) return;
+      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 40) {
+        setVisibleCount((prev) => Math.min(prev + BATCH_SIZE, filtered.length));
+      }
+    };
+    (0, import_react71.useEffect)(() => {
+      const handler = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setOpen(false);
+        }
+      };
+      if (open) {
+        document.addEventListener("mousedown", handler);
+        setTimeout(() => searchRef.current?.focus(), 50);
+      }
+      return () => document.removeEventListener("mousedown", handler);
+    }, [open]);
+    (0, import_react71.useEffect)(() => {
+      setVisibleCount(BATCH_SIZE);
+    }, [search]);
+    const SelectedIcon = value ? Lucide[value] : null;
+    const handleSelect = (name) => {
+      onChange?.(name);
+      setOpen(false);
+      setSearch("");
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      onChange?.("");
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ref, className: cn("w-full space-y-1.5", className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("label", { className: cn("text-sm font-medium block", disabled ? "text-gray-400" : "text-gray-700"), children: label }),
+      description && !error && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-xs text-gray-500", children: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ref: containerRef, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => !disabled && setOpen((o) => !o),
+            className: cn(
+              "w-full flex items-center justify-between gap-2",
+              "min-h-[40px] rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm",
+              "transition-all duration-150 outline-none shadow-sm cursor-pointer",
+              "hover:border-gray-400",
+              open && !error && "border-blue-500 ring-2 ring-blue-100",
+              error && "border-red-500 ring-1 ring-red-500",
+              disabled && "bg-gray-100 text-gray-400 cursor-not-allowed opacity-60"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: value && SelectedIcon ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectedIcon, { className: "w-4 h-4 flex-shrink-0 text-gray-600" }),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "truncate text-gray-700", children: value })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-gray-400 truncate", children: placeholder }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+                value && !disabled && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                  "span",
+                  {
+                    role: "button",
+                    onClick: handleClear,
+                    className: "p-0.5 rounded hover:bg-gray-100 text-gray-400 hover:text-gray-600 cursor-pointer",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react33.X, { className: "w-3 h-3" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react33.ChevronDown, { className: cn("w-4 h-4 text-gray-400 transition-transform", open && "rotate-180") })
+              ] })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl overflow-hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "sticky top-0 bg-white border-b border-gray-100 p-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react33.Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                "input",
+                {
+                  ref: searchRef,
+                  type: "text",
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  placeholder: "Search icons...",
+                  className: "w-full pl-8 pr-3 py-1.5 text-sm border border-gray-200 rounded-md bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("p", { className: "text-xs text-gray-400 mt-1 pl-0.5", children: [
+              filtered.length,
+              " of ",
+              iconList.length,
+              " icons"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+            "div",
+            {
+              ref: listRef,
+              onScroll: handleListScroll,
+              className: "overflow-y-auto max-h-60",
+              children: [
+                visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "px-4 py-6 text-center text-sm text-gray-500", children: [
+                  "No icons found for \u201C",
+                  search,
+                  "\u201D"
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "grid grid-cols-1 py-1", children: visible.map((name) => {
+                  const Icon = Lucide[name];
+                  const isSelected = name === value;
+                  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSelect(name),
+                      className: cn(
+                        "flex items-center gap-2.5 px-3 py-2 text-sm text-left w-full transition-colors",
+                        isSelected ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-gray-50"
+                      ),
+                      children: [
+                        Icon && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Icon, { className: "w-4 h-4 flex-shrink-0" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "truncate", children: name }),
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ml-auto text-blue-500", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Lucide.Check, { className: "w-3.5 h-3.5" }) })
+                      ]
+                    },
+                    name
+                  );
+                }) }),
+                visibleCount < filtered.length && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "py-2 text-center text-xs text-gray-400", children: "Scroll for more\u2026" })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("p", { className: "text-xs text-red-500 flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Lucide.AlertCircle, { className: "w-3.5 h-3.5" }),
+        error
+      ] })
+    ] });
+  }
+);
+IconSelect.displayName = "IconSelect";
+
+// src/components/ImageCrop/ImageCrop.tsx
+var import_react72 = require("react");
+var import_lucide_react34 = require("lucide-react");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+var ImageCrop = (0, import_react72.forwardRef)(
+  ({
+    src,
+    aspectRatio = null,
+    onCrop,
+    onCancel,
+    className,
+    outputWidth,
+    outputHeight,
+    showPreview = true
+  }, ref) => {
+    const canvasRef = (0, import_react72.useRef)(null);
+    const previewRef = (0, import_react72.useRef)(null);
+    const containerRef = (0, import_react72.useRef)(null);
+    const imgRef = (0, import_react72.useRef)(null);
+    const [cropBox, setCropBox] = (0, import_react72.useState)({ x: 0, y: 0, w: 0, h: 0 });
+    const [zoom, setZoom] = (0, import_react72.useState)(1);
+    const [imgOffset, setImgOffset] = (0, import_react72.useState)({ x: 0, y: 0 });
+    const [imgSize, setImgSize] = (0, import_react72.useState)({ w: 0, h: 0 });
+    const [loaded, setLoaded] = (0, import_react72.useState)(false);
+    const dragging = (0, import_react72.useRef)(null);
+    const dragStart = (0, import_react72.useRef)({ mx: 0, my: 0, bx: 0, by: 0, bw: 0, bh: 0, ox: 0, oy: 0 });
+    (0, import_react72.useEffect)(() => {
+      setLoaded(false);
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        imgRef.current = img;
+        setLoaded(true);
+      };
+      img.src = src;
+    }, [src]);
+    const draw = (0, import_react72.useCallback)(() => {
+      const canvas = canvasRef.current;
+      const img = imgRef.current;
+      if (!canvas || !img) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, imgOffset.x, imgOffset.y, imgSize.w, imgSize.h);
+      ctx.save();
+      ctx.fillStyle = "rgba(0,0,0,0.5)";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.globalCompositeOperation = "destination-out";
+      ctx.fillStyle = "rgba(0,0,0,1)";
+      ctx.fillRect(cropBox.x, cropBox.y, cropBox.w, cropBox.h);
+      ctx.restore();
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(cropBox.x, cropBox.y, cropBox.w, cropBox.h);
+      ctx.clip();
+      ctx.drawImage(img, imgOffset.x, imgOffset.y, imgSize.w, imgSize.h);
+      ctx.restore();
+      ctx.strokeStyle = "rgba(255,255,255,0.9)";
+      ctx.lineWidth = 1.5;
+      ctx.strokeRect(cropBox.x, cropBox.y, cropBox.w, cropBox.h);
+      ctx.strokeStyle = "rgba(255,255,255,0.25)";
+      ctx.lineWidth = 0.5;
+      for (let i = 1; i < 3; i++) {
+        const tx = cropBox.x + cropBox.w / 3 * i;
+        const ty = cropBox.y + cropBox.h / 3 * i;
+        ctx.beginPath();
+        ctx.moveTo(tx, cropBox.y);
+        ctx.lineTo(tx, cropBox.y + cropBox.h);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(cropBox.x, ty);
+        ctx.lineTo(cropBox.x + cropBox.w, ty);
+        ctx.stroke();
+      }
+      const hs = 8;
+      ctx.fillStyle = "white";
+      ctx.strokeStyle = "#3B82F6";
+      ctx.lineWidth = 1.5;
+      [
+        [cropBox.x, cropBox.y],
+        [cropBox.x + cropBox.w, cropBox.y],
+        [cropBox.x, cropBox.y + cropBox.h],
+        [cropBox.x + cropBox.w, cropBox.y + cropBox.h]
+      ].forEach(([hx, hy]) => {
+        ctx.fillRect(hx - hs / 2, hy - hs / 2, hs, hs);
+        ctx.strokeRect(hx - hs / 2, hy - hs / 2, hs, hs);
+      });
+      drawPreview();
+    }, [cropBox, imgOffset, imgSize]);
+    const drawPreview = (0, import_react72.useCallback)(() => {
+      const preview = previewRef.current;
+      const img = imgRef.current;
+      if (!preview || !img || !showPreview) return;
+      const ctx = preview.getContext("2d");
+      if (!ctx) return;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const scaleX = img.naturalWidth / imgSize.w;
+      const scaleY = img.naturalHeight / imgSize.h;
+      const srcX = (cropBox.x - imgOffset.x) * scaleX;
+      const srcY = (cropBox.y - imgOffset.y) * scaleY;
+      const srcW = cropBox.w * scaleX;
+      const srcH = cropBox.h * scaleY;
+      ctx.clearRect(0, 0, preview.width, preview.height);
+      if (srcW > 0 && srcH > 0) {
+        ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, preview.width, preview.height);
+      }
+    }, [cropBox, imgOffset, imgSize, showPreview]);
+    (0, import_react72.useEffect)(() => {
+      if (!loaded || !imgRef.current) return;
+      const img = imgRef.current;
+      const container = containerRef.current;
+      if (!container) return;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const cw = container.clientWidth;
+      const ch = Math.round(cw * 0.65);
+      canvas.width = cw;
+      canvas.height = ch;
+      const scale = Math.min(cw / img.naturalWidth, ch / img.naturalHeight) * zoom;
+      const iw = img.naturalWidth * scale;
+      const ih = img.naturalHeight * scale;
+      const ox = (cw - iw) / 2;
+      const oy = (ch - ih) / 2;
+      setImgSize({ w: iw, h: ih });
+      setImgOffset({ x: ox, y: oy });
+      const pad = 0.1;
+      let bw = iw * (1 - 2 * pad);
+      let bh = aspectRatio ? bw / aspectRatio : ih * (1 - 2 * pad);
+      if (aspectRatio && bh > ih * (1 - 2 * pad)) {
+        bh = ih * (1 - 2 * pad);
+        bw = bh * aspectRatio;
+      }
+      const bx = ox + (iw - bw) / 2;
+      const by = oy + (ih - bh) / 2;
+      setCropBox({ x: bx, y: by, w: bw, h: bh });
+    }, [loaded, zoom]);
+    (0, import_react72.useEffect)(() => {
+      draw();
+    }, [draw]);
+    const getHandle = (mx, my) => {
+      const hs = 12;
+      const { x, y, w, h } = cropBox;
+      if (Math.abs(mx - x) < hs && Math.abs(my - y) < hs) return "nw";
+      if (Math.abs(mx - (x + w)) < hs && Math.abs(my - y) < hs) return "ne";
+      if (Math.abs(mx - x) < hs && Math.abs(my - (y + h)) < hs) return "sw";
+      if (Math.abs(mx - (x + w)) < hs && Math.abs(my - (y + h)) < hs) return "se";
+      if (mx > x && mx < x + w && my > y && my < y + h) return "move";
+      return null;
+    };
+    const canvasCoords = (e) => {
+      const rect = canvasRef.current.getBoundingClientRect();
+      return { mx: e.clientX - rect.left, my: e.clientY - rect.top };
+    };
+    const onMouseDown = (e) => {
+      const { mx, my } = canvasCoords(e);
+      const h = getHandle(mx, my);
+      if (h) {
+        dragging.current = h;
+        dragStart.current = {
+          mx,
+          my,
+          bx: cropBox.x,
+          by: cropBox.y,
+          bw: cropBox.w,
+          bh: cropBox.h,
+          ox: imgOffset.x,
+          oy: imgOffset.y
+        };
+      }
+    };
+    const onMouseMove = (e) => {
+      if (!dragging.current) return;
+      const { mx, my } = canvasCoords(e);
+      const dx = mx - dragStart.current.mx;
+      const dy = my - dragStart.current.my;
+      const { bx, by, bw, bh, ox, oy } = dragStart.current;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const minSize = 20;
+      setCropBox((prev) => {
+        let { x, y, w, h } = { x: bx, y: by, w: bw, h: bh };
+        const applyAspect = (nw, nh) => {
+          if (!aspectRatio) return { nw, nh };
+          return { nw, nh: nw / aspectRatio };
+        };
+        if (dragging.current === "move") {
+          x = clamp(bx + dx, imgOffset.x, imgOffset.x + imgSize.w - w);
+          y = clamp(by + dy, imgOffset.y, imgOffset.y + imgSize.h - h);
+        } else if (dragging.current === "se") {
+          let nw = Math.max(minSize, bw + dx);
+          let nh = Math.max(minSize, bh + dy);
+          ({ nw, nh } = applyAspect(nw, nh));
+          w = Math.min(nw, imgOffset.x + imgSize.w - x);
+          h = Math.min(nh, imgOffset.y + imgSize.h - y);
+        } else if (dragging.current === "sw") {
+          let nw = Math.max(minSize, bw - dx);
+          let nh = Math.max(minSize, bh + dy);
+          ({ nw, nh } = applyAspect(nw, nh));
+          x = Math.max(imgOffset.x, bx + bw - nw);
+          w = bx + bw - x;
+          h = Math.min(nh, imgOffset.y + imgSize.h - y);
+        } else if (dragging.current === "ne") {
+          let nw = Math.max(minSize, bw + dx);
+          let nh = Math.max(minSize, bh - dy);
+          ({ nw, nh } = applyAspect(nw, nh));
+          y = Math.max(imgOffset.y, by + bh - nh);
+          w = Math.min(nw, imgOffset.x + imgSize.w - x);
+          h = by + bh - y;
+        } else if (dragging.current === "nw") {
+          let nw = Math.max(minSize, bw - dx);
+          let nh = Math.max(minSize, bh - dy);
+          ({ nw, nh } = applyAspect(nw, nh));
+          x = Math.max(imgOffset.x, bx + bw - nw);
+          y = Math.max(imgOffset.y, by + bh - nh);
+          w = bx + bw - x;
+          h = by + bh - y;
+        }
+        return { x, y, w: Math.max(minSize, w), h: Math.max(minSize, h) };
+      });
+    };
+    const onMouseUp = () => {
+      dragging.current = null;
+    };
+    const [cursor, setCursor] = (0, import_react72.useState)("default");
+    const onMouseMoveCursor = (e) => {
+      const { mx, my } = canvasCoords(e);
+      const h = getHandle(mx, my);
+      const map = {
+        nw: "nw-resize",
+        ne: "ne-resize",
+        sw: "sw-resize",
+        se: "se-resize",
+        move: "move",
+        img: "grab"
+      };
+      setCursor(h ? map[h] : "default");
+      onMouseMove(e);
+    };
+    const doCrop = (0, import_react72.useCallback)(() => {
+      const img = imgRef.current;
+      if (!img || !onCrop) return;
+      const scaleX = img.naturalWidth / imgSize.w;
+      const scaleY = img.naturalHeight / imgSize.h;
+      const srcX = (cropBox.x - imgOffset.x) * scaleX;
+      const srcY = (cropBox.y - imgOffset.y) * scaleY;
+      const srcW = cropBox.w * scaleX;
+      const srcH = cropBox.h * scaleY;
+      const out = document.createElement("canvas");
+      out.width = outputWidth ?? Math.round(srcW);
+      out.height = outputHeight ?? Math.round(srcH);
+      const ctx = out.getContext("2d");
+      ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, out.width, out.height);
+      out.toBlob((blob) => {
+        if (blob) {
+          const cropArea = {
+            x: srcX / img.naturalWidth,
+            y: srcY / img.naturalHeight,
+            width: srcW / img.naturalWidth,
+            height: srcH / img.naturalHeight
+          };
+          onCrop(blob, cropArea);
+        }
+      }, "image/png");
+    }, [cropBox, imgOffset, imgSize, outputWidth, outputHeight, onCrop]);
+    const doReset = (0, import_react72.useCallback)(() => {
+      setZoom(1);
+      setLoaded(false);
+      setTimeout(() => setLoaded(true), 10);
+    }, []);
+    (0, import_react72.useImperativeHandle)(ref, () => ({ crop: doCrop, reset: doReset }));
+    const handleZoom = (delta) => {
+      setZoom((z) => clamp(z + delta, 0.3, 3));
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: cn("flex flex-col gap-3 w-full", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ref: containerRef, className: "relative w-full rounded-xl overflow-hidden bg-gray-900 shadow-inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "w-full block",
+            style: { cursor },
+            onMouseDown,
+            onMouseMove: onMouseMoveCursor,
+            onMouseUp,
+            onMouseLeave: onMouseUp
+          }
+        ),
+        !loaded && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center gap-3 flex-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center gap-1.5 bg-gray-100 rounded-lg p-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleZoom(-0.1),
+              className: "w-7 h-7 flex items-center justify-center rounded-md hover:bg-white transition-colors text-gray-600",
+              title: "Zoom out",
+              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react34.ZoomOut, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "text-xs font-medium text-gray-600 w-10 text-center select-none", children: [
+            Math.round(zoom * 100),
+            "%"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleZoom(0.1),
+              className: "w-7 h-7 flex items-center justify-center rounded-md hover:bg-white transition-colors text-gray-600",
+              title: "Zoom in",
+              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react34.ZoomIn, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: doReset,
+            className: "flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 text-gray-600 transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react34.RotateCcw, { className: "w-3.5 h-3.5" }),
+              "Reset"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "flex-1" }),
+        onCancel && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            className: "flex items-center gap-1.5 px-4 py-1.5 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 text-gray-600 transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react34.X, { className: "w-4 h-4" }),
+              "Cancel"
+            ]
+          }
+        ),
+        onCrop && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: doCrop,
+            className: "flex items-center gap-1.5 px-4 py-1.5 text-sm rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors shadow-sm",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react34.Check, { className: "w-4 h-4" }),
+              "Crop"
+            ]
+          }
+        )
+      ] }),
+      showPreview && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-xs text-gray-500 font-medium mt-1", children: "Preview" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "rounded-lg overflow-hidden border border-gray-200 shadow-sm bg-gray-50", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          "canvas",
+          {
+            ref: previewRef,
+            width: 120,
+            height: aspectRatio ? Math.round(120 / aspectRatio) : 80,
+            className: "block"
+          }
+        ) })
+      ] })
+    ] });
+  }
+);
+ImageCrop.displayName = "ImageCrop";
+
 // src/validators/email.ts
 var validateEmail = (value) => {
   if (!value) return "Email is required";
@@ -5501,6 +6053,8 @@ var validateUrl = (value) => {
   GanttChart,
   Grid,
   Hero,
+  IconSelect,
+  ImageCrop,
   InfiniteScroll,
   Input,
   InputGroup,