@groupteknology/vuno 1.0.0 → 2.0.0

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

@@ -0,0 +1,62 @@
+import { radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const cardTheme = defineTheme("card", {
+  /**
+   * La tarjeta. Tres regiones apiladas y separadas por una línea, que es la
+   * forma que tenía el caso real escrito a mano antes de que existiera.
+   *
+   * El relleno va en cada región y no en la raíz: con él en la raíz, la línea
+   * divisoria no llegaría a los bordes y quedaría flotando en medio.
+   *
+   * **La raíz lleva anillo de foco desde que existe `tag`.** Con `tag` la
+   * tarjeta puede **ser** un enlace o un botón, y entonces recibe el foco.
+   *
+   * Y aquí hay que decir qué pasaba de verdad, porque lo primero que se
+   * escribió en este mismo comentario era falso y lo desmintió la medición.
+   * **No se quedaba sin contorno**: quitando las tres clases con el elemento
+   * enfocado, el contorno calculado sigue siendo `1px auto` —el del navegador,
+   * que el preflight de Tailwind no neutraliza— y con las clases pasa a `2px
+   * solid` del acento, con 2px de separación. O sea que el defecto no era una
+   * tarjeta invisible al tabular, sino **la única superficie enfocable de vuno
+   * que no llevaba el anillo del sistema**: grosor, color y separación
+   * distintos de los del botón, el campo y el enlace de la miga, y a merced de
+   * lo que pinte cada navegador. Que ya lo era se ve en que el ejemplo de la
+   * ficha llevaba el anillo escrito a mano sobre el enlace que la envolvía.
+   *
+   * Va **siempre puesto y sin variante que lo encienda**, que es lo contrario
+   * de lo que pide el reflejo. El motivo es que la condición ya la impone
+   * `:focus-visible`: un elemento que no puede recibir el foco no la cumple
+   * nunca, así que sobre un `div` las tres clases no pintan nada —medido: con
+   * `tag` por defecto la tarjeta ni siquiera es parada del tabulador—. Una
+   * variante sería una segunda copia, más débil, de una condición que el CSS
+   * ya garantiza, y además tendría que **adivinar** si un `tag` cualquiera es
+   * enfocable; se equivocaría justo en el caso peligroso, el de un `div` con
+   * un `tabindex` llegado por atributos, dejando sin anillo algo que sí toma
+   * el foco.
+   *
+   * El acento se declara aquí, como en `breadcrumbLink` y en la pestaña: la
+   * tarjeta no tiene variantes de color de las que sacarlo, y sin declararlo
+   * `outline-(--vuno-accent)` se quedaría con lo que hubiera heredado.
+   */
+  slots: {
+    body: "p-4 text-vuno-body",
+    footer: "p-4",
+    header: "p-4 font-semibold text-vuno-strong",
+    root: "flex w-full flex-col divide-y divide-vuno-border rounded-sm [--vuno-accent:var(--color-vuno-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)"
+  },
+  variants: {
+    radius: radiusByStep("root"),
+    /*
+     * `outline` sube un escalón sobre la página y se cierra con un borde.
+     * `soft` sube dos y no lleva borde, porque va dentro de algo que ya
+     * está levantado y ahí otro borde no separa nada: lo que distingue es
+     * la elevación.
+     */
+    variant: {
+      outline: { root: "border border-vuno-border bg-vuno-surface-1" },
+      /* Sin contenedor: el marco lo pone quien la envuelve. */
+      plain: {},
+      soft: { root: "bg-vuno-surface-2" }
+    }
+  }
+});

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

@@ -0,0 +1,45 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/internal/slots";
+defineOptions({ name: "VunoCard" });
+const props = defineProps({
+  radius: { type: String, required: false, default: void 0 },
+  tag: { type: null, required: false, default: "div" },
+  ui: { type: Object, required: false, default: void 0 },
+  variant: { type: String, required: false, default: "outline" }
+});
+const slots = defineSlots();
+const ui = useTheme(
+  "card",
+  () => props.ui,
+  () => ({ radius: props.radius, variant: props.variant })
+);
+</script>
+
+<template>
+    <component
+        :is="props.tag"
+        :class="ui.root"
+    >
+        <div
+            v-if="filled(slots.header)"
+            :class="ui.header"
+        >
+            <slot name="header" />
+        </div>
+
+        <div
+            v-if="filled(slots.default)"
+            :class="ui.body"
+        >
+            <slot />
+        </div>
+
+        <div
+            v-if="filled(slots.footer)"
+            :class="ui.footer"
+        >
+            <slot name="footer" />
+        </div>
+    </component>
+</template>

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

@@ -0,0 +1,94 @@
+import type { Component } from 'vue';
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * Una caja que agrupa contenido, con cabecera y pie opcionales.
+ *
+ * No estaba y se decidió a propósito que no estuviera: el playground se
+ * escribió la suya a mano y el argumento fue que «si algún día vuno ofrece
+ * una tarjeta, que sea porque alguien la pida, no porque el banco de pruebas
+ * la necesitara». Entra ahora porque la han pedido, y con la forma que el
+ * caso real ya tenía: tres regiones apiladas y separadas por una línea.
+ *
+ * **No es pulsable, y eso es deliberado.** Una tarjeta que se pulsa entera es
+ * un botón o un enlace, y disfrazarla deja de serlo para el teclado y para el
+ * lector de pantalla. Si hace falta navegar, se envuelve en un `NuxtLink` o
+ * se pone un botón dentro, que es lo que hace el playground.
+ */
+type Props = {
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    /**
+     * El elemento que pinta. `div` de serie; `form` para una tarjeta que
+     * se envía, `NuxtLink` para una que navega, `article` o `section`
+     * cuando el contenido lo pida.
+     *
+     * Es la forma correcta de una tarjeta pulsable, y por eso existe.
+     * Antes esto decía que una tarjeta que se pulsa entera «es un botón o
+     * un enlace, y disfrazarla deja de serlo para el teclado y para el
+     * lector de pantalla», con la salida de envolverla en un `NuxtLink`.
+     * El aviso sigue siendo cierto sobre el disfraz —un `div` con
+     * `@click` no lo arregla ningún `role`—, pero envolver no era la
+     * mejor salida: **siéndolo** no hay elemento de más, el foco cae
+     * donde debe y el navegador da gratis abrir en otra pestaña, copiar
+     * el enlace y anunciarlo como lo que es.
+     *
+     * Los atributos caen en él: `to` para un enlace, `action` y `method`
+     * para un formulario, sin declararlos aquí.
+     *
+     * **La cadena solo vale para etiquetas nativas.** Para un componente
+     * hay que pasar el componente, no su nombre: `:tag="NuxtLink"` con
+     * `import { NuxtLink } from '#components'`, nunca `tag="NuxtLink"`.
+     * Los componentes de Nuxt se auto-importan en **tiempo de
+     * compilación**, así que al resolver una cadena no hay nada
+     * registrado que encontrar — y lo que no resuelve se pinta como
+     * etiqueta nativa: sale un `<nuxtlink to="…">` literal en el DOM,
+     * con todas las clases puestas, sin `href`, sin navegación, sin
+     * foco y **sin un solo aviso**. Se ve exactamente igual que una
+     * tarjeta enlazada.
+     */
+    tag?: Component | string;
+    ui?: VunoUi<'card'>;
+    /**
+     * `outline` para una tarjeta sobre la página: borde y un escalón de
+     * elevación. `soft` para una que ya está dentro de algo levantado —un
+     * diálogo, un panel—, donde otro borde sobra y lo que distingue es
+     * subir otro escalón.
+     *
+     * `plain` no pinta contenedor: ni fondo ni borde, solo las tres
+     * regiones y la línea que las separa. Es para cuando el marco ya lo
+     * pone otro —un `<dialog>` con su anillo y su sombra— y repetirlo
+     * dentro dibujaría una caja dentro de otra.
+     */
+    variant?: 'outline' | 'plain' | 'soft';
+};
+/**
+ * Las tres regiones se pintan solo si se rellenan.
+ *
+ * Sin esto, una tarjeta con solo cuerpo arrastraría una cabecera vacía con su
+ * relleno y su línea divisoria: un hueco y una raya que no separan nada. Se
+ * ve raro y no falla, que es el peor modo de fallar.
+ *
+ * «Rellenada» es que produzca algo y no que esté declarada; lo decide
+ * `filled`, que vive en `internal/` porque los layouts necesitan la misma
+ * regla y dos copias de una regla divergen.
+ */
+type __VLS_Slots = {
+    default?: () => unknown;
+    footer?: () => unknown;
+    header?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    radius: VunoRadius;
+    variant: "outline" | "plain" | "soft";
+    tag: Component | string;
+    ui: VunoUi<"card">;
+}, {}, {}, {}, 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/Code/Code.d.vue.ts

@@ -0,0 +1,19 @@
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    /** Código sin transformar. También es lo que se copia al portapapeles. */
+    code: string;
+    /** HTML completo producido por un resaltador de confianza, como Shiki. */
+    highlighted?: string;
+    /** Nombre accesible cuando el bloque necesita desplazamiento horizontal. */
+    label?: string;
+    language?: string;
+    ui?: VunoUi<'code'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    ui: VunoUi<"code">;
+    highlighted: string;
+    language: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+export declare const codeTheme: Record<"code", {
+    readonly slots: {
+        readonly copy: "absolute inset-e-2 top-1 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 max-sm:top-0 max-sm:size-11 max-sm:opacity-100 pointer-coarse:top-0 pointer-coarse:size-11 pointer-coarse:opacity-100";
+        readonly copyError: "border-t border-vuno-error/25 bg-vuno-error/10 px-4 py-2 text-xs text-vuno-error";
+        readonly fallback: "text-vuno-body";
+        readonly header: "flex items-center gap-2 border-b border-vuno-border/70 px-4 py-2 font-mono text-xs text-vuno-muted";
+        readonly live: "sr-only";
+        readonly root: "group relative border-t border-vuno-border";
+        readonly scroller: "overflow-x-auto text-sm/relaxed [&_pre]:px-4 [&_pre]:py-3.5";
+    };
+}>;

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

@@ -0,0 +1,12 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const codeTheme = defineTheme("code", {
+  slots: {
+    copy: "absolute inset-e-2 top-1 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 max-sm:top-0 max-sm:size-11 max-sm:opacity-100 pointer-coarse:top-0 pointer-coarse:size-11 pointer-coarse:opacity-100",
+    copyError: "border-t border-vuno-error/25 bg-vuno-error/10 px-4 py-2 text-xs text-vuno-error",
+    fallback: "text-vuno-body",
+    header: "flex items-center gap-2 border-b border-vuno-border/70 px-4 py-2 font-mono text-xs text-vuno-muted",
+    live: "sr-only",
+    root: "group relative border-t border-vuno-border",
+    scroller: "overflow-x-auto text-sm/relaxed [&_pre]:px-4 [&_pre]:py-3.5"
+  }
+});

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

@@ -0,0 +1,109 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+defineOptions({ name: "VunoCode" });
+const props = defineProps({
+  code: { type: String, required: true },
+  highlighted: { type: String, required: false, default: void 0 },
+  label: { type: String, required: false, default: void 0 },
+  language: { type: String, required: false, default: "text" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("code", () => props.ui);
+const copied = ref(false);
+const copyFailed = ref(false);
+const overflows = ref(false);
+const scroller = useTemplateRef("scroller");
+const copyLabel = computed(() => {
+  const action = copied.value ? messages.value.codeCopied : messages.value.codeCopy;
+  return props.label ? `${action}: ${props.label}` : action;
+});
+let observer;
+let timer;
+function syncOverflow() {
+  const element = scroller.value;
+  overflows.value = !!element && element.scrollWidth > element.clientWidth + 1;
+}
+async function copy() {
+  copyFailed.value = false;
+  try {
+    await navigator.clipboard.writeText(props.code);
+  } catch {
+    copied.value = false;
+    copyFailed.value = true;
+    clearTimeout(timer);
+    return;
+  }
+  copied.value = true;
+  clearTimeout(timer);
+  timer = setTimeout(() => copied.value = false, 2e3);
+}
+watch(
+  () => [props.code, props.highlighted],
+  () => void nextTick(syncOverflow)
+);
+onMounted(() => {
+  syncOverflow();
+  observer = new ResizeObserver(syncOverflow);
+  if (scroller.value) observer.observe(scroller.value);
+});
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  clearTimeout(timer);
+});
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div :class="ui.header">{{ props.language }}</div>
+
+        <Button
+            :aria-label="copyLabel"
+            :class="ui.copy"
+            color="neutral"
+            :icon="copied ? icons.codeCopied : icons.codeCopy"
+            size="xs"
+            variant="soft"
+            @click="copy"
+        />
+
+        <div
+            ref="scroller"
+            :aria-label="overflows ? props.label ?? messages.codeRegion : void 0"
+            :class="ui.scroller"
+            :role="overflows ? 'region' : void 0"
+            :tabindex="overflows ? 0 : void 0"
+        >
+            <!-- El HTML viene de un resaltador elegido por quien consume el componente. -->
+            <!-- eslint-disable vue/no-v-html -->
+            <!-- nosemgrep: javascript.vue.security.audit.xss.templates.avoid-v-html.avoid-v-html -->
+            <div
+                v-if="props.highlighted"
+                v-html="props.highlighted"
+            />
+            <!-- eslint-enable vue/no-v-html -->
+
+            <pre
+                v-else
+                :class="ui.fallback"
+            ><code>{{ props.code }}</code></pre>
+        </div>
+
+        <p
+            v-if="copyFailed"
+            :class="ui.copyError"
+            role="alert"
+        >
+            {{ messages.codeCopyFailed }}
+        </p>
+
+        <span
+            aria-live="polite"
+            :class="ui.live"
+            >{{ copied ? messages.codeCopiedAnnouncement : "" }}</span
+        >
+    </div>
+</template>

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

@@ -0,0 +1,19 @@
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    /** Código sin transformar. También es lo que se copia al portapapeles. */
+    code: string;
+    /** HTML completo producido por un resaltador de confianza, como Shiki. */
+    highlighted?: string;
+    /** Nombre accesible cuando el bloque necesita desplazamiento horizontal. */
+    label?: string;
+    language?: string;
+    ui?: VunoUi<'code'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    ui: VunoUi<"code">;
+    highlighted: string;
+    language: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,35 @@
+import type { VunoConfirmOptions } from '#vuno/types/confirm';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = VunoConfirmOptions & {
+    loading?: boolean;
+    ui?: VunoUi<'confirm'>;
+};
+type __VLS_Slots = {
+    /**
+     * Sustituye a `description`. Para cuando el aviso es información que
+     * cambia la decisión —cuántos hijos quedan huérfanos, qué se pierde—
+     * y aplanarlo a una frase la escondería.
+     */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    confirm: () => any;
+    cancel: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onConfirm?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/Confirm/Confirm.theme.d.ts

@@ -0,0 +1,12 @@
+export declare const confirmTheme: Record<"confirm", {
+    readonly slots: {
+        readonly body: "flex items-start gap-3";
+        readonly content: "";
+        readonly description: "min-w-0 space-y-1";
+        readonly footer: "justify-end";
+        readonly icon: "size-5 shrink-0 text-(--vuno-accent)";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../types/base.js").VunoColor, Record<"icon", string>>;
+    };
+}>;

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

@@ -0,0 +1,13 @@
+import { accentByColor } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const confirmTheme = defineTheme("confirm", {
+  slots: {
+    body: "flex items-start gap-3",
+    content: "",
+    description: "min-w-0 space-y-1",
+    footer: "justify-end",
+    // Mismo caso que el aviso: el color por variable, no por nombre.
+    icon: "size-5 shrink-0 text-(--vuno-accent)"
+  },
+  variants: { color: accentByColor("icon") }
+});

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

@@ -0,0 +1,83 @@
+<script setup>
+import { computed, nextTick } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import Icon from "#vuno/components/Icon/Icon.vue";
+import Modal from "#vuno/components/Modal/Modal.vue";
+defineOptions({ name: "VunoConfirm" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  alert: { type: Boolean, required: false },
+  cancelLabel: { type: String, required: false },
+  color: { type: String, required: false },
+  confirmLabel: { type: String, required: false },
+  description: { type: String, required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["cancel", "confirm"]);
+defineSlots();
+const icons = useIcons();
+const messages = useMessages();
+const color = computed(() => props.color ?? "error");
+const ui = useTheme(
+  "confirm",
+  () => props.ui,
+  () => ({ color: color.value })
+);
+const modalUi = computed(() => ({ content: ui.value.content, footer: ui.value.footer }));
+function onCancel() {
+  open.value = false;
+  emit("cancel");
+}
+async function onConfirm() {
+  emit("confirm");
+  await nextTick();
+  if (!props.loading) open.value = false;
+}
+</script>
+
+<template>
+    <!--
+        Sobre `Modal`, no sobre el de Nuxt UI, y no por gusto: un `<dialog>`
+        nativo vive en la capa superior del navegador, que queda por encima de
+        cualquier z-index. Mezclando los dos sistemas, un confirm abierto desde
+        dentro de un `Modal` se pintaba detrás de él —estaba en el DOM y no se
+        veía—. Nativos los dos, el navegador los apila por orden de apertura.
+    -->
+    <Modal
+        v-model:open="open"
+        :dismissible="!props.loading"
+        :title="props.title ?? messages.confirmTitle"
+        :ui="modalUi"
+    >
+        <div :class="ui.body">
+            <Icon
+                :class="ui.icon"
+                :name="props.icon ?? icons.confirm"
+            />
+            <div :class="ui.description">
+                <slot>{{ props.description ?? messages.confirmDescription }}</slot>
+            </div>
+        </div>
+
+        <template #footer>
+            <Button
+                v-if="!props.alert"
+                color="neutral"
+                :disabled="props.loading"
+                :label="props.cancelLabel ?? messages.cancel"
+                variant="ghost"
+                @click="onCancel"
+            />
+            <Button
+                :color="color"
+                :label="props.confirmLabel ?? messages.confirm"
+                :loading="props.loading"
+                @click="onConfirm"
+            />
+        </template>
+    </Modal>
+</template>

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

@@ -0,0 +1,35 @@
+import type { VunoConfirmOptions } from '#vuno/types/confirm';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = VunoConfirmOptions & {
+    loading?: boolean;
+    ui?: VunoUi<'confirm'>;
+};
+type __VLS_Slots = {
+    /**
+     * Sustituye a `description`. Para cuando el aviso es información que
+     * cambia la decisión —cuántos hijos quedan huérfanos, qué se pierde—
+     * y aplanarlo a una frase la escondería.
+     */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    confirm: () => any;
+    cancel: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onConfirm?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/Container/Container.d.vue.ts

@@ -0,0 +1,42 @@
+import type { VunoContainerSize } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * Centra el contenido y le pone un ancho máximo.
+ *
+ * **El ancho es una variante del tema y no una clase que se pasa.** Escribirlo
+ * como `class="max-w-lg"` sobre el componente sería el defecto de siempre: una
+ * clase puesta sobre un componente no pasa por tailwind-merge, así que
+ * convive con la del tema y gana el orden de la hoja — dos anchos declarados
+ * y el que se aplica depende de en qué orden salieran compilados. Por la
+ * variante hay uno solo, y un proyecto puede cambiar la escala entera desde
+ * su `app.config`.
+ *
+ * Los tamaños son los de Tailwind, de `sm` a `7xl`, más `full` para cuando lo
+ * que se quiere es solo el relleno lateral y no el tope.
+ */
+type Props = {
+    /**
+     * Quita el relleno lateral. Para un contenedor dentro de otro que ya
+     * lo tiene, donde el relleno se sumaría dos veces.
+     */
+    flush?: boolean;
+    size?: VunoContainerSize;
+    ui?: VunoUi<'container'>;
+};
+declare var __VLS_1: {};
+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<{}>, {
+    size: VunoContainerSize;
+    ui: VunoUi<"container">;
+    flush: 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/Container/Container.theme.d.ts

@@ -0,0 +1,53 @@
+export declare const containerTheme: Record<"container", {
+    /**
+     * El contenedor. El ancho sale de la variante y no de una clase suelta: dos
+     * `max-w-*` sobre el mismo elemento no se resuelven, conviven.
+     */
+    readonly slots: {
+        readonly root: "mx-auto w-full";
+    };
+    readonly variants: {
+        readonly padding: {
+            readonly false: {};
+            readonly true: {
+                readonly root: "px-4 sm:px-6 lg:px-8";
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly root: "max-w-sm";
+            };
+            readonly md: {
+                readonly root: "max-w-md";
+            };
+            readonly lg: {
+                readonly root: "max-w-lg";
+            };
+            readonly xl: {
+                readonly root: "max-w-xl";
+            };
+            readonly '2xl': {
+                readonly root: "max-w-2xl";
+            };
+            readonly '3xl': {
+                readonly root: "max-w-3xl";
+            };
+            readonly '4xl': {
+                readonly root: "max-w-4xl";
+            };
+            readonly '5xl': {
+                readonly root: "max-w-5xl";
+            };
+            readonly '6xl': {
+                readonly root: "max-w-6xl";
+            };
+            readonly '7xl': {
+                readonly root: "max-w-7xl";
+            };
+            readonly '8xl': {
+                readonly root: "max-w-8xl";
+            };
+            readonly full: {};
+        };
+    };
+}>;