{"version":3,"file":"DashedBorder.BUY39bFN.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/2y3C53pHTjnAbJ5c997H/HW9FE5dqUsj91z0XSDbO/DashedBorder.js"],"sourcesContent":["// Responsive border animation component with dashed outline that loops continuously around all edges\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useAnimation}from\"framer-motion\";/**\n * @framerIntrinsicWidth 200\n * @framerIntrinsicHeight 200\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function DashedBorder(props){const{dashThickness=2,dashColor=\"#FFFFFF\",dashLength=10,dashGap=5,animationSpeed=3}=props;const containerRef=useRef(null);const[dimensions,setDimensions]=useState({width:200,height:200});const isStatic=useIsStaticRenderer();const controls=useAnimation();// Update dimensions when container size changes\nuseEffect(()=>{if(!containerRef.current)return;const updateDimensions=()=>{if(containerRef.current){const rect=containerRef.current.getBoundingClientRect();const width=Math.max(rect.width,5);const height=Math.max(rect.height,5);startTransition(()=>{setDimensions({width,height});});}};updateDimensions();if(typeof window!==\"undefined\"){const resizeObserver=new ResizeObserver(updateDimensions);resizeObserver.observe(containerRef.current);return()=>{resizeObserver.disconnect();};}},[]);// Calculate total perimeter and dash pattern\nconst perimeter=2*(dimensions.width+dimensions.height);const dashPattern=dashLength+dashGap;const totalDashes=Math.ceil(perimeter/dashPattern);const adjustedDashLength=perimeter/totalDashes-dashGap;// Start animation when dimensions are available\nuseEffect(()=>{if(isStatic||perimeter===0)return;controls.start({strokeDashoffset:-perimeter,transition:{duration:animationSpeed,ease:\"linear\",repeat:Infinity}});},[controls,perimeter,animationSpeed,isStatic]);// Create SVG path for the border\nconst pathData=`\n        M ${dashThickness/2} ${dashThickness/2}\n        L ${dimensions.width-dashThickness/2} ${dashThickness/2}\n        L ${dimensions.width-dashThickness/2} ${dimensions.height-dashThickness/2}\n        L ${dashThickness/2} ${dimensions.height-dashThickness/2}\n        Z\n    `;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",minWidth:\"5px\",minHeight:\"5px\",position:\"relative\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"svg\",{width:\"100%\",height:\"100%\",style:{position:\"absolute\",top:0,left:0,pointerEvents:\"none\"},viewBox:`0 0 ${dimensions.width} ${dimensions.height}`,children:/*#__PURE__*/_jsx(motion.path,{d:pathData,fill:\"none\",stroke:dashColor,strokeWidth:dashThickness,strokeDasharray:`${adjustedDashLength} ${dashGap}`,strokeDashoffset:0,strokeLinecap:\"round\",strokeLinejoin:\"round\",animate:controls,initial:{strokeDashoffset:0}})})});}addPropertyControls(DashedBorder,{dashThickness:{type:ControlType.Number,title:\"Dash Thickness\",defaultValue:2,min:.1,max:20,step:.1,unit:\"px\"},dashColor:{type:ControlType.Color,title:\"Dash Color\",defaultValue:\"#FFFFFF\"},dashLength:{type:ControlType.Number,title:\"Dash Length\",defaultValue:10,min:2,max:50,step:1,unit:\"px\"},dashGap:{type:ControlType.Number,title:\"Dash Gap\",defaultValue:5,min:1,max:30,step:1,unit:\"px\"},animationSpeed:{type:ControlType.Number,title:\"Animation Speed\",defaultValue:3,min:.5,max:10,step:.1,unit:\"s\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DashedBorder\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicWidth\":\"200\",\"framerIntrinsicHeight\":\"200\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DashedBorder.map"],"mappings":"mQAMG,SAAwB,EAAa,EAAM,CAAC,GAAK,CAAC,gBAAc,EAAE,YAAU,UAAU,aAAW,GAAG,UAAQ,EAAE,iBAAe,GAAG,EAAY,EAAaA,EAAO,IAAI,EAAO,CAAC,EAAW,GAAeC,EAAS,CAAC,MAAM,IAAI,OAAO,GAAG,CAAC,EAAQ,EAAS,EAAoB,EAAQ,EAAS,EAAa,EAC3S,MAAc,CAAC,GAAG,CAAC,EAAa,QAAQ,OAAO,IAAM,MAAqB,CAAC,GAAG,EAAa,QAAQ,CAAC,IAAM,EAAK,EAAa,QAAQ,sBAAsB,EAAQ,EAAM,KAAK,IAAI,EAAK,MAAM,CAAC,EAAQ,EAAO,KAAK,IAAI,EAAK,OAAO,CAAC,EAAE,MAAoB,CAAC,EAAc,CAAC,QAAM,QAAM,CAAC,CAAE,CAAC,CAAE,CAAC,EAAqB,GAAnB,EAAiB,EAAY,IAAS,OAAY,CAAC,IAAM,EAAe,IAAI,eAAe,CAAgB,EAA+C,OAA7C,EAAe,QAAQ,EAAa,OAAO,MAAY,CAAC,EAAe,WAAW,CAAE,CAAE,CAAC,EAAE,CAAC,CAAC,EACre,IAAM,EAAU,GAAG,EAAW,MAAM,EAAW,QAAc,EAAY,EAAW,EAAiE,EAAmB,EAA1D,KAAK,KAAK,EAAU,CAA0D,EAAE,EAC9L,MAAc,CAAI,GAAU,IAAY,GAAS,EAAS,MAAM,CAAC,iBAAiB,CAAC,EAAU,WAAW,CAAC,SAAS,EAAe,KAAK,SAAS,OAAO,GAAQ,CAAC,CAAC,CAAE,EAAE,CAAC,EAAS,EAAU,EAAe,CAAQ,CAAC,EAChN,IAAM,EAAS;YACH,EAAc,EAAE,GAAG,EAAc,EAAE;YACnC,EAAW,MAAM,EAAc,EAAE,GAAG,EAAc,EAAE;YACpD,EAAW,MAAM,EAAc,EAAE,GAAG,EAAW,OAAO,EAAc,EAAE;YACtE,EAAc,EAAE,GAAG,EAAW,OAAO,EAAc,EAAE;;MAE3D,OAAoB,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,MAAM,UAAU,MAAM,SAAS,WAAW,SAAS,QAAQ,EAAE,SAAsB,EAAK,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,cAAc,MAAM,EAAE,QAAQ,OAAO,EAAW,MAAM,GAAG,EAAW,SAAS,SAAsB,EAAK,EAAO,KAAK,CAAC,EAAE,EAAS,KAAK,OAAO,OAAO,EAAU,YAAY,EAAc,gBAAgB,GAAG,EAAmB,GAAG,IAAU,iBAAiB,EAAE,cAAc,QAAQ,eAAe,QAAQ,QAAQ,EAAS,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,qBAfxjB,IAA6D,IAAwE,IAA+C,EAeqY,EAAoB,EAAa,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,IAAI,EAAE,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,eAAe,CAAC,KAAK,EAAY,OAAO,MAAM,kBAAkB,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC"}