{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "success-result",
  "type": "registry:ui",
  "title": "Success Result",
  "description": "A Success Result component for displaying a success message.",
  "files": [
    {
      "path": "src/registry/ui/success-result.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SuccessResultProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  /** Replaces the default animated icon. */\n  icon?: React.ReactNode;\n  /** Slot for follow-up actions, e.g. a Button. */\n  action?: React.ReactNode;\n};\n\nexport function SuccessResult({\n  title = \"Success\",\n  description,\n  icon,\n  action,\n  className,\n  ...props\n}: SuccessResultProps) {\n  const reduceMotion = useReducedMotion();\n\n  return (\n    <div\n      data-slot=\"success-result\"\n      role=\"status\"\n      className={cn(\n        \"flex flex-col items-center gap-2 rounded-xl border bg-card p-8 text-center text-card-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        aria-hidden\n        className=\"mb-2 flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary\"\n      >\n        {icon ?? (\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"size-6\"\n          >\n            <motion.circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              initial={reduceMotion ? false : { pathLength: 0, opacity: 0 }}\n              animate={{ pathLength: 1, opacity: 1 }}\n              transition={{ duration: 0.5, ease: \"easeOut\" }}\n            />\n            <motion.path\n              d=\"m8 12 3 3 5-6\"\n              initial={reduceMotion ? false : { pathLength: 0, opacity: 0 }}\n              animate={{ pathLength: 1, opacity: 1 }}\n              transition={{ duration: 0.35, ease: \"easeOut\", delay: 0.4 }}\n            />\n          </svg>\n        )}\n      </div>\n      <motion.div\n        className=\"flex flex-col items-center gap-2\"\n        initial={reduceMotion ? false : { opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.4, ease: \"easeOut\", delay: 0.15 }}\n      >\n        <h3 className=\"text-lg font-semibold text-primary\">{title}</h3>\n        {description && (\n          <p className=\"max-w-sm text-sm text-balance text-muted-foreground\">{description}</p>\n        )}\n      </motion.div>\n      {action && <div className=\"mt-4 flex flex-wrap justify-center gap-2\">{action}</div>}\n    </div>\n  );\n}\n"
    }
  ],
  "dependencies": [
    "motion"
  ]
}