{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "focus-button",
  "title": "Focus Button",
  "description": "A button with a focus ring animation effect.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/focus-button/focus-button.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface FocusButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  className?: string;\n  dashColor?: string;\n}\n\nconst FocusButton = ({\n  children,\n  className,\n  dashColor,\n  ...props\n}: FocusButtonProps) => {\n  return (\n    <button\n      className={cn(\n        \"group relative px-6 py-3 text-black dark:text-white leading-none text-[16px] tracking-normal cursor-pointer\",\n        className\n      )}\n      {...props}\n    >\n      {/* Main Border */}\n      <div className=\"absolute inset-0 border border-gray-200 dark:border-white/20\" />\n\n      {/* Corner Dashes */}\n      <CornerDashes color={dashColor} />\n\n      {/* Content */}\n      <span className=\"relative z-10\">{children}</span>\n    </button>\n  );\n};\n\nconst CornerDashes = ({ color }: { color?: string }) => {\n  return (\n    <>\n      {/* Top Right Corner */}\n      <div\n        className={cn(\n          \"absolute top-0 right-0 w-2 h-2 border-t border-r border-black dark:border-white transition-all duration-300 group-hover:w-full group-hover:h-full group-hover:dark:border-white group-hover:border-black\"\n        )}\n        style={color ? { borderColor: color } : undefined}\n      />\n\n      {/* Bottom Left Corner */}\n      <div\n        className={cn(\n          \"absolute bottom-0 left-0 w-2 h-2 border-b border-l border-black dark:border-white transition-all duration-300 group-hover:w-full group-hover:h-full group-hover:dark:border-white group-hover:border-black\"\n        )}\n        style={color ? { borderColor: color } : undefined}\n      />\n    </>\n  );\n};\n\nexport default FocusButton;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}