{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-tailwind",
  "type": "registry:item",
  "title": "Alert (Tailwind)",
  "description": "A component for displaying important messages to users.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/brook/tailwind/ui/alert.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst alertVariants = cva(\n  [\n    \"relative mt-6 w-full rounded-2xl\",\n    \"grid grid-cols-[1fr_auto] items-start gap-y-0.5 px-5 py-4\",\n    \"bg-card text-xs leading-[1.2]\",\n    \"border border-[var(--border)]\",\n    \"max-sm:gap-y-2 max-sm:px-3\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"[--alert-accent:var(--muted-foreground)]\",\n        destructive: \"[--alert-accent:var(--destructive)]\",\n        warning: \"[--alert-accent:var(--warning-foreground)]\",\n        success: \"[--alert-accent:var(--success)]\",\n        info: \"[--alert-accent:var(--info)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\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=\"-inset-px pointer-events-none absolute rounded-[inherit] shadow-[var(--shadow-ring)]\" />\n      <div className=\"-top-[13px] pointer-events-none absolute left-[15px] h-[26px] w-[26px] rounded-full bg-[var(--background)]\" />\n      <div\n        className=\"-top-[13px] pointer-events-none absolute left-[15px] h-[26px] w-[26px] rounded-full shadow-[0_0_0_1px_var(--border)]\"\n        style={{ clipPath: \"inset(50% -3px -3px -3px)\" }}\n      />\n      <div className=\"-top-[7px] pointer-events-none absolute left-[20px] flex h-4 w-4 items-center justify-center text-[color:var(--alert-accent)] [&_svg]:h-4 [&_svg]:w-4\">\n        {icon ?? <DefaultAlertIcon />}\n      </div>\n      {filteredChildren}\n    </div>\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"alert-title col-start-1 m-0 font-normal text-secondary-foreground text-sm leading-5 tracking-[-0.02em]\",\n        \"max-sm:font-medium max-sm:text-[0.9375rem]\",\n        className\n      )}\n      data-slot=\"alert-title\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"alert-description col-start-1 m-0 font-light text-muted-foreground text-sm leading-5 [&_p]:m-0\",\n        \"max-sm:text-[0.9375rem] max-sm:leading-[1.5]\",\n        className\n      )}\n      data-slot=\"alert-description\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"col-start-2 row-[1/span_2] flex h-full items-center justify-center gap-1\",\n        \"max-sm:col-span-full max-sm:row-auto max-sm:mt-2 max-sm:justify-stretch max-sm:[&>*]:w-full\",\n        className\n      )}\n      data-slot=\"alert-action\"\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertAction, AlertDescription, AlertTitle };\n",
      "type": "registry:file",
      "target": "~/components/ui/alert/alert.tsx"
    }
  ]
}