@groupteknology/vuno 1.0.0 → 2.0.0

package/dist/runtime/app/components/Form/internal/FormFieldRenderer/FormFieldRenderer.vue.d.ts

@@ -0,0 +1,7 @@
+import type { VunoField } from '#vuno/types/field';
+type Props = {
+    field: VunoField;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Form/internal/grid.d.ts

@@ -0,0 +1,9 @@
+import type { VunoFieldColumns } from '#vuno/types/field';
+/**
+ * `min-w-0` acompaña siempre al `col-span`: un grid item nace con
+ * `min-width: auto`, que le impide encoger por debajo de su contenido mínimo
+ * y hace que se salga de la pista en contenedores estrechos (un modal, por
+ * ejemplo). Sin esto el ancho lo acabaría decidiendo el contenido y no el
+ * grid, que es justo lo contrario de lo que persigue el sistema de columnas.
+ */
+export declare function getColumnSpanClass(columns?: VunoFieldColumns): string[];

package/dist/runtime/app/components/Form/internal/grid.js

@@ -0,0 +1,91 @@
+const spanClasses = {
+  xs: {
+    1: "col-span-1",
+    2: "col-span-2",
+    3: "col-span-3",
+    4: "col-span-4",
+    5: "col-span-5",
+    6: "col-span-6",
+    7: "col-span-7",
+    8: "col-span-8",
+    9: "col-span-9",
+    10: "col-span-10",
+    11: "col-span-11",
+    12: "col-span-12"
+  },
+  sm: {
+    1: "@sm:col-span-1",
+    2: "@sm:col-span-2",
+    3: "@sm:col-span-3",
+    4: "@sm:col-span-4",
+    5: "@sm:col-span-5",
+    6: "@sm:col-span-6",
+    7: "@sm:col-span-7",
+    8: "@sm:col-span-8",
+    9: "@sm:col-span-9",
+    10: "@sm:col-span-10",
+    11: "@sm:col-span-11",
+    12: "@sm:col-span-12"
+  },
+  md: {
+    1: "@md:col-span-1",
+    2: "@md:col-span-2",
+    3: "@md:col-span-3",
+    4: "@md:col-span-4",
+    5: "@md:col-span-5",
+    6: "@md:col-span-6",
+    7: "@md:col-span-7",
+    8: "@md:col-span-8",
+    9: "@md:col-span-9",
+    10: "@md:col-span-10",
+    11: "@md:col-span-11",
+    12: "@md:col-span-12"
+  },
+  lg: {
+    1: "@lg:col-span-1",
+    2: "@lg:col-span-2",
+    3: "@lg:col-span-3",
+    4: "@lg:col-span-4",
+    5: "@lg:col-span-5",
+    6: "@lg:col-span-6",
+    7: "@lg:col-span-7",
+    8: "@lg:col-span-8",
+    9: "@lg:col-span-9",
+    10: "@lg:col-span-10",
+    11: "@lg:col-span-11",
+    12: "@lg:col-span-12"
+  },
+  xl: {
+    1: "@xl:col-span-1",
+    2: "@xl:col-span-2",
+    3: "@xl:col-span-3",
+    4: "@xl:col-span-4",
+    5: "@xl:col-span-5",
+    6: "@xl:col-span-6",
+    7: "@xl:col-span-7",
+    8: "@xl:col-span-8",
+    9: "@xl:col-span-9",
+    10: "@xl:col-span-10",
+    11: "@xl:col-span-11",
+    12: "@xl:col-span-12"
+  }
+};
+export function getColumnSpanClass(columns) {
+  if (!columns) return ["min-w-0", "col-span-12"];
+  if (typeof columns === "number") return ["min-w-0", "col-span-12", spanClasses.md[columns]];
+  const classes = ["min-w-0"];
+  classes.push(spanClasses.xs[columns.xs ?? 12]);
+  if (columns.sm) {
+    classes.push(spanClasses.sm[columns.sm]);
+  }
+  if (columns.md) {
+    classes.push(spanClasses.md[columns.md]);
+  }
+  if (columns.lg) {
+    classes.push(spanClasses.lg[columns.lg]);
+  }
+  if (columns.xl) {
+    classes.push(spanClasses.xl[columns.xl]);
+  }
+  return classes;
+}

package/dist/runtime/app/components/Form/internal/standard-schema.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Adaptador de [Standard Schema](https://standardschema.dev).
+ *
+ * El contrato público que implementan zod, valibot y arktype vive en
+ * `types/form.ts`; aquí quedan solo la detección y la traducción de errores que
+ * usa el motor del formulario.
+ */
+import type { VunoSchema, VunoSchemaIssue } from '#vuno/types/form';
+/** Errores por ruta: `{ 'variants.0.sku': 'El SKU es requerido' }`. */
+export type VunoFormErrors = Record<string, string>;
+/**
+ * Convierte la ruta de un problema en la que usan los campos.
+ *
+ * Los índices llegan como números y el contrato admite además objetos `{ key }`,
+ * así que se normalizan los tres casos. El resultado tiene que coincidir con el
+ * `name` del campo —`variants.0.sku`— o el error no se pintaría en ninguna
+ * parte: se vería un formulario que no envía y no dice por qué.
+ */
+export declare function toErrorPath(path: VunoSchemaIssue['path']): string;
+/**
+ * Agrupa los problemas por ruta, quedándose con el primero de cada una.
+ *
+ * Un campo puede incumplir varias reglas a la vez —vacío y además demasiado
+ * corto— y enseñarlas todas es ruido: la primera es la que hay que arreglar
+ * para avanzar.
+ */
+export declare function toErrorMap(issues: readonly VunoSchemaIssue[] | undefined): VunoFormErrors;
+/** Detecta si algo implementa el contrato, para no llamar a `validate` a ciegas. */
+export declare function isStandardSchema<TValue = unknown>(schema: unknown): schema is VunoSchema<TValue>;

package/dist/runtime/app/components/Form/internal/standard-schema.js

@@ -0,0 +1,15 @@
+export function toErrorPath(path) {
+  if (!path || path.length === 0) return "";
+  return path.map((segment) => String(typeof segment === "object" ? segment.key : segment)).join(".");
+}
+export function toErrorMap(issues) {
+  const errors = {};
+  for (const issue of issues ?? []) {
+    const path = toErrorPath(issue.path);
+    errors[path] ??= issue.message;
+  }
+  return errors;
+}
+export function isStandardSchema(schema) {
+  return typeof schema === "object" && schema !== null && "~standard" in schema;
+}

package/dist/runtime/app/components/Form/internal/useVunoFormState.d.ts

@@ -0,0 +1,43 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { VunoSchema } from '#vuno/types/form';
+import { type VunoFormErrors } from './standard-schema.js';
+type VunoFormStateOptions<TState extends object> = {
+    /** Estado del formulario. Lo posee quien llama, no el motor. */
+    state: Ref<TState>;
+    /** Cualquier esquema que implemente Standard Schema: zod, valibot, arktype. */
+    schema?: () => undefined | VunoSchema;
+};
+type VunoFormEngine<TState extends object> = {
+    dirty: ComputedRef<boolean>;
+    errors: VunoFormErrors;
+    /** Si ya se intentó enviar. Cambia cuándo se valida. */
+    submitted: Ref<boolean>;
+    submitting: Ref<boolean>;
+    touched: Record<string, boolean>;
+    /** Marca un campo como visitado; se llama al salir de él. */
+    blur: (name: string) => void;
+    /** El error de un campo, solo cuando toca enseñarlo. */
+    errorFor: (name: string) => string | undefined;
+    getValue: <TValue = unknown>(name: string) => TValue | undefined;
+    isDirty: (name?: string) => boolean;
+    reset: (next?: TState) => void;
+    /** Devuelve un campo a su valor de partida, sin tocar el resto. */
+    resetField: (name: string) => void;
+    setValue: (name: string, value: unknown) => void;
+    /** Valida y, si está bien, ejecuta. No ejecuta nada si hay errores. */
+    submit: (onValid: (state: TState) => unknown) => Promise<boolean>;
+    /** Valida todo. Devuelve si el estado es válido. */
+    validate: () => Promise<boolean>;
+};
+/**
+ * El motor de un formulario: estado, errores, tocado, sucio y envío.
+ *
+ * No pinta nada ni conoce ningún componente. Valida contra Standard Schema, que
+ * es el contrato que implementan zod, valibot y arktype, así que no ata el
+ * módulo a ninguna biblioteca de validación ni la añade como dependencia.
+ *
+ * Todavía no se auto-importa —vive en `internal/`—: publicarlo congela su forma
+ * y antes conviene que lo use algo real.
+ */
+export declare function useVunoFormState<TState extends object>(options: VunoFormStateOptions<TState>): VunoFormEngine<TState>;
+export {};

package/dist/runtime/app/components/Form/internal/useVunoFormState.js

@@ -0,0 +1,81 @@
+import { computed, reactive, ref, shallowRef } from "vue";
+import { cloneValue, getPath, isEqual, setPath } from "#vuno/utils/path";
+import { isStandardSchema, toErrorMap } from "./standard-schema.js";
+export function useVunoFormState(options) {
+  const { state } = options;
+  const errors = reactive({});
+  const touched = reactive({});
+  const submitted = ref(false);
+  const submitting = ref(false);
+  const initial = shallowRef(cloneValue(state.value));
+  const dirty = computed(() => !isEqual(state.value, initial.value));
+  const isDirty = (name) => name === void 0 ? dirty.value : !isEqual(getPath(state.value, name), getPath(initial.value, name));
+  const getValue = (name) => getPath(state.value, name);
+  let lastRun = 0;
+  async function runSchema() {
+    const schema = options.schema?.();
+    if (!isStandardSchema(schema)) return {};
+    const run = ++lastRun;
+    const result = await schema["~standard"].validate(state.value);
+    if (run !== lastRun) return null;
+    return toErrorMap(result.issues);
+  }
+  function replaceErrors(next) {
+    for (const key of Object.keys(errors)) delete errors[key];
+    Object.assign(errors, next);
+  }
+  async function validate() {
+    let next = await runSchema();
+    while (next === null) next = await runSchema();
+    replaceErrors(next);
+    return Object.keys(errors).length === 0;
+  }
+  const isRevealed = (name) => submitted.value || touched[name] === true;
+  function applyRevealed(next) {
+    for (const name of Object.keys(errors)) {
+      if (next[name] === void 0 || !isRevealed(name)) delete errors[name];
+    }
+    for (const [name, message] of Object.entries(next)) {
+      if (isRevealed(name)) errors[name] = message;
+    }
+  }
+  async function revalidate() {
+    if (!submitted.value && Object.keys(touched).length === 0) return;
+    const next = await runSchema();
+    if (!next) return;
+    applyRevealed(next);
+  }
+  function setValue(name, value) {
+    setPath(state.value, name, value);
+    void revalidate();
+  }
+  function blur(name) {
+    touched[name] = true;
+    void revalidate();
+  }
+  const errorFor = (name) => isRevealed(name) ? errors[name] : void 0;
+  async function submit(onValid) {
+    submitted.value = true;
+    submitting.value = true;
+    try {
+      if (!await validate()) return false;
+      await onValid(state.value);
+      return true;
+    } finally {
+      submitting.value = false;
+    }
+  }
+  function resetField(name) {
+    setPath(state.value, name, cloneValue(getPath(initial.value, name)));
+    delete touched[name];
+    delete errors[name];
+  }
+  function reset(next) {
+    if (next) state.value = next;
+    initial.value = cloneValue(state.value);
+    replaceErrors({});
+    for (const key of Object.keys(touched)) delete touched[key];
+    submitted.value = false;
+  }
+  return { blur, dirty, errorFor, errors, getValue, isDirty, reset, resetField, setValue, submit, submitted, submitting, touched, validate };
+}

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

@@ -0,0 +1,35 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoFieldOrientation } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    name?: string;
+    description?: string;
+    error?: string;
+    help?: string;
+    hint?: string;
+    label?: string;
+    orientation?: VunoFieldOrientation;
+    required?: boolean;
+    size?: VunoSize;
+    ui?: VunoUi<'formField'>;
+};
+declare var __VLS_1: {
+    id: string;
+    name: string | undefined;
+    'aria-describedby': string | undefined;
+    'aria-invalid': boolean | undefined;
+    'aria-required': boolean | undefined;
+    required: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/FormField/FormField.theme.d.ts

@@ -0,0 +1,62 @@
+export declare const formFieldTheme: Record<"formField", {
+    readonly slots: {
+        readonly content: "flex min-w-0 flex-col gap-1";
+        readonly control: "flex min-w-0 flex-col gap-1";
+        readonly description: "text-vuno-muted";
+        readonly error: "text-vuno-error";
+        readonly help: "text-vuno-muted";
+        readonly hint: "text-vuno-muted";
+        readonly label: "font-medium text-vuno-strong";
+        readonly labelRow: "flex items-center justify-between gap-2";
+        readonly required: "text-vuno-error";
+        readonly root: "grid w-full min-w-0 gap-1";
+    };
+    readonly variants: {
+        readonly orientation: {
+            readonly horizontal: {
+                readonly content: "pt-2";
+                readonly root: "grid-cols-[minmax(8rem,1fr)_minmax(0,2fr)] items-start gap-x-4";
+            };
+            readonly vertical: {
+                readonly root: "grid-cols-1";
+            };
+        };
+        readonly size: {
+            readonly xs: {
+                readonly description: "text-xs";
+                readonly error: "text-xs";
+                readonly help: "text-xs";
+                readonly hint: "text-xs";
+                readonly label: "text-xs";
+            };
+            readonly sm: {
+                readonly description: "text-xs";
+                readonly error: "text-xs";
+                readonly help: "text-xs";
+                readonly hint: "text-xs";
+                readonly label: "text-xs";
+            };
+            readonly md: {
+                readonly description: "text-xs";
+                readonly error: "text-xs";
+                readonly help: "text-xs";
+                readonly hint: "text-xs";
+                readonly label: "text-sm";
+            };
+            readonly lg: {
+                readonly description: "text-sm";
+                readonly error: "text-sm";
+                readonly help: "text-sm";
+                readonly hint: "text-sm";
+                readonly label: "text-sm";
+            };
+            readonly xl: {
+                readonly description: "text-sm";
+                readonly error: "text-sm";
+                readonly help: "text-sm";
+                readonly hint: "text-sm";
+                readonly label: "text-base";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/FormField/FormField.theme.js

@@ -0,0 +1,28 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const formFieldTheme = defineTheme("formField", {
+  slots: {
+    content: "flex min-w-0 flex-col gap-1",
+    control: "flex min-w-0 flex-col gap-1",
+    description: "text-vuno-muted",
+    error: "text-vuno-error",
+    help: "text-vuno-muted",
+    hint: "text-vuno-muted",
+    label: "font-medium text-vuno-strong",
+    labelRow: "flex items-center justify-between gap-2",
+    required: "text-vuno-error",
+    root: "grid w-full min-w-0 gap-1"
+  },
+  variants: {
+    orientation: {
+      horizontal: { content: "pt-2", root: "grid-cols-[minmax(8rem,1fr)_minmax(0,2fr)] items-start gap-x-4" },
+      vertical: { root: "grid-cols-1" }
+    },
+    size: {
+      xs: { description: "text-xs", error: "text-xs", help: "text-xs", hint: "text-xs", label: "text-xs" },
+      sm: { description: "text-xs", error: "text-xs", help: "text-xs", hint: "text-xs", label: "text-xs" },
+      md: { description: "text-xs", error: "text-xs", help: "text-xs", hint: "text-xs", label: "text-sm" },
+      lg: { description: "text-sm", error: "text-sm", help: "text-sm", hint: "text-sm", label: "text-sm" },
+      xl: { description: "text-sm", error: "text-sm", help: "text-sm", hint: "text-sm", label: "text-base" }
+    }
+  }
+});

package/dist/runtime/app/components/FormField/FormField.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "VunoFormField" });
+const props = defineProps({
+  name: { type: String, required: false },
+  description: { type: String, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const uid = useId();
+const size = computed(() => props.size ?? "md");
+const orientation = computed(() => props.orientation ?? "vertical");
+const controlId = computed(() => `${uid}-control`);
+const descriptionId = computed(() => `${uid}-description`);
+const errorId = computed(() => `${uid}-error`);
+const helpId = computed(() => `${uid}-help`);
+const hintId = computed(() => `${uid}-hint`);
+const describedBy = computed(() => {
+  const ids = [props.error && errorId.value, props.hint && hintId.value, props.description && descriptionId.value, !props.error && props.help && helpId.value].filter(Boolean);
+  return ids.length > 0 ? ids.join(" ") : void 0;
+});
+const control = computed(() => ({
+  id: controlId.value,
+  name: props.name,
+  "aria-describedby": describedBy.value,
+  "aria-invalid": props.error ? true : void 0,
+  "aria-required": props.required ? true : void 0,
+  required: props.required
+}));
+const classes = useTheme(
+  "formField",
+  () => props.ui,
+  () => ({ orientation: orientation.value, size: size.value })
+);
+</script>
+
+<template>
+    <div :class="classes.root">
+        <div :class="classes.content">
+            <div
+                v-if="props.label || props.hint"
+                :class="classes.labelRow"
+            >
+                <!--
+                La etiqueta apunta al control por `for`/`id` y no lo envuelve:
+                envolver también funciona con un `<input>`, pero no con un
+                control compuesto, y aquí dentro puede haber cualquiera.
+            -->
+                <label
+                    v-if="props.label"
+                    :class="classes.label"
+                    :for="controlId"
+                >
+                    {{ props.label }}
+                    <!--
+                    El asterisco es decoración y se oculta al lector: quien no
+                    ve la pantalla se entera de que el campo es obligatorio por
+                    `required` en el control, que es lo que el navegador y el
+                    lector entienden. Anunciar «asterisco» no informa de nada.
+                -->
+                    <span
+                        v-if="props.required"
+                        aria-hidden="true"
+                        :class="classes.required"
+                        >*</span
+                    >
+                </label>
+
+                <span
+                    v-if="props.hint"
+                    :id="hintId"
+                    :class="classes.hint"
+                    >{{ props.hint }}</span
+                >
+            </div>
+
+            <p
+                v-if="props.description"
+                :id="descriptionId"
+                :class="classes.description"
+            >
+                {{ props.description }}
+            </p>
+        </div>
+
+        <div :class="classes.control">
+            <slot v-bind="control" />
+
+            <!--
+            El error se pinta siempre, aunque esté vacío, porque una región en
+            vivo solo anuncia lo que aparece **dentro** de ella: si el elemento
+            nace con el texto ya puesto, el lector no lee nada. Vacío se va a
+            `sr-only`, que al ser absoluto no ocupa ni cuenta como item del
+            grid, así que no deja hueco.
+
+            `polite` y no `alert`: los errores llegan al salir del campo o al
+            enviar, y un aviso que interrumpe a mitad de frase cada vez que se
+            tabula molesta más de lo que ayuda.
+        -->
+            <p
+                :id="errorId"
+                aria-live="polite"
+                :class="[classes.error, !props.error && 'sr-only']"
+            >
+                {{ props.error }}
+            </p>
+
+            <p
+                v-if="props.help && !props.error"
+                :id="helpId"
+                :class="classes.help"
+            >
+                {{ props.help }}
+            </p>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,35 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoFieldOrientation } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    name?: string;
+    description?: string;
+    error?: string;
+    help?: string;
+    hint?: string;
+    label?: string;
+    orientation?: VunoFieldOrientation;
+    required?: boolean;
+    size?: VunoSize;
+    ui?: VunoUi<'formField'>;
+};
+declare var __VLS_1: {
+    id: string;
+    name: string | undefined;
+    'aria-describedby': string | undefined;
+    'aria-invalid': boolean | undefined;
+    'aria-required': boolean | undefined;
+    required: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/FormModal/FormModal.d.vue.ts

@@ -0,0 +1,63 @@
+import type { VunoModalSize } from '#vuno/types/base';
+import type { VunoFormDefinition, VunoFormState, VunoSchema } from '#vuno/types/form';
+import type { VunoUi } from '#vuno/types/slots';
+declare const __VLS_export: <TState extends VunoFormState>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        /**
+         * Cierra el modal nada más enviar. Déjalo apagado si guardas contra una
+         * API: querrás cerrar tú al confirmar, y mientras tanto usar `loading`.
+         */
+        closeOnSubmit?: boolean;
+        definition: VunoFormDefinition;
+        description?: string;
+        /** Slots del formulario que va dentro. */
+        formUi?: VunoUi<"form">;
+        /** Marca el botón de guardar como ocupado y bloquea el cierre. */
+        loading?: boolean;
+        /** Opcional, igual que en `VForm`: cualquier esquema Standard Schema. */
+        schema?: VunoSchema;
+        /** Ancho del diálogo; el formulario usa `3xl` de forma predeterminada. */
+        size?: VunoModalSize;
+        title?: string;
+        /** Slots del modal (`content`, `body`, ...). */
+        ui?: VunoUi<"formModal">;
+    } & {
+        open?: boolean;
+        state: TState;
+    }) & {
+        onClose?: (() => any) | undefined;
+        onSubmit?: ((state: TState) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:state"?: ((value: TState) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /**
+         * `formId` es imprescindible, no un extra: el pie del modal vive fuera
+         * del `<form>`, así que un botón propio solo puede enviarlo con
+         * `:form="formId"`. Sin exponerlo, cualquier pie a medida queda mudo.
+         */
+        footer?: (props: {
+            dirty: boolean;
+            formId: string;
+            loading: boolean;
+            close: () => void;
+            reset: () => void;
+        }) => unknown;
+        /** Elemento que abre el modal, si prefieres eso a controlar `open`. */
+        trigger?: () => unknown;
+    };
+    emit: (((evt: "close") => void) & ((evt: "submit", state: TState) => void)) & (((event: "update:open", value: boolean) => void) & ((event: "update:state", value: TState) => void));
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/app/components/FormModal/FormModal.theme.d.ts

@@ -0,0 +1,8 @@
+export declare const formModalTheme: Record<"formModal", {
+    readonly slots: {
+        readonly body: "";
+        readonly content: "";
+        readonly footer: "justify-between";
+        readonly root: "";
+    };
+}>;

package/dist/runtime/app/components/FormModal/FormModal.theme.js

@@ -0,0 +1,9 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const formModalTheme = defineTheme("formModal", {
+  slots: {
+    body: "",
+    content: "",
+    footer: "justify-between",
+    root: ""
+  }
+});