nuance-ui 0.2.11 → 0.2.12

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.11",
+  "version": "0.2.12",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -35,6 +35,7 @@ const module$1 = defineNuxtModule({
     const aliases = {
       composables: resolve("./runtime/composables"),
       components: resolve("./runtime/components"),
+      form: resolve("./runtime/form"),
       utils: resolve("./runtime/utils"),
       types: resolve("./runtime/types"),
       modals: resolve("./runtime/modals")
@@ -70,6 +71,17 @@ const module$1 = defineNuxtModule({
           "**/*.module.css"
         ]
       });
+      addComponentsDir({
+        path: aliases.form,
+        prefix: options.prefix,
+        pathPrefix: false,
+        extensions: [".vue"],
+        ignore: [
+          "**/_*/**",
+          "**/types/**",
+          "**/*.module.css"
+        ]
+      });
       addImportsDir(aliases.composables);
       addImportsDir(aliases.utils);
     }

package/dist/runtime/components/input/number-input.vue

@@ -61,7 +61,7 @@ function handleBlur() {
 				<input
 					:id
 					v-model='value'
-					:class='css'
+					v-bind='{ ...$attrs, class: css }'
 					:min
 					:max
 					:step

package/dist/runtime/components/input/text-input.vue

@@ -32,7 +32,10 @@ defineExpose({
 </script>
 
 <template>
-	<InputWrapper v-bind='props' :class='[$attrs.class, classes?.wrapper]'>
+	<InputWrapper
+		v-bind='props'
+		:class='[$attrs.class, classes?.wrapper]'
+	>
 		<BaseInput>
 			<template v-if='!!$slots.leftSection || icon' #leftSection>
 				<slot name='leftSection'>

package/dist/runtime/components/textarea.d.vue.ts

@@ -2,6 +2,8 @@ import type { InputBaseProps, InputWrapperProps } from './input/index.js';
 export interface TextareaProps extends InputWrapperProps, InputBaseProps {
     /** Icon displayed in the left section */
     icon?: string;
+    /** If set, enables textarea height growing with its content @default false */
+    autosize?: boolean;
 }
 type __VLS_Props = TextareaProps;
 type __VLS_ModelProps = {
@@ -21,11 +23,11 @@ type __VLS_Slots = {} & {
     description?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    $el: HTMLTextAreaElement | null | undefined;
+    $el: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+    "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/textarea.vue

@@ -1,10 +1,17 @@
 <script setup>
-import { unrefElement, useTextareaAutosize } from "@vueuse/core";
+import { useTextareaAutosize } from "@vueuse/core";
 import { useTemplateRef } from "vue";
 import InputBase from "./input/ui/input-base.vue";
 import InputWrapper from "./input/ui/input-wrapper.vue";
-const { icon, ...props } = defineProps({
+const {
+  icon,
+  autosize = false,
+  multiline = true,
+  resize,
+  ...props
+} = defineProps({
   icon: { type: String, required: false },
+  autosize: { type: Boolean, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -20,21 +27,27 @@ const { icon, ...props } = defineProps({
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
-const model = defineModel({ type: String });
-const ref = useTemplateRef("input");
-const { input } = useTextareaAutosize({
-  input: model.value,
-  styleProp: "minHeight",
-  element: unrefElement(ref.value)
-});
+const model = defineModel({ type: String, ...{ default: "" } });
+const inputRef = useTemplateRef("input");
+if (autosize) {
+  useTextareaAutosize({
+    element: inputRef,
+    input: model
+  });
+}
 defineExpose({
-  $el: unrefElement(ref.value)
+  $el: inputRef
 });
 </script>
 
 <template>
-	<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
-		<InputBase>
+	<InputWrapper
+		v-bind='props'
+		:multiline
+		:class='$attrs?.class'
+		:resize='autosize ? void 0 : resize'
+	>
+		<InputBase :classes='{ root: $style.test }'>
 			<template v-if='!!$slots.leftSection || icon' #leftSection>
 				<slot name='leftSection'>
 					<Icon v-if='icon' :name='icon' />
@@ -49,7 +62,7 @@ defineExpose({
 					v-model='model'
 					:class='[css, $style.textarea]'
 					:required='props.required'
-					:disabled='props.required'
+					:disabled='props.disabled'
 					:readonly='props.readonly'
 				/>
 			</template>
@@ -72,5 +85,5 @@ defineExpose({
 </template>
 
 <style module>
-.textarea{height:auto;scrollbar-width:none;-ms-overflow-style:none}.textarea::-webkit-scrollbar{display:none}
+.textarea{--input-padding-y:var(--input-padding-inline-start);height:auto;line-height:1.2;min-height:rem(62px);scrollbar-width:none;-ms-overflow-style:none}.textarea::-webkit-scrollbar{display:none}
 </style>

package/dist/runtime/components/textarea.vue.d.ts

@@ -2,6 +2,8 @@ import type { InputBaseProps, InputWrapperProps } from './input/index.js';
 export interface TextareaProps extends InputWrapperProps, InputBaseProps {
     /** Icon displayed in the left section */
     icon?: string;
+    /** If set, enables textarea height growing with its content @default false */
+    autosize?: boolean;
 }
 type __VLS_Props = TextareaProps;
 type __VLS_ModelProps = {
@@ -21,11 +23,11 @@ type __VLS_Slots = {} & {
     description?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    $el: HTMLTextAreaElement | null | undefined;
+    $el: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+    "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/form/date-field.d.vue.ts

@@ -0,0 +1,45 @@
+import type { RuleExpression } from 'vee-validate';
+import type { DateSelection, SelectionMode } from '../components/calendar/index.js';
+import type { DatePickerProps } from '../components/input/date-picker.vue.js';
+export interface DateFieldProps<Mode extends SelectionMode = 'single'> extends Omit<DatePickerProps<Mode>, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<DateSelection<Mode>>;
+    /** When to trigger validation @default `'change'` */
+    validateOn?: 'change' | 'submit';
+    /** Pre-fills the field value */
+    initialValue?: DateSelection<Mode>;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare const __VLS_export: <Mode extends SelectionMode = "single">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DateFieldProps<Mode>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        leftSection?: (props: {}) => any;
+    } & {
+        rightSection?: (props: {}) => any;
+    } & {
+        label?: (props: {}) => any;
+    } & {
+        description?: (props: {}) => any;
+    } & {
+        error?: (props: {
+            error: string | undefined;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/form/date-field.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { useField } from "vee-validate";
+import DatePicker from "../components/input/date-picker.vue";
+const {
+  name,
+  rules,
+  validateOn = "change",
+  initialValue,
+  controlled = true,
+  ...props
+} = defineProps({
+  name: { type: String, required: true },
+  rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
+  validateOn: { type: String, required: false },
+  initialValue: { type: null, required: false },
+  controlled: { type: Boolean, required: false },
+  valueFormat: { type: [String, Object], required: false },
+  size: { type: [String, Object], required: false },
+  withWeekNumbers: { type: Boolean, required: false },
+  prevDisabled: { type: Function, required: false },
+  nextDisabled: { type: Function, required: false },
+  minLevel: { type: String, required: false },
+  maxLevel: { type: String, required: false },
+  withCellSpacing: { type: Boolean, required: false },
+  mode: { type: null, required: false },
+  numberOfMonths: { type: Number, required: false },
+  weekdayFormat: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false },
+  minDate: { type: [Date, String], required: false },
+  maxDate: { type: [Date, String], required: false },
+  excludeDate: { type: Function, required: false },
+  highlightToday: { type: Boolean, required: false },
+  hideOutsideDates: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  config: { type: Object, required: false },
+  multiline: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  variant: { type: String, required: false },
+  resize: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false }
+});
+const {
+  value,
+  errorMessage,
+  handleChange
+} = useField(() => name, rules, {
+  validateOnValueUpdate: false,
+  validateOnMount: false,
+  initialValue,
+  controlled
+});
+</script>
+
+<template>
+	<DatePicker
+		v-bind='props'
+		:model-value='value'
+		:error='errorMessage'
+		@update:model-value='handleChange($event, validateOn === "change" || !!errorMessage)'
+	>
+		<template v-if='$slots.leftSection' #leftSection>
+			<slot name='leftSection' />
+		</template>
+
+		<template v-if='$slots.rightSection' #rightSection>
+			<slot name='rightSection' />
+		</template>
+
+		<template v-if='$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<template v-if='$slots.description' #description>
+			<slot name='description' />
+		</template>
+
+		<template v-if='$slots.error' #error>
+			<slot name='error' :error='errorMessage' />
+		</template>
+	</DatePicker>
+</template>

package/dist/runtime/form/date-field.vue.d.ts

@@ -0,0 +1,45 @@
+import type { RuleExpression } from 'vee-validate';
+import type { DateSelection, SelectionMode } from '../components/calendar/index.js';
+import type { DatePickerProps } from '../components/input/date-picker.vue.js';
+export interface DateFieldProps<Mode extends SelectionMode = 'single'> extends Omit<DatePickerProps<Mode>, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<DateSelection<Mode>>;
+    /** When to trigger validation @default `'change'` */
+    validateOn?: 'change' | 'submit';
+    /** Pre-fills the field value */
+    initialValue?: DateSelection<Mode>;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare const __VLS_export: <Mode extends SelectionMode = "single">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DateFieldProps<Mode>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        leftSection?: (props: {}) => any;
+    } & {
+        rightSection?: (props: {}) => any;
+    } & {
+        label?: (props: {}) => any;
+    } & {
+        description?: (props: {}) => any;
+    } & {
+        error?: (props: {
+            error: string | undefined;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/form/date-time-field.d.vue.ts

@@ -0,0 +1,37 @@
+import type { RuleExpression } from 'vee-validate';
+import type { DatePickerProps } from '../components/date-time-picker.vue.js';
+export interface DateTimeFieldProps extends Omit<DatePickerProps, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<string | Date | null>;
+    /** When to trigger validation @default `'change'` */
+    validateOn?: 'change' | 'submit';
+    /** Pre-fills the field value */
+    initialValue?: string | Date | null;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare var __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {
+    error: string | undefined;
+};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_11) => any;
+} & {
+    rightSection?: (props: typeof __VLS_14) => any;
+} & {
+    label?: (props: typeof __VLS_17) => any;
+} & {
+    description?: (props: typeof __VLS_20) => any;
+} & {
+    error?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DateTimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DateTimeFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/date-time-field.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { useField } from "vee-validate";
+import DateTimePicker from "../components/date-time-picker.vue";
+const {
+  name,
+  rules,
+  validateOn = "change",
+  initialValue = null,
+  controlled = true,
+  ...props
+} = defineProps({
+  name: { type: String, required: true },
+  rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
+  validateOn: { type: String, required: false },
+  initialValue: { type: [String, Date, null], required: false },
+  controlled: { type: Boolean, required: false },
+  format: { type: [String, Object], required: false },
+  calendarProps: { type: Object, required: false },
+  timePickerProps: { type: Object, required: false },
+  clearable: { type: Boolean, required: false },
+  multiline: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
+  variant: { type: String, required: false },
+  resize: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  withSeconds: { type: Boolean, required: false }
+});
+const {
+  value,
+  errorMessage,
+  handleChange
+} = useField(() => name, rules, {
+  validateOnValueUpdate: false,
+  validateOnMount: false,
+  initialValue,
+  controlled
+});
+</script>
+
+<template>
+	<DateTimePicker
+		v-bind='props'
+		:model-value='value'
+		:error='errorMessage'
+		@update:model-value='handleChange($event, validateOn === "change" || !!errorMessage)'
+	>
+		<template v-if='$slots.leftSection' #leftSection>
+			<slot name='leftSection' />
+		</template>
+
+		<template v-if='$slots.rightSection' #rightSection>
+			<slot name='rightSection' />
+		</template>
+
+		<template v-if='$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<template v-if='$slots.description' #description>
+			<slot name='description' />
+		</template>
+
+		<template v-if='$slots.error' #error>
+			<slot name='error' :error='errorMessage' />
+		</template>
+	</DateTimePicker>
+</template>

package/dist/runtime/form/date-time-field.vue.d.ts

@@ -0,0 +1,37 @@
+import type { RuleExpression } from 'vee-validate';
+import type { DatePickerProps } from '../components/date-time-picker.vue.js';
+export interface DateTimeFieldProps extends Omit<DatePickerProps, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<string | Date | null>;
+    /** When to trigger validation @default `'change'` */
+    validateOn?: 'change' | 'submit';
+    /** Pre-fills the field value */
+    initialValue?: string | Date | null;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare var __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {
+    error: string | undefined;
+};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_11) => any;
+} & {
+    rightSection?: (props: typeof __VLS_14) => any;
+} & {
+    label?: (props: typeof __VLS_17) => any;
+} & {
+    description?: (props: typeof __VLS_20) => any;
+} & {
+    error?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DateTimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DateTimeFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/email-field.d.vue.ts

@@ -0,0 +1,37 @@
+import type { RuleExpression } from 'vee-validate';
+import type { TextInputProps } from '../components/input/text-input.vue.js';
+export interface EmailFieldProps extends Omit<TextInputProps, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<string>;
+    /** When to trigger validation @default `'blur'` */
+    validateOn?: 'blur' | 'submit' | 'change';
+    /** Pre-fills the field value */
+    initialValue?: string;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare var __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_21: {}, __VLS_24: {
+    error: string | undefined;
+};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_12) => any;
+} & {
+    rightSection?: (props: typeof __VLS_15) => any;
+} & {
+    label?: (props: typeof __VLS_18) => any;
+} & {
+    description?: (props: typeof __VLS_21) => any;
+} & {
+    error?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<EmailFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmailFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/email-field.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { useField } from "vee-validate";
+import EmailInput from "../components/input/email-input.vue";
+const {
+  name,
+  rules,
+  validateOn = "blur",
+  initialValue,
+  controlled = true,
+  ...props
+} = defineProps({
+  name: { type: String, required: true },
+  rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
+  validateOn: { type: String, required: false },
+  initialValue: { type: String, required: false },
+  controlled: { type: Boolean, required: false },
+  multiline: { type: Boolean, required: false },
+  withAria: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
+  icon: { type: String, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
+  variant: { type: String, required: false },
+  resize: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const {
+  value,
+  errorMessage,
+  handleBlur,
+  handleChange
+} = useField(() => name, rules, {
+  validateOnValueUpdate: false,
+  validateOnMount: false,
+  initialValue,
+  controlled
+});
+</script>
+
+<template>
+	<EmailInput
+		v-bind='props'
+		:model-value='value'
+		:error='errorMessage'
+		:name
+		@update:model-value='handleChange($event, !!errorMessage)'
+		@blur='handleBlur($event, validateOn === "blur")'
+	>
+		<template v-if='$slots.leftSection' #leftSection>
+			<slot name='leftSection' />
+		</template>
+
+		<template v-if='$slots.rightSection' #rightSection>
+			<slot name='rightSection' />
+		</template>
+
+		<template v-if='$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<template v-if='$slots.description' #description>
+			<slot name='description' />
+		</template>
+
+		<template v-if='$slots.error' #error>
+			<slot name='error' :error='errorMessage' />
+		</template>
+	</EmailInput>
+</template>

package/dist/runtime/form/email-field.vue.d.ts

@@ -0,0 +1,37 @@
+import type { RuleExpression } from 'vee-validate';
+import type { TextInputProps } from '../components/input/text-input.vue.js';
+export interface EmailFieldProps extends Omit<TextInputProps, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<string>;
+    /** When to trigger validation @default `'blur'` */
+    validateOn?: 'blur' | 'submit' | 'change';
+    /** Pre-fills the field value */
+    initialValue?: string;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare var __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_21: {}, __VLS_24: {
+    error: string | undefined;
+};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_12) => any;
+} & {
+    rightSection?: (props: typeof __VLS_15) => any;
+} & {
+    label?: (props: typeof __VLS_18) => any;
+} & {
+    description?: (props: typeof __VLS_21) => any;
+} & {
+    error?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<EmailFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmailFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};