geoiq-frontend-ui-kit/dist/index147.es.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import { ImagePlus as s, Undo2 as i, Redo2 as d, RefreshCcw as b, RotateCcw as p, RotateCw as h, FlipHorizontal2 as E, FlipVertical2 as u, MousePointer2 as w, Crop as f, Type as N, Pen as x, Shapes as v, Sticker as C, ZoomOut as g, ZoomIn as k } from "lucide-react";
import e from "react";
import { Button as R } from "./index9.es.js";
import { cn as y } from "./index88.es.js";
function c({
  icon: a,
  label: t,
  active: r,
  disabled: o,
  onClick: l
}) {
  return /* @__PURE__ */ e.createElement(
    R,
    {
      variant: "secondary",
      size: "sm",
      disabled: o,
      onClick: l,
      className: y(
        "w-auto flex-col gap-0.5 h-auto min-w-[52px] border-neutral-1 px-2 py-1.5 text-[10.5px]",
        r && "border-rest-p1 bg-rest-p1 text-white hover:bg-hover-p1"
      )
    },
    a,
    t
  );
}
function Z({
  zoomPercent: a,
  canZoomIn: t,
  canZoomOut: r,
  disabled: o,
  onZoomIn: l,
  onZoomOut: n,
  onZoomReset: m
}) {
  return /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-0.5 rounded-lg border border-neutral-1 bg-white p-0.5" }, /* @__PURE__ */ e.createElement(
    "button",
    {
      type: "button",
      title: "Zoom out",
      disabled: o || !r,
      onClick: n,
      className: "flex h-7 w-7 items-center justify-center rounded-md text-light-2 hover:bg-light-2 disabled:pointer-events-none disabled:opacity-40"
    },
    /* @__PURE__ */ e.createElement(g, { className: "h-4 w-4" })
  ), /* @__PURE__ */ e.createElement(
    "button",
    {
      type: "button",
      title: "Reset zoom to fit",
      disabled: o,
      onClick: m,
      className: "min-w-[38px] rounded-md py-1 text-[11px] font-medium text-light-2 hover:bg-light-2 disabled:pointer-events-none disabled:opacity-40"
    },
    a,
    "%"
  ), /* @__PURE__ */ e.createElement(
    "button",
    {
      type: "button",
      title: "Zoom in",
      disabled: o || !t,
      onClick: l,
      className: "flex h-7 w-7 items-center justify-center rounded-md text-light-2 hover:bg-light-2 disabled:pointer-events-none disabled:opacity-40"
    },
    /* @__PURE__ */ e.createElement(k, { className: "h-4 w-4" })
  ));
}
const O = [
  {
    mode: "select",
    label: "Select",
    icon: /* @__PURE__ */ e.createElement(w, { className: "h-4 w-4" })
  },
  { mode: "crop", label: "Crop", icon: /* @__PURE__ */ e.createElement(f, { className: "h-4 w-4" }) },
  { mode: "text", label: "Text", icon: /* @__PURE__ */ e.createElement(N, { className: "h-4 w-4" }) },
  { mode: "draw", label: "Draw", icon: /* @__PURE__ */ e.createElement(x, { className: "h-4 w-4" }) },
  { mode: "shape", label: "Shape", icon: /* @__PURE__ */ e.createElement(v, { className: "h-4 w-4" }) },
  { mode: "sticker", label: "Sticker", icon: /* @__PURE__ */ e.createElement(C, { className: "h-4 w-4" }) }
];
function F({ ui: a, engine: t, onOpenFile: r }) {
  const o = !a.hasImage;
  return /* @__PURE__ */ e.createElement("div", { className: "flex items-stretch gap-2 overflow-x-auto overscroll-x-contain border-b border-neutral-1 bg-light-3 p-2" }, a.canOpenImage && /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1.5 border-r border-neutral-1 pr-2" }, /* @__PURE__ */ e.createElement(
    c,
    {
      icon: /* @__PURE__ */ e.createElement(s, { className: "h-4 w-4" }),
      label: "Open",
      onClick: r
    }
  )), /* @__PURE__ */ e.createElement("div", { className: "mr-auto flex items-center gap-1.5" }, O.map((l) => /* @__PURE__ */ e.createElement(
    c,
    {
      key: l.mode,
      icon: l.icon,
      label: l.label,
      disabled: o,
      active: a.mode === l.mode,
      onClick: () => t.setMode(l.mode)
    }
  ))), /* @__PURE__ */ e.createElement("div", { className: "ml-auto flex items-center" }, /* @__PURE__ */ e.createElement(
    Z,
    {
      zoomPercent: a.zoomPercent,
      canZoomIn: a.canZoomIn,
      canZoomOut: a.canZoomOut,
      disabled: o,
      onZoomIn: t.zoomIn,
      onZoomOut: t.zoomOut,
      onZoomReset: t.zoomToFit
    }
  )), /* @__PURE__ */ e.createElement("div", { className: "ml-auto flex items-center gap-1.5 border-l border-neutral-1 pl-2" }, /* @__PURE__ */ e.createElement(
    c,
    {
      icon: /* @__PURE__ */ e.createElement(i, { className: "h-4 w-4" }),
      label: "Undo",
      disabled: !a.canUndo,
      onClick: t.undo
    }
  ), /* @__PURE__ */ e.createElement(
    c,
    {
      icon: /* @__PURE__ */ e.createElement(d, { className: "h-4 w-4" }),
      label: "Redo",
      disabled: !a.canRedo,
      onClick: t.redo
    }
  ), /* @__PURE__ */ e.createElement(
    c,
    {
      icon: /* @__PURE__ */ e.createElement(b, { className: "h-4 w-4" }),
      label: "Reset",
      disabled: !a.canReset,
      onClick: t.resetToOriginal
    }
  )), /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1.5 border-l border-neutral-1 pl-2" }, /* @__PURE__ */ e.createElement(
    c,
    {
      icon: /* @__PURE__ */ e.createElement(p, { className: "h-4 w-4" }),
      label: "Rotate L",
      disabled: o,
      onClick: () => t.rotate(-90)
    }
  ), /* @__PURE__ */ e.createElement(
    c,
    {
      icon: /* @__PURE__ */ e.createElement(h, { className: "h-4 w-4" }),
      label: "Rotate R",
      disabled: o,
      onClick: () => t.rotate(90)
    }
  ), /* @__PURE__ */ e.createElement(
    c,
    {
      icon: /* @__PURE__ */ e.createElement(E, { className: "h-4 w-4" }),
      label: "Flip H",
      disabled: o,
      onClick: () => t.flip(!0)
    }
  ), /* @__PURE__ */ e.createElement(
    c,
    {
      icon: /* @__PURE__ */ e.createElement(u, { className: "h-4 w-4" }),
      label: "Flip V",
      disabled: o,
      onClick: () => t.flip(!1)
    }
  )));
}
export {
  F as Ribbon
};
//# sourceMappingURL=index147.es.js.map