@dronico/droni-kit 1.5.11 → 1.6.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.6.0](https://github.com/Droni-app/droni-kit/compare/v1.5.11...v1.6.0) (2025-04-22)
+
+
+### Features
+
+* Select component ([2206604](https://github.com/Droni-app/droni-kit/commit/2206604e673401610214f84eb040bff00ab89241))
+
 ## [1.5.11](https://github.com/Droni-app/droni-kit/compare/v1.5.10...v1.5.11) (2025-04-22)
 
 

package/dist/droni-kit.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=["type","title","disabled"],v={key:1},x=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),h=["type","title","disabled"],v={key:1},x=`
   dk:transition
   dk:text-center
   dk:rounded
@@ -10,7 +10,7 @@
   dk:text-ellipsis
   dk:whitespace-nowrap
   dk:active:scale-95
-  dk:max-w-full`,y=e.defineComponent({__name:"DuiButton",props:{variant:{type:String,default:"solid"},color:{type:String,default:"neutral"},size:{type:String,default:"md"},type:{type:String,default:"button"},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},block:{type:Boolean,default:!1},title:{type:String,default:void 0}},setup(a){const r=a,d={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-4 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},o={solid:{base:"dk:border-b",neutral:`
+  dk:max-w-full`,y=e.defineComponent({__name:"DuiButton",props:{variant:{type:String,default:"solid"},color:{type:String,default:"neutral"},size:{type:String,default:"md"},type:{type:String,default:"button"},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},block:{type:Boolean,default:!1},title:{type:String,default:void 0}},setup(l){const r=l,d={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-4 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},n={solid:{base:"dk:border-b",neutral:`
       dk:border-zinc-500
       dk:dark:border-zinc-600
       dk:bg-zinc-200
@@ -154,7 +154,7 @@
       dk:text-amber-600
       dk:hover:bg-amber-50
       dk:dark:text-amber-100
-      dk:dark:hover:bg-amber-800`}},b=e.computed(()=>{var n;const k=(((n=o[r.variant])==null?void 0:n[r.color])||"")+" "+o[r.variant].base,l=d[r.size]||"",c=r.block?"dk:w-full":"";return[x,k,l,c].join(" ")});return(k,l)=>(e.openBlock(),e.createElementBlock("button",{type:r.type,class:e.normalizeClass(b.value),title:r.title,disabled:r.disabled||r.loading},[r.loading?(e.openBlock(),e.createElementBlock("span",v,"Cargando...")):e.renderSlot(k.$slots,"default",{key:0})],10,g))}}),z=["for"],f={key:0,class:"dk:text-rose-500"},S=["type","value","disabled","placeholder","required","name","id","pattern","aria-label","aria-disabled","aria-required"],_=`
+      dk:dark:hover:bg-amber-800`}},c=e.computed(()=>{var i;const o=(((i=n[r.variant])==null?void 0:i[r.color])||"")+" "+n[r.variant].base,s=d[r.size]||"",b=r.block?"dk:w-full":"";return[x,o,s,b].join(" ")});return(o,s)=>(e.openBlock(),e.createElementBlock("button",{type:r.type,class:e.normalizeClass(c.value),title:r.title,disabled:r.disabled||r.loading},[r.loading?(e.openBlock(),e.createElementBlock("span",v,"Cargando...")):e.renderSlot(o.$slots,"default",{key:0})],10,h))}}),z=["for"],f={key:0,class:"dk:text-rose-500"},S=["type","value","disabled","placeholder","required","name","id","pattern","aria-label","aria-disabled","aria-required"],_=`
   dk:border-b
   dk:border-zinc-300
   dk:bg-zinc-50
@@ -166,7 +166,7 @@
   dk:dark:bg-zinc-800
   dk:dark:text-zinc-100
   dk:dark:focus:bg-zinc-700
-  dk:dark:[color-scheme:dark]`,C=e.defineComponent({__name:"DuiInput",props:{modelValue:{type:String,default:""},type:{type:String,default:"text"},size:{type:String,default:"md"},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},name:{type:String,default:void 0},id:{type:String,default:void 0},required:{type:Boolean,default:!1},label:{type:String,default:void 0},pattern:{type:String,default:void 0},rounded:{type:String,default:"all"}},emits:["update:modelValue"],setup(a,{emit:r}){const d=a,o=r;function b(s){const i=s.target;o("update:modelValue",i.value)}const k={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-4 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},l={all:"dk:rounded",top:"dk:rounded-t",bottom:"dk:rounded-b",left:"dk:rounded-l",right:"dk:rounded-r",none:"dk:rounded-none"},c={sm:"dk:text-sm dk:pb-0.5",md:"dk:text-base dk:pb-1",lg:"dk:text-lg dk:pb-2"},n=e.computed(()=>{const s=k[d.size]||"",i=d.block?"dk:w-full":"",t=l[d.rounded]||"";return[_,s,i,t].join(" ")}),u=e.computed(()=>{const s=c[d.size]||"",i=d.block?"dk:w-full":"";return[s,i].join(" ")});return(s,i)=>(e.openBlock(),e.createElementBlock("div",null,[d.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.id,class:e.normalizeClass([u.value,"dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),d.required?(e.openBlock(),e.createElementBlock("span",f,"*")):e.createCommentVNode("",!0)],10,z)):e.createCommentVNode("",!0),e.createElementVNode("input",{type:d.type,class:e.normalizeClass(n.value),value:a.modelValue,disabled:d.disabled,placeholder:d.placeholder,required:d.required,name:d.name,id:d.id,pattern:d.pattern,"aria-label":d.placeholder,"aria-disabled":d.disabled,"aria-required":d.required,onInput:b},null,42,S)]))}}),B=["for"],w={key:0,class:"dk:text-rose-500"},q=["value","disabled","placeholder","required","name","id","aria-label","aria-disabled","aria-required"],V=`
+  dk:dark:[color-scheme:dark]`,C=e.defineComponent({__name:"DuiInput",props:{modelValue:{type:String,default:""},type:{type:String,default:"text"},size:{type:String,default:"md"},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},name:{type:String,default:void 0},id:{type:String,default:void 0},required:{type:Boolean,default:!1},label:{type:String,default:void 0},pattern:{type:String,default:void 0},rounded:{type:String,default:"all"}},emits:["update:modelValue"],setup(l,{emit:r}){const d=l,n=r;function c(a){const k=a.target;n("update:modelValue",k.value)}const o={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-4 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},s={all:"dk:rounded",top:"dk:rounded-t",bottom:"dk:rounded-b",left:"dk:rounded-l",right:"dk:rounded-r",none:"dk:rounded-none"},b={sm:"dk:text-sm dk:pb-0.5",md:"dk:text-base dk:pb-1",lg:"dk:text-lg dk:pb-2"},i=e.computed(()=>{const a=o[d.size]||"",k=d.block?"dk:w-full":"",t=s[d.rounded]||"";return[_,a,k,t].join(" ")}),p=e.computed(()=>{const a=b[d.size]||"",k=d.block?"dk:w-full":"";return[a,k].join(" ")});return(a,k)=>(e.openBlock(),e.createElementBlock("div",null,[d.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.id,class:e.normalizeClass([p.value,"dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),d.required?(e.openBlock(),e.createElementBlock("span",f,"*")):e.createCommentVNode("",!0)],10,z)):e.createCommentVNode("",!0),e.createElementVNode("input",{type:d.type,class:e.normalizeClass(i.value),value:l.modelValue,disabled:d.disabled,placeholder:d.placeholder,required:d.required,name:d.name,id:d.id,pattern:d.pattern,"aria-label":d.placeholder,"aria-disabled":d.disabled,"aria-required":d.required,onInput:c},null,42,S)]))}}),B=["for"],w={key:0,class:"dk:text-rose-500"},V=["value","disabled","placeholder","required","name","id","aria-label","aria-disabled","aria-required"],q=`
   dk:border-b
   dk:border-zinc-300
   dk:bg-zinc-50
@@ -178,7 +178,7 @@
   dk:dark:bg-zinc-800
   dk:dark:text-zinc-100
   dk:dark:focus:bg-zinc-700
-  dk:dark:[color-scheme:dark]`,$=e.defineComponent({__name:"DuiTextarea",props:{modelValue:{type:String,default:""},size:{type:String,default:"md"},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},name:{type:String,default:void 0},id:{type:String,default:void 0},required:{type:Boolean,default:!1},label:{type:String,default:void 0},rounded:{type:String,default:"all"},autoheight:{type:Boolean,default:!0},resize:{type:String,default:"none"}},emits:["update:modelValue"],setup(a,{emit:r}){const d=a,o=r;function b(t){const p=t.target;d.autoheight&&i(p),o("update:modelValue",p.value)}const k={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-3 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},l={all:"dk:rounded",top:"dk:rounded-t",bottom:"dk:rounded-b",left:"dk:rounded-l",right:"dk:rounded-r",none:"dk:rounded-none"},c={sm:"dk:text-sm dk:pb-0.5",md:"dk:text-base dk:pb-1",lg:"dk:text-lg dk:pb-2"},n={none:"dk:resize-none",both:"dk:resize",horizontal:"dk:resize-x",vertical:"dk:resize-y"},u=e.computed(()=>{const t=k[d.size]||"",p=d.block?"dk:w-full":"",h=l[d.rounded]||"",m=n[d.resize]||"";return[V,t,p,h,m].join(" ")}),s=e.computed(()=>{const t=c[d.size]||"",p=d.block?"dk:w-full":"";return[t,p].join(" ")}),i=t=>{t.style.height="auto",t.style.height=`${t.scrollHeight+5}px`};return(t,p)=>(e.openBlock(),e.createElementBlock("div",null,[d.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.id,class:e.normalizeClass([s.value,"dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),d.required?(e.openBlock(),e.createElementBlock("span",w,"*")):e.createCommentVNode("",!0)],10,B)):e.createCommentVNode("",!0),e.createElementVNode("textarea",{class:e.normalizeClass(u.value),value:a.modelValue,disabled:d.disabled,placeholder:d.placeholder,required:d.required,name:d.name,id:d.id,"aria-label":d.placeholder,"aria-disabled":d.disabled,"aria-required":d.required,onInput:b},null,42,q)]))}}),E=["title"],D={key:1},N=`
+  dk:dark:[color-scheme:dark]`,$=e.defineComponent({__name:"DuiTextarea",props:{modelValue:{type:String,default:""},size:{type:String,default:"md"},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},name:{type:String,default:void 0},id:{type:String,default:void 0},required:{type:Boolean,default:!1},label:{type:String,default:void 0},rounded:{type:String,default:"all"},autoheight:{type:Boolean,default:!0},resize:{type:String,default:"none"}},emits:["update:modelValue"],setup(l,{emit:r}){const d=l,n=r;function c(t){const u=t.target;d.autoheight&&k(u),n("update:modelValue",u.value)}const o={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-3 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},s={all:"dk:rounded",top:"dk:rounded-t",bottom:"dk:rounded-b",left:"dk:rounded-l",right:"dk:rounded-r",none:"dk:rounded-none"},b={sm:"dk:text-sm dk:pb-0.5",md:"dk:text-base dk:pb-1",lg:"dk:text-lg dk:pb-2"},i={none:"dk:resize-none",both:"dk:resize",horizontal:"dk:resize-x",vertical:"dk:resize-y"},p=e.computed(()=>{const t=o[d.size]||"",u=d.block?"dk:w-full":"",m=s[d.rounded]||"",g=i[d.resize]||"";return[q,t,u,m,g].join(" ")}),a=e.computed(()=>{const t=b[d.size]||"",u=d.block?"dk:w-full":"";return[t,u].join(" ")}),k=t=>{t.style.height="auto",t.style.height=`${t.scrollHeight+5}px`};return(t,u)=>(e.openBlock(),e.createElementBlock("div",null,[d.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.id,class:e.normalizeClass([a.value,"dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),d.required?(e.openBlock(),e.createElementBlock("span",w,"*")):e.createCommentVNode("",!0)],10,B)):e.createCommentVNode("",!0),e.createElementVNode("textarea",{class:e.normalizeClass(p.value),value:l.modelValue,disabled:d.disabled,placeholder:d.placeholder,required:d.required,name:d.name,id:d.id,"aria-label":d.placeholder,"aria-disabled":d.disabled,"aria-required":d.required,onInput:c},null,42,V)]))}}),E=["title"],D={key:1},N=`
   dk:transition
   dk:text-center
   dk:rounded
@@ -190,7 +190,7 @@
   dk:text-ellipsis
   dk:whitespace-nowrap
   dk:active:scale-95
-  dk:max-w-full`,j=e.defineComponent({__name:"DuiAction",props:{variant:{type:String,default:"solid"},color:{type:String,default:"neutral"},size:{type:String,default:"md"},loading:{type:Boolean,default:!1},block:{type:Boolean,default:!1},title:{type:String,default:void 0}},setup(a){const r=a,d={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-4 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},o={solid:{base:"dk:border-b",neutral:`
+  dk:max-w-full`,j=e.defineComponent({__name:"DuiAction",props:{variant:{type:String,default:"solid"},color:{type:String,default:"neutral"},size:{type:String,default:"md"},loading:{type:Boolean,default:!1},block:{type:Boolean,default:!1},title:{type:String,default:void 0}},setup(l){const r=l,d={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-4 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},n={solid:{base:"dk:border-b",neutral:`
       dk:border-zinc-500
       dk:dark:border-zinc-600
       dk:bg-zinc-200
@@ -334,4 +334,17 @@
       dk:text-amber-600
       dk:hover:bg-amber-50
       dk:dark:text-amber-100
-      dk:dark:hover:bg-amber-800`}},b=e.computed(()=>{var n;const k=(((n=o[r.variant])==null?void 0:n[r.color])||"")+" "+o[r.variant].base,l=d[r.size]||"",c=r.block?"dk:block":"dk:inline-block";return[N,k,l,c].join(" ")});return(k,l)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(b.value),title:r.title},[r.loading?(e.openBlock(),e.createElementBlock("span",D,"Cargando...")):e.renderSlot(k.$slots,"default",{key:0})],10,E))}});exports.DuiAction=j;exports.DuiButton=y;exports.DuiInput=C;exports.DuiTextarea=$;
+      dk:dark:hover:bg-amber-800`}},c=e.computed(()=>{var i;const o=(((i=n[r.variant])==null?void 0:i[r.color])||"")+" "+n[r.variant].base,s=d[r.size]||"",b=r.block?"dk:block":"dk:inline-block";return[N,o,s,b].join(" ")});return(o,s)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(c.value),title:r.title},[r.loading?(e.openBlock(),e.createElementBlock("span",D,"Cargando...")):e.renderSlot(o.$slots,"default",{key:0})],10,E))}}),L=["for"],T={key:0,class:"dk:text-rose-500"},I=["id","name","disabled","required","aria-label","aria-disabled","aria-required"],A={key:0,disabled:"",selected:"",hidden:""},F=["value","selected"],H=`
+  dk:border-b
+  dk:border-zinc-300
+  dk:bg-zinc-50
+  dk:text-zinc-800
+  dk:focus:outline-none
+  dk:focus:bg-zinc-100
+  dk:dark:bg-zinc-700
+  dk:dark:border-zinc-600
+  dk:dark:bg-zinc-800
+  dk:dark:text-zinc-100
+  dk:dark:focus:bg-zinc-700
+  dk:dark:[color-scheme:dark]
+`,M=e.defineComponent({__name:"DuiSelect",props:{modelValue:{type:String,default:""},options:{type:Array,default:()=>[]},size:{type:String,default:"md"},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},name:{type:String,default:void 0},id:{type:String,default:void 0},required:{type:Boolean,default:!1},label:{type:String,default:void 0},placeholder:{type:String,default:void 0},rounded:{type:String,default:"all"},itemLabel:{type:String,default:"label"},itemValue:{type:String,default:"value"}},emits:["update:modelValue"],setup(l,{emit:r}){const d=l,n=r;function c(a){const k=a.target;n("update:modelValue",k.value)}const o={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-4 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},s={all:"dk:rounded",top:"dk:rounded-t",bottom:"dk:rounded-b",left:"dk:rounded-l",right:"dk:rounded-r",none:"dk:rounded-none"},b={sm:"dk:text-sm dk:pb-0.5",md:"dk:text-base dk:pb-1",lg:"dk:text-lg dk:pb-2"},i=e.computed(()=>{const a=o[d.size]||"",k=d.block?"dk:w-full":"",t=s[d.rounded]||"";return[H,a,k,t].join(" ")}),p=e.computed(()=>{const a=b[d.size]||"",k=d.block?"dk:w-full":"";return[a,k].join(" ")});return(a,k)=>(e.openBlock(),e.createElementBlock("div",null,[d.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.id,class:e.normalizeClass([p.value,"dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),d.required?(e.openBlock(),e.createElementBlock("span",T,"*")):e.createCommentVNode("",!0)],10,L)):e.createCommentVNode("",!0),e.createElementVNode("select",{id:d.id,name:d.name,disabled:d.disabled,required:d.required,class:e.normalizeClass(i.value),"aria-label":d.label||"select input","aria-disabled":d.disabled,"aria-required":d.required,onChange:c},[d.placeholder?(e.openBlock(),e.createElementBlock("option",A,e.toDisplayString(d.placeholder),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.options,(t,u)=>(e.openBlock(),e.createElementBlock("option",{key:u,value:t[d.itemValue]??"",selected:t[d.itemValue]==d.modelValue},e.toDisplayString(t[d.itemLabel]??""),9,F))),128))],42,I)]))}});exports.DuiAction=j;exports.DuiButton=y;exports.DuiInput=C;exports.DuiSelect=M;exports.DuiTextarea=$;

package/dist/droni-kit.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as x, computed as h, createElementBlock as k, openBlock as a, normalizeClass as v, renderSlot as y, createCommentVNode as g, createElementVNode as z, createTextVNode as f, toDisplayString as S } from "vue";
-const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
+import { defineComponent as y, computed as g, createElementBlock as t, openBlock as a, normalizeClass as h, renderSlot as S, createCommentVNode as v, createElementVNode as z, createTextVNode as f, toDisplayString as m, Fragment as C, renderList as q } from "vue";
+const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
   dk:transition
   dk:text-center
   dk:rounded
@@ -11,7 +11,7 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
   dk:text-ellipsis
   dk:whitespace-nowrap
   dk:active:scale-95
-  dk:max-w-full`, F = /* @__PURE__ */ x({
+  dk:max-w-full`, U = /* @__PURE__ */ y({
   __name: "DuiButton",
   props: {
     variant: {
@@ -47,12 +47,12 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
       default: void 0
     }
   },
-  setup(o) {
-    const d = o, e = {
+  setup(s) {
+    const d = s, e = {
       sm: "dk:text-sm dk:px-3 dk:py-1.5",
       md: "dk:text-base dk:px-4 dk:py-2",
       lg: "dk:text-lg dk:px-5 dk:py-3"
-    }, l = {
+    }, n = {
       solid: {
         base: "dk:border-b",
         neutral: `
@@ -224,24 +224,24 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
       dk:dark:text-amber-100
       dk:dark:hover:bg-amber-800`
       }
-    }, c = h(() => {
-      var n;
-      const t = (((n = l[d.variant]) == null ? void 0 : n[d.color]) || "") + " " + l[d.variant].base, s = e[d.size] || "", p = d.block ? "dk:w-full" : "";
-      return [B, t, s, p].join(" ");
+    }, c = g(() => {
+      var b;
+      const l = (((b = n[d.variant]) == null ? void 0 : b[d.color]) || "") + " " + n[d.variant].base, i = e[d.size] || "", u = d.block ? "dk:w-full" : "";
+      return [V, l, i, u].join(" ");
     });
-    return (t, s) => (a(), k("button", {
+    return (l, i) => (a(), t("button", {
       type: d.type,
-      class: v(c.value),
+      class: h(c.value),
       title: d.title,
       disabled: d.disabled || d.loading
     }, [
-      d.loading ? (a(), k("span", q, "Cargando...")) : y(t.$slots, "default", { key: 0 })
-    ], 10, C));
+      d.loading ? (a(), t("span", B, "Cargando...")) : S(l.$slots, "default", { key: 0 })
+    ], 10, $));
   }
-}), $ = ["for"], V = {
+}), D = ["for"], L = {
   key: 0,
   class: "dk:text-rose-500"
-}, D = ["type", "value", "disabled", "placeholder", "required", "name", "id", "pattern", "aria-label", "aria-disabled", "aria-required"], j = `
+}, j = ["type", "value", "disabled", "placeholder", "required", "name", "id", "pattern", "aria-label", "aria-disabled", "aria-required"], I = `
   dk:border-b
   dk:border-zinc-300
   dk:bg-zinc-50
@@ -253,7 +253,7 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
   dk:dark:bg-zinc-800
   dk:dark:text-zinc-100
   dk:dark:focus:bg-zinc-700
-  dk:dark:[color-scheme:dark]`, G = /* @__PURE__ */ x({
+  dk:dark:[color-scheme:dark]`, W = /* @__PURE__ */ y({
   __name: "DuiInput",
   props: {
     modelValue: {
@@ -306,47 +306,47 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
     }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: d }) {
-    const e = o, l = d;
-    function c(i) {
-      const b = i.target;
-      l("update:modelValue", b.value);
+  setup(s, { emit: d }) {
+    const e = s, n = d;
+    function c(k) {
+      const o = k.target;
+      n("update:modelValue", o.value);
     }
-    const t = {
+    const l = {
       sm: "dk:text-sm dk:px-3 dk:py-1.5",
       md: "dk:text-base dk:px-4 dk:py-2",
       lg: "dk:text-lg dk:px-5 dk:py-3"
-    }, s = {
+    }, i = {
       all: "dk:rounded",
       top: "dk:rounded-t",
       bottom: "dk:rounded-b",
       left: "dk:rounded-l",
       right: "dk:rounded-r",
       none: "dk:rounded-none"
-    }, p = {
+    }, u = {
       sm: "dk:text-sm dk:pb-0.5",
       md: "dk:text-base dk:pb-1",
       lg: "dk:text-lg dk:pb-2"
-    }, n = h(() => {
-      const i = t[e.size] || "", b = e.block ? "dk:w-full" : "", r = s[e.rounded] || "";
-      return [j, i, b, r].join(" ");
-    }), m = h(() => {
-      const i = p[e.size] || "", b = e.block ? "dk:w-full" : "";
-      return [i, b].join(" ");
+    }, b = g(() => {
+      const k = l[e.size] || "", o = e.block ? "dk:w-full" : "", r = i[e.rounded] || "";
+      return [I, k, o, r].join(" ");
+    }), x = g(() => {
+      const k = u[e.size] || "", o = e.block ? "dk:w-full" : "";
+      return [k, o].join(" ");
     });
-    return (i, b) => (a(), k("div", null, [
-      e.label ? (a(), k("label", {
+    return (k, o) => (a(), t("div", null, [
+      e.label ? (a(), t("label", {
         key: 0,
         for: e.id,
-        class: v([m.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
+        class: h([x.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
       }, [
-        f(S(e.label) + " ", 1),
-        e.required ? (a(), k("span", V, "*")) : g("", !0)
-      ], 10, $)) : g("", !0),
+        f(m(e.label) + " ", 1),
+        e.required ? (a(), t("span", L, "*")) : v("", !0)
+      ], 10, D)) : v("", !0),
       z("input", {
         type: e.type,
-        class: v(n.value),
-        value: o.modelValue,
+        class: h(b.value),
+        value: s.modelValue,
         disabled: e.disabled,
         placeholder: e.placeholder,
         required: e.required,
@@ -357,13 +357,13 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
         "aria-disabled": e.disabled,
         "aria-required": e.required,
         onInput: c
-      }, null, 42, D)
+      }, null, 42, j)
     ]));
   }
-}), I = ["for"], L = {
+}), A = ["for"], N = {
   key: 0,
   class: "dk:text-rose-500"
-}, N = ["value", "disabled", "placeholder", "required", "name", "id", "aria-label", "aria-disabled", "aria-required"], T = `
+}, T = ["value", "disabled", "placeholder", "required", "name", "id", "aria-label", "aria-disabled", "aria-required"], E = `
   dk:border-b
   dk:border-zinc-300
   dk:bg-zinc-50
@@ -375,7 +375,7 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
   dk:dark:bg-zinc-800
   dk:dark:text-zinc-100
   dk:dark:focus:bg-zinc-700
-  dk:dark:[color-scheme:dark]`, J = /* @__PURE__ */ x({
+  dk:dark:[color-scheme:dark]`, X = /* @__PURE__ */ y({
   __name: "DuiTextarea",
   props: {
     modelValue: {
@@ -428,53 +428,53 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
     }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: d }) {
-    const e = o, l = d;
+  setup(s, { emit: d }) {
+    const e = s, n = d;
     function c(r) {
-      const u = r.target;
-      e.autoheight && b(u), l("update:modelValue", u.value);
+      const p = r.target;
+      e.autoheight && o(p), n("update:modelValue", p.value);
     }
-    const t = {
+    const l = {
       sm: "dk:text-sm dk:px-3 dk:py-1.5",
       md: "dk:text-base dk:px-3 dk:py-2",
       lg: "dk:text-lg dk:px-5 dk:py-3"
-    }, s = {
+    }, i = {
       all: "dk:rounded",
       top: "dk:rounded-t",
       bottom: "dk:rounded-b",
       left: "dk:rounded-l",
       right: "dk:rounded-r",
       none: "dk:rounded-none"
-    }, p = {
+    }, u = {
       sm: "dk:text-sm dk:pb-0.5",
       md: "dk:text-base dk:pb-1",
       lg: "dk:text-lg dk:pb-2"
-    }, n = {
+    }, b = {
       none: "dk:resize-none",
       both: "dk:resize",
       horizontal: "dk:resize-x",
       vertical: "dk:resize-y"
-    }, m = h(() => {
-      const r = t[e.size] || "", u = e.block ? "dk:w-full" : "", _ = s[e.rounded] || "", w = n[e.resize] || "";
-      return [T, r, u, _, w].join(" ");
-    }), i = h(() => {
-      const r = p[e.size] || "", u = e.block ? "dk:w-full" : "";
-      return [r, u].join(" ");
-    }), b = (r) => {
+    }, x = g(() => {
+      const r = l[e.size] || "", p = e.block ? "dk:w-full" : "", _ = i[e.rounded] || "", w = b[e.resize] || "";
+      return [E, r, p, _, w].join(" ");
+    }), k = g(() => {
+      const r = u[e.size] || "", p = e.block ? "dk:w-full" : "";
+      return [r, p].join(" ");
+    }), o = (r) => {
       r.style.height = "auto", r.style.height = `${r.scrollHeight + 5}px`;
     };
-    return (r, u) => (a(), k("div", null, [
-      e.label ? (a(), k("label", {
+    return (r, p) => (a(), t("div", null, [
+      e.label ? (a(), t("label", {
         key: 0,
         for: e.id,
-        class: v([i.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
+        class: h([k.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
       }, [
-        f(S(e.label) + " ", 1),
-        e.required ? (a(), k("span", L, "*")) : g("", !0)
-      ], 10, I)) : g("", !0),
+        f(m(e.label) + " ", 1),
+        e.required ? (a(), t("span", N, "*")) : v("", !0)
+      ], 10, A)) : v("", !0),
       z("textarea", {
-        class: v(m.value),
-        value: o.modelValue,
+        class: h(x.value),
+        value: s.modelValue,
         disabled: e.disabled,
         placeholder: e.placeholder,
         required: e.required,
@@ -484,10 +484,10 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
         "aria-disabled": e.disabled,
         "aria-required": e.required,
         onInput: c
-      }, null, 42, N)
+      }, null, 42, T)
     ]));
   }
-}), A = ["title"], E = { key: 1 }, H = `
+}), F = ["title"], H = { key: 1 }, R = `
   dk:transition
   dk:text-center
   dk:rounded
@@ -499,7 +499,7 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
   dk:text-ellipsis
   dk:whitespace-nowrap
   dk:active:scale-95
-  dk:max-w-full`, K = /* @__PURE__ */ x({
+  dk:max-w-full`, Y = /* @__PURE__ */ y({
   __name: "DuiAction",
   props: {
     variant: {
@@ -527,12 +527,12 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
       default: void 0
     }
   },
-  setup(o) {
-    const d = o, e = {
+  setup(s) {
+    const d = s, e = {
       sm: "dk:text-sm dk:px-3 dk:py-1.5",
       md: "dk:text-base dk:px-4 dk:py-2",
       lg: "dk:text-lg dk:px-5 dk:py-3"
-    }, l = {
+    }, n = {
       solid: {
         base: "dk:border-b",
         neutral: `
@@ -704,22 +704,158 @@ const C = ["type", "title", "disabled"], q = { key: 1 }, B = `
       dk:dark:text-amber-100
       dk:dark:hover:bg-amber-800`
       }
-    }, c = h(() => {
-      var n;
-      const t = (((n = l[d.variant]) == null ? void 0 : n[d.color]) || "") + " " + l[d.variant].base, s = e[d.size] || "", p = d.block ? "dk:block" : "dk:inline-block";
-      return [H, t, s, p].join(" ");
+    }, c = g(() => {
+      var b;
+      const l = (((b = n[d.variant]) == null ? void 0 : b[d.color]) || "") + " " + n[d.variant].base, i = e[d.size] || "", u = d.block ? "dk:block" : "dk:inline-block";
+      return [R, l, i, u].join(" ");
     });
-    return (t, s) => (a(), k("span", {
-      class: v(c.value),
+    return (l, i) => (a(), t("span", {
+      class: h(c.value),
       title: d.title
     }, [
-      d.loading ? (a(), k("span", E, "Cargando...")) : y(t.$slots, "default", { key: 0 })
-    ], 10, A));
+      d.loading ? (a(), t("span", H, "Cargando...")) : S(l.$slots, "default", { key: 0 })
+    ], 10, F));
+  }
+}), G = ["for"], J = {
+  key: 0,
+  class: "dk:text-rose-500"
+}, K = ["id", "name", "disabled", "required", "aria-label", "aria-disabled", "aria-required"], M = {
+  key: 0,
+  disabled: "",
+  selected: "",
+  hidden: ""
+}, O = ["value", "selected"], P = `
+  dk:border-b
+  dk:border-zinc-300
+  dk:bg-zinc-50
+  dk:text-zinc-800
+  dk:focus:outline-none
+  dk:focus:bg-zinc-100
+  dk:dark:bg-zinc-700
+  dk:dark:border-zinc-600
+  dk:dark:bg-zinc-800
+  dk:dark:text-zinc-100
+  dk:dark:focus:bg-zinc-700
+  dk:dark:[color-scheme:dark]
+`, Z = /* @__PURE__ */ y({
+  __name: "DuiSelect",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String,
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: void 0
+    },
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    rounded: {
+      type: String,
+      default: "all"
+    },
+    itemLabel: {
+      type: String,
+      default: "label"
+    },
+    itemValue: {
+      type: String,
+      default: "value"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(s, { emit: d }) {
+    const e = s, n = d;
+    function c(k) {
+      const o = k.target;
+      n("update:modelValue", o.value);
+    }
+    const l = {
+      sm: "dk:text-sm dk:px-3 dk:py-1.5",
+      md: "dk:text-base dk:px-4 dk:py-2",
+      lg: "dk:text-lg dk:px-5 dk:py-3"
+    }, i = {
+      all: "dk:rounded",
+      top: "dk:rounded-t",
+      bottom: "dk:rounded-b",
+      left: "dk:rounded-l",
+      right: "dk:rounded-r",
+      none: "dk:rounded-none"
+    }, u = {
+      sm: "dk:text-sm dk:pb-0.5",
+      md: "dk:text-base dk:pb-1",
+      lg: "dk:text-lg dk:pb-2"
+    }, b = g(() => {
+      const k = l[e.size] || "", o = e.block ? "dk:w-full" : "", r = i[e.rounded] || "";
+      return [P, k, o, r].join(" ");
+    }), x = g(() => {
+      const k = u[e.size] || "", o = e.block ? "dk:w-full" : "";
+      return [k, o].join(" ");
+    });
+    return (k, o) => (a(), t("div", null, [
+      e.label ? (a(), t("label", {
+        key: 0,
+        for: e.id,
+        class: h([x.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
+      }, [
+        f(m(e.label) + " ", 1),
+        e.required ? (a(), t("span", J, "*")) : v("", !0)
+      ], 10, G)) : v("", !0),
+      z("select", {
+        id: e.id,
+        name: e.name,
+        disabled: e.disabled,
+        required: e.required,
+        class: h(b.value),
+        "aria-label": e.label || "select input",
+        "aria-disabled": e.disabled,
+        "aria-required": e.required,
+        onChange: c
+      }, [
+        e.placeholder ? (a(), t("option", M, m(e.placeholder), 1)) : v("", !0),
+        (a(!0), t(C, null, q(e.options, (r, p) => (a(), t("option", {
+          key: p,
+          value: r[e.itemValue] ?? "",
+          selected: r[e.itemValue] == e.modelValue
+        }, m(r[e.itemLabel] ?? ""), 9, O))), 128))
+      ], 42, K)
+    ]));
   }
 });
 export {
-  K as DuiAction,
-  F as DuiButton,
-  G as DuiInput,
-  J as DuiTextarea
+  Y as DuiAction,
+  U as DuiButton,
+  W as DuiInput,
+  Z as DuiSelect,
+  X as DuiTextarea
 };

package/dist/index.d.ts

@@ -2,4 +2,5 @@ import { default as DuiButton } from './stories/Forms/DuiButton.vue';
 import { default as DuiInput } from './stories/Forms/DuiInput.vue';
 import { default as DuiTextarea } from './stories/Forms/DuiTextarea.vue';
 import { default as DuiAction } from './stories/Elements/DuiAction.vue';
-export { DuiButton, DuiInput, DuiTextarea, DuiAction };
+import { default as DuiSelect } from './stories/Forms/DuiSelect.vue';
+export { DuiButton, DuiInput, DuiTextarea, DuiAction, DuiSelect, };

package/dist/stories/Forms/DuiSelect.stories.d.ts

@@ -0,0 +1,194 @@
+import { StoryObj } from '@storybook/vue3';
+declare const meta: {
+    title: string;
+    component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+            default: string;
+        };
+        options: {
+            type: () => Array<Record<string, any>>;
+            default: () => never[];
+        };
+        size: {
+            type: () => "sm" | "md" | "lg";
+            default: string;
+        };
+        block: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        id: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        required: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        label: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        placeholder: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        rounded: {
+            type: () => "all" | "top" | "bottom" | "left" | "right" | "none";
+            default: string;
+        };
+        itemLabel: {
+            type: StringConstructor;
+            default: string;
+        };
+        itemValue: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        "update:modelValue": (value: string) => any;
+    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+            default: string;
+        };
+        options: {
+            type: () => Array<Record<string, any>>;
+            default: () => never[];
+        };
+        size: {
+            type: () => "sm" | "md" | "lg";
+            default: string;
+        };
+        block: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        id: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        required: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        label: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        placeholder: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        rounded: {
+            type: () => "all" | "top" | "bottom" | "left" | "right" | "none";
+            default: string;
+        };
+        itemLabel: {
+            type: StringConstructor;
+            default: string;
+        };
+        itemValue: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    }>, {
+        size: "sm" | "md" | "lg";
+        disabled: boolean;
+        block: boolean;
+        label: string;
+        modelValue: string;
+        placeholder: string;
+        name: string;
+        id: string;
+        required: boolean;
+        rounded: "all" | "top" | "bottom" | "left" | "right" | "none";
+        options: Record<string, any>[];
+        itemLabel: string;
+        itemValue: string;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+    tags: string[];
+    argTypes: {
+        block: {
+            control: {
+                type: "boolean";
+            };
+            defaultValue: boolean;
+        };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            defaultValue: string;
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+            defaultValue: boolean;
+        };
+        placeholder: {
+            control: {
+                type: "text";
+            };
+            defaultValue: undefined;
+        };
+        name: {
+            control: {
+                type: "text";
+            };
+            defaultValue: undefined;
+        };
+        required: {
+            control: {
+                type: "boolean";
+            };
+            defaultValue: boolean;
+        };
+        label: {
+            control: {
+                type: "text";
+            };
+            defaultValue: undefined;
+        };
+        rounded: {
+            constrol: {
+                type: string;
+            };
+            options: string[];
+            defaultValue: string;
+        };
+        options: {
+            control: {
+                type: "object";
+            };
+            defaultValue: {
+                label: string;
+                value: string;
+            }[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/Forms/DuiSelect.vue.d.ts

@@ -0,0 +1,126 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: () => Array<Record<string, any>>;
+        default: () => never[];
+    };
+    size: {
+        type: () => "sm" | "md" | "lg";
+        default: string;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    rounded: {
+        type: () => "all" | "top" | "bottom" | "left" | "right" | "none";
+        default: string;
+    };
+    itemLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemValue: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: () => Array<Record<string, any>>;
+        default: () => never[];
+    };
+    size: {
+        type: () => "sm" | "md" | "lg";
+        default: string;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    rounded: {
+        type: () => "all" | "top" | "bottom" | "left" | "right" | "none";
+        default: string;
+    };
+    itemLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemValue: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    disabled: boolean;
+    block: boolean;
+    label: string;
+    modelValue: string;
+    placeholder: string;
+    name: string;
+    id: string;
+    required: boolean;
+    rounded: "all" | "top" | "bottom" | "left" | "right" | "none";
+    options: Record<string, any>[];
+    itemLabel: string;
+    itemValue: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dronico/droni-kit",
   "author": "Gustavo Barragan <dev@droni.co>",
-  "version": "1.5.11",
+  "version": "1.6.0",
   "private": false,
   "access": "public",
   "publishConfig": {
@@ -15,15 +15,14 @@
   "type": "module",
   "main": "dist/droni-kit.cjs",
   "module": "dist/droni-kit.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/droni-kit.es.js",
-      "require": "./dist/droni-kit.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/droni-kit.cjs"
     },
     "./dist/droni-kit.css": "./dist/droni-kit.css"
   },
-  "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",