{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bottom-nav",
  "type": "registry:ui",
  "title": "BottomNav",
  "description": "Pill-shaped frosted bottom navigation, hand-composed from BottomNavItem and BottomNavAction.",
  "categories": [
    "navigation"
  ],
  "registryDependencies": [
    "https://whiskeyjack.net/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/bottom-nav.tsx",
      "type": "registry:ui",
      "target": "components/ui/bottom-nav.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface BottomNavProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Maximum width constraint for the nav bar\n   * @default \"max-w-lg\"\n   */\n  maxWidth?: string;\n}\n\n/**\n * A pill-shaped bottom navigation bar component.\n *\n * Features:\n * - Fixed to bottom with safe area padding\n * - Constrained width matching content containers\n * - Fully rounded (pill-shaped)\n * - Spacing on left, right, and bottom edges\n *\n * @example\n * ```tsx\n * <BottomNav>\n *   <BottomNavItem href=\"/\" active>\n *     <HomeIcon />\n *     <span>Home</span>\n *   </BottomNavItem>\n *   <BottomNavItem href=\"/settings\">\n *     <SettingsIcon />\n *     <span>Settings</span>\n *   </BottomNavItem>\n * </BottomNav>\n * ```\n */\nconst BottomNav = React.forwardRef<HTMLElement, BottomNavProps>(\n  ({ className, maxWidth = \"max-w-lg\", children, ...props }, ref) => (\n    <nav\n      ref={ref}\n      className={cn(\n        // Positioning with spacing from edges. The bottom gap is the LARGER of\n        // the float gap or (the safe-area inset minus a little) -- the raw inset\n        // floats the pill too high above a transparent home indicator, so trim\n        // it; the max() keeps a real gap on web/Android where the inset is ~0.\n        \"fixed bottom-0 left-2 right-2 z-50\",\n        \"bottom-nav-safe\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          // Size and centering - content-based width with maximum\n          \"w-fit\",\n          maxWidth,\n          \"mx-auto\",\n          // Pill shape\n          \"rounded-full\",\n          // Frosted glass effect\n          \"wj-frost-chrome\",\n          \"border border-[var(--color-border-light)] dark:border-[var(--color-border-dark)]\",\n          // Shadow for elevation\n          \"shadow-lg\",\n          // Layout\n          \"flex items-center gap-1 h-16 px-2\"\n        )}\n      >\n        {children}\n      </div>\n    </nav>\n  )\n);\nBottomNav.displayName = \"BottomNav\";\n\nexport interface BottomNavItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Whether this nav item is currently active\n   */\n  active?: boolean;\n  /**\n   * The element type to render (for use with router Link components)\n   * @default \"a\"\n   */\n  as?: React.ElementType;\n  /**\n   * Href for the navigation item (passed to the underlying element)\n   */\n  href?: string;\n  /**\n   * For react-router-dom Link components, use \"to\" instead of \"href\"\n   */\n  to?: string;\n}\n\n/**\n * Individual navigation item within BottomNav.\n *\n * Supports custom elements via the `as` prop for router integration:\n *\n * @example\n * ```tsx\n * import { Link } from 'react-router-dom'\n *\n * <BottomNavItem as={Link} to=\"/home\" active>\n *   <HomeIcon />\n *   <span>Home</span>\n * </BottomNavItem>\n * ```\n */\nconst BottomNavItem = React.forwardRef<HTMLElement, BottomNavItemProps>(\n  ({ className, active, as: Component = \"a\", children, ...props }, ref) => (\n    <Component\n      ref={ref}\n      className={cn(\n        \"wj-focus-ring flex flex-col items-center justify-center px-4 py-2 rounded-xl transition-colors touch-target\",\n        active\n          ? \"text-[var(--color-text-primary-light)] dark:text-[var(--color-text-primary-dark)]\"\n          : \"text-[var(--color-text-muted-light)] dark:text-[var(--color-text-muted-dark)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n);\nBottomNavItem.displayName = \"BottomNavItem\";\n\nexport interface BottomNavActionProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * The element type to render (for use with router Link components)\n   * @default \"a\"\n   */\n  as?: React.ElementType;\n  /**\n   * Href for the action (passed to the underlying element)\n   */\n  href?: string;\n  /**\n   * For react-router-dom Link components, use \"to\" instead of \"href\"\n   */\n  to?: string;\n}\n\n/**\n * Action button within BottomNav (e.g., add button).\n *\n * Uses the solid accent color for action buttons.\n *\n * @example\n * ```tsx\n * import { Link } from 'react-router-dom'\n *\n * <BottomNavAction as={Link} to=\"/add\" aria-label=\"Add\">\n *   <PlusIcon />\n * </BottomNavAction>\n * ```\n */\nconst BottomNavAction = React.forwardRef<HTMLElement, BottomNavActionProps>(\n  ({ className, as: Component = \"a\", children, ...props }, ref) => (\n    <Component\n      ref={ref}\n      className={cn(\n        \"wj-focus-ring w-12 h-12 rounded-full flex items-center justify-center\",\n        \"bg-[var(--color-accent-500)] shadow-bevel-accent\",\n        \"hover:bg-[var(--color-accent-400)]\",\n        \"active:bg-[var(--color-accent-600)]\",\n        \"text-[var(--color-accent-foreground-icon)] transition-all\",\n        \"hover:scale-105 active:scale-95\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n);\nBottomNavAction.displayName = \"BottomNavAction\";\n\nexport { BottomNav, BottomNavItem, BottomNavAction };\n"
    }
  ],
  "docs": "BottomNav is the hand-composed bar: lay out the items and action yourself when you know they always fit. For a data-driven bar that collapses overflowing items into a hamburger, use MobileBottomNav instead.",
  "meta": {
    "group": "navigation",
    "related": [
      "mobile-bottom-nav",
      "action-pill"
    ],
    "exports": [
      "BottomNav",
      "BottomNavItem",
      "BottomNavAction"
    ],
    "siteSlug": "bottom-nav"
  }
}