@byyuurin/ui 0.0.11 → 0.2.0

package/dist/runtime/components/Form.vue

@@ -1,48 +1,59 @@
 <script>
-export class FormValidationExceptionError extends Error {
-  formId;
-  errors;
-  children;
-  constructor(formId, errors, childErrors) {
-    super("Form validation exception");
-    this.name = "FormValidationExceptionError";
-    this.formId = formId;
-    this.errors = errors;
-    this.children = childErrors;
-    Object.setPrototypeOf(this, FormValidationExceptionError.prototype);
-  }
-}
+import theme from "#build/ui/form";
 </script>
 
 <script setup>
 import { useEventBus } from "@vueuse/core";
-import { computed, nextTick, onMounted, onUnmounted, readonly, ref, useId } from "vue";
-import { injectFormBus, provideFormBus, provideFormErrors, provideFormInputs, provideFormLoading, provideFormOptions } from "../app/injections";
-import { useTheme } from "../composables/useTheme";
-import { validateSchema } from "../utils";
+import { computed, nextTick, onMounted, onUnmounted, reactive, readonly, ref, shallowRef, useId } from "vue";
+import { useAppConfig } from "#imports";
+import { injectFormBus, injectFormState, provideFormBus, provideFormErrors, provideFormInputs, provideFormLoading, provideFormOptions, provideFormState } from "../composables/useFormField";
+import { FormValidationException } from "../types/form";
+import { getAtPath, setAtPath, validateSchema } from "../utils/form";
+import { cv, merge } from "../utils/style";
 const props = defineProps({
   id: { type: [String, Number], required: false },
   schema: { type: null, required: false },
-  state: { type: Object, required: true },
+  state: { type: null, required: true },
   validate: { type: Function, required: false },
   validateOn: { type: Array, required: false, default: () => ["input", "blur", "change"] },
   disabled: { type: Boolean, required: false },
+  name: { type: null, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
   transform: { type: Boolean, required: false, default: true },
+  nested: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false, default: true },
   onSubmit: { type: Function, required: false },
-  class: { type: null, required: false }
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
 });
 const emit = defineEmits(["submit", "error"]);
 defineSlots();
 const formId = props.id ?? useId();
 const bus = useEventBus(`form-${formId}`);
-const parentBus = injectFormBus();
+const parentBus = props.nested && injectFormBus();
+const parentState = props.nested ? injectFormState() : void 0;
+const state = computed(() => {
+  if (parentState?.value)
+    return props.name ? getAtPath(parentState.value, props.name) : parentState.value;
+  return props.state;
+});
 provideFormBus(bus);
+provideFormState(state);
 const nestedForms = ref(/* @__PURE__ */ new Map());
+onMounted(async () => {
+  if (parentBus) {
+    await nextTick();
+    parentBus.emit({ type: "attach", validate: validateFn, formId, name: props.name, api });
+  }
+});
+onUnmounted(() => {
+  bus.reset();
+  if (parentBus)
+    parentBus.emit({ type: "detach", formId });
+});
 onMounted(() => {
   bus.on(async (event) => {
     if (event.type === "attach") {
-      nestedForms.value.set(event.formId, { validate: event.validate });
+      nestedForms.value.set(event.formId, { validate: event.validate, name: event.name, api: event.api });
     } else if (event.type === "detach") {
       nestedForms.value.delete(event.formId);
     } else if (props.validateOn?.includes(event.type) && !loading.value) {
@@ -59,26 +70,13 @@ onMounted(() => {
       dirtyFields.add(event.name);
   });
 });
-onUnmounted(() => {
-  bus.reset();
-});
-onMounted(async () => {
-  if (parentBus) {
-    await nextTick();
-    parentBus.emit({ type: "attach", validate: validateFn, formId });
-  }
-});
-onUnmounted(() => {
-  if (parentBus)
-    parentBus.emit({ type: "detach", formId });
-});
 const errors = ref([]);
 provideFormErrors(errors);
 const inputs = ref({});
 provideFormInputs(inputs);
-const dirtyFields = /* @__PURE__ */ new Set();
-const touchedFields = /* @__PURE__ */ new Set();
-const blurredFields = /* @__PURE__ */ new Set();
+const dirtyFields = reactive(/* @__PURE__ */ new Set());
+const touchedFields = reactive(/* @__PURE__ */ new Set());
+const blurredFields = reactive(/* @__PURE__ */ new Set());
 function resolveErrorIds(errs) {
   return errs.map((err) => ({
     ...err,
@@ -97,61 +95,50 @@ async function getErrors() {
   }
   return resolveErrorIds(errs);
 }
-async function validateFn(options) {
-  const _options = {
-    silent: false,
-    nested: true,
-    transform: false,
-    ...options
-  };
-  const names = _options.name && !Array.isArray(_options.name) ? [_options.name] : _options.name;
-  const nestedValidatePromises = !names && _options.nested ? Array.from(nestedForms.value.values()).map(
-    ({ validate }) => validate(_options).then(() => {
-    }).catch((error) => {
-      if (!(error instanceof FormValidationExceptionError))
-        throw error;
-      return error;
-    })
-  ) : [];
-  if (names) {
-    const otherErrors = errors.value.filter((error) => !names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern;
-      return name === error.name || pattern && error.name?.match(pattern);
-    }));
-    const pathErrors = (await getErrors()).filter((error) => names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern;
-      return name === error.name || pattern && error.name?.match(pattern);
-    }));
-    errors.value = otherErrors.concat(pathErrors);
-  } else {
-    errors.value = await getErrors();
+async function validateFn(opts = { silent: false, nested: false, transform: false }) {
+  const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name;
+  let nestedResults = [];
+  let nestedErrors = [];
+  if (!names && opts.nested) {
+    const validations = Array.from(nestedForms.value.values()).map((form) => validateNestedForm(form, opts));
+    const results = await Promise.all(validations);
+    nestedErrors = results.filter((r) => r.error).flatMap((r) => r.error.errors.map((e) => addFormPath(e, r.name)));
+    nestedResults = results.filter((r) => r.output !== void 0);
   }
-  const childErrors = (await Promise.all(nestedValidatePromises)).filter((val) => val !== void 0);
-  if (errors.value.length + childErrors.length > 0) {
-    if (_options.silent)
+  const currentErrors = await getErrors();
+  const allErrors = [...currentErrors, ...nestedErrors];
+  errors.value = names ? filterErrorsByNames(allErrors, names) : allErrors;
+  if (errors.value?.length) {
+    if (opts.silent)
       return false;
-    throw new FormValidationExceptionError(formId, errors.value, childErrors);
+    throw new FormValidationException(formId, errors.value);
   }
-  if (_options.transform)
-    Object.assign(props.state, transformedState.value);
-  return props.state;
+  if (opts.transform) {
+    nestedResults.forEach((result) => {
+      if (result.name)
+        setAtPath(transformedState.value, result.name, result.output);
+      else
+        Object.assign(transformedState.value, result.output);
+    });
+    return transformedState.value ?? state.value;
+  }
+  return state.value;
 }
-const loading = ref(false);
+const loading = shallowRef(false);
 provideFormLoading(readonly(loading));
 async function onSubmitWrapper(payload) {
-  loading.value = true;
+  loading.value = props.loadingAuto && true;
   const event = payload;
   try {
     event.data = await validateFn({ nested: true, transform: props.transform });
     await props.onSubmit?.(event);
     dirtyFields.clear();
   } catch (error) {
-    if (!(error instanceof FormValidationExceptionError))
+    if (!(error instanceof FormValidationException))
       throw error;
     const errorEvent = {
       ...event,
-      errors: error.errors,
-      children: error.children
+      errors: error.errors
     };
     emit("error", errorEvent);
   } finally {
@@ -163,35 +150,132 @@ provideFormOptions(computed(() => ({
   disabled: disabled.value,
   validateOnInputDelay: props.validateOnInputDelay
 })));
-defineExpose({
+async function validateNestedForm(form, opts) {
+  try {
+    const result = await form.validate({ ...opts, silent: false });
+    return { name: form.name, output: result };
+  } catch (error) {
+    if (!(error instanceof FormValidationException))
+      throw error;
+    return { name: form.name, error };
+  }
+}
+function addFormPath(error, formPath) {
+  if (!formPath || !error.name)
+    return error;
+  return { ...error, name: `${formPath}.${error.name}` };
+}
+function stripFormPath(error, formPath) {
+  const prefix = `${formPath}.`;
+  const name = error?.name?.startsWith(prefix) ? error.name.slice(prefix.length) : error.name;
+  return { ...error, name };
+}
+function filterFormErrors(errors2, formPath) {
+  if (!formPath)
+    return errors2;
+  return errors2.filter((e) => e?.name?.startsWith(`${formPath}.`)).map((e) => stripFormPath(e, formPath));
+}
+function getFormErrors(form) {
+  return form.api.getErrors().map((e) => form.name ? { ...e, name: `${form.name}.${e.name}` } : e);
+}
+function matchesTarget(target, path) {
+  if (!target || !path)
+    return true;
+  if (target instanceof RegExp)
+    return target.test(path);
+  return path === target || typeof target === "string" && target.startsWith(`${path}.`);
+}
+function getNestedTarget(target, formPath) {
+  if (!target || target instanceof RegExp)
+    return target;
+  if (formPath === target)
+    return void 0;
+  if (typeof target === "string" && target.startsWith(`${formPath}.`))
+    return target.slice(Math.max(0, formPath.length + 1));
+  return target;
+}
+function filterErrorsByNames(allErrors, names) {
+  const nameSet = new Set(names);
+  const patterns = names.map((name) => inputs.value?.[name]?.pattern).filter(Boolean);
+  const matchesNames = (error) => {
+    if (!error.name)
+      return false;
+    if (nameSet.has(error.name))
+      return true;
+    return patterns.some((pattern) => pattern.test(error.name));
+  };
+  const keepErrors = errors.value.filter((error) => !matchesNames(error));
+  const newErrors = allErrors.filter(matchesNames);
+  return [...keepErrors, ...newErrors];
+}
+function filterErrorsByTarget(currentErrors, target) {
+  return currentErrors.filter((err) => target instanceof RegExp ? !(err.name && target.test(err.name)) : !err.name || err.name !== target);
+}
+function isLocalError(error) {
+  return !error.name || !!inputs.value[error.name];
+}
+const api = {
   validate: validateFn,
+  // FIXME: type issue
   errors,
   setErrors(errs, name) {
-    errors.value = name ? errors.value.filter((error) => error.name !== name).concat(resolveErrorIds(errs)) : resolveErrorIds(errs);
+    const localErrors = resolveErrorIds(errs.filter(isLocalError));
+    const nestedErrors = [];
+    for (const form of nestedForms.value.values()) {
+      if (matchesTarget(name, form.name)) {
+        const formErrors = filterFormErrors(errs, form.name);
+        form.api.setErrors(formErrors, getNestedTarget(name, form.name || ""));
+        nestedErrors.push(...getFormErrors(form));
+      }
+    }
+    if (name) {
+      const keepErrors = filterErrorsByTarget(errors.value, name);
+      errors.value = [...keepErrors, ...localErrors, ...nestedErrors];
+    } else {
+      errors.value = [...localErrors, ...nestedErrors];
+    }
   },
   async submit() {
     await onSubmitWrapper(new Event("submit"));
   },
   getErrors(name) {
-    if (name)
-      return errors.value.filter((err) => err.name === name);
-    return errors.value;
+    if (!name)
+      return errors.value;
+    return errors.value.filter((err) => name instanceof RegExp ? err.name && name.test(err.name) : err.name === name);
   },
   clear(name) {
-    errors.value = name ? errors.value.filter((err) => err.name !== name) : [];
+    const localErrors = name ? errors.value.filter((err) => isLocalError(err) && (name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name)) : [];
+    const nestedErrors = [];
+    for (const form of nestedForms.value.values()) {
+      if (matchesTarget(name, form.name))
+        form.api.clear();
+      nestedErrors.push(...getFormErrors(form));
+    }
+    errors.value = [...localErrors, ...nestedErrors];
   },
   disabled,
-  dirty: computed(() => dirtyFields.size > 0),
+  loading,
+  dirty: computed(() => !!dirtyFields.size),
   dirtyFields: readonly(dirtyFields),
   blurredFields: readonly(blurredFields),
   touchedFields: readonly(touchedFields)
+};
+defineExpose(api);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.form));
+  return styler(props);
 });
-const { generateStyle } = useTheme();
-const style = computed(() => generateStyle("form", props));
 </script>
 
 <template>
-  <component :is="parentBus ? 'div' : 'form'" :id="formId" :class="style.base()" data-part="base" @submit.prevent="onSubmitWrapper">
-    <slot :errors="errors"></slot>
+  <component
+    :is="parentBus ? 'div' : 'form'"
+    :id="formId"
+    :class="ui.base({ class: props.class })"
+    data-part="base"
+    @submit.prevent="onSubmitWrapper"
+  >
+    <slot :errors="errors" :loading="loading"></slot>
   </component>
 </template>

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

@@ -1,47 +1,30 @@
-import type { ComputedRef, DeepReadonly, Ref } from 'vue';
-import type { form } from '../theme/index.js';
-import type { ComponentAttrs, FormError, FormErrorEvent, FormErrorWithId, FormInputEvents, FormSchema, FormSubmitEvent, FormValidateOptions } from '../types/index.js';
-export interface FormEmits<T extends object> {
-    submit: [payload: FormSubmitEvent<T>];
-    error: [payload: FormErrorEvent];
-}
-export interface FormSlots {
-    default?: (props?: {
-        errors: FormError[];
-    }) => any;
-}
-export interface FormExpose<T extends object> {
-    validate: (options?: FormValidateOptions<T>) => Promise<T | false>;
-    clear: (path?: string) => void;
-    errors: Ref<FormError[]>;
-    setErrors: (errors: FormError[], name?: keyof T) => void;
-    getErrors: (name?: keyof T) => FormError[];
-    submit: () => Promise<void>;
-    disabled: ComputedRef<boolean>;
-    dirty: ComputedRef<boolean>;
-    dirtyFields: DeepReadonly<Set<keyof T>>;
-    touchedFields: DeepReadonly<Set<keyof T>>;
-    blurredFields: DeepReadonly<Set<keyof T>>;
-}
-export interface FormProps<T extends object> extends Omit<ComponentAttrs<typeof form>, 'ui'> {
+import type { ComponentBaseProps, FormData, FormError, FormErrorEvent, FormErrorWithId, FormInputEvents, FormSchema, FormSubmitEvent, InferInput } from '../types';
+import type { StaticSlot } from '../types/utils';
+export interface FormProps<S extends FormSchema, T extends boolean = true, N extends boolean = false> extends ComponentBaseProps {
     id?: string | number;
-    /**  Schema to validate the form state. */
-    schema?: FormSchema<T>;
+    /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
+    schema?: S;
     /** An object representing the current state of the form. */
-    state: Partial<T>;
+    state: N extends false ? Partial<InferInput<S>> : never;
     /**
      * Custom validation function to validate the form state.
      * @param state - The current state of the form.
      * @returns A promise that resolves to an array of FormError objects, or an array of FormError objects directly.
      */
-    validate?: (state: Partial<T>) => Promise<FormError[]> | FormError[];
+    validate?: (state: Partial<InferInput<S>>) => Promise<FormError[]> | FormError[];
     /**
      * The list of input events that trigger the form validation.
+     * @remarks The form always validates on submit.
      * @default ["blur", "change", "input"]
      */
     validateOn?: FormInputEvents[];
     /** Disable all inputs inside the form. */
     disabled?: boolean;
+    /**
+     * Path of the form's state within it's parent form.
+     * Used for nesting forms. Only available if `nested` is true.
+     */
+    name?: N extends true ? string : never;
     /**
      * Delay in milliseconds before validating the form on input events.
      * @default 300
@@ -51,28 +34,70 @@ export interface FormProps<T extends object> extends Omit<ComponentAttrs<typeof
      * If true, schema transformations will be applied to the state on submit.
      * @default true
      */
-    transform?: boolean;
+    transform?: T & boolean;
+    /**
+     * If true, this form will attach to its parent Form and validate at the same time.
+     * @default false
+     */
+    nested?: N & boolean;
+    /**
+     * When `true`, all form elements will be disabled on `@submit` event.
+     *
+     * This will cause any focused input elements to lose their focus state.
+     * @default true
+     */
+    loadingAuto?: boolean;
     onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>);
 }
-export declare class FormValidationExceptionError extends Error {
-    formId: string | number;
-    errors: FormErrorWithId[];
-    children?: FormValidationExceptionError[];
-    constructor(formId: string | number, errors: FormErrorWithId[], childErrors?: FormValidationExceptionError[]);
+export interface FormEmits<S extends FormSchema, T extends boolean = true> {
+    submit: [event: FormSubmitEvent<FormData<S, T>>];
+    error: [event: FormErrorEvent];
+}
+export interface FormSlots {
+    default: StaticSlot<{
+        errors: FormError[];
+        loading: boolean;
+    }>;
 }
-declare const _default: <T extends object>(__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 onError?: ((payload: FormErrorEvent) => any) | undefined;
-        readonly onSubmit?: ((payload: FormSubmitEvent<T>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onError"> & FormProps<T> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<FormExpose<T>>): void;
+declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N extends boolean = false>(__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<FormProps<S, T, N> & {
+        onError?: ((event: FormErrorEvent) => any) | undefined;
+        onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        validate: any;
+        errors: import("vue").Ref<{
+            id?: string | undefined;
+            name?: string | undefined;
+            message: string;
+        }[], FormErrorWithId[] | {
+            id?: string | undefined;
+            name?: string | undefined;
+            message: string;
+        }[]>;
+        setErrors(errs: FormError[], name?: keyof InferInput<S> | string | RegExp): void;
+        submit(): Promise<void>;
+        getErrors(name?: keyof InferInput<S> | string | RegExp): {
+            id?: string | undefined;
+            name?: string | undefined;
+            message: string;
+        }[];
+        clear(name?: keyof InferInput<S> | string | RegExp): void;
+        disabled: import("vue").ComputedRef<boolean>;
+        loading: import("vue").ShallowRef<boolean, boolean>;
+        dirty: import("vue").ComputedRef<boolean>;
+        dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<S>>>>;
+        blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<S>>>>;
+        touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<S>>>>;
+    }>) => void;
     attrs: any;
     slots: FormSlots;
-    emit: ((evt: "error", payload: FormErrorEvent) => void) & ((evt: "submit", payload: FormSubmitEvent<T>) => void);
+    emit: ((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/FormField.vue

@@ -0,0 +1,108 @@
+<script>
+import theme from "#build/ui/form-field";
+</script>
+
+<script setup>
+import { Label, Primitive } from "reka-ui";
+import { computed, ref, useId, watch } from "vue";
+import { useAppConfig } from "#imports";
+import { injectFormErrors, injectFormInputs, provideFormField, provideFormInputId } from "../composables/useFormField";
+import { cv, merge } from "../utils/style";
+const props = defineProps({
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  errorPattern: { type: null, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  help: { type: String, required: false },
+  error: { type: [String, Boolean], required: false },
+  hint: { type: String, required: false },
+  size: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  eagerValidation: { type: Boolean, required: false },
+  validateOnInputDelay: { type: Number, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const slots = defineSlots();
+const formErrors = injectFormErrors();
+const error = computed(() => {
+  if (props.error)
+    return props.error;
+  const formError = formErrors?.value.find((error2) => {
+    if (error2.name && error2.name === props.name)
+      return true;
+    if (error2.name && props.errorPattern)
+      return error2.name.match(props.errorPattern);
+    return false;
+  });
+  return formError?.message;
+});
+const id = ref(useId());
+const ariaId = id.value;
+const formInputs = injectFormInputs();
+watch(id, () => {
+  if (formInputs && props.name)
+    formInputs.value[props.name] = { id: id.value, pattern: props.errorPattern };
+}, {
+  immediate: true
+});
+provideFormInputId(id);
+provideFormField(computed(() => ({
+  name: props.name,
+  size: props.size,
+  eagerValidation: props.eagerValidation,
+  validateOnInputDelay: props.validateOnInputDelay,
+  errorPattern: props.errorPattern,
+  hint: props.hint,
+  description: props.description,
+  help: props.help,
+  ariaId,
+  error: error.value
+})));
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.formField));
+  return styler(props);
+});
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <div v-if="props.label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })" data-part="labelWrapper">
+        <Label :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
+          <slot name="label" :label="props.label">
+            {{ props.label }}
+          </slot>
+        </Label>
+        <span v-if="props.hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })" data-part="hint">
+          <slot name="hint" :hint="props.hint">
+            {{ props.hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="props.description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+
+    <div :class="(props.label || !!slots.label || props.description || !!slots.description) && ui.container({ class: props.ui?.container })" data-part="container">
+      <slot :error="error"></slot>
+
+      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })" data-part="error">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </div>
+      <div v-else-if="props.help || !!slots.help" :class="ui.help({ class: props.ui?.help })" data-part="help">
+        <slot name="help" :help="props.help">
+          {{ props.help }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,63 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/form-field';
+import type { ComponentBaseProps, ComponentUIProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface FormFieldProps extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    /** The name of the FormField. Also used to match form errors. */
+    name?: string;
+    /** A regular expression to match form error names. */
+    errorPattern?: RegExp;
+    label?: string;
+    description?: string;
+    help?: string;
+    error?: string | boolean;
+    hint?: string;
+    /**
+     * @default "md"
+     */
+    size?: ThemeVariants['size'];
+    required?: boolean;
+    /** If true, validation on input will be active immediately instead of waiting for a blur event. */
+    eagerValidation?: boolean;
+    /**
+     * Delay in milliseconds before validating the form on input events.
+     * @default 300
+     */
+    validateOnInputDelay?: number;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface FormFieldSlots {
+    label: StaticSlot<{
+        label?: string;
+    }>;
+    hint: StaticSlot<{
+        hint?: string;
+    }>;
+    description: StaticSlot<{
+        description?: string;
+    }>;
+    help: StaticSlot<{
+        help?: string;
+    }>;
+    error: StaticSlot<{
+        error?: boolean | string;
+    }>;
+    default: StaticSlot<{
+        error?: boolean | string;
+    }>;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};