{"version":3,"file":"CarouselWithClipping.DCjVMZos.mjs","names":["React.useRef","React.useMemo","React.useCallback"],"sources":["https:/framerusercontent.com/modules/ui1as8CkhRcTUTfaLx9A/ub9zgmdiimxz9NM4mkVF/CarouselWithClipping.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function CarouselWithClipping(props){const{children,clipContent=false,gap=10,padding=\"10px\",snap=true,align=\"center\",ariaLabel=\"Carousel\",direction=\"horizontal\",showControls=true,controlSize=52,controlGap=12,controlBackground=\"rgb(247,247,247)\",controlArrowColor=\"rgb(0,0,0)\",controlRadius=50,slideDistance=80,style}=props;const trackRef=React.useRef(null);const normalizedGap=React.useMemo(()=>{return typeof gap===\"number\"?`${gap}px`:gap;},[gap]);const childArray=React.useMemo(()=>React.Children.toArray(children),[children]);const scrollDirectionStyles=React.useMemo(()=>{if(direction===\"vertical\"){return{flexDirection:\"column\",overflowX:clipContent?\"hidden\":\"visible\",overflowY:\"auto\",scrollSnapType:snap?\"y mandatory\":\"none\"};}return{flexDirection:\"row\",overflowX:\"auto\",overflowY:clipContent?\"hidden\":\"visible\",scrollSnapType:snap?\"x mandatory\":\"none\"};},[direction,clipContent,snap]);const trackStyle=React.useMemo(()=>({position:\"relative\",display:\"flex\",gap:normalizedGap,padding,width:\"100%\",height:\"auto\",background:\"transparent\",boxSizing:\"border-box\",WebkitOverflowScrolling:\"touch\",scrollbarWidth:\"none\",msOverflowStyle:\"none\",...scrollDirectionStyles}),[normalizedGap,padding,scrollDirectionStyles]);const getItemStyle=React.useCallback(index=>({position:\"relative\",flex:\"0 0 auto\",scrollSnapAlign:snap?align:\"none\",scrollSnapStop:snap?\"always\":\"normal\",minWidth:direction===\"horizontal\"?\"max-content\":undefined,minHeight:direction===\"vertical\"?\"max-content\":undefined,zIndex:index+1}),[snap,align,direction]);const scrollByStep=React.useCallback(deltaDirection=>{const element=trackRef.current;if(!element)return;const distanceBase=direction===\"horizontal\"?element.clientWidth:element.clientHeight;const amount=distanceBase*slideDistance/100;if(direction===\"horizontal\"){element.scrollBy({left:deltaDirection*amount,behavior:\"smooth\"});}else{element.scrollBy({top:deltaDirection*amount,behavior:\"smooth\"});}},[direction,slideDistance]);const controlsContainerStyle=React.useMemo(()=>({position:\"relative\",marginTop:12,width:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",gap:`${controlGap}px`}),[controlGap]);const controlButtonStyle=React.useMemo(()=>({position:\"relative\",width:`${controlSize}px`,height:`${controlSize}px`,border:\"none\",outline:\"none\",borderRadius:`${controlRadius}px`,background:controlBackground,color:controlArrowColor,display:\"inline-flex\",justifyContent:\"center\",alignItems:\"center\",cursor:\"pointer\",flex:\"0 0 auto\",fontSize:Math.max(14,Math.round(controlSize*.4)),lineHeight:1}),[controlSize,controlRadius,controlBackground,controlArrowColor]);return /*#__PURE__*/_jsxs(\"section\",{role:\"region\",\"aria-label\":ariaLabel,style:{position:\"relative\",width:\"100%\",height:\"auto\",overflow:clipContent?\"hidden\":\"visible\",background:\"transparent\",boxSizing:\"border-box\",...style},children:[/*#__PURE__*/_jsx(\"div\",{ref:trackRef,style:trackStyle,children:childArray.map((child,index)=>/*#__PURE__*/_jsx(\"div\",{style:getItemStyle(index),children:child},index))}),showControls&&/*#__PURE__*/_jsxs(\"div\",{style:controlsContainerStyle,children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",\"aria-label\":direction===\"horizontal\"?\"Scroll carousel left\":\"Scroll carousel up\",onClick:()=>scrollByStep(-1),style:controlButtonStyle,children:direction===\"horizontal\"?\"←\":\"↑\"}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",\"aria-label\":direction===\"horizontal\"?\"Scroll carousel right\":\"Scroll carousel down\",onClick:()=>scrollByStep(1),style:controlButtonStyle,children:direction===\"horizontal\"?\"→\":\"↓\"})]})]});}addPropertyControls(CarouselWithClipping,{children:{type:ControlType.Slot,title:\"Cards\",maxCount:20},clipContent:{type:ControlType.Boolean,title:\"Clip Content\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:10,min:0,max:500,unit:\"px\",step:1},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"10px\"},snap:{type:ControlType.Boolean,title:\"Snap\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},align:{type:ControlType.Enum,title:\"Align\",defaultValue:\"center\",options:[\"start\",\"center\",\"end\"],optionTitles:[\"Start\",\"Center\",\"End\"],displaySegmentedControl:true},ariaLabel:{type:ControlType.String,title:\"ARIA Label\",defaultValue:\"Carousel\",placeholder:\"Carousel\"},direction:{type:ControlType.Enum,title:\"Direction\",defaultValue:\"horizontal\",options:[\"horizontal\",\"vertical\"],optionTitles:[\"Horizontal\",\"Vertical\"],displaySegmentedControl:true},showControls:{type:ControlType.Boolean,title:\"Controls\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},controlSize:{type:ControlType.Number,title:\"Ctrl Size\",defaultValue:52,min:24,max:120,unit:\"px\",step:1},controlGap:{type:ControlType.Number,title:\"Ctrl Gap\",defaultValue:12,min:0,max:120,unit:\"px\",step:1,hidden:props=>!props.showControls},controlBackground:{type:ControlType.Color,title:\"Ctrl Bg\",defaultValue:\"rgb(247,247,247)\",hidden:props=>!props.showControls},controlArrowColor:{type:ControlType.Color,title:\"Ctrl Arrow\",defaultValue:\"rgb(0,0,0)\",hidden:props=>!props.showControls},controlRadius:{type:ControlType.Number,title:\"Ctrl Radius\",defaultValue:50,min:0,max:200,unit:\"px\",step:1,hidden:props=>!props.showControls},slideDistance:{type:ControlType.Number,title:\"Slide %\",defaultValue:80,min:1,max:100,unit:\"%\",step:1,hidden:props=>!props.showControls}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CarouselWithClipping\",\"slots\":[\"children\"],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CarouselWithClipping.map"],"mappings":"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"}