nuxt-ui-tools 0.1.0

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

@@ -0,0 +1,50 @@
+<script setup>
+import UInputNumber from "@nuxt/ui/components/InputNumber.vue";
+import { computed } from "vue";
+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 },
+  bare: { type: Boolean, required: false }
+});
+const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const model = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    return typeof value === "number" ? value : void 0;
+  },
+  set: (value) => form.setValue(props.path, value ?? null)
+});
+</script>
+
+<template>
+  <UInputNumber
+    v-if="bare"
+    v-model="model"
+    v-bind="controlProps"
+    class="w-full"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :min="field.min"
+    :max="field.max"
+    :step="field.step"
+    @blur="handleBlur"
+  />
+  <FormFieldShell v-else :field="field" :path="path">
+    <UInputNumber
+      v-model="model"
+      v-bind="controlProps"
+      class="w-full"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :min="field.min"
+      :max="field.max"
+      :step="field.step"
+      @blur="handleBlur"
+    />
+  </FormFieldShell>
+</template>

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

@@ -0,0 +1,9 @@
+import type { FormNumberField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormNumberField;
+    path: readonly string[];
+    bare?: boolean;
+};
+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/number/config.d.ts

@@ -0,0 +1,14 @@
+export declare const numberFieldKind: {
+    readonly type: "number";
+    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/number/config.js

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+export interface FormNumberField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'number', number | null, TContext, TDeps> {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export type NumberFieldOutput = number | NullableValue;

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

@@ -0,0 +1,9 @@
+import type { FormObjectField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormObjectField;
+    path: readonly string[];
+    parentPath: 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/object/component.vue

@@ -0,0 +1,65 @@
+<script setup>
+import UCard from "@nuxt/ui/components/Card.vue";
+import { computed } from "vue";
+import FormFieldRenderer from "../../components/renderer/FormFieldRenderer.vue";
+import { useFormContainerLayout } from "../../composables/use-form-layout";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime";
+import { resolveFormText } from "../../utils/text";
+const props = defineProps({
+  field: { type: Object, required: true },
+  path: { type: Array, required: true },
+  parentPath: { type: Array, required: true }
+});
+const form = useFormRuntimeContext();
+const title = computed(() => resolveFormText(props.field.label));
+const description = computed(() => resolveFormText(props.field.description));
+const variant = computed(() => props.field.layout?.variant ?? "plain");
+const grid = useFormContainerLayout({
+  layout: () => props.field.layout,
+  formLayout: form.currentLayout
+});
+</script>
+
+<template>
+  <section v-if="variant === 'plain'" class="grid gap-3">
+    <header v-if="title || description" class="grid gap-1">
+      <h3 v-if="title" class="text-sm font-medium text-highlighted">
+        {{ title }}
+      </h3>
+      <p v-if="description" class="text-sm text-muted">
+        {{ description }}
+      </p>
+    </header>
+
+    <div :style="grid.style.value">
+      <FormFieldRenderer
+        v-for="child in field.fields"
+        :key="child.key"
+        :field="child"
+        :parent-path="path"
+      />
+    </div>
+  </section>
+
+  <UCard v-else :variant="variant === 'card' ? 'outline' : 'soft'">
+    <template v-if="title || description" #header>
+      <div class="grid gap-1">
+        <h3 v-if="title" class="text-sm font-medium text-highlighted">
+          {{ title }}
+        </h3>
+        <p v-if="description" class="text-sm text-muted">
+          {{ description }}
+        </p>
+      </div>
+    </template>
+
+    <div :style="grid.style.value">
+      <FormFieldRenderer
+        v-for="child in field.fields"
+        :key="child.key"
+        :field="child"
+        :parent-path="path"
+      />
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,9 @@
+import type { FormObjectField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormObjectField;
+    path: readonly string[];
+    parentPath: 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/object/config.d.ts

@@ -0,0 +1,13 @@
+export declare const objectFieldKind: {
+    readonly type: "object";
+    readonly state: "passthrough";
+    readonly ui: {
+        readonly label: true;
+        readonly description: true;
+    };
+    readonly layout: {
+        readonly item: true;
+        readonly container: true;
+    };
+    readonly transform: true;
+};

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

@@ -0,0 +1,8 @@
+import { defineFormFieldKind } from "../../utils/field-kind.js";
+export const objectFieldKind = defineFormFieldKind({
+  type: "object",
+  state: "passthrough",
+  ui: { label: true, description: true },
+  layout: { item: true, container: true },
+  transform: true
+});

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

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

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

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

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

@@ -0,0 +1,6 @@
+import type { FormContainerFieldBase } from '../../types/field-base.js';
+import type { FormTransformConfig } from '../../types/transform.js';
+export interface FormObjectField<TContext = {}, TDeps = {}> extends FormContainerFieldBase<'object', TContext, TDeps> {
+    transform?: FormTransformConfig<unknown, unknown, TContext, TDeps>;
+}
+export type ObjectFieldOutput<TChildren> = TChildren;

package/dist/runtime/form/fields/one-time-code/component.d.vue.ts

@@ -0,0 +1,8 @@
+import type { FormOneTimeCodeField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormOneTimeCodeField;
+    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/one-time-code/component.vue

@@ -0,0 +1,37 @@
+<script setup>
+import UPinInput from "@nuxt/ui/components/PinInput.vue";
+import { computed } from "vue";
+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 { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const model = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    return typeof value === "string" ? value.split("") : [];
+  },
+  set: (value) => form.setValue(props.path, value.join(""))
+});
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <UPinInput
+      v-model="model"
+      v-bind="controlProps"
+      :disabled="disabled"
+      :length="field.length ?? 6"
+      :mask="field.mask"
+      :otp="field.otp ?? true"
+      :type="field.inputType ?? 'text'"
+      :placeholder="placeholder"
+      @blur="handleBlur"
+    />
+  </FormFieldShell>
+</template>

package/dist/runtime/form/fields/one-time-code/component.vue.d.ts

@@ -0,0 +1,8 @@
+import type { FormOneTimeCodeField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormOneTimeCodeField;
+    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/one-time-code/config.d.ts

@@ -0,0 +1,14 @@
+export declare const oneTimeCodeFieldKind: {
+    readonly type: "one-time-code";
+    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/one-time-code/config.js

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

package/dist/runtime/form/fields/one-time-code/index.d.ts

@@ -0,0 +1,2 @@
+export { oneTimeCodeFieldKind } from './config.js';
+export type { FormOneTimeCodeField, OneTimeCodeFieldOutput } from './types.js';

package/dist/runtime/form/fields/one-time-code/index.js

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

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

@@ -0,0 +1,9 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+export interface FormOneTimeCodeField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'one-time-code', string | null, TContext, TDeps> {
+    length?: number;
+    mask?: boolean;
+    otp?: boolean;
+    inputType?: 'text' | 'number';
+}
+export type OneTimeCodeFieldOutput = string | NullableValue;

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

@@ -0,0 +1,9 @@
+import type { FormPasswordField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormPasswordField;
+    path: readonly string[];
+    bare?: boolean;
+};
+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/password/component.vue

@@ -0,0 +1,46 @@
+<script setup>
+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: Object, required: true },
+  path: { type: Array, required: true },
+  bare: { type: Boolean, required: false }
+});
+const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const model = computed({
+  get: () => {
+    const value = form.getValue(props.path);
+    return typeof value === "string" ? value : void 0;
+  },
+  set: (value) => form.setValue(props.path, value ?? null)
+});
+</script>
+
+<template>
+  <UInput
+    v-if="bare"
+    v-model="model"
+    v-bind="controlProps"
+    class="w-full"
+    type="password"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    @blur="handleBlur"
+  />
+  <FormFieldShell v-else :field="field" :path="path">
+    <UInput
+      v-model="model"
+      v-bind="controlProps"
+      class="w-full"
+      type="password"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @blur="handleBlur"
+    />
+  </FormFieldShell>
+</template>

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

@@ -0,0 +1,9 @@
+import type { FormPasswordField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormPasswordField;
+    path: readonly string[];
+    bare?: boolean;
+};
+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/password/config.d.ts

@@ -0,0 +1,14 @@
+export declare const passwordFieldKind: {
+    readonly type: "password";
+    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/password/config.js

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { NullableValue } from '../../types/field-output-utils.js';
+export interface FormPasswordField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'password', string | null, TContext, TDeps> {
+}
+export type PasswordFieldOutput = string | NullableValue;

package/dist/runtime/form/fields/phone-number/component.d.vue.ts

@@ -0,0 +1,8 @@
+import type { FormPhoneNumberField } from './types.js';
+type __VLS_Props = {
+    field: FormPhoneNumberField;
+    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/phone-number/component.vue

@@ -0,0 +1,171 @@
+<script setup>
+import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UInput from "@nuxt/ui/components/Input.vue";
+import USelectMenu from "@nuxt/ui/components/SelectMenu.vue";
+import { getCountries, getCountryCallingCode, parsePhoneNumberFromString } from "libphonenumber-js";
+import { computed, onMounted, ref, watch } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { useFieldControl } from "../../composables/use-field-control";
+import { useFormUi } from "../../composables/use-form-ui";
+import { mergeFormUiClass } from "../../utils/ui";
+const props = defineProps({
+  field: { type: Object, required: true },
+  path: { type: Array, required: true }
+});
+const { locale } = useUiToolsLocale();
+const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
+  () => props.field,
+  () => props.path
+);
+const formUi = useFormUi();
+const countryCode = ref(void 0);
+const phoneValue = ref("");
+const syncingFromExternal = ref(false);
+const syncingToForm = ref(false);
+const mounted = ref(false);
+const countryOptions = computed(
+  () => getCountries().map((code) => createCountryOption(code)).filter((option) => isCountryAllowed(option)).sort((left, right) => left.label.localeCompare(right.label))
+);
+const selectedCountry = computed(
+  () => countryOptions.value.find((option) => option.value === countryCode.value)
+);
+const processedValue = computed(() => {
+  if (!phoneValue.value || !countryCode.value) return { valid: false, value: null };
+  const parsed = parsePhoneNumberFromString(phoneValue.value, countryCode.value);
+  if (!parsed?.isValid() || !parsed.country || parsed.country !== countryCode.value)
+    return { valid: false, value: null };
+  if (props.field.numberType?.length && !props.field.numberType.includes(parsed.getType()))
+    return { valid: false, value: null };
+  return { valid: true, value: formatPhoneNumber(parsed) };
+});
+onMounted(() => {
+  syncFromExternalValue(form.getValue(props.path));
+  if (!countryCode.value) countryCode.value = resolveDefaultCountryCode();
+  mounted.value = true;
+});
+watch(
+  () => form.getValue(props.path),
+  (value) => {
+    if (syncingToForm.value) return;
+    syncFromExternalValue(value);
+  }
+);
+watch([phoneValue, countryCode], () => {
+  if (!mounted.value || syncingFromExternal.value) return;
+  syncToFormValue();
+});
+watch(countryCode, (current, previous) => {
+  if (!mounted.value || !previous || !current || current === previous) return;
+  if (props.field.resetOnCountryChange ?? true) phoneValue.value = "";
+});
+function createCountryOption(code) {
+  const dialCode = `+${getCountryCallingCode(code)}`;
+  return {
+    code,
+    value: code,
+    label: `${toFlagEmoji(code)} ${dialCode}`,
+    dialCode,
+    flag: toFlagEmoji(code)
+  };
+}
+function isCountryAllowed(option) {
+  const allowed = props.field.countryCodes;
+  if (!allowed) return true;
+  return typeof allowed === "function" ? allowed(option) : allowed.includes(option.code);
+}
+function resolveDefaultCountryCode() {
+  const stored = props.field.storedCountryCode;
+  if (stored && isCountryCodeAvailable(stored)) return stored;
+  const configured = props.field.defaultCountryCode;
+  if (configured && configured !== "detect" && isCountryCodeAvailable(configured)) return configured;
+  const localeRegion = resolveLocaleRegionCode();
+  if (localeRegion && isCountryCodeAvailable(localeRegion)) return localeRegion;
+  return countryOptions.value[0]?.value;
+}
+function resolveLocaleRegionCode() {
+  const segments = locale.value.code.split("-");
+  const region = segments.length > 1 ? segments[segments.length - 1]?.toUpperCase() : void 0;
+  if (!region) return void 0;
+  return getCountries().find((code) => code === region);
+}
+function isCountryCodeAvailable(code) {
+  return countryOptions.value.some((option) => option.value === code);
+}
+function syncFromExternalValue(value) {
+  syncingFromExternal.value = true;
+  if (typeof value !== "string" || !value) {
+    phoneValue.value = "";
+    countryCode.value = resolveDefaultCountryCode();
+    syncingFromExternal.value = false;
+    return;
+  }
+  const parsed = parsePhoneNumberFromString(value);
+  if (parsed?.country && isCountryCodeAvailable(parsed.country)) {
+    countryCode.value = parsed.country;
+    phoneValue.value = parsed.formatNational();
+    syncingFromExternal.value = false;
+    return;
+  }
+  countryCode.value = resolveDefaultCountryCode();
+  phoneValue.value = value;
+  syncingFromExternal.value = false;
+}
+function syncToFormValue() {
+  syncingToForm.value = true;
+  form.setValue(props.path, phoneValue.value ? processedValue.value.value ?? "" : null);
+  queueMicrotask(() => {
+    syncingToForm.value = false;
+  });
+}
+function formatPhoneNumber(parsed) {
+  if (props.field.format === "national") return parsed.formatNational();
+  if (props.field.format === "uri") return parsed.getURI();
+  if (props.field.format === "e164") return parsed.number;
+  return parsed.formatInternational();
+}
+function toFlagEmoji(code) {
+  return [...code].map((character) => String.fromCodePoint(127397 + character.charCodeAt(0))).join("");
+}
+</script>
+
+<template>
+  <FormFieldShell :field="field" :path="path">
+    <UFieldGroup
+      :size="formUi.controlSize.value"
+      :class="
+  mergeFormUiClass('w-full', formUi.ui.value.group?.ui?.root, formUi.ui.value.group?.ui?.base)
+"
+    >
+      <USelectMenu
+        v-model="countryCode"
+        class="w-auto min-w-[5.75rem] shrink-0"
+        value-key="value"
+        label-key="label"
+        :items="[...countryOptions]"
+        :size="formUi.controlSize.value"
+        :disabled="disabled"
+        :search-input="true"
+        :ui="{ base: 'w-auto min-w-[5.75rem]' }"
+      />
+      <UInput
+        v-model="phoneValue"
+        v-bind="controlProps"
+        class="min-w-0 flex-1"
+        type="tel"
+        :placeholder="placeholder"
+        :disabled="disabled || !selectedCountry"
+        @blur="handleBlur"
+      >
+        <template v-if="phoneValue && countryCode" #trailing>
+          <UIcon
+            :name="processedValue.valid ? 'i-lucide-circle-check' : 'i-lucide-circle-x'"
+            class="size-4"
+            :class="processedValue.valid ? 'text-success' : 'text-error'"
+          />
+        </template>
+      </UInput>
+    </UFieldGroup>
+  </FormFieldShell>
+</template>

package/dist/runtime/form/fields/phone-number/component.vue.d.ts

@@ -0,0 +1,8 @@
+import type { FormPhoneNumberField } from './types.js';
+type __VLS_Props = {
+    field: FormPhoneNumberField;
+    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;