{"version":3,"file":"CyclingButton.BcZBm46q.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/VdiWO2tzRFe4mY7s8rWe/nLgELYlOzZcrCTKYRM0u/CyclingButton.js"],"sourcesContent":["// Button with cycling hover colors - each hover changes to the next color in sequence\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";function EmailIcon({size,color}){const maskId=`emailMask-${Math.random().toString(36).substr(2,9)}`;return /*#__PURE__*/_jsxs(\"svg\",{width:size,height:size,viewBox:\"0 0 24 24\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",children:[/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsxs(\"mask\",{id:maskId,children:[/*#__PURE__*/_jsx(\"rect\",{x:\"0\",y:\"0\",width:\"24\",height:\"24\",fill:\"white\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M3 7L12 13L21 7\",stroke:\"black\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})]})}),/*#__PURE__*/_jsx(\"rect\",{x:\"3\",y:\"5\",width:\"18\",height:\"14\",rx:\"2\",fill:color,mask:`url(#${maskId})`})]});}/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function CyclingButton(props){const{text,font,backgroundColor,textColor,hoverColors,borderRadius,paddingX,paddingY,backgroundBlur,showIcon,iconPosition,iconSpacing,iconSize,onTap}=props;const[currentColorIndex,setCurrentColorIndex]=useState(0);const[isHovered,setIsHovered]=useState(false);const handleMouseEnter=()=>{setIsHovered(true);startTransition(()=>{setCurrentColorIndex(Math.floor(Math.random()*hoverColors.length));});};const handleMouseLeave=()=>{setIsHovered(false);};const currentBgColor=isHovered&&hoverColors.length>0?hoverColors[currentColorIndex]:backgroundColor;const fontSize=font.fontSize||\"16px\";return /*#__PURE__*/_jsxs(\"button\",{style:{...props.style,position:\"relative\",backgroundColor:currentBgColor,color:textColor,border:\"none\",borderRadius:`${borderRadius}px`,paddingLeft:`${paddingX}px`,paddingRight:`${paddingX}px`,paddingTop:`${paddingY}px`,paddingBottom:`${paddingY}px`,cursor:\"pointer\",transition:\"background-color 0.3s ease\",backdropFilter:`blur(${backgroundBlur}px)`,WebkitBackdropFilter:`blur(${backgroundBlur}px)`,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",gap:showIcon?`${iconSpacing}px`:0,flexDirection:iconPosition===\"right\"?\"row\":\"row\",fontSize:fontSize,fontFamily:font.fontFamily,fontWeight:font.fontWeight,fontStyle:font.fontStyle,letterSpacing:font.letterSpacing,textAlign:font.textAlign},onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,onClick:onTap,children:[showIcon&&iconPosition===\"left\"&&/*#__PURE__*/_jsx(EmailIcon,{size:iconSize,color:textColor}),text,showIcon&&iconPosition===\"right\"&&/*#__PURE__*/_jsx(EmailIcon,{size:iconSize,color:textColor})]});}addPropertyControls(CyclingButton,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Hover Me\"},showIcon:{type:ControlType.Boolean,title:\"Show Icon\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},iconPosition:{type:ControlType.Enum,title:\"Icon Position\",options:[\"left\",\"right\"],optionTitles:[\"Left\",\"Right\"],defaultValue:\"right\",displaySegmentedControl:true,hidden:({showIcon})=>!showIcon},iconSpacing:{type:ControlType.Number,title:\"Icon Spacing\",defaultValue:8,min:0,max:32,step:1,unit:\"px\",hidden:({showIcon})=>!showIcon},iconSize:{type:ControlType.Number,title:\"Icon Size\",defaultValue:20,min:12,max:48,step:1,unit:\"px\",hidden:({showIcon})=>!showIcon},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"16px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"rgba(255, 255, 255, 0.1)\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\"},hoverColors:{type:ControlType.Array,title:\"Hover Colors\",control:{type:ControlType.Color},defaultValue:[\"#8855FF\",\"#FF5588\",\"#22CC66\",\"#FFBB00\"]},backgroundBlur:{type:ControlType.Number,title:\"Blur Amount\",defaultValue:10,min:0,max:50,step:1,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:8,min:0,max:50,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\"},onTap:{type:ControlType.EventHandler}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CyclingButton\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CyclingButton.map"],"mappings":"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"}