geoiq-frontend-ui-kit/dist/index.es121.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 R from "embla-carousel-react";
import { ArrowLeft as z, ArrowRight as I } from "lucide-react";
import { cn as m } from "./index.es79.js";
import { Button as x } from "./index.es7.js";
const b = e.createContext(null);
function d() {
  const r = e.useContext(b);
  if (!r)
    throw new Error("useCarousel must be used within a <Carousel />");
  return r;
}
const L = e.forwardRef(
  ({
    orientation: r = "horizontal",
    opts: o,
    setApi: a,
    plugins: s,
    className: n,
    children: u,
    autoplay: c = !1,
    // Default value for autoplay
    autoplayInterval: i = 3e3,
    // Default value for autoplay interval
    ...w
  }, E) => {
    const [g, t] = R(
      {
        ...o,
        axis: r === "horizontal" ? "x" : "y"
      },
      s
    ), [p, y] = e.useState(!1), [S, k] = e.useState(!1), f = e.useCallback((l) => {
      l && (y(l.canScrollPrev()), k(l.canScrollNext()));
    }, []), C = e.useCallback(() => {
      t?.scrollPrev();
    }, [t]), h = e.useCallback(() => {
      t?.scrollNext();
    }, [t]), P = e.useCallback(
      (l) => {
        l.key === "ArrowLeft" ? (l.preventDefault(), C()) : l.key === "ArrowRight" && (l.preventDefault(), h());
      },
      [C, h]
    );
    return e.useEffect(() => {
      !t || !a || a(t);
    }, [t, a]), e.useEffect(() => {
      if (t)
        return f(t), t.on("reInit", f), t.on("select", f), () => {
          t?.off("select", f);
        };
    }, [t, f]), e.useEffect(() => {
      if (!c || !t)
        return;
      let l;
      const v = () => {
        l = setInterval(() => {
          t.scrollNext(), t.selectedScrollSnap() === t.scrollSnapList().length && t.scrollTo(0);
        }, i);
      }, N = () => {
        document.hidden ? clearInterval(l) : v();
      };
      return document.addEventListener("visibilitychange", N), document.hidden || v(), () => {
        clearInterval(l), document.removeEventListener("visibilitychange", N);
      };
    }, [c, t, i]), /* @__PURE__ */ e.createElement(
      b.Provider,
      {
        value: {
          carouselRef: g,
          api: t,
          opts: o,
          orientation: r || (o?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev: C,
          scrollNext: h,
          canScrollPrev: p,
          canScrollNext: S,
          autoplay: c,
          // Pass autoplay to the context
          autoplayInterval: i
          // Pass autoplayInterval to the context
        }
      },
      /* @__PURE__ */ e.createElement(
        "div",
        {
          ref: E,
          onKeyDownCapture: P,
          className: m("relative", n),
          role: "region",
          "aria-roledescription": "carousel",
          ...w
        },
        u
      )
    );
  }
);
L.displayName = "Carousel";
const D = e.forwardRef(({ className: r, ...o }, a) => {
  const { carouselRef: s, orientation: n } = d();
  return /* @__PURE__ */ e.createElement("div", { ref: s, className: "overflow-hidden" }, /* @__PURE__ */ e.createElement(
    "div",
    {
      ref: a,
      className: m(
        "flex",
        n === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
        r
      ),
      ...o
    }
  ));
});
D.displayName = "CarouselContent";
const A = e.forwardRef(({ className: r, ...o }, a) => {
  const { orientation: s } = d();
  return /* @__PURE__ */ e.createElement(
    "div",
    {
      ref: a,
      role: "group",
      "aria-roledescription": "slide",
      className: m(
        "min-w-0 shrink-0 grow-0 basis-full",
        s === "horizontal" ? "pl-4" : "pt-4",
        r
      ),
      ...o
    }
  );
});
A.displayName = "CarouselItem";
const K = e.forwardRef(({ className: r, variant: o = "secondary", size: a = "lg", ...s }, n) => {
  const { orientation: u, scrollPrev: c, canScrollPrev: i } = d();
  return /* @__PURE__ */ e.createElement(
    x,
    {
      ref: n,
      variant: o,
      size: a,
      className: m(
        "absolute  h-10 w-10 disabled:bg-light-3",
        u === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        r
      ),
      disabled: !i,
      onClick: c,
      ...s
    },
    /* @__PURE__ */ e.createElement(z, { className: "absolute h-4 w-4 stroke-stroke-4" }),
    /* @__PURE__ */ e.createElement("span", { className: "sr-only" }, "Previous slide")
  );
});
K.displayName = "CarouselPrevious";
const B = e.forwardRef(({ className: r, variant: o = "secondary", size: a = "lg", ...s }, n) => {
  const { orientation: u, scrollNext: c, canScrollNext: i } = d();
  return /* @__PURE__ */ e.createElement(
    x,
    {
      ref: n,
      variant: o,
      size: a,
      className: m(
        "absolute h-10 w-10 disabled:bg-light-3",
        u === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        r
      ),
      disabled: !i,
      onClick: c,
      ...s
    },
    /* @__PURE__ */ e.createElement(I, { className: "absolute h-4 w-4 stroke-stroke-4" })
  );
});
B.displayName = "CarouselNext";
export {
  L as Carousel,
  D as CarouselContent,
  A as CarouselItem,
  B as CarouselNext,
  K as CarouselPrevious
};
//# sourceMappingURL=index.es121.js.map