{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "description": "A message in the page: what happened and what to do.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "alert/Alert.css",
      "content": ".cr-alert {\n  display: flex;\n  gap: var(--cr-space-3);\n  padding: var(--cr-space-4) 18px;\n  border-radius: var(--cr-radius-lg);\n  background: var(--cr-color-glass-tile);\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-alert > .cr-icon {\n  margin-top: 2px;\n  font-size: 18px;\n}\n\n.cr-alert[data-tone='danger'] {\n  background: var(--cr-color-status-failed-bg);\n}\n\n.cr-alert[data-tone='danger'] :is(.cr-icon, .cr-alert__title) {\n  color: var(--cr-color-status-failed-fg);\n}\n\n.cr-alert__body {\n  display: grid;\n  gap: var(--cr-space-1);\n  min-width: 0;\n}\n\n.cr-alert__text {\n  color: var(--cr-color-text-secondary);\n  font-size: var(--cr-font-size-md);\n  line-height: var(--cr-font-line-height-normal);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/alert/Alert.css"
    },
    {
      "path": "alert/Alert.tsx",
      "content": "import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport { AlertIcon, InfoIcon } from '@/lib/creance/icons';\nimport './Alert.css';\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title: ReactNode;\n  /** `danger` for failures. It is announced when it appears, so render it only when something just went wrong. */\n  tone?: 'info' | 'danger';\n}\n\n/** A message in the page: what happened, and what to do about it. */\nexport function Alert({ title, tone = 'info', className, children, ...props }: AlertProps) {\n  const Icon = tone === 'danger' ? AlertIcon : InfoIcon;\n  return (\n    <div role={tone === 'danger' ? 'alert' : 'note'} className={cx('cr-alert', className)} data-tone={tone} {...props}>\n      <Icon />\n      <div className=\"cr-alert__body\">\n        <strong className=\"cr-alert__title\">{title}</strong>\n        {children && <div className=\"cr-alert__text\">{children}</div>}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/alert/Alert.tsx"
    }
  ],
  "categories": [
    "molecule",
    "feedback"
  ],
  "type": "registry:ui"
}