{
  "$schema": "https://gremorie.com/schema/registry-item.json",
  "name": "rx-button",
  "type": "registry:block",
  "framework": "rx",
  "title": "Button (React)",
  "description": "Button primitive for the React edition - 6 variants x 8 sizes (including icon-only), `asChild` via Radix Slot.",
  "categories": [
    "core",
    "primitives",
    "forms"
  ],
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "rx-utils"
  ],
  "files": [
    {
      "path": "src/lib/button/button.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '@gremorie/rx-core';\n\n/**\n * Button - primary click target.\n *\n * Wires class-variance-authority to a\n * single CVA factory exposing six visual variants and four size\n * presets - including icon-only sizes - plus an `asChild` escape\n * hatch via Radix Slot.\n */\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n        'icon-xs': \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ButtonProps = React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  };\n\nfunction Button({\n  className,\n  variant = 'default',\n  size = 'default',\n  asChild = false,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : 'button';\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n",
      "type": "registry:component",
      "target": "src/components/gremorie/forms/button/button.tsx"
    }
  ],
  "cssVars": {},
  "usage": {
    "whenToUse": "TBD - document when to use rx-button.",
    "whenNotToUse": "TBD - document when to reach for something else.",
    "bestPractices": [],
    "antipatterns": []
  }
}