{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "top-app-bar",
  "title": "Top App Bar",
  "description": "Small, medium, and large top app bars, with the scroll-collapse behavior.",
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/top-app-bar.tsx",
      "content": "import type { ComponentProps } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype TopAppBarSize = \"small\" | \"medium\" | \"large\"\n\ntype TopAppBarProps = ComponentProps<\"header\"> & {\n  scrolled?: boolean\n  size?: TopAppBarSize\n}\n\nfunction TopAppBar({ className, scrolled = false, size = \"small\", ...props }: TopAppBarProps) {\n  return (\n    <header\n      {...props}\n      data-slot=\"top-app-bar\"\n      data-size={size}\n      data-scrolled={scrolled || undefined}\n      className={cn(\n        // Kit geometry (App bars page): 64 / 112 / 120dp tall, 4dp inline padding\n        // and a 4dp gap so the title starts 56dp in. Scrolling only swaps the fill\n        // to Surface Container — the kit carries no elevation on either state.\n        \"relative grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-1 bg-m3-surface px-1 text-foreground transition-[background-color]\",\n        \"duration-(--m3-spring-effects-default-duration) ease-(--m3-spring-effects-default)\",\n        \"data-[size=small]:h-16 data-[size=medium]:h-28 data-[size=large]:h-30\",\n        \"data-scrolled:bg-m3-surface-container\",\n        \"motion-reduce:transition-none\",\n        className,\n      )}\n    />\n  )\n}\n\nfunction TopAppBarNavigation({ className, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} data-slot=\"top-app-bar-navigation\" className={cn(\"z-10 flex h-16 items-center\", className)} />\n}\n\nfunction TopAppBarTitle({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      {...props}\n      data-slot=\"top-app-bar-title\"\n      className={cn(\n        \"min-w-0 truncate text-m3-title-lg\",\n        \"in-data-[size=small]:self-center\",\n        \"in-data-[size=medium]:absolute in-data-[size=medium]:right-4 in-data-[size=medium]:bottom-3 in-data-[size=medium]:left-4 in-data-[size=medium]:text-m3-headline-sm\",\n        \"in-data-[size=large]:absolute in-data-[size=large]:right-4 in-data-[size=large]:bottom-3 in-data-[size=large]:left-4 in-data-[size=large]:text-m3-headline-md\",\n        className,\n      )}\n    />\n  )\n}\n\nfunction TopAppBarActions({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      {...props}\n      data-slot=\"top-app-bar-actions\"\n      className={cn(\"z-10 col-start-3 row-start-1 flex h-16 items-center gap-0\", className)}\n    />\n  )\n}\n\nfunction TopAppBarOverflow({ className, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} data-slot=\"top-app-bar-overflow\" className={cn(\"flex items-center\", className)} />\n}\n\nexport {\n  TopAppBar,\n  TopAppBarActions,\n  TopAppBarNavigation,\n  TopAppBarOverflow,\n  TopAppBarTitle,\n  type TopAppBarProps,\n  type TopAppBarSize,\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}