{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:item",
  "title": "Alert",
  "description": "A component for displaying important messages to users.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/brook/ui/alert/alert.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./alert.module.css\";\n\nconst alertVariants = cva(styles.alert, {\n  variants: {\n    variant: {\n      default: styles.default,\n      destructive: styles.destructive,\n      warning: styles.warning,\n      success: styles.success,\n      info: styles.info,\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nfunction DefaultAlertIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n      width=\"16\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 16V11.5\" />\n      <path d=\"M12 8.01172V8.00172\" />\n    </svg>\n  );\n}\n\ninterface AlertProps extends React.ComponentProps<\"div\">, VariantProps<typeof alertVariants> {\n  icon?: ReactNode;\n}\n\nfunction Alert({ className, variant, icon, children, ...props }: AlertProps) {\n  const filteredChildren = Array.isArray(children)\n    ? children.filter((child) => !(child && typeof child === \"object\" && \"type\" in child && child.type === \"svg\"))\n    : children;\n\n  return (\n    <div className={cn(alertVariants({ variant }), className)} data-slot=\"alert\" role=\"alert\" {...props}>\n      <div className={styles.shadowRing} />\n      <div className={styles.notchBg} />\n      <div className={styles.notchBorder} />\n      <div className={styles.iconWrap}>{icon ?? <DefaultAlertIcon />}</div>\n      {filteredChildren}\n    </div>\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.title, className)} data-slot=\"alert-title\" {...props} />;\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.description, className)} data-slot=\"alert-description\" {...props} />;\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.action, className)} data-slot=\"alert-action\" {...props} />;\n}\n\nexport { Alert, AlertAction, AlertDescription, AlertTitle };\n",
      "type": "registry:file",
      "target": "~/components/ui/alert/alert.tsx"
    },
    {
      "path": "registry/brook/ui/alert/alert.module.css",
      "content": ".alert {\n  position: relative;\n  margin-top: 1.5rem;\n  width: 100%;\n  border-radius: 1rem;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  align-items: start;\n  row-gap: 0.125rem;\n  padding: 1rem 1.25rem;\n  background-color: var(--card);\n  font-size: 0.75rem;\n  line-height: 1.2;\n  border: 1px solid var(--border);\n}\n\n.shadowRing {\n  position: absolute;\n  inset: -1px;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--shadow-ring);\n}\n\n.notchBg,\n.notchBorder {\n  position: absolute;\n  top: -13px;\n  left: 15px;\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  pointer-events: none;\n}\n\n.notchBg {\n  background-color: var(--background);\n}\n\n.notchBorder {\n  box-shadow: 0 0 0 1px var(--border);\n  clip-path: inset(50% -3px -3px -3px);\n}\n\n.iconWrap {\n  position: absolute;\n  top: -7px;\n  left: 20px;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  color: var(--alert-accent);\n}\n\n.iconWrap svg {\n  width: 16px;\n  height: 16px;\n}\n\n.title {\n  margin: 0;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  letter-spacing: -0.02em;\n  color: var(--secondary-foreground);\n  grid-column-start: 1;\n}\n\n.description {\n  margin: 0;\n  font-weight: 300;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: var(--muted-foreground);\n  grid-column-start: 1;\n}\n\n.description :global(p) {\n  margin: 0;\n}\n\n.action {\n  grid-column-start: 2;\n  grid-row: 1 / span 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 0.25rem;\n}\n\n.default {\n  --alert-accent: var(--muted-foreground);\n}\n\n.destructive {\n  --alert-accent: var(--destructive);\n}\n\n.warning {\n  --alert-accent: var(--warning-foreground);\n}\n\n.success {\n  --alert-accent: var(--success);\n}\n\n.info {\n  --alert-accent: var(--info);\n}\n\n@media (max-width: 640px) {\n  .alert {\n    padding: 1rem 0.75rem;\n    row-gap: 0.5rem;\n  }\n\n  .title {\n    font-size: 0.9375rem;\n    font-weight: 500;\n  }\n\n  .description {\n    font-size: 0.9375rem;\n    line-height: 1.5;\n  }\n\n  .action {\n    grid-column: 1 / -1;\n    grid-row: auto;\n    margin-top: 0.5rem;\n    justify-content: stretch;\n  }\n\n  .action > * {\n    width: 100%;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/alert/alert.module.css"
    }
  ]
}