@vasakgroup/vue-libvasak 0.3.0 → 0.3.2

package/dist/vue-libvasak.umd.js

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vasakgroup/plugin-vicons"),require("@tauri-apps/api/event"),require("@tauri-apps/api/window")):typeof define=="function"&&define.amd?define(["exports","vue","@vasakgroup/plugin-vicons","@tauri-apps/api/event","@tauri-apps/api/window"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.VueLibVasak={},s.Vue,s.VasakVicons,s.TauriEvent,s.TauriWindow))})(this,(function(s,e,b,I,L){"use strict";const j={class:"flex flex-col gap-2"},A=["aria-expanded"],M={key:1,class:"flex flex-col gap-1"},g=e.defineComponent({__name:"SideGroup",props:{title:{},collapsed:{type:Boolean,default:!1},defaultOpen:{type:Boolean,default:!0}},setup(t){const n=t,a=e.ref(n.defaultOpen);return e.watch(()=>n.collapsed,l=>{l&&(a.value=!0)}),(l,i)=>(e.openBlock(),e.createElementBlock("section",j,[t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"group flex w-full items-center justify-between rounded-corner px-2 py-1 text-tx-muted text-xs uppercase tracking-[0.08em] hover:bg-ui-surface/60","aria-expanded":a.value,onClick:i[0]||(i[0]=r=>a.value=!a.value)},[e.createElementVNode("span",null,e.toDisplayString(t.title),1),e.createElementVNode("span",{class:e.normalizeClass(["text-[10px] transition-transform duration-200",a.value?"rotate-180":""])}," v ",2)],8,A)),a.value||t.collapsed?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(l.$slots,"default")])):e.createCommentVNode("",!0)]))}}),F=["title","aria-label","disabled","aria-current"],O=["src"],P={key:1},W={key:0,class:"min-w-0 flex-1 truncate font-medium"},G={key:1,class:"rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs"},h=e.defineComponent({__name:"SideButton",props:{label:{},icon:{default:""},active:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},badge:{default:""}},emits:["click"],setup(t){const n=t,a=e.ref(""),l=e.toRef(n,"icon");let i=null,r=!1,c=0;async function d(){const o=++c,m=l.value;if(!m){a.value="";return}const k=await b.getIconSource(m);o===c&&(a.value=k)}return e.onMounted(async()=>{const o=await I.listen("vicons:theme-changed",d);if(r){o();return}i=o,await d()}),e.onUnmounted(()=>{r=!0,i?.()}),e.watch(l,d),(o,m)=>(e.openBlock(),e.createElementBlock("button",{type:"button",title:t.collapsed?t.label:void 0,"aria-label":t.collapsed?t.label:void 0,disabled:t.disabled,"aria-current":t.active?"page":void 0,class:e.normalizeClass(["group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200",[t.active?"border-secondary bg-primary/15 text-tx-main shadow-sm":"border-transparent bg-ui-bg/30 hover:border-ui-border hover:bg-ui-surface/70",t.disabled?"cursor-not-allowed opacity-60":"cursor-pointer",t.collapsed?"justify-center px-2":""]]),onClick:m[0]||(m[0]=k=>o.$emit("click"))},[e.createElementVNode("span",{class:e.normalizeClass(["flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide",t.active?"border-secondary bg-primary/20":""]),"aria-hidden":"true"},[a.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:a.value,alt:"",class:"h-8 w-8 object-contain"},null,8,O)):(e.openBlock(),e.createElementBlock("span",P,e.toDisplayString(t.label.charAt(0).toUpperCase()),1))],2),t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",W,e.toDisplayString(t.label),1)),!t.collapsed&&t.badge!==""?(e.openBlock(),e.createElementBlock("span",G,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0)],10,F))}}),q={key:0,class:"flex flex-col gap-2 border-ui-border border-b p-2"},R={class:"flex items-center gap-2"},U=["aria-label","aria-expanded"],H={key:0,class:"min-w-0 flex-1"},J={key:0,class:"truncate font-semibold text-sm"},K={key:1,class:"truncate text-tx-muted text-xs"},Q={key:0},X={key:1,class:"flex justify-center border-ui-border border-b p-2"},Y=["aria-label","aria-expanded"],Z={class:"flex-1 space-y-3 overflow-y-auto p-2"},x=e.defineComponent({__name:"SideBar",props:{title:{default:""},subtitle:{default:""},categories:{default:()=>[]},modelValue:{default:""},collapsed:{type:Boolean,default:void 0},collapseLabel:{default:"Collapse"},expandLabel:{default:"Expand"}},emits:["update:modelValue","update:collapsed","change"],setup(t,{expose:n,emit:a}){const l=t,i=a,r=e.ref(l.collapsed??!1),c=e.ref(!1);let d=null;const o=e.computed(()=>c.value||r.value),m=e.computed(()=>!!(l.title||l.subtitle));e.computed(()=>l.categories.length>0);function k(){c.value=d?.matches??!1}function T(){r.value=!r.value,i("update:collapsed",r.value)}function Ae(u){i("update:modelValue",u),i("change",u)}return e.watch(()=>l.collapsed,u=>{u!==void 0&&(r.value=u)}),e.onMounted(()=>{d=window.matchMedia("(max-width: 767px)"),k(),d.addEventListener("change",k)}),e.onBeforeUnmount(()=>d?.removeEventListener("change",k)),n({collapsed:o}),(u,Pe)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-bg/80 transition-all duration-300",["w-[84px]",o.value?"md:w-[84px]":"md:w-72"]])},[m.value||u.$slots.header?(e.openBlock(),e.createElementBlock("header",q,[e.createElementVNode("div",R,[e.createElementVNode("button",{type:"button",class:"hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex","aria-label":o.value?t.expandLabel:t.collapseLabel,"aria-expanded":!o.value,onClick:T},e.toDisplayString(o.value?">":"<"),9,U),m.value&&!o.value?(e.openBlock(),e.createElementBlock("div",H,[t.title?(e.openBlock(),e.createElementBlock("p",J,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.subtitle?(e.openBlock(),e.createElementBlock("p",K,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),u.$slots.header&&!o.value?(e.openBlock(),e.createElementBlock("div",Q,[e.renderSlot(u.$slots,"header",{collapsed:o.value})])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("button",{type:"button",class:"hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex","aria-label":o.value?t.expandLabel:t.collapseLabel,"aria-expanded":!o.value,onClick:T},e.toDisplayString(o.value?">":"<"),9,Y)])),e.createElementVNode("div",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.categories,y=>(e.openBlock(),e.createBlock(g,{key:y.id,title:y.title,collapsed:o.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.items,f=>(e.openBlock(),e.createBlock(h,{key:f.id,label:f.label,icon:f.icon,badge:f.badge,disabled:f.disabled,collapsed:o.value,active:t.modelValue===f.id,onClick:We=>Ae(f.id)},null,8,["label","icon","badge","disabled","collapsed","active","onClick"]))),128))]),_:2},1032,["title","collapsed"]))),128)),e.renderSlot(u.$slots,"default",{collapsed:o.value})])],2))}}),_={"data-tauri-drag-region":""},v=["src","alt"],ee={"data-tauri-drag-region":""},te={"data-tauri-drag-region":""},ae=["src"],le=["src"],oe=["src"],ne=e.defineComponent({__name:"TopBar",props:{title:String,image:String},setup(t){const n=e.ref(null),a=L.getCurrentWindow(),l=e.ref(""),i=e.ref(""),r=e.ref(""),c=t;return e.onMounted(async()=>{l.value=await b.getIconSource("window-close"),i.value=await b.getIconSource("window-minimize"),r.value=await b.getIconSource("window-maximize")}),(d,o)=>(e.openBlock(),e.createElementBlock("div",{"data-tauri-drag-region":"",class:"flex h-8 px-4 py-1 bg-primary dark:bg-primary-dark rounded-t-corner-window justify-between align-center",ref_key:"bar",ref:n},[e.createElementVNode("div",_,[e.createElementVNode("img",{src:c.image,"data-tauri-drag-region":"",class:"h-6 w-auto",alt:c.title},null,8,v)]),e.createElementVNode("div",ee,e.toDisplayString(c.title),1),e.createElementVNode("div",te,[e.createElementVNode("span",{class:"win-button",onClick:o[0]||(o[0]=m=>e.unref(a).minimize())},[e.createElementVNode("img",{src:i.value,class:"h-6 w-6 inline-block",alt:"Minimize"},null,8,ae)]),e.createElementVNode("span",{class:"win-button",onClick:o[1]||(o[1]=m=>e.unref(a).toggleMaximize())},[e.createElementVNode("img",{src:r.value,class:"h-6 w-6 inline-block",alt:"Maximize"},null,8,le)]),e.createElementVNode("span",{class:"win-button",onClick:o[2]||(o[2]=m=>e.unref(a).close())},[e.createElementVNode("img",{src:l.value,class:"h-6 w-6 inline-block",alt:"Close"},null,8,oe)])])],512))}}),C=e.defineComponent({__name:"WindowFrame",props:{title:{default:"Vasak"},image:{default:""}},setup(t){const n=t;return(a,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(ne,{title:n.title,image:n.image},null,8,["title","image"]),e.renderSlot(a.$slots,"default")],64))}}),ie=["type","disabled"],se={key:0,class:"w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"},re=["src","alt"],ce={key:2},de=["src","alt"],me=e.defineComponent({__name:"ActionButton",props:{label:{},disabled:{type:Boolean,default:!1},variant:{default:"primary"},loading:{type:Boolean,default:!1},customClass:{default:()=>({})},size:{default:"md"},fullWidth:{type:Boolean,default:!1},iconSrc:{default:""},iconAlt:{default:""},iconRight:{type:Boolean,default:!1},type:{default:"button"},stopPropagation:{type:Boolean,default:!1},preventDefault:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:n}){const a=t,l=n,i={primary:"bg-primary dark:bg-primary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-primary/90 dark:hover:bg-primary-dark/90",secondary:"bg-secondary dark:bg-secondary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-secondary/80 dark:hover:bg-secondary-dark/80",danger:"bg-status-error dark:bg-status-error-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-status-error/90 dark:hover:bg-status-error-dark/90"},r={sm:"px-2 py-1 text-xs",md:"px-3 py-1 text-sm",lg:"px-4 py-2 text-base"},c=d=>{a.stopPropagation&&d.stopPropagation(),a.preventDefault&&d.preventDefault(),!a.disabled&&!a.loading&&l("click")};return(d,o)=>(e.openBlock(),e.createElementBlock("button",{type:a.type,onClick:c,class:e.normalizeClass(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",[i[a.variant],r[a.size],a.fullWidth?"w-full":"",a.iconSrc&&!a.label?"px-2 py-2":"",t.customClass]]),disabled:a.disabled||a.loading},[t.loading?(e.openBlock(),e.createElementBlock("span",se)):e.createCommentVNode("",!0),a.iconSrc&&!a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:1,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,re)):e.createCommentVNode("",!0),a.label?(e.openBlock(),e.createElementBlock("span",ce,e.toDisplayString(a.label),1)):e.createCommentVNode("",!0),a.iconSrc&&a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:3,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,de)):e.createCommentVNode("",!0)],10,ie))}}),p=(t,n)=>{const a=t.__vccOpts||t;for(const[l,i]of n)a[l]=i;return a},B=p(me,[["__scopeId","data-v-2eaf6e27"]]),ue={class:"text-base font-semibold m-0 text-primary dark:text-primary-dark"},w=p(e.defineComponent({__name:"ConfigSection",props:{title:{},icon:{default:""},customClass:{default:()=>({})}},setup(t){return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-4 p-4 background rounded-corner",t.customClass])},[e.createElementVNode("h3",ue,e.toDisplayString(t.icon?`${t.icon} ${t.title}`:t.title),1),e.renderSlot(n.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-45bd4eab"]]),fe={class:"flex items-center gap-3 flex-1 min-w-0"},ke=["src","alt"],be={class:"min-w-0"},pe={class:"font-semibold truncate"},ge={key:0,class:"text-xs text-gray-400 truncate"},he={key:1,class:"text-xs text-gray-400 truncate"},ye={key:2,class:"text-xs text-gray-400 flex gap-2 mt-1"},xe={key:1,class:"w-2 h-2 rounded-full bg-green-500"},E=e.defineComponent({__name:"DeviceCard",props:{icon:{},title:{},subtitle:{default:""},metadata:{default:""},extraInfo:{default:()=>[]},isConnected:{type:Boolean,default:!1},showActionButton:{type:Boolean,default:!0},actionLabel:{default:"Conectar"},showStatusIndicator:{type:Boolean,default:!1},customClass:{default:""},clickable:{type:Boolean,default:!1}},emits:["action","click"],setup(t,{emit:n}){const a=n,l=()=>{a("action")},i=()=>{a("click")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4",[{"border-l-4 border-green-500":t.isConnected},t.customClass]]),onClick:i},[e.createElementVNode("div",fe,[e.createElementVNode("img",{src:t.icon,alt:t.title,class:"h-7 w-7 shrink-0"},null,8,ke),e.createElementVNode("div",be,[e.createElementVNode("div",pe,e.toDisplayString(t.title),1),t.subtitle?(e.openBlock(),e.createElementBlock("div",ge,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0),t.metadata?(e.openBlock(),e.createElementBlock("div",he,e.toDisplayString(t.metadata),1)):e.createCommentVNode("",!0),t.extraInfo&&t.extraInfo.length>0?(e.openBlock(),e.createElementBlock("div",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.extraInfo,(d,o)=>(e.openBlock(),e.createElementBlock("span",{key:o},e.toDisplayString(d),1))),128))])):e.createCommentVNode("",!0)])]),t.showActionButton?(e.openBlock(),e.createElementBlock("button",{key:0,class:"bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",onClick:e.withModifiers(l,["stop"])},e.toDisplayString(t.actionLabel),1)):e.createCommentVNode("",!0),t.showStatusIndicator&&t.isConnected?(e.openBlock(),e.createElementBlock("div",xe)):e.createCommentVNode("",!0)],2))}}),Ce=["for"],$=p(e.defineComponent({__name:"FormGroup",props:{label:{},htmlFor:{default:""},customClass:{default:()=>({})},labelClass:{default:()=>({})}},setup(t){return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-2",t.customClass])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:t.htmlFor,class:e.normalizeClass(["text-sm font-medium text-primary dark:text-primary-dark",t.labelClass])},e.toDisplayString(t.label),11,Ce)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-c0d9d9cb"]]),V=p(e.defineComponent({__name:"ListCard",props:{clickable:{type:Boolean,default:!1},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:n}){const a=t,l=n,i=()=>{a.clickable&&l("click")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between background p-3 rounded-vsk border border-vsk-primary/70 transition-colors duration-200",{"hover:bg-vsk-primary/5 cursor-pointer":a.clickable},t.customClass]),onClick:i},[e.renderSlot(r.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-f86d47da"]]),Be={class:"background rounded-corner flex flex-row items-center gap-2 justify-between w-full h-auto p-4 transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80"},we=["src","alt","title"],Ee={key:1,class:"w-8 h-8 flex items-center justify-center"},$e=["src","alt"],Ve=["min","max","value"],S=e.defineComponent({__name:"SliderControl",props:{icon:{},alt:{default:""},tooltip:{default:""},modelValue:{},min:{default:0},max:{default:100},showButton:{type:Boolean,default:!1},iconClass:{default:()=>({})},getPercentageClass:{type:Function,default:()=>""}},emits:["update:modelValue","buttonClick"],setup(t,{emit:n}){const a=t,l=n,i=e.computed(()=>{if(a.max<=a.min)return 0;const o=a.max-a.min,m=a.modelValue-a.min;return Math.round(m/o*100)}),r=e.computed(()=>a.getPercentageClass?a.getPercentageClass(i.value):""),c=o=>{const m=o.target;l("update:modelValue",Number(m.value))},d=()=>{l("buttonClick")};return(o,m)=>(e.openBlock(),e.createElementBlock("div",Be,[t.showButton?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:d,class:"w-8 h-8 flex items-center justify-center rounded-corner transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80 hover:scale-110 active:scale-95"},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["w-6 h-6 transition-all duration-200",t.iconClass])},null,10,we)])):(e.openBlock(),e.createElementBlock("div",Ee,[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:"w-6 h-6 transition-all duration-200"},null,8,$e)])),e.createElementVNode("input",{type:"range",min:t.min,max:t.max,value:t.modelValue,onInput:c,class:"flex-1 transition-all duration-200 hover:scale-105"},null,40,Ve),e.createElementVNode("span",{class:e.normalizeClass(["w-12 text-right transition-all duration-200 font-medium",r.value])},e.toDisplayString(i.value)+"% ",3)]))}}),Se=["disabled"],N=e.defineComponent({__name:"SwitchToggle",props:{isOn:{type:Boolean},disabled:{type:Boolean,default:!1},size:{default:"small"},activeClass:{default:"bg-primary dark:bg-primary-dark"},inactiveClass:{default:"background"},customClass:{default:""}},emits:["toggle"],setup(t,{emit:n}){const a=t,l=n,i=()=>{l("toggle",!a.isOn)};return(r,c)=>(e.openBlock(),e.createElementBlock("button",{type:"button",onClick:i,disabled:t.disabled,class:e.normalizeClass(["relative inline-flex items-center rounded-full transition-colors",t.size==="small"?"h-6 w-11":"h-7 w-12",t.isOn?t.activeClass:t.inactiveClass,t.disabled?"opacity-50 cursor-not-allowed":"cursor-pointer",t.customClass])},[e.createElementVNode("span",{class:e.normalizeClass(["inline-block transform rounded-full bg-white shadow transition-transform",t.size==="small"?"h-4 w-4":"h-6 w-6",t.isOn?t.size==="small"?"translate-x-6":"translate-x-5":"translate-x-1"])},null,2)],10,Se))}}),Ne=["disabled"],ze=["src","alt","title"],z=e.defineComponent({__name:"ToggleControl",props:{icon:{},alt:{default:""},tooltip:{default:""},isActive:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},iconClass:{default:()=>({})},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:n}){const a=n,l=()=>{a("click")};return(i,r)=>(e.openBlock(),e.createElementBlock("button",{onClick:l,class:e.normalizeClass(["p-2 rounded-corner background hover:opacity-50 transition-all duration-300 h-17.5 w-17.5 group relative overflow-hidden hover:scale-105 hover:shadow-lg active:scale-95",{"animate-pulse":t.isLoading,"ring-2 ring-primary dark:ring-primary-dark":t.isActive,"opacity-60":!t.isActive,...t.customClass}]),disabled:t.isLoading},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10",{"animate-spin":t.isLoading,"filter brightness-75":!t.isActive,"drop-shadow-lg":t.isActive,...t.iconClass}])},null,10,ze)],10,Ne))}}),De=["title"],Te=["src","alt"],Ie={key:0,class:"absolute bottom-1 right-1 bg-primary dark:bg-primary-dark text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-bold animate-bounce"},D=e.defineComponent({__name:"TrayIconButton",props:{icon:{},alt:{default:""},tooltip:{default:""},badge:{default:null},iconClass:{default:()=>({})},customClass:{default:""},tooltipClass:{default:""},showCustomTooltip:{type:Boolean,default:!1},customTooltipText:{default:""}},emits:["click"],setup(t,{emit:n}){const a=n,l=e.ref(!1),i=()=>{a("click")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300",t.customClass]),title:t.tooltip,onClick:i,onMouseenter:c[0]||(c[0]=d=>l.value=!0),onMouseleave:c[1]||(c[1]=d=>l.value=!1)},[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:e.normalizeClass(["m-auto h-5.5 w-auto transition-all duration-300",t.iconClass])},null,10,Te),t.badge!==null&&t.badge>0?(e.openBlock(),e.createElementBlock("div",Ie,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0),t.showCustomTooltip&&t.customTooltipText?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["absolute top-1 left-1/2 transform -translate-x-1/2 text-xs font-semibold p-1 rounded-corner transition-all duration-300 pointer-events-none background",[t.tooltipClass,{"opacity-0 -translate-y-2":!l.value,"opacity-100 translate-y-0":l.value}]])},e.toDisplayString(t.customTooltipText),3)):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default")],42,De))}}),Le=[x,h,g,C,B,w,E,$,V,S,N,z,D],je={install(t){Le.forEach(n=>{t.component(n.name,n)})}};s.ActionButton=B,s.ConfigSection=w,s.DeviceCard=E,s.FormGroup=$,s.ListCard=V,s.SideBar=x,s.SideButton=h,s.SideGroup=g,s.SliderControl=S,s.SwitchToggle=N,s.ToggleControl=z,s.TrayIconButton=D,s.WindowFrame=C,s.default=je,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@tauri-apps/api/event"),require("@vasakgroup/plugin-vicons"),require("@tauri-apps/api/window")):typeof define=="function"&&define.amd?define(["exports","vue","@tauri-apps/api/event","@vasakgroup/plugin-vicons","@tauri-apps/api/window"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VueLibVasak={},r.Vue,r.TauriEvent,r.VasakVicons,r.TauriWindow))})(this,(function(r,e,M,p,j){"use strict";function F(t,o){const a=e.ref("");let l=null,s=!1,i=0;async function d(){const c=++i,n=t.value;if(!n){a.value="";return}const m=o.value==="symbol"?await p.getSymbolSource(n):await p.getIconSource(n);c===i&&(a.value=m)}return e.onMounted(async()=>{const c=await M.listen("vicons:theme-changed",d);if(s){c();return}l=c,await d()}),e.onUnmounted(()=>{s=!0,l?.()}),e.watch(t,d),a}const O=["src","alt"],k=e.defineComponent({__name:"ThemeIcon",props:{name:{},type:{default:"icon"},size:{default:18},alt:{default:""}},setup(t){const o=t,a=F(e.toRef(o,"name"),e.toRef(o,"type")),l=e.computed(()=>`${o.size}px`);return(s,i)=>e.unref(a)?(e.openBlock(),e.createElementBlock("img",{key:0,src:e.unref(a),alt:t.alt,style:e.normalizeStyle({width:l.value,height:l.value}),class:"shrink-0 object-contain"},null,12,O)):(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({width:l.value,height:l.value}),class:"shrink-0"},null,4))}}),P={class:"flex flex-col gap-2"},W=["aria-expanded"],R={key:1,class:"flex flex-col gap-1"},g=e.defineComponent({__name:"SideGroup",props:{title:{},collapsed:{type:Boolean,default:!1},defaultOpen:{type:Boolean,default:!0}},setup(t){const o=t,a=e.ref(o.defaultOpen);return e.watch(()=>o.collapsed,l=>{l&&(a.value=!0)}),(l,s)=>(e.openBlock(),e.createElementBlock("section",P,[t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"group flex w-full items-center justify-between rounded-corner px-2 py-1 text-tx-muted text-xs uppercase tracking-[0.08em] hover:bg-ui-surface/60","aria-expanded":a.value,onClick:s[0]||(s[0]=i=>a.value=!a.value)},[e.createElementVNode("span",null,e.toDisplayString(t.title),1),e.createElementVNode("span",{class:e.normalizeClass(["text-[10px] transition-transform duration-200",a.value?"rotate-180":""])}," v ",2)],8,W)),a.value||t.collapsed?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(l.$slots,"default")])):e.createCommentVNode("",!0)]))}}),q=["title","aria-label","disabled","aria-current"],G={key:1},U={key:0,class:"min-w-0 flex-1 truncate font-medium"},_={key:1,class:"rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs"},h=e.defineComponent({__name:"SideButton",props:{label:{},icon:{default:""},active:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},badge:{default:""}},emits:["click"],setup(t){return(o,a)=>(e.openBlock(),e.createElementBlock("button",{type:"button",title:t.collapsed?t.label:void 0,"aria-label":t.collapsed?t.label:void 0,disabled:t.disabled,"aria-current":t.active?"page":void 0,class:e.normalizeClass(["group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200",[t.active?"border-secondary bg-primary/15 text-tx-main shadow-sm":"border-transparent bg-transparent hover:border-ui-border hover:bg-ui-surface/70",t.disabled?"cursor-not-allowed opacity-60":"cursor-pointer",t.collapsed?"justify-center px-2":""]]),onClick:a[0]||(a[0]=l=>o.$emit("click"))},[e.createElementVNode("span",{class:e.normalizeClass(["flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide",t.active?"border-secondary bg-primary/20":""]),"aria-hidden":"true"},[t.icon?(e.openBlock(),e.createBlock(k,{key:0,name:t.icon,size:20},null,8,["name"])):(e.openBlock(),e.createElementBlock("span",G,e.toDisplayString(t.label.charAt(0).toUpperCase()),1))],2),t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",U,e.toDisplayString(t.label),1)),!t.collapsed&&t.badge!==""?(e.openBlock(),e.createElementBlock("span",_,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0)],10,q))}}),H={key:0,class:"flex flex-col gap-2 border-ui-border border-b p-2"},J={class:"flex items-center gap-2"},K=["aria-label","aria-expanded"],Q={key:0,class:"min-w-0 flex-1"},X={key:0,class:"truncate font-semibold text-sm"},Y={key:1,class:"truncate text-tx-muted text-xs"},Z={key:0},v={key:1,class:"flex border-ui-border border-b p-2"},ee=["aria-label","aria-expanded"],te={class:"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-2"},C="hidden h-8 w-8 shrink-0 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 transition-colors hover:bg-ui-surface md:inline-flex",B=e.defineComponent({__name:"SideBar",props:{title:{default:""},subtitle:{default:""},categories:{default:()=>[]},modelValue:{default:""},collapsed:{type:Boolean,default:void 0},collapseLabel:{default:"Collapse"},expandLabel:{default:"Expand"}},emits:["update:modelValue","update:collapsed","change"],setup(t,{expose:o,emit:a}){const l=t,s=a,i=e.ref(l.collapsed??!1),d=e.ref(!1);let c=null;const n=e.computed(()=>d.value||i.value),m=e.computed(()=>!!(l.title||l.subtitle));e.computed(()=>l.categories.length>0);function y(){d.value=c?.matches??!1}function A(){i.value=!i.value,s("update:collapsed",i.value)}function Ge(f){s("update:modelValue",f),s("change",f)}return e.watch(()=>l.collapsed,f=>{f!==void 0&&(i.value=f)}),e.onMounted(()=>{c=window.matchMedia("(max-width: 767px)"),y(),c.addEventListener("change",y)}),e.onBeforeUnmount(()=>c?.removeEventListener("change",y)),o({collapsed:n}),(f,Je)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-surface/70 transition-all duration-300",["w-[84px]",n.value?"md:w-[84px]":"md:w-72"]])},[m.value||f.$slots.header?(e.openBlock(),e.createElementBlock("header",H,[e.createElementVNode("div",J,[e.createElementVNode("button",{type:"button",class:e.normalizeClass(C),"aria-label":n.value?t.expandLabel:t.collapseLabel,"aria-expanded":!n.value,onClick:A},[e.createVNode(k,{name:n.value?"pan-end-symbolic":"pan-start-symbolic",type:"symbol",size:16},null,8,["name"])],8,K),m.value&&!n.value?(e.openBlock(),e.createElementBlock("div",Q,[t.title?(e.openBlock(),e.createElementBlock("p",X,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.subtitle?(e.openBlock(),e.createElementBlock("p",Y,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),f.$slots.header&&!n.value?(e.openBlock(),e.createElementBlock("div",Z,[e.renderSlot(f.$slots,"header",{collapsed:n.value})])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("button",{type:"button",class:e.normalizeClass(C),"aria-label":n.value?t.expandLabel:t.collapseLabel,"aria-expanded":!n.value,onClick:A},[e.createVNode(k,{name:n.value?"pan-end-symbolic":"pan-start-symbolic",type:"symbol",size:16},null,8,["name"])],8,ee)])),e.createElementVNode("div",te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.categories,x=>(e.openBlock(),e.createBlock(g,{key:x.id,title:x.title,collapsed:n.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.items,u=>(e.openBlock(),e.createBlock(h,{key:u.id,label:u.label,icon:u.icon,badge:u.badge,disabled:u.disabled,collapsed:n.value,active:t.modelValue===u.id,onClick:Ke=>Ge(u.id)},null,8,["label","icon","badge","disabled","collapsed","active","onClick"]))),128))]),_:2},1032,["title","collapsed"]))),128)),e.renderSlot(f.$slots,"default",{collapsed:n.value})])],2))}}),ae={class:"flex min-w-0 flex-col gap-1"},le=["for"],oe={class:"relative flex min-w-0 items-center"},ne=["id"],w=e.defineComponent({inheritAttrs:!1,__name:"SelectField",props:e.mergeModels({label:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=t,a=e.useAttrs(),l=e.useId(),s=e.computed(()=>a.id??l),[i,d]=e.useModel(t,"modelValue",{set(c){return d.number?Number(c):c}});return(c,n)=>(e.openBlock(),e.createElementBlock("div",ae,[o.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:s.value,class:"text-tx-muted text-xs"},e.toDisplayString(o.label),9,le)):e.createCommentVNode("",!0),e.createElementVNode("div",oe,[e.withDirectives(e.createElementVNode("select",e.mergeProps({id:s.value,"onUpdate:modelValue":n[0]||(n[0]=m=>e.isRef(i)?i.value=m:null),class:"min-w-0 flex-1 appearance-none truncate rounded-corner border border-ui-border bg-ui-surface/60 py-1.5 pr-8 pl-2 text-sm text-tx-main"},e.unref(a)),[e.renderSlot(c.$slots,"default")],16,ne),[[e.vModelSelect,e.unref(i)]]),e.createVNode(k,{name:"pan-down-symbolic",type:"symbol",size:14,class:"pointer-events-none absolute right-2"})])]))}}),se={"data-tauri-drag-region":""},ie=["src","alt"],re={"data-tauri-drag-region":""},ce={"data-tauri-drag-region":""},de=["src"],me=["src"],fe=["src"],ue=e.defineComponent({__name:"TopBar",props:{title:String,image:String},setup(t){const o=e.ref(null),a=j.getCurrentWindow(),l=e.ref(""),s=e.ref(""),i=e.ref(""),d=t;return e.onMounted(async()=>{l.value=await p.getIconSource("window-close"),s.value=await p.getIconSource("window-minimize"),i.value=await p.getIconSource("window-maximize")}),(c,n)=>(e.openBlock(),e.createElementBlock("div",{"data-tauri-drag-region":"",class:"flex h-8 px-4 py-1 bg-primary dark:bg-primary-dark rounded-t-corner-window justify-between align-center",ref_key:"bar",ref:o},[e.createElementVNode("div",se,[e.createElementVNode("img",{src:d.image,"data-tauri-drag-region":"",class:"h-6 w-auto",alt:d.title},null,8,ie)]),e.createElementVNode("div",re,e.toDisplayString(d.title),1),e.createElementVNode("div",ce,[e.createElementVNode("span",{class:"win-button",onClick:n[0]||(n[0]=m=>e.unref(a).minimize())},[e.createElementVNode("img",{src:s.value,class:"h-6 w-6 inline-block",alt:"Minimize"},null,8,de)]),e.createElementVNode("span",{class:"win-button",onClick:n[1]||(n[1]=m=>e.unref(a).toggleMaximize())},[e.createElementVNode("img",{src:i.value,class:"h-6 w-6 inline-block",alt:"Maximize"},null,8,me)]),e.createElementVNode("span",{class:"win-button",onClick:n[2]||(n[2]=m=>e.unref(a).close())},[e.createElementVNode("img",{src:l.value,class:"h-6 w-6 inline-block",alt:"Close"},null,8,fe)])])],512))}}),E=e.defineComponent({__name:"WindowFrame",props:{title:{default:"Vasak"},image:{default:""}},setup(t){const o=t;return(a,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(ue,{title:o.title,image:o.image},null,8,["title","image"]),e.renderSlot(a.$slots,"default")],64))}}),ke=["type","disabled"],pe={key:0,class:"w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"},be=["src","alt"],ge={key:2},he=["src","alt"],ye=e.defineComponent({__name:"ActionButton",props:{label:{},disabled:{type:Boolean,default:!1},variant:{default:"primary"},loading:{type:Boolean,default:!1},customClass:{default:()=>({})},size:{default:"md"},fullWidth:{type:Boolean,default:!1},iconSrc:{default:""},iconAlt:{default:""},iconRight:{type:Boolean,default:!1},type:{default:"button"},stopPropagation:{type:Boolean,default:!1},preventDefault:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:o}){const a=t,l=o,s={primary:"bg-primary dark:bg-primary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-primary/90 dark:hover:bg-primary-dark/90",secondary:"bg-secondary dark:bg-secondary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-secondary/80 dark:hover:bg-secondary-dark/80",danger:"bg-status-error dark:bg-status-error-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-status-error/90 dark:hover:bg-status-error-dark/90"},i={sm:"px-2 py-1 text-xs",md:"px-3 py-1 text-sm",lg:"px-4 py-2 text-base"},d=c=>{a.stopPropagation&&c.stopPropagation(),a.preventDefault&&c.preventDefault(),!a.disabled&&!a.loading&&l("click")};return(c,n)=>(e.openBlock(),e.createElementBlock("button",{type:a.type,onClick:d,class:e.normalizeClass(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",[s[a.variant],i[a.size],a.fullWidth?"w-full":"",a.iconSrc&&!a.label?"px-2 py-2":"",t.customClass]]),disabled:a.disabled||a.loading},[t.loading?(e.openBlock(),e.createElementBlock("span",pe)):e.createCommentVNode("",!0),a.iconSrc&&!a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:1,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,be)):e.createCommentVNode("",!0),a.label?(e.openBlock(),e.createElementBlock("span",ge,e.toDisplayString(a.label),1)):e.createCommentVNode("",!0),a.iconSrc&&a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:3,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,he)):e.createCommentVNode("",!0)],10,ke))}}),b=(t,o)=>{const a=t.__vccOpts||t;for(const[l,s]of o)a[l]=s;return a},$=b(ye,[["__scopeId","data-v-2eaf6e27"]]),xe={class:"text-base font-semibold m-0 text-primary dark:text-primary-dark"},V=b(e.defineComponent({__name:"ConfigSection",props:{title:{},icon:{default:""},customClass:{default:()=>({})}},setup(t){return(o,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-4 p-4 background rounded-corner",t.customClass])},[e.createElementVNode("h3",xe,e.toDisplayString(t.icon?`${t.icon} ${t.title}`:t.title),1),e.renderSlot(o.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-45bd4eab"]]),Ce={class:"flex items-center gap-3 flex-1 min-w-0"},Be=["src","alt"],we={class:"min-w-0"},Ee={class:"font-semibold truncate"},$e={key:0,class:"text-xs text-gray-400 truncate"},Ve={key:1,class:"text-xs text-gray-400 truncate"},Se={key:2,class:"text-xs text-gray-400 flex gap-2 mt-1"},Ne={key:1,class:"w-2 h-2 rounded-full bg-green-500"},S=e.defineComponent({__name:"DeviceCard",props:{icon:{},title:{},subtitle:{default:""},metadata:{default:""},extraInfo:{default:()=>[]},isConnected:{type:Boolean,default:!1},showActionButton:{type:Boolean,default:!0},actionLabel:{default:"Conectar"},showStatusIndicator:{type:Boolean,default:!1},customClass:{default:""},clickable:{type:Boolean,default:!1}},emits:["action","click"],setup(t,{emit:o}){const a=o,l=()=>{a("action")},s=()=>{a("click")};return(i,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4",[{"border-l-4 border-green-500":t.isConnected},t.customClass]]),onClick:s},[e.createElementVNode("div",Ce,[e.createElementVNode("img",{src:t.icon,alt:t.title,class:"h-7 w-7 shrink-0"},null,8,Be),e.createElementVNode("div",we,[e.createElementVNode("div",Ee,e.toDisplayString(t.title),1),t.subtitle?(e.openBlock(),e.createElementBlock("div",$e,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0),t.metadata?(e.openBlock(),e.createElementBlock("div",Ve,e.toDisplayString(t.metadata),1)):e.createCommentVNode("",!0),t.extraInfo&&t.extraInfo.length>0?(e.openBlock(),e.createElementBlock("div",Se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.extraInfo,(c,n)=>(e.openBlock(),e.createElementBlock("span",{key:n},e.toDisplayString(c),1))),128))])):e.createCommentVNode("",!0)])]),t.showActionButton?(e.openBlock(),e.createElementBlock("button",{key:0,class:"bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",onClick:e.withModifiers(l,["stop"])},e.toDisplayString(t.actionLabel),1)):e.createCommentVNode("",!0),t.showStatusIndicator&&t.isConnected?(e.openBlock(),e.createElementBlock("div",Ne)):e.createCommentVNode("",!0)],2))}}),ze=["for"],N=b(e.defineComponent({__name:"FormGroup",props:{label:{},htmlFor:{default:""},customClass:{default:()=>({})},labelClass:{default:()=>({})}},setup(t){return(o,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-2",t.customClass])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:t.htmlFor,class:e.normalizeClass(["text-sm font-medium text-primary dark:text-primary-dark",t.labelClass])},e.toDisplayString(t.label),11,ze)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-c0d9d9cb"]]),z=b(e.defineComponent({__name:"ListCard",props:{clickable:{type:Boolean,default:!1},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:o}){const a=t,l=o,s=()=>{a.clickable&&l("click")};return(i,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between background p-3 rounded-vsk border border-vsk-primary/70 transition-colors duration-200",{"hover:bg-vsk-primary/5 cursor-pointer":a.clickable},t.customClass]),onClick:s},[e.renderSlot(i.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-f86d47da"]]),De={class:"background rounded-corner flex flex-row items-center gap-2 justify-between w-full h-auto p-4 transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80"},Te=["src","alt","title"],Ie={key:1,class:"w-8 h-8 flex items-center justify-center"},Le=["src","alt"],Ae=["min","max","value"],D=e.defineComponent({__name:"SliderControl",props:{icon:{},alt:{default:""},tooltip:{default:""},modelValue:{},min:{default:0},max:{default:100},showButton:{type:Boolean,default:!1},iconClass:{default:()=>({})},getPercentageClass:{type:Function,default:()=>""}},emits:["update:modelValue","buttonClick"],setup(t,{emit:o}){const a=t,l=o,s=e.computed(()=>{if(a.max<=a.min)return 0;const n=a.max-a.min,m=a.modelValue-a.min;return Math.round(m/n*100)}),i=e.computed(()=>a.getPercentageClass?a.getPercentageClass(s.value):""),d=n=>{const m=n.target;l("update:modelValue",Number(m.value))},c=()=>{l("buttonClick")};return(n,m)=>(e.openBlock(),e.createElementBlock("div",De,[t.showButton?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:c,class:"w-8 h-8 flex items-center justify-center rounded-corner transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80 hover:scale-110 active:scale-95"},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["w-6 h-6 transition-all duration-200",t.iconClass])},null,10,Te)])):(e.openBlock(),e.createElementBlock("div",Ie,[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:"w-6 h-6 transition-all duration-200"},null,8,Le)])),e.createElementVNode("input",{type:"range",min:t.min,max:t.max,value:t.modelValue,onInput:d,class:"flex-1 transition-all duration-200 hover:scale-105"},null,40,Ae),e.createElementVNode("span",{class:e.normalizeClass(["w-12 text-right transition-all duration-200 font-medium",i.value])},e.toDisplayString(s.value)+"% ",3)]))}}),Me=["disabled"],T=e.defineComponent({__name:"SwitchToggle",props:{isOn:{type:Boolean},disabled:{type:Boolean,default:!1},size:{default:"small"},activeClass:{default:"bg-primary dark:bg-primary-dark"},inactiveClass:{default:"background"},customClass:{default:""}},emits:["toggle"],setup(t,{emit:o}){const a=t,l=o,s=()=>{l("toggle",!a.isOn)};return(i,d)=>(e.openBlock(),e.createElementBlock("button",{type:"button",onClick:s,disabled:t.disabled,class:e.normalizeClass(["relative inline-flex items-center rounded-full transition-colors",t.size==="small"?"h-6 w-11":"h-7 w-12",t.isOn?t.activeClass:t.inactiveClass,t.disabled?"opacity-50 cursor-not-allowed":"cursor-pointer",t.customClass])},[e.createElementVNode("span",{class:e.normalizeClass(["inline-block transform rounded-full bg-white shadow transition-transform",t.size==="small"?"h-4 w-4":"h-6 w-6",t.isOn?t.size==="small"?"translate-x-6":"translate-x-5":"translate-x-1"])},null,2)],10,Me))}}),je=["disabled"],Fe=["src","alt","title"],I=e.defineComponent({__name:"ToggleControl",props:{icon:{},alt:{default:""},tooltip:{default:""},isActive:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},iconClass:{default:()=>({})},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:o}){const a=o,l=()=>{a("click")};return(s,i)=>(e.openBlock(),e.createElementBlock("button",{onClick:l,class:e.normalizeClass(["p-2 rounded-corner background hover:opacity-50 transition-all duration-300 h-17.5 w-17.5 group relative overflow-hidden hover:scale-105 hover:shadow-lg active:scale-95",{"animate-pulse":t.isLoading,"ring-2 ring-primary dark:ring-primary-dark":t.isActive,"opacity-60":!t.isActive,...t.customClass}]),disabled:t.isLoading},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10",{"animate-spin":t.isLoading,"filter brightness-75":!t.isActive,"drop-shadow-lg":t.isActive,...t.iconClass}])},null,10,Fe)],10,je))}}),Oe=["title"],Pe=["src","alt"],We={key:0,class:"absolute bottom-1 right-1 bg-primary dark:bg-primary-dark text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-bold animate-bounce"},L=e.defineComponent({__name:"TrayIconButton",props:{icon:{},alt:{default:""},tooltip:{default:""},badge:{default:null},iconClass:{default:()=>({})},customClass:{default:""},tooltipClass:{default:""},showCustomTooltip:{type:Boolean,default:!1},customTooltipText:{default:""}},emits:["click"],setup(t,{emit:o}){const a=o,l=e.ref(!1),s=()=>{a("click")};return(i,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300",t.customClass]),title:t.tooltip,onClick:s,onMouseenter:d[0]||(d[0]=c=>l.value=!0),onMouseleave:d[1]||(d[1]=c=>l.value=!1)},[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:e.normalizeClass(["m-auto h-5.5 w-auto transition-all duration-300",t.iconClass])},null,10,Pe),t.badge!==null&&t.badge>0?(e.openBlock(),e.createElementBlock("div",We,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0),t.showCustomTooltip&&t.customTooltipText?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["absolute top-1 left-1/2 transform -translate-x-1/2 text-xs font-semibold p-1 rounded-corner transition-all duration-300 pointer-events-none background",[t.tooltipClass,{"opacity-0 -translate-y-2":!l.value,"opacity-100 translate-y-0":l.value}]])},e.toDisplayString(t.customTooltipText),3)):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default")],42,Oe))}}),Re=[B,h,g,w,k,E,$,V,S,N,z,D,T,I,L],qe={install(t){Re.forEach(o=>{t.component(o.name,o)})}};r.ActionButton=$,r.ConfigSection=V,r.DeviceCard=S,r.FormGroup=N,r.ListCard=z,r.SelectField=w,r.SideBar=B,r.SideButton=h,r.SideGroup=g,r.SliderControl=D,r.SwitchToggle=T,r.ThemeIcon=k,r.ToggleControl=I,r.TrayIconButton=L,r.WindowFrame=E,r.default=qe,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@vasakgroup/vue-libvasak",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Vue componenets for VSK Applications",
   "main": "./dist/vue-libvasak.umd.js",
   "module": "./dist/vue-libvasak.es.js",
-  "types": "src/types/vue-libvasak.d.ts",
+  "types": "./dist/types/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": {
-      "types": "./src/types/vue-libvasak.d.ts",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/vue-libvasak.es.js",
       "require": "./dist/vue-libvasak.umd.js",
       "default": "./dist/vue-libvasak.es.js"
@@ -65,10 +64,11 @@
     "vue-tsc": "^3.3.11"
   },
   "scripts": {
-    "build": "bunx vue-tsc --noEmit && bunx --bun vite build",
+    "build": "bun run typecheck && bunx --bun vite build && bun run tipos",
     "dev": "bunx --bun vite",
     "prepare": "bun run build",
     "typecheck": "bunx vue-tsc --noEmit",
-    "test": "bun test"
+    "test": "bun test",
+    "tipos": "bunx vue-tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist/types"
   }
 }

package/src/cards/DeviceCard.vue

@@ -1,82 +0,0 @@
-<template>
-  <div
-    class="flex items-center justify-between background rounded-vsk px-6 py-3 mb-4"
-    :class="[{ 'border-l-4 border-green-500': isConnected }, customClass]"
-    @click="handleClick"
-  >
-    <div class="flex items-center gap-3 flex-1 min-w-0">
-      <img :src="icon" :alt="title" class="h-7 w-7 shrink-0" />
-      <div class="min-w-0">
-        <div class="font-semibold truncate">
-          {{ title }}
-        </div>
-        <div v-if="subtitle" class="text-xs text-gray-400 truncate">
-          {{ subtitle }}
-        </div>
-        <div v-if="metadata" class="text-xs text-gray-400 truncate">
-          {{ metadata }}
-        </div>
-        <div v-if="extraInfo && extraInfo.length > 0" class="text-xs text-gray-400 flex gap-2 mt-1">
-          <span v-for="(info, index) in extraInfo" :key="index">
-            {{ info }}
-          </span>
-        </div>
-      </div>
-    </div>
-    
-    <button
-      v-if="showActionButton"
-      class="bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70"
-      @click.stop="handleAction"
-    >
-      {{ actionLabel }}
-    </button>
-
-    <!-- Status indicator for connected state -->
-    <div
-      v-if="showStatusIndicator && isConnected"
-      class="w-2 h-2 rounded-full bg-green-500"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  icon: string;
-  title: string;
-  subtitle?: string;
-  metadata?: string;
-  extraInfo?: string[];
-  isConnected?: boolean;
-  showActionButton?: boolean;
-  actionLabel?: string;
-  showStatusIndicator?: boolean;
-  customClass?: string;
-  clickable?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-  subtitle: '',
-  metadata: '',
-  extraInfo: () => [],
-  isConnected: false,
-  showActionButton: true,
-  actionLabel: 'Conectar',
-  showStatusIndicator: false,
-  customClass: '',
-  clickable: false,
-});
-
-const emit = defineEmits<{
-  action: [];
-  click: [];
-}>();
-
-const handleAction = () => {
-  emit('action');
-};
-
-const handleClick = () => {
-  emit('click');
-};
-</script>

package/src/cards/ListCard.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  clickable?: boolean;
-  customClass?: string | Record<string, boolean>;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  clickable: false,
-  customClass: () => ({}),
-});
-
-const emit = defineEmits<{
-  click: [];
-}>();
-
-const handleClick = () => {
-  if (props.clickable) {
-    emit('click');
-  }
-};
-</script>
-
-<template>
-  <div
-    :class="[
-      'flex items-center justify-between background p-3 rounded-vsk border border-vsk-primary/70 transition-colors duration-200',
-      {
-        'hover:bg-vsk-primary/5 cursor-pointer': props.clickable,
-      },
-      customClass,
-    ]"
-    @click="handleClick"
-  >
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-/* Ningún estilo adicional requerido */
-</style>

package/src/controls/ActionButton.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  label: string;
-  disabled?: boolean;
-  variant?: 'primary' | 'secondary' | 'danger';
-  loading?: boolean;
-  customClass?: string | Record<string, boolean>;
-  size?: 'sm' | 'md' | 'lg';
-  fullWidth?: boolean;
-  iconSrc?: string;
-  iconAlt?: string;
-  iconRight?: boolean;
-  type?: 'button' | 'submit' | 'reset';
-  stopPropagation?: boolean;
-  preventDefault?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  variant: 'primary',
-  loading: false,
-  customClass: () => ({}),
-  size: 'md',
-  fullWidth: false,
-  iconSrc: '',
-  iconAlt: '',
-  iconRight: false,
-  type: 'button',
-  stopPropagation: false,
-  preventDefault: false,
-});
-
-const emit = defineEmits<{
-  click: [];
-}>();
-
-const variantClasses: Record<string, string> = {
-  primary: 'bg-primary dark:bg-primary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-primary/90 dark:hover:bg-primary-dark/90',
-  secondary: 'bg-secondary dark:bg-secondary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-secondary/80 dark:hover:bg-secondary-dark/80',
-  danger: 'bg-status-error dark:bg-status-error-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-status-error/90 dark:hover:bg-status-error-dark/90',
-};
-
-const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
-  sm: 'px-2 py-1 text-xs',
-  md: 'px-3 py-1 text-sm',
-  lg: 'px-4 py-2 text-base',
-};
-
-const handleClick = (event: Event) => {
-  if (props.stopPropagation) event.stopPropagation();
-  if (props.preventDefault) event.preventDefault();
-  if (!props.disabled && !props.loading) {
-    emit('click');
-  }
-};
-</script>
-
-<template>
-  <button
-    :type="props.type"
-    @click="handleClick"
-    class="rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-    :class="[
-      variantClasses[props.variant],
-      sizeClasses[props.size],
-      props.fullWidth ? 'w-full' : '',
-      props.iconSrc && !props.label ? 'px-2 py-2' : '',
-      customClass,
-    ]"
-    :disabled="props.disabled || props.loading"
-  >
-    <span v-if="loading" class="w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
-    <template v-if="props.iconSrc && !props.iconRight">
-      <img :src="props.iconSrc" :alt="props.iconAlt || props.label" class="w-4 h-4" />
-    </template>
-    <span v-if="props.label">{{ props.label }}</span>
-    <template v-if="props.iconSrc && props.iconRight">
-      <img :src="props.iconSrc" :alt="props.iconAlt || props.label" class="w-4 h-4" />
-    </template>
-  </button>
-</template>
-
-<style scoped>
-/* Ningún estilo adicional requerido */
-</style>

package/src/controls/ToggleControl.vue

@@ -1,55 +0,0 @@
-<template>
-  <button
-    @click="handleClick"
-    class="p-2 rounded-corner background hover:opacity-50 transition-all duration-300 h-17.5 w-17.5 group relative overflow-hidden hover:scale-105 hover:shadow-lg active:scale-95"
-    :class="{
-      'animate-pulse': isLoading,
-      'ring-2 ring-primary dark:ring-primary-dark': isActive,
-      'opacity-60': !isActive,
-      ...customClass
-    }"
-    :disabled="isLoading"
-  >
-    <img
-      :src="icon"
-      :alt="alt"
-      :title="tooltip"
-      class="m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10"
-      :class="{
-        'animate-spin': isLoading,
-        'filter brightness-75': !isActive,
-        'drop-shadow-lg': isActive,
-        ...iconClass
-      }"
-    />
-  </button>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  icon: string;
-  alt?: string;
-  tooltip?: string;
-  isActive?: boolean;
-  isLoading?: boolean;
-  iconClass?: Record<string, boolean>;
-  customClass?: Record<string, boolean>;
-}
-
-withDefaults(defineProps<Props>(), {
-  alt: '',
-  tooltip: '',
-  isActive: false,
-  isLoading: false,
-  iconClass: () => ({}),
-  customClass: () => ({}),
-});
-
-const emit = defineEmits<{
-  click: [];
-}>();
-
-const handleClick = () => {
-  emit('click');
-};
-</script>

package/src/forms/FormGroup.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  label: string;
-  htmlFor?: string;
-  customClass?: string | Record<string, boolean>;
-  labelClass?: string | Record<string, boolean>;
-}
-
-withDefaults(defineProps<Props>(), {
-  htmlFor: '',
-  customClass: () => ({}),
-  labelClass: () => ({}),
-});
-</script>
-
-<template>
-  <div class="flex flex-col gap-2" :class="customClass">
-    <label v-if="label" :for="htmlFor" class="text-sm font-medium text-primary dark:text-primary-dark" :class="labelClass">
-      {{ label }}
-    </label>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-/* Ningún estilo adicional requerido */
-</style>

package/src/forms/SliderControl.vue

@@ -1,100 +0,0 @@
-<template>
-  <div
-    class="background rounded-corner flex flex-row items-center gap-2 justify-between w-full h-auto p-4 transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80"
-  >
-    <button
-      v-if="showButton"
-      @click="handleButtonClick"
-      class="w-8 h-8 flex items-center justify-center rounded-corner transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80 hover:scale-110 active:scale-95"
-    >
-      <img
-        :src="icon"
-        :alt="alt"
-        :title="tooltip"
-        class="w-6 h-6 transition-all duration-200"
-        :class="iconClass"
-      />
-    </button>
-    
-    <div
-      v-else
-      class="w-8 h-8 flex items-center justify-center"
-    >
-      <img
-        :src="icon"
-        :alt="alt"
-        class="w-6 h-6 transition-all duration-200"
-      />
-    </div>
-
-    <input
-      type="range"
-      :min="min"
-      :max="max"
-      :value="modelValue"
-      @input="handleInput"
-      class="flex-1 transition-all duration-200 hover:scale-105"
-    />
-    
-    <span
-      class="w-12 text-right transition-all duration-200 font-medium"
-      :class="percentageClass"
-    >
-      {{ percentage }}%
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-  icon: string;
-  alt?: string;
-  tooltip?: string;
-  modelValue: number;
-  min?: number;
-  max?: number;
-  showButton?: boolean;
-  iconClass?: string | Record<string, boolean>;
-  getPercentageClass?: (percentage: number) => string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  alt: '',
-  tooltip: '',
-  min: 0,
-  max: 100,
-  showButton: false,
-  iconClass: () => ({}),
-  getPercentageClass: () => '',
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number];
-  'buttonClick': [];
-}>();
-
-const percentage = computed(() => {
-  if (props.max <= props.min) return 0;
-  const range = props.max - props.min;
-  const value = props.modelValue - props.min;
-  return Math.round((value / range) * 100);
-});
-
-const percentageClass = computed(() => {
-  if (props.getPercentageClass) {
-    return props.getPercentageClass(percentage.value);
-  }
-  return '';
-});
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  emit('update:modelValue', Number(target.value));
-};
-
-const handleButtonClick = () => {
-  emit('buttonClick');
-};
-</script>

package/src/forms/SwitchToggle.vue

@@ -1,49 +0,0 @@
-<template>
-  <button
-    type="button"
-    @click="handleClick"
-    :disabled="disabled"
-    :class="[
-      'relative inline-flex items-center rounded-full transition-colors',
-      size === 'small' ? 'h-6 w-11' : 'h-7 w-12',
-      isOn ? activeClass : inactiveClass,
-      disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
-      customClass
-    ]"
-  >
-    <span
-      :class="[
-        'inline-block transform rounded-full bg-white shadow transition-transform',
-        size === 'small' ? 'h-4 w-4' : 'h-6 w-6',
-        isOn ? (size === 'small' ? 'translate-x-6' : 'translate-x-5') : 'translate-x-1'
-      ]"
-    ></span>
-  </button>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  isOn: boolean;
-  disabled?: boolean;
-  size?: 'small' | 'medium';
-  activeClass?: string;
-  inactiveClass?: string;
-  customClass?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  size: 'small',
-  activeClass: 'bg-primary dark:bg-primary-dark',
-  inactiveClass: 'background',
-  customClass: '',
-});
-
-const emit = defineEmits<{
-  toggle: [value: boolean];
-}>();
-
-const handleClick = () => {
-  emit('toggle', !props.isOn);
-};
-</script>

package/src/layout/ConfigSection.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title: string;
-  icon?: string;
-  customClass?: string | Record<string, boolean>;
-}
-
-withDefaults(defineProps<Props>(), {
-  icon: '',
-  customClass: () => ({}),
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col gap-4 p-4 background rounded-corner"
-    :class="customClass"
-  >
-    <h3 class="text-base font-semibold m-0 text-primary dark:text-primary-dark">
-      {{ icon ? `${icon} ${title}` : title }}
-    </h3>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-/* Ningún estilo adicional requerido */
-</style>

package/src/shims-vue.d.ts

@@ -1,15 +0,0 @@
-/**
- * Que TypeScript entienda los `.vue`.
- *
- * Acá había un `declare module '*'`, que no es un shim: es apagar el chequeo de
- * **todos** los imports del proyecto y dejarlos en `any`. Con eso, los tipos que
- * esta librería publica no los comprobaba nadie —ni siquiera contra sus propios
- * componentes—, que para un paquete cuya razón de ser es que otras seis
- * aplicaciones lo usen es justo lo que no puede pasar.
- */
-declare module '*.vue' {
-	import type { DefineComponent } from 'vue';
-
-	const componente: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-	export default componente;
-}