diff --git a/dist/sigpro-ui.cjs b/dist/sigpro-ui.cjs index d812180..c7788d7 100644 --- a/dist/sigpro-ui.cjs +++ b/dist/sigpro-ui.cjs @@ -996,17 +996,25 @@ var IndicatorModule = /*#__PURE__*/Object.freeze({ /** LIST */ const List = (props) => { - const { items, header, render, keyFn, class: className } = props; + const { items, header, render, keyFn, class: className, ...rest } = props; + + const headerItem = header + ? sigpro.$html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)]) + : null; + + const listItems = sigpro.$for( + items, + (item, index) => sigpro.$html("li", { class: "list-row" }, [render(item, index)]), + keyFn + ); return sigpro.$html( "ul", { + ...rest, class: joinClass("list bg-base-100 rounded-box shadow-md", className), }, - [ - sigpro.$if(header, () => sigpro.$html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])), - sigpro.$for(items, (item, index) => sigpro.$html("li", { class: "list-row" }, [render(item, index)]), keyFn), - ], + header ? [headerItem, listItems] : listItems ); }; diff --git a/dist/sigpro-ui.esm.js b/dist/sigpro-ui.esm.js index a37c3de..af36f71 100644 --- a/dist/sigpro-ui.esm.js +++ b/dist/sigpro-ui.esm.js @@ -992,17 +992,25 @@ var IndicatorModule = /*#__PURE__*/Object.freeze({ /** LIST */ const List = (props) => { - const { items, header, render, keyFn, class: className } = props; + const { items, header, render, keyFn, class: className, ...rest } = props; + + const headerItem = header + ? $html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)]) + : null; + + const listItems = $for( + items, + (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), + keyFn + ); return $html( "ul", { + ...rest, class: joinClass("list bg-base-100 rounded-box shadow-md", className), }, - [ - $if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])), - $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn), - ], + header ? [headerItem, listItems] : listItems ); }; diff --git a/dist/sigpro-ui.umd.js b/dist/sigpro-ui.umd.js index 3a92e6c..48dcce7 100644 --- a/dist/sigpro-ui.umd.js +++ b/dist/sigpro-ui.umd.js @@ -993,17 +993,25 @@ var SigProUI = (function (exports, sigpro) { /** LIST */ const List = (props) => { - const { items, header, render, keyFn, class: className } = props; + const { items, header, render, keyFn, class: className, ...rest } = props; + + const headerItem = header + ? sigpro.$html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)]) + : null; + + const listItems = sigpro.$for( + items, + (item, index) => sigpro.$html("li", { class: "list-row" }, [render(item, index)]), + keyFn + ); return sigpro.$html( "ul", { + ...rest, class: joinClass("list bg-base-100 rounded-box shadow-md", className), }, - [ - sigpro.$if(header, () => sigpro.$html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])), - sigpro.$for(items, (item, index) => sigpro.$html("li", { class: "list-row" }, [render(item, index)]), keyFn), - ], + header ? [headerItem, listItems] : listItems ); }; diff --git a/dist/sigpro-ui.umd.min.js b/dist/sigpro-ui.umd.min.js index ebc35bc..4ca5d0e 100644 --- a/dist/sigpro-ui.umd.min.js +++ b/dist/sigpro-ui.umd.min.js @@ -1 +1 @@ -var SigProUI=function(t,e){"use strict";const l=t=>"function"==typeof t?t():t,a=(t,e)=>"function"==typeof e?()=>`${t} ${e()||""}`.trim():`${t} ${e||""}`.trim();var o=Object.freeze({__proto__:null,joinClass:a,val:l});const n=(t,l)=>{const{title:o,name:n,open:s,...A}=t;return e.$html("div",{...A,class:a("collapse collapse-arrow bg-base-200 mb-2",t.class)},[e.$html("input",{type:n?"radio":"checkbox",name:n,checked:s}),e.$html("div",{class:"collapse-title text-xl font-medium"},o),e.$html("div",{class:"collapse-content"},l)])};var s=Object.freeze({__proto__:null,Accordion:n});const A="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg==",c="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC",r="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg==",i="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC",d="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII=",m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg==",u="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg==",p="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC",h="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC",g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg==",b="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC",f="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII=",$="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg==",v="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg==",B="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg==",w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII=",x="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC";var y=Object.freeze({__proto__:null,icon123:u,iconAbc:m,iconCalendar:i,iconClose:r,iconError:b,iconHide:c,iconInfo:h,iconLLeft:B,iconLeft:$,iconLock:d,iconMail:p,iconRRight:w,iconRight:v,iconShow:A,iconSuccess:g,iconUpload:x,iconWarning:f});const S=(t,a)=>{const{type:o="info",soft:n=!0,...s}=t,A={info:h,success:g,warning:f,error:b},c=a||t.message;return e.$html("div",{...s,role:"alert",class:()=>`alert ${(()=>{const t=l(o);return{info:"alert-info",success:"alert-success",warning:"alert-warning",error:"alert-error"}[t]||t})()} ${l(n)?"alert-soft":""} ${t.class||""}`},[e.$html("img",{src:A[l(o)]||A.info,class:"w-4 h-4 object-contain",alt:l(o)}),e.$html("div",{class:"flex-1"},[e.$html("span",{},["function"==typeof c?c():c])]),t.actions?e.$html("div",{class:"flex-none"},["function"==typeof t.actions?t.actions():t.actions]):null])};var C=Object.freeze({__proto__:null,Alert:S});const U={es:{close:"Cerrar",confirm:"Confirmar",cancel:"Cancelar",search:"Buscar...",loading:"Cargando...",nodata:"Sin datos"},en:{close:"Close",confirm:"Confirm",cancel:"Cancel",search:"Search...",loading:"Loading...",nodata:"No data"}},k=e.$("es"),R=t=>()=>U[k()][t]||t,D=t=>{const{label:o,tip:n,value:s,error:r,isSearch:h,icon:g,type:b="text",...f}=t,$="password"===b,v=e.$(!1),B={text:m,password:d,date:i,number:u,email:p},w=e.$html("input",{...f,type:()=>$?v()?"text":"password":b,placeholder:t.placeholder||o||(h?R("search")():" "),class:a("grow order-2 focus:outline-none",t.class),value:s,oninput:e=>t.oninput?.(e),disabled:()=>l(t.disabled)}),x=g||(B[b]?e.$html("img",{src:B[b],class:"opacity-50",alt:b}):null);return e.$html("label",{class:()=>a("input input-bordered floating-label flex items-center gap-2 w-full relative",l(r)?"input-error":"")},[x?e.$html("div",{class:"order-1 shrink-0"},x):null,o?e.$html("span",{class:"text-base-content/60 order-0"},o):null,w,$?e.$html("button",{type:"button",class:"order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",onclick:t=>{t.preventDefault(),v(!v())}},()=>e.$html("img",{class:"w-5 h-5",src:v()?A:c})):null,n?e.$html("div",{class:"tooltip tooltip-left order-4","data-tip":n},e.$html("span",{class:"badge badge-ghost badge-xs cursor-help"},"?")):null,()=>l(r)?e.$html("span",{class:"text-error text-[10px] absolute -bottom-5 left-2"},l(r)):null])};var j=Object.freeze({__proto__:null,Input:D});const _=t=>{const{options:a=[],value:o,onSelect:n,label:s,placeholder:A,...c}=t,r=e.$(l(o)||""),i=e.$(!1),d=e.$(-1),m=e.$(()=>{const t=r().toLowerCase(),e=l(a)||[];return t?e.filter(e=>("string"==typeof e?e:e.label).toLowerCase().includes(t)):e}),u=t=>{const e="string"==typeof t?t:t.value,l="string"==typeof t?t:t.label;r(l),"function"==typeof o&&o(e),n?.(t),i(!1),d(-1)};return e.$html("div",{class:"relative w-full"},[D({label:s,placeholder:A||R("search")(),value:r,onfocus:()=>i(!0),onblur:()=>setTimeout(()=>i(!1),150),onkeydown:t=>{const e=m();"ArrowDown"===t.key?(t.preventDefault(),i(!0),d(Math.min(d()+1,e.length-1))):"ArrowUp"===t.key?(t.preventDefault(),d(Math.max(d()-1,0))):"Enter"===t.key&&d()>=0?(t.preventDefault(),u(e[d()])):"Escape"===t.key&&i(!1)},oninput:t=>{const e=t.target.value;r(e),"function"==typeof o&&o(e),i(!0),d(-1)},...c}),e.$html("ul",{class:"absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",style:()=>i()&&m().length?"display:block":"display:none"},[e.$for(m,(t,l)=>e.$html("li",{},[e.$html("a",{class:()=>"block w-full "+(d()===l?"active bg-primary text-primary-content":""),onclick:()=>u(t),onmouseenter:()=>d(l)},"string"==typeof t?t:t.label)]),(t,e)=>("string"==typeof t?t:t.value)+e),()=>m().length?null:e.$html("li",{class:"p-2 text-center opacity-50"},"No results")])])};const z=(t,l)=>e.$html("span",{...t,class:a("badge",t.class)},l);const E=(t,o)=>{const{badge:n,badgeClass:s,tooltip:A,icon:c,loading:r,...i}=t;let d=e.$html("button",{...i,class:a("btn",t.class),disabled:()=>l(r)||l(t.disabled)},[()=>l(r)?e.$html("span",{class:"loading loading-spinner"}):null,c?e.$html("span",{class:"mr-1"},c):null,o]);return n&&(d=e.$html("div",{class:"indicator"},[e.$html("span",{class:a("indicator-item badge",s||"badge-secondary")},n),d])),A?e.$html("div",{class:"tooltip","data-tip":A},d):d};const I=t=>{const{value:a,tooltip:o,toggle:n,label:s,...A}=t,c=e.$html("input",{...A,type:"checkbox",class:()=>l(n)?"toggle":"checkbox",checked:a}),r=e.$html("label",{class:"label cursor-pointer justify-start gap-3"},[c,s?e.$html("span",{class:"label-text"},s):null]);return o?e.$html("div",{class:"tooltip","data-tip":o},r):r};const Y=t=>{const{value:a,label:o,...n}=t,s=e.$(!1),A=["#000","#1A1A1A","#333","#4D4D4D","#666","#808080","#B3B3B3","#FFF","#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626","#ef4444","#f87171","#fca5a5","#431407","#7c2d12","#9a3412","#c2410c","#ea580c","#f97316","#fb923c","#ffedd5","#713f12","#a16207","#ca8a04","#eab308","#facc15","#fde047","#fef08a","#fff9c4","#064e3b","#065f46","#059669","#10b981","#34d399","#4ade80","#84cc16","#d9f99d","#082f49","#075985","#0284c7","#0ea5e9","#38bdf8","#7dd3fc","#22d3ee","#cffafe","#1e1b4b","#312e81","#4338ca","#4f46e5","#6366f1","#818cf8","#a5b4fc","#e0e7ff","#2e1065","#4c1d95","#6d28d9","#7c3aed","#8b5cf6","#a855f7","#d946ef","#fae8ff"],c=()=>l(a)||"#000000";return e.$html("div",{class:"relative w-fit"},[e.$html("button",{type:"button",class:"btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",onclick:t=>{t.stopPropagation(),s(!s())},...n},[e.$html("div",{class:"size-5 rounded-sm shadow-inner border border-black/10 shrink-0",style:()=>`background-color: ${c()}`}),o?e.$html("span",{class:"opacity-80"},o):null]),e.$if(s,()=>e.$html("div",{class:"absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",onclick:t=>t.stopPropagation()},[e.$html("div",{class:"grid grid-cols-8 gap-1"},A.map(t=>e.$html("button",{type:"button",style:`background-color: ${t}`,class:()=>"size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 \n "+(c().toLowerCase()===t.toLowerCase()?"ring-2 ring-offset-1 ring-primary z-10 scale-110":""),onclick:()=>{"function"==typeof a&&a(t),s(!1)}})))])),e.$if(s,()=>e.$html("div",{class:"fixed inset-0 z-[100]",onclick:()=>s(!1)}))])};const V=t=>{const{value:a,range:o,label:n,placeholder:s,hour:A=!1,...c}=t,r=e.$(!1),d=e.$(new Date),m=e.$(null),u=e.$(0),p=e.$(0),h=()=>!0===l(o),g=new Date,b=`${g.getFullYear()}-${String(g.getMonth()+1).padStart(2,"0")}-${String(g.getDate()).padStart(2,"0")}`,f=t=>`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`,x=t=>{const e=f(t),o=l(a);if(h())if(!o?.start||o.start&&o.end)"function"==typeof a&&a({start:e,end:null,...A&&{startHour:u()}});else{const t=o.start;if("function"==typeof a){const l=e{const t=l(a);if(!t)return"";if("string"==typeof t)return A&&t.includes("T")?t.replace("T"," "):t;if(t.start&&t.end){return`${A&&t.startHour?`${t.start} ${String(t.startHour).padStart(2,"0")}:00`:t.start} - ${A&&t.endHour?`${t.end} ${String(t.endHour).padStart(2,"0")}:00`:t.end}`}if(t.start){return`${A&&t.startHour?`${t.start} ${String(t.startHour).padStart(2,"0")}:00`:t.start}...`}return""}),S=t=>{const e=d();d(new Date(e.getFullYear(),e.getMonth()+t,1))},C=t=>{const e=d();d(new Date(e.getFullYear()+t,e.getMonth(),1))},U=({value:t,onChange:a})=>e.$html("div",{class:"flex-1"},[e.$html("div",{class:"flex gap-2 items-center"},[e.$html("input",{type:"range",min:0,max:23,value:t,class:"range range-xs flex-1",oninput:t=>{const e=parseInt(t.target.value);a(e)}}),e.$html("span",{class:"text-sm font-mono min-w-[48px] text-center"},()=>String(l(t)).padStart(2,"0")+":00")])]);return e.$html("div",{class:"relative w-full"},[D({label:n,placeholder:s||(h()?"Seleccionar rango...":"Seleccionar fecha..."),value:y,readonly:!0,icon:e.$html("img",{src:i,class:"opacity-40"}),onclick:t=>{t.stopPropagation(),r(!r())},...c}),e.$if(r,()=>e.$html("div",{class:"absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",onclick:t=>t.stopPropagation()},[e.$html("div",{class:"flex justify-between items-center mb-4 gap-1"},[e.$html("div",{class:"flex gap-0.5"},[e.$html("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>C(-1)},e.$html("img",{src:B,class:"opacity-40"})),e.$html("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>S(-1)},e.$html("img",{src:$,class:"opacity-40"}))]),e.$html("span",{class:"font-bold uppercase flex-1 text-center"},[()=>d().toLocaleString("es-ES",{month:"short",year:"numeric"})]),e.$html("div",{class:"flex gap-0.5"},[e.$html("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>S(1)},e.$html("img",{src:v,class:"opacity-40"})),e.$html("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>C(1)},e.$html("img",{src:w,class:"opacity-40"}))])]),e.$html("div",{class:"grid grid-cols-7 gap-1",onmouseleave:()=>m(null)},[...["L","M","X","J","V","S","D"].map(t=>e.$html("div",{class:"text-[10px] opacity-40 font-bold text-center"},t)),()=>{const t=d(),o=t.getFullYear(),n=t.getMonth(),s=new Date(o,n,1).getDay(),A=0===s?6:s-1,c=new Date(o,n+1,0).getDate(),r=[];for(let t=0;t{const t=l(a),e=m(),o="string"==typeof t?t.split("T")[0]===A:t?.start===A,n=t?.end===A;let s=!1;if(h()&&t?.start){const l=t.start;!t.end&&e?s=A>l&&A<=e||A=e:t.end&&(s=A>l&&A{h()&&m(A)},onclick:()=>x(s)},[t.toString()]))}return r}]),A?e.$html("div",{class:"mt-3 pt-2 border-t border-base-300"},[h()?e.$html("div",{class:"flex gap-4"},[U({value:u,onChange:t=>{u(t);const e=l(a);e?.start&&a({...e,startHour:t})}}),U({value:p,onChange:t=>{p(t);const e=l(a);e?.end&&a({...e,endHour:t})}})]):U({value:u,onChange:t=>{u(t);const e=l(a);e&&"string"==typeof e&&e.includes("-")&&a(e.split("T")[0]+"T"+String(t).padStart(2,"0")+":00:00")}})]):null])),e.$if(r,()=>e.$html("div",{class:"fixed inset-0 z-[90]",onclick:()=>r(!1)}))])};const H=t=>e.$html("div",{class:a("drawer",t.class)},[e.$html("input",{id:t.id,type:"checkbox",class:"drawer-toggle",checked:t.open}),e.$html("div",{class:"drawer-content"},t.content),e.$html("div",{class:"drawer-side"},[e.$html("label",{for:t.id,class:"drawer-overlay",onclick:()=>t.open?.(!1)}),e.$html("div",{class:"min-h-full bg-base-200 w-80"},t.side)])]);const O=(t,a)=>{const{label:o,icon:n,...s}=t;return e.$html("div",{...s,class:()=>`dropdown ${l(t.class)||t.class||""}`},[e.$html("div",{tabindex:0,role:"button",class:"btn m-1 flex items-center gap-2"},[n?"function"==typeof n?n():n:null,o?"function"==typeof o?o():o:null]),e.$html("ul",{tabindex:0,class:"dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"},["function"==typeof a?a():a])])};const F=t=>{const{icon:a,label:o,actions:n=[],position:s="bottom-6 right-6",...A}=t;return e.$html("div",{...A,class:()=>`fab fixed ${l(s)} flex flex-col-reverse items-end gap-3 z-[100] ${t.class||""}`},[e.$html("div",{tabindex:0,role:"button",class:"btn btn-lg btn-circle btn-primary shadow-2xl"},[a?"function"==typeof a?a():a:null,!a&&o?o:null]),...l(n).map(t=>e.$html("div",{class:"flex items-center gap-3 transition-all duration-300"},[t.label?e.$html("span",{class:"badge badge-ghost shadow-sm whitespace-nowrap"},t.label):null,e.$html("button",{type:"button",class:`btn btn-circle shadow-lg ${t.class||""}`,onclick:e=>{e.stopPropagation(),t.onclick?.(e)}},[t.icon?"function"==typeof t.icon?t.icon():t.icon:t.text||""])]))])};const Q=(t,o)=>e.$html("fieldset",{...t,class:a("fieldset bg-base-200 border border-base-300 p-4 rounded-lg",t.class)},[()=>{const a=l(t.legend);return a?e.$html("legend",{class:"fieldset-legend font-bold"},[a]):null},o]);const N=t=>{const{tooltip:l,max:a=2,accept:o="*",onSelect:n}=t,s=e.$([]),A=e.$(!1),c=e.$(null),i=1024*a*1024,d=t=>{const e=Array.from(t);c(null);e.find(t=>t.size>i)?c(`Mรกx ${a}MB`):(s([...s(),...e]),n?.(s()))};return e.$html("fieldset",{class:"fieldset w-full p-0"},[e.$html("div",{class:()=>"w-full "+(l?"tooltip tooltip-top before:z-50 after:z-50":""),"data-tip":l},[e.$html("label",{class:()=>`\n relative flex items-center justify-between w-full h-12 px-4\n border-2 border-dashed rounded-lg cursor-pointer\n transition-all duration-200\n ${A()?"border-primary bg-primary/10":"border-base-content/20 bg-base-100 hover:bg-base-200"}\n `,ondragover:t=>{t.preventDefault(),A(!0)},ondragleave:()=>A(!1),ondrop:t=>{t.preventDefault(),A(!1),d(t.dataTransfer.files)}},[e.$html("div",{class:"flex items-center gap-3 w-full"},[e.$html("img",{src:x,class:"w-5 h-5 opacity-50 shrink-0"}),e.$html("span",{class:"text-sm opacity-70 truncate grow text-left"},"Arrastra o selecciona archivos..."),e.$html("span",{class:"text-[10px] opacity-40 shrink-0"},`Mรกx ${a}MB`)]),e.$html("input",{type:"file",multiple:!0,accept:o,class:"hidden",onchange:t=>d(t.target.files)})])]),()=>c()?e.$html("span",{class:"text-[10px] text-error mt-1 px-1 font-medium"},c()):null,e.$if(()=>s().length>0,()=>e.$html("ul",{class:"mt-2 space-y-1"},[e.$for(s,(t,l)=>e.$html("li",{class:"flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300"},[e.$html("div",{class:"flex items-center gap-2 truncate"},[e.$html("span",{class:"opacity-50"},"๐Ÿ“„"),e.$html("span",{class:"truncate font-medium max-w-[200px]"},t.name),e.$html("span",{class:"text-[9px] opacity-40"},`(${(t.size/1024).toFixed(0)} KB)`)]),e.$html("button",{type:"button",class:"btn btn-ghost btn-xs btn-circle",onclick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{const e=s().filter((e,l)=>l!==t);s(e),n?.(e)})(l)}},[e.$html("img",{src:r,class:"w-3 h-3 opacity-70"})])]),t=>t.name+t.lastModified)]))])};const L=(t,l)=>e.$html("div",{class:a("indicator",t.class)},[l,e.$html("span",{class:a("indicator-item badge",t.badgeClass)},t.badge)]);const T=t=>{const{items:o,header:n,render:s,keyFn:A,class:c}=t;return e.$html("ul",{class:a("list bg-base-100 rounded-box shadow-md",c)},[e.$if(n,()=>e.$html("li",{class:"p-4 pb-2 text-xs opacity-60 tracking-wide"},[l(n)])),e.$for(o,(t,l)=>e.$html("li",{class:"list-row"},[s(t,l)]),A)])};const G=t=>e.$if(t.$show,()=>e.$html("div",{class:"fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"},[e.$html("span",{class:"loading loading-spinner loading-lg text-primary"})]));const M=t=>{const o=t=>e.$for(()=>t||[],t=>e.$html("li",{},[t.children?e.$html("details",{open:t.open},[e.$html("summary",{},[t.icon&&e.$html("span",{class:"mr-2"},t.icon),t.label]),e.$html("ul",{},o(t.children))]):e.$html("a",{class:()=>l(t.active)?"active":"",onclick:t.onclick},[t.icon&&e.$html("span",{class:"mr-2"},t.icon),t.label])]),(t,e)=>t.label||e);return e.$html("ul",{...t,class:a("menu bg-base-200 rounded-box",t.class)},o(t.items))};const J=(t,l)=>{const{title:a,buttons:o,open:n,...s}=t,A=()=>n(!1);return e.$if(n,()=>e.$html("dialog",{...s,class:"modal modal-open"},[e.$html("div",{class:"modal-box"},[a?e.$html("h3",{class:"text-lg font-bold mb-4"},a):null,"function"==typeof l?l():l,e.$html("div",{class:"modal-action flex gap-2"},[...(Array.isArray(o)?o:[o]).filter(Boolean),E({onclick:A},R("close")())])]),e.$html("form",{method:"dialog",class:"modal-backdrop",onclick:t=>(t.preventDefault(),A())},[e.$html("button",{},"close")])]))};const K=(t,l)=>e.$html("div",{...t,class:a("navbar bg-base-100 shadow-sm px-4",t.class)},l);const P=t=>{const{label:o,tooltip:n,value:s,inputValue:A,name:c,...r}=t,i=e.$html("input",{...r,type:"radio",name:c,class:a("radio",t.class),checked:()=>l(s)===A,onclick:()=>{"function"==typeof s&&s(A)}});return o||n?e.$html("label",{class:"label cursor-pointer justify-start gap-3"},[i,o?e.$html("span",{class:"label-text"},o):null]):i};const X=t=>{const{label:o,tooltip:n,value:s,...A}=t,c=e.$html("input",{...A,type:"range",class:a("range",t.class),value:s,disabled:()=>l(t.disabled)});if(!o&&!n)return c;const r=e.$html("div",{class:"flex flex-col gap-2"},[o?e.$html("span",{class:"label-text"},o):null,c]);return n?e.$html("div",{class:"tooltip","data-tip":n},r):r};const Z=t=>{const{value:a,count:o=5,mask:n="mask-star",readonly:s=!1,onchange:A,...c}=t,r=`rating-${Math.random().toString(36).slice(2,7)}`;return e.$html("div",{...c,class:()=>`rating ${l(s)?"pointer-events-none":""} ${t.class||""}`},Array.from({length:l(o)},(t,o)=>{const c=o+1;return e.$html("input",{type:"radio",name:r,class:`mask ${n}`,checked:()=>Math.round(l(a))===c,onchange:()=>{l(s)||("function"==typeof A?A(c):"function"==typeof a&&a(c))}})}))};const W=t=>{const{label:o,options:n,value:s,...A}=t,c=e.$html("select",{...A,class:a("select select-bordered w-full",t.class),value:s},e.$for(()=>l(n)||[],t=>e.$html("option",{value:t.value,$selected:()=>String(l(s))===String(t.value)},t.label),t=>t.value));return o?e.$html("label",{class:"fieldset-label flex flex-col gap-1"},[e.$html("span",{},o),c]):c};const q=(t,l)=>e.$html("div",{...t,class:a("stack",t.class)},l);const tt=t=>e.$html("div",{...t,class:a("stat",t.class)},[t.icon&&e.$html("div",{class:"stat-figure text-secondary"},t.icon),t.label&&e.$html("div",{class:"stat-title"},t.label),e.$html("div",{class:"stat-value"},()=>l(t.value)??t.value),t.desc&&e.$html("div",{class:"stat-desc"},t.desc)]);const et=t=>e.$html("label",{class:a("swap",t.class)},[e.$html("input",{type:"checkbox",checked:t.value}),e.$html("div",{class:"swap-on"},t.on),e.$html("div",{class:"swap-off"},t.off)]);const lt=t=>{const{items:o=[],columns:n=[],keyFn:s,zebra:A=!1,pinRows:c=!1,empty:r=R("nodata")(),...i}=t;return e.$html("div",{class:"overflow-x-auto w-full bg-base-100 rounded-box border border-base-300"},[e.$html("table",{...i,class:()=>a("table",`${l(A)?"table-zebra":""} ${l(c)?"table-pin-rows":""} ${t.class||""}`)},[e.$html("thead",{},[e.$html("tr",{},n.map(t=>e.$html("th",{class:t.class||""},t.label)))]),e.$html("tbody",{},[e.$for(o,(t,a)=>e.$html("tr",{class:"hover"},n.map(o=>e.$html("td",{class:o.class||""},[()=>{if(o.render)return o.render(t,a);const e=t[o.key];return l(e)}]))),s||((t,e)=>t.id||e)),e.$if(()=>0===l(o).length,()=>e.$html("tr",{},[e.$html("td",{colspan:n.length,class:"text-center p-10 opacity-50"},[l(r)])]))]),e.$if(()=>n.some(t=>t.footer),()=>e.$html("tfoot",{},[e.$html("tr",{},n.map(t=>e.$html("th",{},t.footer||"")))]))])])};const at=t=>{const{items:o,...n}=t,s="function"==typeof o?o:()=>o||[];return e.$html("div",{...n,class:"flex flex-col gap-4 w-full"},[e.$html("div",{role:"tablist",class:a("tabs tabs-box",t.class)},e.$for(s,t=>e.$html("a",{role:"tab",class:()=>a("tab",l(t.active)&&"tab-active",l(t.disabled),t.tip),"data-tip":t.tip,onclick:e=>!l(t.disabled)&&t.onclick?.(e)},t.label),t=>t.label)),()=>{const t=s().find(t=>l(t.active));if(!t)return null;const a=l(t.content);return e.$html("div",{class:"p-4"},["function"==typeof a?a():a])}])};const ot=t=>{const{items:a=[],vertical:o=!0,compact:n=!1,...s}=t,A={info:h,success:g,warning:f,error:b};return e.$html("ul",{...s,class:()=>`timeline ${l(o)?"timeline-vertical":"timeline-horizontal"} ${l(n)?"timeline-compact":""} ${t.class||""}`},[e.$for(a,(t,o)=>{const n=0===o,s=o===l(a).length-1,c=t.type||"success",r=t=>"function"==typeof t?t():t;return e.$html("li",{class:"flex-1"},[n?null:e.$html("hr",{class:t.completed?"bg-primary":""}),e.$html("div",{class:"timeline-start"},[r(t.title)]),e.$html("div",{class:"timeline-middle"},[e.$html("img",{src:A[c]||t.icon||A.success,class:"w-4 h-4 object-contain mx-1",alt:c})]),e.$html("div",{class:"timeline-end timeline-box shadow-sm"},[r(t.detail)]),s?null:e.$html("hr",{class:t.completed?"bg-primary":""})])},(t,e)=>t.id||e)])};const nt=(t,l="alert-success",a=3500)=>{let o=document.getElementById("sigpro-toast-container");o||(o=e.$html("div",{id:"sigpro-toast-container",class:"fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"}),document.body.appendChild(o));const n=e.$html("div",{style:"display: contents"});let s;o.appendChild(n);const A=()=>{clearTimeout(s);const t=n.firstElementChild;t&&!t.classList.contains("opacity-0")?(t.classList.add("translate-x-full","opacity-0"),setTimeout(()=>{c.destroy(),n.remove(),o.hasChildNodes()||o.remove()},300)):(c.destroy(),n.remove())},c=e.$mount(()=>{const a=e.$html("div",{class:`alert alert-soft ${l} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`},[e.$html("span",{},["function"==typeof t?t():t]),E({class:"btn-xs btn-circle btn-ghost",onclick:A},"โœ•")]);return requestAnimationFrame(()=>a.classList.remove("translate-x-10","opacity-0")),a},n);return a>0&&(s=setTimeout(A,a)),A};const st=(t,l)=>e.$html("div",{...t,class:a("tooltip",t.class),"data-tip":t.tip},l);const At={...s,...C,...Object.freeze({__proto__:null,Autocomplete:_}),...Object.freeze({__proto__:null,Badge:z}),...Object.freeze({__proto__:null,Button:E}),...Object.freeze({__proto__:null,Checkbox:I}),...Object.freeze({__proto__:null,Colorpicker:Y}),...Object.freeze({__proto__:null,Datepicker:V}),...Object.freeze({__proto__:null,Drawer:H}),...Object.freeze({__proto__:null,Dropdown:O}),...Object.freeze({__proto__:null,Fab:F}),...Object.freeze({__proto__:null,Fieldset:Q}),...Object.freeze({__proto__:null,Fileinput:N}),...Object.freeze({__proto__:null,Indicator:L}),...j,...Object.freeze({__proto__:null,List:T}),...Object.freeze({__proto__:null,Loading:G}),...Object.freeze({__proto__:null,Menu:M}),...Object.freeze({__proto__:null,Modal:J}),...Object.freeze({__proto__:null,Navbar:K}),...Object.freeze({__proto__:null,Radio:P}),...Object.freeze({__proto__:null,Range:X}),...Object.freeze({__proto__:null,Rating:Z}),...Object.freeze({__proto__:null,Select:W}),...Object.freeze({__proto__:null,Stack:q}),...Object.freeze({__proto__:null,Stat:tt}),...Object.freeze({__proto__:null,Swap:et}),...Object.freeze({__proto__:null,Table:lt}),...Object.freeze({__proto__:null,Tabs:at}),...Object.freeze({__proto__:null,Timeline:ot}),...Object.freeze({__proto__:null,Toast:nt}),...Object.freeze({__proto__:null,Tooltip:st})};var ct={...At,install:(t=window)=>{Object.entries(At).forEach(([e,l])=>{t[e]=l}),console.log("๐Ÿš€ SigproUI")}},rt=Object.freeze({__proto__:null,Accordion:n,Alert:S,Autocomplete:_,Badge:z,Button:E,Checkbox:I,Colorpicker:Y,Datepicker:V,Drawer:H,Dropdown:O,Fab:F,Fieldset:Q,Fileinput:N,Indicator:L,Input:D,List:T,Loading:G,Menu:M,Modal:J,Navbar:K,Radio:P,Range:X,Rating:Z,Select:W,Stack:q,Stat:tt,Swap:et,Table:lt,Tabs:at,Timeline:ot,Toast:nt,Tooltip:st,default:ct});const it={...rt,Icons:y,Utils:o,tt:R,install:(t=("undefined"!=typeof window?window:{}))=>{Object.entries(rt).forEach(([e,l])=>{t[e]=l}),t.Icons=y,t.Utils=o,t.tt=R,console.log("๐ŸŒŸ SigproUI")}};return"undefined"!=typeof window&&it.install(window),t.Accordion=n,t.Alert=S,t.Autocomplete=_,t.Badge=z,t.Button=E,t.Checkbox=I,t.Colorpicker=Y,t.Datepicker=V,t.Drawer=H,t.Dropdown=O,t.Fab=F,t.Fieldset=Q,t.Fileinput=N,t.Indicator=L,t.Input=D,t.List=T,t.Loading=G,t.Menu=M,t.Modal=J,t.Navbar=K,t.Radio=P,t.Range=X,t.Rating=Z,t.Select=W,t.Stack=q,t.Stat=tt,t.Swap=et,t.Table=lt,t.Tabs=at,t.Timeline=ot,t.Toast=nt,t.Tooltip=st,t.default=it,t.icon123=u,t.iconAbc=m,t.iconCalendar=i,t.iconClose=r,t.iconError=b,t.iconHide=c,t.iconInfo=h,t.iconLLeft=B,t.iconLeft=$,t.iconLock=d,t.iconMail=p,t.iconRRight=w,t.iconRight=v,t.iconShow=A,t.iconSuccess=g,t.iconUpload=x,t.iconWarning=f,t.joinClass=a,t.tt=R,t.val=l,Object.defineProperty(t,"__esModule",{value:!0}),t}({},SigPro); +var SigProUI=function(t,e){"use strict";const l=t=>"function"==typeof t?t():t,a=(t,e)=>"function"==typeof e?()=>`${t} ${e()||""}`.trim():`${t} ${e||""}`.trim();var o=Object.freeze({__proto__:null,joinClass:a,val:l});const n=(t,l)=>{const{title:o,name:n,open:s,...A}=t;return e.$html("div",{...A,class:a("collapse collapse-arrow bg-base-200 mb-2",t.class)},[e.$html("input",{type:n?"radio":"checkbox",name:n,checked:s}),e.$html("div",{class:"collapse-title text-xl font-medium"},o),e.$html("div",{class:"collapse-content"},l)])};var s=Object.freeze({__proto__:null,Accordion:n});const A="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg==",c="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC",r="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg==",i="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC",d="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII=",m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg==",u="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg==",p="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC",h="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC",g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg==",b="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC",f="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII=",$="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg==",v="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg==",B="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg==",w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII=",x="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC";var y=Object.freeze({__proto__:null,icon123:u,iconAbc:m,iconCalendar:i,iconClose:r,iconError:b,iconHide:c,iconInfo:h,iconLLeft:B,iconLeft:$,iconLock:d,iconMail:p,iconRRight:w,iconRight:v,iconShow:A,iconSuccess:g,iconUpload:x,iconWarning:f});const S=(t,a)=>{const{type:o="info",soft:n=!0,...s}=t,A={info:h,success:g,warning:f,error:b},c=a||t.message;return e.$html("div",{...s,role:"alert",class:()=>`alert ${(()=>{const t=l(o);return{info:"alert-info",success:"alert-success",warning:"alert-warning",error:"alert-error"}[t]||t})()} ${l(n)?"alert-soft":""} ${t.class||""}`},[e.$html("img",{src:A[l(o)]||A.info,class:"w-4 h-4 object-contain",alt:l(o)}),e.$html("div",{class:"flex-1"},[e.$html("span",{},["function"==typeof c?c():c])]),t.actions?e.$html("div",{class:"flex-none"},["function"==typeof t.actions?t.actions():t.actions]):null])};var C=Object.freeze({__proto__:null,Alert:S});const U={es:{close:"Cerrar",confirm:"Confirmar",cancel:"Cancelar",search:"Buscar...",loading:"Cargando...",nodata:"Sin datos"},en:{close:"Close",confirm:"Confirm",cancel:"Cancel",search:"Search...",loading:"Loading...",nodata:"No data"}},k=e.$("es"),R=t=>()=>U[k()][t]||t,D=t=>{const{label:o,tip:n,value:s,error:r,isSearch:h,icon:g,type:b="text",...f}=t,$="password"===b,v=e.$(!1),B={text:m,password:d,date:i,number:u,email:p},w=e.$html("input",{...f,type:()=>$?v()?"text":"password":b,placeholder:t.placeholder||o||(h?R("search")():" "),class:a("grow order-2 focus:outline-none",t.class),value:s,oninput:e=>t.oninput?.(e),disabled:()=>l(t.disabled)}),x=g||(B[b]?e.$html("img",{src:B[b],class:"opacity-50",alt:b}):null);return e.$html("label",{class:()=>a("input input-bordered floating-label flex items-center gap-2 w-full relative",l(r)?"input-error":"")},[x?e.$html("div",{class:"order-1 shrink-0"},x):null,o?e.$html("span",{class:"text-base-content/60 order-0"},o):null,w,$?e.$html("button",{type:"button",class:"order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",onclick:t=>{t.preventDefault(),v(!v())}},()=>e.$html("img",{class:"w-5 h-5",src:v()?A:c})):null,n?e.$html("div",{class:"tooltip tooltip-left order-4","data-tip":n},e.$html("span",{class:"badge badge-ghost badge-xs cursor-help"},"?")):null,()=>l(r)?e.$html("span",{class:"text-error text-[10px] absolute -bottom-5 left-2"},l(r)):null])};var j=Object.freeze({__proto__:null,Input:D});const _=t=>{const{options:a=[],value:o,onSelect:n,label:s,placeholder:A,...c}=t,r=e.$(l(o)||""),i=e.$(!1),d=e.$(-1),m=e.$(()=>{const t=r().toLowerCase(),e=l(a)||[];return t?e.filter(e=>("string"==typeof e?e:e.label).toLowerCase().includes(t)):e}),u=t=>{const e="string"==typeof t?t:t.value,l="string"==typeof t?t:t.label;r(l),"function"==typeof o&&o(e),n?.(t),i(!1),d(-1)};return e.$html("div",{class:"relative w-full"},[D({label:s,placeholder:A||R("search")(),value:r,onfocus:()=>i(!0),onblur:()=>setTimeout(()=>i(!1),150),onkeydown:t=>{const e=m();"ArrowDown"===t.key?(t.preventDefault(),i(!0),d(Math.min(d()+1,e.length-1))):"ArrowUp"===t.key?(t.preventDefault(),d(Math.max(d()-1,0))):"Enter"===t.key&&d()>=0?(t.preventDefault(),u(e[d()])):"Escape"===t.key&&i(!1)},oninput:t=>{const e=t.target.value;r(e),"function"==typeof o&&o(e),i(!0),d(-1)},...c}),e.$html("ul",{class:"absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",style:()=>i()&&m().length?"display:block":"display:none"},[e.$for(m,(t,l)=>e.$html("li",{},[e.$html("a",{class:()=>"block w-full "+(d()===l?"active bg-primary text-primary-content":""),onclick:()=>u(t),onmouseenter:()=>d(l)},"string"==typeof t?t:t.label)]),(t,e)=>("string"==typeof t?t:t.value)+e),()=>m().length?null:e.$html("li",{class:"p-2 text-center opacity-50"},"No results")])])};const z=(t,l)=>e.$html("span",{...t,class:a("badge",t.class)},l);const E=(t,o)=>{const{badge:n,badgeClass:s,tooltip:A,icon:c,loading:r,...i}=t;let d=e.$html("button",{...i,class:a("btn",t.class),disabled:()=>l(r)||l(t.disabled)},[()=>l(r)?e.$html("span",{class:"loading loading-spinner"}):null,c?e.$html("span",{class:"mr-1"},c):null,o]);return n&&(d=e.$html("div",{class:"indicator"},[e.$html("span",{class:a("indicator-item badge",s||"badge-secondary")},n),d])),A?e.$html("div",{class:"tooltip","data-tip":A},d):d};const I=t=>{const{value:a,tooltip:o,toggle:n,label:s,...A}=t,c=e.$html("input",{...A,type:"checkbox",class:()=>l(n)?"toggle":"checkbox",checked:a}),r=e.$html("label",{class:"label cursor-pointer justify-start gap-3"},[c,s?e.$html("span",{class:"label-text"},s):null]);return o?e.$html("div",{class:"tooltip","data-tip":o},r):r};const Y=t=>{const{value:a,label:o,...n}=t,s=e.$(!1),A=["#000","#1A1A1A","#333","#4D4D4D","#666","#808080","#B3B3B3","#FFF","#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626","#ef4444","#f87171","#fca5a5","#431407","#7c2d12","#9a3412","#c2410c","#ea580c","#f97316","#fb923c","#ffedd5","#713f12","#a16207","#ca8a04","#eab308","#facc15","#fde047","#fef08a","#fff9c4","#064e3b","#065f46","#059669","#10b981","#34d399","#4ade80","#84cc16","#d9f99d","#082f49","#075985","#0284c7","#0ea5e9","#38bdf8","#7dd3fc","#22d3ee","#cffafe","#1e1b4b","#312e81","#4338ca","#4f46e5","#6366f1","#818cf8","#a5b4fc","#e0e7ff","#2e1065","#4c1d95","#6d28d9","#7c3aed","#8b5cf6","#a855f7","#d946ef","#fae8ff"],c=()=>l(a)||"#000000";return e.$html("div",{class:"relative w-fit"},[e.$html("button",{type:"button",class:"btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",onclick:t=>{t.stopPropagation(),s(!s())},...n},[e.$html("div",{class:"size-5 rounded-sm shadow-inner border border-black/10 shrink-0",style:()=>`background-color: ${c()}`}),o?e.$html("span",{class:"opacity-80"},o):null]),e.$if(s,()=>e.$html("div",{class:"absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",onclick:t=>t.stopPropagation()},[e.$html("div",{class:"grid grid-cols-8 gap-1"},A.map(t=>e.$html("button",{type:"button",style:`background-color: ${t}`,class:()=>"size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 \n "+(c().toLowerCase()===t.toLowerCase()?"ring-2 ring-offset-1 ring-primary z-10 scale-110":""),onclick:()=>{"function"==typeof a&&a(t),s(!1)}})))])),e.$if(s,()=>e.$html("div",{class:"fixed inset-0 z-[100]",onclick:()=>s(!1)}))])};const V=t=>{const{value:a,range:o,label:n,placeholder:s,hour:A=!1,...c}=t,r=e.$(!1),d=e.$(new Date),m=e.$(null),u=e.$(0),p=e.$(0),h=()=>!0===l(o),g=new Date,b=`${g.getFullYear()}-${String(g.getMonth()+1).padStart(2,"0")}-${String(g.getDate()).padStart(2,"0")}`,f=t=>`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`,x=t=>{const e=f(t),o=l(a);if(h())if(!o?.start||o.start&&o.end)"function"==typeof a&&a({start:e,end:null,...A&&{startHour:u()}});else{const t=o.start;if("function"==typeof a){const l=e{const t=l(a);if(!t)return"";if("string"==typeof t)return A&&t.includes("T")?t.replace("T"," "):t;if(t.start&&t.end){return`${A&&t.startHour?`${t.start} ${String(t.startHour).padStart(2,"0")}:00`:t.start} - ${A&&t.endHour?`${t.end} ${String(t.endHour).padStart(2,"0")}:00`:t.end}`}if(t.start){return`${A&&t.startHour?`${t.start} ${String(t.startHour).padStart(2,"0")}:00`:t.start}...`}return""}),S=t=>{const e=d();d(new Date(e.getFullYear(),e.getMonth()+t,1))},C=t=>{const e=d();d(new Date(e.getFullYear()+t,e.getMonth(),1))},U=({value:t,onChange:a})=>e.$html("div",{class:"flex-1"},[e.$html("div",{class:"flex gap-2 items-center"},[e.$html("input",{type:"range",min:0,max:23,value:t,class:"range range-xs flex-1",oninput:t=>{const e=parseInt(t.target.value);a(e)}}),e.$html("span",{class:"text-sm font-mono min-w-[48px] text-center"},()=>String(l(t)).padStart(2,"0")+":00")])]);return e.$html("div",{class:"relative w-full"},[D({label:n,placeholder:s||(h()?"Seleccionar rango...":"Seleccionar fecha..."),value:y,readonly:!0,icon:e.$html("img",{src:i,class:"opacity-40"}),onclick:t=>{t.stopPropagation(),r(!r())},...c}),e.$if(r,()=>e.$html("div",{class:"absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",onclick:t=>t.stopPropagation()},[e.$html("div",{class:"flex justify-between items-center mb-4 gap-1"},[e.$html("div",{class:"flex gap-0.5"},[e.$html("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>C(-1)},e.$html("img",{src:B,class:"opacity-40"})),e.$html("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>S(-1)},e.$html("img",{src:$,class:"opacity-40"}))]),e.$html("span",{class:"font-bold uppercase flex-1 text-center"},[()=>d().toLocaleString("es-ES",{month:"short",year:"numeric"})]),e.$html("div",{class:"flex gap-0.5"},[e.$html("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>S(1)},e.$html("img",{src:v,class:"opacity-40"})),e.$html("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>C(1)},e.$html("img",{src:w,class:"opacity-40"}))])]),e.$html("div",{class:"grid grid-cols-7 gap-1",onmouseleave:()=>m(null)},[...["L","M","X","J","V","S","D"].map(t=>e.$html("div",{class:"text-[10px] opacity-40 font-bold text-center"},t)),()=>{const t=d(),o=t.getFullYear(),n=t.getMonth(),s=new Date(o,n,1).getDay(),A=0===s?6:s-1,c=new Date(o,n+1,0).getDate(),r=[];for(let t=0;t{const t=l(a),e=m(),o="string"==typeof t?t.split("T")[0]===A:t?.start===A,n=t?.end===A;let s=!1;if(h()&&t?.start){const l=t.start;!t.end&&e?s=A>l&&A<=e||A=e:t.end&&(s=A>l&&A{h()&&m(A)},onclick:()=>x(s)},[t.toString()]))}return r}]),A?e.$html("div",{class:"mt-3 pt-2 border-t border-base-300"},[h()?e.$html("div",{class:"flex gap-4"},[U({value:u,onChange:t=>{u(t);const e=l(a);e?.start&&a({...e,startHour:t})}}),U({value:p,onChange:t=>{p(t);const e=l(a);e?.end&&a({...e,endHour:t})}})]):U({value:u,onChange:t=>{u(t);const e=l(a);e&&"string"==typeof e&&e.includes("-")&&a(e.split("T")[0]+"T"+String(t).padStart(2,"0")+":00:00")}})]):null])),e.$if(r,()=>e.$html("div",{class:"fixed inset-0 z-[90]",onclick:()=>r(!1)}))])};const H=t=>e.$html("div",{class:a("drawer",t.class)},[e.$html("input",{id:t.id,type:"checkbox",class:"drawer-toggle",checked:t.open}),e.$html("div",{class:"drawer-content"},t.content),e.$html("div",{class:"drawer-side"},[e.$html("label",{for:t.id,class:"drawer-overlay",onclick:()=>t.open?.(!1)}),e.$html("div",{class:"min-h-full bg-base-200 w-80"},t.side)])]);const O=(t,a)=>{const{label:o,icon:n,...s}=t;return e.$html("div",{...s,class:()=>`dropdown ${l(t.class)||t.class||""}`},[e.$html("div",{tabindex:0,role:"button",class:"btn m-1 flex items-center gap-2"},[n?"function"==typeof n?n():n:null,o?"function"==typeof o?o():o:null]),e.$html("ul",{tabindex:0,class:"dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"},["function"==typeof a?a():a])])};const F=t=>{const{icon:a,label:o,actions:n=[],position:s="bottom-6 right-6",...A}=t;return e.$html("div",{...A,class:()=>`fab fixed ${l(s)} flex flex-col-reverse items-end gap-3 z-[100] ${t.class||""}`},[e.$html("div",{tabindex:0,role:"button",class:"btn btn-lg btn-circle btn-primary shadow-2xl"},[a?"function"==typeof a?a():a:null,!a&&o?o:null]),...l(n).map(t=>e.$html("div",{class:"flex items-center gap-3 transition-all duration-300"},[t.label?e.$html("span",{class:"badge badge-ghost shadow-sm whitespace-nowrap"},t.label):null,e.$html("button",{type:"button",class:`btn btn-circle shadow-lg ${t.class||""}`,onclick:e=>{e.stopPropagation(),t.onclick?.(e)}},[t.icon?"function"==typeof t.icon?t.icon():t.icon:t.text||""])]))])};const Q=(t,o)=>e.$html("fieldset",{...t,class:a("fieldset bg-base-200 border border-base-300 p-4 rounded-lg",t.class)},[()=>{const a=l(t.legend);return a?e.$html("legend",{class:"fieldset-legend font-bold"},[a]):null},o]);const N=t=>{const{tooltip:l,max:a=2,accept:o="*",onSelect:n}=t,s=e.$([]),A=e.$(!1),c=e.$(null),i=1024*a*1024,d=t=>{const e=Array.from(t);c(null);e.find(t=>t.size>i)?c(`Mรกx ${a}MB`):(s([...s(),...e]),n?.(s()))};return e.$html("fieldset",{class:"fieldset w-full p-0"},[e.$html("div",{class:()=>"w-full "+(l?"tooltip tooltip-top before:z-50 after:z-50":""),"data-tip":l},[e.$html("label",{class:()=>`\n relative flex items-center justify-between w-full h-12 px-4\n border-2 border-dashed rounded-lg cursor-pointer\n transition-all duration-200\n ${A()?"border-primary bg-primary/10":"border-base-content/20 bg-base-100 hover:bg-base-200"}\n `,ondragover:t=>{t.preventDefault(),A(!0)},ondragleave:()=>A(!1),ondrop:t=>{t.preventDefault(),A(!1),d(t.dataTransfer.files)}},[e.$html("div",{class:"flex items-center gap-3 w-full"},[e.$html("img",{src:x,class:"w-5 h-5 opacity-50 shrink-0"}),e.$html("span",{class:"text-sm opacity-70 truncate grow text-left"},"Arrastra o selecciona archivos..."),e.$html("span",{class:"text-[10px] opacity-40 shrink-0"},`Mรกx ${a}MB`)]),e.$html("input",{type:"file",multiple:!0,accept:o,class:"hidden",onchange:t=>d(t.target.files)})])]),()=>c()?e.$html("span",{class:"text-[10px] text-error mt-1 px-1 font-medium"},c()):null,e.$if(()=>s().length>0,()=>e.$html("ul",{class:"mt-2 space-y-1"},[e.$for(s,(t,l)=>e.$html("li",{class:"flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300"},[e.$html("div",{class:"flex items-center gap-2 truncate"},[e.$html("span",{class:"opacity-50"},"๐Ÿ“„"),e.$html("span",{class:"truncate font-medium max-w-[200px]"},t.name),e.$html("span",{class:"text-[9px] opacity-40"},`(${(t.size/1024).toFixed(0)} KB)`)]),e.$html("button",{type:"button",class:"btn btn-ghost btn-xs btn-circle",onclick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{const e=s().filter((e,l)=>l!==t);s(e),n?.(e)})(l)}},[e.$html("img",{src:r,class:"w-3 h-3 opacity-70"})])]),t=>t.name+t.lastModified)]))])};const L=(t,l)=>e.$html("div",{class:a("indicator",t.class)},[l,e.$html("span",{class:a("indicator-item badge",t.badgeClass)},t.badge)]);const T=t=>{const{items:o,header:n,render:s,keyFn:A,class:c,...r}=t,i=n?e.$html("li",{class:"p-4 pb-2 text-xs opacity-60 tracking-wide"},[l(n)]):null,d=e.$for(o,(t,l)=>e.$html("li",{class:"list-row"},[s(t,l)]),A);return e.$html("ul",{...r,class:a("list bg-base-100 rounded-box shadow-md",c)},n?[i,d]:d)};const G=t=>e.$if(t.$show,()=>e.$html("div",{class:"fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"},[e.$html("span",{class:"loading loading-spinner loading-lg text-primary"})]));const M=t=>{const o=t=>e.$for(()=>t||[],t=>e.$html("li",{},[t.children?e.$html("details",{open:t.open},[e.$html("summary",{},[t.icon&&e.$html("span",{class:"mr-2"},t.icon),t.label]),e.$html("ul",{},o(t.children))]):e.$html("a",{class:()=>l(t.active)?"active":"",onclick:t.onclick},[t.icon&&e.$html("span",{class:"mr-2"},t.icon),t.label])]),(t,e)=>t.label||e);return e.$html("ul",{...t,class:a("menu bg-base-200 rounded-box",t.class)},o(t.items))};const J=(t,l)=>{const{title:a,buttons:o,open:n,...s}=t,A=()=>n(!1);return e.$if(n,()=>e.$html("dialog",{...s,class:"modal modal-open"},[e.$html("div",{class:"modal-box"},[a?e.$html("h3",{class:"text-lg font-bold mb-4"},a):null,"function"==typeof l?l():l,e.$html("div",{class:"modal-action flex gap-2"},[...(Array.isArray(o)?o:[o]).filter(Boolean),E({onclick:A},R("close")())])]),e.$html("form",{method:"dialog",class:"modal-backdrop",onclick:t=>(t.preventDefault(),A())},[e.$html("button",{},"close")])]))};const K=(t,l)=>e.$html("div",{...t,class:a("navbar bg-base-100 shadow-sm px-4",t.class)},l);const P=t=>{const{label:o,tooltip:n,value:s,inputValue:A,name:c,...r}=t,i=e.$html("input",{...r,type:"radio",name:c,class:a("radio",t.class),checked:()=>l(s)===A,onclick:()=>{"function"==typeof s&&s(A)}});return o||n?e.$html("label",{class:"label cursor-pointer justify-start gap-3"},[i,o?e.$html("span",{class:"label-text"},o):null]):i};const X=t=>{const{label:o,tooltip:n,value:s,...A}=t,c=e.$html("input",{...A,type:"range",class:a("range",t.class),value:s,disabled:()=>l(t.disabled)});if(!o&&!n)return c;const r=e.$html("div",{class:"flex flex-col gap-2"},[o?e.$html("span",{class:"label-text"},o):null,c]);return n?e.$html("div",{class:"tooltip","data-tip":n},r):r};const Z=t=>{const{value:a,count:o=5,mask:n="mask-star",readonly:s=!1,onchange:A,...c}=t,r=`rating-${Math.random().toString(36).slice(2,7)}`;return e.$html("div",{...c,class:()=>`rating ${l(s)?"pointer-events-none":""} ${t.class||""}`},Array.from({length:l(o)},(t,o)=>{const c=o+1;return e.$html("input",{type:"radio",name:r,class:`mask ${n}`,checked:()=>Math.round(l(a))===c,onchange:()=>{l(s)||("function"==typeof A?A(c):"function"==typeof a&&a(c))}})}))};const W=t=>{const{label:o,options:n,value:s,...A}=t,c=e.$html("select",{...A,class:a("select select-bordered w-full",t.class),value:s},e.$for(()=>l(n)||[],t=>e.$html("option",{value:t.value,$selected:()=>String(l(s))===String(t.value)},t.label),t=>t.value));return o?e.$html("label",{class:"fieldset-label flex flex-col gap-1"},[e.$html("span",{},o),c]):c};const q=(t,l)=>e.$html("div",{...t,class:a("stack",t.class)},l);const tt=t=>e.$html("div",{...t,class:a("stat",t.class)},[t.icon&&e.$html("div",{class:"stat-figure text-secondary"},t.icon),t.label&&e.$html("div",{class:"stat-title"},t.label),e.$html("div",{class:"stat-value"},()=>l(t.value)??t.value),t.desc&&e.$html("div",{class:"stat-desc"},t.desc)]);const et=t=>e.$html("label",{class:a("swap",t.class)},[e.$html("input",{type:"checkbox",checked:t.value}),e.$html("div",{class:"swap-on"},t.on),e.$html("div",{class:"swap-off"},t.off)]);const lt=t=>{const{items:o=[],columns:n=[],keyFn:s,zebra:A=!1,pinRows:c=!1,empty:r=R("nodata")(),...i}=t;return e.$html("div",{class:"overflow-x-auto w-full bg-base-100 rounded-box border border-base-300"},[e.$html("table",{...i,class:()=>a("table",`${l(A)?"table-zebra":""} ${l(c)?"table-pin-rows":""} ${t.class||""}`)},[e.$html("thead",{},[e.$html("tr",{},n.map(t=>e.$html("th",{class:t.class||""},t.label)))]),e.$html("tbody",{},[e.$for(o,(t,a)=>e.$html("tr",{class:"hover"},n.map(o=>e.$html("td",{class:o.class||""},[()=>{if(o.render)return o.render(t,a);const e=t[o.key];return l(e)}]))),s||((t,e)=>t.id||e)),e.$if(()=>0===l(o).length,()=>e.$html("tr",{},[e.$html("td",{colspan:n.length,class:"text-center p-10 opacity-50"},[l(r)])]))]),e.$if(()=>n.some(t=>t.footer),()=>e.$html("tfoot",{},[e.$html("tr",{},n.map(t=>e.$html("th",{},t.footer||"")))]))])])};const at=t=>{const{items:o,...n}=t,s="function"==typeof o?o:()=>o||[];return e.$html("div",{...n,class:"flex flex-col gap-4 w-full"},[e.$html("div",{role:"tablist",class:a("tabs tabs-box",t.class)},e.$for(s,t=>e.$html("a",{role:"tab",class:()=>a("tab",l(t.active)&&"tab-active",l(t.disabled),t.tip),"data-tip":t.tip,onclick:e=>!l(t.disabled)&&t.onclick?.(e)},t.label),t=>t.label)),()=>{const t=s().find(t=>l(t.active));if(!t)return null;const a=l(t.content);return e.$html("div",{class:"p-4"},["function"==typeof a?a():a])}])};const ot=t=>{const{items:a=[],vertical:o=!0,compact:n=!1,...s}=t,A={info:h,success:g,warning:f,error:b};return e.$html("ul",{...s,class:()=>`timeline ${l(o)?"timeline-vertical":"timeline-horizontal"} ${l(n)?"timeline-compact":""} ${t.class||""}`},[e.$for(a,(t,o)=>{const n=0===o,s=o===l(a).length-1,c=t.type||"success",r=t=>"function"==typeof t?t():t;return e.$html("li",{class:"flex-1"},[n?null:e.$html("hr",{class:t.completed?"bg-primary":""}),e.$html("div",{class:"timeline-start"},[r(t.title)]),e.$html("div",{class:"timeline-middle"},[e.$html("img",{src:A[c]||t.icon||A.success,class:"w-4 h-4 object-contain mx-1",alt:c})]),e.$html("div",{class:"timeline-end timeline-box shadow-sm"},[r(t.detail)]),s?null:e.$html("hr",{class:t.completed?"bg-primary":""})])},(t,e)=>t.id||e)])};const nt=(t,l="alert-success",a=3500)=>{let o=document.getElementById("sigpro-toast-container");o||(o=e.$html("div",{id:"sigpro-toast-container",class:"fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"}),document.body.appendChild(o));const n=e.$html("div",{style:"display: contents"});let s;o.appendChild(n);const A=()=>{clearTimeout(s);const t=n.firstElementChild;t&&!t.classList.contains("opacity-0")?(t.classList.add("translate-x-full","opacity-0"),setTimeout(()=>{c.destroy(),n.remove(),o.hasChildNodes()||o.remove()},300)):(c.destroy(),n.remove())},c=e.$mount(()=>{const a=e.$html("div",{class:`alert alert-soft ${l} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`},[e.$html("span",{},["function"==typeof t?t():t]),E({class:"btn-xs btn-circle btn-ghost",onclick:A},"โœ•")]);return requestAnimationFrame(()=>a.classList.remove("translate-x-10","opacity-0")),a},n);return a>0&&(s=setTimeout(A,a)),A};const st=(t,l)=>e.$html("div",{...t,class:a("tooltip",t.class),"data-tip":t.tip},l);const At={...s,...C,...Object.freeze({__proto__:null,Autocomplete:_}),...Object.freeze({__proto__:null,Badge:z}),...Object.freeze({__proto__:null,Button:E}),...Object.freeze({__proto__:null,Checkbox:I}),...Object.freeze({__proto__:null,Colorpicker:Y}),...Object.freeze({__proto__:null,Datepicker:V}),...Object.freeze({__proto__:null,Drawer:H}),...Object.freeze({__proto__:null,Dropdown:O}),...Object.freeze({__proto__:null,Fab:F}),...Object.freeze({__proto__:null,Fieldset:Q}),...Object.freeze({__proto__:null,Fileinput:N}),...Object.freeze({__proto__:null,Indicator:L}),...j,...Object.freeze({__proto__:null,List:T}),...Object.freeze({__proto__:null,Loading:G}),...Object.freeze({__proto__:null,Menu:M}),...Object.freeze({__proto__:null,Modal:J}),...Object.freeze({__proto__:null,Navbar:K}),...Object.freeze({__proto__:null,Radio:P}),...Object.freeze({__proto__:null,Range:X}),...Object.freeze({__proto__:null,Rating:Z}),...Object.freeze({__proto__:null,Select:W}),...Object.freeze({__proto__:null,Stack:q}),...Object.freeze({__proto__:null,Stat:tt}),...Object.freeze({__proto__:null,Swap:et}),...Object.freeze({__proto__:null,Table:lt}),...Object.freeze({__proto__:null,Tabs:at}),...Object.freeze({__proto__:null,Timeline:ot}),...Object.freeze({__proto__:null,Toast:nt}),...Object.freeze({__proto__:null,Tooltip:st})};var ct={...At,install:(t=window)=>{Object.entries(At).forEach(([e,l])=>{t[e]=l}),console.log("๐Ÿš€ SigproUI")}},rt=Object.freeze({__proto__:null,Accordion:n,Alert:S,Autocomplete:_,Badge:z,Button:E,Checkbox:I,Colorpicker:Y,Datepicker:V,Drawer:H,Dropdown:O,Fab:F,Fieldset:Q,Fileinput:N,Indicator:L,Input:D,List:T,Loading:G,Menu:M,Modal:J,Navbar:K,Radio:P,Range:X,Rating:Z,Select:W,Stack:q,Stat:tt,Swap:et,Table:lt,Tabs:at,Timeline:ot,Toast:nt,Tooltip:st,default:ct});const it={...rt,Icons:y,Utils:o,tt:R,install:(t=("undefined"!=typeof window?window:{}))=>{Object.entries(rt).forEach(([e,l])=>{t[e]=l}),t.Icons=y,t.Utils=o,t.tt=R,console.log("๐ŸŒŸ SigproUI")}};return"undefined"!=typeof window&&it.install(window),t.Accordion=n,t.Alert=S,t.Autocomplete=_,t.Badge=z,t.Button=E,t.Checkbox=I,t.Colorpicker=Y,t.Datepicker=V,t.Drawer=H,t.Dropdown=O,t.Fab=F,t.Fieldset=Q,t.Fileinput=N,t.Indicator=L,t.Input=D,t.List=T,t.Loading=G,t.Menu=M,t.Modal=J,t.Navbar=K,t.Radio=P,t.Range=X,t.Rating=Z,t.Select=W,t.Stack=q,t.Stat=tt,t.Swap=et,t.Table=lt,t.Tabs=at,t.Timeline=ot,t.Toast=nt,t.Tooltip=st,t.default=it,t.icon123=u,t.iconAbc=m,t.iconCalendar=i,t.iconClose=r,t.iconError=b,t.iconHide=c,t.iconInfo=h,t.iconLLeft=B,t.iconLeft=$,t.iconLock=d,t.iconMail=p,t.iconRRight=w,t.iconRight=v,t.iconShow=A,t.iconSuccess=g,t.iconUpload=x,t.iconWarning=f,t.joinClass=a,t.tt=R,t.val=l,Object.defineProperty(t,"__esModule",{value:!0}),t}({},SigPro); diff --git a/docs/components/badge.md b/docs/components/badge.md new file mode 100644 index 0000000..3de2637 --- /dev/null +++ b/docs/components/badge.md @@ -0,0 +1,537 @@ +# Badge + +Badge component for displaying counts, labels, and status indicators with DaisyUI styling. + +## Tag + +`Badge` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) | +| `children` | `string \| VNode` | `-` | Badge content | + +## Live Examples + +### Basic Badge + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({}, 'Default'), + Badge({ class: 'badge-primary' }, 'Primary'), + Badge({ class: 'badge-secondary' }, 'Secondary'), + Badge({ class: 'badge-accent' }, 'Accent'), + Badge({ class: 'badge-info' }, 'Info'), + Badge({ class: 'badge-success' }, 'Success'), + Badge({ class: 'badge-warning' }, 'Warning'), + Badge({ class: 'badge-error' }, 'Error') + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Badge Sizes + +
+
+

Live Demo

+
+
+
+ +```javascript +const SizesDemo = () => { + return Div({ class: 'flex flex-wrap gap-2 items-center' }, [ + Badge({ class: 'badge-xs' }, 'Extra Small'), + Badge({ class: 'badge-sm' }, 'Small'), + Badge({}, 'Default'), + Badge({ class: 'badge-md' }, 'Medium'), + Badge({ class: 'badge-lg' }, 'Large') + ]); +}; +$mount(SizesDemo, '#demo-sizes'); +``` + +### Outline Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const OutlineDemo = () => { + return Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-outline' }, 'Default'), + Badge({ class: 'badge-outline badge-primary' }, 'Primary'), + Badge({ class: 'badge-outline badge-secondary' }, 'Secondary'), + Badge({ class: 'badge-outline badge-accent' }, 'Accent'), + Badge({ class: 'badge-outline badge-info' }, 'Info'), + Badge({ class: 'badge-outline badge-success' }, 'Success'), + Badge({ class: 'badge-outline badge-warning' }, 'Warning'), + Badge({ class: 'badge-outline badge-error' }, 'Error') + ]); +}; +$mount(OutlineDemo, '#demo-outline'); +``` + +### Ghost Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const GhostDemo = () => { + return Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-ghost' }, 'Default'), + Badge({ class: 'badge-ghost badge-primary' }, 'Primary'), + Badge({ class: 'badge-ghost badge-secondary' }, 'Secondary'), + Badge({ class: 'badge-ghost badge-accent' }, 'Accent'), + Badge({ class: 'badge-ghost badge-info' }, 'Info'), + Badge({ class: 'badge-ghost badge-success' }, 'Success'), + Badge({ class: 'badge-ghost badge-warning' }, 'Warning'), + Badge({ class: 'badge-ghost badge-error' }, 'Error') + ]); +}; +$mount(GhostDemo, '#demo-ghost'); +``` + +### With Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + return Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'gap-1' }, [ + Icons.iconSuccess, + Span({}, 'Success') + ]), + Badge({ class: 'gap-1 badge-warning' }, [ + Icons.iconWarning, + Span({}, 'Warning') + ]), + Badge({ class: 'gap-1 badge-error' }, [ + Icons.iconError, + Span({}, 'Error') + ]), + Badge({ class: 'gap-1 badge-info' }, [ + Icons.iconInfo, + Span({}, 'Info') + ]), + Badge({ class: 'gap-1' }, [ + Span({}, 'โ˜…'), + Span({}, '4.5') + ]) + ]); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Status Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const StatusDemo = () => { + const statuses = [ + { label: 'Active', class: 'badge-success' }, + { label: 'Pending', class: 'badge-warning' }, + { label: 'Completed', class: 'badge-info' }, + { label: 'Failed', class: 'badge-error' }, + { label: 'Archived', class: 'badge-ghost' } + ]; + + return Div({ class: 'flex flex-col gap-2' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Order Status'), + Div({ class: 'flex flex-wrap gap-2' }, statuses.map(status => + Badge({ class: status.class }, status.label) + )) + ]); +}; +$mount(StatusDemo, '#demo-status'); +``` + +### Count Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const CountDemo = () => { + const notifications = $(3); + const messages = $(5); + const updates = $(0); + + return Div({ class: 'flex flex-wrap gap-6' }, [ + Div({ class: 'flex items-center gap-2' }, [ + Span({}, 'Notifications'), + Badge({ class: 'badge-primary' }, () => notifications()) + ]), + Div({ class: 'flex items-center gap-2' }, [ + Span({}, 'Messages'), + Badge({ class: 'badge-secondary' }, () => messages()) + ]), + Div({ class: 'flex items-center gap-2' }, [ + Span({}, 'Updates'), + Badge({ class: 'badge-ghost' }, () => updates() || '0') + ]) + ]); +}; +$mount(CountDemo, '#demo-count'); +``` + +### Interactive Badge + +
+
+

Live Demo

+
+
+
+ +```javascript +const InteractiveDemo = () => { + const count = $(0); + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Div({ class: 'flex items-center gap-4' }, [ + Button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'), + Badge({ class: 'badge-primary text-lg min-w-[4rem] justify-center' }, () => count()), + Button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+') + ]), + Button({ + class: 'btn btn-ghost btn-sm', + onclick: () => count(0) + }, 'Reset') + ]); +}; +$mount(InteractiveDemo, '#demo-interactive'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-xs' }, 'XS'), + Badge({ class: 'badge-sm' }, 'SM'), + Badge({}, 'MD'), + Badge({ class: 'badge-lg' }, 'LG') + ]), + Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-primary badge-sm' }, 'Primary'), + Badge({ class: 'badge-secondary badge-sm' }, 'Secondary'), + Badge({ class: 'badge-accent badge-sm' }, 'Accent') + ]), + Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-outline badge-primary' }, 'Outline'), + Badge({ class: 'badge-ghost badge-primary' }, 'Ghost') + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### Inline with Text + +
+
+

Live Demo

+
+
+
+ +```javascript +const InlineDemo = () => { + return Div({ class: 'space-y-2' }, [ + Div({ class: 'text-sm' }, [ + 'Your order is ', + Badge({ class: 'badge-success badge-sm' }, 'Confirmed'), + ' and will be shipped soon.' + ]), + Div({ class: 'text-sm' }, [ + 'This feature is ', + Badge({ class: 'badge-warning badge-sm' }, 'Beta'), + ' and may change.' + ]), + Div({ class: 'text-sm' }, [ + 'Version ', + Badge({ class: 'badge-info badge-xs' }, 'v2.1.0'), + ' released on March 2026' + ]) + ]); +}; +$mount(InlineDemo, '#demo-inline'); +``` + + diff --git a/docs/components/indicator.md b/docs/components/indicator.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/components/list.md b/docs/components/list.md new file mode 100644 index 0000000..858f46b --- /dev/null +++ b/docs/components/list.md @@ -0,0 +1,601 @@ + +# List + +List component with custom item rendering, headers, and reactive data binding. + +## Tag + +`List` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- | +| `items` | `Array \| Signal` | `[]` | Data array to display | +| `header` | `string \| VNode \| Signal` | `-` | Optional header content | +| `render` | `function(item, index)` | `-` | Custom render function for each item | +| `keyFn` | `function(item, index)` | `(item, idx) => idx` | Unique key function for items | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic List + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const items = ['Apple', 'Banana', 'Orange', 'Grape', 'Mango']; + + return List({ + items: items, + render: (item) => Div({ class: 'p-3 hover:bg-base-200 transition-colors' }, [ + Span({ class: 'font-medium' }, item) + ]) + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Header + +
+
+

Live Demo

+
+
+
+ +```javascript +const HeaderDemo = () => { + const users = [ + { name: 'John Doe', email: 'john@example.com', status: 'active' }, + { name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' }, + { name: 'Bob Johnson', email: 'bob@example.com', status: 'active' } + ]; + + return List({ + items: users, + header: Div({ class: 'p-3 bg-primary/10 font-bold border-b border-base-300' }, 'Active Users'), + render: (user) => Div({ class: 'p-3 border-b border-base-300 hover:bg-base-200' }, [ + Div({ class: 'font-medium' }, user.name), + Div({ class: 'text-sm opacity-70' }, user.email), + Span({ class: `badge badge-sm ${user.status === 'active' ? 'badge-success' : 'badge-ghost'} mt-1` }, user.status) + ]) + }); +}; +$mount(HeaderDemo, '#demo-header'); +``` + +### With Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + const settings = [ + { icon: '๐Ÿ”Š', label: 'Sound', description: 'Adjust volume and notifications' }, + { icon: '๐ŸŒ™', label: 'Display', description: 'Brightness and dark mode' }, + { icon: '๐Ÿ”’', label: 'Privacy', description: 'Security settings' }, + { icon: '๐ŸŒ', label: 'Network', description: 'WiFi and connections' } + ]; + + return List({ + items: settings, + render: (item) => Div({ class: 'flex gap-3 p-3 hover:bg-base-200 transition-colors cursor-pointer' }, [ + Div({ class: 'text-2xl' }, item.icon), + Div({ class: 'flex-1' }, [ + Div({ class: 'font-medium' }, item.label), + Div({ class: 'text-sm opacity-60' }, item.description) + ]), + Span({ class: 'opacity-40' }, 'โ†’') + ]) + }); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### With Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const BadgesDemo = () => { + const notifications = [ + { id: 1, message: 'New comment on your post', time: '5 min ago', unread: true }, + { id: 2, message: 'Your order has been shipped', time: '1 hour ago', unread: true }, + { id: 3, message: 'Welcome to the platform!', time: '2 days ago', unread: false }, + { id: 4, message: 'Weekly digest available', time: '3 days ago', unread: false } + ]; + + return List({ + items: notifications, + render: (item) => Div({ class: `flex justify-between items-center p-3 border-b border-base-300 hover:bg-base-200 ${item.unread ? 'bg-primary/5' : ''}` }, [ + Div({ class: 'flex-1' }, [ + Div({ class: 'font-medium' }, item.message), + Div({ class: 'text-xs opacity-50' }, item.time) + ]), + item.unread ? Span({ class: 'badge badge-primary badge-sm' }, 'New') : null + ]) + }); +}; +$mount(BadgesDemo, '#demo-badges'); +``` + +### Interactive List + +
+
+

Live Demo

+
+
+
+ +```javascript +const InteractiveDemo = () => { + const selected = $(null); + const items = [ + { id: 1, name: 'Project Alpha', status: 'In Progress' }, + { id: 2, name: 'Project Beta', status: 'Planning' }, + { id: 3, name: 'Project Gamma', status: 'Completed' }, + { id: 4, name: 'Project Delta', status: 'Review' } + ]; + + const statusColors = { + 'In Progress': 'badge-warning', + 'Planning': 'badge-info', + 'Completed': 'badge-success', + 'Review': 'badge-accent' + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + List({ + items: items, + render: (item) => Div({ + class: `p-3 cursor-pointer transition-all hover:bg-base-200 ${selected() === item.id ? 'bg-primary/10 border-l-4 border-primary' : 'border-l-4 border-transparent'}`, + onclick: () => selected(item.id) + }, [ + Div({ class: 'flex justify-between items-center' }, [ + Div({ class: 'font-medium' }, item.name), + Span({ class: `badge ${statusColors[item.status]}` }, item.status) + ]) + ]) + }), + () => selected() + ? Div({ class: 'alert alert-info' }, `Selected: ${items.find(i => i.id === selected()).name}`) + : Div({ class: 'alert alert-soft' }, 'Select a project to see details') + ]); +}; +$mount(InteractiveDemo, '#demo-interactive'); +``` + +### Reactive List + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const todos = $([ + { id: 1, text: 'Complete documentation', done: false }, + { id: 2, text: 'Review pull requests', done: false }, + { id: 3, text: 'Deploy to production', done: false } + ]); + + const newTodo = $(''); + + const addTodo = () => { + if (newTodo().trim()) { + const newId = Math.max(...todos().map(t => t.id), 0) + 1; + todos([...todos(), { id: newId, text: newTodo(), done: false }]); + newTodo(''); + } + }; + + const toggleTodo = (id) => { + todos(todos().map(t => + t.id === id ? { ...t, done: !t.done } : t + )); + }; + + const deleteTodo = (id) => { + todos(todos().filter(t => t.id !== id)); + }; + + const pendingCount = () => todos().filter(t => !t.done).length; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex gap-2' }, [ + Input({ + placeholder: 'Add new task...', + value: newTodo, + class: 'flex-1', + oninput: (e) => newTodo(e.target.value), + onkeypress: (e) => e.key === 'Enter' && addTodo() + }), + Button({ class: 'btn btn-primary', onclick: addTodo }, 'Add') + ]), + List({ + items: todos, + render: (todo) => Div({ class: `flex items-center gap-3 p-2 border-b border-base-300 hover:bg-base-200 ${todo.done ? 'opacity-60' : ''}` }, [ + Checkbox({ + value: todo.done, + onclick: () => toggleTodo(todo.id) + }), + Span({ + class: `flex-1 ${todo.done ? 'line-through' : ''}`, + onclick: () => toggleTodo(todo.id) + }, todo.text), + Button({ + class: 'btn btn-ghost btn-xs btn-circle', + onclick: () => deleteTodo(todo.id) + }, 'โœ•') + ]) + }), + Div({ class: 'text-sm opacity-70 mt-2' }, () => `${pendingCount()} tasks remaining`) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Avatar List + +
+
+

Live Demo

+
+
+
+ +```javascript +const AvatarDemo = () => { + const contacts = [ + { name: 'Alice Johnson', role: 'Developer', avatar: 'A', online: true }, + { name: 'Bob Smith', role: 'Designer', avatar: 'B', online: false }, + { name: 'Charlie Brown', role: 'Manager', avatar: 'C', online: true }, + { name: 'Diana Prince', role: 'QA Engineer', avatar: 'D', online: false } + ]; + + return List({ + items: contacts, + render: (contact) => Div({ class: 'flex gap-3 p-3 hover:bg-base-200 transition-colors' }, [ + Div({ class: `avatar ${contact.online ? 'online' : 'offline'}`, style: 'width: 48px' }, [ + Div({ class: 'rounded-full bg-primary text-primary-content flex items-center justify-center w-12 h-12 font-bold' }, contact.avatar) + ]), + Div({ class: 'flex-1' }, [ + Div({ class: 'font-medium' }, contact.name), + Div({ class: 'text-sm opacity-60' }, contact.role) + ]), + Div({ class: `badge badge-sm ${contact.online ? 'badge-success' : 'badge-ghost'}` }, contact.online ? 'Online' : 'Offline') + ]) + }); +}; +$mount(AvatarDemo, '#demo-avatar'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const items = ['Item 1', 'Item 2', 'Item 3']; + + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'text-sm font-bold' }, 'Default List'), + List({ + items: items, + render: (item) => Div({ class: 'p-2' }, item) + }), + + Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'), + List({ + items: items, + render: (item) => Div({ class: 'p-2' }, item), + class: 'shadow-lg' + }), + + Div({ class: 'text-sm font-bold mt-2' }, 'Rounded Corners'), + List({ + items: items, + render: (item) => Div({ class: 'p-2' }, item), + class: 'rounded-box overflow-hidden' + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components/stack.md b/docs/components/stack.md new file mode 100644 index 0000000..fd896c8 --- /dev/null +++ b/docs/components/stack.md @@ -0,0 +1,519 @@ +# Stack + +Stack component for layering multiple elements on top of each other, creating depth and visual hierarchy. + +## Tag + +`Stack` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `Array \| VNode` | `-` | Elements to stack (first is bottom, last is top) | + +## Live Examples + +### Basic Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Stack({ class: 'w-40' }, [ + Div({ class: 'bg-primary text-primary-content rounded-lg p-4 shadow-lg' }, 'Layer 1'), + Div({ class: 'bg-secondary text-secondary-content rounded-lg p-4 shadow-lg' }, 'Layer 2'), + Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3') + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Card Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const CardsDemo = () => { + return Stack({ class: 'w-64' }, [ + Div({ class: 'card bg-base-100 shadow-xl border border-base-300' }, [ + Div({ class: 'card-body p-4' }, [ + Span({ class: 'text-sm opacity-70' }, 'Back Card'), + Span({ class: 'font-bold' }, 'Additional info') + ]) + ]), + Div({ class: 'card bg-primary text-primary-content shadow-xl' }, [ + Div({ class: 'card-body p-4' }, [ + Span({ class: 'text-sm' }, 'Front Card'), + Span({ class: 'font-bold text-lg' }, 'Main Content') + ]) + ]) + ]); +}; +$mount(CardsDemo, '#demo-cards'); +``` + +### Avatar Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const AvatarsDemo = () => { + return Stack({ class: 'w-32' }, [ + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-neutral text-neutral-content rounded-full w-16' }, [ + Span({}, 'JD') + ]) + ]), + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-primary text-primary-content rounded-full w-16' }, [ + Span({}, 'JS') + ]) + ]), + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-secondary text-secondary-content rounded-full w-16' }, [ + Span({}, 'BC') + ]) + ]) + ]); +}; +$mount(AvatarsDemo, '#demo-avatars'); +``` + +### Image Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const ImagesDemo = () => { + return Stack({ class: 'w-48' }, [ + Div({ class: 'w-full h-32 bg-gradient-to-r from-primary to-secondary rounded-lg shadow-lg' }, [ + Div({ class: 'p-2 text-white text-sm' }, 'Background Image') + ]), + Div({ class: 'w-full h-32 bg-gradient-to-r from-secondary to-accent rounded-lg shadow-lg translate-x-2 translate-y-2' }, [ + Div({ class: 'p-2 text-white text-sm' }, 'Middle Layer') + ]), + Div({ class: 'w-full h-32 bg-gradient-to-r from-accent to-primary rounded-lg shadow-lg translate-x-4 translate-y-4 flex items-center justify-center' }, [ + Span({ class: 'text-white font-bold' }, 'Top Layer') + ]) + ]); +}; +$mount(ImagesDemo, '#demo-images'); +``` + +### Photo Gallery Stack + +
+
+

Live Demo

+ +
+
+ +```javascript +const GalleryDemo = () => { + const photos = [ + { color: 'bg-primary', label: 'Photo 1' }, + { color: 'bg-secondary', label: 'Photo 2' }, + { color: 'bg-accent', label: 'Photo 3' }, + { color: 'bg-info', label: 'Photo 4' } + ]; + + return Stack({ class: 'w-48 cursor-pointer hover:scale-105 transition-transform' }, [ + ...photos.map((photo, idx) => + Div({ + class: `${photo.color} rounded-lg shadow-lg transition-all`, + style: `transform: translate(${idx * 4}px, ${idx * 4}px); width: 100%; height: 100%;` + }, [ + Div({ class: 'p-4 text-white font-bold' }, photo.label) + ]) + ) + ]); +}; +$mount(GalleryDemo, '#demo-gallery'); +``` + +### Interactive Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const InteractiveDemo = () => { + const active = $(0); + const colors = ['primary', 'secondary', 'accent', 'info', 'success']; + const labels = ['Home', 'Profile', 'Settings', 'Messages', 'Notifications']; + + return Div({ class: 'flex flex-col gap-6 items-center' }, [ + Stack({ class: 'w-56' }, colors.map((color, idx) => + Div({ + class: `bg-${color} text-${color}-content rounded-lg p-4 shadow-lg transition-all cursor-pointer ${idx === active() ? 'scale-105 z-10' : ''}`, + style: `transform: translate(${idx * 8}px, ${idx * 8}px);`, + onclick: () => active(idx) + }, [ + Div({ class: 'font-bold' }, labels[idx]), + Div({ class: 'text-sm opacity-80' }, `Layer ${idx + 1}`) + ]) + )), + Div({ class: 'mt-4 text-center' }, [ + Span({ class: 'font-bold' }, () => `Active: ${labels[active()]}`), + Div({ class: 'flex gap-2 mt-2' }, colors.map((_, idx) => + Button({ + class: `btn btn-xs ${idx === active() ? 'btn-primary' : 'btn-ghost'}`, + onclick: () => active(idx) + }, `${idx + 1}`) + )) + ]) + ]); +}; +$mount(InteractiveDemo, '#demo-interactive'); +``` + +### Notification Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const NotificationsDemo = () => { + const notifications = $([ + { id: 1, message: 'New message from John', type: 'info' }, + { id: 2, message: 'Your order has shipped', type: 'success' }, + { id: 3, message: 'Meeting in 10 minutes', type: 'warning' } + ]); + + const removeNotification = (id) => { + notifications(notifications().filter(n => n.id !== id)); + }; + + const typeClasses = { + info: 'bg-info text-info-content', + success: 'bg-success text-success-content', + warning: 'bg-warning text-warning-content', + error: 'bg-error text-error-content' + }; + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Stack({ class: 'w-80' }, notifications().map((notif, idx) => + Div({ + class: `${typeClasses[notif.type]} rounded-lg p-3 shadow-lg transition-all cursor-pointer`, + style: `transform: translate(${idx * 4}px, ${idx * 4}px);`, + onclick: () => removeNotification(notif.id) + }, [ + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'text-sm' }, notif.message), + Span({ class: 'text-xs opacity-70 cursor-pointer hover:opacity-100' }, 'โœ•') + ]) + ]) + )), + notifications().length === 0 + ? Div({ class: 'alert alert-soft' }, 'No notifications') + : Button({ + class: 'btn btn-sm btn-ghost mt-2', + onclick: () => notifications([]) + }, 'Clear All') + ]); +}; +$mount(NotificationsDemo, '#demo-notifications'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Small Stack'), + Stack({ class: 'w-24' }, [ + Div({ class: 'bg-primary rounded p-2 text-xs' }, '1'), + Div({ class: 'bg-secondary rounded p-2 text-xs' }, '2'), + Div({ class: 'bg-accent rounded p-2 text-xs' }, '3') + ]) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Medium Stack'), + Stack({ class: 'w-32' }, [ + Div({ class: 'bg-primary rounded p-3' }, 'A'), + Div({ class: 'bg-secondary rounded p-3' }, 'B'), + Div({ class: 'bg-accent rounded p-3' }, 'C') + ]) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Large Stack'), + Stack({ class: 'w-40' }, [ + Div({ class: 'bg-primary rounded p-4' }, 'X'), + Div({ class: 'bg-secondary rounded p-4' }, 'Y'), + Div({ class: 'bg-accent rounded p-4' }, 'Z') + ]) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components/stat.md b/docs/components/stat.md new file mode 100644 index 0000000..c683eda --- /dev/null +++ b/docs/components/stat.md @@ -0,0 +1,644 @@ +# Stat + +Statistic card component for displaying metrics, counts, and key performance indicators with optional icons and descriptions. + +## Tag + +`Stat` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `label` | `string \| VNode \| Signal` | `-` | Statistic label/title | +| `value` | `string \| number \| Signal` | `-` | Main statistic value | +| `desc` | `string \| VNode \| Signal` | `-` | Description or trend text | +| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed in the figure area | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic Stat + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [ + Stat({ + label: 'Total Users', + value: '2,345', + desc: 'โ†—๏ธŽ 120 new users this month' + }), + Stat({ + label: 'Revenue', + value: '$45,678', + desc: 'โ†˜๏ธŽ 5% decrease from last month' + }), + Stat({ + label: 'Conversion Rate', + value: '3.45%', + desc: 'โ†—๏ธŽ 0.5% increase' + }) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [ + Stat({ + label: 'Active Users', + value: '1,234', + desc: 'Currently online', + icon: Icons.iconShow + }), + Stat({ + label: 'New Orders', + value: '89', + desc: 'Today', + icon: Icons.iconSuccess + }), + Stat({ + label: 'Pending Tasks', + value: '23', + desc: 'Need attention', + icon: Icons.iconWarning + }) + ]); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Reactive Values + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const count = $(0); + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [ + Stat({ + label: 'Counter', + value: () => count(), + desc: 'Click the button to increase', + icon: Icons.iconInfo + }), + Stat({ + label: 'Squared', + value: () => Math.pow(count(), 2), + desc: 'Square of counter', + icon: Icons.iconSuccess + }) + ]), + Div({ class: 'flex gap-2 justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: () => count(count() + 1) + }, 'Increment'), + Button({ + class: 'btn btn-ghost', + onclick: () => count(0) + }, 'Reset') + ]) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### With Trend Indicators + +
+
+

Live Demo

+ +
+
+ +```javascript +const TrendsDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [ + Stat({ + label: 'Weekly Sales', + value: '$12,345', + desc: Div({ class: 'text-success' }, 'โ†—๏ธŽ 15% increase'), + icon: Icons.iconSuccess + }), + Stat({ + label: 'Bounce Rate', + value: '42%', + desc: Div({ class: 'text-error' }, 'โ†˜๏ธŽ 3% from last week'), + icon: Icons.iconError + }), + Stat({ + label: 'Avg. Session', + value: '4m 32s', + desc: Div({ class: 'text-warning' }, 'โ†—๏ธŽ 12 seconds'), + icon: Icons.iconWarning + }) + ]); +}; +$mount(TrendsDemo, '#demo-trends'); +``` + +### Multiple Stats in Row + +
+
+

Live Demo

+
+
+
+ +```javascript +const MultipleDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [ + Stat({ + label: 'Posts', + value: '1,234', + desc: 'Total content', + icon: Span({ class: 'text-2xl' }, '๐Ÿ“') + }), + Stat({ + label: 'Comments', + value: '8,901', + desc: 'Engagement', + icon: Span({ class: 'text-2xl' }, '๐Ÿ’ฌ') + }), + Stat({ + label: 'Likes', + value: '12,345', + desc: 'Reactions', + icon: Span({ class: 'text-2xl' }, 'โค๏ธ') + }), + Stat({ + label: 'Shares', + value: '456', + desc: 'Viral reach', + icon: Span({ class: 'text-2xl' }, '๐Ÿ”„') + }) + ]); +}; +$mount(MultipleDemo, '#demo-multiple'); +``` + +### Dashboard Example + +
+
+

Live Demo

+
+
+
+ +```javascript +const DashboardDemo = () => { + const stats = $({ + users: 1245, + revenue: 89342, + orders: 342, + satisfaction: 94 + }); + + const updateStats = () => { + stats({ + users: stats().users + Math.floor(Math.random() * 50), + revenue: stats().revenue + Math.floor(Math.random() * 1000), + orders: stats().orders + Math.floor(Math.random() * 20), + satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2) + }); + }; + + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [ + Stat({ + label: 'Total Users', + value: () => stats().users.toLocaleString(), + desc: 'Registered users', + icon: Icons.iconShow + }), + Stat({ + label: 'Revenue', + value: () => `$${stats().revenue.toLocaleString()}`, + desc: 'This month', + icon: Icons.iconSuccess + }), + Stat({ + label: 'Orders', + value: () => stats().orders.toLocaleString(), + desc: 'Completed', + icon: Icons.iconInfo + }), + Stat({ + label: 'Satisfaction', + value: () => `${stats().satisfaction}%`, + desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good', + icon: Icons.iconWarning + }) + ]), + Div({ class: 'flex justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: updateStats + }, 'Refresh Data') + ]) + ]); +}; +$mount(DashboardDemo, '#demo-dashboard'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [ + Stat({ + label: 'Primary Stat', + value: '1,234', + desc: 'With description', + icon: Icons.iconInfo, + class: 'bg-primary/10 text-primary' + }), + Stat({ + label: 'Success Stat', + value: '89%', + desc: 'Success rate', + icon: Icons.iconSuccess, + class: 'bg-success/10 text-success' + }), + Stat({ + label: 'Warning Stat', + value: '23', + desc: 'Pending items', + icon: Icons.iconWarning, + class: 'bg-warning/10 text-warning' + }), + Stat({ + label: 'Error Stat', + value: '5', + desc: 'Failed attempts', + icon: Icons.iconError, + class: 'bg-error/10 text-error' + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### Compact Stats + +
+
+

Live Demo

+
+
+
+ +```javascript +const CompactDemo = () => { + return Div({ class: 'flex flex-wrap gap-4' }, [ + Stat({ + label: 'Views', + value: '12.3K', + class: 'stat-compact' + }), + Stat({ + label: 'Likes', + value: '2,456', + class: 'stat-compact' + }), + Stat({ + label: 'Comments', + value: '345', + class: 'stat-compact' + }), + Stat({ + label: 'Shares', + value: '89', + class: 'stat-compact' + }) + ]); +}; +$mount(CompactDemo, '#demo-compact'); +``` + + diff --git a/docs/components/table.md b/docs/components/table.md new file mode 100644 index 0000000..8e27b4b --- /dev/null +++ b/docs/components/table.md @@ -0,0 +1,716 @@ +# Table + +Data table component with sorting, pagination, zebra stripes, pin rows, and custom cell rendering. + +## Tag + +`Table` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- | +| `items` | `Array \| Signal` | `[]` | Data array to display | +| `columns` | `Array<{label: string, key?: string, render?: function, class?: string, footer?: string}>` | `[]` | Column definitions | +| `keyFn` | `function` | `(item, idx) => idx` | Unique key function for rows | +| `zebra` | `boolean \| Signal` | `false` | Enable zebra striping | +| `pinRows` | `boolean \| Signal` | `false` | Pin header rows on scroll | +| `empty` | `string \| VNode` | `'No data'` | Content to show when no data | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic Table + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const users = [ + { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' }, + { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' }, + { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' } + ]; + + return Table({ + items: users, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Email', key: 'email' }, + { label: 'Role', key: 'role' } + ] + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Zebra Stripes + +
+
+

Live Demo

+
+
+
+ +```javascript +const ZebraDemo = () => { + const products = [ + { id: 1, name: 'Laptop', price: '$999', stock: 15 }, + { id: 2, name: 'Mouse', price: '$29', stock: 42 }, + { id: 3, name: 'Keyboard', price: '$79', stock: 28 }, + { id: 4, name: 'Monitor', price: '$299', stock: 12 } + ]; + + return Table({ + items: products, + columns: [ + { label: 'Product', key: 'name' }, + { label: 'Price', key: 'price' }, + { label: 'Stock', key: 'stock' } + ], + zebra: true + }); +}; +$mount(ZebraDemo, '#demo-zebra'); +``` + +### With Custom Cell Rendering + +
+
+

Live Demo

+
+
+
+ +```javascript +const CustomDemo = () => { + const orders = [ + { id: 101, customer: 'Alice', amount: 250, status: 'completed' }, + { id: 102, customer: 'Bob', amount: 89, status: 'pending' }, + { id: 103, customer: 'Charlie', amount: 450, status: 'shipped' } + ]; + + return Table({ + items: orders, + columns: [ + { label: 'Order ID', key: 'id' }, + { label: 'Customer', key: 'customer' }, + { + label: 'Amount', + key: 'amount', + render: (item) => `$${item.amount}` + }, + { + label: 'Status', + key: 'status', + render: (item) => { + const statusClass = { + completed: 'badge badge-success', + pending: 'badge badge-warning', + shipped: 'badge badge-info' + }; + return Span({ class: statusClass[item.status] }, item.status); + } + } + ], + zebra: true + }); +}; +$mount(CustomDemo, '#demo-custom'); +``` + +### With Footers + +
+
+

Live Demo

+ +
+
+ +```javascript +const FooterDemo = () => { + const sales = [ + { month: 'January', revenue: 12500, expenses: 8900 }, + { month: 'February', revenue: 14200, expenses: 9200 }, + { month: 'March', revenue: 16800, expenses: 10100 } + ]; + + const totalRevenue = sales.reduce((sum, item) => sum + item.revenue, 0); + const totalExpenses = sales.reduce((sum, item) => sum + item.expenses, 0); + + return Table({ + items: sales, + columns: [ + { label: 'Month', key: 'month' }, + { + label: 'Revenue', + key: 'revenue', + render: (item) => `$${item.revenue.toLocaleString()}`, + footer: `Total: $${totalRevenue.toLocaleString()}` + }, + { + label: 'Expenses', + key: 'expenses', + render: (item) => `$${item.expenses.toLocaleString()}`, + footer: `Total: $${totalExpenses.toLocaleString()}` + }, + { + label: 'Profit', + render: (item) => `$${(item.revenue - item.expenses).toLocaleString()}`, + footer: `$${(totalRevenue - totalExpenses).toLocaleString()}` + } + ], + zebra: true + }); +}; +$mount(FooterDemo, '#demo-footer'); +``` + +### Empty State + +
+
+

Live Demo

+
+
+
+ +```javascript +const EmptyDemo = () => { + const emptyList = []; + + return Table({ + items: emptyList, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' } + ], + empty: Div({ class: 'flex flex-col items-center gap-2' }, [ + Icons.iconInfo, + Span({}, 'No records found') + ]) + }); +}; +$mount(EmptyDemo, '#demo-empty'); +``` + +### Reactive Data + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const filter = $('all'); + const tasks = $([ + { id: 1, title: 'Complete documentation', completed: true }, + { id: 2, title: 'Review pull requests', completed: false }, + { id: 3, title: 'Deploy to production', completed: false }, + { id: 4, title: 'Update dependencies', completed: true } + ]); + + const filteredTasks = () => { + if (filter() === 'completed') { + return tasks().filter(t => t.completed); + } else if (filter() === 'pending') { + return tasks().filter(t => !t.completed); + } + return tasks(); + }; + + const addTask = () => { + const newId = Math.max(...tasks().map(t => t.id), 0) + 1; + tasks([...tasks(), { id: newId, title: `Task ${newId}`, completed: false }]); + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex gap-2' }, [ + Button({ + class: 'btn btn-sm', + onclick: () => filter('all') + }, 'All'), + Button({ + class: 'btn btn-sm', + onclick: () => filter('completed') + }, 'Completed'), + Button({ + class: 'btn btn-sm', + onclick: () => filter('pending') + }, 'Pending'), + Button({ + class: 'btn btn-sm btn-primary', + onclick: addTask + }, 'Add Task') + ]), + Table({ + items: filteredTasks, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Title', key: 'title' }, + { + label: 'Status', + render: (item) => item.completed + ? Span({ class: 'badge badge-success' }, 'โœ“ Done') + : Span({ class: 'badge badge-warning' }, 'โ—‹ Pending') + } + ], + zebra: true + }) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### With Actions + +
+
+

Live Demo

+
+
+
+ +```javascript +const ActionsDemo = () => { + const users = $([ + { id: 1, name: 'John Doe', email: 'john@example.com', active: true }, + { id: 2, name: 'Jane Smith', email: 'jane@example.com', active: false }, + { id: 3, name: 'Bob Johnson', email: 'bob@example.com', active: true } + ]); + + const deleteUser = (id) => { + users(users().filter(u => u.id !== id)); + Toast('User deleted', 'alert-info', 2000); + }; + + const toggleActive = (id) => { + users(users().map(u => + u.id === id ? { ...u, active: !u.active } : u + )); + }; + + return Table({ + items: users, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Email', key: 'email' }, + { + label: 'Status', + render: (item) => item.active + ? Span({ class: 'badge badge-success' }, 'Active') + : Span({ class: 'badge badge-ghost' }, 'Inactive') + }, + { + label: 'Actions', + render: (item) => Div({ class: 'flex gap-1' }, [ + Button({ + class: 'btn btn-xs btn-ghost', + onclick: () => toggleActive(item.id) + }, item.active ? 'Deactivate' : 'Activate'), + Button({ + class: 'btn btn-xs btn-error', + onclick: () => deleteUser(item.id) + }, 'Delete') + ]) + } + ], + zebra: true + }); +}; +$mount(ActionsDemo, '#demo-actions'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const data = [ + { id: 1, name: 'Item 1', value: 100 }, + { id: 2, name: 'Item 2', value: 200 }, + { id: 3, name: 'Item 3', value: 300 } + ]; + + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'text-sm font-bold' }, 'Default Table'), + Table({ + items: data, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Value', key: 'value' } + ] + }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Zebra Stripes'), + Table({ + items: data, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Value', key: 'value' } + ], + zebra: true + }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Compact Table'), + Table({ + items: data, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Value', key: 'value' } + ], + class: 'table-compact' + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components/timeline.md b/docs/components/timeline.md new file mode 100644 index 0000000..372bf18 --- /dev/null +++ b/docs/components/timeline.md @@ -0,0 +1,553 @@ +# Timeline + +Timeline component for displaying chronological events, steps, or progress with customizable icons and content. + +## Tag + +`Timeline` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- | +| `items` | `Array \| Signal` | `[]` | Timeline items to display | +| `vertical` | `boolean \| Signal` | `true` | Vertical or horizontal orientation | +| `compact` | `boolean \| Signal` | `false` | Compact mode with less padding | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +### TimelineItem Structure + +| Property | Type | Description | +| :---------- | :--------------------------- | :----------------------------------------------- | +| `title` | `string \| VNode \| Signal` | Event title or main text | +| `detail` | `string \| VNode \| Signal` | Additional details or description | +| `icon` | `string \| VNode` | Custom icon (overrides type) | +| `type` | `string` | Type: 'success', 'warning', 'error', 'info' | +| `completed` | `boolean` | Whether event is completed (affects connector) | + +## Live Examples + +### Basic Timeline + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const events = [ + { title: 'Project Started', detail: 'Initial planning and setup', type: 'info', completed: true }, + { title: 'Design Phase', detail: 'UI/UX design completed', type: 'success', completed: true }, + { title: 'Development', detail: 'Core features implemented', type: 'warning', completed: false }, + { title: 'Testing', detail: 'Quality assurance', type: 'info', completed: false }, + { title: 'Launch', detail: 'Production deployment', type: 'success', completed: false } + ]; + + return Timeline({ items: events }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Horizontal Timeline + +
+
+

Live Demo

+
+
+
+ +```javascript +const HorizontalDemo = () => { + const steps = [ + { title: 'Step 1', detail: 'Requirements', type: 'success', completed: true }, + { title: 'Step 2', detail: 'Design', type: 'success', completed: true }, + { title: 'Step 3', detail: 'Development', type: 'warning', completed: false }, + { title: 'Step 4', detail: 'Testing', type: 'info', completed: false }, + { title: 'Step 5', detail: 'Deploy', type: 'info', completed: false } + ]; + + return Timeline({ + items: steps, + vertical: false, + class: 'min-w-[600px]' + }); +}; +$mount(HorizontalDemo, '#demo-horizontal'); +``` + +### Compact Timeline + +
+
+

Live Demo

+
+
+
+ +```javascript +const CompactDemo = () => { + const activities = [ + { title: 'User login', detail: '10:30 AM', type: 'success', completed: true }, + { title: 'Viewed dashboard', detail: '10:32 AM', type: 'info', completed: true }, + { title: 'Updated profile', detail: '10:45 AM', type: 'success', completed: true }, + { title: 'Made purchase', detail: '11:00 AM', type: 'warning', completed: false } + ]; + + return Timeline({ + items: activities, + compact: true + }); +}; +$mount(CompactDemo, '#demo-compact'); +``` + +### Custom Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + const milestones = [ + { title: 'Kickoff', detail: 'Project kickoff meeting', icon: Icons.iconInfo, completed: true }, + { title: 'MVP', detail: 'Minimum viable product', icon: Icons.iconSuccess, completed: true }, + { title: 'Beta', detail: 'Beta release', icon: Icons.iconWarning, completed: false }, + { title: 'Launch', detail: 'Public launch', icon: Icons.iconShow, completed: false } + ]; + + return Timeline({ items: milestones }); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Reactive Timeline + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const currentStep = $(2); + const steps = [ + { title: 'Order Placed', detail: 'Your order has been confirmed', type: 'success', completed: true }, + { title: 'Processing', detail: 'Payment verified, preparing shipment', type: 'success', completed: currentStep() > 1 }, + { title: 'Shipped', detail: 'Package on the way', type: 'warning', completed: currentStep() > 2 }, + { title: 'Delivered', detail: 'Arriving soon', type: 'info', completed: currentStep() > 3 } + ]; + + const items = () => steps.map((step, idx) => ({ + ...step, + completed: idx < currentStep() + })); + + const nextStep = () => { + if (currentStep() < steps.length) { + currentStep(currentStep() + 1); + Toast(`Step ${currentStep()}: ${steps[currentStep() - 1].title}`, 'alert-info', 1500); + } + }; + + const reset = () => { + currentStep(0); + Toast('Order tracking reset', 'alert-warning', 1500); + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Timeline({ items: items }), + Div({ class: 'flex gap-2 justify-center mt-4' }, [ + Button({ + class: 'btn btn-primary btn-sm', + onclick: nextStep, + disabled: () => currentStep() >= steps.length + }, 'Next Step'), + Button({ + class: 'btn btn-ghost btn-sm', + onclick: reset + }, 'Reset') + ]) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Order Status Tracker + +
+
+

Live Demo

+
+
+
+ +```javascript +const OrderDemo = () => { + const status = $('shipped'); + + const statusMap = { + pending: { title: 'Order Pending', detail: 'Awaiting confirmation', completed: false, type: 'warning' }, + confirmed: { title: 'Order Confirmed', detail: 'Payment received', completed: false, type: 'info' }, + processing: { title: 'Processing', detail: 'Preparing your order', completed: false, type: 'info' }, + shipped: { title: 'Shipped', detail: 'Package in transit', completed: false, type: 'info' }, + delivered: { title: 'Delivered', detail: 'Order completed', completed: false, type: 'success' } + }; + + const statusOrder = ['pending', 'confirmed', 'processing', 'shipped', 'delivered']; + const currentIndex = statusOrder.indexOf(status()); + + const items = statusOrder.map((key, idx) => ({ + ...statusMap[key], + completed: idx < currentIndex + })); + + return Div({ class: 'flex flex-col gap-4' }, [ + Timeline({ items, compact: true }), + Div({ class: 'flex gap-2 justify-center flex-wrap mt-4' }, statusOrder.map(s => + Button({ + class: `btn btn-xs ${status() === s ? 'btn-primary' : 'btn-ghost'}`, + onclick: () => status(s) + }, statusMap[s].title) + )) + ]); +}; +$mount(OrderDemo, '#demo-order'); +``` + +### Company History + +
+
+

Live Demo

+
+
+
+ +```javascript +const HistoryDemo = () => { + const milestones = [ + { + title: '2015 - Founded', + detail: 'Company started with 3 employees in a small office', + type: 'success', + completed: true + }, + { + title: '2017 - First Product', + detail: 'Launched our first software product to market', + type: 'success', + completed: true + }, + { + title: '2019 - Series A', + detail: 'Raised $5M in funding, expanded team to 50', + type: 'success', + completed: true + }, + { + title: '2022 - Global Expansion', + detail: 'Opened offices in Europe and Asia', + type: 'info', + completed: true + }, + { + title: '2024 - AI Integration', + detail: 'Launched AI-powered features', + type: 'warning', + completed: false + }, + { + title: '2026 - Future Goals', + detail: 'Aiming for market leadership', + type: 'info', + completed: false + } + ]; + + return Timeline({ items: milestones }); +}; +$mount(HistoryDemo, '#demo-history'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const sampleItems = [ + { title: 'Event 1', detail: 'Description here', type: 'success', completed: true }, + { title: 'Event 2', detail: 'Description here', type: 'warning', completed: false }, + { title: 'Event 3', detail: 'Description here', type: 'info', completed: false } + ]; + + return Div({ class: 'flex flex-col gap-8' }, [ + Div({ class: 'text-sm font-bold' }, 'Vertical Timeline'), + Timeline({ items: sampleItems }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Horizontal Timeline'), + Timeline({ items: sampleItems, vertical: false, class: 'min-w-[500px]' }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Compact Timeline'), + Timeline({ items: sampleItems, compact: true }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + \ No newline at end of file diff --git a/src/components/List.js b/src/components/List.js index d7edbac..4e5dd06 100644 --- a/src/components/List.js +++ b/src/components/List.js @@ -3,16 +3,24 @@ import { joinClass, val } from "../core/utils.js"; /** LIST */ export const List = (props) => { - const { items, header, render, keyFn, class: className } = props; + const { items, header, render, keyFn, class: className, ...rest } = props; + + const headerItem = header + ? $html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)]) + : null; + + const listItems = $for( + items, + (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), + keyFn + ); return $html( "ul", { + ...rest, class: joinClass("list bg-base-100 rounded-box shadow-md", className), }, - [ - $if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])), - $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn), - ], + header ? [headerItem, listItems] : listItems ); -}; +}; \ No newline at end of file