@groupteknology/vuno 1.0.1 → 3.0.0

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

@@ -0,0 +1,51 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+defineOptions({ name: "VunoCard" });
+const props = defineProps({
+  color: { type: String, required: false, default: "neutral" },
+  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,
+  () => ({ color: props.color, 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) || filled(slots.footer)"
+            :class="ui.primary"
+        >
+            <div
+                v-if="filled(slots.default)"
+                :class="ui.body"
+            >
+                <slot />
+            </div>
+
+            <div
+                v-if="filled(slots.footer)"
+                :class="ui.footer"
+            >
+                <slot name="footer" />
+            </div>
+        </div>
+    </component>
+</template>

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

@@ -0,0 +1,32 @@
+import type { VunoCardProps } from './Card.types.js';
+/**
+ * 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<VunoCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoCardProps> & Readonly<{}>, {
+    color: import("../../types/base.js").VunoColor;
+    radius: import("./Card.types.js").VunoCardRadius;
+    variant: "outline" | "soft";
+    tag: import("vue").Component | string;
+    ui: import("../../types/slots.js").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,9 @@
+import type { VunoCodeProps } from './Code.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoCodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoCodeProps> & Readonly<{}>, {
+    label: string;
+    ui: import("../../types/slots.js").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.types.d.ts

@@ -0,0 +1,8 @@
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoCodeProps = {
+    code: string;
+    highlighted?: string;
+    label?: string;
+    language?: string;
+    ui?: VunoUi<'code'>;
+};

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

@@ -0,0 +1,116 @@
+<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";
+import Text from "#vuno/components/Text/Text.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"
+            ><Text tag="code" tone="inherit" variant="inherit">{{ props.code }}</Text></pre>
+        </div>
+
+        <Text
+            v-if="copyFailed"
+            :class="ui.copyError"
+            role="alert"
+            tag="p"
+            tone="inherit"
+            variant="inherit"
+        >
+            {{ messages.codeCopyFailed }}
+        </Text>
+
+        <Text
+            aria-live="polite"
+            :class="ui.live"
+            tag="span"
+            tone="inherit"
+            variant="inherit"
+            >{{ copied ? messages.codeCopiedAnnouncement : "" }}</Text
+        >
+    </div>
+</template>

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

@@ -0,0 +1,9 @@
+import type { VunoCodeProps } from './Code.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoCodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoCodeProps> & Readonly<{}>, {
+    label: string;
+    ui: import("../../types/slots.js").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/Collapsible/Collapsible.d.vue.ts

@@ -0,0 +1,31 @@
+import type { VunoCollapsibleProps } from './Collapsible.types.js';
+type __VLS_Props = VunoCollapsibleProps;
+type __VLS_Slots = {
+    /** Contenido que permanece montado mientras está oculto. */
+    content?: (props: {
+        open: boolean;
+    }) => unknown;
+    /** Control interactivo que abre o cierra el contenido. */
+    default?: (props: {
+        open: boolean;
+    }) => 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, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    ui: import("../../types/slots.js").VunoUi<"collapsible">;
+}, {}, {}, {}, 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/Collapsible/Collapsible.theme.d.ts

@@ -0,0 +1,6 @@
+export declare const collapsibleTheme: Record<"collapsible", {
+    readonly slots: {
+        readonly content: "min-w-0";
+        readonly root: "relative";
+    };
+}>;

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

@@ -0,0 +1,7 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const collapsibleTheme = defineTheme("collapsible", {
+  slots: {
+    content: "min-w-0",
+    root: "relative"
+  }
+});

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

@@ -0,0 +1,4 @@
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoCollapsibleProps = {
+    ui?: VunoUi<'collapsible'>;
+};

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

@@ -0,0 +1,72 @@
+<script setup>
+import { gsap } from "gsap";
+import { cloneVNode, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { firstElement } from "#vuno/utils/slots";
+defineOptions({ name: "VunoCollapsible" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  ui: { type: Object, required: false, default: void 0 }
+});
+const slots = defineSlots();
+const contentId = useId();
+const ui = useTheme("collapsible", () => props.ui);
+const Trigger = () => {
+  const node = firstElement(slots.default?.({ open: open.value }));
+  if (!node) return null;
+  return cloneVNode(node, {
+    onClick: () => open.value = !open.value,
+    "aria-controls": contentId,
+    "aria-expanded": open.value ? "true" : "false"
+  });
+};
+const onEnter = (el, done) => {
+  gsap.fromTo(
+    el,
+    {
+      height: 0,
+      opacity: 0
+    },
+    {
+      onComplete: done,
+      duration: 0.3,
+      ease: "power2.out",
+      height: "auto",
+      opacity: 1
+    }
+  );
+};
+const onLeave = (el, done) => {
+  gsap.to(el, {
+    onComplete: done,
+    duration: 0.25,
+    ease: "power2.in",
+    height: 0,
+    opacity: 0
+  });
+};
+</script>
+
+<template>
+    <div :class="ui.root">
+        <Trigger />
+
+        <Transition
+            :css="false"
+            @enter="onEnter"
+            @leave="onLeave"
+        >
+            <div
+                v-show="open"
+                :id="contentId"
+                :class="ui.content"
+                :hidden="!open"
+            >
+                <slot
+                    name="content"
+                    :open="open"
+                />
+            </div>
+        </Transition>
+    </div>
+</template>

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

@@ -0,0 +1,31 @@
+import type { VunoCollapsibleProps } from './Collapsible.types.js';
+type __VLS_Props = VunoCollapsibleProps;
+type __VLS_Slots = {
+    /** Contenido que permanece montado mientras está oculto. */
+    content?: (props: {
+        open: boolean;
+    }) => unknown;
+    /** Control interactivo que abre o cierra el contenido. */
+    default?: (props: {
+        open: boolean;
+    }) => 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, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    ui: import("../../types/slots.js").VunoUi<"collapsible">;
+}, {}, {}, {}, 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/ColorModeButton/ColorModeButton.d.vue.ts

@@ -0,0 +1,12 @@
+import type { VunoColorModeButtonProps } from './ColorModeButton.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoColorModeButtonProps> & Readonly<{}>, {
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./ColorModeButton.types.js").VunoColorModeButtonSize;
+    ui: import("../../types/slots.js").VunoUi<"button">;
+    darkIcon: string;
+    darkLabel: string;
+    lightIcon: string;
+    lightLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoColorModeButtonSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
+export type VunoColorModeButtonProps = {
+    darkIcon?: string;
+    darkLabel?: string;
+    disabled?: boolean;
+    lightIcon?: string;
+    lightLabel?: string;
+    radius?: VunoRadius;
+    size?: VunoColorModeButtonSize;
+    ui?: VunoUi<'button'>;
+};

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

@@ -0,0 +1,55 @@
+<script setup>
+import { computed } from "vue";
+import { useColorMode } from "#imports";
+import Button from "#vuno/components/Button/Button.vue";
+import Icon from "#vuno/components/Icon/Icon.vue";
+defineOptions({ name: "VunoColorModeButton" });
+const props = defineProps({
+  darkIcon: { type: String, required: false, default: "lucide:moon" },
+  darkLabel: { type: String, required: false, default: "Usar tema oscuro" },
+  disabled: { type: Boolean, required: false },
+  lightIcon: { type: String, required: false, default: "lucide:sun" },
+  lightLabel: { type: String, required: false, default: "Usar tema claro" },
+  radius: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const colorMode = useColorMode();
+const isDark = computed(() => colorMode.value === "dark");
+const iconClass = computed(() => ({ xs: "size-3", sm: "size-3.5", md: "size-4", lg: "size-4.5", xl: "size-5" })[props.size ?? "md"]);
+function toggleColorMode() {
+  colorMode.preference = isDark.value ? "light" : "dark";
+}
+</script>
+
+<template>
+    <Button
+        :aria-label="isDark ? props.lightLabel : props.darkLabel"
+        :aria-pressed="isDark"
+        :disabled="props.disabled"
+        :radius="props.radius"
+        shape="square"
+        :size="props.size"
+        :ui="props.ui"
+        variant="ghost"
+        @click="toggleColorMode"
+    >
+        <!--
+            Los dos iconos forman parte del HTML de SSR. La clase `dark`, que
+            `@nuxtjs/color-mode` resuelve antes de pintar, elige cuál se ve sin
+            esperar a que Vue hidrate y exponga el modo detectado.
+        -->
+        <span :class="[iconClass, 'dark:hidden']">
+            <Icon
+                class="size-full"
+                :name="props.darkIcon"
+            />
+        </span>
+        <span :class="[iconClass, 'hidden dark:block']">
+            <Icon
+                class="size-full"
+                :name="props.lightIcon"
+            />
+        </span>
+    </Button>
+</template>

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

@@ -0,0 +1,12 @@
+import type { VunoColorModeButtonProps } from './ColorModeButton.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoColorModeButtonProps> & Readonly<{}>, {
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./ColorModeButton.types.js").VunoColorModeButtonSize;
+    ui: import("../../types/slots.js").VunoUi<"button">;
+    darkIcon: string;
+    darkLabel: string;
+    lightIcon: string;
+    lightLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/{overlays → Confirm}/Confirm.d.vue.ts

@@ -1,9 +1,5 @@
-import type { VunoConfirmOptions } from '#vuno/types/confirm';
-import type { VunoSlots } from '#vuno/types/base';
-type __VLS_Props = VunoConfirmOptions & {
-    loading?: boolean;
-    ui?: VunoSlots;
-};
+import type { VunoConfirmProps } from './Confirm.types.js';
+type __VLS_Props = VunoConfirmProps;
 type __VLS_Slots = {
     /**
      * Sustituye a `description`. Para cuando el aviso es información que

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.types.d.ts

@@ -0,0 +1,6 @@
+import type { VunoConfirmOptions } from '#vuno/types/confirm';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoConfirmProps = VunoConfirmOptions & {
+    loading?: boolean;
+    ui?: VunoUi<'confirm'>;
+};

package/dist/runtime/app/components/{overlays → Confirm}/Confirm.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { computed, nextTick } from "vue";
-import Modal from "#vuno/components/overlays/Modal.vue";
-import Button from "#vuno/components/actions/Button.vue";
-import Icon from "#vuno/components/actions/Icon.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 },
@@ -17,11 +19,14 @@ const props = defineProps({
 });
 const emit = defineEmits(["cancel", "confirm"]);
 defineSlots();
-const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const icons = useIcons();
 const messages = useMessages();
 const color = computed(() => props.color ?? "error");
-const ui = useTheme("confirm", () => props.ui, () => ({ color: color.value }));
+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;

package/dist/runtime/app/components/{overlays → Confirm}/Confirm.vue.d.ts

@@ -1,9 +1,5 @@
-import type { VunoConfirmOptions } from '#vuno/types/confirm';
-import type { VunoSlots } from '#vuno/types/base';
-type __VLS_Props = VunoConfirmOptions & {
-    loading?: boolean;
-    ui?: VunoSlots;
-};
+import type { VunoConfirmProps } from './Confirm.types.js';
+type __VLS_Props = VunoConfirmProps;
 type __VLS_Slots = {
     /**
      * Sustituye a `description`. Para cuando el aviso es información que

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

@@ -0,0 +1,18 @@
+import type { VunoContainerProps } from './Container.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<VunoContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoContainerProps> & Readonly<{}>, {
+    size: import("./Container.types.js").VunoContainerSize;
+    ui: import("../../types/slots.js").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;
+    };
+};