@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,12 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "TileBelowTheFoldContent" });
+defineSlots();
+const ui = useTheme("tile");
+</script>
+
+<template>
+    <div :class="ui.below">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/TileGroup/TileGroup.d.vue.ts

@@ -0,0 +1,28 @@
+import type { TileGroupProps, TileGroupValue } from './TileGroup.types.js';
+type __VLS_Props = TileGroupProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: TileGroupValue | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("../../types/control.js").OptionValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("../../types/control.js").OptionValue | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    legend: string;
+    name: string;
+    ui: import("../../types/slots.js").ComponentUi<"tile">;
+    required: boolean;
+}, {}, {}, {}, 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/TileGroup/TileGroup.types.d.ts

@@ -0,0 +1,30 @@
+import type { OptionValue } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+export type TileGroupProps = {
+    /**
+     * Nombre con el que la elección viaja en el formulario y, sobre todo, lo
+     * que agrupa los radios: sin un nombre común el navegador no los excluye
+     * entre sí ni los recorre con las flechas.
+     *
+     * En el sistema de origen es obligatorio. Aquí es opcional y el grupo
+     * genera uno estable en servidor y cliente, igual que `RadioButtonGroup`:
+     * un grupo que no se envía en un formulario sigue necesitando el nombre
+     * para comportarse como grupo, y obligar a inventárselo no aporta nada.
+     */
+    name?: string;
+    disabled?: boolean;
+    /**
+     * Rótulo del grupo. Sin declararlo no se dibuja la `legend`, como en el
+     * sistema de origen; en ese caso el grupo debe recibir su nombre accesible
+     * por otra vía —`aria-label` o `aria-labelledby`— porque un `fieldset` sin
+     * leyenda se anuncia sin nombre.
+     */
+    legend?: string;
+    required?: boolean;
+    ui?: ComponentUi<'tile'>;
+};
+/**
+ * El valor de la tile elegida. Es el mismo contrato de valor que el resto de
+ * las listas del paquete, no uno propio del grupo.
+ */
+export type TileGroupValue = OptionValue;

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

@@ -0,0 +1,47 @@
+<script setup>
+import { computed, provide, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { tileGroupContextKey } from "./internal/context";
+defineOptions({ name: "TileGroup" });
+const model = defineModel({ type: [Boolean, null, Number, String], skipCheck: true, ...{ default: void 0 } });
+const props = defineProps({
+  name: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  legend: { type: String, required: false, default: void 0 },
+  required: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const uid = useId();
+const ui = useTheme("tile", () => props.ui);
+provide(tileGroupContextKey, {
+  name: computed(() => props.name ?? uid),
+  disabled: computed(() => props.disabled),
+  required: computed(() => props.required),
+  value: model
+});
+</script>
+
+<template>
+    <fieldset
+        :class="ui.group"
+        :disabled="props.disabled"
+    >
+        <legend
+            v-if="props.legend"
+            :class="ui.legend"
+        >
+            {{ props.legend }}
+        </legend>
+
+        <!--
+            La caja de opciones es la que coloca las tiles, y por eso es un slot de tema: el
+            sistema de origen las apila pegadas y quien compone decide con `ui.options` si van
+            en columnas, con separación o en línea. La geometría de la retícula es del
+            contenedor, no de la tile.
+        -->
+        <div :class="ui.options">
+            <slot />
+        </div>
+    </fieldset>
+</template>

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

@@ -0,0 +1,28 @@
+import type { TileGroupProps, TileGroupValue } from './TileGroup.types.js';
+type __VLS_Props = TileGroupProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: TileGroupValue | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("../../types/control.js").OptionValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("../../types/control.js").OptionValue | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    legend: string;
+    name: string;
+    ui: import("../../types/slots.js").ComponentUi<"tile">;
+    required: boolean;
+}, {}, {}, {}, 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/TileGroup/internal/context.d.ts

@@ -0,0 +1,21 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+import type { OptionValue } from '#vuno/types/control';
+export type TileGroupContext = {
+    /**
+     * El nombre compartido de las tiles, que es lo que las convierte en un solo
+     * grupo para el navegador. Viaja como `ComputedRef` porque es una prop:
+     * leerlo una vez en el montaje dejaría a las tiles con el nombre anterior
+     * cuando el grupo cambia de `name`, y dos grupos con el mismo nombre se
+     * comportan como uno.
+     */
+    name: ComputedRef<string>;
+    /**
+     * El `fieldset` apagado ya bloquea los radios por herencia del DOM, pero esa
+     * herencia no llega al tema: cada tile necesita saberlo para pintarse
+     * apagada.
+     */
+    disabled: ComputedRef<boolean>;
+    required: ComputedRef<boolean>;
+    value: Ref<OptionValue | undefined>;
+};
+export declare const tileGroupContextKey: InjectionKey<TileGroupContext>;

package/dist/runtime/app/components/TileGroup/internal/context.js

@@ -0,0 +1 @@
+export const tileGroupContextKey = Symbol("tile-group");

package/dist/runtime/app/components/TimePicker/TimePicker.context.d.ts

@@ -0,0 +1,23 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+import type { ControlSize } from '#vuno/types/control';
+/**
+ * Lo que el campo de la hora reparte a los selectores que lo acompañan.
+ *
+ * En el sistema de origen no hay contexto: el campo clona a sus hijos y les
+ * inyecta `disabled`, `readOnly` y los dos manejadores que impiden desplegar en
+ * solo lectura. Clonar hijos no existe en Vue, y tampoco hace falta: el
+ * selector resuelve su propio tema y su propio teclado, así que lo único que
+ * necesita del contenedor son las tres decisiones que no puede tomar por su
+ * cuenta.
+ *
+ * El tamaño viaja aquí y no como prop del selector a propósito: una fila con el
+ * campo a 48 px y el AM/PM a 40 px no es una variante, es un error, y el
+ * contenedor es el único que sabe cuál es el alto de la fila.
+ */
+export type TimePickerContext = {
+    /** Calculado, porque solo lectura ya lo ha anulado antes de repartirlo. */
+    disabled: ComputedRef<boolean>;
+    readonly: Ref<boolean>;
+    size: Ref<ControlSize>;
+};
+export declare const timePickerKey: InjectionKey<TimePickerContext>;

package/dist/runtime/app/components/TimePicker/TimePicker.context.js

@@ -0,0 +1 @@
+export const timePickerKey = Symbol("time-picker");

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

@@ -0,0 +1,40 @@
+import type { TimePickerProps } from './TimePicker.types.js';
+type __VLS_Props = TimePickerProps;
+type __VLS_Slots = {
+    /** Los `TimePickerSelect` de la fila: el periodo AM/PM y la zona horaria. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("../../types/control.js").ControlSize;
+    invalid: boolean;
+    warn: boolean;
+    type: import("./TimePicker.types.js").TimePickerType;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    readonly: boolean;
+    pattern: string;
+    id: string;
+    ui: import("../../types/slots.js").ComponentUi<"timePicker">;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    maxlength: number;
+}, {}, {}, {}, 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/TimePicker/TimePicker.theme.d.ts

@@ -0,0 +1,147 @@
+/**
+ * `vuno--time-picker`: el campo de la hora y los selectores que lo acompañan.
+ *
+ * Una sola clave sirve a los dos componentes de la familia, como ya ocurre en
+ * `accordion` y en `breadcrumb`, porque en el sistema de origen también son una
+ * sola hoja: el selector solo existe dentro de esta fila y de ella recibe su
+ * alto, su solo lectura y su margen. Separarlos en dos claves habría obligado a
+ * repetir las tres variantes en las dos y a mantenerlas sincronizadas a mano.
+ *
+ * El campo **no reutiliza la caja de `PrimitiveControl`** ni la clave `input`,
+ * por la misma razón que documentan `TextInput`, `Search` y `Select`: esa caja
+ * pinta el borde y el foco en un contenedor y deja el control transparente, que
+ * es la anatomía del combobox, no la de un `<input>` con fondo propio. Aquí el
+ * fondo, el filete inferior y el contorno de foco viven en el propio `<input>`
+ * y en el propio `<select>`, y el envoltorio solo es el ancla del icono de
+ * estado.
+ *
+ * Las dos anchuras del campo son literales del origen y no una escala: 4.875
+ * rem de serie y 6.175 rem cuando hay error o aviso. Los 20.8 px de diferencia
+ * **son** el hueco del icono de estado, que se superpone en vez de empujar el
+ * texto, así que el campo no lleva relleno final añadido cuando el icono
+ * aparece: crece por el lado que ocupa.
+ *
+ * El contorno rojo del estado inválido **cede ante el foco**, como en el
+ * sistema de origen, donde la regla cuelga de `input[data-invalid]:not(:focus)`.
+ * Aquí lo resuelve la precedencia de los modificadores: las utilidades `focus:`
+ * del slot base llegan después que la utilidad suelta de la variante, así que
+ * mientras se escribe manda el azul y el rojo vuelve al salir. Es el mismo
+ * mecanismo que usa `TextInput`.
+ *
+ * Cada declaración de contorno lleva `outline-solid` junto al ancho. En
+ * Tailwind v4 el estilo viaja en `--tw-outline-style` y `outline-none` lo deja
+ * en `none`, de modo que un `outline-2` suelto después de un `outline-none` no
+ * pinta nada.
+ */
+export declare const timePickerTheme: Record<"timePicker", {
+    readonly slots: {
+        /** `vuno--select__arrow`. No recibe puntero: quien pincha ahí pincha el selector. */
+        readonly arrow: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2 text-(--vuno-icon-primary)";
+        /** `vuno--time-picker__input`: el ancla del icono de estado. */
+        readonly field: "relative flex flex-col";
+        /**
+         * `vuno--time-picker__input-field` sobre `vuno--text-input`.
+         *
+         * La tipografía es `code-02` —monoespaciada, 14 px— y no la del resto
+         * de los campos. No es un capricho del origen: en una máscara de dígitos
+         * el ancho constante mantiene los dos puntos en el mismo sitio mientras
+         * se teclea, y `hh:mm` no baila al pasar de `1:00` a `11:00`.
+         */
+        readonly input: "block w-[4.875rem] appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-4 py-0 font-mono text-sm leading-5 tracking-[0.32px] text-(--vuno-text-primary) caret-(--vuno-text-primary) outline-none transition-[background-color,outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) placeholder:text-(--vuno-text-placeholder) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) disabled:outline-none disabled:[-webkit-text-fill-color:var(--vuno-text-disabled)] disabled:placeholder:text-(--vuno-text-disabled) motion-reduce:transition-none";
+        /** El rótulo del campo. Existe para que un proyecto pueda recolocarlo. */
+        readonly label: "";
+        /**
+         * `vuno--form-requirement`. El color lo pone el estado: el origen tiñe
+         * de error solo el mensaje del campo inválido y deja el aviso en el
+         * texto normal, porque un aviso no impide guardar.
+         */
+        readonly message: "mt-1 w-full text-xs leading-4 tracking-[0.16px] break-words text-(--vuno-text-primary)";
+        /**
+         * `vuno--time-picker`: la fila del campo y sus selectores.
+         *
+         * Se alinea por abajo y no por el centro porque el campo lleva rótulo
+         * encima y los selectores no: con `items-center` los filetes inferiores
+         * de las tres cajas quedarían a alturas distintas.
+         */
+        readonly picker: "flex items-end";
+        /**
+         * `vuno--select-input` dentro de la fila: ancho por contenido en vez de
+         * al 100 %, interlineado 1 y los mismos 48 px de relleno final que
+         * reserva el chevron.
+         */
+        readonly select: "block w-auto cursor-pointer appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) ps-4 pe-12 text-sm leading-none tracking-[0.16px] text-ellipsis text-(--vuno-text-primary) opacity-100 outline-none transition-[outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) not-disabled:hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-transparent disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) motion-reduce:transition-none";
+        /**
+         * `vuno--select-input__wrapper`: el ancla del chevron.
+         *
+         * Envuelve solo al control y no a la columna entera porque el rótulo
+         * puede hacerse visible: con el chevron anclado al `vuno--select`, un
+         * rótulo a la vista lo dejaría centrado entre los dos y no dentro de la
+         * caja.
+         */
+        readonly selectField: "relative flex items-center";
+        /** El rótulo del selector, que de serie está oculto a la vista. */
+        readonly selectLabel: "";
+        /**
+         * `vuno--select-option`. La lista desplegada la dibuja el sistema
+         * operativo, pero el fondo y el color del texto se heredan igualmente
+         * del documento: sin esto, en los temas oscuros las opciones salen con
+         * los colores del navegador y no con los del tema.
+         */
+        readonly selectOption: "bg-(--vuno-layer-hover-01) text-(--vuno-text-primary) disabled:text-(--vuno-text-disabled)";
+        /**
+         * `vuno--select` con `vuno--time-picker__select`: la columna del
+         * selector, separada del campo por los 2 px de `spacing-01`.
+         */
+        readonly selectRoot: "ms-0.5 flex flex-col items-start justify-center";
+        /** `vuno--time-picker__error__icon`. El color va en la variante del estado. */
+        readonly stateIcon: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2";
+        /** `vuno--form-item`: rótulo, fila y mensaje en columna. */
+        readonly wrapper: "flex w-full flex-auto flex-col items-start";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly arrow: "text-(--vuno-icon-disabled)";
+            };
+        };
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "w-[6.175rem] outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error)";
+                readonly message: "text-(--vuno-text-error)";
+                readonly stateIcon: "text-(--vuno-support-error)";
+            };
+        };
+        readonly readOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly arrow: "text-(--vuno-icon-disabled)";
+                readonly input: "border-(--vuno-border-subtle-00) bg-transparent";
+                readonly select: "cursor-default border-(--vuno-border-subtle-00) bg-transparent not-disabled:hover:bg-transparent";
+            };
+        };
+        /** Los tres altos del origen, que campo y selectores comparten. */
+        readonly size: {
+            readonly sm: {
+                readonly input: "h-8";
+                readonly select: "h-8";
+            };
+            readonly md: {
+                readonly input: "h-10";
+                readonly select: "h-10";
+            };
+            readonly lg: {
+                readonly input: "h-12";
+                readonly select: "h-12";
+            };
+        };
+        readonly warn: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "w-[6.175rem]";
+                readonly stateIcon: "text-(--vuno-support-warning)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,112 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const timePickerTheme = defineTheme("timePicker", {
+  slots: {
+    /** `vuno--select__arrow`. No recibe puntero: quien pincha ahí pincha el selector. */
+    arrow: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2 text-(--vuno-icon-primary)",
+    /** `vuno--time-picker__input`: el ancla del icono de estado. */
+    field: "relative flex flex-col",
+    /**
+     * `vuno--time-picker__input-field` sobre `vuno--text-input`.
+     *
+     * La tipografía es `code-02` —monoespaciada, 14 px— y no la del resto
+     * de los campos. No es un capricho del origen: en una máscara de dígitos
+     * el ancho constante mantiene los dos puntos en el mismo sitio mientras
+     * se teclea, y `hh:mm` no baila al pasar de `1:00` a `11:00`.
+     */
+    input: "block w-[4.875rem] appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-4 py-0 font-mono text-sm leading-5 tracking-[0.32px] text-(--vuno-text-primary) caret-(--vuno-text-primary) outline-none transition-[background-color,outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) placeholder:text-(--vuno-text-placeholder) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) disabled:outline-none disabled:[-webkit-text-fill-color:var(--vuno-text-disabled)] disabled:placeholder:text-(--vuno-text-disabled) motion-reduce:transition-none",
+    /** El rótulo del campo. Existe para que un proyecto pueda recolocarlo. */
+    label: "",
+    /**
+     * `vuno--form-requirement`. El color lo pone el estado: el origen tiñe
+     * de error solo el mensaje del campo inválido y deja el aviso en el
+     * texto normal, porque un aviso no impide guardar.
+     */
+    message: "mt-1 w-full text-xs leading-4 tracking-[0.16px] break-words text-(--vuno-text-primary)",
+    /**
+     * `vuno--time-picker`: la fila del campo y sus selectores.
+     *
+     * Se alinea por abajo y no por el centro porque el campo lleva rótulo
+     * encima y los selectores no: con `items-center` los filetes inferiores
+     * de las tres cajas quedarían a alturas distintas.
+     */
+    picker: "flex items-end",
+    /**
+     * `vuno--select-input` dentro de la fila: ancho por contenido en vez de
+     * al 100 %, interlineado 1 y los mismos 48 px de relleno final que
+     * reserva el chevron.
+     */
+    select: "block w-auto cursor-pointer appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) ps-4 pe-12 text-sm leading-none tracking-[0.16px] text-ellipsis text-(--vuno-text-primary) opacity-100 outline-none transition-[outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) not-disabled:hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-transparent disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) motion-reduce:transition-none",
+    /**
+     * `vuno--select-input__wrapper`: el ancla del chevron.
+     *
+     * Envuelve solo al control y no a la columna entera porque el rótulo
+     * puede hacerse visible: con el chevron anclado al `vuno--select`, un
+     * rótulo a la vista lo dejaría centrado entre los dos y no dentro de la
+     * caja.
+     */
+    selectField: "relative flex items-center",
+    /** El rótulo del selector, que de serie está oculto a la vista. */
+    selectLabel: "",
+    /**
+     * `vuno--select-option`. La lista desplegada la dibuja el sistema
+     * operativo, pero el fondo y el color del texto se heredan igualmente
+     * del documento: sin esto, en los temas oscuros las opciones salen con
+     * los colores del navegador y no con los del tema.
+     */
+    selectOption: "bg-(--vuno-layer-hover-01) text-(--vuno-text-primary) disabled:text-(--vuno-text-disabled)",
+    /**
+     * `vuno--select` con `vuno--time-picker__select`: la columna del
+     * selector, separada del campo por los 2 px de `spacing-01`.
+     */
+    selectRoot: "ms-0.5 flex flex-col items-start justify-center",
+    /** `vuno--time-picker__error__icon`. El color va en la variante del estado. */
+    stateIcon: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2",
+    /** `vuno--form-item`: rótulo, fila y mensaje en columna. */
+    wrapper: "flex w-full flex-auto flex-col items-start"
+  },
+  variants: {
+    /*
+     * El `<input>` y el `<select>` se apagan solos con `:disabled`. Lo que
+     * no puede saberlo es el chevron, que es un hermano del selector.
+     */
+    disabled: {
+      false: {},
+      true: { arrow: "text-(--vuno-icon-disabled)" }
+    },
+    invalid: {
+      false: {},
+      true: {
+        input: "w-[6.175rem] outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error)",
+        message: "text-(--vuno-text-error)",
+        stateIcon: "text-(--vuno-support-error)"
+      }
+    },
+    /*
+     * Solo lectura: fondo transparente y filete apagado en las tres cajas,
+     * como en el origen. No cambia el color del texto —el valor se tiene
+     * que poder leer y seleccionar— y el chevron sí se atenúa, porque ahí
+     * ya no hay nada que desplegar.
+     *
+     * El filete es el token contextual del nivel base: dentro de un `Layer`
+     * sube de nivel por cascada sin que el tema lo sepa.
+     */
+    readOnly: {
+      false: {},
+      true: {
+        arrow: "text-(--vuno-icon-disabled)",
+        input: "border-(--vuno-border-subtle-00) bg-transparent",
+        select: "cursor-default border-(--vuno-border-subtle-00) bg-transparent not-disabled:hover:bg-transparent"
+      }
+    },
+    /** Los tres altos del origen, que campo y selectores comparten. */
+    size: {
+      sm: { input: "h-8", select: "h-8" },
+      md: { input: "h-10", select: "h-10" },
+      lg: { input: "h-12", select: "h-12" }
+    },
+    warn: {
+      false: {},
+      true: { input: "w-[6.175rem]", stateIcon: "text-(--vuno-support-warning)" }
+    }
+  }
+});

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

@@ -0,0 +1,65 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * El tipo del `<input>` de la hora.
+ *
+ * El sistema de origen declara `type?: string` y lo entrega tal cual al campo.
+ * Aquí la unión se estrecha a los dos valores que significan algo en un campo
+ * de hora, porque una cadena libre en un contrato tipado solo sirve para que
+ * `type="email"` compile.
+ *
+ * `text` es el del origen y el único con el que la máscara de `pattern`, el
+ * `maxlength` y los `TimePickerSelect` de al lado tienen sentido. `time`
+ * entrega el control al selector nativo del navegador, que trae su propio
+ * formato, su propio teclado y su propio AM/PM: con él sobran los selectores y
+ * `pattern` deja de aplicarse.
+ *
+ * `TextInputType` no sirve como recurso: ninguno de sus valores es la hora y la
+ * mitad —`email`, `password`, `url`— no tiene sentido en este campo.
+ */
+export type TimePickerType = 'text' | 'time';
+export type TimePickerProps = {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    /** Oculta el rótulo a la vista conservándolo en el árbol de accesibilidad. */
+    hideLabel?: boolean;
+    invalid?: boolean;
+    invalidText?: string;
+    labelText: string;
+    /**
+     * Longitud máxima del texto de la hora. Cinco caracteres, `hh:mm`, como en
+     * el sistema de origen.
+     *
+     * Se escribe como el atributo nativo y no como el `maxLength` del origen
+     * porque es la grafía que ya usa `TextInput`: dos nombres para el mismo
+     * límite dentro del mismo formulario cuestan más que la diferencia con el
+     * original.
+     */
+    maxlength?: number;
+    /**
+     * La expresión con la que el navegador valida el texto al enviar.
+     *
+     * El valor predeterminado es el del sistema de origen y describe el formato
+     * de 12 horas: de `1:00` a `12:59`, con un espacio final opcional. Un
+     * formulario de 24 horas necesita el suyo —por ejemplo
+     * `([01]?[0-9]|2[0-3]):[0-5][0-9]`—, porque este rechaza `13:00` y `00:30`.
+     */
+    pattern?: string;
+    placeholder?: string;
+    /**
+     * Muestra la hora sin permitir cambiarla, y predomina sobre deshabilitado,
+     * el error y el aviso: lo que no se puede corregir no se reclama.
+     *
+     * En el sistema de origen se llama `readOnly`. Aquí conserva la grafía que
+     * ya usan `TextInput`, `Select` y el resto de los controles del paquete.
+     */
+    readonly?: boolean;
+    required?: boolean;
+    /** Alto del campo y de los selectores que lo acompañan: 32, 40 o 48 px. */
+    size?: ControlSize;
+    type?: TimePickerType;
+    ui?: ComponentUi<'timePicker'>;
+    warn?: boolean;
+    warnText?: string;
+};