{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-rail",
  "title": "Navigation Rail",
  "description": "The navigation rail, collapsed or expanded, for medium and larger windows.",
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/button.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/navigation-bar.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/navigation-context.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/tooltip.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/navigation-rail.tsx",
      "content": "import type { ComponentProps } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"./button\"\nimport { NavigationBar, NavigationBarItem, type NavigationBarItemProps } from \"./navigation-bar\"\nimport { NavigationContext, useNavigation } from \"./navigation-context\"\nimport { NavigationRailContext, useNavigationRail } from \"./navigation-rail-context\"\nimport { TooltipProvider } from \"./tooltip\"\n\ntype NavigationRailVariant = \"docked\" | \"floating\"\n\n/**\n * Material 3 navigation rail.\n *\n * Kit geometry (`Navigation Rail` / `Navigation Rail: Expanded` on the\n * Navigation page): the compact rail is 96dp wide with 44dp above the menu\n * button and 56dp below the destinations; the menu button and FAB stack 4dp\n * apart and sit 40dp above the destination column. Expanding widens the rail\n * to 220dp with 20dp side/bottom padding, swaps the destinations to 56dp\n * full-width pills and leaves everything else in place. The floating variant\n * adds a Surface Container fill with 16dp corners.\n */\ntype NavigationRailProps = ComponentProps<\"aside\"> & {\n  expanded?: boolean\n  onExpandedChange?: (expanded: boolean) => void\n  onValueChange: (value: string) => void\n  value: string\n  variant?: NavigationRailVariant\n}\n\nfunction NavigationRail({\n  \"aria-label\": ariaLabel = \"Primary navigation\",\n  children,\n  className,\n  expanded = false,\n  onExpandedChange,\n  onValueChange,\n  value,\n  variant = \"docked\",\n  ...props\n}: NavigationRailProps) {\n  return (\n    <NavigationContext.Provider value={{ onValueChange, value }}>\n      <NavigationRailContext.Provider value={{ expanded, onExpandedChange }}>\n        <TooltipProvider>\n          <aside\n            {...props}\n            aria-label={ariaLabel}\n            data-slot=\"navigation-rail\"\n            data-expanded={expanded}\n            data-variant={variant}\n            className={cn(\n              \"flex h-full flex-col pt-11 text-foreground transition-[width,padding] duration-(--m3-spring-effects-default-duration) ease-(--m3-spring-effects-default) motion-reduce:transition-none\",\n              variant === \"floating\" ? \"rounded-m3-lg bg-m3-surface-container\" : \"bg-m3-surface\",\n              expanded ? \"w-[220px] items-stretch px-5 pb-5\" : \"w-24 items-center pb-14\",\n              className,\n            )}\n          >\n            {children}\n          </aside>\n        </TooltipProvider>\n      </NavigationRailContext.Provider>\n    </NavigationContext.Provider>\n  )\n}\n\nfunction NavigationRailMenu({ className, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} data-slot=\"navigation-rail-menu\" className={cn(\"flex min-h-14 items-center justify-center in-data-[expanded=true]:justify-start\", className)} />\n}\n\nfunction NavigationRailFAB({ className, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} data-slot=\"navigation-rail-fab\" className={cn(\"mt-1 flex min-h-14 items-center justify-center in-data-[expanded=true]:justify-start\", className)} />\n}\n\nfunction NavigationRailDestinations({ className, ...props }: ComponentProps<\"nav\">) {\n  const navigation = useNavigation()\n  const rail = useNavigationRail()\n  return (\n    <NavigationBar\n      {...props}\n      value={navigation.value}\n      onValueChange={navigation.onValueChange}\n      orientation=\"vertical\"\n      itemLayout={rail.expanded ? \"row\" : \"stacked\"}\n      data-slot=\"navigation-rail-destinations\"\n      className={cn(\"mt-10 min-h-0 flex-1 bg-transparent data-[orientation=vertical]:w-full\", rail.expanded && \"gap-0\", className)}\n    />\n  )\n}\n\n/**\n * Compact rails show captions by default, as the kit does. Pass\n * `showLabel={false}` for an icon-only rail; the caption then moves into a\n * tooltip and the indicator becomes the kit's 56dp circle.\n */\nfunction NavigationRailItem({ label, showLabel = true, ...props }: NavigationBarItemProps) {\n  const rail = useNavigationRail()\n  const labelVisible = rail.expanded || showLabel\n  return (\n    <NavigationBarItem\n      {...props}\n      label={label}\n      showLabel={labelVisible}\n      title={labelVisible ? undefined : label}\n      tooltip={labelVisible ? undefined : label}\n    />\n  )\n}\n\nfunction NavigationRailNotifications({ className, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} data-slot=\"navigation-rail-notifications\" className={cn(\"mt-auto flex min-h-12 items-center justify-center\", className)} />\n}\n\nfunction NavigationRailExpansionToggle({ onClick, ...props }: ComponentProps<typeof Button>) {\n  const rail = useNavigationRail()\n  return (\n    <Button\n      {...props}\n      type=\"button\"\n      aria-expanded={rail.expanded}\n      size=\"icon\"\n      variant=\"ghost\"\n      disabled={props.disabled || !rail.onExpandedChange}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) rail.onExpandedChange?.(!rail.expanded)\n      }}\n    />\n  )\n}\n\nexport {\n  NavigationRail,\n  NavigationRailDestinations,\n  NavigationRailExpansionToggle,\n  NavigationRailFAB,\n  NavigationRailItem,\n  NavigationRailMenu,\n  NavigationRailNotifications,\n  type NavigationRailProps,\n  type NavigationRailVariant,\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/navigation-rail-context.ts",
      "content": "import { createContext, useContext } from \"react\"\n\ntype NavigationRailContextValue = {\n  expanded: boolean\n  onExpandedChange?: (expanded: boolean) => void\n}\n\nconst NavigationRailContext = createContext<NavigationRailContextValue>({ expanded: false })\nconst useNavigationRail = () => useContext(NavigationRailContext)\n\nexport { NavigationRailContext, useNavigationRail }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}