geoiq-frontend-ui-kit/dist/index.es21.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 N } from "./index.es79.js";
import { X as w, ChevronDown as C, ChevronUp as k, Check as D } from "lucide-react";
import { Button as P } from "./index.es7.js";
import { Command as I, CommandInput as B, CommandList as R, CommandEmpty as S, CommandGroup as j, CommandItem as K } from "./index.es52.js";
import { Popover as M, PopoverTrigger as O, PopoverContent as T } from "./index.es80.js";
import { Badge as U } from "./index.es6.js";
import { Typography as m } from "./index.es17.js";
function X({
  options: c,
  selected: a,
  onChange: s,
  className: g,
  popoverContentProps: h,
  listEmptyComponent: i,
  placeholder: y,
  searchPlaceholder: E = "Search",
  onSearchChange: u,
  onChangePopoverOpen: f,
  container: v,
  ...b
}) {
  const [o, l] = e.useState(!1), p = e.useRef(null), d = (t) => {
    s(a.filter((n) => n !== t));
  }, x = (t) => {
    l(t), f && f(t);
  };
  return /* @__PURE__ */ e.createElement(M, { open: o, onOpenChange: x, ...b }, /* @__PURE__ */ e.createElement(
    O,
    {
      className: `min-h-[40px] h-fit px-3 py-2
        ${o ? "border-primary-2 ring-4 ring-primary-1" : "border-neutral-2"}
        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`,
      ref: p,
      asChild: !0
    },
    /* @__PURE__ */ e.createElement(
      P,
      {
        variant: "secondary",
        role: "combobox",
        "aria-expanded": o,
        className: "w-full justify-between focus:ring-0 ",
        onClick: () => l(!o)
      },
      /* @__PURE__ */ e.createElement("div", { className: "flex flex-wrap gap-1" }, a.length > 0 ? a.map((t) => {
        const n = c.find(
          (r) => r.value === t
        );
        return /* @__PURE__ */ e.createElement(
          U,
          {
            variant: "default",
            key: t,
            size: "sm",
            showBorder: !0
          },
          /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1 max-w-[180px] " }, n?.icon, /* @__PURE__ */ e.createElement("span", { className: "truncate" }, 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: (r) => {
                r.key === "Enter" && d(t);
              },
              onMouseDown: (r) => {
                r.preventDefault(), r.stopPropagation();
              },
              onClick: (r) => {
                r.stopPropagation(), d(t);
              }
            },
            /* @__PURE__ */ e.createElement(w, { className: "w-3 h-3 text-muted-foreground hover:text-foreground" })
          )
        );
      }) : /* @__PURE__ */ e.createElement(m, { variant: "body2", className: "text-light-4" }, y ?? "Select options")),
      o ? /* @__PURE__ */ e.createElement(k, { className: "w-4 h-4 opacity-50 shrink-0" }) : /* @__PURE__ */ e.createElement(C, { className: "w-4 h-4 opacity-50 shrink-0" })
    )
  ), /* @__PURE__ */ e.createElement(
    T,
    {
      style: {
        width: p.current?.clientWidth
      },
      className: "w-full p-0 mt-1 bg-light-1",
      onEscapeKeyDown: () => l(!1),
      container: v,
      ...h
    },
    /* @__PURE__ */ e.createElement(
      I,
      {
        className: g,
        shouldFilter: !u
      },
      /* @__PURE__ */ e.createElement(
        B,
        {
          placeholder: E,
          showIcon: !0,
          onValueChange: u
        }
      ),
      /* @__PURE__ */ e.createElement(R, { className: "" }, /* @__PURE__ */ e.createElement(S, null, i || /* @__PURE__ */ e.createElement(m, { variant: "body3", className: "text-light-4" }, "No items found")), /* @__PURE__ */ e.createElement(j, { className: "px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar" }, c.map((t) => /* @__PURE__ */ e.createElement(
        K,
        {
          key: t.value,
          className: `mx-1.5 my-1 justify-between rounded-md bg-light-1 p-2 text-light-2 ${a.indexOf(t.value) !== -1 ? "bg-light-2" : ""}`,
          onSelect: () => {
            s(
              a.includes(t.value) ? a.filter((n) => n !== t.value) : [...a, t.value]
            ), l(!0);
          }
        },
        /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, t.icon, /* @__PURE__ */ e.createElement(m, { variant: "body2" }, t.label)),
        /* @__PURE__ */ e.createElement(
          D,
          {
            className: N(
              "h-5 w-5 stroke-brand",
              a.includes(t.value) ? "opacity-100" : "opacity-0"
            )
          }
        )
      ))))
    )
  ));
}
export {
  X as MultiCombobox
};
//# sourceMappingURL=index.es21.js.map