geoiq-frontend-ui-kit/dist/index.es22.js

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

import * as e from "react";
import { cn as g } from "./index.es79.js";
import { X as y, ChevronDown as v, ChevronUp as h, Check as E } from "lucide-react";
import { Button as b } from "./index.es7.js";
import { Command as w, CommandList as x, CommandEmpty as N, CommandGroup as C, CommandItem as k } from "./index.es52.js";
import { Popover as D, PopoverTrigger as P, PopoverContent as S } from "./index.es80.js";
import { Badge as B } from "./index.es6.js";
import { Typography as c } from "./index.es17.js";
function U({
  options: s,
  selected: r,
  onChange: i,
  className: f,
  container: p,
  ...d
}) {
  const [l, o] = e.useState(!1), u = e.useRef(null), m = (t) => {
    i(r.filter((n) => n !== t));
  };
  return /* @__PURE__ */ e.createElement(D, { open: l, onOpenChange: o, ...d }, /* @__PURE__ */ e.createElement(
    P,
    {
      className: `min-h-[40px] h-fit px-3 py-2
        ${l ? "border-primary-2 ring-4 ring-primary-1" : "border-neutral-2"}
        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`,
      ref: u,
      asChild: !0
    },
    /* @__PURE__ */ e.createElement(
      b,
      {
        variant: "secondary",
        role: "combobox",
        "aria-expanded": l,
        className: "w-full justify-between focus:ring-0 ",
        onClick: () => o(!l)
      },
      /* @__PURE__ */ e.createElement("div", { className: "flex flex-wrap gap-1" }, r.length > 0 ? r.map((t) => {
        const n = s.find(
          (a) => a.value === t
        );
        return /* @__PURE__ */ e.createElement(
          B,
          {
            variant: "default",
            key: t,
            size: "sm",
            showBorder: !0,
            onClick: () => m(t)
          },
          /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, n?.icon, n?.label),
          /* @__PURE__ */ e.createElement(
            "button",
            {
              className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
              onKeyDown: (a) => {
                a.key === "Enter" && m(t);
              },
              onMouseDown: (a) => {
                a.preventDefault(), a.stopPropagation();
              },
              onClick: (a) => {
                a.stopPropagation(), m(t);
              }
            },
            /* @__PURE__ */ e.createElement(y, { className: "w-3 h-3 text-muted-foreground hover:text-foreground" })
          )
        );
      }) : /* @__PURE__ */ e.createElement(c, { variant: "body2", className: "text-light-4" }, "Select option")),
      l ? /* @__PURE__ */ e.createElement(h, { className: "w-4 h-4 opacity-50 shrink-0" }) : /* @__PURE__ */ e.createElement(v, { className: "w-4 h-4 opacity-50 shrink-0" })
    )
  ), /* @__PURE__ */ e.createElement(
    S,
    {
      style: {
        width: u.current?.clientWidth
      },
      className: "w-full p-0 bg-light-1",
      onEscapeKeyDown: () => o(!1),
      container: p
    },
    /* @__PURE__ */ e.createElement(w, { className: f }, /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement(c, { variant: "body3" }, "No items found")), /* @__PURE__ */ e.createElement(C, { className: "px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar" }, s.map((t) => /* @__PURE__ */ e.createElement("div", { className: "py-0.5 px-1.5 bg-white", key: t.value }, /* @__PURE__ */ e.createElement(
      k,
      {
        key: t.value,
        className: `justify-between p-2 rounded-md text-light-2 ${r.indexOf(t.value) !== -1 ? "bg-light-2" : ""}`,
        onSelect: () => {
          i(
            r.includes(t.value) ? r.filter((n) => n !== t.value) : [...r, t.value]
          ), o(!0);
        }
      },
      /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, t.icon, /* @__PURE__ */ e.createElement(c, { variant: "body2" }, t.label)),
      /* @__PURE__ */ e.createElement(
        E,
        {
          className: g(
            "h-5 w-5 stroke-brand",
            r.includes(t.value) ? "opacity-100" : "opacity-0"
          )
        }
      )
    ))))))
  ));
}
export {
  U as MultiSelect
};
//# sourceMappingURL=index.es22.js.map