{"version":3,"file":"GradientWordsText.vgSenfvD.mjs","names":["useState","useId","useMemo"],"sources":["https:/framerusercontent.com/modules/lDA6XX4WMWcrSyrOOjO5/MdawDMjQFiZdqBIXjfS0/GradientWordsText.js"],"sourcesContent":["// Instructions: Create a Framer component that follows the Framer component rules and achieves the user's goal.\n// User goal: Apply a gradient to specific words within a longer text.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useId,useMemo,useState,useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/** The project's own breakpoints, so this agrees with everything around it. */const TABLET=1200;const PHONE=810;function escapeRegExp(input){return input.replace(/[.*+?^${}()|[\\]\\\\]/g,\"\\\\$&\");}function isWordChar(ch){return/[A-Za-z0-9_]/.test(ch);}function boundaryOk(text,start,end){const before=start-1>=0?text[start-1]:\"\";const after=end<text.length?text[end]:\"\";const beforeOk=!before||!isWordChar(before);const afterOk=!after||!isWordChar(after);return beforeOk&&afterOk;}/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function GradientWordsText(props){const{text=\"Apply gradient to specific words within a longer text.\",// \"div\" keeps the markup this component has always emitted, so an\n// instance that never sets Tag renders exactly as before. Anything\n// else is opted into, one instance at a time.\ntag=\"div\",// Left is what it has always been, so no existing instance moves.\nalign=\"left\",alignTablet=\"auto\",alignPhone=\"auto\",highlights=[{word:\"gradient\",from:\"#8855FF\",to:\"#0099FF\",angle:90},{word:\"words\",from:\"#FF5588\",to:\"#FFBB00\",angle:90}],caseSensitive=false,matchWholeWord=true,baseTextColor=\"#000000\",fallbackHighlightColor=\"#000000\",font,highlightFont,variant=\"static\",animationDuration=3,style}=props;// STATO: Assumiamo true di default per il Server-Side Rendering\nconst[supportsGradientText,setSupportsGradientText]=useState(true);// EFFETTO: Controlliamo il reale supporto solo sul browser a componente montato\nuseEffect(()=>{const isSupported=typeof window!==\"undefined\"&&typeof CSS!==\"undefined\"&&// @ts-ignore\n(CSS.supports?.(\"-webkit-background-clip\",\"text\")||CSS.supports?.(\"background-clip\",\"text\"));if(!isSupported){setSupportsGradientText(false);}},[]);// Scoped so two of these on one page cannot share each other's rules.\nconst cls=`gwt-${useId().replace(/:/g,\"\")}`;const isFixedWidth=!!style&&style.width===\"100%\";const isFixedHeight=!!style&&style.height===\"100%\";const parts=useMemo(()=>{const clean=(highlights||[]).map((h,i)=>({...h,_i:i,word:(h?.word??\"\").toString()})).filter(h=>h.word.trim().length>0);if(!text||clean.length===0)return[{type:\"text\",value:text??\"\"}];const haystack=caseSensitive?text:text.toLowerCase();const needles=clean.map(h=>({...h,needle:caseSensitive?h.word:h.word.toLowerCase()})).sort((a,b)=>b.needle.length-a.needle.length);const out=[];let i=0;let buffer=\"\";while(i<text.length){let best=null;for(const h of needles){const needle=h.needle;if(!needle)continue;if(i+needle.length>haystack.length)continue;if(haystack.startsWith(needle,i)){const start=i;const end=i+needle.length;if(matchWholeWord&&!boundaryOk(text,start,end))continue;best={start,end,meta:h};break;}}if(!best){buffer+=text[i];i+=1;continue;}if(buffer){out.push({type:\"text\",value:buffer});buffer=\"\";}const value=text.slice(best.start,best.end);out.push({type:\"highlight\",value,meta:{word:best.meta.word,from:best.meta.from,to:best.meta.to,angle:best.meta.angle,_i:best.meta._i}});i=best.end;}if(buffer)out.push({type:\"text\",value:buffer});return out;},[text,highlights,caseSensitive,matchWholeWord]);const baseFontStyle=font??{};const effectiveHighlightFontStyle={...baseFontStyle,...highlightFont??{}};const containerStyle={position:\"relative\",width:\"100%\",...isFixedHeight?{height:\"100%\"}:{},display:\"block\",// A heading or a paragraph arrives with the browser's own margin,\n// which would move the layout the moment the tag changes. The point\n// of the tag is the outline, not the look: zeroed here, and still\n// overridable from `style` below.\nmargin:0,color:baseTextColor,...baseFontStyle,...style};/**\n     * Alignment is a class, not an inline style, and that is the whole reason\n     * it can change per breakpoint: an inline style beats a media query, so a\n     * `textAlign` written into `containerStyle` could never be overridden\n     * below 1200 or 810.\n     *\n     * Tablet and phone default to \"auto\" — they inherit whatever the width\n     * above them resolved to, which is why setting only Desktop still aligns\n     * the whole thing.\n     */const alignCss=`\n        .${cls} { text-align: ${align}; }\n        ${alignTablet!==\"auto\"?`@media (max-width: ${TABLET-1}px) { .${cls} { text-align: ${alignTablet}; } }`:\"\"}\n        ${alignPhone!==\"auto\"?`@media (max-width: ${PHONE-1}px) { .${cls} { text-align: ${alignPhone}; } }`:\"\"}\n    `;const textStyle={whiteSpace:\"pre-wrap\",wordBreak:\"break-word\",overflowWrap:\"anywhere\",...baseFontStyle,...isFixedWidth?{}:{minWidth:\"max-content\"}};const animationKeyframes=useMemo(()=>{if(variant!==\"animated\")return null;return`\n            @keyframes gradientShift {\n                0%, 100% {\n                    background-position: 0% 50%;\n                }\n                50% {\n                    background-position: 100% 50%;\n                }\n            }\n        `;},[variant]);// The element this renders as. A heading is the only thing a crawler and\n// a screen reader read as a heading — a styled div is invisible to both.\nconst Element=tag||\"div\";return /*#__PURE__*/_jsxs(Element,{className:cls,style:containerStyle,children:[/*#__PURE__*/_jsx(\"style\",{children:alignCss}),animationKeyframes&&/*#__PURE__*/_jsx(\"style\",{children:animationKeyframes}),/*#__PURE__*/_jsx(\"span\",{style:textStyle,children:parts.map((p,idx)=>{if(p.type===\"text\"){return /*#__PURE__*/_jsx(\"span\",{children:p.value},`t-${idx}`);}const from=p.meta.from||\"#8855FF\";const to=p.meta.to||\"#0099FF\";const angle=Number.isFinite(p.meta.angle)?p.meta.angle:90;const gradientStyle={...effectiveHighlightFontStyle,backgroundImage:variant===\"animated\"?`linear-gradient(${angle}deg, ${from}, ${to}, ${from}, ${to})`:`linear-gradient(${angle}deg, ${from}, ${to})`,WebkitBackgroundClip:\"text\",backgroundClip:\"text\",color:\"transparent\",WebkitTextFillColor:\"transparent\",display:\"inline\",...variant===\"animated\"?{backgroundSize:\"200% 200%\",animation:`gradientShift ${animationDuration}s ease infinite`}:{}};const fallbackStyle={...effectiveHighlightFontStyle,color:fallbackHighlightColor};return /*#__PURE__*/_jsx(\"span\",{style:supportsGradientText?gradientStyle:fallbackStyle,children:p.value},`h-${p.meta._i}-${idx}`);})})]});}addPropertyControls(GradientWordsText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Apply gradient to specific words within a longer text.\",displayTextArea:true},tag:{type:ControlType.Enum,title:\"Tag\",options:[\"div\",\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\"],optionTitles:[\"Div\",\"H1\",\"H2\",\"H3\",\"H4\",\"H5\",\"H6\",\"P\"],defaultValue:\"div\",description:\"Semantic level only — the look comes from Font below, and the browser's own heading margin is zeroed, so changing this moves nothing.\"},align:{type:ControlType.Enum,title:\"Align\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",displaySegmentedControl:true},alignTablet:{type:ControlType.Enum,title:\"Align <1200\",options:[\"auto\",\"left\",\"center\",\"right\"],optionTitles:[\"Auto\",\"Left\",\"Center\",\"Right\"],defaultValue:\"auto\",description:\"Auto keeps whatever Align says.\"},alignPhone:{type:ControlType.Enum,title:\"Align <810\",options:[\"auto\",\"left\",\"center\",\"right\"],optionTitles:[\"Auto\",\"Left\",\"Center\",\"Right\"],defaultValue:\"auto\",description:\"Auto keeps whatever the width above it resolved to.\"},variant:{type:ControlType.Enum,title:\"Variant\",options:[\"static\",\"animated\"],optionTitles:[\"Static\",\"Animated\"],defaultValue:\"static\",displaySegmentedControl:true},animationDuration:{type:ControlType.Number,title:\"Duration\",defaultValue:3,min:.5,max:10,step:.5,unit:\"s\",hidden:({variant})=>variant!==\"animated\"},highlights:{type:ControlType.Array,title:\"Highlights\",defaultValue:[{word:\"gradient\",from:\"#8855FF\",to:\"#0099FF\",angle:90},{word:\"words\",from:\"#FF5588\",to:\"#FFBB00\",angle:90}],control:{type:ControlType.Object,controls:{word:{type:ControlType.String,title:\"Word\",defaultValue:\"gradient\"},from:{type:ControlType.Color,title:\"From\",defaultValue:\"#8855FF\"},to:{type:ControlType.Color,title:\"To\",defaultValue:\"#0099FF\"},angle:{type:ControlType.Number,title:\"Angle\",defaultValue:90,min:0,max:360,step:1,unit:\"deg\"}}},maxCount:20},caseSensitive:{type:ControlType.Boolean,title:\"Case Sensitive\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},matchWholeWord:{type:ControlType.Boolean,title:\"Whole Word\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},baseTextColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},fallbackHighlightColor:{type:ControlType.Color,title:\"Fallback Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"22px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},highlightFont:{type:ControlType.Font,title:\"Highlight Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"22px\",variant:\"Bold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GradientWordsText\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GradientWordsText.map"],"mappings":"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"}