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

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

{"version":3,"file":"Carousel.cjs","sources":["../../../../src/lib/Carousel/Carousel.tsx"],"sourcesContent":["import type {FC, ReactNode} from 'react';\nimport {Children, useMemo} from 'react';\nimport classNames from 'classnames';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport {useAutoRotate} from '@/lib/Carousel/useAutoRotate.ts';\nimport {IconArrowLeft, IconArrowRight} from '@/internal/Icons';\n\nimport {useResponsiveWidth} from './useResponsiveWidth.ts';\nimport {useCarouselRotation} from './useCarouselRotation.ts';\nimport {Cell} from './Cell.tsx';\nimport {Dots} from './Dots.tsx';\nimport classes from './Carousel.module.css';\n\nexport type Props = {\n    /** Carousel with in pixels */\n    width: number;\n    /** Carousel height in pixels */\n    height: number;\n    children?: ReactNode;\n    /** Initially visible cell index */\n    defaultVisible?: number;\n    /** Show navigation dots */\n    showDots?: boolean;\n    /** Enable arrow navigation */\n    showArrows?: boolean;\n    /** Callback when a user clicks navigation arrows */\n    onRotate?: (index: number) => void;\n    /** Enable to see display backstage */\n    exposedMode?: boolean;\n    /** Provide a time interval in seconds to auto rotate Carousel */\n    autoRotate?: number;\n};\n\nexport const Carousel: FC<Props> = ({\n    children,\n    width,\n    height,\n    defaultVisible = 0,\n    showDots = true,\n    showArrows = true,\n    onRotate = () => {},\n    exposedMode = false,\n    autoRotate,\n}) => {\n    const cellsAmount = Children.toArray(children).length;\n\n    const {visibleCellIndex, rotateRight, rotateLeft, rotations, handleRotate} =\n        useCarouselRotation({\n            defaultVisible,\n            cellsAmount,\n            onRotate,\n        });\n\n    const {LocalRoot, ref} = useLocalTheme<HTMLDivElement>();\n\n    const responsiveWidth = useResponsiveWidth({width, ref});\n\n    const theme = useMemo(\n        () => ({\n            'aspect-ratio': width / height,\n            width: width,\n            'responsive-width': responsiveWidth,\n            'cells-amount': cellsAmount,\n            rotations: rotations,\n        }),\n        [width, height, responsiveWidth, cellsAmount, rotations]\n    );\n\n    const cells = useMemo(\n        () =>\n            Children.toArray(children).map((element, index) => {\n                return (\n                    <Cell index={index} key={index}>\n                        {element}\n                    </Cell>\n                );\n            }),\n        [children]\n    );\n\n    useAutoRotate({\n        rotateFn: handleRotate,\n        interval: autoRotate && autoRotate * 1000,\n        ref,\n    });\n\n    return (\n        <LocalRoot theme={theme} className={classes.carousel}>\n            <div\n                className={classNames(classes.scene, {\n                    [classes.normal]: !exposedMode,\n                    [classes.exposed]: exposedMode,\n                })}>\n                {showArrows && (\n                    <button\n                        className={classNames(classes.navigation, classes.left)}\n                        onClick={rotateLeft}>\n                        <IconArrowLeft className={classes.icon} />\n                    </button>\n                )}\n                <div className={classes.viewport}>{cells}</div>\n                {showArrows && (\n                    <button\n                        className={classNames(classes.navigation, classes.right)}\n                        onClick={rotateRight}>\n                        <IconArrowRight className={classes.icon} />\n                    </button>\n                )}\n            </div>\n            {showDots && <Dots amount={cellsAmount} active={visibleCellIndex} />}\n        </LocalRoot>\n    );\n};\n"],"names":["Carousel","children","width","height","defaultVisible","showDots","showArrows","onRotate","exposedMode","autoRotate","cellsAmount","Children","visibleCellIndex","rotateRight","rotateLeft","rotations","handleRotate","useCarouselRotation","LocalRoot","ref","useLocalTheme","responsiveWidth","useResponsiveWidth","theme","useMemo","cells","element","index","jsx","Cell","useAutoRotate","jsxs","classes","classNames","IconArrowLeft","IconArrowRight","Dots"],"mappings":"sfAkCaA,EAAsB,CAAC,CAChC,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EAAiB,EACjB,SAAAC,EAAW,GACX,WAAAC,EAAa,GACb,SAAAC,EAAW,IAAM,CAAC,EAClB,YAAAC,EAAc,GACd,WAAAC,CACJ,IAAM,CACF,MAAMC,EAAcC,EAAA,SAAS,QAAQV,CAAQ,EAAE,OAEzC,CAAC,iBAAAW,EAAkB,YAAAC,EAAa,WAAAC,EAAY,UAAAC,EAAW,aAAAC,GACzDC,sBAAoB,CAChB,eAAAb,EACA,YAAAM,EACA,SAAAH,CAAA,CACH,EAEC,CAAC,UAAAW,EAAW,IAAAC,CAAG,EAAIC,gBAA8B,EAEjDC,EAAkBC,EAAA,mBAAmB,CAAC,MAAApB,EAAO,IAAAiB,EAAI,EAEjDI,EAAQC,EAAA,QACV,KAAO,CACH,eAAgBtB,EAAQC,EACxB,MAAAD,EACA,mBAAoBmB,EACpB,eAAgBX,EAChB,UAAAK,CAAA,GAEJ,CAACb,EAAOC,EAAQkB,EAAiBX,EAAaK,CAAS,CAC3D,EAEMU,EAAQD,EAAA,QACV,IACIb,EAAAA,SAAS,QAAQV,CAAQ,EAAE,IAAI,CAACyB,EAASC,IAEhCC,EAAAA,IAAAC,EAAAA,KAAA,CAAK,MAAAF,EACD,SAAAD,CAAA,EADoBC,CAEzB,CAEP,EACL,CAAC1B,CAAQ,CACb,EAEc6B,OAAAA,gBAAA,CACV,SAAUd,EACV,SAAUP,GAAcA,EAAa,IACrC,IAAAU,CAAA,CACH,EAGIY,EAAAA,KAAAb,EAAA,CAAU,MAAAK,EAAc,UAAWS,UAAQ,SACxC,SAAA,CAAAD,EAAA,KAAC,MAAA,CACG,UAAWE,EAAWD,EAAA,QAAQ,MAAO,CACjC,CAACA,EAAA,QAAQ,MAAM,EAAG,CAACxB,EACnB,CAACwB,EAAAA,QAAQ,OAAO,EAAGxB,CAAA,CACtB,EACA,SAAA,CACGF,GAAAsB,EAAA,IAAC,SAAA,CACG,UAAWK,EAAWD,EAAAA,QAAQ,WAAYA,EAAAA,QAAQ,IAAI,EACtD,QAASlB,EACT,SAACc,EAAA,IAAAM,EAAA,cAAA,CAAc,UAAWF,EAAAA,QAAQ,IAAM,CAAA,CAAA,CAC5C,EAEHJ,EAAA,IAAA,MAAA,CAAI,UAAWI,EAAA,QAAQ,SAAW,SAAMP,EAAA,EACxCnB,GACGsB,EAAA,IAAC,SAAA,CACG,UAAWK,EAAWD,EAAAA,QAAQ,WAAYA,EAAAA,QAAQ,KAAK,EACvD,QAASnB,EACT,SAACe,EAAA,IAAAO,EAAA,eAAA,CAAe,UAAWH,EAAAA,QAAQ,IAAM,CAAA,CAAA,CAAA,CAC7C,CAAA,CAER,EACC3B,GAAauB,EAAA,IAAAQ,OAAA,CAAK,OAAQ1B,EAAa,OAAQE,CAAkB,CAAA,CAAA,EACtE,CAER"}