@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/FileUploader/internal/FileUploaderItem/FileUploaderItem.vue.d.ts

@@ -0,0 +1,29 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+import type { FileUploaderStatus } from '#vuno/components/FileUploader/FileUploader.types';
+type Props = {
+    name?: string;
+    disabled?: boolean;
+    errorBody?: string;
+    errorSubject?: string;
+    iconDescription?: string;
+    invalid?: boolean;
+    size?: ControlSize;
+    status?: FileUploaderStatus;
+    ui?: ComponentUi<'fileUploader'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+}>, {
+    size: ControlSize;
+    name: string;
+    errorBody: string;
+    status: FileUploaderStatus;
+    ui: ComponentUi<"fileUploader">;
+    iconDescription: string;
+    errorSubject: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FileUploader/internal/files.d.ts

@@ -0,0 +1,62 @@
+import type { FileUploaderFile } from '#vuno/components/FileUploader/FileUploader.types';
+/** Lo que decide si un archivo entra limpio o marcado. */
+export type FileValidation = {
+    accept?: string | string[];
+    maxFileSize?: number;
+    pattern?: string;
+};
+/** La expresión con la que Vuno reconoce la extensión de un nombre. */
+export declare const defaultFilePattern = ".[0-9a-z]+$";
+/**
+ * El `accept` como lista.
+ *
+ * El sistema de origen lo declara como array y el atributo nativo solo entiende la cadena, así
+ * que el contrato admite las dos formas y aquí se normaliza una sola vez.
+ */
+export declare function toAcceptList(accept?: string | string[]): string[];
+/** El atributo del input, que es siempre una cadena separada por comas. */
+export declare function toAcceptAttribute(accept?: string | string[]): string | undefined;
+/**
+ * Los tamaños se leen en las unidades que la gente usa, no en bytes.
+ *
+ * El decimal aparece solo por debajo de 10 y **nunca en kilobytes**, así que un
+ * archivo de kilobyte y medio se lee «2 KB». Es a propósito, aunque no lo
+ * pareciera: a esa escala la cifra exacta no decide nada —entre 1 KB y 2 KB no
+ * hay ninguna diferencia que le importe a nadie—, mientras que en megabytes sí,
+ * porque es donde están los topes de subida y donde la gente compara contra
+ * ellos.
+ *
+ * Queda escrito porque sin el motivo se lee como un descuido de `toFixed`, y el
+ * siguiente que pase lo «arregla».
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * Si el archivo encaja con lo declarado en `accept`.
+ *
+ * Se comprueban el tipo MIME, su comodín —`image/*`, que es la forma más común
+ * de escribirlo y la que el selector nativo entiende— y la extensión. Vuno
+ * solo compara literales, y con `image/*` marcaría inválida cualquier imagen.
+ *
+ * Un archivo sin extensión reconocible **no** encaja con una lista de
+ * extensiones. El sistema de origen lo descarta de la lista sin decir nada; aquí se marca
+ * inválido y la fila explica el motivo, que es la diferencia entre un control
+ * que filtra y uno que parece haberse tragado el archivo.
+ */
+export declare function isAcceptedFile(file: File, accepted: string[], pattern?: string): boolean;
+/**
+ * El archivo convertido en fila, marcado si incumple algo.
+ *
+ * Lo inválido **no se descarta**: la fila es donde Vuno explica el motivo, y
+ * un archivo que desaparece sin mensaje se lee como un fallo de la aplicación.
+ * Quien use el control puede reescribir el asunto y el cuerpo en el modelo.
+ */
+export declare function validateFile(file: File, options: FileValidation): Pick<FileUploaderFile, 'errorBody' | 'errorSubject' | 'invalid'>;
+/**
+ * Los archivos de una caída.
+ *
+ * Se leen de `items` y no de `files` porque es lo único que distingue una
+ * carpeta de un archivo: soltar una carpeta entrega una entrada de directorio
+ * que luego no se puede leer, y sin filtrarla la lista muestra una fila que no
+ * corresponde a ningún archivo. Si el navegador no da `items`, se cae a `files`.
+ */
+export declare function filesFromTransfer(transfer: DataTransfer | null | undefined): File[];

package/dist/runtime/app/components/FileUploader/internal/files.js

@@ -0,0 +1,59 @@
+export const defaultFilePattern = ".[0-9a-z]+$";
+export function toAcceptList(accept) {
+  const list = Array.isArray(accept) ? accept : accept?.split(",") ?? [];
+  return list.map((entry) => entry.trim().toLowerCase()).filter((entry) => entry.length > 0);
+}
+export function toAcceptAttribute(accept) {
+  const list = toAcceptList(accept);
+  return list.length > 0 ? list.join(",") : void 0;
+}
+export function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value.toFixed(value >= 10 || unit === 0 ? 0 : 1)} ${units[unit]}`;
+}
+export function isAcceptedFile(file, accepted, pattern = defaultFilePattern) {
+  if (accepted.length === 0) return true;
+  const type = file.type.toLowerCase();
+  const [extension] = file.name.toLowerCase().match(new RegExp(pattern, "i")) ?? [];
+  return accepted.some((entry) => {
+    if (entry.startsWith(".")) return entry === extension;
+    if (entry.endsWith("/*")) return type.startsWith(entry.slice(0, -1));
+    return entry === type || entry === extension;
+  });
+}
+export function validateFile(file, options) {
+  if (options.maxFileSize !== void 0 && file.size > options.maxFileSize) {
+    return {
+      errorBody: `El tama\xF1o m\xE1ximo es ${formatFileSize(options.maxFileSize)}.`,
+      errorSubject: "El archivo supera el tama\xF1o permitido.",
+      invalid: true
+    };
+  }
+  const accepted = toAcceptList(options.accept);
+  if (!isAcceptedFile(file, accepted, options.pattern)) {
+    return {
+      errorBody: `Formatos admitidos: ${accepted.join(", ")}.`,
+      errorSubject: "El formato del archivo no est\xE1 permitido.",
+      invalid: true
+    };
+  }
+  return {};
+}
+export function filesFromTransfer(transfer) {
+  if (!transfer) return [];
+  const items = [...transfer.items ?? []];
+  if (items.length === 0) return [...transfer.files];
+  return items.flatMap((item) => {
+    if (item.kind !== "file") return [];
+    if (item.webkitGetAsEntry?.()?.isDirectory) return [];
+    const file = item.getAsFile();
+    return file ? [file] : [];
+  });
+}

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

@@ -1,52 +1,17 @@
-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<({
-        /**
-         * Id del `<form>`. Permite enviarlo desde un botón que vive fuera de
-         * él —el pie de un modal, por ejemplo— con `<button form="...">`.
-         */
-        id?: string;
-        definition: VunoFormDefinition;
-        /**
-         * Opcional: un panel de filtros, por ejemplo, no necesita validación.
-         *
-         * Cualquier esquema que implemente Standard Schema —zod, valibot,
-         * arktype—, sin que el módulo dependa de ninguno.
-         */
-        schema?: VunoSchema;
-        ui?: VunoUi<"form">;
-    } & {
-        state: TState;
-    }) & {
-        onSubmit?: ((state: TState) => any) | undefined;
-        "onUpdate:state"?: ((value: TState) => any) | undefined;
-    }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: import("vue").ShallowUnwrapRef<{
-        dirty: import("vue").ComputedRef<boolean>;
-        errors: import("vue").ComputedRef<Set<string>>;
-        isDirty: (name?: string) => boolean;
-        reset: (next?: TState | undefined) => void;
-        resetField: (name: string) => void;
-        submit: () => Promise<void>;
-    }>) => void;
-    attrs: any;
-    slots: {
-        footer?: (props: {
-            dirty: boolean;
-            reset: () => void;
-        }) => unknown;
-    };
-    emit: ((evt: "submit", state: TState) => void) & ((event: "update:state", value: TState) => void);
-}>) => import("vue").VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+import type { FormProps } from './Form.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
+declare const __VLS_base: import("vue").DefineComponent<FormProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormProps> & Readonly<{}>, {
+    fluid: boolean;
+    ui: import("../../types/control.js").ControlUi<"root">;
+}, {}, {}, {}, 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_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,9 +1,24 @@
+/**
+ * Vuno no da estilos a `vuno--form`: la clase es solo un gancho y el ritmo
+ * vertical lo pone el contenedor —en los ejemplos de Vuno, un `Stack`—.
+ *
+ * Vuno lo asume en el componente para que un formulario compuesto en plantilla
+ * respire sin envoltorios: `gap-8` es `$spacing-07` (32 px), la separación de la
+ * escala Vuno entre grupos de un formulario.
+ *
+ * `fluid` reproduce `vuno--form--fluid`, donde los campos se apilan sin
+ * separación y comparten borde.
+ */
 export declare const formTheme: Record<"form", {
     readonly slots: {
-        readonly base: "@container relative flex w-full flex-col gap-4";
-        readonly footer: "flex w-full items-center justify-between gap-4";
-        readonly sections: "grid w-full grid-cols-12 gap-x-4 gap-y-5";
-        readonly tabs: "w-full";
-        readonly tabsContent: "w-full pt-5";
+        readonly root: "flex w-full flex-col gap-8";
+    };
+    readonly variants: {
+        readonly fluid: {
+            readonly false: {};
+            readonly true: {
+                readonly root: "gap-0";
+            };
+        };
     };
 }>;

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

@@ -1,10 +1,10 @@
 import { defineTheme } from "#vuno/utils/theme";
 export const formTheme = defineTheme("form", {
-  slots: {
-    base: "@container relative flex w-full flex-col gap-4",
-    footer: "flex w-full items-center justify-between gap-4",
-    sections: "grid w-full grid-cols-12 gap-x-4 gap-y-5",
-    tabs: "w-full",
-    tabsContent: "w-full pt-5"
+  slots: { root: "flex w-full flex-col gap-8" },
+  variants: {
+    fluid: {
+      false: {},
+      true: { root: "gap-0" }
+    }
   }
 });

package/dist/runtime/app/components/Form/Form.types.d.ts

@@ -0,0 +1 @@
+export type { FormProps } from '#vuno/types/form';

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

@@ -1,129 +1,19 @@
 <script setup>
-import { computed, nextTick, provide, useId, useTemplateRef } from "vue";
 import { useTheme } from "#vuno/composables/useTheme";
-import { vunoFormInjectionKey } from "#vuno/internal/keys";
-import FormSection from "#vuno/components/FormSection/FormSection.vue";
-import Tabs from "#vuno/components/Tabs/Tabs.vue";
-import { getColumnSpanClass } from "./internal/grid";
-import { useVunoFormState } from "./internal/useVunoFormState";
-defineOptions({ name: "VunoForm" });
-const state = defineModel("state", { type: null, ...{ required: true } });
+defineOptions({ name: "Form" });
 const props = defineProps({
-  id: { type: String, required: false },
-  definition: { type: Object, required: true },
-  schema: { type: null, required: false },
-  ui: { type: Object, required: false }
+  fluid: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
 });
-const emit = defineEmits(["submit"]);
-const slots = defineSlots();
-const ui = useTheme("form", () => props.ui);
-const fallbackId = useId();
-const formId = computed(() => props.id ?? fallbackId);
-const form = useVunoFormState({ state, schema: () => props.schema });
-const dirty = form.dirty;
-const size = computed(() => props.definition.size);
-const isTabs = computed(() => props.definition.layout === "tabs");
-const errorNames = computed(() => new Set(Object.keys(form.errors)));
-const tabItems = computed(
-  () => props.definition.sections.map((section, index) => {
-    const errors = section.fields.filter((field) => errorNames.value.has(field.name) || [...errorNames.value].some((name) => name?.startsWith(`${field.name}.`))).length;
-    return {
-      badge: errors > 0 ? { color: "error", label: String(errors) } : void 0,
-      icon: section.icon,
-      label: section.title ?? section.id,
-      value: `${section.id}-${index}`
-    };
-  })
+const ui = useTheme(
+  "form",
+  () => props.ui,
+  () => ({ fluid: props.fluid ? "true" : "false" })
 );
-const reset = () => form.reset();
-function sectionFor(value) {
-  const index = tabItems.value.findIndex((item) => item.value === value);
-  return props.definition.sections[index];
-}
-const context = {
-  dirty: form.dirty,
-  errorFor: form.errorFor,
-  getValue: form.getValue,
-  initialState: state.value,
-  isDirty: form.isDirty,
-  reset,
-  resetField: form.resetField,
-  setValue: form.setValue,
-  size,
-  touched: form.touched,
-  isTouched: (name) => form.touched[name] ?? false,
-  // `setTouched` es lo que llama un campo al perder el foco, y es cuando
-  // el motor decide si toca avisar.
-  setTouched: (name, value = true) => value ? form.blur(name) : delete form.touched[name]
-};
-provide(vunoFormInjectionKey, context);
-const formEl = useTemplateRef("formEl");
-async function focusFirstInvalid() {
-  await nextTick();
-  formEl.value?.querySelector('[aria-invalid="true"]')?.focus();
-}
-async function onSubmit() {
-  const valid = await form.submit((validated) => emit("submit", validated));
-  if (!valid) await focusFirstInvalid();
-}
-defineExpose({ dirty: form.dirty, errors: errorNames, isDirty: form.isDirty, reset: form.reset, resetField: form.resetField, submit: onSubmit });
 </script>
 
 <template>
-    <!--
-        `novalidate` apaga la validación nativa del navegador, no el `required`.
-        Sin él conviven dos validaciones: la del navegador corta el envío antes
-        de que el esquema llegue a ejecutarse, y avisa con un globo suyo, en el
-        idioma del navegador y sin pasar por el tema. Los mensajes del esquema
-        no llegaban a verse en los campos obligatorios.
-
-        El atributo `required` se queda en los inputs, que es lo que anuncia el
-        campo como obligatorio a un lector de pantalla y lo que permite
-        estilarlo; lo único que se apaga es la interfaz nativa.
-    -->
-    <form
-        :id="formId"
-        ref="formEl"
-        :class="ui.base"
-        novalidate
-        @submit.prevent="onSubmit"
-    >
-        <Tabs
-            v-if="isTabs"
-            :items="tabItems"
-            :size="size"
-            :ui="{ content: ui.tabsContent, root: ui.tabs }"
-        >
-            <template #content="{ item }">
-                <FormSection
-                    plain
-                    :section="sectionFor(item.value)"
-                />
-            </template>
-        </Tabs>
-
-        <div
-            v-else
-            :class="ui.sections"
-        >
-            <div
-                v-for="(section, index) in props.definition.sections"
-                :key="`${section.id}-${index}`"
-                :class="getColumnSpanClass(section.columns)"
-            >
-                <FormSection :section="section" />
-            </div>
-        </div>
-
-        <div
-            v-if="slots.footer"
-            :class="ui.footer"
-        >
-            <slot
-                :dirty="dirty"
-                name="footer"
-                :reset="reset"
-            />
-        </div>
+    <form :class="ui.root">
+        <slot />
     </form>
 </template>

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

@@ -1,52 +1,17 @@
-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<({
-        /**
-         * Id del `<form>`. Permite enviarlo desde un botón que vive fuera de
-         * él —el pie de un modal, por ejemplo— con `<button form="...">`.
-         */
-        id?: string;
-        definition: VunoFormDefinition;
-        /**
-         * Opcional: un panel de filtros, por ejemplo, no necesita validación.
-         *
-         * Cualquier esquema que implemente Standard Schema —zod, valibot,
-         * arktype—, sin que el módulo dependa de ninguno.
-         */
-        schema?: VunoSchema;
-        ui?: VunoUi<"form">;
-    } & {
-        state: TState;
-    }) & {
-        onSubmit?: ((state: TState) => any) | undefined;
-        "onUpdate:state"?: ((value: TState) => any) | undefined;
-    }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: import("vue").ShallowUnwrapRef<{
-        dirty: import("vue").ComputedRef<boolean>;
-        errors: import("vue").ComputedRef<Set<string>>;
-        isDirty: (name?: string) => boolean;
-        reset: (next?: TState | undefined) => void;
-        resetField: (name: string) => void;
-        submit: () => Promise<void>;
-    }>) => void;
-    attrs: any;
-    slots: {
-        footer?: (props: {
-            dirty: boolean;
-            reset: () => void;
-        }) => unknown;
-    };
-    emit: ((evt: "submit", state: TState) => void) & ((event: "update:state", value: TState) => void);
-}>) => import("vue").VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+import type { FormProps } from './Form.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
+declare const __VLS_base: import("vue").DefineComponent<FormProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormProps> & Readonly<{}>, {
+    fluid: boolean;
+    ui: import("../../types/control.js").ControlUi<"root">;
+}, {}, {}, {}, 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_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,21 @@
+import type { FormGroupProps } from './FormGroup.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FormGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormGroupProps> & Readonly<{}>, {
+    disabled: boolean;
+    message: boolean;
+    invalid: boolean;
+    ui: import("../../types/control.js").ControlUi<"legend" | "message" | "root">;
+    legendId: string;
+    messageText: string;
+}, {}, {}, {}, 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/FormGroup/FormGroup.theme.d.ts

@@ -0,0 +1,45 @@
+/**
+ * `root` es `vuno--fieldset`, que en Vuno solo aplica el reset del elemento.
+ * `min-w-0` es añadido: sin él el `fieldset` mantiene su `min-width:
+ * min-content` y desborda cualquier rejilla o columna flexible que lo contenga.
+ *
+ * `legend` es `vuno--label`: tipografía `label-01`, texto secundario y el margen
+ * inferior `$spacing-03`. Vuno no lo enrojece cuando el grupo es inválido; el
+ * color de error vive en el mensaje. Como rótulo que es, se apaga también
+ * cuando lo deshabilita un `fieldset` de fuera —un grupo anidado dentro de otro
+ * grupo deshabilitado—, igual que el mensaje y que `FormLabel`.
+ *
+ * `message` es `vuno--form__requirements`. El sistema de origen renderiza esa clase sin
+ * declararla en ninguna hoja, así que aquí toma el estilo del texto de ayuda
+ * —`helper-text-01` y `$text-helper`— y pasa a `$text-error` cuando el grupo es
+ * inválido, igual que `vuno--form-requirement`.
+ */
+export declare const formGroupTheme: Record<"formGroup", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly message: "text-(--vuno-text-disabled)";
+        };
+        readonly disabled: "true";
+        readonly invalid: "true";
+    }];
+    readonly slots: {
+        readonly legend: "mb-2 inline-block align-baseline text-xs leading-4 font-normal tracking-[0.16px] text-(--vuno-text-secondary) [fieldset:disabled_&]:text-(--vuno-text-disabled)";
+        readonly message: "mt-1 text-xs leading-4 tracking-[0.16px] text-(--vuno-text-helper) [fieldset:disabled_&]:text-(--vuno-text-disabled)";
+        readonly root: "m-0 min-w-0 border-0 p-0";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly legend: "text-(--vuno-text-disabled)";
+                readonly message: "text-(--vuno-text-disabled)";
+            };
+        };
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly message: "text-(--vuno-text-error)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,24 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const formGroupTheme = defineTheme("formGroup", {
+  compoundVariants: [{ class: { message: "text-(--vuno-text-disabled)" }, disabled: "true", invalid: "true" }],
+  slots: {
+    legend: "mb-2 inline-block align-baseline text-xs leading-4 font-normal tracking-[0.16px] text-(--vuno-text-secondary) [fieldset:disabled_&]:text-(--vuno-text-disabled)",
+    message: "mt-1 text-xs leading-4 tracking-[0.16px] text-(--vuno-text-helper) [fieldset:disabled_&]:text-(--vuno-text-disabled)",
+    root: "m-0 min-w-0 border-0 p-0"
+  },
+  variants: {
+    /*
+     * Vuno apaga con `fieldset[disabled]` las etiquetas y los textos de
+     * ayuda que contiene el grupo; las piezas propias del grupo se apagan
+     * aquí, donde el estado se conoce.
+     */
+    disabled: {
+      false: {},
+      true: { legend: "text-(--vuno-text-disabled)", message: "text-(--vuno-text-disabled)" }
+    },
+    invalid: {
+      false: {},
+      true: { message: "text-(--vuno-text-error)" }
+    }
+  }
+});

package/dist/runtime/app/components/FormGroup/FormGroup.types.d.ts

@@ -0,0 +1 @@
+export type { FormGroupProps } from '#vuno/types/form';

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

@@ -0,0 +1,48 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "FormGroup" });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  legendId: { type: String, required: false, default: void 0 },
+  legendText: { type: String, required: true },
+  message: { type: Boolean, required: false, default: false },
+  messageText: { type: String, required: false, default: "" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const messageId = `${useId()}-message`;
+const hasMessage = computed(() => props.message && props.messageText.length > 0);
+const ui = useTheme(
+  "formGroup",
+  () => props.ui,
+  () => ({ disabled: props.disabled ? "true" : "false", invalid: props.invalid ? "true" : "false" })
+);
+</script>
+
+<template>
+    <fieldset
+        :aria-describedby="hasMessage ? messageId : void 0"
+        :aria-labelledby="props.legendId"
+        :class="ui.root"
+        :data-invalid="props.invalid ? '' : void 0"
+        :disabled="props.disabled"
+    >
+        <legend
+            :id="props.legendId"
+            :class="ui.legend"
+        >
+            {{ props.legendText }}
+        </legend>
+
+        <slot />
+
+        <p
+            v-if="hasMessage"
+            :id="messageId"
+            :class="ui.message"
+        >
+            {{ props.messageText }}
+        </p>
+    </fieldset>
+</template>

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

@@ -0,0 +1,21 @@
+import type { FormGroupProps } from './FormGroup.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FormGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormGroupProps> & Readonly<{}>, {
+    disabled: boolean;
+    message: boolean;
+    invalid: boolean;
+    ui: import("../../types/control.js").ControlUi<"legend" | "message" | "root">;
+    legendId: string;
+    messageText: string;
+}, {}, {}, {}, 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;
+    };
+};