{"version":3,"file":"PencilUnderlineButton.d7SS77RG.mjs","names":["useState","useCallback"],"sources":["https:/framerusercontent.com/modules/kCnLG8MkAZ3mMIhEHDDC/Iv0o41QXsJrIaXCsqdwI/PencilUnderlineButton.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,startTransition,useCallback,useEffect}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useAnimationControls}from\"framer-motion\";/**\n * Pencil Underline Button\n *\n * User goal:\n * - New button component\n * - Pencil-texture underline effect on hover\n * - Underline animates from left to right\n * - Customizable font style and colors\n *\n * @framerIntrinsicWidth 160\n * @framerIntrinsicHeight 48\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function PencilUnderlineButton(props){const{label,textColor,underlineColor,underlineHoverColor,font,underlineThickness,underlineOffset,underlineRoughness,underlineDuration,style,onClick,useIcon,iconSvgCode,iconSize,iconGap,iconColor,iconPosition,link,contentAlignment,contentDistribution,truncateText}=props;const isStatic=useIsStaticRenderer();const controls=useAnimationControls();const[isHovered,setIsHovered]=useState(false);useEffect(()=>{controls.set({pathLength:1});},[controls]);const handleHoverStart=useCallback(()=>{if(isStatic)return;startTransition(()=>setIsHovered(true));controls.start({pathLength:[0,1],transition:{duration:underlineDuration,ease:[.25,.1,.25,1]}});},[controls,underlineDuration,isStatic]);const handleHoverEnd=useCallback(()=>{if(isStatic)return;startTransition(()=>setIsHovered(false));controls.start({pathLength:1,transition:{duration:underlineDuration*.7,ease:[.4,0,.2,1]}});},[controls,underlineDuration,isStatic]);const handleKeyDown=useCallback(event=>{if(!onClick)return;if(event.key===\"Enter\"||event.key===\" \"){event.preventDefault();onClick();}},[onClick]);const amplitude=Math.max(0,Math.min(underlineRoughness,12));const baseY=10;const y1=baseY-amplitude*.6;const y2=baseY+amplitude*.5;const y3=baseY-amplitude*.4;const y4=baseY+amplitude*.3;const pathD=`M0 ${baseY} C 20 ${y1}, 35 ${y2}, 50 ${baseY} S 80 ${y3}, 100 ${y4}`;const iconElement=useIcon&&iconSvgCode?/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",width:iconSize,height:iconSize,viewBox:\"0 0 24 24\",fill:\"none\",stroke:iconColor||textColor,strokeWidth:\"1.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\",\"aria-hidden\":\"true\",focusable:\"false\",dangerouslySetInnerHTML:{__html:iconSvgCode}}):null;const justifyContentForRow=contentDistribution===\"center\"?\"center\":contentDistribution===\"end\"?\"flex-end\":\"flex-start\";const alignItemsForContainer=contentAlignment===\"center\"?\"center\":contentAlignment===\"right\"?\"flex-end\":\"flex-start\";return /*#__PURE__*/_jsxs(motion.a,{style:{...style,position:\"relative\",display:\"inline-flex\",flexDirection:\"column\",alignItems:alignItemsForContainer,justifyContent:\"center\",cursor:onClick||link?\"pointer\":\"default\",color:textColor,outline:\"none\",textDecoration:\"none\",width:\"100%\"},href:link||undefined,onHoverStart:handleHoverStart,onHoverEnd:handleHoverEnd,onFocus:handleHoverStart,onBlur:handleHoverEnd,onKeyDown:handleKeyDown,onClick:onClick,tabIndex:0,role:link?\"link\":\"button\",children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"inline-flex\",flexDirection:\"row\",alignItems:\"center\",justifyContent:justifyContentForRow,gap:iconGap,...font,color:textColor,whiteSpace:\"nowrap\",width:\"100%\",minWidth:0},children:[iconPosition===\"left\"&&iconElement,/*#__PURE__*/_jsx(\"span\",{style:truncateText?{overflow:\"hidden\",textOverflow:\"ellipsis\",whiteSpace:\"nowrap\",maxWidth:\"100%\",display:\"inline-block\"}:undefined,children:label}),iconPosition===\"right\"&&iconElement]}),/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",maxWidth:\"100%\",marginTop:underlineOffset,pointerEvents:\"none\",display:\"inline-block\"},\"aria-hidden\":\"true\",children:/*#__PURE__*/_jsx(motion.svg,{width:\"100%\",height:underlineThickness*4,viewBox:\"0 0 100 20\",preserveAspectRatio:\"none\",style:{display:\"block\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(motion.path,{d:pathD,stroke:isHovered?underlineHoverColor:underlineColor,strokeWidth:underlineThickness,strokeLinecap:\"round\",strokeLinejoin:\"round\",fill:\"none\",animate:controls})})})]});}addPropertyControls(PencilUnderlineButton,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Pencil Button\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},underlineColor:{type:ControlType.Color,title:\"Underline\",defaultValue:\"#000000\"},underlineHoverColor:{type:ControlType.Color,title:\"Underline Hover\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{variant:\"Semibold\",fontSize:\"16px\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},contentAlignment:{type:ControlType.Enum,title:\"Align\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\"},contentDistribution:{type:ControlType.Enum,title:\"Distribution\",options:[\"start\",\"center\",\"end\"],optionTitles:[\"Start\",\"Center\",\"End\"],defaultValue:\"start\"},useIcon:{type:ControlType.Boolean,title:\"Icon\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},iconSvgCode:{type:ControlType.String,title:\"Icon SVG\",defaultValue:'<path d=\"M5 12h14\"/><path d=\"M13 5l7 7-7 7\"/>',displayTextArea:true,hidden:({useIcon})=>!useIcon},iconSize:{type:ControlType.Number,title:\"Icon Size\",defaultValue:18,min:8,max:48,step:1,unit:\"px\",hidden:({useIcon})=>!useIcon},iconGap:{type:ControlType.Number,title:\"Icon Gap\",defaultValue:8,min:0,max:32,step:1,unit:\"px\",hidden:({useIcon})=>!useIcon},iconColor:{type:ControlType.Color,title:\"Icon Color\",defaultValue:\"#000000\",hidden:({useIcon})=>!useIcon},iconPosition:{type:ControlType.Enum,title:\"Icon Pos\",options:[\"left\",\"right\"],optionTitles:[\"Left\",\"Right\"],defaultValue:\"left\",hidden:({useIcon})=>!useIcon},underlineThickness:{type:ControlType.Number,title:\"Thickness\",defaultValue:3,min:1,max:8,step:.5,unit:\"px\"},underlineOffset:{type:ControlType.Number,title:\"Offset\",defaultValue:4,min:0,max:24,step:1,unit:\"px\"},underlineRoughness:{type:ControlType.Number,title:\"Roughness\",defaultValue:4,min:0,max:12,step:1},underlineDuration:{type:ControlType.Number,title:\"Duration\",defaultValue:.35,min:.1,max:1.2,step:.05,unit:\"s\"},truncateText:{type:ControlType.Boolean,title:\"Truncate\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},link:{type:ControlType.Link,title:\"Link\",defaultValue:\"\"},onClick:{type:ControlType.EventHandler,title:\"On Click\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PencilUnderlineButton\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"160\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"48\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PencilUnderlineButton.map"],"mappings":"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"}