{"version":3,"file":"PixelShiftButton.BkTCYuOT.mjs","names":["useRef","useState","_Fragment","p"],"sources":["https:/framerusercontent.com/modules/5Q3wcj0eXOQXMSVuziDL/m1TH0NEc8KY9HSqMIMcl/PixelShiftButton.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useRef,useEffect,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function PixelShiftButton(props){const{label=\"Hover Me\",href=\"\",openInNewTab=false,fillWidth=false,typography={},colors={},layout={},padding={},style}=props;// Provide explicit fallbacks to prevent undefined values when ControlType.Object passes `{}`\nconst font=typography.font||{fontFamily:\"Inter\",fontWeight:700,fontStyle:\"normal\"};const fontSize=typography.fontSize??14;const defaultBg=colors.defaultBg||\"#ffffff\";const hoverBg=colors.hoverBg||\"#000000\";const defaultTextColor=colors.defaultTextColor||\"#555555\";const hoverTextColor=colors.hoverTextColor||\"#ffffff\";const strokeColor=colors.strokeColor||\"#2563eb\";const strokeWidth=layout.strokeWidth??2;const pixelSize=layout.pixelSize??10;const borderRadius=layout.borderRadius??6;const paddingTop=padding.top??20;const paddingRight=padding.right??40;const paddingBottom=padding.bottom??20;const paddingLeft=padding.left??40;const buttonRef=useRef(null);const[grid,setGrid]=useState({width:0,height:0,pixels:[]});const[hovered,setHovered]=useState(false);// Rebuild the pixel grid whenever the button's own box changes. A fixed\n// width only changes when a control changes, but a filled button changes\n// with the container, so the measurement has to be observed rather than\n// taken once on mount.\nuseEffect(()=>{const node=buttonRef.current;if(!node)return;function rebuild(){const el=buttonRef.current;if(!el)return;const btnWidth=el.offsetWidth;const btnHeight=el.offsetHeight;if(btnWidth===0||btnHeight===0)return;const cols=Math.ceil(btnWidth/pixelSize)+4;const rows=Math.ceil(btnHeight/pixelSize)+4;const totalPixels=cols*rows;setGrid(prev=>{// Reuse the existing delays when only the count is unchanged,\n// so a resize does not restart the scatter mid-hover.\nif(prev.pixels.length===totalPixels){return{width:cols*pixelSize,height:rows*pixelSize,pixels:prev.pixels};}return{width:cols*pixelSize,height:rows*pixelSize,pixels:Array.from({length:totalPixels}).map(()=>({delay:Math.random()*250}))};});}rebuild();if(typeof ResizeObserver===\"undefined\")return;const observer=new ResizeObserver(rebuild);observer.observe(node);return()=>observer.disconnect();},[pixelSize,paddingTop,paddingRight,paddingBottom,paddingLeft,fontSize,label,fillWidth]);const fontFamily=font?.fontFamily??\"Inter\";const fontWeight=font?.fontWeight??700;const fontStyle=font?.fontStyle??\"normal\";const sharedButtonStyle={position:\"relative\",display:fillWidth?\"flex\":\"inline-flex\",alignItems:\"center\",justifyContent:\"center\",overflow:\"hidden\",cursor:href?\"pointer\":\"default\",background:\"transparent\",backgroundColor:defaultBg,border:`${strokeWidth}px solid ${strokeColor}`,borderRadius:borderRadius,paddingTop:paddingTop,paddingRight:paddingRight,paddingBottom:paddingBottom,paddingLeft:paddingLeft,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,minWidth:fillWidth?0:60,width:fillWidth?\"100%\":undefined,boxSizing:\"border-box\",transition:\"background-color 0.3s\",textDecoration:\"none\",// Framer's own sizing comes last, so setting the layer to fill on the\n// canvas still wins over everything above.\n...style};const innerBorderRadius=Math.max(0,borderRadius-strokeWidth);const inner=/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,overflow:\"hidden\",pointerEvents:\"none\",borderRadius:innerBorderRadius,zIndex:0},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:\"50%\",display:\"flex\",flexWrap:\"wrap\",transform:\"translate(-50%, -50%)\",width:grid.width?`${grid.width}px`:\"200%\",height:grid.height?`${grid.height}px`:\"200%\"},children:grid.pixels.map((p,i)=>/*#__PURE__*/_jsx(\"div\",{style:{width:`${pixelSize}px`,height:`${pixelSize}px`,backgroundColor:hoverBg,opacity:hovered?1:0,transform:\"scale(1.1)\",transition:`opacity 100ms ease-in-out ${p.delay}ms`}},i))})}),/*#__PURE__*/_jsx(\"span\",{style:{position:\"relative\",zIndex:10,pointerEvents:\"none\",color:hovered?hoverTextColor:defaultTextColor,transition:\"color 0.3s\",fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,whiteSpace:\"nowrap\"},children:label})]});const wrapperProps=href?{href:href,target:openInNewTab?\"_blank\":undefined,rel:openInNewTab?\"noopener noreferrer\":undefined,style:{...sharedButtonStyle,textDecoration:\"none\"}}:{style:{...sharedButtonStyle}};const isCanvas=RenderTarget.current()===RenderTarget.canvas;const Tag=href?\"a\":\"div\";return /*#__PURE__*/_jsx(Tag,{...wrapperProps,ref:buttonRef,onMouseEnter:()=>setHovered(true),onMouseLeave:()=>setHovered(false),onClick:e=>{// Prevent navigation in editor mode\nif(isCanvas&&href){e.preventDefault();}},children:inner});}// ── Default Props ──────────────────────────────────────────────────────────────\nPixelShiftButton.defaultProps={label:\"Hover Me\",href:\"\",openInNewTab:false,fillWidth:false,typography:{font:{fontFamily:\"Inter\",fontWeight:700,fontStyle:\"normal\"},fontSize:14},colors:{defaultBg:\"#ffffff\",hoverBg:\"#000000\",defaultTextColor:\"#555555\",hoverTextColor:\"#ffffff\",strokeColor:\"#2563eb\"},layout:{strokeWidth:2,pixelSize:10,borderRadius:6},padding:{top:20,right:40,bottom:20,left:40}};// ── Property Controls ──────────────────────────────────────────────────────────\naddPropertyControls(PixelShiftButton,{// ── Content ──────────────────────────────────────────────────────────────\nlabel:{type:ControlType.String,title:\"Label\",defaultValue:\"Hover Me\"},href:{type:ControlType.Link,title:\"Link\"},openInNewTab:{type:ControlType.Boolean,title:\"New Tab\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},fillWidth:{type:ControlType.Boolean,title:\"Fill Width\",defaultValue:false,enabledTitle:\"Fill\",disabledTitle:\"Hug\",description:\"Stretch to the container instead of hugging the label\"},// ── Groups via Objects ───────────────────────────────────────────────────\ntypography:{type:ControlType.Object,title:\"Typography\",controls:{font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultValue:{fontFamily:\"Inter\",fontWeight:700,fontStyle:\"normal\"}},fontSize:{type:ControlType.Number,title:\"Font Size\",defaultValue:14,min:8,max:64,step:1,unit:\"px\"}}},colors:{type:ControlType.Object,title:\"Colors\",controls:{defaultBg:{type:ControlType.Color,title:\"Default BG\",defaultValue:\"#ffffff\"},hoverBg:{type:ControlType.Color,title:\"Hover BG\",defaultValue:\"#000000\"},defaultTextColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#555555\"},hoverTextColor:{type:ControlType.Color,title:\"Text on Hover\",defaultValue:\"#ffffff\"},strokeColor:{type:ControlType.Color,title:\"Stroke\",defaultValue:\"#2563eb\"}}},layout:{type:ControlType.Object,title:\"Layout UI\",controls:{pixelSize:{type:ControlType.Number,title:\"Pixel Size\",defaultValue:10,min:4,max:40,step:1,unit:\"px\"},strokeWidth:{type:ControlType.Number,title:\"Stroke Width\",defaultValue:2,min:0,max:10,step:1,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:6,min:0,max:100,step:1,unit:\"px\"}}},padding:{type:ControlType.Object,title:\"Padding\",controls:{top:{type:ControlType.Number,title:\"Top\",defaultValue:20,min:0,max:100,step:1,unit:\"px\"},right:{type:ControlType.Number,title:\"Right\",defaultValue:40,min:0,max:200,step:1,unit:\"px\"},bottom:{type:ControlType.Number,title:\"Bottom\",defaultValue:20,min:0,max:100,step:1,unit:\"px\"},left:{type:ControlType.Number,title:\"Left\",defaultValue:40,min:0,max:200,step:1,unit:\"px\"}}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PixelShiftButton\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PixelShiftButton.map"],"mappings":"8MAGG,SAAwB,EAAiB,EAAM,CAAC,GAAK,CAAC,QAAM,WAAW,OAAK,GAAG,eAAa,GAAM,YAAU,GAAM,aAAW,CAAC,EAAE,SAAO,CAAC,EAAE,SAAO,CAAC,EAAE,UAAQ,CAAC,EAAE,SAAO,EACnK,EAAK,EAAW,MAAM,CAAC,WAAW,QAAQ,WAAW,IAAI,UAAU,QAAQ,EAAQ,EAAS,EAAW,UAAU,GAAS,EAAU,EAAO,WAAW,UAAgB,EAAQ,EAAO,SAAS,UAAgB,EAAiB,EAAO,kBAAkB,UAAgB,EAAe,EAAO,gBAAgB,UAAgB,EAAY,EAAO,aAAa,UAAgB,EAAY,EAAO,aAAa,EAAQ,EAAU,EAAO,WAAW,GAAS,EAAa,EAAO,cAAc,EAAQ,EAAW,EAAQ,KAAK,GAAS,EAAa,EAAQ,OAAO,GAAS,EAAc,EAAQ,QAAQ,GAAS,EAAY,EAAQ,MAAM,GAAS,EAAUA,EAAO,IAAI,EAAO,CAAC,EAAK,GAASC,EAAS,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAO,CAAC,EAAQ,GAAYA,EAAS,EAAK,EAIrvB,MAAc,CAAC,IAAM,EAAK,EAAU,QAAQ,GAAG,CAAC,EAAK,OAAO,SAAS,GAAS,CAAC,IAAM,EAAG,EAAU,QAAQ,GAAG,CAAC,EAAG,OAAO,IAAM,EAAS,EAAG,YAAkB,EAAU,EAAG,aAAa,GAAG,IAAW,GAAG,IAAY,EAAE,OAAO,IAAM,EAAK,KAAK,KAAK,EAAS,CAAS,EAAE,EAAQ,EAAK,KAAK,KAAK,EAAU,CAAS,EAAE,EAAQ,EAAY,EAAK,EAAK,EAAQ,GAEpV,EAAK,OAAO,SAAS,EAAmB,CAAC,MAAM,EAAK,EAAU,OAAO,EAAK,EAAU,OAAO,EAAK,MAAM,EAAS,CAAC,MAAM,EAAK,EAAU,OAAO,EAAK,EAAU,OAAO,MAAM,KAAK,CAAC,OAAO,CAAW,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,KAAK,OAAO,EAAE,GAAG,EAAE,CAAC,CAAG,CAAE,CAAW,GAAV,EAAQ,EAAK,OAAO,eAAiB,IAAY,OAAO,IAAM,EAAS,IAAI,eAAe,CAAO,EAAyB,OAAvB,EAAS,QAAQ,CAAI,MAAY,EAAS,WAAW,CAAE,EAAE,CAAC,EAAU,EAAW,EAAa,EAAc,EAAY,EAAS,EAAM,CAAS,CAAC,EAAE,IAAM,EAAW,GAAM,YAAY,QAAc,EAAW,GAAM,YAAY,IAAU,EAAU,GAAM,WAAW,SAAe,EAAkB,CAAC,SAAS,WAAW,QAAQ,EAAU,OAAO,cAAc,WAAW,SAAS,eAAe,SAAS,SAAS,SAAS,OAAO,EAAK,UAAU,UAAU,WAAW,cAAc,gBAAgB,EAAU,OAAO,GAAG,EAAY,WAAW,IAA2B,eAAwB,aAAwB,eAA2B,gBAA0B,cAAuB,aAAoB,WAAoB,aAAqB,YAAU,SAAS,EAAU,EAAE,GAAG,MAAM,EAAU,OAAO,IAAA,GAAU,UAAU,aAAa,WAAW,wBAAwB,eAAe,OAEtsC,GAAG,CAAK,EAAqE,EAAmB,EAAMC,EAAU,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,SAAS,SAAS,cAAc,OAAO,aAA5L,KAAK,IAAI,EAAE,EAAa,CAAiM,EAAE,OAAO,CAAC,EAAE,SAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,MAAM,KAAK,MAAM,QAAQ,OAAO,SAAS,OAAO,UAAU,wBAAwB,MAAM,EAAK,MAAM,GAAG,EAAK,MAAM,IAAI,OAAO,OAAO,EAAK,OAAO,GAAG,EAAK,OAAO,IAAI,MAAM,EAAE,SAAS,EAAK,OAAO,KAAK,EAAE,IAAiB,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,EAAU,IAAI,OAAO,GAAG,EAAU,IAAI,gBAAgB,EAAQ,QAAQ,KAAY,UAAU,aAAa,WAAW,6BAA6BC,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAe,EAAK,OAAO,CAAC,MAAM,CAAC,SAAS,WAAW,OAAO,GAAG,cAAc,OAAO,MAAM,EAAQ,EAAe,EAAiB,WAAW,aAAwB,aAAoB,WAAoB,aAAqB,YAAU,WAAW,QAAQ,EAAE,SAAS,CAAK,CAAC,CAAC,CAAC,CAAC,EAAQ,EAAa,EAAK,CAAM,OAAK,OAAO,EAAa,SAAS,IAAA,GAAU,IAAI,EAAa,sBAAsB,IAAA,GAAU,MAAM,CAAC,GAAG,EAAkB,eAAe,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAiB,CAAC,EAAQ,EAAS,EAAa,QAAQ,IAAI,EAAa,OAAgC,OAAoB,EAAnC,EAAK,IAAI,MAAmC,CAAC,GAAG,EAAa,IAAI,EAAU,iBAAiB,EAAW,EAAI,EAAE,iBAAiB,EAAW,EAAK,EAAE,QAAQ,GAAG,CACn6C,GAAU,GAAM,EAAE,eAAe,CAAG,EAAE,SAAS,CAAK,CAAC,CAAE,iBAboB,IAA6C,IAAiE,EAc5L,EAAiB,aAAa,CAAC,MAAM,WAAW,KAAK,GAAG,aAAa,GAAM,UAAU,GAAM,WAAW,CAAC,KAAK,CAAC,WAAW,QAAQ,WAAW,IAAI,UAAU,QAAQ,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,UAAU,UAAU,QAAQ,UAAU,iBAAiB,UAAU,eAAe,UAAU,YAAY,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,UAAU,GAAG,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,CAAC,EACvY,EAAoB,EAAiB,CACrC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,UAAU,EAAE,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,MAAM,EAAE,aAAa,CAAC,KAAK,EAAY,QAAQ,MAAM,UAAU,aAAa,GAAM,aAAa,MAAM,cAAc,IAAI,EAAE,UAAU,CAAC,KAAK,EAAY,QAAQ,MAAM,aAAa,aAAa,GAAM,aAAa,OAAO,cAAc,MAAM,YAAY,uDAAuD,EACtZ,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,SAAS,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,SAAS,WAAW,aAAa,CAAC,WAAW,QAAQ,WAAW,IAAI,UAAU,QAAQ,CAAC,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,SAAS,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,QAAQ,CAAC,KAAK,EAAY,MAAM,MAAM,WAAW,aAAa,SAAS,EAAE,iBAAiB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,eAAe,CAAC,KAAK,EAAY,MAAM,MAAM,gBAAgB,aAAa,SAAS,EAAE,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,SAAS,aAAa,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,SAAS,CAAC,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,SAAS,CAAC,IAAI,CAAC,KAAK,EAAY,OAAO,MAAM,MAAM,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC"}