{"version":3,"file":"GlassyButton.BotLROKJ.mjs","names":["useState","useCallback","x","y","useMemo"],"sources":["https:/framerusercontent.com/modules/5LgtVoWF7P3JJbAB1nnE/Y9O0QuARh4OXV1mmQLnX/GlassyButton.js"],"sourcesContent":["// GlassyButton: A glassmorphic button with animated highlight/reflection, hover effect, and configurable light direction\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useMemo,useCallback,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * GlassyButton\n *\n * @framerIntrinsicWidth 160\n * @framerIntrinsicHeight 48\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function GlassyButton(props){const{label,background,textColor,borderRadius,blur,lightDirection,font,style,link,shadowHoverColor=\"#0000002D\",shadowHoverIntensity=1}=props;const isStatic=useIsStaticRenderer();const[mouse,setMouse]=useState({x:.5,y:.5});// Light direction mapping to gradient angles and highlight positions\nconst lightMap={\"top-left\":{angle:135,x:\"10%\",y:\"10%\"},\"top\":{angle:180,x:\"50%\",y:\"8%\"},\"top-right\":{angle:225,x:\"90%\",y:\"10%\"},\"right\":{angle:270,x:\"92%\",y:\"50%\"},\"bottom-right\":{angle:315,x:\"90%\",y:\"90%\"},\"bottom\":{angle:0,x:\"50%\",y:\"92%\"},\"bottom-left\":{angle:45,x:\"10%\",y:\"90%\"},\"left\":{angle:90,x:\"8%\",y:\"50%\"}};const{angle,x,y}=lightMap[lightDirection];// Mouse move handler for light following\nconst handleMouseMove=useCallback(e=>{const rect=e.currentTarget.getBoundingClientRect();// Use pageX/pageY for better accuracy in Framer canvas\nlet clientX,clientY;if(e.touches&&e.touches.length>0){clientX=e.touches[0].clientX;clientY=e.touches[0].clientY;}else{clientX=e.clientX;clientY=e.clientY;}// Calculate mouse position relative to center for light direction\nconst x=(clientX-rect.left)/rect.width;const y=(clientY-rect.top)/rect.height;startTransition(()=>setMouse({x:Math.max(0,Math.min(1,x)),y:Math.max(0,Math.min(1,y))}));},[]);// Highlight and reflection styles\nconst highlightStyle=useMemo(()=>{// Parallax offset for highlight\n// Light follows mouse: direction is from center to mouse\nconst dx=mouse.x-.5;const dy=mouse.y-.5;const offsetX=dx*16;const offsetY=dy*16;return{position:\"absolute\",left:`calc(${x} + ${offsetX}px)`,top:`calc(${y} + ${offsetY}px)`,width:\"60%\",height:\"30%\",background:\"linear-gradient(120deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.12) 100%)\",borderRadius:\"50%\",filter:`blur(14px)`,opacity:.5,pointerEvents:\"none\",transform:`translate(-50%, -50%) scale(1)`,transition:\"all 0.32s cubic-bezier(.4,0,.2,1)\",zIndex:2};},[x,y,mouse]);const reflectionStyle=useMemo(()=>{// Parallax offset for reflection\n// Reflection follows mouse, but with smaller offset\nconst dx=mouse.x-.5;const dy=mouse.y-.5;const offsetX=dx*8;const offsetY=dy*8;return{position:\"absolute\",left:`calc(${x} + ${offsetX}px)`,top:`calc(${y} + ${offsetY}px)`,width:\"30%\",height:\"14%\",background:\"linear-gradient(120deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 100%)\",borderRadius:\"50%\",filter:`blur(7px)`,opacity:.28,pointerEvents:\"none\",transform:`translate(-50%, -50%) scale(1)`,transition:\"all 0.32s cubic-bezier(.4,0,.2,1)\",zIndex:1};},[x,y,mouse]);// Glassy background style\nconst glassStyle=useMemo(()=>({position:\"relative\",zIndex:0,width:\"100%\",height:\"100%\",borderRadius,background:`linear-gradient(${angle}deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%), ${background}`,boxShadow:\"0 6px 18px 0 rgba(0,0,0,0.10)\",backdropFilter:`blur(${blur}px) saturate(1.2)`,WebkitBackdropFilter:`blur(${blur}px) saturate(1.2)`,border:\"1.5px solid rgba(255,255,255,0.22)\",boxSizing:\"border-box\",overflow:\"hidden\",cursor:\"default\",transition:\"box-shadow 0.32s cubic-bezier(.4,0,.2,1), background 0.32s cubic-bezier(.4,0,.2,1), transform 0.32s cubic-bezier(.4,0,.2,1)\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",...style}),[angle,background,borderRadius,blur,style]);// Text style\nconst textStyle=useMemo(()=>({color:textColor,zIndex:3,userSelect:\"none\",...font,fontWeight:font?.variant===\"Bold\"?700:undefined,fontSize:font?.fontSize,letterSpacing:font?.letterSpacing,lineHeight:font?.lineHeight,textAlign:font?.textAlign,fontStyle:font?.fontStyle,fontFamily:font?.fontFamily,minWidth:\"max-content\",width:\"max-content\",pointerEvents:\"none\",transition:\"color 0.22s cubic-bezier(.4,0,.2,1)\"}),[textColor,font]);// Accessibility: role=button, tabIndex=0\nconst content=/*#__PURE__*/_jsxs(\"div\",{style:glassStyle,\"aria-label\":label,onMouseMove:isStatic?undefined:handleMouseMove,onTouchMove:isStatic?undefined:handleMouseMove,children:[/*#__PURE__*/_jsx(\"div\",{style:highlightStyle}),/*#__PURE__*/_jsx(\"div\",{style:reflectionStyle}),/*#__PURE__*/_jsx(\"span\",{style:textStyle,children:label})]});return content;}addPropertyControls(GlassyButton,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Glassy Button\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF33\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:16,min:0,max:48},blur:{type:ControlType.Number,title:\"Blur\",defaultValue:18,min:4,max:32,step:1},lightDirection:{type:ControlType.Enum,title:\"Light Dir\",options:[\"top-left\",\"top\",\"top-right\",\"right\",\"bottom-right\",\"bottom\",\"bottom-left\",\"left\"],optionTitles:[\"Top Left\",\"Top\",\"Top Right\",\"Right\",\"Bottom Right\",\"Bottom\",\"Bottom Left\",\"Left\"],defaultValue:\"top-left\",displaySegmentedControl:false},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"18px\",variant:\"Bold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\",textAlign:\"center\"}},link:{type:ControlType.Link,title:\"Button Link\",defaultValue:\"\"},// --- Hover group ---\nhoverBackground:{type:ControlType.Color,title:\"Hover BG\",defaultValue:\"#FFFFFF66\"},shadowHoverColor:{type:ControlType.Color,title:\"Hover Shadow\",defaultValue:\"#0000002D\"},shadowHoverIntensity:{type:ControlType.Number,title:\"Shadow Intensity\",defaultValue:1,min:.5,max:2.5,step:.05}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GlassyButton\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"160\",\"framerIntrinsicHeight\":\"48\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GlassyButton.map"],"mappings":"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"}