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