{"version":3,"file":"Button_rolling.LSx6WrRG.mjs","names":["useState","useRef","useCallback","_Fragment","__esmMin","init_npm_react_18_3_1","ne","te","l","_e","p","c","init_jsx_runtime","de","motion","useReducedMotion","useSpring","init_framer_motion_DhsWWWsN","ControlType","useIsStaticRenderer","addPropertyControls","init_framer_BWFVvmND","Arrow","size","color","V2RollingButton","props","hovered","setHovered","wrapRef","isStatic","reduced","motionOff","x","y","pullActive","magnetic","handleMove","node","rect","relX","event","relY","clamp","v","magneticStrength","handleEnter","handleLeave","rolled","isPrimary","variant","isText","surface","background","border","borderColor","transition","duration","EASE","maskHeight","fontSize","arrowSize","labelStyle","letterSpacing","foreground","inner","label","showArrow","surfaceStyle","style","paddingY","paddingX","link","openInNewTab","init_Button_rolling"],"sources":["https:/framerusercontent.com/modules/TLamLQ5YniGxIV4578tP/2XdxvjujISMFbT712rA0/Button_rolling.js"],"sourcesContent":["// Built for samnad.com /v2 — AI Product Designer portfolio.\n//\n// User instructions for this component:\n// \"Rolling text hover on every link and button. The label is duplicated inside\n// an overflow hidden mask. On hover, the first copy slides up and out while the\n// second slides in from below. Duration 0.45s, ease cubic bezier (0.65, 0, 0.35, 1).\n// Button arrows: on hover, the arrow slides out to the right while a second\n// arrow enters from the left. Magnetic pull on primary CTAs, max 8px.\n// Respect prefers reduced motion. Inline styles only. Expose all text, colors,\n// media and timing as property controls. Clean up animations on unmount.\"\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useCallback,useRef,useState,startTransition}from\"react\";import{motion,useSpring,useReducedMotion}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";const EASE=\"cubic-bezier(0.65, 0, 0.35, 1)\";function Arrow({size,color}){return /*#__PURE__*/_jsx(\"svg\",{width:size,height:size,viewBox:\"0 0 16 16\",fill:\"none\",\"aria-hidden\":\"true\",style:{display:\"block\",flexShrink:0},children:/*#__PURE__*/_jsx(\"path\",{d:\"M2.5 8h11M9 3.5 13.5 8 9 12.5\",stroke:color,strokeWidth:\"1.4\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})});}/**\n * V2 / Rolling Button\n *\n * @framerIntrinsicWidth 180\n * @framerIntrinsicHeight 52\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function V2RollingButton(props){const{label,link,openInNewTab,variant,showArrow,magnetic,magneticStrength,duration,background,foreground,borderColor,fontSize,fontWeight,letterSpacing,paddingX,paddingY,style}=props;const[hovered,setHovered]=useState(false);const wrapRef=useRef(null);const isStatic=useIsStaticRenderer();const reduced=useReducedMotion();const motionOff=isStatic||reduced===true;// Magnetic pull. Springs are owned by framer-motion and torn down with the\n// component, so there is nothing to clean up manually here.\nconst x=useSpring(0,{stiffness:220,damping:18,mass:.4});const y=useSpring(0,{stiffness:220,damping:18,mass:.4});const pullActive=magnetic&&!motionOff;const handleMove=useCallback(event=>{if(!pullActive)return;const node=wrapRef.current;if(!node)return;const rect=node.getBoundingClientRect();if(!rect.width||!rect.height)return;const relX=(event.clientX-(rect.left+rect.width/2))/(rect.width/2);const relY=(event.clientY-(rect.top+rect.height/2))/(rect.height/2);const clamp=v=>Math.max(-1,Math.min(1,v));x.set(clamp(relX)*magneticStrength);y.set(clamp(relY)*magneticStrength);},[pullActive,magneticStrength,x,y]);const handleEnter=useCallback(()=>{startTransition(()=>setHovered(true));},[]);const handleLeave=useCallback(()=>{startTransition(()=>setHovered(false));x.set(0);y.set(0);},[x,y]);// A static canvas render should still read as the button, so show the\n// resting state rather than an empty mask.\nconst rolled=hovered&&!motionOff;const isPrimary=variant===\"primary\";const isText=variant===\"text\";const surface=isText?\"transparent\":isPrimary?background:\"transparent\";const border=isText?\"none\":isPrimary?\"none\":`1px solid ${borderColor}`;const transition=motionOff?\"none\":`transform ${duration}s ${EASE}`;const lineHeight=1;const maskHeight=Math.ceil(fontSize*lineHeight);const arrowSize=Math.round(fontSize*.95);const labelStyle={display:\"block\",height:maskHeight,width:\"max-content\",margin:0,fontFamily:'\"Albert Sans\", sans-serif',fontSize,fontWeight,lineHeight,letterSpacing:`${letterSpacing}em`,color:foreground,whiteSpace:\"nowrap\"};const inner=/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"span\",{style:{position:\"relative\",display:\"block\",height:maskHeight,overflow:\"hidden\",flexShrink:0},children:/*#__PURE__*/_jsxs(\"span\",{style:{display:\"block\",transform:rolled?\"translateY(-50%)\":\"translateY(0%)\",transition,willChange:\"transform\"},children:[/*#__PURE__*/_jsx(\"span\",{style:labelStyle,children:label}),/*#__PURE__*/_jsx(\"span\",{style:labelStyle,\"aria-hidden\":\"true\",children:label})]})}),showArrow&&/*#__PURE__*/_jsxs(\"span\",{style:{position:\"relative\",display:\"block\",width:arrowSize,height:arrowSize,overflow:\"hidden\",flexShrink:0},children:[/*#__PURE__*/_jsx(\"span\",{style:{position:\"absolute\",inset:0,transform:rolled?\"translateX(140%)\":\"translateX(0%)\",transition,willChange:\"transform\"},children:/*#__PURE__*/_jsx(Arrow,{size:arrowSize,color:foreground})}),/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",inset:0,transform:rolled?\"translateX(0%)\":\"translateX(-140%)\",transition,willChange:\"transform\"},children:/*#__PURE__*/_jsx(Arrow,{size:arrowSize,color:foreground})})]})]});const surfaceStyle={position:\"relative\",display:\"inline-flex\",alignItems:\"center\",gap:showArrow?Math.round(fontSize*.5):0,width:style?.width===\"100%\"?\"100%\":\"max-content\",justifyContent:\"center\",boxSizing:\"border-box\",padding:isText?0:`${paddingY}px ${paddingX}px`,borderRadius:999,background:surface,border,textDecoration:\"none\",cursor:\"pointer\",userSelect:\"none\",WebkitTapHighlightColor:\"transparent\"};return /*#__PURE__*/_jsx(motion.div,{ref:wrapRef,onMouseMove:handleMove,onMouseEnter:handleEnter,onMouseLeave:handleLeave,style:{position:\"relative\",display:\"inline-flex\",width:style?.width===\"100%\"?\"100%\":\"max-content\",...pullActive?{x,y}:null,...style},children:link?/*#__PURE__*/_jsx(\"a\",{href:link,target:openInNewTab?\"_blank\":undefined,rel:openInNewTab?\"noopener noreferrer\":undefined,style:surfaceStyle,children:inner}):/*#__PURE__*/_jsx(\"button\",{type:\"button\",style:{...surfaceStyle,font:\"inherit\"},children:inner})});}addPropertyControls(V2RollingButton,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Book a call\"},link:{type:ControlType.Link,title:\"Link\"},openInNewTab:{type:ControlType.Boolean,title:\"New Tab\",enabledTitle:\"Yes\",disabledTitle:\"No\",defaultValue:false},variant:{type:ControlType.Enum,title:\"Variant\",options:[\"primary\",\"secondary\",\"text\"],optionTitles:[\"Primary\",\"Secondary\",\"Text\"],defaultValue:\"primary\",displaySegmentedControl:true},showArrow:{type:ControlType.Boolean,title:\"Arrow\",enabledTitle:\"Show\",disabledTitle:\"Hide\",defaultValue:true},magnetic:{type:ControlType.Boolean,title:\"Magnetic\",enabledTitle:\"On\",disabledTitle:\"Off\",defaultValue:true},magneticStrength:{type:ControlType.Number,title:\"Pull\",min:0,max:16,step:1,unit:\"px\",defaultValue:8,hidden:({magnetic})=>!magnetic},duration:{type:ControlType.Number,title:\"Duration\",min:.1,max:1.2,step:.05,unit:\"s\",defaultValue:.45},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#5D41E3\"},foreground:{type:ControlType.Color,title:\"Text\",defaultValue:\"#F1F1F1\"},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"rgba(23,23,23,0.10)\",hidden:({variant})=>variant!==\"secondary\"},fontSize:{type:ControlType.Number,title:\"Size\",min:10,max:32,step:1,unit:\"px\",defaultValue:16},fontWeight:{type:ControlType.Number,title:\"Weight\",min:300,max:800,step:100,defaultValue:500,displayStepper:true},letterSpacing:{type:ControlType.Number,title:\"Tracking\",min:-.06,max:.1,step:.005,unit:\"em\",defaultValue:0},paddingX:{type:ControlType.Number,title:\"Pad X\",min:0,max:60,step:2,unit:\"px\",defaultValue:26},paddingY:{type:ControlType.Number,title:\"Pad Y\",min:0,max:40,step:2,unit:\"px\",defaultValue:16}});V2RollingButton.displayName=\"V2 / Rolling Button\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"V2RollingButton\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerIntrinsicHeight\":\"52\",\"framerIntrinsicWidth\":\"180\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Button_rolling.map"],"mappings":"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"}