koval-ui/dist/src/lib/Carousel/Carousel.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as i, jsxs as y } from "react/jsx-runtime";
import { forwardRef as q, useState as v, Children as N, useRef as B, useCallback as p, useMemo as L } from "react";
import b from "classnames";
import { useLocalTheme as G } from "css-vars-hook";
import { IconArrowLeft as J } from "../../internal/Icons/IconArrowLeft.js";
import { IconArrowRight as K } from "../../internal/Icons/IconArrowRight.js";
import { useLinkRefs as Q } from "../../internal/hooks/useLinkRefs.js";
import { useResizeObserver as U } from "../../internal/hooks/useResizeObserver.js";
import { Cell as X } from "./Cell.js";
import { Dots as Y } from "./Dots.js";
import { useAutoRotate as Z } from "./useAutoRotate.js";
import o from "./Carousel.module.css.js";
const C = (r, c) => r % c >= 0 ? r % c : c + r % c, _ = q(
  ({
    children: r,
    className: c,
    width: m,
    height: a,
    defaultVisible: d = 0,
    showDots: W = !0,
    showArrows: R = !0,
    autoRotate: A,
    onRotate: f = () => {
    },
    ...E
  }, H) => {
    var k;
    const j = d !== 0 ? d - 1 : d, [t, u] = v(j), n = N.toArray(r).length, { LocalRoot: z, ref: h } = G();
    Q(H, h);
    const D = B(null), [l, g] = v(m), [x, I] = v(a), S = p(
      (e) => {
        const s = e == null ? void 0 : e.offsetWidth;
        if (s && s < l) {
          const T = a * (s / m);
          g(s), I(T);
        } else s && s > l && (g(m), I(a));
      },
      [l, a, m]
    );
    U((k = h.current) == null ? void 0 : k.parentElement, S);
    const V = L(
      () => ({
        width: l,
        height: x,
        "cells-amount": n,
        rotations: t
      }),
      [l, x, n, t]
    ), w = C(t, n), F = p(() => {
      const e = t + 1;
      u(e), f(C(e, n));
    }, [t, f, n]), M = p(() => {
      const e = t - 1;
      u(e), f(C(e, n));
    }, [t, f, n]), O = p(() => {
      u(t + 1);
    }, [t, u]);
    Z({
      rotateFn: O,
      interval: A && A * 1e3,
      ref: h
    });
    const P = L(
      () => N.toArray(r).map((e, s) => /* @__PURE__ */ i(X, { index: s, children: e }, s)),
      [r]
    );
    return /* @__PURE__ */ y(
      z,
      {
        ...E,
        theme: V,
        className: b(o.carousel, c),
        children: [
          /* @__PURE__ */ y("div", { className: o.scene, children: [
            R && /* @__PURE__ */ i(
              "button",
              {
                className: b(o.navigation, o.left),
                onClick: M,
                children: /* @__PURE__ */ i(J, { className: o.icon })
              }
            ),
            /* @__PURE__ */ i("div", { className: o.viewport, ref: D, children: P }),
            R && /* @__PURE__ */ i(
              "button",
              {
                className: b(o.navigation, o.right),
                onClick: F,
                children: /* @__PURE__ */ i(K, { className: o.icon })
              }
            )
          ] }),
          W && /* @__PURE__ */ i(Y, { amount: N.toArray(r).length, active: w })
        ]
      }
    );
  }
);
_.displayName = "Carousel";
export {
  _ as Carousel
};
//# sourceMappingURL=Carousel.js.map