nuxt-ui-tools 0.1.0

package/dist/runtime/form/fields/date/component.vue

@@ -0,0 +1,331 @@
+<script setup>
+import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UInput from "@nuxt/ui/components/Input.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import USelect from "@nuxt/ui/components/Select.vue";
+import { computed, ref, watch } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { useFieldControl } from "../../composables/use-field-control";
+const props = defineProps({
+  field: { type: Object, required: true },
+  path: { type: Array, required: true }
+});
+const { locale } = useUiToolsLocale();
+const { form, controlProps, disabled, handleBlur } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const calendarOpen = ref(false);
+const inputFocused = ref(false);
+const inputValue = ref("");
+const panelMonth = ref((/* @__PURE__ */ new Date()).getMonth());
+const panelYear = ref((/* @__PURE__ */ new Date()).getFullYear());
+const model = computed({
+  get: () => coerceCalendarDate(form.getValue(props.path)),
+  set: (value) => form.setValue(props.path, value ? serializeCalendarDate(value) : null)
+});
+const selectedDate = computed(() => model.value?.toDate(getLocalTimeZone()));
+const minDate = computed(() => coerceDate(props.field.min));
+const maxDate = computed(() => coerceDate(props.field.max));
+const manualFormat = computed(() => props.field.manualInput?.format ?? defaultManualFormat());
+const manualPlaceholder = computed(
+  () => props.field.manualInput?.placeholder ?? manualFormat.value.toLowerCase()
+);
+const previewFormatter = computed(
+  () => new Intl.DateTimeFormat(
+    locale.value.code,
+    props.field.previewFormat ?? {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    }
+  )
+);
+const monthItems = computed(
+  () => Array.from({ length: 12 }, (_, month) => ({
+    label: new Intl.DateTimeFormat(locale.value.code, { month: "long" }).format(
+      new Date(panelYear.value, month, 1)
+    ),
+    value: month
+  }))
+);
+const yearItems = computed(() => {
+  const range = props.field.calendar?.yearRange ?? [
+    (/* @__PURE__ */ new Date()).getFullYear() - 100,
+    (/* @__PURE__ */ new Date()).getFullYear() + 25
+  ];
+  const years = [];
+  for (let year = range[0]; year <= range[1]; year += 1)
+    years.push({ label: String(year), value: year });
+  return years;
+});
+const weekDays = computed(() => {
+  const base = startOfWeek(new Date(2026, 0, 4));
+  return Array.from(
+    { length: 7 },
+    (_, index) => new Intl.DateTimeFormat(locale.value.code, { weekday: "short" }).format(addDays(base, index))
+  );
+});
+const calendarWeeks = computed(() => {
+  const start = startOfWeek(new Date(panelYear.value, panelMonth.value, 1));
+  return Array.from(
+    { length: 6 },
+    (_week, weekIndex) => Array.from(
+      { length: 7 },
+      (_day, dayIndex) => createCalendarDay(addDays(start, weekIndex * 7 + dayIndex))
+    )
+  );
+});
+watch(
+  model,
+  (value) => {
+    const date = value?.toDate(getLocalTimeZone());
+    if (date) {
+      panelMonth.value = date.getMonth();
+      panelYear.value = date.getFullYear();
+    }
+    if (!inputFocused.value) inputValue.value = date ? formatPreviewDate(date) : "";
+  },
+  { immediate: true }
+);
+function handleFocus() {
+  inputFocused.value = true;
+  openCalendar();
+  inputValue.value = selectedDate.value ? formatManualDate(selectedDate.value) : "";
+}
+function handleInput(value) {
+  inputValue.value = applyManualMask(String(value));
+}
+async function handleInputBlur() {
+  inputFocused.value = false;
+  const parsed = parseManualDate(inputValue.value);
+  if (parsed) model.value = toCalendarDate(parsed);
+  inputValue.value = selectedDate.value ? formatPreviewDate(selectedDate.value) : "";
+  await handleBlur();
+}
+function openCalendar() {
+  const date = selectedDate.value ?? /* @__PURE__ */ new Date();
+  panelMonth.value = date.getMonth();
+  panelYear.value = date.getFullYear();
+  calendarOpen.value = true;
+}
+async function selectDate(day) {
+  if (day.disabled) return;
+  model.value = toCalendarDate(day.date);
+  inputValue.value = formatPreviewDate(day.date);
+  calendarOpen.value = false;
+  await handleBlur();
+}
+async function clearDate() {
+  model.value = void 0;
+  inputValue.value = "";
+  await handleBlur();
+}
+function createCalendarDay(date) {
+  return {
+    key: date.toISOString(),
+    date,
+    label: String(date.getDate()),
+    inMonth: date.getMonth() === panelMonth.value,
+    today: isSameDay(date, /* @__PURE__ */ new Date()),
+    selected: selectedDate.value ? isSameDay(date, selectedDate.value) : false,
+    disabled: isDateDisabled(date)
+  };
+}
+function isDateDisabled(date) {
+  if (minDate.value && startOfDay(date).getTime() < startOfDay(minDate.value).getTime()) return true;
+  if (maxDate.value && startOfDay(date).getTime() > startOfDay(maxDate.value).getTime()) return true;
+  return false;
+}
+function defaultManualFormat() {
+  return locale.value.code.toLowerCase().startsWith("fr") ? "dd/MM/yyyy" : "MM/dd/yyyy";
+}
+function formatPreviewDate(date) {
+  return previewFormatter.value.format(date);
+}
+function formatManualDate(date) {
+  const day = padDatePart(date.getDate());
+  const month = padDatePart(date.getMonth() + 1);
+  const year = String(date.getFullYear());
+  if (manualFormat.value === "dd/MM/yyyy") return `${day}/${month}/${year}`;
+  if (manualFormat.value === "yyyy-MM-dd") return `${year}-${month}-${day}`;
+  return `${month}/${day}/${year}`;
+}
+function parseManualDate(value) {
+  const parts = value.match(/\d+/g);
+  if (!parts || parts.length < 3) return void 0;
+  const first = Number(parts[0]);
+  const second = Number(parts[1]);
+  const third = Number(parts[2]);
+  const date = manualFormat.value === "yyyy-MM-dd" ? new Date(first, second - 1, third) : manualFormat.value === "dd/MM/yyyy" ? new Date(third, second - 1, first) : new Date(third, first - 1, second);
+  return Number.isNaN(date.getTime()) || !matchesParts(date, first, second, third) ? void 0 : date;
+}
+function matchesParts(date, first, second, third) {
+  if (manualFormat.value === "yyyy-MM-dd")
+    return date.getFullYear() === first && date.getMonth() === second - 1 && date.getDate() === third;
+  if (manualFormat.value === "dd/MM/yyyy")
+    return date.getDate() === first && date.getMonth() === second - 1 && date.getFullYear() === third;
+  return date.getMonth() === first - 1 && date.getDate() === second && date.getFullYear() === third;
+}
+function applyManualMask(value) {
+  const digits = value.replace(/\D/g, "").slice(0, 8);
+  if (manualFormat.value === "yyyy-MM-dd") return joinDateParts(digits, [4, 2, 2], "-");
+  return joinDateParts(digits, [2, 2, 4], "/");
+}
+function joinDateParts(value, sizes, separator) {
+  const parts = [];
+  let offset = 0;
+  for (const size of sizes) {
+    const part = value.slice(offset, offset + size);
+    if (part) parts.push(part);
+    offset += size;
+  }
+  return parts.join(separator);
+}
+function coerceCalendarDate(value) {
+  const date = coerceDate(value);
+  return date ? toCalendarDate(date) : void 0;
+}
+function coerceDate(value) {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? void 0 : value;
+  if (isCalendarDateLike(value))
+    return new CalendarDate(value.year, value.month, value.day).toDate(getLocalTimeZone());
+  if (typeof value !== "string" && typeof value !== "number") return void 0;
+  const parsed = typeof value === "string" ? parseIsoDate(value) : new Date(value);
+  return Number.isNaN(parsed.getTime()) ? void 0 : parsed;
+}
+function isCalendarDateLike(value) {
+  return typeof value === "object" && value !== null && "year" in value && "month" in value && "day" in value && typeof value.year === "number" && typeof value.month === "number" && typeof value.day === "number";
+}
+function parseIsoDate(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+  if (!match) return new Date(value);
+  return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+}
+function toCalendarDate(value) {
+  return new CalendarDate(value.getFullYear(), value.getMonth() + 1, value.getDate());
+}
+function serializeCalendarDate(value) {
+  if (props.field.outputFormat === "date") return value.toDate(getLocalTimeZone());
+  return value.toString();
+}
+function startOfWeek(value) {
+  return addDays(startOfDay(value), -startOfDay(value).getDay());
+}
+function startOfDay(value) {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+}
+function addDays(value, days) {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate() + days);
+}
+function isSameDay(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+}
+function padDatePart(value) {
+  return String(value).padStart(2, "0");
+}
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <UPopover
+      v-model:open="calendarOpen"
+      :content="{ side: 'bottom', sideOffset: 8, collisionPadding: 12, avoidCollisions: true }"
+    >
+      <template #anchor>
+        <UInput
+          :model-value="inputValue"
+          v-bind="controlProps"
+          class="w-full"
+          leading
+          leading-icon="i-lucide-calendar-days"
+          :placeholder="manualPlaceholder"
+          :disabled="disabled"
+          @update:model-value="handleInput"
+          @focus="handleFocus"
+          @click="handleFocus"
+          @blur="handleInputBlur"
+        >
+          <template v-if="field.clearable === true && model" #trailing>
+            <UButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :disabled="disabled"
+              aria-label="Clear date"
+              @mousedown.prevent
+              @click="clearDate"
+            />
+          </template>
+        </UInput>
+      </template>
+
+      <template #content>
+        <div data-form-date-panel class="grid w-80 gap-3 p-1">
+          <div class="flex gap-2">
+            <USelect
+              v-model="panelMonth"
+              :items="monthItems"
+              value-key="value"
+              label-key="label"
+              class="min-w-0 flex-1"
+              size="sm"
+              :portal="false"
+            />
+            <USelect
+              v-model="panelYear"
+              :items="yearItems"
+              value-key="value"
+              label-key="label"
+              class="min-w-0 flex-1"
+              size="sm"
+              :portal="false"
+            />
+          </div>
+
+          <div class="grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted">
+            <span v-for="weekday in weekDays" :key="weekday">{{ weekday }}</span>
+          </div>
+
+          <div class="grid gap-1">
+            <div
+              v-for="(week, weekIndex) in calendarWeeks"
+              :key="weekIndex"
+              class="grid grid-cols-7 gap-1"
+            >
+              <button
+                v-for="day in week"
+                :key="day.key"
+                type="button"
+                class="grid size-8 place-items-center rounded-full text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                :class="[
+  day.selected ? 'bg-primary text-inverted' : 'hover:bg-elevated',
+  day.today && !day.selected ? 'font-semibold text-primary' : '',
+  day.inMonth ? 'text-highlighted' : 'text-muted',
+  day.disabled ? 'pointer-events-none opacity-40' : ''
+]"
+                :disabled="day.disabled"
+                @click="selectDate(day)"
+              >
+                {{ day.label }}
+              </button>
+            </div>
+          </div>
+
+          <div
+            class="flex items-center justify-between gap-2 border-t border-default pt-2 text-xs text-muted"
+          >
+            <span class="truncate">
+              {{ selectedDate ? formatPreviewDate(selectedDate) : manualPlaceholder }}
+            </span>
+            <UIcon name="i-lucide-calendar-check" class="size-4 shrink-0" />
+          </div>
+        </div>
+      </template>
+    </UPopover>
+  </FormFieldShell>
+</template>

package/dist/runtime/form/fields/date/component.vue.d.ts

@@ -0,0 +1,8 @@
+import type { FormDateField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormDateField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/date/config.d.ts

@@ -0,0 +1,14 @@
+export declare const dateFieldKind: {
+    readonly type: "date";
+    readonly state: "stateful";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+        readonly hint: true;
+    };
+    readonly layout: {
+        readonly item: true;
+    };
+    readonly validation: true;
+    readonly transform: true;
+};

package/dist/runtime/form/fields/date/config.js

@@ -0,0 +1,9 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const dateFieldKind = defineFormFieldKind({
+  type: "date",
+  state: "stateful",
+  ui: { label: true, description: true, hint: true },
+  layout: { item: true },
+  validation: true,
+  transform: true
+});

package/dist/runtime/form/fields/date/index.d.ts

@@ -0,0 +1,2 @@
+export { dateFieldKind } from './config.js';
+export type * from './types';

package/dist/runtime/form/fields/date/index.js

@@ -0,0 +1 @@
+export { dateFieldKind } from "./config.js";

package/dist/runtime/form/fields/date/types.d.ts

@@ -0,0 +1,22 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+export interface FormDateCalendarOptions {
+    monthControls?: boolean;
+    yearControls?: boolean;
+    weekNumbers?: boolean;
+    yearRange?: readonly [number, number];
+}
+export interface FormDateField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'date', Date | string | null, TContext, TDeps> {
+    min?: Date | string;
+    max?: Date | string;
+    clearable?: boolean;
+    outputFormat?: 'iso' | 'date';
+    previewFormat?: Intl.DateTimeFormatOptions;
+    manualInput?: {
+        enabled?: boolean;
+        format?: 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy-MM-dd';
+        placeholder?: string;
+    };
+    calendar?: FormDateCalendarOptions;
+}
+export type DateFieldOutput = Date | string | NullableValue;

package/dist/runtime/form/fields/date-family/component.d.vue.ts

@@ -0,0 +1,8 @@
+import type { FormDateFamilyField } from './types.js';
+type __VLS_Props = {
+    field: FormDateFamilyField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/date-family/component.vue

@@ -0,0 +1,114 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UInput from "@nuxt/ui/components/Input.vue";
+import { computed } from "vue";
+import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { useFieldControl } from "../../composables/use-field-control";
+const props = defineProps({
+  field: { type: null, required: true },
+  path: { type: Array, required: true }
+});
+const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const range = computed(
+  () => ["daterange", "monthrange", "datetimerange"].includes(props.field.type)
+);
+const inputType = computed(() => {
+  if (props.field.type === "datetime" || props.field.type === "datetimerange")
+    return "datetime-local";
+  if (props.field.type === "month" || props.field.type === "monthrange") return "month";
+  if (props.field.type === "year") return "number";
+  return "date";
+});
+const singleModel = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    return typeof value === "string" ? value : "";
+  },
+  set: (value) => form.setValue(props.path, value || null)
+});
+const startModel = computed({
+  get: () => rangeValue(0),
+  set: (value) => setRangeValue(0, value)
+});
+const endModel = computed({
+  get: () => rangeValue(1),
+  set: (value) => setRangeValue(1, value)
+});
+const min = computed(() => props.field.min);
+const max = computed(() => props.field.max);
+function rangeValue(index) {
+  const value = form.getValue(props.path);
+  if (!Array.isArray(value)) return "";
+  return typeof value[index] === "string" ? value[index] : "";
+}
+function setRangeValue(index, value) {
+  const current = form.getValue(props.path);
+  const next = Array.isArray(current) ? [stringValue(current[0]), stringValue(current[1])] : ["", ""];
+  next[index] = value;
+  form.setValue(props.path, next[0] || next[1] ? next : null);
+}
+function stringValue(value) {
+  return typeof value === "string" ? value : "";
+}
+async function clear() {
+  form.setValue(props.path, null);
+  await handleBlur();
+}
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <div class="flex items-center gap-2">
+      <template v-if="range">
+        <UInput
+          v-model="startModel"
+          v-bind="controlProps"
+          class="min-w-0 flex-1"
+          :type="inputType"
+          :min="min"
+          :max="max"
+          :disabled="disabled"
+          aria-label="Start"
+          @blur="handleBlur"
+        />
+        <span class="text-sm text-muted" aria-hidden="true">–</span>
+        <UInput
+          v-model="endModel"
+          v-bind="controlProps"
+          class="min-w-0 flex-1"
+          :type="inputType"
+          :min="startModel || min"
+          :max="max"
+          :disabled="disabled"
+          aria-label="End"
+          @blur="handleBlur"
+        />
+      </template>
+      <UInput
+        v-else
+        v-model="singleModel"
+        v-bind="controlProps"
+        class="min-w-0 flex-1"
+        :type="inputType"
+        :min="min"
+        :max="max"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @blur="handleBlur"
+      />
+      <UButton
+        v-if="field.clearable === true && form.getValue(path)"
+        icon="i-lucide-x"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        :disabled="disabled"
+        aria-label="Clear value"
+        @click="clear"
+      />
+    </div>
+  </FormFieldShell>
+</template>

package/dist/runtime/form/fields/date-family/component.vue.d.ts

@@ -0,0 +1,8 @@
+import type { FormDateFamilyField } from './types.js';
+type __VLS_Props = {
+    field: FormDateFamilyField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/date-family/types.d.ts

@@ -0,0 +1,28 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+export interface FormDateFamilyOptions {
+    min?: string;
+    max?: string;
+    clearable?: boolean;
+}
+export interface FormDateTimeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'datetime', string | null, TContext, TDeps>, FormDateFamilyOptions {
+}
+export interface FormDateRangeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'daterange', readonly [string, string] | null, TContext, TDeps>, FormDateFamilyOptions {
+}
+export interface FormMonthRangeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'monthrange', readonly [string, string] | null, TContext, TDeps>, FormDateFamilyOptions {
+}
+export interface FormDateTimeRangeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'datetimerange', readonly [string, string] | null, TContext, TDeps>, FormDateFamilyOptions {
+}
+export interface FormMonthField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'month', string | null, TContext, TDeps>, FormDateFamilyOptions {
+}
+export interface FormYearField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'year', string | null, TContext, TDeps>, Pick<FormDateFamilyOptions, 'clearable'> {
+    min?: number;
+    max?: number;
+}
+export type DateTimeFieldOutput = string | NullableValue;
+export type DateRangeFieldOutput = readonly [string, string] | NullableValue;
+export type MonthRangeFieldOutput = readonly [string, string] | NullableValue;
+export type DateTimeRangeFieldOutput = readonly [string, string] | NullableValue;
+export type MonthFieldOutput = string | NullableValue;
+export type YearFieldOutput = string | NullableValue;
+export type FormDateFamilyField<TContext = {}, TDeps = {}> = FormDateTimeField<TContext, TDeps> | FormDateRangeField<TContext, TDeps> | FormMonthRangeField<TContext, TDeps> | FormDateTimeRangeField<TContext, TDeps> | FormMonthField<TContext, TDeps> | FormYearField<TContext, TDeps>;

package/dist/runtime/form/fields/date-range/config.d.ts

@@ -0,0 +1,14 @@
+export declare const dateRangeFieldKind: {
+    readonly type: "daterange";
+    readonly state: "stateful";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+        readonly hint: true;
+    };
+    readonly layout: {
+        readonly item: true;
+    };
+    readonly validation: true;
+    readonly transform: true;
+};

package/dist/runtime/form/fields/date-range/config.js

@@ -0,0 +1,9 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const dateRangeFieldKind = defineFormFieldKind({
+  type: "daterange",
+  state: "stateful",
+  ui: { label: true, description: true, hint: true },
+  layout: { item: true },
+  validation: true,
+  transform: true
+});

package/dist/runtime/form/fields/date-range/types.d.ts

@@ -0,0 +1 @@
+export type { DateRangeFieldOutput, FormDateRangeField } from '../date-family/types.js';

package/dist/runtime/form/fields/date-time/config.d.ts

@@ -0,0 +1,14 @@
+export declare const dateTimeFieldKind: {
+    readonly type: "datetime";
+    readonly state: "stateful";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+        readonly hint: true;
+    };
+    readonly layout: {
+        readonly item: true;
+    };
+    readonly validation: true;
+    readonly transform: true;
+};

package/dist/runtime/form/fields/date-time/config.js

@@ -0,0 +1,9 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const dateTimeFieldKind = defineFormFieldKind({
+  type: "datetime",
+  state: "stateful",
+  ui: { label: true, description: true, hint: true },
+  layout: { item: true },
+  validation: true,
+  transform: true
+});

package/dist/runtime/form/fields/date-time/types.d.ts

@@ -0,0 +1 @@
+export type { DateTimeFieldOutput, FormDateTimeField } from '../date-family/types.js';

package/dist/runtime/form/fields/date-time-range/config.d.ts

@@ -0,0 +1,14 @@
+export declare const dateTimeRangeFieldKind: {
+    readonly type: "datetimerange";
+    readonly state: "stateful";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+        readonly hint: true;
+    };
+    readonly layout: {
+        readonly item: true;
+    };
+    readonly validation: true;
+    readonly transform: true;
+};

package/dist/runtime/form/fields/date-time-range/config.js

@@ -0,0 +1,9 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const dateTimeRangeFieldKind = defineFormFieldKind({
+  type: "datetimerange",
+  state: "stateful",
+  ui: { label: true, description: true, hint: true },
+  layout: { item: true },
+  validation: true,
+  transform: true
+});

package/dist/runtime/form/fields/date-time-range/types.d.ts

@@ -0,0 +1 @@
+export type { DateTimeRangeFieldOutput, FormDateTimeRangeField } from '../date-family/types.js';

package/dist/runtime/form/fields/divider/component.d.vue.ts

@@ -0,0 +1,8 @@
+import type { FormDividerField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormDividerField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;