{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "title": "Alert",
  "description": "A message that stays on the page: an error, a warning, a note. For short-lived feedback use a toast. Danger alerts default to role=\"alert\" (read out at once); the others to role=\"status\".",
  "dependencies": [
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/alert.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\nexport const alertVariants = tv({\n  slots: {\n    root: [\n      \"relative grid w-full grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border bg-card p-4 text-sm text-card-foreground\",\n    ],\n    icon: \"mt-0.5 shrink-0 [&_svg]:size-4\",\n    body: \"col-start-2 grid min-w-0 gap-1\",\n    title: \"font-medium leading-snug\",\n    description: \"text-muted-foreground [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-4\",\n    action: \"col-start-3 row-start-1 -my-1 flex items-center gap-2\",\n  },\n  variants: {\n    color: {\n      neutral: { root: \"border-border\", icon: \"text-foreground\" },\n      primary: { root: \"border-border\", icon: \"text-primary\" },\n      success: { root: \"border-success/40\", icon: \"text-success-text\", title: \"text-success-text\" },\n      warning: { root: \"border-warning/50\", icon: \"text-warning-text\", title: \"text-warning-text\" },\n      danger: { root: \"border-destructive/40\", icon: \"text-destructive-text\", title: \"text-destructive-text\" },\n    },\n  },\n  defaultVariants: { color: \"neutral\" },\n});\n\ntype AlertStyles = ReturnType<typeof alertVariants>;\nconst AlertContext = React.createContext<AlertStyles>(alertVariants());\n\nexport interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"color\">, VariantProps<typeof alertVariants> {\n  /** Shown before the text. The title still says what kind of message it is: color alone never does. */\n  icon?: React.ReactNode;\n  /** Buttons or links on the right, e.g. Retry or Dismiss. */\n  action?: React.ReactNode;\n  classNames?: { root?: string; icon?: string; body?: string; action?: string };\n}\n\n/**\n * A message that stays on the page: an error, a warning, a note. For short-lived feedback use a toast.\n * Danger alerts default to role=\"alert\" (read out at once); the others to role=\"status\".\n */\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, classNames, color, icon, action, role, children, ...props }, ref) => {\n    const styles = alertVariants({ color });\n    return (\n      <AlertContext.Provider value={styles}>\n        <div\n          ref={ref}\n          role={role ?? (color === \"danger\" ? \"alert\" : \"status\")}\n          className={styles.root({ className: cn(classNames?.root, className) })}\n          {...props}\n        >\n          {icon && (\n            <span aria-hidden className={styles.icon({ className: classNames?.icon })}>\n              {icon}\n            </span>\n          )}\n          <div className={styles.body({ className: cn(!icon && \"col-start-1 col-end-3\", classNames?.body) })}>{children}</div>\n          {action && <div className={styles.action({ className: classNames?.action })}>{action}</div>}\n        </div>\n      </AlertContext.Provider>\n    );\n  },\n);\nAlert.displayName = \"Alert\";\n\nexport const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => {\n  const styles = React.useContext(AlertContext);\n  return <p ref={ref} className={styles.title({ className })} {...props} />;\n});\nAlertTitle.displayName = \"AlertTitle\";\n\nexport const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {\n  const styles = React.useContext(AlertContext);\n  return <div ref={ref} className={styles.description({ className })} {...props} />;\n});\nAlertDescription.displayName = \"AlertDescription\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/alert",
  "meta": {
    "hash": "04a93ea02fd94364",
    "source": "packages/react/src/components/alert.tsx",
    "exports": [
      "alertVariants",
      "AlertProps",
      "Alert",
      "AlertTitle",
      "AlertDescription"
    ],
    "props": {
      "Alert": {
        "extends": "Omit<React.HTMLAttributes<HTMLDivElement>, \"color\">, VariantProps<typeof alertVariants>",
        "props": [
          {
            "name": "icon",
            "optional": true,
            "type": "React.ReactNode",
            "description": "Shown before the text. The title still says what kind of message it is: color alone never does."
          },
          {
            "name": "action",
            "optional": true,
            "type": "React.ReactNode",
            "description": "Buttons or links on the right, e.g. Retry or Dismiss."
          },
          {
            "name": "classNames",
            "optional": true,
            "type": "{ root?: string; icon?: string; body?: string; action?: string }"
          }
        ]
      }
    },
    "variants": {
      "variants": {
        "color": [
          "neutral",
          "primary",
          "success",
          "warning",
          "danger"
        ]
      },
      "defaultVariants": {
        "color": "neutral"
      }
    },
    "docsUrl": "https://junco.madebytobi.com/docs/components/alert"
  }
}