{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fab",
  "title": "Fab",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/fab/Fab.tsx",
      "content": "import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '@/lib/utils'\nimport { fabVariants, type FabVariants } from './fab.variants'\n\nexport interface FabProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'>,\n    FabVariants {\n  /** Label text — renders an extended FAB. Use children for the icon. */\n  label?: string\n  /** Render the child element as the FAB (merging props/styles) instead of\n   *  emitting a <button> — the React equivalent of reka-ui's as-child. */\n  asChild?: boolean\n  /** Use absolute instead of fixed positioning (for contained FABs). */\n  absolute?: boolean\n  /** Accessible label. Defaults to the label prop or 'Floating action'. */\n  ariaLabel?: string\n}\n\nconst Fab = React.forwardRef<HTMLButtonElement, FabProps>(\n  (\n    {\n      className,\n      label,\n      asChild = false,\n      variant,\n      size,\n      position,\n      absolute = false,\n      disabled,\n      ariaLabel,\n      onClick,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const resolvedSize = label ? 'extended' : size\n    return (\n      <Comp\n        data-uipkge=\"\"\n        data-slot=\"fab\"\n        data-variant={variant ?? undefined}\n        data-size={resolvedSize ?? undefined}\n        data-position={position ?? undefined}\n        disabled={disabled}\n        aria-label={ariaLabel || label || 'Floating action'}\n        className={cn(\n          fabVariants({ variant, size: resolvedSize, position }),\n          absolute && position !== 'inline' && 'absolute',\n          className,\n        )}\n        onClick={(e) => {\n          if (disabled) return\n          onClick?.(e)\n        }}\n        ref={ref}\n        {...props}\n      >\n        {children}\n        {label ? <span className=\"pr-1\">{label}</span> : null}\n      </Comp>\n    )\n  },\n)\nFab.displayName = 'Fab'\n\nexport { Fab }\n",
      "type": "registry:ui",
      "target": "~/components/ui/fab/Fab.tsx"
    },
    {
      "path": "packages/registry-react/components/fab/fab.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport const fabVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-full font-medium shadow-lg transition-[color,background-color,box-shadow,transform] duration-200 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] active:scale-95 touch-manipulation [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive: 'bg-destructive text-white hover:bg-destructive/90',\n        outline:\n          'border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n      },\n      size: {\n        mini: \"size-10 [&_svg:not([class*='size-'])]:size-4\",\n        default: 'size-14',\n        large: \"size-16 [&_svg:not([class*='size-'])]:size-7\",\n        extended: 'h-14 px-5',\n      },\n      position: {\n        'bottom-right': 'fixed bottom-6 right-6',\n        'bottom-left': 'fixed bottom-6 left-6',\n        'top-right': 'fixed top-6 right-6',\n        'top-left': 'fixed top-6 left-6',\n        'bottom-center': 'fixed bottom-6 left-1/2 -translate-x-1/2',\n        inline: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      position: 'bottom-right',\n    },\n  },\n)\n\nexport type FabVariants = VariantProps<typeof fabVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/fab/fab.variants.ts"
    },
    {
      "path": "packages/registry-react/components/fab/index.ts",
      "content": "export { Fab, type FabProps } from './Fab'\nexport { fabVariants, type FabVariants } from './fab.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/fab/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-slot"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Floating action button — a fixed or absolute positioned circular button for the primary screen action. Supports an icon (default), an extended label variant, mini/large sizes, four color variants, six anchor positions, and a disabled state.",
  "categories": [
    "control",
    "navigation"
  ]
}