{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sticky-bottom-bar",
  "title": "Sticky bottom bar",
  "description": "action bar that sticks to the bottom of its scroll container · safe-area aware",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/sticky-bottom-bar.tsx",
      "content": "import { cn } from 'cn';\nimport * as React from 'react';\n\ntype Props = {\n  children: React.ReactNode;\n  /** No fill and no top border, for actions floating over hero art. */\n  transparent?: boolean;\n  className?: string;\n};\n\n/**\n * An action bar that sticks to the bottom of its scroll container, clear of the home indicator. Children share\n * the width equally (one child fills it). Put it last inside the scrolling element.\n */\nexport function StickyBottomBar({ children, transparent, className }: Props) {\n  const kids = React.Children.toArray(children);\n  return (\n    <div\n      className={cn(\n        'sticky bottom-0 z-10 flex gap-3 px-5 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]',\n        !transparent && 'bg-background/95 border-border supports-[backdrop-filter]:bg-background/80 border-t backdrop-blur',\n        className\n      )}>\n      {kids.map((k, i) => (\n        <div key={i} className=\"flex min-w-0 flex-1 *:w-full\">\n          {k}\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/sticky-bottom-bar.tsx"
    }
  ],
  "meta": {
    "exports": [
      "StickyBottomBar"
    ],
    "api": "<StickyBottomBar transparent?>{buttons}</StickyBottomBar>"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "layout"
  ],
  "type": "registry:component"
}