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

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

import e from "react";
import { Slider as s } from "./index30.es.js";
import { SingleSelect as r } from "./index29.es.js";
import { SwatchGrid as c } from "./index38.es.js";
import { FONTS as n, SHAPES as h } from "./index150.es.js";
import { ShapeIcons as i } from "./index179.es.js";
import { ColorPicker as o } from "./index180.es.js";
import { useImageEditorPortalContainer as p } from "./index145.es.js";
const x = [
  { label: "Outline only", value: "stroke" },
  { label: "Solid fill", value: "fill" }
], d = [
  { label: "Marker", value: "round" },
  { label: "Highlighter", value: "highlight" }
];
function f({ ui: t, engine: l }) {
  const m = p();
  return /* @__PURE__ */ e.createElement("div", null, t.mode === "text" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Font"), /* @__PURE__ */ e.createElement(
    r,
    {
      items: n,
      value: t.textFont,
      onValueChange: l.setTextFont,
      container: m
    }
  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Size"), /* @__PURE__ */ e.createElement(
    s,
    {
      min: 16,
      max: 200,
      step: 1,
      value: [t.textSize],
      onValueChange: ([a]) => l.setTextSize(a)
    }
  )), t.mode === "shape" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Shape"), /* @__PURE__ */ e.createElement(
    c,
    {
      columns: 3,
      value: t.selectedShapeType,
      onSelect: l.selectShapeType,
      items: h.map((a) => ({
        value: a.id,
        label: a.name,
        icon: i[a.id]
      }))
    }
  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Fill style"), /* @__PURE__ */ e.createElement(
    r,
    {
      items: x,
      value: t.shapeFill,
      onValueChange: (a) => l.setShapeFill(a),
      container: m
    }
  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Thickness"), /* @__PURE__ */ e.createElement(
    s,
    {
      min: 1,
      max: 40,
      step: 1,
      value: [t.shapeWidth],
      onValueChange: ([a]) => l.setShapeWidth(a)
    }
  )), t.mode === "draw" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Brush size"), /* @__PURE__ */ e.createElement(
    s,
    {
      min: 1,
      max: 60,
      step: 1,
      value: [t.brushSize],
      onValueChange: ([a]) => l.setBrushSize(a)
    }
  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Brush style"), /* @__PURE__ */ e.createElement(
    r,
    {
      items: d,
      value: t.brushStyle,
      onValueChange: (a) => l.setBrushStyle(a),
      container: m
    }
  )), t.mode === "sticker" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement(
    c,
    {
      columns: 3,
      onSelect: l.addSticker,
      emptyMessage: /* @__PURE__ */ e.createElement(e.Fragment, null, "No stickers configured — pass a ", /* @__PURE__ */ e.createElement("code", null, "stickers"), " prop with image URLs."),
      items: t.stickers.map((a) => ({ value: a, thumbnail: a }))
    }
  )), t.mode === "text" && /* @__PURE__ */ e.createElement(o, { value: t.textColor, onChange: l.setTextColor }), t.mode === "shape" && /* @__PURE__ */ e.createElement(o, { value: t.shapeColor, onChange: l.setShapeColor }), t.mode === "draw" && /* @__PURE__ */ e.createElement(o, { value: t.drawColor, onChange: l.setDrawColor }));
}
export {
  f as PanelInsert
};
//# sourceMappingURL=index170.es.js.map