{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bottom-navigation",
  "title": "Bottom Navigation",
  "description": "Bottom Navigation from the Get IT Done design system.",
  "dependencies": [
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/recipes.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/bottom-navigation.tsx",
      "content": "'use client';\n\nimport { Plus } from 'lucide-react';\nimport * as React from 'react';\n\nimport { focusRing, transitionBase } from '@/lib/recipes';\nimport { cn } from '@/lib/utils';\nimport { useLabels, usePreset } from '@/components/ui/labels-context';\n\n// Mobile bottom navigation (Figma \"Bottom navigation\" + \"_Bottom navigation item\"): up to five slots,\n// an optional centered primary action, count badges. The marketing-only NavigationBottom composition stays as is.\n\nconst BottomNavigation = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, 'aria-label': ariaLabelProp, ...props }, ref) => {\n    const l = useLabels();\n    const ariaLabel = ariaLabelProp ?? l.primary;\n    const zero = usePreset() === 'zero';\n    return (\n    <nav\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cn(\n        'flex h-16 w-full items-center justify-around gap-1 border-0 border-t border-solid bg-background-default px-2 text-text-subtle',\n        zero ? 'border-border-default' : 'border-hairline',\n        className,\n      )}\n      {...props}\n    />\n  );\n  },\n);\nBottomNavigation.displayName = 'BottomNavigation';\n\nexport interface BottomNavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  icon: React.ReactNode;\n  label: string;\n  current?: boolean;\n  /** Count badge on the icon, e.g. unread items. */\n  count?: number;\n  /** Renders a real button instead of a link, e.g. a \"More\" trigger that opens a sheet. Pass `aria-haspopup` and `aria-expanded` as needed. */\n  as?: 'a' | 'button';\n}\n\nconst BottomNavigationItem = React.forwardRef<HTMLAnchorElement, BottomNavigationItemProps>(\n  ({ className, icon, label, current = false, count, as = 'a', ...props }, ref) => {\n    const isButton = as === 'button';\n    const Tag = (isButton ? 'button' : 'a') as 'a';\n    // Zero: brand pill and icon for the current item, 11/500 label, 20px icons, brand count badge.\n    const zero = usePreset() === 'zero';\n    // The label comes first in the DOM, so the accessible name starts with the visible label and continues with the count (2.5.3). The icon wrapper is moved above it visually.\n    return (\n    <Tag\n      ref={ref}\n      {...(isButton ? { type: 'button' as never } : null)}\n      aria-current={current && !isButton ? 'page' : undefined}\n      data-current={current || undefined}\n      className={cn(\n        'group/item flex h-12 flex-1 flex-col items-center justify-center gap-1 rounded-control border-0 bg-transparent p-0 no-underline',\n        isButton && 'cursor-pointer',\n        zero ? 'typography-kpi-label-strong text-text-subtle' : 'typography-text-extra-small text-text-subtle',\n        'data-[current]:text-text-default',\n        transitionBase,\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <span>{label}</span>\n      <span\n        className={cn(\n          'relative order-first grid place-items-center rounded-full',\n          zero\n            ? 'h-control-sm w-10 [&>svg]:h-5 [&>svg]:w-5 group-hover/item:bg-muted group-data-[current]/item:bg-background-brand-subtle group-data-[current]/item:text-icon-brand'\n            : 'h-8 w-12 [&>svg]:h-icon-lg [&>svg]:w-icon-lg group-hover/item:bg-muted group-data-[current]/item:bg-muted',\n        )}\n      >\n        {icon}\n        {count ? <span className=\"sr-only\">, </span> : null}\n        {count ? (\n          <span\n            className={cn(\n              'absolute right-1 top-0 grid h-4 min-w-icon-sm place-items-center rounded-full',\n              zero ? 'typography-avatar-xs bg-background-brand-bold-default px-micro text-text-on-brand' : 'typography-text-extra-small bg-background-inverse px-1 text-text-inverse',\n            )}\n          >\n            {count}\n          </span>\n        ) : null}\n      </span>\n    </Tag>\n    );\n  },\n);\nBottomNavigationItem.displayName = 'BottomNavigationItem';\n\nexport interface BottomNavigationActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Required accessible name, e.g. `New`. */\n  label: string;\n  icon?: React.ReactNode;\n}\n\n// Centered primary action (quick create); a real button, not a destination.\nconst BottomNavigationAction = React.forwardRef<HTMLButtonElement, BottomNavigationActionProps>(\n  ({ className, label, icon, ...props }, ref) => {\n    const zero = usePreset() === 'zero';\n    return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'grid shrink-0 place-items-center',\n        'h-control-2xl w-control-2xl rounded-surface',\n        zero ? 'bg-background-brand-bold-default text-text-on-brand' : 'bg-background-inverse text-text-inverse',\n        transitionBase,\n        'hover:opacity-90 active:opacity-80',\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {icon ?? <Plus className=\"h-icon-lg w-icon-lg\" aria-hidden />}\n    </button>\n    );\n  },\n);\nBottomNavigationAction.displayName = 'BottomNavigationAction';\n\nexport { BottomNavigation, BottomNavigationAction, BottomNavigationItem };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}