{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error-card",
  "title": "ErrorCard",
  "description": "A failure that needs a decision: what broke, the error, and what you can do.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "error-card/ErrorCard.css",
      "content": ".cr-error-card {\n  display: grid;\n  gap: var(--cr-space-3);\n  padding: var(--cr-space-5);\n  border-radius: var(--cr-radius-xl);\n  box-shadow: var(--cr-shadow-card), inset 0 0 0 1px var(--cr-color-status-failed-bg);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n}\n\n.cr-error-card__title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: var(--cr-font-size-lg);\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-error-card__title > .cr-icon {\n  flex: none;\n  padding: 3px;\n  border-radius: var(--cr-radius-full);\n  box-shadow: inset 0 0 0 1.5px var(--cr-color-danger-text);\n  color: var(--cr-color-danger-text);\n  font-size: 12px;\n}\n\n.cr-error-card__description {\n  margin: 0;\n  color: var(--cr-color-text-secondary);\n  line-height: var(--cr-font-line-height-normal);\n}\n\n.cr-error-card__details {\n  margin: 0;\n  padding: 10px var(--cr-space-3);\n  overflow-x: auto;\n  border-radius: 10px;\n  background: var(--cr-color-bg-subtle);\n  font-family: var(--cr-font-family-mono);\n  font-size: var(--cr-font-size-sm);\n  white-space: pre-wrap;\n}\n\n.cr-error-card__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n",
      "type": "registry:file",
      "target": "@components/creance/error-card/ErrorCard.css"
    },
    {
      "path": "error-card/ErrorCard.tsx",
      "content": "import { useId, type ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport { CrossIcon } from '@/lib/creance/icons';\nimport './ErrorCard.css';\n\nexport interface ErrorCardProps {\n  /** What failed and where: \"Run 40 failed at step 3\". */\n  title: ReactNode;\n  /** Why, in a sentence. */\n  description?: ReactNode;\n  /** The raw error, shown in monospace. */\n  details?: string;\n  /** Next steps: retry, view logs. */\n  actions?: ReactNode;\n  /** Heading level of the title. Default 3. */\n  headingLevel?: 2 | 3 | 4;\n  className?: string;\n}\n\n/** A failure that needs a decision: what broke, the error itself, and what you can do next. */\nexport function ErrorCard({ title, description, details, actions, headingLevel = 3, className }: ErrorCardProps) {\n  const id = useId();\n  const H = `h${headingLevel}` as const;\n  return (\n    <section aria-labelledby={id} className={cx('cr-error-card cr-surface', className)}>\n      <H id={id} className=\"cr-error-card__title\">\n        <CrossIcon />\n        {title}\n      </H>\n      {description && <p className=\"cr-error-card__description\">{description}</p>}\n      {details && <pre className=\"cr-error-card__details\">{details}</pre>}\n      {actions && <div className=\"cr-error-card__actions\">{actions}</div>}\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/error-card/ErrorCard.tsx"
    }
  ],
  "categories": [
    "molecule",
    "feedback"
  ],
  "type": "registry:ui"
}