{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "bottom-navigation",
  "title": "Bottom Navigation",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/bottom-navigation/BottomNavigation.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, type Component, type HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nexport interface BottomNavItem {\n  /** Unique value identifying this tab. Used with v-model. */\n  value: string\n  /** Label shown under the icon. */\n  label: string\n  /** Lucide icon component. */\n  icon: Component\n  /** Optional badge count or text shown on the icon. */\n  badge?: string | number\n  /** Router link destination (use with vue-router). */\n  to?: string\n}\n\ninterface Props {\n  /** Tab items. */\n  items: BottomNavItem[]\n  /** Active item value (v-model). */\n  modelValue?: string\n  /** Active item color — a Tailwind text color class. Default 'text-primary'. */\n  activeColor?: string\n  /** Fixed positioning at the viewport bottom. Default true. */\n  fixed?: boolean\n  /** Show an active indicator pill behind the icon. Default true. */\n  showIndicator?: boolean\n  /** Safe-area padding for notched devices (iOS). Default true. */\n  safeArea?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: '',\n  activeColor: 'text-primary',\n  fixed: true,\n  showIndicator: true,\n  safeArea: true,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  select: [item: BottomNavItem]\n}>()\n\nconst active = computed(() => props.modelValue)\n\nfunction onSelect(item: BottomNavItem) {\n  if (item.to) {\n    // Router integration — navigate if vue-router is available\n    const router = (window as any).__vueRouter\n    if (router) router.push(item.to)\n  }\n  emit('update:modelValue', item.value)\n  emit('select', item)\n}\n</script>\n\n<template>\n  <nav\n    data-uipkge\n    data-slot=\"bottom-navigation\"\n    :data-fixed=\"fixed ? '' : undefined\"\n    :class=\"\n      cn(\n        'border-border bg-background/95 z-50 flex items-stretch justify-around border-t backdrop-blur-sm',\n        fixed ? 'fixed inset-x-0 bottom-0' : 'relative',\n        safeArea && 'pb-[env(safe-area-inset-bottom)]',\n        props.class,\n      )\n    \"\n  >\n    <button\n      v-for=\"item in items\"\n      :key=\"item.value\"\n      data-slot=\"bottom-navigation-item\"\n      :data-active=\"active === item.value ? '' : undefined\"\n      :aria-current=\"active === item.value ? 'page' : undefined\"\n      type=\"button\"\n      class=\"focus-visible:ring-ring/50 relative flex flex-1 flex-col items-center justify-center gap-0.5 pt-2 pb-1.5 text-xs transition-colors duration-200 outline-none focus-visible:ring-[3px]\"\n      :class=\"active === item.value ? activeColor : 'text-muted-foreground hover:text-foreground'\"\n      @click=\"onSelect(item)\"\n    >\n      <!-- Active indicator pill -->\n      <span\n        v-if=\"showIndicator && active === item.value\"\n        class=\"bg-primary/10 absolute top-1 h-8 w-14 rounded-full transition-opacity duration-200\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"relative flex items-center justify-center\">\n        <component\n          :is=\"item.icon\"\n          class=\"size-5 transition-transform duration-200\"\n          :class=\"active === item.value ? 'scale-110' : ''\"\n        />\n        <span\n          v-if=\"item.badge !== undefined && item.badge !== ''\"\n          class=\"bg-destructive text-destructive-foreground absolute -top-1.5 -right-2 flex min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-4 font-medium\"\n        >\n          {{ item.badge }}\n        </span>\n      </span>\n      <span\n        class=\"max-w-full truncate px-1 transition-opacity duration-200\"\n        :class=\"active === item.value ? 'font-medium' : ''\"\n      >\n        {{ item.label }}\n      </span>\n    </button>\n  </nav>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/bottom-navigation/BottomNavigation.vue"
    },
    {
      "path": "packages/registry-vue/components/bottom-navigation/index.ts",
      "content": "export { default as BottomNavigation } from './BottomNavigation.vue'\nexport type { BottomNavItem } from './BottomNavigation.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/bottom-navigation/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Mobile bottom tab bar with icon + label items. Supports v-model for the active item, an active color, fixed positioning at the viewport bottom, badges on items, and a `to` prop for vue-router integration.",
  "categories": [
    "navigation"
  ]
}