{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error-result",
  "type": "registry:ui",
  "title": "Error Result",
  "description": "An Error Result component for displaying an error message.",
  "files": [
    {
      "path": "src/registry/ui/error-result.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { CircleAlert } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ErrorResultProps = 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 ErrorResult({\n  title = \"Something went wrong\",\n  description,\n  icon,\n  action,\n  className,\n  ...props\n}: ErrorResultProps) {\n  const reduceMotion = useReducedMotion();\n\n  return (\n    <div\n      data-slot=\"error-result\"\n      role=\"alert\"\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      <motion.div\n        aria-hidden\n        className=\"mb-2 flex size-12 items-center justify-center rounded-full bg-destructive/10 text-destructive\"\n        initial={reduceMotion ? false : { opacity: 0, scale: 0.8 }}\n        animate={\n          reduceMotion\n            ? { opacity: 1, scale: 1, x: 0 }\n            : { opacity: 1, scale: 1, x: [0, -6, 6, -4, 4, 0] }\n        }\n        transition={{ duration: 0.5, ease: \"easeInOut\", x: { delay: 0.2, duration: 0.45 } }}\n      >\n        {icon ?? <CircleAlert className=\"size-6\" />}\n      </motion.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-destructive\">{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": [
    "lucide-react",
    "motion"
  ]
}