react-flare-accordion/dist/index.js

React Flare Accordion is a simple and customizable accordion component for React applications.

import e,{useState as t}from"react";var i="data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%227.20117%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221%22%20fill%3D%22%234945BE%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%226.3999%22%20width%3D%222.4%22%20height%3D%2216%22%20rx%3D%221%22%20transform%3D%22rotate%2890%2016%206.3999%29%22%20fill%3D%22%234945BE%22%2F%3E%3C%2Fsvg%3E";!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".accordion{font-family:Arial,sans-serif;margin:20px auto;max-width:1200px;width:100%}.accordion-item{border-bottom:1px solid #ccc}.accordion-item input{display:none}.accordion-title{cursor:pointer;display:flex;font-size:16px;gap:10px;justify-content:space-between;padding:17px 15px;transition:background .3s ease}.accordion-content{color:#555;font-size:14px;max-height:0;opacity:0;overflow:hidden;padding:0 15px;transform:scaleY(0);transform-origin:top;transition:transform .4s ease-in-out,opacity .3s ease-in-out,padding .3s ease-in-out,visibility 0s linear .4s;visibility:hidden}.accordion-item input:checked+.accordion-title+.accordion-content{max-height:1000px;opacity:1;padding:0 15px 15px;transform:scaleY(1);transition:transform .4s ease-in-out,opacity .3s ease-in-out,padding .3s ease-in-out,visibility 0s;visibility:visible}.accordion-title .icon{position:relative}.accordion-title .icon span{position:absolute;right:0;transition:all .3s ease-in-out;width:clamp(12px,2vw,16px)}.accordion-title .icon .collapse-icon{opacity:0}.accordion-title .icon .expand-icon{opacity:1}.accordion-title.rotate .icon img{transition:all .3s ease-in-out}.accordion-item input:checked+.accordion-title.rotate .icon .expand-icon{opacity:0}.accordion-item input:checked+.accordion-title.rotate .icon .collapse-icon{opacity:1;transform:rotate(45deg)}.accordion-item input:not(:checked)+.accordion-title.rotate .icon .expand-icon{opacity:1;transform:rotate(0deg)}.accordion-item input:not(:checked)+.accordion-title.rotate .icon .collapse-icon{opacity:0}.accordion-title.fade .icon img{transition:opacity .3s ease-in-out}.accordion-item input:checked+.accordion-title.fade .icon .expand-icon{opacity:1}.accordion-item input:not(:checked)+.accordion-title.fade .icon .expand-icon{opacity:0}.accordion-item input:not(:checked)+.accordion-title.fade .icon .collapse-icon{opacity:1}.accordion-title.scale .icon img{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.accordion-item input:checked+.accordion-title.scale .icon .expand-icon{opacity:1;transform:scale(1.2)}.accordion-item input:not(:checked)+.accordion-title.scale .icon .expand-icon{opacity:0;transform:scale(1)}.accordion-item input:not(:checked)+.accordion-title.scale .icon .collapse-icon{opacity:1;transform:scale(1)}");const o=t=>{let{data:i,icons:o,animation:n}=t;return e.createElement("div",{className:"react-flare-accordion"},e.createElement("section",{className:"accordion"},i.length>0?i.map(((t,i)=>e.createElement("div",{className:"accordion-item"},e.createElement("input",{type:"checkbox",id:`faq${t.id||i}`}),e.createElement("label",{htmlFor:`faq${t.id||i}`,className:`accordion-title ${n}`},e.createElement("span",null,t.title),e.createElement("span",{className:"icon"},e.createElement("span",{className:"collapse-icon"},o.collapse),e.createElement("span",{className:"expand-icon"},o.expand))),e.createElement("div",{className:"accordion-content"},e.createElement("p",null,t.content))))):e.createElement("div",null,"No Data")))},n=function(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const[c,r]=t(n),s={collapse:e.createElement("img",{src:i,alt:"collapse"}),expand:e.createElement("img",{src:i,alt:"expand"})},l={collapse:a.icons?.collapse||s.collapse,expand:a.icons?.expand||s.expand},d=a.animation||"rotate";return[()=>e.createElement(o,{data:c,icons:l,animation:d}),e=>{if(!Array.isArray(e))throw new Error("Data must be an array of objects with 'title' and 'content' properties.");if(!e.every((e=>"object"==typeof e&&"title"in e&&"content"in e)))throw new Error("Each item must be an object with 'title' and 'content' properties.");r(e)}]};export{n as default};