versoly-ui 2.1.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

@@ -27,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 +1,12 @@
-(function(){"use strict";const getTarget=t=>t.getAttribute("data-target")&&document.getElementById(t.getAttribute("data-target").replace("#","")),getDuration=t=>window.getComputedStyle(t).getPropertyValue("transition-duration").replace("s","")*1e3+1,addEventListeners=(t,e,s)=>{e.forEach(o=>{t.addEventListener(o,s)})},addEscapeListener=t=>{document.addEventListener("keydown",e=>{e.key==="Escape"&&t()})},addEventListenerToSelector=(t,e,s)=>()=>document.querySelectorAll(t).forEach(o=>{o.addEventListener(e,()=>s(o))}),handleResize=()=>window.addEventListener("resize",()=>{document.querySelectorAll('[data-toggle="collapse"]').forEach(t=>{let e=getTarget(t);e&&(t.setAttribute("aria-expanded","false"),e.classList.remove("show"),e.classList.remove("block"),e.style.height="auto",e.style.overflow="")})}),waitForElement=t=>{let e=document;return new Promise(s=>{if(e.querySelector(t))return s(e.querySelector(t));const o=new MutationObserver(i=>{e.querySelector(t)&&(s(e.querySelector(t)),o.disconnect())});o.observe(e.body,{childList:!0,subtree:!0})})},parseElementOptions=t=>{let e=t.dataset.options;return e?JSON.parse(e.replaceAll("'",'"')):{}},handleOpen=(t,e,s)=>{e.style.overflow="hidden",e.style.height=0,t.setAttribute("aria-expanded","true"),e.classList.add("block"),e.classList.add("show"),e.classList.remove("hidden"),window.setTimeout(()=>{e.style.height=e.scrollHeight+"px"},33),window.setTimeout(()=>{e.style.overflow=""},s)},handleClose=(t,e,s)=>{e.style.overflow="hidden",e.style.height=0,t.setAttribute("aria-expanded","false"),e.classList.remove("show"),window.setTimeout(()=>{e.classList.remove("block"),e.classList.add("hidden")},s)},Accordion=t=>{let e=t.closest(".accordion-item").querySelector(".accordion-collapse");const s=getDuration(e);if(t.getAttribute("aria-expanded")==="true"){handleClose(t,e,s);return}handleOpen(t,e,s),t.hasAttribute("data-parent")&&t.closest(".accordion").querySelectorAll(".accordion-collapse").forEach(o=>{o!==e&&handleClose(o.closest(".accordion-item").querySelector("[aria-expanded]"),o,s)})},accordion=addEventListenerToSelector('[data-toggle="accordion"]',"click",Accordion),Dismiss=t=>{let e=getTarget(t);e||(e=t.closest(".".concat(t.getAttribute("data-dismiss")))),e.classList.add("opacity-0"),setTimeout(()=>e.remove(),getDuration(e))},dismiss=addEventListenerToSelector("[data-dismiss]","click",Dismiss),Collapse=t=>{let e=getTarget(t);if(!e)return;const s=getDuration(e);if(e.style.overflow="hidden",e.style.height=0,t.getAttribute("aria-expanded")==="true"){t.setAttribute("aria-expanded","false"),e.classList.remove("show"),window.setTimeout(()=>e.classList.remove("block"),s);return}t.setAttribute("aria-expanded","true"),e.classList.add("block"),e.classList.add("show"),window.setTimeout(()=>{e.querySelectorAll(".dropdown-menu").forEach(i=>i.classList.add("hidden"));let o=e.scrollHeight;e.querySelectorAll(".dropdown-menu").forEach(i=>i.classList.remove("hidden")),e.style.height=o+"px"},32),window.setTimeout(()=>e.style.overflow="",s)},collapse=addEventListenerToSelector('[data-toggle="collapse"]',"click",Collapse),Dropdown=trigger=>{const{computePosition,shift,offset}=window.FloatingUIDOM,target=trigger.nextElementSibling,parent=trigger.parentElement,options=eval("("+trigger.dataset.options+")"||"")||{};let middleware=[offset(6),shift({padding:5})];function update(){computePosition(trigger,target,{placement:options.placement||"bottom",middleware}).then(({x:t,y:e})=>{Object.assign(target.style,{left:"".concat(t,"px"),top:"".concat(e,"px")})})}const show=()=>{target.style.display="block",requestAnimationFrame(()=>{target.classList.add("opacity-100","visible")}),update()},hide=()=>{target.style.display="",target.classList.remove("opacity-100","visible")},toggle=()=>{if(target.style.display==="block"){hide();return}show()};parent.addEventListener("focusout",t=>{parent.contains(t.relatedTarget)||!document.hasFocus()||hide()}),addEventListeners(trigger,["click"],toggle),addEscapeListener(hide)},dropdown=()=>document.querySelectorAll('[data-toggle="dropdown"]').forEach(Dropdown),defaults={closeButton:"fixed right-0 top-0 z-50 text-white px-5 close"},Modal=t=>{const e=parseElementOptions(t),{size:s,beforeShown:o}=e,i=e.id||"v-modal";let r=t.dataset.html||"";e.imgSrc&&(r='<img src="'.concat(e.imgSrc,'">')),e.iframeSrc&&(r='<iframe allow="autoplay" class="aspect-video w-full" src="'.concat(e.iframeSrc,'" allowfullscreen="" autoplay=""></iframe>'));let a='<div class="modal" id="'.concat(i,'">\n  <div class="modal-content ').concat(s?"modal-".concat(s):"",'">\n    ').concat(r,"\n  </div>\n\n  <button onclick=\"removeModal('").concat(i,'\')" type="button" class="').concat(defaults.closeButton,'" 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(i,"')\"></div>\n</div>\n");document.addEventListener("keydown",l=>l.keyCode==27&&window.removeModal(i)),document.body.style.overflow="hidden",document.body.insertAdjacentHTML("beforeend",a),waitForElement("#"+i).then(l=>{o&&window[o](),window.setTimeout(()=>l.classList.add("opacity-100"),32)})},removeModal=(t="v-modal")=>{let e=document.getElementById(t);e.classList.remove("opacity-100"),window.setTimeout(()=>{e.remove(),document.body.style.overflow=""},500)};window.removeModal=removeModal;const modal=addEventListenerToSelector('[data-toggle="modal"]',"click",Modal),Tabs=t=>{if(t.getAttribute("aria-selected")==="true")return null;let e=document.querySelector('[aria-labelledby="'.concat(t.getAttribute("aria-controls"),'"]'));if(!e)return null;let s=t.classList.value,o=t.parentNode;for(;o&&o.getAttribute("role")!=="tablist";)o=o.parentNode;let i=o.querySelectorAll('[aria-selected="true"]');if(!i||i.length===0)return null;let r=i[0].classList.value;if(o.querySelectorAll('[role="tab"]').forEach(a=>{a.classList=s,a.setAttribute("aria-selected","false")}),t.classList=r,t.setAttribute("aria-selected","true"),e.getAttribute("role")==="tabcontent"){[...e.children].forEach(a=>{a.getAttribute("role")==="tabpanel"&&a.classList.remove("hidden")});return}[...e.parentNode.children].forEach(a=>{a.getAttribute("role")==="tabpanel"&&a.classList.add("hidden")}),e.classList.remove("hidden")},tabs=addEventListenerToSelector('[role="tab"]',"click",Tabs);(function(){window.vInitialized=!1,window.initializeVUI=()=>{window.vInitialized||(window.vInitialized=!0,accordion(),collapse(),dismiss(),dropdown(),modal(),tabs(),handleResize())},document.addEventListener("DOMContentLoaded",initializeVUI),document.readyState!=="loading"&&initializeVUI()})()})();
+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

@@ -1,172 +1,12 @@
-const getTarget = (t) => t.getAttribute("data-target") && document.getElementById(t.getAttribute("data-target").replace("#", "")), getDuration = (t) => window.getComputedStyle(t).getPropertyValue("transition-duration").replace("s", "") * 1e3 + 1, addEventListeners = (t, e, s) => {
-  e.forEach((o) => {
-    t.addEventListener(o, s);
-  });
-}, addEscapeListener = (t) => {
-  document.addEventListener("keydown", (e) => {
-    e.key === "Escape" && t();
-  });
-}, addEventListenerToSelector = (t, e, s) => () => document.querySelectorAll(t).forEach((o) => {
-  o.addEventListener(e, () => s(o));
-}), handleResize = () => window.addEventListener("resize", () => {
-  document.querySelectorAll('[data-toggle="collapse"]').forEach((t) => {
-    let e = getTarget(t);
-    e && (t.setAttribute("aria-expanded", "false"), e.classList.remove("show"), e.classList.remove("block"), e.style.height = "auto", e.style.overflow = "");
-  });
-}), waitForElement = (t) => {
-  let e = document;
-  return new Promise((s) => {
-    if (e.querySelector(t))
-      return s(e.querySelector(t));
-    const o = new MutationObserver((i) => {
-      e.querySelector(t) && (s(e.querySelector(t)), o.disconnect());
-    });
-    o.observe(e.body, { childList: !0, subtree: !0 });
-  });
-}, parseElementOptions = (t) => {
-  let e = t.dataset.options;
-  return e ? JSON.parse(e.replaceAll("'", '"')) : {};
-}, handleOpen = (t, e, s) => {
-  e.style.overflow = "hidden", e.style.height = 0, t.setAttribute("aria-expanded", "true"), e.classList.add("block"), e.classList.add("show"), e.classList.remove("hidden"), window.setTimeout(() => {
-    e.style.height = e.scrollHeight + "px";
-  }, 33), window.setTimeout(() => {
-    e.style.overflow = "";
-  }, s);
-}, handleClose = (t, e, s) => {
-  e.style.overflow = "hidden", e.style.height = 0, t.setAttribute("aria-expanded", "false"), e.classList.remove("show"), window.setTimeout(() => {
-    e.classList.remove("block"), e.classList.add("hidden");
-  }, s);
-}, Accordion = (t) => {
-  let e = t.closest(".accordion-item").querySelector(".accordion-collapse");
-  const s = getDuration(e);
-  if (t.getAttribute("aria-expanded") === "true") {
-    handleClose(t, e, s);
-    return;
-  }
-  handleOpen(t, e, s), t.hasAttribute("data-parent") && t.closest(".accordion").querySelectorAll(".accordion-collapse").forEach((o) => {
-    o !== e && handleClose(
-      o.closest(".accordion-item").querySelector("[aria-expanded]"),
-      o,
-      s
-    );
-  });
-}, accordion = addEventListenerToSelector(
-  '[data-toggle="accordion"]',
-  "click",
-  Accordion
-), Dismiss = (t) => {
-  let e = getTarget(t);
-  e || (e = t.closest(".".concat(t.getAttribute("data-dismiss")))), e.classList.add("opacity-0"), setTimeout(() => e.remove(), getDuration(e));
-}, dismiss = addEventListenerToSelector(
-  "[data-dismiss]",
-  "click",
-  Dismiss
-), Collapse = (t) => {
-  let e = getTarget(t);
-  if (!e)
-    return;
-  const s = getDuration(e);
-  if (e.style.overflow = "hidden", e.style.height = 0, t.getAttribute("aria-expanded") === "true") {
-    t.setAttribute("aria-expanded", "false"), e.classList.remove("show"), window.setTimeout(() => e.classList.remove("block"), s);
-    return;
-  }
-  t.setAttribute("aria-expanded", "true"), e.classList.add("block"), e.classList.add("show"), window.setTimeout(() => {
-    e.querySelectorAll(".dropdown-menu").forEach((i) => i.classList.add("hidden"));
-    let o = e.scrollHeight;
-    e.querySelectorAll(".dropdown-menu").forEach((i) => i.classList.remove("hidden")), e.style.height = o + "px";
-  }, 32), window.setTimeout(() => e.style.overflow = "", s);
-}, collapse = addEventListenerToSelector(
-  '[data-toggle="collapse"]',
-  "click",
-  Collapse
-), Dropdown = (trigger) => {
-  const { computePosition, shift, offset } = window.FloatingUIDOM, target = trigger.nextElementSibling, parent = trigger.parentElement, options = eval("(" + trigger.dataset.options + ")" || "") || {};
-  let middleware = [
-    offset(6),
-    shift({
-      padding: 5
-    })
-  ];
-  function update() {
-    computePosition(trigger, target, {
-      placement: options.placement || "bottom",
-      middleware
-    }).then(({ x: t, y: e }) => {
-      Object.assign(target.style, {
-        left: "".concat(t, "px"),
-        top: "".concat(e, "px")
-      });
-    });
-  }
-  const show = () => {
-    target.style.display = "block", requestAnimationFrame(() => {
-      target.classList.add("opacity-100", "visible");
-    }), update();
-  }, hide = () => {
-    target.style.display = "", target.classList.remove("opacity-100", "visible");
-  }, toggle = () => {
-    if (target.style.display === "block") {
-      hide();
-      return;
-    }
-    show();
-  };
-  parent.addEventListener("focusout", (t) => {
-    parent.contains(t.relatedTarget) || !document.hasFocus() || hide();
-  }), addEventListeners(trigger, ["click"], toggle), addEscapeListener(hide);
-}, dropdown = () => document.querySelectorAll('[data-toggle="dropdown"]').forEach(Dropdown), defaults = {
-  closeButton: "fixed right-0 top-0 z-50 text-white px-5 close"
-}, Modal = (t) => {
-  const e = parseElementOptions(t), { size: s, beforeShown: o } = e, i = e.id || "v-modal";
-  let r = t.dataset.html || "";
-  e.imgSrc && (r = '<img src="'.concat(e.imgSrc, '">')), e.iframeSrc && (r = '<iframe allow="autoplay" class="aspect-video w-full" src="'.concat(e.iframeSrc, '" allowfullscreen="" autoplay=""></iframe>'));
-  let a = '<div class="modal" id="'.concat(i, '">\n  <div class="modal-content ').concat(s ? "modal-".concat(s) : "", '">\n    ').concat(r, "\n  </div>\n\n  <button onclick=\"removeModal('").concat(i, '\')" type="button" class="').concat(defaults.closeButton, '" 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(i, "')\"></div>\n</div>\n");
-  document.addEventListener(
-    "keydown",
-    (l) => l.keyCode == 27 && window.removeModal(i)
-  ), document.body.style.overflow = "hidden", document.body.insertAdjacentHTML("beforeend", a), waitForElement("#" + i).then((l) => {
-    o && window[o](), window.setTimeout(() => l.classList.add("opacity-100"), 32);
-  });
-}, removeModal = (t = "v-modal") => {
-  let e = document.getElementById(t);
-  e.classList.remove("opacity-100"), window.setTimeout(() => {
-    e.remove(), document.body.style.overflow = "";
-  }, 500);
-};
-window.removeModal = removeModal;
-const modal = addEventListenerToSelector(
-  '[data-toggle="modal"]',
-  "click",
-  Modal
-), Tabs = (t) => {
-  if (t.getAttribute("aria-selected") === "true")
-    return null;
-  let e = document.querySelector(
-    '[aria-labelledby="'.concat(t.getAttribute("aria-controls"), '"]')
-  );
-  if (!e)
-    return null;
-  let s = t.classList.value, o = t.parentNode;
-  for (; o && o.getAttribute("role") !== "tablist"; )
-    o = o.parentNode;
-  let i = o.querySelectorAll('[aria-selected="true"]');
-  if (!i || i.length === 0)
-    return null;
-  let r = i[0].classList.value;
-  if (o.querySelectorAll('[role="tab"]').forEach((a) => {
-    a.classList = s, a.setAttribute("aria-selected", "false");
-  }), t.classList = r, t.setAttribute("aria-selected", "true"), e.getAttribute("role") === "tabcontent") {
-    [...e.children].forEach((a) => {
-      a.getAttribute("role") === "tabpanel" && a.classList.remove("hidden");
-    });
-    return;
-  }
-  [...e.parentNode.children].forEach((a) => {
-    a.getAttribute("role") === "tabpanel" && a.classList.add("hidden");
-  }), e.classList.remove("hidden");
-}, tabs = addEventListenerToSelector('[role="tab"]', "click", Tabs);
-(function() {
-  window.vInitialized = !1, window.initializeVUI = () => {
-    window.vInitialized || (window.vInitialized = !0, accordion(), collapse(), dismiss(), dropdown(), modal(), tabs(), handleResize());
-  }, document.addEventListener("DOMContentLoaded", initializeVUI), document.readyState !== "loading" && initializeVUI();
-})();
+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

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -9,6 +9,7 @@
   </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,35 +1,26 @@
 {
   "name": "versoly-ui",
-  "version": "2.1.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.umd.cjs",
+  "main": "./dist/versoly-ui.js",
   "unpkg": "dist/versoly-ui.iife.js",
   "jsdelivr": "dist/versoly-ui.iife.js",
-  "module": "./dist/versoly-ui.js",
+  "module": "./dist/versoly-ui.mjs",
   "exports": {
-    ".": {
-      "import": "./dist/versoly-ui.js",
-      "require": "./dist/versoly-ui.umd.cjs"
-    }
+    ".": "./dist/versoly-ui.js",
+    "./package.json": "./package.json"
   },
   "repository": {
     "type": "git",
@@ -44,12 +35,17 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "tsdown",
+    "build:watch": "tsdown --watch"
   },
   "devDependencies": {
-    "vite": "^5.0.10"
-  },
-  "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.js → index.ts}

@@ -1,12 +1,4 @@
-import {
-  accordion,
-  collapse,
-  dismiss,
-  dropdown,
-  modal,
-  tabs,
-  handleResize,
-} from "./components";
+import { accordion, collapse, dismiss, dropdown, modal, tabs, handleResize } from './plugins/index';
 
 (function () {
   window.vInitialized = false;
@@ -26,8 +18,8 @@ import {
     handleResize();
   };
 
-  document.addEventListener("DOMContentLoaded", initializeVUI);
-  if (document.readyState !== "loading") {
-    initializeVUI();
+  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);
+};