@vestow/vue 0.1.0

package/src/components/field/FieldSeparator.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { useSlots } from 'vue'
+import { cn } from '../../lib/utils'
+import Separator from '../separator/Separator.vue'
+
+const props = defineProps<ClassProps>()
+const slots = useSlots()
+</script>
+
+<template>
+  <!-- Chữ nằm ĐÈ lên đường kẻ và tự che nó bằng nền — không cắt đường kẻ làm
+       hai đoạn, nên chữ dài ngắn thế nào cũng không phải tính lại. -->
+  <div
+    data-slot="field-separator"
+    :data-content="Boolean(slots.default)"
+    :class="cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', props.class)"
+  >
+    <Separator class="absolute inset-0 top-1/2" />
+    <span
+      v-if="slots.default"
+      data-slot="field-separator-content"
+      class="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+    >
+      <slot />
+    </span>
+  </div>
+</template>

package/src/components/field/index.ts

@@ -0,0 +1,7 @@
+export { fieldVariants, type FieldVariants } from '../../variants/components/field'
+export { default as Field } from './Field.vue'
+export { default as FieldDescription } from './FieldDescription.vue'
+export { default as FieldGroup } from './FieldGroup.vue'
+export { default as FieldLabel } from './FieldLabel.vue'
+
+export { default as FieldSeparator } from './FieldSeparator.vue'

package/src/components/fieldset/Fieldset.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed, ref, useId } from 'vue'
+import { ChevronDown } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    legend?: string
+    /** Cho gập lại. Không bật thì phần chú giải không phải là nút. */
+    collapsible?: boolean
+    defaultOpen?: boolean
+    /** Điều khiển từ ngoài. `v-model:open`. */
+    open?: boolean
+    /**
+     * Khoá MỌI control bên trong — thuộc tính thật của `<fieldset>`, không phải
+     * một class. Không một cái `<div>` nào làm được việc này.
+     */
+    disabled?: boolean
+  }>(),
+  {
+    collapsible: false,
+    defaultOpen: true,
+    disabled: false,
+    /**
+     * Dòng này là bắt buộc, không phải cho gọn.
+     *
+     * Prop kiểu Boolean vắng mặt bị Vue ép thành `false`, nên thiếu nó thì mọi
+     * `<Fieldset>` không truyền `open` đều bị hiểu là "đang được điều khiển và
+     * đang đóng" — đúng cái bẫy đã ghi cho `SidebarProvider`, và cũng im lặng
+     * y như vậy. `defineModel` không nhận được default này nên phải khai tay
+     * prop cộng emit.
+     */
+    open: undefined,
+  },
+)
+
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+
+const internal = ref(props.defaultOpen)
+
+const isOpen = computed({
+  get: () => props.open ?? internal.value,
+  set: (value: boolean) => {
+    internal.value = value
+    emit('update:open', value)
+  },
+})
+
+const contentId = useId()
+</script>
+
+<template>
+  <fieldset
+    :disabled="props.disabled || undefined"
+    :class="cn(
+      // `min-w-0` là BẮT BUỘC. Mặc định của trình duyệt cho `<fieldset>` là
+      // `min-inline-size: min-content`, nên một bảng rộng hay một chuỗi không
+      // ngắt được nằm bên trong sẽ nong cả nhóm ra rồi đẩy tràn cả biểu mẫu.
+      // Không `<div>` nào có luật đó, nên nó rất dễ bị bỏ sót.
+      'min-w-0 rounded-xl border border-border px-4 pb-4',
+      props.disabled && 'opacity-60',
+      props.class,
+    )"
+  >
+    <!--
+      `<legend>` phải là con TRỰC TIẾP đầu tiên của `<fieldset>`.
+
+      Đó là điều kiện để trình duyệt cắt một khoảng trống trên đường viền cho
+      nó, và cũng là điều kiện để trình đọc màn hình ghép chú giải này vào TỪNG
+      control bên trong. Bọc nó vào một `<div>` là mất cả hai, mà nhìn thì chỉ
+      thấy mất cái khoảng trống.
+    -->
+    <legend class="px-1.5 text-sm font-medium">
+      <button
+        v-if="props.collapsible"
+        type="button"
+        :aria-expanded="isOpen"
+        :aria-controls="contentId"
+        class="-mx-1 flex items-center gap-1.5 rounded-md px-1 py-0.5 transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        @click="isOpen = !isOpen"
+      >
+        <ChevronDown
+          class="size-4 shrink-0 text-muted-foreground transition-transform duration-(--duration-base) motion-reduce:transition-none"
+          :class="!isOpen && '-rotate-90'"
+          aria-hidden="true"
+        />
+        <slot name="legend">
+          {{ props.legend }}
+        </slot>
+      </button>
+
+      <template v-else>
+        <slot name="legend">
+          {{ props.legend }}
+        </slot>
+      </template>
+    </legend>
+
+    <!--
+      Gập bằng `grid-template-rows: 0fr → 1fr`, KHÔNG dùng Collapsible của reka.
+
+      Không phải vì thích tự làm: `CollapsibleTrigger` bắt buộc nằm trong
+      `CollapsibleRoot`, mà cái nút thì phải nằm trong `<legend>`, còn `<legend>`
+      phải là con trực tiếp của `<fieldset>`. Ba ràng buộc đó không cùng thoả
+      được. Mẹo `0fr → 1fr` bù lại còn không cần đo chiều cao bằng JS.
+
+      `inert` chứ không phải `hidden`: hộp vẫn phải vẽ ra thì mới có gì để thu
+      lại, nhưng nội dung đang gập thì không được nhận Tab và không được đọc lên.
+    -->
+    <div
+      :id="contentId"
+      class="grid transition-[grid-template-rows] duration-(--duration-base) motion-reduce:transition-none"
+      :class="props.collapsible && !isOpen ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]'"
+      :inert="props.collapsible && !isOpen ? true : undefined"
+    >
+      <!-- Khoảng đệm trên nằm ở ĐÂY chứ không ở `<fieldset>`: đặt ngoài thì
+           lúc gập nó không co lại và cái hộp vẫn cao lù lù một dải trống. -->
+      <div class="min-h-0 overflow-hidden">
+        <div class="pt-2">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</template>

package/src/components/fieldset/index.ts

@@ -0,0 +1 @@
+export { default as Fieldset } from './Fieldset.vue'

package/src/components/file-upload/FileUpload.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { UploadFile } from '../../variants/lib/upload'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { focusRingWithin } from '../../lib/focus'
+import { File as FileIcon, Upload, X } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { formatFileSize, splitBySize, uploadFileId } from '../../variants/lib/upload'
+import { Button } from '../button'
+import { Progress } from '../progress'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /** Giống thuộc tính `accept` của input, ví dụ `image/*,.pdf`. */
+    accept?: string
+    multiple?: boolean
+    /** Chặn tệp lớn hơn mức này, tính bằng byte. 0 nghĩa là không giới hạn. */
+    maxSize?: number
+    disabled?: boolean
+    hint?: string
+  }>(),
+  { multiple: false, maxSize: 0, disabled: false },
+)
+const emit = defineEmits<{
+  /** Tệp bị loại vì quá lớn — bên gọi tự quyết báo lỗi thế nào. */
+  reject: [files: File[]]
+  remove: [file: UploadFile]
+}>()
+const { t } = useI18n()
+const files = defineModel<UploadFile[]>({ default: () => [] })
+
+const dragging = ref(false)
+
+const hintText = computed(() => {
+  if (props.hint)
+    return props.hint
+  const parts: string[] = []
+  if (props.accept)
+    parts.push(props.accept)
+  if (props.maxSize)
+    parts.push(t('ui.fileUpload.maxSize', { size: formatFileSize(props.maxSize) }))
+  return parts.join(' · ')
+})
+
+function add(incoming: FileList | null): void {
+  if (!incoming?.length)
+    return
+
+  const { accepted, tooBig } = splitBySize(Array.from(incoming), props.maxSize)
+
+  if (tooBig.length)
+    emit('reject', tooBig)
+
+  const next = accepted.map(file => ({ id: uploadFileId(file), file }))
+
+  // Lọc trùng theo tên + cỡ + thời điểm sửa: kéo cùng một tệp vào hai lần là
+  // thao tác nhầm, không phải ý định tải hai bản.
+  files.value = props.multiple
+    ? [...files.value, ...next.filter(n => !files.value.some(f => f.id === n.id))]
+    : next.slice(0, 1)
+}
+
+function onDrop(event: DragEvent): void {
+  dragging.value = false
+  if (props.disabled)
+    return
+  add(event.dataTransfer?.files ?? null)
+}
+
+function onPick(event: Event): void {
+  const target = event.target as HTMLInputElement
+  add(target.files)
+  // Xoá giá trị để chọn lại đúng tệp vừa gỡ vẫn kích hoạt `change`.
+  target.value = ''
+}
+
+function remove(file: UploadFile): void {
+  files.value = files.value.filter(f => f.id !== file.id)
+  emit('remove', file)
+}
+</script>
+
+<template>
+  <div :class="cn('flex w-full flex-col gap-3', props.class)">
+    <!--
+      Vùng thả là `<label>`, không phải `<div>` gắn click.
+      Nhờ vậy bấm vào đâu trong vùng cũng mở hộp chọn tệp, và cái `<input>` bên
+      trong vẫn là control thật — vào được chuỗi Tab, nhận được Enter, và trình
+      đọc màn hình đọc ra "chọn tệp" chứ không phải một khối trống.
+    -->
+    <label
+      :class="cn(
+        'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed px-6 py-8 text-center transition-colors',
+        focusRingWithin,
+        dragging ? 'border-primary bg-primary/5' : 'border-border hover:bg-accent/40',
+        props.disabled && 'pointer-events-none opacity-50',
+      )"
+      @dragover.prevent="dragging = true"
+      @dragleave.prevent="dragging = false"
+      @drop.prevent="onDrop"
+    >
+      <span class="grid size-10 place-items-center rounded-full bg-muted text-muted-foreground">
+        <Upload class="size-4" />
+      </span>
+      <span class="text-sm font-medium">
+        <slot name="label">{{ t('ui.fileUpload.label') }}</slot>
+      </span>
+      <span v-if="hintText" class="text-xs text-muted-foreground">{{ hintText }}</span>
+
+      <input
+        type="file"
+        class="sr-only"
+        :accept="props.accept"
+        :multiple="props.multiple"
+        :disabled="props.disabled"
+        @change="onPick"
+      >
+    </label>
+
+    <ul v-if="files.length" class="flex flex-col gap-2">
+      <li
+        v-for="item in files"
+        :key="item.id"
+        class="flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2"
+      >
+        <FileIcon class="size-4 shrink-0 text-muted-foreground" />
+
+        <div class="flex min-w-0 flex-1 flex-col gap-1">
+          <div class="flex items-baseline justify-between gap-3">
+            <span class="truncate text-sm">{{ item.file.name }}</span>
+            <span class="shrink-0 text-xs tabular-nums text-muted-foreground">{{ formatFileSize(item.file.size) }}</span>
+          </div>
+          <Progress v-if="item.progress !== undefined && !item.error" :model-value="item.progress" class="h-1" />
+          <span v-if="item.error" class="text-xs text-destructive">{{ item.error }}</span>
+        </div>
+
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          :aria-label="t('ui.fileUpload.remove', { name: item.file.name })"
+          @click="remove(item)"
+        >
+          <X />
+        </Button>
+      </li>
+    </ul>
+  </div>
+</template>

package/src/components/file-upload/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Kiểu và hai hàm thuần lên `src/variants` — bản React chép lại chúng thì
+ * hai cây có hai cách đặt id tệp và hai cách làm tròn cỡ tệp, mà không có gì
+ * phát hiện khi chúng lệch.
+ */
+export { formatFileSize, splitBySize, type UploadFile, uploadFileId } from '../../variants/lib/upload'
+
+export { default as FileUpload } from './FileUpload.vue'

package/src/components/float-label/FloatLabel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { FloatLabelVariants } from './index'
+import { cn } from '../../lib/utils'
+import { floatLabelVariants } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    variant?: FloatLabelVariants['variant']
+  }>(),
+  { variant: 'over' },
+)
+</script>
+
+<template>
+  <!--
+    Ô nhập trước, nhãn sau — thứ tự trong DOM là thứ tự đọc.
+
+    Nhãn được đặt tuyệt đối nên nhìn thì nó ở trên, nhưng `<label for>` mới là
+    thứ nối hai bên lại, và trình đọc màn hình đọc theo cái nối đó chứ không
+    theo toạ độ. Đảo lại cho "đúng thứ tự nhìn thấy" là thừa.
+  -->
+  <div :class="cn(floatLabelVariants({ variant: props.variant }), props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/float-label/index.ts

@@ -0,0 +1,3 @@
+export { floatLabelVariants, type FloatLabelVariants } from '../../variants/components/float-label'
+
+export { default as FloatLabel } from './FloatLabel.vue'

package/src/components/form/Form.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts" generic="TValues extends Record<string, unknown>">
+import type { ZodType } from 'zod'
+import type { ClassProps } from '../../lib/types'
+import type { FieldErrorMap } from './errors'
+import { useForm } from '@tanstack/vue-form'
+import { computed, ref } from 'vue'
+import { cn } from '../../lib/utils'
+import { provideFormContext } from './context'
+import { firstErrorMessage } from './errors'
+
+const props = defineProps<ClassProps & {
+  /**
+   * Schema zod. Truyền thẳng, không qua adapter nào: TanStack Form đọc
+   * **Standard Schema**, mà zod đã cài giao diện đó từ 3.24.
+   *
+   * PHẢI viết đủ hai tham số. Ô thứ hai của `ZodType` đổi nghĩa giữa hai bản
+   * lớn: v3 là `Def` nội bộ và `Input` nằm ở ô thứ ba, mặc định bằng `Output`;
+   * v4 ô thứ hai CHÍNH LÀ `Input`, và mặc định là `unknown` chứ không còn ăn
+   * theo `Output`. Nên `ZodType<TValues>` vẫn biên dịch được ở cả hai bản mà
+   * nghĩa đã khác hẳn — ở v4 nó là "nhận vào bất cứ thứ gì", trong khi
+   * TanStack Form đòi `StandardSchemaV1<TValues, unknown>`, tức đầu vào phải
+   * đúng `TValues`.
+   */
+  schema: ZodType<TValues, TValues>
+  initialValues?: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  submit: [values: TValues]
+}>()
+
+const form = useForm({
+  defaultValues: (props.initialValues ?? {}) as TValues,
+  /**
+   * Chỉ khai `onChange` là đủ cho cả lúc bấm gửi: logic mặc định của form-core
+   * chạy onChange + onBlur + onSubmit khi nguyên nhân là `submit`.
+   *
+   * `onChange` ở đây KHÔNG có nghĩa là người dùng bị báo lỗi từng phím gõ —
+   * `FormField` chỉ hiện lỗi sau khi field đã blur hoặc form đã gửi. Tính sớm
+   * mà hiện muộn là cố ý: nhờ tính sớm nên lúc đang sửa, lỗi biến mất ngay
+   * khoảnh khắc gõ đúng. Xem chú thích `showValidation` trong `FormField.vue`.
+   */
+  validators: { onChange: props.schema },
+  onSubmit: ({ value }) => {
+    emit('submit', value)
+  },
+})
+
+/**
+ * Lỗi do server trả về giữ **ở đây**, không ghi vào errorMap của TanStack.
+ *
+ * Thư viện có sẵn khoá `onServer` cho đúng việc này, nhưng kiểu của nó suy ra
+ * từ tham số generic `TOnServer`, mà `TOnServer` chỉ đến từ tham số type tường
+ * minh — `FormValidators` không có trường `onServer` để suy ra. Muốn gọi
+ * `setErrorMap({ onServer })` thì phải viết đủ **12 tham số generic** cho
+ * `useForm`. Một `ref` đứng ngoài rẻ hơn nhiều.
+ *
+ * Còn được thêm một thứ: `setErrorMap` chỉ ghi vào field **đang mount** và bỏ
+ * qua tên không khớp, nên lỗi cho field nằm trong tab chưa mở sẽ rơi mất.
+ * Map riêng thì field nhận được lỗi ngay khi nó xuất hiện.
+ */
+const serverErrors = ref<Record<string, string>>({})
+
+const submissionAttempts = form.useSelector(state => state.submissionAttempts)
+const submitted = computed(() => submissionAttempts.value > 0)
+
+provideFormContext({ api: form, serverErrors, submitted })
+
+const isSubmitting = form.useSelector(state => state.isSubmitting)
+const values = form.useSelector(state => state.values)
+const fieldMeta = form.useSelector(state => state.fieldMeta)
+
+/** Gộp về `{ tên field: thông báo }` — giữ nguyên hình dạng slot prop cũ. */
+const errors = computed<Record<string, string | undefined>>(() => {
+  const result: Record<string, string | undefined> = { ...serverErrors.value }
+  const entries = Object.entries(fieldMeta.value) as Array<[string, { errorMap?: FieldErrorMap }]>
+
+  for (const [name, meta] of entries) {
+    if (result[name])
+      continue
+
+    const message = firstErrorMessage(meta.errorMap)
+    if (message)
+      result[name] = message
+  }
+
+  return result
+})
+
+function onSubmit(event: Event): void {
+  event.preventDefault()
+  void form.handleSubmit()
+}
+
+/**
+ * Map lỗi validation của .NET (ModelState / ProblemDetails.errors) ngược về
+ * từng field.
+ */
+function setErrors(fields: Record<string, string>): void {
+  serverErrors.value = { ...serverErrors.value, ...fields }
+}
+
+function setFieldError(name: string, message: string): void {
+  setErrors({ [name]: message })
+}
+
+function resetForm(): void {
+  serverErrors.value = {}
+  form.reset()
+}
+
+defineExpose({
+  resetForm,
+  setErrors,
+  setFieldError,
+  values,
+  errors,
+  isSubmitting,
+})
+</script>
+
+<template>
+  <form novalidate :class="cn('flex flex-col gap-4', props.class)" @submit="onSubmit">
+    <slot :is-submitting="isSubmitting" :errors="errors" :values="values" />
+  </form>
+</template>

package/src/components/form/FormDescription.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps & { id?: string }>()
+</script>
+
+<template>
+  <p :id="props.id" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

package/src/components/form/FormField.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts" generic="T = string">
+import type { ClassProps } from '../../lib/types'
+import type { FieldBindings } from './types'
+import { useField } from '@tanstack/vue-form'
+import { computed, useId } from 'vue'
+import { cn } from '../../lib/utils'
+import { useFormContext } from './context'
+import { firstErrorMessage } from './errors'
+import FormDescription from './FormDescription.vue'
+import FormItem from './FormItem.vue'
+import FormLabel from './FormLabel.vue'
+import FormMessage from './FormMessage.vue'
+
+const props = defineProps<ClassProps & {
+  /** Tên field trong schema. Hỗ trợ path lồng nhau: "address.city" */
+  name: string
+  label?: string
+  description?: string
+  required?: boolean
+  /** Giá trị khởi tạo. Cũng là chỗ để TS suy ra kiểu T cho slot prop. */
+  defaultValue?: T
+}>()
+
+const { api: form, serverErrors, submitted } = useFormContext()
+
+/**
+ * Đọc `props` **một lần**: `useField` trải opts vào `new FieldApi()` ngay lúc
+ * gọi, và cái `watch` bên trong nó theo dõi chính object opts nên object tĩnh
+ * không bao giờ kích hoạt. Đổi `name` giữa chừng sẽ không đổi field — muốn vậy
+ * thì đặt `:key` để dựng lại component.
+ */
+const { api } = useField({
+  form,
+  name: props.name,
+  defaultValue: props.defaultValue,
+})
+
+const controlId = useId()
+const descriptionId = computed(() => (props.description ? `${controlId}-description` : undefined))
+
+/**
+ * Lỗi được TÍNH liên tục nhưng chỉ được HIỆN sau khi field đã rời focus một
+ * lần, hoặc sau khi form đã bấm gửi.
+ *
+ * Đây là chỗ đặt "thời điểm validate", và nó nằm ở tầng hiển thị chứ không
+ * phải ở validator. Kết quả ra đúng ba giai đoạn:
+ *
+ * | lúc | người dùng thấy |
+ * |---|---|
+ * | đang gõ lần đầu | **không gì cả** — chưa gõ xong đã báo sai là quấy rầy |
+ * | vừa rời ô | lỗi hiện ra |
+ * | đang sửa lỗi | lỗi **biến mất ngay** khi gõ đúng, không phải chờ blur |
+ *
+ * Giai đoạn ba là lý do không chuyển thẳng validator sang `onBlur`: làm vậy
+ * thì lúc sửa, người dùng gõ đúng rồi mà thông báo đỏ vẫn đứng đó tới khi họ
+ * bấm ra ngoài — không biết mình đã sửa xong chưa.
+ *
+ * Cách này còn tránh được một chuyện: validator ở TanStack là **cấp form**,
+ * nên không thể bật `onChange` cho riêng một field. Gate ở tầng hiển thị thì
+ * mỗi FormField tự quyết định phần của mình.
+ */
+const showValidation = computed(() => api.state.meta.isBlurred || submitted.value)
+
+// Lỗi server thắng: nó là thông tin mà client không tự suy ra được, và nó chỉ
+// đến sau một lần gửi nên không bao giờ là "quá sớm".
+const errorMessage = computed(() => (
+  serverErrors.value[props.name]
+  ?? (showValidation.value ? firstErrorMessage(api.state.meta.errorMap) : undefined)
+))
+
+const messageId = computed(() => (errorMessage.value ? `${controlId}-message` : undefined))
+const invalid = computed(() => Boolean(errorMessage.value))
+
+const value = computed(() => api.state.value as T)
+
+const describedBy = computed(() => {
+  const ids = [descriptionId.value, messageId.value].filter(Boolean)
+  return ids.length > 0 ? ids.join(' ') : undefined
+})
+
+function setValue(next: unknown): void {
+  api.handleChange(next)
+
+  /**
+   * Lỗi server phải mất ngay khi người dùng sửa field, nếu không "email đã tồn
+   * tại" bám lại cả sau khi họ gõ email khác. Client không có cách nào biết lỗi
+   * đó còn đúng hay không, nên bỏ đi là lựa chọn duy nhất trung thực.
+   */
+  if (serverErrors.value[props.name] !== undefined) {
+    const { [props.name]: _removed, ...rest } = serverErrors.value
+    serverErrors.value = rest
+  }
+}
+
+const field = computed<FieldBindings<T>>(() => ({
+  'modelValue': value.value,
+  'onUpdate:modelValue': setValue,
+  'onBlur': () => api.handleBlur(),
+  'name': props.name,
+  'id': controlId,
+  'aria-describedby': describedBy.value,
+  'aria-invalid': invalid.value ? true : undefined,
+}))
+</script>
+
+<template>
+  <FormItem :class="cn(props.class)">
+    <FormLabel v-if="props.label" :for="controlId" :required="props.required">
+      {{ props.label }}
+    </FormLabel>
+
+    <slot
+      :id="controlId"
+      :field="field"
+      :value="value"
+      :set-value="setValue"
+      :error-message="errorMessage"
+      :invalid="invalid"
+    />
+
+    <FormDescription v-if="props.description" :id="descriptionId">
+      {{ props.description }}
+    </FormDescription>
+
+    <FormMessage :id="messageId" :message="errorMessage" />
+  </FormItem>
+</template>

package/src/components/form/FormItem.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-1.5', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/form/FormLabel.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+import Label from '../label/Label.vue'
+
+const props = defineProps<ClassProps & { for?: string, required?: boolean }>()
+</script>
+
+<template>
+  <Label :for="props.for" :class="cn('text-sm', props.class)">
+    <slot />
+    <span v-if="props.required" class="ml-0.5 text-destructive" aria-hidden="true">*</span>
+  </Label>
+</template>