nuance-ui 0.2.10 → 0.2.12

package/dist/runtime/components/tree/_ui/tree-root.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { getSize } from "@nui/utils";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 import { useTemplateRef } from "vue";
@@ -19,24 +19,26 @@ const {
   loadBranch,
   filter
 } = defineProps({
-  loop: { type: Boolean, required: false },
-  orientation: { type: String, required: false },
-  attr: { type: String, required: false },
   iconResolver: { type: Function, required: false },
   removable: { type: Boolean, required: false },
   selectable: { type: Boolean, required: false },
   loadBranch: { type: Function, required: true },
   filter: { type: [String, null, Function], required: false },
-  variant: { type: String, required: false },
   color: { type: null, required: false },
-  size: { type: null, required: false }
+  size: { type: null, required: false },
+  variant: { type: String, required: false },
+  loop: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  attr: { type: String, required: false }
 });
 const emit = defineEmits(["delete"]);
 const active = defineModel("active", { type: [String, null], ...{ default: null } });
 const selected = defineModel("selected", { type: Array, ...{ default: [] } });
 const expanded = defineModel("expanded", { type: Array, ...{ default: [] } });
-const style = useStyleResolver(() => ({
-  "--icon-size": getSize(size)
+const style = useVarsResolver(() => ({
+  root: {
+    "--icon-size": getSize(size)
+  }
 }));
 const root = useTemplateRef("parent");
 onClickOutside(root, () => selected.value = []);
@@ -69,7 +71,7 @@ if (removable) {
 			is='ul'
 			ref='parent'
 			role='tree'
-			:style
+			:style='style.root'
 			:class='$style.root'
 			@keydown.esc.prevent='selected = []'
 		>
@@ -78,14 +80,6 @@ if (removable) {
 	</RovingFocus>
 </template>
 
-<style module lang="postcss">
-.root {
-	--tree-icon-size: var(--spacing-md);
-
-	display: flex;
-	flex-direction: column;
-	gap: .25rem;
-
-	padding-inline-start: 0;
-}
+<style module>
+.root{--tree-icon-size:var(--spacing-md);display:flex;flex-direction:column;gap:.25rem;padding-inline-start:0}
 </style>

package/dist/runtime/components/tree/_ui/tree-root.vue.d.ts

@@ -1,7 +1,8 @@
-import type { ButtonProps } from '@nui/components';
+import type { ButtonProps, ButtonVariant } from '@nui/components';
+import type { NuanceColor } from '@nui/types';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
 import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../types.js';
-export type TreeRootProps = RovingFocusProps & {
+export interface TreeRootProps extends RovingFocusProps {
     /** Resolves the icon for a given tree item */
     iconResolver?: TreeIconResolver;
     /** If set, selected items can be deleted with the Delete key */
@@ -12,13 +13,13 @@ export type TreeRootProps = RovingFocusProps & {
     loadBranch: TreeLoader;
     /** Filters which items are rendered */
     filter?: TreeFilter;
-    /** Visual variant */
-    variant?: ButtonProps['variant'];
     /** Color from theme */
-    color?: ButtonProps['color'];
+    color?: NuanceColor;
     /** Component size */
     size?: ButtonProps['size'];
-};
+    /** Visual variant */
+    variant?: ButtonVariant;
+}
 type __VLS_Props = TreeRootProps;
 type __VLS_ModelProps = {
     'active'?: TreeModels['active'];

package/dist/runtime/components/tree/tree.vue

@@ -11,17 +11,17 @@ const {
   filter = "directory",
   ...props
 } = defineProps({
-  loop: { type: Boolean, required: false },
-  orientation: { type: String, required: false },
-  attr: { type: String, required: false },
   iconResolver: { type: Function, required: false },
   removable: { type: Boolean, required: false },
   selectable: { type: Boolean, required: false },
   loadBranch: { type: Function, required: true },
   filter: { type: [String, null, Function], required: false },
-  variant: { type: String, required: false },
   color: { type: null, required: false },
-  size: { type: null, required: false }
+  size: { type: null, required: false },
+  variant: { type: String, required: false },
+  loop: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  attr: { type: String, required: false }
 });
 defineEmits(["delete"]);
 const active = defineModel("active", { type: [String, null], ...{ default: null } });

package/dist/runtime/composables/index.d.ts

@@ -2,5 +2,5 @@ export * from './create-strict-injection.js';
 export * from './use-active-link.js';
 export * from './use-date-config.js';
 export * from './use-selectable-group.js';
-export * from './use-style-resolver.js';
 export * from './use-theme.js';
+export * from './use-vars-resolver.js';

package/dist/runtime/composables/index.js

@@ -2,5 +2,5 @@ export * from "./create-strict-injection.js";
 export * from "./use-active-link.js";
 export * from "./use-date-config.js";
 export * from "./use-selectable-group.js";
-export * from "./use-style-resolver.js";
 export * from "./use-theme.js";
+export * from "./use-vars-resolver.js";

package/dist/runtime/composables/use-vars-resolver.d.ts

@@ -0,0 +1,4 @@
+import type { CssVariable, NuanceTheme, TransformVars } from '@nui/types';
+import type { ComputedRef } from 'vue';
+/** Reactive style object builder. */
+export declare function useVarsResolver<T extends Record<never, CssVariable>>(factory: (theme: NuanceTheme) => TransformVars<T>): ComputedRef<TransformVars<T>>;

package/dist/runtime/composables/use-vars-resolver.js

@@ -0,0 +1,6 @@
+import { computed } from "vue";
+import { useTheme } from "./use-theme.js";
+export function useVarsResolver(factory) {
+  const theme = useTheme();
+  return computed(() => factory(theme.value));
+}

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;
+    };
+};