npm - @abydahana/aksara-ui - Versions diffs - 1.1.2 → 1.1.4 - Mend

@abydahana/aksara-ui 1.1.2 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/aksara.css +22678 -40
package/dist/aksara.d.ts +23 -0
package/dist/aksara.esm.js +148 -1
package/dist/aksara.js +148 -1
package/dist/aksara.min.css +1 -1
package/dist/aksara.min.js +1 -1
package/dist/components/data/avatar.d.ts +2 -0
package/dist/components/data/avatar.js +28 -6
package/dist/components/data/empty-state.d.ts +13 -0
package/dist/components/data/empty-state.js +35 -0
package/dist/components/data/index.d.ts +2 -0
package/dist/components/data/index.js +2 -0
package/dist/components/data/user-item.d.ts +17 -0
package/dist/components/data/user-item.js +53 -0
package/dist/components/form/dropdown-select.d.ts +18 -0
package/dist/components/form/dropdown-select.js +80 -0
package/dist/components/form/index.d.ts +1 -0
package/dist/components/form/index.js +1 -0
package/dist/components/navigation/index.d.ts +1 -0
package/dist/components/navigation/index.js +1 -0
package/dist/components/navigation/user-pill.d.ts +13 -0
package/dist/components/navigation/user-pill.js +32 -0
package/dist/fonts/materialdesignicons-webfont.eot +0 -0
package/dist/fonts/materialdesignicons-webfont.ttf +0 -0
package/dist/fonts/materialdesignicons-webfont.woff +0 -0
package/dist/fonts/materialdesignicons-webfont.woff2 +0 -0
package/package.json +1 -1

package/dist/aksara.min.js CHANGED Viewed

	@@ -1 +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(duration0.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,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");} 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">›</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;})();
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();if(this.trigger.classList.contains("form-select")\|\| this.element.classList.contains("variant-form-select")\|\| this.element.hasAttribute("data-dropdown-select")){ this.menu.style.width=`${triggerRect.width}px`;this.menu.style.minWidth=`${triggerRect.width}px`;} 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(duration0.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;},confirm(options){ if(typeof document==="undefined")return Promise.resolve(false);let host=document.getElementById("aksara-dialog-host");if(!host){ host=document.createElement("div");host.id="aksara-dialog-host";document.body.appendChild(host);} const tone=options.tone??"danger";const confirmLabel=options.confirmLabel??"Confirm";const cancelLabel=options.cancelLabel??"Cancel";const icon=options.icon??(tone==="danger"?"mdi-alert-circle-outline":"mdi-alert-outline");host.innerHTML=`<div class="modal fade modal-sm" id="aksaraConfirmModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="aksara-confirm-title"><div class="modal-dialog modal-dialog-centered"><div class="modal-content overflow-hidden border-0 shadow-lg"><div class="modal-body text-center p-4"><i class="mdi ${escapeHtmlStr(icon)} text-${escapeHtmlStr(tone)} fs-1 d-block mb-2" aria-hidden="true"></i><h5 id="aksara-confirm-title" class="fs-5 font-bold mb-2 text-body">${escapeHtmlStr(options.title)}</h5><p class="text-muted mb-0">${escapeHtmlStr(options.message)}</p></div><div class="modal-footer p-0 overflow-hidden m-0 w-100 gap-0 d-flex border-top"><button class="btn btn-ghost text-body rounded-0 py-3 m-0 text-center w-[50%]" type="button" data-aksara-confirm-cancel>${escapeHtmlStr(cancelLabel)}</button><button class="btn btn-ghost border-start text-${escapeHtmlStr(tone)} rounded-0 py-3 m-0 text-center w-[50%]" type="button" data-aksara-confirm-accept><i class="mdi mdi-check me-1" aria-hidden="true"></i>${escapeHtmlStr(confirmLabel)}</button></div></div></div></div>`;const modalEl=host.querySelector("#aksaraConfirmModal");if(!modalEl)return Promise.resolve(false);const modalInstance=Aksara.modal(modalEl);modalInstance.show();return new Promise((resolve)=>{ let settled=false;const finish=(value)=>{ if(settled)return;settled=true;modalInstance.hide();setTimeout(()=>{ if(host)host.innerHTML="";},200);resolve(value);};modalEl.addEventListener("modal:hide",()=>finish(false),{ once:true });host?.querySelector("[data-aksara-confirm-cancel]")?.addEventListener("click",()=>finish(false),{ once:true });host?.querySelector("[data-aksara-confirm-accept]")?.addEventListener("click",()=>finish(true),{ once:true });});},alert(options){ if(typeof document==="undefined")return Promise.resolve();let host=document.getElementById("aksara-dialog-host");if(!host){ host=document.createElement("div");host.id="aksara-dialog-host";document.body.appendChild(host);} const tone=options.tone??"primary";const buttonLabel=options.buttonLabel??"OK";const icon=options.icon??(tone==="danger"?"mdi-alert-circle-outline":tone==="warning"?"mdi-alert-outline":"mdi-information-outline");host.innerHTML=`<div class="modal fade modal-sm" id="aksaraAlertModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="aksara-alert-title"><div class="modal-dialog modal-dialog-centered"><div class="modal-content overflow-hidden border-0 shadow-lg"><div class="modal-body text-center p-4"><i class="mdi ${escapeHtmlStr(icon)} text-${escapeHtmlStr(tone)} fs-1 d-block mb-2" aria-hidden="true"></i><h5 id="aksara-alert-title" class="fs-5 font-bold mb-2 text-body">${escapeHtmlStr(options.title)}</h5><p class="text-muted mb-0">${escapeHtmlStr(options.message)}</p></div><div class="modal-footer p-0 overflow-hidden m-0 w-100 gap-0 d-flex border-top"><button class="btn btn-ghost text-body rounded-0 py-3 m-0 text-center w-100" type="button" data-aksara-alert-dismiss>${escapeHtmlStr(buttonLabel)}</button></div></div></div></div>`;const modalEl=host.querySelector("#aksaraAlertModal");if(!modalEl)return Promise.resolve();const modalInstance=Aksara.modal(modalEl);modalInstance.show();return new Promise((resolve)=>{ let settled=false;const finish=()=>{ if(settled)return;settled=true;modalInstance.hide();setTimeout(()=>{ if(host)host.innerHTML="";},200);resolve();};modalEl.addEventListener("modal:hide",()=>finish(),{ once:true });host?.querySelector("[data-aksara-alert-dismiss]")?.addEventListener("click",()=>finish(),{ once:true });});},notify(message,options={}){ if(typeof document==="undefined")return;let container=document.getElementById("aksara-toast-container");if(!container){ container=document.createElement("div");container.id="aksara-toast-container";container.className="aksara-toast-container";document.body.appendChild(container);} const toast=document.createElement("div");toast.className="aksara-toast-pill";const iconClass=options.icon??"mdi-information-outline";toast.innerHTML=`<i class="mdi ${escapeHtmlStr(iconClass)} text-primary" style="font-size:1.15rem;line-height:1;"></i><span>${escapeHtmlStr(message)}</span>`;container.appendChild(toast);const duration=options.duration??2500;setTimeout(()=>{ toast.style.opacity="0";toast.style.transform="translateY(8px)";setTimeout(()=>toast.remove(),250);},duration);},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}="${escapeHtmlStr(value)}"`);} } return parts.length>0?` ${parts.join(" ")}`:"";} function escapeHtmlStr(value){ return String(value??"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");} 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">›</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/avatar.d.ts CHANGED Viewed

@@ -6,6 +6,8 @@ export interface AvatarProps {
     alt?: string;
     initials?: string;
     size?: AvatarSize;
+    width?: string | number;
+    height?: string | number;
     shape?: AvatarShape;
     status?: AvatarStatus | boolean;
     variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";

package/dist/components/data/avatar.js CHANGED Viewed

@@ -1,10 +1,31 @@
 import { classNames, escapeHtml, toAttributes } from "../utils";
 export function Avatar(props = {}) {
-    const { src, alt = "Avatar", initials, size = "md", shape = "circle", status, variant = "primary", className = "", attributes } = props;
+    const { src, alt = "Avatar", initials, size, width, height, shape = "circle", status, variant = "primary", className = "", attributes = {} } = props;
     const shapeClass = shape === "circle" ? "rounded-full" : shape === "rounded" ? "rounded-8" : "rounded-none";
-    const sizeClass = `avatar-${size}`;
-    const classes = classNames("avatar", sizeClass, shapeClass, !src && !className.includes("bg-") && `avatar-${variant} bg-${variant}/15 text-${variant}`, "position-relative inline-flex items-center justify-center font-bold select-none shrink-0 overflow-hidden", className);
-    const baseAttrs = toAttributes(attributes);
+    // Use size if provided, otherwise default to "md" if no explicit width/height
+    const effectiveSize = size || (!width && !height ? "md" : undefined);
+    const sizeClass = effectiveSize ? `avatar-${effectiveSize}` : "";
+    const classes = classNames("avatar", sizeClass, shapeClass, !src &&
+        !className.includes("bg-") &&
+        !className.includes("feed-card-avatar") &&
+        `avatar-${variant} bg-${variant}/15 text-${variant}`, "position-relative inline-flex items-center justify-center font-bold select-none shrink-0", className);
+    const customStyles = [];
+    if (width !== undefined) {
+        const w = typeof width === "number" ? `${width}px` : width;
+        customStyles.push(`width:${w}`, `min-width:${w}`);
+    }
+    if (height !== undefined) {
+        const h = typeof height === "number" ? `${height}px` : height;
+        customStyles.push(`height:${h}`, `min-height:${h}`);
+    }
+    const attrs = { ...attributes };
+    if (customStyles.length > 0) {
+        const existingStyle = attrs.style || "";
+        attrs.style = existingStyle
+            ? `${existingStyle.replace(/;?$/, ";")} ${customStyles.join(";")};`
+            : `${customStyles.join(";")};`;
+    }
+    const baseAttrs = toAttributes(attrs);
     let contentHtml;
     if (src) {
         contentHtml = `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="avatar-img w-full h-full object-cover block" loading="lazy" />`;
@@ -20,12 +41,13 @@ export function Avatar(props = {}) {
     if (status) {
         let statusVariant = "bg-success";
         if (status === "offline")
-            statusVariant = "bg-subtle border border-subtle";
+            statusVariant = "bg-subtle";
         else if (status === "busy")
             statusVariant = "bg-danger";
         else if (status === "away")
             statusVariant = "bg-warning";
-        statusHtml = `<span class="avatar-status position-absolute rounded-full ${statusVariant} border-2 border-body" aria-hidden="true"></span>`;
+        const statusKey = typeof status === "string" ? status : "online";
+        statusHtml = `<span class="avatar-status position-absolute rounded-full ${statusVariant} border-2 border-body" data-status="${statusKey}" aria-hidden="true"></span>`;
     }
     return `
     <span class="${classes}"${baseAttrs}>

package/dist/components/data/empty-state.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+export interface EmptyStateProps {
+    icon?: string;
+    iconVariant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "muted" | string;
+    iconSize?: "sm" | "md" | "lg" | string;
+    title: string;
+    description?: string;
+    actions?: string;
+    centered?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function EmptyState(props: EmptyStateProps): string;
+export declare const emptyState: typeof EmptyState;

package/dist/components/data/empty-state.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function EmptyState(props) {
+    const { icon, iconVariant = "muted", iconSize = "md", title, description, actions, centered = true, className = "", attributes } = props;
+    const containerClasses = classNames("empty-state", centered && "text-center", "py-5 px-4 my-3", className);
+    const iconBubbleSizes = {
+        sm: { box: "width: 3.5rem; height: 3.5rem;", icon: "font-size: 1.75rem;" },
+        md: { box: "width: 4.5rem; height: 4.5rem;", icon: "font-size: 2.25rem;" },
+        lg: { box: "width: 5.5rem; height: 5.5rem;", icon: "font-size: 3rem;" }
+    };
+    const bubbleSize = iconBubbleSizes[iconSize] ?? iconBubbleSizes.md;
+    const iconHtml = icon
+        ? `
+      <div class="empty-state-icon-wrap mx-auto mb-3 d-inline-flex align-items-center justify-content-center rounded-circle bg-subtle" style="${bubbleSize.box}">
+        <i class="mdi ${escapeHtml(icon)} text-${escapeHtml(iconVariant)}" style="${bubbleSize.icon}" aria-hidden="true"></i>
+      </div>
+    `.trim()
+        : "";
+    const titleHtml = `<h3 class="empty-state-title fs-5 font-bold mb-2 text-body">${escapeHtml(title)}</h3>`;
+    const descHtml = description
+        ? `<p class="empty-state-desc text-subtle text-sm max-w-md mx-auto mb-4 leading-relaxed">${escapeHtml(description)}</p>`
+        : "";
+    const actionsHtml = actions
+        ? `<div class="empty-state-actions d-flex align-items-center justify-content-center gap-2 flex-wrap">${actions}</div>`
+        : "";
+    const baseAttrs = toAttributes(attributes);
+    return `
+    <div class="${containerClasses}"${baseAttrs}>
+      ${iconHtml}
+      ${titleHtml}
+      ${descHtml}
+      ${actionsHtml}
+    </div>
+  `.trim();
+}
+export const emptyState = EmptyState;

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

@@ -8,3 +8,5 @@ export * from "./avatar";
 export * from "./bento";
 export * from "./timeline";
 export * from "./settings";
+export * from "./empty-state";
+export * from "./user-item";

package/dist/components/data/index.js CHANGED Viewed

@@ -8,3 +8,5 @@ export * from "./avatar";
 export * from "./bento";
 export * from "./timeline";
 export * from "./settings";
+export * from "./empty-state";
+export * from "./user-item";

package/dist/components/data/user-item.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { type AvatarProps } from "./avatar";
+export interface UserItemProps {
+    avatar?: string;
+    initials?: string;
+    avatarVariant?: AvatarProps["variant"];
+    name: string;
+    handle?: string;
+    subtitle?: string;
+    verified?: boolean;
+    status?: "online" | "offline" | "busy" | "away";
+    href?: string;
+    action?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function UserItem(props: UserItemProps): string;
+export declare const userItem: typeof UserItem;

package/dist/components/data/user-item.js ADDED Viewed

@@ -0,0 +1,53 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+import { Avatar } from "./avatar";
+export function UserItem(props) {
+    const { avatar, initials, avatarVariant, name, handle, subtitle, verified = false, status, href, action, className = "", attributes } = props;
+    const containerClasses = classNames("user-item d-flex align-items-center justify-content-between p-3 border-bottom border-subtle", className);
+    const avatarHtml = Avatar({
+        src: avatar,
+        initials,
+        size: "md",
+        shape: "circle",
+        status,
+        variant: avatarVariant,
+        alt: name
+    });
+    const verifiedBadge = verified
+        ? `<i class="mdi mdi-check-decagram text-primary ms-1" style="font-size: 1rem; vertical-align: middle;" title="Verified"></i>`
+        : "";
+    const subtitleText = subtitle || (handle ? `@${handle.replace(/^@/, "")}` : "");
+    const subtitleHtml = subtitleText
+        ? `<div class="user-item-subtitle text-subtle text-sm text-truncate mt-0.5">${escapeHtml(subtitleText)}</div>`
+        : "";
+    const contentCol = `
+    <div class="user-item-info flex-1 min-w-0">
+      <div class="d-flex align-items-center">
+        <span class="user-item-name font-bold text-sm text-truncate text-body">${escapeHtml(name)}</span>
+        ${verifiedBadge}
+      </div>
+      ${subtitleHtml}
+    </div>
+  `.trim();
+    const leftPart = href
+        ? `
+      <a href="${escapeHtml(href)}" data-link class="d-flex align-items-center gap-3 text-decoration-none flex-1 min-w-0">
+        ${avatarHtml}
+        ${contentCol}
+      </a>
+    `.trim()
+        : `
+      <div class="d-flex align-items-center gap-3 flex-1 min-w-0">
+        ${avatarHtml}
+        ${contentCol}
+      </div>
+    `.trim();
+    const actionHtml = action ? `<div class="user-item-action ms-3 shrink-0">${action}</div>` : "";
+    const baseAttrs = toAttributes(attributes);
+    return `
+    <div class="${containerClasses}"${baseAttrs}>
+      ${leftPart}
+      ${actionHtml}
+    </div>
+  `.trim();
+}
+export const userItem = UserItem;

package/dist/components/form/dropdown-select.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+export interface DropdownSelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+    iconClass?: string;
+}
+export interface DropdownSelectProps {
+    name: string;
+    options: DropdownSelectOption[];
+    defaultValue?: string;
+    className?: string;
+    btnClassName?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "chip" | "form-select";
+    attributes?: Record<string, unknown>;
+}
+export declare function DropdownSelect(props: DropdownSelectProps): string;
+export declare const dropdownSelect: typeof DropdownSelect;

package/dist/components/form/dropdown-select.js ADDED Viewed

@@ -0,0 +1,80 @@
+import { classNames, escapeHtml } from "../utils";
+import { Input } from "./input";
+import { Button } from "../buttons/button";
+import { Dropdown, DropdownItem, DropdownMenu } from "../overlay/dropdown";
+export function DropdownSelect(props) {
+    const { name, options = [], defaultValue, className = "", btnClassName = "", size = props.variant === "form-select" ? "md" : "sm", variant = "chip", attributes } = props;
+    const selectedOption = options.find((opt) => opt.value === defaultValue) ?? options[0];
+    const isFormSelect = variant === "form-select";
+    const dropdownSizeClass = size === "sm" ? "dropdown-sm" : size === "lg" ? "dropdown-lg" : "dropdown-md";
+    const menuSizeClass = size === "sm" ? "dropdown-menu-sm" : size === "lg" ? "dropdown-menu-lg" : "";
+    const selectSizeClass = size === "sm" ? "form-select-sm" : size === "lg" ? "form-select-lg" : "";
+    const chipSizeClass = size === "sm" ? "chip-sm" : size === "lg" ? "chip-lg" : "chip-md";
+    const hiddenInput = Input({
+        type: "hidden",
+        name,
+        value: selectedOption?.value ?? ""
+    });
+    const triggerIcon = selectedOption?.icon
+        ? `<i class="mdi ${escapeHtml(selectedOption.icon)} ${escapeHtml(selectedOption.iconClass ?? "")} me-1.5 select-current-icon"></i>`
+        : "";
+    const triggerBtn = isFormSelect
+        ? `<button type="button" class="form-select ${selectSizeClass} ${btnClassName} text-start d-flex align-items-center justify-content-between cursor-pointer" data-dropdown="" aria-haspopup="true" aria-expanded="false">
+      <div class="d-flex align-items-center min-w-0 flex-1 me-2 text-truncate">
+        ${triggerIcon}
+        <span class="select-current-label text-truncate">${escapeHtml(selectedOption?.label ?? "")}</span>
+      </div>
+    </button>`
+        : Button({
+            type: "button",
+            variant: "secondary",
+            soft: true,
+            size: size === "md" ? undefined : size,
+            className: `${btnClassName || `composer-chip-btn ${chipSizeClass}`}`,
+            attributes: {
+                "data-dropdown": "",
+                "aria-haspopup": "true",
+                "aria-expanded": "false"
+            },
+            children: `
+          ${triggerIcon}
+          <span class="select-current-label">${escapeHtml(selectedOption?.label ?? "")}</span>
+          <i class="mdi mdi-chevron-down ms-1 opacity-60"></i>
+        `
+        });
+    const menuItems = options
+        .map((opt) => DropdownItem({
+        active: opt.value === selectedOption?.value,
+        attributes: {
+            type: "button",
+            "data-dropdown-option": opt.value,
+            "data-icon": opt.icon ?? "",
+            "data-icon-class": opt.iconClass ?? ""
+        },
+        content: `
+          ${opt.icon ? `<i class="mdi ${escapeHtml(opt.icon)} ${escapeHtml(opt.iconClass ?? "")} me-2"></i>` : ""}
+          <span>${escapeHtml(opt.label)}</span>
+        `
+    }))
+        .join("\n");
+    const menu = DropdownMenu({
+        className: `${menuSizeClass} ${isFormSelect ? "dropdown-select-menu" : ""}`.trim(),
+        attributes: {
+            "data-dropdown-select-menu": name
+        },
+        children: menuItems
+    });
+    return Dropdown({
+        className: classNames("aksara-select-dropdown", isFormSelect && "variant-form-select w-100", dropdownSizeClass, className),
+        attributes: {
+            "data-dropdown-select": name,
+            ...attributes
+        },
+        children: `
+      ${hiddenInput}
+      ${triggerBtn}
+      ${menu}
+    `
+    });
+}
+export const dropdownSelect = DropdownSelect;

package/dist/components/form/index.d.ts CHANGED Viewed

@@ -9,3 +9,4 @@ export * from "./input-group";
 export * from "./form-control";
 export * from "./floating-label";
 export * from "./layout";
+export * from "./dropdown-select";