{"version":3,"file":"FAQs.CrO2ozBg.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/eKhNemp8jw97ScQUVDtO/I7rqGC6nMwQOXZBfywfi/FAQs.js"],"sourcesContent":["// FAQ component with fully editable styles and content\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,startTransition,useRef,useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function FAQs(props){const{items=[{question:\"What is this component?\",answer:\"This is a fully customizable FAQ component that allows you to create expandable question and answer sections.\"},{question:\"How do I customize it?\",answer:\"You can customize colors, fonts, spacing, and content through the property controls panel.\"},{question:\"Can I add more questions?\",answer:\"Yes! Use the array control to add as many FAQ items as you need.\"}],backgroundColor=\"#FFFFFF\",borderColor=\"#EEEEEE\",topBorderColor=\"#EEEEEE\",bottomBorderColor=\"#EEEEEE\",leftBorderColor=\"#EEEEEE\",rightBorderColor=\"#EEEEEE\",borderRadius=8,questionFont,answerFont,questionColor=\"#000000\",answerColor=\"#666666\",iconColor=\"#CCCCCC\",hoverColor=\"#F5F5F5\",spacing=16,padding=20,answerPadding=20,allowMultiple=false,animationType=\"slide\",animationDuration=300,showTopBorder=true,showBottomBorder=true,showLeftBorder=true,showRightBorder=true}=props;const[openItems,setOpenItems]=useState(new Set);const[contentHeights,setContentHeights]=useState(new Map);const contentRefs=useRef(new Map);useEffect(()=>{const newHeights=new Map;contentRefs.current.forEach((element,index)=>{if(element){newHeights.set(index,element.scrollHeight);}});setContentHeights(newHeights);},[items,answerFont,answerPadding]);const toggleItem=index=>{startTransition(()=>{setOpenItems(prev=>{const newSet=new Set(prev);if(newSet.has(index)){newSet.delete(index);}else{if(!allowMultiple){newSet.clear();newSet.add(index);}else{newSet.add(index);}}return newSet;});});};const getAnimationStyles=(isOpen,index)=>{const duration=`${animationDuration}ms`;const height=contentHeights.get(index)||0;switch(animationType){case\"fade\":return{opacity:isOpen?1:0,maxHeight:isOpen?`${height}px`:\"0\",transition:`opacity ${duration} cubic-bezier(0.4, 0, 0.2, 1), max-height ${duration} cubic-bezier(0.4, 0, 0.2, 1)`,overflow:\"hidden\"};case\"slideAndFade\":return{opacity:isOpen?1:0,maxHeight:isOpen?`${height}px`:\"0\",transform:isOpen?\"translateY(0)\":\"translateY(-8px)\",transition:`all ${duration} cubic-bezier(0.4, 0, 0.2, 1)`,overflow:\"hidden\"};case\"slide\":default:return{maxHeight:isOpen?`${height}px`:\"0\",transition:`max-height ${duration} cubic-bezier(0.4, 0, 0.2, 1)`,overflow:\"hidden\"};}};return /*#__PURE__*/_jsx(\"div\",{style:{...props.style,width:\"100%\",display:\"flex\",flexDirection:\"column\",gap:spacing},children:items.map((item,index)=>{const isOpen=openItems.has(index);return /*#__PURE__*/_jsxs(\"div\",{style:{backgroundColor,border:`1px solid ${borderColor}`,borderTop:showTopBorder?`1px solid ${topBorderColor}`:\"none\",borderBottom:showBottomBorder?`1px solid ${bottomBorderColor}`:\"none\",borderLeft:showLeftBorder?`1px solid ${leftBorderColor}`:\"none\",borderRight:showRightBorder?`1px solid ${rightBorderColor}`:\"none\",borderRadius,overflow:\"hidden\",transition:\"all 0.2s ease\"},children:[/*#__PURE__*/_jsxs(\"button\",{onClick:()=>toggleItem(index),style:{width:\"100%\",padding,display:\"flex\",justifyContent:\"space-between\",alignItems:\"center\",background:\"transparent\",border:\"none\",cursor:\"pointer\",textAlign:\"left\",transition:\"background-color 0.2s ease\",...questionFont,color:questionColor},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=hoverColor;},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=\"transparent\";},children:[/*#__PURE__*/_jsx(\"span\",{style:{flex:1,paddingRight:16},children:item.question}),/*#__PURE__*/_jsx(\"svg\",{width:\"20\",height:\"20\",viewBox:\"0 0 24 24\",fill:\"none\",style:{transform:isOpen?\"rotate(180deg)\":\"rotate(0deg)\",transition:`transform ${animationDuration}ms ease`,flexShrink:0},children:/*#__PURE__*/_jsx(\"path\",{d:\"M6 9L12 15L18 9\",stroke:iconColor,strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})})]}),/*#__PURE__*/_jsxs(\"div\",{style:{overflow:\"hidden\",...getAnimationStyles(isOpen,index)},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                                .faq-answer a {\n                                    color: #ff4d4f !important;\n                                    text-decoration: none !important;\n                                }\n                                .faq-answer a:visited {\n                                    color: #ff4d4f !important;\n                                }\n                                .faq-answer a:hover {\n                                    text-decoration: underline !important;\n                                }\n                                `}),/*#__PURE__*/_jsx(\"div\",{ref:el=>{if(el){contentRefs.current.set(index,el);}},className:\"faq-answer\",style:{padding:answerPadding,borderTop:`1px solid ${borderColor}`,...answerFont,color:answerColor,lineHeight:\"1.5\",whiteSpace:\"pre-wrap\"},dangerouslySetInnerHTML:{__html:item.answer}})]})]},index);})});}addPropertyControls(FAQs,{items:{type:ControlType.Array,title:\"FAQ Items\",control:{type:ControlType.Object,controls:{question:{type:ControlType.String,title:\"Question\",defaultValue:\"What is your question?\"},answer:{type:ControlType.String,title:\"Answer\",defaultValue:\"This is the answer to your question.\",displayTextArea:true}}},defaultValue:[{question:\"What is this component?\",answer:\"This is a fully customizable FAQ component that allows you to create expandable question and answer sections.\"},{question:\"How do I customize it?\",answer:\"You can customize colors, fonts, spacing, and content through the property controls panel.\"},{question:\"Can I add more questions?\",answer:\"Yes! Use the array control to add as many FAQ items as you need.\"}]},animationType:{type:ControlType.Enum,title:\"Animation Type\",options:[\"slide\",\"fade\",\"slideAndFade\"],optionTitles:[\"Slide\",\"Fade\",\"Slide & Fade\"],defaultValue:\"slide\",displaySegmentedControl:true},animationDuration:{type:ControlType.Number,title:\"Animation Duration\",defaultValue:300,min:100,max:1e3,step:50,unit:\"ms\"},backgroundColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#FFFFFF\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#EEEEEE\"},topBorderColor:{type:ControlType.Color,title:\"Top Border Color\",defaultValue:\"#EEEEEE\"},bottomBorderColor:{type:ControlType.Color,title:\"Bottom Border Color\",defaultValue:\"#EEEEEE\"},leftBorderColor:{type:ControlType.Color,title:\"Left Border Color\",defaultValue:\"#EEEEEE\"},rightBorderColor:{type:ControlType.Color,title:\"Right Border Color\",defaultValue:\"#EEEEEE\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:32,unit:\"px\"},questionFont:{type:ControlType.Font,title:\"Question Font\",defaultValue:{fontSize:\"16px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},answerFont:{type:ControlType.Font,title:\"Answer Font\",defaultValue:{fontSize:\"14px\",variant:\"Regular\",letterSpacing:\"-0.01em\",lineHeight:\"1.4em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},questionColor:{type:ControlType.Color,title:\"Question Color\",defaultValue:\"#000000\"},answerColor:{type:ControlType.Color,title:\"Answer Color\",defaultValue:\"#666666\"},iconColor:{type:ControlType.Color,title:\"Icon Color\",defaultValue:\"#CCCCCC\"},hoverColor:{type:ControlType.Color,title:\"Hover Color\",defaultValue:\"#F5F5F5\"},spacing:{type:ControlType.Number,title:\"Item Spacing\",defaultValue:16,min:0,max:40,unit:\"px\"},padding:{type:ControlType.Number,title:\"Item Padding\",defaultValue:20,min:8,max:40,unit:\"px\"},answerPadding:{type:ControlType.Number,title:\"Answer Padding\",defaultValue:20,min:8,max:40,unit:\"px\"},allowMultiple:{type:ControlType.Boolean,title:\"Allow Multiple Open\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},showTopBorder:{type:ControlType.Boolean,title:\"Show Top Border\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"},showBottomBorder:{type:ControlType.Boolean,title:\"Show Bottom Border\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"},showLeftBorder:{type:ControlType.Boolean,title:\"Show Left Border\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"},showRightBorder:{type:ControlType.Boolean,title:\"Show Right Border\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FAQs\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FAQs.map"],"mappings":"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"}