{"version":3,"file":"DashedBorderFrame.looA_1_j.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/ongLe7ALGPlloOLGMPyD/c6QI9AOwrkaNq4brpBWt/DashedBorderFrame.js"],"sourcesContent":["// Dashed border frame with customizable properties\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useLayoutEffect,useRef,useState}from\"react\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function DashedBorderFrame(props){const{backgroundColor,borderColor,borderWidth,dashLength,gapLength,borderRadius,borderTop,borderRight,borderBottom,borderLeft,style}=props;const containerRef=useRef(null);const[dimensions,setDimensions]=useState({width:0,height:0});useLayoutEffect(()=>{if(!containerRef.current)return;const updateDimensions=()=>{if(containerRef.current){const{width,height}=containerRef.current.getBoundingClientRect();setDimensions({width,height});}};updateDimensions();if(typeof window!==\"undefined\"){const resizeObserver=new ResizeObserver(updateDimensions);resizeObserver.observe(containerRef.current);return()=>{resizeObserver.disconnect();};}},[]);const{width,height}=dimensions;const halfBorder=borderWidth/2;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,position:\"relative\",width:\"100%\",height:\"100%\",backgroundColor,borderRadius,overflow:\"hidden\"},children:/*#__PURE__*/_jsxs(\"svg\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",pointerEvents:\"none\"},viewBox:`0 0 ${width} ${height}`,preserveAspectRatio:\"none\",children:[borderTop&&/*#__PURE__*/_jsx(\"line\",{x1:borderRadius,y1:halfBorder,x2:width-borderRadius,y2:halfBorder,stroke:borderColor,strokeWidth:borderWidth,strokeDasharray:`${dashLength} ${gapLength}`}),borderRight&&/*#__PURE__*/_jsx(\"line\",{x1:width-halfBorder,y1:borderRadius,x2:width-halfBorder,y2:height-borderRadius,stroke:borderColor,strokeWidth:borderWidth,strokeDasharray:`${dashLength} ${gapLength}`}),borderBottom&&/*#__PURE__*/_jsx(\"line\",{x1:borderRadius,y1:height-halfBorder,x2:width-borderRadius,y2:height-halfBorder,stroke:borderColor,strokeWidth:borderWidth,strokeDasharray:`${dashLength} ${gapLength}`}),borderLeft&&/*#__PURE__*/_jsx(\"line\",{x1:halfBorder,y1:borderRadius,x2:halfBorder,y2:height-borderRadius,stroke:borderColor,strokeWidth:borderWidth,strokeDasharray:`${dashLength} ${gapLength}`})]})});}addPropertyControls(DashedBorderFrame,{backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#000000\"},borderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:2,min:1,max:20,step:1,unit:\"px\"},borderTop:{type:ControlType.Boolean,title:\"Top\",defaultValue:true},borderRight:{type:ControlType.Boolean,title:\"Right\",defaultValue:true},borderBottom:{type:ControlType.Boolean,title:\"Bottom\",defaultValue:true},borderLeft:{type:ControlType.Boolean,title:\"Left\",defaultValue:true},dashLength:{type:ControlType.Number,title:\"Dash Length\",defaultValue:10,min:1,max:50,step:1,unit:\"px\"},gapLength:{type:ControlType.Number,title:\"Gap Length\",defaultValue:5,min:1,max:50,step:1,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:100,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DashedBorderFrame\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DashedBorderFrame.map"],"mappings":"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"}