@oneb/ui-vue 0.2.9 → 0.2.13

package/dist/form/form.d.ts

@@ -1,5 +1,17 @@
 import type { ExtractPropTypes, ComputedRef } from 'vue';
 export type ValidationType = Record<string, string[] | undefined>;
+export type FormInputEmits = {
+    'update:modelValue': [value: any];
+    'focus': [event: FocusEvent];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
+    'input': [event: Event];
+    'keydown': [event: KeyboardEvent];
+    'keyup': [event: KeyboardEvent];
+    'keypress': [event: KeyboardEvent];
+    'clear': [];
+    'toggle-password': [visible: boolean];
+};
 export declare const formProps: {
     id: {
         type: StringConstructor;
@@ -68,66 +80,82 @@ export declare const formLabelProps: {
 };
 export type FormLabelProps = ExtractPropTypes<typeof formLabelProps>;
 export declare const formInputProps: {
+    /** Unique identifier for the input element */
     id: {
         type: StringConstructor;
         required: boolean;
     };
+    /** Name attribute for form submission */
     name: {
         type: StringConstructor;
         required: boolean;
     };
+    /** Placeholder text displayed when input is empty */
     placeholder: {
         type: StringConstructor;
         default: string;
     };
+    /** Icon component to display at the start of the input */
     icon: {
         type: PropType<any>;
     };
+    /** Type of input field */
     type: {
-        type: PropType<"number" | "checkbox" | "text" | "select" | "password" | "radio" | "range" | "textarea">;
+        type: PropType<"number" | "checkbox" | "text" | "search" | "select" | "password" | "email" | "tel" | "url" | "radio" | "range" | "textarea" | "date" | "time" | "datetime-local" | "month" | "week" | "color">;
         default: string;
     };
+    /** Additional CSS classes to apply to the input element */
     inputClass: {
         required: boolean;
         type: PropType<string | string[]>;
     };
+    /** Current value of the input (v-model) */
     modelValue: {
         required: boolean;
         type: PropType<any>;
     };
+    /** Auto-focus the input when component mounts */
     autofocus: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Mark input as required (adds asterisk to label) */
     required: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Disable the input field */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Make the input read-only */
     readonly: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Show clear button when input has value */
     clearable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Use rounded styling (full rounded borders) */
     rounded: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Use large size styling */
     large: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Mark input as invalid (shows error styling) */
     invalid: {
         type: BooleanConstructor;
         required: boolean;
         default: boolean;
     };
+    /** Options array for select and radio inputs */
     options: {
         type: PropType<{
             key: string;
@@ -136,11 +164,82 @@ export declare const formInputProps: {
         required: boolean;
         default: any[];
     };
+    /** HTML autocomplete attribute value */
     autocomplete: {
         type: StringConstructor;
         required: boolean;
         default: string;
     };
+    /** Maximum length of text input */
+    maxlength: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    /** Minimum length of text input */
+    minlength: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    /** Minimum value for number/date inputs */
+    min: {
+        type: PropType<string | number>;
+        required: boolean;
+    };
+    /** Maximum value for number/date inputs */
+    max: {
+        type: PropType<string | number>;
+        required: boolean;
+    };
+    /** Step increment for number/range inputs */
+    step: {
+        type: PropType<string | number>;
+        required: boolean;
+    };
+    /** Validation pattern (regex) for text inputs */
+    pattern: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** Number of rows for textarea */
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Number of columns for textarea */
+    cols: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    /** Allow textarea to be resized */
+    resize: {
+        type: PropType<"none" | "vertical" | "both" | "horizontal">;
+        default: string;
+    };
+    /** Spellcheck attribute for text inputs */
+    spellcheck: {
+        type: BooleanConstructor;
+        required: boolean;
+    };
+    /** Input mode for mobile keyboards */
+    inputmode: {
+        type: PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal">;
+        required: boolean;
+    };
+    /** Tab index for keyboard navigation */
+    tabindex: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    /** Aria label for accessibility */
+    ariaLabel: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** Aria described by for accessibility */
+    ariaDescribedby: {
+        type: StringConstructor;
+        required: boolean;
+    };
 };
 export type FormInputProps = ExtractPropTypes<typeof formInputProps>;
 export declare const injectForm: () => any;

package/dist/form/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),S=require("../XMarkIcon-f94baa4c.cjs"),F={id:{type:String,required:!1},validation:{type:Object,required:!1}},$={id:{type:String,required:!1},label:{type:String,required:!1},name:{type:String,required:!1},required:{required:!1,type:Boolean,default:!1},hint:{type:String,required:!1,default:""},errors:{type:Array,required:!1}},N={name:{type:String,required:!1},errors:{type:Array,required:!1}},q={label:{type:String,required:!1}},O={id:{type:String,required:!1},name:{type:String,required:!1},placeholder:{type:String,default:""},icon:{type:[Function,Object]},type:{type:String,default:"text"},inputClass:{required:!1,type:[Array,String]},modelValue:{required:!1,type:[String,Number,Array,Boolean,Object,null]},autofocus:{type:Boolean,default:!1},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},large:{type:Boolean,default:!1},invalid:{type:Boolean,required:!1,default:!1},options:{type:Array,required:!1,default:[]},autocomplete:{type:String,required:!1,default:""}},h=()=>e.inject("BaseForm",()=>({formId:e.computed(()=>{}),validation:e.computed(()=>{})}),!0),k=()=>e.inject("BaseFormField",()=>({inputId:e.computed(()=>{}),inputName:e.computed(()=>{}),hasError:e.computed(()=>!1)}),!0),j=["id"],I=e.defineComponent({__name:"OneForm",props:F,emits:["submit"],setup(d,{emit:l}){const n=d,o=l;e.provide("BaseForm",{formId:e.computed(()=>n.id),validation:e.computed(()=>n.validation)});const a=()=>{o("submit")};return(t,c)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(a,["prevent"]),id:t.id,class:"space-y-3"},[e.renderSlot(t.$slots,"default")],40,j))}}),_=["for"],b=e.defineComponent({__name:"OneFormLabel",props:q,setup(d){const{inputId:l}=k();return(n,o)=>(e.openBlock(),e.createElementBlock("label",{for:e.unref(l),class:"text-sm font-medium text-primary-content select-none flex justify-between"},[e.createElementVNode("span",null,[e.renderSlot(n.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),e.renderSlot(n.$slots,"right")],8,_))}}),L={key:0,class:"text-danger-content text-xs space-y-1"},B=e.defineComponent({__name:"OneFormFeedback",props:N,setup(d){const l=d,{validation:n}=h(),{inputName:o}=k(),a=e.computed(()=>o.value==null&&l.name==null?l.errors??[]:n.value==null?l.errors??[]:(n.value??{})[l.name||o.value]??l.errors??[]);return(t,c)=>a.value.length>0?(e.openBlock(),e.createElementBlock("div",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,u=>(e.openBlock(),e.createElementBlock("div",{key:u},e.toDisplayString(u),1))),128))])):e.createCommentVNode("",!0)}});function M(d,l){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})])}function A(d,l){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"})])}const D=["id","disabled"],z=["selected"],P=["selected","value"],T=["name","id","value","placeholder","disabled","readonly"],X={key:2,class:"flex w-full space-x-3 items-center"},G=["type","name","id","disabled","readonly","checked"],H=["for"],J={key:3,class:"w-full space-y-1"},K=["name","id","value","disabled","readonly","checked"],Q=["for"],R={key:4,class:"relative"},U={class:"absolute p-2 px-3 rounded-md h-full flex items-center select-none pointer-events-none"},W=["type","name","id","value","placeholder","disabled","readonly","autocomplete"],g=e.defineComponent({__name:"OneFormInput",props:O,emits:["update:modelValue"],setup(d,{expose:l,emit:n}){const o=d,a=n,{inputId:t,inputName:c,hasError:u}=k(),i=e.ref(null),m=e.ref(!1);e.onMounted(()=>{o.autofocus&&i.value&&i.value.focus()});const E=e.computed(()=>o.modelValue!=null&&o.modelValue!==""),p=e.computed(()=>{if(o.id)return o.id;const r=(t==null?void 0:t.value)||"";return o.name?`${r}-${o.name}`:r||""}),V=()=>{a("update:modelValue","")},w=()=>{i.value&&i.value.focus()},C=e.computed(()=>{const r={"shadow-sm":o.type!=="range","border-danger-base":u.value||o.invalid,"pl-10":o.icon!=null,"pr-10":o.type==="password","rounded-full":o.rounded,"rounded-md":!o.rounded,"text-lg":o.large,"py-2.5":o.large,"py-2":!o.large};return o.inputClass!=null&&(typeof o.inputClass=="string"?r[o.inputClass]=!0:o.inputClass instanceof Array&&o.inputClass.forEach(y=>{r[y]=!0})),r}),f=r=>{o.type==="checkbox"?a("update:modelValue",r.target.checked):a("update:modelValue",r.target.value)};return l({focus:w}),(r,y)=>r.type==="select"?(e.openBlock(),e.createElementBlock("select",{key:0,id:p.value,ref_key:"inputElement",ref:i,class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(u)||r.invalid,"text-secondary-content":r.modelValue===""||r.modelValue==null,"rounded-full":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large}]),disabled:r.disabled},[r.placeholder?(e.openBlock(),e.createElementBlock("option",{key:0,selected:r.modelValue===""||r.modelValue==null,disabled:"",hidden:""},e.toDisplayString(r.placeholder),9,z)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,s=>(e.openBlock(),e.createElementBlock("option",{selected:s.key===r.modelValue,key:s.key,value:s.key},e.toDisplayString(s.value),9,P))),128))],10,D)):r.type==="textarea"?(e.openBlock(),e.createElementBlock("textarea",{key:1,name:r.name||e.unref(c),id:p.value,value:r.modelValue,onInput:f,rows:"3",class:e.normalizeClass(["border border-primary-stroke px-3 w-full placeholder-gray-400",{"border-danger-base":e.unref(u),"rounded-3xl":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large}]),placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,ref_key:"inputElement",ref:i},null,42,T)):r.type==="checkbox"?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("input",{type:r.type,name:r.name||e.unref(c),id:p.value,value:!0,onInput:f,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["rounded-md border border-primary-stroke px-2 py-2 shadow-sm",{"border-danger-base":e.unref(u)||r.invalid}]),checked:r.modelValue===!0,ref_key:"inputElement",ref:i},null,42,G),e.createElementVNode("label",{for:p.value,class:"text-primary-content select-none"},e.toDisplayString(r.placeholder),9,H)])):r.type==="radio"?(e.openBlock(),e.createElementBlock("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,(s,v)=>(e.openBlock(),e.createElementBlock("div",{key:s.key,class:"flex w-full space-x-3 items-center"},[e.createElementVNode("input",{type:"radio",name:r.name||e.unref(c),id:`${p.value}-${v}`,value:s.key,onInput:f,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm",{"border-danger-base":e.unref(u)||r.invalid}]),checked:s.key===r.modelValue,ref_for:!0,ref_key:"inputElement",ref:i},null,42,K),e.createElementVNode("label",{for:`${p.value}-${v}`,class:"text-primary-content select-none"},e.toDisplayString(s.value),9,Q)]))),128))])):(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",U,[r.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.icon),{key:0,class:"w-5 h-5 text-primary-content"})):e.createCommentVNode("",!0)]),e.createElementVNode("input",{type:m.value?"text":r.type,name:r.name||e.unref(c),id:p.value,value:r.modelValue,onInput:f,placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["border border-primary-stroke w-full px-3 placeholder-gray-400 disabled:bg-gray-50",C.value]),ref_key:"inputElement",ref:i,autocomplete:r.autocomplete},null,42,W),r.clearable&&E.value?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:V,class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[e.createVNode(e.unref(S.render),{class:"w-5 h-5 text-secondary-content hover:text-primary-base"})])):r.type==="password"?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:y[0]||(y[0]=s=>m.value=!m.value),class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[m.value?(e.openBlock(),e.createBlock(e.unref(A),{key:0,class:"w-5 h-5 text-primary-content hover:text-primary-base"})):(e.openBlock(),e.createBlock(e.unref(M),{key:1,class:"w-5 h-5 text-secondary-content hover:text-primary-base"}))])):e.createCommentVNode("",!0)]))}}),Y={class:"space-y-1"},Z={key:2,class:"text-xs text-secondary-content select-none"},x=e.defineComponent({__name:"OneFormField",props:$,setup(d){const l=d,{formId:n,validation:o}=h(),a=e.computed(()=>l.errors!=null&&l.errors.length>0?!0:l.name==null?!1:(o.value??{})[l.name]!=null);return e.provide("BaseFormField",{inputId:e.computed(()=>{const t=n.value||"form";if(l.id!=null)return`${t}-${l.id}`;if(l.name!=null)return`${t}-field-${l.name}`}),inputName:e.computed(()=>l.name),hasError:a}),(t,c)=>(e.openBlock(),e.createElementBlock("div",Y,[t.label?(e.openBlock(),e.createBlock(b,{key:0,label:t.label},{right:e.withCtx(()=>[e.renderSlot(t.$slots,"right")]),_:3},8,["label"])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},()=>[e.createVNode(g)]),a.value?(e.openBlock(),e.createBlock(B,{key:1,errors:t.errors},null,8,["errors"])):t.hint.length>0?(e.openBlock(),e.createElementBlock("p",Z,e.toDisplayString(t.hint),1)):e.createCommentVNode("",!0)]))}});exports.OneForm=I;exports.OneFormFeedback=B;exports.OneFormField=x;exports.OneFormInput=g;exports.OneFormLabel=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),j=require("../XMarkIcon-f94baa4c.cjs"),I={id:{type:String,required:!1},validation:{type:Object,required:!1}},L={id:{type:String,required:!1},label:{type:String,required:!1},name:{type:String,required:!1},required:{required:!1,type:Boolean,default:!1},hint:{type:String,required:!1,default:""},errors:{type:Array,required:!1}},D={name:{type:String,required:!1},errors:{type:Array,required:!1}},A={label:{type:String,required:!1}},M={id:{type:String,required:!1},name:{type:String,required:!1},placeholder:{type:String,default:""},icon:{type:[Function,Object]},type:{type:String,default:"text"},inputClass:{required:!1,type:[Array,String]},modelValue:{required:!1,type:[String,Number,Array,Boolean,Object,null]},autofocus:{type:Boolean,default:!1},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},large:{type:Boolean,default:!1},invalid:{type:Boolean,required:!1,default:!1},options:{type:Array,required:!1,default:[]},autocomplete:{type:String,required:!1,default:""},maxlength:{type:Number,required:!1},minlength:{type:Number,required:!1},min:{type:[Number,String],required:!1},max:{type:[Number,String],required:!1},step:{type:[Number,String],required:!1},pattern:{type:String,required:!1},rows:{type:Number,default:3},cols:{type:Number,required:!1},resize:{type:String,default:"vertical"},spellcheck:{type:Boolean,required:!1},inputmode:{type:String,required:!1},tabindex:{type:Number,required:!1},ariaLabel:{type:String,required:!1},ariaDescribedby:{type:String,required:!1}},V=()=>e.inject("BaseForm",()=>({formId:e.computed(()=>{}),validation:e.computed(()=>{})}),!0),w=()=>e.inject("BaseFormField",()=>({inputId:e.computed(()=>{}),inputName:e.computed(()=>{}),hasError:e.computed(()=>!1)}),!0),P=["id"],K=e.defineComponent({__name:"OneForm",props:I,emits:["submit"],setup(i,{emit:n}){const a=i,l=n;e.provide("BaseForm",{formId:e.computed(()=>a.id),validation:e.computed(()=>a.validation)});const t=()=>{l("submit")};return(o,c)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(t,["prevent"]),id:o.id,class:"space-y-3"},[e.renderSlot(o.$slots,"default")],40,P))}}),T=["for"],q=e.defineComponent({__name:"OneFormLabel",props:A,setup(i){const{inputId:n}=w();return(a,l)=>(e.openBlock(),e.createElementBlock("label",{for:e.unref(n),class:"text-sm font-medium text-primary-content select-none flex justify-between"},[e.createElementVNode("span",null,[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(a.label),1)])]),e.renderSlot(a.$slots,"right")],8,T))}}),X={key:0,class:"text-danger-content text-xs space-y-1"},C=e.defineComponent({__name:"OneFormFeedback",props:D,setup(i){const n=i,{validation:a}=V(),{inputName:l}=w(),t=e.computed(()=>l.value==null&&n.name==null?n.errors??[]:a.value==null?n.errors??[]:(a.value??{})[n.name||l.value]??n.errors??[]);return(o,c)=>t.value.length>0?(e.openBlock(),e.createElementBlock("div",X,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,u=>(e.openBlock(),e.createElementBlock("div",{key:u},e.toDisplayString(u),1))),128))])):e.createCommentVNode("",!0)}});function G(i,n){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})])}function H(i,n){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"})])}const J=["id","disabled","tabindex"],Q=["selected"],R=["selected","value"],U=["name","id","value","rows","cols","maxlength","minlength","spellcheck","placeholder","disabled","readonly","tabindex","aria-label","aria-describedby"],W={key:2,class:"flex w-full space-x-3 items-center"},Y=["type","name","id","disabled","readonly","tabindex","aria-label","aria-describedby","checked"],Z=["for"],x={key:3,class:"w-full space-y-1"},_=["name","id","value","disabled","readonly","tabindex","checked"],ee=["for"],re={key:4,class:"relative"},le={class:"absolute p-2 px-3 rounded-md h-full flex items-center select-none pointer-events-none"},ne=["type","name","id","value","placeholder","disabled","readonly","maxlength","minlength","min","max","step","pattern","spellcheck","inputmode","tabindex","autocomplete","aria-label","aria-describedby"],N=e.defineComponent({__name:"OneFormInput",props:M,emits:["update:modelValue","focus","blur","change","input","keydown","keyup","keypress","clear","toggle-password"],setup(i,{expose:n,emit:a}){const l=i,t=a,{inputId:o,inputName:c,hasError:u}=w(),s=e.ref(null),m=e.ref(!1);e.onMounted(()=>{l.autofocus&&s.value&&s.value.focus()});const F=e.computed(()=>l.modelValue!=null&&l.modelValue!==""),p=e.computed(()=>{if(l.id)return l.id;const r=(o==null?void 0:o.value)||"";return l.name?`${r}-${l.name}`:r||""}),$=()=>{t("update:modelValue",""),t("clear"),E()},z=()=>{m.value=!m.value,t("toggle-password",m.value)},E=()=>{if(s.value){const r=Array.isArray(s.value)?s.value[0]:s.value;r==null||r.focus()}},O=e.computed(()=>{const r={"shadow-sm":l.type!=="range","border-danger-base":u.value||l.invalid,"pl-10":l.icon!=null,"pr-10":l.type==="password","rounded-full":l.rounded,"rounded-md":!l.rounded,"text-lg":l.large,"py-2.5":l.large,"py-2":!l.large};return l.inputClass!=null&&(typeof l.inputClass=="string"?r[l.inputClass]=!0:l.inputClass instanceof Array&&l.inputClass.forEach(h=>{r[h]=!0})),r}),y=r=>{const h=r.target;if(l.type==="checkbox"){const d=h.checked;t("update:modelValue",d),t("input",r)}else t("update:modelValue",h.value),t("input",r)},f=r=>t("focus",r),b=r=>t("blur",r),k=r=>t("change",r),g=r=>t("keydown",r),v=r=>t("keyup",r),B=r=>t("keypress",r);return n({focus:E}),(r,h)=>r.type==="select"?(e.openBlock(),e.createElementBlock("select",{key:0,id:p.value,ref_key:"inputElement",ref:s,class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(u)||r.invalid,"text-secondary-content":r.modelValue===""||r.modelValue==null,"rounded-full":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large}]),disabled:r.disabled,tabindex:r.tabindex,onInput:y,onFocus:f,onBlur:b,onChange:k,onKeydown:g,onKeyup:v,onKeypress:B},[r.placeholder?(e.openBlock(),e.createElementBlock("option",{key:0,selected:r.modelValue===""||r.modelValue==null,disabled:"",hidden:""},e.toDisplayString(r.placeholder),9,Q)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,d=>(e.openBlock(),e.createElementBlock("option",{selected:d.key===r.modelValue,key:d.key,value:d.key},e.toDisplayString(d.value),9,R))),128))],42,J)):r.type==="textarea"?(e.openBlock(),e.createElementBlock("textarea",{key:1,name:r.name||e.unref(c),id:p.value,value:r.modelValue,rows:r.rows,cols:r.cols,maxlength:r.maxlength,minlength:r.minlength,spellcheck:r.spellcheck,placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,tabindex:r.tabindex,"aria-label":r.ariaLabel,"aria-describedby":r.ariaDescribedby,onInput:y,onFocus:f,onBlur:b,onChange:k,onKeydown:g,onKeyup:v,onKeypress:B,class:e.normalizeClass(["border border-primary-stroke px-3 w-full placeholder-gray-400",{"border-danger-base":e.unref(u),"rounded-3xl":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large,"resize-none":r.resize==="none","resize-both":r.resize==="both","resize-x":r.resize==="horizontal","resize-y":r.resize==="vertical"}]),ref_key:"inputElement",ref:s},null,42,U)):r.type==="checkbox"?(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("input",{type:r.type,name:r.name||e.unref(c),id:p.value,value:!0,disabled:r.disabled,readonly:r.readonly,tabindex:r.tabindex,"aria-label":r.ariaLabel,"aria-describedby":r.ariaDescribedby,checked:r.modelValue===!0,onInput:y,onFocus:f,onBlur:b,onChange:k,class:e.normalizeClass(["rounded-md border border-primary-stroke px-2 py-2 shadow-sm",{"border-danger-base":e.unref(u)||r.invalid}]),ref_key:"inputElement",ref:s},null,42,Y),e.createElementVNode("label",{for:p.value,class:"text-primary-content select-none"},e.toDisplayString(r.placeholder),9,Z)])):r.type==="radio"?(e.openBlock(),e.createElementBlock("div",x,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,(d,S)=>(e.openBlock(),e.createElementBlock("div",{key:d.key,class:"flex w-full space-x-3 items-center"},[e.createElementVNode("input",{type:"radio",name:r.name||e.unref(c),id:`${p.value}-${S}`,value:d.key,disabled:r.disabled,readonly:r.readonly,tabindex:r.tabindex,checked:d.key===r.modelValue,onInput:y,onFocus:f,onBlur:b,onChange:k,class:e.normalizeClass(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm",{"border-danger-base":e.unref(u)||r.invalid}]),ref_for:!0,ref_key:"inputElement",ref:s},null,42,_),e.createElementVNode("label",{for:`${p.value}-${S}`,class:"text-primary-content select-none"},e.toDisplayString(d.value),9,ee)]))),128))])):(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("div",le,[r.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.icon),{key:0,class:"w-5 h-5 text-primary-content"})):e.createCommentVNode("",!0)]),e.createElementVNode("input",{type:m.value?"text":r.type,name:r.name||e.unref(c),id:p.value,value:r.modelValue,placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,maxlength:r.maxlength,minlength:r.minlength,min:r.min,max:r.max,step:r.step,pattern:r.pattern,spellcheck:r.spellcheck,inputmode:r.inputmode,tabindex:r.tabindex,autocomplete:r.autocomplete,"aria-label":r.ariaLabel,"aria-describedby":r.ariaDescribedby,onInput:y,onFocus:f,onBlur:b,onChange:k,onKeydown:g,onKeyup:v,onKeypress:B,class:e.normalizeClass(["border border-primary-stroke w-full px-3 placeholder-gray-400 disabled:bg-gray-50",O.value]),ref_key:"inputElement",ref:s},null,42,ne),r.clearable&&F.value?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:$,class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[e.createVNode(e.unref(j.render),{class:"w-5 h-5 text-secondary-content hover:text-primary-base"})])):r.type==="password"?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:z,class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[m.value?(e.openBlock(),e.createBlock(e.unref(H),{key:0,class:"w-5 h-5 text-primary-content hover:text-primary-base"})):(e.openBlock(),e.createBlock(e.unref(G),{key:1,class:"w-5 h-5 text-secondary-content hover:text-primary-base"}))])):e.createCommentVNode("",!0)]))}}),te={class:"space-y-1"},oe={key:2,class:"text-xs text-secondary-content select-none"},ae=e.defineComponent({__name:"OneFormField",props:L,setup(i){const n=i,{formId:a,validation:l}=V(),t=e.computed(()=>n.errors!=null&&n.errors.length>0?!0:n.name==null?!1:(l.value??{})[n.name]!=null);return e.provide("BaseFormField",{inputId:e.computed(()=>{const o=a.value||"form";if(n.id!=null)return`${o}-${n.id}`;if(n.name!=null)return`${o}-field-${n.name}`}),inputName:e.computed(()=>n.name),hasError:t}),(o,c)=>(e.openBlock(),e.createElementBlock("div",te,[o.label?(e.openBlock(),e.createBlock(q,{key:0,label:o.label},{right:e.withCtx(()=>[e.renderSlot(o.$slots,"right")]),_:3},8,["label"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},()=>[e.createVNode(N)]),t.value?(e.openBlock(),e.createBlock(C,{key:1,errors:o.errors},null,8,["errors"])):o.hint.length>0?(e.openBlock(),e.createElementBlock("p",oe,e.toDisplayString(o.hint),1)):e.createCommentVNode("",!0)]))}});exports.OneForm=K;exports.OneFormFeedback=C;exports.OneFormField=ae;exports.OneFormInput=N;exports.OneFormLabel=q;

package/dist/form/index.d.ts

@@ -3,4 +3,4 @@ export { default as OneFormField } from './OneFormField.vue';
 export { default as OneFormFeedback } from './OneFormFeedback.vue';
 export { default as OneFormLabel } from './OneFormLabel.vue';
 export { default as OneFormInput } from './OneFormInput.vue';
-export type { FormProps, FormProvide, FormFieldProps, FormFieldProvide, FormFeedbackProps, FormLabelProps, FormInputProps } from './form';
+export type { FormProps, FormProvide, FormFieldProps, FormFieldProvide, FormFeedbackProps, FormLabelProps, FormInputProps, FormInputEmits } from './form';

package/dist/form/index.js

@@ -1,6 +1,6 @@
-import { inject as I, computed as n, defineComponent as F, provide as _, openBlock as l, createElementBlock as t, withModifiers as z, renderSlot as w, unref as d, createElementVNode as m, createTextVNode as D, toDisplayString as v, Fragment as C, renderList as B, createCommentVNode as b, ref as O, onMounted as T, normalizeClass as k, createBlock as g, resolveDynamicComponent as G, createVNode as j, withCtx as H } from "vue";
-import { r as J } from "../XMarkIcon-51ef0691.js";
-const K = {
+import { inject as P, computed as s, defineComponent as V, provide as D, openBlock as a, createElementBlock as t, withModifiers as R, renderSlot as C, unref as i, createElementVNode as c, createTextVNode as U, toDisplayString as h, Fragment as O, renderList as I, createCommentVNode as v, ref as M, onMounted as W, normalizeClass as $, createBlock as B, resolveDynamicComponent as X, createVNode as K, withCtx as Y } from "vue";
+import { r as Z } from "../XMarkIcon-51ef0691.js";
+const x = {
   id: {
     type: String,
     required: !1
@@ -9,7 +9,7 @@ const K = {
     type: Object,
     required: !1
   }
-}, Q = {
+}, _ = {
   id: {
     type: String,
     required: !1
@@ -36,7 +36,7 @@ const K = {
     type: Array,
     required: !1
   }
-}, R = {
+}, ee = {
   name: {
     type: String,
     required: !1
@@ -45,154 +45,241 @@ const K = {
     type: Array,
     required: !1
   }
-}, U = {
+}, re = {
   label: {
     type: String,
     required: !1
   }
-}, W = {
+}, ae = {
+  /** Unique identifier for the input element */
   id: {
     type: String,
     required: !1
   },
+  /** Name attribute for form submission */
   name: {
     type: String,
     required: !1
   },
+  /** Placeholder text displayed when input is empty */
   placeholder: {
     type: String,
     default: ""
   },
+  /** Icon component to display at the start of the input */
   icon: {
     type: [Function, Object]
   },
+  /** Type of input field */
   type: {
     type: String,
     default: "text"
   },
+  /** Additional CSS classes to apply to the input element */
   inputClass: {
     required: !1,
     type: [Array, String]
   },
+  /** Current value of the input (v-model) */
   modelValue: {
     required: !1,
     type: [String, Number, Array, Boolean, Object, null]
   },
+  /** Auto-focus the input when component mounts */
   autofocus: {
     type: Boolean,
     default: !1
   },
+  /** Mark input as required (adds asterisk to label) */
   required: {
     type: Boolean,
     default: !1
   },
+  /** Disable the input field */
   disabled: {
     type: Boolean,
     default: !1
   },
+  /** Make the input read-only */
   readonly: {
     type: Boolean,
     default: !1
   },
+  /** Show clear button when input has value */
   clearable: {
     type: Boolean,
     default: !1
   },
+  /** Use rounded styling (full rounded borders) */
   rounded: {
     type: Boolean,
     default: !1
   },
+  /** Use large size styling */
   large: {
     type: Boolean,
     default: !1
   },
+  /** Mark input as invalid (shows error styling) */
   invalid: {
     type: Boolean,
     required: !1,
     default: !1
   },
+  /** Options array for select and radio inputs */
   options: {
     type: Array,
     required: !1,
     default: []
   },
+  /** HTML autocomplete attribute value */
   autocomplete: {
     type: String,
     required: !1,
     default: ""
+  },
+  /** Maximum length of text input */
+  maxlength: {
+    type: Number,
+    required: !1
+  },
+  /** Minimum length of text input */
+  minlength: {
+    type: Number,
+    required: !1
+  },
+  /** Minimum value for number/date inputs */
+  min: {
+    type: [Number, String],
+    required: !1
+  },
+  /** Maximum value for number/date inputs */
+  max: {
+    type: [Number, String],
+    required: !1
+  },
+  /** Step increment for number/range inputs */
+  step: {
+    type: [Number, String],
+    required: !1
+  },
+  /** Validation pattern (regex) for text inputs */
+  pattern: {
+    type: String,
+    required: !1
+  },
+  /** Number of rows for textarea */
+  rows: {
+    type: Number,
+    default: 3
+  },
+  /** Number of columns for textarea */
+  cols: {
+    type: Number,
+    required: !1
+  },
+  /** Allow textarea to be resized */
+  resize: {
+    type: String,
+    default: "vertical"
+  },
+  /** Spellcheck attribute for text inputs */
+  spellcheck: {
+    type: Boolean,
+    required: !1
+  },
+  /** Input mode for mobile keyboards */
+  inputmode: {
+    type: String,
+    required: !1
+  },
+  /** Tab index for keyboard navigation */
+  tabindex: {
+    type: Number,
+    required: !1
+  },
+  /** Aria label for accessibility */
+  ariaLabel: {
+    type: String,
+    required: !1
+  },
+  /** Aria described by for accessibility */
+  ariaDescribedby: {
+    type: String,
+    required: !1
   }
-}, N = () => I(
+}, T = () => P(
   "BaseForm",
   () => ({
-    formId: n(() => {
+    formId: s(() => {
     }),
-    validation: n(() => {
+    validation: s(() => {
     })
   }),
   !0
-), S = () => I(
+), j = () => P(
   "BaseFormField",
   () => ({
-    inputId: n(() => {
+    inputId: s(() => {
     }),
-    inputName: n(() => {
+    inputName: s(() => {
     }),
-    hasError: n(() => !1)
+    hasError: s(() => !1)
   }),
   !0
-), X = ["id"], we = /* @__PURE__ */ F({
+), le = ["id"], Ve = /* @__PURE__ */ V({
   __name: "OneForm",
-  props: K,
+  props: x,
   emits: ["submit"],
-  setup(u, { emit: a }) {
-    const s = u, r = a;
-    _("BaseForm", {
-      formId: n(() => s.id),
-      validation: n(() => s.validation)
+  setup(m, { emit: l }) {
+    const d = m, r = l;
+    D("BaseForm", {
+      formId: s(() => d.id),
+      validation: s(() => d.validation)
     });
-    const i = () => {
+    const n = () => {
       r("submit");
     };
-    return (o, y) => (l(), t("form", {
-      onSubmit: z(i, ["prevent"]),
+    return (o, f) => (a(), t("form", {
+      onSubmit: R(n, ["prevent"]),
       id: o.id,
       class: "space-y-3"
     }, [
-      w(o.$slots, "default")
-    ], 40, X));
+      C(o.$slots, "default")
+    ], 40, le));
   }
-}), Y = ["for"], Z = /* @__PURE__ */ F({
+}), ne = ["for"], te = /* @__PURE__ */ V({
   __name: "OneFormLabel",
-  props: U,
-  setup(u) {
-    const { inputId: a } = S();
-    return (s, r) => (l(), t("label", {
-      for: d(a),
+  props: re,
+  setup(m) {
+    const { inputId: l } = j();
+    return (d, r) => (a(), t("label", {
+      for: i(l),
       class: "text-sm font-medium text-primary-content select-none flex justify-between"
     }, [
-      m("span", null, [
-        w(s.$slots, "default", {}, () => [
-          D(v(s.label), 1)
+      c("span", null, [
+        C(d.$slots, "default", {}, () => [
+          U(h(d.label), 1)
         ])
       ]),
-      w(s.$slots, "right")
-    ], 8, Y));
+      C(d.$slots, "right")
+    ], 8, ne));
   }
-}), x = {
+}), oe = {
   key: 0,
   class: "text-danger-content text-xs space-y-1"
-}, ee = /* @__PURE__ */ F({
+}, se = /* @__PURE__ */ V({
   __name: "OneFormFeedback",
-  props: R,
-  setup(u) {
-    const a = u, { validation: s } = N(), { inputName: r } = S(), i = n(() => r.value == null && a.name == null ? a.errors ?? [] : s.value == null ? a.errors ?? [] : (s.value ?? {})[a.name || r.value] ?? a.errors ?? []);
-    return (o, y) => i.value.length > 0 ? (l(), t("div", x, [
-      (l(!0), t(C, null, B(i.value, (f) => (l(), t("div", { key: f }, v(f), 1))), 128))
-    ])) : b("", !0);
+  props: ee,
+  setup(m) {
+    const l = m, { validation: d } = T(), { inputName: r } = j(), n = s(() => r.value == null && l.name == null ? l.errors ?? [] : d.value == null ? l.errors ?? [] : (d.value ?? {})[l.name || r.value] ?? l.errors ?? []);
+    return (o, f) => n.value.length > 0 ? (a(), t("div", oe, [
+      (a(!0), t(O, null, I(n.value, (y) => (a(), t("div", { key: y }, h(y), 1))), 128))
+    ])) : v("", !0);
   }
 });
-function re(u, a) {
-  return l(), t("svg", {
+function de(m, l) {
+  return a(), t("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -200,20 +287,20 @@ function re(u, a) {
     stroke: "currentColor",
     "aria-hidden": "true"
   }, [
-    m("path", {
+    c("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
     }),
-    m("path", {
+    c("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
     })
   ]);
 }
-function le(u, a) {
-  return l(), t("svg", {
+function ie(m, l) {
+  return a(), t("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -221,44 +308,49 @@ function le(u, a) {
     stroke: "currentColor",
     "aria-hidden": "true"
   }, [
-    m("path", {
+    c("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
     })
   ]);
 }
-const ae = ["id", "disabled"], te = ["selected"], oe = ["selected", "value"], ne = ["name", "id", "value", "placeholder", "disabled", "readonly"], se = {
+const ue = ["id", "disabled", "tabindex"], pe = ["selected"], me = ["selected", "value"], ce = ["name", "id", "value", "rows", "cols", "maxlength", "minlength", "spellcheck", "placeholder", "disabled", "readonly", "tabindex", "aria-label", "aria-describedby"], ye = {
   key: 2,
   class: "flex w-full space-x-3 items-center"
-}, de = ["type", "name", "id", "disabled", "readonly", "checked"], ie = ["for"], ue = {
+}, fe = ["type", "name", "id", "disabled", "readonly", "tabindex", "aria-label", "aria-describedby", "checked"], be = ["for"], he = {
   key: 3,
   class: "w-full space-y-1"
-}, pe = ["name", "id", "value", "disabled", "readonly", "checked"], me = ["for"], ce = {
+}, ve = ["name", "id", "value", "disabled", "readonly", "tabindex", "checked"], ge = ["for"], ke = {
   key: 4,
   class: "relative"
-}, fe = { class: "absolute p-2 px-3 rounded-md h-full flex items-center select-none pointer-events-none" }, ye = ["type", "name", "id", "value", "placeholder", "disabled", "readonly", "autocomplete"], he = /* @__PURE__ */ F({
+}, we = { class: "absolute p-2 px-3 rounded-md h-full flex items-center select-none pointer-events-none" }, qe = ["type", "name", "id", "value", "placeholder", "disabled", "readonly", "maxlength", "minlength", "min", "max", "step", "pattern", "spellcheck", "inputmode", "tabindex", "autocomplete", "aria-label", "aria-describedby"], Fe = /* @__PURE__ */ V({
   __name: "OneFormInput",
-  props: W,
-  emits: ["update:modelValue"],
-  setup(u, { expose: a, emit: s }) {
-    const r = u, i = s, { inputId: o, inputName: y, hasError: f } = S(), c = O(null), $ = O(!1);
-    T(() => {
-      r.autofocus && c.value && c.value.focus();
+  props: ae,
+  emits: ["update:modelValue", "focus", "blur", "change", "input", "keydown", "keyup", "keypress", "clear", "toggle-password"],
+  setup(m, { expose: l, emit: d }) {
+    const r = m, n = d, { inputId: o, inputName: f, hasError: y } = j(), u = M(null), g = M(!1);
+    W(() => {
+      r.autofocus && u.value && u.value.focus();
     });
-    const A = n(() => r.modelValue != null && r.modelValue !== ""), h = n(() => {
+    const G = s(() => r.modelValue != null && r.modelValue !== ""), b = s(() => {
       if (r.id)
         return r.id;
       const e = (o == null ? void 0 : o.value) || "";
       return r.name ? `${e}-${r.name}` : e || "";
-    }), L = () => {
-      i("update:modelValue", "");
-    }, M = () => {
-      c.value && c.value.focus();
-    }, P = n(() => {
+    }), H = () => {
+      n("update:modelValue", ""), n("clear"), L();
+    }, J = () => {
+      g.value = !g.value, n("toggle-password", g.value);
+    }, L = () => {
+      if (u.value) {
+        const e = Array.isArray(u.value) ? u.value[0] : u.value;
+        e == null || e.focus();
+      }
+    }, Q = s(() => {
       const e = {
         "shadow-sm": r.type !== "range",
-        "border-danger-base": f.value || r.invalid,
+        "border-danger-base": y.value || r.invalid,
         "pl-10": r.icon != null,
         "pr-10": r.type === "password",
         "rounded-full": r.rounded,
@@ -267,21 +359,26 @@ const ae = ["id", "disabled"], te = ["selected"], oe = ["selected", "value"], ne
         "py-2.5": r.large,
         "py-2": !r.large
       };
-      return r.inputClass != null && (typeof r.inputClass == "string" ? e[r.inputClass] = !0 : r.inputClass instanceof Array && r.inputClass.forEach((q) => {
-        e[q] = !0;
+      return r.inputClass != null && (typeof r.inputClass == "string" ? e[r.inputClass] = !0 : r.inputClass instanceof Array && r.inputClass.forEach((S) => {
+        e[S] = !0;
       })), e;
-    }), V = (e) => {
-      r.type === "checkbox" ? i("update:modelValue", e.target.checked) : i("update:modelValue", e.target.value);
-    };
-    return a({
-      focus: M
-    }), (e, q) => e.type === "select" ? (l(), t("select", {
+    }), k = (e) => {
+      const S = e.target;
+      if (r.type === "checkbox") {
+        const p = S.checked;
+        n("update:modelValue", p), n("input", e);
+      } else
+        n("update:modelValue", S.value), n("input", e);
+    }, w = (e) => n("focus", e), q = (e) => n("blur", e), F = (e) => n("change", e), N = (e) => n("keydown", e), z = (e) => n("keyup", e), E = (e) => n("keypress", e);
+    return l({
+      focus: L
+    }), (e, S) => e.type === "select" ? (a(), t("select", {
       key: 0,
-      id: h.value,
+      id: b.value,
       ref_key: "inputElement",
-      ref: c,
-      class: k(["border border-primary-stroke px-3 w-full", {
-        "border-danger-base": d(f) || e.invalid,
+      ref: u,
+      class: $(["border border-primary-stroke px-3 w-full", {
+        "border-danger-base": i(y) || e.invalid,
         "text-secondary-content": e.modelValue === "" || e.modelValue == null,
         "rounded-full": e.rounded,
         "rounded-md": !e.rounded,
@@ -289,169 +386,221 @@ const ae = ["id", "disabled"], te = ["selected"], oe = ["selected", "value"], ne
         "py-2.5": e.large,
         "py-2": !e.large
       }]),
-      disabled: e.disabled
+      disabled: e.disabled,
+      tabindex: e.tabindex,
+      onInput: k,
+      onFocus: w,
+      onBlur: q,
+      onChange: F,
+      onKeydown: N,
+      onKeyup: z,
+      onKeypress: E
     }, [
-      e.placeholder ? (l(), t("option", {
+      e.placeholder ? (a(), t("option", {
         key: 0,
         selected: e.modelValue === "" || e.modelValue == null,
         disabled: "",
         hidden: ""
-      }, v(e.placeholder), 9, te)) : b("", !0),
-      (l(!0), t(C, null, B(e.options, (p) => (l(), t("option", {
+      }, h(e.placeholder), 9, pe)) : v("", !0),
+      (a(!0), t(O, null, I(e.options, (p) => (a(), t("option", {
         selected: p.key === e.modelValue,
         key: p.key,
         value: p.key
-      }, v(p.value), 9, oe))), 128))
-    ], 10, ae)) : e.type === "textarea" ? (l(), t("textarea", {
+      }, h(p.value), 9, me))), 128))
+    ], 42, ue)) : e.type === "textarea" ? (a(), t("textarea", {
       key: 1,
-      name: e.name || d(y),
-      id: h.value,
+      name: e.name || i(f),
+      id: b.value,
       value: e.modelValue,
-      onInput: V,
-      rows: "3",
-      class: k(["border border-primary-stroke px-3 w-full placeholder-gray-400", {
-        "border-danger-base": d(f),
+      rows: e.rows,
+      cols: e.cols,
+      maxlength: e.maxlength,
+      minlength: e.minlength,
+      spellcheck: e.spellcheck,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      readonly: e.readonly,
+      tabindex: e.tabindex,
+      "aria-label": e.ariaLabel,
+      "aria-describedby": e.ariaDescribedby,
+      onInput: k,
+      onFocus: w,
+      onBlur: q,
+      onChange: F,
+      onKeydown: N,
+      onKeyup: z,
+      onKeypress: E,
+      class: $(["border border-primary-stroke px-3 w-full placeholder-gray-400", {
+        "border-danger-base": i(y),
         "rounded-3xl": e.rounded,
         "rounded-md": !e.rounded,
         "text-lg": e.large,
         "py-2.5": e.large,
-        "py-2": !e.large
+        "py-2": !e.large,
+        "resize-none": e.resize === "none",
+        "resize-both": e.resize === "both",
+        "resize-x": e.resize === "horizontal",
+        "resize-y": e.resize === "vertical"
       }]),
-      placeholder: e.placeholder,
-      disabled: e.disabled,
-      readonly: e.readonly,
       ref_key: "inputElement",
-      ref: c
-    }, null, 42, ne)) : e.type === "checkbox" ? (l(), t("div", se, [
-      m("input", {
+      ref: u
+    }, null, 42, ce)) : e.type === "checkbox" ? (a(), t("div", ye, [
+      c("input", {
         type: e.type,
-        name: e.name || d(y),
-        id: h.value,
+        name: e.name || i(f),
+        id: b.value,
         value: !0,
-        onInput: V,
         disabled: e.disabled,
         readonly: e.readonly,
-        class: k(["rounded-md border border-primary-stroke px-2 py-2 shadow-sm", {
-          "border-danger-base": d(f) || e.invalid
-        }]),
+        tabindex: e.tabindex,
+        "aria-label": e.ariaLabel,
+        "aria-describedby": e.ariaDescribedby,
         checked: e.modelValue === !0,
+        onInput: k,
+        onFocus: w,
+        onBlur: q,
+        onChange: F,
+        class: $(["rounded-md border border-primary-stroke px-2 py-2 shadow-sm", {
+          "border-danger-base": i(y) || e.invalid
+        }]),
         ref_key: "inputElement",
-        ref: c
-      }, null, 42, de),
-      m("label", {
-        for: h.value,
+        ref: u
+      }, null, 42, fe),
+      c("label", {
+        for: b.value,
         class: "text-primary-content select-none"
-      }, v(e.placeholder), 9, ie)
-    ])) : e.type === "radio" ? (l(), t("div", ue, [
-      (l(!0), t(C, null, B(e.options, (p, E) => (l(), t("div", {
+      }, h(e.placeholder), 9, be)
+    ])) : e.type === "radio" ? (a(), t("div", he, [
+      (a(!0), t(O, null, I(e.options, (p, A) => (a(), t("div", {
         key: p.key,
         class: "flex w-full space-x-3 items-center"
       }, [
-        m("input", {
+        c("input", {
           type: "radio",
-          name: e.name || d(y),
-          id: `${h.value}-${E}`,
+          name: e.name || i(f),
+          id: `${b.value}-${A}`,
           value: p.key,
-          onInput: V,
           disabled: e.disabled,
           readonly: e.readonly,
-          class: k(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm", {
-            "border-danger-base": d(f) || e.invalid
-          }]),
+          tabindex: e.tabindex,
           checked: p.key === e.modelValue,
+          onInput: k,
+          onFocus: w,
+          onBlur: q,
+          onChange: F,
+          class: $(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm", {
+            "border-danger-base": i(y) || e.invalid
+          }]),
           ref_for: !0,
           ref_key: "inputElement",
-          ref: c
-        }, null, 42, pe),
-        m("label", {
-          for: `${h.value}-${E}`,
+          ref: u
+        }, null, 42, ve),
+        c("label", {
+          for: `${b.value}-${A}`,
           class: "text-primary-content select-none"
-        }, v(p.value), 9, me)
+        }, h(p.value), 9, ge)
       ]))), 128))
-    ])) : (l(), t("div", ce, [
-      m("div", fe, [
-        e.icon ? (l(), g(G(e.icon), {
+    ])) : (a(), t("div", ke, [
+      c("div", we, [
+        e.icon ? (a(), B(X(e.icon), {
           key: 0,
           class: "w-5 h-5 text-primary-content"
-        })) : b("", !0)
+        })) : v("", !0)
       ]),
-      m("input", {
-        type: $.value ? "text" : e.type,
-        name: e.name || d(y),
-        id: h.value,
+      c("input", {
+        type: g.value ? "text" : e.type,
+        name: e.name || i(f),
+        id: b.value,
         value: e.modelValue,
-        onInput: V,
         placeholder: e.placeholder,
         disabled: e.disabled,
         readonly: e.readonly,
-        class: k(["border border-primary-stroke w-full px-3 placeholder-gray-400 disabled:bg-gray-50", P.value]),
+        maxlength: e.maxlength,
+        minlength: e.minlength,
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        pattern: e.pattern,
+        spellcheck: e.spellcheck,
+        inputmode: e.inputmode,
+        tabindex: e.tabindex,
+        autocomplete: e.autocomplete,
+        "aria-label": e.ariaLabel,
+        "aria-describedby": e.ariaDescribedby,
+        onInput: k,
+        onFocus: w,
+        onBlur: q,
+        onChange: F,
+        onKeydown: N,
+        onKeyup: z,
+        onKeypress: E,
+        class: $(["border border-primary-stroke w-full px-3 placeholder-gray-400 disabled:bg-gray-50", Q.value]),
         ref_key: "inputElement",
-        ref: c,
-        autocomplete: e.autocomplete
-      }, null, 42, ye),
-      e.clearable && A.value ? (l(), t("div", {
+        ref: u
+      }, null, 42, qe),
+      e.clearable && G.value ? (a(), t("div", {
         key: 0,
-        onClick: L,
+        onClick: H,
         class: "absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"
       }, [
-        j(d(J), { class: "w-5 h-5 text-secondary-content hover:text-primary-base" })
-      ])) : e.type === "password" ? (l(), t("div", {
+        K(i(Z), { class: "w-5 h-5 text-secondary-content hover:text-primary-base" })
+      ])) : e.type === "password" ? (a(), t("div", {
         key: 1,
-        onClick: q[0] || (q[0] = (p) => $.value = !$.value),
+        onClick: J,
         class: "absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"
       }, [
-        $.value ? (l(), g(d(le), {
+        g.value ? (a(), B(i(ie), {
           key: 0,
           class: "w-5 h-5 text-primary-content hover:text-primary-base"
-        })) : (l(), g(d(re), {
+        })) : (a(), B(i(de), {
           key: 1,
           class: "w-5 h-5 text-secondary-content hover:text-primary-base"
         }))
-      ])) : b("", !0)
+      ])) : v("", !0)
     ]));
   }
-}), ve = { class: "space-y-1" }, be = {
+}), Se = { class: "space-y-1" }, $e = {
   key: 2,
   class: "text-xs text-secondary-content select-none"
-}, Fe = /* @__PURE__ */ F({
+}, Ne = /* @__PURE__ */ V({
   __name: "OneFormField",
-  props: Q,
-  setup(u) {
-    const a = u, { formId: s, validation: r } = N(), i = n(() => a.errors != null && a.errors.length > 0 ? !0 : a.name == null ? !1 : (r.value ?? {})[a.name] != null);
-    return _("BaseFormField", {
-      inputId: n(() => {
-        const o = s.value || "form";
-        if (a.id != null)
-          return `${o}-${a.id}`;
-        if (a.name != null)
-          return `${o}-field-${a.name}`;
+  props: _,
+  setup(m) {
+    const l = m, { formId: d, validation: r } = T(), n = s(() => l.errors != null && l.errors.length > 0 ? !0 : l.name == null ? !1 : (r.value ?? {})[l.name] != null);
+    return D("BaseFormField", {
+      inputId: s(() => {
+        const o = d.value || "form";
+        if (l.id != null)
+          return `${o}-${l.id}`;
+        if (l.name != null)
+          return `${o}-field-${l.name}`;
       }),
-      inputName: n(() => a.name),
-      hasError: i
-    }), (o, y) => (l(), t("div", ve, [
-      o.label ? (l(), g(Z, {
+      inputName: s(() => l.name),
+      hasError: n
+    }), (o, f) => (a(), t("div", Se, [
+      o.label ? (a(), B(te, {
         key: 0,
         label: o.label
       }, {
-        right: H(() => [
-          w(o.$slots, "right")
+        right: Y(() => [
+          C(o.$slots, "right")
         ]),
         _: 3
-      }, 8, ["label"])) : b("", !0),
-      w(o.$slots, "default", {}, () => [
-        j(he)
+      }, 8, ["label"])) : v("", !0),
+      C(o.$slots, "default", {}, () => [
+        K(Fe)
       ]),
-      i.value ? (l(), g(ee, {
+      n.value ? (a(), B(se, {
         key: 1,
         errors: o.errors
-      }, null, 8, ["errors"])) : o.hint.length > 0 ? (l(), t("p", be, v(o.hint), 1)) : b("", !0)
+      }, null, 8, ["errors"])) : o.hint.length > 0 ? (a(), t("p", $e, h(o.hint), 1)) : v("", !0)
     ]));
   }
 });
 export {
-  we as OneForm,
-  ee as OneFormFeedback,
-  Fe as OneFormField,
-  he as OneFormInput,
-  Z as OneFormLabel
+  Ve as OneForm,
+  se as OneFormFeedback,
+  Ne as OneFormField,
+  Fe as OneFormInput,
+  te as OneFormLabel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneb/ui-vue",
-  "version": "0.2.9",
+  "version": "0.2.13",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -8,6 +8,79 @@
   ],
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "icons/outline": [
+        "./dist/icons/outline/esm/index.d.ts"
+      ],
+      "icons/*": [
+        "./dist/icons/outline/esm/*.d.ts"
+      ],
+      "card": [
+        "./dist/card/index.d.ts"
+      ],
+      "button": [
+        "./dist/button/index.d.ts"
+      ],
+      "buttonGroup": [
+        "./dist/buttonGroup/index.d.ts"
+      ],
+      "form": [
+        "./dist/form/index.d.ts"
+      ],
+      "dropdown": [
+        "./dist/dropdown/index.d.ts"
+      ],
+      "common": [
+        "./dist/common/index.d.ts"
+      ],
+      "layout": [
+        "./dist/layout/index.d.ts"
+      ],
+      "checkbox": [
+        "./dist/checkbox/index.d.ts"
+      ],
+      "collapse": [
+        "./dist/collapse/index.d.ts"
+      ],
+      "errorsPage": [
+        "./dist/errorsPage/index.d.ts"
+      ],
+      "indicators": [
+        "./dist/indicators/index.d.ts"
+      ],
+      "infobox": [
+        "./dist/infobox/index.d.ts"
+      ],
+      "label": [
+        "./dist/label/index.d.ts"
+      ],
+      "modal": [
+        "./dist/modal/index.d.ts"
+      ],
+      "radio": [
+        "./dist/radio/index.d.ts"
+      ],
+      "skeleton": [
+        "./dist/skeleton/index.d.ts"
+      ],
+      "switch": [
+        "./dist/switch/index.d.ts"
+      ],
+      "toast": [
+        "./dist/toast/index.d.ts"
+      ],
+      "tooltip": [
+        "./dist/tooltip/index.d.ts"
+      ],
+      "periodPicker": [
+        "./dist/periodPicker/index.d.ts"
+      ],
+      "tailwind.config": [
+        "./dist/tailwind.config.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",