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

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

import { Typography as o } from "./index.es19.js";
import { Dropdown as W } from "./index.es22.js";
import { cn as l } from "./index.es85.js";
import e, { useState as z } from "react";
import { AvatarDemo as B } from "./index.es6.js";
import { CreditSheet as I } from "./index.es103.js";
import { CreditsIndicator as T } from "./index.es52.js";
import { ChevronLeft as _ } from "lucide-react";
import F from "./index.es18.js";
import { Badge as $ } from "./index.es8.js";
const L = ({ name: t = "", email: r = "" }) => {
  if (!(t || r)) return null;
  const n = "text-ellipsis overflow-hidden";
  return /* @__PURE__ */ e.createElement("div", { className: "flex flex-col px-2" }, t && /* @__PURE__ */ e.createElement(
    o,
    {
      variant: "body4",
      className: l("text-light-1", n)
    },
    t
  ), r && /* @__PURE__ */ e.createElement(
    o,
    {
      variant: "body5",
      className: l("text-light-3", n)
    },
    r
  ));
}, p = ({
  alt: t,
  className: r,
  isActive: n = !1,
  isNew: i = !1,
  src: s,
  label: E,
  tooltipText: d = "",
  collapsed: f = !1,
  wrapper: b = null,
  onClick: h,
  disabled: c = !1
}) => {
  const x = (m) => b?.(m) ?? m, a = (m) => {
    if (c) {
      m.preventDefault(), m.stopPropagation();
      return;
    }
    h?.();
  }, u = /* @__PURE__ */ e.createElement(
    "div",
    {
      className: l(
        "flex items-center gap-3 px-3 py-2 rounded-md hover:bg-hover-s3 cursor-pointer relative transition-colors",
        n && "bg-primary-3/15 overflow-hidden before:content-[''] before:absolute before:left-0 before:inset-y-0 before:w-[3px] before:bg-gradient-to-b before:from-[#F19089] before:via-[#B16DBA] before:to-[#6D48EF]",
        f && "justify-center px-2 mx-2",
        c && "opacity-50 cursor-not-allowed pointer-events-auto",
        r
      ),
      onClick: a,
      "aria-disabled": c,
      tabIndex: c ? -1 : 0
    },
    /* @__PURE__ */ e.createElement("div", { className: "relative flex items-center justify-center flex-shrink-0 w-5 h-5" }, /* @__PURE__ */ e.createElement("img", { src: s, alt: t, className: "w-5 h-5" }), /* @__PURE__ */ e.createElement(U, { isNew: i })),
    !f && /* @__PURE__ */ e.createElement(o, { variant: "body4", className: "flex-1 truncate text-dark-1" }, E)
  );
  return x(
    f && d ? (
      // REMOVE the <div className="relative"> wrapper
      /* @__PURE__ */ e.createElement(
        F,
        {
          content: "",
          headerText: /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2" }, i && /* @__PURE__ */ e.createElement($, { variant: "gradient", size: "sm" }, "NEW"), /* @__PURE__ */ e.createElement("div", null, d)),
          sideOffset: 12,
          triggerElement: u,
          delayDuration: 100,
          side: "right"
        }
      )
    ) : u
  );
}, y = () => /* @__PURE__ */ e.createElement("div", { className: "my-2 h-[1px] w-full bg-white opacity-20" }), U = ({ isNew: t }) => t ? /* @__PURE__ */ e.createElement("div", { className: "absolute w-[6px] h-[6px] rounded-full bottom-0 right-0 bg-secondary-2" }) : null, q = ({
  src: t,
  popoverOptions: r,
  name: n = "",
  email: i = "",
  collapsed: s = !1
}) => /* @__PURE__ */ e.createElement(
  W,
  {
    dropdownContentProps: {
      sideOffset: 8,
      side: "right",
      align: "end",
      style: { width: "200px" }
    },
    trigger: /* @__PURE__ */ e.createElement(
      "button",
      {
        className: l(
          "flex w-full items-center gap-3 p-3 hover:bg-hover-s3 transition-colors rounded-md cursor-pointer",
          s && "justify-center p-2"
        )
      },
      /* @__PURE__ */ e.createElement(
        B,
        {
          imageSrc: t ?? "",
          size: "md",
          alt: "avatar",
          fallback: /* @__PURE__ */ e.createElement(
            "img",
            {
              src: "https://frontend-static-files.geoiq.io/strapi/Avatar_e5ab891e67.svg",
              alt: "avatar",
              className: "w-10 h-10"
            }
          )
        }
      ),
      !s && /* @__PURE__ */ e.createElement("div", { className: "flex-1 text-left" }, /* @__PURE__ */ e.createElement(
        o,
        {
          variant: "body4",
          className: "text-dark-1 mb-0.5 truncate",
          style: { maxWidth: "140px" }
        },
        n
      ), /* @__PURE__ */ e.createElement(
        o,
        {
          variant: "body6",
          className: "truncate text-dark-1",
          style: { maxWidth: "140px" }
        },
        i
      ))
    ),
    header: /* @__PURE__ */ e.createElement(L, { name: n, email: i }),
    optionGroups: r
  }
), G = ({
  src: t,
  alt: r,
  text: n,
  collapsed: i
}) => /* @__PURE__ */ e.createElement("div", { className: l("flex items-center gap-3", i && "justify-center") }, /* @__PURE__ */ e.createElement("div", { className: "flex-shrink-0" }, /* @__PURE__ */ e.createElement("img", { src: t, alt: r, className: "w-10 h-10" })), !i && /* @__PURE__ */ e.createElement(o, { variant: "h3", className: "text-dark-1" }, n)), H = ({ credits: t, totalCredits: r, collapsed: n, onTopUp: i, topUpWrapper: s }) => t < 0 ? null : /* @__PURE__ */ e.createElement("div", { className: l("pb-4", n ? "flex justify-center" : "px-3") }, /* @__PURE__ */ e.createElement(
  T,
  {
    remaining: t,
    total: r ?? t,
    collapsed: n,
    onTopUp: i,
    topUpWrapper: s,
    size: "md",
    className: n ? "" : "w-full"
  }
)), P = ({
  title: t,
  collapsed: r
}) => /* @__PURE__ */ e.createElement(
  o,
  {
    variant: "body6",
    className: l(
      "mb-2 text-white/50 truncate",
      r ? "text-[10px] text-center px-1" : "px-2"
    )
  },
  t
), te = ({
  icons: t,
  credits: r = -1,
  totalCredits: n = null,
  profile: i,
  logo: s,
  className: E = "",
  id: d,
  clickDisable: f = !1,
  onRequestCredits: b,
  onProceedToPayment: h,
  buyCreditsOptions: c,
  minimumCreditsToBuy: x,
  collapsed: a = !1,
  onCollapsedChange: u,
  width: m = "218px",
  collapsedWidth: w = "72px",
  showToggle: k = !0,
  togglePosition: v = { top: "24px", right: "-14px" },
  sections: C = [
    { title: "Analyse", items: [] },
    { title: "Expand", items: [] }
  ]
}) => {
  const [j, S] = z(!1), A = {
    top: v.top,
    right: v.right,
    left: v.left,
    bottom: v.bottom
  };
  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
    "div",
    {
      className: l(
        "bg-dark-2 h-full flex flex-col transition-all duration-300 ease-in-out relative",
        E
      ),
      style: {
        width: a ? w : m
      },
      id: d
    },
    k && /* @__PURE__ */ e.createElement("div", { className: "absolute z-10", style: A }, /* @__PURE__ */ e.createElement(
      "button",
      {
        type: "button",
        onClick: () => u?.(!a),
        "aria-label": a ? "Expand sidebar" : "Collapse sidebar",
        className: l(
          "flex items-center justify-center w-7 h-7 rounded-full",
          "bg-dark-2 border border-white/60 shadow-md",
          "text-white/60 hover:text-white hover:bg-[rgb(45,45,45)]",
          "transition-colors"
        )
      },
      /* @__PURE__ */ e.createElement(
        _,
        {
          className: l(
            "w-3.5 h-3.5 transition-transform duration-300",
            a && "rotate-180"
          )
        }
      )
    )),
    /* @__PURE__ */ e.createElement("div", { className: "px-3 py-4" }, /* @__PURE__ */ e.createElement(G, { ...s, collapsed: a })),
    /* @__PURE__ */ e.createElement(
      H,
      {
        credits: r,
        totalCredits: n,
        collapsed: a,
        onTopUp: t.invoices?.onClick,
        topUpWrapper: t.invoices?.wrapper ?? void 0
      }
    ),
    /* @__PURE__ */ e.createElement("div", { className: "flex-1 px-2 overflow-y-auto" }, C.map((g, N) => /* @__PURE__ */ e.createElement(
      "div",
      {
        key: N,
        className: l(
          "mb-4",
          N > 0 && "mt-6"
          // Add extra top margin to sections after the first one
        )
      },
      /* @__PURE__ */ e.createElement(P, { title: g.title, collapsed: a }),
      /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-1" }, g.items.map((D, O) => /* @__PURE__ */ e.createElement(
        p,
        {
          key: O,
          ...D,
          collapsed: a
        }
      )))
    )), /* @__PURE__ */ e.createElement("div", { className: "pt-4 mt-4" }, /* @__PURE__ */ e.createElement(y, null), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-2" }, t.invoices && /* @__PURE__ */ e.createElement(p, { ...t.invoices, collapsed: a }), t.notification && /* @__PURE__ */ e.createElement(
      p,
      {
        ...t.notification,
        collapsed: a
      }
    ), t.chat && /* @__PURE__ */ e.createElement(p, { ...t.chat, collapsed: a })))),
    /* @__PURE__ */ e.createElement("div", { className: "pb-2" }, /* @__PURE__ */ e.createElement(
      "div",
      {
        className: l(
          "flex items-center gap-2 cursor-pointer rounded-md transition-colors",
          a ? "justify-center p-2" : "p-2 py-2.5"
        )
      }
    ), /* @__PURE__ */ e.createElement(
      "div",
      {
        className: l(
          "flex items-center gap-2 cursor-pointer rounded-md transition-colors",
          a ? "justify-center p-2" : "p-2 py-2.5"
        )
      },
      /* @__PURE__ */ e.createElement(p, { ...t.help, collapsed: a })
    ), /* @__PURE__ */ e.createElement("div", { className: "px-2" }, /* @__PURE__ */ e.createElement(y, null)), /* @__PURE__ */ e.createElement(q, { ...i, collapsed: a }))
  ), !f && /* @__PURE__ */ e.createElement(
    I,
    {
      open: j,
      onClose: () => S(!1),
      credit_details: n ? `Available: ${r}/${n}` : `Available: ${r}`,
      onRequestCredits: b,
      onProceedToPayment: h,
      containerId: "navbar-container",
      buyCreditsOptions: c,
      minimumCreditsToBuy: x,
      className: l(
        "bg-light-1 pb-12 inset-y-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        a ? "left-[66px]" : "left-[218px]"
      ),
      dialogClassName: "h-[150px] w-[150px] ml-4"
    }
  ));
};
export {
  te as NavbarExtended
};
//# sourceMappingURL=index.es45.js.map