{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bottom-navigation",
  "title": "Bottom Navigation",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/bottom-navigation/BottomNavigation.tsx",
      "content": "import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface BottomNavItem {\n  /** Unique value identifying this tab. Used with value/defaultValue. */\n  value: string\n  /** Label shown under the icon. */\n  label: string\n  /** Lucide icon component. */\n  icon: LucideIcon\n  /** Optional badge count or text shown on the icon. */\n  badge?: string | number\n  /** Link destination (renders an anchor instead of a button). */\n  to?: string\n}\n\nexport interface BottomNavigationProps extends React.HTMLAttributes<HTMLElement> {\n  /** Tab items. */\n  items: BottomNavItem[]\n  /** Active item value (controlled). */\n  value?: string\n  /** Initial active item value (uncontrolled). */\n  defaultValue?: 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  /** Called when the active item changes. */\n  onValueChange?: (value: string) => void\n  /** Called when an item is selected, receiving the full item. */\n  onSelect?: (item: BottomNavItem) => void\n}\n\nconst BottomNavigation = React.forwardRef<HTMLElement, BottomNavigationProps>(\n  (\n    {\n      className,\n      items,\n      value,\n      defaultValue = '',\n      activeColor = 'text-primary',\n      fixed = true,\n      showIndicator = true,\n      safeArea = true,\n      onValueChange,\n      onSelect,\n      ...props\n    },\n    ref,\n  ) => {\n    const isControlled = value !== undefined\n    const [internal, setInternal] = React.useState(defaultValue)\n    const active = isControlled ? value : internal\n\n    const handleSelect = (item: BottomNavItem) => {\n      if (!isControlled) setInternal(item.value)\n      onValueChange?.(item.value)\n      onSelect?.(item)\n    }\n\n    return (\n      <nav\n        data-uipkge=\"\"\n        data-slot=\"bottom-navigation\"\n        data-fixed={fixed ? '' : undefined}\n        ref={ref as React.Ref<HTMLElement>}\n        className={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          className,\n        )}\n        {...props}\n      >\n        {items.map((item) => {\n          const isActive = active === item.value\n          const Icon = item.icon\n          const itemClass = cn(\n            '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            isActive ? activeColor : 'text-muted-foreground hover:text-foreground',\n          )\n          const inner = (\n            <>\n              {showIndicator && isActive ? (\n                <span\n                  className=\"bg-primary/10 absolute top-1 h-8 w-14 rounded-full transition-opacity duration-200\"\n                  aria-hidden=\"true\"\n                />\n              ) : null}\n              <span className=\"relative flex items-center justify-center\">\n                <Icon\n                  className={cn('size-5 transition-transform duration-200', isActive && 'scale-110')}\n                />\n                {item.badge !== undefined && item.badge !== '' ? (\n                  <span className=\"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                    {item.badge}\n                  </span>\n                ) : null}\n              </span>\n              <span\n                className={cn(\n                  'max-w-full truncate px-1 transition-opacity duration-200',\n                  isActive && 'font-medium',\n                )}\n              >\n                {item.label}\n              </span>\n            </>\n          )\n          if (item.to) {\n            return (\n              <a\n                key={item.value}\n                data-slot=\"bottom-navigation-item\"\n                data-active={isActive ? '' : undefined}\n                aria-current={isActive ? 'page' : undefined}\n                href={item.to}\n                className={itemClass}\n                onClick={(e) => {\n                  // Let the browser handle the navigation; still notify state.\n                  handleSelect(item)\n                  // Consumers using a router can call preventDefault in onSelect.\n                  if (e.defaultPrevented) return\n                }}\n              >\n                {inner}\n              </a>\n            )\n          }\n          return (\n            <button\n              key={item.value}\n              data-slot=\"bottom-navigation-item\"\n              data-active={isActive ? '' : undefined}\n              aria-current={isActive ? 'page' : undefined}\n              type=\"button\"\n              className={itemClass}\n              onClick={() => handleSelect(item)}\n            >\n              {inner}\n            </button>\n          )\n        })}\n      </nav>\n    )\n  },\n)\nBottomNavigation.displayName = 'BottomNavigation'\n\nexport { BottomNavigation }\n",
      "type": "registry:ui",
      "target": "~/components/ui/bottom-navigation/BottomNavigation.tsx"
    },
    {
      "path": "packages/registry-react/components/bottom-navigation/index.ts",
      "content": "export { BottomNavigation, type BottomNavigationProps, type BottomNavItem } from './BottomNavigation'\n",
      "type": "registry:ui",
      "target": "~/components/ui/bottom-navigation/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Mobile bottom tab bar with icon + label items. Supports value/defaultValue for the active item, an active color, fixed positioning at the viewport bottom, badges on items, and a `to` prop for link integration.",
  "categories": [
    "navigation"
  ]
}