{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "github-star-button",
  "title": "GitHub Star Button",
  "description": "An interactive star button with live star count that links to a GitHub repository. Perfect for call-to-action elements.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/blocks/github/github-star-button/components/elements/github-star-button.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface GitHubStarButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  owner: string;\n  repo: string;\n  staticCount?: number;\n  showCount?: boolean;\n  variant?: \"default\" | \"outline\";\n}\n\nfunction formatNumber(num: number): string {\n  if (num >= 1000000) {\n    return `${(num / 1000000).toFixed(1)}M`;\n  }\n  if (num >= 1000) {\n    return `${(num / 1000).toFixed(1)}K`;\n  }\n  return num.toString();\n}\n\nfunction StarIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z\" />\n    </svg>\n  );\n}\n\nexport function GitHubStarButton({\n  owner,\n  repo,\n  staticCount,\n  showCount = true,\n  variant = \"default\",\n  className,\n  onClick,\n  ...props\n}: GitHubStarButtonProps) {\n  const [count, setCount] = useState<number | null>(staticCount ?? null);\n  const [loading, setLoading] = useState(staticCount === undefined);\n  const [isHovered, setIsHovered] = useState(false);\n\n  useEffect(() => {\n    if (staticCount !== undefined) return;\n\n    async function fetchCount() {\n      try {\n        setLoading(true);\n        const response = await fetch(\n          `https://api.github.com/repos/${owner}/${repo}`\n        );\n        if (response.ok) {\n          const data = await response.json();\n          setCount(data.stargazers_count);\n        }\n      } catch {\n        // Silently fail - count will remain null\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchCount();\n  }, [owner, repo, staticCount]);\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    window.open(`https://github.com/${owner}/${repo}`, \"_blank\");\n    onClick?.(e);\n  };\n\n  const baseStyles =\n    \"inline-flex items-center gap-2 h-9 px-4 rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\";\n\n  const variantStyles = {\n    default:\n      \"bg-foreground text-background hover:bg-foreground/90 active:scale-[0.98]\",\n    outline:\n      \"border border-border bg-background hover:bg-accent hover:border-foreground/20 active:scale-[0.98]\",\n  };\n\n  return (\n    <button\n      data-slot=\"github-star-button\"\n      type=\"button\"\n      className={cn(baseStyles, variantStyles[variant], className)}\n      onClick={handleClick}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      {...props}\n    >\n      <StarIcon\n        className={cn(\n          \"w-4 h-4 transition-transform duration-200\",\n          isHovered && \"scale-110\"\n        )}\n      />\n      <span>Star</span>\n      {showCount && (\n        <>\n          <span className=\"w-px h-4 bg-current opacity-20\" />\n          {loading ? (\n            <span className=\"w-8 h-4 bg-current/20 rounded animate-pulse\" />\n          ) : (\n            <span className=\"tabular-nums\">\n              {count !== null ? formatNumber(count) : \"—\"}\n            </span>\n          )}\n        </>\n      )}\n    </button>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Fetches star count from GitHub API. Supports 'default' and 'outline' variants. Opens repository in new tab on click.",
  "categories": [
    "github"
  ],
  "type": "registry:block"
}