{
  "name": "alert",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "alert.tsx",
      "content": "\"use client\";\r\n\r\nimport { createVariants, css, themeVars as theme } from \"@yugnex/core\";\r\nimport type { HTMLAttributes, ReactNode } from \"react\";\r\n\r\nconst alertVariants = createVariants({\r\n  base: {\r\n    display: \"flex\",\r\n    gap: theme.space[3],\r\n    padding: theme.space[4],\r\n    borderRadius: theme.radius.md,\r\n    border: \"1px solid transparent\",\r\n    fontFamily: theme.fontFamily.sans,\r\n    fontSize: theme.fontSize.sm,\r\n  },\r\n  variants: {\r\n    tone: {\r\n      info: {\r\n        backgroundColor: theme.color.muted,\r\n        borderColor: theme.color.border,\r\n        color: theme.color.foreground,\r\n      },\r\n      success: {\r\n        backgroundColor: theme.color.muted,\r\n        borderColor: theme.color.success,\r\n        color: theme.color.foreground,\r\n      },\r\n      warning: {\r\n        backgroundColor: theme.color.muted,\r\n        borderColor: theme.color.warning,\r\n        color: theme.color.foreground,\r\n      },\r\n      destructive: {\r\n        backgroundColor: theme.color.muted,\r\n        borderColor: theme.color.destructive,\r\n        color: theme.color.foreground,\r\n      },\r\n    },\r\n  },\r\n  defaultVariants: { tone: \"info\" },\r\n});\r\n\r\nconst iconClass = css({\r\n  flexShrink: 0,\r\n  width: \"1.125rem\",\r\n  height: \"1.125rem\",\r\n  marginTop: \"1px\",\r\n});\r\n\r\nconst contentClass = css({ minWidth: 0, flex: 1 });\r\n\r\nconst titleClass = css({\r\n  margin: 0,\r\n  fontWeight: theme.fontWeight.semibold,\r\n  fontSize: theme.fontSize.sm,\r\n});\r\n\r\nconst descriptionClass = css({\r\n  margin: `${theme.space[1]} 0 0`,\r\n  color: theme.color.mutedForeground,\r\n  fontSize: theme.fontSize.sm,\r\n  lineHeight: theme.lineHeight.sm,\r\n});\r\n\r\nconst TONE_COLOR = {\r\n  info: theme.color.mutedForeground,\r\n  success: theme.color.success,\r\n  warning: theme.color.warning,\r\n  destructive: theme.color.destructive,\r\n} as const;\r\n\r\nconst TONE_PATH = {\r\n  info: \"M9 12h.01M9 6v3.5M9 16.5A7.5 7.5 0 1 0 9 1.5a7.5 7.5 0 0 0 0 15Z\",\r\n  success: \"M5.5 9.5 8 12l4.5-5M9 16.5A7.5 7.5 0 1 0 9 1.5a7.5 7.5 0 0 0 0 15Z\",\r\n  warning: \"M9 6.5v3.5M9 13h.01M7.7 2.3 1.3 13.2A1.5 1.5 0 0 0 2.6 15.5h12.8a1.5 1.5 0 0 0 1.3-2.3L10.3 2.3a1.5 1.5 0 0 0-2.6 0Z\",\r\n  destructive: \"M11.5 6.5l-5 5M6.5 6.5l5 5M9 16.5A7.5 7.5 0 1 0 9 1.5a7.5 7.5 0 0 0 0 15Z\",\r\n} as const;\r\n\r\n// `title` is omitted from the native attributes so it can be a ReactNode here\r\n// rather than the string the HTML tooltip attribute expects.\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\r\n  tone?: \"info\" | \"success\" | \"warning\" | \"destructive\";\r\n  title?: ReactNode;\r\n  /** Replace the built-in tone icon. Pass `null` to remove it. */\r\n  icon?: ReactNode;\r\n  /** Trailing slot, e.g. a dismiss button. */\r\n  action?: ReactNode;\r\n}\r\n\r\n/** A callout for status, validation, or system messages. Destructive alerts announce assertively. */\r\nexport function Alert({ tone = \"info\", title, icon, action, className, children, ...props }: AlertProps) {\r\n  return (\r\n    <div\r\n      role=\"alert\"\r\n      aria-live={tone === \"destructive\" ? \"assertive\" : \"polite\"}\r\n      className={alertVariants({ tone, className })}\r\n      {...props}\r\n    >\r\n      {icon === null ? null : (\r\n        icon ?? (\r\n          <svg\r\n            className={iconClass}\r\n            viewBox=\"0 0 18 18\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\"\r\n            style={{ color: TONE_COLOR[tone] }}\r\n          >\r\n            <path\r\n              d={TONE_PATH[tone]}\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"1.5\"\r\n              strokeLinecap=\"round\"\r\n              strokeLinejoin=\"round\"\r\n            />\r\n          </svg>\r\n        )\r\n      )}\r\n      <div className={contentClass}>\r\n        {title ? <p className={titleClass}>{title}</p> : null}\r\n        {children ? <div className={descriptionClass}>{children}</div> : null}\r\n      </div>\r\n      {action}\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}