{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-button",
  "title": "Floating button",
  "description": "floats OVER the scroll (a Button flows with it) · Material calls it a FAB · `icon label? variant position` · one per screen",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/floating-button.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport type { LucideIcon } from 'lucide-react-native';\nimport { Pressable } from 'react-native';\n\ntype Props = React.ComponentProps<typeof Pressable> & {\n  icon: LucideIcon;\n  /** Adds a label → an extended pill instead of a circle. */\n  label?: string;\n  variant?: 'primary' | 'secondary';\n  /** `inline` renders in flow; the others pin to the screen corner/centre (parent must be relative/full-screen). */\n  position?: 'inline' | 'bottom-right' | 'bottom-center';\n};\n\n/**\n * A button that floats OVER the scroll rather than sitting in it, so a screen's one\n * most important action stays reachable however far down you are — add, compose, new.\n *\n * Material calls this a FAB. Use an ordinary `Button` for anything that belongs in the\n * content flow. One per screen.\n */\nexport function FloatingButton({ icon, label, variant = 'primary', position = 'inline', className, ...props }: Props) {\n  const primary = variant === 'primary';\n  const fg = primary ? 'text-primary-foreground' : 'text-secondary-foreground';\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      className={cn(\n        'h-control-lg flex-row items-center justify-center gap-2 rounded-control shadow-lg shadow-black/20 active:opacity-90',\n        label ? 'px-5' : 'w-14',\n        primary ? 'bg-primary' : 'bg-secondary',\n        position === 'bottom-right' && 'absolute bottom-6 right-5',\n        position === 'bottom-center' && 'absolute bottom-6 self-center',\n        className\n      )}\n      {...props}>\n      <Icon as={icon} size={22} className={fg} />\n      {label ? <Text className={cn('font-semibold', fg)}>{label}</Text> : null}\n    </Pressable>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/floating-button.tsx"
    }
  ],
  "meta": {
    "exports": [
      "FloatingButton"
    ],
    "api": "<FloatingButton icon label? variant=\"primary|secondary\" position=\"inline|bottom-right|bottom-center\" />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "actions"
  ],
  "type": "registry:component"
}