{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "description": "Contextual feedback message. 8 themes (primary, secondary, success, danger, warning, info, light, dark) with optional dismiss button.",
  "dependencies": ["class-variance-authority", "lucide-react"],
  "registryDependencies": [
    "https://indiacn.in/r/theme.json",
    "https://indiacn.in/r/typography.json"
  ],
  "files": [
    {
      "path": "components/ui/alert.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport { ComponentProps, useState } from 'react';\n\nimport { Body2, Headline6 } from '@/components/ui/typography';\nimport { cn } from '@/lib/utils';\n\n/*\n * UX4G alert: border-radius 0.25rem, padding 1rem, border 1px solid.\n * Colors use the --alert-{theme}-{color|bg|border} CSS variables defined in globals.css.\n * Icons are inline (d-flex align-items-center) — use <AlertIcon> to wrap content.\n * alert-link: font-weight 700. alert-dismissible: padding-right 3rem.\n */\nconst ALERT_VARIANTS = cva('relative w-full rounded border p-4 mb-4', {\n  variants: {\n    theme: {\n      primary:\n        'border-(--alert-primary-border) bg-(--alert-primary-bg) text-(--alert-primary-color)',\n      secondary:\n        'border-(--alert-secondary-border) bg-(--alert-secondary-bg) text-(--alert-secondary-color)',\n      success:\n        'border-(--alert-success-border) bg-(--alert-success-bg) text-(--alert-success-color)',\n      danger: 'border-(--alert-danger-border) bg-(--alert-danger-bg) text-(--alert-danger-color)',\n      warning:\n        'border-(--alert-warning-border) bg-(--alert-warning-bg) text-(--alert-warning-color)',\n      info: 'border-(--alert-info-border) bg-(--alert-info-bg) text-(--alert-info-color)',\n      light: 'border-(--alert-light-border) bg-(--alert-light-bg) text-(--alert-light-color)',\n      dark: 'border-(--alert-dark-border) bg-(--alert-dark-bg) text-(--alert-dark-color)',\n    },\n  },\n  defaultVariants: {\n    theme: 'primary',\n  },\n});\n\ninterface IAlertProps extends ComponentProps<'div'>, VariantProps<typeof ALERT_VARIANTS> {\n  dismissible?: boolean;\n  onDismiss?: () => void;\n}\n\n/**\n * Alert component for contextual feedback messages.\n * Matches the UX4G 2.0 Alert specification.\n *\n * Themes: primary, secondary, success, danger, warning, info, light, dark.\n * Icons render inline — compose with <AlertIcon> or place an icon before <AlertTitle>.\n */\nfunction Alert({ className, theme, dismissible, onDismiss, children, ...props }: IAlertProps) {\n  const [visible, setVisible] = useState(true);\n\n  if (!visible) return null;\n\n  const handleDismiss = () => {\n    setVisible(false);\n    onDismiss?.();\n  };\n\n  return (\n    <div\n      role='alert'\n      className={cn(ALERT_VARIANTS({ theme, className }), dismissible && 'pr-12')}\n      {...props}\n    >\n      {children}\n      {dismissible && (\n        <button\n          type='button'\n          onClick={handleDismiss}\n          className='focus:shadow-focus-primary absolute top-0 right-0 rounded-lg px-4 py-5 opacity-70 transition-opacity hover:opacity-100 focus:outline-none'\n          aria-label='Close'\n        >\n          <X className='size-4' />\n        </button>\n      )}\n    </div>\n  );\n}\n\n/** Alert title — UX4G .alert-heading, inherits color. */\nfunction AlertTitle({ className, children, ...props }: ComponentProps<'h5'>) {\n  return (\n    <Headline6 className={cn('mb-1 text-inherit', className)} {...props}>\n      {children}\n    </Headline6>\n  );\n}\n\n/** Alert description text. */\nfunction AlertDescription({ className, children, ...props }: ComponentProps<'div'>) {\n  return (\n    <div className={cn('[&_p]:leading-relaxed', className)} {...props}>\n      <Body2>{children}</Body2>\n    </div>\n  );\n}\n\n/** Styled link inside an alert. UX4G: font-weight 700. */\nfunction AlertLink({ className, children, ...props }: ComponentProps<'a'>) {\n  return (\n    <a className={cn('font-bold underline underline-offset-4', className)} {...props}>\n      {children}\n    </a>\n  );\n}\n\n/** Wrapper for inline icon + content layout inside an alert. */\nfunction AlertIcon({ className, children, ...props }: ComponentProps<'div'>) {\n  return (\n    <div className={cn('flex items-center gap-2', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertLink, AlertIcon, ALERT_VARIANTS };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}