{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "fab",
  "title": "Fab",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/fab/Fab.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { fabVariants } from './fab.variants'\n\ntype Variant = 'default' | 'secondary' | 'destructive' | 'outline'\ntype Size = 'mini' | 'default' | 'large' | 'extended'\ntype Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center' | 'inline'\n\ninterface Props {\n  /** Label text — renders an extended FAB. Use the default slot for an icon. */\n  label?: string\n  as?: string\n  asChild?: boolean\n  variant?: Variant\n  size?: Size\n  position?: Position\n  /** Use absolute instead of fixed positioning (for contained FABs). */\n  absolute?: boolean\n  disabled?: boolean\n  /** Accessible label. Defaults to the label prop or 'Floating action'. */\n  ariaLabel?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n  variant: 'default',\n  size: 'default',\n  position: 'bottom-right',\n  absolute: false,\n})\n\nconst emit = defineEmits<{ (e: 'click', event: MouseEvent): void }>()\n\nfunction onClick(e: MouseEvent) {\n  if (props.disabled) return\n  emit('click', e)\n}\n\nconst resolvedSize = () => (props.label ? 'extended' : props.size)\n</script>\n\n<template>\n  <Primitive\n    data-uipkge\n    data-slot=\"fab\"\n    :data-variant=\"variant\"\n    :data-size=\"resolvedSize()\"\n    :data-position=\"position\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :disabled=\"disabled\"\n    :aria-label=\"ariaLabel || label || 'Floating action'\"\n    :class=\"\n      cn(\n        fabVariants({ variant, size: resolvedSize(), position }),\n        absolute && position !== 'inline' && 'absolute',\n        props.class,\n      )\n    \"\n    @click=\"onClick\"\n  >\n    <slot />\n    <span v-if=\"label\" class=\"pr-1\">{{ label }}</span>\n  </Primitive>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/fab/Fab.vue"
    },
    {
      "path": "packages/registry-vue/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": "~/app/components/ui/fab/fab.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/fab/index.ts",
      "content": "export { default as Fab } from './Fab.vue'\n\nexport { fabVariants, type FabVariants } from './fab.variants'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/fab/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "reka-ui"
  ],
  "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"
  ]
}