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

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

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