{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-44",
  "title": "Star button",
  "description": "A primary star button with a quiet count.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/button.json",
    "https://ui.ndekocode.dev/r/icons.json",
    "https://ui.ndekocode.dev/r/motion-number.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/button/button-44.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { MotionNumber } from '@/components/core/motion-number';\nimport { StarIcon } from '@/registry/ndeko/lib/icons';\nimport { Button } from '@/registry/ndeko/ui/button';\n\nconst BASE_STARS = 729;\n\nexport default function Button44() {\n  const [isStarred, setIsStarred] = useState(false);\n  const ownStar = Number(isStarred);\n  const starCount = BASE_STARS + ownStar;\n\n  function toggleStar() {\n    setIsStarred((current) => !current);\n  }\n\n  return (\n    <Button aria-pressed={isStarred} onClick={toggleStar}>\n      <StarIcon className='-ms-1 opacity-60 transition-opacity duration-150 group-aria-pressed/button:opacity-100' />\n      <span className='flex items-baseline gap-2'>\n        Star\n        <span className='text-primary-foreground/70 relative flex text-xs tabular-nums'>\n          <span className='flex' aria-hidden='true'>\n            <MotionNumber value={starCount} />\n          </span>\n          <span className='sr-only'>{starCount} stars</span>\n        </span>\n      </span>\n    </Button>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "button"
  ],
  "type": "registry:component"
}