@abydahana/aksara-ui 1.1.0 → 1.1.2

package/dist/aksara.min.js

@@ -1 +1 @@
-(function(){ const registry=new Map();const instances=new Set();const focusableSelector=["a[href]","area[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","iframe","object","embed","[contenteditable]","[tabindex]:not([tabindex='-1'])"].join(",");function toElements(target){ if(!target)return[];if(typeof target==="string")return Array.from(document.querySelectorAll(target));if(target instanceof HTMLElement)return[target];if(target instanceof Element)return[target];if(target instanceof NodeList || Array.isArray(target)){ return Array.from(target).filter((item)=>item instanceof HTMLElement);} return[];} function resolveArgs(target,options,defaultSelector){ if(target && typeof target==="object" && !(target instanceof Element)&& !(target instanceof NodeList)&& !Array.isArray(target)){ const opts=target;const resolvedTarget=opts.target || opts.selector || defaultSelector;return { target:resolvedTarget,options:opts };} return { target:target || defaultSelector,options:(options || {})};} function dataName(name){ return name.replace(/[A-Z]/g,(match)=>`-${match.toLowerCase()}`);} function getData(element,component,name){ return element?.getAttribute(`data-${component}-${dataName(name)}`)??null;} function getOption(options,element,component,name,fallback){ if(options[name]!==undefined)return options[name];const value=getData(element,component,name);return value !==null?value:fallback;} function getBooleanOption(options,element,component,name,fallback){ const value=getOption(options,element,component,name,fallback);if(value==="true" || value===true)return true;if(value==="false" || value===false)return false;return Boolean(value);} function getNumberOption(options,element,component,name,fallback){ const value=getOption(options,element,component,name,fallback);const number=Number(value);return Number.isNaN(number)?fallback:number;} function clamp(value,min,max){ return Math.min(Math.max(value,min),max);} function emit(element,name,detail={}){ element.dispatchEvent(new CustomEvent(`aksara:${name}`,{ bubbles:true,detail }));} function getInstance(element,Type,options={}){ const key=Type.componentName;let map=registry.get(key);if(!map){ map=new WeakMap();registry.set(key,map);} if(!map.has(element)){ const instance=new Type(element,options);map.set(element,instance);instances.add(instance);} else if(options && Object.keys(options).length){ const instance=map.get(element);if(instance && typeof instance.updateOptions==="function"){ instance.updateOptions(options);} } return map.get(element);} function createInstanceList(instanceArray){ return new Proxy(instanceArray,{ get(target,prop){ if(prop in target){ const val=target[prop];return typeof val==="function"?val.bind(target):val;} return(...args)=>{ target.forEach((inst)=>{ const fn=inst[prop];if(typeof fn==="function"){ fn(...args);} });return createInstanceList(target);};} });} function createAll(target,Type,options={}){ const items=toElements(target);const insts=items.map((element)=>getInstance(element,Type,options));if(insts.length===1)return insts[0];return createInstanceList(insts);} class Component { element;options;cleanups;constructor(element,options={}){ this.element=element;this.options=options;this.cleanups=[];} updateOptions(options={}){ this.options={...this.options,...options };return this;} on(target,type,handler,options){ target.addEventListener(type,handler,options);this.cleanups.push(()=>target.removeEventListener(type,handler,options));} destroy(){ this.cleanups.splice(0).forEach((cleanup)=>cleanup());instances.delete(this);const ctor=this.constructor;emit(this.element,`${ctor.componentName || "component"}:destroy`,{ instance:this });} } class Modal extends Component { static componentName="modal";isOpen;previousFocus=null;dialog;dragState=null;backdrop;keyboard;focus;scrollLock;draggable;constructor(element,options={}){ super(element,options);this.isOpen=element.classList.contains("modal-open");this.dialog=element.querySelector(".modal-dialog");this.updateOptions(options);this.element.setAttribute("role",this.element.getAttribute("role")|| "dialog");this.element.setAttribute("aria-modal","true");this.element.setAttribute("aria-hidden",this.isOpen?"false":"true");this.on(this.element,"click",(event)=>{ if(event.target===this.element){ if(this.backdrop==="static"){ const staticClass=`${this.constructor.componentName}-static`;this.element.classList.add(staticClass);setTimeout(()=>this.element.classList.remove(staticClass),150);} else if(this.backdrop){ this.hide();} } });this.on(document,"keydown",(event)=>this.onKeydown(event));this.bindDrag();} updateOptions(options={}){ super.updateOptions(options);const component=this.constructor.componentName;const backdrop=getOption(this.options,this.element,component,"backdrop",true);this.backdrop=backdrop==="static"?"static":!(backdrop===false || backdrop==="false");this.keyboard=getBooleanOption(this.options,this.element,component,"keyboard",true);this.focus=getBooleanOption(this.options,this.element,component,"focus",true);this.scrollLock=getBooleanOption(this.options,this.element,component,"scrollLock",true);this.draggable=getBooleanOption(this.options,this.element,component,"draggable",true);return this;} bindDrag(){ if(!this.dialog)return;const header=this.dialog.querySelector(".modal-header");if(!header)return;this.on(header,"pointerdown",(event)=>this.startDrag(event));} startDrag(event){ if(!this.isOpen || !this.draggable || !this.dialog || event.button !==0)return;const target=event.target instanceof Element?event.target:null;if(target?.closest("button,a,input,select,textarea,label,[data-modal-close],[data-no-drag]"))return;const originX=Number.parseFloat(this.dialog.style.getPropertyValue("--aksara-modal-x"))|| 0;const originY=Number.parseFloat(this.dialog.style.getPropertyValue("--aksara-modal-y"))|| 0;const rect=this.dialog.getBoundingClientRect();const baseLeft=rect.left-originX;const baseTop=rect.top-originY;const padding=8;const move=(moveEvent)=>this.drag(moveEvent);const end=()=>{ document.removeEventListener("pointermove",move);document.removeEventListener("pointerup",end);document.removeEventListener("pointercancel",end);this.dialog?.classList.remove("is-dragging");this.dragState=null;};this.dragState={ originX,originY,pointerX:event.clientX,pointerY:event.clientY,minX:padding-baseLeft,maxX:window.innerWidth-padding-rect.width-baseLeft,minY:padding-baseTop,maxY:window.innerHeight-padding-rect.height-baseTop };this.dialog.classList.add("is-dragging");document.addEventListener("pointermove",move);document.addEventListener("pointerup",end);document.addEventListener("pointercancel",end);event.preventDefault();} drag(event){ if(!this.dialog || !this.dragState)return;const nextX=clamp(this.dragState.originX+event.clientX-this.dragState.pointerX,this.dragState.minX,this.dragState.maxX);const nextY=clamp(this.dragState.originY+event.clientY-this.dragState.pointerY,this.dragState.minY,this.dragState.maxY);this.dialog.style.setProperty("--aksara-modal-x",`${nextX}px`);this.dialog.style.setProperty("--aksara-modal-y",`${nextY}px`);} resetPosition(){ if(!this.dialog)return;this.dialog.style.removeProperty("--aksara-modal-x");this.dialog.style.removeProperty("--aksara-modal-y");this.dialog.classList.remove("is-dragging");} show(){ if(this.isOpen)return this;this.previousFocus=document.activeElement;this.isOpen=true;this.element.classList.add("modal-open");this.element.setAttribute("aria-hidden","false");if(this.scrollLock)document.documentElement.style.overflow="hidden";if(this.focus)this.focusFirst();emit(this.element,"modal:show",{ instance:this });return this;} hide(){ if(!this.isOpen)return this;this.isOpen=false;this.element.classList.remove("modal-open");this.element.setAttribute("aria-hidden","true");this.resetPosition();if(this.scrollLock)document.documentElement.style.overflow="";if(this.previousFocus && typeof this.previousFocus.focus==="function")this.previousFocus.focus();emit(this.element,"modal:hide",{ instance:this });return this;} toggle(){ return this.isOpen?this.hide():this.show();} focusFirst(){ const focusable=Array.from(this.element.querySelectorAll(focusableSelector));const first=focusable[0]|| this.element;if(!this.element.hasAttribute("tabindex"))this.element.setAttribute("tabindex","-1");first.focus({ preventScroll:true });} onKeydown(event){ if(!this.isOpen)return;if(event.key==="Escape"){ if(this.keyboard){ event.preventDefault();this.hide();} else if(this.backdrop==="static"){ const staticClass=`${this.constructor.componentName}-static`;this.element.classList.add(staticClass);setTimeout(()=>this.element.classList.remove(staticClass),150);} return;} if(event.key !=="Tab")return;const focusable=Array.from(this.element.querySelectorAll(focusableSelector));if(!focusable.length){ event.preventDefault();this.element.focus();return;} const first=focusable[0];const last=focusable[focusable.length-1];if(event.shiftKey && document.activeElement===first){ event.preventDefault();last.focus();} else if(!event.shiftKey && document.activeElement===last){ event.preventDefault();first.focus();} } } class Dropdown extends Component { static componentName="dropdown";trigger;menu;isOpen;originalParent;originalSibling;scrollHandler;placement;container;offset;keyboard;closeOnSelect;closeOnOutside;constructor(element,options={}){ super(element,options);let trigger;let menu=null;if(element.matches("[data-dropdown]")){ trigger=element;} else if(element.classList.contains("dropdown")){ trigger=element.querySelector("[data-dropdown]")|| element.querySelector("button,a");menu=element.querySelector(".dropdown-menu");} else { trigger=element;} this.trigger=trigger;if(!menu){ const menuSelector=options.menu || options.target ||(trigger &&(trigger.getAttribute("data-dropdown")|| trigger.getAttribute("data-target")));if(menuSelector && typeof menuSelector==="string"){ menu=document.querySelector(menuSelector);} else if(menuSelector instanceof HTMLElement){ menu=menuSelector;} if(!menu && trigger){ if(trigger.nextElementSibling && trigger.nextElementSibling.classList.contains("dropdown-menu")){ menu=trigger.nextElementSibling;} else { menu=trigger.parentElement?.querySelector(".dropdown-menu")|| null;} } } this.menu=menu;this.isOpen=false;this.originalParent=null;this.originalSibling=null;this.scrollHandler=null;this.updateOptions(options);if(this.trigger?.matches(".btn-sm,.input-sm,.form-control-sm,.form-select-sm")|| this.element.classList.contains("dropdown-sm")){ this.menu?.classList.add("dropdown-menu-sm");} if(this.trigger){ this.trigger.setAttribute("aria-haspopup","true");this.trigger.setAttribute("aria-expanded","false");this.on(this.trigger,"click",(event)=>{ const customEvent=event;if(customEvent.__aksaraDropdownHandled)return;customEvent.__aksaraDropdownHandled=true;event.preventDefault();this.toggle(event);});} this.on(document,"click",(event)=>{ if(!this.closeOnOutside)return;const target=event.target;if(!this.element.contains(target)&& !this.menu?.contains(target)){ this.hide();} });this.on(document,"keydown",(event)=>{ if(this.keyboard && event.key==="Escape")this.hide();});if(this.menu){ this.on(this.menu,"click",(event)=>{ const target=event.target;const item=target.closest(".dropdown-item");if(this.closeOnSelect && item && !item.disabled && !item.classList.contains("disabled")){ this.hide();} });} } updateOptions(options={}){ super.updateOptions(options);this.placement=getOption(this.options,this.trigger,"dropdown","placement",getData(this.element,"dropdown","placement")|| "bottom");this.container=getOption(this.options,this.trigger,"dropdown","container",getData(this.element,"dropdown","container")|| "body");this.offset=getNumberOption(this.options,this.trigger,"dropdown","offset",getNumberOption({},this.element,"dropdown","offset",4));this.keyboard=getBooleanOption(this.options,this.trigger,"dropdown","keyboard",getBooleanOption({},this.element,"dropdown","keyboard",true));this.closeOnSelect=getBooleanOption(this.options,this.trigger,"dropdown","closeOnSelect",getBooleanOption({},this.element,"dropdown","closeOnSelect",true));this.closeOnOutside=getBooleanOption(this.options,this.trigger,"dropdown","closeOnOutside",getBooleanOption({},this.element,"dropdown","closeOnOutside",true));return this;} position(){ if(!this.menu || !this.isOpen || !this.trigger)return;this.menu.style.display="block";this.menu.style.position="absolute";this.menu.style.zIndex="1000";const triggerRect=this.trigger.getBoundingClientRect();const menuRect=this.menu.getBoundingClientRect();const gap=this.offset;let top;let left;let placement=this.placement;if(placement==="auto"){ const spaceBelow=window.innerHeight-triggerRect.bottom;const spaceAbove=triggerRect.top;placement=spaceBelow>=menuRect.height || spaceBelow>=spaceAbove?"bottom":"top";} this.menu.classList.remove("dropdown-top","dropdown-bottom","dropdown-start","dropdown-end");this.menu.classList.add(`dropdown-${placement}`);const isRtl=document.documentElement.getAttribute("dir")==="rtl" || document.body?.getAttribute("dir")==="rtl";if(placement==="top"){ top=triggerRect.top-menuRect.height-gap;left=isRtl?triggerRect.right-menuRect.width:triggerRect.left;} else if(placement==="start"){ top=triggerRect.top;left=isRtl?triggerRect.right+gap:triggerRect.left-menuRect.width-gap;} else if(placement==="end"){ top=triggerRect.top;left=isRtl?triggerRect.left-menuRect.width-gap:triggerRect.right+gap;} else { top=triggerRect.bottom+gap;left=isRtl?triggerRect.right-menuRect.width:triggerRect.left;} const viewportWidth=window.innerWidth;left=Math.max(8,Math.min(left,viewportWidth-menuRect.width-8));this.menu.style.top=`${top+window.scrollY}px`;this.menu.style.left=`${left+window.scrollX}px`;this.menu.style.bottom="auto";this.menu.style.right="auto";} show(){ if(!this.menu || this.isOpen)return this;this.isOpen=true;this.originalParent=this.menu.parentNode;this.originalSibling=this.menu.nextSibling;let containerEl=document.body;if(typeof this.container==="string" && this.container !=="body"){ containerEl=document.querySelector(this.container)|| document.body;} else if(this.container instanceof HTMLElement){ containerEl=this.container;} containerEl.appendChild(this.menu);this.menu.classList.add("dropdown-open");this.trigger?.setAttribute("aria-expanded","true");this.position();this.scrollHandler=()=>this.position();window.addEventListener("scroll",this.scrollHandler,{ passive:true });window.addEventListener("resize",this.scrollHandler);emit(this.element,"dropdown:show",{ instance:this });return this;} hide(){ if(!this.menu || !this.isOpen)return this;this.isOpen=false;if(this.scrollHandler){ window.removeEventListener("scroll",this.scrollHandler);window.removeEventListener("resize",this.scrollHandler);this.scrollHandler=null;} this.menu.classList.remove("dropdown-open","dropdown-top","dropdown-bottom","dropdown-start","dropdown-end");this.trigger?.setAttribute("aria-expanded","false");if(this.originalParent){ this.originalParent.insertBefore(this.menu,this.originalSibling);} this.menu.style.display="";this.menu.style.position="";this.menu.style.top="";this.menu.style.left="";this.menu.style.zIndex="";emit(this.element,"dropdown:hide",{ instance:this });return this;} toggle(event){ const clickEvent=(event || window.event);if(clickEvent && clickEvent.type==="click"){ if(clickEvent.__aksaraDropdownHandled && !event){ return this;} clickEvent.__aksaraDropdownHandled=true;} return this.isOpen?this.hide():this.show();} destroy(){ this.hide();super.destroy();} } class FloatingText extends Component { static dataAttribute="data-floating";static role="tooltip";static componentName="floating";tip;showTimeout;hideTimeout;container;html;content;placement;trigger;offset;showDelay;hideDelay;keyboard;constructor(element,options={}){ super(element,options);this.tip=null;this.showTimeout=null;this.hideTimeout=null;this.updateOptions(options);this.bindTriggers();this.on(document,"keydown",(event)=>{ if(this.keyboard && event.key==="Escape")this.hide();});} updateOptions(options={}){ super.updateOptions(options);const ctor=this.constructor;const component=ctor.componentName;const rawContent=(this.options.content??this.options.text??getData(this.element,component,"content")??this.element.getAttribute(ctor.dataAttribute)??"");this.container=getOption(this.options,this.element,component,"container",this.element.getAttribute("data-container")|| "body");this.html=getBooleanOption(this.options,this.element,component,"html",this.element.getAttribute("data-html")==="true");this.content=rawContent;this.placement=getOption(this.options,this.element,component,"placement",this.element.getAttribute("data-placement")|| "top");this.trigger=getOption(this.options,this.element,component,"trigger","hover focus");this.offset=getNumberOption(this.options,this.element,component,"offset",8);this.showDelay=getNumberOption(this.options,this.element,component,"showDelay",0);this.hideDelay=getNumberOption(this.options,this.element,component,"hideDelay",0);this.keyboard=getBooleanOption(this.options,this.element,component,"keyboard",true);if(this.tip){ if(this.html){ this.tip.innerHTML=this.content;} else { this.tip.textContent=this.content;} this.position();} return this;} bindTriggers(){ const triggers=String(this.trigger).split(/\s+/).filter(Boolean);if(triggers.includes("hover")){ this.on(this.element,"mouseenter",()=>this.scheduleShow());this.on(this.element,"mouseleave",()=>this.scheduleHide());} if(triggers.includes("focus")){ this.on(this.element,"focus",()=>this.scheduleShow());this.on(this.element,"blur",()=>this.scheduleHide());} if(triggers.includes("click")){ this.on(this.element,"click",(event)=>{ event.preventDefault();this.toggle();});} } scheduleShow(){ if(this.hideTimeout)clearTimeout(this.hideTimeout);if(this.showTimeout)clearTimeout(this.showTimeout);this.showTimeout=setTimeout(()=>this.show(),this.showDelay);} scheduleHide(){ if(this.showTimeout)clearTimeout(this.showTimeout);if(this.hideTimeout)clearTimeout(this.hideTimeout);this.hideTimeout=setTimeout(()=>this.hide(),this.hideDelay);} show(){ if(this.tip || !this.content)return this;const ctor=this.constructor;this.tip=document.createElement("div");this.tip.className=ctor.componentName;if(this.html){ this.tip.innerHTML=this.content;} else { this.tip.textContent=this.content;} this.tip.setAttribute("role",ctor.role);let containerEl=document.body;if(typeof this.container==="string" && this.container !=="body"){ containerEl=document.querySelector(this.container)|| document.body;} else if(this.container instanceof HTMLElement){ containerEl=this.container;} containerEl.append(this.tip);this.position();emit(this.element,`${ctor.componentName}:show`,{ instance:this });return this;} toggle(){ return this.tip?this.hide():this.show();} hide(){ if(!this.tip)return this;const ctor=this.constructor;this.tip.remove();this.tip=null;emit(this.element,`${ctor.componentName}:hide`,{ instance:this });return this;} position(){ if(!this.tip)return;const rect=this.element.getBoundingClientRect();const tipRect=this.tip.getBoundingClientRect();const gap=this.offset;const isRtl=document.documentElement.getAttribute("dir")==="rtl" || document.body?.getAttribute("dir")==="rtl";let placement=this.placement;if(placement==="auto"){ const spaceBelow=window.innerHeight-rect.bottom;const spaceAbove=rect.top;placement=spaceAbove>=tipRect.height || spaceAbove>=spaceBelow?"top":"bottom";} let physicalPlacement=placement;if(placement==="start"){ physicalPlacement=isRtl?"right":"left";} else if(placement==="end"){ physicalPlacement=isRtl?"left":"right";} const ctor=this.constructor;this.tip.className=`${ctor.componentName} ${ctor.componentName}-${placement}`;const topMap={ top:rect.top-tipRect.height-gap,bottom:rect.bottom+gap,left:rect.top+rect.height/2-tipRect.height/2,right:rect.top+rect.height/2-tipRect.height/2 };const top=topMap[physicalPlacement]??rect.top-tipRect.height-gap;const leftMap={ top:rect.left+rect.width/2-tipRect.width/2,bottom:rect.left+rect.width/2-tipRect.width/2,left:rect.left-tipRect.width-gap,right:rect.right+gap };const left=leftMap[physicalPlacement]??rect.left;this.tip.style.top=`${Math.max(4,top+window.scrollY)}px`;this.tip.style.left=`${Math.max(4,left+window.scrollX)}px`;} destroy(){ if(this.showTimeout)clearTimeout(this.showTimeout);if(this.hideTimeout)clearTimeout(this.hideTimeout);this.hide();super.destroy();} } class Tooltip extends FloatingText { static componentName="tooltip";static dataAttribute="data-tooltip";static role="tooltip";} class Popover extends FloatingText { static componentName="popover";static dataAttribute="data-popover";static role="dialog";} function collapsePanel(panel,duration=250){ const animatedPanel=panel;if(animatedPanel._aksaraCollapseTimer){ clearTimeout(animatedPanel._aksaraCollapseTimer);delete animatedPanel._aksaraCollapseTimer;} if(animatedPanel._aksaraCollapseEnd){ panel.removeEventListener("transitionend",animatedPanel._aksaraCollapseEnd);delete animatedPanel._aksaraCollapseEnd;} if(duration<=0 ||(typeof window !=="undefined" && window.matchMedia?.("(prefers-reduced-motion:reduce)").matches)){ panel.hidden=true;panel.style.removeProperty("height");panel.style.removeProperty("overflow");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");return;} const computed=window.getComputedStyle(panel);const currentHeight=panel.getBoundingClientRect().height;const currentPaddingTop=computed.paddingTop;const currentPaddingBottom=computed.paddingBottom;panel.style.overflow="hidden";panel.style.height=`${currentHeight}px`;panel.style.paddingTop=currentPaddingTop;panel.style.paddingBottom=currentPaddingBottom;panel.style.opacity="1";panel.style.transition=`height ${duration}ms cubic-bezier(0.4,0,0.2,1),padding-top ${duration}ms cubic-bezier(0.4,0,0.2,1),padding-bottom ${duration}ms cubic-bezier(0.4,0,0.2,1),opacity ${Math.round(duration*0.7)}ms ease`;void panel.offsetHeight;panel.style.height="0px";panel.style.paddingTop="0px";panel.style.paddingBottom="0px";panel.style.opacity="0";const cleanup=()=>{ panel.hidden=true;panel.style.removeProperty("height");panel.style.removeProperty("overflow");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");if(animatedPanel._aksaraCollapseEnd){ panel.removeEventListener("transitionend",animatedPanel._aksaraCollapseEnd);delete animatedPanel._aksaraCollapseEnd;} delete animatedPanel._aksaraCollapseTimer;};const onEnd=(e)=>{ if(e.target===panel && e.propertyName==="height"){ cleanup();} };animatedPanel._aksaraCollapseEnd=onEnd;panel.addEventListener("transitionend",onEnd);animatedPanel._aksaraCollapseTimer=setTimeout(cleanup,duration+60);} function expandPanel(panel,duration=250){ const animatedPanel=panel;if(animatedPanel._aksaraCollapseTimer){ clearTimeout(animatedPanel._aksaraCollapseTimer);delete animatedPanel._aksaraCollapseTimer;} if(animatedPanel._aksaraCollapseEnd){ panel.removeEventListener("transitionend",animatedPanel._aksaraCollapseEnd);delete animatedPanel._aksaraCollapseEnd;} if(duration<=0 ||(typeof window !=="undefined" && window.matchMedia?.("(prefers-reduced-motion:reduce)").matches)){ panel.hidden=false;panel.style.removeProperty("height");panel.style.removeProperty("overflow");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");return;} panel.hidden=false;panel.style.removeProperty("height");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");const computed=window.getComputedStyle(panel);const targetPaddingTop=computed.paddingTop;const targetPaddingBottom=computed.paddingBottom;const targetHeight=panel.getBoundingClientRect().height;panel.style.overflow="hidden";panel.style.height="0px";panel.style.paddingTop="0px";panel.style.paddingBottom="0px";panel.style.opacity="0";void panel.offsetHeight;panel.style.transition=`height ${duration}ms cubic-bezier(0.4,0,0.2,1),padding-top ${duration}ms cubic-bezier(0.4,0,0.2,1),padding-bottom ${duration}ms cubic-bezier(0.4,0,0.2,1),opacity ${duration}ms ease`;panel.style.height=`${targetHeight}px`;panel.style.paddingTop=targetPaddingTop;panel.style.paddingBottom=targetPaddingBottom;panel.style.opacity="1";const cleanup=()=>{ panel.style.removeProperty("height");panel.style.removeProperty("overflow");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");if(animatedPanel._aksaraCollapseEnd){ panel.removeEventListener("transitionend",animatedPanel._aksaraCollapseEnd);delete animatedPanel._aksaraCollapseEnd;} delete animatedPanel._aksaraCollapseTimer;};const onEnd=(e)=>{ if(e.target===panel && e.propertyName==="height"){ cleanup();} };animatedPanel._aksaraCollapseEnd=onEnd;panel.addEventListener("transitionend",onEnd);animatedPanel._aksaraCollapseTimer=setTimeout(cleanup,duration+60);} class Accordion extends Component { static componentName="accordion";parent;collapsible;buttonSelector;duration;constructor(element,options={}){ super(element,options);this.updateOptions(options);this.on(element,"click",(event)=>{ const target=event.target;const button=target.closest(this.buttonSelector);if(!button || !element.contains(button))return;const panelSelector=button.getAttribute("data-accordion");if(!panelSelector)return;const panel=document.querySelector(panelSelector);if(!panel)return;const expanded=button.getAttribute("aria-expanded")==="true";if(expanded && !this.collapsible)return;const parentScope=this.getParentScope();if(!expanded && parentScope){ parentScope.querySelectorAll(this.buttonSelector).forEach((otherButton)=>{ if(otherButton===button)return;otherButton.setAttribute("aria-expanded","false");const otherPanelSelector=otherButton.getAttribute("data-accordion");if(otherPanelSelector){ const otherPanel=document.querySelector(otherPanelSelector);if(otherPanel &&(!otherPanel.hidden || otherPanel.offsetHeight>0)){ collapsePanel(otherPanel,this.duration);} } });} button.setAttribute("aria-expanded",String(!expanded));if(expanded){ collapsePanel(panel,this.duration);} else { expandPanel(panel,this.duration);} emit(element,"accordion:toggle",{ button,panel,expanded:!expanded });});} updateOptions(options={}){ super.updateOptions(options);const parentVal=getOption(this.options,this.element,"accordion","parent",true);if(parentVal==="true")this.parent=true;else if(parentVal==="false")this.parent=false;else this.parent=parentVal;this.collapsible=getBooleanOption(this.options,this.element,"accordion","collapsible",true);this.buttonSelector=getOption(this.options,this.element,"accordion","buttonSelector","[data-accordion]");this.duration=getNumberOption(this.options,this.element,"accordion","duration",250);return this;} getParentScope(){ if(this.parent===false)return null;if(this.parent===true)return this.element;if(this.parent instanceof Element)return this.parent;if(typeof this.parent==="string")return document.querySelector(this.parent)|| this.element;return this.element;} } class Tabs extends Component { static componentName="tabs";tabSelector;panelSelector;active;activeIndex;keyboard;loop;orientation;constructor(element,options={}){ super(element,options);this.updateOptions(options);this.on(element,"click",(event)=>{ const target=event.target;const tab=target.closest(this.tabSelector);if(!tab || !element.contains(tab))return;event.preventDefault();this.show(tab);});this.on(element,"keydown",(event)=>{ if(!this.keyboard)return;const keyEvent=event;const keys=this.orientation==="vertical"?["ArrowUp","ArrowDown"]:["ArrowLeft","ArrowRight"];if(!keys.includes(keyEvent.key))return;const tabs=Array.from(element.querySelectorAll(this.tabSelector));const index=tabs.indexOf(document.activeElement);if(index<0)return;event.preventDefault();const isNext=keyEvent.key==="ArrowRight" || keyEvent.key==="ArrowDown";const fallback=this.loop?(isNext?tabs[0]:tabs[tabs.length-1]):tabs[index];const next=isNext?tabs[index+1]|| fallback:tabs[index-1]|| fallback;if(next){ next.focus();this.show(next);} });this.activateInitial();} updateOptions(options={}){ const shouldActivate=(options.active !==undefined || options.activeIndex !==undefined)&& this.cleanups.length>0;super.updateOptions(options);this.tabSelector=getOption(this.options,this.element,"tabs","tabSelector","[data-tabs]");this.panelSelector=getOption(this.options,this.element,"tabs","panelSelector",null);this.active=getOption(this.options,this.element,"tabs","active",null);this.activeIndex=getNumberOption(this.options,this.element,"tabs","activeIndex",-1);this.keyboard=getBooleanOption(this.options,this.element,"tabs","keyboard",true);this.loop=getBooleanOption(this.options,this.element,"tabs","loop",true);this.orientation=getOption(this.options,this.element,"tabs","orientation",this.element.getAttribute("aria-orientation")|| "horizontal");this.element.setAttribute("role",this.element.getAttribute("role")|| "tablist");this.element.setAttribute("aria-orientation",this.orientation);if(shouldActivate)this.activateInitial();return this;} activateInitial(){ const tabs=Array.from(this.element.querySelectorAll(this.tabSelector));if(!tabs.length)return;let initial=null;if(this.active instanceof HTMLElement){ initial=this.active;} else if(typeof this.active==="string"){ initial=this.element.querySelector(this.active)|| document.querySelector(this.active);} if(!initial && this.activeIndex>=0){ initial=tabs[this.activeIndex]|| null;} if(!initial){ initial=tabs.find((tab)=>tab.getAttribute("aria-selected")==="true")|| tabs[0];} if(initial)this.show(initial);} show(tab){ const selector=tab.getAttribute("data-tabs");const panel=selector?document.querySelector(selector):null;if(!panel)return this;this.element.querySelectorAll(this.tabSelector).forEach((item)=>{ const selected=item===tab;item.setAttribute("role",item.getAttribute("role")|| "tab");item.setAttribute("aria-selected",String(selected));item.tabIndex=selected?0:-1;const targetSelector=item.getAttribute("data-tabs");const target=targetSelector?document.querySelector(targetSelector):null;if(target)target.hidden=!selected;});if(this.panelSelector){ document.querySelectorAll(this.panelSelector).forEach((item)=>{ if(item !==panel)item.hidden=true;});} panel.setAttribute("role",panel.getAttribute("role")|| "tabpanel");emit(this.element,"tabs:show",{ tab,panel,instance:this });return this;} } class Toast extends Component { static componentName="toast";timeout=null;delay;autohide;constructor(element,options={}){ super(element,options);this.updateOptions(options);element.setAttribute("role",element.getAttribute("role")|| "status");element.setAttribute("aria-live",element.getAttribute("aria-live")|| "polite");} updateOptions(options={}){ super.updateOptions(options);this.delay=getNumberOption(this.options,this.element,"toast","delay",5000);this.autohide=getBooleanOption(this.options,this.element,"toast","autohide",true);return this;} show(){ this.element.classList.add("toast-show");if(this.timeout)clearTimeout(this.timeout);if(this.autohide && this.delay>0)this.timeout=setTimeout(()=>this.hide(),this.delay);emit(this.element,"toast:show",{ instance:this });return this;} hide(){ this.element.classList.remove("toast-show");if(this.timeout)clearTimeout(this.timeout);emit(this.element,"toast:hide",{ instance:this });return this;} destroy(){ if(this.timeout)clearTimeout(this.timeout);super.destroy();} } class Carousel extends Component { static componentName="carousel";timeout=null;items;index;interval;autoplay;pauseOnHover;keyboard;loop;constructor(element,options={}){ super(element,options);this.items=Array.from(element.querySelectorAll("[data-carousel-item]"));this.index=this.resolveInitialIndex();this.updateOptions(options);this.show(this.index);this.on(element,"click",(event)=>{ const target=event.target;const action=target.closest("[data-carousel]");if(!action)return;const value=action.getAttribute("data-carousel");if(value==="next")this.next();if(value==="prev")this.prev();if(value !=="next" && value !=="prev" && value !=="")this.show(Number(value));});this.on(element,"keydown",(event)=>{ const keyEvent=event;if(!this.keyboard || !["ArrowLeft","ArrowRight"].includes(keyEvent.key))return;event.preventDefault();if(keyEvent.key==="ArrowRight")this.next();if(keyEvent.key==="ArrowLeft")this.prev();});if(this.pauseOnHover){ this.on(element,"mouseenter",()=>this.pause());this.on(element,"mouseleave",()=>this.play());} if(this.autoplay)this.play();} updateOptions(options={}){ super.updateOptions(options);this.interval=getNumberOption(this.options,this.element,"carousel","interval",5000);this.autoplay=getBooleanOption(this.options,this.element,"carousel","autoplay",false);this.pauseOnHover=getBooleanOption(this.options,this.element,"carousel","pauseOnHover",true);this.keyboard=getBooleanOption(this.options,this.element,"carousel","keyboard",true);this.loop=getBooleanOption(this.options,this.element,"carousel","loop",true);const activeIndex=getNumberOption(this.options,this.element,"carousel","activeIndex",-1);if(activeIndex>=0)this.show(activeIndex);if(this.autoplay)this.play();if(!this.autoplay)this.pause();return this;} resolveInitialIndex(){ const configured=getNumberOption(this.options,this.element,"carousel","activeIndex",-1);if(configured>=0)return configured;return Math.max(0,this.items.findIndex((item)=>!item.hidden));} show(index){ if(!this.items.length)return this;if(!this.loop &&(index<0 || index>=this.items.length))return this;this.index=(index+this.items.length)% this.items.length;this.items.forEach((item,itemIndex)=>{ item.hidden=itemIndex !==this.index;});emit(this.element,"carousel:show",{ index:this.index,instance:this });return this;} next(){ return this.show(this.index+1);} prev(){ return this.show(this.index-1);} play(){ if(this.timeout)clearInterval(this.timeout);if(this.autoplay && this.interval>0){ this.timeout=setInterval(()=>this.next(),this.interval);} return this;} pause(){ if(this.timeout)clearInterval(this.timeout);this.timeout=null;return this;} destroy(){ this.pause();super.destroy();} } class Offcanvas extends Modal { static componentName="offcanvas";show(){ if(this.isOpen)return this;this.previousFocus=document.activeElement;this.isOpen=true;this.element.classList.add("offcanvas-open");this.element.setAttribute("aria-hidden","false");if(this.scrollLock)document.documentElement.style.overflow="hidden";if(this.focus)this.focusFirst();emit(this.element,"offcanvas:show",{ instance:this });return this;} hide(){ if(!this.isOpen)return this;this.isOpen=false;this.element.classList.remove("offcanvas-open");this.element.setAttribute("aria-hidden","true");if(this.scrollLock)document.documentElement.style.overflow="";if(this.previousFocus && typeof this.previousFocus.focus==="function")this.previousFocus.focus();emit(this.element,"offcanvas:hide",{ instance:this });return this;} } function readTriggerOptions(trigger,component,names){ return names.reduce((options,name)=>{ const value=getData(trigger,component,name);if(value !==null)options[name]=value;return options;},{});} function dismissTarget(target){ if(!target)return;if(target.classList.contains("modal")){ getInstance(target,Modal).hide();} else if(target.classList.contains("offcanvas")){ getInstance(target,Offcanvas).hide();} else if(target.classList.contains("toast")){ getInstance(target,Toast).hide();} else if(target.classList.contains("dropdown")|| target.matches("[data-dropdown]")){ getInstance(target,Dropdown).hide();} else { target.remove();} } function resolveDismissTargets(trigger){ const selector=trigger.getAttribute("data-dismiss");if(selector){ try { return Array.from(document.querySelectorAll(selector));} catch { return[];} } const localTarget=trigger.closest(".alert,.toast,.modal,.offcanvas,.dropdown,.popover,.tooltip");return localTarget?[localTarget]:[];} function bindDataApi(){ document.querySelectorAll("[data-dismiss]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraDismissTrigger)return;customTrigger.__aksaraDismissTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();resolveDismissTargets(trigger).forEach((target)=>dismissTarget(target));});});document.querySelectorAll("[data-modal-close]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraModalCloseTrigger)return;customTrigger.__aksaraModalCloseTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-modal-close");const modal=targetSelector?document.querySelector(targetSelector):trigger.closest(".modal");if(modal)getInstance(modal,Modal).hide();});});document.querySelectorAll("[data-modal]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraModalTrigger)return;customTrigger.__aksaraModalTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-modal");if(targetSelector){ const target=document.querySelector(targetSelector);if(target){ const options=readTriggerOptions(trigger,"modal",["backdrop","keyboard","focus","scrollLock","draggable"]);getInstance(target,Modal,options).show();} } });});document.querySelectorAll("[data-offcanvas-close]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraOffcanvasCloseTrigger)return;customTrigger.__aksaraOffcanvasCloseTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-offcanvas-close");const panel=targetSelector?document.querySelector(targetSelector):trigger.closest(".offcanvas");if(panel)getInstance(panel,Offcanvas).hide();});});document.querySelectorAll("[data-offcanvas]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraOffcanvasTrigger)return;customTrigger.__aksaraOffcanvasTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-offcanvas");if(targetSelector){ const target=document.querySelector(targetSelector);if(target){ const options=readTriggerOptions(trigger,"offcanvas",["backdrop","keyboard","focus","scrollLock"]);getInstance(target,Offcanvas,options).show();} } });});document.querySelectorAll("[data-toast]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraToastTrigger)return;customTrigger.__aksaraToastTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-toast");if(targetSelector){ const target=document.querySelector(targetSelector);if(target){ const options=readTriggerOptions(trigger,"toast",["delay","autohide"]);getInstance(target,Toast,options).show();} } });});} const injectedArbitraryRules=new Set();let arbitrarySheet=null;let arbitraryRuleIndex=0;function getArbitrarySheet(){ if(typeof document==="undefined")return null;if(!arbitrarySheet){ if("adoptedStyleSheets" in document && typeof CSSStyleSheet !=="undefined"){ arbitrarySheet=new CSSStyleSheet();document.adoptedStyleSheets=[...document.adoptedStyleSheets,arbitrarySheet];} } return arbitrarySheet;} function escapeArbitraryClass(className){ return Array.from(className).map((char,index)=>{ if(/^[a-zA-Z_-]$/.test(char))return char;if(/^[0-9]$/.test(char)){ return index===0?`\\${char.charCodeAt(0).toString(16).padStart(6,"0")}`:char;} return `\\${char}`;}).join("");} const runtimeArbitraryPropertyMap={ m:(v)=>`margin:${v}`,mt:(v)=>`margin-block-start:${v}`,mb:(v)=>`margin-block-end:${v}`,ms:(v)=>`margin-inline-start:${v}`,me:(v)=>`margin-inline-end:${v}`,mx:(v)=>`margin-inline:${v}`,my:(v)=>`margin-block:${v}`,p:(v)=>`padding:${v}`,pt:(v)=>`padding-block-start:${v}`,pb:(v)=>`padding-block-end:${v}`,ps:(v)=>`padding-inline-start:${v}`,pe:(v)=>`padding-inline-end:${v}`,px:(v)=>`padding-inline:${v}`,py:(v)=>`padding-block:${v}`,gap:(v)=>`gap:${v}`,"row-gap":(v)=>`row-gap:${v}`,"col-gap":(v)=>`column-gap:${v}`,g:(v)=>`--aksara-gutter-x:${v};--aksara-gutter-y:${v}`,gx:(v)=>`--aksara-gutter-x:${v}`,gy:(v)=>`--aksara-gutter-y:${v}`,w:(v)=>`width:${v}`,h:(v)=>`height:${v}`,"min-w":(v)=>`min-width:${v}`,"max-w":(v)=>`max-width:${v}`,"min-h":(v)=>`min-height:${v}`,"max-h":(v)=>`max-height:${v}`,top:(v)=>`inset-block-start:${v}`,bottom:(v)=>`inset-block-end:${v}`,start:(v)=>`inset-inline-start:${v}`,end:(v)=>`inset-inline-end:${v}`,inset:(v)=>`inset:${v}`,"inset-x":(v)=>`inset-inline:${v}`,"inset-y":(v)=>`inset-block:${v}`,"translate-x":(v)=>`transform:translateX(${v})`,"translate-y":(v)=>`transform:translateY(${v})`,rotate:(v)=>`transform:rotate(${v})`,scale:(v)=>`transform:scale(${v})`,rounded:(v)=>`border-radius:${v}`,border:(v)=>`border-width:${v}`,opacity:(v)=>`opacity:${v}`,z:(v)=>`z-index:${v}`,leading:(v)=>`line-height:${v}`,tracking:(v)=>`letter-spacing:${v}`,text:(v)=>(/^(#[0-9a-fA-F]+|rgb|hsl)/.test(v)?`color:${v}`:`font-size:${v}`),bg:(v)=>`background-color:${v}`,overscroll:(v)=>`overscroll-behavior:${v}`,"overscroll-x":(v)=>`overscroll-behavior-x:${v}`,"overscroll-y":(v)=>`overscroll-behavior-y:${v}` };const runtimeBreakpoints={ sm:"36rem",md:"48rem",lg:"62rem",xl:"75rem","2xl":"87.5rem","3xl":"100rem" };const runtimeStateSelectors={ hover:":hover",focus:":focus",active:":active",disabled:":disabled",checked:":checked",selected:'[aria-selected="true"]',visited:":visited",first:":first-child",last:":last-child",odd:":nth-child(odd)",even:":nth-child(even)" };function injectArbitraryClass(className){ if(injectedArbitraryRules.has(className))return;injectedArbitraryRules.add(className);const parts=className.split(":");const utility=parts.pop();if(!utility)return;const match=utility.match(/^(-)?([a-zA-Z0-9_-]+)-\[(.+)\]$/);if(!match)return;const isNegative=Boolean(match[1]);const prop=match[2];let val=match[3];const resolver=runtimeArbitraryPropertyMap[prop];if(!resolver)return;if(isNegative && !val.startsWith("-")){ val=`-${val}`;} const declarations=resolver(val);const escaped=escapeArbitraryClass(className);let selector=`.${escaped}`;let stateSelector="";let themeVariant="";let breakpointVariant="";for(const v of parts){ if(v==="dark" || v==="light")themeVariant=v;else if(runtimeBreakpoints[v])breakpointVariant=v;else if(runtimeStateSelectors[v])stateSelector+=runtimeStateSelectors[v];} selector+=stateSelector;let rule=`${selector}{${declarations}}`;if(themeVariant){ rule=themeVariant==="dark"?`[data-theme="dark"]${selector},.dark ${selector}{${declarations}}`:`[data-theme="light"]${selector},.light ${selector}{${declarations}}`;} if(breakpointVariant){ rule=`@media(min-width:${runtimeBreakpoints[breakpointVariant]}){${rule}}`;} const sheet=getArbitrarySheet();if(sheet){ try { sheet.insertRule(rule,arbitraryRuleIndex++);} catch { } } } function processElementClasses(el){ const classAttr=el.getAttribute("class");if(!classAttr || !classAttr.includes("-["))return;const tokens=classAttr.split(/\s+/);for(const token of tokens){ if(token.includes("-[")&& token.endsWith("]")){ injectArbitraryClass(token);} } } function scanArbitraryDom(root=document){ if(typeof document==="undefined")return;if(root instanceof Element){ processElementClasses(root);} root.querySelectorAll('[class*="-["]').forEach(processElementClasses);} let mutationObserverStarted=false;function setupArbitraryObserver(){ if(mutationObserverStarted || typeof MutationObserver==="undefined" || typeof document==="undefined")return;mutationObserverStarted=true;const observer=new MutationObserver((mutations)=>{ for(const m of mutations){ if(m.type==="attributes" && m.target instanceof Element){ processElementClasses(m.target);} else if(m.type==="childList"){ m.addedNodes.forEach((node)=>{ if(node instanceof Element){ scanArbitraryDom(node);} });} } });observer.observe(document.documentElement,{ subtree:true,childList:true,attributes:true,attributeFilter:["class"]});} let currentTheme="system";function getSystemTheme(){ if(typeof window !=="undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme:dark)").matches){ return "dark";} return "light";} function applyTheme(theme){ if(typeof document==="undefined")return;const root=document.documentElement;const effectiveTheme=theme==="system"?getSystemTheme():theme;root.setAttribute("data-theme",effectiveTheme);if(effectiveTheme==="dark"){ root.classList.add("dark");root.classList.remove("light");} else { root.classList.add("light");root.classList.remove("dark");} } function setupClipboard(root=document){ if(typeof document==="undefined")return;root.querySelectorAll("[data-clipboard]").forEach((trigger)=>{ if(trigger.dataset.aksaraClipboardBound)return;trigger.dataset.aksaraClipboardBound="true";trigger.addEventListener("click",async(e)=>{ e.preventDefault();const targetSelector=trigger.getAttribute("data-clipboard");let textToCopy="";if(targetSelector && targetSelector.startsWith("#")){ const targetEl=document.querySelector(targetSelector);if(targetEl){ textToCopy=targetEl.value??targetEl.textContent??"";} } else if(targetSelector){ textToCopy=targetSelector;} else { textToCopy=trigger.getAttribute("data-clipboard-text")|| trigger.textContent || "";} if(navigator.clipboard && textToCopy){ try { await navigator.clipboard.writeText(textToCopy);const originalText=trigger.getAttribute("data-clipboard-original")|| trigger.innerHTML;const successText=trigger.getAttribute("data-clipboard-success");if(successText){ if(!trigger.hasAttribute("data-clipboard-original")){ trigger.setAttribute("data-clipboard-original",originalText);} trigger.innerHTML=successText;setTimeout(()=>{ trigger.innerHTML=originalText;},2000);} trigger.classList.add("is-copied");setTimeout(()=>trigger.classList.remove("is-copied"),2000);emit(trigger,"clipboard:copy",{ text:textToCopy });} catch { } } });});} const Aksara={ Modal,Tooltip,Popover,Accordion,Dropdown,Tabs,Toast,Carousel,Offcanvas,modal:(target,options)=>{ const args=resolveArgs(target,options,"[data-modal],.modal");return createAll(args.target,Modal,args.options);},tooltip:(target,options)=>{ const args=resolveArgs(target,options,"[data-tooltip]");return createAll(args.target,Tooltip,args.options);},popover:(target,options)=>{ const args=resolveArgs(target,options,"[data-popover]");return createAll(args.target,Popover,args.options);},accordion:(target,options)=>{ const args=resolveArgs(target,options,".accordion");return createAll(args.target,Accordion,args.options);},dropdown:(target,options)=>{ const args=resolveArgs(target,options,"[data-dropdown],.dropdown");return createAll(args.target,Dropdown,args.options);},tabs:(target,options)=>{ const args=resolveArgs(target,options,".tabs");return createAll(args.target,Tabs,args.options);},toast:(target,options)=>{ const args=resolveArgs(target,options,".toast");return createAll(args.target,Toast,args.options);},carousel:(target,options)=>{ const args=resolveArgs(target,options,".carousel");return createAll(args.target,Carousel,args.options);},offcanvas:(target,options)=>{ const args=resolveArgs(target,options,".offcanvas");return createAll(args.target,Offcanvas,args.options);},setTheme(theme){ currentTheme=theme;if(typeof localStorage !=="undefined"){ try { localStorage.setItem("aksara-theme",theme);} catch { } } applyTheme(theme);if(typeof document !=="undefined"){ emit(document.documentElement,"theme:change",{ theme });} return theme;},getTheme(){ return currentTheme;},initTheme(){ if(typeof localStorage !=="undefined"){ try { const saved=(localStorage.getItem("aksara-theme")|| localStorage.getItem("aksara-docs-theme"));if(saved &&(saved==="light" || saved==="dark" || saved==="system")){ currentTheme=saved;} } catch { } } applyTheme(currentTheme);if(typeof window !=="undefined" && window.matchMedia){ window.matchMedia("(prefers-color-scheme:dark)").addEventListener("change",()=>{ if(currentTheme==="system"){ applyTheme("system");} });} return currentTheme;},async clipboard(target,text){ if(typeof navigator==="undefined" || !navigator.clipboard)return false;let textToCopy=text??"";if(!textToCopy && typeof document !=="undefined"){ const el=typeof target==="string"?document.querySelector(target):target;if(el){ textToCopy=el.value??el.textContent??"";} } if(!textToCopy)return false;try { await navigator.clipboard.writeText(textToCopy);return true;} catch { return false;} },init(root=document){ if(root===document){ this.initTheme();} setupClipboard(root);scanArbitraryDom(root);setupArbitraryObserver();createAll(root.querySelectorAll("[data-tooltip]"),Tooltip);createAll(root.querySelectorAll("[data-popover]"),Popover);const dropdowns=new Set();root.querySelectorAll(".dropdown").forEach((el)=>dropdowns.add(el));root.querySelectorAll("[data-dropdown]").forEach((el)=>{ if(!el.closest(".dropdown")){ dropdowns.add(el);} });createAll(Array.from(dropdowns),Dropdown);createAll(root.querySelectorAll(".accordion"),Accordion);createAll(root.querySelectorAll(".tabs"),Tabs);createAll(root.querySelectorAll(".toast"),Toast);createAll(root.querySelectorAll(".carousel"),Carousel);createAll(root.querySelectorAll(".modal"),Modal);createAll(root.querySelectorAll(".offcanvas"),Offcanvas);bindDataApi();emit(document.documentElement,"init",{ root });return this;},destroy(){ Array.from(instances).forEach((instance)=>instance.destroy());registry.clear();emit(document.documentElement,"destroy");return this;} };if(typeof document !=="undefined"){ document.addEventListener("DOMContentLoaded",()=>Aksara.init());} window.Aksara=Aksara;})();
+(function(){ const registry=new Map();const instances=new Set();const focusableSelector=["a[href]","area[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","iframe","object","embed","[contenteditable]","[tabindex]:not([tabindex='-1'])"].join(",");function toElements(target){ if(!target)return[];if(typeof target==="string")return Array.from(document.querySelectorAll(target));if(target instanceof HTMLElement)return[target];if(target instanceof Element)return[target];if(target instanceof NodeList || Array.isArray(target)){ return Array.from(target).filter((item)=>item instanceof HTMLElement);} return[];} function resolveArgs(target,options,defaultSelector){ if(target && typeof target==="object" && !(target instanceof Element)&& !(target instanceof NodeList)&& !Array.isArray(target)){ const opts=target;const resolvedTarget=opts.target || opts.selector || defaultSelector;return { target:resolvedTarget,options:opts };} return { target:target || defaultSelector,options:(options || {})};} function dataName(name){ return name.replace(/[A-Z]/g,(match)=>`-${match.toLowerCase()}`);} function getData(element,component,name){ return element?.getAttribute(`data-${component}-${dataName(name)}`)??null;} function getOption(options,element,component,name,fallback){ if(options[name]!==undefined)return options[name];const value=getData(element,component,name);return value !==null?value:fallback;} function getBooleanOption(options,element,component,name,fallback){ const value=getOption(options,element,component,name,fallback);if(value==="true" || value===true)return true;if(value==="false" || value===false)return false;return Boolean(value);} function getNumberOption(options,element,component,name,fallback){ const value=getOption(options,element,component,name,fallback);const number=Number(value);return Number.isNaN(number)?fallback:number;} function clamp(value,min,max){ return Math.min(Math.max(value,min),max);} function emit(element,name,detail={}){ element.dispatchEvent(new CustomEvent(`aksara:${name}`,{ bubbles:true,detail }));} function getInstance(element,Type,options={}){ const key=Type.componentName;let map=registry.get(key);if(!map){ map=new WeakMap();registry.set(key,map);} if(!map.has(element)){ const instance=new Type(element,options);map.set(element,instance);instances.add(instance);} else if(options && Object.keys(options).length){ const instance=map.get(element);if(instance && typeof instance.updateOptions==="function"){ instance.updateOptions(options);} } return map.get(element);} function createInstanceList(instanceArray){ return new Proxy(instanceArray,{ get(target,prop){ if(prop in target){ const val=target[prop];return typeof val==="function"?val.bind(target):val;} return(...args)=>{ target.forEach((inst)=>{ const fn=inst[prop];if(typeof fn==="function"){ fn(...args);} });return createInstanceList(target);};} });} function createAll(target,Type,options={}){ const items=toElements(target);const insts=items.map((element)=>getInstance(element,Type,options));if(insts.length===1)return insts[0];return createInstanceList(insts);} class Component { element;options;cleanups;constructor(element,options={}){ this.element=element;this.options=options;this.cleanups=[];} updateOptions(options={}){ this.options={...this.options,...options };return this;} on(target,type,handler,options){ target.addEventListener(type,handler,options);this.cleanups.push(()=>target.removeEventListener(type,handler,options));} destroy(){ this.cleanups.splice(0).forEach((cleanup)=>cleanup());instances.delete(this);const ctor=this.constructor;emit(this.element,`${ctor.componentName || "component"}:destroy`,{ instance:this });} } class Modal extends Component { static componentName="modal";isOpen;previousFocus=null;dialog;dragState=null;backdrop;keyboard;focus;scrollLock;draggable;constructor(element,options={}){ super(element,options);this.isOpen=element.classList.contains("modal-open");this.dialog=element.querySelector(".modal-dialog");this.updateOptions(options);this.element.setAttribute("role",this.element.getAttribute("role")|| "dialog");this.element.setAttribute("aria-modal","true");this.element.setAttribute("aria-hidden",this.isOpen?"false":"true");this.on(this.element,"click",(event)=>{ if(event.target===this.element){ if(this.backdrop==="static"){ const staticClass=`${this.constructor.componentName}-static`;this.element.classList.add(staticClass);setTimeout(()=>this.element.classList.remove(staticClass),150);} else if(this.backdrop){ this.hide();} } });this.on(document,"keydown",(event)=>this.onKeydown(event));this.bindDrag();} updateOptions(options={}){ super.updateOptions(options);const component=this.constructor.componentName;const backdrop=getOption(this.options,this.element,component,"backdrop",true);this.backdrop=backdrop==="static"?"static":!(backdrop===false || backdrop==="false");this.keyboard=getBooleanOption(this.options,this.element,component,"keyboard",true);this.focus=getBooleanOption(this.options,this.element,component,"focus",true);this.scrollLock=getBooleanOption(this.options,this.element,component,"scrollLock",true);this.draggable=getBooleanOption(this.options,this.element,component,"draggable",true);return this;} bindDrag(){ if(!this.dialog)return;const header=this.dialog.querySelector(".modal-header");if(!header)return;this.on(header,"pointerdown",(event)=>this.startDrag(event));} startDrag(event){ if(!this.isOpen || !this.draggable || !this.dialog || event.button !==0)return;const target=event.target instanceof Element?event.target:null;if(target?.closest("button,a,input,select,textarea,label,[data-modal-close],[data-no-drag]"))return;const originX=Number.parseFloat(this.dialog.style.getPropertyValue("--aksara-modal-x"))|| 0;const originY=Number.parseFloat(this.dialog.style.getPropertyValue("--aksara-modal-y"))|| 0;const rect=this.dialog.getBoundingClientRect();const baseLeft=rect.left-originX;const baseTop=rect.top-originY;const padding=8;const move=(moveEvent)=>this.drag(moveEvent);const end=()=>{ document.removeEventListener("pointermove",move);document.removeEventListener("pointerup",end);document.removeEventListener("pointercancel",end);this.dialog?.classList.remove("is-dragging");this.dragState=null;};this.dragState={ originX,originY,pointerX:event.clientX,pointerY:event.clientY,minX:padding-baseLeft,maxX:window.innerWidth-padding-rect.width-baseLeft,minY:padding-baseTop,maxY:window.innerHeight-padding-rect.height-baseTop };this.dialog.classList.add("is-dragging");document.addEventListener("pointermove",move);document.addEventListener("pointerup",end);document.addEventListener("pointercancel",end);event.preventDefault();} drag(event){ if(!this.dialog || !this.dragState)return;const nextX=clamp(this.dragState.originX+event.clientX-this.dragState.pointerX,this.dragState.minX,this.dragState.maxX);const nextY=clamp(this.dragState.originY+event.clientY-this.dragState.pointerY,this.dragState.minY,this.dragState.maxY);this.dialog.style.setProperty("--aksara-modal-x",`${nextX}px`);this.dialog.style.setProperty("--aksara-modal-y",`${nextY}px`);} resetPosition(){ if(!this.dialog)return;this.dialog.style.removeProperty("--aksara-modal-x");this.dialog.style.removeProperty("--aksara-modal-y");this.dialog.classList.remove("is-dragging");} show(){ if(this.isOpen)return this;this.previousFocus=document.activeElement;this.isOpen=true;this.element.classList.add("modal-open");this.element.setAttribute("aria-hidden","false");if(this.scrollLock)document.documentElement.style.overflow="hidden";if(this.focus)this.focusFirst();emit(this.element,"modal:show",{ instance:this });return this;} hide(){ if(!this.isOpen)return this;this.isOpen=false;this.element.classList.remove("modal-open");this.element.setAttribute("aria-hidden","true");this.resetPosition();if(this.scrollLock)document.documentElement.style.overflow="";if(this.previousFocus && typeof this.previousFocus.focus==="function")this.previousFocus.focus();emit(this.element,"modal:hide",{ instance:this });return this;} toggle(){ return this.isOpen?this.hide():this.show();} focusFirst(){ const focusable=Array.from(this.element.querySelectorAll(focusableSelector));const first=focusable[0]|| this.element;if(!this.element.hasAttribute("tabindex"))this.element.setAttribute("tabindex","-1");first.focus({ preventScroll:true });} onKeydown(event){ if(!this.isOpen)return;if(event.key==="Escape"){ if(this.keyboard){ event.preventDefault();this.hide();} else if(this.backdrop==="static"){ const staticClass=`${this.constructor.componentName}-static`;this.element.classList.add(staticClass);setTimeout(()=>this.element.classList.remove(staticClass),150);} return;} if(event.key !=="Tab")return;const focusable=Array.from(this.element.querySelectorAll(focusableSelector));if(!focusable.length){ event.preventDefault();this.element.focus();return;} const first=focusable[0];const last=focusable[focusable.length-1];if(event.shiftKey && document.activeElement===first){ event.preventDefault();last.focus();} else if(!event.shiftKey && document.activeElement===last){ event.preventDefault();first.focus();} } } class Dropdown extends Component { static componentName="dropdown";trigger;menu;isOpen;originalParent;originalSibling;scrollHandler;placement;container;offset;keyboard;closeOnSelect;closeOnOutside;constructor(element,options={}){ super(element,options);let trigger;let menu=null;if(element.matches("[data-dropdown]")){ trigger=element;} else if(element.classList.contains("dropdown")){ trigger=element.querySelector("[data-dropdown]")|| element.querySelector("button,a");menu=element.querySelector(".dropdown-menu");} else { trigger=element;} this.trigger=trigger;if(!menu){ const menuSelector=options.menu || options.target ||(trigger &&(trigger.getAttribute("data-dropdown")|| trigger.getAttribute("data-target")));if(menuSelector && typeof menuSelector==="string"){ menu=document.querySelector(menuSelector);} else if(menuSelector instanceof HTMLElement){ menu=menuSelector;} if(!menu && trigger){ if(trigger.nextElementSibling && trigger.nextElementSibling.classList.contains("dropdown-menu")){ menu=trigger.nextElementSibling;} else { menu=trigger.parentElement?.querySelector(".dropdown-menu")|| null;} } } this.menu=menu;this.isOpen=false;this.originalParent=null;this.originalSibling=null;this.scrollHandler=null;this.updateOptions(options);if(this.trigger?.matches(".btn-sm,.input-sm,.form-control-sm,.form-select-sm")|| this.element.classList.contains("dropdown-sm")){ this.menu?.classList.add("dropdown-menu-sm");} if(this.trigger){ this.trigger.setAttribute("aria-haspopup","true");this.trigger.setAttribute("aria-expanded","false");this.on(this.trigger,"click",(event)=>{ const customEvent=event;if(customEvent.__aksaraDropdownHandled)return;customEvent.__aksaraDropdownHandled=true;event.preventDefault();this.toggle(event);});} this.on(document,"click",(event)=>{ if(!this.closeOnOutside)return;const target=event.target;if(!this.element.contains(target)&& !this.menu?.contains(target)){ this.hide();} });this.on(document,"keydown",(event)=>{ if(this.keyboard && event.key==="Escape")this.hide();});if(this.menu){ this.on(this.menu,"click",(event)=>{ const target=event.target;const item=target.closest(".dropdown-item");if(this.closeOnSelect && item && !item.disabled && !item.classList.contains("disabled")){ this.hide();} });} } updateOptions(options={}){ super.updateOptions(options);this.placement=getOption(this.options,this.trigger,"dropdown","placement",getData(this.element,"dropdown","placement")|| "bottom");this.container=getOption(this.options,this.trigger,"dropdown","container",getData(this.element,"dropdown","container")|| "body");this.offset=getNumberOption(this.options,this.trigger,"dropdown","offset",getNumberOption({},this.element,"dropdown","offset",4));this.keyboard=getBooleanOption(this.options,this.trigger,"dropdown","keyboard",getBooleanOption({},this.element,"dropdown","keyboard",true));this.closeOnSelect=getBooleanOption(this.options,this.trigger,"dropdown","closeOnSelect",getBooleanOption({},this.element,"dropdown","closeOnSelect",true));this.closeOnOutside=getBooleanOption(this.options,this.trigger,"dropdown","closeOnOutside",getBooleanOption({},this.element,"dropdown","closeOnOutside",true));return this;} position(){ if(!this.menu || !this.isOpen || !this.trigger)return;this.menu.style.display="block";this.menu.style.position="absolute";this.menu.style.zIndex="1000";const triggerRect=this.trigger.getBoundingClientRect();const menuRect=this.menu.getBoundingClientRect();const gap=this.offset;let top;let left;let placement=this.placement;if(placement==="auto"){ const spaceBelow=window.innerHeight-triggerRect.bottom;const spaceAbove=triggerRect.top;placement=spaceBelow>=menuRect.height || spaceBelow>=spaceAbove?"bottom":"top";} this.menu.classList.remove("dropdown-top","dropdown-bottom","dropdown-start","dropdown-end");this.menu.classList.add(`dropdown-${placement}`);const isRtl=document.documentElement.getAttribute("dir")==="rtl" || document.body?.getAttribute("dir")==="rtl";if(placement==="top"){ top=triggerRect.top-menuRect.height-gap;left=isRtl?triggerRect.right-menuRect.width:triggerRect.left;} else if(placement==="start"){ top=triggerRect.top;left=isRtl?triggerRect.right+gap:triggerRect.left-menuRect.width-gap;} else if(placement==="end"){ top=triggerRect.top;left=isRtl?triggerRect.left-menuRect.width-gap:triggerRect.right+gap;} else { top=triggerRect.bottom+gap;left=isRtl?triggerRect.right-menuRect.width:triggerRect.left;} const viewportWidth=window.innerWidth;left=Math.max(8,Math.min(left,viewportWidth-menuRect.width-8));this.menu.style.top=`${top+window.scrollY}px`;this.menu.style.left=`${left+window.scrollX}px`;this.menu.style.bottom="auto";this.menu.style.right="auto";} show(){ if(!this.menu || this.isOpen)return this;this.isOpen=true;this.originalParent=this.menu.parentNode;this.originalSibling=this.menu.nextSibling;let containerEl=document.body;if(typeof this.container==="string" && this.container !=="body"){ containerEl=document.querySelector(this.container)|| document.body;} else if(this.container instanceof HTMLElement){ containerEl=this.container;} containerEl.appendChild(this.menu);this.menu.classList.add("dropdown-open");this.trigger?.setAttribute("aria-expanded","true");this.position();this.scrollHandler=()=>this.position();window.addEventListener("scroll",this.scrollHandler,{ passive:true });window.addEventListener("resize",this.scrollHandler);emit(this.element,"dropdown:show",{ instance:this });return this;} hide(){ if(!this.menu || !this.isOpen)return this;this.isOpen=false;if(this.scrollHandler){ window.removeEventListener("scroll",this.scrollHandler);window.removeEventListener("resize",this.scrollHandler);this.scrollHandler=null;} this.menu.classList.remove("dropdown-open","dropdown-top","dropdown-bottom","dropdown-start","dropdown-end");this.trigger?.setAttribute("aria-expanded","false");if(this.originalParent){ this.originalParent.insertBefore(this.menu,this.originalSibling);} this.menu.style.display="";this.menu.style.position="";this.menu.style.top="";this.menu.style.left="";this.menu.style.zIndex="";emit(this.element,"dropdown:hide",{ instance:this });return this;} toggle(event){ const clickEvent=(event || window.event);if(clickEvent && clickEvent.type==="click"){ if(clickEvent.__aksaraDropdownHandled && !event){ return this;} clickEvent.__aksaraDropdownHandled=true;} return this.isOpen?this.hide():this.show();} destroy(){ this.hide();super.destroy();} } class FloatingText extends Component { static dataAttribute="data-floating";static role="tooltip";static componentName="floating";tip;showTimeout;hideTimeout;container;html;content;placement;trigger;offset;showDelay;hideDelay;keyboard;constructor(element,options={}){ super(element,options);this.tip=null;this.showTimeout=null;this.hideTimeout=null;this.updateOptions(options);this.bindTriggers();this.on(document,"keydown",(event)=>{ if(this.keyboard && event.key==="Escape")this.hide();});} updateOptions(options={}){ super.updateOptions(options);const ctor=this.constructor;const component=ctor.componentName;const rawContent=(this.options.content??this.options.text??getData(this.element,component,"content")??this.element.getAttribute(ctor.dataAttribute)??"");this.container=getOption(this.options,this.element,component,"container",this.element.getAttribute("data-container")|| "body");this.html=getBooleanOption(this.options,this.element,component,"html",this.element.getAttribute("data-html")==="true");this.content=rawContent;this.placement=getOption(this.options,this.element,component,"placement",this.element.getAttribute("data-placement")|| "top");this.trigger=getOption(this.options,this.element,component,"trigger","hover focus");this.offset=getNumberOption(this.options,this.element,component,"offset",8);this.showDelay=getNumberOption(this.options,this.element,component,"showDelay",0);this.hideDelay=getNumberOption(this.options,this.element,component,"hideDelay",0);this.keyboard=getBooleanOption(this.options,this.element,component,"keyboard",true);if(this.tip){ if(this.html){ this.tip.innerHTML=this.content;} else { this.tip.textContent=this.content;} this.position();} return this;} bindTriggers(){ const triggers=String(this.trigger).split(/\s+/).filter(Boolean);if(triggers.includes("hover")){ this.on(this.element,"mouseenter",()=>this.scheduleShow());this.on(this.element,"mouseleave",()=>this.scheduleHide());} if(triggers.includes("focus")){ this.on(this.element,"focus",()=>this.scheduleShow());this.on(this.element,"blur",()=>this.scheduleHide());} if(triggers.includes("click")){ this.on(this.element,"click",(event)=>{ event.preventDefault();this.toggle();});} } scheduleShow(){ if(this.hideTimeout)clearTimeout(this.hideTimeout);if(this.showTimeout)clearTimeout(this.showTimeout);this.showTimeout=setTimeout(()=>this.show(),this.showDelay);} scheduleHide(){ if(this.showTimeout)clearTimeout(this.showTimeout);if(this.hideTimeout)clearTimeout(this.hideTimeout);this.hideTimeout=setTimeout(()=>this.hide(),this.hideDelay);} show(){ if(this.tip || !this.content)return this;const ctor=this.constructor;this.tip=document.createElement("div");this.tip.className=ctor.componentName;if(this.html){ this.tip.innerHTML=this.content;} else { this.tip.textContent=this.content;} this.tip.setAttribute("role",ctor.role);let containerEl=document.body;if(typeof this.container==="string" && this.container !=="body"){ containerEl=document.querySelector(this.container)|| document.body;} else if(this.container instanceof HTMLElement){ containerEl=this.container;} containerEl.append(this.tip);this.position();emit(this.element,`${ctor.componentName}:show`,{ instance:this });return this;} toggle(){ return this.tip?this.hide():this.show();} hide(){ if(!this.tip)return this;const ctor=this.constructor;this.tip.remove();this.tip=null;emit(this.element,`${ctor.componentName}:hide`,{ instance:this });return this;} position(){ if(!this.tip)return;const rect=this.element.getBoundingClientRect();const tipRect=this.tip.getBoundingClientRect();const gap=this.offset;const isRtl=document.documentElement.getAttribute("dir")==="rtl" || document.body?.getAttribute("dir")==="rtl";let placement=this.placement;if(placement==="auto"){ const spaceBelow=window.innerHeight-rect.bottom;const spaceAbove=rect.top;placement=spaceAbove>=tipRect.height || spaceAbove>=spaceBelow?"top":"bottom";} let physicalPlacement=placement;if(placement==="start"){ physicalPlacement=isRtl?"right":"left";} else if(placement==="end"){ physicalPlacement=isRtl?"left":"right";} const ctor=this.constructor;this.tip.className=`${ctor.componentName} ${ctor.componentName}-${placement}`;const topMap={ top:rect.top-tipRect.height-gap,bottom:rect.bottom+gap,left:rect.top+rect.height/2-tipRect.height/2,right:rect.top+rect.height/2-tipRect.height/2 };const top=topMap[physicalPlacement]??rect.top-tipRect.height-gap;const leftMap={ top:rect.left+rect.width/2-tipRect.width/2,bottom:rect.left+rect.width/2-tipRect.width/2,left:rect.left-tipRect.width-gap,right:rect.right+gap };const left=leftMap[physicalPlacement]??rect.left;this.tip.style.top=`${Math.max(4,top+window.scrollY)}px`;this.tip.style.left=`${Math.max(4,left+window.scrollX)}px`;} destroy(){ if(this.showTimeout)clearTimeout(this.showTimeout);if(this.hideTimeout)clearTimeout(this.hideTimeout);this.hide();super.destroy();} } class Tooltip extends FloatingText { static componentName="tooltip";static dataAttribute="data-tooltip";static role="tooltip";} class Popover extends FloatingText { static componentName="popover";static dataAttribute="data-popover";static role="dialog";} function collapsePanel(panel,duration=250){ const animatedPanel=panel;if(animatedPanel._aksaraCollapseTimer){ clearTimeout(animatedPanel._aksaraCollapseTimer);delete animatedPanel._aksaraCollapseTimer;} if(animatedPanel._aksaraCollapseEnd){ panel.removeEventListener("transitionend",animatedPanel._aksaraCollapseEnd);delete animatedPanel._aksaraCollapseEnd;} if(duration<=0 ||(typeof window !=="undefined" && window.matchMedia?.("(prefers-reduced-motion:reduce)").matches)){ panel.hidden=true;panel.style.removeProperty("height");panel.style.removeProperty("overflow");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");return;} const computed=window.getComputedStyle(panel);const currentHeight=panel.getBoundingClientRect().height;const currentPaddingTop=computed.paddingTop;const currentPaddingBottom=computed.paddingBottom;panel.style.overflow="hidden";panel.style.height=`${currentHeight}px`;panel.style.paddingTop=currentPaddingTop;panel.style.paddingBottom=currentPaddingBottom;panel.style.opacity="1";panel.style.transition=`height ${duration}ms cubic-bezier(0.4,0,0.2,1),padding-top ${duration}ms cubic-bezier(0.4,0,0.2,1),padding-bottom ${duration}ms cubic-bezier(0.4,0,0.2,1),opacity ${Math.round(duration*0.7)}ms ease`;void panel.offsetHeight;panel.style.height="0px";panel.style.paddingTop="0px";panel.style.paddingBottom="0px";panel.style.opacity="0";const cleanup=()=>{ panel.hidden=true;panel.style.removeProperty("height");panel.style.removeProperty("overflow");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");if(animatedPanel._aksaraCollapseEnd){ panel.removeEventListener("transitionend",animatedPanel._aksaraCollapseEnd);delete animatedPanel._aksaraCollapseEnd;} delete animatedPanel._aksaraCollapseTimer;};const onEnd=(e)=>{ if(e.target===panel && e.propertyName==="height"){ cleanup();} };animatedPanel._aksaraCollapseEnd=onEnd;panel.addEventListener("transitionend",onEnd);animatedPanel._aksaraCollapseTimer=setTimeout(cleanup,duration+60);} function expandPanel(panel,duration=250){ const animatedPanel=panel;if(animatedPanel._aksaraCollapseTimer){ clearTimeout(animatedPanel._aksaraCollapseTimer);delete animatedPanel._aksaraCollapseTimer;} if(animatedPanel._aksaraCollapseEnd){ panel.removeEventListener("transitionend",animatedPanel._aksaraCollapseEnd);delete animatedPanel._aksaraCollapseEnd;} if(duration<=0 ||(typeof window !=="undefined" && window.matchMedia?.("(prefers-reduced-motion:reduce)").matches)){ panel.hidden=false;panel.style.removeProperty("height");panel.style.removeProperty("overflow");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");return;} panel.hidden=false;panel.style.removeProperty("height");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");const computed=window.getComputedStyle(panel);const targetPaddingTop=computed.paddingTop;const targetPaddingBottom=computed.paddingBottom;const targetHeight=panel.getBoundingClientRect().height;panel.style.overflow="hidden";panel.style.height="0px";panel.style.paddingTop="0px";panel.style.paddingBottom="0px";panel.style.opacity="0";void panel.offsetHeight;panel.style.transition=`height ${duration}ms cubic-bezier(0.4,0,0.2,1),padding-top ${duration}ms cubic-bezier(0.4,0,0.2,1),padding-bottom ${duration}ms cubic-bezier(0.4,0,0.2,1),opacity ${duration}ms ease`;panel.style.height=`${targetHeight}px`;panel.style.paddingTop=targetPaddingTop;panel.style.paddingBottom=targetPaddingBottom;panel.style.opacity="1";const cleanup=()=>{ panel.style.removeProperty("height");panel.style.removeProperty("overflow");panel.style.removeProperty("padding-top");panel.style.removeProperty("padding-bottom");panel.style.removeProperty("opacity");panel.style.removeProperty("transition");if(animatedPanel._aksaraCollapseEnd){ panel.removeEventListener("transitionend",animatedPanel._aksaraCollapseEnd);delete animatedPanel._aksaraCollapseEnd;} delete animatedPanel._aksaraCollapseTimer;};const onEnd=(e)=>{ if(e.target===panel && e.propertyName==="height"){ cleanup();} };animatedPanel._aksaraCollapseEnd=onEnd;panel.addEventListener("transitionend",onEnd);animatedPanel._aksaraCollapseTimer=setTimeout(cleanup,duration+60);} class Accordion extends Component { static componentName="accordion";parent;collapsible;buttonSelector;duration;constructor(element,options={}){ super(element,options);this.updateOptions(options);this.on(element,"click",(event)=>{ const target=event.target;const button=target.closest(this.buttonSelector);if(!button || !element.contains(button))return;const panelSelector=button.getAttribute("data-accordion");if(!panelSelector)return;const panel=document.querySelector(panelSelector);if(!panel)return;const expanded=button.getAttribute("aria-expanded")==="true";if(expanded && !this.collapsible)return;const parentScope=this.getParentScope();if(!expanded && parentScope){ parentScope.querySelectorAll(this.buttonSelector).forEach((otherButton)=>{ if(otherButton===button)return;otherButton.setAttribute("aria-expanded","false");const otherPanelSelector=otherButton.getAttribute("data-accordion");if(otherPanelSelector){ const otherPanel=document.querySelector(otherPanelSelector);if(otherPanel &&(!otherPanel.hidden || otherPanel.offsetHeight>0)){ collapsePanel(otherPanel,this.duration);} } });} button.setAttribute("aria-expanded",String(!expanded));if(expanded){ collapsePanel(panel,this.duration);} else { expandPanel(panel,this.duration);} emit(element,"accordion:toggle",{ button,panel,expanded:!expanded });});} updateOptions(options={}){ super.updateOptions(options);const parentVal=getOption(this.options,this.element,"accordion","parent",true);if(parentVal==="true")this.parent=true;else if(parentVal==="false")this.parent=false;else this.parent=parentVal;this.collapsible=getBooleanOption(this.options,this.element,"accordion","collapsible",true);this.buttonSelector=getOption(this.options,this.element,"accordion","buttonSelector","[data-accordion]");this.duration=getNumberOption(this.options,this.element,"accordion","duration",250);return this;} getParentScope(){ if(this.parent===false)return null;if(this.parent===true)return this.element;if(this.parent instanceof Element)return this.parent;if(typeof this.parent==="string")return document.querySelector(this.parent)|| this.element;return this.element;} } class Tabs extends Component { static componentName="tabs";tabSelector;panelSelector;active;activeIndex;keyboard;loop;orientation;constructor(element,options={}){ super(element,options);this.updateOptions(options);this.on(element,"click",(event)=>{ const target=event.target;const tab=target.closest(this.tabSelector);if(!tab || !element.contains(tab))return;event.preventDefault();this.show(tab);});this.on(element,"keydown",(event)=>{ if(!this.keyboard)return;const keyEvent=event;const keys=this.orientation==="vertical"?["ArrowUp","ArrowDown"]:["ArrowLeft","ArrowRight"];if(!keys.includes(keyEvent.key))return;const tabs=Array.from(element.querySelectorAll(this.tabSelector));const index=tabs.indexOf(document.activeElement);if(index<0)return;event.preventDefault();const isNext=keyEvent.key==="ArrowRight" || keyEvent.key==="ArrowDown";const fallback=this.loop?(isNext?tabs[0]:tabs[tabs.length-1]):tabs[index];const next=isNext?tabs[index+1]|| fallback:tabs[index-1]|| fallback;if(next){ next.focus();this.show(next);} });this.activateInitial();} updateOptions(options={}){ const shouldActivate=(options.active !==undefined || options.activeIndex !==undefined)&& this.cleanups.length>0;super.updateOptions(options);this.tabSelector=getOption(this.options,this.element,"tabs","tabSelector","[data-tabs]");this.panelSelector=getOption(this.options,this.element,"tabs","panelSelector",null);this.active=getOption(this.options,this.element,"tabs","active",null);this.activeIndex=getNumberOption(this.options,this.element,"tabs","activeIndex",-1);this.keyboard=getBooleanOption(this.options,this.element,"tabs","keyboard",true);this.loop=getBooleanOption(this.options,this.element,"tabs","loop",true);this.orientation=getOption(this.options,this.element,"tabs","orientation",this.element.getAttribute("aria-orientation")|| "horizontal");this.element.setAttribute("role",this.element.getAttribute("role")|| "tablist");this.element.setAttribute("aria-orientation",this.orientation);if(shouldActivate)this.activateInitial();return this;} activateInitial(){ const tabs=Array.from(this.element.querySelectorAll(this.tabSelector));if(!tabs.length)return;let initial=null;if(this.active instanceof HTMLElement){ initial=this.active;} else if(typeof this.active==="string"){ initial=this.element.querySelector(this.active)|| document.querySelector(this.active);} if(!initial && this.activeIndex>=0){ initial=tabs[this.activeIndex]|| null;} if(!initial){ initial=tabs.find((tab)=>tab.getAttribute("aria-selected")==="true")|| tabs[0];} if(initial)this.show(initial);} show(tab){ const selector=tab.getAttribute("data-tabs");const panel=selector?document.querySelector(selector):null;if(!panel)return this;this.element.querySelectorAll(this.tabSelector).forEach((item)=>{ const selected=item===tab;item.setAttribute("role",item.getAttribute("role")|| "tab");item.setAttribute("aria-selected",String(selected));item.tabIndex=selected?0:-1;const targetSelector=item.getAttribute("data-tabs");const target=targetSelector?document.querySelector(targetSelector):null;if(target)target.hidden=!selected;});if(this.panelSelector){ document.querySelectorAll(this.panelSelector).forEach((item)=>{ if(item !==panel)item.hidden=true;});} panel.setAttribute("role",panel.getAttribute("role")|| "tabpanel");emit(this.element,"tabs:show",{ tab,panel,instance:this });return this;} } class Toast extends Component { static componentName="toast";timeout=null;delay;autohide;constructor(element,options={}){ super(element,options);this.updateOptions(options);element.setAttribute("role",element.getAttribute("role")|| "status");element.setAttribute("aria-live",element.getAttribute("aria-live")|| "polite");} updateOptions(options={}){ super.updateOptions(options);this.delay=getNumberOption(this.options,this.element,"toast","delay",5000);this.autohide=getBooleanOption(this.options,this.element,"toast","autohide",true);return this;} show(){ this.element.classList.add("toast-show");if(this.timeout)clearTimeout(this.timeout);if(this.autohide && this.delay>0)this.timeout=setTimeout(()=>this.hide(),this.delay);emit(this.element,"toast:show",{ instance:this });return this;} hide(){ this.element.classList.remove("toast-show");if(this.timeout)clearTimeout(this.timeout);emit(this.element,"toast:hide",{ instance:this });return this;} destroy(){ if(this.timeout)clearTimeout(this.timeout);super.destroy();} } class Carousel extends Component { static componentName="carousel";timeout=null;items;index;interval;autoplay;pauseOnHover;keyboard;loop;constructor(element,options={}){ super(element,options);this.items=Array.from(element.querySelectorAll("[data-carousel-item]"));this.index=this.resolveInitialIndex();this.updateOptions(options);this.show(this.index);this.on(element,"click",(event)=>{ const target=event.target;const action=target.closest("[data-carousel]");if(!action)return;const value=action.getAttribute("data-carousel");if(value==="next")this.next();if(value==="prev")this.prev();if(value !=="next" && value !=="prev" && value !=="")this.show(Number(value));});this.on(element,"keydown",(event)=>{ const keyEvent=event;if(!this.keyboard || !["ArrowLeft","ArrowRight"].includes(keyEvent.key))return;event.preventDefault();if(keyEvent.key==="ArrowRight")this.next();if(keyEvent.key==="ArrowLeft")this.prev();});if(this.pauseOnHover){ this.on(element,"mouseenter",()=>this.pause());this.on(element,"mouseleave",()=>this.play());} if(this.autoplay)this.play();} updateOptions(options={}){ super.updateOptions(options);this.interval=getNumberOption(this.options,this.element,"carousel","interval",5000);this.autoplay=getBooleanOption(this.options,this.element,"carousel","autoplay",false);this.pauseOnHover=getBooleanOption(this.options,this.element,"carousel","pauseOnHover",true);this.keyboard=getBooleanOption(this.options,this.element,"carousel","keyboard",true);this.loop=getBooleanOption(this.options,this.element,"carousel","loop",true);const activeIndex=getNumberOption(this.options,this.element,"carousel","activeIndex",-1);if(activeIndex>=0)this.show(activeIndex);if(this.autoplay)this.play();if(!this.autoplay)this.pause();return this;} resolveInitialIndex(){ const configured=getNumberOption(this.options,this.element,"carousel","activeIndex",-1);if(configured>=0)return configured;return Math.max(0,this.items.findIndex((item)=>!item.hidden));} show(index){ if(!this.items.length)return this;if(!this.loop &&(index<0 || index>=this.items.length))return this;this.index=(index+this.items.length)% this.items.length;this.items.forEach((item,itemIndex)=>{ item.hidden=itemIndex !==this.index;});emit(this.element,"carousel:show",{ index:this.index,instance:this });return this;} next(){ return this.show(this.index+1);} prev(){ return this.show(this.index-1);} play(){ if(this.timeout)clearInterval(this.timeout);if(this.autoplay && this.interval>0){ this.timeout=setInterval(()=>this.next(),this.interval);} return this;} pause(){ if(this.timeout)clearInterval(this.timeout);this.timeout=null;return this;} destroy(){ this.pause();super.destroy();} } class Offcanvas extends Modal { static componentName="offcanvas";show(){ if(this.isOpen)return this;this.previousFocus=document.activeElement;this.isOpen=true;this.element.classList.add("offcanvas-open");this.element.setAttribute("aria-hidden","false");if(this.scrollLock)document.documentElement.style.overflow="hidden";if(this.focus)this.focusFirst();emit(this.element,"offcanvas:show",{ instance:this });return this;} hide(){ if(!this.isOpen)return this;this.isOpen=false;this.element.classList.remove("offcanvas-open");this.element.setAttribute("aria-hidden","true");if(this.scrollLock)document.documentElement.style.overflow="";if(this.previousFocus && typeof this.previousFocus.focus==="function")this.previousFocus.focus();emit(this.element,"offcanvas:hide",{ instance:this });return this;} } function readTriggerOptions(trigger,component,names){ return names.reduce((options,name)=>{ const value=getData(trigger,component,name);if(value !==null)options[name]=value;return options;},{});} function dismissTarget(target){ if(!target)return;if(target.classList.contains("modal")){ getInstance(target,Modal).hide();} else if(target.classList.contains("offcanvas")){ getInstance(target,Offcanvas).hide();} else if(target.classList.contains("toast")){ getInstance(target,Toast).hide();} else if(target.classList.contains("dropdown")|| target.matches("[data-dropdown]")){ getInstance(target,Dropdown).hide();} else { target.remove();} } function resolveDismissTargets(trigger){ const selector=trigger.getAttribute("data-dismiss");if(selector){ try { return Array.from(document.querySelectorAll(selector));} catch { return[];} } const localTarget=trigger.closest(".alert,.toast,.modal,.offcanvas,.dropdown,.popover,.tooltip");return localTarget?[localTarget]:[];} function bindDataApi(){ document.querySelectorAll("[data-dismiss]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraDismissTrigger)return;customTrigger.__aksaraDismissTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();resolveDismissTargets(trigger).forEach((target)=>dismissTarget(target));});});document.querySelectorAll("[data-modal-close]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraModalCloseTrigger)return;customTrigger.__aksaraModalCloseTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-modal-close");const modal=targetSelector?document.querySelector(targetSelector):trigger.closest(".modal");if(modal)getInstance(modal,Modal).hide();});});document.querySelectorAll("[data-modal]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraModalTrigger)return;customTrigger.__aksaraModalTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-modal");if(targetSelector){ const target=document.querySelector(targetSelector);if(target){ const options=readTriggerOptions(trigger,"modal",["backdrop","keyboard","focus","scrollLock","draggable"]);getInstance(target,Modal,options).show();} } });});document.querySelectorAll("[data-offcanvas-close]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraOffcanvasCloseTrigger)return;customTrigger.__aksaraOffcanvasCloseTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-offcanvas-close");const panel=targetSelector?document.querySelector(targetSelector):trigger.closest(".offcanvas");if(panel)getInstance(panel,Offcanvas).hide();});});document.querySelectorAll("[data-offcanvas]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraOffcanvasTrigger)return;customTrigger.__aksaraOffcanvasTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-offcanvas");if(targetSelector){ const target=document.querySelector(targetSelector);if(target){ const options=readTriggerOptions(trigger,"offcanvas",["backdrop","keyboard","focus","scrollLock"]);getInstance(target,Offcanvas,options).show();} } });});document.querySelectorAll("[data-toast]").forEach((trigger)=>{ const customTrigger=trigger;if(customTrigger.__aksaraToastTrigger)return;customTrigger.__aksaraToastTrigger=true;trigger.addEventListener("click",(event)=>{ event.preventDefault();const targetSelector=trigger.getAttribute("data-toast");if(targetSelector){ const target=document.querySelector(targetSelector);if(target){ const options=readTriggerOptions(trigger,"toast",["delay","autohide"]);getInstance(target,Toast,options).show();} } });});} const injectedArbitraryRules=new Set();let arbitrarySheet=null;let arbitraryRuleIndex=0;function getArbitrarySheet(){ if(typeof document==="undefined")return null;if(!arbitrarySheet){ if("adoptedStyleSheets" in document && typeof CSSStyleSheet !=="undefined"){ arbitrarySheet=new CSSStyleSheet();document.adoptedStyleSheets=[...document.adoptedStyleSheets,arbitrarySheet];} } return arbitrarySheet;} function escapeArbitraryClass(className){ return Array.from(className).map((char,index)=>{ if(/^[a-zA-Z_-]$/.test(char))return char;if(/^[0-9]$/.test(char)){ return index===0?`\\${char.charCodeAt(0).toString(16).padStart(6,"0")}`:char;} return `\\${char}`;}).join("");} const runtimeArbitraryPropertyMap={ m:(v)=>`margin:${v}`,mt:(v)=>`margin-block-start:${v}`,mb:(v)=>`margin-block-end:${v}`,ms:(v)=>`margin-inline-start:${v}`,me:(v)=>`margin-inline-end:${v}`,mx:(v)=>`margin-inline:${v}`,my:(v)=>`margin-block:${v}`,p:(v)=>`padding:${v}`,pt:(v)=>`padding-block-start:${v}`,pb:(v)=>`padding-block-end:${v}`,ps:(v)=>`padding-inline-start:${v}`,pe:(v)=>`padding-inline-end:${v}`,px:(v)=>`padding-inline:${v}`,py:(v)=>`padding-block:${v}`,gap:(v)=>`gap:${v}`,"row-gap":(v)=>`row-gap:${v}`,"col-gap":(v)=>`column-gap:${v}`,g:(v)=>`--aksara-gutter-x:${v};--aksara-gutter-y:${v}`,gx:(v)=>`--aksara-gutter-x:${v}`,gy:(v)=>`--aksara-gutter-y:${v}`,w:(v)=>`width:${v}`,h:(v)=>`height:${v}`,"min-w":(v)=>`min-width:${v}`,"max-w":(v)=>`max-width:${v}`,"min-h":(v)=>`min-height:${v}`,"max-h":(v)=>`max-height:${v}`,top:(v)=>`inset-block-start:${v}`,bottom:(v)=>`inset-block-end:${v}`,start:(v)=>`inset-inline-start:${v}`,end:(v)=>`inset-inline-end:${v}`,inset:(v)=>`inset:${v}`,"inset-x":(v)=>`inset-inline:${v}`,"inset-y":(v)=>`inset-block:${v}`,"translate-x":(v)=>`transform:translateX(${v})`,"translate-y":(v)=>`transform:translateY(${v})`,rotate:(v)=>`transform:rotate(${v})`,scale:(v)=>`transform:scale(${v})`,rounded:(v)=>`border-radius:${v}`,border:(v)=>`border-width:${v}`,opacity:(v)=>`opacity:${v}`,z:(v)=>`z-index:${v}`,leading:(v)=>`line-height:${v}`,tracking:(v)=>`letter-spacing:${v}`,text:(v)=>(/^(#[0-9a-fA-F]+|rgb|hsl)/.test(v)?`color:${v}`:`font-size:${v}`),bg:(v)=>`background-color:${v}`,overscroll:(v)=>`overscroll-behavior:${v}`,"overscroll-x":(v)=>`overscroll-behavior-x:${v}`,"overscroll-y":(v)=>`overscroll-behavior-y:${v}` };const runtimeBreakpoints={ sm:"36rem",md:"48rem",lg:"62rem",xl:"75rem","2xl":"87.5rem","3xl":"100rem" };const runtimeStateSelectors={ hover:":hover",focus:":focus",active:":active",disabled:":disabled",checked:":checked",selected:'[aria-selected="true"]',visited:":visited",first:":first-child",last:":last-child",odd:":nth-child(odd)",even:":nth-child(even)" };function injectArbitraryClass(className){ if(injectedArbitraryRules.has(className))return;injectedArbitraryRules.add(className);const parts=className.split(":");const utility=parts.pop();if(!utility)return;const match=utility.match(/^(-)?([a-zA-Z0-9_-]+)-\[(.+)\]$/);if(!match)return;const isNegative=Boolean(match[1]);const prop=match[2];let val=match[3];const resolver=runtimeArbitraryPropertyMap[prop];if(!resolver)return;if(isNegative && !val.startsWith("-")){ val=`-${val}`;} const declarations=resolver(val);const escaped=escapeArbitraryClass(className);let selector=`.${escaped}`;let stateSelector="";let themeVariant="";let breakpointVariant="";for(const v of parts){ if(v==="dark" || v==="light")themeVariant=v;else if(runtimeBreakpoints[v])breakpointVariant=v;else if(runtimeStateSelectors[v])stateSelector+=runtimeStateSelectors[v];} selector+=stateSelector;let rule=`${selector}{${declarations}}`;if(themeVariant){ rule=themeVariant==="dark"?`[data-theme="dark"]${selector},.dark ${selector}{${declarations}}`:`[data-theme="light"]${selector},.light ${selector}{${declarations}}`;} if(breakpointVariant){ rule=`@media(min-width:${runtimeBreakpoints[breakpointVariant]}){${rule}}`;} const sheet=getArbitrarySheet();if(sheet){ try { sheet.insertRule(rule,arbitraryRuleIndex++);} catch { } } } function processElementClasses(el){ const classAttr=el.getAttribute("class");if(!classAttr || !classAttr.includes("-["))return;const tokens=classAttr.split(/\s+/);for(const token of tokens){ if(token.includes("-[")&& token.endsWith("]")){ injectArbitraryClass(token);} } } function scanArbitraryDom(root=document){ if(typeof document==="undefined")return;if(root instanceof Element){ processElementClasses(root);} root.querySelectorAll('[class*="-["]').forEach(processElementClasses);} let mutationObserverStarted=false;function setupArbitraryObserver(){ if(mutationObserverStarted || typeof MutationObserver==="undefined" || typeof document==="undefined")return;mutationObserverStarted=true;const observer=new MutationObserver((mutations)=>{ for(const m of mutations){ if(m.type==="attributes" && m.target instanceof Element){ processElementClasses(m.target);} else if(m.type==="childList"){ m.addedNodes.forEach((node)=>{ if(node instanceof Element){ scanArbitraryDom(node);} });} } });observer.observe(document.documentElement,{ subtree:true,childList:true,attributes:true,attributeFilter:["class"]});} let currentTheme="system";function getSystemTheme(){ if(typeof window !=="undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme:dark)").matches){ return "dark";} return "light";} function applyTheme(theme){ if(typeof document==="undefined")return;const root=document.documentElement;const effectiveTheme=theme==="system"?getSystemTheme():theme;root.setAttribute("data-theme",effectiveTheme);if(effectiveTheme==="dark"){ root.classList.add("dark");root.classList.remove("light");} else { root.classList.add("light");root.classList.remove("dark");} } function setupClipboard(root=document){ if(typeof document==="undefined")return;root.querySelectorAll("[data-clipboard]").forEach((trigger)=>{ if(trigger.dataset.aksaraClipboardBound)return;trigger.dataset.aksaraClipboardBound="true";trigger.addEventListener("click",async(e)=>{ e.preventDefault();const targetSelector=trigger.getAttribute("data-clipboard");let textToCopy="";if(targetSelector && targetSelector.startsWith("#")){ const targetEl=document.querySelector(targetSelector);if(targetEl){ textToCopy=targetEl.value??targetEl.textContent??"";} } else if(targetSelector){ textToCopy=targetSelector;} else { textToCopy=trigger.getAttribute("data-clipboard-text")|| trigger.textContent || "";} if(navigator.clipboard && textToCopy){ try { await navigator.clipboard.writeText(textToCopy);const originalText=trigger.getAttribute("data-clipboard-original")|| trigger.innerHTML;const successText=trigger.getAttribute("data-clipboard-success");if(successText){ if(!trigger.hasAttribute("data-clipboard-original")){ trigger.setAttribute("data-clipboard-original",originalText);} trigger.innerHTML=successText;setTimeout(()=>{ trigger.innerHTML=originalText;},2000);} trigger.classList.add("is-copied");setTimeout(()=>trigger.classList.remove("is-copied"),2000);emit(trigger,"clipboard:copy",{ text:textToCopy });} catch { } } });});} const Aksara={ Modal,Tooltip,Popover,Accordion,Dropdown,Tabs,Toast,Carousel,Offcanvas,modal:(target,options)=>{ const args=resolveArgs(target,options,"[data-modal],.modal");return createAll(args.target,Modal,args.options);},tooltip:(target,options)=>{ const args=resolveArgs(target,options,"[data-tooltip]");return createAll(args.target,Tooltip,args.options);},popover:(target,options)=>{ const args=resolveArgs(target,options,"[data-popover]");return createAll(args.target,Popover,args.options);},accordion:(target,options)=>{ const args=resolveArgs(target,options,".accordion");return createAll(args.target,Accordion,args.options);},dropdown:(target,options)=>{ const args=resolveArgs(target,options,"[data-dropdown],.dropdown");return createAll(args.target,Dropdown,args.options);},tabs:(target,options)=>{ const args=resolveArgs(target,options,".tabs");return createAll(args.target,Tabs,args.options);},toast:(target,options)=>{ const args=resolveArgs(target,options,".toast");return createAll(args.target,Toast,args.options);},carousel:(target,options)=>{ const args=resolveArgs(target,options,".carousel");return createAll(args.target,Carousel,args.options);},offcanvas:(target,options)=>{ const args=resolveArgs(target,options,".offcanvas");return createAll(args.target,Offcanvas,args.options);},setTheme(theme){ currentTheme=theme;if(typeof localStorage !=="undefined"){ try { localStorage.setItem("aksara-theme",theme);} catch { } } applyTheme(theme);if(typeof document !=="undefined"){ emit(document.documentElement,"theme:change",{ theme });} return theme;},getTheme(){ return currentTheme;},initTheme(){ if(typeof localStorage !=="undefined"){ try { const saved=(localStorage.getItem("aksara-theme")|| localStorage.getItem("aksara-docs-theme"));if(saved &&(saved==="light" || saved==="dark" || saved==="system")){ currentTheme=saved;} } catch { } } applyTheme(currentTheme);if(typeof window !=="undefined" && window.matchMedia){ window.matchMedia("(prefers-color-scheme:dark)").addEventListener("change",()=>{ if(currentTheme==="system"){ applyTheme("system");} });} return currentTheme;},async clipboard(target,text){ if(typeof navigator==="undefined" || !navigator.clipboard)return false;let textToCopy=text??"";if(!textToCopy && typeof document !=="undefined"){ const el=typeof target==="string"?document.querySelector(target):target;if(el){ textToCopy=el.value??el.textContent??"";} } if(!textToCopy)return false;try { await navigator.clipboard.writeText(textToCopy);return true;} catch { return false;} },init(root=document){ if(root===document){ this.initTheme();} setupClipboard(root);scanArbitraryDom(root);setupArbitraryObserver();createAll(root.querySelectorAll("[data-tooltip]"),Tooltip);createAll(root.querySelectorAll("[data-popover]"),Popover);const dropdowns=new Set();root.querySelectorAll(".dropdown").forEach((el)=>dropdowns.add(el));root.querySelectorAll("[data-dropdown]").forEach((el)=>{ if(!el.closest(".dropdown")){ dropdowns.add(el);} });createAll(Array.from(dropdowns),Dropdown);createAll(root.querySelectorAll(".accordion"),Accordion);createAll(root.querySelectorAll(".tabs"),Tabs);createAll(root.querySelectorAll(".toast"),Toast);createAll(root.querySelectorAll(".carousel"),Carousel);createAll(root.querySelectorAll(".modal"),Modal);createAll(root.querySelectorAll(".offcanvas"),Offcanvas);bindDataApi();emit(document.documentElement,"init",{ root });return this;},destroy(){ Array.from(instances).forEach((instance)=>instance.destroy());registry.clear();emit(document.documentElement,"destroy");return this;} };if(typeof document !=="undefined"){ document.addEventListener("DOMContentLoaded",()=>Aksara.init());} function classNames(...classes){ return classes.filter(Boolean).join(" ").trim();} function toAttributes(attributes){ if(!attributes)return "";const parts=[];for(const[key,value]of Object.entries(attributes)){ if(value===true){ parts.push(key);} else if(value !==false && value !==null && value !==undefined){ parts.push(`${key}="${escapeHtml(value)}"`);} } return parts.length>0?` ${parts.join(" ")}`:"";} function escapeHtmlStr(value){ return String(value??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;");} function SidebarNav(props){ const { items=[],title="",subtitle="",brandIcon="",className="",attributes }=props;const baseAttrs=toAttributes(attributes);const brandHtml=title?`<div class="sidebar-nav-brand">${brandIcon?`<span class="sidebar-nav-icon">${brandIcon}</span>`:""}<div><span class="sidebar-nav-brand-title">${escapeHtmlStr(title)}</span>${subtitle?`<span class="sidebar-nav-brand-subtitle">${escapeHtmlStr(subtitle)}</span>`:""}</div></div>`:"";const itemsHtml=items.map((item)=>{ const isLink=Boolean(item.href);const isTab=Boolean(item.panelTarget)&& !isLink;const Tag=isLink?"a":"button";const itemClasses=classNames("sidebar-nav-item",item.active && "active",item.disabled && "disabled",item.className);const itemAttrs=toAttributes({ href:isLink?item.href:undefined,type:!isLink?"button":undefined,"data-tabs":isTab?item.panelTarget:undefined,role:isTab?"tab":undefined,"aria-selected":isTab?(item.active?"true":"false"):undefined,tabindex:isTab?(item.active?"0":"-1"):undefined,id:isTab && item.id?`sidebar-tab-${item.id}`:item.id,"aria-controls":isTab && item.id?item.id:undefined,disabled:!isLink && item.disabled?true:undefined,"aria-disabled":item.disabled?"true":undefined,"aria-current":isLink && item.active?"page":undefined,...item.attributes });const iconHtml=item.icon?`<span class="sidebar-nav-icon" aria-hidden="true">${item.icon}</span>`:"";const badgeHtml=item.badge?`<span class="sidebar-nav-badge">${escapeHtmlStr(item.badge)}</span>`:"";return `<${Tag} class="${itemClasses}"${itemAttrs}>${iconHtml}<span class="sidebar-nav-label">${escapeHtmlStr(item.label)}</span>${badgeHtml}</${Tag}>`;}).join("");return `<nav class="${classNames("sidebar-nav",className)}"${baseAttrs}>${brandHtml}${itemsHtml}</nav>`.trim();} export const sidebarNav=SidebarNav;function SidebarNavHeader(props){ const { label,className="" }=props;return `<span class="${classNames("sidebar-nav-header",className)}">${escapeHtmlStr(label)}</span>`;} export const sidebarNavHeader=SidebarNavHeader;function SidebarLayout(props){ const { sidebar,content,className="",attributes }=props;const baseAttrs=toAttributes(attributes);return `<div class="${classNames("sidebar-layout",className)}"${baseAttrs}><div class="sidebar-pane">${sidebar}</div><div class="sidebar-content">${content}</div></div>`.trim();} export const sidebarLayout=SidebarLayout;function ListGroup(props={}){ const { children="",flush=false,numbered=false,horizontal=false,className="",attributes }=props;const horizontalClass=horizontal===true?"list-group-horizontal":typeof horizontal==="string"?`list-group-horizontal-${horizontal}`:null;const classes=classNames("list-group",flush && "list-group-flush",numbered && "list-group-numbered",horizontalClass,className);const Tag=numbered?"ol":"div";const baseAttrs=toAttributes(attributes);return `<${Tag} class="${classes}"${baseAttrs}>${children}</${Tag}>`.trim();} export const listGroup=ListGroup;function ListGroupItem(props={}){ const { content="",active=false,disabled=false,action=false,href,variant,className="",attributes }=props;const isLink=Boolean(href);const Tag=isLink?"a":action?"button":"div";const classes=classNames("list-group-item",(action || isLink)&& "list-group-item-action",active && "active",disabled && "disabled",variant && `list-group-item-${variant}`,className);const baseAttrs=toAttributes({ href,type:Tag==="button"?"button":undefined,disabled:Tag==="button" && disabled?true:undefined,"aria-current":active?"true":undefined,"aria-disabled":disabled?"true":undefined,...attributes });return `<${Tag} class="${classes}"${baseAttrs}>${content}</${Tag}>`.trim();} export const listGroupItem=ListGroupItem;function SettingsGroup(props={}){ const { children="",title="",className="",attributes }=props;const baseAttrs=toAttributes(attributes);const groupHtml=`<div class="${classNames("list-group",className)}"${baseAttrs}>${children}</div>`;if(!title)return groupHtml.trim();return `<div><p class="text-xs font-800 uppercase tracking-wider text-subtle mb-2 px-1">${escapeHtmlStr(title)}</p><div class="${classNames("list-group",className)}">${children}</div></div>`.trim();} export const settingsGroup=SettingsGroup;function SettingsItem(props){ const { label,description="",icon="",value="",trailing="",href,action=false,showChevron=false,active=false,disabled=false,className="",attributes }=props;const isLink=Boolean(href);const Tag=isLink?"a":action?"button":"div";const classes=classNames("list-group-item",(action || isLink)&& "list-group-item-action",active && "active",disabled && "disabled",className);const baseAttrs=toAttributes({ href,type:Tag==="button"?"button":undefined,disabled:Tag==="button" && disabled?true:undefined,"aria-current":active?"true":undefined,"aria-disabled":disabled?"true":undefined,...attributes });const iconHtml=icon?`<span class="flex items-center justify-center w-7 h-7 shrink-0 text-lg" aria-hidden="true">${icon}</span>`:"";const labelBlock=description?`<span class="flex-1 min-w-0"><span class="font-600 block">${escapeHtmlStr(label)}</span><span class="text-subtle text-sm block mt-1">${escapeHtmlStr(description)}</span></span>`:`<span class="flex-1 font-600">${escapeHtmlStr(label)}</span>`;const valueHtml=value?`<span class="text-subtle text-sm">${escapeHtmlStr(value)}</span>`:"";const chevronHtml=showChevron?`<span class="text-subtle opacity-50 text-sm ms-1" aria-hidden="true">&#8250;</span>`:"";return `<${Tag} class="${classes}"${baseAttrs}><div class="flex items-center gap-3">${iconHtml}${labelBlock}${valueHtml}${trailing}${chevronHtml}</div></${Tag}>`.trim();} export const settingsItem=SettingsItem;window.Aksara=Aksara;})();

package/dist/components/data/index.d.ts

@@ -7,3 +7,4 @@ export * from "./media-grid";
 export * from "./avatar";
 export * from "./bento";
 export * from "./timeline";
+export * from "./settings";

package/dist/components/data/index.js

@@ -7,3 +7,4 @@ export * from "./media-grid";
 export * from "./avatar";
 export * from "./bento";
 export * from "./timeline";
+export * from "./settings";

package/dist/components/data/settings.d.ts

@@ -0,0 +1,50 @@
+export interface SettingsGroupProps {
+    children?: string;
+    /** Optional uppercase heading rendered above the group */
+    title?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+/**
+ * Container for a group of settings-style rows.
+ * Renders as `.list-group` with an optional uppercase section heading above.
+ */
+export declare function SettingsGroup(props?: SettingsGroupProps): string;
+export declare const settingsGroup: typeof SettingsGroup;
+export interface SettingsItemProps {
+    /** Main label text */
+    label: string;
+    /** Optional supporting description rendered below the label */
+    description?: string;
+    /** Icon HTML string, e.g. `<span class="mdi mdi-lock-outline">` */
+    icon?: string;
+    /** Value text shown on the right */
+    value?: string;
+    /** Arbitrary trailing HTML on the right, e.g. a switch or select */
+    trailing?: string;
+    /** Renders the item as `<a href>` */
+    href?: string;
+    /** Renders the item as `<button>` (when no href) */
+    action?: boolean;
+    /** Shows a `›` chevron on the trailing edge */
+    showChevron?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+/**
+ * A settings-style row using `.list-group-item` with an inner flex layout.
+ * Composable as a link, button, or static element.
+ *
+ * @example Link row
+ * SettingsItem({ label: "Private profile", icon: '<span class="mdi mdi-lock-outline">', value: "Public", showChevron: true, href: "#privacy" })
+ *
+ * @example Toggle row
+ * SettingsItem({ label: "Floods & Inundations", icon: '<span class="mdi mdi-water-alert">', trailing: '<input type="checkbox" role="switch" class="form-check-input" checked />' })
+ *
+ * @example Description row
+ * SettingsItem({ label: "Verified reports only", description: "Only display verified observations.", trailing: '<input type="checkbox" role="switch" class="form-check-input" />' })
+ */
+export declare function SettingsItem(props: SettingsItemProps): string;
+export declare const settingsItem: typeof SettingsItem;

package/dist/components/data/settings.js

@@ -0,0 +1,53 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+/**
+ * Container for a group of settings-style rows.
+ * Renders as `.list-group` with an optional uppercase section heading above.
+ */
+export function SettingsGroup(props = {}) {
+    const { children = "", title = "", className = "", attributes } = props;
+    const baseAttrs = toAttributes(attributes);
+    const groupHtml = `<div class="${classNames("list-group", className)}"${baseAttrs}>${children}</div>`;
+    if (!title)
+        return groupHtml.trim();
+    return `<div><p class="text-xs font-800 uppercase tracking-wider text-subtle mb-2 px-1">${escapeHtml(title)}</p><div class="${classNames("list-group", className)}">${children}</div></div>`.trim();
+}
+export const settingsGroup = SettingsGroup;
+/**
+ * A settings-style row using `.list-group-item` with an inner flex layout.
+ * Composable as a link, button, or static element.
+ *
+ * @example Link row
+ * SettingsItem({ label: "Private profile", icon: '<span class="mdi mdi-lock-outline">', value: "Public", showChevron: true, href: "#privacy" })
+ *
+ * @example Toggle row
+ * SettingsItem({ label: "Floods & Inundations", icon: '<span class="mdi mdi-water-alert">', trailing: '<input type="checkbox" role="switch" class="form-check-input" checked />' })
+ *
+ * @example Description row
+ * SettingsItem({ label: "Verified reports only", description: "Only display verified observations.", trailing: '<input type="checkbox" role="switch" class="form-check-input" />' })
+ */
+export function SettingsItem(props) {
+    const { label, description = "", icon = "", value = "", trailing = "", href, action = false, showChevron = false, active = false, disabled = false, className = "", attributes } = props;
+    const isLink = Boolean(href);
+    const Tag = isLink ? "a" : action ? "button" : "div";
+    const classes = classNames("list-group-item", (action || isLink) && "list-group-item-action", active && "active", disabled && "disabled", className);
+    const baseAttrs = toAttributes({
+        href,
+        type: Tag === "button" ? "button" : undefined,
+        disabled: Tag === "button" && disabled ? true : undefined,
+        "aria-current": active ? "true" : undefined,
+        "aria-disabled": disabled ? "true" : undefined,
+        ...attributes
+    });
+    const iconHtml = icon
+        ? `<span class="flex items-center justify-center w-7 h-7 shrink-0 text-lg" aria-hidden="true">${icon}</span>`
+        : "";
+    const labelBlock = description
+        ? `<span class="flex-1 min-w-0"><span class="font-600 block">${escapeHtml(label)}</span><span class="text-subtle text-sm block mt-1">${escapeHtml(description)}</span></span>`
+        : `<span class="flex-1 font-600">${escapeHtml(label)}</span>`;
+    const valueHtml = value ? `<span class="text-subtle text-sm">${escapeHtml(value)}</span>` : "";
+    const chevronHtml = showChevron
+        ? `<span class="text-subtle opacity-50 text-sm ms-1" aria-hidden="true">&#8250;</span>`
+        : "";
+    return `<${Tag} class="${classes}"${baseAttrs}><div class="flex items-center gap-3">${iconHtml}${labelBlock}${valueHtml}${trailing}${chevronHtml}</div></${Tag}>`.trim();
+}
+export const settingsItem = SettingsItem;

package/dist/components/navigation/index.d.ts

@@ -3,3 +3,4 @@ export * from "./breadcrumb";
 export * from "./pagination";
 export * from "./tabs";
 export * from "./scrollspy";
+export * from "./sidebar";

package/dist/components/navigation/index.js

@@ -3,3 +3,4 @@ export * from "./breadcrumb";
 export * from "./pagination";
 export * from "./tabs";
 export * from "./scrollspy";
+export * from "./sidebar";

package/dist/components/navigation/sidebar.d.ts

@@ -0,0 +1,81 @@
+export interface SidebarNavItemProps {
+    /** Unique ID (used for tab panel targeting) */
+    id?: string;
+    /** Label text */
+    label: string;
+    /** Icon HTML string */
+    icon?: string;
+    /** Badge text or count */
+    badge?: string;
+    /** Active state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Link mode: render as <a href="..."> */
+    href?: string;
+    /** Tab mode: render as <button data-tabs="#panelId"> */
+    panelTarget?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export interface SidebarNavProps {
+    items: SidebarNavItemProps[];
+    /** Brand section title at the top */
+    title?: string;
+    /** Brand section subtitle */
+    subtitle?: string;
+    /** Brand icon HTML */
+    brandIcon?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+/**
+ * Sidebar navigation that supports two modes:
+ *
+ * - **Tab mode** (`panelTarget` prop): renders `<button data-tabs="#panelId">` —
+ *   integrates with Aksara's tab JS to show/hide content panels.
+ * - **Link mode** (`href` prop): renders `<a href="...">` — plain navigation links.
+ *
+ * @example Tab mode
+ * SidebarNav({
+ *   title: "Settings",
+ *   items: [
+ *     { label: "Privacy", icon: '<span class="mdi mdi-lock-outline">', panelTarget: "#panel-privacy", active: true },
+ *     { label: "Notifications", icon: '<span class="mdi mdi-bell-outline">', panelTarget: "#panel-notif" },
+ *   ]
+ * })
+ *
+ * @example Link mode
+ * SidebarNav({
+ *   items: [
+ *     { label: "Dashboard", icon: '<span class="mdi mdi-home-outline">', href: "/dashboard", active: true },
+ *     { label: "Settings", icon: '<span class="mdi mdi-cog-outline">', href: "/settings" },
+ *   ]
+ * })
+ */
+export declare function SidebarNav(props: SidebarNavProps): string;
+export declare const sidebarNav: typeof SidebarNav;
+export interface SidebarNavHeaderProps {
+    label: string;
+    className?: string;
+}
+/** A group header label inside a SidebarNav */
+export declare function SidebarNavHeader(props: SidebarNavHeaderProps): string;
+export declare const sidebarNavHeader: typeof SidebarNavHeader;
+export interface SidebarLayoutProps {
+    sidebar: string;
+    content: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+/**
+ * Two-column layout wrapper: sidebar pane on the left, content area on the right.
+ *
+ * @example
+ * SidebarLayout({
+ *   sidebar: SidebarNav({ ... }),
+ *   content: '<div class="p-5">Panel content here</div>'
+ * })
+ */
+export declare function SidebarLayout(props: SidebarLayoutProps): string;
+export declare const sidebarLayout: typeof SidebarLayout;

package/dist/components/navigation/sidebar.js

@@ -0,0 +1,82 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+/**
+ * Sidebar navigation that supports two modes:
+ *
+ * - **Tab mode** (`panelTarget` prop): renders `<button data-tabs="#panelId">` —
+ *   integrates with Aksara's tab JS to show/hide content panels.
+ * - **Link mode** (`href` prop): renders `<a href="...">` — plain navigation links.
+ *
+ * @example Tab mode
+ * SidebarNav({
+ *   title: "Settings",
+ *   items: [
+ *     { label: "Privacy", icon: '<span class="mdi mdi-lock-outline">', panelTarget: "#panel-privacy", active: true },
+ *     { label: "Notifications", icon: '<span class="mdi mdi-bell-outline">', panelTarget: "#panel-notif" },
+ *   ]
+ * })
+ *
+ * @example Link mode
+ * SidebarNav({
+ *   items: [
+ *     { label: "Dashboard", icon: '<span class="mdi mdi-home-outline">', href: "/dashboard", active: true },
+ *     { label: "Settings", icon: '<span class="mdi mdi-cog-outline">', href: "/settings" },
+ *   ]
+ * })
+ */
+export function SidebarNav(props) {
+    const { items = [], title = "", subtitle = "", brandIcon = "", className = "", attributes } = props;
+    const baseAttrs = toAttributes(attributes);
+    // Brand section
+    const brandHtml = title
+        ? `<div class="sidebar-nav-brand">${brandIcon ? `<span class="sidebar-nav-icon">${brandIcon}</span>` : ""}<div><span class="sidebar-nav-brand-title">${escapeHtml(title)}</span>${subtitle ? `<span class="sidebar-nav-brand-subtitle">${escapeHtml(subtitle)}</span>` : ""}</div></div>`
+        : "";
+    // Items
+    const itemsHtml = items
+        .map((item) => {
+        const isLink = Boolean(item.href);
+        const isTab = Boolean(item.panelTarget) && !isLink;
+        const Tag = isLink ? "a" : "button";
+        const itemClasses = classNames("sidebar-nav-item", item.active && "active", item.disabled && "disabled", item.className);
+        const itemAttrs = toAttributes({
+            href: isLink ? item.href : undefined,
+            type: !isLink ? "button" : undefined,
+            "data-tabs": isTab ? item.panelTarget : undefined,
+            role: isTab ? "tab" : undefined,
+            "aria-selected": isTab ? (item.active ? "true" : "false") : undefined,
+            tabindex: isTab ? (item.active ? "0" : "-1") : undefined,
+            id: isTab && item.id ? `sidebar-tab-${item.id}` : item.id,
+            "aria-controls": isTab && item.id ? item.id : undefined,
+            disabled: !isLink && item.disabled ? true : undefined,
+            "aria-disabled": item.disabled ? "true" : undefined,
+            "aria-current": isLink && item.active ? "page" : undefined,
+            ...item.attributes
+        });
+        const iconHtml = item.icon ? `<span class="sidebar-nav-icon" aria-hidden="true">${item.icon}</span>` : "";
+        const badgeHtml = item.badge ? `<span class="sidebar-nav-badge">${escapeHtml(item.badge)}</span>` : "";
+        return `<${Tag} class="${itemClasses}"${itemAttrs}>${iconHtml}<span class="sidebar-nav-label">${escapeHtml(item.label)}</span>${badgeHtml}</${Tag}>`;
+    })
+        .join("");
+    return `<nav class="${classNames("sidebar-nav", className)}"${baseAttrs}>${brandHtml}${itemsHtml}</nav>`.trim();
+}
+export const sidebarNav = SidebarNav;
+/** A group header label inside a SidebarNav */
+export function SidebarNavHeader(props) {
+    const { label, className = "" } = props;
+    return `<span class="${classNames("sidebar-nav-header", className)}">${escapeHtml(label)}</span>`;
+}
+export const sidebarNavHeader = SidebarNavHeader;
+/**
+ * Two-column layout wrapper: sidebar pane on the left, content area on the right.
+ *
+ * @example
+ * SidebarLayout({
+ *   sidebar: SidebarNav({ ... }),
+ *   content: '<div class="p-5">Panel content here</div>'
+ * })
+ */
+export function SidebarLayout(props) {
+    const { sidebar, content, className = "", attributes } = props;
+    const baseAttrs = toAttributes(attributes);
+    return `<div class="${classNames("sidebar-layout", className)}"${baseAttrs}><div class="sidebar-pane">${sidebar}</div><div class="sidebar-content">${content}</div></div>`.trim();
+}
+export const sidebarLayout = SidebarLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abydahana/aksara-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "publishConfig": {
     "access": "public"
   },
@@ -81,6 +81,8 @@
     "lint:fix": "eslint src eslint.config.ts --fix",
     "format": "prettier --write . && eslint src eslint.config.ts --fix",
     "format:check": "prettier --check . && eslint src eslint.config.ts",
+    "validate": "npm run check && npm run format:check && npm run test && npm run build",
+    "setup:hooks": "git config core.hooksPath .githooks && chmod +x .githooks/pre-commit",
     "prepare": "npm run build",
     "all": "npm run format && npm run lint && npm run test && npm run build",
     "prepublishOnly": "npm run all"