{"version":3,"file":"FAQAccordion.NvO2hG6s.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/SMreNIiVqiGWsJs4ry6T/drXwoGNnZ3bfMr5zDQEv/FAQAccordion.js"],"sourcesContent":["// Flexible FAQ accordion component with expandable/collapsible items\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion,AnimatePresence}from\"framer-motion\";/**\n * FAQ Accordion\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 400\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function FAQAccordion(props){const{items,questionFont,answerFont,questionColor,answerColor,backgroundColor,borderColor,arrowColor,borderRadius,itemSpacing,padding,allowMultipleOpen}=props;const[openItems,setOpenItems]=useState(new Set);const toggleItem=index=>{startTransition(()=>{setOpenItems(prev=>{const newSet=new Set(prev);if(newSet.has(index)){newSet.delete(index);}else{if(!allowMultipleOpen){newSet.clear();}newSet.add(index);}return newSet;});});};return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",display:\"flex\",flexDirection:\"column\",gap:itemSpacing},children:items.map((item,index)=>{const isOpen=openItems.has(index);return /*#__PURE__*/_jsxs(\"div\",{style:{backgroundColor,border:`1px solid ${borderColor}`,borderRadius,overflow:\"hidden\"},children:[/*#__PURE__*/_jsxs(\"button\",{onClick:()=>toggleItem(index),style:{width:\"100%\",display:\"flex\",justifyContent:\"space-between\",alignItems:\"center\",padding,backgroundColor:\"transparent\",border:\"none\",cursor:\"pointer\",textAlign:\"left\",gap:16},\"aria-expanded\":isOpen,children:[/*#__PURE__*/_jsx(\"h5\",{style:{margin:0,color:questionColor,flex:1,...questionFont},children:item.question}),/*#__PURE__*/_jsx(motion.svg,{width:\"24\",height:\"24\",viewBox:\"0 0 24 24\",fill:\"none\",stroke:arrowColor,strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\",animate:{rotate:isOpen?180:0},transition:{duration:.3},style:{flexShrink:0},children:/*#__PURE__*/_jsx(\"polyline\",{points:\"6 9 12 15 18 9\"})})]}),/*#__PURE__*/_jsx(AnimatePresence,{initial:false,children:isOpen&&/*#__PURE__*/_jsx(motion.div,{initial:{height:0,opacity:0},animate:{height:\"auto\",opacity:1},exit:{height:0,opacity:0},transition:{duration:.3},style:{overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"div\",{style:{padding:`0 ${padding}px ${padding}px ${padding}px`,color:answerColor,...answerFont},dangerouslySetInnerHTML:{__html:item.answer}})})})]},index);})});}addPropertyControls(FAQAccordion,{items:{type:ControlType.Array,title:\"FAQ Items\",control:{type:ControlType.Object,controls:{question:{type:ControlType.String,title:\"Question\",defaultValue:\"What is this?\"},answer:{type:ControlType.String,title:\"Answer\",defaultValue:\"This is the answer to your question.\",displayTextArea:true}}},defaultValue:[{question:\"What is Framer?\",answer:\"Framer is a powerful design and prototyping tool that allows you to create interactive designs and websites.\\n\\nLearn more at framer.com\"},{question:\"How do I get started?\",answer:\"You can get started by:\\n• Signing up for a free account\\n• Exploring the templates\\n• Following tutorials\"},{question:\"Can I use custom code?\",answer:\"Yes! Framer supports custom React components, allowing you to extend your designs with code.\"}]},questionFont:{type:ControlType.Font,title:\"Question Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"15px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}},answerFont:{type:ControlType.Font,title:\"Answer Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"15px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"}},questionColor:{type:ControlType.Color,title:\"Question Color\",defaultValue:\"#000000\"},answerColor:{type:ControlType.Color,title:\"Answer Color\",defaultValue:\"#000000\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#EEEEEE\"},arrowColor:{type:ControlType.Color,title:\"Arrow Color\",defaultValue:\"#000000\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:32,step:1,unit:\"px\"},itemSpacing:{type:ControlType.Number,title:\"Item Spacing\",defaultValue:12,min:0,max:48,step:1,unit:\"px\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:20,min:8,max:48,step:1,unit:\"px\"},allowMultipleOpen:{type:ControlType.Boolean,title:\"Multiple Open\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FAQAccordion\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"600\",\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"400\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FAQAccordion.map"],"mappings":"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"}