{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "face-rating-demo",
  "title": "Face Rating Demo",
  "description": "Demo usage for the Face Rating component",
  "registryDependencies": [
    "@spectrumui/face-rating"
  ],
  "files": [
    {
      "path": "app/registry/face-rating/face-rating-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport { FaceRating } from \"@/components/spectrumui/face-rating\"\n\nexport default function FaceRatingDemo() {\n  const [rating, setRating] = useState(0)\n  const [submitted, setSubmitted] = useState(false)\n\n  return (\n    <div className=\"flex w-full items-center justify-center py-10\">\n      <div className=\"flex w-full max-w-sm flex-col items-center gap-6 rounded-2xl border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-neutral-900\">\n        <div className=\"text-center\">\n          <h3 className=\"text-base font-semibold text-neutral-900 dark:text-neutral-100\">\n            How was your experience?\n          </h3>\n          <p className=\"mt-1 text-sm text-neutral-500 dark:text-neutral-400\">\n            Hover a segment to preview, click to commit\n          </p>\n        </div>\n\n        <FaceRating\n          onValueChange={(value) => {\n            setRating(value)\n            setSubmitted(false)\n          }}\n        />\n\n        <button\n          type=\"button\"\n          disabled={rating === 0}\n          onClick={() => setSubmitted(true)}\n          className=\"h-9 w-full rounded-full bg-neutral-900 text-sm font-medium text-white transition-colors hover:bg-neutral-800 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200 dark:focus-visible:ring-neutral-300\"\n        >\n          {submitted ? \"Thanks for the feedback!\" : \"Submit feedback\"}\n        </button>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/face-rating-demo.tsx"
    }
  ],
  "type": "registry:component"
}