@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,30 @@
+<script setup>
+import { computed, inject, provide } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { listKey } from "./UnorderedList.context";
+defineOptions({ name: "UnorderedList" });
+const props = defineProps({
+  isExpressive: { type: Boolean, required: false, default: false },
+  nested: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const parent = inject(listKey, void 0);
+const expressive = computed(() => props.isExpressive || Boolean(parent?.expressive.value));
+const nested = computed(() => props.nested || parent !== void 0);
+const marker = computed(() => nested.value ? "square" : "dash");
+provide(listKey, { expressive, marker, nested });
+const ui = useTheme(
+  "list",
+  () => props.ui,
+  () => ({ expressive: expressive.value ? "true" : "false", nested: nested.value ? "true" : "false" })
+);
+</script>
+
+<template>
+    <ul
+        :class="ui.unordered"
+        role="list"
+    >
+        <slot />
+    </ul>
+</template>

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

@@ -0,0 +1,18 @@
+import type { UnorderedListProps } from './UnorderedList.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UnorderedListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnorderedListProps> & Readonly<{}>, {
+    nested: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"list">;
+    isExpressive: 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/composables/internal/useAnchor.d.ts

@@ -0,0 +1,47 @@
+import type { ComputePositionReturn, Middleware } from '@floating-ui/dom';
+import type { MaybeRefOrGetter } from 'vue';
+import type { Placement } from '#vuno/types/base';
+/**
+ * Anclar algo flotante a algo que está en la página, y mantenerlo anclado.
+ *
+ * Lo usan el menú, el aviso y la lista del combobox. Antes lo escribía cada uno
+ * y las tres copias **ya habían divergido**: dos comprobaban que
+ * `ResizeObserver` existe antes de pedirle a `autoUpdate` que observe el tamaño
+ * y la tercera no, dos volvían a mirar el elemento después del `await` y la
+ * tercera lo hacía de otra forma. Hoy eso no cuesta nada —el DOM de las pruebas
+ * trae los dos observadores— y por eso vale como aviso y no como avería: es la
+ * misma decisión tomada tres veces, y ya iba por caminos distintos.
+ *
+ * Lo que queda aquí es lo que los tres hacen igual. Lo que los distingue —dónde
+ * se coloca, cuánto se separa, qué mide además— entra por parámetro.
+ */
+type AnchorOptions = {
+    /**
+     * Se llama con la posición ya resuelta, después de colocar.
+     *
+     * Existe por el `placement` **resuelto**: con `flip`, un aviso pedido arriba
+     * que no cabe acaba abajo, y quien pinte una flecha leyendo el prop la deja
+     * pegada al lado que ya no toca.
+     */
+    onPlaced?: (position: ComputePositionReturn) => void;
+    /** El elemento de la flecha, si lo hay. Su posición llega en `onPlaced`. */
+    arrowElement?: MaybeRefOrGetter<HTMLElement | undefined>;
+    /**
+     * Contra qué se recorta. Para una lista dentro de un `<dialog>` es el
+     * diálogo: sin esto voltea contra la ventana y se sale de la caja que de
+     * verdad la contiene.
+     */
+    boundary?: MaybeRefOrGetter<Element | undefined>;
+    /** Separación entre el ancla y lo flotante, en píxeles. */
+    distance?: MaybeRefOrGetter<number | undefined>;
+    /** Permite desactivar el volteo automático cuando el contrato exige una alineación fija. */
+    flip?: MaybeRefOrGetter<boolean | undefined>;
+    placement?: MaybeRefOrGetter<Placement>;
+    /** Lo que este control necesite además de la base: medir, recortar, lo que sea. */
+    middleware?: () => Middleware[];
+};
+export declare function useAnchor(options?: AnchorOptions): {
+    anchor: (reference: HTMLElement | undefined, floating: HTMLElement | undefined) => void;
+    release: () => void;
+};
+export {};

package/dist/runtime/app/composables/internal/useAnchor.js

@@ -0,0 +1,37 @@
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { onScopeDispose, toValue } from "vue";
+export function useAnchor(options = {}) {
+  let stop;
+  async function place(reference, floating) {
+    const edge = toValue(options.boundary);
+    const overflow = { padding: 8, ...edge ? { boundary: edge } : {} };
+    const middleware = [offset(toValue(options.distance) ?? 4)];
+    if (toValue(options.flip) !== false) middleware.push(flip(overflow));
+    middleware.push(shift(overflow));
+    const arrowElement = toValue(options.arrowElement);
+    if (arrowElement) middleware.push(arrow({ element: arrowElement }));
+    middleware.push(...options.middleware?.() ?? []);
+    const position = await computePosition(reference, floating, {
+      middleware,
+      placement: toValue(options.placement) ?? "bottom-start",
+      strategy: "fixed"
+    });
+    if (!floating.isConnected) return;
+    Object.assign(floating.style, { left: `${position.x}px`, top: `${position.y}px` });
+    options.onPlaced?.(position);
+  }
+  function anchor(reference, floating) {
+    release();
+    if (!reference || !floating) return;
+    stop = autoUpdate(reference, floating, () => void place(reference, floating), {
+      elementResize: typeof ResizeObserver !== "undefined",
+      layoutShift: typeof IntersectionObserver !== "undefined"
+    });
+  }
+  function release() {
+    stop?.();
+    stop = void 0;
+  }
+  onScopeDispose(release, true);
+  return { anchor, release };
+}

package/dist/runtime/app/composables/internal/useDirection.d.ts

@@ -0,0 +1,5 @@
+type Direction = 'ltr' | 'rtl';
+type DirectionProvider = () => Direction;
+export declare function provideDirection(direction: DirectionProvider): void;
+export declare function useDirection(): DirectionProvider;
+export {};

package/dist/runtime/app/composables/internal/useDirection.js

@@ -0,0 +1,8 @@
+import { inject, provide } from "vue";
+const directionInjectionKey = Symbol("vuno-direction");
+export function provideDirection(direction) {
+  provide(directionInjectionKey, direction);
+}
+export function useDirection() {
+  return inject(directionInjectionKey, () => "ltr");
+}

package/dist/runtime/app/composables/internal/usePortal.d.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { PortalTarget } from '#vuno/types/base';
+/**
+ * Dónde montar un desplegable para que se vea.
+ *
+ * Un `<dialog>` abierto con `showModal()` vive en la **capa superior** del
+ * navegador, que está por encima de cualquier `z-index`. Un desplegable que se
+ * monte en `body` —lo que hacen por defecto los componentes de Nuxt UI— queda
+ * por debajo de esa capa: se abre de verdad, con su `aria-expanded` y su
+ * `listbox` en el DOM, colocado en el sitio correcto, y no se ve. El campo
+ * parece roto sin que nada falle.
+ *
+ * La salida es montarlo **dentro** del propio diálogo, que ya está en la capa
+ * superior. Fuera de un modal no hay nada que proveer y se usa `body`.
+ */
+export declare function usePortal(target?: MaybeRefOrGetter<PortalTarget | undefined>): ComputedRef<string>;
+/** Lo llama quien abre una capa superior, para que sus campos la encuentren. */
+export declare function providePortal(target: PortalTarget): void;

package/dist/runtime/app/composables/internal/usePortal.js

@@ -0,0 +1,12 @@
+import { computed, inject, provide, toValue } from "vue";
+const portalInjectionKey = Symbol("vuno-portal");
+export function usePortal(target) {
+  const injected = inject(portalInjectionKey, true);
+  return computed(() => {
+    const resolved = toValue(target) ?? injected;
+    return resolved === true ? "body" : resolved;
+  });
+}
+export function providePortal(target) {
+  provide(portalInjectionKey, target);
+}

package/dist/runtime/app/composables/useTheme.d.ts

@@ -1,11 +1,11 @@
 import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
-import type { VunoSlots } from '#vuno/types/base';
-import type { VunoResolvedSlots, VunoVariantsOf } from '#vuno/types/slots';
-import type { VunoIcons, VunoMessages, VunoThemeKey } from '#vuno/types/theme';
+import type { ComponentSlots } from '#vuno/types/base';
+import type { ComponentVariants, ResolvedSlots } from '#vuno/types/slots';
+import type { Icons, Messages, ThemeKey } from '#vuno/types/theme';
 /**
  * Resuelve las clases de un componente del módulo.
  *
- * Devuelve cadenas, no `VunoSlots`: ese tipo describe lo que se puede
+ * Devuelve cadenas, no `ComponentSlots`: ese tipo describe lo que se puede
  * *escribir* —el tema, el `app.config` y la prop `ui` admiten un array de
  * clases por comodidad—, y `mergeSlots` lo funde a una sola cadena antes de
  * devolverlo. Un slot ausente sigue siendo `undefined`. Anunciar aquí el tipo
@@ -13,11 +13,11 @@ import type { VunoIcons, VunoMessages, VunoThemeKey } from '#vuno/types/theme';
  * —`enterActiveClass` y compañía de `TransitionGroup`— a afirmar un `string`
  * que el compilador no podía comprobar.
  *
- * @param key Clave del tema (`fieldInput`, `form`, ...).
+ * @param key Clave del tema (`textInput`, `form`, ...).
  * @param ui Override de la instancia, normalmente `props.ui`.
  */
-export declare function useTheme<TKey extends VunoThemeKey>(key: TKey, ui?: MaybeRefOrGetter<undefined | VunoSlots>, variants?: MaybeRefOrGetter<undefined | VunoVariantsOf<TKey>>): ComputedRef<VunoResolvedSlots<TKey>>;
-export declare function useIcons(): ComputedRef<VunoIcons>;
+export declare function useTheme<TKey extends ThemeKey>(key: TKey, ui?: MaybeRefOrGetter<ComponentSlots | undefined>, variants?: MaybeRefOrGetter<ComponentVariants<TKey> | undefined>): ComputedRef<ResolvedSlots<TKey>>;
+export declare function useIcons(): ComputedRef<Icons>;
 /**
  * El idioma con el que se formatea lo que lleva formato: fechas, números y
  * monedas. Sale de `app.config`, como los textos y los iconos.
@@ -28,4 +28,4 @@ export declare function useIcons(): ComputedRef<VunoIcons>;
  * render en servidor, que no tiene ninguno.
  */
 export declare function useLocale(): ComputedRef<string>;
-export declare function useMessages(): ComputedRef<VunoMessages>;
+export declare function useMessages(): ComputedRef<Messages>;

package/dist/runtime/app/composables/useTheme.js

@@ -1,29 +1,32 @@
 import { computed, toValue } from "vue";
 import { useAppConfig } from "#imports";
 import { defaultIcons, defaultMessages, defaultTheme } from "#vuno/theme";
-import { mergeSlots, selectCompoundVariants, selectVariants } from "#vuno/utils/theme";
+import { mergeSlots, resolveTheme } from "#vuno/utils/theme";
 export function useTheme(key, ui, variants) {
-  const vuno = useVunoAppConfig();
+  const vuno = useVunoConfig();
   const entry = (source) => source[key];
   return computed(() => {
-    const active = toValue(variants);
-    const merged = mergeSlots(entry(defaultTheme)?.slots, ...selectVariants(entry(defaultTheme)?.variants, active), ...selectCompoundVariants(entry(defaultTheme)?.compoundVariants, active), entry(vuno.value)?.slots, ...selectVariants(entry(vuno.value)?.variants, active), ...selectCompoundVariants(entry(vuno.value)?.compoundVariants, active), toValue(ui));
+    const requested = toValue(variants);
+    const active = requested;
+    const component = entry(vuno.value.components ?? {});
+    const base = entry(defaultTheme);
+    const merged = mergeSlots(resolveTheme(base, active), resolveTheme(component, active, Object.keys(base?.slots ?? {})), toValue(ui));
     return merged;
   });
 }
 export function useIcons() {
-  const vuno = useVunoAppConfig();
+  const vuno = useVunoConfig();
   return computed(() => ({ ...defaultIcons, ...vuno.value.icons }));
 }
 export function useLocale() {
-  const vuno = useVunoAppConfig();
+  const vuno = useVunoConfig();
   return computed(() => vuno.value.locale ?? "es");
 }
 export function useMessages() {
-  const vuno = useVunoAppConfig();
+  const vuno = useVunoConfig();
   return computed(() => ({ ...defaultMessages, ...vuno.value.messages }));
 }
-function useVunoAppConfig() {
+function useVunoConfig() {
   const appConfig = useAppConfig();
   return computed(() => appConfig.vuno ?? {});
 }

package/dist/runtime/app/primitives/PrimitiveControl/PrimitiveControl.d.vue.ts

@@ -0,0 +1,38 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+ *
+ * Existe separada porque el input, el área de texto y el combobox necesitan
+ * exactamente la misma caja, y tres copias del mismo borde divergen en
+ * cuanto alguien toca una. Lo que va dentro lo pone quien la usa.
+ *
+ * No sabe nada del control que envuelve: el estado lo lee del DOM con
+ * `has-[]`, así que funciona igual con un `<input>`, un `<textarea>` o un
+ * `div` con `role="combobox"`, y no hay forma de que lo que se ve y lo que
+ * se anuncia dejen de coincidir.
+ */
+type Props = {
+    size?: ControlSize;
+    ui?: ComponentUi<'control'>;
+};
+type __VLS_Slots = {
+    /** El control en sí. */
+    default?: () => unknown;
+    /** Delante del control: un icono, un prefijo. */
+    leading?: () => unknown;
+    /** Detrás: un botón de acción, una unidad, un indicador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: ControlSize;
+    ui: ComponentUi<"control">;
+}, {}, {}, {}, 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/primitives/PrimitiveControl/PrimitiveControl.theme.d.ts

@@ -0,0 +1,35 @@
+export declare const controlTheme: Record<"control", {
+    /**
+     * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+     *
+     * La comparten el input, el área de texto y el combobox, que necesitan la
+     * misma exactamente, y tres copias del mismo borde divergen en cuanto
+     * alguien toca una. El estado no se pasa como prop: se lee del control de
+     * dentro con `has-[]`, de modo que lo que se ve no puede separarse de lo
+     * que se anuncia.
+     *
+     * La altura es `min-h` y no `h` para que un área de texto pueda crecer sin
+     * pelearse con la caja; en un control de una línea el resultado es el
+     * mismo, porque nada de dentro mide más.
+     *
+     * Cuando hay una acción al final, la caja la marca con `data-trailing` y
+     * esa acción llega hasta el borde. El relleno inicial se conserva para que
+     * el texto o el icono de entrada mantengan la misma alineación.
+     */
+    readonly slots: {
+        readonly root: "flex w-full items-center gap-2 rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) text-(--vuno-text-primary) focus-within:outline-solid focus-within:outline-2 focus-within:outline-(--vuno-focus) focus-within:outline-offset-[-2px] has-disabled:cursor-not-allowed has-disabled:text-(--vuno-text-disabled) has-aria-invalid:border-(--vuno-support-error) data-trailing:pe-0";
+    };
+    readonly variants: {
+        readonly size: {
+            readonly sm: {
+                readonly root: "min-h-8 px-4 text-xs";
+            };
+            readonly md: {
+                readonly root: "min-h-10 px-4 text-sm";
+            };
+            readonly lg: {
+                readonly root: "min-h-12 px-4 text-sm";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/primitives/PrimitiveControl/PrimitiveControl.theme.js

@@ -0,0 +1,30 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const controlTheme = defineTheme("control", {
+  /**
+   * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+   *
+   * La comparten el input, el área de texto y el combobox, que necesitan la
+   * misma exactamente, y tres copias del mismo borde divergen en cuanto
+   * alguien toca una. El estado no se pasa como prop: se lee del control de
+   * dentro con `has-[]`, de modo que lo que se ve no puede separarse de lo
+   * que se anuncia.
+   *
+   * La altura es `min-h` y no `h` para que un área de texto pueda crecer sin
+   * pelearse con la caja; en un control de una línea el resultado es el
+   * mismo, porque nada de dentro mide más.
+   *
+   * Cuando hay una acción al final, la caja la marca con `data-trailing` y
+   * esa acción llega hasta el borde. El relleno inicial se conserva para que
+   * el texto o el icono de entrada mantengan la misma alineación.
+   */
+  slots: {
+    root: "flex w-full items-center gap-2 rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) text-(--vuno-text-primary) focus-within:outline-solid focus-within:outline-2 focus-within:outline-(--vuno-focus) focus-within:outline-offset-[-2px] has-disabled:cursor-not-allowed has-disabled:text-(--vuno-text-disabled) has-aria-invalid:border-(--vuno-support-error) data-trailing:pe-0"
+  },
+  variants: {
+    size: {
+      sm: { root: "min-h-8 px-4 text-xs" },
+      md: { root: "min-h-10 px-4 text-sm" },
+      lg: { root: "min-h-12 px-4 text-sm" }
+    }
+  }
+});

package/dist/runtime/app/primitives/PrimitiveControl/PrimitiveControl.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "PrimitiveControl" });
+const props = defineProps({
+  size: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const ui = useTheme(
+  "control",
+  () => props.ui,
+  () => ({ size: props.size ?? "md" })
+);
+</script>
+
+<template>
+    <div
+        :class="ui.root"
+        :data-trailing="$slots.trailing ? '' : void 0"
+    >
+        <slot name="leading" />
+
+        <slot />
+
+        <slot name="trailing" />
+    </div>
+</template>

package/dist/runtime/app/primitives/PrimitiveControl/PrimitiveControl.vue.d.ts

@@ -0,0 +1,38 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+ *
+ * Existe separada porque el input, el área de texto y el combobox necesitan
+ * exactamente la misma caja, y tres copias del mismo borde divergen en
+ * cuanto alguien toca una. Lo que va dentro lo pone quien la usa.
+ *
+ * No sabe nada del control que envuelve: el estado lo lee del DOM con
+ * `has-[]`, así que funciona igual con un `<input>`, un `<textarea>` o un
+ * `div` con `role="combobox"`, y no hay forma de que lo que se ve y lo que
+ * se anuncia dejen de coincidir.
+ */
+type Props = {
+    size?: ControlSize;
+    ui?: ComponentUi<'control'>;
+};
+type __VLS_Slots = {
+    /** El control en sí. */
+    default?: () => unknown;
+    /** Delante del control: un icono, un prefijo. */
+    leading?: () => unknown;
+    /** Detrás: un botón de acción, una unidad, un indicador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: ControlSize;
+    ui: ComponentUi<"control">;
+}, {}, {}, {}, 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/primitives/PrimitiveIcon/PrimitiveIcon.d.vue.ts

@@ -0,0 +1,4 @@
+import type { PrimitiveIconProps } from './PrimitiveIcon.types.js';
+declare const __VLS_export: import("vue").DefineComponent<PrimitiveIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PrimitiveIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/primitives/PrimitiveIcon/PrimitiveIcon.types.d.ts

@@ -0,0 +1,3 @@
+export type PrimitiveIconProps = {
+    name: string;
+};

package/dist/runtime/app/primitives/PrimitiveIcon/PrimitiveIcon.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { resolveDynamicComponent } from "vue";
+defineOptions({ name: "PrimitiveIcon" });
+const props = defineProps({
+  name: { type: String, required: true }
+});
+const renderer = resolveDynamicComponent("VunoIconRenderer");
+const iconComponent = typeof renderer === "string" ? resolveDynamicComponent("Icon") : renderer;
+const unavailable = typeof iconComponent === "string";
+const is = unavailable ? "span" : iconComponent;
+</script>
+
+<template>
+    <!--
+        `data-vuno-icon` no es decorativo: es el asidero por el que `main.css`
+        devuelve al tema el control del tamaño. `@nuxt/icon` marca el nodo con
+        `.iconify`, pero esa clase también la llevan los iconos que el proyecto
+        consumidor pinta por su cuenta y que no nos tocan. El atributo acota la
+        regla a los iconos que sirve Vuno.
+    -->
+    <component
+        :is="is"
+        aria-hidden="true"
+        :class="{ 'inline-block': unavailable }"
+        data-vuno-icon
+        :name="unavailable ? void 0 : props.name"
+    />
+</template>

package/dist/runtime/app/primitives/PrimitiveIcon/PrimitiveIcon.vue.d.ts

@@ -0,0 +1,4 @@
+import type { PrimitiveIconProps } from './PrimitiveIcon.types.js';
+declare const __VLS_export: import("vue").DefineComponent<PrimitiveIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PrimitiveIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/primitives/PrimitiveInput/PrimitiveInput.d.vue.ts

@@ -0,0 +1,49 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Lo que va al final del campo: un botón de acción, una unidad. */
+    trailing?: () => unknown;
+};
+type Props = {
+    /** Nombre Iconify; se pinta dentro del campo, antes del texto. */
+    icon?: string;
+    size?: ControlSize;
+    /**
+     * Los tipos de texto, no los demás: `checkbox`, `radio` y `file`
+     * tienen su propio control porque no se pintan como una caja de
+     * texto ni llevan valor de cadena.
+     */
+    type?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+    ui?: ComponentUi<'control' | 'input'>;
+};
+type __VLS_ModelProps = {
+    /**
+         * `number` devuelve número y el resto cadena, que es lo que espera el
+         * estado del formulario: un campo numérico que guardara `'12'` pasaría la
+         * validación de tipo por los pelos y fallaría al comparar o al sumar.
+         * Vacío es `undefined` y no `0` ni `''`: no es un valor, es que no hay.
+         */
+    modelValue?: number | string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    inputRef: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    size: ControlSize;
+    icon: string;
+    type: "date" | "email" | "number" | "password" | "search" | "tel" | "text" | "url";
+    ui: ComponentUi<"control" | "input">;
+}, {}, {}, {}, 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/primitives/PrimitiveInput/PrimitiveInput.theme.d.ts

@@ -0,0 +1,24 @@
+export declare const inputTheme: Record<"input", {
+    /**
+     * El control de texto nativo, del que cuelgan `text`, `email`, `password`,
+     * `number` y `slug`. La caja la pone `baseControl`; aquí queda el `<input>`,
+     * que va transparente y sin contorno propio, y su icono.
+     */
+    readonly slots: {
+        readonly base: "w-full min-w-0 bg-transparent outline-none placeholder:text-(--vuno-text-placeholder) disabled:cursor-not-allowed disabled:text-(--vuno-text-disabled)";
+        readonly icon: "shrink-0 text-(--vuno-icon-secondary)";
+    };
+    readonly variants: {
+        readonly size: {
+            readonly sm: {
+                readonly icon: "size-4";
+            };
+            readonly md: {
+                readonly icon: "size-4";
+            };
+            readonly lg: {
+                readonly icon: "size-5";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/primitives/PrimitiveInput/PrimitiveInput.theme.js

@@ -0,0 +1,19 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const inputTheme = defineTheme("input", {
+  /**
+   * El control de texto nativo, del que cuelgan `text`, `email`, `password`,
+   * `number` y `slug`. La caja la pone `baseControl`; aquí queda el `<input>`,
+   * que va transparente y sin contorno propio, y su icono.
+   */
+  slots: {
+    base: "w-full min-w-0 bg-transparent outline-none placeholder:text-(--vuno-text-placeholder) disabled:cursor-not-allowed disabled:text-(--vuno-text-disabled)",
+    icon: "shrink-0 text-(--vuno-icon-secondary)"
+  },
+  variants: {
+    size: {
+      sm: { icon: "size-4" },
+      md: { icon: "size-4" },
+      lg: { icon: "size-5" }
+    }
+  }
+});

package/dist/runtime/app/primitives/PrimitiveInput/PrimitiveInput.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import PrimitiveControl from "#vuno/primitives/PrimitiveControl/PrimitiveControl.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "PrimitiveInput", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  icon: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  type: { type: String, required: false, default: "text" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const ui = useTheme(
+  "input",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const inputRef = useTemplateRef("input");
+const isNumber = computed(() => props.type === "number");
+function onInput(event) {
+  const target = event.target;
+  if (!isNumber.value) {
+    model.value = target.value;
+    return;
+  }
+  model.value = target.value === "" ? void 0 : target.valueAsNumber;
+}
+defineExpose({ inputRef });
+</script>
+
+<template>
+    <PrimitiveControl
+        :size="props.size"
+        :ui="props.ui"
+    >
+        <template
+            v-if="props.icon"
+            #leading
+        >
+            <Icon
+                :class="ui.icon"
+                :name="props.icon"
+            />
+        </template>
+
+        <input
+            ref="input"
+            v-bind="$attrs"
+            :class="ui.base"
+            :type="props.type"
+            :value="model"
+            @input="onInput"
+        />
+
+        <template
+            v-if="$slots.trailing"
+            #trailing
+        >
+            <slot name="trailing" />
+        </template>
+    </PrimitiveControl>
+</template>