versoly-ui 2.0.1 → 2.2.0

package/.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug with TSX",
+      "type": "node",
+      "request": "launch",
+      "program": "${file}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/tsx",
+      "cwd": "${workspaceRoot}",
+      "skipFiles": ["<node_internals>/**", "node_modules/**"],
+    },
+    {
+      "name": "Debug Current Test File",
+      "type": "node",
+      "request": "launch",
+      "autoAttachChildProcesses": true,
+      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+      "args": ["run", "${relativeFile}"],
+      "smartStep": true,
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+    },
+  ],
+}

package/.vscode/settings.template.json

@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "eslint.experimental.useFlatConfig": true,
+}

package/README.md

@@ -5,15 +5,14 @@
     <a href="https://versoly.com/versoly-ui" align=""><h1>Versoly UI</h1></a>
     <p>Tailwind CSS components library based on Bootstrap, build websites without reinventing the wheel.</p>
 
-
 <p>
     <a href="https://discord.versoly.com"><img src="https://flat.badgen.net/badge/icon/discord?icon=discord&label" alt="Discord"></a>
     <a href="https://versoly.com/versoly-ui/getting-started/license/"><img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese"></a>
     <a href="https://bundlephobia.com/result?p=versoly-ui">
         <img src="https://flat.badgen.net/bundlephobia/minzip/versoly-ui?icon=packagephobia&label&color=blue&cache=10800" alt="gzip bundle size">
     </a>
-    <a href="https://unpkg.com/versoly-ui@2.0.1/dist/versoly-ui.js">
-        <img src="https://flat.badgen.net/badgesize/brotli/https://unpkg.com/versoly-ui@2.0.1/dist/versoly-ui.js?icon=jsdelivr&label&color=blue&cache=10800" alt="brotli bundle size">
+    <a href="https://unpkg.com/versoly-ui@2.1.1/dist/versoly-ui.js">
+        <img src="https://flat.badgen.net/badgesize/brotli/https://unpkg.com/versoly-ui@2.1.1/dist/versoly-ui.js?icon=jsdelivr&label&color=blue&cache=10800" alt="brotli bundle size">
     </a>
 </p>
 </div>
@@ -28,7 +27,29 @@ For full documentation, visit [versoly.com/versoly-ui](https://versoly.com/verso
 
 Versoly UI is an open source components library built on Tailwind CSS and based on Bootstrap classes and components. Websites usually always include a small number of the same components such as buttons, cards and navbars. Versoly UI provides these components similar to Bootstrap and allows for developers to easily swap styling between projects without the manual work.
 
-To view all the components go to [versoly.com/versoly-ui/components/alert](https://versoly.com/versoly-ui/components/alert).
+- **Components**
+    - [Accordion](https://versoly.com/versoly-ui/components/accordion)
+    - [Alert](https://versoly.com/versoly-ui/components/alert)
+    - [Badge](https://versoly.com/versoly-ui/components/badge)
+    - [Button](https://versoly.com/versoly-ui/components/button)
+    - [Button Group](https://versoly.com/versoly-ui/components/button-group)
+    - [Card](https://versoly.com/versoly-ui/components/card)
+    - [Footer](https://versoly.com/versoly-ui/components/footer)
+    - [Icon](https://versoly.com/versoly-ui/components/icon)
+    - [Modal](https://versoly.com/versoly-ui/components/modal)
+    - [Navbar](https://versoly.com/versoly-ui/components/navbar)
+    - [Pagination](https://versoly.com/versoly-ui/components/pagination)
+    - [Parallax](https://versoly.com/versoly-ui/components/parallax)
+    - [Progress](https://versoly.com/versoly-ui/components/progress)
+    - [Tab](https://versoly.com/versoly-ui/components/tab)
+    - [Table](https://versoly.com/versoly-ui/components/table)
+
+- **Forms**
+    - [Inputs](https://versoly.com/versoly-ui/forms/inputs)
+    - [Select](https://versoly.com/versoly-ui/forms/select)
+    - [Checkbox](https://versoly.com/versoly-ui/forms/checkbox)
+    - [Radio](https://versoly.com/versoly-ui/forms/radio)
+    - [Layout](https://versoly.com/versoly-ui/forms/layout)
 
 ## Getting started
 

package/dist/versoly-ui.iife.js

@@ -0,0 +1,12 @@
+(function(){let e=e=>document.querySelector(e),t=(e,t=document)=>Array.from(t.querySelectorAll(e)),n=t=>{let n=t.dataset.target;return n?e(n):null},r=e=>{let t=window.getComputedStyle(e).getPropertyValue(`transition-duration`);return t?parseInt(t.replace(`s`,``))*1e3+1:0},i=e=>e.getAttribute(`aria-expanded`)===`true`,a=(e,t,n)=>{t.forEach(t=>{e.addEventListener(t,n)})},o=e=>{document.addEventListener(`keydown`,t=>{t.key===`Escape`&&e()})},s=(e,n,r)=>()=>t(e).forEach(e=>{e.addEventListener(n,()=>r(e))}),c=()=>window.addEventListener(`resize`,()=>{t(`[data-toggle="collapse"]`).forEach(e=>{let t=n(e);t&&(e.setAttribute(`aria-expanded`,`false`),t.classList.remove(`show`),t.classList.remove(`block`),t.style.height=`auto`,t.style.overflow=``)})}),l=t=>new Promise(n=>{if(e(t))return n(e(t));let r=new MutationObserver(()=>{e(t)&&(n(e(t)),r.disconnect())});r.observe(document.body,{childList:!0,subtree:!0})}),u=e=>{let t=e.dataset.options;if(!t)return{};try{return JSON.parse(t.replaceAll(`'`,`"`))}catch(e){return{}}},d=e=>{let n=`[data-toggle="${e}"]`;return t(n)};function f(e){"@babel/helpers - typeof";return f=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},f(e)}function p(e,t){if(f(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(f(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function m(e){var t=p(e,`string`);return f(t)==`symbol`?t:t+``}function h(e,t,n){return(t=m(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function _(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?g(Object(n),!0).forEach(function(t){h(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}let v=(e,t,n)=>{t.style.overflow=`hidden`,t.style.height=`0`,e.setAttribute(`aria-expanded`,`true`),t.classList.add(`block`),t.classList.add(`show`),t.classList.remove(`hidden`),window.setTimeout(()=>{t.style.height=`${t.scrollHeight}px`},33),window.setTimeout(()=>{t.style.overflow=``},n)},y=(e,t,n)=>{t.style.overflow=`hidden`,t.style.height=`0`,e.setAttribute(`aria-expanded`,`false`),t.classList.remove(`show`),window.setTimeout(()=>{t.classList.remove(`block`),t.classList.add(`hidden`)},n)},b=e=>{let{min:n,max:o}=_({min:0,max:null},u(e)),s=o===null,c=t(`.accordion-item [aria-expanded]`,e).reduce((e,t)=>{let n=t.closest(`.accordion-item`),r=n==null?void 0:n.querySelector(`.accordion-collapse`);return n&&r instanceof HTMLElement&&e.push({trigger:t,target:r}),e},[]),l=()=>c.filter(({trigger:e})=>i(e)).length,d=({trigger:e,target:t})=>{let a=i(e),o=r(t);s===!1&&l()===n&&a||(a||v(e,t,o),s===!1?c.forEach(t=>{!a&&t.trigger===e||y(t.trigger,t.target,o)}):a&&y(e,t,o))};c.forEach(e=>{a(e.trigger,[`click`],()=>d(e))}),n===1&&l()===0&&c.length>0&&c[0].trigger.click()},x=()=>{t(`.accordion-header[data-toggle=accordion]`).forEach(e=>{console.log(e);let t=e.closest(`.accordion`);if(t){t.setAttribute(`data-toggle`,`accordion`),e.hasAttribute(`data-parent`)&&!t.hasAttribute(`data-options`)&&t.setAttribute(`data-options`,`{'min': 1, 'max': 1}`);return}e.removeAttribute(`data-toggle`)}),d(`accordion`).forEach(b)},S=s(`[data-dismiss]`,`click`,e=>{let t=n(e);t||(t=e.closest(`.${e.getAttribute(`data-dismiss`)}`)),t&&(t.classList.add(`opacity-0`),setTimeout(()=>t.remove(),r(t)))}),C=s(`[data-toggle="collapse"]`,`click`,e=>{let t=n(e);if(!t)return;let i=r(t);if(t.style.overflow=`hidden`,t.style.height=`0px`,e.getAttribute(`aria-expanded`)===`true`){e.setAttribute(`aria-expanded`,`false`),t.classList.remove(`show`),window.setTimeout(()=>t.classList.remove(`block`),i);return}e.setAttribute(`aria-expanded`,`true`),t.classList.add(`block`),t.classList.add(`show`),window.setTimeout(()=>{t.querySelectorAll(`.dropdown-menu`).forEach(e=>e.classList.add(`hidden`));let e=t.scrollHeight;t.querySelectorAll(`.dropdown-menu`).forEach(e=>e.classList.remove(`hidden`)),t.style.height=`${e}px`},32),window.setTimeout(()=>t.style.overflow=``,i)}),w=e=>{let{computePosition:t,shift:n,offset:r}=window.FloatingUIDOM,i=e.nextElementSibling,s=e.parentElement;if(!i||!s||!(i instanceof HTMLElement)||!(s instanceof HTMLElement))return;let c=u(e),l=[r(6),n({padding:5})];function d(){t(e,i,{placement:c.placement||`bottom`,middleware:l}).then(({x:e,y:t})=>{Object.assign(i.style,{left:`${e}px`,top:`${t}px`})})}let f=()=>{i.style.display=`block`,window.requestAnimationFrame(()=>{i.classList.add(`opacity-100`,`visible`)}),d()},p=()=>{i.style.display=``,i.classList.remove(`opacity-100`,`visible`)};s.addEventListener(`focusout`,e=>{e!=null&&e.relatedTarget&&(s.contains(e.relatedTarget)||!document.hasFocus()||p())}),a(e,[`click`],()=>{if(i.style.display===`block`){p();return}f()}),o(p)},T=()=>d(`dropdown`).forEach(w),E={closeButton:`fixed right-0 top-0 z-50 text-white px-5 close`},D=e=>{let{size:t,beforeShown:n,id:r,imgSrc:i,iframeSrc:a}=_({id:`v-modal`,size:void 0,beforeShown:void 0,imgSrc:void 0,iframeSrc:void 0},u(e)),s=e.dataset.html||``;i&&(s=`<img src="${i}">`),a&&(s=`<iframe allow="autoplay" class="aspect-video w-full" src="${a}" allowfullscreen="" autoplay=""></iframe>`);let c=`<div class="modal" id="${r}">
+  <div class="modal-content ${t?`modal-${t}`:``}">
+    ${s}
+  </div>
+
+  <button onclick="removeModal('${r}')" type="button" class="${E.closeButton}" data-dismiss="modal" aria-label="Close">
+    <span class="text-4xl" aria-hidden="true">&times;</span>
+  </button>
+
+  <div class="modal-bg" onclick="removeModal('${r}')"></div>
+</div>
+`;o(()=>window.removeModal(r)),document.body.style.overflow=`hidden`,document.body.insertAdjacentHTML(`beforeend`,c),l(`#${r}`).then(e=>{n&&window[n](),window.setTimeout(()=>e.classList.add(`opacity-100`),32)})},O=(e=`v-modal`)=>{let t=document.getElementById(e);t&&(t.classList.remove(`opacity-100`),window.setTimeout(()=>{t.remove(),document.body.style.overflow=``},500))};window.removeModal=O;let k=s(`[data-toggle="modal"]`,`click`,D),A=s(`[role="tab"]`,`click`,t=>{if(t.getAttribute(`aria-selected`)===`true`)return null;let n=e(`[aria-labelledby="${t.getAttribute(`aria-controls`)}"]`);if(!n)return null;let r=t.classList.value,i=t.parentNode;for(;i&&(!(i instanceof HTMLElement)||i.getAttribute(`role`)!==`tablist`);)i=i.parentNode;if(!(i instanceof HTMLElement))return null;let a=i.querySelectorAll(`[aria-selected="true"]`);if(!a||a.length===0)return null;let o=a[0].classList.value;if(i.querySelectorAll(`[role="tab"]`).forEach(e=>{e.classList=r,e.setAttribute(`aria-selected`,`false`)}),t.classList=o,t.setAttribute(`aria-selected`,`true`),n.getAttribute(`role`)===`tabcontent`){Array.from(n.children).forEach(e=>{e.getAttribute(`role`)===`tabpanel`&&e.classList.remove(`hidden`)});return}if(!n.parentNode)return null;Array.from(n.parentNode.children).forEach(e=>{e.getAttribute(`role`)===`tabpanel`&&e.classList.add(`hidden`)}),n.classList.remove(`hidden`)});(function(){window.vInitialized=!1,window.initializeVUI=()=>{window.vInitialized||(window.vInitialized=!0,x(),C(),S(),T(),k(),A(),c())},document.addEventListener(`DOMContentLoaded`,window.initializeVUI),document.readyState!==`loading`&&window.initializeVUI()})()})();

package/dist/versoly-ui.js

@@ -1,2 +1,12 @@
-var __webpack_modules__={515:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _utils__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(279);const __WEBPACK_DEFAULT_EXPORT__=function(){return document.querySelectorAll('[data-toggle="dropdown"]').forEach((function(trigger){var _window$FloatingUIDOM=window.FloatingUIDOM,computePosition=_window$FloatingUIDOM.computePosition,shift=_window$FloatingUIDOM.shift,offset=_window$FloatingUIDOM.offset,target=trigger.nextElementSibling,parent=trigger.parentElement,options=eval("("+trigger.dataset.options+")"||0)||{},middleware=[offset(6),shift({padding:5})];function update(){computePosition(trigger,target,{placement:options.placement||"bottom",middleware}).then((function(e){var t=e.x,o=e.y;Object.assign(target.style,{left:"".concat(t,"px"),top:"".concat(o,"px")})}))}var show=function(){target.style.display="block",requestAnimationFrame((function(){target.classList.add("opacity-100","visible")})),update()},hide=function(){target.style.display="",target.classList.remove("opacity-100","visible")},toggle=function(){"block"!==target.style.display?show():hide()};parent.addEventListener("focusout",(function(e){!parent.contains(e.relatedTarget)&&document.hasFocus()&&hide()})),(0,_utils__WEBPACK_IMPORTED_MODULE_0__.yw)(trigger,["click"],toggle),(0,_utils__WEBPACK_IMPORTED_MODULE_0__.VM)(hide)}))}},279:(e,t,o)=>{o.d(t,{U9:()=>r,g9:()=>n,yw:()=>i,VM:()=>a,vj:()=>c,wI:()=>l,br:()=>s,Di:()=>d});var r=function(e){return e.getAttribute("data-target")&&document.getElementById(e.getAttribute("data-target").replace("#",""))},n=function(e){return 1e3*window.getComputedStyle(e).getPropertyValue("transition-duration").replace("s","")+1},i=function(e,t,o){t.forEach((function(t){e.addEventListener(t,o)}))},a=function(e){document.addEventListener("keydown",(function(t){"Escape"===t.key&&e()}))},c=function(e,t,o){return function(){return document.querySelectorAll(e).forEach((function(e){e.addEventListener(t,(function(){return o(e)}))}))}},l=function(){return window.addEventListener("resize",(function(){document.querySelectorAll('[data-toggle="collapse"]').forEach((function(e){var t=r(e);t&&(e.setAttribute("aria-expanded","false"),t.classList.remove("show"),t.classList.remove("block"),t.style.height="auto",t.style.overflow="")}))}))},s=function(e){var t=document;return new Promise((function(o){if(t.querySelector(e))return o(t.querySelector(e));var r=new MutationObserver((function(n){t.querySelector(e)&&(o(t.querySelector(e)),r.disconnect())}));r.observe(t.body,{childList:!0,subtree:!0})}))},d=function(e){var t=e.dataset.options;return t?JSON.parse(t.replaceAll("'",'"')):{}}}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var o=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](o,o.exports,__webpack_require__),o.exports}__webpack_require__.d=(e,t)=>{for(var o in t)__webpack_require__.o(t,o)&&!__webpack_require__.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};(()=>{var e=__webpack_require__(279);const t=(0,e.vj)('[data-toggle="accordion"]',"click",(function(t){var o=t.closest(".accordion-item").querySelector(".accordion-collapse"),r=(0,e.g9)(o);if(o.style.overflow="hidden",o.style.height=0,"true"===t.getAttribute("aria-expanded"))return t.setAttribute("aria-expanded","false"),o.classList.remove("show"),void window.setTimeout((function(){o.classList.remove("block"),o.classList.add("hidden")}),r);t.setAttribute("aria-expanded","true"),o.classList.add("block"),o.classList.add("show"),o.classList.remove("hidden"),window.setTimeout((function(){o.style.height=o.scrollHeight+"px"}),33),window.setTimeout((function(){o.style.overflow=""}),r)}));const o=(0,e.vj)("[data-dismiss]","click",(function(t){var o=(0,e.U9)(t);o||(o=t.closest(".".concat(t.getAttribute("data-dismiss")))),o.classList.add("opacity-0"),setTimeout((function(){return o.remove()}),(0,e.g9)(o))}));const r=(0,e.vj)('[data-toggle="collapse"]',"click",(function(t){var o=(0,e.U9)(t);if(o){var r=(0,e.g9)(o);if(o.style.overflow="hidden",o.style.height=0,"true"===t.getAttribute("aria-expanded"))return t.setAttribute("aria-expanded","false"),o.classList.remove("show"),void window.setTimeout((function(){return o.classList.remove("block")}),r);t.setAttribute("aria-expanded","true"),o.classList.add("block"),o.classList.add("show"),window.setTimeout((function(){o.querySelectorAll(".dropdown-menu").forEach((function(e){return e.classList.add("hidden")}));var e=o.scrollHeight;o.querySelectorAll(".dropdown-menu").forEach((function(e){return e.classList.remove("hidden")})),o.style.height=e+"px"}),32),window.setTimeout((function(){return o.style.overflow=""}),r)}}));var n=__webpack_require__(515),i="fixed right-0 top-0 z-50 text-white px-5 close";window.removeModal=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"v-modal",t=document.getElementById(e);t.classList.remove("opacity-100"),window.setTimeout((function(){t.remove(),document.body.style.overflow=""}),500)};const a=(0,e.vj)('[data-toggle="modal"]',"click",(function(t){var o=(0,e.Di)(t),r=o.size,n=o.beforeShown,a=o.id||"v-modal",c=t.dataset.html||"";o.imgSrc&&(c='<img src="'.concat(o.imgSrc,'">')),o.iframeSrc&&(c='<iframe allow="autoplay" class="aspect-video w-full" src="'.concat(o.iframeSrc,'" allowfullscreen="" autoplay=""></iframe>'));var l='<div class="modal" id="'.concat(a,'">\n  <div class="modal-content ').concat(r?"modal-".concat(r):"",'">\n    ').concat(c,"\n  </div>\n\n  <button onclick=\"removeModal('").concat(a,'\')" type="button" class="').concat(i,'" data-dismiss="modal" aria-label="Close">\n    <span class="text-4xl" aria-hidden="true">&times;</span>\n  </button>\n\n  <div class="modal-bg" onclick="removeModal(\'').concat(a,"')\"></div>\n</div>\n");document.addEventListener("keydown",(function(e){return 27==e.keyCode&&window.removeModal(a)})),document.body.style.overflow="hidden",document.body.insertAdjacentHTML("beforeend",l),(0,e.br)("#"+a).then((function(e){n&&window[n](),window.setTimeout((function(){return e.classList.add("opacity-100")}),32)}))}));function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,r=new Array(t);o<t;o++)r[o]=e[o];return r}function l(e){return function(e){if(Array.isArray(e))return c(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return c(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?c(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}const s=(0,e.vj)('[role="tab"]',"click",(function(e){if("true"===e.getAttribute("aria-selected"))return null;var t=document.querySelector('[aria-labelledby="'.concat(e.getAttribute("aria-controls"),'"]'));if(!t)return null;for(var o=e.classList.value,r=e.parentNode;r&&"tablist"!==r.getAttribute("role");)r=r.parentNode;var n=r.querySelectorAll('[aria-selected="true"]');if(!n||0===n.length)return null;var i=n[0].classList.value;r.querySelectorAll('[role="tab"]').forEach((function(e){e.classList=o,e.setAttribute("aria-selected","false")})),e.classList=i,e.setAttribute("aria-selected","true"),"tabcontent"!==t.getAttribute("role")?(l(t.parentNode.children).forEach((function(e){"tabpanel"===e.getAttribute("role")&&e.classList.add("hidden")})),t.classList.remove("hidden")):l(t.children).forEach((function(e){"tabpanel"===e.getAttribute("role")&&e.classList.remove("hidden")}))}));window.vInitialized=!1,window.initializeVUI=function(){window.vInitialized||(window.vInitialized=!0,t(),r(),o(),(0,n.Z)(),a(),s(),(0,e.wI)())},document.addEventListener("DOMContentLoaded",initializeVUI),"loading"!==document.readyState&&initializeVUI()})();
-//# sourceMappingURL=versoly-ui.js.map
+const e=e=>document.querySelector(e),t=(e,t=document)=>Array.from(t.querySelectorAll(e)),n=t=>{let n=t.dataset.target;return n?e(n):null},r=e=>{let t=window.getComputedStyle(e).getPropertyValue(`transition-duration`);return t?parseInt(t.replace(`s`,``))*1e3+1:0},i=e=>e.getAttribute(`aria-expanded`)===`true`,a=(e,t,n)=>{t.forEach(t=>{e.addEventListener(t,n)})},o=e=>{document.addEventListener(`keydown`,t=>{t.key===`Escape`&&e()})},s=(e,n,r)=>()=>t(e).forEach(e=>{e.addEventListener(n,()=>r(e))}),c=()=>window.addEventListener(`resize`,()=>{t(`[data-toggle="collapse"]`).forEach(e=>{let t=n(e);t&&(e.setAttribute(`aria-expanded`,`false`),t.classList.remove(`show`),t.classList.remove(`block`),t.style.height=`auto`,t.style.overflow=``)})}),l=t=>new Promise(n=>{if(e(t))return n(e(t));let r=new MutationObserver(()=>{e(t)&&(n(e(t)),r.disconnect())});r.observe(document.body,{childList:!0,subtree:!0})}),u=e=>{let t=e.dataset.options;if(!t)return{};try{return JSON.parse(t.replaceAll(`'`,`"`))}catch(e){return{}}},d=e=>{let n=`[data-toggle="${e}"]`;return t(n)};function f(e){"@babel/helpers - typeof";return f=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},f(e)}function p(e,t){if(f(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(f(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function m(e){var t=p(e,`string`);return f(t)==`symbol`?t:t+``}function h(e,t,n){return(t=m(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function _(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?g(Object(n),!0).forEach(function(t){h(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}const v=(e,t,n)=>{t.style.overflow=`hidden`,t.style.height=`0`,e.setAttribute(`aria-expanded`,`true`),t.classList.add(`block`),t.classList.add(`show`),t.classList.remove(`hidden`),window.setTimeout(()=>{t.style.height=`${t.scrollHeight}px`},33),window.setTimeout(()=>{t.style.overflow=``},n)},y=(e,t,n)=>{t.style.overflow=`hidden`,t.style.height=`0`,e.setAttribute(`aria-expanded`,`false`),t.classList.remove(`show`),window.setTimeout(()=>{t.classList.remove(`block`),t.classList.add(`hidden`)},n)},b=e=>{let{min:n,max:o}=_({min:0,max:null},u(e)),s=o===null,c=t(`.accordion-item [aria-expanded]`,e).reduce((e,t)=>{let n=t.closest(`.accordion-item`),r=n==null?void 0:n.querySelector(`.accordion-collapse`);return n&&r instanceof HTMLElement&&e.push({trigger:t,target:r}),e},[]),l=()=>c.filter(({trigger:e})=>i(e)).length,d=({trigger:e,target:t})=>{let a=i(e),o=r(t);s===!1&&l()===n&&a||(a||v(e,t,o),s===!1?c.forEach(t=>{!a&&t.trigger===e||y(t.trigger,t.target,o)}):a&&y(e,t,o))};c.forEach(e=>{a(e.trigger,[`click`],()=>d(e))}),n===1&&l()===0&&c.length>0&&c[0].trigger.click()},x=()=>{t(`.accordion-header[data-toggle=accordion]`).forEach(e=>{console.log(e);let t=e.closest(`.accordion`);if(t){t.setAttribute(`data-toggle`,`accordion`),e.hasAttribute(`data-parent`)&&!t.hasAttribute(`data-options`)&&t.setAttribute(`data-options`,`{'min': 1, 'max': 1}`);return}e.removeAttribute(`data-toggle`)}),d(`accordion`).forEach(b)},S=e=>{let t=n(e);t||(t=e.closest(`.${e.getAttribute(`data-dismiss`)}`)),t&&(t.classList.add(`opacity-0`),setTimeout(()=>t.remove(),r(t)))},C=s(`[data-dismiss]`,`click`,S),w=e=>{let t=n(e);if(!t)return;let i=r(t);if(t.style.overflow=`hidden`,t.style.height=`0px`,e.getAttribute(`aria-expanded`)===`true`){e.setAttribute(`aria-expanded`,`false`),t.classList.remove(`show`),window.setTimeout(()=>t.classList.remove(`block`),i);return}e.setAttribute(`aria-expanded`,`true`),t.classList.add(`block`),t.classList.add(`show`),window.setTimeout(()=>{t.querySelectorAll(`.dropdown-menu`).forEach(e=>e.classList.add(`hidden`));let e=t.scrollHeight;t.querySelectorAll(`.dropdown-menu`).forEach(e=>e.classList.remove(`hidden`)),t.style.height=`${e}px`},32),window.setTimeout(()=>t.style.overflow=``,i)},T=s(`[data-toggle="collapse"]`,`click`,w),E=e=>{let{computePosition:t,shift:n,offset:r}=window.FloatingUIDOM,i=e.nextElementSibling,s=e.parentElement;if(!i||!s||!(i instanceof HTMLElement)||!(s instanceof HTMLElement))return;let c=u(e),l=[r(6),n({padding:5})];function d(){t(e,i,{placement:c.placement||`bottom`,middleware:l}).then(({x:e,y:t})=>{Object.assign(i.style,{left:`${e}px`,top:`${t}px`})})}let f=()=>{i.style.display=`block`,window.requestAnimationFrame(()=>{i.classList.add(`opacity-100`,`visible`)}),d()},p=()=>{i.style.display=``,i.classList.remove(`opacity-100`,`visible`)};s.addEventListener(`focusout`,e=>{e!=null&&e.relatedTarget&&(s.contains(e.relatedTarget)||!document.hasFocus()||p())}),a(e,[`click`],()=>{if(i.style.display===`block`){p();return}f()}),o(p)},D=()=>d(`dropdown`).forEach(E),O={closeButton:`fixed right-0 top-0 z-50 text-white px-5 close`},k=e=>{let{size:t,beforeShown:n,id:r,imgSrc:i,iframeSrc:a}=_({id:`v-modal`,size:void 0,beforeShown:void 0,imgSrc:void 0,iframeSrc:void 0},u(e)),s=e.dataset.html||``;i&&(s=`<img src="${i}">`),a&&(s=`<iframe allow="autoplay" class="aspect-video w-full" src="${a}" allowfullscreen="" autoplay=""></iframe>`);let c=`<div class="modal" id="${r}">
+  <div class="modal-content ${t?`modal-${t}`:``}">
+    ${s}
+  </div>
+
+  <button onclick="removeModal('${r}')" type="button" class="${O.closeButton}" data-dismiss="modal" aria-label="Close">
+    <span class="text-4xl" aria-hidden="true">&times;</span>
+  </button>
+
+  <div class="modal-bg" onclick="removeModal('${r}')"></div>
+</div>
+`;o(()=>window.removeModal(r)),document.body.style.overflow=`hidden`,document.body.insertAdjacentHTML(`beforeend`,c),l(`#${r}`).then(e=>{n&&window[n](),window.setTimeout(()=>e.classList.add(`opacity-100`),32)})},A=(e=`v-modal`)=>{let t=document.getElementById(e);t&&(t.classList.remove(`opacity-100`),window.setTimeout(()=>{t.remove(),document.body.style.overflow=``},500))};window.removeModal=A;const j=s(`[data-toggle="modal"]`,`click`,k),M=t=>{if(t.getAttribute(`aria-selected`)===`true`)return null;let n=e(`[aria-labelledby="${t.getAttribute(`aria-controls`)}"]`);if(!n)return null;let r=t.classList.value,i=t.parentNode;for(;i&&(!(i instanceof HTMLElement)||i.getAttribute(`role`)!==`tablist`);)i=i.parentNode;if(!(i instanceof HTMLElement))return null;let a=i.querySelectorAll(`[aria-selected="true"]`);if(!a||a.length===0)return null;let o=a[0].classList.value;if(i.querySelectorAll(`[role="tab"]`).forEach(e=>{e.classList=r,e.setAttribute(`aria-selected`,`false`)}),t.classList=o,t.setAttribute(`aria-selected`,`true`),n.getAttribute(`role`)===`tabcontent`){Array.from(n.children).forEach(e=>{e.getAttribute(`role`)===`tabpanel`&&e.classList.remove(`hidden`)});return}if(!n.parentNode)return null;Array.from(n.parentNode.children).forEach(e=>{e.getAttribute(`role`)===`tabpanel`&&e.classList.add(`hidden`)}),n.classList.remove(`hidden`)},N=s(`[role="tab"]`,`click`,M);(function(){window.vInitialized=!1,window.initializeVUI=()=>{window.vInitialized||(window.vInitialized=!0,x(),T(),C(),D(),j(),N(),c())},document.addEventListener(`DOMContentLoaded`,window.initializeVUI),document.readyState!==`loading`&&window.initializeVUI()})();

package/dist/versoly-ui.mjs

@@ -0,0 +1,12 @@
+const e=e=>document.querySelector(e),t=(e,t=document)=>Array.from(t.querySelectorAll(e)),n=t=>{let n=t.dataset.target;return n?e(n):null},r=e=>{let t=window.getComputedStyle(e).getPropertyValue(`transition-duration`);return t?parseInt(t.replace(`s`,``))*1e3+1:0},i=e=>e.getAttribute(`aria-expanded`)===`true`,a=(e,t,n)=>{t.forEach(t=>{e.addEventListener(t,n)})},o=e=>{document.addEventListener(`keydown`,t=>{t.key===`Escape`&&e()})},s=(e,n,r)=>()=>t(e).forEach(e=>{e.addEventListener(n,()=>r(e))}),c=()=>window.addEventListener(`resize`,()=>{t(`[data-toggle="collapse"]`).forEach(e=>{let t=n(e);t&&(e.setAttribute(`aria-expanded`,`false`),t.classList.remove(`show`),t.classList.remove(`block`),t.style.height=`auto`,t.style.overflow=``)})}),l=t=>new Promise(n=>{if(e(t))return n(e(t));let r=new MutationObserver(()=>{e(t)&&(n(e(t)),r.disconnect())});r.observe(document.body,{childList:!0,subtree:!0})}),u=e=>{let t=e.dataset.options;if(!t)return{};try{return JSON.parse(t.replaceAll(`'`,`"`))}catch{return{}}},d=e=>{let n=`[data-toggle="${e}"]`;return t(n)},f=(e,t,n)=>{t.style.overflow=`hidden`,t.style.height=`0`,e.setAttribute(`aria-expanded`,`true`),t.classList.add(`block`),t.classList.add(`show`),t.classList.remove(`hidden`),window.setTimeout(()=>{t.style.height=`${t.scrollHeight}px`},33),window.setTimeout(()=>{t.style.overflow=``},n)},p=(e,t,n)=>{t.style.overflow=`hidden`,t.style.height=`0`,e.setAttribute(`aria-expanded`,`false`),t.classList.remove(`show`),window.setTimeout(()=>{t.classList.remove(`block`),t.classList.add(`hidden`)},n)},m=e=>{let{min:n,max:o}={min:0,max:null,...u(e)},s=o===null,c=t(`.accordion-item [aria-expanded]`,e).reduce((e,t)=>{let n=t.closest(`.accordion-item`),r=n?.querySelector(`.accordion-collapse`);return n&&r instanceof HTMLElement&&e.push({trigger:t,target:r}),e},[]),l=()=>c.filter(({trigger:e})=>i(e)).length,d=({trigger:e,target:t})=>{let a=i(e),o=r(t);s===!1&&l()===n&&a||(a||f(e,t,o),s===!1?c.forEach(t=>{!a&&t.trigger===e||p(t.trigger,t.target,o)}):a&&p(e,t,o))};c.forEach(e=>{a(e.trigger,[`click`],()=>d(e))}),n===1&&l()===0&&c.length>0&&c[0].trigger.click()},h=()=>{t(`.accordion-header[data-toggle=accordion]`).forEach(e=>{console.log(e);let t=e.closest(`.accordion`);if(t){t.setAttribute(`data-toggle`,`accordion`),e.hasAttribute(`data-parent`)&&!t.hasAttribute(`data-options`)&&t.setAttribute(`data-options`,`{'min': 1, 'max': 1}`);return}e.removeAttribute(`data-toggle`)}),d(`accordion`).forEach(m)},g=s(`[data-dismiss]`,`click`,e=>{let t=n(e);t||=e.closest(`.${e.getAttribute(`data-dismiss`)}`),t&&(t.classList.add(`opacity-0`),setTimeout(()=>t.remove(),r(t)))}),_=s(`[data-toggle="collapse"]`,`click`,e=>{let t=n(e);if(!t)return;let i=r(t);if(t.style.overflow=`hidden`,t.style.height=`0px`,e.getAttribute(`aria-expanded`)===`true`){e.setAttribute(`aria-expanded`,`false`),t.classList.remove(`show`),window.setTimeout(()=>t.classList.remove(`block`),i);return}e.setAttribute(`aria-expanded`,`true`),t.classList.add(`block`),t.classList.add(`show`),window.setTimeout(()=>{t.querySelectorAll(`.dropdown-menu`).forEach(e=>e.classList.add(`hidden`));let e=t.scrollHeight;t.querySelectorAll(`.dropdown-menu`).forEach(e=>e.classList.remove(`hidden`)),t.style.height=`${e}px`},32),window.setTimeout(()=>t.style.overflow=``,i)}),v=e=>{let{computePosition:t,shift:n,offset:r}=window.FloatingUIDOM,i=e.nextElementSibling,s=e.parentElement;if(!i||!s||!(i instanceof HTMLElement)||!(s instanceof HTMLElement))return;let c=u(e),l=[r(6),n({padding:5})];function d(){t(e,i,{placement:c.placement||`bottom`,middleware:l}).then(({x:e,y:t})=>{Object.assign(i.style,{left:`${e}px`,top:`${t}px`})})}let f=()=>{i.style.display=`block`,window.requestAnimationFrame(()=>{i.classList.add(`opacity-100`,`visible`)}),d()},p=()=>{i.style.display=``,i.classList.remove(`opacity-100`,`visible`)};s.addEventListener(`focusout`,e=>{e?.relatedTarget&&(s.contains(e.relatedTarget)||!document.hasFocus()||p())}),a(e,[`click`],()=>{if(i.style.display===`block`){p();return}f()}),o(p)},y=()=>d(`dropdown`).forEach(v),b={closeButton:`fixed right-0 top-0 z-50 text-white px-5 close`},x=e=>{let{size:t,beforeShown:n,id:r,imgSrc:i,iframeSrc:a}={id:`v-modal`,size:void 0,beforeShown:void 0,imgSrc:void 0,iframeSrc:void 0,...u(e)},s=e.dataset.html||``;i&&(s=`<img src="${i}">`),a&&(s=`<iframe allow="autoplay" class="aspect-video w-full" src="${a}" allowfullscreen="" autoplay=""></iframe>`);let c=`<div class="modal" id="${r}">
+  <div class="modal-content ${t?`modal-${t}`:``}">
+    ${s}
+  </div>
+
+  <button onclick="removeModal('${r}')" type="button" class="${b.closeButton}" data-dismiss="modal" aria-label="Close">
+    <span class="text-4xl" aria-hidden="true">&times;</span>
+  </button>
+
+  <div class="modal-bg" onclick="removeModal('${r}')"></div>
+</div>
+`;o(()=>window.removeModal(r)),document.body.style.overflow=`hidden`,document.body.insertAdjacentHTML(`beforeend`,c),l(`#${r}`).then(e=>{n&&window[n](),window.setTimeout(()=>e.classList.add(`opacity-100`),32)})},S=(e=`v-modal`)=>{let t=document.getElementById(e);t&&(t.classList.remove(`opacity-100`),window.setTimeout(()=>{t.remove(),document.body.style.overflow=``},500))};window.removeModal=S;const C=s(`[data-toggle="modal"]`,`click`,x),w=s(`[role="tab"]`,`click`,t=>{if(t.getAttribute(`aria-selected`)===`true`)return null;let n=e(`[aria-labelledby="${t.getAttribute(`aria-controls`)}"]`);if(!n)return null;let r=t.classList.value,i=t.parentNode;for(;i&&(!(i instanceof HTMLElement)||i.getAttribute(`role`)!==`tablist`);)i=i.parentNode;if(!(i instanceof HTMLElement))return null;let a=i.querySelectorAll(`[aria-selected="true"]`);if(!a||a.length===0)return null;let o=a[0].classList.value;if(i.querySelectorAll(`[role="tab"]`).forEach(e=>{e.classList=r,e.setAttribute(`aria-selected`,`false`)}),t.classList=o,t.setAttribute(`aria-selected`,`true`),n.getAttribute(`role`)===`tabcontent`){Array.from(n.children).forEach(e=>{e.getAttribute(`role`)===`tabpanel`&&e.classList.remove(`hidden`)});return}if(!n.parentNode)return null;Array.from(n.parentNode.children).forEach(e=>{e.getAttribute(`role`)===`tabpanel`&&e.classList.add(`hidden`)}),n.classList.remove(`hidden`)});(function(){window.vInitialized=!1,window.initializeVUI=()=>{window.vInitialized||(window.vInitialized=!0,h(),_(),g(),y(),C(),w(),c())},document.addEventListener(`DOMContentLoaded`,window.initializeVUI),document.readyState!==`loading`&&window.initializeVUI()})();

package/eslint.config.ts

@@ -0,0 +1,11 @@
+import { combine, javascript, typescript, prettier } from '@kainstar/eslint-config';
+
+export default combine(
+  javascript(),
+  typescript({
+    overrides: {
+      'ts/ban-ts-comment': 'off',
+    },
+  }),
+  prettier(true),
+);

package/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Versoly UI</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style></style>
+  </head>
+
+  <body>
+    <script src="https://d1pnnwteuly8z3.cloudfront.net/libs/floating-ui/1.0.1/floating-ui.min.js"></script>
+    <script src="./dist/versoly-ui.js"></script>
+  </body>
+</html>

package/package.json

@@ -1,26 +1,27 @@
 {
   "name": "versoly-ui",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "Versoly UI - Tailwind CSS framework based on Bootstrap",
+  "author": "Versoly",
   "keywords": [
-    "versoly",
-    "versoly ui",
-    "tailwind",
     "tailwind components",
     "tailwind elements",
     "tailwind library",
     "tailwind sections",
-    "tailwind css",
     "tailwind ui",
     "ui kit",
     "bootstrap to tailwind",
-    "html",
-    "css",
-    "javascript",
     "dropdown Floating UI"
   ],
   "license": "MIT",
-  "main": "dist/versoly-ui.js",
+  "main": "./dist/versoly-ui.js",
+  "unpkg": "dist/versoly-ui.iife.js",
+  "jsdelivr": "dist/versoly-ui.iife.js",
+  "module": "./dist/versoly-ui.mjs",
+  "exports": {
+    ".": "./dist/versoly-ui.js",
+    "./package.json": "./package.json"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/versoly/versoly-ui.git"
@@ -33,31 +34,18 @@
     "Volkan Kaya <volkan@versoly.com>"
   ],
   "scripts": {
-    "start": "NODE_ENV=development && npm run start:*",
-    "build": "NODE_ENV=production && run-s build:webpack",
-    "build:webpack": "webpack --mode=production",
-    "build:js": "run-s build:webpack"
+    "dev": "vite",
+    "build": "tsdown",
+    "build:watch": "tsdown --watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.14.8",
-    "autoprefixer": "^10.3.3",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "copyfiles": "^2.4.1",
-    "core-js": "^3.8.1",
-    "file-loader": "^6.2.0",
-    "npm-run-all": "^4.1.5",
-    "source-map-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.3.1",
-    "webpack": "^5.47.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
-  },
-  "author": "Versoly",
-  "dependencies": {
-    "@floating-ui/dom": "^1.0.1"
+    "@kainstar/eslint-config": "^2.0.0",
+    "eslint": "^9.35.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "prettier": "^3.6.2",
+    "tsdown": "^0.15.1",
+    "type-fest": "^4.41.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5"
   }
 }

package/prettier.config.js

@@ -0,0 +1,20 @@
+/** @type {import('prettier').Config} */
+export default {
+  printWidth: 120,
+  singleQuote: true,
+  proseWrap: 'never',
+  overrides: [
+    {
+      files: '**/*.json',
+      options: {
+        parser: 'json-stringify',
+      },
+    },
+    {
+      files: ['.vscode/*.json', '**/tsconfig.json'],
+      options: {
+        parser: 'jsonc',
+      },
+    },
+  ],
+};

package/src/index.ts

@@ -0,0 +1,25 @@
+import { accordion, collapse, dismiss, dropdown, modal, tabs, handleResize } from './plugins/index';
+
+(function () {
+  window.vInitialized = false;
+  window.initializeVUI = () => {
+    if (window.vInitialized) {
+      return;
+    }
+
+    window.vInitialized = true;
+    accordion();
+    collapse();
+    dismiss();
+    dropdown();
+    modal();
+    tabs();
+
+    handleResize();
+  };
+
+  document.addEventListener('DOMContentLoaded', window.initializeVUI);
+  if (document.readyState !== 'loading') {
+    window.initializeVUI();
+  }
+})();

package/src/plugins/accordion.ts

@@ -0,0 +1,121 @@
+import type { IAccordionOptions } from 'src/types';
+import {
+  addEventListeners,
+  getDuration,
+  getElementsBySelectors,
+  getElementsByToggle,
+  getIsAriaExpanded,
+  parseElementOptions,
+} from '../utils/index';
+
+interface IAccordionItem {
+  trigger: HTMLElement;
+  target: HTMLElement;
+}
+
+const handleOpen = (trigger: HTMLElement, target: HTMLElement, duration: number) => {
+  target.style.overflow = 'hidden';
+  target.style.height = '0';
+
+  trigger.setAttribute('aria-expanded', 'true');
+  target.classList.add('block');
+  target.classList.add('show');
+  target.classList.remove('hidden');
+
+  window.setTimeout(() => {
+    target.style.height = `${target.scrollHeight}px`;
+  }, 33);
+
+  window.setTimeout(() => {
+    target.style.overflow = '';
+  }, duration);
+};
+
+const handleClose = (trigger: HTMLElement, target: HTMLElement, duration: number) => {
+  target.style.overflow = 'hidden';
+  target.style.height = '0';
+
+  trigger.setAttribute('aria-expanded', 'false');
+  target.classList.remove('show');
+
+  window.setTimeout(() => {
+    target.classList.remove('block');
+    target.classList.add('hidden');
+  }, duration);
+};
+
+const Accordion = (element: HTMLElement) => {
+  const options: IAccordionOptions = {
+    min: 0,
+    max: null,
+    ...parseElementOptions(element),
+  };
+  const { min, max } = options;
+
+  const canOpenMultiple = max === null;
+
+  const items: IAccordionItem[] = getElementsBySelectors('.accordion-item [aria-expanded]', element).reduce(
+    (acc: IAccordionItem[], trigger) => {
+      const item = trigger.closest('.accordion-item');
+      const target = item?.querySelector('.accordion-collapse');
+      if (item && target instanceof HTMLElement) {
+        acc.push({ trigger, target });
+      }
+      return acc;
+    },
+    [],
+  );
+
+  const getOpenCount = () => items.filter(({ trigger }) => getIsAriaExpanded(trigger)).length;
+
+  const toggle = ({ trigger, target }: IAccordionItem) => {
+    const isOpen = getIsAriaExpanded(trigger);
+    const duration = getDuration(target);
+
+    if (canOpenMultiple === false && getOpenCount() === min && isOpen) {
+      return;
+    }
+
+    if (!isOpen) {
+      handleOpen(trigger, target, duration);
+    }
+
+    if (canOpenMultiple === false) {
+      items.forEach((item) => {
+        if (!isOpen && item.trigger === trigger) {
+          return;
+        }
+        handleClose(item.trigger, item.target, duration);
+      });
+    } else if (isOpen) {
+      handleClose(trigger, target, duration);
+    }
+  };
+
+  items.forEach((item) => {
+    addEventListeners(item.trigger, ['click'], () => toggle(item));
+  });
+
+  if (min === 1 && getOpenCount() === 0 && items.length > 0) {
+    items[0].trigger.click();
+  }
+};
+
+export const accordion = () => {
+  // legacy support for accordion via data attributes on headers
+  getElementsBySelectors('.accordion-header[data-toggle=accordion]').forEach((element) => {
+    const parentAccordion = element.closest('.accordion');
+    if (parentAccordion) {
+      parentAccordion.setAttribute('data-toggle', 'accordion');
+
+      if (element.hasAttribute('data-parent') && !parentAccordion.hasAttribute('data-options')) {
+        parentAccordion.setAttribute('data-options', "{'min': 1, 'max': 1}");
+      }
+      return;
+    }
+
+    element.removeAttribute('data-toggle');
+  });
+
+  getElementsByToggle('accordion').forEach(Accordion);
+};

package/src/plugins/collapse.ts

@@ -0,0 +1,35 @@
+import { getDuration, getTarget, addEventListenerToSelector } from '../utils/index';
+
+const Collapse = (element: HTMLElement) => {
+  const target = getTarget(element);
+  if (!target) {
+    return;
+  }
+
+  const duration = getDuration(target);
+  target.style.overflow = 'hidden';
+  target.style.height = '0px';
+
+  if (element.getAttribute('aria-expanded') === 'true') {
+    element.setAttribute('aria-expanded', 'false');
+    target.classList.remove('show');
+
+    window.setTimeout(() => target.classList.remove('block'), duration);
+    return;
+  }
+
+  element.setAttribute('aria-expanded', 'true');
+  target.classList.add('block');
+  target.classList.add('show');
+
+  window.setTimeout(() => {
+    target.querySelectorAll('.dropdown-menu').forEach((m) => m.classList.add('hidden'));
+    const navHeight = target.scrollHeight;
+    target.querySelectorAll('.dropdown-menu').forEach((m) => m.classList.remove('hidden'));
+    target.style.height = `${navHeight}px`;
+  }, 32);
+
+  window.setTimeout(() => (target.style.overflow = ''), duration);
+};
+
+export const collapse = addEventListenerToSelector('[data-toggle="collapse"]', 'click', Collapse);

package/src/plugins/dismiss.ts

@@ -0,0 +1,17 @@
+import { getDuration, getTarget, addEventListenerToSelector } from '../utils/index';
+
+const Dismiss = (element: HTMLElement) => {
+  let target = getTarget(element);
+  if (!target) {
+    target = element.closest(`.${element.getAttribute('data-dismiss')}`);
+  }
+
+  if (!target) {
+    return;
+  }
+
+  target.classList.add('opacity-0');
+  setTimeout(() => target.remove(), getDuration(target));
+};
+
+export const dismiss = addEventListenerToSelector('[data-dismiss]', 'click', Dismiss);

package/src/plugins/dropdown.ts

@@ -0,0 +1,67 @@
+import { addEventListeners, addEscapeListener, getElementsByToggle, parseElementOptions } from '../utils/index';
+
+const Dropdown = (trigger: HTMLElement) => {
+  const { computePosition, shift, offset } = window.FloatingUIDOM;
+  const target = trigger.nextElementSibling as HTMLElement;
+  const parent = trigger.parentElement as HTMLElement;
+
+  if (!target || !parent || !(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
+    return;
+  }
+
+  const options = parseElementOptions(trigger);
+
+  const middleware = [
+    offset(6),
+    shift({
+      padding: 5,
+    }),
+  ];
+
+  function update() {
+    computePosition(trigger, target, {
+      placement: options.placement || 'bottom',
+      middleware,
+    }).then(({ x, y }: { x: number; y: number }) => {
+      Object.assign(target.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+
+  const show = () => {
+    target.style.display = 'block';
+    window.requestAnimationFrame(() => {
+      target.classList.add('opacity-100', 'visible');
+    });
+    update();
+  };
+
+  const hide = () => {
+    target.style.display = '';
+    target.classList.remove('opacity-100', 'visible');
+  };
+
+  const toggle = () => {
+    if (target.style.display === 'block') {
+      hide();
+      return;
+    }
+    show();
+  };
+
+  parent.addEventListener('focusout', (event) => {
+    if (!event?.relatedTarget) {
+      return;
+    }
+    if (parent.contains(event.relatedTarget as Node) || !document.hasFocus()) {
+      return;
+    }
+    hide();
+  });
+  addEventListeners(trigger, ['click'], toggle);
+  addEscapeListener(hide);
+};
+
+export const dropdown = () => getElementsByToggle('dropdown').forEach(Dropdown);

package/src/plugins/index.ts

@@ -0,0 +1,7 @@
+export { accordion } from './accordion';
+export { dismiss } from './dismiss';
+export { collapse } from './collapse';
+export { dropdown } from './dropdown';
+export { modal } from './modal';
+export { tabs } from './tabs';
+export { handleResize } from '../utils';