{"version":3,"file":"CollectionSlider.4urgypPy.mjs","names":["useState","useRef","_Fragment"],"sources":["https:/framerusercontent.com/modules/M2VZNMYlzW9SKz2LWPPA/cOTfPuGevYCvtK1gunBT/CollectionSlider.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{ControlType,addPropertyControls}from\"framer\";import{useState,useRef,useLayoutEffect}from\"react\";export function CollectionSlider(props){const{collection,dots,dotsStyle,slideCount,arrowStyle}=props;const[slides,setSlides]=useState(null);const[index,setIndex]=useState(0);const[count,setCount]=useState(0);const trackRef=useRef(null);const slideWidth=100/slideCount;useLayoutEffect(()=>{const track=trackRef.current;if(!track)return;const items=trackRef.current.firstElementChild;if(!items)return;const updateSlides=()=>{const tempSlides=items;tempSlides.classList.add(\"carousel-track\");setCount(tempSlides.childNodes.length);setSlides(tempSlides.childNodes);};updateSlides();},[collection]);const prev=()=>count&&index>0&&setIndex(i=>i-1);const next=()=>count&&index<count-slideCount&&setIndex(i=>i+1);return /*#__PURE__*/_jsx(_Fragment,{children:!collection?/*#__PURE__*/_jsx(\"div\",{children:\"Connect a Collection\"}):/*#__PURE__*/_jsxs(\"div\",{className:\"carousel-container collection-slider-container\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"carousel collection-slider\",children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                    .collection-slider-container {\n                        position: relative;\n                    }\n                    .carousel-content {\n                        transition: transform 0.3s ease-in-out;\n                        width: calc(100% + 12px);\n                        height: 400px;\n                        margin-right: -12px;\n                    }\n                    .collection-slider.carousel {\n                        position: relative;\n                        overflow: hidden;\n                        width: 100%;\n                    }\n                    .collection-slider .carousel-track {\n                        display: flex !important;\n                        flex-direction: row !important;\n                        gap: 12px !important;\n                        flex-wrap: nowrap !important;\n                        justify-content: flex-start !important;\n                        align-items: flex-start !important;\n                        min-width: 100% !important;\n                        height: auto !important;\n                        width: 100% !important;\n                    }\n                    .collection-slider .carousel-track > * {\n                        display: flex;\n                        width: calc(${slideWidth}% - 12px);\n                        min-width: calc(${slideWidth}% - 12px);\n                        height: 400px;\n                    }\n                    .collection-slider .carousel-track > * > * {\n                        width: 100%\n                    }\n                    .collection-slider-container .carousel-btn {\n                        position: absolute;\n                        transform: translateY(-50%);\n                        top: ${dots&&!dotsStyle?\"calc(50% - 15px)\":\"50%\"};\n                        border: none;\n                        display: block;\n                        place-content: center;\n                        place-items: center;\n                        overflow: hidden;\n                        background: rgba(0, 0, 0, 0.2);\n                        margin: 0px;\n                        padding: 0px;\n                        width: 40px;\n                        height: 40px;\n                        border-radius: 40px;\n                        cursor: pointer;\n                        opacity: 1;\n                        pointer-events: auto;\n                        transform: none;\n                        z-index: 1;\n                    }\n                    .collection-slider-container .carousel-btn.btn--secondary {\n                        width: 42px;\n                        height: 42px;\n                        background: #FFC300;\n                        border-radius: 10px;\n                    }\n                    .collection-slider-container .carousel-btn:hover {\n                        background: rgba(0, 0, 0, 0.4);\n                    }\n                    .collection-slider-container .carousel-btn.btn--secondary:hover {\n                        background: #FFC300;\n                    }\n                    .carousel-btn.prev { left: -16px; }\n                    .carousel-btn.next { right: -16px; }\n                    @media screen and (min-width: 810px) {\n                        .carousel-btn.prev { left: -24px; }\n                        .carousel-btn.next { right: -24px; }\n                    }\n                    @media screen and (min-width: 1440px) {\n                        .carousel-btn.prev { left: -54px; }\n                        .carousel-btn.next { right: -54px; }\n                    }\n                    .collection-slider-container .carousel-dots--primary {\n                        position: absolute;\n                        bottom: 12px;\n                        left: 0;\n                        right: 0;\n                        display: flex;\n                        justify-content: center;\n                        gap: 8px;\n                        z-index: 1;\n                    }\n                    .collection-slider-container .carousel-dots--secondary {\n                        position: relative;\n                        width: 100%;\n                        padding-top: 10px;\n                        display: flex;\n                        justify-content: flex-end;\n                        gap: 8px;\n                        z-index: 1;\n                    }\n                    .collection-slider-container .carousel-dots--primary .carousel-dot {\n                        width: 8px;\n                        height: 8px;\n                        border-radius: 50%;\n                        border: none;\n                        background: rgba(255,255,255,0.5);\n                        cursor: pointer;\n                        padding: 0;\n                    }\n                    .collection-slider-container .carousel-dots--primary .carousel-dot.active { background: #fff; }\n                    .collection-slider-container .carousel-dots--secondary .carousel-dot {\n                        width: 24px;\n                        height: 5px;\n                        background: #E5E5E5;\n                        transition: all .2s ease-in-out;\n                        border-radius: 10px;\n                        border: 1px solid transparent;\n                    }\n                    .collection-slider-container .carousel-dots--secondary .carousel-dot.active {\n                        width: 48px;\n                        height: 5px;\n                        background: #FFC300\n                    }\n                `}),/*#__PURE__*/_jsx(\"div\",{ref:trackRef,className:\"carousel-content\",style:{transform:slides&&`translateX(-${slides.length?Math.min(Math.max(index,0),count-slideCount)*slideWidth:0}%)`},children:collection})]}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:`carousel-btn btn--${!arrowStyle?\"primary\":\"secondary\"} prev`,onClick:prev,\"aria-label\":\"Previous\",style:{display:index<=0&&\"none\"},children:/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",width:\"40\",height:\"40\",style:{transform:\"rotate(180deg)\"},children:/*#__PURE__*/_jsx(\"path\",{fill:\"transparent\",stroke:\"hsl(0, 0%, 100%)\",strokeLinecap:\"round\",strokeLinejoin:\"round\",strokeWidth:\"2\",d:\"M17.5 12.5 25 20l-7.5 7.5\"})})}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:`carousel-btn btn--${!arrowStyle?\"primary\":\"secondary\"} next`,onClick:next,\"aria-label\":\"Next\",style:{display:index>=count-slideCount&&\"none\"},children:/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",width:\"40\",height:\"40\",children:/*#__PURE__*/_jsx(\"path\",{fill:\"transparent\",stroke:\"hsl(0, 0%, 100%)\",strokeLinecap:\"round\",strokeLinejoin:\"round\",strokeWidth:\"2\",d:\"M17.5 12.5 25 20l-7.5 7.5\"})})}),!!dots&&count>0&&/*#__PURE__*/_jsx(\"div\",{className:`carousel-dots carousel-dots--${dotsStyle?\"primary\":\"secondary\"}`,children:Array.from({length:count-slideCount+1},(_,i)=>/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"carousel-dot\"+(i===index||index>count-slideCount&&i===count-slideCount?\" active\":\"\"),onClick:()=>setIndex(i),\"aria-label\":`Go to slide ${i+1}`},i))})]})});}addPropertyControls(CollectionSlider,{collection:{title:\"Collection\",type:ControlType.ComponentInstance,description:\"Connect this to your Collection layer. Each Card becomes a slide.\"},dots:{title:\"Dots\",type:ControlType.Boolean,description:\"Show dots\"},dotsStyle:{title:\"Dots Style\",type:ControlType.Boolean},slideCount:{title:\"Slide Count\",type:ControlType.Number,min:1,max:5},arrowStyle:{title:\"Yellow Buttons\",type:ControlType.Boolean}});\nexport const __FramerMetadata__ = {\"exports\":{\"CollectionSlider\":{\"type\":\"reactComponent\",\"name\":\"CollectionSlider\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CollectionSlider.map"],"mappings":"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"}