{"version":3,"file":"AnimatedBorderButton.DA5V2UOb.mjs","names":["useState","useMemo","useCallback","_Fragment"],"sources":["https:/framerusercontent.com/modules/1uh7csDK99I4gaG9eljM/HAxNQJPKmKrkIUN45ugj/AnimatedBorderButton.js"],"sourcesContent":["// Button component with animated dotted border that loops smoothly around the edges\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";import{useMemo,useState,useCallback}from\"react\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function AnimatedBorderButton(props){const{label,labelFont,labelColor,backgroundColor,borderColor,hoverLabelColor,hoverBackgroundColor,hoverBorderColor,borderThickness,borderRadius,animationSpeed,dotSize,dotSpacing,paddingX,paddingY,link,onClick,style,animateOnHover,showBorderOn}=props;const[isHovered,setIsHovered]=useState(false);const totalDashLength=dotSize+dotSpacing;const perimeter=useMemo(()=>{if(!style?.width||!style?.height)return 400;const width=typeof style.width===\"string\"?200:Number(style.width);const height=typeof style.height===\"string\"?100:Number(style.height);return 2*(width+height);},[style?.width,style?.height]);const shouldShowBorder=useMemo(()=>{if(showBorderOn===\"both\")return true;if(showBorderOn===\"normal\")return!isHovered;if(showBorderOn===\"hover\")return isHovered;return true;},[showBorderOn,isHovered]);const handleMouseEnter=useCallback(()=>{setIsHovered(true);},[]);const handleMouseLeave=useCallback(()=>{setIsHovered(false);},[]);const animationVariants=useMemo(()=>({initial:{strokeDashoffset:totalDashLength},animate:{strokeDashoffset:0},transition:{duration:animationSpeed,ease:\"linear\",repeat:Infinity}}),[totalDashLength,animationSpeed]);const shouldAnimate=useMemo(()=>{return!animateOnHover||isHovered;},[animateOnHover,isHovered]);const commonStyles={position:\"relative\",background:isHovered?hoverBackgroundColor:backgroundColor,border:\"none\",borderRadius:`${borderRadius}px`,padding:`${paddingY}px ${paddingX}px`,cursor:\"pointer\",overflow:\"hidden\",textDecoration:\"none\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",transition:\"background 0.3s ease\",...style};const content=/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"svg\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",pointerEvents:\"none\",opacity:shouldShowBorder?1:0,transition:\"opacity 0.3s ease\",willChange:\"auto\"},xmlns:\"http://www.w3.org/2000/svg\",children:/*#__PURE__*/_jsx(motion.rect,{x:borderThickness/2,y:borderThickness/2,width:`calc(100% - ${borderThickness}px)`,height:`calc(100% - ${borderThickness}px)`,rx:borderRadius,ry:borderRadius,fill:\"none\",stroke:isHovered?hoverBorderColor:borderColor,strokeWidth:borderThickness,strokeDasharray:`${dotSize} ${dotSpacing}`,strokeLinecap:\"round\",initial:animationVariants.initial,animate:shouldAnimate?animationVariants.animate:animationVariants.initial,transition:animationVariants.transition,style:{willChange:\"stroke-dashoffset\"}},`${isHovered}-${shouldAnimate}`)}),/*#__PURE__*/_jsx(\"span\",{style:{position:\"relative\",zIndex:1,color:isHovered?hoverLabelColor:labelColor,width:\"max-content\",whiteSpace:\"nowrap\",transition:\"color 0.3s ease\",...labelFont},children:label})]});if(link){return /*#__PURE__*/_jsx(\"a\",{href:link,style:commonStyles,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,children:content});}return /*#__PURE__*/_jsx(\"button\",{onClick:onClick,style:commonStyles,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,children:content});}addPropertyControls(AnimatedBorderButton,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Click Me\"},link:{type:ControlType.Link,title:\"Link\"},labelFont:{type:ControlType.Font,title:\"Label Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"16px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}},labelColor:{type:ControlType.Color,title:\"Label Color\",defaultValue:\"#FFFFFF\"},hoverLabelColor:{type:ControlType.Color,title:\"Hover Label Color\",defaultValue:\"#000000\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},hoverBackgroundColor:{type:ControlType.Color,title:\"Hover Background\",defaultValue:\"#FFFFFF\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#FFFFFF\"},hoverBorderColor:{type:ControlType.Color,title:\"Hover Border Color\",defaultValue:\"#000000\"},showBorderOn:{type:ControlType.Enum,title:\"Show Border On\",options:[\"both\",\"normal\",\"hover\"],optionTitles:[\"Both\",\"Normal\",\"Hover\"],defaultValue:\"both\",displaySegmentedControl:true},animateOnHover:{type:ControlType.Boolean,title:\"Animate on Hover\",defaultValue:false,enabledTitle:\"Hover\",disabledTitle:\"Always\"},borderThickness:{type:ControlType.Number,title:\"Border Thickness\",defaultValue:2,min:1,max:10,step:.1,unit:\"pt\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:50,step:1,unit:\"px\"},animationSpeed:{type:ControlType.Number,title:\"Animation Speed\",defaultValue:2,min:.5,max:50,step:.5,unit:\"s\"},dotSize:{type:ControlType.Number,title:\"Dot Size\",defaultValue:4,min:1,max:20,step:1,unit:\"px\"},dotSpacing:{type:ControlType.Number,title:\"Dot Spacing\",defaultValue:8,min:1,max:30,step:1,unit:\"px\"},paddingX:{type:ControlType.Number,title:\"Padding X\",defaultValue:24,min:0,max:100,step:1,unit:\"px\"},paddingY:{type:ControlType.Number,title:\"Padding Y\",defaultValue:12,min:0,max:100,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AnimatedBorderButton\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AnimatedBorderButton.map"],"mappings":"6OAIG,SAAwB,EAAqB,EAAM,CAAC,GAAK,CAAC,QAAM,YAAU,aAAW,kBAAgB,cAAY,kBAAgB,uBAAqB,mBAAiB,kBAAgB,eAAa,iBAAe,UAAQ,aAAW,WAAS,WAAS,OAAK,UAAQ,QAAM,iBAAe,gBAAc,EAAW,CAAC,EAAU,GAAcA,EAAS,GAAM,CAAO,EAAgB,EAAQ,EAA2B,MAAgB,CAAC,GAAO,OAAO,CAAC,GAAO,OAAc,IAAkJ,IAAlI,OAAO,EAAM,OAAQ,SAAS,IAAI,OAAO,EAAM,MAAM,GAAc,OAAO,EAAM,QAAS,SAAS,IAAI,OAAO,EAAM,OAAO,GAA2B,CAAC,GAAO,MAAM,GAAO,OAAO,CAAC,CAAC,IAAM,EAAiBC,MAAgB,IAAe,OAAc,GAAQ,IAAe,SAAe,CAAC,EAAa,IAAe,QAAe,EAAiB,GAAO,CAAC,EAAa,EAAU,CAAC,CAAO,EAAiBC,MAAgB,CAAC,EAAa,GAAK,EAAG,EAAE,CAAC,CAAO,EAAiBA,MAAgB,CAAC,EAAa,GAAM,EAAG,EAAE,CAAC,CAAO,EAAkBD,OAAa,CAAC,QAAQ,CAAC,iBAAiB,EAAgB,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,WAAW,CAAC,SAAS,EAAe,KAAK,SAAS,OAAO,IAAS,CAAC,EAAE,CAAC,EAAgB,EAAe,CAAC,CAAO,EAAcA,MAAmB,CAAC,GAAgB,EAAY,CAAC,EAAe,EAAU,CAAC,CAAO,EAAa,CAAC,SAAS,WAAW,WAAW,EAAU,EAAqB,EAAgB,OAAO,OAAO,aAAa,GAAG,EAAa,IAAI,QAAQ,GAAG,EAAS,KAAK,EAAS,IAAI,OAAO,UAAU,SAAS,SAAS,eAAe,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,WAAW,uBAAuB,GAAG,EAAM,CAAO,EAAqB,EAAME,EAAU,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,cAAc,OAAO,QAAQ,EAAiB,EAAE,EAAE,WAAW,oBAAoB,WAAW,OAAO,CAAC,MAAM,6BAA6B,SAAsB,EAAK,EAAO,KAAK,CAAC,EAAE,EAAgB,EAAE,EAAE,EAAgB,EAAE,MAAM,eAAe,EAAgB,KAAK,OAAO,eAAe,EAAgB,KAAK,GAAG,EAAa,GAAG,EAAa,KAAK,OAAO,OAAO,EAAU,EAAiB,EAAY,YAAY,EAAgB,gBAAgB,GAAG,EAAQ,GAAG,IAAa,cAAc,QAAQ,QAAQ,EAAkB,QAAQ,QAAQ,EAAc,EAAkB,QAAQ,EAAkB,QAAQ,WAAW,EAAkB,WAAW,MAAM,CAAC,WAAW,oBAAoB,CAAC,CAAC,GAAG,EAAU,GAAG,IAAgB,CAAC,CAAC,CAAc,EAAK,OAAO,CAAC,MAAM,CAAC,SAAS,WAAW,OAAO,EAAE,MAAM,EAAU,EAAgB,EAAW,MAAM,cAAc,WAAW,SAAS,WAAW,kBAAkB,GAAG,EAAU,CAAC,SAAS,EAAM,CAAC,CAAC,CAAC,CAAC,CAAqJ,OAAjJ,EAA0B,EAAK,IAAI,CAAC,KAAK,EAAK,MAAM,EAAa,aAAa,EAAiB,aAAa,EAAiB,SAAS,EAAQ,CAAC,CAAsB,EAAK,SAAS,CAAS,UAAQ,MAAM,EAAa,aAAa,EAAiB,aAAa,EAAiB,SAAS,EAAQ,CAAC,kBAHp2F,IAAkC,IAAoD,IAAgD,CAGguF,EAAoB,EAAqB,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,WAAW,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,CAAC,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,aAAa,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,WAAW,cAAc,UAAU,WAAW,MAAM,CAAC,CAAC,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,UAAU,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,oBAAoB,aAAa,UAAU,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,qBAAqB,CAAC,KAAK,EAAY,MAAM,MAAM,mBAAmB,aAAa,UAAU,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,UAAU,CAAC,iBAAiB,CAAC,KAAK,EAAY,MAAM,MAAM,qBAAqB,aAAa,UAAU,CAAC,aAAa,CAAC,KAAK,EAAY,KAAK,MAAM,iBAAiB,QAAQ,CAAC,OAAO,SAAS,QAAQ,CAAC,aAAa,CAAC,OAAO,SAAS,QAAQ,CAAC,aAAa,OAAO,wBAAwB,GAAK,CAAC,eAAe,CAAC,KAAK,EAAY,QAAQ,MAAM,mBAAmB,aAAa,GAAM,aAAa,QAAQ,cAAc,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAY,OAAO,MAAM,mBAAmB,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,GAAG,KAAK,KAAK,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,CAAC,eAAe,CAAC,KAAK,EAAY,OAAO,MAAM,kBAAkB,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC"}