ads-nuxt 0.1.1 → 0.1.2

package/app/components/AdsModal.vue

@@ -1,157 +1,157 @@
-<template>
-  <UModal
-    v-model:open="open"
-    :dismissible="dismissible"
-    :close="false"
-    :title="title"
-    :description="description"
-    :ui="{ overlay: 'bg-neutral-950/40', content: contentClass }"
-    :content="{
-      onEscapeKeyDown: () => emit('dismiss', 'esc'),
-      onPointerDownOutside: () => emit('dismiss', 'outside'),
-    }"
-  >
-    <template #content="{ close }">
-      <div class="flex min-h-0 w-full flex-col gap-[var(--ads-space-xxs)]">
-        <div class="flex items-start gap-[var(--ads-space-nano)]">
-          <span
-            v-if="icon"
-            class="flex size-[var(--ads-space-xs)] shrink-0 items-center justify-center text-[var(--ads-text-primary)]"
-            aria-hidden="true"
-          >
-            <UIcon :name="icon" class="size-[var(--ads-space-xxs)]" />
-          </span>
-          <div class="flex min-h-[var(--ads-space-xs)] min-w-0 flex-1 items-center">
-            <slot name="title">
-              <h2 class="text-[length:var(--ads-modal-title-size)] font-bold leading-[1.3] text-[var(--ads-modal-title)]">
-                {{ title }}
-              </h2>
-            </slot>
-          </div>
-          <button
-            v-if="closable"
-            type="button"
-            class="flex size-[var(--ads-space-xs)] shrink-0 items-center justify-center rounded-[var(--ads-radius-xsm)] text-[var(--ads-text-primary)] hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
-            aria-label="Fechar"
-            @click="dismiss(close)"
-          >
-            <UIcon name="i-lucide-x" class="size-[18px]" />
-          </button>
-        </div>
-
-        <p v-if="description" class="text-[length:var(--ads-modal-body-size)] leading-[var(--ads-line-height-md)] text-[var(--ads-modal-body)]">
-          {{ description }}
-        </p>
-
-        <div v-if="slots.default" class="min-h-0 overflow-y-auto">
-          <slot />
-        </div>
-
-        <div v-if="slots.footer" class="flex w-full shrink-0 items-center justify-end gap-[var(--ads-space-quark)] bg-white">
-          <slot name="footer" />
-        </div>
-        <div v-else-if="showDefaultActions" class="flex w-full items-center justify-end gap-[var(--ads-space-quark)]">
-          <AdsButton
-            v-if="cancelLabel"
-            type="unfilled"
-            :label="cancelLabel"
-            @click="dismiss(close)"
-          />
-          <AdsButton
-            v-if="confirmLabel"
-            :label="confirmLabel"
-            @click="emit('confirm')"
-          />
-        </div>
-      </div>
-    </template>
-  </UModal>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-import AdsButton from "./AdsButton.vue";
-
-/**
- * `dialog`: cartão centralizado (desktop, Figma `APP=No`), 532px, raio SM (8px).
- * `sheet`: folha presa à base (mobile/app, Figma `APP=Yes`), largura cheia,
- * arredondamento só no topo, sombra nível 2.
- *
- * Espaçamento, na escala ADS:
- * - padding do cartão e faixa do cabeçalho: space-xs (24px)
- * - vão entre cabeçalho, texto, conteúdo e ações: space-xxs (16px)
- * - vão entre ícone, título e fechar: space-nano (8px)
- * - ícone: space-xxs (16px). O X do desktop segue o SM do Figma (18px)
- * - título: 20px bold, line-height 130% (Subtitle 20 do Figma)
- */
-export type AdsModalVariant = "dialog" | "sheet";
-export type AdsModalSize = "md" | "lg" | "xl" | "2xl" | "3xl";
-export type AdsModalDismissReason = "esc" | "outside";
-
-const props = withDefaults(
-  defineProps<{
-    title: string;
-    description?: string;
-    /** Nome Lucide, como `i-lucide-align-center`. Sem valor, o título fica só com o texto. */
-    icon?: string;
-    cancelLabel?: string;
-    confirmLabel?: string;
-    variant?: AdsModalVariant;
-    /** Largura do cartão. `md` é o diálogo de confirmação (532px). */
-    size?: AdsModalSize;
-    scrollable?: boolean;
-    dismissible?: boolean;
-    /** Sem o X. Overlay e Esc continuam no `dismissible`. */
-    closable?: boolean;
-  }>(),
-  {
-    description: undefined,
-    icon: undefined,
-    cancelLabel: "Cancelar",
-    confirmLabel: "Continuar",
-    variant: "dialog",
-    size: "md",
-    scrollable: false,
-    dismissible: true,
-    closable: true,
-  },
-);
-
-/**
- * `!` força a prioridade sobre as classes padrão do tema `UModal`
- * (ex.: `shadow-lg`, `rounded-lg`), que entram na cascata depois das nossas
- * — sem o important, o valor do Figma perde para o default do Nuxt UI.
- */
-const widths: Record<AdsModalSize, string> = {
-  md: "!w-[min(532px,calc(100%-2rem))]",
-  lg: "!w-[min(42rem,calc(100%-2rem))]",
-  xl: "!w-[min(48rem,calc(100%-2rem))]",
-  "2xl": "!w-[min(56rem,calc(100%-2rem))]",
-  "3xl": "!w-[min(64rem,calc(100%-2rem))]",
-};
-
-const contentClass = computed(() => {
-  const scroll = props.scrollable ? " !max-h-[calc(100dvh-2rem)] !overflow-y-auto" : "";
-  if (props.variant === "sheet") {
-    return `!inset-x-0 !bottom-0 !top-auto !left-0 !translate-x-0 !translate-y-0 !w-full !max-w-none !max-h-[calc(100dvh-2rem)] !divide-y-0 !overflow-y-auto !bg-[var(--ads-modal-background)] !p-[var(--ads-modal-padding)] !shadow-[var(--ads-shadow-level-2)] !ring-1 !ring-[var(--ads-modal-border)] !rounded-t-[var(--ads-modal-radius)] !rounded-b-none${scroll}`;
-  }
-  return `${widths[props.size]} !max-w-none !divide-y-0 !rounded-[var(--ads-modal-radius)] !border !border-[var(--ads-modal-border)] !bg-[var(--ads-modal-background)] !p-[var(--ads-modal-padding)] !shadow-[var(--ads-shadow-level-3)] !ring-0${scroll}`;
-});
-
-const emit = defineEmits<{
-  confirm: [];
-  cancel: [];
-  dismiss: [reason: AdsModalDismissReason];
-}>();
-
-const open = defineModel<boolean>("open", { default: false });
-const slots = useSlots();
-const showDefaultActions = computed(() => !slots.footer && !slots.default);
-
-const dismiss = (close: () => void) => {
-  if (!props.closable) return;
-  emit("cancel");
-  close();
-  open.value = false;
-};
-</script>
+<template>
+  <UModal
+    v-model:open="open"
+    :dismissible="dismissible"
+    :close="false"
+    :title="title"
+    :description="description"
+    :ui="{ overlay: 'bg-neutral-950/40', content: contentClass }"
+    :content="{
+      onEscapeKeyDown: () => emit('dismiss', 'esc'),
+      onPointerDownOutside: () => emit('dismiss', 'outside'),
+    }"
+  >
+    <template #content="{ close }">
+      <div class="flex min-h-0 w-full flex-col gap-[var(--ads-space-xxs)]">
+        <div class="flex items-start gap-[var(--ads-space-nano)]">
+          <span
+            v-if="icon"
+            class="flex size-[var(--ads-space-xs)] shrink-0 items-center justify-center text-[var(--ads-text-primary)]"
+            aria-hidden="true"
+          >
+            <UIcon :name="icon" class="size-[var(--ads-space-xxs)]" />
+          </span>
+          <div class="flex min-h-[var(--ads-space-xs)] min-w-0 flex-1 items-center">
+            <slot name="title">
+              <h2 class="text-[length:var(--ads-modal-title-size)] font-bold leading-[1.3] text-[var(--ads-modal-title)]">
+                {{ title }}
+              </h2>
+            </slot>
+          </div>
+          <button
+            v-if="closable"
+            type="button"
+            class="flex size-[var(--ads-space-xs)] shrink-0 items-center justify-center rounded-[var(--ads-radius-xsm)] text-[var(--ads-text-primary)] hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
+            aria-label="Fechar"
+            @click="dismiss(close)"
+          >
+            <UIcon name="i-lucide-x" class="size-[18px]" />
+          </button>
+        </div>
+
+        <p v-if="description" class="text-[length:var(--ads-modal-body-size)] leading-[var(--ads-line-height-md)] text-[var(--ads-modal-body)]">
+          {{ description }}
+        </p>
+
+        <div v-if="slots.default" class="min-h-0 overflow-y-auto">
+          <slot />
+        </div>
+
+        <div v-if="slots.footer" class="flex w-full shrink-0 items-center justify-end gap-[var(--ads-space-quark)] bg-white">
+          <slot name="footer" />
+        </div>
+        <div v-else-if="showDefaultActions" class="flex w-full items-center justify-end gap-[var(--ads-space-quark)]">
+          <AdsButton
+            v-if="cancelLabel"
+            type="unfilled"
+            :label="cancelLabel"
+            @click="dismiss(close)"
+          />
+          <AdsButton
+            v-if="confirmLabel"
+            :label="confirmLabel"
+            @click="emit('confirm')"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import AdsButton from "./AdsButton.vue";
+
+/**
+ * `dialog`: cartão centralizado (desktop, Figma `APP=No`), 532px, raio SM (8px).
+ * `sheet`: folha presa à base (mobile/app, Figma `APP=Yes`), largura cheia,
+ * arredondamento só no topo, sombra nível 2.
+ *
+ * Espaçamento, na escala ADS:
+ * - padding do cartão e faixa do cabeçalho: space-xs (24px)
+ * - vão entre cabeçalho, texto, conteúdo e ações: space-xxs (16px)
+ * - vão entre ícone, título e fechar: space-nano (8px)
+ * - ícone: space-xxs (16px). O X do desktop segue o SM do Figma (18px)
+ * - título: 20px bold, line-height 130% (Subtitle 20 do Figma)
+ */
+export type AdsModalVariant = "dialog" | "sheet";
+export type AdsModalSize = "md" | "lg" | "xl" | "2xl" | "3xl";
+export type AdsModalDismissReason = "esc" | "outside";
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    description?: string;
+    /** Nome Lucide, como `i-lucide-align-center`. Sem valor, o título fica só com o texto. */
+    icon?: string;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    variant?: AdsModalVariant;
+    /** Largura do cartão. `md` é o diálogo de confirmação (532px). */
+    size?: AdsModalSize;
+    scrollable?: boolean;
+    dismissible?: boolean;
+    /** Sem o X. Overlay e Esc continuam no `dismissible`. */
+    closable?: boolean;
+  }>(),
+  {
+    description: undefined,
+    icon: undefined,
+    cancelLabel: "Cancelar",
+    confirmLabel: "Continuar",
+    variant: "dialog",
+    size: "md",
+    scrollable: false,
+    dismissible: true,
+    closable: true,
+  },
+);
+
+/**
+ * `!` força a prioridade sobre as classes padrão do tema `UModal`
+ * (ex.: `shadow-lg`, `rounded-lg`), que entram na cascata depois das nossas
+ * — sem o important, o valor do Figma perde para o default do Nuxt UI.
+ */
+const widths: Record<AdsModalSize, string> = {
+  md: "!w-[min(532px,calc(100%-2rem))]",
+  lg: "!w-[min(42rem,calc(100%-2rem))]",
+  xl: "!w-[min(48rem,calc(100%-2rem))]",
+  "2xl": "!w-[min(56rem,calc(100%-2rem))]",
+  "3xl": "!w-[min(64rem,calc(100%-2rem))]",
+};
+
+const contentClass = computed(() => {
+  const scroll = props.scrollable ? " !max-h-[calc(100dvh-2rem)] !overflow-y-auto" : "";
+  if (props.variant === "sheet") {
+    return `!inset-x-0 !bottom-0 !top-auto !left-0 !translate-x-0 !translate-y-0 !w-full !max-w-none !max-h-[calc(100dvh-2rem)] !divide-y-0 !overflow-y-auto !bg-[var(--ads-modal-background)] !p-[var(--ads-modal-padding)] !shadow-[var(--ads-shadow-level-2)] !ring-1 !ring-[var(--ads-modal-border)] !rounded-t-[var(--ads-modal-radius)] !rounded-b-none${scroll}`;
+  }
+  return `${widths[props.size]} !max-w-none !divide-y-0 !rounded-[var(--ads-modal-radius)] !border !border-[var(--ads-modal-border)] !bg-[var(--ads-modal-background)] !p-[var(--ads-modal-padding)] !shadow-[var(--ads-shadow-level-3)] !ring-0${scroll}`;
+});
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+  dismiss: [reason: AdsModalDismissReason];
+}>();
+
+const open = defineModel<boolean>("open", { default: false });
+const slots = useSlots();
+const showDefaultActions = computed(() => !slots.footer && !slots.default);
+
+const dismiss = (close: () => void) => {
+  if (!props.closable) return;
+  emit("cancel");
+  close();
+  open.value = false;
+};
+</script>

package/app/components/AdsMonthPicker.vue

@@ -1,80 +1,80 @@
-<template>
-  <div
-    class="flex h-[284px] w-[290px] flex-col gap-3 rounded-[var(--ads-radius-sm)] bg-[var(--ads-surface-card)] p-4 shadow-[var(--ads-shadow-level-1)]"
-    role="dialog"
-    aria-label="Selecionar mês"
-  >
-    <div class="flex items-center justify-between">
-      <button
-        type="button"
-        class="inline-flex size-6 items-center justify-center text-[var(--ads-text-primary)]"
-        aria-label="Ano anterior"
-        @click="year -= 1"
-      >
-        <UIcon name="i-lucide-chevron-left" class="size-6" />
-      </button>
-      <p class="text-sm font-bold leading-[1.3] text-[var(--ads-text-primary)]">{{ year }}</p>
-      <button
-        type="button"
-        class="inline-flex size-6 items-center justify-center text-[var(--ads-text-primary)]"
-        aria-label="Próximo ano"
-        @click="year += 1"
-      >
-        <UIcon name="i-lucide-chevron-right" class="size-6" />
-      </button>
-    </div>
-
-    <div class="grid min-h-0 flex-1 grid-cols-3 grid-rows-4 gap-1">
-      <button
-        v-for="(month, index) in ADS_FILTER_MONTHS"
-        :key="month.short"
-        type="button"
-        class="flex items-center justify-center rounded-[var(--ads-radius-xsm)] text-sm leading-[1.3] transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--ads-date-focus-border)] disabled:cursor-not-allowed"
-        :class="
-          index === selectedMonthIndex
-            ? 'bg-[var(--ads-surface-brand)] font-bold text-[var(--ads-text-contrast)]'
-            : 'text-[var(--ads-text-primary)] enabled:hover:bg-[var(--ads-month-hover-bg)]'
-        "
-        :aria-label="month.full"
-        :aria-pressed="index === selectedMonthIndex"
-        @click="onSelect(index)"
-      >
-        {{ month.short }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import {
-  ADS_FILTER_MONTHS,
-  formatMonthValue,
-  parseMonthValue,
-} from "../utils/ads-filter-select";
-
-const model = defineModel<string>({ default: "" });
-const emit = defineEmits<{ pick: [] }>();
-
-const initial = parseMonthValue(model.value);
-const year = ref(initial?.year ?? new Date().getFullYear());
-
-watch(
-  () => model.value,
-  (value) => {
-    const parsed = parseMonthValue(value);
-    if (parsed) year.value = parsed.year;
-  },
-);
-
-const selectedMonthIndex = computed(() => {
-  const parsed = parseMonthValue(model.value);
-  if (!parsed || parsed.year !== year.value) return -1;
-  return parsed.monthIndex;
-});
-
-const onSelect = (monthIndex: number) => {
-  model.value = formatMonthValue(year.value, monthIndex);
-  emit("pick");
-};
-</script>
+<template>
+  <div
+    class="flex h-[284px] w-[290px] flex-col gap-3 rounded-[var(--ads-radius-sm)] bg-[var(--ads-surface-card)] p-4 shadow-[var(--ads-shadow-level-1)]"
+    role="dialog"
+    aria-label="Selecionar mês"
+  >
+    <div class="flex items-center justify-between">
+      <button
+        type="button"
+        class="inline-flex size-6 items-center justify-center text-[var(--ads-text-primary)]"
+        aria-label="Ano anterior"
+        @click="year -= 1"
+      >
+        <UIcon name="i-lucide-chevron-left" class="size-6" />
+      </button>
+      <p class="text-sm font-bold leading-[1.3] text-[var(--ads-text-primary)]">{{ year }}</p>
+      <button
+        type="button"
+        class="inline-flex size-6 items-center justify-center text-[var(--ads-text-primary)]"
+        aria-label="Próximo ano"
+        @click="year += 1"
+      >
+        <UIcon name="i-lucide-chevron-right" class="size-6" />
+      </button>
+    </div>
+
+    <div class="grid min-h-0 flex-1 grid-cols-3 grid-rows-4 gap-1">
+      <button
+        v-for="(month, index) in ADS_FILTER_MONTHS"
+        :key="month.short"
+        type="button"
+        class="flex items-center justify-center rounded-[var(--ads-radius-xsm)] text-sm leading-[1.3] transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--ads-date-focus-border)] disabled:cursor-not-allowed"
+        :class="
+          index === selectedMonthIndex
+            ? 'bg-[var(--ads-surface-brand)] font-bold text-[var(--ads-text-contrast)]'
+            : 'text-[var(--ads-text-primary)] enabled:hover:bg-[var(--ads-month-hover-bg)]'
+        "
+        :aria-label="month.full"
+        :aria-pressed="index === selectedMonthIndex"
+        @click="onSelect(index)"
+      >
+        {{ month.short }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import {
+  ADS_FILTER_MONTHS,
+  formatMonthValue,
+  parseMonthValue,
+} from "../utils/ads-filter-select";
+
+const model = defineModel<string>({ default: "" });
+const emit = defineEmits<{ pick: [] }>();
+
+const initial = parseMonthValue(model.value);
+const year = ref(initial?.year ?? new Date().getFullYear());
+
+watch(
+  () => model.value,
+  (value) => {
+    const parsed = parseMonthValue(value);
+    if (parsed) year.value = parsed.year;
+  },
+);
+
+const selectedMonthIndex = computed(() => {
+  const parsed = parseMonthValue(model.value);
+  if (!parsed || parsed.year !== year.value) return -1;
+  return parsed.monthIndex;
+});
+
+const onSelect = (monthIndex: number) => {
+  model.value = formatMonthValue(year.value, monthIndex);
+  emit("pick");
+};
+</script>

package/app/components/AdsNavbarApp.vue

@@ -1,67 +1,67 @@
-<template>
-  <nav
-    class="flex h-[var(--ads-navbar-app-height)] w-full items-center justify-center gap-[var(--ads-navbar-app-gap)] border-t border-ads-neutro-claro-20 bg-[var(--ads-surface-card)] px-4"
-    aria-label="Navegação do aplicativo"
-  >
-    <component
-      :is="item.to ? NuxtLink : 'button'"
-      v-for="item in items"
-      :key="item.id"
-      v-bind="item.to ? { to: item.to } : { type: 'button' }"
-      class="flex w-[var(--ads-navbar-app-item-width)] flex-col items-center gap-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
-      :aria-current="item.id === activeId ? 'page' : undefined"
-      @click="emit('update:activeId', item.id)"
-    >
-      <span
-        class="flex size-[var(--ads-navbar-app-well)] items-center justify-center rounded-[var(--ads-radius-xsm)]"
-        :class="item.id === activeId ? 'bg-[var(--ads-navbar-app-active)] text-[var(--ads-text-contrast)]' : 'text-[var(--ads-text-secondary)]'"
-      >
-        <UIcon :name="item.icon" class="size-[18px]" />
-      </span>
-      <span
-        class="text-[length:var(--ads-navbar-app-font-size)] font-bold leading-4"
-        :class="item.id === activeId ? 'text-[var(--ads-navbar-app-active)]' : 'text-[var(--ads-text-secondary)]'"
-      >{{ item.label }}</span>
-    </component>
-  </nav>
-</template>
-
-<script lang="ts">
-import type { RouteLocationRaw } from "vue-router";
-
-export type AdsNavbarAppItem = {
-  id: string;
-  label: string;
-  icon: string;
-  to?: RouteLocationRaw;
-};
-
-export const adsNavbarAppItems: AdsNavbarAppItem[] = [
-  { id: "home", label: "Home", icon: "i-lucide-home" },
-  { id: "agenda", label: "Agenda", icon: "i-lucide-calendar-days" },
-  { id: "apps", label: "Apps", icon: "i-lucide-layout-grid" },
-  { id: "tickets", label: "Tickets", icon: "i-lucide-messages-square" },
-  { id: "perfil", label: "Perfil", icon: "i-lucide-circle-user" },
-];
-</script>
-
-<script setup lang="ts">
-import { NuxtLink } from "#components";
-
-
-withDefaults(
-  defineProps<{
-    items?: AdsNavbarAppItem[];
-    activeId?: string;
-  }>(),
-  {
-    items: () => adsNavbarAppItems,
-    activeId: "home",
-  },
-);
-
-const emit = defineEmits<{
-  "update:activeId": [id: string];
-}>();
-
-</script>
+<template>
+  <nav
+    class="flex h-[var(--ads-navbar-app-height)] w-full items-center justify-center gap-[var(--ads-navbar-app-gap)] border-t border-ads-neutro-claro-20 bg-[var(--ads-surface-card)] px-4"
+    aria-label="Navegação do aplicativo"
+  >
+    <component
+      :is="item.to ? NuxtLink : 'button'"
+      v-for="item in items"
+      :key="item.id"
+      v-bind="item.to ? { to: item.to } : { type: 'button' }"
+      class="flex w-[var(--ads-navbar-app-item-width)] flex-col items-center gap-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ads-text-brand)]"
+      :aria-current="item.id === activeId ? 'page' : undefined"
+      @click="emit('update:activeId', item.id)"
+    >
+      <span
+        class="flex size-[var(--ads-navbar-app-well)] items-center justify-center rounded-[var(--ads-radius-xsm)]"
+        :class="item.id === activeId ? 'bg-[var(--ads-navbar-app-active)] text-[var(--ads-text-contrast)]' : 'text-[var(--ads-text-secondary)]'"
+      >
+        <UIcon :name="item.icon" class="size-[18px]" />
+      </span>
+      <span
+        class="text-[length:var(--ads-navbar-app-font-size)] font-bold leading-4"
+        :class="item.id === activeId ? 'text-[var(--ads-navbar-app-active)]' : 'text-[var(--ads-text-secondary)]'"
+      >{{ item.label }}</span>
+    </component>
+  </nav>
+</template>
+
+<script lang="ts">
+import type { RouteLocationRaw } from "vue-router";
+
+export type AdsNavbarAppItem = {
+  id: string;
+  label: string;
+  icon: string;
+  to?: RouteLocationRaw;
+};
+
+export const adsNavbarAppItems: AdsNavbarAppItem[] = [
+  { id: "home", label: "Home", icon: "i-lucide-home" },
+  { id: "agenda", label: "Agenda", icon: "i-lucide-calendar-days" },
+  { id: "apps", label: "Apps", icon: "i-lucide-layout-grid" },
+  { id: "tickets", label: "Tickets", icon: "i-lucide-messages-square" },
+  { id: "perfil", label: "Perfil", icon: "i-lucide-circle-user" },
+];
+</script>
+
+<script setup lang="ts">
+import { NuxtLink } from "#components";
+
+
+withDefaults(
+  defineProps<{
+    items?: AdsNavbarAppItem[];
+    activeId?: string;
+  }>(),
+  {
+    items: () => adsNavbarAppItems,
+    activeId: "home",
+  },
+);
+
+const emit = defineEmits<{
+  "update:activeId": [id: string];
+}>();
+
+</script>