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 e, jsxs as v } from "react/jsx-runtime";
import { Children as h, useMemo as N } from "react";
import a from "classnames";
import { useLocalTheme as y } from "css-vars-hook";
import { useAutoRotate as W } from "./useAutoRotate.js";
import { IconArrowLeft as D } from "../../internal/Icons/IconArrowLeft.js";
import { IconArrowRight as F } from "../../internal/Icons/IconArrowRight.js";
import { useResponsiveWidth as T } from "./useResponsiveWidth.js";
import { useCarouselRotation as q } from "./useCarouselRotation.js";
import { Cell as z } from "./Cell.js";
import { Dots as B } from "./Dots.js";
import o from "./Carousel.module.css.js";
const X = ({
  children: s,
  width: t,
  height: n,
  defaultVisible: d = 0,
  showDots: C = !0,
  showArrows: i = !0,
  onRotate: R = () => {
  },
  exposedMode: m = !1,
  autoRotate: l
}) => {
  const r = h.toArray(s).length, { visibleCellIndex: g, rotateRight: A, rotateLeft: L, rotations: c, handleRotate: b } = q({
    defaultVisible: d,
    cellsAmount: r,
    onRotate: R
  }), { LocalRoot: x, ref: p } = y(), u = T({ width: t, ref: p }), I = N(
    () => ({
      "aspect-ratio": t / n,
      width: t,
      "responsive-width": u,
      "cells-amount": r,
      rotations: c
    }),
    [t, n, u, r, c]
  ), j = N(
    () => h.toArray(s).map((k, f) => /* @__PURE__ */ e(z, { index: f, children: k }, f)),
    [s]
  );
  return W({
    rotateFn: b,
    interval: l && l * 1e3,
    ref: p
  }), /* @__PURE__ */ v(x, { theme: I, className: o.carousel, children: [
    /* @__PURE__ */ v(
      "div",
      {
        className: a(o.scene, {
          [o.normal]: !m,
          [o.exposed]: m
        }),
        children: [
          i && /* @__PURE__ */ e(
            "button",
            {
              className: a(o.navigation, o.left),
              onClick: L,
              children: /* @__PURE__ */ e(D, { className: o.icon })
            }
          ),
          /* @__PURE__ */ e("div", { className: o.viewport, children: j }),
          i && /* @__PURE__ */ e(
            "button",
            {
              className: a(o.navigation, o.right),
              onClick: A,
              children: /* @__PURE__ */ e(F, { className: o.icon })
            }
          )
        ]
      }
    ),
    C && /* @__PURE__ */ e(B, { amount: r, active: g })
  ] });
};
export {
  X as Carousel
};
//# sourceMappingURL=Carousel.js.map