{"version":3,"file":"SliderButtons.DMo_CBZZ.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/JzFhW7fQgJOeQXfCwhr6/WyT87xuy7ZgVG9QC5B09/SliderButtons.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";// ─── Nav Button ───────────────────────────────────────────────────────────────\nfunction NavButton({direction,onClick,disabled,size,radius,borderWidth,bg,bgHover,border,iconColor,iconColorHover,iconSize}){const[hovered,setHovered]=useState(false);const isHovered=hovered&&!disabled;const currentBg=isHovered?bgHover:bg;const currentIcon=isHovered?iconColorHover:iconColor;return /*#__PURE__*/_jsx(\"button\",{onClick:onClick,disabled:disabled,\"aria-label\":direction===\"prev\"?\"Previous\":\"Next\",onMouseEnter:()=>setHovered(true),onMouseLeave:()=>setHovered(false),style:{appearance:\"none\",WebkitAppearance:\"none\",margin:0,padding:0,outline:\"none\",boxShadow:\"none\",fontFamily:\"inherit\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",flexShrink:0,boxSizing:\"border-box\",width:size,height:size,borderRadius:radius,borderWidth:borderWidth,borderStyle:\"solid\",borderColor:border,backgroundColor:currentBg,opacity:1,cursor:disabled?\"not-allowed\":\"pointer\",transition:\"background-color 0.2s ease, border-color 0.2s ease\",filter:disabled?\"opacity(0.35)\":\"none\"},children:/*#__PURE__*/_jsx(\"svg\",{width:iconSize,height:iconSize,viewBox:\"0 0 24 24\",fill:\"none\",stroke:currentIcon,strokeWidth:2.2,strokeLinecap:\"round\",strokeLinejoin:\"round\",style:{display:\"block\",flexShrink:0,pointerEvents:\"none\"},children:direction===\"prev\"?/*#__PURE__*/_jsx(\"path\",{d:\"M19 12H5M12 5l-7 7 7 7\"}):/*#__PURE__*/_jsx(\"path\",{d:\"M5 12h14M12 5l7 7-7 7\"})})});}// ─── Main Component ───────────────────────────────────────────────────────────\nexport default function SliderNav({targetId=\"\",scrollAmount=320,buttonSize=40,buttonRadius=999,buttonBorderWidth=1,buttonBg=\"#ffffff\",buttonBgHover=\"#2A52BE\",buttonBorder=\"rgba(0,0,0,0.15)\",buttonIconColor=\"#1A2438\",buttonIconColorHover=\"#ffffff\",buttonIconSize=15,buttonGap=8,showCounter=false,counterColor=\"rgba(0,0,0,0.35)\"}){const[atStart,setAtStart]=useState(true);const[atEnd,setAtEnd]=useState(false);const[scrollPos,setScrollPos]=useState(0);const[maxScroll,setMaxScroll]=useState(0);// Find the actual scrollable element inside Framer's wrapper\nconst getScrollEl=id=>{const root=document.getElementById(id);if(!root)return null;// If root itself scrolls, use it\nif(root.scrollWidth>root.clientWidth)return root;// Walk children up to 5 levels deep to find the scrollable one\nconst walk=(el,depth)=>{if(depth===0)return null;for(const child of Array.from(el.children)){if(child.scrollWidth>child.clientWidth)return child;const found=walk(child,depth-1);if(found)return found;}return null;};return walk(root,5);};// Find the target element and track its scroll position\nuseEffect(()=>{if(!targetId)return;const el=getScrollEl(targetId);if(!el){console.warn(`SliderNav: no scrollable element found for id=\"${targetId}\"`);return;}const update=()=>{const pos=el.scrollLeft;const max=el.scrollWidth-el.clientWidth;setScrollPos(pos);setMaxScroll(max);setAtStart(pos<=0);setAtEnd(pos>=max-1);};// Hide scrollbar on the element\nel.style.scrollbarWidth=\"none\";el.style.msOverflowStyle=\"none\";// Inject a scoped style tag for ::-webkit-scrollbar\nconst styleId=`slider-nav-hide-${targetId}`;if(!document.getElementById(styleId)){const tag=document.createElement(\"style\");tag.id=styleId;tag.textContent=`#${targetId} *::-webkit-scrollbar { display: none !important; } #${targetId}::-webkit-scrollbar { display: none !important; }`;document.head.appendChild(tag);}update();el.addEventListener(\"scroll\",update,{passive:true});// Also re-check on resize\nconst ro=new ResizeObserver(update);ro.observe(el);return()=>{el.removeEventListener(\"scroll\",update);ro.disconnect();const tag=document.getElementById(`slider-nav-hide-${targetId}`);if(tag)tag.remove();};},[targetId]);const scroll=dir=>{if(!targetId)return;const el=getScrollEl(targetId);if(!el)return;el.scrollBy({left:dir===\"next\"?scrollAmount:-scrollAmount,behavior:\"smooth\"});};// Counter: estimate current step\nconst step=maxScroll>0?Math.round(scrollPos/maxScroll*10):0;const total=10;return /*#__PURE__*/_jsxs(\"div\",{style:{display:\"inline-flex\",alignItems:\"center\",gap:buttonGap,fontFamily:\"inherit\"},children:[/*#__PURE__*/_jsx(NavButton,{direction:\"prev\",onClick:()=>scroll(\"prev\"),disabled:atStart,size:buttonSize,radius:buttonRadius,borderWidth:buttonBorderWidth,bg:buttonBg,bgHover:buttonBgHover,border:buttonBorder,iconColor:buttonIconColor,iconColorHover:buttonIconColorHover,iconSize:buttonIconSize}),showCounter&&/*#__PURE__*/_jsxs(\"span\",{style:{fontSize:12,color:counterColor,fontVariantNumeric:\"tabular-nums\",letterSpacing:\"0.04em\",minWidth:36,textAlign:\"center\",userSelect:\"none\"},children:[String(step+1).padStart(2,\"0\"),\" /\",\" \",String(total).padStart(2,\"0\")]}),/*#__PURE__*/_jsx(NavButton,{direction:\"next\",onClick:()=>scroll(\"next\"),disabled:atEnd,size:buttonSize,radius:buttonRadius,borderWidth:buttonBorderWidth,bg:buttonBg,bgHover:buttonBgHover,border:buttonBorder,iconColor:buttonIconColor,iconColorHover:buttonIconColorHover,iconSize:buttonIconSize}),!targetId&&/*#__PURE__*/_jsx(\"span\",{style:{fontSize:11,color:\"#e85d4a\",marginLeft:8,background:\"rgba(232,93,74,0.08)\",padding:\"3px 8px\",borderRadius:6,userSelect:\"none\"},children:\"Set Target ID →\"})]});}// ─── Property Controls ────────────────────────────────────────────────────────\naddPropertyControls(SliderNav,{targetId:{type:ControlType.String,title:\"Target ID\",defaultValue:\"\",placeholder:\"e.g. treatments-slider\",description:\"The HTML id of your scroll container. Set it via Element → ID in Framer's right panel.\"},scrollAmount:{type:ControlType.Number,title:\"Scroll amount\",defaultValue:320,min:50,max:2e3,step:10,unit:\"px\",description:\"How many px to scroll per button click.\"},// Button gap\nbuttonGap:{type:ControlType.Number,title:\"Button gap\",defaultValue:8,min:0,max:40,step:2,unit:\"px\"},// Button size & shape\nbuttonSize:{type:ControlType.Number,title:\"Button size\",defaultValue:40,min:24,max:80,step:2,unit:\"px\"},buttonRadius:{type:ControlType.Number,title:\"Button radius\",defaultValue:999,min:0,max:999,step:2,unit:\"px\"},buttonBorderWidth:{type:ControlType.Number,title:\"Border width\",defaultValue:1,min:0,max:10,step:.5,unit:\"px\"},buttonIconSize:{type:ControlType.Number,title:\"Icon size\",defaultValue:15,min:8,max:32,step:1,unit:\"px\"},// Button colors\nbuttonBg:{type:ControlType.Color,title:\"Button bg\",defaultValue:\"#ffffff\"},buttonBgHover:{type:ControlType.Color,title:\"Button bg hover\",defaultValue:\"#2A52BE\"},buttonBorder:{type:ControlType.Color,title:\"Border color\",defaultValue:\"rgba(0,0,0,0.15)\"},buttonIconColor:{type:ControlType.Color,title:\"Icon color\",defaultValue:\"#1A2438\"},buttonIconColorHover:{type:ControlType.Color,title:\"Icon hover color\",defaultValue:\"#ffffff\"},// Counter\nshowCounter:{type:ControlType.Boolean,title:\"Show counter\",defaultValue:false},counterColor:{type:ControlType.Color,title:\"Counter color\",defaultValue:\"rgba(0,0,0,0.35)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SliderNav\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SliderButtons.map"],"mappings":"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"}