@vue-interface/input-field 2.0.0 → 2.0.2

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Justin Kimbrell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,30 @@
+# Input Field
+
+The `input-field` component provides flexible and customizable input fields with customizable sizes and states.
+
+## Installation
+
+```bash
+pnpm i @vue-interface/input-field
+```
+
+```bash
+yarn add @vue-interface/input-field
+```
+
+```bash
+npm i @vue-interface/input-field
+```
+
+```bash
+bun i @vue-interface/input-field
+```
+
+## Basic Usage
+
+```vue
+<InputField v-model="value" label="Text Field" placeholder="Some placeholder" @change="onChange"></InputField>
+```
+
+For more comprehensive documentation and examples, please visit the [online documentation](https://vue-interface.github.io/packages/input-field/).
+

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { default as InputField } from './src/InputField.vue';
+export { InputField };

package/dist/input-field.js

@@ -0,0 +1,128 @@
+import { defineComponent as p, mergeModels as h, useModel as F, ref as w, createElementBlock as d, openBlock as a, normalizeClass as C, unref as t, renderSlot as l, createElementVNode as n, createCommentVNode as s, toDisplayString as c, normalizeProps as u, guardReactiveProps as m, withDirectives as A, mergeProps as M, vModelDynamic as N, createVNode as $, Transition as S, withCtx as y, createBlock as V, createTextVNode as D } from "vue";
+import { ActivityIndicator as E } from "@vue-interface/activity-indicator";
+import { useFormControl as I, FormControlErrors as P, FormControlFeedback as x } from "@vue-interface/form-control";
+const G = ["for"], R = { class: "form-control-inner" }, U = { class: "form-control-activity-indicator" }, j = {
+  invalid: "",
+  class: "invalid-feedback"
+}, q = {
+  valid: "",
+  class: "valid-feedback"
+}, L = /* @__PURE__ */ p({
+  inheritAttrs: !1,
+  __name: "InputField",
+  props: /* @__PURE__ */ h({
+    activity: { type: Boolean },
+    disabled: { type: Boolean },
+    error: {},
+    errors: {},
+    feedback: {},
+    formControlClass: { default: "form-control" },
+    helpText: {},
+    id: {},
+    indicator: {},
+    indicatorSize: {},
+    invalid: { type: Boolean },
+    label: {},
+    labelClass: { default: "form-label" },
+    modelValue: {},
+    name: {},
+    plaintext: { type: Boolean },
+    size: {},
+    color: {},
+    readonly: { type: Boolean },
+    valid: { type: Boolean },
+    value: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ h(["update:modelValue", "blur", "focus", "focusin", "focusout", "click", "doubleclick", "contextmenu", "mousedown", "mouseup", "mouseover", "mouseout", "mouseenter", "mouseleave", "mousemove", "keydown", "keyup", "keypress", "select", "selectionchange", "invalid", "submit", "reset", "scroll", "wheel", "copy", "cut", "paste", "touchstart", "touchend", "touchmove", "touchcancel", "change", "input", "beforeinput"], ["update:modelValue"]),
+  setup(e, { emit: B }) {
+    const z = e, f = F(e, "modelValue"), T = B, {
+      controlAttributes: v,
+      formGroupClasses: g,
+      listeners: b
+    } = I({ model: f, props: z, emit: T }), k = w();
+    return (o, r) => (a(), d("div", {
+      class: C(["input-field", t(g)])
+    }, [
+      l(o.$slots, "label", {}, () => [
+        e.label ? (a(), d("label", {
+          key: 0,
+          ref: "label",
+          class: C(e.labelClass),
+          for: t(v).id
+        }, c(e.label), 11, G)) : s("", !0)
+      ]),
+      n("div", R, [
+        l(o.$slots, "control", u(m({ controlAttributes: t(v), listeners: t(b) })), () => [
+          o.$slots.icon ? (a(), d("div", {
+            key: 0,
+            class: "form-control-inner-icon",
+            onClick: r[0] || (r[0] = (i) => k.value?.focus())
+          }, [
+            l(o.$slots, "icon")
+          ])) : s("", !0),
+          A(n("input", M({
+            ref_key: "field",
+            ref: k,
+            "onUpdate:modelValue": r[1] || (r[1] = (i) => f.value = i)
+          }, { ...t(v), ...t(b) }), null, 16), [
+            [N, f.value]
+          ])
+        ]),
+        n("div", U, [
+          l(o.$slots, "activity", {}, () => [
+            $(S, { name: "input-field-fade" }, {
+              default: y(() => [
+                e.activity && e.indicator ? (a(), V(t(E), {
+                  key: "activity",
+                  ref: "activity",
+                  type: e.indicator,
+                  size: e.indicatorSize
+                }, null, 8, ["type", "size"])) : s("", !0)
+              ]),
+              _: 1
+            })
+          ])
+        ])
+      ]),
+      l(o.$slots, "errors", u(m({ error: e.error, errors: e.errors, id: o.$attrs.id, name: o.$attrs.name })), () => [
+        e.error || e.errors ? (a(), V(t(P), {
+          key: 0,
+          id: e.id,
+          name: e.name,
+          error: e.error,
+          errors: e.errors
+        }, {
+          default: y(({ error: i }) => [
+            n("div", j, [
+              D(c(i), 1),
+              r[2] || (r[2] = n("br", null, null, -1))
+            ])
+          ]),
+          _: 1
+        }, 8, ["id", "name", "error", "errors"])) : s("", !0)
+      ]),
+      l(o.$slots, "feedback", u(m({ feedback: e.feedback })), () => [
+        $(t(x), { feedback: e.feedback }, {
+          default: y(({ feedback: i }) => [
+            n("div", q, c(i), 1)
+          ]),
+          _: 1
+        }, 8, ["feedback"])
+      ]),
+      l(o.$slots, "help", u(m({ helpText: e.helpText })), () => [
+        e.helpText ? (a(), d("small", {
+          key: 0,
+          ref: "help",
+          class: "form-help"
+        }, c(e.helpText), 513)) : s("", !0)
+      ])
+    ], 2));
+  }
+});
+export {
+  L as InputField
+};
+//# sourceMappingURL=input-field.js.map

package/dist/input-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.js","sources":["../src/InputField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, ref } from 'vue';\n\nconst props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {\n    formControlClass: 'form-control',\n    labelClass: 'form-label'\n});\n\ndefineOptions({\n    inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();\n\nconst emit = defineEmits<FormControlEvents<ModelValue>>();\n\nconst {\n    controlAttributes,\n    formGroupClasses,\n    listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });\n\nconst field = ref<HTMLInputElement>();\n</script>\n\n<script lang=\"ts\">\nexport type InputFieldControlSizePrefix = 'form-control';\n\nexport type InputFieldProps<ModelValue, Value> = FormControlProps<\n    InputHTMLAttributes, \n    InputFieldControlSizePrefix, \n    ModelValue, \n    Value\n>;\n</script>\n\n<template>\n    <div\n        class=\"input-field\"\n        :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :class=\"labelClass\"\n                :for=\"controlAttributes.id\">\n                {{ label }}\n            </label>\n        </slot>\n        \n        <div class=\"form-control-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ controlAttributes, listeners }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-control-inner-icon\"\n                    @click=\"field?.focus()\">\n                    <slot name=\"icon\" />\n                </div>\n                <input\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind=\"{...controlAttributes, ...listeners}\">\n            </slot>\n            \n            <div class=\"form-control-activity-indicator\">\n                <slot name=\"activity\">\n                    <Transition name=\"input-field-fade\">\n                        <ActivityIndicator\n                            v-if=\"activity && indicator\"\n                            key=\"activity\"\n                            ref=\"activity\"\n                            :type=\"indicator\"\n                            :size=\"indicatorSize\" />\n                    </Transition>\n                </slot>\n            </div>\n        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\">  \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"id\"\n                v-slot=\"{ error }\"\n                :name=\"name\"\n                :error=\"error\"\n                :errors=\"errors\">\n                <div\n                    invalid\n                    class=\"invalid-feedback\">\n                    {{ error }}<br>\n                </div>\n            </FormControlErrors>\n        </slot>\n        \n        <slot\n            name=\"feedback\"\n            v-bind=\"{ feedback }\">\n            <FormControlFeedback\n                v-slot=\"{ feedback }\"\n                :feedback=\"feedback\">\n                <div\n                    valid\n                    class=\"valid-feedback\">\n                    {{ feedback }}\n                </div>\n            </FormControlFeedback>\n        </slot>\n\n        <slot\n            name=\"help\"\n            v-bind=\"{ helpText }\">\n            <small\n                v-if=\"helpText\"\n                ref=\"help\"\n                class=\"form-help\">\n                {{ helpText }}\n            </small>\n        </slot>\n    </div>\n</template>"],"names":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","field","ref","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_cache","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","$attrs","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5","_toDisplayString"],"mappings":"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"}

package/dist/input-field.umd.cjs

@@ -0,0 +1,2 @@
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/activity-indicator"),require("@vue-interface/form-control")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/activity-indicator","@vue-interface/form-control"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.InputField={},r.Vue,r.VueInterfaceActivityIndicator,r.VueInterfaceFormControl))})(this,(function(r,e,m,i){"use strict";const f=["for"],y={class:"form-control-inner"},k={class:"form-control-activity-indicator"},u={invalid:"",class:"invalid-feedback"},b={valid:"",class:"valid-feedback"},p=e.defineComponent({inheritAttrs:!1,__name:"InputField",props:e.mergeModels({activity:{type:Boolean},disabled:{type:Boolean},error:{},errors:{},feedback:{},formControlClass:{default:"form-control"},helpText:{},id:{},indicator:{},indicatorSize:{},invalid:{type:Boolean},label:{},labelClass:{default:"form-label"},modelValue:{},name:{},plaintext:{type:Boolean},size:{},color:{},readonly:{type:Boolean},valid:{type:Boolean},value:{}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue","blur","focus","focusin","focusout","click","doubleclick","contextmenu","mousedown","mouseup","mouseover","mouseout","mouseenter","mouseleave","mousemove","keydown","keyup","keypress","select","selectionchange","invalid","submit","reset","scroll","wheel","copy","cut","paste","touchstart","touchend","touchmove","touchcancel","change","input","beforeinput"],["update:modelValue"]),setup(t,{emit:h}){const V=t,a=e.useModel(t,"modelValue"),C=h,{controlAttributes:d,formGroupClasses:B,listeners:s}=i.useFormControl({model:a,props:V,emit:C}),c=e.ref();return(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-field",e.unref(B)])},[e.renderSlot(o.$slots,"label",{},()=>[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",class:e.normalizeClass(t.labelClass),for:e.unref(d).id},e.toDisplayString(t.label),11,f)):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(d),listeners:e.unref(s)})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:l[0]||(l[0]=n=>c.value?.focus())},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"field",ref:c,"onUpdate:modelValue":l[1]||(l[1]=n=>a.value=n)},{...e.unref(d),...e.unref(s)}),null,16),[[e.vModelDynamic,a.value]])]),e.createElementVNode("div",k,[e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"input-field-fade"},{default:e.withCtx(()=>[t.activity&&t.indicator?(e.openBlock(),e.createBlock(e.unref(m.ActivityIndicator),{key:"activity",ref:"activity",type:t.indicator,size:t.indicatorSize},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])])]),e.renderSlot(o.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:t.error,errors:t.errors,id:o.$attrs.id,name:o.$attrs.name})),()=>[t.error||t.errors?(e.openBlock(),e.createBlock(e.unref(i.FormControlErrors),{key:0,id:t.id,name:t.name,error:t.error,errors:t.errors},{default:e.withCtx(({error:n})=>[e.createElementVNode("div",u,[e.createTextVNode(e.toDisplayString(n),1),l[2]||(l[2]=e.createElementVNode("br",null,null,-1))])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:t.feedback})),()=>[e.createVNode(e.unref(i.FormControlFeedback),{feedback:t.feedback},{default:e.withCtx(({feedback:n})=>[e.createElementVNode("div",b,e.toDisplayString(n),1)]),_:1},8,["feedback"])]),e.renderSlot(o.$slots,"help",e.normalizeProps(e.guardReactiveProps({helpText:t.helpText})),()=>[t.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help",class:"form-help"},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});r.InputField=p,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=input-field.umd.cjs.map

package/dist/input-field.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.umd.cjs","sources":["../src/InputField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, ref } from 'vue';\n\nconst props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {\n    formControlClass: 'form-control',\n    labelClass: 'form-label'\n});\n\ndefineOptions({\n    inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();\n\nconst emit = defineEmits<FormControlEvents<ModelValue>>();\n\nconst {\n    controlAttributes,\n    formGroupClasses,\n    listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });\n\nconst field = ref<HTMLInputElement>();\n</script>\n\n<script lang=\"ts\">\nexport type InputFieldControlSizePrefix = 'form-control';\n\nexport type InputFieldProps<ModelValue, Value> = FormControlProps<\n    InputHTMLAttributes, \n    InputFieldControlSizePrefix, \n    ModelValue, \n    Value\n>;\n</script>\n\n<template>\n    <div\n        class=\"input-field\"\n        :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :class=\"labelClass\"\n                :for=\"controlAttributes.id\">\n                {{ label }}\n            </label>\n        </slot>\n        \n        <div class=\"form-control-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ controlAttributes, listeners }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-control-inner-icon\"\n                    @click=\"field?.focus()\">\n                    <slot name=\"icon\" />\n                </div>\n                <input\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind=\"{...controlAttributes, ...listeners}\">\n            </slot>\n            \n            <div class=\"form-control-activity-indicator\">\n                <slot name=\"activity\">\n                    <Transition name=\"input-field-fade\">\n                        <ActivityIndicator\n                            v-if=\"activity && indicator\"\n                            key=\"activity\"\n                            ref=\"activity\"\n                            :type=\"indicator\"\n                            :size=\"indicatorSize\" />\n                    </Transition>\n                </slot>\n            </div>\n        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\">  \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"id\"\n                v-slot=\"{ error }\"\n                :name=\"name\"\n                :error=\"error\"\n                :errors=\"errors\">\n                <div\n                    invalid\n                    class=\"invalid-feedback\">\n                    {{ error }}<br>\n                </div>\n            </FormControlErrors>\n        </slot>\n        \n        <slot\n            name=\"feedback\"\n            v-bind=\"{ feedback }\">\n            <FormControlFeedback\n                v-slot=\"{ feedback }\"\n                :feedback=\"feedback\">\n                <div\n                    valid\n                    class=\"valid-feedback\">\n                    {{ feedback }}\n                </div>\n            </FormControlFeedback>\n        </slot>\n\n        <slot\n            name=\"help\"\n            v-bind=\"{ helpText }\">\n            <small\n                v-if=\"helpText\"\n                ref=\"help\"\n                class=\"form-help\">\n                {{ helpText }}\n            </small>\n        </slot>\n    </div>\n</template>"],"names":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","field","ref","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_cache","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","$attrs","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5","_toDisplayString"],"mappings":"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"}

package/dist/src/InputField.vue.d.ts

@@ -0,0 +1,77 @@
+import { FormControlProps, FormControlSlots } from '@vue-interface/form-control';
+import { InputHTMLAttributes } from 'vue';
+export type InputFieldControlSizePrefix = 'form-control';
+export type InputFieldProps<ModelValue, Value> = FormControlProps<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue, Value>;
+declare const _default: <ModelValue, Value>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onInput?: ((event: Event) => any) | undefined;
+        readonly onSelect?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
+        readonly onFocusin?: ((event: FocusEvent) => any) | undefined;
+        readonly onFocusout?: ((event: FocusEvent) => any) | undefined;
+        readonly onClick?: ((event: MouseEvent) => any) | undefined;
+        readonly onDoubleclick?: ((event: MouseEvent) => any) | undefined;
+        readonly onContextmenu?: ((event: MouseEvent) => any) | undefined;
+        readonly onMousedown?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseup?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseover?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseout?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseenter?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseleave?: ((event: MouseEvent) => any) | undefined;
+        readonly onMousemove?: ((event: MouseEvent) => any) | undefined;
+        readonly onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+        readonly onKeyup?: ((event: KeyboardEvent) => any) | undefined;
+        readonly onKeypress?: ((event: KeyboardEvent) => any) | undefined;
+        readonly onSelectionchange?: ((event: Event) => any) | undefined;
+        readonly onInvalid?: ((event: Event) => any) | undefined;
+        readonly onSubmit?: ((event: Event) => any) | undefined;
+        readonly onReset?: ((event: Event) => any) | undefined;
+        readonly onScroll?: ((event: Event) => any) | undefined;
+        readonly onWheel?: ((event: WheelEvent) => any) | undefined;
+        readonly onCopy?: ((event: ClipboardEvent) => any) | undefined;
+        readonly onCut?: ((event: ClipboardEvent) => any) | undefined;
+        readonly onPaste?: ((event: ClipboardEvent) => any) | undefined;
+        readonly onTouchstart?: ((event: TouchEvent) => any) | undefined;
+        readonly onTouchend?: ((event: TouchEvent) => any) | undefined;
+        readonly onTouchmove?: ((event: TouchEvent) => any) | undefined;
+        readonly onTouchcancel?: ((event: TouchEvent) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly onBeforeinput?: ((event: Event) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onCopy" | "onCut" | "onPaste" | "onFocus" | "onFocusin" | "onFocusout" | "onBlur" | "onChange" | "onBeforeinput" | "onInput" | "onReset" | "onSubmit" | "onInvalid" | "onKeydown" | "onKeypress" | "onKeyup" | "onMousedown" | "onMouseenter" | "onMouseleave" | "onMousemove" | "onMouseout" | "onMouseover" | "onMouseup" | "onSelect" | "onScroll" | "onTouchcancel" | "onTouchend" | "onTouchmove" | "onTouchstart" | "onClick" | "onContextmenu" | "onWheel" | "onDoubleclick" | "onSelectionchange" | "onUpdate:modelValue"> & ({
+        modelValue?: ModelValue;
+    } & {
+        activity?: boolean;
+        disabled?: boolean;
+        error?: import('@vue-interface/form-control').FormControlErrorProp;
+        errors?: import('@vue-interface/form-control').FormControlErrorPropArray | import('@vue-interface/form-control').FormControlErrorPropRecord;
+        feedback?: import('@vue-interface/form-control').FormControlFeedbackProp;
+        formControlClass?: string;
+        helpText?: string;
+        id?: string;
+        indicator?: import('vue').Component;
+        indicatorSize?: import('@vue-interface/activity-indicator').ActivityIndicatorSize;
+        invalid?: boolean;
+        label?: string;
+        labelClass?: string;
+        modelValue?: ModelValue | undefined;
+        name?: string;
+        plaintext?: boolean;
+        size?: import('@vue-interface/form-control').FormControlSize<"form-control", import('@vue-interface/form-control').PredeterminedSize> | undefined;
+        color?: string;
+        readonly?: boolean;
+        valid?: boolean;
+        value?: Value | undefined;
+    } & InputHTMLAttributes) & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<FormControlSlots<"form-control", ModelValue>> & FormControlSlots<"form-control", ModelValue>;
+    emit: (((evt: "input", event: Event) => void) & ((evt: "select", event: Event) => void) & ((evt: "update:modelValue", value: ModelValue) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "focusin", event: FocusEvent) => void) & ((evt: "focusout", event: FocusEvent) => void) & ((evt: "click", event: MouseEvent) => void) & ((evt: "doubleclick", event: MouseEvent) => void) & ((evt: "contextmenu", event: MouseEvent) => void) & ((evt: "mousedown", event: MouseEvent) => void) & ((evt: "mouseup", event: MouseEvent) => void) & ((evt: "mouseover", event: MouseEvent) => void) & ((evt: "mouseout", event: MouseEvent) => void) & ((evt: "mouseenter", event: MouseEvent) => void) & ((evt: "mouseleave", event: MouseEvent) => void) & ((evt: "mousemove", event: MouseEvent) => void) & ((evt: "keydown", event: KeyboardEvent) => void) & ((evt: "keyup", event: KeyboardEvent) => void) & ((evt: "keypress", event: KeyboardEvent) => void) & ((evt: "selectionchange", event: Event) => void) & ((evt: "invalid", event: Event) => void) & ((evt: "submit", event: Event) => void) & ((evt: "reset", event: Event) => void) & ((evt: "scroll", event: Event) => void) & ((evt: "wheel", event: WheelEvent) => void) & ((evt: "copy", event: ClipboardEvent) => void) & ((evt: "cut", event: ClipboardEvent) => void) & ((evt: "paste", event: ClipboardEvent) => void) & ((evt: "touchstart", event: TouchEvent) => void) & ((evt: "touchend", event: TouchEvent) => void) & ((evt: "touchmove", event: TouchEvent) => void) & ((evt: "touchcancel", event: TouchEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "beforeinput", event: Event) => void)) & ((evt: "update:modelValue", value: ModelValue) => void);
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/input-field",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A Vue input field component.",
   "type": "module",
   "main": "./dist/input-field.umd.cjs",
@@ -17,7 +17,7 @@
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vue-interface/input-field"
+    "url": "git+https://github.com/vue-interface/vue-interface.github.io"
   },
   "keywords": [
     "Input",
@@ -28,15 +28,22 @@
     "Bootstrap"
   ],
   "author": "Justin Kimbrell",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vue-interface/input-field"
+    "url": "https://github.com/vue-interface/vue-interface.github.io"
   },
-  "homepage": "https://github.com/vue-interface/vue-interface",
+  "homepage": "https://vue-interface.github.io/packages/input-field",
+  "readme": "README.md",
+  "files": [
+    "dist",
+    "index.css",
+    "README.md",
+    "LICENSE"
+  ],
   "peerDependencies": {
     "vue": "^3.3.4",
-    "@vue-interface/activity-indicator": "3.0.0",
-    "@vue-interface/form-control": "2.0.0"
+    "@vue-interface/activity-indicator": "3.0.2",
+    "@vue-interface/form-control": "2.0.2"
   },
   "scripts": {
     "dev": "vite",

package/CHANGELOG.md

@@ -1,12 +0,0 @@
-# @vue-interface/input-field
-
-## 2.0.0
-
-### Major Changes
-
-- 0da678a: Add support for TailwindCSS v4
-
-### Patch Changes
-
-- Updated dependencies [0da678a]
-  - @vue-interface/form-control@2.0.0

package/demo.css

@@ -1,12 +0,0 @@
-@import "tailwindcss";
-@import "./index.css";
-
-@source "../activity-indicator/src/**/*.vue";
-
-@variant dark {
-    body {
-        @apply text-white;
-    }
-}
-
-@custom-variant dark (&:where(.dark, .dark *));

package/docs/input-field.md

@@ -1,373 +0,0 @@
----
-title: Input Field
----
-
-<script setup>
-import '../demo.css'
-import { ref, onMounted } from 'vue'
-import InputField from '../src/InputField.vue';
-import { Dots, Spinner, Pulse } from '@vue-interface/activity-indicator'
-
-const value = ref()
-const showActivity = ref(false)
-
-onMounted(() => {
-  setTimeout(() => {
-    value.value = 'testing...'
-  }, 1000)
-})
-
-function onChange(newValue) {
-  console.log('change', newValue)
-}
-</script>
-
-# Input Field
-
-The `input-field` component provides flexible and customizable input fields with customizable sizes and states.
-
-## Variations and States
-
-<!-- #region variations -->
-<input-field v-model="value" label="Text Field" placeholder="Some placeholder" class="mb-3" @change="onChange"></input-field>
-<input-field type="password" label="Password Field" class="mb-3"></input-field>
-<input-field label="Descriptive Text Field" help-text="Some helpful text goes here." class="mb-3"></input-field>
-<input-field type="email" label="Email Field" placeholder="you@example.com" class="mb-3"></input-field>
-<input-field label="Plain Text" placeholder="Type something here..." class="mb-3" plaintext></input-field>
-<input-field label="Readonly" placeholder="Type something here..." class="mb-3" readonly></input-field>
-<input-field label="Readonly (Disabled)" placeholder="Type something here..." class="mb-3" readonly disabled></input-field>
-<input-field label="Disabled" placeholder="Type something here..." class="mb-3" disabled></input-field>
-<!-- #endregion variations -->
-
-::: details Show Code
-<<< @/packages/input-field/docs/input-field.md#variations{html}
-:::
-
-## Sizes
-
-Customize the `input-fields` size using a [predetermined size](#predetermined-sizes), [tailwind's numeric sizing classes](#tailwind-sizes), or an [arbitrary](#arbitrary-sizes) CSS length unit.
-
-### Predetermined Sizes
-
-The size can be customized using predetermined `size prop` values: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`. Use the syntax: `form-control-[size]`.
-
-<!-- #region predeterminedSizes -->
-<input-field label="xs" size="form-control-xs" class="mb-3"></input-field>
-<input-field label="sm" size="form-control-sm" class="mb-3"></input-field>
-<input-field label="md" size="form-control-md" class="mb-3"></input-field>
-<input-field label="lg" size="form-control-lg" class="mb-3"></input-field>
-<input-field label="xl" size="form-control-xl" class="mb-3"></input-field>
-<input-field label="2xl" size="form-control-2xl" class="mb-3"></input-field>
-<input-field label="3xl" size="form-control-3xl" class="mb-3"></input-field>
-<input-field label="4xl" size="form-control-4xl" class="mb-3"></input-field>
-<input-field label="5xl" size="form-control-5xl" class="mb-3"></input-field>
-<!-- #endregion predeterminedSizes -->
-
-::: details Show Code
-<<< @/packages/input-field/docs/input-field.md#predeterminedSizes{html}
-:::
-
-### Tailwind Sizes
-
-For more granular control over sizes, use Tailwind's numeric sizing scale classes: `form-control-1` - `form-control-96`.
-
-<!-- #region tailwindSizes -->
-<input-field label="form-control-3" size="form-control-3" class="mb-3"></input-field>
-<input-field label="form-control-4" size="form-control-4" class="mb-3"></input-field>
-<input-field label="form-control-5" size="form-control-5" class="mb-3"></input-field>
-<!-- #endregion tailwindSizes -->
-
-::: details Show Code
-<<< @/packages/input-field/docs/input-field.md#tailwindSizes{html}
-:::
-
-### Arbitrary Sizes
-
-For precise sizing, specify exact pixel values using the syntax `form-control-[Npx]` or any other CSS length units (`rem`, `em`, `mm`, etc.).
-
-<!-- #region arbitrarySizes -->
-<input-field label="form-control-[16px]" size="form-control-[16px]" class="mb-3"></input-field>
-<input-field label="form-control-[1.5rem]" size="form-control-[1.5rem]" class="mb-3"></input-field>
-<!-- #endregion arbitrarySizes -->
-
-::: details Show Code
-<<< @/packages/input-field/docs/input-field.md#arbitrarySizes{html}
-:::
-
-## Icons
-
-The following `input-field` components combine the an input field with a [heroicon](https://heroicons.com/). Customize the size of input-field/icon combinations using the same [sizing prop values](#sizes) described above. 
-
-::: warning Add an Icon
-1. Add the `<template #icon>` header
-2. Select `Copy SVG` from the heroicon website
-3. Paste the SVG inside the `template` header. 
-:::
-
-<!-- #region icons -->
-<input-field label="xs Icon" size="form-control-xs" class="form-control-xs mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="sm Icon" size="form-control-sm" class="form-control-sm mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="md Icon" size="form-control-md" class="form-control-md mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="lg Icon" size="form-control-lg" class="form-control-lg mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="xl Icon" size="form-control-xl" class="form-control-xl mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="2xl Icon" size="form-control-2xl" class="form-control-2xl mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="3xl Icon" size="form-control-3xl" class="form-control-3xl mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="4xl Icon" size="form-control-4xl" class="form-control-4xl mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="5xl Icon" size="form-control-5xl" class="form-control-5xl mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="form-control-3 Icon" size="form-control-3" class="form-control-3 mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="form-control-4 Icon" size="form-control-4" class="form-control-4 mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="form-control-[16px] Icon" size="form-control-[16px]" class="form-control-[16px] mb-3">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-<!-- #endregion icons -->
-
-::: details Show Code
-<<< @/packages/input-field/docs/input-field.md#icons{html}
-:::
-
-## With Activity
-
-Combine [activity indicators](/packages/activity-indicator/docs/activity-indicator) with `input-fields` to show a loading icon after input.
-
-<!-- #region withActivity -->
-<input-field label="Small" size="form-control-sm" :indicator="Dots" indicator-size="xs" :activity="showActivity" class="mb-3"></input-field>
-<input-field label="Medium" size="form-control-md" :indicator="Pulse" indicator-size="md" :activity="showActivity" class="mb-3"></input-field>
-<input-field label="Large" size="form-control-lg" :indicator="Spinner" indicator-size="lg" :activity="showActivity" class="mb-3"></input-field>
-
-<button type="button" class="underline text-blue-600" @click="showActivity = !showActivity">
-    <span v-if="!showActivity">Show</span><span v-else>Hide</span> Activity
-</button>
-<!-- #endregion withActivity -->
-
-::: details Show Code
-<<< @/packages/input-field/docs/input-field.md#withActivity{html}
-:::
-
-## Validation
-
-Validation classes provides error-checking styling for the input-field component. The `invalid-feedback` and `valid-feedback` classes provide the styling for invalid and valid elements, respectively. 
-
-<!-- #region validation -->
-<input-field label="Empty Array of Errors" :errors="[]" class="mb-3"></input-field>
-
-<input-field label="Single Inline Error" error="This is an inline error." class="mb-3 invalid-feedback"></input-field>
-<input-field label="Array of Errors" :errors="['First Error', 'Second Error']" class="mb-3 invalid-feedback"></input-field>
-<input-field name="test" label="Multiple Errors From Object" :errors="{'test': ['This is an inline error #1.', 'This is an inline error #2.']}" class="mb-3 invalid-feedback"></input-field>
-        
-<input-field label="Valid Field" valid class="mb-3 valid-feedback"></input-field>
-<input-field label="Valid Field with Feedback" valid feedback="This is some success message." class="mb-3 valid-feedback"></input-field>
-<input-field label="Valid Field with Array of Feedback" valid :feedback="['This is some success message.', 'This is some success message.']" class="mb-3 valid-feedback"></input-field>
-<!-- #endregion validation -->
-
-::: details Show Code
-<<< @/packages/input-field/docs/input-field.md#validation{html}
-:::
-
-## Animated
-
-The `input-field` animated component combines the tailwind `form-control-animated` classes to provide a custom animated component. Customize the size of animated input-field/icon combinations using the same [sizing prop values](#sizes) described above. 
-
-<!-- #region animated -->
-<input-field v-model="value" label="Text Field" placeholder="Some placeholder" class="mb-3 form-control-animated"></input-field>
-<input-field label="Text Field" placeholder="Some placeholder" class="mb-3 form-control-animated"></input-field>
-<input-field label="Text Field" placeholder="Some placeholder" size="form-control-lg" class="mb-3 form-control-animated-lg"></input-field>
-<!-- #endregion animated -->
-
-::: details Show Code
-<<< @/packages/input-field/docs/input-field.md#animated{html}
-:::
-
-### With Icons
-
-Add an [icon](#icons) to the animated input-fields using the steps described above.
-
-<!-- #region animatedIcons -->
-<input-field label="xs Icon" placeholder="Some placeholder" size="form-control-xs" class="mb-3 form-control-animated-xs">
-    <template #icon>
-         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="Small Icon" placeholder="Some placeholder" size="form-control-sm" class="mb-3 form-control-animated-sm">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template> 
-</input-field>
-
-<input-field label="Medium Icon" placeholder="Some placeholder" size="form-control-md" class="mb-3 form-control-animated-md">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-            
-<input-field label="Large Icon" placeholder="Some placeholder" size="form-control-lg" class="mb-3 form-control-animated-lg">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-             </svg>                      
-    </template>
-</input-field>
-
-<input-field label="xl Icon" placeholder="Some placeholder" size="form-control-xl" class="mb-3 form-control-animated-xl">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-            </svg>                      
-    </template>
-</input-field>
-            
-<input-field label="2xl Icon" placeholder="Some placeholder" size="form-control-2xl" class="mb-3 form-control-animated-2xl">
-    <template #icon>
-         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="3xl Icon" placeholder="Some placeholder" size="form-control-3xl" class="mb-3 form-control-animated-3xl">
-    <template #icon>
-         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="4xl Icon" placeholder="Some placeholder" size="form-control-4xl" class="mb-3 form-control-animated-4xl">
-    <template #icon>
-         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-
-<input-field label="5xl Icon" placeholder="Some placeholder" size="form-control-5xl" class="mb-3 form-control-animated-5xl">
-    <template #icon>
-         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-            
-<input-field label="Icon-4" placeholder="Some placeholder" size="form-control-4" class="mb-3 form-control-animated-4">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-             <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-             </svg>                      
-    </template>
-</input-field>
-            
-<input-field label="Icon-5" placeholder="Some placeholder" size="form-control-5" class="mb-3 form-control-animated-5">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-             <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-            </svg>                      
-    </template>
-</input-field>
-            
-<input-field label="Icon-6" placeholder="Some placeholder" size="form-control-6" class="mb-3 form-control-animated-6">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-            </svg>                      
-    </template>
-</input-field>
-            
-<input-field label="Icon-[16px]" placeholder="Some placeholder" size="form-control-[16px]" class="mb-3 form-control-animated-[16px]">
-    <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-        </svg>                      
-    </template>
-</input-field>
-<!-- #endregion animatedIcons -->
-
-::: details Show Code
-<<< @/packages/input-field/docs/input-field.md#animatedIcons{html}
-:::

package/index.html

@@ -1,240 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>InputField</title>
-    </head>
-    <body class="dark:bg-neutral-900 dark:text-white">
-        <div id="app" class="container mx-auto">
-            <h1 class="text-4xl mb-5">input-field</h1>
-
-            <div class="bg-neutral-100 dark:bg-neutral-800 p-3 mb-3">
-                Value: {{ value }}
-            </div>
-
-            <input-field v-model="value" label="Text Field" placeholder="Some placeholder" class="mb-3" @change="onChange"></input-field>
-            <input-field type="password" label="Password Field" class="mb-3"></input-field>
-            <input-field label="Descriptive Text Field" help-text="Some helpful text goes here." class="mb-3"></input-field>
-            <input-field type="email" label="Email Field" placeholder="you@example.com" class="mb-3"></input-field>
-            <input-field label="Plain Text" placeholder="Type something here..." class="mb-3" plaintext></input-field>
-            <input-field label="Readonly" placeholder="Type something here..." class="mb-3" readonly></input-field>
-            <input-field label="Readonly (Disabled)" placeholder="Type something here..." class="mb-3" readonly disabled></input-field>
-            <input-field label="Disabled" placeholder="Type something here..." class="mb-3" disabled></input-field>
-
-            <h2 class="text-2xl mt-6 mb-3">Sizes</h2>
-
-            <input-field label="Small" size="form-control-sm" class="mb-3"></input-field>
-            <input-field label="Medium" size="form-control-md" class="mb-3"></input-field>
-            <input-field label="Large" size="form-control-lg" class="mb-3"></input-field>
-
-            <h2 class="text-2xl mt-6 mb-3">Icons</h2>
-
-            <input-field label="Small Icon" size="form-control-sm" class="form-control-sm mb-3">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-
-            <input-field label="Medium Icon" size="form-control-md" class="form-control-md mb-3">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-
-            <input-field label="Large Icon" size="form-control-lg" class="form-control-lg mb-3">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-
-            <input-field label="Icon-xl" size="form-control-xl" class="form-control-xl mb-3">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-
-            <input-field label="Icon-7" size="form-control-7" class="form-control-7 mb-3">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-
-            <input-field label="Icon-[27px]" size="form-control-[27px]" class="form-control-[27px] mb-3">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-
-            <h2 class="text-2xl mt-6 mb-3">Activity Indicator</h2>
-
-            <input-field label="Small" size="form-control-sm" :indicator="Dots()" indicator-size="xs" :activity="showActivity" class="mb-3"></input-field>
-            <input-field label="Medium" size="form-control-md" :indicator="Pulse()" indicator-size="md" :activity="showActivity" class="mb-3"></input-field>
-            <input-field label="Large" size="form-control-lg" :indicator="Spinner()" indicator-size="lg" :activity="showActivity" class="mb-3"></input-field>
-
-            <button type="button" class="underline text-blue-600" @click="showActivity = !showActivity">
-                <span v-if="!showActivity">Show</span><span v-else>Hide</span> Activity
-            </button>
-
-            <!-- <h2 class="text-2xl mt-6 mb-3">Animated Labels</h2>
-
-            <input-field size="sm" label="Small" class="mb-3" animated></input-field>
-            <input-field size="md" label="Medium" class="mb-3" animated></input-field>
-            <input-field v-model="value" size="md" label="Medium" class="mb-3" animated></input-field>
-
-            <input-field value="Some Value" size="md" label="Medium" class="mb-3" animated></input-field>
-            <input-field size="lg" label="Large" class="mb-3" animated></input-field> -->
-
-            <h2 class="text-2xl mt-6 mb-3">Validation</h2>
-
-            <input-field label="Empty Array of Errors" :errors="[]" class="mb-3"></input-field>
-
-            <input-field label="Single Inline Error" error="This is an inline error." class="mb-3 invalid-feedback"></input-field>
-            <input-field label="Array of Errors" :errors="['First Error', 'Second Error']" class="mb-3 invalid-feedback"></input-field>
-            <input-field name="test" label="Multiple Errors From Object" :errors="{'test': ['This is an inline error #1.', 'This is an inline error #2.']}" class="mb-3 invalid-feedback"></input-field>
-        
-            <input-field label="Valid Field" valid class="mb-3 valid-feedback"></input-field>
-            <input-field label="Valid Field with Feedback" valid feedback="This is some success message." class="mb-3 valid-feedback"></input-field>
-            <input-field label="Valid Field with Array of Feedback" valid :feedback="['This is some success message.', 'This is some success message.']" class="mb-3 valid-feedback"></input-field>
-
-            <h2 class="text-2xl mt-6 mb-3">Animated Labels</h2>
-
-            <input-field v-model="value" label="Text Field" placeholder="Some placeholder" class="mb-3 form-control-animated"></input-field>
-            <input-field label="Text Field" placeholder="Some placeholder" class="mb-3 form-control-animated"></input-field>
-            <input-field label="Text Field" placeholder="Some placeholder" size="form-control-lg" class="mb-3 form-control-animated-lg"></input-field>
-
-            <input-field label="Small Icon" placeholder="Some placeholder" size="form-control-sm" class="mb-3 form-control-animated-sm">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                    </svg>                      
-                </template> 
-            </input-field>
-
-            <input-field label="Medium Icon" placeholder="Some placeholder" size="form-control-md" class="mb-3 form-control-animated-md">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-            
-            <input-field label="Large Icon" placeholder="Some placeholder" size="form-control-lg" class="mb-3 form-control-animated-lg">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-
-            <input-field label="xl Icon" placeholder="Some placeholder" size="form-control-xl" class="mb-3 form-control-animated-xl">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-            
-            <input-field label="2xl Icon" placeholder="Some placeholder" size="form-control-2xl" class="mb-3 form-control-animated-2xl">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>            
-            
-            <input-field label="Icon-4" placeholder="Some placeholder" size="form-control-4" class="mb-3 form-control-animated-4">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-            
-            <input-field label="Icon-5" placeholder="Some placeholder" size="form-control-5" class="mb-3 form-control-animated-5">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-            
-            <input-field label="Icon-6" placeholder="Some placeholder" size="form-control-6" class="mb-3 form-control-animated-6">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-
-            <input-field label="Icon-7" placeholder="Some placeholder" size="form-control-7" class="mb-3 form-control-animated-7">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-            
-            <input-field label="Icon-[16px]" placeholder="Some placeholder" size="form-control-[16px]" class="mb-3 form-control-animated-[16px]">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-            
-            <input-field label="Icon-[21px]" placeholder="Some placeholder" size="form-control-[21px]" class="mb-3 form-control-animated-[21px]">
-                <template #icon>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-                      </svg>                      
-                </template>
-            </input-field>
-        </div>
-
-        <script type="module">
-            import './demo.css';
-            import { createApp } from 'vue/dist/vue.esm-bundler.js';
-            import { InputField } from './index';
-            import { Dots, Pulse, Spinner } from '@vue-interface/activity-indicator';
-          
-            const vue = createApp({
-                components: {
-                   InputField
-                },
-                data() {
-                    return {
-                        Dots: () => Dots,
-                        Spinner: () => Spinner,
-                        Pulse: () => Pulse,
-                        showActivity: false,
-                        value: undefined
-                    };
-                },
-                mounted() {
-                    setTimeout(() => {
-                        this.value = 'testing...'
-                    }, 1000)
-                },
-                methods: {
-                    onChange(value) {
-                        console.log('change', value)
-                    }
-                }
-            });
-            vue.mount('#app');
-        </script>
-    </body>
-</html>

package/index.ts

@@ -1,5 +0,0 @@
-import InputField from './src/InputField.vue';
-
-export {
-    InputField
-};

package/src/InputField.vue

@@ -1,129 +0,0 @@
-<script setup lang="ts" generic="ModelValue, Value">
-import { ActivityIndicator } from '@vue-interface/activity-indicator';
-import type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';
-import { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';
-import { InputHTMLAttributes, ref } from 'vue';
-
-const props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {
-    formControlClass: 'form-control',
-    labelClass: 'form-label'
-});
-
-defineOptions({
-    inheritAttrs: false
-});
-
-const model = defineModel<ModelValue>();
-
-defineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();
-
-const emit = defineEmits<FormControlEvents<ModelValue>>();
-
-const {
-    controlAttributes,
-    formGroupClasses,
-    listeners
-} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });
-
-const field = ref<HTMLInputElement>();
-</script>
-
-<script lang="ts">
-export type InputFieldControlSizePrefix = 'form-control';
-
-export type InputFieldProps<ModelValue, Value> = FormControlProps<
-    InputHTMLAttributes, 
-    InputFieldControlSizePrefix, 
-    ModelValue, 
-    Value
->;
-</script>
-
-<template>
-    <div
-        class="input-field"
-        :class="formGroupClasses">
-        <slot name="label">
-            <label
-                v-if="label"
-                ref="label"
-                :class="labelClass"
-                :for="controlAttributes.id">
-                {{ label }}
-            </label>
-        </slot>
-        
-        <div class="form-control-inner">
-            <slot
-                name="control"
-                v-bind="{ controlAttributes, listeners }">
-                <div
-                    v-if="$slots.icon"
-                    class="form-control-inner-icon"
-                    @click="field?.focus()">
-                    <slot name="icon" />
-                </div>
-                <input
-                    ref="field"
-                    v-model="model"
-                    v-bind="{...controlAttributes, ...listeners}">
-            </slot>
-            
-            <div class="form-control-activity-indicator">
-                <slot name="activity">
-                    <Transition name="input-field-fade">
-                        <ActivityIndicator
-                            v-if="activity && indicator"
-                            key="activity"
-                            ref="activity"
-                            :type="indicator"
-                            :size="indicatorSize" />
-                    </Transition>
-                </slot>
-            </div>
-        </div>
-
-        <slot
-            name="errors"
-            v-bind="{ error, errors, id: $attrs.id, name: $attrs.name }">  
-            <FormControlErrors
-                v-if="!!(error || errors)"
-                :id="id"
-                v-slot="{ error }"
-                :name="name"
-                :error="error"
-                :errors="errors">
-                <div
-                    invalid
-                    class="invalid-feedback">
-                    {{ error }}<br>
-                </div>
-            </FormControlErrors>
-        </slot>
-        
-        <slot
-            name="feedback"
-            v-bind="{ feedback }">
-            <FormControlFeedback
-                v-slot="{ feedback }"
-                :feedback="feedback">
-                <div
-                    valid
-                    class="valid-feedback">
-                    {{ feedback }}
-                </div>
-            </FormControlFeedback>
-        </slot>
-
-        <slot
-            name="help"
-            v-bind="{ helpText }">
-            <small
-                v-if="helpText"
-                ref="help"
-                class="form-help">
-                {{ helpText }}
-            </small>
-        </slot>
-    </div>
-</template>

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "customConditions": ["source"],
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "jsx": "preserve",
-    "jsxImportSource": "vue"
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.vue",
-  ],
-  "exclude": ["node_modules"]
-}

package/vite.config.js

@@ -1,47 +0,0 @@
-import tailwindcss from '@tailwindcss/vite';
-import vue from '@vitejs/plugin-vue';
-import { pascalCase } from 'change-case';
-import path from 'path';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import pkg from './package.json';
-
-const fileName = pkg.name.split('/')[1];
-
-const external = [
-    ...(pkg.dependencies ? Object.keys(pkg.dependencies) : []),
-    ...(pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [])
-];
-
-export default ({ command }) => defineConfig({
-    build: {
-        sourcemap: command === 'build',
-        lib: {
-            entry: path.resolve(__dirname, 'index.ts'),
-            name: pascalCase(fileName),
-            fileName,
-        },
-        rollupOptions: {
-            external,
-            output: {
-                globals: external.reduce((carry, dep) => {
-                    return Object.assign(carry, {
-                        [dep]: pascalCase(dep)
-                    });
-                }, {}),
-            }
-        },
-        watch: !process.env.NODE_ENV && {
-            include: [
-                './tailwindcss/**/*.js'
-            ]
-        }
-    },
-    plugins: [
-        vue(),
-        dts({
-            entryRoot: path.resolve(__dirname, './'),
-        }),
-        tailwindcss()
-    ],
-});