{"version":3,"file":"GradientBorder.BtOFjOxa.mjs","names":["_Fragment"],"sources":["https:/framerusercontent.com/modules/l1NS82UqUWg6hJXIe6Rt/WyTrwwHKbbvKv01ddTjB/GradientBorder.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,motion}from\"framer\";export default function GradientBorder({style,children,gradient,gradientAngle,borderRadius,borderSize,backdrop,transition,effects:{hover:hoverEffect},overflow,transparentCenter=false}){const gradientColors=gradient.map(({color,stop})=>`${color} ${stop}%`).join(\", \");const{gradientAngle:hoverGradientAngle,borderRadius:hoverBorderRadius,borderSize:hoverBorderSize}=hoverEffect.isEnabled&&hoverEffect||{};// When transparentCenter is true, we use the masked approach\nif(transparentCenter){// Container for the gradient and mask\nconst borderContainer={...style,position:\"relative\",borderRadius:`${borderRadius}px`,overflow:overflow===\"visible\"?\"visible\":\"hidden\"};// Hover styles\nconst borderContainerHover=hoverEffect.isEnabled&&{borderRadius:`${hoverBorderRadius??borderRadius}px`};// Inner container with background\nconst backgroundContainer={height:\"100%\",width:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:backdrop,borderRadius:`${borderRadius-borderSize}px`,overflow,position:\"relative\",zIndex:1};// Gradient border pseudo-element styles (will be applied via CSS)\nconst pseudoElementStyles=`\n            .gradient-border-container::before {\n                content: \"\";\n                position: absolute;\n                inset: 0;\n                border-radius: inherit;\n                padding: ${borderSize}px;\n                background: linear-gradient(${gradientAngle}deg, ${gradientColors});\n                -webkit-mask: \n                    linear-gradient(#fff 0 0) content-box, \n                    linear-gradient(#fff 0 0);\n                mask: \n                    linear-gradient(#fff 0 0) content-box, \n                    linear-gradient(#fff 0 0);\n                -webkit-mask-composite: xor;\n                mask-composite: exclude;\n                pointer-events: none;\n            }\n            \n            ${hoverEffect.isEnabled?`\n            .gradient-border-container:hover::before {\n                background: linear-gradient(${hoverGradientAngle??gradientAngle}deg, ${gradientColors});\n                padding: ${hoverBorderSize??borderSize}px;\n            }\n            `:\"\"}\n        `;return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{children:pseudoElementStyles}),/*#__PURE__*/_jsx(motion.div,{className:\"gradient-border-container\",style:borderContainer,whileHover:borderContainerHover,transition:transition,children:/*#__PURE__*/_jsx(motion.div,{style:backgroundContainer,transition:transition,children:children})})]});}else{// Original implementation for when transparentCenter is false\nconst borderContainer={...style,background:`linear-gradient(${gradientAngle}deg, ${gradientColors})`,padding:`${borderSize}px`,borderRadius,\"--inner-border-radius\":`${borderRadius-borderSize}px`,overflow:overflow===\"visible\"?\"visible\":\"hidden\"};const borderContainerHover=hoverEffect.isEnabled&&{background:`linear-gradient(${hoverGradientAngle}deg, ${gradientColors})`,padding:`${hoverBorderSize??borderSize}px`,borderTopLeftRadius:`${hoverBorderRadius??borderRadius}px`,borderTopRightRadius:`${hoverBorderRadius??borderRadius}px`,borderBottomLeftRadius:`${hoverBorderRadius??borderRadius}px`,borderBottomRightRadius:`${hoverBorderRadius??borderRadius}px`,\"--inner-border-radius\":`${(hoverBorderRadius??borderRadius)-borderSize}px`};const backgroundContainer={height:\"100%\",width:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:backdrop,borderTopLeftRadius:\"var(--inner-border-radius)\",borderTopRightRadius:\"var(--inner-border-radius)\",borderBottomLeftRadius:\"var(--inner-border-radius)\",borderBottomRightRadius:\"var(--inner-border-radius)\",overflow};return /*#__PURE__*/_jsx(motion.div,{style:borderContainer,whileHover:borderContainerHover,transition:transition,children:/*#__PURE__*/_jsx(motion.div,{style:backgroundContainer,transition:transition,children:children})});}}addPropertyControls(GradientBorder,{children:{type:ControlType.ComponentInstance,title:\"Content\"},gradient:{type:ControlType.Array,title:\"Gradient\",control:{type:ControlType.Object,title:\"Color stop\",controls:{color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#111111\"},stop:{type:ControlType.Number,title:\"Color stop\",defaultValue:0,unit:\"%\",min:0,max:100}}}},gradientAngle:{type:ControlType.Number,title:\"Gradient angle\",defaultValue:0,unit:\"deg\",min:0,max:360},borderRadius:{type:ControlType.Number,title:\"Border radius\",defaultValue:0,unit:\"px\",min:0},borderSize:{type:ControlType.Number,title:\"Border width\",defaultValue:1,unit:\"px\",min:0},backdrop:{type:ControlType.Color,title:\"Content background\",defaultValue:\"#fafafa\"},transparentCenter:{type:ControlType.Boolean,title:\"Transparent center\",defaultValue:false,description:\"Makes only the border have a gradient\"},transition:{type:ControlType.Transition,defaultValue:{type:false}},effects:{type:ControlType.Object,title:\"Effects\",controls:{hover:{type:ControlType.Object,controls:{isEnabled:{type:ControlType.Enum,title:\"Enable\",options:[false,true],optionTitles:[\"No\",\"Yes\"],defaultValue:false,displaySegmentedControl:true},gradientAngle:{type:ControlType.Number,title:\"Gradient angle\",defaultValue:0,unit:\"deg\",min:0,max:360,hidden:({isEnabled})=>!isEnabled},borderRadius:{type:ControlType.Number,title:\"Border radius\",defaultValue:0,unit:\"px\",min:0,hidden:({isEnabled})=>!isEnabled},borderSize:{type:ControlType.Number,title:\"Border width\",defaultValue:0,unit:\"px\",min:0,hidden:({isEnabled})=>!isEnabled}}}}},overflow:{type:ControlType.Enum,title:\"Overflow\",defaultValue:\"visible\",options:[\"visible\",\"hidden\",\"scroll\",\"auto\"],optionTitles:[\"Visible\",\"Hidden\",\"Scroll\",\"Auto\"]}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GradientBorder\",\"slots\":[\"children\"],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GradientBorder.map"],"mappings":"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"}