geoiq-frontend-ui-kit/dist/index.es34.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 { ChevronDown as E, ChevronUp as f, Check as v } from "lucide-react";
import { Button as b } from "./index.es7.js";
import { Command as d, CommandInput as y, CommandList as C, CommandEmpty as x, CommandGroup as N, CommandItem as w } from "./index.es52.js";
import { Popover as k, PopoverTrigger as S, PopoverContent as I } from "./index.es80.js";
import { Typography as l } from "./index.es17.js";
function B({
  options: n,
  selected: a,
  onChange: o,
  className: c,
  isSearchable: s = !1,
  icon: i,
  container: p,
  ...h
}) {
  const [r, m] = e.useState(!1);
  return /* @__PURE__ */ e.createElement(k, { open: r, onOpenChange: m, ...h }, /* @__PURE__ */ e.createElement(
    S,
    {
      className: `min-h-[42px] h-fit bg-rest-s1 flex gap-1 hover:bg-hover-t1 
        ${r || a.length > 0 ? "border-primary-1 border-click-p1 bg-click-t1" : "border-0 bg-rest-s1"}
        ${a.length === 0 && "px-3"}
       `,
      asChild: !0
    },
    /* @__PURE__ */ e.createElement(
      b,
      {
        variant: "secondary",
        role: "combobox",
        "aria-expanded": r,
        onClick: () => m(!r)
      },
      a.length > 0 && /* @__PURE__ */ e.createElement("span", { className: "w-4" }, " ", a.length),
      i,
      /* @__PURE__ */ e.createElement(e.Fragment, null, r ? /* @__PURE__ */ e.createElement(f, { className: "w-4 h-4 opacity-50 shrink-0" }) : /* @__PURE__ */ e.createElement(E, { className: "w-4 h-4 opacity-50 shrink-0" }))
    )
  ), /* @__PURE__ */ e.createElement(
    I,
    {
      className: "w-full p-0 bg-light-1",
      onEscapeKeyDown: () => m(!1),
      container: p
    },
    /* @__PURE__ */ e.createElement(d, { className: c }, s && /* @__PURE__ */ e.createElement(y, { showIcon: !0, placeholder: "Search ..." }), /* @__PURE__ */ e.createElement(C, { className: "" }, /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(l, { variant: "body3" }, "No items found")), /* @__PURE__ */ e.createElement(N, { className: "px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar" }, n.map((t) => /* @__PURE__ */ e.createElement("div", { key: t.value, className: "py-0.5 px-1.5 bg-light-1 " }, /* @__PURE__ */ e.createElement(
      w,
      {
        key: t.value,
        className: `justify-between p-2 rounded-md text-light-2 ${a.indexOf(t.value) !== -1 ? "bg-light-2" : ""}`,
        onSelect: () => {
          o(
            a.includes(t.value) ? a.filter((u) => u !== t.value) : [...a, t.value]
          ), m(!0);
        }
      },
      /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, t.icon, /* @__PURE__ */ e.createElement(l, { variant: "body2" }, t.label)),
      /* @__PURE__ */ e.createElement(
        v,
        {
          className: g(
            "h-5 w-5 stroke-brand",
            a.includes(t.value) ? "opacity-100" : "opacity-0"
          )
        }
      )
    ))))))
  ));
}
export {
  B as ToggleMultiSelect
};
//# sourceMappingURL=index.es34.js.map